/* ============================================================
   Wepeka Brandlab — design tokens
   Palette + type pulled straight from wepeka.com (warm near-black,
   amber accent, Grift Black display / JUST Sans body)
   ============================================================ */
@font-face{ font-family:"Grift Black"; src:url("../fonts/grift-black.woff") format("woff"), url("../fonts/grift-black.ttf") format("truetype"); font-weight:900; font-style:normal; font-display:swap; }
@font-face{ font-family:"JUST Sans"; src:url("../fonts/JUST Sans Regular.woff") format("woff"), url("../fonts/JUST Sans Regular.otf") format("opentype"); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"JUST Sans"; src:url("../fonts/JUST Sans SemiBold.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; }
@font-face{ font-family:"JUST Sans"; src:url("../fonts/JUST Sans Bold.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }
@font-face{ font-family:"JUST Sans"; src:url("../fonts/JUST Sans ExBold.woff2") format("woff2"); font-weight:800; font-style:normal; font-display:swap; }

:root{
  color-scheme: dark;
  --bg: #0c0b0a;
  --bg-raised: #131211;
  --surface: #171614;
  --surface-2: #1d1b18;
  --surface-hover: #211f1b;
  --border: #2c2925;
  --border-soft: #221f1c;
  --text: #f6f4f1;
  --text-muted: #a19b92;
  --text-faint: #8a8479;
  --accent: #ffa52b;
  --accent-text: #1c1610;
  --accent-soft: rgba(255,165,43,.12);
  --health-good: #3ddc84;
  --health-good-soft: rgba(61,220,132,.14);
  --health-average: #ffc94a;
  --health-average-soft: rgba(255,201,74,.14);
  --health-poor: #ff6a5c;
  --health-poor-soft: rgba(255,106,92,.14);
  --info: #7ab8ff;

  --tofu: #7ab8ff;
  --mofu: #ffc94a;
  --bofu: #ff8a5c;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --font-display: "Grift Black", "Times New Roman", serif;
  --font-body: "JUST Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --brand-tint: var(--accent);
  --brand-tint-text: var(--accent-text);
  --brand-tint-fg: var(--accent);

  --shadow-lg: 0 24px 60px -20px rgba(0,0,0,.6);
  --shadow-md: 0 12px 30px -14px rgba(0,0,0,.5);
  --shadow-sm: 0 2px 10px rgba(0,0,0,.25);

  --header-h: 64px;

  /* Grow Brand track accents (js/campaign-metrics.js TRACK_ICON) — a
     separate hue per track so a Social/Community/Sales Growth campaign card
     is tellable apart at a glance (see .campaign-card--track-*). Not reused
     from --health-good/average/poor: those mean "performing well or not",
     a different axis from "which track is this". */
  --track-social: #5b9bf0;
  --track-social-soft: rgba(91,155,240,.14);
  --track-community: #c08af5;
  --track-community-soft: rgba(192,138,245,.14);
  --track-sales: #3ddc84;
  --track-sales-soft: rgba(61,220,132,.14);
}

/* Light mode — same warm palette, inverted. --accent, --tofu/--mofu/--bofu
   and --health-good/average/poor (plus --info) are deepened here (vs. the
   dark-mode values above) because they're used directly as text/icon color
   throughout the app, not just as button fills — the light amber/blue/etc
   that pops on near-black would be too low-contrast as text on a
   near-white surface. The soft (rgba-alpha) badge-background variants are
   left as-is: a pale tint wash reads fine over either a dark or a light
   surface. */
:root[data-theme="light"]{
  color-scheme: light;
  --bg: #faf8f4;
  --bg-raised: #ffffff;
  --surface: #ffffff;
  --surface-2: #f2efe7;
  --surface-hover: #ebe6db;
  --border: #e2dbcc;
  --border-soft: #ece6da;
  --text: #201c17;
  --text-muted: #6d655a;
  --text-faint: #756d5c;
  --accent: #b4530a;
  --accent-text: #fffaf3;
  --accent-soft: rgba(180,83,10,.13);
  --health-good: #1f9d5c;
  --health-average: #a6780a;
  --health-poor: #c8402c;
  --info: #2f6fb8;
  --tofu: #2f6fb8;
  --mofu: #a6780a;
  --bofu: #c25a2f;
  --shadow-lg: 0 24px 60px -20px rgba(30,24,14,.18);
  --shadow-md: 0 12px 30px -14px rgba(30,24,14,.14);
  --shadow-sm: 0 2px 10px rgba(30,24,14,.08);

  --track-social: #2f6fb8;
  --track-social-soft: rgba(47,111,184,.13);
  --track-community: #8143b8;
  --track-community-soft: rgba(129,67,184,.13);
  --track-sales: #1f9d5c;
  --track-sales-soft: rgba(31,157,92,.13);
}

*,*::before,*::after{ box-sizing: border-box; }
html,body{ height: 100%; }
body{
  margin: 0;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  transition: background .5s ease;
}
/* Wash sampled from the current brand's own logo/avatar — set via
   --brand-tint in JS. Two soft glows (top-left + a lower one on the right)
   instead of one flat radial, so it reads as a real gradient behind the
   dark-glass widgets (.glass-card/.dash-widget-card) rather than a single
   spotlight — their own backdrop-blur picks this color up too. Kept
   noticeably fainter in light theme, where most of what sits on top is
   still plain readable text/forms, not glass. */
body.has-brand-tint{
  background:
    radial-gradient(1300px 650px at 14% -10%, color-mix(in srgb, var(--brand-tint) 18%, transparent), transparent 58%),
    radial-gradient(1000px 800px at 100% 45%, color-mix(in srgb, var(--brand-tint) 9%, transparent), transparent 60%),
    #060605;
}
:root[data-theme="light"] body.has-brand-tint{
  background:
    radial-gradient(1100px 550px at 12% -8%, color-mix(in srgb, var(--brand-tint) 10%, transparent), transparent 60%),
    var(--bg);
}

/* All-brands home — the same indigo/violet wash as wepeka.com's own
   Brandlab tab (content-os/page.tsx's MeshHeroBackground: a near-black
   base plus two soft indigo/violet glows), minus that page's animated 3D
   blob — just the color wash, done as plain drifting blurred circles so it
   costs nothing beyond cheap GPU-composited transforms. Sized in vmax (not
   fixed px) so the wash always overflows every edge of the viewport
   instead of reading as a small patch on a wide/high-res screen. */
/* Colours + intensity come from --bgb-* (set by js/brands-bg.js from the
   admin's "Background Brand" setting); the fallbacks are the default preset.
   Mounted on <body> so position:fixed is truly the viewport. */
.brands-bg{ position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; background: linear-gradient(160deg, var(--bgb-base-1, #0b0a14), var(--bgb-base-2, #050505)); }
.brands-bg-preview{ position:relative; inset:auto; z-index:0; height:170px; border-radius: var(--radius-md, 14px); border:1px solid var(--border); }
:root[data-theme="light"] .brands-bg:not(.brands-bg-preview){ background: linear-gradient(160deg, #f5f3ff, #ffffff); }
.brands-bg .bg-blob{ position:absolute; border-radius:50%; filter:blur(90px); opacity: var(--bgb-glow, .16); will-change:transform; }
.brands-bg .bg-blob-1{ width:70vmax; height:70vmax; top:-24vmax; left:-18vmax; background: var(--bgb-blob-1, #6366f1); animation: blob-float-1 18s ease-in-out infinite alternate; }
.brands-bg .bg-blob-2{ width:62vmax; height:62vmax; top:-20vmax; right:-16vmax; background: var(--bgb-blob-2, #7c3aed); animation: blob-float-2 22s ease-in-out infinite alternate; }
.brands-bg .bg-blob-3{ width:58vmax; height:58vmax; bottom:-22vmax; left:22vmax; background: var(--bgb-blob-3, #4f46e5); animation: blob-float-3 20s ease-in-out infinite alternate; }
.brands-bg-preview .bg-blob{ filter:blur(40px); }
.brands-bg-preview .bg-blob-1{ width:60%; height:120%; top:-40%; left:-10%; }
.brands-bg-preview .bg-blob-2{ width:55%; height:120%; top:-40%; right:-10%; }
.brands-bg-preview .bg-blob-3{ width:50%; height:110%; bottom:-50%; left:25%; }
:root[data-theme="light"] .brands-bg:not(.brands-bg-preview) .bg-blob{ opacity:.5; }
:root[data-theme="light"] .brands-bg:not(.brands-bg-preview) .bg-blob-1{ background:#818cf8; }
:root[data-theme="light"] .brands-bg:not(.brands-bg-preview) .bg-blob-2{ background:#c4b5fd; }
:root[data-theme="light"] .brands-bg:not(.brands-bg-preview) .bg-blob-3{ background:#ede9fe; }
@media (prefers-reduced-motion: reduce){ .brands-bg .bg-blob{ animation:none; } }
@keyframes blob-float-1{ 0%{ transform: translate(0,0); } 100%{ transform: translate(4%, 6%); } }
@keyframes blob-float-2{ 0%{ transform: translate(0,0); } 100%{ transform: translate(-5%, 4%); } }
@keyframes blob-float-3{ 0%{ transform: translate(0,0); } 100%{ transform: translate(3%, -5%); } }
img{ max-width: 100%; display:block; }
a{ color: inherit; text-decoration: none; }
button{ font-family: inherit; }
input,select,textarea{ font-family: inherit; font-size: inherit; color: inherit; }
h1,h2,h3,h4{ font-family: var(--font-display); font-weight: 900; margin: 0; letter-spacing: -0.01em; }
::selection{ background: var(--accent); color: var(--accent-text); }

:focus-visible{ outline: 2px solid var(--brand-tint); outline-offset: 2px; border-radius: 4px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-tint) 25%, transparent); }

/* ============================================================
   Glow scrollbar + reusable glow animation
   ============================================================ */
html{ scrollbar-width: thin; scrollbar-color: var(--brand-tint) var(--bg-raised); }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background: var(--bg-raised); }
::-webkit-scrollbar-thumb{ background: var(--brand-tint); border-radius:999px; border:2px solid var(--bg-raised); box-shadow: 0 0 6px color-mix(in srgb, var(--brand-tint) 55%, transparent); }
::-webkit-scrollbar-thumb:hover{ box-shadow: 0 0 10px color-mix(in srgb, var(--brand-tint) 80%, transparent); }
.creator-sidebar-list::-webkit-scrollbar,
.table-scroll::-webkit-scrollbar,
.ig-picker-grid::-webkit-scrollbar,
.modal-body::-webkit-scrollbar,
.drawer-body::-webkit-scrollbar{ width:6px; height:6px; }

/* Parameterized via --glow-color so any element can opt in with its own
   tint (brand color, or the health-poor red for "needs attention") instead
   of duplicating this keyframe per color, following the same pattern the
   existing .status-pill status-glow animation already established. */
@keyframes glow-pulse{
  0%,100%{ box-shadow: 0 0 8px var(--glow-color, rgba(255,165,43,.35)); }
  50%{ box-shadow: 0 0 20px var(--glow-color, rgba(255,165,43,.6)); }
}
.glow{ animation: glow-pulse 2.4s ease-in-out infinite; }

.icon-btn.has-overdue{ --glow-color: color-mix(in srgb, var(--health-poor) 55%, transparent); animation: glow-pulse 2.4s ease-in-out infinite; }

.tour-prompt{ position:relative; max-height:0; opacity:0; overflow:hidden; transition: max-height .25s ease, opacity .25s ease; background: var(--accent); }
.tour-prompt.in{ max-height:60px; opacity:1; }
.tour-prompt-inner{ display:flex; align-items:center; gap:10px; max-width:1100px; margin:0 auto; padding:12px 20px; color: var(--accent-text); font-size:13px; font-weight:600; }
.tour-prompt-inner svg{ flex:none; }
.tour-prompt-inner span{ flex:1; }
.tour-prompt-cta{ flex:none; background: var(--accent-text); color: var(--accent); border:none; font-weight:700; }
.tour-prompt-close{ flex:none; color: var(--accent-text); }
.tour-prompt-close:hover{ background: rgba(0,0,0,.1); }

/* "Ekstrak dari foto" (js/views/brand-guidelines.js Color step) — an easy
   button to miss sitting next to the plain hex input, even though it's
   the fastest way in for someone who already has a reference photo. */
#btn-extract-photo{ --glow-color: color-mix(in srgb, var(--accent) 55%, transparent); border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); animation: glow-pulse 2.4s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *,*::before,*::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   Layout shell
   ============================================================ */
#app{ min-height: 100vh; display:flex; flex-direction:column; }

.topbar{
  position: sticky; top:0; z-index: 40;
  height: var(--header-h);
  display:flex; align-items:center; gap:20px;
  padding: 0 28px;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-soft);
}
/* Light mode only — dark mode's near-black bg already reads as neutral
   chrome, but light mode's pale cream top bar looked disconnected from
   whichever brand is open, so it picks up a soft wash of that brand's own
   --brand-tint (set per-brand in js/layout.js) instead of staying plain. */
:root[data-theme="light"] .topbar{
  background: color-mix(in srgb, var(--brand-tint) 14%, color-mix(in srgb, var(--bg) 85%, transparent));
}
.brand-mark{
  display:flex; align-items:center; gap:10px;
  font-family: var(--font-display); font-weight:900; font-size:18px;
  white-space: nowrap; flex: none;
}
.brand-mark .dot{ width:9px; height:9px; border-radius:50%; background: var(--accent); }
/* The Wepeka wordmark: the PNG is used only as a MASK (its shape), and the
   colors come from CSS — "We" (the left 40.25% of the 400px-wide image,
   ending between the "e" at x=159 and the "p" at x=163) takes the active
   brand's color, "peka." takes the theme's text color. The old approach
   inverted the whole PNG in light mode, which turned the orange "We" blue.
   Outside a brand (brand list, login) --brand-tint* fall back to --accent.
   Dark: --brand-tint-fg (lightened only when the brand color is too dark
   to see). Light: --brand-tint-fg-light (darkened only when too pale). */
.brand-logo{
  --logo-h: 22px;
  --logo-we: var(--brand-tint-fg, var(--accent));
  display:block; flex:none; height: var(--logo-h); width: calc(var(--logo-h) * 4);
  background: linear-gradient(90deg, var(--logo-we) 0 40.25%, var(--text) 40.25% 100%);
  -webkit-mask: url("../assets/wepeka-logo.png") center / 100% 100% no-repeat;
          mask: url("../assets/wepeka-logo.png") center / 100% 100% no-repeat;
}
:root[data-theme="light"] .brand-logo{ --logo-we: var(--brand-tint-fg-light, var(--brand-tint, var(--accent))); }
.brand-mark-divider{ width:1px; height:18px; background: var(--border); }
.topbar-sep{ width:1px; align-self:stretch; margin: 14px 0; background: var(--border); }

.brand-switch{
  display:flex; align-items:center; gap:8px;
  padding: 7px 14px 7px 8px;
  border:1px solid var(--border); border-radius: var(--radius-pill);
  background: var(--surface); cursor:pointer;
  font-size: 13px; font-weight:600;
  max-width: 240px; flex: none;
}
/* Base look for every avatarHTML() — it only sets size inline, so any spot
   without its own .x .avatar rule (Beranda header, brand menu, new-brand
   preview) used to render a bare floating letter. */
.avatar{
  display:flex; align-items:center; justify-content:center; flex:none;
  background: var(--brand-tint); color: var(--brand-tint-text);
  font-family: var(--font-display); font-weight:800; object-fit:cover; overflow:hidden;
}
.brand-switch .avatar{
  width:22px; height:22px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:800; font-family: var(--font-display);
  background: var(--brand-tint); color: var(--brand-tint-text);
  object-fit: cover;
}
.brand-switch span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.brand-switch:hover{ background: var(--surface-hover); box-shadow: 0 0 14px color-mix(in srgb, var(--brand-tint) 30%, transparent); }

.tabs{
  display:flex; align-items:center; gap:4px; margin-left: 4px;
  /* Tabs must never shrink below their label+icon content — they used to
     (min-width:0, flex-shrink:1), which let the flex row squeeze this
     container down to a sliver (as low as ~24px at ~900px viewport width)
     while overflow-x:auto silently clipped everything but a fraction of
     the first tab, with no visible scrollbar to hint more was there. Below
     1240px (see the .bottom-nav breakpoint) the tabs move to the bottom
     bar instead, so this container only ever needs to render at its full
     natural width. */
  min-width:max-content; flex-shrink:0; overflow-x:auto; scrollbar-width:none;
}
.tabs::-webkit-scrollbar{ display:none; }
/* Konten's own sub-tab strip (js/views/content-os.js contentTabsHTML)
   reuses .tabs/.tab, but on a phone all five sub-tabs ("Tulisan Cepat"
   being the long one) don't fit — the strip scrolls horizontally, but
   with no scrollbar and no visual cue that used to just look like the
   last tab was cut off mid-word with nothing more to see. This wrapper
   adds a soft fade over the right edge (fixed in place, not part of the
   scrollable content) as a "there's more" affordance; it's harmless to
   leave showing even once fully scrolled right, same as most native
   scrollable-tab-strip patterns. */
.cos-tabs-wrap{ position:relative; }
.cos-tabs-wrap::after{
  content:""; position:absolute; top:0; right:0; bottom:0; width:28px;
  background: linear-gradient(to right, transparent, var(--bg) 88%);
  pointer-events:none;
}
.tab{
  padding: 8px 14px; border-radius: var(--radius-pill);
  font-size: 13.5px; font-weight:600; color: var(--text-muted);
  display:flex; align-items:center; gap:7px; flex: none; white-space:nowrap;
  transition: color .12s, background .12s;
}
.tab:hover{ color: var(--text); background: var(--surface); }
.tab.active{ color: var(--brand-tint-text); background: var(--brand-tint); }
.tab.is-disabled{ opacity:.45; cursor:not-allowed; }
.tab.is-disabled:hover{ background:none; color: var(--text-muted); }

/* Icon-only topbar tabs — the middle band between the bottom-nav breakpoint
   (JS_TOPBAR_ICONONLY_MIN below) and ~1240px, where the full row (logo +
   brand switcher + 4 labeled tabs + plan badge/bell/updates/menu) doesn't
   fit but there's no need to drop to the phone bottom-nav either: shrinking
   the brand switcher and hiding (not removing) the tab labels buys back
   enough width. font-size:0 collapses the label's rendered box to nothing
   without display:none/visibility:hidden/aria-hidden, so the text node
   stays in the DOM and in the accessible name computation for screen
   readers — the closest CSS-only equivalent to an .sr-only span available
   without adding a wrapping element in js/layout.js (out of scope here).
   The icon keeps its size because js/icons.js sets width/height as SVG
   attributes, not in font-size-relative units. Scoped to .topbar .tabs so
   Konten's own sub-tab strip (content-os.js, same .tabs/.tab classes)
   always keeps its labels. */
@media (min-width: 721px) and (max-width: 1240px) {
  .topbar .brand-switch{ max-width: 120px; }
  .topbar .tabs{ gap:2px; }
  .topbar .tabs .tab{ font-size:0; gap:0; padding:9px 11px; }
}
.tab svg{ width:16px; height:16px; }

.topbar-right{ margin-left:auto; display:flex; align-items:center; gap:10px; flex:none; }

.icon-btn{
  position:relative;
  width:38px; height:38px; border-radius: var(--radius-pill);
  display:flex; align-items:center; justify-content:center;
  background: var(--surface); border:1px solid var(--border);
  color: var(--text); cursor:pointer;
}
.icon-btn:hover{ background: var(--surface-hover); }
.icon-btn svg{ width:18px; height:18px; }

main.view{ flex:1; padding: 36px 28px 80px; max-width: 1240px; margin: 0 auto; width:100%; }
main.view.wide{ max-width: 1440px; }

/* ============================================================
   Buttons / form controls
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 10px 18px; border-radius: var(--radius-md);
  font-size: 13.5px; font-weight:700; cursor:pointer; border:1px solid transparent;
  transition: transform .08s ease, background .12s, border-color .12s;
  white-space: nowrap;
}
.btn:active{ transform: scale(.98); }
.btn svg{ width:16px; height:16px; flex:none; }
.btn-primary{ background: var(--brand-tint); color: var(--brand-tint-text); }
.btn-primary:hover{ filter: brightness(1.06); box-shadow: 0 0 16px color-mix(in srgb, var(--brand-tint) 55%, transparent); }
.btn-secondary{ background: var(--surface); color: var(--text); border-color: var(--border); }
.btn-secondary:hover{ background: var(--surface-hover); }
/* What a button costs, on the button ("1 AI credit") — not in a tooltip. */
.btn-cost{ font-size:11px; font-weight:700; line-height:1.4; padding:1px 7px; border-radius:999px; background: var(--surface-2); color: var(--text-muted); white-space:nowrap; }
/* Tujuan page: Pelacak Penjualan as a labelled link under the intro. */
.camp-sales-link{ display:flex; align-items:center; gap:12px; max-width:560px; margin:0 0 24px; padding:10px 14px; min-height:44px; border:1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); color: var(--text); text-decoration:none; }
.camp-sales-link:hover{ border-color: var(--accent); }
.camp-sales-link-icon{ flex:none; width:32px; height:32px; border-radius:10px; display:grid; place-items:center; background: var(--accent-soft); color: var(--accent); }
.camp-sales-link-text{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.camp-sales-link-text b{ font-size:13.5px; }
.camp-sales-link-text small{ font-size:12px; color: var(--text-muted); line-height:1.4; }
.camp-sales-link > svg:last-child{ flex:none; color: var(--text-faint); }
/* Kalender's "Atur jadwal" menu: title, one line on what it does, cost. */
.menu.sched-menu{ width:min(320px, calc(100vw - 16px)); }
.sched-menu button{ align-items:flex-start; padding:10px; }
.sched-menu button > svg{ margin-top:2px; color: var(--accent); }
.sched-menu-text{ display:flex; flex-direction:column; align-items:flex-start; gap:3px; min-width:0; }
.sched-menu-text b{ font-size:13.5px; }
.sched-menu-text small{ font-size:12px; line-height:1.45; color: var(--text-muted); white-space:normal; }
.sched-menu-note{ margin:4px 10px 6px; padding-top:8px; border-top:1px solid var(--border); font-size:12px; line-height:1.45; color: var(--text-muted); }
.btn-ghost{ background: transparent; color: var(--text-muted); }
.btn-ghost:hover{ color: var(--text); background: var(--surface); }
.btn-danger{ background: var(--health-poor-soft); color: var(--health-poor); }
.btn-danger:hover{ filter: brightness(1.1); }
.btn-sm{ padding: 7px 12px; font-size:12.5px; }
.btn-block{ width:100%; }
.stage-big-action{ padding:20px; font-size:16px; gap:10px; }
.stage-script-display{ background: var(--surface-2); border:1px solid var(--border); border-radius: var(--radius-md); padding:20px; font-size:16px; line-height:1.7; margin-bottom:22px; max-height:50vh; overflow-y:auto; white-space:normal; }
.btn[disabled]{ opacity:.45; pointer-events:none; }
/* #6: Content OS "pakai caption/script" once clicked — stays legible
   (not dimmed like a normal disabled button) so the color change is the
   whole point: it's how you tell it's already been used. */
.btn.is-used[disabled]{ opacity:1; background: var(--health-good-soft); color: var(--health-good); border-color: var(--health-good); }

.field{ display:flex; flex-direction:column; gap:7px; margin-bottom:16px; }
.field label{ font-size:13px; font-weight:700; color: var(--text-muted); letter-spacing:normal; }
.field .hint{ font-size:12px; color: var(--text-faint); margin-top:-3px; }
.input,.select,.textarea{
  background: var(--surface); border:1px solid var(--border); color: var(--text);
  border-radius: var(--radius-md); padding: 11px 13px; width:100%;
}
.input:focus,.select:focus,.textarea:focus{ border-color: var(--accent); }
/* Placeholder text: the browser default (Chrome #A9A9A9) is only ~2.3:1 on
   the light theme's white inputs. --text-muted passes AA in both themes,
   on --surface (inputs) and --surface-2 (chat composer) alike. */
.input::placeholder,.select::placeholder,.textarea::placeholder,
.consultant-panel-input textarea::placeholder{ color: var(--text-muted); opacity:1; }
.password-field{ position:relative; }
.password-field .input{ padding-right:40px; }
.password-toggle-btn{
  position:absolute; right:4px; top:50%; transform:translateY(-50%);
  width:30px; height:30px; display:flex; align-items:center; justify-content:center;
  background:transparent; border:none; border-radius: var(--radius-sm);
  color: var(--text-faint); cursor:pointer;
}
.password-toggle-btn svg{ width:16px; height:16px; }
.password-toggle-btn:hover{ color: var(--text); background: var(--surface-hover); }
.textarea{ resize: vertical; min-height: 84px; line-height:1.5; }
.select{ appearance:none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a19b92' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position: right 12px center; padding-right:34px; }
.row-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.row-3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; }
@media (max-width: 720px){ .row-2,.row-3{ grid-template-columns:1fr; } }

.segmented{ display:flex; flex-wrap:wrap; background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-pill); padding:3px; gap:2px; }
.segmented button{ min-width:0; }
.segmented button{ flex:1; border:0; background:transparent; color: var(--text-muted); padding:8px 12px; border-radius: var(--radius-pill); font-size:12.5px; font-weight:700; cursor:pointer; white-space:nowrap; }
.segmented button.active{ background: var(--text); color: var(--bg); }
/* Size each option from its own label: flex:1 (basis 0) split the pill evenly, so "Semua Konten" ran into "Terbit". */
.segmented button{ flex:1 0 auto; }

.chip-select{ display:flex; flex-wrap:wrap; gap:8px; }
.chip-select button{ border:1px solid var(--border); background: var(--surface); color: var(--text-muted); padding:8px 14px; border-radius: var(--radius-pill); font-size:13px; font-weight:700; cursor:pointer; }
.chip-select button.active{ background: var(--text); color: var(--bg); border-color: var(--text); }

/* Guided-mode funnel picker in Creator — plain-language cards instead of
   TOFU/MOFU/BOFU jargon chips, same underlying funnel value either way. */
.creator-funnel-guided{ display:flex; flex-direction:column; gap:8px; }
.creator-funnel-guided-option{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-align:left; padding:10px 14px; border-radius: var(--radius-md); border:1px solid var(--border); background: var(--surface); cursor:pointer; }
.creator-funnel-guided-option strong{ font-size:13px; }
.creator-funnel-guided-option span{ font-size:11.5px; color: var(--text-muted); }
.creator-funnel-guided-option.active{ border-color: var(--accent); background: var(--accent-soft); }
.creator-funnel-guided-option.active strong{ color: var(--accent); }

.checkbox-chip{ display:inline-flex; align-items:center; gap:7px; border:1px solid var(--border); background: var(--surface); color: var(--text); padding:8px 14px; border-radius: var(--radius-pill); font-size:13px; font-weight:700; cursor:pointer; }
.checkbox-chip svg{ width:14px; height:14px; }
.checkbox-chip input[type=checkbox]{ width:14px; height:14px; margin:0; }
.checkbox-chip.disabled{ opacity:.5; cursor:not-allowed; }
.checkbox-chip:has(input:checked){ border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }

/* ============================================================
   Cards / surfaces
   ============================================================ */
.card{ background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-lg); padding:22px; }
.card-tight{ padding:16px 18px; }

.page-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:28px; flex-wrap:wrap; }
.page-head h1{ font-size: 30px; }
.page-eyebrow{ font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color: var(--text-muted); margin-bottom:8px; }
.page-sub{ color: var(--text-muted); font-size:14px; margin-top:6px; max-width: 60ch; }

.stat-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:14px; margin-bottom: 28px; }
@media (max-width: 980px){ .stat-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .stat-grid{ grid-template-columns: 1fr; } }
.stat{ background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-lg); padding:18px 20px; }
.stat .label{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color: var(--text-muted); }
.stat .value{ font-family: var(--font-display); font-size:30px; font-weight:700; margin-top:8px; }
.stat .value small{ font-size:15px; color: var(--text-muted); font-family: var(--font-body); font-weight:600; }
.stat .sub{ font-size:12px; color: var(--text-faint); margin-top:4px; }

.section-title{ display:flex; align-items:center; justify-content:space-between; margin: 36px 0 14px; }
.section-title h2{ font-size:19px; }
.section-title .link{ font-size:12.5px; font-weight:700; color: var(--accent); }

/* Shared "glass widget" look, now the ONE art style for every box across
   Brandlab — collapsible widgets (.dash-widget-card / .weekly-work-card,
   js/widget-card.js) and every other card/tile/banner that isn't a
   collapsible widget but still needs to look consistent (.glass-card,
   added as a plain extra class with no structural change). Frosted dark
   glass (backdrop-blur over a translucent tint, so whatever sits behind it
   softly bleeds through), a thin breathing accent-glow border, and light
   text regardless of the site's own light/dark theme. Design tokens are
   re-pointed locally so every existing component nested inside (.card,
   .stat, .bar-row, .kv, .top-content-row, …) just inherits the right
   colors with no dark variant of its own needed. */
.dash-widget-card, .weekly-work-card, .glass-card{
  --surface: rgba(255,255,255,.05); --surface-2: rgba(255,255,255,.075); --surface-hover: rgba(255,255,255,.1);
  --border: rgba(255,255,255,.12); --border-soft: rgba(255,255,255,.09);
  --text: #f5f3ff; --text-muted: rgba(245,243,255,.66); --text-faint: rgba(245,243,255,.42);
  /* Follows whichever brand is open (--brand-tint, sampled from its logo or
     picked in Edit Brand → Brand Color; set on <body> in js/layout.js) so
     the glass isn't the same purple for every brand. --brand-tint itself
     falls back to the app's own --accent when no brand is in context (see
     :root below), so this degrades to the original amber outside a brand
     page instead of breaking. */
  --accent: var(--brand-tint); --accent-text: var(--brand-tint-text); --accent-soft: color-mix(in srgb, var(--brand-tint) 18%, transparent);
  --health-good: #3ddc84; --health-good-soft: rgba(61,220,132,.16);
  --health-average: #ffc94a; --health-average-soft: rgba(255,201,74,.16);
  --health-poor: #ff6a5c; --health-poor-soft: rgba(255,106,92,.16);
  --tofu: #7ab8ff; --mofu: #ffc94a; --bofu: #ff8a5c;
  position:relative; isolation:isolate; color: var(--text);
  border-radius: var(--radius-lg); padding:24px;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 1px color-mix(in srgb, var(--accent) 6%, transparent);
  animation: glass-glow-pulse 6s ease-in-out infinite;
  transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease, background .3s ease;
}
/* .glass-card (no internal decorative blob) can carry its own
   background/blur/clip directly — border-radius already clips an
   element's own background regardless of overflow, and there's no
   overflowing child content here, so overflow:hidden served no purpose
   except (wrongly) also clipping this element's own hover/pulse
   box-shadow glow flat at its edge. .dash-widget-card and
   .weekly-work-card DO have a blurred inset:-40% blob as a child that
   genuinely needs clipping, so for those two the background/blur/overflow
   live on a separate inner .dash-widget-backdrop layer instead (below),
   keeping the outer box-shadow free to bloom past the border. */
.glass-card{
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand-tint) 16%, rgb(18,16,24)) 0%, rgba(14,12,19,.85) 55%, rgba(6,5,9,.9) 100%);
  backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%);
}
.dash-widget-backdrop, .weekly-work-backdrop{
  position:absolute; inset:0; z-index:-1; overflow:hidden; border-radius:inherit; pointer-events:none;
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand-tint) 16%, rgb(18,16,24)) 0%, rgba(14,12,19,.85) 55%, rgba(6,5,9,.9) 100%);
  backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%);
}
/* Stacked widgets (not grid/flex tiles) still want their own bottom gap;
   .glass-card alone leaves spacing to whatever layout already places it in
   (grid gap, flex gap, …) so adding the class never nudges existing layout. */
.dash-widget-card, .weekly-work-card{ margin-bottom:28px; }
.dash-widget-card:hover, .weekly-work-card:hover, .glass-card:hover{
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) 35%, rgba(255,255,255,.14));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), var(--shadow-md), 0 0 16px 1px color-mix(in srgb, var(--accent) 14%, transparent);
}
/* Toned down on request (the glow read as too bright/distracting while
   reading a widget's own content) — kept as a faint "breathing" cue, not a
   spotlight. */
@keyframes glass-glow-pulse{
  0%, 100%{ box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 1px color-mix(in srgb, var(--accent) 6%, transparent); }
  50%{ box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 9px 1px color-mix(in srgb, var(--accent) 10%, transparent); }
}
.dash-widget-card .dash-widget-glow, .weekly-work-card .weekly-work-glow{ transition: opacity .2s ease; }
.dash-widget-card:hover .dash-widget-glow, .weekly-work-card:hover .weekly-work-glow{ opacity:.5; }
@media (prefers-reduced-motion: reduce){ .dash-widget-card, .weekly-work-card, .glass-card{ animation:none; } .dash-widget-card:hover, .weekly-work-card:hover, .glass-card:hover{ transform:none; } }
.dash-widget-glow{
  position:absolute; inset:-40%; z-index:-1; pointer-events:none; filter:blur(70px); opacity:.2;
  background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--accent) 60%, transparent), transparent 60%);
  animation: weekly-glow-move 14s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce){ .dash-widget-glow{ animation:none; } }
.dash-widget-card-head{ position:relative; z-index:1; display:flex; align-items:center; gap:14px; margin-bottom:18px; flex-wrap:wrap; }
@media (max-width:480px){ .dash-widget-card-actions{ margin-left:56px; } }
.dash-widget-card-icon{ flex:none; width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background: rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.1); color: var(--accent); }
.dash-widget-card-title{ flex:1; min-width:0; }
.dash-widget-card-title h2{ font-size:17px; color:#fff; margin:0 0 2px; }
.dash-widget-card-title p{ margin:0; font-size:12px; color: rgba(245,243,255,.62); }
.dash-widget-card-actions{ flex:none; display:flex; align-items:center; gap:10px; }
.dash-widget-card-actions .link{ font-size:12px; font-weight:700; color: var(--accent); }
.dash-widget-card-body{ position:relative; z-index:1; }
.dash-widget-collapse-btn{ width:26px; height:26px; flex:none; color: rgba(245,243,255,.6); }
.dash-widget-collapse-btn:hover{ background: rgba(255,255,255,.09); color:#fff; }

/* Teman pieces shared by the chat's Teman tab (js/consultant-panel.js), the
   Home Teman card (js/views/home.js) and the brand-memory modal
   (js/brand-memory.js): day headings, per-message delete, the recap card,
   the moments strip. */
.companion-day{ font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; text-align:center; color: var(--text-faint); margin:4px 0 2px; }
.consultant-msg-user{ position:relative; }
.companion-msg-del{ position:absolute; left:-26px; top:50%; transform:translateY(-50%); width:22px; height:22px; border:0; border-radius:50%; background:transparent; color: var(--text-faint); display:grid; place-items:center; cursor:pointer; opacity:0; transition: opacity .15s; }
.consultant-msg-user:hover .companion-msg-del, .companion-msg-del:focus-visible{ opacity:1; }
.companion-msg-del:hover{ color: var(--health-poor); background: var(--surface-2); }
@media (hover:none){ .companion-msg-del{ opacity:.6; } }
.companion-error{ margin:8px 0 0; font-size:12px; color: var(--health-poor); }
.companion-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.companion-greeting{ font-size:13.5px; line-height:1.55; margin:0; }
.companion-recap{ margin-top:8px; padding-top:8px; border-top:1px dashed var(--border); font-size:12.5px; }
.companion-recap.is-decided{ margin-top:6px; padding-top:6px; }
.companion-recap-pick{ margin:0 0 6px; font-size:11.5px; color: var(--text-muted); }
.companion-recap-item{ display:flex; align-items:flex-start; gap:8px; padding:5px 0; cursor:pointer; }
.companion-recap-item input[type=checkbox]{ margin:3px 0 0; width:14px; height:14px; flex:none; accent-color: var(--accent); }
.companion-recap-body{ min-width:0; line-height:1.45; }
.companion-recap-body .tag{ margin-right:6px; vertical-align:1px; }
.companion-moments{ margin-top:14px; padding-top:12px; border-top:1px solid var(--border); }
.companion-moments-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; }
.companion-moments-head .companion-moments-title{ margin:0; }
.companion-moments-title{ margin:0 0 6px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color: var(--text-faint); }
.companion-moment-row{ display:flex; align-items:center; gap:8px; padding:4px 0; }
.companion-moment-row .tag{ flex:none; }
.companion-moment-text{ flex:1; min-width:0; font-size:12px; color: var(--text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.companion-moment-action{ flex:none; display:inline-flex; align-items:center; gap:3px; border:0; background:transparent; color: var(--accent); font: inherit; font-size:11.5px; font-weight:700; cursor:pointer; padding:2px 4px; text-decoration:none; }
.companion-moment-action:hover{ text-decoration:underline; }

/* Brainstorm partner (js/views/brainstorm.js): threads rail | chat | saved
   ideas. Same bubble language as the Consultant FAB and the Companion. */
.bs-layout{ display:grid; grid-template-columns: 230px minmax(0,1fr) 270px; gap:20px; align-items:start; min-width:0; }
.bs-ideas, .bs-threads{ min-width:0; }
.bs-threads{ position:sticky; top:84px; }
.bs-threads-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; cursor:pointer; list-style:none; padding:4px 0 10px; }
.bs-threads-head::-webkit-details-marker{ display:none; }
.bs-threads-title{ display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color: var(--text-faint); }
.bs-thread-list{ display:flex; flex-direction:column; gap:4px; max-height:60vh; overflow-y:auto; }
.bs-thread-item{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; width:100%; text-align:left; padding:9px 11px; border-radius: var(--radius-md); border:1px solid transparent; background:transparent; color: var(--text); font: inherit; cursor:pointer; }
.bs-thread-item:hover{ background: var(--surface-2); }
.bs-thread-item.is-active{ background: var(--surface-2); border-color: var(--accent); }
.bs-thread-title{ font-size:12.5px; font-weight:600; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.bs-thread-meta{ display:inline-flex; align-items:center; gap:6px; font-size:11px; color: var(--text-faint); }
.bs-scope-chip{ display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius: var(--radius-pill); background: var(--surface-2); border:1px solid var(--border); font-size:12px; font-weight:700; }
.bs-card-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:8px; }
.bs-ideas{ position:sticky; top:84px; margin:0; }
.bs-ideas-head h2{ display:flex; align-items:center; gap:6px; font-size:14px; margin:0; }
.bs-saved-idea{ padding:10px 0; border-top:1px solid var(--border); }
.bs-saved-idea:first-of-type{ margin-top:8px; }
.bs-saved-text{ font-size:12.5px; line-height:1.45; }
@media (max-width:1100px){
  .bs-layout{ grid-template-columns: minmax(0,1fr) 260px; }
  .cp-page[data-mode="consultant"]{ grid-template-columns: minmax(0,1fr); }
  .bs-threads{ grid-column: 1 / -1; position:static; }
  .bs-thread-list{ flex-direction:row; flex-wrap:wrap; max-height:none; }
  .bs-thread-item{ width:auto; max-width:260px; }
}
@media (max-width:760px){
  .bs-layout{ grid-template-columns: minmax(0,1fr); }
  .bs-ideas{ position:static; }
}

/* Collapsed state matches the same glass family, just as a single row — an
   icon badge, the title, and a real one-line summary of what's hidden (not
   a bare pill), so tidying up never means losing track of what's there. */
.dash-widget-collapsed{
  --accent: var(--brand-tint);
  position:relative; isolation:isolate; width:100%; display:flex; align-items:center; gap:14px; text-align:left;
  padding:14px 18px; margin-bottom:20px; border-radius: var(--radius-lg); color:#f5f3ff;
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand-tint) 16%, rgb(18,16,24)) 0%, rgba(14,12,19,.85) 55%, rgba(6,5,9,.9) 100%);
  backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid rgba(255,255,255,.14); cursor:pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 1px color-mix(in srgb, var(--accent) 6%, transparent);
  animation: glass-glow-pulse 7s ease-in-out infinite;
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.dash-widget-collapsed:hover{
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 40%, rgba(255,255,255,.14));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), var(--shadow-md), 0 0 14px 1px color-mix(in srgb, var(--accent) 16%, transparent);
}
@media (prefers-reduced-motion: reduce){ .dash-widget-collapsed{ animation:none; } .dash-widget-collapsed:hover{ transform:none; } }
.dash-widget-collapsed-icon{ flex:none; width:38px; height:38px; border-radius:12px; display:grid; place-items:center; background: rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.1); color: var(--accent); }
.dash-widget-collapsed-text{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.dash-widget-collapsed-text b{ font-size:14px; color:#fff; }
.dash-widget-collapsed-text small{ font-size:12px; color: rgba(245,243,255,.62); font-weight:500; }
.dash-widget-collapsed > svg:last-child{ flex:none; color: rgba(245,243,255,.45); transform: rotate(-90deg); transition: transform .15s, color .15s; }

/* Same dark/brand-tinted language as .glass-card, deliberately WITHOUT the
   cost: no backdrop-filter (nothing to blur) and no glow animation. Meant
   for pages with many small boxes at once — Brand Builder/DNA/Guidelines
   wizard steps, Content OS's repeated field cards — where giving every one
   of them a full frosted-glass treatment would be genuinely heavy to
   render and visually noisy. Use .glass-card for the one or two "hero"
   boxes a section actually wants to draw the eye to; use this for
   everything else that just needs to not look like a mismatched light
   card next to them. */
.dark-surface{
  --surface: rgba(255,255,255,.045); --surface-2: rgba(255,255,255,.07); --surface-hover: rgba(255,255,255,.09);
  --border: rgba(255,255,255,.11); --border-soft: rgba(255,255,255,.08);
  --text: #f2f0f8; --text-muted: rgba(242,240,248,.64); --text-faint: rgba(242,240,248,.4);
  --accent: var(--brand-tint); --accent-text: var(--brand-tint-text); --accent-soft: color-mix(in srgb, var(--brand-tint) 16%, transparent);
  --health-good: #3ddc84; --health-good-soft: rgba(61,220,132,.14);
  --health-average: #ffc94a; --health-average-soft: rgba(255,201,74,.14);
  --health-poor: #ff6a5c; --health-poor-soft: rgba(255,106,92,.14);
  background: color-mix(in srgb, var(--brand-tint) 7%, rgb(17,15,22));
  border: 1px solid rgba(255,255,255,.09);
  /* !important: this card is always dark, in both themes, so its text must
     always be the light --text it scopes above — never the page's own
     (possibly near-black, in light theme) --text. Without it, a
     same-specificity same-or-later rule that sets its own `color: inherit`
     on the same element (e.g. .bb-hub-door, an <a>) wins the cascade tie
     and the card's h2/h1 titles inherit the wrong, near-invisible color. */
  color: var(--text) !important;
  transition: border-color .15s ease;
}
.dark-surface:hover{ border-color: color-mix(in srgb, var(--accent) 32%, rgba(255,255,255,.12)); }
.dash-widget-collapsed:hover > svg:last-child{ color: var(--accent); transform: rotate(-90deg) translateX(3px); }
@media (max-width:640px){ .dash-widget-collapsed-text small{ display:none; } }

/* ============================================================
   Guided mode — Home checklist (js/views/beginner-home.js)
   ============================================================ */
.guided-next-card{ border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.guided-next-card .icon-wrap{ width:48px; height:48px; border-radius:50%; background: var(--health-good-soft); color: var(--health-good); display:flex; align-items:center; justify-content:center; }
.guided-checklist{ display:flex; flex-direction:column; gap:2px; padding:8px; }
.guided-step{ display:flex; align-items:center; gap:14px; padding:14px; border-radius: var(--radius-md); color: var(--text); text-decoration:none; }
.guided-step:hover{ background: var(--surface-2); }
.guided-step-marker{ flex:none; width:26px; height:26px; border-radius:50%; border:2px solid var(--border); display:flex; align-items:center; justify-content:center; }
.guided-step-done .guided-step-marker{ border-color: var(--health-good); background: var(--health-good-soft); color: var(--health-good); }
.guided-step-current .guided-step-marker{ border-color: var(--accent); }
.guided-step-text{ flex:1; display:flex; flex-direction:column; gap:2px; min-width:0; }
.guided-step-text .t{ font-weight:700; font-size:14px; }
.guided-step-done .guided-step-text .t{ color: var(--text-muted); text-decoration: line-through; text-decoration-color: var(--border); }
.guided-step-text .m{ font-size:12px; color: var(--text-faint); }
.guided-step svg{ flex:none; color: var(--text-faint); }

/* ============================================================
   Badges / tags / health
   ============================================================ */
.tag{ display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius: var(--radius-pill); font-size:11.5px; font-weight:800; letter-spacing:.02em; text-transform:uppercase; }
.tag-tofu{ background: rgba(122,184,255,.14); color: var(--tofu); }
.tag-mofu{ background: rgba(255,201,74,.14); color: var(--mofu); }
.tag-bofu{ background: rgba(255,138,92,.14); color: var(--bofu); }
.tag-discount{ background: var(--health-good-soft); color: var(--health-good); }

.status-pill{ display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius: var(--radius-pill); font-size:12px; font-weight:700; background: var(--surface-2); border:1px solid var(--border); color: var(--text-muted); transition: box-shadow .3s, background .3s, border-color .3s; }
.status-dot{ width:7px; height:7px; border-radius:50%; background: currentColor; }
.status-idea{ color:#a19b92; } .status-draft{ color:#7ab8ff; } .status-production{ color:#c792ff; }
.status-editing{ color:#ff9d5c; }
.status-scheduled{ color:#ffc94a; } .status-published{ color:#3ddc84; } .status-archived{ color:#6f6a62; }

/* Each phase gets its own tinted pill, not just a colored dot — the whole
   badge shifts treatment as content moves through Idea → Execution →
   Editing → Ready to Upload, so the stage is readable at a glance. */
.status-pill.status-idea{ background: rgba(161,155,146,.10); border-color: rgba(161,155,146,.28); }
.status-pill.status-draft{ background: rgba(122,184,255,.10); border-color: rgba(122,184,255,.28); }
.status-pill.status-production{ background: rgba(199,146,255,.10); border-color: rgba(199,146,255,.28); }
.status-pill.status-editing{ background: rgba(255,157,92,.10); border-color: rgba(255,157,92,.28); }
.status-pill.status-published{ background: rgba(61,220,132,.10); border-color: rgba(61,220,132,.28); }
/* Ready to Upload glows — the one stage that means "go", worth standing out. */
.status-pill.status-scheduled{
  background: rgba(255,201,74,.16); border-color: rgba(255,201,74,.5);
  box-shadow: 0 0 10px rgba(255,201,74,.3);
  animation: status-glow 2.2s ease-in-out infinite;
}
@keyframes status-glow{
  0%,100%{ box-shadow: 0 0 8px rgba(255,201,74,.22); }
  50%{ box-shadow: 0 0 18px rgba(255,201,74,.5); }
}

.health-badge{ display:inline-flex; align-items:center; gap:7px; padding:6px 13px; border-radius: var(--radius-pill); font-size:12px; font-weight:800; }
.health-good{ background: var(--health-good-soft); color: var(--health-good); }
.health-average{ background: var(--health-average-soft); color: var(--health-average); }
.health-poor{ background: var(--health-poor-soft); color: var(--health-poor); }
.health-none{ background: var(--surface-2); color: var(--text-faint); }
.health-dot{ width:8px; height:8px; border-radius:50%; background: currentColor; flex:none; }

.platform-pill{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color: var(--text-muted); }
.platform-pill svg{ width:15px; height:15px; }

/* ============================================================
   Tables
   ============================================================ */
.table-wrap{ border:1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); }
table.data-table{ width:100%; border-collapse:collapse; font-size:13.5px; }
.data-table thead th{ text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color: var(--text-muted); font-weight:700; padding:13px 16px; border-bottom:1px solid var(--border); white-space:nowrap; cursor:pointer; user-select:none; }
.data-table thead th:hover{ color: var(--text-muted); }
.data-table tbody td{ padding:13px 16px; border-bottom:1px solid var(--border-soft); vertical-align: middle; }
.data-table tbody tr:last-child td{ border-bottom:none; }
.data-table tbody tr{ cursor:pointer; transition: background .1s; }
.data-table tbody tr:hover{ background: var(--surface-hover); }
.cell-title{ font-weight:700; color: var(--text); max-width: 320px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cell-muted{ color: var(--text-muted); }
.table-scroll{ overflow-x:auto; }
.table-empty{ padding: 60px 20px; text-align:center; color: var(--text-muted); }

/* ============================================================
   Content view chooser
   ============================================================ */
.content-view-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap:16px; max-width:760px; }
.content-view-card{ border:1px solid var(--border); border-radius: var(--radius-lg); padding:26px 22px; text-align:left; cursor:pointer; transition: border-color .15s, transform .1s, box-shadow .2s; }
.content-view-card:not(.glass-card){ background: var(--surface); }
.content-view-card:hover{ border-color: var(--brand-tint); transform: translateY(-2px); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--brand-tint) 70%, transparent), 0 0 26px color-mix(in srgb, var(--brand-tint) 35%, transparent); }
.content-view-card .icon-wrap{ width:44px; height:44px; border-radius: var(--radius-md); background: color-mix(in srgb, var(--brand-tint) 14%, transparent); color: var(--brand-tint); display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.content-view-card h3{ font-size:16px; margin-bottom:4px; }
.content-view-card p{ font-size:12.5px; color: var(--text-muted); margin:0; }
/* Campaign Baru: the template we recommend first (Grow Social Media). */
.content-view-card.is-recommended{ border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent); }
.campaign-reco-badge{ display:inline-flex; align-items:flex-start; gap:5px; margin:0 0 12px; padding:5px 10px; border-radius: var(--radius-md); background: var(--accent-soft); color: var(--accent); font-size:11px; font-weight:700; line-height:1.35; }
.campaign-reco-badge svg{ flex:none; margin-top:1px; }

/* ============================================================
   Toolbars / filters
   ============================================================ */
.toolbar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:18px; }
.search-box{ position:relative; flex:1; min-width:200px; max-width:320px; }
.search-box svg{ position:absolute; left:12px; top:50%; transform:translateY(-50%); width:16px; height:16px; color: var(--text-faint); }
.search-box input{ padding-left:36px; }
.search-box input[type=search]{ -webkit-appearance:none; appearance:none; }
.filter-pop{ position:relative; }
.filter-btn{ display:flex; align-items:center; gap:7px; }
.filter-count{ background: var(--brand-tint); color: var(--brand-tint-text); border-radius:999px; font-size:10.5px; font-weight:800; min-width:16px; height:16px; display:flex; align-items:center; justify-content:center; padding:0 4px; }

/* ============================================================
   Empty states
   ============================================================ */
.empty-state{ text-align:center; padding: 70px 24px; color: var(--text-muted); }
.empty-state .icon-wrap{ width:56px; height:56px; border-radius:50%; background: var(--surface-2); display:flex; align-items:center; justify-content:center; margin:0 auto 18px; color: var(--text-faint); }
.empty-state .icon-wrap svg{ width:26px; height:26px; }
.empty-state h3{ font-size:18px; color: var(--text); margin-bottom:8px; }
.empty-state p{ max-width: 40ch; margin: 0 auto 18px; font-size:13.5px; }
@keyframes weekly-glow-move{ 0%{ transform: translate(-6%,-4%) scale(1); } 100%{ transform: translate(8%,6%) scale(1.18); } }

.hero-strip{ margin-bottom: 40px; }
.hero-strip .kicker{ color: var(--accent); font-weight:700; font-size:12.5px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:10px; }
.hero-strip h1{ font-size: 42px; line-height:1.05; max-width: 16ch; }
.brand-row-head{ display:flex; justify-content:flex-end; margin-bottom:10px; }
.brand-quick-add{ display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:999px; border:1.5px dashed var(--border); background:transparent; color: var(--text-muted); cursor:pointer; transition: border-color .15s, color .15s, transform .15s; }
.brand-quick-add:hover{ border-color: var(--accent); color: var(--accent); transform: scale(1.08); }
.brand-grid{ display:flex; flex-wrap:nowrap; align-items:flex-start; gap:28px; padding:8px 4px 16px; overflow-x:auto; scroll-snap-type:x proximity; }
.brand-grid.draggable{ cursor:grab; }
.brand-grid.draggable.pressing{ cursor:grabbing; }
.brand-grid.draggable.dragging{ scroll-snap-type:none; user-select:none; }
.brand-grid.draggable.dragging .brand-tile{ pointer-events:none; }

/* Netflix-style "who's watching" profile picker — square-ish avatar,
   name below, no card chrome. Distinct from .brand-card (below), which
   campaigns.js still uses for its own unrelated card pattern. Slides
   horizontally (.brand-grid) instead of wrapping once brands don't fit. */
.brand-tile{ position:relative; display:flex; flex-direction:column; align-items:center; width:130px; flex:none; scroll-snap-align:start; background:none; border:0; padding:0; cursor:pointer; }
/* overflow:hidden lives on the inner .avatar (it already matches this
   radius, so it clips the photo/initials fine on its own) instead of on
   this outer box — this box is what grows the hover glow via box-shadow,
   and overflow:hidden here was clipping that glow off flat at the tile's
   own edge instead of letting it bloom outward. */
.brand-tile-avatar{ position:relative; width:112px; height:112px; border-radius: var(--radius-lg); display:flex; align-items:center; justify-content:center; border:3px solid transparent; transition: border-color .15s, transform .15s, box-shadow .2s; }
.brand-tile-avatar .avatar{ width:100%; height:100%; border-radius: calc(var(--radius-lg) - 3px); overflow:hidden; object-fit:cover; display:flex; align-items:center; justify-content:center; font-family: var(--font-display); font-weight:800; font-size:36px; background: var(--brand-tint); color: var(--brand-tint-text); }
.brand-tile:hover .brand-tile-avatar{ border-color: var(--brand-tint); transform: scale(1.06); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--brand-tint) 70%, transparent), 0 0 28px color-mix(in srgb, var(--brand-tint) 40%, transparent); }
.brand-tile h3{ margin:12px 0 0; font-size:14.5px; font-weight:600; color: var(--text-muted); text-align:center; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition: color .15s; }
.brand-tile:hover h3{ color: var(--text); }
.brand-tile .meta{ font-size:11px; color: var(--text-faint); margin-top:2px; }
.brand-tile-menu{ position:absolute; top:4px; right:4px; width:26px; height:26px; background: color-mix(in srgb, var(--bg) 70%, transparent); backdrop-filter: blur(2px); opacity:0; transition: opacity .15s; }
.brand-tile-avatar:hover .brand-tile-menu, .brand-tile-menu:focus-visible, .brand-tile:focus-within .brand-tile-menu{ opacity:1; }
/* Touch screens have no hover: the ⋯ (edit/archive/delete) is always shown. */
@media (hover:none){ .brand-tile-menu{ opacity:1; } }
.brand-tile-avatar-add{ background:transparent; border:1.5px dashed var(--border); color: var(--text-muted); }
.brand-tile-add:hover .brand-tile-avatar-add{ border-color: var(--accent); color: var(--accent); background:transparent; box-shadow:none; }
.brand-tile-add:hover h3{ color: var(--accent); }
/* Phones: a two-column grid instead of a sideways carousel (about two of
   five brands showed, names cut to "English House Ke…"), names wrap to two
   lines, and the "+" tile at the end is the one add button — the 34px "+"
   above the row goes. */
@media (max-width: 640px){
  .brand-row-head{ display:none; }
  .brand-grid.brand-grid--picker{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:22px 14px; overflow:visible; padding:4px 0 16px; scroll-snap-type:none; }
  .brand-grid--picker .brand-tile{ width:auto; min-width:0; }
  .brand-grid--picker .brand-tile-avatar{ width:100%; max-width:150px; height:auto; aspect-ratio:1; }
  .brand-grid--picker .brand-tile h3{ white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow-wrap:anywhere; line-height:1.3; }
}

.brand-card{ position:relative; border:1px solid var(--border); border-radius: var(--radius-lg); padding:22px; cursor:pointer; transition: border-color .15s, transform .1s, box-shadow .2s; }
.brand-card:not(.glass-card){ background: var(--surface); }
.brand-card:hover{ border-color: var(--brand-tint); transform: translateY(-2px); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--brand-tint) 70%, transparent), 0 0 28px color-mix(in srgb, var(--brand-tint) 40%, transparent); }
.brand-card .avatar{ width:44px; height:44px; border-radius: var(--radius-md); display:flex; align-items:center; justify-content:center; font-family: var(--font-display); font-weight:800; font-size:18px; background: var(--brand-tint); color: var(--brand-tint-text); margin-bottom: 16px; }
.brand-card h3{ font-size:17px; margin-bottom:6px; }
.brand-card .meta{ font-size:12.5px; color: var(--text-muted); }
.brand-card .card-menu{ position:absolute; top:14px; right:14px; }

/* ============================================================
   Auth screen (local access lock)
   ============================================================ */
.auth-shell{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; }
.auth-card{ position:relative; width:min(400px,100%); background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-lg); padding:36px 32px; box-shadow: var(--shadow-lg); }
.auth-close{ position:absolute; top:14px; right:14px; }
.auth-title{ font-size:24px; text-align:center; }
.auth-card .page-sub{ text-align:center; max-width:none; }
.auth-error{ color: var(--health-poor); font-size:12.5px; font-weight:600; margin:-4px 0 4px; }
.auth-divider{ display:flex; align-items:center; gap:10px; margin:0 0 16px; color: var(--text-faint); font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; }
.auth-divider::before, .auth-divider::after{ content:""; flex:1; height:1px; background: var(--border); }
.auth-card .hint{ display:flex; align-items:flex-start; gap:6px; color: var(--text-faint); line-height:1.5; }
.auth-card .hint svg{ flex:none; margin-top:2px; }

/* ============================================================
   Pricing / paywall gate
   ============================================================ */
.pricing-shell{ min-height:100vh; padding:40px clamp(16px,4vw,32px) 64px; max-width:1080px; margin:0 auto; }
.pricing-header{ text-align:center; margin-bottom:8px; }
.pricing-back{ justify-content:center; margin-top:14px; font-size:12.5px; color: var(--text-muted); text-decoration:none; }
.pricing-back:hover{ color: var(--accent); }
.pricing-account-bar{ display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; max-width:760px; margin:18px auto 0; padding:10px 16px; background: var(--surface-2); border:1px solid var(--border); border-radius: var(--radius); font-size:12.5px; color: var(--text-muted); line-height:1.5; }

/* Why you're seeing pricing instead of the app — main.js's onAccountChange
   renders this screen with `locked: true` whenever the account has no
   running access (state "none" or "expired"). */
.pricing-locked-banner{ display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; max-width:640px; margin:22px auto 0; padding:22px 24px; background: var(--accent-soft); border:1px solid var(--accent); border-radius: var(--radius); }
.pricing-locked-banner h2{ margin:0; font-size:20px; line-height:1.25; }
.pricing-locked-banner p{ margin:0; font-size:13.5px; color: var(--text-muted); max-width:52ch; }
.pricing-locked-banner .pricing-cta{ width:auto; margin-top:6px; padding:10px 22px; }
.pricing-locked-banner #locked-book{ margin-top:6px; }

/* Hero — one question ("after the trial, how do you continue?"); the two
   answers are the cards right below it. */
.pricing-hero{ position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:16px; margin-top:36px; padding:clamp(24px,4.5vw,48px) clamp(20px,4vw,40px); background: var(--surface); border:1px solid var(--border); border-radius:28px; overflow:hidden; isolation:isolate; }
.pricing-hero::before{ content:""; position:absolute; z-index:-1; inset:-40% -10% auto -30%; height:140%; background: radial-gradient(closest-side, var(--accent-soft), transparent 70%); pointer-events:none; }
.pricing-title{ font-size:clamp(34px,5.6vw,60px); line-height:1.02; letter-spacing:-.02em; margin:0; text-wrap:balance; }
.pricing-sub{ font-size:15px; color: var(--text-muted); line-height:1.6; margin:0; max-width:52ch; }

/* The two Founder waves — which one is open, never how many are sold */
.pricing-tiers{ display:grid; grid-template-columns:1fr 1fr; gap:10px; width:100%; max-width:420px; }
.pricing-tier{ display:flex; flex-direction:column; gap:3px; padding:12px 14px; border-radius: var(--radius-md); border:1px solid var(--border); background: var(--bg); }
.pricing-tier-who{ font-size:12px; color: var(--text-muted); }
.pricing-tier strong{ font-family: var(--font-display); font-size:20px; white-space:nowrap; }
.pricing-tier-state{ font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color: var(--text-faint); }
.pricing-tier.is-open{ border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); background: var(--accent-soft); }
.pricing-tier.is-open strong, .pricing-tier.is-open .pricing-tier-state{ color: var(--accent); }
.pricing-tier.is-gone{ opacity:.5; }
.pricing-tier.is-gone strong{ text-decoration:line-through; }

/* Value stack — agency price vs. what's included vs. what you pay */

/* Segmented toggles on the subscription card (1 / 3 brand, monthly / yearly) */
.pricing-seg{ display:inline-flex; align-self:flex-start; padding:3px; gap:2px; background: var(--surface-2); border:1px solid var(--border); border-radius: var(--radius-pill); }
.pricing-seg-btn{ appearance:none; border:0; background:transparent; color: var(--text-muted); font-family:inherit; font-size:12.5px; font-weight:700; padding:6px 14px; border-radius: var(--radius-pill); cursor:pointer; transition: background .15s, color .15s; }
.pricing-seg-btn:hover{ color: var(--text); }
.pricing-seg-btn.is-on{ background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.14); }
.pricing-seg-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }

.pricing-price-row{ display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; }
.pricing-price{ font-family: var(--font-display); font-size:30px; font-weight:900; line-height:1; }
.pricing-per{ font-size:13px; color: var(--text-muted); }
.pricing-price-note{ font-size:12.5px; color: var(--text-faint); margin:0; }
.pricing-features{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.pricing-features li{ display:flex; align-items:flex-start; gap:9px; font-size:13px; line-height:1.45; }
.pricing-features li svg{ flex:none; margin-top:2px; color: var(--accent); }
.pricing-cta{ margin-top:4px; }
.pricing-cta[disabled]{ opacity:.55; cursor:not-allowed; }

/* Subscription vs. Founder Lifetime — the two answers, side by side */
.pricing-section-title{ font-size:clamp(22px,3vw,30px); margin:0 0 8px; text-align:center; text-wrap:balance; }
.pricing-section-sub{ text-align:center; margin:0 auto 34px; max-width:56ch; font-size:14px; }
.pricing-ways-section{ margin-top:32px; }
.pricing-ways{ display:grid; grid-template-columns:1fr 1.2fr; gap:16px; align-items:start; max-width:920px; margin-inline:auto; }
@media (max-width:720px){ .pricing-ways{ grid-template-columns:1fr; max-width:460px; } .pricing-way.is-win{ order:-1; } }
.pricing-way{ position:relative; display:flex; flex-direction:column; gap:10px; background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-lg); padding:26px 22px 22px; }
.pricing-way.is-win{ padding-block:36px 26px; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow-lg); background: linear-gradient(180deg, var(--accent-soft), transparent 55%), var(--surface); }
.pricing-way.is-win .pricing-price{ color: var(--accent); font-size:clamp(34px,4vw,44px); }
.pricing-way .pricing-price{ white-space:nowrap; }
.pricing-way .pricing-tiers{ max-width:none; margin-block:6px 4px; }
.pricing-way .pricing-features{ margin:6px 0 10px; }
.pricing-way-credits{ margin:4px 0 8px; padding-top:12px; border-top:1px solid var(--border); font-size:13px; color: var(--text-muted); }

.pricing-other{ max-width:760px; margin:26px auto 0; border:1px solid var(--border); border-radius: var(--radius-md); }
.pricing-other summary{ cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 18px; font-size:13px; font-weight:700; color: var(--text-muted); }
.pricing-other summary::-webkit-details-marker{ display:none; }
.pricing-other summary svg{ flex:none; transition:transform .18s; }
.pricing-other[open] summary svg{ transform:rotate(180deg); }
.pricing-other-row{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; padding:16px 18px; border-top:1px solid var(--border); }
.pricing-other-info{ display:flex; flex-direction:column; gap:3px; font-size:12.5px; color: var(--text-muted); flex:1 1 240px; }
.pricing-other-info strong{ font-size:15px; color: var(--text); }
.pricing-other-meta{ color: var(--text-faint); }
.pricing-other-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.pricing-other-actions .btn{ width:auto; margin:0; font-size:12.5px; padding:9px 14px; }
.pricing-renew-note{ font-size:12px; color: var(--text-faint); margin:0; padding:14px 18px; border-top:1px solid var(--border); line-height:1.6; }

.pricing-founder-note{ font-size:12.5px; color: var(--text-faint); line-height:1.6; margin:18px auto 0; max-width:640px; text-align:center; }

/* Add-ons + FAQ */
.pricing-addons{ margin-top:80px; text-align:center; }
.pricing-addon-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; max-width:1000px; margin:0 auto; }
.pricing-addon{ display:flex; flex-direction:column; gap:6px; text-align:left; text-decoration:none; color:inherit; background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-md); padding:16px; font-size:13px; transition:border-color .15s; }
.pricing-addon{ cursor:pointer; font-family:inherit; }
.pricing-addon em{ font-style:normal; font-size:11.5px; color: var(--text-faint); }
.pricing-addon:hover{ border-color: var(--accent); }
.pricing-addon strong{ font-family: var(--font-display); font-size:18px; }
.pricing-faq{ margin:80px auto 0; max-width:760px; display:flex; flex-direction:column; gap:10px; }
.pricing-faq .pricing-section-title{ margin-bottom:14px; }
.pricing-faq-item{ background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-md); }
.pricing-faq-item summary{ cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:16px 20px; font-weight:700; font-size:14px; }
.pricing-faq-item summary::-webkit-details-marker{ display:none; }
.pricing-faq-item summary svg{ flex:none; color: var(--accent); transition:transform .18s; }
.pricing-faq-item[open] summary svg{ transform:rotate(180deg); }
.pricing-faq-item p{ margin:0; padding:0 20px 18px; font-size:13.5px; color: var(--text-muted); line-height:1.65; }
.pricing-foot{ justify-content:center; flex-wrap:wrap; margin-top:36px; font-size:12.5px; }
.pricing-foot-sep{ margin:0 6px; color: var(--text-faint); }

/* Card hover: a small lift plus one light sweep across the surface. The
   sweep is a gradient moved inside the pseudo-element's own box, so nothing
   needs overflow:hidden (the "Paling hemat" ribbon hangs outside its card). */
.pricing-way, .pricing-addon{ transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, border-color .2s; }
.pricing-addon{ position:relative; }
.pricing-way::after, .pricing-addon::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.16) 50%, transparent 58%) no-repeat;
  background-size:250% 100%; background-position:160% 0; opacity:0;
}
.pricing-way.is-win::after{ background-image: linear-gradient(115deg, transparent 40%, color-mix(in srgb, var(--accent) 45%, white 20%) 50%, transparent 60%); }
@media (hover:hover){
  .pricing-way:hover, .pricing-addon:hover{ transform: translateY(-6px); border-color: var(--accent); box-shadow: var(--shadow-lg); }
  .pricing-way.is-win:hover{ box-shadow: 0 0 0 1px var(--accent), 0 30px 70px -24px color-mix(in srgb, var(--accent) 55%, transparent); }
  .pricing-way:hover::after, .pricing-addon:hover::after{
    opacity:1; background-position:-60% 0; transition: background-position .9s ease, opacity .2s;
  }
}
@media (prefers-reduced-motion: reduce){
  .pricing-way, .pricing-addon{ transition:none; transform:none !important; }
  .pricing-way::after, .pricing-addon::after{ display:none; }
}

/* ---- Pricing, wepeka.com/brandlab look (2026-09-28) ----
   Same art direction as the Brandlab landing on wepeka.com (wpk-dp
   app/(store)/brandlab + components/landing/brandlab/offer.tsx): a purple-
   blue mesh behind everything, rounded-3xl cards, a pink Founder card with a
   soft fuchsia glow and a glowing pill. Pink/violet are Brandlab-the-product
   colors on purpose, not the brand being worked on, so they are fixed hex
   here rather than --accent / --brand-tint. */
.pricing-page{
  --pl-pink:#ec4899; --pl-pink-strong:#db2777; --pl-pink-text:#f472b6;
  --pl-save-bg: rgba(16,185,129,.16); --pl-save-text:#6ee7b7;
  --pl-shadow-card: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px -14px rgba(0,0,0,.6);
  --pl-shadow-pop: 0 16px 50px -12px rgba(0,0,0,.7);
  min-height:100vh;
  background:
    radial-gradient(760px 440px at 12% 8%, rgba(129,140,248,.20), transparent 60%),
    radial-gradient(720px 520px at 88% 18%, rgba(124,58,237,.22), transparent 60%),
    linear-gradient(160deg, #14121f, #0c0b0a);
}
:root[data-theme="light"] .pricing-page{
  --pl-pink-text:#db2777; --pl-save-text:#047857;
  --pl-shadow-card: 0 1px 2px rgba(23,20,15,.05), 0 8px 24px -12px rgba(23,20,15,.14);
  --pl-shadow-pop: 0 12px 40px -12px rgba(23,20,15,.32);
  background:
    radial-gradient(760px 440px at 12% 8%, rgba(196,181,253,.55), transparent 60%),
    radial-gradient(720px 520px at 88% 18%, rgba(129,140,248,.42), transparent 62%),
    linear-gradient(160deg, #f5f3ff, #ffffff);
}
.pricing-page .pricing-hero{ background:none; border:0; border-radius:0; overflow:visible; padding:0; margin-top:34px; gap:14px; }
.pricing-page .pricing-hero::before{ display:none; }
.pricing-page .pricing-title{ font-size:clamp(30px,5vw,52px); font-weight:900; line-height:1.05; letter-spacing:.01em; }
.pricing-page .pricing-sub{ font-size:clamp(14px,1.6vw,17px); }

.pricing-pill{ display:inline-flex; align-items:center; gap:6px; width:fit-content; padding:5px 12px; border-radius:999px; background: var(--surface-2); color: var(--text-muted); font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.pricing-pill svg{ width:12px; height:12px; flex:none; }
.pricing-pill--eyebrow{ padding:6px 16px; background: var(--surface); border:1px solid var(--border); color: var(--pl-pink); letter-spacing:.15em; box-shadow: var(--pl-shadow-card); }
.pricing-pill--pink{ background: var(--pl-pink); color:#fff; padding:6px 14px; }
@media (prefers-reduced-motion: no-preference){
  .pricing-pill--pink{ animation: pl-badge-glow 2.2s ease-in-out infinite; }
  @keyframes pl-badge-glow{ 0%,100%{ box-shadow:0 0 6px rgba(236,72,153,.4); transform:scale(1); } 50%{ box-shadow:0 0 18px rgba(236,72,153,.85); transform:scale(1.03); } }
}

.pricing-page .pricing-ways-section{ margin-top:30px; }
.pricing-page .pricing-ways{ grid-template-columns: 1.3fr 1fr; gap:20px; max-width:980px; align-items:stretch; }
@media (max-width:760px){ .pricing-page .pricing-ways{ grid-template-columns:1fr; max-width:480px; } }
.pricing-page .pricing-way{ gap:10px; padding:28px 26px 24px; border-radius:24px; border:1px solid var(--border); background: var(--surface); box-shadow: var(--pl-shadow-card); }
.pricing-way-top{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; position:relative; }
.pricing-way-title{ position:relative; margin:6px 0 0; font-family: var(--font-display); font-size:clamp(22px,2.4vw,28px); font-weight:900; line-height:1.1; }
.pricing-page .pricing-way .pricing-price{ font-size:34px; }

.pricing-page .pricing-way.is-win{ overflow:hidden; padding:30px 28px 26px; border:2px solid var(--pl-pink); background: var(--surface); box-shadow: var(--pl-shadow-pop); }
.pricing-way-glow{ position:absolute; top:-64px; right:-64px; width:192px; height:192px; border-radius:50%; background: linear-gradient(135deg, rgba(217,70,239,.25), rgba(236,72,153,.25)); filter: blur(40px); pointer-events:none; }
.pricing-page .pricing-way.is-win > *:not(.pricing-way-glow){ position:relative; }
.pricing-anchor{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:8px 0 -2px; font-size:14px; color: var(--text-muted); }
.pricing-anchor s{ text-decoration-color: var(--pl-pink); text-decoration-thickness:2px; }
.pricing-save{ padding:3px 10px; border-radius:999px; background: var(--pl-save-bg); color: var(--pl-save-text); font-size:12px; font-weight:800; }
.pricing-page .pricing-way.is-win .pricing-price{ color: var(--pl-pink-text); font-size:clamp(40px,5vw,54px); }
.pricing-page .pricing-way.is-win .pricing-tier.is-open{ border-color: var(--pl-pink); box-shadow:0 0 0 1px var(--pl-pink); background: rgba(236,72,153,.10); }
.pricing-page .pricing-way.is-win .pricing-tier.is-open strong, .pricing-page .pricing-way.is-win .pricing-tier.is-open .pricing-tier-state{ color: var(--pl-pink-text); }
.pricing-page .pricing-way.is-win .pricing-features li svg{ color: var(--pl-pink); }
.pricing-features--2col{ display:grid; grid-template-columns:1fr 1fr; gap:10px 16px; }
@media (max-width:560px){ .pricing-features--2col{ grid-template-columns:1fr; } }
.pricing-cta--pink{ background: var(--pl-pink); border-color: var(--pl-pink); color:#fff; font-weight:800; padding-block:13px; box-shadow: 0 10px 26px -10px rgba(236,72,153,.75); }
.pricing-cta--pink:hover{ background: var(--pl-pink-strong); border-color: var(--pl-pink-strong); color:#fff; }
.pricing-page .pricing-way.is-win::after{ background-image: linear-gradient(115deg, transparent 40%, rgba(236,72,153,.22) 50%, transparent 60%); }
@media (hover:hover){
  .pricing-page .pricing-way:hover{ border-color: var(--border); box-shadow: var(--pl-shadow-pop); }
  .pricing-page .pricing-way.is-win:hover{ border-color: var(--pl-pink); box-shadow: 0 30px 70px -24px rgba(236,72,153,.55); }
}
.pricing-trust{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:4px 6px; margin:18px auto 0; max-width:720px; text-align:center; font-size:12.5px; color: var(--text-muted); }
.pricing-trust > svg{ flex:none; color:#10b981; }
.pricing-trust--trial{ margin-top:4px; }
/* Both buttons on one line at the bottom, whichever card is taller. */
.pricing-page .pricing-way > .pricing-cta{ margin-top:auto; }
.pricing-page .pricing-way-credits{ margin-bottom:16px; }
.pricing-page .pricing-other, .pricing-page .pricing-faq-item{ border-radius:20px; background: var(--surface); box-shadow: var(--pl-shadow-card); }
.pricing-page .pricing-faq-item summary svg{ color: var(--pl-pink); }
.pricing-page .pricing-faq{ margin-top:56px; }
.pricing-page .pricing-account-bar{ border-radius:999px; background: var(--surface); box-shadow: var(--pl-shadow-card); }
.pricing-page .pricing-locked-banner{ border-radius:24px; border:1px solid var(--border); border-top:3px solid var(--pl-pink); background: var(--surface); box-shadow: var(--pl-shadow-card); }

/* Topbar plan badge (js/layout.js planBadgeHTML) → pricing */
.plan-badge{ display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 6px 0 11px; border-radius: var(--radius-pill); border:1px solid var(--border); background: var(--surface); color: var(--text-muted); font-size:12px; font-weight:700; text-decoration:none; white-space:nowrap; flex:none; transition:border-color .15s; }
.plan-badge:hover{ border-color: var(--accent); }
.plan-badge strong{ background: var(--accent); color: var(--accent-text); padding:4px 10px; border-radius: var(--radius-pill); font-size:11px; }
.plan-badge.is-lifetime{ padding-right:12px; color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.lifetime-tag{ display:inline-flex; align-items:center; gap:5px; vertical-align:middle; background: var(--accent-soft); color: var(--accent); border-radius: var(--radius-pill); padding:3px 9px; font-family: var(--font-body); font-size:10.5px; font-weight:800; letter-spacing:.04em; white-space:nowrap; }
.lifetime-lock{ max-width:520px; margin:8vh auto 0; text-align:center; display:flex; flex-direction:column; align-items:center; gap:14px; }
.lifetime-lock-icon{ width:64px; height:64px; border-radius:20px; display:grid; place-items:center; background: var(--accent-soft); color: var(--accent); }
.lifetime-lock h1{ font-size:clamp(24px,3.6vw,32px); margin:0; text-wrap:balance; }
.lifetime-lock p{ margin:0 0 6px; color: var(--text-muted); font-size:14.5px; line-height:1.65; }
.lifetime-lock .btn{ gap:8px; }

/* ============================================================
   Menus / dropdowns
   ============================================================ */
/* position:fixed (not absolute) so top/left/right — plain
   getBoundingClientRect() numbers, see js/dom.js's openMenu() — are already
   correct viewport coordinates. No scrollY/scrollX math needed anywhere,
   and it's correct whether the trigger button lives in a normal-flow
   container or inside the position:sticky topbar. */
/* z-index 75: above the phone's bottom bar (60), the floating chat/notes
   (65-66) and modal overlays (70), so a menu opened from any of them is
   never drawn underneath. js/dom.js keeps it inside the viewport. */
.menu{ position:fixed; z-index:75; min-width:170px; background: var(--bg-raised); border:1px solid var(--border); border-radius: var(--radius-md); padding:6px; box-shadow: var(--shadow-lg); transform-origin:top; animation: menu-pop-in .14s ease-out; }
.menu.menu-closing{ animation: menu-pop-out .12s ease-in forwards; pointer-events:none; }
@keyframes menu-pop-in{ from{ opacity:0; transform: scale(.97) translateY(-4px); } to{ opacity:1; transform: scale(1) translateY(0); } }
@keyframes menu-pop-out{ to{ opacity:0; transform: scale(.97) translateY(-4px); } }
@media (prefers-reduced-motion: reduce){ .menu{ animation:none; } .menu.menu-closing{ animation:none; } }
.menu button{ display:flex; align-items:center; gap:9px; width:100%; text-align:left; padding:9px 10px; border-radius:8px; background:transparent; border:0; color: var(--text); font-size:13px; cursor:pointer; }
.menu button:hover{ background: var(--surface-2); }
.menu button.danger{ color: var(--health-poor); }
.menu button:disabled{ opacity:.45; cursor:not-allowed; }
.menu button svg[viewBox]{ flex:none; }
.menu button svg{ width:15px; height:15px; }
.menu-checkbox-row{ display:flex; align-items:center; gap:9px; width:100%; padding:9px 10px; border-radius:8px; font-size:13px; color: var(--text); cursor:pointer; }
.menu-checkbox-row:hover{ background: var(--surface-2); }

/* Filter panel — Funnel/Format/Platform/Age consolidated into one popover
   instead of 4 separate toolbar controls; Campaign stays its own dropdown
   outside this since it's the one most worth keeping one click away. */
.filter-panel{ min-width:260px; padding:14px; display:flex; flex-direction:column; gap:14px; }
.filter-panel-section .chip-select button{ width:auto; }
.filter-panel-section .select{ width:100%; }
.menu-checkbox-row.disabled{ opacity:.5; cursor:not-allowed; }
.menu-checkbox-row input[type=checkbox]{ width:14px; height:14px; margin:0; }
.menu-divider{ height:1px; background: var(--border); margin:6px 4px; }

/* Contextual "?" help popovers (js/help.js) */
/* Highlighted on purpose: people didn't notice the old faded "?". */
.help-btn{ width:26px; height:26px; flex:none; color: var(--accent); background: var(--accent-soft); border:1px solid color-mix(in srgb, var(--accent) 45%, var(--border)); }
.help-btn svg{ width:14px; height:14px; }
.help-btn:hover{ background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.help-term{ text-decoration: underline dotted color-mix(in srgb, var(--accent) 70%, transparent); text-underline-offset:3px; cursor:help; }

.help-popover{ max-width:280px; padding:12px 14px; cursor:default; }
.help-popover-title{ font-size:12.5px; font-weight:700; margin-bottom:6px; }
.help-popover-body{ font-size:12.5px; line-height:1.55; color: var(--text-muted); margin:0; }

/* "Konsultasi AI" floating chat (js/consultant-panel.js) */
.consultant-fab{ position:fixed; right:24px; bottom:24px; z-index:65; width:52px; height:52px; border-radius:50%; background: var(--accent); color: var(--accent-text); border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow: var(--shadow-lg); transition: transform .15s ease; }
.consultant-fab:hover{ transform: scale(1.06); }
.consultant-fab.is-open{ background: var(--surface-2); color: var(--text); }
.consultant-panel{ position:fixed; right:24px; bottom:88px; z-index:65; width:360px; max-width:calc(100vw - 32px); height:min(520px, calc(100vh - 120px)); height:min(520px, calc(100dvh - 120px)); background: var(--bg-raised); border:1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); display:flex; flex-direction:column; overflow:hidden; }
.consultant-panel[hidden]{ display:none; }
.consultant-panel-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--border); font-size:13px; font-weight:700; flex:none; }
.consultant-panel-body{ flex:1; overflow-y:auto; padding:14px 16px; display:flex; flex-direction:column; gap:10px; }
.consultant-msg{ max-width:85%; padding:9px 12px; border-radius:14px; font-size:13px; line-height:1.5; white-space:pre-wrap; }
.consultant-msg-assistant{ align-self:flex-start; background: var(--surface-2); border-bottom-left-radius:4px; }
.consultant-msg-user{ align-self:flex-end; background: var(--accent); color: var(--accent-text); border-bottom-right-radius:4px; }
.consultant-msg-pending{ opacity:.55; }
.consultant-nav-buttons{ display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; }
.consultant-nav-btn{ display:inline-flex; align-items:center; gap:5px; padding:6px 10px; border-radius:999px; background: var(--surface); border:1px solid var(--border); color: var(--accent); font-size:12px; font-weight:700; cursor:pointer; }
.consultant-nav-btn:hover{ background: var(--accent-soft); border-color: var(--accent); }
.consultant-nav-btn svg{ width:11px; height:11px; }
.consultant-panel-input{ flex:none; display:flex; align-items:flex-end; gap:8px; padding:12px 14px; border-top:1px solid var(--border); }
.consultant-panel-input textarea{ flex:1; resize:none; min-height:36px; max-height:120px; border:1px solid var(--border); background: var(--surface-2); border-radius: var(--radius-md); padding:8px 10px; font:inherit; font-size:13px; color: var(--text); }
.consultant-panel-input textarea:focus{ outline:none; border-color: var(--accent); }
.consultant-panel-input .icon-btn{ flex:none; }

/* ============================================================
   Notification bell
   ============================================================ */
.notif-badge{ position:absolute; top:-3px; right:-3px; min-width:16px; height:16px; padding:0 4px; border-radius:999px; background: var(--health-poor); color:#fff; font-size:10px; font-weight:800; display:flex; align-items:center; justify-content:center; border:2px solid var(--bg); }
.notif-panel{ min-width:340px; max-width:380px; max-height:70vh; overflow-y:auto; padding:8px; }
.notif-section-head{ padding:9px 10px 5px; font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color: var(--text-faint); }
.notif-row{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:8px 10px; border-radius:8px; background:transparent; border:0; color: var(--text); cursor:pointer; }
.notif-row:hover{ background: var(--surface-2); }
.notif-row .ti{ flex:1; min-width:0; }
.notif-row .t{ font-weight:700; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.notif-row .m{ font-size:11.5px; color: var(--text-faint); margin-top:2px; }
.notif-overdue{ color: var(--health-poor); font-weight:700; }
.notif-today{ color: var(--health-average); font-weight:700; }
.notif-soon{ color: var(--text-faint); }
.notif-empty{ display:flex; align-items:center; gap:8px; padding:20px 14px; color: var(--text-muted); font-size:13px; }
.notif-empty svg{ color: var(--health-good); flex:none; }

/* ============================================================
   Modal / Drawer
   ============================================================ */
.overlay{ position:fixed; inset:0; background: rgba(6,5,4,.6); backdrop-filter: blur(3px); z-index:70; display:flex; justify-content:flex-end; }
.overlay.center{ justify-content:center; align-items:center; }
.drawer{ width: min(620px, 100vw); height:100%; background: var(--bg-raised); border-left:1px solid var(--border); display:flex; flex-direction:column; box-shadow: var(--shadow-lg); animation: slideIn .18s ease-out; }
@keyframes slideIn{ from{ transform: translateX(24px); opacity:0; } to{ transform:none; opacity:1; } }
.modal{ width: min(480px, 92vw); background: var(--bg-raised); border:1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); animation: pop .28s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes pop{ from{ transform: scale(.9); opacity:0; } to{ transform:none; opacity:1; } }
.drawer-head{ display:flex; align-items:center; justify-content:space-between; padding:20px 24px; border-bottom:1px solid var(--border); }
.drawer-head h2{ font-size:19px; }
.drawer-body{ flex:1; overflow-y:auto; padding:24px; }
.drawer-foot{ padding:16px 24px; border-top:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; gap:10px; }
.modal-body{ padding:24px; max-height: calc(100vh - 160px); max-height: calc(100dvh - 160px); overflow-y: auto; }
.modal-foot{ padding:16px 24px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:10px; }

.intro-pitch{ font-size:14.5px; line-height:1.65; color: var(--text); margin:0 0 14px; }

.editor-tabs{ display:flex; gap:4px; border-bottom:1px solid var(--border); margin: -24px -24px 24px; padding: 0 24px; }
.editor-tab{ padding: 14px 4px; margin-right:22px; font-size:13.5px; font-weight:700; color: var(--text-muted); border-bottom:2px solid transparent; cursor:pointer; }
.editor-tab.active{ color: var(--text); border-color: var(--accent); }
.editor-pane{ display:none; }
.editor-pane.active{ display:block; }

/* ============================================================
   Brand Assets (logos, Drive, Brandbook — embedded previews)
   ============================================================ */
.logo-gallery{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.logo-thumb{ position:relative; width:52px; height:52px; border-radius:10px; border:1px solid var(--border); background: var(--text); flex:none; }
.logo-thumb img{ width:100%; height:100%; object-fit:contain; padding:7px; cursor:zoom-in; border-radius:10px; }
.logo-remove{ position:absolute; top:-6px; right:-6px; width:18px; height:18px; border-radius:50%; background: var(--bg-raised); border:1px solid var(--border); color: var(--text-muted); display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; }
.logo-remove:hover{ color: var(--health-poor); }
.logo-download{ position:absolute; bottom:-6px; right:-6px; width:18px; height:18px; border-radius:50%; background: var(--bg-raised); border:1px solid var(--border); color: var(--text-muted); display:flex; align-items:center; justify-content:center; cursor:pointer; text-decoration:none; }
.logo-download:hover{ color: var(--accent); }
.logo-add-tile{ width:52px; height:52px; border-radius:10px; border:1.5px dashed var(--border); background:transparent; color: var(--text-faint); display:flex; align-items:center; justify-content:center; cursor:pointer; flex:none; }
.logo-add-tile:hover{ border-color: var(--accent); color: var(--accent); }
/* An empty upload slot that says what goes there, not just an icon. */
.logo-add-tile.has-label{ width:auto; padding:0 16px; gap:8px; font-size:12.5px; font-weight:700; color: var(--text-muted); }

.resource-chip{ display:flex; align-items:center; gap:6px; padding:8px 14px; border-radius: var(--radius-pill); border:1px dashed var(--border); background: var(--surface); font-size:12.5px; font-weight:700; color: var(--text-muted); cursor:pointer; }
.resource-chip.empty:hover{ border-color: var(--accent); color: var(--accent); }
.chip-icon-btn{ width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:transparent; border:0; color: var(--text-faint); cursor:pointer; padding:0; flex:none; }
.chip-icon-btn:hover{ color: var(--text); background: var(--surface-2); }
.chip-icon-btn:disabled{ opacity:.4; cursor:not-allowed; }
.chip-icon-btn:disabled:hover{ background:transparent; color: var(--text-faint); }
.chip-icon-btn.mic-active{ color:#fff; background: var(--health-poor); animation: mic-pulse 1.2s ease-in-out infinite; }
.chip-icon-btn.loading{ color: var(--accent); animation: mic-pulse 1s ease-in-out infinite; }
@keyframes mic-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.55; } }

.asset-panel{ border:1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); padding:16px; }
.asset-panel.empty{ display:flex; flex-direction:column; justify-content:center; }
.asset-panel-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.asset-embed{ width:100%; height:280px; border:0; border-radius: var(--radius-md); background:#fff; display:block; }
.asset-embed-fallback{ padding:36px 16px; text-align:center; color: var(--text-muted); font-size:13px; background: var(--surface-2); border-radius: var(--radius-md); }

/* ============================================================
   Creator studio
   ============================================================ */
.creator-layout{ display:grid; grid-template-columns: 260px 1fr; gap:20px; align-items:start; }
/* min-width:0: a grid item's automatic minimum width defaults to its
   content's min-content size whenever overflow is visible (the case here)
   — so without this, the sidebar column refused to shrink to its 1fr
   track below 860px and pushed the whole page ~110px past the viewport
   edge on phones (clipped invisibly by body's overflow-x:hidden, but
   still enough to poke a sliver of the active item's accent-colored
   background/border out past the right edge). */
.creator-sidebar{ overflow:visible; min-width:0; }
.creator-sidebar-list{ max-height: calc(100vh - 230px); overflow-y:auto; overflow-x:hidden; display:flex; flex-direction:column; gap:12px; padding-right:2px; }
@media (max-width: 860px){
  .creator-layout{ grid-template-columns:1fr; }
  /* Stacked on mobile, but the list still needs its OWN internal scroll —
     without it, reaching items further down means scrolling the whole
     page past the list, which people read as "the list won't scroll" and
     can't tap what they can't reach. A previous fix removed internal
     scrolling entirely because `100vh` counts the address bar as always
     hidden, so `calc(100vh - 230px)` could compute taller than what's
     actually visible with the bar showing — the box's own bottom edge
     (and the scroll gesture that would start there) ends up off-screen.
     `dvh` tracks the real visible height as the address bar shows/hides,
     which fixes that at the source, so the box can go back to scrolling
     in place. overscroll-behavior:contain keeps the gesture from bleeding
     into the page scroll once the list itself is scrolled to its end —
     that bleed was the other half of the "stuck" feeling on iOS. Must
     come after the base .creator-sidebar-list rule above — same
     specificity, so an earlier position here was being silently
     overridden by it. */
  .creator-sidebar-list{
    max-height: 50vh;
    max-height: 50dvh;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
}
/* Phones: "Daftar konten" at the top of the editor jumps back up to the
   list (js/views/creator.js revealOnPhone); both stop clear of the sticky
   header when scrolled to. Hidden where list and editor sit side by side. */
.creator-back-list{ display:none; }
@media (max-width: 860px){
  .creator-main, .creator-sidebar{ scroll-margin-top: 76px; }
  .creator-back-list{ display:inline-flex; align-items:center; gap:6px; min-height:44px; margin:0 0 10px; padding:0 14px; border-radius:999px; border:1px solid var(--border); background: var(--surface); color: var(--text); font:inherit; font-size:13.5px; font-weight:700; cursor:pointer; }
  .creator-back-list svg{ color: var(--accent); }
}
.creator-item{ display:flex; align-items:center; gap:10px; padding:12px 14px; cursor:pointer; border-bottom:1px solid var(--border-soft); }
.creator-item:last-child{ border-bottom:none; }
.creator-item:hover{ background: var(--surface-hover); }
.creator-item.active{ background: color-mix(in srgb, var(--brand-tint) 12%, transparent); border-left: 2px solid var(--brand-tint); padding-left:12px; }
.creator-item .ti{ flex:1; min-width:0; }
.creator-item .t{ font-weight:700; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.creator-item .m{ font-size:11.5px; color: var(--text-faint); margin-top:2px; }
/* The due badge sits under the title, not beside it — beside it, a long
   "Tenggat 12 Okt 2026" squeezed the title down to two letters. */
.creator-item-due{ margin-top:6px; line-height:1; }
.fill-marks{ display:inline-flex; gap:6px; margin-left:8px; vertical-align:middle; }
.fill-mark{ display:inline-flex; opacity:.3; }
.fill-mark.on{ opacity:1; color: var(--brand-tint); }
/* Delete on idea/draft rows only (see sidebarRow's `deletable` check) —
   subtle by default, only steps forward on hover of the row or the button
   itself so the compact sidebar list doesn't read as button-heavy. */
.creator-item-delete{ flex:none; width:26px; height:26px; border-radius:8px; border:none; background:transparent; color:var(--text-faint); opacity:0; transition:opacity .12s, color .12s, background .12s; }
.creator-item:hover .creator-item-delete, .creator-item:focus-within .creator-item-delete{ opacity:1; }
@media (hover:none){ .creator-item-delete{ opacity:1; } }
.creator-item-delete:hover{ background: var(--health-poor-soft); color: var(--health-poor); }
.creator-item-delete svg{ width:13px; height:13px; }

/* Each phase is its own separated, collapsible box — not one continuous
   list — using the CSS grid 1fr/0fr trick to animate to/from auto height
   without JS measuring anything. */
/* flex-shrink:0 matters here: .creator-sidebar-group is a flex item inside
   the scrollable .creator-sidebar-list column, and its own overflow:hidden
   (for the rounded-corner clipping) strips its normal min-content
   protection as a flex item. Without flex-shrink:0, once total content
   height exceeds the list's max-height, the browser squishes every group
   down to fit instead of letting the list overflow and scroll — so
   scrollHeight === clientHeight, nothing to scroll, and whatever got
   squished past legibility is effectively unclickable. This is the actual
   cause of the Creator sidebar's "list won't scroll, can't reach items
   further down" bug, not a touch/gesture issue. */
.creator-sidebar-group{ border:1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); overflow:hidden; flex-shrink:0; }
.creator-sidebar-group-head{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:6px;
  padding:12px 14px; font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  color: var(--text-faint); background: var(--surface-2); border:0; cursor:pointer; text-align:left;
}
.creator-sidebar-group-head:hover{ color: var(--text); }
.creator-sidebar-group-chevron{ transition: transform .25s ease; flex:none; }
.creator-sidebar-group.collapsed .creator-sidebar-group-chevron{ transform: rotate(-90deg); }
.creator-sidebar-group-body{ display:grid; grid-template-rows: 1fr; transition: grid-template-rows .32s ease; }
.creator-sidebar-group.collapsed .creator-sidebar-group-body{ grid-template-rows: 0fr; }
.creator-sidebar-group-body-inner{ overflow:hidden; min-height:0; }
/* min-width:0 for the same reason as .creator-sidebar above: on the
   single-column phone layout both this and the sidebar share one grid
   track, so either one's un-shrinkable content (a toolbar row, a wide
   card) is enough to blow the whole page out past the viewport edge. */
.creator-main{ display:flex; flex-direction:column; gap:16px; min-width:0; }
.creator-field-head{ display:flex; align-items:center; justify-content:space-between; }
/* Carousel slide editor (js/views/creator.js slidesFieldHTML): one card per
   slide instead of one flat Script textarea; the read view on the shooting
   stage (slidesReadHTML) uses the same numbered-card rhythm. */
.slide-editor{ display:flex; flex-direction:column; gap:10px; margin-bottom:10px; }
.slide-card{ border:1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2); padding:10px 12px 12px; }
.slide-card-head{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.slide-num{ display:inline-flex; align-items:center; padding:2px 9px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.slide-text{ min-height:56px; resize:none; overflow:hidden; }
.slide-read{ display:flex; flex-direction:column; gap:12px; }
.slide-read-card{ display:flex; flex-direction:column; gap:6px; padding:12px 14px; border:1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.slide-read-card > div{ font-size:15px; line-height:1.6; }
.save-indicator{ font-size:11.5px; font-weight:700; color: var(--health-good); opacity:0; transition: opacity .2s; }
.save-indicator.show{ opacity:1; }
.due-badge{ font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; padding:3px 8px; border-radius:999px; flex:none; }
.due-overdue{ background: var(--health-poor-soft); color: var(--health-poor); }
.due-today{ background: var(--health-average-soft); color: var(--health-average); }
.due-soon{ background: var(--surface-2); color: var(--text-faint); }

/* ============================================================
   Instagram import picker
   ============================================================ */
.ig-picker-toolbar{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.ig-picker-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap:12px; max-height:60vh; overflow-y:auto; padding-right:2px; }
.ig-picker-card{ display:block; cursor:pointer; border:1px solid var(--border); border-radius: var(--radius-md); padding:8px; background: var(--surface); position:relative; transition: border-color .12s; }
.ig-picker-card:hover{ border-color: var(--text-faint); }
.ig-picker-card input[type=checkbox]{ position:absolute; top:14px; left:14px; z-index:2; width:18px; height:18px; accent-color: var(--accent); }
.ig-picker-thumb{ position:relative; width:100%; aspect-ratio:1; border-radius:8px; overflow:hidden; background: var(--surface-2); margin-bottom:8px; }
.ig-picker-thumb img{ width:100%; height:100%; object-fit:cover; }
.ig-picker-noimg{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; color: var(--text-faint); }
.ig-picker-type{ position:absolute; bottom:6px; right:6px; background: rgba(12,11,10,.75); color: var(--text); font-size:10px; font-weight:700; padding:3px 7px; border-radius:999px; text-transform:uppercase; letter-spacing:.03em; }
.ig-picker-check{ display:none; }
.ig-picker-caption{ font-size:11.5px; color: var(--text-muted); line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ig-picker-already{ margin-top:6px; font-size:10.5px; font-weight:700; color: var(--health-good); text-transform:uppercase; letter-spacing:.03em; }
.ig-picker-linked{ margin-top:6px; font-size:10.5px; font-weight:700; color: var(--accent); display:flex; align-items:center; gap:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ig-picker-card:has(input:disabled){ opacity:.55; cursor:default; }
.ig-card-working{ outline:2px solid var(--accent); }
.ig-card-done{ outline:2px solid var(--health-good); }
.ig-card-error{ outline:2px solid var(--health-poor); }

input[type=checkbox]{ accent-color: var(--accent); width:16px; height:16px; cursor:pointer; }

/* ============================================================
   Teleprompter overlay
   ============================================================ */
.tp-overlay{ position:fixed; inset:0; background: rgba(6,5,4,.82); backdrop-filter: blur(4px); z-index:90; display:flex; align-items:center; justify-content:center; padding:24px; }
.tp-panel{ width:min(920px,92vw); height:min(720px,88vh); background: var(--bg-raised); border:1px solid var(--border); border-radius: var(--radius-lg); display:flex; flex-direction:column; box-shadow: var(--shadow-lg); }
.tp-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 22px; border-bottom:1px solid var(--border); flex:none; }
.tp-title{ display:flex; align-items:center; gap:9px; font-family: var(--font-display); font-weight:700; font-size:16px; }
.tp-scroll{ flex:1; overflow-y:auto; padding:56px 64px; }
.tp-text{ font-family: var(--font-display); font-weight:600; line-height:1.65; color: var(--text); white-space:pre-wrap; max-width:720px; margin:0 auto; }
.tp-controls{ display:flex; align-items:center; gap:20px; padding:14px 22px; border-top:1px solid var(--border); flex-wrap:wrap; flex:none; }
.tp-slider{ display:flex; align-items:center; gap:9px; font-size:11.5px; color: var(--text-muted); font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.tp-slider input[type=range]{ width:100px; accent-color: var(--accent); }

/* ============================================================
   Spotlight tour (onboarding)
   ============================================================ */
/* pointer-events:none on the container (not just the dim strips/ring) is
   what actually lets a click over the spotlighted "hole" reach the real
   page element underneath instead of being swallowed by this full-viewport
   div sitting on top of it — needed for `interactive` steps, which require
   the real target to be genuinely clickable through the overlay. Inherited
   by children, so .tour-tooltip below opts back into pointer-events:auto
   for its own buttons. */
.tour-overlay{ position:fixed; inset:0; z-index:95; pointer-events:none; }
/* Dim-with-a-hole as four plain strips around the target rect, not a
   giant-spread box-shadow — a 9999px box-shadow spread on a fixed element
   is a known trigger for compositing/repaint glitches on scroll in some
   engines, and four positioned divs sidestep that entirely. */
.tour-dim{ position:fixed; background: rgba(6,5,4,.48); pointer-events:none; }
.tour-highlight-ring{
  position:fixed; border-radius: var(--radius-md);
  border: 2px solid var(--brand-tint);
  --glow-color: color-mix(in srgb, var(--brand-tint) 60%, transparent);
  animation: glow-pulse 2s ease-in-out infinite;
  pointer-events:none;
}
.tour-tooltip{
  position:fixed; z-index:96; width:min(320px,90vw);
  background: var(--bg-raised); border:1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding:20px;
  animation: pop .28s cubic-bezier(0.34,1.56,0.64,1);
  pointer-events: auto;
}
.tour-progress{ font-size:11px; font-weight:700; color: var(--text-faint); text-transform:uppercase; letter-spacing:.04em; margin-bottom:8px; }
.tour-tooltip h3{ font-size:16px; margin-bottom:8px; }
.tour-tooltip p{ font-size:13px; color: var(--text-muted); line-height:1.55; margin:0 0 18px; }
.tour-tooltip-actions{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.tour-tooltip p.tour-hint{ font-size:12.5px; font-weight:700; color: var(--accent); background: var(--accent-soft); border-radius: var(--radius-md); padding:8px 10px; margin:-6px 0 14px; }
/* Page guides (js/guides/): bold "click this" words, the per-step skip
   link on gated steps, ring-only steps (drag onto a grid the user must see),
   and no Consultant FAB covering big stage buttons while a tour runs. */
.tour-tooltip p b{ color: var(--text); font-weight:700; }
.tour-skip-step{ display:block; background:none; border:none; padding:0; margin:-6px 0 14px; font-size:12px; font-weight:600; color: var(--text-muted); text-decoration:underline; text-underline-offset:2px; cursor:pointer; }
.tour-skip-step:hover{ color: var(--text); }
/* .tour-skip-step sets display:block, which beats the browser's own
   [hidden]{display:none} — without this the link showed on every step. */
.tour-skip-step[hidden]{ display:none; }
.tour-overlay.tour-no-dim .tour-dim{ display:none !important; }
.tour-overlay.tour-quiet{ display:none; }
/* Explainer videos (js/guide-videos.js): the "Video" pill next to a page's
   "?" (same icon-btn/help-btn language, widened for its label) and the
   modal player. */
.section-video-btn{ width:auto; height:26px; padding:0 12px 0 10px; gap:6px; color: var(--text); border-color: var(--border); }
.section-video-btn span{ font-size:11px; font-weight:600; }
.section-video-btn[hidden]{ display:none; }
.guide-video-frame{ position:relative; width:100%; aspect-ratio:16/9; border-radius: var(--radius-md); overflow:hidden; background: var(--surface-2); border:1px solid var(--border); }
.guide-video-frame video, .guide-video-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; background:#000; }
/* Not-yet-recorded video (admin only): dashed + a clock, so it never looks
   like a playable video. */
.guide-video-frame.is-placeholder{ border-style:dashed; }
.guide-video-play.is-pending{ background: var(--surface); color: var(--text-muted); border:1.5px dashed var(--border); }
.guide-video-frame.is-placeholder{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center; padding:10px; background: radial-gradient(120% 120% at 50% 0%, color-mix(in srgb, var(--accent) 16%, var(--surface-2)), var(--surface-2)); }
.guide-video-play{ width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; background: var(--accent); color: var(--accent-text); }
.guide-video-frame.is-compact .guide-video-play{ width:34px; height:34px; }
.guide-video-ph-text{ display:flex; flex-direction:column; gap:2px; font-size:12px; color: var(--text-muted); }
.guide-video-ph-text b{ color: var(--text); font-size:12.5px; }
.guide-video-ph-text small{ margin-top:6px; font-size:11.5px; color: var(--accent); max-width:44ch; line-height:1.4; }
.section-guide-btn[hidden]{ display:none; }

/* The explainer modal's ending: three answers, shown once the video is over
   or skipped (js/guide-videos.js openGuideVideo). */
/* [hidden] is only display:none at UA weight — a class that sets display
   would silently win, so both toggled blocks say it themselves. */
.guide-video-choices[hidden]{ display:none; }
.guide-video-choices{ margin-top:14px; padding-top:14px; border-top:1px solid var(--border); animation: reveal-up .22s ease-out both; }
.guide-video-choices-head{ margin:0 0 10px; font-size:13px; font-weight:600; }
.guide-video-choice-row{ display:flex; flex-wrap:wrap; gap:8px; }
.guide-video-choice-row .btn{ flex:1 1 auto; justify-content:center; }
@media (max-width: 560px){ .guide-video-choice-row .btn{ flex:1 1 100%; } }
@media (prefers-reduced-motion: reduce){ .guide-video-choices{ animation:none; } }
.guide-video-note{ font-size:12.5px; color: var(--text-muted); margin:12px 0 0; line-height:1.55; }
/* Multi-part guide videos + watermark (js/guide-videos.js). The watermark
   is an overlay on every frame: the part's title top-left, the Wepeka
   Brandlab mark on a white chip top-right. pointer-events:none so the
   player's own controls underneath still work. */
.gv-wm{ position:absolute; top:0; left:0; right:0; display:flex; align-items:center; justify-content:space-between; gap:12px; padding: clamp(7px, 1.8%, 14px) clamp(9px, 2.2%, 18px); pointer-events:none; z-index:2; }
/* Light, film-subtitle style title (Inter 300, loaded by the player). */
.gv-wm-title{ max-width:62%; font-family: "Inter", var(--font-body); font-weight:300; font-size: clamp(9.5px, 1.25vw, 12.5px); letter-spacing:.04em; line-height:1.2; color: rgba(255,255,255,.92); text-shadow: 0 1px 3px rgba(0,0,0,.6); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gv-wm-logo{ display:inline-flex; align-items:center; gap: clamp(3px, .5vw, 5px); flex:none; background: rgba(255,255,255,.92); color:#1a1816; border-radius:999px; padding: clamp(2px, .35vw, 4px) clamp(6px, .8vw, 8px); box-shadow: 0 1px 6px rgba(0,0,0,.18); font-family: var(--font-display); font-weight:900; font-size: clamp(6.5px, .8vw, 8.5px); line-height:1; opacity:.95; }
.gv-wm-logo img{ height: clamp(7px, .9vw, 10px); width:auto; display:block; }
.gv-wm-logo i{ width:1px; height: clamp(6px, .8vw, 9px); background: rgba(26,24,22,.25); }
.gv-wm-title::before{ content:"|"; margin-right:.55em; }
.guide-video-frame.is-placeholder .gv-wm-title{ color: var(--text); text-shadow:none; }
.gv-stage-wrap:fullscreen{ background:#000; display:flex; align-items:center; justify-content:center; }
.gv-stage-wrap:fullscreen [data-video-stage]{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.gv-stage-wrap:fullscreen .guide-video-frame{ width:min(100vw, calc(100vh * 16 / 9)); height:auto; border:0; border-radius:0; }
.gv-stage-wrap:fullscreen .gv-wm{ padding:22px 28px; }
.gv-stage-wrap:fullscreen .gv-wm-title{ font-size:17px; }
.gv-stage-wrap:fullscreen .gv-wm-logo{ font-size:11px; padding:5px 11px; gap:7px; }
.gv-stage-wrap:fullscreen .gv-wm-logo img{ height:13px; }
.gv-stage-wrap:fullscreen .gv-wm-logo i{ height:11px; }
.gv-bar{ display:flex; align-items:center; gap:8px; margin-top:10px; }
.gv-bar-status{ flex:1; text-align:center; font-size:12px; font-weight:700; color: var(--text-muted); }
.gv-bar .btn:disabled{ opacity:.4; pointer-events:none; }
.gv-parts{ list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:4px; max-height:220px; overflow-y:auto; }
.gv-part{ width:100%; display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius: var(--radius-md); border:1px solid var(--border); background: var(--surface); color: var(--text); font:inherit; font-size:13px; text-align:left; cursor:pointer; }
.gv-part:hover{ border-color: var(--brand-tint); }
.gv-part.is-current{ border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.gv-part-num{ width:24px; height:24px; flex:none; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background: var(--surface-2); font-size:11.5px; font-weight:800; color: var(--text-muted); }
.gv-part.is-current .gv-part-num{ background: var(--accent); color: var(--accent-text); }
.gv-part-title{ flex:1; min-width:0; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gv-part-time{ font-size:11.5px; color: var(--text-faint); font-variant-numeric: tabular-nums; }

body.tour-active:not(.tour-show-chat) .consultant-fab{ display:none; }
@media (max-width: 720px){
  .tour-tooltip{ padding:16px; }
  .tour-tooltip p{ margin-bottom:14px; }
}

/* ============================================================
   Dropzone / OCR
   ============================================================ */
.dropzone{ border:1.5px dashed var(--border); border-radius: var(--radius-lg); padding: 30px 20px; text-align:center; cursor:pointer; color: var(--text-muted); transition: border-color .12s, background .12s; }
.dropzone.drag{ border-color: var(--accent); background: var(--accent-soft); color: var(--text); }
.dropzone svg{ width:26px; height:26px; margin: 0 auto 10px; color: var(--text-faint); }
.dropzone strong{ color: var(--text); }
.ocr-status{ display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius: var(--radius-md); background: var(--surface-2); font-size:13px; color: var(--text-muted); margin-top:12px; }
.spinner{ width:16px; height:16px; border-radius:50%; border:2px solid var(--border); border-top-color: var(--accent); animation: spin .7s linear infinite; flex:none; }
@keyframes spin{ to{ transform: rotate(360deg); } }
.metric-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:12px; margin-top:14px; }
@media (max-width:520px){ .metric-grid{ grid-template-columns:1fr; } }
.metric-field label{ display:flex; align-items:center; gap:6px; }
.metric-field .found{ color: var(--health-good); }

/* ============================================================
   Calendar
   ============================================================ */
.cal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; gap:14px; flex-wrap:wrap; }
.cal-nav{ display:flex; align-items:center; gap:8px; }
.cal-month-label{ font-family: var(--font-display); font-size:20px; font-weight:700; min-width:180px; text-align:center; }
.cal-grid{ display:grid; grid-template-columns: repeat(7,1fr); border:1px solid var(--border); border-radius: var(--radius-lg); overflow:hidden; background: var(--border-soft); gap:1px; }
.cal-dow{ background: var(--bg-raised); padding:10px; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color: var(--text-faint); font-weight:700; text-align:center; }
.cal-cell{ background: var(--surface); height: 128px; overflow:hidden; padding:8px; display:flex; flex-direction:column; gap:5px; }
.cal-cell.outside{ background: var(--bg-raised); opacity:.45; }
.cal-cell.today .cal-date{ background: var(--brand-tint); color: var(--brand-tint-text); }
.cal-cell.drag-over{ outline: 2px solid var(--accent); outline-offset:-2px; }
.cal-date{ width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11.5px; font-weight:700; color: var(--text-muted); }
/* Tanggal merah — Indonesian national holidays (solid red) vs. cuti
   bersama / joint leave (softer, dashed) get slightly different treatment
   since only one of them is an actual libur nasional. */
.cal-cell.holiday .cal-date{ color: var(--health-poor); font-weight:800; }
.cal-cell.holiday:not(.today){ background: color-mix(in srgb, var(--health-poor) 6%, var(--surface)); }
.cal-cell.cuti .cal-date{ color: var(--health-poor); opacity:.75; }
.cal-cell.cuti:not(.today){ background: color-mix(in srgb, var(--health-poor) 3%, var(--surface)); }
.cal-holiday-label{ font-size:9.5px; font-weight:700; color: var(--health-poor); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:-3px; }
.cal-item{ position:relative; font-size:11px; font-weight:700; padding:4px 7px; border-radius:7px; background: var(--surface-2); border:1px solid var(--border); cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:flex; align-items:center; gap:5px; }
.cal-item:hover{ border-color: var(--brand-tint); }
.cal-item .swatch{ width:6px; height:6px; border-radius:50%; flex:none; }
.cal-item-campaign-dot{ width:6px; height:6px; border-radius:2px; background: var(--brand-tint); flex:none; }
.cal-more{ font-size:10.5px; color: var(--text-faint); padding-left:2px; }
/* A series day (Jadwal Kerja) with no episode yet: a dashed, clickable hint, not an item. */
.cal-series-ghost{ display:flex; align-items:center; gap:4px; width:100%; margin-top:3px; padding:3px 6px; border:1px dashed color-mix(in srgb, var(--accent) 55%, var(--border)); border-radius: var(--radius-sm); background:transparent; color: var(--text-muted); font:inherit; font-size:10.5px; font-weight:600; text-align:left; cursor:pointer; min-width:0; }
.cal-series-ghost span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cal-series-ghost:hover{ color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.agenda-ghost{ border-style:dashed; background:transparent; cursor:default; }
.agenda-ghost .cal-series-ghost{ font-size:12.5px; padding:6px 10px; margin:0; width:auto; }

.date-bank-menu{ min-width:240px; max-width:280px; padding:8px; }
.date-bank-menu-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:11px; font-weight:800; color: var(--text-faint); text-transform:uppercase; letter-spacing:.04em; padding:4px 4px 8px 8px; }
.date-bank-menu-list{ max-height:220px; overflow-y:auto; display:flex; flex-direction:column; gap:2px; }
.date-bank-menu-list button{ display:flex; align-items:center; gap:8px; width:100%; text-align:left; padding:8px; border-radius:8px; background:transparent; border:0; color: var(--text); font-size:12.5px; cursor:pointer; }
.date-bank-menu-list button:hover{ background: var(--surface-2); }
.date-bank-menu-title{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.date-bank-menu .swatch{ width:6px; height:6px; border-radius:50%; flex:none; }

/* Content Bank (js/views/calendar.js contentBankHTML): the unscheduled
   backlog, docked beside the month grid so a piece can be dragged straight
   onto a day (or back off it). Below 960px it drops under the grid; touch
   screens use its calendar icon + tap-a-date instead of dragging. */
.cal-layout.has-bank{ display:grid; grid-template-columns: minmax(0,1fr) 280px; gap:16px; align-items:start; }
.content-bank{ position:sticky; top:76px; max-height: calc(100vh - 96px); display:flex; flex-direction:column; background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-lg); overflow:hidden; }
.content-bank-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 12px 10px 14px; font-weight:800; font-size:13.5px; border-bottom:1px solid var(--border-soft); }
.content-bank-head > span{ display:inline-flex; align-items:center; gap:8px; }
.content-bank-head .icon-btn{ width:26px; height:26px; }
.content-bank-hint{ font-size:11.5px; line-height:1.5; color: var(--text-faint); margin:10px 14px 8px; }
.content-bank-scope{ display:flex; align-items:center; gap:6px; padding:0 14px 8px; }
.content-bank-scope .icon-btn{ width:22px; height:22px; }
.content-bank-list{ flex:1; min-height:0; overflow-y:auto; padding:2px 10px 12px; }
.content-bank-group{ margin-bottom:12px; }
.content-bank-group-head{ display:flex; align-items:center; gap:6px; font-size:10.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color: var(--text-faint); margin:4px 4px 6px; }
.content-bank-group-head span{ font-weight:700; color: var(--text-faint); opacity:.8; }
.content-bank-group.is-overdue .content-bank-group-head{ color: var(--health-poor); }
.content-bank-empty{ font-size:12.5px; color: var(--text-faint); text-align:center; padding:22px 10px; line-height:1.5; }
.bank-item{ display:flex; align-items:center; gap:2px; margin-bottom:6px; border:1px solid var(--border); border-radius:9px; background: var(--surface-2); cursor:grab; transition: border-color .15s, box-shadow .15s; }
.bank-item:hover{ border-color: var(--brand-tint); }
.bank-item:active{ cursor:grabbing; }
.bank-item.is-dragging{ opacity:.45; }
.bank-item.is-highlight{ outline:2px solid var(--accent); outline-offset:1px; }
.bank-item.is-placing{ border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.bank-item-open{ flex:1; min-width:0; display:flex; align-items:flex-start; gap:8px; padding:8px 4px 8px 10px; background:transparent; border:0; color: var(--text); text-align:left; font:inherit; cursor:inherit; }
.bank-item-open .swatch{ width:7px; height:7px; border-radius:50%; flex:none; margin-top:5px; }
.bank-item-text{ display:flex; flex-direction:column; min-width:0; gap:1px; }
.bank-item-title{ font-size:12.5px; font-weight:700; line-height:1.35; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.bank-item-open:hover .bank-item-title{ text-decoration:underline; text-underline-offset:2px; }
.bank-item-meta{ font-size:11px; color: var(--text-faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bank-item-place{ width:28px; height:28px; flex:none; margin-right:4px; }
.bank-item.is-placing .bank-item-place{ background: var(--accent); color: var(--accent-text); }
.content-bank-drop{ display:none; align-items:center; justify-content:center; gap:6px; margin:0 10px 10px; padding:12px; border:1.5px dashed var(--border); border-radius:10px; font-size:12px; font-weight:600; color: var(--text-muted); }
.is-cal-dragging .content-bank-drop{ display:flex; }
.content-bank.drag-over{ border-color: var(--accent); }
.content-bank.drag-over .content-bank-drop{ border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
#toggle-bank.is-active{ border-color: var(--brand-tint); color: var(--text); }
.bank-count{ min-width:18px; height:18px; padding:0 5px; border-radius:999px; background: var(--accent); color: var(--accent-text); font-size:10.5px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; margin-left:2px; }
.cal-placing-bar{ display:flex; align-items:center; gap:10px; margin:0 0 12px; padding:10px 12px 10px 14px; border-radius: var(--radius-md); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); border:1px solid color-mix(in srgb, var(--accent) 40%, var(--border)); font-size:13px; }
.cal-placing-bar span{ flex:1; min-width:0; }
.cal-layout.is-placing .cal-cell:not(.is-past){ cursor:copy; }
.cal-layout.is-placing .cal-cell:not(.is-past):hover{ outline:2px dashed var(--accent); outline-offset:-2px; }
@media (max-width: 960px){
  .cal-layout.has-bank{ grid-template-columns:1fr; }
  .content-bank{ position:static; max-height:none; }
  .content-bank-list{ max-height:360px; }
}

/* Campaign timeline strip — a lightweight Gantt row per active campaign
   whose date window overlaps the visible month, positioned by day-of-
   month percentage. Scoped to the month itself (not the padded 42-cell
   grid), so a bar never needs to wrap across a week boundary. */
.cal-timeline{ display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.cal-timeline-row{ display:flex; align-items:center; gap:10px; }
.cal-timeline-label{ width:140px; flex:none; font-size:11.5px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cal-timeline-track{ position:relative; flex:1; height:8px; background: var(--surface-2); border-radius:999px; }
.cal-timeline-bar{ position:absolute; top:0; bottom:0; background: var(--brand-tint); border-radius:999px; min-width:8px; }
@keyframes bankIn{ from{ transform: translateX(100%); } to{ transform: translateX(0); } }
.auto-schedule-list{ max-height:50vh; overflow-y:auto; display:flex; flex-direction:column; gap:2px; }
.auto-schedule-row{ display:flex; align-items:center; gap:12px; padding:9px 4px; border-bottom:1px solid var(--border-soft); }
.auto-schedule-row:last-child{ border-bottom:none; }
.auto-schedule-title{ flex:1; font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.agenda-list{ display:flex; flex-direction:column; gap:10px; }
.agenda-row{ display:flex; align-items:center; gap:14px; background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-md); padding:13px 16px; cursor:pointer; }
.agenda-date{ width:52px; text-align:center; flex:none; }
.agenda-date .d{ font-family:var(--font-display); font-size:20px; font-weight:800; }
.agenda-date .m{ font-size:10.5px; text-transform:uppercase; color: var(--text-faint); }

/* ============================================================
   Analytics
   ============================================================ */
.funnel-compare{ display:grid; grid-template-columns: repeat(3,1fr); gap:14px; }
@media (max-width: 820px){ .funnel-compare{ grid-template-columns:1fr; } }
.funnel-card{ border-radius: var(--radius-lg); padding:20px; border:1px solid var(--border); background: var(--surface); }
.funnel-card .fh{ display:flex; align-items:center; gap:8px; margin-bottom:14px; }
.funnel-card .metric-row{ display:flex; justify-content:space-between; align-items:baseline; padding:9px 0; border-top:1px solid var(--border-soft); }
.funnel-card .metric-row:first-of-type{ border-top:none; }
.funnel-card .metric-row .v{ font-family: var(--font-display); font-weight:700; font-size:18px; }
.bar-row{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.bar-row .bl{ width: 120px; font-size:12.5px; color: var(--text-muted); flex:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bar-track{ flex:1; height:8px; border-radius:999px; background: var(--surface-2); overflow:hidden; }
.bar-fill{ height:100%; border-radius:999px; background: var(--brand-tint); }
.bar-val{ width:52px; text-align:right; font-size:12.5px; font-weight:700; flex:none; }

/* ============================================================
   Settings
   ============================================================ */
.settings-grid{ display:grid; grid-template-columns: 220px 1fr; gap:32px; align-items:start; }
@media (max-width: 860px){ .settings-grid{ grid-template-columns:1fr; } }
.settings-nav{ display:flex; flex-direction:column; gap:2px; position:sticky; top: calc(var(--header-h) + 24px); }
.settings-nav button{ text-align:left; padding:10px 14px; border-radius: var(--radius-md); background:transparent; border:0; color: var(--text-muted); font-weight:700; font-size:13.5px; cursor:pointer; }
.settings-nav button.active{ background: var(--surface); color: var(--text); }
.settings-panel{ display:none; }
.settings-panel.active{ display:block; }
/* One column: the panel list was still a sticky, see-through column, so the
   panel content scrolled up underneath 5-8 buttons. It becomes a plain row
   of chips above the panel, wrapping instead of sticking. */
@media (max-width: 860px){
  .settings-nav{ position:static; flex-direction:row; flex-wrap:wrap; gap:6px; }
  .settings-nav button{ min-height:44px; padding:8px 14px; border:1px solid var(--border); border-radius:999px; background: var(--surface); }
  .settings-nav button.active{ border-color: var(--accent); background: var(--accent-soft); }
}
.threshold-row{ display:grid; grid-template-columns: 90px 1fr 1fr; gap:12px; align-items:center; margin-bottom:10px; }
.threshold-row .tl{ font-size:12.5px; font-weight:700; color: var(--text-muted); }
.list-editor-row{ display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--border-soft); }
.list-editor-row:last-child{ border-bottom:none; }
.list-editor-row .row-label{ flex:1; font-weight:600; font-size:13.5px; }
.var-chip{ font-size:11px; font-weight:700; padding:4px 9px; border-radius:999px; background: var(--surface-2); color: var(--text-muted); cursor:pointer; font-family: ui-monospace, monospace; }
.var-chip:hover{ color: var(--accent); }

/* ============================================================
   Toast
   ============================================================ */
.toast-root{ position:fixed; bottom:22px; left:50%; transform:translateX(-50%); z-index:100; display:flex; flex-direction:column; gap:8px; align-items:center; }
.toast svg{ flex:none; }
/* Phones: sit above the floating chat/notes buttons (bottom-right) instead of
   landing on top of the page's main button, and never wider than the screen. */
@media (max-width: 640px){
  .toast-root{ bottom: 92px; width: calc(100vw - 32px); }
  .toast{ width:100%; font-size:13.5px; }
}
.toast{ background: var(--bg-raised); border:1px solid var(--border); color: var(--text); padding:12px 18px; border-radius: 16px; max-width: min(440px, calc(100vw - 32px)); line-height:1.4; font-size:13px; font-weight:600; box-shadow: var(--shadow-lg); display:flex; align-items:center; gap:9px; animation: toastIn .16s ease-out; }
@keyframes toastIn{ from{ opacity:0; transform: translateY(6px); } to{ opacity:1; transform:none; } }
.toast.success svg{ color: var(--health-good); }
.toast.error svg{ color: var(--health-poor); }
.toast svg{ width:16px; height:16px; }

/* ============================================================
   Welcome bumper (js/dom.js showWelcomeBumper) — full-screen, once per
   session, right after landing inside Brandlab. Always dark, regardless of
   the light/dark theme: a bumper is a moment, not a themed screen.
   ============================================================ */
.brandlab-bumper{
  position:fixed; inset:0; z-index:200; background:#000;
  display:flex; align-items:center; justify-content:center; padding:32px;
  cursor:pointer; animation: bumperIn .5s ease-out;
}
.brandlab-bumper.is-leaving{ animation: bumperOut .5s ease-in forwards; }
.brandlab-bumper-inner{ text-align:center; max-width:1000px; }
.brandlab-bumper-line{
  margin:0; color:rgba(255,255,255,.82); font-family: var(--font-body); font-weight:400;
  font-size: clamp(15px, 2.3vw, 22px); line-height:1.3; letter-spacing:0;
}
.brandlab-bumper-line b{ color: var(--accent); font-weight:600; }
.brandlab-bumper-mark{
  margin-top: clamp(12px, 2vw, 20px); display:flex; align-items:center; justify-content:center;
  gap: clamp(10px, 1.5vw, 18px); color:#fff; font-family: var(--font-display); font-weight:900;
  font-size: clamp(24px, 4.8vw, 54px);
}
.brandlab-bumper-mark img{ height: clamp(28px, 5.5vw, 60px); width:auto; display:block; }
.brandlab-bumper-mark-divider{ width:2px; height: clamp(20px, 3.8vw, 42px); background: rgba(255,255,255,.35); }
@keyframes bumperIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes bumperOut{ from{ opacity:1; } to{ opacity:0; } }
@media (prefers-reduced-motion: reduce){
  .brandlab-bumper, .brandlab-bumper.is-leaving{ animation:none; }
}

/* ============================================================
   Boot loader (index.html + js/main.js showLoading) — the "Wepeka
   loading" from wepeka.com's route curtain (wpk-dp globals.css
   .page-curtain): brand-gradient sheet + dark sheet with the logo and a
   sliding line. Always dark, like the bumper. Sits under toasts (100) so
   a failed sign-in can still say so; only transform/opacity animate.
   ============================================================ */
.wl-loader{ position:fixed; inset:0; z-index:99; overflow:hidden; pointer-events:none; }
.wl-loader:not(.is-revealing){ pointer-events:auto; }
.wl-loader-sheet{ position:absolute; inset:0; will-change:transform; }
.wl-loader-color{ background: linear-gradient(115deg, #ffa52b 0%, #ec4899 55%, #7c3aed 100%); transform: translateY(100%); visibility:hidden; }
.wl-loader.is-covering .wl-loader-color, .wl-loader.is-revealing .wl-loader-color{ visibility:visible; }
.wl-loader-dark{ background:#0e0c0a; display:flex; align-items:center; justify-content:center; padding:24px; }
.wl-loader-logo{ display:flex; flex-direction:column; align-items:center; gap:1.1rem; text-align:center; animation: wl-logo-in .4s cubic-bezier(.16,1,.3,1) .12s both; }
.wl-loader-mark{ display:flex; align-items:center; gap: clamp(10px, 1.4vw, 14px); color:#fff; font-family: var(--font-display); font-weight:900; font-size: clamp(22px, 3.4vw, 32px); line-height:1; }
.wl-loader-mark img{ height: clamp(26px, 4vw, 38px); width:auto; display:block; }
.wl-loader-divider{ width:2px; height: clamp(20px, 3vw, 28px); background: rgba(255,255,255,.35); }
.wl-loader-line{ position:relative; width:7.5rem; height:2px; overflow:hidden; border-radius:999px; background: rgba(255,255,255,.12); }
.wl-loader-line::after{ content:""; position:absolute; inset:0; width:40%; border-radius:inherit; background: linear-gradient(90deg, #ffa52b, #ec4899); animation: wl-line .9s cubic-bezier(.65,0,.35,1) infinite; }
.wl-loader-slow{ display:none; max-width:320px; margin-top:.4rem; color: rgba(255,255,255,.72); font-size:13px; line-height:1.5; }
.wl-loader-slow p{ margin:0 0 10px; }
.wl-loader.is-slow .wl-loader-slow{ display:block; animation: wl-logo-in .4s ease-out both; }
.wl-loader-reload{ font: inherit; font-weight:700; color:#fff; background: rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22); border-radius:999px; padding:8px 18px; cursor:pointer; }
.wl-loader-reload:hover{ background: rgba(255,255,255,.18); }
/* Replacing a real screen (login → app): both sheets sweep up from the bottom. */
.wl-loader.is-covering .wl-loader-color{ animation: wl-in .46s cubic-bezier(.76,0,.24,1) both; }
.wl-loader.is-covering .wl-loader-dark{ animation: wl-in .44s cubic-bezier(.76,0,.24,1) .08s both; }
.wl-loader.is-covering .wl-loader-logo{ animation-delay:.32s; }
/* First real screen is in: the sheets carry on out the top, dark first. */
.wl-loader.is-revealing .wl-loader-color{ transform:none; animation: wl-out .52s cubic-bezier(.76,0,.24,1) .09s both; }
.wl-loader.is-revealing .wl-loader-dark{ animation: wl-out .52s cubic-bezier(.76,0,.24,1) both; }
.wl-loader.is-revealing .wl-loader-logo{ animation: wl-logo-out .22s ease-in both; }
@keyframes wl-in{ from{ transform: translateY(100%); } to{ transform: translateY(0); } }
@keyframes wl-out{ from{ transform: translateY(0); } to{ transform: translateY(-100%); } }
@keyframes wl-logo-in{ from{ opacity:0; transform: translateY(14px); } to{ opacity:1; transform:none; } }
@keyframes wl-logo-out{ from{ opacity:1; } to{ opacity:0; transform: translateY(-10px); } }
@keyframes wl-line{ from{ transform: translateX(-100%); } to{ transform: translateX(250%); } }
@media (prefers-reduced-motion: reduce){
  .wl-loader-logo, .wl-loader.is-covering .wl-loader-sheet{ animation:none; }
  .wl-loader-line::after{ animation-duration: 2.4s; }
}

/* ============================================================
   Floating progress (minimized long-running work — imports, syncs)
   ============================================================ */
#progress-root{ position:fixed; top:74px; right:20px; z-index:100; display:flex; flex-direction:column; gap:10px; width:260px; }
.floating-progress{ background: var(--bg-raised); border:1px solid var(--border); border-radius: var(--radius-md); padding:12px 14px; box-shadow: var(--shadow-lg); animation: toastIn .16s ease-out; }
.floating-progress-label{ font-size:12.5px; font-weight:700; margin-bottom:8px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.floating-progress-track{ height:5px; border-radius:3px; background: var(--surface-2); overflow:hidden; }
.floating-progress-fill{ height:100%; background: var(--accent); border-radius:3px; transition: width .3s ease; }
.floating-progress.done .floating-progress-fill{ background: var(--health-good); }
.floating-progress-sub{ font-size:11px; color: var(--text-faint); margin-top:6px; }

/* ============================================================
   Misc
   ============================================================ */
.text-muted{ color: var(--text-muted); }
.text-faint{ color: var(--text-faint); }
.mt-0{ margin-top:0; }
.flex{ display:flex; }
.items-center{ align-items:center; }
.gap-8{ gap:8px; }
.gap-10{ gap:10px; }
.justify-between{ justify-content:space-between; }
.w-full{ width:100%; }
.divider{ height:1px; background: var(--border); margin: 20px 0; }

/* AI generate history (js/views/creator.js openAiScriptModal, and the same
   pattern for campaign brainstorm ideas): the newest batch renders open at
   full size above; every earlier batch — still fully usable, just not what
   you're looking at right now — collapses into this one small toggle
   instead of the modal growing forever with every "Generate more". Nothing
   in here is ever saved, so it's all gone once the modal closes. */
.ai-history{ margin-top:18px; border-top:1px solid var(--border-soft); padding-top:2px; }
.ai-history summary{ list-style:none; cursor:pointer; padding:10px 2px; font-size:12.5px; font-weight:700; color: var(--text-muted); display:flex; align-items:center; gap:6px; }
.ai-history summary::-webkit-details-marker{ display:none; }
.ai-history summary::before{ content:"▸"; display:inline-block; font-size:10px; color: var(--text-faint); transition: transform .15s ease; }
.ai-history[open] summary::before{ transform: rotate(90deg); }
.ai-history summary:hover{ color: var(--text); }
#ai-history-list .ai-batch{ padding-top:14px; margin-top:14px; border-top:1px dashed var(--border-soft); opacity:.85; }
#ai-history-list .ai-batch:first-child{ margin-top:6px; }
.kv{ display:flex; justify-content:space-between; font-size:13px; padding:9px 0; border-bottom:1px solid var(--border-soft); }
.kv:last-child{ border-bottom:none; }
.kv .k{ color: var(--text-muted); }
.kv .v{ font-weight:700; }
.thumb-preview{ width:100%; aspect-ratio: 16/10; border-radius: var(--radius-md); background: var(--surface-2); border:1px solid var(--border); object-fit:cover; }
.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.top-content-row{ display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--border-soft); }
.top-content-row:last-child{ border-bottom:none; }
.top-content-row .rank{ font-family: var(--font-display); font-weight:800; font-size:16px; color: var(--text-faint); width:20px; }
.top-content-row .ti{ flex:1; min-width:0; }
.top-content-row .ti .t{ font-weight:700; font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.top-content-row .ti .m{ font-size:12px; color:var(--text-muted); margin-top:2px; }

/* ============================================================
   Report card (printable)
   ============================================================ */
.report-preview-wrap{ display:flex; justify-content:center; background: var(--surface-2); border-radius: var(--radius-md); padding:24px; }
.report-sheet{
  width:100%; max-width:680px; background:#ffffff; color:#1a1816; border-radius:6px;
  padding:40px; box-shadow: 0 12px 40px rgba(0,0,0,.35);
  font-family: var(--font-body);
}
.report-header{ display:flex; align-items:center; gap:14px; padding-bottom:20px; margin-bottom:24px; border-bottom:2px solid #1a1816; }
.report-header .avatar{ flex:none; }
.report-brand{ font-family: var(--font-display); font-weight:800; font-size:20px; }
.report-title{ font-size:12.5px; color:#6b6560; text-transform:uppercase; letter-spacing:.05em; margin-top:2px; }
.report-range{ margin-left:auto; text-align:right; font-size:12.5px; color:#33302c; }
.report-generated{ color:#8a8580; font-size:11px; margin-top:2px; }
.report-stat-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:14px; margin-bottom:28px; }
.report-stat{ background:#f6f4f1; border-radius:8px; padding:14px; }
.report-stat-label{ font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; color:#6b6560; font-weight:700; }
.report-stat-value{ font-family: var(--font-display); font-weight:700; font-size:22px; margin-top:4px; color:#1a1816; }
.report-section-title{ font-family: var(--font-display); font-weight:700; font-size:15px; margin:24px 0 10px; color:#1a1816; }
.report-table{ width:100%; border-collapse:collapse; font-size:12.5px; }
.report-table th{ text-align:left; padding:8px 10px; border-bottom:2px solid #1a1816; font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; color:#6b6560; }
.report-table td{ padding:8px 10px; border-bottom:1px solid #e4e0da; color:#33302c; }
.report-empty{ color:#8a8580; font-size:12.5px; }
.report-footer{ margin-top:32px; padding-top:14px; border-top:1px solid #e4e0da; font-size:10.5px; color:#8a8580; text-align:center; }

@media print{
  /* visibility:hidden alone keeps every hidden element's layout box intact
     (invisible ≠ zero height) — #app is the entire single-page app behind
     this modal and can be very tall, so it was silently padding out extra
     blank pages before the actual report ever printed. Remove it from flow
     entirely instead of just hiding it. */
  #app, #toast-root{ display:none !important; }
  body *{ visibility:hidden; }
  .report-sheet, .report-sheet *{ visibility:visible; }
  /* The modal chrome (.overlay is position:fixed, .modal-body scrolls with
     a capped height) confuses print pagination — a fixed-position ancestor
     gets treated as a repeating layer, producing one blank/duplicate page
     per page of the hidden document behind it. Flatten it all to normal
     static flow so only .report-sheet's own (short) content determines the
     page count. */
  .overlay{ position:static !important; inset:auto; background:none !important; backdrop-filter:none !important; padding:0 !important; display:block !important; }
  .modal{ width:auto !important; box-shadow:none !important; border:none !important; animation:none !important; }
  .modal-body{ max-height:none !important; overflow:visible !important; padding:0 !important; }
  .report-sheet{ position:static; margin:0 auto; max-width:none; box-shadow:none; border-radius:0; padding:20px; }
  .report-preview-wrap{ padding:0 !important; background:none !important; }
  .report-header{ padding-bottom:10px; margin-bottom:12px; }
  .report-header .avatar{ width:36px !important; height:36px !important; font-size:15px !important; }
  .report-stat-grid{ grid-template-columns: repeat(6,1fr); margin-bottom:12px; gap:6px; }
  .report-stat{ padding:6px 8px; }
  .report-stat-label{ font-size:8.5px; }
  .report-stat-value{ font-size:14px; margin-top:2px; }
  .report-section-title{ margin:10px 0 6px; font-size:12.5px; }
  .report-table{ font-size:10.5px; }
  .report-table th{ padding:4px 6px; }
  .report-table td{ padding:4px 6px; }
  .report-footer{ margin-top:10px; padding-top:6px; }
  /* If the report genuinely doesn't fit one page, let it flow onto a
     second one cleanly — just don't let a table row or stat box get sliced
     in half across the page break. */
  .report-table tr, .report-stat, .report-header{ break-inside: avoid; page-break-inside: avoid; }
  .dna-section, .dna-cover{ break-inside: avoid; page-break-inside: avoid; }

  /* Brand Book — landscape multi-page GSM document, printed via a named
     page (see @page brandbook below) so it prints landscape without
     forcing the portrait Report/Brand DNA PDFs above into landscape too. */
  .brandbook-sheet, .brandbook-sheet *{ visibility:visible; }
  .brandbook-sheet{ box-shadow:none; border-radius:0; }
  .brandbook-page{ page: brandbook; break-after: page; padding:16mm 18mm; min-height:0; }
  .brandbook-page:last-child{ break-after: auto; }
  .brandbook-page + .brandbook-page{ border-top:none; }
  /* Browsers strip background colors/gradients by default when printing —
     without this every divider page's brand-color background (and the
     gradient swatches) would silently print blank white. */
  .brandbook-page, .brandbook-page *{ print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}
@page brandbook{ size: A4 landscape; margin: 0; }

@media (max-width: 720px){
  .topbar{ flex-wrap: wrap; height:auto; padding: 12px 16px; gap:10px; row-gap:10px; }
  .topbar-sep{ display:none; }
  .brand-switch{ order:1; max-width: 200px; }
  .brand-mark{ order:0; }
  /* If the icon row still doesn't fit, wrap to a second line instead of
     clipping off-screen. */
  .topbar-right{ order:2; flex-wrap: wrap; row-gap:8px; justify-content:flex-end; }
  .tabs{ order:3; flex:1 1 100%; width:100%; overflow-x:auto; min-width:0; }
  main.view{ padding: 24px 16px 60px; }
  .hero-strip h1{ font-size:32px; }
  .drawer{ width:100%; }
}

/* Campaign Journey — horizontal node/branch map, not a table. Reuses
   existing tokens (--accent, --border, --surface) and the .glow/glow-pulse
   animation already defined above (no new keyframe, no new palette). */
.journey-track{ display:flex; align-items:flex-start; gap:0; overflow-x:auto; padding:22px 4px 10px; margin-bottom:20px; }
.journey-node{ display:flex; flex-direction:column; align-items:center; gap:8px; flex:none; width:130px; background:none; border:none; padding:0; cursor:pointer; }
.journey-node-dot{ width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:2px solid var(--border); background:var(--surface); color:var(--text-faint); font-weight:800; transition: width .2s, height .2s, border-color .2s, background .2s, color .2s; }
.journey-node-dot.filled{ border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.journey-node.disabled{ opacity:.45; }
.journey-node-dot.active{ width:60px; height:60px; }
.journey-node-label{ font-size:13px; font-weight:700; text-align:center; }
.journey-node.expanded .journey-node-label{ color: var(--accent); }
.journey-node-sub{ font-size:11px; color: var(--text-faint); text-align:center; }
.journey-connector{ flex:1; min-width:24px; height:2px; background: var(--border); margin-top:26px; transition: background .3s; }
.journey-connector.filled{ background: var(--accent); }
.journey-detail{ background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-lg); padding:20px 22px; }

/* A bare .hint (icon + text row) — .field .hint and .auth-card .hint both
   already existed as scoped variants; this generic one is what
   journeyDetailHTML's "phase not part of this campaign" hint and the new
   Mission panel's gating hint both actually need. */
.hint{ display:flex; align-items:flex-start; gap:6px; font-size:12px; color: var(--text-faint); line-height:1.5; }
.hint svg{ flex:none; margin-top:2px; }

/* Missions — a leveling layer on top of the Journey (Quick Template
   campaigns only). Ladder stepper reuses .status-pill's pill language;
   the tree reuses .glow/glow-pulse and the --health-* tokens already
   established by the Brand Health strip, instead of inventing a new
   palette for "done/in progress/not started." */
.mission-ladder{ display:flex; align-items:center; gap:0; overflow-x:auto; padding:4px 4px 16px; }
.mission-badge{ display:flex; align-items:center; gap:8px; flex:none; background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-pill); padding:7px 14px 7px 7px; cursor:pointer; color: var(--text-muted); transition: border-color .2s, background .2s, color .2s; }
.mission-badge:disabled{ cursor:not-allowed; opacity:.55; }
.mission-badge.locked{ opacity:.65; }
.mission-badge.locked:hover{ opacity:.9; border-color: var(--border); }
.mission-badge-dot{ width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; background: var(--surface-2); color: var(--text-faint); flex:none; }
.mission-badge-label{ font-size:12.5px; font-weight:700; white-space:nowrap; }
.mission-badge.completed{ border-color: var(--health-good); color: var(--health-good); }
.mission-badge.completed .mission-badge-dot{ background: var(--health-good-soft); color: var(--health-good); }
.mission-badge.current{ border-color: var(--accent); color: var(--accent); --glow-color: color-mix(in srgb, var(--accent) 45%, transparent); animation: glow-pulse 2.6s ease-in-out infinite; }
.mission-badge.current .mission-badge-dot{ background: var(--accent-soft); color: var(--accent); }
.mission-badge.active{ background: var(--surface-2); }
.mission-connector{ width:20px; height:2px; background: var(--border); flex:none; }
.mission-connector.filled{ background: var(--health-good); }

.mission-panel{ background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-lg); padding:22px; }
.mission-panel-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:18px; flex-wrap:wrap; }
.mission-panel-head .btn svg{ margin-left:2px; }

.mission-tree{ position:relative; width:100%; aspect-ratio: 1000 / 460; margin-bottom:8px; }
.mission-tree svg{ position:absolute; inset:0; width:100%; height:100%; display:block; }
/* box-shadow (what .glow/glow-pulse animates) doesn't apply to SVG shapes —
   this halo is an SVG <circle>, so it gets its own opacity-based pulse. */
@keyframes mission-halo-pulse{ from{ opacity:.5; } to{ opacity:.85; } }
.mission-halo{ filter: blur(9px); animation: mission-halo-pulse 2.6s ease-in-out infinite alternate; }
/* Partial progress (branch fill + node ring) pulses gently so an
   in-between milestone reads as "alive/loading," not just a static
   in-progress color — the dasharray/dashoffset itself is the real
   percentage, this only breathes its opacity. */
@keyframes mission-loading-pulse{ from{ opacity:.6; } to{ opacity:1; } }
.mission-loading{ animation: mission-loading-pulse 1.6s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce){
  .mission-halo{ animation: none; opacity:.7; }
  .mission-badge.current{ animation: none; }
  .mission-loading{ animation: none; opacity:1; }
}
/* A silent hover/focus target over each SVG node — no visible label (a
   16-branch mission would just collide), the number on the branch itself
   and the matching row below are the legend. A custom CSS bubble (not the
   native title tooltip, which is too plain/slow for a full explanation)
   carries the real text, driven by data-tooltip + ::after so no JS
   positioning math is needed; keyboard users get it via :focus-visible too. */
.mission-node{ position:absolute; transform:translate(-50%,-50%); width:30px; height:30px; border-radius:50%; cursor:pointer; }
.mission-node:hover, .mission-node.is-synced{ box-shadow: 0 0 0 3px var(--accent-soft); }
.mission-node[data-tooltip]::after{
  content: attr(data-tooltip);
  position:absolute;
  bottom:calc(100% + 10px);
  left:50%;
  transform:translateX(-50%) translateY(4px);
  width:220px;
  white-space:pre-line;
  text-align:left;
  background: var(--surface-2);
  border:1px solid var(--border);
  color: var(--text);
  font-size:11.5px;
  font-weight:500;
  line-height:1.5;
  padding:9px 11px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  opacity:0;
  pointer-events:none;
  transition: opacity .15s ease, transform .15s ease;
  z-index:30;
}
.mission-node:hover::after, .mission-node:focus-visible::after{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

.mission-milestone-list{ display:flex; flex-direction:column; border:1px solid var(--border); border-radius: var(--radius-md); overflow:hidden; }
.mission-milestone-row{ display:grid; grid-template-columns:26px 1fr auto auto auto; align-items:center; gap:14px; padding:12px 14px; border-bottom:1px solid var(--border); transition: background .15s; }
.mission-milestone-row:last-child{ border-bottom:none; }
.mission-milestone-row.is-synced{ background: var(--surface-2); }
.mm-num{ width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; flex:none; }
.mm-label{ font-size:13px; font-weight:600; }
.mm-desc{ font-size:11.5px; color: var(--text-faint); margin-top:2px; line-height:1.4; }
.mm-control{ font-size:12.5px; color: var(--text-muted); }
.mm-pill{ font-size:11px; font-weight:700; padding:4px 10px; border-radius: var(--radius-pill); white-space:nowrap; }
.mm-pill[data-state="good"]{ background: var(--health-good-soft); color: var(--health-good); }
.mm-pill[data-state="avg"]{ background: var(--health-average-soft); color: var(--health-average); }
.mm-pill[data-state="empty"]{ background: var(--surface-2); color: var(--text-faint); }
@media (max-width: 760px){
  .mission-milestone-row{ grid-template-columns:1fr; gap:6px; }
}

/* Event Campaigns — date-anchored and deliberately NOT a locked ladder:
   every phase pill stays clickable regardless of status, so this reuses
   the pill shape of .mission-badge but with its own status vocabulary
   (not_started/in_progress/completed/partially_completed/missed) instead
   of locked/current/completed. */
.event-timeline{ display:flex; align-items:center; gap:0; overflow-x:auto; overflow-y:hidden; padding:8px 4px 18px; }
.event-phase-pill{ position:relative; display:flex; align-items:center; gap:10px; flex:none; min-width:132px; background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-md); padding:9px 14px 9px 9px; cursor:pointer; text-align:left; color: var(--text-muted); transition: border-color .15s ease, transform .15s ease, background .15s ease; }
.event-phase-pill:hover{ transform: translateY(-1px); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.event-phase-name{ font-size:12.5px; font-weight:700; color: var(--text); white-space:nowrap; }
.event-phase-date{ font-size:11px; color: var(--text-faint); }
/* The connecting segment between two nodes — a short flex sibling instead
   of an absolutely-positioned pseudo-element, so it never has to guess
   pill width/height and stays correct at any font size or language. */
.epp-connector{ flex:none; width:22px; height:2px; background: var(--border); transition: background .2s ease; }
.epp-connector.is-lit{ background: color-mix(in srgb, var(--accent) 70%, var(--health-good)); }
.epp-badge{ flex:none; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-size:11.5px; font-weight:800; background: var(--surface-2); border:1.5px solid var(--border); color: var(--text-faint); transition: background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease; }
.epp-body{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.event-phase-pill.active{ background: color-mix(in srgb, var(--accent) 10%, var(--surface-2)); border-color: var(--accent); }
.event-phase-pill.active .epp-badge{ background: var(--accent); border-color: var(--accent); color: var(--accent-text); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); animation: glow-pulse 2.4s ease-in-out infinite; --glow-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.event-phase-pill.status-completed{ border-color: color-mix(in srgb, var(--health-good) 55%, var(--border)); }
.event-phase-pill.status-completed .event-phase-name{ color: var(--health-good); }
.event-phase-pill.status-completed .epp-badge{ background: color-mix(in srgb, var(--health-good) 20%, transparent); border-color: var(--health-good); color: var(--health-good); }
.event-phase-pill.status-in_progress{ border-color: color-mix(in srgb, var(--health-average) 55%, var(--border)); }
.event-phase-pill.status-missed{ border-color: var(--health-poor); }
.event-phase-pill.status-missed .event-phase-name{ color: var(--health-poor); }
.event-phase-pill.is-locked{ cursor:default; }
.event-phase-pill.is-locked .epp-badge{ color: var(--text-faint); }
.event-phase-pill.is-past .epp-badge{ background: color-mix(in srgb, var(--health-good) 14%, transparent); border-color: color-mix(in srgb, var(--health-good) 55%, var(--border)); color: var(--health-good); }
@media (prefers-reduced-motion: reduce){ .event-phase-pill.active .epp-badge{ animation:none; } }

.event-milestone-row{ grid-template-columns:26px 1fr auto auto auto; }
.event-sys-tag{ text-transform:uppercase; letter-spacing:.03em; font-weight:700; color: var(--accent); font-size:10px; }
.event-status-pill[data-state="completed"]{ background: var(--health-good-soft); color: var(--health-good); }
.event-status-pill[data-state="in_progress"], .event-status-pill[data-state="partially_completed"]{ background: var(--health-average-soft); color: var(--health-average); }
.event-status-pill[data-state="missed"]{ background: var(--health-poor-soft); color: var(--health-poor); }
.event-status-pill[data-state="not_started"]{ background: var(--surface-2); color: var(--text-faint); }
.event-status-pill[data-state="not_applicable"]{ background: var(--surface-2); color: var(--text-faint); text-decoration: line-through; }
@media (max-width: 900px){
  .event-milestone-row{ grid-template-columns:1fr; gap:6px; }
}

/* ============================================================
   Brand Book builder (Quest 2) — two-pane guided wizard + live
   landscape GSM-style preview, reusing .card/.checkbox-chip/.field
   from above for every input, and .report-sheet's white-card-on-dark
   print technique for the sheet itself.
   ============================================================ */
.brandbook-layout{ display:grid; grid-template-columns: 420px 1fr; gap:28px; align-items:start; }
.brandbook-right{ position:sticky; top:84px; max-height:calc(100vh - 110px); overflow-y:auto; background: var(--surface-2); border-radius: var(--radius-lg); padding:18px; }
@media (max-width:960px){
  /* minmax(0,1fr), not 1fr: a plain 1fr track grows to its widest child's
     min-content, which pushed the whole left column ~30px past a phone
     screen and clipped the right edge of every section. */
  .brandbook-layout{ grid-template-columns:minmax(0,1fr); }
  .brandbook-left{ min-width:0; }
  .brandbook-right{ position:static; max-height:none; }
}

/* Guidelines section tabs — every section is independently reachable, no
   lock, so this replaces the old linear "Step X of Y" progress bar. */
.bb-tab-row{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:22px; border-bottom:1px solid var(--border); padding-bottom:14px; }
.bb-tab{ display:inline-flex; align-items:center; gap:6px; background:var(--surface-2); border:1px solid var(--border); color:var(--text-muted); font-size:12px; font-weight:700; padding:7px 13px; border-radius:var(--radius-pill); cursor:pointer; transition:border-color .15s,color .15s,background .15s; }
.bb-tab:hover{ border-color:var(--accent); color:var(--text); }
.bb-tab.done{ background: var(--health-good-soft); border-color: var(--health-good); color: var(--health-good); }
.bb-tab.active{ background:var(--accent); border-color:var(--accent); color:var(--accent-text,#fff); }
.bb-tab.done.active{ background:var(--accent); border-color:var(--accent); color:var(--accent-text,#fff); }
/* Phones: 8 pill tabs ~30px tall wrapped onto 2-3 rows; now one row that
   scrolls sideways (the open tab is scrolled into view), each tab 44px. */
@media (max-width: 640px){
  .bb-tab-row{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; margin-left:-16px; margin-right:-16px; padding:0 16px 12px; }
  .bb-tab-row::-webkit-scrollbar{ display:none; }
  .bb-tab{ flex:none; min-height:44px; padding:0 16px; font-size:13px; white-space:nowrap; }
}
/* Where the preview drops below the form, a button at the top of the form
   jumps down to it. */
.bb-preview-jump{ display:none; }
@media (max-width:960px){
  .bb-preview-jump{ display:inline-flex; align-items:center; gap:6px; min-height:44px; margin:0 0 14px; padding:0 16px; border-radius:999px; border:1px solid var(--border); background: var(--surface); color: var(--text); font:inherit; font-size:13.5px; font-weight:700; cursor:pointer; }
  .bb-preview-jump svg{ color: var(--accent); }
  .brandbook-right{ scroll-margin-top: 76px; }
}

/* Overall Brand Guidelines completion — same isStepFilled() count the tab
   checkmarks use, so this bar and the tabs never disagree. */
.bb-progress{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; min-width:160px; }
.bb-progress-bar{ width:160px; height:6px; border-radius:999px; background:var(--surface-2); overflow:hidden; }
.bb-progress-bar span{ display:block; height:100%; background:var(--health-good); border-radius:999px; transition:width .2s ease; }
.bb-progress-label{ font-size:11px; font-weight:700; color:var(--text-muted); }

/* Progressive preview (right pane, edit view) — a blank sheet that only
   gains content as each section is actually filled in. Plain white/dark
   text always, independent of the app's own theme, same as .brandbook-sheet
   — it's meant to read as a page, not as app chrome. */
.bb-preview-sheet{ background:#ffffff; color:#1a1816; border-radius:10px; box-shadow:0 12px 40px rgba(0,0,0,.35); min-height:320px; padding:28px 24px; display:flex; flex-direction:column; gap:22px; }
.bb-preview-blank{ align-items:center; justify-content:center; text-align:center; color:#6b665f; font-size:12.5px; line-height:1.6; }
.bb-preview-blank span{ max-width:220px; }
.bb-preview-logo img{ max-width:100%; max-height:96px; object-fit:contain; }
.bb-preview-name{ font-size:24px; font-weight:800; }
.bb-preview-label{ font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:#8a8580; margin-bottom:8px; }

.bb-chip-row{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.bb-palette-row{ display:flex; gap:10px; margin-bottom:10px; flex-wrap:wrap; }
.bb-swatch{ width:38px; height:38px; border-radius:9px; border:1px solid var(--border); flex:none; }
.bb-color-field{ display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--border-soft); }
.bb-color-field:last-child{ border-bottom:none; }
.bb-color-field input[type=color]{ width:38px; height:38px; border-radius:9px; border:1px solid var(--border); background:none; padding:0; cursor:pointer; flex:none; }
.bb-color-code{ font-size:11px; color: var(--text-faint); font-family: ui-monospace, monospace; }

.bb-color-main-row{ display:flex; gap:12px; }
.bb-color-main-card{ position:relative; flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:6px; padding:14px 10px 12px; border:1px solid var(--border-soft); border-radius: var(--radius-md); }
.bb-color-main-card input[type=color]{ width:100%; height:64px; border-radius:9px; border:1px solid var(--border); background:none; padding:0; cursor:pointer; }
.bb-color-main-label{ font-size:12.5px; font-weight:800; text-transform:capitalize; }
.bb-color-main-card .icon-btn{ position:absolute; top:8px; right:8px; }
/* Typed hex code — a real text field, sized so "#AABBCC" fits exactly. */
.bb-hex-input{ font-family: ui-monospace, monospace; font-size:11.5px; text-transform:uppercase; letter-spacing:.02em; text-align:center; width:88px; flex:none; padding:5px 6px; height:auto; }
.bb-color-main-card .bb-hex-input{ width:100%; }

.bb-font-preview{ font-size:22px; margin-bottom:2px; }
.bb-font-meta{ font-size:11.5px; color: var(--text-muted); }
.bb-font-badge{ display:inline-block; font-size:10px; font-weight:800; padding:2px 8px; border-radius:999px; background: var(--health-good-soft); color: var(--health-good); text-transform:uppercase; letter-spacing:.03em; margin-left:8px; }
.bb-direction-desc{ font-size:12px; color: var(--text-muted); margin:0 0 6px; }

/* Brand Builder hub — the two top-level doors (js/views/brand-builder.js) */
.bb-hub-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:20px; }
.bb-hub-door{ position:relative; display:flex; flex-direction:column; align-items:flex-start; text-decoration:none; color:inherit; padding:32px 28px; cursor:pointer; transition: transform .15s; }
.bb-hub-door:hover{ transform: translateY(-2px); }
.bb-hub-icon{ width:60px; height:60px; border-radius: var(--radius-md); background: color-mix(in srgb, var(--brand-tint) 14%, transparent); color: var(--brand-tint); display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
.bb-hub-door h2{ font-size:20px; margin:0 0 6px; }
.bb-hub-door p{ font-size:13px; color: var(--text-muted); margin:0 0 18px; }
.bb-hub-progress{ width:100%; margin-top:auto; }
.bb-hub-bar{ height:6px; border-radius:999px; background: var(--surface-2); border:1px solid color-mix(in srgb, var(--brand-tint) 25%, var(--border)); overflow:visible; margin-bottom:8px; }
.bb-hub-bar span{ display:block; height:100%; min-width:6px; background: var(--brand-tint); border-radius:999px; box-shadow: 0 0 8px 1px color-mix(in srgb, var(--brand-tint) 80%, transparent), 0 0 16px color-mix(in srgb, var(--brand-tint) 45%, transparent); }
.bb-hub-progress > span{ font-size:11.5px; color: var(--text-faint); font-weight:700; }

@media (max-width: 760px){
  .bb-hub-grid{ grid-template-columns: 1fr; }
}

/* Tools hub — Brainstorm / Copy Studio / Sales Tracker (js/views/tools.js,
   Brief Revisi 2 fase 2). Same card language as .bb-hub-door, but an
   auto-fit grid (3 cards today, room for more later) instead of a fixed
   two-up layout. */
.tools-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap:20px; }
.tool-card{ position:relative; display:flex; flex-direction:column; align-items:flex-start; text-decoration:none; color:inherit; padding:32px 28px; cursor:pointer; transition: transform .15s; }
.tool-card:hover{ transform: translateY(-2px); }
.tool-card h2{ font-size:20px; margin:0 0 6px; }
.tool-card p{ font-size:13px; color: var(--text-muted); margin:0; }
.tool-card.is-next{ border-color: color-mix(in srgb, var(--brand-tint) 45%, var(--border)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-tint) 25%, transparent); }
.tool-card-badge{ position:absolute; top:18px; right:18px; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color: var(--text-faint); background: var(--surface-2); border:1px solid var(--border); border-radius:999px; padding:3px 9px; }
.tool-card-status{ margin-top:16px; font-size:12.5px; font-weight:700; color: var(--brand-tint); }

@media (max-width: 760px){
  .tools-grid{ grid-template-columns: 1fr; }
}

/* Plays once, the first time this row appears right after an app finishes —
   the entrance itself (fading/sliding in) plus a green pulse so the "this
   card just moved down here" transition actually reads as a transition,
   not just a different list on the next render. */
@keyframes beginner-done-row-in{
  0%{ opacity:0; transform: translateY(-8px); background: var(--health-good-soft); }
  60%{ opacity:1; transform: translateY(0); background: var(--health-good-soft); }
  100%{ opacity:1; transform: translateY(0); background: transparent; }
}

/* Callout bubble pointing at whatever app just unlocked — position:fixed,
   placed in JS from the target's getBoundingClientRect() (see
   showCalloutBubble in js/views/beginner-home.js), same reasoning as
   js/dom.js's openMenu(): viewport coordinates need no scroll math this way. */
.app-callout-bubble{
  position:fixed; z-index:70; max-width:280px;
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius: var(--radius-md);
  background: var(--accent); color: var(--accent-text);
  font-size:13px; font-weight:600; line-height:1.4;
  box-shadow: var(--shadow-lg);
  animation: app-callout-in .25s ease-out;
}
.app-callout-bubble button{ flex:none; width:20px; height:20px; border-radius:50%; border:0; background: rgba(0,0,0,.12); color:inherit; display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; }
.app-callout-bubble button:hover{ background: rgba(0,0,0,.22); }
.app-callout-arrow{ position:absolute; top:100%; left: var(--arrow-left, 50%); width:14px; height:14px; margin-left:-7px; background: var(--accent); transform: rotate(45deg); border-radius:0 0 3px; }
@keyframes app-callout-in{ from{ opacity:0; transform: translateY(6px); } to{ opacity:1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce){ .app-callout-bubble{ animation:none; } }

.brand-analytics-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap:16px; }
.brand-analytics-card{ transition: opacity .15s, transform .15s; }
.brand-analytics-card.dragging{ opacity:.35; }
.brand-analytics-card-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; }
.brand-analytics-card-title{ font-size:13px; font-weight:700; color: var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bb-hub-door-locked{ cursor:not-allowed; opacity:.5; pointer-events:none; }
.bb-hub-door-locked .bb-hub-icon{ background: var(--surface-2); color: var(--text-faint); }

/* One-shot celebration when Brand DNA's save just pushed it to 100% —
   see js/views/brand-builder.js's celebrateDnaComplete(). */
@keyframes bb-hub-celebrate{
  0%{ transform:scale(1); border-color: var(--border); box-shadow:none; }
  35%{ transform:scale(1.025); border-color: var(--health-good); box-shadow: 0 0 0 3px color-mix(in srgb, var(--health-good) 45%, transparent), 0 0 30px color-mix(in srgb, var(--health-good) 40%, transparent); }
  100%{ transform:scale(1); border-color: var(--border); box-shadow:none; }
}
.bb-hub-door-celebrate{ animation: bb-hub-celebrate 1.1s ease-out; }

/* Live brand-application mockups — plain CSS, no image generation, driven
   entirely by --bb-* custom properties set on .bb-mockup-stage so every
   card re-skins instantly when a color/font/visual-direction changes. */
.bb-mockup-stage{ display:grid; grid-template-columns: repeat(auto-fill, minmax(170px,1fr)); gap:16px; }
.bb-mockup{ background: var(--bb-bg,#fff); border-radius: var(--bb-radius,12px); overflow:hidden; border:1px solid rgba(0,0,0,.08); }
.bb-mockup-label{ font-size:10px; text-transform:uppercase; letter-spacing:.06em; color: var(--text-faint); font-weight:700; margin-bottom:8px; }
.bb-mockup-headline{ font-family: var(--bb-font-primary, var(--font-display)); color: var(--bb-primary,#111); font-weight:800; line-height:1.15; font-size:16px; }
.bb-mockup-body{ font-family: var(--bb-font-secondary, var(--font-body)); color: var(--bb-text,#333); font-size:11.5px; }
.bb-mockup-chip{ display:inline-block; background: var(--bb-accent,#999); color: var(--bb-bg,#fff); font-family: var(--bb-font-secondary, var(--font-body)); font-size:10.5px; font-weight:700; padding:5px 11px; border-radius:999px; }
.bb-mockup-cta{ display:inline-block; background: var(--bb-accent,#999); color: var(--bb-bg,#fff); font-size:11px; font-weight:700; padding:7px 14px; border-radius:6px; font-family: var(--bb-font-secondary, var(--font-body)); }
.bb-mockup-social{ aspect-ratio:1; padding:16px; display:flex; flex-direction:column; justify-content:space-between; gap:8px; }
.bb-mockup-card{ aspect-ratio:1.6; padding:16px; display:flex; flex-direction:column; justify-content:space-between; gap:8px; }
.bb-mockup-website{ aspect-ratio:1.4; display:flex; flex-direction:column; }
.bb-mockup-browser-bar{ height:20px; background:rgba(0,0,0,.06); display:flex; align-items:center; gap:4px; padding:0 8px; flex:none; }
.bb-mockup-browser-dot{ width:6px; height:6px; border-radius:50%; background:rgba(0,0,0,.2); }
.bb-mockup-website-body{ flex:1; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:8px; padding:16px; }
.bb-mockup-packaging{ aspect-ratio:.75; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; border-width:6px; border-style:solid; border-color: var(--bb-accent,#999); padding:16px; text-align:center; }
.bb-mockup-poster{ aspect-ratio:.7; padding:20px; display:flex; flex-direction:column; justify-content:flex-end; gap:8px; }
.bb-mockup-ad{ aspect-ratio:2.2; padding:16px; display:flex; align-items:center; justify-content:space-between; gap:10px; }

/* Brand Book (Review step + PDF; js/views/brand-guidelines.js) — every
   page is a fixed 1123x794 artboard (A4 landscape), laid out like a slide.
   On screen each artboard is scaled to the sheet's width with `zoom`
   (--bbk-zoom, set by fitBrandBook()); the PDF path captures it at zoom 1,
   so the review is the PDF, page for page. Everything is themed live from
   the brand's own picks via the --bb-* custom properties set on
   .brandbook-sheet (brandThemeVars): headings in --bb-font-primary, body
   in --bb-font-secondary, surfaces from the palette, corner radius from
   the visual direction. Colors here are fixed hex on purpose, independent
   of the app's light/dark theme — and nothing html2canvas can't draw
   (no color-mix, clip-path, blend modes; `filter` only on <img>, which
   the export bakes in first). */
.brandbook-sheet{ --bbk-zoom:1; --bbk-display: var(--bb-font-primary, inherit), var(--font-display); --bbk-paper:#fff; --bbk-ink:#1a1816; --bbk-muted:#8a8580; --bbk-line:#e9e4dc; --bbk-r: var(--bb-radius, 12px); display:flex; flex-direction:column; gap:16px; font-family: var(--font-body); color:#1a1816; }
.brandbook-page{ position:relative; }
.brandbook-page.bbk-page{ zoom: var(--bbk-zoom); width:1123px; height:794px; min-height:0; box-sizing:border-box; flex:none; padding:0; display:flex; overflow:hidden; background:#fff; color:var(--bbk-ink); font-family: var(--bb-font-secondary, inherit), var(--font-body); font-size:14px; line-height:1.5; border-radius:6px; box-shadow: 0 10px 36px rgba(0,0,0,.32); }
.bbk-page *{ box-sizing:border-box; }
.bbk-inner{ position:relative; flex:1; min-width:0; display:flex; flex-direction:column; padding:44px 64px 0 86px; }
.bbk-page img{ object-fit:contain; }
.bbk-export-host{ position:fixed; left:-20000px; top:0; width:1123px; gap:0; }
.bbk-export-host .bbk-page{ border-radius:0; box-shadow:none; }
/* html2canvas finds each font's baseline by dropping a 1x1 <img> next to a
   text span in a throwaway <div> on <body>. The global `img{display:block}`
   reset pushes that img onto its own line, so every baseline measures one
   descent too low and all PDF text lands ~0.25em below where the browser
   draws it. Keep that probe inline. */
body > div > img[width="1"][height="1"]{ display:inline !important; }

/* Shared by the Brand DNA PDF too (js/views/brand-dna.js). */
.brandbook-wpk-mark{ position:absolute; top:26px; right:36px; width:56px; height:auto; opacity:.55; }
.brandbook-page-eyebrow{ font-family: var(--font-display); font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:#8a8580; margin-bottom:14px; }
.brandbook-cover-name{ font-family: var(--font-display); font-size:38px; font-weight:800; margin-bottom:8px; }
.brandbook-cover-tagline{ font-size:15px; color:#5b564f; }

/* Page chrome */
.bbk-spine{ position:absolute; left:0; top:0; bottom:0; width:14px; display:flex; flex-direction:column; }
.bbk-strip{ position:absolute; left:0; right:0; bottom:0; height:10px; display:flex; }
.bbk-spine span, .bbk-strip span, .bbk-cover-seam span{ display:block; min-width:0; min-height:0; }
.bbk-head{ display:flex; align-items:center; justify-content:space-between; height:26px; flex:none; margin-bottom:32px; }
.bbk-chapter{ display:flex; align-items:center; gap:10px; font-family: var(--font-body); font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.bbk-chapter b{ background: var(--bb-primary); color: var(--bb-on-primary); border-radius:4px; letter-spacing:.06em; font-weight:700; line-height:1.5; padding:2px 7px; }
/* The Wepeka wordmark is part-white, so it's flattened to one ink: black on
   paper, white on brand-color pages (.bbk-on-dark). */
.bbk-wpk{ width:66px; height:auto; opacity:.5; flex:none; filter: brightness(0); }
.bbk-title{ font-family: var(--bbk-display); font-size:42px; font-weight:700; line-height:1.2; letter-spacing:-.01em; margin:-4px 0 22px; flex:none; }
.bbk-lead{ font-size:14px; line-height:1.6; color:#5a564f; max-width:760px; margin:-12px 0 24px; flex:none; }
.bbk-body{ flex:1; min-height:0; display:flex; flex-direction:column; padding-bottom:28px; }
.bbk-foot{ flex:none; margin-top:auto; height:52px; display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--bbk-line); font-family: var(--font-body); font-size:10.5px; letter-spacing:.03em; color:var(--bbk-muted); }
.bbk-foot-pn{ font-variant-numeric: tabular-nums; font-weight:700; }

/* Layout + shared pieces */
.bbk-cols{ display:flex; gap:22px; flex:1; min-height:0; }
.bbk-rows{ display:flex; flex-direction:column; gap:20px; flex:1; min-height:0; }
.bbk-grid{ display:grid; gap:18px; grid-auto-rows:1fr; min-height:0; }
.bbk-card{ background:#fff; border:1px solid var(--bbk-line); border-radius:var(--bbk-r); padding:24px; display:flex; flex-direction:column; gap:10px; overflow:hidden; min-height:0; }
.bbk-card-text{ line-height:1.6; color:#33302c; }
.bbk-panel{ flex:1; min-width:0; background: var(--bb-tint); border-radius:var(--bbk-r); padding:26px 28px; display:flex; flex-direction:column; }
.bbk-label{ display:block; font-family: var(--font-body); font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--bbk-muted); }
.bbk-label-brand{ color:var(--bbk-ink); }
.bbk-label-brand::before{ content:""; display:inline-block; width:8px; height:8px; border-radius:2px; background: var(--bb-primary); margin-right:8px; }
.bbk-note{ font-size:12.5px; line-height:1.65; color:#5a564f; margin-top:6px; }
.bbk-empty{ flex:1; display:flex; flex-direction:column; gap:14px; align-items:center; justify-content:center; text-align:center; padding:40px; border:1.5px dashed #d9d3c9; border-radius:var(--bbk-r); color:#6b665f; font-size:14px; }
/* Review only — the PDF/print build drops pages with these boxes. */
.bbk-empty-cta{ display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:999px; border:1.5px solid var(--bb-primary, #1a1816); background:transparent; color: var(--bbk-ink); font: inherit; font-size:13px; font-weight:700; text-decoration:none; cursor:pointer; }
.bbk-empty-cta:hover{ background: var(--bb-tint, #f3efe8); }
.bbk-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.bbk-chip{ display:inline-block; padding:6px 13px; border-radius:999px; border:1px solid #d9d3c9; font-size:12px; font-weight:600; background:#fff; }
.bbk-chip-lg{ font-size:16px; padding:9px 18px; }
.bbk-chip-no{ text-decoration:line-through; color:var(--bbk-muted); }
.bbk-chip-cta{ background: var(--bb-accent); color: var(--bb-on-accent); border-color:transparent; }
.bbk-x, .bbk-ok{ display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; flex:none; border-radius:50%; background:#c94a3d; color:#fff; font-size:12px; font-weight:700; font-family: var(--font-body); }
.bbk-ok{ background:#1f9d55; }
.bbk-stage{ display:flex; align-items:center; justify-content:center; background:#faf8f5; border:1px solid var(--bbk-line); border-radius:var(--bbk-r); min-height:0; min-width:0; }

/* Cover / closing — brand-color field, palette seam, logo panel */
.brandbook-page.bbk-cover, .brandbook-page.bbk-type{ padding:0; flex-direction:row; }
.bbk-cover-field{ flex:1; min-width:0; display:flex; flex-direction:column; padding:44px 56px 0 78px; background: var(--bb-primary); color: var(--bb-on-primary); }
.bbk-cover-main{ margin-top:auto; margin-bottom:60px; }
.bbk-cover-title{ font-family: var(--bbk-display); font-weight:700; line-height:1.14; letter-spacing:-.02em; }
.bbk-cover-sub{ font-size:18px; line-height:1.5; margin-top:22px; opacity:.88; max-width:460px; }
.bbk-cover-seam{ flex:0 0 22px; display:flex; flex-direction:column; }
.bbk-cover-panel{ flex:0 0 40%; position:relative; display:flex; align-items:center; justify-content:center; }
.bbk-cover-panel .bbk-wpk{ position:absolute; top:44px; right:56px; }
.bbk-cover-logo-wrap{ width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.bbk-cover-logo{ max-width:64%; max-height:44%; }
.bbk-cover-caption{ display:none; }
.bbk-cover-monogram{ font-family: var(--bb-font-primary, inherit), var(--font-display); font-size:280px; font-weight:700; line-height:1.2; color: var(--bb-primary); }
.bbk-cover .bbk-foot, .bbk-divider .bbk-foot{ color:inherit; border-top-color: rgba(128,128,128,.4); }
.bbk-cover .bbk-foot span, .bbk-divider .bbk-foot span{ opacity:.75; }

/* Chapter divider */
.brandbook-page.bbk-divider{ background: var(--bb-primary); color: var(--bb-on-primary); }
.bbk-divider .bbk-inner{ padding-bottom:10px; }
.bbk-divider-num{ position:absolute; right:36px; bottom:-101px; font-family: var(--bbk-display); font-size:470px; font-weight:700; line-height:1.2; letter-spacing:-.04em; opacity:.1; }
.bbk-divider-main{ position:relative; margin-top:auto; margin-bottom:56px; max-width:74%; }
.bbk-divider-bar{ width:72px; height:6px; background: var(--bb-accent); margin-bottom:28px; }
.bbk-divider-title{ font-family: var(--bbk-display); font-weight:700; line-height:1.16; letter-spacing:-.02em; }
.bbk-divider-sub{ font-size:18px; line-height:1.5; margin-top:20px; opacity:.88; max-width:520px; }
.bbk-on-dark .bbk-wpk{ filter: brightness(0) invert(1); opacity:.8; }

/* Contents */
.bbk-toc{ flex:1; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:repeat(4,1fr); grid-auto-flow:column; column-gap:56px; }
.bbk-toc-row{ display:flex; align-items:center; gap:20px; border-top:1px solid var(--bbk-line); min-height:0; }
.bbk-toc-num{ flex:0 0 62px; font-family: var(--bbk-display); font-size:40px; font-weight:700; line-height:1.2; }
.bbk-toc-text{ flex:1; min-width:0; }
.bbk-toc-label{ font-size:17px; font-weight:700; line-height:1.25; }
.bbk-toc-desc{ font-size:12.5px; color:var(--bbk-muted); margin-top:3px; line-height:1.45; }
.bbk-toc-page{ flex:none; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size:13px; color:var(--bbk-muted); }

/* Foundation / personality / voice / tagline */
.bbk-quote{ display:flex; flex-direction:column; padding:30px 32px; border-radius:var(--bbk-r); background: var(--bb-primary); color: var(--bb-on-primary); overflow:hidden; }
.bbk-quote-mark{ font-family: var(--bb-font-primary, inherit), Georgia, serif; font-size:130px; font-weight:700; line-height:1.2; height:84px; opacity:.35; }
.bbk-quote-text{ font-family: var(--bb-font-primary, inherit), var(--font-display); font-weight:700; line-height:1.22; letter-spacing:-.01em; }
.bbk-quote .bbk-label{ color:inherit; opacity:.7; }
.bbk-bigword{ font-family: var(--bbk-display); font-size:52px; font-weight:700; line-height:1.2; margin:2px 0 20px; }
.bbk-trait-head, .bbk-trait-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.bbk-trait-head{ font-family: var(--font-body); font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--bbk-muted); padding-bottom:10px; border-bottom:2px solid var(--bbk-ink); }
.bbk-trait-row{ padding:13px 0; border-bottom:1px solid var(--bbk-line); font-size:17px; }
.bbk-trait-yes{ font-weight:700; }
.bbk-trait-no{ color:var(--bbk-muted); text-decoration:line-through; }
.bbk-axis{ margin-top:16px; }
.bbk-axis-ends{ display:flex; justify-content:space-between; font-size:12px; font-weight:600; margin-bottom:9px; }
.bbk-axis-track{ position:relative; height:4px; border-radius:2px; background: rgba(0,0,0,.13); }
.bbk-axis-dot{ position:absolute; top:-7px; width:18px; height:18px; margin-left:-9px; border-radius:50%; background: var(--bb-primary); border:3px solid #fff; }
.bbk-example{ margin-top:22px; background:#fff; border-radius:var(--bbk-r); padding:16px 18px; }
.bbk-example-text{ font-size:14.5px; font-style:italic; line-height:1.55; margin-top:6px; }
.bbk-voice-meta{ margin-top:auto; padding-top:16px; display:flex; gap:28px; }
.bbk-tagline-stage{ display:flex; align-items:center; min-width:0; padding:48px 56px; background: var(--bb-tint); border-left:8px solid var(--bb-primary); border-radius:var(--bbk-r); }
.bbk-tagline-text{ font-family: var(--bb-font-primary, inherit), var(--font-display); font-weight:700; line-height:1.2; letter-spacing:-.01em; }
.bbk-lockup{ flex:1; align-items:center; justify-content:center; text-align:center; }
.bbk-lockup img{ max-height:96px; max-width:70%; }
.bbk-lockup-name{ font-family: var(--bb-font-primary, inherit), var(--font-display); font-size:30px; font-weight:700; }
.bbk-lockup-line{ font-size:13px; letter-spacing:.04em; color:#5a564f; }

/* Value proposition / direction — one filled "lead" card, the rest tinted */
.bbk-pillar, .bbk-direction{ flex:1; min-width:0; display:flex; flex-direction:column; padding:30px; border-radius:var(--bbk-r); background: var(--bb-tint); overflow:hidden; }
.bbk-pillar-lead, .bbk-direction-lead{ background: var(--bb-primary); color: var(--bb-on-primary); }
.bbk-pillar-num{ font-family: var(--bbk-display); font-size:88px; font-weight:700; line-height:1.2; margin-top:-14px; opacity:.3; }
.bbk-pillar-title{ font-family: var(--bbk-display); font-size:25px; font-weight:700; line-height:1.24; margin:auto 0 12px; }
.bbk-pillar-desc{ line-height:1.6; opacity:.86; min-height:96px; }
.bbk-direction-shape{ width:76px; height:76px; background: var(--bb-primary); margin-bottom:30px; }
.bbk-direction-lead .bbk-direction-shape{ background: var(--bb-on-primary); }
.bbk-direction-name{ font-family: var(--bbk-display); font-size:34px; font-weight:700; line-height:1.2; }
.bbk-direction-desc{ font-size:14.5px; line-height:1.65; margin-top:12px; opacity:.86; }
.bbk-direction-lead .bbk-label{ color:inherit; opacity:.7; }

/* Logo */
.bbk-clearspace{ position:relative; align-self:center; margin:auto 0; display:flex; align-items:center; justify-content:center; padding:34px 46px; border:1.5px dashed #b9b2a6; }
.bbk-clearspace img{ height:76px; width:auto; max-width:190px; display:block; }
.bbk-clearspace i{ position:absolute; margin:-7px 0 0 -3px; font:italic 12px/1 Georgia, serif; color:var(--bbk-muted); }
.bbk-minsize{ flex-direction:row; align-items:center; gap:22px; }
.bbk-minsize-rule{ width:80px; margin-top:8px; padding-top:4px; border-top:1px solid var(--bbk-ink); font-size:9.5px; text-align:center; white-space:nowrap; }
.bbk-minsize-rule span{ display:block; margin:0 -20px; }
.bbk-tile{ position:relative; flex:1; min-width:0; display:flex; align-items:center; justify-content:center; border:1px solid var(--bbk-line); border-radius:var(--bbk-r); overflow:hidden; }
.bbk-tile img{ max-width:52%; max-height:50%; }
.bbk-tile-label{ position:absolute; left:16px; bottom:12px; font-family: var(--font-body); font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; opacity:.75; }
.bbk-tile-dont{ background:#fdf4f2; border-color:#f0c9c4; }
.bbk-tile-dont .bbk-tile-label{ color:#c94a3d; opacity:1; }
.bbk-tile .bbk-x{ position:absolute; top:12px; right:12px; }
.bbk-figure{ flex:1; min-width:0; max-width:56%; display:flex; flex-direction:column; gap:14px; }
.bbk-figure .bbk-stage{ flex:1; }
.bbk-figure-cap{ flex:none; }
.bbk-figure-cap b{ display:block; font-size:16px; }
.bbk-figure-cap span{ display:block; font-size:12.5px; line-height:1.5; color:#5a564f; margin-top:3px; }

/* Colour */
.bbk-palette{ flex:1; min-height:0; display:flex; border:1px solid var(--bbk-line); border-radius:var(--bbk-r); overflow:hidden; }
.bbk-swatch{ min-width:0; display:flex; flex-direction:column; justify-content:space-between; padding:22px 20px; }
.bbk-swatch-role{ font-family: var(--font-body); font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.bbk-swatch-codes{ font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size:11px; line-height:1.75; white-space:nowrap; }
.bbk-swatch-hex{ font-family: var(--font-body); font-size:22px; font-weight:700; letter-spacing:.01em; margin-bottom:6px; }
.bbk-essence{ flex:1; min-width:0; display:flex; flex-direction:column; }
.bbk-essence-fill{ flex:0 0 58%; display:flex; flex-direction:column; justify-content:space-between; padding:20px 22px; border-radius:var(--bbk-r); border:1px solid rgba(0,0,0,.06); font-family: var(--font-body); font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.bbk-essence-text{ margin-top:24px; line-height:1.55; padding-right:10px; }
.bbk-ratio{ flex:none; display:flex; height:88px; border-radius:var(--bbk-r); overflow:hidden; border:1px solid var(--bbk-line); }
.bbk-ratio span{ display:flex; align-items:flex-end; padding:10px 12px; font-family: var(--font-body); font-size:15px; font-weight:700; min-width:0; }
.bbk-roles{ margin-top:26px; display:flex; flex-direction:column; gap:14px; }
.bbk-role{ display:flex; gap:12px; font-size:13px; line-height:1.55; }
.bbk-role i{ flex:none; width:14px; height:14px; margin-top:3px; border-radius:50%; border:1px solid rgba(0,0,0,.14); }
.bbk-pairs{ flex:1; min-height:0; margin-top:14px; display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:1fr; gap:12px; }
.bbk-pair{ display:flex; flex-direction:column; min-width:0; padding:14px; border-radius:var(--bbk-r); border:1px solid rgba(0,0,0,.08); overflow:hidden; }
.bbk-pair-aa{ font-family: var(--bb-font-primary, inherit), var(--font-display); font-size:40px; font-weight:700; line-height:1.2; }
.bbk-pair-label{ margin-top:auto; font-size:10.5px; font-weight:600; line-height:1.35; }
.bbk-pair-ratio{ font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size:9.5px; opacity:.8; margin-top:3px; }

/* Type specimen */
.bbk-type-side{ flex:0 0 34%; display:flex; flex-direction:column; padding:44px 40px 44px 56px; background: var(--bb-primary); color: var(--bb-on-primary); }
.bbk-type-side .bbk-chapter{ height:26px; }
.bbk-type-side .bbk-chapter b{ background: var(--bb-on-primary); color: var(--bb-primary); }
.bbk-type-role{ font-family: var(--bbk-display); font-size:46px; font-weight:700; line-height:1.2; letter-spacing:-.01em; margin-top:108px; }
.bbk-type-desc{ font-size:13.5px; line-height:1.7; opacity:.9; margin-top:18px; }
.bbk-type-cat{ margin-top:auto; padding-top:14px; border-top:1px solid rgba(128,128,128,.45); font-size:11.5px; line-height:1.6; opacity:.85; }
.bbk-type-main{ position:relative; flex:1; min-width:0; display:flex; flex-direction:column; padding:44px 64px 0 56px; }
.bbk-type-main .bbk-wpk{ position:absolute; top:44px; right:64px; }
.bbk-type-hero{ display:flex; align-items:flex-end; gap:36px; margin-top:26px; }
.bbk-type-aa{ font-size:250px; font-weight:700; line-height:1.2; margin:-44px 0 -40px; letter-spacing:-.03em; }
.bbk-type-name{ font-weight:700; line-height:1.2; margin:6px 0 12px; }
.bbk-type-weights{ display:flex; gap:18px; font-size:18px; padding-bottom:14px; }
.bbk-type-glyphs{ margin-top:26px; padding-top:20px; border-top:1px solid var(--bbk-line); font-size:26px; line-height:1.55; word-break:break-all; color:#33302c; }
.bbk-type-sample{ margin:auto 0 26px; padding:16px 22px 22px; background: var(--bb-tint); border-radius:var(--bbk-r); }
.bbk-type-sample .bbk-label{ margin-bottom:8px; text-transform:none; letter-spacing:.04em; }
.bbk-leading{ flex:1; min-width:0; display:flex; flex-direction:column; padding:26px; border:1px solid var(--bbk-line); border-top:5px solid #c94a3d; border-radius:var(--bbk-r); overflow:hidden; }
.bbk-leading-ok{ border-top-color:#1f9d55; background:#f4faf6; }
.bbk-leading-head{ display:flex; align-items:center; gap:10px; font-family: var(--font-body); font-size:14px; font-weight:700; margin-bottom:20px; }
.bbk-leading-text{ font-size:19px; color:#33302c; }

/* Imagery / don'ts / applications */
.bbk-imagery{ flex:1; min-width:0; }
.bbk-imagery-name{ font-family: var(--bbk-display); font-size:24px; font-weight:700; margin-bottom:10px; }
.bbk-imagery-row{ display:grid; grid-template-columns:118px 1fr; gap:14px; padding:11px 0; border-top:1px solid var(--bbk-line); font-size:14px; line-height:1.55; }
.bbk-imagery-row .bbk-label{ padding-top:2px; font-size:9.5px; }
.bbk-mosaic{ display:grid; gap:10px; grid-template-columns:repeat(2,1fr); grid-auto-rows:1fr; min-height:0; }
.bbk-mosaic div{ background-size:cover; background-position:center; border-radius:var(--bbk-r); }
.bbk-mosaic-1{ grid-template-columns:1fr; }
.bbk-mosaic-3 div:first-child{ grid-row:span 2; }
.bbk-mosaic-5{ grid-template-columns:repeat(6,1fr); }
.bbk-mosaic-5 div{ grid-column:span 2; }
.bbk-mosaic-5 div:nth-child(-n+2){ grid-column:span 3; }
.bbk-mosaic-6{ grid-template-columns:repeat(3,1fr); }
.bbk-mosaic-6 div:first-child{ grid-column:span 2; grid-row:span 2; }
.bbk-donts{ flex:1; display:grid; grid-template-columns:repeat(6,1fr); grid-auto-rows:1fr; gap:18px; }
.bbk-dont{ grid-column:span 2; display:flex; flex-direction:column; gap:18px; padding:24px; border:1px solid var(--bbk-line); border-radius:var(--bbk-r); font-size:16px; font-weight:600; line-height:1.45; }
.bbk-apps.bb-mockup-stage{ flex:1; min-height:0; grid-template-columns:repeat(3,1fr); gap:24px 30px; align-content:center; padding:28px 40px; background: var(--bb-tint); border-radius:var(--bbk-r); }
.bbk-dont:nth-child(n+4){ grid-column:span 3; }
.bbk-apps > div{ display:flex; flex-direction:column; justify-content:center; align-items:center; min-width:0; }
.bbk-apps .bb-mockup{ width:100%; }
.bbk-apps .bb-mockup-headline{ font-size:19px !important; }
.bbk-apps .bb-mockup-body{ font-size:12.5px; }
.bbk-apps .bb-mockup-label{ color:var(--bbk-muted); }
.bbk-apps .bb-mockup{ max-height:196px; box-shadow:0 6px 18px rgba(0,0,0,.08); }
.bbk-apps .bb-mockup-social, .bbk-apps .bb-mockup-packaging, .bbk-apps .bb-mockup-poster{ height:196px; width:auto; }
.bbk-apps-few .bb-mockup{ max-height:300px; }
.bbk-apps-few .bb-mockup-social, .bbk-apps-few .bb-mockup-packaging, .bbk-apps-few .bb-mockup-poster{ height:300px; }

/* ---------- Brand Book art styles ----------
   A style is a skin over the same pages: .bbk-style-<key> on the sheet
   swaps the chrome typeface (--bbk-display), the paper, the corner radius
   and how frames/labels/dividers are drawn. "classic" is everything above.
   Brand-voice text (tagline, quote, type specimens, mockups) stays in the
   brand's own fonts in every style. */

/* Locked preview: tiled watermark on every page; print is refused. */
.bbk-wm{ position:absolute; left:-40%; right:-40%; top:-40%; bottom:-40%; z-index:5; display:flex; flex-direction:column; justify-content:space-around; transform:rotate(-24deg); pointer-events:none; font-family: var(--font-body); font-size:25px; font-weight:800; letter-spacing:.2em; white-space:nowrap; color:rgba(255,255,255,.4); text-shadow:0 0 2px rgba(0,0,0,.5), 0 0 1px rgba(0,0,0,.5); }
.bbk-wm div:nth-child(even){ margin-left:-170px; }
.bbk-locked{ user-select:none; -webkit-user-select:none; }
.bbk-locked img{ -webkit-user-drag:none; pointer-events:none; }
@media print{ .brandbook-sheet.bbk-locked{ display:none !important; } }

/* Style picker (Review step) */
.bbk-style-picker{ margin-bottom:18px; padding:16px; border:1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.bbk-style-picker-head{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; margin-bottom:12px; font-size:13px; }
.bbk-style-picker-head span{ font-size:12px; color: var(--text-muted); }
.bbk-style-row{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
@media (max-width:760px){ .bbk-style-row{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.bbk-style-card{ display:flex; flex-direction:column; gap:4px; padding:8px; text-align:left; border:1.5px solid var(--border); border-radius:12px; background:transparent; color:inherit; cursor:pointer; font:inherit; }
.bbk-style-card:hover{ border-color: var(--text-muted); }
.bbk-style-card.active{ border-color: var(--accent, #f2b84b); box-shadow:0 0 0 2px rgba(242,184,75,.25); }
.bbk-style-card:focus-visible{ outline:2px solid var(--accent, #f2b84b); outline-offset:2px; }
.bbk-style-name{ display:flex; align-items:center; gap:5px; margin-top:4px; font-size:13px; font-weight:700; }
.bbk-style-desc{ font-size:11px; line-height:1.4; color: var(--text-muted); }
.bbk-style-badge{ align-self:flex-start; margin-top:auto; padding:2px 8px; border-radius:999px; font-size:10.5px; font-weight:700; background: var(--surface-2); color: var(--text-muted); }
.bbk-style-badge.paid{ background:#f2b84b; color:#1a1816; }
.bbk-style-photo-row, .bbk-style-lock{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; margin-top:12px; padding-top:12px; border-top:1px solid var(--border); font-size:12.5px; color: var(--text-muted); }
.bbk-style-photo-row > span:first-child, .bbk-style-lock > span{ display:flex; align-items:center; gap:7px; flex:1; min-width:220px; }
.bbk-style-photo-row svg, .bbk-style-lock svg{ flex:none; }
.bbk-style-thumb{ position:relative; display:block; height:70px; border-radius:8px; overflow:hidden; background:#fff; color:#1a1816; }
.bbk-style-thumb b{ position:absolute; left:16px; bottom:8px; font-size:26px; line-height:1; font-family: var(--bb-font-primary, inherit), Georgia, serif; }
.bbk-style-thumb-classic i{ position:absolute; left:0; top:0; bottom:0; width:7px; background: var(--bb-primary); box-shadow: 0 46px 0 0 var(--bb-secondary); }
.bbk-style-thumb-pop{ background: var(--bb-primary); }
.bbk-style-thumb-pop i{ position:absolute; left:6px; right:6px; top:6px; bottom:6px; border:4px solid #fff; border-radius:12px; }
.bbk-style-thumb-pop b{ left:12px; bottom:12px; padding:0 8px 2px; border-radius:7px; background:#fff; font-family:'Barlow Condensed', var(--font-display); font-weight:800; text-transform:uppercase; }
.bbk-style-thumb-scrap{ background: var(--bb-tint-2); }
.bbk-style-thumb-scrap i{ position:absolute; right:14px; top:10px; width:42px; height:48px; background: var(--bb-secondary); border:4px solid #fff; border-bottom-width:12px; box-shadow:0 2px 6px rgba(0,0,0,.25); transform:rotate(7deg); }
.bbk-style-thumb-scrap b{ font-family:'Archivo', var(--font-display); font-style:italic; font-weight:800; }
.bbk-style-thumb-photo{ background: linear-gradient(180deg,#8ec5ee 0%,#cfe8f7 55%,#8cc152 55.5%,#5f9e3a 100%); }
.bbk-style-thumb-photo i{ position:absolute; left:22%; right:22%; top:9px; bottom:9px; background:#f7f2e6; box-shadow:0 3px 8px rgba(0,0,0,.3); transform:rotate(-4deg); }
.bbk-style-thumb-photo b{ left:30%; bottom:22px; font-size:22px; font-family:'DM Serif Display', Georgia, serif; font-weight:400; }

/* ===== POP — loud color blocks, rounded frames, condensed caps ===== */
.bbk-style-pop{ --bbk-display:'Barlow Condensed', var(--font-display); --bbk-r:22px; --bbk-line:#e4e2dc; }
.bbk-style-pop .bbk-page{ background:#ecebe7; }
.bbk-style-pop .bbk-spine, .bbk-style-pop .bbk-strip, .bbk-style-pop .bbk-divider-bar{ display:none; }
.bbk-style-pop .bbk-content, .bbk-style-pop .brandbook-page.bbk-divider{ padding:20px; }
.bbk-style-pop .bbk-content .bbk-inner{ background:#fff; border-radius:30px; padding:32px 46px 0; }
.bbk-style-pop .bbk-title{ font-size:66px; font-weight:800; line-height:1; text-transform:uppercase; letter-spacing:0; margin:-6px 0 22px; }
.bbk-style-pop .bbk-hl{ display:inline-block; padding:0 14px 3px; border-radius:14px; background: var(--bb-accent); color: var(--bb-on-accent); transform:rotate(-1.5deg); }
.bbk-style-pop .bbk-chapter b{ border-radius:999px; padding:2px 10px; background: var(--bb-secondary); color: var(--bb-on-secondary); }
.bbk-style-pop .bbk-foot{ border-top:none; }
.bbk-style-pop .bbk-card, .bbk-style-pop .bbk-stage, .bbk-style-pop .bbk-dont{ border-color:transparent; background:#f3f2ee; }
.bbk-style-pop .bbk-label-brand::before{ border-radius:50%; }
.bbk-style-pop .bbk-toc-num, .bbk-style-pop .bbk-pillar-num, .bbk-style-pop .bbk-bigword, .bbk-style-pop .bbk-pillar-title, .bbk-style-pop .bbk-direction-name, .bbk-style-pop .bbk-imagery-name, .bbk-style-pop .bbk-type-role{ font-weight:800; text-transform:uppercase; letter-spacing:0; }
.bbk-style-pop .bbk-toc-num{ font-size:50px; color: var(--bb-primary); }
.bbk-style-pop .bbk-pillar-num{ opacity:1; font-size:120px; line-height:1; }
.bbk-style-pop .bbk-pillar:nth-child(2){ background: var(--bb-secondary); color: var(--bb-on-secondary); }
.bbk-style-pop .bbk-pillar:nth-child(3){ background: var(--bb-accent); color: var(--bb-on-accent); }
.bbk-style-pop .bbk-direction:nth-child(2){ background: var(--bb-secondary); color: var(--bb-on-secondary); }
.bbk-style-pop .bbk-direction:nth-child(2) .bbk-direction-shape{ background: var(--bb-on-secondary); }
.bbk-style-pop .bbk-direction:nth-child(2) .bbk-label{ color:inherit; opacity:.7; }
.bbk-style-pop .bbk-tagline-stage{ border-left:none; background: var(--bb-secondary); color: var(--bb-on-secondary); }
.bbk-style-pop .bbk-divider .bbk-inner{ border-radius:30px; padding:34px 46px 0; overflow:hidden; background: var(--bb-primary); color: var(--bb-on-primary); }
.bbk-style-pop .bbk-divider.bbk-fill-1 .bbk-inner{ background: var(--bb-secondary); color: var(--bb-on-secondary); }
.bbk-style-pop .bbk-divider.bbk-fill-2 .bbk-inner{ background: var(--bb-accent); color: var(--bb-on-accent); }
.bbk-style-pop .bbk-divider .bbk-wpk{ display:none; }
.bbk-style-pop .bbk-divider-title{ font-weight:800; text-transform:uppercase; letter-spacing:0; line-height:1; }
.bbk-style-pop .bbk-divider .bbk-hl{ background:#fff; color:#111; }
.bbk-style-pop .bbk-divider-num{ font-weight:800; opacity:.16; right:30px; }
.bbk-style-pop .bbk-divider-sub{ font-weight:600; }
.bbk-style-pop .brandbook-page.bbk-cover, .bbk-style-pop .brandbook-page.bbk-type{ padding:20px; gap:14px; }
.bbk-style-pop .bbk-cover-field{ border:12px solid #fff; border-radius:34px; padding:30px 40px 0 44px; }
.bbk-style-pop .bbk-cover-title{ display:inline-block; padding:6px 28px 12px; border-radius:24px; background:#fff; color:#111; font-weight:800; line-height:.98; text-transform:uppercase; letter-spacing:0; }
.bbk-style-pop .bbk-cover .bbk-hl{ background:none; color:inherit; padding:0; transform:none; }
.bbk-style-pop .bbk-cover .bbk-divider-bar{ display:none; }
.bbk-style-pop .bbk-cover-seam{ flex-basis:16px; border-radius:10px; overflow:hidden; }
.bbk-style-pop .bbk-cover-panel{ border-radius:34px; overflow:hidden; }
.bbk-style-pop .bbk-type-side, .bbk-style-pop .bbk-type-main{ border-radius:30px; }
.bbk-style-pop .bbk-type-main{ background:#fff; padding:34px 46px 0; }
.bbk-style-pop .bbk-type-main .bbk-wpk{ top:34px; right:46px; }
.bbk-style-pop .bbk-type-side{ padding:34px 36px 34px 40px; }

/* ===== SCRAPBOOK — cream paper, polaroids, tape, marker labels ===== */
.bbk-style-scrap{ --bbk-display:'Archivo', var(--font-display); --bbk-hand:'Caveat', 'Comic Sans MS', cursive; --bbk-r:4px; --bbk-paper:#fdfbf3; --bbk-line:#e8e2d0; }
.bbk-style-scrap .bbk-page{ background: var(--bb-tint-2); }
.bbk-style-scrap .bbk-spine, .bbk-style-scrap .bbk-strip, .bbk-style-scrap .bbk-cover-seam{ display:none; }
.bbk-style-scrap .bbk-content, .bbk-style-scrap .brandbook-page.bbk-divider{ padding:22px 24px; }
.bbk-style-scrap .bbk-content .bbk-inner, .bbk-style-scrap .bbk-divider .bbk-inner{ background: var(--bbk-paper); border-radius:10px; padding:34px 48px 0; box-shadow:0 3px 0 rgba(0,0,0,.08), 0 10px 26px rgba(0,0,0,.1); }
.bbk-style-scrap .bbk-inner::before{ content:""; position:absolute; top:-12px; left:50%; width:128px; height:30px; margin-left:-64px; background:rgba(250,220,120,.8); transform:rotate(-2deg); z-index:2; }
.bbk-style-scrap .bbk-title{ font-size:58px; font-style:italic; font-weight:800; line-height:1.05; letter-spacing:-.03em; margin:-4px 0 22px; }
.bbk-style-scrap .bbk-title::after{ content:"✦"; margin-left:14px; font-style:normal; font-size:34px; color: var(--bb-secondary); }
.bbk-style-scrap .bbk-hl{ display:inline-block; padding:0 12px 2px; background: var(--bb-accent); color: var(--bb-on-accent); transform:rotate(-2deg); }
.bbk-style-scrap .bbk-chapter b{ width:34px; height:34px; padding:0; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background: var(--bb-secondary); color: var(--bb-on-secondary); transform:rotate(-10deg); font-size:12px; }
.bbk-style-scrap .bbk-foot{ border-top:1.5px dashed #d8cfb6; }
.bbk-style-scrap .bbk-label-brand{ display:inline-block; align-self:flex-start; padding:1px 12px 3px; background: var(--bb-secondary); color: var(--bb-on-secondary); font-family: var(--bbk-hand); font-size:19px; font-weight:700; letter-spacing:0; text-transform:none; transform:rotate(-2deg); }
.bbk-style-scrap .bbk-label-brand::before{ display:none; }
.bbk-style-scrap .bbk-card, .bbk-style-scrap .bbk-dont, .bbk-style-scrap .bbk-leading{ border-color:transparent; background:#fff; box-shadow:0 2px 12px rgba(0,0,0,.13); transform:rotate(-.6deg); }
.bbk-style-scrap .bbk-card:nth-child(even), .bbk-style-scrap .bbk-dont:nth-child(even), .bbk-style-scrap .bbk-leading:nth-child(even), .bbk-style-scrap .bbk-pillar:nth-child(even), .bbk-style-scrap .bbk-tile:nth-child(even), .bbk-style-scrap .bbk-essence:nth-child(even) .bbk-essence-fill{ transform:rotate(.7deg); }
.bbk-style-scrap .bbk-leading{ border-top:5px solid #c94a3d; }
.bbk-style-scrap .bbk-leading-ok{ border-top-color:#1f9d55; }
.bbk-style-scrap .bbk-stage{ background:#f3efe2; border:12px solid #fff; border-bottom-width:42px; box-shadow:0 4px 16px rgba(0,0,0,.18); transform:rotate(-1deg); }
.bbk-style-scrap .bbk-tile{ border:10px solid #fff; box-shadow:0 3px 14px rgba(0,0,0,.18); transform:rotate(-.8deg); }
.bbk-style-scrap .bbk-tile-dont{ border-color:#fff; }
.bbk-style-scrap .bbk-mosaic div{ border:8px solid #fff; box-shadow:0 3px 12px rgba(0,0,0,.2); transform:rotate(-1deg); }
.bbk-style-scrap .bbk-mosaic div:nth-child(even){ transform:rotate(1.2deg); }
.bbk-style-scrap .bbk-quote, .bbk-style-scrap .bbk-pillar, .bbk-style-scrap .bbk-direction{ box-shadow:0 3px 14px rgba(0,0,0,.16); transform:rotate(-1deg); }
.bbk-style-scrap .bbk-essence-fill{ border:10px solid #fff; border-bottom-width:34px; box-shadow:0 3px 14px rgba(0,0,0,.18); transform:rotate(-1deg); }
.bbk-style-scrap .bbk-essence-text, .bbk-style-scrap .bbk-note{ font-family: var(--bbk-hand); font-size:21px; line-height:1.3; color:#33302c; }
.bbk-style-scrap .bbk-essence-text:not(.is-long){ font-size:24px !important; }
.bbk-style-scrap .bbk-essence-text.is-long{ font-size:17px !important; line-height:1.3; }
.bbk-style-scrap .bbk-palette{ border:12px solid #fff; border-radius:4px; box-shadow:0 4px 16px rgba(0,0,0,.18); transform:rotate(-.5deg); }
.bbk-style-scrap .bbk-tagline-stage{ border-left:none; background:#fff; box-shadow:0 3px 14px rgba(0,0,0,.14); transform:rotate(-.8deg); }
.bbk-style-scrap .bbk-toc-num, .bbk-style-scrap .bbk-pillar-num, .bbk-style-scrap .bbk-bigword, .bbk-style-scrap .bbk-pillar-title, .bbk-style-scrap .bbk-direction-name, .bbk-style-scrap .bbk-imagery-name, .bbk-style-scrap .bbk-type-role{ font-style:italic; font-weight:800; letter-spacing:-.03em; }
.bbk-style-scrap .bbk-toc-row{ border-top:1.5px dashed #d8cfb6; }
.bbk-style-scrap .brandbook-page.bbk-divider{ background: var(--bb-tint-2); color: var(--bbk-ink); }
.bbk-style-scrap .bbk-divider .bbk-inner{ padding-bottom:0; }
.bbk-style-scrap .bbk-divider .bbk-wpk, .bbk-style-scrap .bbk-cover .bbk-wpk{ filter:brightness(0); opacity:.5; }
.bbk-style-scrap .bbk-divider-title{ font-style:italic; font-weight:800; letter-spacing:-.04em; line-height:1.04; }
.bbk-style-scrap .bbk-divider-bar{ width:120px; height:28px; background:rgba(250,220,120,.85); transform:rotate(-3deg); }
.bbk-style-scrap .bbk-divider-num{ right:70px; top:84px; bottom:auto; width:230px; height:230px; display:flex; align-items:center; justify-content:center; border-radius:50%; background: var(--bb-secondary); color: var(--bb-on-secondary); opacity:1; font-size:120px; font-style:italic; font-weight:800; letter-spacing:-.04em; line-height:1; transform:rotate(9deg); box-shadow:0 4px 14px rgba(0,0,0,.18); }
.bbk-style-scrap .bbk-divider-sub{ display:inline-block; max-width:440px; padding:10px 18px 12px; background: var(--bb-accent); color: var(--bb-on-accent); opacity:1; font-family: var(--bbk-hand); font-size:26px; line-height:1.2; transform:rotate(-1.5deg); box-shadow:0 3px 10px rgba(0,0,0,.14); }
.bbk-style-scrap .bbk-divider .bbk-foot, .bbk-style-scrap .bbk-cover .bbk-foot{ color: var(--bbk-muted); border-top:1.5px dashed #d8cfb6; }
.bbk-style-scrap .brandbook-page.bbk-cover{ padding:22px 24px; }
.bbk-style-scrap .bbk-cover-field{ background: var(--bbk-paper); color: var(--bbk-ink); border-radius:10px 0 0 10px; padding:34px 30px 0 48px; }
.bbk-style-scrap .bbk-cover-panel{ background: var(--bbk-paper) !important; border-radius:0 10px 10px 0; }
.bbk-style-scrap .bbk-cover-title{ font-style:italic; font-weight:800; letter-spacing:-.04em; line-height:1.02; }
.bbk-style-scrap .bbk-cover-sub{ display:inline-block; padding:10px 18px 12px; background: var(--bb-accent); color: var(--bb-on-accent); opacity:1; font-family: var(--bbk-hand); font-size:27px; line-height:1.2; transform:rotate(-2deg); box-shadow:0 3px 10px rgba(0,0,0,.14); }
.bbk-style-scrap .bbk-cover-logo-wrap{ width:78%; height:auto; padding:24px 24px 0; background:#fff; box-shadow:0 6px 22px rgba(0,0,0,.22); transform:rotate(4deg); }
.bbk-style-scrap .bbk-cover-logo{ max-width:100%; max-height:250px; padding:30px 10px; background:#f3efe2; width:100%; }
.bbk-style-scrap .bbk-cover-monogram{ width:100%; text-align:center; background:#f3efe2; font-size:200px; }
.bbk-style-scrap .bbk-cover-caption{ display:block; padding:8px 0 14px; font-family: var(--bbk-hand); font-size:30px; color:#33302c; }
.bbk-style-scrap .brandbook-page.bbk-type{ padding:22px 24px; gap:16px; }
.bbk-style-scrap .bbk-type-side{ border-radius:4px; padding:34px 34px 34px 40px; box-shadow:0 4px 16px rgba(0,0,0,.18); transform:rotate(-.8deg); }
.bbk-style-scrap .bbk-type-main{ background: var(--bbk-paper); border-radius:10px; padding:34px 46px 0; box-shadow:0 3px 0 rgba(0,0,0,.08); }
.bbk-style-scrap .bbk-type-main .bbk-wpk{ top:34px; right:46px; }

/* ===== PHOTO — the owner's photo behind every page, content on paper notes ===== */
.bbk-style-photo{ --bbk-display:'DM Serif Display', Georgia, serif; --bbk-r:16px; --bbk-paper:#f7f2e6; --bbk-line:#e4dac2; --bbk-blob:58% 42% 55% 45% / 48% 56% 44% 52%; }
.bbk-style-photo .brandbook-page.bbk-page{ background-color:#9fcdf0; background-image: var(--bbk-photo, linear-gradient(180deg,#7fbdee 0%,#d4ebf8 54%,#93c956 54.4%,#4f8f2f 100%)); background-size:cover; background-position:center; }
.bbk-style-photo .bbk-spine, .bbk-style-photo .bbk-strip, .bbk-style-photo .bbk-cover-seam, .bbk-style-photo .bbk-divider-bar{ display:none; }
.bbk-style-photo .bbk-content{ padding:30px 42px; }
.bbk-style-photo .bbk-content .bbk-inner{ background: var(--bbk-paper); border-radius:5px; padding:32px 52px 0; box-shadow:0 14px 40px rgba(0,0,0,.38); transform:rotate(-.5deg); }
.bbk-style-photo .bbk-inner::before{ content:""; position:absolute; top:-26px; right:210px; width:22px; height:66px; border:4px solid #a4a9ad; border-radius:12px; transform:rotate(8deg); z-index:2; }
.bbk-style-photo .bbk-title{ font-size:52px; font-weight:400; line-height:1.1; letter-spacing:-.01em; margin:-4px 0 20px; }
.bbk-style-photo .bbk-hl{ font-style:italic; border-bottom:6px solid var(--bb-accent); }
.bbk-style-photo .bbk-chapter b{ padding:6px 12px; border-radius: var(--bbk-blob); background: var(--bb-accent); color: var(--bb-on-accent); }
.bbk-style-photo .bbk-label-brand{ display:inline-block; align-self:flex-start; padding:5px 14px; border-radius:999px; background: var(--bb-secondary); color: var(--bb-on-secondary); }
.bbk-style-photo .bbk-label-brand::before{ display:none; }
.bbk-style-photo .bbk-card, .bbk-style-photo .bbk-stage, .bbk-style-photo .bbk-dont{ background:#fffdf6; }
.bbk-style-photo .bbk-toc-num, .bbk-style-photo .bbk-pillar-num, .bbk-style-photo .bbk-bigword, .bbk-style-photo .bbk-pillar-title, .bbk-style-photo .bbk-direction-name, .bbk-style-photo .bbk-imagery-name, .bbk-style-photo .bbk-type-role{ font-weight:400; }
.bbk-style-photo .bbk-pillar, .bbk-style-photo .bbk-direction, .bbk-style-photo .bbk-quote{ border-radius:26px 18px 30px 16px; }
.bbk-style-photo .brandbook-page.bbk-divider{ color: var(--bbk-ink); padding:84px 170px; }
.bbk-style-photo .bbk-divider .bbk-inner{ background: var(--bbk-paper); border-radius:5px; padding:34px 54px 0; box-shadow:0 18px 50px rgba(0,0,0,.42); transform:rotate(-2deg); }
.bbk-style-photo .bbk-divider .bbk-wpk, .bbk-style-photo .bbk-cover .bbk-wpk{ filter:brightness(0); opacity:.5; }
.bbk-style-photo .bbk-divider-main{ max-width:100%; margin-bottom:40px; }
.bbk-style-photo .bbk-divider-title{ font-weight:400; line-height:1.06; color: var(--bbk-ink); }
.bbk-style-photo .bbk-divider-num{ right:-70px; top:-56px; bottom:auto; width:190px; height:170px; display:flex; align-items:center; justify-content:center; border-radius: var(--bbk-blob); background: var(--bb-accent); color: var(--bb-on-accent); opacity:1; font-size:84px; font-weight:400; letter-spacing:0; line-height:1; transform:rotate(10deg); box-shadow:0 8px 22px rgba(0,0,0,.28); z-index:3; }
.bbk-style-photo .bbk-divider-sub{ display:inline-block; padding:10px 22px; border-radius:999px; background: var(--bb-secondary); color: var(--bb-on-secondary); opacity:1; font-size:16px; transform:rotate(1.2deg); }
.bbk-style-photo .bbk-divider .bbk-foot, .bbk-style-photo .bbk-cover .bbk-foot{ color: var(--bbk-muted); border-top-color: var(--bbk-line); }
.bbk-style-photo .bbk-cover-field{ margin:64px 0 64px 70px; padding:34px 44px 0 50px; background: var(--bbk-paper); color: var(--bbk-ink); border-radius:5px; box-shadow:0 18px 50px rgba(0,0,0,.42); transform:rotate(-2.5deg); }
.bbk-style-photo .bbk-cover-title{ font-weight:400; line-height:1.04; }
.bbk-style-photo .bbk-cover-sub{ font-style:italic; }
.bbk-style-photo .bbk-cover-panel{ background:none !important; }
.bbk-style-photo .bbk-cover-logo-wrap{ width:310px; height:270px; padding:46px; background:#fff; border-radius: var(--bbk-blob); box-shadow:0 12px 34px rgba(0,0,0,.35); transform:rotate(5deg); }
.bbk-style-photo .bbk-cover-logo{ max-width:100%; max-height:100%; }
.bbk-style-photo .bbk-cover-monogram{ font-size:170px; font-family: var(--bbk-display); font-weight:400; }
.bbk-style-photo .brandbook-page.bbk-type{ padding:30px 42px; }
.bbk-style-photo .bbk-type-side{ border-radius:5px 0 0 5px; padding:32px 36px 34px 44px; box-shadow:0 14px 40px rgba(0,0,0,.38); }
.bbk-style-photo .bbk-type-main{ background: var(--bbk-paper); border-radius:0 5px 5px 0; padding:32px 50px 0 46px; box-shadow:0 14px 40px rgba(0,0,0,.38); }
.bbk-style-photo .bbk-type-main .bbk-wpk{ top:32px; right:50px; }

@media print{
  .brandbook-sheet{ display:block; }
  .brandbook-page.bbk-page{ zoom:1; width:297mm; height:209.6mm; border-radius:0; box-shadow:none; }
}

/* Brand DNA PDF — same visual language as the Brand Book sheet above
   (WPK mark, eyebrow labels, big cover name) but staying inside the
   existing portrait .report-sheet shell, since the print-visibility and
   pagination rules for that shell already work correctly and this is a
   single simple document, not a multi-page landscape one like Brand Book. */
.dna-sheet{ position:relative; }
.dna-cover{ text-align:center; padding-bottom:24px; margin-bottom:20px; border-bottom:2px solid #1a1816; }
.dna-oneliner{ font-family: var(--font-display); font-size:19px; font-style:italic; color:#1a1816; max-width:520px; margin:14px auto 0; line-height:1.4; }
.dna-section{ margin-bottom:22px; }
.dna-row{ margin-bottom:12px; }
.dna-row:last-child{ margin-bottom:0; }
.dna-row-label{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:#6b6560; margin-bottom:3px; }
.dna-row-text{ font-size:13.5px; line-height:1.6; color:#1a1816; white-space:pre-wrap; margin:0; }
.dna-stakes-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.dna-stakes-col{ border-radius:8px; padding:14px 16px; }
.dna-stakes-col .dna-row-label{ color:inherit; opacity:.75; }
.dna-stakes-col .dna-row-text{ color:inherit; }
.dna-stakes-win{ background:#eaf6ef; color:#1f6b45; }
.dna-stakes-risk{ background:#fbeae6; color:#a8432e; }

/* Brand DNA wizard — the broken-down question boxes (compose/funnel3
   steps) and their supporting bits: a growable pill list for
   testimonials/personality/values/products, and a 3-box "funnel" layout
   for the plan step. Dark-theme wizard UI, separate from the light-sheet
   .dna-* print rules above. */
.chip-list{ display:flex; flex-wrap:wrap; gap:8px; }
.dna-chip{ display:inline-flex; align-items:center; gap:6px; padding:6px 8px 6px 14px; border-radius:999px; background: var(--surface-2); border:1px solid var(--border); font-size:12.5px; font-weight:600; }
.dna-chip button{ width:16px; height:16px; border-radius:50%; background: var(--bg-raised); border:1px solid var(--border); color: var(--text-muted); display:flex; align-items:center; justify-content:center; padding:0; cursor:pointer; flex:none; }
.dna-chip button:hover{ color: var(--health-poor); border-color: var(--health-poor); }
.dna-funnel3{ display:grid; grid-template-columns: repeat(3,1fr); gap:12px; margin-bottom:16px; }
.dna-funnel3-box{ background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-md); padding:14px; }
.dna-funnel3-num{ width:22px; height:22px; border-radius:50%; background: var(--accent-soft); color: var(--accent); font-family: var(--font-display); font-weight:800; font-size:11.5px; display:flex; align-items:center; justify-content:center; margin-bottom:8px; }
@media (max-width:640px){ .dna-funnel3{ grid-template-columns:1fr; } }

/* ============================================================
   Brand Home command center — four widgets shaped to hint at what each
   does (a ring for progress, a mini journey for campaigns, swatches for
   guidelines, a card stack for content) instead of four identical cards.
   All still read/write nothing themselves — plain nav buttons — the shape
   is the only thing that changed. Every widget spans 2 of the grid's 4
   columns (2x2 layout) so three span-2 widgets plus one full-width (span
   4) widget don't leave a dangling half-empty row — see widget-sales below.
   ============================================================ */
.brand-widget-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:16px; margin-bottom:28px; }
/* Each widget below sets its own --w-accent (falling back to --brand-tint
   for anything that doesn't) — four distinct colors instead of one repeated
   brand-tint everywhere, so this "where do I go next" launcher reads as a
   deliberately highlighted block, not four identical dark cards, and stays
   visually louder than the plain gray analytics cards further down the
   page. */
.brand-widget{ position:relative; background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-lg); padding:22px; cursor:pointer; text-align:left; transition: transform .15s; }
.brand-widget:hover{ transform: translateY(-2px); }
.brand-widget h3{ font-size:16px; margin:0 0 3px; }
.brand-widget p{ font-size:12.5px; color: var(--text-muted); margin:0; }

.widget-guidelines{ grid-column: span 2; }
.widget-guidelines .swatch{ width:24px; height:24px; border-radius:7px; flex:none; border:1px solid rgba(255,255,255,.08); }
.widget-guidelines .aa-preview{ position:absolute; top:18px; right:20px; font-size:26px; font-weight:800; color: color-mix(in srgb, var(--brand-tint) 45%, transparent); }
/* .glass-card's --surface becomes a near-transparent white for the frosted
   look, so re-mixing a widget's own accent straight into var(--surface)
   (above) would wash the tile out almost to nothing. Re-tint into the same
   dark glass gradient instead so these keep their per-app accent identity
   while sitting on the same frosted-dark base as every other box. */
.brand-widget.glass-card{ background: linear-gradient(135deg, rgba(46,38,66,.72) 0%, rgba(22,19,32,.78) 55%, rgba(12,11,18,.82) 100%); }

@media (max-width: 760px){
  .brand-widget-grid{ grid-template-columns: 1fr; }
  .widget-dna, .widget-campaign, .widget-guidelines, .widget-content-os, .widget-sales{ grid-column: span 1; }
}

/* Rotating gradient "beam" on hover — same spirit as wepeka.com's own hover
   treatment on its homepage buttons (an animated conic-gradient ring, not a
   flat color swap). Applies to Home's widget grid (.brand-widget, each with
   its own --w-accent set above) and the Beginner/Brand-Builder "door" cards
   (.bb-hub-door, shared by js/views/beginner-home.js and
   js/views/brand-builder.js — one rule covers both). A padding+mask trick
   draws only the ring, not a filled background, so it reads as a border
   effect; opacity fades in on hover rather than the beam being visible (and
   spinning) all the time. */
@property --beam-angle{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
@keyframes beam-spin{ to{ --beam-angle:360deg; } }
.brand-widget::before, .bb-hub-door::before{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  padding:1.5px;
  background: conic-gradient(from var(--beam-angle), transparent 0 72%, var(--w-accent, var(--brand-tint)) 84%, transparent 96%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity:0;
  transition: opacity .25s ease;
  animation: beam-spin 2.4s linear infinite;
  pointer-events:none;
}
.brand-widget:hover::before, .bb-hub-door:hover::before{ opacity:1; }
@media (prefers-reduced-motion: reduce){
  .brand-widget::before, .bb-hub-door::before{ animation:none; }
}

/* ---- Audit follow-ups (Sep 2026) ---- */
/* A field scrolled into view (wizard steps, tour targets) lands below the
   sticky topbar instead of underneath it. */
.field, .dna-funnel3-box, .creator-funnel-guided { scroll-margin-top: 150px; }
/* Consultant answers: the light-markdown renderer's output. */
.consultant-md p{ margin:0 0 8px; }
.consultant-md p:last-child{ margin-bottom:0; }
.consultant-md ol, .consultant-md ul{ margin:4px 0 8px; padding-left:20px; }
.consultant-md li{ margin-bottom:4px; }
.consultant-starters{ display:flex; flex-wrap:wrap; gap:6px; padding:0 0 8px 0; }
.consultant-starter{ border:1px solid var(--border); background:var(--surface-2); color:var(--text); border-radius:999px; padding:6px 11px; font-size:12px; cursor:pointer; font-family:inherit; }
.consultant-starter:hover{ border-color:var(--accent); color:var(--accent); }
/* Follow-up questions the consultant offers under its own answer — same
   chips as the first-message starters, so "what do I ask next" is never a
   blank box (js/consultant-panel.js). */
.consultant-followups{ margin-top:10px; padding-top:9px; border-top:1px solid var(--border); }
.consultant-followups-label{ margin:0 0 6px; font-size:11px; font-weight:700; color: var(--text-muted); }
.consultant-followups .consultant-starters{ padding:0; }
/* Guided-mode campaign rules accordion. */
.guided-rules summary::-webkit-details-marker{ display:none; }
.guided-rules summary{ list-style:none; display:flex; align-items:center; justify-content:space-between; }
.guided-rules summary::after{ content:"+"; color:var(--text-faint); font-weight:700; }
.guided-rules[open] summary::after{ content:"–"; }
@media (max-width: 720px){
  /* Keep the floating consultant button off the wizard's Save/Next row
     and the "isi dulu" hint on small screens. */
  .consultant-fab{ right:14px; bottom:14px; width:44px; height:44px; }
  #wiz-next-hint, .wiz-nav-hint{ padding-right:56px; }
  main, .app-main{ padding-bottom:84px; }
}
/* 👍/👎 strip under AI results (js/ai-feedback.js). */
.ai-feedback{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin:8px 0 4px; font-size:11.5px; color:var(--text-faint); }
.ai-feedback-btn{ border:1px solid var(--border); background:var(--surface); border-radius:999px; padding:3px 9px; font-size:13px; line-height:1.3; cursor:pointer; font-family:inherit; }
.ai-feedback-btn:hover{ border-color:var(--accent); }
.ai-feedback .ai-feedback-note{ flex:1; min-width:160px; height:30px; font-size:12px; }
.ai-feedback-thanks{ color:var(--text-muted); }
/* Mission milestones filled in automatically (Instagram / content data). */
.mm-source{ font-size:11px; color:var(--accent); margin-top:2px; }
.mm-sync-btn{ padding:3px 8px; font-size:11px; }

/* ---- Copy Studio (js/views/copy-studio.js) ---- */
:root{
  --copy: #c4a1ff;
  --wa-chat: #0b141a;
  --wa-bubble: #005c4b;
  --wa-bubble-text: #e9edef;
  --wa-meta: rgba(233,237,239,.6);
}
:root[data-theme="light"]{
  --copy: #7446c2;
  --wa-chat: #efeae2;
  --wa-bubble: #d9fdd3;
  --wa-bubble-text: #111b21;
  --wa-meta: rgba(17,27,33,.5);
}

/* Page layout: form on the left, results on the right; stacked on narrow screens. */
.copy-nudge{ margin:-4px 0 18px; }
.copy-nudge .link{ color: var(--accent); font-weight:700; }
.copy-layout{ display:grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap:22px; align-items:start; }
@media (max-width: 980px){ .copy-layout{ grid-template-columns: 1fr; } }

/* Guided wizard */
.copy-steps{ display:flex; align-items:center; gap:6px; margin-bottom:14px; min-height:32px; }
.copy-step-dot{ width:22px; height:5px; border-radius:999px; background: var(--surface-2); border:1px solid var(--border); }
.copy-step-dot.is-done{ background: color-mix(in srgb, var(--accent) 45%, var(--surface-2)); border-color: transparent; }
.copy-step-dot.is-current{ background: var(--accent); border-color: var(--accent); }
.copy-step-label{ font-size:12px; font-weight:700; color: var(--text-faint); margin-left:6px; }
.copy-back{ margin-left:auto; }
.copy-q{ font-size:20px; margin:0 0 14px; }
.copy-option-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap:10px; margin-bottom:14px; }
.copy-option{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; text-align:left; padding:14px; border-radius: var(--radius-md); border:1px solid var(--border); background: var(--surface); color: var(--text); cursor:pointer; font-family:inherit; transition: border-color .15s, background .15s, transform .1s; }
.copy-option:hover{ border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); transform: translateY(-1px); }
.copy-option.is-selected{ border-color: var(--accent); background: var(--accent-soft); }
.copy-option strong{ font-size:14px; }
.copy-option > span:last-child{ font-size:12px; color: var(--text-muted); line-height:1.45; }
.copy-option-icon{ width:32px; height:32px; border-radius:9px; background: var(--surface-2); color: var(--accent); display:flex; align-items:center; justify-content:center; margin-bottom:4px; }
.copy-picked{ display:flex; flex-wrap:wrap; gap:6px; margin:-6px 0 16px; }
.copy-picked-chip{ display:inline-flex; align-items:center; gap:6px; border:1px solid var(--border); background: var(--surface-2); color: var(--text); border-radius:999px; padding:5px 10px; font-size:12px; font-weight:700; cursor:pointer; font-family:inherit; }
.copy-picked-chip svg{ color: var(--text-faint); }
.copy-picked-chip:hover{ border-color: var(--accent); }

/* Form bits shared by both modes */
.copy-required{ color: var(--accent); }
.copy-optional{ text-transform:none; letter-spacing:0; font-weight:600; color: var(--text-faint); }
.copy-guard{ margin:0 0 12px; }
.copy-generate-hint{ font-size:12px; color: var(--text-faint); margin:8px 0 0; min-height:1em; text-align:center; }

/* Results */
.copy-results-empty{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:8px; min-height:260px; color: var(--text-muted); border-style:dashed; background: transparent; }
.copy-results-empty h3{ font-size:16px; color: var(--text); margin:4px 0 0; }
.copy-results-empty p{ font-size:13px; max-width:38ch; margin:0; }
.copy-results-empty-icon{ width:48px; height:48px; border-radius:50%; background: var(--surface-2); color: var(--accent); display:flex; align-items:center; justify-content:center; }
.copy-error{ margin:0 0 14px; }
.copy-results-head{ display:flex; align-items:center; gap:10px; }
.copy-results-head h2{ font-size:19px; margin:0; }
.copy-demo-tag{ background: var(--accent-soft); color: var(--accent); }
.copy-results-sub{ font-size:12.5px; color: var(--text-faint); margin:4px 0 14px; }
.copy-variant{ margin-bottom:14px; padding:18px; }
.copy-variant-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.copy-variant-num{ font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color: var(--text-muted); }
.copy-variant-meta{ font-size:11.5px; color: var(--text-faint); }
.copy-note{ display:flex; align-items:flex-start; gap:8px; margin-top:10px; padding:10px 12px; border-radius: var(--radius-md); background: var(--accent-soft); color: var(--text); font-size:12.5px; }
.copy-note svg{ color: var(--accent); flex:none; margin-top:2px; }
.copy-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.copy-rewrites{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:10px; }
.copy-rewrite-chip{ border:1px solid var(--border); background: transparent; color: var(--text-muted); border-radius:999px; padding:5px 11px; font-size:12px; font-weight:700; cursor:pointer; font-family:inherit; }
.copy-rewrite-chip:hover{ border-color: var(--accent); color: var(--accent); }
.copy-rewrite-chip:disabled{ opacity:.45; cursor:not-allowed; }
.copy-busy{ display:inline-flex; align-items:center; gap:6px; font-size:12px; color: var(--text-faint); }
.copy-editor .textarea{ font-size:13.5px; }

/* Previews — shaped like the destination app */
.copy-preview{ border-radius: var(--radius-md); overflow:hidden; }
/* avatarHTML only sets size inline; .avatar has no base style of its own. */
.copy-preview .avatar{ display:flex; align-items:center; justify-content:center; object-fit:cover; background: var(--brand-tint); color: var(--brand-tint-text); font-family: var(--font-display); font-weight:800; }
.cp-text{ white-space:pre-wrap; word-break:break-word; font-size:14px; line-height:1.5; }

.copy-preview-threads{ background: var(--bg-raised); border:1px solid var(--border); padding:14px 14px 2px; }
.cp-th-post{ display:flex; gap:10px; }
.cp-th-rail{ display:flex; flex-direction:column; align-items:center; flex:none; }
.cp-th-line{ width:2px; flex:1; min-height:14px; background: var(--border); margin:6px 0 2px; border-radius:2px; }
.cp-th-body{ flex:1; min-width:0; padding-bottom:12px; }
.cp-th-name{ font-weight:700; font-size:13.5px; margin-bottom:2px; }
.cp-th-name span{ font-weight:500; color: var(--text-faint); margin-left:4px; }
.cp-th-meta{ display:flex; align-items:center; gap:10px; margin-top:6px; font-size:11px; color: var(--text-faint); }
.cp-th-meta .is-over{ color: var(--health-poor); font-weight:700; }
.cp-mini-copy{ display:inline-flex; align-items:center; gap:4px; border:0; background:transparent; color: var(--text-muted); font-size:11px; font-weight:700; cursor:pointer; padding:2px 4px; border-radius:6px; font-family:inherit; }
.cp-mini-copy:hover{ color: var(--accent); background: var(--surface-2); }

.copy-preview-wa{ background: var(--wa-chat); padding:16px 14px; }
.cp-wa-bubble{ position:relative; max-width:88%; margin-left:auto; background: var(--wa-bubble); color: var(--wa-bubble-text); padding:8px 10px 20px; border-radius:10px 2px 10px 10px; box-shadow: 0 1px 1px rgba(0,0,0,.12); }
.cp-wa-time{ position:absolute; right:9px; bottom:4px; font-size:10.5px; color: var(--wa-meta); }

.copy-preview-story{ display:flex; justify-content:center; padding:4px 0; }
.cp-story-frame{ width:min(210px, 100%); aspect-ratio:9/16; border-radius:18px; overflow:hidden; background: radial-gradient(120% 80% at 20% 10%, color-mix(in srgb, var(--brand-tint) 55%, #000), #141312 72%); color:#fff; display:flex; flex-direction:column; padding:12px; }
.cp-story-bar{ height:3px; border-radius:3px; background: rgba(255,255,255,.3); overflow:hidden; }
.cp-story-bar span{ display:block; width:40%; height:100%; background:#fff; }
.cp-story-head{ display:flex; align-items:center; gap:7px; margin-top:10px; font-size:12px; font-weight:700; }
.cp-story-text{ margin:auto 0; text-align:center; font-size:16px; font-weight:800; line-height:1.35; white-space:pre-wrap; word-break:break-word; text-shadow: 0 1px 12px rgba(0,0,0,.5); padding:0 4px; }

.copy-preview-feed{ background: var(--bg-raised); border:1px solid var(--border); }
.cp-feed-head{ display:flex; align-items:center; gap:8px; padding:10px 12px; font-size:13px; }
.cp-feed-media{ height:140px; background: var(--surface-2); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; color: var(--text-faint); font-size:12px; }
.copy-preview-feed .cp-text{ padding:10px 12px 14px; font-size:13.5px; }
.cp-tag{ color: var(--info); }

.copy-preview-plain{ background: var(--surface-2); border:1px solid var(--border); padding:14px; }
.cp-plain-label{ font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color: var(--text-faint); margin-bottom:8px; }

/* ---- Copy Studio: format spec strip + platform-accurate previews (14 Sep 2026) ---- */
.copy-spec{ list-style:none; margin:-4px 0 16px; padding:10px 12px; display:flex; flex-direction:column; gap:6px; border-radius: var(--radius-md); background: var(--surface-2); border:1px dashed var(--border); }
.copy-spec:empty{ display:none; }
.copy-spec li{ display:flex; align-items:flex-start; gap:7px; font-size:12.5px; line-height:1.4; color: var(--text-muted); }
.copy-spec li svg{ color: var(--accent); flex:none; margin-top:3px; }
.copy-format-tag{ background: var(--surface-2); color: var(--text-muted); }
.copy-variant-meta .is-over{ color: var(--health-poor); font-weight:700; }
.cp-feed-caption .cp-fold-full{ display:none; }
.cp-feed-caption.is-expanded .cp-fold-full{ display:inline; }
.cp-feed-caption.is-expanded .cp-fold-short{ display:none; }
.cp-more{ border:0; background:none; padding:0; margin-left:2px; font:inherit; color: var(--text-faint); cursor:pointer; }
.cp-more:hover{ color: var(--text-muted); }
.cp-story-sticker{ align-self:center; margin:0 0 8px; max-width:92%; display:flex; flex-direction:column; align-items:center; gap:3px; padding:8px 12px; border-radius:12px; background:#fff; color:#111; font-size:11.5px; font-weight:700; line-height:1.3; text-align:center; text-shadow:none; box-shadow:0 4px 14px rgba(0,0,0,.35); }
.cp-story-sticker-kind{ font-size:9.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#7a6ff0; }

/* ---- Teleprompter fill light (14 Sep 2026) ---- */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.tp-head-actions{ display:flex; align-items:center; gap:4px; }
.tp-overlay{ --tp-light:#fff; transition: background .25s; }
.tp-overlay.tp-light-on{ background: var(--tp-light); backdrop-filter:none; padding:20px; }
.tp-overlay.tp-light-on .tp-panel{ width:min(620px, 56vw); height:min(560px, 70vh); box-shadow: 0 10px 40px rgba(0,0,0,.35); }
@media (max-width:720px){ .tp-overlay.tp-light-on .tp-panel{ width:min(560px, 78vw); height:min(480px, 58vh); } }
.tp-light-toggle.is-on{ background: var(--accent); color: var(--accent-text, #fff); border-color: var(--accent); }
.tp-light-controls{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; padding:10px 22px 14px; border-top:1px dashed var(--border); flex:none; }
.tp-light-controls[hidden]{ display:none; }
.tp-light-value{ font-variant-numeric: tabular-nums; min-width:4ch; text-align:right; color: var(--text); }
.tp-light-colors{ display:flex; align-items:center; gap:8px; }
.tp-swatch{ position:relative; width:26px; height:26px; border-radius:50%; border:2px solid var(--border); background: var(--swatch); cursor:pointer; padding:0; display:flex; align-items:center; justify-content:center; color:#333; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.tp-swatch:hover{ border-color: var(--text-muted); }
.tp-swatch[aria-checked="true"], .tp-swatch.is-active{ border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft), inset 0 0 0 1px rgba(0,0,0,.08); }
.tp-swatch-custom input[type=color]{ position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; border:0; padding:0; }
.tp-light-hint{ font-size:11.5px; color: var(--text-faint); flex-basis:100%; }

/* ---- Event setup wizard (15 Sep 2026) ---- */
.ev-wizard .copy-q{ font-size:19px; }
.ev-roles .content-view-card{ padding:18px 18px; }
.ev-roles .content-view-card.is-selected{ border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.ev-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:560px){ .ev-row{ grid-template-columns:1fr; } }
.ev-runway{ display:flex; align-items:flex-start; gap:7px; font-size:12.5px; color: var(--text-muted); margin:-6px 0 14px; }
.ev-runway svg{ flex:none; margin-top:3px; color: var(--text-faint); }
.ev-runway.is-ok{ color: var(--health-good); } .ev-runway.is-ok svg{ color: var(--health-good); }
.ev-runway.is-warn{ color: var(--health-average); } .ev-runway.is-warn svg{ color: var(--health-average); }
.ev-runway.is-bad{ color: var(--health-poor); } .ev-runway.is-bad svg{ color: var(--health-poor); }
.ev-error{ font-size:12.5px; color: var(--health-poor); margin:-4px 0 12px; }
.ev-field-hint{ font-size:12px; color: var(--text-faint); margin:8px 0 0; }
.ev-tier-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(130px,1fr)); gap:8px; }
.ev-tier{ display:flex; flex-direction:column; gap:2px; align-items:flex-start; text-align:left; padding:11px 12px; border-radius: var(--radius-md); border:1px solid var(--border); background: var(--surface); color: var(--text); cursor:pointer; font-family:inherit; }
.ev-tier strong{ font-size:13.5px; }
.ev-tier span{ font-size:11.5px; color: var(--text-muted); line-height:1.35; }
.ev-tier:hover{ border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
.ev-tier.is-selected{ border-color: var(--accent); background: var(--accent-soft); }
.ev-summary{ border:1px dashed var(--border); border-radius: var(--radius-md); padding:12px 14px; margin:4px 0 16px; background: var(--surface-2); }
.ev-summary-title{ display:flex; align-items:center; gap:6px; font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color: var(--text-faint); margin-bottom:8px; }
.ev-summary-phases{ display:flex; flex-wrap:wrap; gap:6px 14px; }
.ev-summary-phase{ font-size:12.5px; color: var(--text-muted); }
.ev-summary-phase b{ color: var(--text); font-weight:700; margin-right:4px; }

/* ---- Campaign detail (one layout for ladder / event / phase) — 15 Sep 2026 ---- */
.cd-sub{ margin:4px 0 0; font-size:13px; }
.cd-sub .tag, .cd-sub .status-pill{ vertical-align:middle; }
.cd-headline{ margin-bottom:14px; padding:20px 22px; }
.cd-headline-label{ font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color: var(--text-muted); margin-bottom:6px; }
.cd-headline-big{ font-family: var(--font-display); font-weight:800; font-size:34px; line-height:1.1; letter-spacing:-.01em; font-variant-numeric: tabular-nums; }
.cd-headline-target{ font-size:16px; font-weight:600; color: var(--text-muted); letter-spacing:0; }
.cd-bar{ height:8px; border-radius:999px; background: var(--surface-2); overflow:hidden; margin:12px 0 10px; }
.cd-bar span{ display:block; height:100%; background: var(--accent); border-radius:999px; transition: width .3s; }
.cd-headline-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:12.5px; color: var(--text-muted); }
.cd-stale{ color: var(--health-average); font-weight:700; }
.cd-next{ margin-bottom:18px; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); padding:18px 22px; }
.cd-next-title{ font-size:17px; margin:0 0 4px; }
.cd-next-why{ font-size:13px; color: var(--text-muted); margin:0 0 12px; max-width:62ch; }
.cd-next-actions{ display:flex; align-items:center; gap:10px 14px; flex-wrap:wrap; }
.cd-next-rest{ font-size:12.5px; color: var(--text-faint); display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap; }
.cd-next-chip{ border:1px solid var(--border); background: transparent; color: var(--text-muted); border-radius:999px; padding:4px 10px; font-size:12px; font-weight:700; cursor:pointer; font-family:inherit; }
.cd-next-chip:hover{ border-color: var(--accent); color: var(--accent); }
.cd-next-chip.is-info{ cursor:default; border-style:dashed; }
.cd-brainstorm-card{ margin-top:0; }
/* Pro: Pulse strip + toolbar + tabs */
.cd-pulse{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:12px; margin-bottom:16px; }
@media (max-width: 980px){ .cd-pulse{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 480px){ .cd-pulse{ grid-template-columns: 1fr; } }
.cd-pulse-tile{ background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-lg); padding:14px 16px; min-height:104px; display:flex; flex-direction:column; gap:6px; }
.cd-pulse-label{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color: var(--text-faint); }
.cd-pulse-value{ font-family: var(--font-display); font-size:24px; font-weight:700; line-height:1.1; }
.cd-pulse-value small{ font-size:13px; font-weight:600; color: var(--text-muted); font-family: var(--font-body); }
.cd-pulse-sub{ font-size:12px; color: var(--text-muted); display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:auto; }
.cd-pulse-dot{ width:8px; height:8px; border-radius:50%; background: var(--health-good); flex:none; }
.cd-pulse-dot.is-bad{ background: var(--health-poor); }
.cd-spark{ position:relative; display:flex; align-items:flex-end; gap:4px; height:38px; padding-top:2px; }
.cd-spark-bar{ flex:1; min-width:0; border-radius:3px 3px 1px 1px; background: var(--border); transition: height .3s ease; }
.cd-spark-bar.is-hit{ background: var(--accent); }
.cd-spark-bar.is-now{ outline:1px dashed var(--text-faint); outline-offset:1px; }
.cd-spark-target{ position:absolute; left:0; right:0; border-top:1px dashed var(--text-faint); opacity:.7; pointer-events:none; }
.cd-pulse-next{ border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.cd-pulse-next-title{ font-size:13.5px; font-weight:700; line-height:1.3; }
.cd-pulse-next .btn{ align-self:stretch; justify-content:space-between; margin-top:auto; white-space:normal; text-align:left; line-height:1.25; height:auto; min-height:34px; padding-top:7px; padding-bottom:7px; max-width:100%; }
.cd-pulse-tile{ min-width:0; }
.cd-toolbar{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.cd-tab-widget .dash-widget-collapse-btn{ display:none; }
.cd-tabs{ display:inline-flex; margin-bottom:16px; }
.cd-tabs button{ flex:none; display:inline-flex; align-items:center; gap:6px; }
.cd-tab-count{ font-size:10.5px; font-weight:800; padding:1px 6px; border-radius:999px; background: var(--surface-2); color: var(--text-muted); }
.cd-tabs button.active .cd-tab-count{ background: color-mix(in srgb, var(--bg) 25%, transparent); color: var(--bg); }
.cd-bs-ideas{ margin-top:16px; padding-top:14px; border-top:1px solid var(--border); }
.cd-bs-ideas-head{ display:flex; align-items:center; gap:6px; font-size:13px; margin-bottom:10px; }
.cd-bs-ideas-head .text-faint{ font-size:12px; margin-left:auto; }
.cd-guided-intro{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:0 0 18px; }
.cd-guided-intro-item{ display:flex; gap:12px; align-items:flex-start; padding:12px 14px; border:1px dashed var(--border); border-radius:14px; }
.cd-guided-intro-n{ flex:none; width:24px; height:24px; border-radius:50%; background: var(--accent); color: var(--accent-text); font-weight:800; font-size:12px; display:inline-flex; align-items:center; justify-content:center; }
.cd-guided-intro-item b{ display:block; font-size:13.5px; margin-bottom:2px; }
.cd-guided-intro-item p{ margin:0; font-size:12.5px; color: var(--text-muted); }
@media (max-width: 640px){ .cd-guided-intro{ grid-template-columns:1fr; } }
.cd-stages{ margin-bottom:4px; }
.cd-stages .event-phase-pill.is-locked{ opacity:.55; }
.cd-stages .event-phase-pill.is-past{ opacity:.7; }
.cd-panel{ margin-top:6px; }
.cd-stage-progress-col{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; flex:none; }
.cd-stage-progress{ font-size:13px; color: var(--text-muted); flex:none; }
.cd-stage-progress b{ color: var(--text); font-size:16px; }
.cd-milestones{ display:flex; flex-direction:column; }
.cd-row{ display:grid; grid-template-columns:18px 1fr auto auto; align-items:center; gap:14px; padding:11px 4px; border-bottom:1px solid var(--border); }
.cd-row:last-child{ border-bottom:none; }
.cd-dot{ width:14px; height:14px; border-radius:50%; background: conic-gradient(var(--health-average) var(--pct), var(--surface-2) 0); display:flex; align-items:center; justify-content:center; flex:none; }
.cd-dot span{ width:8px; height:8px; border-radius:50%; background: var(--surface); }
.cd-row-done .cd-dot{ background: var(--health-good); } .cd-row-done .cd-dot span{ background: var(--health-good); }
.cd-row-empty .cd-dot{ background: var(--surface-2); }
.cd-row-missed .cd-dot{ background: var(--health-poor); } .cd-row-missed .cd-dot span{ background: var(--health-poor); }
.cd-row-partial .cd-dot{ background: conic-gradient(var(--health-poor) var(--pct), var(--surface-2) 0); }
.cd-row-na{ opacity:.55; }
.cd-row-main{ min-width:0; }
.cd-row-label{ font-size:13.5px; font-weight:600; }
.cd-row-desc{ font-size:11.5px; color: var(--text-faint); margin-top:2px; line-height:1.4; display:block; }
.cd-row-source{ font-size:11.5px; color: var(--text-muted); margin-top:3px; }
.cd-row-value{ font-size:13px; font-weight:700; white-space:nowrap; font-variant-numeric: tabular-nums; }
.cd-row-action{ display:flex; align-items:center; gap:4px; min-width:0; justify-content:flex-end; }
.cd-ms-btn{ white-space:nowrap; }
.cd-optional{ margin-top:6px; }
.cd-optional summary{ cursor:pointer; font-size:12px; font-weight:700; color: var(--text-faint); padding:8px 4px; }
.cd-manual-foot{ margin-top:12px; }
.cd-rules{ margin-top:14px; border-top:1px dashed var(--border); padding-top:10px; }
.cd-rules summary{ cursor:pointer; font-size:12.5px; font-weight:700; color: var(--text-muted); }
.cd-rules p{ font-size:12.5px; color: var(--text-muted); margin:8px 0 0; }
.cd-activities{ padding:18px 20px; }
.cd-pipeline{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.cd-pipe{ display:inline-flex; align-items:center; gap:6px; border:1px solid var(--border); background: var(--surface-2); color: var(--text-muted); border-radius:999px; padding:5px 11px 5px 8px; font-size:12px; font-weight:700; cursor:pointer; font-family:inherit; }
.cd-pipe b{ font-size:13px; color: var(--text); }
.cd-pipe.is-zero{ opacity:.55; }
.cd-pipe:hover{ border-color: var(--accent); }
.cd-activity-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.cd-activity-list{ margin-top:14px; display:flex; flex-direction:column; gap:2px; }
.cd-activity-row{ display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:12px; padding:8px 6px; border-radius: var(--radius-md); cursor:pointer; }
.cd-activity-row:hover{ background: var(--surface-2); }
.cd-activity-title{ font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cd-celebrate{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px; border-color: var(--health-good); background: var(--health-good-soft); }

/* Full-screen "big win" celebration (js/celebrate.js): confetti falling
   across the whole viewport behind a card that pops in. Pure CSS. */
.celebrate-overlay{ position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:20px; background: rgba(8,7,6,.78); backdrop-filter: blur(3px); animation: celebrate-fade .25s ease-out; overflow:hidden; }
.celebrate-overlay.is-leaving{ opacity:0; transition: opacity .2s ease; }
.celebrate-rain{ position:absolute; inset:0; pointer-events:none; }
.celebrate-confetti{ position:absolute; top:-24px; opacity:0; animation-name: celebrate-fall; animation-timing-function: cubic-bezier(.3,.6,.6,1); animation-fill-mode: both; }
.celebrate-overlay.is-final .celebrate-confetti{ animation-iteration-count:2; }
@keyframes celebrate-fall{
  0%{ opacity:1; transform: translate3d(0,0,0) rotate(0deg); }
  85%{ opacity:1; }
  100%{ opacity:0; transform: translate3d(var(--drift,0px), 110vh, 0) rotate(720deg); }
}
@keyframes celebrate-fade{ from{ opacity:0; } to{ opacity:1; } }
.celebrate-card{ position:relative; width:min(420px, 100%); text-align:center; padding:32px 28px 24px; border-radius: var(--radius-lg); background: var(--surface); border:1px solid var(--health-good); box-shadow: 0 0 0 4px rgba(61,220,132,.14), var(--shadow-lg); animation: celebrate-pop .5s cubic-bezier(.2,1.4,.4,1) both; }
.celebrate-overlay.is-final .celebrate-card{ border-color: var(--accent); box-shadow: 0 0 0 4px rgba(255,165,43,.18), 0 0 60px rgba(255,165,43,.25), var(--shadow-lg); }
.celebrate-badge{ width:72px; height:72px; margin:0 auto 16px; border-radius:50%; display:grid; place-items:center; background: var(--health-good); color: var(--bg); animation: celebrate-badge .7s .15s cubic-bezier(.2,1.6,.4,1) both; }
.celebrate-overlay.is-final .celebrate-badge{ background: var(--accent); color: var(--accent-text); }
.celebrate-eyebrow{ font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color: var(--health-good); margin-bottom:6px; }
.celebrate-overlay.is-final .celebrate-eyebrow{ color: var(--accent); }
.celebrate-title{ margin:0 0 8px; font-size:24px; line-height:1.2; }
.celebrate-sub{ margin:0 0 20px; color: var(--text-muted); font-size:14px; line-height:1.55; }
@keyframes celebrate-pop{ 0%{ transform:scale(.7) translateY(20px); opacity:0; } 100%{ transform:scale(1) translateY(0); opacity:1; } }
@keyframes celebrate-badge{ 0%{ transform:scale(0) rotate(-40deg); } 100%{ transform:scale(1) rotate(0); } }
@media (prefers-reduced-motion: reduce){ .celebrate-confetti{ display:none; } .celebrate-card, .celebrate-badge, .celebrate-overlay{ animation:none; } }
.cd-sheet-field{ margin-bottom:14px; }
.cd-sheet-check{ display:flex; align-items:flex-start; gap:10px; margin-bottom:12px; }
.campaign-card-headline{ font-size:13px; color: var(--text-muted); }
.campaign-card-headline b{ color: var(--text); font-size:15px; }
.campaign-card-next{ display:flex; align-items:center; gap:6px; font-size:12.5px; color: var(--accent); font-weight:700; margin-top:4px; }
.campaign-card-next svg{ flex:none; }
.campaign-card-next span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Solid accent + sticky under the topbar: this is the only way back to
   where a cross-feature trip started (e.g. "Buka di Creator" from a
   campaign) — it used to blend into the page as a faint tinted strip and
   people lost track of it, so it now reads as its own bold banner and stays
   on screen while scrolling instead of disappearing past the fold. */
.nav-return{
  position:sticky; top: var(--header-h); z-index:39;
  display:flex; align-items:center; justify-content:center; gap:8px;
  background: var(--accent); color: var(--accent-text);
  font-size:13.5px; font-weight:800; padding:10px 12px;
  box-shadow: var(--shadow-md);
  animation: nav-return-in .35s cubic-bezier(.2,1.4,.4,1) both;
}
.nav-return button{ display:inline-flex; align-items:center; gap:6px; border:0; background:none; color: inherit; font:inherit; cursor:pointer; padding:0; }
.nav-return button:hover{ text-decoration:underline; }
@keyframes nav-return-in{ 0%{ transform:translateY(-100%); opacity:0; } 100%{ transform:translateY(0); opacity:1; } }
@media (prefers-reduced-motion: reduce){ .nav-return{ animation:none; } }
.cd-profile-card{ margin-bottom:24px; }
@media (max-width:720px){
  .cd-row{ grid-template-columns:18px 1fr; }
  .cd-row-value{ grid-column:2; }
  .cd-row-action{ grid-column:2; justify-content:flex-start; }
  .cd-headline-big{ font-size:28px; }
}
.cd-row-empty .cd-dot{ box-shadow: inset 0 0 0 1px var(--border); }
/* Calendar: event phases as segments + event-day marker */
.cal-timeline-label{ color: inherit; text-decoration:none; }
.cal-timeline-label:hover{ color: var(--accent); }
.cal-timeline-row.has-phases .cal-timeline-track{ height:16px; }
.cal-timeline-seg{ position:absolute; top:0; bottom:0; border-radius:4px; overflow:hidden; font-size:9.5px; font-weight:700; line-height:16px; padding:0 6px; white-space:nowrap; color: var(--bg); background: var(--accent); opacity:.85; }
.cal-timeline-seg.seg-1{ background: color-mix(in srgb, var(--accent) 70%, var(--text)); }
.cal-timeline-seg.seg-2{ background: color-mix(in srgb, var(--accent) 55%, var(--surface-2)); color: var(--text); }
.cal-timeline-seg.seg-3{ background: color-mix(in srgb, var(--accent) 40%, var(--text)); }
.cal-timeline-seg span{ pointer-events:none; }
.cal-timeline-event{ position:absolute; top:-6px; transform:translateX(-50%); font-size:14px; line-height:1; color: var(--accent); text-shadow:0 0 6px rgba(0,0,0,.4); }
.cal-cell.event-day{ box-shadow: inset 0 0 0 2px var(--accent); }
.cal-event-star{ color: var(--accent); font-size:11px; margin-left:4px; }

/* ---- Pemula mode: mode picker, journey Beranda, first-brand card (Sep 2026) ---- */
.mode-pick{ min-height: calc(100vh - var(--header-h, 0px)); display:flex; align-items:center; justify-content:center; padding: 48px 20px; }
.mode-pick-inner{ width:100%; max-width: 820px; text-align:center; }
.mode-pick-title{ font-size: 36px; line-height:1.1; margin: 0 0 10px; }
.mode-pick-pitch{ color: var(--text-muted); font-size: 14.5px; line-height:1.6; max-width: 56ch; margin: 0 auto 10px; }
.mode-pick-sub{ color: var(--text-muted); font-size: 14.5px; line-height:1.6; max-width: 52ch; margin: 0 auto 32px; }
.mode-pick-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 18px; text-align:left; }
.mode-pick-card{ position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:8px; padding: 28px 26px 24px; background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-lg); color: var(--text); font: inherit; cursor:pointer; text-align:left; transition: transform .15s, border-color .15s, box-shadow .15s; }
.mode-pick-card:hover, .mode-pick-card:focus-visible{ transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 14px 40px rgba(0,0,0,.18); outline:none; }
.mode-pick-card.is-reco{ border-color: color-mix(in srgb, var(--accent) 60%, var(--border)); }
.mode-pick-badge{ position:absolute; top:-11px; left:22px; background: var(--accent); color: var(--accent-text, #1a1200); font-size:11px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; padding: 4px 10px; border-radius: var(--radius-pill); }
.mode-pick-icon{ width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; background: var(--accent-soft); color: var(--accent); margin-bottom:6px; }
.mode-pick-card h2{ font-size: 21px; line-height:1.2; margin:0; }
.mode-pick-card p{ margin:0; font-size:13.5px; line-height:1.6; color: var(--text-muted); }
.mode-pick-cta{ display:inline-flex; align-items:center; gap:6px; margin-top:12px; font-size:13px; font-weight:800; color: var(--accent); }
@media (max-width: 720px){
  .mode-pick{ padding: 32px 16px; align-items:flex-start; }
  .mode-pick-title{ font-size: 28px; }
  .mode-pick-grid{ grid-template-columns: 1fr; }
}

/* Beranda hero: the one thing to do now */
.journey-hero{ margin-bottom:28px; padding: 30px 30px 26px; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 18px 50px color-mix(in srgb, var(--accent) 12%, transparent); display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
.journey-hero-eyebrow{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color: var(--accent); }
.journey-hero-time{ display:inline-flex; align-items:center; gap:5px; color: var(--text-faint); letter-spacing:0; text-transform:none; font-weight:700; font-size:12.5px; }
.journey-hero h2{ font-size: 30px; line-height:1.1; margin:0; }
.journey-hero p{ margin:0; font-size:14.5px; line-height:1.65; color: var(--text-muted); max-width: 58ch; }
.journey-hero-progress{ display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:700; color: var(--health-good); background: var(--health-good-soft); padding: 7px 12px; border-radius: var(--radius-pill); }
.journey-hero-cta{ margin-top: 8px; padding: 13px 22px; font-size: 15px; border-radius: var(--radius-pill); }
.journey-hero-note{ font-size:12px; color: var(--text-faint); }
.journey-hero-missing{ display:flex; align-items:center; gap:6px; margin:-4px 0 14px; font-size:12.5px; font-weight:700; color: var(--accent); }
.journey-hero-today{ border-color: var(--border); box-shadow: none; }
/* Only the light default surface needs its own gradient tint — once
   .glass-card is on the element --surface is already the frosted dark
   base, so keep that background untouched instead of re-mixing it. */
.journey-hero-today:not(.glass-card){ background: linear-gradient(135deg, var(--surface), color-mix(in srgb, var(--accent) 7%, var(--surface))); }
.journey-hero-today .journey-hero-eyebrow{ color: var(--text-muted); }

/* Journey checklist */
.journey{ padding: 6px; }
.journey-list{ display:flex; flex-direction:column; gap:2px; }
.journey-step{ display:flex; align-items:center; gap:14px; padding: 14px 14px; border-radius: var(--radius-md); color: var(--text); text-decoration:none; }
a.journey-step:hover{ background: var(--surface-2); }
.journey-marker{ flex:none; width:28px; height:28px; border-radius:50%; border:2px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:12.5px; font-weight:800; color: var(--text-faint); }
.journey-step-done .journey-marker{ border-color: var(--health-good); background: var(--health-good-soft); color: var(--health-good); }
.journey-step-current .journey-marker{ border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.journey-step-current{ background: var(--accent-soft); }
.journey-text{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.journey-text .t{ font-weight:700; font-size:14px; }
.journey-text .m{ font-size:12.5px; color: var(--text-faint); line-height:1.5; }
.journey-step-done .journey-text .t{ color: var(--text-muted); }
.journey-step-upcoming{ opacity:.55; }
.journey-step-upcoming .journey-text .t{ color: var(--text-muted); }
.journey-edit{ flex:none; display:inline-flex; align-items:center; gap:4px; font-size:12.5px; font-weight:700; color: var(--text-muted); }
.journey-go{ color: var(--accent); }
a.journey-step:hover .journey-edit{ text-decoration:underline; }
.journey-lock{ flex:none; color: var(--text-faint); display:flex; }
.journey-step-celebrate{ animation: beginner-done-row-in 1.1s ease-out; }
.journey-collapsed{ margin-top: 18px; }
.journey-collapsed summary{ list-style:none; display:flex; align-items:center; gap:12px; padding: 12px 14px; cursor:pointer; border-radius: var(--radius-md); }
.journey-collapsed summary::-webkit-details-marker{ display:none; }
.journey-collapsed summary:hover{ background: var(--surface-2); }
.journey-summary-check{ flex:none; width:26px; height:26px; border-radius:50%; background: var(--health-good-soft); color: var(--health-good); display:flex; align-items:center; justify-content:center; }
.journey-collapsed summary .t{ flex:1; font-weight:700; font-size:13.5px; }
.journey-collapsed summary .m{ font-size:12.5px; font-weight:700; color: var(--accent); }
.journey-collapsed[open] summary{ border-bottom:1px solid var(--border-soft); border-radius: var(--radius-md) var(--radius-md) 0 0; margin-bottom:4px; }

/* First-brand card on the Brands page (Pemula, zero brands) */
.guided-first-brand{ max-width: 640px; margin: 24px auto 0; }

@media (max-width: 720px){
  .journey-hero{ margin-bottom:20px; padding: 22px 20px 20px; }
  .journey-hero h2{ font-size: 24px; }
  .journey-hero-cta{ width:100%; justify-content:center; }
  .journey-step{ padding: 12px 10px; gap:10px; }
  .journey-edit{ display:none; }
  .journey-step-current .journey-edit{ display:none; }
  .journey-step-current .journey-text .m{ display:block; }
}

/* Campaign detail: mission tree (pohon progres) back on level campaigns */
.cd-tree-scroll{ overflow-x:auto; scrollbar-width:none; }
.cd-tree-scroll::-webkit-scrollbar{ display:none; }
.cd-tree{ max-width: 720px; margin: 4px auto 6px; }
.cd-tree .mission-node{ width:34px; height:34px; }
.cd-tree-legend{ font-size:12px; color: var(--text-faint); text-align:center; margin: 0 0 18px; }
.cd-row.is-highlight{ background: var(--accent-soft); border-radius: var(--radius-md); }
/* 5.3: Pemula, 0 konten — mission tree/milestones/rules tucked behind a
   closed details instead of shown by default, since there's nothing to
   act on there yet (the headline above still shows). */
.cd-optional{ margin-top:6px; }
.cd-optional > summary{ display:flex; align-items:center; gap:6px; cursor:pointer; font-size:12.5px; font-weight:700; color: var(--text-muted); list-style:none; padding:4px 0; }
.cd-optional > summary::-webkit-details-marker{ display:none; }
.cd-optional[open] > summary{ margin-bottom:8px; }
@media (max-width: 720px){
  .cd-tree{ margin-top:0; min-width: 520px; }
  .cd-tree-legend{ font-size:11.5px; margin-bottom:14px; }
}

/* Daily AI meter (topbar) */
.ai-usage{ display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 11px; border-radius: var(--radius-pill); border:1px solid var(--border); background: var(--surface); color: var(--text-muted); font: inherit; font-size:12px; font-weight:700; cursor:pointer; flex:none; }
.ai-usage-bar{ position:relative; width:46px; height:6px; border-radius:999px; background: var(--surface-2); overflow:hidden; }
.ai-usage-bar > span{ position:absolute; inset:0 auto 0 0; background: var(--accent); border-radius:999px; transition: width .3s; }
.ai-usage-bar.is-low > span{ background: var(--health-average); }
.ai-usage-bar.is-out > span{ background: var(--health-poor); }
@media (max-width: 560px){
  .ai-usage-bar{ width:34px; }
}

/* Brand DNA: "AI isi semua" card + editable review */
.dna-ai-fill{ display:flex; align-items:center; gap:14px; padding:18px 20px; margin-bottom:22px; border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); background: linear-gradient(135deg, var(--surface), color-mix(in srgb, var(--accent) 8%, var(--surface))); }
.dna-ai-fill.is-compact{ padding:12px 16px; margin-bottom:18px; }
.dna-ai-fill-icon{ flex:none; width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; background: var(--accent-soft); color: var(--accent); }
.dna-ai-fill.is-compact .dna-ai-fill-icon{ width:32px; height:32px; border-radius:9px; }
.dna-ai-fill-text{ flex:1; min-width:0; }
.dna-ai-fill-text .t{ font-weight:800; font-size:14.5px; }
.dna-ai-fill.is-compact .dna-ai-fill-text .t{ font-size:13.5px; }
.dna-ai-fill-text .m{ font-size:12.5px; color: var(--text-muted); line-height:1.5; margin-top:2px; }
.dna-ai-fill.is-compact .dna-ai-fill-text .m{ display:none; }
.dna-ai-fill > .btn{ flex:none; }
.review-card{ padding: 6px 16px 10px; }
.review-field{ padding: 10px 0; border-bottom:1px solid var(--border-soft); }
.review-field:last-child{ border-bottom:none; }
.review-field label{ display:block; font-size:12px; font-weight:800; color: var(--text-muted); margin-bottom:6px; }
.review-textarea{ min-height:0; resize:vertical; font-size:13.5px; line-height:1.55; }
/* Brand DNA: format rules shown as text (not hidden in a placeholder),
   live word counters, and short answer boxes that wrap + grow. */
.review-hint{ margin:-2px 0 6px; font-size:12px; color: var(--text-faint); line-height:1.45; }
.dna-word-count{ margin:4px 0 0; font-size:11.5px; color: var(--text-faint); text-align:right; font-variant-numeric: tabular-nums; }
.dna-word-count.is-over{ color: var(--health-poor); font-weight:700; }
.textarea.dna-part-input{ min-height:0; resize:none; overflow:hidden; line-height:1.5; }
.dna-oneliner-note{ display:flex; align-items:flex-start; gap:6px; margin:0 0 8px; font-size:12.5px; color: var(--text-muted); }
.dna-oneliner-note svg{ flex:none; margin-top:2px; color: var(--accent); }
@media (max-width: 720px){
  .dna-ai-fill{ flex-wrap:wrap; }
  .dna-ai-fill > .btn{ width:100%; justify-content:center; }
  .dna-ai-fill.is-compact > .btn{ width:auto; }
}

/* ---- Motion (Sep 2026): page transitions, AI typing, result reveals ---- */
@keyframes view-in{ from{ opacity:0; transform: translateY(8px); } to{ opacity:1; transform:none; } }
@keyframes msg-in-left{ from{ opacity:0; transform: translateY(6px) translateX(-6px) scale(.98); } to{ opacity:1; transform:none; } }
@keyframes msg-in-right{ from{ opacity:0; transform: translateY(6px) translateX(6px) scale(.98); } to{ opacity:1; transform:none; } }
@keyframes panel-in{ from{ opacity:0; transform: translateY(14px) scale(.97); } to{ opacity:1; transform:none; } }
@keyframes typing-bounce{ 0%,80%,100%{ transform: translateY(0); opacity:.45; } 40%{ transform: translateY(-4px); opacity:1; } }
@keyframes ai-shimmer{ from{ background-position: 200% 0; } to{ background-position: -200% 0; } }
@keyframes reveal-up{ from{ opacity:0; transform: translateY(10px); } to{ opacity:1; transform:none; } }
@keyframes sent-pop{ 0%{ transform: scale(1); } 40%{ transform: scale(.82) rotate(-8deg); } 100%{ transform: scale(1); } }
@keyframes caret-blink{ 50%{ opacity:0; } }

/* Page transitions. main.js keeps the topbar and swaps only #view-root:
   .view-leave fades the old page out (110ms), then .view-enter is re-added
   for the new one. A full shell rebuild renders main.view with
   .view-enter already on it. */
main.view.view-enter{ animation: view-in .32s cubic-bezier(.2,.7,.2,1) both; }
main.view.view-leave{ opacity:0; transform: translateY(-6px); transition: opacity .11s ease-in, transform .11s ease-in; }

/* AI Consultant */
.consultant-panel.is-opening{ animation: panel-in .24s cubic-bezier(.2,.8,.2,1) both; }
.consultant-msg.is-new.consultant-msg-assistant{ animation: msg-in-left .24s ease-out both; }
.consultant-msg.is-new.consultant-msg-user{ animation: msg-in-right .22s ease-out both; }
.consultant-msg-pending{ opacity:1; padding:11px 14px; }
.typing-dots{ display:inline-flex; align-items:center; gap:4px; height:12px; }
.typing-dots i{ width:6px; height:6px; border-radius:50%; background: var(--text-muted); display:block; animation: typing-bounce 1.1s ease-in-out infinite; }
.typing-dots i:nth-child(2){ animation-delay:.15s; }
.typing-dots i:nth-child(3){ animation-delay:.3s; }
.consultant-msg.is-typing .consultant-nav-buttons{ display:none; }
.consultant-msg.is-typing .consultant-followups{ display:none; }
.consultant-msg.is-typing .consultant-md > :last-child::after{ content:"▍"; color: var(--accent); margin-left:1px; animation: caret-blink .8s steps(1) infinite; }
#consultant-send.is-sent{ animation: sent-pop .4s ease-out; color: var(--accent); }
.consultant-fab{ transition: transform .15s ease, background .2s, box-shadow .2s; }
.consultant-fab:active{ transform: scale(.94); }

/* Any "AI lagi mikir" status row: fade in + shimmering text */
.ocr-status{ animation: reveal-up .2s ease-out both; }
.ocr-status:has(.spinner) span{ background: linear-gradient(90deg, var(--text-muted) 0%, var(--text) 50%, var(--text-muted) 100%); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation: ai-shimmer 1.6s linear infinite; }

/* AI results land with a small stagger instead of popping in at once */
[id^="polish-options"] > *, .copy-variant, #ai-result > *, .hooks-list > *, .brand-grid > *, .bb-hub-grid > *, .journey-list > .journey-step, .cd-row{ animation: reveal-up .3s cubic-bezier(.2,.7,.2,1) both; }
[id^="polish-options"] > :nth-child(2), .copy-variant:nth-child(2), .brand-grid > :nth-child(2), .bb-hub-grid > :nth-child(2), .journey-list > :nth-child(2), .cd-row:nth-child(2){ animation-delay:.05s; }
[id^="polish-options"] > :nth-child(3), .copy-variant:nth-child(3), .brand-grid > :nth-child(3), .bb-hub-grid > :nth-child(3), .journey-list > :nth-child(3), .cd-row:nth-child(3){ animation-delay:.1s; }
.brand-grid > :nth-child(4), .journey-list > :nth-child(4), .cd-row:nth-child(4){ animation-delay:.15s; }
.brand-grid > :nth-child(5), .journey-list > :nth-child(5), .cd-row:nth-child(5){ animation-delay:.2s; }
.cd-row:nth-child(n+6){ animation-delay:.25s; }

/* Small tactile touches */
.btn{ transition: transform .12s ease, background .15s, color .15s, border-color .15s, box-shadow .15s; }
.btn-primary:hover{ transform: translateY(-1px); box-shadow: 0 6px 18px color-mix(in srgb, var(--brand-tint) 30%, transparent); }
.btn:disabled{ transform:none; box-shadow:none; }
.tab{ transition: color .15s, background .2s, transform .12s; }
.tab:active{ transform: scale(.97); }
.toast{ animation: toastIn .22s cubic-bezier(.2,.8,.2,1); }
.journey-hero{ animation: view-in .35s cubic-bezier(.2,.7,.2,1) both; }

@media (prefers-reduced-motion: reduce){
  main.view.view-enter, .consultant-panel.is-opening, .consultant-msg.is-new, .ocr-status, .journey-hero,
  [id^="polish-options"] > *, .copy-variant, #ai-result > *, .hooks-list > *, .brand-grid > *, .bb-hub-grid > *, .journey-list > .journey-step, .cd-row{ animation:none; }
  .typing-dots i{ animation:none; opacity:.7; }
  .ocr-status:has(.spinner) span{ animation:none; color: var(--text-muted); background:none; -webkit-background-clip:initial; }
  .btn-primary:hover{ transform:none; }
  main.view.view-leave{ transition:none; }
}
@keyframes welcome-in{ 0%{ opacity:0; transform: translateY(8px); } 22%{ opacity:1; transform:none; } 78%{ opacity:1; transform:none; } 100%{ opacity:0; transform: translateY(-6px); } }
@media (max-width: 720px){
  .consultant-fab{ right:16px; bottom:16px; }
}

/* Beranda's Analitik as a fold (js/views/brand-home-analytics.js): folded by
   default on phones, the owner's choice remembered. */
.bha-summary{ cursor:pointer; list-style:none; justify-content:flex-start; gap:8px; }
.bha-summary::-webkit-details-marker{ display:none; }
.bha-chevron{ color: var(--text-faint); transform: rotate(-90deg); transition: transform .2s; }
.bha-section[open] .bha-chevron{ transform:none; }
.bha-tools{ display:flex; justify-content:flex-end; gap:8px; margin:-6px 0 12px; }
.bha-tools:empty{ display:none; }

/* What changed after a Pemula/Pro switch (js/layout.js showModeSwitched). */
.mode-switched-list{ margin:0; padding-left:18px; display:flex; flex-direction:column; gap:8px; font-size:13.5px; line-height:1.5; }

/* No connection (js/layout.js wireOfflineBanner): a banner across the top;
   the page and the sticky header move down by its height. */
.offline-banner{ position:fixed; top:0; left:0; right:0; z-index:45; display:flex; align-items:center; justify-content:center; gap:8px; padding:7px 16px; background:#ffc94a; color:#1c1610; font-size:13px; font-weight:700; line-height:1.35; text-align:center; }
.offline-banner svg{ flex:none; }
body.is-offline{ padding-top: var(--offline-h, 34px); }
body.is-offline .topbar{ top: var(--offline-h, 34px); }

/* Visible back button (js/back-link.js) */
.page-back-btn{ display:inline-flex; align-items:center; gap:6px; padding:6px 13px 6px 9px; border-radius: var(--radius-pill); border:1px solid var(--border); background: var(--surface); color: var(--text); font-size:13px; font-weight:700; letter-spacing:0; text-transform:none; text-decoration:none; line-height:1.2; transition: border-color .15s, background .15s; }
.page-back-btn svg{ flex:none; color: var(--accent); }
.page-back-btn:hover{ border-color: var(--accent); background: var(--accent-soft); color: var(--text); }
.page-eyebrow:has(.page-back-btn){ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

/* Intro modal tour recommendation */
.intro-tour-offer{ display:flex; gap:12px; align-items:flex-start; margin-top:16px; padding:12px 14px; border-radius: var(--radius-md); background: var(--accent-soft); border:1px solid color-mix(in srgb, var(--accent) 45%, var(--border)); }
.intro-tour-offer svg{ flex:none; color: var(--accent); margin-top:2px; }
.intro-tour-offer b{ display:block; font-size:13.5px; margin-bottom:2px; }
.intro-tour-offer span{ font-size:12.5px; color: var(--text-muted); line-height:1.5; }

/* Banner secondary button (mode reminder) */
.tour-prompt.in.mode-reminder{ max-height:120px; }
.tour-prompt-secondary{ flex:none; background: transparent; color: var(--accent-text); border:1px solid color-mix(in srgb, var(--accent-text) 45%, transparent); font-weight:700; }
.tour-prompt-secondary:hover{ background: rgba(0,0,0,.08); }
@media (max-width: 640px){ .tour-prompt-inner{ flex-wrap:wrap; } .tour-prompt.in{ max-height:140px; } }

/* "Kamu bisa tanya AI lho" bubble next to the AI consultant button */
.consultant-fab-hint{ position:fixed; right:86px; bottom:34px; z-index:65; max-width:calc(100vw - 260px); padding:8px 12px; border-radius:14px 14px 4px 14px; background: var(--bg-raised); color: var(--text); border:1px solid color-mix(in srgb, var(--accent) 50%, var(--border)); font: inherit; font-size:12.5px; font-weight:700; box-shadow: var(--shadow-lg); cursor:pointer; text-align:left; animation: fab-hint-in .45s ease both .6s; }
.consultant-fab-hint:hover{ border-color: var(--accent); }
body:has(#consultant-panel:not([hidden])) .consultant-fab-hint, body.tour-active .consultant-fab-hint{ display:none; }
@keyframes fab-hint-in{ from{ opacity:0; transform: translateX(8px); } to{ opacity:1; transform:none; } }
@media (max-width: 640px){ .consultant-fab-hint{ right:66px; bottom:20px; font-size:11.5px; padding:6px 10px; max-width:calc(100vw - 230px); } }

/* Warning box (brand description, unfinished logo) */
.warn-box{ display:flex; gap:10px; align-items:flex-start; padding:10px 12px; margin:8px 0 10px; border-radius: var(--radius-md); background: color-mix(in srgb, var(--health-poor) 11%, transparent); border:1px solid color-mix(in srgb, var(--health-poor) 45%, transparent); font-size:12.5px; line-height:1.55; color: var(--text); }
.warn-box svg{ flex:none; color: var(--health-poor); margin-top:2px; }
.warn-box b{ display:block; color: var(--health-poor); margin-bottom:2px; }
.warn-box-sub{ display:block; margin-top:4px; color: var(--text-muted); }
/* Neutral variant — a tip, not a warning (e.g. the brand description). */
.warn-box.info-box{ background: var(--surface-2); border-color: var(--border); }
.warn-box.info-box svg{ color: var(--accent); }
.warn-box.info-box b{ color: var(--text); }
/* Brand form: empty logo slot before a name is typed (no "?"). */
.avatar.brand-mark-empty{ background: var(--surface-2); color: var(--text-faint); border:1.5px dashed var(--border); }

/* Teleprompter call-to-action (Creator) */
.tp-cta{ display:flex; align-items:center; gap:12px; width:100%; margin:10px 0 6px; padding:11px 14px; border-radius: var(--radius-md); border:1.5px dashed color-mix(in srgb, var(--accent) 65%, var(--border)); background: var(--accent-soft); color: var(--text); font: inherit; font-size:13.5px; font-weight:800; text-align:left; cursor:pointer; transition: border-color .15s, transform .15s; }
.tp-cta > svg:first-child{ color: var(--accent); flex:none; }
.tp-cta > span{ flex:1; min-width:0; }
.tp-cta small{ display:block; font-size:11.5px; font-weight:500; color: var(--text-muted); margin-top:2px; }
.tp-cta:hover{ border-style:solid; border-color: var(--accent); transform: translateY(-1px); }

/* Calendar: past days can't take new schedules */
.cal-cell.is-past{ background-image: repeating-linear-gradient(135deg, transparent 0 7px, color-mix(in srgb, var(--text) 5%, transparent) 7px 14px); cursor:not-allowed; }
.cal-cell.is-past .cal-date{ opacity:.5; }
.cal-cell.is-past .cal-item{ cursor:pointer; }
.cad-tip{ margin:0 0 18px; padding:12px 14px; border-radius: var(--radius-md); background: var(--accent-soft); border:1px solid color-mix(in srgb, var(--accent) 40%, var(--border)); }
.cad-tip-head{ display:flex; align-items:center; gap:8px; font-size:13px; margin-bottom:6px; }
.cad-tip-head svg{ color: var(--accent); flex:none; }
.cad-tip p{ font-size:12.5px; line-height:1.6; color: var(--text-muted); margin:0 0 10px; }

/* Brand Guidelines — moodboard explainer + example */
.mb-explain{ margin-top:18px; padding:12px 14px; border-radius: var(--radius-md); background: var(--surface); border:1px solid var(--border); }
.mb-explain > summary{ display:flex; align-items:center; gap:8px; cursor:pointer; font-size:13px; font-weight:700; list-style:none; }
.mb-explain > summary::-webkit-details-marker{ display:none; }
.mb-explain > summary svg{ color: var(--accent); flex:none; }
.mb-explain p{ font-size:12.5px; line-height:1.6; color: var(--text-muted); margin:8px 0 0; }
.mb-example-title{ font-size:11.5px; font-weight:700; margin:12px 0 6px; }
.mb-example{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:6px; }
.mb-tile{ aspect-ratio: 4 / 3; max-width:100%; border-radius:10px; padding:6px; display:flex; align-items:flex-end; }
.mb-tile span{ font-size:10.5px; font-weight:700; line-height:1.25; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.7); }

/* Moodboard search keywords — the ready-to-paste Pinterest line per mood. */
.mb-prompt-block{ margin:0 0 12px; }
/* ChatGPT prompt boxes (js/views/brand-guidelines.js gptPromptBoxHTML):
   logo prompts 1-3 and the moodboard prompt. */
.gpt-prompt{ margin:0 0 10px; }
.gpt-prompt-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; font-size:11.5px; font-weight:800; color: var(--text-muted); }
.gpt-prompt-text{ white-space:pre-wrap; word-break:break-word; font-family:inherit; font-size:12px; line-height:1.6; background: var(--surface-2); border-radius: var(--radius-md); padding:12px 14px; margin:0; color: var(--text); max-height:260px; overflow:auto; }
.mb-gpt{ margin:0 0 14px; }
@media (max-width: 560px){ .gpt-prompt-head{ flex-wrap:wrap; } }
.mb-prompt-title{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color: var(--text-faint); margin-bottom:8px; }
.mb-prompt-empty{ display:flex; align-items:center; gap:8px; padding:12px 14px; border:1px dashed var(--border); border-radius: var(--radius-md); font-size:12px; color: var(--text-muted); }
.mb-prompt-empty svg{ flex:none; color: var(--text-faint); }
.mb-prompt{ padding:12px 14px; border:1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); margin-bottom:8px; }
.mb-prompt:last-child{ margin-bottom:0; }
.mb-prompt-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.mb-prompt-mood{ font-size:12.5px; font-weight:800; }
.mb-prompt-text{ font-family: ui-monospace, monospace; font-size:12px; line-height:1.55; color: var(--text); background: var(--surface-2); border-radius:8px; padding:9px 11px; word-break:break-word; -webkit-user-select:all; user-select:all; }
.mb-prompt-links{ font-size:11px; color: var(--text-faint); margin-top:8px; }
.mb-prompt-links a{ color: var(--accent); font-weight:700; }
@media (max-width: 560px){
  .mb-prompt-head{ flex-wrap:wrap; }
}

/* Brand Guidelines — tone of voice */
.tov-axis{ margin-bottom:18px; }
.tov-axis:last-child{ margin-bottom:0; }
.tov-axis-head{ display:flex; justify-content:space-between; gap:8px; font-size:12.5px; font-weight:700; margin-bottom:6px; }
.tov-pct{ color: var(--accent); font-variant-numeric: tabular-nums; }
.tov-axis input[type=range]{ width:100%; accent-color: var(--accent); }
.tov-detect > summary{ display:flex; align-items:center; gap:8px; cursor:pointer; font-size:13px; font-weight:700; list-style:none; }
.tov-detect > summary::-webkit-details-marker{ display:none; }
.tov-detect > summary svg{ color: var(--accent); flex:none; }

/* ---------- Goal Plan: wizard preview, suggestions, pace card ---------- */
.goal-suggest{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:-6px 0 12px; font-size:12px; color: var(--text-faint); }
.goal-suggest-chip{ border:1px solid var(--border); background: var(--surface); color: var(--text-muted); border-radius:999px; padding:4px 10px; font:inherit; font-size:12px; cursor:pointer; }
.goal-suggest-chip b{ color: var(--text); font-weight:700; }
.goal-suggest-chip:hover{ border-color: var(--accent); }
.goal-use{ background:none; border:0; padding:0; font:inherit; cursor:pointer; text-decoration:underline; }
.goal-preview{ display:grid; gap:8px; }
.goal-preview-stage{ border:1px solid var(--border); border-radius: var(--radius-md); padding:12px 14px; background: var(--surface); }
.goal-preview-head{ display:flex; align-items:center; gap:10px; }
.goal-preview-head > div{ flex:1; min-width:0; display:flex; flex-direction:column; }
.goal-preview-head > div b{ font-size:14px; }
.goal-preview-head > div span{ font-size:11.5px; color: var(--text-faint); }
.goal-preview-head strong{ font-size:16px; font-variant-numeric: tabular-nums; white-space:nowrap; }
.goal-preview-head strong small{ font-size:11px; font-weight:600; color: var(--text-faint); }
.goal-preview-n{ flex:none; width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:800; background: var(--accent-soft); color: var(--accent); }
.goal-preview-stage p{ margin:8px 0 6px; font-size:12.5px; color: var(--text-muted); }
.goal-preview-stage ul{ margin:0; padding-left:18px; font-size:12.5px; color: var(--text-muted); line-height:1.6; }
.goal-preview-stage ul b{ color: var(--text); font-variant-numeric: tabular-nums; }
.goal-pace{ margin-bottom:16px; }
.goal-pace-main{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.goal-pace-status{ display:flex; align-items:center; gap:7px; font-weight:800; font-size:15px; }
.goal-pace-dot{ width:8px; height:8px; border-radius:50%; background: var(--text-faint); }
.goal-pace.is-ok .goal-pace-dot{ background: var(--health-good); } .goal-pace.is-ok .goal-pace-status{ color: var(--health-good); }
.goal-pace.is-warn .goal-pace-dot{ background: var(--health-average); } .goal-pace.is-warn .goal-pace-status{ color: var(--health-average); }
.goal-pace.is-bad .goal-pace-dot{ background: var(--health-poor); } .goal-pace.is-bad .goal-pace-status{ color: var(--health-poor); }
.goal-pace-line{ margin:4px 0 0; font-size:13px; color: var(--text-muted); }
.goal-pace-vision{ margin-top:12px; padding-top:12px; border-top:1px dashed var(--border); }
.goal-pace-vision-label{ display:flex; align-items:center; gap:6px; font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color: var(--text-faint); }
.goal-pace-vision p{ margin:6px 0 0; font-size:13px; color: var(--text); }
.goal-horizon{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; margin-top:8px; }
.goal-horizon-step{ display:flex; flex-direction:column; font-size:11px; color: var(--text-faint); }
.goal-horizon-step b{ font-size:13px; color: var(--text); font-variant-numeric: tabular-nums; }
.goal-horizon-arrow{ color: var(--text-faint); display:flex; }

/* Grow Brand: evaluation list + disclaimer */
.goal-pace > .goal-pace-line + .goal-pace-line{ margin-top:8px; }
.goal-eval{ margin-top:12px; display:grid; gap:8px; }
.goal-eval-item{ display:flex; flex-direction:column; gap:2px; padding:10px 12px; border:1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2); }
.goal-eval-item b{ font-size:13px; color: var(--text); }
.goal-eval-item span{ font-size:12.5px; color: var(--text-muted); line-height:1.5; }
.goal-disclaimer{ margin-top:12px; }
.goal-disclaimer summary{ display:flex; align-items:center; gap:6px; }
.goal-disclaimer-box{ margin-top:14px; border:1px solid color-mix(in srgb, var(--health-average) 45%, var(--border)); border-radius: var(--radius-md); padding:12px 14px; background: var(--surface-2); }
.goal-disclaimer-title{ display:flex; align-items:center; gap:6px; font-weight:800; font-size:13px; margin-bottom:6px; color: var(--health-average); }
.goal-disclaimer-box p{ margin:0 0 8px; font-size:12.5px; line-height:1.55; color: var(--text-muted); }
.goal-preview-stage.is-skipped{ opacity:.5; }
/* Grow Brand launcher preview (js/views/goal-wizard.js): two independent
   plans shown side by side, never merged into one column or one number. */
.goal-preview-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:4px; }
@media (max-width:640px){ .goal-preview-grid{ grid-template-columns:1fr; } }
.goal-preview-grid.is-three{ grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); }
.goal-preview-grid.is-one{ grid-template-columns:1fr; max-width:360px; }
.goal-preview-grid.is-two{ grid-template-columns:1fr 1fr; }

/* Grow Brand launcher's first screen (js/views/goal-wizard.js selectStepHTML):
   pick which of the 3 campaigns to deploy this run — fixes the old
   auto-stepping flow silently re-offering a track the user just skipped. */
.goal-select-list{ display:grid; gap:10px; margin-bottom:18px; }
.goal-select-row{ display:flex; align-items:flex-start; gap:12px; padding:14px 16px; border:1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); cursor:pointer; transition: border-color .15s, background .15s; }
.goal-select-row:has(input:checked){ border-color: var(--accent); background: var(--accent-soft); }
.goal-select-row input[type=checkbox]{ width:18px; height:18px; margin:2px 0 0; flex:none; }
.goal-select-row-body b{ display:block; font-size:14px; margin-bottom:2px; }
.goal-select-row-body p{ margin:0; font-size:12.5px; color: var(--text-muted); line-height:1.45; }
.goal-select-row.is-disabled{ opacity:.55; cursor:not-allowed; background: var(--surface-2); }
.goal-select-row.is-disabled .goal-select-row-body p{ color: var(--text-faint); }
/* Grow Brand wizard — Sales Growth step: one card per product/service */
.goal-products-label{ display:block; font-size:13px; font-weight:600; margin:0 0 8px; }
.goal-product{ border:1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); padding:12px 14px 2px; margin-bottom:10px; }
.goal-product-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; font-size:12.5px; color: var(--text-muted); }
.goal-product-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 12px; }
@media (max-width:520px){ .goal-product-grid{ grid-template-columns:1fr; } }
.goal-sales-more{ border-top:1px solid var(--border); padding-top:10px; margin:0 0 14px; }
.goal-sales-more summary{ cursor:pointer; font-size:13px; font-weight:600; color: var(--text-muted); }
/* Sales Tracker (js/views/sales.js) */
.st-log{ margin-bottom:20px; border-color: color-mix(in srgb, var(--health-good) 35%, var(--border)); }
.st-log-row{ display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; }
.st-log-row .field{ flex:1; min-width:140px; }
.st-log-row .btn{ margin-bottom:16px; height:42px; }
.st-log-more summary{ cursor:pointer; font-size:12.5px; color: var(--text-muted); }
.st-money{ font-size:22px !important; }
.st-campaign{ display:flex; align-items:center; gap:10px; color:inherit; text-decoration:none; font-size:13px; margin-bottom:8px; }
.st-campaign span{ flex:1; }
.st-campaign:hover{ border-color: var(--health-good); }
.st-trend{ display:flex; align-items:flex-end; gap:10px; height:170px; padding:16px 18px 12px; }
.st-bar-col{ flex:1; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:4px; min-width:0; }
.st-bar{ width:100%; max-width:46px; border-radius:6px 6px 2px 2px; background: color-mix(in srgb, var(--health-good) 45%, transparent); }
.st-bar.is-now{ background: var(--health-good); }
.st-bar-val{ font-size:11.5px; font-weight:700; color: var(--text-muted); }
.st-bar-label{ font-size:10.5px; color: var(--text-faint); white-space:nowrap; }
.st-advice-item{ display:flex; gap:12px; padding:10px 0; border-top:1px solid var(--border-soft); }
.st-advice-n{ flex:none; width:24px; height:24px; border-radius:50%; background: var(--accent-soft); color: var(--accent); font-weight:700; font-size:12px; display:flex; align-items:center; justify-content:center; }
.st-advice-item b{ display:block; font-size:13.5px; }
.st-advice-why{ display:block; font-size:11.5px; color: var(--text-faint); margin-top:1px; }
.st-advice-item p{ margin:5px 0 0; font-size:13px; color: var(--text-muted); }
.st-entry{ display:flex; align-items:center; gap:12px; padding:10px 16px; border-bottom:1px solid var(--border-soft); font-size:13px; }
.st-entry:last-of-type{ border-bottom:none; }
.st-entry-date{ flex:none; width:64px; color: var(--text-faint); font-size:12px; }
.st-entry-main{ flex:1; min-width:0; }
.st-entry-main small{ display:block; color: var(--text-faint); font-size:11.5px; }
.st-entry-amount{ flex:none; color: var(--text-muted); font-variant-numeric: tabular-nums; }
tr.is-archived td{ opacity:.55; }
.goal-preview-col h4{ margin:0 0 4px; font-size:14px; }
/* Cross-campaign insight banner (js/cross-campaign.js output, rendered in
   js/views/campaigns.js) — always labeled with its confidence tier so it
   never reads as more certain than the data behind it. */
.cross-insight{ margin-bottom:14px; }
.cross-insight-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.cross-insight-advanced{ margin-top:8px; }
.cross-insight-advanced summary{ font-size:11.5px; color: var(--text-faint); cursor:pointer; }
.goal-remind .goal-eval-item b{ display:flex; align-items:center; gap:6px; }
.goal-remind ul{ margin:6px 0 0; padding-left:18px; font-size:12.5px; color: var(--text-muted); line-height:1.6; }
.goal-remind em{ font-style:normal; color: var(--health-average); font-size:11.5px; }

/* Topbar ⋯ menu (js/layout.js appMenuHTML) */
.menu.app-menu{ min-width:250px; }
.menu-ai-row .ai-usage-bar{ margin-left:auto; }

/* Locked nav tabs (Pemula, until the brand identity is done — js/layout.js) */
.tab.is-locked{ color: var(--text-faint); cursor:not-allowed; }
.tab.is-locked:hover{ background:transparent; color: var(--text-faint); }

/* Home hero: Brand DNA / Brand Book progress rows (js/views/home.js) */
.identity-rows{ display:flex; flex-direction:column; gap:8px; width:100%; max-width:520px; margin-top:4px; }
.identity-row{ display:grid; grid-template-columns: 22px minmax(0,1fr) minmax(90px,140px) auto; align-items:center; gap:10px; font-size:13px; font-weight:700; }
.identity-row-icon{ width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; background: var(--surface-2); color: var(--text-muted); }
.identity-row.is-done .identity-row-icon{ background: var(--health-good-soft); color: var(--health-good); }
.identity-row-bar{ position:relative; height:6px; border-radius:999px; background: var(--surface-2); overflow:hidden; }
.identity-row-bar > span{ position:absolute; inset:0 auto 0 0; background: var(--accent); border-radius:999px; transition: width .3s; }
.identity-row.is-done .identity-row-bar > span{ background: var(--health-good); }
.identity-row-value{ font-variant-numeric: tabular-nums; color: var(--text-muted); font-size:12.5px; min-width:44px; text-align:right; }
.identity-row.is-done .identity-row-value{ color: var(--health-good); }
@media (max-width: 560px){ .identity-row{ grid-template-columns: 22px minmax(0,1fr) auto; } .identity-row-bar{ display:none; } }

/* ============================================================
   Roadmap ke Tujuan (js/views/goal-roadmap.js, js/goal-card.js)
   Lane colours come from the Grow-track accents so one campaign keeps one
   colour from roadmap to calendar: event = --accent, audience =
   --track-social, community = --track-community.
   ============================================================ */
.rg-bad{ color: var(--health-poor); } .rg-warn{ color: var(--health-average); }
.rg-note{ display:flex; align-items:center; gap:7px; font-size:12.5px; color: var(--text-muted); margin:-12px 0 18px; }
.rg-eyebrow{ font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color: var(--text-faint); margin-bottom:8px; }
.rg-pill{ display:inline-flex; align-items:center; padding:2px 9px; border-radius: var(--radius-pill); font-size:11px; font-weight:700; background: var(--surface-2); color: var(--text-muted); white-space:nowrap; vertical-align:middle; }
.rg-pill-ok, .rg-pill-active{ background: var(--health-good-soft); color: var(--health-good); }
.rg-pill-warn, .rg-pill-partial, .rg-pill-installing{ background: var(--health-average-soft); color: var(--health-average); }
.rg-pill-bad{ background: var(--health-poor-soft); color: var(--health-poor); }
.rg-pill-acc, .rg-pill-draft{ background: var(--accent-soft); color: var(--accent); }
.rg-pill-unknown, .rg-pill-archived, .rg-pill-completed{ background: var(--surface-2); color: var(--text-muted); }

/* list */
.rg-goal-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap:14px; }
.rg-goal-card{ display:block; background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-md); padding:16px 18px; color: inherit; text-decoration:none; transition: border-color .15s, transform .15s; }
.rg-goal-card:hover, .rg-goal-card:focus-visible{ border-color: var(--brand-tint); outline:none; transform: translateY(-1px); }
.rg-goal-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.rg-goal-top b{ font-size:15px; }
.rg-goal-meta{ font-size:12.5px; color: var(--text-muted); margin:6px 0 12px; }
.rg-goal-foot{ font-size:12px; color: var(--text-muted); margin-top:8px; }
.rg-empty{ max-width:640px; } .rg-empty h3{ margin:0 0 6px; } .rg-empty p{ color: var(--text-muted); margin:0 0 12px; }
.rg-empty-steps{ margin:0 0 16px; padding-left:20px; color: var(--text-muted); font-size:13.5px; } .rg-empty-steps li{ margin:4px 0; }
.rg-archived{ margin-top:24px; } .rg-archived summary{ cursor:pointer; color: var(--text-muted); font-size:13px; margin-bottom:12px; }

/* readiness bar */
.rg-mini-bar, .rg-ready-bar{ display:flex; height:7px; border-radius:999px; overflow:hidden; background: var(--surface-2); }
.rg-ready-bar{ height:9px; margin:10px 0 8px; }
.rg-mini-bar i, .rg-ready-bar i{ display:block; height:100%; }
.rg-mini-bar i.is-done, .rg-ready-bar i.is-done, .rg-swatch.is-done{ background: var(--health-good); }
.rg-mini-bar i.is-soon, .rg-ready-bar i.is-soon, .rg-swatch.is-soon{ background: var(--brand-tint); }
.rg-mini-bar i.is-overdue, .rg-ready-bar i.is-overdue, .rg-swatch.is-overdue{ background: var(--health-poor); }
.rg-mini-bar i.is-later, .rg-ready-bar i.is-later, .rg-swatch.is-later{ background: var(--border); }
.rg-legend{ display:flex; flex-wrap:wrap; gap:4px 14px; font-size:11.5px; color: var(--text-muted); }
.rg-swatch{ display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:5px; vertical-align:0; }
.rg-legend .num, .rg-big, .rg-row-date{ font-variant-numeric: tabular-nums; }

/* detail */
.rg-tiles{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:12px; margin-bottom:16px; }
.rg-tile{ background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-md); padding:14px 16px; }
.rg-big{ font-family: var(--font-display); font-size:30px; line-height:1; } .rg-big small{ font-family: var(--font-body); font-size:13px; color: var(--text-faint); }
.rg-tile-sub{ font-size:12px; color: var(--text-muted); margin:8px 0 0; }
.rg-section{ margin-bottom:16px; }
.rg-section-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px; } .rg-section-head h2{ font-size:17px; margin:0; }
.rg-callout{ display:flex; gap:10px; padding:12px 14px; border-radius: var(--radius-md); font-size:13.5px; margin-bottom:12px; border:1px solid var(--border); background: var(--surface); }
.rg-callout svg{ flex:none; margin-top:2px; } .rg-callout-warn{ border-color: color-mix(in srgb, var(--health-average) 45%, var(--border)); background: var(--health-average-soft); } .rg-callout-warn svg{ color: var(--health-average); }
.rg-callout-info svg{ color: var(--info); }
.rg-callout-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.rg-install{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:16px 18px; border-radius: var(--radius-md); border:1px solid var(--brand-tint); background: var(--accent-soft); margin-bottom:16px; }
.rg-install p{ margin:4px 0 0; font-size:13px; color: var(--text-muted); max-width:56ch; } .rg-install.is-partial{ border-color: var(--health-average); background: var(--health-average-soft); }

/* what was read */
.rg-cond-row{ display:grid; grid-template-columns: minmax(150px,1.1fr) minmax(110px,.8fr) minmax(0,1.6fr) auto; gap:6px 14px; align-items:center; padding:10px 0; border-bottom:1px solid var(--border-soft); font-size:13.5px; }
.rg-cond-row:last-child{ border-bottom:0; }
.rg-cond-main{ display:flex; flex-direction:column; } .rg-cond-src{ font-size:11.5px; color: var(--text-faint); }
.rg-cond-val{ color: var(--text); font-variant-numeric: tabular-nums; } .rg-cond-eff{ color: var(--text-muted); font-size:13px; }
.rg-cond-fields{ display:grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap:0 16px; margin-top:16px; }
.rg-infos{ margin:12px 0 0; padding-left:18px; font-size:12.5px; color: var(--text-muted); } .rg-infos li{ margin:4px 0; }
@media (max-width: 700px){
  .rg-tiles{ grid-template-columns: 1fr; }
  .rg-cond-row{ grid-template-columns: 1fr auto; } .rg-cond-val{ display:none; } .rg-cond-eff{ grid-column: 1 / -1; }
}

/* timeline */
.rg-tl-scroll{ overflow-x:auto; padding-top:16px; }
.rg-tl{ position:relative; min-width:680px; }
.rg-lane{ display:grid; grid-template-columns: 170px minmax(0,1fr); align-items:center; min-height:50px; border-bottom:1px dashed var(--border-soft); }
.rg-lane-name{ display:flex; align-items:center; gap:9px; padding-right:12px; font-size:13px; } .rg-lane-name b{ display:block; } .rg-lane-name small{ display:block; font-size:11px; color: var(--text-faint); }
.rg-lanedot{ width:9px; height:9px; border-radius:3px; flex:none; display:inline-block; }
.rg-track{ position:relative; height:50px; }
.rg-axis{ min-height:26px; border-bottom:1px solid var(--border); } .rg-months{ height:26px; } .rg-months span{ position:absolute; top:6px; font-size:11px; color: var(--text-faint); padding-left:6px; border-left:1px solid var(--border); height:16px; line-height:14px; }
.rg-bar{ position:absolute; top:13px; height:24px; border-radius:7px; display:flex; align-items:center; padding:0 8px; font-size:11.5px; font-weight:700; color:#101010; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rg-bar span{ overflow:hidden; text-overflow:ellipsis; }
.rg-tick{ position:absolute; top:6px; width:3px; height:8px; border-radius:2px; transform: translateX(-50%); }
.rg-tl-legend .rg-tick{ position:static; display:inline-block; transform:none; vertical-align:middle; margin-right:6px; background: var(--text-muted); }
.rg-dot{ position:absolute; top:37px; width:11px; height:11px; border-radius:50%; transform: translateX(-50%); background: var(--surface); border:2px solid var(--text-muted); box-sizing:border-box; }
.rg-dot.is-done{ background: var(--health-good); border-color: var(--health-good); } .rg-dot.is-overdue{ background: var(--health-poor); border-color: var(--health-poor); }
.rg-tl-legend{ display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:12px; font-size:12px; color: var(--text-muted); align-items:center; }
.rg-tl-legend .rg-dot{ position:static; display:inline-block; transform:none; vertical-align:middle; margin-right:5px; }
.rg-hline{ display:inline-block; width:0; height:12px; border-left:2px dashed var(--text-muted); margin-right:6px; vertical-align:middle; }
.rg-overlay-lines{ position:absolute; left:0; right:0; top:26px; bottom:0; pointer-events:none; }
.rg-overlay-lines .rg-lane{ height:100%; min-height:0; border:0; display:grid; } .rg-overlay-lines .rg-track{ height:100%; }
.rg-today, .rg-hday{ position:absolute; top:0; bottom:0; width:0; }
.rg-today{ border-left:2px solid var(--health-poor); } .rg-hday{ border-left:2px dashed var(--text-muted); }
.rg-today b, .rg-hday b{ position:absolute; top:-15px; left:0; transform: translateX(-50%); font-size:10px; font-weight:700; white-space:nowrap; background: var(--surface); padding:0 3px; }
.rg-today b{ color: var(--health-poor); } .rg-hday b{ color: var(--text-muted); }

/* week list */
.rg-week{ border-bottom:1px solid var(--border-soft); } .rg-week:last-child{ border-bottom:0; }
.rg-week summary{ display:flex; align-items:center; gap:10px; padding:11px 2px; cursor:pointer; font-size:13.5px; list-style:none; } .rg-week summary::-webkit-details-marker{ display:none; }
.rg-week summary::before{ content:"▸"; color: var(--text-faint); font-size:11px; transition: transform .12s; } .rg-week[open] summary::before{ transform: rotate(90deg); }
.rg-week-sum{ margin-left:auto; font-size:12px; color: var(--text-faint); }
.rg-week.is-now summary b{ color: var(--brand-tint); }
.rg-week-body{ padding:0 2px 10px 18px; }
.rg-row{ display:grid; grid-template-columns: 96px 14px minmax(0,1fr) auto; gap:10px; align-items:center; padding:6px 0; font-size:13.5px; }
.rg-row-date{ color: var(--text-muted); font-size:12.5px; } .rg-row-date b{ color: var(--text); margin-right:3px; }
.rg-row-main{ display:flex; align-items:center; gap:8px; min-width:0; } .rg-row-main a{ color: inherit; text-decoration:underline; text-decoration-color: var(--border); text-underline-offset:3px; overflow:hidden; text-overflow:ellipsis; }
.rg-kind{ font-size:10.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color: var(--text-faint); }

/* this week */
.rg-task{ display:grid; grid-template-columns: 20px minmax(0,1fr) auto 4px; gap:12px; align-items:center; padding:9px 0; border-bottom:1px dashed var(--border-soft); font-size:13.5px; } .rg-task:last-child{ border-bottom:0; }
.rg-task-main{ display:flex; flex-direction:column; min-width:0; } .rg-task-main a{ color: inherit; } .rg-task-main small{ color: var(--text-faint); font-size:11.5px; }
.rg-task-when{ font-size:12px; color: var(--text-muted); white-space:nowrap; }
.rg-box{ width:16px; height:16px; border-radius:4px; border:1.5px solid var(--text-faint); display:inline-block; } .rg-box.is-done{ background: var(--health-good); border-color: var(--health-good); }
.rg-laneline{ width:3px; height:20px; border-radius:2px; }
.rg-task-done .rg-task-main a, .rg-task-done .rg-task-main{ text-decoration: line-through; color: var(--text-faint); }

/* re-plot dialog */
.rg-replan-fields{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:0 16px; } @media (max-width:560px){ .rg-replan-fields{ grid-template-columns: 1fr; } }
.rg-diff{ border-top:1px solid var(--border); padding-top:12px; }
.rg-diff-list{ margin:6px 0 0; padding-left:18px; font-size:13.5px; } .rg-diff-list li{ margin:4px 0; }

/* Home card + promo */
.rg-home-top{ display:grid; grid-template-columns: auto minmax(0,1fr) auto; gap:16px; align-items:center; }
.rg-home-days{ font-family: var(--font-display); font-size:38px; line-height:1; text-align:center; } .rg-home-days small{ display:block; font-family: var(--font-body); font-size:11.5px; color: var(--text-muted); margin-top:4px; }
.rg-home-meta{ font-size:12.5px; color: var(--text-muted); margin-top:6px; }
.rg-home-week h5{ margin:14px 0 4px; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color: var(--text-faint); }
.rg-home-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
@media (max-width:560px){ .rg-home-top{ grid-template-columns: auto 1fr; } .rg-home-top .rg-pill{ grid-column: 1 / -1; justify-self:start; } }

/* Calendar */
.cal-item.is-slot{ border-style:dashed; background: transparent; color: var(--text-muted); }
.cal-deadline{ font-size:10.5px; font-weight:700; padding:3px 6px; border-radius:6px; background: var(--health-average-soft); color: var(--health-average); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cal-deadline.is-overdue{ background: var(--health-poor-soft); color: var(--health-poor); }
.cal-goalchip{ display:inline-flex; align-items:center; gap:6px; font-size:12px; color: var(--text-muted); padding:5px 11px; border:1px solid var(--border); border-radius: var(--radius-pill); }
.cd-row-due{ font-size:11.5px; color: var(--health-average); margin-top:2px; } .cd-row-due.is-overdue{ color: var(--health-poor); }

/* Brainstorm — pick-don't-type (option cards, tap-to-answer, how-to) */
.bs-how{ border:1px dashed var(--border); border-radius: var(--radius-md); padding:12px 14px; margin-bottom:4px; }
.bs-how-title{ font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color: var(--text-faint); margin-bottom:6px; }
.bs-how-steps{ margin:0; padding-left:18px; font-size:13px; color: var(--text-muted); } .bs-how-steps li{ margin:3px 0; }
.bs-done{ display:inline-flex; align-items:center; gap:5px; font-size:12px; color: var(--health-good); background:none; border:0; padding:0; font-family:inherit; }
button.bs-see-saved{ cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.bs-reply-actions{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.bs-ideas.is-flash{ animation: bs-flash 1.4s ease-out 1; }
@keyframes bs-flash{ 0%{ box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 70%, transparent); border-color: var(--accent); } 100%{ box-shadow: 0 0 0 14px transparent; } }
@media (prefers-reduced-motion: reduce){ .bs-ideas.is-flash{ animation:none; border-color: var(--accent); } }
.bs-fork{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }

/* Event milestones section + Brainstorm real-world step cards */
.rg-ms > summary{ cursor:pointer; list-style:none; margin-bottom:0; } .rg-ms > summary::-webkit-details-marker{ display:none; }
.rg-ms[open] > summary{ margin-bottom:14px; }
.rg-ms-phase{ padding:8px 0 10px; border-top:1px solid var(--border-soft); }
.rg-ms-phase-head{ display:flex; align-items:baseline; gap:10px; font-size:13px; margin-bottom:4px; } .rg-ms-phase-head span{ font-size:12px; }
.rg-ms-row{ display:grid; grid-template-columns: minmax(0,1fr) auto 64px 30px; gap:10px; align-items:center; padding:5px 0; font-size:13px; }
.rg-ms-what{ color: var(--text-muted); font-variant-numeric: tabular-nums; white-space:nowrap; font-size:12px; } .rg-ms-due{ color: var(--text-faint); font-size:12px; text-align:right; }
.rg-ms-removed{ margin-top:10px; padding-top:12px; border-top:1px dashed var(--border); display:flex; flex-wrap:wrap; align-items:center; gap:6px; } .rg-ms-removed .rg-eyebrow{ width:100%; margin:0 0 2px; }
.rg-restore{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px; padding:4px 10px; border-radius:999px; border:1px dashed var(--border); background:none; color: var(--text-muted); cursor:pointer; font-family:inherit; }
.rg-restore:hover{ border-color: var(--accent); color: var(--accent); }
@media (max-width:560px){ .rg-ms-row{ grid-template-columns: minmax(0,1fr) 30px; } .rg-ms-what, .rg-ms-due{ display:none; } }
.bs-task{ border-color: color-mix(in srgb, var(--track-community) 55%, var(--border)); }
.bs-task-tag{ display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color: var(--track-community); margin-bottom:4px; }
.bs-task-target{ font-size:12px; color: var(--text-muted); margin-top:6px; }
.bs-task-phase{ height:32px; padding:0 10px; font-size:12px; min-width:0; max-width:100%; width:auto; }
.cd-ms-del{ color: var(--text-faint); } .cd-ms-del:hover{ color: var(--health-poor); }

/* ============================================================
   "Tanya Brandlab" (js/consultant-panel.js): one floating chat in front of
   three engines. Each reply wears a small engine label; the label (and the
   idea cards under it) borrow that engine's accent via --cp-accent.
   Anything FILLED with the accent (your bubbles, the send button, an idea's
   main button) uses --cp-fill/--cp-on-fill instead: white text on the
   bright green/blue/purple read at 2.3-4:1, so filled surfaces take a
   darker shade of the same hue (>=5:1 with white), and the app's own amber
   keeps its dark --accent-text. In light theme the bright hues used as TEXT
   (labels, tabs) also step down to their darker shade.
   ============================================================ */
.consultant-panel{ width:400px; height:min(660px, calc(100vh - 110px)); height:min(660px, calc(100dvh - 110px)); --cp-accent: var(--accent); --cp-fill: var(--accent); --cp-on-fill: var(--accent-text); --chat-consultant:#22c55e; --chat-brainstorm:#3b82f6; --chat-companion:#a855f7; --chat-consultant-fill:#15803d; --chat-brainstorm-fill:#2563eb; --chat-companion-fill:#9333ea; transition: border-color .25s; }
/* the open tab colours the whole panel: header icon, tab, user bubbles, send button */
.consultant-panel[data-mode="consultant"]{ --cp-accent: var(--chat-consultant); --cp-fill: var(--chat-consultant-fill); --cp-on-fill:#fff; border-color: color-mix(in srgb, var(--cp-accent) 55%, var(--border)); }
.consultant-panel[data-mode="brainstorm"]{ --cp-accent: var(--chat-brainstorm); --cp-fill: var(--chat-brainstorm-fill); --cp-on-fill:#fff; border-color: color-mix(in srgb, var(--cp-accent) 55%, var(--border)); }
.consultant-panel[data-mode="companion"]{ --cp-accent: var(--chat-companion); --cp-fill: var(--chat-companion-fill); --cp-on-fill:#fff; border-color: color-mix(in srgb, var(--cp-accent) 55%, var(--border)); }
.consultant-panel .consultant-panel-head{ background: color-mix(in srgb, var(--cp-accent) 10%, transparent); }
.consultant-panel .consultant-msg-user{ background: var(--cp-fill); color: var(--cp-on-fill); }
.consultant-panel .consultant-panel-input .icon-btn{ background: var(--cp-fill); color: var(--cp-on-fill); border-radius:50%; transition: background .25s; }
.cp-head{ gap:10px; }
.cp-head-main{ display:flex; align-items:center; gap:10px; min-width:0; }
.cp-head-main b{ display:block; font-size:14px; line-height:1.2; }
.cp-head-main small{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:11.5px; font-weight:500; color: var(--text-muted); line-height:1.35; margin-top:1px; }
.cp-head-icon{ flex:none; width:32px; height:32px; border-radius:10px; display:grid; place-items:center; background: color-mix(in srgb, var(--cp-accent) 18%, transparent); color: var(--cp-accent); }
/* the composer follows the chat's own accent */
.consultant-panel-input textarea:focus{ border-color: var(--cp-accent); }
/* one reply, one engine label */
.cp-engine{ display:inline-flex; align-items:center; gap:4px; font-size:10.5px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; color: var(--cp-accent); margin-bottom:4px; }
.cp-engine svg{ width:11px; height:11px; }
.consultant-msg[data-engine="consultant"]{ --cp-accent: var(--chat-consultant); --cp-fill: var(--chat-consultant-fill); --cp-on-fill:#fff; }
.consultant-msg[data-engine="brainstorm"]{ --cp-accent: var(--chat-brainstorm); --cp-fill: var(--chat-brainstorm-fill); --cp-on-fill:#fff; }
.consultant-msg[data-engine="companion"]{ --cp-accent: var(--chat-companion); --cp-fill: var(--chat-companion-fill); --cp-on-fill:#fff; }
/* "Ask this in another tab" — the model's handoff or the keyword hint, one tap */
.cp-switch{ margin-top:9px; padding-top:8px; border-top:1px dashed var(--border); display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:11px; font-weight:600; color: var(--text-muted); }
.cp-switch .consultant-starter{ display:inline-flex; align-items:center; gap:4px; padding:4px 9px; font-size:11.5px; }
.cp-switch .consultant-starter svg{ width:11px; height:11px; }
.consultant-msg.is-typing .cp-switch, .consultant-msg.is-typing .cp-idea, .consultant-msg.is-typing .cp-week{ display:none; }
/* idea cards (Brainstorm) and moment cards (Teman) */
.cp-idea{ margin-top:8px; padding:10px 12px; border:1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); white-space:normal; }
.cp-idea-title{ font-weight:800; font-size:13px; line-height:1.35; }
.cp-idea-why{ font-size:12px; color: var(--text-muted); margin-top:3px; line-height:1.45; }
.cp-idea-actions{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.cp-idea .btn-primary{ background: var(--cp-fill, var(--cp-accent)); border-color: var(--cp-fill, var(--cp-accent)); color: var(--cp-on-fill, #fff); }
/* a moment the Teman offers for brand memory */
.cp-moment{ border-color: color-mix(in srgb, var(--chat-companion) 45%, var(--border)); }
.cp-moment-tag{ display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color: var(--chat-companion); margin-bottom:4px; }
.cp-moment .cp-idea-title .tag{ margin-right:4px; vertical-align:1px; }
/* the row under the tabs in Konsultan / Teman: one line about the tab, or the way into brand memory */
.cp-info{ min-height:30px; }
.cp-info-text{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color: var(--text-faint); line-height:1.4; }
.cp-info-text svg{ flex:none; color: var(--cp-accent); }
.cp-memory-chip{ border:1px solid color-mix(in srgb, var(--cp-accent) 45%, var(--border)); color: var(--cp-accent); cursor:pointer; font-family:inherit; }
.cp-memory-chip:hover{ background: color-mix(in srgb, var(--cp-accent) 12%, var(--surface-2)); }
/* "Langsung kasih ide" under the composer */
.cp-foot{ flex:none; display:flex; justify-content:flex-end; padding:0 14px 10px; margin-top:-4px; }
@media (max-width: 640px){ .consultant-panel{ width:calc(100vw - 20px); right:10px; height:calc(100vh - 96px); height:calc(100dvh - 96px); bottom:76px; } }

/* Diskusi dengan AI (Creator) */
.disc-msgs{ display:flex; flex-direction:column; gap:10px; }
.disc-msgs .consultant-msg{ white-space:normal; max-width:94%; }
.disc-rev{ margin-top:10px; padding:10px 12px; border:1px solid var(--border); border-radius:12px; background: var(--surface); }
.disc-rev-text{ white-space:pre-wrap; font-size:12.5px; line-height:1.5; max-height:240px; overflow:auto; }
.disc-regen{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }

/* Creator: main AI action + Diskusi side by side */
.cr-ai-row{ display:flex; gap:8px; }
.cr-ai-row > .btn:first-child{ flex:1; min-width:0; }
.cr-ai-row > .btn:not(:first-child){ flex:none; }
.disc-chips{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
.disc-chips::-webkit-scrollbar{ display:none; }
.disc-chips .consultant-starter{ flex:none; white-space:nowrap; }
.disc-chips[hidden]{ display:none; }

/* Coretan: floating notes (js/notes-float.js) + the pad inside (js/scratch-pad.js) */
.notes-fab{ position:fixed; right:88px; bottom:30px; z-index:65; width:42px; height:42px; border-radius:12px; border:1px solid color-mix(in srgb, #f5c542 55%, var(--border)); background: color-mix(in srgb, #f5c542 22%, var(--bg-raised)); color: var(--text); display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow: var(--shadow-lg); transform: rotate(-4deg); transition: transform .15s ease; }
.notes-fab:hover{ transform: rotate(0) scale(1.05); }
.notes-fab.is-open{ transform:none; background: var(--surface-2); }
.notes-fab-count{ position:absolute; top:-6px; right:-6px; min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:#f5c542; color:#1a1a1a; font-size:10.5px; font-weight:800; line-height:18px; text-align:center; }
.notes-fab-count:empty{ display:none; }
.notes-float{ position:fixed; right:88px; bottom:84px; z-index:66; width:360px; max-width:calc(100vw - 24px); max-height:min(560px, calc(100vh - 160px)); max-height:min(560px, calc(100dvh - 160px)); display:flex; flex-direction:column; background: color-mix(in srgb, #f5c542 9%, var(--bg-raised)); border:1px solid color-mix(in srgb, #f5c542 45%, var(--border)); border-top:4px solid #f5c542; border-radius:14px; box-shadow: var(--shadow-lg); overflow:hidden; }
.notes-float[hidden]{ display:none; }
.notes-head{ display:flex; align-items:center; justify-content:space-between; padding:10px 12px 6px; }
.notes-title{ display:flex; align-items:center; gap:6px; font-weight:800; font-size:14px; }
.notes-close{ width:28px; height:28px; }
.notes-scope{ display:flex; gap:4px; margin:0 12px 6px; padding:3px; border-radius:10px; background: var(--surface-2); }
.notes-scope button{ flex:1; min-width:0; border:none; background:transparent; color: var(--text-muted); font:inherit; font-size:12px; font-weight:600; padding:5px 8px; border-radius:8px; cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.notes-scope button.is-active{ background: var(--surface); color: var(--text); }
.notes-body{ padding:0 12px 12px; overflow:auto; min-height:0; }
body.tour-active .notes-fab, body.tour-active .notes-float{ display:none; }
@media (max-width: 640px){
  .notes-fab{ right:68px; bottom:16px; width:40px; height:40px; }
  .notes-float{ right:10px; left:10px; width:auto; bottom:68px; max-height:calc(100vh - 144px); max-height:calc(100dvh - 144px); }
}
.scratch-hint{ font-size:11.5px; color: var(--text-faint); margin:0 0 10px; line-height:1.45; }
.scratch-add{ min-height:0; font-size:13px; margin-bottom:4px; }
.sn-hint{ margin:0 0 10px; font-size:11px; color: var(--text-faint); }
.scratch-foot{ display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:12px; padding-top:10px; border-top:1px solid var(--border-soft); position:sticky; bottom:-12px; background: color-mix(in srgb, #f5c542 9%, var(--bg-raised)); }
/* Sticky-note paper colours (light paper, dark ink in both themes) */
.sn-c-yellow{ --sn-paper:#fff3a8; --sn-edge:#f0d65a; }
.sn-c-pink{ --sn-paper:#ffd6e3; --sn-edge:#f4a3bd; }
.sn-c-green{ --sn-paper:#d4f5c9; --sn-edge:#9fdc8b; }
.sn-c-blue{ --sn-paper:#cfe7ff; --sn-edge:#93c5f5; }
.sn-c-orange{ --sn-paper:#ffdcb8; --sn-edge:#f5b474; }
.sn-c-purple{ --sn-paper:#e6d9ff; --sn-edge:#bda4f5; }
/* Folder list (phone-notes style) */
.sn-folders{ border:1px solid var(--border-soft); border-radius:12px; overflow:hidden; background: var(--surface); }
.sn-folder{ display:flex; align-items:center; border-top:1px solid var(--border-soft); }
.sn-folder:first-child{ border-top:none; }
.sn-folder-open{ flex:1; min-width:0; display:flex; align-items:center; gap:10px; padding:11px 12px; border:none; background:transparent; color: var(--text); font:inherit; font-size:13.5px; text-align:left; cursor:pointer; }
.sn-folder-open:hover{ background: var(--surface-hover); }
.sn-folder-icon{ width:26px; height:26px; flex:none; border-radius:7px; display:flex; align-items:center; justify-content:center; background: var(--sn-paper); color:#3b3200; box-shadow: inset 0 -2px 0 var(--sn-edge); }
.sn-folder-name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
.sn-folder-count{ font-size:12px; color: var(--text-faint); }
.sn-folder-open > svg:last-child{ color: var(--text-faint); flex:none; }
.sn-folder-menu{ flex:none; width:32px; height:40px; border:none; background:transparent; color: var(--text-faint); cursor:pointer; }
.sn-folder-menu:hover{ color: var(--text); }
.sn-new-folder{ display:flex; align-items:center; gap:6px; margin-top:10px; border:none; background:transparent; color: var(--accent); font:inherit; font-size:13px; font-weight:700; cursor:pointer; padding:4px 2px; }
/* Inside a folder */
.sn-bar{ display:flex; align-items:center; gap:8px; margin:0 0 10px; }
.sn-back{ display:flex; align-items:center; gap:2px; border:none; background:transparent; color: var(--accent); font:inherit; font-size:13px; font-weight:700; cursor:pointer; padding:2px 0; flex:none; }
.sn-bar-title{ flex:1; min-width:0; text-align:right; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sn-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px 10px; padding:4px 2px; }
.sn-note{ position:relative; display:flex; flex-direction:column; min-height:112px; padding:20px 10px 6px; background: var(--sn-paper); color:#2b2400; border-radius:2px 2px 14px 2px; box-shadow: 0 1px 1px rgba(0,0,0,.12), 0 6px 14px -6px rgba(0,0,0,.45); transform: rotate(-1.2deg); transition: transform .15s ease, box-shadow .15s; }
.sn-note:nth-child(even){ transform: rotate(1.1deg); }
.sn-note:nth-child(3n){ transform: rotate(-.4deg); }
.sn-note:hover{ transform: rotate(0) translateY(-2px); box-shadow: 0 2px 2px rgba(0,0,0,.12), 0 10px 18px -6px rgba(0,0,0,.5); z-index:1; }
.sn-note::before{ content:""; position:absolute; top:-7px; left:50%; width:44px; height:14px; transform: translateX(-50%) rotate(-2deg); background: color-mix(in srgb, #ffffff 55%, transparent); box-shadow: 0 1px 2px rgba(0,0,0,.12); border-radius:2px; }
.sn-note.is-picked{ outline:2px solid var(--accent); outline-offset:2px; }
.sn-check{ position:absolute; top:5px; right:6px; display:flex; cursor:pointer; }
.sn-check input{ width:15px; height:15px; margin:0; accent-color: var(--accent); cursor:pointer; }
.sn-text{ flex:1; font-size:12.5px; line-height:1.45; white-space:pre-wrap; word-break:break-word; cursor:text; }
.sn-text .scratch-editbox{ width:100%; min-height:70px; border:none; outline:none; resize:vertical; background: color-mix(in srgb, #ffffff 45%, transparent); color:#2b2400; font:inherit; border-radius:4px; padding:4px; }
.sn-meta{ display:flex; align-items:center; gap:4px; margin-top:6px; min-height:22px; }
.sn-tag{ font-size:10px; font-weight:700; color: color-mix(in srgb, #2b2400 70%, transparent); background: color-mix(in srgb, #ffffff 45%, transparent); border-radius:999px; padding:1px 6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:90px; }
.sn-act{ width:22px; height:22px; flex:none; border:none; background:transparent; color: color-mix(in srgb, #2b2400 55%, transparent); border-radius:6px; cursor:pointer; display:flex; align-items:center; justify-content:center; opacity:0; transition: opacity .12s; }
.sn-note:hover .sn-act, .sn-act:focus-visible{ opacity:1; }
.sn-act:hover{ background: color-mix(in srgb, #000 8%, transparent); color:#2b2400; }
@media (hover: none){ .sn-act{ opacity:1; } }
.menu.sn-menu{ z-index:70; }
.sn-menu-label{ font-size:11px; color: var(--text-faint); padding:4px 10px; }
.sn-colors{ display:flex; gap:6px; padding:6px 10px; }
.sn-swatch{ width:20px !important; height:20px; padding:0 !important; border-radius:50% !important; background: var(--sn-paper) !important; border:2px solid var(--sn-edge) !important; }
.sn-swatch.is-on{ outline:2px solid var(--accent); outline-offset:1px; }

/* Brainstorm: Ide tersimpan — click to expand into a focused view */
.bs-ideas-toggle{ display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; border:none; background:transparent; color:inherit; font:inherit; padding:0; cursor:pointer; text-align:left; }
.bs-ideas-expand{ color: var(--text-faint); display:flex; }
.bs-ideas-toggle:hover .bs-ideas-expand{ color: var(--text); }
.bs-saved-text[data-bs-saved-open]{ cursor:pointer; }
.bs-saved-text[data-bs-saved-open]:hover b{ text-decoration: underline; text-underline-offset:2px; }
.bs-ideas-backdrop{ position:fixed; inset:0; z-index:67; background: rgba(6,5,4,.55); backdrop-filter: blur(3px); }
.bs-ideas.is-focus{ position:fixed; top:6vh; left:50%; transform:translateX(-50%); width:min(920px, 94vw); max-height:88vh; overflow:auto; z-index:68; padding:22px; animation: bs-focus-in .18s ease-out; }
.bs-ideas.is-focus .bs-ideas-head h2{ font-size:18px; }
.bs-ideas.is-focus .bs-saved-list{ display:grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap:12px; margin-top:14px; }
.bs-ideas.is-focus .bs-saved-idea{ border:1px solid var(--border); border-radius:12px; padding:12px; margin:0; display:flex; flex-direction:column; gap:6px; background: var(--surface); }
.bs-ideas.is-focus .bs-saved-idea .bs-card-actions{ margin-top:auto; }
.bs-ideas.is-focus .bs-saved-text{ font-size:13.5px; }
.bs-saved-notes{ font-size:12.5px; white-space:pre-wrap; color: var(--text-muted); line-height:1.5; }
.bs-saved-hooks{ margin:0; padding-left:18px; font-size:12.5px; line-height:1.5; }
@keyframes bs-focus-in{ from{ opacity:0; transform: translateX(-50%) scale(.97); } to{ opacity:1; transform: translateX(-50%) scale(1); } }
@media (prefers-reduced-motion: reduce){ .bs-ideas.is-focus{ animation:none; } }

/* Tanya Brandlab (js/consultant-panel.js): header actions */
.cp-head-actions{ display:flex; align-items:center; gap:4px; flex:none; }
/* What the conversation is about (campaign / series / goal / content) */
.cp-scope{ flex:none; display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:8px 14px 0; font-size:12px; }
.cp-scope .bs-scope-chip{ font-size:11.5px; padding:4px 10px; max-width:100%; }
.cp-scope .bs-scope-chip svg{ flex:none; }
.cp-scope .link{ border:0; background:none; padding:0; font:inherit; font-size:12px; font-weight:700; color: var(--cp-accent); cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.cp-notice a{ color: var(--cp-accent); font-weight:700; display:inline-flex; align-items:center; gap:3px; }
.cp-quota{ flex:none; margin:0; padding:8px 14px 0; font-size:12px; }
.cp-quota .cp-topup{ border:0; background:none; padding:0; font:inherit; font-weight:700; color: var(--accent); cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
/* "AI credit habis" dialog (js/ai-topup.js) — the packages reuse the
   pricing page's add-on cards. */
.ai-topup-packs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px; }
.ai-topup-pack em{ display:inline-flex; align-items:center; gap:5px; }
/* Offer card (js/purchase.js offerOptionHTML): AI credits, brand slots. */
.offer-card{ display:flex; flex-direction:column; gap:12px; }
.offer-group{ display:flex; flex-direction:column; gap:8px; }
.offer-opt{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; padding:13px 14px; border:1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); color:inherit; font:inherit; text-align:left; text-decoration:none; cursor:pointer; transition: border-color .15s, transform .15s; }
.offer-opt:hover{ border-color: var(--accent); transform: translateY(-1px); }
.offer-opt.is-featured{ border:1.5px solid var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); padding-top:18px; }
.offer-opt-main{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.offer-opt-main b{ font-size:14px; }
.offer-opt-main small, .offer-opt-price small{ font-size:11.5px; color: var(--text-muted); }
.offer-opt-price{ display:flex; flex-direction:column; align-items:flex-end; flex:none; }
.offer-opt-price strong{ font-family: var(--font-display); font-size:17px; white-space:nowrap; }
.offer-badge{ position:absolute; top:-9px; left:12px; padding:2px 8px; border-radius:999px; background: var(--accent); color: var(--accent-text); font-size:10.5px; font-weight:700; letter-spacing:.02em; }
.offer-opt:has(.offer-badge){ padding-top:18px; }
.offer-opt:not(.is-featured) .offer-badge{ background: color-mix(in srgb, var(--accent) 22%, var(--bg-raised)); color: var(--accent); }
.offer-note{ display:flex; align-items:flex-start; gap:6px; margin:2px 2px 0; font-size:12px; line-height:1.45; color: var(--text-muted); }
.offer-note svg{ flex:none; margin-top:2px; }
.offer-divider{ display:flex; align-items:center; gap:10px; font-size:11.5px; color: var(--text-faint); text-transform:uppercase; letter-spacing:.06em; }
.offer-divider::before, .offer-divider::after{ content:""; flex:1; border-top:1px dashed var(--border); }
.offer-balance{ display:flex; align-items:center; gap:6px; margin:0; padding:8px 10px; border-radius: var(--radius-sm); background: var(--surface-2); font-size:12.5px; color: var(--text-muted); }
.brand-tile-add.is-locked .brand-tile-avatar-add, .brand-quick-add.is-locked{ border-style:solid; color: var(--text-faint); }
.brand-tile-add.is-locked .meta{ font-size:11.5px; color: var(--text-faint); }
.pricing-addon.is-unavailable{ cursor:default; opacity:.7; }
.auto-renew{ margin-top:12px; padding:10px 12px; border:1px dashed var(--border); border-radius: var(--radius-md); }
.auto-renew-title{ display:flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color: var(--text-muted); margin-bottom:6px; }
.auto-renew-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 0; font-size:13px; }
.auto-renew-row span{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.auto-renew-row small{ font-size:11.5px; color: var(--text-faint); }
/* A brand gone preview-only after its monthly slot lapsed (js/brand-locked.js). */
.brand-tile.is-preview .brand-tile-avatar{ position:relative; }
.brand-tile.is-preview .brand-tile-avatar > :first-child{ filter:grayscale(.85); opacity:.55; }
.brand-tile-lock{ position:absolute; right:-6px; bottom:-6px; display:flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; background: var(--bg-raised); border:1px solid var(--border); color: var(--text); box-shadow: var(--shadow-sm, 0 2px 6px rgba(0,0,0,.25)); }
.brand-slot-reminder{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 16px; padding:10px 14px; border:1px solid color-mix(in srgb, var(--accent) 45%, var(--border)); border-radius: var(--radius-md); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); font-size:13px; }
.brand-slot-reminder span{ flex:1; min-width:200px; }
.brand-locked{ max-width:820px; margin:0 auto; padding:28px 20px 60px; display:flex; flex-direction:column; gap:16px; }
.brand-locked-back{ display:inline-flex; align-items:center; gap:4px; font-size:13px; font-weight:700; color: var(--text-muted); text-decoration:none; }
.brand-locked-hero{ display:flex; align-items:flex-start; gap:16px; flex-wrap:wrap; padding:22px; }
.brand-locked-text{ flex:1; min-width:240px; }
.brand-locked-text h1{ margin:6px 0 6px; font-size:26px; }
.brand-locked-text p{ margin:0; color: var(--text-muted); font-size:13.5px; line-height:1.55; }
.brand-locked-pill{ display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); font-size:11.5px; font-weight:700; }
.brand-locked-actions{ display:flex; flex-direction:column; gap:8px; }
.brand-locked-list{ padding:18px 22px; }
.brand-locked-list h3{ margin:0 0 10px; font-size:15px; }
.brand-locked-row{ display:grid; grid-template-columns: 110px minmax(0,1fr) auto; align-items:center; gap:12px; padding:9px 0; border-top:1px solid var(--border-soft, var(--border)); font-size:13px; }
.brand-locked-date{ color: var(--text-faint); font-size:12px; }
.brand-locked-title{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:640px){ .brand-locked-row{ grid-template-columns: minmax(0,1fr) auto; } .brand-locked-date{ grid-column:1 / -1; } }
.pricing-addon.is-unavailable:hover{ border-color: var(--border); }
/* Conversation list rows (Brainstorm page): a delete button
   that shows on hover / keyboard focus, always on touch screens */
.bs-thread-row{ position:relative; display:flex; min-width:0; }
.bs-thread-row .bs-thread-item{ padding-right:32px; }
.bs-thread-meta{ flex-wrap:wrap; row-gap:3px; }
.bs-thread-meta .tag{ white-space:nowrap; }
.bs-thread-del{ position:absolute; top:7px; right:6px; opacity:0; color: var(--text-muted); transition: opacity .15s, color .15s, background .15s; }
.bs-thread-row:hover .bs-thread-del, .bs-thread-row:focus-within .bs-thread-del{ opacity:1; }
.bs-thread-del:hover{ color: var(--health-poor); background: var(--surface-2); }
@media (pointer: coarse){ .bs-thread-del{ opacity:1; } }
.consultant-panel-input textarea{ overflow-y:hidden; }
.consultant-panel-input .cp-mic{ width:32px; height:32px; margin-bottom:2px; color: var(--text-muted); }
.consultant-panel-input .cp-mic:hover{ background: var(--surface-2); color: var(--text); }
.consultant-panel-input .cp-mic:disabled{ opacity:.4; cursor:default; }
.cp-msg-tools{ display:flex; align-items:center; gap:6px; margin-top:6px; }
.cp-copy{ display:inline-flex; align-items:center; gap:4px; border:0; background:transparent; color: var(--text-faint); font: inherit; font-size:11px; font-weight:700; cursor:pointer; padding:2px 6px; margin-left:-6px; border-radius:6px; }
.cp-copy:hover{ color: var(--text); background: var(--surface); }
.cp-copy.is-done{ color: var(--cp-accent); }
.cp-copy svg{ width:12px; height:12px; }
.consultant-msg.is-typing .cp-msg-tools{ display:none; }
@media (max-width: 640px){
  .cp-msg-tools .cp-copy{ padding:4px 8px; }
}

/* ---- Tanya Brandlab at page size — the Brainstorm page ------------------
   Same chat as the floating panel (js/consultant-panel.js), laid out in the
   Brainstorm grid: conversations | chat | saved ideas. */
body.chat-page-open .consultant-fab, body.chat-page-open .consultant-fab-hint{ display:none; }
.cp-page-chat{ --cp-accent: var(--accent); --cp-fill: var(--accent); --cp-on-fill: var(--accent-text); --chat-consultant:#22c55e; --chat-brainstorm:#3b82f6; --chat-companion:#a855f7; --chat-consultant-fill:#15803d; --chat-brainstorm-fill:#2563eb; --chat-companion-fill:#9333ea; display:flex; flex-direction:column; min-width:0; margin:0; padding:0; height:calc(100vh - 250px); height:calc(100dvh - 250px); min-height:520px; overflow:hidden; }
.cp-page-chat[data-mode="consultant"]{ --cp-accent: var(--chat-consultant); --cp-fill: var(--chat-consultant-fill); --cp-on-fill:#fff; }
.cp-page-chat[data-mode="brainstorm"]{ --cp-accent: var(--chat-brainstorm); --cp-fill: var(--chat-brainstorm-fill); --cp-on-fill:#fff; }
.cp-page-chat[data-mode="companion"]{ --cp-accent: var(--chat-companion); --cp-fill: var(--chat-companion-fill); --cp-on-fill:#fff; }
.cp-page-chat .consultant-msg-user{ background: var(--cp-fill); color: var(--cp-on-fill); }
/* the page grid follows the tab: Brainstorm = rail | chat | ideas, Teman = chat | memory, Konsultan = chat */
.cp-page[data-mode="consultant"]{ grid-template-columns: minmax(0,1fr); }
.cp-page[data-mode="companion"]{ grid-template-columns: minmax(0,1fr) 270px; }
.cp-memory .companion-moment-row{ align-items:flex-start; }
.cp-memory .companion-moment-row .tag{ margin-top:1px; }
.cp-memory .bs-card-actions{ margin-top:12px; }
.cp-page-chat .consultant-panel-input .icon-btn{ background: var(--cp-fill); color: var(--cp-on-fill); border-radius:50%; transition: background .25s; }
.cp-page-chat .consultant-panel-input textarea:focus{ border-color: var(--cp-accent); }
.cp-page-chat .cp-scope{ padding:10px 18px 10px; border-bottom:1px solid var(--border); }
.cp-page-chat .consultant-panel-body{ padding:16px 18px; }
.cp-page-chat .consultant-panel-input{ padding:12px 18px; }
.cp-page-chat .cp-foot{ padding:0 18px 12px; }
.cp-page-chat .consultant-msg{ font-size:14px; line-height:1.6; max-width:82%; }
.cp-scope-spacer{ flex:1; }
.cp-saved-jump{ display:none; }
.cp-foot{ align-items:center; gap:10px; }
.cp-foot-hint{ font-size:11px; color: var(--text-faint); margin-right:auto; }
/* Answers are HTML (markdown, cards): pre-wrap turned the template's own
   line breaks into blank gaps between them. User text keeps pre-wrap. */
.consultant-msg-assistant{ white-space:normal; }
@media (max-width:760px){
  .cp-page-chat{ height:calc(100vh - 150px); height:calc(100dvh - 150px); min-height:460px; }
  .cp-page-chat .cp-scope, .cp-page-chat .consultant-panel-body, .cp-page-chat .consultant-panel-input{ padding-left:12px; padding-right:12px; }
  .cp-page-chat .cp-foot{ padding:0 12px 10px; }
  .cp-page-chat .consultant-msg{ max-width:94%; }
  .cp-saved-jump{ display:inline-flex; }
}

/* ---- Pengumuman (js/views/announcements.js) + the topbar "Update" button ---- */
.updates-btn{ position:relative; width:auto; gap:6px; padding:0 10px; text-decoration:none; }
.updates-btn .updates-label{ font-size:12.5px; font-weight:700; }
.updates-btn.is-active{ background: var(--surface-2); color: var(--text); }
.updates-btn .updates-badge[hidden]{ display:none; }
@media (max-width:760px){ .updates-btn{ padding:0; width:36px; } .updates-btn .updates-label{ display:none; } }
.ann-wrap{ max-width:760px; display:flex; flex-direction:column; gap:16px; }
.ann-list{ display:flex; flex-direction:column; gap:12px; }
.ann-composer{ display:flex; flex-direction:column; gap:12px; border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.ann-composer .field{ margin:0; }
.ann-composer .field-hint{ font-size:11.5px; color: var(--text-faint); margin:4px 0 0; }
.ann-composer-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.ann-kinds{ display:flex; flex-wrap:wrap; gap:8px; }
.ann-kind input{ position:absolute; opacity:0; pointer-events:none; }
.ann-kind span{ display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; border:1px solid var(--border); background: var(--surface-2); font-size:12.5px; font-weight:700; color: var(--text-muted); cursor:pointer; }
.ann-kind input:checked + span{ border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.ann-kind input:focus-visible + span{ outline:2px solid var(--accent); outline-offset:2px; }
.ann-composer-actions{ display:flex; justify-content:flex-end; gap:8px; }
.ann-item{ display:flex; flex-direction:column; gap:8px; }
.ann-item.is-new{ border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
.ann-meta{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; font-size:12px; }
.ann-kind-tag{ display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px; font-size:11px; font-weight:800; letter-spacing:.02em; background: var(--surface-2); color: var(--text-muted); }
.ann-kind-feature{ background: var(--accent-soft); color: var(--accent); }
.ann-kind-fix{ background: color-mix(in srgb, var(--health-good) 16%, transparent); color: var(--health-good); }
.ann-new{ font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:#fff; background: var(--accent); padding:2px 7px; border-radius:999px; }
.ann-admin-actions{ margin-left:auto; display:inline-flex; gap:4px; }
.ann-title{ font-size:17px; margin:0; line-height:1.35; }
.ann-body{ font-size:14px; line-height:1.6; color: var(--text); }
.ann-link{ align-self:flex-start; }
.ann-empty{ display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; color: var(--text-muted); font-size:13.5px; padding:28px 18px; }
.ann-empty p{ margin:0; }
/* Creator's AI writer: what it reads from brand memory, with the way to see it */
.cr-ai-memory{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.cr-ai-memory svg{ flex:none; color: var(--chat-companion, #a855f7); }
.cr-ai-memory-open{ border:0; background:none; padding:0; font:inherit; font-size:12px; font-weight:700; color: var(--accent); cursor:pointer; text-decoration:underline; text-underline-offset:3px; }

/* Tanya Brandlab — Otomatis: the small panel's quick row (Obrolan /
   Tersimpan / Memori), the page's right column (saved ideas + brand memory
   stacked), the AI's "keep this idea?" card and its guide line. */
/* The one-row toolbar above the chat (js/consultant-panel.js toolbarHTML):
   [mode ▾] [Tersimpan ▾] … [+]. Its menus open above the floating panel
   (z-index 65), hence .cp-menu's 70. */
.cp-toolbar{ flex:none; display:flex; align-items:center; gap:6px; padding:8px 12px 0; min-width:0; }
.cp-toolbar-spacer{ flex:1; }
.cp-tool{ flex:none; display:inline-flex; align-items:center; gap:5px; height:30px; padding:0 11px; border-radius:999px; border:1px solid var(--border); background: var(--surface-2); color: var(--text-muted); font:inherit; font-size:12px; font-weight:700; cursor:pointer; --t: var(--accent); transition: color .15s, border-color .15s, background .15s; }
.cp-tool svg{ width:13px; height:13px; flex:none; }
.cp-tool:hover:not(:disabled){ color: var(--text); border-color: var(--t); }
.cp-tool:disabled{ opacity:.5; cursor:default; }
.cp-tool:focus-visible{ outline:2px solid var(--t); outline-offset:1px; }
.cp-tool-mode{ background: color-mix(in srgb, var(--t) 14%, transparent); border-color: var(--t); color: var(--t); }
.cp-tool-mode:hover:not(:disabled){ color: var(--t); }
.cp-tool[data-engine="consultant"]{ --t: var(--chat-consultant); } .cp-tool[data-engine="brainstorm"]{ --t: var(--chat-brainstorm); } .cp-tool[data-engine="companion"]{ --t: var(--chat-companion); }
.cp-tool-count{ min-width:18px; height:18px; padding:0 5px; border-radius:999px; background: var(--surface); border:1px solid var(--border); font-size:10.5px; line-height:16px; text-align:center; color: var(--text); }
.cp-tool-icon{ width:30px; padding:0; justify-content:center; }
.cp-tool-icon svg{ width:15px; height:15px; }
.cp-tool-back{ display:inline-flex; align-items:center; gap:3px; border:0; background:none; padding:0; font:inherit; font-size:12px; font-weight:700; color: var(--cp-accent); cursor:pointer; }
.cp-page-chat .cp-toolbar{ padding:14px 18px 0; }
@media (max-width:760px){ .cp-page-chat .cp-toolbar{ padding:10px 12px 2px; } }
.cp-toolbar .cp-back-here{ display:inline-flex; align-items:center; gap:4px; font-size:11.5px; font-weight:700; color: var(--text-muted); }
.menu.cp-menu{ z-index:70; max-width:min(300px, calc(100vw - 24px)); --chat-consultant:#22c55e; --chat-brainstorm:#3b82f6; --chat-companion:#a855f7; }
/* Light theme: the engine hues used as text on near-white (labels, tabs,
   menu icons) were 2.2-3.7:1 — their darker shades read at 5-7:1. */
:root[data-theme="light"] .consultant-panel, :root[data-theme="light"] .cp-page-chat, :root[data-theme="light"] .menu.cp-menu{ --chat-consultant:#15803d; --chat-brainstorm:#1d4ed8; --chat-companion:#7e22ce; }
.cp-menu .cp-menu-mode{ align-items:flex-start; --t: var(--accent); }
.cp-menu .cp-menu-mode[data-engine="consultant"]{ --t: var(--chat-consultant); } .cp-menu .cp-menu-mode[data-engine="brainstorm"]{ --t: var(--chat-brainstorm); } .cp-menu .cp-menu-mode[data-engine="companion"]{ --t: var(--chat-companion); }
.cp-menu .cp-menu-mode > svg:first-child{ color: var(--t); margin-top:2px; }
.cp-menu .cp-menu-mode > svg:last-child{ margin-left:auto; margin-top:3px; color: var(--t); }
.cp-menu .cp-menu-mode.is-active{ background: color-mix(in srgb, var(--t) 12%, transparent); }
.cp-menu-mode-text{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.cp-menu-mode-text b{ font-size:13px; }
.cp-menu-mode-text small{ font-size:11.5px; line-height:1.4; color: var(--text-muted); white-space:normal; }
.cp-menu button > svg:last-child:not(:first-child){ margin-left:auto; }
.cp-page[data-mode="auto"]{ grid-template-columns: 230px minmax(0,1fr) 270px; }
.cp-side{ position:sticky; top:84px; display:flex; flex-direction:column; gap:16px; min-width:0; }
.cp-side .bs-ideas{ position:static; }
.cp-side .bs-saved-list{ max-height:38vh; overflow-y:auto; }
.cp-offer{ border-color: color-mix(in srgb, var(--chat-brainstorm, #3b82f6) 45%, var(--border)); }
.cp-offer-tag{ color: var(--chat-brainstorm, #3b82f6); }
.cp-guide{ display:flex; align-items:flex-start; gap:6px; margin:10px 0 0; font-size:12px; line-height:1.45; color: var(--text-muted); }
.cp-guide svg{ flex:none; margin-top:2px; color: var(--cp-accent); }
@media (max-width:1100px){
  .cp-page[data-mode="auto"]{ grid-template-columns: minmax(0,1fr) 260px; }
}
@media (max-width:760px){
  .cp-page[data-mode="auto"]{ grid-template-columns: minmax(0,1fr); }
  .cp-side{ position:static; }
}

/* A calm reply: one place to go, two follow-ups at most, and the small
   stuff (copy, 👍/👎, "Bukan ini maksudku") on one faint line. */
.cp-switch[hidden]{ display:none; }
.cp-asks{ margin-top:8px; padding-top:0; border-top:0; }
.cp-asks .consultant-starter{ font-size:12px; padding:5px 11px; }
.cp-msg-tools{ flex-wrap:wrap; gap:4px 10px; }
.cp-msg-tools .ai-feedback{ margin:0; padding:0; border:0; display:inline-flex; align-items:center; gap:2px; }
.cp-msg-tools .ai-feedback-q{ display:none; }
.cp-msg-tools .ai-feedback-btn{ font-size:12px; padding:2px 4px; opacity:.6; }
.cp-msg-tools .ai-feedback-btn:hover{ opacity:1; }
.cp-retry-toggle{ margin-left:auto; }

/* Where sales came from: the tag in the sales log, the line on a campaign
   and in the content editor. */
.st-source-tag{ display:inline-flex; align-items:center; gap:3px; max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:middle; }
.st-source-tag svg{ flex:none; }
.st-source-line{ display:flex; align-items:center; gap:8px; margin:-8px 0 18px; padding:9px 12px; border-radius: var(--radius-md); background: color-mix(in srgb, var(--health-good, #22c55e) 10%, var(--surface-2)); border:1px solid color-mix(in srgb, var(--health-good, #22c55e) 35%, var(--border)); font-size:12.5px; }
.st-source-line svg{ flex:none; color: var(--health-good, #22c55e); }

/* "Diperbarui otomatis karena: …" above advice the app refreshed itself */
.ai-auto-note{ display:flex; align-items:flex-start; gap:6px; margin:0 0 8px; padding:7px 10px; border-radius: var(--radius-md); background: color-mix(in srgb, var(--accent) 10%, var(--surface-2)); font-size:12px; line-height:1.45; color: var(--text-muted); }
.ai-auto-note svg{ flex:none; margin-top:2px; color: var(--accent); }
/* Campaign "Buat rencana konten": the review list */
.cp-plan-list{ display:flex; flex-direction:column; gap:2px; max-height:52vh; overflow-y:auto; }
.cp-plan-row{ display:grid; grid-template-columns: auto 62px minmax(0,1fr); gap:10px; align-items:flex-start; padding:9px 4px; border-top:1px solid var(--border-soft, var(--border)); cursor:pointer; }
.cp-plan-row:first-child{ border-top:0; }
.cp-plan-row input{ margin-top:3px; accent-color: var(--accent); }
.cp-plan-row.is-dup{ opacity:.55; cursor:default; }
.cp-plan-date{ font-size:12px; font-weight:700; color: var(--text-muted); padding-top:2px; }
.cp-plan-body{ display:flex; flex-direction:column; gap:3px; min-width:0; font-size:13px; line-height:1.4; }
.cp-plan-body .text-muted{ font-size:12px; }
.cp-plan-tags{ display:flex; flex-wrap:wrap; gap:4px; }
.cp-plan-tags .tag{ font-size:10.5px; }

/* "Rencanakan minggu ini" (js/consultant-panel.js weekPlanCardHTML) — a
   dated, checkboxed plan inside a chat bubble. Reuses .cp-plan-body/-tags
   above for the row's text; needs its own row grid (a date input and a
   campaign picker don't fit .cp-plan-row's column widths) and a wider
   bubble than the usual 85%, since a date + campaign select need real room
   even in the small floating panel (360px). */
.consultant-msg:has(.cp-week){ max-width:100%; }
.cp-week{ margin-top:8px; padding:10px 12px; border:1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.cp-week .cp-plan-body{ overflow-wrap: anywhere; }
.cp-week-row{ display:grid; grid-template-columns: auto auto minmax(0,1fr) auto; gap:10px; align-items:flex-start; padding:9px 0; border-top:1px solid var(--border-soft, var(--border)); }
.cp-week-row:first-child{ border-top:0; }
.cp-week-row input[type="checkbox"]{ margin-top:5px; accent-color: var(--accent); }
.cp-week-row.is-done{ opacity:.7; }
.cp-week-date{ width:130px; font-size:12px; padding:5px 7px; }
.cp-week-title-row{ display:flex; align-items:baseline; gap:6px; }
.cp-week-item-regen{ flex:none; display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; padding:0; border:none; background:none; color: var(--text-faint, var(--text-muted)); cursor:pointer; border-radius: var(--radius-sm); }
.cp-week-item-regen:hover{ color: var(--accent); background: var(--surface-hover); }
.cp-week-select{ font-size:11px; padding:3px 7px; max-width:160px; }
.cp-week-series{ display:inline-flex; align-items:center; gap:3px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.cad-series-rows{ display:flex; flex-direction:column; gap:6px; }
.cad-series-row{ display:grid; grid-template-columns: 80px minmax(0,1fr); align-items:center; gap:10px; font-size:13px; font-weight:600; }
.cad-series-row .input{ font-size:13px; padding:6px 8px; }
.series-airs{ display:inline-flex; align-items:center; gap:5px; margin:0 0 8px; padding:0; border:0; background:none; font:inherit; font-size:12px; color: var(--text-faint); cursor:pointer; }
.series-airs.is-set{ color: var(--accent); font-weight:600; }
.series-airs:hover{ color: var(--accent); }
.cp-week-foot{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:10px; padding-top:10px; border-top:1px dashed var(--border-soft, var(--border)); }
.cp-week-foot .cp-week-count{ width:auto; font-size:12px; padding:5px 8px; }
.cp-week-status{ margin:10px 0 0; font-size:12.5px; color: var(--text-muted); display:flex; align-items:center; gap:6px; }
.cp-week-summary{ margin-top:8px; padding:8px 10px; border:1px dashed var(--border-soft, var(--border)); border-radius: var(--radius-md); font-size:12px; display:flex; align-items:center; gap:6px; }
@media (max-width:520px){
  .cp-week-row{ grid-template-columns: auto auto minmax(0,1fr); }
  .cp-week-row .btn{ grid-column: 1 / -1; margin-left:26px; }
}

/* "Dibuat berdasarkan: …" under generated content (js/brand-learning.js) */
.ai-basis{ margin:0 0 12px; padding:8px 11px; border-radius: var(--radius-md); background: color-mix(in srgb, var(--accent) 9%, var(--surface-2)); border:1px dashed color-mix(in srgb, var(--accent) 35%, var(--border)); font-size:12px; line-height:1.5; color: var(--text-muted); }
.ai-basis b{ color: var(--text); margin-right:2px; }
/* Level evaluation: the brand's own numbers under a fix */
.goal-eval-data{ display:flex; align-items:flex-start; gap:5px; margin-top:4px; font-size:12px; color: var(--accent); }
.goal-eval-data svg{ flex:none; margin-top:2px; }
/* Konten page: Brand DNA not done yet */
.dna-hint{ display:flex; align-items:center; gap:8px; margin:-8px 0 16px; padding:8px 12px; border-radius: var(--radius-md); background: var(--surface-2); border:1px solid var(--border); font-size:12.5px; color: var(--text-muted); text-decoration:none; }
.dna-hint svg{ flex:none; color: var(--accent); }
.dna-hint span{ flex:1; min-width:0; }
.dna-hint b{ flex:none; display:inline-flex; align-items:center; gap:3px; color: var(--accent); }
.dna-hint:hover{ border-color: var(--accent); }

/* Home head: the report button beside the avatar */
.home-head-side{ display:flex; align-items:center; gap:14px; flex:none; }
/* Weekly report reminder (Home) */
.report-remind{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:-8px 0 24px; }
.report-remind-icon{ flex:none; width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.report-remind-text{ flex:1; min-width:180px; display:flex; flex-direction:column; gap:2px; }
.report-remind-text b{ font-size:13.5px; }
.report-remind-text small{ font-size:12px; color: var(--text-muted); }
/* Report sheet: extra blocks, and the off-screen A4 pages for the PDF */
.rp-range{ flex-wrap:wrap; }
.report-list{ margin:0 0 6px; padding-left:18px; font-size:12.5px; line-height:1.55; color:#33302c; }
.report-list li{ margin:3px 0; }
.report-note{ font-size:12px; color:#33302c; margin:8px 0 0; }
.report-stat small.rep-up{ color:#15803d; font-size:13px; }
.report-stat small.rep-down{ color:#b91c1c; font-size:13px; }
.rp-block{ break-inside:avoid; }
.rp-pdf-host{ position:fixed; left:-10000px; top:0; width:794px; pointer-events:none; }
.rp-pdf-host .rp-page{ width:794px; height:1123px; max-width:none; border-radius:0; box-shadow:none; padding:48px 52px; overflow:hidden; box-sizing:border-box; }
/* Aturan tulisan: the one-line summary + the modal's tags */
.wr-row{ display:flex; align-items:center; gap:8px; width:100%; margin:0 0 14px; padding:9px 12px; border-radius: var(--radius-md); border:1px dashed var(--border); background: var(--surface-2); color: var(--text-muted); font:inherit; font-size:12.5px; text-align:left; cursor:pointer; }
.wr-row:hover{ border-color: var(--accent); color: var(--text); }
.wr-row svg{ flex:none; color: var(--accent); }
.wr-row span{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wr-row b{ flex:none; color: var(--accent); }
.wr-call-chips{ flex-wrap:wrap; margin-top:8px; }
.wr-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.wr-tag{ display:inline-flex; align-items:center; gap:4px; padding:4px 6px 4px 10px; border-radius:999px; background: color-mix(in srgb, var(--accent) 14%, var(--surface-2)); font-size:12.5px; font-weight:600; }
.wr-tag button{ border:0; background:none; color: var(--text-muted); cursor:pointer; display:grid; place-items:center; padding:2px; border-radius:50%; }
.wr-tag button:hover{ color: var(--health-poor); }
.wr-tag-add{ display:flex; gap:8px; }
.wr-tag-add .input{ flex:1; min-width:0; }
.wr-suggest{ display:flex; flex-wrap:wrap; gap:6px; }
.wr-suggest .consultant-starter{ display:inline-flex; align-items:center; gap:4px; }
.wr-suggest .consultant-starter.is-added{ opacity:.45; }

/* ============================================================
   Brand report, redesigned (js/views/report.js): a printed-report look —
   dark cover band with the Wepeka Brandlab mark, big numbers with change
   vs the period before, numbered sections, bars, branded footer. Colours
   are fixed (it's a white sheet in both themes); the brand accent comes in
   inline. Same markup for the preview and the A4 PDF pages.
   ============================================================ */
.report-sheet.rp2{ padding:0 0 4px; overflow:hidden; color:#1c1a17; border-radius:12px; font-family: var(--font-body); }
.rp2 .rp-block{ break-inside:avoid; }
.rp2-pad{ padding:14px 36px 2px; }
.rp2 .rp-block.is-page-top .rp2-pad{ padding-top:30px; }
/* cover */
.rp2-hero{ position:relative; overflow:hidden; background:#12110f; color:#fff; padding:24px 36px 22px; }
.rp2-hero-glow{ position:absolute; right:-120px; top:-140px; width:420px; height:420px; border-radius:50%; background: radial-gradient(circle, rgba(255,165,43,.42), rgba(255,165,43,0) 65%); }
.rp2-hero-top{ position:relative; display:flex; align-items:center; gap:10px; }
.rp2-logo{ height:20px; width:auto; display:block; }
.rp2-divider{ width:1px; height:16px; background: rgba(255,255,255,.28); }
.rp2-product{ font-weight:800; font-size:14px; letter-spacing:.01em; }
.rp2-hero-kind{ margin-left:auto; font-size:10.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#ffa52b; border:1px solid rgba(255,165,43,.5); padding:4px 10px; border-radius:999px; }
.rp2-hero-main{ position:relative; display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-top:26px; }
.rp2-eyebrow{ font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color: rgba(255,255,255,.55); }
.rp2-brand{ font-family: var(--font-display); font-size:34px; line-height:1.05; margin:6px 0 10px; color:#fff; }
.rp2-period{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; color: rgba(255,255,255,.85); background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); padding:6px 12px; border-radius:999px; }
.rp2-hero-avatar .avatar{ box-shadow: 0 0 0 4px rgba(255,255,255,.12), 0 14px 30px rgba(0,0,0,.45); }
.rp2-hero-meta{ position:relative; margin-top:16px; font-size:10.5px; color: rgba(255,255,255,.45); }
/* big numbers */
.rp2-kpis{ display:grid; grid-template-columns: repeat(4, 1fr); gap:10px; }
.rp2-kpi{ background:#faf8f5; border:1px solid #ece7e0; border-radius:12px; padding:12px 12px 11px; min-width:0; }
.rp2-kpi-top{ display:flex; align-items:center; justify-content:space-between; gap:6px; }
.rp2-kpi-icon{ width:26px; height:26px; border-radius:8px; display:grid; place-items:center; }
.rp2-kpi-value{ font-family: var(--font-display); font-size:21px; line-height:1.1; margin-top:10px; color:#1c1a17; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rp2-kpi-label{ font-size:10.5px; font-weight:700; color:#7a736b; margin-top:3px; }
.rp2-delta{ display:inline-flex; align-items:center; gap:2px; font-size:10.5px; font-weight:800; padding:2px 7px; border-radius:999px; white-space:nowrap; }
.rp2-delta.is-up{ color:#15803d; background:#dcfce7; }
.rp2-delta.is-down{ color:#b91c1c; background:#fee2e2; }
.rp2-delta.is-flat{ color:#6b6560; background:#f0ece6; }
.rp2-compare{ margin:8px 0 0; font-size:10.5px; color:#9a938b; }
/* summary callout */
.rp2-callout{ border-left:4px solid; background:#faf8f5; border-radius: 0 12px 12px 0; padding:12px 16px; }
.rp2-callout-head{ display:flex; align-items:center; gap:6px; font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; margin-bottom:6px; }
.rp2-callout p{ margin:4px 0; font-size:12.5px; line-height:1.55; color:#33302c; }
.rp2-next{ margin-top:10px; padding:9px 12px; border-radius:10px; font-size:12.5px; color:#1c1a17; line-height:1.5; }
.rp2-next b{ display:inline-flex; align-items:center; gap:4px; margin-right:4px; }
.rp2-next small{ display:block; color:#6b6560; font-size:11.5px; margin-top:2px; }
/* section head */
.rp2-sec{ display:flex; align-items:center; gap:10px; margin:4px 0 10px; }
.rp2-sec-n{ flex:none; font-family: var(--font-display); font-size:13px; color:#fff; background:#12110f; width:30px; height:30px; border-radius:9px; display:grid; place-items:center; }
.rp2-sec h3{ margin:0; font-family: var(--font-display); font-size:16px; color:#1c1a17; }
.rp2-sec p{ margin:1px 0 0; font-size:11px; color:#8a837b; }
.rp2-sec-line{ flex:1; height:1px; background:#ece7e0; margin-left:6px; }
/* bars, pills */
.rp2-bar{ display:block; height:6px; border-radius:999px; background:#f0ece6; overflow:hidden; margin-top:6px; }
.rp2-bar > span{ display:block; height:100%; border-radius:999px; }
.rp2-pill{ display:inline-block; font-size:10px; font-weight:800; padding:2px 8px; border-radius:999px; white-space:nowrap; }
/* best posts */
.rp2-rank{ display:flex; flex-direction:column; gap:7px; }
.rp2-rank-row{ display:grid; grid-template-columns: 28px minmax(0,1fr) 110px; gap:12px; align-items:center; padding:9px 12px; border:1px solid #ece7e0; border-radius:12px; }
.rp2-rank-n{ width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:12px; background:#f0ece6; color:#6b6560; }
.rp2-rank-title{ font-weight:700; font-size:13px; color:#1c1a17; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rp2-rank-meta{ display:flex; align-items:center; gap:8px; margin-top:3px; font-size:10.5px; color:#8a837b; }
.rp2-rank-nums{ text-align:right; }
.rp2-rank-nums b{ display:block; font-family: var(--font-display); font-size:16px; color:#1c1a17; }
.rp2-rank-nums small{ font-size:10.5px; color:#8a837b; }
.rp2-empty{ font-size:12.5px; color:#8a837b; margin:0; }
/* funnel */
.rp2-stack{ display:flex; height:14px; border-radius:999px; overflow:hidden; gap:2px; }
.rp2-stack > span{ display:block; }
.rp2-legend{ display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; margin-top:12px; }
.rp2-legend-item{ display:flex; flex-direction:column; gap:2px; font-size:11.5px; color:#6b6560; padding-left:14px; position:relative; }
.rp2-legend-item b{ color:#1c1a17; font-size:12.5px; }
.rp2-dot{ position:absolute; left:0; top:4px; width:8px; height:8px; border-radius:50%; }
/* follower cards */
.rp2-cards{ display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; }
.rp2-card{ border:1px solid #ece7e0; border-radius:12px; padding:12px; }
.rp2-card-label{ font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#8a837b; }
.rp2-card-value{ font-family: var(--font-display); font-size:22px; color:#1c1a17; margin:4px 0 6px; }
/* sales */
.rp2-sales{ display:grid; grid-template-columns: 190px minmax(0,1fr); gap:12px; align-items:stretch; }
.rp2-sales-total{ border:1px solid; border-radius:12px; padding:14px; display:flex; flex-direction:column; gap:4px; align-items:flex-start; }
.rp2-sales-total small{ font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#8a837b; }
.rp2-sales-total b{ font-family: var(--font-display); font-size:22px; color:#1c1a17; }
.rp2-sales-list{ display:flex; flex-direction:column; gap:9px; justify-content:center; }
.rp2-sales-row{ display:grid; grid-template-columns: 120px minmax(0,1fr) auto; gap:10px; align-items:center; font-size:12px; }
.rp2-sales-row .rp2-bar{ margin-top:0; }
.rp2-sales-name{ font-weight:700; color:#1c1a17; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rp2-sales-num{ color:#6b6560; font-size:11.5px; white-space:nowrap; }
.rp2-chips{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:10px; }
.rp2-chips-label{ font-size:11px; font-weight:700; color:#8a837b; }
.rp2-chip{ font-size:11px; padding:3px 9px; border-radius:999px; background:#f0ece6; color:#33302c; }
/* campaigns */
.rp2-camps{ display:grid; grid-template-columns: repeat(2, 1fr); gap:10px; }
.rp2-camp{ border:1px solid #ece7e0; border-radius:12px; padding:12px 14px; }
.rp2-camp-head{ display:flex; justify-content:space-between; gap:8px; font-size:13px; color:#1c1a17; }
.rp2-camp-head span{ font-weight:800; color:#6b6560; font-size:12px; }
.rp2-camp-stage{ font-size:11px; color:#8a837b; margin-top:2px; }
.rp2-camp-head-num{ font-size:11px; color:#33302c; margin-top:6px; }
/* timeline */
.rp2-timeline{ display:flex; flex-direction:column; gap:7px; }
.rp2-tl-row{ display:flex; align-items:center; gap:12px; font-size:12.5px; color:#1c1a17; }
.rp2-tl-date{ flex:none; width:44px; height:44px; border-radius:12px; border:1.5px solid; display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1; }
.rp2-tl-date b{ font-family: var(--font-display); font-size:17px; }
.rp2-tl-date small{ font-size:9.5px; font-weight:800; text-transform:uppercase; color:#8a837b; margin-top:2px; }
.rp2-tl-title{ flex:1; min-width:0; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* notes */
.rp2-notes{ display:flex; flex-direction:column; gap:7px; }
.rp2-note{ display:flex; align-items:flex-start; gap:8px; font-size:12.5px; line-height:1.5; color:#33302c; padding:8px 12px; border-radius:10px; background:#faf8f5; }
.rp2-note svg{ flex:none; margin-top:3px; color:#e11d74; }
.rp2-note.is-lesson svg{ color:#ca8a04; }
.rp2-note small{ display:block; color:#8a837b; font-size:11.5px; }
/* footer */
.rp2-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:22px 36px 0; padding:12px 0 14px; border-top:1px solid #ece7e0; font-size:10.5px; color:#9a938b; }
.rp2-foot-mark{ display:inline-flex; align-items:center; gap:7px; background:#12110f; color:#fff; padding:5px 10px; border-radius:999px; font-weight:800; font-size:10.5px; }
.rp2-foot-mark img{ height:11px; width:auto; }
/* A4 pages for the PDF: the footer sits at the bottom of each page */
.rp-pdf-host .rp2.rp-page{ position:relative; padding:0; }
.rp-pdf-host .rp2.rp-page .rp2-foot{ position:absolute; left:0; right:0; bottom:0; margin:0 36px; }

/* ============================================================
   Retention (watch time) — Quick Fill section, Home widgets, chat photos
   ============================================================ */
.qe-ret{ margin-top:18px; padding-top:16px; border-top:1px solid var(--border); }
.qe-ret-title{ font-weight:800; font-size:13.5px; }
.qe-ret-verdict{ margin-top:12px; font-size:13px; color: var(--text-muted); }
.qe-ret-verdict p{ margin:6px 0 0; line-height:1.5; }
.qe-ret-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.qe-ret-chip{ display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius: var(--radius-pill); background: var(--surface-2); font-size:12px; color: var(--text-muted); }
.qe-ret-chip b{ color: var(--text); font-size:13px; }
.qe-ret-chip.health-good{ background: color-mix(in srgb, var(--health-good) 14%, transparent); color: var(--health-good); }
.qe-ret-chip.health-average{ background: color-mix(in srgb, var(--health-average) 14%, transparent); color: var(--health-average); }
.qe-ret-chip.health-poor{ background: color-mix(in srgb, var(--health-poor) 14%, transparent); color: var(--health-poor); }
.ret-tiles{ display:grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap:10px; }
.ret-tile{ padding:12px 12px 10px; border-radius: var(--radius-md); background: var(--surface-2); min-width:0; }
.ret-tile-v{ font-family: var(--font-display); font-weight:800; font-size:22px; line-height:1.1; letter-spacing:-.01em; }
.ret-tile-k{ font-size:11.5px; color: var(--text-muted); margin-top:4px; }
.ret-tile-k span{ color: var(--text-faint); }
.ret-tile-r{ display:flex; align-items:center; gap:6px; font-size:11px; font-weight:800; margin-top:8px; }
.ret-good .ret-tile-r{ color: var(--health-good); }
.ret-average .ret-tile-r{ color: var(--health-average); }
.ret-poor .ret-tile-r{ color: var(--health-poor); }
.ret-note{ margin:12px 0 0; font-size:12px; color: var(--text-faint); line-height:1.45; }
.ret-row-verdict{ color: var(--text-muted) !important; white-space:normal !important; margin-top:3px; }
/* Chat: attached screenshots (composer strip + inside the sent bubble) */
.cp-attach{ display:flex; gap:8px; padding:8px 14px 0; flex-wrap:wrap; }
.cp-attach-item{ position:relative; width:56px; height:56px; border-radius:8px; overflow:hidden; border:1px solid var(--border); background: var(--surface-2); }
.cp-attach-item img{ width:100%; height:100%; object-fit:cover; display:block; }
.cp-attach-item button{ position:absolute; top:2px; right:2px; width:18px; height:18px; border-radius:999px; border:0; background: rgba(0,0,0,.65); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; }
.consultant-panel-input .cp-image{ flex:none; }
.is-dragging .consultant-panel-input{ outline:2px dashed var(--accent); outline-offset:-4px; }
.cp-msg-images{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:6px; }
.cp-msg-images img{ width:72px; height:72px; object-fit:cover; border-radius:8px; border:1px solid rgba(255,255,255,.35); display:block; }
.cp-metrics{ margin-top:8px; padding:10px 12px; border:1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.cp-metrics-title{ font-weight:800; font-size:12.5px; margin-bottom:6px; }
.cp-metrics-list{ display:flex; flex-wrap:wrap; gap:6px; }
.cp-metrics-list span{ font-size:12px; padding:3px 8px; border-radius: var(--radius-pill); background: var(--surface-2); color: var(--text-muted); }
.cp-metrics-list span b{ color: var(--text); }
.cp-metrics-actions{ margin-top:8px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; font-size:12px; color: var(--text-muted); }
.cp-pick-list{ display:flex; flex-direction:column; gap:4px; max-height:50vh; overflow-y:auto; margin-top:10px; }
.cp-pick-row{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:9px 10px; border-radius:8px; border:1px solid transparent; background:transparent; color: var(--text); cursor:pointer; font:inherit; }
.cp-pick-row:hover{ background: var(--surface-2); border-color: var(--border); }
.cp-pick-row .t{ font-weight:700; font-size:13px; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cp-pick-row .m{ font-size:11.5px; color: var(--text-faint); flex:none; }

/* Brand memory: write-it-yourself form, the ♡ on your own chat message, and
   the "Ide Konten vs Memori Brand" explainer (js/brand-memory.js). */
.memory-add{ margin:10px 0 4px; padding:10px; border:1px dashed var(--border); border-radius: var(--radius-md); background: var(--surface-2); }
.memory-add-title{ display:flex; align-items:center; gap:5px; margin:0 0 6px; font-size:12px; font-weight:700; }
.memory-add-text{ min-height:54px; font-size:12.5px; resize:vertical; }
.memory-add-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; margin-top:8px; }
.memory-add-kind{ display:flex; align-items:center; gap:6px; font-size:11.5px; color: var(--text-muted); }
.memory-add-kind .select{ width:auto; min-width:120px; padding:4px 28px 4px 8px; font-size:12px; height:auto; }
.memory-add-how{ font-size:11px; margin:8px 0 0; line-height:1.45; }
.memory-diff{ margin:0 0 12px; border:1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); font-size:12px; }
.memory-diff summary{ display:flex; align-items:center; gap:6px; padding:8px 10px; cursor:pointer; font-weight:700; color: var(--text-muted); list-style:none; }
.memory-diff summary::-webkit-details-marker{ display:none; }
.memory-diff[open] summary{ color: var(--text); }
.memory-diff-body{ padding:0 10px 10px; }
.memory-diff-body p{ display:flex; gap:6px; margin:0 0 6px; line-height:1.45; }
.memory-diff-body p svg{ flex:none; margin-top:3px; }
.memory-diff-body p.text-faint{ display:block; margin:4px 0 0; font-size:11.5px; }
.cp-side > .memory-diff{ margin-bottom:10px; }
.cp-msg-mem{ position:absolute; left:-26px; top:50%; transform:translateY(-50%); width:22px; height:22px; border:0; border-radius:50%; background:transparent; color: var(--text-faint); display:grid; place-items:center; cursor:pointer; opacity:0; transition: opacity .15s, color .15s; }
.cp-msg-mem.has-del{ left:-50px; }
.consultant-msg-user:hover .cp-msg-mem, .cp-msg-mem:focus-visible{ opacity:1; }
.cp-msg-mem:hover{ color: var(--accent); background: var(--surface-2); }
.cp-msg-mem.is-saved{ opacity:1; color: var(--accent); cursor:default; }
.cp-msg-mem.is-saved svg path{ fill: currentColor; }
@media (hover:none){ .cp-msg-mem{ opacity:.6; } }

/* Brand DNA wizard nav on phones: Kembali + Simpan progress + Lanjut don't
   fit one 343px row (Lanjut was pushed past the screen edge). Kembali and
   Lanjut share the first row, Simpan progress drops below. */
@media (max-width: 520px){
  .dna-nav{ flex-wrap:wrap; }
  .dna-nav-right{ display:contents; }
  .dna-nav-save{ order:3; flex:1 1 100%; text-align:center !important; }
  .dna-nav #wiz-back{ flex:none; }
  .dna-nav-next{ flex:1 1 0; min-width:0; }
  .bb-chip-row{ flex-wrap:wrap; }
}

/* Pricing (logged out): what Brandlab actually does, before any price. */
.pricing-pending-help{ border:1px solid var(--accent); background: var(--accent-soft); border-radius: var(--radius-lg); padding:16px 18px; margin: 0 auto 18px; max-width:720px; }
.pricing-pending-help b{ display:block; font-size:14.5px; margin-bottom:4px; }
.pricing-pending-help p{ margin:0 0 10px; font-size:13px; color: var(--text-muted); line-height:1.5; }

/* Touch screens: every tappable control at least ~40px tall/wide, so a
   thumb doesn't hit the neighbour (Panduan, Kembali, icon buttons, the
   pricing toggles were 26–32px). Mouse layouts keep their compact size. */
@media (pointer: coarse){
  .btn, .btn-sm{ min-height:40px; }
  .icon-btn{ min-width:40px; min-height:40px; }
  .chip-select button, .checkbox-chip{ min-height:40px; }
  .tab{ min-height:44px; }
}

/* Konten list on phones: each row becomes a small card (title + actions on
   top, the rest as label/value lines) instead of a 980px-wide table you have
   to swipe sideways to read. */
@media (max-width: 640px){
  .data-table.cl-cards thead{ display:none; }
  .data-table.cl-cards, .data-table.cl-cards tbody{ display:block; width:100%; }
  .data-table.cl-cards tr{ display:grid; grid-template-columns:1fr auto; gap:6px 10px; padding:14px 14px; border-bottom:1px solid var(--border); }
  .data-table.cl-cards td{ display:block; padding:0; border:none; white-space:normal; }
  .data-table.cl-cards td.cell-title{ grid-column:1; grid-row:1; font-weight:700; font-size:14px; }
  .data-table.cl-cards td:last-child{ grid-column:2; grid-row:1; }
  .data-table.cl-cards td[data-label]{ grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:12.5px; }
  .data-table.cl-cards td[data-label]::before{ content: attr(data-label); color: var(--text-faint); font-weight:600; font-size:11.5px; }
  .data-table.cl-cards td[data-label] .text-faint{ display:inline; margin-left:6px; }
  /* Pelacak Penjualan's products use the same cards; multi-part values
     (struck price + discount, sold / target + bar) stay one right-aligned block. */
  .st-products-table td:first-child{ grid-column:1; grid-row:1; font-size:14px; min-width:0; overflow-wrap:anywhere; }
  .st-products-table td[data-label] > div{ text-align:right; }
  .st-products-table td[data-label] .tag-discount{ margin-left:auto; }
  .st-products-table td[data-label] .cd-bar{ margin-left:auto; min-width:80px; }
}

/* See js/theme.js setTheme: no mixed-speed transitions during a theme switch. */
.theme-switching *, .theme-switching *::before, .theme-switching *::after{ transition:none !important; }

/* === UI polish: one help door per page (js/guide-videos.js pageHelpMenu) ===
   The eyebrow's own "?" sits right before the Panduan pill; the pill's menu
   already shows that same explainer, so the "?" steps aside. */
.page-eyebrow:has(.page-help-btn) > .help-btn[data-help]{ display:none; }
.page-help-menu{ width: 300px; max-width: calc(100vw - 16px); }
.page-help-actions{ display:flex; flex-direction:column; gap:2px; margin-top:6px; }
.page-help-actions:empty{ display:none; }
.page-help-actions button{ display:flex; align-items:center; gap:9px; width:100%; text-align:left; background:none; border:0; color: var(--text); font: inherit; font-size:13.5px; font-weight:600; padding:10px 8px; border-radius: 10px; cursor:pointer; }
.page-help-actions button:hover{ background: var(--surface-hover, var(--surface)); }
.page-help-actions button svg{ color: var(--accent); flex:none; }

/* === UI polish: ukuran teks & keterbacaan di HP (Tugas A) ===
   Body/paragraf & .page-sub sudah 14-15px lewat aturan dasar; yang perlu
   dinaikkan khusus di layar sempit adalah (1) input/select/textarea, biar
   iOS Safari tidak auto-zoom saat fokus (perlu >=16px), dan (2) teks
   bantuan/hint kecil (11-12px) yang sering ditulis inline di template JS
   lewat class="text-faint" — dipaksa via !important karena style inline
   tidak bisa dikalahkan cara lain. Tidak menyentuh angka di tile/badge/pill
   (class-nya sendiri, bukan .text-faint), jadi layout kecil itu aman. */
@media (max-width: 640px){
  /* Every control you type into, whatever class or inline style it has: a
     single 12-13px one (the chat box, the status pill, an inline phase
     name, the period picker) is enough for iOS to zoom the page on focus.
     !important because those sizes come from more specific selectors and
     style="" attributes. */
  .input, .select, .textarea, select, textarea,
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="hidden"]){ font-size:16px !important; }
  .page-sub{ font-size:15px; }
  .field .hint, .hint, .ev-field-hint, .text-faint{ font-size:13px !important; }
}

/* === UI polish: empty states & loading skeletons (Tugas B) ===
   Skeleton: a soft shimmering placeholder for content that's still loading
   (js/dom.js skeletonHTML) — replaces a bare "Memuat…" sitting alone as page
   content. Bars use the same surface tokens as the rest of the app, so they
   read correctly in both themes without new color variables. */
.skeleton{ display:flex; flex-direction:column; gap:10px; width:100%; }
.skeleton-card{ padding:16px 18px; border:1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.skeleton-line{ height:13px; border-radius:7px; background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-hover, var(--surface-2)) 50%, var(--surface-2) 75%); background-size:200% 100%; animation: skeleton-shimmer 1.5s ease-in-out infinite; }
.skeleton-line:first-child{ height:15px; width:40%; }
@keyframes skeleton-shimmer{ 0%{ background-position:200% 0; } 100%{ background-position:-200% 0; } }
@media (prefers-reduced-motion: reduce){ .skeleton-line{ animation:none; background: var(--surface-2); } }

/* Empty states: reuses the existing .empty-state pattern (icon-wrap circle,
   h3, p — first written for Content Studio's empty panel) so every "nothing
   here yet" screen looks like the same idea, not a one-off per page. */
.empty-state .btn{ margin: 0 auto; }
.empty-state-ideas{ padding: 4px 20px 36px; }
/* Inline "nothing here yet" inside a card/widget (js/dom.js emptyInlineHTML):
   one look everywhere, with an optional single next step. */
.empty-inline{ display:flex; flex-direction:column; align-items:center; gap:10px; padding:24px 16px; text-align:center; }
.empty-inline p{ margin:0; max-width:46ch; font-size:13px; line-height:1.55; color: var(--text-muted); }
.empty-inline.is-compact{ align-items:flex-start; padding:8px 0; text-align:left; gap:8px; }
.empty-inline.is-compact p{ font-size:12.5px; }
.empty-state-ideas .page-eyebrow{ text-align:center; margin-bottom:12px; }
.ann-loading-skel{ display:flex; flex-direction:column; gap:12px; }

/* === UI polish: phone shell — one-row header + bottom tab bar ===
   The header used to stack logo, brand switcher, an icon row and the tabs:
   ~350px of an 812px screen before any content. Below 720px it's one row
   (brand switcher + bell for Pro + ⋯) and the four tabs move to a bar at
   the bottom, under the thumb. The bar is its own element (<nav
   class="bottom-nav">, js/layout.js) because .topbar's backdrop-filter
   would trap a position:fixed child inside the header.
   Above 720px the topbar row itself stays (no bottom-nav): 721-1240px is
   the icon-only band above (.topbar .tabs .tab{font-size:0}) — that's
   narrow enough to fit down to ~721px — and above 1240px there's room for
   full labels again (the full row needs ~1242px before nothing has to
   shrink). Only below 720px does even the icon-only row stop being worth
   it next to a shrunk brand switcher, so it hands off to the bottom bar. */
.bottom-nav{ display:none; }
@media (max-width: 720px){
  .topbar{ flex-wrap:nowrap; padding: 10px 14px; gap:10px; min-height:60px; }
  .topbar:has(.brand-switch) .brand-mark{ display:none; }
  .brand-switch{ flex:1 1 auto; min-width:0; max-width:none; }
  .topbar-right{ flex-wrap:nowrap; gap:8px; }
  .topbar .tabs, .topbar .updates-btn, .topbar .plan-badge{ display:none; }
  .bottom-nav{
    display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:4px;
    position:fixed; left:0; right:0; bottom:0; z-index:60;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--border);
  }
  :root[data-theme="light"] .bottom-nav{ background: color-mix(in srgb, var(--brand-tint) 10%, color-mix(in srgb, var(--bg) 94%, transparent)); }
  .bottom-nav .tab{ flex-direction:column; justify-content:center; gap:3px; padding:6px 2px; min-height:52px; font-size:11.5px; min-width:0; border-radius:14px; }
  .bottom-nav .tab svg{ width:20px; height:20px; }
  /* Room for the bar: page end, the chat button, notes and toasts sit above it.
     The page ends 136px up so its last card clears the chat and notes
     buttons (their tops sit ~120px up) instead of hiding under them. */
  body:has(.bottom-nav) main.view{ padding-bottom: calc(136px + env(safe-area-inset-bottom)); }
  body:has(.bottom-nav) .consultant-fab{ bottom: calc(76px + env(safe-area-inset-bottom)); }
  body:has(.bottom-nav) .consultant-fab-hint{ bottom: calc(82px + env(safe-area-inset-bottom)); }
  /* Its top used to land ~20px above the screen: 130px up with a height of
     100vh - 110px. Now capped to end below the 60px header. */
  body:has(.bottom-nav) .notes-float{ bottom: calc(130px + env(safe-area-inset-bottom)); max-height: calc(100vh - 206px - env(safe-area-inset-bottom)); max-height: calc(100dvh - 206px - env(safe-area-inset-bottom)); }
  body:has(.bottom-nav) .notes-fab{ bottom: calc(80px + env(safe-area-inset-bottom)); }
  body:has(.bottom-nav) .toast-root{ bottom: calc(140px + env(safe-area-inset-bottom)); }
  body.tour-active .bottom-nav{ z-index:59; }
}
.menu-mobile-only{ display:none !important; }
/* Same 1240px breakpoint as .bottom-nav above: once the topbar hides the
   plan badge and updates button, this is their only remaining home. */
@media (max-width: 720px){ .menu-mobile-only{ display:flex !important; } .menu-divider.menu-mobile-only{ display:block !important; } }
.menu .menu-count{ margin-left:auto; min-width:20px; height:20px; padding:0 6px; border-radius:999px; background: var(--accent); color: var(--accent-text); font-size:11px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; }
#app-menu-btn{ position:relative; }
.app-menu-badge{ display:none; }
@media (max-width: 720px){ .app-menu-badge:not([hidden]){ display:block; position:absolute; top:4px; right:4px; width:9px; height:9px; min-width:0; padding:0; border-radius:50%; } }

/* === UI polish: chat page tabs on phones (js/consultant-panel.js pageHTML) === */
.cp-mtabs{ display:none; }
@media (max-width: 720px){
  .cp-mtabs{ display:flex; flex-wrap:nowrap; width:100%; margin-bottom:12px; }
  .cp-mtabs button{ flex:1 1 0; }
  .cp-page[data-mtab="chat"] > .cp-side,
  .cp-page[data-mtab="chat"] > [data-pane="ideas"],
  .cp-page[data-mtab="chat"] > [data-pane="memory"]{ display:none; }
  .cp-page[data-mtab="ideas"] > .cp-page-chat,
  .cp-page[data-mtab="memory"] > .cp-page-chat,
  .cp-page[data-mtab="ideas"] > .bs-threads,
  .cp-page[data-mtab="memory"] > .bs-threads{ display:none; }
  .cp-page[data-mtab="ideas"] [data-pane="memory"],
  .cp-page[data-mtab="memory"] [data-pane="ideas"]{ display:none; }
  .cp-page-chat{ height: calc(100dvh - 300px); min-height: 420px; }
}

/* === UI polish: Tugas C — page titles, lighter Beranda, progress feel === */

/* Brand name shown small under an h1 that's now a page name instead of the
   brand name (js/views/content-list.js, calendar.js, creator.js,
   copy-studio.js, campaigns.js, sales.js, brand-builder.js,
   brand-guidelines.js, series.js). */
.page-head-brand{ font-size:12.5px; font-weight:600; color: var(--text-muted); margin-top:2px; }

/* Small "N of 3" dots next to the journey summary line (js/views/home.js
   stepsHTML) — a glanceable progress read with no need to open the
   details. */
.step-dots{ display:inline-flex; align-items:center; gap:5px; margin-left:2px; }
.step-dot{ width:7px; height:7px; border-radius:50%; background: var(--border); flex:none; }
.step-dot.is-done{ background: var(--health-good); }

/* A small posting-streak nudge under the page-sub on Beranda
   (js/views/home.js postingStreakWeeks). */
.home-streak{ margin:4px 0 0; font-size:13px; font-weight:700; color: var(--accent); }

/* One-time "step just finished" celebration row (js/views/home.js
   detectNewlyDoneSteps) reuses .journey-step-celebrate's existing
   animation — this just makes sure it's skipped for anyone who asked for
   less motion (the identity-only case above it wasn't previously guarded
   either). */
@media (prefers-reduced-motion: reduce){ .journey-step-celebrate{ animation:none; } }

/* Beranda only: every card except the "next step" hero (.journey-hero)
   goes light/quiet in light theme instead of the same dark glass as the
   hero, so the hero actually reads as the one thing that matters. Scoped
   to .view-home (the <main> route class set in js/layout.js) so Sales
   Tracker/Campaign detail/All Brands, which share the same widget-card and
   glass-card components, are untouched. */
:root[data-theme="light"] .view-home .dash-widget-card,
:root[data-theme="light"] .view-home .glass-card:not(.journey-hero){
  --surface: #ffffff; --surface-2: #f2efe7; --surface-hover: #ebe6db;
  --border: #e2dbcc; --border-soft: #ece6da;
  --text: #201c17; --text-muted: #6d655a; --text-faint: #98907f;
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
  animation: none;
}
:root[data-theme="light"] .view-home .dash-widget-backdrop{
  background: var(--surface); backdrop-filter:none; -webkit-backdrop-filter:none;
}
:root[data-theme="light"] .view-home .glass-card:not(.journey-hero){
  background: var(--surface); backdrop-filter:none; -webkit-backdrop-filter:none;
}
:root[data-theme="light"] .view-home .dash-widget-card:hover,
:root[data-theme="light"] .view-home .glass-card:not(.journey-hero):hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
}
:root[data-theme="light"] .view-home .dash-widget-card-icon{
  background: color-mix(in srgb, var(--accent) 10%, var(--surface-2));
  border-color: var(--border);
}
:root[data-theme="light"] .view-home .dash-widget-card-title h2{ color: var(--text); }
:root[data-theme="light"] .view-home .dash-widget-card-title p{ color: var(--text-muted); }
:root[data-theme="light"] .view-home .dash-widget-glow{ opacity:.08; }
:root[data-theme="light"] .view-home .dash-widget-collapse-btn{ color: var(--text-muted); }
:root[data-theme="light"] .view-home .dash-widget-collapse-btn:hover{ background: var(--surface-2); color: var(--text); }
/* The collapsed one-line pill (widgetCollapsedHTML) is its own hardcoded-dark
   component (not var()-driven), so it needs the same treatment spelled out
   rather than inherited. */
:root[data-theme="light"] .view-home .dash-widget-collapsed{
  color: var(--text);
  background: var(--surface);
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
  animation: none;
}
:root[data-theme="light"] .view-home .dash-widget-collapsed:hover{ box-shadow: var(--shadow-md); }
:root[data-theme="light"] .view-home .dash-widget-collapsed-icon{ background: color-mix(in srgb, var(--accent) 10%, var(--surface-2)); border-color: var(--border); }
:root[data-theme="light"] .view-home .dash-widget-collapsed-text b{ color: var(--text); }
:root[data-theme="light"] .view-home .dash-widget-collapsed-text small{ color: var(--text-muted); }
:root[data-theme="light"] .view-home .dash-widget-collapsed > svg:last-child{ color: var(--text-faint); }

/* === UI polish: Brand DNA live identity card + example chips (js/views/brand-dna.js) ===
   Phones: a collapsible card above the question. Wide screens: the card
   sits in its own column to the right and stays in view while scrolling. */
.dna-live{ margin-bottom:18px; border:1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.dna-live > summary{ display:flex; align-items:center; gap:8px; padding:12px 14px; cursor:pointer; font-weight:800; font-size:13.5px; list-style:none; }
.dna-live > summary::-webkit-details-marker{ display:none; }
.dna-live > summary svg{ color: var(--accent); }
.dna-live > summary small{ margin-left:auto; color: var(--text-muted); font-weight:700; }
.dna-live-card{ padding: 4px 14px 14px; }
.dna-live-top{ display:flex; gap:12px; align-items:center; margin-bottom:12px; }
.dna-live-avatar{ width:44px; height:44px; border-radius:12px; flex:none; display:flex; align-items:center; justify-content:center; background: var(--brand-tint); color: var(--brand-tint-text); font-family: var(--font-display); font-weight:900; font-size:20px; }
.dna-live-top b{ display:block; font-family: var(--font-display); font-size:17px; }
.dna-live-top em{ display:block; font-style:normal; font-size:13px; color: var(--text-muted); margin-top:2px; }
.dna-live-row{ padding:8px 0; border-top:1px solid var(--border-soft, var(--border)); }
.dna-live-row span{ display:block; font-size:11.5px; font-weight:800; color: var(--text-muted); margin-bottom:2px; }
.dna-live-row p{ margin:0; font-size:13.5px; line-height:1.45; }
.dna-live .is-empty, .dna-live-card .is-empty{ color: var(--text-faint); font-style:italic; }
.dna-live-foot{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; padding-top:10px; border-top:1px solid var(--border-soft, var(--border)); }
.dna-live-foot i{ width:16px; height:16px; border-radius:50%; border:1px solid var(--border); }
.dna-live-count{ margin-left:auto; font-size:12px; font-weight:700; color: var(--text-muted); }
.dna-live-card-big{ border:1px solid var(--border); border-radius: var(--radius-lg); padding:16px; background: var(--surface); }
.dna-live-card-big .dna-live-top b{ font-size:20px; }
@media (min-width: 1000px){
  .dna-wizard-main{ max-width:none !important; display:grid; grid-template-columns: minmax(0, 640px) 300px; column-gap:32px; }
  .dna-wizard-main > *{ grid-column:1; }
  .dna-wizard-main > .dna-live{ grid-column:2; grid-row: 1 / span 40; align-self:start; position:sticky; top: calc(var(--header-h) + 20px); }
  .dna-live > summary{ cursor:default; pointer-events:none; }
}
.dna-examples{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:8px; }
.dna-examples > span{ font-size:12px; font-weight:700; color: var(--text-muted); }
.dna-examples button{ border:1px dashed color-mix(in srgb, var(--accent) 55%, var(--border)); background: transparent; color: var(--text); font: inherit; font-size:12.5px; font-weight:600; padding:6px 11px; border-radius: 999px; cursor:pointer; }
.dna-examples button:hover{ background: var(--accent-soft); border-style:solid; }
/* Brand DNA Review footer on phones: Kembali + ⋯ on one row, the two save
   buttons full-width underneath (they pushed the page 180px past the edge). */
@media (max-width: 520px){
  .dna-review-nav{ flex-wrap:wrap; gap:10px; }
  .dna-review-nav > .flex:last-child{ width:100%; flex-direction:column-reverse; }
  .dna-review-nav > .flex:last-child .btn{ width:100%; justify-content:center; }
}
/* Phones: the brand avatar is already in the header's brand switcher — the
   big copy beside "Report PDF" only pushed the page content down. */
@media (max-width: 720px){ .home-head-side .avatar{ display:none; } }

/* === Chat: "Script siap syuting" card ([[script:…]] → js/consultant-panel.js scriptCardHTML) === */
.cp-script{ margin-top:10px; border:1px solid color-mix(in srgb, var(--accent) 45%, var(--border)); border-radius:14px; background: var(--surface); overflow:hidden; }
.cp-script-head{ display:flex; align-items:center; gap:6px; padding:9px 12px; font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color: var(--accent); background: var(--accent-soft); }
.cp-script-head small{ margin-left:auto; text-transform:none; letter-spacing:0; font-weight:700; color: var(--text-muted); }
.cp-script-title{ padding:10px 12px 0; font-weight:800; font-size:14.5px; color: var(--text); }
.cp-script-body{ padding:6px 12px 4px; font-size:13.5px; line-height:1.55; color: var(--text); max-height:420px; overflow:auto; }
.cp-script-body p{ margin:0 0 6px; }
.cp-script-caption{ margin:4px 12px 0; padding:8px 10px; border-radius:10px; background: var(--surface-2); font-size:12.5px; }
.cp-script-caption b{ display:block; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color: var(--text-muted); margin-bottom:2px; }
.cp-script-caption p{ margin:0; white-space:pre-wrap; color: var(--text); }
.cp-script-actions{ display:flex; flex-wrap:wrap; gap:8px; padding:10px 12px 12px; }
/* The "Kamu bisa tanya AI lho!" bubble sat on top of the Coretan button
   (both anchored ~86px from the right). It now starts left of Coretan. */
.consultant-fab-hint{ right:142px; max-width:calc(100vw - 320px); }
@media (max-width: 640px){ .consultant-fab-hint{ right:118px; max-width:calc(100vw - 134px); } }

/* === Tujuan list: Grow Brand / Event sections + kind icons (js/views/campaigns.js) === */
:root{ --track-event: var(--accent); --track-event-soft: var(--accent-soft); --track-other: var(--text-muted); --track-other-soft: var(--surface-2); }
.camp-section{ margin-bottom:30px; }
.camp-section-head{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.camp-section-head h2{ margin:0; font-size:18px; display:flex; align-items:center; gap:8px; }
.camp-section-head p{ margin:2px 0 0; font-size:13px; color: var(--text-muted); }
.camp-section-icon{ width:38px; height:38px; border-radius:12px; flex:none; display:flex; align-items:center; justify-content:center; background: var(--surface-2); color: var(--text); }
.camp-section-head--grow .camp-section-icon{ background: var(--track-social-soft); color: var(--track-social); }
.camp-section-head--event .camp-section-icon{ background: var(--track-event-soft); color: var(--track-event); }
.camp-section-count{ font-size:12px; font-weight:800; min-width:22px; height:22px; padding:0 7px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; background: var(--surface-2); color: var(--text-muted); }
.camp-kind{ display:flex; align-items:center; gap:10px; margin-bottom:14px; padding-right:40px; }
.camp-kind-icon{ width:46px; height:46px; border-radius:14px; flex:none; display:flex; align-items:center; justify-content:center; }
.camp-kind-icon svg{ width:24px; height:24px; }
.camp-kind-icon--social{ background: var(--track-social-soft); color: var(--track-social); }
.camp-kind-icon--community{ background: var(--track-community-soft); color: var(--track-community); }
.camp-kind-icon--sales{ background: var(--track-sales-soft); color: var(--track-sales); }
.camp-kind-icon--event{ background: var(--track-event-soft); color: var(--track-event); }
.camp-kind-icon--other{ background: var(--track-other-soft); color: var(--track-other); }
.camp-kind-label{ font-size:12.5px; font-weight:800; color: var(--text-muted); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.camp-kind-chip{ margin-left:auto; flex:none; font-size:11.5px; font-weight:800; padding:4px 10px; border-radius:999px; background: var(--surface-2); color: var(--text-muted); }
.camp-kind-chip.is-soon{ background: var(--track-event-soft); color: var(--track-event); }
.campaign-card--kind-event{ border-color: color-mix(in srgb, var(--track-event) 35%, var(--border)); }
.campaign-card--kind-social .cd-bar > span{ background: var(--track-social); }
.campaign-card--kind-community .cd-bar > span{ background: var(--track-community); }
.campaign-card--kind-sales .cd-bar > span{ background: var(--track-sales); }
.campaign-card--kind-event .cd-bar > span{ background: var(--track-event); }
/* Brighter kind tiles: the soft tints alone read muddy on the dark cards. */
.camp-kind-icon{ box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 35%, transparent); }
.camp-kind-icon--social{ background: color-mix(in srgb, var(--track-social) 24%, transparent); }
.camp-kind-icon--community{ background: color-mix(in srgb, var(--track-community) 24%, transparent); }
.camp-kind-icon--sales{ background: color-mix(in srgb, var(--track-sales) 24%, transparent); }
.camp-kind-icon--event{ background: color-mix(in srgb, var(--track-event) 24%, transparent); }

/* ---- revisi: insight actions ---- */
.insight-action-list{ display:flex; flex-direction:column; gap:10px; }
.insight-action-row{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px; background: var(--surface-2); }
.insight-action-icon{ flex:none; width:28px; height:28px; border-radius:9px; display:flex; align-items:center; justify-content:center; background: var(--accent-soft); color: var(--accent); }
.insight-action-text{ flex:1; min-width:0; font-size:13px; color: var(--text); }
.insight-action-row .btn{ flex:none; }

/* ---- revisi: creator sidebar + home action results ---- */
/* Desktop: the sidebar list no longer scrolls inside its own box (groups
   are capped at 5 rows + "Show N more" in creator.js), so a long group
   can't hide the groups below it. Phones keep their own rule above. */
@media (min-width: 861px){
  .creator-sidebar-list{ max-height:none; overflow:visible; }
}
.creator-group-more{
  display:block; width:100%; padding:10px 14px; border:0; border-top:1px solid var(--border-soft);
  background:transparent; color: var(--brand-tint); font: inherit; font-size:12.5px; font-weight:700;
  text-align:left; cursor:pointer;
}
.creator-group-more:hover{ background: var(--surface-hover); }

.insight-result{
  border:1px solid color-mix(in srgb, var(--health-good) 40%, var(--border));
  background: color-mix(in srgb, var(--health-good) 8%, var(--surface));
  border-radius: var(--radius-md, 12px); padding:12px 14px; margin-bottom:12px;
}
.insight-result-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.insight-result-title{ display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:13.5px; color: var(--text); }
.insight-result-title svg{ color: var(--health-good); flex:none; }
.insight-result-list{ list-style:none; margin:10px 0 8px; padding:0; display:flex; flex-direction:column; gap:6px; }
.insight-result-list a{
  display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:10px;
  background: var(--surface); border:1px solid var(--border-soft); color: var(--text); text-decoration:none;
}
.insight-result-list a:hover{ border-color: var(--brand-tint); }
.insight-result-name{ flex:1; min-width:0; font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.insight-result-date{ font-size:11.5px; color: var(--text-faint); flex:none; }
.insight-result-open{ display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:700; color: var(--brand-tint); flex:none; }
.insight-result-all{ display:inline-flex; align-items:center; gap:4px; font-size:12.5px; font-weight:700; color: var(--brand-tint); text-decoration:none; }

/* ---- revisi: guidelines copy ---- */
.bbk-copy-editors{ display:flex; flex-direction:column; gap:16px; }
.bbk-copy-editor-sep{ height:1px; background: var(--border-soft); margin:2px 0; }
.bbk-copy-editor-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.bbk-copy-editor-head strong{ font-size:13.5px; }
.bbk-pillar-edit-list{ display:flex; flex-direction:column; gap:10px; margin-bottom:10px; }
.bbk-pillar-edit{ display:flex; align-items:flex-start; gap:10px; padding:10px; border:1px solid var(--border-soft); border-radius: var(--radius-md, 10px); background: var(--surface); }
.bbk-pillar-edit-num{ flex:none; width:24px; padding-top:8px; font-weight:800; opacity:.4; font-size:13px; }
.bbk-pillar-edit-fields{ flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
.bbk-pillar-edit-fields textarea{ min-height:52px; }
.bbk-essence-edit-list{ display:flex; flex-direction:column; gap:10px; }
.bbk-essence-edit-row{ display:flex; align-items:flex-start; gap:10px; padding:10px; border:1px solid var(--border-soft); border-radius: var(--radius-md, 10px); background: var(--surface); }
.bbk-essence-swatch{ flex:none; width:22px; height:22px; border-radius:50%; margin-top:22px; border:1px solid rgba(0,0,0,.12); box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--border); }
.bbk-essence-edit-fields{ flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; }
.bbk-essence-edit-fields label{ font-size:11px; font-weight:700; color: var(--text-muted); }
.bbk-essence-edit-fields textarea{ min-height:44px; }
.bbk-essence-edit-row .chip-icon-btn, .bbk-pillar-edit .chip-icon-btn{ margin-top:20px; }

/* ---- revisi: brand book long text ---- */
/* Book pages are fixed A4 artboards — long answers shrink (fitSize in
   brand-guidelines.js) and, as a last resort, clamp instead of running off
   the page or over the footer. */
.bbk-clamp-2, .bbk-clamp-4, .bbk-clamp-8{ display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; }
.bbk-clamp-2{ -webkit-line-clamp:2; }
.bbk-clamp-4{ -webkit-line-clamp:4; }
.bbk-clamp-8{ -webkit-line-clamp:8; }
.bbk-bigword.bbk-clamp-4{ line-height:1.12; }
.bbk-traits-compact .bbk-trait-row{ padding:9px 0; font-size:14.5px; }
.bbk-cta-wrap{ margin-top:auto; padding-top:16px; }
.bbk-cta-block{
  margin-top:8px; padding:10px 14px; border-radius:12px; line-height:1.45; font-weight:600;
  background: var(--bb-accent); color: var(--bb-on-accent);
}


/* "Rekomendasi Wepeka" (js/views/brand-guidelines.js recoCardHTML) — an
   option next to the owner's own choices, never pre-applied. */
.bg-reco{ display:flex; flex-direction:column; gap:10px; align-items:flex-start; padding:12px 14px; margin:0 0 16px; border:1px dashed color-mix(in srgb, var(--accent) 55%, transparent); border-radius: var(--radius-md); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.bg-reco.is-applied{ border-style:solid; }
.bg-reco-head{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:12.5px; color: var(--accent); }
.bg-reco-head span{ color: var(--text-muted); }
.bg-reco-body{ width:100%; }
.bg-reco-applied{ display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:700; color: var(--health-good, var(--accent)); }
.bg-reco-tone{ display:flex; flex-wrap:wrap; gap:6px; }
.bg-reco-tone span{ font-size:12px; padding:3px 9px; border-radius:999px; background: var(--surface-2, var(--surface)); }
.bg-reco-missing{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:12px; color: var(--text-faint); margin:0 0 14px; }
.bg-reco-inline{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:12px; color: var(--text-muted); margin:0 0 8px; }
.bg-reco-inline svg{ color: var(--accent); }
.checkbox-chip.is-reco{ border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.bg-reco-badge{ margin-left:6px; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; color: var(--accent); }
/* Mockup text never spills out of its frame, whatever the tagline length. */
.bb-mock-clamp{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; }
.bb-mock-clamp-2{ -webkit-line-clamp:2; }
.bb-mockup-website-body{ padding:12px 14px; }
.bb-mockup-ad{ aspect-ratio:1.7; padding:12px 14px; }
.bb-mockup-ad .bb-mockup-cta{ white-space:nowrap; font-size:10px; padding:6px 10px; }

/* Creator: status as a picker (any direction), and the "Sudah terbit" card. */
.cr-status-select{ display:inline-flex; align-items:center; gap:6px; }
.cr-status-select .status-dot{ width:8px; height:8px; border-radius:50%; background: currentColor; flex:none; }
.cr-status-select .select{ width:auto; padding:5px 28px 5px 10px; font-size:12.5px; font-weight:700; border-radius:999px; min-height:0; }
.cr-published{ margin:0 0 18px; border:1px solid color-mix(in srgb, var(--health-good, #16a34a) 40%, transparent); }
.cr-published-head{ display:flex; align-items:center; gap:8px; margin-bottom:12px; font-size:13px; }
.cr-published-head svg{ color: var(--health-good, #16a34a); }
/* Script talk opened from Creator's AI writer dialog: the chat sits above it. */
.consultant-panel.is-above-modal{ z-index:80; }
/* Beranda · Jadwal berikutnya: the one place late pieces are listed and moved. */
.home-late-bar{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; padding:10px 12px; margin-bottom:6px; border-radius: var(--radius-md); background: var(--health-poor-soft); color: var(--health-poor); font-size:13px; font-weight:600; }