:root{--bg:#12121f;--panel:#1a1a2e;--panel-2:#10101f;--border:#8888aa55;--text:#f2f2f7;--muted:#8888aa;--accent:#f0c419;--good:#7ce38b;--bad:#f28b82;--info:#9ecbff}*{box-sizing:border-box}body,html{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,Noto Sans CJK JP,Hiragino Sans,Yu Gothic,sans-serif;font-size:15px}a{color:var(--info);text-decoration:none}a:hover{text-decoration:underline}main{max-width:980px;margin:0 auto;padding:16px}nav{display:flex;align-items:center;gap:18px;padding:12px 16px;border-bottom:2px solid var(--border);background:var(--panel)}nav .brand{font-weight:700;color:var(--accent)}nav .spacer{flex:1 1}nav .who{color:var(--muted)}nav .who,nav button{font-size:13px}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));grid-gap:12px;gap:12px;margin:16px 0}.card{background:var(--panel);border:2px solid var(--border);border-radius:6px;padding:14px}.card .big{font-size:28px;font-weight:700}.card .label{color:var(--muted);font-size:12px;margin-top:4px}.panel{background:var(--panel);border:2px solid var(--border);border-radius:6px;padding:16px;margin:16px 0}.panel h2{margin:0 0 12px;font-size:15px;color:var(--accent)}.mastery-row{display:grid;grid-template-columns:150px 1fr 70px;grid-gap:10px;gap:10px;align-items:center;margin:8px 0}.bar{height:14px;background:var(--panel-2);border:1px solid var(--border);border-radius:3px;overflow:hidden}.bar>div{height:100%;background:var(--good)}.mastery-row .frac{color:var(--muted);font-size:13px;text-align:right}table{width:100%;border-collapse:collapse;font-size:14px}th{text-align:left;color:var(--muted);font-weight:500;font-size:12px;padding:6px 8px;border-bottom:1px solid var(--border)}td{padding:7px 8px;border-bottom:1px solid #ffffff11;vertical-align:top}.ok{color:var(--good)}.miss{color:var(--bad)}.muted{color:var(--muted)}details.lesson{margin:12px 0;border:2px solid var(--border);border-radius:6px;background:var(--panel)}details.lesson>summary{cursor:pointer;padding:12px 16px;font-weight:600;list-style:none;display:flex;gap:12px;align-items:baseline}details.lesson>summary .count{color:var(--muted);font-weight:400;font-size:13px}details.lesson .rows{padding:0 16px 12px}.qrow{display:flex;gap:10px;align-items:baseline;padding:8px 0;border-top:1px solid #ffffff11}.qrow .type{font-size:11px;padding:2px 6px;border-radius:3px;background:var(--panel-2);color:var(--info);border:1px solid var(--border);white-space:nowrap}.qrow .prompt{flex:1 1;min-width:0}.qrow.inactive{opacity:.45}.chips{display:flex;flex-wrap:wrap;gap:6px}.chip{background:var(--panel-2);border:1px solid var(--border);border-radius:12px;padding:2px 10px;font-size:13px;display:inline-flex;gap:6px;align-items:center}.chip button{border:none;background:none;color:var(--muted);cursor:pointer;padding:0;font-size:13px}input[type=date],input[type=password],input[type=text],select,textarea{background:var(--panel-2);color:var(--text);border:2px solid var(--border);border-radius:4px;padding:8px 10px;font:inherit;width:100%}input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent)}label{display:block;margin:10px 0 4px;color:var(--muted);font-size:13px}button{background:var(--panel-2);color:var(--text);border:2px solid var(--border);border-radius:4px;padding:7px 14px;font:inherit;cursor:pointer}button.primary,button:hover{border-color:var(--accent)}button.primary{background:var(--accent);color:#12121f;font-weight:600}button:disabled{opacity:.5;cursor:default}.row{display:flex;gap:10px;align-items:flex-end}.row>*{flex:1 1}.error{color:var(--bad);margin:8px 0}.overlay{position:fixed;inset:0;background:#000a;display:flex;align-items:center;justify-content:center;z-index:10;padding:16px}.modal{background:var(--panel);border:2px solid #fff;border-radius:6px;padding:20px;width:640px;max-width:100%;max-height:90vh;overflow-y:auto}.modal h2{margin-top:0;color:var(--accent);font-size:16px}.modal .actions{display:flex;gap:10px;justify-content:flex-end;margin-top:16px}.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center}.login-box{width:340px}.login-box h1{color:var(--accent);font-size:20px}.trend svg{width:100%;height:90px;display:block}