/* ===== AOY Dashboard - base theme (matches Day 15-18 report palette) ===== */
*{box-sizing:border-box;margin:0;padding:0}
/* DEFAULT = Design A "Light & airy" (corporate blue + orange on warm grey).
   Dark mode (html[data-theme^="dark"]) re-themes to navy + orange below. */
:root{
  color-scheme:light;   /* paint native date pickers / <select> popups / scrollbars in light chrome */
  /* light mode: all-white surfaces; frames get a dark-orange GRADIENT border accent
     (see the html[data-theme="light"] card rule below), David 2026-07-03 */
  --charcoal:#FFFFFF; --charcoal2:#FFFFFF; --card:#FFFFFF; --card2:#FFFFFF;
  --cream:#211E1A; --gold:#E87F24; --gold-deep:#C25E12; --line:rgba(120,90,30,.16);
  --muted:rgba(33,30,26,.58); --muted2:rgba(33,30,26,.40);
  --green:#55876E; --green-deep:#47725D; --red:#E2574C; --red-deep:#a3392f;   /* David 2026-07-06: light-mode green = site emerald (dark themes override below) */
  --blue:#5B84C4; --fire:#FFC81E; --pink:#E0568A; --teal:#16B8B8;
  --btn:#211E1A; --btn-text:#FFFFFF;   /* Knowvio primary buttons are BLACK */
  --ink-rgb:33,30,26;   /* warm near-black text/hover tint; flips to cream in dark */
  --shadow-card:0 1px 0 rgba(140,110,40,.06),0 6px 18px rgba(140,110,40,.16);   /* warm 2-layer: hairline + soft lift, so cards read raised (like dark) */
  --shadow-hover:0 12px 28px rgba(140,110,40,.18);
  --sb-w:236px;
}
html,body{height:100%}
/* The topbar is sticky, so the top of the scrollport is BEHIND it. Without this, every
   scrollIntoView in the app parks its target under the bar - which buried the "All videos" heading
   and its filters on each click-to-filter jump (David 2026-07-16: "whenever I click anywhere keep
   the top part with filters visible"). scroll-padding-top is the browser's own mechanism for a
   sticky header: it insets the scrollport, so EVERY scroll - block:start, block:nearest, an anchor
   link, a future one nobody has written yet - stops below the bar. --tb-h is measured from the real
   topbar by _syncTopbarH(); the fallback only matters for the first frame. */
html{scroll-padding-top:calc(var(--tb-h, 72px) + 12px)}
body{background:var(--charcoal);color:var(--cream);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;line-height:1.5}
a{color:inherit;text-decoration:none;cursor:pointer}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:rgba(var(--ink-rgb),.22);border-radius:6px}
::-webkit-scrollbar-track{background:transparent}

.app{display:flex;min-height:100vh}

/* ===================== SIDEBAR ===================== */
.sidebar{width:var(--sb-w);flex:0 0 var(--sb-w);background:var(--charcoal2);
  border-right:1px solid rgba(var(--ink-rgb),.2);display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;padding:18px 12px;gap:6px;z-index:40;
  transition:width .2s ease,flex-basis .2s ease,padding .2s ease}
/* sidebar-panel collapse toggle (like Gemini's side_nav). Hidden by default; desktop shows it. */
.sb-toggle{display:none}
.brand{display:flex;align-items:center;gap:9px;padding:6px 8px 16px}
.brand-mark{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
  font-weight:900;font-size:15px;letter-spacing:.5px;color:#2c2100;
  background:radial-gradient(circle at 30% 25%,var(--gold),var(--gold-deep));
  box-shadow:0 0 0 5px rgba(249,129,37,.08),0 6px 18px rgba(249,129,37,.25)}
.brand-logo{width:34px;height:34px;border-radius:50%;object-fit:cover;
  box-shadow:0 0 0 3px rgba(249,129,37,.10),0 5px 14px rgba(249,129,37,.22)}
.brand-name{font-weight:800;font-size:14.5px;letter-spacing:-.2px;white-space:nowrap}
.brand-sub{font-size:11px;color:var(--muted2);letter-spacing:.4px;text-transform:uppercase}

.nav{display:flex;flex-direction:column;gap:3px;flex:1;overflow-y:auto}
.nav-divider{height:1px;background:var(--line);margin:9px 8px}
.nav-item{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:10px;
  font-size:13.5px;font-weight:600;color:var(--muted);border:1px solid transparent;
  transition:background .14s,color .14s,border-color .14s}
.nav-item .ico{width:20px;text-align:center;font-size:15px;opacity:.9}
.nav-item:hover{background:rgba(var(--ink-rgb),.03);color:var(--cream)}
.nav-item.active{background:rgba(33,30,26,.06);color:var(--cream);
  border-color:transparent;font-weight:700}
/* W12: "Connect" pill on My Channel until YouTube is linked (Tim couldn't find it) */
.nav-item.needs-connect{position:relative}
.nav-item.needs-connect .lbl::after{content:"Connect";margin-left:8px;font-size:9.5px;
  font-weight:800;letter-spacing:.04em;color:#2c2100;background:var(--gold);
  border-radius:6px;padding:2px 6px;vertical-align:middle;animation:rs-pulse 1.6s ease-out infinite}

.acct{position:relative;display:flex;align-items:center;gap:10px;padding:10px;
  border-radius:12px;border:1px solid var(--line);background:var(--card);cursor:pointer}
.acct-av{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  font-weight:800;font-size:13px;color:#2c2100;background:var(--gold)}
.acct-meta{flex:1;min-width:0}
.acct-name{font-size:13px;font-weight:700}
.acct-plan{font-size:11px;color:var(--muted2)}
.acct-caret{color:var(--muted2);font-size:12px}
.acct-menu{position:absolute;bottom:calc(100% + 8px);left:0;right:0;background:var(--card2);
  border:1px solid var(--line);border-radius:12px;padding:6px;display:none;z-index:30;
  box-shadow:0 12px 32px rgba(0,0,0,.5)}
.acct-menu.open{display:block}
.acct-menu a{display:block;padding:8px 11px;border-radius:8px;font-size:12.5px;color:var(--muted)}
.acct-menu a:hover{background:rgba(var(--ink-rgb),.04);color:var(--cream)}
.acct-menu a.danger{color:var(--red)}

/* Light/Dark switch pill (sidebar) - David 2026-07-02. Segmented toggle that
   mirrors the account-menu theme switch; the active segment + sliding thumb are
   driven purely by html[data-theme], so it stays in sync from either control. */
.theme-side{position:relative;display:grid;grid-template-columns:1fr 1fr;
  margin:8px 12px 10px;padding:4px;border-radius:999px;
  background:rgba(var(--ink-rgb),.06);border:1px solid var(--line)}
.ts-thumb{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 2px);
  border-radius:999px;background:var(--card);box-shadow:0 1px 2px rgba(0,0,0,.18);
  transition:transform .24s cubic-bezier(.34,1.2,.4,1),background .18s}
/* dark: thumb slides to the second (Dark) segment, charcoal gradient */
html[data-theme="dark-black"] .ts-thumb{transform:translateX(100%);
  background:linear-gradient(180deg,#3a3a3a,#0e0e0e);
  box-shadow:0 2px 10px rgba(0,0,0,.55)}
.ts-seg{position:relative;z-index:1;display:inline-flex;align-items:center;
  justify-content:center;gap:6px;padding:7px 4px;border:0;background:none;cursor:pointer;
  font:600 12.5px/1 inherit;color:var(--muted);border-radius:999px;transition:color .18s;
  -webkit-tap-highlight-color:transparent}
.ts-ico{width:15px;height:15px;flex:0 0 auto}
.ts-seg:hover{color:var(--cream)}
html[data-theme="light"] .ts-light{color:#241a0e}
html[data-theme="dark-black"] .ts-black{color:#f4f4f4}
/* collapsed sidebar: icons only, stacked to fit the narrow rail */
html.sb-collapsed .theme-side{grid-template-columns:1fr;gap:2px}
html.sb-collapsed .theme-side .ts-lbl{display:none}
html.sb-collapsed .ts-thumb{width:calc(100% - 8px);top:4px;height:calc(50% - 2px);bottom:auto}
html.sb-collapsed[data-theme="dark-black"] .ts-thumb{transform:translateY(100%)}

/* David 2026-07-03: in dark mode every red uses the brand crimson #BF092F. The --red
   token above already covers all var(--red) uses; these cover the few hardcoded #FF0000
   spots (YouTube-connect icon, P&L long-form dot, and the upload month-circles + their
   legend dot on the charts). Dark mode only - light theme is untouched. */
html[data-theme^="dark"] .yt-connect-ico{background:#BF092F}
html[data-theme^="dark"] g.ysc-up .ysc-updisc{fill:#BF092F}
html[data-theme^="dark"] .ysc-lg i[style*="50%"]{background:#BF092F !important}

/* David 2026-07-03: light mode - chart frames get a SOFT orange outline on all sides.
   (2026-07-06: removed the thick orange LEFT accent - David wanted the left lines gone.) */
html[data-theme="light"] :is(.card,.ytov-chart,.bd-card,.pnl-vcard,.rsp-card,.ps-wrap){
  border:1.5px solid rgba(232,127,36,.26);
}
/* keep the nested P&L card (inside a business card) frameless so frames don't double up */
html[data-theme="light"] .bd-card .pnl-vcard{border:none}

/* David 2026-07-06: Money Flow log + entry form use OUR site palette in light mode
   (green #55876E, red #B24A4A, blue #5F8FC4, orange #F98125) - was brighter off-brand greens/reds/blue. */
html[data-theme="light"] .rm-msg.income{border-left-color:#C9CED6}
html[data-theme="light"] .rm-msg.income .rm-amt{color:#55876E}
html[data-theme="light"] .rm-t.on.income{background:#55876E;border-color:#55876E}
html[data-theme="light"] .rm-msg.expense{border-left-color:#C9CED6}
html[data-theme="light"] .rm-msg:not(.income) .rm-amt{color:#B24A4A}
html[data-theme="light"] .rm-t.on.expense{background:#B24A4A;border-color:#B24A4A}
html[data-theme="light"] .rm-s b.pos{color:#55876E}
html[data-theme="light"] .rm-s b.neg{color:#B24A4A}
html[data-theme="light"] .rm-sp.on{background:#5F8FC4}
html[data-theme="light"] .rm-t.newgrp{color:#5F8FC4}
html[data-theme="light"] .rm-t.newgrp:hover{background:rgba(95,143,196,.1)}
html[data-theme="light"] .rm-srct{--tagc:#5F8FC4}
html[data-theme="light"] .rm-spt{--tagc:#F98125}
/* David 2026-07-06: money-flow tags become the same soft FILLED chip as the dark theme
   (no outline, rounded, tinted fill) - but keep each category's own colour, deepened a
   touch so the letters stay crisp on the pale fill instead of dark mode's lighter orange. */
html[data-theme="light"] .rm-tag{
  background:color-mix(in srgb, var(--tagc,var(--muted2)) 14%, transparent);
  color:color-mix(in srgb, var(--tagc,var(--muted2)) 80%, #000);
  border:none; border-radius:7px; padding:3.5px 9px;
  font-size:10px; letter-spacing:.04em; vertical-align:0;
}

/* ===================== MAIN ===================== */
.main{flex:1;min-width:0;display:flex;flex-direction:column;position:relative}
/* Tab-switch loading overlay (David 2026-06-26): a spinner covers the main area while the freshly-
   rendered view + its async loaders settle, so the user sees a clean spinner instead of a slideshow
   of stale/placeholder content popping in. David 2026-07-08: it was invisible - `var(--bg)` is not a
   defined variable, so the overlay was TRANSPARENT (just a floating spinner over live content), and
   it faded in over .28s so content showed through even once it had a colour. Now it's a SOLID page-
   coloured cover that appears INSTANTLY (no fade-in) and fades out quickly once the data is ready. */
.view-loader{position:absolute;inset:0;z-index:60;background:var(--charcoal);
  opacity:0;visibility:hidden;transition:opacity .18s ease}
.main.loading .view-loader{opacity:1;visibility:visible;transition:none}
/* .main grows as tall as its content, so a flex-centered spinner sat halfway down a tall page -
   far below the viewport = "just black, no spinner". Pin the box to the VIEWPORT with sticky+100vh
   so the spinner is always centered ON SCREEN regardless of page height/scroll (David 2026-07-15). */
.vl-box{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
/* ring base uses --ink-rgb (flips light/dark) so the spinner is clearly VISIBLE on the black overlay -
   var(--line) was #262629 on the black theme, i.e. almost invisible -> "no spinner, just black" (David 2026-07-15) */
.vl-spin{width:46px;height:46px;border-radius:50%;border:4px solid rgba(var(--ink-rgb),.16);border-top-color:var(--gold);animation:rs-spin .8s linear infinite}
.vl-txt{font-size:12.5px;font-weight:600;letter-spacing:.02em;color:rgba(var(--ink-rgb),.55)}
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:20px;
  padding:14px 26px;background:rgba(255,255,255,.85);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line)}
/* topbar hamburger: MOBILE ONLY - opens the slide-in sidebar. Hidden on desktop, where the
   sidebar-panel toggle (.sb-toggle, on the sidebar itself) handles collapse instead. */
.hamb{display:none;place-items:center;width:38px;height:38px;flex:0 0 auto;background:none;
  border:1px solid transparent;border-radius:10px;color:var(--cream);cursor:pointer;
  transition:background .14s,border-color .14s}
.hamb:hover{background:rgba(var(--ink-rgb),.05);border-color:var(--line)}
/* David 2026-06-25: My Channel tools in the global top bar (date range + setup) */
.topbar-tools{display:flex;align-items:center;gap:10px;margin-left:auto}
.topbar-tools:empty{display:none}
.topbar-tools .yt-rangedd{position:relative}
.topbar-tools .pnl-setup{margin:0;white-space:nowrap}

.chan-switch{position:relative;display:flex;align-items:center;gap:10px;padding:7px 12px;
  border:1px solid var(--line);border-radius:12px;background:var(--card);cursor:pointer;
  transition:border-color .14s}
.chan-switch:hover{border-color:var(--gold)}
.chan-av{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  font-weight:800;font-size:12px;color:#2c2100;
  background:linear-gradient(135deg,var(--gold),var(--gold-deep))}
.chan-av.has-img{padding:0;overflow:hidden;background:var(--line)}
.chan-av img{width:100%;height:100%;object-fit:cover;display:block}
.chan-name{font-size:13.5px;font-weight:700;line-height:1.1}
.chan-handle{font-size:11.5px;color:var(--muted2)}
.chan-caret{color:var(--muted);font-size:11px;margin-left:2px}
/* "What is this channel about?" pill - the engine's read of the ACTIVE channel, sitting next to
   the switcher on every route (David 2026-07-21). Outline-only so it reads as a quiet, always-there
   affordance rather than a call to action, and it never competes with the channel chip beside it.
   [hidden] needs an explicit rule: display:flex would otherwise beat the UA's [hidden]{display:none},
   and the pill must stay INVISIBLE until /api/channel-identity answers. */
.chan-niche{display:flex;align-items:center;gap:9px;min-width:0;max-width:min(34vw,400px);
  padding:8px 13px;border:1px solid var(--line);border-radius:12px;background:transparent;
  color:var(--cream);font:inherit;font-size:12.5px;cursor:pointer;
  transition:border-color .14s,background .14s}
.chan-niche.has-ok{max-width:min(44vw,530px)}
.chan-niche:hover{border-color:var(--gold);background:rgba(var(--ink-rgb),.04)}
.chan-niche[hidden]{display:none}
.chan-niche .cn-q{flex:0 0 auto;font-size:10px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted2)}
.chan-niche .cn-ask{text-transform:none;letter-spacing:0;font-size:12.5px;font-weight:700;color:var(--muted)}
.chan-niche:hover .cn-ask{color:var(--cream)}
.chan-niche b{min-width:0;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* the owner told us themselves - their word outranks our read, so it gets the brand colour */
.cn-ok{flex:0 0 auto;padding:2px 7px;border-radius:999px;background:var(--gold);color:#fff;
  font-size:9.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.chan-menu{position:absolute;top:calc(100% + 8px);left:0;min-width:230px;background:var(--card2);
  border:1px solid var(--line);border-radius:12px;padding:6px;display:none;z-index:50;
  box-shadow:0 14px 36px rgba(0,0,0,.55)}
.chan-menu.open{display:block}
/* the channel list scrolls when there are more channels than fit; the Add row below stays pinned */
.chan-scroll{max-height:min(56vh,420px);overflow-y:auto;overflow-x:hidden;margin:-2px -2px 0;padding:2px}
.chan-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;cursor:pointer}
.chan-row:hover{background:rgba(var(--ink-rgb),.04)}
.chan-row.active{background:rgba(var(--ink-rgb),.06);box-shadow:inset 2px 0 0 var(--gold)}
.chan-row.active small{color:var(--gold)}
.chan-row .chan-av{width:28px;height:28px;font-size:10px;border-radius:7px}
.chan-row small{color:var(--muted2);font-size:11px}
.chan-row.add{color:var(--gold);font-weight:600;font-size:12.5px;justify-content:center}
.chan-row-main{flex:1;min-width:0}
/* delete a copy channel from the switcher (David 2026-07-08) - same quiet style as .todo-del */
.chan-row-del{flex:0 0 auto;background:none;border:none;color:var(--muted2);font-size:14px;cursor:pointer;padding:2px 6px;border-radius:6px}
.chan-row-del:hover{color:var(--red);background:rgba(var(--ink-rgb),.06)}
/* inline "add a channel to copy" form (no login) */
.chan-add{padding:8px 6px 4px;border-top:1px solid var(--line);margin-top:4px}
.chan-add-in{width:100%;padding:8px 10px;border-radius:8px;border:1px solid var(--line);
  background:var(--charcoal);color:var(--cream);font-size:12.5px;outline:none}
.chan-add-in:focus{border-color:var(--gold)}
.chan-add-bend{margin-top:6px}
.chan-add-go{width:100%;margin-top:6px;padding:7px 10px;border:none;border-radius:8px;
  background:var(--gold);color:var(--charcoal);font-weight:700;font-size:12.5px;cursor:pointer}
.chan-add-hint{margin-top:6px;color:var(--muted2);font-size:10.5px;text-align:center}
.chan-add-busy{padding:10px;font-size:12px;color:var(--muted);text-align:center}
.chan-add-busy.err{color:var(--red)}

.stats{display:flex;gap:10px;margin-left:auto;flex-wrap:wrap}
.stat{background:var(--card);border:1px solid var(--line);border-radius:11px;padding:7px 14px;min-width:120px}
.stat-k{font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted2)}
.stat-v{font-size:16px;font-weight:800;display:flex;align-items:baseline;gap:7px}
.delta{font-size:11px;font-weight:700}
.delta.up{color:var(--green)} .delta.down{color:var(--red)} .delta.flat{color:var(--muted2);font-weight:600}

/* ===================== VIEW / shared ===================== */
.view{padding:26px 28px 60px;max-width:1280px;width:100%}
.page-head{margin-bottom:22px}
.page-title{font-size:24px;font-weight:800;letter-spacing:-.4px}
.page-sub{font-size:13.5px;color:var(--muted);margin-top:3px}

.verdict-banner{display:flex;align-items:center;gap:16px;padding:18px 22px;border-radius:16px;
  margin-bottom:26px;border:1px solid rgba(249,129,37,.35);
  background:linear-gradient(135deg,rgba(249,129,37,.14),rgba(249,129,37,.02))}
.vb-logo{width:42px;height:42px;border-radius:50%;flex:0 0 42px;object-fit:cover;
  box-shadow:0 0 0 4px rgba(249,129,37,.10)}
.vb-dot{width:42px;height:42px;border-radius:50%;flex:0 0 42px;
  background:radial-gradient(circle at 30% 30%,var(--gold),var(--gold-deep));
  box-shadow:0 0 18px rgba(249,129,37,.4)}
.vb-text{flex:1}
.vb-text b{color:var(--gold)}
.vb-cta{background:var(--btn);color:var(--btn-text);font-weight:700;font-size:12.5px;
  border:none;border-radius:9px;padding:9px 14px;cursor:pointer;white-space:nowrap}
.vb-cta:hover{background:var(--gold-deep)}

.sec-head{display:flex;align-items:baseline;gap:10px;margin:30px 2px 14px;flex-wrap:wrap}
.sec-head h2{font-size:16px;font-weight:700;color:var(--gold)}
.sec-head .count{font-size:12.5px;color:var(--cream);opacity:.75;font-weight:500}
/* David 2026-07-06: in light mode the three table/section titles - P&L, Performance
   graphs, All videos - are near-black like the body text, not orange. */
html[data-theme="light"] .ps-hd,
html[data-theme="light"] #advAnchor h2{color:var(--cream)}
/* David 2026-07-06: the white donut pin (Documentary) is invisible on the light card.
   LIGHT MODE ONLY - flip white slices + legend dots to near-black. Dark mode keeps white
   (no rule here, so it's untouched); reacts to theme instantly (CSS, not baked in JS). */
html[data-theme="light"] .rsp-seg[data-col="#FFFFFF"]{stroke:#1A1A1A}
html[data-theme="light"] .rsp-dot[style*="background:#FFFFFF"],
html[data-theme="light"] .ad-dot[style*="background:#FFFFFF"]{background:#1A1A1A !important}
/* David 2026-07-06: LIGHT MODE - every green becomes our site emerald #55876E (deep #47725D
   on tinted success chips),
replacing the bright #3FB984 / #46BC88 / #1FA45A / #1a7a45.
   The --green token above covers var(--green) uses; these hit the hardcoded hexes. Dark untouched. */
html[data-theme="light"] .watch-newdot,
html[data-theme="light"] .todo-tag.title,
html[data-theme="light"] .amo-k.on[data-kind="income"]{background:#55876E}
html[data-theme="light"] .amo-k.on[data-kind="income"]{border-color:#55876E}
html[data-theme="light"] .led-amt-v.pos,
html[data-theme="light"] .pbv-p.pos{color:#55876E}
html[data-theme="light"] .tell.copied,
html[data-theme="light"] .tell.told,
html[data-theme="light"] .cbtn.watch.on,
html[data-theme="light"] .rail-pnew,
html[data-theme="light"] .rs-niche-green .rs-niche-k,
html[data-theme="light"] .todo-row.done .todo-check,
html[data-theme="light"] .todo-start.on,
html[data-theme="light"] .todo-copyall.told,
html[data-theme="light"] .led-chip.income,
html[data-theme="light"] .pnl-nettag{color:#47725D}
html[data-theme="light"] .tell.copied,
html[data-theme="light"] .tell.told,
html[data-theme="light"] .cbtn.watch.on,
html[data-theme="light"] .rail-pnew,
html[data-theme="light"] .led-chip.income,
html[data-theme="light"] .pnl-nettag,
html[data-theme="light"] .todo-row.done .todo-check,
html[data-theme="light"] .todo-start.on,
html[data-theme="light"] .todo-copyall.told{background:rgba(85,135,110,.15);border-color:rgba(85,135,110,.4)}
html[data-theme="light"] .rail-pnew:hover{background:rgba(85,135,110,.28);border-color:rgba(85,135,110,.5)}
/* hideable sections (David 2026-07-06): a real labeled button, not a tiny caret
   nobody could find - right-aligned in the header via margin-left:auto. */
.sec-hide-btn{margin-left:auto;flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;
  font-size:13px;font-weight:700;color:var(--muted);background:var(--card2);
  border:1px solid var(--line);border-radius:9px;padding:7px 14px;cursor:pointer;
  font-family:inherit;transition:color .14s,border-color .14s,background .14s}
.sec-hide-btn:hover{color:var(--cream);border-color:var(--gold);background:var(--card)}
.sec-caret{font-size:11px}
/* compact Studio gate banner */
.studio-gate{display:flex;align-items:center;gap:14px;margin:14px 0 6px;padding:14px 16px;
  background:var(--card);border:1px solid var(--line);border-radius:13px}
.sg-ico{width:42px;height:42px;border-radius:10px;flex:0 0 42px;display:grid;place-items:center;
  font-size:20px;background:rgba(249,129,37,.10);border:1px solid rgba(249,129,37,.25)}
.sg-txt{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.sg-txt b{font-size:14px;color:var(--cream)}
.sg-txt span{font-size:12px;color:var(--muted)}
.studio-gate .setup-cta{flex:0 0 auto;width:auto;margin:0;padding:9px 16px;font-size:12.5px}
/* Home widget board (iPhone-style tiles) */
.widgets{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:16px;margin-top:6px}
.widget{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;
  cursor:pointer;display:flex;flex-direction:column;gap:9px;min-height:158px;transition:.15s}
.widget:hover{border-color:var(--gold);transform:translateY(-2px)}
.widget.wide{grid-column:1/-1;flex-direction:row;align-items:center;gap:16px;min-height:0}
.w-ico{width:46px;height:46px;border-radius:12px;flex:0 0 46px;display:grid;place-items:center;
  font-size:22px;background:rgba(249,129,37,.10);border:1px solid rgba(249,129,37,.22)}
.w-ico.ic-blue{background:rgba(44,89,157,.10);border-color:rgba(44,89,157,.24)}
.w-ico.ic-pink{background:rgba(224,86,138,.10);border-color:rgba(224,86,138,.24)}
.w-ico.ic-teal{background:rgba(31,182,182,.10);border-color:rgba(31,182,182,.26)}
.w-main{display:flex;flex-direction:column;gap:4px;min-width:0}
.w-k{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted2);font-weight:700}
.w-big{font-size:34px;font-weight:800;line-height:1;color:var(--cream)}
.w-title{font-size:14px;font-weight:700;color:var(--cream);line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.w-sub{font-size:12px;color:var(--muted);line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.w-thumb{aspect-ratio:16/9;border-radius:11px;background:#000;background-size:cover;
  background-position:center;position:relative}
.w-pill{position:absolute;top:8px;left:8px;font-size:11px;font-weight:800;padding:3px 8px;border-radius:7px}
.w-pill.fire{background:linear-gradient(135deg,var(--fire),var(--gold));color:#1c1a16}
.wstack{display:flex;margin-top:2px}
.wstack-av{width:26px;height:26px;border-radius:50%;object-fit:cover;border:2px solid var(--card);
  margin-left:-7px;background:var(--line)}
.wstack-av:first-child{margin-left:0}

/* ---- Thumbs lab: one video per ROW, 3 columns (your / fresh angle / bend) ---- */
.tl-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;background:var(--card);
  border:1px solid var(--line);border-radius:14px;padding:14px;margin-bottom:14px}
@media(max-width:760px){.tl-row{grid-template-columns:1fr}}
.tl-col{display:flex;flex-direction:column;gap:8px;min-width:0}
.tl-tag{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--gold);font-weight:800}
.tl-col .thumb{border-radius:10px;border:1px solid var(--line)}
.tl-empty{display:grid;place-items:center;text-align:center;padding:10px;
  color:var(--muted);font-size:12px;font-weight:600;background:var(--card2);border:1px dashed var(--line)}
.tl-gen{cursor:zoom-in;background:var(--card2)}
.tl-img{width:100%;height:100%;object-fit:cover;display:block}
.tl-open{display:inline-block;font-size:12px;color:#2c2100;background:var(--gold);font-weight:700;
  border-radius:8px;padding:6px 12px;align-self:flex-start}
.tl-open:hover{background:var(--gold-deep)}
.tl-col .ctitle{font-size:13px}

/* fullscreen image viewer */
.lightbox{position:fixed;inset:0;z-index:400;background:rgba(0,0,0,.9);display:none;
  align-items:center;justify-content:center;padding:30px;cursor:zoom-out}
.lightbox.open{display:flex}
.lightbox img{max-width:95%;max-height:95%;border-radius:10px;box-shadow:0 24px 70px rgba(0,0,0,.7)}
.lb-x{position:absolute;top:18px;right:22px;background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.4);
  color:#fff;width:40px;height:40px;border-radius:11px;font-size:17px;cursor:pointer}
.lb-x:hover{background:rgba(0,0,0,.7)}

/* ---- card grid ---- */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:1100px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.grid{grid-template-columns:1fr}}
.card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;
  display:flex;flex-direction:column;transition:border-color .15s,transform .15s,box-shadow .15s;
  box-shadow:var(--shadow-card)}
.card[data-chid]{cursor:default}
/* channel logo+name link to YouTube; the card body click opens the watch popover */
.chan-link{display:inline-flex;align-items:center;gap:9px;min-width:0}
.chan-link:hover .chan{text-decoration:underline}
/* "+ Watch channel" popover dropping from the top of a clicked card */
.card-watch{position:absolute;top:8px;left:50%;transform:translateX(-50%);z-index:6}
.cw-btn{background:var(--gold);color:#fff;border:none;border-radius:9px;padding:8px 15px;
  font-size:12.5px;font-weight:800;cursor:pointer;font-family:inherit;
  box-shadow:var(--shadow-hover)}
.cw-btn:hover{background:var(--gold-deep)}
.cw-btn.on{background:var(--green);color:#06281a}
.card:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:var(--shadow-hover)}
.card.fire{border-color:rgba(255,138,61,.5)}
.thumb{position:relative;aspect-ratio:16/9;display:block;overflow:hidden}
.thumb .ph{width:100%;height:100%;display:grid;place-items:center;color:rgba(255,255,255,.85);
  font-weight:800;font-size:13px;text-align:center;padding:10px}
.thumb .ph.img{background-size:cover;background-position:center;background-color:#000;padding:0}
.pill{position:absolute;font-size:11px;font-weight:800;padding:4px 8px;border-radius:7px;backdrop-filter:blur(3px)}
.pill.tl{top:8px;left:8px} .pill.br{bottom:8px;right:8px;background:rgba(0,0,0,.78);color:#fff}
.pill.tr{top:8px;right:8px}
.pill.new{background:var(--gold);color:#2c2100}
.pill.fire{background:linear-gradient(135deg,var(--fire),var(--gold));color:#1c1a16}
/* outlier multiple, top-right of the thumbnail (replaces the word "outlier") */
.pill.out{background:rgba(255,238,222,.95);color:#C4610F;border:1px solid rgba(249,129,37,.45);font-size:12px}
.pill.out.hot{background:rgba(255,226,200,.97);color:#B4540A;border:1px solid rgba(249,129,37,.65);font-size:12px}
/* copies count, top-left of the thumbnail (mirror of the outlier pill) */
.pill.tl.copies{background:rgba(255,255,255,.93);color:#2a2620;border:1px solid rgba(0,0,0,.08);font-size:11px;font-weight:700}
/* watchlist-sourced idea: ORANGE card contour - must stay distinct from the
   blue "Found today" outline below (David 2026-06-18: they were both blue).
   The badge itself moved to .crow-wl, under the channel name (2026-07-06). */
.card.idea.from-watch{border-color:var(--fire)}
.card.idea.from-watch:hover{border-color:var(--fire)}
/* W6: the user's OWN winning video to double down on - GOLD, distinct from the
   orange watchlist marker and the blue "Found today" outline */
.pill.tl.self{background:var(--gold);color:#1a1400;font-size:11px}
.card.idea.from-self{border-color:var(--gold)}
.card.idea.from-self:hover{border-color:var(--gold)}
/* "Found" date pill (bottom-left) + fresh-today blue outline on the whole card */
.pill.bl{bottom:8px;left:8px}
.pill.found{background:rgba(20,24,33,.66);color:#fff;border:1px solid rgba(255,255,255,.16);font-size:11px}
.pill.found.fresh{background:rgba(44,89,157,.90);color:#fff;border:none}
.card.fresh{border-color:#D9D6D0}
.card.fresh:hover{border-color:var(--gold)}
.body{padding:13px 14px;display:flex;flex-direction:column;gap:8px;flex:1;justify-content:flex-start}
.body::after{content:'';flex:1 0 0;min-height:0}
/* no reserved 2-line title space (David): the title takes its natural height and
   the rest of the card moves up when the title is one line */
.ctitle{font-size:14px;font-weight:700;line-height:1.34;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ctitle:hover{color:var(--gold)}
.crow{display:flex;align-items:center;gap:9px;font-size:12.5px;flex-wrap:wrap;margin-top:5px}
.crow-av{width:32px;height:32px;border-radius:50%;object-fit:cover;flex:0 0 auto;
  background:var(--line);box-shadow:0 0 0 1px var(--line)}
.crow-av.init{display:grid;place-items:center;font-size:11px;font-weight:800;color:#2c2100;
  background:linear-gradient(135deg,var(--gold),var(--gold-deep));box-shadow:none}
.chan{color:var(--blue);font-weight:600} .age{color:rgba(var(--ink-rgb),.7)}
/* brighter so the numbers are actually readable (David: "grey on grey") */
.crow-subs{color:rgba(var(--ink-rgb),.72);font-weight:500}
/* "From your watchlist" - under the channel row, not on the thumbnail (David
   2026-07-06: "Zack D. Films / From your watchlist!" - clearer next to WHO it's from). */
.crow-wl{display:inline-flex;align-self:flex-start;margin-top:5px;background:var(--fire);
  color:#2a1400;font-size:11px;font-weight:800;padding:4px 8px;border-radius:7px}
.vmeta{font-size:13px;color:rgba(var(--ink-rgb),.82);font-weight:500}
/* views/date line; on outlier cards Tell Claude rides the right of this row */
.vrow{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:2px}
.meta-tell{margin-left:auto;flex:0 0 auto}
/* ---- Day-16 Ideas cards ---- */
.thumb-link{display:block}
a.ctitle{color:var(--cream);text-decoration:none}
a.ctitle:hover{color:var(--gold)}
.bends-wrap{margin-top:6px}
/* Ideas: "Not interested" hide + hidden-items recovery */
.idea-hide{display:block;width:100%;margin-top:8px;background:transparent;border:none;color:var(--muted2);
  font-size:11.5px;font-weight:600;cursor:pointer;padding:4px;border-radius:7px}
.idea-hide:hover{color:var(--red);background:rgba(240,138,138,.07)}
.idea-hidden{margin:18px 2px 6px}
.idea-hidden-h{background:transparent;border:1px solid var(--line);border-radius:9px;color:var(--muted);
  font-size:12.5px;font-weight:700;padding:7px 13px;cursor:pointer}
.idea-hidden-h:hover{border-color:var(--gold);color:var(--cream)}
.idea-hidden-list{margin-top:10px;display:flex;flex-direction:column;gap:7px;max-width:760px}
.idea-hidden-row{display:flex;align-items:center;gap:12px;justify-content:space-between;background:var(--card);
  border:1px solid var(--line);border-radius:10px;padding:9px 13px}
.ihr-t{font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.idea-unhide{flex:0 0 auto;background:transparent;border:1px solid var(--line);color:var(--gold);
  border-radius:8px;padding:5px 11px;font-size:12px;font-weight:700;cursor:pointer}
.idea-unhide:hover{background:rgba(249,129,37,.1);border-color:var(--gold)}
.bend-cta{width:100%;background:#332f28;color:var(--gold);border:1px solid var(--line);
  border-radius:9px;padding:9px 12px;font-size:12.5px;font-weight:700;cursor:pointer;
  font-family:inherit}
.bend-cta:hover{background:rgba(249,129,37,.16)}
.bend-cta:disabled{opacity:.6;cursor:default}
.bends-label{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted2)}
.bends-head{display:flex;align-items:center;justify-content:space-between;margin:2px 0 7px}
.bends-toggle{background:none;border:none;color:var(--gold);font-size:11.5px;font-weight:700;
  cursor:pointer;font-family:inherit;padding:2px 4px}
.bends-toggle:hover{text-decoration:underline}
.bends.collapsed{display:none}
.bends{display:flex;flex-direction:column;gap:6px}
.bend{display:flex;align-items:flex-start;gap:9px;background:var(--card2);border:1px solid var(--line);
  border-radius:9px;padding:8px 10px}
.bend-num{flex:none;width:18px;height:18px;border-radius:50%;background:#5a4715;color:var(--gold);
  font-size:11px;font-weight:800;display:grid;place-items:center;margin-top:1px}
.bend-text{flex:1;font-size:12.7px;line-height:1.4;color:var(--cream)}
.bend .tell{flex:none}
.cstats{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.cs-tell{margin-left:auto}
.cs{font-size:10.5px;color:var(--muted);background:rgba(0,0,0,.25);border:1px solid var(--line);
  border-radius:7px;padding:3px 8px}
.cs b{color:var(--cream)} .cs.out{color:var(--gold);border-color:rgba(249,129,37,.3)}
.cs.out.hot{color:var(--fire);border-color:rgba(255,138,61,.45)}
.cfoot{margin-top:4px;padding-top:10px;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:8px}
.tag{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:3px 8px;border-radius:6px}
.tag.red{background:rgba(226,87,76,.14);color:var(--red)}
.tag.gold{background:rgba(249,129,37,.16);color:var(--gold)}
.tag.green{background:rgba(46,158,107,.15);color:var(--green)}
.tag.blue{background:rgba(44,89,157,.13);color:var(--blue)}
.tag.pink{background:rgba(224,86,138,.14);color:var(--pink)}
.tag.teal{background:rgba(31,182,182,.14);color:var(--teal)}
/* Softer "airy" buttons (David: solid fills were too concentrated). Tinted bg +
   colored text + hairline border = same look as the niche tags, less shouty. */
.tell{font-size:11px;font-weight:700;color:var(--gold-deep);background:rgba(249,129,37,.12);
  border:1px solid rgba(249,129,37,.30);
  border-radius:8px;padding:6px 11px;cursor:pointer;font-family:inherit;transition:background .14s,border-color .14s}
.tell:hover{background:rgba(249,129,37,.20);border-color:rgba(249,129,37,.46)}
.tell.copied,.tell.told{background:rgba(31,164,90,.16);color:#1a7a45;border-color:rgba(31,164,90,.36)}
.tell.told{cursor:default}
/* competitor card actions */
/* Watch / Ignore always pinned to the card BOTTOM (David) - the title block above
   can shrink to one line and move up, but these never move. The ::after spacer
   would otherwise sit BELOW the buttons and unpin them, so kill it here. */
.card.competitor .body::after,.card.suggest .body::after{display:none}
.comp-actions{display:flex;gap:8px;margin-top:auto;padding-top:12px}
/* suggestion cards stacked in the slide-over panel */
.sugg-cards{display:flex;flex-direction:column;gap:14px}
.cbtn{flex:1;font-size:11.5px;font-weight:700;padding:8px 6px;border-radius:9px;cursor:pointer;
  font-family:inherit;border:1px solid var(--line);white-space:nowrap}
.cbtn.watch{background:rgba(44,89,157,.10);color:var(--blue);border-color:rgba(44,89,157,.28)}
.cbtn.watch:hover{background:rgba(44,89,157,.18);border-color:rgba(44,89,157,.46)}
.cbtn.watch.on{background:rgba(31,164,90,.16);color:#1a7a45;border-color:rgba(31,164,90,.38)}
.cbtn.ignore{background:transparent;color:var(--muted);flex:0 0 auto;padding:8px 12px}
.cbtn.ignore:hover{color:var(--red);border-color:rgba(240,138,138,.4)}
.cbtn:disabled{cursor:default}

/* ---- insight feed cards (home) ---- */
.feed{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:16px}
.insight{background:var(--card);border:1px solid var(--line);border-radius:15px;padding:18px;
  display:flex;flex-direction:column;gap:12px;transition:border-color .15s,transform .15s}
.insight:hover{border-color:var(--gold);transform:translateY(-2px)}
.ins-top{display:flex;align-items:center;gap:10px}
.ins-ico{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;font-size:18px;flex:0 0 38px}
.ins-ico.red{background:rgba(240,138,138,.14)} .ins-ico.gold{background:rgba(249,129,37,.14)}
.ins-ico.green{background:rgba(126,224,160,.14)} .ins-ico.blue{background:rgba(122,181,255,.14)}
.ins-kind{font-size:10.5px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted2);font-weight:700}
.ins-title{font-size:16px;font-weight:800;letter-spacing:-.2px;line-height:1.25}
.ins-body{font-size:13px;color:var(--muted);line-height:1.5}
.ins-body b{color:var(--cream)}
.ins-foot{display:flex;align-items:center;justify-content:space-between;margin-top:2px}
.ins-meta{font-size:11.5px;color:var(--muted2)}

/* ---- competitor table ---- */
.panel{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:4px 0;overflow:hidden}
table.trk{width:100%;border-collapse:collapse;font-size:13px}
table.trk th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;
  color:var(--muted2);font-weight:700;padding:13px 16px;border-bottom:1px solid var(--line)}
table.trk td{padding:13px 16px;border-bottom:1px solid var(--line)}
table.trk tr:last-child td{border-bottom:none}
table.trk tr:hover td{background:rgba(var(--ink-rgb),.02)}
.tk-chan{display:flex;align-items:center;gap:10px}
.tk-av{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;font-weight:800;
  font-size:11px;color:#2c2100;background:linear-gradient(135deg,var(--gold),var(--gold-deep))}
.tk-name{font-weight:700} .tk-h{font-size:11px;color:var(--muted2)}
.tk-av-img{width:32px;height:32px;border-radius:50%;object-fit:cover;flex:0 0 32px;
  background:var(--line);box-shadow:0 0 0 1px var(--line)}
.bestv{color:var(--muted);max-width:340px}
.bv-views{display:block;font-size:11px;color:var(--gold);font-weight:600;margin-top:2px}
td.num{font-variant-numeric:tabular-nums;font-weight:700}
.up7{color:var(--green);font-weight:700} .down7{color:var(--red);font-weight:700}

/* ---- trajectory bars ---- */
.radar{display:grid;grid-template-columns:1.4fr 1fr;gap:18px;margin-bottom:24px}
@media(max-width:900px){.radar{grid-template-columns:1fr}}
.radar-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px 22px}
.radar-card.green{border-color:rgba(126,224,160,.35);background:linear-gradient(135deg,rgba(126,224,160,.10),transparent)}
.radar-card.gold{border-color:rgba(249,129,37,.4);background:linear-gradient(135deg,rgba(249,129,37,.12),transparent)}
.radar-card.red{border-color:rgba(240,138,138,.4);background:linear-gradient(135deg,rgba(240,138,138,.12),transparent)}
.rv-label{font-size:10.5px;text-transform:uppercase;letter-spacing:1.5px;color:var(--muted);margin-bottom:8px}
.rv-pill{display:inline-block;font-size:22px;font-weight:900;padding:4px 14px;border-radius:10px}
.radar-card.gold .rv-pill{background:var(--gold);color:#2c2100}
.radar-card.red .rv-pill{background:var(--red);color:#2a0c0c}
.radar-card.green .rv-pill{background:var(--green);color:#0c2818}
.rv-body{margin-top:12px;font-size:13.5px;line-height:1.55}
.rv-coach{color:var(--gold);font-weight:600}
.bars{display:flex;align-items:flex-end;gap:14px;height:130px;margin-top:14px}
.bcol{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%}
.bval{font-size:12px;font-weight:700;margin-bottom:5px}
.bbar{width:100%;max-width:48px;border-radius:7px 7px 2px 2px;background:linear-gradient(180deg,#3a3429,#2a2620);min-height:5px}
.bbar.cur{background:linear-gradient(180deg,var(--gold),var(--gold-deep))}
/* New Competitors (Day-17) trajectory: empty weeks + verdict-colored current bar */
.bbar.empty{background:repeating-linear-gradient(45deg,#24211c,#24211c 6px,#1c1a16 6px,#1c1a16 12px)}
.bbar.cur.green{background:linear-gradient(180deg,var(--green),var(--green-deep))}
.bbar.cur.red{background:linear-gradient(180deg,var(--red),var(--red-deep))}
.bbar.cur.gold{background:linear-gradient(180deg,var(--gold),var(--gold-deep))}
.blabel{font-size:10.5px;color:var(--muted);margin-top:7px}
/* clickable weekly trajectory (Competitors): hover + selected-week highlight */
.bcol.clk{cursor:pointer}
.bcol.clk:hover .bbar{filter:brightness(1.15)}
.bbar.sel{outline:2px solid var(--gold);outline-offset:2px;box-shadow:0 0 0 4px rgba(249,129,37,.15)}
.blabel.sel{color:var(--gold);font-weight:800}

/* ---- channel / financial ---- */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:900px){.two-col{grid-template-columns:1fr}}
.fin{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px}
.fin h3{font-size:14px;margin-bottom:16px;color:var(--gold)}
.fin-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line)}
.fin-row:last-child{border-bottom:none}
.fin-row label{font-size:13px;color:var(--muted)}
.fin-row input{width:110px;background:var(--charcoal);border:1px solid var(--line);color:var(--cream);
  border-radius:8px;padding:7px 10px;font-family:inherit;font-size:13px;text-align:right;font-weight:700}
.fin-row input:focus{outline:none;border-color:var(--gold)}
.fin-out{margin-top:18px;padding:16px;border-radius:12px;background:rgba(249,129,37,.10);
  border:1px solid rgba(249,129,37,.3);text-align:center}
.fin-out .k{font-size:11px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted)}
.fin-out .v{font-size:30px;font-weight:900;color:var(--gold);margin-top:4px}

.proj{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px}
.proj h3{font-size:14px;margin-bottom:6px;color:var(--gold)}
.proj-svg{width:100%;height:200px;margin-top:10px}

/* ---- backlog ---- */
.log{display:flex;flex-direction:column;gap:8px}
.log-row{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);
  border-radius:12px;padding:13px 16px}
.log-ico{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font-size:16px;flex:0 0 34px;
  background:rgba(249,129,37,.12)}
.log-main{flex:1;min-width:0}
.log-t{font-size:13.5px;font-weight:700}
.log-m{font-size:11.5px;color:var(--muted2)}
.log-when{font-size:11.5px;color:var(--muted);white-space:nowrap}
.log-row.rep{cursor:pointer;transition:border-color .14s,transform .14s}
.log-row.rep:hover{border-color:var(--gold);transform:translateY(-1px)}
.log-row.rep .log-when{color:var(--gold);font-weight:700}
/* a freshly-generated, not-yet-opened report: orange outline + a shaking "open" so it pulls the eye
   (David 2026-06-28). Cleared the moment the user opens it. */
.log-row.rep.rep-new{border-color:var(--orange,#FB9B50);box-shadow:inset 0 0 0 1px var(--orange,#FB9B50)}
.rep-newtag{margin-left:7px;font-size:9.5px;font-weight:800;letter-spacing:.04em;color:#2c2100;background:var(--orange,#FB9B50);border-radius:999px;padding:1px 6px;vertical-align:1px}
.log-when.rep-shake{color:var(--orange,#FB9B50);display:inline-block;animation:repshake 2.2s ease-in-out infinite}
@keyframes repshake{0%,70%,100%{transform:translateX(0)}74%{transform:translateX(-2px)}78%{transform:translateX(2px)}82%{transform:translateX(-2px)}86%{transform:translateX(2px)}90%{transform:translateX(-1px)}}

/* ---- empty / placeholder ---- */
.soon{text-align:center;padding:70px 20px;color:var(--muted)}
.soon .big{font-size:42px;margin-bottom:14px;opacity:.6}
.soon h3{font-size:18px;color:var(--cream);margin-bottom:6px}

/* ===================== RIGHT RAIL: WATCHLIST ===================== */
/* fluid rail (David 2026-06-28): stays 380 on a wide PC, shrinks on a laptop so the content
   isn't crushed. 24vw -> at 1920px = 460 (clamped to 380, identical to before); at 1512 (MacBook
   Pro) = 363; at 1280 = 307. No breakpoint, PC look unchanged. */
.rail{width:clamp(288px,24vw,380px);flex:0 0 clamp(288px,24vw,380px);background:var(--charcoal2);border-left:1px solid rgba(var(--ink-rgb),.2);
  position:sticky;top:0;height:100vh;display:flex;flex-direction:column;padding:18px 14px;z-index:20;
  transition:width .2s ease,flex-basis .2s ease,padding .2s ease}
.rail-toprow{display:none}   /* desktop-only fold toggle, see the collapsible-rail media query below */
.rail-toggle{display:none}
.rail-head{padding:4px 6px 14px;border-bottom:1px solid var(--line);margin-bottom:10px;
  display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.rail-title{font-size:15px;font-weight:800}
.rail-sub{font-size:11.5px;color:var(--muted2);margin-top:2px}

/* shaking lightbulb + badge */
.lamp{position:relative;background:none;border:none;cursor:pointer;font-size:21px;line-height:1;
  padding:4px;border-radius:9px;transition:background .14s;filter:grayscale(.4) opacity(.6)}
.lamp:hover{background:rgba(249,129,37,.1)}
/* shake 5 times on activation, then rest (Tim: "пусть 5 раз брыкается, потом перестаёт") */
.lamp.active{filter:none;animation:lamp-shake 1s ease-in-out 5}
.lamp.active .lamp-glyph{filter:drop-shadow(0 0 7px rgba(249,129,37,.7))}
@keyframes lamp-shake{0%,82%,100%{transform:rotate(0)}85%{transform:rotate(-14deg)}
  89%{transform:rotate(12deg)}92%{transform:rotate(-8deg)}95%{transform:rotate(5deg)}}
.lamp-badge{position:absolute;top:-2px;right:-3px;min-width:16px;height:16px;padding:0 4px;
  border-radius:8px;background:var(--gold);color:#2c2100;font-size:10px;font-weight:800;
  display:none;place-items:center;font-family:'Inter',sans-serif}
.lamp.active .lamp-badge{display:grid}

/* suggestion teaser strip */
.sugg-teaser{display:none;align-items:center;gap:9px;width:100%;text-align:left;cursor:pointer;
  background:linear-gradient(135deg,rgba(249,129,37,.16),rgba(249,129,37,.03));
  border:1px solid rgba(249,129,37,.4);border-radius:12px;padding:11px 13px;margin-bottom:12px;
  font-family:inherit;color:var(--cream);transition:transform .14s,border-color .14s}
.sugg-teaser.show{display:flex}
.sugg-teaser:hover{transform:translateY(-1px);border-color:var(--gold)}
.st-ico{font-size:16px;animation:lamp-shake 1.1s ease-in-out infinite}
.st-txt{flex:1;font-size:12px}
.st-txt b{color:var(--gold)}
.st-go{color:var(--gold);font-weight:800}

/* suggestion cards (inside the slide-over panel) */
.sugg-head{font-size:12.5px;color:var(--muted);margin-bottom:16px;line-height:1.5}
.sugg-card{background:var(--card2);border:1px solid var(--line);border-radius:14px;padding:15px;
  margin-bottom:14px;transition:border-color .15s}
.sugg-card:hover{border-color:rgba(249,129,37,.4)}
.sc-top{display:flex;align-items:center;gap:12px}
.sc-av{width:46px;height:46px;border-radius:12px;flex:0 0 46px;display:grid;place-items:center;
  font-weight:800;font-size:15px;color:#2c2100;background:linear-gradient(135deg,var(--gold),var(--gold-deep))}
.sc-id{flex:1;min-width:0}
.sc-name{font-size:15px;font-weight:800;line-height:1.2}
.sc-meta{font-size:11.5px;color:var(--muted);margin-top:3px}
.sc-meta b{color:var(--cream)}
.sc-score{flex:0 0 auto;text-align:center;background:rgba(249,129,37,.12);
  border:1px solid rgba(249,129,37,.3);border-radius:10px;padding:5px 9px}
.sc-score .n{font-size:16px;font-weight:900;color:var(--gold);line-height:1}
.sc-score .l{font-size:8.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted2)}
.sc-vid{display:flex;gap:11px;margin-top:13px;padding-top:13px;border-top:1px solid var(--line)}
.sc-thumb{width:104px;height:58px;border-radius:8px;flex:0 0 104px;display:grid;place-items:center;
  color:rgba(255,255,255,.85);font-size:17px;position:relative;overflow:hidden;
  background-size:cover;background-position:center;background-color:var(--card2)}
.sc-av.has-img{padding:0;overflow:hidden;background:var(--line)}
.sc-av.has-img img{width:100%;height:100%;object-fit:cover;display:block}
.sc-vbody{flex:1;min-width:0}
.sc-vlabel{font-size:9.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted2)}
.sc-vt{font-size:12.5px;font-weight:600;line-height:1.32;margin-top:3px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sc-vviews{font-size:12px;color:var(--gold);font-weight:700;margin-top:4px}
.sc-actions{display:flex;gap:9px;margin-top:14px}
.sc-add{flex:1;background:var(--btn);color:var(--btn-text);font-weight:700;font-size:12.5px;border:none;
  border-radius:10px;padding:10px;cursor:pointer;font-family:inherit;transition:background .14s}
.sc-add:hover{background:var(--gold-deep)}
.sc-add.added{background:var(--green);color:#06281a}
.sc-skip{background:var(--card);border:1px solid var(--line);color:var(--muted);font-size:12.5px;
  border-radius:10px;padding:10px 14px;cursor:pointer;font-family:inherit}
.sc-skip:hover{color:var(--cream);border-color:var(--muted2)}
/* rail: manually add a channel to the watchlist by link / @handle */
.rail-add{margin:0 0 10px}
.rail-add-btn{width:100%;padding:9px 12px;border:1px dashed var(--line);border-radius:11px;background:transparent;
  color:var(--muted);font-size:12.5px;font-weight:700;cursor:pointer;transition:border-color .14s,color .14s,background .14s}
.rail-add-btn:hover{border-color:var(--gold);color:var(--cream);background:rgba(var(--ink-rgb),.03)}
.rail-add-btn.hidden,.rail-add-form.hidden{display:none}
.rail-add-form{display:flex;flex-direction:column;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:11px;padding:10px}
.rail-add-form input{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:9px;background:var(--card2,var(--card));color:var(--cream);font-size:12.5px;outline:none}
.rail-add-form input:focus{border-color:var(--gold)}
.rail-add-row{display:flex;gap:7px}
.rail-add-go{flex:1;padding:8px;border:none;border-radius:9px;background:var(--btn);color:var(--btn-text);font-weight:800;font-size:12.5px;cursor:pointer}
.rail-add-go:disabled{opacity:.6;cursor:default}
.rail-add-cancel{padding:8px 12px;border:1px solid var(--line);border-radius:9px;background:transparent;color:var(--muted);font-size:12.5px;cursor:pointer}
.rail-add-cancel:hover{color:var(--cream);border-color:var(--gold)}
.rail-add-msg{font-size:11px;color:var(--red);line-height:1.4}
.rail-add-msg:empty{display:none}
.rail-list{display:flex;flex-direction:column;gap:6px;overflow-y:auto;flex:1}
/* Competitors tab: rail becomes the graph picker (checkbox + logo + colour name) */
.rail-pctrl{display:flex;gap:7px;margin-bottom:8px}
.rail-pall{flex:1;background:transparent;border:1px solid var(--line);color:var(--muted);border-radius:8px;
  padding:6px 8px;font-size:11.5px;font-weight:700;cursor:pointer}
.rail-pall:hover{border-color:var(--gold);color:var(--cream)}
/* inline "Select all" inside the nothing-selected states - so unticking everything is never a
   dead end you have to reason your way out of (David 2026-07-16) */
.cg-selall{background:transparent;border:1px solid rgba(249,129,37,.55);color:var(--gold);
  border-radius:7px;padding:2px 8px;font:inherit;font-size:12px;font-weight:800;cursor:pointer}
.cg-selall:hover{border-color:var(--gold);background:rgba(249,129,37,.10)}
/* Rail placeholder rows while the watchlist/channels/ledger are still in flight. Shaped like the
   rows that are coming, so nothing shifts when they land - and it never claims anything the way the
   old premature "No competitors yet" empty state did (David 2026-07-16). */
.rail-sk{display:flex;flex-direction:column;gap:8px}
.rail-skrow{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:11px;
  background:var(--card);border:1px solid var(--line)}
/* compound selectors: .hf-sk sets its own width/height further down the file and would win on a
   tie, so these have to out-specify it - not just follow it */
.rail-sk .rail-skav{width:30px;height:30px;border-radius:50%;flex:0 0 auto}
.rail-sk .rail-sktxt{width:auto;height:12px;flex:1 1 auto;min-width:0}
.rail-pick{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:8px 10px;border-radius:11px;
  background:var(--card);border:1px solid var(--line);cursor:pointer;transition:border-color .12s}
/* Tim 2026-06-24: plates ONE colour, only the NAME (+ a small avatar ring) carries
   the per-channel colour - so the row isn't a rainbow. Selection highlight = gold. */
.rail-pick:hover{border-color:var(--gold)}
.rail-pick.on{border-color:var(--gold);background:rgba(249,129,37,.07)}
.rail-check{width:18px;height:18px;flex:0 0 auto;border-radius:6px;border:2px solid var(--line);
  display:grid;place-items:center;font-size:12px;font-weight:900;color:#fff;line-height:1}
.rail-pick.on .rail-check{background:var(--gold);border-color:var(--gold);color:#2c2100}
.rail-pav{width:30px;height:30px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  font-size:11px;font-weight:800;color:var(--cream);background:var(--line);overflow:hidden;border:2px solid var(--cgc)}
.rail-pav img{width:100%;height:100%;object-fit:cover;display:block}
.rail-pmain{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.rail-pname{min-width:0;font-size:13px;font-weight:700;color:var(--cgc);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rail-pick:not(.on) .rail-pname{color:var(--muted)}
.rail-pmeta{font-size:10.5px;color:var(--muted2);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rail-pnew{flex:0 0 auto;font-size:10.5px;font-weight:800;color:#1a7a45;background:rgba(63,185,132,.16);
  border-radius:999px;padding:2px 8px;line-height:1.4;white-space:nowrap;cursor:pointer;border:1px solid transparent;transition:all .12s}
.rail-pnew:hover{background:rgba(63,185,132,.30);border-color:rgba(63,185,132,.5)}
html[data-theme^="dark"] .rail-pnew{color:#7ee0a0;background:rgba(63,185,132,.18)}
.watch-newdot{width:7px;height:7px;border-radius:50%;background:#3FB984;display:inline-block;margin-right:5px;vertical-align:middle}
.watch{display:flex;align-items:center;gap:11px;padding:10px;border-radius:12px;cursor:pointer;
  border:1px solid transparent;transition:background .14s,border-color .14s;position:relative}
.watch:hover{background:rgba(var(--ink-rgb),.03);border-color:var(--line)}
.watch.unread{background:rgba(249,129,37,.06);border-color:rgba(249,129,37,.22)}
.watch-av{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-weight:800;
  font-size:13px;color:#2c2100;flex:0 0 38px;
  background:linear-gradient(135deg,var(--gold),var(--gold-deep));position:relative}
.watch-av.has-img{padding:0;overflow:hidden;background:var(--line)}
.watch-av.has-img img{width:100%;height:100%;object-fit:cover;display:block}
.watch-main{flex:1;min-width:0}
.watch-name{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.watch-last{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.watch.unread .watch-last{color:var(--cream)}
.badge{flex:0 0 auto;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--red);
  color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center}
.watch-when{font-size:10.5px;color:var(--muted2);white-space:nowrap}
.rail-empty{text-align:center;color:var(--muted);padding:30px 14px;font-size:12.5px;line-height:1.55}
.rail-empty.hidden{display:none}
/* My Channel rail = money panel (income/expense entry + live history) */
.rm-wrap{display:flex;flex-direction:column;min-height:100%;gap:10px}
.rm-sum{display:flex;justify-content:space-between;gap:6px;flex:0 0 auto;background:var(--card);border:1px solid var(--line);border-radius:11px;padding:9px 11px}
.rm-s{display:flex;flex-direction:column;gap:1px;min-width:0}
.rm-s i{font-style:normal;font-size:9px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted2);font-weight:700}
.rm-s b{font-size:13px;color:var(--cream);font-variant-numeric:tabular-nums}
.rm-s b.pos{color:#3FB984}.rm-s b.neg{color:var(--red)}
.rm-log{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:7px;padding-right:2px}
.rm-empty{color:var(--muted);font-size:12px;line-height:1.5;text-align:center;padding:20px 8px}
/* David 2026-07-03: each entry outlined in its own colour (like the metric tiles), with
   a thicker colored bar on the LEFT - green income, red expense, etc. */
.rm-msg{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:8px 10px;border-left:3px solid var(--muted2)}
.rm-msg.income{border-left-color:#3FB984}.rm-msg.production{border-left-color:#6C5CE7}.rm-msg.fixed{border-left-color:#F98125}
/* David 2026-07-08: "the amount + the custom note are the most important things here, the
   category TAG pushing them out is terrible" - the tag was flex:0 0 auto (never shrinks) while
   the note had no protected width, so a long/multi tag squeezed the note down to nothing and
   even forced the amount to wrap. Now: amount is pinned (never shrinks, never wraps), the note
   gets a guaranteed ~15-character floor, and the tag shrinks FIRST with its own ellipsis + a
   title tooltip for the full text ("kinda in a popup way") instead of always claiming full width. */
/* Dashboard-style hover hint. Rendered into <body> as position:fixed by the [data-hint] handler in
   app.js, so it can NEVER be clipped by a scrolling/overflow-hidden ancestor (the rail log, the tag's
   own ellipsis box, the sidebar nav all clip). Replaces the slow WHITE native title tooltip.
   David 2026-07-15. */
.aoy-tip{position:fixed;z-index:200;background:#1f2023;color:#fff;font-size:11.5px;font-weight:600;
  line-height:1.35;padding:6px 9px;border-radius:7px;box-shadow:0 8px 22px rgba(0,0,0,.42);
  max-width:280px;opacity:0;pointer-events:none;transition:opacity .1s ease}
.aoy-tip.on{opacity:1}
.rm-mtop{display:flex;flex-wrap:nowrap;justify-content:space-between;gap:8px;align-items:baseline}
.rm-cat{display:flex;align-items:baseline;min-width:0;flex:1 1 auto;font-size:12.5px;font-weight:700;color:var(--cream)}
.rm-txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 auto;min-width:15ch}
.rm-amt{font-size:13px;font-weight:800;font-variant-numeric:tabular-nums;flex:0 0 auto;white-space:nowrap}
.rm-msg.income .rm-amt{color:#1a7a45}.rm-msg:not(.income) .rm-amt{color:var(--red)}
html[data-theme^="dark"] .rm-msg.income .rm-amt{color:#7ee0a0}
.rm-mb{display:flex;justify-content:space-between;align-items:center;margin-top:3px}
.rm-d{font-size:10.5px;color:var(--muted2)}
.rm-del{background:none;border:none;color:var(--muted2);font-size:12px;cursor:pointer;padding:0 2px;opacity:.6}
.rm-del:hover{color:var(--red);opacity:1}
.rm-input{flex:0 0 auto;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:9px;display:flex;flex-direction:column;gap:8px}
.rm-types{display:flex;gap:5px;flex-wrap:wrap}
.rm-t{flex:1 1 auto;min-width:60px;font-size:11px;font-weight:700;font-family:inherit;cursor:pointer;color:var(--muted);background:transparent;border:1px solid var(--line);border-radius:8px;padding:6px 8px}
.rm-t.on.income{background:#3FB984;color:#fff;border-color:#3FB984}
.rm-t.on.production{background:#6C5CE7;color:#fff;border-color:#6C5CE7}
.rm-t.on.fixed{background:#F98125;color:#fff;border-color:#F98125}
.rm-t.on.expense{background:#E0556E;color:#fff;border-color:#E0556E}
.rm-t.newgrp{flex:0 0 auto;color:var(--blue);border-style:dashed}
.rm-t.newgrp:hover{background:rgba(44,89,157,.1)}
.rm-grp{font-style:normal;font-size:9px;font-weight:800;color:var(--muted2);background:rgba(var(--ink-rgb),.07);padding:1px 5px;border-radius:5px;margin-left:5px;text-transform:uppercase;letter-spacing:.03em;vertical-align:1px}
.rm-row{display:flex;gap:6px;align-items:center}
.rm-cat-in{flex:1;min-width:0;background:var(--charcoal);border:1px solid var(--line);color:var(--cream);border-radius:8px;padding:8px 9px;font:inherit;font-size:12.5px}
.rm-cat-in:focus{outline:none;border-color:var(--gold)}
.rm-amtw{display:inline-flex;align-items:center;gap:2px;background:var(--charcoal);border:1px solid var(--line);border-radius:8px;padding:0 7px;width:84px}
.rm-amtw span{color:var(--muted2);font-size:12px}.rm-amtw:focus-within{border-color:var(--gold)}
.rm-amt-in{width:100%;background:transparent;border:none;color:var(--cream);font-size:12.5px;font-weight:600;padding:8px 0;text-align:right}
.rm-amt-in:focus{outline:none}
.rm-send{flex:0 0 auto;width:34px;height:34px;border:none;border-radius:8px;cursor:pointer;background:var(--gold);color:#2c2100;font-size:14px;font-weight:900}
.rm-send:hover{filter:brightness(1.06)}
/* "Add entry" finish button - full width at the BOTTOM of the form, natural place for done (David 2026-06-28) */
.rm-addbtn{width:100%;height:40px;margin-top:4px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:13.5px;letter-spacing:.01em}
.rm-rd-row{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11.5px;color:var(--muted2);font-weight:600}
.rm-rd-row .rm-rd{border:1px solid var(--line);background:var(--charcoal);color:var(--cream);border-radius:7px;padding:3px 6px;font-size:11.5px}
/* TIM-1 rail: source + one-time/monthly spread */
.rm-row2{display:flex;gap:6px;align-items:center}
.rm-src-in{flex:1;min-width:0;background:var(--charcoal);border:1px solid var(--line);color:var(--cream);border-radius:8px;padding:7px 9px;font:inherit;font-size:12px}
.rm-src-in:focus{outline:none;border-color:var(--gold)}
.rm-spread{display:inline-flex;flex:0 0 auto;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.rm-sp{font:inherit;font-size:10.5px;font-weight:700;cursor:pointer;color:var(--muted);background:transparent;border:none;padding:6px 8px}
.rm-sp.on{background:var(--blue);color:#fff}
/* Tim 2026-06-27: tags are OUTLINED chips (not solid fills), tinted by --tagc. */
.rm-tag{flex:0 0 auto;display:inline-block;font-style:normal;font-size:9px;font-weight:800;color:var(--tagc,var(--muted2));border:1px solid var(--tagc,var(--line));background:transparent;padding:1px 6px;border-radius:999px;margin-left:6px;text-transform:uppercase;letter-spacing:.03em;vertical-align:1px}
/* Money Flow rail only (David 2026-07-08) - .rm-tag is shared with the full Ledger table's
   rows too, where there's plenty of room and no problem; only the narrow rail needs the tag
   to shrink/ellipsis so it stops crowding out the note + amount, its more important neighbors. */
.rm-cat .rm-tag{flex:0 1 auto;max-width:64px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rm-srct{--tagc:var(--blue)}
/* R3: two clearly-labeled entry dates (when earned / arrived in bank) */
.rm-dates{display:flex;gap:8px}
.rm-dlbl{flex:1;display:flex;flex-direction:column;gap:3px;font-size:10px;font-weight:700;color:var(--muted2);text-transform:uppercase;letter-spacing:.02em}
.rm-d{border:1px solid var(--line);background:var(--charcoal);color:var(--cream);border-radius:7px;padding:5px 6px;font:inherit;font-size:11.5px}
/* optional "when earned" date (Tim 2026-06-26): dimmer, dashed, with an "optional" tag */
.rm-opt .rm-d{border-style:dashed;color:var(--muted2)}
/* ↻ Repeat row on money entry (David 2026-06-27) */
.rm-repeat{display:flex;align-items:center;gap:10px;margin-top:8px}
.rm-rep-cb{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:var(--muted2);cursor:pointer}
.rm-rep-cb input{accent-color:var(--gold)}
.rm-rep-freq{font:inherit;font-size:11.5px;border:1px solid var(--line);background:var(--card);color:var(--cream);border-radius:7px;padding:5px 8px}
.rm-rep-freq:disabled{opacity:.45;cursor:not-allowed}
/* "Open ledger" button, above the Revenue/Costs/Profit strip in the rail (David 2026-07-08) */
.rm-open-ledger{width:100%;display:flex;align-items:center;justify-content:center;gap:7px;
  background:var(--card2);border:1px solid var(--line);color:var(--cream);font:inherit;
  font-size:12.5px;font-weight:700;border-radius:9px;padding:9px;cursor:pointer;
  margin-bottom:8px;transition:border-color .14s,background .14s}
.rm-open-ledger:hover{border-color:var(--gold);background:var(--card)}

/* ═════════════════════════ LEDGER TAB (David 2026-07-08) ═════════════════════════
   Full income/expense diary - search, sort, edit, delete. Reuses .av-table/.av-wrap/
   .cu-sortable/.av-fsel (the proven sortable-table system from Competitor uploads)
   and .rm-tag/.pos/.neg (the rail's color language) for visual consistency. */
.ldg-back{display:inline-block;margin:2px 0 14px;color:var(--muted);font-size:12.5px;font-weight:600}
.ldg-back:hover{color:var(--gold)}
.ldg-sum{display:flex;gap:24px;background:var(--card);border:1px solid var(--line);
  border-radius:13px;padding:14px 18px;margin-bottom:16px}
.ldg-s{display:flex;flex-direction:column;gap:2px}
.ldg-s i{font-style:normal;font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted2);font-weight:700}
.ldg-s b{font-size:19px;color:var(--cream);font-variant-numeric:tabular-nums}
.ldg-s b.pos{color:#3FB984}.ldg-s b.neg{color:var(--red)}
.ldg-toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.ldg-search{flex:1;min-width:200px;background:var(--card);border:1px solid var(--line);
  color:var(--cream);border-radius:9px;padding:9px 12px;font:inherit;font-size:13px}
.ldg-search:focus{outline:none;border-color:var(--gold)}
.ldg-sub{font-size:10.5px;color:var(--muted2);margin-top:2px}
.ldg-kind{display:inline-block;font-size:10.5px;font-weight:800;padding:2px 8px;border-radius:999px;text-transform:uppercase;letter-spacing:.02em}
.ldg-kind.income{background:rgba(63,185,132,.14);color:#3FB984}
.ldg-kind.expense{background:rgba(240,138,138,.14);color:var(--red)}
.ldg-cat{font-weight:700;color:var(--tagc,var(--cream))}
.ldg-amt{font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.ldg-amt.pos{color:#3FB984}.ldg-amt.neg{color:var(--red)}
.ldg-actions{white-space:nowrap;text-align:right}
.ldg-edit,.ldg-del{background:none;border:none;color:var(--muted2);font-size:13px;cursor:pointer;padding:4px 6px;border-radius:6px}
.ldg-edit:hover{color:var(--gold);background:rgba(var(--ink-rgb),.06)}
.ldg-del:hover{color:var(--red);background:rgba(var(--ink-rgb),.06)}
.ldg-row.ldg-editing{background:rgba(var(--ink-rgb),.03)}
.ldg-editform{display:flex;flex-direction:column;gap:8px;padding:6px 2px}
.ldg-ef-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.ldg-ef-in{background:var(--charcoal);border:1px solid var(--line);color:var(--cream);
  border-radius:8px;padding:7px 9px;font:inherit;font-size:12.5px}
.ldg-ef-in:focus{outline:none;border-color:var(--gold)}
/* The amount reuses the rail's .rm-amtw (a fixed 84px box), but the input inside is a .ldg-ef-in
   with no width - a number input's intrinsic ~177px won't shrink below its content, so it burst out
   of the 84px wrapper and overlapped the category select next to it (David 2026-07-15: "3 boxes and
   they overlap each other"). Size the wrapper properly and let the input fill it. */
.ldg-editform .rm-amtw{width:112px;flex:0 0 auto}
.ldg-editform .rm-amtw .ldg-ef-in{width:100%;min-width:0;border:none;background:none;padding:7px 0}
.ldg-editform .rm-amtw .ldg-ef-in:focus{border:none}
/* selects size to their longest option otherwise - cap them so a long category can't eat the row */
.ldg-editform select.ldg-ef-in{max-width:190px;min-width:0}
.ldg-ef-note{flex:1;min-width:140px}
.ldg-ef-dl{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--muted2);font-weight:600}
.ldg-ef-cb{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);cursor:pointer}
.ldg-ef-cb input{accent-color:var(--gold)}
.ldg-ef-save{margin-left:auto;background:var(--gold);color:#2c2100;border:none;border-radius:8px;
  padding:8px 16px;font:inherit;font-size:12.5px;font-weight:800;cursor:pointer}
.ldg-ef-save:hover{filter:brightness(1.06)}
.ldg-ef-cancel{background:none;border:1px solid var(--line);color:var(--muted);border-radius:8px;
  padding:8px 14px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
.ldg-ef-cancel:hover{color:var(--cream);border-color:var(--muted)}
/* Business-performance tab's ledger preview (David 2026-07-08) - replaces the All-videos
   table there. Reuses .ldg-sum/.ldg-amt above for the summary + amount colors. */
.bld-open{background:none;border:1px solid var(--line);color:var(--muted);border-radius:8px;
  padding:6px 12px;font:inherit;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap}
.bld-open:hover{color:var(--gold);border-color:var(--gold)}
.bld-rows{display:flex;flex-direction:column;gap:2px;margin-top:4px}
.bld-row{display:flex;align-items:center;gap:12px;padding:8px 4px;border-bottom:1px solid var(--line);font-size:13px}
.bld-row:last-child{border-bottom:none}
.bld-date{color:var(--muted2);font-size:11.5px;flex:0 0 auto;min-width:52px}
.bld-txt{flex:1;min-width:0;color:var(--cream);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* video-team role filter tabs (reuse the Team-modal tab look) */
.vtm-tabs{margin-bottom:10px}
.rm-optf{font-size:8.5px;font-weight:800;color:var(--muted2);background:rgba(var(--ink-rgb),.07);border-radius:4px;padding:1px 4px;letter-spacing:.03em;text-transform:none}
.rm-dhead{display:flex;align-items:center;gap:5px}
/* competitor niche-video search (Tim 2026-06-26) */
.comp-search{width:100%;max-width:420px;margin:0 0 14px;padding:10px 14px;border:1px solid var(--line);border-radius:11px;
  background:var(--card);color:var(--cream);font:inherit;font-size:14px}
.comp-search:focus{outline:none;border-color:var(--gold)}
.rm-d:focus{outline:none;border-color:var(--gold)}
/* R1: reset-setup button in the Channel Setup modal */
.csm-reset{margin-right:auto;background:transparent;border:1px solid var(--line);color:var(--muted);border-radius:10px;padding:9px 13px;font:inherit;font-weight:700;font-size:12.5px;cursor:pointer}
.csm-reset:hover{border-color:var(--red);color:var(--red)}
.rm-spt{--tagc:var(--orange,#FB9B50)}
.re-ico{font-size:30px;opacity:.4;margin-bottom:10px}
/* Tim's Verdict rail = chat window */
.vc-wrap{display:flex;flex-direction:column;min-height:100%;gap:10px}
.vc-log{flex:1 1 auto;display:flex;flex-direction:column;gap:10px;overflow-y:auto;padding-right:2px}
.vc-msg{display:flex;align-items:flex-end;gap:7px;max-width:100%}
.vc-msg.you{flex-direction:row-reverse}
.vc-msg .verdict-tim-av,.vc-msg .vc-av{flex:0 0 auto;width:26px;height:26px}
.vc-bubble{padding:9px 12px;border-radius:13px;font-size:13px;line-height:1.45;max-width:78%;
  background:var(--card);border:1px solid var(--line);color:var(--cream)}
.vc-msg.you .vc-bubble{background:var(--blue);border-color:var(--blue);color:#fff;border-bottom-right-radius:4px}
.vc-msg.tim .vc-bubble{border-bottom-left-radius:4px}
.vc-chips{display:flex;flex-wrap:wrap;gap:6px}
.vc-chip{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:6px 11px;
  font-size:12px;font-weight:600;color:var(--muted);cursor:pointer;transition:all .12s}
.vc-chip:hover{border-color:var(--blue);color:var(--blue)}
.vc-input{flex:0 0 auto;display:flex;gap:8px;align-items:center;background:var(--card);
  border:1px solid var(--line);border-radius:12px;padding:8px}
.vc-in{flex:1;border:none;background:transparent;color:var(--cream);font-size:13px;outline:none}
.vc-send{flex:0 0 auto;width:34px;height:34px;border:none;border-radius:8px;cursor:pointer;
  background:var(--blue);color:#fff;font-size:14px;font-weight:900}
.vc-send:hover{filter:brightness(1.06)}

/* message panel (unseen videos from a watched channel) */
.msg-overlay{position:fixed;inset:0;z-index:150;background:rgba(0,0,0,.5);
  display:none;justify-content:flex-end}
.msg-overlay.open{display:flex}
.msg-panel{width:420px;max-width:92vw;height:100%;background:var(--card);border-left:1px solid var(--line);
  padding:22px;overflow-y:auto;animation:slideIn .2s ease}
@keyframes slideIn{from{transform:translateX(30px);opacity:.4}to{transform:translateX(0);opacity:1}}
.msg-top{display:flex;align-items:center;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:16px}
.msg-top .watch-av{width:44px;height:44px;flex:0 0 44px}
.msg-x{margin-left:auto;background:none;border:1px solid var(--line);color:var(--muted);width:32px;height:32px;
  border-radius:9px;cursor:pointer;font-size:15px}
.msg-x:hover{color:var(--cream);border-color:var(--gold)}
.msg-intro{font-size:12.5px;color:var(--muted);margin-bottom:14px}
.msg-actions{margin:-4px 0 12px}
.msg-avg{font-size:12.5px;color:var(--muted);margin:0 0 14px;padding:10px 12px;
  background:var(--card2);border:1px solid var(--line);border-radius:10px}
.msg-avg b{color:var(--gold)}
.msg-del{width:100%;background:transparent;border:1px solid var(--line);color:var(--muted);
  border-radius:10px;padding:9px;font-size:12.5px;font-weight:600;cursor:pointer;font-family:inherit}
.msg-del:hover{color:var(--red);border-color:rgba(240,138,138,.45)}
/* watchlist channel panel: friendly centered empty state (no upload backlog) */
.msg-empty{text-align:center;padding:54px 18px 30px;display:flex;flex-direction:column;
  align-items:center;gap:7px}
.me-ico{width:58px;height:58px;border-radius:16px;display:grid;place-items:center;font-size:26px;
  background:rgba(249,129,37,.1);border:1px solid rgba(249,129,37,.25);margin-bottom:6px}
.me-title{font-size:17px;font-weight:800}
.me-sub{font-size:13px;color:var(--muted);line-height:1.55;max-width:300px}
.me-link{margin-top:14px;font-size:12.5px;font-weight:700;color:#2c2100;background:var(--gold);
  border-radius:10px;padding:10px 16px}
.me-link:hover{background:var(--gold-deep)}
.msg-vid{display:flex;gap:12px;padding:11px;border-radius:12px;background:var(--card2);
  border:1px solid var(--line);margin-bottom:10px}
.msg-thumb{width:96px;height:54px;border-radius:8px;flex:0 0 96px;display:grid;place-items:center;
  color:rgba(255,255,255,.85);font-size:18px}
.msg-vmeta{flex:1;min-width:0}
.msg-vt{font-size:13px;font-weight:700;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.msg-vs{font-size:11.5px;color:var(--muted);margin-top:4px}
.msg-vs b{color:var(--gold)}

/* rich video card inside the channel message panel */
.msg-introbar{display:flex;align-items:center;justify-content:space-between;font-size:12.5px;
  color:var(--muted);margin-bottom:14px}
.gstyle{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--muted2)}
.gbtn{width:22px;height:22px;border-radius:6px;border:1px solid var(--line);background:var(--card2);
  color:var(--muted);font-size:11px;font-weight:700;cursor:pointer;font-family:inherit}
.gbtn.on{background:var(--gold);color:#2c2100;border-color:var(--gold)}
.msg-vid-rich{background:var(--card2);border:1px solid var(--line);border-radius:13px;padding:13px;margin-bottom:14px}
.mvr-top{display:flex;gap:11px}
.traj{margin-top:13px;background:var(--charcoal);border:1px solid var(--line);border-radius:11px;padding:11px 12px 6px}
.traj-head{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--muted);margin-bottom:4px}
.traj-sub{color:var(--muted2)}
.traj-now{font-weight:800;color:var(--cream);font-size:12.5px}
.traj-proj{font-size:9.5px;color:var(--gold);font-weight:700}
.tsvg{width:100%;height:96px;display:block}
.bend-toggle{width:100%;margin-top:11px;background:rgba(249,129,37,.1);border:1px solid rgba(249,129,37,.3);
  color:var(--gold);font-weight:700;font-size:12px;border-radius:10px;padding:9px;cursor:pointer;font-family:inherit}
.bend-toggle:hover{background:rgba(249,129,37,.16)}
.bend-toggle.on{background:rgba(249,129,37,.16)}
.bend-box{display:none;flex-direction:column;gap:7px;margin-top:9px}
.bend-box.open{display:flex}
.bend-row{display:flex;align-items:center;gap:9px;background:var(--charcoal);border:1px solid var(--line);
  border-radius:9px;padding:9px 11px}
.bend-t{flex:1;font-size:12.5px;font-weight:600;line-height:1.35}

/* ===================== WATCH-THIS-CHANNEL top control ===================== */
.watchbar{position:sticky;top:0;z-index:25;display:none;align-items:center;gap:12px;
  background:linear-gradient(135deg,rgba(249,129,37,.16),rgba(249,129,37,.04));
  border:1px solid rgba(249,129,37,.4);border-radius:13px;padding:11px 16px;margin-bottom:18px}
.watchbar.show{display:flex}
.watchbar .wb-ico{width:34px;height:34px;border-radius:9px;background:rgba(249,129,37,.18);
  display:grid;place-items:center;color:var(--gold);font-size:16px;flex:0 0 34px}
.watchbar .wb-txt{flex:1;font-size:13px}
.watchbar .wb-txt b{color:var(--gold)}
.watchbar .wb-add{background:var(--btn);color:var(--btn-text);font-weight:700;font-size:12.5px;border:none;
  border-radius:9px;padding:9px 15px;cursor:pointer;white-space:nowrap}
.watchbar .wb-add:hover{background:var(--gold-deep)}
.watchbar .wb-add.added{background:var(--green);color:#06281a}
.watchbar .wb-x{background:none;border:none;color:var(--muted);cursor:pointer;font-size:16px}

/* ===================== LAST VIDEO PERFORMANCE (home hero) ===================== */
.lvp{display:grid;grid-template-columns:300px 1fr;gap:0;background:var(--card);border:1px solid var(--line);
  border-radius:18px;overflow:hidden;margin-bottom:26px}
@media(max-width:760px){.lvp{grid-template-columns:1fr}}
.lvp-thumb{position:relative;aspect-ratio:16/9;display:grid;place-items:center;font-size:30px;color:rgba(255,255,255,.85)}
.lvp-thumb .pill{position:absolute;bottom:10px;right:10px;background:rgba(0,0,0,.8);color:#fff;
  font-size:12px;font-weight:700;padding:4px 9px;border-radius:7px}
.lvp-body{padding:20px 22px}
.lvp-k{font-size:10.5px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted2);font-weight:700}
.lvp-title{font-size:18px;font-weight:800;line-height:1.3;margin:5px 0 4px}
.lvp-age{font-size:12px;color:var(--muted)}
.lvp-metrics{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0 14px}
.lvp-m{flex:1;min-width:110px;background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.lvp-m .mk{font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted2)}
.lvp-m .mv{font-size:20px;font-weight:800;margin-top:3px}
.lvp-m .mv small{font-size:12px;font-weight:700}
.lvp-m .mv .good{color:var(--green)} .lvp-m .mv .bad{color:var(--red)}
.lvp-verdict{font-size:13px;line-height:1.55;color:var(--cream);background:rgba(249,129,37,.08);
  border:1px solid rgba(249,129,37,.25);border-radius:12px;padding:13px 15px}
.lvp-verdict b{color:var(--gold)}

/* ===================== GUIDED TOUR ===================== */
/* IMPORTANT: .tour itself stays TRANSPARENT - the dimming is done ENTIRELY by the
   spot's 9999px box-shadow so the highlighted element shows through BRIGHT. A
   background here would darken the spotlight too (the "everything grey" bug). */
.tour{position:fixed;inset:0;z-index:300;background:transparent;display:none}
.tour.open{display:block}
.tour-spot{position:absolute;border:2.5px solid var(--gold);border-radius:12px;z-index:1;
  box-shadow:0 0 0 5px rgba(249,129,37,.30),0 0 0 9999px rgba(17,34,77,.58);
  transition:all .25s ease;pointer-events:none}
/* tour card is ALWAYS bright (white) so the explanation pops against the dimmed
   page - never dark even in dark mode (David 2026-06-19). */
.tour-card{position:absolute;width:300px;background:#ffffff;border:1px solid rgba(249,129,37,.45);z-index:3;
  border-radius:16px;padding:20px;box-shadow:0 22px 60px rgba(17,34,77,.45);transition:all .25s ease}
.tour-step{font-size:10.5px;text-transform:uppercase;letter-spacing:1px;color:#E0610C;font-weight:800}
.tour-card h3{font-size:17px;font-weight:800;margin:7px 0 7px;color:#11224D}
.tour-card p{font-size:13px;color:#54607a;line-height:1.55}
.tour-foot{display:flex;align-items:center;justify-content:space-between;margin-top:18px}
.tour-dots{display:flex;gap:5px}
.tour-dot{width:6px;height:6px;border-radius:50%;background:#d7dbe3}
.tour-dot.on{background:var(--gold)}
.tour-btns{display:flex;gap:8px;align-items:center}
.tour-skip{background:none;border:none;color:#9aa0ad;font-size:12px;cursor:pointer;font-family:inherit}
.tour-next{background:var(--btn);color:var(--btn-text);font-weight:700;font-size:12.5px;border:none;
  border-radius:9px;padding:8px 15px;cursor:pointer;font-family:inherit}
.tour-next:hover{background:var(--gold-deep)}

/* ===================== HOME SETUP FORM (no channel / no profile) ===================== */
.setup{max-width:560px;margin:30px auto;background:var(--card);border:1px solid var(--line);
  border-radius:20px;padding:34px 32px;text-align:center}
.setup-ico{width:54px;height:54px;border-radius:14px;margin:0 auto 16px;display:grid;place-items:center;
  font-size:22px;color:var(--gold);background:rgba(249,129,37,.14)}
.setup h2{font-size:22px;font-weight:800;letter-spacing:-.3px}
.setup p.lead{font-size:14px;color:var(--muted);margin-top:8px;line-height:1.55}
.setup-block{margin-top:6px}
.setup-block.hidden{display:none}
.setup-q{font-size:16px;font-weight:700;margin:24px 0 16px}
.setup-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.setup-btn{background:var(--card2);border:1px solid var(--line);color:var(--cream);font-family:inherit;
  font-size:14px;font-weight:700;padding:13px 22px;border-radius:12px;cursor:pointer;transition:border-color .15s,transform .15s}
.setup-btn:hover{border-color:var(--gold);transform:translateY(-1px)}
.setup-btn.primary{background:var(--btn);color:var(--btn-text);border-color:var(--gold)}
.setup-btn.primary:hover{background:var(--gold-deep)}
.setup-field{display:flex;gap:10px;margin:18px 0 6px}
.setup-field input{flex:1;background:var(--charcoal);border:1px solid var(--line);color:var(--cream);
  border-radius:11px;padding:13px 15px;font-family:inherit;font-size:14px}
.setup-field input:focus{outline:none;border-color:var(--gold)}
.setup-hint{font-size:12px;color:var(--muted2);margin-top:4px}
.setup-err{font-size:12.5px;color:var(--red);margin-top:10px;min-height:16px;font-weight:600}
.setup-link{background:none;border:none;color:var(--muted);font-size:12.5px;cursor:pointer;font-family:inherit;margin-top:16px}
.setup-link:hover{color:var(--cream)}
.days{text-align:left;margin:18px 0 4px;display:flex;flex-direction:column;gap:8px}
.day{display:flex;align-items:center;gap:12px;background:var(--card2);border:1px solid var(--line);
  border-radius:11px;padding:11px 14px}
.day-n{width:26px;height:26px;border-radius:7px;background:rgba(249,129,37,.15);color:var(--gold);
  display:grid;place-items:center;font-weight:800;font-size:12px;flex:0 0 26px}
.day-t{font-size:13px;font-weight:600}
.setup-cta{background:var(--btn);color:var(--btn-text);font-weight:700;font-size:14px;border:none;
  border-radius:12px;padding:13px 22px;cursor:pointer;font-family:inherit;margin-top:18px;width:100%}
.setup-cta:hover{background:var(--gold-deep)}

/* ===================== ONBOARDING ===================== */
.onb{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:24px}
.onb.gone{display:none}
.onb-bg{position:absolute;inset:0;background:
  radial-gradient(900px 500px at 50% -10%,rgba(249,129,37,.12),transparent 60%),var(--charcoal)}
.onb-card{position:relative;width:100%;max-width:480px;background:var(--card);
  border:1px solid var(--line);border-radius:20px;padding:34px 32px;text-align:center;
  box-shadow:0 24px 70px rgba(0,0,0,.55)}
.onb-card.hidden{display:none}
.onb-mark{width:56px;height:56px;border-radius:15px;margin:0 auto 18px;display:grid;place-items:center;
  font-weight:900;font-size:18px;color:#2c2100;
  background:radial-gradient(circle at 30% 25%,var(--gold),var(--gold-deep));
  box-shadow:0 0 0 7px rgba(249,129,37,.08),0 8px 22px rgba(249,129,37,.3)}
.onb-card h1{font-size:24px;font-weight:800;letter-spacing:-.4px}
.onb-lead{font-size:14px;color:var(--muted);margin-top:8px;line-height:1.55}
.onb-loading{display:flex;align-items:center;justify-content:center;gap:9px;margin:18px 0 6px;
  font-size:12.5px;color:var(--gold)}
.onb-loading.done{color:var(--green)}
.spin{width:14px;height:14px;border-radius:50%;border:2px solid rgba(249,129,37,.25);
  border-top-color:var(--gold);animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.onb-choices{display:flex;flex-direction:column;gap:12px;margin-top:22px}
.onb-choice{display:flex;align-items:center;gap:14px;text-align:left;padding:16px 18px;border-radius:14px;
  background:var(--card2);border:1px solid var(--line);cursor:pointer;font-family:inherit;
  transition:border-color .15s,transform .15s,background .15s;color:var(--cream)}
.onb-choice:hover{border-color:var(--gold);transform:translateY(-1px)}
.onb-choice.primary{border-color:rgba(249,129,37,.45);background:linear-gradient(135deg,rgba(249,129,37,.10),transparent)}
.oc-ico{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;font-size:17px;flex:0 0 40px;
  background:rgba(249,129,37,.14);color:var(--gold)}
.oc-text{display:flex;flex-direction:column;gap:3px}
.oc-text b{font-size:14.5px;font-weight:700}
.oc-text small{font-size:12px;color:var(--muted)}
.onb-note{font-size:12.5px;color:var(--muted);background:var(--card2);border:1px solid var(--line);
  border-radius:11px;padding:12px 14px;margin:18px 0}
.onb-chan{display:flex;align-items:center;gap:13px;justify-content:center;margin:22px 0 4px;
  background:var(--card2);border:1px solid var(--line);border-radius:14px;padding:16px 20px}
.onb-chan-av{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;font-weight:800;
  font-size:14px;color:#2c2100;background:linear-gradient(135deg,var(--gold),var(--gold-deep))}
.onb-chan-h{font-size:16px;font-weight:700}
.onb-edit{margin:16px 0 4px}
.onb-edit.hidden{display:none}
.onb-edit input{width:100%;background:var(--charcoal);border:1px solid var(--line);color:var(--cream);
  border-radius:11px;padding:12px 14px;font-family:inherit;font-size:14px;text-align:center}
.onb-edit input:focus{outline:none;border-color:var(--gold)}
.onb-fields{display:flex;flex-direction:column;gap:14px;margin:22px 0 6px;text-align:left}
.onb-fields label{font-size:12.5px;font-weight:600;color:var(--cream);display:flex;flex-direction:column;gap:6px}
.onb-fields label span{font-weight:400;color:var(--muted2);font-size:11.5px}
.onb-fields input{background:var(--charcoal);border:1px solid var(--line);color:var(--cream);
  border-radius:10px;padding:11px 13px;font-family:inherit;font-size:13.5px}
.onb-fields input:focus{outline:none;border-color:var(--gold)}
.onb-btn{background:var(--btn);color:var(--btn-text);font-weight:700;font-size:13.5px;border:none;
  border-radius:11px;padding:12px 20px;cursor:pointer;font-family:inherit;transition:background .15s}
.onb-btn:hover{background:var(--gold-deep)}
.onb-btn.wide{width:100%;margin-top:6px}
.onb-row{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:22px}
.onb-link{background:none;border:none;color:var(--muted);font-size:12.5px;cursor:pointer;
  font-family:inherit;margin-top:12px}
.onb-link:hover{color:var(--cream)}

/* ---- multi-step questionnaire (server-enforced onboarding) ---- */
.onb-wrap{position:relative;width:100%;max-width:480px}
.onb-prog{height:4px;border-radius:999px;background:rgba(var(--ink-rgb),.10);overflow:hidden;margin-bottom:16px}
.onb-prog i{display:block;height:100%;width:0;border-radius:999px;background:var(--gold);
  transition:width .35s cubic-bezier(.4,0,.2,1)}
.onb-wrap .onb-card{max-width:none;text-align:center}
.onb-wrap .onb-choice{cursor:pointer}
.onb-budget{gap:10px}
.onb-budget .onb-choice{padding:14px 18px}
.onb-edit textarea{width:100%;background:var(--charcoal);border:1px solid var(--line);color:var(--cream);
  border-radius:11px;padding:12px 14px;font-family:inherit;font-size:14px;resize:vertical;line-height:1.5}
.onb-edit textarea:focus{outline:none;border-color:var(--gold)}
/* Tim tip - looks like a message from Tim, not a EULA */
.onb-tip{display:flex;gap:14px;text-align:left;background:var(--card2);border:1px solid var(--line);
  border-left:3px solid var(--gold);border-radius:14px;padding:18px 18px 18px 16px;margin:6px 0 4px}
.onb-tip-av{flex:0 0 auto;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  font-weight:800;font-size:15px;color:#fff;background:linear-gradient(135deg,var(--gold),var(--gold-deep))}
.onb-tip-name{font-size:12px;font-weight:700;color:var(--gold-deep);text-transform:uppercase;
  letter-spacing:.4px;margin-bottom:5px}
.onb-tip-body p{font-size:14px;line-height:1.6;color:var(--cream)}
.onb-mini-spin{display:inline-block;width:16px;height:16px;border-radius:50%;
  border:2.5px solid var(--line);border-top-color:var(--gold);animation:rs-spin .8s linear infinite;
  vertical-align:middle}

/* ===================== Research tab ===================== */
.rs-segs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.rs-seg{display:flex;align-items:flex-start;gap:10px;text-align:left;
  background:var(--card);border:1px solid var(--line);border-radius:14px;padding:13px 15px;
  cursor:pointer;font-family:inherit;transition:border-color .15s,background .15s}
.rs-seg:hover{border-color:var(--gold-deep)}
.rs-seg.on{border-color:var(--gold);background:rgba(249,129,37,.08)}
.rs-seg-ico{font-size:20px;line-height:1.2}
.rs-seg-txt{display:flex;flex-direction:column;gap:2px}
.rs-seg-l{font-weight:800;font-size:14px;color:var(--cream)}
.rs-seg.on .rs-seg-l{color:var(--gold)}
.rs-seg-s{font-size:11.5px;color:rgba(var(--ink-rgb),.72)}
.rs-bar{display:flex;gap:10px;margin-bottom:18px}
.rs-search{position:relative;flex:1}
#rsInput{width:100%;background:var(--charcoal);border:1px solid var(--line);color:var(--cream);
  border-radius:12px;padding:13px 15px;font-family:inherit;font-size:14px}
#rsInput:focus{outline:none;border-color:var(--gold)}
.rs-run{background:var(--btn);color:var(--btn-text);font-weight:800;font-size:14px;border:none;
  border-radius:12px;padding:0 26px;cursor:pointer;font-family:inherit;transition:background .15s}
.rs-run:hover{background:var(--gold-deep)}
/* two run buttons: Niche Hunter (orange) + Full Picture (blue) */
.rs-run-nh{background:var(--gold);color:#fff;padding:0 18px}
.rs-run-nh:hover{background:var(--gold-deep)}
.rs-run-fp{background:rgba(44,89,157,.12);color:var(--blue);border:1px solid rgba(44,89,157,.3);padding:0 18px}
.rs-run-fp:hover{background:rgba(44,89,157,.2)}
/* Google-style suggest dropdown */
.rs-suggest{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:30;display:none;
  background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:6px;
  box-shadow:0 14px 40px rgba(0,0,0,.5);max-height:340px;overflow:auto}
.rs-suggest.open{display:block}
.rs-sug{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;
  border:none;border-radius:9px;padding:8px 10px;cursor:pointer;font-family:inherit}
.rs-sug:hover{background:rgba(var(--ink-rgb),.05)}
.rs-sug .crow-av{width:30px;height:30px}
.rs-sug-ico{width:30px;height:30px;display:flex;align-items:center;justify-content:center;font-size:16px}
.rs-sug-main{display:flex;flex-direction:column;min-width:0}
.rs-sug-name{font-size:13.5px;font-weight:600;color:var(--cream);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rs-sug-meta{font-size:11.5px;color:rgba(var(--ink-rgb),.6)}
/* section labels */
.rs-sec-label{font-size:13px;font-weight:700;color:var(--cream);margin:22px 0 11px;letter-spacing:.01em}
.rs-count{color:var(--muted);font-weight:600;margin-left:4px}
.rs-hint{font-size:13px;color:rgba(var(--ink-rgb),.6);background:var(--card);border:1px solid var(--line);
  border-radius:12px;padding:16px 18px}
/* channel cards (logo + name + subs) - the visual quick-picks */
.rs-cc-row{display:flex;flex-wrap:wrap;gap:11px}
.rs-cc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:11px}
/* Top-niche cards (David): colorful, niche name BIG; click = launch Full Picture */
.rs-niche-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.rs-niche{position:relative;display:flex;flex-direction:column;gap:6px;text-align:left;border-radius:15px;
  padding:16px 17px;cursor:pointer;font-family:inherit;border:1px solid var(--line);
  background:var(--card);transition:transform .14s,box-shadow .14s,border-color .14s}
.rs-niche:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover)}
/* while its Niche Hunter run loads, the card covers itself with a spinner + can't be re-clicked
   (David 2026-07-08: "make it also spin where the card is so I see I pressed it"). */
.rs-niche-loading{pointer-events:none}
.rs-niche-load{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  border-radius:15px;background:rgba(12,14,18,.72);color:#fff;font-weight:800;font-size:12.5px;letter-spacing:.02em}
html[data-theme="light"] .rs-niche-load{background:rgba(255,255,255,.84);color:var(--charcoal)}
.rs-niche-load .rs-spin{width:24px;height:24px;border-width:2.5px}
.rs-niche-k{font-size:10px;text-transform:uppercase;letter-spacing:.6px;font-weight:800}
.rs-niche-name{font-size:19px;font-weight:800;line-height:1.15;color:var(--cream);text-transform:capitalize}
.rs-niche-meta{font-size:11.5px;color:var(--muted2);font-weight:600}
.rs-niche-orange{background:rgba(249,129,37,.10);border-color:rgba(249,129,37,.30)}
.rs-niche-orange .rs-niche-k{color:var(--gold-deep)}
.rs-niche-blue{background:rgba(44,89,157,.10);border-color:rgba(44,89,157,.28)}
.rs-niche-blue .rs-niche-k{color:var(--blue)}
.rs-niche-pink{background:rgba(224,86,138,.10);border-color:rgba(224,86,138,.28)}
.rs-niche-pink .rs-niche-k{color:var(--pink)}
.rs-niche-teal{background:rgba(22,184,184,.10);border-color:rgba(22,184,184,.30)}
.rs-niche-teal .rs-niche-k{color:#0e8f8f}
.rs-niche-green{background:rgba(31,164,90,.10);border-color:rgba(31,164,90,.30)}
.rs-niche-green .rs-niche-k{color:#1a7a45}
.rs-cc{display:flex;align-items:center;gap:13px;text-align:left;background:var(--card);
  border:1px solid var(--line);border-radius:14px;padding:15px 17px;cursor:pointer;
  font-family:inherit;min-width:220px;transition:border-color .15s,background .15s}
.rs-cc-row .rs-cc{flex:0 1 265px}
.rs-cc:hover{border-color:var(--gold);background:rgba(249,129,37,.06)}
.rs-cc.own{border-color:var(--gold);background:rgba(249,129,37,.09)}
.rs-cc .crow-av{width:46px;height:46px;flex:0 0 46px;font-size:15px}
.rs-cc-main{display:flex;flex-direction:column;min-width:0;gap:2px}
.rs-cc-name{font-size:15.5px;font-weight:800;color:var(--cream);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rs-cc-meta{font-size:12.5px;color:rgba(var(--ink-rgb),.66);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rs-cc-you{font-size:10px;font-weight:800;color:#2c2100;background:var(--gold);
  border-radius:5px;padding:1px 6px;margin-left:5px;vertical-align:middle}
/* full picture / untouched virals: clickable video tiles (thumbnail carries it) */
.rs-vidgrid .rs-vid{cursor:pointer;transition:border-color .15s}
.rs-vidgrid .rs-vid:hover{border-color:var(--gold)}
.rs-vidgrid .rs-vid .body::after{display:none}
/* result area (loading / report iframe). Empty = collapsed, no grey box. David 2026-07-08:
   now holds one card PER RUN (several can be in flight/finished at once) - stack with a gap
   instead of the flush-together look that was fine when only one card ever existed. */
.rs-result{display:flex;flex-direction:column;gap:14px}
.rs-result:empty{display:none}
.rs-loading,.rs-error{background:var(--card);border:1px solid var(--line);
  border-radius:16px;padding:34px 26px;text-align:center;color:var(--cream)}
.rs-loading{display:flex;flex-direction:column;align-items:center;gap:16px}
.rs-spin{width:34px;height:34px;border-radius:50%;border:3px solid var(--line);
  border-top-color:var(--gold);animation:rs-spin 0.8s linear infinite}
@keyframes rs-spin{to{transform:rotate(360deg)}}
.rs-load-txt{font-size:13.5px;max-width:440px;line-height:1.55;color:rgba(var(--ink-rgb),.82)}
.rs-retry{margin-left:8px;background:var(--gold);color:#2c2100;font-weight:700;border:none;
  border-radius:8px;padding:6px 13px;cursor:pointer;font-family:inherit;font-size:12.5px}
.rsr-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.rsr-q{font-size:14px;color:var(--cream)}
.rsr-q b{color:var(--gold)}
.rsr-open{font-size:12.5px;color:var(--gold);white-space:nowrap}
.rsr-open:hover{text-decoration:underline}
.rsr-frame{width:100%;height:78vh;border:1px solid var(--line);border-radius:14px;
  background:var(--card2);display:block}
/* David 2026-07-08: .rs-result is now a gapped flex column (multiple run cards stack) - an
   EMPTY frame-wrap (preview not opened) must not still eat a gap on both sides of nothing. */
.rsr-frame-wrap:empty{display:none}
.rsr-note{font-size:12px;color:var(--muted2);margin-top:9px;text-align:center}
.rsr-note b{color:var(--muted)}
/* W5: non-trapping running card (left-aligned, reassuring) + Run-button pulse */
.rs-running{background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:20px 22px;display:flex;align-items:flex-start;gap:16px;color:var(--cream)}
.rs-running .rs-spin{flex:0 0 auto;margin-top:2px}
.rs-run-txt{display:flex;flex-direction:column;gap:4px;font-size:13.5px;line-height:1.55}
.rs-run-txt b{color:var(--cream)}
.rs-run-txt span{color:rgba(var(--ink-rgb),.78)}
.rs-run-txt span b{color:var(--gold)}
@keyframes rs-pulse{0%{box-shadow:0 0 0 0 rgba(249,129,37,.55)}70%{box-shadow:0 0 0 10px rgba(249,129,37,0)}100%{box-shadow:0 0 0 0 rgba(249,129,37,0)}}
.rs-run.pulse{animation:rs-pulse 1.1s ease-out 2}
/* W5: finished report = a "ready" card with Open + opt-in inline preview */
.rsr-ready{display:flex;align-items:center;gap:14px;background:var(--card);
  border:1px solid var(--line);border-radius:16px;padding:16px 18px;flex-wrap:wrap}
.rsr-ok{flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:rgba(120,200,120,.16);
  color:#7ec87e;display:flex;align-items:center;justify-content:center;font-weight:800}
.rsr-main{flex:1 1 200px;min-width:0;display:flex;flex-direction:column;gap:2px}
.rsr-sub{font-size:12px;color:var(--muted2)}
.rsr-sub b{color:var(--muted)}
.rsr-open{background:var(--btn);color:var(--btn-text);font-weight:800;font-size:12.5px;border-radius:10px;
  padding:9px 15px;white-space:nowrap}
.rsr-open:hover{background:var(--gold-deep);text-decoration:none}
.rsr-preview{background:none;border:1px solid var(--line);color:var(--cream);font-weight:600;
  font-size:12.5px;border-radius:10px;padding:9px 15px;cursor:pointer;font-family:inherit;white-space:nowrap}
.rsr-preview:hover{border-color:var(--gold)}
.rsr-frame-wrap:not(:empty){margin-top:12px}

/* ===================== My Channel (YouTube connect) ===================== */
.yt-connect{display:flex;gap:18px;align-items:flex-start;background:var(--card);
  border:1px solid var(--line);border-radius:16px;padding:24px 26px;max-width:680px}
.yt-connect-ico{flex:none;width:52px;height:52px;border-radius:14px;background:#ff0000;
  color:#fff;font-size:22px;display:grid;place-items:center}
.yt-connect-body h3{margin:0 0 6px;font-size:17px;color:var(--cream)}
.yt-connect-body p{margin:0 0 16px;font-size:13.5px;line-height:1.6;color:rgba(var(--ink-rgb),.72)}
.yt-connect-body p b{color:var(--cream)}
.yt-connect-btn{background:var(--btn);color:var(--btn-text);font-weight:800;font-size:14px;border:none;
  border-radius:11px;padding:12px 22px;cursor:pointer;font-family:inherit;transition:background .15s}
.yt-connect-btn:hover{background:var(--gold-deep)}
.yt-connect-btn:disabled{opacity:.6;cursor:default}
.yt-note{background:rgba(249,129,37,.10);border:1px solid var(--line);border-radius:10px;
  padding:11px 15px;font-size:13px;color:var(--cream);margin-bottom:16px;max-width:680px}
.yt-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.yt-chip{display:flex;align-items:center;gap:7px;background:var(--card);border:1px solid var(--line);
  border-radius:999px;padding:6px 13px 6px 6px;font-size:13px;font-weight:600;color:var(--muted);
  cursor:pointer;font-family:inherit;transition:border-color .15s,color .15s}
.yt-chip img{width:22px;height:22px;border-radius:50%;object-fit:cover;background:var(--line)}
.yt-chip:hover{border-color:var(--gold);color:var(--cream)}
.yt-chip.on{border-color:var(--gold);color:var(--gold);background:rgba(249,129,37,.08)}
.yt-chip.add{color:var(--gold);padding:6px 14px}
.yt-head{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.yt-head-id{min-width:0}
/* YouTube-Studio-style date dropdown */
.yt-rangedd{margin-left:auto;position:relative}
.yt-ddbtn{background:var(--card);border:1px solid var(--line);border-radius:10px;font:inherit;font-size:12.5px;font-weight:700;color:var(--cream);cursor:pointer;padding:8px 13px;display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.yt-ddbtn:hover{border-color:var(--gold)}
.yt-ddcar{color:var(--muted2);font-size:10px}
.yt-ddmenu{position:absolute;top:calc(100% + 6px);right:0;min-width:210px;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-pop,0 12px 32px rgba(0,0,0,.22));padding:6px;z-index:40;display:none;max-height:none;overflow:visible}
.yt-ddmenu.open{display:block}
.ytrm-item{display:block;width:100%;text-align:left;background:none;border:none;font:inherit;font-size:13px;color:var(--cream);cursor:pointer;padding:8px 11px;border-radius:8px}
.ytrm-item:hover{background:color-mix(in srgb,var(--gold) 12%,transparent)}
.ytrm-item.on{background:var(--gold);color:#2c2100;font-weight:700}
.ytrm-sep{height:1px;background:var(--line);margin:5px 4px}
.ytrm-custom{display:flex;align-items:center;gap:6px;padding:8px 5px 5px;flex-wrap:wrap}
.ytrm-din{flex:1;min-width:96px;background:var(--charcoal);border:1px solid var(--line);color:var(--cream);border-radius:8px;padding:8px;font:inherit;font-size:12px}
.ytrm-custom span{color:var(--muted2)}
.ytrm-apply{flex:0 0 auto;background:var(--gold);color:#2c2100;border:none;border-radius:8px;padding:8px 13px;font:inherit;font-weight:800;font-size:12px;cursor:pointer}
.yt-rangedd+.yt-logout{margin-left:10px}
.yt-logout{margin-left:auto;flex:0 0 auto;background:transparent;color:var(--muted);
  border:1px solid var(--line);border-radius:9px;padding:8px 14px;font-size:12.5px;font-weight:700;
  cursor:pointer;white-space:nowrap;transition:all .15s}
.yt-logout:hover{border-color:var(--red);color:var(--red);background:rgba(240,138,138,.08)}
.yt-logout:disabled{opacity:.6;cursor:default}
.yt-av{width:54px;height:54px;border-radius:50%;object-fit:cover;background:var(--line)}
.yt-name{font-size:18px;font-weight:800;color:var(--cream)}
.yt-range{font-size:12.5px;color:rgba(var(--ink-rgb),.6)}
.yt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:11px;margin-bottom:26px}
.yt-card{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:16px 17px}
.yt-v{font-size:24px;font-weight:800;color:var(--cream);line-height:1.1}
.yt-k{font-size:12px;color:rgba(var(--ink-rgb),.6);margin-top:5px}
/* My Channel vidIQ-style hierarchy: big colored hero row + grouped sections */
.yt-hero{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:13px;margin-bottom:8px}
.yt-hero .yt-card.hero{padding:22px 22px;border-radius:16px;background:
  radial-gradient(120% 140% at 0% 0%, rgba(249,129,37,.07), transparent 60%), var(--card)}
.yt-card.hero .yt-v{font-size:34px}
.yt-card.hero .yt-k{font-size:12.5px;margin-top:8px;text-transform:uppercase;letter-spacing:.05em}
.yt-card.gold .yt-v{color:var(--gold)}
.yt-card.pos .yt-v{color:#7ec87e}
.yt-card.neg .yt-v{color:#e08a8a}
.yt-card.pos{border-color:rgba(126,200,126,.28)}
.yt-card.neg{border-color:rgba(224,138,138,.26)}
.yt-sec{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--gold);opacity:.85;margin:22px 2px 12px}
.yt-sec-note{font-weight:600;letter-spacing:.02em;text-transform:none;color:var(--muted2);margin-left:6px}
/* Sync wait-screen + Loom slots (onboarding) */
.sync-hero{position:relative;background:radial-gradient(120% 140% at 0% 0%, rgba(249,129,37,.10), transparent 55%), var(--card);
  border:1px solid var(--line);border-radius:18px;padding:24px 26px;margin-bottom:18px;box-shadow:var(--shadow-card)}
.sync-x{position:absolute;top:14px;right:14px;background:transparent;border:none;color:var(--muted2);font-size:15px;cursor:pointer}
.sync-x:hover{color:var(--cream)}
.sync-emoji{font-size:30px}
.sync-hero h2{font-size:21px;font-weight:800;color:var(--cream);margin:8px 0 6px}
.sync-hero p{font-size:14px;color:var(--muted);line-height:1.55;margin:0 0 14px;max-width:620px}
.sync-bar{height:7px;border-radius:6px;background:var(--charcoal);overflow:hidden;max-width:620px;margin-bottom:18px}
.sync-bar span{display:block;height:100%;width:38%;border-radius:6px;background:linear-gradient(90deg,var(--gold),var(--blue));
  animation:sync-slide 2.2s ease-in-out infinite}
@keyframes sync-slide{0%{margin-left:-40%}100%{margin-left:100%}}
.sync-looms-h{font-size:12px;font-weight:700;color:var(--muted2);text-transform:uppercase;letter-spacing:.04em;margin-bottom:9px}
.loom-row{display:flex;flex-wrap:wrap;gap:10px}
.loom-slot{display:flex;align-items:center;gap:9px;background:var(--card2);border:1px solid var(--line);
  border-radius:11px;padding:10px 13px;font-size:12.5px;font-weight:600;color:var(--muted);text-decoration:none;min-width:160px}
.loom-slot.has{cursor:pointer}.loom-slot.has:hover{border-color:var(--gold);color:var(--cream)}
.loom-slot.soon{opacity:.7}
.loom-play{width:24px;height:24px;flex:0 0 auto;border-radius:50%;background:var(--gold);color:#fff;
  display:grid;place-items:center;font-size:10px}
.loom-soon{margin-left:auto;font-size:9px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted2);
  border:1px solid var(--line);border-radius:5px;padding:1px 5px}
.tour-loom{margin:10px 0 4px}
/* connect panel: "is this your channel?" yes/no */
.yt-connect-choices{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.yt-connect-copy{background:transparent;border:1px solid var(--line);color:var(--muted);border-radius:10px;
  padding:11px 16px;font-size:13.5px;font-weight:700;cursor:pointer}
.yt-connect-copy:hover{border-color:var(--gold);color:var(--cream)}
/* My Channel Overview (YouTube-Studio mirror) */
.ytov{margin-bottom:8px}
.ytov-head{font-size:18px;font-weight:800;color:var(--cream);margin:2px 2px 16px;line-height:1.25}
.ytov-head b{color:var(--cream)}
/* David 2026-06-25: My Channel top row = channel switcher + setup button (header/plate deleted) */
.mych-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.mych-top .yt-chips{margin:0}
.mych-top .pnl-setup{margin-left:auto}
.ytov-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:13px;margin-bottom:18px}
.ytov-tile{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px;box-shadow:var(--shadow-card)}
.ytov-k{font-size:12px;color:var(--muted2);text-transform:uppercase;letter-spacing:.04em;font-weight:700}
.ytov-v{font-size:23px;font-weight:800;color:var(--tm,var(--cream));margin-top:8px;line-height:1.05}
/* loading skeleton for money tiles before videos load (David 2026-06-27: no wrong-number flash) */
.ytov-sk{display:inline-block;width:120px;height:24px;margin-top:2px;border-radius:7px;background:linear-gradient(90deg,rgba(var(--ink-rgb),.06),rgba(var(--ink-rgb),.14),rgba(var(--ink-rgb),.06));background-size:200% 100%;animation:ytovsk 1.1s linear infinite}
@keyframes ytovsk{0%{background-position:200% 0}100%{background-position:-200% 0}}
.ytov-v.pos{color:#46BC88}.ytov-v.neg{color:var(--red)}
/* David 2026-07-06: LIGHT MODE - all four channel-tile numbers are near-black (not the per-metric
   colour). Frames are grey when NOT selected; the tile you click turns our site blue #5F8FC4. */
html[data-theme="light"] .ytov-v,
html[data-theme="light"] .ytov-v.pos,
html[data-theme="light"] .ytov-v.neg{color:var(--cream)}
html[data-theme="light"] .ytov-tile{border-color:#C9CED6}
html[data-theme="light"] .ytov-tile:hover{border-color:#AEB4BD}
html[data-theme="light"] .ytov-tile::before{background:#C9CED6}
html[data-theme="light"] .ytov-tile.sel{border-color:#5F8FC4;box-shadow:0 0 0 1px #5F8FC4 inset,var(--shadow-card)}
html[data-theme="light"] .ytov-tile.sel::before{background:#5F8FC4}
html[data-theme="light"] .ytov-tile:focus-visible{outline-color:#5F8FC4}
.ytov-sub{font-size:11.5px;color:var(--muted2);margin-top:5px}
.ytov-hint{font-size:13px;font-weight:600;color:var(--muted2);margin-left:6px}
/* clickable Studio tiles - pick the metric the graph draws (David 2026-06-24) */
.ytov-tile{cursor:pointer;transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease;position:relative;overflow:hidden}
.ytov-tile::before{content:"";position:absolute;left:0;top:0;height:3px;width:100%;background:var(--tm,var(--gold));opacity:0;transition:opacity .12s ease}
.ytov-tile:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--tm,var(--gold)) 55%,var(--line))}
.ytov-tile:hover::before{opacity:.5}
.ytov-tile.sel{border-color:var(--tm,var(--gold));box-shadow:0 0 0 1px var(--tm,var(--gold)) inset,var(--shadow-card)}
.ytov-tile.sel::before{opacity:1}
.ytov-tile:focus-visible{outline:2px solid var(--tm,var(--gold));outline-offset:2px}
.ytov-chart{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 18px;
  box-shadow:var(--shadow-card);position:relative}
/* Studio metric chart (clickable-tile graph) */
.ysc-legend{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin:0 2px 10px;font-size:12px;color:var(--muted2);font-weight:600}
.ysc-lg{display:inline-flex;align-items:center;gap:6px}
.ysc-upico{width:15px;height:15px;flex:0 0 auto}
.ytov-tile.static{cursor:default}
.ytov-tile.static:hover{transform:none;border-color:var(--line)}
.ytov-tile.static:hover::before{opacity:0}
.ytov-hero{margin-top:2px}
.ysc-lg.sep{margin-left:auto}
.ysc-lg i{width:11px;height:11px;border-radius:3px;display:inline-block}
.ysc-lg i.ysc-updot{border-radius:50%}
.ysc-svg{width:100%;height:auto;display:block;touch-action:pan-y}
.ysc-line{fill:none;stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.ysc-line.ysc-exp{stroke-dasharray:5 4}
.ysc-area{opacity:.10}
.ysc-up{cursor:pointer}
/* David 2026-07-03: month-count upload circles 10% bigger (r 9 -> 9.9). CSS geometry
   property, so the JS marker code is untouched. Count text stays centered. */
.ysc-up circle{r:9.9px}
/* a month circle is a button now: click -> that month's videos (David 2026-07-16) */
.ysc-upj{transition:opacity .12s}
.ysc-upj:hover .ysc-updisc{opacity:1}
.ysc-upj:hover .ysc-upc{fill:#fff}
.ysc-upj:focus{outline:none}
.ysc-upj:focus-visible .ysc-uptrack{display:block;stroke:var(--gold);stroke-width:2}
.ysc-upn{font-size:8.5px;font-weight:800;fill:var(--muted2);pointer-events:none}
.ysc-tip{position:absolute;top:38px;transform:translateX(-50%);background:var(--card);
  color:var(--cream);border:1px solid var(--line);border-radius:11px;padding:9px 11px;min-width:160px;
  box-shadow:var(--shadow-pop,0 8px 24px rgba(0,0,0,.18));font-size:12.5px;pointer-events:none;opacity:0;transition:opacity .1s ease;z-index:6}
.ysc-tip.show{opacity:1}
.ysc-td{font-weight:800;color:var(--cream);margin-bottom:5px}
.ysc-tr{display:flex;justify-content:space-between;gap:14px;margin:2px 0}
.ysc-tr span{color:var(--muted2);font-weight:600}.ysc-tr b{color:var(--cream)}
.ysc-tu{margin-top:7px;padding-top:6px;border-top:1px solid var(--line);font-weight:700;color:var(--cream);font-size:11.5px}
.ysc-tu.none{font-weight:600;color:var(--muted2)}
.ysc-uli{display:flex;align-items:center;gap:6px;margin-top:4px;font-size:11.5px;color:var(--muted)}
.ysc-uli i{width:7px;height:7px;border-radius:50%;flex:none}
.ysc-uth{width:60px;height:35px;object-fit:cover;border-radius:4px;flex:none;background:rgba(var(--ink-rgb),.1)}
.ysc-uli i.long{background:#2C599D}.ysc-uli i.short{background:#F98125}
.ysc-uli span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px}
.ysc-uli em{font-style:normal;color:var(--muted2);font-size:10px;flex:none}
.ysc-umore{font-size:10.5px;color:var(--muted2);margin-top:3px}
/* click-to-reveal cost breakdown inside the money-chart tooltip */
.ysc-tcost{margin-top:7px;padding-top:6px;border-top:1px solid var(--line)}
.ysc-tch{font-weight:800;color:var(--cream);font-size:11px;text-transform:uppercase;letter-spacing:.3px;margin-bottom:3px}
.ysc-cli{display:flex;justify-content:space-between;gap:14px;margin:2px 0;font-size:11.5px;color:var(--muted)}
.ysc-cli b{color:var(--cream);font-weight:700}
/* My Channel "At a glance" widget strip */
.cwg-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0 0 8px}
.cwg{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-card);padding:14px 16px}
.cwg-k{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted2);font-weight:800}
.cwg-v{font-size:22px;font-weight:900;color:var(--cream);margin-top:4px;line-height:1.1}
.cwg-sub{font-size:12px;color:var(--muted);margin-top:4px}
@media(max-width:860px){.cwg-row{grid-template-columns:1fr}}
/* Competitor-uploads list block (tracked channels' latest videos) */
.cu-list{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-card);overflow:hidden;margin-bottom:22px}
.cu-row{display:flex;align-items:center;gap:13px;padding:11px 14px;border-bottom:1px solid var(--line);text-decoration:none;color:inherit;transition:background .12s}
.cu-row:last-child{border-bottom:none}
.cu-row:hover{background:rgba(var(--ink-rgb),.03)}
.cu-thumb{position:relative;width:74px;height:42px;flex:none;border-radius:8px;background:var(--line) center/cover no-repeat}
.cu-new{position:absolute;top:3px;left:3px;background:var(--blue);color:#fff;font-size:9px;font-weight:800;
  text-transform:uppercase;letter-spacing:.3px;padding:1px 5px;border-radius:5px}
.cu-main{flex:1;min-width:0}
.cu-title{display:block;font-weight:700;color:var(--cream);font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cu-by{display:flex;align-items:center;gap:6px;margin-top:3px}
.cu-av{width:18px;height:18px;border-radius:50%;object-fit:cover;flex:none;background:var(--line)}
.cu-av.init{display:grid;place-items:center;font-size:9px;font-weight:800;color:#fff;background:var(--blue)}
.cu-ch{font-size:12px;color:var(--muted);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cu-meta{flex:none;font-size:12px;color:var(--muted2);font-weight:600;text-align:right;max-width:150px}
@media(max-width:560px){.cu-meta{display:none}}
/* tiny channel avatar inside the competitor-uploads table date line */
.cu-tav{width:15px;height:15px;border-radius:50%;object-fit:cover;vertical-align:-3px;margin-right:5px;background:var(--line);display:inline-block}
.cu-tav.init{display:inline-grid;place-items:center;font-size:8px;font-weight:800;color:#fff;background:var(--blue)}
/* My Notes search bar */
.notes-search{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);
  border-radius:11px;padding:8px 12px;margin:0 0 14px;box-shadow:var(--shadow-card)}
.ns-ico{color:var(--muted2);font-size:15px;flex:none}
.notes-search input{flex:1;border:none;background:transparent;color:var(--cream);font-size:14px;outline:none}
.ns-clear{flex:none;border:none;background:transparent;color:var(--muted2);cursor:pointer;font-size:14px;padding:2px 4px}
.ns-clear:hover{color:var(--cream)}
.todo-donelist{margin-top:8px}
/* Home feed (TikTok / news-feed style, 2-column grid of cards) */
/* Home = Google-News / Twitter style (David 2026-06-26, from Tim's call): ONE big card
   per row, image-left + text-right, templated headline + "why it matters" line. */
.home-feed{max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
/* Instant starter board (David 2026-07-06): proven-example channels/ideas shown while
   the user's REAL board is still empty (~15 min of day-1 scans). Distinct green-tinted
   frame so it never gets mistaken for the user's own data; hands off to the real feed
   the moment dash_ data lands (starterBoardHtml() simply stops rendering it). */
.starter-board{max-width:720px;margin:0 auto 18px;animation:starter-fade-in .35s ease}
@keyframes starter-fade-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.starter-board-head{margin-bottom:10px;padding:0 2px}
.starter-board-head b{display:block;font-size:14.5px;font-weight:800;color:var(--cream)}
.starter-board-sub{display:block;font-size:12px;color:var(--muted2);margin-top:3px;line-height:1.5}
.starter-grid{gap:14px}
.hf-starter{border-color:rgba(85,135,110,.35)!important}
.hf-card{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-card);cursor:pointer;transition:transform .12s,box-shadow .12s;display:flex;flex-direction:row;align-items:stretch;min-height:172px}
.hf-card[role]:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,.18)}
.hf-card:not([role]){cursor:default}
/* nice news-card thumbnail (David 2026-06-26 "do not crop images, fit them even though
   they differ in size"): a fixed-width full-height column. The WHOLE image shows via
   object-fit:contain (never cropped), and a blurred copy of the same image fills the
   letterbox so there are no ugly bars - works for any aspect ratio. */
.hf-thumb{flex:0 0 264px;align-self:stretch;position:relative;overflow:hidden;background:#0b0f18}
.hf-thumb::before{content:"";position:absolute;inset:0;background:var(--hfbg,none) center/cover no-repeat;filter:blur(20px) brightness(.55);transform:scale(1.15)}
.hf-img{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;display:block}
.hf-noimg{display:grid;place-items:center}
.hf-noico{font-size:42px;opacity:.85}
.hf-pill{position:absolute;top:10px;left:10px;background:rgba(0,0,0,.75);color:#fff;font-size:12px;font-weight:800;padding:3px 9px;border-radius:999px}
.hf-body{padding:15px 18px;flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;gap:1px;min-width:0}
.hf-tag{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;border-radius:999px;padding:3px 9px;align-self:flex-start}
/* clickable source tag -> jumps to that section (David 2026-06-26) */
.hf-tagnav{cursor:pointer;transition:filter .1s,transform .06s}
.hf-tagnav:hover{filter:brightness(1.18)}
.hf-tagnav:active{transform:translateY(1px)}
.hf-title{font-size:19px;font-weight:800;color:var(--cream);margin:9px 0 3px;line-height:1.28;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hf-why{font-size:13.5px;color:var(--muted);line-height:1.45;margin:2px 0 7px;display:flex;flex-wrap:wrap;gap:7px;align-items:baseline}
.hf-whyk{font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.05em;color:var(--blue);background:rgba(44,89,157,.10);border-radius:5px;padding:2px 6px;flex:0 0 auto}
.hf-sub{font-size:12.5px;color:var(--muted2);line-height:1.4}
/* Tim-on-X card (David 2026-07-08): the "tap to read" prompt sits at the BOTTOM of the right
   column so the card reads like the YouTube one - .hf-edit is a flex column, so margin-top:auto
   pushes it down to fill the height set by the left thumbnail column. */
.hf-xsub{margin-top:auto;padding-top:10px}
/* the post text + prompt open the post on X - show they're clickable (the card itself is
   role-less so .hf-card:not([role]) makes the base cursor default). David 2026-07-08. */
.hf-tim .hf-ehead[data-hf-vid],.hf-xsub[data-hf-vid]{cursor:pointer}
.hf-xsub[data-hf-vid]:hover{color:var(--cream)}
.hf-tim .hf-ehead[data-hf-vid]:hover{text-decoration:underline}
/* channel chip: logo + name + subs (David 2026-06-26) */
.hf-chan{display:flex;align-items:center;gap:7px;margin:1px 0 4px}
.hf-chav{width:22px;height:22px;border-radius:50%;object-fit:cover;flex:0 0 auto;background:var(--line)}
.hf-chav-i{display:grid;place-items:center;font-size:11px;font-weight:800;color:var(--muted2)}
.hf-chname{font-size:13px;font-weight:800;color:var(--cream)}
.hf-chsubs{font-size:12px;color:var(--muted2);font-weight:600}
.hf-chsubs::before{content:"·";margin-right:5px}
.hf-go{margin-top:7px;font-size:12.5px;font-weight:800;color:var(--blue)}
.hf-compact{align-items:center;gap:14px;padding:16px 18px}
.hf-compact .hf-body{padding:0}
.hf-ico{flex:0 0 auto;width:54px;height:54px;border-radius:14px;display:grid;place-items:center;font-size:26px;align-self:center}
@media(max-width:560px){
  .hf-card{flex-direction:column}
  .hf-thumb{flex:0 0 auto;align-self:stretch;aspect-ratio:16/9}
  .hf-compact{flex-direction:row;align-items:center}
}
/* P&L snapshot card (the first card = your calculation math) */
.hf-pnl .hf-body{padding:15px 16px 16px}
.hf-pnlgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;margin:10px 0 4px}
.hf-pn{display:flex;flex-direction:column;gap:1px}
.hf-pn i{font-style:normal;font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted2);font-weight:800}
.hf-pn b{font-size:18px;font-weight:900;color:var(--cream)}
/* loading skeleton for the Home P&L card before videos load (David 2026-06-27, like .ytov-sk) */
.hf-sk{display:inline-block;width:88px;height:18px;border-radius:5px;background:linear-gradient(90deg,rgba(var(--ink-rgb),.06),rgba(var(--ink-rgb),.14),rgba(var(--ink-rgb),.06));background-size:200% 100%;animation:ytovsk 1.1s linear infinite}
.hf-pn b.pos{color:var(--green)}.hf-pn b.neg{color:var(--red,#D0513B)}
.hf-seemore{margin-top:auto;padding-top:10px;font-size:12.5px;font-weight:800;color:var(--blue)}
/* native "from Tim" cards */
.hf-tim{border-color:rgba(251,155,80,.45)}
.hf-timtag{display:inline-flex;align-items:center;gap:5px;background:rgba(251,155,80,.14);color:var(--gold-deep);
  font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;border-radius:999px;padding:3px 9px 3px 4px}
.hf-timav{width:18px;height:18px;border-radius:50%;object-fit:cover;flex:none;background:var(--line)}
.hf-xico{background:#0b0b0b;color:#fff;font-weight:900;font-size:22px}
.hf-xtext{font-size:14px;font-weight:600;line-height:1.4;-webkit-line-clamp:4!important}
/* image / gif / video attached to Tim's X post */
.hf-hasmedia .hf-xtext{-webkit-line-clamp:2!important}
.hf-xmedia{position:relative;margin:8px 0 2px;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#0b0b0b;line-height:0}
.hf-xmedia img,.hf-xmedia video{display:block;width:100%;max-height:220px;object-fit:cover}
.hf-xplay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;
  background:rgba(0,0,0,.6);color:#fff;display:grid;place-items:center;font-size:16px;padding-left:3px;pointer-events:none}
/* ---- BIG merged home card (David 2026-06-26): two old cards' worth of size. LEFT =
   native YouTube video block (thumb -> title -> views·age -> channel logo+name+subs,
   no 3-dots). RIGHT = source tag (top) + templated headline + niche-bends to steal. ---- */
.hf-big{align-items:stretch;min-height:auto}
.hf-yt{flex:0 0 340px;padding:14px;display:flex;flex-direction:column;gap:9px;border-right:1px solid var(--line);min-width:0}
.hf-ytthumb{position:relative;width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#0b0f18;flex:0 0 auto}
.hf-ytthumb::before{content:"";position:absolute;inset:0;background:var(--hfbg,none) center/cover no-repeat;filter:blur(18px) brightness(.6);transform:scale(1.15)}
.hf-yimg{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;display:block}
.hf-ytthumb.hf-noimg{display:grid;place-items:center}
.hf-ybadge{position:absolute;z-index:2;top:8px;left:8px;background:rgba(0,0,0,.78);color:#fff;font-size:11px;font-weight:800;padding:3px 8px;border-radius:7px}
.hf-ytdur{position:absolute;z-index:2;right:8px;bottom:8px;background:rgba(0,0,0,.85);color:#fff;font-size:12px;font-weight:700;padding:1px 6px;border-radius:5px;line-height:1.5}
.hf-yttitle{font-size:15px;font-weight:700;color:var(--cream);line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hf-ytmeta{font-size:12.5px;color:var(--muted2);font-weight:600;margin-top:-4px}
.hf-ytchan{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:5px;min-width:0;
  border-radius:9px;margin-left:-6px;padding-left:6px;padding-right:6px;transition:background .15s}
.hf-ytchan[data-hf-chan]{cursor:pointer}
.hf-ytchan[data-hf-chan]:hover{background:rgba(var(--ink-rgb),.05)}
.hf-ytchan[data-hf-chan]:hover .hf-yname{text-decoration:underline}
.hf-yav{width:36px;height:36px;border-radius:50%;object-fit:cover;flex:0 0 auto;background:var(--line)}
.hf-yav-i{display:grid;place-items:center;font-size:15px;font-weight:800;color:var(--muted2)}
.hf-ytcmeta{display:flex;flex-direction:column;min-width:0}
.hf-yname{font-size:13.5px;font-weight:700;color:var(--cream);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hf-ysubs{font-size:12px;color:var(--muted2);font-weight:600;line-height:1.3}
.hf-edit{flex:1 1 auto;padding:16px 18px;display:flex;flex-direction:column;min-width:0}
.hf-ehead{font-size:21px;font-weight:900;color:var(--cream);line-height:1.22;margin:12px 0 0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* Tim card: show the FULL GPT analysis + description, don't cap them (David 2026-06-27) */
.hf-ehead-full{font-size:18px;font-weight:800;-webkit-line-clamp:unset;display:block;overflow:visible}
.hf-desc-full{-webkit-line-clamp:unset!important;display:block!important;overflow:visible!important}
/* Tim card summary reads like a paragraph, not a giant bold headline (David 2026-06-27 "too much caps + bold"). */
.hf-tim .hf-ehead{font-size:15.5px;font-weight:600;line-height:1.5;margin-top:10px}
/* Tim card 3-question analysis (David 2026-06-28: answer why-watch / interesting / takeaway). */
.hf-qa{display:flex;flex-direction:column;gap:12px;margin-top:12px}
.hf-q i{display:block;font-style:normal;font-size:10.5px;font-weight:900;text-transform:uppercase;letter-spacing:.05em;color:var(--gold)}
.hf-q p{margin:3px 0 0;font-size:14px;font-weight:600;color:var(--cream);line-height:1.45}
/* Niche / Style tags on the Proven Niches home card - SOLID colour pills ported from
   Proven Niches so they match exactly (David 2026-07-03). Light + dark palettes. */
.hf-nhmeta{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 4px}
.nh-tag{display:inline-flex;align-items:center;font-size:12.5px;font-weight:700;border-radius:999px;
  padding:4px 12px;color:var(--tag-text);background:var(--tag-default-bg);white-space:nowrap}
.nh-tag.tag-brown{background:var(--tag-brown-bg)}
.nh-tag.tag-blue{background:var(--tag-blue-bg)}
.nh-tag.tag-gray{background:var(--tag-gray-bg)}
.nh-tag.tag-orange{background:var(--tag-orange-bg)}
.nh-tag.tag-yellow{background:var(--tag-yellow-bg)}
.nh-tag.tag-green{background:var(--tag-green-bg)}
.nh-tag.tag-purple{background:var(--tag-purple-bg)}
.nh-tag.tag-pink{background:var(--tag-pink-bg)}
.nh-tag.tag-red{background:var(--tag-red-bg)}
/* tag palette (light default) */
:root{--tag-default-bg:#e7e3d8;--tag-gray-bg:#d8d5cc;--tag-brown-bg:#e6cdb8;--tag-orange-bg:#f5c89a;
  --tag-yellow-bg:#f3dc8b;--tag-green-bg:#b6d9a7;--tag-blue-bg:#a7c8e5;--tag-purple-bg:#cbb6e0;
  --tag-pink-bg:#e8b4cb;--tag-red-bg:#f0b2a7;--tag-text:#2a2824}
html[data-theme^="dark"]{--tag-default-bg:#3a3429;--tag-gray-bg:#3a3429;--tag-brown-bg:#6b4e33;
  --tag-orange-bg:#8a5223;--tag-yellow-bg:#8a6f1a;--tag-green-bg:#55876E;--tag-blue-bg:#2a4f82;
  --tag-purple-bg:#513770;--tag-pink-bg:#6f2f55;--tag-red-bg:#7a3228;--tag-text:#ece6d6}
.hf-blabel{font-size:9.5px;font-weight:900;text-transform:uppercase;letter-spacing:.06em;color:var(--blue);margin:16px 0 7px}
.hf-bends{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:7px}
.hf-bends li{position:relative;padding-left:19px;font-size:13.5px;color:var(--muted);line-height:1.4}
.hf-bends li::before{content:"↳";position:absolute;left:0;top:-1px;color:var(--blue);font-weight:900}
/* David 2026-06-27: each bend = text + a Tell-Claude button, split by a rule (Ideas-tab style) */
.hf-bends li.hf-bend{display:flex;align-items:center;gap:10px;padding-left:0;padding-top:9px;border-top:1px solid var(--line)}
.hf-bends li.hf-bend::before{display:none}
/* niche bend row: bent niche (label) + a proven title under it */
.hf-bends li.hf-bend2{padding-left:19px;display:flex;flex-direction:column;gap:2px}
.hf-bend2 .hf-bendn{font-weight:800;color:var(--cream);font-size:13px}
.hf-bend2 .hf-bendt2{color:var(--muted);font-size:12.5px;line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hf-bend .hf-bendt{flex:1;min-width:0;color:var(--cream);font-weight:600}
.hf-bend .hf-tell{flex:0 0 auto;white-space:nowrap}
/* gilded "look here first" card (1 of N) */
.hf-gold{border:1.5px solid var(--gold) !important;box-shadow:0 0 0 3px rgba(249,129,37,.10),var(--shadow-card) !important;position:relative}
/* top:6px (not negative) - .hf-card has overflow:hidden for its rounded corners +
   blurred thumbnail bg, so a negative top clipped the top half of this ribbon
   off the card entirely (David 2026-07-06: "worth a look is cut quite badly"). */
.hf-gold::after{content:"★ Worth a look";position:absolute;top:6px;left:16px;background:var(--gold);color:#2c2100;font-size:10px;font-weight:800;padding:3px 9px;border-radius:20px;z-index:3}
/* Run-Full-Picture: report flies to My Notes + a pending badge parks there */
.fly-report{position:fixed;z-index:9999;line-height:0;pointer-events:none;will-change:transform,opacity;filter:drop-shadow(0 4px 9px rgba(196,97,15,.32))}
.fly-report svg{display:block}
/* the My Notes line gives a quick bump when the flown report lands on it */
@keyframes navhit{0%{transform:scale(1)}42%{transform:scale(1.13)}100%{transform:scale(1)}}
.nav-item.nav-hit{animation:navhit .45s ease}
.nav-pending{margin-left:auto;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--gold);color:#2c2100;font-size:11px;font-weight:800;display:inline-flex;align-items:center;justify-content:center}
.hf-fp-done{opacity:.7;cursor:default}
.hf-desc{font-size:13px;color:var(--muted);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
/* Proven Niches card: the channel screenshot is landscape - show it WHOLE (contain) over a
   blurred fill so nothing's cropped (David 2026-06-26). */
.hf-nhcard .hf-nhimg{object-fit:contain}
.hf-nhcard .hf-ytthumb{aspect-ratio:16/10}
.hf-nhcard .hf-desc{-webkit-line-clamp:5}
.hf-bendwait{color:var(--muted2)!important;font-style:italic}
.hf-bendwait::before{content:"⟳"!important;color:var(--muted2)!important}
/* "Run Full Picture" on a competitor card */
.hf-fp{margin-top:auto;align-self:flex-start;font:inherit;font-size:12.5px;font-weight:800;color:#fff;
  background:var(--blue);border:none;border-radius:9px;padding:8px 14px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  box-shadow:0 3px 10px rgba(44,89,157,.3);transition:filter .12s,transform .06s}
.hf-fp:hover{filter:brightness(1.1)}
.hf-fp:active{transform:translateY(1px)}
@media(max-width:560px){
  .hf-big{flex-direction:column}
  .hf-yt{flex-basis:auto;width:100%;border-right:none;border-bottom:1px solid var(--line)}
}
/* our-style modal (replaces the raw browser prompt) */
.aoy-modal-ov{position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;padding:20px}
.aoy-modal{position:relative;width:100%;max-width:380px;background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.4);padding:20px}
.amo-h{font-size:17px;font-weight:900;color:var(--cream)}
/* ✕ close (replaces the Done button - David 2026-06-26) */
.amo-x{position:absolute;top:12px;right:12px;width:30px;height:30px;display:grid;place-items:center;border:none;background:rgba(var(--ink-rgb),.06);color:var(--muted);border-radius:9px;font-size:15px;cursor:pointer;line-height:1;z-index:2;transition:background .12s,color .12s}
.amo-x:hover{background:rgba(var(--ink-rgb),.12);color:var(--cream)}
.amo-sub{font-size:12.5px;color:var(--muted);margin:3px 0 14px}
.amo-in{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:11px;background:var(--charcoal);color:var(--cream);font:inherit;font-size:14px}
.amo-in:focus{outline:none;border-color:var(--gold)}
.amo-kind{display:flex;gap:8px;margin:12px 0 16px}
.amo-k{flex:1;padding:9px 0;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--muted);font:inherit;font-weight:800;font-size:13px;cursor:pointer}
.amo-k.on[data-kind="expense"]{background:#E0556E;color:#fff;border-color:#E0556E}
.amo-k.on[data-kind="income"]{background:#3FB984;color:#fff;border-color:#3FB984}
.amo-row{display:flex;justify-content:flex-end;gap:10px}
.amo-cancel{background:transparent;border:1px solid var(--line);color:var(--muted);border-radius:10px;padding:9px 15px;font:inherit;font-weight:700;cursor:pointer}
.amo-go{background:linear-gradient(135deg,var(--gold),var(--gold-deep));border:none;color:#fff;border-radius:10px;padding:9px 17px;font:inherit;font-weight:800;cursor:pointer}
.amo-go:hover{filter:brightness(1.05)}

/* ===== "What is this channel about?" modal (David 2026-07-21) ===== */
.idm{max-width:460px}
.idm-niche{font-size:17px;font-weight:800;color:var(--cream);line-height:1.3;
  padding:12px 14px;border:1px solid var(--gold);border-radius:12px;background:rgba(var(--ink-rgb),.03);
  display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.idm-niche.idm-none{border-color:var(--line);color:var(--muted);font-size:14px;font-weight:700}
.idm-why{font-size:13px;line-height:1.55;color:var(--cream);margin:12px 0 0}
.idm-why.idm-thin{color:var(--muted)}
.idm-when{font-size:11px;color:var(--muted2);margin-top:8px}
.idm-ask{font-size:13px;font-weight:800;color:var(--cream);margin:16px 0 8px}
.idm-in{resize:vertical;min-height:66px;line-height:1.45;font-size:13.5px}
.idm-err{margin-top:9px;font-size:12px;font-weight:700;color:#E0556E}
.idm-row{display:flex;justify-content:flex-end;gap:10px;margin-top:14px}
/* the correction is running (gpt-4o + a full re-rank): a calm, un-dismissable wait state */
.idm-busy{display:flex;align-items:flex-start;gap:14px;padding:6px 0 4px}
.idm-busy b{display:block;font-size:13.5px;color:var(--cream);margin-bottom:4px}
.idm-busy em{font-style:normal;font-size:12.5px;color:var(--muted);line-height:1.5}
.idm-spin{flex:0 0 auto;width:22px;height:22px;margin-top:2px;border-radius:50%;
  border:2px solid rgba(var(--ink-rgb),.18);border-top-color:var(--gold);animation:idmspin .8s linear infinite}
@keyframes idmspin{to{transform:rotate(360deg)}}
.idm-note{margin-top:16px;padding:12px 14px;border-radius:12px;
  border:1px solid var(--gold);background:rgba(var(--ink-rgb),.03);
  font-size:13px;font-weight:700;color:var(--cream);line-height:1.5}
.idm-note em{display:block;margin-top:5px;font-style:normal;font-size:12px;font-weight:500;color:var(--muted)}

/* TIM-2 Channel Setup modal */
.csm{max-width:430px}
.csm-fld{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:11px}
.csm-l{font-size:12.5px;font-weight:700;color:var(--cream);flex:1}
/* "Partner shares losses" toggle (David 2026-06-27) */
.csm-toggle{display:flex;align-items:flex-start;gap:10px;margin:2px 0 14px;cursor:pointer}
.csm-toggle input{margin-top:2px;width:16px;height:16px;flex:0 0 auto;accent-color:var(--gold)}
.csm-toggle span{display:flex;flex-direction:column;gap:2px;font-size:12.5px;color:var(--cream)}
.csm-toggle em{font-style:normal;font-size:11px;font-weight:500;color:var(--muted2);line-height:1.4}
.csm-inw{display:inline-flex;align-items:center;gap:3px;background:var(--charcoal);border:1px solid var(--line);border-radius:10px;padding:0 11px;width:130px}
.csm-inw:focus-within{border-color:var(--gold)}
.csm-inw i{color:var(--muted2);font-style:normal;font-size:13px}
.csm-in{flex:1;width:100%;background:transparent;border:none;color:var(--cream);font:inherit;font-size:14px;font-weight:700;padding:10px 0;text-align:right;font-variant-numeric:tabular-nums}
.csm-in:focus{outline:none}
/* kill the native number-input spinner arrows everywhere - they overlapped the value
   (David 2026-06-26). The +/- steppers add nothing here and ate the digits. */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input[type=number]{-moz-appearance:textfield;appearance:textfield}
.csm .amo-row{margin-top:6px}
/* TIM-2 red setup button in the P&L header + slim setup bar on the Statement */
.pnl-setup{margin-left:auto;border:none;border-radius:9px;padding:8px 14px;font:inherit;font-size:12.5px;font-weight:800;cursor:pointer;background:var(--red);color:#fff;box-shadow:0 2px 10px rgba(224,85,110,.35)}
.pnl-setup:hover{filter:brightness(1.06)}
.pnl-setup.done{background:rgba(var(--ink-rgb),.06);color:var(--muted);box-shadow:none}
.pnl-setup.done:hover{background:rgba(var(--ink-rgb),.1)}
.pnl-1col{display:block}
.pnl-setupbar{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:13px;padding:11px 15px;margin-bottom:14px;box-shadow:var(--shadow-card)}
.pnl-setupbar.warn{border-color:var(--red);background:rgba(224,85,110,.06)}
.psb-l{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.psb-l b{font-size:14px;color:var(--cream)}
.psb-m{font-size:11.5px;color:var(--muted2);font-weight:600}
.psb-bang{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--red);color:#fff;font-weight:900;font-size:13px;cursor:pointer}
.psb-edit{flex:0 0 auto;border:1px solid var(--line);background:transparent;color:var(--blue);border-radius:9px;padding:7px 13px;font:inherit;font-size:12px;font-weight:800;cursor:pointer}
.psb-edit:hover{background:rgba(44,89,157,.1)}
/* TIM-4 team-member tagging: video-row chips, modals, analytics */
.av-team{white-space:nowrap}
/* Team-tag avatars - EXACT port of design-explorations/team-tags-test.html Style A (David
   2026-06-27 "literally use the html code from this page"): a clean 26px colored circle when
   filled, a 26px dashed circle for the "+". No pill border, no overlap. */
.av-tmadd{display:inline-flex;align-items:center;justify-content:center;gap:4px;background:transparent;border:none;border-radius:50%;padding:0;cursor:pointer}
.av-tmadd.empty{width:26px;height:26px;border:1px dashed #3a4666}
.av-tmadd.empty:hover{border-color:var(--blue)}
.av-tmplus{font-size:14px;line-height:1;font-weight:700;color:#5b6a86}
.av-tm{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;color:#fff;font-size:9px;font-weight:800;flex:0 0 auto}
.tm-av{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;color:#fff;font-size:9.5px;font-weight:800;flex:0 0 auto}
.team-manage{margin-left:auto;border:1px solid var(--line);background:transparent;color:var(--blue);border-radius:9px;padding:6px 12px;font:inherit;font-size:12px;font-weight:800;cursor:pointer}
.team-manage:hover{background:rgba(44,89,157,.1)}
.team-empty{text-align:center;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px;box-shadow:var(--shadow-card)}
.team-empty b{font-size:14px;color:var(--cream)}.team-empty p{font-size:12.5px;color:var(--muted);margin:6px auto 14px;max-width:460px;line-height:1.5}
.team-add-cta{background:linear-gradient(135deg,var(--gold),var(--gold-deep));border:none;color:#fff;border-radius:10px;padding:9px 16px;font:inherit;font-weight:800;cursor:pointer}
.tm-table .tm-name{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--cream)}
.tm-pay{font-style:normal;font-size:10px;font-weight:700;color:var(--muted2);background:rgba(var(--ink-rgb),.06);padding:1px 6px;border-radius:5px}
.tm-cost{color:var(--red)}
.tm-grouphd td{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted2);padding-top:12px;border-bottom:1px solid var(--line)}
.tm-table td.num.pos{color:var(--green)}.tm-table td.num.neg{color:var(--red)}
/* team modals */
.tmm-list,.vtm-list{display:flex;flex-direction:column;gap:7px;margin-bottom:14px;max-height:240px;overflow-y:auto}
.tmm-row{display:flex;align-items:center;gap:9px;background:var(--charcoal);border:1px solid var(--line);border-radius:10px;padding:8px 11px;position:relative}
/* member colour picker: the avatar toggles a swatch popover (David 2026-07-15) */
.tm-avpick{border:2px solid transparent;cursor:pointer;font-family:inherit;transition:border-color .14s,transform .12s}
.tm-avpick:hover{border-color:var(--cream);transform:scale(1.06)}
.tm-swatches{position:absolute;top:calc(100% - 2px);left:8px;display:flex;gap:7px;flex-wrap:wrap;max-width:232px;
  background:var(--card2);border:1px solid var(--line);border-radius:11px;padding:9px;z-index:6;box-shadow:0 12px 30px rgba(0,0,0,.45)}
.tm-swatches[hidden]{display:none}
.tm-sw{width:22px;height:22px;border-radius:7px;border:2px solid transparent;cursor:pointer;padding:0;transition:transform .12s}
.tm-sw:hover{transform:scale(1.14)}
.tm-sw.on{border-color:var(--cream);box-shadow:0 0 0 2px var(--card2),0 0 0 3px var(--cream)}
.tmm-main,.vtm-main{display:flex;flex-direction:column;flex:1;min-width:0}
.tmm-main b,.vtm-main b{font-size:13px;color:var(--cream)}
.tmm-main em,.vtm-main em{font-style:normal;font-size:11px;color:var(--muted2)}
.tmm-del{background:none;border:none;color:var(--muted2);font-size:13px;cursor:pointer}
.tmm-del:hover{color:var(--red)}
.tmm-empty{font-size:12.5px;color:var(--muted2);text-align:center;padding:10px}
/* The add-a-member form is a DIFFERENT section from the member list above it - the old hairline
   var(--line) rule was invisible, so the two ran together. Brand-orange 2px rule + more breathing
   room makes the split obvious (David 2026-07-15). */
.tmm-form{display:flex;flex-direction:column;gap:9px;border-top:2px solid var(--gold);padding-top:16px;margin-top:10px}
.tmm-form2{display:flex;gap:8px;align-items:center}
.tmm-group{flex:1;min-width:0}
/* Role fields are <input list=...> (datalist). The browser's own dropdown affordance is hidden /
   inconsistent / invisible on the dark field, so nobody knew a list was there. We hide the native
   indicator and render our OWN caret button, which opens the list on click. David 2026-07-15. */
.tmm-groupw{position:relative;flex:1;min-width:0;display:flex}
.tmm-groupw .amo-in{width:100%;padding-right:34px}
.tmm-groupw input::-webkit-calendar-picker-indicator{display:none}
.tmm-gcaret{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:24px;height:24px;
  display:grid;place-items:center;background:none;border:none;padding:0;cursor:pointer;color:var(--muted);
  font-size:10px;line-height:1;border-radius:6px;font-family:inherit;transition:color .14s,background .14s}
.tmm-gcaret:hover{color:var(--gold);background:rgba(var(--ink-rgb),.08)}
.tmm-form2 .csm-inw{width:120px;flex:0 0 auto}
.tmm-pay{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;flex:0 0 auto}
.tmm-p{font:inherit;font-size:11px;font-weight:700;cursor:pointer;color:var(--muted);background:transparent;border:none;padding:8px 9px}
.tmm-p.on{background:var(--blue);color:#fff}
/* team role tabs (David 2026-06-26: chose the switchable-tabs layout) */
.tmm-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.tmm-tab{font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;color:var(--muted);background:transparent;
  border:1px solid var(--line);border-radius:999px;padding:5px 12px;display:inline-flex;align-items:center;gap:6px}
.tmm-tab:hover{border-color:var(--gold);color:var(--cream)}
.tmm-tab.on{background:rgba(44,89,157,.14);color:var(--blue);border-color:var(--blue)}
.tmm-tn{background:rgba(var(--ink-rgb),.10);border-radius:999px;padding:0 6px;font-size:10.5px;font-weight:800}
.tmm-tab.on .tmm-tn{background:var(--blue);color:#fff}
/* bigger team panel + grouped nav + per-member edit (David 2026-06-26) */
.aoy-modal.tmm{max-width:560px}
.tmm .tmm-list{max-height:min(58vh,460px)}
.tmm-grouphd{display:flex;align-items:center;gap:7px;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--muted2);margin:8px 2px 2px}
.tmm-grouphd em{font-style:normal;background:rgba(var(--ink-rgb),.08);border-radius:6px;padding:1px 6px;font-weight:800}
.tm-gdot{width:9px;height:9px;border-radius:3px;flex:0 0 auto}
.tmm-edit{background:none;border:none;color:var(--muted2);font-size:13px;cursor:pointer;padding:0 2px}
.tmm-edit:hover{color:var(--gold)}
.tmm-editing{flex-direction:column;align-items:stretch;gap:8px}
.tmm-erow{display:flex;gap:8px}
/* team member working dates (David 2026-06-26: hired/fired so firing keeps past P&L) */
.tmm-dates{display:flex;gap:10px}
.tmm-dl{flex:1;display:flex;flex-direction:column;gap:3px;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:var(--muted2)}
.tmm-dl em{font-style:normal;font-weight:600;text-transform:none;color:var(--muted2);opacity:.8}
.tmm-dl input{width:100%}
.tmm-fired{color:var(--red,#D0513B);font-style:normal;font-weight:700}
.tmm-erow .tmm-savebtn{flex:1}
.tmm-ep{font:inherit;font-size:11px;font-weight:700;cursor:pointer;color:var(--muted);background:transparent;border:none;padding:8px 9px}
.tmm-ep.on{background:var(--blue);color:#fff}
.vtm-row{display:flex;align-items:center;gap:9px;background:var(--charcoal);border:1px solid var(--line);border-radius:10px;padding:8px 11px;cursor:pointer}
.vtm-row input{accent-color:var(--gold);cursor:pointer;flex:0 0 auto}
/* add-a-new-person block inside the per-video tag modal (David 2026-06-26) */
.vtm-confirm{width:100%;padding:11px;font-size:13.5px;margin-bottom:2px}
.vtm-add{border-top:1px dashed var(--line);margin-top:4px;padding-top:12px;display:flex;flex-direction:column;gap:8px}
.vtm-add-h{font-size:12px;font-weight:800;color:var(--muted2);text-transform:uppercase;letter-spacing:.03em}
.vtm-add .vtm-role{flex:1;min-width:0}
/* TIM-5 format tagging */
.av-fmt{white-space:nowrap}
.av-fmtb{font:inherit;font-size:11px;font-weight:700;cursor:pointer;color:var(--fc,var(--muted));background:transparent;border:1px solid var(--line);border-radius:999px;padding:3px 10px;border-left:3px solid var(--fc,var(--line))}
.av-fmtb:hover{background:rgba(var(--ink-rgb),.05)}
/* tracked-channels uploads: filter bar + sortable headers (David 2026-06-28) */
.cu-filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.cu-sortable{cursor:pointer;user-select:none;transition:color .12s}
.cu-sortable:hover{color:var(--cream)}
/* Tim + David 2026-06-28: a user-confirmed format must look the SAME as an auto-suggested one
   (colored outline), NOT a filled solid pill. Only neutralise the fill - keep the colored text +
   left border from the base so the category colour still reads. */
.av-fmtb.set{color:var(--fc,var(--muted));background:transparent}
.vfm-chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px}
.vfm-chip{font:inherit;font-size:12px;font-weight:700;cursor:pointer;color:var(--cream);background:var(--charcoal);border:1px solid var(--line);border-left:3px solid var(--fc,var(--line));border-radius:8px;padding:6px 11px}
.vfm-chip:hover{border-color:var(--fc)}
.vfm-chip.on{background:var(--fc);color:#fff;border-color:var(--fc)}
.pnl-fseg{display:inline-block;height:100%}
.pnl-flegend{display:flex;flex-direction:column;gap:7px;margin-top:12px}
.pnl-fli{display:flex;align-items:center;gap:8px;font-size:12.5px}
.pnl-fn{font-style:normal;font-size:10.5px;color:var(--muted2);font-weight:600}
/* TIM-6 custom widget board */
.bd-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.bd-periods{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.bd-per{font:inherit;font-size:12px;font-weight:700;cursor:pointer;color:var(--muted);background:transparent;border:none;padding:8px 13px}
.bd-per.on{background:var(--blue);color:#fff}
.bd-add{border:1px dashed var(--blue);background:rgba(44,89,157,.06);color:var(--blue);border-radius:10px;padding:8px 15px;font:inherit;font-size:12.5px;font-weight:800;cursor:pointer}
.bd-add:hover{background:rgba(44,89,157,.12)}
/* R5 Custom Graphs: group tabs + new-group modal */
.cg-tabs{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px}
/* David 2026-06-26: ~25% bigger + more coloured/important (these drive all the graphs) */
.cg-tab{font:inherit;font-size:15.5px;font-weight:800;cursor:pointer;color:var(--blue);
  background:rgba(44,89,157,.08);border:1.5px solid rgba(44,89,157,.28);border-radius:11px;
  padding:11px 18px;transition:background .12s,border-color .12s,transform .06s}
.cg-tab:hover{background:rgba(44,89,157,.16);border-color:var(--blue)}
.cg-tab:active{transform:translateY(1px)}
.cg-tab.on{background:var(--blue);color:#fff;border-color:var(--blue);box-shadow:0 4px 14px rgba(44,89,157,.32)}
.cg-tab.add{color:var(--blue);border-style:dashed;background:transparent}
.cg-tab.add:hover{background:rgba(44,89,157,.10)}
.cg-delgrp{background:none;border:none;color:var(--red);font:inherit;font-size:11px;cursor:pointer;text-decoration:underline;padding:0}
.wg-trk.sm{width:auto;min-width:48px;padding:0 6px;font-size:10px;border-radius:6px}
.ggm-list{display:flex;flex-direction:column;gap:6px;max-height:260px;overflow-y:auto;margin-bottom:12px}
.ggm-opt{display:flex;align-items:center;gap:9px;background:var(--charcoal);border:1px solid var(--line);border-radius:9px;padding:8px 11px;font-size:12.5px;color:var(--cream);cursor:pointer}
.ggm-opt input{accent-color:var(--gold);cursor:pointer}
.ggm-name{margin-bottom:12px}
/* Bin-packed graph board (David 2026-06-26 "backpack problem"): CSS multi-column lets the
   browser's column balancer pack cards to the SHORTEST total height (it minimizes the taller
   column = the 2-bin partition optimum), so short graphs fill the gaps under tall ones. Wide
   charts span both columns. break-inside:avoid keeps each card whole. */
/* CSS Grid with auto-flow:dense - packs short cards into the gaps (the "backpack") but, unlike
   multi-column, NEVER overlaps (David 2026-06-27: Revenue/net-profit was overlapping Top-10). */
.cg-teamtable{margin-bottom:18px}
.bd-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;grid-auto-flow:dense;align-items:start;grid-auto-rows:8px}
@media(max-width:900px){.bd-grid{grid-template-columns:1fr}}
.bd-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 20px;box-shadow:var(--shadow-card);min-width:0;overflow:hidden}
.bd-card.wide{grid-column:1 / -1}
/* A graph that renders its own .pnl-vcard (e.g. Revenue by source) sat as a card-inside-a-card
   on the graph board - Tim 2026-06-27 "плашка в плашке". Strip the inner chrome here. */
.bd-card .pnl-vcard{background:transparent;border:none;box-shadow:none;padding:0;margin:0}
/* Mercury-style cumulative chart (David picked it 2026-06-27): hero number + scrub-able sparkline. */
.merc{display:flex;flex-direction:column;gap:3px}
.merc-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.merc-leg{display:flex;flex-direction:column;gap:4px;font-size:10.5px;color:var(--muted2);text-align:right}
.merc-leg i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px;vertical-align:0}
.merc-lbl{font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted2)}
.merc-heros{display:flex;gap:34px;flex-wrap:wrap}
.merc-heros .merc-big{margin-top:3px}
.merc-hero{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.merc-big{font-size:30px;font-weight:900;line-height:1;font-variant-numeric:tabular-nums}
.merc-delta{font-size:12px;font-weight:700}
.merc-delta.pos{color:var(--green,#3FB984)}.merc-delta.neg{color:var(--red,#D0513B)}
.merc-sec{font-size:11.5px;color:var(--muted2)}.merc-sec b{color:var(--cream)}
.merc-chartwrap{position:relative;margin-top:6px}
.merc-xl{fill:var(--muted2);font-size:9px}
.merc-tip{position:absolute;top:0;pointer-events:none;background:var(--card);border:1px solid var(--line);border-radius:9px;padding:7px 10px;box-shadow:0 8px 22px rgba(0,0,0,.32);min-width:128px;z-index:6}
.merc-tipm{font-size:12.5px;font-weight:800;color:var(--cream);margin-bottom:5px}
.merc-tipr{display:flex;justify-content:space-between;gap:16px;font-size:12.5px;color:var(--muted2);align-items:center;margin-top:2px}
.merc-tipr i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:6px;vertical-align:0}
.merc-tipr b{color:var(--cream);font-variant-numeric:tabular-nums;font-weight:700;font-size:13px}
.bd-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.bd-ttl{font-size:13px;font-weight:800;color:var(--cream);display:inline-flex;align-items:center;gap:6px;min-width:0}
/* role picker inside a team graph's title: "👁 Views by [animator ▾]". Reads as part of the heading,
   not a form control, until you hover it. David 2026-07-15. */
/* David 2026-07-16: outline-only - the orange is the border + the label, the fill stays
   the card ground. --card also paints the native popup list (it inherits the select's
   background-color), which is why the tint lives on the border, never on the background. */
.bd-roledd{font:inherit;font-size:12.5px;font-weight:800;color:var(--gold);background:var(--card);
  border:1px solid rgba(249,129,37,.55);border-radius:7px;padding:2px 4px 2px 6px;cursor:pointer;
  max-width:150px;transition:border-color .14s}
.bd-roledd:hover{border-color:var(--gold)}
.bd-roledd:focus{outline:none;border-color:var(--gold)}
.bd-roledd option{background:var(--card);color:var(--cream);font-weight:700}
.bd-roledd option:checked{color:var(--gold)}
.bd-lock{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--gold-deep);background:rgba(249,129,37,.15);padding:2px 7px;border-radius:5px}
.bd-x{background:none;border:none;color:var(--muted2);font-size:13px;cursor:pointer;border-radius:6px;padding:2px 6px}
.bd-x:hover{color:var(--red);background:rgba(224,85,110,.1)}
/* per-graph tools on the right of each card header (Tim 2026-06-26: reorder/swap/remove) */
.bd-tools{display:inline-flex;gap:3px;align-items:center;flex:0 0 auto;opacity:.55;transition:opacity .12s}
.bd-card:hover .bd-tools{opacity:1}
.bd-tool{background:none;border:1px solid transparent;color:var(--muted2);font-size:13px;line-height:1;cursor:pointer;border-radius:6px;padding:3px 7px;font-weight:800}
.bd-tool:hover{color:var(--blue);background:rgba(44,89,157,.12);border-color:var(--blue)}
.bd-tool.del:hover{color:var(--red);background:rgba(224,85,110,.12);border-color:var(--red)}
.bd-tool:disabled{opacity:.3;cursor:default;background:none;border-color:transparent;color:var(--muted2)}
/* "Add graph" placeholder card */
.bd-addcard{display:grid;place-items:center;min-height:120px;border-style:dashed;cursor:pointer;background:transparent;transition:background .12s,border-color .12s}
.bd-addcard:hover{background:rgba(44,89,157,.06);border-color:var(--blue)}
.bd-addinner{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--blue);font-weight:800;font-size:13px}
.bd-addplus{font-size:26px;line-height:1}
/* graph picker modal: LIVE previews in a 2-up grid (David 2026-06-26 - "render every graph") */
.gpk-modal{max-width:560px;width:94vw}
/* single vertical list - no horizontal scroll (David 2026-06-26: "long list, not a scrollable square") */
.gpk-list{display:flex;flex-direction:column;gap:10px;max-height:66vh;overflow-x:hidden;overflow-y:auto;margin:8px 0 14px;padding:2px}
.gpk-opt{display:flex;flex-direction:column;gap:6px;font:inherit;text-align:left;color:var(--cream);background:var(--panel,rgba(255,255,255,.03));border:1px solid var(--line);border-radius:11px;padding:11px 12px;cursor:pointer;transition:border-color .12s,background .12s,transform .06s}
.gpk-opt:hover{border-color:var(--blue);background:rgba(44,89,157,.10)}
.gpk-opt:active{transform:translateY(1px)}
.gpk-h{font-size:13px;font-weight:800;color:var(--cream)}
/* the rendered preview: SVG scales to FIT the box (viewBox + preserveAspectRatio meet), tall
   HTML tables clip. Nothing overflows. (David 2026-06-26 "make it fit, can't see shit") */
.gpk-graph{height:132px;overflow:hidden;border-radius:8px;background:rgba(0,0,0,.12);padding:6px;
  display:flex;align-items:center;justify-content:center;pointer-events:none}
.gpk-graph svg{width:100%!important;height:100%!important;max-height:120px;overflow:hidden!important;display:block}
.gpk-graph .wg-wrap{width:100%;height:100%;overflow:hidden;display:flex;align-items:center;justify-content:center}
.gpk-graph .pnl-vhint,.gpk-graph .pnl-vnote,.gpk-graph .av-note{font-size:10.5px;padding:6px;text-align:center;line-height:1.4}
.gpk-graph .pbv,.gpk-graph .wg-top{font-size:9.5px;width:100%;max-height:120px;overflow:hidden}
.bd-body{min-height:40px}
.wg-svg{width:100%;height:auto;display:block;overflow:visible}
/* David 2026-06-25: fixed-size charts render 1:1 (text stays crisp); wrap scrolls if wide */
/* Always-visible scrollbar so it's obvious there are more months to the left (David 2026-06-27). */
.wg-wrap{overflow-x:auto;max-width:100%;scrollbar-width:thin;scrollbar-color:var(--blue) rgba(var(--ink-rgb),.08);padding-bottom:4px}
.wg-wrap::-webkit-scrollbar{height:9px}
.wg-wrap::-webkit-scrollbar-track{background:rgba(var(--ink-rgb),.07);border-radius:5px}
.wg-wrap::-webkit-scrollbar-thumb{background:var(--blue);border-radius:5px;border:2px solid transparent;background-clip:padding-box}
.wg-wrap::-webkit-scrollbar-thumb:hover{background:var(--gold)}
.wg-svg.fixed{width:auto;height:auto;max-width:none}
.wg-bl{fill:var(--muted2);font-size:14px;font-weight:700}
.wg-vl{fill:var(--cream);font-size:13px;font-weight:800;font-variant-numeric:tabular-nums}
.vidbars .wg-vl{fill:#5F8FC4}   /* David 2026-07-05: Videos-posted numbers match the blue bars */
.wg-zero{stroke:var(--line);stroke-width:1}
.wg-legend2{display:flex;flex-wrap:wrap;gap:8px 14px;margin-bottom:6px}
.wg-lg{font-size:13px;font-weight:700;color:var(--muted);display:inline-flex;align-items:center;gap:6px}
.wg-lg::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--c)}
/* animator donut (David 2026-06-27) */
.ad-wrap{display:flex;align-items:center;gap:18px;padding:4px 2px}
.ad-svg{flex:0 0 auto}
.ad-c{fill:var(--cream);font-size:15px;font-weight:800}
.ad-cs{fill:var(--muted2);font-size:9px}
.ad-legend{display:flex;flex-direction:column;gap:8px;font-size:12.5px;font-weight:600;min-width:0;flex:1}
.ad-li{display:flex;align-items:center;gap:8px}
.ad-dot{width:11px;height:11px;border-radius:3px;flex:0 0 auto}
.ad-nm{color:var(--cream);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ad-pct{margin-left:auto;color:var(--muted2);font-weight:700}
.ad-val{color:var(--muted);min-width:54px;text-align:right;font-variant-numeric:tabular-nums}
.wg-stat{font-size:12px;color:var(--muted);margin-bottom:8px}.wg-stat b{color:var(--cream);font-size:14px}
.wg-top{display:flex;flex-direction:column;gap:5px}
.wg-toprow{display:flex;align-items:center;gap:10px;font-size:12.5px;padding:5px 0;border-bottom:1px solid var(--line)}
.wg-toprow:last-child{border-bottom:none}
.wg-trk{width:20px;height:20px;border-radius:6px;background:rgba(var(--ink-rgb),.06);color:var(--muted2);font-weight:800;font-size:11px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.wg-trt{flex:1;min-width:0;color:var(--cream);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* monthly-best with thumbnails (David 2026-06-26): small 16:9 thumb + views under the title */
.wg-top-thumb .wg-toprow{padding:7px 0}
.wg-thumb{flex:0 0 auto;width:84px;height:47px;border-radius:6px;background:#0b0f18 center/cover no-repeat;background-size:cover;border:1px solid #2C599D}
.wg-top-thumb .wg-trt{display:flex;flex-direction:column;gap:1px;white-space:normal}
.wg-top-thumb .wg-tt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--cream)}
.wg-top-thumb .wg-trt>em{font-style:normal;font-size:11px;color:var(--muted2);font-weight:600}
.wg-views{font-style:normal}
.wg-trv{font-weight:800;font-variant-numeric:tabular-nums}
.wg-trv.pos{color:var(--green)}.wg-trv.neg{color:var(--red)}
/* add-widget modal */
.awg-modal{max-width:460px}
.awg-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:12px}
@media(max-width:480px){.awg-grid{grid-template-columns:1fr}}
.awg{display:flex;align-items:center;gap:9px;background:var(--charcoal);border:1px solid var(--line);border-radius:11px;padding:11px;cursor:pointer;font:inherit;text-align:left}
.awg:hover:not(.have){border-color:var(--blue);background:rgba(44,89,157,.07)}
.awg.have{opacity:.55;cursor:default}
.awg-i{font-size:18px;flex:0 0 auto}
.awg-n{flex:1;font-size:12.5px;font-weight:700;color:var(--cream)}
.awg-plus{color:var(--blue);font-weight:900;font-size:15px}
.awg-on{color:var(--green);font-size:10.5px;font-weight:800}
/* competitor-uploads table extras */
.cu-vs{font-weight:800}
.cu-vs.hot{color:#E0556E}.cu-vs.cold{color:var(--muted2)}
.cu-fmt{display:inline-block;font-size:10.5px;font-weight:800;padding:2px 8px;border-radius:999px}
.cu-fmt.lo{background:rgba(44,89,157,.16);color:var(--blue)}
.cu-fmt.sh{background:rgba(249,129,37,.16);color:var(--gold-deep)}
/* Monthly P&L table (Tim's accounting view) */
.pm-wrap{overflow-x:auto;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-card);padding:4px}
.pm-table{width:100%;border-collapse:collapse;font-size:13px;min-width:520px}
.pm-table th,.pm-table td{padding:9px 12px;text-align:left;white-space:nowrap}
.pm-table thead th{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted2);font-weight:800;border-bottom:1px solid var(--line)}
.pm-table td.num,.pm-table th.num{text-align:right;font-variant-numeric:tabular-nums}
.pm-rk{font-weight:700;color:var(--cream)}
.pm-rk.ind{font-weight:600;color:var(--muted);padding-left:22px}
.pm-tot{font-weight:800;color:var(--cream);border-left:1px solid var(--line)}
.pm-income td.num{color:var(--green);font-weight:700}
.pm-income .pm-rk{font-weight:600;color:var(--muted)}
.pm-cost td.num{color:var(--red,#D0513B)}   /* expenses red (Tim 2026-06-25) */
/* left row-label column stays pinned while the months scroll horizontally (Tim) */
.pm-table thead th:first-child,.pm-table .pm-rk{position:sticky;left:0;background:var(--card);z-index:1}
.pm-table thead th:first-child{z-index:2}
/* section headers (Income / Expenses) + per-section subtotals */
.pm-sec td{font-size:10.5px;font-weight:900;text-transform:uppercase;letter-spacing:.5px;color:var(--muted2);
  padding-top:13px;padding-bottom:5px}
.pm-subtot td{border-top:1px solid var(--line);font-weight:800;color:var(--cream)}
.pm-subtot td.num{color:var(--cream)}
.pm-empty td{color:var(--muted2);font-style:italic}
.pm-op{border-top:1px solid var(--line)}
.pm-op td{font-weight:800;color:var(--cream)}
.pm-op td.num{color:var(--blue)}
.pm-prof td{font-weight:700}
.pm-table td.num.pos{color:var(--green)}.pm-table td.num.neg{color:var(--red,#D0513B)}
.pm-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px;vertical-align:1px;flex:none}
.rm-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:0;flex:none}
.rm-msg.expense{border-left-color:var(--red)}
/* friendly "gathering your data" wait state (warm, not the cold grey "soon") */
.gather{position:relative;overflow:hidden;text-align:center;max-width:560px;margin:46px auto;
  padding:42px 30px 34px;border-radius:20px;border:1px solid rgba(249,129,37,.22);
  background:radial-gradient(130% 120% at 50% 0%, rgba(249,129,37,.10), rgba(249,129,37,.02) 55%, transparent 80%), var(--card)}
.gather-orb{width:60px;height:60px;margin:0 auto 16px;border-radius:18px;display:flex;
  align-items:center;justify-content:center;font-size:26px;color:#2c2100;
  background:linear-gradient(135deg,var(--gold),var(--gold-deep));
  box-shadow:0 8px 26px rgba(249,129,37,.25);animation:gather-pulse 2.4s ease-in-out infinite}
@keyframes gather-pulse{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.gather h3{font-size:19px;color:var(--cream);margin-bottom:8px}
.gather p{font-size:13.5px;line-height:1.6;color:rgba(var(--ink-rgb),.82);max-width:420px;margin:0 auto}
.gather-bar{margin:20px auto 0;width:200px;height:5px;border-radius:3px;overflow:hidden;background:rgba(var(--ink-rgb),.06)}
.gather-bar span{display:block;height:100%;width:40%;border-radius:3px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);animation:gather-slide 1.5s ease-in-out infinite}
@keyframes gather-slide{0%{transform:translateX(-120%)}100%{transform:translateX(320%)}}
.gather-foot{margin-top:16px;font-size:11.5px;color:rgba(var(--ink-rgb),.5)}

/* ===================== collapsible sidebar (desktop only) ===================== */
/* min-width so it is mathematically invisible to the mobile hamburger overlay below. */
@media(min-width:861px){
  .sb-toggle{position:relative;display:grid;place-items:center;width:26px;height:26px;margin:0 -11px 0 auto;
    padding:0;flex:0 0 auto;background:none;border:1px solid transparent;border-radius:7px;color:var(--muted);
    cursor:pointer;transition:background .14s,border-color .14s,color .14s}
  .sb-toggle:hover{background:rgba(var(--ink-rgb),.05);border-color:var(--line);color:var(--cream)}
  /* Gemini-style dark tooltip chip to the right of the toggle */
  .sb-toggle::after{content:attr(data-tip);position:absolute;left:calc(100% + 12px);top:50%;
    transform:translateY(-50%);background:#1f2023;color:#fff;font-size:12px;font-weight:600;line-height:1;
    white-space:nowrap;padding:7px 10px;border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,.28);
    opacity:0;pointer-events:none;transition:opacity .14s;z-index:60}
  .sb-toggle:hover::after{opacity:1}
  html.sb-collapsed .sidebar{width:74px;flex:0 0 74px;padding-left:8px;padding-right:8px}
  /* collapsed: show ONLY the logo; hovering the brand swaps it to the expand toggle (Gemini) */
  html.sb-collapsed .brand{position:relative;justify-content:center;align-items:center;padding:6px 0 16px}
  html.sb-collapsed .brand-text{display:none}
  html.sb-collapsed .brand-logo{transition:opacity .14s}
  html.sb-collapsed .sb-toggle{position:absolute;top:6px;left:50%;transform:translateX(-50%);margin:0;
    opacity:0;pointer-events:none}
  html.sb-collapsed .brand:hover .brand-logo{opacity:0}
  html.sb-collapsed .brand:hover .sb-toggle{opacity:1;pointer-events:auto}
  html.sb-collapsed .nav-item{justify-content:center;padding:9px 0;gap:0;position:relative}
  html.sb-collapsed .nav-item .lbl{display:none}
  html.sb-collapsed .nav-item.needs-connect .lbl::after{display:none}
  /* CRITICAL: .nav has overflow-y:auto, which forces overflow-x to auto too and CLIPS the tab-name
     tooltip that extends to the right. Let the collapsed nav overflow visibly so the tooltip shows
     (9 icons fit without needing scroll at 74px). David 2026-07-15 "i can't see what the tab is". */
  html.sb-collapsed .nav{overflow:visible}
  /* Fast, styled tab-name tooltip when collapsed - replaces the slow native title tooltip
     (David 2026-07-15 "make the name appear faster + in our style"). Matches .sb-toggle::after. */
  html.sb-collapsed .nav-item::after{content:attr(data-tip);position:absolute;left:calc(100% + 12px);top:50%;
    transform:translateY(-50%) translateX(-4px);background:#1f2023;color:#fff;font-size:12px;font-weight:600;line-height:1;
    white-space:nowrap;padding:7px 10px;border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,.28);
    opacity:0;pointer-events:none;transition:opacity .12s ease,transform .12s ease;z-index:60}
  html.sb-collapsed .nav-item:hover::after{opacity:1;transform:translateY(-50%) translateX(0)}
  /* pending count -> neat corner notification badge on the icon (was margin-left:auto, which floated
     it to the far right of the centered icon and looked broken). David 2026-07-15. */
  html.sb-collapsed .nav-pending{position:absolute;top:1px;right:15px;margin:0;min-width:16px;height:16px;
    padding:0 4px;font-size:9.5px;border:2px solid var(--charcoal2);box-shadow:0 1px 3px rgba(0,0,0,.3)}
  html.sb-collapsed .nav-divider{margin:9px 12px}
  html.sb-collapsed .acct{justify-content:center;padding:10px 0;gap:0}
  html.sb-collapsed .acct-meta,html.sb-collapsed .acct-caret{display:none}
  /* account menu would be crushed at 74px - pop it out to the right instead */
  html.sb-collapsed .acct-menu{left:0;right:auto;min-width:190px}
  /* THE POINT of collapsing: give the freed ~162px to the content, not to dead space.
     .view is capped at 1280px, so on wide screens the extra width was just an empty band on
     the right. Raise the cap by the sidebar's collapsed savings so charts/cards actually grow. */
  html.sb-collapsed .view{max-width:1442px}
}

/* ===================== collapsible watchlist rail (desktop only, same pattern as the
   sidebar above: David 2026-07-08 "make the watchlist tab foldable same way as the left
   side bar") ===================== */
@media(min-width:861px){
  .rail-toprow{display:flex;margin-bottom:8px}
  .rail-toggle{position:relative;display:grid;place-items:center;width:26px;height:26px;margin:0;padding:0;
    flex:0 0 auto;background:none;border:1px solid transparent;border-radius:7px;color:var(--muted);
    cursor:pointer;transition:background .14s,border-color .14s,color .14s}
  .rail-toggle:hover{background:rgba(var(--ink-rgb),.05);border-color:var(--line);color:var(--cream)}
  /* tooltip chip opens LEFTWARD (mirror of .sb-toggle::after) - the rail sits on the
     right edge, so a rightward tooltip would run off-screen */
  .rail-toggle::after{content:attr(data-tip);position:absolute;right:calc(100% + 12px);top:50%;
    transform:translateY(-50%);background:#1f2023;color:#fff;font-size:12px;font-weight:600;line-height:1;
    white-space:nowrap;padding:7px 10px;border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,.28);
    opacity:0;pointer-events:none;transition:opacity .14s;z-index:60}
  .rail-toggle:hover::after{opacity:1}
  .rail-toggle svg{transition:transform .2s}
  html.rail-collapsed .rail-toggle svg{transform:scaleX(-1)}
  /* min-width:0 is required here - flex items default to min-width:auto, which floors
     them at their CONTENT's min-content size regardless of flex-basis/flex-shrink (the
     same reason .main below already carries min-width:0). Without it, width:54px here
     is silently ignored and the rail stays at its full clamp() width. */
  html.rail-collapsed .rail{width:54px;flex:0 0 54px;min-width:0;padding-left:8px;padding-right:8px}
  html.rail-collapsed .rail-toprow{justify-content:center}
  html.rail-collapsed .rail-head,html.rail-collapsed .rail-add,html.rail-collapsed .sugg-teaser,
  html.rail-collapsed .rail-list,html.rail-collapsed .rail-empty{display:none}
  /* freed rail width goes to the content, same reasoning as the sidebar collapse above */
  html.rail-collapsed .view{max-width:1500px}
  html.sb-collapsed.rail-collapsed .view{max-width:1662px}
}

/* ===================== responsive ===================== */
@media(max-width:860px){
  .sidebar{position:fixed;left:0;top:0;transform:translateX(-100%);transition:transform .2s}
  .sidebar.open{transform:translateX(0)}
  .hamb{display:grid}
  .stats{display:none}
  .rs-segs{grid-template-columns:1fr}
  .rsr-frame{height:70vh}
  /* Right rail: on mobile it was a fixed ~288px column that crushed the main content to a sliver
     (it can't shrink and its collapse toggle is desktop-only). Wrap it FULL-WIDTH below the content
     instead of beside it, so both stay usable. */
  .app{flex-wrap:wrap}
  .rail{position:static;width:100%;flex:1 1 100%;height:auto;
    border-left:none;border-top:1px solid rgba(var(--ink-rgb),.2)}
  /* Topbar: let the tools drop to a second line instead of overflowing, and truncate a long
     channel name rather than forcing the row wider than the viewport. */
  .topbar{flex-wrap:wrap;gap:10px;padding:12px 16px}
  .chan-info{min-width:0}
  .chan-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:44vw}
  /* the niche pill takes the rest of the switcher's row instead of pushing the tools off-screen */
  .chan-niche{max-width:100%;flex:1 1 auto}
}

/* ===== private-development access denial ===== */
.denied{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:var(--charcoal)}
.denied-card{max-width:440px;text-align:center;background:var(--card);border:1px solid var(--line);
  border-radius:18px;padding:40px 34px;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.denied-mark{display:inline-flex;align-items:center;justify-content:center;width:54px;height:54px;
  margin:0 auto 18px;border-radius:50%;background:var(--gold);color:#fff;
  font-weight:900;letter-spacing:.5px;font-size:15px}
.denied-card h1{font-size:22px;color:var(--cream);margin-bottom:12px}
.denied-card p{color:var(--muted);font-size:14px;line-height:1.55}
.denied-card b{color:var(--cream)}
.denied-sub{margin-top:14px;font-size:12.5px;color:var(--muted2)}

/* ===== undo toast (watch feedback) ===== */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);
  background:var(--card2);border:1px solid var(--line);color:var(--cream);
  padding:11px 16px;border-radius:12px;display:flex;align-items:center;gap:16px;
  font-size:13px;box-shadow:0 14px 44px rgba(0,0,0,.5);opacity:0;pointer-events:none;
  transition:opacity .18s,transform .18s;z-index:9999;max-width:90vw}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
.toast-act{background:none;border:none;color:var(--gold);font-weight:800;cursor:pointer;
  font-size:13px;padding:2px 4px;white-space:nowrap}

/* My Channel: analytics empty/error state (not an infinite spinner) */
.yt-empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:40px 20px;
  text-align:center;background:var(--card);border:1px solid var(--line);border-radius:14px}
.ye-ico{font-size:30px;opacity:.7}
.ye-msg{color:var(--muted);font-size:13.5px;max-width:440px;line-height:1.5}

/* account-menu theme-toggle state pill */
.tm-state{margin-left:6px;font-size:11px;color:var(--gold);font-weight:800}

/* sticky banner for account-level problems (e.g. lapsed subscription) */
.api-banner{position:sticky;top:0;z-index:60;display:none;align-items:center;gap:12px;
  padding:11px 22px;font-size:13px;font-weight:600;color:#2c2100;
  background:linear-gradient(90deg,var(--gold),var(--gold-deep));box-shadow:0 4px 18px rgba(0,0,0,.25)}
.api-banner.show{display:flex}
.api-banner a{text-decoration:underline;font-weight:800}
.api-banner .ab-x{margin-left:auto;cursor:pointer;font-weight:800;opacity:.7;background:none;border:none;color:inherit;font-size:15px}
.api-banner .ab-x:hover{opacity:1}

/* ===== Knowvio-style polish: soft cards + plain green delta text ===== */
.widget,.insight,.panel,.radar-card,.fin,.proj,.sugg-card{box-shadow:var(--shadow-card)}
.delta{font-weight:600} .delta.up{color:var(--green)} .delta.down{color:var(--red)}

/* long / short-form content toggle (segmented control above the feeds) */
.fmt-toggle{display:inline-flex;gap:2px;background:var(--card);border:1px solid var(--line);
  border-radius:11px;padding:3px;margin-bottom:16px;box-shadow:var(--shadow-card)}
.fmt-seg{background:none;border:none;font-family:inherit;font-size:12.5px;font-weight:600;
  color:var(--muted);padding:6px 15px;border-radius:8px;cursor:pointer;transition:background .14s,color .14s}
.fmt-seg:hover{color:var(--cream)}
.fmt-seg.on{background:var(--btn);color:var(--btn-text)}
/* Ideas Best-fit / Most-viewed toggle: same segmented control, sits under the section header
   (no bottom margin, snug against the grid). David 2026-07-20. */
.idea-sort{display:inline-flex;gap:2px;background:var(--card);border:1px solid var(--line);
  border-radius:11px;padding:3px;margin:0 0 14px;box-shadow:var(--shadow-card)}
.fmt-empty{padding:30px 20px;text-align:center;color:var(--muted);font-size:13.5px;
  background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-card)}
.fmt-link{background:none;border:none;color:var(--gold);font-weight:700;cursor:pointer;font-family:inherit;font-size:13.5px}

/* Full Picture card interactions: title -> video, channel -> channel, body -> Run sticker */
.rs-bar.hidden{display:none}
.rs-vtitle{display:block;color:inherit;cursor:pointer;text-decoration:none}
.rs-vtitle:hover{color:var(--gold)}
.rs-chlink{text-decoration:none}
.rs-chlink:hover .chan{text-decoration:underline}
.card-run{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:6}
.card-run2{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;max-width:92%}
.card-run2 .cr-fp{background:#2C599D}
.card-run2 .cr-fp:hover{background:#244e87}
.cr-btn{display:inline-flex;align-items:center;gap:8px;background:var(--gold);color:#fff;border:none;
  border-radius:11px;padding:10px 16px;font-size:13px;font-weight:800;cursor:pointer;font-family:inherit;
  box-shadow:var(--shadow-hover);white-space:nowrap}
.cr-btn:hover{background:var(--gold-deep)}
/* "Open report" state (David 2026-07-08): a calmer blue "view" action, distinct from the
   orange "Run Niche Hunter" - this niche was already hunted in the last 24h. */
.cr-open{background:#2C599D}
.cr-open:hover{background:#244e87}
.cr-play{flex:0 0 auto;width:0;height:0;border-left:9px solid currentColor;
  border-top:6px solid transparent;border-bottom:6px solid transparent}

/* ===== Niche Hunter: embedded live app (iframe = one source of truth) =====
   The REAL Niche Hunter (university.theartofyt.com/niche/?embed=1) renders in
   this iframe; height is set per-view by sizeNicheFrame() in app.js. */
/* the embed's own loader sits behind it; the iframe is transparent until it paints, then covers it */
.nh-wrap{position:relative;min-height:72vh}
.nh-wrap>.rs-loading{position:absolute;top:0;left:0;right:0;height:72vh;z-index:0}
.nh-embed{display:block;width:100%;height:72vh;border:1px solid var(--line);
  border-radius:14px;background:transparent;box-shadow:var(--shadow-card);position:relative;z-index:1}
.nh-embed.ready{background:var(--card)}
/* On the Niche Hunter route, hide the top channel bar (the DB is identical for
   every channel) and let the embed use the full viewport width + height. */
body.route-nhdb .topbar{display:none}
body.route-nhdb .view{max-width:none;padding:14px 20px 18px}

/* ===== Last-video performance (Home widget + My Channel section) ===== */
.lc{display:block;width:100%;height:auto;overflow:visible}
.lc-line{fill:none;stroke:var(--gold);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.lc-area{fill:var(--gold);opacity:.10;stroke:none}
.lc-grid{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
/* dotted vertical at each month boundary on multi-month charts (David 2026-06-27) */
.lc-mline{stroke:rgba(var(--ink-rgb),.13);stroke-width:1;stroke-dasharray:2 4;vector-effect:non-scaling-stroke}
.lc-dot{fill:var(--card);stroke:var(--gold);stroke-width:1.5;vector-effect:non-scaling-stroke}
.lc-yl{fill:var(--muted2);font-size:12px;font-weight:600;font-family:inherit}
.lc-xl{fill:var(--muted2);font-size:9px;font-weight:600;font-family:inherit}
.lc-axtitle{fill:var(--muted2);font-size:10px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;font-family:inherit}
/* single-day point (fresh upload): stem + dot + value label */
.lc-stem{stroke:var(--gold);stroke-width:2;stroke-linecap:round;opacity:.45;vector-effect:non-scaling-stroke}
.lc-dot1{fill:var(--gold);stroke:#fff;stroke-width:2;vector-effect:non-scaling-stroke}
.lc-val{fill:var(--cream);font-size:13px;font-weight:800;font-family:inherit}
.lc-empty{font-size:12px;color:var(--muted2);padding:14px 2px}
/* interactive hover: guide line + focus dot + floating tooltip */
.lc-wrap{position:relative}
.lc-axes{cursor:crosshair}
.lc-focus-line{stroke:var(--gold);stroke-width:1;stroke-dasharray:3 3;opacity:0;vector-effect:non-scaling-stroke;transition:opacity .1s}
.lc-focus-dot{fill:var(--gold);stroke:#fff;stroke-width:2;opacity:0;vector-effect:non-scaling-stroke;transition:opacity .1s}
.lc-tip{position:absolute;transform:translate(-50%,-118%);background:rgba(20,24,33,.95);color:#fff;
  padding:6px 10px;border-radius:8px;font-size:12.5px;font-weight:800;white-space:nowrap;pointer-events:none;
  opacity:0;transition:opacity .1s;box-shadow:var(--shadow-hover);z-index:4;line-height:1.3}
.lc-tip.show{opacity:1}
.lc-tip-d{display:block;font-size:10.5px;font-weight:600;opacity:.75}
/* last-video card header: title left, stats top-right (David) */
.lv-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.lv-titlewrap{min-width:0}
@media(max-width:560px){.lv-top{flex-direction:column;gap:6px}}
.lvp{align-items:center}
.lvp .w-thumb{flex:0 0 240px;aspect-ratio:16/9;background-size:cover;background-position:center;border-radius:10px}
.lvp-link{font-size:12.5px;color:var(--gold);font-weight:700;margin-top:6px}
@media(max-width:560px){.lvp{flex-direction:column;align-items:stretch}.lvp .w-thumb{flex-basis:auto;width:100%}}
/* ===== Competitors (vidIQ-style: graph + watch-list table + suggested) ===== */
.cg-wrap{position:relative;background:var(--card);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow-card);padding:14px 18px 12px;margin-bottom:8px}
.cg-legend{display:flex;flex-wrap:wrap;gap:8px 16px;margin-bottom:8px}
.cg-leg{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);font-weight:600}
.cg-leg-av{width:34px;height:34px;border-radius:50%;object-fit:cover;border:1.5px solid var(--cgc);flex:0 0 auto;background:var(--line)}
.cg-leg-dot{width:16px;height:16px;border-radius:50%;background:var(--cgc);display:inline-block;flex:0 0 auto}
.cg-tav{width:28px;height:28px;border-radius:50%;object-fit:cover;flex:0 0 auto;background:var(--line);border:1.5px solid var(--line)}
.cg-leg i{width:11px;height:11px;border-radius:3px;display:inline-block;flex:0 0 auto}
/* legend × : quick-drop a channel from the graph */
.cg-legx{flex:0 0 auto;width:17px;height:17px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(var(--ink-rgb),.07);color:var(--muted2);font-size:13px;line-height:1;display:grid;place-items:center;padding:0;margin-left:1px}
.cg-legx:hover{background:rgba(208,81,59,.18);color:#D0513B}
.cg-svg{width:100%;height:auto;display:block;cursor:crosshair}
.cg-line{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
/* the user's OWN channel line: thicker so it stands out from the competitors */
.cg-line-own{stroke-width:3.6}
/* metric tabs on top of the widget: Views / day  <->  Videos posted / day */
.cg-tabs{display:inline-flex;gap:4px;background:var(--card2,var(--card));border:1px solid var(--line);
  border-radius:10px;padding:3px;margin-bottom:12px}
.cg-tab{background:none;border:none;color:var(--muted);border-radius:8px;padding:6px 13px;font-size:12.5px;
  font-weight:700;cursor:pointer;transition:background .14s,color .14s}
.cg-tab:hover{color:var(--cream)}
.cg-tab.on{background:var(--btn);color:var(--btn-text)}
/* "You" badge on the own-channel legend chip */
.cg-you{font-size:9.5px;font-weight:800;letter-spacing:.03em;color:#fff;background:#2C599D;border-radius:999px;padding:1px 6px;margin-left:5px;vertical-align:middle}
.cg-src{font-size:11px;color:var(--muted2);margin-top:6px;text-align:right}
/* top row: "Views / day" label (left, no longer inside the SVG so it can't overlap
   the top value) + range toggle (right) */
.cg-toprow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.cg-axislabel{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted2)}
.cg-ranges{display:flex;gap:6px}
.cg-range{background:var(--card2);border:1px solid var(--line);color:var(--muted);border-radius:8px;
  padding:4px 11px;font-size:12px;font-weight:700;cursor:pointer}
.cg-range:hover{border-color:var(--gold);color:var(--cream)}
.cg-range.on{border-color:var(--gold);color:var(--gold);background:rgba(249,129,37,.10)}
/* The in-page channel selector (.cg-selbar/.cg-selbtns/.cg-selall/.cg-picks/.cg-pick/.cg-pn/.cg-check)
   moved into the right rail as .rail-pick* back on 2026-06-23 - its CSS stayed behind, unused. Worse,
   its .cg-selall silently out-ordered the NEW inline Select-all button added 2026-07-16 (same name,
   later in the file), so that button rendered in the old grey instead of orange. Removed 2026-07-16.
   .cg-pickhint below is still live (competitorsGraphSection). */
.cg-pickhint{padding:30px 16px;text-align:center;color:var(--muted2);font-size:13px}
/* hover guide + tooltip (press a day -> views/day per channel) */
.cg-focus{stroke:var(--muted2);stroke-width:1;stroke-dasharray:3 3;opacity:0;vector-effect:non-scaling-stroke;pointer-events:none}
.cg-tip{position:fixed;left:0;top:0;min-width:150px;max-width:230px;
  background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow-pop,0 8px 24px rgba(0,0,0,.18));
  padding:9px 11px;pointer-events:none;opacity:0;transition:opacity .1s;z-index:60}
.cg-tip.show{opacity:1}
.cg-td{font-size:12px;font-weight:800;color:var(--cream)}
.cg-tu{font-size:10px;color:var(--muted2);text-transform:uppercase;letter-spacing:.04em;margin-bottom:5px}
.cg-tr{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);margin-top:3px}
.cg-tr i{width:9px;height:9px;border-radius:2px;flex:0 0 auto}
.cg-tn{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cg-tr b{color:var(--cream);font-variant-numeric:tabular-nums}
.cg-posted{font-style:normal;font-size:11px;margin-left:3px}
/* posted-video names = a SEPARATE window pinned to the RIGHT of the graph (David 2026-06-25) */
.cg-vidtip{position:fixed;left:0;top:0;width:248px;max-width:300px;z-index:61;
  background:var(--card);border:1px solid var(--line);border-radius:11px;padding:10px 12px;
  box-shadow:var(--shadow-pop,0 10px 28px rgba(0,0,0,.22));opacity:0;pointer-events:none;transition:opacity .1s ease}
.cg-vidtip.show{opacity:1}
.cg-vt-h{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.3px;color:var(--muted2);margin-bottom:6px}
.cg-vt-row{display:flex;gap:7px;align-items:flex-start;margin-top:7px}
.cg-vt-row i{width:9px;height:9px;border-radius:2px;flex:0 0 auto;margin-top:3px}
.cg-vt-av{width:22px;height:22px;border-radius:50%;object-fit:cover;flex:0 0 auto;margin-top:1px;border:1.5px solid var(--line);background:var(--line)}
.cg-vt-b{min-width:0;display:flex;flex-direction:column}
.cg-vt-ch{font-size:11px;font-weight:800}
.cg-vt-t{font-size:12px;color:var(--cream);font-weight:600;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cg-vt-t + .cg-vt-t{margin-top:4px;padding-top:4px;border-top:1px solid var(--line)}   /* separate multiple posted titles */
.cg-vt-t em{font-style:normal;color:var(--muted2);font-weight:600}
.cg-vgrid{stroke:var(--line);stroke-width:.6;stroke-dasharray:2 3;opacity:.45}
.cg-proj{stroke-dasharray:7 5;opacity:.9}
.cg-est{font-size:9.5px;font-weight:800;color:var(--muted2);background:var(--line);border-radius:999px;padding:1px 5px;margin-left:4px;vertical-align:middle}
/* "Show source" on a competitive bend + the reusable centered popup */
.tl-src{margin-top:8px;width:100%;padding:8px;border-radius:9px;cursor:pointer;font-family:inherit;
  font-size:12px;font-weight:700;color:var(--blue);background:rgba(44,89,157,.10);border:1px solid rgba(44,89,157,.28)}
.tl-src:hover{background:rgba(44,89,157,.18)}
html[data-theme^="dark"] .tl-src{color:#8fb4ff;background:rgba(80,130,220,.16);border-color:rgba(80,130,220,.4)}
.aoy-pop{position:fixed;inset:0;background:rgba(10,12,18,.55);display:none;align-items:center;justify-content:center;z-index:80;padding:20px}
.aoy-pop.open{display:flex}
.pop-card{background:var(--card);border:1px solid var(--line);border-radius:16px;max-width:440px;width:100%;
  padding:20px 22px;box-shadow:0 20px 60px rgba(0,0,0,.4);position:relative}
.pop-x{position:absolute;top:12px;right:14px;background:none;border:none;font-size:16px;color:var(--muted2);cursor:pointer}
.pop-h{font-size:15px;font-weight:800;color:var(--cream);margin-bottom:12px}
.pop-b{font-size:13px;color:var(--muted);line-height:1.55}
.bsrc-card{display:flex;gap:13px;align-items:flex-start;margin-bottom:10px}
.bsrc-thumb{flex:0 0 128px;height:72px;border-radius:9px;background:var(--line) center/cover no-repeat;display:block}
.bsrc-main{flex:1;min-width:0}
.bsrc-k{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted2);font-weight:700}
.bsrc-t{font-size:13.5px;font-weight:700;color:var(--cream);margin:3px 0}
.bsrc-ch{font-size:12px;color:var(--muted2)}
.bsrc-open{display:inline-block;margin-top:6px;font-size:12px;font-weight:700;color:var(--blue)}
.bsrc-note{font-size:11.5px;color:var(--muted2)}
.bsrc-note.big{font-size:13.5px;font-weight:700;color:var(--cream);margin-bottom:8px}
.bsrc-p{font-size:12.5px;color:var(--muted);line-height:1.55}
/* upload markers ON the competitor lines (a channel posted a video that day) */
.cg-up{stroke:var(--card);stroke-width:1.5}
.cg-upnote{fill:var(--muted2);font-size:10px;font-weight:600}
.cw-graph-soon{display:flex;align-items:center;gap:14px;background:var(--card);border:1px dashed var(--line);
  border-radius:14px;padding:18px 20px;color:var(--muted);font-size:13px;line-height:1.5;margin-bottom:8px}
.cw-graph-ico{font-size:26px;flex:0 0 auto}
.cw-table{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-card);
  overflow:hidden;margin-bottom:8px}
.cw-tr{display:grid;grid-template-columns:30px 1fr 110px 120px;align-items:center;gap:12px;
  padding:11px 16px;border-bottom:1px solid var(--line);font-size:13.5px}
.cw-tr:last-child{border-bottom:none}
.cw-th{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted2);font-weight:800;background:rgba(var(--ink-rgb),.03)}
.cw-th .cw-name{grid-column:1 / span 2}
.cw-av{width:30px;height:30px;border-radius:50%;object-fit:cover;background:var(--line)}
.cw-av.init{display:grid;place-items:center;font-size:11px;font-weight:800;color:#fff;background:var(--blue)}
.cw-name{font-weight:700;color:var(--cream);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cw-v{color:var(--muted);font-weight:600;text-align:right}
.cw-u{color:var(--muted);font-weight:600;text-align:right}

/* ===== To-Do / action steps (Tell Claude → checklist) ===== */
/* Reports & To-Do - one tab split vertically in half */
.ws-split{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:820px){.ws-split{grid-template-columns:1fr}}
.ws-col{min-width:0}
.ws-h{font-size:14px;font-weight:800;color:var(--cream);margin:0 2px 12px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.ws-empty{background:var(--card);border:1px dashed var(--line);border-radius:14px;padding:30px 18px;text-align:center;color:var(--muted)}
.ws-empty .big{font-size:30px;margin-bottom:8px}
.ws-empty b{display:block;color:var(--cream);margin-bottom:4px}
.ws-empty p{font-size:12.5px;margin:0}
.ws-col .todo-list{max-width:none}
.todo-list{display:flex;flex-direction:column;gap:9px;max-width:760px}
.todo-row{display:flex;align-items:flex-start;gap:12px;background:var(--card);border:1px solid var(--line);
  border-radius:12px;padding:12px 14px;box-shadow:var(--shadow-card)}
.todo-row.done{opacity:.6}
.todo-row.done .todo-text{text-decoration:line-through;color:var(--muted)}
/* freshly-added to-do: orange outline + NEW pill (matches the reports "NEW"), David 2026-07-02 */
.todo-row.todo-new{border-color:var(--orange,#FB9B50);box-shadow:inset 0 0 0 1px var(--orange,#FB9B50),var(--shadow-card)}
/* .todo-body is a column flex container, so a plain <span> child stretches to full
   width by default (align-items:stretch) - .todo-tag already opts out via
   align-self:flex-start; this pill needs the same or it renders as a giant bar
   instead of a small NEW tag (David 2026-07-06: "don't add this new line it's
   crazzy bad"). */
.todo-newtag{align-self:flex-start;margin-left:7px;font-size:9.5px;font-weight:800;letter-spacing:.04em;color:#2c2100;background:var(--orange,#FB9B50);border-radius:999px;padding:1px 6px;vertical-align:1px}
.todo-check{flex:0 0 auto;width:22px;height:22px;border-radius:7px;border:1.5px solid rgba(44,89,157,.4);
  background:var(--card);color:var(--blue);font-weight:900;font-size:13px;cursor:pointer;display:grid;place-items:center;margin-top:1px}
.todo-row.done .todo-check{background:rgba(31,164,90,.16);border-color:rgba(31,164,90,.4);color:#1a7a45}
.todo-text{flex:1;min-width:0;font-size:13.5px;line-height:1.5;color:var(--cream);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.todo-del{flex:0 0 auto;background:none;border:none;color:var(--muted2);font-size:14px;cursor:pointer;padding:2px 4px}
.todo-del:hover{color:var(--red)}
.todo-done-h{font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--muted2);margin:14px 2px 2px;background:none;border:none;cursor:pointer;display:block;text-align:left;padding:6px 2px}
.todo-done-h:hover{color:var(--cream)}
/* My Notes: manual add row + colored type tags + per-item Start */
.note-add{display:flex;gap:8px;margin-bottom:12px;max-width:760px}
.note-in{flex:1;min-width:0;padding:10px 12px;border-radius:11px;border:1px solid var(--line);background:var(--card);color:var(--cream);font:inherit;font-size:13px}
.note-in:focus{outline:none;border-color:var(--gold)}
.note-add-btn{flex:0 0 auto;padding:10px 16px;border-radius:11px;border:none;cursor:pointer;font:inherit;font-weight:800;font-size:13px;color:#fff;background:linear-gradient(135deg,var(--gold),var(--gold-deep))}
.note-add-btn:hover{filter:brightness(1.05)}
.todo-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.todo-tag{align-self:flex-start;font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;border-radius:999px;padding:2px 8px;color:#fff}
.todo-tag.thumbnail{background:#2C599D}.todo-tag.script{background:#6C5CE7}.todo-tag.title{background:#3FB984}
.todo-tag.idea{background:#F98125}.todo-tag.research{background:#1FA9C9}.todo-tag.note{background:#8a94a6}
/* source-tab tag (inline colour now) + hover preview card on each note */
.todo-tag{display:inline-flex;align-items:center;gap:4px;letter-spacing:.02em}
.todo-when{align-self:flex-start;font-size:10px;color:var(--muted2);margin-left:8px;white-space:nowrap;vertical-align:1px;font-variant-numeric:tabular-nums}
.todo-body{position:relative}
.todo-pop{position:absolute;left:0;top:100%;margin-top:6px;z-index:30;width:300px;max-width:88vw;
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow-pop,0 12px 30px rgba(0,0,0,.22));padding:10px;display:none;gap:10px;
  pointer-events:none}   /* mouse passes THROUGH to the card beneath, so moving down updates the tooltip (David 2026-06-28) */
.todo-row:hover .todo-pop{display:flex}
.tp-thumb{flex:0 0 96px;width:96px;height:54px;border-radius:8px;background:var(--line) center/cover no-repeat}
.tp-body{flex:1;min-width:0}
.tp-src{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;margin-bottom:3px}
.tp-title{font-size:12.5px;font-weight:700;color:var(--cream);margin-bottom:4px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tp-full{font-size:11.5px;color:var(--muted);line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
/* always-visible "Open source" button (was buried in the hover-only .todo-pop -
   David 2026-07-06: easy to miss, especially on touch where hover barely fires).
   align-self:flex-start for the same reason as .todo-tag/.todo-newtag/.todo-when
   above - .todo-body is a column flex, so a plain child stretches full-width
   by default. */
.todo-srclink{align-self:flex-start;margin-top:2px;font-size:11px;font-weight:700;color:var(--blue);
  background:rgba(91,132,196,.12);border:1px solid rgba(91,132,196,.30);border-radius:8px;
  padding:4px 9px;text-decoration:none;transition:background .14s,border-color .14s}
.todo-srclink:hover{background:rgba(91,132,196,.20);border-color:rgba(91,132,196,.45)}
/* "Show source ▾" toggle + the inline card snapshot underneath the note (David 2026-07-15) */
.todo-srctoggle{align-self:flex-start;margin-top:2px;font-size:11px;font-weight:700;font-family:inherit;cursor:pointer;
  color:var(--blue);background:rgba(91,132,196,.12);border:1px solid rgba(91,132,196,.30);border-radius:8px;
  padding:4px 9px;transition:background .14s,border-color .14s}
.todo-srctoggle:hover{background:rgba(91,132,196,.20);border-color:rgba(91,132,196,.45)}
.todo-srccard{margin-top:8px;width:100%;max-width:340px;border:1px solid var(--line);border-radius:12px;
  overflow:hidden;background:var(--charcoal2)}
.todo-srccard[hidden]{display:none}
/* the saved card renders READ-ONLY inside the note - neutralize hover/lift so it reads as a snapshot,
   not a live card; re-enable just the links so the thumbnail can still open the source */
.todo-srccard .note-cardsnap{margin:0;box-shadow:none;transform:none!important;cursor:default;pointer-events:none;border:none;background:transparent;width:100%}
.todo-srccard .note-cardsnap a{pointer-events:auto}
/* ⭐ save/pick-later star (tasks + reports) */
.todo-star,.rep-star{flex:0 0 auto;font-size:15px;line-height:1;cursor:pointer;font-family:inherit;color:var(--muted2);
  background:none;border:none;padding:2px 4px;transition:color .14s,transform .12s}
.todo-star{align-self:center}
.todo-star:hover,.rep-star:hover{color:var(--gold);transform:scale(1.18)}
.todo-star.on,.rep-star.on{color:var(--gold)}
.todo-row.starred{border-color:rgba(249,129,37,.5);background:linear-gradient(90deg,rgba(249,129,37,.06),transparent 60%)}
.log-row.rep.starred{border-color:rgba(249,129,37,.45)}
/* completing a task: strike-through + fade + fly DOWN so it's obvious what happened (David 2026-07-15) */
@keyframes todo-complete{
  0%{opacity:1;transform:translateY(0)}
  22%{opacity:1;transform:translateY(-2px)}
  100%{opacity:0;transform:translateY(30px)}
}
.todo-completing{animation:todo-complete .43s cubic-bezier(.4,0,.7,1) forwards;pointer-events:none}
.todo-completing .todo-text{text-decoration:line-through;color:var(--muted)}
.todo-completing .todo-check{background:rgba(31,164,90,.16);border-color:rgba(31,164,90,.4);color:#1a7a45}
.todo-start{flex:0 0 auto;align-self:center;font-size:11px;font-weight:800;font-family:inherit;cursor:pointer;
  color:var(--gold-deep);background:rgba(249,129,37,.12);border:1px solid rgba(249,129,37,.3);border-radius:8px;padding:5px 9px}
.todo-start:hover{background:rgba(249,129,37,.2)}
.todo-start.on{background:rgba(31,164,90,.16);color:#1a7a45;border-color:rgba(31,164,90,.36)}
html[data-theme^="dark"] .todo-start{color:var(--gold)}
.todo-copyall{margin-top:12px;width:100%;max-width:760px;padding:11px;border-radius:11px;cursor:pointer;
  font-size:13px;font-weight:800;font-family:inherit;color:var(--gold-deep);
  background:rgba(249,129,37,.12);border:1px dashed rgba(249,129,37,.5);transition:background .14s}
.todo-copyall:hover{background:rgba(249,129,37,.2)}
.todo-copyall.told{background:rgba(31,164,90,.16);color:#1a7a45;border-color:rgba(31,164,90,.4)}
html[data-theme^="dark"] .todo-copyall{color:var(--gold)}
/* My Channel: copy-channel notice (no Studio data for a researched channel) */
.yt-copy-note{display:flex;align-items:center;gap:16px;background:var(--card);border:1px solid var(--line);
  border-radius:16px;padding:20px 22px;box-shadow:var(--shadow-card);max-width:760px}
.ycn-ico{font-size:30px;flex:0 0 auto}
.ycn-main{flex:1;min-width:0;font-size:14px;line-height:1.5;color:var(--cream)}
.ycn-sub{font-size:12.5px;color:var(--muted2);margin-top:6px;line-height:1.5}
.ycn-btn{flex:0 0 auto;align-self:center;padding:10px 16px;border-radius:11px;cursor:pointer;
  font-size:13px;font-weight:800;font-family:inherit;color:#fff;border:none;
  background:linear-gradient(135deg,var(--gold),var(--gold-deep))}
.ycn-btn:hover{filter:brightness(1.05)}

/* ===== Tim's Weekly Verdict (Day 18 executive report) ===== */
.verdict-card{background:var(--card);border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--shadow-card);padding:22px 24px;max-width:760px}
/* Verdict as a DM from Tim (avatar + message bubble) */
.verdict-dm{max-width:720px}
.verdict-tim{display:flex;align-items:center;gap:11px;margin-bottom:10px}
.verdict-tim-av{position:relative;width:44px;height:44px;border-radius:50%;flex:0 0 auto;overflow:hidden;
  background:linear-gradient(135deg,var(--gold),var(--blue));display:grid;place-items:center;
  box-shadow:0 2px 8px rgba(0,0,0,.15)}
.verdict-tim-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vta-mono{color:#fff;font-weight:900;font-size:20px;font-family:inherit}
.verdict-tim-name{font-size:15px;font-weight:800;color:var(--cream);display:flex;align-items:center;gap:7px}
.verdict-tim-tag{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--gold-deep);
  background:rgba(249,129,37,.12);padding:2px 7px;border-radius:6px}
.verdict-tim-sub{font-size:12px;color:var(--muted2);margin-top:1px}
.verdict-bubble{position:relative;background:var(--card);border:1px solid var(--line);border-radius:4px 16px 16px 16px;
  box-shadow:var(--shadow-card);padding:18px 20px;margin-left:8px}
.verdict-bubble::before{content:'';position:absolute;top:-1px;left:-9px;width:14px;height:14px;background:var(--card);
  border-left:1px solid var(--line);border-top:1px solid var(--line);border-radius:4px 0 0 0;
  transform:skewX(-20deg)}
.verdict-dm .verdict-foot{margin-top:12px;padding-left:8px}
.verdict-mark{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;color:var(--gold-deep);background:rgba(249,129,37,.12);
  border:1px solid rgba(249,129,37,.30);border-radius:999px;padding:5px 12px;margin-bottom:14px}
.verdict-body p{font-size:15px;line-height:1.6;color:var(--cream);margin:0 0 12px}
.verdict-link{color:var(--gold);font-weight:700;text-decoration:none;border-bottom:1px solid rgba(249,129,37,.4);word-break:break-all}
.verdict-link:hover{border-bottom-color:var(--gold)}
.verdict-body p:last-child{margin-bottom:0;font-weight:700}
.verdict-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:12px;color:var(--muted2)}
.verdict-foot .cbtn{flex:0 0 auto;padding:7px 14px;background:rgba(44,89,157,.10);
  color:var(--blue);border:1px solid rgba(44,89,157,.28);border-radius:9px;font-weight:700;cursor:pointer}
.verdict-empty{max-width:560px;background:var(--card);border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--shadow-card);padding:34px 28px;text-align:center}
.verdict-orb{width:64px;height:64px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;
  font-size:30px;background:rgba(249,129,37,.12);border:1px solid rgba(249,129,37,.26)}
.verdict-empty h3{font-size:19px;font-weight:800;color:var(--cream);margin:0 0 8px}
.verdict-empty p{font-size:13.5px;line-height:1.55;color:var(--muted);margin:0 auto 18px;max-width:420px}
.verdict-focus{display:flex;flex-wrap:wrap;gap:7px;align-items:center;font-size:12px;color:var(--muted2);
  font-weight:600;margin:-4px 0 14px}
.verdict-focus span{background:rgba(44,89,157,.10);color:var(--blue);border:1px solid rgba(44,89,157,.24);
  border-radius:999px;padding:3px 10px;font-weight:700}
.verdict-loading{max-width:560px;background:var(--card);border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--shadow-card);padding:26px 28px;display:flex;flex-direction:column;align-items:center;gap:14px}
.vl-steps{display:flex;flex-direction:column;gap:9px;width:100%;max-width:340px}
.vl-step{font-size:13.5px;font-weight:600;color:var(--cream);padding-left:22px;position:relative;opacity:.85}
.vl-step::before{content:'';position:absolute;left:0;top:5px;width:9px;height:9px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 0 3px rgba(249,129,37,.18)}
.vl-note{font-size:12px;color:var(--muted2);text-align:center}
/* Niche Hunter heading (kept on top of the embed, original's title vibe) */
.nh-head{display:flex;align-items:center;gap:9px;font-size:24px;font-weight:800;
  color:var(--cream);letter-spacing:-.3px;margin:0 0 12px}
.nh-head-ico{font-size:22px}
.lv-card{display:flex;gap:18px;background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:16px;box-shadow:var(--shadow-card);margin-bottom:22px}
.lv-thumb{flex:0 0 240px;align-self:flex-start;aspect-ratio:16/9;border-radius:11px;
  background:var(--card2) center/cover no-repeat;display:block}
.lv-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px}
.lv-title{font-size:16px;font-weight:800;color:var(--cream);text-decoration:none;line-height:1.25}
.lv-title:hover{color:var(--gold)}
.lv-meta{font-size:12px;color:var(--muted2)}
.lv-stats{display:flex;gap:18px;flex-wrap:wrap;font-size:13px;color:var(--muted);margin:2px 0 4px}
.lv-stats b{color:var(--cream);font-weight:800;font-size:15px}
.lv-chart{border-top:1px solid var(--line);padding-top:10px}
.lv-note{font-size:11px;color:var(--muted2)}
@media(max-width:680px){.lv-card{flex-direction:column}.lv-thumb{flex-basis:auto;width:100%}}

/* My Channel - Advanced Studio table (all videos, deep metrics) */
.av-controls{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:2px 0 12px}
/* the format toggle carries a 16px bottom margin for its standalone uses (top of feeds); inside the
   All-videos controls row that pushed it above the dropdowns/sort - drop it so all three align. David 2026-07-15 */
.av-controls .fmt-toggle{margin-bottom:0}
.av-reset{background:none;border:1px solid var(--line);color:var(--muted);border-radius:8px;padding:6px 11px;
  font-size:12px;font-weight:700;font-family:inherit;cursor:pointer;transition:border-color .14s,color .14s}
.av-reset:hover{border-color:var(--gold);color:var(--gold)}
.av-filters{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.av-fsel{font:inherit;font-size:13px;font-weight:700;color:var(--cream);background:var(--card);
  border:1px solid var(--line);border-radius:8px;padding:7px 10px;cursor:pointer;max-width:200px}
.av-fsel:hover{border-color:var(--gold)}
.av-fsel:focus{outline:none;border-color:var(--gold)}
.av-sorts{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.av-sortlbl{font-size:11px;color:var(--muted2);text-transform:uppercase;letter-spacing:.04em;margin-right:2px}
.av-sort{background:var(--card);border:1px solid var(--line);color:var(--muted);border-radius:8px;
  padding:5px 11px;font-size:12px;font-weight:700;cursor:pointer}
.av-sort:hover{border-color:var(--gold);color:var(--cream)}
.av-sort.on{border-color:var(--gold);color:var(--gold);background:rgba(249,129,37,.08)}
.av-wrap{border:1px solid var(--line);border-radius:14px;overflow-x:auto;background:var(--card);box-shadow:var(--shadow-card)}
html[data-theme="light"] .av-wrap{border:1.5px solid rgba(120,90,30,.34);box-shadow:0 1px 0 rgba(140,110,40,.06),0 8px 24px rgba(140,110,40,.22)}
.av-table{width:100%;border-collapse:collapse;font-size:13px;min-width:560px}
.av-table thead th{text-align:right;font-size:11px;font-weight:700;color:var(--muted2);text-transform:uppercase;
  letter-spacing:.03em;padding:11px 14px;background:var(--card2);border-bottom:1px solid var(--line);white-space:nowrap}
.av-table thead th:first-child{text-align:left}
/* clickable sort headers (Google-Sheets style) - David 2026-06-26 */
.av-th{cursor:pointer;user-select:none;transition:color .12s}
.av-th:hover{color:var(--cream)}
.av-arr{display:inline-block;margin-left:5px;font-size:11px;opacity:.35;vertical-align:middle}
.av-th:hover .av-arr{opacity:.7}
.av-arr.on{opacity:1;color:var(--gold);font-size:12px}
.av-table td{padding:10px 14px;border-bottom:1px solid var(--line);color:var(--cream);vertical-align:middle}
.av-table tbody tr:last-child td{border-bottom:none}
.av-table tbody tr:hover{background:rgba(var(--ink-rgb),.025)}
.av-table td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:700}
.av-vid a{display:flex;align-items:center;gap:11px;text-decoration:none;min-width:0}
.av-thumb{flex:0 0 76px;width:76px;aspect-ratio:16/9;border-radius:7px;position:relative;
  background:var(--card2) center/cover no-repeat}
.av-badge{position:absolute;left:3px;bottom:3px;background:rgba(0,0,0,.78);color:#fff;font-size:9px;
  font-weight:800;padding:1px 5px;border-radius:4px;letter-spacing:.02em}
.av-tt{display:flex;flex-direction:column;gap:2px;min-width:0}
.av-title{font-weight:700;color:var(--cream);line-height:1.25;overflow:hidden;text-overflow:ellipsis;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.av-vid a:hover .av-title{color:var(--gold)}
.av-date{font-size:11px;color:var(--muted2)}
.av-note{font-size:11px;color:var(--muted2);margin:8px 2px 24px}
.cu-more{display:block;margin:10px auto 2px;padding:8px 18px;border-radius:9px;
  border:1px solid var(--line);background:var(--card2);color:var(--muted);
  font:600 12.5px/1 inherit;cursor:pointer;transition:color .15s,border-color .15s}
.cu-more:hover{color:var(--cream);border-color:var(--gold)}
/* "Your tracked channels' uploads": 2x bigger thumbnails (David 2026-07-15). Scoped to #cuWrap so
   the My Channel All-videos table (same .av-thumb class) keeps its compact 76px thumbs. */
#cuWrap .av-thumb{flex:0 0 152px;width:152px}
@media(max-width:680px){.av-thumb{flex-basis:54px;width:54px}.av-table td,.av-table thead th{padding:8px 9px}}
/* the #cuWrap rule above out-specifies the mobile override, so give it its own doubled mobile size */
@media(max-width:680px){#cuWrap .av-thumb{flex-basis:108px;width:108px}}

/* ===== P&L (My Channel flagship) ===== */
/* P&L page toggle (Ledger / Report) */
.pnl-pages{display:flex;gap:7px;margin-bottom:14px}
.pnl-page{background:var(--card2);border:1px solid var(--line);color:var(--muted);border-radius:9px;
  padding:7px 15px;font-size:13px;font-weight:700;cursor:pointer}
.pnl-page:hover{border-color:var(--gold);color:var(--cream)}
.pnl-page.on{border-color:var(--gold);color:var(--gold);background:rgba(249,129,37,.10)}
/* P&L Ledger (the diary) */
.led{margin-bottom:8px}
.led-form{display:flex;flex-wrap:wrap;gap:9px;align-items:center;background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:13px 15px;box-shadow:var(--shadow-card);margin-bottom:14px}
.led-in{background:var(--charcoal);border:1px solid var(--line);color:var(--cream);border-radius:9px;
  padding:9px 11px;font-size:13px;font-family:inherit}
.led-in:focus{outline:none;border-color:var(--gold)}
.led-date{flex:0 0 auto}.led-type{flex:0 0 auto;cursor:pointer}
.led-dlbl{display:inline-flex;flex-direction:column;gap:3px;font-size:10px;font-weight:700;color:var(--muted2);text-transform:uppercase;letter-spacing:.03em}
.led-rd{font-style:normal;color:var(--muted2);font-size:11px}
.led-cat{flex:1;min-width:140px}
.led-amtw{display:inline-flex;align-items:center;gap:3px;background:var(--charcoal);border:1px solid var(--line);border-radius:9px;padding:0 9px}
.led-amtw span{color:var(--muted2);font-size:12px}.led-amtw:focus-within{border-color:var(--gold)}
.led-amt{width:96px;background:transparent;border:none;color:var(--cream);font-size:13px;font-weight:600;padding:9px 2px;text-align:right;font-variant-numeric:tabular-nums}
.led-amt:focus{outline:none}
.led-add{flex:0 0 auto;background:var(--gold);color:#fff;border:none;border-radius:9px;padding:9px 16px;font-size:13px;font-weight:800;cursor:pointer}
.led-add:hover{filter:brightness(1.06)}
/* TIM-1: source field + one-time/monthly spread toggle + recurring checkbox */
.led-src{flex:0 0 auto;width:170px}
.led-flags{display:inline-flex;align-items:center;gap:10px;flex:0 0 auto}
.led-spread{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.led-sp{font:inherit;font-size:11.5px;font-weight:700;cursor:pointer;color:var(--muted);background:transparent;border:none;padding:8px 11px}
.led-sp.on{background:var(--blue);color:#fff}
.led-rep{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;color:var(--muted);cursor:pointer;white-space:nowrap}
.led-rep input{accent-color:var(--gold);cursor:pointer}
.led-src-t{font-style:normal;font-size:9.5px;font-weight:800;color:var(--blue);background:rgba(44,89,157,.12);padding:1px 6px;border-radius:5px;margin-left:6px;vertical-align:1px}
.led-badge{font-style:normal;font-size:9.5px;font-weight:800;padding:1px 5px;border-radius:5px;margin-left:5px;vertical-align:1px}
.led-badge.sp{color:#fff;background:var(--orange,#FB9B50)}
.led-badge.rep{color:var(--gold-deep);background:rgba(249,129,37,.16)}
.led-apply{flex:0 0 auto;background:rgba(44,89,157,.12);color:var(--blue);border:1px solid rgba(44,89,157,.3);border-radius:7px;padding:4px 10px;font-size:11px;font-weight:800;cursor:pointer;font-family:inherit}
.led-apply:hover{background:var(--blue);color:#fff}
.led-list{display:flex;flex-direction:column;gap:7px;max-width:820px}
.led-row{display:grid;grid-template-columns:130px 92px minmax(0,1fr) auto auto auto;align-items:center;gap:12px;
  background:var(--card);border:1px solid var(--line);border-radius:11px;padding:10px 14px}
.led-d{font-size:12px;color:var(--muted2);font-variant-numeric:tabular-nums}
.led-chip{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;text-align:center;
  padding:3px 0;border-radius:6px}
.led-chip.income{color:#1a7a45;background:rgba(63,185,132,.15)}
.led-chip.production{color:var(--gold-deep);background:rgba(249,129,37,.13)}
.led-chip.fixed{color:#6C5CE7;background:rgba(108,92,231,.13)}
.led-cat{font-size:13.5px;color:var(--cream);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.led-amt-v{font-size:14px;font-weight:800;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.led-amt-v.pos{color:#3FB984}.led-amt-v.neg{color:var(--red)}
.led-del{background:transparent;border:none;color:var(--muted2);font-size:13px;cursor:pointer;border-radius:6px}
.led-del:hover{color:var(--red)}
.pnl-hint{font-size:11.5px;color:var(--muted2);line-height:1.5;margin-top:10px}
@media(max-width:620px){.led-row{grid-template-columns:1fr auto 26px}.led-d,.led-chip{grid-column:span 1}}
.pnl{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:8px}
@media(max-width:760px){.pnl{grid-template-columns:1fr}}
.pnl-form,.pnl-stmt{background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:16px 18px;box-shadow:var(--shadow-card)}
.pnl-fgroup{margin-bottom:14px}
.pnl-fgroup:last-child{margin-bottom:0}
.pnl-flabel{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted2);margin-bottom:7px}
.pnl-fhint{font-weight:600;text-transform:none;letter-spacing:0;color:var(--muted2);opacity:.8}
.pnl-li{display:flex;align-items:center;gap:10px;padding:5px 0}
.pnl-lbl{flex:1;min-width:0;background:transparent;border:none;border-bottom:1px dashed transparent;
  color:var(--cream);font-size:13px;padding:3px 0}
.pnl-lbl:not(.ro){cursor:text}
.pnl-lbl:not(.ro):hover,.pnl-lbl:not(.ro):focus{border-bottom-color:var(--line);outline:none}
.pnl-lbl.ro{color:var(--muted);font-size:12.5px}
.pnl-amtw{display:inline-flex;align-items:center;gap:3px;background:var(--charcoal);border:1px solid var(--line);
  border-radius:8px;padding:0 9px}
.pnl-amtw span{color:var(--muted2);font-size:12px}
.pnl-amtw:focus-within{border-color:var(--gold)}
.pnl-amt{width:88px;background:transparent;border:none;color:var(--cream);font-size:13px;font-weight:600;
  padding:7px 2px;text-align:right;font-variant-numeric:tabular-nums}
.pnl-amt:focus{outline:none}
/* income statement */
.pnl-stmt{display:flex;flex-direction:column;gap:1px;align-self:start}
.pnl-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:9px 2px}
.pnl-rk{font-size:13px;color:var(--muted);display:flex;flex-direction:column}
.pnl-sub{font-size:10.5px;color:var(--muted2);margin-top:2px}
.pnl-rv{font-size:14px;font-weight:700;color:var(--cream);font-variant-numeric:tabular-nums;white-space:nowrap}
.pnl-rv.neg{color:var(--red)}
.pnl-row.minus{padding:6px 2px}.pnl-row.minus .pnl-rk,.pnl-row.minus .pnl-rv{color:var(--muted);font-weight:600;font-size:12.5px}
.pnl-row.sum{border-top:1px solid var(--line);margin-top:2px;padding-top:9px}
.pnl-row.sum .pnl-rk{color:var(--cream);font-weight:700}
.pnl-row.rev .pnl-rk{color:var(--cream);font-weight:800}.pnl-row.rev .pnl-rv{font-size:15px;font-weight:800}
.pnl-row.net{border-top:2px solid var(--line);margin-top:4px;padding-top:11px}
.pnl-row.net .pnl-rk{color:var(--cream);font-weight:800;font-size:14px}
.pnl-row.net .pnl-rv{font-size:18px;font-weight:900}
.pnl-rv.pos{color:var(--green)}
/* David 2026-06-25: the single structured P&L statement table */
/* NO horizontal padding: the sticky label column must reach the widget's left edge, else scrolled
   months peek through the gap on the left (David 2026-06-27 "I can see the previous months"). The
   td's own 16px padding keeps text off the edge; the rounded corners clip the flush cells. */
.ps-wrap{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-card);padding:8px 0;margin-bottom:16px;overflow-x:auto}
.ps-table{width:100%;border-collapse:collapse;font-size:13.5px}
.ps-table td{padding:7px 16px}
.ps-k{color:var(--muted);font-weight:600}
.ps-k.ind{padding-left:30px;color:var(--muted2);font-weight:500}
.ps-v{text-align:right;color:var(--cream);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.ps-v.neg{color:var(--red)}
.ps-sec td{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted2);padding-top:15px;padding-bottom:4px;border-bottom:1px solid var(--line)}
.ps-sum td{border-top:1px solid var(--line)}
.ps-sum .ps-k{color:var(--cream);font-weight:800}
.ps-sum .ps-v{font-weight:800}
.ps-spend .ps-k,.ps-spend .ps-v{color:var(--red);font-weight:800}
.ps-net{border-top:2px solid var(--line)}
.ps-net .ps-k{color:var(--cream);font-weight:900;font-size:15px}
.ps-net .ps-v{font-size:18px;font-weight:900;color:var(--green)}
.ps-net .ps-v.neg{color:var(--red)}
.ps-plain .ps-k{color:var(--muted2);font-weight:600}
/* monthly P&L matrix (David 2026-06-26): months as columns, sticky line-item column */
.ps-monthly{min-width:max-content;font-size:12.5px}
.ps-monthly th{padding:8px 14px;text-align:right;font-size:11px;font-weight:800;color:var(--muted2);text-transform:uppercase;letter-spacing:.02em;border-bottom:1px solid var(--line);white-space:nowrap}
.ps-monthly th.ps-corner{text-align:left}
.ps-monthly td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--cream);font-weight:600}
.ps-monthly td.num.neg{color:var(--red)}
/* Sticky label column: opaque card bg so scrolled months hide BEHIND it (no oldest-month bleed on
   the left), + a divider line after the names - matching the one before the Total column (David 2026-06-27). */
/* The left/right column dividers are drawn as a full-height ::after line on the sticky cell (NOT a
   border - a border on a border-collapse table scrolls away; and NOT box-shadow - Chrome drops/clips
   box-shadow on sticky border-collapse cells, so the line was "cut at the top" and missing in Chrome,
   David 2026-07-15). The pseudo-element is a child of the sticky cell, so it stays pinned AND renders
   the same in every browser, top to bottom. */
.ps-monthly .ps-k,.ps-monthly th.ps-corner{position:sticky;left:0;background:var(--card);z-index:2;white-space:nowrap}
.ps-monthly .ps-k::after,.ps-monthly th.ps-corner::after{content:"";position:absolute;top:0;bottom:0;right:0;width:1px;background:var(--line);pointer-events:none}
.ps-monthly th.ps-corner{z-index:3}
/* section header = a subtle full-width band (David 2026-06-27: approved the pinned-statement
   look; uses the dashboard's OWN tokens, not the mockup colours) */
.ps-monthly .ps-sec td{background:color-mix(in srgb,rgba(var(--ink-rgb),1) 5%,var(--card))}
/* the "Last 28 days" / Total column stays PINNED on the right like the Line-item column */
.ps-monthly .ps-tot{position:sticky;right:0;z-index:2;font-weight:800;color:var(--cream);background:var(--card)}
.ps-monthly .ps-tot::after{content:"";position:absolute;top:0;bottom:0;left:0;width:1px;background:var(--line);pointer-events:none}
.ps-monthly th.ps-tot{z-index:3}
.ps-monthly .ps-k.ind{padding-left:30px;font-weight:500}
.ps-monthly .ps-sum td{border-top:1.5px solid rgba(var(--ink-rgb),.45);font-weight:800;color:var(--cream)}
.ps-monthly .ps-spend td.num{color:var(--red);font-weight:800}
.ps-monthly .ps-net td{border-top:2px solid var(--line);font-weight:900;background:color-mix(in srgb,var(--green) 13%,var(--card))}
.ps-monthly .ps-net td.num{color:var(--green)}
.ps-monthly .ps-net td.num.neg{color:var(--red)}
/* David 2026-07-03: light mode - the black P&L numbers become dark grey; the red negatives
   and green net stay their colours. */
html[data-theme="light"] .ps-monthly td.num{color:#333333}
html[data-theme="light"] .ps-monthly td.num.neg{color:var(--red)}
html[data-theme="light"] .ps-monthly .ps-spend td.num{color:var(--red)}
html[data-theme="light"] .ps-monthly .ps-net td.num{color:var(--green)}
html[data-theme="light"] .ps-monthly .ps-net td.num.neg{color:var(--red)}
/* David 2026-07-03: Black theme only - the light-grey P&L line-item labels stay
   white with a thin black outline. White total/net rows + coloured numbers unchanged. */
html[data-theme="dark-black"] .ps-monthly .ps-k.ind,
html[data-theme="dark-black"] .ps-plain .ps-k,
html[data-theme="dark-black"] .ps-k.ind{color:#ffffff;
  text-shadow:-1px 0 0 #000,1px 0 0 #000,0 -1px 0 #000,0 1px 0 #000,
    -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000}
/* Section header bands (REVENUE, DEDUCTIONS, PRODUCTION, FIXED OPERATING,
   PROFIT SHARE, TOTALS) in orange. */
html[data-theme="dark-black"] .ps-monthly .ps-sec td,
html[data-theme="dark-black"] .ps-sec td{color:#B8B8BE;text-shadow:none}
/* the column dividers are a touch faint on the pure-black theme -> slightly lighter + 1.5px */
html[data-theme="dark-black"] .ps-monthly .ps-k::after,
html[data-theme="dark-black"] .ps-monthly th.ps-corner::after,
html[data-theme="dark-black"] .ps-monthly .ps-tot::after{width:1.5px;background:#34343b}
/* the "P&L - Profit & Loss" heading in the same silver as the top numbers */
html[data-theme="dark-black"] .ps-hd{color:#C0C0C0}
/* uploads/month count number inside the circle (base white; red in Black theme) */
.ysc-upc{fill:#fff;font-size:9px;font-weight:800;pointer-events:none}
/* gauge-marker rings: hidden by default (only the Black theme turns them on) */
.ysc-uptrack,.ysc-uparc{display:none;fill:none}
.ysc-uptrack{stroke:#26262b;stroke-width:2.6}
.ysc-uparc{stroke:#F0A45E;stroke-width:2.6;stroke-linecap:round}
/* David 2026-07-05: the palette chart accents now apply to the LIGHT theme too (not just Black),
   so Light matches the site palette. Navy ("dark") is left on its own colours. `:is(...)` keeps the
   same specificity as the old single-theme prefix. */
/* upload circles: soft orange-tint disc + orange-tint number (gauge rings stay hidden) */
:is(html[data-theme="dark-black"],html[data-theme="light"]) g.ysc-up .ysc-updisc{fill:rgba(249,129,37,.17);opacity:1}
:is(html[data-theme="dark-black"],html[data-theme="light"]) .ysc-upc{fill:#F0A45E}
/* base metric line + area + its legend dot + uploads dot = the orange accent */
:is(html[data-theme="dark-black"],html[data-theme="light"]) .ysc-line:not(.ysc-exp){stroke:var(--gold) !important}
:is(html[data-theme="dark-black"],html[data-theme="light"]) .ysc-svg stop{stop-color:var(--gold)}
:is(html[data-theme="dark-black"],html[data-theme="light"]) .ysc-legend .ysc-lg:first-child i{background:var(--gold) !important}
:is(html[data-theme="dark-black"],html[data-theme="light"]) .ysc-lg i[style*="50%"]{background:var(--gold) !important}
/* REVENUE + Estimated profit line + area + legend dot -> Muted Emerald green */
:is(html[data-theme="dark-black"],html[data-theme="light"]) .ytov-chart:has(.ysc-svg[data-lbl="Revenue"]) .ysc-line:not(.ysc-exp),
:is(html[data-theme="dark-black"],html[data-theme="light"]) .ytov-chart:has(.ysc-svg[data-lbl="Estimated profit"]) .ysc-line:not(.ysc-exp){stroke:#55876E !important}
:is(html[data-theme="dark-black"],html[data-theme="light"]) .ytov-chart:has(.ysc-svg[data-lbl="Revenue"]) .ysc-svg stop,
:is(html[data-theme="dark-black"],html[data-theme="light"]) .ytov-chart:has(.ysc-svg[data-lbl="Estimated profit"]) .ysc-svg stop{stop-color:#55876E}
:is(html[data-theme="dark-black"],html[data-theme="light"]) .ytov-chart:has(.ysc-svg[data-lbl="Revenue"]) .ysc-legend .ysc-lg:first-child i,
:is(html[data-theme="dark-black"],html[data-theme="light"]) .ytov-chart:has(.ysc-svg[data-lbl="Estimated profit"]) .ysc-legend .ysc-lg:first-child i{background:#55876E !important}
/* Expenses (dashed) line + its legend dot -> Muted Garnet red */
:is(html[data-theme="dark-black"],html[data-theme="light"]) .ysc-line.ysc-exp{stroke:#B24A4A !important;stroke-dasharray:none}
:is(html[data-theme="dark-black"],html[data-theme="light"]) .ytov-chart:has(.ysc-svg[data-dual="1"]) .ysc-legend .ysc-lg:nth-child(2) i{background:#B24A4A !important}
/* Views + "Videos posted / day" -> Sky Blue #5F8FC4 line + area + legend box (uploads dot stays orange) */
:is(html[data-theme="dark-black"],html[data-theme="light"]) .ytov-chart:has(.ysc-svg[data-lbl="Views"]) .ysc-line:not(.ysc-exp),
:is(html[data-theme="dark-black"],html[data-theme="light"]) .ytov-chart:has(.ysc-svg[data-lbl="Videos posted / day"]) .ysc-line:not(.ysc-exp){stroke:#5F8FC4 !important}
:is(html[data-theme="dark-black"],html[data-theme="light"]) .ytov-chart:has(.ysc-svg[data-lbl="Views"]) .ysc-svg stop,
:is(html[data-theme="dark-black"],html[data-theme="light"]) .ytov-chart:has(.ysc-svg[data-lbl="Videos posted / day"]) .ysc-svg stop{stop-color:#5F8FC4}
:is(html[data-theme="dark-black"],html[data-theme="light"]) .ytov-chart:has(.ysc-svg[data-lbl="Views"]) .ysc-legend .ysc-lg:first-child i,
:is(html[data-theme="dark-black"],html[data-theme="light"]) .ytov-chart:has(.ysc-svg[data-lbl="Videos posted / day"]) .ysc-legend .ysc-lg:first-child i{background:#5F8FC4 !important}
/* David 2026-07-03: Black theme - all four top metric-tile numbers use one silver / dirty-white,
   overriding the per-metric colour + the pos green / neg red. */
html[data-theme="dark-black"] .ytov-v,
html[data-theme="dark-black"] .ytov-v.pos,
html[data-theme="dark-black"] .ytov-v.neg{color:#C0C0C0}
/* David 2026-07-03: Black theme - hide the small grey sub-line under each top number */
html[data-theme="dark-black"] .ytov-sub{display:none}
/* Minimal Mono: the metric tiles' accent (top bar, hover + selected border) is orange, not the per-metric colour */
html[data-theme="dark-black"] .ytov-tile::before{background:var(--gold)}
html[data-theme="dark-black"] .ytov-tile:hover{border-color:color-mix(in srgb,var(--gold) 55%,var(--line))}
html[data-theme="dark-black"] .ytov-tile.sel{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset,var(--shadow-card)}
html[data-theme="dark-black"] .ytov-tile:focus-visible{outline-color:var(--gold)}
/* Black theme - video-thumbnail frame removed (no border, like before) */
html[data-theme="dark-black"] .wg-thumb{border:none}
/* the "Your channel got ... views" headline in the same silver (the click-hint keeps its grey) */
html[data-theme="dark-black"] .ytov-head,
html[data-theme="dark-black"] .ytov-head b{color:#C0C0C0}
/* David 2026-07-03: Black theme - Money Flow income (green) + expense (red) left stripes
   become the brand orange #F98125 (var(--gold), same shade as the Add-entry button). */
html[data-theme="dark-black"] .rm-msg.income,
html[data-theme="dark-black"] .rm-msg.expense{border-left-color:#3A3A3E}
/* David 2026-07-04: money-flow category tags -> "soft chip" (filled orange-tint, no border,
   one uniform accent instead of the per-category outline colours) */
html[data-theme="dark-black"] .rm-tag{
  background:rgba(249,129,37,.15); color:#F0A45E; border:none;
  border-radius:7px; padding:3.5px 9px; font-size:10px; letter-spacing:.04em; vertical-align:0;
}
/* David 2026-07-04: money-entry toggles use the site's muted palette in the Black theme -
   Income = Muted Emerald (var(--green) #55876E), One-time = Sky Blue #5F8FC4 (the Views line). */
html[data-theme="dark-black"] .rm-t.on.income{background:var(--green);border-color:var(--green)}
html[data-theme="dark-black"] .rm-sp.on{background:#5F8FC4}
.ps-monthly .ps-plain td.num{color:var(--muted)}
.ps-plain .ps-v{color:var(--cream);font-weight:700}
/* TIM-3: revenue source rows + by-source donut */
.pnl-row.src{padding:5px 2px}
.pnl-row.src .pnl-rk{flex-direction:row;align-items:center;gap:7px;color:var(--cream);font-weight:600;font-size:12.5px}
.pnl-row.src .pnl-rv{font-weight:700;font-size:13px}
.pnl-srcdot{display:inline-block;width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.pnl-grosstag,.pnl-nettag{font-style:normal;font-size:8.5px;font-weight:800;padding:1px 5px;border-radius:5px;text-transform:uppercase;letter-spacing:.03em}
.pnl-grosstag{color:var(--gold-deep);background:rgba(249,129,37,.15)}
.pnl-nettag{color:#1a7a45;background:rgba(63,185,132,.15)}
.pnl-vh{font-size:13.5px;font-weight:800;color:var(--cream);margin-bottom:10px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.rsp-card{padding:16px 18px}
.rsp-month{background:var(--charcoal);border:1px solid var(--line);color:var(--cream);border-radius:8px;padding:5px 9px;font:inherit;font-size:11.5px;font-weight:700;cursor:pointer}
.rsp-body{display:flex;align-items:center;gap:20px;flex-wrap:wrap;position:relative}
/* instant, styled donut tooltip (replaces the slow white native title) - shows the % in the slice colour */
.rsp-tip{position:absolute;z-index:8;pointer-events:none;background:var(--card);border:1px solid var(--line);
  border-radius:8px;padding:4px 9px;font-size:13px;font-weight:800;font-variant-numeric:tabular-nums;
  box-shadow:0 6px 16px rgba(0,0,0,.3);white-space:nowrap}
/* bar charts: lift the hovered bar (David 2026-06-28 chose "C - lift up"; value labels already render) */
.wg-svg rect{transition:transform .15s ease;transform-box:fill-box}
.wg-svg rect:hover{transform:translateY(-4px)}
/* Views-by-format slice + legend are click-to-filter -> jump to the All-videos table */
/* Sample-data shell for a role graph with nobody (or nobody with numbers) in it. David 2026-07-16:
   "never show empty graphs - how can I choose the graph if I see empty black space". Real chart,
   fake people, clearly badged; the rows carry no id so nothing here is click-to-filter. */
.rg-demo{position:relative}
.rg-badge{position:absolute;top:-2px;right:0;z-index:2;font-size:9px;font-weight:800;text-transform:uppercase;
  letter-spacing:.06em;color:var(--gold);border:1px solid rgba(249,129,37,.45);border-radius:5px;padding:1px 6px}
.rg-demo .ad-wrap,.rg-demo .vidbars,.rg-demo .wg-wrap{opacity:.78}
.rg-demo .rsp-seg,.rg-demo .ad-li,.rg-demo .rsp-li{cursor:default}
.rsp-jump{cursor:pointer}
.rsp-li.rsp-jump,.ad-li.rsp-jump{border-radius:7px;transition:background .12s}
.rsp-li.rsp-jump:hover,.ad-li.rsp-jump:hover{background:rgba(var(--ink-rgb),.06)}
.rsp-svg{width:150px;height:150px;flex:0 0 auto}
.rsp-seg{transition:stroke-dashoffset .3s,stroke-width .18s ease,filter .18s ease;cursor:pointer}
@keyframes rspflow{to{transform:translateX(-46px)}}
@media(prefers-reduced-motion:reduce){}
.rsp-center{fill:var(--cream);font-size:16px;font-weight:900;font-variant-numeric:tabular-nums}
.rsp-center-sub{fill:var(--muted2);font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.rsp-legend{flex:1;min-width:180px;display:flex;flex-direction:column;gap:7px}
.rsp-li{display:flex;align-items:center;gap:8px;font-size:12.5px}
.rsp-dot{width:11px;height:11px;border-radius:3px;flex:0 0 auto}
.rsp-name{flex:1;color:var(--cream);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rsp-pct{color:var(--muted2);font-weight:700;font-variant-numeric:tabular-nums}
.rsp-val{color:var(--cream);font-weight:800;font-variant-numeric:tabular-nums;min-width:58px;text-align:right}
/* visuals */
.pnl-vcard{position:relative;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px 18px;
  box-shadow:var(--shadow-card);margin-bottom:8px}
.pnl-leg-note{font-size:11px;color:var(--muted2);font-weight:500}
/* auto-update banner (a fresh deploy is ready) */
.upd-banner{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:400;display:flex;align-items:center;gap:12px;background:var(--blue);color:#fff;border-radius:12px;padding:11px 16px;font-size:13px;font-weight:700;box-shadow:0 12px 34px rgba(0,0,0,.35)}
.upd-banner button{background:#fff;color:var(--blue);border:none;border-radius:8px;padding:6px 13px;font:inherit;font-weight:800;cursor:pointer}
/* David 2026-06-25: red "!" on estimated (no-real-RPM) money figures + the Studio-upload explainer */
.est-warn{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:var(--red);color:#fff;font-weight:900;font-size:12px;line-height:1;border:none;cursor:pointer;vertical-align:middle;margin-left:6px;flex:0 0 auto}
.est-warn:hover{filter:brightness(1.1)}
.srm-opt{background:var(--charcoal);border:1px solid var(--line);border-radius:11px;padding:12px 13px;margin-bottom:11px}
.srm-opt b{font-size:13px;color:var(--cream)}
.srm-opt p{font-size:12px;color:var(--muted);margin:5px 0 9px;line-height:1.5}
.srm-up{display:inline-flex;align-items:center;gap:7px;background:linear-gradient(135deg,var(--gold),var(--gold-deep));color:#fff;border-radius:9px;padding:8px 14px;font-weight:800;font-size:12.5px;cursor:pointer}
.srm-up:hover{filter:brightness(1.05)}
.srm-status{font-size:12px;color:var(--muted);margin-top:9px}
.srm-status b{color:var(--cream)}
.srm-apply{margin-left:6px;background:var(--blue);color:#fff;border:none;border-radius:7px;padding:4px 10px;font:inherit;font-size:11.5px;font-weight:800;cursor:pointer}
.lc-grid.zero{stroke:var(--muted2);opacity:.5}
.pnl-vhint,.pnl-vnote{font-size:12px;color:var(--muted2);padding:6px 2px}
.pnl-vnote{font-size:10.5px;margin-top:8px}
/* P&L by Video (Tim's per-video ROI cohort table) */
.pbv{display:flex;flex-direction:column;gap:2px}
.pbv-row{display:grid;grid-template-columns:1fr 86px 64px 78px 84px 52px;gap:8px;align-items:center;
  padding:7px 6px;border-radius:8px;font-size:12.5px}
.pbv-row:nth-child(even){background:color-mix(in srgb,var(--line) 28%,transparent)}
.pbv-h{font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted2);font-weight:700;background:none}
.pbv-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--cream);font-weight:600}
.pbv-t em{font-style:normal;color:var(--muted2);font-size:10px;font-weight:700;margin-left:4px}
.pbv-v,.pbv-g,.pbv-p,.pbv-m{text-align:right;font-variant-numeric:tabular-nums}
.pbv-v,.pbv-g{color:var(--muted)}
.pbv-p{font-weight:800}.pbv-p.pos{color:#3FB984}.pbv-p.neg{color:var(--red)}
/* P&L-by-video: thumbnails in the title cell */
.pbv-t{display:flex;align-items:center;gap:9px;min-width:0}
.pbv-thumb{flex:0 0 auto;width:48px;height:27px;border-radius:4px;background:#0b0f18 center/cover no-repeat;background-size:cover}
.pbv-tt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
/* Performance graphs: the wrench (edit mode) + top Add-graph button */
.cg-wrench{margin-left:auto;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;color:var(--blue);
  background:rgba(44,89,157,.08);border:1px solid rgba(44,89,157,.35);border-radius:9px;padding:6px 12px;transition:background .12s}
.cg-wrench:hover{background:rgba(44,89,157,.16)}
.cg-wrench.on{background:var(--green);border-color:var(--green);color:#fff}
.cg-addtop{font:inherit;font-size:17px;font-weight:800;cursor:pointer;color:var(--blue);background:rgba(44,89,157,.06);
  border:2px dashed var(--blue);border-radius:14px;padding:22px 28px;margin-bottom:16px;width:100%;
  display:flex;align-items:center;justify-content:center;gap:12px;transition:background .12s}
.cg-addtop:hover{background:rgba(44,89,157,.14)}
.cg-addtop .bd-addplus{font-size:30px}
.bd-grid.editing .bd-card{outline:1px dashed rgba(44,89,157,.32);outline-offset:2px}
.bd-grid.editing .bd-tools{opacity:1}
.pbv-m{color:var(--muted2);font-weight:700}.pbv-m.neg{color:var(--red)}
.pbv-d{text-align:right;font-variant-numeric:tabular-nums;color:var(--muted2);font-size:11px}
.pbv-sortable{cursor:pointer;user-select:none;transition:color .12s}
.pbv-sortable:hover{color:var(--cream)}
.pbv-btns{display:flex;gap:8px;margin-top:10px}
.pbv-btn{background:rgba(var(--ink-rgb),.06);border:1px solid var(--line);color:var(--cream);border-radius:8px;padding:7px 13px;font:inherit;font-size:12px;font-weight:700;cursor:pointer;transition:background .12s}
.pbv-btn:hover{background:rgba(var(--ink-rgb),.12)}
.pbv-btn em{font-style:normal;color:var(--muted2);font-weight:600;margin-left:2px}
/* Studio chart legend note + trajectory "show all weeks" clear */
.ysc-lg-note{font-size:10.5px;color:var(--muted2);font-weight:600}
.tj-clear{background:none;border:none;color:var(--gold,#F98125);font:inherit;font-weight:700;cursor:pointer;padding:0;text-decoration:underline}
.pnl-split{padding:4px 0}
.pnl-splitbar{display:flex;height:26px;border-radius:8px;overflow:hidden;background:var(--charcoal)}
.pnl-seg{display:block;height:100%}
.pnl-seg.long{background:var(--gold)}.pnl-seg.short{background:#6C5CE7}
.pnl-splitlegend{display:flex;gap:18px;flex-wrap:wrap;margin-top:10px}

/* once the user has connected or dismissed onboarding, never flash the welcome again */
html.onboarded #onb{display:none!important}

/* ===================== DARK THEME (navy + orange, real toggle) =====================
   Default (:root) is the light "Design A" look. This re-themes to corporate navy.
   The UI is token-driven + uses --ink-rgb for text/hover tints, so flipping these
   vars re-themes everything; only the translucent topbar needs an explicit override. */
html[data-theme^="dark"]{
  color-scheme:dark;   /* dark native date pickers / <select> popups / scrollbars so they aren't light-on-black */
  --charcoal:#0E1C3A; --charcoal2:#0A1730; --card:#16264A; --card2:#1B2E54;
  --cream:#E6ECF7; --gold:#F98125; --gold-deep:#C4610F; --line:#243A63;
  --muted:rgba(230,236,247,.62); --muted2:rgba(230,236,247,.40);
  --green:#7ee0a0; --green-deep:#2f7d4f; --red:#BF092F; --red-deep:#8A0622;
  --blue:#5B84C4; --fire:#FB9B50; --pink:#F08FB4; --teal:#5BD6D6;
  --btn:var(--gold); --btn-text:#2c2100;   /* dark mode: primary buttons stay orange */
  --ink-rgb:230,236,247;
  --shadow-card:0 1px 0 rgba(0,0,0,.35),0 6px 18px rgba(0,0,0,.35);
  --shadow-hover:0 12px 30px rgba(0,0,0,.55);
}
html[data-theme^="dark"] body{background:var(--charcoal)}
html[data-theme^="dark"] .topbar{background:rgba(14,28,58,.85)}
/* David 2026-07-03: "Black" dark mode - identical to the navy theme, only the
   background family swaps navy -> near-black. All accents (gold/green/red/blue,
   cream text) inherit from the [data-theme^="dark"] rules above. Placed after the
   navy block so equal-specificity source order lets black win. */
html[data-theme="dark-black"]{
  /* David 2026-07-04: "Minimal Mono" - pure black ground, darker cards, hairline greys */
  --charcoal:#000000; --charcoal2:#000000; --card:#101012; --card2:#161618;
  --line:#262629;
  /* near-white body text + numbers stay "dirty white" */
  --cream:#C0C0C0;
  /* David 2026-07-04: quiet gain/loss colours - Muted Garnet + Muted Emerald */
  --red:#B24A4A; --red-deep:#8A3A38; --green:#55876E; --green-deep:#3E6552;
}
/* the income amount is a hardcoded bright green in dark - use the muted emerald in Black */
html[data-theme="dark-black"] .rm-msg.income .rm-amt{color:#55876E}
/* the few hardcoded crimson spots -> muted garnet in Black */
html[data-theme="dark-black"] .yt-connect-ico{background:#B24A4A}
html[data-theme="dark-black"] .topbar{background:rgba(10,10,10,.85)}
/* soft buttons: brighter text/tint on navy so they stay legible */
html[data-theme^="dark"] .tell{color:var(--gold);background:rgba(249,129,37,.18);border-color:rgba(249,129,37,.42)}
html[data-theme^="dark"] .tell:hover{background:rgba(249,129,37,.28)}
html[data-theme^="dark"] .cbtn.watch{color:var(--blue);background:rgba(91,132,196,.16);border-color:rgba(91,132,196,.42)}
html[data-theme^="dark"] .cbtn.watch:hover{background:rgba(91,132,196,.26)}
html[data-theme^="dark"] .tell.copied,html[data-theme^="dark"] .cbtn.watch.on{color:var(--green);background:rgba(126,224,160,.16);border-color:rgba(126,224,160,.36)}