:root{--bg:#f4f1ea;--card:#fff;--ink:#1d2a2e;--muted:#6b7478;--line:#e2ddd2;--pri:#0f5e5a;--pri2:#0b4744;--ok:#1f8a4c;--okbg:#e7f5ec;--err:#b3261e;--errbg:#fbeaea;--acc:#c9822b;--r:10px}
*{box-sizing:border-box}body{margin:0;font:16px/1.55 "Segoe UI",system-ui,sans-serif;background:var(--bg);color:var(--ink)}
a{color:var(--pri)}h1,h2,h3{font-family:Georgia,serif;margin:.2em 0}
.top{display:flex;justify-content:space-between;align-items:center;padding:14px 24px;background:var(--pri2);color:var(--on-pri);flex-wrap:wrap;gap:8px}
.top a{color:var(--on-pri);text-decoration:none;margin-left:16px}.top .brand{margin:0;font-family:Georgia,serif;font-size:1.2em}.who{opacity:.7;margin-left:16px}
.wrap{max-width:1050px;margin:24px auto;padding:0 16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px;margin-bottom:16px}
.narrow{max-width:420px;margin:40px auto}.center{text-align:center;justify-content:center}
.hero{display:grid;gap:12px}.stats{display:flex;gap:28px}.stats div{font-size:1.5em}.stats small{display:block;font-size:.5em;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.course{text-decoration:none;color:inherit;transition:transform .15s}.course:hover{transform:translateY(-2px);border-color:var(--pri)}
.code{display:inline-block;font-size:.75em;font-weight:700;letter-spacing:.1em;color:var(--acc);text-transform:uppercase}
.bar{height:8px;background:var(--line);border-radius:9px;overflow:hidden;margin:6px 0}.bar span{display:block;height:100%;background:var(--pri)}
.muted{color:var(--muted)}.small{font-size:.85em}
.btn{display:inline-block;padding:9px 16px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink);text-decoration:none;cursor:pointer;font:inherit}
.btn:hover{border-color:var(--pri)}.btn.primary{background:var(--pri);border-color:var(--pri);color:var(--on-pri)}.btn.primary:hover{background:var(--pri2)}
.btn.danger{color:var(--err);border-color:var(--errbg)}.btn.ghost{background:transparent;border-color:transparent;color:var(--muted)}.btn.sm{padding:5px 10px;font-size:.85em}.btn.full{width:100%}
.inline{display:inline}.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:12px}
label{display:block;margin:10px 0;font-size:.9em;color:var(--muted)}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],input[type=file],select,textarea{display:block;width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:8px;font:inherit;color:var(--ink);background:var(--card);margin-top:4px}
.flash{padding:10px 14px;border-radius:8px;margin-bottom:14px;background:var(--okbg);color:var(--ok)}.flash.err{background:var(--errbg);color:var(--err)}
table.list{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.list th,.list td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}.list th{font-size:.75em;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);background:var(--soft)}
.practice-head{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px}
.question{margin-top:14px}.stem{font-size:1.05em;margin-bottom:16px}.stem table,.note-body table,.explain table{border-collapse:collapse;margin:8px 0}
.stem td,.note-body td,.explain td{border:1px solid var(--line);padding:4px 8px}
.options{display:grid;gap:8px}.opt{display:flex;gap:12px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:8px;cursor:pointer;color:var(--ink);margin:0;font-size:1em}
.opt:hover{border-color:var(--pri)}.opt input{display:none}.opt:has(input:checked){border-color:var(--pri);background:var(--pri-soft)}
.letter{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--bg);font-weight:700}
.opt.correct{background:var(--okbg);border-color:var(--ok)}.opt.correct .letter{background:var(--ok);color:var(--on-pri)}.opt.wrong{background:var(--errbg);border-color:var(--err)}.opt.wrong .letter{background:var(--err);color:var(--on-pri)}
.verdict{margin:16px 0 8px;font-weight:700;font-size:1.2em}.verdict.ok{color:var(--ok)}.verdict.err{color:var(--err)}
.concept{background:var(--acc-soft);border-left:4px solid var(--acc);padding:10px 14px;margin:8px 0}.explain{margin:10px 0}
.note{margin-top:14px;border-top:1px solid var(--line);padding-top:10px}.note summary{cursor:pointer;font-weight:700;color:var(--pri)}.note img{max-width:100%;height:auto}.extra{background:var(--bg);padding:10px;border-radius:8px;margin-top:8px}
.admin-nav{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}.admin-nav a{padding:6px 12px;border-radius:8px;background:var(--card);border:1px solid var(--line);text-decoration:none}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0 16px}
.badge{display:inline-block;padding:1px 8px;border-radius:9px;font-size:.75em;background:var(--bg)}.badge.err{background:var(--errbg);color:var(--err)}.badge.ok{background:var(--okbg);color:var(--ok)}
pre.log{background:var(--ink);color:var(--bg);padding:12px;border-radius:8px;overflow:auto;max-height:420px;font-size:.85em}
.tools{display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap;margin:-4px 0 16px}.tools .mynote{flex:1;min-width:260px;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:8px 12px}
.mynote summary{cursor:pointer;color:var(--pri);font-weight:600;font-size:.9em}.mynote textarea{margin-top:8px}
.btn.bookmark.on{background:var(--acc-soft);border-color:var(--acc);color:var(--acc)}
.mynote-view{background:var(--acc-soft);border-left:4px solid var(--acc);padding:8px 12px;border-radius:4px;margin:6px 0}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0}.tabs a{padding:6px 12px;border-radius:8px;background:var(--card);border:1px solid var(--line);text-decoration:none;font-size:.9em}.tabs a.on{background:var(--pri);border-color:var(--pri);color:var(--on-pri)}
.saved p{margin:6px 0}
.exam-bar{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:10px 16px}
.timer{font:700 1.5em/1 ui-monospace,Consolas,monospace;color:var(--pri);padding:6px 12px;border-radius:8px;background:var(--pri-soft)}.timer.warn{color:var(--err);background:var(--errbg)}
.flagbox{display:inline-flex;gap:6px;align-items:center;margin:14px 0 0;color:var(--acc);cursor:pointer}.flagbox input{width:auto;margin:0}
.spacer{flex:1}
.navgrid{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.navq{width:38px;height:34px;border:1px solid var(--line);border-radius:6px;background:var(--card);cursor:pointer;font:inherit;font-size:.85em;color:var(--ink);position:relative;display:inline-grid;place-items:center}
.navq.answered{background:var(--pri);border-color:var(--pri);color:var(--on-pri)}.navq.flagged{box-shadow:inset 0 -4px 0 var(--acc)}.navq.current{outline:2px solid var(--acc);outline-offset:1px}
.navq.sample{width:24px;height:22px;cursor:default;vertical-align:middle}
.opt .yours{margin-left:auto}.badge.flag{background:var(--acc-soft);color:var(--acc)}
/* Phase 3 */
.opt-row{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;margin:8px 0}.opt-row .correct{display:flex;gap:4px;align-items:center;margin:8px 0 0;white-space:nowrap}.opt-row .correct input{width:auto}
.preview{border:1px dashed var(--line);border-radius:8px;padding:12px;background:var(--card);max-height:240px;overflow:auto}.preview img,.stem img{max-width:100%;height:auto}
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:end}.filters label{margin:0}.filters select,.filters input{min-width:160px}
.pager{display:flex;gap:6px;margin:14px 0;align-items:center}
.clip{max-width:520px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Phase 4: weak-subject analysis */
.tag{display:inline-block;font-size:.72em;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:2px 8px;border-radius:99px;background:var(--line);color:var(--muted)}
.tag.weak{background:var(--errbg);color:var(--err)}.tag.borderline{background:var(--acc-soft);color:var(--acc)}.tag.strong{background:var(--okbg);color:var(--ok)}
.t-weak{color:var(--err)}.t-borderline{color:var(--acc)}.t-strong{color:var(--ok)}
.focus{border-top:4px solid var(--line)}.focus.weak{border-top-color:var(--err)}.focus.borderline{border-top-color:var(--acc)}
.focus.weak .bar span,.bar.score.weak span{background:var(--err)}.focus.borderline .bar span,.bar.score.borderline span{background:var(--acc)}.bar.score.strong span{background:var(--ok)}
.bar.score{position:relative}.bar.score i{position:absolute;top:0;bottom:0;width:2px;background:var(--ink);opacity:.5}
.trend{font-size:.8em;margin-left:4px}.trend.up{color:var(--ok)}.trend.down{color:var(--err)}

/* ===== v3 UI polish ===== */
/* Striped animated progress bars, coloured by value */
.bar{position:relative;height:12px;background:var(--soft);border:1px solid var(--line);border-radius:99px;overflow:hidden;margin:8px 0}
.bar span{--c:var(--pri);display:block;height:100%;border-radius:99px;background-color:var(--c);
  background-image:linear-gradient(45deg,rgba(255,255,255,.28) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.28) 50%,rgba(255,255,255,.28) 75%,transparent 75%,transparent);
  background-size:16px 16px;animation:mt-stripes 1s linear infinite,mt-grow .9s cubic-bezier(.2,.8,.2,1) both;box-shadow:0 0 10px -2px var(--c);transform-origin:left}
.bar.tone-low span{--c:var(--err)}.bar.tone-mid span{--c:var(--acc)}.bar.tone-high span{--c:var(--ok)}
.bar.tone-done span{--c:var(--ok);animation:mt-grow .9s cubic-bezier(.2,.8,.2,1) both,mt-shine 2.4s ease-in-out 1s infinite}
.bar em{position:absolute;inset:0;display:grid;place-items:center;font:600 .68em/1 inherit;font-style:normal;color:var(--ink)}
.bar.score span{animation:mt-grow .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes mt-stripes{from{background-position:16px 0}to{background-position:0 0}}
@keyframes mt-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes mt-shine{0%,100%{filter:brightness(1)}50%{filter:brightness(1.15)}}
@media (prefers-reduced-motion:reduce){.bar span{animation:none!important}}

/* Toast notifications */
.toasts{position:fixed;top:16px;right:16px;z-index:100;display:grid;gap:8px;max-width:min(380px,calc(100vw - 32px))}
.toast{display:flex;gap:10px;align-items:center;padding:11px 12px 11px 12px;background:var(--card);color:var(--ink);border:1px solid var(--line);border-left:4px solid var(--ok);border-radius:10px;box-shadow:var(--shadow);animation:mt-in .25s ease-out;font-size:.92em}
.toast.err{border-left-color:var(--err)}.toast.out{opacity:0;transform:translateX(20px);transition:.25s}
.toast-ico{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--okbg);color:var(--ok);font-weight:700;font-size:.8em}
.toast.err .toast-ico{background:var(--errbg);color:var(--err)}
.toast-x{margin-left:auto;border:0;background:none;color:var(--muted);font-size:1.2em;cursor:pointer;line-height:1;padding:0 4px}
@keyframes mt-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* Confirm dialog */
.modal-back{position:fixed;inset:0;z-index:110;display:grid;place-items:center;padding:16px;background:rgba(10,14,16,.45);backdrop-filter:blur(3px);opacity:0;transition:opacity .2s}
.modal-back.in{opacity:1}.modal{background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:16px;padding:22px;max-width:420px;width:100%;box-shadow:var(--shadow);transform:scale(.96);transition:transform .2s}
.modal-back.in .modal{transform:none}.modal p{color:var(--muted);margin:6px 0 18px}
.modal-ico{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--acc-soft);color:var(--acc);font-weight:700;margin-bottom:8px}
.modal-actions{display:flex;gap:8px;justify-content:flex-end}
.btn.danger-solid{background:var(--err);border-color:var(--err);color:#fff}.btn.danger-solid:hover{filter:brightness(.95)}

/* Question card */
.btn{transition:background .15s,border-color .15s,transform .1s}.btn:active{transform:translateY(1px)}.btn.lg{padding:12px 22px;font-weight:600}
.btn.busy{opacity:.6;pointer-events:none}
.qcard{padding:0;overflow:hidden;box-shadow:var(--shadow)}
.qcard.is-ok{border-color:var(--ok)}.qcard.is-err{border-color:var(--err)}
.qhead{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap;padding:12px 20px;border-bottom:1px solid var(--line);background:var(--soft)}
.qlabel{font-size:.75em;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding-top:7px}
.qcard .question{margin:0;padding:20px}
.qtools{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex:1 1 auto;min-width:0}
.qtools-bar{display:flex;gap:6px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--line);border-radius:99px;background:var(--card);color:var(--ink);font:inherit;font-size:.85em;cursor:pointer;position:relative;transition:.15s}
.chip:hover{border-color:var(--pri);color:var(--pri)}.chip svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.chip.bookmark.on{background:var(--acc-soft);border-color:var(--acc);color:var(--acc)}.chip.bookmark.on svg{fill:currentColor}
.chip.notes.active{background:var(--pri-soft);border-color:var(--pri);color:var(--pri)}
.chip .dot{display:none;width:7px;height:7px;border-radius:50%;background:var(--acc)}.chip.notes.has .dot{display:inline-block}
.chip.pop{animation:mt-pop .35s}@keyframes mt-pop{50%{transform:scale(1.12)}}
.note-preview{align-self:stretch;background:var(--acc-soft);border-left:3px solid var(--acc);padding:8px 12px;border-radius:6px;font-size:.88em;text-align:left}
.note-panel{align-self:stretch;animation:mt-in .2s ease-out}.note-panel textarea{margin:0;resize:vertical;min-height:90px}
.note-actions{display:flex;gap:6px;align-items:center;margin-top:8px}
.qfoot{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:18px -20px -20px;padding:14px 20px;border-top:1px solid var(--line);background:var(--soft)}
kbd{display:inline-block;padding:0 5px;border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;font:600 .8em ui-monospace,monospace;background:var(--card)}
.verdict{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:10px;animation:mt-in .3s}
.verdict.ok{background:var(--okbg)}.verdict.err{background:var(--errbg)}
.vico{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:.8em;background:currentColor}
.verdict.ok .vico::before,.verdict.err .vico::before{content:none}
.verdict .vico{color:inherit}.verdict.ok .vico{background:var(--ok);color:var(--on-pri)}.verdict.err .vico{background:var(--err);color:var(--on-pri)}
.nextbar{position:sticky;bottom:12px;z-index:6;display:flex;justify-content:flex-end;align-items:center;gap:12px;margin:12px 0;padding:10px 12px;background:color-mix(in srgb,var(--card) 88%,transparent);backdrop-filter:blur(6px);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
.opt{transition:border-color .15s,background .15s,transform .1s}.opt:not(.correct):not(.wrong):hover{transform:translateX(2px)}
@media (max-width:600px){.qhead{padding:10px 14px}.qcard .question{padding:16px}.qfoot{margin:16px -16px -16px;padding:12px 16px}.kbd-hint{display:none}.qtools{align-items:stretch}.qtools-bar{justify-content:flex-end}.nextbar .btn{flex:1;text-align:center}.nextbar>.small{display:none}}

/* v5: result layout — verdict + next first, explanation/notes below */
.result-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:16px 0 10px}
.result-bar .verdict{margin:0;flex:1 1 220px}
.result-actions{display:flex;align-items:center;gap:12px}
.explain-box,.note{border:1px solid var(--line);border-radius:10px;padding:10px 14px;margin:10px 0}
.explain-box>summary,.note>summary{cursor:pointer;font-weight:600}
.explain-box .explain{margin:8px 0 0}
.nextbar-bottom{position:static;box-shadow:none;background:transparent;border:0;padding:0}
@media (max-width:600px){.result-actions{width:100%}.result-actions .btn{flex:1;text-align:center}}

/* answer-on-click toggle */
.instant-toggle{display:inline-flex;align-items:center;gap:8px;cursor:pointer;user-select:none;margin-right:4px}
.instant-toggle input{position:absolute;opacity:0;width:0;height:0}
.instant-toggle .switch{width:34px;height:20px;border-radius:20px;background:var(--line);position:relative;transition:background .2s;flex:none}
.instant-toggle .switch::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--card);box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .2s}
.instant-toggle input:checked+.switch{background:var(--acc)}
.instant-toggle input:checked+.switch::after{transform:translateX(14px)}
.instant-toggle input:focus-visible+.switch{outline:2px solid var(--acc);outline-offset:2px}
form.is-sending .options{opacity:.7;pointer-events:none}
/* study notes reader */
.notes-layout{display:grid;grid-template-columns:240px 1fr;gap:18px;align-items:start}
.notes-nav{position:sticky;top:12px;display:flex;flex-direction:column;gap:2px;padding:8px}
.notes-nav a{display:flex;justify-content:space-between;gap:8px;padding:8px 10px;border-radius:8px;text-decoration:none;color:inherit}
.notes-nav a:hover{background:var(--acc-soft)}.notes-nav a.on{background:var(--acc);color:var(--on-pri)}
.notes-nav a .muted{color:inherit;opacity:.7}
.notes-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.notes-tools input[type=search]{flex:1;min-width:180px}
.note-card{margin:0 0 12px;padding:0}.note-card>summary{padding:14px 18px;cursor:pointer;font-weight:600;display:flex;gap:10px;align-items:center}
.note-card>summary .small{font-weight:400;margin-left:auto}
.note-card .note-body,.note-card .extra{padding:0 18px 14px}
.note-card .note-body table{border-collapse:collapse}.note-card .note-body td{border:1px solid var(--line);padding:4px 8px}
@media (max-width:760px){.notes-layout{grid-template-columns:1fr}.notes-nav{position:static;flex-direction:row;overflow-x:auto}.notes-nav a{white-space:nowrap}}

[data-practice]{transition:opacity .15s}[data-practice].is-loading{opacity:.55;pointer-events:none}

/* ---------- Local lightbox ---------- */
a[data-lightbox], img.lb-img { cursor: zoom-in; }
.lb-mag { text-decoration: none; font-size: 1.1em; }
.lb-zoom-ico { display: inline-block; }
html.lb-open { overflow: hidden; }
.lb-back { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center;
  background: rgba(10, 12, 16, .92); opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; touch-action: none; }
.lb-back.in { opacity: 1; visibility: visible; }
.lb-stage { position: absolute; inset: 0 0 56px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.lb-stage img { max-width: 92vw; max-height: calc(100vh - 90px); object-fit: contain; transform-origin: center; user-select: none;
  -webkit-user-drag: none; cursor: zoom-in; background: #fff; border-radius: 4px; box-shadow: 0 10px 40px rgba(0,0,0,.5); transition: transform .08s linear; }
.lb-back.zoomed .lb-stage img { cursor: grab; }
.lb-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 56px; display: flex; align-items: center; gap: 8px; padding: 0 16px; color: #e8e8e8; font-size: 14px; }
.lb-cap { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .8; }
.lb-count { opacity: .7; min-width: 3em; }
.lb-bar button, .lb-nav { background: rgba(255,255,255,.12); color: #fff; border: 0; border-radius: 8px; min-width: 38px; height: 38px; font-size: 18px; cursor: pointer; }
.lb-bar button:hover, .lb-nav:hover { background: rgba(255,255,255,.25); }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 64px; font-size: 32px; }
.lb-prev { left: 12px; } .lb-next { right: 12px; }
.lb-back.single .lb-nav { display: none; }

.hist-nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:12px 0;padding:8px 12px;background:var(--card);border:1px solid var(--line);border-radius:12px}
.hist-label{font-size:.72em;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-right:2px}
.hist-dots{display:flex;gap:5px;flex-wrap:wrap;align-items:center}
.hdot{position:relative;min-width:28px;height:28px;padding:0 6px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;font-size:.78em;font-weight:700;text-decoration:none;border:1px solid transparent;transition:transform .15s,box-shadow .15s}
.hdot.ok{background:var(--okbg);color:var(--ok);border-color:color-mix(in srgb,var(--ok) 35%,transparent)}
.hdot.err{background:var(--errbg);color:var(--err);border-color:color-mix(in srgb,var(--err) 35%,transparent)}
.hdot:hover{transform:translateY(-1px);box-shadow:0 2px 6px rgba(0,0,0,.08)}
.hdot.cur{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--pri)}
.hdot.cur::after{content:"";position:absolute;bottom:-9px;left:50%;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--pri)}
.hist-arrow{width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:1.25em;line-height:1;text-decoration:none;color:var(--ink);border:1px solid var(--line);background:var(--card)}
.hist-arrow:hover{border-color:var(--pri);color:var(--pri)}.hist-arrow.off{opacity:.3}
.hist-link{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;font-size:.85em;font-weight:600;text-decoration:none;color:var(--pri);border:1px solid color-mix(in srgb,var(--pri) 40%,transparent);background:color-mix(in srgb,var(--pri) 8%,transparent)}
.hist-link:hover{background:var(--pri);color:var(--on-pri)}
.hist-item{border-left:4px solid var(--line)}.hist-item.is-ok{border-left-color:var(--ok)}.hist-item.is-err{border-left-color:var(--err)}
@media (max-width:560px){.hist-nav .spacer{display:none}.hist-link{margin-left:auto}}