/* ============================================================
   CLYQQ DESIGN SYSTEM v2
   "Broadcast Signal" — dark-first live commerce
   Source of truth for the Flutter build. Every value here maps
   to a ThemeData / token in the app.
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  /* Brand (locked — CLYQQ Brand Kit v1.0) */
  --brand-red:      #FF1A1A;
  --brand-pink:     #FF0066;
  --brand-magenta:  #B8007A;

  /* Signature gradients */
  --grad-live:  linear-gradient(90deg,  #FF1A1A 0%, #FF0066 100%);
  --grad-deep:  linear-gradient(135deg, #FF1A1A 0%, #FF0066 55%, #B8007A 100%);
  --grad-edge:  linear-gradient(180deg, rgba(255,0,102,.16), rgba(255,0,102,0));

  /* Surfaces — 5 steps, never invent a 6th */
  --bg:         #050506;
  --surface-1:  #0D0D10;
  --surface-2:  #15151A;
  --surface-3:  #1E1E25;
  --surface-4:  #282831;

  /* Lines */
  --line:       #2A2A33;
  --line-soft:  rgba(255,255,255,.07);
  --line-hot:   rgba(255,0,102,.35);

  /* Text */
  --text:       #FFFFFF;
  --text-2:     #A2A2AE;
  --text-3:     #6B6B78;
  --text-on-grad:#FFFFFF;

  /* Semantic — statusSuccess closes scope item P2-19 */
  --status-success: #00E08A;
  --status-warning: #FFB020;
  --status-danger:  #FF4438;   /* deliberately distinct from brand-red */
  --status-info:    #3B9EFF;
  --status-live:    var(--brand-red);
  --status-success-bg: rgba(0,224,138,.12);
  --status-warning-bg: rgba(255,176,32,.12);
  --status-danger-bg:  rgba(255,68,56,.12);
  --status-info-bg:    rgba(59,158,255,.12);

  /* Glow — the "signal" */
  --glow-sm: 0 0 16px rgba(255,0,102,.30);
  --glow-md: 0 8px 28px rgba(255,0,90,.38);
  --glow-lg: 0 0 60px rgba(255,0,102,.28);

  /* Elevation */
  --sh-1: 0 1px 2px rgba(0,0,0,.4);
  --sh-2: 0 4px 16px rgba(0,0,0,.5);
  --sh-3: 0 12px 40px rgba(0,0,0,.6);
  --sh-sheet: 0 -8px 40px rgba(0,0,0,.7);

  /* Radius */
  --r-xs: 6px;  --r-sm: 10px; --r-md: 14px;
  --r-lg: 20px; --r-xl: 28px; --r-full: 999px;

  /* Space — 4pt base */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px;
  --s6:24px; --s7:32px; --s8:40px; --s9:56px;

  /* Type */
  --font-ui:  'Poppins', system-ui, -apple-system, sans-serif;
  --font-num: 'Azeret Mono', ui-monospace, SFMono-Regular, monospace;

  --t-display: 700 30px/1.12 var(--font-ui);
  --t-h1:      700 24px/1.2  var(--font-ui);
  --t-h2:      600 19px/1.25 var(--font-ui);
  --t-h3:      600 16px/1.3  var(--font-ui);
  --t-body:    400 15px/1.5  var(--font-ui);
  --t-body-sm: 400 13px/1.45 var(--font-ui);
  --t-label:   600 13px/1.2  var(--font-ui);
  --t-caption: 500 11px/1.3  var(--font-ui);

  /* Motion */
  --ease:      cubic-bezier(.2,.8,.2,1);
  --ease-in:   cubic-bezier(.4,0,1,1);
  --dur-fast:  120ms;
  --dur:       220ms;
  --dur-slow:  380ms;

  /* Layout */
  --tapmin: 44px;          /* minimum touch target */
  --gutter: 18px;
  --safe-top: 54px;
  --safe-bottom: 34px;
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{font:var(--t-body);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:none;cursor:pointer}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--brand-pink);outline-offset:2px;border-radius:4px}
::-webkit-scrollbar{width:0;height:0}

/* ---------- 3. ATMOSPHERE ---------- */
/* Grain + signal bloom. Every dark surface sits on this, never flat black. */
.atmos{position:relative;isolation:isolate}
.atmos::before{
  content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(720px 420px at 50% -8%,  rgba(255,0,102,.16), transparent 62%),
    radial-gradient(560px 380px at 50% 108%, rgba(255,26,26,.10), transparent 62%);
}
.grain::after{
  content:"";position:absolute;inset:0;z-index:9999;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 4. TYPE UTILITIES ---------- */
.t-display{font:var(--t-display);letter-spacing:-.02em}
.t-h1{font:var(--t-h1);letter-spacing:-.015em}
.t-h2{font:var(--t-h2);letter-spacing:-.01em}
.t-h3{font:var(--t-h3)}
.t-body{font:var(--t-body)}
.t-sm{font:var(--t-body-sm)}
.t-label{font:var(--t-label)}
.t-cap{font:var(--t-caption);letter-spacing:.02em}
.dim{color:var(--text-2)}
.dim-2{color:var(--text-3)}
.center{text-align:center}
.grad-text{background:var(--grad-live);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.upper{text-transform:uppercase;letter-spacing:.08em}

/* NUMERALS — every price, count, timer, and total uses this. */
.num{font-family:var(--font-num);font-variant-numeric:tabular-nums;letter-spacing:-.03em}

/* ---------- 5. MONEY ----------
   P0-3: currency is a parameter, never a hardcoded glyph.
   Markup: <span class="money"><i>$</i>49<em>.00</em></span>
*/
.money{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-weight:600;letter-spacing:-.03em;white-space:nowrap}
.money > i{font-style:normal;opacity:.72;margin-right:1px}
.money > em{font-style:normal;font-size:.72em;opacity:.72}
.money.was{color:var(--text-3);text-decoration:line-through;text-decoration-thickness:1.5px;font-weight:500}
.money.big{font-size:26px;font-weight:700}

/* ---------- 6. LAYOUT PRIMITIVES ---------- */
.row{display:flex;align-items:center}
.col{display:flex;flex-direction:column}
.between{justify-content:space-between}
.grow{flex:1;min-width:0}
.wrap{flex-wrap:wrap}
.g1{gap:var(--s1)}.g2{gap:var(--s2)}.g3{gap:var(--s3)}
.g4{gap:var(--s4)}.g5{gap:var(--s5)}.g6{gap:var(--s6)}
.pad{padding-left:var(--gutter);padding-right:var(--gutter)}
.stack > * + *{margin-top:var(--s3)}
.divider{height:1px;background:var(--line-soft);border:0}

/* ---------- 7. BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:var(--tapmin);padding:0 var(--s5);border-radius:var(--r-md);
  font:var(--t-label);font-size:15px;
  transition:transform var(--dur-fast) var(--ease),filter var(--dur) var(--ease),background var(--dur) var(--ease);
}
.btn:active{transform:scale(.975)}
.btn:disabled{opacity:.4;pointer-events:none}
.btn.block{width:100%}
.btn.lg{min-height:54px;font-size:16px;border-radius:var(--r-md)}
.btn.sm{min-height:36px;padding:0 var(--s4);font-size:13px;border-radius:var(--r-sm)}

.btn-primary{background:var(--grad-live);color:var(--text-on-grad);box-shadow:var(--glow-md)}
.btn-primary:hover{filter:brightness(1.08)}
.btn-secondary{background:var(--surface-3);color:var(--text);border:1px solid var(--line)}
.btn-secondary:hover{background:var(--surface-4)}
.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--text-3)}
.btn-quiet{background:transparent;color:var(--text-2)}
.btn-quiet:hover{color:var(--text)}
.btn-danger{background:var(--status-danger-bg);color:var(--status-danger);border:1px solid rgba(255,68,56,.3)}

/* Icon button */
.iconbtn{
  width:var(--tapmin);height:var(--tapmin);border-radius:var(--r-full);
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--surface-2);border:1px solid var(--line);color:var(--text);
  transition:background var(--dur) var(--ease);
}
.iconbtn:hover{background:var(--surface-3)}
.iconbtn.glass{background:rgba(0,0,0,.45);backdrop-filter:blur(10px);border-color:rgba(255,255,255,.12)}
.iconbtn.sm{width:34px;height:34px}

/* ---------- 8. FIELDS ---------- */
.field{display:block}
.field > label{display:block;font:var(--t-label);color:var(--text-2);margin-bottom:var(--s2)}
.input{
  width:100%;min-height:52px;padding:0 var(--s4);
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);
  color:var(--text);font:var(--t-body);
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.input::placeholder{color:var(--text-3)}
.input:focus{outline:none;border-color:var(--brand-pink);background:var(--surface-3);box-shadow:0 0 0 3px rgba(255,0,102,.12)}
.input.err{border-color:var(--status-danger)}
textarea.input{padding-top:var(--s3);min-height:96px;resize:vertical;line-height:1.5}
.field-hint{font:var(--t-caption);color:var(--text-3);margin-top:var(--s2)}
.field-err{font:var(--t-caption);color:var(--status-danger);margin-top:var(--s2);display:flex;gap:6px;align-items:center}

/* Input with leading adornment (currency selector, search icon) */
.input-group{display:flex;align-items:stretch;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.input-group:focus-within{border-color:var(--brand-pink);box-shadow:0 0 0 3px rgba(255,0,102,.12)}
.input-group .input{background:none;border:0;box-shadow:none!important;border-radius:0}
.input-group .adorn{display:flex;align-items:center;padding:0 var(--s3);color:var(--text-2);background:var(--surface-3);font:var(--t-label);border-right:1px solid var(--line)}
.input-group .adorn.trail{border-right:0;border-left:1px solid var(--line)}

/* ---------- 9. BADGES / CHIPS / PILLS ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:var(--r-xs);font:var(--t-caption);font-weight:700}
.badge-live{background:var(--brand-red);color:#fff;letter-spacing:.06em}
.badge-live .pulse{width:6px;height:6px;border-radius:50%;background:#fff;animation:pulse 1.1s infinite}
.badge-success{background:var(--status-success-bg);color:var(--status-success)}
.badge-warning{background:var(--status-warning-bg);color:var(--status-warning)}
.badge-danger{background:var(--status-danger-bg);color:var(--status-danger)}
.badge-info{background:var(--status-info-bg);color:var(--status-info)}
.badge-neutral{background:var(--surface-3);color:var(--text-2)}
.badge-glass{background:rgba(0,0,0,.55);backdrop-filter:blur(6px);color:#fff}
.badge-grad{background:var(--grad-live);color:#fff}
@keyframes pulse{50%{opacity:.25}}

.chip{padding:9px 15px;border-radius:var(--r-full);background:var(--surface-2);border:1px solid var(--line);font:var(--t-body-sm);font-weight:500;color:var(--text-2);white-space:nowrap;transition:all var(--dur) var(--ease)}
.chip:hover{color:var(--text);border-color:var(--text-3)}
.chip.on{background:var(--grad-live);color:#fff;border-color:transparent;font-weight:600}
.chiprow{display:flex;gap:var(--s2);overflow-x:auto;padding:var(--s1) var(--gutter) var(--s3)}

/* ---------- 10. AVATAR ---------- */
.avatar{width:40px;height:40px;border-radius:50%;background:var(--grad-deep);display:inline-flex;align-items:center;justify-content:center;font:var(--t-label);flex:none;overflow:hidden;background-size:cover;background-position:center}
.avatar.xs{width:24px;height:24px;font-size:10px}
.avatar.sm{width:32px;height:32px;font-size:12px}
.avatar.lg{width:64px;height:64px;font-size:22px}
.avatar.xl{width:88px;height:88px;font-size:30px}
.avatar.ring{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--brand-pink)}

/* ---------- 11. CARDS / SURFACES ---------- */
.card{background:var(--surface-2);border:1px solid var(--line-soft);border-radius:var(--r-lg);padding:var(--s4)}
.card.flush{padding:0;overflow:hidden}
.card.hot{border-color:var(--line-hot);box-shadow:var(--glow-sm)}
.panel{background:var(--surface-1);border:1px solid var(--line-soft);border-radius:var(--r-lg)}

/* List rows */
.listrow{display:flex;align-items:center;gap:var(--s3);min-height:var(--tapmin);padding:var(--s3) var(--gutter);transition:background var(--dur) var(--ease)}
.listrow:hover{background:var(--surface-2)}
.listrow + .listrow{border-top:1px solid var(--line-soft)}
.listrow .chev{color:var(--text-3);flex:none}

/* ---------- 12. APP CHROME ---------- */
.appbar{display:flex;align-items:center;gap:var(--s3);padding:var(--safe-top) var(--gutter) var(--s3);flex:none}
.appbar .title{font:var(--t-h2)}
.appbar.floating{position:absolute;top:0;left:0;right:0;z-index:20;padding-top:var(--safe-top)}

.tabbar{
  position:absolute;left:0;right:0;bottom:0;z-index:40;
  height:calc(64px + var(--safe-bottom));padding-bottom:var(--safe-bottom);
  display:flex;align-items:center;justify-content:space-around;
  background:rgba(10,10,13,.88);backdrop-filter:blur(20px);border-top:1px solid var(--line-soft);
}
.tab{display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--text-3);font:var(--t-caption);min-width:56px;transition:color var(--dur) var(--ease)}
.tab .ic{font-size:21px;line-height:1}
.tab.on{color:var(--text)}
.tab.on .ic{filter:drop-shadow(0 0 10px rgba(255,0,102,.8))}
.tab.golive{background:var(--grad-live);width:52px;height:52px;border-radius:var(--r-md);margin-top:-18px;justify-content:center;color:#fff;box-shadow:var(--glow-md)}
.tab.golive .ic{filter:none}

/* ---------- 13. SHEETS + MODALS ----------
   Rule: on a live screen, ALWAYS a bottom sheet. Never a centred modal.
   The stream stays visible and audible behind it.
*/
.scrim{position:absolute;inset:0;z-index:50;background:rgba(0,0,0,.6);backdrop-filter:blur(3px);animation:fade var(--dur) var(--ease)}
.sheet{
  position:absolute;left:0;right:0;bottom:0;z-index:51;
  background:var(--surface-1);border-top:1px solid var(--line);
  border-radius:var(--r-xl) var(--r-xl) 0 0;box-shadow:var(--sh-sheet);
  padding:var(--s3) var(--gutter) calc(var(--s5) + var(--safe-bottom));
  max-height:88%;overflow-y:auto;
  animation:sheetup var(--dur-slow) var(--ease);
}
.sheet::before{content:"";display:block;width:40px;height:4px;border-radius:var(--r-full);background:var(--surface-4);margin:0 auto var(--s4)}
.sheet.tall{height:88%}
@keyframes sheetup{from{transform:translateY(100%)}}
@keyframes fade{from{opacity:0}}

/* ---------- 14. LIVE PRIMITIVES ---------- */
.video{position:absolute;inset:0;background-size:cover;background-position:center;background-color:#000}
.video::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.6) 0%,transparent 20%,transparent 48%,rgba(0,0,0,.88) 100%)}

.viewercount{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:var(--r-full);background:rgba(0,0,0,.5);backdrop-filter:blur(8px);font:var(--t-caption);font-weight:600}
.viewercount .dot{width:6px;height:6px;border-radius:50%;background:var(--brand-red);animation:pulse 1.1s infinite}

/* Pinned product — the conversion surface. Always above the comment bar. */
.pinned{
  display:flex;align-items:center;gap:var(--s3);
  background:rgba(13,13,16,.82);backdrop-filter:blur(18px);
  border:1px solid var(--line-hot);border-radius:var(--r-md);
  padding:var(--s2);box-shadow:var(--glow-sm);
  animation:pinin var(--dur-slow) var(--ease);
}
@keyframes pinin{from{opacity:0;transform:translateY(14px) scale(.96)}}
.pinned .thumb{width:52px;height:52px;border-radius:var(--r-sm);background:var(--surface-3);background-size:cover;flex:none}

/* Scarcity meter — instrumentation, not a marketing bar */
.meter{height:4px;border-radius:var(--r-full);background:var(--surface-4);overflow:hidden}
.meter > span{display:block;height:100%;background:var(--grad-live);border-radius:inherit;transition:width var(--dur-slow) var(--ease)}

/* Chat */
.chatfeed{display:flex;flex-direction:column;justify-content:flex-end;gap:var(--s2);overflow:hidden;mask-image:linear-gradient(180deg,transparent,#000 24%)}
.chatmsg{font:var(--t-body-sm);animation:msgin var(--dur-slow) var(--ease);text-shadow:0 1px 3px rgba(0,0,0,.8)}
.chatmsg b{font-weight:600;color:#FFC2D8}
.chatmsg.host b{color:var(--brand-pink)}
.chatmsg.system{align-self:flex-start;background:var(--grad-live);padding:5px 11px;border-radius:var(--r-sm);font-weight:700;font-size:12px;text-shadow:none}
@keyframes msgin{from{opacity:0;transform:translateY(10px)}}

/* ---------- 15. STATES ---------- */
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:var(--s9) var(--s6);gap:var(--s3);flex:1}
.empty .glyph{width:72px;height:72px;border-radius:var(--r-lg);background:var(--surface-2);border:1px solid var(--line);display:grid;place-items:center;font-size:30px;margin-bottom:var(--s2)}

.skel{background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface-3) 50%,var(--surface-2) 75%);background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:var(--r-sm)}
@keyframes shimmer{to{background-position:-200% 0}}

.banner{display:flex;gap:var(--s3);padding:var(--s3) var(--s4);border-radius:var(--r-md);font:var(--t-body-sm);align-items:flex-start}
.banner .ic{flex:none;font-size:16px;line-height:1.3}
.banner-warning{background:var(--status-warning-bg);color:#FFD489;border:1px solid rgba(255,176,32,.25)}
.banner-danger{background:var(--status-danger-bg);color:#FFA69F;border:1px solid rgba(255,68,56,.25)}
.banner-success{background:var(--status-success-bg);color:#7CFFCB;border:1px solid rgba(0,224,138,.25)}
.banner-info{background:var(--status-info-bg);color:#A8D4FF;border:1px solid rgba(59,158,255,.25)}

/* Toast */
.toast{position:absolute;left:var(--gutter);right:var(--gutter);z-index:60;display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);background:rgba(21,21,26,.94);backdrop-filter:blur(16px);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-3);font:var(--t-body-sm);animation:toastin var(--dur-slow) var(--ease)}
@keyframes toastin{from{opacity:0;transform:translateY(-12px)}}

/* ---------- 16. STEPPER (onboarding) ---------- */
.stepper{display:flex;gap:6px;padding:0 var(--gutter)}
.stepper i{flex:1;height:3px;border-radius:var(--r-full);background:var(--surface-4)}
.stepper i.done{background:var(--grad-live)}
.stepper i.now{background:var(--grad-live);box-shadow:var(--glow-sm)}

/* ---------- 17. SEGMENTED ---------- */
.segmented{display:flex;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);padding:3px;gap:3px}
.segmented button{flex:1;min-height:38px;border-radius:var(--r-sm);font:var(--t-label);color:var(--text-2);transition:all var(--dur) var(--ease)}
.segmented button.on{background:var(--surface-4);color:var(--text)}

/* ---------- 18. OPTION CARD (radio-as-card) ---------- */
.optcard{display:flex;gap:var(--s3);padding:var(--s4);background:var(--surface-2);border:1.5px solid var(--line);border-radius:var(--r-md);text-align:left;width:100%;transition:all var(--dur) var(--ease);align-items:flex-start}
.optcard:hover{border-color:var(--text-3)}
.optcard.on{border-color:var(--brand-pink);background:var(--surface-3);box-shadow:0 0 0 3px rgba(255,0,102,.10)}
.optcard .radio{width:20px;height:20px;border-radius:50%;border:2px solid var(--line);flex:none;margin-top:2px;display:grid;place-items:center;transition:all var(--dur) var(--ease)}
.optcard.on .radio{border-color:var(--brand-pink)}
.optcard.on .radio::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--grad-live)}
.optcard .rec{margin-left:auto}

/* ---------- 19. UTILITIES ---------- */
.hide{display:none!important}
.rel{position:relative}
.abs-fill{position:absolute;inset:0}
.scroll{overflow-y:auto;flex:1;-webkit-overflow-scrolling:touch}
.nowrap{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sticky-bottom{position:sticky;bottom:0;background:linear-gradient(180deg,transparent,var(--surface-1) 28%);padding-top:var(--s5)}

/* ---------- 20. SCREEN FRAGMENT SHELL ---------- */
.scr{position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden;background:var(--bg)}
.scr > .scroll{padding-bottom:var(--s6)}
.scr-pad{padding:0 var(--gutter)}
.scr-foot{flex:none;padding:var(--s4) var(--gutter) calc(var(--s4) + var(--safe-bottom));background:linear-gradient(180deg,transparent,var(--bg) 30%)}
.backbtn{width:38px;height:38px;border-radius:var(--r-full);background:var(--surface-2);border:1px solid var(--line);display:grid;place-items:center;flex:none;font-size:17px}

/* Desktop shell (creator web app) */
.web{display:flex;min-height:100%;background:var(--bg)}
.websdie,.webside{width:216px;flex:none;border-right:1px solid var(--line-soft);background:var(--surface-1);padding:var(--s5) var(--s3);display:flex;flex-direction:column;gap:2px}
.webside .logo{display:flex;align-items:center;gap:9px;padding:0 var(--s3) var(--s5);font-weight:800;letter-spacing:-.02em}
.webnav{display:flex;align-items:center;gap:10px;padding:10px var(--s3);border-radius:var(--r-sm);color:var(--text-2);font:var(--t-body-sm);width:100%;text-align:left;transition:all var(--dur) var(--ease)}
.webnav:hover{background:var(--surface-2);color:var(--text)}
.webnav.on{background:var(--surface-3);color:var(--text);font-weight:600}
.webmain{flex:1;min-width:0;padding:var(--s6) var(--s7)}
.webhead{display:flex;align-items:flex-start;gap:var(--s4);margin-bottom:var(--s6)}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3)}
.kpi{background:var(--surface-2);border:1px solid var(--line-soft);border-radius:var(--r-md);padding:var(--s4)}
.kpi .lab{font:var(--t-caption);color:var(--text-3);text-transform:uppercase;letter-spacing:.08em}
.kpi .val{font-family:var(--font-num);font-size:24px;font-weight:600;letter-spacing:-.03em;margin-top:6px}
.tbl{width:100%;border-collapse:collapse;font:var(--t-body-sm)}
.tbl th{text-align:left;font:var(--t-caption);text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);padding:0 var(--s3) var(--s3);font-weight:600}
.tbl td{padding:var(--s3);border-top:1px solid var(--line-soft)}
.tbl tr:hover td{background:var(--surface-2)}

/* ============================================================
   21. RESPONSIVE — the creator back office on a phone
   Driven by a container flag, not a viewport media query, so the
   same screen adapts inside a device frame. In Flutter this is a
   LayoutBuilder breakpoint at ~520dp.
   ============================================================ */
.phone-body[data-w="narrow"]{overflow-y:auto}

/* Sidebar becomes a scrolling chip nav pinned to the top */
[data-w="narrow"] .web{flex-direction:column}
[data-w="narrow"] .webside{
  width:auto;flex-direction:row;align-items:center;gap:6px;
  border-right:0;border-bottom:1px solid var(--line-soft);
  padding:calc(var(--safe-top) + 4px) var(--s3) 10px;
  overflow-x:auto;position:sticky;top:0;z-index:30;background:rgba(13,13,16,.95);backdrop-filter:blur(16px);
}
[data-w="narrow"] .webside .logo,
[data-w="narrow"] .webside .grow,
[data-w="narrow"] .webside > .card{display:none}
[data-w="narrow"] .webnav{
  width:auto;white-space:nowrap;flex:none;padding:8px 13px;border-radius:var(--r-full);
  background:var(--surface-2);border:1px solid var(--line);font-size:12.5px;
}
[data-w="narrow"] .webnav span{font-size:12px}
[data-w="narrow"] .webnav.on{background:var(--grad-live);color:#fff;border-color:transparent}

/* Main column */
[data-w="narrow"] .webmain{padding:var(--s4) var(--s4) var(--s9);max-width:none!important}
[data-w="narrow"] .webhead{flex-direction:column;align-items:stretch;gap:var(--s3);margin-bottom:var(--s4)}
[data-w="narrow"] .webhead .btn{width:100%}
[data-w="narrow"] .t-h1{font-size:22px}
[data-w="narrow"] .kpis{grid-template-columns:1fr 1fr;gap:var(--s2)}
[data-w="narrow"] .kpi{padding:var(--s3)}
[data-w="narrow"] .kpi .val{font-size:19px}
/* Any inline multi-column grid collapses to one */
[data-w="narrow"] .webmain [style*="grid-template-columns"]{grid-template-columns:1fr!important}

/* Tables become labelled cards. data-l is injected from the header row. */
[data-w="narrow"] .tbl,[data-w="narrow"] .tbl tbody{display:block}
[data-w="narrow"] .tbl tr:first-child{display:none}
[data-w="narrow"] .tbl tr{
  display:block;background:var(--surface-2);border:1px solid var(--line-soft);
  border-radius:var(--r-md);padding:var(--s3);margin-bottom:var(--s2);
}
[data-w="narrow"] .tbl tr:hover td{background:none}
[data-w="narrow"] .tbl td{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  padding:5px 0;border:0!important;text-align:left!important;
}
[data-w="narrow"] .tbl td::before{
  content:attr(data-l);color:var(--text-3);font:var(--t-caption);
  text-transform:uppercase;letter-spacing:.08em;flex:none;
}
[data-w="narrow"] .tbl td:not([data-l]){justify-content:flex-end}
[data-w="narrow"] .tbl td:empty{display:none}

/* Charts shrink rather than squash */
[data-w="narrow"] .card [style*="height:170px"]{height:120px!important}

/* A phone-first screen shown in a desktop browser: a centred column,
   which is exactly how a mobile-first web page renders on a laptop. */
[data-w="wide"] .scr{
  left:50%;right:auto;transform:translateX(-50%);width:100%;max-width:440px;
  border-left:1px solid var(--line-soft);border-right:1px solid var(--line-soft);
}

/* ============================================================
   22. BROWSER SURFACE — the real shopper experience
   No install. Mobile Safari/Chrome chrome eats ~92px top and
   ~56px bottom, so the app's own safe-area padding shrinks and
   any sticky buy bar must clear the browser toolbar.
   ============================================================ */
.bchrome-top{
  position:absolute;top:0;left:0;right:0;height:92px;z-index:150;
  display:flex;align-items:flex-end;gap:8px;padding:0 12px 10px;
  background:rgba(22,22,27,.96);backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.bchrome-top .urlpill{
  flex:1;min-width:0;display:flex;align-items:center;gap:7px;justify-content:center;
  background:#2C2C33;border-radius:var(--r-sm);height:36px;padding:0 12px;
  font-family:var(--font-num);font-size:12px;color:#D8D8E0;
}
.bchrome-top .urlpill .lock{font-size:10px;opacity:.6}
.bchrome-top .urlpill span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bchrome-top .bbtn{width:32px;height:32px;border-radius:var(--r-sm);display:grid;place-items:center;color:#B9B9C4;font-size:15px;flex:none}

.bchrome-bot{
  position:absolute;bottom:0;left:0;right:0;height:56px;z-index:150;
  display:flex;align-items:center;justify-content:space-around;padding-bottom:8px;
  background:rgba(22,22,27,.96);backdrop-filter:blur(18px);
  border-top:1px solid rgba(255,255,255,.08);color:#9B9BA6;font-size:17px;
}
.bchrome-bot i{font-style:normal}
.bchrome-bot .dis{opacity:.3}
.bchrome-bot::after{
  content:"";position:absolute;bottom:3px;left:50%;transform:translateX(-50%);
  width:132px;height:4px;border-radius:var(--r-full);background:rgba(255,255,255,.28);
}

/* The app's viewport shrinks to what the browser actually leaves it */
.phone-body[data-surface="browser"]{
  top:92px;bottom:56px;
  --safe-top:14px;     /* browser chrome already clears the notch */
  --safe-bottom:12px;  /* browser toolbar already clears the home bar */
}

/* ============================================================
   23. BROWSER SURFACE ≠ INSTALLED APP
   A page reached from a bio link must NOT render native app
   chrome. The browser already owns the bottom of the screen and
   provides Back. The tab bar is earned by installing, not by
   visiting. In the real build this is:
        @media (display-mode: standalone) { .tabbar { display:flex } }
   with the tab bar hidden by default.
   ============================================================ */
[data-surface="browser"] .tabbar{display:none}

/* Reclaim the space the tab bar was reserving (screens set this inline) */
[data-surface="browser"] .scr .scroll{padding-bottom:var(--s6)!important}

/* Content that only makes sense on the browser surface */
.browser-only{display:none}
[data-surface="browser"] .browser-only{display:flex}
/* ...and its opposite, for installed/native chrome */
[data-surface="browser"] .app-only{display:none}