/* ===========================================================================
   TradeJournal — shared visual polish (TradeZella-inspired)
   Layered over each page's inline <style>, linked last so these rules win.
   Goal: soft rounded cards, gentle depth, friendly accent tiles, calm palette.
   =========================================================================== */

:root{
  --radius:18px;
  --radius-sm:12px;
  --shadow:0 6px 24px rgba(20,18,12,.24);
  --shadow-sm:0 2px 10px rgba(20,18,12,.16);
  /* warm, human palette — sage-teal + terracotta, away from the cold AI-blue.
     Feels calm and editorial; the trader is in control. */
  --grad:linear-gradient(135deg,#3f9e8f 0%,#e08a5b 100%);
  --grad-soft:linear-gradient(135deg,rgba(63,158,143,.15),rgba(224,138,91,.10));
  --good:#4bab86 !important;   /* soft eucalyptus green — calm, not neon */
  --bad:#e08770 !important;    /* warm clay/rose — gentle, not alarming */
  --accent:#4a9d8e !important; /* muted teal */
  --accent2:#e6a074 !important;/* soft apricot */
  --warn:#e0b25c !important;   /* warm honey */
}
/* warm dark canvas (was cold near-black #080a0f) */
html:not([data-theme=light]) body{
  --bg:#14120f !important; --fg:#f3efe7 !important; --mut:#a39b8c !important;
  --line:rgba(160,148,128,.16) !important;
  background-color:#14120f !important;
  background-image:
    radial-gradient(1000px 560px at 8% -10%,rgba(63,158,143,.14),transparent 55%),
    radial-gradient(820px 520px at 100% 0%,rgba(224,138,91,.10),transparent 55%) !important;
}
html:not([data-theme=light]) .card{background:rgba(30,27,22,.9) !important;border-color:rgba(160,148,128,.14) !important}
html:not([data-theme=light]) header{background:rgba(20,18,15,.9) !important}

/* Instrument Serif for big display headings — the editorial, premium touch */
h1,.serif{font-family:'Instrument Serif','Space Grotesk',Georgia,serif !important;letter-spacing:0}

html{scroll-behavior:smooth}
/* warm, human type system — Plus Jakarta Sans body, Fraunces serif for TEXT headings only,
   Plus Jakarta Sans (bold, tabular figures) for NUMBERS. Mapped here (theme.css loads last). */
body,input,select,textarea,button{font-family:'Plus Jakarta Sans','Inter',system-ui,sans-serif !important}
/* Fraunces only for text headings & the logo — gives warmth without hurting number legibility */
h1,h2,h3,.logo,.tcard-sym .s1,#streaktitle,#calLabel{
  font-family:'Fraunces','Space Grotesk',Georgia,serif !important;letter-spacing:-.2px}
/* NUMBERS in a crisp sans with tabular figures — reads far better than the serif for digits */
.hero-tile .hv,.stat .v,.stat .n,.kpi .v,.tcard-pnl,.mono{
  font-family:'Plus Jakarta Sans',system-ui,sans-serif !important;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1,"ss01" 1;font-weight:800;letter-spacing:-.4px}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace !important;font-weight:600}
/* keep tabs/labels/small UI in the clean sans */
.tab,.l,.hl,th{font-family:'Plus Jakarta Sans',sans-serif !important}
body{
  letter-spacing:.1px;
  font-size:15.5px;line-height:1.62;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  background-image:
    radial-gradient(1000px 560px at 8% -10%,rgba(109,139,255,.16),transparent 55%),
    radial-gradient(820px 520px at 100% 0%,rgba(165,107,255,.12),transparent 55%);
  background-attachment:fixed;   /* keep the glow still while scrolling → less repaint */
}

/* tabular monospace for numbers — pro fund-report feel (like Nexus) */
.mono{font-family:'IBM Plex Mono','SF Mono',ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums;letter-spacing:-.2px}

/* trade cards (journal card view) — each entry as its own Nexus-style card */
.tradecards{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px}
.tcard{border:1px solid var(--line);border-radius:16px;padding:15px 16px;background:linear-gradient(155deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  position:relative;overflow:hidden;transition:transform .16s,box-shadow .16s,border-color .16s}
.tcard:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:rgba(120,150,255,.3)}
.tcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px}
.tcard.win::before{background:linear-gradient(180deg,#34d399,#059669)}
.tcard.loss::before{background:linear-gradient(180deg,#ff5c7a,#e11d48)}
.tcard.carry::before{background:linear-gradient(180deg,#ffd76b,#f99c00)}
.tcard-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.tcard-sym{display:flex;align-items:center;gap:9px}
.tcard-sym .av{width:34px;height:34px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.3)}
.tcard-sym .s1{font-family:'Space Grotesk';font-weight:700;font-size:15px}
.tcard-sym .s2{font-size:11px}
.tcard-pnl{font-family:'Space Grotesk';font-weight:700;font-size:19px;font-variant-numeric:tabular-nums}
.tcard-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 8px}
.tcard-grid .k{font-size:9.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--mut)}
.tcard-grid .v{font-size:13px;font-weight:600;margin-top:1px}
.tcard-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
.tcard-tags .tg{font-size:11px;color:var(--mut);background:rgba(120,150,255,.1);border-radius:7px;padding:3px 8px}
html[data-theme=light] .tcard{background:#fff}

/* hero KPI row — a few big headline metrics above the detail grid */
.herogrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:16px}
.hero-tile{position:relative;overflow:hidden;border-radius:var(--radius);padding:18px 20px;
  border:1px solid var(--line);background:linear-gradient(150deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  box-shadow:var(--shadow-sm);transition:transform .18s,box-shadow .18s}
.hero-tile:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.hero-tile .ic{font-size:20px;opacity:.9}
.hero-tile .hv{font-family:'Space Grotesk';font-size:30px;font-weight:700;letter-spacing:-.8px;margin-top:8px;font-variant-numeric:tabular-nums;line-height:1}
.hero-tile .hl{font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:.05em;margin-top:6px}
.hero-tile .hs{font-size:11px;color:var(--mut);margin-top:2px}
.hero-tile::after{content:"";position:absolute;right:-30px;top:-30px;width:110px;height:110px;border-radius:50%;
  background:radial-gradient(circle,var(--tint,rgba(109,139,255,.22)),transparent 70%);pointer-events:none}
.hero-tile.pos{--tint:rgba(16,185,129,.25)}
.hero-tile.neg{--tint:rgba(255,35,87,.22)}
.hero-tile.neu{--tint:rgba(48,128,255,.22)}
html[data-theme=light] .hero-tile{background:#fff}

/* symbol badge — a coloured avatar with the ticker's initials (Nexus-style) */
.symbadge{display:inline-flex;align-items:center;gap:8px;font-weight:600}
.symbadge .av{width:26px;height:26px;border-radius:8px;flex:none;display:inline-flex;align-items:center;
  justify-content:center;font-size:10px;font-weight:800;color:#fff;letter-spacing:-.3px;
  box-shadow:0 2px 6px rgba(0,0,0,.25)}
/* logo <img> avatars sit on a clean white tile so any logo reads well in both themes */
img.av{object-fit:contain;background:#fff;padding:3px}
/* ticker + full company name stacked beside the avatar */
.symbadge .symtxt{display:inline-flex;flex-direction:column;line-height:1.15;min-width:0}
.symbadge .symtk{font-weight:700;font-size:13px}
.symbadge .coname{font-size:10.5px;font-weight:500;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.symbadge .coname:empty{display:none}

/* checkbox multi-select popover (setup / exit reason) */
.cbpop{position:absolute;z-index:400;min-width:240px;max-width:300px;background:var(--card,#1e1b16);
  border:1px solid var(--line);border-radius:12px;padding:12px;box-shadow:0 16px 44px rgba(10,8,4,.45)}
.cbpop .cbhd{font-weight:700;font-size:12px;margin-bottom:8px;color:var(--mut);text-transform:uppercase;letter-spacing:.04em}
.cbpop .cbopts{max-height:220px;overflow-y:auto;display:flex;flex-direction:column;gap:2px}
.cbopt{display:flex;align-items:center;gap:8px;font-size:13px;padding:5px 7px;border-radius:7px;cursor:pointer}
.cbopt:hover{background:var(--grad-soft)}
.cbopt input{width:auto;accent-color:var(--accent)}
.cbadd{display:flex;gap:6px;margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}

/* inline-editable cells (double-click) */
.ecell{cursor:cell;position:relative;transition:background .12s}
.ecell:hover{background:var(--grad-soft)}
.ecell:hover::after{content:"✎";position:absolute;top:2px;right:3px;font-size:9px;opacity:.5}
.ecell.editing{background:var(--grad-soft);padding:2px 4px}
.cellinput{width:100%;min-width:60px;background:var(--card,#1e1b16);border:1.5px solid var(--accent);
  border-radius:6px;color:var(--fg);padding:4px 6px;font:inherit;font-size:13px}

/* 2-up responsive chart grid (curves, etc.) */
.chartgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:16px}
.chartgrid .card{margin-bottom:0}

/* keyboard shortcut keys */
kbd{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:11px;padding:1px 6px;border-radius:5px;
  background:var(--grad-soft);border:1px solid var(--line);box-shadow:0 1px 0 var(--line);color:var(--fg)}

/* sortable table headers */
th.sortable{cursor:pointer;user-select:none;transition:color .15s}
th.sortable:hover{color:var(--accent)}
th.sortable.sorted{color:var(--accent)}
th.sortable::after{content:attr(data-arrow);font-size:9px}

/* appearance settings — accent swatches */
.sw.on{border-color:var(--fg) !important;box-shadow:0 0 0 3px var(--grad-soft)}
.sw:hover{transform:scale(1.08)}
.sw{transition:transform .12s}

/* hover preview popover for trades */
.hovpop{position:fixed;z-index:300;display:none;pointer-events:none;
  background:var(--card,#1e1b16);border:1px solid var(--line);border-radius:14px;
  padding:14px 16px;box-shadow:0 16px 44px rgba(10,8,4,.45);max-width:280px;
  animation:tj-pop .12s ease both}
@keyframes tj-pop{from{opacity:0;transform:translateY(4px) scale(.98)}to{opacity:1;transform:none}}
html[data-theme=light] .hovpop{background:#fffdf9;box-shadow:0 16px 44px rgba(40,30,15,.16)}

/* ---- header / nav ---------------------------------------------------- */
header{backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.logo{font-size:17px;letter-spacing:-.2px}
nav a{position:relative;padding:5px 2px;transition:color .18s}
nav a:hover{color:var(--fg)}
nav a.on{color:var(--fg)}
nav a.on::after{content:"";position:absolute;left:0;right:0;bottom:-13px;height:2.5px;
  background:var(--grad);border-radius:3px}

/* ===========================================================================
   LEFT SIDEBAR NAV (≥900px) — TraderWaves-style docked rail, CSS-only so it
   works across every page without touching their HTML. Below 900px it falls
   back to the original sticky top bar.
   =========================================================================== */
/* app pages have a plain <nav>; the landing page uses <nav class="nav"> and is excluded */
@media (min-width:900px){
  body:has(header nav:not(.nav)) header{
    position:fixed;top:0;left:0;bottom:0;width:216px;z-index:40;
    flex-direction:column;align-items:stretch;gap:6px;
    padding:20px 14px;border-bottom:none;border-right:1px solid var(--line);
    overflow-y:auto;
  }
  body:has(header nav:not(.nav)) header .logo{font-size:19px;padding:4px 10px 14px;margin-bottom:4px;border-bottom:1px solid var(--line)}
  body:has(header nav:not(.nav)) header nav{flex-direction:column;flex-wrap:nowrap;gap:3px;width:100%}
  body:has(header nav:not(.nav)) header nav a{
    padding:10px 12px;border-radius:10px;font-size:14px;color:var(--mut);
    transition:background .16s,color .16s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  body:has(header nav:not(.nav)) header nav a:hover{background:rgba(120,150,255,.08);color:var(--fg)}
  body:has(header nav:not(.nav)) header nav a.on{background:var(--grad-soft);color:var(--fg);font-weight:700}
  body:has(header nav:not(.nav)) header nav a.on::after{display:none}
  body:has(header nav:not(.nav)) header .right{margin-left:0;margin-top:auto;flex-direction:column;align-items:stretch;gap:8px;
    padding-top:14px;border-top:1px solid var(--line);width:100%}
  body:has(header nav:not(.nav)) header .right .btn{text-align:center}
  body:has(header nav:not(.nav)) main{margin-left:216px !important}
}

/* ---- cards — soft glass panels with a subtle top highlight ----------- */
.card{
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  transition:box-shadow .25s,transform .25s,border-color .25s;
  position:relative;
  padding:20px 22px;
  overflow:hidden;
}
/* faint gradient sheen along the top edge — reads as "premium glass" */
.card::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent);pointer-events:none}
.card:hover{box-shadow:var(--shadow);transform:translateY(-2px);border-color:rgba(120,150,255,.28)}
h2{letter-spacing:-.2px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}

/* ---- stat / kpi tiles — sophisticated, with a corner glow ------------ */
.stat,.kpi{
  border-radius:var(--radius-sm);
  background:
    radial-gradient(120% 100% at 100% 0%,rgba(109,139,255,.14),transparent 60%),
    linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.015)) !important;
  border:1px solid var(--line);
  transition:transform .18s cubic-bezier(.22,1,.36,1),box-shadow .18s,border-color .18s;
  position:relative;overflow:hidden;
}
.stat:hover,.kpi:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:rgba(120,150,255,.3)}
.stat::before,.kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--grad);opacity:.8;border-radius:3px}
.stat .v,.stat .n,.kpi .v{letter-spacing:-.5px;font-size:24px;font-variant-numeric:tabular-nums}
.stat .l,.kpi .l{opacity:.8;font-size:10.5px}
/* colour the accent stripe + a matching corner glow by value polarity */
.stat:has(.good)::before,.kpi:has(.good)::before{background:linear-gradient(180deg,#34d399,#059669)}
.stat:has(.bad)::before,.kpi:has(.bad)::before{background:linear-gradient(180deg,#ff5c7a,#e11d48)}
.stat:has(.warn)::before,.kpi:has(.warn)::before{background:linear-gradient(180deg,#ffd76b,#f99c00)}
.stat:has(.good),.kpi:has(.good){background:
  radial-gradient(120% 100% at 100% 0%,rgba(16,185,129,.16),transparent 60%),
  linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.015)) !important}
.stat:has(.bad),.kpi:has(.bad){background:
  radial-gradient(120% 100% at 100% 0%,rgba(255,35,87,.14),transparent 60%),
  linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.015)) !important}
.stat:has(.warn),.kpi:has(.warn){background:
  radial-gradient(120% 100% at 100% 0%,rgba(249,156,0,.14),transparent 60%),
  linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.015)) !important}

/* ---- tabs / pills ---------------------------------------------------- */
/* base layout for the tab bar — defined here so pages without inline .tabs CSS
   (e.g. Insights) still render the tabs in a horizontal, scrollable row. */
.tabs{display:flex;flex-wrap:nowrap;gap:6px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;padding-bottom:2px}
.tabs::-webkit-scrollbar{height:5px}
.tabs::-webkit-scrollbar-thumb{background:rgba(140,155,190,.3);border-radius:3px}
.tab{flex:0 0 auto;white-space:nowrap;border-radius:999px;transition:all .18s;padding:8px 16px;
  font-size:13px;font-weight:600;cursor:pointer;color:var(--mut);
  background:rgba(140,155,190,.08);border:1px solid var(--line);font-family:'Space Grotesk',sans-serif}
.tab:hover{color:var(--fg);border-color:rgba(120,150,255,.4)}
.tab.on{box-shadow:0 2px 12px rgba(109,139,255,.28)}

/* ---- buttons --------------------------------------------------------- */
.btn{border-radius:10px;transition:transform .12s,background .18s,box-shadow .18s}
.btn:hover{transform:translateY(-1px)}
.btn.primary{box-shadow:0 4px 16px rgba(109,139,255,.35);background:var(--grad)}
.btn.primary:hover{box-shadow:0 6px 22px rgba(109,139,255,.5)}

/* ---- skeleton loading (show structure instantly while data loads) ---- */
.skel{position:relative;overflow:hidden;background:rgba(140,155,190,.1);border-radius:8px}
.skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(180,195,225,.14),transparent);animation:tj-shimmer 1.2s infinite}
@keyframes tj-shimmer{100%{transform:translateX(100%)}}
.skel-row{height:14px;margin:8px 0;border-radius:6px}
.skel-tile{height:78px;border-radius:12px}
html[data-theme=light] .skel{background:rgba(60,75,105,.08)}

/* ---- tables ---------------------------------------------------------- */
table{border-collapse:separate;border-spacing:0}
th{font-size:10.5px;letter-spacing:.06em;padding-top:10px;padding-bottom:10px}
tbody tr{transition:background .14s}
tbody tr:hover td{background:rgba(120,150,255,.06)}
/* the journal trades table highlights the CELL, not the row (it's cell-editable) */
#tb tr:hover td{background:transparent}
#tb td.ecell:hover{background:var(--grad-soft)}
td,th{border-bottom:1px solid var(--line)}
tbody tr:last-child td{border-bottom:none}

/* ---- chips / badges -------------------------------------------------- */
.chip{border-radius:999px;padding:3px 10px;font-weight:600}

/* ---- inputs ---------------------------------------------------------- */
input,select{border-radius:10px;transition:border-color .16s,box-shadow .16s}
input:focus,select:focus{outline:none;border-color:rgba(120,150,255,.6);
  box-shadow:0 0 0 3px rgba(109,139,255,.15)}

/* ---- bar rows (analytics) ------------------------------------------- */
.bar-track{border-radius:7px !important;height:17px !important}
.bar-fill{transition:width .5s cubic-bezier(.22,1,.36,1)}

/* ---- theme toggle ---------------------------------------------------- */
.themebtn{border-radius:10px;transition:transform .16s}
.themebtn:hover{transform:rotate(-12deg) scale(1.08)}

/* ---- light theme ----------------------------------------------------- */
/* Force the full variable set for light mode at the root so EVERY `var(--x)` usage flips,
   regardless of what each page's inline <style> hard-codes. This is the single source of truth. */
html[data-theme=light]{
  --bg:#faf7f1 !important; --fg:#2a2620 !important; --mut:#7a7264 !important;
  --line:rgba(120,108,88,.18) !important; --card:#fffdf9 !important;
  --good:#2f9370 !important; --bad:#cf6a4f !important; --accent:#358577 !important;
  --accent2:#d1824f !important; --warn:#c2912f !important;
}
html[data-theme=light] body{color:#2a2620;background-color:#faf7f1;
  background-image:
    radial-gradient(1000px 560px at 8% -10%,rgba(63,158,143,.10),transparent 55%),
    radial-gradient(820px 520px at 100% 0%,rgba(224,138,91,.08),transparent 55%),
    radial-gradient(820px 520px at 100% 0%,rgba(165,107,255,.09),transparent 55%) !important;
}
html[data-theme=light] .card{background:#fff;box-shadow:0 4px 20px rgba(30,42,80,.06);border-color:rgba(60,75,105,.1)}
html[data-theme=light] .card::before{background:linear-gradient(90deg,transparent,rgba(60,75,105,.1),transparent)}
html[data-theme=light] .stat,html[data-theme=light] .kpi{
  background:radial-gradient(120% 100% at 100% 0%,rgba(48,128,255,.08),transparent 60%),#f7f9fc !important}
html[data-theme=light] .stat:has(.good),html[data-theme=light] .kpi:has(.good){background:radial-gradient(120% 100% at 100% 0%,rgba(16,185,129,.12),transparent 60%),#f4fbf8 !important}
html[data-theme=light] .stat:has(.bad),html[data-theme=light] .kpi:has(.bad){background:radial-gradient(120% 100% at 100% 0%,rgba(255,35,87,.1),transparent 60%),#fdf5f7 !important}
html[data-theme=light] .stat:has(.warn),html[data-theme=light] .kpi:has(.warn){background:radial-gradient(120% 100% at 100% 0%,rgba(249,156,0,.12),transparent 60%),#fdfaf3 !important}
html[data-theme=light] tbody tr:hover td{background:rgba(48,128,255,.05)}
/* readability fixes for light mode (dark pages hard-code a few light-on-dark colours) */
html[data-theme=light] header{border-color:rgba(60,75,105,.14)}
html[data-theme=light] th{color:#3c4658 !important}
html[data-theme=light] .modal .inner{background:#fff !important;color:#141a24}
html[data-theme=light] .tab{background:#eef1f7;color:#5a6472}
html[data-theme=light] nav a{color:#5a6472}
html[data-theme=light] .themebtn{background:#eef1f7;color:#141a24;border-color:rgba(60,75,105,.2)}
/* buttons: ensure the plain .btn is dark-on-light (dark theme made it light-on-dark) */
html[data-theme=light] .btn{background:#eef1f7;color:#141a24;border-color:rgba(60,75,105,.22)}
html[data-theme=light] .btn:hover{background:#e2e8f4}
html[data-theme=light] .btn.primary{color:#fff}      /* primary keeps its gradient + white text */
html[data-theme=light] input,html[data-theme=light] select,html[data-theme=light] textarea{
  background:#fff;color:#141a24;border-color:rgba(60,75,105,.22)}
html[data-theme=light] .logo{color:#141a24}
html[data-theme=light] .tab.on{color:#fff}           /* active tab has gradient bg → keep white */
html[data-theme=light] .right{color:#5a6472}
/* header/sidebar surface (pages hard-code a near-black bar) */
html[data-theme=light] header{background:rgba(255,255,255,.92) !important;border-color:rgba(60,75,105,.12)}
html[data-theme=light] .logo .dot{color:var(--accent)}
/* banners/notes that used translucent-white-on-dark now need a light tint */
html[data-theme=light] .banner{background:rgba(37,99,235,.07);border-color:rgba(37,99,235,.22)}
html[data-theme=light] .note{background:rgba(217,119,6,.08);border-color:rgba(217,119,6,.25);color:#8a5a1a}
html[data-theme=light] .tab:not(.on){background:#eef1f7;color:#5a6472;border-color:rgba(60,75,105,.16)}
html[data-theme=light] .chip.win{background:rgba(5,150,105,.14);color:#059669}
html[data-theme=light] .chip.loss{background:rgba(225,29,72,.12);color:#e11d48}
html[data-theme=light] .chip.ok{background:rgba(5,150,105,.14);color:#059669}
html[data-theme=light] .chip.no{background:rgba(217,119,6,.14);color:#b45309}
/* file inputs / misc text that inherited light-on-dark */
html[data-theme=light] .themebtn{color:#141a24}
@media (min-width:900px){
  html[data-theme=light] body:has(header nav:not(.nav)) header nav a.on{color:#141a24}
  html[data-theme=light] body:has(header nav:not(.nav)) header nav a:hover{background:rgba(37,99,235,.08)}
}

/* ---- entrance animation --------------------------------------------- */
@keyframes tj-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
main>.card,main>*>.card{animation:tj-rise .35s ease both}
main>.card:nth-child(2){animation-delay:.04s}
main>.card:nth-child(3){animation-delay:.08s}
main>.card:nth-child(4){animation-delay:.12s}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}

/* ===========================================================================
   BUTTON CONTRAST — final word (placed last so it wins over any page's inline
   styles). Guarantees every button is legible in BOTH themes.
   =========================================================================== */
/* dark mode: solid readable secondary buttons */
.btn{background:rgba(255,255,255,.09);color:#eef1f6;border:1px solid rgba(140,160,200,.35)}
.btn:hover{background:rgba(255,255,255,.16)}
/* primary = gradient + white text, always high-contrast in both themes */
.btn.primary,.btn.primary:hover{background:linear-gradient(135deg,#5b8dff,#a56bff);color:#fff !important;border:none}
/* light mode overrides */
html[data-theme=light] .btn{background:#eaeef6;color:#1e2637;border-color:rgba(60,75,105,.28)}
html[data-theme=light] .btn:hover{background:#dde4f1}
html[data-theme=light] .btn.primary,html[data-theme=light] .btn.primary:hover{
  background:linear-gradient(135deg,#3b6fe0,#7c3aed);color:#fff !important}
/* active pill/tab: gradient bg + white text in both themes */
.tab.on,html[data-theme=light] .tab.on{
  background:linear-gradient(135deg,rgba(91,141,255,.9),rgba(165,107,255,.85));color:#fff !important;border-color:transparent}
/* file inputs are legible in light mode (they inherit fg) */
html[data-theme=light] input[type=file]{color:#1e2637}