:root {
  /* Luxury Kingdom palette: near-black #100B17, royal purple #21142F / #382249, champagne gold #D6B15F, rich gold #B98A36, ivory #F5EBDD, lavender #A99AB8, success #55C99A */
  --ink: #100b17; --ink-2: #1a1124; --ink-3: #21142f; --line: #382249;
  --gold: #d6b15f; --gold-rich: #b98a36; --gold-soft: #ead7a4; --gold-line: rgba(214,177,95,.3); --gold-glow: rgba(214,177,95,.22);
  --purple: #382249; --purple-2: #8a5fc4; --burgundy: #8c2a46; --rose: #d7708a;
  --text: #f5ebdd; --muted: #a99ab8; --faint: #8f80a0;
  --ok: #55c99a; --warn: #e5a15a; --bad: #e07a8e;
  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --sans: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --nav-h: 64px; --gutter: 16px;
  --topbar-bg: rgba(16,11,23,.88); --nav-bg: rgba(26,17,36,.96);
  --panel-bg: linear-gradient(180deg, rgba(33,20,47,.78), rgba(26,17,36,.78)); --tint: rgba(56,34,73,.45);
  --ridge-bg: linear-gradient(160deg, rgba(56,34,73,.8), rgba(26,17,36,.92) 62%);
  --kpi-bg: rgba(26,17,36,.6); --plan-bg: rgba(26,17,36,.65); --plan-feature: linear-gradient(170deg, rgba(56,34,73,.6), rgba(26,17,36,.85));
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --lilac: #cdb9ee; --on-gold: #1a1205; color-scheme: dark;
  --backdrop: radial-gradient(900px 520px at 85% -10%, rgba(56,34,73,.7), transparent 62%), radial-gradient(700px 420px at -10% 110%, rgba(140,42,70,.25), transparent 62%), var(--ink);
}
/* ---------- light theme: same royal palette on warm ivory ---------- */
:root[data-theme="light"] {
  --gold-rich: #8a6416; --gold-glow: rgba(138,104,22,.18); --shadow: 0 8px 24px rgba(60,40,90,.12); --ink: #faf6ec; --ink-2: #ffffff; --ink-3: #f1ead9; --line: #ddd2bb;
  --gold: #b8892a; --gold-soft: #7a5806; --gold-line: rgba(138,104,22,.38);
  --purple: #e6dcf5; --purple-2: #6b3fa8; --burgundy: #8a2742; --rose: #b03a5c;
  --text: #20172e; --muted: #564b69; --faint: #6f6582;
  --ok: #1f7a4d; --warn: #9a5a12; --bad: #b3263f;
  --topbar-bg: rgba(250,246,236,.92); --nav-bg: rgba(255,252,244,.97);
  --panel-bg: linear-gradient(180deg, #ffffff, #fbf7ee); --tint: rgba(107,63,168,.09);
  --ridge-bg: linear-gradient(160deg, rgba(107,63,168,.14), #ffffff 60%);
  --kpi-bg: #ffffff; --plan-bg: #ffffff; --plan-feature: linear-gradient(170deg, rgba(107,63,168,.12), #ffffff);
  --lilac: #6b3fa8; --on-gold: #1a1205; color-scheme: light;
  --backdrop: radial-gradient(900px 500px at 85% -10%, rgba(107,63,168,.16), transparent 60%), radial-gradient(700px 400px at -10% 110%, rgba(138,39,66,.10), transparent 60%), var(--ink);
}
:root[data-theme="light"] .btn.primary, :root[data-theme="light"] .toggle button[aria-pressed="true"] { color: #1a1205; }
:root[data-theme="light"] .demo-flag { color: #fff; }
.theme-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--gold-line); background: var(--ink-2); color: var(--gold-soft); cursor: pointer; padding: 0; }
.theme-btn:hover { background: rgba(217,178,76,.12); }
.theme-btn svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme-btn .sun { display: none; } :root[data-theme="light"] .theme-btn .sun { display: block; } :root[data-theme="light"] .theme-btn .moon { display: none; }
.auth-theme { position: fixed; top: 12px; right: 12px; z-index: 50; }
.crest { display: block; object-fit: contain; }
.brand .crest { width: 34px; height: 34px; margin: 0; border-radius: 9px; }
.brand .short { display: none; }
@media (max-width: 479px) { .brand .long { display: none; } .brand .short { display: inline; } }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ink); color: var(--text); font: 400 16px/1.55 var(--sans); min-height: 100vh; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: var(--backdrop); }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.12; margin: 0; letter-spacing: .005em; }
h1 { font-size: clamp(2rem, 6vw, 2.9rem); }
h2 { font-size: 1.65rem; } h3 { font-size: 1.28rem; }
p { margin: 0 0 .8em; max-width: 68ch; }
a { color: var(--gold-soft); text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }
.skip { position: absolute; left: -999px; } .skip:focus { left: 8px; top: 8px; background: var(--gold); color: #000; padding: 8px 12px; z-index: 99; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); } .faint { color: var(--faint); } .small { font-size: .875rem; } .center { text-align: center; }
.num { font-variant-numeric: tabular-nums; }

/* ---------- shell ---------- */
.shell { display: block; min-height: 100vh; padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 12px); }
.topbar { position: sticky; top: 0; z-index: 20; background: var(--topbar-bg); backdrop-filter: blur(10px); border-bottom: 1px solid var(--gold-line); padding: 10px var(--gutter); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.brand { font-family: var(--serif); font-size: 1.35rem; font-weight: 700; color: var(--gold); text-decoration: none; display: flex; align-items: center; gap: 8px; margin-right: auto; }
.main { padding: 20px var(--gutter) 40px; max-width: 1080px; margin: 0 auto; }
.nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 30; height: calc(var(--nav-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--nav-bg); border-top: 1px solid var(--gold-line); display: grid; grid-template-columns: repeat(5, 1fr); }
.nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--muted); text-decoration: none; font-size: .72rem; min-height: 48px; }
.nav a svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nav a[aria-current="page"] { color: var(--gold); }
.nav a[aria-current="page"] span { border-bottom: 1px solid var(--gold); }
.nav .more-only { display: none; }
@media (min-width: 820px) {
  .shell { padding-bottom: 0; padding-left: 220px; }
  .nav { top: 0; bottom: auto; width: 220px; height: 100vh; right: auto; display: flex; flex-direction: column; padding: 84px 12px 16px; border-top: 0; border-right: 1px solid var(--gold-line); gap: 2px; }
  .nav a { flex-direction: row; justify-content: flex-start; gap: 12px; padding: 10px 12px; border-radius: 8px; font-size: .95rem; min-height: 44px; }
  .nav a[aria-current="page"] { background: rgba(217,178,76,.09); } .nav a[aria-current="page"] span { border: 0; }
  .nav .more-only { display: flex; }
  .nav .more-btn { display: none; }
  .topbar { padding-left: 28px; backdrop-filter: none; z-index: 35; } .brand { position: fixed; left: 14px; top: 14px; margin: 0; z-index: 40; font-size: 1.12rem; gap: 8px; } .brand .crest { width: 32px; height: 32px; }
  :root { --gutter: 28px; }
}
.more-btn { background: none; border: 0; color: var(--muted); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: .72rem; cursor: pointer; }
.more-btn svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.sheet { position: fixed; inset: auto 0 calc(var(--nav-h) + env(safe-area-inset-bottom)) 0; z-index: 29; background: var(--ink-3); border-top: 1px solid var(--gold-line); padding: 8px var(--gutter) 14px; display: grid; gap: 2px; }
.sheet a { padding: 12px 6px; color: var(--text); text-decoration: none; border-bottom: 1px solid var(--line); }

/* ---------- controls ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--gold); background: transparent; color: var(--gold-soft); cursor: pointer; text-decoration: none; font-weight: 500; }
.btn:hover { background: rgba(217,178,76,.1); }
.btn.primary { background: var(--gold); color: var(--on-gold); border-color: var(--gold); font-weight: 600; } .btn.primary:hover { background: var(--gold-soft); }
.btn.quiet { border-color: var(--line); color: var(--text); } .btn.danger { border-color: var(--rose); color: var(--rose); }
.btn.small { min-height: 36px; padding: 0 14px; font-size: .875rem; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; font-size: .9rem; white-space: nowrap; }
.chip[aria-pressed="true"], .chip[aria-selected="true"] { border-color: var(--gold); color: var(--gold-soft); background: rgba(217,178,76,.08); }
.chip.locked { border-style: dashed; }
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 8px; scrollbar-width: thin; }
.field { display: grid; gap: 6px; margin-bottom: 14px; } .field label, .field legend { font-weight: 500; font-size: .95rem; }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=number], select, textarea { width: 100%; min-height: 46px; padding: 10px 12px; background: var(--ink-2); border: 1px solid var(--line); border-radius: 8px; color: var(--text); }
textarea { min-height: 110px; } input:focus, select:focus, textarea:focus { border-color: var(--gold); outline: none; box-shadow: 0 0 0 3px rgba(217,178,76,.2); }
.check { display: flex; gap: 10px; align-items: flex-start; } .check input { margin-top: 5px; width: 18px; height: 18px; accent-color: var(--gold); }
.row select { width: auto; min-width: 12em; max-width: 100%; }
.hint { font-size: .85rem; color: var(--faint); } .err { color: var(--bad); font-size: .9rem; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } .row.between { justify-content: space-between; } .stack > * + * { margin-top: 14px; } .stack-lg > * + * { margin-top: 28px; }
.grid { display: grid; gap: 14px; } .g2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .g3 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* ---------- selectors in topbar ---------- */
.picker { display: flex; align-items: center; gap: 8px; }
.platform-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 10px 0 12px; border: 1px solid var(--gold-line); border-radius: 999px; background: var(--ink-2); }
.platform-pill select { border: 0; background: transparent; min-height: 34px; padding: 0 4px; width: auto; max-width: 42vw; font-weight: 500; color: var(--text); }
.platform-pill select option { background: var(--ink-2); }
.range { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.range button { min-height: 38px; padding: 0 12px; background: transparent; border: 0; color: var(--muted); cursor: pointer; font-size: .875rem; }
.range button[aria-pressed="true"] { background: rgba(217,178,76,.14); color: var(--gold-soft); }
.demo-flag { background: var(--burgundy); color: #ffe9ee; font-size: .75rem; padding: 2px 8px; border-radius: 999px; font-weight: 600; }
.fresh { font-size: .8rem; color: var(--muted); display: inline-flex; gap: 6px; align-items: center; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); display: inline-block; } .dot.fresh { background: var(--ok); } .dot.stale { background: var(--warn); } .dot.very_stale, .dot.error { background: var(--bad); }

/* ---------- content blocks ---------- */
.page-head { margin-bottom: 20px; } .page-head p { color: var(--muted); margin-top: 6px; }
.panel { border: 1px solid var(--gold-line); border-radius: 6px; padding: 18px; background: var(--panel-bg); }
.panel > h2, .panel > h3 { margin-bottom: 12px; }
.plain { padding: 4px 0; }
.notice { border-left: 3px solid var(--gold); background: var(--tint); padding: 12px 14px; border-radius: 0 8px 8px 0; font-size: .92rem; }
.notice.warn { border-color: var(--warn); background: rgba(229,161,90,.1); } .notice.bad { border-color: var(--bad); background: rgba(224,122,142,.1); } .notice.demo { border-color: var(--rose); background: rgba(122,32,56,.3); }
.notice > :last-child { margin-bottom: 0; }

.ridge { position: relative; border-radius: 14px; border: 1px solid var(--gold-line); padding: 22px 18px 10px; overflow: hidden; background: var(--ridge-bg); }
.ridge .big { font-family: var(--serif); font-size: clamp(3.2rem, 14vw, 5.6rem); line-height: .95; font-weight: 600; color: var(--gold-soft); letter-spacing: -.01em; }
.ridge .delta { font-size: 1.05rem; margin-top: 6px; }
.up { color: var(--ok); } .down { color: var(--bad); } .flat { color: var(--muted); }
.kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border: 1px solid var(--gold-line); border-radius: 6px; overflow: hidden; }
@media (min-width: 640px) { .kpis { grid-template-columns: repeat(4, 1fr); } }
.kpi { padding: 14px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--kpi-bg); min-width: 0; }
.kpi .v { font-family: var(--serif); font-size: 1.9rem; font-weight: 600; line-height: 1.1; } .kpi .l { color: var(--muted); font-size: .85rem; }
.kpi .v.na { font-family: var(--sans); font-size: 1rem; color: var(--faint); font-weight: 400; }
.kpi .c { font-size: .8rem; margin-top: 2px; }
.q { display: inline-flex; align-items: center; gap: 4px; font-size: .72rem; padding: 1px 7px; border-radius: 4px; border: 1px solid var(--line); color: var(--muted); margin-top: 6px; cursor: help; }
.q.measured { border-color: rgba(127,200,160,.5); } .q.calculated { border-color: rgba(217,178,76,.5); } .q.estimated { border-style: dashed; border-color: var(--warn); } .q.unavailable { border-color: var(--faint); color: var(--faint); }
.chart { width: 100%; height: auto; display: block; } .chart text { fill: var(--faint); font-size: 11px; font-family: var(--sans); }
.chart .grid-l { stroke: var(--line); stroke-width: 1; } .chart .line { fill: none; stroke: var(--gold); stroke-width: 2.2; stroke-linejoin: round; } .chart .gain { fill: var(--gold); } .chart .loss { fill: var(--rose); }
.legend { display: flex; gap: 16px; font-size: .82rem; color: var(--muted); flex-wrap: wrap; margin-top: 6px; } .sw { display: inline-block; width: 12px; height: 12px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; } .sw.gain { background: var(--gold); } .sw.loss { background: var(--rose); }

.list { list-style: none; padding: 0; margin: 0; } .list > li { padding: 14px 0; border-bottom: 1px solid var(--line); } .list > li:last-child { border-bottom: 0; }
.seal { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-family: var(--serif); font-weight: 700; font-size: 1.15rem; border: 1px solid var(--gold-line); background: radial-gradient(circle at 30% 25%, var(--purple-2), var(--purple)); color: var(--gold-soft); }
.seal.top { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(217,178,76,.15); }
.rank { font-family: var(--serif); color: var(--faint); width: 1.6em; text-align: right; font-size: 1.2rem; }
.bar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; } .bar > i { display: block; height: 100%; background: var(--gold); border-radius: 3px; } .bar.alt > i { background: var(--purple-2); }
.tag { display: inline-block; font-size: .78rem; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.tag.confirmed, .tag.up { border-color: var(--ok); color: var(--ok); } .tag.inferred { border-color: var(--warn); color: var(--warn); border-style: dashed; } .tag.unknown_cause { border-color: var(--faint); color: var(--muted); } .tag.hyp { border-color: var(--purple-2); color: var(--lilac); } .tag.fact { border-color: var(--gold); color: var(--gold-soft); }
details > summary { cursor: pointer; color: var(--gold-soft); min-height: 32px; display: flex; align-items: center; } details[open] > summary { margin-bottom: 8px; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; } th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; } th { color: var(--muted); font-weight: 500; }
.scroll-x { overflow-x: auto; }
.lock { color: var(--faint); font-size: .9rem; border: 1px dashed var(--line); border-radius: 6px; padding: 14px; }
.skeleton { height: 16px; border-radius: 4px; background: linear-gradient(90deg, var(--ink-3), var(--line), var(--ink-3)); background-size: 200% 100%; animation: sk 1.4s linear infinite; margin: 10px 0; }
@keyframes sk { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } * { scroll-behavior: auto !important; transition: none !important; } }
#toasts { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--nav-h) + 20px); z-index: 60; display: grid; gap: 8px; width: min(92vw, 420px); }
.toast { background: var(--ink-3); border: 1px solid var(--gold); padding: 12px 14px; border-radius: 8px; } .toast.bad { border-color: var(--bad); }

/* ---------- auth / onboarding / pricing ---------- */
.auth { min-height: 100vh; display: grid; place-items: center; padding: 24px var(--gutter); }
.auth-card { width: min(100%, 440px); }
.auth h1 { color: var(--gold-soft); margin-bottom: 8px; }
.auth .crest { width: 84px; height: 84px; margin-bottom: 14px; border-radius: 20px; }
.plans { display: grid; gap: 14px; } @media (min-width: 640px) { .plans { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 960px) { .plans { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .plans .plan { padding: 16px 14px; } .plans .plan .price { font-size: 1.6rem; } .plans .plan ul { font-size: .86rem; } }
.plan .tag.biz { align-self: flex-start; }
.plan { border: 1px solid var(--line); border-radius: 10px; padding: 18px; display: flex; flex-direction: column; gap: 10px; background: var(--plan-bg); }
.plan.current { border-color: var(--gold); } .plan.feature { background: var(--plan-feature); border-color: var(--gold-line); }
.plan .price { font-family: var(--serif); font-size: 2rem; } .plan ul { padding-left: 1.1em; margin: 0; color: var(--muted); font-size: .92rem; } .plan li { margin: 3px 0; } .plan li.off { color: var(--faint); text-decoration: line-through; }
.toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; } .toggle button { border: 0; background: none; color: var(--muted); padding: 7px 16px; border-radius: 999px; cursor: pointer; min-height: 36px; } .toggle button[aria-pressed="true"] { background: var(--gold); color: var(--on-gold); font-weight: 600; }
.steps { display: flex; gap: 6px; margin-bottom: 22px; } .steps i { flex: 1; height: 3px; background: var(--line); border-radius: 2px; } .steps i.on { background: var(--gold); }
.platform-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.pf { text-align: left; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--ink-2); cursor: pointer; display: grid; gap: 4px; } .pf[aria-pressed="true"] { border-color: var(--gold); background: rgba(217,178,76,.07); } .pf b { font-weight: 600; }
.matrix td, .matrix th { font-size: .82rem; padding: 7px 8px; } .lv { display: inline-block; padding: 1px 7px; border-radius: 4px; font-size: .75rem; border: 1px solid var(--line); white-space: nowrap; }
.lv.full { border-color: var(--ok); color: var(--ok); } .lv.partial { border-color: var(--warn); color: var(--warn); } .lv.account_type { border-color: var(--lilac); color: var(--lilac); } .lv.unavailable { color: var(--faint); border-style: dashed; }
.legal { font-size: .8rem; color: var(--faint); margin-top: 30px; border-top: 1px solid var(--line); padding-top: 14px; }
.hours { display: grid; grid-template-columns: repeat(24, 1fr); gap: 3px; align-items: end; height: 110px; }
.hr { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; align-items: center; position: relative; font-size: .65rem; color: var(--faint); }
.hr i { display: block; width: 100%; background: var(--gold); border-radius: 2px 2px 0 0; min-height: 2px; }
.grow { flex: 1; min-width: 0; } .sc-bars { margin: 10px 0 6px; }
.row .label-w { min-width: 9em; }
label.chip input.sr { position: absolute; }
fieldset { min-width: 0; border: 0; padding: 0; margin: 0; } legend { padding: 0; }
.chips { position: relative; } .chips.wrap { flex-wrap: wrap; overflow: visible; }

.main > .notice { margin-bottom: 1rem; }
.narrow { width: 5em; }

.rel { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); } .rel textarea { min-height: 70px; } .mono { font-family: ui-monospace, Menlo, Consolas, monospace; word-break: break-all; }
input[type=number].narrow { width: 6em; }

.legal-page { max-width: 720px; margin: 0 auto; padding: 24px 16px 48px; }

/* Donut and ring charts */
.donut-wrap { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.donut { width: 150px; height: 150px; flex: none; } .donut .track { stroke: var(--line); }
.donut .sl0 { stroke: var(--gold); } .donut .sl1 { stroke: var(--purple-2); } .donut .sl2 { stroke: var(--burgundy); } .donut .sl3 { stroke: var(--rose); } .donut .sl4 { stroke: var(--gold-soft); }
.donut .dv { font-family: var(--serif); font-size: 7px; font-weight: 600; fill: var(--gold-soft); } .donut .dl { font-size: 2.6px; fill: var(--faint); }
.dlegend { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; flex: 1; min-width: 150px; font-size: .9rem; }
.dlegend li { display: flex; align-items: center; gap: 8px; } .dlegend li span { flex: 1; } .dlegend .sw { width: 12px; height: 12px; border-radius: 3px; margin: 0; flex: none; }
.sb0 { background: var(--gold); } .sb1 { background: var(--purple-2); } .sb2 { background: var(--burgundy); } .sb3 { background: var(--rose); } .sb4 { background: var(--gold-soft); }
.ringbox { text-align: center; } .ringbox .donut { width: 110px; height: 110px; margin: 0 auto 4px; }
.scoreboard { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.scoreboard .panel h2 { font-size: 1.05rem; margin-bottom: 10px; }

/* ======================= Luxury Kingdom upgrade ======================= */
.panel, .kpi, .grid > div { transition: border-color .25s, box-shadow .25s, transform .25s; }
.panel { border-radius: 14px; box-shadow: var(--shadow); }
.panel:hover { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold-line), 0 12px 34px var(--gold-glow); }
.btn { transition: background .2s, box-shadow .2s, transform .15s; } .btn:hover { box-shadow: 0 0 18px var(--gold-glow); } .btn:active { transform: translateY(1px); }
.btn.primary { background: linear-gradient(135deg, var(--gold-soft), var(--gold) 55%, var(--gold-rich)); }
h1 { background: linear-gradient(100deg, var(--text), var(--gold-soft)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
:root[data-theme="light"] h1 { background: none; -webkit-text-fill-color: currentColor; color: var(--text); }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  #view > .stack-lg > * { animation: rise .5s ease both; }
  #view > .stack-lg > *:nth-child(2) { animation-delay: .06s; } #view > .stack-lg > *:nth-child(3) { animation-delay: .12s; } #view > .stack-lg > *:nth-child(4) { animation-delay: .18s; } #view > .stack-lg > *:nth-child(n+5) { animation-delay: .24s; }
  .chart .line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.3s ease .15s forwards; } .chart .area { animation: fade 1.2s ease .3s both; }
  .arc { transition: stroke-dasharray 1s cubic-bezier(.2,.7,.2,1); } .bar i { transition: width .9s cubic-bezier(.2,.7,.2,1); }
}
.chart .hit { fill: transparent; cursor: crosshair; } .chart .hit:hover { fill: var(--gold-glow); }
.chart .dot-hover { fill: var(--gold); stroke: var(--ink); stroke-width: 2; pointer-events: none; }
.chart .gain:hover, .chart .loss:hover { filter: brightness(1.25); } .donut .arc[data-tip] { cursor: pointer; } .donut .arc[data-tip]:hover { stroke-width: 6.4; }
.ktip { position: fixed; z-index: 90; pointer-events: none; opacity: 0; transition: opacity .12s; background: var(--ink-3); color: var(--text); border: 1px solid var(--gold); border-radius: 10px; padding: 6px 10px; box-shadow: var(--shadow); display: flex; flex-direction: column; font-size: .8rem; line-height: 1.25; }
.ktip.on { opacity: 1; } .ktip b { color: var(--gold-soft); font-size: .95rem; }

/* personal welcome */
.welcome { position: relative; overflow: hidden; border: 1px solid var(--gold-line); border-radius: 18px; padding: 22px 18px; background: var(--ridge-bg); box-shadow: var(--shadow); display: grid; gap: 18px; }
.welcome::after { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(closest-side, var(--gold-glow), transparent); pointer-events: none; }
.welcome .who { display: flex; gap: 14px; align-items: center; } .welcome h1 { font-size: clamp(1.7rem, 5.5vw, 2.5rem); }
.avatar { width: 64px; height: 64px; border-radius: 50%; flex: none; display: grid; place-items: center; font-family: var(--serif); font-size: 1.7rem; color: var(--on-gold); background: linear-gradient(135deg, var(--gold-soft), var(--gold-rich)); border: 2px solid var(--gold); box-shadow: 0 0 22px var(--gold-glow); overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .avatar.sm { width: 28px; height: 28px; font-size: .8rem; border-width: 1px; box-shadow: none; }
.tagline { color: var(--muted); font-style: italic; font-family: var(--serif); font-size: 1.15rem; margin: 2px 0 0; }
.audience-total { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-end; }
.audience-total .big { font-family: var(--serif); font-size: clamp(2.6rem, 11vw, 4rem); line-height: .95; color: var(--gold-soft); }
.acct-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.acct-chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border: 1px solid var(--gold-line); border-radius: 999px; background: var(--kpi-bg); font-size: .88rem; color: var(--text); text-decoration: none; }
.acct-chip:hover { border-color: var(--gold); } .acct-chip b { color: var(--gold-soft); }
.mini-rings { display: flex; gap: 14px; flex-wrap: wrap; } .mini-rings .ringbox .donut { width: 84px; height: 84px; } .mini-rings .ringbox { min-width: 90px; }
.progress-row { display: grid; gap: 4px; } .progress-row .top { display: flex; justify-content: space-between; gap: 8px; font-size: .9rem; }
.bar.gold i { background: linear-gradient(90deg, var(--gold-rich), var(--gold-soft)); }

/* achievements */
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.ach { position: relative; border: 1px solid var(--line); border-radius: 14px; padding: 14px; background: var(--panel-bg); display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: start; transition: transform .2s, border-color .2s, box-shadow .2s; }
.ach:hover { transform: translateY(-2px); }
.ach.unlocked { border-color: var(--gold); box-shadow: 0 0 22px var(--gold-glow); } .ach.new { border-color: var(--gold-soft); animation: pulse 2.2s ease-in-out infinite; }
.ach.locked { opacity: .72; } .ach.unavailable { opacity: .6; border-style: dashed; }
@keyframes pulse { 50% { box-shadow: 0 0 30px var(--gold-glow), 0 0 0 1px var(--gold); } }
.ach h3 { font-size: 1.15rem; } .ach .small { margin: 2px 0; } .ach .bar { margin-top: 6px; }
.ach-state { display: inline-block; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.ach.unlocked .ach-state { border-color: var(--gold); color: var(--gold-soft); } .ach.new .ach-state { background: var(--gold); color: var(--on-gold); border-color: var(--gold); } .ach.in_progress .ach-state { color: var(--lilac); border-color: var(--purple-2); }
.medal { width: 64px; height: 64px; } .medal .outer { fill: var(--ink-3); stroke-width: 3; } .medal .inner { opacity: .95; } .medal .rib { fill: var(--burgundy); } .medal .glyph { font-size: 20px; fill: #2a1a08; font-family: var(--serif); font-weight: 700; }
.medal.locked .inner, .medal.in_progress .inner { fill: var(--purple); opacity: .8; } .medal.locked .glyph, .medal.in_progress .glyph { fill: var(--faint); } .medal.locked .outer, .medal.in_progress .outer { stroke: var(--line); }
.medal.unavailable .inner { fill: none; stroke: var(--line); stroke-dasharray: 3 3; } .medal.unavailable .glyph { fill: var(--faint); } .medal.unavailable .outer { stroke: var(--line); }
.cat-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 6px 0 -4px; } .cat-head h2 { font-size: 1.35rem; }
.level-card { display: grid; gap: 10px; } .level-name { font-family: var(--serif); font-size: 2rem; color: var(--gold-soft); }
.records { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; } .records .kpi .v { font-size: 1.6rem; }

/* celebration */
.celebrate { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: rgba(10,6,16,.82); backdrop-filter: blur(6px); animation: fade .3s both; }
.celebrate canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.celebrate .card { position: relative; max-width: 380px; width: 100%; text-align: center; border: 1px solid var(--gold); border-radius: 22px; padding: 26px 22px; background: linear-gradient(170deg, var(--ink-3), var(--ink)); box-shadow: 0 0 60px var(--gold-glow); display: grid; gap: 10px; justify-items: center; }
.celebrate .medal { width: 120px; height: 120px; } @media (prefers-reduced-motion: no-preference) { .celebrate .card { animation: rise .5s both; } .celebrate .medal { animation: pop .8s cubic-bezier(.2,1.4,.4,1) .15s both; } }
@keyframes pop { from { transform: scale(.3) rotate(-12deg); opacity: 0; } to { transform: none; opacity: 1; } }
.celebrate .row { justify-content: center; flex-wrap: wrap; }
.donut.ring.na { border: 3px dashed var(--line); border-radius: 50%; }
.kpis:empty, .scoreboard:empty { display: none; }

/* ---------- refined dropdowns ---------- */
select {
  -webkit-appearance: none; appearance: none; cursor: pointer;
  padding-right: 38px;
  background-color: var(--ink-2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23d9b24c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px;
  border-radius: 12px; font-weight: 500;
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
select:hover { border-color: var(--gold-line); background-color: rgba(217,178,76,.06); }
select option { background: var(--ink-2); color: var(--text); padding: 10px; }
.platform-pill { transition: border-color .2s, box-shadow .2s; }
.platform-pill:hover, .platform-pill:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(217,178,76,.15); }
.platform-pill select { padding-right: 26px; background-color: transparent; background-position: right 4px center; background-size: 14px; border-radius: 999px; }
.platform-pill select:hover { background-color: transparent; }
.platform-pill select:focus { box-shadow: none; }

/* platform switcher stays dark royal in both themes */
.platform-pill, :root[data-theme="light"] .platform-pill { background: linear-gradient(135deg, #2a1640, #1a1124); border-color: #d9b24c; color: #f4e7bf; }
.platform-pill select, :root[data-theme="light"] .platform-pill select { color: #f4e7bf; background-color: transparent; }
.platform-pill select option, :root[data-theme="light"] .platform-pill select option { background: #1a1124; color: #f4e7bf; }
.platform-pill svg, .platform-pill span { color: #d9b24c; }
.platform-pill:hover, .platform-pill:focus-within { box-shadow: 0 0 0 3px rgba(217,178,76,.25); }

/* ---------- ideas board ---------- */
.idea-row { display: flex; gap: 14px; align-items: flex-start; }
.vote { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 54px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--gold-line); background: transparent; color: var(--gold-soft); cursor: pointer; transition: background .2s, border-color .2s, transform .15s; }
.vote:hover:not(:disabled) { background: rgba(217,178,76,.1); border-color: var(--gold); transform: translateY(-1px); }
.vote.on { background: rgba(217,178,76,.18); border-color: var(--gold); color: var(--gold); }
.vote:disabled { opacity: .55; cursor: default; }
.idea-comment { padding: 8px 0; border-top: 1px solid var(--line); }
.idea-comment p { margin: 2px 0 6px; }
ul.stack { list-style: none; padding: 0; margin: 0; }
.idea-comment .row, .idea .row { flex-wrap: wrap; }

/* ---------- notifications bell ---------- */
.bell { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--gold-line); background: var(--ink-2); color: var(--gold-soft); flex: none; }
.bell svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.bell:hover, .bell[aria-current] { border-color: var(--gold); color: var(--gold); }
.bell .badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--gold); color: #1a1205; font-size: .7rem; font-weight: 700; line-height: 18px; text-align: center; }
.note { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.note.new { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(217,178,76,.25); }

/* ---------- community feed ---------- */
.post { gap: 10px; }
.post-media { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; max-height: 420px; border-radius: 14px; overflow: hidden; background: linear-gradient(135deg, #2a1640, #4a1530); border: 1px solid var(--gold-line); text-decoration: none; }
.post-media .post-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.post-fallback { position: absolute; inset: 0; display: none; flex-direction: column; justify-content: center; gap: 6px; padding: 18px; color: #f4e7bf; text-align: center; }
.post-media.noimg .post-fallback, .post-media:not(:has(.post-img)) .post-fallback { display: flex; }
.post-open { position: absolute; left: 10px; bottom: 10px; padding: 5px 10px; border-radius: 999px; background: rgba(16,11,23,.78); color: #f4e7bf; font-size: .8rem; opacity: 0; transition: opacity .2s; }
.post-media:hover .post-open, .post-media:focus-visible .post-open { opacity: 1; }
@media (hover: none) { .post-open { opacity: 1; } }
.post-title { margin: 0; font-weight: 600; }
.reactions { display: flex; flex-wrap: wrap; gap: 8px; }
.react { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--text); cursor: pointer; font-size: 1.1rem; transition: transform .15s, border-color .2s, background .2s; }
.react:hover { transform: translateY(-2px) scale(1.06); border-color: var(--gold); }
.react.on { border-color: var(--gold); background: rgba(217,178,76,.16); }
.react b { font-size: .85rem; color: var(--gold-soft); }
.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
.pick { cursor: pointer; display: block; }
.pick-card { position: relative; display: flex; align-items: flex-end; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; border: 2px solid var(--line); background: linear-gradient(135deg, #2a1640, #4a1530); }
.pick-card .post-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pick-title { position: relative; width: 100%; padding: 18px 8px 6px; font-size: .72rem; line-height: 1.2; color: #f4e7bf; background: linear-gradient(transparent, rgba(16,11,23,.9)); }
.pick input:checked + .pick-card { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(217,178,76,.3); }
.pick input:focus-visible + .pick-card { outline: 2px solid var(--gold); outline-offset: 2px; }

.filters { display: flex; flex-direction: column; gap: 8px; }
.chip[href] { text-decoration: none; display: inline-flex; align-items: center; }
.btn.follow { min-height: 30px; padding: 0 12px; font-size: .8rem; }
.btn.follow.on { border-color: var(--gold); color: var(--gold); }
.pick[hidden] { display: none; }

/* ---------- community grid (3 across) ---------- */
.grid3 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.tile { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; padding: 0; border: 1px solid var(--gold-line); border-radius: 10px; overflow: hidden; cursor: pointer; background: linear-gradient(135deg, #2a1640, #4a1530); color: #f4e7bf; transition: transform .15s, border-color .2s; }
.tile:hover, .tile:focus-visible { transform: scale(1.02); border-color: var(--gold); }
.tile .post-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 8px; font-size: .72rem; line-height: 1.25; text-align: center; overflow: hidden; }
.tile:has(.post-img) .tile-fallback { display: none; }
.tile-badge { position: absolute; left: 4px; top: 4px; padding: 1px 6px; border-radius: 999px; background: rgba(16,11,23,.8); font-size: .6rem; }
.tile-count { position: absolute; right: 4px; bottom: 4px; padding: 1px 6px; border-radius: 999px; background: rgba(16,11,23,.8); font-size: .7rem; }
.modal-back { position: fixed; inset: 0; z-index: 60; background: rgba(8,5,14,.7); }
.modal { position: fixed; z-index: 61; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(94vw, 460px); max-height: 88vh; overflow: auto; padding: 16px; border-radius: 16px; background: var(--ink-2); border: 1px solid var(--gold); box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.modal .post-media { max-height: 60vh; }
.modal-x { margin-left: auto; }

/* ---------- neat top bar ---------- */
.topbar { flex-wrap: wrap; row-gap: 8px; }
.brand { order: 0; }
.bell { order: 1; } .theme-btn { order: 2; }
.top-filters { order: 3; flex: 1 1 100%; display: flex; gap: 8px; min-width: 0; }
.top-filters .platform-pill { flex: 1 1 0; min-width: 0; }
.top-filters .platform-pill select { width: 100%; max-width: none; text-overflow: ellipsis; }
.range-pill svg { width: 18px; height: 18px; flex: none; fill: none; stroke: #d9b24c; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.platform-pill { height: 40px; }
@media (min-width: 820px) {
  .top-filters { order: 0; flex: 0 1 auto; margin-left: auto; margin-right: 4px; }
  .top-filters .platform-pill { flex: 0 0 auto; }
  .top-filters .platform-pill select { width: auto; min-width: 10em; }
  .brand { margin-right: 0; }
}
.top-demo { order: 0; white-space: nowrap; }
@media (min-width: 820px) { .top-demo { margin-left: auto; } .top-demo + .top-filters { margin-left: 8px; } }
.avatar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: .6rem; }
.avatar-opt { display: grid; justify-items: center; gap: .25rem; padding: .45rem .3rem; background: transparent; border: 1px solid var(--line, rgba(217,178,76,.25)); border-radius: 12px; color: inherit; font: inherit; font-size: .75rem; cursor: pointer; }
.avatar-opt img { width: 64px; height: 64px; border-radius: 50%; display: block; }
.avatar-opt:hover { border-color: var(--gold); }
.avatar-opt.on { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold) inset, 0 0 16px var(--gold-glow); }
.avatar-opt:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.avatar.sm img { width: 100%; height: 100%; }
.lb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.lb-row { display: flex; align-items: center; gap: .7rem; padding: .55rem .7rem; border: 1px solid var(--line, rgba(217,178,76,.2)); border-radius: 12px; }
.lb-row.me { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.lb-rank { min-width: 2ch; text-align: center; font-family: var(--serif); font-size: 1.15rem; color: var(--gold); }
.lb-name { flex: 1; min-width: 0; display: grid; }
.lb-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-gap { text-align: center; color: var(--muted, #9a8fb0); }
.plist { max-height: 22rem; overflow: auto; border: 1px solid var(--line); border-radius: 12px; padding: 0 .8rem; margin-top: .5rem; }
.plist > li { padding: 10px 0; }
.plist-q { flex: 1; min-width: 10rem; }
.data-sources .src { padding: 12px 0; }
.data-sources .src p { margin: .25rem 0 0; }
.chip.tone-ok { border-color: var(--good, #4fbf8b); color: var(--good, #4fbf8b); }
.chip.tone-warn { border-color: var(--gold); color: var(--gold); }
.chip.tone-info { border-color: var(--purple-lt, #a98bd8); color: var(--purple-lt, #a98bd8); }
.chip.tone-off { opacity: .75; }
.thumb { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; overflow: hidden; border-radius: 10px; border: 1px solid var(--gold-line); background: linear-gradient(135deg, #2a1640, #4a1530); color: #f4e7bf; }
.thumb.sm { width: 40px; height: 40px; } .thumb.md { width: 56px; height: 56px; } .thumb.lg { width: 72px; height: 72px; } .thumb.fill { width: 100%; aspect-ratio: 1 / 1; height: auto; }
.thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .thumb i { font-style: normal; opacity: .55; }
.thumb img ~ i { display: none; }
.clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .92rem; line-height: 1.3; }
.bp { display: flex; gap: 12px; align-items: flex-start; } .bp-body { flex: 1; min-width: 0; } .bp-img { flex: none; }
.strip { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; }
.strip a { margin-left: auto; }
.trophies { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 6px; }
.trophy { display: grid; justify-items: center; gap: 4px; text-align: center; color: inherit; text-decoration: none; font-size: .72rem; }
.trophy .badge3, .trophy svg { max-width: 54px; }
@media (max-width: 420px) { .trophies { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; } .trophy { font-size: .66rem; } }
.kpis.bubbles { display: flex; flex-wrap: wrap; gap: 8px; border: 0; background: none; }
.kpis.bubbles .kpi { flex: 1 1 104px; max-width: 160px; padding: 10px 14px; border: 1px solid var(--gold-line); border-radius: 22px; text-align: center; }
.kpis.bubbles .kpi .v { font-size: 1.35rem; } .kpis.bubbles .kpi .l { font-size: .72rem; }
.ridge.compact { padding: 12px 14px; } .ridge.compact .big { font-size: 1.9rem; }
.list.compact > li { padding: 8px 0; }
.row.nowrap { flex-wrap: nowrap; } .trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sup { padding: 10px 0; } .sup .seal { flex: none; } .sup-post { flex: none; } .sup-more { margin-top: 6px; }
.fsel { max-width: 100%; } .fsel select { width: 100%; }
.data-sources .src { padding: 8px 0; }
.chips-inline { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; font-weight: 400; } .chips-inline .chip { font-size: .72rem; padding: 2px 9px; }
.pgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 700px) { .pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1000px) { .pgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pgrid.is-list { grid-template-columns: 1fr; gap: 0; } .pgrid.is-list .pcard { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; }
.pcard { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--kpi-bg, rgba(255,255,255,.02)); min-width: 0; }
.pcard.row-view { flex-direction: row; align-items: flex-start; } .pcard.picked { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.pcard .thumb.fill { border-radius: 10px; } .pbody { min-width: 0; display: grid; gap: 2px; flex: 1; } .plink { display: block; text-decoration: none; color: inherit; }
.cap { font-size: .8rem; line-height: 1.3; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .cap.big { font-size: 1.05rem; -webkit-line-clamp: 3; }
.rk { position: absolute; top: 14px; left: 14px; padding: 1px 8px; border-radius: 999px; background: rgba(0,0,0,.65); color: var(--gold); font-size: .78rem; }
.hero-post { display: grid; gap: 12px; padding: 12px; border: 1px solid var(--gold-line); border-radius: 18px; background: linear-gradient(135deg, rgba(74,21,48,.45), rgba(42,22,64,.45)); } @media (min-width: 640px) { .hero-post { grid-template-columns: 220px 1fr; } }
.hero-er { font-family: var(--serif); font-size: 2rem; color: var(--gold); }
.bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .bars .bar { margin: 4px 0 2px; }
.strip.col { flex-direction: column; align-items: flex-start; }
.ht-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .ht { border: 1px solid var(--line); border-radius: 14px; }
.ht > summary { display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; list-style: none; } .ht > summary::-webkit-details-marker { display: none; } .ht > summary .trunc { flex: 1; } .ht-body { padding: 0 12px 12px; display: grid; gap: 8px; }
.pick-wrap { display: block; position: relative; cursor: pointer; } .pick-box { position: absolute; top: 6px; right: 6px; background: rgba(0,0,0,.6); border-radius: 8px; padding: 4px; }
.vsel { flex: none; width: auto; min-width: 8.5rem; }
.row.nowrap > .fsel:not(.vsel) { flex: 1 1 0; min-width: 0; } .row.nowrap > .vsel { flex: 0 0 auto; min-width: 0; width: 8.5rem; } .fsel select { min-width: 0; text-overflow: ellipsis; }
.hero-post { margin-bottom: 12px; }
.xp { display: grid; gap: 12px; grid-template-columns: 1fr; } @media (min-width: 700px) { .xp { grid-template-columns: repeat(2, 1fr); } }
.xp-card { border: 1px solid var(--gold-line); border-radius: 18px; padding: 14px; display: grid; gap: 10px; background: linear-gradient(135deg, rgba(74,21,48,.35), rgba(42,22,64,.35)); }
.xp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .xp-grid b { font-size: 1.1rem; }
details.rep { padding: 0; } details.rep > summary { padding: 14px 16px; cursor: pointer; font-family: var(--serif); font-size: 1.1rem; list-style: none; } details.rep > summary::-webkit-details-marker { display: none; } details.rep > summary::after { content: '＋'; float: right; color: var(--gold); } details.rep[open] > summary::after { content: '－'; } details.rep > :not(summary) { margin-left: 16px; margin-right: 16px; } details.rep[open] { padding-bottom: 14px; }
.rewards { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: 1fr; } @media (min-width: 700px) { .rewards { grid-template-columns: 1fr 1fr; } }
.reward { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; opacity: .65; } .reward.on { opacity: 1; border-color: var(--gold-line); background: linear-gradient(135deg, rgba(74,21,48,.35), rgba(42,22,64,.35)); } .rw-ico { font-size: 1.4rem; line-height: 1; }
/* symmetric form + card layouts */
.fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .fgrid .f { display: grid; gap: 4px; min-width: 0; } .fgrid input, .fgrid select { width: 100%; box-sizing: border-box; min-width: 0; }
.creation { display: grid; gap: 10px; padding-top: 6px; border-top: 1px solid var(--line); } .creation .vsel { width: 8.5rem; }
.big-num { display: flex; align-items: baseline; gap: 8px; } .big-num b { font-family: var(--serif); font-size: 1.8rem; color: var(--gold); }
.week-bars { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; align-items: end; height: 96px; } .week-bars li { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; height: 100%; } .week-bars .wk { display: block; width: 100%; max-width: 28px; min-height: 3px; background: var(--gold); border-radius: 6px 6px 2px 2px; }
.kpis.bubbles { grid-template-columns: repeat(3, minmax(0, 1fr)); } .panel .kpis.bubbles .kpi { text-align: center; }
.stack > .btn, .panel > .btn { align-self: flex-start; }
.panel > .row.between + .row, form.stack > .row { justify-content: space-between; }
.panel form.stack .btn.primary { width: 100%; } 
.sow { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--gold-line); border-radius: 18px; background: linear-gradient(135deg, rgba(74,21,48,.4), rgba(42,22,64,.4)); min-width: 0; } .sow-head { display: flex; gap: 10px; align-items: center; } .sow-head b { font-family: var(--serif); font-size: 1.15rem; color: var(--gold); } .sow .btn { justify-self: start; }
.sow-posts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .sow-posts li { display: flex; gap: 10px; align-items: center; }
.sow-grid { display: grid; gap: 12px; grid-template-columns: 1fr; } @media (min-width: 700px) { .sow-grid { grid-template-columns: 1fr 1fr; } }
.sow-pop { max-height: 90vh; overflow: auto; text-align: left; display: grid; gap: 12px; }
.mem-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: 1fr; } @media (min-width: 700px) { .mem-list { grid-template-columns: 1fr 1fr; } }
.mem { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 14px; min-width: 0; } .mem-who { display: flex; align-items: center; gap: 10px; min-width: 0; } .mem .btn { flex: none; }
label.small:has(> input[type=checkbox]) { display: flex; gap: 8px; align-items: flex-start; }