:root {
  color-scheme: light;
  --bg: #f5f7fa;
  --surface: #ffffff;
  --surface-subtle: #f8fafc;
  --surface-selected: #eaf2ff;
  --border: #dfe4ea;
  --border-strong: #cbd3dd;
  --text: #172033;
  --text-secondary: #596579;
  --text-muted: #8a95a6;
  --primary: #0b5bd3;
  --primary-hover: #084bab;
  --primary-soft: #e8f1ff;
  --success: #18a058;
  --success-soft: #eaf8f0;
  --danger: #e5484d;
  --danger-soft: #fff0f0;
  --orange: #f08c00;
  --orange-soft: #fff4e5;
  --yellow: #d89b00;
  --yellow-soft: #fff8d9;
  --blue: #2878e8;
  --blue-soft: #edf5ff;
  --sidebar-width: 232px;
  --topbar-height: 52px;
  --drawer-width: 392px;
  --radius: 6px;
  --control-radius: 4px;
  --shadow-drawer: -12px 0 30px rgba(31, 42, 61, .12);
  --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
}

* { box-sizing: border-box; }

html, body { width: 100%; min-height: 100%; margin: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0;
  overflow: hidden;
}

button, input, select, textarea { font: inherit; letter-spacing: 0; }
button { color: inherit; }
button, select { cursor: pointer; }
a { color: var(--primary); text-decoration: none; }
svg { width: 1em; height: 1em; stroke-width: 1.8; }
[hidden] { display: none !important; }

.app-shell { display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); height: 100dvh; }

.sidebar {
  min-width: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  z-index: 50;
}

.brand {
  height: var(--topbar-height);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border-bottom: 1px solid var(--border);
  color: #fff;
  background: #0f3e82;
}

.brand-mark {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 50%;
  background: rgba(255,255,255,.1);
}

.brand-mark svg { width: 18px; height: 18px; }
.brand-copy { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.brand-copy strong { font-size: 14px; line-height: 1.25; white-space: nowrap; }
.brand-copy small { color: rgba(255,255,255,.72); font-size: 10px; }
.sidebar-close { display: none; color: #fff !important; }

.nav { flex: 1; min-height: 0; overflow: auto; padding: 10px 8px 16px; }
.nav::-webkit-scrollbar, .main-area::-webkit-scrollbar, .drawer-body::-webkit-scrollbar { width: 6px; height: 6px; }
.nav::-webkit-scrollbar-thumb, .main-area::-webkit-scrollbar-thumb, .drawer-body::-webkit-scrollbar-thumb { background: #cbd3dd; border-radius: 3px; }

.nav-group { margin-bottom: 4px; }
.nav-group-title {
  width: 100%;
  height: 38px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--control-radius);
  background: transparent;
  color: #2f3b50;
  font-weight: 600;
  text-align: left;
}
.nav-group-title:hover { background: var(--surface-subtle); }
.nav-group-title > svg:first-child { width: 17px; height: 17px; color: #40506a; }
.nav-group-title > span { flex: 1; }
.nav-group-title .chevron { width: 14px; height: 14px; transition: transform .16s ease; }
.nav-group.collapsed .chevron { transform: rotate(-90deg); }
.nav-group.collapsed .nav-children { display: none; }
.nav-children { display: grid; gap: 2px; margin: 2px 0 6px; }
.nav-item {
  width: 100%;
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px 7px 35px;
  border: 0;
  border-radius: var(--control-radius);
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
  text-align: left;
}
.nav-item svg { width: 14px; height: 14px; }
.nav-item:hover { color: var(--primary); background: #f3f7fd; }
.nav-item.active { color: var(--primary); background: var(--surface-selected); font-weight: 600; }
.nav-count { margin-left: auto; min-width: 18px; padding: 0 5px; text-align: center; border-radius: 9px; background: #eef2f7; color: var(--text-secondary); font-size: 10px; }
.nav-item.active .nav-count { background: #d8e8ff; color: var(--primary); }

.sidebar-footer { padding: 8px; border-top: 1px solid var(--border); }
.sidebar-link {
  width: 100%;
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border: 0;
  border-radius: var(--control-radius);
  background: transparent;
  color: var(--text-secondary);
  text-align: left;
}
.sidebar-link:hover { background: var(--surface-subtle); color: var(--primary); }
.sidebar-link span { flex: 1; }
.sidebar-link svg { width: 15px; height: 15px; }

.workspace { min-width: 0; height: 100dvh; display: grid; grid-template-rows: var(--topbar-height) minmax(0, 1fr); }
.topbar {
  height: var(--topbar-height);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(480px, 1.3fr) minmax(180px, 1fr);
  align-items: center;
  gap: 12px;
  padding: 0 16px;
}
.topbar-left, .topbar-right, .topbar-center { min-width: 0; display: flex; align-items: center; }
.topbar-center { justify-content: center; gap: 10px; }
.topbar-right { justify-content: flex-end; gap: 10px; }
.breadcrumb { color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mobile-menu { display: none; margin-right: 6px; }

.jurisdiction-select, .global-search {
  height: 32px;
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--border);
  border-radius: var(--control-radius);
  background: #fff;
  color: var(--text-muted);
  padding: 0 9px;
}
.jurisdiction-select { width: 220px; }
.global-search { flex: 1; max-width: 390px; }
.jurisdiction-select svg, .global-search svg { width: 15px; height: 15px; flex: 0 0 auto; }
.jurisdiction-select select, .global-search input { min-width: 0; flex: 1; border: 0; outline: 0; color: var(--text); background: transparent; }

.icon-btn {
  width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: var(--control-radius);
  background: transparent;
  color: var(--text-secondary);
}
.icon-btn:hover { color: var(--primary); background: var(--primary-soft); border-color: #cfe0fa; }
.icon-btn svg { width: 17px; height: 17px; }
.notification-btn { position: relative; }
.notification-btn span { position: absolute; top: -3px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--danger); color: #fff; font-size: 9px; line-height: 16px; }
.user-menu { min-width: 0; display: flex; align-items: center; gap: 8px; }
.avatar { width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: #e9eff7; color: #1c477f; font-weight: 700; }
.user-copy { min-width: 0; display: flex; flex-direction: column; }
.user-copy strong { max-width: 120px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-copy small { color: var(--text-muted); font-size: 10px; }

.main-area { min-height: 0; overflow: auto; padding: 14px 16px 24px; }
.page { max-width: 1600px; margin: 0 auto; }
.page-head { min-height: 46px; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.page-head-copy { min-width: 0; }
.page-head h1 { margin: 0; font-size: 22px; line-height: 1.25; font-weight: 650; }
.page-head p { margin: 3px 0 0; color: var(--text-muted); font-size: 11px; }
.page-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.btn {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--control-radius);
  background: #fff;
  color: #334056;
  font-size: 12px;
  font-weight: 500;
}
.btn:hover { border-color: #9fb9dc; color: var(--primary); background: #f8fbff; }
.btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn.primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn.success { background: var(--success); border-color: var(--success); color: #fff; }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.small { min-height: 26px; padding: 4px 8px; font-size: 11px; }
.btn.wide { width: 100%; }
.btn:disabled { cursor: not-allowed; opacity: .55; }
.btn svg { width: 14px; height: 14px; }

.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.panel-head { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 11px; border-bottom: 1px solid var(--border); }
.panel-head h2, .panel-head h3 { margin: 0; font-size: 14px; font-weight: 650; }
.panel-head small { color: var(--text-muted); }
.panel-tools { display: flex; align-items: center; gap: 7px; }
.panel-body { padding: 11px; }

.risk-strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border: 1px solid var(--border); border-radius: var(--radius); background: #fff; overflow: hidden; margin-bottom: 10px; }
.risk-metric { min-height: 68px; display: grid; grid-template-columns: 34px 1fr; align-items: center; column-gap: 9px; padding: 9px 12px; border-right: 1px solid var(--border); }
.risk-metric:last-child { border-right: 0; }
.risk-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--control-radius); }
.risk-icon svg { width: 18px; height: 18px; }
.risk-metric strong { display: block; margin-top: 1px; font-size: 20px; line-height: 1.05; }
.risk-metric small { color: var(--text-secondary); font-size: 11px; }
.risk-metric.red .risk-icon { color: var(--danger); background: var(--danger-soft); }
.risk-metric.red strong { color: var(--danger); }
.risk-metric.orange .risk-icon { color: var(--orange); background: var(--orange-soft); }
.risk-metric.orange strong { color: var(--orange); }
.risk-metric.yellow .risk-icon { color: var(--yellow); background: var(--yellow-soft); }
.risk-metric.yellow strong { color: var(--yellow); }
.risk-metric.blue .risk-icon { color: var(--blue); background: var(--blue-soft); }
.risk-metric.blue strong { color: var(--blue); }

.police-overview-grid { display: grid; grid-template-columns: minmax(460px, 1.15fr) minmax(430px, .9fr); gap: 10px; margin-bottom: 10px; }
.map-workbench { display: grid; grid-template-columns: 190px minmax(0, 1fr); min-height: 300px; }
.area-tree { border-right: 1px solid var(--border); padding: 8px; overflow: auto; }
.area-tree-row { width: 100%; min-height: 31px; display: flex; align-items: center; gap: 7px; padding: 5px 7px; border: 0; border-radius: 3px; background: transparent; color: var(--text-secondary); text-align: left; }
.area-tree-row.active, .area-tree-row:hover { background: var(--surface-selected); color: var(--primary); }
.area-tree-row span { flex: 1; }
.area-tree-row small { font-size: 10px; }
.jurisdiction-map { position: relative; min-height: 300px; overflow: hidden; background: #eef3f7; }
.map-grid { position: absolute; inset: 0; opacity: .7; background-image: linear-gradient(#dce6ef 1px, transparent 1px), linear-gradient(90deg, #dce6ef 1px, transparent 1px); background-size: 44px 44px; }
.map-road { position: absolute; height: 12px; border: 4px solid #fff; border-left: 0; border-right: 0; background: #d8e0e8; opacity: .95; transform-origin: left center; }
.map-road.r1 { width: 120%; left: -10%; top: 31%; transform: rotate(-9deg); }
.map-road.r2 { width: 110%; left: -5%; top: 69%; transform: rotate(7deg); }
.map-road.r3 { width: 85%; left: 27%; top: 8%; transform: rotate(64deg); }
.map-river { position: absolute; width: 70px; height: 130%; left: 51%; top: -15%; border-radius: 50%; background: #d8ebf7; transform: rotate(13deg); }
.map-marker { position: absolute; width: 28px; height: 28px; display: grid; place-items: center; transform: translate(-50%, -50%); border: 3px solid #fff; border-radius: 50%; color: #fff; font-size: 10px; font-weight: 700; box-shadow: 0 2px 8px rgba(31,42,61,.22); }
.map-marker.red { background: var(--danger); }
.map-marker.orange { background: var(--orange); }
.map-marker.yellow { background: #e9ae00; }
.map-marker.blue { background: var(--blue); }
.map-label { position: absolute; transform: translate(-50%, 18px); padding: 2px 5px; border-radius: 3px; background: rgba(255,255,255,.9); color: #47556b; font-size: 9px; white-space: nowrap; }

.focus-list { display: grid; }
.focus-row { min-height: 44px; display: grid; grid-template-columns: 46px minmax(160px, 1fr) minmax(110px, .7fr) 72px 66px; align-items: center; gap: 8px; padding: 7px 9px; border-bottom: 1px solid #edf0f4; }
.focus-row:last-child { border-bottom: 0; }
.focus-row:hover { background: #f8fbff; }
.focus-row .address { min-width: 0; }
.focus-row .address strong, .focus-row .address small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.focus-row .address strong { font-size: 11px; font-weight: 550; }
.focus-row .address small { color: var(--text-muted); font-size: 10px; }
.focus-reason { color: var(--text-secondary); font-size: 11px; }
.countdown { color: var(--danger); font-variant-numeric: tabular-nums; font-size: 10px; }
.row-links { display: flex; justify-content: flex-end; gap: 8px; }
.link-btn { padding: 0; border: 0; background: transparent; color: var(--primary); font-size: 11px; }
.link-btn:hover { text-decoration: underline; }

.status-tag { display: inline-flex; align-items: center; justify-content: center; min-height: 20px; padding: 2px 6px; border: 1px solid transparent; border-radius: 3px; font-size: 10px; line-height: 1.2; white-space: nowrap; }
.status-tag.red, .status-tag.urgent { color: #c93238; background: var(--danger-soft); border-color: #ffc8ca; }
.status-tag.orange, .status-tag.high { color: #bd6900; background: var(--orange-soft); border-color: #ffd7a3; }
.status-tag.yellow, .status-tag.normal { color: #957000; background: var(--yellow-soft); border-color: #f0dc8a; }
.status-tag.blue, .status-tag.info { color: #1e65c6; background: var(--blue-soft); border-color: #c5dcff; }
.status-tag.green, .status-tag.success, .status-tag.approved, .status-tag.active, .status-tag.synced, .status-tag.completed { color: #137a43; background: var(--success-soft); border-color: #bce7ce; }
.status-tag.gray, .status-tag.draft, .status-tag.pending, .status-tag.vacant { color: #657187; background: #f1f3f6; border-color: #dde2e9; }
.status-tag.reviewing, .status-tag.processing, .status-tag.triaging, .status-tag.field_check { color: #8a5a00; background: #fff5dc; border-color: #f1d596; }
.status-tag.failed, .status-tag.rejected, .status-tag.degraded { color: #bd3035; background: #fff0f0; border-color: #ffc8ca; }

.data-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px; border: 1px solid var(--border); border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0; background: #fff; }
.filter-control { min-width: 125px; height: 30px; border: 1px solid var(--border); border-radius: var(--control-radius); background: #fff; color: var(--text-secondary); padding: 0 8px; font-size: 11px; }
.filter-control.search { min-width: 220px; flex: 1; max-width: 380px; }
.toolbar-spacer { flex: 1; }

.table-wrap { width: 100%; overflow: auto; border: 1px solid var(--border); border-radius: 0 0 var(--radius) var(--radius); background: #fff; }
.data-table { width: 100%; min-width: 980px; border-collapse: collapse; table-layout: auto; }
.data-table th { position: sticky; top: 0; z-index: 2; height: 34px; padding: 7px 8px; border-bottom: 1px solid var(--border); background: #f7f9fb; color: #566176; font-size: 10px; font-weight: 600; text-align: left; white-space: nowrap; }
.data-table td { height: 42px; padding: 7px 8px; border-bottom: 1px solid #edf0f4; color: #344056; font-size: 11px; vertical-align: middle; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: #f8fbff; }
.data-table tbody tr.selected { background: var(--surface-selected); }
.data-table .primary-cell { color: var(--primary); font-weight: 550; }
.cell-main, .cell-sub { display: block; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-sub { color: var(--text-muted); font-size: 9px; margin-top: 2px; }
.table-actions { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.table-empty { padding: 56px 20px; text-align: center; color: var(--text-muted); }
.table-empty svg { width: 34px; height: 34px; margin-bottom: 8px; }

.pagination { min-height: 42px; display: flex; align-items: center; justify-content: flex-end; gap: 7px; padding: 7px 10px; border: 1px solid var(--border); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); background: #fff; color: var(--text-muted); }
.page-btn { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: var(--control-radius); background: #fff; }
.page-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }

.stat-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid var(--border); border-radius: var(--radius); background: #fff; margin-bottom: 10px; }
.stat-item { min-height: 74px; padding: 12px 14px; border-right: 1px solid var(--border); }
.stat-item:last-child { border-right: 0; }
.stat-item span { display: block; color: var(--text-secondary); font-size: 11px; }
.stat-item strong { display: block; margin-top: 3px; font-size: 22px; }
.stat-item small { display: block; color: var(--text-muted); font-size: 10px; }

.three-band { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.band-panel { min-height: 88px; padding: 11px; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; }
.band-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.band-panel-head strong { font-size: 13px; }
.band-panel-head button { border: 0; background: transparent; color: var(--primary); font-size: 10px; }
.band-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.band-metrics span { padding-right: 8px; border-right: 1px solid var(--border); color: var(--text-secondary); font-size: 10px; }
.band-metrics span:last-child { border-right: 0; }
.band-metrics b { display: inline-block; margin-left: 5px; color: var(--text); font-size: 16px; }

.business-grid { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 10px; }
.hierarchy { min-height: 590px; }
.tree-search { margin: 9px; width: calc(100% - 18px); height: 30px; border: 1px solid var(--border); border-radius: var(--control-radius); padding: 0 9px; }
.hierarchy-list { padding: 0 8px 12px; }
.hierarchy-row { width: 100%; min-height: 30px; display: flex; align-items: center; gap: 6px; padding: 4px 7px; border: 0; border-radius: 3px; background: transparent; color: var(--text-secondary); text-align: left; }
.hierarchy-row:hover, .hierarchy-row.active { background: var(--surface-selected); color: var(--primary); }
.hierarchy-row.level-1 { padding-left: 18px; }
.hierarchy-row.level-2 { padding-left: 30px; }
.hierarchy-row.level-3 { padding-left: 42px; }
.hierarchy-row.level-4 { padding-left: 54px; }
.hierarchy-row span { flex: 1; }

.split-workbench { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 10px; }
.compact-list { display: grid; }
.compact-row { min-height: 48px; display: grid; grid-template-columns: minmax(150px, 1fr) 100px 100px 80px; align-items: center; gap: 8px; padding: 7px 10px; border-bottom: 1px solid #edf0f4; }
.compact-row:last-child { border-bottom: 0; }

.drawer-backdrop { position: fixed; inset: 0; background: rgba(23,32,51,.16); z-index: 180; }
.detail-drawer { position: fixed; z-index: 190; top: 0; right: 0; bottom: 0; width: min(var(--drawer-width), 96vw); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: #fff; border-left: 1px solid var(--border); box-shadow: var(--shadow-drawer); }
.drawer-header { min-height: 58px; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 12px 13px; border-bottom: 1px solid var(--border); }
.drawer-header h2 { margin: 0; font-size: 16px; }
.drawer-header p { margin: 2px 0 0; color: var(--text-muted); font-size: 10px; }
.drawer-body { min-height: 0; overflow: auto; padding: 0 13px 18px; }
.drawer-footer { min-height: 58px; display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 10px 13px; border-top: 1px solid var(--border); background: #fff; }
.detail-section { padding: 12px 0; border-bottom: 1px solid #edf0f4; }
.detail-section:last-child { border-bottom: 0; }
.detail-section-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 9px; }
.detail-section-head h3 { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12px; font-weight: 650; }
.detail-section-head h3::before { content: ""; width: 3px; height: 13px; border-radius: 1px; background: var(--primary); }
.detail-section-head button { border: 0; background: transparent; color: var(--primary); font-size: 10px; }
.detail-grid { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 7px 10px; }
.detail-grid dt { color: var(--text-muted); font-size: 10px; }
.detail-grid dd { min-width: 0; margin: 0; color: #344056; font-size: 10px; overflow-wrap: anywhere; }
.detail-grid.two { grid-template-columns: 80px 1fr 80px 1fr; }
.detail-list { display: grid; gap: 7px; }
.detail-list-row { min-height: 34px; display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid #e8ecf1; border-radius: 4px; }
.detail-list-row .grow { min-width: 0; flex: 1; }
.detail-list-row strong, .detail-list-row small { display: block; }
.detail-list-row strong { font-size: 10px; }
.detail-list-row small { color: var(--text-muted); font-size: 9px; }
.timeline { position: relative; display: grid; gap: 0; padding-left: 16px; }
.timeline::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 5px; width: 1px; background: #d9e1ea; }
.timeline-item { position: relative; padding: 0 0 12px 9px; }
.timeline-item::before { content: ""; position: absolute; left: -14px; top: 4px; width: 7px; height: 7px; border: 2px solid #fff; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.timeline-item.pending::before { background: #fff; box-shadow: 0 0 0 1px #b7c0cc; }
.timeline-item strong { display: block; font-size: 10px; }
.timeline-item small { display: block; color: var(--text-muted); font-size: 9px; }
.evidence-preview { position: relative; min-height: 170px; display: grid; place-items: center; overflow: hidden; border-radius: 4px; background: #20242b; color: #fff; }
.evidence-preview img { width: 100%; height: 180px; object-fit: cover; filter: blur(8px) saturate(.75); transform: scale(1.04); }
.evidence-placeholder { text-align: center; color: #c5ccd7; }
.evidence-placeholder svg { width: 32px; height: 32px; margin-bottom: 6px; }
.qr-preview { display: grid; grid-template-columns: 120px 1fr; gap: 12px; align-items: center; }
.qr-preview img { width: 120px; height: 120px; border: 1px solid var(--border); padding: 5px; background: #fff; }
.qr-meta strong, .qr-meta small { display: block; }
.qr-meta small { color: var(--text-muted); margin-top: 4px; overflow-wrap: anywhere; }

.modal-backdrop { position: fixed; inset: 0; z-index: 220; display: grid; place-items: center; padding: 24px; background: rgba(23,32,51,.4); }
.modal { width: min(720px, 96vw); max-height: calc(100dvh - 48px); display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; border: 1px solid var(--border); border-radius: 8px; background: #fff; box-shadow: 0 24px 70px rgba(23,32,51,.24); }
.modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 13px 15px; border-bottom: 1px solid var(--border); }
.modal-header h2 { margin: 0; font-size: 17px; }
.modal-header p { margin: 2px 0 0; color: var(--text-muted); font-size: 10px; }
.modal form { min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.modal-body { min-height: 0; overflow: auto; padding: 15px; }
.modal-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 15px; border-top: 1px solid var(--border); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.form-grid.one { grid-template-columns: 1fr; }
.field { min-width: 0; display: grid; gap: 5px; }
.field.full { grid-column: 1 / -1; }
.field > span { color: #465268; font-size: 11px; font-weight: 550; }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 34px;
  padding: 7px 9px;
  border: 1px solid var(--border-strong);
  border-radius: var(--control-radius);
  outline: 0;
  background: #fff;
  color: var(--text);
  font-size: 12px;
}
.field textarea { min-height: 84px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: #79a7e8; box-shadow: 0 0 0 2px rgba(11,91,211,.08); }
.field small { color: var(--text-muted); font-size: 9px; }
.checkbox-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.check-option { min-height: 38px; display: flex; align-items: center; gap: 8px; padding: 7px 9px; border: 1px solid var(--border); border-radius: 4px; }
.check-option input { width: 15px; height: 15px; }
.form-error { min-height: 18px; color: var(--danger); font-size: 11px; }

.preview-frame { padding: 10px; border: 1px solid var(--border); border-radius: var(--radius); background: #eef2f7; }
.preview-frame img { width: 100%; max-height: 310px; display: block; object-fit: contain; background: #fff; }
.code-preview { max-height: 300px; overflow: auto; margin: 0; padding: 10px; border-radius: 4px; background: #172033; color: #dce8f7; font: 11px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }

.login-screen { min-height: 100dvh; display: grid; grid-template-columns: minmax(420px, 1.1fr) minmax(360px, .9fr); background: #fff; }
.login-brand-panel { display: flex; flex-direction: column; justify-content: center; padding: 72px clamp(48px, 8vw, 120px); background: #0f3e82; color: #fff; }
.brand-emblem { width: 58px; height: 58px; display: grid; place-items: center; margin-bottom: 22px; border: 1px solid rgba(255,255,255,.4); border-radius: 50%; background: rgba(255,255,255,.08); }
.brand-emblem svg { width: 30px; height: 30px; }
.login-brand-panel h1 { margin: 0; font-size: 32px; font-weight: 650; }
.login-brand-panel p { max-width: 520px; margin: 12px 0 28px; color: rgba(255,255,255,.76); font-size: 15px; }
.login-capabilities { display: grid; gap: 10px; }
.login-capabilities span { display: flex; align-items: center; gap: 9px; color: rgba(255,255,255,.86); }
.login-capabilities svg { width: 17px; height: 17px; }
.login-form { align-self: center; width: min(360px, calc(100% - 48px)); margin: 0 auto; padding: 30px; border: 1px solid var(--border); border-radius: 8px; background: #fff; box-shadow: 0 18px 45px rgba(31,42,61,.1); }
.login-form-head { margin-bottom: 22px; }
.login-form-head h2 { margin: 0; font-size: 22px; }
.login-form-head p { margin: 5px 0 0; color: var(--text-muted); }
.input-with-icon { height: 38px; display: flex; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: var(--control-radius); }
.input-with-icon:focus-within { border-color: #79a7e8; box-shadow: 0 0 0 2px rgba(11,91,211,.08); }
.input-with-icon svg { width: 16px; height: 16px; color: var(--text-muted); }
.input-with-icon input { min-width: 0; flex: 1; height: 100%; border: 0; outline: 0; }
.login-form .field { margin-bottom: 14px; }

.page-loading { min-height: 300px; display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--text-muted); }
.spinner { width: 18px; height: 18px; border: 2px solid #dbe3ed; border-top-color: var(--primary); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.toast-region { position: fixed; z-index: 300; right: 18px; bottom: 18px; display: grid; gap: 8px; width: min(360px, calc(100vw - 36px)); }
.toast { display: grid; grid-template-columns: 22px 1fr auto; align-items: start; gap: 8px; padding: 10px 11px; border: 1px solid var(--border); border-left: 3px solid var(--primary); border-radius: var(--radius); background: #fff; box-shadow: 0 10px 28px rgba(31,42,61,.16); }
.toast.success { border-left-color: var(--success); }
.toast.error { border-left-color: var(--danger); }
.toast.warning { border-left-color: var(--orange); }
.toast svg { width: 17px; height: 17px; margin-top: 1px; }
.toast strong, .toast small { display: block; }
.toast strong { font-size: 12px; }
.toast small { color: var(--text-secondary); font-size: 10px; margin-top: 2px; }
.toast button { border: 0; background: transparent; color: var(--text-muted); }

.mobile-registration { max-width: 720px; margin: 0 auto; }
.registration-steps { display: grid; grid-template-columns: repeat(5, 1fr); margin-bottom: 16px; }
.registration-step { position: relative; text-align: center; color: var(--text-muted); font-size: 10px; }
.registration-step::before { content: ""; display: block; width: 22px; height: 22px; margin: 0 auto 5px; border: 1px solid var(--border-strong); border-radius: 50%; background: #fff; }
.registration-step::after { content: ""; position: absolute; top: 11px; left: calc(50% + 13px); right: calc(-50% + 13px); height: 1px; background: var(--border); }
.registration-step:last-child::after { display: none; }
.registration-step.active { color: var(--primary); font-weight: 600; }
.registration-step.active::before { border: 6px solid var(--primary); }

.foundation-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.capability-panel { min-height: 112px; display: flex; align-items: flex-start; gap: 12px; padding: 13px; }
.capability-icon { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; border-radius: var(--control-radius); background: var(--primary-soft); color: var(--primary); }
.capability-icon svg { width: 20px; height: 20px; }
.capability-panel .grow { min-width: 0; flex: 1; }
.capability-panel p { margin: 2px 0 7px; color: var(--text-secondary); font-size: 11px; }
.capability-panel small { color: var(--text-muted); }
.architecture-band { display: grid; grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1fr) 32px minmax(0, 1fr); align-items: center; gap: 10px; }
.architecture-band > div { min-height: 66px; padding: 10px; border: 1px solid var(--border); border-radius: var(--control-radius); background: var(--surface-subtle); }
.architecture-band strong, .architecture-band span { display: block; }
.architecture-band strong { margin-bottom: 5px; font-size: 12px; }
.architecture-band span { color: var(--text-secondary); font-size: 10px; }
.architecture-band > svg { justify-self: center; color: var(--primary); }

.public-registration-shell { min-height: 100dvh; padding: 22px 16px 48px; background: #f5f7fa; }
.public-registration-head { max-width: 680px; display: flex; align-items: center; gap: 12px; margin: 0 auto 14px; padding: 14px 16px; border-radius: var(--radius); background: #0f3e82; color: #fff; }
.public-registration-head .brand-emblem { width: 42px; height: 42px; flex: 0 0 auto; margin: 0; }
.public-registration-head .brand-emblem svg { width: 22px; height: 22px; }
.public-registration-head h1 { margin: 0; font-size: 20px; }
.public-registration-head p { margin: 2px 0 0; color: rgba(255,255,255,.72); font-size: 11px; }
.public-registration-card { max-width: 680px; margin: 0 auto; padding: 18px; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; }
.public-house-summary { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; padding: 12px; border: 1px solid #cfe0fa; border-radius: var(--control-radius); background: var(--primary-soft); }
.public-house-summary > svg { width: 22px; height: 22px; flex: 0 0 auto; color: var(--primary); }
.public-house-summary strong, .public-house-summary span, .public-house-summary small { display: block; }
.public-house-summary strong { font-size: 13px; }
.public-house-summary span { margin-top: 2px; color: var(--text-secondary); font-size: 11px; }
.public-house-summary small { margin-top: 3px; color: var(--text-muted); font-size: 10px; }
.privacy-consent { align-items: flex-start; color: var(--text-secondary); font-size: 10px; }
.registration-success { max-width: 460px; margin: 20px auto; text-align: center; }
.registration-success > svg { width: 52px; height: 52px; color: var(--success); }
.registration-success h2 { margin: 10px 0 4px; font-size: 20px; }
.registration-success p { margin: 0 0 18px; color: var(--text-secondary); }
.registration-success .detail-grid { margin: 0 auto 16px; padding: 12px; border: 1px solid var(--border); border-radius: var(--control-radius); text-align: left; }
.registration-success > small { color: var(--text-muted); }

/* Standalone security governance workspace */
.governance-page { container-type: inline-size; }
.governance-metric-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.governance-metric-grid.compact { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.governance-metric {
  min-width: 0;
  min-height: 82px;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-top: 3px solid #7890ae;
  border-radius: var(--radius);
  background: #fff;
}
.governance-metric.success { border-top-color: var(--success); }
.governance-metric.warning { border-top-color: var(--orange); }
.governance-metric.danger { border-top-color: var(--danger); }
.governance-metric span, .governance-metric small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.governance-metric span { color: var(--text-secondary); font-size: 10px; }
.governance-metric strong { display: block; margin: 4px 0 2px; font-size: 20px; line-height: 1.05; font-variant-numeric: tabular-nums; }
.governance-metric small { color: var(--text-muted); font-size: 9px; }
.governance-overview-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(330px, .65fr); gap: 10px; margin-bottom: 10px; }
.governance-task-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.governance-task-grid button { min-height: 86px; display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; align-content: center; column-gap: 10px; padding: 11px; border: 0; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); background: #fff; text-align: left; }
.governance-task-grid button:nth-child(2n) { border-right: 0; }
.governance-task-grid button:nth-last-child(-n+2) { border-bottom: 0; }
.governance-task-grid button:hover { background: #f5f9ff; }
.governance-task-grid button > svg { grid-row: 1 / 3; align-self: center; width: 30px; height: 30px; padding: 6px; border-radius: 4px; background: var(--primary-soft); color: var(--primary); }
.governance-task-grid button strong { align-self: end; font-size: 12px; }
.governance-task-grid button span { align-self: start; color: var(--text-muted); font-size: 10px; }
.quality-gauges { display: grid; gap: 12px; padding: 14px; }
.quality-gauges > div { display: grid; grid-template-columns: 1fr auto; gap: 5px 10px; align-items: center; }
.quality-gauges span { color: var(--text-secondary); font-size: 10px; }
.quality-gauges strong { font-size: 14px; font-variant-numeric: tabular-nums; }
.quality-gauges progress { grid-column: 1 / -1; width: 100%; height: 6px; accent-color: var(--success); }
.governance-bottom-grid { grid-template-columns: minmax(0, 1fr) minmax(340px, .65fr); }

.mobile-workspace-page { max-width: 1120px; }
.mobile-workspace-title { min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; }
.mobile-workspace-title > div { min-width: 0; display: flex; align-items: center; gap: 10px; }
.mobile-workspace-title h1 { margin: 0; font-size: 17px; line-height: 1.3; }
.mobile-workspace-title p { margin: 2px 0 0; color: var(--text-muted); font-size: 10px; }
.mobile-avatar { width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: #e8f1ff; color: var(--primary); }
.mobile-avatar.police { background: #eaf8f0; color: #137a43; }
.mobile-avatar svg { width: 21px; height: 21px; }
.mobile-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.mobile-command-band { display: grid; grid-template-columns: repeat(4, 1fr); margin-bottom: 10px; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; }
.mobile-command-band.six { grid-template-columns: repeat(6, 1fr); }
.mobile-command-band button { min-height: 72px; display: grid; place-items: center; align-content: center; gap: 5px; border: 0; border-right: 1px solid var(--border); background: #fff; color: #334056; font-size: 10px; }
.mobile-command-band button:last-child { border-right: 0; }
.mobile-command-band button:hover { background: #f5f9ff; color: var(--primary); }
.mobile-command-band.police button:hover { background: #f0faf5; color: #137a43; }
.mobile-command-band svg { width: 20px; height: 20px; }
.mobile-section { margin-bottom: 10px; }
.mobile-task-list { display: grid; }
.mobile-task-list article { min-height: 72px; display: flex; align-items: center; gap: 12px; padding: 10px 11px; border-bottom: 1px solid #edf0f4; }
.mobile-task-list article:last-child { border-bottom: 0; }
.mobile-task-main { min-width: 0; flex: 1; }
.mobile-task-main strong, .mobile-task-main span, .mobile-task-main small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mobile-task-main strong { font-size: 11px; }
.mobile-task-main span { color: var(--text-secondary); font-size: 10px; }
.mobile-task-main small { margin-top: 2px; color: var(--text-muted); font-size: 9px; }
.mobile-task-actions { display: flex; align-items: center; gap: 8px; }
.operator-house-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.operator-house-list article { min-width: 0; min-height: 80px; display: flex; align-items: center; gap: 9px; padding: 10px; border-right: 1px solid #edf0f4; border-bottom: 1px solid #edf0f4; }
.operator-house-list article:nth-child(2n) { border-right: 0; }
.operator-house-list article:nth-last-child(-n+2) { border-bottom: 0; }
.house-state { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 4px; }
.house-state.occupied { background: #eaf8f0; color: var(--success); }
.house-state.vacant { background: #f1f3f6; color: var(--text-muted); }
.operator-house-list .grow { min-width: 0; flex: 1; }
.operator-house-list strong, .operator-house-list span, .operator-house-list small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.operator-house-list strong { font-size: 11px; }
.operator-house-list span { color: var(--text-secondary); font-size: 9px; }
.operator-house-list small { color: var(--text-muted); font-size: 9px; }
.operator-house-flags { display: grid; gap: 4px; }
.operator-house-flags button, .operator-house-flags span { min-width: 30px; height: 26px; display: inline-flex; align-items: center; justify-content: center; gap: 3px; border: 1px solid var(--border); border-radius: 3px; background: #fff; color: var(--primary); font-size: 9px; }
.operator-house-flags .danger { color: var(--danger); }
.operator-house-flags svg { width: 13px; height: 13px; }
.message-rail, .message-center-list { display: grid; }
.message-rail button { min-height: 50px; display: grid; grid-template-columns: 5px 1fr auto; align-items: center; gap: 9px; padding: 8px 10px; border: 0; border-bottom: 1px solid #edf0f4; background: #fff; text-align: left; }
.message-priority { width: 4px; height: 26px; border-radius: 2px; background: #a8b2c1; }
.message-priority.high { background: var(--orange); }
.message-priority.urgent { background: var(--danger); }
.message-rail strong, .message-rail small { display: block; }
.message-rail strong { font-size: 10px; }
.message-rail small { max-width: 580px; overflow: hidden; color: var(--text-muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.message-rail time { color: var(--text-muted); font-size: 9px; }
.message-center-list article { min-height: 74px; display: flex; align-items: center; gap: 11px; padding: 11px; border-bottom: 1px solid #edf0f4; }
.message-center-list article.unread { background: #f8fbff; }
.message-type-icon { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 4px; background: var(--primary-soft); color: var(--primary); }
.message-center-list .grow { min-width: 0; flex: 1; }
.message-center-list .grow > div { display: flex; align-items: center; gap: 7px; }
.message-center-list p { margin: 3px 0; color: var(--text-secondary); font-size: 10px; }
.message-center-list small { color: var(--text-muted); font-size: 9px; }

.building-profile-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.building-profile-card { min-width: 0; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; }
.building-profile-card header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 11px; border-bottom: 1px solid var(--border); }
.building-profile-card h2 { margin: 0; font-size: 14px; }
.building-profile-card p { margin: 2px 0 0; color: var(--text-muted); font-size: 9px; }
.building-occupancy { padding: 11px; }
.building-occupancy > div { display: flex; align-items: center; justify-content: space-between; }
.building-occupancy span { color: var(--text-secondary); font-size: 10px; }
.building-occupancy strong { font-size: 17px; }
.building-occupancy progress { width: 100%; height: 7px; accent-color: var(--primary); }
.building-occupancy small { display: block; color: var(--text-muted); font-size: 9px; }
.building-profile-card dl { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; border-top: 1px solid #edf0f4; }
.building-profile-card dl > div { padding: 8px; border-right: 1px solid #edf0f4; border-bottom: 1px solid #edf0f4; }
.building-profile-card dl > div:nth-child(3n) { border-right: 0; }
.building-profile-card dt { color: var(--text-muted); font-size: 9px; }
.building-profile-card dd { margin: 2px 0 0; font-size: 13px; font-weight: 650; }
.building-profile-card footer { display: flex; justify-content: flex-end; gap: 12px; padding: 9px 11px; }
.compact-operation-list { display: grid; }
.compact-operation-list > div { min-height: 45px; display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-bottom: 1px solid #edf0f4; }
.compact-operation-list > div > svg { width: 17px; height: 17px; color: var(--primary); }
.compact-operation-list > div > span { min-width: 0; flex: 1; }
.compact-operation-list strong, .compact-operation-list small { display: block; }
.compact-operation-list strong { font-size: 10px; }
.compact-operation-list small { color: var(--text-muted); font-size: 9px; }
.check-ok, .check-fail { width: 17px; height: 17px; }
.check-ok { color: var(--success); }
.check-fail { color: var(--danger); }

.population-layout { display: grid; grid-template-columns: minmax(300px, .7fr) minmax(480px, 1.3fr); gap: 10px; }
.population-composition { display: grid; gap: 12px; padding: 14px; }
.population-composition > div { display: grid; grid-template-columns: 1fr auto; gap: 5px 10px; align-items: center; }
.population-composition span { color: var(--text-secondary); font-size: 10px; }
.population-composition strong { font-size: 14px; }
.population-composition progress { grid-column: 1 / -1; width: 100%; height: 7px; accent-color: var(--primary); }
.chart-legend { display: flex; gap: 11px; color: var(--text-muted); font-size: 9px; }
.chart-legend span::before { content: ""; width: 7px; height: 7px; display: inline-block; margin-right: 4px; border-radius: 1px; background: var(--primary); }
.chart-legend .checkouts::before { background: var(--success); }
.chart-legend .captures::before { background: var(--orange); }
.trend-bars { height: 220px; display: grid; grid-template-columns: repeat(7, 1fr); align-items: end; gap: 8px; padding: 16px 18px 10px; }
.trend-bars > div { height: 100%; display: grid; grid-template-rows: minmax(0, 1fr) 18px; gap: 4px; }
.trend-bars .bars { display: flex; align-items: end; justify-content: center; gap: 3px; border-bottom: 1px solid var(--border); }
.trend-bars i { width: 9px; min-height: 3px; display: block; background: var(--primary); }
.trend-bars i.checkouts { background: var(--success); }
.trend-bars i.captures { background: var(--orange); }
.trend-bars > div > span { text-align: center; color: var(--text-muted); font-size: 8px; }
.privacy-footnote { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; color: var(--text-muted); font-size: 9px; }
.privacy-footnote svg { width: 14px; height: 14px; color: var(--success); }

.capture-evidence-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.capture-evidence-card { min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; }
.capture-visual { position: relative; aspect-ratio: 4 / 3; display: grid; place-items: center; background: #25303d; }
.redacted-face { display: grid; place-items: center; gap: 7px; color: #cbd5df; }
.redacted-face svg { width: 42px; height: 42px; opacity: .7; }
.redacted-face span { font-size: 9px; }
.capture-risk { position: absolute; top: 8px; right: 8px; }
.capture-card-body { padding: 10px; }
.capture-card-body > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 7px; }
.capture-card-body p { min-height: 30px; margin: 4px 0 8px; color: var(--text-secondary); font-size: 10px; }
.capture-card-body dl { display: grid; grid-template-columns: 64px 1fr; gap: 4px 7px; margin: 0; }
.capture-card-body dt { color: var(--text-muted); font-size: 9px; }
.capture-card-body dd { min-width: 0; margin: 0; overflow: hidden; color: #334056; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.capture-card-body footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; padding-top: 8px; border-top: 1px solid #edf0f4; }
.nearby-house-list { display: grid; }
.nearby-house-list button { min-height: 52px; display: flex; align-items: center; gap: 9px; padding: 8px 10px; border: 0; border-bottom: 1px solid #edf0f4; background: #fff; text-align: left; }
.nearby-house-list button > svg { width: 17px; height: 17px; color: var(--primary); }
.nearby-house-list button > span { min-width: 0; flex: 1; }
.nearby-house-list strong, .nearby-house-list small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nearby-house-list strong { font-size: 10px; }
.nearby-house-list small { color: var(--text-muted); font-size: 9px; }

.relation-workbench { border: 1px solid var(--border); border-radius: var(--radius); background: #fff; }
.relation-summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-bottom: 1px solid var(--border); }
.relation-summary > div { min-width: 0; padding: 10px; border-right: 1px solid var(--border); }
.relation-summary > div:last-child { border-right: 0; }
.relation-summary span, .relation-summary strong, .relation-summary small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.relation-summary span { color: var(--text-muted); font-size: 9px; }
.relation-summary strong { margin: 2px 0; font-size: 12px; }
.relation-summary small { color: var(--text-secondary); font-size: 8px; }
.relation-canvas { min-height: 450px; display: grid; grid-template-columns: 190px 52px 210px minmax(420px, 1fr); align-items: center; gap: 10px; padding: 16px; background: #f8fafc; }
.relation-column, .relation-branches section { min-width: 0; display: grid; gap: 7px; align-content: center; }
.relation-column h3, .relation-branches h3 { margin: 0 0 2px; color: var(--text-muted); font-size: 9px; font-weight: 600; }
.relation-arrow { display: grid; place-items: center; gap: 4px; color: var(--primary); }
.relation-arrow svg { width: 24px; height: 24px; }
.relation-arrow span { font-size: 8px; }
.relation-branches { display: grid; grid-template-columns: repeat(3, minmax(130px, 1fr)); gap: 10px; }
.relation-branches section { padding-left: 10px; border-left: 1px dashed #b9c7d8; }
.relation-node { min-width: 0; min-height: 50px; display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 7px; padding: 7px; border: 1px solid #dfe4ea; border-left: 3px solid #7890ae; border-radius: 4px; background: #fff; }
.relation-node.operator { border-left-color: #2878e8; }
.relation-node.house { border-left-color: #18a058; }
.relation-node.person { border-left-color: #845ec2; }
.relation-node.device { border-left-color: #008c95; }
.relation-node.case { border-left-color: var(--danger); }
.relation-node.capture { border-left-color: var(--orange); }
.relation-node > svg { width: 18px; height: 18px; color: var(--text-secondary); }
.relation-node div { min-width: 0; }
.relation-node strong, .relation-node small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.relation-node strong { font-size: 9px; }
.relation-node small { color: var(--text-muted); font-size: 8px; }
.graph-house-select { min-width: 380px; max-width: 580px; }
.hash-cell { display: inline-block; max-width: 170px; overflow: hidden; color: #42516a; font: 9px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; text-overflow: ellipsis; vertical-align: middle; }

.special-action-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.special-action-list article { border: 1px solid var(--border); border-radius: var(--radius); background: #fff; }
.special-action-list header { display: flex; justify-content: space-between; gap: 10px; padding: 11px; border-bottom: 1px solid var(--border); }
.special-action-list h2 { margin: 0; font-size: 14px; }
.special-action-list p { margin: 2px 0 0; color: var(--text-muted); font-size: 9px; }
.special-action-period { display: flex; align-items: center; gap: 6px; padding: 9px 11px; color: var(--text-secondary); font-size: 9px; }
.special-action-period svg { width: 14px; height: 14px; }
.special-action-metrics { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid #edf0f4; border-bottom: 1px solid #edf0f4; }
.special-action-metrics > div { min-width: 0; padding: 8px; border-right: 1px solid #edf0f4; }
.special-action-metrics > div:last-child { border-right: 0; }
.special-action-metrics span, .special-action-metrics strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.special-action-metrics span { color: var(--text-muted); font-size: 8px; }
.special-action-metrics strong { font-size: 13px; }
.special-action-list dl { display: grid; grid-template-columns: 68px 1fr; gap: 6px 9px; margin: 0; padding: 11px; }
.special-action-list dt { color: var(--text-muted); font-size: 9px; }
.special-action-list dd { margin: 0; color: var(--text-secondary); font-size: 9px; overflow-wrap: anywhere; }
.v3-platform-banner { min-height: 62px; display: flex; align-items: center; gap: 12px; margin-bottom: 10px; padding: 10px 12px; border: 1px solid #b9e3d0; border-left: 4px solid var(--success); border-radius: var(--radius); background: #f5fcf8; }
.v3-platform-banner > div { min-width: 0; flex: 1; display: flex; align-items: center; gap: 10px; }
.v3-platform-banner .brand-mark { background: #137a43; }
.v3-platform-banner strong, .v3-platform-banner small { display: block; }
.v3-platform-banner strong { font-size: 13px; }
.v3-platform-banner small { color: var(--text-muted); font-size: 9px; }
.v3-platform-banner > span { color: var(--text-secondary); font-size: 10px; }
.connector-mode-note { display: flex; align-items: flex-start; gap: 8px; padding: 10px; border: 1px solid #b9e3d0; border-radius: 4px; background: #f5fcf8; color: #2f5f49; font-size: 10px; }
.connector-mode-note svg { width: 16px; height: 16px; flex: 0 0 auto; }

.four-real-notice { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding: 10px; border-left: 3px solid var(--success); background: #f5fcf8; }
.four-real-notice > svg { width: 22px; height: 22px; color: var(--success); }
.four-real-notice strong, .four-real-notice span { display: block; }
.four-real-notice strong { font-size: 12px; }
.four-real-notice span { color: var(--text-secondary); font-size: 9px; }
.public-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.public-form-grid .full { grid-column: 1 / -1; }
.public-form-actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; }
.public-language-toggle { margin-left: auto; flex: 0 0 auto; }
.file-import-row { display: flex; align-items: end; gap: 10px; }
.file-import-row .grow { min-width: 0; flex: 1; }
.file-import-row .btn { min-height: 34px; white-space: nowrap; }
.import-divider { display: flex; align-items: center; gap: 10px; color: var(--text-muted); font-size: 9px; }
.import-divider::before, .import-divider::after { content: ""; height: 1px; flex: 1; background: var(--border); }
.field input[type="range"] { min-height: 24px; padding: 0; border: 0; accent-color: var(--primary); }
.demographic-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.demographic-panel { min-width: 0; }
.demographic-bars { display: grid; gap: 8px; padding: 11px; }
.demographic-bars > div { display: grid; grid-template-columns: minmax(54px, 1fr) minmax(42px, 1.3fr) 24px; align-items: center; gap: 6px; }
.demographic-bars span { overflow: hidden; color: var(--text-secondary); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.demographic-bars strong { text-align: right; font-size: 10px; }
.demographic-bars progress { width: 100%; height: 6px; accent-color: var(--primary); }
.demographic-bars .protected-group progress { accent-color: var(--orange); }
.capability-dots { display: flex; flex-wrap: wrap; gap: 3px; min-width: 78px; }
.capability-dots span { width: 23px; height: 23px; display: grid; place-items: center; border: 1px solid #d7dde6; border-radius: 3px; background: #f4f6f8; color: var(--text-muted); font-size: 8px; }
.capability-dots span.on { border-color: #9bd5b6; background: #eaf8f0; color: #137a43; }
.template-library { display: grid; gap: 8px; }
.template-library article { padding: 10px; border: 1px solid var(--border); border-left: 3px solid var(--primary); border-radius: 4px; background: #fff; }
.template-library header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.template-library header strong, .template-library header small { display: block; }
.template-library header strong { font-size: 11px; }
.template-library header small, .template-library footer { color: var(--text-muted); font-size: 8px; }
.template-library h3 { margin: 9px 0 4px; font-size: 12px; }
.template-library p { margin: 0 0 8px; color: var(--text-secondary); font-size: 9px; line-height: 1.55; }
.publicity-delivery-list .detail-list-row { align-items: center; }
.publicity-delivery-list .detail-list-row > svg { color: var(--orange); }
.self-service-link { display: flex; align-items: flex-start; gap: 9px; margin-top: 8px; padding: 9px; border: 1px solid #b9e3d0; border-radius: 4px; background: #f5fcf8; }
.self-service-link > svg { width: 20px; height: 20px; color: var(--success); }
.self-service-link strong, .self-service-link a, .self-service-link small { display: block; }
.self-service-link strong { font-size: 10px; }
.self-service-link a { margin: 2px 0; color: var(--primary); font-size: 9px; overflow-wrap: anywhere; }
.self-service-link small { color: var(--text-secondary); font-size: 8px; }
.bed-registry { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.bed-registry-item { min-width: 0; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 7px; padding: 8px; border: 1px solid var(--border); border-left: 3px solid var(--success); border-radius: 4px; background: #fff; }
.bed-registry-item.occupied { border-left-color: var(--orange); background: #fffbf3; }
.bed-registry-item > svg { width: 17px; height: 17px; color: var(--text-secondary); }
.bed-registry-item strong, .bed-registry-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bed-registry-item strong { font-size: 9px; }
.bed-registry-item small { color: var(--text-muted); font-size: 8px; }
.identity-result { display: flex; align-items: center; gap: 9px; padding: 10px; border: 1px solid var(--border); border-radius: 4px; }
.identity-result.success { border-color: #b9e3d0; background: #f5fcf8; color: #137a43; }
.identity-result.failed { border-color: #ffc8ca; background: var(--danger-soft); color: #bd3035; }
.identity-result > svg { width: 20px; height: 20px; }
.identity-result strong, .identity-result small { display: block; }
.identity-result strong { font-size: 11px; }
.identity-result small { color: var(--text-secondary); font-size: 9px; }
.registration-success.status > svg { color: var(--primary); }
.status-tag.manual_required, .status-tag.access_pending, .status-tag.recheck_required { color: #8a5a00; background: #fff5dc; border-color: #f1d596; }
.status-tag.revoke_failed, .status-tag.escalated { color: #bd3035; background: #fff0f0; border-color: #ffc8ca; }
.status-tag.acknowledged, .status-tag.posted, .status-tag.reviewed, .status-tag.auto_matched { color: #137a43; background: #eaf8f0; border-color: #bce7ce; }

.mobile-bottom-nav { display: none; }
.mobile-native-header { min-height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 2px; }
.mobile-native-header h1 { margin: 0; font-size: 20px; line-height: 1.25; }
.mobile-native-header p { margin: 2px 0 0; color: var(--text-muted); font-size: 10px; }
.mobile-header-actions { display: flex; gap: 5px; }
.mobile-workspace-title > div:first-child { min-width: 0; flex: 1; }
.mobile-workspace-title > .mobile-header-actions { flex: none; gap: 4px; }
.mobile-account-profile { min-height: 78px; display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding: 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-subtle); }
.mobile-account-avatar { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--primary); color: #fff; font-size: 18px; font-weight: 680; }
.mobile-account-profile strong, .mobile-account-profile small { display: block; }
.mobile-account-profile strong { font-size: 14px; }
.mobile-account-profile small { margin-top: 2px; color: var(--text-muted); font-size: 10px; }
.mobile-account-actions { display: grid; gap: 8px; margin-top: 12px; }
.mobile-select-list, .mobile-lease-list { display: grid; gap: 0; }
.mobile-select-list > button, .mobile-lease-main { width: 100%; min-height: 70px; display: grid; grid-template-columns: 38px minmax(0, 1fr) 18px; align-items: center; gap: 9px; padding: 10px 2px; border: 0; border-bottom: 1px solid #e7eaf0; background: transparent; text-align: left; }
.mobile-select-list > button > span:nth-child(2), .mobile-lease-main > span:nth-child(2) { min-width: 0; }
.mobile-select-list strong, .mobile-select-list small, .mobile-lease-main strong, .mobile-lease-main small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mobile-select-list strong, .mobile-lease-main strong { font-size: 12px; }
.mobile-select-list small, .mobile-lease-main small { margin-top: 2px; color: var(--text-muted); font-size: 9px; }
.mobile-list-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: #edf4ff; color: var(--primary); }
.mobile-list-icon svg { width: 18px; height: 18px; }
.mobile-lease-card { border-bottom: 8px solid #f1f3f6; background: #fff; }
.mobile-lease-card footer { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 2px; }
.mobile-inline-actions { display: flex; justify-content: flex-end; gap: 5px; }
.mobile-filter-tabs { display: flex; gap: 7px; margin: 2px 0 10px; padding-bottom: 2px; overflow-x: auto; scrollbar-width: none; }
.mobile-filter-tabs::-webkit-scrollbar { display: none; }
.mobile-filter-tabs button { min-width: max-content; min-height: 34px; padding: 0 13px; border: 1px solid var(--border); border-radius: 17px; background: #fff; color: var(--text-secondary); font-size: 10px; }
.mobile-filter-tabs button.active { border-color: var(--primary); background: #edf4ff; color: var(--primary); font-weight: 650; }
.mobile-fab { position: fixed; right: max(18px, calc((100vw - 500px) / 2 + 18px)); bottom: calc(78px + env(safe-area-inset-bottom)); z-index: 48; width: 52px; height: 52px; display: grid; place-items: center; border: 0; border-radius: 50%; box-shadow: 0 6px 18px rgba(21,94,239,.28); background: var(--primary); color: #fff; }
.mobile-fab svg { width: 22px; height: 22px; }

body[data-portal="operator"] { --primary: #0f5c51; --primary-hover: #0a443c; --primary-soft: #e7f4f1; }
body[data-portal="police-mobile"] { --primary: #174f78; --primary-hover: #113b5a; --primary-soft: #e8f1f7; }
body[data-portal="operator"], body[data-portal="police-mobile"] { background: #e9edf2; overscroll-behavior-y: none; }
body[data-portal="operator"] .app-shell, body[data-portal="police-mobile"] .app-shell { position: relative; width: 100%; max-width: 520px; height: 100dvh; display: block; margin: 0 auto; overflow: hidden; background: #f5f6f8; box-shadow: 0 0 32px rgba(31,42,61,.14); }
body[data-portal="operator"] .sidebar, body[data-portal="police-mobile"] .sidebar,
body[data-portal="operator"] .topbar, body[data-portal="police-mobile"] .topbar { display: none !important; }
body[data-portal="operator"] .workspace, body[data-portal="police-mobile"] .workspace { width: 100%; height: 100dvh; display: block; overflow: hidden; }
body[data-portal="operator"] .main-area, body[data-portal="police-mobile"] .main-area { width: 100%; height: 100dvh; padding: env(safe-area-inset-top) 12px calc(84px + env(safe-area-inset-bottom)); overflow-x: hidden; overflow-y: auto; background: #f5f6f8; -webkit-overflow-scrolling: touch; }
body[data-portal="operator"] .page, body[data-portal="police-mobile"] .page { width: 100%; max-width: none; padding: 0; }
body[data-portal="operator"] .mobile-workspace-page, body[data-portal="police-mobile"] .mobile-workspace-page { max-width: none; }
body[data-portal="operator"] .mobile-workspace-title, body[data-portal="police-mobile"] .mobile-workspace-title,
body[data-portal="operator"] .mobile-native-header, body[data-portal="police-mobile"] .mobile-native-header { position: sticky; top: calc(-1 * env(safe-area-inset-top)); z-index: 20; min-height: 68px; margin: 0 -12px 10px; padding: calc(10px + env(safe-area-inset-top)) 14px 10px; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: rgba(255,255,255,.97); backdrop-filter: blur(12px); }
body[data-portal="operator"] .mobile-workspace-title h1, body[data-portal="police-mobile"] .mobile-workspace-title h1 { font-size: 18px; }
body[data-portal="operator"] .mobile-summary-grid, body[data-portal="police-mobile"] .mobile-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
body[data-portal="operator"] .governance-metric-grid, body[data-portal="police-mobile"] .governance-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body[data-portal="operator"] .governance-metric, body[data-portal="police-mobile"] .governance-metric { min-height: 76px; padding: 10px; border-radius: 6px; }
body[data-portal="operator"] .mobile-command-band, body[data-portal="police-mobile"] .mobile-command-band { gap: 7px; border: 0; background: transparent; }
body[data-portal="operator"] .mobile-command-band button, body[data-portal="police-mobile"] .mobile-command-band button { min-height: 68px; padding: 7px 3px; border: 1px solid var(--border); border-radius: 6px; background: #fff; }
body[data-portal="operator"] .mobile-section, body[data-portal="police-mobile"] .mobile-section,
body[data-portal="operator"] .mobile-message-panel, body[data-portal="police-mobile"] .mobile-message-panel { margin: 0 -12px 10px; border-width: 1px 0; border-radius: 0; }
body[data-portal="operator"] .mobile-task-list article, body[data-portal="police-mobile"] .mobile-task-list article { min-height: 76px; padding: 11px 12px; }
body[data-portal="operator"] .mobile-task-list article, body[data-portal="police-mobile"] .mobile-task-list article { align-items: flex-start; flex-direction: column; }
body[data-portal="operator"] .mobile-task-actions, body[data-portal="police-mobile"] .mobile-task-actions { width: 100%; justify-content: flex-end; }
body[data-portal="operator"] .operator-house-list, body[data-portal="police-mobile"] .operator-house-list { grid-template-columns: 1fr; }
body[data-portal="operator"] .operator-house-list article, body[data-portal="police-mobile"] .operator-house-list article { border-right: 0; }
body[data-portal="operator"] .page-head, body[data-portal="police-mobile"] .page-head { align-items: flex-start; flex-direction: column; }
body[data-portal="operator"] .page-actions, body[data-portal="police-mobile"] .page-actions { width: 100%; }
body[data-portal="operator"] .detail-grid.two, body[data-portal="police-mobile"] .detail-grid.two { grid-template-columns: 88px minmax(0, 1fr); }
body[data-portal="operator"] .qr-preview, body[data-portal="police-mobile"] .qr-preview { grid-template-columns: 96px minmax(0, 1fr); }
body[data-portal="operator"] .qr-preview img, body[data-portal="police-mobile"] .qr-preview img { width: 96px; height: 96px; }
body[data-portal="operator"] button, body[data-portal="police-mobile"] button,
body[data-portal="operator"] .btn, body[data-portal="police-mobile"] .btn { touch-action: manipulation; }
body[data-portal="operator"] .btn:not(.small):not(.icon), body[data-portal="police-mobile"] .btn:not(.small):not(.icon) { min-height: 44px; }
body[data-portal="operator"] .capture-evidence-grid, body[data-portal="police-mobile"] .capture-evidence-grid { grid-template-columns: 1fr; gap: 9px; }
body[data-portal="operator"] .capture-evidence-card, body[data-portal="police-mobile"] .capture-evidence-card { border-radius: 6px; }
body[data-portal="operator"] .capture-visual, body[data-portal="police-mobile"] .capture-visual { aspect-ratio: 16 / 9; }
body[data-portal="operator"] .message-center-list article, body[data-portal="police-mobile"] .message-center-list article { min-height: 72px; padding: 11px 12px; }
body[data-portal="operator"] .mobile-bottom-nav, body[data-portal="police-mobile"] .mobile-bottom-nav { position: fixed; left: 50%; bottom: 0; z-index: 60; width: 100%; max-width: 520px; min-height: calc(64px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end; padding: 5px 6px env(safe-area-inset-bottom); transform: translateX(-50%); border-top: 1px solid #dfe3e9; background: rgba(255,255,255,.98); box-shadow: 0 -4px 14px rgba(31,42,61,.06); backdrop-filter: blur(14px); }
.mobile-bottom-nav button { min-width: 0; min-height: 54px; display: grid; place-items: center; align-content: center; gap: 2px; padding: 0; border: 0; background: transparent; color: #737e8f; }
.mobile-bottom-nav button span { width: 30px; height: 28px; display: grid; place-items: center; border-radius: 15px; }
.mobile-bottom-nav button svg { width: 20px; height: 20px; }
.mobile-bottom-nav button small { font-size: 9px; }
.mobile-bottom-nav button.active { color: var(--primary); font-weight: 650; }
.mobile-bottom-nav button.active span { background: var(--primary-soft); }
.mobile-bottom-nav button.primary-action span { width: 44px; height: 44px; margin-top: -14px; border-radius: 50%; box-shadow: 0 5px 13px rgba(21,94,239,.25); background: var(--primary); color: #fff; }
.mobile-bottom-nav button.primary-action small { margin-top: -1px; color: var(--primary); font-weight: 650; }
body[data-portal="operator"] .detail-drawer, body[data-portal="police-mobile"] .detail-drawer { inset: 0; width: 100%; max-width: 520px; height: 100dvh; margin: 0 auto; border-left: 0; }
body[data-portal="operator"] .drawer-header, body[data-portal="police-mobile"] .drawer-header { padding-top: calc(12px + env(safe-area-inset-top)); }
body[data-portal="operator"] .drawer-body, body[data-portal="police-mobile"] .drawer-body { padding-bottom: calc(90px + env(safe-area-inset-bottom)); }
body[data-portal="operator"] .drawer-footer, body[data-portal="police-mobile"] .drawer-footer { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
body[data-portal="operator"] .modal-backdrop, body[data-portal="police-mobile"] .modal-backdrop { align-items: stretch; padding: 0; }
body[data-portal="operator"] .modal, body[data-portal="police-mobile"] .modal { width: 100%; max-width: 520px !important; height: 100dvh; max-height: 100dvh; margin: 0 auto; border-radius: 0; }
body[data-portal="operator"] .modal-header, body[data-portal="police-mobile"] .modal-header { padding-top: calc(12px + env(safe-area-inset-top)); }
body[data-portal="operator"] .modal-body, body[data-portal="police-mobile"] .modal-body { padding-bottom: 24px; }
body[data-portal="operator"] .modal-footer, body[data-portal="police-mobile"] .modal-footer { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
body[data-portal="operator"] .form-grid, body[data-portal="police-mobile"] .form-grid { grid-template-columns: 1fr; }
body[data-portal="operator"] .field.full, body[data-portal="police-mobile"] .field.full { grid-column: auto; }
body[data-portal="operator"] .toast-region, body[data-portal="police-mobile"] .toast-region { bottom: calc(72px + env(safe-area-inset-bottom)); left: 12px; right: 12px; }

@media (max-width: 1280px) {
  :root { --sidebar-width: 214px; --drawer-width: 370px; }
  .topbar { grid-template-columns: minmax(150px,.8fr) minmax(420px,1.4fr) minmax(160px,.8fr); }
  .risk-strip { grid-template-columns: repeat(3, 1fr); }
  .risk-metric:nth-child(3) { border-right: 0; }
  .risk-metric:nth-child(-n+3) { border-bottom: 1px solid var(--border); }
  .police-overview-grid { grid-template-columns: 1fr; }
  .jurisdiction-map { min-height: 270px; }
  .three-band { grid-template-columns: 1fr; }
  .governance-metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .building-profile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .capture-evidence-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .relation-canvas { grid-template-columns: 160px 42px 180px minmax(360px, 1fr); }
}

@media (max-width: 980px) {
  html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
  body { overflow-y: auto; }
  .app-shell { display: block; width: 100%; max-width: 100%; height: auto; min-height: 100dvh; }
  .sidebar { position: fixed; inset: 0 auto 0 0; width: min(280px, 86vw); transform: translateX(-102%); transition: transform .2s ease; box-shadow: 12px 0 32px rgba(31,42,61,.2); }
  .sidebar.open { transform: translateX(0); }
  .sidebar-close, .mobile-menu { display: inline-grid; }
  .workspace { width: 100%; max-width: 100%; min-width: 0; min-height: 100dvh; height: auto; overflow-x: hidden; }
  .topbar { position: sticky; top: 0; z-index: 40; width: 100%; max-width: 100%; min-width: 0; grid-template-columns: minmax(0,1fr) auto; }
  .topbar-center { display: none; }
  .main-area { width: 100%; max-width: 100%; min-width: 0; overflow: visible; }
  .page, .panel, .police-overview-grid, .business-grid, .split-workbench, .three-band, .risk-strip, .stat-row { width: 100%; max-width: 100%; min-width: 0; }
  .table-wrap, .data-toolbar, .pagination { width: 100%; max-width: 100%; min-width: 0; }
  .business-grid, .split-workbench { grid-template-columns: minmax(0, 1fr); }
  .foundation-grid { grid-template-columns: 1fr; }
  .governance-overview-layout, .governance-bottom-grid, .population-layout { grid-template-columns: 1fr; }
  .demographic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .relation-canvas { grid-template-columns: 1fr; align-items: stretch; }
  .relation-arrow { grid-template-columns: auto auto; justify-content: center; }
  .relation-arrow svg { transform: rotate(90deg); }
  .relation-branches { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .relation-branches section { padding: 8px 0 0; border-top: 1px dashed #b9c7d8; border-left: 0; }
  .capture-evidence-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hierarchy { min-height: 0; max-height: 300px; }
  .stat-row { grid-template-columns: repeat(2,1fr); }
  .stat-item { border-bottom: 1px solid var(--border); }
  .stat-item:nth-child(2n) { border-right: 0; }
  .login-screen { grid-template-columns: 1fr; }
  .login-brand-panel { display: none; }
  .login-form { margin-top: 14vh; }
}

@media (max-width: 680px) {
  .topbar { padding: 0 10px; }
  .user-copy { display: none; }
  .main-area { padding: 10px; }
  .page-head { align-items: flex-start; flex-direction: column; }
  .page-actions { width: 100%; }
  .page-actions .btn { flex: 1; }
  .risk-strip { grid-template-columns: repeat(2, 1fr); }
  .risk-metric { border-bottom: 1px solid var(--border); }
  .risk-metric:nth-child(2n) { border-right: 0; }
  .risk-metric:nth-last-child(-n+2) { border-bottom: 0; }
  .map-workbench { grid-template-columns: 1fr; }
  .area-tree { display: none; }
  .focus-row { grid-template-columns: 42px minmax(130px,1fr) 68px; }
  .focus-reason, .focus-row .assignee { display: none; }
  .form-grid, .checkbox-grid { grid-template-columns: 1fr; }
  .field.full { grid-column: auto; }
  .modal-backdrop { padding: 8px; }
  .modal { max-height: calc(100dvh - 16px); }
  .detail-grid.two { grid-template-columns: 80px 1fr; }
  .qr-preview { grid-template-columns: 100px 1fr; }
  .qr-preview img { width: 100px; height: 100px; }
  .three-band { gap: 8px; }
  .architecture-band { grid-template-columns: 1fr; }
  .architecture-band > svg { transform: rotate(90deg); }
  .public-registration-shell { padding: 10px 8px 28px; }
  .public-registration-card { padding: 14px 12px; }
  .registration-steps { overflow: hidden; }
  .governance-metric-grid, .governance-metric-grid.compact, .mobile-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .governance-metric { min-height: 76px; }
  .mobile-command-band { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mobile-command-band.six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mobile-command-band.six button:nth-child(3n) { border-right: 0; }
  .mobile-command-band.six button:nth-child(-n+3) { border-bottom: 1px solid var(--border); }
  .mobile-command-band button { min-width: 0; padding: 6px 2px; }
  .mobile-command-band button span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-task-list article { align-items: flex-start; flex-direction: column; }
  .mobile-task-actions { width: 100%; justify-content: flex-end; }
  .operator-house-list, .building-profile-grid, .capture-evidence-grid, .special-action-list { grid-template-columns: 1fr; }
  .operator-house-list article { border-right: 0; }
  .operator-house-list article:nth-last-child(-n+2) { border-bottom: 1px solid #edf0f4; }
  .operator-house-list article:last-child { border-bottom: 0; }
  .relation-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .relation-summary > div { border-bottom: 1px solid var(--border); }
  .relation-summary > div:nth-child(2n) { border-right: 0; }
  .relation-branches { grid-template-columns: 1fr; }
  .graph-house-select { width: 100%; min-width: 0; max-width: 100%; }
  .public-form-grid, .public-form-actions { grid-template-columns: 1fr; }
  .bed-registry { grid-template-columns: 1fr; }
  .file-import-row { align-items: stretch; flex-direction: column; }
  .demographic-grid { grid-template-columns: 1fr; }
  .public-form-grid .full { grid-column: auto; }
  .building-profile-card dl { grid-template-columns: repeat(2, 1fr); }
  .building-profile-card dl > div:nth-child(3n) { border-right: 1px solid #edf0f4; }
  .building-profile-card dl > div:nth-child(2n) { border-right: 0; }
  .trend-bars { height: 180px; gap: 4px; padding-inline: 8px; }
  .trend-bars i { width: 6px; }
  .message-center-list article { align-items: flex-start; }
  .v3-platform-banner { align-items: flex-start; flex-wrap: wrap; }
  .v3-platform-banner > span { width: 100%; }
}

@media print {
  body { overflow: visible; background: #fff; }
  .sidebar, .topbar, .page-actions, .data-toolbar, .drawer-footer, .modal-backdrop, .toast-region { display: none !important; }
  .app-shell, .workspace { display: block; height: auto; }
  .main-area { overflow: visible; padding: 0; }
  .detail-drawer { position: static; width: 100%; box-shadow: none; border: 0; }
}