/* App layer over the shared theme tokens (theme.css). Maps app.css variables to tokens so dark mode
   follows prefers-color-scheme or the toggle, and fixes hardcoded light colors. */
:root{--text:var(--cp-text);--muted:var(--cp-muted);--surface:var(--cp-surface);--surface-2:var(--cp-bg);--border:var(--cp-border);--hair:var(--cp-hair);
 --primary:var(--cp-primary);--focus:var(--cp-focus);--ok-fg:var(--cp-ok-fg);--ok-bg:var(--cp-ok-bg);--warn-fg:var(--cp-warn-fg);--warn-bg:var(--cp-warn-bg);
 --danger-fg:var(--cp-danger-fg);--danger-bg:var(--cp-danger-bg)}
.btn,.slotbtn,.more,input,select,textarea{background:var(--surface);color:var(--text)}
.btn.primary{background:var(--primary);border-color:var(--primary);color:var(--cp-primary-fg)}
.btn[aria-pressed=true]{background:var(--text);color:var(--surface)}
.card,nav.side,.bnav,table,th,td{background-color:var(--surface);color:var(--text)}
a{color:var(--primary)}
/* icons */
.i{width:1.1em;height:1.1em;vertical-align:-.18em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
/* platform badge: neutral label (name + monogram swatch); official artwork only once approved */
.pfb{display:inline-flex;align-items:center;gap:6px;font-weight:600}
.pfb .sw{display:inline-grid;place-items:center;min-width:1.7em;height:1.7em;padding:0 3px;border-radius:5px;font:700 11px/1 var(--font);outline:1px solid var(--hair)}
.pfb img{width:1.7em;height:1.7em}
.chan{border-left:4px solid var(--pf,var(--hair))}
/* sparkline */
.spark{display:block;width:100%;max-width:180px;height:36px;color:var(--primary)}
.spark .area{fill:currentColor;opacity:.12}.spark .ln{fill:none;stroke:currentColor;stroke-width:2}
/* empty states */
.empty{text-align:center;padding:24px 12px;color:var(--muted)}.empty svg{width:140px;height:100px;display:block;margin:0 auto 8px}
.empty h3{color:var(--text);margin:4px 0}.empty .a1{fill:var(--cp-surface-2)}.empty .a2{stroke:var(--primary);fill:none;stroke-width:3}.empty .a3{fill:var(--primary)}
/* top-right tools: Help + theme toggle */
.cptools{position:fixed;top:8px;right:10px;z-index:20;display:flex;gap:6px}
.cptools .btn{display:inline-flex;align-items:center;gap:6px;min-height:36px;box-shadow:0 1px 2px rgba(0,0,0,.08)}
@media (max-width:760px){.cptools{top:auto;bottom:76px;right:8px}}
/* dashboard */
.post{display:flex;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--hair)}.post:first-of-type{border-top:0}
.post img{width:54px;height:96px;object-fit:cover;border-radius:6px;background:var(--hair);flex:none}
.post .t{font-weight:600}.post .m{color:var(--muted);font-size:13px}
.chgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
/* composer */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--hair);margin:8px 0 12px;overflow-x:auto}
.tabs button{border:0;background:none;color:var(--muted);padding:8px 12px;font:inherit;border-bottom:3px solid transparent;cursor:pointer;min-height:40px;white-space:nowrap}
.tabs button[aria-selected=true]{color:var(--text);border-bottom-color:var(--primary);font-weight:600}
.drop{border:2px dashed var(--border);border-radius:10px;padding:18px;text-align:center;color:var(--muted)}.drop.over{border-color:var(--primary);background:var(--cp-surface-2)}
.pvrow{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px}
.pv{flex:0 0 200px;border:1px solid var(--hair);border-radius:12px;padding:8px;background:var(--surface)}
.pv .frame{aspect-ratio:9/16;border-radius:8px;background:#111;color:#fff;position:relative;overflow:hidden;display:flex;align-items:flex-end}
.pv.wide .frame{aspect-ratio:16/9}.pv .frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pv .cap{position:relative;padding:8px;font-size:12px;line-height:1.35;background:linear-gradient(transparent,rgba(0,0,0,.75));width:100%;white-space:pre-wrap;word-break:break-word;max-height:60%;overflow:hidden}
.pv .over{color:#FFB4AB}
details.issues{border:1px solid var(--hair);border-radius:var(--r);padding:8px 12px;background:var(--surface)}details.issues>summary{cursor:pointer;font-weight:600;min-height:32px;display:flex;align-items:center;gap:8px}
/* billing */
.bstate{border-radius:var(--r);padding:12px 14px;margin:8px 0}.bstate.warn{background:var(--warn-bg);color:var(--warn-fg)}.bstate.bad{background:var(--danger-bg);color:var(--danger-fg)}.bstate.ok{background:var(--ok-bg);color:var(--ok-fg)}
#per .preview{display:none}
@media (max-width:760px){.cptools .btn span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.cptools .btn{min-width:44px;min-height:44px;justify-content:center;border-radius:22px}}
.pv{margin:0}
.ptrow{padding:6px 0;border-top:1px solid var(--hair)}.ptrow:first-of-type{border-top:0}