:root{
  --bg1:#0a1a2f; --bg2:#0f2d4d; --bg3:#08203a;
  --panel:rgba(255,255,255,.06); --border:rgba(255,255,255,.13);
  --accent:#4ea1ff; --accent2:#8de3a4; --warn:#ffb347; --danger:#ff6b6b;
  --text:#eef6ff; --muted:#9fc0e2;
}
*{box-sizing:border-box;}
html,body{margin:0;height:100%;font-family:'Segoe UI',-apple-system,system-ui,'Hiragino Sans','Yu Gothic UI',sans-serif;
  color:var(--text);background:linear-gradient(135deg,var(--bg1),var(--bg2) 50%,var(--bg3));}

.app{display:flex;flex-direction:column;height:100vh;}
.topbar{display:flex;align-items:center;gap:1rem;padding:.75rem 1.2rem;
  background:rgba(0,0,0,.25);border-bottom:1px solid var(--border);}
.topbar h1{margin:0;font-size:1.05rem;letter-spacing:.04em;}
.topbar .home{color:var(--muted);text-decoration:none;font-size:.9rem;}
.topbar .home:hover{color:var(--accent);}
.topbar .spacer{flex:1;}

.timer{font-family:'Consolas',ui-monospace,monospace;font-size:1.4rem;font-weight:700;
  padding:.25rem .9rem;border-radius:8px;background:rgba(0,0,0,.4);border:1px solid var(--border);
  min-width:6.5rem;text-align:center;}
.timer.warn{color:var(--warn);border-color:var(--warn);}
.timer.danger{color:var(--danger);border-color:var(--danger);animation:pulse 1s infinite;}
@keyframes pulse{50%{box-shadow:0 0 12px var(--danger);}}

.main{flex:1;display:grid;grid-template-columns:300px 1fr;min-height:0;}
.sidebar{background:rgba(0,0,0,.2);border-right:1px solid var(--border);
  padding:1.2rem;overflow-y:auto;}
.sidebar h2{margin:0 0 .8rem;font-size:.95rem;color:var(--muted);
  text-transform:uppercase;letter-spacing:.1em;}
.sidebar .group{margin-bottom:1.4rem;}
.sidebar label{display:block;margin-bottom:.45rem;font-size:.85rem;color:var(--muted);}
.sidebar select,.sidebar input[type=number]{width:100%;padding:.5rem .7rem;border-radius:8px;
  border:1px solid var(--border);background:rgba(0,0,0,.3);color:var(--text);font-size:.95rem;}
.sidebar .btn{display:block;width:100%;padding:.7rem;margin-top:.5rem;border-radius:10px;
  border:none;font-weight:600;cursor:pointer;font-size:.95rem;transition:transform .1s,box-shadow .15s;}
.sidebar .btn:active{transform:translateY(1px);}
.btn.primary{background:linear-gradient(135deg,var(--accent),#2d6fd1);color:#fff;}
.btn.primary:hover{box-shadow:0 6px 18px rgba(78,161,255,.4);}
.btn.success{background:linear-gradient(135deg,#5cd58b,#2fa162);color:#06170d;}
.btn.warn{background:linear-gradient(135deg,#ffce6e,#e8a13a);color:#3a1f00;}
.btn.danger{background:linear-gradient(135deg,#ff7e7e,#d94646);color:#fff;}
.btn.ghost{background:transparent;border:1px solid var(--border);color:var(--text);}
.btn.ghost:hover{border-color:var(--accent);}

.viewer{position:relative;background:#1a1f2a;min-height:0;display:flex;flex-direction:column;}
.viewer .toolbar{display:flex;gap:.5rem;padding:.55rem .8rem;background:rgba(0,0,0,.35);
  border-bottom:1px solid var(--border);align-items:center;}
.viewer .toolbar .tag{padding:.2rem .65rem;border-radius:6px;background:rgba(255,255,255,.07);
  font-size:.8rem;color:var(--muted);}
.viewer .toolbar .tag.exam{color:var(--accent);}
.viewer .toolbar .tag.ans{color:var(--accent2);}
.viewer iframe{flex:1;border:none;background:#fff;width:100%;}

.empty{display:grid;place-items:center;height:100%;color:var(--muted);text-align:center;padding:2rem;}
.empty .big{font-size:4rem;margin-bottom:.5rem;}

.history{margin-top:1rem;}
.history h3{margin:0 0 .5rem;font-size:.85rem;color:var(--muted);
  text-transform:uppercase;letter-spacing:.1em;}
.history ul{list-style:none;padding:0;margin:0;}
.history li{padding:.5rem .6rem;border-radius:6px;background:rgba(255,255,255,.04);
  margin-bottom:.3rem;font-size:.85rem;display:flex;justify-content:space-between;}
.history li .sc{color:var(--accent2);font-weight:600;}
.history .clear{font-size:.78rem;color:var(--muted);text-decoration:underline;cursor:pointer;background:none;border:none;padding:0;}

.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.65);display:none;align-items:center;
  justify-content:center;z-index:50;}
.modal-bg.show{display:flex;}
.modal{background:#152540;border:1px solid var(--border);border-radius:14px;
  padding:1.6rem 1.8rem;width:min(92vw,420px);}
.modal h3{margin:0 0 1rem;}
.modal label{display:block;margin:.6rem 0 .3rem;color:var(--muted);font-size:.85rem;}
.modal input{width:100%;padding:.5rem .7rem;border-radius:8px;border:1px solid var(--border);
  background:rgba(0,0,0,.3);color:var(--text);font-size:1rem;}
.modal .row{display:flex;gap:.6rem;margin-top:1.2rem;justify-content:flex-end;}
.modal .row .btn{padding:.55rem 1.2rem;}

@media (max-width:780px){
  .main{grid-template-columns:1fr;grid-template-rows:auto 1fr;}
  .sidebar{max-height:36vh;}
}