/* =====================================================================
   Tiltless — Flat (the default card style since November 2026)
   Calm, solid surfaces: no glass, no glow, no gradient edges or sheens,
   no boxes inside boxes, one accent used sparingly.
   Everything here is scoped to html[data-glass="flat"], so the Frosted /
   Clear glass styles (Settings → Card style) keep working as before.
   Loaded last, after every other stylesheet.
   ===================================================================== */

/* ---------- tokens: one grey family per theme, derived from its background ---------- */
html[data-glass="flat"] {
  --glass-hi: transparent; --glass-blur: 0px;
  --grain: none; --sheen: transparent; --edge-hi: transparent; --edge-lo: transparent;
}
html[data-glass="flat"][data-theme="dark"] {
  --f-page: color-mix(in srgb, var(--bg), #fff 2.5%);
  --surface: color-mix(in srgb, var(--bg), #fff 5.5%);
  --surface-2: color-mix(in srgb, var(--bg), #fff 9%);
  --f-line: rgba(255, 255, 255, 0.075);
  --border: rgba(255, 255, 255, 0.075);
  --border-strong: rgba(255, 255, 255, 0.13);
  --f-hover: rgba(255, 255, 255, 0.03);
  --f-track: rgba(255, 255, 255, 0.085);
  --f-sel: rgba(255, 255, 255, 0.09);
  --f-pop: 0 18px 40px -18px rgba(0, 0, 0, 0.75);
  --sidebar-bg: var(--f-page);
}
html[data-glass="flat"][data-theme="light"] {
  --f-page: #f4f5f7;
  --surface: #ffffff;
  --surface-2: #f2f3f6;
  --f-line: rgba(15, 23, 42, 0.09);
  --border: rgba(15, 23, 42, 0.09);
  --border-strong: rgba(15, 23, 42, 0.16);
  --f-hover: rgba(15, 23, 42, 0.025);
  --f-track: rgba(15, 23, 42, 0.08);
  --f-sel: rgba(15, 23, 42, 0.07);
  --f-pop: 0 16px 36px -18px rgba(15, 23, 42, 0.28);
  --sidebar-bg: #ffffff;
}
html[data-glass="flat"] { --glass: var(--surface); --glass-strong: var(--surface); --glass-border: var(--f-line); --strip-line: var(--f-line); }

/* ---------- page: a plain background (no aurora, grain or vignette) ---------- */
html[data-glass="flat"][data-theme] body { background: var(--f-page); }
html[data-glass="flat"] body::before, html[data-glass="flat"] body::after { content: none; display: none; animation: none; }
html[data-glass="flat"] .auth-overlay { background: var(--f-page); }
html[data-glass="flat"] .auth-glow { display: none; }

/* ---------- surfaces: solid, a hairline border, no shadow ---------- */
html[data-glass="flat"][data-theme] .card,
html[data-glass="flat"][data-theme] .stat-grid {
  background: var(--surface);
  border: 1px solid var(--f-line);
  box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html[data-glass="flat"] .card::after, html[data-glass="flat"] .auth-card::after,
html[data-glass="flat"] .stat-grid::before, html[data-glass="flat"] .stat-card::before { content: none; display: none; }
@media (hover: hover) {
  html[data-glass="flat"] .stat-card:hover, html[data-glass="flat"] .ins-block:hover { transform: none; box-shadow: none; }
}

/* the stats strip: one surface, hairline dividers */
html[data-glass="flat"][data-theme] .stat-grid > .stat-card {
  background: none; border: 0; border-radius: 0;
  box-shadow: -1px 0 0 var(--f-line), 0 -1px 0 var(--f-line);
}
@media (hover: hover) {
  html[data-glass="flat"][data-theme] .stat-grid > .stat-card:hover { background: var(--f-hover); transform: none; }
}
html[data-glass="flat"] .stat-card .eyebrow { text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 500; color: var(--text-muted); }
html[data-glass="flat"] .stat-card h2 { font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

/* ---------- text: solid colours instead of gradient text with glow ---------- */
html[data-glass="flat"][data-theme] #page-title,
html[data-glass="flat"] .stat-card h2.pos, html[data-glass="flat"] .stat-card h2.neg,
html[data-glass="flat"] .day-pnl.pos, html[data-glass="flat"] .day-pnl.neg,
html[data-glass="flat"] .trade-pnl.pos, html[data-glass="flat"] .trade-pnl.neg,
html[data-glass="flat"] .score-num {
  background: none; -webkit-background-clip: border-box; background-clip: border-box; filter: none;
}
html[data-glass="flat"][data-theme] #page-title { color: var(--text); }
html[data-glass="flat"] .stat-card h2.pos, html[data-glass="flat"] .day-pnl.pos, html[data-glass="flat"] .trade-pnl.pos { color: var(--green); }
html[data-glass="flat"] .stat-card h2.neg, html[data-glass="flat"] .day-pnl.neg, html[data-glass="flat"] .trade-pnl.neg { color: var(--red); }

/* ---------- sidebar + navigation ---------- */
html[data-glass="flat"][data-theme] .sidebar {
  background: var(--sidebar-bg); -webkit-backdrop-filter: none; backdrop-filter: none; border-right: 1px solid var(--f-line);
}
html[data-glass="flat"] .nav-indicator { background: var(--f-sel); box-shadow: none; }
html[data-glass="flat"] .brand-logo { filter: none; }
html[data-glass="flat"] .user-avatar { background: color-mix(in srgb, var(--purple) 24%, var(--surface-2)); color: var(--text); }
html[data-glass="flat"] .lvl-chip { background: transparent; border-color: var(--f-line); }
html[data-glass="flat"] .lvl-chip:hover { transform: none; border-color: var(--border-strong); }
html[data-glass="flat"] .lvl-badge { background: var(--purple); color: var(--accent-ink); box-shadow: none; }
html[data-glass="flat"] .lvl-bar, html[data-glass="flat"] .tc-bar { background: var(--f-track); }
html[data-glass="flat"] .lvl-fill, html[data-glass="flat"] .tc-bar i { background: var(--accent-2); }
html[data-glass="flat"] .mobile-nav { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; border-top-color: var(--f-line); }
html[data-glass="flat"] .mobile-nav .mobile-add span { background: var(--purple); color: var(--accent-ink); box-shadow: none; }

/* ---------- controls ---------- */
html[data-glass="flat"] .primary-btn { background: var(--purple); box-shadow: none; }
html[data-glass="flat"] .primary-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--purple) 86%, #fff); box-shadow: none; }
html[data-glass="flat"][data-theme="light"] .primary-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--purple) 86%, #000); }
/* segmented controls (date range, pickers): a quiet neutral pill, the accent stays for actions */
html[data-glass="flat"] .seg, html[data-glass="flat"] .lang-switch { background: transparent; border: 1px solid var(--f-line); }
html[data-glass="flat"] .seg-slider .seg-pill { background: var(--f-sel); }
html[data-glass="flat"] .seg button.active, html[data-glass="flat"] .lang-switch button.active { background: var(--f-sel); color: var(--text); }
html[data-glass="flat"] .seg-slider button.active { color: var(--text); }
html[data-glass="flat"] .chart-thumb.selected { box-shadow: 0 0 0 2px rgba(var(--ac-rgb), 0.55); }

/* ---------- charts and progress: thin lines, flat fills, no glow ---------- */
html[data-glass="flat"] .chart-line { filter: none; stroke-width: 2; }
html[data-glass="flat"] .chart-area { opacity: 0.5; }
html[data-glass="flat"] .end-pulse { display: none; }
html[data-glass="flat"] .mini-ring { filter: none; }
html[data-glass="flat"] .goal-track { stroke: var(--f-track); }
html[data-glass="flat"] .goal-ring-empty { border-color: var(--f-track); }
html[data-glass="flat"] .goal-mini, html[data-glass="flat"] .bar-track, html[data-glass="flat"] .ses-bar, html[data-glass="flat"] .pnl-bar { background: var(--f-track); }
html[data-glass="flat"] .goal-mini span { background: var(--accent-2); }
html[data-glass="flat"] .ses-bar span.pos, html[data-glass="flat"] .r-dbar.pos { background: var(--green); }
html[data-glass="flat"] .ses-bar span.neg, html[data-glass="flat"] .r-dbar.neg { background: var(--red); }
html[data-glass="flat"] .tc-ring { background: conic-gradient(var(--accent-2) calc(var(--xp) * 1turn), var(--f-track) 0); }

/* ---------- no boxes inside boxes ---------- */
/* sessions: three columns split by hairlines instead of three framed tiles */
html[data-glass="flat"] .sessions-body { gap: 0; }
html[data-glass="flat"] .ses-col { background: none; border: 0; border-radius: 0; padding: 2px 18px; box-shadow: -1px 0 0 var(--f-line); }
html[data-glass="flat"] .ses-col:first-child { padding-left: 0; box-shadow: none; }
html[data-glass="flat"] .ses-col:last-child { padding-right: 0; }
@media (max-width: 860px) {
  html[data-glass="flat"] .ses-col, html[data-glass="flat"] .ses-col:last-child { padding: 12px 0; box-shadow: 0 -1px 0 var(--f-line); }
  html[data-glass="flat"] .ses-col:first-child { padding-top: 0; box-shadow: none; }
}
html[data-glass="flat"] .banner { border: 0; }

/* tinted highlights: a flat wash instead of a gradient */
html[data-glass="flat"][data-theme] .review-nudge { background: color-mix(in srgb, var(--purple) 8%, var(--surface)); }
html[data-glass="flat"][data-theme] .owner-access-card { background: var(--surface); }
html[data-glass="flat"][data-theme] .ins-block.hl.good { background: color-mix(in srgb, var(--green) 6%, var(--surface)); }
html[data-glass="flat"][data-theme] .ins-block.hl.bad { background: color-mix(in srgb, var(--red) 6%, var(--surface)); }
html[data-glass="flat"][data-theme] .nr-next { background: color-mix(in srgb, #f23645 6%, var(--surface)); }
html[data-glass="flat"] .cal-cell.win { background: rgba(52, 211, 153, 0.07); }
html[data-glass="flat"] .cal-cell.loss { background: rgba(248, 113, 113, 0.07); }
html[data-glass="flat"] .cal-cell.be { background: rgba(251, 191, 36, 0.07); }
html[data-glass="flat"] .ach.got { background: color-mix(in srgb, #fbbf24 7%, var(--surface-2)); }
html[data-glass="flat"] .toast.achv { background: var(--surface); }
html[data-glass="flat"] .nr-ev.soon { background: rgba(var(--ac-rgb), 0.06); }
html[data-glass="flat"] .nr-ev.soon.imp-high { background: rgba(242, 54, 69, 0.07); }
html[data-glass="flat"] .nr-next-cd { text-shadow: none; }
html[data-glass="flat"] .nr-imp.high { box-shadow: none; }
html[data-glass="flat"] .nr-newpill { background: var(--purple); color: var(--accent-ink); box-shadow: none; }

/* ---------- plans and badges: solid colours ---------- */
html[data-glass="flat"] .plan-badge.plan-pro { background: var(--purple); color: var(--accent-ink); }
html[data-glass="flat"] .plan-badge.plan-max, html[data-glass="flat"] .max-badge { background: #f5b942; color: #1a1405; box-shadow: none; }
html[data-glass="flat"] .lc-cta { box-shadow: none; }
html[data-glass="flat"] .lc-body span { background: rgba(var(--ac-rgb), 0.18); }
html[data-glass="flat"] .price-card.hl, html[data-glass="flat"] .price-card.max, html[data-glass="flat"] .price-card.max.hl { background: var(--surface-2); box-shadow: none; transform: none; }
html[data-glass="flat"] .prop-rule.goal .pr-bar i { background: var(--purple); }
html[data-glass="flat"] .sh-stage canvas { box-shadow: none; }

/* ---------- game moments ---------- */
html[data-glass="flat"] .gp-step.cur { box-shadow: 0 0 0 1px var(--accent-2) inset; }

/* ---------- overlays: solid panels with a plain drop shadow (they do float) ---------- */
html[data-glass="flat"][data-theme] .auth-card, html[data-glass="flat"][data-theme] .modal, html[data-glass="flat"][data-theme] .dlg,
html[data-glass="flat"][data-theme] .toast, html[data-glass="flat"][data-theme] .flt-pop {
  background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: var(--f-pop);
}
html[data-glass="flat"] .modal-overlay, html[data-glass="flat"] .dlg-overlay, html[data-glass="flat"] .report-overlay { -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-glass="flat"][data-theme="dark"] .modal-overlay, html[data-glass="flat"][data-theme="dark"] .dlg-overlay { background: rgba(0, 0, 0, 0.62); }
html[data-glass="flat"] .report-bar { background: var(--surface); }

/* ---------- Settings → theme previews drawn flat too ---------- */
html[data-glass="flat"] .theme-sw:hover { transform: none; }
html[data-glass="flat"] .theme-sw.active { box-shadow: 0 0 0 1px var(--sw) inset; }
html[data-glass="flat"] .sw-prev::before { display: none; }
html[data-glass="flat"] .sw-prev i { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.1); }

/* the bottom of the sidebar (Settings…) has no sliding indicator: same neutral pill as the main nav */
html[data-glass="flat"] .sidebar-bottom .nav-item.active { background: var(--f-sel); }

/* =====================================================================
   Reward glow — the flat UI stays calm so the moments that reward your
   PROCESS stand out: the streak, daily missions, XP and level, the
   monthly goal, a clean day, a good score, achievements, a podium spot.
   Money itself never glows: a dopamine hit on P&L pushes towards
   overtrading and revenge trades, the tilt this app exists to stop.
   ===================================================================== */
html[data-glass="flat"] {
  --g-fire: rgba(251, 146, 60, 0.6);
  --g-xp: rgba(var(--ac2-rgb), 0.6);
  --g-ok: rgba(52, 211, 153, 0.55);
  --g-gold: rgba(251, 191, 36, 0.6);
}

/* the streak flame burns brighter the longer the chain (don't break it) */
html[data-glass="flat"] .tc-streak:not(.tier0) .tc-flame { background: radial-gradient(circle at 50% 66%, rgba(251, 146, 60, 0.17), transparent 68%); }
html[data-glass="flat"] .tc-streak.tier0 .tc-flame { background: none; }
html[data-glass="flat"] .tc-streak.tier1 .tc-flame span { filter: drop-shadow(0 2px 8px var(--g-fire)); }
html[data-glass="flat"] .tc-streak.tier2 .tc-flame span { filter: drop-shadow(0 3px 12px var(--g-fire)); }
html[data-glass="flat"] .tc-streak.tier3 .tc-flame span { filter: drop-shadow(0 4px 16px rgba(251, 146, 60, 0.85)); }
html[data-glass="flat"] .tc-streak.tier4 .tc-flame { background: radial-gradient(circle at 50% 66%, rgba(56, 189, 248, 0.2), transparent 68%); }
html[data-glass="flat"] .tc-streak.tier4 .tc-flame span { filter: hue-rotate(185deg) saturate(1.4) drop-shadow(0 4px 18px rgba(56, 189, 248, 0.9)); }
html[data-glass="flat"] .lvl-flame:not(.tier0) .fl { filter: drop-shadow(0 0 5px var(--g-fire)); }
html[data-glass="flat"] .lvl-flame.tier4 .fl { filter: hue-rotate(185deg) saturate(1.4) drop-shadow(0 0 6px rgba(56, 189, 248, 0.85)); }

/* XP and level: progress you watch fill up (the bars keep their moving shine) */
html[data-glass="flat"] .lvl-badge { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14) inset, 0 4px 16px -4px var(--g-xp); }
html[data-glass="flat"] .lvl-bar, html[data-glass="flat"] .tc-bar { filter: drop-shadow(0 0 5px var(--g-xp)); }
html[data-glass="flat"] .tc-ring { filter: drop-shadow(0 0 9px rgba(var(--ac2-rgb), 0.32)); }

/* daily missions: every tick lights up, the full set even more; the bonus is in view */
html[data-glass="flat"] li.done .tc-box { box-shadow: 0 0 12px -1px var(--g-ok); }
html[data-glass="flat"] .tc-count.all { box-shadow: 0 0 16px -3px var(--g-ok); }
html[data-glass="flat"] .tc-bonus { color: var(--accent-text); }

/* the monthly goal arc glows, more once it's reached */
html[data-glass="flat"] .goal-prog { filter: drop-shadow(0 0 5px rgba(var(--ac2-rgb), 0.6)); }
html[data-glass="flat"] .goal-prog.done { filter: drop-shadow(0 0 9px rgba(52, 211, 153, 0.8)); }

/* a good discipline score (Strong / Elite) */
html[data-glass="flat"] .score-num[style*="--green"] { text-shadow: 0 0 24px rgba(52, 211, 153, 0.38); }
html[data-glass="flat"] .grade-pill[style*="--green"] { box-shadow: 0 0 16px -4px rgba(52, 211, 153, 0.7); }

/* live streak counters and a clean day (no rule broken) */
html[data-glass="flat"] .streak-ico.lit { box-shadow: 0 0 16px -5px var(--g-gold); }
html[data-glass="flat"] .banner.ok { box-shadow: inset 0 0 0 1px rgba(52, 211, 153, 0.24), 0 0 24px -12px var(--g-ok); }

/* rare, big moments: achievements, level-ups, XP pops (their shine and rays are back) */
html[data-glass="flat"] .ach.got { box-shadow: 0 0 20px -9px var(--g-gold); }
html[data-glass="flat"][data-theme] .toast.achv { box-shadow: var(--f-pop), 0 0 26px -8px var(--g-gold); }

/* the podium and the plan badge you earned */
html[data-glass="flat"] .lb-row.top .lb-rank { display: inline-block; filter: drop-shadow(0 0 6px var(--g-gold)); }
html[data-glass="flat"] .lb-av.max { box-shadow: 0 0 0 2px #f5b942, 0 0 14px -2px rgba(245, 185, 66, 0.75); }
html[data-glass="flat"] .plan-badge.plan-max { box-shadow: 0 2px 12px -4px rgba(245, 185, 66, 0.8); }

/* Insights: the moments of learning glow — the edge you found, where you shine
   in each breakdown (✦), following your plan, your best days, rating your week.
   Leaks and mistakes stay plain: no reward for those. */
html[data-glass="flat"][data-theme] .ins-block.hl.good { box-shadow: inset 0 0 0 1px rgba(52, 211, 153, 0.3), 0 0 36px -14px var(--g-ok); }
html[data-glass="flat"] .ins-block.hl.good .eyebrow { color: var(--green); text-shadow: 0 0 14px rgba(52, 211, 153, 0.5); }
html[data-glass="flat"] .ins-block:not([data-k="mistake"]) .bar-row.best .bar-fill.pos { box-shadow: 0 0 12px rgba(52, 211, 153, 0.6); }
html[data-glass="flat"] .ins-block:not([data-k="mistake"]) .bar-row.best .bar-name::after { content: " ✦"; color: var(--accent-2); text-shadow: 0 0 10px rgba(var(--ac2-rgb), 0.85); }
html[data-glass="flat"] .ins-block[data-k="plan"] .bar-row[data-key="y"] .bar-fill.pos { box-shadow: 0 0 16px rgba(52, 211, 153, 0.75); }
html[data-glass="flat"] .ins-block[data-k="plan"] .bar-row[data-key="y"] .bar-name { color: var(--green); }
html[data-glass="flat"] .hm-c.p3 { box-shadow: 0 0 6px rgba(52, 211, 153, 0.3); }
html[data-glass="flat"] .hm-c.p4 { box-shadow: 0 0 9px rgba(52, 211, 153, 0.6); }
html[data-glass="flat"] .stars button.on { filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.55)); }

/* Settings → Language: a plain list of every language on offer */
.lang-select { min-width: 170px; height: 34px; padding: 0 30px 0 12px; border-radius: 9px; border: 1px solid var(--border-strong); background: var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2394a3b8' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") right 11px center no-repeat; color: var(--text); font: 600 13px Inter, system-ui, sans-serif; -webkit-appearance: none; appearance: none; cursor: pointer; }
.lang-select:focus-visible { outline: 2px solid rgba(var(--ac-rgb), .6); outline-offset: 2px; }
.lang-select option { background: var(--surface); color: var(--text); }
