/* SimplyAnswered foundation. The shared kit follows user-portal's tokens,
   controls and surface hierarchy; PHP endpoints and editor lifecycles stay intact.
   Page layout belongs in page-components.css or the route's own stylesheet. */
@font-face{font-family:Manrope;src:url('../fonts/Manrope-Variable.woff2') format('woff2');font-style:normal;font-weight:200 800;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('../fonts/IBMPlexMono-Medium.woff2') format('woff2');font-style:normal;font-weight:500;font-display:swap}
:root{
 color-scheme:light;--brand-primary:#6555d9;--brand-darker:#5142bb;--brand-primary-darker:var(--brand-darker);--brand-rgb:101,85,217;--brand-primary-rgb:var(--brand-rgb);
 --sa-accent:var(--brand-primary);--sa-accent-soft:color-mix(in srgb,var(--brand-primary) 9%,white);--brand-glow:rgba(var(--brand-rgb),.16);--brand-teal:var(--brand-primary);--brand-teal-dim:var(--sa-accent-soft);
 --bg:#f8f7fc;--bg-elevated:#fff;--bg-sunken:#f1eff7;--bg-glass:#fff;--bg-glass-border:#e4dfed;--card:var(--bg-elevated);--raised:var(--bg-sunken);--hover:#f2eff9;
 --text:#272237;--text-secondary:#514a62;--text-muted:#70677f;--text-inverse:#fff;--line:#e4dfed;--line-soft:#eeebf3;--line-strong:#cfc7dc;--input-line:#92899f;
 --success:#22744e;--success-bg:#eaf5ef;--success-border:#c4dfce;--warning:#94570b;--warning-bg:#fff5e6;--warning-border:#eed6b1;--danger:#b43c4c;--danger-bg:#fff0f2;--danger-border:#edc9cf;--info:#32638c;--info-bg:#eef5fc;
 --font:Manrope,ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;--font-display:var(--font);--mono:'IBM Plex Mono',ui-monospace,monospace;
 --radius-xs:6px;--radius-sm:10px;--radius-md:12px;--radius-lg:20px;--radius-xl:28px;--radius-full:999px;--card-radius:22px;--card-pad:24px;
 --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:48px;--sp-8:64px;
 --shadow-xs:0 1px 2px rgb(39 34 55 / .04);--shadow-sm:0 2px 4px rgb(39 34 55 / .025),0 14px 42px -28px rgb(74 53 125 / .28);--shadow-md:0 12px 40px -18px rgb(39 34 55 / .18);--shadow-lg:0 24px 64px -16px rgb(39 34 55 / .25);--shadow-xl:var(--shadow-lg);--shadow-glow:0 0 0 3px var(--sa-accent-soft);
 --ease:cubic-bezier(.2,.8,.2,1);--ease-out:var(--ease);--ease-spring:var(--ease);--dur-fast:120ms;--dur:180ms;--dur-slow:240ms;--studio-ease:var(--ease);--studio-spring:var(--ease);
 --sa-tab-height:72px;--dock-clearance:0px;--topbar-h:72px;
 --primary:var(--brand-primary);--light-text:var(--text);--text-primary:var(--text);--muted-text-light:var(--text-muted);--border-light:var(--line);--card-light-bg:var(--card);--portal-success:var(--success);--portal-radius-lg:var(--radius-lg);--portal-shadow-md:var(--shadow-md);--portal-space-2:8px;--portal-space-3:12px;--portal-space-4:16px;--portal-space-5:24px;
}
*,*::before,*::after{box-sizing:border-box}
html{font-size:16px;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--topbar-h) + 16px)}
body{margin:0;min-height:100svh;background:var(--bg);color:var(--text);font:400 1rem/1.6 var(--font);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,p,fieldset{margin:0}h1,h2,h3,h4{line-height:1.3;letter-spacing:-.025em}h2{font-size:1.25rem}h3{font-size:1.0625rem}
fieldset{min-width:0;padding:0;border:0}legend{padding:0}button,input,select,textarea{font:inherit}button,summary{cursor:pointer}
a{color:var(--brand-darker);text-decoration:none}a:hover{text-decoration:underline;text-underline-offset:3px}img,svg,video{max-width:100%}img{object-fit:contain}audio{max-width:100%}
button,a,summary,input,select,textarea{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button:disabled,[aria-disabled=true]{cursor:not-allowed}button:disabled,.btn.disabled{opacity:.55}
:focus-visible{outline:3px solid var(--brand-primary);outline-offset:3px}::selection{background:var(--sa-accent-soft)}
[hidden]{display:none!important}.sr-only,.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.bx{font-size:1.25rem;line-height:1;vertical-align:middle;flex-shrink:0}
.num,.mono{font-variant-numeric:tabular-nums}.muted,.hint,.help,.optional{color:var(--text-muted)}.help,.hint{font-size:.875rem;line-height:1.6}.help{margin-top:6px}.text-right{text-align:right}.nowrap{white-space:nowrap}.grow{flex:1;min-width:0}.block{display:block}
.grid{display:grid;gap:24px}.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-side{grid-template-columns:minmax(0,1fr) minmax(240px,340px);align-items:start}.grid>*{min-width:0}
.row,.btn-row{display:flex;gap:12px;flex-wrap:wrap}.row>*{flex:1;min-width:0}
/* A restrained card kit: one frame, shared spacing, no nested elevation. */
.panel{min-width:0;background:var(--card);border:1px solid var(--line);border-radius:var(--card-radius);box-shadow:var(--shadow-sm);margin-bottom:24px;overflow:clip}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:20px var(--card-pad);border-bottom:1px solid var(--line-soft)}
.panel-head h2{display:flex;align-items:center;gap:10px;font-size:1rem;font-weight:700}.panel-head h2 .bx{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:11px;color:var(--brand-primary);background:var(--sa-accent-soft)}.panel-head>a{font-size:.875rem;font-weight:650;min-height:44px;display:inline-flex;align-items:center}
.panel-body{padding:var(--card-pad)}.panel-foot{padding:16px var(--card-pad);border-top:1px solid var(--line-soft);color:var(--text-muted);font-size:.875rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;max-width:100%;padding:11px 20px;border:1px solid transparent;border-radius:999px;color:#fff;background:var(--brand-primary);font:650 .9375rem/1.4 var(--font);text-align:center;text-decoration:none;cursor:pointer;transition:background var(--dur),border-color var(--dur),box-shadow var(--dur),transform var(--dur)}
.btn:active:not(:disabled){transform:translateY(1px) scale(.985)}.btn:hover{color:#fff;background:var(--brand-darker);text-decoration:none;box-shadow:var(--shadow-xs)}.btn.secondary,.btn.social{color:var(--text);background:var(--card);border-color:var(--line-strong)}.btn.secondary:hover,.btn.social:hover{color:var(--text);background:var(--hover);border-color:var(--input-line)}.btn.quiet{color:var(--brand-darker);background:transparent}.btn.quiet:hover{background:var(--sa-accent-soft)}.btn.danger{color:var(--danger);background:var(--danger-bg);border-color:var(--danger-border)}.btn.small{min-height:40px;padding:8px 15px;font-size:.875rem}.btn.block{width:100%}.btn[aria-busy=true]{cursor:wait}.btn .bx{font-size:1.2rem}
.icon-btn{display:inline-grid;place-items:center;min-width:44px;min-height:44px;padding:8px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--text)}
.field{margin-bottom:20px}.field>label,.signin-field>label,.signin-field-head>label{display:block;margin-bottom:8px;font-weight:650;font-size:.9375rem;color:var(--text-secondary)}
.control{width:100%;min-width:0;max-width:100%;min-height:48px;padding:12px 14px;border:1px solid var(--input-line);border-radius:12px;background:var(--card);color:var(--text);font:400 1rem/1.4 var(--font);transition:border-color var(--dur),box-shadow var(--dur)}
.control:focus{outline:0;border-color:var(--brand-primary);box-shadow:0 0 0 3px var(--sa-accent-soft);color:var(--text);-webkit-text-fill-color:var(--text)}.control::placeholder{color:var(--text-muted);opacity:1}.control:disabled{color:var(--text-muted);background:var(--bg-sunken);opacity:1}textarea.control{min-height:110px;resize:vertical}select.control{padding-right:30px}input[type=checkbox],input[type=radio]{accent-color:var(--brand-primary)}input[type=checkbox]:not(.switch input),input[type=radio]:not(.switch input){width:18px;height:18px;flex-shrink:0}
.field-float{position:relative;margin-bottom:20px}.field-float input{width:100%;min-height:60px;padding:24px 14px 8px;border:1px solid var(--input-line);border-radius:12px;background:var(--card);color:var(--text);font-size:1rem}.field-float label{position:absolute;left:14px;top:8px;font-size:.75rem;color:var(--text-muted);pointer-events:none}
.switch-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 0;border-bottom:1px solid var(--line-soft)}.switch-row .txt{flex:1;min-width:0}.switch-row .txt strong,.switch-row .txt span{display:block}.switch-row .txt span{font-size:.875rem;color:var(--text-muted);margin-top:4px}
.switch{position:relative;display:inline-block;width:48px;height:30px;flex-shrink:0}.switch input{position:absolute;inset:0;width:100%;height:100%;opacity:0;z-index:1;cursor:pointer;margin:0}.switch .track{position:absolute;inset:0;background:var(--line-strong);border-radius:999px}.switch .knob{position:absolute;top:4px;left:4px;width:22px;height:22px;background:#fff;border-radius:50%;box-shadow:var(--shadow-xs);transition:transform var(--dur)}.switch input:checked+.track{background:var(--brand-primary)}.switch input:checked+.track .knob{transform:translateX(18px)}.switch input:focus-visible+.track{outline:3px solid var(--brand-primary);outline-offset:3px}
.badge{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid transparent;border-radius:999px;background:var(--bg-sunken);color:var(--text-secondary);font-size:.8125rem;font-weight:650;line-height:1.4;white-space:normal}
.badge.success,.alert.success{background:var(--success-bg);border-color:var(--success-border);color:var(--success)}.badge.warning,.alert.warning{background:var(--warning-bg);border-color:var(--warning-border);color:var(--warning)}.badge.danger,.alert.error{background:var(--danger-bg);border-color:var(--danger-border);color:var(--danger)}.badge.brand{color:var(--brand-darker);background:var(--sa-accent-soft)}.badge.info,.alert.info{background:var(--info-bg);color:var(--info);border-color:#cbdcea}
.alert{display:flex;align-items:flex-start;gap:12px;padding:16px;border:1px solid var(--line);border-radius:12px;margin-bottom:20px;font-size:.9375rem;overflow-wrap:anywhere}.alert>.bx{margin-top:3px}
.table-wrap{max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain}.portal-table{width:100%;border-collapse:collapse;font-size:.875rem}.portal-table th{text-align:left;font-weight:650;color:var(--text-muted);background:var(--bg);white-space:nowrap}.portal-table th,.portal-table td{padding:15px 16px;border-bottom:1px solid var(--line-soft)}.portal-table tbody tr:last-child td{border-bottom:0}.portal-table .actions{display:flex;gap:8px;justify-content:flex-end}.portal-table .num{white-space:nowrap}
.tabs{display:flex;gap:6px;max-width:100%;overflow-x:auto;margin:0 0 24px;padding:4px;border:1px solid var(--line);border-radius:14px;background:var(--card);scrollbar-width:thin}.tabs>a,.tabs>button{display:flex;align-items:center;justify-content:center;flex-shrink:0;min-height:44px;padding:10px 16px;border:0;border-radius:10px;font-size:.9375rem;font-weight:600;background:transparent;color:var(--text-muted);text-decoration:none}.tabs .active{color:var(--brand-darker);background:var(--sa-accent-soft);box-shadow:var(--shadow-xs)}
.search-bar{display:flex;align-items:center;gap:12px;min-width:0;padding:10px 16px;border:1px solid var(--input-line);border-radius:999px;background:var(--card)}.search-bar input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:var(--text);font-size:1rem}.search-bar:focus-within{outline:3px solid var(--sa-accent-soft);border-color:var(--brand-primary)}
.kpi-label,.kpi-sub{font-size:.875rem;color:var(--text-muted)}.kpi-value{font-size:2rem;font-weight:700;line-height:1.3;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.steps{padding:0;list-style:none}.steps li{display:flex;gap:12px;align-items:center;padding:12px 0}.steps .dot{display:inline-grid;place-items:center;width:30px;height:30px;flex-shrink:0;border-radius:50%;background:var(--sa-accent-soft);color:var(--brand-darker)}
.empty,.quiet-empty{padding:32px 24px;text-align:center;color:var(--text-muted)}.empty>.bx{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 20px;font-size:1.85rem;color:var(--brand-primary);background:var(--sa-accent-soft);border:1px solid color-mix(in srgb,var(--brand-primary) 16%,var(--card));border-radius:22px;box-shadow:0 0 0 8px color-mix(in srgb,var(--brand-primary) 3%,var(--card))}.empty h2,.empty h3,.quiet-empty strong{display:block;color:var(--text);margin:10px 0}.empty p,.quiet-empty p{max-width:48ch;margin:0 auto 16px}.empty.compact,.quiet-empty.compact{padding:24px}
.divider,.demo-divider{display:flex;align-items:center;gap:16px;margin:24px 0;color:var(--text-muted);font-size:.875rem}.divider::before,.divider::after,.demo-divider::before,.demo-divider::after{content:'';height:1px;flex:1;background:var(--line)}
.save-bar{position:sticky;bottom:calc(var(--dock-clearance) + 12px);display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:16px;background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-md);z-index:20}
dialog{margin:auto;max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);padding:24px;border:1px solid var(--line);border-radius:24px;overflow:auto;color:var(--text);background:var(--card);box-shadow:var(--shadow-lg);overscroll-behavior:contain}dialog::backdrop{background:rgb(29 22 44 / .42)}
.toast-region{position:fixed;right:20px;bottom:calc(var(--dock-clearance) + 20px);display:grid;gap:10px;max-width:min(420px,calc(100vw - 32px));z-index:10000}.toast{display:flex;align-items:center;gap:12px;padding:16px;border:1px solid var(--line);border-radius:16px;background:var(--card);color:var(--text);box-shadow:var(--shadow-lg);font-size:.9375rem}.toast-close{width:36px;min-height:36px;margin-left:auto;border:0;border-radius:8px;background:transparent;color:inherit;font-size:24px}.toast.success{border-left:4px solid var(--success)}.toast.error{border-left:4px solid var(--danger)}
.page-busy{position:fixed;inset:0;z-index:9999;display:none;place-items:center;background:rgb(247 246 251 / .9)}.page-busy.on{display:grid}.page-busy-card{display:grid;justify-items:center;gap:16px}.spinner{width:24px;height:24px;border:2px solid var(--line);border-top-color:var(--brand-primary);border-radius:50%;animation:sa-spin .8s linear infinite}.busy-signal{display:inline-flex;align-items:center;gap:3px;height:20px}.busy-signal i{width:3px;height:14px;border-radius:4px;background:currentColor;animation:sa-busy .7s ease-in-out infinite alternate}.busy-signal i:nth-child(2){height:20px;animation-delay:.15s}.busy-signal i:nth-child(3){animation-delay:.3s}
@keyframes sa-spin{to{transform:rotate(360deg)}}@keyframes sa-busy{to{opacity:.4;transform:scaleY(.55)}}
/* Public entry uses the same readable form controls. */
.auth-wrap{display:grid;place-items:center;min-height:100svh;padding:48px 24px}.signin-shell,.auth-column{width:100%;max-width:460px;min-width:0}.auth-card{width:100%;padding:36px;border:1px solid var(--line);border-radius:24px;background:var(--card);box-shadow:var(--shadow-sm)}.auth-brand{display:flex;justify-content:center;align-items:center;margin-bottom:32px}.auth-brand img{width:210px;max-height:56px}.brand-mark{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:12px;color:white;background:var(--brand-primary);font-weight:750}.signin-heading{margin-bottom:28px}.signin-heading h1,.auth-card>h1{font-size:2rem;font-weight:600;letter-spacing:-.05em}.signin-heading p{margin-top:10px;font-size:.9375rem;color:var(--text-muted)}.social-row{display:grid;gap:12px}.auth-provider-btn{position:relative;width:100%;min-height:50px}.auth-provider-mark{width:20px;height:20px}.auth-provider-btn>.bx{font-size:24px}.signin-email-form{display:grid;gap:20px}.signin-field-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}.signin-field-head>a{font-size:.8125rem;font-weight:600}.signin-email-submit{margin-top:4px}.signin-legal{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:24px;font-size:.8125rem}.signin-legal a{color:var(--text-muted)}.demo-entry{padding:14px;text-align:left;gap:12px}.demo-entry>span{display:grid;gap:3px;flex:1}.demo-entry small{font-size:.75rem;font-weight:400;color:var(--text-muted)}.demo-entry>.bx:last-child{font-size:20px}.jmb-lockup{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:24px;color:var(--text-muted);font-size:.75rem}.jmb-lockup img{width:48px;max-height:28px}.native-signin-note{font-size:.875rem;margin:0 0 20px;color:var(--text-muted)}
.public-content-page .auth-column{max-width:860px}.public-content-page .auth-card{padding:40px}.public-content-page p{margin-block:12px}.public-content-page h2{margin-top:28px}.public-content-page ul,.public-content-page ol{padding-left:24px}.public-content-page .auth-brand{justify-content:flex-start}
pre{max-width:100%;overflow:auto;font-size:.875rem}code{overflow-wrap:anywhere}
@media(max-width:900px){.grid-side{grid-template-columns:minmax(0,1fr)}}
@media(max-width:600px){:root{--card-pad:18px;--card-radius:22px}.grid-2,.grid-3,.grid-4{grid-template-columns:minmax(0,1fr)}.grid{gap:16px}.btn{min-height:48px}.btn.small{min-height:44px}.panel{margin-bottom:16px}.panel-head{padding-block:16px}.panel-head h2{font-size:1rem}.row{gap:16px}.row>*{flex-basis:100%}.auth-wrap{align-items:start;padding:28px 16px}.auth-card{padding:24px 20px}.auth-brand{margin-bottom:28px}.public-content-page .auth-card{padding:24px 20px}.toast-region{right:16px;bottom:calc(var(--dock-clearance) + 12px)}.save-bar{flex-wrap:wrap}.save-bar>.btn{flex:1}.field{margin-bottom:18px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
/* Conditional fields must leave layout and keyboard order while inactive. */
.dependent:not(.open){display:none}.dependent.open{display:block}
.inline-field{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.inline-field>.control{flex:1;min-width:120px}.amount.plus{color:var(--success)}.amount.minus{color:var(--danger)}
.status-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:var(--sa-accent-soft);color:var(--brand-darker);font-size:.8125rem;font-weight:650}.status-pill.setup{background:var(--warning-bg);color:var(--warning)}
.activity{padding:0;list-style:none}.activity li{display:flex;gap:12px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line-soft)}.activity-list{padding:0 20px}.activity-list>a{display:flex;align-items:center;gap:12px;min-width:0;padding:18px 0;border-bottom:1px solid var(--line-soft);color:var(--text);text-decoration:none}.activity-list>a:last-child{border:0}.activity-icon{display:grid;place-items:center;flex:0 0 36px;width:36px;height:36px;border-radius:12px;background:var(--sa-accent-soft);color:var(--brand-primary)}.activity-icon.missed{background:var(--danger-bg);color:var(--danger)}.activity-copy{display:grid;gap:4px;flex:1;min-width:0}.activity-copy strong{font-size:.875rem;line-height:1.4;font-weight:650;overflow-wrap:anywhere}.activity-copy small{color:var(--text-muted);font-size:.8125rem;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.activity-list time{align-self:flex-start;padding-top:2px;white-space:nowrap;font-size:.75rem;color:var(--text-muted)}
.signin-legal a{display:inline-flex;align-items:center;min-height:44px}.signup-heading,.auth-task-heading{margin-bottom:24px}.signup-heading h1,.auth-task-heading h1{font-size:1.8rem;font-weight:600}.signup-heading p,.auth-task-heading p{margin-top:10px;font-size:.9375rem;color:var(--text-muted)}.auth-task-heading>span{display:block;font-size:.75rem;color:var(--text-muted);margin-bottom:10px}.checkbox-row{display:flex;align-items:flex-start;gap:10px;font-size:.875rem}.checkbox-row input{margin-top:3px}.type-toggle{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.type-toggle label{display:flex;align-items:center;gap:8px;min-height:50px;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--card);font-size:.875rem}.type-toggle label:has(input:checked){border-color:var(--brand-primary);background:var(--sa-accent-soft)}.business-name-field{display:none}.account-type-fields.business-selected .business-name-field{display:block}.verification-state{text-align:center}.verification-state h1{font-size:1.8rem;font-weight:600}.verification-state p{margin:16px 0 24px;color:var(--text-muted)}.verification-mark{display:inline-grid;place-items:center;width:56px;height:56px;margin-bottom:20px;border-radius:16px;background:var(--sa-accent-soft);color:var(--brand-primary)}.verification-mark>.bx{font-size:28px}.invite-join .btn.pill{min-height:50px}.invite-recipient{display:grid;gap:4px;margin-bottom:24px;padding:16px;border:1px solid var(--line);border-radius:12px;overflow-wrap:anywhere}.invite-recipient>span,.invite-password-help,.invite-help{font-size:.875rem;color:var(--text-muted)}.invite-password-help{margin:-8px 0 24px}.invite-help{margin-top:20px}


/* Shared component kit. Adapted from user-portal/next: cards, section heads,
   stats, action rows, choice cards, status chips, and finite feedback motion.
   Existing panel/empty markup is part of this same kit; route CSS owns layout. */
.ui-eyebrow{display:flex;align-items:center;gap:8px;margin-bottom:10px;color:var(--brand-darker);font-size:.75rem;line-height:1.4;font-weight:700;letter-spacing:.07em;text-transform:uppercase}
.ui-eyebrow>.bx{font-size:1rem}
.ui-surface{min-width:0;border:1px solid var(--line);border-radius:var(--card-radius);background:var(--card);box-shadow:var(--shadow-sm)}
.ui-section-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.ui-section-heading h2,.ui-section-heading h3{font-size:1.125rem;font-weight:650}
.ui-section-heading p{margin-top:6px;color:var(--text-muted);font-size:.875rem;line-height:1.6}
.ui-icon-tile{display:inline-grid;place-items:center;flex:none;width:44px;height:44px;border:1px solid color-mix(in srgb,var(--brand-primary) 15%,var(--card));border-radius:14px;background:var(--sa-accent-soft);color:var(--brand-darker)}
.ui-icon-tile>.bx{font-size:22px}
.ui-stat-card{position:relative;min-width:0;padding:24px;border:1px solid var(--line);border-radius:var(--card-radius);background:var(--card);box-shadow:var(--shadow-sm);color:var(--text)}
.ui-stat-card .kpi-label{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;font-size:.8125rem;font-weight:600}
.ui-stat-card .kpi-value{font-size:clamp(1.75rem,3vw,2.5rem);font-weight:550;letter-spacing:-.05em}
.ui-stat-card .kpi-sub{margin-top:8px;font-size:.8125rem}
.ui-stat-card .panel-body{padding:0}
.ui-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:12px;min-width:0}
.ui-toolbar>.search-bar{flex:1;min-width:min(100%,220px)}
.ui-filter-chips{display:flex;align-items:center;gap:6px;flex-wrap:wrap;max-width:100%}
.ui-filter-chips>a,.ui-filter-chips>button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:9px 16px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--text-muted);font:600 .875rem/1.4 var(--font);text-decoration:none}
.ui-filter-chips>.active,.ui-filter-chips>[aria-current=page],.ui-filter-chips>[aria-pressed=true]{border-color:var(--brand-primary);background:var(--sa-accent-soft);color:var(--brand-darker)}
.ui-action-card{display:flex;align-items:center;gap:14px;min-width:0;padding:20px;border:1px solid var(--line);border-radius:18px;background:var(--card);color:var(--text);text-decoration:none;transition:border-color var(--dur),box-shadow var(--dur),transform var(--dur)}
.ui-action-card:hover{color:var(--text);border-color:color-mix(in srgb,var(--brand-primary) 35%,var(--line));box-shadow:var(--shadow-sm);text-decoration:none;transform:translateY(-2px)}
.ui-action-card>span:not(.ui-icon-tile){display:grid;gap:5px;min-width:0;flex:1}
.ui-action-card strong{font-size:.9375rem;font-weight:650;line-height:1.5}.ui-action-card small{font-size:.8125rem;line-height:1.6;color:var(--text-muted)}
.ui-action-card>.bx:last-child{margin-left:auto;color:var(--brand-primary)}
.ui-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:200px;padding:36px 24px;text-align:center;color:var(--text-muted)}
.ui-empty-state>.ui-icon-tile{width:64px;height:64px;border-radius:22px;margin:0 0 8px;box-shadow:0 0 0 8px color-mix(in srgb,var(--brand-primary) 3%,var(--card))}
.ui-empty-state>h2,.ui-empty-state>h3,.ui-empty-state>strong{font-size:1.125rem;color:var(--text);font-weight:650}
.ui-empty-state p{max-width:46ch;font-size:.9375rem;line-height:1.6}.ui-empty-state .btn{margin-top:6px}
.ui-status-chip{display:inline-flex;align-items:center;gap:7px;min-height:30px;padding:5px 11px;border:1px solid var(--line);border-radius:999px;font-size:.75rem;font-weight:650;line-height:1.4;background:var(--card);color:var(--text-muted)}
.ui-status-chip::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.ui-status-chip[data-tone=success]{color:var(--success);background:var(--success-bg);border-color:var(--success-border)}
.ui-status-chip[data-tone=warning]{color:var(--warning);background:var(--warning-bg);border-color:var(--warning-border)}
.ui-choice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:14px}
.ui-choice-card{display:flex;align-items:start;gap:12px;padding:18px;border:1px solid var(--line);border-radius:16px;background:var(--card);cursor:pointer}
.ui-choice-card:has(input:checked){border-color:var(--brand-primary);background:var(--sa-accent-soft);box-shadow:0 0 0 1px var(--brand-primary)}
.ui-choice-card:focus-within{outline:3px solid var(--sa-accent-soft);outline-offset:3px}
.ui-choice-card>span{display:grid;gap:6px}.ui-choice-card strong{font-size:.9375rem}.ui-choice-card small{color:var(--text-muted);font-size:.875rem;line-height:1.5}
.ui-step-nav{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px;padding:0;list-style:none}
.ui-step-nav>a{display:flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--text-secondary);font-size:.8125rem;font-weight:600;text-decoration:none}
.ui-step-nav>a>span{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--sa-accent-soft);color:var(--brand-darker);font-size:.75rem}
.ui-step-nav>a:hover{border-color:var(--brand-primary);color:var(--brand-darker)}
.ui-form-note{display:flex;align-items:flex-start;gap:10px;padding:14px 16px;border-radius:14px;background:var(--sa-accent-soft);color:var(--text-secondary);font-size:.875rem;line-height:1.6}
.ui-form-note>.bx{margin-top:3px;color:var(--brand-primary)}
.ui-password{position:relative;display:flex;align-items:center;min-width:0}.ui-password>input.control{padding-right:78px}.ui-password>button{position:absolute;right:5px;min-height:40px;min-width:62px;padding:8px;border:0;border-radius:9px;background:transparent;color:var(--brand-darker);font-size:.8125rem;font-weight:650}.ui-password>button:hover{background:var(--sa-accent-soft)}
.ui-copy-button{display:inline-grid;place-items:center;width:36px;min-height:36px;margin-left:8px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--brand-darker);vertical-align:middle;cursor:pointer}.ui-copy-button .bx{font-size:18px}
/* Finite arrival motion never hides content while scripts load or fail. */
@keyframes ui-arrive{from{opacity:.3;transform:translateY(9px)}to{opacity:1;transform:none}}
@keyframes ui-dialog-in{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:no-preference){
 .ui-arrive{animation:ui-arrive 380ms var(--ease-out) both;animation-delay:var(--ui-delay,0ms)}
 dialog[open]{animation:ui-dialog-in 200ms var(--ease-out) both}
 .toast{animation:ui-dialog-in 240ms var(--ease-out) both}
 .tabs>a,.tabs>button,.ui-filter-chips>a,.ui-filter-chips>button{transition:background var(--dur),color var(--dur),box-shadow var(--dur)}
}
@media(max-width:600px){.ui-stat-card{padding:18px}.ui-section-heading{gap:12px;margin-bottom:16px}.ui-action-card{padding:16px}.ui-toolbar{align-items:stretch}.ui-toolbar>.search-bar{flex-basis:100%}.ui-empty-state{padding:28px 18px}.ui-step-nav{gap:6px}.ui-step-nav>a{padding:7px 10px;font-size:.75rem}}

/* Tables opt into cards where a row is a self-contained customer item.
   Without JS, their normal horizontally scrollable table remains available. */
@media(max-width:600px){
 .ui-card-table,.ui-card-table tbody{display:block;width:100%}
 .ui-card-table thead{position:absolute;width:1px;height:1px;clip:rect(0,0,0,0);overflow:hidden}
 .ui-card-table .ui-table-card{display:grid;gap:0;padding:14px 18px;border-bottom:1px solid var(--line)}
 .ui-card-table .ui-table-card:last-child{border-bottom:0}
 .ui-card-table .ui-table-card td{display:flex;align-items:center;justify-content:space-between;gap:16px;min-width:0;min-height:40px;padding:6px 0;border:0;white-space:normal;overflow-wrap:anywhere;text-align:right}
 .ui-card-table .ui-table-card td::before{content:attr(data-ui-label);flex:0 0 30%;text-align:left;font-size:.75rem;font-weight:600;color:var(--text-muted)}
 .ui-card-table .ui-table-card td:first-child{font-weight:650;color:var(--text);font-size:.9375rem}
 .ui-card-table .ui-table-card td.actions{flex-wrap:wrap}.ui-card-table .ui-table-card td.actions::before{flex:1;text-align:left}
}

.panel-head.ui-section-heading{margin-bottom:0}