/* Graviti · shared design system
   Tokens and shared components. Opt-in shell scope deliberately excludes
   tenant storefronts, documents, embeds and printable customer content.
   Keep layout/visibility/JS state in the existing components. */
html[data-ui="graviti"] {
  --ui-brand-graviti: #373435;
  --ui-brand-chat: #4ade80;
  --ui-brand-print: #2687e9;
  --ui-brand-store: #a85dee;
  --ui-field-focus: #2687e9;
  --ui-action-blue: #1d4ed8;
  --ui-accent: #1d4ed8;
  --ui-accent-text: #1d4ed8;
  --ui-accent-hover: #1943ba;
  --ui-on-accent: #ffffff;
  --ui-glass-background: #eef2f7;
  --ui-action-blue-hover: color-mix(in srgb, var(--ui-action-blue) 87%, black);
  --ui-primary: var(--ui-action-blue);
  --ui-primary-text: #373435;
  --ui-navigation-accent: var(--ui-brand-graviti);
  --ui-navigation-text: #373435;
  --ui-on-primary: #ffffff;
  --ui-primary-hover-mix: black;
  --ui-background: #f4f5f7;
  --ui-surface: #ffffff;
  --ui-surface-subtle: #f8f9fb;
  --ui-surface-hover: #eef1f5;
  --ui-sidebar: #f9fafb;
  --ui-border: #e2e6ed;
  --ui-border-strong: #c5ccd8;
  --ui-text-primary: #252b37;
  --ui-text-secondary: #596477;
  --ui-text-muted: #687487;
  --ui-success: #187044;
  --ui-warning: #93600b;
  --ui-danger: #c13043;
  --ui-success-fill: #187044;
  --ui-warning-fill: #93600b;
  --ui-danger-fill: #c13043;
  --ui-info: #2167b1;
  --ui-radius-sm: 10px;
  --ui-radius-md: 14px;
  --ui-radius-lg: 18px;
  --ui-radius-pill: 999px;
  --ui-shadow-sm: 0 2px 6px -3px rgb(25 38 62 / .08), 0 1px 2px rgb(25 38 62 / .025);
  --ui-shadow-md: 0 16px 48px -16px rgb(25 38 62 / .20), 0 4px 12px -4px rgb(25 38 62 / .06);
  --ui-blur: 12px;
  --ui-glass-opacity: 94%;
  --ui-overlay: rgb(18 25 39 / .36);
  --ui-space-4: 4px;
  --ui-space-8: 8px;
  --ui-space-12: 12px;
  --ui-space-16: 16px;
  --ui-space-24: 24px;
  --ui-space-32: 32px;
  --ui-space-48: 48px;
  --ui-control-height: 38px;
  --ui-control-compact: 30px;
  --ui-font: 'Plus Jakarta Sans', Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ui-duration: 160ms;
  --ui-ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}
html[data-ui="graviti"][data-ui-brand="chat"] {
  --ui-primary: var(--ui-brand-chat);
  --ui-primary-text: #17633a;
  --ui-on-primary: #122a1b;
}
html[data-ui="graviti"][data-ui-brand="print"] {
  --ui-primary: var(--ui-action-blue);
  --ui-primary-text: #1968b5;
  --ui-on-primary: #ffffff;
  --ui-primary-hover-mix: black;
}
html[data-ui="graviti"][data-ui-brand="store"] {
  --ui-primary: var(--ui-brand-store);
  --ui-primary-text: #8240b7;
  --ui-on-primary: #201029;
  --ui-primary-hover-mix: white;
}
html[data-ui="graviti"].dark {
  --ui-accent-text: #89bffc;
  --ui-glass-background: #172033;
  --ui-background: #172033;
  --ui-surface: #1e2a40;
  --ui-surface-subtle: #1b263b;
  --ui-surface-hover: #28364e;
  --ui-sidebar: #141e30;
  --ui-border: #334158;
  --ui-border-strong: #53627b;
  --ui-text-primary: #e9eef7;
  --ui-text-secondary: #b0bed2;
  --ui-text-muted: #9caec5;
  --ui-primary-text: #ddd7d9;
  --ui-navigation-text: #ddd7d9;
  --ui-success: #71d99b;
  --ui-warning: #efc477;
  --ui-danger: #ff99a6;
  --ui-info: #8fc5ff;
  --ui-shadow-sm: 0 2px 6px rgb(5 11 22 / .10);
  --ui-shadow-md: 0 20px 56px -16px rgb(4 9 18 / .5), 0 3px 12px rgb(4 9 18 / .12);
  --ui-overlay: rgb(6 12 24 / .58);
  color-scheme: dark;
}
html[data-ui="graviti"].dark[data-ui-brand="chat"] { --ui-primary-text: #4ade80; }
html[data-ui="graviti"].dark[data-ui-brand="print"] { --ui-primary-text: #89bffc; }
html[data-ui="graviti"].dark[data-ui-brand="store"] { --ui-primary-text: #d0a0ff; }

/* Global navigation keeps the Graviti identity, independently of module accents. */
html[data-ui="graviti"] .graviti-ui :is(.sidebar-link.active, .sidebar-submenu a.active, .mobile-sidebar-item.active) {
  color: var(--ui-navigation-text) !important;
}
/* Glass changes neutral materials only. Keep --ui-surface opaque as the
   existing semantic mixes, badges and chart palettes derive from it. */
html[data-ui="graviti"][data-style="glass"] {
  --ui-background: var(--ui-glass-background);
  --ui-glass-surface: rgb(255 255 255 / .68);
  --ui-glass-strong: rgb(255 255 255 / .92);
  --ui-glass-subtle: rgb(255 255 255 / .48);
  --ui-glass-elevated: rgb(255 255 255 / .86);
  --ui-glass-hover: rgb(255 255 255 / .82);
  --ui-glass-border: rgb(255 255 255 / .72);
  --ui-glass-edge: rgb(46 58 82 / .09);
  --ui-glass-field-border: rgb(70 82 106 / .24);
  --ui-glass-highlight: inset 0 1px 0 rgb(255 255 255 / .88);
  --ui-glass-shadow: var(--ui-glass-highlight), 0 8px 28px -12px rgb(36 52 87 / .16), 0 0 0 1px var(--ui-glass-edge);
  --ui-glass-shadow-raised: var(--ui-glass-highlight), 0 24px 60px -20px rgb(36 52 87 / .24), 0 0 0 1px var(--ui-glass-edge);
  --ui-glass-backdrop: blur(var(--ui-blur)) saturate(var(--ui-glass-saturation));
  --ui-glass-saturation: 135%;
  --ui-glass-ambient: radial-gradient(ellipse at 8% 8%, rgb(38 135 233 / .14), transparent 55%),
    radial-gradient(ellipse at 92% 24%, rgb(168 93 238 / .10), transparent 52%),
    radial-gradient(ellipse at 42% 95%, rgb(74 222 128 / .07), transparent 58%),
    linear-gradient(135deg, #eef2f7, #f5f4f8 65%, #edf3f6);
  --ui-border: var(--ui-glass-edge);
  --ui-border-strong: #abb5c4;
  --ui-sidebar: var(--ui-glass-surface);
  --ui-radius-sm: 12px;
  --ui-radius-md: 18px;
  --ui-radius-lg: 22px;
  --ui-shadow-sm: var(--ui-glass-shadow);
  --ui-shadow-md: var(--ui-glass-shadow-raised);
  --ui-glass-opacity: 86%;
  --ui-blur: 18px;
  --ui-overlay: rgb(29 39 58 / .28);
}

html[data-ui="graviti"][data-style="glass"].dark {
  --ui-glass-surface: color-mix(in srgb, var(--ui-surface) 82%, transparent);
  --ui-glass-strong: color-mix(in srgb, var(--ui-surface) 96%, transparent);
  --ui-glass-subtle: color-mix(in srgb, var(--ui-surface-subtle) 70%, transparent);
  --ui-glass-elevated: color-mix(in srgb, var(--ui-surface) 96%, transparent);
  --ui-glass-hover: color-mix(in srgb, var(--ui-surface-hover) 94%, transparent);
  --ui-glass-border: rgb(255 255 255 / .12);
  --ui-glass-edge: rgb(255 255 255 / .10);
  --ui-glass-field-border: var(--ui-border-strong);
  --ui-glass-highlight: inset 0 1px 0 rgb(255 255 255 / .07);
  --ui-border-strong: #53627b;
  --ui-overlay: rgb(6 12 24 / .58);
  --ui-glass-ambient: radial-gradient(ellipse at 8% 8%, rgb(38 135 233 / .08), transparent 55%),
    radial-gradient(ellipse at 92% 24%, rgb(168 93 238 / .05), transparent 52%),
    linear-gradient(var(--ui-background), var(--ui-background));
}
@media (max-width: 768px) {
  html[data-ui="graviti"][data-style="glass"]:is(:root):is(:root) {
    --ui-blur: 10px;
    /* Pop-ups sit above text-heavy screens: keep the Glass depth, but do not
       let content from the page compete with labels and form controls. */
    --ui-glass-elevated: var(--ui-surface);
  }
}
/* Solid fallbacks are token-based and keep the same component hierarchy. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-ui="graviti"][data-style="glass"]:is(:root):is(:root) {
    --ui-glass-surface: var(--ui-surface);
    --ui-glass-subtle: var(--ui-surface-subtle);
    --ui-glass-strong: var(--ui-surface);
    --ui-glass-elevated: var(--ui-surface);
    --ui-glass-hover: var(--ui-surface-hover);
    --ui-glass-backdrop: none;
  }
}
@media (prefers-reduced-transparency: reduce), (forced-colors: active) {
  html[data-ui="graviti"][data-style="glass"]:is(:root):is(:root) {
    --ui-glass-surface: var(--ui-surface);
    --ui-glass-subtle: var(--ui-surface-subtle);
    --ui-glass-strong: var(--ui-surface);
    --ui-glass-elevated: var(--ui-surface);
    --ui-glass-hover: var(--ui-surface-hover);
    --ui-glass-backdrop: none;
    --ui-glass-ambient: none;
    --ui-blur: 0px;
  }
}

/* Help has its own legacy palette. Adapt neutral materials only; preserve
   its indigo guidance, new-content badges and semantic colors. */
html[data-ui="graviti"][data-style="glass"] #help-mode-root {
  --hm-bg: var(--ui-surface);
  --hm-border: var(--ui-border);
  --hm-shadow: var(--ui-shadow-md);
  --hm-radius: var(--ui-radius-md);
}

/* Define derived values at each scope that defines the source variables. */
html[data-ui="graviti"], html[data-ui="graviti"] .theme {
  --ui-accent-soft: color-mix(in srgb, var(--ui-accent) 10%, var(--ui-surface));
  --ui-primary-hover: color-mix(in srgb, var(--ui-primary) 87%, var(--ui-primary-hover-mix));
  --ui-primary-soft: color-mix(in srgb, var(--ui-primary) 10%, var(--ui-surface));
  --ui-navigation-soft: color-mix(in srgb, var(--ui-navigation-accent) 8%, var(--ui-surface));
  --ui-navigation-ring: color-mix(in srgb, var(--ui-navigation-accent) 16%, transparent);
  --ui-focus: color-mix(in srgb, var(--ui-primary-text) 22%, transparent);
  --ui-glass: color-mix(in srgb, var(--ui-surface) var(--ui-glass-opacity), transparent);
  --ui-success-soft: color-mix(in srgb, var(--ui-success) 10%, var(--ui-surface));
  --ui-warning-soft: color-mix(in srgb, var(--ui-warning) 10%, var(--ui-surface));
  --ui-danger-soft: color-mix(in srgb, var(--ui-danger) 10%, var(--ui-surface));
  --ui-info-soft: color-mix(in srgb, var(--ui-info) 10%, var(--ui-surface));
  --bg: var(--ui-background);
  --text: var(--ui-text-primary);
  --muted: var(--ui-surface-subtle);
  --text-muted: var(--ui-text-muted);
  --border: var(--ui-border);
  --brand: var(--ui-primary);
  --primary-color: var(--ui-primary);
  --primary-color-light: var(--ui-primary-text);
  --secondary-color: var(--ui-primary-text);
  --sidebar: var(--ui-sidebar);
  --sidebar-text: var(--ui-text-primary);
  --sidebar-color: var(--ui-sidebar);
  --sidebar-text-color: var(--ui-text-secondary);
  --sb-text-strong: var(--ui-text-primary);
  --sb-hover: var(--ui-surface-hover);
  --sb-selected-bg: var(--ui-navigation-soft);
  --sb-selected-ring: var(--ui-navigation-ring);
  --sb-active-bg: var(--ui-navigation-soft);
  --sb-active-fg: var(--ui-navigation-text);
  --sb-border: var(--ui-border);
  --sb-label: var(--ui-text-muted);
  --sb-muted: var(--ui-text-secondary);
  --sb-avatar-bg: var(--ui-primary);
  --sb-scroll: var(--ui-border-strong);
  --sb-scroll-hover: var(--ui-text-muted);
  --dark-bg: var(--ui-background);
  --dark-sidebar: var(--ui-sidebar);
  --dark-surface: var(--ui-surface);
  --dark-raised: var(--ui-surface-hover);
  --dark-border: var(--ui-border);
  --dark-text: var(--ui-text-primary);
  --dark-muted: var(--ui-text-secondary);
  --dark-accent: var(--ui-primary-text);
  --dark-primary: var(--ui-primary);
  --radius: var(--ui-radius-lg);
  --fs-hero: 26px;
  --fs-h2: 19px;
  --fs-h3: 15px;
  --fs-body: 13px;
  --fs-small: 12px;
  --lh: 1.55;
  --space-4: var(--ui-space-4);
  --space-8: var(--ui-space-8);
  --space-12: var(--ui-space-12);
  --space-16: var(--ui-space-16);
  --space-24: var(--ui-space-24);
  --space-32: var(--ui-space-32);
  --space-48: var(--ui-space-48);
}
html[data-ui="graviti"], html[data-ui="graviti"] body.graviti-ui,
html[data-ui="graviti"] .graviti-ui :is(.app, main.content, #superadmin-main) {
  background-color: var(--ui-background) !important;
  color: var(--ui-text-primary);
}
html[data-ui="graviti"] body.graviti-ui {
  font-family: var(--ui-font);
  font-size: var(--fs-body, 13px);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.graviti-ui :where(button, input, select, textarea) { font-family: inherit; }
/* Author display:flex/grid must not reveal hidden panels or help actions. */
html[data-ui="graviti"] .graviti-ui [hidden]:not([hidden="until-found"]) { display: none !important; }
.graviti-ui :where(button, .btn, .ui-button) { font-weight: 500 !important; }
.graviti-ui :where(button, .btn, .ui-button) :where(span, strong) { font-weight: inherit !important; }
.graviti-ui :where(main.content, #superadmin-content) > :where(h1, .ui-page-heading) {
  letter-spacing: -.035em;
  font-weight: 700;
  margin-bottom: var(--ui-space-24);
}
.graviti-ui :where(h1, h2, h3) { text-wrap: pretty; }
.graviti-ui :where(.card-value, .tabular-nums, .ui-metric) { font-variant-numeric: tabular-nums; letter-spacing: -.035em; }
.graviti-ui :where(.text-muted, .ui-muted) { color: var(--ui-text-muted); }
html[data-ui="graviti"] .graviti-ui ::selection { background: var(--ui-primary-soft); color: var(--ui-text-primary); }

/* Compatibility for existing utilities and AJAX-rendered components. These
   selectors only paint neutral surfaces; semantic colors stay semantic. */
html[data-ui="graviti"] .graviti-ui :is(.bg-white, .ui-surface) { background-color: var(--ui-surface) !important; }
html[data-ui="graviti"] .graviti-ui :is(.bg-slate-50, .bg-gray-50, .bg-zinc-50, .bg-neutral-50) { background-color: var(--ui-surface-subtle) !important; }
html[data-ui="graviti"] .graviti-ui :is(.bg-slate-100, .bg-gray-100, .bg-zinc-100, .bg-neutral-100) { background-color: var(--ui-surface-hover) !important; }
html[data-ui="graviti"] .graviti-ui :is(.border-slate-100, .border-slate-200, .border-slate-300, .border-gray-100, .border-gray-200, .border-gray-300, .border-neutral-200, .border-zinc-200) { border-color: var(--ui-border) !important; }
html[data-ui="graviti"] .graviti-ui :is(.divide-slate-100, .divide-slate-200, .divide-gray-100, .divide-gray-200) > :not([hidden]) ~ :not([hidden]) { border-color: var(--ui-border) !important; }
html[data-ui="graviti"] .graviti-ui :is(.text-slate-900, .text-slate-800, .text-slate-700, .text-gray-900, .text-gray-800, .text-gray-700) { color: var(--ui-text-primary) !important; }
html[data-ui="graviti"] .graviti-ui :is(.text-slate-600, .text-slate-500, .text-gray-600, .text-gray-500) { color: var(--ui-text-secondary) !important; }
html[data-ui="graviti"] .graviti-ui :is(.text-slate-400, .text-gray-400) { color: var(--ui-text-muted) !important; }
html[data-ui="graviti"] .graviti-ui :is(.hover\:bg-slate-50, .hover\:bg-slate-100, .hover\:bg-gray-50, .hover\:bg-gray-100, .hover\:bg-neutral-50, .hover\:bg-zinc-50):hover { background-color: var(--ui-surface-hover) !important; }
.graviti-ui :is(.rounded, .rounded-sm, .rounded-md):not(.rounded-full):not(.rounded-none) { border-radius: var(--ui-radius-sm) !important; }
.graviti-ui :is(.rounded-lg, .rounded-xl):not(.rounded-full):not(.rounded-none) { border-radius: var(--ui-radius-md) !important; }
.graviti-ui :is(.rounded-2xl, .rounded-3xl):not(.rounded-full):not(.rounded-none) { border-radius: var(--ui-radius-lg) !important; }
.graviti-ui :is(.shadow, .shadow-sm) { box-shadow: var(--ui-shadow-sm) !important; }
.graviti-ui :is(.shadow-md, .shadow-lg, .shadow-xl, .shadow-2xl) { box-shadow: var(--ui-shadow-md) !important; }
.graviti-ui :is(.card, .settings-card, .ui-card),
.graviti-ui :where(div, section, article, form):is(.bg-white.rounded-lg, .bg-white.rounded-xl, .bg-white.rounded-2xl) {
  border-radius: var(--ui-radius-lg) !important;
  border-color: var(--ui-border) !important;
  background-color: var(--ui-surface);
  box-shadow: var(--ui-shadow-sm);
}
.graviti-ui .card { padding: var(--ui-space-24); }
.graviti-ui .card:hover { box-shadow: var(--ui-shadow-sm); }
.graviti-ui :is(a.card, a.settings-card, .ui-card-link) { transition: background-color var(--ui-duration) var(--ui-ease), border-color var(--ui-duration) var(--ui-ease), box-shadow var(--ui-duration) var(--ui-ease); }
.graviti-ui :is(a.card, a.settings-card, .ui-card-link):hover { border-color: var(--ui-border-strong) !important; background-color: var(--ui-surface-subtle); }
.graviti-ui .card-title { font-size: 12px; color: var(--ui-text-secondary); letter-spacing: 0; }
.graviti-ui .card-value { font-size: 28px; line-height: 1.25; font-weight: 700; }
.graviti-ui .card-meta { font-size: 12px; color: var(--ui-text-muted); }

/* Controls: normal form fields share a finish; compact chat/canvas fields
   keep their own geometry. No global display/width/padding-left override. */
html[data-ui="graviti"] .graviti-ui :is(input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], input[type="url"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], select, textarea):not(:where(.chat-input *, .chat-composer *, .composer *, #composer-pill *, #ic-composer-pill *, #ticket-input *, .flow-node *, .page-flow-editor *, .whatsapp-numbers *, [contenteditable], .ui-input-plain)) {
  border-color: var(--ui-border) !important;
  border-width: 1px;
  border-radius: var(--ui-radius-sm) !important;
  background-color: var(--ui-surface) !important;
  color: var(--ui-text-primary) !important;
  box-shadow: none;
  transition: border-color var(--ui-duration) var(--ui-ease), background-color var(--ui-duration) var(--ui-ease), box-shadow var(--ui-duration) var(--ui-ease);
}
.graviti-ui :where(.form, .ui-form, #new-contact-form, #edit-contact-form) :where(input:not([type]), input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], input[type="url"], input[type="date"], select) { min-height: var(--ui-control-height); }
html[data-ui="graviti"] .graviti-ui :is(input, select, textarea):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not(:where(.chat-input *, .chat-composer *, .composer *, #composer-pill *, #ic-composer-pill *, #ticket-input *, .flow-node *, .page-flow-editor *, [contenteditable])):hover:not(:disabled):not(:focus) {
  border-color: var(--ui-border-strong) !important;
  box-shadow: none !important;
}
html[data-ui="graviti"] .graviti-ui :is(input, textarea, select):not(:where(.composer textarea, #composer-pill textarea, #ic-composer-pill textarea)):focus-visible {
  border-color: var(--ui-primary-text) !important;
  outline: 2px solid var(--ui-primary-text) !important;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--ui-focus) !important;
}
/* All typing controls share blue focus, independent of the area's brand. */
html[data-ui="graviti"] body:is(.graviti-ui, .graviti-auth) :is(input, textarea, select, [contenteditable]:not([contenteditable="false"])):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not(:where(#composer-pill textarea, #ic-composer-pill textarea)):focus {
  border-color: var(--ui-field-focus) !important;
  outline: none !important;
  box-shadow: none !important;
}
html[data-ui="graviti"] .graviti-ui :is(input, textarea)::placeholder { color: var(--ui-text-muted); opacity: 1; }
html[data-ui="graviti"] .graviti-ui :is(input, textarea)[readonly] { background-color: var(--ui-surface-subtle) !important; color: var(--ui-text-secondary) !important; }
html[data-ui="graviti"] body.graviti-ui :is(#composer-pill, #ic-composer-pill):focus-within { border-color: var(--ui-field-focus) !important; outline: none !important; box-shadow: none !important; }
html[data-ui="graviti"] body.graviti-ui :is(#composer-pill, #ic-composer-pill) textarea:focus { outline: none !important; box-shadow: none !important; }
html[data-ui="graviti"] .graviti-ui :is(input, select, textarea):disabled { background-color: var(--ui-surface-subtle) !important; color: var(--ui-text-muted) !important; cursor: not-allowed; opacity: .65; }
.graviti-ui :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--ui-primary-text); }
.graviti-ui :where(label, .ui-label) { color: var(--ui-text-secondary); }
.graviti-ui :where(.ui-field-hint, .form-hint) { font-size: 12px; color: var(--ui-text-muted); }
html[data-ui="graviti"] .graviti-ui :is([aria-invalid="true"], .is-invalid) { border-color: var(--ui-danger) !important; }

/* Primary utilities use the area's action palette (Graviti/Print: blue). */
html[data-ui="graviti"] .graviti-ui :is(.btn, .ui-button) {
  border-width: 1px;
  border-radius: var(--ui-radius-sm);
  border-color: var(--ui-border);
  background-color: var(--ui-surface);
  color: var(--ui-text-primary);
  font-size: 13px;
  line-height: 1.35;
  box-shadow: var(--ui-shadow-sm);
  transition: background-color var(--ui-duration) var(--ui-ease), color var(--ui-duration) var(--ui-ease), border-color var(--ui-duration) var(--ui-ease), box-shadow var(--ui-duration) var(--ui-ease);
}
.graviti-ui :is(.ui-button, .ui-page-actions > .btn) { min-height: var(--ui-control-height); }
/* Text actions may grow; icon tools/composers retain their compact sizing. */
.graviti-ui :where(main.content, #superadmin-content) > :where(.flex) > .btn,
.graviti-ui :where(.form, .ui-form) > .btn { height: var(--ui-control-height); }
html[data-ui="graviti"] .graviti-ui :is(.btn, .ui-button):hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--ui-surface-hover);
  border-color: var(--ui-border-strong) !important;
  box-shadow: var(--ui-shadow-sm);
}
html[data-ui="graviti"] .graviti-ui :is(.btn-primary, .btn-brand, .bg-brand, .bg-primary, .bg-\[\#0054c2\], .bg-\[var\(--primary-color\)\], .ui-button-primary) {
  background-color: var(--ui-primary) !important;
  border-color: transparent !important;
  color: var(--ui-on-primary) !important;
  background-image: none;
}
html[data-ui="graviti"] .graviti-ui :is(.btn-primary, .btn-brand, .bg-brand, .bg-primary, .bg-\[\#0054c2\], .bg-\[var\(--primary-color\)\], .ui-button-primary):hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--ui-primary-hover) !important;
  color: var(--ui-on-primary) !important;
  border-color: transparent !important;
  box-shadow: var(--ui-shadow-sm) !important;
}
/* Legacy dark action utilities: recolor controls only, not tooltips, media,
   overlays or tenant storefronts. Keep sizing and existing state classes. */
html[data-ui="graviti"] .graviti-ui :where(button, a, input[type="submit"], input[type="button"]):is(.bg-black, .bg-slate-800, .bg-slate-900, .bg-gray-800, .bg-gray-900).text-white {
  background-color: var(--ui-accent) !important;
  background-image: none;
  border-color: transparent !important;
  color: var(--ui-on-accent) !important;
}
html[data-ui="graviti"] .graviti-ui :where(button, a, input[type="submit"], input[type="button"]):is(.bg-black, .bg-slate-800, .bg-slate-900, .bg-gray-800, .bg-gray-900).text-white:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--ui-accent-hover) !important;
  color: var(--ui-on-accent) !important;
}
html[data-ui="graviti"] .graviti-ui :is(.btn, .ui-button):is(.bg-red-500, .bg-red-600, .bg-red-700, .bg-rose-600, .btn-danger) { --ui-button-fill: var(--ui-danger-fill); }
html[data-ui="graviti"] .graviti-ui :is(.btn, .ui-button):is(.bg-green-500, .bg-green-600, .bg-emerald-500, .bg-emerald-600, .btn-success) { --ui-button-fill: var(--ui-success-fill); }
html[data-ui="graviti"] .graviti-ui :is(.btn, .ui-button):is(.bg-amber-500, .bg-amber-600, .bg-yellow-500, .bg-yellow-600, .btn-warning) { --ui-button-fill: var(--ui-warning-fill); }
html[data-ui="graviti"] .graviti-ui :is(.btn, .ui-button):is(.bg-red-500, .bg-red-600, .bg-red-700, .bg-rose-600, .btn-danger, .bg-green-500, .bg-green-600, .bg-emerald-500, .bg-emerald-600, .btn-success, .bg-amber-500, .bg-amber-600, .bg-yellow-500, .bg-yellow-600, .btn-warning) {
  background-color: var(--ui-button-fill) !important;
  border-color: transparent !important;
  color: white !important;
}
html[data-ui="graviti"] .graviti-ui :is(.btn, .ui-button):active:not(:disabled) { box-shadow: inset 0 1px 2px rgb(0 0 0 / .09) !important; }
html[data-ui="graviti"] .graviti-ui :is(.btn-ghost, .btn-outline) { background-color: transparent; box-shadow: none; }
html[data-ui="graviti"] .graviti-ui .btn-ghost { border-color: transparent; }
html[data-ui="graviti"] .graviti-ui :is(button, .btn, .ui-button):disabled,
html[data-ui="graviti"] .graviti-ui :is(button, .btn, .ui-button)[aria-disabled="true"] {
  opacity: .48 !important;
  cursor: not-allowed;
  box-shadow: none !important;
  filter: none !important;
}
html[data-ui="graviti"] .graviti-ui :is(button, a, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--ui-primary-text);
  outline-offset: 3px;
}
html[data-ui="graviti"] .graviti-ui :is(.text-\[\#0054c2\], .text-primary, .text-brand) { color: var(--ui-primary-text) !important; }
html[data-ui="graviti"] .graviti-ui :is(.border-\[\#0054c2\], .border-primary, .border-brand) { border-color: var(--ui-primary-text) !important; }
html[data-ui="graviti"] .graviti-ui :is(.text-green-400, .text-green-500, .text-green-600, .text-green-700, .text-green-800, .text-emerald-400, .text-emerald-500, .text-emerald-600, .text-emerald-700, .text-emerald-800) { color: var(--ui-success) !important; }
html[data-ui="graviti"] .graviti-ui :is(.bg-green-50, .bg-green-100, .bg-emerald-50, .bg-emerald-100) { background-color: var(--ui-success-soft) !important; }
html[data-ui="graviti"] .graviti-ui :is(.text-amber-400, .text-amber-500, .text-amber-600, .text-amber-700, .text-amber-800, .text-yellow-600, .text-yellow-700) { color: var(--ui-warning) !important; }
html[data-ui="graviti"] .graviti-ui :is(.bg-amber-50, .bg-amber-100, .bg-yellow-50, .bg-yellow-100) { background-color: var(--ui-warning-soft) !important; }
html[data-ui="graviti"] .graviti-ui :is(.text-red-400, .text-red-500, .text-red-600, .text-red-700, .text-red-800, .text-rose-600, .text-rose-700) { color: var(--ui-danger) !important; }
html[data-ui="graviti"] .graviti-ui :is(.bg-red-50, .bg-red-100, .bg-rose-50, .bg-rose-100) { background-color: var(--ui-danger-soft) !important; }
html[data-ui="graviti"] .graviti-ui :is(.text-blue-500, .text-blue-600, .text-blue-700, .text-sky-600, .text-sky-700) { color: var(--ui-info) !important; }
html[data-ui="graviti"] .graviti-ui :is(.bg-blue-50, .bg-blue-100, .bg-sky-50, .bg-sky-100) { background-color: var(--ui-info-soft) !important; }
html[data-ui="graviti"] .graviti-ui :is(.btn-primary, .btn-brand, .bg-brand, .bg-primary, .bg-\[\#0054c2\], .bg-\[var\(--primary-color\)\]) :is(.text-white, .text-slate-100) { color: inherit !important; }

/* Keep checked chips and switches visible above neutral utility aliases. */
html[data-ui="graviti"] .graviti-ui .peer:checked ~ :is(.peer-checked\:bg-\[\#0054c2\], .peer-checked\:bg-\[var\(--primary-color\)\]) { background-color: var(--ui-primary) !important; }
html[data-ui="graviti"] .graviti-ui .peer:checked ~ .peer-checked\:border-\[var\(--primary-color\)\] { border-color: var(--ui-primary) !important; }
html[data-ui="graviti"] .graviti-ui .peer:checked ~ .peer-checked\:text-white { color: var(--ui-on-primary) !important; }
html[data-ui="graviti"] .graviti-ui .peer:checked ~ .peer-checked\:shadow-md { box-shadow: 0 0 0 3px var(--ui-focus) !important; }

/* Tables remain tables, including sticky headers and independent scroll.
   FullCalendar's tables are a layout engine and intentionally excluded. */
.graviti-ui :where(main, .ui-workspace) table:not(:where(.fc table, .ap-editor table)) { border-collapse: separate; border-spacing: 0; }
.graviti-ui :where(main, .ui-workspace) table:not(:where(.fc table, .ap-editor table)) :where(th, td) { border-color: var(--ui-border); }
.graviti-ui :where(main, .ui-workspace) table:not(:where(.fc table, .ap-editor table)) thead :where(th) {
  background-color: var(--ui-surface-subtle);
  color: var(--ui-text-secondary);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .055em;
  line-height: 1.5;
}
.graviti-ui :where(main, .ui-workspace) table:not(:where(.fc table, .ap-editor table)) tbody :where(td) { font-size: 13px; line-height: 1.5; }
.graviti-ui :where(main, .ui-workspace) table:not(:where(.fc table, .ap-editor table)) tbody tr { transition: background-color var(--ui-duration) var(--ui-ease); }
.graviti-ui :where(main, .ui-workspace) table:not(:where(.fc table, .ap-editor table)) tbody tr:hover { background-color: var(--ui-surface-hover); }
.graviti-ui .table :is(th, td) { border-width: 0 0 1px; padding: 12px 16px; }
.graviti-ui .table tbody tr:nth-child(odd) { background: transparent; }
.graviti-ui .table tbody tr:hover { background: var(--ui-surface-hover); }
.graviti-ui :where(.filters, .ui-toolbar) { gap: var(--ui-space-8); }
.graviti-ui :where(.pagination) { gap: var(--ui-space-8); color: var(--ui-text-secondary); }
.graviti-ui :where(.ui-empty-state, .empty-state) { color: var(--ui-text-muted); }

/* The same rail, pin preference, submenus and mobile navigation remain. */
html[data-ui="graviti"] .graviti-ui :is(.sidebar-inner, #superadmin-sidebar) { background: var(--ui-sidebar); border-color: var(--ui-border); }
.graviti-ui .sidebar-link, .graviti-ui .sidebar-submenu a,
.graviti-ui #superadmin-sidebar .sa-link { border-radius: var(--ui-radius-sm); }
.graviti-ui .sidebar-link { min-height: 36px; }
.graviti-ui .sidebar-group + .sidebar-group { margin-top: var(--ui-space-8); }
.graviti-ui .sidebar-footer { padding-top: var(--ui-space-12); }
.graviti-ui .sidebar-link.active { color: var(--sb-text-strong); }
.graviti-ui .sidebar-submenu a.active { background: var(--sb-selected-bg); color: var(--sb-text-strong); }
.graviti-ui .sidebar-trial { border-radius: var(--ui-radius-md); box-shadow: none; background: var(--ui-surface); border-color: var(--ui-border); }
.graviti-ui .sidebar-profile-avatar, .graviti-ui #superadmin-sidebar .sa-avatar { background: var(--ui-navigation-soft); color: var(--ui-navigation-text); }
.graviti-ui .sidebar-icon svg { stroke-width: 1.75; }
html[data-ui="graviti"][data-navigation-layout="horizontal"] .graviti-ui #sidebar .sidebar-inner {
  background: var(--ui-glass);
  backdrop-filter: blur(var(--ui-blur));
  -webkit-backdrop-filter: blur(var(--ui-blur));
  box-shadow: var(--ui-shadow-sm);
}
@media (min-width: 1025px) {
  html[data-ui="graviti"][data-navigation-layout="horizontal"] .graviti-ui .sidebar-group + .sidebar-group { margin-top: 0; }
  html[data-ui="graviti"][data-navigation-layout="horizontal"] .graviti-ui #sidebar .sidebar-submenu {
    background: var(--ui-glass);
    border-radius: var(--ui-radius-lg);
    border-color: var(--ui-border);
    box-shadow: var(--ui-shadow-md);
    backdrop-filter: blur(var(--ui-blur));
    -webkit-backdrop-filter: blur(var(--ui-blur));
  }
  html[data-ui="graviti"][data-navigation-layout="horizontal"] .graviti-ui #sidebar .sidebar-submenu a { border-radius: var(--ui-radius-sm); }
}
html[data-ui="graviti"] .graviti-ui :is(.mobile-nav, #superadmin-topbar) {
  background: var(--ui-glass) !important;
  border-color: var(--ui-border);
  backdrop-filter: blur(var(--ui-blur));
  -webkit-backdrop-filter: blur(var(--ui-blur));
}
.graviti-ui #superadmin-topbar { flex-shrink: 0; }
.graviti-ui .navigation-tooltip { background: var(--ui-brand-graviti); color: #fff; border-radius: var(--ui-radius-sm); box-shadow: var(--ui-shadow-sm); }
.graviti-ui .navigation-tooltip::before { background: var(--ui-brand-graviti); }

/* Overlays receive depth; inner surfaces stay almost opaque for legibility.
   Deliberately no display, positioning, z-index or transform changes. */
html[data-ui="graviti"] .graviti-ui :is(dialog, .modal-content, .modal-panel, .gv-confirm-box, .ui-dialog) {
  color: var(--ui-text-primary);
  border-radius: var(--ui-radius-lg) !important;
  border-color: var(--ui-border);
  background-color: var(--ui-surface);
  box-shadow: var(--ui-shadow-md);
}
html[data-ui="graviti"] .graviti-ui dialog::backdrop {
  background: var(--ui-overlay);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
html[data-ui="graviti"] .graviti-ui :is(.modal-overlay, #gv-confirm-overlay, #profile-overlay, .mobile-sidebar-overlay) {
  background-color: var(--ui-overlay);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.graviti-ui :is(.dropdown-menu, .ui-menu, [role="menu"]) {
  border-radius: var(--ui-radius-md);
  background-color: var(--ui-glass);
  border-color: var(--ui-border);
  box-shadow: var(--ui-shadow-md);
  backdrop-filter: blur(var(--ui-blur));
  -webkit-backdrop-filter: blur(var(--ui-blur));
}
html[data-ui="graviti"] .graviti-ui #profile-sidebar {
  --profile-bg: var(--ui-surface);
  --profile-card: var(--ui-surface-subtle);
  --profile-hover: var(--ui-surface-hover);
  --profile-border: var(--ui-border);
  --profile-text: var(--ui-text-primary);
  --profile-muted: var(--ui-text-secondary);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-md);
}
.graviti-ui #profile-sidebar :is(.profile-section, .profile-setting-group, .profile-disclosure) { border-radius: var(--ui-radius-md); }

/* Appearance: two inline segmented rows (mode and material), no dialog. */
.graviti-ui .ui-appearance { display: grid; gap: 2px; padding: 4px 0; }
.graviti-ui .ui-appearance-row { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 4px 2px; font-size: 12px; color: var(--ui-text-primary); }
.graviti-ui .ui-appearance-row > svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--ui-text-muted); }
.graviti-ui .ui-appearance-label { flex: 1; min-width: 0; }
.graviti-ui .ui-appearance-row .ui-theme-options { flex: 0 0 auto; width: min(156px, 58%); gap: 2px; padding: 3px; border-radius: 10px; }
.graviti-ui .ui-appearance-row .ui-theme-options button { min-height: 28px; padding: 4px 8px; border-radius: 7px; }
/* The modal drawer owns the screen edge: the floating assistant must not cover its controls. */
body.graviti-ui:has(#profile-sidebar[aria-hidden="false"]) #graviti-assistant .ga-launch { visibility: hidden; }
.graviti-ui .ui-theme-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-md); background: var(--ui-surface-subtle); }
.graviti-ui .ui-theme-options button { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 6px; border: 1px solid transparent; border-radius: var(--ui-radius-sm); background: transparent; color: var(--ui-text-secondary); font-size: 12px; cursor: pointer; }
.graviti-ui .ui-theme-options button:hover:not(:disabled) { background: var(--ui-surface-hover); }
.graviti-ui .ui-theme-options button[aria-pressed="true"] { background: var(--ui-surface); border-color: var(--ui-border-strong); box-shadow: var(--ui-shadow-sm); color: var(--ui-text-primary); }
.graviti-ui .ui-theme-options button:focus-visible { outline: 2px solid var(--ui-navigation-text); outline-offset: 2px; }
.graviti-ui .ui-theme-options button:disabled { opacity: .65; cursor: wait; }
.graviti-ui .ui-theme-status { margin: 6px 0 0; font-size: 11px; line-height: 1.5; color: var(--ui-text-secondary); }
.graviti-ui #profile-sidebar .profile-role { color: var(--ui-primary-text); }
html[data-ui="graviti"] .graviti-ui .gv-confirm-title { color: var(--ui-text-primary); }
html[data-ui="graviti"] .graviti-ui .gv-confirm-body { color: var(--ui-text-secondary); }
html[data-ui="graviti"] .graviti-ui .gv-confirm-btn { border-radius: var(--ui-radius-sm); min-height: var(--ui-control-height); }
html[data-ui="graviti"] .graviti-ui .gv-confirm-cancel { color: var(--ui-text-secondary); background: var(--ui-surface-subtle); }
html[data-ui="graviti"] .graviti-ui .gv-confirm-cancel:hover { background: var(--ui-surface-hover); }
html[data-ui="graviti"] .graviti-ui .gv-confirm-tone-primary .gv-confirm-icon { background: var(--ui-primary-soft); color: var(--ui-primary-text); }
html[data-ui="graviti"] .graviti-ui .gv-confirm-tone-primary .gv-confirm-ok { background: var(--ui-primary); color: var(--ui-on-primary); }
html[data-ui="graviti"] .graviti-ui .gv-confirm-tone-danger .gv-confirm-ok { background: var(--ui-danger-fill); color: white; }
html[data-ui="graviti"] .graviti-ui .gv-confirm-tone-warning .gv-confirm-ok { background: var(--ui-warning-fill); color: white; }
html[data-ui="graviti"] .graviti-ui .gv-confirm-tone-success .gv-confirm-ok { background: var(--ui-success-fill); color: white; }
html[data-ui="graviti"] .graviti-ui .gv-confirm-ok:hover { filter: brightness(.94); }

/* Affiliate shell is independent of styles.css. Keep its dimensions and
   mobile drawer while sharing the same neutral surfaces and typography. */
html[data-ui="graviti"] .graviti-affiliate #sidebar { background: var(--ui-sidebar); color: var(--ui-text-primary); border-color: var(--ui-border); }
html[data-ui="graviti"] .graviti-affiliate #sidebar > div { background: transparent; border-color: var(--ui-border); }
html[data-ui="graviti"] .graviti-affiliate #sidebar .sidebar-link { color: var(--ui-text-secondary); }
html[data-ui="graviti"] .graviti-affiliate #sidebar .sidebar-link.active { color: var(--ui-primary-text); background: var(--ui-primary-soft); }
html[data-ui="graviti"] .graviti-affiliate #sidebar .sidebar-link:hover { color: var(--ui-text-primary); background: var(--ui-surface-hover); }
html[data-ui="graviti"] .graviti-affiliate #sidebar .sidebar-link.active::before { background: var(--ui-primary-text); }
html[data-ui="graviti"] .graviti-affiliate .stat-card { border-radius: var(--ui-radius-lg); border-color: var(--ui-border); box-shadow: var(--ui-shadow-sm); }
html[data-ui="graviti"] .graviti-affiliate .stat-card:hover { transform: none; box-shadow: var(--ui-shadow-sm); }
html[data-ui="graviti"]:not(.dark) .graviti-affiliate #sidebar img[alt="Graviti"] { filter: none; }

/* Registration/onboarding intentionally remain light (existing flow). */
html[data-ui="graviti"] .graviti-auth :is(.login-page, .signup, .ob) {
  --ui-background: #f4f5f7;
  --ui-surface: #ffffff;
  --ui-surface-subtle: #f8f9fb;
  --ui-surface-hover: #eef1f5;
  --ui-border: #e2e6ed;
  --ui-border-strong: #c5ccd8;
  --ui-text-primary: #252b37;
  --ui-text-secondary: #596477;
  --ui-text-muted: #687487;
  --ui-primary: var(--ui-action-blue);
  --ui-primary-text: var(--ui-brand-graviti);
  --ui-primary-soft: color-mix(in srgb, var(--ui-brand-graviti) 8%, white);
  --ui-focus: color-mix(in srgb, var(--ui-brand-graviti) 18%, transparent);
  --ui-shadow-sm: 0 2px 6px -3px rgb(25 38 62 / .08);
  color-scheme: light;
  color: var(--ui-text-primary);
  background: var(--ui-background) !important;
}
html[data-ui="graviti"] .graviti-auth :is(.login-panel, .signup-left) { background: var(--ui-background); }
html[data-ui="graviti"] .graviti-auth :is(.login-title, .signup-title, .ob-title) { color: var(--ui-text-primary) !important; letter-spacing: -.04em; }
html[data-ui="graviti"] .graviti-auth .login-story { background: #0054c2; }
html[data-ui="graviti"] .graviti-auth :is(.login-story h2 span, .login-eyebrow) { color: var(--ui-brand-chat); }
html[data-ui="graviti"] .graviti-auth :is(.login-story-description, .login-story-footer) { color: #e0dde0; }
html[data-ui="graviti"] .graviti-auth :is(.signup-submit, .login-submit) { background: var(--ui-brand-chat); color: #122a1b; border-radius: var(--ui-radius-sm); box-shadow: var(--ui-shadow-sm); }
html[data-ui="graviti"] .graviti-auth :is(.signup-submit, .login-submit):hover { background: color-mix(in srgb, var(--ui-brand-chat) 87%, black); }
html[data-ui="graviti"] .graviti-auth .signup-right { background: var(--ui-brand-print); }
html[data-ui="graviti"] .graviti-auth :is(.ob-card, .ob-pill, .google-btn, .login-google) { border-radius: var(--ui-radius-md); border-color: var(--ui-border); box-shadow: var(--ui-shadow-sm); }
html[data-ui="graviti"] .graviti-auth :is(.ob-card, .ob-pill):hover { transform: none; border-color: var(--ui-primary-text); box-shadow: var(--ui-shadow-sm); }
html[data-ui="graviti"] .graviti-auth :is(.ob-card, .ob-pill).sel { border-color: var(--ui-primary-text); background-color: var(--ui-primary-soft) !important; box-shadow: 0 0 0 3px var(--ui-focus); }
html[data-ui="graviti"] .graviti-auth :is(.ob-card.sel .ob-ico, .ob-card:hover .ob-ico, .ob-pill.sel svg, .ob-pill:hover svg, .ob-kicker) { color: var(--ui-primary-text); }
html[data-ui="graviti"] .graviti-auth .ob-kicker { background: var(--ui-primary-soft); }
html[data-ui="graviti"] .graviti-auth .ob-progress > span { background: var(--ui-brand-chat); }

@media (min-width: 769px) {
  html[data-ui="graviti"] .graviti-ui ::-webkit-scrollbar { width: 9px; height: 9px; }
  html[data-ui="graviti"] .graviti-ui ::-webkit-scrollbar-track { background: transparent; }
  html[data-ui="graviti"] .graviti-ui ::-webkit-scrollbar-thumb { background: var(--ui-border-strong); border: 2px solid var(--ui-surface); border-radius: var(--ui-radius-pill); }
  html[data-ui="graviti"] .graviti-ui .sidebar-nav::-webkit-scrollbar { width: 5px; }
}
@media (max-width: 640px) {
  html[data-ui="graviti"] .theme { --fs-hero: 23px; }
  .graviti-ui .card { padding: var(--ui-space-16); }
  .graviti-ui :where(.form, .ui-form, #new-contact-form, #edit-contact-form) :where(input:not([type]), input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], select, textarea) { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-ui="graviti"] { --ui-duration: 0ms; }
  .graviti-ui :is(.btn, .card, .settings-card, .sidebar, .sidebar-inner, .dropdown-menu, dialog, .modal-content) { transition: none !important; }
}

/* Shared modal motion, reused from Products (transitions.dev). */
:root {
  --modal-open-dur: 250ms;
  --modal-close-dur: 150ms;
  --modal-scale: 0.96;
  --modal-scale-close: 0.96;
  --modal-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.t-modal {
  transform-origin: center;
  transform: scale(var(--modal-scale));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--modal-open-dur) var(--modal-ease),
    opacity   var(--modal-open-dur) var(--modal-ease);
  will-change: transform, opacity;
}
.t-modal.is-open {
  transform: scale(1);
  opacity: 1;
  pointer-events: auto;
}
.t-modal.is-closing {
  transform: scale(var(--modal-scale-close));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--modal-close-dur) var(--modal-ease),
    opacity   var(--modal-close-dur) var(--modal-ease);
}

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