/* ut.css — the ultratrack design system: tokens (light + dark) and shared
   classes. Loaded by app.html and mobile.html. The landing page is generated
   separately by landing-examples/v2/build.py with the same values. */
@font-face{font-family:'Open Runde';src:url('https://cdn.jsdelivr.net/gh/lauridskern/open-runde@1.0.1/src/web/OpenRunde-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Open Runde';src:url('https://cdn.jsdelivr.net/gh/lauridskern/open-runde@1.0.1/src/web/OpenRunde-Semibold.woff2') format('woff2');font-weight:600;font-display:swap}

/* ------------------------------------------------------------------
   Design tokens. Same system as the landing page (landing A):
   light is the default, dark is the same palette on near-black.
   Every colour in trading-journal.jsx should come from here.
   ------------------------------------------------------------------ */
:root{
  --sans:'Inter',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  --disp:'Open Runde','Inter',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --mono:ui-monospace,'SF Mono',SFMono-Regular,Menlo,monospace;
  --r-card:18px; --r-tray:14px; --r-in:12px; --r-ctl:999px;

  --bg:#ffffff; --side:#fafafa; --surface:#ffffff; --tray:#f5f5f5; --inset:#f7f7f8; --raised:#ffffff;
  --hover:rgba(10,10,11,.04); --hover2:rgba(10,10,11,.07); --overlay:rgba(15,18,28,.36);
  --fg:#0a0a0a; --fg2:#3f3f46; --muted:#6b6b6b; --faint:#a3a3a3;
  --line:#ebebeb; --line2:#e0e0e0;
  --ring:0 0 0 1px #ebebeb; --shadow-sm:0 1px 2px rgba(0,0,0,.04);
  --shadow:0 1px 2px rgba(0,0,0,.04),0 12px 32px -16px rgba(20,30,70,.22);
  --shadow-lg:0 30px 80px -30px rgba(20,30,70,.4);

  --accent:#357dff; --accent-d:#2a6ef0; --accent-soft:#eef4ff; --accent-line:#d6e4ff; --accent-ink:#ffffff;
  --focus:rgba(53,125,255,.16); --btn2:#f1f1f1; --btn2-h:#e8e8e8;

  --up:#16a34a; --up-bg:#e9f9ef; --up-line:#c6ecd4;
  --down:#dc2626; --down-bg:#fdeceb; --down-line:#f8d3cf;
  --be:#7c5cf0; --be-bg:#f1edff; --be-line:#ddd4fd;
  --amber:#d97706; --amber-bg:#fff4e0; --amber-line:#fbe0b0;
  --lyra:#3f74c4; --lyra-bg:#edf3fb; --lyra-line:#d3e1f4;
  --bar:#2b84ea; --bar-soft:#e8f1fd; --fill:#e6f0fd; --fill-neg:#fdeceb;

  --cat-1:#2563eb; --cat-2:#16a34a; --cat-3:#d97706; --cat-4:#dc2626;
  --cat-5:#7c3aed; --cat-6:#0891b2; --cat-7:#db2777; --cat-8:#64748b;

  --band-l:#6e72f3; --band-l2:#a9a3fb; --band-r:#62e9a0; --band-r2:#b7f7cf;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#0b0c0e; --side:#0e0f12; --surface:#131519; --tray:#191b20; --inset:#0f1114; --raised:#1b1e24;
  --hover:rgba(255,255,255,.05); --hover2:rgba(255,255,255,.08); --overlay:rgba(0,0,0,.62);
  --fg:#f3f4f6; --fg2:#d1d5db; --muted:#9ca3af; --faint:#6b7280;
  --line:#24272e; --line2:#2e323a;
  --ring:0 0 0 1px #24272e; --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow:0 1px 2px rgba(0,0,0,.3),0 14px 34px -16px rgba(0,0,0,.7);
  --shadow-lg:0 30px 80px -30px rgba(0,0,0,.85);

  --accent:#4b8bff; --accent-d:#3a7af0; --accent-soft:rgba(75,139,255,.14); --accent-line:rgba(75,139,255,.32); --accent-ink:#ffffff;
  --focus:rgba(75,139,255,.22); --btn2:#1f2228; --btn2-h:#262a31;

  --up:#22c55e; --up-bg:rgba(34,197,94,.13); --up-line:rgba(34,197,94,.3);
  --down:#f05252; --down-bg:rgba(240,82,82,.13); --down-line:rgba(240,82,82,.3);
  --be:#8b6cf6; --be-bg:rgba(139,108,246,.15); --be-line:rgba(139,108,246,.32);
  --amber:#f5a524; --amber-bg:rgba(245,165,36,.13); --amber-line:rgba(245,165,36,.3);
  --lyra:#7ca5d4; --lyra-bg:rgba(124,165,212,.13); --lyra-line:rgba(124,165,212,.3);
  --bar:#4b8bff; --bar-soft:#1b2433; --fill:rgba(75,139,255,.16); --fill-neg:rgba(240,82,82,.14);

  --cat-1:#60a5fa; --cat-2:#4ade80; --cat-3:#fbbf24; --cat-4:#f87171;
  --cat-5:#a78bfa; --cat-6:#22d3ee; --cat-7:#f472b6; --cat-8:#94a3b8;

  --band-l:#5a5ee6; --band-l2:#8a84f0; --band-r:#3fcf86; --band-r2:#7fe0b1;
  color-scheme:dark;
}

/* ------------------------------------------------------------------
   Base + shared classes (used across trading-journal.jsx)
   ------------------------------------------------------------------ */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{background:var(--bg)}
body{color:var(--fg);font-family:var(--sans);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background-color .2s ease}
h1,h2,h3{font-family:var(--disp);font-weight:600;letter-spacing:-.025em}
::selection{background:var(--accent-soft)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line2);border-radius:10px;border:3px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--faint);background-clip:padding-box}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:24px;box-shadow:var(--shadow-sm)}
.gbtn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--accent);color:var(--accent-ink);border:none;cursor:pointer;padding:10px 20px;border-radius:var(--r-ctl);font:600 14px/1.2 var(--sans);letter-spacing:0;text-transform:none;transition:background .15s,box-shadow .15s,transform .15s;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 0 0 1px var(--accent-d),0 6px 16px -8px var(--accent)}
.gbtn:hover{background:var(--accent-d)}
.gbtn:active{transform:scale(.98)}
.gbtn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.ghost{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--btn2);border:1px solid var(--line);color:var(--fg);cursor:pointer;padding:8px 16px;border-radius:var(--r-ctl);font:500 13px/1.2 var(--sans);letter-spacing:0;text-transform:none;transition:background .15s,color .15s,border-color .15s}
.ghost:hover{background:var(--btn2-h)}
.ghost:disabled{opacity:.45;cursor:not-allowed}
.nb{background:transparent;border:none;cursor:pointer;padding:7px 14px;border-radius:var(--r-ctl);font:500 13px/1.2 var(--sans);letter-spacing:0;color:var(--muted);text-transform:none;transition:background .15s,color .15s,box-shadow .15s}
.nb.on{color:var(--fg);background:var(--surface);box-shadow:var(--ring),var(--shadow-sm)}
.nb:hover:not(.on){color:var(--fg)}
input,select,textarea{background:var(--surface);border:1px solid var(--line2);color:var(--fg);padding:10px 14px;border-radius:var(--r-in);font:400 14px/1.4 var(--sans);width:100%;transition:border-color .15s,box-shadow .15s;outline:none}
input::placeholder,textarea::placeholder{color:var(--faint)}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--focus)}
input[type=checkbox],input[type=radio]{width:auto;accent-color:var(--accent);box-shadow:none}
input[type=range]{accent-color:var(--accent);padding:0;border:0;background:transparent;box-shadow:none}
select option{background:var(--surface);color:var(--fg)}
.pos{color:var(--up)}.neg{color:var(--down)}.be{color:var(--be)}
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:6px;font-size:11px;font-weight:500;letter-spacing:0}
.ai-text{white-space:pre-wrap;line-height:1.75;font-size:14px;color:var(--fg2)}
.trow{border-bottom:1px solid var(--line);transition:background .15s;cursor:pointer}
.trow:hover{background:var(--hover)}
.pulse{animation:p 1.8s infinite}
.ov{position:fixed;inset:0;background:var(--overlay);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);z-index:50;display:flex;align-items:center;justify-content:center;padding:20px}
.modal{background:var(--surface);color:var(--fg);border:1px solid var(--line);border-radius:24px;padding:28px;width:100%;max-width:580px;max-height:92vh;overflow-y:auto;box-shadow:var(--shadow-lg)}
.lbl{font-size:11.5px;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px;display:block;font-weight:600}
.tv-badge{display:inline-block;padding:1px 6px;border-radius:5px;font-size:9px;font-weight:600;letter-spacing:.08em;background:var(--lyra-bg);color:var(--lyra);margin-left:6px;vertical-align:middle}
.est-badge{display:inline-block;padding:1px 6px;border-radius:5px;font-size:9px;font-weight:600;letter-spacing:.08em;background:var(--accent-soft);color:var(--accent);margin-left:6px;vertical-align:middle;text-transform:uppercase;cursor:help}

/* landing-system building blocks */
.ut-title{font-family:var(--disp);font-weight:600;font-size:28px;letter-spacing:-.03em;line-height:1.1;color:var(--fg)}
.ut-sub{font-size:14px;color:var(--muted);margin-top:4px}
.eyebrow{font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.tray{background:var(--tray);border-radius:var(--r-tray);padding:4px;box-shadow:inset 0 0 0 1px var(--line)}
.tray-h{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 12px 8px;font-size:13px;color:var(--muted)}
.tray-b{background:var(--surface);border-radius:11px;padding:12px 14px;box-shadow:0 0 0 1px var(--line)}
.num{font-family:var(--sans);font-variant-numeric:tabular-nums}
.kpi-v{font-family:var(--sans);font-size:28px;font-weight:600;line-height:1.15;font-variant-numeric:tabular-nums}
.pills{display:inline-flex;gap:2px;padding:3px;background:var(--tray);border-radius:var(--r-ctl);box-shadow:inset 0 0 0 1px var(--line)}
.chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:var(--r-ctl);font-size:12.5px;font-weight:500;background:var(--surface);color:var(--fg2);border:1px solid var(--line);cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.chip:hover{background:var(--hover)}
.chip.on{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-line)}
.st{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;border-radius:var(--r-ctl);font-size:11.5px;font-weight:500;background:var(--accent-soft);color:var(--accent)}
.st.up{background:var(--up-bg);color:var(--up)} .st.down{background:var(--down-bg);color:var(--down)}
.st.be{background:var(--be-bg);color:var(--be)} .st.amber{background:var(--amber-bg);color:var(--amber)}
.st.n{background:var(--tray);color:var(--muted);box-shadow:inset 0 0 0 1px var(--line)}
.fill{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;height:32px;padding:0 10px;font-size:13px;color:var(--fg)}
.fill::before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--w,0%);background:var(--fill);border-radius:8px}
.fill.neg::before{background:var(--fill-neg)}
.fill>*{position:relative}
.sq{width:30px;height:30px;flex:none;border-radius:9px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent)}
.ut-i{flex:none;display:block}

/* card with the landing page's purple→mint band behind it */
.ut-band-card{position:relative;overflow:hidden;padding:18px 20px;border-radius:var(--r-card);background:var(--surface);box-shadow:var(--ring),var(--shadow-sm)}
.ut-band-card::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(55% 160% at 0% 60%,color-mix(in srgb,var(--band-l) 24%,transparent),transparent 70%),radial-gradient(55% 160% at 100% 60%,color-mix(in srgb,var(--band-r) 30%,transparent),transparent 70%)}
.ut-x{width:34px;height:34px;flex:none;border-radius:10px;display:grid;place-items:center;background:transparent;border:0;color:var(--muted);cursor:pointer;transition:background .15s,color .15s}
.ut-x:hover{background:var(--hover2);color:var(--fg)}
.kpi-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
@media (max-width:1320px){.kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Economic Calendar page: TradingView's widget inside our card */
.econ-card{height:calc(100vh - 190px);min-height:560px;padding:8px;overflow:hidden}
.econ-cal,.econ-cal .tradingview-widget-container__widget{height:100%}
/* The iframe declares no color-scheme; matching it keeps the frame transparent in dark mode */
.econ-cal{color-scheme:light}
.econ-credit{margin-top:10px;text-align:center;font-size:12px;color:var(--muted)}
.econ-credit a{color:var(--accent);text-decoration:none}
.econ-credit a:hover{text-decoration:underline}

/* Lyra weekly/monthly review report (LyraReviewView) and Lyra rich text */
.lr{display:flex;flex-direction:column;gap:12px}
.lr-hero{position:relative;overflow:hidden;padding:20px 22px 22px;border-radius:var(--r-card);background:var(--surface);box-shadow:var(--ring),var(--shadow-sm)}
.lr-hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 150% at 0% 0%,color-mix(in srgb,var(--band-l) 20%,transparent),transparent 70%),radial-gradient(60% 170% at 100% 100%,color-mix(in srgb,var(--band-r) 26%,transparent),transparent 70%)}
.lr-hero>*{position:relative}
.lr-hero-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.lr-hero-id{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.lr-eyebrow{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--lyra)}
.lr-range{font-size:12.5px;color:var(--muted);padding-left:10px;border-left:1px solid var(--line2)}
.lr-hero-act{display:flex;gap:6px;flex-wrap:wrap}
.lr-hero-act .ghost{padding:6px 12px;font-size:12px;background:color-mix(in srgb,var(--surface) 80%,transparent)}
.lr-verdict{font-family:var(--disp);font-weight:600;font-size:clamp(21px,2.3vw,28px);line-height:1.2;letter-spacing:-.03em;color:var(--fg);margin-top:18px;max-width:820px;text-wrap:balance}
.lr-hero-notes{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px;margin-top:16px}
.lr-note{background:color-mix(in srgb,var(--surface) 74%,transparent);border-radius:12px;padding:11px 14px;box-shadow:0 0 0 1px var(--line);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.lr-note-k{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.lr-note p{margin-top:4px;font-size:13.5px;line-height:1.5;color:var(--fg2)}
.lr-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.5fr);gap:10px}
.lr-kpi{background:var(--surface);border-radius:var(--r-tray);padding:14px 16px;box-shadow:var(--ring)}
.lr-kpi-k{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.lr-kpi .kpi-v{font-size:26px}
.lr-kpi-s{font-size:12px;color:var(--muted);margin-top:6px}
.lr-split{display:flex;gap:2px;height:5px;border-radius:3px;overflow:hidden;margin-top:9px}
.lr-split i{display:block}
.lr-bars{display:flex;gap:6px;height:76px}
.lr-bars-col{flex:1;min-width:0;display:flex;flex-direction:column}
.lr-bars-plot{flex:1;display:flex;flex-direction:column}
.lr-bars-half{flex:1;display:flex;justify-content:center}
.lr-bars-half.up{align-items:flex-end;border-bottom:1px solid var(--line2)}
.lr-bars-half.down{align-items:flex-start}
.lr-bars-half.down:first-child{border-top:1px solid var(--line2)}
.lr-bars-half i{display:block;width:100%;max-width:26px}
.lr-bars-half.up i{background:var(--up);border-radius:4px 4px 1px 1px}
.lr-bars-half.down i{background:var(--down);border-radius:1px 1px 4px 4px}
.lr-bars-l{font-size:10.5px;color:var(--muted);text-align:center;margin-top:5px}
.lr-bars-l.faint{color:var(--faint)}
.lr-bds{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px}
.lr-bd{background:var(--surface);border-radius:var(--r-tray);padding:12px 10px 10px;box-shadow:var(--ring);display:flex;flex-direction:column;gap:3px}
.lr-bd-h{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 5px 4px}
.lr-bd .fill{height:30px;font-size:12.5px}
.lr-bd-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lr-bd-name em{font-style:normal;font-size:11px;color:var(--muted);margin-left:7px}
.lr-secs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.lr-sec{grid-column:1/-1;position:relative;background:var(--surface);border-radius:var(--r-tray);padding:16px 20px 18px 22px;box-shadow:inset 3px 0 0 var(--c,var(--accent)),var(--ring)}
.lr-half{grid-column:auto}
.lr-sec-h{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.lr-sec-ico{width:28px;height:28px;flex:none;border-radius:9px;display:grid;place-items:center;color:var(--c,var(--accent));background:color-mix(in srgb,var(--c,var(--accent)) 12%,transparent)}
.lr-sec-n{font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--faint);font-variant-numeric:tabular-nums}
.lr-sec-t{flex:1;min-width:0;font-size:17px;letter-spacing:-.02em;color:var(--fg)}
.lr-md{font-size:14px;line-height:1.7;color:var(--fg2);max-width:80ch}
.lr-md>*+*{margin-top:10px}
.lr-md strong{font-weight:600;color:var(--fg)}
.lr-md ul,.lr-md ol{padding-left:20px}
.lr-md li+li{margin-top:5px}
.lr-md li::marker{color:var(--c,var(--accent))}
.lr-md li.lr-sub{margin-left:18px}
.lr-md-h{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--fg)}
.lr-md-sm{font-size:12.5px;line-height:1.6}
.lr-md-sm>*+*{margin-top:7px}
.lr-md-sm ul,.lr-md-sm ol{padding-left:18px}
.lr-intro{font-size:15px;padding:0 4px}
.lr-num{font-weight:600;color:var(--fg);font-variant-numeric:tabular-nums}
.lr-up{color:var(--up)}
.lr-down{color:var(--down)}
.lr-plan{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 5%,var(--surface)),var(--surface) 70%)}
.lr-plan-prog{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.lr-plan-meter{width:64px;height:5px;border-radius:3px;overflow:hidden;background:var(--tray);box-shadow:inset 0 0 0 1px var(--line)}
.lr-plan-meter i{display:block;height:100%;background:var(--accent);border-radius:3px;transition:width .25s ease}
.lr-plan-list{list-style:none;display:flex;flex-direction:column;gap:6px;margin-top:4px}
.lr-plan-row{display:flex;align-items:flex-start;gap:12px;width:100%;padding:11px 12px;border:0;border-radius:12px;background:var(--surface);box-shadow:0 0 0 1px var(--line);text-align:left;font:inherit;color:inherit;cursor:pointer;transition:background .15s,box-shadow .15s}
.lr-plan-row:hover{box-shadow:0 0 0 1px var(--accent-line)}
.lr-plan-row:focus-visible{outline:none;box-shadow:0 0 0 1px var(--accent),0 0 0 4px var(--focus)}
.lr-plan-row.on{background:var(--inset)}
.lr-check{width:20px;height:20px;flex:none;margin-top:1px;border-radius:6px;display:grid;place-items:center;background:var(--surface);color:var(--accent-ink);box-shadow:inset 0 0 0 1.5px var(--line2);transition:background .15s,box-shadow .15s}
.lr-plan-row.on .lr-check{background:var(--accent);box-shadow:none}
.lr-plan-n{min-width:12px;margin-top:2px;font-size:12px;font-weight:600;color:var(--accent);font-variant-numeric:tabular-nums}
.lr-plan-txt{flex:1;min-width:0;font-size:14px;line-height:1.55;color:var(--fg2)}
.lr-plan-row.on .lr-plan-txt{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--line2)}
.lr-delta{margin-top:6px;font-size:11.5px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.lr-delta span{font-weight:400;color:var(--muted)}
.lr-card-h{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.lr-card-t{font-family:var(--disp);font-weight:600;font-size:18px;letter-spacing:-.02em;color:var(--fg)}
.lr-card-s{margin-top:3px;font-size:12.5px;color:var(--muted)}
.lr-switch{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lr-switch-nav{display:flex;align-items:center;gap:2px;padding:3px;border-radius:var(--r-ctl);background:var(--tray);box-shadow:inset 0 0 0 1px var(--line)}
.lr-switch-b{width:30px;height:30px;flex:none;border:0;border-radius:999px;display:grid;place-items:center;background:transparent;color:var(--muted);cursor:pointer;transition:background .15s,color .15s,box-shadow .15s}
.lr-switch-b:hover:not(:disabled){background:var(--surface);color:var(--fg);box-shadow:var(--ring)}
.lr-switch-b:disabled{opacity:.35;cursor:default}
.lr-switch-l{min-width:150px;padding:0 6px;text-align:center;line-height:1.25}
.lr-switch-l p{font-size:13px;font-weight:600;color:var(--fg);font-variant-numeric:tabular-nums}
.lr-switch-l span{font-size:11px;color:var(--muted)}
.lr-switch-today{padding:7px 13px;font-size:12.5px}
.lr-run{width:100%;height:46px;font-size:14.5px}
.lr-err{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:13px;color:var(--down)}
.lr-hist{display:flex;gap:8px;margin:-2px -2px 12px;padding:2px 2px 8px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:thin}
.lr-hist-c{flex:none;width:200px;display:flex;flex-direction:column;gap:6px;padding:10px 12px;border:0;border-radius:12px;background:var(--inset);box-shadow:inset 0 0 0 1px var(--line);text-align:left;font:inherit;color:inherit;cursor:pointer;scroll-snap-align:start;transition:background .15s,box-shadow .15s}
.lr-hist-c:hover{box-shadow:inset 0 0 0 1px var(--accent-line)}
.lr-hist-c.on{background:var(--surface);box-shadow:inset 0 0 0 2px var(--accent)}
.lr-hist-c:focus-visible{outline:none;box-shadow:0 0 0 1px var(--accent),0 0 0 4px var(--focus)}
.lr-hist-top{display:flex;justify-content:space-between;gap:8px;font-size:12px}
.lr-hist-l{font-weight:600;color:var(--fg);white-space:nowrap}
.lr-hist-v{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.8em;font-size:12px;line-height:1.4;color:var(--fg2)}
.lr-hist-m{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.lr-hist-m .lr-plan-meter{width:40px}
.lr-ft{background:var(--surface);border-radius:var(--r-tray);padding:14px 16px;box-shadow:var(--ring)}
.card>.lr-ft{margin-bottom:12px}
.lr-ft-h{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.lr-ft-t{flex:1;min-width:0}
.lr-ft-t p{font-family:var(--disp);font-weight:600;font-size:15px;letter-spacing:-.01em;color:var(--fg)}
.lr-ft-t span{display:block;margin-top:1px;font-size:12px;color:var(--muted)}
.lr-ft-list{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:6px}
.lr-ft-row{display:flex;align-items:flex-start;gap:10px;width:100%;height:100%;padding:9px 11px;border:0;border-radius:10px;background:var(--inset);box-shadow:inset 0 0 0 1px var(--line);text-align:left;font:inherit;color:inherit;cursor:pointer;transition:box-shadow .15s}
.lr-ft-row:hover{box-shadow:inset 0 0 0 1px var(--accent-line)}
.lr-ft-row:focus-visible{outline:none;box-shadow:0 0 0 1px var(--accent),0 0 0 4px var(--focus)}
.lr-ft-row .lr-check{width:18px;height:18px}
.lr-ft-row.on .lr-check{background:var(--accent);box-shadow:none}
.lr-ft-txt{flex:1;min-width:0;font-size:13px;line-height:1.5;color:var(--fg2)}
.lr-ft-row.on .lr-ft-txt{color:var(--muted)}
.lr-ft-row .st{flex:none;height:20px;padding:0 8px;font-size:11px;margin-top:-1px}
.lr-ft-note{display:block;margin-top:3px;font-size:12px;line-height:1.45;color:var(--muted)}
.lr-tref-wrap{position:relative;display:inline-block}
.lr-tref{display:inline-flex;align-items:center;height:21px;padding:0 8px;margin:0 1px;border:0;border-radius:999px;font:600 12px/1 var(--sans);font-variant-numeric:tabular-nums;white-space:nowrap;vertical-align:1px;cursor:pointer;background:var(--tray);color:var(--fg2);box-shadow:inset 0 0 0 1px var(--line2);transition:box-shadow .15s,background .15s}
.lr-tref.up{background:var(--up-bg);color:var(--up);box-shadow:inset 0 0 0 1px var(--up-line)}
.lr-tref.down{background:var(--down-bg);color:var(--down);box-shadow:inset 0 0 0 1px var(--down-line)}
.lr-tref:hover,.lr-tref[aria-expanded="true"]{box-shadow:inset 0 0 0 1px currentColor}
.lr-tref:focus-visible{outline:none;box-shadow:0 0 0 3px var(--focus),inset 0 0 0 1px currentColor}
.lr-tref-gone{font-size:12px;color:var(--faint)}
.lr-pop{position:absolute;z-index:30;left:0;top:calc(100% + 6px);width:280px;max-width:80vw;display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:14px;background:var(--raised);box-shadow:var(--ring),var(--shadow-lg);font-size:13px;line-height:1.4;color:var(--fg2);white-space:normal;text-align:left}
.lr-pop-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.lr-pop-h b{font-family:var(--disp);font-weight:600;font-size:15px;color:var(--fg)}
.lr-pop-sub{font-size:12px;color:var(--muted)}
.lr-pop-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;padding-top:8px;border-top:1px solid var(--line)}
.lr-pop-grid span{display:flex;flex-direction:column;min-width:0;font-size:12.5px;color:var(--fg);overflow:hidden;text-overflow:ellipsis}
.lr-pop-grid em{font-style:normal;font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.lr-pop-notes{padding:8px 10px;border-radius:9px;background:var(--inset);font-size:12.5px;color:var(--fg2);max-height:110px;overflow:auto}
.lr-pop-open{align-self:flex-start;padding:6px 11px;font-size:12px}
.lr-keystat{display:flex;flex-direction:column;align-items:flex-end;flex:none;text-align:right;line-height:1.15}
.lr-keystat b{font-family:var(--sans);font-size:19px;font-weight:600;font-variant-numeric:tabular-nums}
.lr-keystat em{font-style:normal;font-size:11px;color:var(--muted);margin-top:2px;max-width:160px}
.lr-sk{display:block;border-radius:6px;background:linear-gradient(90deg,var(--tray) 25%,var(--hover2) 50%,var(--tray) 75%);background-size:200% 100%;animation:lr-shimmer 1.4s ease-in-out infinite}
@keyframes lr-shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
.lr-skel-status{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-size:13px;font-weight:500;color:var(--lyra)}
.lr-skel-dot{width:7px;height:7px;border-radius:50%;background:var(--lyra)}
@media (prefers-reduced-motion:reduce){.lr-sk,.lr-skel-dot{animation:none}}
@media (max-width:1100px){.lr-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}.lr-kpi-wide{grid-column:1/-1}}
@media (max-width:900px){.lr-half{grid-column:1/-1}}
@media (max-width:640px){.lr-pop{position:fixed;left:16px;right:16px;top:auto;bottom:calc(84px + env(safe-area-inset-bottom));width:auto;max-width:none;z-index:120}.lr-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.lr-hero{padding:18px}.lr-sec{padding:14px 16px 16px 18px}}
@media (max-width:768px){.kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}}
.ut-card-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:18px}
.ut-card-t{font-size:15px;font-weight:600;color:var(--fg);letter-spacing:-.01em}
.ut-card-s{font-size:12.5px;color:var(--muted)}

/* sidebar — landing mock style: soft side panel, active item is a card */
.sidebar{position:fixed;left:0;top:0;height:100vh;background:var(--side);border-right:1px solid var(--line);display:flex;flex-direction:column;transition:width .3s cubic-bezier(.4,0,.2,1);z-index:50}
.sb-top{display:flex;align-items:center;padding:20px 14px 14px 22px;min-height:62px}
.sidebar-collapsed .sb-top{padding:20px 0 6px}
.sb-logo{background:none;border:0;padding:4px 0;cursor:pointer;display:flex;align-items:center;transition:opacity .15s}
.sb-logo:hover{opacity:.75}
.sb-collapse{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:transparent;border:0;color:var(--faint);cursor:pointer;transition:background .15s,color .15s}
.sb-collapse:hover{background:var(--hover2);color:var(--fg)}
.sb-expand{margin:0 auto 6px}
.sb-acct{margin:2px 12px 10px;background:var(--tray);border-radius:var(--r-tray);padding:4px;box-shadow:inset 0 0 0 1px var(--line)}
.sb-acct-h{display:flex;justify-content:space-between;align-items:center;padding:5px 10px 6px;font-size:12px;color:var(--muted)}
.sb-acct-h button{background:none;border:0;padding:0;font:500 12px var(--sans);color:var(--accent);cursor:pointer}
.sb-acct-h button:hover{text-decoration:underline}
.sb-acct select{height:36px;padding:0 10px;border-radius:10px;font-size:13.5px;font-weight:500;cursor:pointer;background:var(--surface);border-color:var(--line)}
.sidebar-nav-item{display:flex;align-items:center;gap:11px;padding:9px 12px;margin:2px 12px;border-radius:10px;cursor:pointer;font:500 14.5px/1.2 var(--sans);color:var(--muted);border:none;background:none;text-align:left;width:calc(100% - 24px);white-space:nowrap;overflow:hidden;transition:background .15s,color .15s,box-shadow .15s}
.sidebar-nav-item .ut-i{color:var(--faint);transition:color .15s}
.sidebar-nav-item:hover{background:var(--hover);color:var(--fg)}
.sidebar-nav-item:hover .ut-i{color:var(--fg)}
.sidebar-nav-item-active,.sidebar-nav-item-active:hover{background:var(--surface);color:var(--fg);box-shadow:var(--ring),var(--shadow-sm)}
.sidebar-nav-item-active .ut-i{color:var(--fg)}
.sidebar-nav-item.lyra-active,.sidebar-nav-item.lyra-active:hover{background:var(--lyra-bg);box-shadow:inset 0 0 0 1px var(--lyra-line)}
.sidebar-nav-item.lyra-active .ut-i{color:var(--lyra)}
.sidebar-nav-icon{flex-shrink:0;width:18px;display:grid;place-items:center}
.sidebar-nav-text{transition:opacity .2s}
.lyra-nav-text{display:inline-flex;align-items:center}
.sb-group{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);padding:16px 24px 6px}
.sb-foot{padding:12px 0 18px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:2px}
.sb-log{margin:2px 12px 8px;width:calc(100% - 24px);height:40px}
.sb-log-c{width:40px;height:40px;padding:0;margin:2px auto 8px}
.sb-theme{margin:6px 12px 4px;width:calc(100% - 24px);display:flex}
.sb-theme .nb{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:6px 4px;font-size:12.5px}
.sidebar-collapsed .sidebar-nav-item{justify-content:center;padding:10px 0;margin:2px 11px;width:48px}
.sidebar-collapsed .sidebar-nav-text,.sidebar-collapsed .lyra-nav-text{display:none}
.sidebar-collapsed{overflow:visible!important}

/* auth: login / sign-up / verify — the landing site's login design */
:root{--auth-art:radial-gradient(at 100% 100%,rgba(53,125,255,.30) 0%,transparent 58%),radial-gradient(at 0% 65%,rgba(165,180,252,.42) 0%,transparent 55%),radial-gradient(at 85% 18%,#dce9ff 0%,transparent 60%),#f7f9ff}
:root[data-theme="dark"]{--auth-art:radial-gradient(at 100% 100%,rgba(75,139,255,.28) 0%,transparent 58%),radial-gradient(at 0% 65%,rgba(110,114,243,.26) 0%,transparent 55%),radial-gradient(at 85% 18%,rgba(98,233,160,.10) 0%,transparent 60%),#0f1117}
.auth{display:grid;grid-template-columns:minmax(0,47fr) minmax(0,53fr);min-height:100vh;padding:12px;background:var(--bg)}
.auth-form-side{display:flex;flex-direction:column;padding:28px 44px 22px 96px}
.auth-logo{align-self:flex-start;display:inline-flex}
.auth-col{width:100%;max-width:448px;margin:auto 0}
.auth-eyebrow{font-size:14.5px;font-weight:500;color:var(--accent)}
.auth-h1{font-family:var(--disp);font-weight:600;font-size:34px;letter-spacing:-.045em;line-height:1.1;margin-top:8px;color:var(--fg)}
.auth-sub{color:var(--muted);font-size:15px;margin-top:12px;line-height:1.55}
.auth-sub b{color:var(--fg);font-weight:500}
.auth-form{margin-top:30px;display:grid;gap:18px}
.auth-stack{margin-top:28px;display:grid;gap:12px}
.auth-label{display:block;font-size:14.5px;font-weight:500;margin-bottom:7px;color:var(--fg)}
.auth-label-row{display:flex;justify-content:space-between;align-items:baseline}
.auth-label-row a{font-size:13.5px;font-weight:500;color:var(--accent);text-decoration:none}
.auth-label-row a:hover{text-decoration:underline}
.auth-input{position:relative;display:flex;align-items:center}
.auth-input>.ut-i{position:absolute;left:15px;color:var(--faint);pointer-events:none}
.auth-input input{height:46px;border-radius:var(--r-ctl);padding:0 14px 0 42px;font-size:15px}
.auth-peek{position:absolute;right:6px;height:34px;padding:0 14px;border:0;background:transparent;border-radius:var(--r-ctl);font:600 13px var(--sans);color:var(--muted);cursor:pointer}
.auth-peek:hover{background:var(--hover2);color:var(--fg)}
.auth-hint{font-size:12.5px;color:var(--faint);margin-top:7px}
.auth-btn{width:100%;height:46px;font-size:15px}
.auth-social{margin-top:28px;display:grid;gap:10px}
.auth-sbtn{gap:10px;font-weight:500}
.auth-sbtn svg{flex:none}
.auth-or{display:flex;align-items:center;gap:12px;margin-top:22px;font-size:13px;color:var(--faint)}
.auth-or::before,.auth-or::after{content:"";flex:1;height:1px;background:var(--line)}
.auth-or+.auth-form{margin-top:22px}
.auth-alert{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:14px;font-size:13.5px;line-height:1.5}
.auth-alert .ut-i{margin-top:2px}
.auth-alert b{display:block;font-weight:600}
.auth-alert.err{background:var(--down-bg);color:var(--down);box-shadow:inset 0 0 0 1px var(--down-line)}
.auth-alert.ok{background:var(--up-bg);color:var(--up);box-shadow:inset 0 0 0 1px var(--up-line)}
.auth-alert.info{background:var(--tray);color:var(--muted);box-shadow:inset 0 0 0 1px var(--line)}
.auth-swap{margin-top:24px;text-align:center;font-size:14.5px;color:var(--muted)}
.auth-swap button{background:none;border:0;padding:0;font:600 14.5px var(--sans);color:var(--accent);cursor:pointer}
.auth-swap button:hover{text-decoration:underline}
.auth-fine{margin-top:30px;text-align:center;font-size:12.5px;color:var(--faint);line-height:1.6}
.auth-fine a{color:var(--fg);text-decoration:none;border-bottom:1px solid var(--line2)}
.auth-back{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;color:var(--muted);text-decoration:none;margin-top:24px;align-self:flex-start}
.auth-back:hover{color:var(--fg)}
.auth-art{position:relative;border-radius:28px;overflow:hidden;background:var(--auth-art);padding:56px 0 0 56px;display:flex;flex-direction:column;box-shadow:inset 0 0 0 1px var(--line)}
.auth-badge{align-self:flex-start;display:inline-flex;align-items:center;height:30px;padding:0 13px;border-radius:999px;font-size:13px;font-weight:500;background:var(--up-bg);color:var(--up);box-shadow:inset 0 0 0 1px var(--up-line)}
.auth-art h2{font-family:var(--disp);font-weight:600;font-size:clamp(34px,4.1vw,58px);line-height:1;letter-spacing:-.05em;margin:24px 56px 0 0;color:var(--fg)}
.auth-art h2 span{color:var(--muted)}
.auth-lead{margin:22px 56px 0 0;max-width:440px;color:var(--muted);font-size:15.5px;line-height:1.65}
.auth-mock{margin-top:auto;margin-left:auto;width:min(560px,86%);min-height:360px;background:var(--surface);color:var(--fg);border-radius:28px 0 0 0;display:grid;grid-template-columns:70px 1fr;box-shadow:0 0 0 1px var(--line),0 40px 90px -30px rgba(20,30,80,.35);transform:translateY(20px)}
.auth-mock-side{border-right:1px solid var(--line);background:var(--side);border-radius:28px 0 0 0;display:flex;flex-direction:column;align-items:center;gap:12px;padding:24px 0}
.auth-mock-side i{display:block;width:42px;height:30px;border-radius:9px;background:var(--tray);box-shadow:inset 0 0 0 1px var(--line)}
.auth-mock-side i:first-of-type{margin-top:18px}
.auth-mock-main{padding:24px 26px 30px}
.auth-mock-top{display:flex;justify-content:space-between;align-items:flex-start}
.auth-mock-eb{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.auth-mock-t{font-size:19px;font-weight:500;letter-spacing:-.015em;margin-top:5px}
.auth-chip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:10px;font-size:12px;color:var(--muted);background:var(--surface);box-shadow:0 0 0 1px var(--line)}
.auth-mock-k{margin-top:24px;font-size:13px;color:var(--muted)}
.auth-mock-v{display:flex;justify-content:space-between;align-items:center;margin-top:2px}
.auth-mock-v b{font-size:32px;font-weight:600;font-variant-numeric:tabular-nums}
.auth-rows{display:grid;gap:10px;margin-top:16px}
.auth-row{position:relative;height:44px;border-radius:12px;background:var(--tray);display:flex;align-items:center;gap:10px;padding:0 12px;font-size:13.5px;overflow:hidden}
.auth-row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--w);background:var(--c);border-radius:12px}
.auth-row>*{position:relative}
.auth-row-ico{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:var(--surface);color:var(--muted);box-shadow:0 0 0 1px var(--line)}
.auth-row b{margin-left:auto;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.auth-row.is-neg b{color:var(--down)}
.auth-loading{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:var(--bg)}
.auth-loading-bar{width:120px;height:3px;border-radius:3px;background:var(--line);overflow:hidden}
.auth-loading-bar i{display:block;width:40%;height:100%;border-radius:3px;background:var(--accent);animation:utLoad 1.1s ease-in-out infinite}
@keyframes utLoad{0%{transform:translateX(-100%)}100%{transform:translateX(260%)}}
@media (max-width:980px){
  .auth{grid-template-columns:1fr;padding:0}
  .auth-art{display:none}
  .auth-form-side{min-height:100vh;padding:24px 22px}
  .auth-col{margin:auto}
}

/* mobile tab bar */
.mobile-tab-bar{position:fixed;bottom:0;left:0;right:0;height:60px;padding-bottom:env(safe-area-inset-bottom,0px);background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-top:1px solid var(--line);display:flex;z-index:1000}
.mobile-tab-bar button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;background:none;border:none;cursor:pointer;padding:0;font-family:var(--sans);color:var(--faint)}
.mobile-tab-bar button.active{color:var(--accent)}
.mobile-tab-bar button span.tab-label{font-size:10.5px;font-weight:500}
.mobile-tab-bar button.active span.tab-label{font-weight:600}

@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes p{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes wrappedIn{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes wrappedDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes wrappedProgress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.weekly-wrapped-slide{animation:wrappedIn .55s cubic-bezier(.2,.8,.2,1) both}
.weekly-wrapped-path{stroke-dasharray:1;stroke-dashoffset:1;animation:wrappedDraw 1.25s cubic-bezier(.2,.8,.2,1) forwards}
.weekly-wrapped-progress{transform-origin:left;animation:wrappedProgress 6s linear forwards}
@media (prefers-reduced-motion:reduce){
  .weekly-wrapped-slide,.weekly-wrapped-path,.weekly-wrapped-progress{animation:none!important;stroke-dashoffset:0!important;transform:none!important}
}
@media (max-width:768px){
  .card{padding:16px;border-radius:14px}
  .modal{padding:20px;border-radius:20px;max-height:95vh}
  .ov{padding:10px}
  input,select,textarea{font-size:16px;padding:12px 14px}
  .ut-title{font-size:24px}
}