/* 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);}

.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;
}

.batch-grid{
  display:grid;grid-template-columns:repeat(2, 1fr);gap:14px;margin-bottom:24px;
}
@media (min-width: 640px) and (max-width: 899px){
  .batch-grid{grid-template-columns:repeat(3, 1fr);}
}

/* 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;}
  .batch-grid .video-hook{
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0;min-height:0;
  }
  .batch-grid .craft-note,
  .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;}
}

.video-card{padding:0;overflow:hidden;display:flex;flex-direction:column;}
.video-thumb{
  aspect-ratio:9/16;position:relative;display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.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:12px;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;
}
.video-hook{font-family:var(--font-mono);font-size:13px;line-height:1.4;margin:0;min-height:36px;} /* R3: generated script text renders in the mono face */
.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;
}
.allocator-substatus{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;display:block;}
.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-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;}
.plan-prompt-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px;}
.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);}

/* ---------- 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);}
.yesterday-list{display:flex;flex-direction:column;gap:14px;margin-top:10px;}
.yesterday-row{border-bottom:1px solid var(--border);padding-bottom:14px;}
.yesterday-row:last-child{border-bottom:none;padding-bottom:0;}
.yesterday-row-info{margin-bottom:8px;}
.yesterday-hook{font-size:13px;line-height:1.4;margin:6px 0 2px;}
.bucket-row{display:flex;gap:6px;flex-wrap:wrap;}
.bucket-btn{
  border:1px solid var(--border-strong);background:var(--elevated-2);color:var(--text);
  font-size:12px;font-weight:600;padding:8px 10px;border-radius:var(--radius-control);
  cursor:pointer;min-height:38px;flex:1;min-width:64px;
}
.bucket-btn:hover{background:#1d1d24;}
.bucket-btn-active{background:var(--accent);color:#070912;border-color:var(--accent);}
.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;}

.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;}
.yesterday-actions{display:flex;align-items:center;gap:12px;margin-top:10px;flex-wrap:wrap;}

/* 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{height:150px;border-radius:12px;background-size:cover;background-position:center;margin-bottom:12px;position:relative;}
.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:80px;border-radius:8px;margin-bottom:6px;}
.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;}
}