/* ===== 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 .35s cubic-bezier(.25,.8,.3,1),flex-basis .35s cubic-bezier(.25,.8,.3,1),padding .35s cubic-bezier(.25,.8,.3,1)}
/* 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-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)}
/* David 2026-07-25: the connected (YouTube-linked) channel gets a proper "Log out" pill in the
   switcher instead of the copy-channel ✕ - a labelled danger action, since disconnecting also
   wipes this channel's P&L, ledger and reports. */
.chan-row-logout{flex:0 0 auto;background:none;border:1px solid var(--line);color:var(--muted);
  font-size:11px;font-weight:700;cursor:pointer;padding:3px 9px;border-radius:999px;font-family:inherit;white-space:nowrap}
.chan-row-logout:hover{color:var(--red);border-color:var(--red);background:rgba(226,87,76,.08)}
/* 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{display:flex;align-items:center;gap:9px;
  font-size:24px;font-weight:800;letter-spacing:-.4px}
/* the page explainer is the ? now, so it has to read at title scale, not the 18px
   it uses inside a section band (David 2026-08-05) */
.page-title .idm-q{width:20px;height:20px;font-size:12px;margin-left:1px}

.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)}
/* Section heading = a tinted band with an orange edge (David picked this out of ten
   on 2026-08-02). Before, a section was 16px of orange text and a margin, so on a
   long page - Thumbs especially - "Winning thumbnails in your lane" vanished under
   the block above it and you could not tell a new section had started. Used in 12
   places, so every tab gets the same boundary. */
.sec-head{display:flex;align-items:center;gap:10px;margin:34px 2px 14px;flex-wrap:wrap;
  padding:11px 14px;border-radius:11px;border-left:3px solid var(--gold);
  background:color-mix(in srgb,var(--gold) 11%,transparent)}
.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 ---- */
/* minmax(0,1fr), not 1fr: a plain 1fr track is minmax(AUTO,1fr), so a single card
   whose min-content is wide - a comment card with a nowrap source line - stretches
   its track and shoves the whole row off the right edge (David 2026-08-05: "why tf
   does the size of the cards change when it's comments"). */
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,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}
/* Tim call 3: 'Found today / Nd ago' was invisible - it is the label that says
   whether anything here is NEW, so it reads like one now. Brand orange for the
   catalog age, brand blue for found-today. */
.pill.found{background:rgba(20,24,33,.92);color:#FB9B50;border:1px solid rgba(251,155,80,.55);font-size:12px;font-weight:700}
.pill.found.fresh{background:#2C599D;color:#fff;border:none;font-size:12px;font-weight:700}
/* the Search-more block at the end of the ideas feed (Tim call 3) */
.idea-more{margin:22px 0 8px;text-align:center}
/* A BUTTON, not a banner (David 2026-08-06: "чуть поменьше, не во весь экран,
   понятно что кнопка и хочется нажать"). Solid brand blue reads pressable in
   BOTH themes - the old translucent-blue wash put white text on a light page. */
.idea-more-btn{display:inline-block;padding:13px 36px;border-radius:999px;border:1px solid #24487F;
  background:linear-gradient(180deg,#3A6CB8,#2C599D);color:#fff;font-family:inherit;font-size:16px;
  font-weight:700;letter-spacing:.2px;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.22);
  transition:filter .15s,border-color .15s}
.idea-more-btn:hover{filter:brightness(1.08);border-color:#FB9B50}
.idea-more-btn:active{filter:brightness(.95)}
.idea-more-sub{display:block;margin-top:9px;color:var(--muted);font-size:13px}
.idea-more.running,.idea-more.spent{max-width:520px;margin:22px auto 8px;padding:18px 20px;
  border-radius:14px;border:1px dashed rgba(var(--ink-rgb),.30);text-align:center;color:var(--cream)}
.idea-more.running b,.idea-more.spent b{display:block;font-size:16px;margin-bottom:6px}
.idea-more.running span,.idea-more.spent span{color:var(--muted);font-size:13px}
.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}
/* display:flex beats the UA's [hidden]{display:none} - the toggle "did nothing" without this
   (David 2026-07-30; same fix as .chan-niche[hidden] above) */
.idea-hidden-list[hidden]{display:none}
.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,#3a3429,#2a2620)}   /* same grey as every bar (David 2026-08-02) */
/* 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)}
.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}
/* "All" column (David 2026-08-01): fenced off from the weekly breakdown so the
   total can't be mistaken for "this week". The rule spans the plot height only,
   not the value/label rows, so it reads as a divider and not as a bar. */
.bsep{width:1px;align-self:stretch;margin:18px 2px 26px;background:var(--line,#2c2c2a);flex:0 0 1px}
.bcol-all{flex:0 0 74px}
.bbar.ball{background:linear-gradient(180deg,#3a3429,#2a2620)}
.bcol-all .blabel{letter-spacing:.04em;text-transform:uppercase}
/* ---- 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 .35s cubic-bezier(.25,.8,.3,1),flex-basis .35s cubic-bezier(.25,.8,.3,1),padding .35s cubic-bezier(.25,.8,.3,1)}
.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)}
/* 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)}
/* divider between REAL competitors and the near-misses the board was padded with
   (engine handoff 2026-08-02: a fully padded board used to look perfectly healthy) */
.comp-split{display:flex;align-items:center;gap:9px;margin:30px 2px 14px}
.comp-split::after{content:"";flex:1;height:1px;background:var(--line)}
.comp-split-t{font-size:13px;font-weight:700;color:var(--muted);letter-spacing:.01em}
.comp-split-n{font-size:12px;font-weight:700;color:var(--muted2);opacity:.8}
.comp-split .idm-q{margin-left:0;vertical-align:0}
.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}
/* 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));
  /* No glow. The 7px orange spread ring plus the coloured drop shadow read as a
     halo, which is banned everywhere in this product. A plain neutral shadow
     lifts the tile off the card without lighting it up. */
  box-shadow:0 6px 16px rgba(var(--ink-rgb),.14)}
.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 */
/* Tim's heads-up is the one card that is HIM talking, so it is centred on his face
   rather than laid out as a side-note (David 2026-08-05: "centered it a bit more
   nicely and add Tim's photo"). Column, not row - the avatar on top reads as a
   person addressing you; the same block as a left rail read as a warning box. */
.onb-tip{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;
  background:var(--card2);border:1px solid var(--line);border-top:3px solid var(--gold);
  border-radius:16px;padding:22px 22px 20px;margin:6px 0 4px}
.onb-tip-av{flex:0 0 auto;width:76px;height:76px;border-radius:50%;object-fit:cover;
  border:3px solid var(--gold);box-shadow:0 6px 18px rgba(232,127,36,.28);background:var(--card2)}
.onb-tip-name{font-size:12px;font-weight:700;color:var(--gold-deep);text-transform:uppercase;
  letter-spacing:.4px;margin-bottom:6px}
.onb-tip-body{max-width:44ch}          /* keeps the centred lines readable, not a wide slab */
.onb-tip-body p{font-size:14px;line-height:1.62;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 */
/* Research builds its sections from .rs-sec-label rather than .sec-head, so it needs
   the same band or the Research tab is the one place a new block still starts with
   nothing to mark it (David 2026-08-05: "add the line everywhere, on every tab").
   Its type stays 26px - the band gives the boundary, the size keeps the hierarchy. */
.rs-sec-label{display:flex;align-items:center;gap:9px;font-size:26px;font-weight:800;
  color:var(--cream);margin:30px 0 14px;letter-spacing:.01em;
  padding:12px 15px;border-radius:11px;border-left:3px solid var(--gold);
  background:color-mix(in srgb,var(--gold) 11%,transparent)}
.rs-sec-label .idm-q{margin-left:0;vertical-align:0}
.rs-count{font-size:14px;font-weight:700;color:var(--muted2)}
.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}
/* --- custom niches (David 2026-08-07) --- */
.rs-niche-row-solo{margin-top:12px}
/* the mark carries it, not the surface - David picked this out of ten treatments */
.rs-niche-add{border-style:dashed;background:transparent;
  align-items:center;justify-content:center;text-align:center;gap:5px}
.rs-niche-add .rs-niche-plus{font-size:28px;font-weight:400;line-height:1;color:var(--gold)}
.rs-niche-add .rs-niche-name{font-size:16px;color:var(--cream)}
.rs-niche-add:hover{border-color:var(--gold);transform:translateY(-2px)}
/* typing needs the tile back in its normal left-aligned column */
.rs-niche-editing{cursor:default;border-style:solid;border-color:var(--gold);
  align-items:stretch;text-align:left}
.rs-niche-editing:hover{transform:none}
.rs-niche-in{width:100%;font:inherit;font-size:15px;font-weight:700;padding:8px 10px;border-radius:9px;
  border:1px solid var(--line);background:var(--card);color:var(--cream)}
.rs-niche-in:focus{outline:none;border-color:var(--gold)}
.rs-niche-addrow{display:flex;gap:8px}
.rs-niche-ok,.rs-niche-cancel{font:inherit;font-size:12.5px;font-weight:800;padding:7px 13px;
  border-radius:9px;cursor:pointer;border:1px solid var(--line)}
.rs-niche-ok{background:var(--gold);border-color:var(--gold);color:#2c2100}
.rs-niche-cancel{background:transparent;color:var(--muted)}
.rs-niche-err{font-size:11.5px;font-weight:700;color:var(--red,#d4553f);min-height:14px}
/* the remove control sits in the corner and must never look like the card itself */
.rs-niche-mine{padding-right:34px}
.rs-niche-restore{color:var(--muted2)}
.rs-niche-more+.rs-niche-more{margin-left:8px}
/* z-index 7: the run sticker (.card-run, z-index 6) centers over the tile and
   used to cover this corner - the delete became unclickable the moment the
   sticker was up (David 2026-08-07 "open report overrides delete button"). */
.rs-niche-x{position:absolute;top:9px;right:9px;width:22px;height:22px;line-height:1;z-index:7;
  display:grid;place-items:center;border-radius:7px;cursor:pointer;font-size:11px;font-weight:800;
  border:1px solid transparent;background:transparent;color:var(--muted2);opacity:0;transition:opacity .12s}
.rs-niche:hover .rs-niche-x,.rs-niche-x:focus-visible{opacity:1}
.rs-niche-x:hover{background:rgba(var(--ink-rgb),.10);color:var(--cream)}
.rs-niche-more{margin-top:10px;font:inherit;font-size:12.5px;font-weight:800;padding:7px 14px;
  border-radius:9px;cursor:pointer;border:1px solid var(--line);background:transparent;color:var(--muted)}
.rs-niche-more:hover{border-color:var(--gold);color:var(--cream)}
.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}
/* ---- Research 💡 lamp + Ideas V5 one-feed (David 2026-07-30) ---- */
.rs-lamp{position:absolute;top:7px;right:7px;z-index:3;width:30px;height:30px;display:grid;place-items:center;
  font-size:15px;line-height:1;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.25);border-radius:9px;
  cursor:pointer;filter:grayscale(1);opacity:.85;transition:filter .12s,transform .12s,background .12s;padding:0}
.rs-lamp:hover{filter:none;transform:scale(1.08);opacity:1}
.rs-lamp.on{filter:none;background:rgba(245,197,21,.28);border-color:#f5c515;opacity:1}
.cc-lamp{position:static;flex:0 0 auto;width:26px;height:26px;margin-left:auto;border-radius:8px}
/* the filters stay put while you scroll the feed (David 2026-08-05) - --tb-h is the
   real measured topbar height, so they park directly under it */
.id-chips{display:flex;gap:8px;flex-wrap:wrap;margin:2px 0 16px;
  position:sticky;top:var(--tb-h,72px);z-index:6;
  padding:10px 0 12px;background:var(--charcoal)}
.id-chip{font:inherit;font-size:12.5px;font-weight:700;color:var(--muted);background:var(--card);
  border:1px solid var(--line);border-radius:999px;padding:7px 14px;cursor:pointer}
.id-chip:hover{border-color:var(--gold);color:var(--cream)}
.id-chip.on{background:var(--gold);border-color:var(--gold);color:#fff}
.src-badge{position:absolute;top:7px;left:7px;z-index:2;font-size:9.5px;font-weight:800;border-radius:6px;
  padding:2px 7px;letter-spacing:.03em;text-transform:uppercase}
.b-own{background:rgba(249,129,37,.92);color:#fff}
.b-pick{background:rgba(245,197,21,.95);color:#221a00}
.b-comp{background:rgba(91,132,196,.92);color:#fff}
.b-sugg{background:rgba(85,135,110,.94);color:#fff}
.pick-chan{position:relative;display:flex;flex-direction:column;gap:12px;padding:16px 14px 14px}
.pick-chan .src-badge{position:absolute;top:10px;right:10px;bottom:auto;left:auto}
.pkc-top{display:flex;align-items:center;gap:11px}
.pkc-av{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.pkc-ini{display:grid;place-items:center;background:linear-gradient(135deg,var(--gold),var(--gold-deep));
  color:#fff;font-weight:800;font-size:14px}
.pkc-main{min-width:0;display:flex;flex-direction:column;gap:2px}
.pkc-name{font-weight:700;font-size:14px;color:var(--cream)}
.pkc-name:hover{color:var(--gold)}
.pkc-meta{font-size:11.5px;color:var(--muted2)}
.pick-chan .rs-lamp{position:static;margin-left:auto}
.pick-chan .hf-fp{width:100%}
/* Home feed lazy-loading sentinel (David 2026-07-29): the feed renders 10 cards, this sits at the
   bottom and pulls the next 10 in as you approach it. */
.hf-more{display:flex;justify-content:center;align-items:center;padding:22px 0 30px}
.hf-more .rs-spin{width:24px;height:24px;border-width:2.5px}
/* David 2026-07-25: research no longer YANKS you to the top when a report finishes. This
   "back to top" pill fades down from the top once you've scrolled past the results, so you know a
   report landed and can go up on your own terms. David 2026-07-25b: brighter, SOLID brand-orange
   (was a soft translucent tint that faded into some backgrounds) so it's clearly visible on any
   background in both themes; white text + white count circle. */
.rs-top{position:fixed;left:50%;top:calc(var(--tb-h, 72px) + 8px);transform:translate(-50%,-150%);
  z-index:120;display:flex;align-items:center;gap:9px;padding:8px 13px;cursor:pointer;
  font-family:inherit;font-size:12.5px;font-weight:800;color:#fff;
  background:linear-gradient(135deg,#FBA24E,#F98125);
  border:1px solid rgba(196,97,15,.55);border-radius:999px;
  box-shadow:0 10px 24px rgba(249,129,37,.42),0 1px 0 rgba(255,255,255,.3) inset;
  opacity:0;pointer-events:none;transition:transform .28s cubic-bezier(.2,.8,.2,1),opacity .28s}
.rs-top.show{transform:translate(-50%,0);opacity:1;pointer-events:auto}
.rs-top:hover{filter:brightness(1.07)}
.rs-top-arrow{font-size:14px;font-weight:900;line-height:1;transform:translateY(-1px)}
.rs-top-txt{white-space:nowrap}
.rs-top-count{min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#fff;
  color:#C4610F;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;line-height:1}
.rs-top-busy .rs-top-arrow{animation:rs-top-bob .9s ease-in-out infinite}
@keyframes rs-top-bob{0%,100%{transform:translateY(-1px)}50%{transform:translateY(-4px)}}
/* ===================== 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}
/* title row + the "?" that replaced the three-line explainer under it (David 2026-07-21:
   "make like question mark in circle, as a hint, to not waste space around it") */
.idm-hd{display:flex;align-items:center;gap:8px;padding-right:34px;margin-bottom:14px}
.idm-q{flex:0 0 auto;position:relative;width:18px;height:18px;padding:0;display:grid;
  place-items:center;border:1px solid var(--line);border-radius:50%;background:transparent;
  color:var(--muted);font:inherit;font-size:11px;font-weight:800;line-height:1;cursor:help}
.idm-q:hover{border-color:var(--gold);color:var(--gold)}
/* the hint itself: shown on hover AND on keyboard focus, wraps, never clipped by the modal */
.idm-q[data-tip]::after{content:attr(data-tip);position:absolute;top:calc(100% + 8px);left:-8px;
  width:300px;max-width:74vw;padding:9px 11px;border:1px solid var(--line);border-radius:10px;
  background:var(--card2);color:var(--muted);font-size:11.5px;font-weight:500;line-height:1.5;
  text-align:left;letter-spacing:0;text-transform:none;box-shadow:0 14px 34px rgba(0,0,0,.5);
  opacity:0;visibility:hidden;transition:opacity .12s;pointer-events:none;z-index:5}
.idm-q[data-tip]:hover::after,.idm-q[data-tip]:focus-visible::after{opacity:1;visibility:visible}
/* David 2026-07-30: the same ? hint now lives in section headings + graph card titles - inline
   so it sits in the text flow instead of breaking to its own line (.idm-q is display:grid). */
/* the ? circle sits in the true middle of the text line EVERYWHERE (David 2026-07-30: it was
   baseline-nudged and looked randomly placed at different font sizes) */
h2 .idm-q,.bd-ttl .idm-q,.sec-head .idm-q,.rs-sec-label .idm-q,.rm-dlbl .idm-q,.rm-dhead .idm-q{display:inline-grid;vertical-align:middle;margin-left:6px;transform:translateY(-1px)}
/* the Money Flow date labels are tiny - shrink their ? to match */
.rm-dlbl .idm-q{width:15px;height:15px;font-size:9.5px;margin-left:4px}
/* section labels - the modal now holds two different things (the niche, the bend) */
.idm-lbl{font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted2);margin:0 0 7px}
.idm-lbl2{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.idm-lbl em{font-style:normal;color:var(--muted);letter-spacing:.04em}
.idm-bendin{margin-bottom:7px}
.idm-bhint{font-size:11.5px;color:var(--muted);line-height:1.5}
.idm-bhint b{color:var(--cream);font-weight:700}
.idm-bnow{margin-top:8px;font-size:12.5px;color:var(--muted)}
.idm-bnow b{color:var(--cream);font-weight:700}
.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)}
/* proof strip (David picked design 3, 2026-07-21): the channel's 3 biggest videos as the
   evidence under the verdict. Each tile is a link to the video - the owner recognises these
   instantly, which is what makes a wrong read obvious. */
.idm-strip{display:flex;gap:8px;margin-top:13px}
.idm-tile{flex:1 1 0;min-width:0;display:block;padding:10px 11px;border:1px solid var(--line);
  border-radius:11px;background:rgba(var(--ink-rgb),.03);text-decoration:none;
  transition:border-color .14s,background .14s}
a.idm-tile:hover{border-color:var(--gold);background:rgba(var(--ink-rgb),.06)}
.idm-v{font-size:15px;font-weight:900;color:var(--gold);line-height:1}
.idm-l{font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted2);margin:4px 0 6px}
/* 4 lines, not 3: at tile width a real title ("Every US President's Death Explained in 21
   Minutes") needs the fourth line, and clipping it mid-word costs the owner the one detail
   that tells them whether we read the channel right. */
.idm-t{font-size:11.5px;color:var(--cream);line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:430px){.idm-strip{flex-direction:column}.idm-t{-webkit-line-clamp:2}}
.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)}
/* what the correction actually did, as a checklist; the last row is genuinely live */
.idm-steps{margin-top:16px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.ist{display:flex;align-items:flex-start;gap:10px;padding:9px 13px;font-size:12.5px;
  color:var(--cream);line-height:1.45;border-top:1px solid var(--line)}
.ist:first-child{border-top:0}
.ist em{display:block;font-style:normal;font-size:11.5px;color:var(--muted);margin-top:3px}
.ist-i{flex:0 0 18px;width:18px;height:18px;display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;border-radius:50%;margin-top:1px}
.ist.done .ist-i{color:#fff;background:var(--gold)}
.ist.run{background:rgba(var(--ink-rgb),.03);font-weight:700}
.ist-spin{width:14px;height:14px;margin:0;border-width:2px}
/* the watcher pill: the rescan keeps running after the card closes */
.retune-pill{position:fixed;right:18px;bottom:18px;z-index:290;display:flex;align-items:center;
  gap:11px;max-width:320px;padding:11px 13px;border-radius:14px;background:var(--card);
  border:1px solid var(--line);box-shadow:0 10px 30px rgba(0,0,0,.25);
  opacity:0;transform:translateY(8px);transition:opacity .25s ease,transform .25s ease}
.retune-pill.rp-in{opacity:1;transform:none}
.retune-pill.rp-hid{display:none}
.rp-spin{width:18px;height:18px;margin:0}
.rp-tx{min-width:0}
.rp-tx b{display:block;font-size:12.5px;color:var(--cream)}
.rp-tx em{display:block;font-style:normal;font-size:11.5px;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rp-x{flex:0 0 auto;border:0;background:none;color:var(--muted2);font-size:12px;cursor:pointer;
  padding:2px 4px;border-radius:6px}
.rp-x:hover{color:var(--cream)}
/* the finish line */
.rdone{text-align:center}
.rdone .amo-sub{margin-bottom:4px}
.rd-mark{width:46px;height:46px;margin:2px auto 12px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;color:#fff;background:var(--gold);
  animation:rdpop .35s cubic-bezier(.34,1.56,.64,1)}
@keyframes rdpop{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}
.rdone .idm-row{justify-content:center}
/* 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)}
/* member rows jump to All videos filtered to that person (David 2026-07-30) - read as clickable */
.tm-row{cursor:pointer}
.tm-row:hover .tm-name{color:var(--gold)}
.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}
/* David 2026-07-30: the in-modal add-person form is gone (Manage team is the ONLY place that
   creates workers) - replaced by this quiet hand-off row. */
.vtm-manage{width:100%;margin-top:6px;background:none;border:1px dashed var(--line);color:var(--muted);
  border-radius:10px;padding:10px;font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
.vtm-manage b{color:var(--gold)}
.vtm-manage:hover{border-color:var(--gold);color:var(--cream)}
/* 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") */
/* Team column charts filter All videos on click, like the donut slices - show it. */
.wg-svg [data-teamfilter]{cursor:pointer}
.wg-svg rect[data-teamfilter]:hover{opacity:.85}
.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 .35s}
  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}
  /* 1662px of view, three cards - that is 540px per card and a lot of nothing.
     Give the row a fourth column instead (David 2026-08-05). Inside this media
     block on purpose: below 861px the narrow rules still win. */
  html.sb-collapsed.rail-collapsed .grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
/* ===================== 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 */
/* Proven Niches holds more than one database - one tab per embed (2026-08-02) */
.nh-tabs{display:flex;gap:8px;margin:0 0 13px}
.nh-tab{background:var(--card);border:1px solid var(--line);color:var(--muted);border-radius:999px;
  padding:8px 16px;font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.nh-tab:hover{color:var(--cream);border-color:#2C599D}
.nh-tab.on{background:#2C599D;border-color:#2C599D;color:#fff}
.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}
/* The bend-source popup shows a THUMBNAIL - the one thing the user opened it to
   look at - and it was doing that at 128x72 inside a 440px card, with 11-13px type
   around it (David 2026-08-05: "ничего не видно почти, сделай в 2 раза больше").
   Everything here is roughly doubled. The card itself is widened with :has() on
   the markup this popup already emits, so every other openPop() keeps its size. */
.pop-card:has(.bsrc-card),.pop-card:has(.bsrc-p){max-width:880px;padding:30px 34px}
.pop-card:has(.bsrc-card) .pop-h,.pop-card:has(.bsrc-p) .pop-h{font-size:22px;margin-bottom:18px}
.pop-card:has(.bsrc-card) .pop-b,.pop-card:has(.bsrc-p) .pop-b{font-size:17px;line-height:1.6}
.pop-card:has(.bsrc-card) .pop-x,.pop-card:has(.bsrc-p) .pop-x{font-size:22px;top:16px;right:18px}
.bsrc-card{display:flex;gap:24px;align-items:flex-start;margin-bottom:18px}
.bsrc-thumb{flex:0 0 300px;height:169px;border-radius:12px;background:var(--line) center/cover no-repeat;display:block}
.bsrc-main{flex:1;min-width:0}
.bsrc-k{font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted2);font-weight:700}
.bsrc-t{font-size:22px;font-weight:700;color:var(--cream);margin:7px 0;line-height:1.3}
.bsrc-ch{font-size:16px;color:var(--muted2)}
.bsrc-open{display:inline-block;margin-top:13px;font-size:16px;font-weight:700;color:var(--blue)}
.bsrc-note{font-size:15px;color:var(--muted2);line-height:1.55}
.bsrc-note.big{font-size:22px;font-weight:700;color:var(--cream);margin-bottom:14px}
.bsrc-p{font-size:16px;color:var(--muted);line-height:1.6}
/* a 300px thumbnail beside text does not fit a phone - stack it there */
@media (max-width:640px){
  .pop-card:has(.bsrc-card){padding:22px 20px}
  .bsrc-card{flex-direction:column;gap:14px}
  .bsrc-thumb{flex:0 0 auto;width:100%;height:auto;aspect-ratio:16/9}
}
/* 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)}
.vta-mono{color:#fff;font-weight:900;font-size:20px;font-family:inherit}
.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}
/* David 2026-07-25: freeze the All-videos header row (like Excel "freeze row 1") so you never lose
   which column is which while scrolling. Scoped to .av-freeze so the ledger table (same .av-table
   class) is untouched. The list scrolls INSIDE this pane (both axes) and the <th>s stick to the
   pane's top - robust at every width (no page-level horizontal overflow) and the rounded corners
   clip it cleanly, exactly like an Excel frozen row. */
.av-wrap.av-freeze{max-height:calc(100vh - var(--tb-h,72px) - 40px);overflow:auto}
.av-wrap.av-freeze .av-table thead th{position:sticky;top:0;z-index:5}
/* 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}
/* David 2026-07-30: the sample chart is blurred SCENERY under one clear call-to-action, so nobody
   mistakes demo bars for their real team's numbers. */
.rg-blur{filter:blur(5px) saturate(.7);opacity:.55;pointer-events:none;user-select:none}
.rg-cta{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:8px;text-align:center;padding:18px 22px}
.rg-cta-t{font-size:15px;font-weight:800;color:var(--cream)}
.rg-cta-s{font-size:12px;line-height:1.55;color:var(--muted);max-width:360px}
.rg-cta-s b{color:var(--gold)}
.rg-cta-go{margin-top:4px;background:var(--btn);color:var(--btn-text);border:none;border-radius:10px;
  padding:9px 16px;font-family:inherit;font-size:12.5px;font-weight:800;cursor:pointer}
.rg-cta-go:hover{background:var(--gold-deep)}
/* inside the graph-picker modal the tile itself is the button - keep just the blurred preview */
.gpk-graph .rg-cta-go{display:none}
.gpk-graph .rg-cta-t{font-size:11px}
.gpk-graph .rg-cta-s{display:none}
.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)}
/* ⭐ star on idea cards (David 2026-07-30) - same look as the research lamp */
.idea-star{position:absolute;top:7px;right:7px;z-index:3;width:30px;height:30px;display:grid;place-items:center;
  font-size:14px;line-height:1;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.25);border-radius:9px;
  cursor:pointer;filter:grayscale(1);opacity:.85;transition:filter .12s,transform .12s;padding:0}
.idea-star:hover{filter:none;transform:scale(1.08);opacity:1}
.idea-star.on{filter:none;background:rgba(249,129,37,.3);border-color:var(--gold);opacity:1}
/* the V5 badge owns the top-left corner - other corner pills shift below it on idea cards */
.card.idea .pill.tl{top:38px}
.card.idea .pill.tr{top:44px}
/* research spinner with the elapsed clock inside (David 2026-07-30) */
.rs-spin-t{position:relative;width:56px;height:56px;border-width:4px;display:grid;place-items:center;animation:none}
.rs-spin-t::before{content:"";position:absolute;inset:-4px;border-radius:50%;border:4px solid var(--line);
  border-top-color:var(--gold);animation:rs-spin .8s linear infinite}
.rs-el{font-size:12px;font-weight:800;color:var(--cream);font-variant-numeric:tabular-nums}
.rs-liverow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:2px}
.rs-openlive{background:var(--btn);color:var(--btn-text);font-weight:800;font-size:12px;border-radius:9px;
  padding:7px 13px;white-space:nowrap}
.rs-openlive:hover{background:var(--gold-deep);text-decoration:none}
.rs-livenote{font-size:11.5px;color:var(--muted2)}
/* watchlist inline expand (David 2026-07-30: no more panel over the page) */
.watch.open{border-color:var(--gold)}
.watch-expand{margin:4px 0 10px;padding:10px;border:1px dashed var(--line);border-radius:12px;
  background:rgba(255,255,255,.02);display:flex;flex-direction:column;gap:10px}
.wx-spin{margin:12px auto}
.wx-cards{display:flex;flex-direction:column;gap:10px}
.wx-none{font-size:12px;color:var(--muted2);text-align:center;padding:8px 0}
.wx-del{background:none;border:1px solid var(--line);color:var(--muted);font-size:11.5px;font-weight:600;
  border-radius:9px;padding:7px;cursor:pointer;font-family:inherit}
.wx-del:hover{color:var(--red);border-color:var(--red)}

/* run/done state ON research cards (David 2026-08-01) */
.rs-spin-sm{width:44px;height:44px}
.rs-spin-sm .rs-el{font-size:10.5px}
.rsv-ov{position:absolute;inset:0;z-index:4;display:grid;place-items:center;background:rgba(0,0,0,.45)}
.rsv-done{background:rgba(0,0,0,.38)}
.rsv-check{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:22px;
  font-weight:900;color:#fff;background:rgba(85,175,120,.95);box-shadow:0 6px 18px rgba(0,0,0,.4)}
.rsv-ready .thumb,.rs-niche-done .rs-niche-k,.rs-niche-done .rs-niche-name{filter:grayscale(.7);opacity:.8}
.rs-niche-done{position:relative}
.rs-niche-done .rsv-ov{border-radius:inherit}
.rsv-running .rs-lamp{display:none}   /* no saving mid-run - the overlay owns the thumb */

/* thumbnail generation: spinner + elapsed clock centered in the placeholder (David 2026-08-02) */
.tl-genov{position:absolute;inset:0;display:grid;place-items:center}

/* My Notes / My Reports as solo tabs (David 2026-08-02) */
.ws-solo{max-width:820px}

/* ===== My Reports: cards + filter bar (David 2026-08-02) ===== */
/* Sticky like the Ideas chips: the filters are how you narrow a long list, and a
   list is exactly when they scroll away (David 2026-08-05). --tb-h is the topbar's
   measured height, set by _syncTopbarH. */
/* var(--charcoal), NOT var(--bg): --bg does not exist in the palette, so the
   sticky bar was TRANSPARENT and cards ghosted through while scrolling
   (David 2026-08-07 "они типо прозрачные"). Plus the line he asked for. */
.rep-bar{position:sticky;top:var(--tb-h,72px);z-index:20;
  background:var(--charcoal);border-bottom:1px solid var(--line);
  padding-top:10px;padding-bottom:12px;
  margin-left:-4px;margin-right:-4px;padding-left:4px;padding-right:4px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:2px 0 16px}
/* ===== Asked for in your comments (engine handoff 2026-08-02) =====
   No thumbnail, no view count - the card is a request, and its weight is how many
   people made it. Brand blue for the demand, brand orange for a competitor origin
   and for the unread state. No glow anywhere: David has rejected those repeatedly. */
/* unread marker on the two comment chips, in the same row as the other filters */
.id-chip-dot{display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--fire,#FB9B50);margin:0 5px 0 1px;vertical-align:1px}
/* TWO per row, always - a comment is a paragraph, and one paragraph stretched
   across the whole page is unreadable (David 2026-08-05). */
/* The grid counts its own columns from the space it has, so closing the sidebar
   or the rail adds one without a rule per route (David 2026-08-06: "чтобы оно
   само считалось в зависимости от экрана"). 440px is chosen so the arithmetic
   lands where it should: at the default 1280px view that is 2 columns, and at
   1662px with both panels closed it is 3. A comment is a paragraph - stretching
   one across the whole page is what we were fixing in the first place. */
.ci-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(440px,1fr));
  gap:16px;align-items:start}
@media(max-width:560px){.ci-grid{grid-template-columns:1fr}}
/* a request card sitting in the video grid (the All feed) fills its row like a card */
.grid .ci-card{position:relative;display:flex;flex-direction:column;background:var(--card);
  border:1px solid var(--line);border-radius:15px;overflow:hidden;transition:border-color .13s}
.ci-card:hover{border-color:#2C599D}
.ci-card.ci-riv:hover{border-color:var(--gold)}
.ci-card.ci-new{border-color:rgba(251,155,80,.55)}
/* the comment takes the picture slot, so the card starts where its neighbours start */
.ci-face{position:relative;aspect-ratio:16/9;display:flex;flex-direction:column;justify-content:center;
  gap:10px;padding:40px 16px 16px;
  background:linear-gradient(160deg,rgba(44,89,157,.26),rgba(44,89,157,.05) 60%),var(--card2)}
.ci-riv .ci-face{background:linear-gradient(160deg,rgba(249,129,37,.24),rgba(249,129,37,.05) 60%),var(--card2)}
.ci-dem{position:absolute;left:12px;top:12px;font-size:11px;font-weight:800;border-radius:7px;
  padding:4px 9px;background:#2C599D;color:#fff}
.ci-riv .ci-dem{background:var(--gold);color:#1a1205}
.ci-say{font-size:19px;line-height:1.32;font-weight:600;color:#fff;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.ci-from{font-size:10px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.ci-body{padding:12px 14px 10px;display:flex;flex-direction:column;gap:7px}
.ci-meta{font-size:12.5px;color:var(--muted2)}
.ci-src{display:flex;align-items:center;gap:9px;min-width:0}
.ci-src:hover .ci-srct{color:var(--gold)}
.ci-av{width:26px;height:26px;border-radius:50%;object-fit:cover;flex:none}
.ci-ini{display:grid;place-items:center;background:#2C599D;color:#fff;font-size:10px;font-weight:800}
.ci-srct{font-size:12.5px;color:var(--muted2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.ci-likes{white-space:nowrap}
/* the ledge, mirroring the video card's bent angles */
.ci-mk{border-top:1px solid var(--line);padding:11px 12px 13px;display:flex;flex-direction:column;gap:7px}
.ci-mklbl{font-size:9.5px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);
  margin-bottom:2px}
.ci-row{display:flex;align-items:center;gap:9px;background:rgba(var(--ink-rgb),.05);
  border:1px solid var(--line);border-radius:10px;padding:9px 10px}
.ci-num{width:19px;height:19px;flex:none;display:grid;place-items:center;border-radius:50%;
  background:rgba(249,129,37,.18);color:var(--gold);font-size:10.5px;font-weight:900}
.ci-at{flex:1;min-width:0;font-size:12.5px;font-weight:700;color:var(--cream);line-height:1.3}
.ci-row-act .ci-at{color:var(--muted);font-weight:600}
.ci-tell{flex:none}
.ci-star{position:absolute;top:10px;right:10px;z-index:2;width:32px;height:32px;padding:0;display:grid;
  place-items:center;font-size:18px;line-height:1;background:rgba(0,0,0,.5);
  border:1px solid rgba(255,255,255,.16);border-radius:9px;color:rgba(255,255,255,.72);cursor:pointer}
.ci-star:hover{color:var(--gold);border-color:var(--gold)}
.ci-star.on{color:var(--gold);background:rgba(249,129,37,.24);border-color:var(--gold)}
.ci-star:hover{color:var(--gold);border-color:var(--gold)}
.ci-star.on{color:var(--gold);background:rgba(249,129,37,.2);border-color:var(--gold)}
.rep-search{flex:1 1 260px;min-width:220px;margin:0}
.rep-sel{flex:0 0 auto}
/* one press clears the NEW badge on My Reports (David 2026-08-05) */
.rep-readall{flex:0 0 auto;background:var(--card);border:1px solid var(--line);color:var(--muted);
  border-radius:10px;padding:9px 14px;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
.rep-readall:hover{border-color:var(--gold);color:var(--gold)}
/* Bigger cards (David 2026-08-02) - a channel report now carries a video thumbnail,
   its title, views and the channel identity line, so it needs the same room a video
   card gets on Competitors. */
.rep-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:18px;align-items:start}
.rep-card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:14px;
  overflow:hidden;transition:border-color .12s,transform .12s}
.rep-card:hover{border-color:var(--kc,var(--gold));transform:translateY(-2px)}
.rep-card.rep-new{border-color:rgba(249,129,37,.5)}
.rc-link{display:block}
/* every face is the same 16:9 box, so the grid never looks ragged */
.rc-face{position:relative;aspect-ratio:16/9;background-size:cover;background-position:center;
  background-color:rgba(var(--ink-rgb),.06)}
.rc-chip{position:absolute;left:8px;bottom:8px;display:flex;align-items:center;gap:7px;max-width:calc(100% - 16px);
  background:rgba(0,0,0,.68);border-radius:999px;padding:4px 11px 4px 4px}
.rc-chip b{font-size:12px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc-av{width:22px;height:22px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.rc-av-big{width:52px;height:52px}
.rc-av-dead{display:none}
.rc-ini{display:grid;place-items:center;background:linear-gradient(135deg,var(--gold),var(--gold-deep));
  color:#fff;font-size:9px;font-weight:800}
.rc-av-big.rc-ini{font-size:17px}
/* channel we have no video for: a real channel face, never an empty rectangle */
.rc-chanface{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:12px;
  background:linear-gradient(160deg,rgba(var(--ink-rgb),.10),rgba(var(--ink-rgb),.03))}
.rc-cn{font-size:14px;font-weight:800;color:var(--cream);text-align:center;line-height:1.2;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rc-ch{font-size:11.5px;color:var(--muted2)}
.rc-topic{display:flex;flex-direction:column;justify-content:center;gap:7px;padding:14px 16px;
  background:linear-gradient(140deg,color-mix(in srgb,var(--tc) 30%,transparent),color-mix(in srgb,var(--tc) 7%,transparent))}
.rc-tk{font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--tc)}
.rc-tt{font-size:16px;font-weight:800;line-height:1.25;color:var(--cream);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* A niche hunt starts as a line of text you typed: ruled lines with a magnifier over
   them. Deliberately a DRAWING, so it can never read as a failed image load. */
.rc-nicheface{display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:0 18px;text-align:center;
  background:linear-gradient(180deg,color-mix(in srgb,var(--kc) 15%,var(--card2)),var(--card2))}
.rc-lines{position:absolute;left:15px;right:15px;top:16px;display:flex;flex-direction:column;gap:8px}
.rc-lines i{display:block;height:3px;border-radius:2px;background:color-mix(in srgb,var(--kc) 42%,transparent)}
.rc-lines i:nth-child(1){width:86%}.rc-lines i:nth-child(2){width:96%}
.rc-lines i:nth-child(3){width:72%}.rc-lines i:nth-child(4){width:90%}
.rc-lines i:nth-child(5){width:54%}
/* topic sits dead centre (David 2026-08-02), so the magnifier moves out of its way
   to the bottom-right corner - lines top, glass corner, topic in the middle */
.rc-mag{position:absolute;right:13px;bottom:11px;color:var(--kc)}
.rc-mag .rc-gl{width:42px;height:42px}
/* The halo exists to lift the topic off the ruled lines behind it. It must be
   the CARD's colour, not black: a black halo on the light theme rendered as a
   dirty smudge behind the title (David 2026-08-07 "what is this shadows?").
   Dark themes keep their black lift below. */
.rc-nt{position:relative;z-index:1;font-size:22px;font-weight:800;line-height:1.2;color:var(--cream);
  letter-spacing:-.015em;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden;text-shadow:0 2px 12px var(--card2),0 0 6px var(--card2)}
html[data-theme^="dark"] .rc-nt{text-shadow:0 2px 12px rgba(0,0,0,.9)}
.rc-iconface{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--kc)}
.rc-gl{width:22px;height:22px;flex:none}
.rc-thumbface{display:grid;place-items:center;overflow:hidden}
.rc-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.rc-thumblbl{position:relative;z-index:0}
.rc-ik{font-size:13px;font-weight:800;letter-spacing:.03em;color:var(--muted)}
/* the kind bar: colour + glyph + word, directly under the face. This is the thing
   that tells Full picture / Niche hunt / Thumbnail apart at a glance. */
.rc-bar{display:flex;align-items:center;gap:9px;padding:8px 13px;font-size:11.5px;font-weight:900;
  letter-spacing:.08em;text-transform:uppercase;color:var(--kc);
  background:color-mix(in srgb,var(--kc) 13%,transparent);
  border-top:1px solid color-mix(in srgb,var(--kc) 32%,transparent)}
.rc-bar .rc-gl{width:21px;height:21px}
.rc-body{padding:11px 13px 13px}
.rc-t{font-size:14.5px;font-weight:700;color:var(--cream);line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rc-m{margin-top:4px;font-size:12px;color:var(--muted2)}
.rc-kind{color:var(--muted)}
/* channel identity under a channel report: logo, name, subs - same line every other tab shows */
.rc-crow{display:flex;align-items:center;gap:9px;margin-top:10px}
.rc-crow b{font-size:12.5px;font-weight:700;color:var(--muted);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.rc-crow i{font-style:normal;font-size:12px;color:var(--muted2);white-space:nowrap}
.rc-crow i::before{content:"·";margin-right:7px}
.rc-crow .rc-av{width:26px;height:26px}
/* hover the card anywhere -> say what a click does (David 2026-08-02) */
.rc-open{position:absolute;left:0;right:0;top:0;z-index:3;display:flex;align-items:center;
  justify-content:center;gap:8px;aspect-ratio:16/9;background:rgba(0,0,0,.6);color:#fff;
  font-size:13.5px;font-weight:800;opacity:0;transition:opacity .13s;pointer-events:none}
.rc-open em{font-style:normal}
.rep-card:hover .rc-open{opacity:1}
/* source mark: small, quiet, bottom-right of the face */
.rc-src{position:absolute;right:8px;bottom:8px;z-index:3;width:24px;height:24px;display:grid;place-items:center;
  border-radius:7px;background:rgba(0,0,0,.6);color:#fff}
.rc-src-claude{color:#D97757}
.rc-srcimg{width:14px;height:14px;border-radius:3px;object-fit:cover}
/* the star is the affordance people look for - twice the old size (David 2026-08-02) */
.rep-card .rep-star{position:absolute;top:7px;right:7px;z-index:3;width:34px;height:34px;padding:0;
  display:grid;place-items:center;font-size:19px;line-height:1;background:rgba(0,0,0,.5);
  border:1px solid rgba(255,255,255,.16);border-radius:9px;color:rgba(255,255,255,.72);cursor:pointer}
.rep-card .rep-star:hover{color:var(--gold);border-color:var(--gold)}
.rep-card .rep-star.on{color:var(--gold);background:rgba(249,129,37,.24);border-color:var(--gold)}
/* ✎ rename sits left of the ⭐, same treatment (David 2026-08-05: custom names) */
.rep-card .rep-ren{position:absolute;top:7px;right:45px;z-index:3;width:34px;height:34px;padding:0;
  display:grid;place-items:center;font-size:15px;line-height:1;background:rgba(0,0,0,.5);
  border:1px solid rgba(255,255,255,.16);border-radius:9px;color:rgba(255,255,255,.72);cursor:pointer;
  font-family:inherit}
.rep-card .rep-ren:hover{color:var(--gold);border-color:var(--gold)}

/* the first band on a page has nothing above it to divide - keep the orange
   title, drop the tint and the edge (David 2026-08-05) */
.sec-head.band-flat,.rs-sec-label.band-flat{background:transparent;border-left:0;
  padding-left:2px;padding-top:0;margin-top:6px}

/* an unconnected channel has no Money Flow to show, so it gets no panel at all -
   not a heading over an empty list (David 2026-08-05) */
.rail.rail-gone{display:none}

/* Home feed report card - the face and kind bar are My Reports' own, so they keep
   its rounded frame here instead of floating loose (David 2026-08-05) */
.hf-repface{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--card)}
.hf-repcard:hover .hf-repface{border-color:var(--kc,var(--gold))}
.hf-repyt .hf-yttitle{margin-top:10px}
.hf-repopen{display:inline-flex;align-items:center;gap:7px;margin-top:14px;align-self:flex-start;
  background:var(--btn);color:var(--btn-text);font-weight:700;font-size:12.5px;
  border-radius:9px;padding:9px 14px;text-decoration:none}
.hf-repopen em{font-style:normal}
.hf-repopen:hover{filter:brightness(1.06)}

/* No orange section furniture on Research or Competitors (David 2026-08-05:
   "во вкладке competitors тоже не надо ни одного оранжевого"). The band and the
   orange heading go; the heading itself stays, in body colour. */
body[data-route="research"] .sec-head,
body[data-route="research"] .rs-sec-label,
body[data-route="competitors"] .sec-head,
body[data-route="competitors"] .rs-sec-label{
  background:transparent;border-left:0;padding-left:2px;padding-top:0;margin-top:24px}
body[data-route="competitors"] .sec-head h2{color:var(--cream)}

/* the left side of a Home report card is now the link itself - inherit type colour
   instead of picking up the anchor blue + underline (David 2026-08-05) */
.hf-replink{text-decoration:none;color:inherit;display:block}
.hf-replink:hover .hf-repface{border-color:var(--kc,var(--gold))}
.hf-replink:hover .hf-yttitle{color:var(--gold)}

/* the Proven Niches screenshot on Home is a way into that channel, so it has to
   look like one (David 2026-08-05) */
.hf-nhopen{cursor:pointer}
.hf-nhopen:hover .hf-ytthumb{outline:2px solid var(--gold);outline-offset:2px}
.hf-nhopen:hover .hf-yttitle{color:var(--gold)}

/* a channel added seconds ago: on the graph immediately, as itself, with its line
   still loading - never a drawn line we have no data for (David 2026-08-05) */
.cg-legend-pend{margin-top:6px}
.cg-leg-pend{opacity:.75}
.cg-leg-pend b{color:var(--muted)}
.cg-pendspin{display:inline-block;width:11px;height:11px;margin-left:6px;border-radius:50%;
  border:2px solid var(--line);border-top-color:var(--gold);animation:cgpend .8s linear infinite}
@keyframes cgpend{to{transform:rotate(360deg)}}

/* ── request card = a real YouTube comment (David 2026-08-05, draft 3) ───────
   Thumb up only: YouTube's dislike and REPLY act on THEIR platform, and a
   button that does nothing is what he has been finding all day. */
.grid .yc-card,.ci-grid .yc-card{padding:16px 18px 18px;display:block}
.yc-src{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--muted2);
  padding-bottom:11px;margin-bottom:13px;border-bottom:1px solid var(--line);
  min-width:0}
.yc-srcl{display:flex;align-items:center;gap:8px;min-width:0;text-decoration:none;color:var(--muted)}
.yc-srcl:hover{color:var(--gold)}
.yc-srct{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.yc-srcw{flex:0 0 auto;margin-left:auto;white-space:nowrap}
.yc-c{display:flex;gap:13px;min-width:0}
.yc-c-more{margin-top:14px}
.yc-av{flex:0 0 40px;width:40px;height:40px;border-radius:50%;object-fit:cover;background:var(--line)}
.yc-av-s{flex:0 0 26px;width:26px;height:26px}
.yc-av-i{display:grid;place-items:center;font-size:15px;font-weight:800;color:var(--muted)}
.yc-b{flex:1;min-width:0}
.yc-hd{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.yc-name{font-size:13px;font-weight:700;color:var(--cream)}
.yc-when{font-size:12px;color:var(--muted2)}
.yc-txt{font-size:14px;color:var(--cream);margin:3px 0 0;white-space:pre-wrap;
  word-break:break-word;line-height:1.45}
.yc-act{display:flex;align-items:center;gap:8px;margin-top:7px;color:var(--muted)}
.yc-ico{width:19px;height:19px;display:grid;place-items:center}
.yc-ico svg{width:17px;height:17px;fill:currentColor}
.yc-likes{font-size:12px;color:var(--muted)}
.yc-open{font-size:12px;font-weight:700;color:var(--muted2);text-decoration:none;margin-left:2px}
.yc-open:hover{color:var(--gold)}
.yc-fold{margin-top:9px}
.yc-fold>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  font-size:13px;font-weight:700;color:var(--blue);padding:5px 10px;border-radius:16px;
  background:color-mix(in srgb,var(--blue) 10%,transparent)}
.yc-fold>summary::-webkit-details-marker{display:none}
.yc-fold>summary::before{content:"\25BE";font-size:10px}
.yc-fold[open]>summary::before{content:"\25B4"}
.yc-fold>summary:hover{background:color-mix(in srgb,var(--blue) 18%,transparent)}
.yc-rep{display:flex;flex-direction:column;gap:12px;margin-top:11px}
.yc-rep-row{display:flex;gap:11px;align-items:flex-start}
.yc-bendav{flex:0 0 26px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  font-size:13px;background:linear-gradient(180deg,var(--orange,#FB9B50),var(--orange2,#F98125))}
.yc-rep-b{flex:1;min-width:0}
.yc-rep-hd{display:flex;align-items:baseline;gap:8px}
.yc-you{font-size:12px;font-weight:800;color:var(--gold)}
.yc-tag{font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  color:#8fb0e0;background:rgba(44,89,157,.26);border-radius:5px;padding:2px 6px}
.yc-rep-t{font-size:14px;color:var(--cream);margin-top:2px;line-height:1.4}
.yc-tell{margin-top:7px}

/* Videos posted is a count of events, so it draws as bars. A line between two
   upload days would put a value on the days nothing was posted (David 2026-08-05). */
.ysc-bar{transition:opacity .12s}
.ysc-svg:hover .ysc-bar{opacity:.85}
.ysc-bar:hover{opacity:1}


/* the bends fold now IS the like row: thumb, count, then the link that opens it */
.yc-fold.yc-bends>summary.yc-act{list-style:none;cursor:pointer;display:flex;
  align-items:center;gap:8px;margin-top:7px;padding:0;background:none;border-radius:0}
.yc-fold.yc-bends>summary.yc-act::-webkit-details-marker{display:none}
.yc-fold.yc-bends>summary.yc-act::before{content:none}
.yc-more{font-size:13px;font-weight:700;color:var(--blue);padding:4px 10px;
  border-radius:14px;background:color-mix(in srgb,var(--blue) 10%,transparent);
  margin-left:4px}
.yc-more::before{content:"\25BE";font-size:10px;margin-right:6px}
.yc-fold[open]>summary .yc-more::before{content:"\25B4"}
summary.yc-act:hover .yc-more{background:color-mix(in srgb,var(--blue) 18%,transparent)}
/* "on YouTube" sits at the right end of the source strip now */
.yc-srcw.yc-open{margin-left:auto;font-size:12px;font-weight:700;color:var(--muted2);
  text-decoration:none;white-space:nowrap}
.yc-srcw.yc-open:hover{color:var(--gold)}

/* ── report popup (Tim 2026-08) ──────────────────────────────────────────
   Big, because a report is a page. The header carries the name, the pencil and
   Copy link, so the link is copyable without ever going to it. */
html.rp-open{overflow:hidden}
.rep-pop{position:fixed;inset:0;z-index:120;background:rgba(8,10,14,.72);
  display:flex;align-items:center;justify-content:center;padding:28px}
.rp-card{display:flex;flex-direction:column;width:min(1180px,96vw);height:min(88vh,980px);
  background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;
  box-shadow:0 24px 70px rgba(0,0,0,.5)}
.rp-head{display:flex;align-items:center;gap:8px;padding:11px 13px;
  border-bottom:1px solid var(--line);background:var(--charcoal2,var(--card))}
.rp-t{flex:1;min-width:0;font-size:14.5px;font-weight:800;color:var(--cream);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rp-ico{flex:0 0 auto;background:transparent;border:1px solid var(--line);color:var(--muted);
  border-radius:9px;padding:6px 11px;font:inherit;font-size:12.5px;font-weight:700;
  cursor:pointer;text-decoration:none;line-height:1.2}
.rp-ico:hover{border-color:var(--gold);color:var(--gold)}
.rp-copy.on{border-color:var(--gold);color:var(--gold)}
.rp-x:hover{border-color:var(--red,#B24A4A);color:var(--red,#B24A4A)}
.rp-frame{flex:1;width:100%;border:0;background:#fff}
@media(max-width:720px){
  .rep-pop{padding:0}
  .rp-card{width:100vw;height:100vh;border-radius:0}
}

/* the demo board line - blue, not orange: orange is the "act on this" colour all
   over the product and this is the one thing you cannot act on */
.demo-note{display:flex;align-items:flex-start;gap:12px;margin:0 0 18px;padding:13px 16px;
  border-radius:12px;border:1px solid color-mix(in srgb,var(--blue) 40%,var(--line));
  background:color-mix(in srgb,var(--blue) 12%,var(--card))}
.demo-tag{flex:0 0 auto;font-size:10.5px;font-weight:900;letter-spacing:.06em;
  color:#fff;background:var(--blue);border-radius:5px;padding:3px 7px;margin-top:1px}
.demo-txt{flex:1;font-size:13.5px;line-height:1.5;color:var(--muted)}
.demo-txt b{color:var(--cream)}

/* a channel added seconds ago: a REAL picker row, greyed and disabled, spinner
   only while the add is in flight - then "history soon", because a channel with
   no view history keeps none for days and a spinner that long is a lie. */
.rail-pend{opacity:.72;cursor:default}
.rail-pend .rail-pname{color:var(--muted)}
.rl-pendspin{display:inline-block;width:11px;height:11px;border-radius:50%;
  vertical-align:-1px;border:2px solid var(--line);border-top-color:var(--gold);
  animation:cgpend .8s linear infinite}
/* the card body is not a link - only the thumbnail and the title are */
.card[data-chid] .body{cursor:default}

/* Tell Claude sits at the right end of its row, vertically centred, wherever the
   row is (David 2026-08-06: "make it appear on the right side of the box"). */
.bend{align-items:center}
.bend .tell{margin-left:auto}
.ci-row .ci-tell{margin-left:auto}
.yc-tell{margin-left:auto;display:block}
.hf-bend .hf-tell{margin-left:auto}

/* The comment leads and the source sits UNDER it, below a rule (David 2026-08-06:
   "let's do comment first and second is where from, under the line"). The strip is
   a footnote about the comment, so it reads after it, not before. */
.yc-src.yc-src-under{border-bottom:0;border-top:1px solid var(--line);
  padding-bottom:0;padding-top:11px;margin-bottom:0;margin-top:13px}