/* CSS for Kalam */
:root {
  /* Kalam visual system v2 (owner overhaul brief 2026-09-13) - dark.
     Existing var names are the compatibility layer; new aliases below. */
  accent-color: var(--accent);
  --studio-sel: #E8E6E1; /* neutral 'chosen' indicator on Studio - never the accent */
  --nav-active-bg: #252523;
  --sidebar-bg: #1B1B1A;
  --bg: #0A0A0A; /* owner 2026-10-04: every page uses the Create/Mirror shade */
  --surface: #20201E;
  --surface2: #252523;
  --surface-hover: #2B2B29;
  --surface-elevated: #292927;
  --border: rgba(255,255,255,0.11);
  --border-subtle: rgba(255,255,255,0.07);
  --border-strong: rgba(255,255,255,0.18);
  --border-hover: rgba(255,255,255,0.18);
  --accent: #3B96F0;
  --accent-dim: #2F7FD0;
  --accent-text: #3B96F0;
  --accent-fg: #fff;
  --accent-glow: rgba(59,150,240,0.14);
  --text: #F4F4F1;
  --text-dim: #A8A8A1;
  --text-muted: #7F7F79;
  --text-disabled: #5F5F5A;
  --shadow-small: 0 1px 2px rgba(0,0,0,0.25);
  --shadow-medium: 0 8px 28px rgba(0,0,0,0.35);
  --shadow-floating: 0 18px 50px rgba(0,0,0,0.5);
  --ease: cubic-bezier(0.22,1,0.36,1);
  --danger: #e05040;
  --success: #50b060;
  --sidebar-w: 240px;
  /* Performance state tokens — used by analytics post rows + drawer insight.
     "Low" is intentionally muted (no red) so the user feels signal, not shame. */
  --perf-high-bg: rgba(16,185,129,0.08);
  --perf-high-border: rgba(16,185,129,0.35);
  --perf-high-text: #10b981;
  --perf-avg-bg: rgba(255,255,255,0.02);
  --perf-avg-border: rgba(255,255,255,0.08);
  --perf-avg-text: rgba(255,255,255,0.6);
  --perf-low-bg: rgba(255,255,255,0.01);
  --perf-low-border: rgba(255,255,255,0.05);
  --perf-low-text: rgba(255,255,255,0.4);
}
html.light {
  --studio-sel: #2E2E2B; /* charcoal chosen-state on Studio */
  accent-color: var(--accent);
  /* Warm neutrals (the critique of 2026-10-13: fewer colors, used
     consistently): page #FAFAF8, sidebar #F5F5F2, borders #E8E8E4, white
     surfaces. The muted text keeps its contrast (#6B6B66 on #FAFAF8 is
     5:1; the suggested #777773 fell under 4.5:1 for small text). */
  --nav-active-bg: #EDEDE9;
  --sidebar-bg: #F5F5F2;
  --bg: #FAFAF8;
  --surface: #FFFFFF;
  --surface2: #F3F3F0;
  --surface-hover: #EDEDE9;
  --surface-elevated: #FFFFFF;
  --border: #E8E8E4;
  --border-subtle: #EEEEEA;
  --border-strong: #CFCFC8;
  --border-hover: #CFCFC8;
  --accent: #0071E3;
  --accent-dim: #005BB5;
  --accent-text: #005BB5;
  --accent-glow: rgba(0,113,227,0.10);
  --text: #2D2D2B;
  --text-dim: #6B6B66;
  --text-muted: #6B6B66;
  --text-disabled: #B4B4AE;
  --shadow-small: 0 1px 2px rgba(25,25,22,0.05);
  --shadow-medium: 0 8px 28px rgba(25,25,22,0.09);
  --shadow-floating: 0 18px 50px rgba(25,25,22,0.14);
  --danger: #c03030;
  --success: #308040;
  /* Light-mode perf tokens — same hierarchy, swapped to dark-on-light values. */
  --perf-high-bg: rgba(16,185,129,0.10);
  --perf-high-border: rgba(16,185,129,0.45);
  --perf-high-text: #0e7a5a;
  --perf-avg-bg: rgba(0,0,0,0.02);
  --perf-avg-border: rgba(0,0,0,0.08);
  --perf-avg-text: rgba(0,0,0,0.55);
  --perf-low-bg: rgba(0,0,0,0.01);
  --perf-low-border: rgba(0,0,0,0.05);
  --perf-low-text: rgba(0,0,0,0.38);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
*:focus:not(:focus-visible){outline:none !important;box-shadow:none !important;-webkit-tap-highlight-color:transparent}
button:focus:not(:focus-visible),a:focus:not(:focus-visible){outline:none !important;box-shadow:none !important;-webkit-tap-highlight-color:transparent}
/* Accessibility (overhaul brief): real focus rings for keyboard users,
   honored reduced motion. Outlines are suppressed ONLY for non-keyboard
   focus above; the :is() form outranks any legacy element:focus reset. */
/* Text-entry surfaces (inputs, textareas, contenteditable) always
   match :focus-visible in browsers, so the accent ring drew around
   every text box on click. Owner 2026-09-16: a text box shows ONLY
   the caret - the ring stays for keyboard focus on controls. */
:focus-visible:not(input):not(textarea):not(select):not([contenteditable="true"]):not(.ds-blk-editing){outline:2px solid var(--accent) !important;outline-offset:2px !important;transition-property:background,background-color,border-color,color,box-shadow,opacity,transform !important}
:is(input,textarea,select,[contenteditable="true"],.ds-blk-editing):focus-visible{outline:none !important;box-shadow:none !important}
html.credits-hidden #creditsRing,html.credits-hidden #settingsImageCreditsRow,html.credits-hidden #settingsGensRow,html.credits-hidden .gen-counter-bar,html.credits-hidden #studioCreditsPill{display:none !important}
/* Faceless Million readers (plan FM, owner 2026-10-12): the sidebar holds the library and the account row alone; on a phone only More, which opens that sidebar. */
/* Signed-in boot from the device cache: the sidebar waits (hidden) until
   the account's plan and doors are known, so a reader never sees Kalam's
   whole menu flash before the library (owner 2026-10-13). */
html.k-nav-wait #navSidebar .nav-scroll,html.k-nav-wait #mobTabbar{visibility:hidden}
html.plan-fm .nav-home-wrap,html.plan-fm .nav-section:not(#navLearn),html.plan-fm #navLearn .nav-section-header,html.plan-fm #navLearn .nav-item:not([data-page="learn"]),html.plan-fm .mob-tab:not([data-page="more"]),html.plan-fm #genCounter{display:none !important}
/* The doors beside the plan (owner 2026-10-12, api/_access.js): a reader whose list carries a door sees that tab beside the library, and nothing else of its section. */
html.plan-fm.access-media #navAdvanced,html.plan-fm.access-brand #navBonuses,html.plan-fm.access-bootcamp #navBonuses{display:block !important}
/* Ask an Ustadha as a door of its own (owner 2026-10-20, "give her access just to ask an ustadha"): a Free or FM account with the door sees that one tab of Learn. */
html.plan-fm.access-ustadha #navLearn .nav-item[data-page="ustadha"]{display:flex !important}
html.plan-free.access-ustadha #navLearn,html.plan-free.access-academy #navLearn,html.plan-free.access-saved #navCreate{display:block !important}
html.plan-free #navCreate .nav-section-header,html.plan-free #navCreate .nav-item{display:none !important}
html.plan-free.access-saved #navCreate .nav-item[data-page="saved"],html.plan-free.access-academy #navLearn .nav-item[data-page="learn"]{display:flex !important}
html.plan-free #navLearn .nav-section-header,html.plan-free #navLearn .nav-item{display:none !important}
html.plan-free.access-ustadha #navLearn .nav-item[data-page="ustadha"]{display:flex !important}
html.plan-fm #navAdvanced .nav-section-header,html.plan-fm #navBonuses .nav-section-header,html.plan-fm #navAdvanced .nav-item,html.plan-fm #navBonuses .nav-item{display:none !important}
html.plan-fm.access-media #navAdvanced .nav-item[data-page="broll"]{display:flex !important}
/* Custom Brand Build and Boot Camp follow their doors for every plan
   (owner 2026-10-15: "when I did both... only the bootcamp showed up").
   html.access-brand comes from the account's access list, the server's
   brand answer, or admin (_kApplyAccessUI). */
html.access-brand #navBonuses .nav-item[data-page="custom-brand"]{display:flex !important}
#navBonuses .nav-item[data-page="bootcamp"]{display:none}
html.access-bootcamp #navBonuses .nav-item[data-page="bootcamp"]{display:flex !important}
/* A complimentary plan sees both bonus tabs locked (owner 2026-11-02): the tap opens the locked screen with the checkout. */
html.plan-credit #navBonuses,html.plan-credit #navBonuses .nav-item[data-page="bootcamp"],html.plan-credit #navBonuses .nav-item[data-page="custom-brand"]{display:flex !important}
html.plan-credit #navBonuses{display:block !important}
html.plan-credit:not(.access-bootcamp) #navBonuses .nav-item[data-page="bootcamp"]>span:last-of-type:after,html.plan-credit:not(.access-brand) #navBonuses .nav-item[data-page="custom-brand"]>span:last-of-type:after{content:'';display:inline-block;width:9px;height:11px;margin-inline-start:.45rem;vertical-align:-1px;border:1.5px solid currentColor;border-radius:2px;box-shadow:inset 0 -5px 0 0 currentColor;opacity:.55}
html.plan-credit:not(.access-bootcamp) #navBonuses .nav-item[data-page="bootcamp"],html.plan-credit:not(.access-brand) #navBonuses .nav-item[data-page="custom-brand"]{opacity:.75}
/* Free accounts (owner 2026-10-15: "A free user should not be able to see
   the home tab... Kalam demos... media library, storefront, community, ask
   an ustadha, academy, any of the programs... unless we granted them
   access"). html.plan-free (set by _kApplyFreeUI: signed in, no paid plan,
   not FM, not admin) hides every section, Home, Demos and search; a
   granted door shows that one tab. Settings stays on the account row. */
html.plan-free .nav-home-wrap,html.plan-free .nav-section,html.plan-free .mob-tab:not([data-page="more"]),html.plan-free #genCounter{display:none !important}
html.plan-free.access-media #navAdvanced,html.plan-free.access-brand #navBonuses,html.plan-free.access-bootcamp #navBonuses{display:block !important}
html.plan-free #navAdvanced .nav-section-header,html.plan-free #navAdvanced .nav-item,html.plan-free #navBonuses .nav-section-header,html.plan-free #navBonuses .nav-item{display:none !important}
html.plan-free.access-media #navAdvanced .nav-item[data-page="broll"],html.plan-free.access-brand #navBonuses .nav-item[data-page="custom-brand"],html.plan-free.access-bootcamp #navBonuses .nav-item[data-page="bootcamp"]{display:flex !important}
/* Reels is still being tested (owner 2026-10-12): the tab shows for admins and flagged test devices only. */
html.reels-off .nav-item[data-page="reels"]{display:none !important}
.bv-opt{display:inline-block;margin-inline-start:0.4rem;padding:0.08rem 0.45rem;border-radius:999px;border:1px solid var(--border);font-size:0.62rem;font-weight:600;letter-spacing:0.04em;color:var(--text-muted);vertical-align:middle}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}
html.reduce-motion *,html.reduce-motion *::before,html.reduce-motion *::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}
/* Reduce-motion EXEMPTIONS (owner 2026-10-01): the status shimmers and
   mirror glints are slow luminance sweeps, not vestibular motion, and they
   signal "Kalam is working" - freezing them read as the app being broken.
   Class specificity beats the * kill rules above. */
@media (prefers-reduced-motion:reduce){
.stream-label-text{animation-duration:2.2s !important;animation-iteration-count:infinite !important}
.kb-shimmer{animation-duration:1.4s !important;animation-iteration-count:infinite !important}
.sg-shim{animation-duration:1.6s !important;animation-iteration-count:infinite !important}
.mirror-onboarding::before,.loading-card::before{animation-duration:5s !important;animation-iteration-count:infinite !important}
}
html.reduce-motion .stream-label-text{animation-duration:2.2s !important;animation-iteration-count:infinite !important}
html.reduce-motion .kb-shimmer{animation-duration:1.4s !important;animation-iteration-count:infinite !important}
html.reduce-motion .sg-shim{animation-duration:1.6s !important;animation-iteration-count:infinite !important}
html.reduce-motion .mirror-onboarding::before,html.reduce-motion .loading-card::before{animation-duration:5s !important;animation-iteration-count:infinite !important}
/* Visual system v2 stage 2 - shared primitives. New surfaces use these
   instead of ad-hoc inline styles; existing high-traffic classes below are
   tuned to the same recipe. */
.k-btn{display:inline-flex;align-items:center;justify-content:center;gap:0.45rem;height:36px;padding:0 0.95rem;border-radius:9px;border:1px solid transparent;font-family:inherit;font-size:0.9rem;font-weight:500;line-height:1;cursor:pointer;white-space:nowrap;user-select:none;transition:background 0.15s var(--ease),border-color 0.15s var(--ease),color 0.15s var(--ease),opacity 0.15s var(--ease)}
.k-btn:disabled{opacity:0.4;cursor:not-allowed}
.k-btn-primary{background:var(--accent);color:var(--accent-fg,#fff)}
.k-btn-primary:hover:not(:disabled){background:var(--accent-dim)}
.k-btn-dark{background:var(--text);color:var(--surface)}
.k-btn-dark:hover:not(:disabled){opacity:0.88}
.k-btn-secondary{background:var(--surface);border-color:var(--border);color:var(--text)}
.k-btn-secondary:hover:not(:disabled){background:var(--surface-hover);border-color:var(--border-strong)}
.k-btn-ghost{background:transparent;color:var(--text-dim)}
.k-btn-ghost:hover:not(:disabled){background:var(--surface-hover);color:var(--text)}
.k-btn-danger{background:transparent;border-color:var(--border);color:var(--danger)}
.k-btn-danger:hover:not(:disabled){border-color:var(--danger);background:rgba(224,80,64,0.08)}
.k-input{width:100%;background:var(--surface);border:1px solid var(--border);border-radius:9px;padding:0.55rem 0.75rem;font-family:inherit;font-size:0.92rem;color:var(--text);transition:border-color 0.15s var(--ease)}
.k-input::placeholder{color:var(--text-muted)}
.k-input:focus{border-color:var(--border)}
.k-chip{display:inline-flex;align-items:center;gap:0.35rem;height:28px;padding:0 0.7rem;border-radius:999px;border:1px solid var(--border);background:transparent;color:var(--text-dim);font-family:inherit;font-size:0.8rem;font-weight:500;cursor:pointer;white-space:nowrap;transition:border-color 0.15s var(--ease),color 0.15s var(--ease),background 0.15s var(--ease)}
.k-chip:hover{border-color:var(--border-strong);color:var(--text)}
.k-chip.active{background:var(--text);border-color:var(--text);color:var(--surface)}
.k-card{background:var(--surface);border:1px solid var(--border-subtle);border-radius:12px;box-shadow:var(--shadow-small)}
/* The Muslim Creative portal cards (Academy). Owner 2026-09-29: premium
   Apple-style cards; a locked item reads "Releasing <its release>" (the PDFs: October 2026). */
.tmc-card{position:relative;background:#111111;border:1px solid #262626;border-radius:18px;padding:1.25rem 1.25rem 1.1rem;cursor:pointer;transition:transform 0.22s cubic-bezier(0.22,1,0.36,1),box-shadow 0.22s;box-shadow:0 2px 14px rgba(0,0,0,0.25)}
.tmc-card:hover{transform:translateY(-4px);box-shadow:0 14px 40px rgba(0,0,0,0.35)}
.tmc-chip{display:inline-flex;align-items:center;gap:0.32rem;font-size:0.6rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:#a8a8a8;background:#1b1b1b;border:1px solid #2e2e2e;border-radius:999px;padding:0.22rem 0.6rem}
/* Media Library tiles and the clip viewer (owner 2026-10-11) */
.broll-tile{border-radius:14px;overflow:hidden;background:var(--surface);border:1px solid var(--border)}
.broll-media{position:relative;cursor:pointer;background:var(--surface2,#111);overflow:hidden;outline:none}
.broll-media:focus-visible{box-shadow:inset 0 0 0 2px var(--accent)}
.broll-media>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.6s cubic-bezier(0.22,1,0.36,1)}
.broll-media:hover>img{transform:scale(1.04)}
.broll-media>video.broll-peek{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000;opacity:0;transition:opacity 0.35s}
.broll-media>video.broll-peek.on{opacity:1}
.broll-badge{position:absolute;bottom:0.45rem;right:0.45rem;display:inline-flex;align-items:center;gap:0.25rem;background:rgba(0,0,0,0.55);color:#fff;font-size:0.66rem;font-weight:600;padding:0.16rem 0.45rem;border-radius:6px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);pointer-events:none}
/* The simpler library (owner's mockup 2026-10-12): a search, category chips
   with counts, a sort, grid or list, a favorite mark on every tile. */
.broll-wrap{flex:1;overflow-y:auto;padding:1.2rem 1.4rem 3rem;max-width:1100px;margin:0 auto;width:100%;box-sizing:border-box}
.broll-search{display:flex;align-items:center;gap:0.45rem;border:1px solid var(--border);border-radius:999px;padding:0.42rem 0.85rem;background:var(--surface);width:min(340px,100%);color:var(--text-muted);box-sizing:border-box}
.broll-search svg{width:15px;height:15px;flex-shrink:0}
.broll-search input{border:none;background:none;outline:none;font:inherit;font-size:0.85rem;color:var(--text);width:100%;min-width:0;padding:0}
.broll-bar{display:flex;align-items:flex-start;justify-content:space-between;gap:0.8rem;margin-bottom:1.1rem;flex-wrap:wrap}
.broll-chips{display:flex;gap:0.35rem;flex-wrap:wrap;flex:1;min-width:0}
.broll-chip{padding:0.38rem 0.85rem;border-radius:999px;border:1px solid var(--border);background:transparent;color:var(--text-muted);font-size:0.78rem;font-weight:600;font-family:inherit;cursor:pointer;display:inline-flex;gap:0.35rem;align-items:center}
.broll-chip .n{opacity:0.6;font-weight:500}
.broll-chip.on{background:var(--text);color:var(--surface);border-color:var(--text)}
.broll-tools{display:flex;gap:0.45rem;align-items:center;flex-shrink:0}
.broll-tools select{border:1px solid var(--border);border-radius:999px;padding:0.38rem 0.8rem;background:var(--surface);color:var(--text);font:inherit;font-size:0.78rem;font-weight:600;cursor:pointer}
.broll-viewtog{display:inline-flex;flex:none;border:1px solid var(--border);border-radius:999px;overflow:hidden}
.broll-viewtog button{flex:none;min-width:34px;border:none;background:none;padding:0.38rem 0.6rem;color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center}
/* The global select rule is width:100%; inside this row that pushed the view
   switch past the page edge and made the whole library scroll sideways. */
.broll-tools select{flex:none;width:auto}
.broll-viewtog button.on{background:var(--text);color:var(--surface)}
.broll-viewtog svg{width:14px;height:14px}
.broll-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:0.9rem}
.broll-tile{position:relative}
.broll-meta{padding:0.55rem 0.65rem 0.65rem}
.broll-title{font-size:0.82rem;font-weight:600;color:var(--text);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.broll-tags{display:flex;gap:0.3rem;flex-wrap:wrap;margin-top:0.4rem}
.broll-tag{font-size:0.66rem;color:var(--text-muted);background:var(--surface2);border-radius:5px;padding:0.1rem 0.4rem}
.broll-fav{position:absolute;top:0.4rem;right:0.4rem;z-index:2;width:30px;height:30px;border-radius:50%;border:none;background:rgba(0,0,0,0.45);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0.85;transition:transform .15s,opacity .15s;padding:0}
.broll-fav:hover{opacity:1;transform:scale(1.06)}
.broll-fav svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.broll-fav.on svg{fill:currentColor}
.broll-grid.list{grid-template-columns:1fr;gap:0.5rem}
.broll-grid.list .broll-tile{display:flex;align-items:center;gap:0.8rem;padding:0.45rem 0.6rem 0.45rem 0.45rem}
.broll-grid.list .broll-media{width:64px;height:64px;aspect-ratio:1/1!important;border-radius:9px;flex-shrink:0}
.broll-grid.list .broll-badge{bottom:0.25rem;right:0.25rem;font-size:0.6rem;padding:0.1rem 0.3rem}
.broll-grid.list .broll-meta{padding:0;flex:1;min-width:0;display:flex;align-items:center;gap:0.8rem;flex-wrap:wrap}
.broll-grid.list .broll-tags{margin-top:0}
.broll-grid.list .broll-fav{position:static;background:none;color:var(--text);opacity:0.7;width:34px;height:34px;backdrop-filter:none;-webkit-backdrop-filter:none;flex-shrink:0}
.broll-none{text-align:center;padding:3rem 1rem;color:var(--text-muted);font-size:0.9rem;line-height:1.6}
/* Home and the sidebar's search (owner's Home concept, 2026-10-12) */
/* The search row (owner 2026-10-13: "a borderless search trigger that opens
   a ⌘K command palette... search should feel like part of the navigation,
   not a separate component sitting on top of it"): transparent, 36px, the
   section's inset, a hover tint, the shortcut as plain muted text. */
.nav-home-wrap{padding:0.6rem 0.5rem 0.4rem}
.nav-search{display:flex;align-items:center;gap:0.55rem;width:100%;height:36px;border:none;border-radius:8px;background:none;color:var(--text-muted);padding:0 12px;font:inherit;font-size:13px;font-weight:500;cursor:pointer;margin:0 0 0.15rem;text-align:left;box-sizing:border-box;transition:background .12s,color .12s}
.nav-search:hover,.nav-search:focus-visible{background:var(--nav-active-bg,var(--surface-hover));color:var(--text)}
.nav-search svg{width:16px;height:16px;flex-shrink:0;opacity:0.8}
.nav-search span{flex:1;min-width:0;overflow:hidden;white-space:nowrap}
.nav-search kbd{font:inherit;font-size:11px;font-weight:500;color:var(--text-muted);opacity:0.85;letter-spacing:0.04em;border:none;background:none;padding:0}
.nav-sidebar.collapsed-nav .nav-search{display:none}
.nav-beta{margin-left:0.45rem;font-size:0.58rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;padding:0.12rem 0.42rem;border-radius:999px;border:1px solid var(--border);color:var(--text-muted);line-height:1.4}
.nav-sidebar.collapsed-nav .nav-beta{display:none}
/* Home, the minimal page (owner 2026-10-13, the seven-point critique: no
   decorative card, no subtitle, compact actions, a borderless recent list,
   the Roadmap as one row, the ayah of the day on top). One column, 720px. */
/* HOME — three zones (owner 2026-10-15): hero (greeting + composer +
   quick actions) near the top, Recent work right below, the ayah as an
   editorial signature at the end. Fit the whole thing in one viewport
   on a desktop (owner 2026-10-15: "Continue working and the Quran ayah
   should be there when I land. It has to fit better") — the hero sits
   at a comfortable top offset instead of claiming the full viewport, so
   the three zones stack and read without a scroll. Mobile scrolls
   naturally. */
.home-wrap{max-width:720px;margin:0 auto;padding:0 1.6rem 2rem;width:100%;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;min-height:calc(100vh - 2rem)}
.home-hero{display:flex;flex-direction:column;align-items:stretch;padding:0;box-sizing:border-box}
.home-kit-notice{display:flex;align-items:center;gap:0.7rem;width:100%;margin:0 0 1.1rem;padding:0.75rem 0.95rem;border:1px solid var(--border-subtle);border-radius:14px;background:var(--surface);color:var(--text);font:inherit;font-size:0.92rem;cursor:pointer;text-align:left;box-shadow:var(--shadow-card,0 1px 2px rgba(0,0,0,.05))}.home-kit-notice img{width:28px;height:28px;border-radius:50%;flex:none}.home-kit-notice .t{font-weight:600}.home-kit-notice .s{color:var(--accent);margin-left:auto;font-size:0.85rem;white-space:nowrap;display:inline-flex;align-items:center;gap:0.2rem}.home-kit-notice .s svg{width:14px;height:14px}
.home-ayah-foot{padding:1.4rem 0 0;text-align:center}
.home-ayah-foot .home-ayah{display:inline-block;max-width:580px;margin:0 auto;text-align:center}
.home-ayah-foot .home-ayah .t{display:block;font-size:0.95rem;opacity:0.72}
.home-ayah-foot .home-ayah .r{display:block;margin:0.3rem 0 0;font-size:0.7rem;letter-spacing:0.06em;text-transform:uppercase;opacity:0.55}
.home-top{display:flex;align-items:center}
.home-ayah{display:block;margin-top:2.4rem;text-decoration:none;color:var(--text);line-height:1.55;border-radius:8px;outline-offset:4px}
.home-ayah .t{font-family:Georgia,serif;font-style:italic;font-size:1.08rem;color:var(--text);opacity:0.82;transition:opacity .15s}
.home-ayah .r{display:inline-block;margin-left:0.5rem;font-size:0.74rem;color:var(--text-muted);white-space:nowrap;letter-spacing:0.01em}
.home-ayah:hover .t{opacity:1}
/* Greeting (owner 2026-10-15: "30-34px, with more breathing room beneath")
   — Georgia (owner 2026-10-31: app headings stay Georgia), no logo, generous space below so the composer feels
   like the next intentional beat. */
.home-h1{font-family:Georgia,serif;font-weight:400;font-size:clamp(1.75rem,2.4vw,2.05rem);line-height:1.15;letter-spacing:-0.01em;color:var(--text);margin:0 0 1.9rem;text-align:center}
/* The headline is the Kalam mark and "Salam, <first name>", nothing else
   (owner 2026-10-13: "put the Kalam logo and then say Salam, [first name],
   and that's it"). The box's hint fades between things Kalam can do. */
.home-ph{position:absolute;left:1.1rem;right:3.4rem;top:1.1rem;font-size:0.98rem;line-height:1.5;color:var(--text-muted);opacity:0.7;pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .18s ease}
.home-ph.out{opacity:0}
.home-ph.hide{display:none}
@media (prefers-reduced-motion:reduce){.home-ph{transition:none}}
/* Composer (owner 2026-10-15: ~680-720px wide, 120-140px tall, 16-18px
   radius, barely-visible border, subtle focus change — not a glow).
   Width is set by .home-wrap's max-width (720px); height comes from the
   textarea's min-height. */
.home-composer{border:1px solid var(--border-subtle);border-radius:17px;background:var(--surface);padding:1.1rem 1.2rem 0.75rem;position:relative;transition:border-color .18s ease}
.home-composer:focus-within{border-color:var(--border)}
.home-composer textarea{width:100%;border:none;background:none;resize:none;outline:none;font:inherit;font-size:0.98rem;color:var(--text);min-height:88px;max-height:260px;line-height:1.55;box-sizing:border-box;padding:0}
.home-composer-row{display:flex;align-items:center;justify-content:space-between;gap:0.5rem;margin-top:0.4rem}
.home-mode{display:inline-flex;align-items:center;gap:0.35rem;border:1px solid var(--border);border-radius:9px;padding:0.3rem 0.65rem;background:none;color:var(--text);font:inherit;font-size:0.8rem;font-weight:500;cursor:pointer}
.home-mode:hover{background:var(--surface2)}
.home-mode svg{width:12px;height:12px}
.home-mode-menu{position:absolute;left:1rem;bottom:3.2rem;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-medium);padding:0.35rem;min-width:220px;z-index:5}
.home-mode-menu button{display:flex;flex-direction:column;align-items:flex-start;width:100%;border:none;background:none;text-align:left;padding:0.5rem 0.65rem;border-radius:8px;cursor:pointer;font:inherit;color:var(--text)}
.home-mode-menu button:hover,.home-mode-menu button[aria-checked="true"]{background:var(--surface2)}
.home-mode-menu button small{color:var(--text-muted);font-size:0.72rem}
.home-send{width:34px;height:34px;border-radius:9px;border:none;background:var(--text);color:var(--surface);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.home-send:disabled{opacity:0.3;cursor:default}
.home-send svg{width:16px;height:16px}
/* Quick actions (owner 2026-10-15: "more spacing, smaller icons, and a
   subtle hover background" — suggestions, not four competing buttons).
   Centered under the composer. */
.home-actions{display:flex;flex-wrap:wrap;gap:0.4rem 0.6rem;margin:1.1rem 0 0;justify-content:center}
.home-action{display:inline-flex;align-items:center;gap:0.5rem;border:none;background:none;border-radius:8px;padding:0.5rem 0.75rem;font:inherit;font-size:0.84rem;font-weight:500;color:var(--text-muted);cursor:pointer;transition:background .18s ease,color .18s ease}
.home-action:hover,.home-action:focus-visible{background:var(--surface2);color:var(--text)}
.home-action svg{width:14px;height:14px;opacity:0.75}
/* Recent work (owner 2026-10-15: understated rows, no heavy cards; sits
   close enough below the hero to be visible on first paint — the whole
   page fits in one viewport on a desktop). */
.home-sec{margin-top:2.2rem}
.home-sec-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:0.3rem}
.home-sec-h h2{font-size:0.8rem;font-weight:500;margin:0;color:var(--text-muted);letter-spacing:0.01em}
.home-list{display:flex;flex-direction:column}
.home-item{display:flex;align-items:center;position:relative;border-top:1px solid var(--border-subtle)}
.home-item:last-child{border-bottom:1px solid var(--border-subtle)}
.home-item .open{flex:1;min-width:0;display:flex;align-items:center;gap:0.7rem;border:none;background:none;text-align:left;padding:0.62rem 0.4rem;margin:0 -0.4rem;border-radius:8px;font:inherit;color:var(--text);cursor:pointer;transition:background .18s ease}
.home-item:hover .open,.home-item .open:focus-visible{background:var(--surface2)}
.home-item .th{width:20px;height:20px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--text-muted);opacity:0.7}
.home-item .th svg{width:14px;height:14px}
.home-item .tt{flex:1;min-width:0;font-size:0.88rem;font-weight:400;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.home-item .where{flex-shrink:0;width:88px;font-size:0.78rem;color:var(--text-muted)}
.home-item .ago{flex-shrink:0;width:60px;text-align:right;font-size:0.78rem;color:var(--text-muted);font-variant-numeric:tabular-nums}
.home-item .arrow{flex-shrink:0;width:16px;text-align:right;color:var(--text-muted);opacity:0;transition:opacity .12s}
.home-item:hover .arrow,.home-item:focus-within .arrow{opacity:1}
.home-item .more{border:none;background:none;color:var(--text-muted);cursor:pointer;font-size:1rem;line-height:1;padding:0.3rem 0.35rem;border-radius:6px;flex-shrink:0;opacity:0;transition:opacity .12s;margin-left:0.2rem}
.home-item:hover .more,.home-item:focus-within .more,.home-item .more[aria-expanded="true"]{opacity:1}
.home-item .more:hover{background:var(--surface2)}
@media (hover:none){.home-item .more,.home-item .arrow{opacity:0.55}}
.home-row-menu{position:absolute;right:0;top:2.5rem;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow-medium);padding:0.3rem;z-index:5}
.home-row-menu button{display:block;width:100%;border:none;background:none;text-align:left;padding:0.45rem 0.7rem;border-radius:7px;cursor:pointer;font:inherit;font-size:0.82rem;color:var(--text)}
.home-row-menu button:hover{background:var(--surface2)}
.home-more{margin:0.45rem 0 0 -0.4rem;background:none;border:none;color:var(--text-muted);font:inherit;font-size:0.82rem;cursor:pointer;padding:0.35rem 0.4rem;border-radius:6px}
.home-more:hover{color:var(--text);background:var(--surface2)}
.home-empty{padding:0.8rem 0;color:var(--text-muted);font-size:0.86rem;line-height:1.6;border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle)}
/* The Roadmap "Continue your Roadmap" row was removed from Home 2026-10-15
   (owner: "'Grow your audience' is a Roadmap task... keep progress inside
   Roadmap, where users already expect them"). The sidebar carries the way
   in; the home page's job is to start or continue a creation. */
/* The command palette (⌘K): 560 wide, the app's surface and border, 14px
   corners, a search line, Quick access and Recent (or the matches under
   Pages and Your work), Esc to close. */
.home-search{position:fixed;inset:0;z-index:9400;background:rgba(0,0,0,0.35);display:flex;align-items:flex-start;justify-content:center;padding:12vh 1rem 1rem}
.home-search-box{width:min(560px,100%);background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-floating);overflow:hidden}
.home-search-in{display:flex;align-items:center;gap:0.65rem;padding:0 1rem;border-bottom:1px solid var(--border);color:var(--text-muted)}
.home-search-in svg{width:16px;height:16px;flex-shrink:0}
#homeSearch .home-search-box input,#homeSearch .home-search-box input:focus{flex:1;min-width:0;border:none;border-radius:0;background:none;box-shadow:none;outline:none;padding:0.95rem 0;font:inherit;font-size:0.98rem;color:var(--text);box-sizing:border-box}
.home-search-list{max-height:52vh;overflow-y:auto;padding:0.5rem}
.home-search-sec{font-size:0.66rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-muted);padding:0.6rem 0.7rem 0.3rem}
.home-search-row{display:flex;align-items:center;gap:0.7rem;width:100%;min-height:36px;border:none;background:none;text-align:left;padding:0.4rem 0.7rem;border-radius:8px;cursor:pointer;font:inherit;font-size:0.9rem;color:var(--text)}
.home-search-row svg{width:16px;height:16px;flex-shrink:0;color:var(--text-muted)}
.home-search-row:hover,.home-search-row.sel{background:var(--surface2)}
.home-search-row small{color:var(--text-muted);font-size:0.74rem;margin-left:auto;flex-shrink:0}
.home-search-foot{display:flex;justify-content:flex-end;padding:0.5rem 1rem;border-top:1px solid var(--border-subtle);font-size:0.7rem;color:var(--text-muted);letter-spacing:0.02em}
@media (max-width:800px){.home-wrap{padding:0 1rem 6rem;min-height:0;justify-content:flex-start}.home-hero{padding:1.4rem 0 0}.home-h1{font-size:1.65rem;margin-bottom:1.4rem}.home-sec{margin-top:2rem}.home-ayah-foot{padding:1.4rem 0 1rem}.home-ayah-foot .home-ayah .t{font-size:0.9rem}.home-item .where{display:none}.broll-search{width:100%}}
.broll-viewer{position:fixed;inset:0;z-index:9500;background:rgba(0,0,0,0.94);animation:bvIn 0.18s ease}
@keyframes bvIn{from{opacity:0}to{opacity:1}}
.bv-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:3.4rem 4.6rem 4.8rem;box-sizing:border-box}
.bv-frame{position:relative;border-radius:14px;overflow:hidden;background:#000;box-shadow:0 30px 80px rgba(0,0,0,0.6);max-height:100%}
.bv-frame>img.bv-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0.5}
.bv-frame>video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;opacity:0;transition:opacity 0.3s}
.bv-frame>video.on{opacity:1}
.bv-frame>img.bv-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.bv-spin{position:absolute;left:50%;top:50%;width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%;border:2.5px solid rgba(255,255,255,0.25);border-top-color:#fff;animation:bvSpin 0.8s linear infinite}
@keyframes bvSpin{to{transform:rotate(360deg)}}
.bv-msg{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.7rem;padding:1.2rem;text-align:center;color:#eee;font-size:0.86rem;line-height:1.5;background:rgba(0,0,0,0.55)}
.bv-msg button,.bv-acts button{padding:0.5rem 1rem;border-radius:999px;border:1px solid rgba(255,255,255,0.35);background:rgba(255,255,255,0.1);color:#fff;font-family:inherit;font-size:0.8rem;font-weight:600;cursor:pointer}
.bv-acts button:first-child{background:#fff;color:#111;border-color:#fff}
.bv-x,.bv-nav{position:absolute;width:42px;height:42px;border-radius:50%;border:none;background:rgba(255,255,255,0.12);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;z-index:2}
.bv-x{top:1rem;right:1rem}
.bv-nav{top:50%;transform:translateY(-50%)}
.bv-prev{left:1rem}.bv-next{right:1rem}
.bv-x:hover,.bv-nav:hover,.bv-msg button:hover,.bv-acts button:not(:first-child):hover{background:rgba(255,255,255,0.24)}
.bv-x:focus-visible,.bv-nav:focus-visible,.bv-acts button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.bv-bar{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.4rem;padding-bottom:max(1rem,env(safe-area-inset-bottom));z-index:2}
.bv-name{color:rgba(255,255,255,0.7);font-size:0.8rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bv-acts{display:flex;gap:0.5rem;flex-shrink:0}
@media(max-width:800px){.bv-stage{padding:3.6rem 0.8rem 4.9rem}.bv-x,.bv-nav{width:36px;height:36px}.bv-prev{left:0.4rem}.bv-next{right:0.4rem}.bv-bar{padding:0.8rem 0.9rem;padding-bottom:max(0.8rem,env(safe-area-inset-bottom))}}
/* The hover card has room around the cover and its title (owner 2026-10-13:
   the highlight sat too close to the picture and the words in light mode).
   The negative margin keeps every cover on the grid where it was. */
.fm-cover{cursor:pointer;transition:transform 0.22s cubic-bezier(0.22,1,0.36,1),box-shadow 0.22s,background 0.22s;border-radius:16px;padding:8px 8px 10px;margin:-8px -8px -10px}
.fm-cover:hover{transform:translateY(-4px);background:var(--surface);box-shadow:0 12px 30px rgba(0,0,0,0.16)}
.fm-cover img{display:block;width:100%;border-radius:10px;border:1px solid var(--border);box-shadow:0 3px 14px rgba(0,0,0,0.14)}
.k-seg{display:inline-flex;gap:2px;background:var(--surface2);border:1px solid var(--border-subtle);border-radius:10px;padding:2px}
.k-seg-btn{border:none;background:transparent;color:var(--text-muted);padding:0.35rem 0.85rem;border-radius:8px;font-family:inherit;font-size:0.85rem;font-weight:500;cursor:pointer;transition:background 0.15s var(--ease),color 0.15s var(--ease)}
.k-seg-btn:hover{color:var(--text)}
.k-seg-btn.active{background:var(--surface-elevated);color:var(--text);box-shadow:var(--shadow-small)}
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
/* Until Firebase says who is here (html.boot-wait, set in the head): the
   logo alone, neither the app nor the sign-in screen. */
#bootSplash{display:none}
html.boot-wait #bootSplash{display:flex;flex:1 1 auto;align-items:center;justify-content:center;background:#ffffff}
html.boot-wait #bootSplash img{width:48px;height:48px;border-radius:12px;object-fit:cover}
html.boot-wait #appShell,html.boot-wait #landingPage{display:none !important}
body{background:var(--bg);color:var(--text);min-height:100dvh;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",sans-serif;font-weight:400;display:flex;font-size:16px;-webkit-font-smoothing:antialiased;position:relative}

.nav-sidebar{width:var(--sidebar-w);background:var(--sidebar-bg);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;height:100dvh;z-index:20;position:relative;overflow:hidden}
.nav-scroll{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;min-height:0}
.nav-scroll::-webkit-scrollbar{width:0;display:none}
/* Desktop scrollbars: every native bar is hidden and _kScrollbarsInit() draws
   a macOS-style pill (.ksb-thumb) instead, so all browsers look the same.
   Touch devices keep their native overlay scrollbars. */
@media (hover:hover) and (pointer:fine){
  *{scrollbar-width:none !important}
  *::-webkit-scrollbar{display:none !important;width:0 !important;height:0 !important}
}
.ksb-thumb{position:fixed;top:0;left:0;border-radius:4px;background:var(--text-muted);opacity:0;pointer-events:none;transition:opacity 0.25s;z-index:2147483000;touch-action:none}
.ksb-thumb.on{opacity:0.35;pointer-events:auto}
.ksb-thumb.on:hover,.ksb-thumb.drag{opacity:0.6}
.nav-spacer{display:none}
.nav-bottom{flex-shrink:0}.nav-logo{padding:1.1rem 1rem;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:0.6rem;justify-content:space-between}
.nav-logo-wrap{display:flex;align-items:center;gap:0.6rem}
.nav-logo-icon{width:28px;height:28px;border-radius:7px;background:transparent;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.nav-logo-icon svg{width:18px;height:18px;color:#fff}
.nav-logo h1{font-size:1.25rem;font-weight:600;color:var(--text);letter-spacing:-0.01em}
.nav-logo .ver{font-size:0.5rem;color:var(--text-muted);letter-spacing:0.06em;text-transform:uppercase;font-weight:500;margin-left:0.2rem}

.nav-section{padding:0 0.5rem}
.nav-section-header{display:flex;align-items:center;justify-content:space-between;padding:0.65rem 0.55rem 0.25rem;cursor:pointer;user-select:none}
/* Section headings sit back (2026-10-13): smaller, lighter, more air above. */
.nav-section-header{padding-top:0.9rem}
.nav-section-label{font-size:0.68rem;letter-spacing:0.03em;text-transform:none;color:var(--text-muted);font-weight:500;opacity:0.7}
.nav-section-chevron{width:14px;height:14px;color:var(--text-muted);transition:transform 0.15s;flex-shrink:0}
.nav-section.collapsed .nav-section-chevron{transform:rotate(-90deg)}
.nav-section-items{display:flex;flex-direction:column;gap:1px;overflow:hidden;max-height:600px;transition:max-height 0.2s}
.nav-section.collapsed .nav-section-items{max-height:0}
/* Section toggles are real buttons (keyboard + aria-expanded); same look. In
   the icon-only sidebar the empty header keeps its spacing but leaves the tab
   order. Focus rings sit inside the row because .nav-section-items clips. */
button.nav-section-header{background:none;border:0;width:100%;font-family:inherit;color:inherit;text-align:left}
.nav-sidebar.collapsed-nav .nav-section-header{visibility:hidden}
#navSidebar .nav-item:focus-visible,#navSidebar .nav-chat-item:focus-visible,#navSidebar .nav-section-header:focus-visible{outline-offset:-2px !important}
.nav-item{display:flex;align-items:center;gap:0.65rem;min-height:38px;padding:0 0.65rem;border-radius:8px;cursor:pointer;font-size:0.92rem;font-weight:400;color:var(--text);opacity:0.65;transition:background 0.15s var(--ease),opacity 0.15s var(--ease);border:none;background:none;width:100%;text-align:left;position:relative;font-family:inherit}
.nav-item:hover{background:var(--nav-active-bg,var(--surface));color:var(--text);opacity:1}
.nav-item.active{background:var(--nav-active-bg,var(--surface));color:var(--text);opacity:1;font-weight:500}
/* One icon family (2026-10-13): every sidebar icon at the same stroke and
   round caps, whatever its own attributes say (a style rule outranks a
   presentation attribute). */
.nav-item svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;opacity:0.7}
.nav-item.active svg{opacity:1}
.nav-badge{font-size:0.68rem;color:var(--text-muted);background:var(--surface2);border:1px solid var(--border-subtle);padding:0.14rem 0.38rem;border-radius:5px;margin-left:auto;font-weight:500;letter-spacing:0.02em}
/* A count on a tab (the admin's Custom Brand Build: briefs waiting). */
.nav-dot{display:none;width:8px;height:8px;border-radius:50%;background:var(--accent);margin-left:auto;flex:none}
html.brandkit-new #navCustomBrand .nav-dot{display:inline-block}
/* ── The student brand kit tab (owner 2026-10-19, HANDOFF.md): the sidebar item shows once users/{uid}.studentKit is published; a Free or FM student with a kit sees it beside the other doors. */
html.studentkit-new #navStudentKit .nav-dot{display:inline-block}
html.plan-fm.studentkit-on #navBonuses,html.plan-free.studentkit-on #navBonuses{display:block !important}
html.plan-fm.studentkit-on #navBonuses .nav-item[data-page="brandkit"],html.plan-free.studentkit-on #navBonuses .nav-item[data-page="brandkit"]{display:flex !important}
.sk-wrap{max-width:860px;margin:0 auto;padding:1.4rem 1.2rem 6rem}
.sk-wrap-prev{padding-top:0.6rem;padding-bottom:1rem}
.sk-head{margin-bottom:1.6rem}
.sk-title{font-family:Georgia,serif;font-weight:400;font-size:2.6rem;line-height:1.05;margin:0.2rem 0 0.2rem;color:var(--text)}
.sk-handle{font-size:0.95rem;color:var(--text-muted);margin-bottom:0.9rem}.sk-handle span{opacity:0.6}
.sk-manifesto{font-size:1.08rem;line-height:1.55;color:var(--text);margin:0 0 0.5rem;max-width:640px}
.sk-dls{display:flex;gap:0.6rem;flex-wrap:wrap;margin:1rem 0 0.9rem}
.sk-dl{height:42px;padding:0 1.2rem;border-radius:12px;font-size:0.9rem}
.sk-lede{font-size:1rem;color:var(--text-muted);line-height:1.6;margin:0.4rem 0 0.4rem;max-width:640px}
.sk-sec{margin-top:2.2rem;padding-top:1.6rem;border-top:1px solid var(--border)}
.sk-h2{font-family:Georgia,serif;font-weight:400;font-size:1.7rem;margin:0 0 0.7rem;color:var(--text)}
.sk-note,.sk-p{font-size:0.95rem;line-height:1.6;color:var(--text);margin:0 0 0.6rem}
.sk-note{color:var(--text-muted);font-size:0.9rem}
.sk-p a,.sk-list a,.sk-note a{color:var(--text);text-decoration:underline;text-underline-offset:2px}
.sk-list{margin:0 0 0.8rem;padding-left:1.25rem;font-size:0.95rem;line-height:1.6;color:var(--text)}.sk-list li{margin:0.2rem 0}
.sk-steps li{padding-left:0.2rem}
.sk-howto{margin-top:0.2rem}
.sk-ar{font-family:'Amiri','Noto Naskh Arabic',serif;font-size:1.18em;line-height:1.5;unicode-bidi:isolate}
.sk-lbl{font-size:0.72rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--text-muted);margin:0.9rem 0 0.35rem}
.sk-lbl:first-child{margin-top:0}
.sk-img,.sk-wide{display:block;max-width:100%;height:auto;border-radius:14px;border:1px solid var(--border)}
.sk-logos{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem;margin-top:0.4rem}
.sk-apply{border:1px solid var(--border);border-radius:14px;padding:1rem 1.1rem;background:var(--surface)}.sk-apply .sk-p{margin:0}.sk-apply-acts{display:flex;flex-wrap:wrap;gap:0.5rem;margin-top:0.8rem}.sk-apply-acts .k-btn{height:38px;padding:0 1rem}.sk-apply-wait{color:var(--text-muted)}
.sk-apply-box{width:min(480px,100%)}.sk-apply-grid{display:grid;grid-template-columns:96px 1fr;gap:0.9rem;align-items:center}.sk-apply-photo{width:96px;height:96px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;border:1px solid var(--border)}.sk-apply-photo img{width:72%;height:72%;object-fit:contain}
.sk-apply-sws{display:grid;grid-template-columns:1fr 1fr;gap:0.4rem 0.8rem;margin-top:0.3rem}.sk-apply-sw{display:flex;align-items:center;gap:0.45rem;font-size:0.85rem}.sk-apply-sw span:not(.sk-dot){color:var(--text-muted)}.sk-apply-sw b{font-weight:500;margin-left:auto;font-size:0.8rem}
.sk-apply-fonts{display:grid;grid-template-columns:1fr 1fr;gap:0.6rem;margin-top:0.3rem}.sk-apply-fonts span{display:block;font-size:0.72rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.05em}.sk-apply-fonts b{font-size:1.15rem;font-weight:500}.sk-apply-notes{margin-top:0.5rem}.sk-apply-box .kk-modal-acts .k-btn{height:38px;padding:0 1rem}
.sk-logo{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:18px;overflow:hidden;background:var(--surface);transition:border-color 0.15s}
.sk-logo.on{border-color:var(--text);box-shadow:0 0 0 1px var(--text)}
.sk-logo-img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;background:#f3efe9}
.sk-logo-none{display:flex}
.sk-logo-body{padding:0.9rem 1rem 1rem;display:flex;flex-direction:column;gap:0.5rem;flex:1}
.sk-logo-t{font-weight:700;color:var(--text);font-size:1rem}
.sk-logo-m{font-size:0.88rem;color:var(--text-muted);margin:0;flex:1}
.sk-logo-files{display:flex;gap:0.35rem;flex-wrap:wrap}
.sk-choose{height:40px;border-radius:11px;font-size:0.9rem;margin-top:0.2rem;border:1px solid var(--border)}
.sk-choose.k-btn-dark{border-color:var(--text)}
.sk-looks{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem;margin-top:1.4rem}
.sk-fig{margin:0}.sk-fig figcaption{font-size:0.84rem;color:var(--text-muted);margin-top:0.4rem}
.sk-board{margin-top:1rem}
.sk-row{margin-bottom:0.9rem}
.sk-copyrow{display:flex;gap:0.6rem;align-items:flex-start}
.sk-copyrow .ck-btn{flex:none}
.sk-biotext{flex:1;min-width:0;font-size:0.98rem;line-height:1.55;color:var(--text);padding:0.7rem 0.9rem;border:1px solid var(--border);border-radius:12px;background:var(--surface)}
.sk-pre{white-space:pre-line}
.sk-details{margin:0.6rem 0 0.9rem}.sk-details summary{cursor:pointer;font-size:0.9rem;color:var(--text-muted);padding:0.3rem 0}
.sk-swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:0.6rem}
.sk-swatch{display:flex;flex-direction:column;gap:0.3rem;text-align:left;border:1px solid var(--border);border-radius:12px;padding:0.5rem;background:var(--surface);color:var(--text);font:inherit;cursor:pointer}
.sk-swatch b{font-size:0.88rem}.sk-swatch span:not(.sk-chip){font-size:0.78rem;color:var(--text-muted);line-height:1.4}
.sk-chip{display:flex;align-items:flex-end;height:64px;border-radius:9px;font-size:0.72rem;font-family:ui-monospace,monospace;padding:0.35rem 0.45rem}
.sk-dot{display:inline-block;width:12px;height:12px;border-radius:50%;border:1px solid var(--border);vertical-align:-1px;margin-right:0.35rem}
.sk-table{margin:0.9rem 0}
.sk-fontlinks{display:flex;gap:0.8rem;flex-wrap:wrap;font-size:0.9rem;margin-bottom:0.6rem}
.sk-strategy{margin-bottom:0.6rem}
.sk-types{border:1px solid var(--border);border-radius:14px;padding:0.5rem 0.9rem;margin:0.4rem 0 1rem}
.sk-progress{font-size:0.84rem;color:var(--text-muted);margin:0.6rem 0 0.5rem}
.sk-weeks{display:flex;gap:0.35rem;flex-wrap:wrap;margin-bottom:0.6rem}
.sk-weekline{font-size:0.92rem;color:var(--text-muted);margin-bottom:0.8rem;line-height:1.5}.sk-weekline b{color:var(--text)}
.sk-days{display:flex;flex-direction:column;gap:0.6rem}
.sk-day{border:1px solid var(--border);border-radius:14px;background:var(--surface);padding:0.8rem 0.9rem}
.sk-day.done{opacity:0.72}
.sk-day-top{display:flex;gap:0.7rem;align-items:flex-start}
.sk-day-main{flex:1;min-width:0}
.sk-day-k{font-size:0.76rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.05em;font-weight:700;display:flex;gap:0.3rem;flex-wrap:wrap;align-items:center}
.sk-pill{text-transform:none;letter-spacing:0;font-weight:600;font-size:0.72rem;padding:0.05rem 0.5rem;border-radius:999px;border:1px solid var(--border);color:var(--text)}
.sk-type{text-transform:none;letter-spacing:0;font-weight:500}
.sk-day-hook{font-size:1rem;line-height:1.45;color:var(--text);margin-top:0.25rem}
.sk-day.done .sk-day-hook{text-decoration:line-through;text-decoration-color:var(--text-muted)}
.sk-more{flex:none;height:30px;padding:0 0.7rem;font-size:0.78rem}
.sk-day-body{margin-top:0.6rem;padding-top:0.6rem;border-top:1px dashed var(--border)}
.sk-day-body .sk-p,.sk-day-body .sk-list{font-size:0.9rem}
.sk-check{display:flex;gap:0.6rem;align-items:flex-start;cursor:pointer;font-size:0.95rem;line-height:1.55;color:var(--text);padding:0.35rem 0}
.sk-check input{width:18px;height:18px;margin:0.2rem 0 0;accent-color:var(--text);flex:none;cursor:pointer}
.sk-check.done span{color:var(--text-muted);text-decoration:line-through}
.sk-day-tick{padding:0.15rem 0 0}
.sk-checks{display:flex;flex-direction:column}
.sk-q{margin-bottom:1rem}.sk-q-q{font-weight:700;color:var(--text);margin-bottom:0.3rem;font-size:1rem}
.sk-adminprev{margin-top:1rem;border:1px dashed var(--border);border-radius:16px;padding:0.8rem}
.sk-row{grid-template-columns:56px 1fr auto}
.sk-problems{color:#b4452f}
.sk-x{background:none;border:0;color:var(--text-muted);cursor:pointer;font-size:1rem;line-height:1;padding:0 0.2rem}
.sk-notes{margin-top:1.4rem;border-top:1px solid var(--border);padding-top:1rem}
.sk-note-block{margin-bottom:1rem}
.sk-defs{display:block}.sk-defs dt{font-weight:600;font-size:0.84rem;margin-top:0.4rem;color:var(--text)}.sk-defs dd{margin:0.1rem 0 0.3rem 0.8rem}
.sk-day-acts{display:flex;gap:0.35rem;flex:none;align-items:flex-start}
.sk-make{height:30px;padding:0 0.7rem;font-size:0.78rem}
.sk-tpls{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem}
.sk-tpl{border:1px solid var(--border);border-radius:16px;overflow:hidden;background:var(--surface);display:flex;flex-direction:column}
.sk-tpl-ex{background:#eee9e1;width:100%}.sk-tpl-ex img{width:100%;height:100%;object-fit:cover;display:block}
.sk-tpl-body{padding:0.7rem 0.8rem 0.9rem;display:flex;flex-direction:column;gap:0.35rem}.sk-tpl-body b{font-size:0.95rem;color:var(--text)}.sk-tpl-body .sk-note{margin:0}.sk-tpl-body .ck-btn{align-self:flex-start;margin-top:0.2rem}
.sk-wrap-ed{max-width:1180px}
.sk-ed-top{display:flex;align-items:center;gap:0.9rem;flex-wrap:wrap;margin-bottom:1rem}
.sk-ed-title{display:flex;flex-direction:column;flex:1;min-width:0}.sk-ed-title b{font-size:1.05rem;color:var(--text)}.sk-ed-title span{font-size:0.8rem;color:var(--text-muted)}
.sk-ed-saved{font-size:0.8rem;color:var(--text-muted)}
.sk-ed-grid{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:1.4rem;align-items:start}
.sk-ed-form{display:flex;flex-direction:column;gap:0.9rem}
.sk-field label{display:block;font-size:0.82rem;font-weight:600;color:var(--text)}
.sk-field .cb-in{margin-top:0.3rem}
.sk-field-bool label{display:flex;gap:0.5rem;align-items:center;font-weight:500}
.sk-req{font-style:normal;font-weight:400;color:var(--text-muted);font-size:0.74rem;margin-left:0.3rem}
.sk-count{float:right;font-weight:400;color:var(--text-muted);font-size:0.74rem;font-variant-numeric:tabular-nums}
.sk-note-in{font-weight:400;color:var(--text-muted);font-size:0.74rem}
.sk-ed .cb-in.sk-rtl{direction:rtl;text-align:right;font-family:'Amiri','Noto Naskh Arabic',serif;font-size:1.15rem;line-height:1.7}
.sk-ed .cb-in.sk-urdu{font-family:'Noto Nastaliq Urdu','Amiri',serif;line-height:2}
.sk-fs{border:1px solid var(--border);border-radius:12px;padding:0.6rem 0.8rem 0.8rem;margin:0}.sk-fs legend{font-size:0.82rem;font-weight:600;color:var(--text);padding:0 0.3rem}
.sk-rows{display:flex;flex-direction:column;gap:0.6rem;margin-bottom:0.6rem}
.sk-row-item{display:grid;grid-template-columns:auto 1fr auto;gap:0.5rem;align-items:start}
.sk-row-n{font-size:0.78rem;color:var(--text-muted);padding-top:0.5rem;width:1.2rem}
.sk-row-fields{display:flex;flex-direction:column;gap:0.4rem}.sk-row-fields .sk-field label{font-size:0.76rem}.sk-row-fields .cb-in{margin-top:0.15rem;padding:0.45rem 0.65rem}
.sk-imgrow{display:flex;gap:0.6rem;align-items:center;flex-wrap:wrap;margin-top:0.3rem}.sk-imgthumb{width:64px;height:64px;object-fit:cover;border-radius:8px;border:1px solid var(--border)}
.sk-ed-acts{display:flex;gap:0.5rem;flex-wrap:wrap;margin-top:0.4rem}.sk-ed-acts .k-btn{height:40px;padding:0 1.1rem;border-radius:11px}
.sk-ed-prev{position:sticky;top:0.5rem}
.sk-ed-frame{position:relative;width:100%;overflow:hidden;border-radius:14px;border:1px solid var(--border);background:#f3efe9}
.sk-ed-frame iframe{position:absolute;left:0;top:0;border:0;transform-origin:0 0;background:#fff;pointer-events:none}
@media (max-width:900px){.sk-ed-grid{grid-template-columns:1fr}.sk-ed-prev{position:static;order:-1}}
@media (max-width:800px){.sk-wrap{padding:1rem 1rem 6rem}.sk-title{font-size:2rem}.sk-copyrow{flex-direction:column}.sk-copyrow .ck-btn{align-self:flex-end}.sk-row{grid-template-columns:1fr}.sk-row .kk-thumb{display:none}}
/* A plan helper sees the Set plan box alone in the Studio admin panel (api/_plan-admins.js). */
html.plan-admin-only #studioAdminTest>:not(.adm-plan){display:none !important}
html.plan-admin-only #studioAdminTest .adm-plan-full{display:none !important}
/* A reel being made: the dot pulses on Studio Reels while the member is on any other page (one reel at a time). */
html.reel-busy .nav-item[data-page="reelstudio"] .rs-nav-dot{display:inline-block;margin-left:auto;animation:rsNavPulse 1.3s ease-in-out infinite}
@keyframes rsNavPulse{0%,100%{opacity:0.35}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){html.reel-busy .nav-item[data-page="reelstudio"] .rs-nav-dot{animation:none}}
.ck-upload{margin-top:0.9rem;border:1px dashed var(--border);border-radius:12px;padding:0.6rem 0.8rem}
.kp-tabs{display:flex;gap:0.35rem;flex-wrap:wrap;margin-bottom:0.6rem}
.kp-tab{height:34px;padding:0 0.9rem;border-radius:999px;border:1px solid var(--border);background:var(--surface);color:var(--text-muted);font:inherit;font-size:0.82rem;cursor:pointer}
.kp-tab.on{background:var(--text);color:var(--bg);border-color:var(--text)}
.kp-note{font-size:0.86rem;color:var(--text-muted);margin:0 0 0.6rem;line-height:1.45}
.kp-studio{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:1rem;align-items:start}
.kp-stage{border-radius:16px;border:1px solid var(--border);min-height:320px;display:flex;align-items:center;justify-content:center;padding:1.5rem;overflow:hidden}
.kp-stage .kp-logo{max-width:min(100%,360px);max-height:320px;object-fit:contain}
.kp-ig{width:100%;max-width:420px;background:#fff;color:#111;border-radius:14px;padding:1rem 1.1rem;font-family:Inter,system-ui,sans-serif;text-align:left}
.kp-ig-top{display:flex;gap:1rem;align-items:center}
.kp-ig-avatar{width:84px;height:84px;border-radius:50%;overflow:hidden;flex:none;display:flex;align-items:center;justify-content:center;border:1px solid #e6e6e6}
.kp-ig-avatar img{width:70%;height:70%;object-fit:contain}
.kp-ig-handle{font-weight:600;font-size:1.05rem;margin-bottom:0.3rem}
.kp-ig-stats{font-size:0.82rem;color:#333}
.kp-ig-name{font-weight:700;margin-top:0.8rem;font-size:0.9rem}
.kp-ig-bio{font-size:0.86rem;line-height:1.4;margin-top:0.15rem;white-space:normal}
.kp-lbl{font-size:0.72rem;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;color:var(--text-muted);margin-bottom:0.35rem}
.kp-seg{display:flex;gap:0.3rem;flex-wrap:wrap}
.kp-chip{height:30px;padding:0 0.7rem;border-radius:999px;border:1px solid var(--border);background:var(--surface);color:var(--text);font:inherit;font-size:0.78rem;cursor:pointer}
.kp-chip.on{background:var(--text);color:var(--bg);border-color:var(--text)}
.kp-files{display:flex;flex-direction:column;gap:0.3rem}
.kp-file{display:flex;align-items:center;justify-content:space-between;gap:0.4rem;border:1px solid var(--border);border-radius:10px;padding:0.2rem 0.3rem 0.2rem 0.5rem;background:var(--surface)}
.kp-file.on{border-color:var(--text)}
/* The admin dashboard (the redesign of 2026-10-18): the head, the metrics, the filters, the table, the workspace. */
.cb-dash-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap}
.cb-dash-acts{display:flex;gap:0.6rem;align-items:center;flex-wrap:wrap}
.cb-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:0.6rem;margin:1.1rem 0 0.9rem}
.cb-metric{border:1px solid var(--border);border-radius:12px;padding:0.7rem 0.9rem;background:var(--surface);display:flex;flex-direction:column;gap:0.15rem}
.cb-metric b{font-size:1.5rem;font-weight:600;color:var(--text);line-height:1.1}
.cb-metric span{font-size:0.76rem;color:var(--text-muted)}
.cb-filters{display:flex;gap:0.5rem;flex-wrap:wrap;align-items:center;margin-bottom:0.7rem}
.cb-table-wrap{overflow:auto;border:1px solid var(--border);border-radius:14px;background:var(--surface)}
.cb-wrap.cb-wrap-admin{max-width:1180px}
/* The dashboard's rows share the form's .cb-row name, whose flex rule broke the table (owner 2026-10-20, "this tab is kind of crazy"): a table row stays a table row. */
.cb-table tr.cb-row{display:table-row;gap:0;flex-wrap:nowrap}
.cb-done-seg{margin:0.9rem 0 0.6rem}.cb-done-seg .kp-chip b{font-weight:600;opacity:0.7;margin-left:0.25rem}
.cb-table{width:100%;border-collapse:collapse;font-size:0.88rem}
.cb-table th{text-align:left;font-size:0.72rem;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;color:var(--text-muted);padding:0.7rem 0.9rem;border-bottom:1px solid var(--border)}
.cb-table td{padding:0.6rem 0.9rem;border-bottom:1px solid var(--border);vertical-align:middle}
.cb-table tr:last-child td{border-bottom:0}
.cb-row-name{font-weight:600;color:var(--text)}
.cb-ws-head .cb-status{align-items:flex-start}
.cb-menu{position:relative}.cb-menu summary::-webkit-details-marker{display:none}
.cb-menu-list{position:absolute;right:0;top:calc(100% + 4px);background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow-floating,0 10px 30px rgba(0,0,0,0.15));display:flex;flex-direction:column;min-width:180px;z-index:20;overflow:hidden}
.cb-menu-list button{background:none;border:0;text-align:left;padding:0.6rem 0.9rem;font:inherit;font-size:0.86rem;color:var(--text);cursor:pointer}
.cb-menu-list button:hover{background:var(--surface2)}
.cb-dl{display:grid;grid-template-columns:minmax(120px,180px) 1fr;gap:0.35rem 1rem;margin:0}
.cb-dl dt{color:var(--text-muted);font-size:0.84rem}.cb-dl dd{margin:0;font-size:0.9rem;white-space:pre-wrap}
.cb-checklist{display:flex;flex-direction:column;gap:0.4rem}
.cb-checkrow{display:flex;align-items:center;gap:0.6rem;border:1px solid var(--border);border-radius:10px;padding:0.5rem 0.7rem;background:var(--surface)}
.cb-checkrow b{flex:1}
.cb-check{width:20px;height:20px;border-radius:50%;border:1px solid var(--border);display:inline-flex;align-items:center;justify-content:center;font-size:0.75rem;color:var(--bg)}
.cb-check.on{background:var(--text);border-color:var(--text)}
@media (max-width:640px){.cb-dl{grid-template-columns:1fr}.cb-table th:nth-child(3),.cb-table td:nth-child(3){display:none}}
/* The customer's brand kit page (the redesign of 2026-10-18): the head, the tabs, the hero, the plan, the PDF viewer. */
.kp-adminbar{display:flex;justify-content:space-between;align-items:center;gap:0.6rem;font-size:0.8rem;color:var(--text-muted);padding:0.4rem 0.8rem;border:1px dashed var(--border);border-radius:10px;margin-bottom:0.9rem}
.kp-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.kp-kicker{font-size:0.72rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-muted)}
.kp-title{font-family:Georgia,serif;font-weight:400;font-size:2.2rem;line-height:1.1;margin:0.2rem 0 0;color:var(--text)}
.kp-nav{display:flex;gap:0.2rem;border-bottom:1px solid var(--border);margin:0.4rem 0 1.2rem;overflow-x:auto;scrollbar-width:none}
.kp-nav::-webkit-scrollbar{display:none}
.kp-navbtn{background:none;border:0;border-bottom:2px solid transparent;padding:0.6rem 0.85rem;font:inherit;font-size:0.9rem;color:var(--text-muted);cursor:pointer;white-space:nowrap;margin-bottom:-1px}
.kp-navbtn.on{color:var(--text);border-bottom-color:var(--text);font-weight:600}
.kp-hero{border-radius:20px;min-height:300px;display:flex;align-items:center;justify-content:center;padding:2rem;overflow:hidden}
.kp-hero img{max-width:min(70%,420px);max-height:260px;object-fit:contain}
.kp-hero-name{font-family:Georgia,serif;font-size:2.4rem}
.kp-tagline{margin:0.8rem 0 0;font-size:1.05rem;color:var(--text);display:flex;gap:0.8rem;flex-wrap:wrap}
.kp-tagline span{color:var(--text-muted)}
.kp-dl-row{display:flex;align-items:center;gap:0.7rem;width:100%;text-align:left;border:1px solid var(--border);border-radius:12px;padding:0.6rem 0.8rem;background:var(--surface);color:var(--text);font:inherit;cursor:pointer}
.kp-dl-row b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kp-dl-go{color:var(--text-muted);font-size:0.82rem}
.kp-dl{background:none;border:1px solid var(--border);border-radius:8px;padding:0.25rem 0.55rem;font:inherit;font-size:0.78rem;color:var(--text);cursor:pointer}
.kp-share{margin-top:0.8rem}
.kp-concepts{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem}
.kp-concept{border:1px solid var(--border);border-radius:16px;overflow:hidden;background:var(--surface)}
.kp-concept.on{border-color:var(--text)}
.kp-concept-art{height:220px;display:flex;align-items:center;justify-content:center;padding:1.2rem}
.kp-concept-art img{max-width:80%;max-height:100%;object-fit:contain}
.kp-concept-meta{display:flex;justify-content:space-between;align-items:center;gap:0.5rem;padding:0.6rem 0.8rem}
.kp-wks{display:flex;gap:0.3rem;flex-wrap:wrap;margin-bottom:0.8rem}
.kp-days{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:0.6rem}
.kp-day{display:flex;flex-direction:column;gap:0.25rem;text-align:left;border:1px solid var(--border);border-radius:14px;padding:0.7rem 0.8rem;background:var(--surface);color:var(--text);font:inherit;cursor:pointer;min-height:120px}
.kp-day:hover{border-color:var(--text)}
.kp-day-n{font-size:0.72rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--text-muted)}
.kp-day-meta{font-size:0.78rem;color:var(--text-muted)}
.kp-day-hook{font-size:0.9rem;line-height:1.35;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.kp-daybox .kp-dayrow{margin-top:0.6rem}.kp-daybox .kp-dayrow p{margin:0.15rem 0 0;line-height:1.45}
.kp-pdf{border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--surface)}
.kp-pdf-bar{display:flex;align-items:center;gap:0.35rem;padding:0.5rem 0.6rem;border-bottom:1px solid var(--border);flex-wrap:wrap}
.kp-pdf-n{font-size:0.82rem;color:var(--text-muted);min-width:3.5rem;text-align:center}
.kp-pdf-sp{flex:1}
.kp-pdf-wrap{background:var(--surface2);padding:0.8rem;display:flex;justify-content:center;overflow:auto;max-height:80vh}
.kp-pdf-wrap canvas{box-shadow:0 6px 24px rgba(0,0,0,0.12);background:#fff;max-width:100%}
@media (max-width:640px){.kp-title{font-size:1.7rem}.kp-hero{min-height:220px}.kp-studio{grid-template-columns:1fr}}
/* The brand kit library (admin list, the assign modal, the member's gallery). */
.kk-lib{margin:0.6rem 0 1.4rem;padding-bottom:1.2rem;border-bottom:1px solid var(--border)}
.kk-rows{display:flex;flex-direction:column;gap:0.5rem;margin-top:0.7rem}
.kk-row{display:grid;grid-template-columns:auto 56px 1fr auto;gap:0.7rem;align-items:center;border:1px solid var(--border);border-radius:12px;padding:0.6rem 0.8rem;background:var(--surface)}
.kk-row .kk-prev{grid-column:1 / -1}
.kk-check input{width:16px;height:16px}
.kk-thumb{width:56px;height:56px;border-radius:10px;background:#F6F1EA;display:flex;align-items:center;justify-content:center;overflow:hidden;font-weight:700;color:#6B6B66}
.kk-thumb img{width:100%;height:100%;object-fit:contain;padding:4px}
.kk-name{font-weight:700;color:var(--text)}
.kk-meta{display:flex;gap:0.6rem;align-items:center;margin-top:0.15rem;flex-wrap:wrap}
.kk-chip{font-size:0.72rem;padding:0.1rem 0.5rem;border-radius:999px;border:1px solid var(--border);color:var(--text-muted)}
.kk-chip.on{background:var(--text);color:var(--bg);border-color:var(--text)}
.kk-owners{display:flex;gap:0.35rem;flex-wrap:wrap;margin-top:0.3rem}
.kk-owner{display:inline-flex;align-items:center;gap:0.25rem;font-size:0.76rem;padding:0.1rem 0.3rem 0.1rem 0.5rem;border-radius:999px;background:var(--surface2);color:var(--text)}
.kk-owner button{background:none;border:0;color:var(--text-muted);cursor:pointer;font-size:1rem;line-height:1;padding:0 0.2rem}
.kk-acts{display:flex;gap:0.35rem;flex-wrap:wrap;justify-content:flex-end}
.kk-selbar{display:flex;gap:0.6rem;align-items:center;margin-top:0.6rem;padding:0.5rem 0.8rem;border-radius:10px;background:var(--surface2);font-size:0.82rem}
.kk-modal{position:fixed;inset:0;background:rgba(0,0,0,0.45);display:flex;align-items:center;justify-content:center;z-index:1200;padding:1rem}
.kk-modal-box{width:min(440px,100%);background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:1.2rem 1.3rem;box-shadow:var(--shadow-floating,0 20px 60px rgba(0,0,0,0.3))}
.kk-modal-t{font-weight:700;font-size:1.05rem;color:var(--text);margin-bottom:0.8rem}
.kk-modal-row{display:flex;flex-direction:column;gap:0.25rem;margin-top:0.6rem}
.kk-modal-row .cb-in{margin:0}
.kk-status{font-size:0.86rem;color:var(--text-muted)}.kk-status.ok{color:#2a7a4b}.kk-status.no{color:#b4452f}
.kk-modal-acts{display:flex;gap:0.5rem;justify-content:flex-end;margin-top:1rem;flex-wrap:wrap}
.kk-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:0.9rem;margin-top:1.2rem}
.kk-card{display:flex;flex-direction:column;gap:0.3rem;text-align:left;border:1px solid var(--border);border-radius:16px;padding:0.6rem;background:var(--surface);cursor:pointer;font-family:inherit;color:var(--text)}
.kk-card-art{display:flex;align-items:center;justify-content:center;height:150px;border-radius:12px;overflow:hidden}
.kk-card-art img{max-width:80%;max-height:80%;object-fit:contain}
.kk-card-name{font-weight:700;margin-top:0.3rem}
.kk-card-open{font-size:0.8rem;color:var(--text-muted)}
@media (max-width:640px){.kk-row{grid-template-columns:auto 44px 1fr}.kk-acts{grid-column:1 / -1;justify-content:flex-start}}
.kp-file-pick{background:none;border:0;color:var(--text);font:inherit;font-size:0.82rem;cursor:pointer;text-align:left;padding:0.3rem 0;flex:1}
.kp-file-pick span{color:var(--text-muted);font-size:0.72rem;margin-left:0.3rem}
.kp-dl{font-size:0.76rem;color:var(--text);text-decoration:none;border:1px solid var(--border);border-radius:8px;padding:0.25rem 0.5rem}
.kp-all{display:inline-flex;align-items:center;text-decoration:none;margin-top:0.8rem}
.kp-colors{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:0.6rem}
.kp-color{display:flex;flex-direction:column;gap:0.35rem;align-items:stretch;text-align:left;border:1px solid var(--border);border-radius:12px;padding:0.5rem;background:var(--surface);color:var(--text);font:inherit;cursor:pointer}
.kp-swatch{display:block;height:64px;border-radius:9px;font-size:0.72rem;font-family:ui-monospace,monospace;display:flex;align-items:flex-end;padding:0.35rem 0.45rem}
.kp-color b{font-size:0.86rem}.kp-color span:not(.kp-swatch){font-size:0.74rem;color:var(--text-muted);line-height:1.35}
.kp-fonts{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:0.6rem}
.kp-font{display:flex;gap:0.8rem;align-items:center;border:1px solid var(--border);border-radius:12px;padding:0.6rem 0.8rem;background:var(--surface)}
.kp-font-sample{font-size:2.2rem;line-height:1;width:64px;text-align:center;color:var(--text);flex:none}
.kp-font-meta{display:flex;flex-direction:column;gap:0.15rem;font-size:0.8rem;color:var(--text-muted)}
.kp-font-meta b{font-size:0.92rem;color:var(--text)}.kp-font-meta a{color:var(--text);font-size:0.78rem}
.kp-guide{border:1px solid var(--border);border-radius:12px;padding:0.8rem 1rem;max-height:520px;overflow:auto}
.kp-dls{display:flex;flex-direction:column;gap:0.4rem}
.kp-dl-row{display:flex;gap:0.7rem;align-items:center;border:1px solid var(--border);border-radius:12px;padding:0.6rem 0.8rem;text-decoration:none;color:var(--text);background:var(--surface)}
.kp-dl-row b{flex:1;font-size:0.88rem}.kp-dl-row span:last-child{font-size:0.74rem;color:var(--text-muted)}
.kp-dl-kind{font-size:0.66rem;font-weight:700;letter-spacing:0.05em;border:1px solid var(--border);border-radius:6px;padding:0.15rem 0.35rem;color:var(--text-muted)}
@media (max-width:720px){.kp-studio{grid-template-columns:1fr}}
.ck-upload summary{cursor:pointer;font-size:0.84rem;font-weight:600}
.ck-plan-text p{font-size:0.88rem}
.nav-count{margin-left:auto;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--text);color:var(--surface);font-size:0.66rem;font-weight:600;display:inline-flex;align-items:center;justify-content:center;line-height:1;font-variant-numeric:tabular-nums}
.nav-item.nav-item-soon{opacity:0.45;cursor:default}
.nav-item.nav-item-soon:hover{background:none;color:var(--text-muted);opacity:0.45}
/* Sidebar chat lists under Create/Mirror — same scale as nav items,
   no accent, no boxes (owner: premium/Claude-like, 2026-08-08). */
.nav-chats{display:flex;flex-direction:column;gap:1px;margin:1px 0 4px;padding-left:1.55rem;max-height:clamp(120px,32vh,220px);overflow-y:auto}
.nav-chats:empty{display:none}
.nav-chat-item{display:block;flex-shrink:0;width:100%;padding:0.42rem 0.65rem;border-radius:8px;border:none;background:none;text-align:left;font-family:inherit;font-size:0.93rem;font-weight:400;color:var(--text);opacity:0.55;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.4;transition:all 0.1s}
.nav-compose{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;padding:2px;min-width:28px;min-height:28px;border-radius:6px;opacity:0.55;transition:opacity 0.1s,background 0.1s}
.nav-compose:hover{opacity:1;background:var(--surface2,rgba(128,128,128,0.15))}
.nav-item .nav-compose svg{width:15px;height:15px;stroke-width:1.7;opacity:1}
.nav-chat-item:hover{background:var(--nav-active-bg,var(--surface));opacity:1}
.nav-chat-item.active{background:var(--nav-active-bg,var(--surface));opacity:1}
/* nav-spacer replaced by nav-scroll/nav-bottom structure */

.gen-counter{margin:0 0.7rem 0.4rem;padding:0.5rem 0.65rem;background:var(--nav-active-bg,var(--surface2));border:1px solid var(--border-subtle);border-radius:8px}
.gen-counter-label{font-size:0.8rem;letter-spacing:0.02em;color:var(--text-muted);font-weight:600;margin-bottom:0.35rem}
.gen-counter-bar{height:3px;background:var(--border);border-radius:2px;overflow:hidden;margin-bottom:0.2rem}
.gen-counter-fill{height:100%;background:var(--accent);border-radius:2px;transition:width 0.3s}
.gen-counter-text{font-size:0.8rem;color:var(--accent-text);font-weight:500}

.theme-row{display:flex;align-items:center;justify-content:space-between;padding:0.35rem 0.75rem;margin:0 0.3rem;margin-bottom:0.4rem}
.theme-label{font-size:1rem;color:var(--text-dim);font-weight:500}
.theme-switch{width:42px;height:24px;border-radius:12px;background:var(--accent-pastel,var(--surface2));border:1px solid var(--border);cursor:pointer;position:relative;transition:all 0.2s;flex-shrink:0}
/* Invisible hit-area expansion: the 42x24 switch stays visually small but
   its clickable/tappable area is 62x44 (a11y touch target). */
.theme-switch::before{content:"";position:absolute;inset:-10px}
.theme-switch::after{content:"";width:18px;height:18px;border-radius:50%;background:var(--accent-dim);position:absolute;top:2px;left:2px;transition:all 0.2s;z-index:2;box-shadow:0 1px 3px rgba(0,0,0,0.2)}
.theme-switch.on{background:var(--accent)}
.theme-switch.on::after{left:20px;background:rgba(255,255,255,0.92)}
/* sun always black, moon always white */
.theme-icon-sun{stroke:#111 !important}
.theme-icon-moon{stroke:#fff !important}
.theme-switch .theme-icon-sun{opacity:0.25}
.theme-switch .theme-icon-moon{opacity:1}
.theme-switch.on .theme-icon-sun{opacity:1}
.theme-switch.on .theme-icon-moon{opacity:0.25}

.nav-account{border-top:1px solid var(--border);padding:0.6rem}
.nav-account-row{display:flex;align-items:center;gap:0.55rem;padding:0.38rem 0.5rem;border-radius:8px;cursor:pointer;transition:background 0.1s}
.nav-account-row:hover{background:var(--surface)}
/* The account row, Claude style (owner 2026-10-15: "my name on the bottom
   there is too big... get rid of that credits left thing with the circle...
   Make it look more like Claude... for the plan, you can put Pro"): a quiet
   grey initial, the first name and " · Pro", a chevron. Usage lives in
   Settings; the credits ring never shows here. */
.nav-account-avatar{width:26px;height:26px;border-radius:50%;background:var(--surface2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:0.78rem;font-weight:500;color:var(--text);flex-shrink:0}
.nav-account-name{font-size:0.9rem;font-weight:400;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-account-plan{font-size:0.9rem;color:var(--text-muted);font-weight:400}
.nav-account-chev{width:15px;height:15px;color:var(--text-muted);flex-shrink:0;opacity:0.8}
#creditsRing{display:none !important}
.nav-earned{display:block;text-align:center;font-size:1rem;color:var(--accent-dim);cursor:pointer;padding:0.2rem;margin-top:0.15rem;font-weight:500}
.nav-earned:hover{color:var(--accent)}

.main-content{flex:1;display:flex;flex-direction:column;height:100dvh;overflow:hidden;min-width:0;background:var(--bg)}
.top-bar{padding:0.55rem 1.25rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;background:var(--bg);flex-wrap:wrap;gap:0.4rem;min-height:64px}
.top-bar-title{font-size:1.1rem;font-weight:600;color:var(--text);letter-spacing:-0.01em}
.top-bar-subtitle{font-size:0.75rem;color:var(--text-muted);font-weight:400;letter-spacing:0.01em}
.create-tabs-bar{display:flex;justify-content:center;align-items:center;padding:0.55rem 1.3rem;border-bottom:1px solid var(--border);background:var(--bg);flex-shrink:0}

.mob-tabbar{display:none}
.mode-switch{display:flex;gap:2px;background:var(--surface2);border:1px solid var(--border-subtle);border-radius:12px;padding:3px;margin:0 auto;flex-shrink:0}
.mode-btn{background:transparent;border:none;color:var(--text-muted);padding:0.42rem 1.2rem;border-radius:9px;cursor:pointer;font-size:0.95rem;font-weight:500;transition:background 0.15s var(--ease),color 0.15s var(--ease);font-family:inherit;white-space:nowrap}
.mode-btn:hover{color:var(--text)}
.mode-btn.active{background:var(--surface-elevated);color:var(--text);box-shadow:var(--shadow-small)}
.mode-btn.soon{opacity:0.3;cursor:default}

.page-view{flex:1;display:none;overflow:hidden;min-height:0;width:100%;background:var(--bg)}
.page-view.active{display:flex;flex-direction:column;width:100%}
.create-layout{display:flex;flex-direction:column;align-items:center;flex:1;overflow-y:auto;overflow-x:hidden;padding:1.5rem 2rem 3rem;background:var(--bg);-webkit-overflow-scrolling:touch}.create-layout::-webkit-scrollbar{width:3px}.create-layout::-webkit-scrollbar-track{background:transparent}.create-layout::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}

/* Create v2 — Mirror-style */
.create-layout-v2{display:flex;flex-direction:column;flex:1;min-height:0;background:var(--bg);position:relative}
.create-conversation{flex:1;overflow-y:auto;padding:1.2rem 1.2rem 1.5rem;display:flex;flex-direction:column;gap:1.5rem;position:relative;max-width:880px;margin-left:auto;margin-right:auto;width:100%}
.create-conversation::-webkit-scrollbar{width:3px}.create-conversation::-webkit-scrollbar-track{background:transparent}.create-conversation::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
.create-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.3rem;padding:2rem;text-align:center}
.create-ideas-toggle{display:flex;align-items:center;gap:0.4rem;padding:0 0 0.6rem;cursor:pointer;-webkit-tap-highlight-color:transparent}
.create-ideas-cards{display:flex;gap:0.5rem;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:4px 2px 0.7rem}
.create-ideas-cards::-webkit-scrollbar{display:none}
.create-idea-card{flex-shrink:0;background:transparent;border:1px solid rgba(255,255,255,0.08);border-radius:999px;padding:0.55rem 1rem;font-size:0.84rem;color:var(--text-muted);cursor:pointer;font-family:inherit;text-align:left;transition:border-color 0.15s var(--ease),color 0.15s var(--ease),background 0.15s var(--ease),transform 0.15s var(--ease);line-height:1.4;white-space:nowrap}
html.light .create-idea-card{border-color:rgba(0,0,0,0.08)}
.create-idea-card:hover{border-color:var(--accent-dim);color:var(--text);background:rgba(255,255,255,0.03);transform:translateY(-1px)}
html.light .create-idea-card:hover{background:rgba(0,0,0,0.02)}
.create-inspiration-area{padding:0.5rem 0.8rem 0;flex-shrink:0;background:var(--bg);max-width:880px;margin-left:auto;margin-right:auto;width:100%}
.mirror-composer-inner.create-composer-inner{background:var(--surface);border:1.5px solid rgba(255,255,255,0.1);border-radius:20px;padding:0.75rem 0.85rem 0.75rem 0.95rem;min-height:52px;display:flex;align-items:center;gap:0.4rem;flex:1}
.create-composer{padding:0.7rem 0.8rem 1rem;flex-shrink:0;background:var(--bg);border-top:1px solid rgba(255,255,255,0.04);position:sticky;bottom:0;z-index:2;max-width:880px;margin-left:auto;margin-right:auto;width:100%}
html.light .create-composer{border-top-color:rgba(0,0,0,0.06)}
.create-composer-controls{display:flex;flex-direction:column;gap:0.8rem;margin-bottom:0.85rem}
.create-control-group{display:flex;flex-direction:column;gap:0.3rem}
#createControlsInner{display:flex;flex-direction:column;gap:0.9rem;transition:all 0.2s}
#createAdvancedControls{display:flex;flex-direction:column;gap:0.9rem}
.create-control-label{font-size:0.72rem;letter-spacing:0.02em;color:var(--text-muted);font-weight:600;padding-left:0.1rem;opacity:0.6;display:flex;align-items:center;gap:0.35rem;transition:opacity 0.15s}
.control-help{position:relative;display:inline-flex;align-items:center;cursor:default;transition:opacity 0.12s}
.control-help:hover{opacity:1}
.control-help svg{width:14px;height:14px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.08);color:rgba(255,255,255,0.72);border-radius:50%;padding:1.5px;flex-shrink:0}
html.light .control-help svg{background:rgba(0,0,0,0.06);border-color:rgba(0,0,0,0.08);color:rgba(0,0,0,0.58)}
.control-help-tip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:0.45rem 0.7rem;font-size:0.75rem;font-weight:400;letter-spacing:0;text-transform:none;color:var(--text);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity 0.15s;z-index:50;box-shadow:0 6px 20px rgba(0,0,0,0.25)}
.control-help:hover .control-help-tip{opacity:1}
/* The label's opacity:0.6 also faded the tooltip inside it (owner report:
   see-through, hard to read). Lift the label while its help icon is
   hovered so the tooltip renders fully opaque. */
.create-control-label:has(.control-help:hover){opacity:1}
.create-mode-chips{display:flex;gap:0.35rem}
.create-mode-chip{background:transparent;border:1px solid rgba(255,255,255,0.08);color:var(--text-muted);padding:6px 13px;border-radius:8px;cursor:pointer;font-size:13px;font-weight:500;font-family:inherit;transition:all 0.15s;white-space:nowrap}
html.light .create-mode-chip{border-color:rgba(0,0,0,0.1)}
.create-mode-chip:hover{border-color:var(--accent-dim);color:var(--text);background:rgba(255,255,255,0.03);transform:translateY(-0.5px)}
html.light .create-mode-chip:hover{background:rgba(0,0,0,0.03)}
.create-mode-chip.active{background:var(--accent);border-color:var(--accent);color:var(--accent-fg,#fff);font-weight:600;box-shadow:0 2px 8px var(--accent-glow)}
/* Light-theme accent (#A8872E) is too light for white text — drop one
   shade and the format pill becomes readable on white surfaces. */
html.light .create-mode-chip.active{background:var(--accent-dim);border-color:var(--accent-dim);color:var(--accent-fg,#fff);box-shadow:0 2px 8px rgba(140,112,40,0.18)}
.create-mode-soon{opacity:0.35;cursor:default;position:relative}
.create-soon-tag{position:absolute;right:-4px;top:-6px;font-size:0.45rem;background:var(--accent-dim);color:var(--accent-fg,#fff);padding:0.1rem 0.25rem;border-radius:4px;font-weight:600;letter-spacing:0.05em;line-height:1}
.create-style-row{display:flex;gap:0.45rem;align-items:center;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.create-style-row::-webkit-scrollbar{display:none}
.create-style-chips{display:flex;gap:0.45rem;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.create-style-chips::-webkit-scrollbar{display:none}
/* Style-row scroll arrows (owner report: a mouse-only user on a narrow
   window could not reach the hidden styles). Shown only for fine
   pointers and only on the side that has more chips; touch keeps swipe. */
.create-style-scroll{position:relative;display:flex;flex:1 1 auto;min-width:0}
.create-style-scroll .create-style-chips{flex:1 1 auto;min-width:0}
.style-scroll-arrow{display:none}
@media (hover:hover) and (pointer:fine){
  .style-scroll-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:28px;height:28px;border-radius:50%;border:1px solid var(--border);background:var(--surface);color:var(--text-muted);cursor:pointer;align-items:center;justify-content:center;padding:0;box-shadow:0 2px 8px rgba(0,0,0,0.12);transition:color 0.15s,border-color 0.15s}
  .style-scroll-arrow:hover{color:var(--accent);border-color:var(--accent-dim)}
  .style-scroll-arrow.left{left:0}
  .style-scroll-arrow.right{right:0}
  .create-style-scroll.can-left .style-scroll-arrow.left,.create-style-scroll.can-right .style-scroll-arrow.right{display:flex}
  .create-style-scroll.can-right .create-style-chips{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 56px),transparent)}
  .create-style-scroll.can-left .create-style-chips{-webkit-mask-image:linear-gradient(to right,transparent,#000 56px);mask-image:linear-gradient(to right,transparent,#000 56px)}
  .create-style-scroll.can-left.can-right .create-style-chips{-webkit-mask-image:linear-gradient(to right,transparent,#000 56px,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(to right,transparent,#000 56px,#000 calc(100% - 56px),transparent)}
}
.create-style-chip{flex-shrink:0;background:transparent;border:1px solid rgba(255,255,255,0.08);color:var(--text-muted);padding:6px 13px;border-radius:8px;cursor:pointer;font-size:13px;font-weight:500;font-family:inherit;transition:all 0.15s;white-space:nowrap}
html.light .create-style-chip{border-color:rgba(0,0,0,0.1)}
.create-style-chip:hover{border-color:var(--accent-dim);color:var(--text);background:rgba(255,255,255,0.03);transform:translateY(-0.5px)}
html.light .create-style-chip:hover{background:rgba(0,0,0,0.03)}
.create-style-chip.active{background:var(--accent-glow);border-color:var(--accent);color:var(--accent);font-weight:600}
/* Unselected Auto matches the neutral style chips so it never reads as
   selected next to the chosen style (owner report); only the sparkle
   keeps the accent as the AI hint. Selected (.active) stays solid. */
.create-pick-btn{flex-shrink:0;background:transparent;border:1px solid rgba(255,255,255,0.08);color:var(--text-muted);padding:6px 14px;border-radius:8px;cursor:pointer;font-size:13px;font-weight:600;font-family:inherit;transition:all 0.15s;white-space:nowrap;position:relative;overflow:hidden}
.create-pick-btn::before{content:'';position:absolute;top:0;left:-100%;width:200%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.1),transparent);transition:left 0.6s;pointer-events:none}
.create-pick-btn:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-0.5px);box-shadow:0 2px 12px var(--accent-glow)}
.create-pick-btn:hover::before{left:100%}
.create-pick-btn.active{background:var(--accent);border-color:var(--accent);color:var(--accent-fg,#fff);box-shadow:0 2px 8px var(--accent-glow)}
html.light .create-pick-btn{border-color:rgba(0,0,0,0.1)}
html.light .create-pick-btn.active,html.light .create-pick-btn:hover{border-color:var(--accent)}
.create-pick-spark{color:var(--accent)}
.create-pick-btn.active .create-pick-spark{color:inherit}
.create-length-row{display:flex;gap:0.45rem}
.create-length-chip{background:transparent;border:1px solid rgba(255,255,255,0.18);color:#b8b8b8;padding:6px 13px;border-radius:8px;cursor:pointer;font-size:13px;font-weight:500;font-family:inherit;transition:all 0.15s;white-space:nowrap}
html.light .create-length-chip{border-color:rgba(0,0,0,0.1);color:var(--text-muted)}
.create-length-chip:hover{border-color:var(--accent-dim);color:var(--text);background:rgba(255,255,255,0.03);transform:translateY(-0.5px)}
html.light .create-length-chip:hover{background:rgba(0,0,0,0.03)}
.create-controls-toggle{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:4px;border-radius:6px;display:flex;align-items:center;transition:all 0.15s}
.create-controls-toggle:hover{color:var(--text);background:var(--surface)}
.create-controls-toggle.collapsed svg{transform:rotate(180deg)}
.create-controls-toggle svg{transition:transform 0.2s}
#createControlsInner.collapsed{display:none}
.create-length-chip.active{background:var(--accent-glow);border-color:var(--accent);color:var(--accent);font-weight:600}
.create-length-chip.disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}

.config-panel{padding:0;display:flex;flex-direction:column;gap:0.7rem;width:100%;max-width:640px;background:transparent}

.nav-collapse-btn{background:var(--surface);border:1px solid var(--border);width:20px;height:20px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-muted);position:absolute;right:-10px;top:50%;transform:translateY(-50%);z-index:25;transition:all 0.15s;box-shadow:0 1px 4px rgba(0,0,0,0.15)}
.nav-collapse-btn:hover{border-color:var(--accent);color:var(--text)}
.nav-sidebar.collapsed-nav{width:52px;overflow:hidden}
.nav-sidebar.collapsed-nav .nav-logo h1,.nav-sidebar.collapsed-nav .nav-logo .ver,.nav-sidebar.collapsed-nav .nav-section-label,.nav-sidebar.collapsed-nav .nav-section-chevron,.nav-sidebar.collapsed-nav .nav-item span:not(:first-child),.nav-sidebar.collapsed-nav .nav-account-info,.nav-sidebar.collapsed-nav .nav-badge,.nav-sidebar.collapsed-nav .gen-counter-label,.nav-sidebar.collapsed-nav .gen-counter-text,.nav-sidebar.collapsed-nav .nav-earned,.nav-sidebar.collapsed-nav .theme-label{display:none}
.nav-sidebar.collapsed-nav .nav-logo{justify-content:center;padding:0.8rem 0}
.nav-sidebar.collapsed-nav .nav-logo-wrap{display:none}
.nav-sidebar.collapsed-nav .nav-logo h1{display:none}
.nav-sidebar.collapsed-nav .gen-counter{display:none}
.nav-sidebar.collapsed-nav .nav-item{justify-content:center;padding:0.55rem}
.nav-sidebar.collapsed-nav .nav-account-row{justify-content:center}
.nav-sidebar.collapsed-nav .theme-row{justify-content:center;padding:0.35rem 0}
.nav-sidebar.collapsed-nav .nav-collapse-btn svg{transform:rotate(180deg)}

.pick-for-me-btn{background:var(--surface);border:1px solid var(--border);color:var(--text-dim);padding:0.3rem 0.65rem;border-radius:8px;cursor:pointer;font-size:1rem;font-weight:500;transition:all 0.1s;font-family:inherit}
.pick-for-me-btn:hover{border-color:var(--accent);color:var(--text)}
.field-label{font-size:0.82rem;letter-spacing:0.01em;color:var(--text-muted);margin-bottom:0.35rem;display:block;font-weight:600}
.style-grid{display:flex;flex-direction:column;gap:2px}
.style-btn{background:transparent;border:1px solid transparent;color:var(--text);padding:0.45rem 0.65rem;border-radius:8px;cursor:pointer;text-align:left;font-size:1rem;font-weight:400;transition:all 0.1s;display:flex;align-items:center;gap:0.5rem;line-height:1.3;font-family:inherit;position:relative}
.style-btn:hover{background:var(--surface);border-color:var(--border)}
.style-btn.active{background:var(--accent-glow);border-color:var(--accent)}
.style-btn.active .style-num{color:var(--accent)}
.style-num{font-size:1rem;color:var(--text-muted);min-width:20px;flex-shrink:0;font-weight:600;font-variant-numeric:tabular-nums}
.style-btn.locked{opacity:0.3;cursor:not-allowed}

.style-help{width:22px;height:22px;border-radius:50%;border:1px solid var(--border);display:inline-flex;align-items:center;justify-content:center;font-size:0.82rem;color:var(--text-muted);font-weight:600;cursor:pointer;margin-left:auto;flex-shrink:0}
.style-popover{display:none;position:fixed;background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:0.65rem 0.85rem;font-size:1rem;font-weight:400;color:var(--text);z-index:100;max-width:260px;line-height:1.5;box-shadow:0 6px 20px rgba(0,0,0,0.3);pointer-events:none}
.style-popover.show{display:block}
.carousel-tip-icon{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;border-radius:50%;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.2);font-size:8px;font-weight:500;color:rgba(255,255,255,0.7);margin-left:5px;cursor:default;flex-shrink:0;line-height:1;vertical-align:middle;-webkit-tap-highlight-color:transparent;transition:all 0.15s}
.carousel-tip-icon:hover{border-color:rgba(255,255,255,0.35);color:rgba(255,255,255,0.6)}
.create-style-chip.active .carousel-tip-icon{border-color:rgba(255,255,255,0.3);color:rgba(255,255,255,0.6)}
html.light .carousel-tip-icon{background:rgba(0,0,0,0.05);border-color:rgba(0,0,0,0.1);color:rgba(0,0,0,0.35)}
html.light .carousel-tip-icon:hover{border-color:rgba(0,0,0,0.25);color:rgba(0,0,0,0.55)}
html.light .create-style-chip.active .carousel-tip-icon{border-color:rgba(0,0,0,0.2);color:rgba(0,0,0,0.5)}
.carousel-tip-bubble{display:none;position:fixed;background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:0.6rem 0.75rem;font-size:12px;font-weight:400;color:var(--text);z-index:200;max-width:min(420px,calc(100vw - 2rem));width:max-content;line-height:1.55;box-shadow:0 6px 20px rgba(0,0,0,0.25);pointer-events:none}
.carousel-tip-bubble.show{display:block}
.carousel-tip-bubble .tip-row{margin-bottom:0.25rem}
.carousel-tip-bubble .tip-row:last-child{margin-bottom:0}
.carousel-tip-bubble .tip-label{color:var(--text-muted);font-weight:500;margin-right:3px}

select,textarea,input[type="text"],input[type="email"],input[type="url"],input[type="password"]{width:100%;background:var(--surface);border:1px solid var(--border);color:var(--text);border-radius:8px;font-family:inherit;font-size:1rem;font-weight:400;outline:none;transition:border-color 0.15s}
select,textarea,input{outline:none;-webkit-appearance:none}select:focus:not(:focus-visible),textarea:focus:not(:focus-visible),input:focus:not(:focus-visible){border-color:var(--border) !important;outline:none !important;box-shadow:none !important;-webkit-appearance:none}
::placeholder{color:var(--text-muted);opacity:1}
select{padding:0.55rem 0.75rem;font-size:1rem;cursor:pointer;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 0.7rem center}
textarea{padding:0.75rem 0.9rem;resize:none;min-height:280px;line-height:1.6;font-size:1rem}
input[type="text"],input[type="email"],input[type="url"]{padding:0.55rem 0.75rem;font-size:1rem}

.chip-row{display:flex;flex-wrap:wrap;gap:0.25rem}
.chip{background:var(--surface);border:1px solid var(--border);color:var(--text-muted);padding:0.4rem 0.85rem;border-radius:2rem;cursor:pointer;font-size:1rem;font-weight:500;transition:all 0.1s;white-space:nowrap;font-family:inherit}
.chip:hover{border-color:var(--accent-dim);color:var(--text-dim)}
.chip.active{background:var(--accent);border-color:var(--accent);color:var(--accent-fg,#fff)}
.chip.disabled{opacity:0.3;cursor:not-allowed}
.divider{height:1px;background:var(--border);flex-shrink:0}


.caption-toggle{display:flex;align-items:center;gap:0.5rem;padding:0.3rem 0}
.caption-toggle label{font-size:1rem;color:var(--text-dim);cursor:pointer}
.toggle-switch{width:34px;height:20px;border-radius:10px;background:#f9faf5;border:1px solid var(--accent);cursor:pointer;position:relative;transition:all 0.15s;flex-shrink:0}
.toggle-switch::after{content:"";width:14px;height:14px;border-radius:50%;background:var(--accent);position:absolute;top:2px;left:2px;transition:all 0.15s}
.toggle-switch.on{border-color:var(--accent);background:var(--accent)}
.toggle-switch.on::after{left:16px;background:#fff}

.generate-btn{width:auto;min-width:160px;margin-left:auto;margin-right:auto;margin-top:1rem;display:flex;align-items:center;justify-content:center;gap:0.35rem;background:var(--accent);border:none;color:var(--accent-fg,#fff);padding:0.85rem 1.8rem;border-radius:999px;cursor:pointer;font-size:1rem;font-weight:500;transition:background 0.15s,opacity 0.15s;font-family:inherit;line-height:1;vertical-align:middle}
.generate-btn:hover{background:var(--accent-dim)}
.generate-btn:disabled{opacity:0.35;cursor:not-allowed}
/* ── Brand Voice page (owner 2026-10-13: paste your writing, Kalam studies it, test it) ── */
.bv-workspace{display:flex;flex:1;min-height:0;overflow:hidden}
.bv-list-col{flex:0 0 232px;border-right:1px solid var(--border);overflow-y:auto;padding:0.9rem 0.65rem;display:flex;flex-direction:column;gap:2px}
.bv-main{flex:1;overflow-y:auto;padding:1.4rem 2rem 4rem;display:flex;flex-direction:column}
/* One column, centered (owner 2026-10-13, "this is not centered at all"): every
   block of the page lives inside it, so the headline, the lede, the note and
   the box share a left edge. Centering the blocks one by one let any block
   with a margin of its own (the headline, the lede) drift to the left edge. */
.bv-col{width:100%;max-width:860px;margin:0 auto}
/* The member's brand kit page (owner 2026-10-20). */
.bk-page{padding:1.4rem 1.6rem 6rem;max-width:1080px;margin:0 auto}.bk-h{font-size:1.8rem;margin:0.2rem 0 0.4rem}.bk-lede{margin:0}
.bk-grid{display:grid;grid-template-columns:minmax(0,1fr) 372px;gap:2.2rem;align-items:start}
.bk-stage{position:sticky;top:1rem;margin-top:1.4rem;min-width:0}.bk-main{display:flex;justify-content:center;background:var(--surface2);border-radius:14px;padding:0.9rem}.bk-fit{overflow:hidden;position:relative;border-radius:6px;flex-shrink:0}.bk-stage-note{margin-top:0.6rem;min-height:3.6em}
.bk-thumbs{display:flex;flex-wrap:wrap;gap:0.3rem;padding:0.4rem 0 0.5rem}.bk-th{flex-shrink:0;width:58px;background:none;border:none;padding:0.2rem;border-radius:9px;cursor:pointer;font:inherit;color:var(--text-muted);display:flex;flex-direction:column;align-items:center;gap:0.25rem}.bk-th.on{background:var(--accent-glow);color:var(--text)}.bk-th small{font-size:0.62rem;line-height:1.2;text-align:center}.bk-th .bk-fit,.bk-th .bk-reel{pointer-events:none}
.bk-reel{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6%;box-sizing:border-box;border-radius:6px;text-align:center;overflow:hidden;gap:6%}.bk-reel b{line-height:1.15;font-weight:700}.bk-reel i{display:block;width:24%;height:3px;border-radius:2px}
.bk-pairs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:0.6rem}.bk-pair{display:flex;flex-direction:column;gap:0.1rem;text-align:left;padding:0.65rem 0.75rem;border:1.5px solid var(--border);border-radius:12px;background:var(--surface);cursor:pointer;color:var(--text);font:inherit}.bk-pair.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-glow)}.bk-pair b{font-size:1.15rem;font-weight:600;line-height:1.2}.bk-pair span{font-size:0.82rem;color:var(--text-muted)}.bk-pair small{font-size:0.68rem;color:var(--text-muted);margin-top:0.2rem}
.bk-more{margin-top:1.2rem;border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:0.7rem 0}.bk-more summary{cursor:pointer;font-size:0.84rem;font-weight:600;color:var(--text)}.bk-fix{margin-top:0.4rem}.bk-fix:empty{display:none}
.bk-where{display:flex;gap:1.6rem;flex-wrap:wrap}.bk-where-t{font-size:0.8rem;color:var(--text);margin-bottom:0.3rem}
.bk-sec{margin-top:1.4rem}.bk-sec-t{font-size:0.72rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--text-muted);margin:0 0 0.5rem}
.bk-two{display:grid;grid-template-columns:1fr 1fr;gap:0.8rem}.bk-field{display:flex;flex-direction:column;gap:0.3rem;font-size:0.8rem;color:var(--text-muted)}.bk-field .cb-in{margin:0}
.bk-pals{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:0.6rem}
.bk-pal{display:flex;flex-direction:column;gap:0.35rem;padding:0.4rem;border:1.5px solid var(--border);border-radius:12px;background:var(--surface);cursor:pointer;font:inherit;color:var(--text);text-align:left}.bk-pal.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-glow)}
.bk-pal-sw{display:flex;align-items:center;justify-content:space-between;height:52px;border-radius:8px;padding:0 0.6rem;border:1px solid rgba(0,0,0,.06)}.bk-pal-sw i{font-style:normal;font-weight:700;font-size:1.1rem}.bk-pal-sw b{width:16px;height:16px;border-radius:50%;display:block}
.bk-pal small{font-size:0.74rem;color:var(--text-muted)}
.bk-cols{display:flex;flex-wrap:wrap;gap:0.9rem}.bk-col{display:flex;align-items:center;gap:0.5rem;font-size:0.8rem;color:var(--text)}.bk-col input[type=color]{-webkit-appearance:none;appearance:none;width:34px;height:34px;border:1px solid var(--border);border-radius:50%;padding:0;background:none;cursor:pointer}.bk-col input[type=color]::-webkit-color-swatch-wrapper{padding:0}.bk-col input[type=color]::-webkit-color-swatch{border:none;border-radius:50%}.bk-col code{font-size:0.72rem;color:var(--text-muted)}
.bk-fonts{display:flex;flex-wrap:wrap;gap:0.45rem;margin-bottom:0.9rem}.bk-font{height:36px;padding:0 0.8rem;border-radius:999px;border:1.5px solid var(--border);background:var(--surface);color:var(--text);font-size:0.95rem;cursor:pointer}.bk-font.on{border-color:var(--accent);background:var(--accent-glow)}
@media (max-width:760px){.bk-page{padding:1rem 1rem 6rem}.bk-two{grid-template-columns:1fr}.bk-grid{grid-template-columns:minmax(0,1fr);gap:0.6rem}.bk-stage{order:-1;top:0;z-index:3;background:var(--bg);margin-top:0.6rem;padding-bottom:0.2rem}.bk-stage>.bk-sec-t,.bk-stage-note{display:none}.bk-thumbs{flex-wrap:nowrap;overflow-x:auto}.bk-main{padding:0.5rem}.bk-pals{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}}
.bv-h1{font-family:Georgia,serif;font-weight:400;font-size:clamp(1.8rem,3vw,2.3rem);line-height:1.12;letter-spacing:-0.01em;color:var(--text);margin:0.6rem 0 0.5rem}
.bv-lede{font-size:0.95rem;color:var(--text-dim);line-height:1.55;margin:0 0 1.2rem;max-width:640px}
.bv-paste{width:100%;min-height:260px;padding:1.05rem 1.15rem;background:var(--surface);border:1px solid var(--border);border-radius:14px;color:var(--text);font-family:inherit;font-size:0.98rem;line-height:1.6;resize:vertical;box-sizing:border-box;transition:border-color .15s,box-shadow .15s}
.bv-paste:focus{outline:none;border-color:var(--border-strong,var(--text-muted));box-shadow:0 0 0 3px var(--accent-glow)}
.bv-paste::placeholder{color:var(--text-muted);opacity:0.75}
.bv-tools{display:flex;align-items:center;gap:0.2rem 0.6rem;flex-wrap:wrap;margin:0.6rem 0 0.9rem -0.5rem}
.bv-tools .sp{flex:1}
.bv-txt{display:inline-flex;align-items:center;gap:0.4rem;border:none;background:none;border-radius:8px;padding:0.42rem 0.55rem;font:inherit;font-size:0.84rem;font-weight:500;color:var(--text-dim);cursor:pointer;transition:background .12s,color .12s}
.bv-txt:hover,.bv-txt:focus-visible{background:var(--surface2);color:var(--text)}
.bv-txt svg{width:15px;height:15px;opacity:0.8}
.bv-primary{display:inline-flex;align-items:center;gap:0.45rem;height:40px;padding:0 1.15rem;border-radius:10px;border:none;background:var(--text);color:var(--surface);font:inherit;font-size:0.92rem;font-weight:500;cursor:pointer;transition:opacity .15s}
.bv-primary:hover{opacity:0.88}
.bv-primary:disabled{opacity:0.4;cursor:default}
.bv-note{font-size:0.8rem;color:var(--text-muted);line-height:1.5;margin:0}
.bv-sec{border-top:1px solid var(--border-subtle);padding:1.3rem 0 0.4rem;margin-top:1.1rem}
.bv-sec-h{font-size:0.8rem;font-weight:500;color:var(--text-muted);letter-spacing:0.01em;margin:0 0 0.6rem}
.bv-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-top:0.3rem}
.bv-kicker{font-size:0.68rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-muted);font-weight:600}
.bv-tag{font-family:Georgia,serif;font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.15;color:var(--text);margin:0.3rem 0 0.25rem}
.bv-sub{font-size:0.84rem;color:var(--text-muted)}
.bv-pill{display:inline-flex;align-items:center;height:24px;padding:0 0.6rem;border-radius:999px;background:var(--surface2);color:var(--text-dim);font-size:0.72rem;font-weight:600;white-space:nowrap}
.bv-pill.on{background:var(--accent-glow);color:var(--accent)}
.bv-prose{font-size:0.95rem;line-height:1.65;color:var(--text);max-width:680px;margin:0}
.bv-stale{display:flex;align-items:center;gap:0.6rem;flex-wrap:wrap;margin-top:0.9rem;padding:0.6rem 0.8rem;border-radius:10px;background:var(--surface2);font-size:0.84rem;color:var(--text-dim)}
/* The analysis in progress (owner 2026-10-13: "an animated progress bar when
   it's analyzing the voice"): a bar that fills with time, a shimmer, and the
   phase in words. */
.bv-prog{margin:0.9rem 0 0.3rem;max-width:560px}
.bv-prog .bar{height:4px;border-radius:999px;background:var(--surface2);overflow:hidden}
.bv-prog .fill{height:100%;width:2%;border-radius:999px;background:var(--text);position:relative;overflow:hidden;transition:width .6s ease}
.bv-prog .fill::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.45),transparent);animation:bvShimmer 1.4s linear infinite}
@keyframes bvShimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.bv-prog .txt{font-size:0.8rem;color:var(--text-muted);margin-top:0.45rem;min-height:1.2em}
@media (prefers-reduced-motion:reduce){.bv-prog .fill::after{animation:none}.bv-prog .fill{transition:none}}
.bv-full{margin-top:0.5rem}
.bv-full>summary{cursor:pointer;list-style:none;font-size:0.84rem;font-weight:500;color:var(--text-dim);padding:0.35rem 0;display:inline-flex;align-items:center;gap:0.35rem}
.bv-full>summary::-webkit-details-marker{display:none}
.bv-full>summary:hover{color:var(--text)}
.bv-full h4{font-size:0.8rem;font-weight:600;color:var(--text);margin:1rem 0 0.35rem}
.bv-full ul{margin:0;padding-left:1.1rem;font-size:0.9rem;line-height:1.6;color:var(--text)}
.bv-full li{margin:0.15rem 0}
.bv-rows{display:flex;flex-direction:column}
.bv-row{display:flex;align-items:center;gap:0.8rem;padding:0.5rem 0.4rem;margin:0 -0.4rem;border-top:1px solid var(--border-subtle);border-radius:8px}
.bv-rows .bv-row:first-child{border-top:none}
.bv-row:hover{background:var(--surface2)}
.bv-row .ic{width:28px;height:28px;border-radius:7px;background:var(--surface2);display:flex;align-items:center;justify-content:center;color:var(--text-muted);flex-shrink:0}
.bv-row .ic svg{width:14px;height:14px}
.bv-row input.nm{flex:1;min-width:0;border:none;background:none;font:inherit;font-size:0.9rem;font-weight:500;color:var(--text);padding:0.2rem 0.3rem;border-radius:6px;outline:none}
.bv-row input.nm:focus{background:var(--surface);box-shadow:0 0 0 1px var(--border)}
.bv-row .meta{flex-shrink:0;font-size:0.78rem;color:var(--text-muted);font-variant-numeric:tabular-nums}
.bv-row .x{border:none;background:none;color:var(--text-muted);cursor:pointer;padding:0.3rem;border-radius:6px;display:flex;opacity:0;transition:opacity .12s}
.bv-row:hover .x,.bv-row:focus-within .x{opacity:1}
.bv-row .x:hover{background:var(--surface);color:var(--text)}
@media (hover:none){.bv-row .x{opacity:0.6}}
.bv-addbox{margin-top:0.6rem;display:flex;flex-direction:column;gap:0.5rem}
.bv-addbox .bv-paste{min-height:150px}
.bv-addbox input{width:100%;box-sizing:border-box;padding:0.55rem 0.75rem;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--text);font:inherit;font-size:0.88rem;outline:none}
.bv-test{display:flex;gap:0.5rem;align-items:center;border:1px solid var(--border);border-radius:12px;background:var(--surface);padding:0.3rem 0.3rem 0.3rem 0.9rem;transition:border-color .15s,box-shadow .15s}
.bv-test:focus-within{border-color:var(--border-strong,var(--text-muted));box-shadow:0 0 0 3px var(--accent-glow)}
.bv-test input{flex:1;min-width:0;border:none;background:none;font:inherit;font-size:0.95rem;color:var(--text);outline:none;padding:0.5rem 0}
.bv-test input::placeholder{color:var(--text-muted);opacity:0.75}
.bv-test button{width:34px;height:34px;border-radius:9px;border:none;background:var(--text);color:var(--surface);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
.bv-test button:disabled{opacity:0.3;cursor:default}
.bv-test button svg{width:16px;height:16px}
.bv-out{margin-top:0.9rem;padding:1rem 1.1rem;border:1px solid var(--border-subtle);border-radius:12px;background:var(--surface);font-size:0.95rem;line-height:1.7;color:var(--text);white-space:pre-wrap;min-height:3.2rem}
.bv-out.is-busy{color:var(--text-muted)}
.bv-ask{display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap;margin-top:0.7rem;font-size:0.86rem;color:var(--text-dim)}
.bv-ask .k-btn{height:34px;font-size:0.84rem}
.bv-feedback{margin-top:0.7rem;display:flex;flex-direction:column;gap:0.5rem}
.bv-feedback textarea{min-height:88px}
.bv-rules{display:flex;flex-direction:column;margin:0.2rem 0 0.6rem}
.bv-rule{display:flex;align-items:center;gap:0.5rem;font-size:0.88rem;color:var(--text);padding:0.35rem 0;border-top:1px solid var(--border-subtle)}
.bv-rule:first-child{border-top:none}
.bv-rule span{flex:1}
.bv-rule .bv-txt{opacity:0;padding:0.25rem 0.45rem;font-size:0.78rem}
.bv-rule:hover .bv-txt,.bv-rule:focus-within .bv-txt{opacity:1}
@media (hover:none){.bv-rule .bv-txt{opacity:0.7}}
.bv-rulein{display:flex;gap:0.5rem;align-items:center}
.bv-rulein input{flex:1;min-width:0;padding:0.55rem 0.75rem;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--text);font:inherit;font-size:0.88rem;outline:none}
.bv-fields{display:grid;grid-template-columns:1fr 1fr;gap:0.75rem}
.bv-fields .bv-field-full{grid-column:1/-1}
.bv-field label{display:block;font-size:0.66rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--text-muted);font-weight:700;margin-bottom:5px}
.bv-field input,.bv-field textarea{width:100%;box-sizing:border-box;padding:0.6rem 0.75rem;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:0.86rem;font-family:inherit;outline:none;transition:border-color 0.12s;resize:vertical}
.bv-field input:focus,.bv-field textarea:focus{border-color:var(--border-strong,var(--text-muted))}
.bv-ctl{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:0.45rem 0}
.bv-control-label{font-size:0.88rem;color:var(--text-dim);font-weight:500}
.bv-seg{display:inline-flex;gap:2px;background:var(--surface2);padding:3px;border-radius:9px}
.bv-seg button{border:none;background:none;padding:0.3rem 0.8rem;border-radius:7px;font:inherit;font-size:0.78rem;font-weight:500;color:var(--text-muted);cursor:pointer}
.bv-seg button.active{background:var(--surface);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,0.12)}
.bv-textarea{width:100%;min-height:120px;padding:0.9rem 1rem;background:var(--surface);border:1px solid var(--border);border-radius:12px;color:var(--text);font-family:inherit;font-size:0.95rem;line-height:1.55;resize:vertical;box-sizing:border-box;transition:border-color 0.15s}
.bv-textarea::placeholder{color:var(--text-muted);opacity:0.7}
.bv-textarea:focus{outline:none;border-color:var(--border-strong,var(--text-muted))}
.bv-rowline{display:flex;align-items:center;justify-content:space-between;gap:0.8rem;flex-wrap:wrap;margin-top:0.5rem}
.bv-add-btn{background:transparent;border:1px solid var(--border);color:var(--text-dim);padding:0.45rem 1rem;border-radius:999px;font-size:0.86rem;font-weight:500;cursor:pointer;font-family:inherit;transition:all 0.12s}
.bv-add-btn:hover{border-color:var(--text-muted);color:var(--text)}
.bv-count{font-size:0.8rem;color:var(--text-muted)}
.bv-sample-list{display:flex;flex-direction:column;gap:0.35rem;margin-top:0.5rem}
.bv-sample-del{background:none;border:none;cursor:pointer;color:var(--text-muted);opacity:0.45;padding:0.15rem;display:flex;align-items:center}
.bv-sample-del:hover{opacity:1;color:var(--text)}
.bv-reset-btn{background:transparent;border:none;color:var(--text-muted);padding:0.5rem 0.8rem;font-size:0.86rem;cursor:pointer;font-family:inherit;border-radius:999px;transition:color 0.12s}
.bv-reset-btn:hover{color:var(--text-dim)}
.bv-story-header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.bv-story-toggle{display:flex;gap:0.25rem}
.bv-mini-chip{background:transparent;border:1px solid var(--border);color:var(--text-muted);padding:0.25rem 0.7rem;border-radius:999px;cursor:pointer;font-size:0.8rem;font-weight:500;font-family:inherit;transition:all 0.12s}
.bv-mini-chip:hover{color:var(--text-dim);border-color:var(--text-muted)}
.bv-mini-chip.active{background:var(--text);color:var(--bg);border-color:var(--text)}
.bv-story-card{display:flex;flex-direction:column;gap:0.4rem;padding:0.65rem 0.85rem;background:var(--surface);border-radius:10px;border:1px solid var(--border-subtle)}
.bv-story-card-row{display:flex;align-items:center;gap:0.55rem}
.bv-story-summary{flex:1;font-size:0.92rem;color:var(--text-dim);line-height:1.45;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.bv-story-summary.is-pending{color:var(--text-muted);font-style:italic}
.bv-story-tags{display:flex;flex-wrap:wrap;gap:0.3rem}
.bv-story-tag{background:var(--surface2,var(--bg));border:1px solid var(--border);color:var(--text-muted);padding:0.15rem 0.55rem;border-radius:999px;font-size:0.72rem;letter-spacing:0.01em}
.bv-voice-item{position:relative;display:flex;flex-direction:column;gap:1px;padding:0.55rem 1.8rem 0.55rem 0.75rem;border-radius:9px;cursor:pointer;border:1px solid transparent;min-width:0}
.bv-voice-item:hover{background:var(--surface2)}
.bv-voice-item.active{background:var(--surface2);font-weight:500}
.bv-voice-item .bvv-name{font-size:0.86rem;color:var(--text);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bv-voice-item .bvv-sub{font-size:0.66rem;color:var(--text-muted)}
.bv-voice-item .bvv-more{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:22px;height:20px;border:none;border-radius:6px;background:none;color:var(--text-muted);cursor:pointer;font-size:12px;opacity:0;font-family:inherit}
.bv-voice-item:hover .bvv-more,.bv-voice-item.active .bvv-more{opacity:1}
.bv-new-btn{display:flex;align-items:center;gap:0.4rem;margin-top:0.4rem;padding:0.5rem 0.75rem;border-radius:9px;border:1px dashed var(--border);background:none;color:var(--text-muted);font-size:0.8rem;font-weight:500;cursor:pointer;font-family:inherit;white-space:nowrap}
.bv-new-btn:hover{color:var(--text);border-color:var(--text-muted)}
@media(max-width:860px){
  .bv-workspace{flex-direction:column;overflow-y:auto}
  .bv-list-col{flex:0 0 auto;border-right:none;border-bottom:1px solid var(--border);flex-direction:row;overflow-x:auto;gap:0.4rem;padding:0.6rem 0.8rem}
  .bv-voice-item{flex:0 0 auto;padding:0.45rem 1.6rem 0.45rem 0.65rem}
  .bv-main{overflow-y:visible;padding:1rem 1rem 5rem}
  .bv-fields{grid-template-columns:1fr}
  .bv-paste{min-height:200px;font-size:0.95rem}
  .bv-ctl{align-items:flex-start;flex-direction:column;gap:0.45rem}
}

.again-btn{width:auto;min-width:180px;margin-left:auto;margin-right:auto;display:block;background:transparent;border:1px solid var(--border);color:var(--text-muted);padding:0.7rem 2rem;border-radius:999px;cursor:pointer;font-size:0.92rem;font-weight:500;letter-spacing:0.01em;transition:all 0.15s var(--ease);font-family:inherit}
.again-btn:hover:not(:disabled){border-color:var(--accent-dim);color:var(--text-dim)}
.again-btn:disabled{opacity:0.2;cursor:not-allowed}
.desktop-only{display:none}@media(min-width:801px){.desktop-only{display:block}}
.kb-hint{font-size:1rem;color:var(--text-muted);text-align:center;opacity:0.3;font-weight:500}

.output-area{padding:0;display:flex;flex-direction:column;gap:0.9rem;width:100%;max-width:640px}

.empty-state{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.4rem;text-align:center;pointer-events:none;padding:3rem;background:var(--bg)}
.empty-state .empty-title{font-size:1.25rem;color:var(--text-dim);opacity:0.2;font-weight:500}
.empty-state p{font-size:0.92rem;letter-spacing:0.01em;color:var(--text-muted);opacity:0.45;font-weight:400}

.post-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;overflow:hidden;animation:cardIn 0.2s ease;flex-shrink:0}
@keyframes cardIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.post-meta{padding:0.45rem 0.85rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:0.8rem}
.post-tag{font-size:1rem;letter-spacing:0.04em;text-transform:uppercase;color:var(--text-muted);font-weight:500}
.post-actions{display:flex;gap:0.25rem;align-items:center}
.copy-btn,.save-btn,.delete-item-btn{background:transparent;border:none;color:var(--text-muted);padding:0.15rem 0.3rem;border-radius:4px;cursor:pointer;font-size:0.82rem;font-weight:400;letter-spacing:0;text-transform:none;transition:all 0.1s;user-select:none;font-family:inherit;opacity:0.5}
.copy-btn:hover,.save-btn:hover,.delete-item-btn:hover{color:var(--text);opacity:1}
.copy-btn.copied,.save-btn.saved{color:var(--accent);opacity:1}
.threads-post-btn{background:var(--accent)!important;color:var(--accent-fg,#fff)!important;opacity:1!important;border-radius:4px;padding:0.15rem 0.5rem!important;font-weight:500!important}
.threads-post-btn:hover{opacity:0.85!important}
.ai-note{padding:0.4rem 1rem;font-size:1rem;font-style:italic;color:var(--text-muted);background:var(--surface2);border-bottom:1px solid var(--border);opacity:0.5}
.post-body{padding:1rem 1.1rem;font-size:1rem;font-weight:400;line-height:1.75;color:var(--text);white-space:pre-wrap;word-break:break-word}
.post-footer{padding:0.35rem 1rem;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.char-count{font-size:1rem;color:var(--text-muted);font-weight:500;font-variant-numeric:tabular-nums}
.char-count.over{color:var(--danger)}
.post-timestamp{font-size:1rem;color:var(--text-muted);opacity:0.4}

/* Liquid-glass loading card. Same shimmer recipe as .mirror-onboarding
   but tinted with the user's accent so it feels on-brand. */
.loading-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:1.5rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.5rem;flex-shrink:0;min-height:90px;position:relative;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,0.04),0 2px 20px rgba(0,0,0,0.15)}
.loading-card::before{content:'';position:absolute;inset:-50%;width:200%;height:200%;background:linear-gradient(105deg,transparent 40%,var(--accent-glow) 45%,var(--accent-glow) 50%,var(--accent-glow) 55%,transparent 60%);animation:mirrorShimmer 6s ease-in-out infinite;pointer-events:none;opacity:0.7}
html.light .loading-card{box-shadow:0 1px 0 rgba(0,0,0,0.02),0 4px 24px rgba(0,0,0,0.06)}
html.light .loading-card::before{opacity:0.5}
.loading-card>*{position:relative;z-index:1}
.loading-logo{position:relative;width:42px;height:42px}
.loading-logo img{width:42px;height:42px;object-fit:contain;animation:logoPulse 1.4s ease-in-out infinite}
:root .loading-logo img{filter:invert(1) brightness(2)}
html.light .loading-logo img{filter:none}
@keyframes starPulse{0%,100%{opacity:0.15;transform-origin:center;transform:scale(0.85)}50%{opacity:0.8;transform:scale(1.1)}}
.loading-text{font-size:0.9rem;letter-spacing:0.02em;color:var(--text-muted);font-weight:500}
.error-card{background:none;border:none;border-radius:0;padding:0.3rem 0;font-size:1rem;color:var(--danger)}

.carousel-output{padding:0;display:flex;flex-direction:column;gap:0.9rem;width:100%;max-width:640px}

.carousel-result{display:flex;flex-direction:column;gap:0.7rem;animation:cardIn 0.2s ease}
.carousel-meta{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:0.55rem 0.85rem;display:flex;align-items:center;justify-content:space-between}
.carousel-meta-actions{display:flex;gap:0.35rem;align-items:center}
.slide-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;overflow:hidden}
.se-slide{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:0.6rem;margin-bottom:0.4rem;position:relative}
.se-slide textarea{width:100%;background:transparent;border:none;color:var(--text);font-size:0.88rem;font-family:inherit;line-height:1.5;resize:none;min-height:48px;padding:0;outline:none;display:block;overflow-y:hidden;box-sizing:border-box}
.se-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:0.35rem}
.se-num{font-size:0.68rem;font-weight:600;color:var(--text-muted);letter-spacing:0.04em;text-transform:uppercase}
.se-actions{display:flex;gap:0.2rem}
.se-actions button{background:none;border:none;cursor:pointer;color:var(--text-muted);padding:0.15rem;display:flex;align-items:center;transition:color 0.12s}
.se-actions button:hover{color:var(--text)}
.se-add-btn{display:flex;align-items:center;justify-content:center;gap:0.3rem;width:100%;padding:0.35rem;border:1px dashed var(--border);border-radius:8px;background:none;color:var(--text-muted);font-size:0.75rem;font-weight:500;cursor:pointer;font-family:inherit;transition:all 0.12s;margin-bottom:0.4rem}
.se-add-btn:hover{border-color:var(--accent);color:var(--text)}
.se-toggle{display:flex;gap:0.25rem;margin-top:0.3rem}
.se-toggle button{font-size:0.72rem;padding:0.25rem 0.6rem;border-radius:999px;border:1px solid var(--border);background:none;color:var(--text-muted);cursor:pointer;font-family:inherit;font-weight:500;transition:all 0.12s}
.se-toggle button.active{background:var(--accent);border-color:var(--accent);color:var(--accent-fg,#fff)}
.se-toggle button:hover:not(.active){border-color:var(--accent-dim);color:var(--text)}
.se-slide[draggable="true"]{cursor:grab}
.ds-thumb{transition:transform 0.18s var(--ease),opacity 0.15s var(--ease),border-color 0.12s}
/* Mobile reorder (owner 2026-10-02): a press-and-hold must never start
   iOS text selection, the link/image callout or the tap highlight (the
   "purple box"), and the thumbnail image must not become a native drag. */
.ds-thumb,.ds-thumb *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.ds-thumb img{-webkit-user-drag:none;pointer-events:none}
.ds-thumb.lifting{outline:none}
.se-slide.dragging{opacity:0.4;background:var(--accent-glow)}
.se-slide.drag-over-top{border-top:2px solid var(--accent) !important}
.se-slide.drag-over-bottom{border-bottom:2px solid var(--accent) !important}
#designLayout.studio-mode{padding:0 !important;overflow:hidden !important;overflow-y:hidden !important;overflow-x:hidden !important;align-items:stretch !important;position:relative !important}
#designLayout.studio-mode>#designConfigPanel{position:absolute !important;top:0;left:0;right:0;bottom:0;width:100% !important;height:100% !important}
.planner-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:0.8rem;margin-bottom:0.5rem;position:relative;transition:all 0.15s}
.planner-card .planner-card{border:none;padding:0;margin:0;background:none}
.planner-card:hover{border-color:var(--accent-dim)}
.planner-card-header{display:flex;align-items:center;gap:0.5rem;margin-bottom:0.4rem}
.planner-card-platform{width:22px;height:22px;border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.planner-card-identity{font-size:0.78rem;font-weight:500;color:var(--text-dim)}
.planner-card-date{font-size:0.72rem;color:var(--text-muted);margin-left:auto}
.planner-card-body{font-size:0.85rem;color:var(--text);line-height:1.5;margin-bottom:0.5rem}
.planner-card-body.truncated{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.planner-card-footer{display:flex;align-items:center;justify-content:space-between}
.planner-card-metrics{display:flex;gap:0.8rem;opacity:0.4}
.planner-card-metric{display:flex;align-items:center;gap:0.2rem;font-size:0.72rem;color:var(--text-muted)}
.planner-card-actions{display:flex;gap:0.2rem}
.planner-card-actions button{background:none;border:none;cursor:pointer;color:var(--text-muted);padding:0.2rem;border-radius:4px;transition:all 0.1s;opacity:0.5}
.planner-card-actions button:hover{opacity:1;color:var(--text)}
.planner-card-pill{font-size:0.62rem;padding:0.12rem 0.4rem;border-radius:4px;background:var(--surface2);color:var(--text-muted);font-weight:500;text-transform:uppercase;letter-spacing:0.04em}
.planner-card.editing .planner-card-body{display:none}
.planner-card-edit{display:none;margin-bottom:0.5rem}
.planner-card.editing .planner-card-edit{display:block}
.planner-card-edit textarea{width:100%;min-height:80px;padding:0.5rem 0.6rem;border-radius:8px;border:1px solid var(--border);background:var(--surface2);color:var(--text);font-size:0.85rem;font-family:inherit;line-height:1.5;resize:vertical;outline:none;box-sizing:border-box}
.planner-card-edit-actions{display:flex;gap:0.3rem;margin-top:0.4rem;justify-content:flex-end}
.planner-card-edit-actions button{padding:0.3rem 0.7rem;border-radius:8px;font-size:0.78rem;font-weight:500;cursor:pointer;font-family:inherit;transition:all 0.12s}
.planner-inline-composer{background:var(--surface);border:1px solid var(--accent);border-radius:12px;padding:0.8rem;margin-bottom:0.8rem}
.planner-inline-composer textarea{width:100%;min-height:80px;padding:0.5rem 0.6rem;border-radius:8px;border:1px solid var(--border);background:var(--surface2);color:var(--text);font-size:0.85rem;font-family:inherit;line-height:1.5;resize:vertical;outline:none;box-sizing:border-box;margin-bottom:0.5rem}
@media(max-width:768px){
  #plannerPlatformFilter{padding:0.3rem 1rem 0}
  .planner-card{padding:0.6rem}
  .planner-card-footer{flex-wrap:wrap;gap:0.4rem}
  .planner-card-metrics{gap:0.5rem}
  .ds-format-toolbar{display:none !important}
}
/* 3-Panel Design Editor */
.design-studio{display:flex;flex-direction:row;width:100%;height:100%;overflow:hidden;min-height:0}
/* ── Chat thread rail (Create + Mirror workspaces, 2026-07-15) ── */
.chat-shell{display:flex;flex:1;min-height:0;height:100%;background:var(--bg)}
.chat-shell>.create-layout-v2,.chat-shell>.mirror-layout{background:transparent}
html.light .chat-shell{background:#fff}
.chat-shell>.create-layout-v2,.chat-shell>.mirror-layout{flex:1;min-width:0}
/* Chats panel (owner request 2026-09-13): slide-out from the side at
   every width - the sidebar nav list is the everyday surface, the
   panel is the full manager. No inline column, no collapsed state. */
.chat-rail{position:fixed;right:0;top:0;bottom:0;width:min(280px,82vw);z-index:9000;border-left:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;background:var(--bg);transform:translateX(100%);transition:transform 0.2s;box-shadow:-8px 0 30px rgba(0,0,0,0.35);padding-top:env(safe-area-inset-top,0px)}
.chat-rail.open{transform:translateX(0)}
/* On a desktop the open panel takes a column of its own instead of
   floating over the page (member report 2026-10-10: on every MacBook width
   the fixed panel sat exactly over the composer's Send arrow, and nothing
   closed it). Phones keep the slide-out drawer. */
@media(min-width:801px){
  .chat-rail{position:relative;top:auto;bottom:auto;right:auto;transform:none;width:0;order:2;flex-shrink:0;border-left:0;box-shadow:none;transition:width 0.2s;padding-top:0;z-index:1}
  .chat-rail.open{width:280px;border-left:1px solid var(--border)}
}
.chat-rail-head{display:flex;align-items:center;justify-content:space-between;padding:0.65rem 0.7rem 0.35rem}
.chat-rail-title{font-size:0.68rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-muted);font-weight:700;white-space:nowrap}
.chat-rail-new{display:flex;align-items:center;gap:0.4rem;margin:0.1rem 0.55rem 0.45rem;padding:0.5rem 0.7rem;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:0.8rem;font-weight:600;cursor:pointer;font-family:inherit;transition:border-color 0.12s;white-space:nowrap}
.chat-rail-new:hover{border-color:var(--accent)}
.chat-rail-list{flex:1;overflow-y:auto;padding:0 0.45rem 0.6rem;display:flex;flex-direction:column;gap:2px}
.chat-rail-item{position:relative;display:flex;flex-direction:column;gap:1px;padding:0.45rem 1.7rem 0.45rem 0.6rem;border-radius:9px;cursor:pointer;border:1px solid transparent;min-width:0}
.chat-rail-item:hover{background:var(--surface)}
.chat-rail-item.active{background:var(--surface);border-color:var(--border)}
.chat-rail-item .ct-title{font-size:0.8rem;color:var(--text);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-rail-item .ct-date{font-size:0.65rem;color:var(--text-muted)}
.chat-rail-item .ct-more{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:22px;height:20px;border:none;border-radius:6px;background:none;color:var(--text-muted);cursor:pointer;font-size:12px;opacity:0;font-family:inherit}
.chat-rail-item:hover .ct-more,.chat-rail-item.active .ct-more{opacity:1}
.chat-rail-more{margin:0.2rem 0.55rem;padding:0.35rem;border:none;background:none;color:var(--text-muted);font-size:0.72rem;cursor:pointer;font-family:inherit;text-align:left}
.chat-rail-toggle{display:inline-flex;align-items:center;gap:0.35rem;background:none;border:1px solid var(--border);border-radius:999px;color:var(--text-muted);cursor:pointer;padding:0.28rem 0.75rem;font-size:0.72rem;font-weight:600;font-family:inherit;transition:color 0.12s,border-color 0.12s}
.chat-rail-toggle:hover{color:var(--text);border-color:var(--accent)}
.chat-rail-item.archived{opacity:0.6}
.ct-pin-mark{flex:0 0 auto;display:inline-block;margin-right:4px;vertical-align:-1px;color:var(--accent);opacity:0.8}
.nav-chat-item{position:relative;padding-right:1.7rem}
.nav-chat-item .nci-more{position:absolute;right:0;top:50%;transform:translateY(-50%);width:28px;height:28px;border:none;border-radius:6px;background:none;color:var(--text-muted);cursor:pointer;font-size:12px;opacity:0;font-family:inherit;line-height:1;padding:0}
.nav-chat-item:hover .nci-more,.nav-chat-item.active .nci-more,.nav-chat-item:focus-within .nci-more{opacity:1}
.design-studio-left{flex:0 0 240px;min-width:240px;border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden}
.design-studio-left-header{padding:0.6rem 0.8rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.design-studio-left-header span{font-size:0.72rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--text-muted);font-weight:500}
.design-studio-posts{flex:1;overflow-y:auto;padding:0.4rem}
.ds-post-item{display:block;width:100%;text-align:left;padding:0.5rem 0.6rem;border-radius:8px;border:1px solid transparent;background:none;cursor:pointer;font-family:inherit;font-size:0.78rem;color:var(--text-dim);line-height:1.4;transition:all 0.12s;margin-bottom:0.25rem}
.ds-post-item:hover{background:var(--surface2);color:var(--text)}
.ds-post-item.active{border-color:var(--accent);background:var(--accent-glow);color:var(--text)}
.ds-post-item .ds-post-preview{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#designFontPxInput::-webkit-outer-spin-button,#designFontPxInput::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.design-studio-center{flex:1 1 auto;min-width:0;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;overflow:auto;padding:1.5rem 1rem;background:var(--bg)}
.design-studio-right{flex:0 0 280px;min-width:280px;min-height:0;border-left:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden}
.ds-right-tabs{display:flex;border-bottom:1px solid var(--border);flex-shrink:0}
.ds-right-tab{flex:1;background:none;border:none;border-bottom:2px solid transparent;color:var(--text-muted);padding:0.55rem 0;font-size:0.78rem;font-weight:500;cursor:pointer;font-family:inherit;transition:all 0.12s}
.ds-right-tab.active{color:var(--text);border-bottom-color:var(--accent)}
.ds-right-tab:hover:not(.active){color:var(--text-dim)}
.ds-right-body{flex:1;overflow-y:auto;padding:0.8rem}
.ds-section-label{font-size:0.65rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--text-muted);font-weight:500;margin-bottom:0.35rem;margin-top:0.8rem}
.ds-section-label:first-child{margin-top:0}
.ds-chip-row{display:flex;gap:0.25rem;margin-bottom:0.5rem}
.ds-export-btn{display:flex;align-items:center;gap:0.5rem;width:100%;padding:0.55rem 0.7rem;border-radius:10px;border:1px solid var(--border);background:none;cursor:pointer;font-family:inherit;font-size:0.82rem;color:var(--text);transition:all 0.12s;margin-bottom:0.35rem;text-align:left}
.ds-export-btn:hover{border-color:var(--accent);background:var(--accent-glow)}
.ds-export-btn svg{flex-shrink:0;color:var(--text-muted)}
@media(max-width:768px){
  .design-studio{flex-direction:column;height:calc(100vh - 52px);height:calc(100dvh - 52px);overflow:hidden;position:relative}
  .design-studio-left{position:fixed;bottom:0;left:0;right:0;width:100%;height:auto;max-height:0;border-right:none;border-top:1px solid var(--border);overflow:hidden;transition:max-height 0.25s ease;z-index:60;background:var(--bg);border-radius:16px 16px 0 0;box-shadow:0 -4px 20px rgba(0,0,0,0.3)}
  .design-studio-left.show{max-height:45vh;overflow-y:auto}
  .design-studio-posts{display:flex;flex-wrap:wrap;gap:0.3rem;padding:0.4rem}
  .ds-post-item{flex-shrink:0;width:calc(50% - 0.2rem);min-width:0;margin-bottom:0}
  .design-studio-center{flex:1;min-height:0;padding:0.5rem 0.6rem;overflow:auto}
  .design-studio-right{position:fixed;bottom:0;left:0;right:0;width:100%;border-left:none;border-top:1px solid var(--border);max-height:0;overflow:hidden;transition:max-height 0.25s ease;z-index:60;background:var(--bg);border-radius:16px 16px 0 0;box-shadow:0 -4px 20px rgba(0,0,0,0.3)}
  .design-studio-right.show{max-height:60vh;overflow-y:auto}
  .design-studio-right .ds-right-body{max-height:none;overflow:visible;padding:0.5rem 0.8rem}
  .ds-slide-wrap textarea{height:auto !important;min-height:60px !important;max-height:200px;overflow:hidden !important}
  #designToolbar{flex-wrap:wrap;gap:0.3rem;padding:0.3rem 0}
  #designToolbar .chip{font-size:0.65rem !important;padding:0.18rem 0.45rem !important}
  .ds-mobile-btn{display:flex !important}
  .ds-bottom-dock{display:flex !important}
  #dsShareWrap{display:none !important}
  #designLayout.studio-mode{overflow:hidden}
}
.ds-bottom-dock{display:none;position:fixed;bottom:0;left:0;right:0;background:var(--bg);border-top:1px solid var(--border);padding:0.5rem 0.8rem;padding-bottom:max(0.5rem,env(safe-area-inset-bottom));z-index:55;gap:0.4rem;align-items:center;justify-content:center}
.ds-dock-btn{background:none;border:1px solid var(--border);border-radius:8px;color:var(--text-muted);padding:0.4rem 0.8rem;cursor:pointer;font-family:inherit;font-size:0.75rem;font-weight:500;display:flex;align-items:center;gap:0.3rem;transition:all 0.12s;flex:1;justify-content:center}
.ds-dock-btn:hover,.ds-dock-btn.active{border-color:var(--accent);color:var(--text)}
.ds-sheet-handle{width:36px;height:4px;border-radius:2px;background:var(--border);margin:0.4rem auto 0.2rem}

.analytics-tab{background:none;border:none;border-bottom:2px solid transparent;color:var(--text-muted);padding:0.7rem 1.1rem;font-size:0.84rem;font-weight:500;cursor:pointer;font-family:inherit;transition:all 0.15s;white-space:nowrap}
.analytics-tab:hover{color:var(--text)}
.analytics-tab.active{color:var(--text);border-bottom-color:var(--accent)}
.a-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:1rem 1.1rem;display:flex;flex-direction:column;gap:0.15rem;transition:border-color 0.12s}
.a-card:hover{border-color:var(--accent-dim,var(--accent-dim))}
.a-card.a-hero{padding:1.5rem 1.5rem;border-radius:16px}
.a-card-label{font-size:0.75rem;color:var(--text-muted);font-weight:400;letter-spacing:0.01em}
.a-card-value{font-size:1.5rem;font-weight:700;color:var(--text);line-height:1.15;margin-top:0.1rem}
.a-hero .a-card-value{font-size:2.8rem;font-weight:700;letter-spacing:-0.02em}
.a-card-sub{font-size:0.72rem;color:var(--text-muted);font-weight:400;margin-top:0.15rem}
.a-card-trend{font-size:0.7rem;font-weight:600;margin-top:0.2rem;display:inline-flex;align-items:center;gap:0.15rem}
.a-card-trend.up{color:var(--accent)}
.a-card-trend.down{color:var(--danger,#e55757)}
.a-card-trend.flat{color:var(--text-muted);font-weight:400}
.a-perf-tag{font-size:0.66rem;font-weight:600;text-transform:uppercase;letter-spacing:0.04em;padding:0.15rem 0.42rem;border-radius:6px;margin-left:0.4rem;vertical-align:middle;display:inline-block}
.a-perf-tag.high{background:var(--perf-high-bg);color:var(--perf-high-text)}
.a-perf-tag.avg{background:var(--perf-avg-bg);color:var(--perf-avg-text)}
.a-perf-tag.low{background:var(--perf-low-bg);color:var(--perf-low-text)}
/* Empty states — shown when the user has no data on Overview or Content.
   Replaces the dashboard rather than rendering zeros next to "publish to
   see..." messages, which made the surface feel broken. */
.a-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:5rem 1.5rem;min-height:50vh}
.a-empty-state-icon{width:48px;height:48px;color:var(--text-muted);opacity:0.35;margin-bottom:1.2rem}
.a-empty-state-title{font-size:1.15rem;font-weight:600;color:var(--text);margin-bottom:0.4rem}
.a-empty-state-sub{font-size:0.88rem;color:var(--text-muted);line-height:1.55;max-width:340px;margin-bottom:1.4rem}
.a-empty-state-cta{padding:0.55rem 1.4rem;border-radius:999px;border:none;background:var(--accent);color:var(--accent-fg,#fff);font-size:0.86rem;font-weight:600;cursor:pointer;font-family:inherit;transition:all 0.15s}
.a-empty-state-cta:hover{transform:translateY(-1px);box-shadow:0 4px 14px var(--accent-glow)}
.a-empty-ghost{width:100%;max-width:360px;margin-top:0.8rem;padding:0.85rem 1rem;border:1px dashed var(--border);border-radius:14px;opacity:0.45;background:var(--surface)}
.a-empty-ghost-line{height:8px;border-radius:4px;background:var(--surface2);margin-bottom:0.55rem}
.a-empty-ghost-line:last-child{margin-bottom:0}
.a-section-label{font-size:0.72rem;color:var(--text-muted);font-weight:500;margin-bottom:0.6rem;margin-top:2rem}
.a-section-label:first-child{margin-top:0}
.a-post-row{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:0.85rem 1rem 0.85rem 1.1rem;margin-bottom:0.4rem;transition:all 0.2s ease;cursor:pointer}
.a-post-row::before{content:'';position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:2px;background:transparent;transition:background 0.2s ease}
.a-post-row:hover{border-color:var(--border-hover);transform:translateY(-1px);box-shadow:0 2px 8px rgba(0,0,0,0.06)}
.a-post-row.high{background:var(--perf-high-bg);border-color:var(--perf-high-border);box-shadow:0 8px 24px rgba(16,185,129,0.12)}
.a-post-row.high::before{background:var(--perf-high-text)}
.a-post-row.high:hover{transform:translateY(-2px)}
.a-post-row.avg{background:var(--surface);border-color:var(--perf-avg-border)}
.a-post-row.low{background:var(--perf-low-bg);border-color:var(--perf-low-border);opacity:0.85}
.a-post-text{font-size:0.86rem;color:var(--text);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.a-post-meta{display:flex;gap:0.7rem;margin-top:0.4rem;flex-wrap:wrap;align-items:center}
.a-post-stat{font-size:0.74rem;color:var(--text-muted);font-weight:400}
.a-post-stat strong{font-weight:600;color:var(--text-dim)}
.a-post-date{font-size:0.7rem;color:var(--text-muted);white-space:nowrap}
.a-post-link{font-size:0.7rem;color:var(--accent);text-decoration:none;font-weight:500}
.a-post-link:hover{text-decoration:underline}
.a-plat-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:1rem 1.1rem;transition:border-color 0.12s}
.a-plat-card:hover{border-color:var(--accent-dim,var(--accent-dim))}
.a-plat-header{display:flex;align-items:center;gap:0.5rem;margin-bottom:0.5rem}
.a-plat-header svg{flex-shrink:0}
.a-plat-name{font-size:0.9rem;font-weight:600;color:var(--text)}
.a-plat-badge{font-size:0.62rem;padding:0.12rem 0.4rem;border-radius:999px;font-weight:500}
.a-plat-badge.connected{background:var(--accent-glow);color:var(--accent)}
.a-plat-badge.soon{background:rgba(255,255,255,0.05);color:var(--text-muted)}
.a-plat-stats{font-size:0.78rem;color:var(--text-dim);line-height:1.6}
.a-plat-link{font-size:0.72rem;color:var(--accent);text-decoration:none;font-weight:500;margin-top:0.4rem;display:inline-block}
.a-plat-link:hover{text-decoration:underline}
.a-chart-wrap{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:1.2rem 1.3rem 0.8rem;margin-bottom:1.5rem}
.a-insights-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:1.1rem 1.3rem;margin-bottom:1.5rem}
.a-insights-btn{padding:0.5rem 1.1rem;border-radius:999px;border:none;background:var(--accent);color:var(--accent-fg,#fff);font-size:0.8rem;font-weight:600;cursor:pointer;font-family:inherit;flex-shrink:0;white-space:nowrap}
.a-insights-btn:disabled{opacity:0.55;cursor:default}
.a-chart-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:0.8rem}
.a-chart-title{font-size:0.88rem;font-weight:600;color:var(--text)}
.a-chart-toggles{display:flex;gap:0.2rem}
.a-chart-toggle{background:none;border:1px solid var(--border);border-radius:6px;padding:0.2rem 0.55rem;min-height:28px;font-size:0.68rem;color:var(--text-muted);cursor:pointer;font-family:inherit;font-weight:500;transition:all 0.12s}
.a-chart-toggle:hover{color:var(--text)}
.a-chart-toggle.active{background:var(--accent-glow);border-color:var(--accent-dim);color:var(--accent)}
.a-chart-area{width:100%;height:200px;position:relative}
.a-drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:9998;opacity:0;pointer-events:none;transition:opacity 0.2s}
.a-drawer-overlay.show{opacity:1;pointer-events:auto}
.a-drawer{position:fixed;top:0;right:0;bottom:0;width:420px;max-width:90vw;background:var(--bg);border-left:1px solid var(--border);z-index:9999;transform:translateX(100%);transition:transform 0.22s ease-out;overflow-y:auto;padding:1.5rem;pointer-events:none}
.a-drawer.show{transform:translateX(0);pointer-events:auto}
.a-drawer.show{transform:translateX(0)}
.a-drawer-close{position:absolute;top:1rem;right:1rem;background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:1.2rem;padding:0.3rem}
/* Replay Drawer V1 — Threads-style preview block */
.replay-block{transition:opacity 0.1s ease-out}
.replay-block.swap{opacity:0}
.replay-header{display:flex;align-items:center;gap:0.6rem;margin-bottom:1rem}
.replay-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-dim));color:var(--accent-fg,#fff);display:inline-flex;align-items:center;justify-content:center;font-size:0.86rem;font-weight:600;flex-shrink:0;line-height:1;font-family:inherit}
.replay-name{font-size:0.86rem;font-weight:600;color:var(--text);line-height:1.3}
.replay-meta{font-size:0.72rem;color:var(--text-muted);line-height:1.3;margin-top:0.1rem}
.replay-body{font-size:0.94rem;color:var(--text);line-height:1.6;white-space:pre-wrap;word-break:break-word;max-width:300px;margin:0 0 1rem 0}
.replay-body p{margin:0 0 10px 0}
.replay-body p:last-child{margin-bottom:0}
.replay-engagement{display:flex;align-items:center;gap:1.1rem;color:var(--text-muted);font-size:0.78rem;font-weight:500;padding:0.2rem 0 1rem 0;flex-wrap:wrap;margin-top:16px}
.replay-engagement-item{display:inline-flex;align-items:center;gap:0.3rem;line-height:1;transition:transform 0.15s ease,opacity 0.15s ease;cursor:default}
.replay-engagement-item:hover{transform:scale(1.05);opacity:0.9}
.replay-engagement-item:active{transform:scale(0.97)}
.replay-engagement-item svg{width:14px;height:14px;flex-shrink:0;opacity:0.7}
.replay-divider{height:1px;background:var(--border);margin:0.2rem 0 1rem 0}
.replay-insight{padding:0.55rem 0 1rem 0;font-size:14px;font-weight:500;line-height:1.55;margin-top:18px}
.replay-insight-label{font-size:0.66rem;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:var(--text-muted);margin-bottom:0.35rem}
.replay-insight-sentence{color:var(--text)}
.replay-insight-sentence strong{font-weight:600}
.replay-insight.high .replay-insight-sentence strong{color:var(--perf-high-text)}
.replay-insight.avg .replay-insight-sentence strong{color:var(--perf-avg-text)}
.replay-insight.low .replay-insight-sentence strong{color:var(--perf-low-text)}
@media(max-width:700px){
  .a-hero .a-card-value{font-size:2rem}
  .a-card-value{font-size:1.3rem}
  .a-chart-area{height:160px}
  .a-drawer{width:100%;max-width:100%}
}
.slide-header{padding:0.4rem 0.85rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.ds-insert-between{opacity:0.25 !important;transition:opacity 0.15s !important}
.ds-insert-between:hover,.ds-insert-between:focus{opacity:0.7 !important}
@media(max-width:768px){.ds-insert-between{opacity:0.35 !important}}
.slide-num{font-size:1rem;letter-spacing:0.04em;text-transform:uppercase;color:var(--text-muted);font-weight:500}
.slide-row{border-bottom:1px solid var(--border)}
.slide-row:last-child{border-bottom:none}
.slide-body{padding:0.9rem 1.1rem;font-size:1rem;font-weight:400;line-height:1.7;color:var(--text);white-space:pre-wrap;word-break:break-word}
.hook-section{background:var(--surface);border:1px solid var(--border);border-radius:10px;overflow:hidden}
.hook-section-header{padding:0.45rem 0.85rem;border-bottom:1px solid var(--border);font-size:0.82rem;letter-spacing:0.02em;color:var(--text-muted);font-weight:600}
.hook-option{padding:0.7rem 1.1rem;border-bottom:1px solid var(--border);font-size:1rem;font-weight:400;line-height:1.55;color:var(--text-dim);display:flex;gap:0.7rem;align-items:flex-start}
.hook-option:last-child{border-bottom:none}
.hook-num{font-size:1rem;color:var(--text-muted);min-width:14px;padding-top:0.1rem;font-weight:500}
.copy-all-btn{background:transparent;border:1px solid var(--border);color:var(--text-muted);padding:0.3rem 0.65rem;border-radius:8px;cursor:pointer;font-size:0.85rem;font-weight:500;transition:all 0.15s var(--ease);font-family:inherit}
.copy-all-btn:hover{border-color:var(--accent-dim);color:var(--text)}
.copy-all-btn.copied{border-color:var(--accent);color:var(--accent)}
.verify-badge{font-size:0.78rem;font-weight:500;color:var(--danger);border:1px solid var(--danger);padding:0.12rem 0.4rem;border-radius:5px;opacity:0.6}


/* Mirror layout */
.mirror-layout{display:flex;flex-direction:column;flex:1;min-height:0;background:var(--bg);position:relative}
.mirror-header{padding:0.75rem 1.3rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;background:var(--bg);flex-wrap:wrap;gap:0.4rem;min-height:64px}
.mirror-brand{display:flex;flex-direction:column;gap:0}
.mirror-title{font-size:1.1rem;font-weight:600;color:var(--text);letter-spacing:-0.01em}
.mirror-subtitle{font-size:0.75rem;color:var(--text-muted);font-weight:400;letter-spacing:0.01em}
.mirror-tone-row{margin-left:auto;display:flex;gap:0.3rem;flex-shrink:0}
.tone-chips-row{display:flex;gap:0.3rem;flex-wrap:wrap}
.mirror-conversation{flex:1;overflow-y:auto;padding:1.2rem 1.2rem 1.5rem;display:flex;flex-direction:column;gap:1.5rem;position:relative;max-width:880px;margin-left:auto;margin-right:auto;width:100%}
.mirror-conversation::-webkit-scrollbar{width:3px}.mirror-conversation::-webkit-scrollbar-track{background:transparent}.mirror-conversation::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
.mirror-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.55rem;padding:2rem;text-align:center}
.mirror-empty-logo{margin-bottom:0.3rem}
.mirror-empty-hint{font-size:0.92rem;color:var(--text-muted);max-width:300px;line-height:1.55}
.mirror-onboarding{display:flex;flex-direction:column;align-items:center;gap:0;max-width:400px;text-align:center;background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:2rem 2.5rem 1.6rem;box-shadow:inset 0 1px 0 rgba(255,255,255,0.04),0 2px 20px rgba(0,0,0,0.15);position:relative;overflow:hidden}
.mirror-onboarding::before{content:'';position:absolute;inset:-50%;width:200%;height:200%;background:linear-gradient(105deg,transparent 41%,rgba(255,255,255,0.07) 46%,rgba(255,255,255,0.32) 50%,rgba(255,255,255,0.07) 54%,transparent 59%);animation:mirrorShimmer 5s ease-in-out infinite;pointer-events:none;opacity:1}
html.light .mirror-onboarding{background:#fff;border-color:rgba(0,0,0,0.08);box-shadow:0 1px 0 rgba(0,0,0,0.02),0 4px 24px rgba(0,0,0,0.06)}
html.light .mirror-onboarding::before{background:linear-gradient(105deg,transparent 30%,rgba(180,160,120,0.10) 40%,rgba(184,156,108,0.22) 50%,rgba(180,160,120,0.10) 60%,transparent 70%);opacity:1}
@keyframes mirrorShimmer{0%{transform:translateX(-55%)}45%{transform:translateX(55%)}100%{transform:translateX(55%)}}
.mirror-ob-headline{font-size:1.1rem;font-weight:700;color:var(--text);letter-spacing:-0.01em;margin-bottom:0.4rem}
.mirror-ob-subtitle{font-size:0.78rem;color:var(--text-muted);margin-bottom:1.6rem}
.mirror-ob-pipeline{display:flex;flex-direction:column;gap:0;font-size:0.68rem;font-weight:600;text-transform:uppercase;letter-spacing:0.1em;color:var(--text-muted);margin-bottom:1.4rem;width:100%}
.mirror-ob-pipe-row{display:flex;align-items:center;gap:0.5rem;padding:0.35rem 0}
.mirror-ob-pipe-row .pipe-label{min-width:58px;text-align:right;opacity:0.5}
.mirror-ob-pipe-row .pipe-value{font-weight:400;letter-spacing:0.02em;text-transform:none;font-size:0.76rem;color:var(--text-dim);font-style:italic;opacity:0.6}
.mirror-ob-pipe-row.pipe-core .pipe-label{opacity:0.9;color:var(--text)}
.mirror-ob-pipe-row.pipe-core .pipe-value{opacity:0.7;color:var(--text-muted);font-style:normal;font-weight:500;letter-spacing:0.04em;font-size:0.68rem}
.pipe-value.pipe-template{font-family:'SF Mono',SFMono-Regular,ui-monospace,Menlo,monospace;font-size:0.66rem;line-height:1.6;text-align:left;opacity:0.55;letter-spacing:0;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);border-radius:6px;padding:0.4rem 0.6rem;font-style:normal}
html.light .pipe-value.pipe-template{background:rgba(0,0,0,0.025);border-color:rgba(0,0,0,0.07)}
.mirror-ob-pipe-arrow{font-size:0.7rem;opacity:0.2;padding-left:66px;line-height:1}
.mirror-ob-cta{background:var(--text);color:var(--bg);border:none;border-radius:10px;padding:0.65rem 1.6rem;font-family:inherit;font-size:0.82rem;font-weight:600;cursor:pointer;transition:all 0.18s;position:relative;z-index:1;letter-spacing:-0.01em}
.mirror-ob-cta:hover{opacity:0.92;box-shadow:0 2px 20px rgba(0,0,0,0.2);transform:translateY(-1px)}
.mirror-ob-cta:active{transform:scale(0.97);opacity:1}
html.light .mirror-ob-headline{color:#111}
html.light .mirror-ob-subtitle{color:#666}
html.light .mirror-ob-pipe-row .pipe-label{color:#999}
html.light .mirror-ob-pipe-row .pipe-value{color:#777}
html.light .mirror-ob-pipe-row.pipe-core .pipe-label{color:#222}
html.light .mirror-ob-pipe-row.pipe-core .pipe-value{color:#555}
html.light .pipe-value.pipe-template{background:rgba(0,0,0,0.03);border-color:rgba(0,0,0,0.1);color:#555}
html.light .mirror-ob-pipe-arrow{color:#ccc}
html.light .mirror-ob-cta{background:#1a1a1a;color:#fff;box-shadow:0 1px 8px rgba(0,0,0,0.12)}
html.light .mirror-ob-cta:hover{background:#000;box-shadow:0 2px 16px rgba(0,0,0,0.18)}
.mirror-ready-banner{display:none;text-align:center;padding:0.6rem 1rem;font-size:0.82rem;color:var(--text-muted);animation:obFadeIn 0.3s ease}
.mirror-ready-banner strong{color:var(--text);font-weight:600}
.mirror-mode-hint{font-size:0.7rem;color:var(--text-muted);opacity:0.6;padding:0 0.3rem 0.15rem;text-align:right}
@keyframes mirrorPulse{0%{box-shadow:0 0 0 0 var(--accent-glow)}70%{box-shadow:0 0 0 6px transparent}100%{box-shadow:0 0 0 0 transparent}}
.mirror-composer-inner.pulse{animation:mirrorPulse 1.2s ease}
.mirror-chips-row{display:flex;flex-wrap:nowrap;gap:0.4rem;overflow-x:auto;padding:0.3rem 0 0.1rem;max-width:100%;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.mirror-chips-row::-webkit-scrollbar{display:none}
.mirror-chip{flex-shrink:0;background:var(--surface);border:1px solid var(--border);color:var(--text-dim);padding:0.35rem 0.75rem;border-radius:999px;cursor:pointer;font-size:0.82rem;font-weight:500;font-family:inherit;white-space:nowrap;transition:all 0.12s;-webkit-tap-highlight-color:transparent}
.mirror-chip:hover{border-color:var(--accent-dim);color:var(--text);background:var(--surface2)}
.mirror-composer{padding:0.5rem 0.8rem 1rem;flex-shrink:0;background:var(--bg);border-top:1px solid var(--border);position:sticky;bottom:0;z-index:2;max-width:880px;margin-left:auto;margin-right:auto;width:100%}
.mirror-composer-row{display:flex;align-items:flex-end;gap:0.4rem;position:relative}
.drop-overlay{position:absolute;inset:0;background:rgba(74,107,82,0.15);border:2px dashed var(--accent);border-radius:14px;display:none;align-items:center;justify-content:center;z-index:5;backdrop-filter:blur(2px)}
.drop-overlay.show{display:flex}
.drop-overlay-content{display:flex;flex-direction:column;align-items:center;gap:0.3rem;color:var(--text-muted);font-size:0.85rem;font-weight:500}
.mirror-composer-inner{flex:1;background:var(--surface);border:1.5px solid rgba(255,255,255,0.1);border-radius:20px;padding:0.75rem 0.85rem 0.75rem 0.95rem;min-height:52px;min-width:0;display:flex;align-items:center;gap:0.4rem;transition:border-color 0.2s,box-shadow 0.2s}
/* Composer focus keeps the resting border - caret only (owner 2026-09-16) */
.create-composer-inner{min-height:56px;padding:0.85rem 1rem 0.85rem 1.1rem;border-radius:16px;border-width:1.5px}
.mirror-textarea{flex:1;min-width:0}
.mirror-mic-inline{display:none}
.mirror-send-inline{flex-shrink:0;background:var(--accent);border:none;color:var(--accent-fg,#fff);cursor:pointer;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all 0.15s;-webkit-tap-highlight-color:transparent;align-self:flex-end;box-shadow:0 2px 8px var(--accent-glow)}
/* Reels composer (owner 2026-10-07). */
/* Reels (owner 2026-10-07: "Apple billion-dollar UX/UI"). One floating
   9:16 canvas on a dark stage, glass chrome, iOS-style segmented controls,
   system type, press feedback on pointer-down, nothing decorative. Rules
   from the apple-design and design-engineering skills (emilkowalski). */
.rl-wrap{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:24px;align-items:start;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Roboto,sans-serif}
.rl-stage{position:sticky;top:0;display:flex;flex-direction:column;align-items:center;gap:14px;padding:24px 16px 18px;border-radius:24px;background:radial-gradient(120% 90% at 50% 0%,#17171c 0%,#0b0b0d 72%);min-height:calc(100vh - 210px)}
html.light .rl-stage{background:radial-gradient(120% 90% at 50% 0%,#ffffff 0%,#e9e9ee 72%)}
.rl-canvas-wrap{position:relative;height:min(calc(100vh - 300px),640px);min-height:320px;aspect-ratio:9/16;border-radius:26px;overflow:hidden;background:#000;box-shadow:0 30px 80px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.08);transition:transform 200ms cubic-bezier(.23,1,.32,1),opacity 200ms cubic-bezier(.23,1,.32,1)}
.rl-canvas-wrap.swap{transform:scale(.98);opacity:.6}
html.light .rl-canvas-wrap{box-shadow:0 20px 60px rgba(0,0,0,.18),inset 0 0 0 1px rgba(0,0,0,.06)}
.rl-canvas-wrap canvas{width:100%;height:100%;display:block}
.rl-stage-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.55);font-size:14px;letter-spacing:.01em;pointer-events:none}
.rl-guides{position:absolute;left:12%;right:12%;top:14%;bottom:35%;border:1px dashed rgba(255,255,255,.25);border-radius:10px;pointer-events:none;display:none}
.rl-canvas-wrap.guides .rl-guides{display:block}
.rl-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(3px) brightness(.55);transform:scale(1.05)}
.rl-stage-empty.err{pointer-events:auto;background:rgba(0,0,0,.5);padding:24px}
.rl-stage-card{display:flex;flex-direction:column;gap:8px;align-items:center;text-align:center;max-width:280px;color:#fff}
.rl-stage-card strong{font-size:15px;font-weight:600;letter-spacing:-.01em}
.rl-stage-card span{font-size:13px;line-height:1.45;color:rgba(255,255,255,.72)}
.rl-stage-card .btns{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap;justify-content:center}
.rl-stage-card .rl-ghost{width:auto;height:36px;padding:0 16px;color:#fff;border-color:rgba(255,255,255,.35)}
.rl-stage-card .tech{font-size:11px;line-height:1.4;color:rgba(255,255,255,.45);word-break:break-word;margin-top:6px}
.rl-stage-card .tech a{color:inherit;text-decoration:underline}
/* Kalam AI conversations panel */
.kbcp{position:absolute;top:0;right:0;bottom:0;width:min(380px,100%);background:var(--surface);border-left:1px solid var(--border);box-shadow:-12px 0 36px rgba(0,0,0,.22);display:flex;flex-direction:column;z-index:30;animation:kbcpIn 180ms cubic-bezier(.23,1,.32,1)}
.kbcp.wide{width:min(560px,100%)}
.kb-chats-btn{display:inline-flex;align-items:center;gap:0.35rem;height:30px;padding:0 0.7rem;border-radius:999px;border:1px solid var(--border);background:var(--surface2);color:var(--text);font:inherit;font-size:0.8rem;font-weight:600;cursor:pointer;white-space:nowrap}
.kb-chats-btn:hover,.kb-chats-btn.on{background:var(--text);color:var(--surface);border-color:var(--text)}
.kb-chats-btn .n{font-size:0.72rem;font-weight:700;opacity:.8}
@media(min-width:1100px){#kbRoot .kbcp{position:static;flex:none;height:auto;box-shadow:none;animation:none}}
#kaiRoot .kbcp,#kaiRoot .kbcp.wide{width:100%;border-left:none;box-shadow:none}
#kaiRoot .kbcp [data-kbcp="wide"]{display:none}
@media(max-width:600px){.kbcp,.kbcp.wide{width:100%;border-left:none;box-shadow:none}.kbcp [data-kbcp="wide"]{display:none}}
@keyframes kbcpIn{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){.kbcp{animation:none}}
.kbcp-head{display:flex;align-items:center;justify-content:space-between;padding:1rem 1rem 0.6rem 1.2rem}
.kbcp-title{font-size:1.25rem;font-weight:700;color:var(--text);letter-spacing:-0.01em}
.kbcp-tools{display:flex;gap:0.3rem}
.kbcp-tools button{width:36px;height:36px;border-radius:50%;border:1px solid var(--border);background:var(--surface2);color:var(--text);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.kbcp-tools button:hover{background:var(--surface-elevated,var(--surface2))}
.kbcp-tabs{display:flex;margin:0.2rem 1.2rem 0.8rem;padding:3px;border-radius:12px;background:var(--surface2);border:1px solid var(--border-subtle,var(--border))}
.kbcp-tabs button{flex:1;border:none;background:transparent;color:var(--text-muted);font:inherit;font-size:0.9rem;font-weight:600;padding:0.45rem 0;border-radius:9px;cursor:pointer}
.kbcp-tabs button.on{background:var(--surface-elevated,var(--surface));color:var(--text);box-shadow:var(--shadow-small,0 1px 3px rgba(0,0,0,.2))}
.kbcp-search{display:flex;gap:0.5rem;align-items:center;margin:0 1.2rem 0.6rem}
.kbcp-search .f{flex:1;display:flex;align-items:center;gap:0.5rem;padding:0 0.8rem;height:42px;border-radius:12px;border:1px solid var(--border);background:var(--bg);color:var(--text-muted)}
.kbcp-search .f:focus-within{border-color:var(--accent)}
.kbcp-search input{flex:1;min-width:0;border:none;background:none;color:var(--text);font:inherit;font-size:0.95rem;outline:none}
.kbcp-search input::-webkit-search-cancel-button{-webkit-appearance:none}
.kbcp-new{width:42px;height:42px;border-radius:12px;border:1px solid var(--border);background:var(--bg);color:var(--text);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex:none}
.kbcp-new:hover{background:var(--surface2)}
.kbcp-list{flex:1;min-height:0;overflow-y:auto;padding:0 0.6rem 1rem}
.kbcp-group{font-size:0.78rem;font-weight:600;color:var(--text-muted);padding:0.9rem 0.6rem 0.35rem;border-top:1px solid var(--border-subtle,var(--border))}
.kbcp-group:first-child{border-top:none;padding-top:0.3rem}
.kbcp-row{display:flex;align-items:center;gap:0.2rem;border-radius:10px}
.kbcp-row:hover,.kbcp-row.active{background:var(--surface2)}
.kbcp-open{flex:1;min-width:0;display:flex;align-items:center;gap:0.8rem;border:none;background:none;color:var(--text);font:inherit;font-size:0.95rem;text-align:left;padding:0.7rem 0.6rem;cursor:pointer;border-radius:10px}
.kbcp-open .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:0.4rem}
.kbcp-row.active .kbcp-open .t{font-weight:600}
.kbcp-open .w{flex:none;font-size:0.8rem;color:var(--text-muted)}
.kbcp-more{flex:none;width:30px;height:30px;border:none;background:none;color:var(--text-muted);font-size:1.1rem;line-height:1;cursor:pointer;border-radius:8px;opacity:0;margin-right:0.2rem}
.kbcp-row:hover .kbcp-more,.kbcp-row:focus-within .kbcp-more,.kbcp-row.active .kbcp-more{opacity:1}
@media(pointer:coarse){.kbcp-more{opacity:1}}
.kbcp-empty{padding:1.4rem 0.8rem;font-size:0.9rem;color:var(--text-muted);text-align:center}
/* Custom Brand Build */
.cb-root{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;width:100%;box-sizing:border-box}
.cb-wrap{max-width:760px;margin:0 auto;padding:1.4rem 1.2rem 6rem}
.cb-locked{max-width:520px;margin:3rem auto;text-align:center;padding:0 1.2rem}
.cb-locked h2{font-size:1.3rem;font-weight:700;color:var(--text);margin:0 0 0.6rem}
.cb-locked p{font-size:0.92rem;color:var(--text-muted);line-height:1.6;margin:0 0 1.2rem}
.cb-intro{font-size:0.95rem;color:var(--text);line-height:1.6}
.cb-intro p{margin:0 0 0.6rem}
.cb-note{font-size:0.82rem;color:var(--text-muted);line-height:1.55}
.cb-card{border:1px solid var(--border);border-radius:16px;background:var(--surface);padding:1.1rem 1.2rem;margin-top:1rem}
.cb-q{padding:1.1rem 0;border-top:1px solid var(--border)}
.cb-q:first-of-type{border-top:0}
.cb-num{font-size:0.7rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-muted)}
.cb-label{display:block;font-size:1rem;font-weight:700;color:var(--text);margin-top:0.25rem}
.cb-hint{font-size:0.82rem;color:var(--text-muted);margin-top:0.25rem;line-height:1.5}
.cb-in{width:100%;box-sizing:border-box;margin-top:0.6rem;padding:0.7rem 0.85rem;border-radius:12px;border:1px solid var(--border);background:var(--bg);color:var(--text);font:inherit;font-size:0.92rem}
.cb-in:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
textarea.cb-in{min-height:84px;resize:vertical;line-height:1.5}
.cb-row{display:flex;gap:0.6rem;flex-wrap:wrap}
.cb-row .cb-in{flex:1;min-width:200px}
.cb-chips{display:flex;flex-wrap:wrap;gap:0.5rem;margin-top:0.7rem}
.cb-chip{padding:0.5rem 0.95rem;border-radius:999px;border:1.5px solid var(--border);background:var(--surface);color:var(--text);font:inherit;font-size:0.86rem;font-weight:600;cursor:pointer;transition:border-color 120ms,background 120ms}
.cb-chip[aria-checked="true"],.cb-chip[aria-pressed="true"]{border-color:var(--text);background:var(--text);color:var(--surface)}
.cb-chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cb-dirs{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:0.7rem;margin-top:0.8rem}
.cb-dir{text-align:left;border:1.5px solid var(--border);border-radius:14px;background:var(--surface);padding:0;overflow:hidden;cursor:pointer;font:inherit;color:var(--text);transition:border-color 120ms,transform 120ms}
.cb-dir:hover{transform:translateY(-1px)}
.cb-dir[aria-checked="true"]{border-color:var(--text);box-shadow:0 0 0 1px var(--text)}
.cb-dir .sw{display:flex;height:64px}
.cb-dir .sw span{flex:1}
.cb-dir .aa{position:absolute;right:12px;top:12px;font-size:28px;line-height:1}
.cb-dir .top{position:relative}
.cb-dir .t{padding:0.7rem 0.85rem 0.15rem;font-weight:700;font-size:0.92rem}
.cb-dir .d{padding:0 0.85rem 0.8rem;font-size:0.8rem;color:var(--text-muted)}
.cb-tiles{display:flex;flex-wrap:wrap;gap:0.6rem;margin-top:0.7rem}
.cb-tile{position:relative;width:88px;height:88px;border-radius:12px;overflow:hidden;border:1px solid var(--border);background:var(--bg)}
.cb-tile img{width:100%;height:100%;object-fit:cover;display:block}
.cb-tile .x{position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:50%;border:0;background:rgba(0,0,0,.6);color:#fff;font-size:14px;cursor:pointer;line-height:22px;padding:0}
.cb-add{width:88px;height:88px;border-radius:12px;border:1.5px dashed var(--border);background:none;color:var(--text-muted);font:inherit;font-size:0.76rem;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.cb-add:hover{border-color:var(--text);color:var(--text)}
.cb-confirm{display:flex;gap:0.7rem;align-items:flex-start;font-size:0.88rem;color:var(--text);line-height:1.5;margin-top:1.2rem;cursor:pointer}
/* The box is drawn here (owner 2026-10-13, "Add also a checkbox here"): the
   global input rule removes the native appearance, which left an empty
   18px gap beside the sentence on the dark theme. */
.cb-confirm input{appearance:none;-webkit-appearance:none;margin:3px 0 0;padding:0;width:18px;height:18px;flex:none;border:1.5px solid var(--text-muted);border-radius:5px;background:var(--surface);cursor:pointer;position:relative;display:inline-block;box-shadow:none;transition:background .12s,border-color .12s}
.cb-confirm input:hover{border-color:var(--text)}
.cb-confirm input:checked{background:var(--text);border-color:var(--text)}
.cb-confirm input:checked::after{content:'';position:absolute;left:5px;top:1px;width:5px;height:10px;border:solid var(--surface);border-width:0 2px 2px 0;transform:rotate(45deg)}
.cb-confirm input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* The reseller license's box (owner 2026-10-19, "needs a check box"): the app's global input rule strips the native checkbox, so it is drawn like the brand brief's. */
.rts-lic-check input{appearance:none;-webkit-appearance:none;margin:0;padding:0;width:20px;height:20px;flex:none;border:1.5px solid var(--text-muted);border-radius:6px;background:var(--surface);cursor:pointer;position:relative;display:inline-block;box-shadow:none;transition:background .12s,border-color .12s}
.rts-lic-check input:hover{border-color:var(--text)}
.rts-lic-check input:checked{background:var(--text);border-color:var(--text)}
.rts-lic-check input:checked::after{content:'';position:absolute;left:6px;top:2px;width:5px;height:11px;border:solid var(--surface);border-width:0 2px 2px 0;transform:rotate(45deg)}
.rts-lic-check input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* The admin panel's tick boxes, drawn (owner 2026-11-02: "when i click on the set the doors too, i dont get any feedback"; the global appearance:none left them invisible). */
#studioAdminTest input[type=checkbox]{appearance:none;-webkit-appearance:none;margin:0;padding:0;width:16px;height:16px;flex:none;border:1.5px solid var(--text-muted);border-radius:4px;background:var(--surface);cursor:pointer;position:relative;display:inline-block;box-shadow:none;transition:background .12s,border-color .12s}
#studioAdminTest input[type=checkbox]:hover{border-color:var(--text)}
#studioAdminTest input[type=checkbox]:checked{background:var(--text);border-color:var(--text)}
#studioAdminTest input[type=checkbox]:checked::after{content:'';position:absolute;left:4px;top:0;width:4px;height:9px;border:solid var(--surface);border-width:0 2px 2px 0;transform:rotate(45deg)}
#studioAdminTest input[type=checkbox]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* The research report's tick boxes, drawn (the global appearance:none strips them). */
#kbEvidence input[type=checkbox]{appearance:none;-webkit-appearance:none;margin:2px 0 0;padding:0;width:18px;height:18px;flex:none;border:1.5px solid var(--text-muted);border-radius:5px;background:var(--surface);cursor:pointer;position:relative;display:inline-block;box-shadow:none}
#kbEvidence input[type=checkbox]:hover{border-color:var(--text)}
#kbEvidence input[type=checkbox]:checked{background:var(--text);border-color:var(--text)}
#kbEvidence input[type=checkbox]:checked::after{content:'';position:absolute;left:5px;top:1px;width:5px;height:10px;border:solid var(--surface);border-width:0 2px 2px 0;transform:rotate(45deg)}
#kbEvidence input[type=checkbox]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tt-check input{appearance:none;-webkit-appearance:none;margin:0;padding:0;width:18px;height:18px;flex:none;border:1.5px solid var(--text-muted);border-radius:5px;background:var(--surface);cursor:pointer;position:relative;display:inline-block;box-shadow:none;transition:background .12s,border-color .12s}
.tt-check input:hover:not(:disabled){border-color:var(--text)}
.tt-check input:checked{background:var(--text);border-color:var(--text)}
.tt-check input:checked::after{content:'';position:absolute;left:5px;top:1px;width:5px;height:10px;border:solid var(--surface);border-width:0 2px 2px 0;transform:rotate(45deg)}
.tt-check input:disabled{opacity:0.45;cursor:default}
.tt-check input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cb-submit{display:flex;gap:0.9rem;align-items:center;flex-wrap:wrap;margin-top:1.1rem}
.cb-err{font-size:0.85rem;color:var(--danger,#c0392b);margin-top:0.7rem}
.cb-status{display:flex;justify-content:space-between;gap:1rem;align-items:center;flex-wrap:wrap}
.cb-pill{font-size:0.74rem;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;padding:0.3rem 0.65rem;border-radius:999px;background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent-text,var(--accent))}
/* The five-step brand brief (owner 2026-10-15: "a premium creative agency
   onboarding experience, with the minimalism of Apple and the usability of
   Typeform"). Serif headings, quiet labels, no numbered question chips. */
.cb-wrap{max-width:800px}
.cb-h{font-family:Georgia,serif;font-weight:400;font-size:clamp(1.9rem,3vw,2.4rem);line-height:1.12;letter-spacing:-0.01em;color:var(--text);margin:0 0 0.6rem}
.cb-lede{font-size:1rem;line-height:1.6;color:var(--text-muted);margin:0}
.cb-body{font-size:0.95rem;line-height:1.65;color:var(--text);margin:1rem 0 0}
.cb-intro2{padding:2.4rem 0 1rem}
.cb-before{margin:1.8rem 0 2rem;padding:1.1rem 1.2rem;border-radius:14px;background:var(--surface);border:1px solid var(--border-subtle,var(--border))}
.cb-before p{font-size:0.9rem;line-height:1.6;color:var(--text);margin:0.4rem 0 0}
.cb-notice{font-size:0.88rem;line-height:1.55;color:var(--text);background:color-mix(in srgb,var(--accent) 10%,transparent);border-radius:12px;padding:0.8rem 1rem;margin-bottom:1.6rem}
.cb-primary{height:46px;padding:0 1.5rem;border-radius:12px;border:0;background:var(--text);color:var(--bg);font:inherit;font-size:0.92rem;font-weight:600;cursor:pointer;transition:opacity .18s}
.cb-primary:hover{opacity:0.88}.cb-primary:disabled{opacity:0.5;cursor:default}
.cb-back{background:none;border:0;color:var(--text-muted);font:inherit;font-size:0.9rem;cursor:pointer;padding:0.6rem 0.2rem}
.cb-back:hover{color:var(--text)}
.cb-nav{display:flex;justify-content:space-between;align-items:center;margin-top:2.2rem;padding-top:1.4rem;border-top:1px solid var(--border-subtle,var(--border))}
.cb-progress{padding-top:0.6rem}
.cb-progress-top{display:flex;justify-content:space-between;align-items:baseline}
.cb-kicker{font-size:0.8rem;font-weight:500;color:var(--text-muted)}
.cb-saved{font-size:0.76rem;color:var(--text-muted)}
.cb-steps{list-style:none;display:flex;gap:0.2rem 1.4rem;flex-wrap:wrap;padding:0;margin:0.7rem 0 0.6rem}
.cb-steps button{background:none;border:0;padding:0.2rem 0;font:inherit;font-size:0.86rem;color:var(--text-muted);cursor:pointer}
.cb-steps li.done button{color:var(--text)}
.cb-steps li.now button{color:var(--text);font-weight:600}
.cb-bar{height:2px;background:var(--border-subtle,var(--border));border-radius:2px;overflow:hidden}
.cb-bar span{display:block;height:100%;background:var(--text);transition:width .2s ease}
.cb-stephead{padding:2.4rem 0 0.4rem;text-align:center}
.cb-stephead .cb-lede{max-width:520px;margin:0 auto}
.cb-form .cb-q{padding:1.8rem 0;border-top:1px solid var(--border-subtle,var(--border))}
.cb-form .cb-q:first-child{border-top:0}
.cb-form .cb-label{font-size:1.05rem;font-weight:600;margin-top:0}
.cb-sub{margin-top:0.9rem}
.cb-sublabel{font-size:0.8rem;font-weight:600;color:var(--text);letter-spacing:0.01em}
.cb-sub .cb-in{margin-top:0.35rem}
.cb-dirs{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem}
.cb-dir{position:relative;border-radius:16px;border:1.5px solid var(--border-subtle,var(--border));transition:border-color .18s,transform .18s,box-shadow .18s}
.cb-dir[aria-pressed="true"]{border-color:var(--text);box-shadow:0 0 0 1px var(--text)}
.cb-dir .t{padding:0.8rem 0.95rem 0.1rem}
.cb-dir .d{padding:0 0.95rem 0.9rem}
.cb-dir-n{display:inline-block;vertical-align:2px;margin-left:0.35rem;font-size:0.62rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;background:var(--text);color:var(--bg);border-radius:999px;padding:0.2rem 0.55rem}
.cb-mood{height:150px;padding:14px;box-sizing:border-box;display:flex;flex-direction:column;gap:10px}
.cb-mood-top{display:flex;align-items:center;gap:8px}
.cb-mood-mark{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;flex:none}
/* DM Automations (owner 2026-10-16): restrained type, generous space,
   hairline separators, minimal badges. No workflow diagrams. */
.au-wrap{max-width:800px;margin:0 auto;padding:1.6rem 1.2rem 6rem}
.au-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap;padding:1.2rem 0 0.4rem}
.au-h{font-family:Georgia,serif;font-weight:400;font-size:clamp(1.9rem,3vw,2.4rem);line-height:1.12;letter-spacing:-0.01em;color:var(--text);margin:0 0 0.4rem}
.au-lede{font-size:1rem;line-height:1.6;color:var(--text-muted);margin:0}
.au-note{font-size:0.84rem;color:var(--text-muted);line-height:1.55}
.au-new{height:40px;padding:0 1.1rem;font-size:0.88rem;margin-top:0.4rem}
.au-acct{display:flex;align-items:center;gap:0.35rem;flex-wrap:wrap;font-size:0.9rem;color:var(--text);padding:1rem 0 0.2rem}
.au-acct-ig{color:var(--text-muted)}
.au-acct-name{font-weight:600}
.au-dot{color:var(--text-muted)}
.au-ok{color:var(--text);font-weight:500}
.au-paused{color:var(--text-muted)}
.au-notice{font-size:0.86rem;line-height:1.55;color:var(--text);background:color-mix(in srgb,var(--accent) 10%,transparent);border-radius:12px;padding:0.75rem 1rem;margin:0.8rem 0}
.au-link{background:none;border:0;padding:0;font:inherit;font-size:inherit;color:var(--text);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.au-link:hover{opacity:0.75}
.au-card{border:1px solid var(--border-subtle,var(--border));border-radius:16px;background:var(--surface);padding:1.4rem 1.4rem;margin-top:1.2rem}
.au-card-t{font-size:1.05rem;font-weight:600;color:var(--text);margin-bottom:0.4rem}
.au-connect .cb-primary{margin-top:1rem}
.au-sec-h{font-size:0.72rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-muted);margin:2.2rem 0 0.4rem}
.au-empty{padding:1.6rem 0 0.4rem}
.au-empty p{margin:0 0 0.4rem;font-size:0.95rem;color:var(--text)}
.au-list{border-top:1px solid var(--border-subtle,var(--border))}
.au-row{display:flex;align-items:center;gap:1rem;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--border-subtle,var(--border));padding:1.05rem 0.2rem;font:inherit;color:var(--text);cursor:pointer;border-radius:0}
.au-row:hover{background:var(--surface2,var(--surface))}
.au-row-main{flex:1;min-width:0}
.au-row-name{font-size:0.98rem;font-weight:600;margin-bottom:0.2rem}
.au-row-sub{font-size:0.82rem;color:var(--text-muted);line-height:1.5}
.au-row-n{font-size:0.82rem;color:var(--text-muted);white-space:nowrap}
.au-row-arrow{width:16px;height:16px;stroke:var(--text-muted);fill:none;stroke-width:1.6;flex:none;opacity:0.7}
.au-back{background:none;border:0;color:var(--text-muted);font:inherit;font-size:0.9rem;cursor:pointer;padding:0.2rem 0;margin-bottom:0.6rem}
.au-back:hover{color:var(--text)}
.au-step{padding:1.8rem 0;border-top:1px solid var(--border-subtle,var(--border))}
.au-step:first-of-type{border-top:0}
.au-step-n{font-size:0.72rem;font-weight:600;letter-spacing:0.08em;color:var(--text-muted);margin-bottom:0.3rem}
.au-step-t{font-size:1.1rem;font-weight:600;color:var(--text);margin:0}
.au-step-d{font-size:0.86rem;color:var(--text-muted);line-height:1.55;margin:0.3rem 0 0}
.au-posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:0.6rem;margin-top:1rem}
.au-post{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;border:1.5px solid var(--border-subtle,var(--border));background:var(--surface);padding:0;cursor:pointer;font:inherit;color:var(--text);text-align:left;transition:border-color .15s,transform .15s}
.au-post:hover{transform:translateY(-1px)}
.au-post[aria-pressed="true"]{border-color:var(--text);box-shadow:0 0 0 1px var(--text)}
.au-post img{width:100%;height:100%;object-fit:cover;display:block}
.au-post.noimg img{display:none}
.au-post .cap{position:absolute;inset:0;padding:0.6rem;font-size:0.72rem;line-height:1.4;color:var(--text);display:none;overflow:hidden}
.au-post.noimg .cap{display:block}
.au-post .kind{position:absolute;left:6px;bottom:6px;font-size:0.6rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;padding:0.15rem 0.4rem;border-radius:999px;background:rgba(0,0,0,.55);color:#fff}
.au-post .tick{position:absolute;top:6px;right:6px;width:20px;height:20px;border-radius:50%;background:var(--text);color:var(--bg);display:none;align-items:center;justify-content:center;font-size:12px}
.au-post[aria-pressed="true"] .tick{display:flex}
.au-in{width:100%;box-sizing:border-box;margin-top:0.8rem;padding:0.75rem 0.9rem;border-radius:12px;border:1px solid var(--border);background:var(--bg);color:var(--text);font:inherit;font-size:0.95rem}
.au-in:focus{outline:none;border-color:var(--text)}
textarea.au-in{min-height:120px;resize:vertical;line-height:1.55}
.au-kw{font-weight:600;letter-spacing:0.04em;text-transform:uppercase}
.au-seg{display:inline-flex;gap:0;margin-top:0.7rem;border:1px solid var(--border);border-radius:999px;padding:3px}
.au-seg button{background:none;border:0;border-radius:999px;padding:0.3rem 0.8rem;font:inherit;font-size:0.78rem;font-weight:600;color:var(--text-muted);cursor:pointer}
.au-seg button[aria-checked="true"]{background:var(--text);color:var(--bg)}
.au-pv{margin-top:1.2rem}
.au-pv-l{font-size:0.72rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-muted);margin-bottom:0.5rem}
.au-phone{max-width:340px;border:1px solid var(--border-subtle,var(--border));border-radius:18px;background:var(--surface);padding:0.9rem 0.9rem 1rem}
.au-phone-h{display:flex;align-items:center;gap:0.5rem;font-size:0.8rem;font-weight:600;color:var(--text);padding-bottom:0.7rem;border-bottom:1px solid var(--border-subtle,var(--border));margin-bottom:0.8rem}
.au-phone-av{width:24px;height:24px;border-radius:50%;background:var(--text);color:var(--bg);display:inline-flex;align-items:center;justify-content:center;font-size:0.7rem;font-weight:700}
.au-bub{display:inline-block;max-width:88%;background:var(--surface2,var(--bg));border-radius:18px 18px 18px 4px;padding:0.6rem 0.85rem;font-size:0.86rem;line-height:1.5;color:var(--text);white-space:pre-wrap;word-break:break-word}
.au-bub-in{display:block;text-align:right;margin-bottom:0.5rem}
.au-bub-in span{display:inline-block;background:var(--text);color:var(--bg);border-radius:18px 18px 4px 18px;padding:0.5rem 0.8rem;font-size:0.82rem}
.au-ph-note{font-size:0.72rem;color:var(--text-muted);margin-top:0.5rem}
.au-actions{display:flex;gap:0.9rem;align-items:center;flex-wrap:wrap;margin-top:1.8rem;padding-top:1.4rem;border-top:1px solid var(--border-subtle,var(--border))}
.au-err{font-size:0.85rem;color:var(--danger,#c0392b);margin-top:0.7rem}
.au-detail-h{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap;padding:0.4rem 0 1rem}
.au-pill{display:inline-block;font-size:0.68rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;padding:0.25rem 0.6rem;border-radius:999px;border:1px solid var(--border);color:var(--text-muted);vertical-align:middle;margin-left:0.5rem}
.au-pill.on{border-color:var(--text);color:var(--text)}
.au-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0.8rem;margin:0.8rem 0 0}
.au-tile{border:1px solid var(--border-subtle,var(--border));border-radius:14px;padding:0.9rem 1rem;background:var(--surface)}
.au-tile-n{font-family:Georgia,serif;font-size:1.9rem;line-height:1;color:var(--text)}
.au-tile-l{font-size:0.76rem;color:var(--text-muted);margin-top:0.3rem}
.au-fact{display:grid;grid-template-columns:130px 1fr;gap:0.5rem 1rem;font-size:0.9rem;padding:1.2rem 0;border-top:1px solid var(--border-subtle,var(--border))}
.au-fact dt{color:var(--text-muted);margin:0}
.au-fact dd{margin:0;color:var(--text);white-space:pre-wrap;word-break:break-word}
.au-postmini{display:flex;gap:0.7rem;align-items:center}
.au-postmini img{width:48px;height:48px;border-radius:8px;object-fit:cover;border:1px solid var(--border-subtle,var(--border))}
.au-scope{margin-top:0}
.au-scope+.au-posts,.au-scope+.au-older{margin-top:1rem}
.au-btns{display:flex;gap:0.5rem;flex-wrap:wrap}
.au-btn{height:36px;padding:0 0.95rem;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--text);font:inherit;font-size:0.84rem;font-weight:500;cursor:pointer}
.au-btn:hover{border-color:var(--text)}
.au-btn.danger{color:var(--danger,#c0392b)}
.au-table{width:100%;border-collapse:collapse;margin-top:0.6rem;font-size:0.86rem}
.au-table th{text-align:left;font-size:0.7rem;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:var(--text-muted);padding:0.5rem 0.4rem;border-bottom:1px solid var(--border-subtle,var(--border))}
.au-table td{padding:0.7rem 0.4rem;border-bottom:1px solid var(--border-subtle,var(--border));vertical-align:top;color:var(--text)}
.au-table td.muted{color:var(--text-muted);white-space:nowrap}
.au-st{font-weight:600}
.au-st.failed{color:var(--danger,#c0392b)}
.au-st.skipped{color:var(--text-muted);font-weight:500}
.au-why{font-size:0.8rem;color:var(--text-muted);margin-top:0.25rem;line-height:1.5}
.au-why details{margin-top:0.2rem}
.au-why summary{cursor:pointer;font-size:0.76rem}
.au-why code{display:block;font-size:0.72rem;white-space:pre-wrap;word-break:break-all;margin-top:0.3rem;color:var(--text-muted)}
.au-reply{padding:0.7rem 0;border-bottom:1px solid var(--border-subtle,var(--border));font-size:0.88rem}
.au-reply .who{font-size:0.76rem;color:var(--text-muted);margin-bottom:0.2rem}
@media(max-width:600px){.au-fact{grid-template-columns:1fr;gap:0.2rem 0}.au-fact dt{margin-top:0.6rem}.au-table th:nth-child(4),.au-table td:nth-child(4){display:none}}
/* Automations, the premium pass (owner 2026-11-02): the health strip, card rows, the two-column builder with its sticky phone, chips, starters, the test card, the activity timeline. */
.au-wrap{max-width:960px}
.au-health{display:flex;flex-wrap:wrap;gap:0.4rem 1.4rem;align-items:center;font-size:0.86rem;color:var(--text);padding:1rem 0 0.4rem}
.au-light{display:inline-flex;align-items:center;gap:0.45rem}
.au-light i{width:8px;height:8px;border-radius:50%;background:var(--text-muted);opacity:0.5;flex:none}
.au-light.on i{background:#2fb36b;opacity:1;box-shadow:0 0 0 3px color-mix(in srgb,#2fb36b 22%,transparent)}
.au-light.off i{background:var(--danger,#c0392b);opacity:1}
.au-light.off{color:var(--danger,#c0392b)}
.au-light.muted{color:var(--text-muted)}
.au-live{display:inline-block;width:7px;height:7px;border-radius:50%;background:#2fb36b;margin-right:0.4rem;vertical-align:1px;box-shadow:0 0 0 3px color-mix(in srgb,#2fb36b 22%,transparent)}
.au-row{padding:0.95rem 0.4rem;gap:1.1rem;border-radius:14px;border-bottom:0;margin-top:0.5rem;border:1px solid var(--border-subtle,var(--border));background:var(--surface);transition:transform .15s,border-color .15s}
.au-row:hover{transform:translateY(-1px);border-color:var(--text-muted)}
.au-list{border-top:0}
.au-row-n{text-align:right;line-height:1.45}
.au-row-last{display:block;font-size:0.74rem;opacity:0.8}
.au-vis{position:relative;flex:none;width:54px;height:54px;border-radius:12px;overflow:hidden;background:var(--surface2,var(--bg));border:1px solid var(--border-subtle,var(--border));display:flex;align-items:center;justify-content:center}
.au-vis img{width:100%;height:100%;object-fit:cover;display:block}
.au-vis b{display:none}
.au-vis.noimg b,.au-vis:not(.stack):not(.all):not(:has(img)) b{display:block;width:18px;height:18px;border-radius:5px;border:1.5px solid var(--text-muted);opacity:0.6}
.au-vis.all svg{width:24px;height:24px;fill:none;stroke:var(--text);stroke-width:1.6}
.au-vis.stack{overflow:visible;background:none;border:0}
.au-vis.stack img,.au-vis.stack b{position:absolute;width:40px;height:40px;border-radius:9px;border:1.5px solid var(--surface);object-fit:cover;background:var(--surface2,var(--bg));display:block;left:calc(var(--i) * 7px);top:calc(var(--i) * 7px);z-index:calc(3 - var(--i));box-shadow:0 1px 3px rgba(0,0,0,.18)}
.au-chips{display:inline-flex;flex-wrap:wrap;gap:0.3rem;vertical-align:middle}
.au-chip{display:inline-block;font-size:0.72rem;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;padding:0.18rem 0.55rem;border-radius:999px;background:color-mix(in srgb,var(--text) 9%,transparent);color:var(--text)}
.au-kwchips{min-height:1.2rem;margin-top:0.55rem;font-size:0.84rem;display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap}
.au-build{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:2.4rem;align-items:start}
.au-side{position:sticky;top:1.2rem}
.au-side .au-pv{margin-top:1.8rem}
.au-starters{display:flex;flex-wrap:wrap;align-items:center;gap:0.45rem;margin-top:0.9rem}
.au-chip-btn{font:inherit;font-size:0.8rem;font-weight:500;padding:0.32rem 0.8rem;border-radius:999px;border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer}
.au-chip-btn:hover{border-color:var(--text)}
.au-hint{font-size:0.8rem;line-height:1.5;color:var(--text);margin:0.5rem 0 0;padding:0.5rem 0.75rem;border-radius:10px;background:color-mix(in srgb,#e0a030 14%,transparent)}
.au-phone{max-width:none;padding:1rem 1rem 0.9rem;box-shadow:0 10px 30px rgba(0,0,0,.08)}
.au-phone-ig{margin-left:auto;font-size:0.7rem;font-weight:500;color:var(--text-muted)}
.au-phone-ctx{display:flex;align-items:center;gap:0.4rem;font-size:0.72rem;color:var(--text-muted);margin-bottom:0.7rem}
.au-phone-dot{width:6px;height:6px;border-radius:50%;background:var(--text-muted)}
.au-phone-sent{font-size:0.7rem;color:var(--text-muted);margin-top:0.5rem}
.au-bub-s{font-size:0.86rem}
.au-how{display:grid;gap:0.55rem;margin-top:0.9rem}
.au-how-i{display:flex;gap:0.7rem;align-items:flex-start;font-size:0.88rem;line-height:1.5;color:var(--text)}
.au-how-i b{flex:none;width:22px;height:22px;border-radius:50%;background:var(--text);color:var(--bg);font-size:0.72rem;font-weight:700;display:inline-flex;align-items:center;justify-content:center;margin-top:0.1rem}
.au-test{margin-top:1.2rem}
.au-detail-t{display:flex;gap:0.9rem;align-items:flex-start}
.au-detail-t .au-vis{margin-top:0.35rem}
.au-who{display:inline-flex;align-items:center;gap:0.5rem;white-space:nowrap}
.au-av{width:26px;height:26px;border-radius:50%;background:color-mix(in srgb,var(--text) 10%,transparent);color:var(--text);font-size:0.72rem;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex:none}
.au-cmt{color:var(--text);font-style:italic}
.au-st i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#2fb36b;margin-right:0.4rem;vertical-align:1px}
.au-st.failed i{background:var(--danger,#c0392b)}
.au-st.skipped i{background:var(--text-muted);opacity:0.5}
.au-st.pending i{background:#e0a030}
@media(max-width:900px){.au-build{grid-template-columns:1fr;gap:0}.au-side{position:static}.au-side .au-pv{margin-top:0.4rem;padding-bottom:0.6rem}.au-phone{max-width:340px}}
@media(max-width:600px){.au-row{gap:0.8rem;padding:0.85rem 0.6rem}.au-row-n{display:none}.au-vis{width:46px;height:46px}.au-health{gap:0.3rem 1rem;font-size:0.82rem}}
.cb-mood-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cb-mood-post{flex:1;border-radius:8px;border:1px solid;display:flex;flex-direction:column;justify-content:center;padding:0 12px;gap:6px}
.cb-mood-post i{display:block;width:28px;height:3px;border-radius:2px}
.cb-mood-sw{display:flex;gap:4px}
.cb-mood-sw span{flex:1;height:10px;border-radius:3px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.cb-radio{align-items:center;margin-top:1rem}
.cb-radio input{margin-top:0}
.cb-opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:0.6rem;margin-top:0.8rem}
.cb-opt{text-align:left;border:1.5px solid var(--border-subtle,var(--border));border-radius:12px;background:var(--surface);padding:0.8rem 0.9rem;cursor:pointer;font:inherit;color:var(--text);display:flex;flex-direction:column;gap:0.2rem;transition:border-color .18s}
.cb-opt[aria-checked="true"]{border-color:var(--text);box-shadow:0 0 0 1px var(--text)}
.cb-opt-t{font-weight:600;font-size:0.92rem}
.cb-opt-d{font-size:0.8rem;color:var(--text-muted);line-height:1.45}
.cb-drop{margin-top:0.8rem;border:1.5px dashed var(--border);border-radius:14px;padding:1.6rem 1rem;display:flex;flex-direction:column;align-items:center;gap:0.5rem;color:var(--text-muted);font-size:0.88rem;cursor:pointer;transition:border-color .18s,background .18s}
.cb-drop svg{width:22px;height:22px}
.cb-drop:hover,.cb-drop.on{border-color:var(--text);color:var(--text);background:var(--surface)}
.cb-inspo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:0.7rem;margin-top:0.8rem}
.cb-inspo-card{display:flex;flex-direction:column;gap:0.35rem}
.cb-inspo-img{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;border:1px solid var(--border-subtle,var(--border));background:var(--bg)}
.cb-inspo-img img{width:100%;height:100%;object-fit:cover;display:block}
.cb-inspo-img .x{position:absolute;top:5px;right:5px;width:22px;height:22px;border-radius:50%;border:0;background:rgba(0,0,0,.6);color:#fff;font-size:14px;cursor:pointer;line-height:22px;padding:0}
.cb-inspo-note{width:100%;box-sizing:border-box;border:1px solid var(--border-subtle,var(--border));border-radius:8px;background:var(--bg);color:var(--text);font:inherit;font-size:0.78rem;padding:0.35rem 0.5rem}
.cb-review{padding:1.2rem 0;border-top:1px solid var(--border-subtle,var(--border))}
.cb-review:first-child{border-top:0}
.cb-review-h{display:flex;justify-content:space-between;align-items:baseline;font-weight:600;font-size:1rem;color:var(--text)}
.cb-link{background:none;border:0;color:var(--text-muted);font:inherit;font-size:0.84rem;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.cb-review dl{display:grid;grid-template-columns:180px 1fr;gap:0.35rem 0.9rem;font-size:0.86rem;margin:0.7rem 0 0}
.cb-review dt{color:var(--text-muted)}
.cb-review dd{margin:0;color:var(--text);white-space:pre-wrap;overflow-wrap:break-word}
.cb-package{margin:0.6rem 0 0;padding:0;list-style:none;display:grid;gap:0.35rem}
.cb-package li{font-size:0.9rem;color:var(--text);padding-left:1.1rem;position:relative}
.cb-package li::before{content:'';position:absolute;left:0;top:0.55em;width:5px;height:5px;border-radius:50%;background:var(--text-muted)}
.cb-done{max-width:560px;margin:3rem auto 0;text-align:center}
.cb-done .cb-package{text-align:left;max-width:360px;margin-left:auto;margin-right:auto}
.cb-done-check{width:46px;height:46px;border-radius:50%;margin:0 auto 1.1rem;display:flex;align-items:center;justify-content:center;font-size:1.3rem;background:var(--surface);border:1px solid var(--border)}
.cb-admin .thumbs a{position:relative;display:block}
.cb-thumb-note{display:block;max-width:72px;font-size:0.68rem;color:var(--text-muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* The brand kit (owner 2026-10-17): the admin's Kit panel on each brief
   and the member's released kit. */
/* Studio Reels (owner 2026-10-18): the composer, the preview and the scene list. */
.rs-wrap{max-width:860px;margin:0 auto;padding:0.4rem 0 3rem}
.rs-hero{margin:0.6rem 0 1.2rem}
/* The reel seconds this month (owner 2026-10-18: "make sure they're aware of how many seconds they have left on the top of the bar"): shown to every member, unlike credits. */
.rs-secs{display:flex;align-items:center;gap:0.7rem;font-size:0.82rem;color:var(--text-muted);margin:0.55rem 0 0;flex-wrap:wrap}
.rs-secs-bar{flex:0 0 150px;height:4px;border-radius:2px;background:var(--border);overflow:hidden}
.rs-secs-fill{height:100%;border-radius:2px;background:var(--accent)}
.rs-secs.low{color:#b4452f}.rs-secs.low .rs-secs-fill{background:#b4452f}
.rs-prev .rs-secs{margin:0 0 0.6rem}
/* Your reels: the one being made, the stubs, the saved reels. */
.rs-hist{display:flex;flex-direction:column;gap:0.45rem}
.rs-hist-row{display:flex;align-items:center;gap:0.8rem;border:1px solid var(--border);border-radius:12px;padding:0.5rem 0.7rem;background:var(--surface)}
.rs-hist-row.busy{border-style:dashed}
.rs-hist-row.busy.can-open{cursor:pointer}.rs-hist-row.busy.can-open:hover{border-color:var(--text)}
.rs-hist-row.broke{border-color:#b4452f55}
.rs-hist-th{flex:0 0 44px;width:44px;height:58px;border-radius:8px;overflow:hidden;background:var(--surface2);display:flex;align-items:center;justify-content:center}
.rs-hist-th img{width:100%;height:100%;object-fit:cover}
.rs-hist-th .rs-style-art{width:44px;height:58px;border-radius:8px;display:block}
.rs-hist-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:0.15rem}
.rs-hist-main b{font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rs-hist-meta{font-size:0.78rem;color:var(--text-muted);display:flex;align-items:center;gap:0.35rem;flex-wrap:wrap}
.rs-hist-acts{display:flex;gap:0.35rem;flex-shrink:0}
.rs-h1{font-family:Georgia,serif;font-weight:400;font-size:2rem;margin:0 0 0.4rem;letter-spacing:-0.01em}
.rs-lede{color:var(--text-muted);margin:0;max-width:600px;line-height:1.5}
.rs-sec{margin-top:1.2rem}
.rs-lbl{font-size:0.78rem;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;color:var(--text-muted);margin-bottom:0.5rem}
.rs-styles{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:0.6rem}
.rs-art-notebook-explainer{background:#F1EFE8;background-image:linear-gradient(#E3E1D9 1px,transparent 1px),linear-gradient(90deg,#E3E1D9 1px,transparent 1px);background-size:14px 14px;position:relative}
.rs-art-notebook-explainer::after{content:'';position:absolute;left:18%;top:22%;width:40%;height:28%;background:#F3E07A;transform:rotate(-4deg);box-shadow:0 2px 6px rgba(0,0,0,.15)}
.rs-art-motion-explainer{background:radial-gradient(circle at 50% 45%,#2a1d12,#040404 70%);position:relative}
.rs-art-motion-explainer::after{content:'';position:absolute;left:50%;top:52%;width:46%;aspect-ratio:1;transform:translate(-50%,-50%);border:2px solid #E08039;border-radius:50%;box-shadow:0 0 18px rgba(224,128,57,.5)}
.rs-art-habit-reel{background:radial-gradient(circle at 50% 55%,#1E3B31,#13261F 70%);position:relative}
.rs-art-habit-reel::after{content:'';position:absolute;left:50%;top:58%;width:22%;height:34%;transform:translate(-50%,-50%);background:#EAF2EC;border-radius:999px}
.rs-art-viral-black{background:#050505;position:relative}
.rs-art-viral-black::before{content:'';position:absolute;left:30%;top:22%;width:40%;height:46%;border-radius:50% 50% 8px 8px;border:3px solid #F2F0EA;border-bottom:none}
.rs-art-viral-black::after{content:'';position:absolute;left:18%;right:18%;top:68%;height:2px;background:linear-gradient(90deg,transparent,#E0453A,transparent)}
.rs-vb-fmts{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:0.45rem;margin-top:0.5rem}
.rs-vb-fmt{display:flex;flex-direction:column;gap:2px;align-items:flex-start;text-align:left;padding:0.55rem 0.7rem;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text);font:inherit;cursor:pointer}
.rs-vb-fmt b{font-size:0.82rem}.rs-vb-fmt span{font-size:0.7rem;color:var(--text-muted)}.rs-vb-fmt i{font-style:normal;font-size:0.72rem;line-height:1.3;color:var(--text-muted);margin-top:3px}.rs-vb-fmt.on{border-color:var(--text);box-shadow:inset 0 0 0 1px var(--text)}
.rs-vb-fmt em{font-style:normal;font-size:0.62rem;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:var(--accent-fg,#fff);background:var(--accent);border-radius:999px;padding:2px 8px;margin-bottom:2px}.rs-vb-fmt.rec{border-color:var(--accent)}.rs-vb-fmt.rec i{color:var(--text)}
.rs-vb-sub{font-size:0.72rem;font-weight:600;letter-spacing:0.05em;text-transform:uppercase;color:var(--text-muted);margin-top:0.9rem}.rs-vb-recs{margin-top:0.4rem}.rs-vb-reading{opacity:0.8}
.rs-vb-again{display:flex;flex-wrap:wrap;align-items:center;gap:0.5rem;margin-top:1rem;padding-top:0.8rem;border-top:1px solid var(--border)}.rs-vb-again label{font-size:0.82rem;color:var(--text-muted);flex-basis:100%}.rs-vb-again select{flex:1;min-width:180px;max-width:320px}
.rs-fr-code{font:12px/1.5 ui-monospace,Menlo,Consolas,monospace;white-space:pre-wrap;word-break:break-word;max-height:320px;overflow:auto;margin:0.4rem 0 0;padding:0.7rem 0.8rem;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text)}.rs-fr-err{color:#c2593f;font-size:0.85rem;margin:0.5rem 0 0}
.rs-vb-rows{display:grid;grid-template-columns:1fr;gap:0.3rem;margin-top:0.5rem}.rs-vb-row{display:grid;grid-template-columns:120px 1fr;gap:0.6rem;font-size:0.85rem}.rs-vb-row span{color:var(--text-muted);text-transform:uppercase;font-size:0.68rem;letter-spacing:0.05em;padding-top:3px}
.rs-art-list-style{background:linear-gradient(160deg,#2B1E3A,#13383B 55%,#3A2617);position:relative}
.rs-art-list-style::before{content:'1. 2. 3.';position:absolute;left:12%;top:28%;font:700 15px 'Patrick Hand',cursive;color:#F1EAD9;letter-spacing:0.5px}
.rs-art-list-style::after{content:'';position:absolute;left:58%;top:30%;width:28%;height:40%;border-radius:50%;border:2px solid #F1EAD9;background:#C9A24D44}
.rs-ls-grid{display:grid;grid-template-columns:1fr 1fr;gap:0.6rem 0.8rem;margin:0.6rem 0}.rs-ls-grid label{display:flex;flex-direction:column;gap:0.25rem;font-size:0.82rem;color:var(--text-muted)}.rs-ls-grid input{margin:0}
.rs-ls-sw{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px;vertical-align:middle;border:1px solid rgba(255,255,255,.25)}
@media (max-width:640px){.rs-ls-grid{grid-template-columns:1fr}}
.rs-art-split-day{background:#0a0b0d;position:relative}
.rs-art-split-day::before,.rs-art-split-day::after{content:'';position:absolute;left:10%;width:80%;height:30%;border-radius:6px;background:#4c4c4c}
.rs-art-split-day::before{top:12%}.rs-art-split-day::after{top:56%;background:#2a2b30}
.rs-sw{display:flex;gap:0.45rem;flex-wrap:wrap;align-items:center}
.rs-sw-dot{width:30px;height:30px;border-radius:50%;border:0;cursor:pointer}
.il-pal-row{display:flex;flex-direction:column;gap:0.5rem}
.il-pal-top{display:flex;gap:0.5rem;flex-wrap:wrap}
.il-chip{font:inherit;font-size:0.82rem;padding:0.4rem 0.8rem;border-radius:999px;border:0;background:var(--surface2,rgba(128,128,128,.14));color:var(--text);cursor:pointer}
.il-chip.on{background:var(--accent);color:var(--accent-fg,#fff)}
.il-pal-g,.il-pal-more>summary{font-size:0.72rem;color:var(--text-muted);margin-top:0.25rem;cursor:default}
.il-pal-more>summary{cursor:pointer}
.il-pal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:0.45rem}
.il-pal{font:inherit;display:flex;flex-direction:column;gap:0.25rem;padding:0;border:0;background:none;cursor:pointer;text-align:left;color:var(--text)}
.il-pal-sw{display:flex;gap:2px;padding:5px;border-radius:9px;height:30px;box-shadow:0 1px 2px rgba(0,0,0,.12)}
.il-pal-sw i{flex:1;border-radius:4px}
.il-pal.on .il-pal-sw{box-shadow:0 0 0 2px var(--bg,#fff),0 0 0 4px var(--accent)}
.il-pal-n{font-size:0.7rem;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.il-pal.on .il-pal-n{color:var(--text);font-weight:600}
.rs-sw-dot.on{box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--text)}
.rs-sw-pick{width:44px;height:34px;border:1px solid var(--border);border-radius:10px;background:var(--surface);padding:3px;cursor:pointer}
.rs-sw-any{display:inline-flex;align-items:center;gap:0.45rem;font-size:0.8rem;color:var(--text-muted);cursor:pointer;margin-left:0.2rem}
.rs-sw-any code{font-size:0.72rem;font-family:"JetBrains Mono",ui-monospace,monospace;color:var(--text-muted)}
.rs-sw-any.on{color:var(--text)}
.rs-sw-any.on .rs-sw-pick{box-shadow:0 0 0 2px var(--text)}
.rs-page-n{display:flex;align-items:center;justify-content:center;font:600 1.4rem Georgia,serif;color:var(--text-muted);aspect-ratio:9/16}
.rs-page-lines p{margin:0 0 0.35rem;font-size:0.86rem;line-height:1.45}
.rs-page-lines .rs-page-src{font-style:italic;color:var(--text-muted)}
.rs-page-lines .rs-ref{font-size:0.72rem;color:var(--text-muted)}
.rs-page-els{display:flex;gap:0.3rem;flex-wrap:wrap;margin-top:0.3rem}
.rs-chip{font-size:0.7rem;padding:0.15rem 0.5rem;border-radius:999px;background:var(--surface2,rgba(128,128,128,.14));color:var(--text-muted)}
.rs-caption{white-space:normal;font-size:0.86rem;line-height:1.5;padding:0.8rem 1rem;border:1px solid var(--border);border-radius:12px;background:var(--surface)}
.rs-style{display:flex;flex-direction:column;gap:0.3rem;text-align:start;padding:0.7rem;border-radius:14px;border:1px solid var(--border);background:var(--surface);color:var(--text);font:inherit;cursor:pointer}
.rs-style.on{border-color:var(--text);box-shadow:0 0 0 1px var(--text) inset}
.rs-style b{font-size:0.9rem}.rs-style span{font-size:0.74rem;color:var(--text-muted);line-height:1.35}
.rs-style-art{display:block;aspect-ratio:9/13;border-radius:10px;margin-bottom:0.2rem}
.rs-art-quran-explainer{background:linear-gradient(160deg,#F4EFE6,#D9CDB7 70%,#8A6D3B)}
.rs-art-animated-story{background:linear-gradient(160deg,#1B2A2F,#3E6B6E 60%,#E0A458)}
.rs-art-islamic-kids{background:linear-gradient(160deg,#FFF4D6,#CDE9F2 55%,#F2A65A)}
.rs-art-kinetic-text{background:linear-gradient(160deg,#101418,#30383F 70%,#E0A458)}
.rs-topic{min-height:96px;margin-top:0}
.rs-row{display:flex;gap:0.8rem;align-items:center;flex-wrap:wrap;margin-top:0.5rem}
.rs-check{display:inline-flex;gap:0.4rem;align-items:center;font-size:0.86rem;color:var(--text)}
.rs-select{height:36px;padding:0 0.6rem;border-radius:10px;border:1px solid var(--border);background:var(--bg);color:var(--text);font:inherit;font-size:0.84rem;max-width:100%}
.rs-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.rs-hint{font-size:0.78rem;color:var(--text-muted);margin-top:0.45rem;line-height:1.4}
/* The voice menu (owner 2026-10-18: "a curated menu... a really nice UI/UX
   for them to choose from"). Each voice is a stone: a muted gradient with
   the voice's initial that turns into moving bars and a progress ring
   while its sample plays. Tap = choose and hear it. */
.rs-vhead{display:flex;align-items:center;justify-content:space-between;gap:0.8rem;margin-bottom:0.55rem}
.rs-vhead .rs-lbl{margin:0}
.rs-vnarr{display:inline-flex;align-items:center;gap:0.55rem;font-size:0.82rem;color:var(--text-muted);cursor:pointer}
button.toggle-switch{padding:0;font:inherit}
.rs-vcards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0.6rem}
.rs-vc{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:0.12rem;min-width:0;padding:0.85rem 0.85rem 0.8rem;border-radius:16px;border:1px solid var(--border);background:var(--surface);color:var(--text);font:inherit;text-align:start;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.rs-vc:hover{border-color:var(--text-muted)}
.rs-vc[aria-pressed="true"]{border-color:var(--text);box-shadow:0 0 0 1px var(--text) inset}
.rs-vc:focus-visible,.rs-vr:focus-visible,.rs-vs-tab:focus-visible,.rs-vs-x:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.rs-vc b{font-size:0.92rem;font-weight:600;margin-top:0.6rem}
.rs-vc .t{font-size:0.78rem;line-height:1.3}
.rs-vc .w{font-size:0.72rem;color:var(--text-muted);line-height:1.3}
.rs-vc .t,.rs-vc .w{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rs-vck{position:absolute;top:0.75rem;inset-inline-end:0.75rem;width:20px;height:20px;border-radius:50%;background:var(--text);color:var(--bg);display:none;align-items:center;justify-content:center}
[aria-pressed="true"]>.rs-vck{display:flex}
.rs-vfoot{display:flex;align-items:center;justify-content:space-between;gap:0.8rem;margin-top:0.6rem;flex-wrap:wrap}
.rs-vfoot .rs-hint{margin:0}
.rs-vskel{height:122px;border-radius:16px;background:var(--surface);border:1px solid var(--border);opacity:.6}
.rs-orb{--a:#7E9483;--b:#2E3B33;position:relative;width:40px;height:40px;border-radius:50%;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;color:#fff;background:radial-gradient(circle at 32% 28%,var(--a),var(--b) 74%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.rs-orb.sm{width:30px;height:30px}
.rs-orb .i{font-family:Georgia,serif;font-size:1.3rem;line-height:1;transition:opacity .15s}
.rs-orb.sm .i{font-size:1rem}
.rs-orb .pl,.rs-orb .eq{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s}
.rs-orb .eq{gap:3px}
.rs-orb .eq span{display:block;width:3px;height:14px;border-radius:2px;background:#fff;transform:scaleY(.35);animation:rsEq .9s ease-in-out infinite paused}
.rs-orb .eq span:nth-child(2){animation-delay:-.3s}.rs-orb .eq span:nth-child(3){animation-delay:-.6s}
@media (hover:hover){.rs-vc:hover .rs-orb .i,.rs-vr:hover .rs-orb .i{opacity:0}.rs-vc:hover .rs-orb .pl,.rs-vr:hover .rs-orb .pl{opacity:1}}
.is-playing .rs-orb .i,.is-playing .rs-orb .pl,.is-loading .rs-orb .i,.is-loading .rs-orb .pl{opacity:0 !important}
.is-playing .rs-orb .eq{opacity:1}.is-playing .rs-orb .eq span{animation-play-state:running}
.is-playing .rs-orb::before{content:'';position:absolute;inset:-4px;border-radius:50%;background:conic-gradient(var(--text) calc(var(--p,0)*360deg),var(--border) 0);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px))}
.is-loading .rs-orb::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--border);border-top-color:var(--text);animation:rsSpin .8s linear infinite}
@keyframes rsEq{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
@keyframes rsSpin{to{transform:rotate(360deg)}}
.rs-vback{position:fixed;inset:0;z-index:2600;display:flex;align-items:center;justify-content:center;padding:1rem;background:rgba(20,20,18,.45);animation:rsFade .16s ease}
.rs-vsheet{width:min(620px,100%);max-height:min(84vh,760px);display:flex;flex-direction:column;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow-floating);overflow:hidden;animation:rsRise .22s cubic-bezier(.2,.8,.2,1)}
@keyframes rsFade{from{opacity:0}}
@keyframes rsRise{from{opacity:0;transform:translateY(14px)}}
.rs-vs-top{display:flex;align-items:flex-start;gap:1rem;padding:1.25rem 1.35rem 0.2rem}
.rs-vs-top,.rs-vs-tabs,.rs-vs-foot{flex-shrink:0}
.rs-vs-h{font-family:Georgia,serif;font-weight:400;font-size:1.65rem;line-height:1.15;margin:0}
.rs-vs-sub{font-size:0.84rem;color:var(--text-muted);margin:0.3rem 0 0;line-height:1.45}
.rs-vs-x{margin-inline-start:auto;flex-shrink:0;width:34px;height:34px;border-radius:50%;border:1px solid var(--border);background:var(--bg);color:var(--text);display:flex;align-items:center;justify-content:center;cursor:pointer}
.rs-vs-tabs{display:flex;gap:1.35rem;padding:0.7rem 1.35rem 0;border-bottom:1px solid var(--border);overflow-x:auto}
.rs-vs-tab{background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:0.5rem 0 0.6rem;font:inherit;font-size:0.86rem;color:var(--text-muted);cursor:pointer;white-space:nowrap}
.rs-vs-tab[aria-selected="true"]{color:var(--text);border-bottom-color:var(--text);font-weight:600}
.rs-vs-langs{flex-shrink:0;display:flex;gap:0.35rem;padding:0.55rem 1.1rem 0.15rem;overflow-x:auto;scrollbar-width:none}
.rs-vs-langs::-webkit-scrollbar{display:none}
.rs-vs-lang{background:none;border:0;border-radius:8px;padding:0.32rem 0.55rem;font:inherit;font-size:0.8rem;color:var(--text-muted);cursor:pointer;white-space:nowrap}
.rs-vs-lang:hover{color:var(--text)}
.rs-vs-lang[aria-checked="true"]{background:var(--nav-active-bg);color:var(--text);font-weight:600}
.rs-vs-list{overflow-y:auto;padding:0.3rem 0.75rem 0.9rem;flex:1;min-height:0}
.rs-vs-sec{font-size:0.8rem;color:var(--text-muted);padding:1rem 0.6rem 0.35rem}
.rs-vr{position:relative;display:flex;align-items:center;gap:0.9rem;width:100%;padding:0.6rem 0.6rem;border:0;border-radius:12px;background:none;color:var(--text);font:inherit;text-align:start;cursor:pointer}
.rs-vr:hover{background:var(--nav-active-bg)}
.rs-vr[aria-pressed="true"]{background:var(--nav-active-bg)}
.rs-vr .nm{display:flex;flex-direction:column;flex:1;min-width:0;gap:0.1rem}
.rs-vr .nm b{font-size:0.94rem;font-weight:600}
.rs-vr .nm>span{font-size:0.8rem;color:var(--text-muted)}
.rs-vr .nm .tn::after{content:'. '}
.rs-vr .rs-vck{position:static}
.rs-vs-empty{padding:1.4rem 0.6rem;font-size:0.86rem;color:var(--text-muted)}
.rs-vs-foot{display:flex;align-items:center;gap:0.9rem;padding:0.9rem 1.35rem;border-top:1px solid var(--border)}
.rs-vs-now{flex:1;min-width:0;display:flex;align-items:center;gap:0.65rem;font-size:0.84rem}
.rs-vs-now .nm{display:flex;flex-direction:column;min-width:0}
.rs-vs-now .nm span{font-size:0.76rem;color:var(--text-muted)}
.rs-vs-foot .cb-primary{height:42px;flex-shrink:0}
.rs-vline{display:flex;align-items:center;gap:0.6rem;justify-content:center;font-size:0.84rem;color:var(--text-muted)}
.rs-vline b{color:var(--text);font-weight:600}
@media (max-width:640px){
  .rs-vcards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rs-vback{align-items:flex-end;padding:0}
  .rs-vsheet{width:100%;max-height:90vh;border-radius:20px 20px 0 0;border-bottom:0}
  .rs-vs-foot{padding-bottom:calc(0.9rem + env(safe-area-inset-bottom,0px))}
}
.rs-actions{display:flex;align-items:center;gap:0.9rem;flex-wrap:wrap}
.rs-status{font-size:0.84rem;color:var(--text-muted)}
.rs-err{font-size:0.82rem;color:#b3432b;margin-top:0.3rem}
.rs-saved{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:0.6rem}
.rs-saved-it{display:flex;flex-direction:column;gap:0.35rem;padding:0;border:0;background:none;color:var(--text);font:inherit;font-size:0.76rem;text-align:start;cursor:pointer}
.rs-saved-it img,.rs-saved-ph{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:10px;background:var(--surface2,rgba(128,128,128,.14));display:block}
.rs-topbar{display:flex;align-items:center;gap:0.7rem;flex-wrap:wrap;margin-bottom:0.8rem}
.rs-title{font-weight:600;font-size:0.95rem;flex:1;min-width:120px}
.rs-saved-at{font-size:0.74rem;color:var(--text-muted)}
.rs-top-acts{display:flex;gap:0.4rem}
.rs-stage{display:flex;flex-direction:column;align-items:center;gap:0.6rem}
.rs-canvas-wrap{width:min(360px,100%);aspect-ratio:9/16;border-radius:18px;overflow:hidden;background:#000;box-shadow:var(--shadow-floating,0 12px 40px rgba(0,0,0,.18))}
.rs-canvas-wrap canvas{width:100%;height:100%;display:block}
.rs-transport{display:flex;gap:0.5rem;align-items:center;flex-wrap:wrap;justify-content:center}
/* THE SCRUBBER (owner 2026-10-20: "They should be able to skip through it, have a little bar with the dot, and they could just click through and go anywhere"). */
.rs-scrub{width:min(360px,100%);padding:12px 0 6px;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none;outline:none}.rs-scrub-track{position:relative;height:4px;border-radius:2px;background:var(--border)}.rs-scrub-fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:2px;background:var(--accent)}.rs-scrub-dot{position:absolute;top:50%;left:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px var(--surface,#fff),0 1px 4px rgba(0,0,0,0.25);transition:transform 0.12s}.rs-scrub:hover .rs-scrub-dot,.rs-scrub:focus-visible .rs-scrub-dot,.rs-scrub.drag .rs-scrub-dot{transform:scale(1.25)}.rs-scrub.rec{opacity:0.45;cursor:not-allowed}.rs-scrub-mark{position:absolute;top:-3px;width:2px;height:10px;margin-left:-1px;border-radius:1px;background:var(--text-muted);opacity:0.45}
.rs-talk{width:min(640px,100%);margin:1rem auto 0;padding:1rem 1.1rem;border:1px solid var(--border);border-radius:18px;background:var(--surface);box-shadow:var(--shadow-floating,0 12px 40px rgba(0,0,0,.14))}
.rs-talk-head{display:flex;gap:0.8rem;align-items:flex-start}.rs-talk-head b{font-size:1.05rem;display:block;margin-bottom:0.15rem}
.rs-talk-orb{flex:0 0 auto;width:42px;height:42px;border-radius:50%;background:#0A0A0A;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.25)}.rs-talk-orb img{width:24px;height:24px;border-radius:6px;object-fit:cover}
.rs-talk-orb.sm{width:26px;height:26px;box-shadow:none}.rs-talk-orb.sm img{width:14px;height:14px;border-radius:4px}
.rs-talk-thread{display:flex;flex-direction:column;gap:0.5rem;margin:0.9rem 0 0.2rem}
.rs-talk-you{align-self:flex-end;max-width:85%;padding:0.5rem 0.8rem;border-radius:14px 14px 4px 14px;background:var(--accent);color:var(--accent-fg,#fff);font-size:0.88rem}
.rs-talk-k{display:flex;gap:0.5rem;align-items:flex-start;max-width:92%;padding:0.45rem 0.6rem 0.45rem 0.4rem;border-radius:4px 14px 14px 14px;background:var(--surface2,rgba(128,128,128,.12));font-size:0.88rem;line-height:1.4}
.rs-talk-busy{margin-top:0.8rem;padding:0.7rem 0.8rem;border-radius:12px;background:var(--surface2,rgba(128,128,128,.12));color:var(--text)}
.rs-talk-busy-head{display:flex;gap:0.5rem;align-items:center;font-size:0.9rem;font-weight:500}
.rs-talk-prog{height:6px;border-radius:3px;background:rgba(128,128,128,.22);margin:0.55rem 0 0.35rem;overflow:hidden}
.rs-talk-bar{height:100%;width:0;border-radius:3px;background:var(--accent);transition:width 0.3s linear;position:relative}
.rs-talk-bar::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);animation:rsTalkShimmer 1.4s linear infinite}
@keyframes rsTalkShimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){.rs-talk-bar::after{animation:none}}
.rs-talk-phase{font-size:0.8rem;color:var(--text-muted)}
.rs-work{width:min(640px,100%);margin:1rem auto 0;padding:1rem 1.1rem;border:1px solid var(--border);border-radius:18px;background:var(--surface)}
.rs-work-skel{display:flex;gap:0.6rem;align-items:flex-end;height:96px;margin-bottom:0.8rem}
.rs-work-skel span{display:block;flex:1;border-radius:10px;background:linear-gradient(110deg,var(--surface2,rgba(128,128,128,.12)) 30%,var(--border) 50%,var(--surface2,rgba(128,128,128,.12)) 70%);background-size:200% 100%;animation:sgShimmer 1.6s linear infinite}
.rs-work-skel span:nth-child(1){height:64px}.rs-work-skel span:nth-child(2){height:88px;animation-delay:0.12s}.rs-work-skel span:nth-child(3){height:72px;animation-delay:0.24s}.rs-work-skel span:nth-child(4){height:96px;animation-delay:0.36s}
.rs-work-text b{display:block;font-size:0.95rem;margin-bottom:0.15rem}
.rs-fold{width:min(640px,100%);margin:1.2rem auto 0}.rs-il-row{width:min(640px,100%);margin:1.2rem auto 0}.rs-fold>summary{cursor:pointer;font-size:0.82rem;color:var(--text-muted);padding:0.4rem 0;list-style:none}.rs-fold>summary::before{content:'▸ ';}.rs-fold[open]>summary::before{content:'▾ ';}.rs-vb-fold{width:100%;margin:0.5rem 0 0}
/* Studio Reels, the page (owner brief 2026-10-21): a header, the gallery of moving samples, the composer, the recent reels.
   Neutral surfaces, the tokens, colour only inside the previews and the chosen aesthetic. */
.rs2{width:100%;box-sizing:border-box}
.rs2 .rs-head{margin:0.4rem 0 1.4rem}
.rs2 .rs-h1{font-size:1.9rem;margin:0 0 0.25rem}
.rs2 .rs-lede{font-size:0.95rem}
.rs-gal-head{display:flex;align-items:baseline;justify-content:space-between;gap:0.8rem;margin-bottom:0.55rem}.rs-gal-head .rs-lbl{margin:0}
.rs-link{background:none;border:0;padding:0;font:inherit;font-size:0.82rem;font-weight:600;color:var(--text);cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--border)}
.rs-gal-fold>summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:0.6rem;flex-wrap:wrap}.rs-gal-fold>summary::-webkit-details-marker{display:none}.rs-gal-fold>summary .rs-lbl::before{content:'▸ ';font-size:0.8em}.rs-gal-fold[open]>summary .rs-lbl::before{content:'▾ '}.rs-gal-fold>summary .rs-link{margin-left:auto}.rs-defaults{margin-top:0.6rem}
.rs-help{display:flex;flex-wrap:wrap;gap:0.35rem 0.6rem;align-items:baseline;margin-top:0.45rem}
.rs-help-acts{display:inline-flex;gap:0.6rem;align-items:baseline}.rs-help-q{font-size:0.82rem;color:var(--text)}
.rs-help-n{font-size:0.78rem;color:var(--text-muted);margin-left:auto}.rs-help-n.over{color:#b3432b;font-weight:600}
.rs-cool{display:block;max-width:560px;line-height:1.45}
.rs-link:hover{text-decoration-color:var(--text)}
.rs-link:focus-visible,.rs-gal-pick:focus-visible,.rs-gal-more:focus-visible,.rs-pv-play:focus-visible,.rs-sb-item:focus-visible,.rs-sb-look:focus-visible,.rs-fb-card:focus-visible,.rs-aes-pal:focus-visible,.rs-rc-row:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.rs-gal{grid-template-columns:repeat(5,minmax(0,1fr));gap:0.7rem}
.rs-gal-card{padding:0;position:relative;overflow:hidden;gap:0}
.rs-gal-art{display:block;padding:0.55rem 0.55rem 0;cursor:pointer}
.rs-gal-pick{display:flex;flex-direction:column;gap:0.2rem;width:100%;padding:0.35rem 0.55rem 0.6rem;border:0;background:none;color:var(--text);font:inherit;text-align:start;cursor:pointer;border-radius:0 0 14px 14px}
.rs-gal-pick b{font-size:0.86rem;margin-top:0.35rem}.rs-gal-pick>span:last-child{font-size:0.72rem;color:var(--text-muted);line-height:1.35}
.rs-gal-more{position:absolute;top:0.75rem;inset-inline-end:0.75rem;padding:0.2rem 0.55rem;border-radius:999px;border:0;background:rgba(20,20,18,.62);color:#fff;font:inherit;font-size:0.68rem;font-weight:600;cursor:pointer;opacity:0;transition:opacity .15s}
.rs-gal-card:hover .rs-gal-more,.rs-gal-card:focus-within .rs-gal-more{opacity:1}
@media (hover:none){.rs-gal-more{opacity:1}}
.rs-pv{position:relative;width:100%;aspect-ratio:9/16;border-radius:10px;overflow:hidden;background:#0b0b0b}
.rs-pv canvas{width:100%;height:100%;display:block}
.rs-pv-play{position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;border:0;background:rgba(255,255,255,.9);cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:.92;transition:opacity .15s}
.rs-pv-play::before{content:'';display:block;width:0;height:0;border-style:solid;border-width:7px 0 7px 12px;border-color:transparent transparent transparent #111;margin-left:3px}
.rs-pv.playing .rs-pv-play{opacity:0}.rs-pv.playing:hover .rs-pv-play,.rs-pv.playing .rs-pv-play:focus-visible{opacity:.92}
.rs-pv.playing .rs-pv-play::before{width:4px;height:14px;border:0;border-left:4px solid #111;border-right:4px solid #111;margin:0}
.rs-pv-tag{position:absolute;left:6px;bottom:6px;padding:1px 6px;border-radius:999px;background:rgba(20,20,18,.62);color:#fff;font-size:0.6rem;font-weight:600;letter-spacing:0.05em;text-transform:uppercase;pointer-events:none}
.rs-pv-sm{width:54px;flex:0 0 54px;border-radius:8px}.rs-pv-sm .rs-pv-play{width:26px;height:26px;margin:-13px 0 0 -13px}.rs-pv-sm .rs-pv-play::before{border-width:5px 0 5px 8px;margin-left:2px}.rs-pv-sm .rs-pv-tag{display:none}
.rs-pv-lg{width:min(300px,100%);margin:0 auto;border-radius:16px}
.rs-composer{margin-top:1.6rem;padding:1.1rem 1.2rem 1.2rem;border:1px solid var(--border);border-radius:18px;background:var(--surface)}
.rs-group{margin-top:1.1rem}.rs-group:first-child{margin-top:0}.rs-group>label.rs-lbl{display:block}
.rs-sub{margin-top:0.8rem}
.rs2 .rs-topic{min-height:88px;font-size:1rem}
.rs-chosen,.rs-fmt-chosen,.rs-aes-row{display:flex;align-items:center;gap:0.8rem;padding:0.6rem 0.7rem;border:1px solid var(--border);border-radius:12px;background:var(--bg)}
.rs-chosen-main,.rs-fmt-main,.rs-aes-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:0.1rem}
.rs-chosen-main b,.rs-fmt-main b,.rs-aes-main b{font-size:0.9rem;font-weight:600}
.rs-fmt-chosen>span:not(.rs-aes-sw){font-size:0.78rem;color:var(--text-muted)}
.rs-fmt-foot{display:flex;gap:1rem;flex-wrap:wrap;margin-top:0.6rem}
.rs-fb-auto-mark{flex:0 0 auto;width:40px;height:40px;border-radius:50%;background:#0A0A0A;display:inline-flex;align-items:center;justify-content:center}.rs-fb-auto-mark img{width:20px;height:20px;border-radius:5px}
.rs-aes-sw{display:inline-flex;gap:3px;flex:0 0 auto}.rs-aes-sw i{width:16px;height:28px;border-radius:5px;display:block;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}.rs-aes-sw.empty i{background:var(--surface2,rgba(128,128,128,.14))}
.rs-aes-state{font-size:0.76rem;color:var(--text-muted)}
.rs-aes-acts{display:flex;gap:0.35rem;flex-wrap:wrap;justify-content:flex-end}
.rs-aes-line{display:flex;align-items:center;gap:0.8rem;flex-wrap:wrap}
.rs-aes-sheet{width:min(880px,100%)}.rs-pal-sheet{width:min(760px,100%)}
.rs-aes-body{padding:0.9rem 1.35rem}
.rs-aes-grid{display:grid;grid-template-columns:1fr 300px;gap:1.4rem;align-items:start}
.rs-aes-pals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0.5rem}
.rs-aes-pal{display:flex;flex-direction:column;gap:0.3rem;align-items:flex-start;padding:0.5rem;border:1px solid var(--border);border-radius:12px;background:var(--bg);color:var(--text);font:inherit;font-size:0.76rem;cursor:pointer;text-align:start}
.rs-aes-pal.on{border-color:var(--text);box-shadow:inset 0 0 0 1px var(--text)}
.rs-aes-roles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0.45rem}
.rs-aes-role{display:flex;align-items:center;gap:0.5rem;font-size:0.82rem;cursor:pointer}.rs-aes-role input{width:36px;height:30px;border:1px solid var(--border);border-radius:8px;background:var(--surface);padding:2px;cursor:pointer}.rs-aes-role code{font-size:0.7rem;color:var(--text-muted);margin-inline-start:auto}
.rs-aes-fonts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0.5rem}.rs-aes-font{display:flex;flex-direction:column;gap:0.25rem;font-size:0.78rem;color:var(--text-muted)}.rs-aes-font select{width:100%}
.rs-aes-type{display:flex;gap:0.5rem;margin-top:0.6rem}.rs-aes-type span{flex:1;padding:0.6rem 0.7rem;border-radius:10px;border:1px solid var(--border);font-size:0.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rs2 .rs-check input{appearance:none;-webkit-appearance:none;margin:0;padding:0;width:18px;height:18px;flex:none;border:1.5px solid var(--text-muted);border-radius:5px;background:var(--surface);cursor:pointer;position:relative;display:inline-block;box-shadow:none}
.rs2 .rs-check input:checked{background:var(--text);border-color:var(--text)}
.rs2 .rs-check input:checked::after{content:'';position:absolute;left:5px;top:1px;width:5px;height:10px;border:solid var(--surface);border-width:0 2px 2px 0;transform:rotate(45deg)}
.rs2 .rs-check input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.rs-create{margin-top:1.3rem;padding-top:1rem;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:0.45rem}
.rs-create-row{display:flex;align-items:center;gap:0.9rem;flex-wrap:wrap}
.rs-create-btn{height:46px;padding:0 1.5rem;font-size:0.95rem}
.rs-estimate{font-size:0.82rem;color:var(--text-muted)}
.rs2 .rs-secs{margin:0}
.rs-recent{margin-top:1.8rem}
.rs-rc-row{display:flex;align-items:center;gap:0.8rem;padding:0.5rem 0.6rem;border-radius:12px;border:1px solid var(--border);background:var(--surface)}
.rs-rc-row[role="button"]{cursor:pointer}.rs-rc-row.busy{border-style:dashed}.rs-rc-row.broke{border-color:#b4452f55}
.rs-rc-th{position:relative;flex:0 0 45px;width:45px;height:80px;border-radius:8px;overflow:hidden;background:var(--surface2,rgba(128,128,128,.12))}
.rs-rc-th .rs-style-art{width:100%;height:100%;display:block;border-radius:8px;margin:0}
.rs-rc-th canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .25s}.rs-rc-th canvas.drawn{opacity:1}
.rs-rc-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:0.15rem}.rs-rc-main b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rs-rc-meta{font-size:0.76rem;color:var(--text-muted);display:flex;align-items:center;gap:0.35rem;flex-wrap:wrap}.rs-rc-meta i{font-style:normal}.rs-rc-meta i.ok{color:#2a7a4b}
.rs-rc-acts{display:flex;gap:0.35rem;flex-shrink:0}
/* The style browser and the format browser. */
.rs-sb{width:min(1040px,100%);max-height:min(88vh,860px)}
.rs-sb-body{display:grid;grid-template-columns:280px 1fr;flex:1;min-height:0;overflow:hidden}
.rs-sb-list{overflow-y:auto;padding:0.6rem;border-inline-end:1px solid var(--border);display:flex;flex-direction:column;gap:0.2rem}
.rs-sb-item{display:flex;align-items:center;gap:0.7rem;width:100%;padding:0.45rem 0.5rem;border:0;border-radius:12px;background:none;color:var(--text);font:inherit;text-align:start;cursor:pointer}
.rs-sb-item:hover{background:var(--nav-active-bg)}.rs-sb-item.on{background:var(--nav-active-bg)}
.rs-sb-item .rs-style-art{flex:0 0 36px;width:36px;height:52px;margin:0;border-radius:7px}
.rs-sb-item-t{display:flex;flex-direction:column;min-width:0}.rs-sb-item-t b{font-size:0.88rem}.rs-sb-item-t span{font-size:0.72rem;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rs-sb-detail{overflow-y:auto;padding:1.1rem 1.35rem 1.35rem;display:grid;grid-template-columns:300px 1fr;gap:1.4rem;align-content:start}
.rs-sb-stage{position:sticky;top:0}
.rs-sb-text h3{font-family:Georgia,serif;font-weight:400;font-size:1.6rem;margin:0 0 0.3rem}.rs-sb-text p{margin:0 0 0.9rem;line-height:1.5;font-size:0.92rem}
.rs-sb-ul{margin:0 0 0.9rem;padding-inline-start:1.1rem;font-size:0.9rem;line-height:1.5}
.rs-sb-looks{display:flex;gap:0.5rem;flex-wrap:wrap;margin:0.5rem 0 0.9rem}
.rs-sb-look{display:flex;flex-direction:column;align-items:center;gap:0.25rem;padding:0.4rem;border:1px solid var(--border);border-radius:12px;background:var(--bg);color:var(--text);font:inherit;font-size:0.72rem;cursor:pointer}
.rs-sb-look canvas{width:64px;height:64px;border-radius:8px;background:#F1EAD9}.rs-sb-look.on{border-color:var(--text);box-shadow:inset 0 0 0 1px var(--text)}
.rs-sb-acts{margin-top:1rem}
.rs-fb{width:min(1120px,100%);max-height:min(90vh,900px)}
.rs-fb-body{display:grid;grid-template-columns:1fr 340px;flex:1;min-height:0;overflow:hidden}
.rs-fb-grid{overflow-y:auto;padding:0.8rem 1rem 1.2rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:0.6rem;align-content:start;border-inline-end:1px solid var(--border)}
.rs-fb-card{position:relative;display:flex;flex-direction:column;gap:0.15rem;padding:0.4rem;border:1px solid var(--border);border-radius:12px;background:var(--bg);color:var(--text);font:inherit;text-align:start;cursor:pointer}
.rs-fb-card.on{border-color:var(--text);box-shadow:inset 0 0 0 1px var(--text)}.rs-fb-art{cursor:pointer}.rs-fb-sel{display:flex;flex-direction:column;gap:0.1rem;width:100%;padding:0.3rem 0.1rem 0.1rem;border:0;background:none;color:var(--text);font:inherit;text-align:start;cursor:pointer;border-radius:8px}.rs-fb-sel b{font-size:0.78rem}.rs-fb-sel span{font-size:0.68rem;color:var(--text-muted)}.rs-fb-sel:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.rs-fb-card em{position:absolute;top:0.65rem;inset-inline-start:0.65rem;font-style:normal;font-size:0.58rem;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:var(--accent-fg,#fff);background:var(--accent);border-radius:999px;padding:2px 7px}
.rs-fb-auto{grid-column:1 / -1;flex-direction:row;align-items:center;gap:0.8rem;padding:0.5rem 0.8rem}.rs-fb-auto .rs-fb-sel{padding:0.3rem 0}.rs-fb-auto .rs-fb-sel b{font-size:0.9rem}.rs-fb-auto .rs-fb-sel span{font-size:0.76rem}
.rs-fb-detail{overflow-y:auto;padding:1rem 1.2rem 1.3rem}
.rs-fb-stage{margin-bottom:0.9rem}
.rs-fb-text h3{font-family:Georgia,serif;font-weight:400;font-size:1.45rem;margin:0 0 0.2rem}.rs-fb-text p{margin:0 0 0.6rem;font-size:0.9rem;line-height:1.5}
.rs-fb-why{padding:0.6rem 0.7rem;border-radius:10px;background:var(--surface2,rgba(128,128,128,.12));font-size:0.84rem}
@media (max-width:1000px){.rs-gal{grid-template-columns:repeat(4,minmax(0,1fr))}.rs-sb-detail{grid-template-columns:1fr}.rs-sb-stage{position:static}.rs-fb-body{grid-template-columns:1fr}.rs-fb-grid{border-inline-end:0}.rs-fb-detail{border-top:1px solid var(--border)}}
@media (max-width:800px){.rs-gal{display:flex;overflow-x:auto;gap:0.6rem;padding-bottom:0.4rem;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:-0.2rem;padding-inline:0.2rem}.rs-gal::-webkit-scrollbar{display:none}.rs-gal-card{flex:0 0 150px;scroll-snap-align:start}.rs-composer{padding:0.9rem 0.9rem 1rem}.rs-aes-grid{grid-template-columns:1fr}.rs-aes-right{order:-1}.rs-sb-body{grid-template-columns:1fr;grid-template-rows:auto 1fr}.rs-sb-list{flex-direction:row;overflow-x:auto;overflow-y:hidden;border-inline-end:0;border-bottom:1px solid var(--border);padding:0.5rem}.rs-sb-item{flex:0 0 auto;width:auto;padding:0.35rem 0.5rem}.rs-sb-item .rs-style-art{width:28px;height:40px}.rs-sb-item-t span{display:none}.rs-fb-body{grid-template-rows:1fr auto}.rs-fb-detail{max-height:46vh}.rs-fb-stage .rs-pv-lg{width:min(170px,100%)}.rs-aes-acts{flex-basis:100%;justify-content:flex-start}}
@media (prefers-reduced-motion:reduce){.rs-work-skel span{animation:none}}
/* Mirror for carousels and reels (owner 2026-10-20) */
.mm-modes{display:inline-flex;gap:2px;margin-left:1rem;padding:3px;border-radius:999px;background:var(--surface2,rgba(128,128,128,.12))}
.mm-modes button{border:none;background:transparent;color:var(--text-muted);font:inherit;font-size:0.78rem;font-weight:600;padding:0.3rem 0.75rem;border-radius:999px;cursor:pointer}
.mm-modes button.active{background:var(--surface);color:var(--text);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.mm-wrap{flex:1;min-height:0;overflow:auto;padding:1.2rem 1rem 3rem}
.mm-col{width:min(760px,100%);margin:0 auto}
.mm-head{margin-bottom:1rem}.mm-title{font-family:Georgia,serif;font-size:1.7rem;line-height:1.1;margin-bottom:0.35rem}
.mm-drop{margin-top:0.6rem;padding:1.4rem 1rem;border:1.5px dashed var(--border);border-radius:16px;display:flex;flex-wrap:wrap;gap:0.8rem;align-items:center;justify-content:center;background:var(--surface)}
.mm-drop.over{border-color:var(--accent);background:var(--nav-active-bg,rgba(128,128,128,.08))}
.mm-thumbs{display:flex;flex-wrap:wrap;gap:0.5rem;margin-top:0.8rem}
.mm-thumb{position:relative;width:88px}.mm-thumb img{width:88px;height:110px;object-fit:cover;border-radius:8px;display:block;border:1px solid var(--border)}
.mm-n{position:absolute;top:4px;left:4px;font-size:0.62rem;font-weight:700;background:rgba(0,0,0,.65);color:#fff;padding:1px 5px;border-radius:6px}
.mm-thumb-acts{position:absolute;bottom:4px;left:4px;right:4px;display:flex;justify-content:space-between}
.mm-thumb-acts button{border:none;background:rgba(0,0,0,.6);color:#fff;font-size:0.62rem;width:22px;height:20px;border-radius:5px;cursor:pointer}
.mm-actions{display:flex;flex-wrap:wrap;gap:0.6rem;align-items:center;margin-top:1.1rem}
.mm-card{border:1px solid var(--border);border-radius:16px;background:var(--surface);padding:0.4rem 1rem}
.mm-row{display:grid;grid-template-columns:150px 1fr;gap:0.7rem;padding:0.6rem 0;border-bottom:1px solid var(--border);align-items:start}.mm-row:last-child{border-bottom:none}
.mm-k{font-size:0.72rem;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;color:var(--text-muted);padding-top:0.3rem}
.mm-v{font-size:0.88rem;line-height:1.45}
.mm-list{margin:0;padding-left:1.1rem;font-size:0.85rem;line-height:1.5}
.mm-pal{display:inline-flex;gap:3px;vertical-align:middle;margin-right:0.3rem}.mm-sw{width:14px;height:14px;border-radius:4px;border:1px solid var(--border);display:inline-block}
.mm-inline{display:flex;gap:0.5rem;align-items:center}.mm-inline .cb-in{flex:1}
.mm-styles{display:flex;flex-wrap:wrap;gap:0.45rem;margin-top:0.5rem}.mm-style{display:inline-flex;align-items:center;gap:2px}
.mm-style-x{border:none;background:transparent;color:var(--text-muted);cursor:pointer;font-size:0.75rem;padding:0.2rem}
.mm-two{display:grid;grid-template-columns:1fr 1fr;gap:0.8rem}
.mm-brand{display:grid;grid-template-columns:1fr 200px;gap:0.9rem;margin-top:0.5rem}
.mm-brand-ctl{display:grid;grid-template-columns:1fr 1fr;gap:0.5rem}
.mm-ctl{display:flex;flex-direction:column;gap:0.2rem;font-size:0.74rem;color:var(--text-muted)}
.mm-ctl-color input{width:100%;height:36px;border:1px solid var(--border);border-radius:10px;background:var(--surface);padding:2px}
.mm-sample{border:1px solid var(--border);border-radius:14px;padding:1rem;min-height:120px}
.mm-photos{display:flex;flex-wrap:wrap;gap:0.6rem;margin:0.6rem 0}.mm-photo{position:relative;width:130px}.mm-photo img{width:130px;height:100px;object-fit:cover;border-radius:8px;display:block}.mm-photo .mm-style-x{position:absolute;top:2px;right:2px;background:rgba(0,0,0,.6);color:#fff;border-radius:6px}
.mm-check{display:flex;gap:0.5rem;align-items:center;font-size:0.86rem;cursor:pointer}
.mm-check input{-webkit-appearance:auto;appearance:auto;width:16px;height:16px;margin:0}
.mm-err{margin:0.6rem 0;padding:0.7rem 0.9rem;border-radius:12px;background:rgba(200,60,40,.08);color:var(--text);font-size:0.85rem;border:1px solid rgba(200,60,40,.25)}
.mm-note{margin:0.6rem 0;padding:0.7rem 0.9rem;border-radius:12px;background:var(--surface2,rgba(128,128,128,.1));font-size:0.85rem;line-height:1.45}
.mm-hooks{display:flex;flex-wrap:wrap;gap:0.45rem;margin-top:0.4rem}.mm-hook{border:1px solid var(--border);background:var(--surface);color:var(--text);font:inherit;font-size:0.82rem;padding:0.4rem 0.7rem;border-radius:10px;cursor:pointer;text-align:left}.mm-hook.on{border-color:var(--text);font-weight:600}
.mm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(216px,1fr));gap:1rem;margin-top:1rem}
.mm-cell{display:flex;flex-direction:column;gap:0.35rem}.mm-slide{width:216px;height:270px;border-radius:10px;overflow:hidden;border:1px solid var(--border);box-shadow:0 2px 10px rgba(0,0,0,.06)}
.mm-cell-n{font-size:0.72rem;color:var(--text-muted);font-weight:600}
.mm-blk{margin-top:0;font-size:0.8rem;line-height:1.35;padding:0.45rem 0.6rem}
.mm-caption{white-space:pre-wrap;font-size:0.88rem;line-height:1.5;padding:0.8rem 1rem;border:1px solid var(--border);border-radius:12px;background:var(--surface)}
@media (max-width:800px){.mm-modes{margin-left:0.5rem}.mm-modes button{padding:0.3rem 0.5rem;font-size:0.72rem}.mm-row{grid-template-columns:1fr}.mm-two,.mm-brand,.mm-brand-ctl{grid-template-columns:1fr}.mm-grid{grid-template-columns:1fr 1fr;justify-items:center}}
.rs-talk-form{display:flex;gap:0.5rem;align-items:flex-end;margin-top:0.8rem}.rs-talk-form textarea{flex:1;min-height:54px;margin:0}
@media (max-width:640px){.rs-talk-form{flex-direction:column;align-items:stretch}}
.rs-time{font-variant-numeric:tabular-nums;font-size:0.82rem;color:var(--text-muted)}
.rs-scenes{display:flex;flex-direction:column;gap:0.7rem}
.rs-scene{display:grid;grid-template-columns:96px 1fr;gap:0.8rem;padding:0.7rem;border:1px solid var(--border);border-radius:14px;background:var(--surface)}
.rs-scene-pic{position:relative;aspect-ratio:9/16;border-radius:10px;overflow:hidden;background:var(--surface2,rgba(128,128,128,.14))}
.rs-scene-pic img{width:100%;height:100%;object-fit:cover;display:block}
.rs-scene-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:0.7rem;color:var(--text-muted);text-align:center;padding:0.3rem}
.rs-badge{position:absolute;top:6px;left:6px;font-size:0.62rem;font-weight:700;padding:0.1rem 0.4rem;border-radius:999px;background:rgba(0,0,0,.6);color:#fff}
.rs-scene-n{font-size:0.78rem;font-weight:600;color:var(--text-muted)}
.rs-field{display:block;margin-top:0.4rem}.rs-field>span{display:block;font-size:0.7rem;color:var(--text-muted);margin-bottom:0.15rem}.rs-field .cb-in{margin-top:0;padding:0.45rem 0.6rem;font-size:0.84rem}
.rs-source{margin-top:0.4rem;padding:0.5rem 0.7rem;border-radius:10px;background:var(--bg);border:1px solid var(--border)}
.rs-ar{font-family:'Amiri','Noto Naskh Arabic',serif;font-size:1.15rem;line-height:1.9}
.rs-tr{font-family:Georgia,serif;font-style:italic;font-size:0.95rem;margin-top:0.2rem}
.rs-ref{font-size:0.68rem;letter-spacing:0.05em;text-transform:uppercase;color:var(--text-muted);margin-top:0.25rem}
.rs-scene-acts{display:flex;gap:0.4rem;flex-wrap:wrap;margin-top:0.55rem}
@media (max-width:800px){.rs-styles{grid-template-columns:1fr 1fr}.rs-grid{grid-template-columns:1fr}.rs-scene{grid-template-columns:72px 1fr}}
html.reels-off .nav-item[data-page="reelstudio"]{display:none !important}
.ck-panel{margin-top:1rem;padding-top:0.9rem;border-top:1px solid var(--border)}
.ck-head{display:flex;justify-content:space-between;align-items:center;gap:0.8rem;flex-wrap:wrap}
.ck-head b{font-size:0.9rem;color:var(--text)}
.ck-steps{display:flex;gap:0.35rem;flex-wrap:wrap;margin-top:0.5rem}
.ck-step{font-size:0.72rem;padding:0.2rem 0.55rem;border-radius:999px;border:1px solid var(--border);color:var(--text-muted)}
.ck-step.done{border-color:transparent;background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--text)}
.ck-step.failed{border-color:transparent;background:color-mix(in srgb,#c0392b 14%,transparent);color:var(--text)}
.ck-step.now{border-color:var(--text);color:var(--text)}
.ck-sec{margin-top:1.1rem}
.ck-sec-t{font-size:0.78rem;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;color:var(--text-muted);margin-bottom:0.5rem}
.ck-logos{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:0.7rem}
.ck-logo{border:1px solid var(--border);border-radius:14px;padding:0.6rem;background:var(--bg);display:flex;flex-direction:column;gap:0.45rem;align-items:center;text-align:center}
.ck-logo.picked{border-color:var(--text);box-shadow:0 0 0 1px var(--text)}
.ck-logo img{width:100%;aspect-ratio:1;object-fit:contain;border-radius:8px;background:repeating-conic-gradient(color-mix(in srgb,var(--text) 6%,transparent) 0 25%,transparent 0 50%) 0 0/16px 16px}
.ck-logo.wide img{aspect-ratio:2}
.ck-logo .ck-note{font-size:0.72rem;color:var(--text-muted);line-height:1.35}
.ck-logo label{font-size:0.78rem;color:var(--text);display:flex;gap:0.35rem;align-items:center;cursor:pointer}
.ck-logo label input{appearance:auto;-webkit-appearance:auto;width:14px;height:14px;margin:0}
.ck-logo a{font-size:0.76rem;color:var(--text)}
.ck-bio{display:flex;gap:0.6rem;align-items:flex-start;margin-top:0.5rem}
.ck-bio input[type=radio]{appearance:auto;-webkit-appearance:auto;width:14px;height:14px;margin:0.9rem 0 0;flex:none}
.ck-bio textarea{flex:1;min-height:92px;margin:0;resize:vertical;white-space:pre-wrap}
.ck-bio .ck-style{font-size:0.7rem;color:var(--text-muted);width:76px;flex:none;padding-top:0.9rem}
.ck-plan{width:100%;border-collapse:collapse;font-size:0.8rem;margin-top:0.4rem}
.ck-plan th{text-align:left;font-weight:600;color:var(--text-muted);padding:0.35rem 0.4rem;border-bottom:1px solid var(--border);font-size:0.72rem;text-transform:uppercase;letter-spacing:0.04em}
.ck-plan td{padding:0.3rem 0.4rem;border-bottom:1px solid var(--border-subtle,var(--border));vertical-align:top;color:var(--text)}
.ck-plan td.ck-day{color:var(--text-muted);white-space:nowrap}
.ck-plan input{width:100%;box-sizing:border-box;margin:0;padding:0.3rem 0.4rem;border-radius:7px;border:1px solid transparent;background:transparent;color:var(--text);font:inherit;font-size:0.8rem}
.ck-plan input:hover{border-color:var(--border)}
.ck-plan input:focus{border-color:var(--text);background:var(--bg);outline:0}
.ck-notes{margin:0.3rem 0 0;padding-left:1.1rem;font-size:0.84rem;color:var(--text);line-height:1.5}
.ck-actions{display:flex;gap:0.5rem;flex-wrap:wrap;margin-top:0.8rem;align-items:center}
.ck-btn{height:34px;padding:0 0.9rem;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--text);font:inherit;font-size:0.82rem;cursor:pointer}
.ck-btn:disabled{opacity:0.5;cursor:default}
.ck-btn.dark{background:var(--text);color:var(--bg);border-color:var(--text)}
.ck-prep{display:flex;gap:0.55rem;align-items:center;font-size:0.86rem;color:var(--text-muted);margin-top:1rem}
.ck-prep .ck-spin{width:14px;height:14px;border-radius:50%;border:2px solid var(--border);border-top-color:var(--text);animation:ckspin 0.9s linear infinite;flex:none}
@keyframes ckspin{to{transform:rotate(360deg)}}
.ck-member .ck-logos{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
.ck-member .ck-hero{width:min(100%,320px);margin:0 auto 0.8rem;display:block;aspect-ratio:1;object-fit:contain}
.ck-member .ck-hero.wide{aspect-ratio:2}
.ck-member pre.ck-biotext{white-space:pre-wrap;font:inherit;font-size:0.95rem;line-height:1.55;color:var(--text);background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:0.9rem 1rem;margin:0}
.ck-member .ck-plan-wrap{overflow:auto;border:1px solid var(--border);border-radius:12px;padding:0 0.4rem}
@media (prefers-reduced-motion:reduce){.ck-prep .ck-spin{animation:none}}
@media (max-width:640px){.cb-review dl{grid-template-columns:1fr}.cb-review dt{margin-top:0.4rem}.cb-steps{gap:0.2rem 0.9rem}.cb-stephead{padding-top:1.6rem}}
.cb-admin dl{display:grid;grid-template-columns:160px 1fr;gap:0.3rem 0.8rem;font-size:0.84rem;margin:0.8rem 0 0}
.cb-admin dt{color:var(--text-muted)}
.cb-admin dd{margin:0;color:var(--text);white-space:pre-wrap;overflow-wrap:break-word}
.cb-admin .thumbs{display:flex;flex-wrap:wrap;gap:0.4rem;margin-top:0.6rem}
.cb-admin .thumbs a img{width:72px;height:72px;object-fit:cover;border-radius:8px;border:1px solid var(--border);display:block}
@media(max-width:600px){.cb-admin dl{grid-template-columns:1fr}.cb-wrap{padding:1rem 1rem calc(6rem + 56px)}}
.rl-media-pill{display:inline-flex;align-items:center;gap:10px;padding:5px 8px 5px 5px;border-radius:999px;background:rgba(20,20,24,.6);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 8px 24px rgba(0,0,0,.35);color:#fff;font-size:13px;max-width:100%;min-height:32px}
html.light .rl-media-pill{background:rgba(255,255,255,.62);color:#111;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 2px 10px rgba(0,0,0,.08)}
.rl-media-pill img{width:26px;height:46px;border-radius:6px;object-fit:cover;background:#222;flex-shrink:0}
.rl-media-pill .n{max-width:180px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rl-media-pill button{background:none;border:none;color:inherit;font:inherit;font-weight:600;cursor:pointer;padding:6px 8px;border-radius:999px;opacity:.85;min-height:28px}
.rl-media-pill button:hover{opacity:1}
.rl-media-pill button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.rl-transport{display:flex;align-items:center;gap:10px;font-size:13px;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.72);flex-wrap:wrap;justify-content:center}
html.light .rl-transport{color:#555}
.rl-tbtn{width:36px;height:36px;border-radius:50%;border:none;background:rgba(255,255,255,.14);color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:transform 100ms ease-out,background 120ms ease;padding:0}
.rl-tbtn.main{background:#fff;color:#0a0a0c}
html.light .rl-tbtn{background:rgba(0,0,0,.08);color:#111}html.light .rl-tbtn.main{background:#0a0a0c;color:#fff}
.rl-tbtn:active{transform:scale(.94)}
.rl-tbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.rl-tag{padding:4px 9px;border-radius:999px;border:1px solid currentColor;opacity:.7;font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;background:none;color:inherit;font-family:inherit;cursor:default}
button.rl-tag{cursor:pointer}button.rl-tag[aria-pressed="true"]{opacity:1;background:rgba(255,255,255,.14)}html.light button.rl-tag[aria-pressed="true"]{background:rgba(0,0,0,.08)}
.rl-side{display:flex;flex-direction:column;gap:12px;min-width:0}
.rl-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:14px 16px}
.rl-lab{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin-bottom:10px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.rl-ai{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:999px;border:1px solid var(--border);background:var(--surface2,rgba(128,128,128,.1));color:var(--accent-text,var(--accent));font:inherit;font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;cursor:pointer;transition:transform 100ms ease-out,background 120ms ease}
.rl-ai:active:not([disabled]){transform:scale(.97)}.rl-ai[disabled]{opacity:.55;cursor:default}.rl-ai:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.rl-seg{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;padding:3px;border-radius:999px;background:var(--surface2,rgba(128,128,128,.14));isolation:isolate}
.rl-seg .thumb{position:absolute;top:3px;bottom:3px;left:3px;width:calc((100% - 6px)/var(--n,3));border-radius:999px;background:var(--surface);box-shadow:0 1px 2px rgba(0,0,0,.25);transform:translateX(calc(var(--i,0)*100%));transition:transform 180ms cubic-bezier(.23,1,.32,1);z-index:0}
html.light .rl-seg .thumb{background:#fff}
.rl-seg button{position:relative;z-index:1;height:32px;border:none;background:none;border-radius:999px;font:inherit;font-size:13px;font-weight:600;color:var(--text-muted);cursor:pointer;padding:0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color 120ms ease}
.rl-seg button[aria-checked="true"]{color:var(--text)}
.rl-seg button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.rl-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.rl-chip{height:28px;padding:0 11px;border-radius:999px;border:1px solid var(--border);background:none;color:var(--text-muted);font:inherit;font-size:12px;font-weight:600;cursor:pointer}
.rl-chip[aria-checked="true"]{border-color:var(--text);color:var(--text)}
.rl-chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.rl-strip{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 2px 6px;-webkit-overflow-scrolling:touch;scrollbar-width:thin;margin-top:10px;border-radius:12px}
.rl-strip.over{outline:2px dashed var(--accent);outline-offset:2px}
.rl-thumb{position:relative;flex:0 0 84px;height:149px;border-radius:10px;overflow:hidden;background:var(--surface2,var(--border));border:none;padding:0;cursor:pointer;scroll-snap-align:start;transition:transform 100ms ease-out}
.rl-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.rl-thumb:active{transform:scale(.97)}
.rl-thumb.on{box-shadow:0 0 0 2px var(--accent)}
.rl-thumb .chk{position:absolute;top:6px;right:6px;width:18px;height:18px;border-radius:50%;background:var(--accent);color:var(--accent-fg,#fff);display:none;align-items:center;justify-content:center}
.rl-thumb.on .chk{display:flex}
.rl-thumb:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.rl-thumb .cap{position:absolute;left:0;right:0;bottom:0;padding:6px;font-size:10px;line-height:1.3;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.7));text-align:left;max-height:48px;overflow:hidden}
.rl-thumb.ph{animation:rlShimmer 1.2s linear infinite;cursor:default}
@keyframes rlShimmer{0%,100%{opacity:.35}50%{opacity:.6}}
.rl-rm{position:absolute;left:6px;top:6px;width:22px;height:22px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;border:none;display:none;align-items:center;justify-content:center;cursor:pointer;font-size:15px;line-height:1;padding:0}
.rl-thumbwrap{position:relative;flex:0 0 84px;scroll-snap-align:start}
.rl-thumbwrap .rl-thumb{flex:none;width:84px}
.rl-thumbwrap:hover .rl-rm,.rl-thumbwrap:focus-within .rl-rm{display:flex}
.rl-add{flex:0 0 84px;height:149px;border-radius:10px;border:1px dashed var(--border);background:none;color:var(--text-muted);cursor:pointer;font:inherit;font-size:12px;line-height:1.3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;scroll-snap-align:start;padding:6px;text-align:center}
.rl-add:hover,.rl-add:focus-visible{color:var(--text);border-color:var(--text-muted);outline:none}
.rl-hook{width:100%;box-sizing:border-box;min-height:96px;padding:10px 12px;border-radius:12px;border:1px solid transparent;background:var(--surface2,rgba(128,128,128,.1));color:var(--text);font:inherit;font-size:17px;line-height:1.35;letter-spacing:-.01em;resize:none;outline:none;transition:border-color 120ms ease;overflow:hidden}
.rl-hook:focus{border-color:var(--accent)}
.rl-field{width:100%;box-sizing:border-box;padding:9px 12px;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--text);font:inherit;font-size:14px;outline:none;min-height:38px}
.rl-field:focus{border-color:var(--accent)}
.rl-link{background:none;border:none;color:var(--accent);font:inherit;font-size:13px;font-weight:600;cursor:pointer;padding:6px 0;border-radius:6px;display:inline-flex;align-items:center;gap:6px;min-height:28px}
.rl-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.rl-sug{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.rl-sug button{text-align:left;display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-radius:12px;border:1px solid var(--border);background:var(--surface);color:var(--text);font:inherit;font-size:14px;line-height:1.4;cursor:pointer;animation:rlIn 160ms cubic-bezier(.23,1,.32,1) both}
.rl-sug button:nth-child(2){animation-delay:40ms}.rl-sug button:nth-child(3){animation-delay:80ms}.rl-sug button:nth-child(4){animation-delay:120ms}
.rl-sug button[aria-checked="true"]{border-color:var(--accent)}
.rl-sug button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.rl-sug .dot{flex:0 0 16px;width:16px;height:16px;border-radius:50%;border:1.5px solid var(--border);margin-top:2px;box-sizing:border-box}
.rl-sug button[aria-checked="true"] .dot{border-color:var(--accent);background:var(--accent)}
@keyframes rlIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.rl-disc{width:100%;display:flex;align-items:center;justify-content:space-between;background:none;border:none;padding:0;font:inherit;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);cursor:pointer;min-height:28px}
.rl-disc svg{transition:transform 180ms cubic-bezier(.23,1,.32,1)}
.rl-disc[aria-expanded="true"] svg{transform:rotate(180deg)}
.rl-disc:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.rl-row{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.rl-sub{font-size:12px;color:var(--text-muted);display:flex;justify-content:space-between;font-variant-numeric:tabular-nums}
.rl-actions{display:flex;flex-direction:column;gap:8px}
.rl-primary{position:relative;overflow:hidden;height:48px;border-radius:999px;border:none;background:var(--text);color:var(--surface);font:inherit;font-size:15px;font-weight:600;cursor:pointer;transition:transform 100ms ease-out,opacity 120ms ease;width:100%}
.rl-primary:active:not([disabled]){transform:scale(.98)}
.rl-primary[disabled]{opacity:.45;cursor:default}
.rl-primary .fill{position:absolute;left:0;top:0;bottom:0;width:0;background:rgba(127,127,127,.4);transition:width 100ms linear}
.rl-primary .lbl{position:relative}
.rl-primary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.rl-ghost{height:42px;border-radius:999px;border:1px solid var(--border);background:none;color:var(--text);font:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:transform 100ms ease-out;width:100%}
.rl-ghost:active:not([disabled]){transform:scale(.98)}
.rl-ghost[disabled]{opacity:.45;cursor:default}
.rl-ghost:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.rl-note{font-size:12px;color:var(--text-muted);line-height:1.5}
.rl-empty{padding:14px 4px 4px;font-size:13px;color:var(--text-muted);line-height:1.5}
.rl-empty b{color:var(--text);font-weight:600}
.rl-err{margin-top:8px;padding:10px 12px;border-radius:12px;border:1px solid var(--border);font-size:13px;color:var(--text);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rl-dock{display:none}
@media(hover:hover) and (pointer:fine){.rl-thumb:hover{transform:translateY(-1px)}}
@media(max-width:900px){.rl-wrap{grid-template-columns:1fr}.rl-stage{position:static;min-height:0;padding:16px 12px 14px;border-radius:20px}.rl-canvas-wrap{height:58vh;min-height:280px;border-radius:22px}}
@media(max-width:760px){#reelsRoot{padding-bottom:calc(var(--rl-bar,56px) + 88px)!important}.rl-dock{display:block;position:fixed;left:0;right:0;bottom:var(--rl-bar,56px);padding:10px 16px;background:rgba(20,20,24,.74);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border-top:1px solid rgba(255,255,255,.12);z-index:30}html.light .rl-dock{background:rgba(255,255,255,.74);border-top-color:rgba(0,0,0,.06)}.rl-actions .rl-primary{display:none}}
@media(prefers-reduced-motion:reduce){.rl-seg .thumb,.rl-canvas-wrap,.rl-disc svg,.rl-tbtn,.rl-thumb,.rl-primary,.rl-ghost{transition:none}.rl-sug button,.rl-thumb.ph{animation:none}}
/* The Reels editor (owner's mockup 2026-10-12: "a clean, focused editing experience") */
.rle{display:flex;flex-direction:column;gap:14px;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Roboto,sans-serif}
.rle-top{display:flex;align-items:center;gap:12px;min-height:44px}
.rle-top .hamburger{margin-right:0}
.rle-back{display:inline-flex;align-items:center;gap:6px;border:none;background:none;color:var(--text-muted);font:inherit;font-size:13px;font-weight:600;cursor:pointer;padding:6px 8px;border-radius:8px;white-space:nowrap}
.rle-back:hover{color:var(--text);background:var(--surface2)}
.rle-back svg{width:15px;height:15px}
.rle-title{flex:1;min-width:0;display:flex;align-items:baseline;gap:10px}
input.rle-name{border:1px solid transparent;background:transparent;box-shadow:none;font:inherit;font-size:15px;font-weight:700;color:var(--text);min-width:0;width:min(320px,100%);padding:4px 6px;border-radius:6px;outline:none;margin:0;height:auto}
input.rle-name:hover{border-color:var(--border)}
input.rle-name:focus{background:var(--surface2);border-color:var(--border)}
.rle-saved{font-size:12px;color:var(--text-muted);white-space:nowrap}
.rle-tools{display:flex;align-items:center;gap:6px;flex-shrink:0}
.rle-tools .rl-primary{width:auto;height:38px;padding:0 18px;font-size:14px}
.rle-ic{width:34px;height:34px;border-radius:50%;border:1px solid var(--border);background:none;color:var(--text);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font:inherit;font-size:16px;line-height:1;padding:0}
.rle-ic[disabled]{opacity:.35;cursor:default}
.rle-ic svg{width:15px;height:15px}
.rle-menuwrap{position:relative}
.rle-menu{position:absolute;right:0;top:40px;z-index:20;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:0 12px 34px rgba(0,0,0,.18);padding:4px;min-width:190px}
.rle-menu button{display:block;width:100%;border:none;background:none;text-align:left;padding:8px 12px;border-radius:8px;cursor:pointer;font:inherit;font-size:13.5px;color:var(--text);white-space:nowrap}
.rle-menu button:hover{background:var(--surface2)}
.rle-body{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:18px;align-items:start}
.rle-left{display:flex;flex-direction:column;gap:12px;min-width:0}
.rle-stage{position:static;min-height:0}
.rle .rl-canvas-wrap{height:min(calc(100vh - 380px),600px)}
select.rle-fit{width:auto;flex:0 0 auto;border:1px solid currentColor;border-radius:999px;background:none;color:inherit;font:inherit;font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;padding:4px 22px 4px 9px;opacity:.85;cursor:pointer;height:auto;margin:0;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 7px center;background-size:10px}
.rle-timeline{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--border);border-radius:16px;background:var(--surface)}
.rle-timeline .rl-tbtn{background:var(--surface2);color:var(--text)}
.rle-timeline .rl-tbtn.main{background:var(--text);color:var(--surface)}
.rle-frames{position:relative;flex:1;min-width:0;height:56px;border-radius:10px;overflow:hidden;background:var(--surface2)}
.rle-frames.timed{cursor:pointer}
.rle-frames .cells{display:flex;height:100%}
.rle-frames .f{flex:1;background-size:cover;background-position:center;background-color:var(--surface2);border-right:1px solid rgba(0,0,0,.25)}
.rle-frames .f.ph{animation:rlShimmer 1.2s linear infinite}
.rle-frames .win{position:absolute;top:0;bottom:0;border:2px solid var(--text);border-radius:8px;box-sizing:border-box;pointer-events:none;box-shadow:0 0 0 999px rgba(0,0,0,.28)}
.rle-frames .head{position:absolute;top:0;bottom:0;width:2px;background:var(--accent);left:0;pointer-events:none}
.rle-noframes{display:flex;align-items:center;justify-content:center;height:100%;font-size:12px;color:var(--text-muted)}
.rle-addclip{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-radius:999px;border:1px solid var(--border);background:none;color:var(--text);font:inherit;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}
.rle-addclip svg{width:14px;height:14px}
.rle-panel{display:flex;flex-direction:column;gap:12px;min-width:0}
.rle-tabs{display:flex;gap:2px;border-bottom:1px solid var(--border);padding:0 4px;overflow-x:auto}
.rle-tabs button{border:none;background:none;font:inherit;font-size:13.5px;font-weight:600;color:var(--text-muted);padding:10px 10px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.rle-tabs button.on{color:var(--text);border-bottom-color:var(--text)}
.rle-tabs button[disabled]{cursor:default;opacity:.55}
.rle-tabs .soon{font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--border);border-radius:999px;padding:1px 6px}
.rle-tab{display:flex;flex-direction:column;gap:12px}
.rle-fmt{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.rle-tg{width:34px;height:32px;border-radius:9px;border:1px solid var(--border);background:none;color:var(--text);font:inherit;font-size:14px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0}
.rle-tg[aria-pressed="true"],.rle-tg[aria-checked="true"]{background:var(--text);color:var(--surface);border-color:var(--text)}
.rle-tg svg{width:15px;height:15px}
.rle-sep{width:1px;height:22px;background:var(--border);margin:0 4px}
.rle-colors{display:flex;gap:8px;flex-wrap:wrap}
.rle-sw{width:26px;height:26px;border-radius:50%;border:1px solid var(--border);cursor:pointer;padding:0;box-shadow:inset 0 0 0 2px var(--surface)}
.rle-sw[aria-checked="true"]{box-shadow:inset 0 0 0 2px var(--surface),0 0 0 2px var(--text)}
.rle-posgrid{display:grid;grid-template-columns:repeat(3,26px);gap:5px}
.rle-posgrid button{width:26px;height:26px;border-radius:6px;border:1px solid var(--border);background:none;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center}
.rle-posgrid button::after{content:'';width:8px;height:8px;border-radius:2px;background:var(--text-muted);opacity:.5}
.rle-posgrid button[aria-checked="true"]{border-color:var(--text);background:var(--text)}
.rle-posgrid button[aria-checked="true"]::after{background:var(--surface);opacity:1}
.rle-current{display:flex;align-items:center;gap:10px}
.rle-current img{width:34px;height:60px;border-radius:7px;object-fit:cover;background:#222}
.rle-current b{display:block;font-size:13px}
.rle-current small{font-size:12px;color:var(--text-muted)}
@media(max-width:900px){.rle-body{grid-template-columns:1fr}.rle .rl-canvas-wrap{height:52vh;min-height:260px}.rle-top{flex-wrap:wrap}.rle-title{order:3;flex-basis:100%}.rle-name{width:100%}.rle-tools .rl-primary{display:none}}
/* Dictation mic (owner 2026-10-07). Inline in composer rows, floating on
   every other text box while it has focus; pulses while listening. */
.kalam-mic{flex-shrink:0;width:32px;height:32px;border-radius:50%;border:none;background:transparent;color:var(--text-muted);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:color 0.15s,background 0.15s;font-family:inherit}
.kalam-mic:hover{color:var(--text);background:rgba(127,127,127,0.12)}
.kalam-mic.on{color:var(--accent-fg,#fff);background:var(--accent);animation:kalamMicPulse 1.4s ease-in-out infinite}
.kalam-mic-float{position:fixed;z-index:10040;display:none;width:28px;height:28px;background:var(--surface);border:1px solid var(--border);box-shadow:0 2px 10px rgba(0,0,0,0.18)}
.kalam-mic-float.show{display:flex}
.kalam-mic-float.on{border-color:var(--accent)}
@keyframes kalamMicPulse{0%,100%{box-shadow:0 0 0 0 rgba(139,61,255,0.45)}50%{box-shadow:0 0 0 7px rgba(139,61,255,0)}}
/* Model toggle removed — Sonnet-only */
.mirror-send-inline:hover{background:var(--accent-dim);transform:scale(1.05);box-shadow:0 4px 12px var(--accent-glow)}
.mirror-send-inline:disabled{opacity:0.45;cursor:not-allowed}
.mirror-textarea{width:100%;background:transparent;border:none;color:var(--text);font-size:0.95rem;font-family:inherit;line-height:1.55;resize:none;min-height:24px;max-height:400px;padding:0;outline:none !important;display:block;overflow-y:auto}
.mirror-textarea::placeholder{color:var(--text-muted);opacity:0.7}
.mirror-plus-btn{flex-shrink:0;width:38px;height:38px;border-radius:50%;background:none;border:1.5px solid var(--border);color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.12s;-webkit-tap-highlight-color:transparent}
.mirror-plus-btn:hover{border-color:var(--text-dim);background:var(--surface)}
.mirror-attachments{padding:0.3rem 0 0.3rem;display:flex;flex-wrap:wrap;gap:0.3rem}
.rt-more{position:relative;display:inline-flex}
.rt-menu{position:absolute;right:0;bottom:calc(100% + 6px);background:var(--surface-elevated);border:1px solid var(--border);border-radius:11px;box-shadow:var(--shadow-medium);padding:0.3rem;z-index:30;min-width:170px;display:flex;flex-direction:column}
.rt-menu[hidden]{display:none}
.rt-menu button{display:flex;align-items:center;gap:0.55rem;background:none;border:none;padding:0.5rem 0.7rem;border-radius:8px;color:var(--text);font-size:0.85rem;font-family:inherit;cursor:pointer;text-align:left;white-space:nowrap}
.rt-menu button:hover{background:var(--surface-hover)}
.rt-menu svg{flex-shrink:0;stroke:currentColor;fill:none}
.mirror-user-msg{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:0.7rem 1rem;font-size:0.92rem;color:var(--text);line-height:1.55;white-space:pre-wrap;word-break:break-word;max-width:65%;align-self:flex-end;position:relative}
.mirror-user-msg .mirror-msg-label{font-size:0.68rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-muted);font-weight:600;margin-bottom:0.25rem}
.mirror-again-row{display:flex;align-items:center;gap:0.4rem;align-self:flex-end}
.mirror-again-btn{background:transparent;border:none;color:var(--text-muted);padding:0.3rem 0.2rem;cursor:pointer;font-size:0.82rem;font-weight:500;font-family:inherit;transition:all 0.12s}
.mirror-again-btn:hover{color:var(--text)}
/* Inline loading indicator */
.mirror-thinking{display:flex;align-items:center;gap:0.5rem;padding:0.4rem 0;align-self:flex-start}
.mirror-thinking-star{font-size:1.3rem;color:var(--text-muted);display:inline-block;animation:mirrorSpin 0.6s linear infinite}
@keyframes mirrorSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
/* Folder picker modal */
.mirror-folder-modal{position:fixed;inset:0;background:rgba(0,0,0,0.65);display:none;align-items:center;justify-content:center;z-index:200;backdrop-filter:blur(8px)}
.mirror-folder-modal.show{display:flex}
.mirror-folder-sheet{background:rgba(15,15,15,0.95);border:1px solid rgba(255,255,255,0.06);border-radius:16px;width:90%;max-width:340px;padding:1.2rem 1.3rem 1rem;display:flex;flex-direction:column;gap:0.3rem;animation:obSlideUp 0.2s ease;backdrop-filter:blur(16px);box-shadow:0 16px 48px rgba(0,0,0,0.4)}
.mirror-folder-sheet-title{font-size:0.95rem;font-weight:600;color:#f0f0f0;margin-bottom:0.2rem;padding-bottom:0.45rem;border-bottom:1px solid rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:space-between}
.mirror-folder-sheet-title .folder-close{background:none;border:none;color:rgba(255,255,255,0.3);cursor:pointer;font-size:1.1rem;padding:0;line-height:1;transition:color 0.12s}
.mirror-folder-sheet-title .folder-close:hover{color:rgba(255,255,255,0.6)}
.mirror-folder-list{display:flex;flex-direction:column;gap:0.1rem;max-height:280px;overflow-y:auto}
.mirror-folder-item{display:flex;align-items:center;gap:0.55rem;padding:0.55rem 0.65rem;border-radius:8px;cursor:pointer;font-size:0.9rem;color:rgba(255,255,255,0.8);transition:background 0.1s;font-family:inherit;background:none;border:none;width:100%;text-align:left}
.mirror-folder-item:hover{background:rgba(255,255,255,0.05)}
.mirror-folder-cancel{margin-top:0.3rem;width:100%;padding:0.6rem;border-radius:10px;border:1px solid rgba(255,255,255,0.14);background:none;color:rgba(255,255,255,0.65);font-size:0.88rem;font-weight:500;font-family:inherit;cursor:pointer}
.scroll-bottom-btn{position:absolute;bottom:0;left:50%;transform:translateX(-50%) translateY(-8px);width:32px;height:32px;border-radius:50%;background:var(--surface2);border:1px solid var(--border);color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:50;box-shadow:0 2px 8px rgba(0,0,0,0.3);opacity:0;pointer-events:none;transition:opacity 0.2s ease-out,transform 0.2s ease-out;flex-shrink:0}
.scroll-bottom-btn:hover{color:var(--text);border-color:var(--text-muted)}
.scroll-bottom-btn.visible{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(-8px)}
.scroll-bottom-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}
.scroll-top-btn{position:absolute;top:8px;left:50%;transform:translateX(-50%) translateY(-8px);width:32px;height:32px;border-radius:50%;background:var(--surface2);border:1px solid var(--border);color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:50;box-shadow:0 2px 8px rgba(0,0,0,0.3);opacity:0;pointer-events:none;transition:opacity 0.2s ease-out,transform 0.2s ease-out;flex-shrink:0}
.scroll-top-btn:hover{color:var(--text);border-color:var(--text-muted)}
.scroll-top-btn.visible{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.scroll-top-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}
/* Ebook preview: back to the top (owner 2026-10-10), bottom right, above the phone tab bar and the edit bar. */
.kb-top-btn{position:fixed;right:1.2rem;bottom:calc(1.4rem + env(safe-area-inset-bottom));width:38px;height:38px;border-radius:50%;background:var(--surface);border:1px solid var(--border);color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:60;box-shadow:0 4px 16px rgba(0,0,0,0.18);opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity 0.2s ease-out,transform 0.2s ease-out,color 0.15s,border-color 0.15s}
.kb-top-btn:hover{color:var(--text);border-color:var(--text-muted)}
.kb-top-btn.visible{opacity:1;pointer-events:auto;transform:none}
.kb-top-btn.editing{bottom:calc(4.6rem + env(safe-area-inset-bottom))}
.kb-top-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:800px){.kb-top-btn{bottom:calc(60px + 1rem + env(safe-area-inset-bottom))}.kb-top-btn.editing{bottom:calc(60px + 7.2rem + env(safe-area-inset-bottom))}}
@media(max-width:800px){
  .mirror-header{padding:0.6rem 1.25rem;gap:0.5rem}
  .mirror-tone-row{gap:0.2rem}
  .mirror-tone-row .chip{font-size:0.78rem;padding:0.2rem 0.45rem}
  .mirror-conversation{padding:0.8rem 1.25rem 1.2rem}
  .mirror-composer{padding:0.4rem 1.25rem calc(1.2rem + env(safe-area-inset-bottom))}
  .mirror-textarea{max-height:300px;font-size:16px !important;min-height:unset !important;padding:0 !important;background:transparent !important}
  .mirror-plus-btn{width:40px;height:40px}
  .mirror-user-msg{max-width:95%}
  .mirror-empty{padding:1.2rem}
  .mirror-chips-row{max-width:calc(100vw - 2.4rem)}
}
.replicator-breakdown{display:flex;flex-direction:column;gap:0.5rem}
/* Mirror response (plain, no bubble) */
.mirror-response{padding:0.2rem 0 0.5rem;display:flex;flex-direction:column;gap:0}
.mirror-response-label{font-size:0.68rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-muted);font-weight:600;margin-bottom:0.4rem}
.mirror-response-body{font-size:0.95rem;color:var(--text);line-height:1.6;word-break:break-word;padding:0 0.1rem}
.mirror-response-body p{margin:0}
.mirror-response-body p+p{margin-top:14px}
.mirror-response-body.streaming::after{content:none}
@keyframes streamBlink{0%,100%{opacity:1}50%{opacity:0}}
#kaiDrawer{position:fixed;top:0;right:0;bottom:0;width:min(430px,100vw);z-index:8600;display:flex;flex-direction:column;background:var(--surface);border-left:1px solid var(--border);box-shadow:-24px 0 60px rgba(0,0,0,0.18);transform:translateX(102%);transition:transform 0.28s cubic-bezier(0.32,0.72,0,1);will-change:transform}
#kaiDrawer.open{transform:translateX(0)}
#kaiHead{display:flex;align-items:center;gap:0.45rem;padding:0.85rem 1rem;border-bottom:1px solid var(--border);flex-shrink:0}
#kaiTitleWrap{display:inline-flex;align-items:center;gap:0.45rem;color:var(--text)}
#kaiTitle{font-size:0.95rem;font-weight:700;letter-spacing:-0.01em}
.kai-hbtn{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:0.35rem;border-radius:8px;display:flex;align-items:center;transition:background 0.12s,color 0.12s}
.kai-hbtn:hover{background:var(--surface2,rgba(127,127,127,0.12));color:var(--text)}
#kaiBody{flex:1;min-height:0;display:flex;flex-direction:column}
#kaiBody>#kaiRoot{flex:1;min-height:0}
#appShell{transition:margin-right 0.28s cubic-bezier(0.32,0.72,0,1)}
body.kai-push #appShell{margin-right:min(430px,100vw)}
@media (max-width:1099px){body.kai-push #appShell{margin-right:0}}
.stream-label{display:flex;align-items:center;gap:0.4rem;font-size:0.85rem;color:var(--text-muted);font-weight:400;margin-bottom:0.3rem;min-height:22px}
.stream-label svg{flex-shrink:0}
.stream-label-text{background:linear-gradient(90deg,rgba(138,138,138,0.75) 30%,#ffffff 50%,rgba(138,138,138,0.75) 70%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:ctShimmer 2.2s linear infinite;will-change:background-position;transform:translateZ(0)}
html.light .stream-label-text{background:linear-gradient(90deg,rgba(55,55,55,0.92) 30%,#c4c4c4 50%,rgba(55,55,55,0.92) 70%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text}
@keyframes ctShimmer{0%{background-position:210% 0}100%{background-position:-110% 0}}
.stream-dots::after{content:'';animation:dotPulse 1.4s infinite steps(4,end)}
/* Owner 2026-08-08: no trailing-dots animation on chat stream labels —
   the shimmer alone signals progress. */
.stream-label-text.stream-dots::after{content:none;animation:none}
@keyframes dotPulse{0%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'...'}}
@keyframes streamStatusFade{from{opacity:0;transform:translateY(2px)}to{opacity:1;transform:translateY(0)}}
@keyframes mpcFadeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.mirror-response-actions{display:flex;gap:6px;padding-top:0;margin-top:6px;align-items:center}
/* Apple feel (owner request 2026-08-08): fixed-size icon buttons that never
   shift layout — hover is a soft background pill, the label is a floating
   tooltip bubble above the icon (Qaf-style), not an inline slide-out. */
.mirror-response-actions button{position:relative;background:none;border:none;color:var(--text-muted);cursor:pointer;width:30px;height:30px;padding:0;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background 140ms ease,color 140ms ease,opacity 140ms ease;opacity:0.65}
.mirror-response-actions button:hover{opacity:1;color:var(--text);background:var(--surface2);transform:none}
.mirror-response-actions button svg{width:16px;height:16px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:1.5}
.mirror-response-actions button .btn-label{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) scale(0.96);background:#f5f5f7;color:#1d1d1f;padding:5px 11px;border-radius:9px;font-size:0.72rem;font-weight:500;letter-spacing:0.01em;line-height:1;white-space:nowrap;opacity:0;pointer-events:none;box-shadow:0 4px 14px rgba(0,0,0,0.4);transition:opacity 130ms ease,transform 130ms ease;z-index:30}
.mirror-response-actions button:hover .btn-label{opacity:1;transform:translateX(-50%) scale(1)}
.mirror-response-actions button.copied .btn-label,.mirror-response-actions button.saved .btn-label{opacity:1;transform:translateX(-50%) scale(1)}
.mirror-response-actions button.copied,.mirror-response-actions button.saved{opacity:1;color:var(--accent)}
html.light .mirror-response-actions button .btn-label{background:#1d1d1f;color:#f5f5f7;box-shadow:0 3px 12px rgba(0,0,0,0.18)}
/* User bubble accent */
/* Overhaul audit 2026-09-13: user bubbles are neutral - the accent stays
   a precise signal, never a large filled surface in the conversation. */
.mirror-user-msg.mirror-user-accent{background:var(--surface2);color:var(--text);border-color:var(--border)}

/* Mirror pattern chips */
.mirror-patterns-bar{padding:0.5rem 0.8rem 0.3rem;overflow:hidden;flex-shrink:0;background:var(--bg);max-width:880px;margin-left:auto;margin-right:auto;width:100%}
.mirror-patterns-row{display:flex;align-items:center;gap:0.4rem;min-width:0;width:100%}
.mirror-patterns-row #mirrorAutoBtn{flex-shrink:0}
/* Mirror Auto button — matches template-chip size + neutral default so it
   doesn't look "already clicked" at rest. Active state mirrors .mpc-selected. */
.mirror-auto-btn{flex-shrink:0;background:var(--surface);border:1px solid var(--border);color:var(--text-dim);padding:0.6rem 0.85rem;border-radius:12px;cursor:pointer;font-size:0.82rem;font-weight:500;font-family:inherit;white-space:nowrap;display:inline-flex;align-items:center;gap:0.3rem;transition:all 0.15s;min-width:80px;justify-content:center}
.mirror-auto-btn:hover{border-color:var(--accent-dim);color:var(--text)}
/* On-state matches Create's Auto (solid accent); off-state stays a
   neutral chip with an accent sparkle (.create-pick-spark). */
.mirror-auto-btn{font-weight:600}
.mirror-auto-btn.active{background:var(--accent);border-color:var(--accent);color:var(--accent-fg,#fff);font-weight:600;box-shadow:0 2px 8px var(--accent-glow)}
.mirror-auto-btn.active:hover{color:#fff;border-color:var(--accent)}
.mirror-auto-btn.active .create-pick-spark{color:inherit}
/* Prominent light-red clear-template affordance — uses theme --danger. */
.mirror-clear-template-btn{display:inline-flex;align-items:center;gap:0.3rem;padding:0.28rem 0.65rem;border-radius:8px;border:1px solid rgba(229,87,87,0.35);background:rgba(229,87,87,0.08);color:var(--danger);font-family:inherit;font-size:0.74rem;font-weight:600;cursor:pointer;transition:all 0.12s}
.mirror-clear-template-btn:hover{background:rgba(229,87,87,0.16);border-color:rgba(229,87,87,0.55)}
.mirror-patterns-row .mirror-patterns-chips{flex:1 1 0;min-width:0}
.mirror-change-panel{display:flex;flex-wrap:wrap;gap:0.35rem;padding:0.35rem 0.5rem 0.4rem;animation:obFadeIn 0.15s ease}
.mirror-change-panel .mirror-chip{font-size:0.78rem;padding:0.3rem 0.65rem}
.mirror-pattern-preview-bubble{margin:0.5rem 0 0.2rem;padding:0.7rem 0.85rem;background:var(--surface2);border:1px solid var(--border);border-radius:12px;font-size:0.8rem;color:var(--text-dim);line-height:1.5;animation:obFadeIn 0.15s ease;display:flex;flex-direction:column;gap:0.55rem}
.mirror-pattern-preview-bubble .mppb-label{font-size:0.65rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--text-muted);font-weight:500}
.mirror-pattern-preview-bubble .mppb-body{color:var(--text);font-size:0.82rem;white-space:pre-wrap;line-height:1.55}
.mirror-pattern-preview-bubble .mppb-actions{display:flex;justify-content:flex-end}
.mirror-patterns-label{font-size:0.68rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--text-muted);font-weight:600;margin-bottom:0.4rem;opacity:0.65}
.mirror-patterns-chips{display:flex;gap:0.4rem;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:0.15rem}
.mirror-patterns-chips::-webkit-scrollbar{display:none}
.mirror-pattern-chip{flex-shrink:0;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:0.6rem 0.85rem;font-size:0.82rem;color:var(--text-dim);cursor:pointer;font-family:inherit;text-align:left;transition:all 0.2s;line-height:1.4;white-space:nowrap;min-width:120px;position:relative}
.mirror-pattern-chip .mpc-name{display:block;font-weight:500;font-size:0.82rem;color:var(--text-dim)}
.mirror-pattern-chip .mpc-hint{display:block;font-size:0.68rem;color:var(--text-muted);margin-top:0.15rem;opacity:0.6}
.mirror-pattern-chip .mpc-detail{display:none;margin-top:0.5rem;font-size:0.78rem;color:var(--text-muted);line-height:1.5;white-space:normal}
.mirror-pattern-chip .mpc-best-for{font-size:0.68rem;color:var(--text-muted);margin-top:0.2rem;opacity:0.7}
.mirror-pattern-chip .mpc-example{font-size:0.72rem;color:var(--text-dim);margin-top:0.3rem;font-style:italic;opacity:0.65;line-height:1.4;white-space:normal;max-height:3.2em;overflow:hidden}
.mirror-pattern-chip:hover{border-color:var(--accent-dim);color:var(--text)}
/* Expanded state — neutral glassy surface instead of the heavy accent glow.
   Used for both first-click preview (unselected) and click-to-reopen
   (selected). The chip's innerHTML is re-rendered per selection state so
   the inline button reads Use template vs Clear template accordingly. */
.mirror-pattern-chip.active{background:var(--surface2);border-color:var(--border-hover);white-space:normal;min-width:220px;max-width:340px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.mirror-pattern-chip.active .mpc-name{color:var(--text)}
.mirror-pattern-chip.active .mpc-detail{display:block;animation:mpcFadeIn 0.2s ease}
/* Selected — keeps the compact chip size by default. A subtle accent
   border + name color signals the pinned state. Click reopens the
   neutral expanded preview (which toggles .active). */
.mirror-pattern-chip.mpc-selected{background:var(--surface);border-color:var(--accent-dim);box-shadow:0 0 0 1px var(--accent-dim) inset}
.mirror-pattern-chip.mpc-selected .mpc-name{color:var(--accent)}
/* When both selected + active (user re-clicked to reopen), the neutral
   glass background wins; the accent border stays to mark selection. */
.mirror-pattern-chip.mpc-selected.active{background:var(--surface2);border-color:var(--accent-dim);box-shadow:0 0 0 1px var(--accent-dim) inset}
.mirror-pattern-chip .mpc-edit-icon{position:absolute;top:0.4rem;right:0.5rem;opacity:0;color:var(--text-muted);transition:opacity 0.12s;background:none;border:none;cursor:pointer;padding:0.15rem}
.mirror-pattern-chip:hover .mpc-edit-icon{opacity:0.5}
.mirror-pattern-chip .mpc-edit-icon:hover{opacity:1}
.mirror-pattern-preview{padding:0.6rem 0.75rem;background:var(--surface);border-radius:10px;margin-bottom:0.4rem}
.mpp-header{display:flex;align-items:center;gap:0.4rem}
.mpp-name{font-size:0.85rem;font-weight:600;color:var(--text);min-width:0}
.mpp-edit-btn{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:0.15rem;display:flex;align-items:center;opacity:0.4;transition:opacity 0.12s;flex-shrink:0}
.mpp-edit-btn:hover{opacity:0.8}
.mpp-close{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:1rem;padding:0 0.1rem;line-height:1;opacity:0.4;transition:opacity 0.12s;flex-shrink:0}
.mpp-close:hover{opacity:0.8}
.mpp-formula{font-size:0.78rem;color:var(--text-muted);margin-top:0.3rem;line-height:1.5}
/* Pattern Breakdown */
.pattern-breakdown{margin-top:0.9rem;padding-top:0}
.pb-toggle{display:flex;align-items:center;gap:0.45rem;padding:0.65rem 0;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}
.pb-toggle-chevron{font-size:0.85rem;color:var(--text-muted);transition:transform 0.2s;flex-shrink:0}
.pb-toggle-label{font-size:0.72rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-muted);font-weight:600}
.pb-toggle.open .pb-toggle-chevron{transform:rotate(90deg)}
.pb-body{display:none}
.pb-toggle.open+.pb-body{display:block}
.pb-section{padding:0.65rem 0}
.pb-section-label{display:flex;align-items:center;gap:0.4rem;margin-bottom:0.3rem}
.pb-section-label svg{color:var(--text-muted);flex-shrink:0;opacity:0.5}
.pb-section-label span.pb-label{font-size:0.68rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--text-muted);font-weight:500;opacity:0.5}
.pb-section-value{font-size:0.9rem;color:var(--text-dim);line-height:1.6;white-space:pre-wrap;padding:0.1rem 0;font-weight:400}
.pb-template{font-size:0.88rem;color:var(--text-dim);line-height:2;white-space:pre-wrap;padding:0.7rem 0.9rem;background:var(--surface);border-radius:8px;font-family:inherit;margin-top:0.2rem}
.pb-collapsible{cursor:pointer;-webkit-tap-highlight-color:transparent}
.pb-collapsible .pb-collapse-chevron{font-size:0.7rem;color:var(--text-muted);transition:transform 0.15s;margin-left:auto}
.pb-collapsible.open .pb-collapse-chevron{transform:rotate(90deg)}
.pb-collapsible-body{display:none;padding-top:0.2rem}
.pb-collapsible.open .pb-collapsible-body{display:block}
.pb-save-pattern-btn{display:inline-flex;align-items:center;gap:0.3rem;margin-top:0.6rem;margin-bottom:0.8rem;padding:0;background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:0.8rem;font-weight:400;font-family:inherit;transition:color 0.15s}
.pb-save-pattern-btn:hover{color:var(--text)}
.pb-save-pattern-btn.saved{color:var(--accent);pointer-events:none}

/* old breakdown compat — kept for non-mirror cards */
.breakdown-item{display:flex;gap:0.8rem;padding:0.5rem 0;border-bottom:1px solid var(--border)}
.breakdown-item:last-child{border-bottom:none}
.breakdown-label{font-size:0.75rem;letter-spacing:0.03em;text-transform:uppercase;color:var(--text-muted);font-weight:600;min-width:90px;flex-shrink:0;padding-top:0.1rem}
.breakdown-value{font-size:0.88rem;font-weight:400;color:var(--text);line-height:1.5}
.breakdown-toggle{margin-top:0.6rem;border-top:1px solid var(--border);padding-top:0.5rem}
.breakdown-toggle-label{font-size:0.82rem;color:var(--text-muted);cursor:pointer;font-weight:500;user-select:none;display:flex;align-items:center;gap:0.4rem;transition:color 0.15s}
.breakdown-toggle-label:hover{color:var(--text)}
.breakdown-toggle-label .chevron{transition:transform 0.2s;font-size:0.7rem}
.breakdown-toggle.open .chevron{transform:rotate(180deg)}
.breakdown-body{display:none;margin-top:0.5rem;padding:0.6rem 0.8rem;background:var(--surface2);border-radius:10px;border:1px solid var(--border)}
.breakdown-toggle.open .breakdown-body{display:block}
.breakdown-toggle.open .breakdown-toggle-label{color:var(--text)}
/* Design entry points */
.design-entry-points{width:100%;max-width:680px;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:calc(100dvh - 200px);padding:2rem 0}
.design-entry-header{font-size:1.4rem;font-weight:600;color:var(--text);margin-bottom:0.3rem;text-align:center;letter-spacing:-0.01em}
.design-entry-sub{font-size:0.88rem;color:var(--text-muted);margin-bottom:2rem;text-align:center;font-weight:400}
.design-entry-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;width:100%}
@media(max-width:600px){.design-entry-grid{grid-template-columns:1fr}}
.design-entry-card{display:flex;flex-direction:column;align-items:center;text-align:center;padding:2.2rem 1.5rem 1.8rem;background:var(--surface);border:1.5px solid var(--border);border-radius:16px;cursor:pointer;transition:all 0.2s ease;font-family:inherit;width:100%}
.design-entry-card:hover{border-color:var(--accent);background:var(--accent-glow);transform:translateY(-2px);box-shadow:0 8px 32px rgba(0,0,0,0.08)}
.design-entry-icon{width:52px;height:52px;border-radius:14px;background:var(--surface2);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--text-muted);transition:all 0.2s;margin-bottom:1rem}
.design-entry-card:hover .design-entry-icon{background:var(--accent);color:var(--accent-fg,#fff);transform:scale(1.05)}
.design-entry-label{font-size:1.05rem;font-weight:600;color:var(--text);line-height:1.2;margin-bottom:0.35rem}
.design-entry-desc{font-size:0.82rem;color:var(--text-muted);line-height:1.45;max-width:220px}
.design-ai-pick{padding:0.55rem 0.7rem;background:var(--surface);border:1px solid var(--border);border-radius:8px;cursor:pointer;transition:all 0.12s;text-align:left;font-family:inherit;width:100%;display:block}
.design-ai-pick:hover{border-color:var(--accent);background:var(--accent-glow)}
/* ── Studio composer (setup + generation states) ───────────────────────── */
/* The composer is a centered setup column. max-width keeps line lengths sane
   on ultrawide screens while still filling normal desktops. min-width:0 is set
   on flex/grid children so long content can't force horizontal overflow. */
.studio-setup{width:100%;max-width:1180px;margin:0 auto;padding:2.2rem 2rem 10rem;min-width:0}
.studio-composer{position:sticky;bottom:calc(env(safe-area-inset-bottom, 0px) + 18px);width:min(100%,780px);margin:2.6rem auto 0;padding:0.9rem;border-radius:22px;background:var(--surface);border:1px solid var(--border);box-shadow:0 24px 80px rgba(0,0,0,0.28),0 4px 16px rgba(0,0,0,0.12);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);z-index:30}
.studio-mode-btn{padding:0.35rem 0.9rem;border-radius:999px;border:none;background:none;color:var(--text-muted);font-size:0.8rem;font-weight:600;cursor:pointer;font-family:inherit;transition:all 0.12s}
.studio-mode-btn.active{background:var(--accent-glow);color:var(--text)}
@keyframes sgShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.sg-shim{background:linear-gradient(110deg,var(--surface2) 32%,rgba(255,255,255,0.13) 46%,var(--surface2) 60%);background-size:200% 100%;animation:sgShimmer 1.6s linear infinite}
html.light .sg-shim{background:linear-gradient(110deg,var(--surface2) 32%,rgba(0,0,0,0.07) 46%,var(--surface2) 60%);background-size:200% 100%}
.studio-pill{display:inline-flex;align-items:center;gap:0.3rem;padding:0.4rem 0.85rem;border-radius:999px;border:1px solid var(--border);background:none;color:var(--text-muted);font-size:0.76rem;font-weight:500;cursor:pointer;font-family:inherit;transition:all 0.12s;white-space:nowrap}
.studio-pill:hover{border-color:var(--accent);color:var(--text)}
/* Interface language: Arabic (owner 2026-10-06). Basic right-to-left; the
   Studio canvas, code and handles stay left-to-right. */
html[dir="rtl"] body{direction:rtl}
html[dir="rtl"] #designViewer,html[dir="rtl"] .design-slide,html[dir="rtl"] [data-dsblk],html[dir="rtl"] code,html[dir="rtl"] pre,html[dir="rtl"] .kalam-handle,html[dir="rtl"] input[type="email"],html[dir="rtl"] input[type="url"],html[dir="rtl"] input[type="password"]{direction:ltr}
html[dir="rtl"] .nav-item svg{margin-left:0}
html[dir="rtl"] .cw-post,html[dir="rtl"] .kb-row,html[dir="rtl"] .settings-item{text-align:right}
/* Phones (owner 2026-10-05): the credits label plus the send button left
   the pill strip a few pixels wide, so "Style:" was cut and the Images
   pill was invisible. Pills take the whole first line; the cost and the
   send button share the second, with a 44px target for the thumb. */
@media(max-width:560px){.studio-composer-foot{flex-wrap:wrap;row-gap:0.55rem}.studio-composer-pills{flex:1 1 100% !important}#studioCreditsPill{margin-left:auto}#studioGenerateBtn{width:44px !important;height:44px !important}}
/* Phones (owner 2026-10-07): the composer card covered the gallery. It
   minimizes to one bar at the bottom (chevron, a tap on the gallery, or a
   scroll down while empty) and opens again with a tap on the bar. */
.studio-min-btn,.studio-mini{display:none}
@media(max-width:560px){
  .studio-min-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:30px;margin-left:auto;border:none;background:none;color:var(--text-muted);cursor:pointer;border-radius:8px;font-family:inherit}
  .studio-composer.min{padding:0.3rem 0.35rem 0.3rem 1rem;border-radius:999px;margin-top:1.2rem}
  .studio-composer.min>*{display:none !important}
  .studio-composer.min>.studio-mini{display:flex !important}
  .studio-mini{align-items:center;gap:0.6rem;width:100%;min-height:44px;border:none;background:none;color:var(--text-muted);font-family:inherit;font-size:0.95rem;text-align:left;cursor:pointer;padding:0}
  .studio-mini>svg{flex:none;color:var(--accent)}
  .studio-mini .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-muted)}
  .studio-mini .t.has{color:var(--text)}
  .studio-mini .s{font-size:0.72rem;color:var(--text-muted);white-space:nowrap;max-width:34%;overflow:hidden;text-overflow:ellipsis}
  .studio-mini .a{width:40px;height:40px;border-radius:50%;background:var(--accent);color:var(--accent-fg,#fff);display:flex;align-items:center;justify-content:center;flex:none}
  html[dir="rtl"] .studio-mini{text-align:right}
}
.studio-style-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:0.75rem;margin-bottom:2.4rem;min-width:0}
@media(max-width:1100px){.studio-style-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.studio-style-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:0.7rem}}
.studio-style-card{border:2px solid var(--border);border-radius:14px;overflow:hidden;background:var(--surface);transition:border-color 0.15s,box-shadow 0.15s,transform 0.15s;position:relative;cursor:pointer;min-width:0}
.studio-style-card:hover:not(.soon){transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,0.08)}
.studio-style-card.sel{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.studio-style-card.soon{opacity:0.55;cursor:default}
/* UI audit 2026-10-07 (ST1, ST2): the grid is a keyboard radio group, and
   the sticky composer's measured size (--studio-composer-h and
   --studio-composer-clear, set by _studioComposerMeasure) keeps cards and
   job rows out from under it when scrollIntoView brings them on screen,
   with matching clearance at the end of the column. */
.studio-style-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.studio-style-card,#studioHistorySection,#studioHistoryGrid>*,#studioHistoryGrid button{scroll-margin-bottom:calc(var(--studio-composer-clear,250px) + 12px)}
.studio-setup{padding-bottom:max(10rem,calc(var(--studio-composer-h,0px) + 2.5rem))}
.studio-style-preview{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;background:var(--surface2)}
/* Slide-count stepper — replaces the raw range input */
.studio-stepper{display:inline-grid;grid-template-columns:44px 1fr 44px;align-items:center;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--surface);min-width:170px}
.studio-stepper button{height:44px;border:0;background:transparent;color:var(--text);font-size:1.2rem;cursor:pointer;font-family:inherit;transition:background 0.12s}
.studio-stepper button:hover:not(:disabled){background:var(--surface2)}
.studio-stepper button:disabled{opacity:0.3;cursor:not-allowed}
.studio-stepper-val{text-align:center;font-size:0.9rem;font-weight:600;color:var(--text);white-space:nowrap}
/* Generation loading state — replaces the form while generating */
.studio-genstate{display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2.5rem 1.25rem;min-height:50vh;gap:1.4rem}
.studio-genstate.show{display:flex}
.studio-gen-skeleton{display:flex;gap:0.6rem;align-items:flex-end;height:120px}
.studio-gen-skeleton span{display:block;width:46px;border-radius:8px;background:linear-gradient(110deg,var(--surface) 30%,var(--surface2) 50%,var(--surface) 70%);background-size:200% 100%;animation:studioShimmer 1.4s linear infinite}
.studio-gen-skeleton span:nth-child(1){height:78px;animation-delay:0s}
.studio-gen-skeleton span:nth-child(2){height:104px;animation-delay:0.12s}
.studio-gen-skeleton span:nth-child(3){height:90px;animation-delay:0.24s}
.studio-gen-skeleton span:nth-child(4){height:112px;animation-delay:0.36s}
@keyframes studioShimmer{from{background-position:200% 0}to{background-position:-200% 0}}
.studio-gen-stage{font-size:1.05rem;font-weight:600;color:var(--text);min-height:1.4em;transition:opacity 0.3s}
.studio-gen-bar{width:280px;max-width:80%;height:4px;border-radius:999px;overflow:hidden;background:var(--surface2);position:relative}
.studio-gen-bar::after{content:"";position:absolute;left:0;top:0;height:100%;width:35%;border-radius:999px;background:var(--accent);animation:studioLoading 1.4s ease-in-out infinite}
@keyframes studioLoading{from{transform:translateX(-120%)}to{transform:translateX(340%)}}
.design-ai-pick-tag{font-size:0.65rem;letter-spacing:0.04em;text-transform:uppercase;color:var(--text-muted);font-weight:500;margin-bottom:0.15rem}
.design-ai-pick-text{font-size:0.82rem;color:var(--text-dim);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.img-drop-zone{border:1px solid var(--border);outline:none;border-radius:8px;padding:0.7rem;cursor:pointer;transition:all 0.12s;background:var(--surface)}
.img-drop-zone:hover,.img-drop-zone.drag-over{border-color:var(--accent-dim);background:var(--surface2)}
.img-drop-inner{display:flex;flex-direction:column;align-items:center;gap:0.25rem;pointer-events:none}
.img-drop-icon{font-size:1.1rem;color:var(--text-muted)}
.img-drop-label{font-size:0.88rem;letter-spacing:0.01em;color:var(--text-muted);text-align:center;font-weight:500}
.img-thumb{width:48px;height:48px;object-fit:cover;border-radius:5px;border:1px solid var(--border)}
.img-thumb-wrap{position:relative;width:48px;height:48px;flex-shrink:0}
.img-thumb-status{position:absolute;bottom:2px;right:2px;width:13px;height:13px;border-radius:50%;font-size:8px;display:flex;align-items:center;justify-content:center;font-weight:700}
.img-thumb-status.ok{background:rgba(0,0,0,0.7);color:#fff}
.img-thumb-status.err{background:var(--danger);color:#fff}
.img-thumb-status.loading{background:var(--accent-dim);color:#000;animation:logoPulse 1s infinite}
.img-thumb-remove{position:absolute;top:-4px;right:-4px;width:16px;height:16px;border-radius:50%;background:rgba(0,0,0,0.7);color:#fff;border:none;font-size:10px;cursor:pointer;display:none;align-items:center;justify-content:center;line-height:1;padding:0}
.img-thumb-wrap:hover .img-thumb-remove{display:flex}
@media(max-width:800px){.img-thumb-remove{display:flex}}


.saved-mobile-tabs{display:none;overflow-x:auto;white-space:nowrap;padding:0.4rem 0.8rem;border-bottom:1px solid var(--border);gap:0.3rem;-webkit-overflow-scrolling:touch;flex-shrink:0;background:var(--sidebar-bg)}
.saved-mobile-tabs::-webkit-scrollbar{display:none}
.saved-mobile-tab{display:inline-flex;align-items:center;gap:0.3rem;padding:0.4rem 0.75rem;border-radius:2rem;cursor:pointer;font-size:1rem;font-weight:500;border:none;background:var(--surface2);color:var(--text-dim);white-space:nowrap;font-family:inherit;flex-shrink:0;-webkit-tap-highlight-color:transparent}
.saved-mobile-tab,.saved-mobile-tab:focus:not(:focus-visible),.saved-mobile-tab:active{outline:none !important;box-shadow:none !important;-webkit-tap-highlight-color:transparent;-webkit-appearance:none;appearance:none;border:none !important}.saved-mobile-tab::-moz-focus-inner{border:0}
.saved-mobile-tab.active{background:var(--nav-active-bg,var(--surface2));border:none;color:var(--text)}
.saved-mobile-tab .smt-dot{width:6px;height:6px;border-radius:50%}.saved-card-delete-btn{display:flex;background:none;border:none;cursor:pointer;color:var(--text-muted);opacity:0;padding:0;margin-left:auto;transition:opacity 0.15s,color 0.15s;flex-shrink:0}.post-card:hover .saved-card-delete-btn{opacity:0.45}.saved-card-delete-btn:hover{opacity:1 !important;color:#e03030 !important}@media(max-width:768px){.saved-card-delete-btn{display:none !important}}
/* Saved cards (UI audit SA1): actions reveal on keyboard focus as well as hover,
   28px hit areas (negative vertical margin keeps the meta row height), a real
   Copy control that stays visible on touch, and a search field above the list. */
.saved-card-delete-btn{min-width:28px;min-height:28px;align-items:center;justify-content:center;border-radius:6px;margin-top:-5px;margin-bottom:-5px}
.post-card:focus-within .saved-card-delete-btn{opacity:0.45}
.post-card .post-meta .saved-card-delete-btn:focus-visible{opacity:1 !important;outline-offset:-2px !important}
.saved-card-copy-btn:hover,.saved-card-copy-btn:focus-visible{color:var(--text) !important}
.saved-card-copy-btn.copied{color:var(--accent) !important;opacity:1 !important}
.saved-card-move{display:inline-flex;align-items:center;gap:0.2rem;background:none;border:none;padding:0 0.2rem;margin:-5px 0 -5px -0.2rem;min-height:28px;border-radius:6px;cursor:pointer;font-family:inherit;font-size:0.7rem;letter-spacing:0.04em;text-transform:uppercase;color:var(--text-muted);font-weight:500}
.saved-card-move:hover{color:var(--text)}
.post-card .post-meta .saved-card-move:focus-visible{outline-offset:-2px !important}
.saved-folder-color-btn{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:0;min-width:28px;min-height:28px;border-radius:6px;cursor:pointer}
.saved-search{width:100%;background:var(--surface);border:1px solid var(--border);color:var(--text);border-radius:8px;font-family:inherit;font-size:1rem;padding:0.5rem 0.75rem;outline:none;-webkit-appearance:none;appearance:none;transition:border-color 0.15s}
.saved-search:focus-visible{border-color:var(--accent)}
.saved-search::-webkit-search-cancel-button{-webkit-appearance:searchfield-cancel-button;cursor:pointer}
@media(max-width:768px){.post-card .post-meta .saved-card-copy-btn{display:flex !important;opacity:0.6}}
.saved-folder-header{display:flex;align-items:center;justify-content:space-between;padding:0.6rem 0;margin-bottom:0.4rem;border-bottom:1px solid var(--border);min-height:2.5rem}
.saved-folder-name{font-size:1.25rem;font-weight:600;color:var(--text)}
.saved-folder-icon svg{width:18px;height:18px;vertical-align:middle;margin-bottom:1px}
.saved-folder-actions{display:flex;gap:0.3rem}
.folder-color-picker{display:flex;gap:0.3rem;padding:0.3rem 0;margin-top:0.2rem}
.folder-color-dot{width:16px;height:16px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:all 0.1s}
.folder-color-dot:hover{transform:scale(1.2)}
.folder-color-dot.active{border-color:var(--text)}
.delete-modal{position:fixed;inset:0;background:rgba(0,0,0,0.6);display:none;align-items:center;justify-content:center;z-index:100;backdrop-filter:blur(4px)}
.delete-modal.show{display:flex}
.delete-modal-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:1.4rem 1.6rem;width:320px;max-width:90vw;animation:cardIn 0.2s ease}
.delete-modal-card h3{font-size:1.25rem;font-weight:600;color:var(--text);margin-bottom:0.3rem}
.delete-modal-card p{font-size:1rem;color:var(--text-dim)}
.delete-modal-cancel{flex:1;background:var(--surface2);border:1px solid var(--border);color:var(--text);padding:0.55rem;border-radius:10px;cursor:pointer;font-size:1rem;font-weight:500;font-family:inherit;transition:all 0.1s}
.delete-modal-cancel:hover{border-color:var(--text-dim)}
.delete-modal-confirm{flex:1;background:var(--danger);border:none;color:#fff;padding:0.55rem;border-radius:10px;cursor:pointer;font-size:1rem;font-weight:600;font-family:inherit;transition:opacity 0.1s}
.delete-modal-confirm:hover{opacity:0.85}

.saved-layout{display:flex;flex-direction:column;flex:1;overflow:hidden;background:var(--bg)}
.saved-body{display:grid;grid-template-columns:180px 1fr;flex:1;overflow:hidden;min-height:0}
.saved-folders{border-right:1px solid var(--border);padding:0.8rem;overflow-y:auto;background:var(--sidebar-bg)}
.folder-item{display:flex;align-items:center;gap:0.5rem;padding:0.48rem 0.65rem;border-radius:8px;cursor:pointer;font-size:1rem;color:var(--text-dim);transition:all 0.1s;border:none;background:none;width:100%;text-align:left;font-family:inherit}
.folder-item:hover{background:var(--surface);color:var(--text)}
.folder-item.active{background:var(--surface);color:var(--text)}
.folder-item .folder-count{font-size:1rem;color:var(--text-muted);margin-left:auto;font-weight:500}
.folder-actions{display:flex;gap:0.15rem;opacity:0;transition:opacity 0.1s;flex-shrink:0}
.folder-item:hover .folder-actions{opacity:1}
.folder-action-btn{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:1rem;padding:0.1rem;transition:color 0.1s;font-family:inherit}
.folder-action-btn:hover{color:var(--text)}
.add-folder-btn{display:flex;align-items:center;gap:0.45rem;padding:0.48rem 0.65rem;border-radius:8px;cursor:pointer;font-size:1rem;color:var(--text-muted);border:1px dashed var(--border);background:none;width:100%;text-align:left;margin-top:0.4rem;transition:all 0.1s;font-family:inherit}
.add-folder-btn:hover{border-color:var(--accent-dim);color:var(--text-dim)}
.saved-content{padding:1.2rem 2rem;overflow-y:auto;display:flex;flex-direction:column;gap:0.7rem}
.saved-content::-webkit-scrollbar{width:3px}
.saved-content::-webkit-scrollbar-track{background:transparent}
.saved-content::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
.save-url-bar{display:flex;gap:0.35rem;margin-bottom:0.3rem}
.save-url-bar input{flex:1}
.save-url-bar select{width:auto;min-width:100px;padding:0.45rem 0.5rem;font-size:0.72rem}

.planner-layout{display:flex;flex-direction:column;flex:1;overflow:hidden;background:var(--bg);position:relative}
.planner-top{padding:0.75rem 2rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;min-height:64px}
.planner-month{font-size:1.1rem;font-weight:600;color:var(--text);display:flex;flex-direction:column;justify-content:center}
.planner-title{font-size:0.68rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-muted);line-height:1.2}
.planner-nav{display:flex;gap:0.3rem}
.planner-nav-btn{background:var(--surface);border:1px solid var(--border);color:var(--text-muted);width:34px;height:34px;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1rem;transition:all 0.1s;font-family:inherit}
.planner-nav-btn:hover{border-color:var(--accent-dim);color:var(--text)}
.planner-nav-today{width:auto;padding:0 0.65rem;font-size:0.8rem;font-weight:500}
/* Keyboard focus on a date stays inside the cell: the grid clips overflow
   and later cells paint over an outside ring. */
#calendarGrid .cal-day:focus-visible{outline-offset:-2px !important;z-index:2;border-radius:3px}
.planner-cal-wrap{border-bottom:1px solid var(--border);padding:0.6rem 2rem 0.5rem;background:var(--bg)}
.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);border-radius:12px;overflow:hidden;max-width:600px;margin:0 auto;gap:1px;background:var(--border)}
.cal-header{padding:0.4rem;text-align:center;font-size:0.7rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--text-muted);background:var(--bg);font-weight:600}
.cal-day{background:var(--bg);padding:0.3rem;min-height:70px;cursor:pointer;transition:background 0.1s;overflow:hidden;position:relative;display:flex;flex-direction:column;gap:2px}
.cal-day:hover{background:var(--surface)}
.cal-day.other{opacity:0.2}
.cal-day.today{background:rgba(255,255,255,0.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.1);border-radius:3px}
.cal-day-num{font-size:0.75rem;color:var(--text);font-weight:500;font-variant-numeric:tabular-nums;margin-bottom:2px}
.cal-day.today .cal-day-num{font-weight:700;color:var(--text)}
html.light .cal-day.today{background:rgba(0,0,0,0.03);box-shadow:inset 0 0 0 1px rgba(0,0,0,0.08)}
.cal-day-add{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:24px;height:24px;border-radius:50%;background:var(--accent);color:var(--accent-fg,#fff);display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:300;opacity:0;transition:opacity 0.15s;pointer-events:none;line-height:1}
.cal-day:hover .cal-day-add{opacity:0.7}
.cal-day.has-sched .cal-day-add{display:none}
.cal-sched-pill{font-size:0.58rem;color:#333;border-radius:4px;padding:1px 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;display:block;line-height:1.6;font-weight:500}
.planner-stats{padding:0.5rem 2rem;font-size:0.78rem;color:var(--text-muted);display:flex;gap:0.8rem;flex-wrap:wrap;max-width:880px;margin-left:auto;margin-right:auto;width:100%}
.planner-tabs{display:flex;gap:0;border-bottom:1px solid var(--border);padding:0 2rem;flex-shrink:0;max-width:880px;margin-left:auto;margin-right:auto;width:100%}
.planner-tab{background:none;border:none;border-bottom:2px solid transparent;color:var(--text-muted);padding:0.6rem 1rem;font-size:0.88rem;font-weight:500;cursor:pointer;font-family:inherit;transition:all 0.12s}
.planner-tab:hover{color:var(--text-dim)}
.planner-tab.active{color:var(--text);border-bottom-color:var(--accent)}
.planner-gens{flex:1;overflow-y:auto;padding:1.2rem 2.5rem;position:relative;max-width:880px;margin-left:auto;margin-right:auto;width:100%}
.planner-gens-inner{max-width:680px;margin:0 auto}
/* Short desktop windows (zoomed or small): the calendar no longer fits above
   the list, so the whole planner scrolls and every date and tab is reachable. */
@media (min-width:801px) and (max-height:640px){
  .planner-layout{overflow-y:auto}
  .planner-gens{flex:none;overflow:visible}
}
.planner-gens::-webkit-scrollbar{width:3px}
.planner-gens::-webkit-scrollbar-track{background:transparent}
.planner-gens::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
.queue-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:0.9rem 1.1rem;margin-bottom:0.6rem;transition:all 0.12s}
.queue-card:hover{border-color:var(--border-hover)}
.queue-card-body{font-size:0.9rem;color:var(--text);line-height:1.65;margin-bottom:0.35rem;white-space:pre-wrap;word-break:break-word}
.queue-card-meta{display:flex;align-items:center;justify-content:space-between;font-size:0.72rem;color:var(--text-muted);margin-bottom:0.3rem}
.queue-card-tag{font-size:0.7rem;color:var(--text-muted);background:var(--surface2);padding:0.15rem 0.45rem;border-radius:4px}
.queue-card-actions{display:flex;gap:0.35rem;align-items:center}
.queue-action-btn{background:none;border:1px solid var(--border);color:var(--text-muted);padding:0.25rem 0.6rem;border-radius:6px;cursor:pointer;font-size:0.75rem;font-family:inherit;transition:all 0.12s}
.queue-action-btn:hover{border-color:var(--accent-dim);color:var(--text)}
.queue-remove{border-color:transparent;color:var(--text-muted);font-size:0.9rem;padding:0.15rem 0.4rem}
.queue-remove:hover{color:var(--danger)}
/* Time picker — unified segmented control */
.time-control{display:flex;align-items:center;background:var(--surface2);border:1px solid var(--border);border-radius:10px;overflow:hidden;height:42px}
.time-seg{appearance:none;-webkit-appearance:none;background:transparent;border:none;color:var(--text);font-size:0.9rem;font-weight:400;font-family:inherit;padding:0.5rem 0.15rem;text-align:center;cursor:pointer;outline:none;font-variant-numeric:tabular-nums;width:46px;transition:background 0.12s}
.time-seg:focus{background:var(--accent-glow)}
.time-seg option{background:var(--surface);color:var(--text)}
.time-colon{font-size:0.88rem;color:var(--text-muted);font-weight:400;padding:0 2px;flex-shrink:0}
.time-seg-ampm{font-size:0.85rem;font-weight:400;color:var(--text);width:46px}
/* Date input — force neutral picker colors (no blue), handle icon for dark mode */
input[type="date"]{color-scheme:light}
input[type="date"]::-webkit-calendar-picker-indicator{cursor:pointer;opacity:0.5}
input[type="date"]::-webkit-calendar-picker-indicator:hover{opacity:0.8}
html:not(.light) input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(1);opacity:0.4}
html:not(.light) input[type="date"]::-webkit-calendar-picker-indicator:hover{opacity:0.7}
.planner-gens-title{font-size:0.85rem;letter-spacing:0.02em;color:var(--text-muted);font-weight:600;margin-bottom:0.5rem}



/* Appearance tiles (overhaul stage 11): Light / Dark / System previews. */
.theme-tile{display:flex;flex-direction:column;align-items:center;gap:0.35rem;background:none;border:none;cursor:pointer;font-family:inherit;padding:2px;min-height:44px}
.theme-tile-prev{width:66px;height:44px;border-radius:9px;border:1px solid var(--border);display:block;position:relative;overflow:hidden;transition:box-shadow 0.15s var(--ease)}
.theme-tile:hover .theme-tile-prev{box-shadow:var(--shadow-medium)}
.theme-tile.active .theme-tile-prev{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--accent)}
.theme-tile-name{font-size:0.72rem;color:var(--text-muted);font-weight:500}
.theme-tile.active .theme-tile-name{color:var(--text);font-weight:600}
/* 44x44 interactive button (a11y hit target), 26px visible dot inside. */
.accent-dot{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:0;cursor:pointer;flex-shrink:0;position:relative;border-radius:50%}
.accent-dot i{display:block;width:26px;height:26px;border-radius:50%;background:currentColor;transition:transform 0.15s var(--ease),box-shadow 0.15s var(--ease);box-shadow:var(--shadow-small);position:relative}
.accent-dot:hover i{transform:scale(1.08);box-shadow:var(--shadow-medium)}
.accent-dot.active i{box-shadow:0 0 0 2px var(--bg),0 0 0 4px currentColor}
.accent-dot.active i::after{content:'\2713';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:700}
/* Graphite is black: on the dark theme the swatch keeps a hairline so it reads against the page, and the chosen ring is white. */
.accent-dot[data-accent="graphite"] i{box-shadow:var(--shadow-small),inset 0 0 0 1px rgba(255,255,255,0.28)}
html.light .accent-dot[data-accent="graphite"] i{box-shadow:var(--shadow-small)}
.accent-dot[data-accent="graphite"].active i{box-shadow:0 0 0 2px var(--bg),0 0 0 4px #F4F4F1,inset 0 0 0 1px rgba(255,255,255,0.28)}
html.light .accent-dot[data-accent="graphite"].active i{box-shadow:0 0 0 2px var(--bg),0 0 0 4px #0A0A0A}
.accent-label{font-size:0.6rem;letter-spacing:0.06em;color:var(--text-muted);text-align:center;margin-top:0.25rem;font-weight:500;opacity:0.6;transition:opacity 0.15s}
.accent-option:hover .accent-label{opacity:1}
.accent-option{display:flex;flex-direction:column;align-items:center;gap:0}
.settings-list{display:flex;flex-direction:column}
.settings-item{display:flex;align-items:center;justify-content:space-between;padding:0.75rem 0;position:relative;border-bottom:1px solid var(--border);cursor:pointer;transition:opacity 0.1s}
.settings-item:last-child{border-bottom:1px solid var(--border)}
.settings-item:hover{opacity:0.8}
.settings-item-left{display:flex;align-items:center;gap:0.75rem}
.settings-item-left svg{width:20px;height:20px;stroke:var(--text-dim);fill:none;stroke-width:1.5;flex-shrink:0}
.settings-item-label{font-size:0.95rem;color:var(--text);font-weight:400}
.settings-info-tip{display:inline-flex;align-items:center;justify-content:center;width:11px;height:11px;border-radius:50%;border:1px solid var(--text-muted);color:var(--text-muted);font-size:0.45rem;cursor:help;margin-left:2px;opacity:0.35;font-style:normal;font-family:inherit;font-weight:500;flex-shrink:0;vertical-align:middle;position:relative;top:-0.5px}
.settings-info-tip:hover{opacity:0.5}
.settings-info-tip .tip-text{display:none;position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:rgba(30,30,30,0.8);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.08);border-radius:7px;padding:5px 9px;font-size:11px;line-height:1.35;color:rgba(255,255,255,0.85);white-space:normal;max-width:220px;width:max-content;box-shadow:0 4px 14px rgba(0,0,0,0.2);font-weight:400;z-index:100;pointer-events:none}
.settings-info-tip .tip-text::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:4px solid transparent;border-top-color:rgba(30,30,30,0.8)}
.settings-info-tip:hover .tip-text{display:block}
.settings-item-value{font-size:0.95rem;color:var(--text-muted);font-weight:400;display:flex;align-items:center;gap:0.35rem}
.settings-item-value svg{width:14px;height:14px;stroke:var(--text-muted);fill:none;stroke-width:1.5;flex-shrink:0;opacity:0.5}
.settings-section-title{font-size:0.82rem;font-weight:600;letter-spacing:0.02em;color:var(--text-muted);padding:1rem 0 0.4rem}
.appearance-options{display:flex;gap:0.3rem;margin-top:0.3rem}
.appearance-opt{padding:0.35rem 0.75rem;border-radius:10px;border:1px solid var(--border);background:transparent;color:var(--text-dim);font-size:1rem;font-weight:400;cursor:pointer;font-family:inherit;transition:all 0.1s}
.appearance-opt.active{background:var(--surface2);border-color:var(--text-dim);color:var(--text)}
.appearance-opt:hover{border-color:var(--text-dim)}
.settings-layout{padding:1rem 2.5rem;overflow-y:auto;flex:1;max-width:600px;margin:0 auto;width:100%;background:var(--bg)}
.settings-layout::-webkit-scrollbar{width:3px}
.settings-layout::-webkit-scrollbar-track{background:transparent}
.settings-layout::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
.settings-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:1rem 1.2rem;margin-bottom:0.8rem}
.settings-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:0.6rem}
.settings-card-title{display:flex;align-items:center;gap:0.45rem}
.settings-card-title .ic{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:600;color:#fff}
.settings-card-title h3{font-size:1.25rem;font-weight:600;color:var(--text)}
.plan-badge{background:var(--surface2);border:1px solid var(--border);border-radius:20px;padding:0.4rem 0.9rem;font-size:0.92rem;font-weight:600;letter-spacing:0.02em;color:var(--text);text-align:center;margin-bottom:0.4rem}
.plan-status{text-align:center;font-size:1rem;color:var(--success);font-weight:600;margin-bottom:0.5rem}
.settings-row{display:flex;align-items:center;justify-content:space-between;padding:0.38rem 0;border-bottom:1px solid var(--border)}
.settings-row:last-child{border-bottom:none}
.settings-row-label{font-size:1rem;color:var(--text-muted);font-weight:500}
.settings-row-value{font-size:1rem;font-weight:500;color:var(--text)}
.settings-action-btn{background:var(--accent);border:none;color:var(--accent-fg,#fff);padding:0.6rem 1.2rem;border-radius:999px;cursor:pointer;font-size:0.92rem;font-weight:500;letter-spacing:0.01em;transition:all 0.15s var(--ease);display:block;margin:0.3rem auto 0;font-family:inherit}
.settings-action-btn:hover{background:var(--accent-dim)}
.settings-danger-btn{background:transparent;border:1px solid var(--danger);color:var(--danger);padding:0.4rem 0.85rem;border-radius:8px;cursor:pointer;font-size:0.88rem;font-weight:500;transition:all 0.15s var(--ease);font-family:inherit}
.settings-danger-btn:hover{background:rgba(224,80,64,0.1)}
.tone-dd-btn{display:block;width:100%;text-align:left;background:none;border:none;font-size:1rem;color:var(--text);padding:0.6rem 1rem;cursor:pointer;font-family:inherit;transition:background 0.1s}
.tone-dd-btn:hover{background:var(--surface2)}
.connect-row{display:flex;align-items:center;justify-content:space-between;padding:0.5rem 0.7rem;background:var(--surface2);border:1px solid var(--border);border-radius:8px;margin-bottom:0.35rem}
.connect-row-name{font-size:1rem;color:var(--text);font-weight:400}
.connect-btn{background:var(--accent);border:none;color:var(--accent-fg,#fff);padding:0.35rem 0.75rem;border-radius:20px;cursor:pointer;font-size:0.88rem;font-weight:600;transition:all 0.15s var(--ease);font-family:inherit}
.connect-btn:hover{background:var(--accent-dim)}
.connect-btn.soon{background:transparent;border:1px solid var(--border);color:var(--text-muted);cursor:default}
.report-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:1rem 1.2rem;margin-bottom:0.8rem}
.report-card h3{font-size:1.25rem;font-weight:600;color:var(--text);margin-bottom:0.4rem}
.report-card textarea{min-height:55px;margin-bottom:0.35rem}
.report-send-btn{background:var(--danger);border:none;color:#fff;padding:0.55rem 1.1rem;border-radius:20px;cursor:pointer;font-size:0.92rem;font-weight:600;transition:opacity 0.15s var(--ease);font-family:inherit}
.report-send-btn:hover{opacity:0.85}

.referral-section{margin-top:0.5rem}
.referral-stats{display:grid;grid-template-columns:1fr 1fr;gap:0.5rem;margin-bottom:0.6rem}
.ref-stat{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:0.55rem 0.7rem}
.ref-stat-label{font-size:1rem;color:var(--text-muted);font-weight:500;margin-bottom:0.15rem}
.ref-stat-value{font-size:1.25rem;font-weight:600;color:var(--text)}
.ref-link-row{display:flex;align-items:center;gap:0.4rem;margin-top:0.4rem}
.ref-link{flex:1;font-size:1rem;color:var(--accent-dim);font-weight:500}

.auth-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);display:none;align-items:center;justify-content:center;z-index:100;backdrop-filter:blur(8px)}
.auth-overlay.show{display:flex}
.auth-card{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:2.2rem 2.2rem 1.8rem;width:400px;max-width:92vw;animation:cardIn 0.2s ease;position:relative;box-shadow:0 8px 40px rgba(0,0,0,0.25)}
.auth-close{position:absolute;top:1rem;right:1rem;width:34px;height:34px;border-radius:10px;background:var(--surface2);border:1px solid var(--border);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:1.1rem;transition:all 0.12s;font-family:inherit}
.auth-close:hover{border-color:var(--text-dim);color:var(--text);background:var(--border)}
.auth-card h2{font-size:1.35rem;font-weight:700;color:var(--text);text-align:center;margin-bottom:0.1rem;letter-spacing:-0.01em}
.auth-card .auth-sub{font-size:0.88rem;color:var(--text-muted);text-align:center;margin-bottom:1.5rem}
.auth-field{margin-bottom:0.85rem}
.auth-field label{font-size:0.82rem;letter-spacing:0.01em;color:var(--text-muted);display:block;margin-bottom:0.35rem;font-weight:600}
.auth-field input{width:100%;box-sizing:border-box;padding:0.75rem 0.85rem 0.75rem 2.6rem;font-size:0.95rem;border-radius:12px;border:1px solid var(--border);background:var(--surface2);color:var(--text);font-family:inherit;outline:none;transition:border-color 0.15s}
.auth-field input:focus{border-color:var(--border)}
.auth-field .auth-input-wrap{position:relative}
.auth-field .auth-input-icon{position:absolute;left:0.85rem;top:50%;transform:translateY(-50%);color:var(--text-muted);opacity:0.5;pointer-events:none;display:flex}
/* Auth submit — fixed neutral palette so the button looks the same
   for every visitor regardless of their saved accent (Ocean / Rose /
   Stone etc). Inverse style: dark-on-dark looks flat, so we flip to
   high-contrast neutral. Linear / Stripe / Vercel pattern. */
.auth-submit{width:100%;background:#1f1f23;border:1px solid #1f1f23;color:#fff;padding:0.9rem;border-radius:12px;cursor:pointer;font-size:0.95rem;font-weight:600;margin-top:0.3rem;transition:all 0.15s;font-family:inherit;letter-spacing:0.01em}
.auth-submit:hover{background:#2a2a30;border-color:#2a2a30;box-shadow:0 4px 16px rgba(0,0,0,0.18)}
.auth-submit:active{transform:scale(0.98)}
html.light .auth-submit{background:#1a1a1a;border-color:#1a1a1a;color:#fff}
html.light .auth-submit:hover{background:#2a2a2a;border-color:#2a2a2a;box-shadow:0 4px 16px rgba(0,0,0,0.12)}
.auth-toggle{text-align:center;margin-top:1rem;font-size:0.88rem;color:var(--text-muted)}
.auth-toggle a{color:var(--accent);cursor:pointer;text-decoration:none;font-weight:600}
.auth-toggle a:hover{text-decoration:underline}
.auth-divider{display:flex;align-items:center;gap:0.8rem;margin:1rem 0}
.auth-divider span{font-size:0.78rem;color:var(--text-muted);letter-spacing:0.01em;font-weight:500}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--border)}
.auth-google-btn{width:100%;padding:0.8rem;border-radius:12px;border:1px solid var(--border);background:none;color:var(--text);font-size:0.95rem;font-weight:500;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:0.6rem;transition:all 0.12s}
.auth-google-btn:hover{border-color:var(--accent);background:var(--accent-glow)}
.auth-google-btn:active{transform:scale(0.98)}
.auth-terms{margin-top:1rem;font-size:0.78rem;color:var(--text-muted);text-align:center;line-height:1.5}
.auth-terms a{color:var(--text-dim);text-decoration:underline}
.code-inputs{display:flex;gap:0.4rem;justify-content:center;margin:0.8rem 0}
.code-input{width:38px;height:44px;text-align:center;font-size:1.1rem;font-weight:600;background:var(--surface2);border:1px solid var(--border);border-radius:8px;color:var(--text);font-family:inherit;outline:none}
.code-input:focus{border-color:var(--border)}

.upgrade-wall{position:fixed;inset:0;background:rgba(0,0,0,0.7);display:none;align-items:flex-start;justify-content:center;z-index:90;backdrop-filter:blur(6px);overflow-y:auto;-webkit-overflow-scrolling:touch;padding:2rem 0}
.upgrade-wall.show{display:flex}
.upgrade-card{background:#1a1a1a;border:1px solid #2a2a2a;border-radius:16px;padding:2.2rem 2.5rem;width:960px;max-width:96vw;text-align:center;animation:cardIn 0.2s ease}
.upgrade-card h2{font-size:1.25rem;font-weight:600;color:#f5f5f5;margin-bottom:0.3rem}
.upgrade-card>p{font-size:0.9rem;color:#888;margin-bottom:1.5rem}
.billing-toggle{display:inline-flex;background:#111;border:1px solid #2a2a2a;border-radius:10px;padding:3px;margin-bottom:1.5rem}
.billing-toggle button{padding:0.4rem 1.2rem;border:none;border-radius:8px;font-size:0.85rem;font-weight:500;cursor:pointer;font-family:inherit;background:transparent;color:#888;transition:all 0.15s}
.billing-toggle button.active{background:#2a2a2a;color:#f5f5f5}
.upgrade-tiers{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-bottom:0.8rem;text-align:left;max-width:560px;margin-left:auto;margin-right:auto}
.upgrade-tier{background:#111;border:1px solid #2a2a2a;border-radius:14px;padding:1.8rem 1.5rem;display:flex;flex-direction:column;transition:border-color 0.15s}
.upgrade-tier:hover{border-color:#444}
.upgrade-tier.current{border-color:#555}
.upgrade-tier h3{font-size:1.5rem;font-weight:700;color:#f5f5f5;margin-bottom:0.6rem}
.upgrade-tier .tier-subtitle{font-size:0.88rem;color:#a8a8a8;margin-bottom:1.2rem;line-height:1.4}
.upgrade-tier .price{font-size:2.8rem;font-weight:700;color:#f5f5f5;margin-bottom:0.1rem;letter-spacing:-0.03em;line-height:1}
.upgrade-tier .price span{font-size:0.85rem;font-weight:400;color:#9a9a9a}
.upgrade-tier .price-sub{font-size:0.78rem;color:#9a9a9a;margin-bottom:1.2rem;min-height:1.2rem}
.upgrade-tier .tier-btn{width:100%;background:#2a2a2a;border:1px solid #333;color:#f5f5f5;padding:0.75rem;border-radius:10px;cursor:pointer;font-size:0.92rem;font-weight:500;margin-bottom:1.4rem;transition:all 0.12s;font-family:inherit}
.upgrade-tier .tier-btn:hover{background:#333;border-color:#444}
.upgrade-tier .tier-btn.primary{background:#f5f5f5;border-color:#f5f5f5;color:#111}
.upgrade-tier .tier-btn.primary:hover{background:#e0e0e0}
.upgrade-tier .tier-btn:disabled{opacity:0.4;cursor:default}
.upgrade-tier .tier-features{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:0.55rem}
.upgrade-tier .tier-features li{font-size:0.88rem;color:#ccc;line-height:1.5;display:flex;align-items:center;gap:0.6rem}
.upgrade-tier .tier-features li .tf-icon{width:18px;height:18px;flex-shrink:0;color:#a8a8a8;display:flex;align-items:center;justify-content:center}
.upgrade-tier .tier-features li .tf-icon svg{width:16px;height:16px}
.upgrade-tier .tier-features .section-label{font-weight:600;color:#b5b5b5;font-size:0.82rem}
.upgrade-tier .tier-features .section-label .tf-icon{display:none}
.upgrade-tier .savings-badge{font-size:0.75rem;color:#22c55e;font-weight:500}

.toast{position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%) translateY(8px);background:rgba(20,20,20,0.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.08);color:rgba(255,255,255,0.9);font-size:0.8rem;font-weight:500;letter-spacing:0.02em;padding:0.5rem 1rem;border-radius:10px;opacity:0;transition:opacity 0.25s,transform 0.25s cubic-bezier(0.16,1,0.3,1);pointer-events:none;z-index:10200;white-space:nowrap;box-shadow:0 8px 32px rgba(0,0,0,0.3)}
html.light .toast{background:rgba(255,255,255,0.9);border-color:rgba(0,0,0,0.08);color:rgba(0,0,0,0.8);box-shadow:0 8px 32px rgba(0,0,0,0.1)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}


.hamburger{display:none;width:36px;height:36px;border-radius:6px;background:none;border:none;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0;flex-shrink:0;margin-right:0.5rem}
.hamburger span{display:block;width:18px;height:2px;background:var(--text-dim);border-radius:1px;transition:all 0.2s}
.mobile-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:18;backdrop-filter:blur(2px)}
.mobile-overlay.show{display:block}


.create-layout,.analyzer-layout,.saved-content,.planner-gens,.settings-layout,.planner-cal-wrap{-webkit-overflow-scrolling:touch}

.folder-bar{display:flex;align-items:center;gap:0.4rem;margin-bottom:0.5rem;flex-wrap:wrap}
.folder-bar-select-wrap{display:flex;align-items:center;gap:0.35rem;flex:1;min-width:0}
.folder-bar-icon{flex-shrink:0;color:var(--text-dim)}
.folder-bar-icon svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.5}
.folder-bar select{flex:1;min-width:120px}
.folder-bar-btn{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:8px;background:var(--surface);border:1px solid var(--border);cursor:pointer;color:var(--text-dim);transition:all 0.1s;flex-shrink:0}
.folder-bar-btn:hover{border-color:var(--accent);color:var(--text)}
.folder-bar-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.5}
.folder-bar-new{display:flex;align-items:center;gap:0.35rem;padding:0.45rem 0.8rem;border-radius:8px;background:var(--surface);border:1px solid var(--border);cursor:pointer;color:var(--text-dim);font-size:1rem;font-weight:500;transition:all 0.1s;white-space:nowrap;font-family:inherit;flex-shrink:0}
.folder-bar-new:hover{border-color:var(--accent);color:var(--text)}


/* Composer row */

.save-url-btn{background:var(--accent);border:none;color:var(--accent-fg,#fff);border-radius:8px;padding:0.55rem 1.6rem;font-size:0.88rem;font-weight:600;cursor:pointer;font-family:inherit;display:flex;align-items:center;gap:0.4rem;transition:background 0.12s}
.save-url-btn:hover{background:var(--accent-dim)}
.save-btn-icon{display:none}
@media(max-width:800px){
  .hamburger{display:flex}
  /* Mobile spec (overhaul): 5-tab bottom navigation. */
  .mob-tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:24;background:var(--sidebar-bg);border-top:1px solid var(--border);padding:0.25rem 0.3rem calc(0.25rem + env(safe-area-inset-bottom));justify-content:space-around}
  .mob-tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;background:none;border:none;padding:0.3rem 0.2rem;cursor:pointer;font-family:inherit;color:var(--text-muted);border-radius:8px;min-height:48px}
  .mob-tab svg{width:22px;height:22px}
  .mob-tab span{font-size:0.62rem;font-weight:500;letter-spacing:0.01em}
  .mob-tab.active{color:var(--accent-text)}
  .main-content{padding-bottom:calc(52px + env(safe-area-inset-bottom))}
  .top-bar{min-height:50px}
  /* Subtle right-edge fade on horizontally scrollable option rows so it's
     obvious more choices exist offscreen. */
  .create-style-row,.create-style-chips,.create-ideas-cards,.mirror-chips-row,.mirror-patterns-chips,.saved-mobile-tabs{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent)}
  .toast{bottom:calc(4.6rem + env(safe-area-inset-bottom))}
  .nav-sidebar{position:fixed;left:-260px;width:250px;height:100dvh;z-index:25;transition:left 0.25s ease;box-shadow:none;background:var(--sidebar-bg) !important;display:flex;flex-direction:column;overflow:hidden}
  .nav-sidebar .nav-scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;min-height:0}
  .nav-sidebar .nav-bottom{flex-shrink:0;padding-bottom:calc(env(safe-area-inset-bottom) + 8px)}
  .nav-sidebar.mobile-open{left:0;box-shadow:4px 0 20px rgba(0,0,0,0.3)}
  /* A closed drawer is off screen; keep it out of the tab order too (audit:
     hidden background focus path). Hides after the slide-out finishes. */
  .nav-sidebar:not(.mobile-open){visibility:hidden;transition:left 0.25s ease,visibility 0s linear 0.25s}
  .nav-collapse-btn{display:none}
  .main-content{width:100%;background:var(--bg)}
  .page-view{background:var(--bg) !important}
  body{padding-top:env(safe-area-inset-top)}
  .top-bar{padding:0.55rem 1rem;gap:0;flex-wrap:nowrap;justify-content:flex-start !important}
  #createTopBar{border-bottom:none}
  .create-tabs-bar{padding:0.1rem 0.5rem 0.55rem;border-top:none}
  .create-tabs-bar .mode-switch{width:100%;margin:0;border-radius:0;border:none;background:transparent;padding:0.2rem 0 0;gap:0.25rem;justify-content:center;overflow:visible}
  .create-layout{padding:0.8rem 1.25rem calc(5.5rem + env(safe-area-inset-bottom));background:var(--bg) !important}
  .create-conversation{padding:0.8rem 1.25rem 1.2rem}
  .create-composer{padding:0.4rem 1.25rem calc(1.2rem + env(safe-area-inset-bottom))}
  .config-panel{max-width:100%;padding:0}
  .output-area,.carousel-output{max-width:100%;padding:0}
  .output-area>div,.carousel-output>div{max-width:100%}
  .style-grid{gap:1px}
  .post-card{border-radius:8px}
  .saved-body{grid-template-columns:1fr}
  textarea:not(.mirror-textarea){padding:0.75rem 1rem;min-height:190px !important;font-size:16px !important;background:var(--surface) !important}
  .mirror-textarea{font-size:16px !important}
  input,select{font-size:16px !important}
  /* Static generate btn → circle on mobile */
  .generate-btn{width:62px !important;height:62px !important;min-width:unset !important;border-radius:50% !important;padding:0 !important;margin-top:1rem;font-size:1.8rem;display:flex !important;align-items:center !important;justify-content:center !important}
  .generate-btn .fab-star-static{font-size:2.5rem;line-height:1;color:#fff;display:flex;align-items:center;justify-content:center;transform:translateY(-1px)}
  .generate-btn .fab-text-static{display:none}
  .top-bar-title{font-size:1.05rem}
  .saved-folders{display:none}
  .saved-mobile-tabs{display:flex}
  .saved-folder-header{padding:0.3rem 0}
  .save-url-btn{position:fixed;bottom:calc(1.8rem + 52px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:66px;height:66px;border-radius:50%;padding:0;justify-content:center;z-index:15;box-shadow:0 4px 20px rgba(0,0,0,0.3)}
  .save-btn-text{display:none}
  .save-btn-icon{display:flex;align-items:center;justify-content:center}
  .saved-content{padding:0.8rem 1rem calc(6rem + env(safe-area-inset-bottom))}
  .planner-cal-wrap{padding:0.4rem 0.6rem}
  .planner-top{padding:0.6rem 1rem;flex-wrap:wrap;gap:0.4rem}
  /* The fixed bottom bar hid the last calendar rows, the queue tabs and the
     queue actions on short viewports (200% zoom). The planner scrolls as one
     page here, padded by the measured bar height (--planner-bar-h, set by
     _plannerFitBottomBar) so everything can be scrolled above the bar. */
  .planner-layout{overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:var(--planner-bar-h,calc(57px + env(safe-area-inset-bottom)))}
  .planner-gens{flex:none;overflow:visible;padding:0.6rem 1rem 1rem}
  .cal-day{padding:0.2rem;min-height:56px}
  .cal-day-add{display:none !important}
  /* nav-account mobile spacing handled above */
  .settings-layout{padding:1rem 1.25rem calc(4rem + env(safe-area-inset-bottom));max-width:100%;background:var(--bg) !important}
  .pl-layout{padding:0.9rem 1.25rem calc(4rem + env(safe-area-inset-bottom))}
  .templates-grid-wrap{padding-bottom:calc(3rem + env(safe-area-inset-bottom))}
  .settings-list{display:flex;flex-direction:column;gap:1px}
  .upgrade-tiers{grid-template-columns:1fr}
  .upgrade-card{padding:1.2rem}
  .auth-card{padding:1.4rem 1.5rem}
  .empty-state{padding:1.5rem}
  .save-url-bar{flex-wrap:wrap}
  .save-url-bar input,.save-url-bar select{width:100%}
  .saved-content,.planner-gens{background:var(--bg) !important}
  .output-area{background:var(--bg) !important}
  .nav-item{opacity:0.7}
  .nav-item.active{opacity:1}
  .nav-item.nav-item-soon,.nav-item.nav-item-soon:hover{opacity:0.45}
  .nav-item svg{opacity:0.85}
  .nav-item.active svg{opacity:1}
}
html.light .nav-item svg{stroke:currentColor}
html.light .nav-item{color:var(--text);opacity:0.7}
html.light .nav-item.nav-item-soon,html.light .nav-item.nav-item-soon:hover{opacity:0.45;background:none}
html.light .nav-item.active{color:var(--text);opacity:1}
html.light .nav-section-label{color:var(--text-muted)}


/* ── Templates Page ── */
.templates-page{display:flex;flex-direction:column;height:100%;overflow:hidden}
.templates-header{padding:1.2rem 1.4rem 0.6rem;flex-shrink:0}
.templates-header h2{font-size:1.15rem;font-weight:600;margin:0 0 0.2rem}
.templates-header p{font-size:0.82rem;color:var(--text-muted);margin:0}
.templates-tabs{display:flex;gap:0.4rem;padding:0.6rem 1.4rem;flex-shrink:0;border-bottom:1px solid var(--border)}
.templates-tab{background:none;border:none;font-family:inherit;font-size:0.88rem;font-weight:500;color:var(--text-muted);cursor:pointer;padding:0.35rem 0.9rem;border-radius:2rem;transition:all 0.15s;-webkit-tap-highlight-color:transparent}
.templates-tab.active{background:var(--accent);color:var(--accent-fg,#fff)}
.templates-grid-wrap{flex:1;overflow-y:auto;padding:1rem 1.2rem 2rem}
.templates-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media(max-width:768px){.templates-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.templates-grid{grid-template-columns:repeat(2,1fr);gap:0.7rem}}
.tpl-card{border-radius:12px;overflow:hidden;cursor:pointer;position:relative;transition:transform 0.15s,box-shadow 0.15s;background:var(--surface)}
.tpl-card:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,0.15)}
.sg-hist-card{position:relative;background:none;border:1px solid var(--border);border-radius:12px;overflow:hidden;cursor:pointer;transition:transform 0.15s,box-shadow 0.15s,border-color 0.15s}
.sg-hist-card:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,0.15);border-color:var(--border-hover)}
/* Studio chosen-states are NEUTRAL (owner 2026-09-13): the picked
   template/style/size reads as charcoal/ink, never the personal accent. */
#page-design .create-mode-chip.active{background:var(--studio-sel);border-color:var(--studio-sel);color:var(--bg);box-shadow:none}
#page-design .create-style-chip.active,#page-design .create-length-chip.active{background:color-mix(in srgb, var(--studio-sel) 8%, transparent);border-color:var(--studio-sel);color:var(--text);font-weight:600}
.tpl-thumb-placeholder{width:100%;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--surface2) 0%,var(--surface) 100%);font-size:1.6rem}
.tpl-thumb{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.tpl-card.locked .tpl-thumb,.tpl-card.locked .tpl-thumb-placeholder{filter:blur(3px) grayscale(0.4);pointer-events:none;user-select:none}
.tpl-lock-overlay{position:absolute;top:0;left:0;right:0;padding-top:calc(50% - 28px);display:flex;flex-direction:column;align-items:center;gap:0.4rem}
.tpl-lock-icon{width:36px;height:36px;background:rgba(0,0,0,0.6);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.tpl-info{padding:0.55rem 0.65rem 0.6rem}
.tpl-name{font-size:0.75rem;font-weight:500;color:var(--text);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tpl-hover-btn{position:absolute;bottom:0.6rem;left:50%;transform:translateX(-50%) translateY(6px);background:var(--accent);color:var(--accent-fg,#fff);border:none;border-radius:2rem;padding:0.4rem 1.1rem;font-size:0.78rem;font-weight:600;font-family:inherit;cursor:pointer;opacity:0;transition:opacity 0.15s,transform 0.15s;white-space:nowrap;pointer-events:none}
.tpl-card:hover .tpl-hover-btn{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
@media(max-width:768px){.tpl-hover-btn{display:none}}
/* LANDING PAGE */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@0,600;0,700;1,600;1,700&display=swap');
/* Playpen Sans (owner upload 2026-10-02, OFL): the Nostalgia carousel
   lettering, always uppercase. Self-hosted so exports never depend on a
   third-party font request; the variable file covers weights 100-900. */
/* Uthmanic Hafs (owner upload 2026-10-31, KFGQPC Ver13): a Brand Kit font
   OPTION only, never a default. Self-hosted; the file loads only when a
   member picks it. */
@font-face{font-family:'Uthmanic Hafs';src:url('/fonts/UthmanicHafs1-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Uthmanic Hafs';src:url('/fonts/UthmanicHafs1-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Playpen Sans';src:url('/fonts/PlaypenSans-VariableFont_wght.ttf') format('truetype');font-weight:100 900;font-style:normal;font-display:swap}
.landing-page{display:none;min-height:100dvh;background:#faf9f7;color:#1a1a1a;font-family:'Outfit',-apple-system,BlinkMacSystemFont,sans-serif;overflow-x:hidden;flex-direction:column;--land-accent:#0071E3;--land-accent-glow:rgba(0,113,227,0.08);--land-muted:rgba(30,30,30,0.62);--land-subtle:rgba(30,30,30,0.05);--land-border:rgba(30,30,30,0.16)}
.landing-page.show{display:flex}
.landing-nav{position:sticky;top:0;z-index:50;background:rgba(250,249,247,0.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--land-border)}
.landing-nav-inner{max-width:1120px;margin:0 auto;padding:0.9rem 2rem;display:flex;align-items:center;justify-content:space-between}
.landing-logo{display:flex;align-items:center;gap:0.5rem;font-size:1.1rem;font-weight:600;letter-spacing:-0.01em;color:#fff}
.landing-cta-sm{padding:0.45rem 1.3rem;border-radius:2rem;border:1px solid var(--land-accent);background:transparent;color:var(--land-accent);font-size:0.8rem;font-weight:600;cursor:pointer;font-family:inherit;transition:all 0.2s;letter-spacing:0.02em}
.landing-cta-sm:hover{background:var(--land-accent);color:#fff}

/* Hero */
.landing-hero{padding:8rem 2rem 6rem;text-align:center;position:relative}
.landing-hero::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:800px;height:800px;background:radial-gradient(circle,rgba(0,113,227,0.05) 0%,transparent 70%);pointer-events:none}
.landing-hero-inner{max-width:780px;margin:0 auto;position:relative;z-index:1}
.landing-badge{display:inline-block;padding:0.35rem 1rem;border-radius:2rem;border:1px solid var(--land-border);font-size:0.68rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--land-muted);font-weight:500;margin-bottom:2rem}
.landing-h1{font-family:'Playfair Display',Georgia,serif;font-size:clamp(2.6rem,7vw,4.5rem);font-weight:700;line-height:1.1;letter-spacing:-0.03em;margin-bottom:1.5rem;color:#1a1a1a}
.landing-h1 em{font-style:italic;color:var(--land-accent)}
.landing-hero-sub{font-size:clamp(1rem,2vw,1.15rem);color:var(--land-muted);line-height:1.7;max-width:520px;margin:0 auto 2.8rem;font-weight:300}
.landing-hero-actions{display:flex;gap:0.8rem;justify-content:center;flex-wrap:wrap}
.landing-cta-lg{padding:0.85rem 2.4rem;border-radius:2rem;border:none;background:var(--land-accent);color:#fff;font-size:0.95rem;font-weight:600;cursor:pointer;font-family:inherit;transition:all 0.2s;letter-spacing:0.02em}
.landing-cta-lg:hover{opacity:0.88;transform:translateY(-1px);box-shadow:0 12px 32px rgba(0,113,227,0.2)}
.landing-cta-ghost{padding:0.85rem 2.4rem;border-radius:2rem;border:1px solid var(--land-border);background:none;color:var(--land-muted);font-size:0.95rem;font-weight:400;cursor:pointer;font-family:inherit;transition:all 0.2s}
.landing-cta-ghost:hover{border-color:rgba(240,237,232,0.2);color:#fff}

/* Section headings */
.landing-section-label{font-size:0.65rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--land-accent);font-weight:600;margin-bottom:1rem;text-align:center}
.landing-section-h2{font-family:'Playfair Display',Georgia,serif;font-size:clamp(1.8rem,4vw,2.8rem);font-weight:700;line-height:1.15;letter-spacing:-0.02em;color:#1a1a1a;text-align:center;margin-bottom:1rem}
.landing-section-sub{font-size:1rem;color:var(--land-muted);text-align:center;max-width:560px;margin:0 auto 3.5rem;line-height:1.65;font-weight:300}

/* Problem section */
.landing-problem{padding:5rem 2rem 5rem;position:relative}
.landing-problem-inner{max-width:720px;margin:0 auto;text-align:center}
.landing-problem-list{display:flex;flex-direction:column;gap:0.7rem;margin:2rem auto 2.5rem;max-width:420px;text-align:left}
.landing-problem-list div{font-size:0.92rem;color:rgba(30,30,30,0.5);line-height:1.5;padding-left:1.4rem;position:relative}
.landing-problem-list div::before{content:'×';position:absolute;left:0;color:rgba(200,100,100,0.5);font-weight:600}
.landing-reframe{font-family:'Playfair Display',Georgia,serif;font-size:clamp(1.3rem,3vw,1.8rem);color:#1a1a1a;line-height:1.3;margin-top:2rem;font-weight:600}

/* Pillars */
.landing-pillars{padding:5rem 2rem;background:rgba(139,115,85,0.04);border-top:1px solid var(--land-border);border-bottom:1px solid var(--land-border)}
.landing-pillars-inner{max-width:1080px;margin:0 auto}
.landing-pillars-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
@media(max-width:768px){.landing-pillars-grid{grid-template-columns:1fr;max-width:480px;margin:0 auto}}
.landing-pillar{padding:2.2rem 1.8rem;background:#fff;border:1px solid var(--land-border);border-radius:16px;transition:border-color 0.3s}
.landing-pillar:hover{border-color:rgba(139,115,85,0.25)}
.landing-pillar-num{font-size:0.62rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--land-accent);font-weight:600;margin-bottom:0.8rem}
.landing-pillar h3{font-size:1.1rem;font-weight:600;color:#1a1a1a;margin-bottom:0.6rem;line-height:1.3}
.landing-pillar p{font-size:0.85rem;color:var(--land-muted);line-height:1.6}

/* Demo */
.landing-demo{padding:5rem 2rem}
/* Top-of-page demo: tighter top padding so it sits high in the fold,
   slightly heavier card shadow so it reads as the primary CTA. */
.landing-demo.landing-demo-top{padding:2.5rem 2rem 3rem}
.landing-demo.landing-demo-top .landing-demo-box{box-shadow:0 8px 32px rgba(30,30,30,0.06)}
.landing-demo-inner{max-width:800px;margin:0 auto}
.landing-demo-box{background:#fff;border:1px solid var(--land-border);border-radius:16px;padding:2.5rem 2rem;margin-top:2rem;box-shadow:0 2px 12px rgba(0,0,0,0.04)}
@keyframes demoBlink{50%{opacity:0}}
@keyframes demoDot{0%,80%,100%{transform:scale(0.6);opacity:0.4}40%{transform:scale(1);opacity:1}}
/* Landing-page mirror of the editor's stream-dots trailing-dots
   animation. Lives on the landing-page light theme so it overrides
   the dark stream-dots used in-app. */
.land-stream-dots::after{content:'';animation:dotPulse 1.4s infinite steps(4,end)}
.landing-demo-input{font-size:0.88rem;color:var(--land-muted);margin-bottom:1.5rem;font-style:italic}
.landing-demo-input span{color:var(--land-accent);font-style:normal;font-weight:500}
.landing-demo-output{display:flex;flex-direction:column;gap:0.5rem}
.landing-demo-output div{font-size:0.82rem;color:rgba(240,237,232,0.55);padding-left:1.2rem;position:relative;line-height:1.5}
.landing-demo-output div::before{content:'✓';position:absolute;left:0;color:var(--land-accent);font-size:0.7rem}
.landing-demo-tag{display:inline-block;margin-top:1.5rem;padding:0.25rem 0.7rem;border-radius:2rem;background:var(--land-accent-glow);font-size:0.7rem;letter-spacing:0.06em;color:var(--land-accent);font-weight:500}
.demo-style-btn{padding:0.45rem 1rem;border-radius:2rem;border:1px solid rgba(30,30,30,0.18);background:#fff;color:rgba(30,30,30,0.78);font-size:0.82rem;font-weight:500;cursor:pointer;font-family:inherit;transition:all 0.15s;letter-spacing:0.02em}
.demo-style-btn:hover{border-color:rgba(30,30,30,0.32);color:#1a1a1a;background:#fafafa}
.demo-style-btn.active{border-color:var(--land-accent);background:var(--land-accent-glow);color:#005BB5;font-weight:600}

/* Transformation */
.landing-transform{padding:5rem 2rem;background:rgba(139,115,85,0.03);border-top:1px solid var(--land-border);border-bottom:1px solid var(--land-border)}
.landing-transform-inner{max-width:900px;margin:0 auto}
.landing-transform-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-top:2rem}
@media(max-width:600px){.landing-transform-grid{grid-template-columns:1fr}}
.landing-transform-col{padding:2rem 1.8rem;border-radius:16px;border:1px solid var(--land-border)}
.landing-transform-col.before{background:rgba(200,100,100,0.03)}
.landing-transform-col.after{background:rgba(139,115,85,0.05);border-color:rgba(139,115,85,0.2)}
.landing-transform-col h4{font-size:0.65rem;letter-spacing:0.15em;text-transform:uppercase;font-weight:600;margin-bottom:1rem}
.landing-transform-col.before h4{color:rgba(200,100,100,0.6)}
.landing-transform-col.after h4{color:var(--land-accent)}
.landing-transform-col ul{list-style:none}
.landing-transform-col ul li{font-size:0.88rem;color:var(--land-muted);padding:0.35rem 0;line-height:1.4}

/* Features */
.landing-features{padding:5rem 2rem}
.landing-features-inner{max-width:1080px;margin:0 auto}
.landing-features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
@media(max-width:768px){.landing-features-grid{grid-template-columns:1fr}}
.landing-feature{padding:1.8rem 1.5rem;background:#fff;border:1px solid var(--land-border);border-radius:14px;transition:border-color 0.25s}
.landing-feature:hover{border-color:rgba(139,115,85,0.2)}
.landing-feature-icon{width:40px;height:40px;border-radius:10px;background:var(--land-accent-glow);color:var(--land-accent);display:flex;align-items:center;justify-content:center;margin-bottom:0.9rem}
.landing-feature h3{font-size:0.95rem;font-weight:600;color:#1a1a1a;margin-bottom:0.35rem}
.landing-feature p{font-size:0.82rem;color:var(--land-muted);line-height:1.55}

/* Pricing */
.landing-pricing{padding:5rem 2rem}
.landing-pricing-inner{max-width:940px;margin:0 auto}
.landing-pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;align-items:start}
@media(max-width:900px){.landing-pricing-grid{grid-template-columns:1fr;max-width:400px;margin:0 auto}}
.landing-price-card{padding:2.2rem 1.6rem;background:rgba(240,237,232,0.02);border:1px solid var(--land-border);border-radius:16px;position:relative;transition:all 0.25s}
.landing-price-card.featured{border-color:rgba(139,115,85,0.35);background:rgba(139,115,85,0.06)}
.landing-price-badge{position:absolute;top:-0.6rem;left:50%;transform:translateX(-50%);padding:0.2rem 0.9rem;border-radius:2rem;background:var(--land-accent);color:#fff;font-size:0.6rem;letter-spacing:0.08em;text-transform:uppercase;font-weight:600;white-space:nowrap}
.landing-price-name{font-size:0.85rem;font-weight:500;color:var(--land-muted);margin-bottom:0.3rem}
.landing-price-amount{font-size:2.4rem;font-weight:700;color:#fff;line-height:1.1}
.landing-price-amount span{font-size:0.85rem;font-weight:400;color:var(--land-muted)}
.landing-price-period{font-size:0.72rem;color:rgba(240,237,232,0.25);margin-top:0.15rem;margin-bottom:1.3rem}
.landing-price-features{list-style:none;margin-bottom:0.5rem;margin-top:1rem}
.landing-price-features li{font-size:0.82rem;color:var(--land-muted);padding:0.3rem 0;padding-left:1.2rem;position:relative}
.landing-price-features li::before{content:'✓';position:absolute;left:0;color:var(--land-accent);font-size:0.72rem;font-weight:700}
.landing-price-btn{width:100%;padding:0.65rem;border-radius:10px;border:1px solid var(--land-border);background:none;color:var(--land-muted);font-size:0.85rem;font-weight:600;cursor:pointer;font-family:inherit;transition:all 0.2s}
.landing-price-btn:hover{border-color:rgba(240,237,232,0.2);color:#fff}
.landing-price-btn.accent{border:none;background:var(--land-accent);color:#fff}
.landing-price-btn.accent:hover{opacity:0.88}

/* CTA */
.landing-final-cta{padding:6rem 2rem;text-align:center;position:relative}
.landing-final-cta::before{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:600px;height:400px;background:radial-gradient(circle,rgba(139,115,85,0.06) 0%,transparent 70%);pointer-events:none}

/* Footer */
.landing-footer{padding:2.5rem 2rem;border-top:1px solid var(--land-border)}
.landing-footer-inner{max-width:1120px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem}
.landing-footer-logo{display:flex;align-items:center;gap:0.4rem;font-size:0.88rem;font-weight:600;color:rgba(30,30,30,0.4)}
.landing-footer-links{display:flex;gap:1.5rem}
.landing-footer-links a{font-size:0.75rem;color:rgba(30,30,30,0.35);text-decoration:none;transition:color 0.15s}
.landing-footer-links a:hover{color:rgba(30,30,30,0.6)}
.landing-footer-copy{font-size:0.68rem;color:rgba(30,30,30,0.2)}

/* Animations */
@keyframes land-fade-up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
.land-animate{opacity:0;animation:land-fade-up 0.7s ease forwards}
.land-d1{animation-delay:0.1s}.land-d2{animation-delay:0.2s}.land-d3{animation-delay:0.3s}.land-d4{animation-delay:0.45s}

@media(max-width:600px){.landing-hero{padding:5rem 1.5rem 4rem}.landing-problem,.landing-pillars,.landing-demo,.landing-transform,.landing-features,.landing-pricing,.landing-final-cta{padding:3.5rem 1.5rem}.landing-footer-inner{flex-direction:column;align-items:center;text-align:center}}
/* All lowercase (Studio Aa, owner 2026-10-10): a look on the slide, never an edit to the words. The tweet name and handle keep their case; the Woodcut author line stays in caps. */
[data-ds-lower],[data-ds-lower] *{text-transform:lowercase!important}
[data-ds-lower] [data-tw-edit]{text-transform:none!important}
[data-ds-lower] [data-ds-keepcase="upper"]{text-transform:uppercase!important}
/* THE BRAND KIT ON A SLIDE (owner 2026-10-20): the root carries the kit as variables (data-ds-brand, set by _bkMark); the ground, the two type roles and the muted lines follow it, so the preview and every export read the same. */
[data-ds-brand="1"]{background:var(--bk-bg)!important;background-image:none!important;color:var(--bk-ink)!important}
[data-ds-brand="1"] [data-dsblk="head"],[data-ds-brand="1"] [data-dsblk="head"] span,[data-ds-brand="1"] [data-dsblk="head"] div,[data-ds-brand="1"] [data-dsblk="gtitle"],[data-ds-brand="1"] [data-dsblk="gtitle"] *{font-family:var(--bk-head)!important;color:var(--bk-ink)!important}
[data-ds-brand="1"] [data-dsblk="body"],[data-ds-brand="1"] [data-dsblk="body"] *{font-family:var(--bk-body)!important;color:var(--bk-ink)!important}
[data-ds-brand="1"] [data-dsblk="wm"],[data-ds-brand="1"] [data-tw-edit="handle"]{color:var(--bk-muted)!important}
[data-ds-brand="1"] [data-dsblk="head"] > div:first-child{background:var(--bk-accent)!important;color:var(--bk-bg)!important}
[data-ds-brand="1"] [data-dsblk="body"] b,[data-ds-brand="1"] [data-dsblk="body"] strong{color:var(--bk-accent-text)!important}
/* The fonts alone (owner 2026-11-02): a picture on paper keeps its ground and its colours; only a paper style takes the accent on bold words. */
[data-ds-brand="type"] [data-dsblk="head"],[data-ds-brand="type"] [data-dsblk="head"] span,[data-ds-brand="type"] [data-dsblk="gtitle"],[data-ds-brand="type"] [data-dsblk="gtitle"] *{font-family:var(--bk-head)!important}
[data-ds-brand="type"] [data-dsblk="body"],[data-ds-brand="type"] [data-dsblk="body"] *{font-family:var(--bk-body)!important}
[data-ds-brand="type"][data-ds-paper] [data-dsblk="body"] b,[data-ds-brand="type"][data-ds-paper] [data-dsblk="body"] strong{color:var(--bk-accent-text)!important}

/* The research report's findings open in place; no browser triangle. */
.kb-ev-item>summary::-webkit-details-marker{display:none}
.kb-ev-item>summary::marker{content:''}
.kb-ev-item[open]>summary{margin-bottom:0.2rem}

/* Roadmap: the working steps lead; supporting content follows the journey. */
.kb-roadmap-scroll{height:100%;overflow-y:auto;scrollbar-gutter:stable}
.kb-roadmap-wrap{max-width:880px;margin:0 auto;padding:clamp(1.25rem,4vw,3rem) clamp(1rem,3vw,2rem) calc(3rem + env(safe-area-inset-bottom));box-sizing:border-box}
.kb-roadmap-tools{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:2rem}
.kb-roadmap-kicker{font-size:.72rem;font-weight:600;color:var(--text-muted);letter-spacing:.06em;text-transform:uppercase;margin-bottom:.35rem}
.kb-roadmap-title-row{position:relative;display:flex;align-items:center;gap:.25rem;min-width:0}
.kb-roadmap-name{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0 -.3rem;padding:.1rem .3rem;border:0;border-radius:8px;background:none;color:var(--text);font-family:inherit;font-size:1.7rem;font-weight:650;line-height:1.25;text-align:start;cursor:text}
.kb-roadmap-name:hover{background:var(--accent-glow)}
.kb-roadmap-name.is-unnamed{color:var(--text-muted);font-weight:500}
.kb-roadmap-name-input{width:100%;max-width:520px;min-width:0;margin:0 -.3rem;padding:.1rem .3rem;border:0;border-bottom:2px solid var(--accent);border-radius:0;background:none;color:var(--text);font-family:inherit;font-size:1.7rem;font-weight:650;line-height:1.25;outline:none}
.kb-roadmap-name-input::placeholder{color:var(--text-muted);font-weight:500}
.kb-roadmap-switch{flex-shrink:0;width:32px;height:32px;border:0;border-radius:50%;background:none;color:var(--text-muted);display:flex;align-items:center;justify-content:center;cursor:pointer}
.kb-roadmap-switch:hover,.kb-roadmap-switch[aria-expanded="true"]{background:var(--accent-glow);color:var(--text)}
.kb-roadmap-menu{position:absolute;top:calc(100% + 6px);left:0;z-index:60;min-width:240px;max-width:min(360px,calc(100vw - 2rem));padding:.4rem;background:var(--surface);border:1px solid var(--border);border-radius:13px;box-shadow:0 12px 40px rgba(0,0,0,.25)}
.kb-roadmap-menu button{display:flex;justify-content:space-between;align-items:center;gap:.8rem;width:100%;padding:.55rem .7rem;border:0;border-radius:9px;background:none;color:var(--text);font-family:inherit;font-size:.87rem;font-weight:500;text-align:start;cursor:pointer}
.kb-roadmap-menu button span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kb-roadmap-menu button:hover{background:var(--accent-glow)}
.kb-roadmap-menu button.on{background:var(--accent-glow);font-weight:600}
.kb-roadmap-menu button.on span:last-child{color:var(--accent-text)}
.kb-roadmap-menu button.quiet{color:var(--text-muted);font-size:.84rem}
.kb-roadmap-menu hr{border:0;border-top:1px solid var(--border);margin:.3rem .4rem}
.kb-roadmap-summary{font-size:.82rem;color:var(--text-muted);margin-top:.85rem}
.kb-roadmap-progress{display:block;width:100%;height:5px;margin-top:.75rem;border:0;border-radius:99px;overflow:hidden;background:var(--border);accent-color:var(--accent)}
.kb-roadmap-progress::-webkit-progress-bar{background:var(--border)}
.kb-roadmap-progress::-webkit-progress-value{background:var(--accent);border-radius:99px}
.kb-roadmap-progress::-moz-progress-bar{background:var(--accent)}
@media(max-width:600px){.kb-roadmap-tools{gap:.75rem;margin-bottom:1.5rem}.kb-roadmap-tools button{min-height:36px}.kb-roadmap-name,.kb-roadmap-name-input{font-size:1.45rem}}
/* Keep the existing empty strategy conversation and its input together. */
#kbChatCol.kb-empty-conversation .kbcc-main{justify-content:center;padding-bottom:clamp(1rem,8vh,5rem)}
#kbChatCol.kb-empty-conversation #kbScroll{flex:0 1 auto!important}
@media(max-height:640px){#kbChatCol.kb-empty-conversation .kbcc-main{justify-content:flex-start;padding-bottom:0}#kbChatCol.kb-empty-conversation #kbScroll{flex:1!important}}
.kb-qa-check:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* Presence → brand → posts → growth → resource → selling. */
.kb-roadmap-tools .kb-txt{border:0;background:none;padding:0;color:var(--text-muted);font:inherit;font-size:.8rem;cursor:pointer}
/* The Roadmap, premium and legible (owner 2026-11-01: "it seems to all blend"): the current stage and its step
   are lit in the accent, done stages settle back, every step is a card row that answers the pointer, the
   Continue card leads. Native details/summary, buttons and checkbox semantics stay as they were. */
.kb-roadmap-summary{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;font-size:.82rem;font-weight:600;color:var(--text);margin-top:1rem}
.kb-roadmap-summary>span:last-child{font-weight:500;color:var(--text-muted);font-variant-numeric:tabular-nums}
.kb-roadmap-progress{height:6px}
.kb-roadmap-intro{color:var(--text-dim);font-size:1rem;line-height:1.6;max-width:640px;margin:1.25rem 0 0}
.kb-roadmap-guidance{color:var(--text-muted);font-size:.8rem;line-height:1.6;margin:1.6rem 0 .6rem}
.kb-roadmap-next{display:flex;justify-content:space-between;align-items:center;gap:1.25rem;margin-top:1.4rem;padding:1.4rem 1.5rem;border-radius:18px;border-color:var(--accent-text);background:linear-gradient(135deg,var(--accent-glow),transparent 62%),var(--surface);box-shadow:0 0 0 3px var(--accent-glow),0 18px 40px -28px rgba(0,0,0,.7)}
.kb-roadmap-next>div{min-width:0;flex:1}
.kb-roadmap-next .k-btn{flex-shrink:0;min-height:42px;padding:0 1.3rem;border-radius:999px;font-weight:600}
.kb-roadmap-eyebrow{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text);font-weight:700;margin-bottom:.45rem}
.kb-roadmap-next-title{font-size:1.25rem;font-weight:650;letter-spacing:-.01em;color:var(--text);margin-bottom:.35rem}
.kb-roadmap-stage{position:relative;padding:0;border:1px solid var(--border);border-radius:18px;background:var(--surface);margin-top:.9rem;overflow:hidden;transition:border-color .2s,box-shadow .2s,opacity .2s}
.kb-roadmap-stage.is-current{border-color:var(--accent-text);box-shadow:0 0 0 3px var(--accent-glow),0 16px 40px -30px rgba(0,0,0,.7)}
.kb-roadmap-stage.is-done{opacity:.68}
.kb-roadmap-stage.is-done:hover,.kb-roadmap-stage.is-done[open]{opacity:1}
.kb-roadmap-stage>summary{display:flex;align-items:center;gap:1rem;cursor:pointer;list-style:none;padding:1.15rem 1.3rem;transition:background .15s}
.kb-roadmap-stage>summary:hover{background:var(--surface2)}
.kb-roadmap-stage>summary::-webkit-details-marker{display:none}
.kb-roadmap-stage>summary:after{content:'';width:9px;height:9px;flex-shrink:0;margin:0 .35rem 0 .2rem;border-right:1.6px solid var(--text-muted);border-bottom:1.6px solid var(--text-muted);transform:translateY(-3px) rotate(45deg);transition:transform .2s}
.kb-roadmap-stage[open]>summary:after{transform:translateY(2px) rotate(-135deg)}
.kb-roadmap-stage.kb-stage-closing>summary:after{transform:translateY(-3px) rotate(45deg)}
.kb-roadmap-stage-number{display:flex;align-items:center;justify-content:center;width:36px;height:36px;flex-shrink:0;border:1px solid var(--border);border-radius:50%;font-size:.82rem;font-weight:600;color:var(--text-muted);background:var(--surface2);font-variant-numeric:tabular-nums}
.kb-roadmap-stage.is-current .kb-roadmap-stage-number{background:var(--accent);border-color:var(--accent);color:var(--accent-fg,#fff)}
.kb-roadmap-stage.is-done .kb-roadmap-stage-number{background:var(--accent-glow);border-color:transparent;color:var(--accent-text)}
.kb-roadmap-stage-copy{flex:1;min-width:0;display:block}
.kb-roadmap-stage-title{display:block;font-size:1.05rem;font-weight:650;letter-spacing:-.01em;color:var(--text);margin-bottom:.25rem}
.kb-roadmap-step-note{display:block;color:var(--text-muted);font-size:.8rem;line-height:1.6;overflow-wrap:anywhere}
.kb-roadmap-stage-count{font-size:.7rem;font-weight:600;color:var(--text-muted);white-space:nowrap;padding:.28rem .65rem;border:1px solid var(--border);border-radius:999px;background:var(--surface2);font-variant-numeric:tabular-nums}
.kb-roadmap-stage.is-done .kb-roadmap-stage-count{color:var(--accent-text);border-color:transparent;background:var(--accent-glow)}
.kb-roadmap-stage.is-current .kb-roadmap-stage-count{color:var(--accent-text);border-color:var(--accent-glow)}
.kb-roadmap-stage-body{padding:.2rem 1rem 1rem}
.kb-roadmap-stage-reset{padding:.6rem .9rem 0;text-align:end}.kb-roadmap-stage-reset .kb-txt{background:none;border:0;padding:0;font:inherit;font-size:.76rem;color:var(--text-muted);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.kb-roadmap-line{display:flex;align-items:center;gap:.5rem;border-top:1px solid var(--border-subtle,var(--border))}
.kb-roadmap-line:first-child{border-top:0}
.kb-roadmap-line.is-done .kb-roadmap-step-title{color:var(--text-dim);font-weight:500}
.kb-roadmap-stage .kb-roadmap-step{border:0;background:none;display:flex;align-items:center;gap:.9rem;flex:1;min-width:0;text-align:start;font-family:inherit;cursor:pointer;border-radius:14px;min-height:72px;padding:.85rem .7rem!important;color:var(--text);transition:background .15s}
.kb-roadmap-stage .kb-roadmap-step:hover{background:var(--surface2)}
.kb-roadmap-step-copy{display:block;flex:1;min-width:0}
.kb-roadmap-step-title{display:block;font-size:.92rem;font-weight:600;margin-bottom:.2rem}
.kb-roadmap-dot{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:24px;padding:0 .45rem;flex-shrink:0;border:1px solid var(--border);border-radius:999px;background:var(--surface2);font-size:.66rem;font-weight:600;color:var(--text-muted);font-variant-numeric:tabular-nums}
.kb-roadmap-line.is-done .kb-roadmap-dot{background:var(--accent-glow);border-color:transparent;color:var(--accent-text)}
.kb-roadmap-arrow{color:var(--text-muted);font-size:1rem;transition:transform .15s,color .15s}
.kb-roadmap-step:hover .kb-roadmap-arrow{transform:translateX(3px);color:var(--text)}
.kb-roadmap-step[aria-current=step]{background:var(--accent-glow);box-shadow:inset 3px 0 0 var(--accent);margin-top:.35rem;margin-bottom:.35rem}
.kb-roadmap-step[aria-current=step]:hover{background:var(--accent-glow)}
.kb-roadmap-step[aria-current=step] .kb-roadmap-dot{background:var(--accent);border-color:var(--accent);color:var(--accent-fg,#fff)}
.kb-roadmap-current{display:inline-block;font-size:.58rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border:0;background:var(--accent);color:var(--accent-fg,#fff);border-radius:99px;padding:.14rem .5rem;margin-inline-start:.4rem;vertical-align:middle}
.kb-roadmap-check{display:flex;align-items:center;gap:.45rem;border:1px solid var(--border);border-radius:999px;background:none;color:var(--text-muted);font:inherit;font-size:.72rem;font-weight:500;cursor:pointer;padding:.38rem .7rem .38rem .5rem;flex-shrink:0;transition:background .15s,color .15s}
.kb-roadmap-check:hover{background:var(--surface2);color:var(--text)}
.kb-roadmap-check>span:first-child{display:flex;align-items:center;justify-content:center;width:18px;height:18px;border:1px solid var(--border);border-radius:5px;font-size:.7rem}
.kb-roadmap-check[aria-checked=true]{border-color:transparent;background:var(--accent-glow);color:var(--accent-text)}
.kb-roadmap-check[aria-checked=true]>span:first-child{background:var(--accent);color:var(--accent-fg,#fff);border-color:var(--accent)}
.kb-roadmap-stage summary:focus-visible,.kb-roadmap-check:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}
.kb-roadmap-step:focus-visible,.kb-roadmap-wrap button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.kb-roadmap-step:disabled{cursor:default;opacity:.65}
@media(max-width:600px){.kb-roadmap-stage{padding:0;border-radius:16px}.kb-roadmap-stage>summary{padding:1rem .85rem;gap:.65rem;flex-wrap:wrap}.kb-roadmap-stage-number{width:30px;height:30px}.kb-roadmap-stage-count{margin-inline-start:calc(30px + .65rem);flex:0 0 auto}.kb-roadmap-stage>summary:after{margin-inline-start:auto}.kb-roadmap-stage-body{padding:0 .55rem .85rem}.kb-roadmap-line{flex-wrap:wrap;gap:.25rem}.kb-roadmap-stage .kb-roadmap-step{min-height:64px;padding:.7rem .5rem!important;gap:.7rem}.kb-roadmap-check{margin:0 0 .55rem auto}.kb-roadmap-next{flex-direction:column;align-items:stretch;padding:1.2rem 1.1rem}.kb-roadmap-next .k-btn{width:100%}.kb-roadmap-intro{font-size:.9rem}}
.kb-roadmap-page-title{font-size:1.7rem;font-weight:650;color:var(--text);margin:0}
.kb-roadmap-manage{position:relative}
.kb-roadmap-manage>summary{list-style:none;cursor:pointer;font-size:.8rem;color:var(--text-muted);padding:.5rem .8rem;border:1px solid var(--border);border-radius:999px}
.kb-roadmap-manage>summary::-webkit-details-marker{display:none}
.kb-roadmap-manage>div{position:absolute;inset-inline-end:0;top:calc(100% + .5rem);z-index:25;display:flex;flex-direction:column;min-width:180px;padding:.4rem;border:1px solid var(--border);border-radius:12px;background:var(--surface);box-shadow:0 10px 30px rgba(0,0,0,.18)}
.kb-roadmap-manage>div .kb-txt{padding:.7rem .8rem;text-align:start;min-height:40px;border-radius:8px}
.kb-roadmap-manage>div .kb-txt:hover{background:var(--accent-glow)}
.kb-roadmap-manage>summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* This week's posts (owner 2026-11-02): one card on the Roadmap, in Studio and in Studio Reels. */
.wk-slot{margin:0 0 1rem}.wk-card{padding:1.1rem 1.2rem}.wk-t{font-size:1.02rem;font-weight:700;color:var(--text);margin-bottom:0.25rem}
.wk-line{display:flex;align-items:center;gap:0.6rem;flex-wrap:wrap;margin-top:0.7rem;font-size:0.84rem;color:var(--text)}.wk-line>span:first-child{width:3.6rem;color:var(--text-muted);font-size:0.78rem}.wk-line b{font-weight:600}
.bv-eg{margin:0.35rem 0 0;padding-left:1.1rem;font-size:0.8rem;line-height:1.5;color:var(--text-muted)}
.k-rm-back{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:0.5rem;padding:0.3rem 0.75rem;background:var(--surface-elevated)}
.k-rm-link{display:inline-flex;align-items:center;gap:0.3rem;background:none;border:none;padding:0.25rem 0.3rem;color:var(--accent-text);font:inherit;font-size:0.82rem;font-weight:600;cursor:pointer}
.k-rm-x{background:none;border:none;color:var(--text-muted);font:inherit;font-size:1.05rem;line-height:1;padding:0.25rem 0.45rem;cursor:pointer}
[dir="rtl"] .k-rm-arrow{display:inline-block;transform:scaleX(-1)}
.wk-link{background:none;border:none;padding:0;color:var(--accent-text);font:inherit;font-size:0.8rem;font-weight:600;cursor:pointer}
.wk-form{display:flex;flex-direction:column;gap:0.6rem;margin-top:0.7rem;padding:0.8rem;border-radius:10px;background:var(--surface2)}.wk-form .cb-in{margin:0}
.wk-row{display:grid;grid-template-columns:5.4rem minmax(0,1fr) auto;gap:0.8rem;align-items:center;padding:0.7rem 0;border-top:1px solid var(--border);margin-top:0.2rem}
.wk-when{display:flex;flex-direction:column;font-size:0.74rem;color:var(--text-muted)}.wk-when b{color:var(--text);font-size:0.8rem;font-weight:600}
.wk-hook{font-size:0.9rem;font-weight:600;color:var(--text);line-height:1.35}.wk-meta{font-size:0.74rem;color:var(--text-muted);margin-top:0.1rem}
.wk-idea{font-size:0.8rem;color:var(--text);line-height:1.4;margin-top:0.2rem}
.wk-why{font-size:0.74rem;color:var(--text-muted);line-height:1.4;margin-top:0.25rem}.wk-why b{font-weight:600;color:var(--text)}.wk-why a,.wk-found a{color:var(--accent-text);overflow-wrap:anywhere}
.wk-found{margin-top:0.7rem;border-top:1px solid var(--border);padding-top:0.6rem;font-size:0.8rem}.wk-found summary{cursor:pointer;font-weight:600;color:var(--text)}.wk-found ul{list-style:none;margin:0.2rem 0 0;padding:0}.wk-found li{padding:0.35rem 0}
.wk-found-h{font-size:0.72rem;font-weight:600;color:var(--text-muted);margin-top:0.6rem}.wk-found-t{color:var(--text);line-height:1.35}.wk-found-m{font-size:0.74rem;color:var(--text-muted);line-height:1.4;margin-top:0.1rem}
.wk-acts{display:flex;gap:0.4rem;align-items:center;flex-wrap:wrap}.wk-state{font-size:0.78rem;color:var(--text-muted);font-weight:600}
.wk-foot{display:flex;gap:0.8rem;align-items:center;flex-wrap:wrap;margin-top:0.8rem}.wk-err{color:#b3261e;font-size:0.8rem;margin-top:0.4rem}.wk-note{margin-top:0.4rem}
.wk-fold{margin:0 0 1rem}.wk-fold>summary{cursor:pointer;font-size:0.86rem;font-weight:600;color:var(--text);padding:0.2rem 0}.wk-fold .wk-t{display:none}.wk-fold .wk-slot{margin-top:0.5rem}
.wk-sheet{display:flex;flex-direction:column;gap:0.7rem;max-width:460px;width:100%}.wk-sheet .cb-in{margin:0}
.ds-cap{margin:0.8rem auto 0;width:100%}.ds-cap-t{display:block;font-size:0.72rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--text-muted);margin-bottom:0.3rem}.ds-cap-text{width:100%;box-sizing:border-box;margin:0;resize:vertical;font-size:0.85rem;line-height:1.5}.ds-cap-acts{display:flex;gap:0.4rem;margin-top:0.4rem;flex-wrap:wrap}
@media (max-width:640px){.wk-row{grid-template-columns:minmax(0,1fr);gap:0.4rem}.wk-when{flex-direction:row;gap:0.5rem}}
/* ── The Freebie builder (owner spec 2026-11-02): one column, one main action per task ── */
.kf-task{padding:0;margin-top:.8rem;overflow:hidden;border:1px solid var(--border);border-radius:16px;background:var(--surface)}
.kf-task.is-open{border-color:var(--accent-text);box-shadow:0 0 0 3px var(--accent-glow)}
.kf-task-h{display:flex;align-items:center;gap:.8rem;width:100%;padding:.95rem 1.1rem;background:none;border:0;font:inherit;color:var(--text);text-align:start;cursor:pointer;min-height:48px}
.kf-task-h:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.kf-task-n{flex-shrink:0;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:700;color:var(--text-muted)}
.kf-task.is-open .kf-task-n{border-color:var(--accent-text);color:var(--accent-text)}
.kf-task.is-done .kf-task-n{background:var(--accent-glow);border-color:var(--accent-text);color:var(--accent-text)}
.kf-task-t{font-size:1rem;font-weight:700;flex:1;min-width:0}
.kf-task-s{font-size:.78rem;color:var(--text-muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kf-task-edit{font-size:.8rem;font-weight:600;color:var(--accent-text);text-decoration:underline;text-underline-offset:3px;flex-shrink:0}
.kf-task-b{padding:0 1.1rem 1.1rem;border-top:1px solid var(--border);padding-top:.9rem}
.kf-status{display:inline-flex;align-items:center;gap:.4rem;font-size:.78rem;font-weight:600;color:var(--text);padding:.22rem .65rem;border:1px solid var(--border);border-radius:999px}
.kf-status i{width:8px;height:8px;border-radius:50%;background:var(--text-muted);opacity:.6}
.kf-status i.ok{background:#2f9e5f;opacity:1}
.kf-status i.mid{background:#d9a62a;opacity:1}
.kf-steps{margin:.9rem 0 0;padding:0 0 0 1.3rem;font-size:.86rem;color:var(--text);line-height:1.6}
.kf-steps li{padding:.2rem 0}
.kf-steps li.is-current{font-weight:600}
.kf-copy{margin-top:.8rem}
.kf-copy-row{padding:.75rem 0;border-top:1px solid var(--border)}
.kf-copy-l{display:flex;justify-content:space-between;gap:.6rem;flex-wrap:wrap;align-items:baseline}
.kf-copy-t{font-size:.84rem;font-weight:700;color:var(--text)}
.kf-copy-w{font-size:.72rem;color:var(--text-muted)}
.kf-copy-v{font-size:.9rem;color:var(--text);line-height:1.55;margin-top:.35rem;white-space:pre-wrap;overflow-wrap:break-word}
.kf-copy-a{display:flex;gap:1rem;margin-top:.4rem;font-size:.8rem}
.kf-copy-a .au-link[disabled]{opacity:.5;cursor:default}
.kf-live{margin-top:.4rem}
.kf-idea{border:1px solid var(--border)}
@media (max-width:640px){.kf-task-s{display:none}.kf-copy-a{flex-wrap:wrap}}

/* DM button under the bubble and the readiness list (owner spec 2026-11-02) */
.au-bub-btn{display:block;margin-top:.55rem;padding:.5rem .7rem;border-top:1px solid rgba(255,255,255,.18);text-align:center;font-weight:600;color:#4ea1ff}
/* The button block (always shown) and the fixed https:// prefix (owner 2026-11-04) */
.au-btnblock{margin-top:1.2rem;padding:.9rem 1rem 1rem;border:1px solid var(--border-subtle,var(--border));border-radius:12px;background:var(--surface)}
.au-btnblock .au-pv-l{margin-bottom:.3rem}
.au-btnrow{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:.6rem;margin-top:.7rem}
.au-btnrow .au-in{margin:0}
.au-url{display:flex;align-items:stretch;min-width:0;border:1px solid var(--border);border-radius:10px;background:var(--bg);overflow:hidden}
.au-url:focus-within{border-color:var(--text)}
.au-url-pre{flex:none;display:inline-flex;align-items:center;padding:0 .35rem 0 .75rem;font-size:.9rem;color:var(--text-muted);user-select:none}
.au-url .au-in{border:0;border-radius:0;background:transparent;padding-left:2px;min-width:0;flex:1}
.au-url .au-in:focus{outline:none;box-shadow:none}
@media (max-width:640px){.au-btnrow{grid-template-columns:1fr}}
/* The preview plays the flow: post, comment, public reply, typing, the DM (owner 2026-11-04) */
.au-sc{margin-top:.75rem}
.au-sc:first-of-type{margin-top:0}
.au-play .au-sc{animation:auScIn .45s ease both;animation-delay:calc(var(--n) * .85s + .2s)}
@keyframes auScIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.au-pv-post{display:flex;align-items:center;gap:.6rem;padding:.5rem .6rem;border:1px solid var(--border-subtle,var(--border));border-radius:10px;font-size:.76rem;color:var(--text-muted);line-height:1.35}
.au-pv-post img,.au-pv-ph{flex:none;width:34px;height:34px;border-radius:7px;object-fit:cover;background:color-mix(in srgb,var(--text) 10%,transparent)}
.au-pv-post span:last-child{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.au-pv-pub{font-size:.78rem;color:var(--text);padding:.35rem .6rem;border-left:2px solid var(--border);margin-left:.4rem;line-height:1.4}
.au-pv-pub b{font-weight:600;margin-right:.25rem}
.au-sc-typing{height:1.3rem}
.au-typing{display:inline-flex;gap:4px;padding:.45rem .7rem;border-radius:14px;background:var(--surface2,var(--bg))}
.au-typing i{width:6px;height:6px;border-radius:50%;background:var(--text-muted);opacity:.5}
.au-play .au-sc-typing{animation:auTyping 1.1s ease both;animation-delay:calc(var(--n) * .85s + .2s)}
@keyframes auTyping{0%{opacity:0;height:0;margin-top:0}20%{opacity:1;height:1.3rem;margin-top:.75rem}80%{opacity:1;height:1.3rem;margin-top:.75rem}100%{opacity:0;height:0;margin-top:0}}
.au-still .au-sc-typing{display:none}
.au-play .au-typing i{animation:auDot 1s infinite}
.au-play .au-typing i:nth-child(2){animation-delay:.15s}.au-play .au-typing i:nth-child(3){animation-delay:.3s}
@keyframes auDot{0%,100%{opacity:.35}50%{opacity:1}}
.au-replay{display:inline-block;margin-top:.8rem;font-size:.74rem}
.au-ready{padding:.8rem 1rem;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text)}

/* The Links page (owner 2026-11-05): the editor beside a phone preview on a wide screen, stacked on a phone
   (the editor first, the preview under it; a fixed two-column grid left the form a sliver wide on iPhone). */
.lk-wrap{max-width:1040px;margin:0 auto;padding:1.2rem 1.2rem 3rem;display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:1.4rem;align-items:start}
.lk-wrap>*{min-width:0}
.lk-preview{position:sticky;top:1rem}
@media (max-width:800px){.lk-wrap{grid-template-columns:minmax(0,1fr);padding:0.9rem 0.8rem 5rem}.lk-preview{position:static}}