:root {
    color-scheme: dark;
    --bg: #0d0e12; --panel: #15171d; --panel-2: #1b1e26; --line: #262932;
    --text: #eceef3; --muted: #8b90a0; --faint: #5d6270;
    --good: #4ade80; --warn: #f5b041; --bad: #f87171;
    --brand-yt: #ff2d3d;

    /* Per-account brand identity. Gradients for tabs and accents; a single "line"
       colour for each account's chart (each passes 3:1 contrast on the dark surface). */
    --ig-grad: linear-gradient(45deg, #feda75 0%, #fa7e1e 25%, #d62976 50%, #962fbf 75%, #4f5bd5 100%);
    --ig-line: #f58529;
    --tt-grad: linear-gradient(110deg, #25f4ee 0%, #25f4ee 18%, #0b0b0f 50%, #fe2c55 82%, #fe2c55 100%);
    --tt-line: #fe2c55;
    --yt1-grad: linear-gradient(120deg, #0f2e70 0%, #184993 55%, #2b6ab5 100%);   /* TFFBreaks: royal blue */
    --yt1-line: #3a78e0;
    --yt2-grad: linear-gradient(120deg, #021533 0%, #0b306e 60%, #19458e 100%);   /* TFFBreaks+: navy */
    --yt2-line: #a9bcff;
    --yt3-grad: linear-gradient(120deg, #002e38 0%, #04576a 55%, #07738a 100%);   /* TFFBreaksLive: petrol teal */
    --yt3-line: #1aa9bf;
    --all-grad: linear-gradient(90deg, #3a78e0, #a9bcff, #1aa9bf, #fe2c55, #f58529);
    --ws-grad: linear-gradient(135deg, #0f9f6e 0%, #34d399 55%, #a3e635 100%);
    --kl-grad: linear-gradient(120deg, #17181c 0%, #2c2d33 50%, #5b4a2e 100%);   /* Klaviyo: charcoal into warm gold */
    --kl-line: #f2b45a;
    --dc-grad: linear-gradient(120deg, #191a3a 0%, #2f3488 55%, #5865f2 100%);   /* Discord: deep indigo into blurple */
    --dc-line: #8b93f8;

    --accent-grad: var(--all-grad);
    /* Theme helpers used across the HUD (each has a light-mode value below). */
    --input: #0b0d11; --tint: rgba(255,255,255,.07); --tint-strong: rgba(255,255,255,.18); --hover: rgba(255,255,255,.05);
    --solid: #ffffff; --on-solid: #0b0d11; --shadow: rgba(0,0,0,.8); --skel-a: #1b1e26; --skel-b: #232733;
  }
  /* ---------- light mode (Settings → Display → Theme, or the sun/moon in the top bar) ---------- */
  html[data-theme="light"] {
    color-scheme: light;
    --bg: #f3f4f7; --panel: #ffffff; --panel-2: #f4f5f8; --line: #e1e3ea;
    --text: #14161c; --muted: #5b6170; --faint: #8b909d;
    --good: #16a34a; --warn: #c27606; --bad: #dc2626;
    --yt2-line: #5b72d6; --yt3-line: #0e8ea3; --kl-line: #c58515; --dc-line: #5865f2; --tt-line: #e11d48; --ig-line: #e46c0a;
    --input: #ffffff; --tint: rgba(15,23,42,.06); --tint-strong: rgba(15,23,42,.14); --hover: rgba(15,23,42,.045);
    --solid: #14161c; --on-solid: #ffffff; --shadow: rgba(15,23,42,.18); --skel-a: #eceef2; --skel-b: #f6f7f9;
    --kl-grad: linear-gradient(120deg, #3b3c44 0%, #6b5a3a 55%, #c58515 100%);
  }
  html[data-theme="light"] .panel { box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 8px 24px -16px rgba(15,23,42,.12); }
  html[data-theme="light"] .panel:hover { border-color: #d3d6de; }
  html[data-theme="light"] .kpi-pick:hover { border-color: #cfd3dc; background-color: #fafbfc; }
  html[data-theme="light"] .kpi-active { border-color: #9aa1b1; box-shadow: inset 0 0 0 1px #9aa1b1; }
  html[data-theme="light"] .hover\:text-white:hover { color: var(--text) !important; }
  html[data-theme="light"] .tab-head .text-white, html[data-theme="light"] .ws-head .text-white { color: var(--text); }
  html[data-theme="light"] .hover\:bg-white\/5:hover { background-color: rgba(15,23,42,.045); }
  html[data-theme="light"] .hover\:bg-white\/10:hover { background-color: rgba(15,23,42,.07); }
  html[data-theme="light"] .bg-white\/\[\.07\], html[data-theme="light"] .hover\:bg-white\/\[\.07\]:hover { background-color: rgba(15,23,42,.06); }
  html[data-theme="light"] .ws-stat { background: #f7f8fa; }
  html[data-theme="light"] .sched-scroll { scrollbar-color: rgba(15,23,42,.2) transparent; }
  html[data-theme="light"] .picker:hover:not(:disabled) { border-color: #c9cdd6; }
  html[data-theme="light"] .picker-list, html[data-theme="light"] .toast, html[data-theme="light"] .undo-bar { box-shadow: 0 14px 34px -12px rgba(15,23,42,.28); }
  html[data-theme="light"] .undo-bar { background: #14161c; color: #fff; border-color: #14161c; }
  html[data-theme="light"] .tab-slider { box-shadow: 0 6px 18px -10px rgba(15,23,42,.45); }
  html[data-theme="light"] .nav-sticky { background: linear-gradient(var(--bg) 82%, rgba(243,244,247,0)); }
  html[data-theme="light"] .nav-sticky.stuck { background: rgba(243,244,247,.86); box-shadow: 0 10px 24px -18px rgba(15,23,42,.4); }
  html[data-theme="light"] .fold-btn:hover { background: rgba(15,23,42,.06); }
  html[data-theme="light"] .dnd-pill { background: #f3efff; border-color: #c4b5fd; color: #2e1065; box-shadow: 0 8px 20px -12px rgba(76,29,149,.35); }
  html[data-theme="light"] .kl-row:hover td { background: rgba(15,23,42,.03); }
  html[data-theme="light"] .tip-pop, html[data-theme="light"] [role=tooltip] { box-shadow: 0 12px 30px -12px rgba(15,23,42,.3); }
  html[data-theme="light"] .mbar::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent); }
  html[data-theme="light"] .drop-hint { background: rgba(16,185,129,.08); outline-color: rgba(5,150,105,.6); }
  html[data-theme="light"] .ptab::before { background: var(--panel); }
  html[data-theme="light"] .ptab .label { text-shadow: none; }
  html[data-theme="light"] .ptab[aria-pressed="true"] .label { text-shadow: 0 1px 2px rgba(0,0,0,.25); }
  html.theme-switching *, html.theme-switching *::before, html.theme-switching *::after { transition: background-color .35s ease, border-color .35s ease, color .35s ease !important; }
  body { background: var(--bg); color: var(--text); font-family: 'Bricolage Grotesque', system-ui, -apple-system, 'Segoe UI', sans-serif; }
  .panel { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; }
  .muted { color: var(--muted); } .faint { color: var(--faint); }
  /* Stat tiles that switch the chart: hover lifts the border, the selected one keeps a ring. */
  .kpi-pick { cursor: pointer; transition: border-color .2s, box-shadow .2s, background-color .2s; }
  .kpi-pick:hover { border-color: #3a3f4b; background-color: #171a21; }
  .kpi-active { border-color: #4a5060; box-shadow: inset 0 0 0 1px #4a5060; }
  .num { font-variant-numeric: tabular-nums; }
  .tab { padding: 7px 14px; border-radius: 999px; color: var(--muted); font-weight: 500; font-size: 14px; border: 1px solid transparent; white-space: nowrap; }
  .tab:hover { color: var(--text); }
  .tab[aria-pressed="true"] { color: var(--text); background: var(--panel-2); border-color: var(--line); }
  button:focus-visible, a:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

  /* Platform tabs: gradient fill when selected, gradient ring + dot when not. */
  .ptabs { position: relative; }
  .ptab { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 12px;
          font-weight: 600; font-size: 14px; white-space: nowrap; color: var(--muted); background: none; border: 1px solid transparent; transition: color .25s; }
  .ptab::before { content: ""; position: absolute; inset: -1px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); z-index: 0; transition: opacity .25s; }
  .ptab > * { position: relative; z-index: 2; }
  .ptab:hover { color: var(--text); }
  /* With eight tabs the colour dot only shows on wide screens; the icon carries the identity otherwise. */
  @media (max-width: 1535px) { .ptab { padding: 9px 13px; gap: 7px; } .ptab .dot { display: none; } }
  .ptab .dot { width: 10px; height: 10px; border-radius: 999px; background: var(--l); flex: none; transition: background .25s; }
  .ptab[aria-pressed="true"] { color: #fff; }
  .ptab[aria-pressed="true"]::before { opacity: 0; }
  /* The coloured highlight glides to the selected tab and blends into its colours. */
  .tab-slider { position: absolute; z-index: 1; border-radius: 12px; overflow: hidden; pointer-events: none; box-shadow: 0 6px 24px -10px rgba(0,0,0,.8);
    transition: left .42s cubic-bezier(.2,.8,.2,1), top .42s cubic-bezier(.2,.8,.2,1), width .42s cubic-bezier(.2,.8,.2,1), height .42s cubic-bezier(.2,.8,.2,1); }
  .tab-slider.instant { transition: none; }
  .tab-slider > span { position: absolute; inset: 0; }
  .tab-slider > span.in { animation: fadeIn .42s ease both; }
  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
  .ptab[aria-pressed="true"] .dot { background: #fff; box-shadow: 0 0 0 2px rgba(0,0,0,.25); }
  .ptab .label { text-shadow: 0 1px 2px rgba(0,0,0,.35); }
  /* YouTube group: one "YouTube" tab that opens into the three channels and folds away when you leave them. */
  .ytgroup { display: inline-flex; align-items: center; flex: none; border-radius: 14px; transition: background .4s, box-shadow .4s; }
  .ytgroup.open { background: rgba(229,36,59,.07); box-shadow: inset 0 0 0 1px rgba(229,36,59,.22); }
  .yt-head .yt-label { display: inline-block; max-width: 220px; overflow: hidden; vertical-align: bottom;
                       transition: max-width .45s cubic-bezier(.2,.8,.2,1), opacity .3s; }
  .yt-head { transition: color .25s, padding .45s cubic-bezier(.2,.8,.2,1), gap .45s cubic-bezier(.2,.8,.2,1); }
  .yt-head .yt-chev { opacity: .7; transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .3s; }
  .ytgroup.open .yt-head { gap: 4px; padding-left: 11px; padding-right: 8px; color: var(--text); }
  .ytgroup.open .yt-head::before { opacity: 0; }
  .ytgroup.open .yt-head .yt-label { max-width: 0; opacity: 0; }
  .ytgroup.open .yt-head .yt-chev { transform: rotate(180deg); opacity: .55; }
  .ytsub { display: grid; grid-template-columns: 0fr; opacity: 0;
           transition: grid-template-columns .5s cubic-bezier(.2,.8,.2,1), opacity .3s ease; }
  .ytgroup.open .ytsub { grid-template-columns: 1fr; opacity: 1; }
  .ytsub-in { min-width: 0; overflow: hidden; display: flex; gap: 8px; padding: 1px 1px 1px 2px; }
  .ytsub-in .ptab { z-index: 2; } /* the entrance animation makes each tab its own layer: keep it above the glide highlight */
  .ytgroup.open .ytsub-in .ptab { animation: ytIn .5s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i) * 70ms + 60ms); }
  /* With the channels open the bar gets tight: notes like "not connected" fold away (the tab still shows it when picked) and tabs slim down. */
  .ptab-note { display: inline-block; max-width: 120px; overflow: hidden; white-space: nowrap; transition: max-width .45s cubic-bezier(.2,.8,.2,1), opacity .3s; }
  .ptabs.yt-open .ptab[aria-pressed="false"] .ptab-note { max-width: 0; opacity: 0; margin-left: -8px; }
  .ptabs .ptab:not(.yt-head) { transition: color .25s, padding .45s cubic-bezier(.2,.8,.2,1); }
  /* Opening the YouTube group must never push tabs off the end of the bar: the other tabs slim down, and on narrower
     screens the ones you're not on fold to just their icon (hover shows the name) until the group closes again. */
  .ptabs.yt-open .ptab { padding-left: 12px; padding-right: 12px; gap: 7px; }
  .ptabs.yt-open .ptab .dot { display: none; }
  .ptabs > .ptab:not(.yt-head) .label { display: inline-block; max-width: 160px; overflow: hidden; white-space: nowrap; vertical-align: bottom;
    transition: max-width .45s cubic-bezier(.2,.8,.2,1), opacity .3s, margin .45s cubic-bezier(.2,.8,.2,1); }
  @media (max-width: 1279px) {
    .ptabs.yt-open > .ptab[aria-pressed="false"] .label { max-width: 0; opacity: 0; margin-left: -7px; }
    .ptabs.yt-open > .ptab[aria-pressed="false"] { padding-left: 11px; padding-right: 11px; }
  }
  @media (max-width: 1535px) { .ptabs.yt-open .ptab:not(.yt-head) { padding-left: 11px; padding-right: 11px; } }
  @keyframes ytIn { from { opacity: 0; transform: translateX(-14px) scale(.94); filter: blur(2px); } to { opacity: 1; transform: none; filter: none; } }
  @media (prefers-reduced-motion: reduce) {
    .ytgroup, .yt-head, .yt-head .yt-label, .yt-head .yt-chev, .ytsub { transition: none !important; }
    .ytgroup.open .ytsub-in .ptab { animation: none !important; }
  }
  /* Workspace rows: panels stretch to their row; .fill-pin pins a panel to the row height set by its neighbour. */
  .fill > section { height: 100%; }
  /* Workspace: a calm header with a soft green glow, and today's three panels side by side, kept to one height. */
  .ws-head { position: relative; }
  .ws-head::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--ws-grad); z-index: 2; }
  .ws-head-glow { position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(600px 220px at 0% 0%, rgba(52,211,153,.16), transparent 70%), radial-gradient(500px 200px at 100% 0%, rgba(163,230,53,.07), transparent 70%); }
  .ws-stat { background: rgba(255,255,255,.035); border: 1px solid var(--line); transition: background .15s, border-color .15s; }
  button.ws-stat:hover { background: rgba(52,211,153,.07); border-color: rgba(52,211,153,.35); }
  .ws-stat-icon { background: rgba(52,211,153,.12); color: #6ee7b7; }
  @media (min-width: 768px) { .ws-col.fill > section { max-height: 34rem; overflow-y: auto; } }
  @media (min-width: 1024px) {
    .fill-pin { position: relative; }
    .fill-pin > .fill-pin-inner { position: absolute; inset: 0; overflow-y: auto; border-radius: 1rem; }
    .fill-pin > .fill-pin-inner > section { min-height: 100%; }
  }
  .accent-bar { height: 3px; border-radius: 999px; background: var(--accent-grad); }
  .accent-ring { position: relative; }
  .accent-ring::before { content: ""; position: absolute; inset: 0; border-radius: 16px; padding: 1px; background: var(--accent-grad);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; opacity: .9; }

  .chip { font-size: 12px; padding: 2px 8px; border-radius: 999px; font-weight: 500; display: inline-flex; gap: 6px; align-items: center; }
  th { font-weight: 500; color: var(--muted); font-size: 13px; text-align: right; padding: 10px 12px; white-space: nowrap; }
  th:first-child, td:first-child { text-align: left; }
  td { padding: 11px 12px; text-align: right; border-top: 1px solid var(--line); font-size: 14px; }
  .set-row:not([hidden]) { display: flex; }
  .sched-scroll { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.15) transparent; }
  .sched-fade { position: absolute; left: 0; right: 0; height: 28px; pointer-events: none; transition: opacity .2s; }
  .sched-fade.top { top: 0; background: linear-gradient(var(--panel), transparent); }
  .sched-fade.bottom { bottom: 0; background: linear-gradient(transparent, var(--panel)); }
  .drop-hint { background: rgba(16,185,129,.10); outline: 2px dashed rgba(110,231,183,.7); outline-offset: -6px; animation: fadeIn .15s ease both; }
  .dim-layer { position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; transition: opacity 1.2s ease;
    background: rgba(18, 10, 0, var(--dim, .3)); mix-blend-mode: multiply; }
  .dim-layer::after { content: ""; position: absolute; inset: 0; background: rgba(255, 140, 40, calc(var(--dim, .3) * .12)); mix-blend-mode: overlay; }
  @media print {
    html.report-printing body > *:not(.weekly-report-root) { display: none !important; }
    html.report-printing, html.report-printing body { background: #0b0d11 !important; }
    html.report-printing * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .weekly-report-root { position: static !important; display: block !important; background: none !important; padding: 0 !important; }
    .weekly-report-root .wr-panel { max-height: none !important; overflow: visible !important; box-shadow: none !important; border: 0 !important; max-width: none !important; animation: none !important; }
    .weekly-report-root .wr-scroll { overflow: visible !important; }
    .weekly-report-root .wr-actions { display: none !important; }
    .weekly-report-root .wr-card { break-inside: avoid; }
  }
  .theme-icon { animation: themeSpin .45s cubic-bezier(.2,.8,.2,1); }
  @keyframes themeSpin { from { transform: rotate(-90deg) scale(.6); opacity: 0; } }
  .picker { background: var(--panel-2); border: 1px solid var(--line); color: var(--text); transition: border-color .15s, background .15s; }
  .picker:hover:not(:disabled) { border-color: rgba(255,255,255,.18); } .picker[aria-expanded=true] { border-color: rgba(169,188,255,.5); }
  .picker:disabled { opacity: .5; }
  .picker-list { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 16px 40px rgba(0,0,0,.55); }
  .skeleton { background: linear-gradient(90deg, var(--skel-a) 0%, var(--skel-b) 50%, var(--skel-a) 100%); background-size: 200% 100%; animation: sk 1.4s infinite; border-radius: 8px; }
  @keyframes sk { to { background-position: -200% 0; } }
  .live-ping { animation: ping 1.6s cubic-bezier(0,0,.2,1) infinite; opacity: .6; }
  @keyframes ping { 75%, 100% { transform: scale(2.2); opacity: 0; } }
  /* ---- motion ---- */
  @keyframes rise { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
  @keyframes barIn { from { transform: scaleX(0); opacity: .4; } to { transform: scaleX(1); opacity: 1; } }
  @keyframes growX { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes pop { 0% { transform: scale(.94); } 60% { transform: scale(1.04); } 100% { transform: scale(1); } }
  .view-enter > * , .view-enter .stagger > * { animation: rise .5s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 55ms); }
  .view-enter > .stagger { animation: none; }
  .view-enter { transition: opacity .25s ease, filter .25s ease; }
  .view-enter.is-switching { opacity: .55; filter: saturate(.7); }
  /* Tab transitions: a straight sideways slide. Going to a tab on the right, the old page slides off to the left
     and the new one comes in from the right (and the reverse going left). Nothing rises inside it, so it's purely horizontal.
     "backwards" so nothing lingers once it lands (a lingering transform would trap pop-ups inside the tab). */
  .view-enter.slide-r { animation: viewFromR .46s cubic-bezier(.22,.8,.24,1) .13s backwards; }
  .view-enter.slide-l { animation: viewFromL .46s cubic-bezier(.22,.8,.24,1) .13s backwards; }
  .view-enter.slide-r > *, .view-enter.slide-l > *, .view-enter.slide-r .stagger > *, .view-enter.slide-l .stagger > * { animation: none; }
  @keyframes viewFromR { from { transform: translateX(110px); opacity: 0; } }
  @keyframes viewFromL { from { transform: translateX(-110px); opacity: 0; } }
  .view-ghost { position: absolute; margin: 0; pointer-events: none; z-index: 0; }
  .view-ghost, .view-ghost * { animation: none !important; transition: none !important; }
  .view-host { position: relative; overflow-x: clip; }
  .accent-bar { transform-origin: left; animation: barIn .6s cubic-bezier(.2,.8,.2,1) both; }
  .grow-x { transform-origin: left; animation: growX .9s cubic-bezier(.2,.8,.2,1) .15s both; }

  /* Time periods: the highlight slides to the chosen period, like the account tabs. */
  .rangebar { position: relative; }
  .rangebar .tab { position: relative; z-index: 1; transition: color .25s; }
  .rangebar .tab[aria-pressed="true"] { background: transparent; border-color: transparent; }
  .rangebar .slider { position: absolute; top: 4px; bottom: 4px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line);
    transition: left .42s cubic-bezier(.2,.8,.2,1), width .42s cubic-bezier(.2,.8,.2,1); }
  .rangebar .slider.instant { transition: none; }
  /* Inbox rows: actions appear on hover (always on touch screens); archived rows slide away. */
  .mail-actions { opacity: 0; transition: opacity .15s; }
  .mail-row:hover .mail-actions, .mail-row:focus-within .mail-actions { opacity: 1; }
  .mail-row:hover .mail-time, .mail-row:focus-within .mail-time { visibility: hidden; }
  @media (hover: none) { .mail-actions { opacity: 1; } .mail-row .mail-time { visibility: hidden; } }
  .mail-out { animation: mailOut .22s ease forwards; }
  @keyframes mailOut { to { opacity: 0; transform: translateX(24px); } }
  /* ---- Ambient motion: slow, quiet, and off entirely for reduced motion ----
     Brand headers drift their gradient and get an occasional light sweep; every panel's top edge
     catches a faint travelling highlight (staggered so they never pulse together) and its border
     lifts a touch on hover; the accent bar's colours flow slowly. */
  .hero { position: relative; overflow: hidden; background-size: 180% 180% !important; animation: heroDrift 18s ease-in-out infinite alternate; }
  .hero::after { content: ""; position: absolute; inset: -20% -10%; pointer-events: none;
                 background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.13) 50%, transparent 58%);
                 transform: translateX(-70%); animation: heroSweep 11s cubic-bezier(.45,.05,.25,1) 1.2s infinite; }
  .hero > * { position: relative; z-index: 1; }
  .hero-strip { background-size: 200% 100% !important; animation: heroDrift 14s ease-in-out infinite alternate; }
  @keyframes heroDrift { from { background-position: 0% 40%; } to { background-position: 100% 60%; } }
  @keyframes heroSweep { 0% { transform: translateX(-70%); } 22%, 100% { transform: translateX(70%); } }

  /* :where() keeps this at zero specificity so .fixed / .absolute panels (menus, pop-overs) stay put. */
  :where(.panel) { position: relative; }
  .panel { transition: border-color .35s ease, background-color .35s ease; }
  .panel:hover { border-color: #31353f; }
  .panel::before { content: ""; position: absolute; top: -1px; left: 14px; right: 14px; height: 1px; pointer-events: none; z-index: 1;
                   background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent) no-repeat;
                   background-size: 35% 100%; background-position: -60% 0; opacity: .9;
                   animation: edgeSheen 13s ease-in-out infinite; animation-delay: var(--sheen-delay, 0s); }
  .panel:nth-of-type(3n+1)::before { --sheen-delay: 1.5s; } .panel:nth-of-type(3n+2)::before { --sheen-delay: 5.5s; } .panel:nth-of-type(3n)::before { --sheen-delay: 9s; }
  @keyframes edgeSheen { 0%, 62% { background-position: -60% 0; } 92%, 100% { background-position: 160% 0; } }

  .accent-bar { background-size: 200% 100%; }
  .accent-bar.flow { animation: barIn .6s cubic-bezier(.2,.8,.2,1) both, accentFlow 16s ease-in-out .6s infinite alternate; }
  @keyframes accentFlow { from { background-position: 0% 0; } to { background-position: 100% 0; } }
  .tab-slider::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
                       background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.22) 50%, transparent 65%);
                       transform: translateX(-120%); animation: heroSweep 9s cubic-bezier(.45,.05,.25,1) 2s infinite; }
  @media (prefers-reduced-motion: reduce) {
    .hero, .hero-strip, .hero::after, .panel::before, .accent-bar.flow, .tab-slider::after { animation: none !important; }
    .hero::after, .panel::before, .tab-slider::after { display: none; }
  }
  /* ---- Interaction & data animations (all off with reduced motion) ---- */
  /* 1 · a stat that changes on the live refresh rolls to its new value and glows up/down for a moment */
  .num-flash-up { animation: flashUp 1.6s ease-out; } .num-flash-down { animation: flashDown 1.6s ease-out; }
  @keyframes flashUp { 0%, 20% { color: #86efac; text-shadow: 0 0 18px rgba(74,222,128,.55); } 100% { color: inherit; text-shadow: none; } }
  @keyframes flashDown { 0%, 20% { color: #fca5a5; text-shadow: 0 0 18px rgba(248,113,113,.5); } 100% { color: inherit; text-shadow: none; } }
  /* 2 · milestone bars carry a soft shimmer */
  .mbar { position: relative; overflow: hidden; }
  /* Progress bars start empty and fill once they scroll into view (data-seen is set by the watcher at the end of the page). */
  /* Content calendar: item actions and per-day "+ Add" show on hover (always on touch screens). */
  .cal-item .cal-acts { opacity: 0; transition: opacity .15s; }
  /* Schedule: the event you've just finished sits back; the one happening now gets a green ring that draws in and turns. */
  .sched-prev { opacity: .45; transition: opacity .2s; animation: schedPrevIn .5s ease-out backwards; }
  .sched-prev:hover { opacity: .8; }
  .sched-now { position: relative; animation: schedNowIn .5s cubic-bezier(.2,.8,.2,1) .1s backwards; }
  .sched-now::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; padding: 1.5px;
    background: conic-gradient(from var(--cal-a, 0deg), #4ade80, #34d399, #4ade80 40%, rgba(74,222,128,.3) 60%, #4ade80);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
    animation: calRingIn .7s cubic-bezier(.2,.8,.2,1) .35s backwards, calSpin 6s linear 1.05s infinite; }
  .sched-now::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    box-shadow: 0 0 22px -6px rgba(74,222,128,.5); animation: calGlow 3.2s ease-in-out 1.05s infinite; }
  @keyframes schedPrevIn { from { opacity: 0; transform: translateY(-6px); } }
  @keyframes schedNowIn { from { opacity: 0; transform: scale(.97); } }
  @media (prefers-reduced-motion: reduce) { .sched-prev, .sched-now, .sched-now::before, .sched-now::after { animation: none !important; } }
  .cal-drop-line { height: 3px; border-radius: 3px; background: #60a5fa; box-shadow: 0 0 10px rgba(96,165,250,.7); margin: -1px 2px; animation: calLine .15s ease-out; }
  @keyframes calLine { from { transform: scaleX(.4); opacity: 0; } }
  .cal-item { padding-right: 1.25rem; }
  .cal-item .cal-acts { padding: 1px; border-radius: 6px; background: var(--panel); box-shadow: -6px 0 8px var(--panel); }
  @media (hover: none) { .cal-item { padding-right: 3.6rem; } }
  /* Day columns slide in one after another; yesterday sits back, today gets a ring that draws in and then breathes. */
  .cal-day { position: relative; animation: calDayIn .5s cubic-bezier(.2,.8,.2,1) backwards; animation-delay: calc(var(--d, 0) * 50ms); transition: opacity .2s, background .15s, border-color .15s; }
  .cal-past { opacity: .5; }
  .cal-past:hover, .cal-past:focus-within { opacity: .85; }
  .cal-today { border-color: transparent !important; }
  .cal-today::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; padding: 1.5px;
    background: conic-gradient(from var(--cal-a, 0deg), #4ade80, #34d399, #4ade80 40%, rgba(74,222,128,.3) 60%, #4ade80);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
    animation: calRingIn .7s cubic-bezier(.2,.8,.2,1) .35s backwards, calSpin 6s linear 1.05s infinite; }
  .cal-today::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
    box-shadow: 0 0 22px -6px rgba(74,222,128,.5); animation: calGlow 3.2s ease-in-out 1.05s infinite; }
  .cal-today-pill { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 999px; background: rgba(74,222,128,.14); color: #86efac; animation: calPillIn .45s cubic-bezier(.2,.8,.2,1) .55s backwards; }
  @property --cal-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
  @keyframes calDayIn { from { opacity: 0; transform: translateX(14px); } }
  @keyframes calRingIn { from { opacity: 0; transform: scale(.96); } }
  @keyframes calSpin { to { --cal-a: 360deg; } }
  @keyframes calGlow { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
  @keyframes calPillIn { from { opacity: 0; transform: scale(.6); } }
  @media (prefers-reduced-motion: reduce) { .cal-day, .cal-today::before, .cal-today::after, .cal-today-pill { animation: none !important; } }
  .cal-item:hover .cal-acts, .cal-item:focus-within .cal-acts { opacity: 1; }
  @media (hover: hover) { .cal-day .cal-add { opacity: 0; transition: opacity .15s; } .cal-day:hover .cal-add, .cal-day .cal-add:focus { opacity: 1; } }
  @media (hover: none) { .cal-item .cal-acts { opacity: 1; } }
  /* Workspace weather icon: a slow, gentle bob. */
  .wx-icon { animation: wxBob 5s ease-in-out infinite; }
  @keyframes wxBob { 50% { transform: translateY(-2px); } }
  @media (prefers-reduced-motion: reduce) { .wx-icon { animation: none; } }
  .fill-on-view { transform-origin: left center; transform: scaleX(0); }
  .fill-on-view[data-seen] { transform: scaleX(1); transition: transform 1.1s cubic-bezier(.2,.8,.2,1) var(--fill-delay, 0s); }
  .no-io .fill-on-view { transform: none; }
  .mbar::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
                 transform: translateX(-100%); animation: mShimmer 3.2s ease-in-out 1s infinite; }
  @keyframes mShimmer { 0% { transform: translateX(-100%); } 55%, 100% { transform: translateX(100%); } }
  .confetti { position: fixed; inset: 0; pointer-events: none; z-index: 60; }
  /* 3 · a channel that's streaming glows at the edge of its tab */
  .ptab-live::after { content: ""; position: absolute; inset: -1px; border-radius: 12px; pointer-events: none; z-index: 3;
                      box-shadow: inset 0 0 0 1px rgba(229,36,59,.6), inset 0 0 12px -2px rgba(229,36,59,.5); animation: liveGlow 2.4s ease-in-out infinite; }
  @keyframes liveGlow { 50% { box-shadow: inset 0 0 0 1.5px rgba(255,70,90,.95), inset 0 0 18px 0 rgba(229,36,59,.55); } }
  /* 4 · the bell rings when something new arrives */
  .bell-ring > svg { animation: bellRing .9s cubic-bezier(.36,.07,.19,.97); transform-origin: 50% 10%; }
  .bell-ring .bell-badge { animation: pop .5s cubic-bezier(.2,1.6,.4,1); }
  /* While new alerts are showing: the bell keeps ringing every few seconds and a red ring pulses out of the badge. */
  .bell-alerting > svg { animation: bellRingLoop 2.6s ease-in-out infinite; transform-origin: 50% 10%; }
  @keyframes bellRingLoop { 0%, 40%, 100% { transform: none; } 6% { transform: rotate(16deg); } 12% { transform: rotate(-14deg); } 18% { transform: rotate(10deg); } 24% { transform: rotate(-7deg); } 30% { transform: rotate(3deg); } }
  .bell-ping { background: #e5243b; animation: bellPing 1.6s cubic-bezier(0,0,.2,1) infinite; z-index: 1; }
  .bell-badge { z-index: 2; }
  @keyframes bellPing { 0% { transform: scale(1); opacity: .75; } 80%, 100% { transform: scale(2.6); opacity: 0; } }
  .toast { box-shadow: 0 18px 40px -14px rgba(0,0,0,.85); border-left: 3px solid var(--k) !important; animation: toastIn .45s cubic-bezier(.2,.8,.2,1) both; transition: transform .15s; }
  .toast:hover { transform: translateX(-3px); }
  .toast:hover .toast-x { color: var(--text); }
  .toast-out { animation: toastOut .26s ease-in forwards; }
  @keyframes toastIn { from { opacity: 0; transform: translateX(40px) scale(.97); } }
  @keyframes toastOut { to { opacity: 0; transform: translateX(60px); } }
  @media (prefers-reduced-motion: reduce) { .bell-alerting > svg, .bell-ping, .toast, .toast-out { animation: none !important; } .bell-ping { display: none; } }
  @keyframes bellRing { 15% { transform: rotate(14deg); } 30% { transform: rotate(-12deg); } 45% { transform: rotate(8deg); } 60% { transform: rotate(-5deg); } 75% { transform: rotate(2deg); } 100% { transform: none; } }
  /* 6 · upload cards lift and their thumbnail zooms */
  .upl-art { transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; }
  .upl-art:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -18px rgba(0,0,0,.9); }
  .upl-thumb { overflow: hidden; } .upl-img { transition: transform .8s cubic-bezier(.2,.8,.2,1); }
  .upl-art:hover .upl-img { transform: scale(1.06); }
  .upl-verdict { transition: transform .35s cubic-bezier(.2,.8,.2,1); } .upl-art:hover .upl-verdict { transform: translateX(3px); }
  /* 8 · ticking a to-do: the box pops, a line draws through, then it drops into Completed */
  .todo-done-anim .todo-box { animation: pop .38s cubic-bezier(.2,1.6,.4,1); }
  .todo-text { background: linear-gradient(currentColor, currentColor) no-repeat 0 55% / 0% 1.5px; }
  .todo-done-anim .todo-text { background-size: 100% 1.5px; transition: background-size .32s ease-out; color: var(--faint); }
  .todo-done-anim { animation: todoOut .3s ease-in .42s forwards; }
  @keyframes todoOut { to { opacity: 0; transform: translateY(8px); } }
  /* 9 · pipeline cards just slide (see useGlide); a card that moved itself to Posted glows once */
  .pcard-new { animation: postedGlow 2.6s ease-out .3s 2; }
  @keyframes postedGlow { 0% { box-shadow: 0 0 0 0 rgba(74,222,128,0); } 30% { box-shadow: 0 0 0 1px rgba(74,222,128,.7), 0 0 20px -2px rgba(74,222,128,.55); } 100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); } }
  /* 10 · charts and trend lines draw in from the left */
  .ptabs > .ptab, .ptabs > .ytgroup > .yt-head { touch-action: pan-x; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
  .ptab-drag { z-index: 5; cursor: grabbing; transition: none !important; filter: drop-shadow(0 10px 18px rgba(0,0,0,.6)); }
  .dc-tab { touch-action: pan-x; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; cursor: grab; position: relative; }
  .dc-tab.dragging { cursor: grabbing; z-index: 2; box-shadow: 0 10px 24px -8px rgba(0,0,0,.7); border-color: var(--dc-line) !important; background: var(--panel-2) !important; color: var(--text); transition: none; scale: 1.04; }
  @media (min-width: 640px) and (max-width: 1023px) { .topbar .tab { padding-left: 9px; padding-right: 9px; gap: 6px; } }
  /* Top of the page: one slim header row; the tabs stay pinned to the top as you scroll. */
  .topbar .tab { padding: 6px 11px; font-size: 13.5px; gap: 7px; }
  .nav-sticky { position: sticky; top: 0; z-index: 30; margin: 0 -1rem; padding: 8px 1rem 0; background: linear-gradient(var(--bg) 82%, rgba(13,14,18,0)); }
  @media (min-width: 640px) { .nav-sticky { margin: 0 -1.5rem; padding: 10px 1.5rem 0; } }
  .nav-sticky.stuck { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); background: rgba(13,14,18,.84); box-shadow: 0 10px 24px -18px rgba(0,0,0,.9); }
  .ws-col, #ws-creative { scroll-margin-top: 84px; }
  .upl-card { border-radius: 12px; background: var(--panel); border: 1px solid var(--line); box-shadow: inset 3px 0 0 var(--l); cursor: pointer; }
  .upl-card:hover { border-color: color-mix(in srgb, var(--l) 45%, var(--line)); }
  /* Every tab's header: the calm dark style, with the account's colour as the top line and a soft glow. */
  .tab-head { position: relative; overflow: hidden; }
  .tab-head::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--g); }
  .tab-head::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(620px 220px at 0% 0%, color-mix(in srgb, var(--l) 20%, transparent), transparent 70%),
                radial-gradient(480px 200px at 100% 0%, color-mix(in srgb, var(--l) 8%, transparent), transparent 70%); }
  .tab-head > * { position: relative; z-index: 1; }
  /* One small button style for panel headers, and "?" tips that hold the longer explanations. */
  .tab.sm { padding: 4px 11px; font-size: 12px; border-color: var(--line); gap: 6px; }
  .tip { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 999px;
         border: 1px solid var(--line); color: var(--faint); font-size: 10.5px; font-weight: 700; cursor: help; vertical-align: middle; flex: none; }
  .tip:hover, .tip:focus-visible { color: var(--text); border-color: var(--muted); outline: none; }
  .tip-pop { position: absolute; z-index: 40; bottom: calc(100% + 8px); left: 50%; transform: translate(-50%, 4px); width: max-content; max-width: 260px;
             padding: 8px 10px; border-radius: 10px; background: var(--input); border: 1px solid var(--line); color: var(--text); font-size: 12px; font-weight: 400;
             line-height: 1.45; text-align: left; white-space: normal; box-shadow: 0 12px 30px -10px rgba(0,0,0,.8); opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; }
  .tip:hover .tip-pop, .tip:focus-visible .tip-pop { opacity: 1; transform: translate(-50%, 0); }
  .tip.tip-r .tip-pop { left: auto; right: -6px; transform: translate(0, 4px); }
  .tip.tip-r:hover .tip-pop, .tip.tip-r:focus-visible .tip-pop { transform: none; }
  .fold-btn { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-left: -4px; border-radius: 6px;
              color: var(--faint); transform: rotate(90deg); transition: transform .25s cubic-bezier(.2,.8,.2,1), color .15s, background .15s; flex: none; }
  .fold-btn:hover { color: var(--text); background: rgba(255,255,255,.06); }
  .folded .fold-btn { transform: rotate(0deg); }
  .folded > section > :not(:first-child), .folded > .fill-pin-inner > section > :not(:first-child) { display: none !important; }
  .folded > section > :first-child, .folded > .fill-pin-inner > section > :first-child { margin-bottom: 0 !important; }
  .folded > section, .folded > .fill-pin-inner > section { height: auto !important; min-height: 0 !important; }
  .foldable.folded { align-self: start; }
  .foldable.fill-pin.folded > .fill-pin-inner { position: static; }
  /* Pipeline cards: the move/delete controls appear when you hover a card (always shown on touch screens). */
  .pcard-ctrl { display: flex; align-items: center; gap: 4px; margin-top: 6px; }
  .pcard-ctrl .pcard-del { margin-left: auto; }
  @media (hover: hover) {
    .pcard-ctrl { position: absolute; top: 6px; right: 6px; margin: 0; padding: 2px 4px; gap: 2px; border-radius: 8px; z-index: 2;
                  background: var(--panel-2); border: 1px solid var(--line); box-shadow: -8px 0 10px var(--panel);
                  opacity: 0; pointer-events: none; transition: opacity .15s; }
    .pcard-ctrl .pcard-del { margin-left: 4px; }
    .group:hover > .pcard-ctrl, .group:focus-within > .pcard-ctrl { opacity: 1; pointer-events: auto; }
  }
  /* Display settings: text size scales the whole HUD; reduced motion turns animations off. */
  html.size-small { font-size: 14.5px; } html.size-large { font-size: 17.5px; }
  html.reduce-motion *, html.reduce-motion *::before, html.reduce-motion *::after { animation-duration: 0s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0s !important; }
  .dnd-pill { background: rgba(24,22,40,.92); border: 1px solid rgba(196,181,253,.35); box-shadow: 0 10px 30px -10px rgba(0,0,0,.8);
              backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: dndIn .45s cubic-bezier(.2,.8,.2,1); white-space: nowrap; max-width: calc(100vw - 24px); }
  @keyframes dndIn { from { opacity: 0; transform: translateY(-8px) scale(.96); } }
  .undo-bar { transform: translateX(-50%); background: #1f2330; border: 1px solid var(--line); box-shadow: 0 14px 34px -12px rgba(0,0,0,.85); overflow: hidden;
              animation: undoIn .3s cubic-bezier(.2,.8,.2,1); white-space: nowrap; }
  .undo-timer { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--muted); transform-origin: left; animation: secretRun 6s linear both; }
  @keyframes undoIn { from { opacity: 0; transform: translate(-50%, 12px); } }
  /* Due-soon warning: a solid orange box. */
  .due-soon { display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; padding: 2px 6px; border-radius: 5px;
              background: #f97316; color: #fff; margin-bottom: 5px; box-shadow: 0 4px 12px -4px rgba(249,115,22,.7); }
  .pcard-soon { box-shadow: 0 0 0 1px rgba(249,115,22,.2), 0 8px 20px -14px rgba(249,115,22,.8); }
  /* Urgent to-dos: a solid red box with white text. */
  .todo-urgent { background: #dc2626; color: #fff; padding-left: 6px; padding-right: 4px; margin: 3px 0; box-shadow: 0 6px 18px -8px rgba(220,38,38,.7);
                 animation: urgentIn .35s cubic-bezier(.2,.8,.2,1); }
  .todo-urgent .todo-grip, .todo-urgent .todo-actions button { color: rgba(255,255,255,.8) !important; }
  .todo-urgent .todo-actions button:hover { color: #fff !important; background: rgba(0,0,0,.15); }
  .todo-urgent-tag { display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; margin-right: 6px;
                     padding: 1px 5px; border-radius: 4px; background: #fff; color: #b91c1c; vertical-align: 1px; }
  .todo-flag.on { color: #fff; }
  @keyframes urgentIn { from { background: transparent; color: var(--text); } }
  @media (prefers-reduced-motion: reduce) { .todo-urgent { animation: none; } }
  /* Hidden revenue: dots until clicked, then the figure with a bar that runs down over 5 seconds. */
  .secret { display: inline-flex; align-items: center; gap: .45em; cursor: pointer; border-radius: .5rem; padding: 0 .3em; margin: 0 -.3em;
            color: var(--muted); transition: background .15s, color .15s; vertical-align: baseline; white-space: nowrap; }
  .secret:hover, .secret:focus-visible { background: var(--panel-2); color: var(--text); outline: none; }
  .secret-dots { letter-spacing: .08em; }
  .secret-eye { display: inline-flex; opacity: .7; }
  .secret-hint { display: inline-flex; align-items: center; gap: .3rem; font-size: 11px; font-weight: 600; letter-spacing: 0; line-height: 1;
                 padding: .3rem .5rem; border-radius: 999px; border: 1px solid var(--line); background: var(--panel-2); color: var(--muted); font-family: inherit; }
  .secret:hover .secret-hint { color: var(--text); border-color: var(--muted); }
  .secret-big .secret-dots { font-size: .8em; }
  @media (max-width: 639px) { .secret-big .secret-dots { display: none; } }
  .secret-on { position: relative; display: inline-block; animation: secretIn .25s ease-out both; }
  .secret-bar { position: absolute; left: 0; right: 0; bottom: -3px; height: 2px; border-radius: 2px; background: var(--muted); opacity: .55;
                transform-origin: left; animation: secretRun 5s linear both; }
  .chart-bar { top: -6px; bottom: auto; }
  @keyframes secretRun { from { transform: scaleX(1); } to { transform: scaleX(0); } }
  @keyframes secretIn { from { opacity: 0; filter: blur(4px); } to { opacity: 1; filter: none; } }
  .chart-veil { transition: filter .3s, opacity .3s; }
  .chart-veil.on { filter: blur(14px); opacity: .45; pointer-events: none; user-select: none; }
  .secret-cover { display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1rem; border-radius: 999px; font-size: .875rem;
                  background: var(--panel); border: 1px solid var(--line); color: var(--muted); box-shadow: 0 8px 24px rgba(0,0,0,.35); }
  .secret-cover:hover { color: var(--text); border-color: var(--muted); }
  .secret-cover b { color: var(--text); font-weight: 600; }
  .secret-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .55rem; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
  .secret-chip:hover { color: var(--text); border-color: var(--muted); }
  @media (prefers-reduced-motion: reduce) { .secret-on { animation: none; } .chart-veil { transition: none; } }
  .chart-in { animation: drawIn 1s cubic-bezier(.3,.7,.2,1) both; }
  @keyframes drawIn { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
  .spark-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: sparkDraw 1.1s cubic-bezier(.3,.7,.2,1) .15s forwards; }
  .spark-fill { opacity: 0; animation: sparkFill .6s ease .7s forwards; }
  @keyframes sparkFill { to { opacity: .1; } }
  @keyframes sparkDraw { to { stroke-dashoffset: 0; } }
  /* 11 · content fades in where a loading placeholder was */
  .fade-in { animation: fadeIn .45s ease both; }
  @media (prefers-reduced-motion: reduce) {
    .num-flash-up, .num-flash-down, .mbar::after, .ptab-live::after, .bell-ring > svg, .bell-ring .bell-badge, .todo-done-anim, .todo-done-anim .todo-box,
    .pcard, .pcard-new, .chart-in, .spark-line, .spark-fill, .fade-in { animation: none !important; }
    .spark-line { stroke-dashoffset: 0; } .spark-fill { opacity: .1; } .upl-art, .upl-img, .upl-verdict { transition: none; }
    .upl-art:hover, .upl-art:hover .upl-img, .upl-art:hover .upl-verdict { transform: none; }
  }
  /* Search palette */
  .search-hit { animation: searchHit 1.8s ease-out; border-radius: 10px; }
  @keyframes searchHit { 0%, 35% { box-shadow: 0 0 0 2px rgba(169,188,255,.9), 0 0 24px -4px rgba(169,188,255,.7); } 100% { box-shadow: 0 0 0 0 rgba(169,188,255,0); } }
  .palette-in { animation: paletteIn .18s cubic-bezier(.2,.8,.2,1); }
  @keyframes paletteIn { from { opacity: 0; transform: translateY(-6px) scale(.985); } }
  kbd { font: 600 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; padding: 3px 5px; border-radius: 5px; border: 1px solid var(--line); background: var(--panel-2); color: var(--muted); }
  @media (prefers-reduced-motion: reduce) { .search-hit, .palette-in { animation: none !important; } }
  /* Phone: tab rows scroll sideways without a scrollbar and fade at the edge; periods are tighter. */
  .ptabs, .rangebar { scrollbar-width: none; scroll-snap-type: x proximity; }
  .ptabs::-webkit-scrollbar, .rangebar::-webkit-scrollbar { display: none; }
  .ptabs > .ptab, .rangebar > .tab { scroll-snap-align: center; }
  @media (max-width: 639px) {
    .ptabs { -webkit-mask: linear-gradient(90deg, #000 85%, transparent); mask: linear-gradient(90deg, #000 85%, transparent); padding-right: 28px; }
    .ptab { padding: 8px 12px; font-size: 13.5px; }
    .rangebar .tab { padding: 6px 11px; font-size: 13px; }
  }
  .kl-row:hover td, .kl-row:focus-visible td { background: rgba(255,255,255,.03); }
  /* To-do rows: tools show on hover (always on touch screens); a drop target gets a line above it. */
  .todo-actions, .todo-grip { opacity: 0; transition: opacity .15s; }
  .todo-row:hover .todo-actions, .todo-row:focus-within .todo-actions, .todo-row:hover .todo-grip { opacity: 1; }
  @media (hover: none) { .todo-actions { opacity: 1; } .todo-grip { display: none; } }
  .todo-over { box-shadow: inset 0 2px 0 0 var(--text); }
  .todo-date-empty::-webkit-datetime-edit { display: none; }
  .todo-date-empty::-webkit-calendar-picker-indicator { margin: 0 auto; opacity: .7; cursor: pointer; }
  /* New-upload banner above the tabs: the row opens, the card drops in; dismissing closes it again. */
  .upl-wrap { display: grid; grid-template-rows: 1fr; margin-bottom: 12px; animation: uplOpen .45s cubic-bezier(.2,.8,.2,1); }
  .upl-wrap > div { min-height: 0; overflow: hidden; border-radius: 12px; }
  .upl-wrap.leaving { animation: uplClose .32s ease forwards; }
  @keyframes uplOpen { from { grid-template-rows: 0fr; opacity: 0; margin-bottom: 0; } }
  @keyframes uplClose { to { grid-template-rows: 0fr; opacity: 0; margin-bottom: 0; } }
  .upl-card { position: relative; animation: uplDrop .55s cubic-bezier(.2,.9,.25,1.12); cursor: pointer; }
  .upl-card.out { animation: uplOut .26s ease forwards; }
  @keyframes uplDrop { from { transform: translateY(-110%); opacity: .4; } }
  @keyframes uplOut { to { transform: translateY(-60%); opacity: 0; } }
  .upl-card::after { content: ""; position: absolute; inset: 0; border-radius: 16px; pointer-events: none;
                     background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.18) 50%, transparent 70%); background-size: 250% 100%;
                     animation: uplShine 1.6s .35s ease-out 1 both; }
  @keyframes uplShine { from { background-position: 120% 0; } to { background-position: -60% 0; } }
  @media (prefers-reduced-motion: reduce) { .upl-wrap, .upl-wrap.leaving, .upl-card, .upl-card.out, .upl-card::after { animation: none !important; } }
  @media (prefers-reduced-motion: reduce) {
    .skeleton, .live-ping { animation: none; } .ptab { transition: none; }
    .view-enter > *, .view-enter .stagger > *, .accent-bar, .grow-x, .tab-slider > span.in, .view-enter.slide-r, .view-enter.slide-l { animation: none !important; }
    .fill-on-view { transform: none !important; transition: none !important; }
    .view-enter, .rangebar .slider, .tab-slider { transition: none; }
  }

  /* ---------- light mode: pale accent text set inline (made for the dark theme) gets a deeper shade so it reads on white ---------- */
  html[data-theme="light"] [style^="color: rgb(110, 231, 183)"], html[data-theme="light"] [style*="; color: rgb(110, 231, 183)"] { color: #047857 !important; }
  html[data-theme="light"] [style^="color: rgb(74, 222, 128)"], html[data-theme="light"] [style*="; color: rgb(74, 222, 128)"] { color: #15803d !important; }
  html[data-theme="light"] [style^="color: rgb(165, 180, 252)"], html[data-theme="light"] [style*="; color: rgb(165, 180, 252)"] { color: #4f46e5 !important; }
  html[data-theme="light"] [style^="color: rgb(169, 188, 255)"], html[data-theme="light"] [style*="; color: rgb(169, 188, 255)"] { color: #3f56c4 !important; }
  html[data-theme="light"] [style^="color: rgb(248, 113, 113)"], html[data-theme="light"] [style*="; color: rgb(248, 113, 113)"] { color: #dc2626 !important; }
  html[data-theme="light"] [style^="color: rgb(245, 176, 65)"], html[data-theme="light"] [style*="; color: rgb(245, 176, 65)"] { color: #b45309 !important; }
  html[data-theme="light"] [style^="color: rgb(250, 204, 21)"], html[data-theme="light"] [style*="; color: rgb(250, 204, 21)"] { color: #a16207 !important; }
  html[data-theme="light"] [style^="color: rgb(196, 181, 253)"], html[data-theme="light"] [style*="; color: rgb(196, 181, 253)"] { color: #6d28d9 !important; }
  html[data-theme="light"] [style^="color: rgb(125, 211, 252)"], html[data-theme="light"] [style*="; color: rgb(125, 211, 252)"] { color: #0369a1 !important; }
  html[data-theme="light"] [style^="color: rgb(252, 165, 165)"], html[data-theme="light"] [style*="; color: rgb(252, 165, 165)"] { color: #b91c1c !important; }
  html[data-theme="light"] [style^="color: rgb(147, 197, 253)"], html[data-theme="light"] [style*="; color: rgb(147, 197, 253)"] { color: #1d4ed8 !important; }
  html[data-theme="light"] [style^="color: rgb(216, 180, 254)"], html[data-theme="light"] [style*="; color: rgb(216, 180, 254)"] { color: #7e22ce !important; }
  html[data-theme="light"] [style^="color: rgb(52, 211, 153)"], html[data-theme="light"] [style*="; color: rgb(52, 211, 153)"] { color: #059669 !important; }
  html[data-theme="light"] [style^="color: rgb(251, 191, 36)"], html[data-theme="light"] [style*="; color: rgb(251, 191, 36)"] { color: #b45309 !important; }
  html[data-theme="light"] [style^="color: rgb(244, 114, 168)"], html[data-theme="light"] [style*="; color: rgb(244, 114, 168)"] { color: #be185d !important; }
  html[data-theme="light"] [style^="color: rgb(192, 132, 252)"], html[data-theme="light"] [style*="; color: rgb(192, 132, 252)"] { color: #7e22ce !important; }
  html[data-theme="light"] [style^="color: rgb(169, 180, 208)"], html[data-theme="light"] [style*="; color: rgb(169, 180, 208)"] { color: #475569 !important; }
  html[data-theme="light"] [style^="color: rgb(26, 169, 191)"], html[data-theme="light"] [style*="; color: rgb(26, 169, 191)"] { color: #0e7f91 !important; }
  html[data-theme="light"] [style^="color: rgb(153, 153, 255)"], html[data-theme="light"] [style*="; color: rgb(153, 153, 255)"] { color: #4f46e5 !important; }
  html[data-theme="light"] [style^="color: rgb(251, 113, 133)"], html[data-theme="light"] [style*="; color: rgb(251, 113, 133)"] { color: #e11d48 !important; }
  html[data-theme="light"] [style^="color: rgb(134, 239, 172)"], html[data-theme="light"] [style*="; color: rgb(134, 239, 172)"] { color: #15803d !important; }
  html[data-theme="light"] .text-white:not(.tab-head *):not(.ptab *):not([style*="background"]) { color: var(--text); }
  html[data-theme="light"] input[type="date"], html[data-theme="light"] input[type="time"] { color-scheme: light; }

  /* ---------- panel headers: one height, size and spacing everywhere ---------- */
  .ph { min-height: 2rem; margin-bottom: .875rem; }
  section.panel h2.font-semibold { font-size: .95rem; line-height: 1.35rem; letter-spacing: -.005em; }
  section.panel h2.font-semibold > svg, section.panel h2.font-semibold > span.flex > svg { width: 16px; height: 16px; flex-shrink: 0; }
  section.panel h2.font-semibold > svg { color: var(--muted); }
  section.panel .ph .tab.sm, section.panel .ph .chip { height: 1.75rem; }

  /* ---------- the library: Notes / Drive / Mac files inside one panel ---------- */
  .lib-slider { position: absolute; border-radius: .375rem; background: var(--panel); box-shadow: 0 1px 2px var(--shadow), inset 0 0 0 1px var(--line);
    transition: left .28s cubic-bezier(.2,.8,.2,1), width .28s cubic-bezier(.2,.8,.2,1); }
  .lib-slider.instant { transition: none; }
  html[data-theme="light"] .lib-slider { box-shadow: 0 1px 3px rgba(15,23,42,.14), inset 0 0 0 1px var(--line); }
  .lib-body { animation: lib-in .26s ease both; }
  @keyframes lib-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
  .lib-body > section.panel { background: none; border: 0; box-shadow: none !important; padding: 0; border-radius: 0; }
  .lib-body > section.panel:hover { border-color: transparent; }
  .lib-body > section > .ph > h2 { display: none; }
  .lib-body > section > .ph { min-height: 0; }
  .lib-body > section > .ph:not(:has(> :not(h2))) { display: none; }

  /* ---------- Spotify player pill (fixed to the bottom of the screen) ---------- */
  .spotify-pill { transform: translateX(-50%); background: rgba(24,26,33,.92); border: 1px solid var(--line); color: var(--text);
    backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
    box-shadow: 0 18px 40px -14px rgba(0,0,0,.85), 0 0 0 1px rgba(30,215,96,.06); animation: spot-in .35s cubic-bezier(.2,.8,.2,1) both; max-width: calc(100vw - 2rem); }
  @keyframes spot-in { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translate(-50%, 0); } }
  .spot-btn { color: var(--text); transition: background-color .15s, transform .1s; }
  .spot-btn:hover { background: var(--tint); }
  .spot-btn:active { transform: scale(.92); }
  .spot-play { background: var(--solid); color: var(--on-solid); }
  .spot-play:hover { background: var(--solid); filter: brightness(.92); }
  .spot-art img { display: block; }
  .spin-slow { animation: spot-spin 14s linear infinite; }
  @keyframes spot-spin { to { transform: rotate(360deg); } }
  .spot-track { position: absolute; left: 1.25rem; right: 1.25rem; bottom: 0; height: 2px; background: var(--tint); border-radius: 2px; overflow: hidden; }
  .spot-track > div { height: 100%; background: #1ed760; transition: width 1s linear; }
  html[data-theme="light"] .spotify-pill { background: rgba(255,255,255,.92); box-shadow: 0 16px 36px -14px rgba(15,23,42,.35); }
  html.has-player .undo-bar { bottom: 5.25rem; }
  html.has-player body { padding-bottom: 4.5rem; }
  @media (max-width: 639px) { html.has-player .toast-stack { bottom: 5.25rem; } }
  @media (prefers-reduced-motion: reduce) { .spin-slow, .spotify-pill, .lib-body { animation: none; } }
  @media print { .spotify-pill { display: none !important; } }

.dc-mark { display: inline-block; background: currentColor; -webkit-mask: url(/static/vendor/discord.svg) center / contain no-repeat; mask: url(/static/vendor/discord.svg) center / contain no-repeat; }

/* account cards on All accounts: a soft glow of the account's colour, a tinted icon tile and stat tiles */
.acct-card { position: relative; isolation: isolate; }
.acct-card:hover { border-color: color-mix(in srgb, var(--c) 45%, var(--line)); transform: translateY(-1px); }
.acct-card:hover .acct-open { color: var(--text); transform: translateX(2px); }
.acct-open { transition: transform .2s, color .2s; }
.acct-glow { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 70% at 0% 0%, color-mix(in srgb, var(--c) 16%, transparent), transparent 60%);
  border-top: 2px solid color-mix(in srgb, var(--c) 70%, transparent); border-radius: inherit; }
.acct-icon { width: 2.25rem; height: 2.25rem; border-radius: .7rem; display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--c) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 28%, transparent); }
.acct-stat { background: var(--tint); }
html[data-theme="light"] .acct-glow { background: radial-gradient(120% 70% at 0% 0%, color-mix(in srgb, var(--c) 10%, transparent), transparent 60%); }
@media (prefers-reduced-motion: reduce) { .acct-card:hover { transform: none; } }


.setup-card { background: linear-gradient(100deg, color-mix(in srgb, var(--good) 9%, transparent), transparent 55%), var(--panel); }

.glink { color: inherit; } .glink .glink-arrow { opacity: 0; transition: opacity .15s; } .glink:hover .glink-arrow, .glink:focus-visible .glink-arrow { opacity: 1; }

.qs-busy { animation: qs-pulse 1s ease-in-out infinite; } @keyframes qs-pulse { 50% { opacity: .35; } }

/* the compact periods + totals row inside the pinned tab block: opens once the full period switcher scrolls away */
.sticky-bar { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .25s cubic-bezier(.2,.8,.2,1), opacity .2s; }
.sticky-bar.on { max-height: 48px; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .sticky-bar { transition: none; } }
@media print { .sticky-bar { display: none; } }

.pside-comments > section { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; }