@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Oxanium:wght@400;500;600;700&display=swap");

:root {
  --ink: #1c1917;
  --muted: #57534e;
  --line: #e7e5e4;
  --ground: #fafaf9;
  --surface: #ffffff;
  --paper: #f5f5f4;
  --green: #047857;
  --green-dark: #065f46;
  --green-soft: #ecfdf5;
  --orange: #b45309;
  --cyan: #0e7490;
  --blue: #0e7490;
  --blue-soft: #cffafe;
  --red: #b91c1c;
  --red-soft: #fee2e2;
  --shadow-sm: 0 1px 2px rgba(28, 25, 23, .06);
  --shadow-md: 0 16px 34px rgba(28, 25, 23, .12);
  --radius-xs: 0;
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --radius-pill: 0;
  --bs-border-radius: 0;
  --bs-border-radius-sm: 0;
  --bs-border-radius-lg: 0;
  --bs-border-radius-pill: 0;
  --sidebar: 248px;
  --topbar: 72px;
}

* { box-sizing: border-box; }
.rounded,
.rounded-1,
.rounded-2,
.rounded-3,
.rounded-top,
.rounded-end,
.rounded-bottom,
.rounded-start { border-radius: 0 !important; }
html { min-width: 320px; }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: "Oxanium", system-ui, sans-serif; line-height: 1.5; }
#pjax-progress { position: fixed; z-index: 2100; top: 0; left: 0; width: 100%; height: 3px; transform: scaleX(0); transform-origin: left; background: var(--green-dark); transition: transform .16s ease-out; }
body.pjax-loading #pjax-progress { transform: scaleX(.72); }
.pjax-skeleton-host { position: relative; min-height: clamp(28rem, 70dvh, 44rem); }
.pjax-skeleton { position: absolute; inset: 0; z-index: 900; display: grid; align-content: start; gap: 1rem; padding: inherit; background: var(--ground); pointer-events: none; }
.pjax-skeleton-head { display: grid; gap: .7rem; max-width: 46rem; padding-top: .25rem; }
.pjax-skeleton-block { display: block; border-radius: var(--radius-sm); background: #e7e5e4; }
.pjax-skeleton-kicker { width: 7rem; height: .8rem; }
.pjax-skeleton-title { width: min(30rem, 84%); height: 2rem; background: #ccd5c4; }
.pjax-skeleton-copy { width: min(42rem, 100%); height: 1rem; }
.pjax-skeleton-rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.pjax-skeleton-rail .pjax-skeleton-block { min-height: 6.75rem; border-radius: 0; border-right: 1px solid var(--line); background: #edf1e9; }
.pjax-skeleton-rail .pjax-skeleton-block:last-child { border-right: 0; }
.pjax-skeleton-panel { display: grid; gap: .85rem; padding: 1.1rem; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.pjax-skeleton-panel-title { width: 10rem; height: 1.1rem; background: #ccd5c4; }
.pjax-skeleton-row { width: 100%; height: 2.75rem; background: #edf1e9; }
.pjax-skeleton-row.short { width: 58%; }
::selection { background: var(--green-soft); color: var(--ink); }
a { color: var(--green-dark); text-underline-offset: .2em; }
button, input, select, textarea { font: inherit; }
:focus-visible { outline: 3px solid var(--cyan) !important; outline-offset: 3px; box-shadow: none !important; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 2000; transform: translateY(-150%); background: var(--ink); color: #fff; padding: .7rem 1rem; border-radius: var(--radius-sm); }
.skip-link:focus { transform: translateY(0); }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: "Geist", system-ui, sans-serif; letter-spacing: -.03em; text-wrap: balance; }
h1 { font-size: clamp(1.35rem, 2vw, 1.7rem); line-height: 1.15; margin-bottom: .35rem; }
h2 { font-size: clamp(1.25rem, 2vw, 1.65rem); line-height: 1.2; }
p { color: var(--muted); }
.btn { min-height: 44px; border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .55rem .9rem; font-weight: 600; text-decoration: none; }
.btn-primary { --bs-btn-bg: var(--green); --bs-btn-border-color: var(--green); --bs-btn-hover-bg: var(--green-dark); --bs-btn-hover-border-color: var(--green-dark); --bs-btn-active-bg: var(--green-dark); background-color: var(--green); border-color: var(--green); color: #fff; }
.btn-primary:hover, .btn-primary:active, .btn-primary.active, .btn-check:checked + .btn-primary, .btn-check:active + .btn-primary, .show > .btn-primary.dropdown-toggle { background-color: var(--green-dark); border-color: var(--green-dark); color: #fff; }
.btn-primary:focus, .btn-check:focus + .btn-primary { background-color: var(--green-dark); border-color: var(--green-dark); color: #fff; box-shadow: 0 0 0 .2rem rgba(14, 116, 144, .36); }
.btn-secondary { --bs-btn-bg: var(--ink); --bs-btn-border-color: var(--ink); --bs-btn-hover-bg: #34423e; --bs-btn-hover-border-color: #34423e; background-color: var(--ink); border-color: var(--ink); color: #fff; }
.btn-secondary:hover, .btn-secondary:active, .btn-secondary.active, .btn-check:checked + .btn-secondary, .btn-check:active + .btn-secondary, .show > .btn-secondary.dropdown-toggle { background-color: #34423e; border-color: #34423e; color: #fff; }
.btn-secondary:focus, .btn-check:focus + .btn-secondary { background-color: #34423e; border-color: #34423e; color: #fff; box-shadow: 0 0 0 .2rem rgba(30, 36, 27, .25); }
.btn-outline-secondary { --bs-btn-color: var(--ink); --bs-btn-border-color: #a8a29e; --bs-btn-hover-bg: var(--ink); --bs-btn-hover-border-color: var(--ink); color: var(--ink); border-color: #a8a29e; background-color: transparent; }
.btn-outline-secondary:hover, .btn-outline-secondary:active, .btn-outline-secondary.active, .btn-check:checked + .btn-outline-secondary, .btn-check:active + .btn-outline-secondary { background-color: var(--ink); border-color: var(--ink); color: #fff; }
.btn-outline-secondary:focus, .btn-check:focus + .btn-outline-secondary { box-shadow: 0 0 0 .2rem rgba(30, 36, 27, .25); }
.btn-outline-primary { --bs-btn-color: var(--green-dark); --bs-btn-border-color: var(--green-dark); --bs-btn-hover-bg: var(--green); --bs-btn-hover-border-color: var(--green-dark); --bs-btn-hover-color: #fff; color: var(--green-dark); border-color: var(--green-dark); background-color: transparent; }
.btn-outline-primary:hover, .btn-outline-primary:active, .btn-outline-primary.active, .btn-check:checked + .btn-outline-primary, .btn-check:active + .btn-outline-primary { background-color: var(--green); border-color: var(--green-dark); color: #fff; }
.btn-outline-primary:focus, .btn-check:focus + .btn-outline-primary { box-shadow: 0 0 0 .2rem rgba(14, 116, 144, .28); border-color: var(--green-dark); color: var(--green-dark); }
.btn-outline-danger { --bs-btn-color: var(--red); --bs-btn-border-color: #fca5a5; --bs-btn-hover-bg: var(--red); --bs-btn-hover-border-color: var(--red); --bs-btn-hover-color: #fff; color: var(--red); border-color: #fca5a5; background-color: transparent; }
.btn-outline-danger:hover, .btn-outline-danger:active, .btn-outline-danger.active, .btn-check:checked + .btn-outline-danger, .btn-check:active + .btn-outline-danger { background-color: var(--red); border-color: var(--red); color: #fff; }
.btn-outline-danger:focus, .btn-check:focus + .btn-outline-danger { box-shadow: 0 0 0 .2rem rgba(180, 35, 24, .25); }
.btn-success { --bs-btn-bg: var(--green); --bs-btn-border-color: var(--green); --bs-btn-hover-bg: var(--green-dark); --bs-btn-hover-border-color: var(--green-dark); background-color: var(--green); border-color: var(--green); color: #fff; }
.btn-outline-success { --bs-btn-color: var(--green-dark); --bs-btn-border-color: var(--green-dark); --bs-btn-hover-bg: var(--green-soft); --bs-btn-hover-border-color: var(--green-dark); color: var(--green-dark); border-color: var(--green-dark); background-color: transparent; }
.btn-outline-success:hover, .btn-outline-success:active, .btn-outline-success.active, .btn-check:checked + .btn-outline-success, .btn-check:active + .btn-outline-success { background-color: var(--green-soft); border-color: var(--green-dark); color: var(--ink); }
.text-primary { color: var(--green-dark) !important; }
.bg-primary { background-color: var(--green) !important; color: #fff !important; }
.border-primary { border-color: var(--green-dark) !important; }
.btn-icon { width: 44px; height: 44px; min-height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); font-size: 0.95rem; line-height: 1; flex-shrink: 0; }
.btn-icon i { line-height: 1; }
.btn-link { min-height: 44px; }
.btn-close { min-width: 44px; min-height: 44px; }
.form-control, .form-select { min-height: 44px; border-color: #a8a29e; border-radius: var(--radius-sm); background-color: var(--paper); color: var(--ink); }
.form-control::placeholder { color: #687265; opacity: 1; }
.form-control:focus, .form-select:focus { border-color: var(--green-dark); box-shadow: 0 0 0 .2rem rgba(14,116,144,.2); }
.form-check-input { border-color: #7d8977; flex-shrink: 0; }
.form-check-input:checked { background-color: var(--green); border-color: var(--green); }

.app-shell { min-height: 100dvh; display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); transition: grid-template-columns 0.22s cubic-bezier(0.4, 0, 0.2, 1); }
body.sidebar-collapsed .app-shell { grid-template-columns: 0px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column; background: rgba(250,250,249,.9); color: var(--ink); padding: 1.1rem .85rem; z-index: 1040; width: var(--sidebar); overflow-x: hidden; border-right: 1px solid var(--line); backdrop-filter: blur(18px); transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.22s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.22s; }
body.sidebar-collapsed .sidebar { transform: translateX(-100%); opacity: 0; visibility: hidden; pointer-events: none; }
.brand { display: flex; align-items: center; gap: .75rem; color: var(--ink); text-decoration: none; padding: .45rem .55rem 1.35rem; }
.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 auto; }
.brand-logo { width: 42px; height: 42px; display: block; object-fit: contain; }
.brand strong, .brand small { display: block; }
.brand strong { font-family: "Geist", system-ui, sans-serif; font-size: 1.18rem; line-height: 1; letter-spacing: -.03em; }
.brand small { color: var(--muted); font-size: .74rem; margin-top: .25rem; }
.sidebar-nav { display: grid; gap: .22rem; }
.sidebar-nav a,
.sidebar-foot a { min-height: 44px; display: flex; align-items: center; gap: .75rem; padding: .65rem .75rem; border-radius: var(--radius-sm); color: #44403c; text-decoration: none; transition: background-color 0.15s ease, color 0.15s ease; }
.sidebar-nav a:hover,
.sidebar-foot a:hover { background: #f5f5f4; color: var(--ink); }
.sidebar-nav a.active,
.sidebar-foot a.active { background: var(--green-soft); color: var(--green-dark); font-weight: 700; }
.sidebar-nav i,
.sidebar-foot i { width: 1.25rem; text-align: center; }
.sidebar-foot { margin-top: auto; border-top: 1px solid var(--line); padding-top: .75rem; }
.sidebar-scrim { display: none; }
.workspace { min-width: 0; }
.topbar { min-height: var(--topbar); display: flex; align-items: center; gap: .85rem; padding: .5rem clamp(1rem, 3vw, 2rem); border-bottom: 1px solid var(--line); background: rgba(250,250,249,.94); position: sticky; top: 0; z-index: 1000; }
.sidebar-toggle-btn { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); color: var(--ink); cursor: pointer; padding: 0; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; flex-shrink: 0; }
.sidebar-toggle-btn:hover { background: #f5f5f4; border-color: #a8a29e; color: var(--ink); }
.sidebar-toggle-btn:focus-visible { outline: 3px solid var(--cyan) !important; outline-offset: 2px; }
.sidebar-toggle-btn i { font-size: 1.15rem; line-height: 1; }
.topbar-context { display: flex; align-items: center; gap: .85rem; min-width: 0; flex-shrink: 1; }
.topbar-divider { width: 1px; height: 22px; background: var(--line); flex-shrink: 0; }
.topbar-page-title { margin: 0; font-family: "Geist", system-ui, sans-serif; font-size: 1.18rem; font-weight: 700; letter-spacing: -.025em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }
.topbar-page-title.is-skeleton { color: transparent !important; user-select: none; pointer-events: none; background: #ccd5c4; border-radius: var(--radius-sm); width: clamp(6.5rem, 24vw, 11rem); max-width: 100%; height: 1.2em; display: inline-block; vertical-align: middle; }
.congregation span, .congregation strong { display: block; }
.congregation span { font-size: .72rem; color: var(--muted); }
.congregation strong { white-space: nowrap; }
.top-search { margin-left: auto; min-height: 44px; width: min(340px, 100%); display: flex; align-items: center; gap: .6rem; border: 1px solid #a8a29e; border-radius: var(--radius-sm); padding: 0 .8rem; background: var(--paper); flex-shrink: 1; }
.top-search input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); }
.top-search input::placeholder { color: var(--muted); opacity: 1; }
.top-search:focus-within { border-color: var(--green-dark); box-shadow: 0 0 0 .2rem rgba(14,116,144,.2); }
.topbar-spacer { margin-left: auto; }
.icon-button { width: 44px; height: 44px; display: inline-grid; place-items: center; border: 1px solid #a8a29e; border-radius: var(--radius-sm); color: var(--ink); background: var(--paper); text-decoration: none; flex-shrink: 0; }
.profile-button { min-height: 48px; display: flex; align-items: center; gap: .65rem; border: 0; background: transparent; color: var(--ink); text-align: left; padding: .25rem; border-radius: var(--radius-sm); flex-shrink: 0; }
.avatar { width: 36px; height: 36px; display: inline-grid; place-items: center; flex: 0 0 auto; background: var(--green-soft); color: var(--green-dark); border-radius: 50%; font-weight: 700; }
.profile-copy strong, .profile-copy small { display: block; max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.profile-copy small { color: var(--muted); font-size: .75rem; }
.topbar-actions { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; margin-left: auto; }
.lang-dropdown { position: relative; }
.lang-toggle-btn { height: 44px; display: inline-flex; align-items: center; gap: .4rem; padding: 0 .65rem; border: 1px solid #a8a29e; border-radius: var(--radius-sm); background: var(--paper); color: var(--ink); font-family: "Geist", system-ui, sans-serif; font-size: .85rem; font-weight: 600; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease; flex-shrink: 0; }
.lang-toggle-btn:hover { background: #f5f5f4; border-color: var(--ink); }
.lang-toggle-btn:focus-visible { outline: 3px solid var(--cyan) !important; outline-offset: 2px; }
.lang-toggle-btn i.bi-translate { font-size: .95rem; color: var(--green-dark); }
.lang-toggle-btn i.bi-chevron-down { font-size: .7rem; color: var(--muted); }
.lang-current-code { font-family: "Oxanium", monospace; font-weight: 700; letter-spacing: .03em; }
.lang-dropdown-menu { min-width: 190px; padding: .35rem 0; }
.lang-dropdown-menu .dropdown-header { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: .35rem .85rem .25rem; }
.lang-item-form { margin: 0; }
.lang-dropdown-menu .dropdown-item { font-size: .86rem; padding: .45rem .85rem; font-weight: 500; border: 0; background: transparent; width: 100%; text-align: left; cursor: pointer; }
.lang-dropdown-menu .dropdown-item:hover, .lang-dropdown-menu .dropdown-item:focus { background: #f5f5f4; color: var(--ink); }
.lang-dropdown-menu .dropdown-item.active { background: var(--green-soft); color: var(--green-dark); font-weight: 700; }
.profile-lang-select-form { margin: 0; flex-shrink: 0; }
.profile-lang-select-form .form-select-sm { width: auto; min-width: 140px; font-size: .84rem; font-weight: 500; border-color: #cbd5e1; background-color: var(--paper); cursor: pointer; }
.dropdown-menu { border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.content { width: min(1540px, 100%); margin: 0 auto; padding: clamp(1.15rem, 3vw, 2rem); }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin: .25rem 0 1rem; }
.page-head.compact { align-items: center; }
.page-head h1 { font-size: clamp(1.35rem, 2vw, 1.7rem); line-height: 1.15; margin-bottom: .25rem; }
.page-head p, .panel header p, .form-panel header p { margin-bottom: 0; max-width: 68ch; }
.page-action-strip { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: .25rem 0 1rem; flex-wrap: wrap; }
.page-lead { margin: 0; color: var(--muted); font-size: .88rem; max-width: 68ch; }
.filter-bar-action, .map-toolbar-actions { display: flex; align-items: center; gap: .5rem; }
.back-link { display: inline-flex; align-items: center; gap: .4rem; margin-bottom: 1rem; font-weight: 600; text-decoration: none; }
.title-line { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.title-line h1 { margin-bottom: 0; }
.action-cluster, .row-actions, .form-actions { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.row-actions form { margin: 0; }

.metric-rail { display: grid; grid-template-columns: repeat(6, minmax(120px, 1fr)); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); margin-bottom: 1.4rem; overflow: hidden; }
.metric-rail article, .metric-rail .metric-card { min-height: 112px; padding: 1.1rem; border: 0; border-right: 1px solid var(--line); display: flex; flex-direction: column; justify-content: space-between; text-decoration: none; color: inherit; transition: background-color .15s ease, box-shadow .15s ease; position: relative; background: transparent; text-align: left; font: inherit; width: 100%; }
.metric-rail article:last-child, .metric-rail .metric-card:last-child { border-right: 0; }
.metric-rail a.metric-card, .metric-rail button.metric-card { cursor: pointer; }
.metric-rail a.metric-card:hover, .metric-rail button.metric-card:hover { background: #f8fafc; }
.metric-rail a.metric-card:focus-visible, .metric-rail button.metric-card:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; z-index: 2; }
.metric-rail .metric-card.is-active { background: #ecfdf5; box-shadow: inset 0 -3px 0 var(--primary); }
.metric-rail .metric-card.is-active strong { color: var(--primary); }
.metric-rail span { color: var(--muted); font-size: .82rem; }
.metric-rail strong { font-family: "Geist", system-ui, sans-serif; font-size: 2.05rem; line-height: 1; font-variant-numeric: tabular-nums; color: var(--foreground, #1c1917); }
.metric-rail .metric-alert { background: #fff1ef; }
.metric-rail a.metric-alert:hover, .metric-rail button.metric-alert:hover { background: #fee4e2; }
.metric-rail .metric-alert strong { color: var(--red); }
.metric-rail .metric-card.metric-alert.is-active { background: #fee2e2; box-shadow: inset 0 -3px 0 var(--red); }
.metric-rail .metric-card.metric-alert.is-active strong { color: var(--red); }
.dashboard-grid { display: grid; grid-template-columns: minmax(280px, .72fr) minmax(420px, 1.28fr); gap: 1.4rem; margin-bottom: 1.4rem; }
.panel, .form-panel, .map-editor-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.panel { padding: 1.25rem; }
.panel header, .form-panel > header, .map-editor-panel > header, .campaign-card > header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.chart-wrap { height: 230px; margin: .5rem auto; }
.activity-chart { height: 290px; }
.chart-legend { display: grid; gap: .5rem; border-top: 1px solid var(--line); padding-top: .8rem; }
.chart-legend span, .chart-legend a.chart-legend-link, .chart-legend button.chart-legend-btn { display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: .5rem; color: var(--muted); text-decoration: none; padding: 4px 6px; border-radius: var(--radius-sm, 6px); transition: background .15s ease, color .15s ease; border: 0; background: transparent; font: inherit; text-align: left; width: 100%; cursor: pointer; }
.chart-legend a.chart-legend-link:hover, .chart-legend button.chart-legend-btn:hover { background: #f8fafc; color: var(--foreground); }
.chart-legend a.chart-legend-link:focus-visible, .chart-legend button.chart-legend-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: -1px; }
.chart-legend button.chart-legend-btn.is-active { background: #ecfdf5; color: var(--foreground); font-weight: 600; }
.chart-legend a.chart-legend-link strong, .chart-legend button.chart-legend-btn strong { color: var(--foreground); font-variant-numeric: tabular-nums; }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.legend-dot.available { background: var(--green-dark); }
.legend-dot.assigned { background: var(--blue); }
.legend-dot.overdue { background: var(--red); }
.data-panel { padding: 0; overflow: visible; min-height: 220px; }
.panel-heading { padding: 1.2rem 1.25rem .9rem; display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.panel-heading h2 { margin-bottom: .3rem; }
.panel-heading-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.panel-heading > a, .panel-heading-actions a { white-space: nowrap; font-weight: 600; }
#dashboard-table-container { transition: opacity .15s ease; }
.app-table { margin: 0; --bs-table-bg: transparent; }
.app-table th { padding: .8rem 1rem; color: var(--muted); font-size: .78rem; font-weight: 600; border-color: var(--line); white-space: nowrap; }
.app-table td { padding: .85rem 1rem; vertical-align: middle; border-color: #e7e5e4; }
.app-table tbody tr:hover { --bs-table-bg-state: #f0fdf4; }
.app-table a { font-weight: 600; }
.account-state { display: inline-flex; align-items: center; gap: .35rem; color: var(--muted); font-size: .84rem; white-space: nowrap; }
.account-state.linked { color: var(--green-dark); font-weight: 600; }
.account-state i { font-size: 1rem; }
.status { width: fit-content; display: inline-flex; align-items: center; gap: .4rem; border-radius: 0; padding: .28rem .58rem; font-size: .78rem; font-weight: 700; white-space: nowrap; }
.status i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status.available { color: #185b32; background: #d8eddc; }
.status.assigned { color: #164b8d; background: var(--blue-soft); }
.status.overdue { color: #8f1710; background: var(--red-soft); }
.status.inactive { color: #4b5552; background: #e4e6e5; }
.empty-state { text-align: center; padding: clamp(2rem, 6vw, 4.5rem) 1.25rem; max-width: 640px; margin: 0 auto; }
.empty-state i { font-size: 2rem; color: var(--green-dark); }
.empty-state h2, .empty-state h3 { margin: .7rem 0 .35rem; }
.empty-state p { max-width: 48ch; margin-inline: auto; }
.empty-state.compact { padding: 2rem 1rem; }
.empty-inline { display: flex; align-items: center; gap: .6rem; min-height: 52px; padding: .75rem 1rem; background: var(--green-soft); border-radius: var(--radius-sm); color: var(--green-dark); }
.pagination-nav { display: flex; justify-content: space-between; align-items: center; gap: 1rem; border-top: 1px solid var(--line); padding: 1rem; color: var(--muted); }

.filter-bar, .map-toolbar { display: flex; align-items: end; gap: .75rem; padding: .9rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); margin-bottom: 1rem; }
.filter-bar label { flex: 1 1 170px; }
.filter-bar label > span, .stack-form label > span, .form-grid label > span, .coordinate-pair label > span, .public-section label > span { display: block; color: var(--muted); font-size: .78rem; font-weight: 600; margin-bottom: .3rem; }
.form-panel, .map-editor-panel { padding: 1.25rem; }
.form-panel > header, .map-editor-panel > header { padding-bottom: 1rem; border-bottom: 1px solid var(--line); margin-bottom: 1rem; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.form-grid .full { grid-column: 1 / -1; }
.form-label-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: .3rem; line-height: 1.5; }
.form-label-row > span, .form-label-row > label { display: block; color: var(--muted); font-size: .78rem; font-weight: 600; margin: 0; line-height: inherit; }
.form-label-action { display: inline-flex; align-items: center; min-height: auto !important; height: auto !important; padding: 0 !important; margin: 0 !important; border: 0 !important; background: transparent !important; color: var(--green-dark); font-size: .78rem !important; font-weight: 600; line-height: inherit !important; text-decoration: none; cursor: pointer; }
.form-label-action:hover { color: var(--green); text-decoration: underline; }
.form-label-action:focus-visible { outline: 2px solid var(--cyan) !important; outline-offset: 2px; }
.stack-form { display: grid; gap: .85rem; }
.stack-form > * { margin-bottom: 0; }
.stack-form .form-check { min-height: auto; padding: .15rem 0; }
.check-field, .form-check { min-height: 44px; display: flex; align-items: center; gap: .55rem; padding-left: 0; }
.form-check .form-check-input, .check-field .form-check-input { float: none; margin: 0; flex-shrink: 0; }
.form-check .form-check-label, .form-check > span, .check-field > span { margin: 0 !important; padding: 0; line-height: 1.4; color: var(--ink) !important; font-size: .88rem; font-weight: 500; cursor: pointer; user-select: none; }
.field-validation, .validation-summary { color: var(--red); font-size: .82rem; }
.validation-summary:empty { display: none; }
.territory-form { display: grid; grid-template-columns: minmax(320px, .72fr) minmax(480px, 1.28fr); gap: 1rem; align-items: start; }
.territory-form .sticky-actions { grid-column: 1 / -1; }
.territory-editor-map { height: min(680px, calc(100dvh - 260px)); min-height: 460px; border-radius: var(--radius-md); background: #e7e5e4; }
.leaflet-control-zoom a { width: 44px !important; height: 44px !important; line-height: 44px !important; font-size: 18px !important; }
.leaflet-draw-toolbar a { width: 44px !important; height: 44px !important; }
.leaflet-control-layers { border-radius: var(--radius-md) !important; border: 1px solid #8b918f !important; box-shadow: var(--shadow-sm) !important; font-family: inherit !important; font-size: .84rem !important; padding: .45rem .75rem !important; background: rgba(255,255,255,.96) !important; }
.leaflet-control-layers-toggle { width: 44px !important; height: 44px !important; }
.leaflet-control-layers-base label { display: flex; align-items: center; gap: .45rem; cursor: pointer; padding: .2rem 0; font-weight: 500; }
.leaflet-interactive:focus { outline: none; }
.leaflet-interactive:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
.map-editor-panel output { color: var(--green-dark); font-weight: 700; }
.geojson-fallback { margin-top: .8rem; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .7rem; background: var(--paper); }
.geojson-fallback summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 700; color: var(--green-dark); }
.geojson-fallback label { display: block; margin: .45rem 0 .35rem; font-size: .82rem; font-weight: 600; }
.geojson-fallback textarea { min-height: 132px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .82rem; }
.geojson-fallback p { margin: .45rem 0 0; font-size: .78rem; }
.map-error { padding: .75rem; background: var(--red-soft); color: var(--red); margin-top: .7rem; border-radius: var(--radius-sm); }
.sticky-actions { position: sticky; bottom: .75rem; z-index: 800; display: flex; justify-content: flex-end; gap: .6rem; padding: .7rem; background: rgba(255,250,242,.96); border: 1px solid var(--line); border-radius: var(--radius-md); }

/* Map Page Layout - Full Workspace Immersion */
.content-map,
.content:has(.map-page) {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0.45rem 0.85rem 0.55rem !important;
  height: calc(100dvh - var(--topbar));
  display: flex;
  flex-direction: column;
}

.map-page {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}

.map-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.65rem;
  flex-shrink: 0;
}
.map-page-head h1 {
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  margin-bottom: 0.15rem;
}
.map-page-head p {
  margin-bottom: 0;
  font-size: 0.88rem;
}

.map-toolbar {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.6rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  margin-bottom: 0.45rem;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.map-toolbar label:not(.map-search) {
  flex: 1 1 115px;
  min-height: 36px;
  height: 36px;
  border: 1px solid #8b918f;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--paper);
  display: flex;
  align-items: center;
  box-sizing: border-box;
}
.map-toolbar label:not(.map-search) select {
  width: 100%;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  padding: 0 0.55rem;
  font-size: 0.835rem;
  box-sizing: border-box;
}
.map-toolbar label:not(.map-search):focus-within {
  border-color: var(--green-dark);
  box-shadow: 0 0 0 2px rgba(4, 120, 87, 0.2);
}

.map-search {
  min-width: 190px;
  flex: 2 1 220px;
  min-height: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  border: 1px solid #8b918f;
  border-radius: var(--radius-sm);
  padding: 0 0.65rem;
  background: var(--paper);
  overflow: hidden;
  box-sizing: border-box;
}
.map-search i {
  color: var(--muted);
  font-size: 0.85rem;
  flex-shrink: 0;
}
.map-search input {
  flex: 1;
  min-width: 0;
  height: 100% !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  color: var(--ink);
  padding: 0 !important;
  font-size: 0.835rem;
  box-shadow: none !important;
}
.map-search:focus-within {
  border-color: var(--green-dark);
  box-shadow: 0 0 0 2px rgba(4, 120, 87, 0.2);
}

.map-toolbar .btn {
  min-height: 36px;
  height: 36px;
  padding: 0 0.65rem;
  font-size: 0.835rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
}
.map-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.btn-sidebar-toggle,
.btn-fullscreen-toggle {
  min-width: 36px;
  width: 36px;
  height: 36px;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid #8b918f;
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
  font-size: 0.95rem;
  transition: all 0.15s ease;
}
.btn-sidebar-toggle:hover,
.btn-fullscreen-toggle:hover {
  background: #f5f5f4;
  border-color: #57534e;
  color: var(--ink);
}
.btn-sidebar-toggle.active,
.btn-fullscreen-toggle.active {
  background: #e7e5e4;
  border-color: #57534e;
}

.map-split-container {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 0.55rem;
  flex: 1;
  min-height: 0;
  height: 100%;
  transition: grid-template-columns 0.18s ease;
}

.map-split-container.is-sidebar-collapsed {
  grid-template-columns: 0px 1fr;
  gap: 0;
}

.map-split-container.is-sidebar-collapsed .map-sidebar {
  display: none !important;
}

.map-sidebar {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}

.map-stage {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #e1e6df;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.map-stage:fullscreen {
  width: 100vw !important;
  height: 100vh !important;
  border-radius: 0 !important;
  border: 0 !important;
}

.map-sidebar-expand-pill {
  position: absolute;
  top: 10px;
  left: 54px;
  z-index: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.65rem;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid #78716c;
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  transition: background-color 0.15s ease;
}
.map-sidebar-expand-pill:hover {
  background: #f5f5f4;
}
.map-sidebar-expand-pill[hidden] {
  display: none !important;
}

.territory-map {
  flex: 1;
  width: 100%;
  min-height: 0;
  height: 100%;
  position: relative;
}

.map-state { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); z-index: 600; display: flex; align-items: center; gap: .55rem; padding: .75rem 1rem; border-radius: var(--radius-sm); background: var(--paper); border: 1px solid var(--line); }
.map-state.error { color: var(--red); }
.map-state button { border: 0; background: transparent; color: var(--green-dark); font-weight: 700; text-decoration: underline; }
.map-display-trigger { position: absolute; z-index: 600; bottom: 16px; left: 16px; min-height: 44px; display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .7rem; border: 1px solid #68736f; border-radius: var(--radius-sm); background: rgba(255,255,255,.97); color: var(--ink); font-size: .875rem; font-weight: 700; }
.map-display-trigger:hover { background: #f5f5f4; border-color: #45514e; }
.map-display-trigger .bi { font-size: 1rem; color: var(--green-dark); }
.map-display-count { margin-left: .15rem; padding-left: .55rem; border-left: 1px solid #cbd5e1; color: #475569; font-size: .75rem; font-weight: 600; white-space: nowrap; }
.map-display-trigger[hidden],
.map-legend[hidden],
.map-status-list[hidden] { display: none; }
.map-legend { position: absolute; z-index: 650; bottom: 16px; left: 16px; display: grid; grid-template-rows: auto minmax(0, 1fr); border-radius: var(--radius-sm); background: rgba(255,255,255,.98); border: 1px solid #68736f; width: min(310px, calc(100% - 32px)); max-width: 310px; max-height: min(420px, calc(100% - 32px)); overflow: hidden; }
.map-display-header { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding-left: .75rem; border-bottom: 1px solid #cbd5e1; }
.map-display-header > strong { font-size: .9375rem; }
.map-display-close { width: 44px; height: 44px; display: grid; place-items: center; flex: 0 0 auto; padding: 0; border: 0; background: transparent; color: #475569; }
.map-display-close:hover { background: #f5f5f4; color: var(--ink); }
.map-display-body { min-height: 0; overflow-y: auto; padding: .45rem .75rem .75rem; scrollbar-width: thin; overscroll-behavior: contain; }
.map-status-disclosure { width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .25rem 0; border: 0; background: transparent; color: var(--ink); text-align: left; }
.map-status-disclosure > strong { font-size: .875rem; }
.map-status-list { display: grid; gap: .35rem; padding: 0 0 .35rem; }
.map-status-item { display: flex; align-items: center; gap: .45rem; font-size: .8125rem; }
.legend-check-icon { width: 10px; font-size: 0.75rem; display: inline-flex; align-items: center; justify-content: center; color: #059669; }
.map-layer-section { min-width: 0; }
.map-layer-heading { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.map-layer-heading > strong { font-size: .875rem; }
.map-layer-disclosure { min-width: 112px; justify-content: flex-end; padding: .35rem .2rem; color: #475569; font-size: .8125rem; }
.map-layer-options { min-width: 0; margin: 0; padding: 0; border: 0; }
.map-layer-option { min-height: 44px; margin: 0; padding: .25rem .2rem; display: flex; align-items: center; gap: .55rem; cursor: pointer; color: var(--ink); font-size: .875rem; line-height: 1.3; }
.map-layer-option .form-check-input { float: none; flex: 0 0 auto; margin: 0; cursor: pointer; }
.map-layer-option-child { padding-left: 1.6rem; color: var(--muted); font-size: .8125rem; }
.map-layer-option-child .form-check-input { width: 1.125rem; height: 1.125rem; }
.map-layer-dependent { min-width: 0; }
.map-layer-dependent.is-disabled .map-layer-option { opacity: .62; cursor: not-allowed; }
.map-layer-dependency,
.map-layer-saved-note,
.map-layer-storage-note { display: block; margin: -.15rem .2rem .35rem 1.6rem; color: var(--muted); font-size: .75rem; line-height: 1.4; }
.map-layer-saved-note { margin: .35rem 0 0; padding: .45rem .55rem; border: 1px solid #cbd5e1; background: #f8fafc; color: #475569; }
.map-layer-storage-note { margin: .4rem 0 0; }
.kdl-details-panel { margin-top: .35rem; padding-top: .35rem; border-top: 1px solid #cbd5e1; }
.kdl-grid-head,
.kdl-item-row { display: grid; grid-template-columns: minmax(0, 1fr) 56px 76px; align-items: center; column-gap: .15rem; }
.kdl-grid-head { min-height: 44px; border-bottom: 1px solid #cbd5e1; color: #475569; font-size: .75rem; font-weight: 700; }
.kdl-grid-head > span { padding-left: .2rem; }
.kdl-column-toggle { min-height: 44px; display: flex; align-items: center; justify-content: center; gap: .25rem; margin: 0; cursor: pointer; text-align: center; line-height: 1.15; }
.kdl-column-toggle .form-check-input { width: 1.125rem; height: 1.125rem; flex: 0 0 auto; margin: 0; cursor: pointer; }
.kdl-items-container { max-height: 220px; overflow-y: auto; padding-right: 2px; scrollbar-width: thin; }
.kdl-items-container::-webkit-scrollbar { width: 6px; }
.kdl-items-container::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 4px; }
.kdl-item-row { min-height: 44px; border-bottom: 1px dotted #cbd5e1; font-size: .8125rem; }
.kdl-item-name { min-width: 0; display: flex; align-items: center; gap: .4rem; padding: .35rem .2rem; overflow-wrap: anywhere; line-height: 1.3; }
.kdl-color-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.kdl-checkbox-target,
.kdl-unavailable { width: 44px; height: 44px; display: grid; place-items: center; justify-self: center; margin: 0; }
.kdl-checkbox-target { cursor: pointer; }
.kdl-checkbox-target .form-check-input { width: 1.125rem; height: 1.125rem; margin: 0; cursor: pointer; }
.kdl-checkbox-target:has(.form-check-input:disabled),
.kdl-column-toggle:has(.form-check-input:disabled) { opacity: .55; cursor: not-allowed; }
.kdl-unavailable { color: #64748b; font-size: .8125rem; }
.kdl-empty-state { padding: .85rem .5rem; color: var(--muted); font-size: .8125rem; line-height: 1.4; text-align: center; }
.kdl-selection-summary { margin: .55rem 0 0; color: #475569; font-size: .8125rem; font-weight: 600; line-height: 1.4; }
.map-layer-reset { width: 100%; margin-top: .55rem; font-size: .8125rem; }
.territory-label { color: var(--ink); background: #fff !important; border: 1px solid #4d5b57 !important; box-shadow: none !important; font-weight: 800; padding: .15rem .35rem !important; }
.territory-label::before { display: none !important; }
.territory-label.is-completed { border-color: #059669 !important; }
.territory-label .label-check { color: #059669; font-weight: 900; margin-left: 2px; font-size: 0.85em; line-height: 1; display: inline-block; }
.kdl-boundary-label { background: rgba(255, 255, 255, 0.92) !important; border: 1px solid #475569 !important; font-weight: 700 !important; font-size: 0.78rem !important; color: #1e293b !important; padding: .15rem .45rem !important; box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important; border-radius: 0 !important; }
.kdl-boundary-label::before { display: none !important; }
.kelurahan-boundary-tooltip { background: rgba(248, 250, 252, 0.9) !important; border: 1px dashed #64748b !important; font-weight: 600 !important; font-size: 0.75rem !important; color: #334155 !important; padding: .1rem .4rem !important; box-shadow: 0 1px 4px rgba(0,0,0,0.1) !important; border-radius: 0 !important; pointer-events: none !important; }
.kelurahan-boundary-tooltip::before { display: none !important; }
#territory-map.hide-kdl-labels .kdl-boundary-label,
.hide-kdl-labels .kdl-boundary-label { display: none !important; }
#territory-map.hide-kelurahan-labels .kelurahan-boundary-tooltip,
.hide-kelurahan-labels .kelurahan-boundary-tooltip { display: none !important; }
.map-legend hr { margin: 0.2rem 0; border: 0; border-top: 1px solid #cbd5e1; opacity: 0.8; }
.map-popup { min-width: 210px; }
.map-popup h3 { font-family: "Geist", system-ui, sans-serif; font-size: 1.1rem; margin-bottom: .2rem; }
.map-popup p { margin-bottom: .55rem; color: #45514e; }
.map-popup-actions a,
.map-popup-actions button {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .35rem .75rem;
  border-radius: 0;
  border: 1px solid #68736f;
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  font-size: .88rem;
  cursor: pointer;
  line-height: 1.2;
  transition: background .12s, border-color .12s;
}
.map-popup-actions a:hover,
.map-popup-actions button:hover {
  background: #eae6dd;
  border-color: #45514e;
}

/* Vertex Marker styling: bulat kecil */
.leaflet-div-icon,
.leaflet-editing-icon,
.leaflet-marker-icon.leaflet-div-icon,
.leaflet-touch .leaflet-editing-icon,
.leaflet-touch .leaflet-div-icon {
  border-radius: 50% !important;
  width: 9px !important;
  height: 9px !important;
  margin-left: -4.5px !important;
  margin-top: -4.5px !important;
  background: #ffffff !important;
  border: 2px solid #7fa51e !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45) !important;
  transition: transform 0.12s ease, background-color 0.12s ease;
}
.leaflet-div-icon:hover,
.leaflet-editing-icon:hover,
.leaflet-marker-icon.leaflet-div-icon:hover,
.leaflet-touch .leaflet-editing-icon:hover,
.leaflet-touch .leaflet-div-icon:hover {
  transform: scale(1.4);
  background: #d4edda !important;
  border-color: #1b5e20 !important;
}
.leaflet-edit-marker-selected {
  background: #ffc107 !important;
  border-color: #e65100 !important;
}

.map-header-actions { display: flex; align-items: center; gap: .6rem; }
.mode-toggle .btn { min-height: 44px; font-weight: 600; font-size: .88rem; }
.btn-filter-group,
#btn-select-all-territories,
#btn-clear-all-territories,
.btn-open-boundary,
#kdl-boundary-color {
  min-height: 44px !important;
}
#kdl-boundary-color { width: 44px !important; height: 44px !important; }
.mode-toggle .btn.active { background: var(--green); border-color: var(--green); color: var(--ink); }

.map-sidebar-header { padding: .75rem; border-bottom: 1px solid var(--line); background: var(--paper); display: flex; flex-direction: column; gap: .5rem; }
.sidebar-title-row { display: flex; align-items: center; justify-content: space-between; }
.sidebar-title-row h2 { font-size: .95rem; margin: 0; font-weight: 700; display: flex; align-items: center; gap: .35rem; }
.sidebar-title-actions { display: flex; align-items: center; gap: .35rem; }
.btn-sidebar-collapse {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: #57534e;
  cursor: pointer;
  padding: 0;
  transition: all 0.15s ease;
}
.btn-sidebar-collapse:hover {
  background: #f5f5f4;
  color: var(--ink);
  border-color: #8b918f;
}
.sidebar-search-box { position: relative; }
.sidebar-search-box i { position: absolute; left: .65rem; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: .82rem; pointer-events: none; }
.sidebar-search-box input { padding-left: 1.9rem; }
.sidebar-type-filter { min-height: 44px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .55rem; margin: 0; }
.sidebar-type-filter > span { color: #475569; font-size: .8125rem; font-weight: 600; }
.sidebar-type-filter .form-select { min-width: 0; min-height: 44px; font-size: .8125rem; }
.territory-accordion-list { flex: 1; overflow-y: auto; padding: .5rem; padding-bottom: 3rem; }

.area-group { margin-bottom: .35rem; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); }
.area-group.open { border-color: #7b8581; box-shadow: var(--shadow-sm); }
.area-group-header { display: flex; align-items: center; justify-content: space-between; padding: .55rem .75rem; background: var(--paper); cursor: pointer; user-select: none; font-weight: 600; font-size: .86rem; gap: .4rem; transition: background .12s; }
.area-group-header:hover { background: #eae6dd; }
.area-group.open .area-group-header { background: #e3dfd6; font-weight: 700; }
.area-group-title { display: flex; align-items: center; gap: .4rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.area-group-chevron { font-size: .72rem; color: var(--muted); transition: transform .18s ease; }
.area-group.open .area-group-chevron { transform: rotate(90deg); color: var(--ink); }
.area-group-body { display: none; border-top: 1px solid var(--line); background: var(--surface); }
.area-group.open .area-group-body { display: block; }

.territory-item { display: flex; align-items: center; justify-content: space-between; padding: .45rem .65rem; border-bottom: 1px solid rgba(0,0,0,.04); cursor: pointer; font-size: .83rem; gap: .4rem; transition: background .12s; }
.territory-item:hover { background: rgba(4, 120, 87, .1); }
.territory-item.active { background: var(--green-soft); font-weight: 600; }
.territory-item:last-child { border-bottom: 0; }
.territory-item-left { display: flex; align-items: center; gap: .45rem; min-width: 0; }
.territory-item-info { display: flex; flex-direction: column; min-width: 0; }
.territory-item-num { font-weight: 700; color: var(--ink); white-space: nowrap; }
.territory-item-kdl { font-size: .72rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.territory-item-right { display: flex; align-items: center; gap: .35rem; }
.territory-item-actions { display: none; gap: .25rem; }
.mode-edit-active .territory-item-actions { display: flex; }
.territory-item-quick-actions { display: inline-flex; align-items: center; gap: .25rem; }
.mode-edit-active .territory-item-quick-actions { display: none; }
.territory-item-quick-actions .btn {
  width: 26px;
  height: 26px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .82rem;
  border-radius: 0;
  line-height: 1;
}

/* Edit Mode Banner - Clean Top Strip inside Map Stage */
.map-edit-banner {
  position: relative;
  width: 100%;
  background: #f0fdf4;
  border-bottom: 1px solid #a7f3d0;
  padding: 0.35rem 0.75rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
  z-index: 50;
  flex-shrink: 0;
  font-size: 0.8125rem;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}
.map-edit-banner[hidden] {
  display: none !important;
}
.edit-banner-info {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink);
}
.edit-banner-info i {
  color: var(--green);
  font-size: 1.1rem;
  flex-shrink: 0;
}
.edit-banner-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}
.active-poly-label {
  font-weight: 700;
  font-size: 0.88rem;
  margin-right: 0.3rem;
}

@media (max-width: 992px) {
  .content-map,
  .content:has(.map-page) {
    height: auto;
  }
  .map-split-container { grid-template-columns: 1fr; height: auto; }
  .map-sidebar { max-height: 380px; height: auto; }
  .map-stage { min-height: 500px; height: 65vh; }
}

.territory-detail-grid { display: grid; grid-template-columns: minmax(300px, .72fr) minmax(480px, 1.28fr); gap: 1rem; margin-bottom: 1rem; }
.detail-ledger, .detail-map-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.detail-ledger { padding: 1.25rem; }
.detail-ledger dl { margin: 0; }
.detail-ledger dl > div { display: grid; grid-template-columns: 150px 1fr; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.detail-ledger dt { color: var(--muted); font-weight: 500; }
.detail-ledger dd { margin: 0; font-weight: 600; }
.note-block { padding-top: 1.2rem; }
.note-block h2, .qr-block h2 { font-size: 1.15rem; margin-bottom: .35rem; }
.qr-block { display: grid; grid-template-columns: 104px 1fr; gap: 1rem; align-items: center; margin-top: 1rem; padding: 1rem; background: var(--paper); border-radius: var(--radius-md); }
.qr-block img { width: 104px; height: 104px; }
.qr-block p { font-size: .85rem; margin-bottom: .35rem; }
.inline-links { display: flex; flex-wrap: wrap; gap: .7rem; }
.detail-map-panel { position: relative; min-height: 540px; }
.detail-map { height: 100%; min-height: 540px; }
.map-caption { position: absolute; z-index: 500; left: 16px; top: 16px; background: rgba(255,255,255,.96); border: 1px solid #9aa49f; border-radius: var(--radius-sm); padding: .65rem .8rem; }
.map-caption strong, .map-caption span { display: block; }
.detail-history { margin-top: 1rem; }
.archive-action { margin-top: 1rem; }

.assignment-create { margin-bottom: 1rem; }
.s13-export-panel { margin-bottom: 1rem; }
.s13-export-panel header { padding-bottom: .85rem; border-bottom: 1px solid var(--line); }
.s13-export-panel h2 { margin-bottom: .3rem; }
.s13-export-form { display: grid; grid-template-columns: minmax(220px, .58fr) minmax(420px, 1.42fr); align-items: end; gap: 1rem; margin-top: 1rem; }
.s13-export-form label > span { display: block; color: var(--muted); font-size: .78rem; font-weight: 600; margin-bottom: .3rem; }
.s13-export-actions { display: grid; grid-template-columns: minmax(190px, .78fr) minmax(270px, 1.22fr); gap: .6rem; }
.s13-export-note { margin: .8rem 0 0; color: var(--muted); font-size: .82rem; }
.return-target-summary { background: var(--paper); border: 1px solid var(--line); }
.return-details { position: relative; }
.return-details summary { cursor: pointer; color: var(--green-dark); font-weight: 700; min-height: 44px; display: flex; align-items: center; }
.coordinate-pair { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.modal-content { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: 0 22px 60px rgba(31,42,40,.22); }
.modal-header, .modal-footer { border-color: var(--line); }
.modal-title { font-size: 1.45rem; }
.sensitive-panel { border-color: #d9aea9; }

.campaign-create { margin-bottom: 1rem; }
.campaign-create > summary { min-height: 48px; display: flex; align-items: center; gap: .5rem; cursor: pointer; font-weight: 700; }
.campaign-create[open] > summary { margin-bottom: 1rem; }
.territory-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .35rem .8rem; border: 1px solid var(--line); border-radius: var(--radius-md); padding: .75rem; max-height: 220px; overflow: auto; }
.territory-picker legend { float: none; width: auto; padding: 0 .35rem; font-size: .82rem; font-weight: 700; }
.campaign-list { display: grid; gap: 1rem; }
.campaign-card > p { max-width: 70ch; }
.campaign-progress { display: grid; grid-template-columns: 1fr auto; gap: .45rem 1rem; align-items: center; }
.campaign-progress > div:first-child { grid-column: 1 / -1; display: flex; justify-content: space-between; }
.progress { height: 10px; background: #d9dedb; }
.progress-bar { background: var(--green-dark); }
.campaign-territories { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; }
.campaign-territories form { margin: 0; }
.territory-check { min-width: 58px; min-height: 44px; display: flex; align-items: center; justify-content: center; gap: .35rem; border: 1px solid #a8a29e; border-radius: var(--radius-sm); background: var(--paper); color: var(--ink); }
.territory-check.done { background: var(--green-soft); border-color: var(--green); color: var(--green-dark); }
.aging-strip { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; margin-bottom: 1rem; background: var(--surface); }
.aging-strip div { padding: 1rem; border-right: 1px solid var(--line); }
.aging-strip div:last-child { border: 0; }
.aging-strip span, .aging-strip strong { display: block; }
.aging-strip span { color: var(--muted); font-size: .78rem; }
.aging-strip strong { font-family: "Geist", system-ui, sans-serif; font-size: 1.65rem; }
.admin-menu { width: min(880px, 100%); display: grid; gap: .75rem; }
.admin-menu > a { min-height: 92px; display: grid; grid-template-columns: 48px minmax(0, 1fr) 24px; align-items: center; gap: 1rem; padding: 1rem 1.15rem; border: 1px solid #a8a29e; border-radius: var(--radius-md); background: var(--surface); color: var(--ink); text-decoration: none; }
.admin-menu > a:hover { border-color: var(--green); background: #f0fdf4; color: var(--ink); }
.admin-menu-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--green-soft); color: var(--green-dark); font-size: 1.25rem; }
.admin-menu-copy strong, .admin-menu-copy small { display: block; }
.admin-menu-copy strong { margin-bottom: .2rem; font-family: "Geist", system-ui, sans-serif; font-size: 1.25rem; }
.admin-menu-copy small { color: var(--muted); font-size: .9rem; }
.admin-menu-chevron { color: var(--green-dark); }
.admin-form-page { width: min(980px, 100%); }
.telegram-layout { display: grid; grid-template-columns: minmax(260px, .75fr) minmax(0, 1.25fr); gap: 1rem; align-items: start; }
.telegram-status-panel { padding: 1.25rem; }
.telegram-status-list { display: grid; gap: .8rem; margin: 1rem 0 0; }
.telegram-status-list > div { padding-top: .8rem; border-top: 1px solid var(--line); }
.telegram-status-list dt { color: var(--muted); font-size: .8rem; font-weight: 600; }
.telegram-status-list dd { margin: .16rem 0 0; font-weight: 600; overflow-wrap: anywhere; }
.telegram-result { display: flex; gap: .65rem; margin-top: 1rem; padding: .8rem; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.telegram-result > i { font-size: 1.15rem; flex: 0 0 auto; }
.telegram-result strong, .telegram-result span, .telegram-result small { display: block; }
.telegram-result span { margin-top: .15rem; }
.telegram-result small { margin-top: .35rem; color: var(--muted); font-size: .78rem; }
.telegram-result.is-success { background: #d8eddc; border-color: #87b690; color: #185b32; }
.telegram-result.is-error { background: var(--red-soft); border-color: #d9aea9; color: #8f1710; }
.telegram-form-panel { min-width: 0; }
.telegram-form-panel label { display: grid; gap: .3rem; }
.telegram-form-panel label > span { color: var(--muted); font-size: .78rem; font-weight: 600; }
.form-hint { color: var(--muted); font-size: .8rem; line-height: 1.45; }
.telegram-secret-note { display: flex; gap: .65rem; padding: .8rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); color: var(--ink); }
.telegram-secret-note i { color: var(--green-dark); font-size: 1.15rem; }
.telegram-secret-note p { margin: 0; color: inherit; font-size: .88rem; }
.telegram-test-form { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.telegram-test-form strong { display: block; }
.telegram-test-form p { margin: .15rem 0 0; font-size: .88rem; }
.telegram-discovery-form, .telegram-chat-picker { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.telegram-discovery-form { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.telegram-discovery-form strong { display: block; }
.telegram-discovery-form p { margin: .15rem 0 0; font-size: .88rem; }
.telegram-chat-picker fieldset { display: grid; gap: .5rem; margin: 0 0 1rem; padding: 0; border: 0; }
.telegram-chat-picker legend { margin-bottom: .65rem; font-weight: 700; }
.telegram-chat-picker label { display: flex; align-items: flex-start; gap: .65rem; padding: .7rem .8rem; border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; }
.telegram-chat-picker label:has(input:checked) { border-color: var(--green); background: var(--green-soft); }
.telegram-chat-picker small { display: block; margin-top: .12rem; color: var(--muted); }
.telegram-help { width: min(900px, 100%); margin-top: 1.25rem; padding: 1.25rem; border-top: 1px solid var(--line); }
.telegram-help h2 { margin-bottom: .65rem; }
.telegram-help ol { max-width: 72ch; margin: 0; padding-left: 1.35rem; }
.telegram-help li + li { margin-top: .5rem; }
.role-access-layout { width: min(1120px, 100%); display: grid; grid-template-columns: minmax(245px, .62fr) minmax(0, 1.38fr); gap: 1rem; align-items: start; }
.role-directory { padding: 0; overflow: hidden; }
.role-directory > header { padding: 1.2rem 1.25rem 1rem; border-bottom: 1px solid var(--line); }
.role-directory h2, .role-permission-head h2 { margin-bottom: .3rem; }
.role-picker { display: grid; padding: .45rem; gap: .25rem; }
.role-picker a { min-height: 62px; display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: .7rem; padding: .7rem; border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; }
.role-picker a:hover { background: var(--paper); border-color: #a8a29e; color: var(--ink); }
.role-picker a.active { background: var(--green-soft); border-color: #a8a29e; color: var(--ink); }
.role-picker-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--paper); color: var(--green-dark); font-size: 1.05rem; }
.role-picker a.active .role-picker-icon { background: var(--surface); color: var(--muted); }
.role-picker strong, .role-picker small { display: block; }
.role-picker strong { font-family: "Geist", system-ui, sans-serif; font-size: .96rem; }
.role-picker small { color: var(--muted); font-size: .75rem; line-height: 1.35; margin-top: .1rem; }
.role-permission-panel { padding: 0; overflow: hidden; }
.role-permission-head { padding: 1.25rem 1.25rem 1rem; border-bottom: 1px solid var(--line); }
.section-kicker { margin-bottom: .18rem; color: var(--muted); font-size: .78rem; font-weight: 700; }
.role-scope-label { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .4rem; min-height: 32px; padding: .35rem .55rem; border: 1px solid #a8a29e; border-radius: var(--radius-sm); background: var(--paper); color: var(--muted); font-size: .78rem; font-weight: 600; white-space: nowrap; }
.role-access-note { display: flex; align-items: flex-start; gap: .55rem; margin: 1rem 1.25rem 0; padding: .75rem .85rem; border: 1px solid #a8a29e; border-radius: var(--radius-sm); background: var(--paper); color: var(--muted); font-size: .86rem; }
.role-access-note i { color: var(--green-dark); font-size: 1rem; }
.role-permission-form { padding: 1rem 1.25rem 1.25rem; }
.role-permission-form fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.role-permission-form legend { margin-bottom: .65rem; color: var(--ink); font-family: "Geist", system-ui, sans-serif; font-size: 1.08rem; font-weight: 700; }
.permission-list { display: grid; border-top: 1px solid var(--line); }
.permission-option { min-height: 76px; display: grid; grid-template-columns: 28px 40px minmax(0, 1fr) auto; align-items: center; gap: .7rem; padding: .8rem 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.permission-option .form-check-input { width: 1.25rem; height: 1.25rem; margin: 0; }
.permission-icon { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid #a8a29e; border-radius: var(--radius-sm); background: var(--paper); color: var(--green-dark); font-size: 1.05rem; }
.permission-copy { min-width: 0; }
.permission-copy strong, .permission-copy small { display: block; }
.permission-copy strong { font-size: .95rem; }
.permission-copy small { color: var(--muted); font-size: .8rem; line-height: 1.4; }
.permission-status { min-width: 92px; padding: .26rem .45rem; border-radius: var(--radius-xs); background: var(--green-soft); color: var(--muted); font-size: .75rem; font-weight: 700; text-align: center; white-space: nowrap; }
.permission-option.disabled .permission-status { background: #e7e5e4; color: var(--muted); }
.permission-option.locked { cursor: not-allowed; }
.permission-option.locked .permission-icon { color: #687265; background: #f1f3ef; }
.permission-option.locked .permission-copy { opacity: .78; }
.permission-option.locked .form-check-input { opacity: .7; }
.role-permission-actions { display: flex; justify-content: flex-end; padding-top: 1rem; }
.telegram-command-result { display: grid; gap: 1rem; padding: 1.25rem; margin-bottom: 1rem; }
.telegram-command-result h2 { margin-bottom: .25rem; }
.telegram-command-result p { margin-bottom: 0; }
.telegram-command-copy { display: flex; align-items: stretch; gap: .75rem; }
.telegram-command-copy code { display: flex; align-items: center; min-width: 0; flex: 1 1 auto; padding: .75rem 1rem; border: 1px solid #a8a29e; border-radius: var(--radius-sm); background: var(--paper); color: var(--ink); overflow-wrap: anywhere; user-select: all; }
.registration-readiness { display: flex; align-items: flex-start; gap: .6rem; padding: .75rem; border: 1px solid #b9c99c; border-radius: var(--radius-sm); background: var(--green-soft); color: #35442d; font-size: .82rem; line-height: 1.45; }
.registration-readiness i { flex: 0 0 auto; margin-top: .08rem; color: var(--green-dark); }
.registration-readiness.warning { border-color: #d6b777; background: #fff5dd; color: #654b16; }
.registration-readiness.warning i { color: #8b6214; }
.registration-panel > header { display: grid; justify-content: stretch; gap: .3rem; }
.registration-fallback { border-top: 1px solid var(--line); }
.registration-fallback summary { min-height: 44px; display: flex; align-items: center; color: var(--green-dark); font-size: .85rem; font-weight: 700; cursor: pointer; }
.registration-fallback label { display: block; padding-top: .35rem; }
.admin-users-layout { display: grid; grid-template-columns: minmax(300px, .72fr) minmax(420px, 1.28fr); gap: 1rem; align-items: start; }
.admin-users-layout .registration-panel { width: 100%; margin-inline: 0; padding: 1.25rem; justify-content: flex-start; }
.admin-account-list { display: grid; padding: .2rem 1.25rem 1rem; }
.admin-account-list > div { min-height: 64px; display: flex; align-items: center; gap: .75rem; padding: .65rem 0; border-top: 1px solid var(--line); }
.admin-account-list > div:first-child { border-top: 0; }
.admin-account-main { min-width: 0; flex: 1 1 auto; }
.admin-account-list strong, .admin-account-list small { display: block; }
.admin-account-list small { color: var(--muted); overflow-wrap: anywhere; }
.admin-account-list .linked-account { color: var(--green-dark); }
.linked-account i { margin-right: .2rem; }
.account-role { font-weight: 600; }
.account-self { flex: 0 0 auto; color: var(--muted); font-size: .8rem; white-space: nowrap; }
.admin-account-actions { display: flex; align-items: center; gap: .45rem; flex: 0 0 auto; }
.admin-account-actions form { margin: 0; }
.publisher-app-code { display: grid; gap: 1rem; padding: 1.25rem; margin-bottom: 1rem; border-color: var(--green); }
.publisher-app-code h2, .publisher-app-code p { margin-bottom: 0; }
.publisher-app-code-copy { display: flex; align-items: stretch; gap: .75rem; }
.publisher-app-code-copy code { display: flex; align-items: center; justify-content: center; min-width: 12rem; padding: .75rem 1rem; border: 1px solid #78716c; background: var(--paper); color: var(--ink); font-size: 1.75rem; font-weight: 700; letter-spacing: .28em; user-select: all; }
.publisher-app-code-note { display: flex; align-items: flex-start; gap: .5rem; color: var(--muted); font-size: .85rem; }
.publisher-app-list article { min-height: 78px; display: flex; align-items: center; gap: .75rem; padding: .75rem 0; border-top: 1px solid var(--line); }
.publisher-app-list article:first-child { border-top: 0; }
.publisher-app-status { flex: 0 0 auto; }
.publisher-session-modal .modal-header { align-items: flex-start; }
.publisher-session-modal .modal-header p { margin: .2rem 0 0; font-size: .85rem; }
.publisher-session-facts { margin: 0; border-top: 1px solid var(--line); }
.publisher-session-facts > div { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--line); }
.publisher-session-facts dt { color: var(--muted); font-weight: 500; }
.publisher-session-facts dd { margin: 0; color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.publisher-session-note { display: flex; align-items: flex-start; gap: .5rem; margin: 1rem 0 0; color: var(--muted); font-size: .85rem; }
.publisher-session-note i { flex: 0 0 auto; color: var(--green-dark); }
.publisher-app-access-note { display: flex; align-items: flex-start; gap: .85rem; width: min(880px, 100%); margin-top: 1rem; padding: 1rem 1.15rem; border: 1px solid #86a991; background: #f0fdf4; color: var(--ink); }
.publisher-app-access-note > i { color: var(--green-dark); font-size: 1.25rem; }
.publisher-app-access-note h2 { margin: 0 0 .25rem; font-size: 1rem; }
.publisher-app-access-note p { margin: 0; color: #3f4b43; font-size: .88rem; }
.app-alert { display: flex; align-items: flex-start; gap: .6rem; padding: .8rem 1rem; border-radius: var(--radius-sm); margin-bottom: 1rem; }
.app-alert.success { background: #d8eddc; color: #185b32; }
.profile-layout { display: grid; grid-template-columns: minmax(0, 1.28fr) minmax(320px, .72fr); gap: 1.25rem; align-items: start; }
.profile-main-stack, .profile-side-stack { display: grid; gap: 1.25rem; }
.profile-card-user { display: flex; align-items: center; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.profile-avatar-large { width: 56px; height: 56px; display: grid; place-items: center; flex: 0 0 auto; background: var(--green-soft); color: var(--green-dark); border-radius: 50%; font-size: 1.5rem; font-weight: 700; }
.profile-card-user-info strong { display: block; font-size: 1.15rem; font-family: "Geist", system-ui, sans-serif; }
.profile-card-user-info small { display: block; color: var(--muted); font-size: .85rem; overflow-wrap: anywhere; margin-bottom: .35rem; }
.profile-role-badge { display: inline-block; padding: .2rem .55rem; font-size: .75rem; font-weight: 600; border-radius: var(--radius-sm); background: var(--green-soft); color: var(--green-dark); border: 1px solid #a7f3d0; }
.profile-meta-list { display: grid; gap: .9rem; padding: 1rem 0 0; }
.profile-meta-item { display: flex; flex-direction: column; gap: .15rem; }
.profile-meta-item span { color: var(--muted); font-size: .78rem; font-weight: 600; }
.profile-meta-item strong { color: var(--ink); font-size: .95rem; word-break: break-word; }
.profile-extension-list { display: grid; gap: .75rem; padding: .75rem 0 0; }
.profile-extension-item { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .65rem .75rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fafbf9; }
.profile-extension-info { display: flex; align-items: center; gap: .75rem; }
.profile-extension-info i { font-size: 1.2rem; color: var(--green-dark); }
.profile-extension-info strong { display: block; font-size: .88rem; }
.profile-extension-info small { color: var(--muted); font-size: .78rem; }
.profile-status-badge { font-size: .72rem; font-weight: 600; padding: .2rem .5rem; border-radius: var(--radius-xs); background: #e2e8e0; color: #405048; }
.profile-status-badge.success { background: #d8eddc; color: #185b32; }
.profile-status-badge.neutral { background: #f0f2eb; color: #55625a; border: 1px solid var(--line); }
.email-verification-panel { min-width: 0; }
.email-verification-state { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: .75rem; align-items: start; padding: .9rem; border: 1px solid var(--line); background: var(--paper); }
.email-verification-state i { color: var(--orange); font-size: 1.25rem; line-height: 1.35; }
.email-verification-state strong { display: block; margin-bottom: .2rem; color: var(--ink); }
.email-verification-state p { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.55; }
.email-verification-state.is-verified { background: var(--green-soft); border-color: #8fcbae; }
.email-verification-state.is-verified i,
.email-verification-state.is-verified strong { color: var(--green-dark); }
.email-verification-configuration { display: flex; align-items: flex-start; gap: .55rem; margin: 1rem 0 0; }
.email-verification-form { margin-top: 1rem; }
.email-change-request { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.email-verification-code { width: min(100%, 15rem); border-color: #78716c; font-family: "Oxanium", system-ui, sans-serif; font-size: 1.25rem; font-variant-numeric: tabular-nums; letter-spacing: .28em; }
.email-verification-actions { display: flex; align-items: center; gap: .85rem; flex-wrap: wrap; }
.email-verification-actions > span { color: var(--muted); font-size: .82rem; }
.email-verification-guidance { margin: 1rem 0 0; color: var(--muted); font-size: .88rem; }
.email-verification-request { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-top: 1rem; }
.email-verification-countdown { color: var(--muted); font-size: .82rem; }

.auth-shell { min-height: 100dvh; }
.registration-shell { min-height: 100dvh; display: grid; grid-template-columns: minmax(340px, .82fr) minmax(420px, 1.18fr); }
.registration-context { padding: clamp(2rem, 6vw, 6rem); background: #1c1917; color: #fafaf9; display: flex; flex-direction: column; justify-content: space-between; gap: clamp(2rem, 7dvh, 5rem); }
.registration-brand-link { width: fit-content; min-height: 44px; display: inline-flex; align-items: center; gap: .75rem; color: #fafaf9; text-decoration: none; }
.registration-brand-link:hover { color: #fafaf9; text-decoration: underline; text-underline-offset: .25em; }
.registration-brand-link img { width: 46px; height: 46px; object-fit: contain; }
.registration-brand-link strong, .registration-brand-link small { display: block; }
.registration-brand-link strong { font-family: "Geist", system-ui, sans-serif; font-size: 1.35rem; line-height: 1; }
.registration-brand-link small { margin-top: .25rem; color: #bac3bc; font-size: .8rem; }
.registration-context-copy { max-width: 42rem; }
.registration-context-copy h1 { max-width: 11ch; margin-bottom: 1rem; font-size: clamp(2.4rem, 5vw, 4.8rem); line-height: 1; }
.registration-context-copy p { max-width: 48ch; margin: 0; color: #bac3bc; font-size: 1rem; line-height: 1.65; }
.registration-steps { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid #465148; }
.registration-steps li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: .75rem; align-items: start; padding: 1rem 0; color: #bac3bc; border-bottom: 1px solid #465148; }
.registration-steps li > span { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid #bac3bc; color: #bac3bc; font-size: .8rem; font-variant-numeric: tabular-nums; }
.registration-steps strong, .registration-steps small { display: block; }
.registration-steps strong { color: inherit; font-size: .92rem; }
.registration-steps small { margin-top: .15rem; color: inherit; font-size: .78rem; }
.registration-steps .is-current { color: #fff; }
.registration-steps .is-current > span { border-color: #047857; background: #047857; color: #fff; }
.registration-steps .is-complete { color: #bac3bc; }
.registration-steps .is-complete > span { border-color: #047857; color: #bac3bc; }
.registration-panel { width: min(100%, 680px); margin-inline: auto; padding: clamp(5rem, 8vw, 7rem) clamp(1.5rem, 7vw, 6rem) 3rem; background: var(--surface); display: flex; flex-direction: column; justify-content: center; }
.registration-panel > .alert { margin-bottom: 1.5rem; }
.registration-heading { margin-bottom: 1.75rem; }
.registration-heading h2 { margin-bottom: .45rem; font-size: clamp(1.75rem, 3vw, 2.35rem); }
.registration-heading p { max-width: 54ch; margin: 0; color: var(--muted); line-height: 1.6; }
.registration-heading p strong { color: var(--ink); overflow-wrap: anywhere; }
.registration-form { gap: 1.05rem; }
.registration-field { display: grid; gap: .4rem; }
.registration-field > label { font-weight: 600; }
.registration-field > small { color: var(--muted); font-size: .78rem; line-height: 1.45; }
.registration-field .form-control { min-height: 48px; }
.registration-code { max-width: 17rem; font-family: "Oxanium", system-ui, sans-serif; font-size: 1.35rem; font-variant-numeric: tabular-nums; letter-spacing: .28em; text-align: center; }
.registration-panel .btn-lg { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; font-weight: 600; }
.registration-legal { margin: -.1rem 0 0; color: var(--muted); font-size: .78rem; line-height: 1.55; }
.registration-legal a, .registration-signin a, .registration-resend a, .login-note a { color: var(--green-dark); font-weight: 600; text-underline-offset: .2em; }
.registration-signin a, .registration-resend a { min-height: 44px; display: inline-flex; align-items: center; }
.registration-signin { margin: 1.5rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .88rem; }
.registration-resend { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 1rem; }
.registration-resend form { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.registration-resend .btn { min-height: 44px; }
.registration-resend span { color: var(--muted); font-size: .8rem; }
.login-shell { min-height: 100dvh; display: grid; grid-template-columns: minmax(340px, 1.1fr) minmax(360px, .9fr); }
.login-context { padding: clamp(2rem, 7vw, 7rem); background: #1c1917; color: #fafaf9; display: flex; flex-direction: column; justify-content: space-between; }
.login-context h1 { max-width: 12ch; font-size: clamp(2.8rem, 6vw, 5.5rem); line-height: .98; }
.login-context p { color: #d8e0dc; max-width: 44ch; font-size: 1.05rem; }
.login-map-mark { width: 58px; height: 58px; display: grid; place-items: center; }
.login-map-mark img { width: 58px; height: 58px; display: block; object-fit: contain; }
.login-context dl { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 2rem 0 0; border-top: 1px solid #60716a; padding-top: 1rem; }
.login-context dt { color: #d8e0dc; font-size: .78rem; }
.login-context dd { margin: .2rem 0 0; font-weight: 600; }
.login-panel { padding: clamp(2rem, 7vw, 7rem); background: var(--surface); display: flex; flex-direction: column; justify-content: center; gap: 2rem; }
.login-public-map-link { width: fit-content; min-height: 44px; display: inline-flex; align-items: center; gap: .5rem; padding: .55rem .75rem; border: 1px solid #697364; border-radius: var(--radius-sm); color: #fff; font-weight: 600; text-decoration: none; }
.login-public-map-link:hover { background: #292524; color: #fff; }
.login-brand { display: flex; align-items: center; gap: .7rem; }
.login-brand img { width: 44px; height: 44px; display: block; object-fit: contain; }
.login-brand strong, .login-brand small { display: block; }
.login-brand strong { font-family: "Geist", system-ui, sans-serif; font-size: 1.4rem; line-height: 1; }
.login-brand small { color: var(--muted); font-size: .8rem; margin-top: .25rem; }
.login-methods-nav { display: flex; gap: .35rem; background: var(--ground); padding: .3rem; border-radius: var(--radius-md); border: 1px solid var(--line); }
.login-method-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 44px; padding: .5rem .85rem; border-radius: 0; border: none; background: transparent; color: var(--muted); font-size: .92rem; font-weight: 600; cursor: pointer; transition: all .15s ease; }
.login-method-btn:hover:not(.active) { color: var(--ink); background: rgba(0, 0, 0, .04); }
.login-method-btn.active { background: var(--surface); color: var(--green-dark); box-shadow: var(--shadow-sm); font-weight: 700; }
.login-tab-pane { display: none; }
.login-tab-pane.active { display: flex; flex-direction: column; gap: 1.25rem; }
.login-panel-intro h2 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); margin-bottom: .25rem; }
.login-panel-intro p { color: var(--muted); font-size: .92rem; margin-bottom: 0; }
.login-panel h2 { font-size: clamp(1.8rem, 4vw, 2.5rem); margin-bottom: .4rem; }
.login-panel .form-control { min-height: 48px; font-size: 1rem; }
.password-input-wrap { position: relative; display: flex; align-items: center; }
.password-input-wrap .form-control { padding-right: 3rem; }
.btn-toggle-password { position: absolute; right: 0; top: 0; bottom: 0; width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; color: var(--muted); cursor: pointer; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: 1.15rem; transition: color .15s ease; }
.btn-toggle-password:hover { color: var(--ink); }
.login-check { color: var(--muted); display: flex; align-items: center; gap: .65rem; min-height: 44px; margin-block: .25rem; cursor: pointer; user-select: none; }
.login-check .form-check-input { width: 1.25rem; height: 1.25rem; margin-top: 0; flex-shrink: 0; cursor: pointer; }
.login-panel .btn-lg { min-height: 48px; font-size: 1rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; }
.login-panel input[autocomplete="one-time-code"] { font-size: 1.35rem; letter-spacing: 0.3em; text-align: center; font-variant-numeric: tabular-nums; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.login-divider { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .75rem; color: var(--muted); font-size: .78rem; }
.login-divider::before, .login-divider::after { content: ""; height: 1px; background: var(--line); }
.login-passkey-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 1.5rem 1.25rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); gap: .75rem; }
.login-passkey-icon { width: 56px; height: 56px; border-radius: var(--radius-pill); background: rgba(4, 120, 87, .18); color: var(--green-dark); display: inline-flex; align-items: center; justify-content: center; font-size: 1.75rem; }
.login-passkey-status { font-size: .92rem; color: var(--ink); line-height: 1.4; }
.qr-login-page { width: min(960px, 100%); margin: 0 auto; min-height: 100dvh; padding: clamp(1.5rem, 5vw, 4rem); }
.qr-login-page > .login-brand { margin: 1.5rem 0 2.5rem; }
.qr-login-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .82fr); gap: clamp(2rem, 7vw, 5rem); align-items: center; }
.qr-login-grid h1 { font-size: clamp(2rem, 4vw, 3.2rem); }
.qr-steps { display: grid; gap: .7rem; margin: 1.4rem 0 0; padding-left: 1.4rem; }
.qr-steps li { padding-left: .25rem; }
.qr-code-panel { display: grid; justify-items: center; gap: 1rem; padding: 1.4rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fafbf9; text-align: center; }
.qr-code-panel img { width: min(100%, 300px); height: auto; image-rendering: pixelated; background: #fff; }
.qr-code-panel p { margin: 0; font-weight: 600; color: var(--ink); }
.qr-expiry { margin-top: 1.5rem; font-size: .82rem; }
.qr-approval { width: min(560px, calc(100% - 2rem)); margin: min(14dvh, 8rem) auto; padding: clamp(1.5rem, 5vw, 2.5rem); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
.qr-approval > i { display: block; margin-bottom: 1rem; color: var(--green-dark); font-size: 2.2rem; }
.qr-approval .btn { width: 100%; }
.qr-approved > i { color: #185b32; }
.auth-message { min-height: 100dvh; display: grid; place-content: center; justify-items: center; text-align: center; padding: 2rem; }
.auth-message > i { font-size: 2.5rem; color: var(--green); }

.public-body { background: #e9ede5; }
.public-territory { width: min(760px, 100%); margin: 0 auto; min-height: 100dvh; background: var(--surface); padding: clamp(1rem, 4vw, 2rem); }
.public-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; }
.public-head > div > span { color: var(--green-dark); font-weight: 700; }
.public-head h1 { font-size: clamp(2rem, 8vw, 3.5rem); margin: .15rem 0; }
.public-head p { margin-bottom: 0; }
.public-map-wrap { position: relative; }
.public-map { height: 48dvh; min-height: 340px; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.locate-button { position: absolute; z-index: 500; right: 12px; bottom: 12px; min-height: 44px; border: 1px solid #58645f; border-radius: var(--radius-sm); background: #fff; padding: .45rem .7rem; font-weight: 700; }
.public-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; margin: .8rem 0; }
.public-section { padding: 1.2rem 0; border-top: 1px solid var(--line); }
.public-section h2 { font-size: 1.3rem; }
.location-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .65rem; }
.location-list li { display: grid; grid-template-columns: 32px 1fr; gap: .6rem; }
.location-list i { color: var(--green-dark); font-size: 1.15rem; }
.location-list strong, .location-list span, .location-list small { display: block; }
.location-list span, .location-list small { color: var(--muted); }
.return-card textarea { width: 100%; min-height: 96px; border: 1px solid #8b918f; border-radius: var(--radius-sm); padding: .7rem; }

.print-body { background: #ddd; padding: 1rem; }
.print-sheet { width: 210mm; min-height: 297mm; margin: auto; background: #fff; padding: 14mm; color: #111; }
.print-sheet > header { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid #1f2a28; padding-bottom: 5mm; margin-bottom: 5mm; }
.print-sheet > header img { width: 32mm; height: 32mm; }
.print-map { height: 145mm; border: 1px solid #999; }
.print-notes { margin-top: 5mm; }
.print-sheet h2 { font-size: 16pt; }
.print-sheet footer { margin-top: 8mm; font-size: 9pt; color: #555; }
.print-trigger { position: fixed; right: 1rem; bottom: 1rem; min-height: 44px; border: 0; border-radius: var(--radius-sm); background: var(--green); color: #fff; padding: .6rem 1rem; font-weight: 700; }

.s12-body { min-width: 320px; background: var(--ground); }
.s12-workspace { width: min(1180px, 100%); margin: 0 auto; padding: clamp(1rem, 3vw, 2rem); }
.s12-toolbar { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; margin-bottom: 1.25rem; }
.s12-toolbar h1 { margin-bottom: .25rem; font-size: clamp(1.35rem, 2vw, 1.7rem); }
.s12-toolbar p { margin-bottom: 0; }
.s12-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .6rem; }
.s12-preview-shell { padding: clamp(.8rem, 2vw, 1.5rem); background: #dfe4dc; border: 1px solid #c7d0c3; border-radius: var(--radius-lg); overflow: auto; }
.s12-card { width: min(100%, 1060px); aspect-ratio: 413.9 / 267.7; position: relative; container-type: inline-size; margin: 0 auto; background: #fff; border: 1px solid #000; color: #000; box-shadow: var(--shadow-sm); font-family: "Times New Roman", Times, serif; }
.s12-card h2 { position: absolute; inset: 7.48% 0 auto; margin: 0; text-align: center; font-family: inherit; font-size: 3.86cqw; font-weight: 700; line-height: 1; letter-spacing: 0; }
.s12-fields { position: absolute; top: 18.72%; left: 6.86%; right: 6.86%; display: grid; grid-template-columns: 1fr .655fr; gap: 2.3%; font-family: inherit; }
.s12-fields > div { display: flex; align-items: baseline; gap: .45cqw; min-width: 0; border-bottom: 1px dotted #000; }
.s12-fields strong { flex: 0 0 auto; font-size: 2.41cqw; line-height: 1.2; }
.s12-fields span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 2.41cqw; font-weight: 700; line-height: 1.2; }
.s12-map { position: absolute; top: 24.5%; left: 6.86%; right: 6.86%; bottom: 19.8%; min-height: 0; border: 0; background: #fff; }
.s12-map .leaflet-control-container { display: none; }
.s12-qr-link { position: absolute; z-index: 500; top: 2%; right: 1%; display: block; width: 10cqw; padding: .24cqw .38cqw; background: #fff; border: 1px solid #111; color: #111; font-family: "Oxanium", system-ui, sans-serif; font-size: 1.15cqw; font-weight: 700; line-height: 1.15; text-align: center; text-decoration: none; }
.s12-qr-link img { display: block; width: 100%; height: auto; }
.s12-qr-link span { display: block; margin-top: -.18cqw; }
.s12-preservation-note { position: absolute; top: 81.22%; right: 6.86%; left: 6.86%; margin: 0; color: #000; font-size: 1.95cqw; font-weight: 700; line-height: 1.12; text-align: center; white-space: nowrap; }
.s12-card footer { position: absolute; right: 6.86%; bottom: 5.8%; left: 6.86%; margin: 0; font-size: 1.64cqw; line-height: 1; }
.s12-card footer span:nth-child(2) { position: absolute; left: 11.2%; }
.s12-card footer span:last-child { position: absolute; right: 0; }
.s12-share-note { margin: .8rem 0 0; font-size: .88rem; }

@media (max-width: 1180px) {
  .metric-rail { grid-template-columns: repeat(3, 1fr); }
  .metric-rail article:nth-child(3), .metric-rail .metric-card:nth-child(3) { border-right: 0; }
  .metric-rail article:nth-child(-n+3), .metric-rail .metric-card:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
  .territory-form { grid-template-columns: 1fr; }
  .territory-form .sticky-actions { grid-column: auto; }
  .territory-editor-map { height: 560px; }
  .admin-users-layout { grid-template-columns: 1fr; }
  .profile-layout { grid-template-columns: 1fr; }
}

@media (min-width: 901px) and (max-width: 1150px) {
  .topbar-context .congregation,
  .topbar-divider { display: none !important; }
  .top-search { width: min(240px, 100%); }
}

@media (max-width: 900px) {
  .app-shell { grid-template-columns: 1fr !important; }
  .sidebar { position: fixed; left: 0; transform: translateX(-105%) !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transition: transform .2s ease-out !important; box-shadow: none; }
  body.sidebar-open .sidebar { transform: translateX(0) !important; box-shadow: 8px 0 28px rgba(13,24,20,.2); }
  .sidebar-scrim { position: fixed; inset: 0; z-index: 1030; background: rgba(18,30,26,.5); }
  body.sidebar-open .sidebar-scrim { display: block; }
  .topbar { display: grid; grid-template-columns: 44px 1fr auto; gap: .5rem; height: auto; min-height: var(--topbar); padding: .5rem .75rem; }
  .topbar-context { min-width: 0; }
  .topbar-context .congregation,
  .topbar-divider { display: none !important; }
  .topbar-page-title { font-size: 1.05rem; }
  .topbar-spacer { display: none; }
  .topbar-actions { margin-left: 0; gap: .35rem; }
  .lang-toggle-btn { padding: 0 .45rem; }
  .lang-toggle-btn i.bi-chevron-down { display: none; }
  .sidebar-toggle-btn { width: 44px; height: 44px; }
  .top-search { grid-row: 2; grid-column: 1 / -1; margin-left: 0; width: 100%; min-height: 44px; }
  .filter-bar-action, .map-toolbar-actions { width: 100%; }
  .filter-bar-action .btn, .map-toolbar-actions .btn-group { width: 100%; }
  .profile-copy, .profile-button > .bi-chevron-down { display: none; }
  .page-action-strip { flex-direction: column; align-items: stretch; gap: .75rem; }
  .page-action-strip .btn { width: 100%; }
  .dashboard-grid, .territory-detail-grid { grid-template-columns: 1fr; }
  .detail-map-panel, .detail-map { min-height: 480px; }
  .filter-bar { flex-wrap: wrap; }
  .s13-export-form { grid-template-columns: 1fr; }
  .map-page { min-height: auto; grid-template-rows: auto auto minmax(520px, 68dvh); }
  .role-access-layout { grid-template-columns: 1fr; }
  .telegram-layout { grid-template-columns: 1fr; }
  .telegram-test-form { align-items: stretch; flex-direction: column; }
  .telegram-test-form .btn { width: 100%; }
  .telegram-discovery-form { align-items: stretch; flex-direction: column; }
  .telegram-discovery-form .btn { width: 100%; }
  .role-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .login-shell { grid-template-columns: 1fr; min-height: 100dvh; }
  .login-context { padding: clamp(2rem, 4vw, 3rem); min-height: auto; justify-content: flex-start; gap: 1.25rem; }
  .login-context h1 { font-size: clamp(2rem, 4.5vw, 2.75rem); max-width: 24ch; }
  .login-context dl { margin-top: 1.25rem; }
  .login-panel { padding: clamp(2rem, 4vw, 3rem); gap: 1.5rem; max-width: 520px; width: 100%; margin-inline: auto; }
  .registration-shell { grid-template-columns: 1fr; }
  .registration-context { min-height: auto; padding: 2rem clamp(1.5rem, 6vw, 3rem); gap: 1.75rem; }
  .registration-context-copy h1 { max-width: 22ch; font-size: clamp(2rem, 5vw, 2.8rem); }
  .registration-steps { grid-template-columns: 1fr 1fr; gap: 1.25rem; border-top: 0; }
  .registration-steps li { border-top: 1px solid #465148; }
  .registration-panel { width: min(100%, 620px); padding: 3rem clamp(1.5rem, 6vw, 3rem); }
}

@media (max-width: 620px) {
  .email-verification-actions, .email-verification-request { align-items: stretch; flex-direction: column; }
  .email-verification-actions .btn, .email-verification-request .btn { width: 100%; }
  .registration-context { padding: 1.25rem 1.25rem 1rem; gap: 1rem; }
  .registration-brand-link img { width: 38px; height: 38px; }
  .registration-brand-link strong { font-size: 1.2rem; }
  .registration-context-copy h1 { margin-bottom: .55rem; font-size: clamp(1.45rem, 7vw, 1.9rem); line-height: 1.15; }
  .registration-context-copy p { font-size: .88rem; line-height: 1.5; }
  .registration-steps { gap: .75rem; }
  .registration-steps li { grid-template-columns: 28px minmax(0, 1fr); gap: .55rem; padding: .75rem 0; }
  .registration-steps li > span { width: 26px; height: 26px; }
  .registration-steps small { font-size: .7rem; line-height: 1.35; }
  .registration-panel { padding: 2rem 1.25rem max(2rem, env(safe-area-inset-bottom)); }
  .registration-heading { margin-bottom: 1.35rem; }
  .registration-heading h2 { font-size: 1.55rem; }
  .registration-resend { align-items: flex-start; flex-direction: column; }
  .registration-resend form { align-items: flex-start; flex-direction: column; width: 100%; }
  .registration-resend .btn { width: 100%; }
  .content { padding: 1rem .75rem 2rem; }
  .pjax-skeleton-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pjax-skeleton-rail .pjax-skeleton-block:nth-child(2) { border-right: 0; }
  .pjax-skeleton-rail .pjax-skeleton-block:last-child { grid-column: 1 / -1; border-top: 1px solid var(--line); }
  .topbar { padding-inline: .75rem; }
  .congregation strong { max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
  .page-head, .map-page-head, .page-action-strip { align-items: stretch; flex-direction: column; }
  .page-head .btn, .map-page-head .btn, .page-action-strip .btn { width: 100%; }
  .action-cluster { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .metric-rail { grid-template-columns: 1fr 1fr; }
  .metric-rail article, .metric-rail .metric-card { min-height: 92px; border-bottom: 1px solid var(--line); }
  .metric-rail article:nth-child(odd), .metric-rail .metric-card:nth-child(odd) { border-right: 1px solid var(--line); }
  .metric-rail article:nth-child(even), .metric-rail .metric-card:nth-child(even) { border-right: 0; }
  .metric-rail article:nth-last-child(-n+2), .metric-rail .metric-card:nth-last-child(-n+2) { border-bottom: 0; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .full { grid-column: auto; }
  .s13-export-actions { grid-template-columns: 1fr; }
  .territory-editor-map { min-height: 430px; height: 60dvh; }
  .s12-toolbar { align-items: stretch; flex-direction: column; }
  .s12-actions { display: grid; grid-template-columns: 1fr 1fr; justify-content: stretch; }
  .s12-actions .btn { width: 100%; }
  .s12-preview-shell { margin-inline: -.75rem; border-radius: 0; }
  .map-toolbar { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
  .map-toolbar .map-search { grid-column: 1 / -1; min-width: 0; }
  .map-toolbar .btn { grid-column: 1 / -1; }
  .map-toolbar-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: .35rem; width: 100%; }
  .map-toolbar-actions .mode-toggle { flex: 1; }
  .map-toolbar-actions .btn-fullscreen-toggle { width: 44px; flex-shrink: 0; }
  .map-page { grid-template-rows: auto auto minmax(460px, 66dvh); }
  .map-stage { min-height: 460px; }
  .map-display-trigger { bottom: 10px; left: 10px; max-width: calc(100% - 20px); }
  .map-legend { inset: auto 0 0; width: 100%; max-width: none; max-height: min(42dvh, 52%); border-right: 0; border-bottom: 0; border-left: 0; }
  .map-legend.is-detail-expanded { max-height: min(72dvh, 78%); }
  .map-display-body { padding-right: .75rem; padding-bottom: max(.75rem, env(safe-area-inset-bottom)); padding-left: .75rem; }
  .detail-ledger dl > div { grid-template-columns: 1fr; gap: .2rem; }
  .detail-map-panel, .detail-map { min-height: 420px; }
  .qr-block { grid-template-columns: 84px 1fr; }
  .qr-block img { width: 84px; height: 84px; }
  .pagination-nav { align-items: stretch; flex-direction: column; }
  .pagination-nav > div { display: grid; grid-template-columns: 1fr 1fr; }
  .territory-picker { grid-template-columns: 1fr; }
  .aging-strip { grid-template-columns: 1fr 1fr; }
  .aging-strip div { border-bottom: 1px solid var(--line); }
  .login-shell { grid-template-columns: 1fr; min-height: 100dvh; overflow-x: hidden; }
  .login-context { min-height: auto; padding: 1.25rem 1.25rem 1rem; gap: .5rem; }
  .login-context .login-map-mark { display: none; }
  .login-context h1 { font-size: clamp(1.35rem, 5.5vw, 1.75rem); line-height: 1.2; max-width: 100%; margin-bottom: .35rem; }
  .login-context p { font-size: .92rem; line-height: 1.45; color: #d6d3d1; max-width: 100%; margin-bottom: 0; }
  .login-context dl { display: none; }
  .login-panel { padding: 1.25rem 1.25rem max(1.75rem, env(safe-area-inset-bottom)); gap: 1.25rem; max-width: 100%; }
  .login-brand { gap: .65rem; }
  .login-brand img { width: 38px; height: 38px; }
  .login-brand strong { font-size: 1.25rem; }
  .login-brand small { font-size: .78rem; margin-top: .15rem; }
  .login-panel h2 { font-size: clamp(1.35rem, 5vw, 1.65rem); margin-bottom: .25rem; line-height: 1.2; }
  .login-panel p { font-size: .92rem; margin-bottom: .25rem; }
  .login-panel .form-control { font-size: 1rem; min-height: 48px; }
  .login-check { min-height: 44px; margin-block: .2rem; }
  .login-panel .btn-lg { min-height: 48px; font-size: 1rem; padding: .75rem 1rem; }
  .login-divider { margin-block: .15rem; }
  .login-note { font-size: .82rem; line-height: 1.45; padding-top: .85rem; }
  .qr-login-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .qr-login-page > .login-brand { margin-block: 1.25rem 2rem; }
  .admin-account-row { align-items: flex-start !important; flex-wrap: wrap; }
  .admin-account-actions { margin-inline-start: 2.75rem; }
  .telegram-command-copy { flex-direction: column; }
  .telegram-command-copy .btn { width: 100%; }
  .publisher-app-code-copy { flex-direction: column; }
  .publisher-app-code-copy .btn { width: 100%; }
  .publisher-app-list article { align-items: flex-start; flex-wrap: wrap; }
  .publisher-app-status { margin-inline-start: 2.75rem; }
  .publisher-app-list .admin-account-actions { width: calc(100% - 2.75rem); margin-inline-start: 2.75rem; flex-wrap: wrap; }
  .publisher-session-facts > div { grid-template-columns: 1fr; gap: .2rem; }
  .role-permission-head { align-items: flex-start; flex-direction: column; }
  .role-picker { grid-template-columns: 1fr; }
  .permission-option { grid-template-columns: 28px 40px minmax(0, 1fr); gap: .6rem; }
  .permission-status { grid-column: 3; justify-self: start; min-width: 0; }
  .role-permission-actions .btn { width: 100%; }
  .public-territory { padding: 1rem .75rem 2rem; }
  .public-head { align-items: flex-start; }
  .public-map { height: 46dvh; min-height: 320px; }
  .public-actions { grid-template-columns: 1fr; }
  .admin-menu > a { grid-template-columns: 44px minmax(0, 1fr) 20px; gap: .75rem; padding: .85rem; }
  .admin-menu-icon { width: 44px; height: 44px; }
}

/* Groups and Data Table Responsive Enhancements */
.groups-table {
  min-width: 980px;
}
.groups-table th,
.groups-table td {
  white-space: nowrap;
  vertical-align: middle;
}

.groups-card-list {
  display: grid;
  gap: 0.85rem;
  padding: 0.85rem;
}

.group-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.group-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.group-card-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.group-badge-num {
  font-family: "Geist", system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink);
  background: #eef2ea;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.15rem 0.45rem;
  flex-shrink: 0;
}

.group-card-title h3 {
  font-size: 1.05rem;
  margin: 0;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.group-card-body {
  padding: 0.85rem 1rem;
  display: grid;
  gap: 0.65rem;
}

.group-card-row {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
  font-size: 0.88rem;
}

.group-card-label {
  color: var(--muted);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
}

.group-card-value {
  color: var(--ink);
  font-weight: 500;
}

.group-card-footer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--line);
  background: var(--paper);
}

.group-card-footer .btn {
  min-height: 44px;
}

/* Telegram Integration Styles */
.telegram-login-divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 1.25rem 0;
  color: var(--muted);
  font-size: 0.85rem;
}
.telegram-login-divider::before,
.telegram-login-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid var(--line);
}
.telegram-login-divider span {
  padding: 0 0.75rem;
}
.telegram-login-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
}
.profile-telegram-card {
  padding: 0.85rem 1rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 0;
}
.profile-telegram-empty {
  padding: 0.5rem 0;
}

.passkey-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.passkey-item-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 1rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 0;
  flex-wrap: wrap;
}
.passkey-item-icon {
  width: 42px;
  height: 42px;
  border-radius: 0;
  background: rgba(4, 120, 87, 0.18);
  color: var(--green-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  flex-shrink: 0;
}
.passkey-item-details {
  flex: 1;
  min-width: 180px;
}
.passkey-item-name {
  font-size: 0.95rem;
  color: var(--ink);
  line-height: 1.3;
}
.passkey-item-meta {
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 0.2rem;
}
.passkey-item-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}
.passkey-empty-state {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1rem;
  background: var(--paper);
  border: 1px dashed var(--line);
  border-radius: 0;
}

/* Web Popup Dialog (Custom Modal for Alerts and Confirms) */
.app-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(18, 22, 16, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  transition: opacity 0.18s ease-out;
}

.app-dialog-backdrop.show {
  opacity: 1;
}

.app-dialog {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 45px rgba(24, 30, 22, 0.22);
  width: min(440px, 100%);
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  transform: scale(0.95) translateY(8px);
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}

.app-dialog-backdrop.show .app-dialog {
  transform: scale(1) translateY(0);
}

.app-dialog-header {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 1.25rem 1.25rem 0.5rem;
}

.app-dialog-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.app-dialog-icon.danger {
  background: var(--red-soft);
  color: var(--red);
}

.app-dialog-icon.warning {
  background: #fef3c7;
  color: #b45309;
}

.app-dialog-icon.info {
  background: var(--blue-soft);
  color: var(--blue);
}

.app-dialog-icon.success {
  background: var(--green-soft);
  color: var(--green-dark);
}

.app-dialog-titles {
  flex: 1;
  min-width: 0;
}

.app-dialog-title {
  margin: 0.25rem 0 0;
  font-size: 1.15rem;
  font-weight: 700;
  font-family: "Geist", system-ui, sans-serif;
  line-height: 1.3;
  color: var(--ink);
}

.app-dialog-body {
  padding: 0.5rem 1.25rem 1.25rem 4.15rem;
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.5;
  word-break: break-word;
}

@media (max-width: 480px) {
  .app-dialog-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .app-dialog-body {
    padding: 0.5rem 1.25rem 1.25rem;
    text-align: center;
  }
}

.app-dialog-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.65rem;
  padding: 0.85rem 1.25rem;
  background: var(--ground);
  border-top: 1px solid var(--line);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

@media (max-width: 480px) {
  .app-dialog-footer {
    flex-direction: column-reverse;
  }
  .app-dialog-footer .btn {
    width: 100%;
  }
}

.app-dialog-footer .btn {
  min-height: 44px;
  padding: 0.5rem 1.1rem;
  font-size: 0.92rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

/* Custom Web HEX Color Picker */
.hex-color-picker-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  margin-top: 0.25rem;
}

.hex-color-swatch-btn {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: var(--radius-sm);
  border: 1px solid #a8a29e;
  padding: 0;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform 0.1s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  position: relative;
  flex-shrink: 0;
}

.hex-color-swatch-btn:hover {
  transform: scale(1.04);
  border-color: var(--ink);
}

.hex-color-swatch-btn:focus-visible {
  outline: 3px solid var(--cyan) !important;
  outline-offset: 2px;
}

.hex-color-input-box {
  display: flex;
  align-items: center;
  background: var(--paper);
  border: 1px solid #a8a29e;
  border-radius: var(--radius-sm);
  height: 44px;
  min-height: 44px;
  width: 140px;
  padding: 0 0.65rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.hex-color-input-box:focus-within {
  border-color: var(--green-dark);
  box-shadow: 0 0 0 0.2rem rgba(14, 116, 144, 0.2);
}

.hex-color-prefix {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-weight: 700;
  color: var(--muted);
  font-size: 0.95rem;
  margin-right: 0.25rem;
  user-select: none;
}

.hex-color-input {
  border: 0;
  background: transparent;
  outline: 0;
  box-shadow: none;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.95rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--ink);
  width: 100%;
  padding: 0;
  min-height: unset;
  letter-spacing: 0.05em;
}

.hex-color-input:focus {
  outline: 0;
  box-shadow: none;
}

.hex-color-picker-group.compact {
  width: auto;
  margin-top: 0;
}

.hex-color-picker-group.compact .hex-color-swatch-btn {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
}

.hex-color-picker-group.compact .hex-color-input-box {
  height: 44px;
  min-height: 44px;
  width: 110px;
  padding: 0 0.45rem;
}

.hex-color-picker-group.compact .hex-color-prefix,
.hex-color-picker-group.compact .hex-color-input {
  font-size: 0.85rem;
}

.hex-picker-popover {
  position: fixed;
  z-index: 10050;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: 0 16px 36px rgba(24, 30, 22, 0.2);
  width: min(290px, calc(100vw - 20px));
  padding: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  animation: hexPickerFadeIn 0.15s ease-out;
  color: var(--ink);
}

@keyframes hexPickerFadeIn {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.hex-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hex-picker-title {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.hex-picker-close {
  background: transparent;
  border: 0;
  padding: 0.2rem;
  color: var(--muted);
  cursor: pointer;
  line-height: 1;
  font-size: 1.25rem;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
}

.hex-picker-close:hover {
  color: var(--ink);
}

.hex-palette-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(44px, 1fr));
  gap: 0.4rem;
}

.hex-palette-btn {
  width: 100%;
  aspect-ratio: 1;
  min-height: 44px;
  border-radius: 0;
  border: 1px solid rgba(0, 0, 0, 0.15);
  padding: 0;
  cursor: pointer;
  transition: transform 0.1s ease, outline 0.1s ease;
  position: relative;
}

.hex-palette-btn:hover {
  transform: scale(1.12);
  z-index: 2;
}

.hex-palette-btn.active {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}

.hex-canvas-wrap {
  position: relative;
  width: 100%;
  height: 120px;
  border-radius: 0;
  overflow: hidden;
  cursor: crosshair;
  user-select: none;
  touch-action: none;
  border: 1px solid var(--line);
}

.hex-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.hex-canvas-cursor {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.7);
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.hex-hue-wrap {
  width: 100%;
}

.hex-hue-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 44px;
  border-radius: 0;
  background: linear-gradient(to right, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%) center / 100% 14px no-repeat;
  outline: none;
  cursor: pointer;
  display: block;
}

.hex-hue-slider:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 2px;
}

.hex-hue-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #1c1917;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}

.hex-hue-slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #1c1917;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}

.hex-picker-bottom {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding-top: 0.35rem;
  border-top: 1px solid var(--line);
}

.hex-preview-box {
  width: 36px;
  height: 44px;
  border-radius: 0;
  border: 1px solid #a8a29e;
  flex-shrink: 0;
}

.hex-bottom-input-wrap {
  display: flex;
  align-items: center;
  flex: 1;
  background: var(--paper);
  border: 1px solid #a8a29e;
  border-radius: var(--radius-sm);
  height: 44px;
  padding: 0 0.5rem;
}

.hex-bottom-input {
  border: 0;
  background: transparent;
  outline: 0;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink);
  width: 100%;
  letter-spacing: 0.04em;
}

.hex-bottom-input-wrap:focus-within {
  border-color: var(--green-dark);
  box-shadow: 0 0 0 0.2rem rgba(14, 116, 144, 0.2);
}

.hex-eyedropper-btn {
  width: 44px;
  height: 44px;
  min-height: 44px;
  border: 1px solid #a8a29e;
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}

.hex-eyedropper-btn:hover {
  background: #eef2ea;
  border-color: var(--ink);
}

.hex-apply-btn {
  min-height: 44px;
  padding: 0 0.85rem;
  font-size: 0.86rem;
  font-weight: 600;
}

@media print {
  .sidebar, .topbar, .page-head, .page-action-strip, .filter-bar, .print-trigger { display: none !important; }
  .app-shell { display: block; }
  .content { padding: 0; }
  .panel, .form-panel { break-inside: avoid; border-color: #999; }
  .print-body { padding: 0; background: #fff; }
  .print-sheet { width: 100%; min-height: 0; margin: 0; padding: 0; }
  @page { size: A4; margin: 12mm; }
  .s12-body { background: #fff; }
  .s12-workspace { width: auto; padding: 0; }
  .s12-toolbar, .s12-share-note { display: none !important; }
  .s12-preview-shell { padding: 0; border: 0; background: #fff; overflow: visible; }
  .s12-card { width: 100%; box-shadow: none; }
  .s12-map { height: 65%; }
  @page { size: 413.9pt 267.7pt; margin: 0; }
}

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

/* ==========================================================================
   Searchable Combobox Component (Shadcn style with KDL prioritization)
   ========================================================================== */
.custom-combobox {
  position: relative;
  width: 100%;
}

.combobox-trigger {
  width: 100%;
  min-height: 44px;
  background-color: var(--paper);
  border: 1px solid #a8a29e;
  border-radius: var(--radius-sm);
  color: var(--ink);
  padding: 0.5rem 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  cursor: pointer;
  text-align: left;
  user-select: none;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.combobox-trigger:hover:not(:disabled) {
  border-color: var(--green-dark);
}

.combobox-trigger:focus,
.combobox-trigger.active {
  outline: none;
  border-color: var(--green-dark);
  box-shadow: 0 0 0 .2rem rgba(14, 116, 144, .2);
}

.combobox-trigger:disabled {
  background-color: var(--ground);
  cursor: not-allowed;
  opacity: .6;
  border-color: var(--line);
}

.combobox-trigger-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.combobox-selected-name {
  font-weight: 500;
  color: var(--ink);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.combobox-placeholder {
  color: #687265;
}

.combobox-chevron {
  color: var(--muted);
  font-size: 0.85rem;
  flex-shrink: 0;
  transition: transform .15s ease;
}

.combobox-trigger.active .combobox-chevron {
  transform: rotate(180deg);
}

.combobox-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: 0 10px 25px -5px rgba(28, 25, 23, 0.15), 0 8px 10px -6px rgba(28, 25, 23, 0.1);
  z-index: 1060;
  display: none;
}

.combobox-dropdown.show {
  display: block;
  animation: comboboxFadeIn .12s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes comboboxFadeIn {
  from { opacity: 0; transform: translateY(-3px); }
  to { opacity: 1; transform: translateY(0); }
}

.combobox-search-box {
  position: relative;
  padding: 0.5rem;
  border-bottom: 1px solid var(--line);
  background: var(--ground);
}

.combobox-search-input {
  width: 100%;
  height: 38px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.35rem 2rem 0.35rem 2.15rem;
  font-size: 0.875rem;
  color: var(--ink);
  font-family: inherit;
}

.combobox-search-input:focus {
  outline: none;
  border-color: var(--green-dark);
  box-shadow: 0 0 0 .15rem rgba(14, 116, 144, .2);
}

.combobox-search-icon {
  position: absolute;
  left: 1.15rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 0.85rem;
  pointer-events: none;
}

.combobox-clear-btn {
  position: absolute;
  right: 1.1rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--muted);
  padding: 0.2rem;
  font-size: 0.75rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.combobox-clear-btn:hover {
  color: var(--ink);
}

.combobox-list {
  max-height: 250px;
  overflow-y: auto;
  padding: 0.25rem 0;
  outline: none;
}

.combobox-group-header {
  padding: 0.45rem 0.75rem 0.25rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  background: var(--ground);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.combobox-group-header:first-child {
  border-top: none;
}

.combobox-group-count {
  font-size: 0.68rem;
  padding: 0.05rem 0.35rem;
  border-radius: var(--radius-sm);
  background: var(--line);
  color: var(--ink);
}

.combobox-item {
  padding: 0.55rem 0.75rem;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.875rem;
  transition: background-color .08s ease;
}

.combobox-item:hover,
.combobox-item.focused {
  background-color: var(--paper);
}

.combobox-item.selected {
  background-color: var(--green-soft);
  color: var(--green-dark);
}

.combobox-item-content {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.combobox-item-name {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.combobox-badge {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.12rem 0.45rem;
  border: 1px solid var(--line);
  background: var(--ground);
  color: var(--muted);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  flex-shrink: 0;
}

.combobox-item.selected .combobox-badge,
.combobox-badge.badge-match {
  border-color: #a7f3d0;
  background: #d1fae5;
  color: #065f46;
}

.combobox-check-icon {
  color: var(--green-dark);
  font-size: 1rem;
  flex-shrink: 0;
}

.combobox-empty {
  padding: 1.5rem 0.75rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--muted);
}

.audit-badge {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.25;
  border-radius: var(--radius-xs, 2px);
  color: #292524;
  background-color: #f5f5f4;
  border: 1px solid #d6d3d1;
  white-space: nowrap;
}

.audit-badge-assign {
  background-color: #ecfdf5;
  color: #065f46;
  border-color: #a7f3d0;
}

.audit-badge-return {
  background-color: #eff6ff;
  color: #1e40af;
  border-color: #bfdbfe;
}

.audit-badge-login {
  background-color: #f0fdf4;
  color: #166534;
  border-color: #bbf7d0;
}

.audit-badge-archive,
.audit-badge-delete {
  background-color: #fef2f2;
  color: #991b1b;
  border-color: #fecaca;
}

.audit-badge-edit {
  background-color: #fffbeb;
  color: #92400e;
  border-color: #fde68a;
}

/* Legal Document Administration */
.legal-doc-tabs {
  display: flex;
  gap: 0.5rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.5rem;
}
.legal-doc-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.15s ease;
}
.legal-doc-tab:hover {
  background: #f5f5f4;
  color: var(--ink);
  border-color: #8b918f;
}
.legal-doc-tab.active {
  background: var(--green-soft);
  color: var(--green-dark);
  border-color: var(--green-dark);
}
.legal-meta-box {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.25rem;
  padding: 0.75rem 1.15rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.legal-meta-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.88rem;
}
.legal-meta-item i {
  font-size: 1.2rem;
  color: var(--green-dark);
}
.legal-meta-item .meta-label {
  display: block;
  font-size: 0.74rem;
  color: var(--muted);
}
.legal-meta-item strong {
  display: block;
  font-size: 0.88rem;
}
.legal-meta-action {
  margin-left: auto;
}
.legal-section-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  overflow: hidden;
}
.legal-section-card .section-card-header {
  background: #f8fafc;
  border-bottom: 1px solid var(--line);
}
.legal-section-card .section-badge {
  font-size: 0.85rem;
  color: var(--ink);
}

/* Theme selector and color-mode system */
.theme-picker {
  position: relative;
  flex: 0 0 auto;
  color: var(--ink);
}

.theme-picker-trigger {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: 0;
  border: 1px solid #a8a29e;
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
}

.theme-picker-trigger:hover { background: #e7e5e4; border-color: var(--ink); }
.theme-picker-trigger > [data-theme-icon] { font-size: 1rem; color: var(--green-dark); }
.theme-picker-trigger-label,
.theme-picker-chevron { display: none; }

.theme-picker-menu {
  position: absolute;
  top: calc(100% + .45rem);
  right: 0;
  z-index: 1200;
  width: min(280px, calc(100vw - 1.5rem));
  padding: .35rem;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-md);
}

.theme-picker-menu[hidden] { display: none; }
.theme-picker-menu button {
  width: 100%;
  min-height: 58px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 20px;
  align-items: center;
  gap: .65rem;
  padding: .55rem .65rem;
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.theme-picker-menu button:hover { background: var(--paper); }
.theme-picker-menu button[aria-checked="true"] { background: var(--green-soft); color: var(--green-dark); }
.theme-picker-menu button > i:first-child { font-size: 1rem; text-align: center; }
.theme-picker-menu button span,
.theme-picker-menu button strong,
.theme-picker-menu button small { display: block; min-width: 0; }
.theme-picker-menu button strong { font-size: .86rem; }
.theme-picker-menu button small { margin-top: .12rem; color: var(--muted); font-size: .72rem; line-height: 1.3; }
.theme-picker-check { opacity: 0; }
.theme-picker-menu button[aria-checked="true"] .theme-picker-check { opacity: 1; }

.auth-theme-control {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 1100;
}

.public-head-actions { display: flex; align-items: center; justify-content: flex-end; gap: .55rem; flex-wrap: wrap; }
.public-head-link {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font-size: .8rem;
  font-weight: 600;
  text-decoration: none;
  transition: all .15s ease;
}
.public-head-link:hover {
  background: var(--green-soft);
  color: var(--green-dark);
  border-color: var(--green-dark);
}

[data-theme="dark"] {
  --ink: #f5f7f5;
  --muted: #bac3bc;
  --line: #465148;
  --ground: #101310;
  --surface: #181d19;
  --paper: #222923;
  --green-dark: #6ee7b7;
  --green-soft: #18382b;
  --orange: #fbbf24;
  --cyan: #22d3ee;
  --blue: #67e8f9;
  --blue-soft: #153947;
  --red: #fca5a5;
  --red-soft: #451f1f;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-md: 0 18px 38px rgba(0, 0, 0, .42);
  --primary: #34d399;
  --foreground: #f5f7f5;
  --bs-body-color: #f5f7f5;
  --bs-body-bg: #101310;
  --bs-border-color: #465148;
  --bs-secondary-color: #bac3bc;
  --bs-tertiary-bg: #222923;
}

[data-theme="dark"] body,
[data-theme="dark"] .auth-shell,
[data-theme="dark"] .public-body,
[data-theme="dark"] .legal-body { background: var(--ground); color: var(--ink); }
[data-theme="dark"] .registration-panel { background: var(--surface); }
[data-theme="dark"] .sidebar { background: rgba(16, 19, 16, .94); }
[data-theme="dark"] .topbar { background: rgba(16, 19, 16, .96); }
[data-theme="dark"] .topbar-page-title.is-skeleton,
[data-theme="dark"] .pjax-skeleton-title,
[data-theme="dark"] .pjax-skeleton-panel-title { background: #3d4a40; }
[data-theme="dark"] .pjax-skeleton-block,
[data-theme="dark"] .pjax-skeleton-rail .pjax-skeleton-block,
[data-theme="dark"] .pjax-skeleton-row { background: #29312a; }

[data-theme="dark"] .theme-picker-trigger,
[data-theme="dark"] .sidebar-toggle-btn,
[data-theme="dark"] .icon-button,
[data-theme="dark"] .lang-toggle-btn,
[data-theme="dark"] .top-search,
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] .combobox-trigger,
[data-theme="dark"] .hex-color-input-box,
[data-theme="dark"] .hex-bottom-input-wrap,
[data-theme="dark"] .hex-eyedropper-btn,
[data-theme="dark"] .territory-check,
[data-theme="dark"] .role-scope-label,
[data-theme="dark"] .return-card textarea {
  border-color: #6b7a6f;
  background-color: var(--paper);
  color: var(--ink);
}
[data-theme="dark"] .theme-picker-trigger:hover,
[data-theme="dark"] .sidebar-toggle-btn:hover,
[data-theme="dark"] .lang-toggle-btn:hover,
[data-theme="dark"] .sidebar-nav a:hover,
[data-theme="dark"] .sidebar-foot a:hover,
[data-theme="dark"] .lang-dropdown-menu .dropdown-item:hover,
[data-theme="dark"] .lang-dropdown-menu .dropdown-item:focus,
[data-theme="dark"] .metric-rail a.metric-card:hover,
[data-theme="dark"] .metric-rail button.metric-card:hover,
[data-theme="dark"] .chart-legend a.chart-legend-link:hover,
[data-theme="dark"] .chart-legend button.chart-legend-btn:hover,
[data-theme="dark"] .admin-menu > a:hover,
[data-theme="dark"] .legal-doc-tab:hover,
[data-theme="dark"] .hex-eyedropper-btn:hover { background: #2b342d; color: var(--ink); border-color: #849188; }
[data-theme="dark"] .sidebar-nav a,
[data-theme="dark"] .sidebar-foot a { color: #dfe5e0; }
[data-theme="dark"] .sidebar-nav a.active,
[data-theme="dark"] .sidebar-foot a.active,
[data-theme="dark"] .lang-dropdown-menu .dropdown-item.active,
[data-theme="dark"] .metric-rail .metric-card.is-active,
[data-theme="dark"] .chart-legend button.chart-legend-btn.is-active,
[data-theme="dark"] .role-picker a.active { background: var(--green-soft); color: var(--green-dark); }

[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .app-dialog,
[data-theme="dark"] .combobox-dropdown,
[data-theme="dark"] .hex-picker-popover,
[data-theme="dark"] .card,
[data-theme="dark"] .list-group-item { background: var(--surface); color: var(--ink); border-color: var(--line); }
[data-theme="dark"] .dropdown-item { color: var(--ink); }
[data-theme="dark"] .dropdown-divider,
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer { border-color: var(--line); }
[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(180%); }
[data-theme="dark"] .app-dialog-footer,
[data-theme="dark"] .combobox-search-box { background: var(--ground); }

[data-theme="dark"] .btn-secondary {
  --bs-btn-bg: #dfe5e0;
  --bs-btn-border-color: #dfe5e0;
  --bs-btn-hover-bg: #ffffff;
  --bs-btn-hover-border-color: #ffffff;
  background-color: #dfe5e0;
  border-color: #dfe5e0;
  color: #182019;
}
[data-theme="dark"] .btn-secondary:hover,
[data-theme="dark"] .btn-secondary:active { background: #fff; border-color: #fff; color: #101310; }
[data-theme="dark"] .btn-outline-secondary {
  --bs-btn-color: var(--ink);
  --bs-btn-border-color: #849188;
  color: var(--ink);
  border-color: #849188;
}
[data-theme="dark"] .btn-outline-secondary:hover,
[data-theme="dark"] .btn-outline-secondary:active { background: var(--ink); border-color: var(--ink); color: #101310; }
[data-theme="dark"] .btn-outline-primary:hover,
[data-theme="dark"] .btn-outline-primary:active { color: #fff; }
[data-theme="dark"] .btn-outline-danger:hover,
[data-theme="dark"] .btn-outline-danger:active { background: #b91c1c; border-color: #fca5a5; color: #fff; }

[data-theme="dark"] .text-muted,
[data-theme="dark"] .text-secondary { color: var(--muted) !important; }
[data-theme="dark"] .text-dark { color: var(--ink) !important; }
[data-theme="dark"] .text-success { color: #86efac !important; }
[data-theme="dark"] .text-danger { color: var(--red) !important; }
[data-theme="dark"] .text-warning,
[data-theme="dark"] .text-warning-emphasis { color: #fcd27b !important; }
[data-theme="dark"] .text-primary-emphasis { color: #9cf2bd !important; }
[data-theme="dark"] .text-info-emphasis { color: #a5e7ff !important; }
[data-theme="dark"] .bg-light,
[data-theme="dark"] .bg-white { background-color: var(--paper) !important; color: var(--ink) !important; }
[data-theme="dark"] .bg-primary-subtle,
[data-theme="dark"] .bg-success-subtle { background-color: #183a27 !important; }
[data-theme="dark"] .bg-info-subtle { background-color: #173544 !important; }
[data-theme="dark"] .bg-warning-subtle { background-color: #443311 !important; }
[data-theme="dark"] .bg-danger-subtle { background-color: var(--red-soft) !important; }
[data-theme="dark"] .bg-secondary-subtle { background-color: #303832 !important; color: #d4dbd6 !important; }
[data-theme="dark"] .alert-danger { color: #ffc1bd; background: var(--red-soft); border-color: #7f3b3b; }
[data-theme="dark"] .alert-success { color: #b9f5cc; background: #193624; border-color: #3d7650; }
[data-theme="dark"] .alert-info,
[data-theme="dark"] .alert-primary { color: #b8ecff; background: #173544; border-color: #326b83; }
[data-theme="dark"] .alert-warning { color: #fcd27b; background: #443311; border-color: #806528; }
[data-theme="dark"] .alert-light { color: var(--ink); background: var(--paper); border-color: var(--line); }

[data-theme="dark"] .form-control::placeholder,
[data-theme="dark"] .combobox-placeholder { color: #aab5ac; }
[data-theme="dark"] .form-check-input { background-color: var(--paper); border-color: #849188; }
[data-theme="dark"] .form-check-input:checked { background-color: var(--green); border-color: #34d399; }
[data-theme="dark"] .form-check .form-check-label,
[data-theme="dark"] .form-check > span,
[data-theme="dark"] .check-field > span { color: var(--ink) !important; }

[data-theme="dark"] .app-table { --bs-table-color: var(--ink); --bs-table-border-color: var(--line); }
[data-theme="dark"] .app-table td { border-color: var(--line); }
[data-theme="dark"] .app-table tbody tr:hover { --bs-table-bg-state: #1d3327; --bs-table-color-state: var(--ink); }
[data-theme="dark"] .table { color: var(--ink); }
[data-theme="dark"] .metric-rail strong { color: var(--ink); }
[data-theme="dark"] .metric-rail .metric-alert { background: #321c1c; }
[data-theme="dark"] .metric-rail a.metric-alert:hover,
[data-theme="dark"] .metric-rail button.metric-alert:hover,
[data-theme="dark"] .metric-rail .metric-card.metric-alert.is-active { background: var(--red-soft); }

[data-theme="dark"] .status.available,
[data-theme="dark"] .app-alert.success,
[data-theme="dark"] .telegram-result.is-success,
[data-theme="dark"] .profile-status-badge.success { color: #9cf2bd; background: #183a27; }
[data-theme="dark"] .status.assigned { color: #a5e7ff; background: #173544; }
[data-theme="dark"] .status.overdue,
[data-theme="dark"] .telegram-result.is-error { color: #ffc1bd; background: var(--red-soft); }
[data-theme="dark"] .status.inactive,
[data-theme="dark"] .permission-option.disabled .permission-status,
[data-theme="dark"] .profile-status-badge,
[data-theme="dark"] .profile-status-badge.neutral { color: #d4dbd6; background: #303832; }

[data-theme="dark"] .sticky-actions { background: rgba(24, 29, 25, .96); }
[data-theme="dark"] .leaflet-popup-content-wrapper,
[data-theme="dark"] .leaflet-popup-tip,
[data-theme="dark"] .leaflet-bar a,
[data-theme="dark"] .leaflet-control-attribution { background: var(--surface); color: var(--ink); }
[data-theme="dark"] .leaflet-bar a { border-color: var(--line); }
[data-theme="dark"] .leaflet-bar a:hover { background: var(--paper); color: var(--green-dark); }
[data-theme="dark"] .leaflet-container a.leaflet-popup-close-button { color: var(--muted); }
[data-theme="dark"] .leaflet-control-attribution a { color: var(--green-dark); }
[data-theme="dark"] .leaflet-control-layers,
[data-theme="dark"] .map-display-trigger,
[data-theme="dark"] .map-legend,
[data-theme="dark"] .map-caption { background: rgba(24, 29, 25, .97) !important; color: var(--ink); border-color: #657268 !important; }
[data-theme="dark"] .map-display-close,
[data-theme="dark"] .map-layer-disclosure,
[data-theme="dark"] .map-display-count,
[data-theme="dark"] .kdl-grid-head,
[data-theme="dark"] .kdl-selection-summary,
[data-theme="dark"] .map-popup p { color: var(--muted); }
[data-theme="dark"] .map-layer-saved-note { background: var(--paper); color: var(--muted); border-color: var(--line); }
[data-theme="dark"] .area-group-header:hover,
[data-theme="dark"] .territory-item:hover { background: #243d2d; }
[data-theme="dark"] .area-group.open .area-group-header { background: #2b342d; }
[data-theme="dark"] .territory-item { border-color: rgba(255, 255, 255, .07); }
[data-theme="dark"] .territory-label { color: #1c1917; }

[data-theme="dark"] .admin-menu > a,
[data-theme="dark"] .role-access-note,
[data-theme="dark"] .permission-icon,
[data-theme="dark"] .telegram-command-copy code,
[data-theme="dark"] .profile-extension-item,
[data-theme="dark"] .qr-code-panel,
[data-theme="dark"] .group-badge-num,
[data-theme="dark"] .legal-section-card .section-card-header { background: var(--surface); color: var(--ink); border-color: var(--line); }
[data-theme="dark"] .publisher-app-code { background: var(--surface); border-color: #34d399; }
[data-theme="dark"] .publisher-app-code-copy code { background: var(--paper); color: var(--ink); border-color: #849188; }
[data-theme="dark"] .publisher-app-access-note { background: #193624; color: var(--ink); border-color: #3d7650; }
[data-theme="dark"] .publisher-app-access-note p { color: var(--muted); }
[data-theme="dark"] .registration-readiness { color: #b9f5cc; background: #193624; border-color: #3d7650; }
[data-theme="dark"] .registration-readiness.warning,
[data-theme="dark"] .app-dialog-icon.warning { color: #fcd27b; background: #443311; border-color: #806528; }
[data-theme="dark"] .profile-role-badge { color: var(--green-dark); background: var(--green-soft); border-color: #347557; }
[data-theme="dark"] .login-method-btn:hover:not(.active) { background: var(--paper); }
[data-theme="dark"] .public-body { background: #0b0e0c; }
[data-theme="dark"] .locate-button { background: var(--surface); color: var(--ink); border-color: #657268; }
[data-theme="dark"] .s12-preview-shell { background: #252a26; border-color: var(--line); }
[data-theme="dark"] .s12-card,
[data-theme="dark"] .s12-card * { color-scheme: light; }

@media (max-width: 620px) {
  .public-head { flex-direction: column; }
  .public-head-actions { width: 100%; justify-content: space-between; }
  .auth-theme-control { top: .75rem; right: .75rem; }
  .theme-picker-menu { position: fixed; top: 4rem; right: .75rem; left: auto; }
}

/* Email Verification Template Editor */
.email-template-section {
  width: min(1120px, 100%);
  margin-top: 1.5rem;
  padding: 1.25rem;
}
.email-template-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}
.email-template-head h2 { margin: 0 0 .25rem; font-family: "Geist", system-ui, sans-serif; font-size: 1.3rem; }
.email-template-head p { margin: 0; color: var(--muted); font-size: .88rem; }
.email-template-head-actions {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.email-template-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 1.5rem;
  align-items: start;
}
.email-template-editor {
  display: grid;
  gap: 1rem;
}
.email-template-editor label {
  display: grid;
  gap: .35rem;
}
.email-template-editor label > span {
  font-weight: 600;
  font-size: .88rem;
  color: var(--ink);
}
.variable-chips-panel {
  padding: .75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
}
.variable-chips-panel span.chips-title {
  display: block;
  font-size: .78rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: .4rem;
}
.variable-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.variable-chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .25rem .6rem;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: .8rem;
  border: 1px solid #a8a29e;
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--green-dark);
  cursor: pointer;
  line-height: 1.2;
  transition: all .15s ease;
}
.variable-chip:hover {
  background: var(--green-soft);
  border-color: var(--green);
}
.variable-chip:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 1px;
}
.email-template-preview-col {
  position: sticky;
  top: 1rem;
  display: grid;
  gap: .75rem;
}
.email-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .35rem 0;
}
.email-preview-header-title {
  font-weight: 700;
  font-size: .92rem;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: .45rem;
}
.email-preview-header-title i {
  color: var(--green-dark);
}
.email-mockup-wrapper {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #fafaf9;
}
.email-mockup-meta {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding: .65rem .85rem;
  font-size: .8rem;
  display: grid;
  gap: .25rem;
  color: var(--muted);
}
.email-mockup-meta strong {
  color: var(--ink);
}
.email-mockup-viewport {
  padding: 1.25rem .75rem;
  transition: max-width .2s ease;
  margin: 0 auto;
}
.email-mockup-wrapper.is-mobile .email-mockup-viewport {
  max-width: 360px;
  padding: 1rem .5rem;
}
.email-mockup-card {
  background: #ffffff;
  border: 1px solid #d6d3d1;
  padding: 1.5rem;
  color: #1c1917;
  max-width: 540px;
  margin: 0 auto;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.email-mockup-wrapper.is-mobile .email-mockup-card {
  padding: 1rem;
}
.email-mockup-app {
  margin: 0 0 6px;
  color: #047857;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
}
.email-mockup-heading {
  margin: 0 0 14px;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 700;
  color: #1c1917;
  border-bottom: 1px solid #e7e5e4;
  padding-bottom: 12px;
}
.email-mockup-intro {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.6;
  color: #1c1917;
  white-space: pre-line;
}
.email-mockup-code-box {
  margin: 0 0 18px;
  padding: 16px;
  border: 1px solid #047857;
  background: #ecfdf5;
  color: #064e3b;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 6px;
  text-align: center;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}
.email-mockup-wrapper.is-mobile .email-mockup-code-box {
  font-size: 24px;
  letter-spacing: 4px;
  padding: 12px;
}
.email-mockup-expiry {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.5;
  color: #1c1917;
}
.email-mockup-security {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.5;
  color: #1c1917;
  font-weight: 700;
}
.email-mockup-footer {
  margin: 16px 0 0;
  padding-top: 12px;
  border-top: 1px dashed #d6d3d1;
  font-size: 13px;
  line-height: 1.5;
  color: #78716c;
  white-space: pre-line;
}

[data-theme="dark"] .email-template-section { background: var(--surface); border-color: var(--line); }
[data-theme="dark"] .variable-chips-panel { background: var(--paper); border-color: var(--line); }
[data-theme="dark"] .variable-chip { background: var(--surface); border-color: #6b7a6f; color: #6ee7b7; }
[data-theme="dark"] .variable-chip:hover { background: #173522; border-color: #34d399; }
[data-theme="dark"] .email-mockup-wrapper { border-color: var(--line); background: #252a26; }
[data-theme="dark"] .email-mockup-meta { background: var(--surface); border-color: var(--line); }
[data-theme="dark"] .email-mockup-card,
[data-theme="dark"] .email-mockup-card * { color-scheme: light; }

@media (max-width: 992px) {
  .email-template-grid { grid-template-columns: 1fr; }
  .email-template-preview-col { position: static; }
}

@media print {
  [data-theme="dark"] { color-scheme: light; }
  [data-theme="dark"] body { background: #fff; color: #111; }
  [data-theme="dark"] .card,
  [data-theme="dark"] .panel,
  [data-theme="dark"] .form-panel,
  [data-theme="dark"] .bg-light,
  [data-theme="dark"] .bg-white { background: #fff !important; color: #111 !important; border-color: #999 !important; }
  .theme-picker,
  .auth-theme-control { display: none !important; }
}