/* ===== High-tech neon skin — shared across all 5 tools (matches login terminals + landing) ===== */
:root{ --mac-r:14px; }

/* neon accent override (wins via !important on the custom property) */
:root, :root[data-theme="light"]{
  --accent:#0aa789 !important; --accent-soft:#dff2ec !important; --glow:rgba(10,167,137,.28) !important;
}
:root[data-theme="dark"], :root:not([data-theme="light"]){
  --accent:#25f0c0 !important; --accent-soft:#0e2a20 !important; --glow:rgba(37,240,192,.30) !important;
}

/* ground: neon radial glows; light = teal-tinted, dark = near-black */
body{
  background:
    radial-gradient(1100px 700px at 12% -8%, rgba(10,167,137,.16), transparent 60%),
    radial-gradient(900px 700px at 100% 0%, rgba(20,161,80,.12), transparent 60%),
    linear-gradient(160deg,#eef4f1,#e6efe9) !important;
  background-attachment:fixed !important;
}
:root[data-theme="dark"] body, :root:not([data-theme="light"]) body{
  background:
    radial-gradient(1100px 700px at 12% -8%, rgba(37,240,192,.16), transparent 60%),
    radial-gradient(900px 720px at 100% 0%, rgba(31,190,200,.12), transparent 60%),
    radial-gradient(1000px 780px at 50% 120%, rgba(37,240,192,.10), transparent 62%),
    linear-gradient(160deg,#080c11,#05080d) !important;
}
/* faint tech grid behind everything */
body::before{
  content:"" !important; display:block !important; position:fixed !important; inset:0 !important;
  z-index:0 !important; pointer-events:none !important; opacity:.5 !important;
  background-image:linear-gradient(rgba(70,140,125,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(70,140,125,.10) 1px,transparent 1px) !important;
  background-size:40px 40px !important;
  -webkit-mask-image:radial-gradient(circle at 50% 28%, #000 0%, transparent 82%);
          mask-image:radial-gradient(circle at 50% 28%, #000 0%, transparent 82%);
}

/* neon-glass surfaces */
.panel, .kpi, .card{
  background:rgba(255,255,255,.62) !important;
  -webkit-backdrop-filter:blur(20px) saturate(160%); backdrop-filter:blur(20px) saturate(160%);
  border:1px solid rgba(10,167,137,.22) !important;
  border-radius:var(--mac-r) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 12px 30px rgba(10,40,32,.12) !important;
}
:root[data-theme="dark"] .panel, :root[data-theme="dark"] .kpi, :root[data-theme="dark"] .card,
:root:not([data-theme="light"]) .panel, :root:not([data-theme="light"]) .kpi, :root:not([data-theme="light"]) .card{
  background:rgba(12,20,28,.60) !important;
  border:1px solid rgba(70,140,125,.26) !important;
  box-shadow:inset 0 1px 0 rgba(37,240,192,.08), 0 14px 40px rgba(0,0,0,.5) !important;
}
.panel:hover{ box-shadow:inset 0 1px 0 rgba(37,240,192,.10), 0 16px 42px rgba(0,0,0,.5), 0 0 30px -14px var(--glow) !important; }

/* sticky translucent top bar */
.top{
  position:sticky; top:10px; z-index:50;
  background:rgba(255,255,255,.6); -webkit-backdrop-filter:blur(18px) saturate(160%); backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(10,167,137,.22); border-radius:14px; box-shadow:0 10px 30px rgba(10,40,32,.12);
  padding:12px 16px !important;
}
:root[data-theme="dark"] .top, :root:not([data-theme="light"]) .top{ background:rgba(10,18,26,.62); border-color:rgba(70,140,125,.26); }

/* segmented-control tabs — active tab glows neon */
.tabs{ background:rgba(70,140,125,.12); border-radius:12px; padding:4px !important; gap:2px; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border:0 !important }
.tab{ border-radius:9px !important; border:0 !important; }
.tab.active,.tab.on,.tab.sel,.tab[aria-selected="true"]{
  background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 65%,#37ff8b)) !important;
  color:#fff !important; box-shadow:0 0 18px -6px var(--glow) !important;
}
:root[data-theme="dark"] .tab.active, :root[data-theme="dark"] .tab.on, :root[data-theme="dark"] .tab.sel,
:root:not([data-theme="light"]) .tab.active, :root:not([data-theme="light"]) .tab.on{ color:#04120e !important; }

/* rounded controls */
input, select, button, .btn, .pill, .tag{ border-radius:10px !important; }
.rev-in{ border-radius:8px !important; }

/* match root background so there is no 2-colour seam below content */
html{ background:#e6efe9 !important; }
:root[data-theme="dark"] html, :root:not([data-theme="light"]) html{ background:#05080d !important; }

.urlcx{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-right:3px;border-radius:5px;cursor:pointer;color:var(--faint);font-size:11px;user-select:none;transition:background .12s,color .12s,transform .12s;vertical-align:middle}
.urlcx:hover{background:var(--surface-2);color:var(--accent)}
.urlcx.open{color:var(--accent);transform:rotate(180deg)}
.acctcx{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-right:3px;border-radius:5px;cursor:pointer;font-size:11px;user-select:none;transition:background .12s,transform .12s;vertical-align:middle;opacity:.65}.acctcx:hover{background:var(--surface-2);opacity:1}.acctcx.open{opacity:1;transform:scale(1.12)}
tr.url-detail>td{background:var(--surface-2);padding:0;border-top:0}
.urld-in{padding:10px 16px 12px 44px}
.urld-empty{color:var(--muted);font-size:13px}
table.urld{width:100%;border-collapse:collapse;font-size:13px}
table.urld th{text-align:left;color:var(--faint);font-weight:700;font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;padding:4px 8px;border-bottom:1px solid var(--border)}
table.urld td{padding:5px 8px;border-bottom:1px solid var(--border)}
table.urld .urld-u{word-break:break-all;color:var(--ink)}
table.urld .num{text-align:right;white-space:nowrap}
table.urld tfoot td{font-weight:700;border-bottom:0;color:var(--muted)}


/* SF-rounded system font */
body{ font-family: ui-rounded,"SF Pro Rounded","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif !important; }


/* vibrancy on tables + rows */
.panel table{ background:transparent !important; }
.panel table thead th{ background:rgba(255,255,255,.55) !important; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); position:sticky; top:0; z-index:2; }
:root[data-theme="dark"] .panel table thead th, :root:not([data-theme="light"]) .panel table thead th{ background:rgba(30,34,44,.62) !important; }
.panel table tbody tr{ transition:background .12s; }
.panel table tbody tr td{ background:transparent !important; }
.panel table tbody tr:hover td{ background:rgba(120,150,255,.10) !important; }
:root[data-theme="dark"] .panel table tbody tr:hover td, :root:not([data-theme="light"]) .panel table tbody tr:hover td{ background:rgba(120,150,255,.14) !important; }



  /* ============================================================
     Ad Arbitrage ROI — visual system
     Dark-first: this runs on a dark desktop all day, so dark is the
     designed state and light is the considered alternate, not an
     afterthought. Every class + custom property name here is load-bearing
     (the JS reads them) — restyled, never renamed.
     ============================================================ */
  :root{
    --bg:#f6f7f9; --surface:#ffffff; --surface-2:#fafbfd; --card:#ffffff;
    --ink:#0d1117; --muted:#59647a; --faint:#8b95a6;
    --border:#e6e9ef; --border-strong:#cfd6e0;
    --accent:#0f7a45; --accent-soft:#e3f4ea;
    --good:#0a9d63; --good-soft:#e3f5ec;
    --bad:#d92d4b;  --bad-soft:#fdeaee;
    --warn:#b8760c; --warn-soft:#fbf2e0;
    --shadow:0 1px 2px rgba(13,17,23,.04), 0 4px 14px rgba(13,17,23,.05);
    --shadow-lift:0 2px 6px rgba(13,17,23,.06), 0 14px 34px rgba(13,17,23,.10);
    --ring:0 0 0 3px rgba(15,122,69,.18);
    --ease:cubic-bezier(.4,0,.2,1);
  }
  @media(prefers-color-scheme:dark){
    :root{
      --bg:#0a0c10; --surface:#12151c; --surface-2:#171b23; --card:#12151c;
      --ink:#e9edf3; --muted:#8b96a5; --faint:#68727f;
      --border:#222936; --border-strong:#333c4b;
      --accent:#35c47c; --accent-soft:#10281d;
      --good:#3ecf8e; --good-soft:#0f2a20;
      --bad:#ff6b85;  --bad-soft:#2e1620;
      --warn:#e8a94b; --warn-soft:#2b2213;
      --shadow:0 1px 2px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.30);
      --shadow-lift:0 2px 8px rgba(0,0,0,.45), 0 18px 44px rgba(0,0,0,.45);
      --ring:0 0 0 3px rgba(53,196,124,.22);
    }
  }

  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%}
  body{
    margin:0; background:var(--bg); color:var(--ink);
    font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
    font-size:15px; line-height:1.5;
    -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
    font-feature-settings:"cv02","cv03","cv04","ss01";
  }
  /* A very soft accent wash at the top — gives the page a horizon instead of
     an abrupt flat field. Sits behind everything, costs nothing. */
  body::before{
    content:""; position:fixed; inset:0 0 auto 0; height:320px; pointer-events:none; z-index:0;
    background:radial-gradient(120% 100% at 50% 0%, var(--accent-soft) 0%, transparent 70%);
    opacity:.7;
  }
  .wrap{position:relative; z-index:1; max-width:1240px; margin:0 auto; padding:24px 22px 72px}
  .num{font-variant-numeric:tabular-nums; font-feature-settings:"tnum"}

  /* The viewer's own choice always wins over the OS preference — in both
     directions, which is why light is redeclared too and not just left to
     the absence of the dark media query. */
  :root[data-theme="light"]{
    --bg:#f6f7f9; --surface:#ffffff; --surface-2:#fafbfd; --card:#ffffff;
    --ink:#0d1117; --muted:#59647a; --faint:#8b95a6;
    --border:#e6e9ef; --border-strong:#cfd6e0;
    --accent:#0f7a45; --accent-soft:#e3f4ea;
    --good:#0a9d63; --good-soft:#e3f5ec;
    --bad:#d92d4b;  --bad-soft:#fdeaee;
    --warn:#b8760c; --warn-soft:#fbf2e0;
    --shadow:0 1px 2px rgba(13,17,23,.04), 0 4px 14px rgba(13,17,23,.05);
    --shadow-lift:0 2px 6px rgba(13,17,23,.06), 0 14px 34px rgba(13,17,23,.10);
    --ring:0 0 0 3px rgba(15,122,69,.18);
  }
  :root[data-theme="dark"]{
    --bg:#0a0c10; --surface:#12151c; --surface-2:#171b23; --card:#12151c;
    --ink:#e9edf3; --muted:#8b96a5; --faint:#68727f;
    --border:#222936; --border-strong:#333c4b;
    --accent:#35c47c; --accent-soft:#10281d;
    --good:#3ecf8e; --good-soft:#0f2a20;
    --bad:#ff6b85;  --bad-soft:#2e1620;
    --warn:#e8a94b; --warn-soft:#2b2213;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.30);
    --shadow-lift:0 2px 8px rgba(0,0,0,.45), 0 18px 44px rgba(0,0,0,.45);
    --ring:0 0 0 3px rgba(53,196,124,.22);
  }
  /* ---------- chart tooltip ---------- */
  .chartip{
    position:fixed; z-index:60; pointer-events:none; opacity:0;
    transform:translate(-50%,-118%) scale(.96);
    transition:opacity .13s var(--ease), transform .16s var(--ease), left .16s var(--ease), top .16s var(--ease);
    background:var(--surface); color:var(--ink);
    border:1px solid var(--border-strong); border-radius:10px;
    box-shadow:var(--shadow-lift); padding:9px 11px;
    font-size:12.5px; line-height:1.45; min-width:118px; max-width:230px;
  }
  .chartip.on{opacity:1; transform:translate(-50%,-128%) scale(1)}
  /* keep the tooltip on screen near the left/right edges of a phone */
  @media(max-width:560px){ .chartip{max-width:min(230px, 76vw)} }
  .chartip .tt{font-weight:700; font-size:11.5px; color:var(--muted);
    text-transform:uppercase; letter-spacing:.05em; margin-bottom:5px}
  .chartip .tr{display:flex; justify-content:space-between; gap:14px; white-space:nowrap}
  .chartip .tr b{font-variant-numeric:tabular-nums; font-weight:700}
  .chartip .sw{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:6px;vertical-align:1px}
  .roi-spin{display:inline-block;width:12px;height:12px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;vertical-align:-2px;margin-right:6px;animation:roispin .6s linear infinite}
  @keyframes roispin{to{transform:rotate(360deg)}}
  /* section loading: blur every child except the centered spinner overlay */
  .pbody.is-loading > *:not(.load-ov){filter:blur(3px);opacity:.55;pointer-events:none;user-select:none;transition:filter .15s ease,opacity .15s ease}
  @media(prefers-reduced-motion:reduce){.pbody.is-loading > *:not(.load-ov){filter:none}}
  /* ROI celebration — tiered, fires when blended Final ROI >= 50% (level scales with ROI) */
  .kpi.hero.roi-win{position:relative;overflow:hidden;box-shadow:0 0 0 1px rgba(22,163,74,.5),0 10px 30px rgba(22,163,74,.22)!important;animation:roiWinPulse 1.9s ease-in-out infinite}
  .kpi.hero.roi-win .k-val{color:var(--good)!important}
  .kpi.hero.roi-win .k-label:after{content:" 🎉";font-size:.85em}
  .kpi.hero.roi-win2 .k-val{text-shadow:0 0 12px color-mix(in srgb,var(--good) 60%,transparent)}
  .kpi.hero.roi-win2 .k-label:after{content:" 🥳"}
  .kpi.hero.roi-win3{transform:scale(1.02)}
  .kpi.hero.roi-win3 .k-val{text-shadow:0 0 22px color-mix(in srgb,var(--good) 85%,transparent)}
  .kpi.hero.roi-win3 .k-label:after{content:" 🚀🔥"}
  @keyframes roiWinPulse{0%,100%{box-shadow:0 0 0 1px rgba(22,163,74,.4),0 8px 22px rgba(22,163,74,.14)}50%{box-shadow:0 0 0 1px rgba(22,163,74,.82),0 14px 40px rgba(22,163,74,.4)}}
  /* diagonal light-sweep across the ROI card on each celebrate */
  .kpi.hero.roi-shine::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 32%,color-mix(in srgb,var(--good) 30%,#fff 12%) 50%,transparent 68%);transform:translateX(-130%);animation:roiShine 1.15s cubic-bezier(.22,.61,.36,1) 1}
  @keyframes roiShine{to{transform:translateX(130%)}}
  /* confetti — rain (low ROI) and cannon (high ROI) share the piece look */
  .roi-cf{position:fixed;top:0;left:0;z-index:9998;pointer-events:none;will-change:transform}
  .roi-cf>i{display:block;will-change:transform,opacity}
  .roi-cf.rain{animation:cfRainX var(--t) linear forwards}
  .roi-cf.rain>i{animation:cfRainY var(--t) linear forwards}
  @keyframes cfRainX{to{transform:translateX(var(--dx))}}
  @keyframes cfRainY{0%{transform:translateY(-8vh) rotate(0)}100%{transform:translateY(110vh) rotate(var(--rot));opacity:.85}}
  .roi-cf.cannon{animation:cfCanX var(--t) cubic-bezier(.15,.5,.5,1) forwards}
  .roi-cf.cannon>i{animation:cfCanY var(--t) cubic-bezier(.2,.5,.55,1) forwards}
  @keyframes cfCanX{to{transform:translateX(var(--dx))}}
  @keyframes cfCanY{0%{transform:translateY(0) rotate(0)}32%{transform:translateY(var(--peak))}100%{transform:translateY(14vh) rotate(var(--rot));opacity:.65}}
  /* firework spark */
  .roi-fw{position:fixed;z-index:9997;width:7px;height:7px;border-radius:50%;pointer-events:none;will-change:transform,opacity;animation:roiFw var(--t) cubic-bezier(.15,.7,.3,1) forwards}
  @keyframes roiFw{0%{transform:translate(0,0) scale(1);opacity:1}70%{opacity:1}100%{transform:translate(var(--tx),var(--ty)) scale(.25);opacity:0}}
  /* celebratory toast */
  .roi-toast{position:fixed;left:50%;top:16px;z-index:10000;background:linear-gradient(135deg,#0f7a45,#16a34a);color:#fff;font-weight:800;font-size:14.5px;letter-spacing:.01em;padding:10px 18px;border-radius:30px;box-shadow:0 12px 34px rgba(22,163,74,.42);pointer-events:none;white-space:nowrap;animation:roiToast 2.9s cubic-bezier(.2,.8,.2,1) forwards}
  @keyframes roiToast{0%{opacity:0;transform:translateX(-50%) translateY(-26px) scale(.9)}12%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}82%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}100%{opacity:0;transform:translateX(-50%) translateY(-14px) scale(.96)}}
  /* soft screen glow flash (top tier only) */
  .roi-flash{position:fixed;inset:0;z-index:9996;pointer-events:none;background:radial-gradient(circle at 50% 32%,color-mix(in srgb,var(--good) 30%,transparent),transparent 62%);animation:roiFlash .9s ease-out forwards}
  @keyframes roiFlash{0%{opacity:0}18%{opacity:.5}100%{opacity:0}}
  .roi-rocket{position:fixed;z-index:9999;font-size:34px;pointer-events:none;will-change:transform,opacity;animation:roiRocket 1.5s cubic-bezier(.3,.1,.2,1) forwards}
  @keyframes roiRocket{0%{transform:translateY(0) rotate(-6deg) scale(.85);opacity:0}12%{opacity:1}100%{transform:translateY(-92vh) rotate(-12deg) scale(1.12);opacity:0}}
  /* #2 growth surge */
  .roi-surge{position:absolute;left:0;right:0;bottom:0;height:0;z-index:1;pointer-events:none;border-radius:inherit;background:linear-gradient(to top,rgba(22,163,74,.30),rgba(22,163,74,.06) 70%,transparent);animation:roiSurge 1.35s cubic-bezier(.25,.9,.3,1) forwards}
  @keyframes roiSurge{0%{height:0;opacity:.2}55%{opacity:.85}100%{height:100%;opacity:0}}
  .roi-arrow{position:absolute;left:50%;bottom:6px;z-index:2;pointer-events:none;font-size:28px;transform:translateX(-50%);animation:roiArrow 1.35s ease-out forwards}
  @keyframes roiArrow{0%{opacity:0;transform:translate(-50%,18px)}30%{opacity:1}100%{opacity:0;transform:translate(-50%,-70px)}}
  /* #3 profit pop */
  .roi-pop{position:fixed;z-index:9998;pointer-events:none;font-weight:800;font-size:26px;color:#16a34a;text-shadow:0 2px 10px rgba(22,163,74,.4);white-space:nowrap;transform:translate(-50%,-50%);animation:roiPop 1.6s cubic-bezier(.2,.8,.2,1) forwards}
  @keyframes roiPop{0%{opacity:0;transform:translate(-50%,10px) scale(.7)}20%{opacity:1;transform:translate(-50%,-6px) scale(1.12)}45%{transform:translate(-50%,-30px) scale(1)}100%{opacity:0;transform:translate(-50%,-92px) scale(1)}}
  /* #1 slot 777 */
  .roi-slot{position:fixed;z-index:9998;pointer-events:none;display:flex;gap:6px;padding:8px 12px;border-radius:12px;background:linear-gradient(135deg,#1b1b1f,#2a2a30);box-shadow:0 10px 26px rgba(0,0,0,.4),inset 0 0 0 2px #f0b90b;transform:translate(-50%,-50%) scale(.6);opacity:0;animation:roiSlotIn .3s ease-out forwards}
  .roi-slot span{width:34px;height:40px;display:flex;align-items:center;justify-content:center;font-size:24px;background:#0d0d10;border-radius:6px}
  .roi-slot.win{animation:roiSlotWin .55s ease-out}
  @keyframes roiSlotIn{to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
  @keyframes roiSlotWin{0%,100%{box-shadow:0 10px 26px rgba(0,0,0,.4),inset 0 0 0 2px #f0b90b}50%{box-shadow:0 10px 32px rgba(240,185,11,.65),inset 0 0 0 3px #ffd23f}}
  /* #6 streak badge */
  .roi-streak{position:fixed;left:50%;top:58px;z-index:10000;pointer-events:none;display:flex;align-items:center;gap:6px;padding:8px 16px;border-radius:30px;background:linear-gradient(135deg,#ff7a18,#e11d48);color:#fff;font-weight:800;font-size:15px;box-shadow:0 10px 24px rgba(225,29,72,.42);transform:translate(-50%,0) scale(.7);opacity:0;animation:roiStreak 2.7s cubic-bezier(.2,1.2,.3,1) forwards}
  @keyframes roiStreak{0%{opacity:0;transform:translate(-50%,10px) scale(.7)}12%{opacity:1;transform:translate(-50%,0) scale(1)}85%{opacity:1;transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,-8px) scale(.95)}}
  /* #4 record trophy */
  .roi-trophy{position:fixed;z-index:9998;pointer-events:none;font-size:58px;text-shadow:0 8px 20px rgba(0,0,0,.3);transform:translate(-50%,-50%) scale(0);animation:roiTrophy 1.6s cubic-bezier(.2,1.5,.3,1) forwards}
  @keyframes roiTrophy{0%{opacity:0;transform:translate(-50%,-50%) scale(0) rotate(-20deg)}40%{opacity:1;transform:translate(-50%,-50%) scale(1.2) rotate(8deg)}60%{transform:translate(-50%,-50%) scale(1) rotate(-4deg)}85%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}100%{opacity:0;transform:translate(-50%,-80%) scale(1.05)}}
  @media (prefers-reduced-motion: reduce){.kpi.hero.roi-win{animation:none}.roi-cf,.roi-fw,.roi-toast,.roi-flash,.roi-rocket,.roi-surge,.roi-arrow,.roi-pop,.roi-slot,.roi-streak,.roi-trophy,.roi-shine::before{display:none}}
  /* chart draw-in wipe on tab reveal */
  @keyframes chartWipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
  .tabc:not([hidden]) canvas{animation:chartWipe .7s cubic-bezier(.22,.61,.36,1) both}
  /* KPI value-change flash */
  @keyframes kflashUp{0%{box-shadow:inset 0 0 0 2px rgba(22,163,74,.6)}100%{box-shadow:inset 0 0 0 2px rgba(22,163,74,0)}}
  @keyframes kflashDown{0%{box-shadow:inset 0 0 0 2px rgba(229,72,77,.6)}100%{box-shadow:inset 0 0 0 2px rgba(229,72,77,0)}}
  .kpi.k-flash-up{animation:kflashUp 1s ease}
  .kpi.k-flash-down{animation:kflashDown 1s ease}
  @media (prefers-reduced-motion: reduce){.tabc:not([hidden]) canvas{animation:none}.kpi.k-flash-up,.kpi.k-flash-down{animation:none}}
  /* loading shimmer skeletons */
  @keyframes skelShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
  .skel{border-radius:6px;background:linear-gradient(90deg,var(--surface-2) 25%,color-mix(in srgb,var(--surface-2) 55%,var(--border-strong)) 37%,var(--surface-2) 63%);background-size:200% 100%;animation:skelShimmer 1.3s ease-in-out infinite}
  /* live pulse dot */
  .livedot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--good);margin-right:5px;vertical-align:middle;position:relative}
  .livedot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--good);animation:livePulse 1.7s ease-out infinite}
  @keyframes livePulse{0%{transform:scale(1);opacity:.55}100%{transform:scale(2.6);opacity:0}}
  /* table row hover accent bar */
  .tabc table tbody tr td:first-child{box-shadow:inset 0 0 0 0 var(--accent);transition:box-shadow .18s var(--ease)}
  .tabc table tbody tr:hover td:first-child{box-shadow:inset 3px 0 0 0 var(--accent)}
  @media (prefers-reduced-motion: reduce){.skel{animation:none}.livedot::after{animation:none}}
  /* daily-goal reached pulse */
  @keyframes goalPop{0%{box-shadow:0 0 0 0 rgba(22,163,74,.55)}70%{box-shadow:0 0 0 10px rgba(22,163,74,0)}100%{box-shadow:0 0 0 0 rgba(22,163,74,0)}}
  #goalpanel.goal-hit{animation:goalPop 1s ease}
  @media (prefers-reduced-motion: reduce){#goalpanel.goal-hit{animation:none}}
  /* top-earning category row — animated accent glow */
  tbody tr.roi-top-row td{background:color-mix(in srgb,var(--good) 7%,transparent)}
  tbody tr.roi-top-row td:first-child{animation:topRowGlow 2.4s ease-in-out infinite}
  @keyframes topRowGlow{0%,100%{box-shadow:inset 3px 0 0 0 var(--good)}50%{box-shadow:inset 3px 0 0 0 var(--good), 0 0 13px -3px color-mix(in srgb,var(--good) 60%,transparent)}}
  @media (prefers-reduced-motion: reduce){tbody tr.roi-top-row td:first-child{animation:none}}
  /* ================= UI polish pass (refine · vibrant · denser) ================= */
  body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
  /* tighter, calmer rhythm */
  .kpis{gap:11px}
  .kpi{padding:13px 15px}
  .pbody{padding:15px 18px}
  /* punchier KPI numbers */
  .kpi .k-val{font-size:22px;letter-spacing:-.025em}
  /* more prominent, vibrant hero ROI tile */
  .kpi.hero{background:linear-gradient(140deg, color-mix(in srgb,var(--accent) 15%, var(--surface)), var(--surface) 72%);border-color:color-mix(in srgb,var(--accent) 42%, var(--border));box-shadow:0 1px 2px rgba(13,17,23,.05), 0 10px 28px color-mix(in srgb,var(--accent) 18%, transparent)}
  .kpi.hero .k-val{font-size:26px}
  .kpi.hero .k-label{color:color-mix(in srgb,var(--accent) 65%, var(--muted))}
  /* consistent accent tick on every panel title */
  .panel-head h2{position:relative;padding-left:12px}
  .panel-head h2::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:15px;border-radius:2px;background:linear-gradient(var(--accent),color-mix(in srgb,var(--accent) 50%,transparent))}
  /* crisper focus rings + refined scrollbar */
  button.act:focus-visible,.btn:focus-visible,.tab:focus-visible,select:focus-visible,input:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 32%, transparent)}
  ::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--border-strong) 82%, var(--accent))}
  /* panels lift a touch cleaner */
  .panel{border-radius:15px}
  .act[disabled]{opacity:.7;cursor:default}
  @media(prefers-reduced-motion:reduce){.roi-spin{animation:none}}
  canvas{touch-action:pan-y}
  @media(prefers-reduced-motion:reduce){.chartip{transition:none}}

  html{color-scheme:light dark}
  :root[data-theme="light"]{color-scheme:light}
  :root[data-theme="dark"]{color-scheme:dark}

  /* Theme switch (styled like the day toggle so the header reads as one family) */
  .themetog{display:inline-flex;background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:3px;gap:2px}
  .thm{
    font:inherit;font-size:12px;font-weight:650;cursor:pointer;border:none;background:transparent;
    color:var(--muted);padding:5px 11px;border-radius:7px;line-height:1.2;
    transition:background .22s var(--ease), color .22s var(--ease), box-shadow .22s var(--ease);
  }
  .thm:hover{color:var(--ink)}
  .thm.on{background:var(--surface);color:var(--accent);box-shadow:var(--shadow)}
  .thm:focus-visible{outline:none;box-shadow:var(--ring)}

  ::selection{background:var(--accent); color:#fff}
  ::-webkit-scrollbar{width:10px;height:10px}
  ::-webkit-scrollbar-track{background:transparent}
  ::-webkit-scrollbar-thumb{background:var(--border-strong); border-radius:99px; border:3px solid var(--bg)}
  ::-webkit-scrollbar-thumb:hover{background:var(--faint)}

  /* ---------------------------------------------------- header */
  header.top{
    display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
    gap:16px; margin-bottom:22px; padding-bottom:2px;
  }
  h1{
    font-size:25px; font-weight:700; letter-spacing:-.025em; margin:0 0 4px;
    background:linear-gradient(180deg, var(--ink), color-mix(in srgb, var(--ink) 74%, var(--muted)));
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .sub{color:var(--muted); font-size:13px; margin:0}
  .live{
    display:inline-flex; align-items:center; gap:6px;
    font-size:11.5px; font-weight:700; letter-spacing:.04em;
    color:var(--good); background:var(--good-soft);
    border:1px solid color-mix(in srgb, var(--good) 25%, transparent);
    padding:4px 11px; border-radius:999px;
  }
  .dot{width:7px;height:7px;border-radius:50%;background:var(--good);animation:ping 2.4s var(--ease) infinite}
  @keyframes ping{
    0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--good) 55%, transparent)}
    70%{box-shadow:0 0 0 7px transparent}
    100%{box-shadow:0 0 0 0 transparent}
  }

  /* ---------------------------------------------------- controls */
  .assume{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-top:10px}
  .field{
    display:flex; align-items:center; gap:7px;
    background:var(--surface); border:1px solid var(--border);
    border-radius:11px; padding:6px 11px; box-shadow:var(--shadow);
    transition:border-color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease);
  }
  .field:hover{border-color:var(--border-strong)}
  .field:focus-within{border-color:var(--accent); box-shadow:var(--ring); transform:translateY(-1px)}
  .field label{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:700}
  .field input{width:58px;border:none;background:transparent;color:var(--ink);font:inherit;font-size:14px;font-weight:650;text-align:right;font-variant-numeric:tabular-nums}
  .field input:focus{outline:none}
  .field .unit{color:var(--faint);font-size:13px}

  .saverow{display:flex;align-items:center;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin-top:12px}
  .saverow button.act,.saverow a.act{padding:7px 15px;font-size:12.5px}
  .saverow .autolbl{margin:0 2px}
  .saverow button.act:disabled{opacity:.4;cursor:default;transform:none;filter:none}
  .saverow a.act{text-decoration:none!important;display:inline-flex;align-items:center;gap:6px;padding:7px 15px;font-size:12.5px;font-weight:600;border:1px solid var(--border-strong);border-radius:10px;background:var(--surface-2);color:var(--ink)!important;cursor:pointer;transition:transform .12s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease),color .2s var(--ease)}
  .saverow a.act:hover{border-color:var(--bad);color:var(--bad)!important;background:var(--bad-soft);transform:translateY(-1px)}
  .saverow a.act:active{transform:translateY(0) scale(.97)}
  .saverow a.act span{display:inline-block;transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
  .saverow a.act:hover span{transform:rotate(180deg) scale(1.12)}
  .autolbl{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);cursor:pointer;user-select:none}
  .autolbl input{accent-color:var(--accent);cursor:pointer;margin:0}

  /* ---------------------------------------------------- day toggle */
  .dayrow{display:flex;align-items:center;gap:13px;flex-wrap:wrap;margin-bottom:16px}
  .dayseg{display:inline-flex;background:var(--surface-2);border:1px solid var(--border);border-radius:11px;padding:3px;gap:3px}
  .dseg{
    font:inherit;font-size:13px;font-weight:650;cursor:pointer;border:none;background:transparent;
    color:var(--muted);padding:6px 16px;border-radius:8px;
    transition:background .22s var(--ease), color .22s var(--ease), box-shadow .22s var(--ease);
  }
  .dseg:hover{color:var(--ink)}
  .dseg.active{background:var(--surface);color:var(--accent);box-shadow:var(--shadow)}
  .daynote{font-size:12.5px;color:var(--faint)}

  /* ---------------------------------------------------- tabs
     Eleven of them now, so the rail scrolls rather than wrapping into an
     untidy second row. The indicator grows from the centre on select. */
  .tabs{
    position:relative;
    display:flex; gap:2px; margin-bottom:22px;
    border-bottom:1px solid var(--border);
    overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none;
    /* fade the trailing edge so it is obvious the rail scrolls; the mask is
       removed once you have scrolled to the end */
    -webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 34px), transparent);
            mask-image:linear-gradient(90deg, #000 calc(100% - 34px), transparent);
    transition:-webkit-mask-image .2s var(--ease), mask-image .2s var(--ease);
  }
  .tabs.at-end{-webkit-mask-image:none; mask-image:none}
  .tabs::-webkit-scrollbar{display:none}
  .tab{
    position:relative; flex:0 0 auto;
    font:inherit; font-size:13.5px; font-weight:650; cursor:pointer;
    background:transparent; border:none; color:var(--muted);
    padding:11px 15px; margin-bottom:-1px; white-space:nowrap;
    transition:color .2s var(--ease);
  }
  .tab::after{
    content:""; position:absolute; left:11px; right:11px; bottom:0; height:2px;
    background:var(--accent); border-radius:2px 2px 0 0;
    transform:scaleX(0); transform-origin:center;
    transition:transform .3s var(--ease);
  }
  .tab:hover{color:var(--ink)}
  .tab:focus-visible{outline:none;color:var(--ink);box-shadow:var(--ring);border-radius:8px}
  .tab.active{color:var(--accent)}
  .tab.active::after{transform:scaleX(1)}
  .tabc[hidden]{display:none}
  /* Panels lay out on a 12-col grid so two can share a row instead of every
     tab being one long column. `.half` opts a panel into a 6-col slot. */
  .tabc:not([hidden]){display:grid;grid-template-columns:repeat(12,1fr);gap:20px;align-items:start}
  .tabc > *{grid-column:span 12;min-width:0}
  .tabc > .panel{margin-bottom:0}
  .tabc > .kpis{margin-bottom:0}
  .tabc > .panel.half{grid-column:span 6}
  @media(max-width:1000px){.tabc > .panel.half{grid-column:span 12}}
  /* Long tables scroll inside their panel rather than stretching the page. */
  .scroll.tall{max-height:clamp(300px,50vh,540px);overflow-y:auto}
  /* medium: enough to read a dozen rows without eating the page */
  .scroll.med{max-height:clamp(220px,32vh,340px);overflow-y:auto}

  /* ---------------------------------------------------- KPIs */
  .kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:22px}
  .kpi{
    position:relative; overflow:hidden;
    background:var(--surface); border:1px solid var(--border);
    border-radius:14px; padding:14px 15px; box-shadow:var(--shadow);
    transition:transform .26s var(--ease), box-shadow .26s var(--ease), border-color .26s var(--ease);
  }
  /* a hairline of accent that wipes across the top on hover */
  .kpi::before{
    content:""; position:absolute; top:0; left:0; right:0; height:2px;
    background:linear-gradient(90deg, transparent, var(--accent), transparent);
    transform:scaleX(0); transition:transform .4s var(--ease);
  }
  .kpi:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift);border-color:var(--border-strong)}
  .kpi:hover::before{transform:scaleX(1)}
  .kpi .k-label{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700;margin-bottom:7px}
  .kpi .k-val{font-size:21px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
  .kpi .k-sub{font-size:11px;color:var(--faint);margin-top:3px}
  /* yesterday-same-time box-in-box */
  .kpi .ky{margin-top:10px;padding:6px 9px;border-radius:10px;background:var(--surface-2);border:1px solid var(--border);display:flex;align-items:center;gap:7px;line-height:1.25}
  .kpi .ky.empty{display:none}
  .kpi .ky .kyl{font-size:9.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--faint);font-weight:700;white-space:nowrap}
  .kpi .ky .kyv{font-size:12.5px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums;margin-left:auto}
  .kpi .ky .kyd{margin-left:auto;font-size:11px;font-weight:800;padding:2px 7px;border-radius:6px;font-variant-numeric:tabular-nums;white-space:nowrap}
  .kpi .ky .kyd.up{color:var(--good);background:var(--good-soft)}
  .kpi .ky .kyd.dn{color:var(--bad);background:var(--bad-soft)}
  .kpi .ky .kyd.fl{color:var(--faint);background:transparent;padding:0}
  .kpi.hero .ky{background:color-mix(in srgb,var(--accent) 7%,var(--surface));border-color:color-mix(in srgb,var(--accent) 18%,var(--border))}
  .kpi.hero{
    background:linear-gradient(150deg, var(--accent-soft), var(--surface) 62%);
    border-color:color-mix(in srgb, var(--accent) 28%, var(--border));
  }
  .kpi.hero .k-val{color:var(--accent)}

  /* ---------------------------------------------------- panels */
  .panel{
    background:var(--surface); border:1px solid var(--border);
    border-radius:16px; box-shadow:var(--shadow); margin-bottom:20px; overflow:hidden;
    transition:box-shadow .28s var(--ease), border-color .28s var(--ease);
  }
  .panel:hover{box-shadow:var(--shadow-lift);border-color:var(--border-strong)}
  .panel-head{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:15px 18px;border-bottom:1px solid var(--border);
    background:linear-gradient(180deg, var(--surface-2), var(--surface));
  }
  .panel-head h2{font-size:14.5px;font-weight:700;letter-spacing:-.008em;margin:0}
  .panel-head .hint{font-size:11.5px;color:var(--faint)}
  .pbody{padding:16px 18px}
  .stat .s-label{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700;margin-bottom:5px}
  .stat .s-val{font-size:21px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}

  /* ---------------------------------------------------- forms */
  textarea{
    width:100%;height:92px;border:1px solid var(--border-strong);border-radius:11px;
    background:var(--bg);color:var(--ink);font:inherit;font-size:13px;padding:11px;resize:vertical;
    transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
  }
  textarea:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring)}
  input[type=number],select{font-variant-numeric:tabular-nums}
  select:focus,input:focus-visible{outline:none}
  .btns{display:flex;gap:9px;align-items:center;margin-top:11px}
  button.act,.btn{
    font:inherit;font-size:13px;font-weight:600;cursor:pointer;border-radius:10px;
    padding:8px 15px;border:1px solid var(--border-strong);
    background:var(--surface-2);color:var(--ink);
    transition:transform .12s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
  }
  button.act:hover,.btn:hover{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent), 0 0 16px color-mix(in srgb, var(--accent) 55%, transparent), 0 6px 18px -6px color-mix(in srgb, var(--accent) 70%, transparent);transform:translateY(-1px)}
  button.act:active,.btn:active{transform:translateY(0) scale(.975)}
  button.act:focus-visible,.btn:focus-visible{box-shadow:var(--ring)}
  button.act.primary,.btn.primary{
    background:linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 84%, #000));
    border-color:transparent;color:#fff;
    box-shadow:0 2px 10px color-mix(in srgb, var(--accent) 34%, transparent);
  }
  button.act.primary:hover,.btn.primary:hover{
    box-shadow:0 0 22px color-mix(in srgb, var(--accent) 62%, transparent), 0 8px 22px -6px color-mix(in srgb, var(--accent) 72%, transparent);
  }

  /* ---------------------------------------------------- tables */
  .scroll{overflow-x:auto}
  table{width:100%;border-collapse:collapse;min-width:760px}
  thead th{
    position:sticky; top:0; z-index:1;
    font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700;
    text-align:right;padding:11px 14px;border-bottom:1px solid var(--border);white-space:nowrap;
    background:var(--surface-2);
  }
  thead th.l{text-align:left}
  tbody td{padding:8px 14px;border-bottom:1px solid var(--border);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
  tbody tr{transition:background .16s var(--ease)}
  tbody tr:hover td{background:var(--surface-2)}
  td.l{text-align:left;font-variant-numeric:normal}
  td.calc{color:var(--muted)}
  tfoot td{padding:13px 14px;border-top:2px solid var(--border-strong);font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
  tfoot td.l{text-align:left}
  /* Inside a capped, scrolling table the totals row pins to the bottom, so the
     summary stays on screen while the days scroll under it. Needs an opaque
     background or the rows would read straight through it. */
  .scroll tfoot td{
    position:sticky; bottom:0; z-index:2;
    background:var(--surface-2);
    box-shadow:0 -1px 0 var(--border-strong);
  }

  .rev-in{
    width:98px;border:1px solid transparent;background:transparent;color:var(--ink);
    font:inherit;font-size:14px;padding:6px 9px;border-radius:8px;text-align:right;
    font-variant-numeric:tabular-nums;
    transition:border-color .16s var(--ease), background .16s var(--ease), box-shadow .16s var(--ease);
  }
  .rev-in:hover{border-color:var(--border)}
  .rev-in:focus{outline:none;border-color:var(--accent);background:var(--bg);box-shadow:var(--ring)}

  .pill{display:inline-flex;font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;font-variant-numeric:tabular-nums;border:1px solid transparent}
  .pill.g{background:var(--good-soft);color:var(--good);border-color:color-mix(in srgb, var(--good) 22%, transparent)}
  .pill.b{background:var(--bad-soft);color:var(--bad);border-color:color-mix(in srgb, var(--bad) 22%, transparent)}
  .pill.w{background:var(--warn-soft);color:var(--warn);border-color:color-mix(in srgb, var(--warn) 22%, transparent)}
  .cc{display:inline-flex;align-items:center;gap:7px}
  .flag{font-size:14px}

  .note{
    font-size:12.5px;color:var(--muted);background:var(--surface-2);
    border:1px solid var(--border);border-left:3px solid var(--warn);
    border-radius:11px;padding:12px 15px;line-height:1.6;
  }

  /* ---------------------------------------------------- logs */
  .logfilters{display:flex;gap:6px;flex-wrap:wrap}
  .logf{
    font:inherit;font-size:11.5px;font-weight:650;cursor:pointer;
    border:1px solid var(--border);background:var(--surface-2);color:var(--muted);
    padding:4px 12px;border-radius:999px;
    transition:background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
  }
  .logf:hover{color:var(--ink);border-color:var(--border-strong)}
  .logf.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
  .logrow td{font-size:12.5px;vertical-align:top}
  .logrow.new{animation:logflash 1.6s var(--ease)}
  @keyframes logflash{0%{background:var(--accent-soft)}100%{background:transparent}}
  .lvl{display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:.06em;padding:3px 8px;border-radius:999px}
  .lvl.info{background:var(--good-soft);color:var(--good)}
  .lvl.warn{background:var(--warn-soft);color:var(--warn)}
  .lvl.error{background:var(--bad-soft);color:var(--bad)}
  .lvl.debug{background:var(--surface-2);color:var(--faint)}
  .logmeta{color:var(--faint);font-size:11.5px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

  /* ---------------------------------------------------- live panels */
  #fxpanel .fxhead{display:flex;align-items:center;gap:10px}
  #fxpanel .fxbadge{
    display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:800;letter-spacing:.06em;
    color:var(--good);background:var(--good-soft);padding:3px 9px;border-radius:999px;
    border:1px solid color-mix(in srgb, var(--good) 25%, transparent);
  }
  #fxpanel .fxdot{width:7px;height:7px;border-radius:50%;background:var(--good);animation:ping 2s var(--ease) infinite}
  #fxpanel #fxnow{font-size:32px;font-weight:750;letter-spacing:-.03em;transition:color .35s var(--ease);font-variant-numeric:tabular-nums}
  #fxpanel #fxnow.up{color:var(--good)}
  #fxpanel #fxnow.down{color:var(--bad)}
  #fxpanel .flash{animation:fxflash 1s var(--ease)}
  @keyframes fxflash{0%{background:var(--accent-soft)}100%{background:transparent}}
  #gapanel .galive{display:inline-flex;align-items:center;gap:6px;color:var(--good);font-weight:650}
  #gapanel .gadot{width:7px;height:7px;border-radius:50%;background:var(--good);animation:ping 2s var(--ease) infinite}
  #gapanel .gabig{font-size:32px;font-weight:750;letter-spacing:-.03em;font-variant-numeric:tabular-nums}

  /* ---------------------------------------------------- motion
     One orchestrated entrance per tab: the panels lift in sequence rather
     than all at once, so the eye is led down the page. */
  @keyframes fadeUp{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
  @keyframes slideDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
  .tabc:not([hidden]) > .kpis{animation:fadeUp .45s var(--ease) both}
  .tabc:not([hidden]) > .panel,
  .tabc:not([hidden]) > .lg-scam{animation:fadeUp .5s var(--ease) both}
  .tabc:not([hidden]) > *:nth-child(2){animation-delay:.05s}
  .tabc:not([hidden]) > *:nth-child(3){animation-delay:.10s}
  .tabc:not([hidden]) > *:nth-child(4){animation-delay:.15s}
  .tabc:not([hidden]) > *:nth-child(5){animation-delay:.20s}
  .tabc:not([hidden]) > *:nth-child(6){animation-delay:.25s}
  .tabc:not([hidden]) > *:nth-child(7){animation-delay:.30s}
  #alertbar{animation:slideDown .45s var(--ease)}

  /* ---- richer motion: hover / entrance / ambient only (never on the live
     refresh cycles, so nothing strobes when a panel re-renders) ---- */
  .tabc:not([hidden]) > *:nth-child(8){animation-delay:.35s}
  .tabc:not([hidden]) > *:nth-child(9){animation-delay:.40s}
  .tabc:not([hidden]) > *:nth-child(10){animation-delay:.45s}

  /* KPI cards: a springier lift, and the number itself rises a hair */
  .kpi{transition:transform .28s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease)}
  .kpi .k-val{transition:transform .3s var(--ease)}
  .kpi:hover{transform:translateY(-5px)}
  .kpi:hover .k-val{transform:translateY(-1px)}

  /* table rows glide slightly on hover */
  tbody tr{transition:background .16s var(--ease), transform .16s var(--ease)}
  tbody tr:hover{transform:translateX(2px)}

  /* primary buttons catch a light sweep on hover */
  button.act.primary,.btn.primary{position:relative;overflow:hidden}
  button.act.primary::after,.btn.primary::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:38%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.30),transparent);transform:skewX(-20deg);pointer-events:none}
  button.act.primary:hover::after,.btn.primary:hover::after{animation:btnsweep .7s var(--ease)}
  @keyframes btnsweep{to{left:130%}}

  /* a panel's header icon gives a gentle tilt when you hover the panel */
  .panel-head .ico{transition:transform .32s cubic-bezier(.34,1.56,.64,1)}
  .panel:hover .panel-head .ico{transform:rotate(-6deg) scale(1.07)}

  /* segmented controls + toggles settle with a little bounce */
  .dseg,.thm,.logf{transition:background .26s cubic-bezier(.34,1.56,.64,1), color .2s var(--ease), box-shadow .26s var(--ease), border-color .2s var(--ease)}

  /* status pills pop a touch on hover */
  .pill{transition:transform .18s var(--ease)}
  .pill:hover{transform:scale(1.07)}

  /* a tab hints its underline on hover before you commit */
  .tab:hover::after{transform:scaleX(.5);opacity:.45}

  /* whole-page smooth scrolling */
  html{scroll-behavior:smooth}

  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation:none!important;transition:none!important}
    .acc:hover,.acc.on{transform:none}
    tbody tr:hover,.kpi:hover,.pill:hover{transform:none}
    html{scroll-behavior:auto}
    .kpi:hover,.panel:hover,.field:focus-within,button.act:hover,.btn:hover{transform:none}
  }

  /* ---------------------------------------------------- responsive */
  /* The page body must never scroll sideways. Wide content (tables, charts)
     scrolls inside its own container instead. */
  html,body{max-width:100%;overflow-x:hidden;scrollbar-gutter:stable}
  .scroll{-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-gutter:stable}

  @media(max-width:1000px){
    .kpis{grid-template-columns:repeat(3,1fr)}
  }

  /* ------- tablet / large phone ------- */
  @media(max-width:760px){
    .wrap{padding:16px 12px 52px}
    header.top{flex-direction:column;align-items:stretch;gap:12px}
    header.top > div:last-child{text-align:left!important}
    header.top > div:last-child > div:first-child{justify-content:flex-start!important}
    .saverow{justify-content:flex-start}
    h1{font-size:20px}
    .sub{font-size:12.5px}
    .panel{border-radius:13px}
    .panel-head{padding:12px 13px;gap:8px}
    .panel-head h2{font-size:13.5px}
    .panel-head .hint{font-size:11px}
    .pbody{padding:13px}
    .tabc:not([hidden]){gap:14px}
  }

  /* ------- phone ------- */
  @media(max-width:560px){
    /* a 150px chart holding 21 points is unreadable on a phone — give it room */
    #rpcchart{height:200px!important}
    #predchart,#trendchart,#fxchart,#gachart{height:110px!important}

    .kpis{grid-template-columns:repeat(2,1fr);gap:9px}
    .kpi{padding:12px 12px;border-radius:12px}
    .kpi .k-val{font-size:18px}
    .kpi .k-label{font-size:9.5px;letter-spacing:.06em}
    .kpi .k-sub{font-size:10.5px}

    /* iOS zooms the whole page when you focus an input under 16px.
       Everything you can type into is bumped to 16px on phones. */
    .field input,textarea,.rev-in,input[type=number],input[type=date],select{font-size:16px}
    .field{padding:5px 9px;border-radius:9px}
    .field input{width:52px}
    textarea{height:104px;padding:10px}

    /* thumb-sized controls */
    .tab{padding:11px 13px;font-size:13px;min-height:44px}
    .dseg,.thm,.logf{min-height:36px}
    button.act,.btn{padding:10px 15px;min-height:42px}

    /* the tab rail keeps its edge-to-edge feel while the page has padding */
    .tabs{margin-left:-12px;margin-right:-12px;padding-left:12px;padding-right:12px;margin-bottom:16px}

    /* tables stay readable by scrolling sideways inside the panel */
    table{min-width:660px}
    thead th{padding:9px 11px;font-size:10px}
    tbody td{padding:8px 11px;font-size:13px}
    tfoot td{padding:11px 11px}
    .scroll.tall{max-height:60vh}
    .scroll.med{max-height:44vh}

    /* stat blocks and KPI rows inside panels wrap instead of squashing */
    .pbody > div[style*="display:flex"]{gap:16px!important}

    #fxpanel #fxnow,#gapanel .gabig{font-size:27px}
    .note{padding:11px 12px;font-size:12px}
    h1{font-size:19px}
    .live{font-size:11px;padding:3px 9px}
  }

  /* ------- small phone ------- */
  @media(max-width:400px){
    .kpis{grid-template-columns:1fr 1fr;gap:8px}
    .kpi .k-val{font-size:17px}
    .assume{gap:7px}
    .field label{font-size:10px}
    .tab{padding:10px 11px}
  }

  /* Landscape phones: the sticky table headers eat too much of a short
     viewport, so give the capped tables more of it back. */
  @media(max-height:520px) and (orientation:landscape){
    .scroll.tall{max-height:70vh}
    .scroll.med{max-height:55vh}
  }
  /* click-to-sort headers (Final Profit / Final ROI) */
  th.sortable{cursor:pointer;user-select:none;white-space:nowrap}
  th.sortable:hover{color:var(--ink)}
  th.sortable .sarr{display:inline-block;width:9px;font-size:9px;color:var(--accent)}
  /* 7-day trend sparkline cell */
  .trendcell{white-space:nowrap;text-align:center}
  .trendcell .spk{cursor:default}
  .trendcell .spk .tip{display:none}   /* data holder only; rendered via the body-level tooltip below */
  /* tooltip lives on <body> so no panel transform / scroll overflow can ever clip it */
  .spk-tip{position:fixed;z-index:99999;left:0;top:0;display:none;pointer-events:none;
    background:var(--surface);color:var(--ink);border:1px solid var(--border-strong);border-radius:9px;
    box-shadow:0 8px 22px rgba(0,0,0,.28);padding:8px 10px;font-size:11.5px;line-height:1.5;white-space:nowrap}
  .spk-tip b{font-variant-numeric:tabular-nums}
  .spk-tip .td{display:flex;justify-content:space-between;gap:14px}
  /* ---- tab-switch entrance: panels stagger-fade up each time a tab opens ---- */
  @media (prefers-reduced-motion:no-preference){
    .tabc:not([hidden]) > .panel,
    .tabc:not([hidden]) > .kpis,
    .tabc:not([hidden]) > section{animation:jxRise .45s cubic-bezier(.2,.7,.2,1) both}
    .tabc:not([hidden]) > *:nth-child(1){animation-delay:.02s}
    .tabc:not([hidden]) > *:nth-child(2){animation-delay:.07s}
    .tabc:not([hidden]) > *:nth-child(3){animation-delay:.12s}
    .tabc:not([hidden]) > *:nth-child(4){animation-delay:.17s}
    .tabc:not([hidden]) > *:nth-child(n+5){animation-delay:.22s}
    @keyframes jxRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
  }
  /* ---- live-refresh pulse: top bar + ring on the LIVE dot ---- */
  .jx-refbar{position:fixed;top:0;left:0;height:3px;width:0;z-index:99999;opacity:0;pointer-events:none;
    background:linear-gradient(90deg,var(--accent),var(--good));box-shadow:0 0 8px var(--accent)}
  .live .dot{position:relative}
  @media (prefers-reduced-motion:no-preference){
    .jx-refbar.go{animation:jxRefBar 1.05s ease}
    @keyframes jxRefBar{0%{width:0;opacity:1}82%{width:100%;opacity:1}100%{width:100%;opacity:0}}
    .live .dot.pulse::after{content:"";position:absolute;left:50%;top:50%;border-radius:50%;
      transform:translate(-50%,-50%);border:2px solid var(--good);animation:jxDotRing .9s ease-out}
    @keyframes jxDotRing{from{width:7px;height:7px;opacity:.75}to{width:26px;height:26px;opacity:0}}
  }
  /* ---- scale simulator ---- */
  #scalepanel .scale-ctl{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
  #scalepanel select{flex:1;min-width:200px;border:1px solid var(--border-strong);border-radius:9px;background:var(--surface);color:var(--ink);font:inherit;font-size:13.5px;padding:8px 11px}
  #scalepanel .scale-sl{display:flex;align-items:center;gap:10px;flex:1;min-width:200px}
  #scalepanel .scale-sl input[type=range]{flex:1;accent-color:var(--accent)}
  #scalepanel .scale-sl b{font-variant-numeric:tabular-nums;color:var(--accent);min-width:48px;text-align:right}
  #scaleout .sc-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:12px}
  @media(max-width:560px){#scaleout .sc-grid{grid-template-columns:1fr}}
  #scaleout .sc-card{border:1px solid var(--border);border-radius:11px;padding:13px 14px;background:var(--surface-2)}
  #scaleout .sc-card .l{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:5px}
  #scaleout .sc-card .v{font-size:18px;font-weight:800;font-variant-numeric:tabular-nums}
  #scaleout .sc-card .d{font-size:12px;color:var(--muted);margin-top:2px}
  #scaleout .sc-hero{border:1px solid var(--border);border-left:4px solid var(--accent);border-radius:11px;padding:13px 15px;font-size:14px;line-height:1.6}
  #scaleout .g{color:var(--good)}#scaleout .b{color:var(--bad)}
  /* ---- "Why today's ROI moved" panel ---- */
  #whybody .g{color:var(--good)}
  #whybody .b{color:var(--bad)}
  .why-verdict{font-size:14px;line-height:1.55;color:var(--ink);background:var(--surface-2);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:10px;padding:11px 13px;margin-bottom:14px}
  .why-hero{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:14px}
  .why-hero .wl{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:3px}
  .why-hero .wv{font-size:26px;font-weight:800;line-height:1}
  .why-hero .wv.g{color:var(--good)}.why-hero .wv.b{color:var(--bad)}
  .why-hero .wsep{font-size:13px;font-weight:700;color:var(--muted)}
  .why-tbl{border:1px solid var(--border);border-radius:10px;overflow:hidden;margin-bottom:14px}
  .why-row{display:grid;grid-template-columns:1fr 84px 84px 96px;align-items:center;padding:9px 12px;border-bottom:1px solid var(--border);font-size:13.5px}
  .why-row:last-child{border-bottom:0}
  .why-row.wh{background:var(--surface-2);font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);font-weight:700}
  .why-row .wn{color:var(--ink);font-weight:600}
  .why-row .wtd,.why-row .wyd{text-align:right;color:var(--ink);font-variant-numeric:tabular-nums}
  .why-row .wyd{color:var(--muted)}
  .why-row .wdl{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
  .wup{font-size:9px}.wdn{font-size:9px}
  .why-fn{border:1px solid var(--border);border-radius:10px;padding:12px;margin-bottom:14px;background:var(--surface-2)}
  .why-fn .wfh,.why-cats .wch{font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);font-weight:700;margin-bottom:8px}
  .why-fn .wfrow{display:flex;justify-content:space-between;align-items:baseline;font-size:13.5px;margin:2px 0}
  .why-fn .wfrow b{font-weight:700}
  .why-fn .wfrow em{font-style:normal;color:var(--muted);font-size:12px;font-weight:600}
  .why-fn .wfbar{height:7px;border-radius:99px;background:var(--border);overflow:hidden;margin:3px 0 9px}
  .why-fn .wfbar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--accent),var(--good))}
  .why-fn .wfnote{font-size:12.5px;color:var(--muted);margin-top:4px;line-height:1.5}
  .why-crow{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:12px;padding:7px 2px;border-bottom:1px dashed var(--border);font-size:13.5px}
  .why-crow:last-child{border-bottom:0}
  .why-crow .wc{font-weight:600;color:var(--ink)}
  .why-crow .wcd{color:var(--muted);font-size:12.5px;font-variant-numeric:tabular-nums}
  .why-crow .wci{font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
  /* attribution waterfall */
  .why-attr{border:1px solid var(--border);border-radius:10px;padding:12px;margin-bottom:14px}
  .why-attr .wah{font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);font-weight:700;margin-bottom:9px}
  .why-attr .warow{display:grid;grid-template-columns:150px 1fr 70px;align-items:center;gap:10px;margin:5px 0;font-size:13px}
  .why-attr .wal{color:var(--ink);font-weight:600}
  .why-attr .watrack{position:relative;height:14px;background:var(--surface-2);border-radius:4px;overflow:hidden}
  .why-attr .watrack:before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--border-strong)}
  .why-attr .wabar{position:absolute;top:2px;height:10px;border-radius:3px}
  .why-attr .wabar.g{background:var(--good)}.why-attr .wabar.b{background:var(--bad)}
  .why-attr .wav{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
  .why-attr .warow.tot{border-top:1px solid var(--border);margin-top:8px;padding-top:8px;font-weight:800}
  /* full parameter table */
  .wp-tbl{border:1px solid var(--border);border-radius:10px;overflow:hidden;margin-bottom:14px}
  .wp-row{display:grid;grid-template-columns:1.5fr .9fr .9fr .9fr 1fr;align-items:center;padding:8px 12px;border-bottom:1px solid var(--border);font-size:13px}
  .wp-row:last-child{border-bottom:0}
  .wp-row.h{background:var(--surface-2);font-size:10.5px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);font-weight:700}
  .wp-row.sec{background:var(--surface-2);grid-template-columns:1fr;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--accent);font-weight:800;padding:6px 12px}
  .wp-row .pn{color:var(--ink);font-weight:600}
  .wp-row .pt,.wp-row .py,.wp-row .pa{text-align:right;font-variant-numeric:tabular-nums}
  .wp-row .pt{color:var(--ink);font-weight:600}
  .wp-row .py,.wp-row .pa{color:var(--muted)}
  .wp-row .pd{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
  .wp-row .pd.g{color:var(--good)}.wp-row .pd.b{color:var(--bad)}.wp-row .pd.n{color:var(--muted)}
  @media(max-width:560px){
    .why-row{grid-template-columns:1fr 64px 64px 80px;font-size:12.5px}
    .wp-row{grid-template-columns:1.4fr .8fr .8fr .9fr;font-size:12px}
    .wp-row .pa{display:none}
    .why-attr .warow{grid-template-columns:110px 1fr 58px}
  }

.flag .fi{width:1.25em;height:0.95em;border-radius:2px;vertical-align:-2px;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
        .themebtn{width:38px;height:38px;border-radius:10px;border:1px solid var(--border,rgba(128,128,128,.35));background:var(--surface,var(--bg));color:var(--ink);cursor:pointer;display:grid;place-items:center;transition:border-color .15s,transform .15s}.themebtn:hover{border-color:var(--accent);transform:translateY(-1px)}.themebtn:active{transform:scale(.92)}.themebtn svg{width:19px;height:19px}

.top{position:relative;z-index:40}
      .tsw{position:relative;display:inline-block}
.tswb{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border-strong);background:var(--surface);color:var(--ink);font:inherit;font-size:12.5px;font-weight:600;padding:8px 12px;border-radius:9px;cursor:pointer;transition:border-color .15s,color .15s}
.tswb:hover{border-color:var(--accent);color:var(--accent)} .tswb svg{width:15px;height:15px}
.tswmenu{position:absolute;right:0;top:calc(100% + 8px);min-width:220px;background:var(--card);border:1px solid var(--border-strong);border-radius:12px;box-shadow:0 18px 46px rgba(0,0,0,.32);padding:6px;z-index:70;display:none;text-align:left}
.tswmenu.on{display:block;animation:tswIn .15s ease both}
@keyframes tswIn{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
.tswt{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);padding:6px 10px 4px}
.tswmenu a{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:8px;color:var(--ink);text-decoration:none;font-size:13.5px;font-weight:600;transition:background .12s}
.tswmenu a:hover{background:var(--surface-2)} .tswmenu a .em{font-size:16px;width:22px;text-align:center}
.tswmenu a.cur{color:var(--accent)} .tswmenu a.cur::after{content:"●";margin-left:auto;font-size:9px}