/* TornWarBot — Platform Control cockpit styles.
   Ported from the standalone admin.html into the dashboard shell. EVERY rule is
   scoped under `.plat` (and `.plat-modal*` for the grant modal) so it can never
   restyle the dashboard's own global <table>/.btn/.badge/.modal elements.
   Colours come from the shared tokens.css so themes stay consistent. */

.plat { --card2: #1c2128; --border2: #21262d; --muted2: #6e7681; --orange: #f0883e; }

/* ── Stat row ── */
.plat .stat-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 24px; }
@media (max-width: 1100px) { .plat .stat-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .plat .stat-row { grid-template-columns: repeat(2, 1fr); } }
.plat .stat-card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 18px 20px; position: relative; overflow: hidden; box-shadow: var(--shadow-card); }
.plat .stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; border-radius: 10px 10px 0 0; }
.plat .stat-card.accent-blue::before   { background: var(--blue); }
.plat .stat-card.accent-green::before  { background: var(--green); }
.plat .stat-card.accent-yellow::before { background: var(--yellow); }
.plat .stat-card.accent-purple::before { background: var(--purple); }
.plat .stat-card.accent-muted::before  { background: var(--muted2); }
.plat .stat-card.accent-red::before    { background: var(--red); }
/* Stat cards that double as table filters (Users tab). The card IS the control —
   clicking it applies its filter, clicking the active card clears it. */
.plat .stat-card.su-filter { cursor: pointer; transition: border-color .12s, transform .12s, box-shadow .12s; }
.plat .stat-card.su-filter:hover { border-color: var(--muted2); transform: translateY(-1px); }
.plat .stat-card.su-filter.active { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue), var(--shadow-card); }
.plat .stat-card.su-filter.active::after { content: '✓'; position: absolute; top: 10px; right: 12px; font-size: var(--fs-xs); font-weight: 700; color: var(--blue); }
.plat .stat-label { font-size: var(--fs-xs); color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 10px; }
.plat .stat-value { font-size: var(--fs-3xl); font-weight: 800; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.plat .stat-sub   { font-size: var(--fs-xs); color: var(--muted2); margin-top: 6px; font-variant-numeric: tabular-nums; }
.plat .c-green  { color: var(--green); }  .plat .c-yellow { color: var(--yellow); }
.plat .c-red    { color: var(--red); }    .plat .c-blue   { color: var(--blue); }
.plat .c-purple { color: var(--purple); } .plat .c-muted  { color: var(--muted); }
.plat .health-bar { display: flex; gap: 3px; margin-top: 10px; height: 5px; border-radius: 3px; overflow: hidden; }
.plat .health-seg { height: 100%; border-radius: 3px; }
.plat .dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.plat .dot-green { background: var(--green); } .plat .dot-orange { background: var(--yellow); } .plat .dot-red { background: var(--red); }

/* ── Section separators ── */
.plat .section-sep { display: flex; align-items: center; gap: 12px; margin: 28px 0 16px; }
.plat .section-sep-label { font-size: var(--fs-xs); font-weight: 700; color: var(--muted2); text-transform: uppercase; letter-spacing: .6px; white-space: nowrap; }
.plat .section-sep-line  { flex: 1; height: 1px; background: var(--border2); }

/* ── Panels ── */
.plat .panel { background: var(--card); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 16px; overflow: hidden; box-shadow: var(--shadow-card); }
.plat .panel.danger { border-color: rgba(248,81,73,.3); }
.plat .panel-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--border2); }
.plat .panel-title { font-size: var(--fs-sm); font-weight: 600; display: flex; align-items: center; gap: 8px; }
.plat .panel-title.danger-title { color: var(--red); }
.plat .panel-body { padding: 18px 20px; }
.plat .panel-desc { font-size: var(--fs-xs); color: var(--muted); line-height: 1.65; }
.plat .pair-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; align-items: start; }
.plat .pair-grid > .panel { margin-bottom: 0; }
@media (max-width: 960px) { .plat .pair-grid { grid-template-columns: 1fr; } }

/* ── Tables (scoped so dashboard tables are untouched) ── */
.plat .table-wrap { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.plat table { width: 100%; border-collapse: collapse; }
.plat th { font-size: var(--fs-xs); font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; background: var(--card2); }
.plat td { padding: 12px 14px; border-bottom: 1px solid var(--border2); vertical-align: middle; font-variant-numeric: tabular-nums; }
.plat tr:last-child td { border-bottom: none; }
.plat tr:hover td { background: rgba(255,255,255,.015); }
.plat .empty-row td { color: var(--muted); font-style: italic; padding: 28px 14px; text-align: center; }
@media (max-width: 900px) { .plat th.hide-sm, .plat td.hide-sm { display: none; } }

/* ── Badges ── */
.plat .badge { display: inline-flex; align-items: center; gap: 4px; border-radius: 20px; padding: 3px 9px; font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; }
.plat .badge-green    { background: rgba(63,185,80,.12);   border: 1px solid rgba(63,185,80,.3);   color: var(--green); }
.plat .badge-yellow   { background: rgba(210,153,34,.12);  border: 1px solid rgba(210,153,34,.3);  color: var(--yellow); }
.plat .badge-red      { background: rgba(248,81,73,.12);   border: 1px solid rgba(248,81,73,.3);   color: var(--red); }
.plat .badge-muted    { background: rgba(139,148,158,.08); border: 1px solid rgba(139,148,158,.2); color: var(--muted); }
.plat .badge-blue     { background: rgba(88,166,255,.1);   border: 1px solid rgba(88,166,255,.2);  color: var(--blue); }
.plat .badge-purple   { background: rgba(188,140,255,.12); border: 1px solid rgba(188,140,255,.3); color: var(--purple); }
.plat .badge-trial    { background: rgba(210,153,34,.12);  border: 1px solid rgba(210,153,34,.3);  color: var(--yellow); }
.plat .badge-lifetime { background: rgba(188,140,255,.12); border: 1px solid rgba(188,140,255,.3); color: var(--purple); }
.plat .badge-grace    { background: rgba(248,81,73,.08);   border: 1px solid rgba(248,81,73,.25);  color: var(--red); }
.plat .badge-expired2 { background: rgba(248,81,73,.15);   border: 1px solid rgba(248,81,73,.4);   color: var(--red); }
.plat .badge-used     { background: rgba(139,148,158,.08); border: 1px solid rgba(139,148,158,.2); color: var(--muted); }
.plat .badge-expired  { background: rgba(248,81,73,.08);   border: 1px solid rgba(248,81,73,.2);   color: var(--red); }
.plat .badge-revoked  { background: rgba(248,81,73,.08);   border: 1px solid rgba(248,81,73,.2);   color: var(--red); }
.plat .badge-active   { background: rgba(63,185,80,.12);   border: 1px solid rgba(63,185,80,.3);   color: var(--green); }

/* ── Key pills ── */
.plat .key-pill { display: inline-flex; align-items: center; gap: 4px; background: rgba(88,166,255,.1); border: 1px solid rgba(88,166,255,.2); border-radius: 12px; padding: 2px 8px; font-size: var(--fs-xs); color: var(--blue); font-weight: 600; margin-right: 4px; }
.plat .key-pill.owner { background: rgba(188,140,255,.1); border-color: rgba(188,140,255,.2); color: var(--purple); }
.plat .rpm-bar  { width: 72px; height: 5px; background: rgba(255,255,255,.08); border-radius: 3px; overflow: hidden; display: inline-block; vertical-align: middle; margin-left: 6px; }
.plat .rpm-fill { height: 100%; border-radius: 3px; transition: width .4s; }

/* ── Pool strip ── */
.plat .pool-strip { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 14px 20px; margin-bottom: 24px; display: flex; gap: 0; box-shadow: var(--shadow-card); }
.plat .pool-strip-item { flex: 1; padding: 0 20px; border-right: 1px solid var(--border2); }
.plat .pool-strip-item:first-child { padding-left: 4px; }
.plat .pool-strip-item:last-child  { border-right: none; }
.plat .pool-item-label { font-size: var(--fs-xs); color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 5px; font-weight: 600; }
.plat .pool-item-val   { font-size: var(--fs-xl); font-weight: 700; font-variant-numeric: tabular-nums; }
.plat .pool-item-sub   { font-size: var(--fs-xs); color: var(--muted2); margin-top: 2px; }
@media (max-width: 700px) { .plat .pool-strip { flex-wrap: wrap; gap: 12px; } .plat .pool-strip-item { border-right: none; flex-basis: 100%; } }

/* ── Buttons (scoped variants) ── */
.plat .btn-generate { display: inline-flex; align-items: center; gap: 5px; padding: 7px 14px; border: 1px solid rgba(63,185,80,.4); border-radius: 6px; font-size: var(--fs-xs); font-weight: 600; cursor: pointer; background: rgba(63,185,80,.08); color: var(--green); transition: opacity .15s; }
.plat .btn-generate:hover:not(:disabled) { opacity: .8; }
.plat .btn-generate:disabled { opacity: .4; cursor: not-allowed; }
.plat .btn-blue    { border-color: rgba(88,166,255,.4); color: var(--blue); background: rgba(88,166,255,.06); }
.plat .btn-success { border: 1px solid rgba(63,185,80,.4); color: var(--green); background: rgba(63,185,80,.08); }
.plat .btn-success:hover { background: rgba(63,185,80,.18); }

/* ── Forms ── */
.plat .field  { display: flex; flex-direction: column; gap: 5px; }
.plat .field label { font-size: var(--fs-xs); font-weight: 600; color: var(--muted); letter-spacing: .03em; text-transform: uppercase; }
.plat .pricing-form { display: flex; flex-direction: column; gap: 14px; }
.plat .pricing-fields { display: flex; flex-direction: column; gap: 12px; }
.plat .form-row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--border2); }
.plat .code-display { font-family: 'Courier New', monospace; font-size: var(--fs-base); font-weight: 700; color: var(--green); background: rgba(63,185,80,.07); border: 1px solid rgba(63,185,80,.25); border-radius: 6px; padding: 7px 12px; letter-spacing: .08em; cursor: pointer; display: none; }
.plat .code-display.show { display: inline-block; }

.plat .faction-name { font-weight: 600; font-size: var(--fs-sm); }
.plat .faction-id   { font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; font-family: monospace; }

/* ── Grant modal (renamed from .modal-backdrop/.modal to avoid clashing with the
      dashboard's member-modal, which reuses those class names) ──
   These live at body level in index.html on purpose: `position: fixed` resolves
   against the nearest transformed ancestor, and `.page.active` runs a filling
   transform animation, so a modal nested inside a Controls tab centres itself
   in the tall page box rather than the viewport. Don't move them back inside.
   The backdrop scrolls (not the page) when a modal outgrows the viewport. */
.plat-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.65); z-index: 3000; display: none; align-items: center; justify-content: center; overflow-y: auto; padding: 24px 12px; }
.plat-modal-backdrop.open { display: flex; }
.plat-modal { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 26px 26px 22px; width: 380px; max-width: 95vw; margin: auto; box-shadow: 0 24px 60px rgba(0,0,0,.5); }
.plat-modal h3 { font-size: var(--fs-lg); font-weight: 700; margin-bottom: 20px; }
.plat-modal .field { margin-bottom: 14px; display: flex; flex-direction: column; gap: 5px; }
.plat-modal .field label { font-size: var(--fs-xs); font-weight: 600; color: var(--muted); letter-spacing: .03em; text-transform: uppercase; }
.plat-modal input, .plat-modal select { width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; color: var(--text); font-size: var(--fs-sm); padding: 8px 10px; outline: none; font-family: inherit; }
.plat-modal input:focus, .plat-modal select:focus { border-color: var(--blue); }
.plat-modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }

/* ── Manage-script-user modal ──
   A read-first dossier (identity → premium clocks → facts → ledger) with the
   write actions fenced off at the bottom, so the owner reads before they click.
   Wider than the plain grant modal because the facts read as a two-column grid;
   it collapses to one column on a phone. */
.plat-modal.su-modal { width: 640px; padding: 22px 24px 20px; }

.su-modal .su-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.su-modal .su-eyebrow { font-size: var(--fs-xs); font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.su-modal .su-name { font-size: var(--fs-lg); font-weight: 700; color: var(--text); margin-top: 3px; display: flex; align-items: center; gap: 7px; }
.su-modal .su-name .su-tid { font-family: var(--mono); font-size: var(--fs-xs); font-weight: 500; color: var(--muted); }
.su-modal .su-meta { font-size: var(--fs-xs); color: var(--muted); margin-top: 4px; }
.su-modal .su-head-badges { display: flex; flex-wrap: wrap; gap: 5px; justify-content: flex-end; max-width: 55%; }

/* Premium clocks. Two cards side by side: personal premium and, when the user
   sits on the faction tier, the faction subscription that gates it. */
.su-modal .su-prem { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.su-modal .su-prem.one { grid-template-columns: 1fr; }
.su-modal .su-pcard { background: var(--card2); border: 1px solid var(--border2); border-radius: 10px; padding: 13px 15px 14px; position: relative; overflow: hidden; }
.su-modal .su-pcard::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--border2); }
.su-modal .su-pcard.on::before   { background: var(--green); }
.su-modal .su-pcard.warn::before { background: var(--yellow); }
.su-modal .su-pcard.off::before  { background: var(--muted2); }
.su-modal .su-pcard.life::before { background: var(--purple); }
.su-modal .su-pcap { font-size: var(--fs-xs); font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.su-modal .su-pdays { font-family: var(--mono); font-size: var(--fs-2xl); font-weight: 700; line-height: 1.1; margin-top: 6px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.su-modal .su-pdays .unit { font-size: var(--fs-sm); font-weight: 600; color: var(--muted); margin-left: 4px; }
.su-modal .su-pbar { height: 5px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; margin-top: 9px; }
.su-modal .su-pbar i { display: block; height: 100%; border-radius: 3px; transition: width .4s; }
.su-modal .su-psub { font-size: var(--fs-xs); color: var(--muted2); margin-top: 7px; line-height: 1.5; }
.su-modal .su-psub .cd { margin-top: 4px; }

/* Facts grid — label above value, hairline-separated cells. */
.su-modal .su-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border2); border: 1px solid var(--border2); border-radius: 10px; overflow: hidden; margin-bottom: 16px; }
.su-modal .su-cell { background: var(--card); padding: 10px 13px 11px; min-width: 0; }
.su-modal .su-cell .k { font-size: var(--fs-xs); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.su-modal .su-cell .v { font-size: var(--fs-sm); font-weight: 600; color: var(--text); margin-top: 4px; word-break: break-word; }
.su-modal .su-cell .v.mono { font-family: var(--mono); font-weight: 500; }
.su-modal .su-cell .s { font-size: var(--fs-xs); color: var(--muted2); margin-top: 2px; }

/* Ledger — newest first, capped by the server at the last handful of entries. */
.su-modal .su-hist { border: 1px solid var(--border2); border-radius: 10px; overflow: hidden; margin-bottom: 16px; }
.su-modal .su-hist-head { font-size: var(--fs-xs); font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; padding: 9px 13px; background: var(--card2); border-bottom: 1px solid var(--border2); }
.su-modal .su-hrow { display: flex; align-items: baseline; gap: 9px; padding: 8px 13px; font-size: var(--fs-xs); border-bottom: 1px solid var(--border2); }
.su-modal .su-hrow:last-child { border-bottom: none; }
.su-modal .su-hrow .ha { font-weight: 600; color: var(--text); white-space: nowrap; }
.su-modal .su-hrow .hd { font-family: var(--mono); font-weight: 600; }
.su-modal .su-hrow .hb { color: var(--muted2); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.su-modal .su-hrow .ht { color: var(--muted); white-space: nowrap; }

/* Action fence — visually separated so a read-through never ends on a button. */
.su-modal .su-actions { border: 1px solid var(--border); border-radius: 10px; padding: 13px 15px 14px; background: var(--card2); }
.su-modal .su-act-title { font-size: var(--fs-xs); font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 11px; }
.su-modal .su-act-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.su-modal .su-act-note { font-size: var(--fs-xs); color: var(--muted2); }

@media (max-width: 620px) {
  .su-modal .su-prem { grid-template-columns: 1fr; }
  .su-modal .su-grid { grid-template-columns: repeat(2, 1fr); }
  .su-modal .su-head-badges { max-width: 100%; justify-content: flex-start; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Billing & Operations redesign — KPI sparklines, live countdown chips,
   the Live Ops pulse grid, filter chips, and the collapsible danger zone.
   All scoped under .plat so nothing leaks into the rest of the dashboard.
   ══════════════════════════════════════════════════════════════════════════ */

/* KPI strip: reuses .stat-card/.su-filter; adds a data sparkline behind the text
   and a compact modifier so 4–5 tiles fit a row without shrinking type. */
.plat .kpi-row { margin-bottom: 18px; }
.plat .stat-card.kpi { padding: 15px 17px 16px; }
.plat .stat-card > *:not(.stat-spark) { position: relative; z-index: 1; }
.plat .stat-spark { position: absolute; left: 0; right: 0; bottom: 0; height: 30px; z-index: 0; opacity: .55; pointer-events: none; }
.plat .stat-spark svg { display: block; width: 100%; height: 100%; }
.plat .stat-value.sm { font-size: var(--fs-2xl); }
.plat .stat-value .unit { font-size: var(--fs-sm); font-weight: 600; color: var(--muted); letter-spacing: 0; }

/* Inline sparkline (error-rate strip in a panel head). */
.plat .spark-inline { display: inline-flex; vertical-align: middle; }
.plat .spark-inline svg { display: block; }

/* Heartbeat pill — "updated 4s ago · next in 26s" with a breathing dot. */
.plat .heartbeat { display: inline-flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 5px 12px; font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; }
.plat .heartbeat .live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(63,185,80,.55); animation: plat-pulse 2.4s ease-out infinite; flex-shrink: 0; }
@keyframes plat-pulse { 0% { box-shadow: 0 0 0 0 rgba(63,185,80,.5); } 70% { box-shadow: 0 0 0 7px rgba(63,185,80,0); } 100% { box-shadow: 0 0 0 0 rgba(63,185,80,0); } }
@media (prefers-reduced-motion: reduce) { .plat .heartbeat .live-dot { animation: none; } }

/* Live countdown chip — ticks in JS; colour encodes urgency. Mono keeps the
   HH:MM:SS from jittering as digits change width. */
.plat .cd { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: var(--fs-xs); font-weight: 600; padding: 3px 9px; border-radius: var(--r-sm); border: 1px solid transparent; font-variant-numeric: tabular-nums; white-space: nowrap; }
.plat .cd .cd-bar { width: 34px; height: 4px; border-radius: 3px; background: currentColor; opacity: .22; overflow: hidden; }
.plat .cd .cd-bar i { display: block; height: 100%; background: currentColor; opacity: .95; border-radius: 3px; }
.plat .cd.cd-ok   { color: var(--green);  background: rgba(63,185,80,.08);  border-color: rgba(63,185,80,.22); }
.plat .cd.cd-soon { color: var(--yellow); background: rgba(210,153,34,.1);  border-color: rgba(210,153,34,.28); }
.plat .cd.cd-crit { color: var(--red);    background: rgba(248,81,73,.1);   border-color: rgba(248,81,73,.3); }
.plat .cd.cd-dead { color: var(--muted);  background: rgba(139,148,158,.08); border-color: rgba(139,148,158,.2); }
.plat .cd.cd-life { color: var(--purple); background: rgba(188,140,255,.1);  border-color: rgba(188,140,255,.28); }

/* Live Ops pulse grid — hairline-separated metric cells inside one panel. */
.plat .liveops { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: var(--border2); }
@media (max-width: 1000px) { .plat .liveops { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px)  { .plat .liveops { grid-template-columns: repeat(2, 1fr); } }
.plat .metric { background: var(--card); padding: 14px 16px; }
.plat .metric .m-cap { font-size: var(--fs-xs); color: var(--muted); text-transform: uppercase; letter-spacing: .5px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.plat .metric .m-val { font-family: var(--mono); font-size: var(--fs-xl); font-weight: 600; margin-top: 6px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.plat .metric .m-sub { font-size: var(--fs-xs); color: var(--muted2); margin-top: 3px; }
.plat .metric .m-rpm { height: 5px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; margin-top: 8px; }
.plat .metric .m-rpm i { display: block; height: 100%; border-radius: 3px; transition: width .5s; }

/* Filter chips (subscriptions table). Mirrors the su-filter card behaviour in
   a compact pill form for the in-panel filter row. */
.plat .fchips { display: flex; gap: 7px; flex-wrap: wrap; }
.plat .fchip { border: 1px solid var(--border); background: var(--card2); color: var(--muted); border-radius: var(--r-pill); padding: 4px 12px; font-size: var(--fs-xs); font-weight: 600; cursor: pointer; transition: color .12s, border-color .12s, background .12s; }
.plat .fchip:hover { color: var(--text); }
.plat .fchip.on { color: var(--text); border-color: var(--blue); background: rgba(88,166,255,.1); }
.plat .fchip .fchip-n { opacity: .6; margin-left: 4px; }

/* Collapsible danger zone. */
.plat .dz-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; cursor: pointer; padding: 12px 16px; background: rgba(248,81,73,.05); border: 1px solid rgba(248,81,73,.28); border-radius: 10px; margin-bottom: 4px; }
.plat .dz-head:hover { background: rgba(248,81,73,.09); }
.plat .dz-head .dz-caret { transition: transform .18s; color: var(--red); display: inline-block; }
.plat .dz-head.open .dz-caret { transform: rotate(90deg); }
.plat .dz-body { display: none; padding-top: 12px; }
.plat .dz-body.open { display: block; }