:root{--paper:#f7f4ec;--card:#fffdf8;--ink:#14293a;--muted:#5b6b78;--line:#dcd5c5;--sea:#1b5e83;--sea-soft:#dcecf3;--deep:#0e3a56;--babor:#c4332d;--estribor:#1f8a4c;--gold:#b98a1e;--warn:#fbf0d3;--ok-soft:#dff2e5;--bad-soft:#f9e0dd;--shadow:0 1px 2px rgba(20,41,58,.08),0 6px 20px rgba(20,41,58,.06);--r:12px;--sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;--serif:"Iowan Old Style",Palatino,Georgia,serif}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--paper:#0f1c26;--card:#172733;--ink:#e8eef2;--muted:#9fb0bc;--line:#2b3f4e;--sea:#6cb6d9;--sea-soft:#1b3a4c;--deep:#0a2433;--babor:#ef6f68;--estribor:#55c585;--gold:#e0b64d;--warn:#3d3318;--ok-soft:#173a27;--bad-soft:#452120;--shadow:0 1px 2px rgba(0,0,0,.4)}}
:root[data-theme="dark"]{--paper:#0f1c26;--card:#172733;--ink:#e8eef2;--muted:#9fb0bc;--line:#2b3f4e;--sea:#6cb6d9;--sea-soft:#1b3a4c;--deep:#0a2433;--babor:#ef6f68;--estribor:#55c585;--gold:#e0b64d;--warn:#3d3318;--ok-soft:#173a27;--bad-soft:#452120;--shadow:0 1px 2px rgba(0,0,0,.4)}
*{box-sizing:border-box}html,body{margin:0;height:100%}
body{background:var(--paper);color:var(--ink);font:16px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--sea)}h1,h2,h3{font-family:var(--serif);line-height:1.2;margin:0 0 .4em;letter-spacing:-.01em}h1{font-size:clamp(1.8rem,3.5vw,2.5rem)}h2{font-size:1.45rem;margin-top:1.6em}h3{font-size:1.1rem;margin-top:1.2em}p{margin:.5em 0}
#shell{display:grid;grid-template:56px 1fr/250px 1fr;grid-template-areas:"top top" "side main";height:100vh}
#topbar{grid-area:top;background:var(--deep);color:#fff;display:flex;align-items:center;gap:14px;padding:0 16px}
.brand{color:#fff;text-decoration:none;font:600 1.15rem var(--serif)}.anchor{opacity:.85}
#menuBtn{display:none;background:none;border:0;color:#fff;font-size:1.4rem;cursor:pointer}
#topProgress{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:.82rem;color:#cfe2ec}
#topProgress .bar{width:150px;height:6px;background:rgba(255,255,255,.2);border-radius:9px;overflow:hidden}#topProgress .bar i{display:block;height:100%;background:#7fd0a6}
#side{grid-area:side;background:var(--card);border-right:1px solid var(--line);overflow-y:auto;padding:12px 10px 40px}
#side .grp{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:16px 10px 6px}
#side a{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:8px;color:var(--ink);text-decoration:none;font-size:.93rem}
#side a:hover{background:var(--sea-soft)}#side a.on{background:var(--sea);color:#fff}
#side a .num{width:22px;height:22px;flex:none;border-radius:50%;background:var(--sea-soft);color:var(--sea);font:600 .72rem/22px var(--sans);text-align:center}
#side a.on .num{background:rgba(255,255,255,.25);color:#fff}#side a .chk{margin-left:auto;color:var(--estribor);font-size:.85rem}#side a.on .chk{color:#fff}
#view{grid-area:main;overflow-y:auto;padding:28px clamp(16px,4vw,48px) 80px;outline:0}
.wrap{max-width:980px;margin:0 auto}.wrap.wide{max-width:1400px}
.lead{font-size:1.1rem;color:var(--muted);max-width:68ch}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;box-shadow:var(--shadow);margin:14px 0}
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.tile{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;text-decoration:none;color:var(--ink);box-shadow:var(--shadow);transition:transform .12s,border-color .12s}
.tile:hover{transform:translateY(-2px);border-color:var(--sea)}.tile b{display:block;font:600 1.05rem var(--serif);margin-bottom:3px}.tile small{color:var(--muted);display:block;line-height:1.4}
.tile .meta{margin-top:10px;font-size:.78rem;color:var(--sea)}
.hero{background:linear-gradient(135deg,var(--deep),#1b5e83);color:#fff;border-radius:16px;padding:30px 28px;margin-bottom:20px}.hero h1{color:#fff}.hero p{color:#d6e7ef;max-width:62ch}
.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--card);color:var(--ink);padding:8px 14px;border-radius:9px;font:500 .92rem var(--sans);cursor:pointer;text-decoration:none}
.btn:hover{border-color:var(--sea)}.btn.pri{background:var(--sea);border-color:var(--sea);color:#fff}.btn.on{background:var(--sea-soft);border-color:var(--sea);color:var(--ink)}.btn:disabled{opacity:.5;cursor:default}.hero .btn.pri{background:#fff;color:var(--deep);border-color:#fff}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:18px 0 16px;overflow-x:auto}
.tabs button{background:none;border:0;border-bottom:3px solid transparent;padding:9px 13px;font:500 .95rem var(--sans);color:var(--muted);cursor:pointer;white-space:nowrap}.tabs button.on{color:var(--sea);border-color:var(--sea)}
.note{background:var(--warn);border-left:4px solid var(--gold);padding:10px 14px;border-radius:0 8px 8px 0;margin:12px 0;font-size:.95rem}
.key{background:var(--sea-soft);border-left:4px solid var(--sea);padding:10px 14px;border-radius:0 8px 8px 0;margin:12px 0}
table{border-collapse:collapse;width:100%;font-size:.93rem}th,td{border-bottom:1px solid var(--line);padding:7px 9px;text-align:left;vertical-align:top}th{color:var(--muted);font-weight:600}
.scroll-x{overflow-x:auto}
.media-list{display:grid;gap:8px}.media-item{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 12px;cursor:pointer;text-align:left;font:inherit;color:inherit;width:100%}
.media-item:hover{border-color:var(--sea)}.media-item .ic{width:34px;height:34px;flex:none;border-radius:8px;background:var(--sea-soft);color:var(--sea);display:grid;place-items:center}.media-item.done .ic{background:var(--ok-soft);color:var(--estribor)}.media-item small{color:var(--muted);display:block}
.player video{width:100%;max-height:68vh;background:#000;border-radius:10px;display:block}.player audio{width:100%}
.q-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px;margin-bottom:12px}.q-card .qn{font-size:.78rem;color:var(--muted)}.q-card p.q{font-weight:600;margin:.25em 0 .7em}.q-card img{max-width:100%;border-radius:6px;background:#fff;margin-bottom:8px}
.opt{display:block;width:100%;text-align:left;background:none;border:1px solid var(--line);border-radius:9px;padding:9px 12px;margin:6px 0;font:inherit;color:inherit;cursor:pointer}.opt:hover:not(:disabled){border-color:var(--sea)}.opt.sel{background:var(--sea-soft);border-color:var(--sea)}.opt.ok{background:var(--ok-soft);border-color:var(--estribor)}.opt.bad{background:var(--bad-soft);border-color:var(--babor)}.opt:disabled{cursor:default}
.fc{min-height:190px;display:grid;place-items:center;text-align:center;padding:26px;cursor:pointer;font-size:1.1rem}.fc .a{color:var(--sea);font-weight:600}.fc small{display:block;color:var(--muted);font-size:.9rem;margin-top:10px;font-weight:400;text-align:left}
.stat{display:inline-block;margin-right:20px}.stat b{display:block;font:600 1.7rem var(--serif);color:var(--sea)}.stat span{font-size:.8rem;color:var(--muted)}
.exam-bar{position:sticky;top:-28px;background:var(--paper);padding:10px 0;z-index:5;display:flex;gap:10px;align-items:center;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-bottom:12px}.timer{font:600 1.15rem var(--sans);font-variant-numeric:tabular-nums}
.dots{display:flex;flex-wrap:wrap;gap:4px}.dots button{width:26px;height:26px;font-size:.7rem;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:6px;cursor:pointer}.dots button.a{background:var(--sea);color:#fff;border-color:var(--sea)}.dots button.ok{background:var(--ok-soft)}.dots button.bad{background:var(--bad-soft)}
.field{display:flex;flex-direction:column;gap:3px;font-size:.85rem;color:var(--muted)}input,select{font:inherit;padding:7px 9px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink);width:100%}input[type=range]{padding:0;accent-color:var(--sea)}
.w-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(220px,1fr);gap:18px;align-items:start}svg text{font-family:var(--sans)}
.hot{cursor:pointer;transition:opacity .15s}.hot:hover{opacity:.7}
.chart{position:relative;background:#dbe6ea;border:1px solid var(--line);border-radius:10px;overflow:hidden;touch-action:none;height:100%;min-height:420px;user-select:none}
.chart .stage{position:absolute;left:0;top:0;transform-origin:0 0}.chart img{display:block;width:2645px;height:1889px;pointer-events:none}.chart svg.ov{position:absolute;left:0;top:0;width:2645px;height:1889px}
.chart-tools{position:absolute;left:8px;top:8px;display:flex;flex-wrap:wrap;gap:4px;z-index:3;max-width:calc(100% - 16px)}.chart-tools button{background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:7px;padding:5px 9px;font:500 .8rem var(--sans);cursor:pointer}.chart-tools button.on{background:var(--sea);color:#fff;border-color:var(--sea)}
.chart-read{position:absolute;left:8px;bottom:8px;background:rgba(14,58,86,.92);color:#fff;padding:5px 10px;border-radius:7px;font:500 .84rem var(--sans);font-variant-numeric:tabular-nums;z-index:3;max-width:calc(100% - 16px)}
.chart-zoom{position:absolute;right:8px;bottom:8px;display:flex;flex-direction:column;gap:3px;z-index:3}.chart-zoom button{width:34px;height:34px;font-size:1.1rem;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:7px;cursor:pointer}
.chart-page{display:grid;grid-template-columns:minmax(300px,380px) 1fr;gap:16px;height:calc(100vh - 56px - 110px);min-height:520px}.chart-side{overflow-y:auto;padding-right:4px}
.ex-list button{display:block;width:100%;text-align:left;font:inherit;font-size:.9rem;color:inherit;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:8px 10px;margin:5px 0;cursor:pointer}.ex-list button:hover{border-color:var(--sea)}.ex-list button.done{border-left:4px solid var(--estribor)}
.result-ok{color:var(--estribor);font-weight:600}.result-bad{color:var(--babor);font-weight:600}
#modal{position:fixed;inset:0;background:rgba(5,20,30,.6);display:grid;place-items:center;z-index:50;padding:16px}#modal[hidden]{display:none}.modal-box{background:var(--card);border-radius:14px;width:min(1200px,100%);height:min(90vh,900px);padding:12px;position:relative;display:flex;flex-direction:column}.modal-close{position:absolute;right:10px;top:10px;z-index:9;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:8px;width:34px;height:34px;cursor:pointer}#modalBody{flex:1;min-height:0}#modalBody iframe{width:100%;height:100%;border:0}
.img-grid img{width:100%;border-radius:8px;border:1px solid var(--line);cursor:zoom-in;background:#fff}
@media (max-width:860px){#shell{grid-template-columns:1fr;grid-template-areas:"top" "main"}#menuBtn{display:block}#side{position:fixed;top:56px;bottom:0;left:0;width:260px;z-index:40;transform:translateX(-100%);transition:transform .2s}#side.open{transform:none;box-shadow:var(--shadow)}.w-grid,.chart-page{grid-template-columns:1fr;height:auto}.chart{height:62vh}#topProgress .bar{width:70px}.exam-bar{top:-28px}}