:root{ --bg:#0b1020; --card:#121a33; --soft:#0f1630; --text:#e9eefb; --muted:#aab3d4; --primary:#7da0ff; --success:#2ecc71; --warning:#f1c40f; --danger:#ff6b6b; --border:rgba(255,255,255,.08); }
:root.light{ --bg:#f5f7ff; --card:#ffffff; --soft:#f0f3ff; --text:#13213a; --muted:#50607d; --primary:#2d5bff; --success:#1e8e5a; --warning:#b88700; --danger:#c44b4b; --border:rgba(0,0,0,.08); }
*{box-sizing:border-box}
html,body{height:100%}
body{ margin:0; font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif; background:var(--bg); color:var(--text); line-height:1.45; }
.app-header,.app-footer{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border)}
.app-footer{border-top:1px solid var(--border);border-bottom:none;justify-content:center}
.brand{display:flex;gap:10px;align-items:center}
.logo{font-size:24px}
.sub{opacity:.7;font-weight:600}
.toggles{display:flex;gap:8px}
.container{max-width:1100px;margin:24px auto; padding:0 16px; display:grid; gap:16px}
.panel.card{border:1px solid var(--border); border-radius:16px; background:var(--card); padding:16px}
.card.soft{background:var(--soft)}
.bar{display:flex; align-items:center; justify-content:space-between; gap:12px}
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px}
label{display:flex; flex-direction:column; gap:6px; font-weight:600}
input,select,textarea,button{font:inherit}
input,select,textarea{padding:10px 12px; border:1px solid var(--border); border-radius:12px; background:transparent; color:var(--text)}
textarea{width:100%;}
.row{display:flex; gap:8px; flex-wrap:wrap}
button{border:0; padding:10px 14px; border-radius:12px; cursor:pointer}
button.primary{background:var(--primary); color:white; font-weight:700}
button.secondary{background:transparent; color:var(--text); border:1px solid var(--border)}
button.ghost{background:transparent; color:var(--muted)}
button.danger{background:var(--danger); color:white}
button.success{background:var(--success); color:white}
button.warning{background:var(--warning); color:black}
button.circle{width:48px; height:48px; border-radius:50%}
.status{display:flex; gap:10px; align-items:center}
.badge{padding:6px 10px; border-radius:999px; background:transparent; border:1px solid var(--border); color:var(--muted); font-size:.9rem}
.timer{font-weight:800}
.score{font-weight:700}
.prompts{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-block:8px}
.prompt{border:1px dashed var(--border); border-radius:12px; padding:12px}
.chips{display:flex; gap:8px; flex-wrap:wrap; margin-top:6px}
.chip{padding:6px 10px; border-radius:999px; border:1px solid var(--border); color:var(--muted); font-size:.9rem}
.history{display:grid; gap:10px; margin:0; padding-left:20px}
.app-footer a{color:var(--primary); text-decoration:none}
.layout-2cols{display:grid; grid-template-columns:1.2fr .8fr; gap:12px}
.rubric{border:1px solid var(--border); border-radius:16px}
.rubric-grid{display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center}
.r-line{display:grid; grid-template-columns:1fr repeat(3,auto); gap:8px; align-items:center; padding:8px 0; border-bottom:1px dashed var(--border)}
.r-line:last-child{border-bottom:0}
.r-title{font-weight:700}
.r-desc{opacity:.85; font-size:.92rem}
.r-col{display:flex; gap:6px; align-items:center}
.rubric-notes{margin-top:10px}
@media (max-width: 980px){ .layout-2cols{grid-template-columns:1fr} }


dialog{border:1px solid var(--border); background:var(--card); color:var(--text); border-radius:16px; padding:16px; max-width:560px}
dialog::backdrop{background:rgba(0,0,0,.4)}