/* Vsketch — giao diện theo phác thảo của anh: thanh trên tối, thanh công cụ nổi giữa, công cụ bếp bên trái, thống kê góc phải. */
:root {
  --font: -apple-system, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --top: #3a3a3c; --top-ink: #f2f2f7; --top-dim: rgba(242, 242, 247, .55);
  --paper: #f6f3ec; --stage: #ffffff;
  --c-tile: rgba(60, 50, 40, .22); --c-column: #c8643b; --c-opening: #ffffff; --c-glass: #2b7de0;
  --c-mep: #c2410c; --c-water: #0e7490; --c-beam: #9a5b13; --c-hl: #ff9f0a; --c-inside: rgba(52, 199, 89, .75);
  --c-elev-wall: #fbfbfa; --c-cut-fill: #e8e9ec; --c-cut-hatch: rgba(31, 41, 51, .55); --c-column-face: rgba(200, 100, 59, .22);
  --c-glass-fill: rgba(43, 125, 224, .12); --c-kit-lower: #ecdfcb; --c-kit-upper: rgba(236, 223, 203, .55); --c-kit-tall: #dcc9ab; --c-kit-line: #7a5c3a; --c-kit-sym: #5b4630; --c-furn: #3d5a80; --c-furn-fill: rgba(61, 90, 128, .08); --c-opening-elev: #ffffff; --c-floor3d: #eceae4;
  --card: rgba(255, 255, 255, .86); --card-solid: #fff; --card-ink: #1c1c1e; --card-dim: #6e6e73;
  --line: rgba(60, 60, 67, .16); --hover: rgba(120, 120, 128, .12); --press: rgba(120, 120, 128, .22);
  --accent: #0a84ff; --accent-ink: #fff; --warn: #b45309; --bad: #d70015;
  --shadow: 0 8px 28px rgba(0, 0, 0, .14), 0 1px 3px rgba(0, 0, 0, .08);
  --c-grid: rgba(70, 80, 90, .07); --c-grid2: rgba(70, 80, 90, .15);
  --c-wall: #b9bec6; --c-wall-sel: #0a84ff; --c-wall-draft: #cfd3d9; --c-wall-ghost: rgba(10, 132, 255, .18);
  --c-ink: #1f2933; --c-muted: #6b7280; --c-floor: rgba(255, 253, 247, .92); --c-floor-sel: rgba(10, 132, 255, .12);
  --c-dim: #374151; --c-dim-tool: #b0178c; --c-warn: #c2410c; --c-bad: #d70015;
  --c-accent: #0a84ff; --c-accent-soft: rgba(10, 132, 255, .18); --c-label-bg: rgba(255, 253, 247, .92); --c-badge: rgba(255, 255, 255, .95);
  --c-axis-x: #e5484d; --c-axis-y: #30a46c; --c-guide: #6e56cf; --c-rel: #d6409f; --c-mid: #0891b2; --c-pt: #30a46c; --c-pt-fill: rgba(255, 255, 255, .9);
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px);
}
[data-theme="dark"] {
  --top: #1c1c1e; --paper: #1b1c1f; --stage: #1b1c1f;
  --c-tile: rgba(255, 255, 255, .16); --c-column: #ee8a5e; --c-opening: #1b1c1f; --c-glass: #7cb7ff;
  --c-mep: #ff9f0a; --c-water: #4fd1e5; --c-beam: #e0a458; --c-hl: #ffd60a; --c-inside: rgba(76, 217, 100, .8);
  --c-elev-wall: #24262b; --c-cut-fill: #33363c; --c-cut-hatch: rgba(232, 234, 237, .5); --c-column-face: rgba(238, 138, 94, .22);
  --c-glass-fill: rgba(124, 183, 255, .14); --c-kit-lower: #5a4c3c; --c-kit-upper: rgba(90, 76, 60, .55); --c-kit-tall: #6a5843; --c-kit-line: #e6c9a2; --c-kit-sym: #f2dcc0; --c-furn: #9ec5ff; --c-furn-fill: rgba(158, 197, 255, .1); --c-opening-elev: #1b1c1f; --c-floor3d: #2f3238;
  --card: rgba(44, 44, 46, .86); --card-solid: #2c2c2e; --card-ink: #f2f2f7; --card-dim: #98989f;
  --line: rgba(84, 84, 88, .55); --hover: rgba(120, 120, 128, .2); --press: rgba(120, 120, 128, .32);
  --accent: #0a84ff; --warn: #ff9f0a; --bad: #ff453a;
  --shadow: 0 8px 28px rgba(0, 0, 0, .5), 0 1px 3px rgba(0, 0, 0, .4);
  --c-grid: rgba(255, 255, 255, .05); --c-grid2: rgba(255, 255, 255, .11);
  --c-wall: #6b7480; --c-wall-sel: #409cff; --c-wall-draft: #555d68; --c-wall-ghost: rgba(64, 156, 255, .22);
  --c-ink: #e8eaed; --c-muted: #9aa0a6; --c-floor: rgba(40, 42, 47, .92); --c-floor-sel: rgba(64, 156, 255, .16);
  --c-dim: #c9ced6; --c-dim-tool: #f0a6e4; --c-warn: #ffb340; --c-bad: #ff6961;
  --c-accent: #409cff; --c-accent-soft: rgba(64, 156, 255, .22); --c-label-bg: rgba(40, 42, 47, .92); --c-badge: rgba(58, 58, 60, .95);
  --c-axis-x: #ff6369; --c-axis-y: #4cc38a; --c-guide: #9e8cfc; --c-rel: #f076c2; --c-mid: #22b8cf; --c-pt: #4cc38a; --c-pt-fill: rgba(28, 28, 30, .9);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none; background: var(--top); }
body { font: 14px/1.35 var(--font); color: var(--card-ink); -webkit-font-smoothing: antialiased;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-text-size-adjust: 100%; }
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; touch-action: manipulation; }
button:disabled { opacity: .35; cursor: default; }
svg { width: 22px; height: 22px; display: block; flex: none; }
[hidden] { display: none !important; }

#app { position: fixed; inset: 0; display: flex; flex-direction: column; }

/* Thanh trên */
#topbar { flex: none; height: calc(46px + var(--safe-t)); padding: var(--safe-t) calc(8px + var(--safe-r)) 0 calc(8px + var(--safe-l));
  background: var(--top); color: var(--top-ink); display: flex; align-items: center; gap: 2px; z-index: 5; }
.logo { display: flex; align-items: center; height: 40px; padding: 0 8px; border-radius: 10px; color: #f2f2f7; }
.logo:hover { background: rgba(255, 255, 255, .08); }
.logo svg { height: 30px; width: auto; display: block; overflow: visible; }
.proj-name { height: 38px; padding: 0 10px; border-radius: 10px; color: var(--top-dim); max-width: 34vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj-name:hover { background: rgba(255, 255, 255, .08); color: var(--top-ink); }
.tb-btn { width: 40px; height: 38px; display: grid; place-items: center; border-radius: 10px; color: var(--top-ink); }
.tb-btn:hover:not(:disabled) { background: rgba(255, 255, 255, .1); }
.tb-btn:active:not(:disabled) { background: rgba(255, 255, 255, .18); }
#b-notes.has { color: #ffd60a; }
#b-cloud[data-state="pending"] { color: #ffd60a; }
#b-cloud[data-state="error"] { color: #ff453a; }
.spacer { flex: 1; }

/* Vùng vẽ: luôn chiếm trọn phần còn lại, mọi bảng đều nổi phía trên */
#stage { position: relative; flex: 1; overflow: hidden; background-color: var(--stage); touch-action: none; }
#stage.paper { background-image: var(--paper-tex); background-size: 192px 192px; }
#cv { position: absolute; inset: 0; display: block; touch-action: none; cursor: crosshair; }

.float, .card { position: absolute; z-index: 3; background: var(--card); color: var(--card-ink); box-shadow: var(--shadow);
  -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); border: .5px solid var(--line); }
.bar { display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 14px; }
.bar.vert { flex-direction: column; }

#ftool { top: 10px; left: 50%; transform: translateX(-50%); max-width: calc(100% - 20px); overflow-x: auto; scrollbar-width: none; }
#ftool::-webkit-scrollbar { display: none; }
.ft-btn { width: 44px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 10px; color: var(--card-ink); position: relative; transition: background .12s; }
.ft-btn:hover { background: var(--hover); }
.ft-btn:active { background: var(--press); }
.ft-btn.on { background: var(--accent); color: var(--accent-ink); }
.ft-btn.dim-off { opacity: .35; }
kbd { font: 600 10px var(--font); padding: 1px 5px; border-radius: 4px; border: 1px solid var(--line); color: var(--card-dim); }
.chip.primary kbd { color: inherit; border-color: rgba(255, 255, 255, .5); }
.dot { width: 16px; height: 16px; border-radius: 8px; display: block; box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .15); }
.ft-text { font-weight: 700; font-size: 12px; letter-spacing: .4px; width: 48px; }
.ft-text:not(.on) { color: var(--card-dim); }
.ft-sep { width: 1px; height: 26px; background: var(--line); margin: 0 4px; flex: none; }

#door-tools { position: absolute; z-index: 4; transform: translate(-50%, -50%); display: flex; gap: 10px; }
#door-tools button { width: 46px; height: 46px; border-radius: 23px; background: var(--accent); color: #fff; display: grid; place-items: center; box-shadow: var(--shadow); }
#door-tools button:active { transform: scale(.94); }
#ltool { left: calc(10px + var(--safe-l)); top: 50%; transform: translateY(-50%); }

#ctx { top: 64px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; padding: 5px; border-radius: 12px;
  max-width: calc(100% - 20px); overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
.chip { height: 34px; padding: 0 12px; border-radius: 9px; display: flex; align-items: center; gap: 6px; background: var(--hover); flex: none; }
.chip svg { width: 18px; height: 18px; }
.chip span { color: var(--card-dim); }
.chip b { font-weight: 650; font-variant-numeric: tabular-nums; }
.chip:active { background: var(--press); }
.chip.primary { background: var(--accent); color: var(--accent-ink); }
.chip.primary span { color: inherit; }
.ctx-hint { color: var(--card-dim); font-size: 13px; padding: 0 8px; }

#stats { top: 10px; right: calc(10px + var(--safe-r)); border-radius: 12px; padding: 8px 10px; display: grid; grid-template-columns: auto auto; gap: 4px 14px; }
.st { display: grid; grid-template-columns: 16px auto; grid-template-rows: auto auto; column-gap: 6px; align-items: center; }
.st svg { width: 15px; height: 15px; grid-row: span 2; color: var(--card-dim); }
.st b { font-size: 12.5px; font-weight: 650; font-variant-numeric: tabular-nums; }
.st span { font-size: 10.5px; color: var(--card-dim); }
.st.warn b { color: var(--warn); }

/* Bảng thông tin vật đang chọn */
#panel { left: calc(70px + var(--safe-l)); bottom: calc(14px + var(--safe-b)); width: 320px; max-width: calc(100% - 90px); border-radius: 16px; padding: 12px; }
.pn-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin: 0 2px 8px; }
.pn-title { font-size: 17px; font-weight: 700; letter-spacing: -.2px; }
.pn-sub { color: var(--card-dim); font-size: 13px; }
.icon-btn { width: 32px; height: 32px; border-radius: 16px; display: grid; place-items: center; background: var(--hover); flex: none; }
.icon-btn svg { width: 16px; height: 16px; }
.pn-rows { display: flex; flex-direction: column; background: var(--hover); border-radius: 12px; overflow: hidden; }
.pn-row { min-height: 46px; padding: 0 12px; display: flex; align-items: center; gap: 8px; text-align: left; border-bottom: .5px solid var(--line); }
.pn-row:last-child { border-bottom: 0; }
.pn-row:active { background: var(--press); }
.pn-l { flex: 1; }
.pn-v { font-weight: 650; font-variant-numeric: tabular-nums; font-size: 15px; }
.pn-row svg { width: 16px; height: 16px; color: var(--card-dim); }
.pn-row.warn .pn-v { color: var(--warn); }
.pn-row.bad .pn-v { color: var(--bad); }
.pn-row.sub { min-height: 38px; background: rgba(120, 120, 128, .05); }
.pn-row.sub .pn-l { color: var(--card-dim); font-size: 13.5px; white-space: pre; }
.pn-row.sub .pn-v { font-size: 14px; }
.pn-row.danger { color: var(--bad); justify-content: center; }
#panel { max-height: calc(100% - 140px); overflow-y: auto; }
.pn-row.danger .pn-l { flex: none; }

/* Bàn phím số */
#numpad { right: calc(14px + var(--safe-r)); bottom: calc(14px + var(--safe-b)); width: 300px; border-radius: 20px; padding: 14px; z-index: 6; }
.np-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.np-title { font-weight: 700; font-size: 15px; }
.np-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
.np-fields button { text-align: left; padding: 6px 10px; border-radius: 10px; background: var(--hover); display: flex; flex-direction: column; border: 1.5px solid transparent; }
.np-fields button span { font-size: 11.5px; color: var(--card-dim); }
.np-fields button b { font-size: 15px; font-variant-numeric: tabular-nums; }
.np-fields button.on { border-color: var(--accent); background: var(--card-solid); }
.np-lbl { margin-right: auto; align-self: center; font-size: 13px; color: var(--card-dim); }
.np-display { margin: 12px 0 2px; height: 58px; border-radius: 14px; background: var(--card-solid); border: .5px solid var(--line);
  display: flex; align-items: baseline; justify-content: flex-end; gap: 6px; padding: 8px 14px 0; }
.np-num { font-size: 36px; font-weight: 650; letter-spacing: -.5px; font-variant-numeric: tabular-nums; line-height: 44px; }
.np-num.fresh { background: rgba(10, 132, 255, .2); border-radius: 6px; padding: 0 4px; }
.np-num.hint { color: var(--card-dim); opacity: .6; }
.np-unit { font-size: 16px; color: var(--card-dim); }
.np-note { font-size: 12.5px; color: var(--card-dim); min-height: 17px; margin-top: 4px; }
.np-err { font-size: 13px; color: var(--bad); min-height: 0; }
.np-err:not(:empty) { margin-top: 2px; }
.np-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 8px; }
.np-keys button { height: 50px; border-radius: 12px; background: var(--card-solid); font-size: 22px; font-weight: 500; border: .5px solid var(--line); }
.np-keys button:active { background: var(--press); }
.np-ok { margin-top: 8px; width: 100%; height: 48px; border-radius: 12px; background: var(--accent); color: var(--accent-ink);
  font-weight: 650; font-size: 16px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.np-ok:active { filter: brightness(.9); }

#toast { position: absolute; left: 50%; top: 112px; transform: translateX(-50%); z-index: 7; max-width: min(560px, calc(100% - 32px));
  background: rgba(28, 28, 30, .92); color: #fff; padding: 10px 16px; border-radius: 14px; font-size: 14px; box-shadow: var(--shadow); text-align: center; pointer-events: none; }

/* Menu thả xuống */
#menu { position: fixed; z-index: 8; width: 280px; border-radius: 14px; padding: 6px; }
.mn-head { padding: 8px 10px 10px; display: flex; flex-direction: column; border-bottom: .5px solid var(--line); margin-bottom: 4px; }
.mn-head span { font-size: 12px; color: var(--card-dim); }
.mn-sec { font-size: 12px; color: var(--card-dim); padding: 10px 10px 4px; text-transform: uppercase; letter-spacing: .4px; }
.mn-item { width: 100%; min-height: 40px; padding: 0 10px; border-radius: 9px; text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mn-item:hover { background: var(--hover); }
.mn-item span { color: var(--card-dim); font-size: 12px; }
.mn-item.danger { color: var(--bad); }
.mn-note { font-size: 13px; color: var(--card-dim); padding: 2px 10px 8px; }
.seg { display: flex; background: var(--hover); border-radius: 9px; padding: 2px; margin: 0 6px 6px; }
.seg button { flex: 1; height: 30px; border-radius: 7px; font-size: 13px; }
.seg button.on { background: var(--card-solid); box-shadow: 0 1px 3px rgba(0, 0, 0, .15); font-weight: 600; }
.tog i { width: 42px; height: 26px; border-radius: 13px; background: var(--press); position: relative; transition: background .15s; flex: none; }
.tog i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 11px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .15s; }
.tog.on i { background: #34c759; }
.tog.on i::after { transform: translateX(16px); }

.mn-item.big { min-height: 54px; justify-content: flex-start; gap: 12px; }
.mn-item.big svg { color: var(--accent); }
.mi-t { display: flex; flex-direction: column; }
.mi-t span { font-size: 12px; color: var(--card-dim); }

/* Bảng trượt (dự án, ghi chú, chọn thiết bị, chọn sàn) */
#sheet-wrap { position: fixed; inset: 0; z-index: 8; background: rgba(0, 0, 0, .25); display: flex; align-items: flex-end; justify-content: center; }
#sheet { position: relative; width: min(720px, 100%); max-height: min(86vh, 900px); border-radius: 20px 20px 0 0; background: var(--card-solid);
  display: flex; flex-direction: column; padding-bottom: var(--safe-b); animation: up .22s cubic-bezier(.2, .8, .2, 1); }
@keyframes up { from { transform: translateY(40px); opacity: 0; } }
@media (min-width: 760px) { #sheet-wrap { align-items: center; } #sheet { border-radius: 20px; } }
.sh-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 8px; }
.sh-title { font-size: 19px; font-weight: 700; letter-spacing: -.2px; }
.sh-body { overflow-y: auto; padding: 0 16px 18px; -webkit-overflow-scrolling: touch; }
.sh-sec { font-size: 12px; color: var(--card-dim); text-transform: uppercase; letter-spacing: .4px; margin: 16px 2px 8px; }
.sh-note { color: var(--card-dim); font-size: 13.5px; margin: 2px 2px 10px; }
.sh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.sh-card { text-align: left; padding: 10px 12px; border-radius: 12px; background: var(--hover); display: flex; flex-direction: column; gap: 2px; border: 1.5px solid transparent; }
.sh-card.on { border-color: var(--accent); }
.sh-card b { font-size: 14.5px; }
.sh-card span { font-size: 12px; color: var(--card-dim); }
.sh-card .sh-ic svg { width: 22px; height: 22px; color: var(--accent); margin-bottom: 4px; }
.sh-card .sw { width: 100%; height: 26px; border-radius: 7px; margin-bottom: 6px; box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .2); }
.sh-row { width: 100%; min-height: 48px; padding: 0 12px; border-radius: 12px; background: var(--hover); display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.sh-row.on { box-shadow: inset 0 0 0 1.5px var(--accent); }
.sh-row span { color: var(--card-dim); font-size: 13px; }
.sh-colors { display: flex; gap: 10px; flex-wrap: wrap; }
.sw-btn { width: 40px; height: 40px; border-radius: 20px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2); }
.sw-btn.on { box-shadow: 0 0 0 3px var(--accent); }

.pj-top { display: flex; gap: 8px; margin-bottom: 10px; }
.pj-search { flex: 1; height: 44px; border-radius: 12px; border: 1px solid var(--line); background: var(--hover); color: var(--card-ink); font: 17px var(--font); padding: 0 12px; outline: none; -webkit-user-select: text; user-select: text; }
.pj-top .dlg-btn { height: 44px; display: flex; align-items: center; gap: 6px; }
.pj-top .dlg-btn svg { width: 18px; height: 18px; }
.pj-list { display: flex; flex-direction: column; gap: 6px; }
.pj-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 6px; border-radius: 14px; background: var(--hover); }
.pj-row.on { box-shadow: inset 0 0 0 1.5px var(--accent); }
.pj-open { flex: 1; display: flex; align-items: center; gap: 12px; text-align: left; min-height: 52px; }
.pj-ic { width: 42px; height: 42px; border-radius: 10px; background: var(--card-solid); display: grid; place-items: center; color: var(--accent); flex: none; }
.pj-t { display: flex; flex-direction: column; min-width: 0; }
.pj-t b { font-size: 15.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj-t span { font-size: 12.5px; color: var(--card-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.nt-field { display: block; margin-bottom: 12px; }
.nt-head { display: flex; align-items: center; justify-content: space-between; margin: 0 2px 6px; font-weight: 600; font-size: 14px; }
/* chữ 17px trở lên để iPhone không tự phóng khi gõ */
.nt-input { width: 100%; border-radius: 12px; border: 1px solid var(--line); background: var(--hover); color: var(--card-ink); font: 17px/1.45 var(--font);
  padding: 11px 12px; outline: none; resize: vertical; -webkit-user-select: text; user-select: text; min-height: 46px; }
.nt-input:focus { border-color: var(--accent); background: var(--card-solid); }
textarea.nt-input { min-height: 110px; }
.mic svg { width: 18px; height: 18px; }
.mic.on { background: var(--bad); color: #fff; animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { opacity: .55; } }

/* Hộp thoại */
#dlg-wrap { position: fixed; inset: 0; z-index: 9; background: rgba(0, 0, 0, .28); display: grid; place-items: center; padding: 20px; }
#dlg { position: relative; width: min(400px, 100%); border-radius: 18px; padding: 18px; background: var(--card-solid); max-height: 80vh; overflow: auto; }
.dlg-title { font-size: 17px; font-weight: 700; }
.dlg-text { color: var(--card-dim); margin-top: 6px; }
.dlg-list { margin: 10px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; -webkit-user-select: text; user-select: text; }
.dlg-input { width: 100%; margin-top: 12px; height: 44px; border-radius: 10px; border: 1px solid var(--line); background: var(--hover); color: var(--card-ink);
  font: 17px var(--font); padding: 0 12px; outline: none; -webkit-user-select: text; user-select: text; }
.dlg-input:focus { border-color: var(--accent); }
.dlg-btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.dlg-btn { height: 40px; padding: 0 16px; border-radius: 10px; background: var(--hover); font-weight: 600; }
.dlg-btn.primary { background: var(--accent); color: var(--accent-ink); }
.dlg-btn.danger { background: var(--bad); color: #fff; }

/* Màn hẹp (iPad dọc, điện thoại): thống kê xuống dưới thanh công cụ để không chồng nhau */
@media (max-width: 1180px) {
  #stats { top: 62px; grid-template-columns: auto; padding: 6px 9px; }
  #ctx { top: 62px; max-width: calc(100% - 200px); }
}
@media (max-width: 640px) {
  .proj-name { display: none; }
  .logo svg { height: 24px; }
  #stats { display: none; }
  #ctx { max-width: calc(100% - 20px); }
  #panel { left: 8px; right: 8px; width: auto; max-width: none; bottom: calc(8px + var(--safe-b)); }
  #numpad { left: 8px; right: 8px; width: auto; bottom: calc(8px + var(--safe-b)); }
  #ltool { top: auto; bottom: 50%; }
}

/* chọn bộ thiết bị điện */
.mep-set { display: flex; align-items: center; gap: 10px; margin: 4px 2px 12px; font-weight: 600; }
.mep-select { flex: 1; height: 44px; border-radius: 12px; border: 1px solid var(--line); background: var(--hover); color: var(--card-ink); font: 600 16px var(--font); padding: 0 12px; }

/* màn đăng nhập / chờ duyệt */
#gate { position: fixed; inset: 0; z-index: 20; background: var(--top); display: grid; place-items: center; padding: 24px; }
.gate-card { width: min(420px, 100%); background: var(--card-solid); border-radius: 22px; padding: 28px 24px; text-align: center; box-shadow: var(--shadow); }
.gate-logo { color: var(--card-ink); display: flex; justify-content: center; margin-bottom: 14px; }
.gate-logo svg { height: 44px; width: auto; overflow: visible; }
.gate-card h2 { margin: 6px 0 8px; font-size: 21px; }
.gate-card p { color: var(--card-dim); margin: 0 0 18px; }
.gate-btn { height: 50px; padding: 0 22px; border-radius: 14px; background: var(--accent); color: #fff; font-weight: 650; font-size: 16px; }
.gate-btn.ghost { background: var(--hover); color: var(--card-ink); }
.us-row { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--hover); margin-bottom: 6px; }
.us-row .us-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.us-row .us-t span { font-size: 12.5px; color: var(--card-dim); }
.us-st { font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 8px; }
.us-st.pending { background: rgba(255, 159, 10, .2); color: var(--warn); } .us-st.approved { background: rgba(52, 199, 89, .18); color: #248a3d; } .us-st.blocked { background: rgba(255, 69, 58, .16); color: var(--bad); }