/* 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; }

/* Produtos (GestorPrint, Veloja, Vechat): a cor principal vale no sistema
   inteiro. Com produto ativo o header emite data-ui-brand="product", então os
   acentos por rota acima não se aplicam. Valores espelham Brand::BRANDS. */
html[data-ui="graviti"][data-ui-product="gestorprint"] { --ui-product: #0074fc; --ui-product-text: #0059c7; --ui-product-text-dark: #7db6ff; --ui-on-product: #ffffff; --ui-product-mix: black; --ui-product-panel: #0074fc; }
html[data-ui="graviti"][data-ui-product="veloja"] { --ui-product: #a85dee; --ui-product-text: #8240b7; --ui-product-text-dark: #d0a0ff; --ui-on-product: #201029; --ui-product-mix: white; --ui-product-panel: #8a3fd1; }
html[data-ui="graviti"][data-ui-product="vechat"] { --ui-product: #22c55e; --ui-product-text: #15703a; --ui-product-text-dark: #4ade80; --ui-on-product: #0f2a1a; --ui-product-mix: black; --ui-product-panel: #15803d; }
html[data-ui="graviti"][data-ui-product] {
  --ui-action-blue: var(--ui-product);
  --ui-action-blue-hover: color-mix(in srgb, var(--ui-product) 87%, var(--ui-product-mix));
  --ui-primary: var(--ui-product);
  --ui-primary-text: var(--ui-product-text);
  --ui-on-primary: var(--ui-on-product);
  --ui-primary-hover-mix: var(--ui-product-mix);
  --ui-accent: var(--ui-product);
  --ui-accent-text: var(--ui-product-text);
  --ui-accent-hover: color-mix(in srgb, var(--ui-product) 87%, var(--ui-product-mix));
  --ui-on-accent: var(--ui-on-product);
  --ui-navigation-accent: var(--ui-product);
  --ui-navigation-text: var(--ui-product-text);
  --ui-field-focus: var(--ui-product);
}
html[data-ui="graviti"].dark[data-ui-product] {
  --ui-primary-text: var(--ui-product-text-dark);
  --ui-accent-text: var(--ui-product-text-dark);
  --ui-navigation-text: var(--ui-product-text-dark);
}

/* 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); }
/* Login, cadastro e onboarding do produto: painel e ações na cor da marca. */
html[data-ui="graviti"][data-ui-product] .graviti-auth {
  --ui-primary: var(--ui-product);
  --ui-primary-text: var(--ui-product-text);
  --ui-primary-soft: color-mix(in srgb, var(--ui-product) 10%, white);
  --ui-focus: color-mix(in srgb, var(--ui-product) 22%, transparent);
}
html[data-ui="graviti"][data-ui-product] .graviti-auth :is(.login-story, .signup-right) { background: var(--ui-product-panel); }
html[data-ui="graviti"][data-ui-product] .graviti-auth :is(.login-story h2 span, .login-eyebrow) { color: #ffffff; }
html[data-ui="graviti"][data-ui-product] .graviti-auth :is(.login-story-description, .login-story-footer) { color: rgb(255 255 255 / .86); }
/* GestorPrint, login: painel claro no estilo de www.gestorprint.com.br (grade sutil, brilho azul e
   destaque em degradê), com manchas de cor em movimento lento. O cadastro conserva o painel #0074FC. */
html[data-ui="graviti"][data-ui-product="gestorprint"] .graviti-auth .login-story { background: radial-gradient(ellipse 90% 46% at 50% 0%, #dcebff 0%, #dcebff00 72%), #f8fafe; border-left: 1px solid #e4ebf5; color: #0b1020; }
html[data-ui="graviti"][data-ui-product="gestorprint"] .graviti-auth .login-story::after { content: none; }
html[data-ui="graviti"][data-ui-product="gestorprint"] .graviti-auth .login-story-bg { display: block; position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
html[data-ui="graviti"][data-ui-product="gestorprint"] .graviti-auth .login-story-bg::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(#0b10200d 1px, transparent 1px), linear-gradient(90deg, #0b10200d 1px, transparent 1px); background-size: 48px 48px; background-position: center; -webkit-mask-image: radial-gradient(ellipse 78% 68% at 50% 42%, #000 28%, transparent 100%); mask-image: radial-gradient(ellipse 78% 68% at 50% 42%, #000 28%, transparent 100%); }
html[data-ui="graviti"][data-ui-product="gestorprint"] .graviti-auth .login-story-bg span { position: absolute; border-radius: 50%; filter: blur(72px); will-change: transform; animation: gp-login-drift 22s ease-in-out infinite alternate; }
html[data-ui="graviti"][data-ui-product="gestorprint"] .graviti-auth .login-story-bg span:nth-child(1) { width: 46%; aspect-ratio: 1; top: -12%; left: -10%; background: #0a9bff; opacity: .30; }
html[data-ui="graviti"][data-ui-product="gestorprint"] .graviti-auth .login-story-bg span:nth-child(2) { width: 42%; aspect-ratio: 1; top: 34%; right: -14%; background: #8b5cf6; opacity: .22; animation-duration: 28s; animation-delay: -9s; animation-direction: alternate-reverse; }
html[data-ui="graviti"][data-ui-product="gestorprint"] .graviti-auth .login-story-bg span:nth-child(3) { width: 38%; aspect-ratio: 1; bottom: -14%; left: 22%; background: #ec4899; opacity: .17; animation-duration: 34s; animation-delay: -17s; }
@keyframes gp-login-drift {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(9%, 7%, 0) scale(1.12); }
  100% { transform: translate3d(-6%, 13%, 0) scale(.94); }
}
@keyframes gp-login-sheen { to { background-position: 100% 50%; } }
@keyframes gp-login-pulse { 0%, 100% { box-shadow: 0 0 0 0 #0074fc59; } 50% { box-shadow: 0 0 0 6px #0074fc00; } }
html[data-ui="graviti"][data-ui-product="gestorprint"] .graviti-auth .login-story-logo { display: none; }
html[data-ui="graviti"][data-ui-product="gestorprint"] .graviti-auth .login-story-copy { margin: auto 0; max-width: 640px; }
html[data-ui="graviti"][data-ui-product="gestorprint"] .graviti-auth .login-story .login-eyebrow { display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px 7px 12px; border: 1px solid #0074fc2e; border-radius: 999px; background: #ffffffb8; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #0059c7; font-size: 11px; letter-spacing: .13em; box-shadow: 0 1px 2px #0b10200a; }
html[data-ui="graviti"][data-ui-product="gestorprint"] .graviti-auth .login-story .login-eyebrow::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #0074fc; flex-shrink: 0; animation: gp-login-pulse 2.6s ease-out infinite; }
html[data-ui="graviti"][data-ui-product="gestorprint"] .graviti-auth .login-story h2 { color: #0b1020; font-weight: 800; line-height: 1.08; letter-spacing: -.04em; text-wrap: initial; }
html[data-ui="graviti"][data-ui-product="gestorprint"] .graviti-auth .login-story h2 span { margin-top: 4px; padding-bottom: .08em; color: #0074fc; background: linear-gradient(90deg, #0a9bff 0%, #0074fc 18%, #8b5cf6 45%, #ec4899 72%, #f472b6 100%); background-size: 130% 100%; background-position: 0% 50%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: gp-login-sheen 9s ease-in-out infinite alternate; }
html[data-ui="graviti"][data-ui-product="gestorprint"] .graviti-auth .login-story-description { color: #475569; }
html[data-ui="graviti"][data-ui-product="gestorprint"] .graviti-auth .login-story-highlights li { border-color: #dbe4f0; background: #ffffffc7; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #1e293b; box-shadow: 0 1px 2px #0b10200a; }
html[data-ui="graviti"][data-ui-product="gestorprint"] .graviti-auth .login-story-highlights svg { color: #0074fc; }
html[data-ui="graviti"][data-ui-product="gestorprint"] .graviti-auth .login-story-footer { color: #64748b; }
html[data-ui="graviti"][data-ui-product="gestorprint"] .graviti-auth .login-story-footer::before { background: linear-gradient(90deg, #0074fc, #ec4899); }
/* Painel estreito: a etiqueta pode ocupar duas linhas, então deixa de ser pílula. */
@media (max-width: 1000px) {
  html[data-ui="graviti"][data-ui-product="gestorprint"] .graviti-auth .login-story .login-eyebrow { font-size: 10px; letter-spacing: .08em; line-height: 1.5; border-radius: 14px; }
}
/* Entre 761 e 1000 px o painel tem 48% da tela: a frase em degradê precisa caber em uma linha. */
@media (min-width: 761px) and (max-width: 1000px) {
  html[data-ui="graviti"][data-ui-product="gestorprint"] .graviti-auth .login-story h2 { font-size: clamp(23px, 3.1vw, 31px); }
}
@media (prefers-reduced-motion: reduce) {
  html[data-ui="graviti"][data-ui-product="gestorprint"] .graviti-auth .login-story :is(.login-story-bg span, h2 span) { animation: none; }
  html[data-ui="graviti"][data-ui-product="gestorprint"] .graviti-auth .login-story .login-eyebrow::before { animation: none; }
}
@media (forced-colors: active) {
  html[data-ui="graviti"][data-ui-product="gestorprint"] .graviti-auth .login-story h2 span { -webkit-text-fill-color: currentColor; background: none; }
}
/* Veloja, login: painel claro no estilo de www.veloja.com.br (grade de pontos, brilho roxo e etiqueta em
   pílula) com a ilustração de partials/login_story/veloja.php. Estado final é o padrão de cada regra e os
   keyframes só definem o "from": com movimento reduzido nada fica invisível. O cadastro conserva o painel roxo. */
html[data-ui="graviti"][data-ui-product="veloja"] .graviti-auth .login-story { background: radial-gradient(ellipse 95% 50% at 50% 0%, #eddcff 0%, #eddcff00 72%), #fbf9ff; border-left: 1px solid #ece6f7; color: #140a24; }
html[data-ui="graviti"][data-ui-product="veloja"] .graviti-auth .login-story::after { content: none; }
html[data-ui="graviti"][data-ui-product="veloja"] .graviti-auth .login-story-bg { display: block; position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
html[data-ui="graviti"][data-ui-product="veloja"] .graviti-auth .login-story-bg::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(#3b1d6b2e 1px, transparent 1.4px); background-size: 22px 22px; background-position: center; -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 25%, transparent 100%); mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 25%, transparent 100%); }
html[data-ui="graviti"][data-ui-product="veloja"] .graviti-auth .login-story-bg span { position: absolute; border-radius: 50%; filter: blur(76px); will-change: transform; animation: gp-login-drift 24s ease-in-out infinite alternate; }
html[data-ui="graviti"][data-ui-product="veloja"] .graviti-auth .login-story-bg span:nth-child(1) { width: 48%; aspect-ratio: 1; top: -14%; right: -8%; background: #a85dee; opacity: .30; }
html[data-ui="graviti"][data-ui-product="veloja"] .graviti-auth .login-story-bg span:nth-child(2) { width: 40%; aspect-ratio: 1; top: 40%; left: -16%; background: #ec4899; opacity: .13; animation-duration: 30s; animation-delay: -10s; animation-direction: alternate-reverse; }
html[data-ui="graviti"][data-ui-product="veloja"] .graviti-auth .login-story-bg span:nth-child(3) { width: 40%; aspect-ratio: 1; bottom: -16%; right: 8%; background: #6366f1; opacity: .16; animation-duration: 36s; animation-delay: -18s; }
@keyframes vl-login-rise { from { opacity: 0; transform: translate3d(0, 16px, 0); } }
@keyframes vl-login-reveal { from { clip-path: inset(0 100% 0 0); } }
@keyframes vl-login-pop { from { opacity: 0; transform: scale(0); } }
@keyframes vl-login-float { to { transform: translate3d(0, -7px, 0); } }
@keyframes vl-login-pulse { 0%, 100% { box-shadow: 0 0 0 0 var(--vl-pulse, #a85dee66); } 50% { box-shadow: 0 0 0 6px #a85dee00; } }
@keyframes vl-login-toast { 0% { opacity: 0; transform: translate3d(0, 12px, 0) scale(.96); } 4%, 30% { opacity: 1; transform: none; } 34%, 100% { opacity: 0; transform: translate3d(0, -10px, 0) scale(.98); } }
html[data-ui="graviti"][data-ui-product="veloja"] .graviti-auth .login-story-logo { display: none; }
html[data-ui="graviti"][data-ui-product="veloja"] .graviti-auth .login-story-copy { margin: auto 0; padding: 40px 0; max-width: 720px; }
html[data-ui="graviti"][data-ui-product="veloja"] .graviti-auth .login-story-copy > *, html[data-ui="graviti"][data-ui-product="veloja"] .graviti-auth .login-story-footer { animation: vl-login-rise .8s cubic-bezier(.2, .7, .2, 1) both; }
html[data-ui="graviti"][data-ui-product="veloja"] .graviti-auth .login-story-copy > h2 { animation-delay: .08s; }
html[data-ui="graviti"][data-ui-product="veloja"] .graviti-auth .login-story-copy > .login-story-description { animation-delay: .16s; }
html[data-ui="graviti"][data-ui-product="veloja"] .graviti-auth .login-story-copy > .login-story-visual { animation-delay: .28s; }
html[data-ui="graviti"][data-ui-product="veloja"] .graviti-auth .login-story-footer { animation-delay: .4s; }
html[data-ui="graviti"][data-ui-product="veloja"] .graviti-auth .login-story .login-eyebrow { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 22px; padding: 7px 14px 7px 12px; border: 1px solid #a85dee33; border-radius: 999px; background: #ffffffc2; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #4a3a63; font-size: 11px; letter-spacing: .14em; box-shadow: 0 1px 2px #140a240a; }
html[data-ui="graviti"][data-ui-product="veloja"] .graviti-auth .login-story .login-eyebrow::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #a85dee; flex-shrink: 0; animation: vl-login-pulse 2.6s ease-out infinite; }
html[data-ui="graviti"][data-ui-product="veloja"] .graviti-auth .login-story h2 { color: #140a24; font-size: clamp(28px, 2.85vw, 52px); font-weight: 800; line-height: 1.1; letter-spacing: -.045em; text-wrap: initial; }
html[data-ui="graviti"][data-ui-product="veloja"] .graviti-auth .login-story h2 span { margin-top: 4px; padding-bottom: .1em; color: #8b3fe0; background: linear-gradient(90deg, #a85dee 0%, #7c3aed 35%, #c026d3 70%, #ec4899 100%); background-size: 140% 100%; background-position: 0% 50%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: gp-login-sheen 9s ease-in-out infinite alternate; }
html[data-ui="graviti"][data-ui-product="veloja"] .graviti-auth .login-story-description { margin-top: 22px; max-width: 470px; line-height: 1.7; color: #5b5470; }
html[data-ui="graviti"][data-ui-product="veloja"] .graviti-auth .login-story-footer { color: #6f6885; }
html[data-ui="graviti"][data-ui-product="veloja"] .graviti-auth .login-story-footer::before { background: linear-gradient(90deg, #a85dee, #ec4899); }
html[data-ui="graviti"][data-ui-product="veloja"] .graviti-auth .login-story-visual { position: relative; margin-top: 36px; max-width: 520px; padding: 0 64px 48px 0; }
html[data-ui="graviti"][data-ui-product="veloja"] .graviti-auth .lsv-card { padding: 18px 20px 16px; border: 1px solid #ece6f7; border-radius: 18px; background: #ffffffe6; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 28px 56px -28px #6d28d94d, 0 2px 6px #140a240a; animation: vl-login-float 7s ease-in-out infinite alternate; }
html[data-ui="graviti"][data-ui-product="veloja"] .graviti-auth .lsv-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; font-weight: 600; color: #5b5470; }
html[data-ui="graviti"][data-ui-product="veloja"] .graviti-auth .lsv-live { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 700; letter-spacing: .12em; color: #6f6885; }
html[data-ui="graviti"][data-ui-product="veloja"] .graviti-auth .lsv-live i { --vl-pulse: #10b98166; width: 6px; height: 6px; border-radius: 50%; background: #10b981; animation: vl-login-pulse 2s ease-out infinite; }
html[data-ui="graviti"][data-ui-product="veloja"] .graviti-auth .lsv-amount { display: flex; align-items: center; gap: 10px; margin: 6px 0 0; font-size: 30px; font-weight: 800; letter-spacing: -.04em; line-height: 1.2; color: #140a24; font-variant-numeric: tabular-nums; }
html[data-ui="graviti"][data-ui-product="veloja"] .graviti-auth .lsv-amount em { padding: 3px 8px; border-radius: 999px; background: #dcfce7; color: #15803d; font-size: 11px; font-style: normal; font-weight: 700; letter-spacing: 0; }
html[data-ui="graviti"][data-ui-product="veloja"] .graviti-auth .lsv-chart { position: relative; height: 68px; margin: 8px 0 0; }
html[data-ui="graviti"][data-ui-product="veloja"] .graviti-auth .lsv-chart svg { display: block; width: 100%; height: 100%; overflow: visible; animation: vl-login-reveal 2s .7s cubic-bezier(.4, 0, .2, 1) both; }
html[data-ui="graviti"][data-ui-product="veloja"] .graviti-auth .lsv-point { position: absolute; right: -4px; top: calc(15% - 4px); width: 9px; height: 9px; border: 2px solid #fff; border-radius: 50%; background: #a85dee; animation: vl-login-pop .4s 2.6s cubic-bezier(.3, 1.6, .5, 1) both, vl-login-pulse 2.4s 3s ease-out infinite; }
html[data-ui="graviti"][data-ui-product="veloja"] .graviti-auth .lsv-channels { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; }
html[data-ui="graviti"][data-ui-product="veloja"] .graviti-auth .lsv-channels li { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid #ece6f7; border-radius: 999px; background: #faf7ff; font-size: 11px; font-weight: 600; line-height: 1.2; color: #4a3a63; }
html[data-ui="graviti"][data-ui-product="veloja"] .graviti-auth .lsv-channels li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #a85dee; }
html[data-ui="graviti"][data-ui-product="veloja"] .graviti-auth .lsv-feed { position: absolute; right: 0; bottom: 0; width: 248px; height: 60px; animation: vl-login-float 6s -2s ease-in-out infinite alternate; }
html[data-ui="graviti"][data-ui-product="veloja"] .graviti-auth .lsv-toast { position: absolute; inset: 0; display: flex; align-items: center; gap: 11px; padding: 0 14px; border: 1px solid #ece6f7; border-radius: 14px; background: #fff; box-shadow: 0 18px 36px -16px #6d28d959, 0 2px 6px #140a240f; opacity: 0; animation: vl-login-toast 12s 1.4s ease-in-out infinite both; }
html[data-ui="graviti"][data-ui-product="veloja"] .graviti-auth .lsv-toast:first-child { opacity: 1; }
html[data-ui="graviti"][data-ui-product="veloja"] .graviti-auth .lsv-toast:nth-child(2) { animation-delay: 5.4s; }
html[data-ui="graviti"][data-ui-product="veloja"] .graviti-auth .lsv-toast:nth-child(3) { animation-delay: 9.4s; }
html[data-ui="graviti"][data-ui-product="veloja"] .graviti-auth .lsv-icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: #a85dee; color: #fff; flex-shrink: 0; }
html[data-ui="graviti"][data-ui-product="veloja"] .graviti-auth .lsv-icon svg { width: 17px; height: 17px; }
html[data-ui="graviti"][data-ui-product="veloja"] .graviti-auth .lsv-toast b { display: block; font-size: 13px; font-weight: 700; line-height: 1.3; color: #140a24; white-space: nowrap; }
html[data-ui="graviti"][data-ui-product="veloja"] .graviti-auth .lsv-toast small { display: block; font-size: 11px; line-height: 1.4; color: #6f6885; white-space: nowrap; }
/* Entre 761 e 1000 px o painel tem 48% da tela: cada frase do título precisa caber em uma linha. */
@media (min-width: 761px) and (max-width: 1000px) {
  html[data-ui="graviti"][data-ui-product="veloja"] .graviti-auth .login-story h2 { font-size: clamp(20px, 2.7vw, 28px); }
  html[data-ui="graviti"][data-ui-product="veloja"] .graviti-auth .login-story-visual { padding-right: 24px; }
}
@media (max-width: 1000px) {
  html[data-ui="graviti"][data-ui-product="veloja"] .graviti-auth .login-story .login-eyebrow { font-size: 10px; letter-spacing: .08em; line-height: 1.5; border-radius: 14px; }
}
@media (max-width: 760px) {
  html[data-ui="graviti"][data-ui-product="veloja"] .graviti-auth .login-story-copy { padding: 0 0 28px; }
  html[data-ui="graviti"][data-ui-product="veloja"] .graviti-auth .login-story h2 { font-size: clamp(24px, 6.4vw, 34px); text-wrap: balance; }
  html[data-ui="graviti"][data-ui-product="veloja"] .graviti-auth .login-story-visual { margin-top: 28px; padding-right: 20px; }
  html[data-ui="graviti"][data-ui-product="veloja"] .graviti-auth .lsv-amount { font-size: 26px; }
}
/* Tela baixa (notebook): a ilustração encolhe para o painel não ganhar rolagem. */
@media (min-width: 761px) and (max-height: 720px) {
  html[data-ui="graviti"][data-ui-product="veloja"] .graviti-auth .login-story-copy { padding: 20px 0; }
  html[data-ui="graviti"][data-ui-product="veloja"] .graviti-auth .login-story-visual { margin-top: 24px; }
  html[data-ui="graviti"][data-ui-product="veloja"] .graviti-auth .lsv-channels { display: none; }
  html[data-ui="graviti"][data-ui-product="veloja"] .graviti-auth .lsv-chart { height: 52px; }
}
/* O "* { animation: none }" do login não alcança pseudo-elementos. */
@media (prefers-reduced-motion: reduce) {
  html[data-ui="graviti"][data-ui-product="veloja"] .graviti-auth .login-story .login-eyebrow::before { animation: none; }
}
@media (forced-colors: active) {
  html[data-ui="graviti"][data-ui-product="veloja"] .graviti-auth .login-story h2 span { -webkit-text-fill-color: currentColor; background: none; }
}
html[data-ui="graviti"][data-ui-product] .graviti-auth :is(.signup-submit, .login-submit) { background: var(--ui-product); color: var(--ui-on-product); }
html[data-ui="graviti"][data-ui-product] .graviti-auth :is(.signup-submit, .login-submit):hover { background: color-mix(in srgb, var(--ui-product) 87%, var(--ui-product-mix)); }
html[data-ui="graviti"][data-ui-product] .graviti-auth .ob-progress > span { background: var(--ui-product); }

@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; }
}