
:root{
  --olive:#4b5320; --olive2:#3a4019; --sand:#c2b280; --bg:#f4f2ea;
  --card:#ffffff; --ink:#22251a; --muted:#6b6f5f; --line:#e2ddcd;
  --green:#2e7d32; --red:#c62828; --blue:#1565c0; --orange:#e08a00;
}
*{box-sizing:border-box}
body{margin:0;font-family:"Segoe UI",Roboto,Arial,sans-serif;background:var(--bg);color:var(--ink)}
header{background:linear-gradient(135deg,var(--olive),var(--olive2));color:#fff;padding:14px 22px;display:flex;align-items:center;gap:14px;box-shadow:0 2px 8px rgba(0,0,0,.2)}
header .logo{width:38px;height:38px;border-radius:8px;background:var(--sand);color:var(--olive2);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:20px}
header h1{font-size:18px;margin:0;letter-spacing:.5px}
header .sub{font-size:11px;opacity:.85;margin-top:2px}
.wrap{max-width:1000px;margin:26px auto;padding:0 18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:22px;box-shadow:0 1px 3px rgba(0,0,0,.05);margin-bottom:18px}
h2{margin:0 0 14px;font-size:20px;color:var(--olive2)}
h3{margin:0 0 10px;font-size:15px;color:var(--olive2)}
label{display:block;font-size:12px;font-weight:600;color:var(--muted);margin:12px 0 5px;text-transform:uppercase;letter-spacing:.4px}
input,select{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:8px;font-size:15px;background:#fbfaf6}
input:focus,select:focus{outline:none;border-color:var(--olive)}
.btn{display:inline-block;background:var(--olive);color:#fff;border:none;padding:12px 22px;border-radius:8px;font-size:15px;font-weight:600;cursor:pointer;transition:.15s}
.btn:hover{background:var(--olive2)}
.btn.sec{background:#fff;color:var(--olive2);border:1px solid var(--olive)}
.btn.ghost{background:transparent;color:var(--muted);border:1px solid var(--line)}
.btn.red{background:var(--red)} .btn.red:hover{background:#a01c1c}
.btn:disabled{opacity:.5;cursor:not-allowed}
.row{display:flex;gap:14px;flex-wrap:wrap}
.row>div{flex:1;min-width:180px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.home-tiles{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:8px}
.tile{border:1px solid var(--line);border-radius:12px;padding:26px;text-align:center;cursor:pointer;transition:.15s;background:#fbfaf6}
.tile:hover{border-color:var(--olive);transform:translateY(-2px);box-shadow:0 6px 16px rgba(75,83,32,.15)}
.tile .ic{font-size:40px;margin-bottom:10px}
.tile h3{font-size:18px;margin:0 0 6px}
.tile p{margin:0;font-size:13px;color:var(--muted)}
.muted{color:var(--muted);font-size:13px}
.hidden{display:none}
.paper-item{display:flex;justify-content:space-between;align-items:center;border:1px solid var(--line);border-radius:9px;padding:14px 16px;margin-bottom:10px;cursor:pointer;background:#fbfaf6;transition:.15s}
.paper-item:hover{border-color:var(--olive);background:#f5f3e9}
.paper-item .meta{font-size:12px;color:var(--muted);margin-top:3px}
.badge{display:inline-block;font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;background:var(--sand);color:var(--olive2)}
.exam-top{display:flex;justify-content:space-between;align-items:center;background:var(--olive);color:#fff;padding:10px 18px;border-radius:10px;margin-bottom:14px;flex-wrap:wrap;gap:10px}
.timer{font-size:20px;font-weight:800;font-variant-numeric:tabular-nums;background:rgba(255,255,255,.15);padding:6px 14px;border-radius:8px}
.timer.warn{background:var(--red);animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.6}}
.exam-body{display:grid;grid-template-columns:1fr 250px;gap:16px}
.qcard{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:22px;min-height:340px}
.qmeta{display:flex;justify-content:space-between;font-size:13px;color:var(--muted);margin-bottom:12px}
.qtext{font-size:17px;font-weight:600;margin-bottom:20px;line-height:1.5}
.opt{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:9px;padding:13px 15px;margin-bottom:11px;cursor:pointer;transition:.12s;background:#fbfaf6}
.opt:hover{border-color:var(--olive)}
.opt.sel{border-color:var(--olive);background:#eef0e2}
.opt .k{width:30px;height:30px;border-radius:50%;background:var(--sand);color:var(--olive2);display:flex;align-items:center;justify-content:center;font-weight:800;flex-shrink:0}
.opt.sel .k{background:var(--olive);color:#fff}
.palette{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px;height:fit-content}
.pal-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin:10px 0 16px}
.pal-btn{aspect-ratio:1;border:1px solid var(--line);border-radius:7px;background:#fff;font-size:13px;font-weight:700;cursor:pointer;color:var(--ink)}
.pal-btn.cur{outline:3px solid var(--blue);outline-offset:-1px}
.pal-btn.ans{background:var(--green);color:#fff;border-color:var(--green)}
.pal-btn.seen{background:var(--orange);color:#fff;border-color:var(--orange)}
.legend{font-size:11px;color:var(--muted);line-height:1.9}
.dot{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:5px;vertical-align:middle}
.nav-btns{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.result-hero{text-align:center;padding:20px}
.result-score{font-size:56px;font-weight:800;margin:6px 0}
.result-pass{color:var(--green)} .result-fail{color:var(--red)}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line)}
th{background:#f5f3e9;color:var(--olive2);font-size:12px;text-transform:uppercase;letter-spacing:.4px}
tr:hover td{background:#faf9f3}
.pill{font-size:11px;font-weight:700;padding:2px 9px;border-radius:20px}
.pill.pass{background:#e3f2e3;color:#1b5e20} .pill.fail{background:#fbe3e3;color:var(--red)}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.note{background:#fff8e6;border:1px solid #f0e2b8;border-radius:9px;padding:12px 14px;font-size:13px;color:#7a6a2f;margin-bottom:14px}
footer{text-align:center;color:var(--muted);font-size:12px;padding:24px}
footer a{color:inherit;text-decoration:underline}
@media(max-width:760px){.exam-body{grid-template-columns:1fr}.grid2,.home-tiles{grid-template-columns:1fr}}

.home-3{grid-template-columns:repeat(3,1fr)}
.opt.correct{border-color:var(--green);background:#e6f4e6}
.opt.correct .k{background:var(--green);color:#fff}
.opt.wrong{border-color:var(--red);background:#fbeaea}
.opt.wrong .k{background:var(--red);color:#fff}
.opt.locked{cursor:default}
.fb{margin:6px 0 4px;padding:11px 14px;border-radius:9px;font-weight:700;font-size:15px}
.fb-ok{background:#e6f4e6;color:var(--green)}
.fb-no{background:#fbeaea;color:var(--red)}
.score-chip{font-size:15px;font-weight:800;background:rgba(255,255,255,.15);padding:6px 14px;border-radius:8px;font-variant-numeric:tabular-nums}
@media(max-width:760px){.home-3{grid-template-columns:1fr}.qtext{font-size:16px}.opt{padding:15px 15px}}

.file-row{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:9px;padding:12px 14px;margin-bottom:9px;background:#fbfaf6}
.file-ic{width:40px;height:40px;border-radius:8px;background:var(--sand);color:var(--olive2);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;flex-shrink:0}
.file-meta{flex:1;min-width:0}
.file-meta .nm{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.file-meta .sz{font-size:12px;color:var(--muted)}
.ref-btns{display:flex;gap:8px;flex-shrink:0}
.file-row:has(.ref-btns){flex-wrap:wrap}
.file-row:has(.ref-btns) .file-meta{flex:1 1 140px}
.ref-seen{flex-basis:100%;display:flex;align-items:center;gap:8px;font-size:13px}
.ref-seen select{flex:1;width:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.legal-links{text-align:center;font-size:12px;padding:0 16px 20px;color:var(--muted)}
.legal-links a{color:inherit}
