:root { --bg:#f4f6f8; --panel:#fff; --line:#e2e6ea; --ink:#1f2733; --muted:#6b7683;
        --green:#2e7d32; --green-bg:#e6f4e8; --yellow:#b98900; --yellow-bg:#fdf3d7;
        --red:#c62828; --red-bg:#fbe4e4; --blue:#1a6fb5; --blue-bg:#e8f2fb; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
       background: var(--bg); color: var(--ink); }
header { background:#12202f; color:#fff; padding:0 20px; display:flex; align-items:center;
         justify-content:space-between; flex-wrap:wrap; gap:8px; }
header .logo { display:flex; align-items:center; text-decoration:none; }
header .logo img { height:34px; display:block; border-radius:4px; margin-right:10px; }
header .brand { font-weight:700; font-size:17px; padding:14px 0; }
header nav { display:flex; flex-wrap:wrap; gap:4px; align-items:center; }
header nav a { color:#cfe0ef; text-decoration:none; padding:8px 12px; border-radius:6px; font-size:14px; }
header nav a:hover { background:#1d3145; color:#fff; }
header .who { font-size:13px; color:#9fb4c9; padding:0 4px; }
main { max-width:1100px; margin:0 auto; padding:24px 20px 40px; }
footer { text-align:center; color:var(--muted); font-size:12px; padding:8px 20px 26px; }
h1 { font-size:20px; margin:0 0 4px; }
h2 { font-size:16px; margin:26px 0 10px; }
.sub { color:var(--muted); font-size:13px; margin:0 0 16px; }
.flash { background:var(--blue-bg); border:1px solid #bcd7ee; color:#0b4d85; padding:10px 14px;
         border-radius:8px; margin-bottom:16px; font-size:14px; }
.panel { background:var(--panel); border:1px solid var(--line); border-radius:10px;
         padding:16px; margin-bottom:18px; }
.badge { display:inline-block; padding:2px 9px; border-radius:20px; font-size:12px; font-weight:600; }
.badge.green { background:var(--green-bg); color:var(--green); }
.badge.yellow { background:var(--yellow-bg); color:var(--yellow); }
.badge.red { background:var(--red-bg); color:var(--red); }
.badge.grey { background:#eef0f2; color:var(--muted); }
.badge.blue { background:var(--blue-bg); color:var(--blue); }
table.grid { width:100%; border-collapse:separate; border-spacing:6px; }
table.grid th { font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em;
                padding:6px 4px; text-align:center; font-weight:600; }
table.grid td.room { font-weight:600; white-space:nowrap; padding:0 8px; }
a.cell { display:block; text-align:center; text-decoration:none; padding:12px 6px;
         border-radius:10px; border:1px solid transparent; font-size:13px;
         min-width:92px; color:inherit; }
a.cell.green { background:var(--green-bg); border-color:#bfe2c6; color:var(--green); }
a.cell.green:hover { background:#d7eedd; }
a.cell.yellow { background:var(--yellow-bg); border-color:#ecd89a; color:var(--yellow); }
a.cell.yellow:hover { background:#f9ecc0; }
a.cell.red { background:var(--red-bg); border-color:#f0c4c4; color:var(--red); }
a.cell.red:hover { background:#fbd3d3; }
a.cell div.cname { font-weight:700; margin-bottom:3px; }
a.cell div.cstat { font-size:11px; opacity:.85; }
table.list { width:100%; border-collapse:collapse; font-size:14px; }
table.list th, table.list td { border-bottom:1px solid var(--line); padding:9px 10px; text-align:left; vertical-align:top; }
table.list th { font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.03em; background:#f8fafb; }
form.inline { display:inline; }
input[type=text], input[type=password], select, textarea {
  width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:8px;
  font-size:14px; font-family:inherit; background:#fff; }
textarea { min-height:90px; resize:vertical; }
label { font-size:13px; color:var(--muted); display:block; margin:12px 0 5px; }
button, .btn { background:var(--blue); color:#fff; border:0; border-radius:8px; padding:10px 16px;
               font-size:14px; cursor:pointer; font-family:inherit; text-decoration:none; display:inline-block; }
button:hover, .btn:hover { filter:brightness(1.08); }
button.green-btn { background:var(--green); }
button.red-btn { background:var(--red); }
button.ghost { background:#eef0f2; color:var(--ink); }
button.linkbtn { background:none; border:0; color:#cfe0ef; padding:8px 12px; border-radius:6px; font-size:14px; cursor:pointer; }
button.linkbtn:hover { background:#1d3145; color:#fff; }
.small { font-size:12px; color:var(--muted); }
.legend { display:flex; gap:16px; flex-wrap:wrap; font-size:12px; color:var(--muted); margin-bottom:6px; }
.legend .k { display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:5px; vertical-align:-1px; }
.k.green { background:var(--green); } .k.yellow { background:var(--yellow); } .k.red { background:var(--red); } .k.grey { background:var(--muted); }
.cell.grey { display:block; text-align:center; padding:12px 6px; border-radius:10px; min-width:92px;
             background:#eef0f2; border:1px solid #d9dde2; color:var(--muted); }
.cell.grey div.cname { font-weight:700; margin-bottom:3px; }
.cell.grey div.cstat { font-size:11px; opacity:.85; }
.cell.green, .cell.yellow, .cell.red { display:block; text-align:center; padding:12px 6px;
             border-radius:10px; min-width:92px; font-size:13px; }
.cell.green { background:var(--green-bg); border:1px solid #bfe2c6; color:var(--green); }
.cell.yellow { background:var(--yellow-bg); border:1px solid #ecd89a; color:var(--yellow); }
.cell.red { background:var(--red-bg); border:1px solid #f0c4c4; color:var(--red); }
.cell div.cname { font-weight:700; margin-bottom:3px; }
.cell div.cstat { font-size:11px; opacity:.85; }
table.compact { margin-top:14px; }
table.compact td.room { font-weight:600; white-space:nowrap; }
table.compact td:nth-child(2) { width:150px; }
.btn.ghost { background:#eef0f2; color:var(--ink); }
.roomgrid { display:grid; grid-template-columns:repeat(10, 1fr); gap:6px; margin-top:14px; }
@media (max-width:1279px){ .roomgrid { grid-template-columns:repeat(6, 1fr); } }
@media (max-width:700px){ .roomgrid { grid-template-columns:repeat(4, 1fr); } }
@media (max-width:480px){ .roomgrid { grid-template-columns:repeat(2, 1fr); } }
a.rtile { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
          text-align:center; text-decoration:none; border-radius:8px; border:1px solid transparent;
          padding:8px 4px; min-height:52px; color:inherit; }
a.rtile.green { background:var(--green-bg); border-color:#bfe2c6; color:var(--green); }
a.rtile.yellow { background:var(--yellow-bg); border-color:#ecd89a; color:var(--yellow); }
a.rtile.red { background:var(--red-bg); border-color:#f0c4c4; color:var(--red); }
a.rtile.grey { background:#eef0f2; border-color:#d9dde2; color:var(--muted); }
a.rtile .rname { font-weight:600; font-size:12px; white-space:nowrap; overflow:hidden;
                 text-overflow:ellipsis; max-width:100%; }
a.rtile .rstat { font-size:10px; opacity:.85; margin-top:2px; }
a.rtile .rtip { display:none; position:absolute; z-index:20; bottom:calc(100% + 8px); left:50%;
                transform:translateX(-50%); min-width:180px; max-width:260px; padding:9px 11px;
                border-radius:8px; background:#12202f; color:#fff; font-size:12px; line-height:1.4;
                box-shadow:0 4px 14px rgba(0,0,0,.25); text-align:left; white-space:normal; }
a.rtile .rtip::after { content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%);
                       border:6px solid transparent; border-top-color:#12202f; }
a.rtile .rtip b { display:block; margin-bottom:2px; }
a.rtile .rtip span { display:block; }
a.rtile .rtip .rtip-note { font-style:italic; opacity:.85; margin-top:4px; padding-top:4px; border-top:1px solid #2c4258; }
a.rtile:hover .rtip { display:block; }
.rtile-expand { grid-column:1 / -1; border:1px solid #d9dde2; border-radius:10px; padding:10px 12px;
                background:#fbfcfd; overflow-x:auto; }
.rtile-expand .rtile-expand-head { display:flex; align-items:center; justify-content:space-between;
                                   gap:10px; margin-bottom:8px; }
.rtile-expand .rname { font-weight:600; font-size:14px; }
.rtile-expand .grid { margin-top:0; }
.roomnote { font-weight:400; font-size:12px; color:var(--muted); margin-top:2px; max-width:180px; white-space:normal; }
.tabs { display:flex; gap:6px; margin-bottom:14px; }
.tabs a { padding:6px 14px; border-radius:8px; text-decoration:none; font-size:13px;
          background:#eef0f2; color:var(--ink); }
.tabs a.on { background:#12202f; color:#fff; }
.gridcols { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:800px){ .gridcols { grid-template-columns:1fr; } }
.err { background:var(--red-bg); border:1px solid #f0c4c4; color:#8b1a1a; padding:10px 14px;
       border-radius:8px; margin-bottom:16px; font-size:14px; }
.row { display:flex; gap:8px; flex-wrap:wrap; }
a.cell { transition:transform .05s; }
a.cell:active { transform:scale(.98); }