*{box-sizing:border-box;margin:0;padding:0}
:root{--primary:#165DFF;--primary-hover:#0F4CD8;--navy:#0F1B33;--navy-2:#1A2A4A;--text:#1D2939;--muted:#667085;--border:#E4E7EC;--bg:#F4F6FA;--white:#fff;--danger:#B3261E;--danger-bg:#FBEAE8;--ok:#039855;--ok-bg:#E6FAEA;--info-bg:#E8F0FF}
body{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--bg);color:var(--text);line-height:1.55;min-height:100vh}
body.has-side{display:grid;grid-template-columns:248px 1fr}
a{color:var(--primary);text-decoration:none}a:hover{color:var(--primary-hover)}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
/* sidebar */
.side{background:var(--navy);color:#fff;display:flex;flex-direction:column;padding:20px 12px;position:sticky;top:0;height:100vh}
.side .brand{display:flex;align-items:center;gap:10px;padding:4px 10px 20px;color:#fff;font-weight:650;font-size:17px}
.side .logo{width:34px;height:34px;border-radius:9px;background:var(--primary);display:grid;place-items:center;font-size:14px;font-weight:700}
.side nav{display:flex;flex-direction:column;gap:2px;flex:1}
.side nav a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:9px;color:#C5CEE0;font-size:15px}
.side nav a:hover{background:var(--navy-2);color:#fff}
.side nav a.on{background:var(--primary);color:#fff;font-weight:600}
.side .ico{width:22px;text-align:center}
.side .me{border-top:1px solid var(--navy-2);padding:14px 10px 0;font-size:14px}
.side .me b{display:block;color:#fff;font-weight:600;overflow:hidden;text-overflow:ellipsis}
.side .me small{color:#9AA8C7;text-transform:capitalize}
.side .me button{margin-top:10px;width:100%;background:var(--navy-2);color:#fff;font-size:14px;padding:8px}
.side .me button:hover{background:#243759}
/* page */
main{width:100%;max-width:860px;padding:36px 32px 72px}main.wide{max-width:1040px}
.top{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:22px}
h1{font-size:26px;letter-spacing:-.01em}h2{font-size:17px;margin-bottom:12px}h3{font-size:16px}
.sub{color:var(--muted);font-size:15px;margin-top:2px}
.card{background:var(--white);border:1px solid var(--border);border-radius:12px;padding:20px 22px;margin-bottom:14px}
.card.narrow{max-width:400px;margin:14vh auto 0;padding:32px;box-shadow:0 8px 30px rgba(15,27,51,.08)}
.card.narrow .logo{width:44px;height:44px;border-radius:11px;background:var(--primary);color:#fff;display:grid;place-items:center;font-weight:700;margin-bottom:16px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.tile{display:block;background:var(--white);border:1px solid var(--border);border-radius:12px;padding:20px;color:var(--text)}
.tile:hover{border-color:var(--primary);box-shadow:0 4px 14px rgba(22,93,255,.09)}
.tile .ico{display:grid;place-items:center;width:42px;height:42px;border-radius:10px;background:var(--info-bg);font-size:20px;margin-bottom:12px}
.tile strong{display:block;font-size:16px}.tile small{color:var(--muted);font-size:14px}
.tile.soon{opacity:.6}
/* lists */
.tools{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.tools input{flex:1;min-width:200px}
.chip{display:inline-block;background:var(--info-bg);color:var(--primary-hover);font-size:12px;font-weight:600;padding:2px 10px;border-radius:99px;border:0}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chips button{background:var(--white);color:var(--text);border:1px solid var(--border);padding:5px 12px;font-size:13px;border-radius:99px}
.chips button.on{background:var(--primary);color:#fff;border-color:var(--primary)}
details.item{padding:0}
details.item summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:16px 22px;font-weight:600}
details.item summary::-webkit-details-marker{display:none}
details.item summary::before{content:"\25B8";color:var(--muted);transition:transform .15s}
details.item[open] summary::before{transform:rotate(90deg)}
details.item .meta{margin-left:auto;font-weight:400}
details.item .inner{padding:0 22px 20px;border-top:1px solid var(--border)}
.body{white-space:pre-wrap;margin-top:14px}
.meta{font-size:13px;color:var(--muted)}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.empty{text-align:center;color:var(--muted);padding:36px 12px;background:var(--white);border:1px dashed var(--border);border-radius:12px}
/* forms */
label{display:block;font-size:14px;font-weight:500;margin:12px 0 4px}
input,select,textarea{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:8px;font:inherit;background:var(--white);color:var(--text)}
textarea{min-height:180px;resize:vertical}input[type=checkbox]{width:auto}
button{background:var(--primary);color:#fff;border:0;border-radius:8px;padding:10px 16px;font:inherit;font-weight:500;cursor:pointer}
button:hover{background:var(--primary-hover)}button:disabled{opacity:.5;cursor:not-allowed}
button.secondary{background:var(--white);color:var(--text);border:1px solid var(--border)}button.secondary:hover{background:var(--bg)}
button.danger{background:var(--danger-bg);color:var(--danger)}
button.link{background:none;color:var(--primary);padding:0}
form>button{margin-top:16px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.msg{margin:12px 0}.msg.ok,.msg.err{padding:10px 14px;border-radius:8px;font-size:14px}
.msg.ok{background:var(--ok-bg);color:var(--ok)}.msg.err{background:var(--danger-bg);color:var(--danger)}
.muted{color:var(--muted);font-size:14px}
.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:10px;border-bottom:1px solid var(--border)}th{color:var(--muted);font-weight:500}td select{padding:6px 8px}
@media(max-width:820px){
 body.has-side{display:block}
 .side{position:static;height:auto;flex-direction:row;align-items:center;gap:8px;padding:10px 12px;overflow-x:auto}
 .side .brand{padding:0 8px 0 0;white-space:nowrap}.side nav{flex-direction:row;flex:none}
 .side nav a{white-space:nowrap;padding:8px 12px}.side .me{display:none}
 main{padding:22px 16px 56px}.row{grid-template-columns:1fr}}

.side .me a{display:block;color:#fff}.side .me a:hover b{text-decoration:underline}

/* training modules */
.hud{margin-bottom:12px}.hud .bar{height:8px;border-radius:99px;background:var(--border);overflow:hidden}.hud .bar i{display:block;height:100%;background:var(--primary);border-radius:99px;transition:width .3s}
.hud .stats{display:flex;gap:14px;align-items:center;margin-top:6px;font-size:14px;color:var(--muted)}
.stepcard{padding:22px}.opts2{display:grid;gap:8px;margin-top:8px}.opt{display:flex;gap:10px;align-items:center;border:1.5px solid var(--border);border-radius:10px;padding:12px 14px;background:var(--white);font-weight:400;margin:0;cursor:pointer}
.opt:hover{border-color:var(--primary)}.opt input{margin:0}
.fb{margin-top:16px;padding:12px 14px;border-radius:10px}.fb p{margin-top:4px}.fb.good{background:var(--ok-bg);color:var(--ok)}.fb.bad{background:var(--danger-bg);color:var(--danger)}.fb.part{background:#FDECC8;color:#8A5A00}
.fgrid2{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}.fcard{min-height:110px;background:var(--info-bg);color:var(--text);border:1.5px solid transparent;font-size:16px;padding:16px}.fcard.flip{background:var(--ok-bg);border-color:var(--ok)}
.lb{display:flex;justify-content:space-between;gap:8px;padding:8px 0;border-bottom:1px solid var(--border);font-size:14px}.lb:last-child{border:0}
.st{display:inline-block;padding:2px 10px;border-radius:99px;font-size:12px;font-weight:600}.st.ok{background:var(--ok-bg);color:var(--ok)}.st.bad{background:var(--danger-bg);color:var(--danger)}.st.warn{background:#FDECC8;color:#8A5A00}.st.new{background:var(--info-bg);color:var(--text)}