:root {
  --navy:      #10245b;
  --navy-2:    #172f76;
  --green:     #2f9b57;
  --green-dk:  #238148;
  --amber:     #e08a00;
  --red:       #d84545;
  --red-dk:    #bb3434;
  --bg:        #f0f3f8;
  --card:      #ffffff;
  --soft:      #f5f8fc;
  --line:      #dde4ef;
  --text:      #1a2640;
  --muted:     #6b7a93;
  --shadow:    0 8px 24px rgba(16,36,91,.08);
  --radius-xl: 20px;
  --radius-lg: 16px;
  --radius-md: 12px;
}

*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; font-family: "Helvetica Neue", Arial, "Noto Sans Thai", sans-serif; color: var(--text); background: var(--bg); }
body { min-height: 100vh; min-height: 100dvh; }
button, input, textarea, select { font: inherit; }
img { display: block; max-width: 100%; }
.hidden { display: none !important; }

/* ── Shell ── */
.app-shell { width: min(100%, 430px); min-height: 100vh; min-height: 100dvh; margin: 0 auto; background: var(--bg); position: relative; display: flex; flex-direction: column; }

/* ── Header ── */
.app-header { background: linear-gradient(135deg, var(--navy) 0%, #1a6b7a 100%); color: #fff; padding: calc(env(safe-area-inset-top) + 12px) 14px 14px; flex-shrink: 0; }
.header-brand { display: flex; align-items: center; gap: 10px; }
.header-logo {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255,255,255,.12);
  flex-shrink: 0;
}

.header-logo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}
.header-title { font-size: 22px; font-weight: 900; letter-spacing: .01em; line-height: 1; }
.header-subtitle { font-size: 11px; color: rgba(255,255,255,.7); margin-top: 3px; }
.header-user { margin-top: 12px; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.08); display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.header-user-name { font-size: 13px; font-weight: 700; }
.header-user-role { font-size: 11px; color: rgba(255,255,255,.7); margin-top: 2px; }
.logout-btn { border: none; padding: 0 12px; min-height: 36px; background: var(--red); color: #fff; border-radius: 10px; font-size: 13px; font-weight: 700; flex-shrink: 0; cursor: pointer; }

/* ── Main ── */
.app-main { flex: 1; padding: 12px 12px 100px; overflow-y: auto; }

/* ── Status ── */
.status-card { background: var(--card); border: 1px solid rgba(16,36,91,.06); border-radius: var(--radius-xl); padding: 12px 14px; margin-bottom: 12px; box-shadow: var(--shadow); }
.status-title { font-size: 14px; font-weight: 800; color: var(--navy); margin-bottom: 4px; }
.status-text { font-size: 13px; color: #5a6880; line-height: 1.5; word-break: break-word; }

/* ── Cards ── */
.card { background: var(--card); border: 1px solid rgba(16,36,91,.06); border-radius: var(--radius-xl); padding: 14px; box-shadow: var(--shadow); margin-bottom: 12px; }
.panel-title { font-size: 26px; font-weight: 900; color: var(--navy); margin: 4px 2px 12px; letter-spacing: -.02em; }
.section-label { font-size: 14px; font-weight: 800; color: var(--navy); margin-bottom: 8px; }
.field-label { display: block; font-size: 12px; font-weight: 700; color: var(--navy); margin: 10px 0 5px; }
.helper-text { font-size: 11px; color: var(--muted); line-height: 1.4; }
.field-space { height: 12px; }
.divider { height: 1px; background: linear-gradient(90deg, rgba(16,36,91,.1), rgba(16,36,91,.02)); margin: 12px 0; }

/* ── Inputs ── */
.text-input, .text-select, .text-area {
  width: 100%; border: 1.5px solid var(--line); background: var(--soft);
  color: var(--text); outline: none; border-radius: 14px;
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.text-input, .text-select { min-height: 46px; padding: 0 13px; }
.text-area { padding: 12px 13px; min-height: 90px; resize: vertical; }
.text-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7a93' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; padding-right: 36px; }
.text-input:focus, .text-select:focus, .text-area:focus { background: #fff; border-color: #7c94d8; box-shadow: 0 0 0 4px rgba(16,36,91,.08); }
.text-input:disabled, .text-select:disabled, .text-area:disabled { opacity: 1; background: #eef2f7; color: #95a1af; }

/* ── Buttons ── */
.btn { border: none; border-radius: 14px; min-height: 46px; padding: 0 14px; font-size: 14px; font-weight: 800; cursor: pointer; transition: transform .08s, opacity .18s, background .18s; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn-block { width: 100%; margin-top: 12px; }
.btn-inline { min-width: 80px; flex-shrink: 0; }
.btn-row { display: flex; gap: 8px; }
.btn-navy  { background: var(--navy);  color: #fff; }
.btn-navy:hover  { background: var(--navy-2); }
.btn-green { background: var(--green); color: #fff; }
.btn-green:hover { background: var(--green-dk); }
.btn-red   { background: var(--red);   color: #fff; }
.btn-red:hover   { background: var(--red-dk); }
.btn-soft  { background: #eef3f8; color: var(--navy); border: 1px solid #dde4ef; }
.btn-amber { background: var(--amber); color: #fff; }

/* ── Tabs ── */
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ── Bottom Nav ── */
.bottom-nav { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: min(100%, 430px); display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; padding: 8px 10px calc(env(safe-area-inset-bottom) + 8px); background: linear-gradient(135deg, #10245b 0%, #1a6b7a 100%); box-shadow: 0 -8px 24px rgba(16,36,91,.18); z-index: 10; }
.nav-btn { border: none; min-height: 56px; border-radius: 14px; background: rgba(255,255,255,.08); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; cursor: pointer; transition: background .18s; }
.nav-btn.active { background: var(--green); }
.nav-icon { font-size: 18px; line-height: 1; }
.nav-text { font-size: 11px; font-weight: 700; line-height: 1.2; text-align: center; }

/* ── Branch selector ── */
.search-row { display: flex; gap: 8px; align-items: center; }
.branch-info { background: var(--soft); border: 1.5px solid var(--line); border-radius: 14px; padding: 12px; font-size: 14px; line-height: 1.55; color: var(--text); }
.branch-info.empty { color: var(--muted); }
.branch-grid { display: grid; gap: 8px; }
.branch-row { display: flex; justify-content: space-between; }
.branch-label { font-size: 11px; color: var(--muted); }
.branch-val { font-size: 14px; font-weight: 700; color: var(--navy); }

/* ── Round type pills ── */
.round-group { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.round-pill { border: 1.5px solid var(--line); border-radius: 20px; padding: 6px 14px; font-size: 12px; font-weight: 600; color: var(--muted); background: var(--soft); cursor: pointer; transition: all .18s; }
.round-pill.selected { background: var(--navy); border-color: var(--navy); color: #fff; }

/* ── System grid ── */
.system-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sys-card { border: 1.5px solid var(--line); border-radius: 14px; padding: 12px; text-align: center; cursor: pointer; transition: all .18s; background: var(--soft); }
.sys-card:hover { border-color: var(--navy); }
.sys-card.selected { background: #e8edf8; border-color: var(--navy); }
.sys-card.done { background: #edf7f1; border-color: var(--green); }
.sys-card.issue { background: #fff8e8; border-color: var(--amber); }
.sys-icon { font-size: 22px; line-height: 1; margin-bottom: 5px; }
.sys-name { font-size: 13px; font-weight: 700; color: var(--navy); }
.sys-status { font-size: 10px; color: var(--muted); margin-top: 2px; }

/* ── Checklist ── */
.unit-card { border: 1.5px solid var(--line); border-radius: 14px; overflow: hidden; margin-bottom: 10px; }
.unit-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; background: var(--soft); cursor: pointer; }
.unit-title { font-size: 14px; font-weight: 800; color: var(--navy); }
.unit-badge { font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 20px; }
.badge-pass   { background: #edf7f1; color: #238148; }
.badge-issue  { background: #fff8e8; color: #b06800; }
.badge-urgent { background: #fff0f0; color: var(--red); }
.badge-doing  { background: #e8edf8; color: var(--navy); }
.unit-body { padding: 12px 14px; border-top: 1px solid var(--line); }
.unit-body.collapsed { display: none; }

.check-item { padding: 10px 0; border-bottom: 1px solid var(--line); }
.check-item:last-child { border-bottom: none; }
.check-name { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 7px; }
.check-actions { display: flex; gap: 6px; }
.check-btn { flex: 1; border: 1.5px solid var(--line); border-radius: 10px; padding: 8px 6px; font-size: 12px; font-weight: 600; color: var(--muted); background: var(--soft); cursor: pointer; transition: all .15s; text-align: center; }
.check-btn.active-pass   { background: #edf7f1; border-color: var(--green); color: #238148; }
.check-btn.active-fail   { background: #fff0f0; border-color: var(--red);   color: var(--red); }
.check-btn.active-fixed  { background: #edf7f1; border-color: var(--green); color: #238148; }
.check-btn.active-pending{ background: #fff8e8; border-color: var(--amber); color: #b06800; }
.check-note { margin-top: 7px; width: 100%; border: 1.5px solid var(--line); border-radius: 10px; padding: 8px 10px; font-size: 12px; background: var(--soft); color: var(--text); outline: none; resize: none; min-height: 60px; }
.check-note:focus { border-color: #7c94d8; background: #fff; }

/* ── Values (MDB °C V A) ── */
.value-row { display: flex; gap: 6px; margin-top: 7px; }
.value-box { flex: 1; }
.value-label { font-size: 10px; color: var(--muted); margin-bottom: 3px; text-align: center; }
.value-input { width: 100%; border: 1.5px solid var(--line); border-radius: 10px; padding: 7px 6px; font-size: 13px; text-align: center; background: var(--soft); color: var(--text); outline: none; }
.value-input:focus { border-color: #7c94d8; background: #fff; }

/* ── Add unit button ── */
.add-unit-btn { width: 100%; border: 2px dashed var(--line); border-radius: 14px; padding: 13px; background: transparent; color: var(--muted); font-size: 13px; font-weight: 600; cursor: pointer; transition: all .18s; margin-bottom: 10px; }
.add-unit-btn:hover { border-color: var(--navy); color: var(--navy); background: var(--soft); }

/* ── Photo ── */
.photo-actions { display: flex; gap: 8px; margin-top: 8px; }
.photo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.photo-card { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); aspect-ratio: 1; }
.photo-card img { width: 100%; height: 100%; object-fit: cover; }
.photo-remove { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%; border: none; background: rgba(15,23,42,.7); color: #fff; font-size: 14px; font-weight: 900; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.photo-empty { border: 2px dashed #d0d8e8; border-radius: 14px; min-height: 80px; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 12px; margin-top: 8px; }

/* ── Progress steps ── */
.progress-list { display: flex; flex-direction: column; gap: 8px; }
.progress-item { display: flex; align-items: center; gap: 10px; }
.progress-dot { width: 28px; height: 28px; border-radius: 50%; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dot-done  { background: var(--green); color: #fff; }
.dot-act   { background: var(--navy);  color: #fff; }
.dot-todo  { background: var(--soft); border: 1.5px solid var(--line); color: var(--muted); }
.progress-info { flex: 1; }
.progress-name { font-size: 13px; font-weight: 600; color: var(--text); }
.progress-sub  { font-size: 11px; color: var(--muted); margin-top: 1px; }

/* ── Pills / Badges ── */
.pill { display: inline-block; font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 20px; }
.pill-green  { background: #edf7f1; color: #238148; }
.pill-amber  { background: #fff8e8; color: #b06800; }
.pill-red    { background: #fff0f0; color: var(--red); }
.pill-navy   { background: #e8edf8; color: var(--navy); }
.pill-gray   { background: var(--soft); color: var(--muted); }

/* ── Summary ── */
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stat-box { background: var(--soft); border-radius: 12px; padding: 12px; text-align: center; }
.stat-num { font-size: 28px; font-weight: 900; }
.stat-num.green { color: var(--green); }
.stat-num.amber { color: var(--amber); }
.stat-num.red   { color: var(--red); }
.stat-lbl { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* ── Issue list ── */
.issue-list { display: flex; flex-direction: column; gap: 6px; }
.issue-item { font-size: 12px; padding: 8px 10px; background: #fff8e8; border-left: 3px solid var(--amber); color: #7a4e00; line-height: 1.4; }
.issue-item.urgent { background: #fff0f0; border-color: var(--red); color: #8b2020; }

/* ── QR ── */
.qr-box { border: 1px solid var(--line); border-radius: 14px; padding: 16px; text-align: center; background: var(--soft); }
.qr-box img { width: 160px; height: 160px; border-radius: 8px; margin: 0 auto 8px; }
.qr-label { font-size: 12px; color: var(--muted); }

/* ── Sig section ── */
.sig-section { display: flex; flex-direction: column; gap: 6px; }
.sig-block { background: var(--soft); border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.sig-role { font-size: 10px; color: var(--muted); margin-bottom: 3px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.sig-name { font-size: 14px; font-weight: 700; color: var(--navy); }

/* ── Noti row ── */
.noti-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--green); }
.noti-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex-shrink: 0; }

/* ── Toast ── */
.toast { position: fixed; top: calc(env(safe-area-inset-top) + 12px); left: 50%; transform: translateX(-50%); width: min(calc(100% - 24px), 380px); padding: 12px 14px; border-radius: 12px; background: var(--navy); color: #fff; font-size: 13px; line-height: 1.4; box-shadow: 0 10px 24px rgba(0,0,0,.15); z-index: 100; }

/* ── Responsive ── */
@media (max-width: 380px) {
  .system-grid { grid-template-columns: 1fr 1fr; }
  .stat-grid   { grid-template-columns: 1fr 1fr; }
  .photo-grid  { grid-template-columns: 1fr 1fr; }
}

/* ── Progress bar (v1.2) ── */
.pm-progress-wrap{background:var(--card);border:1px solid rgba(16,36,91,.06);border-radius:var(--radius-xl);padding:14px;box-shadow:var(--shadow);margin-bottom:12px}
.pm-progress-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.pm-progress-sys{font-size:16px;font-weight:800;color:var(--navy)}
.pm-progress-step{font-size:12px;color:var(--muted);font-weight:600}
.pm-progress-track{height:8px;background:#e8edf5;border-radius:99px;overflow:hidden;margin-bottom:10px}
.pm-progress-fill{height:100%;background:linear-gradient(90deg,var(--navy),#2f9b57);border-radius:99px;transition:width .4s ease}
.pm-progress-dots{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.pm-dot{width:28px;height:28px;border-radius:50%;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid transparent;cursor:pointer;transition:all .2s}
.pm-dot-done{background:#1a7a3c;color:#fff;border-color:#155f30}
.pm-dot-active{background:var(--navy);color:#fff;border-color:var(--navy)}
.pm-dot-todo{background:var(--soft);color:var(--muted);border-color:var(--line)}
.pm-dot-issue{background:#b06800;color:#fff;border-color:#8a5000}

/* ── Branch card (v1.2) ── */
.branch-card-new{background:var(--soft);border:1.5px solid var(--line);border-radius:14px;padding:14px;margin-top:10px}
.branch-name-big{font-size:16px;font-weight:800;color:var(--navy);margin-bottom:8px;line-height:1.3}
.branch-meta-row{display:flex;gap:6px;align-items:flex-start;font-size:12px;margin-bottom:4px}
.branch-meta-label{color:var(--muted);min-width:36px;flex-shrink:0}
.branch-meta-val{color:var(--text);font-weight:600;flex:1}

/* ── Sys badge ── */
.sys-branch-badge{font-size:12px;color:var(--muted);margin:0 2px 10px;padding:4px 0}
.system-title-card{padding:16px 14px}
.system-title-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.system-title-main{font-size:20px;font-weight:900;color:var(--navy);line-height:1.2}
.system-title-sub{margin-top:6px;font-size:12px;color:var(--muted)}
.excel-chip{border:1px solid #8bc28b;background:#eef9ee;color:#267b26;border-radius:12px;padding:8px 10px;font-size:12px;font-weight:700;white-space:nowrap}
.system-card{margin-bottom:12px}
.system-header-left{display:flex;align-items:flex-start;gap:10px;flex:1;min-width:0}
.unit-header-actions{display:flex;align-items:center;gap:8px}
.number-dot{width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#148c28;color:#fff;font-weight:800;font-size:16px;flex-shrink:0}
.number-dot.small{width:28px;height:28px;font-size:13px}
.collapse-mark{font-size:22px;color:var(--navy);line-height:1}
.mini-del-btn{border:none;background:transparent;color:var(--red);font-size:24px;font-weight:900;cursor:pointer;line-height:1;padding:0 4px}
.enhanced-row{display:flex;flex-direction:column;gap:8px}
.check-row-head{display:flex;align-items:flex-start;gap:10px}
.item-standard{font-size:12px;color:var(--muted);padding-left:38px;margin-top:-2px}
.result-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding-left:38px}
.segment-block{display:flex;flex-direction:column;gap:6px}
.segment-label{font-size:12px;font-weight:700;color:var(--navy)}
.segment-row{display:flex;gap:6px;flex-wrap:wrap}
.segment-btn{border:1.5px solid var(--line);background:var(--soft);color:var(--muted);border-radius:10px;min-height:36px;padding:0 14px;font-size:12px;font-weight:700;cursor:pointer}
.segment-btn.active{background:var(--green);border-color:var(--green);color:#fff}
.segment-btn.small{min-height:32px;padding:0 10px}
.measure-box{border:1.5px solid var(--line);border-radius:14px;background:var(--soft);padding:12px;margin-left:38px}
.measure-title{font-size:12px;font-weight:700;color:var(--green);margin-bottom:8px}
.measure-grid{display:grid;gap:8px}
.measure-grid.four{grid-template-columns:1fr 1fr 1fr 1.2fr}
.inline-note{padding-left:38px}
.note-bottom{padding-left:0;margin-top:8px}
.form-field{display:block}
.small-input{min-height:40px;font-size:13px}
.meta-grid{display:grid;gap:8px;margin-bottom:10px}
.meta-grid.three{grid-template-columns:1fr 1fr 1fr}
.meta-grid.four{grid-template-columns:1fr 1fr 1fr 1fr}
.cards-grid{display:grid;gap:10px}
.cards-grid-2{grid-template-columns:1fr 1fr}
.cards-grid-3{grid-template-columns:1fr 1fr 1fr}
.mini-card{border:1.5px solid var(--line);border-radius:14px;background:var(--soft);padding:12px}
.mini-card-header{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px}
.mini-card-title{font-size:14px;font-weight:800;color:var(--navy)}
.mini-check-list{display:flex;flex-direction:column;gap:8px;margin:8px 0}
.binary-row{display:flex;justify-content:space-between;gap:8px;align-items:center}
.binary-label{font-size:12px;font-weight:600;color:var(--text);line-height:1.4;flex:1}
.binary-actions{display:flex;gap:6px;flex-shrink:0}
.outline-add-btn{width:100%;margin-top:12px;border:2px dashed #7ea7ea;background:transparent;color:var(--navy);min-height:44px;border-radius:14px;font-size:14px;font-weight:800;cursor:pointer}
.chip-panels{display:grid;grid-template-columns:1fr 1.5fr;gap:10px;margin-bottom:10px}
.chip-panel{border:1.5px solid var(--line);border-radius:14px;background:var(--soft);padding:12px}
.chip-row{display:flex;gap:8px}
.chip-row.wrap{flex-wrap:wrap}
.chip-btn{border:1.5px solid var(--line);background:#fff;color:var(--text);border-radius:10px;min-height:36px;padding:0 14px;font-size:12px;font-weight:700;cursor:pointer}
.chip-btn.active{background:var(--green);border-color:var(--green);color:#fff}
.helper-banner{border-radius:14px;background:#edf7f1;color:#1f6d34;font-size:13px;font-weight:700;padding:12px;margin-bottom:12px}
.air-wash-box{border:1.5px solid var(--line);border-radius:14px;background:var(--soft);padding:12px}
.air-wash-title{font-size:15px;font-weight:800;color:var(--navy);margin-bottom:10px}
.door-meta-row{display:grid;grid-template-columns:220px 1fr;gap:12px;margin-bottom:10px}
@media (max-width: 760px){
  .cards-grid-2,.cards-grid-3,.meta-grid.three,.meta-grid.four,.chip-panels,.door-meta-row,.measure-grid.four,.result-grid{grid-template-columns:1fr}
  .binary-row{flex-direction:column;align-items:stretch}
  .binary-actions{justify-content:flex-start}
  .system-title-row{flex-direction:column;align-items:flex-start}
}


/* ===== Mockup-aligned checklist refresh ===== */
body{background:#eef0f2}
.app-shell{width:min(100%,430px);background:var(--bg)}
.app-header{padding:12px 28px 12px;min-height:88px;align-items:center;border-bottom-left-radius:0;border-bottom-right-radius:0}
.header-brand{justify-content:space-between}
.header-user{margin-top:14px;max-width:420px}
.app-main{padding:14px 12px 110px}
.card,.status-card,.unit-card,.context-card{box-shadow:0 2px 10px rgba(16,36,91,.06)}
body[data-tab="checklist"] .status-card,
body[data-tab="checklist"] .header-user{display:none!important}
body[data-tab="checklist"] .app-main{padding-bottom:140px}
.context-card{
  display:none;
  background:#fff;
  border:1px solid #d7dde6;
  border-radius:26px;
  padding:0;
  overflow:hidden;
  margin-bottom:18px
}
body[data-tab="checklist"] .context-card{display:block}
.context-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  background:#fff
}
.context-item{
  display:flex;
  gap:14px;
  align-items:center;
  padding:22px 28px;
  position:relative
}
.context-item + .context-item::before{
  content:"";
  position:absolute;
  left:0;
  top:24px;
  bottom:24px;
  width:1px;
  background:#dde3ea
}
.context-icon{
  width:42px;
  height:42px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#17356a;
  flex-shrink:0
}
.context-icon svg{width:30px;height:30px}
.context-label{font-size:13px;color:#54647a;font-weight:700;margin-bottom:2px}
.context-value{font-size:18px;color:#182742;font-weight:900;line-height:1.25}
.system-stage{display:flex;flex-direction:column;gap:18px}
.system-hero-card{padding:22px 24px;border-radius:26px}
.system-hero{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px
}
.system-hero-main{display:flex;align-items:center;gap:18px;min-width:0}
.system-hero-icon{
  width:76px;height:76px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  color:#fff;flex-shrink:0
}
.system-hero-icon svg{width:40px;height:40px}
.system-hero-copy{min-width:0}
.system-hero-title{font-size:24px;line-height:1.2;font-weight:900;color:#0e1f39}
.system-hero-sub{margin-top:6px;font-size:15px;color:#7d8795;line-height:1.45}
.excel-badge{
  display:inline-flex;align-items:center;gap:10px;
  border:2px solid #7cc083;color:#217837;background:#f7fff7;
  border-radius:14px;padding:12px 16px;font-weight:800;font-size:14px;
  white-space:nowrap
}
.excel-badge svg{width:22px;height:22px;flex-shrink:0}
body[data-system="cctv"]{--system-accent:#214ea6;--system-accent-dark:#173d8c;--system-soft:#eef3ff}
body:not([data-system="cctv"]){--system-accent:#22922d;--system-accent-dark:#1b7f25;--system-soft:#f3faf2}
body[data-tab="checklist"] .number-dot,
body[data-tab="checklist"] .segment-btn.active,
body[data-tab="checklist"] .chip-btn.active,
body[data-tab="checklist"] .outline-add-btn,
body[data-tab="checklist"] .add-unit-btn:hover{background:var(--system-accent);border-color:var(--system-accent);color:#fff}
body[data-tab="checklist"] .outline-add-btn,
body[data-tab="checklist"] .add-unit-btn{
  color:var(--system-accent);border-color:color-mix(in srgb, var(--system-accent) 50%, #fff 50%);
  background:transparent
}
body[data-tab="checklist"] .segment-label{color:#2a7c34}
body[data-system="cctv"][data-tab="checklist"] .segment-label{color:#214ea6}
body[data-tab="checklist"] .system-card{
  margin-bottom:0;
  border-radius:24px;
  border:1px solid #d8ddd8;
  overflow:hidden;
  background:#fff
}
body[data-tab="checklist"] .unit-header{
  padding:22px 24px;
  background:#f8fbf7;
  border-bottom:1px solid #dfe6df
}
body[data-system="cctv"][data-tab="checklist"] .unit-header{
  background:#f7f9ff;
  border-bottom-color:#dfe5f4
}
body[data-tab="checklist"] .unit-title{font-size:22px;font-weight:900;color:#101e38}
body[data-tab="checklist"] .unit-body{padding:0 0 16px}
.unit-header-actions{margin-left:auto}
.collapse-mark{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;color:#16356b
}
.collapse-mark svg{width:26px;height:26px;transition:transform .2s ease}
.collapse-mark.collapsed svg{transform:rotate(180deg)}
.header-facts{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  margin-left:auto;padding-left:16px
}
.header-fact{
  display:flex;align-items:center;gap:8px;position:relative;
  font-size:14px;color:#5b6472
}
.header-fact strong{font-size:16px;color:#1d8b2d}
.header-fact + .header-fact{padding-left:18px}
.header-fact + .header-fact::before{
  content:"";position:absolute;left:0;top:0.15rem;bottom:0.15rem;width:1px;background:#d9dedb
}
.header-fact.preview-note strong{color:#5b6472;font-weight:700}
.check-item{padding:18px 24px;border-bottom:1px solid #e3e7e8}
.check-item:last-child{border-bottom:none}
.enhanced-row{gap:14px}
.check-row-head{display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;align-items:flex-start}
.check-name{font-size:17px;font-weight:700;color:#1a2437;margin-bottom:0}
.item-standard{padding-left:48px;margin-top:-6px;font-size:13px;line-height:1.45;color:#8b95a2}
.result-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding-left:48px}
.segment-block{gap:8px}
.segment-label{font-size:14px;font-weight:800}
.segment-row{gap:8px}
.segment-btn{
  min-height:44px;padding:0 22px;border-radius:12px;
  border:1.5px solid #d7dce3;background:#fff;color:#313a48;
  font-size:15px;font-weight:800
}
.segment-btn.small{min-height:40px;padding:0 16px;font-size:14px}
.measure-box{
  margin-left:48px;border-radius:18px;border:1px solid #dfe6df;
  background:#f8fbf7;padding:16px 18px
}
.measure-title{font-size:14px;font-weight:900;color:#237d30;margin-bottom:12px}
.measure-grid.four{grid-template-columns:1.1fr 1fr 1fr 1.2fr}
.meta-grid,.cards-grid,.chip-panels,.door-meta-row{padding:18px 24px 0}
.meta-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.meta-grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.form-field{display:flex;flex-direction:column;gap:6px}
.form-field .field-label{margin:0;font-size:14px;font-weight:800;color:#303745;text-transform:none}
.small-input,.text-select{
  min-height:50px;padding:0 16px;border-radius:12px;
  border:1.5px solid #d5dbe4;background:#fff;font-size:15px
}
.text-area{border-radius:12px;background:#fff}
.chip-panels{grid-template-columns:1fr 1.7fr;padding-bottom:0}
.chip-panel{
  border:1px solid #dbe1dd;border-radius:18px;background:#fff;padding:16px
}
.chip-btn{
  min-height:42px;padding:0 18px;border-radius:12px;border:1.5px solid #d7dce3;
  background:#fff;font-size:15px;font-weight:800;color:#2b3340
}
.helper-banner{
  margin:18px 24px 0;background:#f3faf2;border:1px solid #dce9dc;
  border-radius:16px;padding:15px 16px;font-size:15px
}
.air-wash-box{
  margin:18px 24px 0;background:#fff;border:1px solid #d9e0df;border-radius:18px;padding:16px
}
.air-wash-title{font-size:16px;font-weight:900;color:#17243f;margin-bottom:14px}
.simple-note-row,.lighting-footer-note{padding:0 24px}
.inline-note.note-bottom,.simple-note-row .form-field,.lighting-footer-note .form-field{padding-top:18px}
.photo-card-compact{border-radius:22px}
.photo-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.photo-count-text{
  border-radius:999px;background:#eef3f8;padding:8px 12px;
  font-size:13px;font-weight:800;color:#40516b
}
.photo-actions.compact .btn{min-height:44px}
.photo-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.add-unit-btn{
  width:100%;min-height:68px;margin:0;border-width:2px;border-style:dashed;
  border-radius:22px;font-size:20px;font-weight:900
}
.checklist-next-btn{box-shadow:0 10px 22px rgba(34,146,45,.12)}
.cctv-section-wrap{display:flex;flex-direction:column;gap:18px}
.cctv-section-copy{padding:18px 24px 0}
.cctv-card-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cctv-card-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.mini-card{
  border:1px solid #d7deeb;border-radius:20px;background:#fff;padding:18px
}
.mini-card-title{font-size:18px}
.binary-row{gap:12px;padding:6px 0}
.binary-label{font-size:14px}
.system-section-note{
  padding:0 24px 16px;
  color:#7c8694;
  font-size:15px;
  line-height:1.45
}
body[data-system="cctv"][data-tab="checklist"] .mini-card,
body[data-system="cctv"][data-tab="checklist"] .outline-add-btn{
  border-color:#c8d5f2
}
body[data-system="cctv"][data-tab="checklist"] .number-dot{background:var(--system-accent)}
body[data-system="cctv"][data-tab="checklist"] .system-hero-icon{background:var(--system-accent)}
body:not([data-system="cctv"])[data-tab="checklist"] .system-hero-icon{background:var(--system-accent)}
body[data-tab="checklist"] .number-dot{width:40px;height:40px;font-size:18px}
body[data-tab="checklist"] .number-dot.small{width:36px;height:36px;font-size:18px}
body[data-tab="checklist"] .excel-chip{display:none}
@media (max-width:960px){
  .context-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .system-hero{flex-direction:column;align-items:flex-start}
  .header-facts{width:100%;margin-left:54px;padding-left:0}
  .meta-grid.three,.meta-grid.four,.chip-panels,.door-meta-row,.measure-grid.four,.result-grid,.cctv-card-grid-3,.cctv-card-grid-2{grid-template-columns:1fr}
}
@media (max-width:640px){
  .app-header{padding:16px 16px 18px}
  .app-main{padding:14px 12px 120px}
  .context-item{padding:18px 16px}
  .system-hero-title{font-size:24px}
  .unit-header,.check-item,.meta-grid,.cards-grid,.chip-panels,.door-meta-row,.system-section-note,.cctv-section-copy{padding-left:16px;padding-right:16px}
  .measure-box{margin-left:0}
  .item-standard,.result-grid{padding-left:0}
  .header-facts{margin-left:0}
  .add-unit-btn{min-height:58px;font-size:18px}
  .context-grid{grid-template-columns:1fr}
}


/* ===== Structure / flow round ===== */
.system-switcher{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:10px;
  margin:0 0 18px;
}
.system-step-btn{
  border:1.5px solid #d7dce3;
  background:#fff;
  border-radius:18px;
  min-height:64px;
  padding:10px 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  cursor:pointer;
  font-weight:800;
  color:#25324a;
}
.system-step-no{
  width:28px;height:28px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  background:#edf1f7;color:#3c4b68;font-size:13px;font-weight:900;flex-shrink:0;
}
.system-step-name{font-size:14px;line-height:1.2;text-align:center}
.system-step-btn.is-current{box-shadow:0 0 0 3px rgba(16,36,91,.12)}
.system-step-btn.is-done{border-color:#9fd3a8;background:#f5fcf6;color:#1a5f29}
.system-step-btn.is-done .system-step-no{background:var(--green);color:#fff}
.system-step-btn.is-todo{border-color:#d7dce3;background:#f4f6f8;color:#66758d}
.system-step-btn.is-todo .system-step-no{background:#dfe5ec;color:#52627a}
.system-step-btn.is-issue,.system-step-btn.is-dirty{border-color:#f1c37b;background:#fff8ef;color:#8a5800}
.system-step-btn.is-issue .system-step-no,.system-step-btn.is-dirty .system-step-no{background:var(--amber);color:#fff}
.segment-btn.active-fail{background:var(--red);border-color:var(--red);color:#fff}

.segment-btn.active-pass,
.segment-btn.active-fixed{background:var(--green);border-color:var(--green);color:#fff}
.segment-btn.active-pending{background:var(--amber);border-color:var(--amber);color:#fff}
.segment-btn.kind-fail{color:var(--red)}
.result-grid.single-col{grid-template-columns:1fr}
.inline-note{padding-left:48px}
.preset-picker-card,.empty-selection-card{border-radius:22px}
.preset-chip-row{display:flex;gap:10px;flex-wrap:wrap}
.preset-chip-btn{
  border:1.5px dashed color-mix(in srgb, var(--system-accent) 45%, #fff);
  background:#fff;
  color:var(--system-accent);
  border-radius:14px;
  min-height:44px;
  padding:0 16px;
  font-size:14px;
  font-weight:800;
  cursor:pointer;
}
.count-check-hint{
  margin-top:8px;
  font-size:12px;
  color:#6f7d90;
}
.compact-grid{padding:0}
.meta-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.system-review-list{display:flex;flex-direction:column;gap:10px}
.review-row{
  border:1px solid #dde3ea;
  border-radius:16px;
  padding:14px 16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  background:#fff;
}
.review-left{display:flex;align-items:center;gap:12px;min-width:0}
.review-index{
  width:32px;height:32px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  background:#edf1f7;color:#203252;font-weight:900;flex-shrink:0;
}
.review-name{font-size:15px;font-weight:800;color:#15243f}
.review-status{font-size:13px;margin-top:2px}
.review-done{color:var(--green)}
.review-issue{color:var(--red)}
.review-dirty{color:var(--amber)}
.review-todo{color:var(--muted)}
.review-edit-btn{min-height:42px;border-radius:12px;padding:0 14px;white-space:nowrap}
body[data-tab="checklist"] .excel-badge,
body[data-tab="checklist"] .excel-chip{display:none!important}

@media (max-width:960px){
  .system-switcher{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:640px){
  .system-switcher{grid-template-columns:repeat(2,minmax(0,1fr))}
  .review-row{flex-direction:column;align-items:stretch}
  .inline-note{padding-left:0}
  .compact-grid,.meta-grid.two{grid-template-columns:1fr}
}


.report-preview-card{border-radius:20px}
.report-preview-shell{display:flex;flex-direction:column;gap:12px}
.report-preview-head{display:flex;justify-content:space-between;gap:12px;font-weight:900;color:var(--navy);font-size:16px}
.report-preview-branch{font-size:13px;color:#5f6f86}
.report-preview-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.report-stat-card{border:1px solid #dbe4dd;border-radius:14px;padding:12px;text-align:center;background:#f8fcf8;color:var(--green);display:flex;flex-direction:column;gap:4px}
.report-stat-card.issue{background:#fff7f7;border-color:#f0c9c9;color:var(--red)}
.report-stat-card.pending{background:#fffaf0;border-color:#f2d6a2;color:var(--amber)}
.report-stat-card strong{font-size:22px;line-height:1}
.report-preview-list{display:flex;flex-direction:column;gap:10px}
.report-system-row{border:1px solid #dce2ea;border-radius:14px;padding:12px;background:#fff}
.report-system-row.preview-pass{border-color:#d8e9d9;background:#fbfffb}
.report-system-row.preview-issue{border-color:#efc9c9;background:#fff8f8}
.report-system-head{display:flex;justify-content:space-between;gap:10px;align-items:center}
.report-system-name{font-size:14px;font-weight:800;color:#182742}
.report-system-badge{font-size:12px;font-weight:800;padding:6px 10px;border-radius:999px;background:#eef2f7;color:#4e5d73}
.report-system-row.preview-pass .report-system-badge{background:#edf7f1;color:var(--green)}
.report-system-row.preview-issue .report-system-badge{background:#fff0f0;color:var(--red)}
.report-system-sub{font-size:13px;line-height:1.45;color:#5c6980;margin-top:6px}
.report-preview-note{font-size:12px;color:#7b8798}
.cctv-fail-box{margin-top:14px;padding-top:14px;border-top:1px dashed #d8e0eb}
.cctv-issue-chip.active{background:var(--red);border-color:var(--red);color:#fff}
.cctv-total-hint{margin-top:0;display:flex;align-items:center;min-height:50px}
@media (max-width:640px){
  .report-preview-stats{grid-template-columns:1fr}
}


/* ===== Final UI patch overrides ===== */

/* Bottom nav: text only, professional */
.bottom-nav{
  position:fixed;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:min(100%,430px);
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:8px;
  padding:10px 12px calc(env(safe-area-inset-bottom) + 10px);
  background:var(--navy);
  box-shadow:0 -8px 24px rgba(16,36,91,.18);
  z-index:10;
}
.nav-btn{
  border:1px solid rgba(255,255,255,.12);
  min-height:52px;
  border-radius:12px;
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.88);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background .18s,border-color .18s,color .18s;
}
.nav-btn.active{
  background:#fff;
  border-color:#fff;
  color:var(--navy);
}
.nav-text{
  font-size:14px;
  font-weight:700;
  line-height:1;
  letter-spacing:.2px;
  text-align:center;
}
.nav-icon{display:none !important;}

/* Status colors */
body[data-tab="checklist"] .number-dot,
body[data-tab="checklist"] .chip-btn.active,
body[data-tab="checklist"] .outline-add-btn,
body[data-tab="checklist"] .add-unit-btn:hover{
  background:var(--system-accent);
  border-color:var(--system-accent);
  color:#fff;
}
.segment-btn.active-pass,
.segment-btn.active-fixed{
  background:var(--green) !important;
  border-color:var(--green) !important;
  color:#fff !important;
}
.segment-btn.active-fail{
  background:var(--red) !important;
  border-color:var(--red) !important;
  color:#fff !important;
}
.segment-btn.active-pending{
  background:var(--amber) !important;
  border-color:var(--amber) !important;
  color:#fff !important;
}

/* Checklist context + switcher: mobile-first even on desktop viewport */
body[data-tab="checklist"] .context-grid{
  grid-template-columns:1fr !important;
}
body[data-tab="checklist"] .context-item{
  display:grid;
  grid-template-columns:28px 1fr;
  gap:10px;
  align-items:start;
  padding:14px 16px;
  position:relative;
}
body[data-tab="checklist"] .context-item + .context-item::before{
  display:none;
}
body[data-tab="checklist"] .system-switcher{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:8px;
  margin:0 0 18px;
}
body[data-tab="checklist"] .system-step-btn{
  border-radius:14px;
  min-height:52px;
  padding:8px 10px;
  gap:8px;
}
body[data-tab="checklist"] .system-step-name{
  font-size:12px;
  line-height:1.1;
  text-align:center;
  word-break:break-word;
}
body[data-tab="checklist"] .system-step-no{
  width:28px;
  height:28px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

/* Action bar */
}

/* Generic mobile-safe form layout inside the 430px shell */
body[data-tab="checklist"] .meta-grid.three,
body[data-tab="checklist"] .meta-grid.four,
body[data-tab="checklist"] .measure-grid.four,
body[data-tab="checklist"] .result-grid{
  grid-template-columns:1fr !important;
}
body[data-tab="checklist"] .result-grid,
body[data-tab="checklist"] .item-standard,
body[data-tab="checklist"] .inline-note{
  padding-left:0 !important;
}
body[data-tab="checklist"] .measure-box{
  margin-left:0 !important;
}
body[data-tab="checklist"] .unit-header,
body[data-tab="checklist"] .check-item,
body[data-tab="checklist"] .meta-grid,
body[data-tab="checklist"] .cards-grid,
body[data-tab="checklist"] .chip-panels,
body[data-tab="checklist"] .door-meta-row,
body[data-tab="checklist"] .system-section-note,
body[data-tab="checklist"] .cctv-section-copy{
  padding-left:16px;
  padding-right:16px;
}

/* CCTV: force 1-column cards and stacked controls */
body[data-system="cctv"][data-tab="checklist"] .cctv-card-grid-2,
body[data-system="cctv"][data-tab="checklist"] .cctv-card-grid-3,
body[data-system="cctv"][data-tab="checklist"] .meta-grid.two{
  grid-template-columns:1fr !important;
}
body[data-system="cctv"][data-tab="checklist"] .binary-row{
  flex-direction:column;
  align-items:stretch;
}
body[data-system="cctv"][data-tab="checklist"] .binary-actions{
  justify-content:flex-start;
  flex-wrap:wrap;
}
body[data-system="cctv"][data-tab="checklist"] .mini-card{
  padding:14px;
}
body[data-system="cctv"][data-tab="checklist"] .cctv-total-hint{
  min-height:auto;
}

/* Air: stack panels and fields */
body[data-system="air"][data-tab="checklist"] .chip-panels,
body[data-system="air"][data-tab="checklist"] .meta-grid.three,
body[data-system="air"][data-tab="checklist"] .meta-grid.four{
  grid-template-columns:1fr !important;
}

/* Small-screen fallback */
@media (max-width:640px){
  body[data-tab="checklist"] .system-switcher{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}


/* ===== Round 3 structure + print fixes ===== */
body{display:flex;justify-content:center;background:#eef0f2;}
.app-shell{width:min(100%,430px)!important;max-width:430px!important;min-height:100vh;overflow-x:hidden;background:var(--bg);}
.app-main{padding:14px 12px 132px!important;overflow-x:hidden;}
body[data-tab="summary"] .app-main,
body[data-tab="result"] .app-main{padding-bottom:110px!important;}
body[data-tab="checklist"] .app-main{padding-bottom:156px!important;}

body[data-tab="checklist"] .context-card{display:block;border-radius:22px;overflow:hidden;}
body[data-tab="checklist"] .context-grid{grid-template-columns:1fr!important;}
body[data-tab="checklist"] .context-item{display:grid;grid-template-columns:24px 1fr;gap:10px;align-items:start;padding:12px 14px!important;}
body[data-tab="checklist"] .context-item + .context-item::before{display:none!important;}
body[data-tab="checklist"] .context-value{font-size:15px;line-height:1.25;word-break:break-word;}
body[data-tab="checklist"] .context-icon{width:24px;height:24px;border-radius:0;}
body[data-tab="checklist"] .context-icon svg{width:22px;height:22px;}

body[data-tab="checklist"] .system-switcher{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px;margin:0 0 16px;}
body[data-tab="checklist"] .system-step-btn{min-height:52px;padding:8px 8px;border-radius:14px;gap:8px;border:1.5px solid #d7dce3;background:#fff;color:#41506b;box-shadow:none;}
body[data-tab="checklist"] .system-step-name{font-size:12px;line-height:1.1;word-break:break-word;text-align:center;}
body[data-tab="checklist"] .system-step-no{width:26px;height:26px;font-size:12px;background:#edf1f7;color:#59697d;}
body[data-tab="checklist"] .system-step-btn.is-todo{background:#f7f9fc;border-color:#dce3ec;color:#6b778a;}
body[data-tab="checklist"] .system-step-btn.is-done{background:#f2fbf5;border-color:#90d3a3;color:#176c33;}
body[data-tab="checklist"] .system-step-btn.is-done .system-step-no{background:#2f9b57;color:#fff;}
body[data-tab="checklist"] .system-step-btn.is-issue,
body[data-tab="checklist"] .system-step-btn.is-dirty{background:#fff8ef;border-color:#f0b654;color:#a86600;}
body[data-tab="checklist"] .system-step-btn.is-issue .system-step-no,
body[data-tab="checklist"] .system-step-btn.is-dirty .system-step-no{background:#f3a324;color:#fff;}
body[data-tab="checklist"] .system-step-btn.is-current{border-color:var(--system-accent-dark)!important;box-shadow:0 0 0 2px color-mix(in srgb, var(--system-accent) 25%, #fff), 0 8px 18px rgba(16,36,91,.08);}
body[data-tab="checklist"] .system-step-btn.is-current .system-step-name{color:#11233f;}

body[data-tab="checklist"] .system-hero-card{padding:18px 18px;border-radius:22px;}
body[data-tab="checklist"] .system-hero-main{gap:14px;}
body[data-tab="checklist"] .system-hero-icon{width:72px;height:72px;border-radius:999px;flex-shrink:0;}
body[data-tab="checklist"] .system-hero-title{font-size:19px;line-height:1.25;}
body[data-tab="checklist"] .system-hero-sub{font-size:13px;line-height:1.45;}

body[data-tab="checklist"] .card,
body[data-tab="checklist"] .unit-card{border-radius:18px;}
body[data-tab="checklist"] .unit-header{display:flex;flex-wrap:wrap;align-items:flex-start;gap:10px;padding:14px 14px!important;}
body[data-tab="checklist"] .unit-title{font-size:16px;line-height:1.25;}
body[data-tab="checklist"] .header-facts{width:100%;margin-left:46px;padding-left:0;display:flex;flex-wrap:wrap;gap:6px 10px;}
body[data-tab="checklist"] .header-fact{padding-left:0;font-size:12px;line-height:1.2;display:inline-flex;gap:4px;align-items:baseline;}
body[data-tab="checklist"] .header-fact + .header-fact::before{display:none!important;}
body[data-tab="checklist"] .header-fact strong{font-size:13px;line-height:1.2;word-break:break-word;}
body[data-tab="checklist"] .air-unit-header .air-header-meta{width:100%;margin-left:46px;display:flex;flex-wrap:wrap;gap:6px 8px;}
body[data-tab="checklist"] .air-meta-chip{display:inline-flex;align-items:center;min-height:30px;padding:0 10px;border-radius:999px;background:#eef3f8;color:#40516b;font-size:12px;font-weight:700;}
body[data-tab="checklist"] .air-meta-chip-note{background:#fff8ef;color:#a86600;}

body[data-tab="checklist"] .result-grid{grid-template-columns:1fr!important;gap:10px;padding-left:0!important;}
body[data-tab="checklist"] .result-grid.single-col{grid-template-columns:1fr!important;}
body[data-tab="checklist"] .item-standard,
body[data-tab="checklist"] .inline-note{padding-left:0!important;}
body[data-tab="checklist"] .measure-box{margin-left:0!important;}
body[data-tab="checklist"] .measure-grid.four,
body[data-tab="checklist"] .meta-grid.two,
body[data-tab="checklist"] .meta-grid.three,
body[data-system="air"][data-tab="checklist"] .meta-grid.four,
body[data-tab="checklist"] .door-meta-row,
body[data-system="air"][data-tab="checklist"] .chip-panels{grid-template-columns:1fr!important;}
body[data-tab="checklist"] .chip-row{flex-wrap:wrap;}
body[data-tab="checklist"] .chip-btn{min-height:38px;}

body[data-tab="checklist"] .check-item,
body[data-tab="checklist"] .system-section-note,
body[data-tab="checklist"] .cctv-section-copy,
body[data-tab="checklist"] .simple-note-row,
body[data-tab="checklist"] .lighting-footer-note{padding-left:14px!important;padding-right:14px!important;}
body[data-tab="checklist"] .simple-note-row .form-field,
body[data-tab="checklist"] .lighting-footer-note .form-field{padding-top:12px;}
body[data-tab="checklist"] .text-input,
body[data-tab="checklist"] .text-select{width:100%;min-width:0;}

/* status colors */
body[data-tab="checklist"] .segment-btn.active-pass,
body[data-tab="checklist"] .segment-btn.active-fixed{background:var(--green)!important;border-color:var(--green)!important;color:#fff!important;}
body[data-tab="checklist"] .segment-btn.active-fail{background:var(--red)!important;border-color:var(--red)!important;color:#fff!important;}
body[data-tab="checklist"] .segment-btn.active-pending{background:var(--amber)!important;border-color:var(--amber)!important;color:#fff!important;}

/* bottom nav */
.bottom-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,430px);display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;padding:10px 12px calc(env(safe-area-inset-bottom) + 10px);background:linear-gradient(135deg, #10245b 0%, #1a6b7a 100%);box-shadow:0 -8px 24px rgba(16,36,91,.18);z-index:10;}
.nav-btn{border:1px solid rgba(255,255,255,.12);min-height:52px;border-radius:12px;background:rgba(255,255,255,.06);color:rgba(255,255,255,.88);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .18s,border-color .18s,color .18s;}
.nav-btn.active{background:#fff;border-color:#fff;color:var(--navy);}
.nav-text{font-size:14px;font-weight:700;line-height:1;letter-spacing:.2px;text-align:center;}
.nav-icon{display:none!important;}


/* cctv */
body[data-system="cctv"][data-tab="checklist"] .cctv-card-grid-2,
body[data-system="cctv"][data-tab="checklist"] .cctv-card-grid-3{grid-template-columns:1fr!important;}
body[data-system="cctv"][data-tab="checklist"] .mini-card{padding:14px;}
body[data-system="cctv"][data-tab="checklist"] .binary-row{display:grid;grid-template-columns:1fr;gap:8px;align-items:stretch;}
body[data-system="cctv"][data-tab="checklist"] .binary-actions{justify-content:flex-start;flex-wrap:wrap;}
body[data-system="cctv"][data-tab="checklist"] .recorder-checklist .check-item{padding-left:0!important;padding-right:0!important;}
.cctv-checklist-block{margin-top:12px;padding-top:12px;border-top:1px dashed #d8e0eb;}
.count-check-hint{margin-top:8px;padding:10px 12px;border-radius:12px;font-size:12px;font-weight:700;}
.count-check-hint.count-neutral{background:#f2f4f8;color:#64748b;}
.count-check-hint.count-ok{background:#edf7f1;color:#1f7a3b;}
.count-check-hint.count-missing,.count-check-hint.count-over{background:#fff4f4;color:#c03333;}
.cctv-issue-row{margin-top:8px;}
.cctv-issue-chip.active{background:var(--red);border-color:var(--red);color:#fff;}

/* summary/result */
.report-preview-stats{grid-template-columns:repeat(3,minmax(0,1fr));}
@media (max-width:380px){
  body[data-tab="checklist"] .system-switcher{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}

/* ===== Round 4 front patch ===== */
body[data-tab="checklist"] .system-step-btn.is-current{
  border:2px solid var(--system-accent-dark)!important;
  background:color-mix(in srgb, var(--system-accent) 10%, #fff)!important;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--system-accent) 18%, #fff), 0 10px 22px rgba(16,36,91,.10)!important;
}
body[data-tab="checklist"] .system-step-btn.is-current .system-step-no{
  background:var(--system-accent-dark)!important;
  color:#fff!important;
}
body[data-tab="checklist"] .system-step-btn.is-current .system-step-name{
  color:#132742!important;
}

.meta-grid.one{grid-template-columns:1fr;}

body[data-system="cctv"][data-tab="checklist"] .cctv-section-copy{
  padding-top:16px!important;
}
body[data-system="cctv"][data-tab="checklist"] .cctv-total-hint{
  margin:12px 0 0;
  min-height:auto;
}
body[data-system="cctv"][data-tab="checklist"] .count-check-hint{
  margin-top:12px;
  padding:12px 14px;
  border-radius:14px;
  font-size:13px;
  font-weight:800;
}
body[data-system="cctv"][data-tab="checklist"] .cctv-summary-card{
  border-radius:20px;
}
body[data-system="cctv"][data-tab="checklist"] .cctv-checklist-block{
  margin-top:14px;
  padding-top:14px;
  border-top:1px dashed #d8e0eb;
}
body[data-system="cctv"][data-tab="checklist"] .cctv-checklist-block .check-item{
  padding-left:0!important;
  padding-right:0!important;
}
body[data-system="cctv"][data-tab="checklist"] .cctv-fault-wrap{
  margin-top:14px;
  padding-top:14px;
  border-top:1px dashed #d8e0eb;
}
body[data-system="cctv"][data-tab="checklist"] .cctv-fault-toggle{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
  align-items:stretch;
}
body[data-system="cctv"][data-tab="checklist"] .cctv-fault-toggle .binary-actions{
  justify-content:flex-start;
  flex-wrap:wrap;
}
body[data-system="cctv"][data-tab="checklist"] .cctv-fail-box{
  margin-top:12px;
  padding:14px;
  border:1.5px solid #f0c7c7;
  border-radius:16px;
  background:#fff8f8;
}
body[data-system="cctv"][data-tab="checklist"] .cctv-fail-box .section-label{
  color:var(--red);
  margin-bottom:10px;
}
body[data-system="cctv"][data-tab="checklist"] .cctv-fail-box .form-field + .form-field{
  margin-top:8px;
}
body[data-system="cctv"][data-tab="checklist"] .outline-add-btn{
  margin-top:16px;
}

body[data-system="cctv"][data-tab="checklist"] .cctv-check-row{
  padding-left:0!important;
  padding-right:0!important;
}
body[data-system="cctv"][data-tab="checklist"] .cctv-check-line{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
}
body[data-system="cctv"][data-tab="checklist"] .cctv-check-actions{
  justify-content:flex-end;
  flex-wrap:wrap;
  flex-shrink:0;
}
body[data-system="cctv"][data-tab="checklist"] .cctv-check-actions .segment-btn{
  min-width:108px;
}
body[data-system="cctv"][data-tab="checklist"] .recorder-checklist .inline-note,
body[data-system="cctv"][data-tab="checklist"] .cctv-checklist-block .inline-note{
  padding-left:0!important;
  margin-top:8px;
}
@media (max-width:430px){
  body[data-system="cctv"][data-tab="checklist"] .cctv-check-line{
    flex-direction:column;
    align-items:stretch;
  }
  body[data-system="cctv"][data-tab="checklist"] .cctv-check-actions{
    justify-content:flex-start;
  }
}

/* ===== Skip checkbox action bar ===== */
.checklist-action-bar{
  position:sticky;bottom:16px;z-index:9;
  display:flex;flex-direction:column;gap:8px;
  margin-top:4px;padding:10px;
  background:rgba(234,237,242,.96);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-radius:22px;border:0.5px solid rgba(16,36,91,.08);
}
.checklist-main-btns{
  display:grid;grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr);gap:8px;
}
.checklist-action-bar .btn{min-height:56px;border-radius:16px;font-size:16px;font-weight:700}
.checklist-back-btn{border:1.5px solid #466291;background:#fff;color:#14366a}
.checklist-next-btn{box-shadow:0 6px 18px rgba(34,146,45,.16)}
.checklist-back-btn,.checklist-next-btn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Skip row */
.skip-row{
  background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:11px 13px;display:flex;align-items:center;gap:10px;
  cursor:pointer;transition:background .15s,border-color .15s;
  -webkit-tap-highlight-color:transparent;
}
.skip-row:active{background:#f5f8fc}
.skip-row.is-skipped{
  background:#edf7f1;border-color:#9fd3a8;
}

/* Checkbox */
.skip-checkbox{
  width:22px;height:22px;border-radius:6px;border:1.5px solid #b0bac9;
  flex-shrink:0;display:flex;align-items:center;justify-content:center;
  transition:background .15s,border-color .15s;
}
.skip-row.is-skipped .skip-checkbox{
  background:var(--green);border-color:var(--green);
}
.skip-check-icon{display:none}
.skip-row.is-skipped .skip-check-icon{display:block!important}

/* Skip text */
.skip-text{flex:1;min-width:0}
.skip-title{font-size:14px;font-weight:700;color:var(--navy);line-height:1.2}
.skip-sub{font-size:11px;color:var(--muted);margin-top:2px}
.skip-row.is-skipped .skip-title{color:#1a6b29}
.skip-row.is-skipped .skip-sub{color:#4a9d62}

/* Info button */
.skip-info-btn{
  width:20px;height:20px;border-radius:50%;border:1.5px solid #b0bac9;
  color:#b0bac9;font-size:11px;font-weight:700;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}

/* Dimmed next button when skipped */
.checklist-next-btn.is-dim{
  background:#bcd9c5;box-shadow:none;pointer-events:none;
}

/* System switcher skip state */
.system-step-btn.is-skip{border-color:#c8cdd6;background:#f4f6f8;color:#7a8898}
.system-step-btn.is-skip .system-step-no{background:#c8cdd6;color:#fff}

/* Review skip status */
.review-skip{color:var(--muted)}

/* Preview report skip */
.report-system-row.preview-skip{border-color:#d8dde5;background:#f6f8fb}
.report-system-row.preview-skip .report-system-badge{background:#e8ecf0;color:#6b7a93}

/* ===== Patch: skip action bar v2 - match latest mockup ===== */
.checklist-action-bar{
  gap:8px;
  padding:9px;
  margin:8px 0 0;
  background:#edf1f7;
  border:1px solid #d2dae6;
  border-radius:18px;
  box-shadow:0 8px 22px rgba(16,36,91,.08);
}
.skip-row{
  min-height:36px;
  padding:7px 10px;
  gap:8px;
  background:#fff;
  border:1px solid #d7e0ec;
  border-radius:10px;
  box-shadow:none;
}
.skip-row:active{background:#f7fafc}
.skip-row.is-skipped{
  justify-content:center;
  background:#eaf7ed;
  border-color:#8ed0a0;
}
.skip-checkbox{
  width:18px;
  height:18px;
  border-radius:5px;
  border:1.4px solid #9fb0c8;
  background:#fff;
  color:#fff;
}
.skip-row.is-skipped .skip-checkbox{
  background:var(--green);
  border-color:var(--green);
}
.skip-text{
  flex:0 1 auto;
  min-width:0;
}
.skip-title{
  font-size:12px;
  font-weight:900;
  color:var(--navy);
  line-height:1.15;
  text-align:left;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.skip-sub{
  font-size:9.5px;
  line-height:1.15;
  margin-top:2px;
  color:#637188;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.skip-row.is-skipped .skip-title{
  color:#1f7a3a;
  text-align:center;
}
.skip-row.is-skipped .skip-sub{display:none}
.skip-info-btn{
  width:18px;
  height:18px;
  font-size:10px;
  border-color:#b8c3d3;
  color:#8d9bb0;
  margin-left:auto;
}
.checklist-main-btns{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:8px;
}
.checklist-action-bar .btn{
  min-height:44px;
  border-radius:10px;
  font-size:12px;
  font-weight:900;
}
.checklist-back-btn{
  background:#fff;
  border:1.5px solid #244a87;
  color:#123978;
  box-shadow:none;
}
.checklist-next-btn{
  background:var(--green);
  border:1.5px solid var(--green);
  color:#fff;
  box-shadow:none;
}
.checklist-next-btn.is-dim{
  background:#bddcc8;
  border-color:#bddcc8;
  color:rgba(255,255,255,.92);
  opacity:1;
  cursor:pointer;
  pointer-events:auto;
  box-shadow:none;
}
@media (max-width:380px){
  .skip-title{font-size:11px}
  .skip-sub{font-size:9px}
  .checklist-action-bar .btn{font-size:11px}
}


/* ===== Patch: checklist blue headers + equipment fields ===== */
body[data-tab="checklist"] .unit-header{
  background:#eef3ff !important;
  border-bottom:1px solid #c9d7ff !important;
}
body[data-tab="checklist"] .unit-title{
  color:#10245b !important;
}
body[data-tab="checklist"] .unit-header .number-dot{
  background:#1f9a3a !important;
  color:#fff !important;
}

body[data-tab="checklist"] .check-item.enhanced-row,
body[data-tab="checklist"] .check-item.cctv-check-row{
  padding:0 !important;
  margin:10px 14px 0;
  border:1px solid #dfe6ef;
  border-radius:16px;
  overflow:hidden;
  background:#fff;
}
body[data-tab="checklist"] .check-row-head{
  display:grid !important;
  grid-template-columns:40px minmax(0,1fr);
  gap:12px;
  align-items:center;
  background:#10245b;
  color:#fff;
  padding:12px 14px;
  margin:0;
}
body[data-tab="checklist"] .check-row-head .check-name{
  color:#fff !important;
  font-size:16px;
  line-height:1.25;
  font-weight:900;
}
body[data-tab="checklist"] .check-row-head .number-dot.small{
  width:36px !important;
  height:36px !important;
  background:transparent !important;
  color:#fff !important;
  border:2px solid rgba(255,255,255,.92) !important;
  font-size:17px !important;
}
body[data-tab="checklist"] .check-item.enhanced-row .item-standard{
  padding:10px 14px 0 !important;
  margin:0 !important;
}
body[data-tab="checklist"] .check-item.enhanced-row .result-grid{
  padding:12px 14px 14px !important;
}
body[data-tab="checklist"] .check-item.enhanced-row .measure-box{
  margin:0 14px 14px !important;
  background:#f8fafc;
}
body[data-tab="checklist"] .check-item.enhanced-row .inline-note{
  padding:0 14px 14px !important;
  margin:0 !important;
}
body[data-tab="checklist"] .check-item.enhanced-row .segment-label,
body[data-tab="checklist"] .check-item.cctv-check-row .segment-label{
  color:#1f8a35 !important;
}
body[data-tab="checklist"] .simple-note-row{
  padding-top:12px !important;
  padding-bottom:0 !important;
}

body[data-tab="checklist"] .cctv-check-row .cctv-check-line{
  display:block !important;
}
body[data-tab="checklist"] .cctv-check-row .cctv-check-actions{
  padding:12px 14px 14px;
  justify-content:flex-start !important;
}
body[data-system="cctv"][data-tab="checklist"] .cctv-check-row{
  margin-left:0;
  margin-right:0;
}

body[data-system="air"][data-tab="checklist"] .chip-panels{
  margin-bottom:14px !important;
}

/* ===== FINAL OVERRIDE: checklist title rows must be navy ===== */
body[data-tab="checklist"] .check-item.enhanced-row,
body[data-tab="checklist"] .check-item.cctv-check-row{
  padding:0 !important;
  margin:10px 14px 0 !important;
  border:1px solid #d9e1ec !important;
  border-radius:16px !important;
  overflow:hidden !important;
  background:#fff !important;
}
body[data-tab="checklist"] .check-item.enhanced-row > .check-row-head,
body[data-tab="checklist"] .check-item.cctv-check-row .check-row-head,
body[data-tab="checklist"] .check-item > .check-row-head{
  display:grid !important;
  grid-template-columns:40px minmax(0,1fr) !important;
  align-items:center !important;
  gap:12px !important;
  background:#10245b !important;
  color:#fff !important;
  padding:12px 14px !important;
  margin:0 !important;
  border:0 !important;
}
body[data-tab="checklist"] .check-item .check-row-head .check-name{
  color:#fff !important;
  font-weight:900 !important;
}
body[data-tab="checklist"] .check-item .check-row-head .number-dot,
body[data-tab="checklist"] .check-item .check-row-head .number-dot.small{
  width:36px !important;
  height:36px !important;
  border-radius:999px !important;
  background:transparent !important;
  color:#fff !important;
  border:2px solid rgba(255,255,255,.94) !important;
  font-size:17px !important;
  font-weight:900 !important;
}
body[data-tab="checklist"] .check-item.enhanced-row .result-grid,
body[data-tab="checklist"] .check-item.cctv-check-row .cctv-check-actions{
  padding:12px 14px 14px !important;
}
body[data-tab="checklist"] .check-item.enhanced-row .measure-box{
  margin:0 14px 14px !important;
}
body[data-tab="checklist"] .check-item.enhanced-row .inline-note{
  padding:0 14px 14px !important;
}