/* easyscript prototype design tokens + components
   R2: legacy token names are now aliases onto the canonical --es-* tokens from
   assets/brand/brand-tokens.css (linked before this file in app.html/index.html,
   which is the single source of truth for the actual hex values). Kept as
   aliases rather than rewriting every var(--accent)-style call site across this
   file — the computed color is still 100% brand-tokens.css, just addressed
   through the old names so the ~150 existing references don't all need touching. */
:root{
  --bg: var(--es-ink);
  --elevated: var(--es-surface);
  --elevated-2: var(--es-surface-2);
  --border: var(--es-border);
  --border-strong: var(--es-border-2);
  --text: var(--es-text);
  --muted: var(--es-muted);
  --accent: var(--es-accent);
  --accent-hover: var(--es-accent-hi);
  --accent-active: var(--es-accent-lo);
  --success: var(--es-ok);      /* safety-positive / generic confirmation — NEVER money */
  /* R11 D5: mint = money EARNED, never money spent. Used for ROI, RM sales figures, and payouts
     — deliberately NOT for subscription/plan price figures (those stay neutral white/--text;
     see .plan-price below), which is money going OUT, not coming in. Kept as one rule so the
     comment here never drifts from what .plan-price / .money-figure actually do again. */
  --money: var(--es-mint);
  --amber: var(--es-warn);
  --danger: var(--es-danger);
  --danger-hover: var(--es-danger-hover);
  --radius-card:16px;
  --radius-control:10px;
  --font-display: "Space Grotesk", Arial, sans-serif;
  --font-body: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

*{box-sizing:border-box;}
html,body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.6;
  margin:0;
  -webkit-font-smoothing:antialiased;
}
.fo-body{min-height:100vh;}
a{color:inherit;}
button{font-family:inherit;}
.hidden{display:none !important;}

.text-muted{color:var(--muted);}
.text-xs{font-size:12px;}
.text-sm{font-size:14px;}
.mt-1{margin-top:4px;}
.mt-2{margin-top:8px;}
.mt-3{margin-top:12px;}
.mt-4{margin-top:16px;}
.mb-1{margin-bottom:4px;}
.mb-2{margin-bottom:8px;}
.mb-3{margin-bottom:12px;}
.text-amber{color:var(--amber);}

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:6px;
}

/* ---------- layout shell (app.html) ---------- */
.app-shell{
  display:flex;
  min-height:100vh;
}
.sidebar{
  width:232px;
  flex-shrink:0;
  background:var(--elevated);
  border-right:1px solid var(--border);
  display:flex;
  flex-direction:column;
  padding:20px 16px;
  position:sticky;
  top:0;
  height:100vh;
}
.sidebar-logo{display:flex;align-items:center;gap:8px;padding:4px 8px 20px;}
/* R1: the emoji logo-mark + logo-text pair is retired in favor of the .es-wordmark
   component (brand-tokens.css) — brand-wordmark-nav just sets the size for nav contexts. */
.brand-wordmark-nav{font-size:18px;}
.sidebar-nav{display:flex;flex-direction:column;gap:4px;flex:1;}
.nav-item{
  display:flex;align-items:center;gap:10px;
  padding:11px 12px;border-radius:var(--radius-control);
  background:transparent;border:none;color:var(--muted);
  font-size:14px;font-weight:500;cursor:pointer;text-align:left;
  min-height:44px;
  transition:background .15s ease, color .15s ease;
}
.nav-item:hover{background:var(--elevated-2);color:var(--text);}
.nav-item-active{background:rgba(124,134,245,0.14);color:var(--text);}
.nav-item-active .nav-icon{color:var(--accent);}
.nav-icon{width:18px;height:18px;flex-shrink:0;}
.sidebar-footer{display:flex;flex-direction:column;gap:8px;padding-top:12px;border-top:1px solid var(--border);}

.app-main{flex:1;min-width:0;display:flex;flex-direction:column;}
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 24px;border-bottom:1px solid var(--border);
  position:sticky;top:0;background:rgba(10,10,12,0.85);backdrop-filter:blur(8px);
  z-index:20;
}
.topbar-brand-mobile{display:none;align-items:center;gap:8px;}
.topbar-quota{display:flex;align-items:center;gap:10px;margin-left:auto;}
.topbar-plan-badge{
  background:rgba(124,134,245,0.16);color:var(--accent-hover);
  padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600;
}
.topbar-quota-text{font-size:13px;color:var(--muted);}
.topbar-lang{display:flex;align-items:center;gap:4px;}
.topbar-lang-btn{
  font-size:12px;line-height:1;font-weight:600;padding:5px 10px;border-radius:999px;
  border:1px solid rgba(255,255,255,0.14);background:transparent;color:var(--muted);
  cursor:pointer;transition:color .15s,border-color .15s,background .15s;
}
.topbar-lang-btn:hover{color:var(--text,#fff);border-color:rgba(255,255,255,0.3);}
.topbar-lang-btn.is-active{background:#7C86F5;border-color:#7C86F5;color:#fff;}

.main-content{padding:24px;max-width:920px;width:100%;margin:0 auto;flex:1;}
.app-footer{
  display:flex;justify-content:space-between;align-items:center;
  padding:16px 24px;border-top:1px solid var(--border);
  font-size:12px;color:var(--muted);gap:12px;flex-wrap:wrap;
}
.app-footer-legal{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}

.tabbar{
  display:none;
  position:fixed;bottom:0;left:0;right:0;
  background:rgba(18,18,22,0.96);backdrop-filter:blur(10px);
  border-top:1px solid var(--border);
  padding:6px 8px calc(6px + env(safe-area-inset-bottom));
  z-index:30;
}
.tab-item{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
  background:transparent;border:none;color:var(--muted);
  padding:8px 4px;border-radius:10px;font-size:11px;font-weight:500;
  min-height:44px;cursor:pointer;
}
.tab-item span, .nav-item span{white-space:nowrap;} /* R11 C4: CJK tab/nav labels never split mid-word, same rule as .btn */
.tab-item-active{color:var(--accent-hover);}
.tab-item-active .nav-icon{color:var(--accent-hover);}

@media (max-width: 768px){
  .sidebar{display:none;}
  .tabbar{display:flex;}
  .app-main{padding-bottom:calc(72px + env(safe-area-inset-bottom));}
  .topbar-brand-mobile{display:flex;}
  .main-content{padding:16px;}
}

/* ---------- generic components ---------- */
.card{
  background:var(--elevated);
  border:1px solid var(--border);
  border-radius:var(--radius-card);
  padding:20px;
}
.btn{
  border-radius:var(--radius-control);
  padding:10px 16px;
  font-weight:600;font-size:14px;
  border:1px solid transparent;
  cursor:pointer;
  min-height:44px;
  transition:background .15s ease, transform .05s ease, border-color .15s ease;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  /* R11 C4: CJK labels (下一步/设置/…) must never break mid-character across two lines —
     nowrap keeps the button growing instead of wrapping; buttons already flex/wrap at the
     row level so this doesn't force any layout overflow. */
  white-space:nowrap;
}
.btn:active{transform:scale(0.98);}
.btn:disabled{opacity:0.45;cursor:not-allowed;transform:none;}
.btn-primary{
  background:var(--accent);color:#070912; /* R2: text reads dark against the periwinkle fill for contrast */
}
.btn-primary:not(:disabled):hover{background:var(--accent-hover);} /* R4: borders over shadows — no glow */
.btn-primary:not(:disabled):active{background:var(--accent-active);}
.btn-secondary{
  background:var(--elevated-2);color:var(--text);border-color:var(--border-strong);
}
.btn-secondary:hover{background:#1d1d24;}
.btn-ghost{
  background:transparent;color:var(--text);border-color:var(--border);
}
.btn-ghost:hover{background:var(--elevated-2);}
.btn-sm{padding:7px 12px;font-size:13px;min-height:36px;}

.link-btn{
  background:none;border:none;color:var(--accent-hover);
  font-size:13px;font-weight:600;cursor:pointer;padding:6px 0;text-align:left;
  min-height:32px;
}
.link-btn:hover{text-decoration:underline;}
.link-btn-muted{color:var(--muted);}

.badge{
  display:inline-flex;align-items:center;padding:3px 9px;border-radius:999px;
  font-size:12px;font-weight:600;line-height:1.4; /* R8 T5: 12px floor for status/staleness badges */
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;max-width:100%;
}
.badge-safe{background:rgba(34,197,94,0.14);color:var(--success);}
.badge-flag{background:rgba(245,158,11,0.14);color:var(--amber);cursor:pointer;border:none;font-family:inherit;}
.badge-flag:hover{background:rgba(245,158,11,0.22);}
.badge-neutral{background:rgba(255,255,255,0.06);color:var(--muted);}
.badge-demo{background:rgba(255,255,255,0.05);color:var(--muted);font-weight:500;}
/* R11 D4: "Recommended" badge — one color everywhere (periwinkle/accent), never the green
   badge-safe treatment, which is reserved for safety-scan "clear" states. */
.badge-accent{background:rgba(124,134,245,0.16);color:var(--accent-hover);}
/* wrap onto a new line instead of hard-clipping mid-word when badges don't fit */
.badge-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}

.progress-track{
  height:8px;background:var(--elevated-2);border-radius:999px;overflow:hidden;
  border:1px solid var(--border);
}
.progress-fill{
  height:100%;background:var(--accent);border-radius:999px;
  transition:width .3s ease;
}
.processing-track{margin:14px 0;}

.text-input, .select-input, .textarea-input{
  width:100%;background:var(--elevated-2);border:1px solid var(--border-strong);
  color:var(--text);border-radius:var(--radius-control);
  padding:10px 12px;font-size:14px;font-family:inherit;
  min-height:44px;
}
.textarea-input{min-height:60px;resize:vertical;line-height:1.5;}
/* R3: the caption/hashtag post-pack textareas hold generated script text — mono face. */
.textarea-mono{font-family:var(--font-mono);}
.textarea-tall{min-height:180px;}
.text-input:focus, .select-input:focus, .textarea-input:focus{
  outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent);
}
.field-label{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:6px;margin-top:12px;}
.field-label:first-child{margin-top:0;}
.save-indicator{font-size:11px;color:var(--muted);margin-top:6px;transition:color .2s ease;}
.save-indicator-flash{color:var(--accent);} /* R2: generic non-monetary confirmation — never mint, never even safety-green */
/* R2: the ONLY color allowed to represent money — ROI figure, sales-log amounts, RM totals, pricing savings. */
.money-figure{color:var(--money);}

/* ---------- view header ---------- */
.view-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:20px;flex-wrap:wrap;}
.view-title{font-family:var(--font-display);font-size:24px;font-weight:700;margin:0 0 4px;letter-spacing:-0.02em;}
.view-sub{font-size:14px;color:var(--muted);margin:0;}
.section-heading{font-family:var(--font-display);font-size:18px;font-weight:600;letter-spacing:-0.02em;margin:0 0 12px;}
.section-heading-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px;flex-wrap:wrap;}
.streak-strip{background:var(--elevated-2);border:1px solid var(--border);border-radius:999px;padding:6px 14px;font-size:13px;font-weight:600;white-space:nowrap;}

/* ---------- quota / today ---------- */
.quota-card{margin-bottom:20px;}
.quota-row{display:flex;justify-content:space-between;font-size:14px;font-weight:600;margin-bottom:10px;}
.quota-empty-note{margin-top:12px;font-size:13px;color:var(--muted);}

.note-positive{
  background:rgba(34,197,94,0.10);color:var(--success);
  border:1px solid rgba(34,197,94,0.24);
  border-radius:var(--radius-control);padding:10px 14px;font-size:13px;font-weight:600;
  margin-bottom:14px;
}

/* Redesign: the batch is a single-column scannable LIST at every width (was a 2/3-col grid of
   cramped towers on mobile). One column gives the HOOK — the line the user judges each video by
   — the horizontal room it needs to read in full instead of clamping mid-sentence in a ~150px
   column. Small thumbnail left, hook + meta right (YouTube-Studio / TikTok list pattern). */
.batch-grid{
  display:flex;flex-direction:column;gap:12px;margin-bottom:24px;
}

/* D1: ≥900px — batch cards switch from 5-across vertical towers (thumb+hook+badges+buttons
   all crammed into a ~200px column) to YouTube-Studio-style horizontal rows: small thumb
   left, hook (1 line, ellipsis) + meta/badges (1 line) in the middle, actions right, vertically
   centered. Below 900px nothing here applies — mobile keeps the existing tower cards exactly
   as-is (.video-card-info/.video-card-side are `display:contents` there, see above). */
@media (min-width: 900px){
  .batch-grid{
    display:flex;flex-direction:column;gap:10px;grid-template-columns:none;
  }
  .batch-grid .video-card{
    flex-direction:row;align-items:stretch;gap:16px;padding:12px 16px;
  }
  .batch-grid .video-card-pending{align-items:center;}
  .batch-grid .video-thumb{
    flex:0 0 76px;width:76px;aspect-ratio:9/16;border-radius:8px;
  }
  .batch-grid .thumb-caption{display:none;} /* redundant with the hook text shown in the row info column, and unreadable at 76px */
  .batch-grid .video-thumb-play{width:26px;height:26px;}
  .batch-grid .play-icon{width:12px;height:12px;}
  .batch-grid .video-card-body{
    flex:1;min-width:0;display:flex;flex-direction:row;align-items:center;gap:20px;padding:0;
  }
  .batch-grid .video-card-pending .video-card-body{flex-direction:column;align-items:flex-start;justify-content:center;gap:6px;}
  .batch-grid .video-card-info{
    display:flex;flex-direction:column;justify-content:center;gap:4px;flex:1;min-width:0;
  }
  .batch-grid .video-meta-row{flex-wrap:nowrap;}
  /* Redesign: desktop row hook shows 2 lines (was a single nowrap line that ellipsis-clipped
     the hook to a useless fragment — the founder-reported bug). Still the hero of the row. */
  .batch-grid .video-hook{
    -webkit-line-clamp:2;margin:0;
  }
  .batch-grid .video-product{
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0;
  }
  .batch-grid .posted-check-wrap{white-space:nowrap;}
  .batch-grid .video-card-side{
    display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:4px;flex-shrink:0;
  }
  .batch-grid .video-actions-v2{flex-direction:row;gap:8px;margin-top:0;}
  .batch-grid .video-actions-v2 .btn{width:auto;min-height:36px;padding:0 14px;white-space:nowrap;}
  .batch-grid .video-actions-row2{gap:8px;}
  .batch-grid .remake-counter,
  .batch-grid .remake-cap-note{text-align:right;white-space:nowrap;}
}

/* Redesign: horizontal list row — thumbnail left, content column right (hook, meta, actions
   stacked). ≥900px refines this further (actions move to the right). */
.video-card{padding:12px;overflow:hidden;display:flex;flex-direction:row;gap:12px;align-items:flex-start;}
.video-thumb{
  flex:0 0 104px;width:104px;aspect-ratio:9/16;border-radius:10px;align-self:flex-start;
  position:relative;display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.video-thumb-play{width:34px;height:34px;}
.video-thumb-play .play-icon{width:15px;height:15px;}
.thumb-vignette{
  position:absolute;inset:0;
  background:radial-gradient(circle at 50% 28%, transparent 28%, rgba(0,0,0,0.5) 100%);
  pointer-events:none;
}
/* P10: batch-card thumbnails are the REAL rendered frames from the EasyScript engine
   (assets/sample-frames/f1-5.jpg, captions/hooks already burned in) — rotated across cards.
   The old CSS-gradient + fake silhouette placeholder is gone now that real frames exist. */
.thumb-frame-1{background-image:url('assets/sample-frames/f1.jpg');background-size:cover;background-position:center;}
.thumb-frame-2{background-image:url('assets/sample-frames/f2.jpg');background-size:cover;background-position:center;}
.thumb-frame-3{background-image:url('assets/sample-frames/f3.jpg');background-size:cover;background-position:center;}
.thumb-frame-4{background-image:url('assets/sample-frames/f4.jpg');background-size:cover;background-position:center;}
.thumb-frame-5{background-image:url('assets/sample-frames/f5.jpg');background-size:cover;background-position:center;}
.thumb-caption{
  position:absolute;left:0;right:0;bottom:0;
  padding:16px 10px 10px;
  background:linear-gradient(to top, rgba(0,0,0,0.82), rgba(0,0,0,0));
  pointer-events:none;
}
.thumb-caption span{
  color:#fff;font-size:11px;font-weight:700;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  text-shadow:0 1px 2px rgba(0,0,0,0.6);
}
.video-thumb-play{
  width:44px;height:44px;border-radius:50%;background:rgba(0,0,0,0.35);
  display:flex;align-items:center;justify-content:center;color:#fff;
  backdrop-filter:blur(2px);position:relative;z-index:1;
}
.play-icon{width:20px;height:20px;margin-left:2px;}
.video-duration{
  position:absolute;top:8px;right:8px;bottom:auto;background:rgba(0,0,0,0.55);
  color:#fff;font-size:11px;font-weight:600;padding:2px 7px;border-radius:6px;z-index:1;
}
.video-card-body{padding:0;flex:1;min-width:0;display:flex;flex-direction:column;gap:8px;}
.video-meta-row{display:flex;align-items:center;justify-content:space-between;gap:6px;flex-wrap:wrap;}
.angle-badge{
  background:rgba(124,134,245,0.14);color:var(--accent-hover);
  padding:3px 9px;border-radius:999px;font-size:12px;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
  flex-shrink:0; /* never let a sibling squeeze this into a mid-word clip */
  max-width:60%;
}
/* the safety/disputed badge is a sibling that CAN shrink and must ellipsis rather than
   push past the card edge (P1 — "Disputed — under review" pill must never overflow) */
.video-meta-row > .badge,
.video-meta-row > button.badge{
  flex-shrink:1;min-width:0;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* Redesign: the HOOK is the hero of the card — the line the user judges each video by.
   Readable sans body face at hero weight/size, clamped to 3 lines so a long (esp. BM) hook
   shows enough to judge by and never collapses to a useless fragment. (Was 13px mono, which
   was hard to scan and wrapped into a tall wall or truncated to a few words.) */
.video-hook{
  font-family:var(--font-body);font-size:15px;font-weight:600;line-height:1.35;
  color:var(--text);margin:0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.video-product{margin:0;}
/* P1: rebuilt button row — "Caption & tags" is the primary action, full-width on its own
   row; Remake/Download split 50/50 below. All three hit the 44px touch-target minimum.
   This replaces the old single 3-across row that overlapped/overflowed on mobile. */
.video-actions-v2{display:flex;flex-direction:column;gap:6px;margin-top:2px;}
.video-actions-v2 .btn{min-height:44px;font-size:13px;padding-left:8px;padding-right:8px;width:100%;}
.video-actions-row2{display:flex;gap:6px;}
.video-actions-row2 .btn{flex:1;min-width:0;width:auto;}
.remake-cap-note{margin:0;}
.remake-counter{margin:0;}

/* D1: desktop row layout (≥900px) for batch cards + review grid — see the
   @media (min-width:900px) block below .batch-grid for the actual row rules.
   Below 900px these wrappers stay `display:contents` so they add ZERO visual
   change — the grandchildren lay out exactly as they did before the wrapper
   divs existed (same flex parent, same gap, same order). */
.video-card-info,
.video-card-side,
.review-grid-info{display:contents;}

/* thumbnail + avatar gradients — amber/orange reserved exclusively for warnings */
.g1{background:linear-gradient(160deg,#7c86f5 0%,#2f2f7a 100%);}
.g2{background:linear-gradient(160deg,#FB7185 0%,#7a1f35 100%);}
.g3{background:linear-gradient(160deg,#22C55E 0%,#0f5c33 100%);}
.g4{background:linear-gradient(160deg,#EC4899 0%,#701946 100%);}
.g5{background:linear-gradient(160deg,#38BDF8 0%,#0a4f70 100%);}
.thumb-sm{width:40px;height:40px;border-radius:8px;flex-shrink:0;}
.thumb-lg{width:64px;height:64px;border-radius:12px;flex-shrink:0;}

/* ---------- allocator ---------- */
.allocator-card{margin-bottom:24px;}
.allocator-list{display:flex;flex-direction:column;gap:2px;margin-top:12px;}
.allocator-row{
  display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:10px;
  padding:10px 4px;border-bottom:1px solid var(--border);
}
.allocator-row:last-child{border-bottom:none;}
.allocator-row-info{display:contents;}
.allocator-info-col{min-width:0;overflow:hidden;}
/* two-line product names — never truncate to a single ellipsized line */
.allocator-name{
  font-size:14px;font-weight:600;max-width:100%;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.3;
}
/* wrap, don't ellipsis: at 375px the info column is ~97px but the substatus needs ~175px, so
   nowrap+ellipsis clipped "RM24.90 · Ready (~7-day variety)" down to "RM24.90 · Ready…" — the
   word "variety" was never visible. Wrapping to a second line keeps the whole note readable. */
.allocator-substatus{white-space:normal;overflow-wrap:anywhere;max-width:100%;display:block;line-height:1.3;}
.stepper{display:flex;align-items:center;gap:6px;flex-shrink:0;justify-self:end;}
.stepper-btn{
  width:44px;height:44px;border-radius:10px;border:1px solid var(--border-strong);
  background:var(--elevated-2);color:var(--text);font-size:18px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.stepper-btn:hover{background:#1d1d24;}
.stepper-btn:disabled{opacity:0.35;cursor:not-allowed;}
.stepper-input{
  width:36px;min-height:44px;text-align:center;font-weight:700;font-size:15px;flex-shrink:0;
  background:transparent;border:none;color:var(--text);font-family:inherit;
  -moz-appearance:textfield;padding:0;
}
.stepper-input::-webkit-outer-spin-button,.stepper-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.stepper-input:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-radius:6px;}
.allocator-gated{font-size:12px;color:var(--amber);justify-self:end;text-align:right;max-width:150px;}
.allocator-gated-link{font-size:11px;color:var(--accent-hover);font-weight:600;}
.allocator-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;flex-wrap:wrap;}
.cadence-tip{font-size:12px;color:var(--muted);margin-top:10px;}

/* ---------- empty state ---------- */
.empty-state{text-align:center;padding:44px 24px;}
.empty-state-icon{font-size:32px;margin-bottom:10px;}
.empty-state h3{margin:0 0 6px;font-family:var(--font-display);font-size:18px;letter-spacing:-0.02em;}
.empty-state p{margin:0 0 16px;font-size:14px;}

/* ---------- products ---------- */
.products-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));gap:16px;}
.product-card{padding:0;overflow:hidden;}
.product-card .thumb-lg{width:100%;height:110px;border-radius:0;}
.product-card-body{padding:16px;display:flex;flex-direction:column;gap:2px;}
.product-name{font-family:var(--font-display);font-size:15px;font-weight:700;margin:0;letter-spacing:-0.02em;}

.detail-header-row{display:flex;align-items:center;gap:14px;}
.tabs-row{display:flex;gap:6px;overflow-x:auto;margin-bottom:14px;padding-bottom:2px;}
.tab-btn{
  background:var(--elevated);border:1px solid var(--border);color:var(--muted);
  padding:8px 14px;border-radius:var(--radius-control);font-size:13px;font-weight:600;cursor:pointer; /* R4: no pill buttons */
  white-space:nowrap;min-height:38px;
}
.tab-btn:hover{color:var(--text);}
.tab-btn-active{background:rgba(124,134,245,0.16);color:var(--accent-hover);border-color:rgba(124,134,245,0.4);}
.tab-panel{margin-bottom:20px;}
.shot-block{padding:12px 0;border-bottom:1px solid var(--border);}
.shot-block:last-child{border-bottom:none;}

.footage-card{margin-bottom:20px;}
.upload-meter-row{margin-bottom:6px;}
.clip-list{display:flex;flex-direction:column;gap:8px;margin-top:14px;}
.clip-chip{
  display:flex;align-items:center;gap:10px;background:var(--elevated-2);
  border:1px solid var(--border);border-radius:10px;padding:8px 12px;
}
.clip-name{flex:1;font-size:13px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.clip-duration{font-size:12px;color:var(--muted);font-weight:600;}
.clip-remove{
  background:none;border:none;color:var(--muted);font-size:18px;cursor:pointer;
  width:28px;height:28px;border-radius:50%;
}
.clip-remove:hover{background:rgba(255,255,255,0.08);color:var(--text);}

/* ---------- plan ---------- */
.plan-current-card, .upgrade-card, .usage-card, .reassurance-card{margin-bottom:20px;}
/* R8 T3: one plan-card scale everywhere — name 15/600 white, price figure 28/700 white, /mo 14 muted */
.plan-name{font-size:15px;font-weight:600;color:var(--text);margin:4px 0 0;}
.plan-price{font-family:var(--font-display);font-size:32px;font-weight:700;color:var(--text);letter-spacing:-0.02em;margin:2px 0 4px;}
.plan-price .price-permo{font-size:14px;font-weight:500;color:var(--muted);}
.plan-price-was{font-family:var(--font-display);font-size:18px;font-weight:600;color:var(--muted);text-decoration:line-through;text-decoration-thickness:1.5px;letter-spacing:-0.01em;margin:0 0 -2px;}
.plan-price-was .price-permo{font-size:12px;font-weight:500;text-decoration:none;}
.plan-early-note{font-size:12px;font-weight:600;color:#4ade80;margin:2px 0 4px;line-height:1.3;}
.plan-quota-line{font-size:13px;font-weight:500;color:#9aa3f0;margin:0 0 10px;}
/* R9 Y1-Y4: yearly billing layer. Toggle reuses .view-toggle-row/.view-toggle-btn (X9). Every
   new text element sits at the 13px floor (R8 T1/T2 scale) — the only 12px element reused here
   is the existing .badge, never a new bespoke small size. */
.billing-toggle-row{margin-bottom:14px;}
.plan-price-eff{font-size:13px;font-weight:500;color:var(--muted);margin:0 0 2px;}
.plan-yearly-save{font-size:13px;font-weight:600;color:var(--money);margin:0 0 10px;} /* R2: pricing/savings is a money context — mint */
/* R11 D3: money fine-print (trial-billing, refund, founding caveat lines) raised from 12-13px
   to a 14px floor — a reviewer flagged these as genuinely hard to read at the old size, and
   this is exactly the copy (renewal date, refund terms, founding-price lock-in) a buyer most
   needs to actually read before paying. */
.yearly-refund-line{font-size:14px;color:var(--muted);line-height:1.5;margin:10px 0 0;}
.billing-period-line{font-size:14px;color:var(--muted);margin:0 0 4px;}
.founding-locked-note{font-size:14px;color:var(--muted);margin:2px 0 10px;}
.founding-band{
  border:1px dashed var(--border-strong);border-radius:10px;padding:12px;margin:4px 0 14px;
  background:rgba(124,134,245,0.06);
}
.founding-band-text{font-size:14px;font-weight:600;color:var(--text);margin:0 0 4px;}
.founding-band-demo-note{font-size:14px;color:var(--muted);margin:0 0 10px;}
.founding-band-region-note{font-size:14px;color:var(--muted);margin:0 0 10px;}
.usage-bars{display:flex;align-items:flex-end;gap:10px;height:110px;margin-top:8px;}
.usage-bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end;}
.usage-bar-track{width:100%;max-width:28px;height:80px;display:flex;align-items:flex-end;background:var(--elevated-2);border-radius:6px;overflow:hidden;border:1px solid var(--border);}
.usage-bar-fill{width:100%;background:var(--accent);border-radius:6px;}
.reassurance-list{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:8px;font-size:14px;color:var(--text);}

/* ---------- modal ---------- */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,0.6);
  display:flex;align-items:center;justify-content:center;padding:20px;z-index:100;
}
.modal-card{
  width:100%;max-width:440px;padding:24px;max-height:88vh;overflow-y:auto;
  /* R4: modals are one of only two places in the system allowed a shadow
     (the other is the logo tile) — everywhere else depth reads via borders. */
  box-shadow:0 8px 32px rgba(124,134,245,0.15);
}
.modal-title{font-family:var(--font-display);font-size:18px;font-weight:700;letter-spacing:-0.02em;margin:0 0 8px;}
.modal-body{font-size:14px;color:var(--muted);line-height:1.5;margin:0 0 14px;}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px;}
.welcome-dots{display:flex;gap:6px;justify-content:center;margin-top:8px;}
.dot{width:6px;height:6px;border-radius:50%;background:var(--border-strong);}
.dot-active{background:var(--accent);}

/* ---------- toast ---------- */
/* positioned top-center, under the sticky topbar, so it can never cover card buttons.
   z-index sits below the topbar (20) and tabbar (30); switchView() also force-dismisses
   toasts on navigation so nothing lingers across tabs (P11). */
.toast-host{
  position:fixed;top:calc(64px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;gap:8px;z-index:15;align-items:center;
  width:100%;pointer-events:none;padding:0 16px;
}
.toast{
  background:var(--elevated-2);border:1px solid var(--border-strong);
  color:var(--text);padding:10px 16px;border-radius:10px;font-size:13px;font-weight:600;
  opacity:0;transform:translateY(-8px);transition:opacity .2s ease, transform .2s ease;
  max-width:360px;text-align:center; /* R4: borders over shadows — depth is the border above, not a drop shadow */
}
.toast-show{opacity:1;transform:translateY(0);}

@media (max-width: 768px){
  .toast-host{top:calc(58px + env(safe-area-inset-top));}
}

/* ---------- info tooltip ---------- */
.info-tip{
  width:16px;height:16px;border-radius:50%;background:var(--elevated-2);
  border:1px solid var(--border-strong);color:var(--muted);font-size:10px;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  margin-left:5px;vertical-align:middle;padding:0;line-height:1;
}
.info-tip:hover{color:var(--text);}
.info-bubble{
  position:fixed;z-index:150;max-width:240px;background:var(--elevated-2);
  border:1px solid var(--border-strong);color:var(--text);font-size:12px;line-height:1.4;
  padding:10px 12px;border-radius:10px; /* R4: borders over shadows */
}

/* ---------- safety scan / flag detail ---------- */
.flag-summary{
  display:flex;align-items:center;gap:10px;background:rgba(245,158,11,0.08);
  border:1px solid rgba(245,158,11,0.25);border-radius:var(--radius-control);
  padding:12px 14px;margin-bottom:14px;
}
.flag-percent{font-size:22px;font-weight:800;color:var(--amber);}
.diff-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px;}
@media (max-width: 480px){ .diff-grid{grid-template-columns:1fr;} }
.diff-col{background:var(--elevated-2);border:1px solid var(--border);border-radius:var(--radius-control);padding:10px 12px;}
.diff-col h4{font-size:11px;text-transform:uppercase;letter-spacing:0.04em;color:var(--muted);margin:0 0 6px;}
.diff-col p{font-size:13px;line-height:1.45;margin:0;}
.diff-mark{background:rgba(245,158,11,0.32);color:var(--text);border-radius:3px;padding:0 2px;}
.what-to-change{
  background:rgba(124,134,245,0.08);border:1px solid rgba(124,134,245,0.25);
  border-radius:var(--radius-control);padding:10px 14px;font-size:13px;color:var(--text);
}
.scan-history-card{margin-bottom:20px;}
.scan-history-list{display:flex;flex-direction:column;gap:10px;}
.scan-history-item{
  display:flex;justify-content:space-between;gap:10px;padding:10px 0;
  border-bottom:1px solid var(--border);font-size:13px;
}
.scan-history-item:last-child{border-bottom:none;}
/* R11 E1: demo rows visually grouped under the intro banner — a subtle inset container so they
   read as a set, distinct from the user's own real scan rows below. */
.scan-history-list-demo-group{background:var(--elevated);border:1px solid var(--border);border-radius:10px;padding:4px 10px;margin-bottom:12px;}
.scan-history-list-demo-group .scan-history-item:last-child{border-bottom:none;}
.scan-history-meta{color:var(--muted);font-size:12px;margin-top:2px;}
.disclaimer-line{font-size:12px;color:var(--muted);line-height:1.5;margin-top:10px;}

/* ---------- runway / footage gating ---------- */
.runway-note{font-size:12px;color:var(--muted);margin-top:6px;}
.runway-low{color:var(--amber);font-weight:600;}
.gated-card{opacity:0.9;}

.payment-badges{display:flex;flex-wrap:wrap;gap:6px 10px;font-size:13px;color:var(--muted);margin-top:10px;}

/* ---------- caption & tags "how to post" ---------- */
/* list-style:decimal is explicit because the Tailwind CDN preflight reset strips native
   <ol>/<ul> numbering (P11) — without this the posting-guide steps render as unnumbered lines. */
.howto-list{list-style:decimal;margin:10px 0 0;padding-left:20px;font-size:13px;color:var(--text);line-height:1.7;}
.filespec-line{font-size:14px;color:var(--muted);margin-top:10px;} /* R11 D3: 14px floor, see comment above .yearly-refund-line */

/* ---------- usage chart legend ---------- */
.usage-legend{display:flex;gap:16px;margin-top:10px;font-size:12px;color:var(--muted);}
.usage-legend-item{display:flex;align-items:center;gap:6px;}
.legend-swatch{width:10px;height:10px;border-radius:3px;background:var(--accent);}
.legend-line{width:14px;height:0;border-top:2px dashed var(--muted);}
.usage-bar-suggested{position:absolute;left:0;right:0;border-top:2px dashed var(--muted);}
.usage-bar-track{position:relative;}

/* ---------- round-3: app-shell personality (glow behind Today header) ---------- */
.today-glow{position:relative;}
.today-glow::before{
  content:'';position:absolute;top:-32px;left:-24px;width:320px;height:200px;
  background:radial-gradient(circle at 30% 30%, rgba(124,134,245,0.22), transparent 70%);
  pointer-events:none;z-index:-1;
}

/* ---------- round-3: first-use quota explainer ---------- */
.quota-explainer{
  margin-top:10px;font-size:12px;color:var(--muted);background:rgba(124,134,245,0.08);
  border:1px solid rgba(124,134,245,0.22);border-radius:var(--radius-control);padding:8px 12px;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.pace-warning{color:var(--amber);}

/* ---------- round-3: generate progress steps ---------- */
.progress-steps{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:8px;}
.progress-step{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);}
.progress-step .step-marker{width:16px;text-align:center;flex-shrink:0;}
.progress-step.step-active{color:var(--text);font-weight:600;}
.progress-step.step-active .step-marker{color:var(--accent);}
.progress-step.step-done{color:var(--text);}
.progress-step.step-done .step-marker{color:var(--success);}

/* ---------- round-3: remake hook-picker ---------- */
.hook-current{background:var(--elevated-2);border:1px solid var(--border);border-radius:var(--radius-control);padding:10px 12px;margin-bottom:12px;}
.hook-current p{margin:4px 0 0;font-size:13px;}
.hook-options{display:flex;flex-direction:column;gap:8px;margin-bottom:10px;}
.hook-option{
  display:flex;align-items:flex-start;gap:8px;text-align:left;background:var(--elevated-2);
  border:1px solid var(--border-strong);border-radius:var(--radius-control);padding:10px 12px;
  color:var(--text);font-size:13px;cursor:pointer;min-height:44px;
}
.hook-option:hover{background:#1d1d24;border-color:var(--accent);}
.hook-option-text{flex:1;min-width:0;}

/* ---------- round-3: demo-data banner (scan history) ---------- */
.demo-banner{
  background:rgba(255,255,255,0.05);border:1px dashed var(--border-strong);
  border-radius:var(--radius-control);padding:8px 12px;font-size:12px;color:var(--muted);
  margin-bottom:12px;
}

/* ---------- round-3: onboarding region+language choices ---------- */
.onb-choice-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;}

/* ---------- round-3: per-product caption language toggle ---------- */
.lang-toggle-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 14px;}
.lang-pill{
  border:1px solid var(--border-strong);background:var(--elevated-2);color:var(--muted);
  font-size:12px;font-weight:700;padding:5px 12px;border-radius:var(--radius-control);cursor:pointer;min-height:30px; /* R4: no pill buttons */
}
.lang-pill:hover{color:var(--text);}
.lang-pill-active{background:var(--accent);color:#070912;border-color:var(--accent);}

/* ---------- round-3: products search + sort ---------- */
.products-toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px;}
.products-toolbar .text-input{flex:2;min-width:160px;}
.products-toolbar .select-input{flex:1;min-width:160px;}

/* ---------- round-3: clip shot-type label ---------- */
.clip-shottype{
  flex-shrink:0;background:rgba(124,134,245,0.14);color:var(--accent-hover);
  font-size:10px;font-weight:700;padding:2px 8px;border-radius:999px;text-transform:uppercase;letter-spacing:0.02em;
}

/* ---------- round-3: sample-preview microlabel on thumbnails ---------- */
.sample-preview-tag{
  position:absolute;top:8px;left:8px;z-index:1;
  background:rgba(0,0,0,0.45);color:rgba(255,255,255,0.85);
  font-size:9px;font-weight:700;letter-spacing:0.02em;text-transform:uppercase;
  padding:2px 6px;border-radius:5px;pointer-events:none;
}
/* P10: real-engine-frame thumbnails get a distinct green-tinted tag from any remaining
   CSS-placeholder "sample" tag, so honesty signaling stays visually distinguishable. */
.real-frame-tag{background:rgba(34,197,94,0.75);color:#fff;max-width:calc(100% - 46px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* ---------- round-4: O6 start-here anchor ---------- */
.start-here-card{margin-bottom:20px;}
.start-here-steps{margin:10px 0 16px;padding-left:20px;list-style:decimal;font-size:14px;color:var(--text);line-height:1.9;}
.start-here-highlight{animation:start-here-pulse 1.6s ease;}
@keyframes start-here-pulse{
  0%{box-shadow:0 0 0 0 rgba(124,134,245,0.55);}
  60%{box-shadow:0 0 0 10px rgba(124,134,245,0);}
  100%{box-shadow:0 0 0 0 rgba(124,134,245,0);}
}

/* ---------- round-4: O1 free-trial / plan-prompt cards ---------- */
.trial-card{border-color:rgba(124,134,245,0.35);}
.plan-prompt-card{margin-bottom:20px;}
/* minmax(0,1fr) not 1fr: a bare `1fr` is `minmax(auto,1fr)`, so a column whose min-content
   (the "Start with Starter" button) is wider than its fair share pushes the whole grid past its
   container — at 375px that overflowed the Pro card's right edge flush to the viewport (clipped,
   zero gutter) right on the pay screen. minmax(0,1fr) lets both columns shrink to equal width so
   neither card ever touches the screen edge. */
.plan-prompt-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin-top:12px;}
/* On a phone, two ~145px columns are cramped: the plan price/quota wrap and longer button labels
   (e.g. BM "Mula dengan Starter") spill past their button. Stack to one full-width column so each
   plan reads cleanly and no label ever clips. Side-by-side comparison returns on wider screens. */
@media (max-width:440px){ .plan-prompt-row{grid-template-columns:1fr;} }
.plan-prompt-option{
  background:var(--elevated-2);border:1px solid var(--border);border-radius:var(--radius-control);
  padding:14px;display:flex;flex-direction:column;gap:8px;
}
.topbar-badge-muted{background:rgba(255,255,255,0.06);color:var(--muted);}
/* journey-fix: the "Pick a plan" pill is now a real button (was an inert span). Reset button
   chrome so it matches the badge look, and add pointer + hover so it honestly reads as tappable. */
.topbar-plan-badge-btn{border:none;font:inherit;cursor:pointer;color:var(--accent-hover);background:rgba(124,134,245,0.16);}
.topbar-plan-badge-btn:hover{background:rgba(124,134,245,0.26);}

/* ---------- round-4: O3 Studio tier card ---------- */
.studio-card{margin-bottom:20px;}

/* ---------- round-4: P11 demo-product collapse once a real product exists ---------- */
.product-card-demo-collapsed{opacity:0.6;}
.product-card-demo-collapsed:hover{opacity:0.85;}

/* ---------- round-4: P9 modal scroll shadow (CSS-only "more content" affordance) ---------- */
.modal-card{
  background-color:var(--elevated);
  background-image:
    linear-gradient(var(--elevated) 30%, rgba(0,0,0,0)),
    linear-gradient(rgba(0,0,0,0), var(--elevated) 70%) 0 100%,
    linear-gradient(to bottom, rgba(0,0,0,0.35), rgba(0,0,0,0)) top,
    linear-gradient(to top, rgba(0,0,0,0.35), rgba(0,0,0,0)) bottom;
  background-repeat:no-repeat;
  background-size:100% 40px, 100% 40px, 100% 14px, 100% 14px;
  background-attachment:local, local, scroll, scroll;
}

/* round-4 P11's ::after-based fade is superseded by R6 N4's .tabs-scroll-wrap/.tabs-scroll-fade
   below (a real element outside the scrolling row reads more reliably across browsers than a
   sticky ::after inside an overflow:auto flex container, which some engines clip). */

/* ---------- round-5 F2: language-pack badge + winner trophy pill ---------- */
.badge-lang{background:rgba(124,134,245,0.14);color:var(--accent-hover);font-weight:700;}
.winner-pill{font-size:14px;vertical-align:middle;}

/* ---------- round-5 F1: yesterday card / ROI line / performance section ---------- */
.roi-line{margin:6px 0 0;}
.yesterday-card{margin-bottom:20px;border-color:rgba(124,134,245,0.3);}
/* P0 #1: Earnings-tab logging front door. Ready-state borrows the yesterday-card accent so it
   reads as the primary action; empty-state stays quiet (honest guidance, not a CTA). */
.earnings-log-entry{margin-bottom:20px;}
.earnings-log-entry-ready{border-color:rgba(124,134,245,0.45);}
.earnings-log-entry-empty{border-style:dashed;}
/* R12 B8: redesigned log rows — tight scannable card per video (thumb | hook | segmented
   view-picker) replacing the old 4-full-width-buttons-per-video wall. */
.yesterday-list{display:flex;flex-direction:column;margin-top:12px;}
.log-video-row{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--border);}
.log-video-row:first-child{padding-top:4px;}
.log-video-row:last-child{border-bottom:none;padding-bottom:2px;}
.log-thumb{
  width:44px;height:64px;flex-shrink:0;border-radius:8px;
  background-color:var(--elevated-2);background-size:cover;background-position:center;
}
.log-video-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:9px;}
.log-video-head{display:flex;align-items:center;gap:8px;min-width:0;}
.log-video-head .angle-badge{flex-shrink:0;max-width:none;}
.log-video-product{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.log-video-hook{
  font-size:13px;line-height:1.45;margin:0;color:var(--text);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
/* single slim segmented control — one unified object, 4 mutually-exclusive segments.
   Track + raised active segment; segment tap area stays ≥44px tall while reading slim. */
.view-seg{display:flex;background:var(--elevated-2);border:1px solid var(--border-strong);border-radius:var(--radius-control);padding:3px;gap:0;}
.view-seg-btn{
  position:relative;flex:1;min-width:0;min-height:44px;border:none;background:transparent;color:var(--muted);
  font-family:inherit;font-size:12px;font-weight:600;line-height:1;letter-spacing:0.01em;
  border-radius:calc(var(--radius-control) - 3px);cursor:pointer;padding:0 4px;
  touch-action:manipulation;transition:background .12s ease,color .12s ease;
}
/* hairline separators between segments — the segmented-control cue; suppressed next to the
   selected segment so its pill reads as a clean raised key */
.view-seg-btn + .view-seg-btn::before{
  content:'';position:absolute;left:0;top:9px;bottom:9px;width:1px;background:var(--border-strong);
}
.view-seg-btn:hover{color:var(--text);}
.view-seg-btn-active,
.view-seg-btn-active + .view-seg-btn{}
.view-seg-btn-active::before,
.view-seg-btn-active + .view-seg-btn::before{background:transparent;}
.view-seg-btn-active{background:var(--accent);color:#070912;font-weight:700;}
/* R12 B8: sales behind a quiet one-tap disclosure (native <details>, no JS) */
.sales-disclosure{margin-top:16px;border-top:1px solid var(--border);}
.sales-disclosure-summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;
  min-height:44px;font-size:13px;font-weight:600;color:var(--accent-hover);user-select:none;
}
.sales-disclosure-summary::-webkit-details-marker{display:none;}
.sales-disclosure-summary::after{
  content:'';width:7px;height:7px;flex-shrink:0;margin-left:auto;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:rotate(45deg);transition:transform .15s ease;
}
.sales-disclosure[open] .sales-disclosure-summary::after{transform:rotate(-135deg);}
.sales-disclosure-body{padding-bottom:4px;}
.yesterday-rm-row{display:flex;align-items:center;gap:8px;}
.rm-prefix{font-size:13px;color:var(--muted);font-weight:700;flex-shrink:0;}
.yesterday-rm-row .text-input{flex:1;}
.yesterday-rm-multi{display:flex;flex-direction:column;gap:10px;}
.yesterday-rm-row-compact .yesterday-rm-product-label{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.yesterday-rm-row-compact .text-input{flex:0 0 108px;width:108px;}

.performance-card{margin-bottom:20px;}
.perf-stat-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:10px;margin-top:10px;}
.perf-stat{background:var(--elevated-2);border:1px solid var(--border);border-radius:var(--radius-control);padding:12px 10px;text-align:center;}
.perf-stat-num{display:block;font-size:18px;font-weight:800;}
.perf-stat-label{display:block;font-size:11px;color:var(--muted);margin-top:2px;}

/* ---------- round-5 F3: calendar ---------- */
.calendar-card{margin-bottom:20px;}
.cal-nav{display:flex;align-items:center;gap:6px;}
.cal-month-label{font-size:13px;font-weight:600;min-width:112px;text-align:center;}
.cal-filter-row{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0;}
.chip-btn{
  border:1px solid var(--border-strong);background:var(--elevated-2);color:var(--muted);
  font-size:12px;font-weight:600;padding:6px 12px;border-radius:var(--radius-control);cursor:pointer;min-height:32px; /* R4: no pill buttons */
}
.chip-btn:hover{color:var(--text);}
.chip-btn-active{background:var(--accent);color:#070912;border-color:var(--accent);}
.cal-weekday-row{display:grid;grid-template-columns:repeat(7, 1fr);gap:4px;margin-top:10px;text-align:center;font-size:11px;color:var(--muted);font-weight:600;}
.cal-grid{display:grid;grid-template-columns:repeat(7, 1fr);gap:4px;margin-top:4px;}
.cal-cell{
  position:relative;aspect-ratio:1/1;border-radius:8px;border:1px solid var(--border);
  background:var(--elevated-2);color:var(--text);cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:2px;
  padding:4px 2px 2px;font-family:inherit;min-height:44px;
}
.cal-cell:hover{border-color:var(--border-strong);}
.cal-cell-empty{background:transparent;border:none;cursor:default;}
.cal-cell-today{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);}
.cal-daynum{font-size:13px;font-weight:600;color:var(--text);} /* R8 T4: scan target of the grid */
.cal-cell-has .cal-daynum{color:var(--text);}
.cal-dots{display:flex;gap:2px;flex-wrap:wrap;justify-content:center;align-items:center;}
.cal-dot{width:5px;height:5px;border-radius:50%;background:var(--accent);}
.cal-dot-extra{font-size:8px;color:var(--muted);font-weight:700;}
.cal-ring-mid{box-shadow:inset 0 0 0 2px rgba(124,134,245,0.55);}
/* R2: winner-ring + RM badge are "winner-money" contexts per the brand spec — mint, not safety-green. */
.cal-ring-win{box-shadow:inset 0 0 0 2px var(--money);}
.cal-cell-today.cal-ring-mid,.cal-cell-today.cal-ring-win{box-shadow:0 0 0 1px var(--accent), inset 0 0 0 2px var(--money);}
.cal-rm-badge{position:absolute;bottom:1px;left:2px;font-size:7px;font-weight:800;color:var(--money);line-height:1;}
.cal-amber-corner{position:absolute;top:0;right:0;width:0;height:0;border-style:solid;border-width:0 8px 8px 0;border-color:transparent var(--amber) transparent transparent;border-radius:0 8px 0 0;}
.cal-event-marker{position:absolute;bottom:1px;right:2px;font-size:8px;line-height:1;}
.cal-suggest-marker{position:absolute;top:1px;left:2px;font-size:8px;line-height:1;}

.day-panel-list{display:flex;flex-direction:column;gap:10px;margin-bottom:6px;}
.day-panel-row{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;border-bottom:1px solid var(--border);padding-bottom:10px;}
.day-panel-row:last-child{border-bottom:none;padding-bottom:0;}

/* ================= R6: nav rebuild / delete / language / earnings / misc ================= */
/* --danger / --danger-hover are now defined once, at the top, aliased to --es-danger* (R2). */

/* B1/B6: yesterday-card queue + explicit save-and-advance */
.queue-indicator{display:inline-block;font-size:11px;font-weight:700;color:var(--accent);background:rgba(124,134,245,0.14);border-radius:999px;padding:3px 10px;margin-bottom:8px;}
/* R12 B8: primary action gets full weight + width; skip is a quiet secondary below it */
.yesterday-actions{display:flex;flex-direction:column;align-items:stretch;gap:10px;margin-top:18px;}
.yesterday-save-btn{width:100%;min-height:48px;}
.yesterday-skip-btn{align-self:center;min-height:44px;color:var(--muted);}
.yesterday-skip-btn:hover{color:var(--text);}

/* K1: product delete */
.product-card-actions{display:flex;gap:8px;}
.product-card-actions .btn{flex:1;}
.detail-delete-btn{margin-left:auto;align-self:flex-start;}
.btn-danger{background:var(--danger);color:#fff;border:1px solid var(--danger);}
.btn-danger:hover{background:var(--danger-hover);}
.btn-danger-ghost{color:var(--danger);}
.btn-danger-ghost:hover{background:rgba(255,107,107,0.12);}

/* K4: onboarding pulse on the Products "+ Add product" CTA */
@keyframes fo-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(124,134,245,0.55);}
  50%{box-shadow:0 0 0 8px rgba(124,134,245,0);}
}
.pulse-cta{animation:fo-pulse 1.6s ease-in-out infinite;}

/* N3: ROI line becomes a tappable link through to Earnings */
.roi-line-link{display:inline-block;background:none;border:none;padding:0;font-family:inherit;color:inherit;cursor:pointer;text-align:left;}
.roi-line-link:hover{text-decoration:underline;color:var(--accent);}

/* N4: scrollable product-detail tab strip with a visible fade/chevron affordance */
.tabs-scroll-wrap{position:relative;}
.tabs-scroll-wrap .tabs-row{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.tabs-scroll-wrap .tabs-row::-webkit-scrollbar{display:none;}
.tabs-scroll-fade{
  position:absolute;top:0;right:0;bottom:0;width:28px;display:flex;align-items:center;justify-content:flex-end;
  background:linear-gradient(to right, transparent, var(--bg) 70%);color:var(--muted);font-size:16px;pointer-events:none;
}
@media (min-width:900px){ .tabs-scroll-fade{display:none;} }

/* R6 N1: Earnings — sales log + winners */
.sales-log-list,.winners-list{display:flex;flex-direction:column;gap:8px;}
.sales-log-row{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border);padding-bottom:8px;}
.sales-log-row:last-child{border-bottom:none;padding-bottom:0;}
.winners-row{display:flex;align-items:center;gap:10px;}

/* R6 N1: Account settings + utility */
.account-settings-card .onb-choice-row{margin-bottom:4px;}
.account-utility-row{display:flex;flex-wrap:wrap;gap:4px 16px;}

/* R6 B7: background-generation pill on Today */
.bg-generating-pill{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text);margin-bottom:16px;padding:10px 14px;}
.spinner-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:fo-pulse 1s ease-in-out infinite;}

/* ================= R8 additions ================= */

/* X1: Your list */
.your-list-card{margin-bottom:16px;}
.list-section-label{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:0.04em;margin:12px 0 6px;}
.list-section-label:first-of-type{margin-top:0;}
.list-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--border);min-height:44px;}
.list-row:last-child{border-bottom:none;}
.list-row-label{flex:1;font-size:14px;min-width:0;}
.list-row-sub{display:block;font-size:12px;color:var(--muted);margin-top:1px;}
.list-row-done .list-row-label{color:var(--muted);}
.list-check{width:20px;height:20px;flex-shrink:0;accent-color:var(--accent);cursor:pointer;}
.list-go{flex-shrink:0;}
.posted-check-row{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);cursor:pointer;min-height:32px;}
.posted-check-row input{width:18px;height:18px;accent-color:var(--success);cursor:pointer;}
.posted-check-row.posted-on{color:var(--success);}
/* R11 E2 */
.posted-check-wrap{display:flex;align-items:center;gap:2px;}
.posted-check-hint{margin:0 0 4px;}

/* X2: two-lane generation */
.lane-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:6px;}
.lane-row .btn{flex:1;min-width:150px;}
.quick-reason-list{margin:10px 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;}
.quick-reason-list li{font-size:14px;display:flex;gap:8px;align-items:baseline;}
.quick-reason-count{font-weight:700;color:var(--text);white-space:nowrap;}
.quick-reason-why{color:var(--muted);font-size:13px;}

/* X3: session summary + angle chips */
.session-summary{font-size:13px;color:var(--muted);line-height:1.5;margin-top:10px;}
.session-summary strong{color:var(--text);font-weight:600;}
.angle-chip-rows{display:flex;flex-direction:column;gap:6px;margin-top:8px;}
.angle-chip-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px;color:var(--muted);}
.angle-chip{background:rgba(124,134,245,0.14);color:var(--accent-hover);border:1px solid transparent;border-radius:var(--radius-control);padding:4px 10px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;min-height:28px;} /* R4: no pill buttons */
.angle-chip:hover{border-color:var(--accent);}

/* X4: progressive reveal pending card */
.video-card-pending .video-thumb{display:flex;align-items:center;justify-content:center;background:var(--elevated-2);}
.pending-stage{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:12px;color:var(--muted);}
.pending-stage .spinner-dot{width:10px;height:10px;}
.video-card-appear{animation:fo-card-in .45s ease;}
@keyframes fo-card-in{from{opacity:0;transform:translateY(8px) scale(.98);}to{opacity:1;transform:none;}}

/* X5: review ritual */
.review-thumb{aspect-ratio:9/16;height:clamp(220px,40vh,300px);width:auto;border-radius:12px;background-size:cover;background-position:center;margin:0 auto 12px;position:relative;} /* 9:16 = the real TikTok output shape (was a misleading wide rectangle) */
.review-progress{font-size:12px;color:var(--muted);margin:0 0 8px;}
.review-caption-line{font-family:var(--font-mono);font-size:13px;color:var(--text);background:var(--elevated-2);border:1px solid var(--border);border-radius:8px;padding:8px 10px;margin:8px 0;} /* R3: generated caption text */
.craft-note{font-size:12px;color:var(--muted);margin:6px 0 0;line-height:1.45;}
.craft-note-label{color:var(--accent-hover);font-weight:600;}
.review-verdicts{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;}
.review-verdicts .btn{flex:1;min-width:90px;}
/* R11 E10: grid-view mode for big (6+) batches */
.review-grid-toggle{display:block;margin:0 0 10px;padding:0;}
.review-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;max-height:60vh;overflow-y:auto;}
.review-grid-card{border:1px solid var(--border);border-radius:10px;padding:8px;background:var(--elevated);}
.review-thumb-sm{height:96px;width:auto;border-radius:8px;margin:0 0 6px;} /* vertical 9:16 (desktop grid already overrides below) */
.video-hook-sm{font-size:12px;line-height:1.35;margin:4px 0;}
.review-grid-actions{display:flex;gap:6px;margin-top:6px;}
.review-grid-actions .btn{flex:1;padding:6px 8px;font-size:11px;min-height:30px;}

/* D1: ≥900px — review/pick grid gets the same row treatment as batch cards: small thumb
   left, hook/meta in the middle (ellipsis), swap/remake actions right. The modal itself
   (.modal-card, capped at 440px) gets a bit more room here via :has() so rows have breathing
   space — scoped to modals that actually contain a .review-grid, so no other modal is affected. */
@media (min-width: 900px){
  .modal-card:has(.review-grid){max-width:640px;}
  .review-grid{display:flex;flex-direction:column;gap:8px;grid-template-columns:none;}
  .review-grid-card{
    display:flex;flex-direction:row;align-items:center;gap:12px;padding:8px 10px;
  }
  .review-thumb-sm{
    flex:0 0 56px;width:56px;height:auto;aspect-ratio:9/16;margin-bottom:0;
  }
  .review-grid-info{
    display:flex;flex-direction:column;justify-content:center;gap:2px;flex:1;min-width:0;
  }
  .review-grid-info .video-meta-row{flex-wrap:nowrap;}
  .review-grid-info .video-hook-sm{
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0;
  }
  .review-grid-actions{margin-top:0;flex-shrink:0;width:auto;}
  .review-grid-actions .btn{flex:none;width:auto;white-space:nowrap;}
}

/* X7: product history tab */
.history-row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid var(--border);}
.history-row:last-child{border-bottom:none;}
.history-date{font-size:12px;color:var(--muted);white-space:nowrap;}

/* X8: star + preset chips */
.star-btn{background:none;border:none;font-size:18px;cursor:pointer;padding:4px;line-height:1;filter:grayscale(1);opacity:.5;transition:filter .15s ease,opacity .15s ease;min-height:32px;}
.star-btn.star-on{filter:none;opacity:1;}
.preset-row{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 14px;align-items:center;}
.preset-row .select-input{width:auto;min-width:150px;min-height:36px;padding:6px 10px;font-size:13px;}

/* X9: pipeline view */
.pipeline-stage{margin-bottom:18px;}
.pipeline-stage-title{font-size:13px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:0.04em;margin:0 0 8px;}
.pipeline-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:var(--elevated);margin-bottom:6px;}
.pipeline-row-name{flex:1;font-size:14px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.view-toggle-row{display:inline-flex;border:1px solid var(--border-strong);border-radius:var(--radius-control);overflow:hidden;} /* R4: no pill buttons */
.view-toggle-btn{background:transparent;border:none;color:var(--muted);font-size:13px;font-weight:600;padding:7px 14px;cursor:pointer;font-family:inherit;min-height:36px;}
.view-toggle-btn.view-toggle-active{background:rgba(124,134,245,0.18);color:var(--text);}

/* X10: planned hollow dot */
.cal-plan-dot{width:6px;height:6px;border-radius:50%;border:1.5px solid var(--accent-hover);background:transparent;display:inline-block;}

/* X12: favourites */
.fav-row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid var(--border);}
.fav-row:last-child{border-bottom:none;}
.fav-text{flex:1;font-size:13px;min-width:0;line-height:1.45;}
.fav-actions{display:flex;gap:6px;flex-shrink:0;flex-wrap:wrap;}
.pp-fav-row{display:flex;gap:8px;margin-top:6px;flex-wrap:wrap;}
/* R8: pipeline rows wrap on narrow screens — never crush the product name to 2 chars */
@media (max-width: 560px){
  .pipeline-row{flex-wrap:wrap;}
  .pipeline-row-name{flex:1 1 100%;white-space:normal;}
}
/* R8: favourites rows stack on narrow screens — caption text must stay readable */
@media (max-width: 560px){
  .fav-row{flex-direction:column;align-items:stretch;}
  .fav-actions{align-self:flex-end;}
}

/* ==========================================================================
   ADMIN BACK-OFFICE (admin.html / admin.js)
   Desktop-first (1280px primary, usable down to 768px). Reuses every token
   and component class above (.card/.btn/.badge/.modal-overlay/.toast/.nav-item);
   this section only adds the back-office-specific pieces the consumer app
   never needed: data tables, a login+2FA gate, meters, a slide-in drawer,
   typed-confirm affordance, and kill-switch toggles.
   ========================================================================== */

/* ---------- extra badge variants (status pills for payments/queue/users) ---------- */
.badge-danger{background:rgba(255,107,107,0.14);color:var(--danger);}
.badge-money{background:rgba(62,207,142,0.14);color:var(--money);}

/* ---------- demo-data labeling ---------- */
.admin-demo-flag{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(255,255,255,0.05);border:1px dashed var(--border-strong);
  border-radius:999px;padding:3px 11px;font-size:11px;font-weight:700;
  color:var(--muted);text-transform:uppercase;letter-spacing:0.05em;
  white-space:nowrap;
}

/* ---------- login gate ---------- */
.login-gate{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;}
.login-wrap{width:100%;max-width:460px;display:flex;flex-direction:column;gap:16px;}
.login-card{padding:32px;}
.login-logo-row{display:flex;justify-content:center;margin-bottom:6px;}
.login-subtitle{font-size:13px;color:var(--muted);text-align:center;margin:0 0 22px;line-height:1.5;}
.login-form-title{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:0.05em;margin:0 0 4px;}
.totp-row{display:flex;gap:8px;justify-content:center;margin-top:4px;}
.totp-box{
  width:44px;height:52px;text-align:center;font-family:var(--font-mono);
  font-size:20px;font-weight:700;background:var(--elevated-2);
  border:1px solid var(--border-strong);border-radius:var(--radius-control);
  color:var(--text);
}
.totp-box:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent);}
.login-error{
  background:rgba(255,107,107,0.10);color:var(--danger);
  border:1px solid rgba(255,107,107,0.28);border-radius:var(--radius-control);
  padding:10px 14px;font-size:13px;font-weight:600;margin-bottom:14px;
}
.security-panel-toggle{width:100%;text-align:left;}
.security-list{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:11px;}
.security-list li{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--text-soft, var(--text));line-height:1.45;}
.security-list .sec-icon{flex-shrink:0;width:16px;height:16px;color:var(--es-ok);margin-top:2px;}
.security-list b{color:var(--text);}
.login-footer-note{font-size:12px;color:var(--muted);text-align:center;line-height:1.5;}

/* ---------- admin topbar extras ---------- */
.admin-topbar-right{display:flex;align-items:center;gap:12px;margin-left:auto;flex-wrap:wrap;justify-content:flex-end;}
.admin-identity{font-size:13px;color:var(--muted);}
.admin-identity b{color:var(--text);font-weight:600;}
.session-timer{
  display:flex;align-items:center;gap:6px;font-family:var(--font-mono);
  font-size:13px;color:var(--muted);padding:5px 12px;
  border:1px solid var(--border-strong);border-radius:999px;
  font-variant-numeric:tabular-nums;
}
.session-timer-warn{color:var(--amber);border-color:rgba(245,158,11,0.45);background:rgba(245,158,11,0.08);}

/* ---------- KPI cards ---------- */
.kpi-grid{display:grid;grid-template-columns:repeat(2, 1fr);gap:14px;margin-bottom:24px;}
@media (min-width: 720px){ .kpi-grid{grid-template-columns:repeat(4, 1fr);} }
@media (min-width: 1180px){ .kpi-grid{grid-template-columns:repeat(7, 1fr);} }
.kpi-card{padding:16px 16px;}
.kpi-label{font-size:11px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:0.05em;margin:0 0 10px;}
.kpi-value{font-family:var(--font-display);font-size:26px;font-weight:700;letter-spacing:-0.02em;margin:0;font-variant-numeric:tabular-nums;line-height:1.1;}
.kpi-sub{font-size:12px;color:var(--muted);margin:6px 0 0;}
.kpi-trend-up{color:var(--es-ok);font-weight:700;}
.kpi-trend-down{color:var(--danger);font-weight:700;}

/* ---------- dashboard grid + sparkline + meters ---------- */
.dash-grid-2{display:grid;grid-template-columns:1fr;gap:20px;margin-bottom:24px;align-items:start;}
@media (min-width: 1040px){ .dash-grid-2{grid-template-columns:1.1fr 0.9fr;} }
.meter-card{margin-bottom:0;}
.meter-row{margin-bottom:16px;}
.meter-row:last-child{margin-bottom:0;}
.meter-label-row{display:flex;justify-content:space-between;gap:10px;font-size:13px;font-weight:600;margin-bottom:6px;}
.meter-label-row .meter-figure{font-variant-numeric:tabular-nums;}
.meter-track{height:12px;background:var(--elevated-2);border:1px solid var(--border);border-radius:999px;overflow:hidden;position:relative;}
.meter-fill{height:100%;border-radius:999px;transition:width .3s ease;}
.meter-fill-revenue{background:var(--money);}
.meter-fill-cost{background:var(--muted);}
.meter-fill-cost.meter-fill-warn{background:var(--amber);}
.meter-cap-marker{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--danger);}
.meter-caption{font-size:11px;color:var(--muted);margin-top:5px;}
.founding-counter-row{display:flex;justify-content:space-between;font-size:13px;font-weight:600;margin-bottom:8px;}
.founding-counter-num{font-family:var(--font-display);font-variant-numeric:tabular-nums;}
.sparkline-card{margin-top:20px;}
.sparkline-wrap{margin-top:12px;}
.sparkline-legend{display:flex;gap:18px;font-size:12px;color:var(--muted);margin-top:10px;flex-wrap:wrap;}
.sparkline-legend-item{display:flex;align-items:center;gap:6px;}
.sparkline-swatch{width:10px;height:10px;border-radius:3px;flex-shrink:0;}

/* ---------- data tables ---------- */
.table-toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px;align-items:center;}
.table-toolbar .text-input{flex:2 1 220px;min-width:180px;}
.table-toolbar .select-input{flex:0 1 170px;min-width:140px;}
.table-count{font-size:12px;color:var(--muted);margin-left:auto;white-space:nowrap;}
.table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius-card);}
.admin-table{width:100%;border-collapse:collapse;font-size:13px;}
.admin-table thead th{
  position:sticky;top:0;background:var(--elevated-2);text-align:left;
  font-size:11px;text-transform:uppercase;letter-spacing:0.04em;color:var(--muted);
  font-weight:700;padding:11px 14px;border-bottom:1px solid var(--border-strong);
  white-space:nowrap;
}
.admin-table th.sortable{cursor:pointer;user-select:none;}
.admin-table th.sortable:hover{color:var(--text);}
.admin-table th.sortable .sort-arrow{margin-left:4px;color:var(--accent-hover);}
.admin-table tbody td{padding:11px 14px;border-bottom:1px solid var(--border);vertical-align:middle;}
.admin-table tbody tr:last-child td{border-bottom:none;}
.admin-table tbody tr.row-clickable{cursor:pointer;}
.admin-table tbody tr.row-clickable:hover{background:var(--elevated-2);}
.admin-table tfoot td{padding:11px 14px;font-weight:700;border-top:1px solid var(--border-strong);background:var(--elevated-2);}
.mono-id{font-family:var(--font-mono);font-size:12px;color:var(--muted);}
.tabular{font-variant-numeric:tabular-nums;}
.table-empty-row td{padding:36px 14px;text-align:center;color:var(--muted);font-size:13px;}
.table-actions-cell{display:flex;gap:6px;flex-wrap:wrap;}

/* ---------- PII masking ---------- */
.pii-cell{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.pii-masked{font-family:var(--font-mono);font-size:12px;color:var(--muted);}
.pii-revealed{font-family:var(--font-mono);font-size:12px;color:var(--text);}
.pii-reveal-btn{
  font-size:11px;font-weight:700;color:var(--accent-hover);background:none;
  border:none;cursor:pointer;padding:2px 4px;white-space:nowrap;
}
.pii-reveal-btn:hover{text-decoration:underline;}
.pii-tracked-note{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:0.04em;}

/* ---------- slide-in drawer (user detail) ---------- */
.drawer-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,0.55);z-index:90;
  display:flex;justify-content:flex-end;
}
.drawer-panel{
  width:100%;max-width:480px;min-height:100vh;background:var(--elevated);
  border-left:1px solid var(--border-strong);overflow-y:auto;padding:24px;
  box-shadow:-8px 0 32px rgba(0,0,0,0.32); /* modal + drawer are the only shadowed surfaces */
}
.drawer-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:6px;}
.drawer-title{font-family:var(--font-display);font-size:20px;font-weight:700;letter-spacing:-0.02em;margin:0 0 4px;}
.drawer-subtitle{font-size:12px;color:var(--muted);margin:0;}
.drawer-close{background:none;border:none;color:var(--muted);cursor:pointer;font-size:22px;line-height:1;padding:4px;min-height:32px;}
.drawer-close:hover{color:var(--text);}
.drawer-section{margin-top:22px;}
.drawer-section-title{font-size:11px;text-transform:uppercase;letter-spacing:0.05em;color:var(--muted);font-weight:700;margin:0 0 10px;}
.drawer-kv-row{display:flex;justify-content:space-between;gap:10px;font-size:13px;padding:7px 0;border-bottom:1px solid var(--border);}
.drawer-kv-row:last-child{border-bottom:none;}
.drawer-kv-row span:first-child{color:var(--muted);}
.drawer-kv-row span:last-child{font-weight:600;text-align:right;}
.drawer-list{display:flex;flex-direction:column;gap:8px;}
.drawer-list-row{font-size:12px;color:var(--muted);padding:6px 0;border-bottom:1px solid var(--border);}
.drawer-list-row:last-child{border-bottom:none;}
.drawer-list-row b{color:var(--text);font-weight:600;}
.drawer-actions{display:flex;flex-direction:column;gap:8px;}
.drawer-actions .btn{width:100%;justify-content:flex-start;}

/* ---------- typed-confirm (guarded action) modal ---------- */
.confirm-type-label{font-size:12px;font-weight:600;color:var(--muted);margin:14px 0 6px;}
.confirm-type-target{font-family:var(--font-mono);background:var(--elevated-2);border:1px solid var(--border-strong);border-radius:6px;padding:2px 7px;color:var(--text);}
.confirm-warning{
  background:rgba(255,107,107,0.10);border:1px solid rgba(255,107,107,0.28);
  border-radius:var(--radius-control);padding:10px 14px;font-size:13px;color:var(--danger);
  font-weight:600;margin-bottom:6px;
}

/* ---------- kill switches ---------- */
.kill-switch-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px solid var(--border);}
.kill-switch-row:last-child{border-bottom:none;}
.kill-switch-info{flex:1;min-width:0;}
.kill-switch-name{font-size:14px;font-weight:700;margin:0 0 3px;}
.kill-switch-desc{font-size:12px;color:var(--muted);margin:0;line-height:1.45;}
.switch-btn{
  position:relative;width:46px;height:27px;border-radius:999px;
  border:1px solid var(--border-strong);background:var(--elevated-2);
  cursor:pointer;flex-shrink:0;padding:0;
}
.switch-btn::after{
  content:"";position:absolute;top:2px;left:2px;width:21px;height:21px;
  border-radius:50%;background:var(--muted);transition:transform .15s ease,background .15s ease;
}
.switch-btn.switch-on{background:rgba(255,107,107,0.16);border-color:var(--danger);}
.switch-btn.switch-on::after{transform:translateX(19px);background:var(--danger);}
.switch-status{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.04em;color:var(--muted);white-space:nowrap;}
.switch-status.switch-status-on{color:var(--danger);}

/* ---------- error / activity feed ---------- */
.feed-list{display:flex;flex-direction:column;}
.feed-row{display:flex;gap:12px;padding:9px 0;border-bottom:1px solid var(--border);font-size:12px;align-items:flex-start;}
.feed-row:last-child{border-bottom:none;}
.feed-time{font-family:var(--font-mono);color:var(--muted);flex-shrink:0;white-space:nowrap;}
.feed-msg{color:var(--text);}

/* ---------- safety queue severity rows ---------- */
.stripe-row{
  display:flex;gap:14px;align-items:flex-start;padding:14px 16px;
  border:1px solid var(--border);border-left:4px solid var(--border-strong);
  border-radius:var(--radius-control);margin-bottom:10px;background:var(--elevated);
  flex-wrap:wrap;
}
.stripe-row.stripe-high{border-left-color:var(--danger);}
.stripe-row.stripe-med{border-left-color:var(--amber);}
.stripe-row.stripe-low{border-left-color:var(--muted);}
.stripe-body{flex:1;min-width:220px;}
.stripe-title{font-size:14px;font-weight:700;margin:0 0 4px;}
.stripe-meta{font-size:12px;color:var(--muted);margin:0 0 8px;line-height:1.5;}
.stripe-note{font-size:11px;color:var(--muted);font-style:italic;margin:6px 0 0;}
.stripe-actions{display:flex;gap:8px;flex-wrap:wrap;flex-shrink:0;align-items:flex-start;}

/* ---------- audit log ---------- */
.audit-lock-note{
  display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);
  margin-bottom:14px;padding:10px 14px;background:var(--elevated-2);
  border:1px solid var(--border);border-radius:var(--radius-control);
}
.audit-lock-note svg{flex-shrink:0;width:15px;height:15px;color:var(--es-ok);}
.audit-detail{font-size:12px;color:var(--muted);}
.audit-detail b{color:var(--text);font-weight:600;}

/* ---------- nav count badge ---------- */
.nav-item-count{
  margin-left:auto;background:rgba(245,158,11,0.2);color:var(--amber);
  font-size:11px;font-weight:700;padding:2px 7px;border-radius:999px;flex-shrink:0;
}

/* ---------- section card spacing helper ---------- */
.admin-section{margin-bottom:24px;}
.admin-two-col{display:grid;grid-template-columns:1fr;gap:20px;}
@media (min-width: 1040px){ .admin-two-col{grid-template-columns:1fr 1fr;} }

@media (max-width: 768px){
  .drawer-panel{max-width:100%;}
  .kpi-grid{grid-template-columns:repeat(2, 1fr);}
  .totp-box{width:38px;height:46px;font-size:17px;}
  /* admin.html ships no tabbar fallback (desktop-first back office) — keep the sidebar nav
     visible down to 768px instead of the consumer-app rule that hides it in favor of a tabbar. */
  .admin-shell .sidebar{display:flex;width:184px;padding:16px 10px;}
  .admin-shell .topbar-brand-mobile{display:none;}
  .admin-shell .main-content{padding:18px;}
  .admin-shell .sidebar-footer .admin-demo-flag{white-space:normal;text-align:center;line-height:1.4;}
}

/* ---------- real-mode (opt-in real backend, golden path only) ---------- */
/* Deliberately distinct border from a normal .card — a real-mode surface must always be
   visually identifiable at a glance from every demo card around it (two-ledgers rule: the
   user must never mistake a demo card for a real one, or vice versa). */
.real-account-card{border:1px solid var(--accent);}
.badge-real{background:rgba(34,197,94,0.16);color:var(--success);}
.real-upload-block{padding-top:4px;}
.real-wall-message{
  font-size:13px;line-height:1.5;color:var(--amber);
  background:rgba(245,158,11,0.1);border:1px solid rgba(245,158,11,0.25);
  border-radius:10px;padding:10px 12px;
}
.real-jobs-list{border-top:1px solid var(--border);padding-top:10px;}
.real-job-row{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:6px 0;border-bottom:1px solid var(--border);
}
.real-job-row:last-child{border-bottom:none;}