:root{--navy:#1a3a5c;--navy-d:#142d47;--gold:#c9a84c;--surface:#f8f9fa;--text:#1e293b;
--muted:#64748b;--border:#e2e8f0;--ok:#16a34a;--warn:#d97706;--bad:#dc2626;--r:10px;--rs:6px}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Sarabun','Segoe UI',system-ui,sans-serif;background:var(--surface);color:var(--text);line-height:1.65}
.wrap{max-width:760px;margin:0 auto;padding:0 16px 64px}
.top{background:var(--navy);color:#fff;position:sticky;top:0}
.top .wrap{display:flex;align-items:center;justify-content:space-between;padding:14px 16px}
.brand{color:#fff;text-decoration:none;font-weight:800}.brand b{color:var(--gold)}
.linkbtn{background:none;border:0;color:#fff;font:inherit;cursor:pointer}
h1{font-size:1.45rem;color:var(--navy);margin:18px 0 6px}h2{font-size:1.1rem;color:var(--navy);margin:20px 0 8px}
.muted{color:var(--muted)}.sm{font-size:.85rem}a{color:var(--navy)}
.card{background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:18px;margin-top:14px}
.btn{display:inline-flex;align-items:center;min-height:48px;padding:0 22px;font:inherit;font-weight:700;
border:1px solid transparent;border-radius:var(--rs);cursor:pointer;text-decoration:none}
.btn-primary{background:var(--navy);color:#fff}.btn-ghost{background:#fff;border-color:var(--navy);color:var(--navy)}
.field{margin-top:12px}.field label{display:block;font-size:.9rem;font-weight:600;margin-bottom:4px}
.input{width:100%;min-height:48px;padding:10px 12px;font:inherit;border:1px solid var(--border);border-radius:var(--rs)}
.input:focus{outline:2px solid var(--gold);border-color:var(--gold)}
textarea.input{min-height:200px;resize:vertical}
.err{color:var(--bad);font-size:.85rem;margin-top:4px}
.alert{background:#fef2f2;color:var(--bad);border:1px solid #fecaca;border-radius:var(--rs);padding:10px;margin-top:10px}
.scenario{white-space:pre-wrap;background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--gold);
border-radius:var(--rs);padding:14px;margin:10px 0}
.focus{display:flex;gap:8px;align-items:center;background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;
border-radius:var(--rs);padding:10px 12px;font-size:.9rem;margin-top:10px}
.lessons{list-style:none;display:flex;flex-direction:column;gap:8px;margin-top:10px}
.lessons a{display:flex;justify-content:space-between;padding:14px;background:#fff;border:1px solid var(--border);border-radius:var(--rs)}
.badge{display:inline-block;font-size:.72rem;font-weight:700;color:#fff;background:var(--muted);border-radius:var(--rs);padding:2px 9px}
.t1{background:#2563a8}.t2{background:#0f766e}.t3{background:#be123c}
.total{display:flex;align-items:baseline;gap:14px}.total .n{font-size:2.4rem;font-weight:800;color:var(--navy)}
.total .g{font-size:1.4rem;font-weight:800;color:var(--gold)}
.dim{display:grid;grid-template-columns:1fr auto;gap:4px;margin-top:12px}
.bar{grid-column:1/3;height:9px;background:var(--border);border-radius:999px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--navy)}.bar i.low{background:var(--bad)}.bar i.mid{background:var(--warn)}.bar i.hi{background:var(--ok)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.chip{font-size:.8rem;border-radius:999px;padding:3px 11px}
.chip.s{background:#f0fdf4;color:var(--ok);border:1px solid #bbf7d0}
.chip.i{background:#fef2f2;color:var(--bad);border:1px solid #fecaca}
.chip.w{background:#fff7ed;color:#9a3412;border:1px solid #fed7aa}
.disc{font-size:.78rem;color:var(--muted);border-top:1px solid var(--border);margin-top:26px;padding-top:12px}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}.inline{margin:0}
.sim-log{max-height:50vh;overflow-y:auto;display:flex;flex-direction:column;gap:.5rem}
.sim-msg{display:flex;flex-direction:column;max-width:85%}
.sim-user{align-self:flex-end;align-items:flex-end}
.sim-ai{align-self:flex-start}
.sim-who{font-size:.75rem;color:#64748b;margin:0 .25rem}
.sim-bubble{padding:.5rem .75rem;border-radius:12px;background:#f1f5f9}
.sim-user .sim-bubble{background:#1a3a5c;color:#fff}
.sim-compose .actions{display:flex;gap:.5rem;margin-top:.5rem;flex-wrap:wrap}