:root {
  --bg: #0b111c; --bg2: #111a29; --bg3: #18233a; --line: #26344d; --fg: #e6edf7; --mut: #8b9ab3;
  --acc: #38bdf8; --open: #e5484d; --progress: #f5a524; --done: #30a46c; --over: #ff2d55;
  --side: 270px; --panel: 390px; --top: 54px; --foot: 30px;
  font-family: "Noto Sans HK", "Noto Sans CJK HK", "Noto Sans TC", "PingFang HK", "Microsoft JhengHei", system-ui, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg); font-size: 14px; }
body { display: flex; flex-direction: column; height: 100dvh; overflow: hidden; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
.muted { color: var(--mut); font-weight: 400; font-size: .85em; }

/* top bar */
.topbar { height: var(--top); flex: none; display: flex; align-items: center; gap: 8px; padding: 0 12px; background: linear-gradient(90deg, #101a2b, #0e1626); border-bottom: 1px solid var(--line); z-index: 30; }
.brand { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.brand b { font-size: 16px; white-space: nowrap; } .brand small { color: var(--mut); font-size: 11px; white-space: nowrap; }
.b3d { color: var(--acc); }
.demo-badge { background: #4a1d1f; color: #ffb4b4; border: 1px solid #a33; border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.spacer { flex: 1; }
.btn { background: var(--bg3); border: 1px solid var(--line); border-radius: 8px; padding: 7px 12px; white-space: nowrap; transition: background .15s, border-color .15s; }
.btn:hover { background: #22304a; border-color: #3a4d6e; }
.btn.primary { background: #0e5a86; border-color: #1479b3; } .btn.primary:hover { background: #136fa5; }
.btn.on { background: #1d4f73; border-color: var(--acc); }
.btn.sm { padding: 3px 9px; font-size: 12px; }
.btn.block { width: 100%; }
.btn.danger, .menu-pop .danger { color: #ff9b9b; }
.ibtn { background: transparent; border: 0; font-size: 20px; padding: 4px 8px; border-radius: 8px; }
.ibtn:hover { background: var(--bg3); }
.menu { position: relative; }
.menu-pop { position: absolute; right: 0; top: calc(100% + 6px); background: #131d2f; border: 1px solid var(--line); border-radius: 10px; padding: 6px; width: 290px; box-shadow: 0 12px 40px #0009; z-index: 50; }
.menu-pop button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 9px 10px; border-radius: 7px; }
.menu-pop button:hover { background: var(--bg3); }
.menu-pop hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; }
.menu-note { color: var(--mut); font-size: 11.5px; margin: 6px 10px 4px; line-height: 1.5; }

/* layout */
.layout { flex: 1; min-height: 0; display: grid; grid-template-columns: var(--side) 1fr var(--panel); }
#sidebar { background: var(--bg2); border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
.side-head { padding: 10px; display: grid; gap: 8px; border-bottom: 1px solid var(--line); }
.side-head input { width: 100%; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.floor-list { overflow: auto; flex: 1; padding: 4px 6px 20px; }
.floor-row, .room-row, .res-row { width: 100%; display: flex; align-items: center; gap: 8px; background: none; border: 0; border-radius: 7px; padding: 5px 8px; text-align: left; }
.floor-row:hover, .room-row:hover, .res-row:hover { background: var(--bg3); }
.floor.active > .floor-row { background: #1a3550; box-shadow: inset 3px 0 0 var(--acc); }
.fl { font-weight: 700; width: 42px; font-variant-numeric: tabular-nums; }
.fn { color: var(--mut); font-size: 12px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.heat-dot { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.cnt { display: flex; gap: 3px; }
.cnt i { font-style: normal; font-size: 11px; min-width: 18px; text-align: center; border-radius: 9px; padding: 0 5px; font-weight: 700; color: #111; }
.cnt i.o { background: var(--open); color: #fff; } .cnt i.p { background: var(--progress); } .cnt i.d { background: var(--done); color: #fff; } .cnt i.x { background: none; color: var(--over); border: 1px solid var(--over); }
.rooms { margin: 2px 0 6px 14px; border-left: 1px dashed var(--line); padding-left: 6px; }
.room-row { font-size: 13px; }
.room-row.active { background: #1a3550; }
.room-row .rn { flex: 1; }
.swatch { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.res-group { color: var(--mut); font-size: 11px; margin: 10px 8px 2px; text-transform: uppercase; letter-spacing: .05em; }
.res-row small { color: var(--mut); }

/* stage */
#stage { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: #0d1320; }
#canvasWrap { position: absolute; inset: 0; }
#canvasWrap canvas { display: block; width: 100%; height: 100%; }
#stage.placing canvas { cursor: crosshair !important; }
.crumbs { position: absolute; left: 12px; top: 10px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; background: #0b111ccc; border: 1px solid var(--line); border-radius: 10px; padding: 5px 8px; max-width: calc(100% - 24px); backdrop-filter: blur(6px); }
.crumbs button { background: none; border: 0; padding: 2px 6px; border-radius: 6px; color: var(--acc); }
.crumbs button:hover { background: var(--bg3); }
.crumbs .sep { color: var(--mut); }
.crumbs .cur { color: var(--fg); font-weight: 700; padding: 2px 6px; }
.place-hint { position: absolute; top: 56px; left: 50%; transform: translateX(-50%); background: #0e5a86; border: 1px solid var(--acc); padding: 8px 12px; border-radius: 10px; display: flex; gap: 10px; align-items: center; box-shadow: 0 8px 30px #0008; white-space: nowrap; }
.viewbar { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); display: flex; background: #0b111ccc; border: 1px solid var(--line); border-radius: 12px; padding: 4px; gap: 3px; backdrop-filter: blur(6px); }
.viewbar button { white-space: nowrap; background: none; border: 0; border-radius: 8px; padding: 5px 11px; display: flex; flex-direction: column; align-items: center; line-height: 1.1; font-weight: 600; }
.viewbar button small { font-size: 10px; color: var(--mut); font-weight: 400; }
.viewbar button:hover { background: var(--bg3); }
.viewbar button.on { background: #1d4f73; box-shadow: inset 0 0 0 1px var(--acc); }
.viewbar button[data-act] { font-size: 18px; }
.legend { position: absolute; right: 12px; top: 10px; background: #0b111ccc; border: 1px solid var(--line); border-radius: 10px; padding: 7px 10px; font-size: 12px; display: grid; gap: 5px; backdrop-filter: blur(6px); }
.legend > div { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-left: 4px; }
.dot.open { background: var(--open); } .dot.progress { background: var(--progress); } .dot.done { background: var(--done); }
.ring { display: inline-block; width: 13px; height: 13px; border-radius: 50%; border: 3px solid var(--over); margin-left: 6px; }
.grad { display: inline-block; width: 70px; height: 9px; border-radius: 5px; background: linear-gradient(90deg, #3b4658, #f5a524, #e5484d); }
.heat span { color: var(--mut); }
.tip { position: fixed; z-index: 60; pointer-events: none; background: #0b111ef2; border: 1px solid var(--line); border-radius: 8px; padding: 6px 9px; font-size: 12.5px; max-width: 280px; box-shadow: 0 6px 20px #0008; }
.tip b { display: block; }

/* panel */
.panel { background: var(--bg2); border-left: 1px solid var(--line); min-height: 0; overflow: auto; position: relative; }
#panelBody { padding: 14px 16px 40px; }
.ph { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.ph h2 { margin: 0; font-size: 18px; flex: 1; min-width: 0; }
h3 { font-size: 13.5px; margin: 18px 0 8px; color: #c8d3e6; display: flex; align-items: center; gap: 8px; }
h3 .muted { flex: 1; }
.tag { font-size: 11px; border-radius: 999px; padding: 2px 8px; font-weight: 700; white-space: nowrap; }
.tag.demo { background: #4a1d1f; color: #ffb4b4; border: 1px solid #a33; }
.tag.s-open { background: var(--open); color: #fff; } .tag.s-progress { background: var(--progress); color: #111; } .tag.s-done { background: var(--done); color: #fff; }
.tag.over { background: none; border: 1px solid var(--over); color: #ff8fa3; }
.proj { color: var(--mut); font-size: 12.5px; margin: 0 0 10px; }
.kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.kpi { background: var(--bg3); border: 1px solid var(--line); border-radius: 10px; padding: 8px 4px; text-align: center; }
.kpi:hover { border-color: #3a4d6e; }
.kpi b { display: block; font-size: 21px; font-variant-numeric: tabular-nums; }
.kpi span { font-size: 11.5px; color: var(--mut); }
.kpi.open b { color: var(--open); } .kpi.prog b { color: var(--progress); } .kpi.done b { color: var(--done); } .kpi.over b { color: var(--over); }
.pbar { height: 8px; background: var(--bg3); border-radius: 5px; overflow: hidden; margin: 12px 0 4px; }
.pbar > div { height: 100%; background: linear-gradient(90deg, #1f8f5a, var(--done)); }
small.note { color: var(--mut); font-size: 12px; }
.bars { display: grid; gap: 3px; }
.bar-row { display: grid; grid-template-columns: 74px 1fr 30px; gap: 8px; align-items: center; background: none; border: 0; padding: 3px 4px; border-radius: 6px; text-align: left; font-size: 12.5px; }
.bar-row:hover { background: var(--bg3); }
.bar-row.active { background: #1a3550; }
.bar-row .bl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-row .bn { text-align: right; color: var(--mut); font-variant-numeric: tabular-nums; }
.stack { display: flex; height: 12px; border-radius: 4px; overflow: hidden; background: var(--bg3); }
.stack i { display: block; height: 100%; }
.stack .o { background: var(--open); } .stack .p { background: var(--progress); } .stack .d { background: var(--done); }
.list { display: grid; gap: 4px; }
.li { display: flex; gap: 8px; align-items: center; background: var(--bg3); border: 1px solid transparent; border-radius: 8px; padding: 6px 8px; text-align: left; width: 100%; }
.li:hover { border-color: #3a4d6e; }
.li .lt { flex: 1; min-width: 0; } .li .lt b { font-size: 12.5px; } .li .lt div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12.5px; }
.li small { color: var(--mut); }
.card { background: #13203a; border: 1px solid #234068; border-radius: 12px; padding: 10px 12px; margin: 12px 0; }
.card h3 { margin-top: 2px; }
.row-btns { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }

/* detail form */
.form { display: grid; gap: 10px; }
.form label { display: grid; gap: 4px; font-size: 12px; color: var(--mut); }
.form input, .form select, .form textarea { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; color: var(--fg); font-size: 13.5px; width: 100%; min-width: 0; }
.form textarea { min-height: 62px; resize: vertical; line-height: 1.5; }
.form input:focus, .form select:focus, .form textarea:focus { outline: 2px solid #1479b3; border-color: transparent; }
.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.seg button { border: 1px solid var(--line); background: var(--bg); border-radius: 8px; padding: 7px 4px; font-weight: 700; font-size: 13px; }
.seg button.on.open { background: var(--open); border-color: var(--open); } .seg button.on.progress { background: var(--progress); border-color: var(--progress); color: #111; } .seg button.on.done { background: var(--done); border-color: var(--done); }
.duehint { font-size: 12.5px; padding: 6px 9px; border-radius: 8px; background: var(--bg3); }
.duehint.over { background: #3d1220; color: #ffb3c1; border: 1px solid #7a2238; }
.duehint.ok { color: #b9f0cf; }
.loc { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; background: var(--bg3); border-radius: 10px; padding: 7px 9px; font-size: 13px; }
.loc b { flex: 1; }
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.thumb { position: relative; aspect-ratio: 4/3; border-radius: 8px; overflow: hidden; background: var(--bg3); border: 1px solid var(--line); padding: 0; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb .x { position: absolute; top: 3px; right: 3px; background: #000a; border: 0; border-radius: 50%; width: 22px; height: 22px; font-size: 12px; line-height: 22px; padding: 0; color: #fff; }
.thumb.add { display: grid; place-items: center; color: var(--mut); border-style: dashed; font-size: 12.5px; }
.pdfbox { background: var(--bg3); border: 1px solid var(--line); border-radius: 10px; padding: 9px; display: grid; gap: 8px; }
.pdfbox .pn { display: flex; gap: 8px; align-items: center; font-size: 13px; }
.pdfbox .pn span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdfbox iframe { width: 100%; height: 420px; border: 0; border-radius: 6px; background: #fff; }
.danger-zone { margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.danger-zone small { color: var(--mut); }

/* footer */
.notice { height: var(--foot); flex: none; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 0 12px; font-size: 11.5px; color: var(--mut); background: #0a0f18; border-top: 1px solid var(--line); white-space: nowrap; overflow: hidden; }
.notice span:first-child { overflow: hidden; text-overflow: ellipsis; }
#saved { color: #7fd8a8; }

/* modal + table */
.modal { position: fixed; inset: 0; background: #000a; z-index: 70; display: grid; place-items: center; padding: 18px; }
.modal-box { background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; width: min(1200px, 100%); max-height: 100%; display: flex; flex-direction: column; box-shadow: 0 20px 80px #000c; }
.modal-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.modal-head h2 { margin: 0; font-size: 17px; flex: 1; }
.filters { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--line); align-items: center; }
.filters input, .filters select { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; }
.filters input[type=search] { flex: 1 1 200px; }
.chk { display: flex; align-items: center; gap: 5px; font-size: 13px; white-space: nowrap; }
.tbl-wrap { overflow: auto; min-height: 200px; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th { position: sticky; top: 0; background: #16213a; text-align: left; padding: 8px; border-bottom: 1px solid var(--line); white-space: nowrap; cursor: pointer; user-select: none; }
.tbl th.sorted::after { content: attr(data-dir); color: var(--acc); }
.tbl td { padding: 7px 8px; border-bottom: 1px solid #1c2840; vertical-align: top; }
.tbl tbody tr { cursor: pointer; } .tbl tbody tr:hover { background: #17253f; }
.tbl td.nw { white-space: nowrap; }
.tbl .od { color: #ff8fa3; font-weight: 700; }
.empty { color: var(--mut); text-align: center; padding: 30px; }

/* lightbox */
.lightbox { position: fixed; inset: 0; background: #000e; z-index: 80; display: flex; align-items: center; justify-content: center; }
.lightbox figure { margin: 0; max-width: 92vw; max-height: 90vh; text-align: center; }
.lightbox img { max-width: 92vw; max-height: 82vh; border-radius: 8px; }
.lightbox figcaption { color: var(--mut); margin-top: 8px; }
.lb-close { position: absolute; top: 12px; right: 14px; font-size: 26px; }
.lb-prev, .lb-next { position: absolute; top: 50%; transform: translateY(-50%); font-size: 46px; color: #fff; }
.lb-prev { left: 10px; } .lb-next { right: 10px; }

.toast { position: fixed; left: 50%; bottom: 46px; transform: translateX(-50%); background: #14243c; border: 1px solid #2c4a72; padding: 9px 16px; border-radius: 10px; z-index: 90; box-shadow: 0 10px 30px #000a; max-width: 90vw; }
.toast.warn { border-color: #a9781b; background: #2e2410; } .toast.err { border-color: #a33; background: #3a1416; }
.only-m { display: none; }
html.shot .toast { display: none !important; }

/* responsive */
@media (max-width: 1180px) { :root { --side: 230px; --panel: 340px; } .kpis { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) {
  :root { --top: 50px; }
  .only-m { display: inline-block; }
  .hide-s { display: none; }
  .brand small { display: none; }
  .brand b { font-size: 14px; }
  .demo-badge { font-size: 10.5px; padding: 1px 7px; }
  .layout { grid-template-columns: 1fr; position: relative; }
  #sidebar { position: absolute; z-index: 40; left: 0; top: 0; bottom: 0; width: min(300px, 85vw); transform: translateX(-102%); transition: transform .25s; box-shadow: 10px 0 40px #000a; }
  #sidebar.open { transform: none; }
  .panel { position: absolute; z-index: 35; left: 0; right: 0; bottom: 0; height: 52%; border-left: 0; border-top: 1px solid var(--line); border-radius: 16px 16px 0 0; box-shadow: 0 -10px 40px #000a; transition: height .25s; }
  .panel.collapsed { height: 64px; overflow: hidden; }
  .sheet-handle { display: block; width: 100%; height: 18px; background: none; border: 0; position: sticky; top: 0; z-index: 2; background: var(--bg2); }
  .sheet-handle::before { content: ""; display: block; width: 44px; height: 5px; border-radius: 3px; background: #3a4d6e; margin: 6px auto; }
  #panelBody { padding-top: 2px; }
  .viewbar { bottom: calc(52% + 10px); }
  .legend { display: none; }
  .layout.sheet-collapsed .viewbar { bottom: 74px; }
  .kpis { grid-template-columns: repeat(5, 1fr); }
  .kpi b { font-size: 17px; }
  .notice span:first-child { font-size: 10.5px; }
  .tbl { font-size: 12px; }
  .viewbar button { padding: 4px 8px; }
  .modal { padding: 0; } .modal-box { border-radius: 0; height: 100%; }
}

@media (max-width: 520px) { .brand { display: none; } .btn { padding: 6px 10px; } .crumbs { font-size: 12.5px; } }