@font-face{font-family:"CyberSF";src:url("fonts/inter-regular.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"CyberSF";src:url("fonts/inter-medium.woff") format("woff");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"CyberSF";src:url("fonts/inter-semibold.woff") format("woff");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"CyberSF";src:url("fonts/inter-bold.woff") format("woff");font-weight:700;font-style:normal;font-display:swap}
/* ==========================================================================
   CYBERPOS · cyber-mac.css  (V29813)
   One design system for the whole back office: tokens, macOS-style shell,
   components and a compatibility layer for legacy button/panel classes.

   Rules of the road
   - Colours come from tokens only. The accent is set per install from
     Style Settings (config/ui_theme.php) as --accent on <html>.
   - Back-office controls are 32px high; POS/touch controls are 44px.
   - Corners: 6 small · 8 control · 12 card · 16 sheet.
   - Base element rules use :where() so page rules can still refine them.
   - Section 9 (legacy compatibility) uses !important on purpose: it is the
     only place allowed to, and each page drops out of it as it is rebuilt.
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
:root{
  --accent:#0A66D8;
  --accent-hover:color-mix(in srgb,var(--accent) 88%,#000);
  --accent-tint:color-mix(in srgb,var(--accent) 10%,#fff);
  --accent-ring:color-mix(in srgb,var(--accent) 28%,transparent);

  --label:#1D1D1F;
  --label-2:#5E5E63;          /* secondary text, 5.9:1 on window */
  --label-3:#8A8A8F;          /* placeholder / disabled only */
  --separator:rgba(0,0,0,.08);
  --hairline:#ECECF0;
  --border:#D2D2D7;
  --fill:rgba(118,118,128,.12);

  --window:#FBFBFC;
  --surface:#FFFFFF;
  --surface-2:#F5F5F7;
  --sidebar:rgba(238,238,242,.66);
  --wallpaper:linear-gradient(160deg,#DCD9E4 0%,#D3DCE6 55%,#E2DED8 100%);

  --green:#1A7F37;  --green-bg:#E6F4EA;
  --orange:#8F5200; --orange-bg:#FFF1DC;
  --red:#B3261E;    --red-bg:#FDECEA;  --red-solid:#C4281C;
  --blue:#0A58BC;   --blue-bg:#E7F0FC;
  --purple:#6B3BC0; --purple-bg:#F1EAFD;
  --gray:#4A4A4F;   --gray-bg:#EFEFF2;

  --r-sm:6px; --r-ctl:8px; --r-card:12px; --r-sheet:16px;
  --h-sm:26px; --h-md:32px; --h-lg:44px;
  --shadow-card:0 1px 2px rgba(0,0,0,.04);
  --shadow-pop:0 12px 32px rgba(0,0,0,.18),0 0 0 1px rgba(0,0,0,.08);
  --shadow-sheet:0 30px 80px rgba(0,0,0,.28),0 0 0 1px rgba(0,0,0,.06);

  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","CyberSF",Inter,"Segoe UI",Roboto,Arial,sans-serif;
  --sidebar-w:248px;
  --toolbar-h:52px;
  --ease:cubic-bezier(.2,.8,.2,1);
}

/* 2. Base ------------------------------------------------------------------ */
html{-webkit-text-size-adjust:100%}
body.cm{margin:0;font-family:var(--font);font-size:13px;line-height:1.45;color:var(--label);
  background:var(--wallpaper) fixed;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  height:100vh;overflow:hidden}
body.cm *,body.cm *::before,body.cm *::after{box-sizing:border-box}
:where(body.cm) h1,:where(body.cm) h2,:where(body.cm) h3,:where(body.cm) h4{letter-spacing:-.01em}
:where(body.cm) a{color:var(--accent)}
:where(body.cm) ::selection{background:color-mix(in srgb,var(--accent) 22%,transparent)}
:where(body.cm) input[type=checkbox],:where(body.cm) input[type=radio],:where(body.cm) input[type=range],:where(body.cm) progress{accent-color:var(--accent)}
:where(body.cm) .num,:where(body.cm) .money,:where(body.cm) td.right,:where(body.cm) .amount{font-variant-numeric:tabular-nums}
body.cm :focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-ring)!important;border-radius:6px}
body.cm .sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* 3. Shell: sidebar --------------------------------------------------------- */
body.cm .app-sidebar{position:fixed;inset:0 auto 0 0;width:var(--sidebar-w);z-index:60;display:flex;flex-direction:column;
  padding:12px 10px 10px;background:var(--sidebar);
  -webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);
  border-right:1px solid var(--separator);box-shadow:none;transition:width .22s var(--ease),transform .22s var(--ease)}
body.cm .sidebar-icon-sprite{position:absolute;width:0;height:0;overflow:hidden}
body.cm .brand-link-dashboard{display:block;text-decoration:none;color:inherit;margin:0 2px 8px}
body.cm .brand-mark{display:flex;align-items:center;justify-content:center;height:46px;padding:4px 10px;border-radius:10px;background:#fff;box-shadow:0 0 0 1px var(--separator)}
body.cm .dashboard-brand-logo{max-width:100%;max-height:36px;object-fit:contain;display:block}
body.cm .nav-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding:0 2px 8px;margin:0 -2px;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.18) transparent}
body.cm .nav-scroll::-webkit-scrollbar{width:6px}
body.cm .nav-scroll::-webkit-scrollbar-thumb{background:rgba(0,0,0,.16);border-radius:6px}
body.cm .nav-section{padding:12px 10px 3px;font-size:11px;font-weight:600;color:var(--label-2);letter-spacing:0;text-transform:none;white-space:nowrap}
body.cm .app-sidebar a{display:flex;align-items:center;gap:10px;min-height:28px;padding:4px 10px;border-radius:var(--r-sm);
  color:var(--label);font-size:13px;font-weight:500;line-height:1.2;text-decoration:none;border:0;background:transparent;box-shadow:none;transform:none}
body.cm .app-sidebar a span{font-size:inherit;font-weight:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.cm .app-sidebar a:hover{background:rgba(0,0,0,.05);color:var(--label)}
body.cm .app-sidebar a.active{background:rgba(0,0,0,.08);color:var(--label);font-weight:600;box-shadow:none}
body.cm .app-sidebar .sidebar-icon{width:16px;height:16px;min-width:16px;flex:0 0 16px;color:var(--accent)}
body.cm .app-sidebar .brand-link-dashboard:hover{background:transparent}
body.cm .nav-group{margin:0}
body.cm .nav-group-main{display:flex;align-items:center;border-radius:var(--r-sm)}
body.cm .nav-group-main>a{flex:1 1 auto;min-width:0}
body.cm .nav-group-toggle{flex:0 0 auto;width:24px;height:24px;margin-left:2px;padding:0;border:0;border-radius:5px;background:transparent;color:var(--label-2);
  font-size:15px;line-height:1;display:grid;place-items:center;cursor:pointer;transition:transform .18s var(--ease)}
body.cm .nav-group-toggle:hover{background:rgba(0,0,0,.06)}
body.cm .nav-group.open>.nav-group-main .nav-group-toggle{transform:rotate(90deg)}
body.cm .nav-sub{display:none;padding:2px 0 4px 16px}
body.cm .nav-group.open>.nav-sub{display:block}
body.cm .nav-sub a{font-weight:400;min-height:26px}
body.cm .nav-sub a .sidebar-icon{width:15px;height:15px;min-width:15px;flex-basis:15px;opacity:.9}
body.cm .nav-subsection,body.cm .nav-sub-heading{padding:8px 10px 2px;font-size:11px;font-weight:600;color:var(--label-2);text-transform:none;letter-spacing:0;border:0;margin:0}
body.cm .app-sidebar [data-sidebar-shortcut]{display:none!important}

/* collapsed (icons only) */
body.cm.sidebar-collapsed{--sidebar-w:64px}
body.cm.sidebar-collapsed .app-sidebar{padding-left:8px;padding-right:8px}
body.cm.sidebar-collapsed .nav-section,body.cm.sidebar-collapsed .app-sidebar a span,body.cm.sidebar-collapsed .nav-group-toggle{display:none}
body.cm.sidebar-collapsed .app-sidebar a{justify-content:center;padding:6px 0;min-height:34px}
body.cm.sidebar-collapsed .app-sidebar .sidebar-icon{width:18px;height:18px;flex-basis:18px}
body.cm.sidebar-collapsed .brand-mark{height:40px;padding:4px}
body.cm.sidebar-collapsed .nav-sub{display:none}
body.cm.sidebar-collapsed .nav-group.flyout>.nav-sub{display:block;position:fixed;z-index:80;width:260px;max-height:calc(100vh - 24px);overflow-y:auto;padding:6px;
  background:rgba(252,252,253,.94);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border-radius:10px;box-shadow:var(--shadow-pop)}
body.cm.sidebar-collapsed .nav-group.flyout>.nav-sub a{justify-content:flex-start;padding:4px 10px;min-height:28px}
body.cm.sidebar-collapsed .nav-group.flyout>.nav-sub a span,body.cm.sidebar-collapsed .nav-group.flyout>.nav-sub a{white-space:nowrap}

/* 4. Shell: main + toolbar --------------------------------------------------- */
body.cm .app-main{margin-left:var(--sidebar-w);height:100vh;overflow-y:auto;overflow-x:hidden;background:var(--window);
  transition:margin-left .22s var(--ease);scroll-padding-top:calc(var(--toolbar-h) + 12px)}
body.cm .app-topbar{position:sticky;top:0;z-index:40;min-height:var(--toolbar-h);height:auto;display:flex;align-items:center;flex-wrap:wrap;gap:8px;
  padding:8px 20px;background:rgba(251,251,252,.82);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid var(--separator);box-shadow:none}
body.cm .tb-icon,body.cm .sidebar-toggle,body.cm .mobile-nav-toggle{width:32px;height:28px;padding:0;border:0;border-radius:var(--r-sm);background:transparent;color:#3A3A3E;
  display:inline-grid;place-items:center;cursor:pointer;flex:0 0 auto;box-shadow:none}
body.cm .tb-icon:hover,body.cm .sidebar-toggle:hover,body.cm .mobile-nav-toggle:hover{background:rgba(0,0,0,.06)}
body.cm .tb-icon svg,body.cm .sidebar-toggle svg,body.cm .mobile-nav-toggle svg{width:18px;height:18px}
body.cm .mobile-nav-toggle{display:none}
body.cm .global-page-context{display:flex;flex-direction:column;line-height:1.2;min-width:0;margin-right:auto;padding-left:2px}
body.cm .global-page-context strong{font-size:14px;font-weight:600;color:var(--label);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.cm .global-page-context span{font-size:11px;color:var(--label-2);font-weight:400;letter-spacing:0;text-transform:none}
body.cm .cm-search-trigger{display:inline-flex;align-items:center;gap:8px;width:260px;max-width:100%;height:30px;padding:0 6px 0 10px;border:0;border-radius:var(--r-ctl);
  background:var(--fill);color:var(--label-2);font:inherit;font-size:13px;cursor:pointer;text-align:left}
body.cm .cm-search-trigger:hover{background:rgba(118,118,128,.18)}
body.cm .cm-search-trigger svg{width:14px;height:14px;flex:0 0 auto}
body.cm .cm-search-trigger .lbl{flex:1 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.cm .top-quick-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
body.cm .top-quick-actions>a{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border-radius:var(--r-ctl);border:1px solid var(--border);
  background:#fff;color:var(--label);font-size:13px;font-weight:500;text-decoration:none;white-space:nowrap;box-shadow:0 1px 1px rgba(0,0,0,.04);transition:background .12s}
body.cm .top-quick-actions>a:hover{background:var(--surface-2)}
body.cm .top-quick-actions>a.top-pos-btn{background:var(--accent);border-color:transparent;color:#fff;box-shadow:0 1px 1px rgba(0,0,0,.1),inset 0 1px 0 rgba(255,255,255,.18)}
body.cm .top-quick-actions>a.top-pos-btn:hover{background:var(--accent-hover)}
body.cm .top-action-icon{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
body.cm .ct-global-license-pill{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:500;text-decoration:none;white-space:nowrap;
  background:var(--green-bg);color:var(--green);border:0}
body.cm .ct-global-license-pill.warning{background:var(--orange-bg);color:var(--orange)}
body.cm .ct-global-license-pill.danger{background:var(--red-bg);color:var(--red)}
body.cm .ct-license-dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:0 0 7px}
body.cm .ct-license-pill-expiry{opacity:.85}
body.cm .ct-license-pill-days{font-weight:600}
body.cm .ct-license-pill-arrow{display:none}
/* lock = icon-only toolbar button (label kept for screen readers) */
body.cm .top-quick-actions>a.top-lock-screen-btn{width:32px;padding:0;justify-content:center}
body.cm .top-quick-actions>a.top-lock-screen-btn span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (max-width:1560px){body.cm .ct-license-pill-expiry{display:none}body.cm .cm-search-trigger{width:210px}}
@media (max-width:1380px){body.cm .top-quick-actions>a:not(.top-pos-btn) span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  body.cm .top-quick-actions>a:not(.top-pos-btn){width:32px;padding:0;justify-content:center}}
body.cm .top-user-wrap{display:none}

/* 5. Page scaffolding ---------------------------------------------------------- */
body.cm .wrap{padding:24px 28px 40px;max-width:1520px}
body.cm .page-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 16px;margin:0 0 18px}
body.cm .page-head h1,body.cm .page-head h2{margin:2px 0 2px;font-size:26px;line-height:1.15;font-weight:700;letter-spacing:-.02em}
body.cm .page-head p,body.cm .page-head .muted{margin:0;font-size:13px;color:var(--label-2)}
body.cm .eyebrow{font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--label-2)}
body.cm .muted{color:var(--label-2)}
body.cm .section-title{display:flex;align-items:center;gap:10px;margin:0 0 14px}
body.cm .section-title h3,body.cm .panel>h3,body.cm .card>h3{margin:0;font-size:15px;font-weight:600}
body.cm .section-title p{margin:2px 0 0;color:var(--label-2);font-size:12px}
:where(body.cm) .panel,:where(body.cm) .v26-card,:where(body.cm) .settings-card,:where(body.cm) .editor-card,:where(body.cm) .table-panel,:where(body.cm) .sum-panel,:where(body.cm) .ui-card{
  background:var(--surface);border:1px solid rgba(0,0,0,.07);border-radius:var(--r-card);box-shadow:var(--shadow-card)}
:where(body.cm) .panel{padding:20px}
body.cm .iconbox,body.cm .style-icon{background:var(--accent-tint);color:var(--accent)}

/* 6. Form controls (base) -------------------------------------------------------- */
:where(body.cm) input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=hidden]),
:where(body.cm) select,:where(body.cm) textarea{
  min-height:var(--h-md);padding:6px 10px;border:1px solid var(--border);border-radius:var(--r-ctl);background:#fff;color:var(--label);
  font:inherit;font-size:13px;line-height:1.3;box-shadow:none;transition:border-color .12s,box-shadow .12s}
:where(body.cm) textarea{min-height:72px}
:where(body.cm) input::placeholder,:where(body.cm) textarea::placeholder{color:var(--label-3)}
:where(body.cm) input:focus,:where(body.cm) select:focus,:where(body.cm) textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
:where(body.cm) input:disabled,:where(body.cm) select:disabled,:where(body.cm) textarea:disabled{background:var(--surface-2);color:var(--label-2)}
:where(body.cm) label{color:inherit}
:where(body.cm) .field>label,:where(body.cm) .ui-label{display:block;font-size:12px;font-weight:500;color:#3A3A3E;margin-bottom:5px}

/* 7. Tables ---------------------------------------------------------------- */
:where(body.cm) table{border-collapse:collapse;width:100%}
:where(body.cm) th{padding:9px 12px;background:#FAFAFB;border-bottom:1px solid #EAEAEE;font-size:12px;font-weight:500;color:var(--label-2);text-align:left;text-transform:none;letter-spacing:0;white-space:nowrap}
:where(body.cm) td{padding:10px 12px;border-bottom:1px solid #F0F0F3;vertical-align:middle}
:where(body.cm) tbody tr:hover>td{background:#FAFAFC}
:where(body.cm) .table-scroll{overflow:auto;border-radius:var(--r-card)}

/* 8. Components (new, prefer these in rebuilt pages) ---------------------------- */
body.cm .ui-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:var(--h-md);padding:0 14px;border-radius:var(--r-ctl);border:1px solid transparent;
  font:inherit;font-size:13px;font-weight:500;line-height:1;white-space:nowrap;cursor:pointer;text-decoration:none;transition:background .12s,box-shadow .12s,filter .12s}
body.cm .ui-btn svg{width:15px;height:15px;flex:0 0 auto}
body.cm .ui-btn--primary{background:var(--accent);color:#fff;box-shadow:0 1px 1px rgba(0,0,0,.10),inset 0 1px 0 rgba(255,255,255,.18)}
body.cm .ui-btn--primary:hover{background:var(--accent-hover)}
body.cm .ui-btn--secondary{background:#fff;color:var(--label);border-color:var(--border);box-shadow:0 1px 1px rgba(0,0,0,.04)}
body.cm .ui-btn--secondary:hover{background:var(--surface-2)}
body.cm .ui-btn--plain{background:transparent;color:var(--accent);padding:0 8px}
body.cm .ui-btn--plain:hover{background:var(--accent-tint)}
body.cm .ui-btn--danger{background:var(--red-bg);color:var(--red)}
body.cm .ui-btn--danger-solid{background:var(--red-solid);color:#fff}
body.cm .ui-btn--sm{height:var(--h-sm);padding:0 10px;font-size:12px;border-radius:var(--r-sm)}
body.cm .ui-btn--lg{height:var(--h-lg);padding:0 18px;font-size:15px;border-radius:10px}
body.cm .ui-btn--icon{width:var(--h-md);padding:0}
body.cm .ui-btn[disabled],body.cm .ui-btn.is-disabled{opacity:.45;pointer-events:none}
body.cm .ui-seg{display:inline-flex;padding:2px;gap:2px;background:#E8E8ED;border-radius:var(--r-ctl)}
body.cm .ui-seg>button,body.cm .ui-seg>a,body.cm .ui-seg>label{height:28px;padding:0 14px;border:0;border-radius:var(--r-sm);background:transparent;color:#3A3A3E;
  font:inherit;font-size:13px;font-weight:500;display:inline-flex;align-items:center;cursor:pointer;text-decoration:none;box-shadow:none}
body.cm .ui-seg>.on,body.cm .ui-seg>[aria-pressed=true],body.cm .ui-seg>[aria-selected=true]{background:#fff;color:var(--label);box-shadow:0 1px 2px rgba(0,0,0,.12)}
body.cm .ui-kbd,body.cm kbd{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:20px;padding:0 5px;border:1px solid var(--border);border-bottom-width:2px;
  border-radius:5px;background:#fff;font:600 11px/1 var(--font);color:#3A3A3E}
body.cm .ui-switch{position:relative;width:36px;height:20px;border-radius:999px;background:#D2D2D7;border:0;padding:0;cursor:pointer;flex:0 0 auto;transition:background .15s}
body.cm .ui-switch::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,.25);transition:left .15s var(--ease)}
body.cm .ui-switch[aria-checked=true],body.cm .ui-switch.on{background:#34A853}
body.cm .ui-switch[aria-checked=true]::after,body.cm .ui-switch.on::after{left:18px}
body.cm .ui-group{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:10px}
body.cm .ui-group-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:8px 14px;border-bottom:1px solid #F0F0F3}
body.cm .ui-group-row:last-child{border-bottom:0}

/* badges / status */
body.cm .badge,body.cm .ui-badge{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;border-radius:999px;font-size:12px;font-weight:500;line-height:1;white-space:nowrap;
  background:var(--gray-bg);color:var(--gray)}
body.cm .badge.paid,body.cm .badge.green,body.cm .badge.success,body.cm .badge.active,body.cm .badge.cleared,body.cm .b-green{background:var(--green-bg);color:var(--green)}
body.cm .badge.due,body.cm .badge.red,body.cm .badge.danger,body.cm .badge.overdue,body.cm .badge.bounced,body.cm .badge.cancelled,body.cm .b-red{background:var(--red-bg);color:var(--red)}
body.cm .badge.partial,body.cm .badge.orange,body.cm .badge.warning,body.cm .badge.pending,body.cm .b-orange{background:var(--orange-bg);color:var(--orange)}
body.cm .badge.blue,body.cm .badge.info,body.cm .b-blue{background:var(--blue-bg);color:var(--blue)}
body.cm .badge.purple,body.cm .b-purple{background:var(--purple-bg);color:var(--purple)}

/* modals → macOS sheets */
body.cm .modal-backdrop{background:rgba(29,29,31,.28);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
body.cm .modal-card{border-radius:var(--r-sheet);box-shadow:var(--shadow-sheet);border:0}
body.cm .modal-head{border-bottom:1px solid var(--hairline)}
body.cm .modal-head h3,body.cm .modal-head strong{font-size:16px;font-weight:600}
body.cm .modal-foot{display:flex;justify-content:flex-end;gap:8px;border-top:1px solid var(--hairline);background:#FAFAFB}

/* notifications (window.cyberFeedback) */
body.cm .system-feedback{position:fixed;top:14px;right:14px;z-index:3000;display:flex;flex-direction:column;gap:8px;width:min(360px,calc(100vw - 28px));pointer-events:none}
body.cm .feedback-card{pointer-events:auto;display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:14px;background:rgba(250,250,252,.9);
  -webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);box-shadow:var(--shadow-pop);transition:opacity .16s,transform .16s;
  animation:cm-drop .22s var(--ease)}
body.cm .feedback-card b{display:block;font-size:13px;font-weight:600}
body.cm .feedback-card small{display:block;font-size:12px;color:var(--label-2);margin-top:2px;line-height:1.35}
body.cm .feedback-icon{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;flex:0 0 24px;background:var(--accent-tint);color:var(--accent)}
body.cm .feedback-card.success .feedback-icon{background:var(--green-bg);color:var(--green)}
body.cm .feedback-card.error .feedback-icon{background:var(--red-bg);color:var(--red)}
body.cm .system-busy-bar{position:fixed;top:0;left:0;height:2px;width:0;background:var(--accent);z-index:3001;transition:width .3s var(--ease)}
@keyframes cm-drop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* 9. Legacy compatibility (buttons) ----------------------------------------------
   Every old button family gets the same geometry; colour by intent.
   Remove a family from these lists once its page is rebuilt with .ui-btn. */
body.cm :is(.btn,.inst-btn,.ir-btn,.sv-btn,.cr-btn,.qt-btn,.sap-btn,.srr-btn,.spc-btn,.si-btn,.cc-btn,.qa-btn,.pl-btn,.ap-btn,.sc-btn,.hs-btn,.cf-btn,
  .outline-btn,.cancel-btn,.pay-primary,.cp-primary,.save-product-btn,.btn-light){
  display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;
  min-height:var(--h-md)!important;height:var(--h-md)!important;padding:0 14px!important;border-radius:var(--r-ctl)!important;
  font-family:var(--font)!important;font-size:13px!important;font-weight:500!important;line-height:1!important;letter-spacing:0!important;text-transform:none!important;
  white-space:nowrap!important;text-decoration:none!important;cursor:pointer;transform:none!important;filter:none;
  transition:background .12s,box-shadow .12s!important;margin-top:0;margin-bottom:0}
/* primary (accent) */
body.cm :is(.btn:not(.gray):not(.secondary):not(.light):not(.red):not(.danger):not(.orange):not(.outline):not(.btn-light):not(.white),
  .inst-btn:not(.alt),.ir-btn,.pay-primary,.cp-primary,.cr-primary,.qt-primary,.cc-primary,.qa-primary,.wad-primary,.save-product-btn,
  .sv-btn.primary,.sap-btn.primary,.srr-btn.primary,.spc-btn.primary,.sc-btn.primary,.pl-btn.primary){
  background:var(--accent)!important;color:#fff!important;border:1px solid transparent!important;
  box-shadow:0 1px 1px rgba(0,0,0,.10),inset 0 1px 0 rgba(255,255,255,.18)!important}
body.cm :is(.btn:not(.gray):not(.secondary):not(.light):not(.red):not(.danger):not(.orange):not(.outline):not(.btn-light):not(.white),
  .inst-btn:not(.alt),.ir-btn,.pay-primary,.cp-primary,.cr-primary,.qt-primary,.cc-primary,.qa-primary,.wad-primary,.save-product-btn,
  .sv-btn.primary,.sap-btn.primary,.srr-btn.primary,.spc-btn.primary,.sc-btn.primary,.pl-btn.primary):hover{background:var(--accent-hover)!important}
/* secondary (white) */
body.cm :is(.btn.gray,.btn.secondary,.btn.light,.btn.outline,.btn.white,.btn.orange,.btn-light,.inst-btn.alt,
  .sv-btn:not(.primary),.cr-btn:not(.cr-primary),.qt-btn:not(.qt-primary),.sap-btn:not(.primary),.srr-btn:not(.primary),.spc-btn:not(.primary),.si-btn,
  .cc-btn:not(.cc-primary),.qa-btn:not(.qa-primary),.pl-btn:not(.primary),.ap-btn,.sc-btn:not(.primary),.hs-btn,.cf-btn,.outline-btn,.cancel-btn){
  background:#fff!important;color:var(--label)!important;border:1px solid var(--border)!important;box-shadow:0 1px 1px rgba(0,0,0,.04)!important}
body.cm :is(.btn.gray,.btn.secondary,.btn.light,.btn.outline,.btn.white,.btn.orange,.btn-light,.inst-btn.alt,
  .sv-btn:not(.primary),.cr-btn:not(.cr-primary),.qt-btn:not(.qt-primary),.sap-btn:not(.primary),.srr-btn:not(.primary),.spc-btn:not(.primary),.si-btn,
  .cc-btn:not(.cc-primary),.qa-btn:not(.qa-primary),.pl-btn:not(.primary),.ap-btn,.sc-btn:not(.primary),.hs-btn,.cf-btn,.outline-btn,.cancel-btn):hover{background:var(--surface-2)!important}
/* destructive */
body.cm :is(.btn.red,.btn.danger){background:var(--red-bg)!important;color:var(--red)!important;border:1px solid transparent!important;box-shadow:none!important}
body.cm :is(.btn.red,.btn.danger):hover{background:#FADAD6!important}
/* sizes */
body.cm :is(.btn,.sv-btn,.cr-btn,.qt-btn,.sap-btn,.srr-btn,.spc-btn,.si-btn,.cc-btn,.qa-btn,.pl-btn,.ap-btn,.sc-btn,.inst-btn):is(.sm,.sm2,.small,.btn-sm,.mini){
  min-height:var(--h-sm)!important;height:var(--h-sm)!important;padding:0 10px!important;font-size:12px!important;border-radius:var(--r-sm)!important}
body.cm :is(.btn,.inst-btn,.sv-btn,.cr-btn):is(.full,.block,.wide){width:100%}
body.cm :is(.btn,.inst-btn,.ir-btn,.sv-btn,.cr-btn,.qt-btn,.sap-btn,.srr-btn,.spc-btn,.si-btn,.cc-btn,.qa-btn,.pl-btn,.ap-btn,.sc-btn,.hs-btn,.cf-btn,.outline-btn,.cancel-btn,.pay-primary,.cp-primary,.save-product-btn):is([disabled],.disabled){opacity:.45!important;cursor:default!important;pointer-events:none}
/* icon-only buttons */
body.cm .icon-btn{width:var(--h-md)!important;height:var(--h-md)!important;min-height:0!important;padding:0!important;border-radius:var(--r-ctl)!important;display:inline-grid!important;place-items:center!important;
  background:#fff!important;color:#3A3A3E!important;border:1px solid var(--border)!important;box-shadow:0 1px 1px rgba(0,0,0,.04)!important}
body.cm .icon-btn:hover{background:var(--surface-2)!important}
body.cm .icon-btn.delete,body.cm .icon-btn.danger{color:var(--red)!important}
/* bare <button> default (low specificity: any page rule still wins) */
:where(body.cm) button{font-family:var(--font);border-radius:var(--r-ctl);background:var(--accent)}

/* 10. Spotlight (Ctrl+K) ------------------------------------------------------- */
.cm-spot{position:fixed;inset:0;z-index:5000;display:none;justify-content:center;align-items:flex-start;padding:12vh 16px 16px;background:rgba(29,29,31,.22)}
.cm-spot.open{display:flex;animation:cm-fade .14s ease}
.cm-spot-panel{width:min(680px,100%);max-height:76vh;display:flex;flex-direction:column;border-radius:16px;overflow:hidden;
  background:rgba(252,252,253,.94);-webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);box-shadow:var(--shadow-sheet);
  font-family:var(--font);color:var(--label);animation:cm-drop .18s var(--ease)}
.cm-spot-head{display:flex;align-items:center;gap:12px;height:60px;padding:0 18px;border-bottom:1px solid var(--hairline)}
.cm-spot-head svg{width:20px;height:20px;flex:0 0 auto;color:var(--label-2)}
.cm-spot-input{flex:1 1 auto;height:40px;border:0!important;outline:0!important;background:transparent!important;box-shadow:none!important;padding:0!important;margin:0!important;
  font:400 18px/1.2 var(--font)!important;color:var(--label)!important;min-height:0!important}
.cm-spot-scopes{display:flex;gap:6px;padding:10px 16px;border-bottom:1px solid var(--hairline);flex-wrap:wrap}
.cm-chip{height:26px;padding:0 10px;border-radius:999px;border:1px solid var(--border);background:#fff;color:#3A3A3E;font:500 12px/1 var(--font);cursor:pointer}
.cm-chip.on{background:var(--label);border-color:var(--label);color:#fff}
.cm-spot-list{overflow-y:auto;padding:6px 8px 10px;min-height:120px}
.cm-spot-group{font-size:11px;font-weight:600;color:var(--label-2);padding:10px 12px 4px}
.cm-spot-item{display:flex;align-items:center;gap:12px;width:100%;min-height:46px;padding:6px 12px;border:0;border-radius:10px;background:transparent;color:var(--label);
  font:inherit;font-size:13px;text-align:left;cursor:pointer;text-decoration:none}
.cm-spot-item .ic{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;flex:0 0 30px;background:#F0F0F3;color:var(--accent)}
.cm-spot-item .ic svg{width:16px;height:16px}
.cm-spot-item .tx{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.cm-spot-item .tt{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-spot-item .st{font-size:12px;color:var(--label-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-spot-item .mt{font-size:12px;font-weight:500;color:#3A3A3E;white-space:nowrap;font-variant-numeric:tabular-nums}
.cm-spot-item .hk{min-width:24px;height:20px;padding:0 6px;border-radius:5px;border:1px solid var(--border);font-size:11px;font-weight:600;color:#3A3A3E;display:inline-grid;place-items:center}
.cm-spot-item.sel{background:var(--accent);color:#fff}
.cm-spot-item.sel .ic{background:rgba(255,255,255,.2);color:#fff}
.cm-spot-item.sel .st,.cm-spot-item.sel .mt{color:rgba(255,255,255,.88)}
.cm-spot-item.sel .hk{border-color:transparent;background:rgba(255,255,255,.2);color:#fff}
.cm-spot-empty{padding:34px 16px;text-align:center;color:var(--label-2)}
.cm-spot-empty b{display:block;color:var(--label);font-size:15px;font-weight:600;margin-bottom:2px}
.cm-spot-foot{display:flex;flex-wrap:wrap;gap:14px;padding:9px 18px;border-top:1px solid var(--hairline);background:rgba(250,250,251,.9);font-size:12px;color:var(--label-2)}
.cm-spot-foot .r{margin-left:auto}
.cm-spot kbd{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:19px;padding:0 5px;border:1px solid var(--border);border-bottom-width:2px;border-radius:5px;background:#fff;font:600 11px/1 var(--font);color:#3A3A3E}
@keyframes cm-fade{from{opacity:0}to{opacity:1}}

/* 11. Density: compact --------------------------------------------------------- */
body.cm.density-compact{--h-md:28px;--h-sm:24px;--toolbar-h:46px}
body.cm.density-compact .wrap{padding:16px 20px 28px}
body.cm.density-compact :where(.panel){padding:14px}
body.cm.density-compact :where(td){padding:7px 10px}
body.cm.density-compact :where(th){padding:7px 10px}
body.cm.density-compact .app-sidebar a{min-height:26px}

/* 12. Small screens ---------------------------------------------------------- */
@media (max-width:900px){
  body.cm{--sidebar-w:0px}
  body.cm .app-sidebar{width:272px;transform:translateX(-100%);background:rgba(244,244,247,.96);box-shadow:var(--shadow-pop)}
  body.cm .app-sidebar.mobile-open{transform:none}
  body.cm .app-main{margin-left:0}
  body.cm .sidebar-toggle{display:none}
  body.cm .mobile-nav-toggle{display:inline-grid}
  body.cm .cm-search-trigger{width:auto;flex:1 1 140px}
  body.cm .cm-search-trigger kbd{display:none}
  body.cm .top-quick-actions>a span{display:none}
  body.cm .top-quick-actions>a{padding:0 9px}
  body.cm .wrap{padding:18px 14px 32px}
}
@media (max-width:560px){
  body.cm .global-page-context span{display:none}
  body.cm .ct-global-license-pill{display:none}
}

/* 13. Motion + print --------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  body.cm *,.cm-spot *{animation:none!important;transition:none!important}
}
@media print{
  body.cm{background:#fff!important;height:auto!important;overflow:visible!important}
  body.cm .app-sidebar,body.cm .app-topbar,.cm-spot,body.cm .system-feedback{display:none!important}
  body.cm .app-main{margin:0!important;height:auto!important;overflow:visible!important;background:#fff!important}
}
body.cm .cm-spot .cm-spot-input:focus,body.cm .cm-spot .cm-spot-input:focus-visible{box-shadow:none!important;border:0!important}
.cm-spot-item .hk[hidden]{display:none}

/* 14. Page patterns (every back-office page) -------------------------------------
   Normalises the recurring legacy page constructs so pages that have not been
   individually rebuilt still look like the rest of the system. */

/* dark gradient page banners → plain macOS page header */
html body.cm :is(.payroll-page .page-heading,.pl-hero,.si-hero,.spc-hero,.wil-hero,.waimg-hero){
  background:none!important;color:var(--label)!important;padding:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;margin-bottom:18px!important}
html body.cm :is(.payroll-page .page-heading,.pl-hero,.si-hero,.spc-hero,.wil-hero,.waimg-hero) :is(h1,h2,h3,b,strong,div,span,small){color:inherit!important;opacity:1!important}
html body.cm :is(.payroll-page .page-heading,.pl-hero,.si-hero,.spc-hero,.wil-hero,.waimg-hero) p{color:var(--label-2)!important;opacity:1!important}
html body.cm :is(.payroll-page .page-heading,.pl-hero,.si-hero,.spc-hero,.wil-hero,.waimg-hero) :is(.btn,a.btn,button){background:#fff!important;color:var(--label)!important;border:1px solid var(--border)!important}
html body.cm :is(.payroll-page .page-heading,.pl-hero,.si-hero,.spc-hero,.wil-hero,.waimg-hero) :is(.btn.blue,.btn.primary,.btn.green){background:var(--accent)!important;color:#fff!important;border-color:transparent!important}
html body.cm :is(.pl-hero,.si-hero,.spc-hero) [class*="icon"]{display:none!important}

/* small uppercase "section" labels above titles are not used in this design */
html body.cm .app-main :is(.eyebrow,[class$="-eyebrow"],[class$="-kicker"]){display:none!important}

/* one title size for the first heading of every page */
html body.cm .app-main > :not(.app-topbar) > :first-child:is([class*="head"],[class*="hero"],[class*="title"],[class*="top"]) :is(h1,h2):first-of-type,
html body.cm .app-main > :not(.app-topbar) > :first-child:is(h1,h2){
  font-size:26px!important;line-height:1.15!important;font-weight:700!important;letter-spacing:-.02em!important;color:var(--label)!important;margin:2px 0 2px!important}
html body.cm .app-main > :not(.app-topbar) > :first-child:is([class*="head"],[class*="hero"],[class*="title"],[class*="top"]) :is(h1,h2):first-of-type + p{font-size:13px!important;color:var(--label-2)!important}

/* common card shells used by many pages */
html body.cm .app-main :is(.panel,.card:not(.ui-card):not([class*="theme"]),[class$="-card"]:not([class*="modal"]):not([class*="theme"]):not(.ui-card)){border-radius:12px}

/* uppercase table headers → sentence case like the rest of the system */
html body.cm .app-main table:not(.ui-table) th{text-transform:none!important;letter-spacing:0!important;font-size:12px!important;font-weight:500!important;color:var(--label-2)!important}

/* =========================================================
   15. Real-data fixes (V29814)
   ========================================================= */
/* empty autocomplete panels must not draw a bar */
html body.cm :is(.product-results,.supplier-results,.customer-results,.search-results,[id$="Results"]):empty{display:none!important;border:0!important;box-shadow:none!important}
/* legacy popups whose form is plain label + input siblings: stack them */
html body.cm :is(.modal-card,.modal-box,.modal-content,.modal) form > label{display:block;margin:12px 0 5px;font-size:12px;font-weight:500;color:#3A3A3E}
html body.cm :is(.modal-card,.modal-box,.modal-content,.modal) form > label:first-of-type{margin-top:14px}
html body.cm :is(.modal-card,.modal-box,.modal-content,.modal) form > :is(input:not([type=hidden]):not([type=checkbox]):not([type=radio]),select,textarea){display:block;width:100%;box-sizing:border-box;margin:0}
html body.cm .modal-card .modal-head{padding-bottom:12px;margin-bottom:2px}
html body.cm .modal-card .modal-actions{margin-top:18px;padding-top:14px;border-top:1px solid var(--hairline)}
html body.cm .modal-card .modal-close{width:28px;height:28px;padding:0!important;display:grid;place-items:center;border-radius:50%;font-size:20px!important;color:var(--label-2)!important;background:transparent!important;border:0!important;box-shadow:none!important}
html body.cm .modal-card .modal-close:hover{background:rgba(0,0,0,.06)!important}
/* sidebar logo: broken upload falls back (see header onerror); keep box tidy */
html body.cm .app-sidebar .dashboard-brand-logo{max-width:100%;max-height:44px;object-fit:contain}

/* =========================================================
   16. Universal button scale (V29815)
   One geometry for every button family in the app:
     regular 32px · small 26px (also inside table rows) · 13px/500 · radius 8
   One colour per intent: primary = accent, secondary = white, destructive = red tint.
   Strong prefix (body.cm.cm.cm) so older page CSS cannot resize them.
   ========================================================= */
html body.cm.cm.cm .app-main:not(#cm-a):not(#cm-b) :is(.btn,.ui-btn:not(.ui-btn--icon),.sr-btn,.sv-btn,.cr-btn,.qt-btn,.sap-btn,.sa-btn,.inst-btn,.spc-btn,.pl-btn,.sc-btn,.ir-btn,.wad-btn,.srr-btn,.hs-btn,.qa-btn,.outline-btn,.cc-btn,.si-btn,.mv-btn,.cancel-btn,.ap-btn,.cf-btn,.hold-btn,.barcode-btn,
  .supplier-add,.dn-send,.dn-channel,.alert-save-btn,.alert-cancel-btn,.proof-action,.cm-primary,.rp-print-btn,.remove-row,.pay-primary,.cp-primary,.save-product-btn,.btn-light,
  form button[type=submit]:not([class]),form > button:not([class]),.modal-actions > button,.modal-foot > button,
  input[type=submit],input[type=button]:not([class*="icon"])){
  display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;
  height:32px!important;min-height:32px!important;max-height:32px!important;padding:0 14px!important;border-radius:8px!important;
  font-family:var(--font)!important;font-size:13px!important;font-weight:500!important;line-height:1!important;letter-spacing:0!important;text-transform:none!important;
  white-space:nowrap!important;text-decoration:none!important;transform:none!important;align-self:auto;flex-shrink:0;cursor:pointer;margin-top:0!important;margin-bottom:0!important}
/* full-width CTA inside narrow cards keeps 100% width, just the height changes */
html body.cm.cm.cm .app-main:not(#cm-a):not(#cm-b) :is(.sr-complete,.btn.full,.btn.block,.btn.wide){width:100%;height:36px!important;min-height:36px!important;max-height:36px!important}
/* small: explicit small classes + any button inside a table row */
html body.cm.cm.cm .app-main:not(#cm-a):not(#cm-b) :is(.btn,.ui-btn,.sr-btn,.sv-btn,.cr-btn,.qt-btn,.sap-btn,.sa-btn,.inst-btn,.spc-btn,.pl-btn,.sc-btn,.wad-btn,.hs-btn,.qa-btn,.cc-btn,.si-btn,.ap-btn,.cf-btn,.remove-row,.remove):is(.sm,.sm2,.small,.btn-sm,.mini,.ui-btn--sm),
html body.cm.cm.cm .app-main:not(#cm-a):not(#cm-b) tbody :is(.btn,.ui-btn:not(.ui-btn--icon),.sr-btn,.sv-btn,.cr-btn,.qt-btn,.sap-btn,.sa-btn,.inst-btn,.spc-btn,.pl-btn,.sc-btn,.hs-btn,.qa-btn,.cc-btn,.si-btn,.ap-btn,.cf-btn,.remove-row,.remove,button:not([class*="icon"]):not([class*="trigger"]):not([class*="toggle"]):not(:has(> svg:only-child))){
  height:26px!important;min-height:26px!important;max-height:26px!important;padding:0 10px!important;font-size:12px!important;border-radius:6px!important}
/* primary (accent) — legacy hard-coded blues/greens/navies all become the accent */
html body.cm.cm.cm .app-main:not(#cm-a):not(#cm-b) :is(.supplier-add,.dn-send,.alert-save-btn,.cm-primary,.sa-btn.blue,.sa-btn.primary,.wad-btn.wad-primary,.wad-btn.wad-green,.rp-print-btn,
  .btn.green,.btn.blue,.btn.primary,.sr-btn-red,.sr-btn-primary,form button[type=submit]:not([class]),input[type=submit]){
  background:var(--accent)!important;color:#fff!important;border:1px solid transparent!important;box-shadow:0 1px 1px rgba(0,0,0,.10),inset 0 1px 0 rgba(255,255,255,.18)!important}
html body.cm.cm.cm .app-main:not(#cm-a):not(#cm-b) :is(.supplier-add,.dn-send,.alert-save-btn,.cm-primary,.sa-btn.blue,.sa-btn.primary,.wad-btn.wad-primary,.wad-btn.wad-green,.rp-print-btn,
  .btn.green,.btn.blue,.btn.primary,.sr-btn-red,.sr-btn-primary,form button[type=submit]:not([class]),input[type=submit]):hover{background:var(--accent-hover)!important}
/* secondary (white) */
html body.cm.cm.cm .app-main:not(#cm-a):not(#cm-b) :is(.dn-channel,.alert-cancel-btn,.proof-action,.sa-btn.gray,.sa-btn:not(.blue):not(.primary):not(.red),.wad-btn.wad-light,.sr-btn-light,.sr-page-btn,.mv-btn,.hold-btn,.barcode-btn,.modal-actions > button[type=button]:not([class]),input[type=button]:not([class*="icon"])){
  background:#fff!important;color:var(--label)!important;border:1px solid var(--border)!important;box-shadow:0 1px 1px rgba(0,0,0,.04)!important}
html body.cm.cm.cm .app-main:not(#cm-a):not(#cm-b) :is(.dn-channel,.alert-cancel-btn,.proof-action,.sa-btn.gray,.wad-btn.wad-light,.sr-btn-light,.sr-page-btn,.mv-btn,.hold-btn,.barcode-btn):hover{background:#F5F5F7!important}
/* destructive */
html body.cm.cm.cm .app-main:not(#cm-a):not(#cm-b) :is(.btn.red,.btn.danger,.sa-btn.red,.remove-row,.remove,.ui-btn--danger){background:var(--red-bg)!important;color:var(--red)!important;border:1px solid transparent!important;box-shadow:none!important}
html body.cm.cm.cm .app-main:not(#cm-a):not(#cm-b) :is(.btn.red,.btn.danger,.sa-btn.red,.remove-row,.remove,.ui-btn--danger):hover{background:#FADAD6!important}
html body.cm.cm.cm .app-main:not(#cm-a):not(#cm-b) .ui-btn--danger-solid{background:var(--red)!important;color:#fff!important}
/* disabled */
html body.cm.cm.cm .app-main:not(#cm-a):not(#cm-b) :is(.btn,.ui-btn,.sr-btn,.sv-btn,.cr-btn,.qt-btn,.sap-btn,.sa-btn,.wad-btn,button,input[type=submit]):is([disabled],.disabled){opacity:.45!important;cursor:default!important}
/* icons inside buttons: one size */
html body.cm.cm.cm .app-main:not(#cm-a):not(#cm-b) :is(.btn,.ui-btn,.sr-btn,.sv-btn,.cr-btn,.qt-btn,.sap-btn,.sa-btn,.wad-btn) > svg{width:15px!important;height:15px!important;flex:none}
/* icon-only buttons: 32 square (26 inside tables) */
html body.cm.cm.cm .app-main:not(#cm-a):not(#cm-b) :is(.icon-btn,.ui-btn--icon,.plus,.pf-icon-link){width:32px!important;min-width:32px!important;height:32px!important;min-height:32px!important;padding:0!important;font-size:16px!important;border-radius:8px!important}
html body.cm.cm.cm .app-main:not(#cm-a):not(#cm-b) tbody :is(.icon-btn,.ui-btn--icon){width:28px!important;min-width:28px!important;height:28px!important;min-height:28px!important}
/* tab strips (Settings etc.) → macOS segmented control */
html body.cm.cm.cm .app-main:not(#cm-a):not(#cm-b) .business-settings-tabs{display:inline-flex!important;gap:2px!important;padding:2px!important;background:#E8E8ED!important;border:0!important;border-radius:8px!important;max-width:100%}
html body.cm.cm.cm .app-main:not(#cm-a):not(#cm-b) .business-settings-tabs button{height:28px!important;padding:0 12px!important;font:500 13px/1 var(--font)!important;color:var(--label)!important;border:0!important;border-radius:6px!important;background:transparent!important;box-shadow:none!important}
html body.cm.cm.cm .app-main:not(#cm-a):not(#cm-b) .business-settings-tabs button.is-active{background:#fff!important;color:var(--label)!important;box-shadow:0 1px 2px rgba(0,0,0,.14),0 0 0 .5px rgba(0,0,0,.04)!important}
/* button rows: one gap */
html body.cm.cm.cm .app-main:not(#cm-a):not(#cm-b) :is(.modal-actions,.form-actions,.actions,.page-actions,.header-actions,.history-top-actions,.toolbar-actions){gap:8px!important}

/* pages that shrank themselves with CSS zoom: back to 100% so every page has the same scale */
html body.cm .app-main :is(.customer-edit-page,.product-page,.report-center-page,.users-page){zoom:1!important}

/* =========================================================
   17. Common text & card rules (V29815)
   ========================================================= */
/* no ALL-CAPS labels anywhere in the app content: sentence case like macOS */
html body.cm .app-main :is(small,label,span,th,dt,dd,p,b,strong,h3,h4,h5,h6,div,a,button,legend,caption){text-transform:none!important}
html body.cm .app-main :is(small,label,span,th,dt,legend,caption){letter-spacing:0!important}
/* numbered section markers (01, 02 …) */
html body.cm .app-main :is(.alert-section-number,.sr-step,.section-number,.step-number,.section-no){display:none!important}
/* decorative bubbles on stat cards */
html body.cm .app-main :is([class*="stat-card"],[class*="kpi"],[class*="metric-card"],[class*="summary-card"],.stat,[class$="-stat"],[class*="-stat "])::after{display:none!important}
/* stat card label + value: one style */
html body.cm .app-main :is([class*="stat-card"],[class*="kpi-card"],[class*="metric-card"]) :is(small,.label,[class$="-label"]){font-size:12px!important;font-weight:500!important;color:var(--label-2)!important}
/* form labels: one size */
html body.cm .app-main form label:not(:has(input[type=checkbox])):not(:has(input[type=radio])){font-size:12px;font-weight:500;color:#3A3A3E}

/* =========================================================
   18. One control scale for every page (V29819)
   Text fields, dropdowns, date fields and search boxes: 32px, radius 8, 13px.
   Width is left to each page; only the look is unified.
   ========================================================= */
html body.cm.cm.cm .app-main:not(#cm-a):not(#cm-b) :is(input:is([type=text],[type=search],[type=email],[type=tel],[type=number],[type=password],[type=url],[type=date],[type=datetime-local],[type=month],[type=time],:not([type])),select):not(.ui-seg *):not([class*="cart-"]):not(.qty):not(table input){
  height:32px!important;min-height:32px!important;max-height:32px!important;padding:0 10px!important;
  border:1px solid var(--border)!important;border-radius:8px!important;background-color:#fff!important;
  font-family:var(--font)!important;font-size:13px!important;font-weight:400!important;line-height:normal!important;color:var(--label)!important;
  box-shadow:none!important;letter-spacing:0!important;text-transform:none!important}
html body.cm.cm.cm .app-main:not(#cm-a):not(#cm-b) select:not([multiple]):not(.ui-seg *){padding-right:28px!important;-webkit-appearance:none!important;appearance:none!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E5E63' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 10l4 4 4-4'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;background-position:right 8px center!important;background-size:14px!important;cursor:pointer}
html body.cm.cm.cm .app-main:not(#cm-a):not(#cm-b) select[multiple]{height:auto!important;max-height:none!important;padding:6px!important;border-radius:8px!important;border:1px solid var(--border)!important}
html body.cm.cm.cm .app-main:not(#cm-a):not(#cm-b) table :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select){height:28px!important;min-height:28px!important;max-height:28px!important;border-radius:6px!important;font-size:12px!important;padding-top:0!important;padding-bottom:0!important}
html body.cm.cm.cm .app-main:not(#cm-a):not(#cm-b) :is(input,select,textarea):focus{border-color:var(--accent)!important;box-shadow:0 0 0 3px var(--accent-ring)!important;outline:0!important}
html body.cm.cm.cm .app-main:not(#cm-a):not(#cm-b) textarea{border:1px solid var(--border)!important;border-radius:8px!important;padding:8px 10px!important;font:400 13px/1.45 var(--font)!important;color:var(--label)!important;box-shadow:none!important;background:#fff!important}
html body.cm.cm.cm .app-main:not(#cm-a):not(#cm-b) :is(input,textarea)::placeholder{color:var(--label-3,#A1A1A6)!important;font-weight:400!important;opacity:1}
html body.cm.cm.cm .app-main:not(#cm-a):not(#cm-b) input[type=file]{height:auto!important;max-height:none!important;padding:6px!important;border:1px dashed var(--border)!important;border-radius:8px!important;background:var(--surface-2)!important;font-size:12px!important}
html body.cm.cm.cm .app-main:not(#cm-a):not(#cm-b) input[type=file]::file-selector-button{height:24px;margin-right:10px;padding:0 10px;border:1px solid var(--border);border-radius:6px;background:#fff;color:var(--label);font:500 12px var(--font);cursor:pointer}
html body.cm.cm.cm .app-main:not(#cm-a):not(#cm-b) :is(input[type=checkbox],input[type=radio]){accent-color:var(--accent)}
/* search boxes: magnifier inside the field when the page does not draw its own icon */
html body.cm.cm.cm .app-main:not(#cm-a):not(#cm-b):not(#cm-c) :is(input[type=search],input[placeholder^="Search" i],input[placeholder^="Type " i],input[id*="earch"]):not(:is(div,label,span,form):has(> svg, > .icon, > i, > span:not(:empty)) > input):not(table input){
  padding-left:30px!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2386868B' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;background-position:10px center!important;background-size:14px!important}
/* inputs that have a page-drawn icon right before them keep room for it */
html body.cm.cm.cm .app-main:not(#cm-a):not(#cm-b):not(#cm-c) :is(svg,i,.icon,span[class*="icon"],span[class*="glyph"])+input:not([type=checkbox]):not([type=radio]){padding-left:32px!important;background-image:none!important}
/* wrappers that draw their own border keep a borderless input inside */
html body.cm.cm.cm .app-main:not(#cm-a):not(#cm-b):not(#cm-c) :is(.history-search,.sr-searchbox)>input{border:0!important;box-shadow:none!important;background:transparent!important;padding-left:0!important;height:30px!important;min-height:30px!important}
/* form labels sit above their field */
html body.cm.cm.cm .app-main:not(#cm-a):not(#cm-b) :is(.row,.grid,.form-grid,.form-row,.field,.settings-grid)>div>label:first-child{display:block!important;margin:0 0 5px!important}
html body.cm.cm.cm .app-main:not(#cm-a):not(#cm-b) :is(.row,.form-grid,.form-row,.field)>div>:is(input:not([type=checkbox]):not([type=radio]),select,textarea){width:100%!important;box-sizing:border-box}

/* =========================================================
   19. Tabs everywhere: macOS segmented control with a smooth move (V29819)
   ========================================================= */
html body.cm.cm.cm .app-main:not(#cm-a):not(#cm-b) :is(.cr-tabs,.business-settings-tabs,.rc-tabs,.report-tabs,.tabs,.tab-bar,.si-tabs,.page-tabs,.cv-tabs,.customer-tabs,.nav-tabs):not(.ui-seg){display:inline-flex!important;flex-wrap:wrap;align-items:center!important;gap:2px!important;padding:2px!important;background:#E8E8ED!important;border:0!important;border-radius:9px!important;box-shadow:none!important;width:auto!important;max-width:100%}
html body.cm.cm.cm .app-main:not(#cm-a):not(#cm-b) :is(.cr-tabs,.business-settings-tabs,.rc-tabs,.report-tabs,.tabs,.tab-bar,.si-tabs,.page-tabs,.cv-tabs,.customer-tabs,.nav-tabs):not(.ui-seg) > :is(a,button){height:28px!important;min-height:28px!important;padding:0 12px!important;display:inline-flex!important;align-items:center!important;border:0!important;border-radius:7px!important;background:transparent!important;background-image:none!important;color:#3A3A3E!important;font:500 13px/1 var(--font)!important;text-decoration:none!important;box-shadow:none!important;white-space:nowrap;transition:background .18s ease,box-shadow .18s ease,color .18s ease!important}
html body.cm.cm.cm .app-main:not(#cm-a):not(#cm-b) :is(.cr-tabs,.business-settings-tabs,.rc-tabs,.report-tabs,.tabs,.tab-bar,.si-tabs,.page-tabs,.cv-tabs,.customer-tabs,.nav-tabs):not(.ui-seg) > :is(a,button):hover{background:rgba(255,255,255,.55)!important}
html body.cm.cm.cm .app-main:not(#cm-a):not(#cm-b) :is(.cr-tabs,.business-settings-tabs,.rc-tabs,.report-tabs,.tabs,.tab-bar,.si-tabs,.page-tabs,.cv-tabs,.customer-tabs,.nav-tabs):not(.ui-seg) > :is(a,button):is(.on,.active,.is-active,[aria-selected="true"],[aria-current="page"]){background:#fff!important;color:var(--label)!important;box-shadow:0 1px 2px rgba(0,0,0,.14),0 0 0 .5px rgba(0,0,0,.04)!important}
/* the panel that a tab reveals fades in */
html body.cm .app-main :is(.settings-card.is-active,.tab-pane.active,.tab-panel.active,[role="tabpanel"]:not([hidden])){animation:cmFadeIn .2s ease both}
@keyframes cmFadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
/* Business settings: save bar stays put at the bottom of the window on every tab */
html body.cm .app-main form .form-actions:has(#saveBusinessSettingsBtn){position:sticky!important;bottom:0!important;z-index:20!important;display:flex!important;justify-content:flex-end!important;align-items:center!important;gap:10px!important;margin:16px 0 0!important;padding:12px 16px!important;border-radius:12px!important;background:rgba(251,251,252,.86)!important;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 0 0 .5px rgba(0,0,0,.1),0 6px 20px rgba(0,0,0,.08)!important;transform:none!important;top:auto!important}

/* =========================================================
   20. Page-to-page navigation: smooth cross-fade, sidebar stays still (V29819)
   ========================================================= */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.16s}
html body.cm .app-sidebar{view-transition-name:cm-sidebar}
html body.cm .app-topbar{view-transition-name:cm-toolbar}
::view-transition-old(cm-sidebar),::view-transition-new(cm-sidebar),::view-transition-old(cm-toolbar),::view-transition-new(cm-toolbar){animation:none}
/* stock adjustment page lacked side padding */
html body.cm .app-main > .sa-wrap{padding:16px 20px 28px!important;max-width:1520px}
html body.cm.cm.cm .app-main:not(#cm-a):not(#cm-b):not(#cm-c) :is(.history-search,.sr-searchbox)>span+input{padding-left:0!important}

/* =========================================================
   21. Page fixes (V29819)
   ========================================================= */
/* Warranty register: Edit opens a small macOS popover instead of stretching the row */
html body.cm .app-main td details{position:relative}
html body.cm .app-main td details>summary{list-style:none;cursor:pointer}
html body.cm .app-main td details>summary::-webkit-details-marker{display:none}
html body.cm.cm.cm .app-main:not(#cm-a) td details[open]>form{position:absolute!important;right:0;top:calc(100% + 6px);z-index:40;width:300px!important;min-width:0!important;display:grid!important;grid-template-columns:1fr 1fr;gap:10px!important;padding:14px!important;margin:0!important;border:0!important;border-radius:12px!important;background:rgba(252,252,253,.98)!important;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 18px 50px rgba(0,0,0,.18),0 0 0 .5px rgba(0,0,0,.12)!important;text-align:left;white-space:normal}
html body.cm.cm.cm .app-main:not(#cm-a) td details[open]>form>label{display:flex!important;flex-direction:column;gap:4px;font-size:12px!important;font-weight:500!important;color:#3A3A3E!important;margin:0!important}
html body.cm.cm.cm .app-main:not(#cm-a) td details[open]>form>label:nth-of-type(4){grid-column:1/-1}
html body.cm.cm.cm .app-main:not(#cm-a):not(#cm-b) td details[open]>form :is(input:not([type=hidden]),select){width:100%!important;height:32px!important;min-height:32px!important;max-height:32px!important;font-size:13px!important}
html body.cm.cm.cm .app-main:not(#cm-a) td details[open]>form>button{grid-column:1/-1;justify-self:end}
/* warranty search panel: one line, no glyph */
html body.cm .app-main .search-panel .live-search-label .search-icon{display:none}
html body.cm .app-main .search-panel{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
html body.cm .app-main .search-panel .search-wrap{flex:1 1 360px;display:flex;gap:8px;align-items:center}
html body.cm .app-main .search-panel .search-wrap input{flex:1 1 auto}
/* 50-row limiter footer */
html body.cm .app-main tr.cm-row-cut{display:none!important}
html body.cm .app-main .cm-rowlimit{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:10px 14px;border-top:1px solid var(--hairline);font-size:12px;color:var(--label-2);background:#fff}
html body.cm .app-main .cm-rowlimit label{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--label-2)}
html body.cm.cm.cm .app-main:not(#cm-a):not(#cm-b) .cm-rowlimit select{width:90px!important;height:28px!important;min-height:28px!important}

/* =========================================================
   18. V29818 fixes
   ========================================================= */
/* collapsed sidebar: only the hovered/clicked group shows its flyout */
html body.cm.sidebar-collapsed .app-sidebar .nav-group:not(.flyout)>.nav-sub{display:none!important}
html body.cm.sidebar-collapsed .app-sidebar .nav-group.flyout>.nav-sub{display:block!important}
html body.cm.sidebar-collapsed .app-sidebar .nav-sub .nav-section,html body.cm.sidebar-collapsed .app-sidebar .nav-group.flyout>.nav-sub a span{display:inline!important}
/* one size for every text field, select and search box in page content */
html body.cm.cm .app-main:not(#cm-a) :is(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]):not([type=range]):not([type=color]),select){height:32px!important;min-height:32px!important;padding-top:0!important;padding-bottom:0!important;border:1px solid var(--border)!important;border-radius:8px!important;background-color:#fff!important;font:400 13px/1.2 var(--font)!important;color:var(--label)!important;box-shadow:none!important}
html body.cm.cm .app-main:not(#cm-a) input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]){padding-left:10px;padding-right:10px}
html body.cm.cm .app-main:not(#cm-a) select{padding-left:10px!important;padding-right:28px!important}
html body.cm.cm .app-main:not(#cm-a) textarea{border:1px solid var(--border)!important;border-radius:8px!important;font:400 13px/1.4 var(--font)!important;padding:8px 10px!important;box-shadow:none!important}
html body.cm.cm .app-main:not(#cm-a) :is(input,select,textarea):focus{border-color:var(--accent)!important;box-shadow:0 0 0 3px var(--accent-ring)!important;outline:0!important}
html body.cm.cm .app-main:not(#cm-a) :is(input,textarea)::placeholder{color:var(--label-3,#A1A1A6)!important;font-weight:400!important}
html body.cm.cm .app-main:not(#cm-a) tbody :is(input:not([type=checkbox]):not([type=radio]),select){height:28px!important;min-height:28px!important;font-size:12px!important}
html body.cm.cm .app-main:not(#cm-a) input[type=search],html body.cm.cm .app-main:not(#cm-a) input[placeholder^="Search" i]{padding-left:30px!important;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238E8E93' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") 10px center/14px no-repeat!important}
/* label + field stacking for legacy forms that put them side by side (Business settings, Brands, Warranty) */
html body.cm.cm .app-main:not(#cm-a) :is(.settings-card .row,.settings-grid .row)>div{display:flex;flex-direction:column;gap:5px;min-width:0}
html body.cm.cm .app-main:not(#cm-a) :is(.settings-card .row){display:grid!important;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))!important;gap:14px 18px!important}
html body.cm.cm .app-main:not(#cm-a) .settings-card .row>div>:is(input,select,textarea){width:100%!important}
html body.cm.cm .app-main:not(#cm-a) .settings-card .row>div>label{font-size:12px!important;font-weight:500!important;color:#3A3A3E!important}
/* settings: save bar stays put; tab change animates */
html body.cm.cm .app-main:not(#cm-a) .settings-card.is-active{animation:cmTabIn .18s ease-out both}
@keyframes cmTabIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
html body.cm.cm .app-main:not(#cm-a) :is(.settings-save-bar,.settings-actions,.settings-footer,.sticky-save){position:sticky!important;bottom:0!important;z-index:20}
/* every tab strip: macOS segmented control with a sliding feel */
html body.cm.cm .app-main:not(#cm-a) :is(.tabs,.tab-bar,.nav-tabs,.report-tabs,.cr-tabs,.si-tabs,[role=tablist]){display:inline-flex!important;flex-wrap:wrap;gap:2px!important;padding:2px!important;background:#E8E8ED!important;border:0!important;border-radius:8px!important;box-shadow:none!important}
html body.cm.cm .app-main:not(#cm-a) :is(.tabs,.tab-bar,.nav-tabs,.report-tabs,.cr-tabs,.si-tabs,[role=tablist])>:is(a,button){height:28px!important;min-height:28px!important;padding:0 12px!important;border:0!important;border-radius:6px!important;background:transparent!important;color:#3A3A3E!important;font:500 13px/28px var(--font)!important;box-shadow:none!important;text-decoration:none!important;transition:background .15s,box-shadow .15s!important}
html body.cm.cm .app-main:not(#cm-a) :is(.tabs,.tab-bar,.nav-tabs,.report-tabs,.cr-tabs,.si-tabs,[role=tablist])>:is(.active,.is-active,.on,[aria-selected=true],[aria-current=page]){background:#fff!important;color:var(--label)!important;box-shadow:0 1px 2px rgba(0,0,0,.14),0 0 0 .5px rgba(0,0,0,.04)!important}
/* page fade on navigation (sidebar stays) */
html body.cm .app-main>*{animation:cmPageIn .16s ease-out both}
@keyframes cmPageIn{from{opacity:.4}to{opacity:1}}

/* =========================================================
   19. V29819 page fixes
   ========================================================= */
/* Warranty: edit panel as a tidy 2-column form */
html body.cm .app-main:not(#cm-a) form.panel:has(input[name=save_warranty]){display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px 12px!important;min-width:340px!important;padding:12px!important;border-radius:10px!important;background:#FAFAFB!important;border:1px solid var(--hairline)!important;box-shadow:none!important}
html body.cm .app-main:not(#cm-a) form.panel:has(input[name=save_warranty]) label{display:flex!important;flex-direction:column!important;gap:4px!important;font-size:12px!important;font-weight:500!important;color:#3A3A3E!important;margin:0!important}
html body.cm .app-main:not(#cm-a) form.panel:has(input[name=save_warranty]) label:has(textarea,input[name=note]){grid-column:1/-1}
html body.cm .app-main:not(#cm-a) form.panel:has(input[name=save_warranty]) :is(button,.btn){grid-column:1/-1;justify-self:end}
html body.cm .app-main:not(#cm-a) form.panel:has(input[name=save_warranty]) :is(input,select){width:100%!important}
/* any legacy form whose labels wrap their inputs: stack label over field */
html body.cm .app-main:not(#cm-a) form label:has(>input:not([type=checkbox]):not([type=radio]),>select,>textarea){display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:500;color:#3A3A3E}
/* Brands / simple add forms: label, field and button on one tidy row */
html body.cm .app-main:not(#cm-a) form:has(>label+input[name=name]),html body.cm .app-main:not(#cm-a) form:has(>label+input[name=brand_name]){display:grid!important;grid-template-columns:minmax(0,420px) auto!important;align-items:end!important;gap:6px 10px!important}
html body.cm .app-main:not(#cm-a) form:has(>label+input[name=name])>label,html body.cm .app-main:not(#cm-a) form:has(>label+input[name=brand_name])>label{grid-column:1/-1;font-size:12px;font-weight:500;color:#3A3A3E}
/* table cells: keep short dates on one line */
html body.cm .app-main:not(#cm-a) td:is(.date,.nowrap){white-space:nowrap}
/* Expense popup (expense history): stacked fields, accent primary */
html body.cm .app-main:not(#cm-a) :is(.modal-card,.modal-box) :is(.modal-foot,.modal-actions){display:flex!important;justify-content:flex-end!important;gap:8px!important}
html body.cm:not(#cm-a) :is(.modal-card,.modal-box) :is(button[type=submit],.btn.blue,.btn.green){background:var(--accent)!important;color:#fff!important;border-color:transparent!important}
/* Stock adjustment: one size for its own button family */
html body.cm.cm .app-main:not(#cm-a) .sa-btn{height:32px!important;min-height:32px!important;max-height:32px!important;align-self:center!important}
html body.cm.cm .app-main:not(#cm-a) :is(.sa-card,.sa-panel,.sa-form){border-radius:12px!important}
html body.cm .app-main:not(#cm-a) :is(.row3,.row2,.row,.form-row)>:is(.field-wide,.field,div):has(>label+:is(input,select,textarea)){display:flex!important;flex-direction:column!important;gap:5px!important;max-width:520px}
html body.cm .app-main:not(#cm-a) :is(.row3,.row2,.form-row)>:is(.field-wide,.field,div)>label{font-size:12px!important;font-weight:500!important;color:#3A3A3E!important}
html body.cm .app-main:not(#cm-a) .form-actions{display:flex;gap:8px;margin-top:12px}
html body.cm .app-main:not(#cm-a) .info-icon{display:none!important}
/* server-side pager (V29820) */
html body.cm .app-main .cm-pager{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:10px 14px;font-size:12px;color:var(--label-2)}
html body.cm .app-main .cm-pager .is-disabled{opacity:.4;pointer-events:none}


/* =========================================================
   19. One macOS typeface everywhere (V29831)
   Mac: the real San Francisco (system font). Windows/Android: Inter, the closest open font, shipped in assets/fonts.
   Print templates are not affected (they do not use body.cm).
   ========================================================= */
html body.cm,html body.cm :is(input,select,textarea,button,option,optgroup,table,th,td,label,h1,h2,h3,h4,h5,h6,p,span,a,small,b,strong,li,div,kbd,legend,summary){font-family:var(--font)!important}
html body.cm :is(code,pre,samp){font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace!important}
html body.cm{font-feature-settings:"cv11","ss01";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
html body.cm-auth,html body.cm-auth :is(input,button,label,h1,p,a,span,div){font-family:var(--font)!important}

/* ===== V29851 · loading feedback (spinner in buttons, top progress bar) ===== */
.cm-busy{position:relative;pointer-events:none;opacity:.85}
.cm-spin{position:relative;display:inline-block;width:14px;height:14px;margin-right:6px;vertical-align:-2px;flex:0 0 14px}
.cm-spin i{position:absolute;left:6px;top:0;width:2px;height:4px;border-radius:1px;background:currentColor;transform-origin:1px 7px;animation:cmSpin .8s linear infinite;opacity:.25}
.cm-spin i:nth-child(1){transform:rotate(0deg);animation-delay:-.7s}.cm-spin i:nth-child(2){transform:rotate(45deg);animation-delay:-.6s}.cm-spin i:nth-child(3){transform:rotate(90deg);animation-delay:-.5s}.cm-spin i:nth-child(4){transform:rotate(135deg);animation-delay:-.4s}.cm-spin i:nth-child(5){transform:rotate(180deg);animation-delay:-.3s}.cm-spin i:nth-child(6){transform:rotate(225deg);animation-delay:-.2s}.cm-spin i:nth-child(7){transform:rotate(270deg);animation-delay:-.1s}.cm-spin i:nth-child(8){transform:rotate(315deg);animation-delay:0s}
@keyframes cmSpin{0%{opacity:1}100%{opacity:.2}}
.cm-progress{position:fixed;left:0;top:0;right:0;height:3px;z-index:2147483647;pointer-events:none;opacity:0;transition:opacity .2s}
.cm-progress i{display:block;height:100%;width:0;background:var(--accent,#007aff);box-shadow:0 0 8px color-mix(in srgb,var(--accent,#007aff) 60%,transparent);border-radius:0 3px 3px 0}
.cm-progress.run{opacity:1}.cm-progress.run i{animation:cmProg 8s cubic-bezier(.1,.7,.2,1) forwards}
.cm-progress.done i{animation:none;width:100%!important;transition:width .2s}.cm-progress.done{opacity:0;transition:opacity .3s .15s}
@keyframes cmProg{0%{width:0}10%{width:35%}40%{width:65%}100%{width:92%}}
@media (prefers-reduced-motion:reduce){.cm-spin i,.cm-progress.run i{animation-duration:0s}}