/* ============================================================
   ARIA ERP — design tokens + component library
   Forked from the Aria Inventory reference. Light + dark.
   ============================================================ */
:root{
  --page-gutter:24px; --page-max:1600px;
  --bg:#F5F5F7; --surface:#FFFFFF; --surface-2:#FBFBFD; --surface-3:#F1F2F5;
  --material:rgba(255,255,255,.72);
  --fg:#1D1D1F; --muted:#6E6E73; --faint:#9A9AA0;
  --border:rgba(0,0,0,.10); --hairline:rgba(0,0,0,.06);
  --accent:#0071E3; --accent-d:#0058b0; --accent-action:#0066CC; --accent-action-hover:#0058b0; --accent-tint:rgba(0,113,227,.12);
  --ok:#1f9d57; --ok-tint:rgba(31,157,87,.13);
  --warn:#b7791f; --warn-tint:rgba(183,121,31,.15);
  --danger:#d33a2c; --danger-tint:rgba(211,58,44,.12);
  --info:#0a84ff; --info-tint:rgba(10,132,255,.13);
  --violet:#7b46d3; --violet-tint:rgba(123,70,211,.13);
  --teal:#0a7d8c; --teal-tint:rgba(10,125,140,.13);
  --row-h:38px;
  --fs:1; /* text-size multiplier (personal preference) */
  --r-s:8px; --r-m:12px; --r-l:18px;
  --shadow:0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
  --shadow-lg:0 1px 2px rgba(0,0,0,.05), 0 24px 60px rgba(0,0,0,.16);
  --ease:cubic-bezier(.32,.72,0,1);
  --sel:rgba(0,113,227,.10);
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Inter",system-ui,sans-serif;
}
[data-theme="dark"]{
  --bg:#000000; --surface:#1C1C1E; --surface-2:#2C2C2E; --surface-3:#3A3A3C;
  --material:rgba(28,28,30,.72);
  --fg:#F5F5F7; --muted:#98989D; --faint:#7C7C82;
  --border:rgba(255,255,255,.13); --hairline:rgba(255,255,255,.08);
  --accent:#0A84FF; --accent-d:#3aa0ff; --accent-action:#0066CC; --accent-action-hover:#0058b0; --accent-tint:rgba(10,132,255,.20);
  --ok:#30D158; --ok-tint:rgba(48,209,88,.18);
  --warn:#FF9F0A; --warn-tint:rgba(255,159,10,.18);
  --danger:#FF453B; --danger-tint:rgba(255,69,58,.18);
  --info:#64D2FF; --info-tint:rgba(100,210,255,.18);
  --violet:#BF7BFF; --violet-tint:rgba(191,123,255,.20);
  --teal:#5ad3e0; --teal-tint:rgba(90,211,224,.18);
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.5);
  --shadow-lg:0 1px 2px rgba(0,0,0,.5), 0 28px 70px rgba(0,0,0,.7);
  --sel:rgba(10,132,255,.22);
}

/* ===== base ===== */
*{box-sizing:border-box;}
html,body{height:100%;margin:0;}
body{font-family:var(--sans);background:var(--bg);color:var(--fg);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-size:calc(14px * var(--fs,1));line-height:1.45;overflow:hidden;}
body.modal-open{overscroll-behavior:none;}
.tnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum";}
.mono{font-family:var(--mono);}
button{font:inherit;color:inherit;cursor:pointer;border:none;background:none;}
.ico{width:1.05em;height:1.05em;flex:none;vertical-align:-0.16em;}
.dochead .dt .ico{width:24px;height:24px;vertical-align:-0.22em;margin-right:2px;}
input,select,textarea{font:inherit;}
a{color:var(--accent);text-decoration:none;}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:10px;border:2px solid transparent;background-clip:content-box;}
::-webkit-scrollbar-thumb:hover{background:var(--muted);background-clip:content-box;}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px;}
.skip{position:absolute;left:-999px;top:8px;z-index:1000;background:var(--surface);padding:8px 14px;border-radius:var(--r-s);box-shadow:var(--shadow);}
.skip:focus{left:8px;}
[hidden]{display:none !important;}
.hidden{display:none !important;}

/* ===== demo auth ===== */
body.auth-locked .app,
body.auth-locked .tabbar,
body.auth-locked .pop,
body.auth-locked .palette,
body.auth-locked #scrim{display:none !important;}
/* Auth views can become taller than the visual viewport on short phones or
   while the on-screen keyboard is open. Keep the app shell locked, but let
   the unauthenticated surface reach every control instead of clipping it. */
body.auth-locked{overflow:auto;}
.auth-view{min-width:0;min-height:100dvh;display:grid;place-items:center;padding:28px;background:
  radial-gradient(circle at 18% 18%,rgba(0,113,227,.10),transparent 30%),
  linear-gradient(135deg,var(--bg),var(--surface-3));}
.auth-panel{width:min(430px,100%);min-width:0;display:flex;flex-direction:column;gap:24px;background:var(--surface);
  border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow-lg);padding:28px;}
.platform-login-panel{gap:18px;}
#setupWizardView.auth-view{position:relative;isolation:isolate;overflow:hidden;background:
  radial-gradient(circle at 76% 16%,rgba(124,58,237,.17),transparent 27%),
  radial-gradient(circle at 18% 82%,rgba(14,165,233,.18),transparent 29%),
  linear-gradient(135deg,#edf7ff 0%,#f6f3ff 48%,#ecfeff 100%);}
#setupWizardView.auth-view::before,#setupWizardView.auth-view::after{
  content:"";position:absolute;z-index:0;pointer-events:none;will-change:transform;}
#setupWizardView.auth-view::before{width:clamp(250px,29vw,430px);aspect-ratio:1;left:clamp(-130px,-5vw,-52px);top:clamp(-120px,-7vh,-46px);
  border-radius:50%;background:
  radial-gradient(circle at 30% 24%,rgba(255,255,255,.96) 0 5%,rgba(255,255,255,.42) 11%,transparent 25%),
  radial-gradient(circle at 36% 32%,#8be0ff 0%,#3b82f6 35%,#5145cd 70%,#22205f 100%);
  box-shadow:inset -42px -52px 84px rgba(20,25,100,.38),inset 26px 19px 42px rgba(255,255,255,.30),0 42px 95px rgba(42,91,180,.28);
  opacity:.86;animation:wizardOrbOne 15s ease-in-out infinite alternate;}
#setupWizardView.auth-view::after{width:clamp(190px,22vw,330px);aspect-ratio:1;right:clamp(-90px,-3vw,-38px);bottom:clamp(-105px,-8vh,-52px);
  border-radius:44% 56% 62% 38% / 43% 38% 62% 57%;background:
  radial-gradient(circle at 29% 25%,rgba(255,255,255,.88) 0 4%,rgba(255,255,255,.30) 13%,transparent 27%),
  radial-gradient(circle at 38% 34%,#c4b5fd 0%,#8b5cf6 37%,#4f46e5 69%,#27245f 100%);
  box-shadow:inset -35px -42px 70px rgba(38,30,105,.42),inset 20px 16px 36px rgba(255,255,255,.25),0 38px 88px rgba(94,64,180,.25);
  opacity:.78;animation:wizardOrbTwo 18s ease-in-out infinite alternate;}
#setupWizardView .auth-panel{position:relative;z-index:1;background:rgba(255,255,255,.78);border-color:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(28px) saturate(145%);backdrop-filter:blur(28px) saturate(145%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.92),0 32px 90px rgba(42,62,105,.18),0 8px 28px rgba(52,89,150,.10);}
[data-theme="dark"] #setupWizardView.auth-view{background:
  radial-gradient(circle at 76% 16%,rgba(124,58,237,.26),transparent 29%),
  radial-gradient(circle at 18% 82%,rgba(14,165,233,.22),transparent 31%),
  linear-gradient(135deg,#070b18 0%,#101027 50%,#06161c 100%);}
[data-theme="dark"] #setupWizardView.auth-view::before,[data-theme="dark"] #setupWizardView.auth-view::after{opacity:.58;}
[data-theme="dark"] #setupWizardView .auth-panel{background:rgba(28,28,30,.76);border-color:rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 34px 95px rgba(0,0,0,.46);}
@keyframes wizardOrbOne{from{transform:translate3d(0,0,0) rotate(-12deg) scale(1);}to{transform:translate3d(26px,18px,0) rotate(2deg) scale(1.04);}}
@keyframes wizardOrbTwo{from{transform:translate3d(0,0,0) rotate(10deg) scale(1);}to{transform:translate3d(-22px,-16px,0) rotate(-5deg) scale(1.05);}}
.auth-brand{display:flex;align-items:center;gap:12px;}
.auth-brand .mark{width:38px;height:38px;border-radius:11px;}
.auth-brand b{display:block;font-size:calc(16px * var(--fs,1));letter-spacing:-.01em;}
.auth-brand small{display:block;color:var(--muted);font-size:calc(12px * var(--fs,1));margin-top:1px;}
.auth-copy h1{margin:0;font-size:calc(30px * var(--fs,1));letter-spacing:0;}
.auth-copy p{margin:8px 0 0;color:var(--muted);font-size:calc(13.5px * var(--fs,1));line-height:1.55;}
.platform-realm-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;width:100%;padding:4px;background:var(--surface-3);border:1px solid var(--border);border-radius:12px;}
.platform-realm-tab{display:flex;align-items:center;justify-content:center;min-width:0;min-height:46px;padding:9px 8px;border:1px solid transparent;border-radius:8px;color:var(--muted);font-size:calc(13px * var(--fs,1));font-weight:600;line-height:1.2;text-align:center;white-space:normal;transition:background .15s var(--ease),color .15s var(--ease),border-color .15s var(--ease),box-shadow .15s var(--ease),transform .1s var(--ease);}
.platform-realm-tab:hover:not(.active){background:var(--surface);color:var(--fg);}
.platform-realm-tab.active{background:var(--accent-action);border-color:var(--accent-action);color:#fff;box-shadow:0 2px 7px rgba(0,113,227,.28);}
.platform-realm-tab:active{transform:scale(.98);}
.platform-realm-tab:focus-visible{position:relative;z-index:1;outline-offset:2px;}
.auth-form{display:flex;flex-direction:column;gap:13px;min-width:0;}
.auth-form .btn{width:100%;min-width:0;justify-content:center;}
.auth-login-divider{border-top:1px solid var(--hairline);}
.auth-realm-panel{display:flex;flex-direction:column;gap:13px;min-width:0;}
.auth-realm-recovery{display:flex;justify-content:flex-start;margin-top:-2px;}
.auth-realm-recovery .btn{width:auto;min-width:0;padding:0;color:var(--accent);font-size:calc(12.5px * var(--fs,1));}
.auth-realm-recovery .btn:hover{background:transparent;color:var(--accent-d);text-decoration:underline;}
.auth-password-control{display:flex;align-items:stretch;min-width:0;}
.auth-password-control input{min-width:0;flex:1;border-radius:10px 0 0 10px;}
.auth-password-toggle{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-width:70px;padding:0 10px;border:1px solid var(--border);border-left:0;border-radius:0 10px 10px 0;background:var(--surface-3);color:var(--muted);font-size:calc(12px * var(--fs,1));font-weight:600;line-height:1;transition:background .12s,color .12s,border-color .12s;}
.auth-password-toggle:hover{background:var(--accent-tint);color:var(--accent);}
.auth-password-toggle:focus-visible{position:relative;z-index:1;outline-offset:1px;}
.auth-password-toggle-icon{display:inline-grid;place-items:center;}
.auth-password-toggle-icon .ico{width:16px;height:16px;}
.platform-password-actions{display:grid;gap:8px;margin-top:8px;min-width:0;}
.platform-password-generate{min-height:42px;}
.platform-password-download{min-height:42px;}
.platform-password-status{display:block;color:var(--muted);font-size:calc(12px * var(--fs,1));line-height:1.45;}
.platform-password-status:empty{display:none;}
.auth-remember{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:calc(12.5px * var(--fs,1));line-height:1.35;cursor:pointer;user-select:none;}
.auth-remember input{width:18px;height:18px;flex:none;margin:0;accent-color:var(--accent);}
.auth-error{min-height:18px;color:var(--danger);font-size:calc(12.5px * var(--fs,1));font-weight:500;}
.auth-error:empty{display:block;}
.auth-help{margin:-2px 0 0;padding:10px 12px;border-radius:10px;background:var(--accent-tint);color:var(--muted);font-size:calc(12px * var(--fs,1));line-height:1.45;}
.auth-foot{display:flex;align-items:center;gap:10px;justify-content:space-between;color:var(--muted);font-size:calc(12px * var(--fs,1));border-top:1px solid var(--hairline);padding-top:16px;}
.wiz-h{margin:0;font-size:calc(19px * var(--fs,1));letter-spacing:-.005em;}
.wiz-p{margin:6px 0 0;color:var(--muted);font-size:calc(12.5px * var(--fs,1));line-height:1.5;}
.seg.wiz-lang-seg{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;
  padding:5px;margin-top:2px;background:var(--surface-3);border-color:var(--border);border-radius:12px;}
.seg.wiz-lang-seg button{justify-content:center;min-width:0;min-height:42px;padding:8px 10px;border-radius:8px;
  color:var(--muted);font-size:calc(12.5px * var(--fs,1));font-weight:600;line-height:1.2;text-align:center;
  white-space:normal;transition:background .15s var(--ease),color .15s var(--ease),box-shadow .15s var(--ease),transform .1s var(--ease);}
.seg.wiz-lang-seg button:hover:not(.on){background:var(--surface);color:var(--fg);}
.seg.wiz-lang-seg button.on{background:var(--accent-action);color:#fff;box-shadow:0 2px 7px rgba(0,113,227,.28);}
.seg.wiz-lang-seg button:active{transform:scale(.98);}
[data-theme="dark"] .seg.wiz-lang-seg button.on{background:var(--accent-action);color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.32);}

@media (max-width:560px){
  .auth-view{align-items:stretch;padding:18px;}
  .auth-panel{width:100%;min-height:calc(100dvh - 36px);justify-content:center;padding:22px;border-radius:14px;}
  .auth-form .btn{min-height:44px;white-space:normal;line-height:1.3;text-align:center;}
  .auth-copy h1{font-size:calc(27px * var(--fs,1));}
  .platform-login-panel{gap:16px;}
  .platform-realm-tab{min-height:44px;padding:8px 6px;font-size:calc(12px * var(--fs,1));}
  .auth-foot{align-items:flex-start;flex-direction:column;}
  #setupWizardView.auth-view::before{width:240px;left:-125px;top:-82px;opacity:.62;}
  #setupWizardView.auth-view::after{width:205px;right:-112px;bottom:-72px;opacity:.58;}
  #setupWizardView .auth-panel{-webkit-backdrop-filter:blur(20px) saturate(135%);backdrop-filter:blur(20px) saturate(135%);}
  .seg.wiz-lang-seg{gap:4px;padding:4px;}
  .seg.wiz-lang-seg button{padding:8px 6px;font-size:calc(12px * var(--fs,1));}
}

@media (prefers-reduced-motion:reduce){
  #setupWizardView.auth-view::before,#setupWizardView.auth-view::after{animation:none;}
}

/* ===== first-run setup — mobile-first language selection ===== */
#setupWizardView.auth-view{padding:20px;}
#setupWizardView .wizard-panel{width:min(680px,100%);height:80vh;min-height:80vh;
  justify-content:flex-start;gap:0;padding:38px 38px 28px;overflow:hidden;}
/* Keep navigation outside the single scrolling region, including long steps. */
#setupWizardView .wizard-brandbar,#setupWizardView .stepper,#setupWizardView .wizard-savebar{flex-shrink:0;}
#setupWizardView .wizard-step-body{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:3px;scroll-padding-block:8px;}
#setupWizardView .wizard-panel::before{content:"";position:absolute;z-index:0;pointer-events:none;
  top:-72px;left:-10%;width:120%;height:270px;border-radius:0 0 54% 30% / 0 0 42% 24%;
  background:radial-gradient(ellipse at 78% 38%,rgba(191,219,254,.80),transparent 52%),
    linear-gradient(176deg,rgba(224,231,255,.86),rgba(255,255,255,.20) 76%);opacity:.86;}
#setupWizardView .wizard-panel>*{position:relative;z-index:1;}
#setupWizardView .wizard-brandbar{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;}
#setupWizardView .wizard-brandbar .auth-brand{gap:16px;}
#setupWizardView .wizard-brandbar .auth-brand .mark{width:72px;height:72px;border-radius:20px;
  box-shadow:0 8px 18px rgba(0,113,227,.28);}
#setupWizardView .wizard-brandbar .auth-brand .mark .ico{width:34px;height:34px;}
#setupWizardView .wizard-brandbar .auth-brand b{font-size:calc(26px * var(--fs,1));letter-spacing:-.035em;}
#setupWizardView .wizard-brandbar .auth-brand small{font-size:calc(14px * var(--fs,1));margin-top:3px;}
.wiz-locale-picker{display:flex;align-items:center;gap:6px;min-height:34px;padding:4px 2px;color:var(--fg);
  border-bottom:1px solid transparent;font-size:calc(14px * var(--fs,1));font-weight:600;cursor:pointer;}
.wiz-locale-picker:hover{border-bottom-color:var(--accent);}
.wiz-locale-icon{display:grid;place-items:center;color:var(--muted);}
.wiz-locale-icon .ico{width:18px;height:18px;}
.wiz-locale-picker select{appearance:none;-webkit-appearance:none;border:0;outline:0;background:transparent;color:inherit;
  padding:0;max-width:108px;font-weight:600;cursor:pointer;}
.wiz-locale-picker option{color:#111827;background:#fff;}
.wiz-locale-chevron{display:grid;place-items:center;color:var(--muted);}
.wiz-locale-chevron .ico{width:14px;height:14px;}
#setupWizardView .stepper{margin:48px 0 0;align-items:center;}
#setupWizardView .step{font-size:0;gap:0;}
#setupWizardView .step .sdot{width:38px;height:38px;border-width:2px;font-size:calc(15px * var(--fs,1));}
#setupWizardView .step .sdot span{font-size:14px !important;}
#setupWizardView .step.current .sdot{box-shadow:0 0 0 5px var(--accent-tint);}
#setupWizardView .stepline{height:2px;min-width:12px;margin:0 10px;}
#setupWizardView .wizard-step-body{margin-top:42px;}
#setupWizardView .wizard-step-body .wiz-h{font-size:calc(28px * var(--fs,1));line-height:1.2;letter-spacing:-.03em;}
#setupWizardView .wizard-step-body .wiz-p{margin-top:12px;font-size:calc(14.5px * var(--fs,1));line-height:1.5;}
.wiz-language-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:24px;}
.wiz-language-card{position:relative;display:flex;align-items:center;gap:12px;min-width:0;min-height:94px;padding:15px 14px;
  text-align:left;background:rgba(255,255,255,.60);border:1px solid rgba(148,163,184,.30);border-radius:15px;
  color:var(--fg);transition:border-color .15s var(--ease),box-shadow .15s var(--ease),background .15s var(--ease),transform .12s var(--ease);}
.wiz-language-card.is-wide{grid-column:1 / -1;}
.wiz-language-card:hover{border-color:rgba(37,99,235,.55);background:rgba(255,255,255,.82);transform:translateY(-1px);}
.wiz-language-card:active{transform:scale(.985);}
.wiz-language-card.is-selected{border-color:var(--accent);background:linear-gradient(135deg,rgba(239,246,255,.95),rgba(219,234,254,.72));box-shadow:0 0 0 2px var(--accent-tint);}
.wiz-language-badge{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;flex:none;font-size:12px;font-weight:800;letter-spacing:-.02em;}
.wiz-language-badge .ico{width:21px;height:21px;}
.wiz-language-badge-en{color:#1769d1;background:#dbeafe;}
.wiz-language-badge-ms{color:#07945d;background:#d1fae5;}
.wiz-language-badge-zh{color:#fff;background:linear-gradient(145deg,#3b82f6,#2563eb);}
.wiz-language-badge-ja{color:#7c3aed;background:#ede9fe;}
.wiz-language-badge-vi{color:#ea580c;background:#ffedd5;}
.wiz-language-copy{display:flex;flex-direction:column;gap:2px;min-width:0;padding-right:20px;}
.wiz-language-copy b{font-size:calc(15px * var(--fs,1));line-height:1.2;white-space:normal;overflow-wrap:anywhere;}
.wiz-language-copy small{color:var(--muted);font-size:calc(12.5px * var(--fs,1));line-height:1.25;}
.wiz-language-check{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:23px;height:23px;border-radius:50%;color:#fff;background:var(--accent-action);}
.wiz-language-check:empty{display:none;}
.wiz-language-check .ico{width:14px;height:14px;}
.wiz-language-note{display:flex;align-items:flex-start;gap:10px;margin-top:20px;padding:13px 14px;border-radius:13px;
  color:#24528b;background:rgba(219,234,254,.72);font-size:calc(12.5px * var(--fs,1));line-height:1.45;}
.wiz-language-note>.ico{width:18px;height:18px;flex:none;margin-top:1px;}
.wiz-background-picker{margin-top:20px;padding-top:18px;border-top:1px solid var(--hairline);}
.wiz-background-copy h3{margin:0;font-size:calc(15px * var(--fs,1));letter-spacing:-.01em;}
.wiz-background-copy p{margin:4px 0 0;color:var(--muted);font-size:calc(12px * var(--fs,1));line-height:1.4;}
.wiz-background-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:12px;}
.wiz-background-option{position:relative;display:flex;align-items:center;gap:8px;min-width:0;min-height:60px;padding:8px 9px;text-align:left;
  color:var(--fg);background:var(--surface-2);border:1px solid var(--hairline);border-radius:11px;
  transition:border-color .15s var(--ease),background .15s var(--ease),box-shadow .15s var(--ease),transform .12s var(--ease);}
.wiz-background-option:hover{border-color:color-mix(in srgb,var(--accent) 54%,var(--hairline));background:var(--surface);transform:translateY(-1px);}
.wiz-background-option:active{transform:scale(.985);}
.wiz-background-option.is-selected{border-color:var(--accent);background:var(--accent-tint);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 20%,transparent);}
.wiz-background-swatch{width:34px;height:34px;flex:none;border-radius:9px;border:1px solid rgba(0,0,0,.10);box-shadow:inset 0 1px 0 rgba(255,255,255,.45);}
.wiz-background-swatch-aurora{background:radial-gradient(circle at 28% 28%,#fff 0 8%,transparent 20%),linear-gradient(135deg,#93c5fd,#6366f1 60%,#312e81);}
.wiz-background-swatch-mist{background:radial-gradient(circle at 30% 28%,#e0f2fe 0 10%,transparent 28%),linear-gradient(145deg,#ecfeff,#bae6fd 55%,#0e7490);}
.wiz-background-swatch-paper{background:linear-gradient(145deg,#fff,#f1f5f9);}
.wiz-background-swatch-night-sky{background:radial-gradient(circle at 30% 25%,#a5b4fc 0 7%,transparent 20%),linear-gradient(145deg,#111827,#312e81 58%,#0f766e);}
.wiz-background-option-copy{display:flex;flex-direction:column;gap:1px;min-width:0;padding-right:16px;}
.wiz-background-option-copy b{font-size:calc(11.5px * var(--fs,1));line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.wiz-background-option-copy small{color:var(--muted);font-size:calc(10px * var(--fs,1));line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.wiz-background-check{position:absolute;top:6px;right:6px;display:grid;place-items:center;width:16px;height:16px;border-radius:50%;color:#fff;background:var(--accent-action);}
.wiz-background-check:empty{display:none;}
.wiz-background-check .ico{width:10px;height:10px;}
.wiz-color-picker{margin-top:14px;padding-top:14px;border-top:1px solid var(--hairline);}
.wiz-color-copy h3{margin:0;font-size:calc(15px * var(--fs,1));letter-spacing:-.01em;}
.wiz-color-copy p{margin:4px 0 0;color:var(--muted);font-size:calc(12px * var(--fs,1));line-height:1.4;}
.wiz-color-options{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px;margin-top:9px;}
.wiz-color-option{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-width:0;min-height:54px;padding:6px 5px;color:var(--fg);background:var(--surface-2);border:1px solid var(--hairline);border-radius:10px;cursor:pointer;transition:border-color .15s var(--ease),background .15s var(--ease),box-shadow .15s var(--ease),transform .12s var(--ease);}
.wiz-color-option:hover{border-color:color-mix(in srgb,var(--accent) 54%,var(--hairline));background:var(--surface);transform:translateY(-1px);}
.wiz-color-option:active{transform:scale(.985);}
.wiz-color-option:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.wiz-color-option.is-selected{border-color:var(--accent);background:var(--accent-tint);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 20%,transparent);}
.wiz-color-swatches{display:flex;width:44px;height:13px;overflow:hidden;border:1px solid rgba(0,0,0,.1);border-radius:5px;box-shadow:inset 0 1px 0 rgba(255,255,255,.35);}
.wiz-color-swatches i{display:block;flex:1;min-width:0;}
.wiz-color-option b{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:calc(10.5px * var(--fs,1));line-height:1.15;}
.wiz-color-check{position:absolute;top:4px;right:4px;display:grid;place-items:center;width:14px;height:14px;border-radius:50%;color:#fff;background:var(--accent-action);}
.wiz-color-check:empty{display:none;}
.wiz-color-check .ico{width:9px;height:9px;}
[data-theme="dark"] .wiz-locale-picker option{color:#f5f5f7;background:#1c1c1e;}
[data-theme="dark"] .wiz-language-card{background:rgba(28,28,30,.62);border-color:rgba(255,255,255,.14);}
[data-theme="dark"] .wiz-language-card:hover{background:rgba(58,58,60,.78);}
[data-theme="dark"] .wiz-language-card.is-selected{background:rgba(10,132,255,.20);}
[data-theme="dark"] .wiz-language-note{color:#b9d8ff;background:rgba(10,132,255,.16);}
[data-theme="dark"] .wiz-background-option{background:rgba(28,28,30,.62);border-color:rgba(255,255,255,.14);}
[data-theme="dark"] .wiz-background-option:hover{background:rgba(58,58,60,.78);}
[data-theme="dark"] .wiz-color-option{background:rgba(28,28,30,.62);border-color:rgba(255,255,255,.14);}
[data-theme="dark"] .wiz-color-option:hover{background:rgba(58,58,60,.78);}
#setupWizardView .wizard-savebar{width:100%;margin-top:auto !important;padding:28px 0 0;border-top:0;background:transparent;gap:12px;}
#setupWizardView .wizard-primary{position:relative;flex:1;min-width:0;min-height:56px;justify-content:center;border-radius:14px;font-size:calc(16px * var(--fs,1));}
#setupWizardView .wizard-primary .ico{position:absolute;right:20px;width:21px;height:21px;}
#setupWizardView #wizBack{min-height:56px;border-radius:14px;}

@media (max-width:560px){
  #setupWizardView.auth-view{padding:16px;}
  #setupWizardView .wizard-panel{min-height:calc(100dvh - 32px);padding:30px 22px 22px;border-radius:22px;}
  #setupWizardView .wizard-panel::before{top:-52px;height:225px;}
  #setupWizardView .wizard-brandbar .auth-brand{gap:13px;}
  #setupWizardView .wizard-brandbar .auth-brand .mark{width:62px;height:62px;border-radius:18px;}
  #setupWizardView .wizard-brandbar .auth-brand .mark .ico{width:29px;height:29px;}
  #setupWizardView .wizard-brandbar .auth-brand b{font-size:calc(23px * var(--fs,1));}
  #setupWizardView .wizard-brandbar .auth-brand small{font-size:calc(13px * var(--fs,1));}
  .wiz-locale-picker{font-size:calc(13px * var(--fs,1));gap:4px;}
  .wiz-locale-picker select{max-width:84px;}
  #setupWizardView .stepper{margin-top:42px;}
  #setupWizardView .step .sdot{width:34px;height:34px;}
  #setupWizardView .stepline{min-width:8px;margin:0 6px;}
  #setupWizardView .wizard-step-body{margin-top:36px;}
  #setupWizardView .wizard-step-body .wiz-h{font-size:calc(26px * var(--fs,1));}
  .wiz-language-grid{gap:10px;margin-top:20px;}
  .wiz-language-card{min-height:88px;padding:13px 11px;gap:9px;border-radius:14px;}
  .wiz-language-badge{width:38px;height:38px;}
  .wiz-language-copy b{font-size:calc(13.5px * var(--fs,1));}
  .wiz-language-copy small{font-size:calc(11.5px * var(--fs,1));}
  .wiz-language-note{margin-top:16px;padding:12px;font-size:calc(11.5px * var(--fs,1));}
  #setupWizardView .wizard-savebar{padding-top:22px;}
}

/* ===== shell grid ===== */
.app{display:grid;grid-template-columns:248px 1fr;height:100dvh;}
.app.nav-collapsed{grid-template-columns:68px 1fr;}
.app.nav-collapsed .sidebar{padding:14px 10px;}
.app.nav-collapsed .brand{justify-content:center;padding:6px 0 14px;}
.app.nav-collapsed .brandtext,.app.nav-collapsed .navlabel,.app.nav-collapsed .nav .badge,.app.nav-collapsed .navgroup h6{display:none;}
.app.nav-collapsed .navgroup h6{opacity:0;height:0;margin:0;overflow:hidden;}
.app.nav-collapsed .nav{justify-content:center;padding:9px 0;gap:0;}

/* ===== sidebar ===== */
.sidebar{background:var(--material);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);
  border-right:1px solid var(--hairline);display:flex;flex-direction:column;padding:14px 12px;gap:1px;overflow-y:auto;overflow-x:hidden;}
.sidebar::-webkit-scrollbar{width:0;}
.brand{display:flex;align-items:center;gap:10px;padding:6px 8px 14px;flex:none;width:100%;background:none;border:none;font:inherit;color:inherit;text-align:left;cursor:pointer;border-radius:12px;}
.brand:hover .mark{filter:brightness(1.06);transform:translateY(-1px);}
.mark{width:30px;height:30px;border-radius:9px;background:linear-gradient(160deg,var(--accent),#3aa0ff);display:grid;place-items:center;color:#fff;flex:none;box-shadow:0 2px 8px rgba(0,113,227,.35);transition:filter .12s,transform .12s;position:relative;}
.mark.brand-logo-mark{background:#fff;border:1px solid rgba(0,0,0,.10);overflow:hidden;}
.mark.brand-logo-mark .erp-brand-logo{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit;transition:opacity .12s;}
.brand:hover .mark.brand-logo-mark .erp-brand-logo{opacity:0;}
.brand:hover .mark::after{content:"";position:absolute;inset:0;border-radius:9px;background:rgba(0,0,0,.28);}
.brand:hover .mark svg{opacity:0;}
.brand:hover .mark::before{content:"«";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:calc(16px * var(--fs,1));font-weight:700;z-index:1;}
.app.nav-collapsed .brand:hover .mark::before{content:"»";}
.brand b{font-size:calc(16px * var(--fs,1));letter-spacing:-.02em;}
.brand small{display:block;color:var(--muted);font-size:calc(11px * var(--fs,1));margin-top:-2px;}
.navgroup{margin-top:8px;}
.navgroup h6{margin:8px 10px 3px;font-size:calc(10.5px * var(--fs,1));text-transform:uppercase;letter-spacing:.07em;color:var(--faint);font-weight:700;}
.nav{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:var(--r-s);color:var(--muted);font-weight:500;font-size:calc(13.5px * var(--fs,1));width:100%;text-align:left;transition:background .12s var(--ease),color .12s var(--ease);}
.nav svg{width:18px;height:18px;flex:none;}
.nav:hover:not(.is-disabled){background:var(--hairline);color:var(--fg);}
.nav.active{background:var(--surface);color:var(--fg);font-weight:600;box-shadow:var(--shadow);}
[data-theme="dark"] .nav.active{background:rgba(255,255,255,.08);box-shadow:none;}
.nav.active svg{color:var(--accent);}
.nav.is-disabled{opacity:.42;cursor:not-allowed;}
.nav .badge{margin-left:auto;font-size:calc(11px * var(--fs,1));background:var(--accent-tint);color:var(--accent);border-radius:20px;padding:1px 7px;font-weight:600;}
.nav .badge.warn{background:var(--warn-tint);color:var(--warn);}
.nav-maturity{margin-left:auto;font-size:calc(9px * var(--fs,1));line-height:1;text-transform:uppercase;letter-spacing:.045em;border-radius:20px;padding:4px 6px;font-weight:700;white-space:nowrap;}
.nav .badge+.nav-maturity{margin-left:2px;}
.nav-maturity.preview{background:var(--warn-tint);color:var(--warn);}
.nav-maturity.partial{background:var(--accent-tint);color:var(--accent);}
.app.nav-collapsed .nav-maturity{display:none;}
.sidebar-foot{margin-top:auto;border-top:1px solid var(--hairline);padding-top:8px;}

/* ===== main / topbar ===== */
.main{display:flex;flex-direction:column;min-width:0;height:100dvh;overflow:hidden;}
.topbar{position:sticky;top:0;z-index:30;background:var(--material);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid var(--hairline);display:flex;align-items:center;gap:12px;padding:10px 18px;}
.search{flex:1;min-width:0;display:flex;align-items:center;gap:8px;background:var(--surface-2);border:1px solid var(--hairline);border-radius:var(--r-s);padding:7px 10px;color:var(--muted);cursor:pointer;text-align:left;transition:border-color .15s;}
.search:hover{border-color:var(--border);}
.search svg{width:16px;height:16px;flex:none;}
.search-label{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.kbd{font-size:calc(11px * var(--fs,1));color:var(--muted);background:var(--surface);border:1px solid var(--hairline);border-radius:5px;padding:1px 6px;font-feature-settings:"tnum";box-shadow:0 1px 0 var(--hairline);}
[data-theme="dark"] .kbd{background:rgba(255,255,255,.06);}
.spacer{flex:1;}
.ctxbtn{display:flex;flex-direction:column;line-height:1.18;align-items:flex-start;padding:4px 10px;border-radius:var(--r-s);}
.ctxbtn:hover{background:var(--hairline);}
.ctxbtn b{font-size:calc(12.5px * var(--fs,1));letter-spacing:-.01em;display:flex;align-items:center;gap:5px;}
.ctxbtn small{font-size:calc(11px * var(--fs,1));color:var(--muted);}
.ctxbtn svg{width:13px;height:13px;color:var(--muted);}
.env{font-size:calc(10px * var(--fs,1));font-weight:700;letter-spacing:.08em;color:var(--ok);border:1px solid color-mix(in srgb,var(--ok) 40%,transparent);background:var(--ok-tint);border-radius:20px;padding:3px 9px;}
.iconbtn{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--muted);transition:background .12s;position:relative;}
.iconbtn[hidden]{display:none;}
.iconbtn:hover{background:var(--hairline);color:var(--fg);}
.iconbtn.active{background:var(--accent-tint);color:var(--accent);}
.iconbtn svg{width:18px;height:18px;}
.iconbtn .dotbadge{position:absolute;top:6px;right:6px;width:8px;height:8px;border-radius:50%;background:var(--danger);border:2px solid var(--bg);}
.avatar{width:30px;height:30px;box-sizing:border-box;padding:0;border-radius:50%;background:var(--surface-2);color:var(--muted);border:1px solid var(--border);display:inline-flex;align-items:center;justify-content:center;line-height:0;flex:none;overflow:hidden;}
.avatar svg{width:19px;height:19px;display:block;flex:none;}
.avatar img{width:100%;height:100%;display:block;object-fit:cover;}
.avatar.on{box-shadow:0 0 0 3px var(--accent-tint);}

/* ===== popover menus (account / quick create / notifications) ===== */
.popwrap{position:relative;}
.pop{position:fixed;z-index:130;background:var(--material);backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%);
  border:1px solid var(--border);border-radius:var(--r-m);box-shadow:var(--shadow-lg);
  visibility:hidden;opacity:0;pointer-events:none;transform:translateY(-6px) scale(.98);transform-origin:top right;
  transition:opacity .18s var(--ease),transform .18s var(--ease);max-height:calc(100dvh - 70px);overflow-y:auto;}
.pop.show{visibility:visible;opacity:1;pointer-events:auto;transform:translateY(0) scale(1);}
.acct-head{display:flex;align-items:center;gap:12px;padding:15px 16px;border-bottom:1px solid var(--hairline);}
.acct-head .av{width:42px;height:42px;box-sizing:border-box;padding:0;border-radius:50%;background:var(--surface-2);color:var(--muted);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;line-height:0;overflow:hidden;flex:none;}
.acct-head .av svg{width:27px;height:27px;display:block;flex:none;}
.acct-head .av img{width:100%;height:100%;display:block;object-fit:cover;}
.acct-head .who b{font-size:calc(14px * var(--fs,1));display:block;}
.acct-head .who small{font-size:calc(12px * var(--fs,1));color:var(--muted);}
.acct-role{display:inline-flex;align-items:center;gap:5px;margin-top:3px;font-size:calc(10.5px * var(--fs,1));font-weight:600;color:var(--accent);background:var(--accent-tint);border-radius:20px;padding:1px 8px;}
.acct-role svg{width:12px;height:12px;}
.menu-section{padding:6px;}
.menu-section+.menu-section{border-top:1px solid var(--hairline);}
.menu-head{font-size:calc(10.5px * var(--fs,1));text-transform:uppercase;letter-spacing:.05em;color:var(--faint);font-weight:700;padding:8px 11px 4px;display:flex;align-items:center;}
.menu-head .clearall{margin-left:auto;color:var(--accent);font-weight:600;text-transform:none;letter-spacing:0;font-size:calc(11.5px * var(--fs,1));}
.menu-item{display:flex;align-items:center;gap:11px;width:100%;text-align:left;padding:9px 11px;border-radius:var(--r-s);font-size:calc(13.5px * var(--fs,1));color:var(--fg);transition:background .1s;}
.menu-item:hover{background:var(--hairline);}
.menu-item svg{width:17px;height:17px;color:var(--muted);flex:none;}
.menu-item .meta{margin-left:auto;font-size:calc(11.5px * var(--fs,1));color:var(--muted);font-weight:500;}
.menu-item.danger{color:var(--danger);}.menu-item.danger svg{color:var(--danger);}
.menu-item .sw{margin-left:auto;width:34px;height:20px;border-radius:20px;background:var(--border);position:relative;transition:background .18s var(--ease);flex:none;}
.menu-item .sw::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3);transition:transform .18s var(--ease);}
.menu-item .sw.on{background:var(--accent);}.menu-item .sw.on::after{transform:translateX(14px);}
/* notification rows */
.notif{display:flex;gap:11px;width:100%;text-align:left;padding:11px;border-radius:var(--r-s);transition:background .1s;align-items:flex-start;}
.notif:hover{background:var(--hairline);}
.notif .ni{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none;}
.notif .ni svg{width:16px;height:16px;}
.notif .nb b{font-size:calc(13px * var(--fs,1));display:block;letter-spacing:-.01em;}
.notif .nb p{margin:1px 0 0;font-size:calc(12px * var(--fs,1));color:var(--muted);line-height:1.4;}
.notif .nb .nt{font-size:calc(11px * var(--fs,1));color:var(--faint);margin-top:3px;}
.notif.unread{background:var(--accent-tint);}
.notif.unread:hover{background:color-mix(in srgb,var(--accent) 18%,transparent);}

/* ===== notification center ===== */
.notifmenu{padding:0;overflow:hidden;}
.nc-head{display:flex;align-items:center;gap:6px;padding:13px 14px 11px;border-bottom:1px solid var(--hairline);}
.nc-title{font-size:calc(14.5px * var(--fs,1));font-weight:650;display:flex;align-items:center;gap:8px;letter-spacing:-.01em;}
.nc-count{font-size:calc(11px * var(--fs,1));font-weight:700;color:#fff;background:var(--accent-action);border-radius:20px;padding:1px 7px;min-width:19px;text-align:center;}
.nc-act{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:var(--muted);border:1px solid transparent;transition:background .1s,color .1s,border-color .1s,transform .08s;}
.nc-act:first-of-type{margin-left:auto;}
.nc-act:hover{background:var(--surface-2);border-color:var(--hairline);color:var(--fg);}
.nc-act:active{transform:translateY(1px);}
.nc-act:disabled{opacity:.42;cursor:default;pointer-events:none;}
.nc-act svg{width:16px;height:16px;}
.nc-tabs{display:flex;gap:4px;padding:9px 10px;border-bottom:1px solid var(--hairline);}
.nc-tab{font-size:calc(12.5px * var(--fs,1));font-weight:550;color:var(--muted);padding:5px 12px;border-radius:20px;display:flex;align-items:center;gap:6px;transition:background .1s,color .1s;}
.nc-tab:hover{background:var(--hairline);color:var(--fg);}
.nc-tab.on{background:var(--accent-action);color:#fff;}
.nc-tabn{font-size:calc(10.5px * var(--fs,1));font-weight:700;background:var(--accent-tint);color:var(--accent);border-radius:10px;padding:0 5px;line-height:1.5;}
.nc-tab.on .nc-tabn{background:rgba(255,255,255,.25);color:#fff;}
.nc-list{max-height:382px;overflow-y:auto;padding:6px;}
.nc-group{font-size:calc(10.5px * var(--fs,1));text-transform:uppercase;letter-spacing:.05em;color:var(--faint);font-weight:700;padding:9px 8px 4px;}
.nc-item{display:flex;gap:11px;align-items:flex-start;padding:10px 30px 10px 10px;border-radius:var(--r-s);cursor:pointer;position:relative;transition:background .1s;}
.nc-item:hover{background:var(--hairline);}
.nc-item.unread{background:var(--accent-tint);}
.nc-item.unread:hover{background:color-mix(in srgb,var(--accent) 16%,transparent);}
.nc-item .ni{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;flex:none;}
.nc-item .ni svg{width:16px;height:16px;}
.nc-body{flex:1;min-width:0;}
.nc-body b{font-size:calc(13px * var(--fs,1));display:block;letter-spacing:-.01em;}
.nc-body p{margin:1px 0 0;font-size:calc(12px * var(--fs,1));color:var(--muted);line-height:1.4;}
.nc-meta{font-size:calc(11px * var(--fs,1));color:var(--faint);margin-top:4px;display:block;}
.nc-cat{color:var(--muted);font-weight:600;}
.nc-dot{position:absolute;top:13px;right:11px;width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none;}
.nc-x{position:absolute;top:9px;right:7px;width:22px;height:22px;border-radius:6px;display:grid;place-items:center;color:var(--faint);opacity:0;transition:opacity .1s,background .1s,color .1s;}
.nc-item:hover .nc-x{opacity:1;}
.nc-x:hover{background:var(--surface);color:var(--fg);}
.nc-x svg{width:14px;height:14px;}
.nc-empty{display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;padding:38px 20px;color:var(--muted);}
.nc-empty svg{width:26px;height:26px;color:var(--ok);}
.nc-empty b{font-size:calc(13.5px * var(--fs,1));color:var(--fg);}
.nc-empty span{font-size:calc(12px * var(--fs,1));}
.nc-foot{border-top:1px solid var(--hairline);padding:6px;}
.nc-foot button{width:100%;text-align:center;padding:9px;border-radius:var(--r-s);font-size:calc(12.5px * var(--fs,1));font-weight:600;color:var(--accent);transition:background .1s;}
.nc-foot button:hover{background:var(--hairline);}
/* bell count badge */
.iconbtn .dotbadge.count{top:1px;right:1px;width:auto;min-width:16px;height:16px;border-radius:9px;padding:0 4px;font-size:calc(10px * var(--fs,1));font-weight:700;line-height:1;color:#fff;display:grid;place-items:center;border:2px solid var(--bg);}

/* ===== content shells ===== */
.content{display:grid;grid-template-columns:minmax(0,1fr) 400px;min-height:0;flex:1;overflow:hidden;}
.content.detail-collapsed{grid-template-columns:minmax(0,1fr) 0;}
.content.full{grid-template-columns:minmax(0,1fr);}
.master{display:flex;flex-direction:column;min-width:0;border-right:1px solid var(--hairline);overflow:hidden;}
.content.detail-collapsed .master,.content.full .master{border-right:none;}
.scrollarea{flex:1;overflow:auto;min-height:0;}
.screen-preview-banner{flex:none;display:flex;align-items:center;gap:10px;padding:8px 18px;background:var(--warn-tint);border-bottom:1px solid color-mix(in srgb,var(--warn) 28%,transparent);color:var(--warn);}
.screen-preview-banner>svg{width:17px;height:17px;flex:none;}
.screen-preview-banner>div{display:flex;align-items:baseline;gap:8px;min-width:0;}
.screen-preview-banner b{font-size:calc(12px * var(--fs,1));white-space:nowrap;}
.screen-preview-banner span{font-size:calc(11.5px * var(--fs,1));color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.preview-write-disabled{cursor:not-allowed!important;opacity:.48!important;filter:saturate(.55);}

/* ===== page head ===== */
.pagehead{padding:18px var(--page-gutter) 8px;flex:none;}
.crumb{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:calc(12.5px * var(--fs,1));margin-bottom:7px;flex-wrap:wrap;}
.crumb button{color:var(--muted);padding:0;font-size:calc(12.5px * var(--fs,1));cursor:pointer;}
.crumb button:hover{color:var(--fg);}
.crumb .step{color:var(--muted);}
.crumb .sep{opacity:.5;}
.crumb .cur{color:var(--fg);font-weight:500;}
.h1row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.h1row h1{white-space:nowrap;}
h1{font-size:calc(27px * var(--fs,1));font-weight:600;letter-spacing:-.02em;margin:0;}
.countchip{font-size:calc(13px * var(--fs,1));font-weight:600;color:var(--muted);background:var(--surface);border:1px solid var(--hairline);border-radius:20px;padding:3px 11px;}
.h1sub{color:var(--muted);font-size:calc(13.5px * var(--fs,1));margin-top:5px;}
.headright{margin-left:auto;display:flex;align-items:center;gap:16px;}
.kfig{text-align:right;}
.kfig small{display:block;color:var(--muted);font-size:calc(10.5px * var(--fs,1));letter-spacing:.03em;text-transform:uppercase;}
.kfig b{font-size:calc(17px * var(--fs,1));letter-spacing:-.01em;}
.kfig b.pos{color:var(--ok);}.kfig b.neg{color:var(--danger);}

/* ===== toolbar / chips / segmented ===== */
.toolbar{display:flex;align-items:center;gap:10px;padding:8px 24px 12px;flex-wrap:wrap;flex:none;}
.filterchips{display:flex;gap:6px;flex-wrap:wrap;}
.chip{font-size:calc(12.5px * var(--fs,1));font-weight:500;color:var(--muted);background:var(--surface);border:1px solid var(--hairline);border-radius:20px;padding:5px 11px;transition:all .12s;display:flex;align-items:center;gap:6px;white-space:nowrap;}
.chip:hover{color:var(--fg);border-color:var(--border);}
.chip.on{background:var(--fg);color:var(--bg);border-color:var(--fg);}
.chip .dot{width:7px;height:7px;border-radius:50%;}
.chip .ct{opacity:.6;font-variant-numeric:tabular-nums;}
.seg{display:flex;background:var(--surface-2);border:1px solid var(--hairline);border-radius:9px;padding:2px;gap:2px;}
.seg button{color:var(--muted);font-size:calc(12.5px * var(--fs,1));font-weight:500;padding:4px 10px;border-radius:7px;display:flex;align-items:center;gap:6px;transition:all .15s var(--ease);}
.seg button svg{width:15px;height:15px;}
.seg button.on{background:var(--surface);color:var(--fg);box-shadow:0 1px 2px rgba(0,0,0,.08);font-weight:600;}
[data-theme="dark"] .seg button.on{background:rgba(255,255,255,.14);}
.grow{flex:1;}
.viewsel{display:flex;align-items:center;gap:7px;font-size:calc(12.5px * var(--fs,1));font-weight:600;color:var(--fg);background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-s);padding:6px 11px;}
.viewsel:hover{border-color:var(--border);}
.viewsel svg{width:14px;height:14px;color:var(--muted);}
.viewsel .star{color:var(--warn);}

/* ===== buttons ===== */
.btn{display:inline-flex;align-items:center;gap:7px;border-radius:var(--r-s);padding:8px 14px;font-size:calc(13.5px * var(--fs,1));font-weight:600;border:1px solid transparent;transition:all .14s var(--ease);white-space:nowrap;}
.btn svg{width:16px;height:16px;}
.btn.primary{background:var(--accent-action);color:#fff;}
.btn.primary:hover{background:var(--accent-action-hover);}
.btn.primary:active{transform:scale(.97);}
.btn.plain{color:var(--accent);}
.btn.plain:hover{background:var(--accent-tint);}
.btn.soft{background:var(--surface-2);border-color:var(--hairline);color:var(--fg);}
.btn.soft:hover{border-color:var(--border);}
.btn.ghost{color:var(--muted);}
.btn.ghost:hover{background:var(--hairline);color:var(--fg);}
.btn.danger{color:var(--danger);}
.btn.danger:hover{background:var(--danger-tint);}
.btn.danger-solid{background:var(--danger);color:#fff;}
.btn.danger-solid:hover{filter:brightness(1.06);}
.btn.ok-solid{background:var(--ok);color:#fff;}
.btn.ok-solid:hover{filter:brightness(1.06);}
.btn[disabled],.btn.is-disabled{opacity:.4;cursor:not-allowed;}
.btn.sm{padding:5px 10px;font-size:calc(12.5px * var(--fs,1));}
.btn.lg{padding:11px 20px;font-size:calc(14.5px * var(--fs,1));}

/* ===== capsule badges ===== */
.cap{display:inline-flex;align-items:center;gap:5px;font-size:calc(11.5px * var(--fs,1));font-weight:600;border-radius:20px;padding:3px 9px;letter-spacing:-.01em;white-space:nowrap;}
.cap .dot{width:6px;height:6px;border-radius:50%;}
.cap.ok{color:var(--ok);background:var(--ok-tint);}.cap.ok .dot{background:var(--ok);}
.cap.warn{color:var(--warn);background:var(--warn-tint);}.cap.warn .dot{background:var(--warn);}
.cap.danger{color:var(--danger);background:var(--danger-tint);}.cap.danger .dot{background:var(--danger);}
.cap.info{color:var(--info);background:var(--info-tint);}.cap.info .dot{background:var(--info);}
.cap.accent{color:var(--accent);background:var(--accent-tint);}.cap.accent .dot{background:var(--accent);}
.cap.violet{color:var(--violet);background:var(--violet-tint);}.cap.violet .dot{background:var(--violet);}
.cap.teal{color:var(--teal);background:var(--teal-tint);}.cap.teal .dot{background:var(--teal);}
.cap.neutral{color:var(--muted);background:var(--hairline);}.cap.neutral .dot{background:var(--muted);}
.cap.lg{font-size:calc(12.5px * var(--fs,1));padding:4px 11px;}

/* ===== data table (CSS-grid div implementation) ===== */
.tablewrap{flex:1;overflow:auto;min-height:0;}
.dt-page{max-width:var(--page-max);margin:0 auto;width:100%;}
.dt{min-width:760px;font-size:calc(13.5px * var(--fs,1));}
.dt-r{display:grid;grid-template-columns:var(--tpl);align-items:center;min-height:var(--row-h);border-bottom:1px solid var(--hairline);}
.dt-head{background:var(--surface);min-height:34px;border-bottom:1px solid var(--border);}
.dt-head .dt-c{font-size:calc(11px * var(--fs,1));font-weight:600;color:var(--muted);letter-spacing:.02em;white-space:nowrap;user-select:none;}
.dt-c{padding:7px 14px;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--fg);min-width:0;}
.dt-c.l{text-align:left;}
.dt-c.c{text-align:center;}
.dt-c.colcheck{padding-left:18px;padding-right:0;text-align:center;overflow:visible;}
.dt-c.sortable{cursor:pointer;}
.dt-c.sortable:hover{color:var(--fg);}
.dt-c .sortarrow{opacity:0;margin-left:4px;font-size:calc(9px * var(--fs,1));display:inline-block;transition:opacity .12s;}
.dt-c.sorted{color:var(--accent);}
.dt-c.sorted .sortarrow{opacity:1;}
.dt-body .dt-r{cursor:default;transition:background .1s;}
.dt-body .dt-r.is-interactive{cursor:pointer;}
.dt-body .dt-r.is-interactive:hover{background:var(--surface-2);}
.dt-body .dt-r.is-interactive:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;}
.dt-body .dt-r.is-interactive.sel{background:var(--sel);box-shadow:inset 3px 0 0 var(--accent);}
.dt-body .dt-r.checked{background:var(--accent-tint);}
.dt-body .dt-r:last-child{border-bottom:none;}
.cellsub{display:flex;flex-direction:column;line-height:1.25;min-width:0;}
.cellsub b{font-weight:600;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;}
.cellsub small{color:var(--muted);font-size:calc(11.5px * var(--fs,1));overflow:hidden;text-overflow:ellipsis;}
.docnum{font-weight:600;color:var(--accent);}
[data-density="compact"]{--row-h:30px;}
[data-density="compact"] .dt-c{font-size:calc(12.5px * var(--fs,1));padding-top:4px;padding-bottom:4px;}
[data-density="compact"] .cellsub small{display:none;}
.checkbox{appearance:none;-webkit-appearance:none;width:17px;height:17px;border:1.5px solid var(--border);border-radius:5px;background:var(--surface);display:inline-grid;place-content:center;vertical-align:middle;transition:all .12s;}
.checkbox:checked{background:var(--accent);border-color:var(--accent);}
.checkbox:checked::after{content:"";width:9px;height:9px;background:#fff;clip-path:polygon(14% 47%,0 61%,40% 100%,100% 16%,86% 4%,38% 70%);}
.rowact{display:inline-flex;gap:2px;opacity:0;transition:opacity .12s;justify-content:flex-end;}
.dt-r:hover .rowact{opacity:1;}
.rowact button{width:26px;height:26px;border-radius:6px;display:grid;place-items:center;color:var(--muted);}
.rowact button:hover{background:var(--hairline);color:var(--fg);}
.rowact button svg{width:15px;height:15px;}
.minibar{display:inline-block;width:54px;height:6px;border-radius:4px;background:var(--hairline);overflow:hidden;vertical-align:middle;}
.minibar i{display:block;height:100%;border-radius:4px;background:var(--accent);}
.minibar i.ok{background:var(--ok);}.minibar i.warn{background:var(--warn);}.minibar i.danger{background:var(--danger);}

/* ===== bulk bar ===== */
.bulkbar{display:flex;align-items:center;gap:12px;padding:10px 24px;border-top:1px solid var(--hairline);background:var(--surface);box-shadow:0 -6px 20px rgba(0,0,0,.04);flex:none;}
.bulkbar b{font-size:calc(13px * var(--fs,1));}

/* ===== tooltip ===== */
#cursorTip{position:fixed;left:0;top:0;z-index:300;pointer-events:none;background:var(--fg);color:var(--bg);font-size:calc(11.5px * var(--fs,1));font-weight:500;line-height:1.35;padding:6px 10px;border-radius:8px;max-width:240px;box-shadow:var(--shadow-lg);opacity:0;transform:translateY(3px);transition:opacity .12s var(--ease),transform .12s var(--ease);}
#cursorTip.show{opacity:1;transform:translateY(0);}

/* ===== forms ===== */
.fld{display:flex;flex-direction:column;gap:5px;}
.fld>span,.fldlabel{font-size:calc(11px * var(--fs,1));font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;display:flex;align-items:center;gap:5px;}
.fld .req{color:var(--danger);}
.fld input,.fld select,.fld textarea{background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:9px 12px;font-size:calc(14px * var(--fs,1));color:var(--fg);outline:none;width:100%;transition:border-color .12s,box-shadow .12s;}
.fld textarea{resize:vertical;min-height:64px;}
.fld input[readonly]{color:var(--muted);background:var(--hairline);}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint);}
.fld.err input,.fld.err select{border-color:var(--danger);box-shadow:0 0 0 3px var(--danger-tint);}
.fld .hint{font-size:calc(11.5px * var(--fs,1));color:var(--muted);}
.fld .hint.bad{color:var(--danger);font-weight:500;}
.fld .hint.warnote{color:var(--warn);font-weight:500;}
.fld .locked{font-size:calc(11px * var(--fs,1));color:var(--faint);display:inline-flex;align-items:center;gap:4px;}
.fld .locked svg{width:12px;height:12px;}
.fldrow{display:grid;gap:11px;}
.fldrow.c2{grid-template-columns:1fr 1fr;}
.fldrow.c3{grid-template-columns:1fr 1fr 1fr;}

/* ===== combobox (searchable single-select; preferred over <select> for >2 options) ===== */
.combo{position:relative;}
.combo .combo-ic{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--faint);pointer-events:none;display:grid;place-items:center;}
.combo .combo-ic svg{width:15px;height:15px;}
.fld .combo-in{padding-left:32px;padding-right:34px;cursor:text;}
.combo-caret{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:7px;display:grid;place-items:center;color:var(--muted);background:none;border:none;cursor:pointer;transition:background .12s,transform .18s var(--ease);}
.combo-caret:hover{background:var(--hairline);}
.combo-caret svg{width:16px;height:16px;}
.combo.open .combo-caret{transform:translateY(-50%) rotate(180deg);}
.combo.open .combo-in{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint);}
.combo-pop{position:absolute;z-index:140;top:calc(100% + 5px);left:0;right:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-m);box-shadow:var(--shadow-lg);padding:5px;max-height:264px;overflow-y:auto;}
.combo-opt{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:var(--r-s);font-size:calc(13.5px * var(--fs,1));color:var(--fg);cursor:pointer;}
.combo-opt .combo-opt-main{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1;}
.combo-opt .combo-opt-main small{font-size:calc(11.5px * var(--fs,1));color:var(--muted);font-variant-numeric:tabular-nums;}
.combo-opt svg{width:15px;height:15px;color:var(--accent);flex:none;}
.combo-opt.active{background:var(--accent-tint);}
.combo-opt.sel{font-weight:600;}
.combo-empty{padding:14px 10px;text-align:center;font-size:calc(13px * var(--fs,1));color:var(--muted);}

/* ===== state panels / skeleton / alerts ===== */
.statepanel{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;padding:60px 30px;color:var(--muted);height:100%;}
.statepanel .ic{width:54px;height:54px;border-radius:16px;background:var(--surface-2);border:1px solid var(--hairline);display:grid;place-items:center;color:var(--muted);}
.statepanel .ic svg{width:26px;height:26px;}
.statepanel h3{margin:0;font-size:calc(16px * var(--fs,1));color:var(--fg);font-weight:600;}
.statepanel p{margin:0;max-width:340px;font-size:calc(13.5px * var(--fs,1));line-height:1.5;}
.statepanel .code{font-size:calc(11.5px * var(--fs,1));color:var(--muted);font-family:var(--mono);border:1px solid var(--hairline);border-radius:6px;padding:2px 8px;}
.sk{background:linear-gradient(100deg,var(--hairline) 30%,var(--surface-2) 50%,var(--hairline) 70%);background-size:200% 100%;border-radius:6px;animation:shimmer 1.4s infinite linear;}
@keyframes shimmer{to{background-position:-200% 0;}}
.sk-line{height:11px;margin:5px 0;}
.alert{display:flex;align-items:center;gap:10px;margin:0 24px 10px;padding:10px 14px;border-radius:var(--r-m);font-size:calc(13px * var(--fs,1));}
.alert svg{width:18px;height:18px;flex:none;}
.alert .grow{flex:1;}
.alert.danger{background:var(--danger-tint);border:1px solid color-mix(in srgb,var(--danger) 30%,transparent);}
.alert.danger svg{color:var(--danger);}
.alert.warn{background:var(--warn-tint);border:1px solid color-mix(in srgb,var(--warn) 32%,transparent);}
.alert.warn svg{color:var(--warn);}
.alert.info{background:var(--accent-tint);border:1px solid color-mix(in srgb,var(--accent) 26%,transparent);}
.alert.info svg{color:var(--accent);}
.alert a,.alert .lk{color:var(--accent);font-weight:600;}

/* ===== toast ===== */
#toaster{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:400;display:flex;flex-direction:column;gap:9px;align-items:center;}
.toast{display:flex;align-items:center;gap:10px;background:var(--fg);color:var(--bg);font-size:calc(13.5px * var(--fs,1));font-weight:500;padding:11px 16px;border-radius:12px;box-shadow:var(--shadow-lg);opacity:0;transform:translateY(12px);transition:opacity .25s var(--ease),transform .25s var(--ease);max-width:90vw;}
.toast.show{opacity:1;transform:translateY(0);}
.toast svg{width:17px;height:17px;flex:none;}
.toast .tk{color:var(--ok);}.toast .tw{color:var(--warn);}.toast .td{color:var(--danger);}
[data-theme="dark"] .toast .tk{color:#30D158;}

/* ===== command palette ===== */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.3);backdrop-filter:blur(2px);z-index:90;opacity:0;pointer-events:none;transition:opacity .22s var(--ease);}
.scrim.show{opacity:1;pointer-events:auto;}
body.palette-open{overflow:hidden;overscroll-behavior:none;}
.palette{position:fixed;top:13vh;left:50%;transform:translateX(-50%) scale(.97);width:min(580px,92vw);z-index:100;background:var(--material);backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%);border:1px solid var(--border);border-radius:var(--r-l);box-shadow:var(--shadow-lg);overflow:hidden;opacity:0;pointer-events:none;transition:opacity .22s var(--ease),transform .22s var(--ease);}
.palette.show{opacity:1;pointer-events:auto;transform:translateX(-50%) scale(1);}
.palette-in{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--hairline);}
.palette-in svg{width:18px;height:18px;color:var(--muted);}
.palette-in input{flex:1;min-width:0;border:none;background:none;outline:none;font-size:calc(16px * var(--fs,1));color:var(--fg);}
.palette-close{margin-left:auto;flex:none;}
.palette-list{max-height:46vh;overflow:auto;padding:8px;}
.pcat{font-size:calc(11px * var(--fs,1));text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600;padding:8px 10px 4px;}
.pitem{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:var(--r-s);cursor:pointer;font-size:calc(14px * var(--fs,1));}
.pitem svg{width:17px;height:17px;color:var(--muted);flex:none;}
.pitem .meta{margin-left:auto;font-size:calc(12px * var(--fs,1));color:var(--muted);}
.pitem.active{background:var(--accent-action);color:#fff;}
.pitem.active svg,.pitem.active .meta,.pitem.active .kbd{color:#fff;}
.pitem.active .kbd{background:rgba(255,255,255,.18);border-color:transparent;}
.palette-foot{display:flex;gap:14px;padding:8px 16px;border-top:1px solid var(--hairline);color:var(--muted);font-size:calc(11.5px * var(--fs,1));}
.palette-foot span{display:flex;align-items:center;gap:5px;}

/* ===== modal =====
   Shared modal SSOT: the shell owns the viewport and only the body scrolls.
   Header/footer remain visible through grid rows instead of competing sticky
   elements inside a scrolling parent. */
.modal{
  --modal-width:540px;
  --modal-max-width:94vw;
  --modal-height:auto;
  --modal-max-height:88dvh;
  position:fixed;top:50%;left:50%;transform:translate(-50%,-46%) scale(.97);z-index:120;
  display:grid;grid-template-rows:auto minmax(0,1fr) auto;
  width:min(var(--modal-width),var(--modal-max-width));height:var(--modal-height);max-height:var(--modal-max-height);
  overflow:hidden;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-l);
  box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;
  transition:opacity .2s var(--ease),transform .2s var(--ease);
}
.modal.show{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1);}
.modal-head{display:flex;align-items:center;gap:10px;min-width:0;padding:18px 20px 12px;border-bottom:1px solid var(--hairline);background:var(--surface);z-index:1;}
.modal-head h3{min-width:0;margin:0;font-size:calc(17px * var(--fs,1));font-weight:600;overflow-wrap:anywhere;}
.modal-head .x{margin-left:auto;flex:none;}
.modal-body{min-width:0;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:16px 20px 20px;background:var(--surface);}
.modal-foot{display:flex;align-items:center;gap:9px;justify-content:flex-end;min-width:0;padding:14px 20px calc(14px + var(--safe-bottom));border-top:1px solid var(--hairline);background:var(--surface);z-index:1;}
.modal-foot:empty{display:none;}

@media (max-width:760px){
  .modal[data-mobile-mode="fullscreen"]{
    top:0;left:0;width:100vw;max-width:none;height:100dvh;max-height:100dvh;
    border:0;border-radius:0;transform:translateY(0) scale(1);
  }
  .modal[data-mobile-mode="fullscreen"].show{transform:translateY(0) scale(1);}
  .modal[data-mobile-mode="fullscreen"] .modal-head{padding:calc(14px + var(--safe-top)) 16px 12px;}
  .modal[data-mobile-mode="fullscreen"] .modal-body{padding:16px 16px calc(20px + var(--safe-bottom));}
  .modal[data-mobile-mode="fullscreen"] .modal-foot{flex-direction:column;align-items:stretch;gap:8px;padding:10px 16px calc(10px + var(--safe-bottom));}
  .modal[data-mobile-mode="fullscreen"] .modal-foot .btn{width:100%;min-width:0;min-height:44px;justify-content:center;}
  .modal[data-mobile-mode="inset"]{max-height:calc(100dvh - 16px);}
}

@media (prefers-reduced-motion:reduce){
  .modal{transition:none;}
}

/* A persistent, high-contrast boundary for audited Superadmin employee
 * workspace sessions. It remains available even when the employee's module
 * permissions hide Administration from the sidebar. */
.impersonation-banner{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:8px 18px;background:color-mix(in srgb,var(--warn) 12%,var(--surface));border-bottom:1px solid color-mix(in srgb,var(--warn) 28%,var(--border));color:var(--fg);font-size:calc(12px * var(--fs,1));z-index:5;}
.impersonation-copy{display:flex;align-items:center;gap:9px;min-width:0;}
.impersonation-copy>svg{width:17px;height:17px;flex:none;color:var(--warn);}
.impersonation-copy span{display:flex;align-items:baseline;gap:8px;min-width:0;}
.impersonation-copy b{font-weight:700;white-space:nowrap;}
.impersonation-copy small{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.impersonation-return{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid color-mix(in srgb,var(--warn) 45%,var(--border));background:var(--surface);color:var(--fg);border-radius:8px;padding:7px 10px;font:inherit;font-weight:650;cursor:pointer;white-space:nowrap;}
.impersonation-return:hover{border-color:var(--warn);color:var(--warn);}
.impersonation-return:disabled{opacity:.55;cursor:wait;}
.impersonation-banner.platform-admin-active{background:color-mix(in srgb,#dc2626 9%,var(--surface));border-bottom-color:color-mix(in srgb,#dc2626 34%,var(--border));}
.platform-admin-scope{display:flex;align-items:end;gap:8px;min-width:320px;}
.platform-admin-scope label{display:grid;gap:2px;min-width:0;flex:1;}
.platform-admin-scope label>span{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700;}
.platform-admin-scope select{min-width:0;max-width:220px;height:34px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--fg);padding:0 8px;}
.platform-break-glass-button{border-color:color-mix(in srgb,#dc2626 45%,var(--border));}
.platform-admin-banner-error{display:block;color:var(--danger);font-size:12px;font-weight:650;margin-top:2px;min-height:0;}
@media (max-width:640px){
  .impersonation-banner{align-items:stretch;flex-direction:column;gap:8px;padding:9px 12px;}
  .impersonation-copy span{display:block;}
  .impersonation-copy small{display:block;margin-top:2px;}
  .impersonation-return{width:100%;}
  .platform-admin-scope{width:100%;min-width:0;display:grid;grid-template-columns:minmax(0,1fr);}
  .platform-admin-scope select{width:100%;max-width:none;min-height:44px;}
}

/* component-specific styles live in erp-blocks.css */

/* ===== device-local background artwork =====
   Background is deliberately decorative: business surfaces remain opaque so
   record readability and contrast do not depend on the chosen artwork. */
html[data-background="aurora"]{--workspace-background:radial-gradient(circle at 8% 0%,rgba(59,130,246,.14),transparent 28%),radial-gradient(circle at 96% 100%,rgba(139,92,246,.12),transparent 30%),var(--bg);}
html[data-background="mist"]{--workspace-background:radial-gradient(circle at 15% 0%,rgba(14,165,233,.10),transparent 30%),linear-gradient(145deg,var(--bg),var(--surface-2));}
html[data-background="paper"]{--workspace-background:var(--bg);}
html[data-background="night-sky"]{--workspace-background:radial-gradient(circle at 10% 0%,rgba(67,56,202,.16),transparent 28%),radial-gradient(circle at 94% 100%,rgba(14,116,144,.12),transparent 30%),var(--bg);}
body,.app{background:var(--workspace-background,var(--bg));}

html[data-background="mist"] .auth-view{background:radial-gradient(circle at 14% 12%,rgba(56,189,248,.16),transparent 32%),linear-gradient(145deg,#eef8fc,#f7fafc 58%,#edf5ff);}
html[data-background="paper"] .auth-view{background:var(--bg);}
html[data-background="night-sky"] .auth-view{background:radial-gradient(circle at 12% 8%,rgba(99,102,241,.22),transparent 30%),linear-gradient(145deg,#11152b,#18203b 55%,#102a36);}
html[data-background="mist"] #setupWizardView.auth-view{background:radial-gradient(circle at 76% 16%,rgba(56,189,248,.18),transparent 28%),linear-gradient(145deg,#eefbff,#f4f8fc 56%,#eff6ff);}
html[data-background="paper"] #setupWizardView.auth-view{background:var(--bg);}
html[data-background="night-sky"] #setupWizardView.auth-view{background:radial-gradient(circle at 76% 16%,rgba(129,140,248,.25),transparent 30%),radial-gradient(circle at 16% 86%,rgba(45,212,191,.12),transparent 30%),linear-gradient(145deg,#0b1024,#151a38 56%,#092731);}
html[data-background="mist"] #setupWizardView.auth-view::before{background:radial-gradient(circle at 34% 30%,#d8f5ff 0%,#7dd3fc 42%,#38bdf8 72%,#1d4ed8 100%);box-shadow:inset -42px -52px 84px rgba(14,116,144,.28),0 42px 95px rgba(14,165,233,.18);}
html[data-background="mist"] #setupWizardView.auth-view::after{background:radial-gradient(circle at 36% 32%,#e0f2fe 0%,#67e8f9 42%,#22d3ee 72%,#0e7490 100%);box-shadow:inset -35px -42px 70px rgba(8,145,178,.26),0 38px 88px rgba(14,165,233,.16);}
html[data-background="paper"] #setupWizardView.auth-view::before,html[data-background="paper"] #setupWizardView.auth-view::after{display:none;}
html[data-background="night-sky"] #setupWizardView.auth-view::before{background:radial-gradient(circle at 34% 30%,#c7d2fe 0%,#818cf8 38%,#4f46e5 70%,#1e1b4b 100%);box-shadow:inset -42px -52px 84px rgba(30,27,75,.5),0 42px 95px rgba(67,56,202,.25);}
html[data-background="night-sky"] #setupWizardView.auth-view::after{background:radial-gradient(circle at 36% 32%,#99f6e4 0%,#2dd4bf 38%,#0f766e 70%,#042f2e 100%);box-shadow:inset -35px -42px 70px rgba(4,47,46,.48),0 38px 88px rgba(20,184,166,.16);}
html[data-background="night-sky"] .auth-panel{background:rgba(28,28,30,.82);border-color:rgba(255,255,255,.16);}
@media (prefers-reduced-motion:reduce){html[data-background] #setupWizardView.auth-view::before,html[data-background] #setupWizardView.auth-view::after{animation:none;}}
html[data-theme="dark"][data-background="mist"]{--workspace-background:radial-gradient(circle at 15% 0%,rgba(56,189,248,.13),transparent 30%),linear-gradient(145deg,#101820,#151b2a);}
html[data-theme="dark"][data-background="mist"] .auth-view{background:radial-gradient(circle at 14% 12%,rgba(56,189,248,.18),transparent 32%),linear-gradient(145deg,#0d1720,#121c2d 58%,#0c1a2a);}
html[data-theme="dark"][data-background="mist"] #setupWizardView.auth-view{background:radial-gradient(circle at 76% 16%,rgba(56,189,248,.20),transparent 30%),linear-gradient(145deg,#0d1720,#121c2d 58%,#0c1a2a);}

/* Local startup diagnostics stay readable in the fixed wizard and mobile shell. */
.demo-startup-diagnostic{display:block;min-width:0;font-size:12px;text-align:left;overflow-wrap:anywhere}
.demo-diagnostic-fold>.demo-diagnostic-toggle{height:10px;line-height:10px;font-size:9px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:pointer;color:var(--muted);list-style:none}
.demo-diagnostic-fold>.demo-diagnostic-toggle::-webkit-details-marker{display:none}
.demo-diagnostic-fold[open]{border:1px solid var(--border);border-radius:12px;padding:12px;display:grid;gap:8px;background:var(--surface)}
.demo-startup-diagnostic[hidden]{display:none}
.demo-startup-diagnostic p{margin:0}
.demo-diagnostic-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.demo-startup-diagnostic pre{white-space:pre-wrap;overflow-wrap:anywhere;max-width:100%;user-select:text;font-size:11px}
.demo-startup-diagnostic small{color:var(--muted)}
.demo-startup-failure-view{z-index:2000}