/* ════════════════════════════════════════════════════════════════
   NetizenSurvey — product design system.
   Tokens + components lifted from the existing static page and the
   product MVP mockup (docs/mockups/netizensurvey-mockup.html), so the
   real product matches the approved visual target. Shared by the feed
   (index) and the server-rendered permalink page.
   ════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* BRAND: indigo-blue matching the app mark (richer + more intentional than flat blue) */
  --blue-600:#2f4fe0; --blue-700:#2840c4; --blue-500:#4f6bf0; --blue-50:#eef1fe;
  --indigo-900:#1e1b4b; --indigo-700:#3730a3;
  /* warm-neutral grays (paper-leaning, not cold) */
  --gray-50:#f7f7f5; --gray-100:#efeef0; --gray-200:#e4e3e8; --gray-300:#d2d1da;
  --gray-400:#9b99a8; --gray-500:#6c6a7c; --gray-600:#4d4b5c; --gray-700:#393748;
  --gray-800:#262433; --gray-900:#14121f; --white:#fff;
  --green-500:#10b981; --amber-400:#f59e0b; --red-500:#ef4444;
  /* layered shadows tuned to the indigo brand (cool, soft, real depth) */
  --shadow-sm:0 1px 2px rgba(30,27,75,.06),0 1px 3px rgba(30,27,75,.08);
  --shadow-md:0 6px 18px rgba(30,27,75,.10),0 2px 6px rgba(30,27,75,.06);
  --shadow-lg:0 18px 48px rgba(30,27,75,.16),0 6px 16px rgba(30,27,75,.08);
  --radius:14px;
  --font:'Spline Sans','Segoe UI',system-ui,sans-serif;
  --display:'Fraunces',Georgia,serif;

  /* ── SEMANTIC tokens (product dark-mode spec, board doc 33). Light values here;
     [data-theme="dark"] flips ONLY these + the primitive ramp below. The --gray-N /
     --blue-N above stay as primitives. ── */
  --bg:#eceaf2; --bg-mesh-1:#eceaff; --bg-mesh-2:#e7efff;
  --surface:#ffffff; --surface-2:#faf9fc; --surface-sunken:#f3f1f8;
  --text:#14121f; --text-2:#4d4b5c; --text-3:#6c6a7c; --text-muted:#9b99a8;
  --border:#e4e3e8; --border-strong:#d2d1da;
  --accent:#2f4fe0; --accent-press:#2840c4; --accent-weak-bg:#eef1fe; --accent-weak-bd:#d8def9; --accent-on:#ffffff;
  --hero-grad: radial-gradient(120% 140% at 15% -20%, #5b6bf0 0%, rgba(0,0,0,0) 55%),
               radial-gradient(120% 140% at 100% 0%, #6d4cd6 0%, rgba(0,0,0,0) 50%),
               linear-gradient(150deg,#2f3fc9 0%,#2b2a8f 55%,#221d63 100%);
  --shadow:0 18px 48px rgba(30,27,75,.16),0 6px 16px rgba(30,27,75,.08);
  --success:#10b981; --danger:#ef4444; --danger-weak-bg:#fef2f2;
  --login-grad:linear-gradient(150deg,#3a55e6,#5b46c9); --login-on:#fff;
}

/* ════ DARK THEME — flips the semantic tokens AND the primitive ramp the existing
   stylesheet already consumes, so the whole site themes with no per-rule edits.
   Values are product's considered swatches (doc 33); AA contrast checked. ════ */
[data-theme="dark"] {
  /* semantic */
  --bg:#0f0e17; --bg-mesh-1:#1a1840; --bg-mesh-2:#161a3a;
  --surface:#1a1825; --surface-2:#221f30; --surface-sunken:#13121c;
  --text:#eceaf3; --text-2:#b6b2c6; --text-3:#908ca3; --text-muted:#6b687e;
  --border:#2c2940; --border-strong:#3a3654;
  --accent:#6e83f4; --accent-press:#5a70ec; --accent-weak-bg:#1d2348; --accent-weak-bd:#34407e; --accent-on:#0f0e17;
  --hero-grad: radial-gradient(120% 140% at 15% -20%, #3a44b8 0%, rgba(0,0,0,0) 55%),
               radial-gradient(120% 140% at 100% 0%, #4a35a0 0%, rgba(0,0,0,0) 50%),
               linear-gradient(150deg,#23297a 0%,#1c1a5a 55%,#141238 100%);
  --shadow:0 18px 48px rgba(0,0,0,.55),0 6px 16px rgba(0,0,0,.4);
  --success:#34d399; --danger:#f87171; --danger-weak-bg:#2a1719;
  --login-grad:linear-gradient(150deg,#5e74ee,#7a5cf0); --login-on:#0f0e17;
  /* primitive ramp re-pointed to dark equivalents (so var(--gray-N)/var(--white)/
     var(--blue-N) usages across the existing CSS theme automatically) */
  --white:#1a1825;
  --gray-50:#221f30; --gray-100:#221f30; --gray-200:#2c2940; --gray-300:#3a3654;
  --gray-400:#6b687e; --gray-500:#908ca3; --gray-600:#b6b2c6; --gray-700:#c4c0d4;
  --gray-800:#dedbe9; --gray-900:#eceaf3;
  --blue-600:#6e83f4; --blue-700:#5a70ec; --blue-500:#7e90f6; --blue-50:#1d2348;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4),0 1px 3px rgba(0,0,0,.5);
  --shadow-md:0 6px 18px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.4);
  --shadow-lg:0 18px 48px rgba(0,0,0,.55),0 6px 16px rgba(0,0,0,.4);
}
html { scroll-behavior:smooth; overflow-x:hidden; }
:root { color-scheme:light; }
[data-theme="dark"] { color-scheme:dark; }
/* soft tinted-radial page background — not flat white (brand "ballot paper" warmth) */
body { font-family:var(--font); color:var(--text); line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; max-width:100%;
  background:
    radial-gradient(1200px 700px at 80% -10%, var(--bg-mesh-1) 0%, transparent 55%),
    radial-gradient(900px 600px at -10% 10%, var(--bg-mesh-2) 0%, transparent 50%),
    var(--bg); }
a { color:inherit; }

/* ── TYPE: editorial serif (Fraunces) for headline moments, refined sans (Spline Sans) for UI ── */
/* Fraunces (display) is reserved for the hero headline + short single-line titles.
   Poll titles (.card-title, detail H1) use Spline Sans for feed readability. */
.hero h1, .section-title, .gate-card h3, .modal h3, .logo { font-family:var(--display); font-optical-sizing:auto; }
.hero h1 { font-weight:900; letter-spacing:-.01em; }
.hero h1 em { font-style:italic; font-weight:500; color:#c7cdff; }
.gate-card h3, .modal h3 { font-weight:600; letter-spacing:-.005em; }

/* ── designed SVG icon system (NO emoji as icons — design rule §2A) ── */
.ic { display:inline-block; width:1em; height:1em; vertical-align:-.13em; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.ic.solid { fill:currentColor; stroke:none; }
.category-icon .ic { width:18px; height:18px; }
.cat-chip .ic, .tab-btn .ic { width:15px; height:15px; }
.card-tag .ic { width:13px; height:13px; }
.sidebar-card-title .ic, .section-title .ic { width:18px; height:18px; }
.hero-badge .ic { width:13px; height:13px; }
.opt-label .ic { width:15px; height:15px; }
.meta-item .ic { width:13px; height:13px; }
.region-badge .ic { width:13px; height:13px; }
.mode-tag .ic { width:13px; height:13px; }
.lang-btn .ic { width:14px; height:14px; }
/* option marker glyphs reuse the icon set, tinted */
.ic-yes { color:#16a34a; } .ic-no { color:#dc2626; } .ic-neutral { color:#64748b; }

/* ── HEADER / NAV ── */
header.app { position:sticky; top:0; z-index:100; background:var(--white); border-bottom:1px solid var(--gray-200); box-shadow:var(--shadow-sm); }
.nav-inner { max-width:1120px; margin:0 auto; padding:0 22px; height:60px; display:flex; align-items:center; gap:20px; }
.logo { display:inline-flex; align-items:center; gap:9px; font-size:1.2rem; font-weight:700; color:var(--blue-600); text-decoration:none; white-space:nowrap; letter-spacing:-.01em; flex-shrink:0; }
.logo .mark { width:30px; height:30px; border-radius:8px; display:block; }
/* the two words live in their own tight group (3px) so the .logo gap:9px only
   spaces icon -> wordmark — fixes the old doubled nbsp + flex-gap spacing. */
.logo .wordmark { display:inline-flex; align-items:baseline; gap:3px; }
.logo .w-netizen { color:var(--blue-600); }
.logo .w-survey { color:var(--gray-900); }
nav.app-nav { display:flex; align-items:center; gap:2px; flex:1; }
nav.app-nav a { padding:6px 12px; border-radius:8px; font-size:.88rem; font-weight:600; color:var(--gray-600); text-decoration:none; transition:all .15s; cursor:pointer; }
nav.app-nav a:hover { background:var(--blue-50); color:var(--blue-600); }
nav.app-nav a.active { background:var(--blue-50); color:var(--blue-600); }
.nav-actions { display:flex; align-items:center; gap:8px; margin-left:auto; }
/* ── theme toggle: compact Light/Dark/System icon segmented control ── */
.theme-toggle { display:inline-flex; align-items:center; gap:2px; background:var(--surface-sunken); border:1px solid var(--border); border-radius:999px; padding:3px; }
.theme-toggle button { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border:none; background:none; color:var(--text-3); cursor:pointer; border-radius:999px; transition:all .15s; padding:0; }
.theme-toggle button svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.theme-toggle button:hover { color:var(--text); }
.theme-toggle button.on { background:var(--accent-weak-bg); color:var(--accent); }
/* mobile: full-width labeled buttons inside the hamburger menu */
.mobile-theme { display:flex; gap:6px; padding-top:10px; margin-top:4px; border-top:1px solid var(--border); }
.mobile-theme button { flex:1; display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:44px; border:1px solid var(--border); background:var(--surface); color:var(--text-2); border-radius:10px; font-family:var(--font); font-size:.82rem; font-weight:600; cursor:pointer; }
.mobile-theme button svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.mobile-theme button.on { background:var(--accent-weak-bg); color:var(--accent); border-color:var(--accent-weak-bd); }
/* .btn-ghost (Login) and .btn-primary (+ Create) are applied to <a> links, and the
   global reset only sets `color:inherit` (not text-decoration) — so add text-decoration:none
   here and keep it none on hover/focus, so they read as buttons, never underlined links. */
.btn-ghost { padding:8px 15px; border-radius:8px; border:1px solid var(--gray-200); background:transparent; font-size:.85rem; font-weight:600; color:var(--gray-700); cursor:pointer; transition:all .15s; white-space:nowrap; text-decoration:none; }
.btn-ghost:hover, .btn-ghost:focus { background:var(--gray-100); text-decoration:none; }
.btn-primary { padding:8px 16px; border-radius:8px; border:none; background:var(--blue-600); color:#fff; font-size:.85rem; font-weight:700; cursor:pointer; transition:background .15s; white-space:nowrap; text-decoration:none; }
.btn-primary:hover, .btn-primary:focus { background:var(--blue-700); text-decoration:none; }
/* Header Login — promoted to the SOLID indigo pill (product spec #576): with the
   lang picker + Create both removed, Login is the lone right-side control and the
   de-facto primary action, so it gets the filled gradient (was the Create look). */
.btn-login { display:inline-flex; align-items:center; justify-content:center; padding:9px 20px; border-radius:9px; border:none; background:var(--login-grad); color:var(--login-on); font-size:14px; font-weight:700; min-height:44px; cursor:pointer; transition:filter .15s; white-space:nowrap; text-decoration:none; font-family:var(--font); }
.btn-login:hover, .btn-login:focus { filter:brightness(1.06); text-decoration:none; }

/* ── LANGUAGE PICKER ── */
.lang-picker { position:relative; flex-shrink:0; }
.lang-btn { display:flex; align-items:center; gap:5px; padding:7px 10px; border-radius:8px; border:1px solid var(--gray-200); background:transparent; font-size:.82rem; font-weight:600; color:var(--gray-600); cursor:pointer; transition:all .15s; white-space:nowrap; }
.lang-btn:hover { background:var(--gray-100); border-color:var(--gray-400); }
.lang-chevron { transition:transform .2s; }
.lang-picker.open .lang-chevron { transform:rotate(180deg); }
.lang-dropdown { display:none; position:absolute; top:calc(100% + 6px); right:0; background:var(--white); border:1px solid var(--gray-200); border-radius:10px; box-shadow:var(--shadow-md); overflow:hidden; min-width:155px; z-index:300; }
html[dir="rtl"] .lang-dropdown { right:auto; left:0; }
.lang-picker.open .lang-dropdown { display:block; }
.lang-option { display:flex; align-items:center; justify-content:space-between; width:100%; padding:10px 14px; background:none; border:none; text-align:left; font-size:.875rem; color:var(--gray-700); cursor:pointer; transition:background .12s; gap:8px; }
html[dir="rtl"] .lang-option { text-align:right; }
.lang-option:hover { background:var(--blue-50); color:var(--blue-600); }
.lang-option.active { color:var(--blue-600); font-weight:600; }
.lang-check { font-size:.75rem; color:var(--blue-600); opacity:0; }
.lang-option.active .lang-check { opacity:1; }

/* ── SIGNED-IN USER CHIP + MENU (moved here from auth.css so it styles on the
   home/feed page too; fully theme-tokenized — product doc 39). ── */
.user-chip-wrap { position:relative; flex-shrink:0; }
.user-chip { display:inline-flex; align-items:center; gap:8px; padding:4px 6px 4px 4px; border-radius:999px; border:1px solid var(--border); background:var(--surface); cursor:pointer; font-family:var(--font); min-height:40px; transition:background .15s, border-color .15s; }
.user-chip:hover { background:var(--surface-2); border-color:var(--border-strong); }
.user-chip .avatar { width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent-press)); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.82rem; flex-shrink:0; }
[data-theme="dark"] .user-chip .avatar { color:var(--accent-on); }
.user-chip .uname { font-size:.84rem; font-weight:600; color:var(--text-2); max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.user-chip .uchev { width:15px; height:15px; color:var(--text-3); flex-shrink:0; transition:transform .2s; }
.user-chip[aria-expanded="true"] .uchev { transform:rotate(180deg); }

.user-menu { position:absolute; top:calc(100% + 8px); right:0; min-width:208px; background:var(--surface); border:1px solid var(--border); border-radius:13px; box-shadow:var(--shadow-md); overflow:hidden; display:none; z-index:300; }
html[dir="rtl"] .user-menu { right:auto; left:0; }
.user-menu.open { display:block; }
.user-menu .um-head { padding:12px 14px; border-bottom:1px solid var(--border); }
.user-menu .um-name { font-size:.86rem; font-weight:700; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.user-menu .um-email { font-size:.74rem; color:var(--text-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:1px; }
.user-menu button { width:100%; display:flex; align-items:center; gap:10px; min-height:44px; padding:0 14px; text-align:left; border:none; background:none; font-family:var(--font); font-size:.86rem; font-weight:600; color:var(--text-2); cursor:pointer; transition:background .12s, color .12s; }
html[dir="rtl"] .user-menu button { text-align:right; }
.user-menu button .ic { width:17px; height:17px; color:var(--text-3); flex-shrink:0; }
.user-menu button:hover { background:var(--surface-2); color:var(--text); }
.user-menu button.um-create { color:var(--accent); }
.user-menu button.um-create .ic { color:var(--accent); }
.user-menu button.um-create:hover { background:var(--accent-weak-bg); color:var(--accent); }
.user-menu button.um-logout { color:var(--danger); }
.user-menu button.um-logout .ic { color:var(--danger); }
.user-menu button.um-logout:hover { background:var(--danger-weak-bg); color:var(--danger); }
.user-menu .um-divider { height:1px; background:var(--border); margin:0; }
@media (max-width:400px) { .user-chip .uname { display:none; } }

/* ── HAMBURGER + MOBILE MENU ── */
.hamb { display:none; flex-direction:column; gap:4px; background:none; border:none; cursor:pointer; padding:6px; }
.hamb span { width:20px; height:2px; background:var(--gray-700); border-radius:2px; display:block; }
.mobile-menu { display:none; flex-direction:column; gap:4px; padding:12px 22px 16px; border-top:1px solid var(--gray-200); background:var(--white); }
.mobile-menu.open { display:flex; }
.mobile-menu a { padding:10px 12px; border-radius:8px; font-size:.9rem; font-weight:600; color:var(--gray-700); text-decoration:none; cursor:pointer; }
.mobile-menu a:hover { background:var(--blue-50); color:var(--blue-600); }
.mobile-menu-actions { display:flex; flex-wrap:wrap; gap:8px; padding-top:8px; }
.mobile-menu-actions button { flex:1; }
/* signed-in mobile (hamburger): Create + Logout as full-width menu rows, tokenized.
   (The "+ Create"/Logout header pills were removed — product doc 39.) */
.mob-menu-act { flex:1 1 100%; display:flex; align-items:center; gap:10px; min-height:44px; padding:0 12px; border:1px solid var(--border); border-radius:10px; background:var(--surface); font-family:var(--font); font-size:.9rem; font-weight:600; color:var(--text-2); cursor:pointer; }
.mob-menu-act .ic { width:18px; height:18px; color:var(--text-3); flex-shrink:0; }
.mob-menu-act:hover { background:var(--surface-2); color:var(--text); }
.mob-menu-act.mob-create { color:var(--accent); border-color:var(--accent-weak-bd); }
.mob-menu-act.mob-create .ic { color:var(--accent); }
.mob-menu-act.mob-create:hover { background:var(--accent-weak-bg); }
.mob-menu-act.mob-logout { color:var(--danger); }
.mob-menu-act.mob-logout .ic { color:var(--danger); }
.mob-menu-act.mob-logout:hover { background:var(--danger-weak-bg); }
.mobile-lang-section { border-top:1px solid var(--gray-100); padding-top:12px; margin-top:4px; }
.mobile-lang-label-row { font-size:.78rem; font-weight:700; color:var(--gray-400); text-transform:uppercase; letter-spacing:.5px; margin-bottom:8px; padding:0 4px; }
.mobile-lang-grid { display:flex; flex-wrap:wrap; gap:6px; }
.mobile-lang-opt { padding:5px 12px; border-radius:999px; border:1px solid var(--gray-200); background:var(--white); font-size:.82rem; color:var(--gray-600); cursor:pointer; transition:all .15s; }
.mobile-lang-opt:hover { border-color:var(--blue-600); color:var(--blue-600); }
.mobile-lang-opt.active { background:var(--blue-600); border-color:var(--blue-600); color:var(--white); font-weight:600; }

/* ── HERO ── */
/* layered indigo gradient + a faint dot-grid texture ("ballot paper" feel) */
.hero { position:relative; overflow:hidden; color:#fff; padding:96px 16px 92px; text-align:center;
  background:var(--hero-grad); }
.hero::before { content:''; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.12) 1px,transparent 1.4px); background-size:18px 18px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 75%); mask-image:linear-gradient(180deg,#000,transparent 75%); }
.hero > * { position:relative; z-index:1; }
.hero-inner { max-width:640px; margin:0 auto; position:relative; z-index:1; }
/* Headline = the signed-off mockup copy ("Vote on the topics that <em>actually</em>
   matter"). This sentence-case string is too long to sit on ONE line at the full
   hero size, so we use the mockup's intentional two-line break (balanced) and let it
   reflow to one line where it fits. Fluid size, mobile-safe: scales down on small
   screens so it never overflows / h-scrolls. <em>actually</em> is the italic accent. */
.hero h1 { font-size:clamp(1.6rem, 5.2vw, 2.7rem); line-height:1.12; letter-spacing:-.02em; margin:0; text-wrap:balance; }
.hero-cta { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:30px; }
.btn-hero-primary { padding:12px 26px; border-radius:10px; border:none; background:#fff; color:var(--blue-700); font-size:.98rem; font-weight:800; cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,.18); transition:all .15s; }
.btn-hero-primary:hover { transform:translateY(-1px); box-shadow:0 6px 20px rgba(0,0,0,.22); }
.btn-hero-secondary { padding:12px 26px; border-radius:10px; border:2px solid rgba(255,255,255,.5); background:transparent; color:#fff; font-size:.98rem; font-weight:700; cursor:pointer; transition:all .15s; }
.btn-hero-secondary:hover { background:rgba(255,255,255,.1); border-color:#fff; }

/* ── MAIN LAYOUT ── */
.main-layout { max-width:1120px; margin:0 auto; padding:30px 22px; display:grid; grid-template-columns:1fr 290px; gap:28px; align-items:start; }
.main-layout > main, .main-layout > .sidebar { min-width:0; }  /* prevent grid blowout from long content */
.card-title { overflow-wrap:anywhere; word-break:break-word; }
/* Categories nav / #feed anchor lands here. scroll-margin-top clears the 60px sticky
   header + a little breathing room so the "Hot/Latest Topics" heading sits near the
   top, not under the header and not scrolled past to the pills (QA #1). */
.section-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; scroll-margin-top:76px; }
.section-title { font-size:1.18rem; font-weight:800; color:var(--gray-900); }
.section-link { font-size:.85rem; color:var(--blue-600); text-decoration:none; font-weight:600; cursor:pointer; }
.section-link:hover { text-decoration:underline; }

/* ── FILTER TABS ── */
.filter-tabs { display:flex; gap:6px; margin-bottom:18px; flex-wrap:wrap; }
.tab-btn { padding:6px 15px; border-radius:999px; border:1px solid var(--gray-200); background:var(--white); font-size:.83rem; font-weight:600; color:var(--gray-500); cursor:pointer; transition:all .15s; }
.tab-btn:hover { border-color:var(--blue-600); color:var(--blue-600); }
.tab-btn.active { background:var(--blue-600); border-color:var(--blue-600); color:#fff; }

/* ── POLL CARD ── */
.cards-grid { display:flex; flex-direction:column; gap:15px; }
.survey-card { background:var(--white); border-radius:var(--radius); border:1px solid var(--gray-200); box-shadow:var(--shadow-sm); padding:19px; transition:box-shadow .2s,transform .2s; }
.survey-card:hover { box-shadow:var(--shadow-md); }
.card-top { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:9px; }
.card-tag { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:999px; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.3px; }
.tag-politics { background:#fef3c7; color:#92400e; } .tag-technology { background:#dbeafe; color:#1e40af; }
.tag-society { background:#dcfce7; color:#166534; } .tag-economy { background:#fce7f3; color:#9d174d; }
.tag-environment { background:#d1fae5; color:#065f46; } .tag-health { background:#ede9fe; color:#5b21b6; }
.official-badge { display:inline-flex; align-items:center; gap:4px; font-size:.7rem; font-weight:700; color:var(--blue-600); white-space:nowrap; }
.official-badge svg { width:13px; height:13px; }
.card-hot { display:flex; align-items:center; gap:3px; font-size:.72rem; font-weight:700; color:var(--red-500); white-space:nowrap; }
/* Feed poll title — Spline Sans for scannability across the 30-card feed (product spec).
   17px/600 still outranks the option labels (14.4px) + .card-desc (13.76px). */
.card-title { font-family:var(--font); font-size:17px; font-weight:600; line-height:1.35; letter-spacing:-.005em; color:var(--gray-900); margin-bottom:5px; }
a.card-title { text-decoration:none; display:block; cursor:pointer; }
a.card-title:hover { color:var(--blue-700); }
.card-desc { font-size:.86rem; color:var(--gray-500); margin-bottom:14px; line-height:1.5; }

/* options: pre-vote = buttons; voted = result bars. Same DOM, toggled by .voted on .poll */
.poll-options { display:flex; flex-direction:column; gap:9px; margin-bottom:14px; }
.opt { position:relative; display:block; width:100%; text-align:left; border:1.5px solid var(--gray-200); background:var(--white); border-radius:10px; padding:0; cursor:pointer; overflow:hidden; transition:border-color .15s,background .15s; min-height:46px; font-family:var(--font); }
html[dir="rtl"] .opt { text-align:right; }
.opt:hover { border-color:var(--blue-500); background:var(--blue-50); }
.opt:disabled { cursor:default; }
.opt .opt-fill { position:absolute; inset:0 auto 0 0; width:0; background:var(--blue-50); transition:width .6s cubic-bezier(.22,1,.36,1); z-index:0; }
html[dir="rtl"] .opt .opt-fill { inset:0 0 0 auto; }
.opt .opt-row { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 14px; min-height:46px; }
.opt .opt-label { font-size:.9rem; font-weight:600; color:var(--gray-800); display:flex; align-items:center; gap:8px; }
.opt .opt-check { width:18px; height:18px; border-radius:50%; border:2px solid var(--gray-300); flex-shrink:0; display:flex; align-items:center; justify-content:center; transition:all .2s; }
.opt .opt-check svg { width:11px; height:11px; opacity:0; transform:scale(.5); transition:all .2s; color:#fff; }
.opt .opt-pct { font-size:.88rem; font-weight:800; color:var(--gray-400); opacity:0; transition:opacity .3s; font-variant-numeric:tabular-nums; }

/* VOTED state */
.poll.voted .opt { cursor:default; border-color:var(--gray-200); }
.poll.voted .opt:hover { background:var(--white); }
.poll.voted .opt .opt-pct { opacity:1; }
.poll.voted .opt .opt-check { display:none; }
.poll.voted .opt .opt-fill { background:#eaf0fd; }
.poll.voted .opt.chosen { border-color:var(--blue-600); }
.poll.voted .opt.chosen .opt-fill { background:#dbe7fe; }
.poll.voted .opt.chosen .opt-label { color:var(--blue-700); }
.poll.voted .opt.chosen .opt-pct { color:var(--blue-700); }
.poll.voted .opt.chosen .opt-label::after { content:attr(data-you); font-size:.62rem; font-weight:800; letter-spacing:.4px; color:#fff; background:var(--blue-600); padding:2px 7px; border-radius:999px; margin-left:4px; }

/* ── REGION TARGETING (§3.2B) ── */
.region-badge { display:inline-flex; align-items:center; gap:6px; padding:3px 9px; border-radius:999px; font-size:.72rem; font-weight:700; background:#eef2ff; color:var(--indigo-700); border:1px solid #c7d2fe; }
.region-badge .fi { width:16px; height:12px; border-radius:2px; box-shadow:0 0 0 1px rgba(0,0,0,.08); }
.region-block { display:flex; gap:10px; align-items:flex-start; background:var(--blue-50); border:1px solid #c7d2fe; border-radius:10px; padding:12px 14px; margin-bottom:14px; font-size:.84rem; color:var(--indigo-700); line-height:1.45; }
html[dir="rtl"] .region-block { flex-direction:row-reverse; text-align:right; }
.region-block a { color:var(--blue-700); font-weight:700; text-decoration:none; cursor:pointer; }
.region-block a:hover { text-decoration:underline; }
.region-block .ic { width:18px; height:18px; color:var(--blue-700); flex-shrink:0; margin-top:1px; }
.poll.region-locked .opt { opacity:.78; cursor:default; }

/* ── MULTI-SELECT (§3.2A) ── */
.mode-tag { display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px; font-size:.7rem; font-weight:700; background:var(--gray-100); color:var(--gray-600); border:1px solid var(--gray-200); }
.poll.multi .opt .opt-box { color:var(--gray-400); margin-right:2px; }
html[dir="rtl"] .poll.multi .opt .opt-box { margin-right:0; margin-left:2px; }
.poll.multi .opt.picked { border-color:var(--blue-600); background:var(--blue-50); }
.poll.multi .opt.picked .opt-box { color:var(--blue-600); }
.poll.multi.voted .opt .opt-box { display:none; }   /* hide checkboxes after submit, show bars */
.btn-multi-submit { width:100%; margin:2px 0 14px; padding:12px; border-radius:10px; border:none; background:var(--blue-600); color:#fff; font-size:.9rem; font-weight:800; cursor:pointer; transition:background .15s; min-height:46px; }
.btn-multi-submit:hover:not(:disabled) { background:var(--blue-700); }
.btn-multi-submit:disabled { background:var(--gray-200); color:var(--gray-400); cursor:not-allowed; }
.poll.multi.voted .multi-caption { display:block; font-size:.72rem; color:var(--gray-400); font-weight:600; margin:-6px 0 12px; text-align:right; }
html[dir="rtl"] .poll.multi.voted .multi-caption { text-align:left; }
.multi-caption { display:none; }

.card-footer { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; }
.card-meta { display:flex; gap:14px; align-items:center; }
.meta-item { display:flex; align-items:center; gap:4px; font-size:.78rem; color:var(--gray-400); font-variant-numeric:tabular-nums; }
.meta-item svg { width:13px; height:13px; flex-shrink:0; }
.vote-hint { font-size:.78rem; color:var(--gray-400); font-weight:600; }
.poll.voted .vote-hint { display:none; }
.voted-actions { display:none; align-items:center; gap:8px; }
.poll.voted .voted-actions { display:flex; }
.btn-share-sm { display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border-radius:8px; border:1.5px solid var(--blue-600); background:var(--blue-50); color:var(--blue-700); font-size:.82rem; font-weight:700; cursor:pointer; animation:pop .35s ease; }
.btn-share-sm svg { width:14px; height:14px; }
@keyframes pop { 0%{transform:scale(.8); opacity:0} 60%{transform:scale(1.06)} 100%{transform:scale(1); opacity:1} }
.btn-permalink { font-size:.78rem; color:var(--gray-500); font-weight:600; text-decoration:none; cursor:pointer; }
.btn-permalink:hover { color:var(--blue-600); }

.feed-empty { text-align:center; padding:48px 20px; color:var(--gray-400); font-size:.95rem; }
.feed-loading { text-align:center; padding:48px 20px; color:var(--gray-400); font-size:.9rem; }

/* toast / live region */
.vote-toast { position:fixed; left:50%; bottom:24px; transform:translate(-50%,20px); background:var(--gray-900); color:#fff; font-size:.84rem; font-weight:600; padding:10px 18px; border-radius:999px; box-shadow:var(--shadow-lg); opacity:0; pointer-events:none; transition:all .3s; z-index:800; display:flex; align-items:center; gap:8px; }
.vote-toast.show { opacity:1; transform:translate(-50%,0); }
.vote-toast.error { background:#7f1d1d; }
.vote-toast svg { width:15px; height:15px; color:var(--green-500); }
.vote-toast.error svg { color:#fca5a5; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ── SIDEBAR ── */
.sidebar { display:flex; flex-direction:column; gap:20px; }
.sidebar-card { background:var(--white); border-radius:var(--radius); border:1px solid var(--gray-200); box-shadow:var(--shadow-sm); padding:18px; }
.sidebar-card-title { font-size:.96rem; font-weight:800; color:var(--gray-900); margin-bottom:14px; display:flex; align-items:center; gap:7px; }
.ranking-list { display:flex; flex-direction:column; gap:11px; }
.rank-item { display:flex; align-items:center; gap:11px; cursor:pointer; text-decoration:none; }
.rank-item:hover .rank-title { color:var(--blue-600); }
.rank-num { width:25px; height:25px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.76rem; font-weight:800; flex-shrink:0; }
.rank-1 { background:#fbbf24; color:#78350f; } .rank-2 { background:var(--gray-200); color:var(--gray-700); }
.rank-3 { background:#d97706; color:#fff; } .rank-o { background:var(--gray-100); color:var(--gray-500); }
.rank-info { flex:1; min-width:0; }
.rank-title { font-size:.83rem; font-weight:600; color:var(--gray-800); line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rank-votes { font-size:.73rem; color:var(--gray-400); margin-top:1px; font-variant-numeric:tabular-nums; }
.empty-rank { font-size:.82rem; color:var(--gray-400); text-align:center; padding:14px 4px; line-height:1.5; }
.category-list { display:flex; flex-direction:column; gap:4px; }
.category-item { display:flex; align-items:center; justify-content:space-between; padding:8px 10px; border-radius:8px; cursor:pointer; text-decoration:none; }
.category-item:hover { background:var(--blue-50); }
.category-left { display:flex; align-items:center; gap:9px; }
.category-icon { font-size:1.05rem; }
.category-name { font-size:.85rem; font-weight:600; color:var(--gray-700); }
.category-count { font-size:.76rem; color:var(--gray-400); font-weight:600; font-variant-numeric:tabular-nums; }
.notify-card { background:linear-gradient(135deg,var(--blue-600),#1d4ed8); color:#fff; }
.notify-card .sidebar-card-title { color:#fff; }
.notify-desc { font-size:.84rem; color:rgba(255,255,255,.85); margin-bottom:12px; line-height:1.5; }
.btn-notify { width:100%; padding:9px; border-radius:8px; border:2px solid rgba(255,255,255,.5); background:transparent; color:#fff; font-size:.84rem; font-weight:700; cursor:pointer; transition:all .15s; }
.btn-notify:hover { background:rgba(255,255,255,.15); border-color:#fff; }

/* ── FOOTER ── */
footer.app { background:var(--white); border-top:1px solid var(--gray-200); margin-top:20px; }
.footer-inner { max-width:1120px; margin:0 auto; padding:28px 22px; display:flex; flex-wrap:wrap; gap:24px; justify-content:space-between; }
.footer-brand { max-width:320px; }
.footer-brand .logo { margin-bottom:10px; }
.footer-desc { font-size:.82rem; color:var(--gray-500); line-height:1.6; }
.footer-copy { max-width:1120px; margin:0 auto; padding:14px 22px 28px; font-size:.78rem; color:var(--gray-400); border-top:1px solid var(--gray-100); }

/* ════════ PERMALINK / DETAIL PAGE ════════ */
.detail-wrap { max-width:760px; margin:0 auto; padding:28px 22px 60px; }
.breadcrumb { font-size:.82rem; color:var(--gray-500); margin-bottom:16px; cursor:pointer; display:inline-flex; align-items:center; gap:6px; text-decoration:none; }
.breadcrumb:hover { color:var(--blue-600); }
.detail-card { background:var(--white); border-radius:16px; border:1px solid var(--gray-200); box-shadow:var(--shadow-md); padding:30px; }
.detail-card .card-title { font-family:var(--font); font-size:22px; font-weight:700; line-height:1.3; letter-spacing:-.01em; margin-bottom:8px; }
.detail-card .card-desc { font-size:.95rem; margin-bottom:20px; }
.detail-meta-row { display:flex; align-items:center; gap:16px; margin:20px 0 4px; padding-top:18px; border-top:1px solid var(--gray-100); flex-wrap:wrap; }
.share-row { display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-top:18px; }
.share-label { font-size:.82rem; font-weight:700; color:var(--gray-600); margin-right:2px; }
.share-btn { display:inline-flex; align-items:center; gap:7px; padding:9px 14px; border-radius:9px; border:1px solid var(--gray-200); background:var(--white); font-size:.84rem; font-weight:600; color:var(--gray-700); cursor:pointer; transition:all .15s; text-decoration:none; }
.share-btn:hover { border-color:var(--blue-600); color:var(--blue-600); background:var(--blue-50); }
.share-btn svg { width:15px; height:15px; }
.share-btn.copy { border-color:var(--blue-600); color:var(--blue-700); background:var(--blue-50); }

/* ── RESPONSIVE ── */
@media (max-width:900px) {
  .main-layout { grid-template-columns:1fr; }
  .sidebar { order:2; }
  nav.app-nav { display:none; }
  .nav-actions .lang-picker, .nav-actions .btn-ghost { display:none; }
  .hamb { display:flex; }
}
@media (max-width:640px) {
  .hero { padding:56px 16px 54px; }   /* rebalanced for the sparser (headline + CTAs) hero */
  .main-layout { padding:22px 14px; }
  .detail-card { padding:20px 16px; }
  .detail-card .card-title { font-size:20px; }   /* sans (var(--font)); slightly smaller on phones */
  .btn-login { padding:9px 16px; min-height:44px; font-size:14px; }   /* mobile header Login pill — >=44px touch target (QA #584 P2) */
}

/* ════════════════════════════════════════════════════════════════
   AUTH MODAL (login / register / forgot / sent) — built to the
   signed-off mockup docs/mockups/netizensurvey-auth-modal-mockup.html.
   Auth is a DIALOG over the dimmed page, not a full page. The header
   Login / + Create buttons open it; Google is VISIBLE-but-GATED (Soon)
   and the reset state is honest coming-soon (no bypass, no leak).
   ════════════════════════════════════════════════════════════════ */
.scrim { position:fixed; inset:0; z-index:1000; background:rgba(20,18,31,.52); backdrop-filter:blur(3px); display:flex; align-items:flex-start; justify-content:center; padding:54px 18px 24px; overflow-y:auto; }
.scrim[hidden] { display:none; }
.modal { position:relative; width:100%; max-width:420px; background:var(--surface); border:1px solid var(--border); border-radius:20px; box-shadow:var(--shadow); padding:26px 26px 24px; animation:mIn .22s cubic-bezier(.22,1,.36,1); }
@keyframes mIn { from { opacity:0; transform:translateY(14px) scale(.97); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) { .modal { animation:none; } }
.modal-x { position:absolute; top:12px; right:12px; width:44px; height:44px; border:none; background:var(--gray-100); border-radius:10px; cursor:pointer; color:var(--gray-500); display:flex; align-items:center; justify-content:center; transition:all .15s; }
.modal-x:hover { background:var(--gray-200); color:var(--gray-700); }
.modal-x .ic { width:17px; height:17px; }
.modal-brand { display:flex; align-items:center; gap:9px; margin-bottom:16px; }
.modal-brand .mark { width:34px; height:34px; border-radius:9px; flex-shrink:0; }
.modal-brand-name { font-family:var(--display); font-weight:700; font-size:1.06rem; color:var(--blue-600); letter-spacing:-.2px; }
.modal-brand-name span { color:var(--gray-900); }
.seg-toggle { display:flex; background:var(--gray-100); border-radius:11px; padding:4px; gap:4px; margin-bottom:18px; }
.seg-toggle button { flex:1; border:none; background:none; font-family:var(--font); font-size:.9rem; font-weight:700; color:var(--gray-500); padding:9px; border-radius:8px; cursor:pointer; transition:all .15s; min-height:44px; }
.seg-toggle button:hover { color:var(--gray-700); }
.seg-toggle button.on { background:var(--surface); color:var(--accent); box-shadow:var(--shadow-sm); }
.modal-h1 { font-family:var(--display); font-size:1.32rem; font-weight:600; letter-spacing:-.01em; margin-bottom:3px; }
.modal-sub { font-size:.85rem; color:var(--gray-500); margin-bottom:18px; line-height:1.5; }
.fld { margin-bottom:13px; }
.fld label { font-size:.82rem; font-weight:700; color:var(--gray-700); display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; }
.modal .inp { width:100%; padding:12px 13px; border:1.5px solid var(--gray-200); border-radius:11px; font-size:16px; font-family:var(--font); color:var(--gray-900); background:var(--gray-50); outline:none; transition:border-color .15s,box-shadow .15s,background .15s; min-height:48px; }
/* lighter, less-assertive placeholder (product #4) */
/* light hint placeholder across ALL inputs (modal + create-poll), themes in dark
   (--text-muted = #9b99a8 light / #6b687e dark). opacity:1 so Firefox doesn't double-fade. */
.modal .inp::placeholder, .inp::placeholder, .ta::placeholder, .ob-inp::placeholder { color:var(--text-muted); opacity:1; }
.modal .inp:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(47,79,224,.13); background:var(--surface); }
.modal .inp.err { border-color:var(--red-500); background:#fef2f2; }
.pw-wrap { position:relative; }
.pw-wrap .inp { padding-right:46px; }
.pw-toggle { position:absolute; right:3px; top:50%; transform:translateY(-50%); width:44px; height:44px; border:none; background:none; color:var(--gray-400); cursor:pointer; display:flex; align-items:center; justify-content:center; border-radius:8px; }
.pw-toggle:hover { color:var(--gray-600); background:var(--gray-100); }
.pw-toggle .ic { width:18px; height:18px; }
.forgot-row { display:flex; justify-content:flex-end; margin:-8px 0 6px; }
/* >=44px tap target (QA): the link sits in a 44px-tall flex row, centered. */
.link-btn { display:inline-flex; align-items:center; min-height:44px; background:none; border:none; font-family:var(--font); font-size:.8rem; font-weight:700; color:var(--accent); cursor:pointer; padding:6px 4px; border-radius:6px; text-decoration:none; }
.link-btn:hover { text-decoration:underline; }
.pw-strength { margin-top:8px; }
.pw-bars { display:flex; gap:5px; margin-bottom:5px; }
.pw-bars i { flex:1; height:5px; border-radius:999px; background:var(--gray-200); transition:background .25s; }
.pw-strength.s1 .pw-bars i:nth-child(1) { background:var(--red-500); }
.pw-strength.s2 .pw-bars i:nth-child(-n+2) { background:var(--amber-400); }
.pw-strength.s3 .pw-bars i:nth-child(-n+3) { background:#84cc16; }
.pw-strength.s4 .pw-bars i { background:var(--green-500); }
.pw-label { font-size:.74rem; color:var(--gray-500); font-weight:600; }
.modal .err-msg { display:none; align-items:center; gap:6px; font-size:.78rem; color:var(--red-500); font-weight:600; margin-top:6px; }
.modal .err-msg.show { display:flex; }
.modal .err-msg .ic { width:14px; height:14px; }
.modal .ok-msg { display:none; align-items:flex-start; gap:7px; font-size:.8rem; color:var(--gray-700); font-weight:600; margin-top:10px; background:var(--blue-50); border:1px solid #d8def9; border-radius:10px; padding:10px 11px; line-height:1.45; }
.modal .ok-msg.show { display:flex; }
.modal .ok-msg .ic { width:15px; height:15px; color:var(--blue-600); flex-shrink:0; margin-top:1px; }
.btn-submit { width:100%; padding:13px 26px; border-radius:11px; border:none; background:var(--login-grad); color:var(--login-on); font-size:.95rem; font-weight:800; cursor:pointer; transition:filter .15s; min-height:48px; display:flex; align-items:center; justify-content:center; gap:8px; margin-top:4px; font-family:var(--font); }
.btn-submit:hover { background:var(--blue-700); }
.btn-submit:disabled { opacity:.6; cursor:default; }
.btn-submit.ok { background:var(--green-600); }
.btn-submit.ghost { background:var(--surface); color:var(--text-2); border:1.5px solid var(--border); }
.btn-submit.ghost:hover { background:var(--gray-50); }
.or-div { display:flex; align-items:center; gap:12px; margin:16px 0; color:var(--gray-400); font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.or-div::before, .or-div::after { content:''; flex:1; height:1px; background:var(--gray-200); }
.btn-oauth { width:100%; display:flex; align-items:center; justify-content:center; gap:10px; padding:13px; border:1.5px solid var(--border); border-radius:11px; background:var(--surface); font-size:.92rem; font-weight:700; color:var(--text); cursor:pointer; transition:all .15s; min-height:48px; position:relative; font-family:var(--font); }
.btn-oauth .g { width:19px; height:19px; flex-shrink:0; }
.btn-oauth.gated { cursor:not-allowed; color:var(--gray-400); background:var(--gray-50); border-style:dashed; }
.btn-oauth.gated:hover { border-color:var(--gray-300); background:var(--gray-50); }
.btn-oauth.gated .g { filter:grayscale(1); opacity:.55; }
.soon-chip { font-size:.62rem; font-weight:800; text-transform:uppercase; letter-spacing:.5px; color:var(--indigo-700); background:#e7e9ff; border:1px solid #c7cdff; padding:2px 8px; border-radius:999px; margin-left:2px; }
.gated-hint { font-size:.74rem; color:var(--gray-400); text-align:center; margin-top:8px; line-height:1.45; }
.modal-foot { font-size:.78rem; color:var(--gray-400); text-align:center; margin-top:16px; line-height:1.5; }
.modal-foot b { color:var(--gray-600); }
.modal .legal { font-size:.72rem; color:var(--gray-400); text-align:center; margin-top:12px; line-height:1.5; }
.modal .legal a { color:var(--gray-500); text-decoration:underline; cursor:pointer; }
.promise { display:flex; align-items:flex-start; gap:9px; background:var(--blue-50); border:1px solid #d8def9; border-radius:11px; padding:11px 12px; margin-top:14px; }
.promise .ic { width:17px; height:17px; color:var(--blue-600); flex-shrink:0; margin-top:1px; }
.promise p { font-size:.78rem; color:var(--gray-600); line-height:1.45; }
.promise b { color:var(--gray-800); }
.reset-codeRow { display:flex; gap:8px; }
.reset-codeRow .inp { flex:1; }
.reset-codeRow .btn-sendcode { white-space:nowrap; padding:0 15px; border-radius:11px; border:1.5px solid var(--blue-600); background:var(--blue-50); color:var(--blue-700); font-size:.84rem; font-weight:700; cursor:pointer; min-height:48px; font-family:var(--font); }
.reset-codeRow .btn-sendcode:hover { background:#e2e7ff; }
.reset-codeRow .btn-sendcode.muted { border-color:var(--gray-200); color:var(--gray-400); background:var(--gray-50); cursor:default; }
.reset-actions { display:flex; gap:10px; margin-top:8px; }
.reset-actions .btn-submit { margin-top:0; }
.reset-back { display:inline-flex; align-items:center; gap:6px; font-size:.82rem; font-weight:700; color:var(--gray-500); background:none; border:none; cursor:pointer; margin-bottom:14px; padding:4px 2px; border-radius:6px; font-family:var(--font); }
.reset-back:hover { color:var(--blue-600); }
.reset-back .ic { width:15px; height:15px; }
.confirm-mark { width:64px; height:64px; border-radius:16px; background:linear-gradient(135deg,var(--blue-50),#e2e7ff); display:flex; align-items:center; justify-content:center; margin:4px auto 16px; border:1px solid #d8def9; }
.confirm-mark .ic { width:30px; height:30px; color:var(--blue-600); }
.stub-banner { display:flex; align-items:flex-start; gap:9px; text-align:left; background:#fffbeb; border:1px solid #fde68a; border-radius:11px; padding:11px 12px; margin:14px 0 4px; }
.stub-banner .ic { width:17px; height:17px; color:var(--amber-400); flex-shrink:0; margin-top:1px; }
.stub-banner p { font-size:.78rem; color:#78350f; line-height:1.45; }
.stub-banner b { color:#92400e; }
.mstate { display:none; }
.mstate.active { display:block; }
@media (max-width:640px) {
  .scrim { padding:20px 14px; }
  .modal { max-width:none; padding:22px 18px 20px; border-radius:18px; }
}

/* ── Placeholder legal pages (/terms, /privacy) ── */
.legal-page { max-width:760px; margin:0 auto; padding:28px 22px 64px; }
.legal-doc { background:var(--white); border:1px solid var(--gray-200); border-radius:16px; box-shadow:var(--shadow-sm); padding:32px 30px; }
.legal-draft-pill { display:inline-block; font-size:.66rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#92400e; background:#fffbeb; border:1px solid #fde68a; border-radius:999px; padding:4px 11px; margin-bottom:14px; }
.legal-h1 { font-family:var(--display); font-size:1.9rem; font-weight:700; letter-spacing:-.01em; color:var(--gray-900); margin:0 0 6px; }
.legal-updated { font-size:.82rem; color:var(--gray-400); margin:0 0 18px; }
.legal-notice { display:flex; align-items:flex-start; gap:10px; background:var(--blue-50); border:1px solid #d8def9; border-radius:12px; padding:13px 14px; margin-bottom:24px; }
.legal-notice .ic { width:18px; height:18px; color:var(--blue-600); flex-shrink:0; margin-top:1px; }
.legal-notice p { font-size:.86rem; color:var(--gray-700); line-height:1.5; }
.legal-notice b { color:var(--gray-900); }
.legal-h2 { font-size:1.05rem; font-weight:700; color:var(--gray-900); margin:22px 0 7px; letter-spacing:-.005em; }
.legal-body { font-size:.92rem; color:var(--gray-600); line-height:1.65; }
.legal-foot { font-size:.82rem; color:var(--gray-400); margin-top:28px; padding-top:16px; border-top:1px solid var(--gray-100); }
.footer-legal-links { display:flex; gap:18px; align-items:center; flex-wrap:wrap; }
.footer-legal-links a { font-size:.84rem; color:var(--gray-500); text-decoration:none; }
.footer-legal-links a:hover { color:var(--blue-600); text-decoration:underline; }
@media (max-width:640px) {
  .legal-doc { padding:24px 18px; }
  .legal-h1 { font-size:1.6rem; }
}