/* Sổ dân cư · UI refresh (v2)
   Presentation-only layer. Excel cell colors/styles still come from the original workbook.
   Local SVG icon sprite: /static/icons.svg · no external requests, fonts or frameworks.
*/
:root {
  --navy: #183c58;
  --navy-dark: #0e293f;
  --blue: #26617f;
  --green: #0b806e;
  --green-soft: #e5f5ef;
  --sky: #eef7fb;
  --ink: #21364b;
  --muted: #677e90;
  --border: #e0e8ee;
  --bg: #f5f7fa;
  --white: #fff;
  --shadow: 0 4px 22px rgba(24, 50, 75, .045);
  --shadow-hover: 0 12px 35px rgba(20, 50, 76, .105);
  --radius: 16px;
  --sidebar-width: 264px;
  color-scheme: light;
  font-family: 'Segoe UI Variable', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
}
html {scroll-padding-top: 22px}
body {background: var(--bg); color: var(--ink); letter-spacing: -.008em; min-width: 320px}
button, input, select {font-family: inherit}
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible {outline: 3px solid #5cb4a4; outline-offset: 3px}
h1 {font-size: clamp(29px, 2.35vw, 36px); letter-spacing: -.85px; font-weight: 775; line-height: 1.22}
h2 {font-size: 19px; font-weight: 750; letter-spacing: -.45px}
.ui-icon {display: inline-block; width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.18em}
.button .ui-icon {width: 18px; height: 18px}
.button {min-height: 46px; border-radius: 10px; gap: 9px; padding: 11px 17px; font-size: 14px; font-weight: 720; letter-spacing: -.005em; transition: background .18s, border-color .18s, color .18s, box-shadow .18s, transform .18s}
.button:hover:not(:disabled) {transform: translateY(-1px)}
.button:disabled {opacity: .6; cursor: not-allowed; transform: none}
.button.primary {background: #087b70; color: #fff; box-shadow: 0 3px 9px rgba(8, 121, 110, .12)}
.button.primary:hover:not(:disabled) {background: #08685f; box-shadow: 0 6px 16px rgba(8, 121, 110, .18)}
.button.secondary {color: var(--navy); border-color: #d3e0e7; box-shadow: 0 1px 1px rgba(24, 50, 75, .02)}
.button.outline {color: #22627b; background: #fff; border-color: #bfd5df}
.button.outline:hover:not(:disabled), .button.secondary:hover:not(:disabled) {background: #f0f8fa; border-color: #8fbab7}
.button.ghost {background: #f2f6f9; color: #516b7e}
.button.ghost:hover {background: #e9f0f5}
.button.danger {border-color: #f0d2d5; background: #fff2f1; color: #b33d41}
.button.danger:hover {background: #ffebe9}
.button.small {min-height: 39px; padding: 7px 13px}
.link-button {display: inline-flex; align-items: center; gap: 6px; color: var(--green); text-decoration: none; border-radius: 8px; white-space: nowrap}
.link-button .ui-icon {width: 16px; height: 16px}
.link-button:hover {text-decoration: underline}
.panel {border-color: var(--border); border-radius: var(--radius); box-shadow: var(--shadow)}
.eyebrow {font-size: 11px; color: var(--green); font-weight: 800; letter-spacing: 1.65px; margin-bottom: 11px}
.muted {color: var(--muted)}
.subtitle {color: #697f90; font-size: 15px; line-height: 1.65; max-width: 670px}
/* Application shell */
.app-layout {display: grid; grid-template-columns: var(--sidebar-width) minmax(0,1fr); min-height: 100vh; align-items: stretch}
.app-sidebar {background: #102a40; color: #e8f1f6; padding: 28px 17px 24px; display: flex; flex-direction: column; min-width: 0; position: sticky; top: 0; height: 100vh; z-index: 32; overflow-y: auto; overflow-x: hidden; border-right: 1px solid #234157}
.sidebar-brand {padding: 0 9px 22px; gap: 12px}
.sidebar-brand .brand-mark {width: 48px; height: 48px; background: linear-gradient(145deg,#17a493,#0a736e); box-shadow: 0 6px 18px rgba(5, 18, 30,.15); border: 1px solid rgba(255,255,255,.1); border-radius: 13px}
.sidebar-brand .brand-mark .ui-icon {width: 26px; height: 26px; stroke-width: 1.75}
.sidebar-brand strong {color: white; font-size: 19px; letter-spacing: -.6px}
.sidebar-brand small {color: #9db1c0; font-size: 9px; font-weight: 750; letter-spacing: 1.1px; margin-top: 4px}
.sidebar-divider {height: 1px; background: #264358; margin: 0 9px 29px}
.sidebar-nav-label {font-size: 10px; letter-spacing: 1.2px; color: #86a5b7; font-weight: 800; padding: 0 13px; margin-bottom: 13px}
.app-sidebar .main-nav {display: flex; flex-direction: column; width: 100%; height: auto; gap: 6px; align-items: stretch}
.app-sidebar .nav-tab {width: 100%; color: #a9bdca; border: 1px solid transparent; border-radius: 11px; padding: 14px 12px; min-height: 51px; gap: 12px; text-align: left; font-size: 14px; font-weight: 650; justify-content: flex-start; transition: background .18s,color .18s,border .18s}
.app-sidebar .nav-tab>.ui-icon:first-child {width: 19px; height: 19px}
.app-sidebar .nav-tab span {flex:1; white-space:nowrap}
.app-sidebar .nav-tab .nav-chevron {width: 16px; height: 16px; opacity:.5}
.app-sidebar .nav-tab:hover {background: rgba(255,255,255,.065); color: #fff}
.app-sidebar .nav-tab.selected {background: #214858; color: #fff; border-color: #346371; font-weight: 750}
.app-sidebar .nav-tab.selected:after {display: none}
.app-sidebar .nav-tab.selected:before {content: ''; position: absolute; left: 0; top: 13px; height: calc(100% - 26px); width: 3px; background: #43c5ab; border-radius: 0 4px 4px 0}
.app-sidebar .nav-tab.selected>.ui-icon:first-child {color: #70e0c6}
.sidebar-bottom {margin-top: auto; padding-top: 24px}
.sidebar-info-card {background: linear-gradient(145deg,rgba(39,90,101,.7),rgba(21,66,83,.65)); border: 1px solid #315366; border-radius: 15px; padding: 17px 16px; color: #e5f1f1}
.sidebar-info-icon {width: 34px; height: 34px; display:grid;place-items:center; background:rgba(100,225,194,.14); color: #8cf0d2; border-radius:10px; margin-bottom: 13px}
.sidebar-info-icon .ui-icon {width: 19px; height:19px}
.sidebar-info-card strong {font-size: 14px; color: #fff}
.sidebar-info-card p {font-size: 12px; line-height: 1.7; margin: 7px 0 0; color:#acc4ce}
.sidebar-version {font-size: 11px; color: #8ba8b9; display:flex;align-items:center;gap:7px; margin: 20px 5px 0}
.version-dot {height: 6px; width: 6px; background: #63d7bb; border-radius: 50%}
.app-main {min-width: 0; display: flex; flex-direction: column}
.topbar {position: sticky; top:0; z-index: 25; background: rgba(255,255,255,.96); border-bottom:1px solid #e3ebf1; box-shadow:0 2px 8px rgba(15,35,55,.025); backdrop-filter: blur(14px)}
.topbar-inner {max-width: none; margin:0; min-height: 78px; padding:0 clamp(22px,2.7vw,46px); gap: 16px}
.header-context {display: flex;flex-direction:column;gap:3px; min-width:0}
.header-context strong {font-size:16px;line-height:1.25;color: #20384e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.header-kicker {color:#7d90a0; font-size:10px; font-weight:800; letter-spacing:1.15px}
.header-kicker span {margin: 0 6px; color:#becbd2}
.header-right {gap: 17px}
.header-private {display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:750;color:#0c806f;white-space:nowrap}
.header-private .ui-icon {width:17px;height:17px}
.header-role {display:flex;align-items:center;gap:9px; color:#3c5368;font-weight:750;font-size:13px;padding-left:16px;border-left:1px solid var(--border)}
.role-avatar {display:grid;place-items:center;width:35px;height:35px;border-radius:50%;background:#e9f3f0;color:#117969;font-weight:850;font-size:11px}
.header-right .button .ui-icon {width:16px;height:16px}
.page-container {width:100%;max-width: 1630px; margin:0 auto; padding: 34px clamp(22px,2.7vw,46px) 60px; flex:1}
.page-title-row {margin-bottom:25px; align-items:center; gap: 22px}
.page-title-row .title-actions {align-self:center}
.title-actions .button {box-shadow:0 3px 9px rgba(31,57,78,.03)}
/* Summary cards */
.stat-grid {gap:14px;margin-bottom:23px}
.stat-card {position:relative; border:1px solid #e3ebf1; min-height:121px; padding:21px 20px 19px 22px; border-radius:15px; background:#fff;overflow:hidden;transition:transform .18s,box-shadow .18s}
.stat-card:after {content:""; position:absolute;left:22px;right:22px;bottom:0;height:2px;background:#e4edf4;border-radius:3px}
.stat-card:nth-child(2):after {background:#d6ece8}
.stat-card:nth-child(3):after {background:#e9e6f5}
.stat-card:nth-child(4):after {background:#faebdb}
.stat-card:hover {transform:translateY(-2px);box-shadow:var(--shadow-hover)}
.stat-card .stat-label {font-size:13px;line-height:1.5;color:#6a8091;font-weight:680}
.stat-card .stat-count {font-size:34px;line-height:1.1;color:#1d3850;font-weight:795;letter-spacing:-1.45px;margin-top:12px}
.stat-icon {width:49px;height:49px; border-radius:13px;background:#eaf3fa; color:#28648a}
.stat-icon .ui-icon {width:23px;height:23px;stroke-width:1.8}
.stat-card:nth-child(2) .stat-icon {background:#e6f6ef;color:#10856d}
.stat-card:nth-child(3) .stat-icon {background:#f0ecfb;color:#7657b2}
.stat-card:nth-child(4) .stat-icon {background:#fff1e3;color:#bc7a31}
/* Main search and tab controls */
.filter-panel {padding:23px 25px 25px;margin-bottom:26px}
.section-line {margin-bottom:19px}
.section-line h2 {color:#233a50}
.form-field label, .field-label {font-weight:720;color:#4d6578;font-size:13px; margin-bottom:8px}
.control,.password-wrap input {height:49px;background:#fff;border-color:#d8e3ea;border-radius:10px;font-size:15px; color:#263d52;transition: border .16s,box-shadow .16s}
.control:hover {border-color:#b6ccd6}
.control:focus {border-color:#159284;box-shadow:0 0 0 3px rgba(35,165,143,.105);outline:none}
.control::placeholder {color:#95a4b1}
.search-field span {left:14px;top:14px;line-height:1;display:grid;place-items:center}
.search-field span .ui-icon {width:18px;height:18px}
.search-field input {padding-left:42px}
.results-heading {margin-bottom:16px}
.results-heading p {color:#7790a0}
.view-bar {border-radius:12px;padding:6px 7px; box-shadow:0 1px 5px rgba(20,55,70,.02);background:#fff}
.view-modes {gap:6px}
.view-mode {display:inline-flex;align-items:center;justify-content:center;gap:8px;color:#60788a;font-size:13px;font-weight:750;padding:10px 14px;min-height:43px}
.view-mode .ui-icon {width:17px;height:17px}
.view-mode.active {background:#e9f5f1;color:#0b7968;box-shadow: inset 0 0 0 1px #d0e9df}
.view-mode:not(.active):hover {background:#f1f6f9;color:#2d6577}
.sheet-hint {display:flex;align-items:center;gap:6px;color:#17816d;font-weight:670;margin-right:11px;font-size:12px}
.sheet-hint .ui-icon {width:16px;height:16px}
/* Address navigation and result cards */
.address-layout {grid-template-columns:245px minmax(0,1fr);gap:15px}
.address-sidebar {border-radius:14px;top:94px;border-color:#e0e9ee;padding:15px 11px;box-shadow:var(--shadow)}
.sidebar-title {font-size:11px;letter-spacing:1.1px;color:#7a8fa0;padding:8px 11px 13px}
.address-link {border-radius:9px;gap:8px;color:#4d677a;min-height:43px; padding:10px 11px}
.address-link.active {background:#e9f7f1;color:#0d7667;border-left:3px solid #16a082}
.address-link:hover {background:#f0f7f8}
.small-counter {background:#f0f5f7;color:#678397; font-weight:700}
.address-card {border-color:#e1eaf0;border-radius:14px;box-shadow:var(--shadow)}
.address-card.expanded {border-color:#b6d6d6;box-shadow:0 4px 20px rgba(23,88,87,.075)}
.address-toggle {padding:17px 19px}
.address-icon {width:42px;height:42px;border-radius:11px;background:#e8f4f4;color:#167b78;font-size:inherit}
.address-icon .ui-icon {width:21px;height:21px}
.address-primary {color:#1f4055;font-size:16px}
.address-secondary {color:#7a90a0}
.address-arrow {display:grid;place-items:center;font-size:0}
.address-arrow .ui-icon {width:19px;height:19px}
.count-pill {background:#e9f7ef;color:#11805f; border:1px solid #d5eee0; font-size:12px}
.table-toolbar {background:#f8fafc;border-top-color:#e5ebf0}
.table-toolbar p {font-size:12px}
.excel-full,.house-card {border-radius:14px}
.excel-title .ui-icon {width:19px;height:19px}
.house-card {box-shadow:var(--shadow)}
.house-head .house-title {display:inline-flex;gap:8px;align-items:center}
.house-head .house-title .ui-icon {width:18px;height:18px;color:#168278}
.card-actions .button .ui-icon {width:16px;height:16px}
.empty-result {border-radius:14px}
.empty-result .big {display:grid;place-items:center;margin:0 auto 14px;width:66px;height:66px;border-radius:18px;background:#eef6f7;color:#4a9c99;font-size:0}
.empty-result .big .ui-icon {width:30px;height:30px}
/* QR journey */
.qr-guide {display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:stretch;padding:18px 20px;background:linear-gradient(110deg,#ecf8f4,#eef7f8); border:1px solid #d9eae6;border-radius:15px;gap:10px;margin-bottom:23px}
.guide-step {gap:12px; min-width:0}
.guide-icon {width:43px;height:43px; flex-shrink:0;border-radius:12px;background:#fff;color:#0b8774;border:1px solid #d4ebe4; box-shadow:0 2px 5px rgba(15,90,70,.03)}
.guide-icon .ui-icon {width:21px;height:21px}
.guide-step strong {color:#234b4a;font-size:14px}
.guide-step p {color:#628580;font-size:12px;line-height:1.65}
.guide-arrow {display:flex;align-items:center;color:#7aafa0;padding:0 2px}
.guide-arrow .ui-icon {width:18px;height:18px}
.alert-box {display:block;line-height:1.7;border-radius:12px}
.alert-box>.ui-icon {width:19px;height:19px;margin-right:7px;vertical-align:-.22em}
.qr-stats {grid-template-columns:repeat(3,minmax(0,1fr))}
.qr-create-panel {padding:24px 25px;margin-bottom:22px}
.qr-builder {gap:13px;grid-template-columns:minmax(140px,1fr) minmax(180px,1.3fr) minmax(120px,.75fr) auto}
.qr-create-panel .section-line .muted {max-width:630px}
.qr-panel,.history-panel {padding:23px 25px 15px;margin-bottom:21px}
.qr-panel .section-line, .history-panel .section-line {align-items:center}
.batch-grid {gap:12px}
.batch-option {border:1px solid #dfe9ef;border-radius:13px;background:#fbfcfd;padding:16px;min-height:125px;transition: background .17s,border-color .17s,box-shadow .17s;box-shadow:0 1px 1px #1234}
.batch-option:hover {border-color:#9cbfba;box-shadow:0 6px 14px rgba(20,80,70,.055)}
.batch-option.active {border-color:#58bba4;background:#f0faf5;box-shadow:0 0 0 2px rgba(29,149,115,.10)}
.batch-option strong {color:#2a4355}
.status-label {border-radius:999px;padding:5px 10px;font-size:12px;gap:6px}
.status-label .ui-icon {width:14px;height:14px}
.qr-batch-actions {border:1px solid #dceae7;background:#f5faf8;padding:16px;border-radius:12px}
.qr-batch-actions strong {color:#284e59}
.qr-code-toolbar {padding:18px 0 15px;border-top-color:#e7eef2}
.qr-code-toolbar strong {color:#273f52}
.qr-code-grid {gap:12px}
.qr-code-card {border:1px solid #e0e8ed;border-radius:13px;padding:15px;box-shadow:0 1px 3px rgba(28,55,78,.028);transition:box-shadow .15s,transform .15s}
.qr-code-card:hover {box-shadow:0 6px 20px rgba(20,58,82,.08); transform: translateY(-1px)}
.qr-code-card strong {color:#27475a;font-size:15px}
.qr-mini-icon {height:38px;width:38px;border-radius:11px;background:#e7f5f2;color:#0e8872}
.qr-mini-icon .ui-icon {width:19px;height:19px}
.qr-code-card p {color:#657e90;line-height:1.6}
.qr-card-buttons .mini-button {display:inline-flex;align-items:center;justify-content:center;gap:6px}
.qr-card-buttons .mini-button .ui-icon {width:15px;height:15px}
.qr-v1-top strong {color:#204a5f}
.qr-v1-scroll {border-color:#e0e9ed;border-radius:10px}
.mini-button {border-radius:9px;border-color:#cfdee5;color:#266880}
.mini-button:hover {border-color:#8cbec0;background:#f2f8f9}
/* Modal and toast */
.modal-overlay {background:rgba(14,35,52,.59);backdrop-filter:blur(4px)}
.modal {border-radius:18px;box-shadow:0 24px 90px rgba(10,32,46,.27)}
.modal-header {padding:25px 27px 20px}
.icon-button {width:39px;height:39px;display:grid;place-items:center;background:#f1f5f7;color:#52697c}
.icon-button .ui-icon {width:21px;height:21px}
.toast {border-radius:12px;background:#1e4a55;box-shadow:0 12px 30px rgba(18,48,60,.23)}
.footer {font-size:12px;color:#8ca1b1;border-top:1px solid #e3ebf0;display:flex;justify-content:center;align-items:center;gap:11px;padding:19px}
.footer span {padding:0;display:inline-flex;align-items:center;gap:6px}
.footer .ui-icon {width:14px;height:14px;color:#3e9685}
/* Sign in */
.login-screen {grid-template-columns:minmax(385px,48%) 1fr;background:#fff}
.login-art {background:linear-gradient(158deg,#112a43 0%,#173c53 53%,#0a605b 110%);padding:70px 11%;justify-content:flex-end;min-height: 100vh}
.login-art:after {display:none}
.art-top {top:39px;left:11%;display:flex;align-items:center;gap:12px;color:#f4fbff;letter-spacing:1px;font-size:14px}
.art-top small {display:block;font-size:9px;letter-spacing:1.6px;color:#9bbec9;margin-top:4px}
.art-logo {width:38px;height:38px;display:grid;place-items:center;background:#20a596;border-radius:10px}
.art-logo .ui-icon {width:22px;height:22px}
.login-illustration {position:absolute;width:min(460px,90%);height:360px;left:50%;top:12%;transform:translateX(-50%);display:grid;place-items:center;pointer-events:none}
.illus-orbit {position:absolute;inset:14px 50px;border:1px solid rgba(155,232,211,.16);border-radius:50%}
.orbit-two {inset:50px 86px;border:1px solid rgba(155,232,211,.13)}
.illus-main {height:144px;width:144px;display:grid;place-items:center;color:#90e5cf;background:linear-gradient(140deg,rgba(39,178,159,.3),rgba(17,111,118,.13));border:1px solid rgba(100,225,196,.3);border-radius:36px;box-shadow:0 0 0 16px rgba(124,219,204,.025),0 22px 90px rgba(5,20,30,.2)}
.illus-main .ui-icon {height:73px;width:73px;stroke-width:1.25}
.illus-node {position:absolute;width:55px;height:55px;display:grid;place-items:center;border:1px solid rgba(119,221,200,.3);border-radius:17px;background:#244d60;color:#9ddac9;box-shadow:0 14px 32px rgba(5,22,38,.12)}
.illus-node .ui-icon {width:28px;height:28px}
.node-one {top:39px;right:66px}.node-two {bottom:51px;right:74px}.node-three {left:70px;bottom:75px}
.login-art-copy {position:relative;z-index:2;margin-top:310px}
.art-eyebrow {display:block;color:#71d5bd;font-size:11px;letter-spacing:1.5px;font-weight:800;margin-bottom:22px}
.login-art h2 {font-size:clamp(33px,3vw,46px);line-height:1.16;letter-spacing:-1.5px;margin-bottom:19px}
.login-art h2 em {font-style:normal;color:#8be3cd}
.login-art p {max-width:420px;color:#b8d0dc;font-size:15px;line-height:1.85}
.art-bottom {position:relative;bottom:auto;margin-top:42px;display:flex;align-items:center;gap:8px;font-size:12px;color:#96bac2}
.art-bottom .ui-icon {width:16px;height:16px;color:#8ddbc7}
.login-panel {width:min(460px,82%)}
.login-logo {border-radius:14px;background:#e9f6f2;color:#0b806d;width:61px;height:61px;margin-bottom:27px}
.login-logo .ui-icon {width:29px;height:29px}
.login-panel h1 {font-size:clamp(28px,2.7vw,35px)}
.login-panel .muted {line-height:1.8}
.login-button {justify-content:center;gap:12px;margin-top:22px}
.login-button .ui-icon {width:19px;height:19px}
.password-wrap {border-radius:10px}
/* Citizen's public form */
.public-page {background:#f5f8fa}
.public-topbar {border-bottom-color:#e0eae9;box-shadow:0 2px 9px rgba(17,52,55,.02)}
.public-brand>span {border-radius:12px;width:45px;height:45px;background:#10394d}
.public-brand>span .ui-icon {width:25px;height:25px}
.public-brand strong {color:#1e3d53;letter-spacing:-.45px}
.public-brand small {color:#8ca0ae}
.secure-mark {display:inline-flex;align-items:center;gap:7px;color:#117d6b;font-size:12px;background:#e9f7f1;padding:9px 12px;border-radius:999px}
.secure-mark .ui-icon {width:17px;height:17px}
.public-main {max-width:930px;padding-top:40px}
.public-heading {margin-bottom:26px}
.public-heading h1 {font-size:clamp(28px,3vw,38px);color:#213d52;letter-spacing:-1px}
.public-heading p {color:#667f91;max-width:660px;line-height:1.7}
.public-heading .eyebrow {display:flex;align-items:center;gap:7px}
.public-heading .eyebrow .ui-icon {width:16px;height:16px}
.public-steps {display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:22px}
.public-steps span {background:white;border:1px solid #e0e9ee;box-shadow:0 1px 3px rgba(20,50,70,.02);border-radius:999px;padding:8px 12px;font-size:12px;color:#537387;font-weight:700;display:flex;align-items:center;gap:7px}
.public-steps b {display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#e9f5ee;color:#0e8770;font-size:12px}
.public-status {border-radius:14px}
.public-address {border:1px solid #d4e7e3;background:linear-gradient(115deg,#f1faf6,#fff);padding:23px 25px;box-shadow:0 3px 14px rgba(21,77,60,.025)}
.address-emoji {background:#e1f2ec;color:#087f6b;border-radius:13px}
.address-emoji .ui-icon {width:31px;height:31px}
.public-address h2 {color:#1f4b4c}
.public-address h3 {color:#22786e}
.verified-label {display:inline-flex;align-items:center;gap:6px;background:#def4e9;color:#107b60}
.verified-label .ui-icon {width:16px;height:16px}
.public-household {padding:24px 25px;margin-bottom:27px}
.public-household .form-field {max-width:none}
.public-household .control {max-width: 620px}
.public-person {padding:25px 26px;margin-bottom:16px}
.public-person-head {border-bottom-color:#e6edf1}
.public-person-head strong {display:inline-flex;align-items:center;gap:8px;color:#204b59}
.public-person-head .ui-icon {width:19px;height:19px;color:#138775}
.public-form-grid {gap:18px 15px}
.public-section-head h2 {color:#1f3d52}
.person-count {background:#e4f4ed;color:#0c8267}
.public-warning {display:block;background:#fffaed;color:#795a2f;border-color:#f1e4c3;border-radius:11px;padding:13px 16px}
.public-warning>.ui-icon {height:18px;width:18px;margin-right:7px;vertical-align:-.22em}
.public-add {display:flex;justify-content:center;align-items:center;gap:10px;background:#f4fbf8;border:1.5px dashed #9fccc1;border-radius:12px;color:#0d7e6d;min-height:58px}
.public-add .ui-icon {width:21px;height:21px}
.public-add:hover {background:#e7f7f0}
.public-contact {padding:24px 26px}
.public-contact h2 {color:#243f51}
.public-confirm {background:#fff;border:1px solid #e4ebef;padding:16px 17px;border-radius:11px}
.public-confirm input {accent-color:#0c806d}
.public-submit {font-size:17px;gap:10px;min-height:55px}
.public-submit .ui-icon {width:20px;height:20px}
.public-success {border-color:#c7e5d8;box-shadow:var(--shadow);padding:44px 28px}
.public-success h2 {color:#1b6e5d}
.success-symbol {background:#e2f6eb;color:#0d886a}
.success-symbol .ui-icon {height:37px;width:37px;stroke-width:2.5}
.public-callout {background:#edf8f2;border:1px solid #dbeee4;padding:17px}
.public-person-remove {border-radius:9px}
.public-footer {background:#fff;border-top-color:#e4ecee;color:#90a2ae}
/* Print preview only (do not change paper dimensions). */
.print-toolbar {box-shadow:0 2px 14px rgba(19,54,72,.05)}
.print-toolbar strong {display:flex;align-items:center;gap:10px;color:#1d485b;font-size:18px}
.print-toolbar strong .ui-icon {height:22px;width:22px;color:#0b826f}
.print-toolbar .button {gap:8px}
.print-grid {border-radius:12px}
@media print {
  .print-toolbar {display:none !important}
  .print-grid {border-radius:0;box-shadow:none}
}
/* Tablet + compact desktop */
@media (max-width:1250px) {
  :root {--sidebar-width: 228px}
  .sidebar-brand {padding-left:5px}
  .app-sidebar {padding-left:12px;padding-right:12px}
  .sidebar-brand strong {font-size:17px}
  .sidebar-brand .brand-mark {width:42px;height:42px}
  .sidebar-info-card {padding:14px}
  .header-private {display:none}
  .stat-card {padding:18px 16px}
  .stat-icon {width:44px;height:44px}
  .address-layout {grid-template-columns:205px minmax(0,1fr)}
  .qr-guide {grid-template-columns:1fr;gap:12px}
  .guide-arrow {display:none}
  .guide-step {padding:3px 0}
  .qr-code-grid {grid-template-columns:repeat(3,minmax(0,1fr))}
  .qr-builder {grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px) {
  :root {--sidebar-width: 208px}
  .sidebar-nav-label {padding-left:9px}
  .app-sidebar .nav-tab {font-size:13px;padding:12px 9px;gap:8px}
  .app-sidebar .nav-tab>.nav-chevron {display:none}
  .sidebar-brand small {font-size:8px}
  .sidebar-info-card {display:none}
  .address-layout {display:block}
  .address-sidebar {position:relative;top:auto;max-height:168px;margin-bottom:12px}
  .sidebar-list {display:flex;flex-direction:row;overflow-x:auto}
  .address-link {min-width:max-content;width:auto;border:1px solid var(--border)}
  .address-link.active {border:1px solid #74bca9}
  .stat-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
  .page-title-row {align-items:flex-start;flex-direction:column;gap:15px}
  .page-title-row .title-actions {align-self:stretch}
  .qr-code-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
  .public-main {max-width:860px}
}
@media (max-width:720px) {
  .app-layout {display:block}
  .app-sidebar {position:relative;height:auto;min-height:0;display:block;overflow:visible;padding:12px 15px 0;background:#102d43;border-right:0;border-bottom:1px solid #2c5163}
  .sidebar-brand {padding:0 1px 12px;gap:10px}
  .sidebar-brand .brand-mark {height:38px;width:38px;border-radius:10px}
  .sidebar-brand .brand-mark .ui-icon {width:21px;height:21px}
  .sidebar-brand strong {font-size:18px}
  .sidebar-divider,.sidebar-nav-label,.sidebar-bottom {display:none}
  .app-sidebar .main-nav {display:flex;flex-direction:row;height:auto;gap:7px;padding:0 0 8px;width:100%}
  .app-sidebar .nav-tab {min-height:43px;flex:1;justify-content:center;border-radius:9px;color:#b1c8d3;font-size:13px;padding:8px 7px;gap:7px}
  .app-sidebar .nav-tab span {flex:initial}
  .app-sidebar .nav-tab .ui-icon:first-child {width:17px;height:17px}
  .app-sidebar .nav-tab.selected {background:#275568;border-color:#3f6e7a}
  .app-sidebar .nav-tab.selected:before {display:none}
  .topbar {position:relative}
  .topbar-inner {padding:9px 15px;min-height:52px}
  .header-kicker {display:none}
  .header-context strong {font-size:13px;font-weight:700}
  .header-right {gap:10px}
  .header-role {border:0;padding:0}
  .header-role>span:last-child {display:none}
  .role-avatar {width:31px;height:31px}
  .header-right .button {font-size:12px;min-height:34px;padding:6px 10px;gap:6px}
  .header-right .button .ui-icon {height:16px;width:16px}
  .page-container {padding:25px 15px 45px}
  .page-title-row {margin-bottom:0px;gap:18px}
  .title-actions {gap:9px}
  .title-actions .button {flex:1;min-height:45px;padding:9px 11px}
  .subtitle {font-size:14px;line-height:1.7}
  .stat-grid {gap:10px;margin-bottom:16px}
  .stat-card {min-height:105px;padding:16px 14px;border-radius:13px}
  .stat-card .stat-label {font-size:12px}
  .stat-card .stat-count {font-size:29px;margin-top:11px}
  .stat-icon {width:40px;height:40px;border-radius:12px}
  .stat-icon .ui-icon {height:19px;width:19px}
  .filter-panel {padding:18px 16px;margin-bottom:22px}
  .filters {grid-template-columns:1fr;gap:12px}
  .results-heading {gap:10px}
  .results-heading .button {font-size:12px;min-height:40px}
  .view-bar {padding:5px}
  .view-modes {width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px}
  .view-mode {display:flex;gap:5px;padding:9px 3px;white-space:normal;font-size:11.5px;line-height:1.25;min-height:43px}
  .view-mode .ui-icon {height:15px;width:15px}
  .sheet-hint {display:none}
  .address-sidebar {max-height:162px;padding:11px}
  .sidebar-title {padding:3px 7px 9px}
  .address-toggle {padding:14px 12px}
  .address-icon {height:37px;width:37px}
  .address-primary {font-size:15px}
  .address-right {gap:6px}
  .qr-guide {padding:16px;display:grid;grid-template-columns:1fr;gap:10px}
  .guide-step strong {font-size:13px}
  .guide-step p {font-size:12px}
  .qr-stats {grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .qr-stats .stat-card {padding:12px 9px;min-height:101px}
  .qr-stats .stat-icon {display:none}
  .qr-stats .stat-label {font-size:11.5px}
  .qr-stats .stat-count {font-size:27px}
  .qr-create-panel {padding:19px 15px}
  .qr-builder {grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .qr-builder .form-field:nth-child(2) {grid-column:span 2}
  .qr-builder .button {align-self:end}
  .qr-panel,.history-panel {padding:18px 13px 9px}
  .qr-panel .section-line,.history-panel .section-line {flex-direction:column;align-items:stretch;gap:10px}
  .batch-grid {grid-template-columns:1fr}
  .batch-option {min-height:98px}
  .qr-code-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
  .qr-code-toolbar {flex-direction:column;align-items:stretch}
  .qr-code-filters input {flex:1;width:100%}
  .qr-code-filters select {width:135px}
  .qr-batch-actions {align-items:stretch}
  .qr-button-row {width:100%}
  .qr-button-row .button {flex:1}
  .qr-v1-top {flex-direction:column;align-items:flex-start}
  .modal-overlay {padding:0;align-items:flex-end}
  .modal {border-radius:17px 17px 0 0;max-height:97vh}
  .footer {flex-wrap:wrap;font-size:11px;padding:17px 12px;gap:7px}
  .login-screen {grid-template-columns:1fr}
  .login-art {display:none}
  .login-panel {width:min(450px,87%);margin: max(80px,12vh) auto}
  .public-topbar {padding:12px 14px}
  .public-main {padding:28px 14px 45px}
  .public-heading {margin-bottom:21px}
  .public-steps {gap:7px;margin-top:18px}
  .public-steps span {font-size:11px;padding:7px 9px}
  .public-steps b {height:20px;width:20px}
  .public-address {padding:18px;gap:12px}
  .address-emoji {width:50px;height:50px}
  .address-emoji .ui-icon {width:24px;height:24px}
  .public-person,.public-contact {padding:18px 16px}
  .public-household {padding:20px 16px}
  .public-form-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
  .public-person-head strong {font-size:17px}
}
@media (max-width:480px) {
  .app-sidebar .nav-tab {font-size:12px}
  .header-context strong {font-size:12px}
  .header-right .button span {display:none}
  .header-right .button {padding:6px 9px}
  .page-container {padding:21px 12px 36px}
  .page-title-row .title-actions {width:100%}
  .results-heading .button {white-space:normal;line-height:1.2}
  .stat-card .stat-count {font-size:27px}
  .stat-icon {width:34px;height:34px}
  .view-mode {font-size:11px}
  .qr-builder {grid-template-columns:1fr}
  .qr-builder .form-field:nth-child(2) {grid-column:auto}
  .qr-code-grid {grid-template-columns:1fr}
  .qr-code-card p {min-height:0}
  .qr-button-row .button {flex-basis:100%}
  .qr-code-filters {flex-direction:column}
  .qr-code-filters select {width:100%}
  .public-form-grid,.public-form-grid.two-col {grid-template-columns:1fr}
  .public-form-grid .span-two {grid-column:auto}
  .public-section-head h2 {font-size:19px}
  .public-steps {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
  .public-steps span {padding:7px 6px;font-size:10px;border-radius:9px;gap:4px;justify-content:center;line-height:1.3}
  .public-steps b {width:18px;height:18px;flex-shrink:0}
}
@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after {scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}
}