/* NitiOS visual acceptance pass: readable Thai type, calm contrast, compact empty states. */
:root {
  --navy: #123a63;
  --blue: #176fe5;
  --blue2: #eaf4ff;
  --ink: #18334f;
  --muted: #687f99;
  --line: #dfe9f3;
  --bg: #f4f8fd;
  --shadow: 0 10px 28px rgba(18, 58, 99, .075);
}

body { color: var(--ink); line-height: 1.55; }
button, input, select, textarea { font-size: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid #74b4ff;
  outline-offset: 3px;
}

/* Login and first-time setup */
.auth-screen .auth-card {
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 26px;
  box-shadow: 0 24px 70px rgba(10, 38, 68, .18);
}
.auth-screen .auth-card h1 { font-size: 30px; line-height: 1.25; }
.auth-screen .auth-detail { font-size: 15px; line-height: 1.65; }
.auth-screen .auth-hint { font-size: 13px; line-height: 1.65; padding: 12px 14px; }
.auth-screen .auth-form label { font-size: 14px; }
.auth-screen .auth-form input,
.auth-screen .auth-form select { min-height: 50px; border-radius: 13px; font-size: 15px; }
.auth-screen .auth-form .btn { min-height: 50px; border-radius: 13px; font-size: 15px; }
.auth-screen .auth-actions button { min-height: 40px; font-size: 13px; }

/* Juristic and platform admin workspace */
#app .desk .sidebar { width: 252px; padding: 22px 16px; }
#app .desk .main { margin-left: 252px; }
#app .desk .brand-name { font-size: 21px; }
#app .desk .brand-tag { font-size: 10px; }
#app .desk .project-box { padding: 13px; border-radius: 14px; }
#app .desk .project-box strong { font-size: 13px; }
#app .desk .project-box small, #app .desk .nav-label { font-size: 11px; }
#app .desk .nav-label { letter-spacing: .7px; padding: 8px 11px; }
#app .desk .nav { gap: 5px; }
#app .desk .nav button { min-height: 44px; padding: 10px 12px; border-radius: 11px; font-size: 13px; }
#app .desk .nav button svg { width: 18px; height: 18px; }
#app .desk .side-foot { font-size: 11px; }
#app .desk .side-user strong { font-size: 12px; }
#app .desk .side-user small { font-size: 11px; }
#app .desk .topbar { height: 68px; padding-inline: 28px; gap: 12px; }
#app .desk .crumb { font-size: 13px; }
#app .desk .search { height: 40px; width: min(280px, 30vw); border-radius: 11px; }
#app .desk .search input { font-size: 13px; }
#app .desk .topbar .btn, #app .desk .icon-btn { min-height: 42px; border-radius: 11px; font-size: 12px; }
#app .desk .content { padding: 28px 32px 40px; }
#app .desk .heading { margin-bottom: 22px; gap: 16px; }
#app .desk .eyebrow { font-size: 12px; margin-bottom: 4px; }
#app .desk .heading h1 { font-size: 28px; line-height: 1.28; letter-spacing: -.35px; }
#app .desk .heading p { font-size: 14px; line-height: 1.55; }
#app .desk .actions { gap: 9px; }
#app .desk .actions .btn { min-height: 44px; padding: 9px 14px; border-radius: 11px; font-size: 13px; }
#app .desk .metrics { gap: 14px; margin-bottom: 16px; }
#app .desk .metric { min-height: 108px; padding: 16px 18px; border-radius: 16px; }
#app .desk .metric-head { font-size: 13px; }
#app .desk .metric-icon { width: 36px; height: 36px; border-radius: 11px; }
#app .desk .metric-value { margin-top: 8px; }
#app .desk .metric-value strong { font-size: 26px; }
#app .desk .metric-value span, #app .desk .metric-foot { font-size: 12px; }
#app .desk .card { border-radius: 16px; box-shadow: var(--shadow); }
#app .desk .panel-head { min-height: 58px; padding: 13px 18px; gap: 11px; }
#app .desk .panel-title { font-size: 16px; }
#app .desk .panel-sub { font-size: 12px; }
#app .desk .link { min-height: 36px; padding: 7px 9px; font-size: 12px; }
#app .desk .list { padding-inline: 18px; }
#app .desk .row { gap: 11px; padding: 13px 2px; }
#app .desk .row-copy strong { font-size: 14px; }
#app .desk .row-copy small, #app .desk .row-meta { font-size: 12px; }
#app .desk .status { padding: 5px 9px; font-size: 11px; }
#app .desk .quick-grid { gap: 11px; margin: 16px 0; }
#app .desk .quick { min-height: 68px; padding: 12px; gap: 11px; border-radius: 13px; }
#app .desk .quick-ico { width: 40px; height: 40px; border-radius: 12px; }
#app .desk .quick strong { font-size: 13px; }
#app .desk .quick small { font-size: 11px; }
#app .desk .table th { padding: 12px 14px; font-size: 12px; }
#app .desk .table td { padding: 13px 14px; font-size: 13px; }
#app .desk .toolbar { gap: 9px; padding: 12px 14px; }
#app .desk .toolbar input, #app .desk .toolbar select, #app .desk .input { min-height: 42px; border-radius: 10px; font-size: 13px; }
#app .desk .btn { min-height: 42px; padding: 9px 13px; border-radius: 10px; font-size: 13px; }
#app .desk .btn-sm { min-height: 36px; padding: 7px 10px; font-size: 12px; }
#app .desk .empty { min-height: 54px; padding: 16px; font-size: 13px; line-height: 1.55; }
#app .desk .pad { padding: 18px; }
#app .desk .pad h2, #app .desk .pad h3 { font-size: 16px; }
#app .desk .pad p { font-size: 13px; }

/* Resident app: phone-first, clear status and touch targets. */
#app .resident-wrap .resident-app { max-width: 520px; width: 100%; font-size: 15px; }
#app .resident-wrap .r-header { min-height: 68px; padding-inline: 16px; }
#app .resident-wrap .r-logo { width: 42px; height: 42px; border-radius: 14px; }
#app .resident-wrap .r-header strong { font-size: 17px; }
#app .resident-wrap .r-header small { font-size: 11px; }
#app .resident-wrap .r-header button { width: 42px; height: 42px; border-radius: 13px; }
#app .resident-wrap .r-content { padding: 16px 16px 14px; }
#app .resident-wrap .r-welcome { gap: 12px; margin: 3px 2px 14px; }
#app .resident-wrap .r-welcome .avatar { width: 44px; height: 44px; font-size: 15px; }
#app .resident-wrap .r-welcome strong { font-size: 15px; }
#app .resident-wrap .r-welcome small { font-size: 12px; }
#app .resident-wrap .property-hero { min-height: 132px; padding: 17px 18px; margin-bottom: 12px; border-radius: 18px; }
#app .resident-wrap .property-hero small { font-size: 12px; }
#app .resident-wrap .property-hero strong { font-size: 29px; }
#app .resident-wrap .property-hero span { font-size: 13px; }
#app .resident-wrap .r-bill { min-height: 82px; padding: 14px; gap: 12px; margin-bottom: 12px; border-radius: 15px; }
#app .resident-wrap .r-bill small, #app .resident-wrap .r-bill .due { font-size: 12px; }
#app .resident-wrap .r-bill strong { font-size: 24px; }
#app .resident-wrap .r-bill button { min-height: 42px; padding: 9px 12px; border-radius: 10px; font-size: 13px; }
#app .resident-wrap .r-actions { gap: 9px; margin-bottom: 12px; }
#app .resident-wrap .r-action { min-height: 82px; padding: 10px 5px; border-radius: 15px; }
#app .resident-wrap .r-action span { width: 34px; height: 34px; margin-bottom: 5px; border-radius: 11px; }
#app .resident-wrap .r-action strong { font-size: 12px; line-height: 1.35; }
#app .resident-wrap .r-card { margin-bottom: 11px; border-radius: 16px; }
#app .resident-wrap .r-card-head { min-height: 50px; padding: 12px 15px 9px; gap: 9px; }
#app .resident-wrap .r-card-head strong { font-size: 15px; }
#app .resident-wrap .r-card-body { padding: 0 15px 14px; }
#app .resident-wrap .r-repair { gap: 10px; padding: 11px 0; }
#app .resident-wrap .r-repair .round-icon { width: 36px; height: 36px; border-radius: 11px; }
#app .resident-wrap .r-repair strong, #app .resident-wrap .r-item strong { font-size: 13px; }
#app .resident-wrap .r-repair small, #app .resident-wrap .r-item small { font-size: 12px; line-height: 1.45; }
#app .resident-wrap .r-item { min-height: 58px; padding: 11px; gap: 10px; border-radius: 12px; }
#app .resident-wrap .r-card-body > .empty { min-height: 42px; padding: 10px 8px; font-size: 13px; line-height: 1.5; }
#app .resident-wrap .member-row { gap: 11px; padding: 11px 0; }
#app .resident-wrap .member-row .avatar { width: 38px; height: 38px; font-size: 13px; }
#app .resident-wrap .member-row strong { font-size: 13px; }
#app .resident-wrap .member-row small { font-size: 12px; }
#app .resident-wrap .more-grid { gap: 10px; }
#app .resident-wrap .more-tile { min-height: 116px; border-radius: 15px; }
#app .resident-wrap .more-tile strong { font-size: 13px; line-height: 1.35; }
#app .resident-wrap .more-tile small { font-size: 11px; line-height: 1.45; }
#app .resident-wrap .r-bottom { height: 76px; padding: 7px 6px max(7px, env(safe-area-inset-bottom)); box-shadow: 0 -6px 24px rgba(18,58,99,.08); }
#app .resident-wrap .r-bottom button { min-height: 54px; gap: 4px; font-size: 11px; line-height: 1.2; }
#app .resident-wrap .r-bottom button svg { width: 21px; height: 21px; }
#app .resident-wrap .r-bottom button.active { border-radius: 13px; background: #edf5ff; }
#app .resident-wrap .heading h1 { font-size: 23px; line-height: 1.3; }
#app .resident-wrap .heading p { font-size: 13px; line-height: 1.5; }
#app .resident-wrap .heading .btn { min-height: 42px; font-size: 13px; }
#app .resident-wrap .notice-card h2 { font-size: 16px; }
#app .resident-wrap .notice-card p { font-size: 14px; line-height: 1.6; }

/* Guard shared device: large controls, high-contrast state. */
#app .guard { background: linear-gradient(145deg, #f0f6f4, #eaf3f0); }
#app .guard .g-top { min-height: 68px; padding-inline: 22px; }
#app .guard .g-brand { font-size: 17px; }
#app .guard .g-top small { font-size: 12px; }
#app .guard .g-select { min-height: 42px; padding: 9px 12px; border-radius: 10px; font-size: 13px; }
#app .guard .g-wrap { max-width: 1480px; padding: 22px 24px 30px; }
#app .guard .g-head { margin-bottom: 18px; gap: 14px; }
#app .guard .g-head h1 { font-size: 27px; line-height: 1.3; }
#app .guard .g-head p { font-size: 13px; line-height: 1.5; }
#app .guard .shift { padding: 10px 12px; border-radius: 11px; font-size: 12px; }
#app .guard .g-columns { gap: 16px; }
#app .guard .g-card { padding: 18px; border-radius: 17px; box-shadow: var(--shadow); }
#app .guard .g-card h2 { font-size: 17px; }
#app .guard .g-card > p { margin-bottom: 14px; font-size: 13px; line-height: 1.5; }
#app .guard .g-form { gap: 12px; }
#app .guard .g-field { gap: 6px; }
#app .guard .g-field label { font-size: 12px; }
#app .guard .g-field input, #app .guard .g-field select { min-height: 46px; padding-inline: 12px; border-radius: 10px; font-size: 14px; }
#app .guard .g-submit { min-height: 50px; border-radius: 11px; font-size: 14px; }
#app .guard .g-stats { gap: 10px; margin-bottom: 14px; }
#app .guard .g-stat { padding: 13px; border-radius: 13px; }
#app .guard .g-stat small { font-size: 11px; }
#app .guard .g-stat strong { font-size: 23px; }
#app .guard .g-visitor { min-height: 60px; gap: 11px; padding: 11px; border-radius: 12px; }
#app .guard .g-visitor strong { font-size: 14px; }
#app .guard .g-visitor small { font-size: 12px; line-height: 1.4; }
#app .guard .g-visitor .btn { min-height: 40px; padding: 8px 11px; font-size: 12px; }
#app .guard .g-sos { min-height: 50px; margin-top: 12px; border-radius: 12px; font-size: 14px; }
#app .guard .g-label { margin: 16px 0 9px; font-size: 12px; }
#app .guard .g-empty { padding: 16px; border-radius: 12px; font-size: 13px; }

@media (max-width: 1050px) {
  #app .desk .content { padding: 22px 22px 32px; }
  #app .desk .sidebar { width: 252px; }
  #app .desk .main { margin-left: 252px; }
}

@media (max-width: 720px) {
  #app .desk .main { margin-left: 0; }
  #app .desk .topbar { height: 62px; padding-inline: 12px; gap: 8px; }
  #app .desk .content { padding: 18px 15px 30px; }
  #app .desk .heading h1 { font-size: 24px; }
  #app .desk .heading p { font-size: 13px; }
  #app .desk .metrics { gap: 9px; }
  #app .desk .metric { min-height: 96px; padding: 12px; }
  #app .desk .metric-head { font-size: 11px; }
  #app .desk .metric-value strong { font-size: 23px; }
  #app .desk .metric-value span, #app .desk .metric-foot { font-size: 11px; }
  #app .desk .quick-grid { gap: 8px; }
  #app .desk .quick { min-height: 64px; padding: 10px; }
  #app .desk .quick-ico { width: 34px; height: 34px; }
  #app .desk .quick strong { font-size: 12px; }
  #app .desk .quick small { font-size: 10px; }
  #app .resident-wrap .r-content { padding: 15px 14px 16px; }
  #app .resident-wrap .property-hero { min-height: 124px; padding: 15px 16px; }
  #app .resident-wrap .property-hero strong { font-size: 27px; }
  #app .resident-wrap .r-bottom { height: calc(72px + env(safe-area-inset-bottom)); padding-bottom: max(7px, env(safe-area-inset-bottom)); }
  #app .resident-wrap .r-bottom button { min-height: 50px; font-size: 10px; }
  #app .guard .g-top { min-height: 62px; padding-inline: 14px; }
  #app .guard .g-wrap { padding: 16px 14px 24px; }
  #app .guard .g-head h1 { font-size: 23px; }
  #app .guard .g-columns { grid-template-columns: 1fr; }
  #app .guard .g-card { padding: 16px; }
}

@media (max-width: 420px) {
  #app .desk .content { padding: 15px 12px 26px; }
  #app .desk .heading { display: block; }
  #app .desk .heading .actions { margin-top: 10px; flex-wrap: wrap; }
  #app .desk .heading .actions .btn { flex: 1 1 auto; }
  #app .desk .panel-head { padding-inline: 13px; }
  #app .desk .list { padding-inline: 12px; }
  #app .desk .row { flex-wrap: wrap; }
  #app .desk .row-copy { flex-basis: calc(100% - 60px); }
  #app .desk .panel-head { padding-inline: 13px; }
  #app .resident-wrap .r-actions { gap: 7px; }
  #app .resident-wrap .r-action { min-height: 76px; }
  #app .resident-wrap .r-action strong { font-size: 11px; }
  #app .resident-wrap .r-card-head strong { font-size: 14px; }
  #app .resident-wrap .r-card-body { padding-inline: 13px; }
  #app .resident-wrap .more-grid { gap: 8px; }
  #app .resident-wrap .more-tile { min-height: 108px; padding-inline: 11px; }
  #app .guard .g-form { grid-template-columns: 1fr 1fr; }
  #app .guard .g-card { padding: 13px; }
  #app .guard .g-stat { padding: 10px; }
  #app .guard .g-stat small { font-size: 10px; }
  #app .guard .g-stat strong { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

body[data-role="guard"]{background:#eef3f9;overflow-x:hidden}
body[data-role="guard"] #app{min-height:100dvh;overflow-x:hidden}
.legacy-guard-shell{position:relative;width:100%;max-width:560px;min-height:100dvh;margin:0 auto;padding-bottom:84px;background:#f2f6fb;color:#142b46;overflow-x:hidden;box-shadow:0 0 38px rgba(18,45,78,.08)}
.legacy-guard-top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:10px;min-height:64px;padding:9px 14px;background:#fff;border-bottom:1px solid #e5edf5}
.legacy-guard-mark{display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;border-radius:14px;background:#e8f2ff;color:#176fce}
.legacy-guard-mark svg{width:23px;height:23px}
.legacy-guard-brand{display:grid;gap:2px;min-width:0}
.legacy-guard-brand strong{font-size:14px;line-height:1.2;color:#173b60}
.legacy-guard-brand small{font-size:11px;color:#788ca3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.legacy-guard-spacer{flex:1}
.legacy-guard-top .notification-bell{width:42px;height:42px;display:grid;place-items:center;border-radius:13px}
.legacy-guard-logout{min-width:48px;height:42px;padding:0 11px;border:1px solid #dae6f2;border-radius:13px;background:#fff;color:#39536f;font-size:13px;font-weight:750}
.legacy-guard-main{padding:13px 14px 22px}
.legacy-g-hero{min-height:102px;padding:17px 18px;border-radius:20px;background:linear-gradient(120deg,#154976,#237dc2 65%,#68afe2);color:#fff;box-shadow:0 8px 20px rgba(27,92,148,.16)}
.legacy-g-hero>div{display:flex;justify-content:space-between;align-items:center;gap:8px}
.legacy-g-hero>div span{font-size:18px;font-weight:850;letter-spacing:-.2px}
.legacy-g-hero>div strong{font-size:11px;font-weight:650;opacity:.88}
.legacy-g-hero p{margin:7px 0 0;font-size:12px;color:#e5f1ff}
.legacy-g-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:11px 0}
.legacy-g-stats>div{display:grid;gap:3px;min-width:0;padding:10px 11px;border:1px solid #e2eaf3;border-radius:15px;background:#fff;box-shadow:0 3px 12px rgba(32,65,99,.035)}
.legacy-g-stats small{font-size:10px;color:#72869e;white-space:nowrap}
.legacy-g-stats strong{font-size:20px;line-height:1.1;color:#176fce}
.legacy-g-panel{padding:16px;border:1px solid #e3ebf4;border-radius:20px;background:#fff;box-shadow:0 8px 22px rgba(27,58,94,.055)}
.legacy-g-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:14px}
.legacy-g-panel-head h1,.legacy-g-wizard-title h1{margin:2px 0 3px;font-size:20px;line-height:1.25;letter-spacing:-.35px;color:#193a5c}
.legacy-g-panel-head p{margin:0;font-size:12px;line-height:1.5;color:#8292a6}
.legacy-g-eyebrow{font-size:10px;font-weight:800;letter-spacing:.08em;color:#2176c9;text-transform:uppercase}
.legacy-g-date,.legacy-g-count{flex:none;padding:7px 9px;border:1px solid #e4edf6;border-radius:11px;background:#f6f9fd;color:#687e98;font-size:11px;font-weight:700}
.legacy-g-count{min-width:36px;text-align:center;color:#176fce}
.legacy-g-categories{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.legacy-g-category{display:flex;align-items:center;gap:10px;min-height:84px;min-width:0;padding:12px;border:1px solid #e2ebf4;border-radius:16px;background:#fff;text-align:left;color:#193b5e;box-shadow:0 3px 9px rgba(28,63,101,.035);transition:transform .14s,border-color .14s,background .14s}
.legacy-g-category:active,.legacy-g-choice:active,.legacy-g-chip:active{transform:scale(.98)}
.legacy-g-category-icon{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:14px;background:#eaf3ff;color:#2679cb}
.legacy-g-category-icon svg{width:22px;height:22px}
.legacy-g-category-icon.amber{background:#fff4df;color:#b37613}
.legacy-g-category-icon.violet{background:#f1eaff;color:#7655ba}
.legacy-g-category-icon.blue{background:#e8f2ff;color:#2679cb}
.legacy-g-category-icon.slate{background:#edf1f5;color:#5e7187}
.legacy-g-category>span:nth-child(2){display:grid;gap:4px;min-width:0}
.legacy-g-category strong{font-size:13px;line-height:1.2}
.legacy-g-category small{font-size:10px;line-height:1.35;color:#7d8ea2}
.legacy-g-chevron{margin-left:auto;color:#94a6ba;font-size:24px;line-height:1}
.legacy-g-wizard{padding:14px}
.legacy-g-wizard-head{display:grid;grid-template-columns:54px minmax(0,1fr) 58px;align-items:center;gap:8px}
.legacy-g-back,.legacy-g-change{height:40px;border:1px solid #e0e9f3;border-radius:12px;background:#fff;color:#45627f;font-size:12px;font-weight:750}
.legacy-g-back{display:flex;align-items:center;justify-content:center;gap:2px}
.legacy-g-back:first-letter{font-size:22px}
.legacy-g-change{color:#176fce}
.legacy-g-wizard-title{text-align:center}
.legacy-g-wizard-title small{font-size:10px;color:#7c8ea3}
.legacy-g-wizard-title h1{margin:2px 0 0;font-size:18px}
.legacy-g-progress{display:grid;grid-template-columns:repeat(5,1fr);gap:3px;margin:15px 0 7px}
.legacy-g-step{position:relative;display:grid;justify-items:center;gap:5px;color:#9aa9b9}
.legacy-g-step b{z-index:1;display:grid;place-items:center;width:25px;height:25px;border:1px solid #dce5ef;border-radius:50%;background:#f5f8fb;font-size:10px}
.legacy-g-step small{font-size:9px;white-space:nowrap}
.legacy-g-step.current{color:#176fce;font-weight:800}
.legacy-g-step.current b,.legacy-g-step.done b{border-color:#277ed0;background:#277ed0;color:#fff}
.legacy-g-step.done small{color:#4380b8}
.legacy-g-hint{margin:8px 0 13px;text-align:center;color:#8091a6;font-size:11px}
.legacy-g-step-body{display:grid;gap:13px;min-height:212px;align-content:start}
.legacy-g-field{display:grid;gap:7px;min-width:0}
.legacy-g-field label{font-size:13px;font-weight:750;color:#3a5775}
.legacy-g-field input,.legacy-g-field select,.legacy-g-field textarea,.legacy-g-card-action input,.legacy-g-card-action select,.legacy-g-card-action textarea{width:100%;min-width:0;min-height:52px;padding:11px 13px;border:1px solid #dbe6f1;border-radius:14px;background:#fbfdff;color:#1e3855;font:inherit;font-size:15px;outline:none}
.legacy-g-field textarea{min-height:104px;resize:vertical;line-height:1.5}
.legacy-g-field input:focus,.legacy-g-field select:focus,.legacy-g-field textarea:focus,.legacy-g-card-action input:focus,.legacy-g-card-action select:focus,.legacy-g-card-action textarea:focus{border-color:#5b9de0;box-shadow:0 0 0 3px rgba(59,130,200,.12)}
.legacy-g-field>small{font-size:10px;line-height:1.5;color:#8495a9}
.legacy-g-choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.legacy-g-choice{min-height:50px;border:1px solid #dce7f2;border-radius:13px;background:#fff;color:#3e5d7c;font-size:14px;font-weight:750}
.legacy-g-choice.selected,.legacy-g-chip.selected{border-color:#418ed6;background:#eef6ff;color:#176fce;box-shadow:inset 0 0 0 1px #418ed6}
.legacy-g-scan-row{display:grid;grid-template-columns:minmax(0,1fr) 112px;gap:8px}
.legacy-g-scan{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:52px;padding:5px;border:0;border-radius:14px;background:#176fce;color:#fff;font-size:11px;font-weight:800}
.legacy-g-scan svg{width:18px;height:18px}
.legacy-g-toggle{display:flex;align-items:center;gap:9px;min-height:44px;padding:8px 10px;border:1px solid #e3ebf4;border-radius:12px;background:#f9fbfe;text-align:left;color:#647b94;font-size:12px;font-weight:650}
.legacy-g-toggle.selected{border-color:#92b8dd;background:#f0f7ff;color:#246cae}
.legacy-g-toggle-check{display:grid;place-items:center;flex:none;width:20px;height:20px;border:1px solid #cad7e5;border-radius:6px;background:#fff;font-size:12px;font-weight:900}
.legacy-g-toggle.selected .legacy-g-toggle-check{border-color:#277ed0;background:#277ed0;color:#fff}
.legacy-g-chips{display:flex;flex-wrap:wrap;gap:7px}
.legacy-g-chip{min-height:40px;padding:0 12px;border:1px solid #dce7f2;border-radius:12px;background:#fff;color:#486582;font-size:12px;font-weight:700}
.legacy-g-review{overflow:hidden;border:1px solid #e4ecf4;border-radius:14px;background:#fff}
.legacy-g-review-banner{padding:10px 12px;background:#eef6ff;color:#3e6d9a;font-size:11px;line-height:1.4}
.legacy-g-review-row{display:flex;justify-content:space-between;gap:12px;padding:9px 12px;border-top:1px solid #edf1f6}
.legacy-g-review-row small{flex:none;color:#8292a5;font-size:11px}
.legacy-g-review-row strong{max-width:68%;color:#294765;text-align:right;font-size:12px;line-height:1.4;overflow-wrap:anywhere}
.legacy-g-actions{padding-top:12px}
.legacy-g-primary,.legacy-g-action-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:54px;padding:10px 14px;border:0;border-radius:15px;background:linear-gradient(105deg,#2684df,#1768c2);color:#fff;font-size:15px;font-weight:850;box-shadow:0 7px 16px rgba(27,111,198,.18)}
.legacy-g-primary span{font-size:20px}
.legacy-g-primary:disabled{opacity:.45;box-shadow:none}
.legacy-g-empty{padding:16px 12px;border:1px dashed #d7e3ef;border-radius:14px;background:#f8fbfe;color:#7e91a6;text-align:center;font-size:12px;line-height:1.5}
.legacy-g-list{display:grid;gap:9px}
.legacy-g-visitor{display:grid;gap:7px;min-width:0;padding:12px;border:1px solid #e3ebf4;border-radius:15px;background:#fff}
.legacy-g-visitor-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.legacy-g-visitor-head strong{min-width:0;color:#234361;font-size:13px;line-height:1.4;overflow-wrap:anywhere}
.legacy-g-visitor small{color:#7489a0;font-size:11px;line-height:1.45;overflow-wrap:anywhere}
.legacy-g-note{margin:0;padding:8px 9px;border-radius:10px;background:#f4f8fc;color:#58718d;font-size:11px;line-height:1.45;overflow-wrap:anywhere}
.legacy-g-card-action{display:grid;grid-template-columns:minmax(0,1fr);gap:7px;padding-top:7px}
.legacy-g-card-action input{min-height:46px;font-size:14px}
.legacy-g-card-action select{min-height:46px;padding-block:9px;font-size:14px}
.legacy-g-card-action textarea{min-height:74px;resize:vertical;font-size:14px;line-height:1.45}
.legacy-g-action-btn{min-height:48px;border-radius:13px;font-size:13px}
.legacy-g-issued{font-size:11px;font-weight:750;color:#51708e}
.legacy-g-footnote{padding:13px 6px;color:#8c9caf;text-align:center;font-size:10px;line-height:1.5}
.legacy-g-nav{position:fixed;bottom:0;left:50%;z-index:40;display:grid;grid-template-columns:repeat(4,1fr);width:min(560px,100%);padding:7px 7px calc(7px + env(safe-area-inset-bottom));transform:translateX(-50%);border-top:1px solid #e0e8f1;background:rgba(255,255,255,.96);backdrop-filter:blur(14px)}
.legacy-g-nav-item{display:grid;justify-items:center;gap:3px;min-height:52px;padding:4px 2px;border:0;border-radius:12px;background:transparent;color:#8495a8;font-size:10px;font-weight:700}
.legacy-g-nav-item svg{width:20px;height:20px}
.legacy-g-nav-item.active{background:#eff6ff;color:#176fce}
.legacy-guard-main .notification-item{padding:12px}
@media(min-width:700px){body[data-role="guard"]{background:#e8eff6}.legacy-guard-shell{min-height:100vh}.legacy-g-hero{min-height:110px}}
@media(max-width:390px){.legacy-guard-main{padding-inline:10px}.legacy-g-panel{padding:13px}.legacy-g-category{gap:7px;padding:9px;min-height:78px}.legacy-g-category-icon{width:36px;height:36px}.legacy-g-category strong{font-size:12px}.legacy-g-category small{font-size:9px}.legacy-g-step small{font-size:8px}.legacy-g-wizard-head{grid-template-columns:48px minmax(0,1fr) 54px;gap:5px}.legacy-g-review-row{padding:8px}.legacy-g-review-row strong{max-width:65%}}
.legacy-g-search{display:grid;gap:6px;margin:12px 0;color:#607a95}
.legacy-g-search span,.legacy-g-card-label{font-size:12px;font-weight:750}
.legacy-g-search input{width:100%;min-width:0;min-height:48px;padding:10px 13px;border:1px solid #dbe6f1;border-radius:13px;background:#f8fbff;color:#1e3855;font:inherit;font-size:14px;outline:none}
.legacy-g-search input:focus{border-color:#5b9de0;box-shadow:0 0 0 3px rgba(59,130,200,.12)}
.legacy-g-card-label{color:#617a96}
.legacy-g-card-action>small{color:#7e91a6;font-size:11px;line-height:1.45}
.legacy-g-action-btn:disabled{opacity:.65;box-shadow:none}
.legacy-g-counter{justify-self:end;color:#8192a7;font-size:11px}
.legacy-guard-main>.page-more{margin-top:12px;border:1px solid #e3ebf4;border-radius:15px;background:#fff}