/* Shared interface tokens. Loaded after legacy layout rules. */
:root {
  --primary:#005f02; --secondary:#176f28;
  --bg:#f6f7f5; --card:#ffffff; --surface-subtle:#f8faf7;
  --text:#24342a; --muted:#637166; --text-muted:var(--muted); --line:#dfe5de;
  --success-bg:#eaf5ec; --success-text:#176331; --success-border:#bfdcc7;
  --warning-bg:#fff7e6; --warning-text:#805b12; --warning-border:#ead39c;
  --danger-bg:#fff0ef; --danger-text:#b42318; --danger-border:#f0c5c0;
  --info-bg:#edf3fc; --info-text:#285594;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-8:32px;
  --radius-control:8px; --radius-card:12px; --radius-pill:999px;
  --font-xs:12px; --font-sm:13px; --font-body:14px; --font-section:18px; --font-title:26px;
  --control-height:40px; --control-height-sm:32px;
  --focus-ring:0 0 0 3px #005f0226;
}
body{font-size:var(--font-body);line-height:1.5;background:var(--bg);color:var(--text)}
button,input,select,textarea{font:inherit}
.app{--bg:#f6f7f5;--card:#fff;--line:#dfe5de;--text:#24342a;--muted:#637166}
.app .content{padding:var(--space-6);max-width:1600px}
.app .topbar{min-height:72px;height:auto;padding:var(--space-3) var(--space-6);gap:var(--space-4);border-bottom:1px solid var(--line)}
.topbar-left{min-width:0;gap:var(--space-3)}
.topbar-left strong{font-size:var(--font-body);line-height:1.4}
.topbar .who{font-size:var(--font-xs);flex-shrink:0}
.page-title{gap:var(--space-4);margin-bottom:var(--space-6)}
.app .page-title h1,.login-card h1{font-size:var(--font-title);font-weight:700;line-height:1.3;letter-spacing:-.02em;overflow-wrap:anywhere}
.page-title p{font-size:var(--font-body);margin-top:var(--space-2);line-height:1.5}
.app h2,.card h2{font-size:var(--font-section);font-weight:700;line-height:1.4;margin:0 0 var(--space-3)}
.app h3,.card h3{font-size:15px;font-weight:600;line-height:1.4;margin:0 0 var(--space-2)}
.app h4{font-size:var(--font-body);font-weight:600;margin:0 0 var(--space-3)}
p{margin:0 0 var(--space-4)}
p:last-child{margin-bottom:0}
.small,.help,.app .eyebrow,.stat .label,.kpi-label,.kpi-note{font-size:var(--font-xs);line-height:1.5}
.help{margin:0;color:var(--muted)}
.app .eyebrow{font-weight:600;letter-spacing:.05em;margin-bottom:var(--space-1)}
.app .card,.app .stat,.app .kpi-card,.login-card{padding:var(--space-5);border:1px solid var(--line);border-radius:var(--radius-card);box-shadow:none;background:var(--card)}
.app .card .card{background:var(--card)}
.grid,.form-grid,.stack,.split,.dashboard-kpis,.pricing-settings-grid{gap:var(--space-4)}
.actions,.filter-actions{gap:var(--space-2);align-items:center}
.actions:has(.field){align-items:flex-end}
.app .card>.grid,.app .admin-details .grid{gap:var(--space-4)}
.app .btn,.login-card .btn,.btn{
  min-height:var(--control-height);padding:var(--space-2) var(--space-4);border:1px solid transparent;
  border-radius:var(--radius-control);font-size:var(--font-sm);font-weight:600;line-height:1.4;
  background:#eef1ec;color:var(--text);text-align:center;text-decoration:none;
  transition:background-color .15s ease,border-color .15s ease;
}
.app .btn.sm,.btn.sm{min-height:var(--control-height-sm);padding:var(--space-1) var(--space-3);font-size:var(--font-xs)}
.app .btn.primary,.btn.primary,.app .btn.success,.btn.success{background:var(--primary);color:#fff;border-color:var(--primary)}
.app .btn.primary:hover,.btn.primary:hover,.app .btn.success:hover,.btn.success:hover{background:var(--secondary);border-color:var(--secondary)}
.app .btn.ghost,.btn.ghost{background:var(--card);border-color:var(--line);color:var(--primary)}
.app .btn.ghost:hover,.btn.ghost:hover{background:#edf4ec;border-color:#b9cdb7}
.app .btn.danger,.btn.danger{background:var(--danger-text);border-color:var(--danger-text);color:#fff}
.app .btn.danger:hover,.btn.danger:hover{background:#912018;border-color:#912018}
.app .btn.warning,.btn.warning{background:var(--warning-bg);border-color:var(--warning-border);color:var(--warning-text)}
button:disabled,.btn[aria-disabled=true]{opacity:.55;cursor:not-allowed}
.app :is(input,select,textarea):not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]),
.login-card :is(input,select,textarea):not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]){
  min-height:var(--control-height);padding:var(--space-2) var(--space-3);border:1px solid var(--line);
  border-radius:var(--radius-control);background:var(--card);color:var(--text);font-size:var(--font-body);line-height:1.5;max-width:100%;
}
.field{gap:var(--space-2);min-width:0}
.field label{font-size:var(--font-sm);font-weight:600;color:var(--text);line-height:1.4}
.field textarea{min-height:104px}
input::placeholder,textarea::placeholder{color:#7a867d;opacity:1}
.app input:disabled,.app select:disabled,.app textarea:disabled{background:#f0f3ee!important;color:var(--muted)!important;cursor:not-allowed}
.app :is(a,button,input,select,textarea,summary):focus-visible,.login-card :is(a,button,input,select,textarea):focus-visible{outline:2px solid var(--primary);outline-offset:2px;box-shadow:var(--focus-ring)}
.app .field :is(input,select,textarea):focus,.login-card .field :is(input,select,textarea):focus{outline:2px solid var(--primary);outline-offset:1px;border-color:var(--primary)}
input[type=checkbox],input[type=radio]{width:16px;height:16px;flex:0 0 16px;vertical-align:middle;margin:0 var(--space-1) 0 0;accent-color:var(--primary)}
.app .badge,.badge{min-height:24px;padding:2px var(--space-2);border-radius:var(--radius-pill);font-size:var(--font-xs);font-weight:600;line-height:1.5;background:#edf0eb;color:var(--muted);white-space:normal}
.app .badge.green,.badge.green{background:var(--success-bg);color:var(--success-text)}
.app .badge.red,.badge.red{background:var(--danger-bg);color:var(--danger-text)}
.app .badge.amber,.badge.amber{background:var(--warning-bg);color:var(--warning-text)}
.app .badge.blue,.badge.blue{background:var(--info-bg);color:var(--info-text)}
.alert,.password-form-error{padding:var(--space-3) var(--space-4);border-radius:var(--radius-control);font-size:var(--font-sm);line-height:1.6;margin-bottom:var(--space-4)}
.app .alert.success,.alert.success{background:var(--success-bg);color:var(--success-text);border-color:var(--success-border)}
.app .alert.warning,.alert.warning{background:var(--warning-bg);color:var(--warning-text);border-color:var(--warning-border)}
.app .alert.error,.alert.error,.password-form-error{background:var(--danger-bg);color:var(--danger-text);border-color:var(--danger-border)}
.danger-text{color:var(--danger-text)}
.danger-zone{border-color:var(--danger-border)!important}
.app .table-wrap,.table-wrap{border-radius:var(--radius-control);margin:0;border-color:var(--line)}
table{font-size:var(--font-sm);line-height:1.5}
.app th,th{padding:var(--space-3) var(--space-4);font-size:var(--font-xs);font-weight:600;background:#f4f7f2;color:#536156}
.app td,td{padding:var(--space-3) var(--space-4);vertical-align:top;border-color:var(--line)}
.app tbody tr:hover{background:var(--surface-subtle)}
.table-clean{border:0!important;border-radius:0!important}
.kv{font-size:var(--font-sm);gap:var(--space-2) var(--space-4);margin:0;grid-template-columns:160px minmax(0,1fr)}
.kv dd{overflow-wrap:anywhere;font-weight:600}
.divider{margin:var(--space-4) 0}
.app details.admin-details>summary{font-size:var(--font-body);font-weight:600;line-height:1.5}
.app details[data-form-disclosure][open]>summary{margin-bottom:var(--space-4)}
.app details.admin-details>summary .small{font-size:var(--font-xs);margin-left:var(--space-2)}
.device-catalog,.device-brand-content{gap:var(--space-4)}
.device-brand-group{border-radius:var(--radius-card);background:var(--card)}
.device-brand-summary{padding:var(--space-4);gap:var(--space-4);background:var(--surface-subtle)}
.device-brand-summary strong{font-size:16px;color:var(--text)}
.device-brand-content{padding:var(--space-4)}
.device-model-group{border-radius:var(--radius-control)}
.device-model-heading{padding:var(--space-3) var(--space-4)}
.device-model-heading h3{color:var(--text)}
.device-model-group .table-wrap{border:0;border-radius:0}
.variant-picker,.pricing-formula,.qr-wrap,.code-box,.pipeline-item,.photo,.source-config{border-radius:var(--radius-control);padding:var(--space-4)}
.variant-picker,.variant-picker [data-variant-controls],.variant-picker-steps{gap:var(--space-4)}
.variant-picker legend{font-size:var(--font-body);font-weight:600}
.pipeline-item,.source-config{background:var(--surface-subtle);border-color:var(--line)}
.pricing-setting-card>p{min-height:0}
.code-box{background:var(--primary)}
.code-box .code{font-size:32px;line-height:1.25}
.app .kpi-value,.stat .value,.money-value,.summary-money,.price{font-size:28px;font-weight:700;line-height:1.25;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kpi-value,.stat .value{margin:var(--space-2) 0 var(--space-1)}
.text-link{font-size:var(--font-sm);font-weight:600;white-space:normal}
.panel-heading,.section-heading{gap:var(--space-4);margin-bottom:var(--space-4)}
.empty-state{padding:var(--space-6) var(--space-4)}
.app .sidebar .nav a{min-height:36px;padding:var(--space-2) var(--space-3);border-radius:var(--radius-control);font-size:var(--font-sm);line-height:1.4;gap:var(--space-3)}
.app .sidebar .nav .section{font-size:10px;margin:var(--space-3) var(--space-3) var(--space-1);letter-spacing:.08em}
.sidebar-head{margin-bottom:var(--space-4)}
.sidebar-profile-card,.sidebar-profile-menu,.profile-menu-item,.menu-toggle,.sidebar-collapse-btn,.sidebar-close{border-radius:var(--radius-control)}
.sidebar-profile-menu{background:var(--primary);padding:var(--space-2)}
.profile-menu-item{min-height:36px;font-size:var(--font-sm)}
.codex-modal-dialog{background:var(--card);color:var(--text);border:1px solid var(--line);border-radius:var(--radius-card);padding:var(--space-6)}
.codex-modal-body h3{color:var(--text);font-size:var(--font-section)}
.codex-modal-body p{color:var(--muted);font-size:var(--font-body)}
.codex-modal-icon{background:var(--danger-bg);border-color:var(--danger-border);color:var(--danger-text);border-radius:var(--radius-control)}
.codex-modal-actions{gap:var(--space-2)}
.language-switcher{gap:var(--space-2);margin-left:auto;flex-shrink:0}
.app .language-switcher select,.login-card .language-switcher select{font-size:var(--font-sm);min-height:var(--control-height);padding:var(--space-2) var(--space-3)}
.login-page{background:var(--bg)}
.login-card{padding:var(--space-8);box-shadow:0 8px 32px #24342a0a}
.profile-grid{align-items:start}
.profile-column{display:flex;flex-direction:column;gap:var(--space-4);grid-column:span 2;min-width:0}
.profile-summary{display:flex;flex-direction:column;align-items:center;text-align:center;padding:var(--space-3) 0}
.profile-avatar-lg{width:72px;height:72px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:700;margin-bottom:var(--space-4)}
.profile-summary h3{font-size:var(--font-section);margin-bottom:var(--space-1)}
.profile-summary-email{font-size:var(--font-sm);color:var(--muted);margin-bottom:var(--space-3);overflow-wrap:anywhere}
.profile-summary .badge{margin-bottom:var(--space-4)}
.profile-facts{border-top:1px solid var(--line);padding-top:var(--space-4);display:grid;gap:var(--space-3);font-size:var(--font-sm)}
.profile-fact{display:flex;justify-content:space-between;gap:var(--space-3)}
.profile-fact>span:first-child{color:var(--muted)}
.profile-security{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}
.profile-security p{font-size:var(--font-sm);color:var(--muted);margin:0}
.form-footer{display:flex;justify-content:flex-end;margin-top:var(--space-2)}
.inset-panel{background:var(--surface-subtle);border:1px solid var(--line);border-radius:var(--radius-control);padding:var(--space-4)}
.market-update{display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap}
.mb-8{margin-bottom:var(--space-2)}.mt-8{margin-top:var(--space-2)}.mt-12{margin-top:var(--space-3)}.mb-12{margin-bottom:var(--space-3)}
@media(min-width:1001px){.app.sidebar-collapsed .nav a{padding:var(--space-2) 0;gap:0}}
@media(max-width:1000px){.app .content{padding:var(--space-5) var(--space-4)}.app .topbar{padding:var(--space-3) var(--space-4)}}
@media(max-width:768px){
  .app :is(input,select,textarea):not([type=checkbox]):not([type=radio]):not([type=hidden]),.login-card :is(input,select,textarea):not([type=checkbox]):not([type=radio]):not([type=hidden]){font-size:16px;min-height:44px}
  .app .btn,.login-card .btn{min-height:44px}.app .btn.sm{min-height:36px}
  .app .page-title h1{font-size:22px}
  .app .card,.app .stat,.app .kpi-card{padding:var(--space-4)}
  .profile-column{grid-column:auto}.profile-security{align-items:stretch;flex-direction:column}
  .kv{grid-template-columns:minmax(100px,.8fr) minmax(0,1.2fr)}
  .app .table-wrap{margin:0}.device-brand-content{padding:var(--space-3)}
}
@media(max-width:600px){.app .topbar{flex-wrap:wrap;gap:var(--space-2)}.topbar-left{flex:1}.topbar .language-switcher{order:3;margin-left:0;width:100%}.language-switcher select{max-width:180px}.app .content{padding:var(--space-4)}.login-card{padding:var(--space-6)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
@media print{.language-switcher{display:none!important}.app .content{padding:0}.app .card{break-inside:avoid}.app details.admin-details{display:block}}

/* Native modal forms: focus stays in the active dialog, Escape closes it. */
.form-dialog{width:min(640px,calc(100% - 32px));max-height:calc(100dvh - 48px);margin:auto;padding:var(--space-6);overflow:auto;border:1px solid var(--line);border-radius:var(--radius-card);background:var(--card);color:var(--text);box-shadow:0 24px 64px #14251833;overscroll-behavior:contain}
.form-dialog:not([open]){display:none}
.form-dialog::backdrop{background:#14251880}
.form-dialog-header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-5)}
.form-dialog-header h2{margin:0 0 var(--space-1)}
.form-dialog-header p{margin:0}
.form-dialog .dialog-close{flex:0 0 32px;min-width:32px;font-size:20px;line-height:1;padding:var(--space-1)}
.dialog-actions{display:flex;justify-content:flex-end;gap:var(--space-2);margin-top:var(--space-2);padding-top:var(--space-4);border-top:1px solid var(--line)}
body:has(.form-dialog[open]){overflow:hidden}
@media(max-width:650px){.form-dialog{padding:var(--space-4);max-height:calc(100dvh - 32px)}.dialog-actions .btn{flex:1}.panel-heading{flex-wrap:wrap}}

/* Keep labels and inputs aligned when one field has validation help underneath. */
.field{align-content:start}
.access-option{display:flex;align-items:flex-start;gap:var(--space-2);padding:var(--space-3);background:var(--surface-subtle);border:1px solid var(--line);border-radius:var(--radius-control);font-weight:400!important}
.access-option input{margin-top:2px}
.user-row-actions{min-width:220px}
.password-requirements{gap:var(--space-1);margin-top:var(--space-2)}
.password-req-chip{padding:var(--space-1) var(--space-2);font-size:var(--font-xs);border-radius:var(--radius-control);background:#eef1ec;color:var(--muted);font-weight:500}
.password-req-chip.valid{background:var(--success-bg);color:var(--success-text)}
.password-req-chip.invalid{background:var(--danger-bg);color:var(--danger-text)}

/* Compact catalog: one clear grouping level and aligned variant columns. */
.catalog-workspace .page-title{margin-bottom:var(--space-4)}
.catalog-workspace .page-title p{margin-top:var(--space-1)}
.catalog-workspace .alert{padding:var(--space-2) var(--space-3);margin-bottom:var(--space-3)}
.catalog-workspace>details.card{padding:var(--space-3) var(--space-4);margin-bottom:var(--space-3)}
.catalog-workspace .catalog-panel{padding:var(--space-4)}
.catalog-toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-3)}
.catalog-toolbar h2{margin-bottom:var(--space-1)}
.catalog-toolbar p{margin:0}
.catalog-search{width:min(360px,45%)}
.catalog-workspace .device-catalog{margin-top:0;gap:var(--space-3)}
.catalog-workspace .device-brand-summary{padding:var(--space-3) var(--space-4)}
.catalog-workspace .device-brand-summary>span:first-child{display:flex;align-items:baseline;gap:var(--space-3);flex-wrap:wrap}
.catalog-workspace .device-brand-summary strong{font-size:var(--font-body)}
.catalog-workspace .device-brand-content{padding:var(--space-2);gap:var(--space-2)}
.catalog-workspace .device-model-heading{padding:var(--space-2) var(--space-3);min-height:36px}
.catalog-model-title{display:flex;align-items:baseline;gap:var(--space-3)}
.catalog-model-title h3{margin:0;font-size:var(--font-body)}
.catalog-workspace .device-model-group{border-radius:var(--radius-control)}
.catalog-workspace table{table-layout:fixed}
.catalog-workspace th,.catalog-workspace td{padding:var(--space-2) var(--space-3)}
.catalog-workspace th:first-child{width:26%}
.catalog-workspace th:nth-child(2){width:40%}
.catalog-workspace th:nth-child(3){width:16%}
.catalog-workspace th:last-child{width:18%}
.catalog-workspace td{vertical-align:middle}
.catalog-workspace .catalog-price-cell>strong{font-size:var(--font-sm)}
.catalog-workspace .catalog-price-cell>details{display:inline-block;margin-left:var(--space-2);vertical-align:baseline}
.catalog-workspace .catalog-price-cell>details>summary{font-size:var(--font-xs);color:var(--primary);white-space:nowrap}
.catalog-workspace .catalog-price-cell>details[open]{display:block;margin:var(--space-2) 0 0}
.catalog-workspace .catalog-price-cell .pricing-actions{max-width:320px;padding-top:var(--space-2)}
.catalog-region{margin-left:var(--space-2)}
@media(max-width:768px){.catalog-toolbar{align-items:stretch;flex-direction:column;gap:var(--space-2)}.catalog-search{width:100%}.catalog-workspace .catalog-panel{padding:var(--space-3)}.catalog-workspace table{min-width:560px}.catalog-workspace .device-brand-summary>span:first-child{gap:var(--space-1) var(--space-2)}.catalog-workspace .device-model-heading{flex-direction:row;align-items:center}.catalog-workspace .catalog-model-title{gap:var(--space-2)}}
