:root{--brand-primary:#0b5fd0;--brand-primary-ink:#fff;--brand-primary-soft:#e8f1fe;--brand-spatial:#0aa2c0;--status-success:#0f9d68;--status-success-soft:#e3f7ef;--status-warning:#b56a00;--status-warning-soft:#fdf1de;--status-danger:#d1435b;--status-danger-soft:#fdeaee;--status-info:#0b5fd0;--status-info-soft:#e8f1fe;--accent-purple:#6b4ce0;--accent-purple-soft:#efeaff;--surface-canvas:#f6f8fb;--surface-card:#fff;--surface-inverse:#10233d;--surface-sunken:#eef2f7;--ink:#16202e;--ink-muted:#5a6875;--ink-faint:#8a97a5;--line:#dde4ec;--line-strong:#c3cedb;--radius-card:14px;--radius-control:9px;--radius-pill:999px;--shadow-card:0 1px 2px #10233d0f, 0 6px 18px #10233d0f;--shadow-raised:0 2px 6px #10233d1a, 0 18px 36px #10233d1f;--motion-fast:.12s;--motion-base:.2s;--easing:cubic-bezier(.2, .7, .3, 1);--font-ui:"Google Sans", "Google Sans Text", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Thai", "Noto Sans SC", sans-serif;--font-numeric:var(--font-ui)}@media (prefers-reduced-motion:reduce){:root{--motion-fast:0s;--motion-base:0s}*,:before,:after{transition-duration:.001ms!important;animation-duration:.001ms!important}}*{box-sizing:border-box}html,body,#root{height:100%}body{background:var(--surface-canvas);color:var(--ink);font-family:var(--font-ui);-webkit-text-size-adjust:100%;margin:0;font-size:15px;line-height:1.55}:focus-visible{outline:3px solid var(--brand-primary);outline-offset:2px;border-radius:4px}.sr-only{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.shell{grid-template-columns:248px 1fr;min-height:100%;display:grid}.rail{background:var(--surface-inverse);color:#dce6f3;flex-direction:column;gap:4px;height:100vh;padding:18px 12px;display:flex;position:sticky;top:0}.rail .brand{letter-spacing:-.02em;color:#fff;padding:4px 10px 14px;font-size:22px;font-weight:700}.rail a,.rail button.navitem{border-radius:var(--radius-control);color:#c6d4e6;width:100%;font:inherit;text-align:start;cursor:pointer;transition:background var(--motion-fast) var(--easing), color var(--motion-fast) var(--easing);background:0 0;border:0;align-items:center;gap:10px;padding:10px 12px;display:flex}.rail button.navitem:hover{color:#fff;background:#ffffff14}.rail button.navitem[aria-current=page]{background:var(--brand-primary);color:var(--brand-primary-ink)}.content{flex-direction:column;min-width:0;display:flex}.topbar{background:var(--surface-card);border-bottom:1px solid var(--line);z-index:5;flex-wrap:wrap;align-items:center;gap:12px;padding:12px 20px;display:flex;position:sticky;top:0}.topbar .spacer{flex:auto}main{align-content:start;gap:16px;padding:20px;display:grid}@media (max-width:899px){.shell{grid-template-columns:1fr}.rail{height:auto;padding:6px 8px calc(6px + env(safe-area-inset-bottom));z-index:10;flex-direction:row;justify-content:space-around;position:fixed;inset:auto 0 0}.rail .brand{display:none}.rail button.navitem{flex-direction:column;gap:2px;min-height:48px;padding:8px 6px;font-size:12px}main{padding:14px 14px 84px}}.card{background:var(--surface-card);border:1px solid var(--line);border-radius:var(--radius-card);box-shadow:var(--shadow-card);padding:16px 18px}.card>h2,.card>h3{letter-spacing:-.01em;margin:0 0 12px;font-size:16px}.card-head{align-items:baseline;gap:12px;margin-bottom:12px;display:flex}.card-head h3{margin:0}.card-head .spacer{flex:auto}.metrics{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;display:grid}.metric{background:var(--surface-card);border:1px solid var(--line);border-radius:var(--radius-card);padding:14px 16px}.metric .value{letter-spacing:-.02em;font-size:26px;font-weight:700}.metric .label{color:var(--ink-muted);font-size:13px}.metric.attention{border-color:var(--status-warning);background:var(--status-warning-soft)}.badge{border-radius:var(--radius-pill);white-space:nowrap;border:1px solid #0000;align-items:center;gap:6px;padding:3px 10px;font-size:12.5px;font-weight:600;display:inline-flex}.badge:before{content:"";background:currentColor;border-radius:50%;width:7px;height:7px}.badge.available{color:var(--status-success);background:var(--status-success-soft);border-color:#b7e7d4}.badge.occupied{color:var(--status-info);background:var(--status-info-soft);border-color:#c3ddfb}.badge.reserved{color:var(--accent-purple);background:var(--accent-purple-soft);border-color:#d8ceff}.badge.dirty,.badge.maintenance{color:var(--status-warning);background:var(--status-warning-soft);border-color:#f2d7a8}.badge.overdue{color:var(--status-danger);background:var(--status-danger-soft);border-color:#f7c4cf}.badge.voided{color:var(--ink-muted);background:var(--surface-sunken);border-color:var(--line-strong)}.legend{flex-wrap:wrap;gap:8px;display:flex}.board{grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:10px;display:grid}.room{text-align:start;cursor:pointer;font:inherit;color:inherit;background:var(--surface-card);border:1px solid var(--line);border-inline-start:4px solid var(--line-strong);border-radius:var(--radius-card);transition:box-shadow var(--motion-fast) var(--easing), transform var(--motion-fast) var(--easing);gap:6px;padding:12px 12px 10px;display:grid}.room:hover{box-shadow:var(--shadow-raised);transform:translateY(-1px)}.room[aria-pressed=true]{border-color:var(--brand-primary);box-shadow:0 0 0 2px var(--brand-primary-soft)}.room.available{border-inline-start-color:var(--status-success)}.room.occupied{border-inline-start-color:var(--status-info)}.room .number{letter-spacing:-.02em;font-size:19px;font-weight:700}.room .where{color:var(--ink-muted);font-size:12.5px}.room .rent{font-variant-numeric:tabular-nums;color:var(--ink-muted);font-size:13px}.scroll{overflow-x:auto}table{border-collapse:collapse;width:100%;font-size:14px}thead th{background:var(--surface-card);text-align:start;color:var(--ink-muted);border-bottom:1px solid var(--line);white-space:nowrap;padding:8px 10px;font-weight:600;position:sticky;top:0}tbody td{border-bottom:1px solid var(--line);vertical-align:middle;padding:9px 10px}tbody tr:last-child td{border-bottom:0}.strong{font-weight:600}.num{text-align:end;font-variant-numeric:tabular-nums;white-space:nowrap}form.card{gap:14px;display:grid}.grid{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;display:grid}label{color:var(--ink-muted);gap:5px;font-size:13px;font-weight:500;display:grid}input,select{font:inherit;color:var(--ink);border:1px solid var(--line-strong);border-radius:var(--radius-control);background:var(--surface-card);min-height:42px;padding:9px 11px}input:disabled,select:disabled{background:var(--surface-sunken);color:var(--ink-faint)}input[inputmode=decimal],input[type=number]{font-variant-numeric:tabular-nums;text-align:end}button{font:inherit;cursor:pointer;border-radius:var(--radius-control);background:var(--brand-primary);min-height:42px;color:var(--brand-primary-ink);transition:filter var(--motion-fast) var(--easing);border:1px solid #0000;padding:10px 16px;font-weight:600}button:hover:not(:disabled){filter:brightness(1.06)}button:disabled{opacity:.55;cursor:not-allowed}button.ghost{color:var(--ink);border-color:var(--line-strong);background:0 0}button.quiet{background:var(--surface-sunken);color:var(--ink)}.actions{flex-wrap:wrap;gap:10px;display:flex}.notice{border-radius:var(--radius-control);padding:10px 12px;font-size:14px}.notice.error{background:var(--status-danger-soft);color:#8f1f34;border:1px solid #f7c4cf}.notice.ok{background:var(--status-success-soft);color:#0a6d49;border:1px solid #b7e7d4}.notice .ref{color:var(--ink-muted);margin-top:4px;font-size:12px;display:block}.empty{color:var(--ink-muted);padding:18px 2px}.footnote{color:var(--ink-faint);font-size:12px}.skeleton{background:linear-gradient(90deg, var(--surface-sunken), #f7fafd, var(--surface-sunken));background-size:200% 100%;border-radius:7px;height:14px;animation:1.2s linear infinite shimmer}@keyframes shimmer{to{background-position:-200% 0}}.centred{place-items:center;min-height:100%;padding:24px;display:grid}.signin{gap:14px;width:min(420px,100%);display:grid}.signin h1{letter-spacing:-.03em;margin:0;font-size:34px}.signin h2{color:var(--ink-muted);margin:0;font-size:16px;font-weight:500}