:root { --blue:#049FD9; --dark:#005073; --light:#e6f6fc; --bg:#f4f8fb; --ok:#1a8f3c; --bad:#c62828; --text:#1d2b36;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "DejaVu Sans Mono", monospace; }
* { box-sizing: border-box; }
body { margin:0; font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; background:var(--bg); color:var(--text); }
.topbar { background:linear-gradient(90deg,var(--dark),var(--blue)); color:#fff; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; padding:.6rem 1.2rem; gap:.5rem; position:sticky; top:0; z-index:5; box-shadow:0 2px 6px #0003; }
.brand { font-size:1.35rem; font-weight:700; display:flex; align-items:center; gap:.5rem; }
.brand small { font-weight:400; opacity:.8; font-size:.85rem; }
.logo { background:#fff; color:var(--blue); border-radius:8px; width:1.8rem; height:1.8rem; display:inline-grid; place-items:center; }
.tabs { display:flex; gap:.3rem; flex-wrap:wrap; }
.tab { background:transparent; border:1px solid #fff6; color:#fff; padding:.4rem .9rem; border-radius:999px; cursor:pointer; font-size:.95rem; }
.tab.active, .tab:hover { background:#fff; color:var(--dark); }
main { max-width:1000px; margin:1.2rem auto; padding:0 1rem; }
.panel { display:none; } .panel.active { display:block; }
.card { background:#fff; border-radius:12px; box-shadow:0 1px 4px #00507322; padding:1rem 1.2rem; margin-bottom:1rem; border-top:4px solid var(--blue); }
h2 { color:var(--dark); margin:.2rem 0 .6rem; }
.toolbar { display:flex; flex-wrap:wrap; gap:1rem; align-items:flex-end; }
.toolbar label { display:flex; flex-direction:column; font-size:.85rem; color:var(--dark); font-weight:600; }
.toolbar label.check { flex-direction:row; align-items:center; gap:.4rem; }
select, input[type=text] { font-size:1rem; padding:.45rem .6rem; border:1.5px solid #b8d9e8; border-radius:8px; background:#fff; min-width:0; }
input[type=text] { font-family:var(--mono); width:100%; }
input[type=text]:focus, select:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 3px #049fd933; }
input.ok { border-color:var(--ok); background:#eaf7ee; } input.bad { border-color:var(--bad); background:#fdecec; }
.scorebox { margin-left:auto; display:flex; gap:.5rem; flex-wrap:wrap; }
.pill { background:var(--light); color:var(--dark); border-radius:999px; padding:.25rem .7rem; font-size:.85rem; font-weight:600; }
.qtag { display:inline-block; background:var(--dark); color:#fff; border-radius:6px; padding:.1rem .6rem; font-size:.8rem; margin-bottom:.4rem; }
.prompt { white-space:pre-wrap; font-size:1.12rem; font-weight:500; margin:.3rem 0 1rem; }
.prompt code, .mono { font-family:var(--mono); }
.fields { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:.8rem 1rem; }
.field label { display:block; font-size:.85rem; color:var(--dark); font-weight:600; margin-bottom:.2rem; }
.field .expected { font-size:.8rem; color:var(--bad); font-family:var(--mono); min-height:1em; }
.actions { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1rem; }
.btn { font-size:1rem; padding:.55rem 1.1rem; border-radius:8px; border:1.5px solid var(--blue); background:#fff; color:var(--dark); cursor:pointer; font-weight:600; }
.btn.primary { background:var(--blue); color:#fff; } .btn.primary:hover { background:var(--dark); border-color:var(--dark); }
.btn.ghost:hover, .btn:hover { background:var(--light); } .btn.primary:hover { background:var(--dark); }
.feedback { margin-top:.8rem; font-weight:700; font-size:1.05rem; } .feedback.ok { color:var(--ok); } .feedback.bad { color:var(--bad); }
.solution { margin-top:1rem; background:#0b2733; color:#d9f3ff; border-radius:10px; padding:1rem; font-family:var(--mono); font-size:.88rem; white-space:pre; overflow-x:auto; line-height:1.45; }
.hint { font-size:.8rem; color:#5c7480; margin-top:.6rem; }
.exambar { display:flex; align-items:center; gap:1rem; justify-content:space-between; }
.timer { font-family:var(--mono); font-size:1.3rem; color:var(--dark); font-weight:700; } .timer.low { color:var(--bad); }
table { border-collapse:collapse; width:100%; font-size:.92rem; }
th { background:var(--dark); color:#fff; text-align:left; padding:.4rem .6rem; position:sticky; top:0; }
td { padding:.35rem .6rem; border-bottom:1px solid #e3eef3; font-family:var(--mono); }
tr:nth-child(even) td { background:#f6fbfd; }
.tablewrap { overflow-x:auto; }
.grid2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1rem; }
.bar { height:8px; background:#e3eef3; border-radius:4px; overflow:hidden; } .bar > i { display:block; height:100%; background:var(--blue); }
footer { text-align:center; color:#6a828d; font-size:.8rem; padding:1.5rem 1rem; }
@media (max-width:600px) { .brand small { display:none; } .scorebox { margin-left:0; } .prompt { font-size:1rem; } .solution { font-size:.75rem; } main { padding:0 .5rem; } }
/* AI tutor */
.tutor-hint { font-size:.8rem; color:#5c7480; }
.tutor-pop { position:absolute; z-index:20; display:flex; gap:.4rem; background:#fff; padding:.35rem; border-radius:10px; box-shadow:0 4px 16px #00507355; border:1px solid #b8d9e8; }
.tutor-pop[hidden] { display:none; }
.tutor-pop .btn { font-size:.88rem; padding:.45rem .7rem; white-space:nowrap; min-height:40px; }
.tutor-panel { margin-top:1rem; border:1.5px solid var(--blue); border-radius:10px; background:var(--light); padding:.8rem 1rem; }
.tutor-head { display:flex; justify-content:space-between; align-items:center; color:var(--dark); }
.tutor-close { background:none; border:0; font-size:1.1rem; cursor:pointer; color:var(--dark); padding:.2rem .5rem; }
.tutor-quote { font-size:.85rem; color:#3d5866; font-style:italic; margin:.3rem 0 .5rem; white-space:pre-wrap; word-break:break-word; }
.tutor-body { white-space:pre-wrap; line-height:1.5; word-break:break-word; }
.tutor-body.loading { color:#5c7480; animation:tutorPulse 1.2s ease-in-out infinite; }
.tutor-body.error { color:var(--bad); }
@keyframes tutorPulse { 50% { opacity:.4; } }
.tutor-follow { display:flex; gap:.5rem; margin-top:.7rem; } .tutor-follow input { flex:1; font-family:inherit; }
.tutor-note { font-size:.75rem; color:#5c7480; margin-top:.4rem; }
@media (max-width:600px) { .tutor-pop .btn { font-size:.82rem; padding:.45rem .55rem; } }