:root {
  --bg: #f4f2ee;
  --surface: #ffffff;
  --surface-2: #faf9f6;
  --ink: #1d2b36;
  --ink-2: #4a5763;
  --ink-3: #5f6b77;  /* ตัวหนังสือรอง: ≥4.5:1 บนพื้นขาวและพื้นการ์ด */
  --line: #e3e0d9;
  --accent: #c98a14;
  --accent-ink: #8a5d07;  /* ตัวหนังสือสีทอง (ทองสด --accent ใช้กับพื้น/แถบเท่านั้น) */
  --brand: #1d2b36;
  --danger: #b4372f;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(29, 43, 54, .06), 0 2px 8px rgba(29, 43, 54, .05);

  --st-not_started: #8a94a0;
  --st-in_progress: #2f6fb3;
  --st-waiting: #b7791f;
  --st-review: #7c4dbd;
  --st-revise: #c2410c;
  --st-done: #2f8a4f;
  --st-on_hold: #6b7280;
  font-family: "Sukhumvit Set", "Leelawadee UI", "Noto Sans Thai", "Noto Sans Thai UI", Tahoma, system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-size: 15px; line-height: 1.55; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

.container { max-width: 1680px; margin: 0 auto; padding: 16px 24px 80px; }
@media (max-width: 560px) { .container { padding: 12px 12px 80px; } }

/* ---- แถบบน */
.topbar { position: sticky; top: 0; z-index: 20; background: var(--brand); color: #fff; padding-top: env(safe-area-inset-top); }
.topbar-inner { max-width: 1680px; margin: 0 auto; padding: 10px 24px; display: flex; gap: 12px; align-items: center; }
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 700; letter-spacing: .2px; }
.brand-mark { width: 30px; height: 30px; border-radius: 8px; background: var(--accent); color: var(--brand); display: grid; place-items: center; font-size: 13px; font-weight: 800; }
.search { flex: 1; min-width: 0; }
.search input { width: 100%; border: 0; border-radius: 999px; padding: 8px 14px; background: rgba(255,255,255,.12); color: #fff; outline: none; }
.search input::placeholder { color: rgba(255,255,255,.6); }
.search input:focus { background: rgba(255,255,255,.2); }
.user-chip { text-decoration: none; font-size: 13px; background: rgba(255,255,255,.12); padding: 6px 12px; border-radius: 999px; white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 560px) { .brand-text { display: none; } }

/* ---- ทั่วไป */
h1 { font-size: 24px; line-height: 1.3; margin: 0; }
h2 { font-size: 17px; margin: 0; }
h3 { font-size: 15px; margin: 0; }
.muted { color: var(--ink-3); }
.small { font-size: 13px; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.spacer { flex: 1; }
.crumbs { font-size: 13px; color: var(--ink-3); margin-bottom: 6px; }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.page-head { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; margin: 8px 0 18px; }
.page-head .grow { flex: 1; min-width: 220px; }
.meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--ink-2); margin-top: 6px; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.card-pad { padding: 16px; }
.card + .card, .stack > * + * { margin-top: 14px; }
.card-head { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.card-head h2 { flex: 1; }
.empty { padding: 22px 16px; text-align: center; color: var(--ink-3); font-size: 14px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--line); background: var(--surface); padding: 8px 14px; border-radius: 10px; cursor: pointer; text-decoration: none; font-size: 14px; min-height: 38px; white-space: nowrap; }
.btn:hover { border-color: #c9c4b8; background: var(--surface-2); }
.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-primary:hover { background: #2b3e4d; border-color: #2b3e4d; }
.btn-accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-accent:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
.btn-ghost { border-color: transparent; background: transparent; }
.btn-danger { color: var(--danger); }
.btn-sm { padding: 4px 10px; min-height: 30px; font-size: 13px; border-radius: 8px; }
.btn:disabled { opacity: .5; cursor: default; }

.field { display: block; margin-bottom: 12px; }
.field > span { display: block; font-size: 13px; color: var(--ink-2); margin-bottom: 4px; }
.input, select.input, textarea.input { width: 100%; border: 1px solid var(--line); background: #fff; border-radius: 10px; padding: 9px 12px; outline: none; min-height: 40px; }
.input:focus { border-color: var(--ink-2); box-shadow: 0 0 0 3px rgba(29,43,54,.08); }
textarea.input { min-height: 90px; resize: vertical; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
@media (max-width: 560px) { .grid-2 { grid-template-columns: 1fr; } }

/* ---- สถานะและความคืบหน้า */
.status { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; padding: 2px 10px 2px 8px; border-radius: 999px; white-space: nowrap; color: color-mix(in srgb, var(--c) 62%, #000); background: color-mix(in srgb, var(--c) 12%, white); }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.bar { height: 8px; background: #ebe8e1; border-radius: 99px; overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--c, var(--accent)); border-radius: 99px; transition: width .3s; }
.pct { font-variant-numeric: tabular-nums; font-weight: 700; }

.ring { --p: 0; width: 76px; height: 76px; border-radius: 50%; background: conic-gradient(var(--accent) calc(var(--p) * 1%), #ebe8e1 0); display: grid; place-items: center; flex: none; }
.ring > span { width: 60px; height: 60px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; font-weight: 800; font-size: 17px; }

/* ---- หน้าแรก */
.projects { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.pcard { display: block; text-decoration: none; padding: 16px; transition: border-color .15s, transform .15s; }
.pcard:hover { border-color: #c9c4b8; transform: translateY(-1px); }
.pcard h2 { font-size: 18px; margin-bottom: 2px; }
.pcard .code { font-size: 12px; color: var(--ink-3); letter-spacing: .3px; }
.pcard .bar { margin: 14px 0 8px; }
.pcard.archived { opacity: .6; }
.stats { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--ink-2); }
.stats b { color: var(--ink); }
.segbar { display: flex; height: 6px; border-radius: 99px; overflow: hidden; margin-top: 10px; background: #ebe8e1; }
.segbar > i { display: block; height: 100%; }

/* ---- ส่วนงาน */
.group-title { font-size: 12px; font-weight: 700; color: var(--ink-3); letter-spacing: .4px; padding: 12px 16px 4px; text-transform: uppercase; }
.srow { display: grid; grid-template-columns: 1fr 140px 150px; gap: 12px; align-items: center; padding: 12px 16px; text-decoration: none; border-top: 1px solid var(--line); }
.group-title + .srow { border-top: 0; }
.srow:hover { background: var(--surface-2); }
.srow .name { font-weight: 600; }
.srow .sub { font-size: 12.5px; color: var(--ink-3); display: flex; gap: 10px; flex-wrap: wrap; margin-top: 2px; }
.srow .prog { display: flex; align-items: center; gap: 8px; }
.srow .prog .bar { flex: 1; }
.srow .prog .pct { width: 40px; text-align: right; font-size: 13px; }
.srow .tools { display: none; }
.reordering .srow { grid-template-columns: auto 1fr 140px 150px; }
.reordering .srow .tools { display: flex; gap: 4px; }
@media (max-width: 640px) {
  .srow, .reordering .srow { grid-template-columns: 1fr auto; }
  .srow .prog { grid-column: 1 / -1; }
  .reordering .srow .tools { grid-row: span 2; }
}
.flag { color: var(--danger); font-weight: 600; }

.layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
@media (max-width: 860px) { .layout { grid-template-columns: 1fr; } }

/* ---- รายการค้าง */
.tasks { list-style: none; margin: 0; padding: 0; }
.tasks li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 16px; border-top: 1px solid var(--line); }
.tasks li:first-child { border-top: 0; }
.tasks input[type=checkbox] { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--st-done); flex: none; }
.tasks .t { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.tasks .done .t { color: var(--ink-3); text-decoration: line-through; }
.tasks .who { font-size: 12px; color: var(--ink-3); }
.addline { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); }
.addline .input { flex: 1; min-width: 0; }

/* ---- เอกสาร */
.drop { display: block; margin: 12px 16px; border: 2px dashed var(--line); border-radius: 12px; padding: 18px; text-align: center; color: var(--ink-2); cursor: pointer; transition: border-color .15s, background .15s; }
.drop:hover, .drop.over { border-color: var(--accent); background: #fdf7ea; }
.drop b { color: var(--accent-ink); }
.uploads:empty { display: none; }
.uploads { padding: 0 16px 8px; }
.up { font-size: 13px; padding: 6px 0; }
.up .bar { height: 5px; margin-top: 4px; }
.docs { list-style: none; margin: 0; padding: 0; }
.doc { border-top: 1px solid var(--line); padding: 12px 16px; }
.doc-main { display: flex; gap: 12px; align-items: flex-start; }
.ficon { width: 40px; height: 46px; border-radius: 6px; flex: none; display: grid; place-items: end center; padding-bottom: 6px; font-size: 12px; font-weight: 800; color: #fff; background: #8a94a0; position: relative; }
.ficon::after { content: ""; position: absolute; top: 0; right: 0; border-width: 0 11px 11px 0; border-style: solid; border-color: var(--bg) var(--bg) rgba(0,0,0,.18) rgba(0,0,0,.18); border-top-right-radius: 6px; }
.ficon.pdf { background: #c0392b; } .ficon.xls { background: #1e7a45; } .ficon.img { background: #2f6fb3; }
.ficon.zip { background: #7a6a4f; } .ficon.doc { background: #2b579a; } .ficon.dwg { background: #b05d1a; }
.doc-body { flex: 1; min-width: 0; }
.doc-title { font-weight: 600; overflow-wrap: anywhere; }
.doc-title a { text-decoration: none; }
.doc-title a:hover { text-decoration: underline; }
.vtag { display: inline-block; font-size: 12px; font-weight: 700; background: var(--ink); color: #fff; border-radius: 5px; padding: 0 6px; margin-left: 6px; vertical-align: 2px; }
.doc-sub { font-size: 12.5px; color: var(--ink-3); overflow-wrap: anywhere; }
.doc-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.versions { margin: 10px 0 0 52px; border-left: 2px solid var(--line); padding-left: 12px; font-size: 13px; }
.versions div { padding: 4px 0; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.zipl { margin: 8px 0 0 52px; font-size: 12.5px; color: var(--ink-2); max-height: 260px; overflow: auto; background: var(--surface-2); border-radius: 8px; padding: 8px 12px; }

/* ---- กิจกรรม */
.feed { list-style: none; margin: 0; padding: 4px 0; }
.feed li { padding: 8px 16px; font-size: 13.5px; display: grid; grid-template-columns: 10px 1fr; gap: 10px; }
.feed li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--line); margin-top: 7px; }
.feed li.k-note::before { background: var(--accent); }
.feed li.k-upload::before { background: var(--st-in_progress); }
.feed li.k-update::before { background: var(--st-review); }
.feed li.k-task::before { background: var(--st-done); }
.feed .msg { overflow-wrap: anywhere; white-space: pre-wrap; }
.feed li.k-note .msg { background: #fdf7ea; border-radius: 8px; padding: 6px 10px; }
.feed .when { font-size: 12px; color: var(--ink-3); }

/* ---- ฟอร์มสถานะ */
.status-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.status-pick label { cursor: pointer; }
.status-pick input { position: absolute; opacity: 0; pointer-events: none; }
.status-pick .status { padding: 5px 12px 5px 10px; font-size: 13px; border: 1px solid transparent; }
.status-pick input:checked + .status { border-color: var(--c); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 25%, transparent); }
.status-pick input:focus-visible + .status { outline: 2px solid var(--ink); }
.range-row { display: flex; align-items: center; gap: 12px; }
.range-row input[type=range] { flex: 1; accent-color: var(--accent); height: 28px; }
.range-row .pct { width: 52px; font-size: 20px; text-align: right; }
.quick { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }

/* ---- ล็อกอิน */
.login { max-width: 380px; margin: 10vh auto 0; }
.login .brand-mark { width: 48px; height: 48px; font-size: 18px; border-radius: 12px; margin-bottom: 14px; }
.err { color: var(--danger); font-size: 13.5px; min-height: 20px; }

/* ---- modal / toast */
.modal { border: 0; border-radius: 16px; padding: 0; width: min(520px, calc(100vw - 24px)); max-height: calc(100vh - 40px); box-shadow: 0 20px 60px rgba(0,0,0,.25); color: var(--ink); }
.modal::backdrop { background: rgba(20, 28, 36, .45); }
.modal form { padding: 20px; }
.modal h2 { margin-bottom: 14px; }
.modal .actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; flex-wrap: wrap; }
.checks { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; margin-bottom: 8px; }
.checks label { display: flex; gap: 8px; align-items: center; font-size: 14px; padding: 4px 0; }
.toast { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); transform: translate(-50%, 30px); background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 10px; font-size: 14px; opacity: 0; pointer-events: none; transition: .2s; z-index: 50; max-width: calc(100vw - 32px); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.bad { background: var(--danger); }

.tabs { display: flex; gap: 4px; margin-bottom: 12px; }
.tabs a { text-decoration: none; padding: 6px 12px; border-radius: 999px; font-size: 13.5px; color: var(--ink-2); }
.tabs a.on { background: var(--ink); color: #fff; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; font-size: 14px; }
.kv dt { color: var(--ink-3); }
.kv dd { margin: 0; overflow-wrap: anywhere; }
code { background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; font-size: 13px; }
.loading { padding: 40px; text-align: center; color: var(--ink-3); }

/* ---- ข้อมูลถอดแบบ / AI */
.mini-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; padding: 12px 16px; }
.mini-stats a { text-decoration: none; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; display: flex; flex-direction: column; }
.mini-stats a:hover { border-color: #c9c4b8; }
.mini-stats b { font-size: 20px; font-variant-numeric: tabular-nums; }
.mini-stats span { font-size: 12.5px; color: var(--ink-3); }
.mini-stats a.warn b { color: var(--danger); }
.notice { background: #fdf7ea; border: 1px solid #f0dcae; color: var(--accent-ink); border-radius: 10px; padding: 10px 14px; font-size: 14px; margin: 0 0 14px; overflow-wrap: anywhere; }
.card .notice { margin: 0 16px 12px; }
.notice.bad { background: #fbeceb; border-color: #f0c4c0; color: var(--danger); }
.ai-actions { display: flex; gap: 6px; flex-wrap: wrap; padding: 12px 16px 4px; }
.tabs.scroll { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; }
.tabs.scroll a { white-space: nowrap; }
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl th { text-align: left; font-size: 12px; font-weight: 600; color: var(--ink-3); padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--surface-2); position: sticky; top: 0; }
.tbl td { padding: 7px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl tr.click { cursor: pointer; }
.tbl tr.click:hover td { background: var(--surface-2); }
.tbl .codes { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px; }
.tbl td.changed, .tbl .codes.changed { background: #fff6d6; }
.tbl .plus { color: var(--st-in_progress); font-weight: 600; }
.tbl .minus { color: var(--danger); font-weight: 600; }
.tbl.edit td { padding: 4px 6px; }
.tbl .cell { width: 100%; border: 1px solid transparent; background: transparent; border-radius: 6px; padding: 4px 6px; font-size: 13px; }
.tbl .cell:hover { border-color: var(--line); }
.tbl .cell:focus { border-color: var(--ink-2); background: #fff; outline: none; }
.tbl tr.st-new td:first-child { box-shadow: inset 3px 0 var(--st-done); }
.tbl tr.st-changed td:first-child { box-shadow: inset 3px 0 var(--accent); }
.tbl tr.warnrow td { color: var(--danger); font-size: 12.5px; padding-top: 0; border-bottom: 1px solid var(--line); }
.tbl tr.warnrow + tr td, .tbl tr:has(+ .warnrow) td { border-bottom: 0; }
.tag { display: inline-block; font-size: 12px; font-weight: 700; border-radius: 6px; padding: 1px 7px; white-space: nowrap; }
.tag.new { background: #e3f3e8; color: #1f6b3a; }
.tag.chg { background: #fff0cc; color: var(--accent-ink); }
.tag.same { background: #eef0f2; color: var(--ink-3); }
.tag.warn { background: #fbeceb; color: var(--danger); }
.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.filters .input { width: auto; min-width: 110px; flex: 0 1 auto; }
.filters input[name=q] { flex: 1 1 160px; }
.radio { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; padding: 4px 0; cursor: pointer; }
.radio input { margin-top: 4px; }
.doclist { max-height: 220px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; }
.doclist label { display: flex; gap: 8px; align-items: baseline; padding: 3px 0; font-size: 14px; }
.prose { white-space: pre-wrap; overflow-wrap: anywhere; }
.log { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; max-height: 420px; overflow: auto; background: var(--surface-2); border-radius: 8px; padding: 10px; margin: 10px 0 0; }
details > summary { cursor: pointer; font-weight: 600; }
.sec-pick { width: auto; max-width: 180px; min-height: 32px; padding: 4px 8px; font-size: 13px; }
.feed li.k-ai::before { background: #7c4dbd; }
.feed li.k-import::before, .feed li.k-takeoff::before { background: var(--accent); }
.grow { flex: 1; min-width: 0; }

/* ช่องเปิดรายบาน */
.segbar.big { height: 12px; margin-top: 0; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 13px; color: var(--ink-2); }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.bulk { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 16px; border-bottom: 1px solid var(--line); background: #faf9f6; }
.bulk .input { width: auto; }
.bulk .radio { padding: 0; }
.tbl tr.click { cursor: pointer; }
.tbl tr.click:hover td { background: #f6f4ef; }
.tbl input.opsel { width: 18px; height: 18px; accent-color: var(--st-in_progress); }
.thumbs { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; }
.thumbs img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); display: block; }

/* จุดที่ยืนอยู่ (หน้าโปรเจ็กต์) */
.here { padding: 16px 0 6px; }
.here-now { padding: 0 16px 6px; }
.here-title { font-size: 20px; font-weight: 800; margin: 2px 0 4px; line-height: 1.3; }
.here-title .muted { font-weight: 600; font-size: 15px; }
.steps { list-style: none; margin: 0; padding: 12px 16px 6px; display: flex; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: thin; }
.step { flex: 1 0 88px; position: relative; }
.step::before { content: ""; position: absolute; top: 15px; left: -50%; right: 50%; height: 3px; background: var(--line); z-index: 0; }
.step:first-child::before { display: none; }
.step.done::before { background: var(--st-done); }
.step.current::before { background: var(--accent); }
.step button { all: unset; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; text-align: center; position: relative; z-index: 1; }
.step .dot { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 13px; background: var(--surface); border: 2px solid #cfcac0; color: var(--ink-3); }
.step .lbl { font-size: 12px; line-height: 1.25; color: var(--ink-2); max-width: 84px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.step .st { font-size: 12px; color: var(--ink-3); min-height: 14px; }
.step.done .dot { background: var(--st-done); border-color: var(--st-done); color: #fff; }
.step.current .dot { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 0 0 5px rgba(201,138,20,.22); }
.step.current .lbl { color: var(--ink); font-weight: 700; }
.step.current .st { color: var(--accent); font-weight: 700; }
.step.behind .dot { border-color: var(--st-waiting); color: var(--accent-ink); }
.step.behind .st { color: var(--accent-ink); font-weight: 600; }
.step.skipped .dot { border-style: dashed; background: transparent; }
.step.skipped .lbl { color: var(--ink-3); text-decoration: line-through; }
.step button:focus-visible .dot { outline: 2px solid var(--ink-2); outline-offset: 2px; }
.levels { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 22px; padding: 12px 16px 10px; border-top: 1px solid var(--line); margin-top: 8px; }
@media (max-width: 720px) { .levels { grid-template-columns: 1fr; } }
.level .lv-head { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; margin-bottom: 6px; flex-wrap: wrap; }
.level .lv-head span { color: var(--ink-2); }
.level .bar { margin-bottom: 4px; }
.level .segbar.big { margin-top: 0; }
.level .legend { margin-top: 6px; font-size: 12px; }

/* ต้องทำต่อ */
.todo { list-style: none; margin: 0; padding: 0; }
.todo li { border-top: 1px solid var(--line); }
.todo li:first-child { border-top: 0; }
.todo a { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 10px 16px; text-decoration: none; color: inherit; min-height: 44px; }
.todo a:hover { background: var(--surface-2); }
.todo .status { white-space: nowrap; }
.todo .tx { min-width: 0; font-size: 14px; overflow-wrap: anywhere; }
.todo .tx small { display: block; color: var(--ink-3); font-size: 12px; margin-top: 1px; }
.todo .go { color: var(--ink-3); font-size: 20px; }
@media (max-width: 560px) { .todo a { grid-template-columns: 1fr auto; } .todo .status { grid-column: 1 / -1; justify-self: start; } .todo .go { grid-row: 2; grid-column: 2; } }

/* หน้างานแยกอาคาร × ชั้น */
.sitegrid { width: 100%; border-collapse: collapse; font-size: 13px; }
.sitegrid th { font-weight: 600; color: var(--ink-3); padding: 6px 8px; text-align: center; white-space: nowrap; }
.sitegrid tbody th { width: 44px; }
.sitegrid td { padding: 3px 4px; min-width: 66px; }
.sitegrid td a { display: block; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.sitegrid td a:hover { border-color: var(--ink-3); }
.sitegrid .n { display: block; font-weight: 700; font-size: 12.5px; margin-bottom: 4px; text-align: center; }
.sitegrid .mbar { display: flex; height: 6px; border-radius: 99px; overflow: hidden; background: #ebe8e1; }
.sitegrid .mbar i { display: block; height: 100%; }
.sitegrid td.na { background: repeating-linear-gradient(135deg, transparent 0 6px, #efece6 6px 7px); border-radius: 8px; }

/* กลุ่มส่วนงานตามขั้น */
.sgroup.st-current { background: #fdf7ea; box-shadow: inset 3px 0 var(--accent); }
.sgroup.st-skipped { opacity: .55; }
.gtag { font-size: 12px; font-weight: 700; padding: 1px 7px; border-radius: 99px; background: #eef0f2; color: var(--ink-3); margin-left: 6px; letter-spacing: 0; text-transform: none; }
.sgroup.st-current .gtag { background: var(--accent); color: var(--ink); }
.sgroup.st-behind .gtag { background: #fbf0dc; color: var(--accent-ink); }
.sgroup.st-done .gtag { background: #e3f3e8; color: #1f6b3a; }
.sgroup + .sgroup .group-title { border-top: 1px solid var(--line); }

/* การ์ดโปรเจ็กต์หน้าแรก */
.pc-stage { margin-top: 10px; font-size: 13.5px; font-weight: 700; color: var(--accent); }
.pc-levels { display: grid; gap: 6px; margin-top: 10px; }
.pc-levels > div { display: grid; grid-template-columns: 82px 1fr 40px; gap: 8px; align-items: center; font-size: 12.5px; color: var(--ink-2); }
.pc-levels b { text-align: right; color: var(--ink); }
.pc-levels .bar { margin: 0; }

/* หลอดไทม์ไลน์ 12 ขั้น: แถวเดียวถ้ากว้างพอ ไม่พอขึ้นแถวใหม่แบบงูเลื้อย (แถวคี่วิ่งขวา->ซ้าย) ต่อด้วยโค้ง */
.tl { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px 6px; margin: 0 0 14px; }
.tl-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 14px; margin-bottom: 10px; }
.tl-now { font-size: 13px; }
.tl-now b { font-size: 15.5px; }
.tl-track { --gap: 10px; --bar: 12px; --turn: 22px; padding: 0 var(--turn); }
.tl-row { position: relative; display: flex; margin-bottom: var(--gap); }
.tl-row:last-child { margin-bottom: 0; }
.tl-row.rev { flex-direction: row-reverse; }
.seg { all: unset; box-sizing: border-box; flex: 0 0 calc(100% / var(--per)); min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 0 2px 6px; border-radius: 0 0 8px 8px; cursor: pointer; text-align: center; }
.seg:hover { background: var(--surface-2); }
.seg:focus-visible { outline: 2px solid var(--ink-2); outline-offset: 1px; }
.seg.open { background: #f3f0e9; }
.seg-bar { position: relative; display: block; width: calc(100% + 4px); margin: 0 -2px; height: var(--bar); overflow: hidden; background: #e7e4dd; }
.seg + .seg .seg-bar { box-shadow: inset 2px 0 var(--surface); }
.tl-row.rev .seg + .seg .seg-bar { box-shadow: inset -2px 0 var(--surface); }
.seg.tstart .seg-bar { border-radius: 99px 0 0 99px; }
.seg.tend .seg-bar { border-radius: 0 99px 99px 0; }
.tl-row.rev .seg.tend .seg-bar { border-radius: 99px 0 0 99px; }
.seg-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: #b9b3a6; }
.tl-row.rev .seg-bar i { left: auto; right: 0; }
.seg.done .seg-bar, .seg.done .seg-bar i { background: var(--st-done); }
.seg.behind .seg-bar { background: repeating-linear-gradient(135deg, #f1d9a6 0 4px, #fbf1dd 4px 8px); }
.seg.behind .seg-bar i { background: var(--st-waiting); }
.seg.current .seg-bar { background: #f6e6c2; outline: 2px solid var(--accent); outline-offset: -2px; }
.seg.current .seg-bar i { background: var(--accent); }
.seg.skipped .seg-bar { background: repeating-linear-gradient(90deg, #d8d3c8 0 4px, #f4f2ee 4px 8px); }
/* โค้งต่อแถว: หนาเท่าหลอด จากหลอดแถวนี้ลงไปหลอดแถวถัดไป */
.tl-turn { position: absolute; top: 0; width: var(--turn); height: calc(100% + var(--gap) + var(--bar)); border: var(--bar) solid #e7e4dd; box-sizing: border-box; pointer-events: none; }
.tl-turn.right { right: calc(-1 * var(--turn)); border-left: 0; border-radius: 0 var(--turn) var(--turn) 0; }
.tl-turn.left { left: calc(-1 * var(--turn)); border-right: 0; border-radius: var(--turn) 0 0 var(--turn); }
.tl-turn.done { border-color: var(--st-done); }
.tl-turn.behind { border-color: #e2b866; }
.tl-turn.current { border-color: #f6e6c2; }
.tl-turn.skipped { border-color: #d8d3c8; }
.seg-num { font-size: 12px; font-weight: 800; color: var(--ink-3); margin-top: 3px; }
.seg.done .seg-num { color: var(--st-done); }
.seg.behind .seg-num { color: var(--accent-ink); }
.seg.current .seg-num { color: var(--ink); background: var(--accent); border-radius: 99px; padding: 0 7px; }
.seg-lbl { font-size: 12px; line-height: 1.25; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.seg.current .seg-lbl { color: var(--ink); font-weight: 700; }
.seg.skipped .seg-lbl { text-decoration: line-through; color: var(--ink-3); }
.seg-cnt { font-size: 12px; color: var(--ink-3); white-space: nowrap; min-height: 13px; }
.seg-cnt.warn { color: var(--accent-ink); font-weight: 700; }
.tl-legend { display: flex; flex-wrap: wrap; gap: 3px 12px; font-size: 12px; color: var(--ink-3); }
.tl-legend .lg { display: inline-flex; align-items: center; gap: 5px; }
.tl-legend .lg i { width: 18px; height: 8px; border-radius: 3px; background: #e7e4dd; display: inline-block; }
.tl-legend .lg.done i { background: var(--st-done); }
.tl-legend .lg.behind i { background: repeating-linear-gradient(135deg, var(--st-waiting) 0 3px, #fbf1dd 3px 6px); }
.tl-legend .lg.current i { background: var(--accent); }
.tl-legend .lg.skipped i { background: repeating-linear-gradient(90deg, #d8d3c8 0 3px, #f4f2ee 3px 6px); }
@media (max-width: 560px) { .tl { padding: 8px 6px 4px; } .tl-track { --turn: 16px; --bar: 10px; } .seg-lbl { font-size: 12px; } }

/* รายละเอียดขั้นใต้หลอด: ได้แล้ว / ยังขาด */
.tl-panel { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 10px; }
.tlp-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.tlp-state { display: inline-block; margin-left: 6px; font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 99px; background: #eef0f2; color: var(--ink-3); }
.tlp-state.done { background: #e3f3e8; color: var(--st-done); }
.tlp-state.behind { background: #fbf0dc; color: var(--accent-ink); }
.tlp-state.current { background: var(--accent); color: #fff; }
.tlp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; margin-top: 8px; }
@media (max-width: 720px) { .tlp-cols { grid-template-columns: 1fr; } }
.tlp-cols h3 { font-size: 13px; margin: 4px 0 6px; }
.tlp-list { list-style: none; margin: 0; padding: 0; }
.tlp-list li { border-left: 3px solid var(--line); margin-bottom: 4px; border-radius: 0 8px 8px 0; background: var(--surface-2); display: flex; align-items: center; }
.tlp-list.got li { border-left-color: var(--st-done); }
.tlp-list.miss li { border-left-color: var(--st-waiting); }
.tlp-list li > a, .tlp-list li > label { flex: 1; display: flex; align-items: center; gap: 8px; padding: 7px 10px; text-decoration: none; color: inherit; min-height: 40px; cursor: pointer; }
.tlp-list li > a:hover { background: #f3f0e9; }
.tlp-list .tx { flex: 1; min-width: 0; font-size: 13.5px; overflow-wrap: anywhere; }
.tlp-list .tx small { display: block; font-size: 12px; color: var(--ink-3); }
.tlp-list .go { color: var(--ink-3); font-size: 18px; }
.tlp-list input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--st-done); flex: none; }
.tlp-add { padding: 8px 0 0; border: 0; }
.tlp-acts { flex-wrap: wrap; gap: 8px; padding: 8px 0 4px; align-items: center; }

.levels-card .levels { border-top: 0; margin-top: 0; }

/* หัวโปรเจ็กต์แบบกระชับ: ชื่อ + ข้อมูลบรรทัดเดียว รายละเอียดซ่อนไว้ */
.phead { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; margin: 2px 0 10px; }
.phead h1 { font-size: 22px; }
.pcode { font-size: 12px; font-weight: 700; color: var(--ink-3); letter-spacing: .3px; margin-right: 8px; vertical-align: 3px; }
.pmeta { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; font-size: 13px; color: var(--ink-2); }
.pdesc { font-size: 13px; }
.pdesc summary { cursor: pointer; color: var(--ink-2); text-decoration: underline dotted; list-style: none; }
.pdesc summary::-webkit-details-marker { display: none; }
.pdesc[open] { flex-basis: 100%; }
.pdesc > div { white-space: pre-wrap; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; margin-top: 6px; color: var(--ink-2); }
@media (max-width: 560px) { .phead h1 { font-size: 20px; flex-basis: calc(100% - 70px); } .phead #editProject { margin-left: auto; } .pmeta { flex-basis: 100%; order: 3; font-size: 12.5px; } }

/* หน้าโปรเจ็กต์สองคอลัมน์: เนื้อหา | แชท Codex (ลากเส้นแบ่งปรับความกว้าง ซ่อนแชทได้) */
.pwrap { --chat-w: 420px; display: flex; align-items: flex-start; }
.pmain { flex: 1 1 auto; min-width: 0; container-type: inline-size; }
.pdiv { flex: 0 0 14px; align-self: stretch; position: relative; cursor: col-resize; touch-action: none; }
.pdiv::before { content: ""; position: absolute; top: 0; bottom: 0; left: 6px; width: 2px; border-radius: 2px; background: var(--line); transition: background .15s; }
.pdiv:hover::before, .pwrap.dragging .pdiv::before, .pdiv:focus-visible::before { background: var(--accent); }
.pcollapse { position: sticky; top: calc(var(--topbar-h, 52px) + 40vh); margin-left: -4px; width: 22px; height: 40px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); cursor: pointer; font-size: 16px; padding: 0; z-index: 1; }
.pcollapse:hover { border-color: var(--accent); color: var(--accent); }
.pchat { flex: 0 0 var(--chat-w); width: var(--chat-w); position: sticky; top: calc(var(--topbar-h, 52px) + 12px); height: calc(100vh - var(--topbar-h, 52px) - 24px); height: calc(100dvh - var(--topbar-h, 52px) - 24px); display: flex; flex-direction: column; min-height: 0; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.pchat > * { min-height: 0; }
.pchat > .card { flex: 1; border: 0; border-radius: 0; overflow: auto; }
.pchat-ph { padding: 16px; }
.pwrap.dragging, .pwrap.dragging * { user-select: none; cursor: col-resize; }
.pwrap.chat-collapsed .pdiv, .pwrap.chat-collapsed .pchat { display: none; }
.pchat-open { display: none; }
.pwrap.chat-collapsed .pchat-open { display: block; position: fixed; right: 0; top: 45vh; z-index: 15; writing-mode: vertical-rl; padding: 12px 6px; border-radius: 10px 0 0 10px; border: 1px solid var(--line); border-right: 0; background: var(--brand); color: #fff; font-weight: 700; cursor: pointer; box-shadow: 0 2px 10px rgba(29,43,54,.15); }
.ptabs { display: none; }
@container (max-width: 820px) { .pmain .layout { grid-template-columns: 1fr; } }
@container (max-width: 640px) { .pmain .levels { grid-template-columns: 1fr; } .pmain .srow { grid-template-columns: 1fr auto; } .pmain .srow .prog { grid-column: 1 / -1; } }
@media (max-width: 900px) {
  .pwrap { display: block; }
  .ptabs { display: flex; gap: 4px; position: sticky; top: var(--topbar-h, 52px); z-index: 12; background: var(--bg); padding: 6px 0 8px; margin-top: -6px; }
  .ptabs button { flex: 1; border: 1px solid var(--line); background: var(--surface); border-radius: 10px; padding: 8px 0; font: inherit; font-weight: 700; color: var(--ink-2); cursor: pointer; }
  .ptabs button.on { background: var(--brand); color: #fff; border-color: var(--brand); }
  .pdiv, .pchat-open, .pwrap.chat-collapsed .pchat-open { display: none !important; }
  .pchat { display: none; position: static; width: auto; height: calc(100dvh - var(--topbar-h, 52px) - 64px); }
  .pwrap.show-chat .pchat, .pwrap.chat-collapsed.show-chat .pchat { display: flex; }
  .pwrap.show-chat .pmain { display: none; }
}

/* แถบแจ้งหน้าเว็บรุ่นเก่าหลัง deploy */
.stale-bar { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; background: var(--brand); color: #fff; font-size: 14px; box-shadow: 0 6px 24px rgba(29,43,54,.25); max-width: calc(100% - 24px); }

/* สลับตัวเลขในตารางอาคาร × ชั้น: วัด / รับได้ / ติดตั้งเสร็จ / ส่งมอบ */
.seg-switch { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin-left: auto; }
.seg-switch button { border: 0; background: var(--surface); padding: 4px 10px; font: inherit; font-size: 12.5px; color: var(--ink-2); cursor: pointer; }
.seg-switch button + button { border-left: 1px solid var(--line); }
.seg-switch button.on { background: var(--brand); color: #fff; }

/* เมนูบน: โปรเจ็กต์ / ลูกค้า */
.topnav { display: flex; gap: 2px; flex: none; }
.topnav a { color: rgba(255,255,255,.82); text-decoration: none; font-size: 14px; padding: 6px 10px; border-radius: 999px; white-space: nowrap; }
.topnav a:hover { background: rgba(255,255,255,.12); color: #fff; }
@media (max-width: 560px) { .topnav a { padding: 6px 7px; font-size: 13px; } .topbar-inner { gap: 8px; padding: 10px 12px; } }

/* ส่วนที่เก็บไว้ (ซ่อนจากหน้าโปรเจ็กต์ นำกลับมาได้) */
.archived-secs { border-top: 1px solid var(--line); padding: 10px 16px; font-size: 13.5px; }
.archived-secs summary { cursor: pointer; color: var(--ink-2); }
.archived-secs ul { list-style: none; margin: 8px 0 0; padding: 0; }
.archived-secs li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 0; border-top: 1px dashed var(--line); }
.archived-secs li a { color: var(--ink-2); }

/* หน้าแรก: แถบสรุป + ตารางโปรเจ็ก (หัวตารางติดบนตอนเลื่อน) */
.home-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 4px 0 14px; }
.home-head h1 { font-size: 22px; }
.sum-strip { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.sum-strip > * { display: inline-flex; align-items: baseline; gap: 5px; padding: 6px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); font-size: 13px; color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.sum-strip b { font-size: 16px; color: var(--ink); }
.sum-strip a:hover { border-color: var(--ink-3); }
.sum-strip a.hot { border-color: #d9c6f0; background: #f6f1fd; }
.sum-strip a.hot b { color: var(--st-review); }
.home-filters .input[name=q] { flex: 1 1 220px; }
.home-tbl { overflow: visible; }
.ptable { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.ptable th { position: sticky; top: var(--topbar-h, 52px); z-index: 2; background: var(--surface-2); text-align: left; font-size: 12.5px; font-weight: 600; color: var(--ink-3); padding: 9px 12px; border-bottom: 1px solid var(--line); cursor: pointer; user-select: none; white-space: nowrap; }
.ptable th:hover { color: var(--ink); }
.ptable th.num, .ptable td.num { text-align: right; }
.ptable td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.ptable tbody tr { cursor: pointer; }
.ptable tbody tr:hover td { background: var(--surface-2); }
.ptable .c-code { color: var(--ink-3); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.ptable .c-name a { font-weight: 700; color: var(--ink); text-decoration: none; }
.ptable .c-name small { display: block; color: var(--ink-3); font-size: 12px; }
.ptable .c-cust a { color: var(--ink-2); }
.ptable .c-step { white-space: nowrap; }
.step-pill { display: inline-block; font-size: 12px; font-weight: 700; color: var(--ink); background: var(--accent); border-radius: 99px; padding: 0 7px; margin-right: 4px; }
.mini-prog { display: inline-flex; align-items: center; gap: 8px; width: 140px; }
.mini-prog .bar { flex: 1; margin: 0; }
.mini-prog span { width: 36px; text-align: right; font-size: 13px; }
.ptable b.warn { color: var(--accent-ink); }
.ptable b.draft { color: var(--st-review); }
.ptable .c-upd { white-space: nowrap; }
.pager { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 16px; border-top: 1px solid var(--line); }
.pager .btn[disabled] { opacity: .4; }
.home-filters .seg-switch { margin-left: 0; }
@media (max-width: 760px) {
  .ptable thead { display: none; }
  .ptable, .ptable tbody { display: block; }
  .ptable tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
  .ptable td { display: block; padding: 0; border: 0; text-align: left !important; }
  .ptable .c-code { grid-column: 1; order: 0; }
  .ptable .c-upd { grid-column: 2; grid-row: 1; text-align: right !important; }
  .ptable .c-name { grid-column: 1 / -1; }
  .ptable .c-cust { grid-column: 1 / -1; font-size: 13px; }
  .ptable .c-step { grid-column: 1 / -1; font-size: 13px; white-space: normal; }
  .ptable .c-prog { grid-column: 1 / -1; }
  .mini-prog { width: 100%; }
  .ptable .c-todo, .ptable .c-drafts { display: inline-block; font-size: 12.5px; color: var(--ink-3); }
  .ptable .c-todo::before, .ptable .c-drafts::before { content: attr(data-l) " "; }
  .ptable .c-todo { grid-column: 1; }
  .ptable .c-drafts { grid-column: 2; text-align: right !important; }
  .ptable tbody tr:hover td { background: none; }
}
@media (max-width: 560px) {
  .home-head { display: grid; grid-template-columns: 1fr auto; }
  .sum-strip { grid-column: 1 / -1; order: 3; display: grid; grid-template-columns: 1fr 1fr; }
  .sum-strip > * { padding: 6px 10px; font-size: 12px; white-space: normal; }
  .sum-strip b { font-size: 15px; }
}

/* สถานะโปรเจ็ก */
.pstatus-btn { all: unset; cursor: pointer; border-radius: 99px; }
.pstatus-btn:focus-visible { outline: 2px solid var(--ink-2); outline-offset: 2px; }
.pstatus-btn .status { cursor: pointer; }
.pstatus-btn:hover .status { filter: brightness(.95); box-shadow: 0 0 0 2px var(--line); }
.pstatus-pick { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.pstatus-pick label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; padding: 4px 6px; border-radius: 10px; border: 1px solid transparent; }
.pstatus-pick input { accent-color: var(--brand); }
.pstatus-pick label:has(input:checked) { border-color: var(--ink-3); background: var(--surface-2); }
.ptable .c-status { white-space: nowrap; }
@media (max-width: 760px) { .ptable .c-status { grid-column: 1 / -1; } }

/* หน้าโปรเจ็กแบบกระชับ */
.tl-pct { display: inline-block; margin-left: 8px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line); border-radius: 99px; padding: 0 8px; vertical-align: 1px; }
.site-fold > summary { cursor: pointer; padding: 10px 16px; font-size: 13.5px; color: var(--ink-2); list-style: none; border-top: 1px solid var(--line); }
.site-fold > summary::-webkit-details-marker { display: none; }
.site-fold > summary::before { content: "▸ "; }
.site-fold[open] > summary::before { content: "▾ "; }
.site-tabs { display: flex; align-items: center; gap: 12px; padding: 0 16px 8px; }
.site-tabs .seg-switch { margin-left: 0; }
.site-legend { padding: 8px 16px 12px; }
.site-legend .segbar.big { margin-bottom: 0; }
.tlp-tools { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 0 2px; }
.fold-card { margin-top: 16px; }
.fold-card > summary { cursor: pointer; padding: 12px 16px; font-weight: 700; list-style: none; color: var(--ink-2); }
.fold-card > summary::-webkit-details-marker { display: none; }
.fold-card > summary::before { content: "▸ "; }
.fold-card[open] > summary::before { content: "▾ "; }
.fold-card[open] > summary { border-bottom: 1px solid var(--line); }
.menu { position: relative; }
.menu > summary { list-style: none; font-size: 18px; line-height: 1; padding: 4px 10px; }
.menu > summary::-webkit-details-marker { display: none; }
.menu-list { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 190px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(29,43,54,.14); padding: 4px; display: flex; flex-direction: column; }
.menu-list button { all: unset; cursor: pointer; padding: 9px 12px; border-radius: 8px; font-size: 14px; }
.menu-list button:hover { background: var(--surface-2); }
ul.archived-secs { list-style: none; padding: 0; border: 0; }

/* 10 ขั้น (2 พ.ย. 69): ใครทำใต้ชื่อขั้น + กติกาของขั้นในรายละเอียด */
.seg-who { font-size: 12px; line-height: 1.2; color: var(--ink-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.seg.current .seg-who { color: var(--ink-2); }
@media (max-width: 560px) { .seg-who { font-size: 12px; -webkit-line-clamp: 1; } }
.tlp-who { font-size: 12.5px; color: var(--ink-2); margin-top: 3px; }
.tlp-rule { font-size: 12px; color: var(--ink-3); margin-top: 2px; max-width: 70ch; }
.tlp-list li > .lbl { flex: 1; display: flex; align-items: center; padding: 7px 10px; min-height: 40px; }
.tlp-list li.locked .tx { color: var(--ink-3); }
.tlp-list .pct { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; color: var(--ink-3); flex: none; }
.tlp-list .pct .input { width: 54px; padding: 4px 6px; font-size: 13px; text-align: right; }
.tlp-idle { margin-top: 8px; font-size: 12.5px; color: var(--ink-3); }
.tlp-idle summary { cursor: pointer; padding: 4px 0; }
.tlp-idle .tlp-list li { opacity: .75; }

/* บันทึกผลวัด 1 บาน: ระยะวัดจริง 6 จุด + ติ๊ก √ / X */
.om-mode { margin: 0 0 10px; }
.mtable { width: 100%; border-collapse: collapse; font-size: 13.5px; margin-bottom: 8px; }
.mtable th, .mtable td { padding: 3px 4px; text-align: left; }
.mtable thead th { font-size: 12px; color: var(--ink-3); font-weight: 600; }
.mtable tr.mgroup th { padding-top: 8px; font-size: 13px; }
.mtable td:first-child { width: 48px; color: var(--ink-2); }
.mtable .input { width: 100%; max-width: 140px; }
.tick { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.tick button { border: 0; background: var(--surface); width: 40px; height: 34px; font: inherit; font-size: 16px; font-weight: 700; color: var(--ink-3); cursor: pointer; }
.tick button + button { border-left: 1px solid var(--line); }
.tick button[data-v=pass].on { background: var(--st-done); color: #fff; }
.tick button[data-v=fail].on { background: var(--st-revise); color: #fff; }
.om-row { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; margin: 4px 0; }
.om-row > span:first-child { font-size: 13px; color: var(--ink-3); min-width: 64px; }
.om-result { margin: 8px 0 4px; font-size: 14px; }

/* ผู้ใช้ + บทบาท (3 พ.ย. 69) */
.login { max-width: 420px; }
.pick-people, .pick-roles { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-btn { border: 1px solid var(--line); background: var(--surface); border-radius: 99px; padding: 7px 14px; font: inherit; font-size: 14px; cursor: pointer; color: var(--ink); min-height: 38px; }
.chip-btn.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.role-opt { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; font-size: 14px; cursor: pointer; min-height: 40px; }
.role-opt input { width: 18px; height: 18px; margin: 0; accent-color: var(--brand); }
.role-opt:has(input:checked) { border-color: var(--brand); background: #eef1f4; }
.role-opt.sm { padding: 3px 8px; min-height: 0; font-size: 12.5px; }
.inline-add { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.inline-add .input { width: auto; padding: 4px 6px; font-size: 13px; }
.linkish { border: 0; background: none; padding: 0 2px; cursor: pointer; color: var(--ink-3); font: inherit; }
.big-list { display: grid; gap: 10px; }
.big-btn { display: flex; flex-direction: column; gap: 4px; position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px 40px 16px 16px; text-decoration: none; color: var(--ink); min-height: 64px; }
.big-btn b { font-size: 17px; }
.big-btn small { color: var(--ink-3); font-size: 13px; }
.big-btn .go { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 22px; color: var(--ink-3); }
/* แถบล่างบนมือถือ */
.bottombar { display: none; }
@media (max-width: 720px) {
  .bottombar:not([hidden]) { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--surface); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
  .bottombar a { flex: 1; text-align: center; padding: 12px 4px; font-size: 14px; text-decoration: none; color: var(--ink-2); min-height: 48px; }
  .bottombar a.on { color: var(--brand); font-weight: 700; box-shadow: inset 0 3px var(--brand); }
  body.has-bottombar #app { padding-bottom: 72px; }
}

/* หน้าโปรเจ็กแบบแท็บ · หน้าขั้น · หน้าห้อง (3 พ.ย. 69) */
.ptabbar { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin: 4px 0 12px; overflow-x: auto; scrollbar-width: none; }
.ptabbar::-webkit-scrollbar { display: none; }
.ptabbar button { border: 0; background: none; font: inherit; font-size: 14px; padding: 10px 12px; color: var(--ink-2); cursor: pointer; white-space: nowrap; box-shadow: inset 0 -3px transparent; }
.ptabbar button.on { color: var(--ink); font-weight: 700; box-shadow: inset 0 -3px var(--accent); }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 4px 16px 14px; }
.kpis > div { background: var(--surface-2); border-radius: 10px; padding: 10px; font-size: 13px; }
.kpis b { font-size: 20px; }
.kpis small { display: block; color: var(--ink-3); font-size: 12px; }
@media (max-width: 560px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
#siteGrid td.sel a { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 6px; }
.room-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; padding: 4px 16px 16px; }
.room-tile { display: flex; flex-direction: column; gap: 3px; border: 1px solid var(--line); border-radius: 10px; padding: 10px; text-decoration: none; color: var(--ink); background: var(--surface); min-height: 72px; }
.room-tile:hover { border-color: var(--accent); }
.room-tile small { color: var(--ink-3); font-size: 12px; }
.sdots { display: flex; flex-wrap: wrap; gap: 3px; }
.sdot { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.set-list { list-style: none; margin: 0; padding: 0 12px 12px; display: grid; gap: 6px; }
.set-row { all: unset; box-sizing: border-box; width: 100%; display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; cursor: pointer; min-height: 56px; background: var(--surface); }
.set-row:hover { border-color: var(--accent); }
.set-row .set-no { width: 28px; height: 28px; border-radius: 99px; background: var(--surface-2); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; flex: none; }
.set-row .tx { flex: 1; min-width: 0; }
.set-row .tx small { display: block; color: var(--ink-3); font-size: 12px; }
.set-row .chips { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.step-panel { border-top: 0; margin-top: 0; }
.recs dl.kv { margin: 4px 0; font-size: 13px; }
.step-panel .tlp-head { display: none; }

/* หน้างานบนมือถือ (Foreman) · ปุ่มใหญ่ ใช้มือเดียวได้ */
.site-head { display: flex; align-items: center; gap: 10px; margin: 4px 0 12px; }
.site-head h1 { font-size: 20px; margin: 0; }
.site-back { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); text-decoration: none; color: var(--ink); font-size: 22px; flex: none; cursor: pointer; font-family: inherit; }
.site-blds { display: flex; gap: 6px; margin-bottom: 10px; }
.site-blds a { flex: 1; text-align: center; padding: 12px 0; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); text-decoration: none; color: var(--ink); font-weight: 700; font-size: 17px; }
.site-blds a.on { background: var(--brand); color: #fff; border-color: var(--brand); }
.site-floors { display: grid; gap: 8px; }
.site-floor { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); overflow: hidden; }
.site-floor.open { border-color: var(--accent); background: #fbf3e3; }
.site-floor > a { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 14px; text-decoration: none; color: var(--ink); min-height: 52px; }
.site-floor > a small { color: var(--ink-3); }
.site-rooms { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; padding: 0 10px 12px; }
.site-room { display: flex; flex-direction: column; gap: 3px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 8px; background: var(--surface); text-decoration: none; color: var(--ink); min-height: 64px; }
.site-room small { color: var(--ink-3); font-size: 12px; }
.site-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.big-act { display: flex; align-items: center; justify-content: center; min-height: 64px; border-radius: 14px; background: var(--brand); color: #fff; font-weight: 700; font-size: 16px; cursor: pointer; text-align: center; padding: 8px; }
.big-act.alt { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.site-h2 { font-size: 15px; margin: 6px 0 8px; }
.site-sets { display: grid; gap: 6px; margin-bottom: 14px; }
.site-set { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--surface); cursor: pointer; min-height: 60px; }
.site-set .set-no { width: 30px; height: 30px; border-radius: 99px; background: var(--surface-2); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; flex: none; }
.site-set .tx { flex: 1; min-width: 0; line-height: 1.6; }
.site-set .tx small { color: var(--ink-3); }
.site-set .act { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; font-weight: 700; flex: none; }
.site-photos h2 { font-size: 15px; margin: 6px 0 8px; }
.site-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; }
.site-thumb { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--surface-2); display: block; }
.site-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.site-thumb .st { position: absolute; left: 4px; bottom: 4px; font-size: 12px; padding: 2px 6px; border-radius: 6px; background: rgba(255,255,255,.92); font-weight: 700; }
.site-thumb .st.done { color: #1f6b3a; } .site-thumb .st.sending, .site-thumb .st.pending { color: #2f6fb3; } .site-thumb .st.failed { color: #b4372f; }
.site-next { display: block; text-align: center; padding: 14px; margin: 10px 0 20px; font-weight: 700; }
/* แถบค้างส่ง: อยู่เหนือแถบล่าง */
.send-bar { position: fixed; left: 8px; right: 8px; bottom: 8px; z-index: 45; display: flex; align-items: center; justify-content: space-between; gap: 8px; background: #fff7e6; border: 1px solid #f0d49b; border-radius: 12px; padding: 8px 12px; font-size: 14px; box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.send-bar[hidden] { display: none; }
.send-bar b { color: #b4372f; }
@media (max-width: 720px) { body.has-bottombar .send-bar { bottom: calc(56px + env(safe-area-inset-bottom)); } body.has-sendbar #app { padding-bottom: 130px; } }
/* แผ่นรูปใหม่ (เต็มจอ) */
.photo-sheet { position: fixed; inset: 0; z-index: 60; background: var(--bg, #f3f1ec); overflow-y: auto; padding: 12px 16px calc(20px + env(safe-area-inset-bottom)); }
body.sheet-open { overflow: hidden; }
.ps-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ps-preview { background: #111; border-radius: 12px; overflow: hidden; min-height: 160px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #ddd; }
.ps-canvas { width: 100%; height: auto; display: block; }
.ps-note { margin: 8px 0 12px; }
.ps-label { font-weight: 700; margin-bottom: 6px; }
.ps-sets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.ps-sets button { border: 1px solid var(--line); background: var(--surface); border-radius: 10px; padding: 10px 14px; font: inherit; font-size: 15px; min-height: 44px; cursor: pointer; }
.ps-sets button.on { border: 2px solid var(--accent); background: #fbf3e3; font-weight: 700; }
.ps-acts { display: grid; gap: 8px; margin-top: 8px; }
.ps-acts .btn { min-height: 52px; font-size: 16px; }

/* ปรับการออกแบบ (3 พ.ย. 69): อ่านง่าย · ตัวหนังสือไม่ต่ำกว่า 12px · ปุ่มกดบนมือถือสูง ≥44px */
.seg-lbl { font-size: 13px; }
.seg-who { font-size: 12px; -webkit-line-clamp: 2; }
@media (max-width: 560px) { .seg-lbl { font-size: 12px; } .seg-who { display: none; } }
.tl-help { position: relative; }
.tl-help > summary { list-style: none; width: 28px; height: 28px; border-radius: 99px; border: 1px solid var(--line); display: grid; place-items: center; cursor: pointer; color: var(--ink-2); font-weight: 700; background: var(--surface); }
.tl-help > summary::-webkit-details-marker { display: none; }
.tl-help .tl-legend { position: absolute; right: 0; top: 34px; z-index: 5; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; box-shadow: var(--shadow); flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--ink-2); width: max-content; }
.tl-help .tl-legend .lg { gap: 8px; }
.card-head { flex-wrap: wrap; }
.card-head h2 { white-space: nowrap; }
@media (max-width: 560px) { .card-head > .small.muted, .card-head > span.small { flex-basis: 100%; order: 3; } }
/* แถบบนมือถือ: ไม่มีลิงก์ซ้ำกับแถบล่าง · ค้นหาเป็นปุ่มไอคอน · ชิปแสดงแค่ชื่อ */
.search-toggle { display: none; border: 0; background: rgba(255,255,255,.12); color: #fff; width: 40px; height: 40px; border-radius: 99px; place-items: center; cursor: pointer; flex: none; margin-left: auto; }
@media (max-width: 720px) {
  .topbar-inner { flex-wrap: wrap; }
  .topnav { display: none; }
  .search { display: none; }
  .search-toggle { display: grid; }
  .topbar.searching .search { display: block; order: 10; flex-basis: 100%; }
  .topbar.searching .search input { padding: 10px 14px; font-size: 16px; }
  .uc-role { display: none; }
  .user-chip { padding: 9px 14px; max-width: 150px; }
}
/* หน้าแรก: สรุปเป็นสองกลุ่ม งาน | เงิน · มือถือแสดง 4 ตัว + ดูเพิ่ม · ตัวกรองพับไว้ */
.sum-strip { align-items: center; gap: 6px 14px; }
.sum-group { display: flex; flex-wrap: wrap; gap: 6px; }
.sum-group > * { display: inline-flex; align-items: baseline; gap: 5px; padding: 6px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); font-size: 13px; color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.sum-group b { font-size: 16px; color: var(--ink); }
.sum-group a.hot, .sum-group span.hot { border-color: #d9c6f0; background: #f6f1fd; }
.sum-group.money { padding-left: 14px; border-left: 2px solid var(--line); }
.sum-more, .filter-toggle { display: none; }
.home-filters select.input { flex: 1 1 0; min-width: 0; }
@media (max-width: 720px) {
  .sum-strip:not(.show-more) .more { display: none; }
  .sum-strip:not(.show-more) .sum-group.money { display: none; }
  .sum-group.money { padding-left: 0; border-left: 0; }
  .sum-group > *, .sum-more { min-height: 44px; align-items: center; }
  .sum-more { display: inline-flex; }
  .filter-toggle { display: block; margin: 10px 12px 0; min-height: 44px; }
  .home-filters { display: none; }
  .home-filters.open { display: flex; flex-direction: column; }
  .home-filters.open .input { width: 100%; min-height: 44px; }
  .ptable tr { min-height: 64px; }
  .ptable .c-name a { display: block; padding: 6px 0; min-height: 32px; }
}
.member-cell { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.member-cell .inline-add { margin-top: 0; }
.sum-strip > .sum-group { background: none; border: 0; padding: 0; border-radius: 0; }
.sum-strip > .sum-group.money { padding-left: 14px; border-left: 2px solid var(--line); }
@media (max-width: 720px) { .sum-strip > .sum-group.money { padding-left: 0; border-left: 0; } }
@media (max-width: 720px) {
  .home-head { flex-wrap: wrap; }
  .home-head .sum-strip { order: 3; flex-basis: 100%; display: block; }
  .sum-strip .sum-group { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .sum-strip .sum-group + .sum-group { margin-top: 6px; }
  .sum-strip .sum-group > * { white-space: normal; }
  .sum-more { width: 100%; justify-content: center; margin-top: 6px; }
}
.seg-cnt .cnt-short { display: none; }
@media (max-width: 560px) { .seg-cnt .cnt-full { display: none; } .seg-cnt .cnt-short { display: inline; } }
#usersCard td:last-child { width: 46%; }

/* รอตรวจ + รายงานติดตั้งประจำวัน */
.badge { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 99px; background: var(--accent); color: var(--ink); font-size: 12px; font-weight: 800; text-align: center; line-height: 20px; }
.field.inline { display: flex; align-items: center; gap: 8px; margin: 0; }
.field.inline .input { width: auto; }
.rv-cols { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
@media (max-width: 1000px) { .rv-cols { grid-template-columns: 1fr; } }
.rv-room { margin-bottom: 12px; }
.rv-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; padding: 12px 16px 16px; }
.rv-photo { border: 1px solid var(--line); border-radius: 12px; padding: 8px; display: flex; flex-direction: column; gap: 6px; background: var(--surface); }
.rv-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; display: block; background: var(--surface-2); }
.rv-photo .field { margin: 0; }
.rv-acts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.rv-acts .btn { min-height: 40px; justify-content: center; }
.kpis.two { grid-template-columns: 1fr 1fr; }
.doc-status { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.doc h1 { font-size: 22px; margin: 0 0 4px; }
.doc h2 { font-size: 16px; margin: 16px 0 8px; }
.doc-meta { color: var(--ink-2); margin-bottom: 12px; }
.doc .kpis { padding: 4px 0 14px; }
.doc-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.doc-photos figure { margin: 0; }
.doc-photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; display: block; }
.doc-photos figcaption { font-size: 12px; color: var(--ink-2); margin-top: 3px; }
@media print { .topbar, .bottombar, .send-bar, .no-print { display: none !important; } body { background: #fff; } .doc { box-shadow: none; border: 0; } }

/* วัดช่องเปิด (มือถือ) = 1 รอบตรวจ */
.m-form { display: grid; gap: 12px; }
.m-group { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; }
.m-group h2 { font-size: 15px; margin: 0 0 6px; }
.m-row { display: grid; grid-template-columns: 44px 1fr auto; gap: 8px; align-items: center; padding: 4px 0; }
.m-at { font-weight: 700; color: var(--ink-2); }
.m-val { font-size: 18px; min-height: 48px; }
.m-tick { display: inline-flex; gap: 6px; }
.m-tick button { width: 52px; height: 48px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); font: inherit; font-size: 20px; font-weight: 800; color: var(--ink-3); cursor: pointer; }
.m-tick button[data-v=pass].on { border: 2px solid #1f6b3a; background: #e3f3e8; color: #1f6b3a; }
.m-tick button[data-v=fail].on { border: 2px solid #b4372f; background: #fbe4e2; color: #8f2620; }
.m-result { font-size: 16px; font-weight: 700; }
.m-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.m-line > span:first-child { min-width: 64px; color: var(--ink-2); }
.m-seg { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.m-seg button { min-height: 44px; min-width: 44px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); font: inherit; font-size: 15px; cursor: pointer; }
.m-seg button.on { border: 2px solid var(--accent); background: #fbf3e3; font-weight: 700; }
.m-acts { display: grid; grid-template-columns: auto 1fr; gap: 8px; }
.m-acts .btn { min-height: 52px; font-size: 16px; justify-content: center; }
.m-photo { cursor: pointer; }
.m-form { max-width: 640px; }
/* มือถือ: แท็บไม่เลื่อนข้าง เห็นครบทุกแท็บ (4 แท็บ = 2×2 · 6 แท็บ = 3×2) */
@media (max-width: 560px) {
  .ptabbar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; overflow: visible; border-bottom: 0; }
  .ptabbar:has(> button:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ptabbar button { white-space: normal; min-height: 44px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: none; line-height: 1.3; }
  .ptabbar button.on { border: 2px solid var(--accent); background: #fbf3e3; box-shadow: none; }
}
.site-set:focus-visible, .set-row:focus-visible, .room-tile:focus-visible, .site-room:focus-visible, .big-btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }