:root{
  --brand:#142131; --brand2:#1e2f45; --green:#1a9a47; --green2:#28b858; --accent:#f86a48; --accent2:#e0502f; --ink:#172230; --mute:#5f6b78; --line:#e2e7ee; --bg:#f4f6f9; --card:#fff; --soft:#eef8f1;
  --ok:#1a9a47; --warn:#b26a00; --bad:#c43d2a; --info:#2a5db0; --radius:12px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.5}
a{color:var(--brand)}
.wrap{max-width:900px;margin:0 auto;padding:16px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;margin:0 -16px 16px;background:var(--brand);color:#fff;border-bottom:3px solid var(--green)}
.topbar a,.topbar .mute{color:#c9d3df}
.topbar .brand{color:#fff}
.topbar .btn.ghost{color:#fff;border-color:rgba(255,255,255,.4)}
.topbar .btn.ghost:hover{background:rgba(255,255,255,.08)}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.02em}
.brand .dot{width:14px;height:14px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px var(--accent) inset}
.brand img{height:34px;max-width:200px;object-fit:contain}
.mute{color:var(--mute)}
.small{font-size:13px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin-bottom:16px;box-shadow:0 1px 2px rgba(0,0,0,.03)}
h1{font-size:26px;margin:0 0 8px;line-height:1.2}
h2{font-size:20px;margin:0 0 8px}
h3{font-size:16px;margin:0 0 6px}
p{margin:0 0 10px}
.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--green);background:var(--green);color:#fff;font-weight:600;padding:10px 18px;border-radius:10px;cursor:pointer;font-size:15px;font-family:inherit}
.btn:hover{filter:brightness(1.08)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.ghost{background:transparent;color:var(--brand);border-color:var(--brand)}
.btn.sm{padding:6px 12px;font-size:13px}
.btn.danger{background:var(--bad);border-color:var(--bad)}
.btn.ok{background:var(--ok);border-color:var(--ok)}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.spread{justify-content:space-between}
.grow{flex:1 1 auto}
.pill{display:inline-block;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:600;background:#eee;color:#333}
.pill.ok{background:#e3f4e8;color:var(--ok)} .pill.warn{background:#fff1dc;color:var(--warn)} .pill.bad{background:#fde3e1;color:var(--bad)} .pill.info{background:#e4ecfa;color:var(--info)} .pill.brand{background:var(--brand);color:#fff} .pill.accent{background:#fdeae4;color:var(--accent2)}
.modlist{list-style:none;padding:0;margin:0}
.modlist li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 0;border-bottom:1px solid var(--line)}
.modlist li:last-child{border-bottom:0}
.timer{font-variant-numeric:tabular-nums;font-weight:700;padding:6px 12px;border-radius:8px;background:#fff;border:1px solid var(--line)}
.timer.low{color:var(--bad);border-color:var(--bad)}
.progress{height:6px;background:#eee;border-radius:3px;overflow:hidden;margin:8px 0 16px}
.progress > div{height:100%;background:linear-gradient(90deg,var(--green),var(--green2))}
.q{padding:8px 0}
.q .prompt{font-size:17px;font-weight:600;margin-bottom:8px;white-space:pre-wrap}
.q .help{color:var(--mute);font-size:14px;margin-bottom:10px;white-space:pre-wrap}
.q .context{background:#f3f6f9;border-left:4px solid var(--accent);padding:12px 14px;border-radius:8px;margin:8px 0 14px;white-space:pre-wrap;font-size:15px}
.opts{display:flex;flex-direction:column;gap:8px}
.opt{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer}
.opt:hover{border-color:var(--green)}
.opt.sel{border-color:var(--green);background:var(--soft);box-shadow:0 0 0 1px var(--green) inset}
.opt input{margin-top:4px}
textarea,input[type=text],input[type=number],input[type=email],input[type=password],select{width:100%;font:inherit;padding:10px 12px;border:1px solid #c9d2dc;border-radius:8px;background:#fff;color:var(--ink)}
textarea{min-height:140px;resize:vertical}
textarea.essay{min-height:220px}
input[type=number]{max-width:200px}
.hint{font-size:13px;color:var(--mute);margin-top:6px}
.wc{font-size:13px;color:var(--mute);text-align:right}
.rank{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.rank li{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:#fff}
.rank li .n{width:24px;height:24px;border-radius:50%;background:var(--green);color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center;font-weight:700;flex:0 0 24px}
.rank li .t{flex:1}
.rank button{border:1px solid var(--line);background:#fff;border-radius:6px;padding:2px 8px;cursor:pointer}
.sjt table{width:100%;border-collapse:collapse;font-size:15px}
.sjt th,.sjt td{padding:8px;border-bottom:1px solid var(--line);vertical-align:top;text-align:left}
.sjt th.c,.sjt td.c{text-align:center;width:90px}
.sheet{overflow-x:auto}
.sheet table{border-collapse:collapse;font-size:14px;min-width:520px}
.sheet th{background:#eef2f6;border:1px solid #d3dbe4;padding:4px 6px;font-weight:600;text-align:center;min-width:34px}
.sheet td{border:1px solid #d3dbe4;padding:0;min-width:110px}
.sheet td input{width:100%;border:0;padding:6px 8px;font:inherit;font-size:14px;background:transparent}
.sheet td.locked{background:#f4f6f9;color:#333}
.sheet td.target{background:#fff8e6}
.sheet td.err input{color:var(--bad)}
.fbar{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.fbar .cell{font-weight:700;width:52px}
.fbar input{flex:1}
.passage{background:#f3f6f9;padding:14px;border-radius:8px;font-family:Georgia,serif;font-size:16px;line-height:1.6;margin-bottom:10px;user-select:none}
.nav{display:flex;justify-content:space-between;gap:10px;margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.qdots{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 14px}
.qdots button{width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:#fff;cursor:pointer;font-size:12px}
.qdots button.done{background:#e3f4e8;border-color:var(--ok)}
.qdots button.cur{border:2px solid var(--green);font-weight:700}
.notice{padding:10px 14px;border-radius:8px;background:#fff4ef;border:1px solid #f8c9b9;font-size:14px;margin-bottom:12px}
.notice.ok{background:var(--soft);border-color:#bfe3c9}
.notice.bad{background:#fde3e1;border-color:#f3b8b4}
.center{text-align:center}
.footer{color:var(--mute);font-size:12px;text-align:center;padding:20px 0}
.saving{font-size:12px;color:var(--mute)}
label.chk{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.sjt{overflow-x:auto}
table{max-width:100%}
@media (max-width:600px){ .wrap{padding:12px} h1{font-size:22px} .card{padding:16px} .btn{padding:10px 14px}
  .sjt table{font-size:14px} .sjt th.c,.sjt td.c{width:58px;padding:8px 2px;font-size:12px} .sjt th{font-size:12px}
  .q .prompt{font-size:16px} .rank li{flex-wrap:wrap} }
.brand img{height:36px;max-width:200px}
input[type=color]{border:1px solid #c9d2dc;border-radius:6px;background:#fff}

.overlay{position:fixed;inset:0;background:rgba(20,33,49,.6);display:flex;align-items:center;justify-content:center;z-index:50;padding:16px}
.overlay .modal{background:var(--card);border-radius:var(--radius);padding:22px;max-width:520px;width:100%;box-shadow:0 12px 40px rgba(0,0,0,.25)}
.overlay .modal h2{margin-top:0}

@media (max-width:600px){ .nav{flex-wrap:wrap} .nav .btn{flex:1 1 auto;justify-content:center} .grid2{grid-template-columns:1fr!important} .overlay .modal{padding:16px} }

/* brand 2026-10-26 */
.brand-logo{height:36px;display:block}
.footer a{color:var(--mute)}