:root {
  color-scheme: dark;
  --bg: #061211;
  --sidebar: #071513;
  --surface: #0a1918;
  --surface-soft: #102624;
  --surface-raised: #132b29;
  --ink: #ecfff8;
  --muted: #93aaa6;
  --muted-strong: #bdd0cc;
  --line: rgba(126, 244, 225, 0.18);
  --line-strong: rgba(126, 244, 225, 0.34);
  --accent: #27d7c8;
  --accent-strong: #9ffcf0;
  --accent-soft: rgba(39, 215, 200, 0.14);
  --blue: #1fb8ff;
  --violet: #d46bff;
  --amber: #d8f66a;
  --green: #73f2bf;
  --danger: #ff739b;
  --shadow: 0 18px 46px rgba(0, 0, 0, 0.34);
  --radius: 8px;
  --font-display: Bahnschrift, "Segoe UI Variable Display", "Aptos Display", "Arial Narrow", sans-serif;
  --font-body: "Segoe UI Variable Text", "Segoe UI", Aptos, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body { min-width: 320px; min-height: 100vh; margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 14px; font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .5; }
.hidden { display: none !important; }
.read-only .admin-only { display: none !important; }

.app-shell { display: grid; grid-template-columns: minmax(318px, 360px) minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; z-index: 4; display: flex; height: 100vh; flex-direction: column; gap: 18px; overflow-y: auto; padding: 24px; border-right: 1px solid var(--line); background: var(--sidebar); }
.brand { display: flex; align-items: center; gap: 13px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.brand-mark { display: inline-grid; width: 46px; height: 46px; place-items: center; flex: 0 0 auto; border-radius: 50%; color: #03100f; background: var(--accent); box-shadow: 0 0 0 7px rgba(39, 215, 200, .07); font-weight: 900; }
.brand strong { display: block; color: var(--ink); font-family: var(--font-display); font-size: 18px; font-weight: 700; line-height: 1.1; letter-spacing: .055em; text-transform: uppercase; }
.brand small { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }

.filter-section { display: grid; gap: 8px; }
.filter-section label, .filter-title { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.filter-title em { color: var(--accent); font-style: normal; letter-spacing: 0; text-transform: none; }
.search-box { display: flex; align-items: center; gap: 9px; min-height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); transition: border-color .2s ease, box-shadow .2s ease; }
.search-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(39, 215, 200, .1); }
.search-box span { color: var(--accent); font-size: 20px; transform: rotate(-20deg); }
.search-box input { width: 100%; min-width: 0; height: 40px; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 12px; }
.search-box input::placeholder { color: #617874; }
.floor-filter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.floor-filter button { min-height: 34px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted-strong); background: var(--surface); font-size: 11px; font-weight: 700; transition: .18s ease; }
.floor-filter button:first-child { grid-column: span 2; }
.floor-filter button:hover, .floor-filter button.active { color: #03100f; border-color: var(--accent); background: var(--accent); box-shadow: 0 6px 18px rgba(39, 215, 200, .16); }
.filter-section select { width: 100%; height: 42px; padding: 0 34px 0 12px; border: 1px solid var(--line); border-radius: var(--radius); outline: 0; color: var(--ink); background: var(--surface); font-size: 12px; }
.filter-section select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(39, 215, 200, .1); }
.filter-section option { color: var(--ink); background: var(--surface); }
.clear-button { width: 100%; min-height: 40px; border: 1px solid var(--line-strong); border-radius: var(--radius); color: var(--accent-strong); background: transparent; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.clear-button:hover { color: #03100f; background: var(--accent); }
.quality-card { padding: 15px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--muted-strong); background: var(--surface); }
.quality-card summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; color: var(--ink); font-size: 12px; font-weight: 800; }
.quality-card summary span { display: grid; min-width: 24px; height: 24px; place-items: center; padding: 0 6px; border-radius: 12px; color: #061211; background: var(--amber); }
.quality-card p { margin: 11px 0 0; font-size: 11px; }
.quality-card p b { color: var(--ink); }
.quality-card small { display: block; margin-top: 11px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.source-note { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); }
.source-note span { font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.source-note p { margin: 6px 0 0; font-size: 9px; line-height: 1.5; word-break: break-word; }

.content { display: flex; min-width: 0; flex-direction: column; gap: 18px; padding: 24px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 72px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
h1, h2, p { margin: 0; }
h1 { color: var(--ink); font-family: var(--font-display); font-size: clamp(25px, 3vw, 36px); font-weight: 700; line-height: 1; letter-spacing: .035em; text-transform: uppercase; }
.topbar-subtitle { margin-top: 7px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.header-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 9px; }
.live-indicator, .updated { display: inline-flex; align-items: center; gap: 7px; color: var(--muted-strong); font-size: 11px; font-weight: 700; }
.live-indicator i, .updated i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(115, 242, 191, .1); }
.mode-badge { padding: 7px 10px; border: 1px solid var(--line); border-radius: 14px; color: var(--accent-strong); background: var(--accent-soft); font-size: 9px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.mode-badge.admin-active { color: #071513; border-color: var(--amber); background: var(--amber); }
.primary-action, .secondary-action { min-height: 38px; padding: 0 14px; border-radius: 6px; font-size: 11px; font-weight: 800; transition: .18s ease; }
.primary-action { border: 1px solid var(--accent); color: #03100f; background: var(--accent); }
.secondary-action { border: 1px solid var(--line-strong); color: var(--accent-strong); background: var(--surface); }
.primary-action:hover { background: var(--accent-strong); }
.secondary-action:hover { border-color: var(--accent); background: var(--accent-soft); }

.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.kpi-card { min-width: 0; min-height: 112px; padding: 20px; border-right: 1px solid var(--line); background: transparent; }
.kpi-card:last-child { border-right: 0; }
.kpi-card > span { display: block; color: var(--muted); font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.kpi-card > strong { display: block; margin: 7px 0 5px; color: var(--accent-strong); font-size: clamp(28px, 3vw, 38px); line-height: 1; letter-spacing: -.04em; }
.kpi-card small { color: var(--muted); font-size: 10px; }
.kpi-card.success > strong { color: var(--green); }
.kpi-card.warning > strong { color: var(--amber); }
.mini-progress { height: 5px; margin: 9px 0 7px; overflow: hidden; border-radius: 8px; background: rgba(255, 255, 255, .08); }
.mini-progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--blue)); transition: width .25s ease; }

.analysis-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 18px; }
.panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.floor-panel, .checkpoint-panel { padding: 20px; }
.panel-heading, .detail-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.panel-heading span, .detail-heading > div:first-child > span { color: var(--accent); font-family: var(--font-display); font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.panel-heading h2, .detail-heading h2 { margin-top: 4px; color: var(--ink); font-family: var(--font-display); font-size: 18px; font-weight: 700; letter-spacing: .045em; line-height: 1.18; text-transform: uppercase; }
.detail-heading h2 { margin-top: 0; }
.panel-heading small { color: var(--muted); font-size: 10px; }
.floor-bars { display: grid; gap: 9px; margin-top: 18px; }
.floor-bar { display: grid; grid-template-columns: 28px minmax(90px, 1fr) 39px 46px; align-items: center; gap: 9px; width: 100%; padding: 6px 8px; border: 1px solid transparent; border-radius: 6px; color: var(--ink); background: transparent; text-align: left; }
.floor-bar:hover, .floor-bar.selected { border-color: var(--line); background: var(--surface-soft); }
.floor-label { color: var(--accent-strong); font-size: 10px; font-weight: 800; }
.bar-track { height: 8px; overflow: hidden; border-radius: 8px; background: rgba(255, 255, 255, .08); }
.bar-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--blue)); }
.floor-bar strong { color: var(--ink); font-size: 10px; text-align: right; }
.floor-bar small { color: var(--muted); font-size: 9px; text-align: right; }
.checkpoint-list { display: grid; gap: 9px; margin-top: 18px; }
.checkpoint-row { display: grid; grid-template-columns: 27px minmax(120px, 1fr) 36px; align-items: center; gap: 9px; }
.checkpoint-row > b { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 50%; color: #041311; background: var(--accent); font-size: 8px; }
.checkpoint-row > span em { display: block; overflow: hidden; color: var(--muted-strong); font-size: 10px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.checkpoint-row > span i { display: block; height: 4px; margin-top: 5px; overflow: hidden; border-radius: 8px; background: rgba(255, 255, 255, .08); }
.checkpoint-row > span u { display: block; height: 100%; border-radius: inherit; background: var(--green); text-decoration: none; }
.checkpoint-row > strong { color: var(--ink); font-size: 9px; text-align: right; }

.matrix-panel { padding: 20px; }
.matrix-heading { align-items: center; }
.matrix-legend { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px 13px; }
.matrix-legend span { display: inline-flex; align-items: center; gap: 6px; color: var(--muted-strong); font-family: var(--font-body); font-size: 9px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.matrix-legend i { width: 8px; height: 8px; border-radius: 50%; }
.matrix-legend i.high { background: var(--green); }
.matrix-legend i.medium { background: var(--amber); }
.matrix-legend i.low { background: var(--danger); }
.matrix-scroll { overflow-x: auto; margin-top: 18px; padding-bottom: 5px; }
.type-matrix { display: grid; min-width: 1020px; gap: 6px; }
.matrix-corner, .matrix-header, .matrix-row-label, .matrix-cell { min-height: 67px; border-radius: 6px; }
.matrix-corner, .matrix-header { display: grid; align-content: center; justify-items: center; gap: 5px; padding: 9px; color: var(--muted); background: var(--surface-soft); text-align: center; }
.matrix-corner strong, .matrix-header strong, .matrix-row-label strong { color: var(--muted-strong); font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: .055em; text-transform: uppercase; }
.matrix-corner small, .matrix-header small, .matrix-row-label small { color: var(--muted); font-size: 9px; font-weight: 500; }
.matrix-row-label { display: grid; align-content: center; justify-items: start; gap: 5px; padding: 9px 12px; border: 1px solid var(--line); color: var(--accent-strong); background: var(--surface-soft); text-align: left; }
.matrix-row-label strong { color: var(--accent-strong); }
.matrix-row-label:hover, .matrix-row-label.selected { border-color: var(--accent); background: var(--accent-soft); }
.matrix-cell { --tone: var(--accent); position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; overflow: hidden; padding: 10px 12px 16px; border: 1px dashed rgba(126, 244, 225, .1); color: #536965; background: rgba(255, 255, 255, .018); text-align: left; transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.matrix-cell.has-data { border-style: solid; border-color: var(--line); color: var(--ink); background: var(--surface-soft); }
.matrix-cell.high { --tone: var(--green); }
.matrix-cell.medium { --tone: var(--amber); }
.matrix-cell.low { --tone: var(--danger); }
.matrix-cell:not(:disabled):hover, .matrix-cell.selected { border-color: var(--tone); transform: translateY(-1px); box-shadow: 0 7px 18px rgba(0, 0, 0, .24); }
.matrix-cell.selected { outline: 1px solid var(--tone); outline-offset: -3px; }
.matrix-cell:disabled { cursor: default; opacity: 1; }
.matrix-cell-value, .matrix-cell-rate { display: grid; gap: 2px; }
.matrix-cell-value strong { color: var(--ink); font-size: 18px; line-height: 1; }
.matrix-cell-rate { justify-items: end; text-align: right; }
.matrix-cell-rate strong { color: var(--tone); font-size: 12px; line-height: 1; }
.matrix-cell-value small, .matrix-cell-rate small { color: var(--muted); font-size: 8px; font-weight: 600; text-transform: uppercase; }
.matrix-cell-bar { position: absolute; right: 12px; bottom: 8px; left: 12px; height: 3px; overflow: hidden; border-radius: 4px; background: rgba(255, 255, 255, .07); }
.matrix-cell-bar u { display: block; width: var(--cell-progress); height: 100%; border-radius: inherit; background: var(--tone); text-decoration: none; }
.matrix-empty { grid-column: 1 / -1; justify-self: center; color: #536965; font-size: 9px; font-weight: 600; }

.detail-panel { overflow: hidden; }
.collapsible-heading { list-style: none; cursor: pointer; user-select: none; }
.collapsible-heading::-webkit-details-marker { display: none; }
.detail-heading { align-items: center; padding: 20px; border-bottom: 0; transition: background .18s ease; }
.detail-heading:hover { background: rgba(39, 215, 200, .045); }
.detail-heading:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.detail-panel[open] > .detail-heading { border-bottom: 1px solid var(--line); }
.collapse-action { position: relative; display: grid; width: 34px; height: 34px; place-items: center; flex: 0 0 auto; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--surface-soft); transition: border-color .18s ease, background .18s ease; }
.collapse-action::before { content: ""; width: 8px; height: 8px; margin-top: -4px; border-right: 2px solid var(--accent-strong); border-bottom: 2px solid var(--accent-strong); transform: rotate(45deg); transition: transform .2s ease, margin .2s ease; }
.detail-panel[open] .collapse-action { border-color: var(--accent); background: var(--accent-soft); }
.detail-panel[open] .collapse-action::before { margin-top: 4px; transform: rotate(225deg); }
.active-filters { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 6px; padding: 12px 20px 0; }
.active-filters:empty { display: none; }
.active-filters button { min-height: 27px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 14px; color: var(--accent-strong); background: var(--accent-soft); font-size: 9px; font-weight: 700; }
.table-scroll { overflow-x: auto; }
.table-scroll table { width: 100%; min-width: 1080px; border-collapse: collapse; }
.table-scroll th { height: 44px; padding: 0 15px; border-bottom: 1px solid var(--line); color: #a9c4bf; background: var(--surface-soft); font-family: var(--font-display); font-size: 9px; font-weight: 700; letter-spacing: .1em; text-align: left; text-transform: uppercase; }
.table-scroll td { padding: 14px 15px; border-bottom: 1px solid rgba(126, 244, 225, .08); vertical-align: middle; font-size: 12px; }
.table-scroll tbody tr:hover { background: rgba(39, 215, 200, .045); }
.tag-cell { display: flex; align-items: center; gap: 7px; }
.tag-cell code { color: var(--accent-strong); font-family: "Cascadia Mono", Consolas, monospace; font-size: 10px; font-weight: 700; white-space: nowrap; }
.tag-warning { padding: 3px 5px; border-radius: 3px; color: #071513; background: var(--amber); font-size: 7px; font-weight: 900; white-space: nowrap; text-transform: uppercase; }
.classification { display: flex; gap: 4px; }
.classification b { display: grid; min-width: 31px; height: 26px; place-items: center; padding: 0 7px; border-radius: 5px; font-size: 9px; font-weight: 800; }
.floor-chip { color: #16091c; background: var(--violet); }
.type-chip { color: #061512; background: var(--green); }
.number-chip { color: #071513; background: var(--accent); }
.room { display: block; max-width: 280px; color: var(--ink); font-size: 11px; font-weight: 700; line-height: 1.35; }
.pma, .origin-observation { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; line-height: 1.35; }
.origin-observation { color: var(--amber); }
.row-progress { display: flex; align-items: center; gap: 7px; }
.row-progress > span { width: 72px; height: 5px; overflow: hidden; border-radius: 8px; background: rgba(255, 255, 255, .08); }
.row-progress > span i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.row-progress strong { min-width: 31px; color: var(--ink); font-size: 10px; }
.step-dots { display: flex; gap: 5px; }
.step-dots i { display: block; width: 9px; height: 9px; border-radius: 50%; background: #3b4d4a; }
.step-dots i.ok, .dot-ok { background: var(--green); }
.step-dots i.issue, .dot-issue { background: var(--danger); }
.step-dots i.pending, .dot-pending { background: #3b4d4a; }
.status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid transparent; border-radius: 14px; font-size: 9px; font-weight: 800; white-space: nowrap; }
.status-pill i { width: 6px; height: 6px; border-radius: 50%; }
.status-pill.complete { color: var(--green); border-color: rgba(115, 242, 191, .25); background: rgba(115, 242, 191, .09); }
.status-pill.complete i { background: var(--green); }
.status-pill.progress { color: var(--amber); border-color: rgba(216, 246, 106, .25); background: rgba(216, 246, 106, .08); }
.status-pill.progress i { background: var(--amber); }
.status-pill.empty { color: var(--muted-strong); border-color: var(--line); background: rgba(255, 255, 255, .04); }
.status-pill.empty i { background: var(--muted); }
.status-pill.issue { color: var(--danger); border-color: rgba(255, 115, 155, .28); background: rgba(255, 115, 155, .09); }
.status-pill.issue i { background: var(--danger); }
.edit-row-btn { min-height: 29px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 5px; color: var(--accent-strong); background: var(--surface-soft); font-size: 9px; font-weight: 700; }
.edit-row-btn:hover { border-color: var(--accent); background: var(--accent-soft); }
.empty-results { display: grid; min-width: 600px; justify-items: center; gap: 5px; padding: 44px; color: var(--muted-strong); }
.empty-results span { color: var(--muted); font-size: 11px; }
.pagination { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 20px; color: var(--muted); border-top: 1px solid var(--line); background: var(--surface-soft); font-size: 9px; }
.pagination div { display: flex; align-items: center; gap: 8px; }
.pagination button { min-height: 29px; padding: 0 10px; border: 1px solid var(--line); border-radius: 5px; color: var(--accent-strong); background: var(--surface); font-size: 9px; }
.pagination b { min-width: 42px; color: var(--ink); text-align: center; }
.dashboard-footer { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 9px; }
.dashboard-footer span:last-child { display: flex; align-items: center; gap: 5px; }
.dashboard-footer i { display: inline-block; width: 7px; height: 7px; margin-left: 7px; border-radius: 50%; }

.edit-dialog { width: min(720px, calc(100vw - 28px)); max-height: min(820px, calc(100vh - 28px)); padding: 0; overflow: auto; border: 1px solid var(--line-strong); border-radius: var(--radius); color: var(--ink); background: var(--surface); box-shadow: 0 26px 80px rgba(0, 0, 0, .65); }
.edit-dialog::backdrop { background: rgba(1, 8, 7, .78); backdrop-filter: blur(4px); }
.edit-dialog form { padding: 22px; }
.dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.dialog-heading span { color: var(--accent); font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.dialog-heading h2 { margin: 4px 0 0; color: var(--ink); font-family: var(--font-display); font-size: 21px; font-weight: 700; letter-spacing: .045em; text-transform: uppercase; }
.close-dialog { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; color: var(--muted-strong); background: var(--surface-soft); font-size: 22px; }
.edit-summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 18px 0 12px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-soft); }
.edit-summary > div { display: grid; min-width: 0; gap: 5px; }
.edit-summary small { color: var(--accent); font-family: var(--font-display); font-size: 8px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.edit-summary code { overflow-wrap: anywhere; color: var(--accent-strong); font-family: "Cascadia Mono", Consolas, monospace; font-size: 12px; font-weight: 700; }
.edit-summary span { color: var(--muted); font-size: 11px; }
.tag-editor-grid { display: grid; grid-template-columns: .72fr 1.15fr 1fr; gap: 12px; }
.tag-editor-grid label { display: grid; gap: 6px; color: var(--muted-strong); font-size: 10px; font-weight: 700; }
.tag-editor-grid select, .tag-editor-grid input { width: 100%; height: 40px; padding: 0 11px; border: 1px solid var(--line); border-radius: 6px; outline: 0; color: var(--ink); background: var(--surface-soft); }
.tag-editor-grid select:focus, .tag-editor-grid input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(39, 215, 200, .1); }
.tag-editor-grid option { color: var(--ink); background: var(--surface); }
.tag-editor-note { margin: 7px 0 16px; color: var(--muted); font-size: 9px; }
.form-grid { display: grid; grid-template-columns: 1.5fr .8fr; gap: 12px; }
.form-grid label, .full-field { display: grid; gap: 6px; color: var(--muted-strong); font-size: 10px; font-weight: 700; }
.form-grid input, .full-field textarea, .checkpoint-edit-row select { width: 100%; border: 1px solid var(--line); border-radius: 6px; outline: 0; color: var(--ink); background: var(--surface-soft); }
.form-grid input { height: 40px; padding: 0 11px; }
.full-field textarea { padding: 10px 11px; resize: vertical; }
.form-grid input:focus, .full-field textarea:focus, .checkpoint-edit-row select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(39, 215, 200, .1); }
.checkpoint-editor { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin: 17px 0; }
.checkpoint-edit-row { display: grid; grid-template-columns: 1fr 108px; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: rgba(255, 255, 255, .02); }
.checkpoint-edit-row span { color: var(--muted-strong); font-size: 10px; font-weight: 700; }
.checkpoint-edit-row select { height: 34px; padding: 0 8px; font-size: 10px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 18px; }
.toast { position: fixed; right: 22px; bottom: 22px; z-index: 30; max-width: min(420px, calc(100vw - 44px)); padding: 13px 15px; border: 1px solid var(--line-strong); border-radius: var(--radius); color: #03100f; background: var(--accent); box-shadow: var(--shadow); font-size: 11px; font-weight: 700; opacity: 0; pointer-events: none; transform: translateY(10px); transition: .2s ease; }
.toast.visible { opacity: 1; transform: translateY(0); }
.toast.error { color: #fff; border-color: var(--danger); background: #9a304e; }
.loading-overlay { position: fixed; inset: 0; z-index: 40; display: grid; place-content: center; justify-items: center; gap: 10px; color: var(--ink); background: var(--bg); }
.loading-overlay span { color: var(--muted); font-size: 12px; }
.spinner { width: 34px; height: 34px; border: 3px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 1180px) {
  .app-shell { grid-template-columns: 280px minmax(0, 1fr); }
  .sidebar { padding: 20px; }
  .topbar { align-items: flex-start; flex-direction: column; }
  .header-actions { justify-content: flex-start; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .kpi-card:nth-child(2) { border-right: 0; }
  .kpi-card:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .analysis-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .app-shell { display: block; }
  .sidebar { position: relative; width: 100%; height: auto; padding: 18px; }
  .brand { padding-bottom: 15px; }
  .floor-filter { grid-template-columns: repeat(8, 1fr); }
  .floor-filter button:first-child { grid-column: span 1; }
  .quality-card, .source-note { display: none; }
  .content { padding: 20px 13px 28px; }
  .topbar { min-height: auto; }
  .live-indicator { display: none; }
  .floor-panel, .checkpoint-panel, .matrix-panel { padding: 16px; }
  .matrix-heading { align-items: flex-start; flex-direction: column; }
  .matrix-legend { justify-content: flex-start; }
  .detail-heading { align-items: center; flex-direction: row; }
  .active-filters { justify-content: flex-start; }
  .pagination, .dashboard-footer { align-items: flex-start; flex-direction: column; }
  .checkpoint-editor { grid-template-columns: 1fr; }
  .tag-editor-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 470px) {
  .floor-filter { grid-template-columns: repeat(4, 1fr); }
  .floor-filter button:first-child { grid-column: span 2; }
  .kpi-grid { display: block; }
  .kpi-card { min-height: 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .kpi-card:last-child { border-bottom: 0; }
  .floor-bar { grid-template-columns: 25px minmax(80px, 1fr) 34px; }
  .floor-bar small { display: none; }
  .form-grid { grid-template-columns: 1fr; }
  .tag-editor-grid { grid-template-columns: 1fr; }
  .edit-summary { align-items: flex-start; flex-direction: column; }
}