*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;color:#2b2350;background:#f6f3fc;line-height:1.45}
.top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 18px;background:#fff;border-bottom:1px solid #e6defa}
.top h1{font-size:20px;margin:0;flex:1;color:#7c4dff}
.back{color:#6f6a8a;text-decoration:none;font-weight:600}
button{font:inherit;cursor:pointer}
#logout{border:1px solid #d9d0f3;background:#fff;border-radius:10px;padding:6px 12px}
#login{max-width:360px;margin:60px auto;background:#fff;border-radius:18px;padding:24px;display:grid;gap:10px;box-shadow:0 2px 12px rgba(80,60,160,.08)}
#login h2{margin:0 0 6px;font-size:20px}
#login input{font:inherit;padding:12px;border:2px solid #d9d0f3;border-radius:12px}
#login button{background:#7c4dff;color:#fff;border:0;border-radius:12px;padding:12px;font-weight:700}
.msg{color:#b3264a;margin:4px 0;min-height:1.2em}
main{max-width:1000px;margin:0 auto;padding:16px}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg button{border:1.500px solid #d9d0f3;background:#fff;border-radius:999px;padding:7px 14px;color:#6f6a8a;font-weight:600}
.seg button.on{background:#7c4dff;border-color:#7c4dff;color:#fff}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.card{background:#fff;border-radius:14px;padding:14px;display:grid;gap:2px}
.card b{font-size:26px;color:#7c4dff}.card span{color:#6f6a8a;font-size:14px}
section h2{font-size:17px;margin:22px 0 8px}
.scroll{overflow-x:auto;background:#fff;border-radius:14px}
table{border-collapse:collapse;width:100%;font-size:15px}
th,td{padding:9px 10px;text-align:left;border-bottom:1px solid #eee9fb;vertical-align:top}
th{color:#6f6a8a;font-weight:600;white-space:nowrap}
#wrong td:nth-child(2){min-width:260px}
.chart{display:flex;align-items:flex-end;gap:4px;height:170px;background:#fff;border-radius:14px;padding:10px;overflow-x:auto}
.col{flex:1;min-width:22px;max-width:56px;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:2px}
.col b{font-size:11px;color:#6f6a8a}.col span{font-size:10px;color:#6f6a8a;white-space:nowrap}
.col i{display:flex;align-items:flex-end;width:70%;background:#ffc2d1;border-radius:5px 5px 0 0;overflow:hidden}
.col u{display:block;width:100%;background:#22b07d}