/* ============================================================
   Selva design system — Estratos. Spec + measured contrast: BRAND.html
   Green is STRUCTURE (page, canopy band, hairlines); orchid is ACTION
   (primary, links, active state). Series colours are separate and validated.
   ============================================================ */
:root {
  color-scheme: light;
  --paper: #F5F7F2;
  --surface: #FFFFFF;
  --surface-2: #E9EFE6;
  --ink: #10231C;        /* 15.2:1 on paper */
  --ink-2: #41564C;      /* 7.3:1  */
  --muted: #64796E;      /* 4.3:1  */
  --line: #DCE4D8;
  --canopy: #0B2A21;
  --canopy-ink: #EFF3EC; /* 13.7:1 on canopy */
  --accent: #A81E6B;     /* 6.4:1  */
  --accent-soft: rgba(168,30,107,.09);
  /* Text on a FILLED accent. Flips per mode: dark-mode orchid is light, and
     white on it is 2.5:1. See BRAND.html §3. */
  --on-accent: #FFFFFF;  /* 6.9:1 on --accent */
  --heliconia: #A85410;  /* 4.9:1 */
  --heliconia-soft: rgba(168,84,16,.12);
  --clay: #AE3324;       /* 5.9:1 */
  /* validated chart series (do not re-order, do not re-hue to brand green) */
  --s1:#2a78d6; --s2:#008300; --s3:#e87ba4; --s4:#eda100;
  --s5:#1baf7a; --s6:#eb6834; --s7:#4a3aa7; --s8:#e34948;
  --grid: #E4EADF; --baseline: #C3CFBE;
  --shadow: 0 1px 2px rgba(11,42,33,.05), 0 8px 28px -18px rgba(11,42,33,.25);
  --r: 10px;
  --serif: var(--sans);  /* display = bold sans (serif가 한글과 충돌해 폐기) */
  --sans: system-ui, -apple-system, "Segoe UI", sans-serif;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0B2A21;
  --surface: #12362B;
  --surface-2: #1B4436;
  --ink: #EFF3EC;        /* 13.7:1 on paper */
  --ink-2: #ADC0B4;      /* 8.0:1  */
  --muted: #7E9488;      /* 4.7:1  */
  --line: #24523F;
  --canopy: #071C16;     /* the night floor sits BELOW the page, not above it */
  --canopy-ink: #EFF3EC;
  --accent: #EE7FBE;     /* 6.2:1  */
  --accent-soft: rgba(238,127,190,.14);
  --on-accent: #071C16;  /* 7.1:1 on --accent */
  --heliconia: #F0A055;  /* 7.2:1 */
  --heliconia-soft: rgba(240,160,85,.14);
  --clay: #F0705A;       /* 5.2:1 */
  --s1:#3987e5; --s2:#008300; --s3:#d55181; --s4:#c98500;
  --s5:#199e70; --s6:#d95926; --s7:#9085e9; --s8:#e66767;
  --grid: #1E4534; --baseline: #2E5C48;
  --shadow: 0 1px 2px rgba(0,0,0,.35), 0 8px 28px -18px rgba(0,0,0,.6);
}
* { box-sizing: border-box; margin: 0; }
body {
  font-family: var(--sans);
  background: var(--paper); color: var(--ink);
  font-size: 14px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font-family: var(--sans); }

/* ---------------- topbar ---------------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 30px;
  padding: 0 28px; height: 60px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.logo { display: flex; align-items: center; gap: 10px; }
.logo img, .logo svg { width: 30px; height: 30px; display: block; }
.logo .wordmark { font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.lang-abbr { display: none; }
.logo .tagline { font-size: 10px; color: var(--muted); letter-spacing: .14em; text-transform: uppercase; margin-left: 2px; align-self: flex-end; padding-bottom: 3px; }
#nav { display: flex; gap: 2px; flex: 1; height: 100%; }
#nav a {
  display: flex; align-items: center; padding: 0 15px; height: 100%;
  font-weight: 600; font-size: 13.5px; color: var(--ink-2);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .12s;
}
#nav a:hover { color: var(--ink); }
#nav a.active { color: var(--accent); border-bottom-color: var(--accent); }
.top-actions { display: flex; align-items: center; gap: 9px; }
.tbtn {
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink);
  height: 36px; padding: 0 13px; border-radius: 9px; cursor: pointer;
  font-size: 12.5px; font-weight: 600; transition: background .12s, color .12s, border-color .12s;
  display: inline-flex; align-items: center; gap: 6px;
}
.tbtn:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
/* theme toggle: icon-only, but clearly a control */
#themeToggle { padding: 0 11px; }
#themeToggle svg { width: 16px; height: 16px; }
/* Language control. mountLangDD() renders a .tbtn (so it matches the height and
   styling of the other top-bar controls); these rules used to target .dd-btn,
   which that markup never had, so none of them applied. */
#langDD .tbtn { background: var(--surface-2); }
#langDD .car { font-size: 8px; opacity: .55; transform: translateY(1px); }

main { max-width: 1340px; margin: 0 auto; padding: 40px 36px 72px; }
.loading { color: var(--muted); padding: 70px 0; text-align: center; }

/* ---------------- typography ---------------- */
.page-title { font-size: 30px; font-weight: 800; letter-spacing: -.02em; }
.page-sub { color: var(--muted); margin: 5px 0 30px; font-size: 13px; }

/* ---------------- hero band (dashboard KPIs) ---------------- */
.hero {
  background: var(--canopy); color: var(--canopy-ink);
  border-radius: 16px; padding: 34px 10px; margin: 20px 0 24px;
  display: grid; grid-template-columns: repeat(4, 1fr);
  box-shadow: var(--shadow);
}
.hero .kpi { padding: 0 30px; }
.hero .kpi + .kpi { border-left: 1px solid rgba(239,243,236,.14); }
.hero .k { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; opacity: .62; font-weight: 600; }
.hero .v { font-size: 42px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; margin-top: 8px; font-variant-numeric: tabular-nums; }
.hero .d { font-size: 12px; opacity: .55; margin-top: 4px; }
@media (max-width: 980px) { .hero { grid-template-columns: 1fr 1fr; row-gap: 24px; } }

/* ---------------- layout ---------------- */
.grid { display: grid; gap: 20px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g32 { grid-template-columns: 3fr 2fr; }
.g23 { grid-template-columns: 2fr 3fr; }
@media (max-width: 980px) { .g2, .g32, .g23 { grid-template-columns: 1fr; } }
.mt { margin-top: 20px; }
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 24px 26px; box-shadow: var(--shadow);
}
.card h3 { font-size: 15px; font-weight: 700; margin-bottom: 18px; display: flex; align-items: baseline; gap: 8px; }
.card h3 .hint { font-weight: 500; font-size: 11.5px; color: var(--muted); margin-left: auto; }

/* ---------------- controls ---------------- */
.controls { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; align-items: center; }
.search {
  flex: 1; min-width: 230px; display: flex; align-items: center; gap: 9px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 9px;
  padding: 0 13px; height: 38px;
}
.search svg { width: 14px; height: 14px; stroke: var(--muted); flex: none; }
.search input { border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; width: 100%; }
.search input::placeholder { color: var(--muted); }

.dd { position: relative; }
.dd-btn {
  display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 13px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 9px;
  color: var(--ink-2); font: inherit; font-weight: 600; font-size: 12.5px; cursor: pointer;
  transition: border-color .12s, color .12s, background .12s;
}
.dd-btn:hover { background: var(--surface-2); }
.dd-btn.on { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.dd-btn .car { font-size: 8px; opacity: .55; transform: translateY(1px); }
.dd-menu {
  position: absolute; top: calc(100% + 5px); left: 0; z-index: 40; min-width: 200px;
  max-height: 330px; overflow: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: var(--shadow); padding: 5px; display: none;
}
.dd.right .dd-menu { left: auto; right: 0; }
.dd.open .dd-menu { display: block; animation: pop .12s ease-out; }
@keyframes pop { from { opacity: 0; transform: translateY(-4px); } }
.dd-item {
  padding: 8px 11px; border-radius: 7px; cursor: pointer; font-size: 12.5px;
  display: flex; align-items: center; gap: 8px; color: var(--ink-2);
}
.dd-item:hover { background: var(--surface-2); color: var(--ink); }
.dd-item.sel { color: var(--accent); font-weight: 700; }
.dd-item.sel::before { content: "✓"; font-size: 11px; }

/* sort link row (innoforest-style) */
.sortrow { display: flex; gap: 18px; align-items: center; margin-left: auto; }
.sortrow a { font-size: 12.5px; color: var(--muted); font-weight: 500; padding: 3px 0; border-bottom: 2px solid transparent; cursor: pointer; }
.sortrow a:hover { color: var(--ink); }
.sortrow a.on { color: var(--ink); font-weight: 700; border-bottom-color: var(--accent); }

/* ---------------- badges ---------------- */
.chip {
  display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 6px;
  font-size: 11px; font-weight: 600; background: var(--surface-2); color: var(--ink-2);
  white-space: nowrap;
}
.chip.leaf { background: var(--accent-soft); color: var(--accent); }
.chip.sun { background: var(--heliconia-soft); color: var(--heliconia); }
.chip.stage-seed { background: var(--accent-soft); color: var(--accent); }
.chip.stage-a { background: rgba(27,116,143,.10); color: #1B748F; }
.chip.stage-b { background: rgba(58,74,167,.10); color: #4A3AA7; }
.chip.stage-late { background: rgba(122,58,110,.10); color: #7A3A6E; }
.chip.stage-debt { background: var(--heliconia-soft); color: var(--heliconia); }
:root[data-theme="dark"] .chip.stage-a { background: rgba(93,177,204,.14); color: #5DB1CC; }
:root[data-theme="dark"] .chip.stage-b { background: rgba(144,133,233,.14); color: #9085E9; }
:root[data-theme="dark"] .chip.stage-late { background: rgba(204,124,188,.14); color: #CC7CBC; }

/* ---------------- tables ---------------- */
.tbl { width: 100%; border-collapse: collapse; }
.tbl th {
  text-align: left; font-size: 11px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .07em;
  padding: 9px 14px; border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.tbl td { padding: 12px 14px; border-bottom: 1px solid var(--grid); font-size: 13px; vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr { cursor: pointer; transition: background .1s; }
.tbl tbody tr:hover { background: var(--surface-2); }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl th.num { text-align: right; }
.name-cell { font-weight: 700; font-size: 13.5px; }
.sub-cell { color: var(--muted); font-size: 11.5px; font-weight: 400; margin-top: 1px; }
.money { font-variant-numeric: tabular-nums; font-weight: 700; }

.card.flush { padding: 0; overflow: hidden; }
.card.flush .tbl th { padding-left: 20px; }
.card.flush .tbl td { padding-left: 20px; }

.pager { display: flex; gap: 6px; align-items: center; justify-content: center; margin-top: 16px; }
.pager button {
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
  padding: 7px 14px; border-radius: 8px; cursor: pointer; font: inherit; font-weight: 600; font-size: 12.5px;
  transition: background .1s;
}
.pager button:hover:not(:disabled) { background: var(--surface-2); color: var(--ink); }
.pager button:disabled { opacity: .35; cursor: default; }
.pager .pinfo { color: var(--muted); font-size: 12px; padding: 0 8px; font-variant-numeric: tabular-nums; }

/* ---------------- charts ---------------- */
.chart-wrap { position: relative; }
.chart-tip {
  position: fixed; z-index: 90; pointer-events: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: 9px;
  box-shadow: var(--shadow); padding: 8px 11px; font-size: 12px; display: none; max-width: 280px;
}
.chart-tip b { display: block; font-size: 12px; }
.chart-tip .tv { color: var(--ink-2); }
svg text { font-family: var(--sans); }
.bar-hover:hover { filter: brightness(1.1); }
.legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; }
.legend .li { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-2); }
.legend .sw { width: 9px; height: 9px; border-radius: 2.5px; }

/* hbar rows */
.hrow { display: flex; align-items: center; gap: 10px; padding: 4.5px 0; }
.hrow .hlabel { flex: none; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hrow .htrack { flex: 1; height: 15px; background: var(--surface-2); border-radius: 4px; overflow: hidden; }
.hrow .hfill { height: 100%; border-radius: 4px; }
.hrow .hval { width: 62px; flex: none; text-align: right; font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--ink-2); }

/* ---------------- detail pages ---------------- */
.back { color: var(--muted); font-size: 12.5px; display: inline-flex; gap: 6px; margin-bottom: 14px; font-weight: 600; }
.back:hover { color: var(--accent); }
.detail-head { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 20px; }
.avatar {
  width: 56px; height: 56px; border-radius: 13px; flex: none;
  background: var(--canopy); color: var(--canopy-ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 800;
}
.detail-head h1 { font-size: 25px; font-weight: 800; letter-spacing: -.02em; display: flex; align-items: center; gap: 10px; }
.meta-row { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 8px; align-items: center; }
.ext-link { color: var(--accent); font-weight: 600; font-size: 12.5px; }
.ext-link:hover { text-decoration: underline; }
.kpi-side {
  min-width: 172px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 16px 18px; box-shadow: var(--shadow);
}
.kpi-side .k { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.kpi-side .v { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin-top: 3px; font-variant-numeric: tabular-nums; }
.kpi-side .d { font-size: 11.5px; color: var(--ink-2); margin-top: 1px; }

/* timeline */
.timeline { position: relative; padding-left: 20px; }
.timeline::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 2px; background: var(--grid); border-radius: 2px; }
.tl-item { position: relative; padding: 0 0 17px 12px; }
.tl-item::before {
  content: ""; position: absolute; left: -19px; top: 5px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--accent); border: 2.5px solid var(--surface);
  box-shadow: 0 0 0 1px var(--line);
}
.tl-date { font-size: 11px; color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.tl-main { font-weight: 700; font-size: 14px; margin: 1px 0 2px; }
.tl-sub { font-size: 12px; color: var(--ink-2); }
.tl-sub a { color: var(--accent); font-weight: 600; }

/* ---------------- forms / admin ---------------- */
.auth-box { max-width: 360px; margin: 70px auto; text-align: center; }
.auth-box h2 { font-size: 20px; font-weight: 800; letter-spacing: -.01em; margin-bottom: 6px; }
.auth-box p { color: var(--muted); font-size: 12.5px; margin-bottom: 18px; }
.field { margin-bottom: 12px; text-align: left; }
.field label { display: block; font-size: 11.5px; font-weight: 700; color: var(--ink-2); margin-bottom: 5px; }
.field input, .field textarea {
  width: 100%; border: 1px solid var(--line); background: var(--surface);
  color: var(--ink); border-radius: 8px; padding: 9px 12px; font: inherit; outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.field input:focus, .field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.btn {
  border: 0; background: var(--accent); color: var(--on-accent);
  padding: 9px 16px; border-radius: 8px; font: inherit; font-weight: 700; font-size: 13px; cursor: pointer;
  transition: filter .12s, transform .08s;
}
:root[data-theme="dark"] .btn { color: #0B1710; }
.btn:hover { filter: brightness(1.07); }
.btn:active { transform: scale(.97); }
.btn.ghost { background: var(--surface-2); color: var(--ink-2); }
.btn.sm { padding: 5px 11px; font-size: 12px; border-radius: 7px; }
.btn.danger { background: transparent; color: var(--clay); border: 1px solid var(--clay); }
.btn:disabled { opacity: .45; cursor: default; }
.row-actions { display: flex; gap: 6px; }

/* admin tabs */
.atabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.atabs a { padding: 9px 15px; font-weight: 600; font-size: 13px; color: var(--ink-2); border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; }
.atabs a.on { color: var(--accent); border-bottom-color: var(--accent); }
.statgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.mini { background: var(--surface-2); border-radius: 8px; padding: 10px 13px; }
.mini .k { font-size: 10.5px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .07em; }
.mini .v { font-size: 17px; font-weight: 700; margin-top: 2px; font-variant-numeric: tabular-nums; }
.logbox {
  background: var(--canopy); color: #cfe3d5; font: 11px/1.6 ui-monospace, Menlo, monospace;
  border-radius: 8px; padding: 12px 14px; max-height: 260px; overflow: auto; white-space: pre-wrap;
}
.okdot, .warndot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.okdot { background: var(--accent); }
.warndot { background: var(--heliconia); }

/* modal / toast */
.modal-bg { position: fixed; inset: 0; background: rgba(12,20,15,.5); z-index: 80; display: flex; align-items: center; justify-content: center; animation: fade .15s; }
@keyframes fade { from { opacity: 0; } }
.modal { width: 480px; max-width: 92vw; max-height: 86vh; overflow: auto; background: var(--surface); border-radius: 14px; padding: 24px; box-shadow: var(--shadow); animation: pop .15s ease-out; }
.modal h3 { font-size: 17px; font-weight: 800; margin-bottom: 16px; }
.modal .m-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
#toast {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%);
  background: var(--canopy); color: var(--canopy-ink); padding: 10px 18px; border-radius: 9px;
  font-size: 12.5px; font-weight: 600; z-index: 100; box-shadow: var(--shadow);
  opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(-4px); }
.empty { text-align: center; color: var(--muted); padding: 40px 0; font-size: 13px; }
.suggest { position: relative; }
.suggest-menu { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 60; background: var(--surface); border: 1px solid var(--line); border-radius: 9px; box-shadow: var(--shadow); overflow: hidden; }
.suggest-menu div { padding: 9px 12px; cursor: pointer; font-size: 12.5px; }
.suggest-menu div:hover { background: var(--surface-2); }

/* flex-wrap matters: the footer is a single row of links and had no wrap, so on a
   narrow viewport it simply overflowed the page instead of reflowing. */
footer { max-width: 1340px; margin: 0 auto; padding: 24px 36px 40px; color: var(--muted); font-size: 12px; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; border-top: 1px solid var(--line); margin-top: 20px; }
footer a { color: var(--muted); font-weight: 600; }
footer a:hover { color: var(--accent); }
footer .foot-sep { opacity: .5; }
@media (max-width: 760px) {
  footer { padding: 18px 14px 28px; justify-content: center; text-align: center; row-gap: 4px; }
  /* the © line reads as its own line rather than being crowded by the link row */
  footer > span:first-child { flex-basis: 100%; margin-bottom: 2px; }
  footer > .foot-sep:first-of-type { display: none; }
}

/* ---------------- premium tier ----------------
   Everything that sells or gates the subscription wears the ACCENT: buying is the
   one action the paywall surfaces exist for. Heliconia stays reserved for status
   (unicorn, warning) so a warm badge never reads as "click to upgrade". */
.lock-chip {
  display: inline-flex; align-items: center; gap: 4px; cursor: pointer;
  padding: 2px 8px; border-radius: 6px; font-size: 10.5px; font-weight: 700;
  color: var(--accent); background: var(--accent-soft); letter-spacing: .02em;
  transition: filter .12s;
}
.lock-chip:hover { filter: brightness(1.06); text-decoration: none; }
.tbtn.prem-on { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
#premBtn { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
#premBtn:hover { background: var(--accent-soft); }
.prem-teaser {
  border: 1px dashed color-mix(in srgb, var(--accent) 40%, var(--line));
  background: linear-gradient(180deg, var(--accent-soft), transparent);
  border-radius: 12px; padding: 26px 20px; text-align: center; cursor: pointer;
  transition: border-color .15s;
}
.prem-teaser:hover { border-color: var(--accent); }
.prem-lockbig { color: var(--accent); margin-bottom: 8px; }
.prem-title { font-weight: 800; font-size: 15px; }
.prem-sub { margin: 10px 0 4px; display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.prem-cta { color: var(--muted); font-size: 12px; margin-top: 6px; max-width: 420px; margin-left: auto; margin-right: auto; }

/* ---------------- logos ---------------- */
.mini-logo { width: 26px; height: 26px; border-radius: 7px; object-fit: contain; flex: none; background: var(--surface-2); }
.mini-logo.ph { display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: var(--muted); }
.avatar.logo { background: var(--surface-2); padding: 8px; }
.avatar.logo img { width: 100%; height: 100%; object-fit: contain; border-radius: 8px; }

/* ---------------- mobile ---------------- */
@media (max-width: 760px) {
  .topbar { padding: 0 14px; gap: 12px; height: 54px; }
  #nav { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  #nav::-webkit-scrollbar { display: none; }
  #nav a { padding: 0 10px; font-size: 13px; white-space: nowrap; }
  .logo .wordmark { font-size: 16px; }
  #premBtn { font-size: 0; gap: 0; padding: 0 8px; }  /* icon only */
  #premBtn svg { font-size: 13px; }
  main { padding: 18px 14px 48px; }
  .page-title { font-size: 21px; }
  .hero { grid-template-columns: 1fr 1fr; row-gap: 18px; padding: 18px 4px; }
  .hero .kpi { padding: 0 16px; }
  .hero .kpi + .kpi { border-left: none; }
  .hero .kpi:nth-child(2n) { border-left: 1px solid rgba(239,243,236,.14); }
  .hero .v { font-size: 26px; }
  .card { padding: 14px 14px; }
  .card.flush { overflow-x: auto; }
  .card.flush .tbl { min-width: 640px; }
  .detail-head { flex-direction: column; }
  .kpi-side { width: 100%; }
  .controls { gap: 6px; }
  .sortrow { margin-left: 0; width: 100%; overflow-x: auto; gap: 14px; }
  .search { min-width: 100%; }
  .modal { padding: 18px; }
  .atabs { overflow-x: auto; scrollbar-width: none; }
  .atabs a { white-space: nowrap; padding: 9px 10px; }
}

/* ---------------- loading skeletons (no layout shift) ---------------- */
html { overflow-y: scroll; scrollbar-gutter: stable; }
#view { min-height: calc(100vh - 160px); }
.controls { min-height: 40px; }
@keyframes sk { 0% { opacity: .55; } 50% { opacity: .9; } 100% { opacity: .55; } }
.sk-title, .sk-sub, .sk-bar, .sk-pill, .sk-row {
  background: var(--surface-2); border-radius: 8px; animation: sk 1.2s ease-in-out infinite;
}
.sk-title { height: 27px; width: 220px; margin-bottom: 8px; }
.sk-sub { height: 14px; width: 320px; max-width: 60%; margin-bottom: 22px; }
.sk-bar { height: 38px; border-radius: 9px; }
.sk-pill { height: 38px; width: 92px; border-radius: 9px; }
.sk-row { height: 52px; border-radius: 0; margin: 0 0 1px; opacity: .5; }
.card .sk-row { background: var(--grid); }

/* ---------------- auth modal contrast ---------------- */
.modal-bg .modal { border: 1px solid var(--line); }
#g-btn { border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); font-weight: 700; }
#g-btn:hover { background: var(--surface); border-color: var(--muted); }
.modal .field input { background: var(--paper); }
:root[data-theme="dark"] .modal .field input { background: #0e140f; border-color: #33403a; }
:root[data-theme="dark"] #g-btn { background: #242e27; border-color: #3a463f; }
.modal a#a-toggle { color: var(--accent); font-weight: 700; }

/* ---------------- audit fixes ---------------- */
.name-cell > span > span:last-child { min-width: 0; }
.name-cell { max-width: 420px; }
.tbl td.name-cell .sub-cell, .name-cell b { overflow: hidden; text-overflow: ellipsis; }
.detail-head h1 { min-width: 0; overflow-wrap: anywhere; }
/* skeleton heights match real content (no jump) */
.sk-hero { height: 132px; border-radius: 14px; background: var(--surface-2); animation: sk 1.2s ease-in-out infinite; margin-bottom: 18px; }
.sk-head { height: 118px; }
@media (max-width: 760px) {
  .logo .tagline { display: none; }
  .topbar { gap: 8px; padding: 0 10px; }
  .top-actions { gap: 6px; }
  /* The language button keeps a readable label on phones by dropping to the code
     (EN / ES / KO …). A later rule used to set font-size:0 here, which left only a
     bare "▾" — an unlabelled caret nobody can recognise as a language control. */
  #langDD .tbtn { padding: 0 9px; }
  #langDD .lang-full { display: none; }
  #langDD .lang-abbr { display: inline; }
  /* The upgrade CTA keeps its lock icon but drops the wording on phones, the same
     way the language control drops to an abbreviation. Four labelled controls did
     not fit beside the nav in a 54px bar. */
  #premBtn { font-size: 0; padding: 0 9px; gap: 0; }
  #premBtn svg { font-size: 12.5px; }
  .tbtn { height: 40px; }
  .pager button { min-height: 40px; }
  .dd-btn, .search { height: 42px; }
  .dd-item { padding: 11px; }
  .sortrow a { padding: 8px 0; }
  .name-cell { max-width: 60vw; }
  #acctBtn { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* #nav is a horizontal scroller at this width (it overflows by ~190px on a 375px
     screen), so the language button costs nav width rather than breaking the bar. */
  #langDD .dd-menu { min-width: 150px; }
}

/* ---------------- profile / benefits / registration ---------------- */
.benefits { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.benefits li { position: relative; padding-left: 24px; font-size: 13px; color: var(--ink-2); }
.benefits li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--accent); font-weight: 800; }
.setting-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--grid); }
.setting-row:last-child { border-bottom: 0; }
.lang-pick { cursor: pointer; color: var(--muted); font-weight: 600; font-size: 13px; padding: 0 5px; }
.lang-pick.on { color: var(--accent); text-decoration: underline; }
.seg { display: inline-flex; gap: 16px; }
.seg label { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; cursor: pointer; }

/* ---------------- AI analyst ---------------- */
.ai-log { min-height: 260px; max-height: 52vh; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding: 4px 2px 14px; }
.ai-msg { max-width: 85%; padding: 11px 15px; border-radius: 14px; font-size: 13.5px; line-height: 1.55; white-space: normal; }
.ai-msg.user { align-self: flex-end; background: var(--accent); color: var(--on-accent); border-bottom-right-radius: 4px; }
.ai-msg.bot { align-self: flex-start; background: var(--surface-2); color: var(--ink); border-bottom-left-radius: 4px; }
.ai-src { margin-top: 8px; font-size: 11px; color: var(--muted); }
.ai-input { display: flex; gap: 8px; border-top: 1px solid var(--grid); padding-top: 14px; }
.ai-input input { flex: 1; border: 1px solid var(--line); border-radius: 10px; padding: 0 14px; height: 42px; background: var(--paper); color: var(--ink); font: inherit; }
.ai-input input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); outline: 0; }
.ai-changes { margin-top: 14px; background: var(--accent-soft); border-radius: 10px; padding: 12px 14px; font-size: 13px; }
.ai-changes ul { margin: 6px 0 0; padding-left: 18px; }
.title-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }

/* ---------------- ops dashboard ---------------- */
.ops-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 640px) { .ops-grid { grid-template-columns: 1fr 1fr; } }
.ops-stat { background: var(--surface-2); border-radius: 10px; padding: 14px 16px; }
.ops-stat .k { font-size: 11px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.ops-stat .v { font-size: 26px; font-weight: 800; letter-spacing: -.02em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.ops-stat .d { font-size: 11px; color: var(--muted); margin-top: 3px; }
.ops-healthrow { display: flex; flex-wrap: wrap; gap: 10px; }
.ops-health { display: inline-flex; align-items: center; gap: 7px; background: var(--surface-2); border-radius: 8px; padding: 7px 12px; font-size: 12.5px; font-weight: 600; }
.ops-health .dot { width: 8px; height: 8px; border-radius: 50%; }
.ops-health.up .dot { background: var(--accent); }
.ops-health.down .dot { background: var(--clay); }
.ops-health.down { color: var(--clay); }
/* .foot-langs / .foot-lang removed with the footer language row — the top-bar
   dropdown (#langDD) is the single language control on every breakpoint. */
/* owner sandbox checkout box */
.sandbox-box { margin-top: 14px; padding: 12px; border: 1px dashed var(--heliconia); border-radius: 10px; background: var(--heliconia-soft); }
.sandbox-label { font-size: 12px; font-weight: 700; color: var(--heliconia); margin-bottom: 8px; }
.sandbox-box .btn { margin: 0 4px 6px; }
.sandbox-hint { font-size: 10.5px; color: var(--muted); margin-top: 4px; }