:root{--bg:#FAFBFE;--card:#FFFFFF;--ink:#10152B;--mut:#5A6377;--line:#DCE1EE;--accent:#013A94;--cobalt:#001856;--orange:#FF6B35;--accsoft:#E7EDF9;--track:#EDF0F8;--peri:#C2CFE8;--mid:#8FA8D9;--red:#A32D2D;--green:#0F6E56;
 --serif:'DM Serif Display',Georgia,serif;--mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;--sans:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif}
@media(prefers-color-scheme:dark){:root{--bg:#020A22;--card:#071336;--ink:#EDF1FA;--mut:#96A2C2;--line:#1B2C5C;--accent:#9FB6EA;--cobalt:#C2CFE8;--accsoft:#0D1E4C;--track:#0D1A45;--peri:#2E4A8F;--mid:#4A6BC4;--red:#F19C9C;--green:#6FD3B5}}
*{box-sizing:border-box}html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:13.5px;line-height:1.45}
a{color:var(--accent)}
button,input,select,textarea{font:inherit;color:inherit}
.kd{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--orange);margin:0 0 8px}
.mut{color:var(--mut)}.mono{font-family:var(--mono)}.tab{font-variant-numeric:tabular-nums}
h1{font-family:var(--serif);font-size:26px;font-weight:400;color:var(--cobalt);margin:0 0 4px;line-height:1.15}
h2{font-family:var(--serif);font-size:19px;font-weight:400;color:var(--cobalt);margin:0 0 8px;line-height:1.2}
h3{font-family:var(--serif);font-size:16px;font-weight:400;color:var(--cobalt);margin:0 0 6px}
.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--card);color:var(--accent);border-radius:999px;padding:7px 14px;font-size:12.5px;font-weight:500;cursor:pointer;white-space:nowrap}
.btn:hover{border-color:var(--accent)}.btn.pri{background:var(--accent);color:#fff;border-color:var(--accent)}.btn.o{background:var(--orange);color:#fff;border-color:var(--orange)}
.btn.s{padding:4px 10px;font-size:11.5px}.btn:disabled{opacity:.5;cursor:default}
.btn.danger{color:var(--red);border-color:var(--red)}
input.f,select.f,textarea.f{width:100%;border:1px solid var(--line);background:var(--card);border-radius:4px;padding:8px 10px;font-size:13px}
label.l{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);margin:0 0 4px}
.fld{margin:0 0 12px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.card{border:1px solid var(--line);border-radius:4px;background:var(--card);padding:14px 16px}
.tag{display:inline-block;font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;border-radius:2px;padding:2px 6px;background:var(--track);color:var(--mut)}
.tag.on{background:rgba(15,110,86,.12);color:var(--green)}.tag.warn{background:rgba(255,107,53,.14);color:var(--orange)}.tag.bad{background:rgba(163,45,45,.12);color:var(--red)}.tag.blue{background:var(--accsoft);color:var(--accent)}
table.t{width:100%;border-collapse:collapse;font-size:12.5px}
table.t th,table.t td{text-align:left;vertical-align:top;padding:8px 9px;border-bottom:1px solid var(--line)}
table.t thead th{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);border-bottom:2px solid var(--line)}
table.t tr.click{cursor:pointer}table.t tr.click:hover td{background:var(--accsoft)}
.empty{color:var(--mut);padding:18px;text-align:center;border:1px dashed var(--line);border-radius:4px}
/* shell */
.top{position:sticky;top:0;z-index:30;background:var(--card);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;padding:0 18px;height:52px}
.top .brand{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);white-space:nowrap}
.top .brand small{color:var(--mut);font-weight:500;letter-spacing:.1em}
.nav{display:flex;gap:2px;margin-left:10px}
.nav a{text-decoration:none;color:var(--mut);font-size:13px;font-weight:500;padding:6px 11px;border-radius:999px}
.nav a.on{background:var(--accsoft);color:var(--accent)}
.top .sp{flex:1}
.top .clock{font-family:var(--mono);font-size:12px;color:var(--mut)}
.top .who{font-size:12px;color:var(--mut)}
.top .who b{color:var(--ink);font-weight:600}
.demo{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--orange);border-radius:2px;padding:2px 6px}
main{padding:18px;max-width:1400px;margin:0 auto}
.ph{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:14px;flex-wrap:wrap}
.ph p{margin:0;color:var(--mut);font-size:13px}
/* sign-in */
.signin{max-width:380px;margin:80px auto;}
/* avatar */
.av{width:28px;height:28px;border-radius:50%;flex:none;overflow:hidden;background:var(--accsoft);border:1.5px solid var(--mid);display:grid;place-items:center;font-family:var(--mono);font-size:10px;font-weight:700;color:var(--cobalt)}
.av img{width:100%;height:100%;display:block;object-fit:cover}
.av.first{border-style:dashed;border-color:var(--orange);background:transparent;color:var(--orange)}
.av.lg{width:56px;height:56px;font-size:16px}
/* ===== floor ===== */
.fbwrap{display:grid;grid-template-columns:1fr 280px;gap:14px;align-items:start}
@media(max-width:900px){.fbwrap{grid-template-columns:1fr}}
.fb{position:relative;aspect-ratio:1483/826;border:1px solid var(--line);border-radius:4px;background:var(--card);overflow:hidden;user-select:none;-webkit-user-select:none;touch-action:none}
.fb .plan{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;opacity:.55;pointer-events:none}
.z{position:absolute;border-radius:4px;padding:4px 5px;background:rgba(231,237,249,.55);border:1px dashed rgba(143,168,217,.9);display:flex;flex-direction:column;gap:4px;overflow:visible;transition:background .15s,box-shadow .15s}
@media(prefers-color-scheme:dark){.z{background:rgba(13,30,76,.55)}}
.z.room{border-style:solid;border-color:var(--mid)}.z.pod{border-radius:40px 40px 6px 6px}
.z.staff{background:repeating-linear-gradient(135deg,rgba(143,168,217,.10) 0 6px,transparent 6px 12px);border-color:rgba(143,168,217,.45);pointer-events:none}
.z.staff .zl{color:var(--mut);opacity:.7}
.z.over{background:rgba(255,107,53,.14);border-color:var(--orange);box-shadow:0 0 0 2px rgba(255,107,53,.25)}
.z.full.over{background:rgba(163,45,45,.12);border-color:var(--red)}
.zl{font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--cobalt);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zl small{display:block;font-size:8px;color:var(--mut);letter-spacing:.06em;text-transform:none}
.zc{display:flex;flex-wrap:wrap;gap:4px;align-content:flex-start;flex:1;min-height:0}
.p{display:flex;align-items:center;gap:4px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:2px 7px 2px 2px;font-size:9.5px;line-height:1.1;box-shadow:0 1px 2px rgba(0,24,86,.08);cursor:grab;position:relative}
.p:active{cursor:grabbing}.p b{font-weight:600;color:var(--ink);white-space:nowrap}.p>span{min-width:0;overflow:hidden}.z .p{max-width:100%}
.p i{display:block;font-style:normal;font-family:var(--mono);font-size:8px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p .av{width:24px;height:24px;font-size:9px}
.p.inroom{border-color:var(--orange)}.p.inroom i{color:var(--orange)}.p.late i{color:var(--red)}
.p.drag{opacity:.9;transform:scale(1.04);box-shadow:0 6px 18px rgba(0,24,86,.25);z-index:50}
.p.dim{opacity:.22;filter:grayscale(1)}.p.focus{box-shadow:0 0 0 2px var(--orange),0 6px 18px rgba(0,24,86,.25);z-index:4}
.p .tag1{position:absolute;right:-4px;top:-6px;font-family:var(--mono);font-size:7.5px;letter-spacing:.06em;text-transform:uppercase;background:var(--orange);color:#fff;border-radius:2px;padding:1px 4px}
.hint{position:absolute;right:8px;bottom:6px;font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);background:var(--card);border:1px solid var(--line);border-radius:999px;padding:3px 9px}
.rail{border:1px solid var(--line);border-radius:4px;background:var(--card);padding:14px;position:relative;min-height:300px}
.rstat{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:baseline;margin:0 0 8px}
.rstat b{font-family:var(--serif);font-size:26px;font-weight:400;color:var(--cobalt);line-height:1}
.rstat span{font-size:11.5px;color:var(--mut);line-height:1.35}.rstat em{font-style:normal;color:var(--ink)}
.due{display:flex;gap:8px;align-items:center;margin:0 0 7px}
.due b{display:block;font-size:12px;color:var(--ink);line-height:1.1}.due i{font-style:normal;font-family:var(--mono);font-size:9.5px;color:var(--mut)}
.due .sp{flex:1}
.flag{font-size:11px;color:var(--mut);border-left:2px solid var(--mid);padding:2px 0 2px 8px;margin:0 0 6px;line-height:1.35}.flag b{color:var(--ink);font-weight:600}.flag.late{border-left-color:var(--red)}
.out{margin-top:14px;border:2px dashed var(--line);border-radius:4px;padding:12px;text-align:center;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.out.over{border-color:var(--orange);color:var(--orange);background:rgba(255,107,53,.08)}
.rx{position:absolute;right:8px;top:8px;border:1px solid var(--line);background:var(--card);border-radius:50%;width:24px;height:24px;font-size:11px;cursor:pointer;color:var(--mut)}
.jhead{display:flex;gap:10px;align-items:center}
.jhead b{display:block;font-family:var(--serif);font-size:19px;font-weight:400;color:var(--cobalt);line-height:1.05}
.jhead i{display:block;font-style:normal;font-family:var(--mono);font-size:9.5px;color:var(--mut);margin-top:3px;line-height:1.3}
.jl{margin:0;padding:0;list-style:none}
.jl li{display:grid;grid-template-columns:14px 1fr auto;gap:8px;align-items:start;padding:6px 0;border-bottom:1px solid var(--line);font-size:11.5px}
.jl li .dot{width:8px;height:8px;border-radius:50%;background:var(--mid);margin-top:4px}
.jl li.room .dot{background:var(--orange)}.jl li.now .dot{box-shadow:0 0 0 3px rgba(255,107,53,.25)}
.jl li b{display:block;font-weight:600;color:var(--ink);line-height:1.2}.jl li i{display:block;font-style:normal;font-family:var(--mono);font-size:9.5px;color:var(--mut)}
.jl li .d{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--cobalt);font-variant-numeric:tabular-nums}.jl li.wait .d{color:var(--mut)}
.jtot{display:flex;justify-content:space-between;align-items:baseline;margin-top:10px;font-size:12px;color:var(--mut)}
.jtot b{font-family:var(--serif);font-size:22px;font-weight:400;color:var(--cobalt)}.jtot.small b{font-size:15px;color:var(--mut)}
/* ===== diary ===== */
.diary{display:grid;grid-template-columns:52px repeat(var(--cols),1fr);border:1px solid var(--line);border-radius:4px;background:var(--card);overflow:auto;position:relative;max-height:calc(100vh - 150px)}
.diary .hd{position:sticky;top:0;background:var(--card);border-bottom:2px solid var(--line);padding:8px 6px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);z-index:2}
.diary .hd small{display:block;color:var(--cobalt);letter-spacing:0;text-transform:none;font-family:var(--sans);font-size:12px;font-weight:600}
.diary .col{position:relative;border-left:1px solid var(--line);min-height:calc(var(--slots) * var(--slot))}
.diary .tcol{position:relative}
.diary .tick{position:absolute;left:0;right:0;border-top:1px solid var(--line);font-family:var(--mono);font-size:9.5px;color:var(--mut);padding:2px 4px}
.diary .tick.h{border-top-color:var(--mid)}
.diary .line{position:absolute;left:0;right:0;border-top:1px solid var(--track)}
.diary .line.h{border-top-color:var(--line)}
.bk{position:absolute;left:3px;right:3px;border-radius:3px;background:var(--accsoft);border-left:3px solid var(--accent);padding:3px 6px;font-size:11px;line-height:1.2;overflow:hidden;cursor:pointer}
.bk b{display:block;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bk b i{display:inline;font-weight:400}
.bk i{font-style:normal;font-family:var(--mono);font-size:9px;color:var(--mut);white-space:nowrap}
.bk.arrived{border-left-color:var(--orange);background:rgba(255,107,53,.12)}.bk.done{opacity:.55}.bk.no_show,.bk.cancelled{background:var(--track);border-left-color:var(--red);text-decoration:line-through;opacity:.6}
.bk.first{border-style:dashed}
.nowline{position:absolute;left:52px;right:0;border-top:2px solid var(--orange);z-index:3;pointer-events:none}
/* ===== member record ===== */
.mhead{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.mhead .nm h1{margin:0}.mhead .nm .mut{font-family:var(--mono);font-size:11px}
.mstats{display:flex;gap:18px;margin-left:auto;flex-wrap:wrap}
.mstat b{display:block;font-family:var(--serif);font-size:20px;font-weight:400;color:var(--cobalt);line-height:1}.mstat span{font-size:11px;color:var(--mut)}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:14px;flex-wrap:wrap}
.tabs a{text-decoration:none;color:var(--mut);font-size:13px;font-weight:500;padding:8px 12px;border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs a.on{color:var(--accent);border-bottom-color:var(--accent)}
.tl{list-style:none;margin:0;padding:0}
.tl li{display:grid;grid-template-columns:120px 1fr;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:12.5px}
.tl li .when{font-family:var(--mono);font-size:10.5px;color:var(--mut)}
.tl li b{font-weight:600}
.ind{display:grid;grid-template-columns:1.2fr .7fr .7fr .7fr 1.4fr;gap:8px;align-items:center;padding:7px 0;border-bottom:1px solid var(--line);font-size:12.5px}
.ind.hd{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);border-bottom:2px solid var(--line)}
.ind .bar{height:8px;background:var(--track);border-radius:2px;position:relative}
.ind .bar i{position:absolute;top:-2px;width:12px;height:12px;border-radius:50%;background:var(--accent);transform:translateX(-50%)}
.ind .bar i.base{background:var(--peri)}
.delta.up{color:var(--green)}.delta.down{color:var(--red)}
.steps{list-style:none;margin:0;padding:0}
.steps li{display:grid;grid-template-columns:28px 1fr auto auto;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.steps .n{font-family:var(--serif);font-size:18px;color:var(--orange)}
.steps small{display:block;color:var(--mut);font-size:11.5px}
/* modal */
.modal{position:fixed;inset:0;background:rgba(0,10,34,.45);display:grid;place-items:center;z-index:100;padding:16px}
.modal .box{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:20px;width:min(560px,100%);max-height:90vh;overflow:auto;position:relative}
.modal .box h2{margin-right:30px}
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--cobalt);color:#fff;padding:9px 16px;border-radius:999px;font-size:12.5px;z-index:120;opacity:0;transition:opacity .2s}
.toast.on{opacity:1}
.search{position:relative}.search .dd{position:absolute;left:0;right:0;top:100%;background:var(--card);border:1px solid var(--line);border-radius:4px;z-index:20;max-height:220px;overflow:auto}
.search .dd div{padding:7px 10px;cursor:pointer;font-size:12.5px}.search .dd div:hover{background:var(--accsoft)}
/* kiosk */
.kiosk{max-width:520px;margin:60px auto;text-align:center}
.kiosk h1{font-size:34px}
.kiosk input.f{font-size:20px;padding:14px;text-align:center}
.kiosk .big{font-family:var(--serif);font-size:40px;color:var(--cobalt);margin:20px 0 6px}