:root { --chart-solved:#3e9dff; --chart-ok:#3ddc97; --chart-soft:rgba(61,220,151,0.45); --chart-bad:#ff5c5c;
  --cal-1:rgba(61,220,151,0.3); --cal-2:rgba(61,220,151,0.55); --cal-3:rgba(61,220,151,0.8); }
:root.theme-light { --chart-solved:#2b7fd9; --chart-ok:#1da067; --chart-soft:#a6e6c8; --chart-bad:#e5484d;
  --cal-1:#c2eed9; --cal-2:#7fd4ac; --cal-3:#3db583; }
.insights { padding-bottom:110px; }
.insights h1 { font-size:calc(26px * var(--fs, 1)); line-height:1.2; margin-bottom:8px; }
.insights .subtitle { font-size:calc(14px * var(--fs, 1)); margin-bottom:22px; }
.insight-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:18px 0; }
.insight-metric { background:var(--surface); padding:16px 8px; border-radius:18px; text-align:center; }
.insight-metric strong { display:block; font-size:calc(25px * var(--fs, 1)); color:var(--text); margin-bottom:6px; }
.insight-metric span { display:block; font-size:calc(12px * var(--fs, 1)); line-height:1.45; color:var(--text-muted); font-weight:400; }
.insight-card { padding:18px; border:1px solid var(--border); border-radius:20px; margin:16px 0; }
.insight-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:8px 0 16px; }
.insight-heading h2 { font-size:calc(17px * var(--fs, 1)); margin:0; }
.insight-heading > span { font-size:calc(12px * var(--fs, 1)); color:var(--text-muted); }
.insight-week { display:grid; grid-template-columns:repeat(7,1fr); gap:7px; }
.insight-day { display:flex; flex-direction:column; align-items:center; gap:7px; color:var(--text-muted); font-size:calc(12px * var(--fs, 1)); }
.insight-day b { display:grid; place-items:center; height:33px; width:33px; border-radius:50%; background:var(--surface); font-size:calc(18px * var(--fs, 1)); }
.insight-day.active b { background:var(--primary); color:#113b2b; font-size:calc(12px * var(--fs, 1)); font-weight:800; }
.insight-day.today b { outline:2px solid var(--violet); outline-offset:3px; }
.insight-day small { font-size:calc(12px * var(--fs, 1)); }
.insight-note { color:var(--text-muted); font-size:calc(12px * var(--fs, 1)); line-height:1.6; margin:14px 0 0; }
.insight-recommend { display:flex; flex-direction:column; gap:10px; background:var(--surface); border:0; border-left:4px solid var(--violet); border-radius:18px; padding:18px; margin:20px 0 26px; text-align:left; width:100%; color:var(--text); font-family:inherit; cursor:pointer; }
.insight-eyebrow { color:var(--violet-ink); font-size:calc(12px * var(--fs, 1)); font-weight:800; letter-spacing:1px; }
.insight-recommend strong { font-size:calc(16px * var(--fs, 1)); }
.insight-recommend > span:last-child { color:var(--text-muted); font-size:calc(12px * var(--fs, 1)); }
.insight-recommend b { float:right; color:var(--violet-ink); }
.insight-mode { width:100%; display:block; text-align:left; font-family:inherit; background:transparent; border:1px solid var(--border); border-radius:18px; padding:16px; margin-bottom:10px; cursor:pointer; color:var(--text); }
.insight-mode-top { display:flex; justify-content:space-between; align-items:center; gap:14px; }
.insight-mode-top strong { font-size:calc(14px * var(--fs, 1)); line-height:1.5; }
.insight-mode-top > span { font-size:calc(17px * var(--fs, 1)); font-weight:800; color:var(--primary-ink); flex-shrink:0; }
.insight-mode p { font-size:calc(12px * var(--fs, 1)); color:var(--text-muted); margin:8px 0 12px; }
.insight-track { height:5px; background:var(--surface-2); border-radius:8px; overflow:hidden; }
.insight-track i { display:block; height:100%; background:var(--chart-ok); border-radius:8px; }
.insight-errors { display:block; color:var(--coral-ink); font-size:calc(12px * var(--fs, 1)); margin-top:10px; }
.insight-back { background:none; border:0; color:var(--text-muted); padding:10px 0; font:inherit; margin:0 0 12px; cursor:pointer; }
.insight-performance { display:flex; align-items:center; justify-content:space-around; gap:20px; }
.insight-ring { width:120px; height:120px; flex-shrink:0; border-radius:50%; background:conic-gradient(var(--chart-ok) var(--accuracy),var(--surface-2) 0); padding:11px; }
.insight-ring > div { height:100%; border-radius:50%; background:var(--bg,#fff); display:flex; align-items:center; justify-content:center; flex-direction:column; }
.insight-ring strong { font-size:calc(26px * var(--fs, 1)); }
.insight-ring span { font-size:calc(12px * var(--fs, 1)); color:var(--text-muted); margin-top:4px; }
.insight-coverage > strong { font-size:calc(28px * var(--fs, 1)); }
.insight-coverage strong span { font-size:calc(17px * var(--fs, 1)); color:var(--text-muted); }
.insight-coverage p { font-size:calc(12px * var(--fs, 1)); line-height:1.6; color:var(--text-muted); }
.insight-error-row { display:flex; justify-content:space-between; align-items:center; gap:12px; border-bottom:1px solid var(--border); padding:14px 0; }
.insight-error-row strong { font-size:calc(13px * var(--fs, 1)); overflow-wrap:anywhere; }
.insight-error-row span { font-size:calc(12px * var(--fs, 1)); color:var(--text-muted); white-space:nowrap; }
.insight-error-row span.bad { color:var(--coral-ink); }
.insight-error-row span.good, .insight-heading > span.good { color:var(--primary-ink); font-weight:700; }
.insight-mode:focus-visible,.insight-recommend:focus-visible { outline:2px solid var(--violet); outline-offset:3px; }
.insight-attr-row { padding:12px 0; border-bottom:1px solid var(--border); }
.insight-attr-row:last-child { border-bottom:0; padding-bottom:0; }
.insight-attr-top { display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:8px; }
.insight-attr-top strong { font-size:calc(13px * var(--fs, 1)); line-height:1.4; min-width:0; overflow-wrap:anywhere; }
.insight-attr-top span { font-size:calc(12px * var(--fs, 1)); color:var(--text-muted); white-space:nowrap; flex-shrink:0; }
.insight-subheading { margin-top:22px; }
.insight-subheading h2 { font-size:calc(14px * var(--fs, 1)); color:var(--text-muted); }
.insight-more { display:block; width:100%; margin-top:12px; padding:12px 0; background:none; border:0; color:var(--violet-ink); font:inherit; font-size:calc(13px * var(--fs, 1)); font-weight:700; cursor:pointer; }
.insight-mode.untouched .insight-mode-top > span { color:var(--text-muted); font-weight:700; }
.chart-big { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; margin:-4px 0 12px; }
.chart-big strong { font-size:calc(30px * var(--fs, 1)); line-height:1; }
.chart-big span { font-size:calc(13px * var(--fs, 1)); color:var(--text-muted); }
.chart-up { color:var(--primary-ink); font-weight:800; }
.chart-down { color:var(--coral-ink); font-weight:800; }
.chart-svg { display:block; width:100%; height:100px; overflow:visible; }
.chart-line { fill:none; stroke:var(--chart-ok); stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.chart-area { fill:var(--chart-ok); opacity:0.15; }
.chart-line-solved { stroke:var(--chart-solved); stroke-width:2; }
.chart-dot.chart-dot-solved { background:var(--chart-solved); }
.chart-legend i.solved { background:var(--chart-solved); }
.chart-big-item { display:inline-flex; align-items:baseline; gap:8px; margin-right:8px; }
.chart-big-item strong { color:var(--text); }
.chart-big strong.chart-big-k { color:var(--primary-ink); }
.chart-bar-ok { fill:var(--chart-ok); }
.chart-bar-bad { fill:var(--chart-bad); }
.chart-axis { display:flex; justify-content:space-between; font-size:calc(12px * var(--fs, 1)); color:var(--text-muted); margin-top:6px; }
.chart-compare { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:-4px 0 14px; }
.chart-compare strong { display:block; font-size:calc(22px * var(--fs, 1)); }
.chart-compare span { font-size:calc(12px * var(--fs, 1)); color:var(--text-muted); }
.chart-legend { display:flex; flex-wrap:wrap; gap:6px 14px; font-size:calc(12px * var(--fs, 1)); color:var(--text-muted); margin-top:10px; align-items:center; }
.chart-legend i, .mastery-counts i { display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:5px; vertical-align:-1px; }
.chart-legend i.ok, .mastery-legend i.k, .mastery-counts i.k { background:var(--chart-ok); }
.chart-legend i.bad, .mastery-legend i.e, .mastery-counts i.e { background:var(--chart-bad); }
.mastery-legend i.s, .mastery-counts i.s { background:var(--chart-soft); }
.mastery-counts i.n { background:var(--surface-2); }
.mastery-legend { margin:-6px 0 12px; }
.mastery-bar { display:flex; height:7px; background:var(--surface-2); border-radius:8px; overflow:hidden; }
.mastery-bar i { display:block; height:100%; }
.mastery-bar i.k { background:var(--chart-ok); }
.mastery-bar i.s { background:var(--chart-soft); }
.mastery-bar i.e { background:var(--chart-bad); }
.mastery-counts { display:grid; grid-template-columns:1fr 1fr; gap:8px 12px; margin-top:12px; font-size:calc(12px * var(--fs, 1)); color:var(--text-muted); }
.mastery-counts b { color:var(--text); }
.insight-track i.weak { background:var(--chart-bad); }
.cal-grid { display:grid; grid-template-rows:repeat(7,1fr); grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:3px; min-width:0; }
.cal-grid i, .cal-legend i { display:block; aspect-ratio:1; border-radius:3px; background:var(--surface-2); }
.cal-legend i { width:11px; margin:0; }
.cal-grid i.cal-future { background:transparent; }
.cal-l1 { background:var(--cal-1) !important; }
.cal-l2 { background:var(--cal-2) !important; }
.cal-l3 { background:var(--cal-3) !important; }
.cal-l4 { background:var(--chart-ok) !important; }
.cal-grid i.cal-today { outline:2px solid var(--violet); outline-offset:1px; }
.cal-legend { gap:4px; }
.cal-legend span:first-child { margin-right:4px; }
.cal-legend span:last-child { margin-left:4px; }
.mastery-counts--stack { grid-template-columns:1fr; margin-top:0; gap:8px; font-size:calc(13px * var(--fs, 1)); }
.insight-card > .mastery-bar { margin-top:16px; }
.insight-untouched { margin-top:14px; }
.insight-untouched > summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; padding:14px 16px; border:1px dashed var(--border); border-radius:18px; font-size:calc(14px * var(--fs, 1)); font-weight:700; color:var(--text-muted); }
.insight-untouched > summary::-webkit-details-marker { display:none; }
.insight-untouched > summary span { font-size:calc(12px * var(--fs, 1)); font-weight:400; color:var(--violet-ink); }
.insight-untouched[open] > summary span { visibility:hidden; }
.insight-untouched > .insight-modes { margin-top:10px; }
.cal-wrap { display:grid; grid-template-columns:auto minmax(0,1fr); gap:4px 6px; }
.cal-months { display:grid; grid-template-columns:repeat(20,minmax(0,1fr)); gap:3px; font-size:calc(12px * var(--fs, 1)); color:var(--text-muted); }
.cal-months span { white-space:nowrap; overflow:visible; }
.cal-days { display:grid; grid-template-rows:repeat(7,1fr); gap:3px; font-size:calc(12px * var(--fs, 1)); color:var(--text-muted); align-items:center; }
.mastery-bar { gap:2px; }
.chart-touch { position:relative; }
.chart-touch svg { touch-action:pan-y; cursor:crosshair; -webkit-tap-highlight-color:transparent; user-select:none; }
.chart-readout { min-height:34px; margin:0 0 6px; font-size:calc(12px * var(--fs, 1)); line-height:1.4; color:var(--text-muted); }
.chart-readout b { color:var(--text); font-weight:700; }
.chart-readout .ok { color:var(--primary-ink); }
.chart-readout .bad { color:var(--coral-ink); }
.chart-bar-sel { fill:transparent; }
.has-sel g[data-i] { opacity:0.3; transition:opacity .12s; }
.has-sel g[data-i].sel { opacity:1; }
.has-sel g[data-i].sel .chart-bar-sel { fill:var(--text); opacity:0.07; }
.chart-guide { stroke:var(--text-muted); stroke-width:1; stroke-dasharray:3 3; vector-effect:non-scaling-stroke; }
.chart-dot { position:absolute; width:10px; height:10px; margin:-5px 0 0 -5px; border-radius:50%; background:var(--chart-ok); box-shadow:0 0 0 3px var(--bg, #fff); pointer-events:none; }
.cal-grid i[data-i] { cursor:pointer; }
.cal-grid i.sel { outline:2px solid var(--text); outline-offset:1px; }
.fav-row { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--border); }
.fav-row:last-child { border-bottom:0; padding-bottom:0; }
.fav-row-label { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; background:none; border:0; padding:0; text-align:left; font:inherit; color:var(--text); cursor:pointer; }
.fav-row-label strong { font-size:calc(14px * var(--fs, 1)); }
.fav-row-label span { font-size:calc(12px * var(--fs, 1)); color:var(--text-muted); }
.fav-row-go { width:auto; flex:none; padding:10px 14px; font-size:calc(13px * var(--fs, 1)); }
.fav-status { margin-left:auto; }
.fav-remove { flex:none; display:inline-grid; place-items:center; width:36px; height:36px; margin:-8px -8px -8px 0; border:0; background:none; cursor:pointer; }
.fav-remove svg { width:18px; height:18px; fill:var(--fav-fill); stroke:var(--fav-stroke); stroke-width:1.8; stroke-linejoin:round; }
.fav-h-icon { display:inline-block; vertical-align:-2px; margin-right:6px; }
.fav-h-icon svg { width:17px; height:17px; fill:var(--fav-fill); stroke:var(--fav-stroke); stroke-width:1.8; stroke-linejoin:round; }
.insight-start { margin:14px 0 6px; padding:18px 18px 16px; border-radius:20px; background:var(--surface); border:1.5px dashed var(--border); text-align:center; }
.insight-start strong { display:block; font-size:calc(17px * var(--fs, 1)); font-weight:800; }
.insight-start p { margin:6px 0 14px; color:var(--text-muted); font-size:calc(14px * var(--fs, 1)); line-height:1.45; }
.insight-start .primary-btn { width:100%; }
@media (min-width: 700px) {
  .insight-mode p { font-size:calc(13px * var(--fs, 1)); }
  .insight-mode-top strong { font-size:calc(15px * var(--fs, 1)); }
  #screen-stats p { max-width: 62ch; }
  .insight-start p { margin-left: auto; margin-right: auto; font-size:calc(15px * var(--fs, 1)); }
}
@media (hover: hover) and (pointer: fine) and (min-width: 1280px) and (orientation: landscape) {
  :is(#screen-stats, #screen-oge-stats) .insights { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; align-items: start; grid-auto-flow: dense; }
  :is(#screen-stats, #screen-oge-stats) .insights > h1,
  :is(#screen-stats, #screen-oge-stats) .insights > .subtitle,
  :is(#screen-stats, #screen-oge-stats) .insights > .insight-summary,
  :is(#screen-stats, #screen-oge-stats) .insights > .insight-recommend:not(:nth-last-child(-n+2)) { grid-column: 1 / -1; }
  :is(#screen-stats, #screen-oge-stats) .insights > .insight-heading,
  :is(#screen-stats, #screen-oge-stats) .insights > .chart-legend,
  :is(#screen-stats, #screen-oge-stats) .insights > .insight-modes,
  :is(#screen-stats, #screen-oge-stats) .insights > .insight-untouched { grid-column: 1; }
  :is(#screen-stats, #screen-oge-stats) .insights > section.insight-card:nth-of-type(3) { grid-column: 2; grid-row: span 4; margin-top: 0; }
  :is(#screen-stats, #screen-oge-stats) .insights > section.insight-card:nth-of-type(1),
  :is(#screen-stats, #screen-oge-stats) .insights > section.insight-card:nth-of-type(2) { margin-top: 0; }
  :is(#screen-stats, #screen-oge-stats) .insights > .insight-recommend:nth-last-child(-n+2) { margin-top: 16px; }
}