:root, [data-theme="dark"] {
  --bg:#0F0F12; --surface:#17171C; --surface2:#23232B; --line:#23232B; --line2:#2E2E38; --line3:#3A3A44;
  --text:#F2F2F5; --muted:#B4B4BE; --muted2:#9C9CA8; --placeholder:#6E6E7A;
  --chip:#1E1E25; --chipText:#C8C8D0;
  --accent:#8CCBFF; --accentText:#8CCBFF; --onAccent:#0B1620; --accentSoft:#14283A; --accentSoftText:#A9D7FF;
  --danger:#FF7A88; --heart:#FF5A6E; --ok:#7EE2A8;
  color-scheme: dark;
}
[data-theme="light"] {
  --bg:#FFFFFF; --surface:#F4F6F9; --surface2:#EAEDF2; --line:#E3E6EB; --line2:#D5D9E0; --line3:#C3C8D0;
  --text:#14161A; --muted:#4A505A; --muted2:#5F6570; --placeholder:#8A9099;
  --chip:#EEF1F5; --chipText:#3A404A;
  --accent:#8CCBFF; --accentText:#1667B0; --onAccent:#0B1620; --accentSoft:#DDEEFF; --accentSoftText:#124E86;
  --danger:#C62839; --heart:#E0284A; --ok:#17794A;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
body { font-family: Manrope, system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
#app { max-width: 560px; margin: 0 auto; min-height: 100dvh; border-inline: 1px solid var(--line); }
@media (max-width: 560px) { #app { border: 0; } }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { opacity: .5; cursor: default; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.grow { flex: 1; min-width: 0; }
.row { display: flex; align-items: center; }
.row.gap { gap: 8px; } .row.between { justify-content: space-between; gap: 12px; }
.pad { padding: 16px 20px; } .pad-x { padding: 0 20px; }
.stack { display: flex; flex-direction: column; gap: 18px; }
.stack-lg { display: flex; flex-direction: column; gap: 28px; }
.muted { color: var(--muted2); } .center-text { text-align: center; }
.meta { font-size: 12px; color: var(--muted2); margin-top: 2px; }
.error { color: var(--danger); font-size: 14px; margin: 0; }
.ok { color: var(--ok); font-size: 14px; margin: 0; }
h2 { font-size: 16px; font-weight: 800; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }

.splash { min-height: 100dvh; display: flex; align-items: center; justify-content: center; color: var(--accentText); }

/* buttons */
.btn { height: 50px; border-radius: 14px; border: 0; font-weight: 800; font-size: 15px; padding: 0 18px; display: inline-flex; align-items: center; justify-content: center; }
.btn.small { height: 40px; font-size: 14px; border-radius: 10px; padding: 0 14px; }
.btn.primary { background: var(--accent); color: var(--onAccent); }
.btn.soft { background: var(--surface2); color: var(--text); height: 42px; border-radius: 10px; font-size: 14px; }
.btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--line3); }
.link { background: none; border: 0; padding: 8px 4px; min-height: 44px; color: var(--accentText); font-weight: 700; font-size: 15px; }
.link.strong { font-weight: 800; }
.link.muted { color: var(--muted2); font-weight: 500; font-size: 14px; padding: 2px 0; min-height: 32px; text-align: left; }
.link.small { font-size: 12px; }
.icon-btn { width: 44px; height: 44px; border: 0; background: transparent; color: var(--text); display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; flex-shrink: 0; }
.icon-btn.small { width: 32px; height: 32px; color: var(--muted2); }
.icon-btn.small svg { width: 16px; height: 16px; }
.icon-btn.liked { color: var(--heart); }
.icon-btn.bordered { border: 1px solid var(--line3); }

/* forms */
label, .field { display: flex; flex-direction: column; gap: 8px; font-size: 13px; font-weight: 600; color: var(--muted); }
input:not([type=file]), textarea { min-height: 50px; border-radius: 12px; border: 1px solid var(--line2); background: var(--surface); color: var(--text); padding: 12px 14px; font-size: 16px; font-weight: 500; resize: none; width: 100%; }
input::placeholder, textarea::placeholder { color: var(--placeholder); }
.code { letter-spacing: 1px; text-transform: uppercase; }
.form { display: flex; flex-direction: column; gap: 16px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.form.card { margin-top: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line3); background: transparent; color: var(--text); font-weight: 700; font-size: 13px; white-space: nowrap; }
.chip.on { background: var(--accent); border-color: var(--accent); color: var(--onAccent); }

/* auth */
.auth { min-height: 100dvh; padding: 56px 28px 40px; display: flex; flex-direction: column; gap: 0; }
.auth.center { justify-content: center; gap: 12px; }
.auth h1 { font-size: 34px; font-weight: 800; letter-spacing: -1px; margin: 24px 0 8px; line-height: 1.1; }
.auth .sub { margin: 0 0 28px; font-size: 16px; line-height: 1.5; color: var(--muted); }
.logo { width: 64px; height: 64px; border-radius: 18px; background: var(--accent); color: var(--onAccent); display: flex; align-items: center; justify-content: center; }
.logo svg { width: 32px; height: 32px; }
.demo-note { background: var(--accentSoft); color: var(--accentSoftText); padding: 12px 14px; border-radius: 12px; font-size: 13px; line-height: 1.45; margin: 0 0 20px; font-weight: 600; }
.fine { font-size: 13px; line-height: 1.5; color: var(--muted2); text-align: center; margin: 16px 0 0; }
.fine.left { text-align: left; margin: 0; font-size: 12px; }
.switch { text-align: center; color: var(--muted); font-size: 14px; margin: 8px 0 0; }

/* shell */
.shell main { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
.top { position: sticky; top: 0; z-index: 5; background: var(--bg); display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px 10px 20px; padding-top: calc(10px + env(safe-area-inset-top)); border-bottom: 1px solid var(--line); min-height: 64px; }
.brand { font-size: 22px; font-weight: 800; letter-spacing: -.5px; }
.brand.small { font-size: 18px; }
.tabs { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 560px; display: flex; justify-content: space-around; background: var(--bg); border-top: 1px solid var(--line); padding: 8px 0 calc(8px + env(safe-area-inset-bottom)); z-index: 10; }
.tabs button { width: 56px; height: 48px; border: 0; background: transparent; color: var(--text); display: flex; align-items: center; justify-content: center; }
.tabs button.on { color: var(--accentText); }
.nav-avatar { width: 28px; height: 28px; border-radius: 50%; color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.nav-avatar.ring { outline: 2px solid var(--accent); outline-offset: 2px; }
.avatar { border-radius: 50%; color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* feed */
.filter-row { padding: 12px 20px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.filter-row .chips { flex-wrap: nowrap; }
.post { border-bottom: 1px solid var(--line); padding-bottom: 14px; }
.post-head { display: flex; align-items: center; gap: 10px; padding: 12px 8px 12px 20px; }
.name { font-weight: 700; font-size: 14px; }
.aud { color: var(--accentText); font-weight: 600; }
.media { background: var(--surface2); }
.media img, .media video { display: block; width: 100%; max-height: 640px; object-fit: contain; background: #000; }
.media img { object-fit: cover; aspect-ratio: auto; }
.actions { display: flex; padding: 4px 10px 0; }
.post-body { padding: 0 20px; display: flex; flex-direction: column; gap: 4px; }
.likes { font-size: 14px; font-weight: 700; }
.caption { font-size: 14px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.empty { padding: 60px 20px; text-align: center; color: var(--muted2); display: flex; flex-direction: column; align-items: center; gap: 8px; }

/* comments sheet */
.sheet-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 20; display: flex; align-items: flex-end; justify-content: center; }
.sheet { width: 100%; max-width: 560px; max-height: 80dvh; background: var(--bg); border-radius: 20px 20px 0 0; display: flex; flex-direction: column; padding-bottom: env(safe-area-inset-bottom); }
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 8px 20px; border-bottom: 1px solid var(--line); }
.sheet-body { overflow-y: auto; padding: 8px 0; flex: 1; }
.comment { display: flex; gap: 10px; padding: 10px 12px 10px 20px; font-size: 14px; line-height: 1.4; align-items: flex-start; overflow-wrap: anywhere; }
.comment-form { display: flex; gap: 8px; padding: 10px 12px 10px 20px; border-top: 1px solid var(--line); align-items: center; }
.comment-form input { min-height: 44px; }

/* new post */
.picker { display: block; width: 100%; aspect-ratio: 1; border: 0; padding: 0; background: var(--surface); color: var(--muted); border-bottom: 1px solid var(--line); overflow: hidden; }
.picker img, .picker video { width: 100%; height: 100%; object-fit: cover; display: block; }
.picker-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; height: 100%; font-weight: 700; }
.picker-empty svg { width: 44px; height: 44px; }
.picker-empty small { font-weight: 500; color: var(--muted2); }
.lock { margin: 0; font-size: 13px; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }

/* profile */
.profile-head { display: flex; align-items: center; gap: 12px; padding: 20px; }
.profile-head .avatar { margin-right: 12px; }
.stat { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; color: var(--muted2); }
.stat b { font-size: 18px; color: var(--text); }
.badge { display: inline-block; font-size: 12px; font-weight: 800; padding: 5px 11px; border-radius: 999px; background: var(--accentSoft); color: var(--accentSoftText); white-space: nowrap; }
.stat .badge { font-size: 13px; }
.tag { display: inline-block; font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 999px; background: var(--chip); color: var(--chipText); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.bio { margin: 0 0 12px; font-size: 14px; line-height: 1.45; color: var(--chipText); white-space: pre-wrap; }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; margin-top: 20px; }
.tile { aspect-ratio: 1; background: var(--surface2); position: relative; overflow: hidden; }
.tile img, .tile video { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile-play { position: absolute; top: 6px; right: 6px; }

/* team */
.label { font-size: 13px; font-weight: 600; color: var(--muted); }
.code-big { font-size: 22px; font-weight: 800; letter-spacing: 2px; overflow-wrap: anywhere; }
.count { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--accent); color: var(--onAccent); font-size: 12px; display: inline-flex; align-items: center; justify-content: center; }
.count.soft { background: var(--surface2); color: var(--muted); }
.request { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); margin-bottom: 8px; font-size: 14px; }
.member { display: flex; align-items: center; gap: 12px; padding: 8px 0; font-size: 14px; }