:root{--ink:#1c2230;--mute:#6b7385;--line:#e3e6ee;--bg:#fff;--soft:#f6f7fb;--accent:#2456d6;--bad:#c0392b;--ok:#1f8a4c}
@media (prefers-color-scheme:dark){:root{--ink:#e8eaf1;--mute:#9aa1b4;--line:#2b3140;--bg:#14171f;--soft:#1b1f2a;--accent:#6c93ff;--bad:#ff7a6b;--ok:#4cc38a}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 'IBM Plex Sans Thai','Noto Sans Thai',-apple-system,'Segoe UI',sans-serif;font-variant-numeric:tabular-nums}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
nav{display:flex;flex-wrap:wrap;gap:4px 16px;align-items:center;padding:10px 16px;border-bottom:1px solid var(--line);background:var(--soft)}
nav b{margin-right:8px}nav .sp{flex:1}
main{max-width:1000px;margin:0 auto;padding:16px}
h1{font-size:22px;margin:8px 0 14px}h2{font-size:17px;margin:24px 0 8px}
table{width:100%;border-collapse:collapse;margin:8px 0}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
th{color:var(--mute);font-weight:500;font-size:13px}
.num{text-align:right}
form.inline{display:inline}
.card{border:1px solid var(--line);border-radius:8px;padding:12px 14px;margin:12px 0;background:var(--bg)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.stat{border:1px solid var(--line);border-radius:8px;padding:10px 14px}.stat b{display:block;font-size:24px}
label{display:block;font-size:13px;color:var(--mute);margin:8px 0 3px}
input,select,textarea{width:100%;padding:9px 10px;border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--ink);font:inherit;min-height:42px}
input[type=checkbox]{width:auto;min-height:0}
button,.btn{padding:9px 16px;border:0;border-radius:6px;background:var(--accent);color:#fff;font:inherit;cursor:pointer;min-height:40px}
button.ghost{background:transparent;color:var(--accent);border:1px solid var(--line)}
button.danger{background:transparent;color:var(--bad);border:1px solid var(--line)}
.err{color:var(--bad);margin:8px 0}.warn{color:var(--bad)}.ok{color:var(--ok)}.mute{color:var(--mute)}
.tag{display:inline-block;padding:1px 8px;border-radius:10px;background:var(--soft);border:1px solid var(--line);font-size:12px}
.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:0 12px;align-items:end}
@media (max-width:640px){main{padding:12px}th,td{padding:7px 6px}}
/* calendar */
.cal-bar{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin:6px 0 10px}.cal-bar .sp{flex:1}
.ghostlink{background:transparent;color:var(--accent);border:1px solid var(--line);padding:6px 12px;min-height:34px}
.legend .tag{margin-right:4px}
.act-rehearsal{background:#dbe7ff;border-color:#9db9f5;color:#16337a}.act-private{background:#d9f3e3;border-color:#93d5ad;color:#14532d}
.act-camp{background:#ffe6c7;border-color:#f0b872;color:#7a3f00}.act-event{background:#eadcff;border-color:#bc9bf0;color:#46207f}
.act-external{background:#e5e7ee;border-color:#b6bac8;color:#33384a}
@media (prefers-color-scheme:dark){
 .act-rehearsal{background:#1f2f57;border-color:#3d5aa8;color:#c7d8ff}.act-private{background:#153a27;border-color:#2f7a4d;color:#bff0d2}
 .act-camp{background:#4a3012;border-color:#a8742a;color:#ffd9a8}.act-event{background:#352255;border-color:#7a52c2;color:#dcc8ff}
 .act-external{background:#2b2f3a;border-color:#575d70;color:#d4d8e6}}
.st-requested,.st-tentative{border-style:dashed!important;opacity:.85}
.mine{outline:2px solid var(--accent)}
.weekgrid th,.weekgrid td{border:1px solid var(--line);padding:4px;vertical-align:top;min-width:120px}
.weekgrid th.rn{min-width:90px;text-align:left}.weekgrid .today{background:var(--soft)}
.chip{display:block;border:1px solid;border-radius:5px;padding:2px 6px;margin:2px 0;font-size:13px;line-height:1.3;text-decoration:none}
.chip:hover{text-decoration:none;filter:brightness(.97)}
.plus{display:inline-block;color:var(--mute);font-size:13px;padding:0 6px;text-decoration:none}
.tl-head,.tl-row{display:flex;align-items:stretch;gap:8px}
.tl-name{width:90px;flex:none;font-size:14px}
.tl-hours{flex:1;display:flex}.tl-hours span{flex:1;font-size:11px;color:var(--mute);border-left:1px solid var(--line);padding-left:2px}
.tl-row{margin:6px 0}
.tl-track{position:relative;flex:1;height:56px;background:var(--soft);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.tl-track i{position:absolute;top:0;bottom:0;border-left:1px solid var(--line)}
.blk{position:absolute;top:4px;bottom:4px;border:1px solid;border-radius:5px;padding:2px 5px;overflow:hidden;font-size:12px;line-height:1.25;text-decoration:none;white-space:nowrap}
.blk small{display:block;opacity:.8}