/*
 * Streamd4y UI system
 * Shared visual primitives for public, client, Studio and administration.
 * Loaded after feature styles and before the typography contract.
 */
:root {
  --primary: #0062e8;
  --ui-accent: #008cff;
  --ui-accent-bright: #66c2ff;
  --ui-accent-strong: #0062e8;
  --ui-accent-hover: #004cc2;
  --ui-accent-content: #4db2ff;
  --ui-on-accent: #ffffff;
  --ui-label-accent-start: #008cff;
  --ui-label-accent-end: #20c5ff;
  --ui-accent-soft: rgba(0, 140, 255, .23);
  --ui-accent-edge: rgba(77, 178, 255, .58);
  --ui-cyan: #38bdf8;
  --ui-blue: #008cff;
  --console-blue: var(--ui-blue);
  --v2-blue: var(--ui-blue);
  --ui-indigo: #6366f1;
  --ui-violet: #8b5cf6;
  --studio-action-strong: #7c3aed;
  --studio-action-hover: #6d28d9;
  --ui-hero-gradient-start: #38bdf8;
  --ui-hero-gradient-cyan-blue: #00a2ff;
  --ui-hero-gradient-blue: #0077ff;
  --ui-hero-gradient-indigo: #5b63f0;
  --ui-hero-gradient-end: #9568f7;
  --ui-teal: #2dd4bf;
  --ui-amber: #f59e0b;
  --ui-surface: #08101d;
  --ui-surface-raised: #101a2c;
  --ui-surface-soft: #0a1323;
  --ui-navigation-surface: #0a1323;
  --ui-control: #080f1b;
  --ui-chroma-surface: 5%;
  --ui-chroma-card: 8%;
  --ui-chroma-metric: 13%;
  --ui-chroma-hover: 16%;
  --ui-chroma-secondary: 3%;
  --ui-support-surface-accent: 4%;
  --ui-support-edge-accent: 11%;
  --ui-edge: rgba(110, 125, 151, .24);
  --ui-edge-strong: rgba(59, 166, 255, .74);
  --ui-edge-inner: rgba(110, 125, 151, .18);
  --ui-edge-soft: rgba(110, 125, 151, .12);
  --ui-edge-tonal: color-mix(in srgb, var(--ui-surface-raised) 92%, var(--ui-edge-strong) 8%);
  --ui-scrim: rgba(2, 6, 18, .52);
  --ui-scrim-fallback: rgba(2, 6, 18, .78);
  --ui-backdrop-filter: blur(16px) saturate(1.12);
  --ui-shadow-card: 0 12px 28px rgba(3, 8, 17, .24), inset 0 1px 0 rgba(255, 255, 255, .025);
  --ui-shadow-float: 0 18px 42px rgba(3, 8, 17, .34), inset 0 1px 0 rgba(255, 255, 255, .04);
  --ui-shadow-modal: 0 36px 110px rgba(3, 8, 17, .52), inset 0 1px 0 rgba(255, 255, 255, .04);
  --ui-form-shadow: 0 2px 8px rgba(2, 8, 20, .14), inset 0 1px 0 rgba(255, 255, 255, .025);
  --ui-radius-control: 11px;
  --ui-radius-card: 15px;
  --ui-radius-panel: 18px;
  --ui-status-label-width: 114px;
  --ui-mobile-record-status-width: 128px;
  --ui-mobile-record-rich-status-width: clamp(118px, 32vw, 164px);
  --ui-mobile-record-logo-offset: 42px;
  --ui-mobile-record-avatar-offset: 44px;
  --ui-mobile-record-logo-shift: 6px;
  --ui-form-focus-width: 1px;
  /* Focus stays visible without turning a control into a second accent surface. */
  --ui-form-focus-color: color-mix(in srgb, var(--ui-accent-content) 14%, transparent);
  --ui-focus-edge: color-mix(in srgb, var(--ui-accent-content) 58%, var(--ui-edge));
  --ui-priority-line-width: 64px;
  --ui-priority-line-height: 2px;
  --ui-fast: 160ms;
  --ui-normal: 240ms;
  --ui-ease: cubic-bezier(.2, .8, .2, 1);
  --ui-z-nav: 40;
  --ui-z-modal: 60;
  --ui-z-popover: 70;
  --ui-z-toast: 80;
}

/* Global text-scale containment: labels may grow and wrap, but controls keep
 * their assigned layout space instead of hiding meaningful words. */
body:is(.shell-body, .public-body, .admin-auth-body) :is(.button, .badge, .ui-status-label) {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  white-space: normal;
}

body:is(.shell-body, .public-body, .admin-auth-body) :is(.button, .badge, .ui-status-label) > :not(.icon) {
  min-width: 0;
  max-width: 100%;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  white-space: normal;
}

body:is(.shell-body, .public-body, .admin-auth-body) :is(.form-actions, .table-actions, .panel-head, .panel-body, .card-head, .card-body, .data-table, .settings-action-card) {
  min-width: 0;
}

@media (max-width: 760px) {
  body:is(.shell-body, .public-body, .admin-auth-body) .modal .form-actions .button {
    min-width: 0;
    max-width: 100%;
  }
}

.area-app {
  --nav-accent: var(--ui-blue);
  --nav-accent-soft: rgba(0, 140, 255, .23);
  --nav-accent-edge: rgba(77, 178, 255, .46);
}

.area-studio {
  --ui-accent: #8b5cf6;
  --ui-accent-bright: #a78bfa;
  --ui-accent-strong: #7c3aed;
  --ui-accent-hover: #6d28d9;
  --ui-accent-content: #9568f7;
  --ui-label-accent-start: #9568f7;
  --ui-label-accent-end: #6366f1;
  --ui-accent-soft: rgba(139, 92, 246, .17);
  --ui-accent-edge: rgba(167, 139, 250, .43);
}

.area-admin,
.admin-auth-body {
  --ui-accent: #7c3aed;
  --ui-accent-bright: #a78bfa;
  --ui-accent-strong: #6d28d9;
  --ui-accent-hover: #5b21b6;
  --ui-accent-content: #9568f7;
  --ui-label-accent-start: #9568f7;
  --ui-label-accent-end: #6d28d9;
  --ui-accent-soft: rgba(124, 58, 237, .17);
  --ui-accent-edge: rgba(167, 139, 250, .42);
}

html[data-theme="light"] {
  --primary: #0057c2;
  --ui-accent-content: #0057c2;
  --ui-hero-gradient-start: #0284c7;
  --ui-hero-gradient-cyan-blue: #0078da;
  --ui-hero-gradient-blue: #005fd4;
  --ui-hero-gradient-indigo: #4f46cf;
  --ui-hero-gradient-end: #6d28d9;
  --ui-surface: #ffffff;
  --ui-surface-raised: #f7faff;
  --ui-surface-soft: #fbfdff;
  --ui-navigation-surface: #ffffff;
  --ui-control: #f6f9fd;
  --ui-edge: rgba(71, 85, 105, .26);
  --ui-edge-strong: rgba(0, 98, 232, .58);
  --ui-edge-inner: rgba(71, 85, 105, .19);
  --ui-edge-soft: rgba(71, 85, 105, .14);
  --ui-support-surface-accent: 2%;
  --ui-support-edge-accent: 8%;
  --ui-scrim: rgba(15, 23, 42, .38);
  --ui-scrim-fallback: rgba(15, 23, 42, .62);
  --ui-shadow-card: 0 12px 30px rgba(30, 64, 175, .065), inset 0 1px 0 rgba(255, 255, 255, .8);
  --ui-shadow-float: 0 24px 60px rgba(30, 64, 175, .12), inset 0 1px 0 rgba(255, 255, 255, .9);
  --ui-shadow-modal: 0 34px 100px rgba(15, 23, 42, .24), inset 0 1px 0 rgba(255, 255, 255, .95);
  --ui-form-shadow: 0 2px 8px rgba(15, 23, 42, .05), inset 0 1px 0 rgba(255, 255, 255, .72);
}

html[data-theme="light"] .area-studio,
html[data-theme="light"] :is(.area-admin, .admin-auth-body) {
  --ui-accent-content: #6d28d9;
}

/*
 * Internal workspaces receive a quiet, directional depth cue from the lower-right
 * corner. Public marketing surfaces intentionally keep the neutral shadow tokens.
 */
.shell-body,
.admin-auth-body {
  --ui-shadow-corner: 10px 15px 30px -20px rgba(3, 8, 17, .76);
}

html[data-theme="light"] .shell-body,
html[data-theme="light"] .admin-auth-body {
  --ui-shadow-corner: 10px 15px 30px -20px rgba(15, 23, 42, .30);
}

/* Universal interaction contract. */
:where(a, button, summary, [role="button"], [tabindex]:not(input):not(select):not(textarea)):focus-visible {
  outline: 2px solid var(--ui-accent-content);
  outline-offset: 2px;
}

:where(button, input, select, textarea):disabled,
:where(.button, .icon-button)[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: .48;
  transform: none !important;
  box-shadow: none !important;
}

:where(button, .button, .icon-button, summary, [role="button"]) {
  touch-action: manipulation;
}

::selection {
  color: #fff;
  background: color-mix(in srgb, var(--ui-accent) 72%, transparent);
}

/* Shared structural surfaces. Explicit specificity makes this the actual system layer. */
.shell-body .panel,
.shell-body .stat-card,
.shell-body .credential-vault,
.shell-body .profile-card,
.shell-body .security-form-panel,
.shell-body .settings-hub,
.shell-body .settings-action-card,
.shell-body .template-card,
.shell-body .status-card,
.shell-body .payment-context,
.shell-body .payment-card,
.shell-body .console-hero,
.public-body .auth-card,
.public-body .auth-shell,
.admin-auth-body .admin-login-card {
  border: 1px solid var(--ui-edge) !important;
  border-radius: var(--ui-radius-card) !important;
  background:
    radial-gradient(440px 210px at 0 0, color-mix(in srgb, var(--ui-accent) var(--ui-chroma-surface), transparent), transparent 74%),
    radial-gradient(320px 180px at 100% 100%, color-mix(in srgb, var(--ui-violet) var(--ui-chroma-secondary), transparent), transparent 78%),
    linear-gradient(145deg, var(--ui-surface-raised) 0%, var(--ui-surface) 76%, var(--ui-surface-soft) 100%) !important;
  box-shadow: var(--ui-shadow-card) !important;
}

.shell-body .page-content > .page-head {
  border: 1px solid var(--ui-edge) !important;
  background:
    radial-gradient(400px 170px at 100% 0, color-mix(in srgb, var(--ui-violet) 12%, transparent), transparent 74%),
    radial-gradient(280px 150px at 0 100%, color-mix(in srgb, var(--ui-accent) 7%, transparent), transparent 78%),
    linear-gradient(145deg, var(--ui-surface-raised), var(--ui-surface) 78%) !important;
  box-shadow: var(--ui-shadow-card) !important;
}

/* Metrics share depth, while a low-intensity semantic tint makes each signal scannable. */
.shell-body .stat-grid .metric-card,
html[data-theme="light"] .shell-body .stat-grid .metric-card {
  border: 1px solid color-mix(in srgb, var(--metric-accent) 36%, var(--ui-edge)) !important;
  background:
    radial-gradient(360px 210px at 0 0, color-mix(in srgb, var(--metric-accent) var(--ui-chroma-metric), transparent), transparent 72%),
    radial-gradient(230px 150px at 100% 100%, color-mix(in srgb, var(--metric-accent) var(--ui-chroma-secondary), transparent), transparent 80%),
    linear-gradient(145deg, var(--ui-surface-raised), var(--ui-surface) 74%) !important;
  box-shadow: var(--ui-shadow-corner), 0 7px 20px rgba(3, 8, 17, .16), inset 0 1px 0 color-mix(in srgb, var(--metric-accent) 11%, transparent) !important;
}

.shell-body .stat-grid .metric-card:hover {
  border-color: color-mix(in srgb, var(--metric-accent) 54%, var(--ui-edge)) !important;
  background:
    radial-gradient(380px 220px at 0 0, color-mix(in srgb, var(--metric-accent) var(--ui-chroma-hover), transparent), transparent 72%),
    radial-gradient(250px 160px at 100% 100%, color-mix(in srgb, var(--metric-accent) 10%, transparent), transparent 80%),
    linear-gradient(145deg, var(--ui-surface-raised), var(--ui-surface) 74%) !important;
  box-shadow: var(--ui-shadow-float) !important;
  transform: translateY(-1px);
}

.shell-body .stat-grid .metric-card > strong:not(.system-state) {
  color: var(--metric-accent);
  text-shadow: none;
}

.shell-body .stat-grid .metric-card .stat-label {
  color: var(--text);
}

.shell-body .stat-grid .metric-card .metric-icon {
  color: var(--metric-accent);
  border-color: color-mix(in srgb, var(--metric-accent) 50%, transparent) !important;
  background:
    linear-gradient(color-mix(in srgb, var(--metric-accent) 22%, transparent), color-mix(in srgb, var(--metric-accent) 22%, transparent)),
    var(--ui-surface-raised) !important;
}

.shell-body .console-hero {
  border-color: color-mix(in srgb, var(--ui-cyan) 32%, var(--ui-edge)) !important;
  background:
    radial-gradient(640px 260px at 0 0, color-mix(in srgb, var(--ui-cyan) 15%, transparent), transparent 74%),
    radial-gradient(500px 250px at 100% 100%, color-mix(in srgb, var(--ui-indigo) 13%, transparent), transparent 78%),
    linear-gradient(110deg, var(--ui-surface-raised), var(--ui-surface) 70%) !important;
}

.shell-body .console-hero .hero-signal {
  border-left-color: color-mix(in srgb, var(--ui-teal) 26%, var(--ui-edge-soft));
  background:
    radial-gradient(210px 135px at 50% 0, color-mix(in srgb, var(--ui-teal) 14%, transparent), transparent 78%),
    color-mix(in srgb, var(--ui-surface-raised) 84%, transparent);
}

.shell-body .console-hero .signal-radar,
.shell-body.area-admin .console-hero .signal-radar {
  border-color: color-mix(in srgb, var(--ui-cyan) 44%, var(--ui-edge));
  background:
    linear-gradient(color-mix(in srgb, var(--ui-cyan) 22%, transparent), color-mix(in srgb, var(--ui-cyan) 22%, transparent)),
    var(--ui-surface-raised);
  box-shadow: 0 12px 28px rgba(3, 8, 17, .22);
}

.shell-body.area-studio .console-hero,
.shell-body.area-admin .console-hero {
  border-color: color-mix(in srgb, var(--ui-violet) 42%, var(--ui-edge)) !important;
  background:
    radial-gradient(540px 260px at 100% 0, color-mix(in srgb, var(--ui-violet) 18%, transparent), transparent 74%),
    radial-gradient(460px 250px at 0 100%, color-mix(in srgb, var(--ui-indigo) 11%, transparent), transparent 78%),
    linear-gradient(145deg, var(--ui-surface-raised), var(--ui-surface) 72%) !important;
}

.shell-body.area-admin .console-hero .hero-signal {
  border-left-color: color-mix(in srgb, var(--ui-violet) 28%, var(--ui-edge-soft));
  background:
    radial-gradient(210px 135px at 50% 0, color-mix(in srgb, var(--ui-violet) 16%, transparent), transparent 78%),
    color-mix(in srgb, var(--ui-surface-raised) 84%, transparent);
}

.shell-body.area-admin .console-hero .signal-radar {
  border-color: color-mix(in srgb, var(--ui-violet) 48%, var(--ui-edge));
  background:
    linear-gradient(color-mix(in srgb, var(--ui-violet) 24%, transparent), color-mix(in srgb, var(--ui-violet) 24%, transparent)),
    var(--ui-surface-raised);
}

.shell-body .metric-card::after {
  display: none !important;
}

/* Nested cards keep a clear semantic color without competing with their parent. */
.shell-body .business-facts-grid > div,
.shell-body .export-card,
.shell-body .renewal-summary article,
.shell-body .studio-template-card,
.shell-body .settings-action-card,
.shell-body .theme-choice label > span,
.shell-body .business-logo-field,
.shell-body .session-list,
.shell-body .period-option span,
.shell-body .plan-choice {
  --ui-item-accent: var(--ui-cyan);
  border: 1px solid color-mix(in srgb, var(--ui-item-accent) 30%, var(--ui-edge-inner)) !important;
  background:
    radial-gradient(250px 150px at 0 0, color-mix(in srgb, var(--ui-item-accent) var(--ui-chroma-card), transparent), transparent 74%),
    radial-gradient(190px 120px at 100% 100%, color-mix(in srgb, var(--ui-item-accent) 5%, transparent), transparent 80%),
    linear-gradient(125deg, var(--ui-surface-raised), var(--ui-surface-soft) 72%) !important;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ui-item-accent) 6%, transparent);
}

.shell-body .business-facts-grid > div:nth-child(2),
.shell-body .export-card:nth-child(4n + 2),
.shell-body .settings-action-card:nth-child(4n + 2) { --ui-item-accent: var(--ui-teal); }

.shell-body .business-facts-grid > div:nth-child(3),
.shell-body .export-card:nth-child(4n + 3),
.shell-body .settings-action-card:nth-child(4n + 3),
.shell-body .studio-template-card { --ui-item-accent: var(--ui-violet); }

.shell-body .export-card:nth-child(4n),
.shell-body .settings-action-card:nth-child(4n) { --ui-item-accent: var(--ui-blue); }

.shell-body .renewal-summary article:nth-child(1) { --ui-item-accent: var(--danger); }
.shell-body .renewal-summary article:nth-child(2) { --ui-item-accent: var(--ui-amber); }
.shell-body .renewal-summary article:nth-child(3) { --ui-item-accent: var(--ui-cyan); }
.shell-body .theme-choice label:nth-child(2) > span { --ui-item-accent: var(--ui-violet); }
.shell-body .period-option span,
.shell-body .plan-choice { --ui-item-accent: var(--ui-blue); }

.shell-body .renewal-summary article strong {
  color: var(--ui-item-accent);
}

/* Operational panels are neutral by default; key dashboard regions get a quiet identity. */
.shell-body .dashboard-grid > .panel:first-child,
.shell-body .admin-dashboard-grid > .panel:first-child {
  border-color: color-mix(in srgb, var(--ui-cyan) 30%, var(--ui-edge)) !important;
  background:
    radial-gradient(560px 230px at 0 0, color-mix(in srgb, var(--ui-cyan) 12%, transparent), transparent 78%),
    linear-gradient(145deg, var(--ui-surface-raised), var(--ui-surface) 76%) !important;
}

.shell-body .dashboard-grid > .panel:nth-child(2) {
  border-color: color-mix(in srgb, var(--ui-violet) 32%, var(--ui-edge)) !important;
  background:
    radial-gradient(400px 210px at 0 0, color-mix(in srgb, var(--ui-violet) 15%, transparent), transparent 78%),
    linear-gradient(145deg, var(--ui-surface-raised), var(--ui-surface) 76%) !important;
}

.shell-body .admin-dashboard-grid > .panel:first-child {
  border-color: color-mix(in srgb, var(--ui-violet) 35%, var(--ui-edge)) !important;
  background:
    radial-gradient(460px 210px at 100% 0, color-mix(in srgb, var(--ui-violet) 12%, transparent), transparent 78%),
    linear-gradient(145deg, var(--ui-surface-raised), var(--ui-surface) 76%) !important;
}

.shell-body .admin-dashboard-grid > .panel:nth-child(2) {
  border-color: color-mix(in srgb, var(--ui-indigo) 35%, var(--ui-edge)) !important;
  background:
    radial-gradient(360px 195px at 100% 0, color-mix(in srgb, var(--ui-violet) 13%, transparent), transparent 76%),
    linear-gradient(145deg, var(--ui-surface-raised), var(--ui-surface) 76%) !important;
}

/* Public cards reuse the material language and inherit a controlled brand accent. */
.public-body .home-destination-card,
.public-body .home-context-core,
.public-body .home-principles,
.public-body .security-card,
.public-body .public-plan-card,
.public-body .public-studio-library,
.public-body .public-studio-steps li,
.public-body .public-publishing-card,
.public-body .product-bento > article,
.public-body .decision-steps li,
.public-body .studio-value-grid > article,
.public-body .use-case-grid > article {
  --ui-card-accent: var(--ui-cyan);
  border: 1px solid color-mix(in srgb, var(--ui-card-accent) 32%, var(--ui-edge)) !important;
  background:
    radial-gradient(340px 205px at 0 0, color-mix(in srgb, var(--ui-card-accent) 18%, transparent), transparent 76%),
    radial-gradient(220px 150px at 100% 100%, color-mix(in srgb, var(--ui-card-accent) 6%, transparent), transparent 80%),
    linear-gradient(125deg, var(--ui-surface-raised), var(--ui-surface) 72%) !important;
  box-shadow: var(--ui-shadow-card) !important;
}

.public-body .home-destination-card { --ui-card-accent: var(--destination-accent); }
.public-body .public-plan-card { --ui-card-accent: var(--plan-accent); }
.public-body .product-bento > article:nth-child(2),
.public-body .decision-steps li:nth-child(4n + 2),
.public-body .use-case-grid > article:nth-child(3n + 2) { --ui-card-accent: var(--ui-violet); }
.public-body .product-bento > article:nth-child(3),
.public-body .decision-steps li:nth-child(4n + 3),
.public-body .use-case-grid > article:nth-child(3n) { --ui-card-accent: var(--ui-teal); }
.public-body .product-bento > article:nth-child(4),
.public-body .decision-steps li:nth-child(4n) { --ui-card-accent: var(--ui-blue); }
.public-body .public-studio-library,
.public-body .public-studio-steps li,
.public-body .public-publishing-card,
.public-body .studio-value-grid > article { --ui-card-accent: var(--ui-violet); }

.public-body .product-bento > article::after,
.public-body .home-destination-card::after {
  display: none !important;
}

.shell-body .panel-head,
.shell-body .area-admin .panel-head,
.modal-head,
.admin-card-head {
  border-color: var(--ui-edge-soft) !important;
  background: var(--ui-surface-raised) !important;
}

.shell-body .console-hero::after,
.shell-body .panel-accent::before {
  display: none !important;
}

.shell-body .side-nav a.active {
  border-color: var(--ui-edge-strong) !important;
  background:
    radial-gradient(180px 70px at 0 50%, color-mix(in srgb, var(--ui-accent) 18%, transparent), transparent 78%),
    linear-gradient(90deg, var(--ui-surface-raised), var(--ui-surface)) !important;
  box-shadow: inset 0 1px 0 rgba(157, 195, 255, .04) !important;
}

/* Interactive cards only: movement is deliberately restrained. */
:where(a.stat-card, a.template-card, .settings-action-card, .plan-choice, .period-option span) {
  transition: transform var(--ui-fast) var(--ui-ease), border-color var(--ui-fast) ease, background-color var(--ui-fast) ease, box-shadow var(--ui-fast) ease;
}

:where(a.stat-card, a.template-card, .settings-action-card, .plan-choice, .period-option span):hover {
  border-color: var(--ui-edge-strong) !important;
  box-shadow: var(--ui-shadow-float);
  transform: translateY(-1px);
}

/* Signature contour: one quiet reference to the product mark on key containers. */
:where(.page-content > .page-head, .console-hero, .modal-head, .auth-shell, .admin-login-card) {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

:where(.page-content > .page-head, .console-hero, .modal-head, .auth-shell, .admin-login-card)::before {
  content: "" !important;
  position: absolute !important;
  z-index: 0 !important;
  top: -82px !important;
  right: -68px !important;
  width: 164px !important;
  height: 164px !important;
  display: block !important;
  border: 1px solid color-mix(in srgb, var(--ui-accent-bright) 34%, transparent) !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 35% 65%, color-mix(in srgb, var(--ui-accent) 9%, transparent), transparent 68%) !important;
  pointer-events: none;
}

:where(.page-content > .page-head, .console-hero, .modal-head, .auth-shell, .admin-login-card) > * {
  position: relative;
  z-index: 1;
}

.current-plan-hero {
  border-color: color-mix(in srgb, var(--plan-accent) 44%, var(--ui-edge)) !important;
  border-radius: var(--ui-radius-card);
  background:
    radial-gradient(420px 210px at 0 0, color-mix(in srgb, var(--plan-accent) 18%, transparent), transparent 74%),
    linear-gradient(140deg, var(--ui-surface-raised), var(--ui-surface) 76%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
}

.current-plan-hero::after {
  right: -42px;
  top: -48px;
  width: 132px;
  height: 132px;
  border-color: color-mix(in srgb, var(--plan-accent) 34%, transparent);
}

/* Controls and buttons. */
.button {
  min-height: 44px;
  height: auto;
  padding: 10px 17px;
  border-radius: var(--ui-radius-control);
  transition: color var(--ui-fast) ease, background-color var(--ui-fast) ease, border-color var(--ui-fast) ease, box-shadow var(--ui-fast) ease, transform var(--ui-fast) var(--ui-ease);
}

.button.primary {
  --button-solid-accent: var(--ui-accent-strong);
  --button-solid-hover: var(--ui-accent-hover);
  --button-solid-shadow: var(--ui-accent);
}

.button.studio {
  --button-solid-accent: var(--studio-action-strong);
  --button-solid-hover: var(--studio-action-hover);
  --button-solid-shadow: var(--studio);
}

.button.studio-soft {
  --button-tonal-accent: var(--studio);
  --button-tonal-content: #c4b5fd;
}

.button.primary,
.button.studio {
  border-color: var(--button-solid-accent);
  background: var(--button-solid-accent);
  color: var(--ui-on-accent);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--button-solid-shadow) 22%, transparent);
}

.button.primary:hover,
.button.studio:hover {
  border-color: var(--button-solid-hover);
  background: var(--button-solid-hover);
  box-shadow: 0 14px 30px color-mix(in srgb, var(--button-solid-shadow) 28%, transparent);
}

.button.studio-soft {
  color: var(--button-tonal-content);
  border-color: color-mix(in srgb, var(--button-tonal-accent) 44%, var(--ui-edge));
  background: color-mix(in srgb, var(--button-tonal-accent) 12%, var(--ui-surface-raised));
  box-shadow: 0 8px 20px color-mix(in srgb, var(--button-tonal-accent) 10%, transparent);
}

.button.studio-soft:hover {
  color: #ddd6fe;
  border-color: color-mix(in srgb, var(--button-tonal-accent) 64%, var(--ui-edge));
  background: color-mix(in srgb, var(--button-tonal-accent) 19%, var(--ui-surface-raised));
}

html[data-theme="light"] .button.studio-soft {
  --button-tonal-content: #6d28d9;
}

.button.secondary {
  border-color: var(--ui-edge);
  background: color-mix(in srgb, var(--ui-surface-raised) 70%, transparent);
}

.button.secondary:hover,
.button.ghost:hover {
  color: var(--text);
  border-color: var(--ui-edge-strong);
  background: color-mix(in srgb, var(--ui-accent-soft) 56%, var(--ui-surface-raised));
}

.button.danger {
  border-color: color-mix(in srgb, var(--danger) 38%, transparent);
  background: color-mix(in srgb, var(--danger) 11%, var(--ui-surface));
}

.button:active:not(:disabled) {
  transform: translateY(0) scale(.985);
}

.button.small {
  min-height: 36px;
  padding: 7px 12px;
}

.icon-button {
  border-color: var(--ui-edge);
  border-radius: var(--ui-radius-control);
  background: color-mix(in srgb, var(--ui-surface-raised) 70%, transparent);
  transition: color var(--ui-fast) ease, border-color var(--ui-fast) ease, background-color var(--ui-fast) ease, transform var(--ui-fast) var(--ui-ease);
}

.icon-button:hover {
  color: var(--text);
  border-color: var(--ui-edge-strong);
  background: var(--ui-accent-soft);
  transform: translateY(-1px);
}

.icon-button:active {
  transform: scale(.96);
}

.field input,
.field select,
.field textarea,
.search-field,
.password-control,
.form-control {
  border-color: var(--ui-edge) !important;
  border-radius: var(--ui-radius-control) !important;
  background: var(--ui-control) !important;
  transition: border-color var(--ui-fast) ease, background-color var(--ui-fast) ease, box-shadow var(--ui-fast) ease;
}

.field input,
.field select,
.search-field,
.password-control,
.form-control {
  min-height: 46px;
}

:where(.field input, .field select, .field textarea):hover:not(:disabled),
.password-control:focus-within {
  border-color: var(--ui-edge-strong) !important;
}

:where(.field input, .field select, .field textarea):focus {
  border-color: var(--ui-accent-content) !important;
  outline: none !important;
  box-shadow: 0 0 0 var(--ui-form-focus-width) var(--ui-form-focus-color) !important;
}

:where(input, textarea)::placeholder {
  color: color-mix(in srgb, var(--muted) 76%, transparent);
}

:where(input[type="checkbox"], input[type="radio"]) {
  accent-color: var(--ui-accent);
}

/* Tables and dense operational content. */
.table-wrap {
  scrollbar-color: var(--ui-edge-strong) transparent;
  scrollbar-width: thin;
}

.data-table thead {
  position: sticky;
  top: 0;
  z-index: 3;
}

.data-table th {
  border-bottom-color: var(--ui-edge) !important;
  background: color-mix(in srgb, var(--ui-surface-raised) 94%, transparent);
  backdrop-filter: blur(10px);
}

.data-table td {
  border-bottom-color: var(--ui-edge-soft) !important;
  transition: background-color var(--ui-fast) ease;
}

.data-table tbody tr {
  transition: background-color var(--ui-fast) ease;
}

.data-table tbody tr:hover {
  background: color-mix(in srgb, var(--ui-accent-soft) 36%, transparent) !important;
}

.badge {
  min-height: 26px;
  border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  background: color-mix(in srgb, var(--ui-surface-raised) 76%, transparent);
}

/* Every semantic state label uses one stable measure. Generic badges remain
 * content-sized because they also represent counters and contextual metadata. */
.ui-status-label {
  inline-size: var(--ui-status-label-width) !important;
  min-inline-size: var(--ui-status-label-width) !important;
  max-inline-size: var(--ui-status-label-width) !important;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  text-align: center;
  white-space: nowrap;
}

.ui-status-label::before,
.ui-status-label > :is(i, svg) {
  flex: none;
}

/* Shared data-bound capacity meter. The visible fraction, text and accessible
 * value all come from the same used/total values supplied by the view. */
.ui-capacity-meter {
  --ui-capacity-color: var(--success);
  --ui-capacity-ratio: 0;
  min-width: 0;
  display: grid;
  gap: 6px;
}

.ui-capacity-meter.is-warning { --ui-capacity-color: var(--warning); }
.ui-capacity-meter.is-danger { --ui-capacity-color: var(--danger); }

.ui-capacity-meter__heading,
.ui-capacity-meter__meta {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.ui-capacity-meter__heading > strong {
  min-width: 0;
  overflow: hidden;
  font-size:var(--type-caption);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-capacity-meter__heading > small,
.ui-capacity-meter__meta > small {
  color: var(--muted);
  font:600 var(--type-caption)/1.25 var(--mono);
}

.ui-capacity-meter__notice {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-capacity-meter__notice.is-warning { color: var(--warning); }
.ui-capacity-meter__notice.is-danger { color: var(--danger); }

.ui-capacity-meter__percentage {
  color: var(--ui-capacity-color);
  font:750 var(--type-caption)/1.25 var(--mono);
  background: transparent;
  border: 0;
  white-space: nowrap;
}

.ui-capacity-meter__percentage.is-healthy { --ui-capacity-color: var(--success); }
.ui-capacity-meter__percentage.is-warning { --ui-capacity-color: var(--warning); }
.ui-capacity-meter__percentage.is-danger { --ui-capacity-color: var(--danger); }

.ui-capacity-meter__track {
  height: 5px;
  display: block;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-2);
}

.ui-capacity-meter__track > span {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: inherit;
  background: var(--ui-capacity-color);
  transform: scaleX(var(--ui-capacity-ratio));
  transform-origin: left center;
  transition: transform var(--ui-fast) ease;
}

.surface-toolbar {
  min-height: 64px;
  padding: 10px 13px;
  border-radius: var(--ui-radius-card) !important;
}

.notice {
  border-radius: var(--ui-radius-control) !important;
}

/*
 * Every blocking layer reuses one backdrop material. The panel, drawer or modal
 * remains sharp above it while the page beneath is softly defocused.
 */
:where(.modal, .ui-backdrop) {
  background: var(--ui-scrim);
  -webkit-backdrop-filter: var(--ui-backdrop-filter);
  backdrop-filter: var(--ui-backdrop-filter);
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  :where(.modal, .ui-backdrop) {
    background: var(--ui-scrim-fallback);
  }
}

@media (prefers-reduced-transparency: reduce) {
  :where(.modal, .ui-backdrop) {
    background: var(--ui-scrim-fallback);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* Modal architecture shared by every workspace. */
.modal {
  z-index: var(--ui-z-modal);
  padding: 24px;
  overscroll-behavior: contain;
}

.modal.open {
  animation: ui-backdrop-in var(--ui-fast) ease both;
}

.modal-card {
  display: flex;
  min-height: 0;
  flex-direction: column;
  max-width: 100%;
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  overflow: hidden;
  overscroll-behavior: contain;
  border-color: var(--ui-edge-strong) !important;
  border-radius: var(--ui-radius-panel) !important;
  background:
    radial-gradient(520px 230px at 0 0, color-mix(in srgb, var(--ui-accent) 10%, transparent), transparent 76%),
    radial-gradient(340px 190px at 100% 100%, color-mix(in srgb, var(--ui-violet) 6%, transparent), transparent 80%),
    linear-gradient(145deg, var(--ui-surface), var(--ui-surface-soft)) !important;
  box-shadow: var(--ui-shadow-modal) !important;
  scrollbar-color: var(--ui-edge-strong) transparent;
  scrollbar-width: thin;
}

.modal.open .modal-card {
  animation: ui-modal-in var(--ui-normal) var(--ui-ease) both;
}

.modal-head,
.settings-modal-card > .modal-head {
  position: sticky;
  z-index: 8;
  top: 0;
  min-height: 70px;
  height: auto;
  padding: 14px 21px;
  background:
    linear-gradient(115deg, color-mix(in srgb, var(--ui-accent) 12%, transparent), transparent 68%),
    color-mix(in srgb, var(--ui-surface-raised) 82%, transparent);
}

.modal-head > div {
  min-width: 0;
}

.modal-head h3 {
  overflow-wrap: anywhere;
}

.modal-head > .icon-button {
  flex: 0 0 auto;
  min-width: 44px;
  width: 44px;
  min-height: 44px;
  height: 44px;
}

.modal-head::before {
  z-index: 0 !important;
  top: -98px !important;
  right: -72px !important;
  width: 178px !important;
  height: 178px !important;
}

.modal-body {
  padding: 22px;
}

/* A standard dialog has one scroll owner: its body. This keeps the heading and
 * sticky actions reachable at every viewport height, including desktop windows
 * with little vertical space. A bounded list may opt in as the owner instead. */
.modal-card > .modal-head {
  flex: 0 0 auto;
}

.modal-card > .modal-body {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
}

.modal-card > .modal-body[data-scroll-owner="child"] {
  overflow: hidden;
}

.ui-scroll-region {
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  scrollbar-gutter: stable;
}

.ui-scroll-region:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--ui-accent-content) 62%, transparent);
  outline-offset: -2px;
}

.modal .form-actions {
  position: sticky;
  z-index: 5;
  bottom: -22px;
  margin: 22px -22px -22px;
  padding: 16px 22px;
  border-top: 1px solid var(--ui-edge-soft);
  background: color-mix(in srgb, var(--ui-surface) 92%, transparent);
  backdrop-filter: blur(12px);
}

.modal .form-actions .button {
  min-width: 118px;
}

/* Action rows in height-constrained surfaces must never be compressed out of
 * view. Their adjacent content owns any required vertical scrolling. */
:where(.modal-head, .modal-foot, .form-actions, .auth-next-button, .auth-submit, .auth-register-actions) {
  flex-shrink: 0;
}

.modal-active {
  overflow: hidden;
}

.toast {
  z-index: var(--ui-z-toast);
  border-color: var(--ui-edge-strong);
  border-radius: var(--ui-radius-card);
  background: color-mix(in srgb, var(--ui-surface) 94%, transparent);
  box-shadow: var(--ui-shadow-float);
  backdrop-filter: blur(14px);
  animation: ui-toast-in var(--ui-normal) var(--ui-ease) both;
}

/* Navigation and public surfaces inherit the same material language. */
.topbar,
.public-header {
  border-color: var(--ui-edge-soft);
}

.sidebar,
.topbar {
  transition: background-color var(--ui-normal) ease, border-color var(--ui-normal) ease, box-shadow var(--ui-normal) ease;
}

.public-body :where(.feature-card, .step-card, .price-card, .product-card, .public-card) {
  border-color: var(--ui-edge) !important;
  background:
    radial-gradient(300px 180px at 0 0, color-mix(in srgb, var(--ui-accent) 15%, transparent), transparent 76%),
    linear-gradient(135deg, var(--ui-surface-raised), var(--ui-surface) 76%);
  box-shadow: var(--ui-shadow-card);
  transition: transform var(--ui-fast) var(--ui-ease), border-color var(--ui-fast) ease, box-shadow var(--ui-fast) ease;
}

.public-body :where(.feature-card, .step-card, .price-card, .product-card, .public-card):hover {
  border-color: var(--ui-edge-strong) !important;
  box-shadow: var(--ui-shadow-float);
  transform: translateY(-2px);
}

.auth-shell,
.admin-login-card {
  border-color: var(--ui-edge-strong) !important;
  background:
    radial-gradient(520px 260px at 0 0, color-mix(in srgb, var(--ui-accent) 16%, transparent), transparent 76%),
    radial-gradient(360px 210px at 100% 100%, color-mix(in srgb, var(--ui-violet) 8%, transparent), transparent 80%),
    linear-gradient(145deg, var(--ui-surface), var(--ui-surface-soft)) !important;
  box-shadow: var(--ui-shadow-modal) !important;
}

@keyframes ui-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes ui-modal-in {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes ui-toast-in {
  from { opacity: 0; transform: translateY(-8px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 900px) {
  .page-content > .page-head::before,
  .console-hero::before {
    top: -104px !important;
    right: -82px !important;
  }
}

@media (max-width: 620px) {
  .shell-main,
  .page-content,
  #main-content {
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
  }

  .surface-toolbar {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .surface-toolbar .filter-bar,
  .surface-toolbar .search-field,
  .surface-toolbar .toolbar-meta {
    width: 100%;
    min-width: 0;
    margin-left: 0;
  }

  .surface-toolbar .toolbar-meta {
    justify-content: flex-start;
  }

  .toast {
    right: 12px;
    left: 12px;
    top: 84px;
    min-width: 0;
    max-width: none;
  }

}

html[data-theme="light"] .shell-body .stat-grid .metric-card > strong:not(.system-state),
html[data-theme="light"] .shell-body .renewal-summary article strong {
  color: color-mix(in srgb, var(--metric-accent, var(--ui-item-accent)) 82%, black 18%);
  text-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* 2026 professional refinement: visual-only, shared by every layout. */
:root {
  --ui-surface: #08101d;
  --ui-surface-raised: #101827;
  --ui-surface-soft: #0b1423;
  --ui-control: #080f1b;
  --ui-edge: rgba(105, 125, 154, .22);
  --ui-edge-strong: rgba(59, 166, 255, .68);
  --ui-edge-inner: rgba(105, 125, 154, .17);
  --ui-edge-soft: rgba(105, 125, 154, .11);
  --ui-radius-control: 13px;
  --ui-radius-card: 17px;
  --ui-radius-panel: 19px;
  --ui-shadow-card-contact: 0 3px 10px rgba(2, 7, 16, .34);
  --ui-shadow-card-directional: 10px 16px 30px -18px rgba(2, 8, 20, .76);
  --ui-shadow-card-inner: inset 0 1px 0 rgba(255, 255, 255, .025);
  --ui-shadow-card: var(--ui-shadow-card-contact), var(--ui-shadow-card-directional), var(--ui-shadow-card-inner);
  --ui-shadow-float: 0 8px 24px rgba(2, 7, 16, .38), 12px 20px 38px -18px rgba(2, 8, 20, .82), inset 0 1px 0 rgba(255, 255, 255, .035);
}

html[data-theme="light"] {
  --ui-surface: #fff;
  --ui-surface-raised: #f8faff;
  --ui-surface-soft: #f2f6fc;
  --ui-control: #f7f9fd;
  --ui-edge: rgba(71, 85, 105, .22);
  --ui-edge-strong: rgba(0, 98, 232, .54);
  --ui-edge-inner: rgba(71, 85, 105, .17);
  --ui-edge-soft: rgba(71, 85, 105, .12);
  --ui-shadow-card-contact: 0 3px 10px rgba(15, 23, 42, .08);
  --ui-shadow-card-directional: 10px 16px 30px -18px rgba(30, 64, 175, .2);
  --ui-shadow-card-inner: inset 0 1px 0 rgba(255, 255, 255, .88);
  --ui-shadow-float: 0 8px 24px rgba(15, 23, 42, .11), 12px 20px 38px -18px rgba(30, 64, 175, .24), inset 0 1px 0 rgba(255, 255, 255, .94);
}

.shell-body,
.admin-auth-body {
  background: var(--console-bg, var(--bg));
}

/* Shared surfaces: calm structure, low-opacity brand tint. */
.shell-body :where(.panel, .credential-vault, .profile-card, .security-form-panel, .settings-hub, .settings-action-card, .template-card, .status-card, .payment-context, .payment-card),
.public-body :where(.feature-card, .step-card, .price-card, .product-card, .public-card, .auth-card, .auth-shell),
.admin-auth-body .admin-login-card {
  border-color: var(--ui-edge-tonal) !important;
  border-radius: var(--ui-radius-card) !important;
  background: radial-gradient(420px 210px at 0 0, color-mix(in srgb, var(--ui-accent) 8%, transparent), transparent 76%), radial-gradient(300px 170px at 100% 100%, color-mix(in srgb, var(--ui-violet) 4%, transparent), transparent 80%), linear-gradient(145deg, var(--ui-surface-raised), var(--ui-surface) 76%, var(--ui-surface-soft)) !important;
  box-shadow: var(--ui-shadow-card) !important;
}

.shell-body :where(.panel, .settings-action-card, .template-card):hover,
.public-body :where(.feature-card, .step-card, .price-card, .product-card, .public-card):hover {
  border-color: color-mix(in srgb, var(--ui-accent) 34%, var(--ui-edge)) !important;
  box-shadow: var(--ui-shadow-float) !important;
}

/* Controls preserve every existing action and only unify their finish. */
:where(.button, .icon-button, .search-field, .password-control) { border-radius: var(--ui-radius-control) !important; }
.button { min-height: 44px; border-color: var(--ui-edge); box-shadow: none; }
.button.small { min-height: 36px; }
.button {
  background-image: none !important;
}
.button.primary,
.button.studio {
  color: var(--ui-on-accent) !important;
  border-color: var(--button-solid-accent) !important;
  background: var(--button-solid-accent) !important;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--button-solid-shadow) 24%, transparent) !important;
}
.button.primary:hover,
.button.studio:hover {
  border-color: var(--button-solid-hover) !important;
  background: var(--button-solid-hover) !important;
  box-shadow: 0 13px 28px color-mix(in srgb, var(--button-solid-shadow) 30%, transparent) !important;
}
.button.studio-soft {
  color: var(--button-tonal-content) !important;
  border-color: color-mix(in srgb, var(--button-tonal-accent) 44%, var(--ui-edge)) !important;
  background: color-mix(in srgb, var(--button-tonal-accent) 12%, var(--ui-surface-raised)) !important;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--button-tonal-accent) 10%, transparent) !important;
}
.button.studio-soft:hover {
  color: color-mix(in srgb, var(--button-tonal-content) 88%, white) !important;
  border-color: color-mix(in srgb, var(--button-tonal-accent) 64%, var(--ui-edge)) !important;
  background: color-mix(in srgb, var(--button-tonal-accent) 19%, var(--ui-surface-raised)) !important;
}
.button.secondary,
.icon-button,
.topbar-business,
.live-dot {
  border-color: var(--ui-edge) !important;
  background: color-mix(in srgb, var(--ui-control) 88%, transparent) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
}
.button.secondary:hover,
.icon-button:hover,
.topbar-business:hover {
  color: var(--ui-accent-content) !important;
  border-color: color-mix(in srgb, var(--ui-accent) 48%, var(--ui-edge)) !important;
  background: color-mix(in srgb, var(--ui-accent) 8%, var(--ui-control)) !important;
}
.field input,
.field select,
.field textarea,
.search-field,
.password-control,
.data-control,
.filter-control {
  border-color: var(--ui-edge) !important;
  border-radius: var(--ui-radius-control) !important;
  background: var(--ui-control) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .018);
}
.field input:hover,
.field select:hover,
.field textarea:hover,
.search-field:hover,
.password-control:hover { border-color: color-mix(in srgb, var(--ui-blue) 36%, var(--ui-edge)) !important; }
.field input:focus,
.field select:focus,
.field textarea:focus,
.password-control:focus-within {
  border-color: var(--ui-accent-content) !important;
  outline: none !important;
  box-shadow: 0 0 0 var(--ui-form-focus-width) var(--ui-form-focus-color) !important;
}

/* Sidebar structure stays intact; its surface is deliberately uniform. */
.shell-body .sidebar {
  background: var(--ui-navigation-surface) !important;
  border-right-color: rgba(77, 111, 158, .34) !important;
  box-shadow: 16px 0 44px rgba(2, 8, 20, .16) !important;
}
.shell-body .shell-ambient,
.shell-body .sidebar::after {
  display: none !important;
  background: none !important;
}
.shell-body .sidebar-edition {
  color: var(--ui-cyan);
  border-color: rgba(56, 189, 248, .28);
  background: linear-gradient(135deg, rgba(56, 189, 248, .1), color-mix(in srgb, var(--ui-blue) 5.5%, transparent));
}
.shell-body .mode-switch {
  border-color: rgba(77, 111, 158, .42) !important;
  background: var(--ui-control) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .025), 0 9px 22px rgba(2, 8, 20, .12);
}
.shell-body .mode-switch a.active {
  color: var(--ui-on-accent) !important;
  background: var(--ui-accent-strong) !important;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--ui-accent) 30%, transparent) !important;
}
.shell-body .side-nav a,
.shell-body .side-nav summary {
  color: var(--muted);
  transition: color var(--ui-fast), background var(--ui-fast), border-color var(--ui-fast), transform var(--ui-fast) var(--ui-ease), box-shadow var(--ui-fast);
}
.shell-body .side-nav a:hover,
.shell-body .side-nav summary:hover {
  color: var(--ui-accent-content);
  background: color-mix(in srgb, var(--ui-accent) 12%, var(--ui-control)) !important;
  border-color: color-mix(in srgb, var(--ui-accent) 28%, var(--ui-edge)) !important;
}
.shell-body .side-nav a.active,
.shell-body .side-nav summary.active {
  color: var(--ui-accent-content) !important;
  border-color: color-mix(in srgb, var(--ui-accent) 68%, var(--ui-edge)) !important;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--ui-accent) 34%, var(--ui-control)) 0%,
    color-mix(in srgb, var(--ui-accent) 16%, var(--ui-control)) 58%,
    var(--ui-control) 100%
  ) !important;
  box-shadow: none !important;
}
.shell-body .side-nav a.active::before,
.shell-body .side-nav summary.active::before {
  background: var(--ui-accent-content) !important;
  box-shadow: 0 0 14px color-mix(in srgb, var(--ui-accent-content) 62%, transparent) !important;
}
.shell-body .side-nav a.active::after {
  content: "";
  position: absolute;
  right: 10px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--ui-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ui-accent) 12%, transparent), 0 0 12px color-mix(in srgb, var(--ui-accent-content) 62%, transparent);
}
.shell-body .side-subnav { border-left-color: rgba(82, 137, 211, .24) !important; }
.shell-body .sidebar-foot { border-top-color: rgba(77, 111, 158, .3) !important; }

/* Compact top bar connected to the sidebar material. */
.shell-body .topbar {
  border-bottom-color: rgba(77, 111, 158, .24) !important;
  background: var(--ui-navigation-surface) !important;
  box-shadow: 0 1px rgba(255, 255, 255, .012), 0 12px 28px rgba(3, 8, 17, .08);
  backdrop-filter: none;
}
.shell-body :where(.console-user-name, .inline-link) {
  color: var(--ui-accent-content) !important;
}
.shell-body :where(.topbar .eyebrow, .page-kicker:not(.danger-kicker)),
.public-body :where(.topbar .eyebrow, .page-kicker:not(.danger-kicker)),
.admin-auth-body :where(.topbar .eyebrow, .page-kicker:not(.danger-kicker)) {
  display: inline-block;
  color: var(--ui-label-accent-start) !important;
  background: linear-gradient(
    90deg,
    var(--ui-label-accent-start) 0%,
    var(--ui-label-accent-end) 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Existing hero, metrics and charts: no new content or behavior. */
.shell-body .console-hero {
  border-color: color-mix(in srgb, var(--ui-blue) 42%, var(--ui-edge)) !important;
  border-radius: var(--ui-radius-panel) !important;
  background: radial-gradient(720px 280px at 0 0, rgba(56, 189, 248, .12), transparent 74%), radial-gradient(560px 260px at 100% 100%, rgba(99, 102, 241, .1), transparent 78%), linear-gradient(110deg, #111d30, #0b1525 58%, #0a1323) !important;
  box-shadow: var(--ui-shadow-card) !important;
}
.shell-body .console-hero::before { opacity: .08 !important; }
.shell-body .console-hero .hero-signal {
  border-left-color: rgba(82, 137, 211, .34) !important;
  background: radial-gradient(220px 150px at 50% 0, rgba(56, 189, 248, .11), transparent 78%), rgba(10, 20, 36, .52) !important;
}
.shell-body .console-hero .signal-radar {
  color: var(--ui-cyan) !important;
  border-color: rgba(56, 189, 248, .5) !important;
  background: linear-gradient(145deg, rgba(56, 189, 248, .16), color-mix(in srgb, var(--ui-blue) 7%, transparent)), var(--ui-surface-raised) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .05), 0 12px 30px rgba(3, 8, 17, .24) !important;
}
.shell-body .metric-info { --metric-accent: var(--ui-cyan); }
.shell-body .metric-violet { --metric-accent: var(--ui-violet); }
.shell-body .metric-success { --metric-accent: var(--ui-teal); }
.shell-body .metric-warning { --metric-accent: var(--ui-amber); }
.shell-body .metric-danger { --metric-accent: #ef4444; }
.shell-body {
  --metric-origin-weight: 8%;
  --metric-origin-hover-weight: 11%;
  --semantic-solid-weight: 3%;
  --semantic-solid-hover-weight: 5%;
}
.shell-body .stat-grid .metric-card,
html[data-theme="light"] .shell-body .stat-grid .metric-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-color: var(--ui-edge-tonal) !important;
  border-radius: var(--ui-radius-card) !important;
  background: radial-gradient(370px 220px at 0 0, color-mix(in srgb, var(--metric-accent) var(--metric-origin-weight), transparent), transparent 74%), radial-gradient(230px 150px at 100% 100%, color-mix(in srgb, var(--metric-accent) 4%, transparent), transparent 80%), linear-gradient(145deg, var(--ui-surface-raised), var(--ui-surface) 76%) !important;
  box-shadow: var(--ui-shadow-card) !important;
}
.shell-body .stat-grid .metric-card::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 30%;
  max-width: 104px;
  height: 3px;
  border-radius: 0 0 999px;
  background: linear-gradient(90deg, var(--metric-accent), color-mix(in srgb, var(--metric-accent) 46%, transparent));
  box-shadow: 0 0 14px color-mix(in srgb, var(--metric-accent) 20%, transparent);
}
.shell-body .stat-grid .metric-card:hover {
  border-color: color-mix(in srgb, var(--metric-accent) 46%, var(--ui-edge)) !important;
  background: radial-gradient(390px 230px at 0 0, color-mix(in srgb, var(--metric-accent) var(--metric-origin-hover-weight), transparent), transparent 74%), radial-gradient(250px 160px at 100% 100%, color-mix(in srgb, var(--metric-accent) 5%, transparent), transparent 80%), linear-gradient(145deg, var(--ui-surface-raised), var(--ui-surface) 76%) !important;
  box-shadow: var(--ui-shadow-float) !important;
}
.shell-body .stat-grid .metric-card .metric-icon {
  border-radius: 12px !important;
  color: var(--metric-accent) !important;
  border-color: color-mix(in srgb, var(--metric-accent) 42%, var(--ui-edge)) !important;
  background: color-mix(in srgb, var(--metric-accent) 6%, var(--ui-control)) !important;
}
.shell-body .stat-grid .metric-card .metric-note::before {
  background: var(--metric-accent) !important;
  box-shadow: 0 0 9px color-mix(in srgb, var(--metric-accent) 50%, transparent);
}
.shell-body .chart-bars {
  border-color: var(--ui-edge-soft) !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--ui-blue) 3.5%, transparent), transparent), repeating-linear-gradient(0deg, transparent 0 49px, var(--ui-edge-soft) 50px) !important;
}
.shell-body .bar {
  border: 1px solid rgba(56, 189, 248, .18);
  border-radius: 7px 7px 3px 3px;
  background: linear-gradient(180deg, #4fd1ff, var(--ui-blue) 48%, var(--ui-accent-strong)) !important;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--ui-accent-strong) 18%, transparent), inset 0 1px rgba(255, 255, 255, .22) !important;
}
.shell-body .command-item { border-radius: 13px; }
.shell-body .command-item:hover {
  border-color: var(--ui-edge) !important;
  background: linear-gradient(90deg, rgba(56, 189, 248, .055), color-mix(in srgb, var(--ui-blue) 2.5%, transparent)) !important;
}
.shell-body .command-item-icon {
  border: 1px solid var(--ui-edge-soft);
  border-radius: 12px;
  color: var(--ui-cyan);
  background: color-mix(in srgb, var(--ui-cyan) 6%, var(--ui-control));
}

/* Tables, badges and existing modal flows reuse the same material language. */
.shell-body .data-table thead { background: color-mix(in srgb, var(--ui-surface-raised) 84%, transparent); }
.shell-body .data-table th,
.shell-body .data-table td { border-color: var(--ui-edge-soft) !important; }
.shell-body .data-table tbody tr:hover { background: linear-gradient(90deg, rgba(56, 189, 248, .04), color-mix(in srgb, var(--ui-blue) 2%, transparent)) !important; }
.badge { border-radius: 999px !important; }
.modal-card {
  border-radius: var(--ui-radius-panel) !important;
  border-color: color-mix(in srgb, var(--ui-accent) 36%, var(--ui-edge)) !important;
  background: radial-gradient(560px 250px at 0 0, color-mix(in srgb, var(--ui-accent) 11%, transparent), transparent 76%), radial-gradient(360px 210px at 100% 100%, color-mix(in srgb, var(--ui-violet) 5%, transparent), transparent 80%), linear-gradient(145deg, var(--ui-surface-raised), var(--ui-surface)) !important;
}
.modal-head { border-bottom-color: var(--ui-edge-soft) !important; }

html[data-theme="light"] .shell-body,
html[data-theme="light"] .admin-auth-body { background: var(--bg); }
html[data-theme="light"] .shell-body .sidebar {
  background: var(--ui-navigation-surface) !important;
  border-right-color: rgba(71, 85, 105, .18) !important;
  box-shadow: 14px 0 36px rgba(30, 64, 175, .055) !important;
}
html[data-theme="light"] .shell-body .topbar { background: var(--ui-navigation-surface) !important; }
html[data-theme="light"] .shell-body .side-nav :where(a, summary) { color: #64748b; }
html[data-theme="light"] .shell-body .side-nav :where(a, summary):hover,
html[data-theme="light"] .shell-body .side-nav :where(a.active, summary.active) { color: var(--ui-accent-content) !important; }

@media (max-width: 900px) {
  .shell-body .sidebar { box-shadow: 24px 0 70px rgba(2, 8, 20, .42) !important; }
}

/*
 * Reference-faithful metric composition.
 * Every metric card in Gestor and administration already shares the same HTML
 * contract, so the approved arrangement is reused without duplicating views.
 */
.shell-body .stat-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

.shell-body .stat-grid .metric-card {
  min-width: 0;
  min-height: 114px;
  padding: 16px !important;
  display: grid !important;
  grid-template-columns: 52px minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  column-gap: 16px;
  row-gap: 2px;
  align-content: center;
  align-items: center;
}

.shell-body .stat-grid .metric-card::before {
  width: 112px !important;
  max-width: 34% !important;
  height: 3px !important;
}

.shell-body .stat-grid .metric-card .metric-icon {
  position: static !important;
  grid-column: 1;
  grid-row: 1 / 4;
  width: 52px !important;
  height: 52px !important;
  align-self: center;
  border-radius: 12px !important;
}

.shell-body .stat-grid .metric-card .metric-icon .icon {
  width: 25px;
  height: 25px;
  stroke-width: 1.7;
}

.shell-body .stat-grid .metric-card .stat-label {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  margin: 0;
  color: var(--text) !important;
  font-size:var(--type-caption) !important;
  line-height: 1.25;
  letter-spacing: .035em;
}

.shell-body .stat-grid .metric-card > strong {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  margin: 2px 0 0 !important;
  font-size:var(--type-page) !important;
  line-height: 1.08;
  overflow-wrap: anywhere;
}

.shell-body .stat-grid .metric-card > .metric-note {
  grid-column: 2;
  grid-row: 3;
  min-width: 0;
  margin: 0;
  font-size:var(--type-caption) !important;
  line-height: 1.3;
}

.shell-body .stat-grid .metric-card > .system-state {
  font-family: var(--font) !important;
  font-size:var(--type-subtitle) !important;
}

.shell-body .dashboard-grid {
  grid-template-columns: minmax(0, 1.16fr) minmax(330px, .84fr) !important;
  gap: 18px !important;
}

.shell-body .dashboard-grid > .panel {
  border-color: var(--ui-edge-tonal) !important;
  border-radius: var(--ui-radius-card) !important;
}

.shell-body .dashboard-grid > .panel:hover {
  border-color: color-mix(in srgb, var(--ui-blue) 30%, var(--ui-edge)) !important;
}

.shell-body .dashboard-grid .panel-accent::before {
  display: none !important;
}

.shell-body .dashboard-grid .panel-head {
  min-height: 72px;
  padding: 16px 20px !important;
  background: linear-gradient(90deg, rgba(56, 189, 248, .025), rgba(99, 102, 241, .018));
}

.shell-body .dashboard-grid .panel-body {
  padding: 20px !important;
}

.shell-body .dashboard-grid .command-item {
  min-height: 66px;
  padding: 11px 12px;
  border-bottom: 1px solid var(--ui-edge-soft);
  border-radius: 0;
}

.shell-body .dashboard-grid .command-item:last-child {
  border-bottom: 0;
}

/* Keep the four-card reference composition on compact desktop shells. */
@media (min-width: 1181px) and (max-width: 1380px) {
  .shell-body .stat-grid .metric-card {
    min-height: 92px;
    padding: 11px 14px !important;
    grid-template-columns: 42px minmax(0, 1fr);
    column-gap: 14px;
    row-gap: 1px;
  }

  .shell-body .stat-grid .metric-card .metric-icon {
    width: 42px !important;
    height: 42px !important;
    border-radius: 10px !important;
  }

  .shell-body .stat-grid .metric-card .metric-icon .icon {
    width: 21px;
    height: 21px;
  }

  .shell-body .stat-grid .metric-card .stat-label {
    font-size:var(--type-caption) !important;
    letter-spacing: 0;
    white-space: nowrap;
  }

  .shell-body .stat-grid .metric-card > strong,
  .shell-body .stat-grid .metric-card > .system-state {
    font-size:var(--type-page) !important;
    white-space: nowrap;
  }

  .shell-body .stat-grid .metric-card > .metric-note {
    font-size:var(--type-caption) !important;
    line-height: 1.2;
    white-space: nowrap;
  }
}

@media (max-width: 1180px) {
  .shell-body .stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 900px) {
  .shell-body .dashboard-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 620px) {
  .shell-body .stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-flow: row;
    grid-auto-rows: minmax(120px, auto);
    gap: 10px !important;
  }

  .shell-body .stat-grid .metric-card {
    min-height: 120px;
    padding: 12px clamp(8px, 2vw, 12px) !important;
    grid-template-columns: clamp(36px, 9vw, 48px) minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    column-gap: clamp(7px, 1.5vw, 12px);
    row-gap: 1px;
    align-content: center;
  }

  .shell-body .stat-grid .metric-card .metric-icon {
    width: clamp(36px, 9vw, 48px) !important;
    height: clamp(36px, 9vw, 48px) !important;
    border-radius: 11px !important;
  }

  .shell-body .stat-grid .metric-card .metric-icon .icon {
    width: clamp(18px, 4.8vw, 24px);
    height: clamp(18px, 4.8vw, 24px);
  }

  .shell-body .stat-grid .metric-card .stat-label {
    max-width: none !important;
    font-size:var(--type-caption);
    line-height: 1.18;
    overflow-wrap: normal;
    word-break: normal;
  }

  .shell-body .stat-grid .metric-card > strong,
  .shell-body .stat-grid .metric-card > .system-state {
    margin-block: 1px 0 !important;
    font-size:var(--type-subtitle) !important;
    line-height: 1.02;
    white-space: nowrap;
  }

  .shell-body .stat-grid .metric-card > .metric-note {
    font-size:var(--type-caption);
    line-height: 1.22;
    overflow-wrap: normal;
    word-break: normal;
  }
}

/* Reset legacy bento spans so every dashboard keeps the approved metric rhythm. */
.shell-body .stat-grid > .metric-card,
.shell-body .dashboard-metrics > .metric-card,
.shell-body .customer-metrics > .metric-card {
  grid-column: auto !important;
  grid-row: auto !important;
  width: auto !important;
  min-width: 0;
}

/*
 * Structural color policy: gradients belong to quantitative signal cards and
 * the two approved heading levels only. Containers, settings, lists, windows
 * and modals stay neutral so color keeps a precise meaning elsewhere.
 */
.shell-body :is(
  .panel,
  .stat-card:not(.metric-card),
  .credential-vault,
  .profile-card,
  .security-form-panel,
  .settings-hub,
  .settings-action-card,
  .template-card,
  .status-card,
  .payment-context,
  .payment-card,
  .business-facts-grid > div,
  .export-card,
  .studio-template-card,
  .theme-choice label > span,
  .business-logo-field,
  .session-list,
  .period-option span,
  .plan-choice
),
.public-body :is(
  .feature-card,
  .step-card,
  .price-card,
  .product-card,
  .public-card,
  .home-destination-card,
  .home-context-core,
  .home-principles,
  .security-card,
  .public-plan-card,
  .public-studio-library,
  .public-studio-steps li,
  .public-publishing-card,
  .product-bento > article,
  .decision-steps li,
  .studio-value-grid > article,
  .use-case-grid > article
) {
  border-color: var(--ui-edge-tonal) !important;
  background: var(--ui-surface) !important;
}

/* Support bars inherit the same second-level sweep used by module headers. */
.shell-body .surface-toolbar {
  border: 1px solid color-mix(
    in srgb,
    var(--ui-accent) var(--ui-support-edge-accent),
    var(--ui-edge-tonal)
  ) !important;
  border-radius: var(--ui-radius-card) !important;
  background: var(
    --secondary-card-gradient,
    color-mix(
      in srgb,
      var(--ui-accent) var(--ui-support-surface-accent),
      var(--ui-surface-raised)
    )
  ) !important;
  background-clip: padding-box !important;
  box-shadow: var(--ui-shadow-card) !important;
}
.shell-body .studio-category-grid .studio-category-group > a,
html[data-theme="light"] .shell-body .studio-category-grid .studio-category-group > a {
  --metric-accent: var(--category-accent);
  border-color: color-mix(in srgb, var(--metric-accent) 22%, var(--ui-edge)) !important;
  background: color-mix(in srgb, var(--metric-accent) var(--semantic-solid-weight), var(--ui-surface-raised)) !important;
}

.shell-body .studio-category-grid .studio-category-group > a:hover,
html[data-theme="light"] .shell-body .studio-category-grid .studio-category-group > a:hover {
  border-color: color-mix(in srgb, var(--metric-accent) 34%, var(--ui-edge)) !important;
  background: color-mix(in srgb, var(--metric-accent) var(--semantic-solid-hover-weight), var(--ui-surface-raised)) !important;
}

.shell-body .settings-action-card:hover,
.shell-body .template-card:hover,
.public-body :where(.feature-card, .step-card, .price-card, .product-card, .public-card):hover {
  border-color: var(--ui-edge-strong) !important;
  background: var(--ui-surface-raised) !important;
}

.shell-body .page-content > .page-head,
.shell-body .console-hero,
.shell-body.area-studio .console-hero,
.shell-body.area-admin .console-hero,
.shell-body .dashboard-grid > .panel,
.shell-body .admin-dashboard-grid > .panel,
.current-plan-hero,
.auth-shell,
.admin-login-card {
  border-color: var(--ui-edge-tonal) !important;
  background: var(--ui-surface) !important;
}

.shell-body .console-hero .hero-signal,
.shell-body.area-admin .console-hero .hero-signal,
.shell-body .panel-head,
.shell-body .dashboard-grid .panel-head,
.admin-card-head {
  border-color: var(--ui-edge-soft) !important;
  background: var(--ui-surface-raised) !important;
}

/* Dashboard summaries use distinct, coordinated header and body surfaces. */
html body.shell-body.area-app .dashboard-grid > .panel:first-child {
  --dashboard-panel-accent: var(--ui-cyan);
  --dashboard-panel-border: color-mix(in srgb, var(--ui-cyan) 30%, var(--ui-edge));
  --dashboard-panel-head: color-mix(in srgb, var(--ui-surface-raised) 78%, var(--ui-blue));
  --dashboard-panel-body: color-mix(in srgb, var(--ui-surface) 94%, var(--ui-blue));
}

html body.shell-body.area-app .dashboard-grid > .panel:nth-child(2) {
  --dashboard-panel-accent: var(--ui-violet);
  --dashboard-panel-border: color-mix(in srgb, var(--ui-violet) 32%, var(--ui-edge));
  --dashboard-panel-head: color-mix(in srgb, var(--ui-surface-raised) 80%, var(--ui-violet));
  --dashboard-panel-body: color-mix(in srgb, var(--ui-surface) 95%, var(--ui-violet));
}

html body.shell-body.area-app .dashboard-grid > .panel {
  border-color: var(--dashboard-panel-border) !important;
  background: var(--dashboard-panel-body) !important;
  overflow: hidden;
  transition: transform .2s cubic-bezier(.2, .8, .2, 1), box-shadow .2s cubic-bezier(.2, .8, .2, 1);
}

html body.shell-body.area-app .dashboard-grid > .panel:hover {
  border-color: var(--dashboard-panel-border) !important;
  transform: translateY(-1px);
  box-shadow: var(--ui-shadow-float) !important;
}

html body.shell-body.area-app .dashboard-grid .panel-head {
  border-bottom: 1px solid color-mix(in srgb, var(--dashboard-panel-accent) 26%, var(--ui-edge)) !important;
  background: var(--dashboard-panel-head) !important;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--dashboard-panel-accent) 10%, transparent);
}

html body.shell-body.area-app .dashboard-grid .panel-body {
  background: var(--dashboard-panel-body) !important;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ui-edge) 44%, transparent);
}

html:not([data-theme="light"]) body.shell-body.area-app .dashboard-grid > .panel :where(
  .panel-subtitle,
  .bar-wrap small,
  .command-item small,
  .empty-state p
) {
  color: color-mix(in srgb, var(--text) 72%, var(--muted)) !important;
}

html:not([data-theme="light"]) body.shell-body.area-app .dashboard-grid .panel-head :where(.badge, .button) {
  border-color: color-mix(in srgb, var(--dashboard-panel-accent) 50%, rgba(255, 255, 255, .16)) !important;
  background: color-mix(in srgb, var(--dashboard-panel-accent) 18%, transparent) !important;
  color: var(--ui-on-accent) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 5px 14px color-mix(in srgb, var(--dashboard-panel-accent) 8%, transparent);
}

html:not([data-theme="light"]) body.shell-body.area-app .dashboard-grid .panel-head .button:hover,
html:not([data-theme="light"]) body.shell-body.area-app .dashboard-grid .panel-head .button:focus-visible {
  border-color: color-mix(in srgb, var(--dashboard-panel-accent) 72%, white) !important;
  background: color-mix(in srgb, var(--dashboard-panel-accent) 30%, transparent) !important;
  color: var(--ui-on-accent) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 7px 18px color-mix(in srgb, var(--dashboard-panel-accent) 12%, transparent);
}

html[data-theme="light"] body.shell-body.area-app .dashboard-grid > .panel:first-child {
  --dashboard-panel-head: color-mix(in srgb, var(--ui-surface-raised) 90%, var(--ui-blue));
  --dashboard-panel-body: color-mix(in srgb, var(--ui-surface) 97%, var(--ui-blue));
}

html[data-theme="light"] body.shell-body.area-app .dashboard-grid > .panel:nth-child(2) {
  --dashboard-panel-head: color-mix(in srgb, var(--ui-surface-raised) 90%, var(--ui-violet));
  --dashboard-panel-body: color-mix(in srgb, var(--ui-surface) 97%, var(--ui-violet));
}

html[data-theme="light"] body.shell-body.area-app .dashboard-grid .panel-head :where(.badge, .button) {
  border-color: color-mix(in srgb, var(--dashboard-panel-accent) 36%, white) !important;
  background: color-mix(in srgb, var(--dashboard-panel-accent) 8%, white) !important;
  color: #5b21b6 !important;
}

html[data-theme="light"] body.shell-body.area-app .dashboard-grid .panel-head .button:hover,
html[data-theme="light"] body.shell-body.area-app .dashboard-grid .panel-head .button:focus-visible {
  border-color: color-mix(in srgb, var(--dashboard-panel-accent) 56%, white) !important;
  background: color-mix(in srgb, var(--dashboard-panel-accent) 15%, white) !important;
  color: #4c1d95 !important;
}

/* Dashboard data stories: exact values stay visible and urgency is not color-only. */
html body.shell-body.area-app .dashboard-chart-overview,
html body.shell-body.area-app .dashboard-agenda-overview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
}

html body.shell-body.area-app .dashboard-chart-overview {
  padding: 0 2px 14px;
}

html body.shell-body.area-app .dashboard-chart-total {
  display: grid;
  gap: 2px;
}

html body.shell-body.area-app .dashboard-chart-total small,
html body.shell-body.area-app .agenda-amount small {
  color: var(--muted);
  font-size:var(--type-caption);
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.2;
  text-transform: uppercase;
}

html body.shell-body.area-app .dashboard-chart-total strong {
  color: var(--text);
  font-family: var(--mono);
  font-size:var(--type-subtitle);
  line-height: 1.1;
}

html body.shell-body.area-app .dashboard-trend {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 52%;
  padding: 7px 10px;
  border: 1px solid color-mix(in srgb, var(--ui-edge) 84%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--ui-surface-raised) 84%, transparent);
  color: var(--muted);
  font-size:var(--type-caption);
  font-weight: 700;
  line-height: 1.2;
  text-align: right;
}

html body.shell-body.area-app .dashboard-trend-up {
  border-color: color-mix(in srgb, var(--success) 34%, var(--ui-edge));
  color: var(--success);
}

html body.shell-body.area-app .dashboard-trend-down {
  border-color: color-mix(in srgb, var(--warning) 34%, var(--ui-edge));
  color: var(--warning);
}

html body.shell-body.area-app .dashboard-trend-up .icon {
  transform: rotate(-90deg);
}

html body.shell-body.area-app .dashboard-trend-down .icon {
  transform: rotate(90deg);
}

html body.shell-body.area-app .dashboard-trend-neutral .icon {
  opacity: .7;
}

html body.shell-body.area-app .dashboard-revenue-chart {
  height: 214px;
  min-height: 214px;
  padding: 16px 8px 0;
  border: 1px solid color-mix(in srgb, var(--dashboard-panel-accent) 12%, var(--ui-edge));
  border-radius: 12px;
  background-color: color-mix(in srgb, var(--dashboard-panel-body) 84%, transparent) !important;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 49px,
    color-mix(in srgb, var(--dashboard-panel-accent) 8%, transparent) 50px
  ) !important;
  overflow: hidden;
}

html body.shell-body.area-app .dashboard-revenue-chart .bar-wrap {
  height: 100%;
  min-width: 0;
  gap: 8px;
}

html body.shell-body.area-app .dashboard-revenue-chart .bar-track {
  position: relative;
  display: flex;
  flex: 1;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  min-height: 0;
}

html body.shell-body.area-app .dashboard-revenue-chart .bar {
  width: min(38px, 58%);
  height: var(--bar-height) !important;
  animation-delay: var(--bar-delay) !important;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--ui-blue) 16%, transparent), inset 0 1px 0 rgba(255, 255, 255, .38) !important;
}

html body.shell-body.area-app .dashboard-revenue-chart .bar-value {
  position: absolute !important;
  top: auto !important;
  bottom: calc(var(--bar-height) + 7px);
  left: 50%;
  z-index: 1;
  width: max-content;
  max-width: 72px;
  transform: translateX(-50%) !important;
  color: color-mix(in srgb, var(--text) 82%, var(--muted));
  font-family: var(--mono);
  font-size:var(--type-caption);
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

html body.shell-body.area-app .dashboard-revenue-chart .is-current .bar-value,
html body.shell-body.area-app .dashboard-revenue-chart .is-peak .bar-value {
  color: var(--text);
}

html body.shell-body.area-app .dashboard-revenue-chart .is-current .bar {
  outline: 1px solid color-mix(in srgb, var(--ui-cyan) 66%, white);
  outline-offset: 2px;
}

html body.shell-body.area-app .dashboard-revenue-chart time {
  color: var(--muted);
  font-family: var(--mono);
  font-size:var(--type-caption);
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1;
}

html body.shell-body.area-app .dashboard-revenue-chart .is-current time {
  color: var(--ui-cyan);
}

html body.shell-body.area-app .dashboard-agenda-overview {
  padding: 0 2px 12px;
  color: var(--muted);
  font-size:var(--type-caption);
  line-height: 1.2;
}

html body.shell-body.area-app .dashboard-agenda-overview strong {
  color: var(--text);
  font-family: var(--mono);
}

html body.shell-body.area-app .dashboard-agenda-overview .has-attention {
  color: var(--warning);
  font-weight: 700;
}

html body.shell-body.area-app .dashboard-agenda-list {
  display: grid;
  border-top: 1px solid color-mix(in srgb, var(--dashboard-panel-accent) 12%, var(--ui-edge));
}

html body.shell-body.area-app .dashboard-agenda-item {
  --agenda-tone: var(--ui-violet);
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 10px 2px;
  border-bottom: 1px solid color-mix(in srgb, var(--dashboard-panel-accent) 10%, var(--ui-edge));
}

html body.shell-body.area-app .dashboard-agenda-item:last-child {
  border-bottom: 0;
}

html body.shell-body.area-app .dashboard-agenda-item.agenda-overdue {
  --agenda-tone: var(--danger);
}

html body.shell-body.area-app .dashboard-agenda-item.agenda-today,
html body.shell-body.area-app .dashboard-agenda-item.agenda-soon {
  --agenda-tone: var(--warning);
}

html body.shell-body.area-app .agenda-date {
  display: grid;
  place-content: center;
  width: 44px;
  min-height: 46px;
  border: 1px solid color-mix(in srgb, var(--agenda-tone) 42%, var(--ui-edge));
  border-radius: 11px;
  background: color-mix(in srgb, var(--agenda-tone) 10%, var(--ui-surface-raised));
  color: var(--agenda-tone);
  line-height: 1;
  text-align: center;
}

html body.shell-body.area-app .agenda-date strong {
  color: inherit;
  font-family: var(--mono);
  font-size:var(--type-body);
}

html body.shell-body.area-app .agenda-date span {
  margin-top: 3px;
  font-size:var(--type-caption);
  font-weight: 800;
  letter-spacing: .1em;
}

html body.shell-body.area-app .agenda-person {
  display: grid;
  min-width: 0;
  gap: 3px;
}

html body.shell-body.area-app .agenda-person strong,
html body.shell-body.area-app .agenda-person small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body.shell-body.area-app .agenda-person strong {
  color: var(--text);
  font-size:var(--type-caption);
}

html body.shell-body.area-app .agenda-person small {
  color: var(--muted);
  font-size:var(--type-caption);
}

html body.shell-body.area-app .agenda-status {
  padding: 5px 8px;
  border: 1px solid color-mix(in srgb, var(--agenda-tone) 34%, var(--ui-edge));
  border-radius: 999px;
  background: color-mix(in srgb, var(--agenda-tone) 8%, transparent);
  color: var(--agenda-tone);
  font-size:var(--type-caption);
  font-weight: 750;
  line-height: 1.2;
  white-space: nowrap;
}

html body.shell-body.area-app .agenda-amount {
  display: grid;
  min-width: 68px;
  gap: 3px;
  text-align: right;
}

html body.shell-body.area-app .agenda-amount strong {
  color: var(--text);
  font-family: var(--mono);
  font-size:var(--type-caption);
}

html[data-theme="light"] body.shell-body.area-app .dashboard-revenue-chart {
  background-color: color-mix(in srgb, var(--dashboard-panel-body) 92%, white) !important;
}

@media (max-width: 620px) {
  html body.shell-body.area-app .dashboard-chart-overview {
    align-items: flex-end;
  }

  html body.shell-body.area-app .dashboard-trend {
    max-width: 58%;
    padding: 6px 8px;
    font-size:var(--type-caption);
  }

  html body.shell-body.area-app .dashboard-revenue-chart {
    height: 200px;
    min-height: 200px;
    padding-inline: 2px;
  }

  html body.shell-body.area-app .dashboard-revenue-chart .bar-value {
    max-width: 50px;
    font-size:var(--type-caption);
  }

  html body.shell-body.area-app .dashboard-revenue-chart .bar {
    width: min(28px, 56%);
  }

  html body.shell-body.area-app .dashboard-revenue-chart time {
    font-size:var(--type-caption);
  }

  html body.shell-body.area-app .dashboard-agenda-item {
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 10px;
    padding-block: 11px;
  }

  html body.shell-body.area-app .agenda-date {
    width: 40px;
    min-height: 43px;
  }

  html body.shell-body.area-app .agenda-status {
    grid-column: 2;
    justify-self: start;
  }

  html body.shell-body.area-app .agenda-amount {
    grid-column: 3;
    grid-row: 1 / span 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body.shell-body.area-app .dashboard-grid > .panel:hover {
    transform: none;
  }
}

.modal-card {
  border-color: var(--ui-edge-tonal) !important;
  background: var(--ui-surface) !important;
}

.modal-head,
.settings-modal-card > .modal-head {
  border-color: var(--ui-edge-soft) !important;
  background: var(--ui-surface-raised) !important;
}

.modal .form-actions {
  background: var(--ui-surface) !important;
  backdrop-filter: none;
}

:where(.page-content > .page-head, .console-hero, .modal-head, .auth-shell, .admin-login-card)::before {
  content: none !important;
  display: none !important;
}

.shell-body :where(
  .security-code-panel,
  .security-explainer,
  .email-change-code,
  .sessions-summary,
  .modal-context-row,
  .modal-safety-note,
  .password-policy-compact
) {
  border-color: var(--ui-edge-tonal) !important;
  background: var(--ui-surface-raised) !important;
  box-shadow: none !important;
}

.shell-body .session-item.is-current {
  --current-session-accent: var(--success);
  border-color: color-mix(in srgb, var(--current-session-accent) 22%, var(--ui-edge)) !important;
  background: color-mix(in srgb, var(--current-session-accent) var(--semantic-solid-weight), var(--ui-surface-raised)) !important;
}

.shell-body .command-item:hover,
.shell-body .data-table tbody tr:hover {
  background: color-mix(in srgb, var(--ui-surface-raised) 72%, var(--ui-surface)) !important;
}

/* Count and capacity cards are the deliberate exception to neutral surfaces. */
.shell-body .renewal-summary article {
  border-color: color-mix(in srgb, var(--ui-item-accent) 28%, var(--ui-edge)) !important;
  background:
    radial-gradient(300px 180px at 0 0, color-mix(in srgb, var(--ui-item-accent) 11%, transparent), transparent 74%),
    var(--ui-surface) !important;
}

/*
 * Priority card marker: a short, solid segment on the upper border.
 * It is reserved for quantitative, commercial or operationally critical cards.
 */
:where(
  .shell-body .stat-grid .metric-card,
  .shell-body .renewal-summary article,
  .shell-body .plan-summary article,
  .shell-body .admin-plan-card,
  .shell-body .admin-period-card,
  .shell-body .current-plan-hero,
  .shell-body .period-choice,
  .shell-body .plan-choice,
  .shell-body .editor-publish-card,
  .payment-page .payment-context,
  .payment-page .payment-card,
  .public-body .public-period-card,
  .public-body .public-plan-card,
  .priority-card
) {
  position: relative;
  --priority-line-color: var(--ui-blue);
}

.shell-body .stat-grid .metric-card { --priority-line-color: var(--metric-accent); }
.shell-body .renewal-summary article { --priority-line-color: var(--ui-item-accent); }
.shell-body .plan-summary article:nth-child(1) { --priority-line-color: var(--ui-blue); }
.shell-body .plan-summary article:nth-child(2) { --priority-line-color: var(--ui-cyan); }
.shell-body .plan-summary article:nth-child(3) { --priority-line-color: var(--ui-violet); }
.shell-body :where(.admin-plan-card, .admin-period-card, .current-plan-hero, .plan-choice) { --priority-line-color: var(--plan-accent, var(--ui-blue)); }
.shell-body .editor-publish-card { --priority-line-color: var(--preview-accent, var(--ui-violet)); }
.shell-body .period-choice { --priority-line-color: var(--plan-accent, var(--ui-blue)); }
.payment-page .payment-context { --priority-line-color: var(--ui-amber); }
.payment-page .payment-card { --priority-line-color: var(--ui-blue); }
.public-body :where(.public-period-card, .public-plan-card) { --priority-line-color: var(--plan-accent, var(--ui-blue)); }

:where(
  .shell-body .stat-grid .metric-card,
  .shell-body .renewal-summary article,
  .shell-body .plan-summary article,
  .shell-body .admin-plan-card,
  .shell-body .admin-period-card,
  .shell-body .current-plan-hero,
  .shell-body .period-choice,
  .shell-body .plan-choice,
  .shell-body .editor-publish-card,
  .payment-page .payment-context,
  .payment-page .payment-card,
  .public-body .public-period-card,
  .public-body .public-plan-card,
  .priority-card
)::before {
  content: "" !important;
  position: absolute !important;
  z-index: 2 !important;
  top: 1px !important;
  left: 22px !important;
  width: var(--ui-priority-line-width) !important;
  max-width: calc(100% - 44px) !important;
  height: var(--ui-priority-line-height) !important;
  display: block !important;
  border: 0 !important;
  border-radius: 0 0 999px 999px !important;
  background: var(--priority-line-color) !important;
  box-shadow: none !important;
  pointer-events: none;
}

/* Metrics had a legacy high-specificity marker; keep them on the same token. */
html body.shell-body .stat-grid > .metric-card::before {
  display: block !important;
  top: 1px !important;
  left: 22px !important;
  width: var(--ui-priority-line-width) !important;
  max-width: calc(100% - 44px) !important;
  height: 3px !important;
  background: var(--priority-line-color) !important;
  box-shadow: none !important;
}

/* Older circular and full-width accents are replaced by the priority marker. */
.shell-body .plan-summary article::after,
.shell-body .current-plan-hero::after,
.shell-body .admin-plan-accent {
  content: none !important;
  display: none !important;
}

/* Plan cards use an opaque raised surface; the marker carries the accent. */
.shell-body :where(.plan-summary article, .admin-plan-card, .admin-period-card, .current-plan-hero, .period-choice, .plan-choice, .editor-publish-card),
.public-body :where(.public-period-card, .public-plan-card) {
  background: var(--ui-surface-raised) !important;
}

.payment-page :where(.payment-context, .payment-card) {
  background: var(--ui-surface) !important;
}

/* Shared module header material: one inherited recipe for Gestor, Studio and Admin. */
.shell-body.area-app {
  --module-header-accent: var(--ui-blue);
  --module-signal-accent: var(--ui-cyan);
  --manager-signal-base: #07162b;
  --manager-signal-mid: #092b62;
  --manager-signal-peak: #0d3c8c;
}

.shell-body.area-studio,
.shell-body.area-admin {
  --module-header-accent: var(--ui-violet);
  --module-signal-accent: var(--ui-violet);
}

.shell-body:is(.area-app, .area-studio, .area-admin) {
  --module-header-surface: color-mix(in srgb, var(--ui-surface-raised) 90%, var(--module-header-accent));
  --primary-hero-light-origin: 100% -22%;
  --secondary-card-peak-weight: 18%;
  --secondary-card-mid-weight: 10%;
  --secondary-card-base-weight: 4%;
  --secondary-card-highlight-weight: 5%;
  --ui-interactive-surface: color-mix(
    in oklab,
    var(--ui-surface-raised) 95%,
    var(--ui-accent) 5%
  );
  --ui-interactive-surface-hover: color-mix(
    in oklab,
    var(--ui-surface-raised) 91%,
    var(--ui-accent) 9%
  );
  --ui-secondary-surface: color-mix(in srgb, var(--ui-surface-raised) 92%, var(--ui-surface));
  --ui-secondary-edge: var(--ui-edge);
  --ui-secondary-shadow: 0 4px 12px rgba(2, 8, 20, .18), inset 0 1px 0 rgba(255, 255, 255, .035);
  --ui-interactive-edge: color-mix(in srgb, var(--ui-accent) 15%, var(--ui-edge));
  --ui-interactive-shadow:
    0 3px 10px rgba(2, 8, 20, .12),
    inset 0 1px 0 rgba(255, 255, 255, .03);
  --ui-query-surface: color-mix(
    in oklab,
    var(--ui-surface) 98%,
    var(--ui-accent) 2%
  );
  --ui-query-surface-hover: color-mix(
    in oklab,
    var(--ui-surface) 96%,
    var(--ui-accent) 4%
  );
  --ui-query-edge: color-mix(in srgb, var(--ui-accent) 8%, var(--ui-edge));
  --ui-query-edge-hover: color-mix(in srgb, var(--ui-accent) 14%, var(--ui-edge));
  --ui-query-focus-edge: var(--ui-query-edge-hover);
  --ui-query-shadow: inset 0 1px 0 rgba(255, 255, 255, .012);
  --ui-form-surface: color-mix(
    in oklab,
    var(--ui-surface-raised) 98%,
    var(--ui-accent) 2%
  );
  --ui-form-surface-hover: color-mix(
    in oklab,
    var(--ui-surface-raised) 97%,
    var(--ui-accent) 3%
  );
  --ui-form-edge: color-mix(in srgb, var(--ui-accent) 10%, var(--ui-edge));
  --ui-form-edge-hover: color-mix(in srgb, var(--ui-accent) 18%, var(--ui-edge));
  --ui-form-shadow:
    0 2px 7px rgba(2, 8, 20, .1),
    inset 0 1px 0 rgba(255, 255, 255, .018);
  --secondary-card-peak: color-mix(
    in oklab,
    var(--primary-hero-peak) var(--secondary-card-peak-weight),
    var(--ui-surface-raised)
  );
  --secondary-card-mid: color-mix(
    in oklab,
    var(--primary-hero-mid) var(--secondary-card-mid-weight),
    var(--ui-surface-raised)
  );
  --secondary-card-base: color-mix(
    in oklab,
    var(--primary-hero-base) var(--secondary-card-base-weight),
    var(--ui-surface-raised)
  );
  --secondary-card-gradient: linear-gradient(
    90deg in oklab,
    var(--secondary-card-peak) 0%,
    color-mix(in oklab, var(--secondary-card-peak) 84%, var(--secondary-card-mid)) 12%,
    color-mix(in oklab, var(--secondary-card-peak) 68%, var(--secondary-card-mid)) 24%,
    color-mix(in oklab, var(--secondary-card-peak) 52%, var(--secondary-card-mid)) 36%,
    color-mix(in oklab, var(--secondary-card-peak) 36%, var(--secondary-card-mid)) 48%,
    color-mix(in oklab, var(--secondary-card-peak) 20%, var(--secondary-card-mid)) 60%,
    var(--secondary-card-mid) 68%,
    color-mix(in oklab, var(--secondary-card-mid) 74%, var(--secondary-card-base)) 76%,
    color-mix(in oklab, var(--secondary-card-mid) 50%, var(--secondary-card-base)) 84%,
    color-mix(in oklab, var(--secondary-card-mid) 26%, var(--secondary-card-base)) 92%,
    var(--secondary-card-base) 100%
  );
}

html[data-theme="light"] .shell-body:is(.area-app, .area-studio, .area-admin) {
  --secondary-card-peak-weight: 8%;
  --secondary-card-mid-weight: 4%;
  --secondary-card-base-weight: 1%;
  --secondary-card-highlight-weight: 2%;
  --ui-interactive-surface: color-mix(
    in oklab,
    var(--ui-surface-raised) 99%,
    var(--ui-accent) 1%
  );
  --ui-interactive-surface-hover: color-mix(
    in oklab,
    var(--ui-surface-raised) 98%,
    var(--ui-accent) 2%
  );
  --ui-secondary-surface: color-mix(in srgb, var(--ui-surface-raised) 96%, var(--ui-surface));
  --ui-secondary-edge: var(--ui-edge);
  --ui-secondary-shadow: 0 4px 12px rgba(15, 23, 42, .07), inset 0 1px 0 rgba(255, 255, 255, .72);
  --ui-interactive-edge: color-mix(in srgb, var(--ui-accent) 11%, var(--ui-edge));
  --ui-interactive-shadow:
    0 3px 10px rgba(15, 23, 42, .055),
    inset 0 1px 0 rgba(255, 255, 255, .74);
  --ui-query-surface: color-mix(
    in oklab,
    var(--ui-surface) 99%,
    var(--ui-accent) 1%
  );
  --ui-query-surface-hover: color-mix(
    in oklab,
    var(--ui-surface) 98%,
    var(--ui-accent) 2%
  );
  --ui-query-edge: color-mix(in srgb, var(--ui-accent) 7%, var(--ui-edge));
  --ui-query-edge-hover: color-mix(in srgb, var(--ui-accent) 12%, var(--ui-edge));
  --ui-query-shadow: inset 0 1px 0 rgba(255, 255, 255, .65);
  --ui-form-surface: color-mix(
    in oklab,
    var(--ui-surface-raised) 100%,
    var(--ui-accent) 0%
  );
  --ui-form-surface-hover: color-mix(
    in oklab,
    var(--ui-surface-raised) 99%,
    var(--ui-accent) 1%
  );
  --ui-form-edge: color-mix(in srgb, var(--ui-accent) 8%, var(--ui-edge));
  --ui-form-edge-hover: color-mix(in srgb, var(--ui-accent) 14%, var(--ui-edge));
  --ui-form-shadow:
    0 2px 8px rgba(15, 23, 42, .05),
    inset 0 1px 0 rgba(255, 255, 255, .72);
}

.shell-body.area-app .console-hero .console-user-name {
  color: var(--ui-accent-content) !important;
}

/* Resumen alone carries one continuous blue-to-cyan reading sequence. */
.shell-body.dashboard-screen {
  --dashboard-copy-blue: var(--ui-accent-strong);
  --dashboard-copy-bridge: var(--ui-blue);
  --dashboard-copy-cyan: #0ea5e9;
  --dashboard-copy-end: #38bdf8;
}

html[data-theme="light"] .shell-body.dashboard-screen {
  --dashboard-copy-blue: var(--ui-accent-hover);
  --dashboard-copy-bridge: var(--ui-accent-strong);
  --dashboard-copy-cyan: #0284c7;
  --dashboard-copy-end: #0369a1;
}

.shell-body.dashboard-screen .console-hero .console-user-name,
.shell-body.dashboard-screen .console-hero .page-kicker,
.shell-body.dashboard-screen .topbar .eyebrow {
  display: inline-block;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.shell-body.dashboard-screen .console-hero .console-user-name {
  color: var(--dashboard-copy-blue) !important;
  /* The period at the right edge is the blue origin; the color travels left through the name. */
  background-image: linear-gradient(270deg, var(--dashboard-copy-blue), var(--dashboard-copy-bridge));
  background-image: linear-gradient(270deg in oklab, var(--dashboard-copy-blue), var(--dashboard-copy-bridge));
}

.shell-body.dashboard-screen .console-hero .page-kicker {
  color: var(--dashboard-copy-bridge) !important;
  background-image: linear-gradient(90deg, var(--dashboard-copy-bridge), var(--dashboard-copy-cyan));
  background-image: linear-gradient(90deg in oklab, var(--dashboard-copy-bridge), var(--dashboard-copy-cyan));
}

.shell-body.dashboard-screen .topbar .eyebrow {
  color: var(--dashboard-copy-cyan) !important;
  background-image: linear-gradient(90deg, var(--dashboard-copy-cyan), var(--dashboard-copy-end));
  background-image: linear-gradient(90deg in oklab, var(--dashboard-copy-cyan), var(--dashboard-copy-end));
}

.shell-body:is(.area-app, .area-studio, .area-admin) .console-hero {
  border: 1px solid var(--ui-edge-tonal) !important;
  background: var(--module-header-surface) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025) !important;
}

/* Second-level surfaces receive one full-height light edge from the left. */
.shell-body .page-content > .page-head {
  border: 1px solid color-mix(
    in srgb,
    var(--primary-hero-highlight) 14%,
    var(--ui-edge-tonal)
  ) !important;
  background: var(--secondary-card-gradient) !important;
  background-clip: padding-box !important;
  box-shadow:
    var(--ui-shadow-card),
    inset 0 1px 0 color-mix(
      in srgb,
      var(--primary-hero-highlight) var(--secondary-card-highlight-weight),
      transparent
  ) !important;
}

/* Interactive controls preserve a consistent material hierarchy. */
.shell-body :is(
  .field input,
  .field select,
  .field textarea,
  .search-field,
  .password-control,
  .data-control,
  .filter-control,
  .studio-filter-search,
  .bloc-search,
  .studio-filter-options select,
  .studio-favorite-filter > span
) {
  color: var(--text) !important;
  border-color: var(--control-material-edge, var(--ui-interactive-edge)) !important;
  background: var(--control-material-surface, var(--ui-interactive-surface)) !important;
  box-shadow: var(--control-material-shadow, var(--ui-interactive-shadow)) !important;
}

/* Search is a supporting query surface, always quieter than its module header. */
.shell-body :is(.search-field, .studio-filter-search, .bloc-search) {
  --control-material-surface: var(--ui-query-surface);
  --control-material-surface-hover: var(--ui-query-surface-hover);
  --control-material-edge: var(--ui-query-edge);
  --control-material-edge-hover: var(--ui-query-edge-hover);
  --control-material-shadow: var(--ui-query-shadow);
}

/* Form fields stay quieter than search and filter controls. */
.shell-body :is(
  .field input,
  .field select,
  .field textarea,
  .password-control,
  .data-control,
  .filter-control
) {
  --control-material-surface: var(--ui-form-surface);
  --control-material-surface-hover: var(--ui-form-surface-hover);
  --control-material-edge: var(--ui-form-edge);
  --control-material-edge-hover: var(--ui-form-edge-hover);
  --control-material-shadow: var(--ui-form-shadow);
}

.shell-body .button.secondary {
  border-color: var(--ui-secondary-edge) !important;
  background: var(--ui-secondary-surface) !important;
  box-shadow: var(--ui-secondary-shadow) !important;
}

.shell-body .icon-button {
  border-color: var(--ui-interactive-edge) !important;
  background: var(--ui-interactive-surface) !important;
  box-shadow: var(--ui-interactive-shadow) !important;
}

.shell-body :is(
  .field input,
  .field select,
  .field textarea,
  .search-field,
  .password-control,
  .data-control,
  .filter-control,
  .studio-filter-search,
  .bloc-search,
  .studio-filter-options select,
  .studio-favorite-filter > span
):hover:not(:disabled),
.shell-body .button.secondary:hover,
.shell-body .icon-button:hover {
  border-color: var(--control-material-edge-hover, color-mix(in srgb, var(--ui-accent) 48%, var(--ui-edge))) !important;
  background: var(--control-material-surface-hover, var(--ui-interactive-surface-hover)) !important;
}

/* Global table-action hierarchy for Gestor, Studio and Administration. */
.shell-body .data-table .button.small {
  border-radius: 9px !important;
}

.shell-body .data-table .button.primary {
  box-shadow: 0 6px 14px color-mix(in srgb, var(--ui-accent) 20%, transparent) !important;
}

.shell-body .data-table .button.primary:hover,
.shell-body .data-table .button.primary:focus-visible {
  box-shadow: 0 9px 20px color-mix(in srgb, var(--ui-accent) 25%, transparent) !important;
}

.shell-body .data-table .button.secondary .icon {
  color: var(--muted);
}

.shell-body .data-table .button.secondary:hover .icon,
.shell-body .data-table .button.secondary:focus-visible .icon,
.shell-body .data-table details[open] > .button.secondary .icon {
  color: var(--ui-accent-content);
}

/* Shared platform identity: official marks replace arbitrary color swatches. */
.platform-logo {
  --platform-brand: var(--ui-accent);
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  flex: none;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--platform-brand) 30%, var(--ui-edge));
  border-radius: 11px;
  background: color-mix(in srgb, var(--platform-brand) 8%, var(--ui-surface-raised));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}

.platform-logo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  border-radius: inherit;
}

.platform-logo-netflix { --platform-brand: #e50914; background: #050505; }
.platform-logo-disney-plus { --platform-brand: #6cc1d7; background: #071827; }
.platform-logo-prime-video { --platform-brand: #0779ff; background: #071827; }
.platform-logo-hbo-max { --platform-brand: #ffffff; background: #050505; border-color: rgba(255, 255, 255, .2); }
.platform-logo-crunchyroll { --platform-brand: #f47521; background: #f47521; }
.platform-logo-paramount-plus { --platform-brand: #1464f6; background: #1464f6; }
.platform-logo-youtube,
.platform-logo-youtube-music { --platform-brand: #ff0033; background: #fff; border-color: rgba(255, 255, 255, .7); }
.platform-logo-generic > span { color: var(--platform-brand); font:800 var(--type-ui) var(--font); }
.platform-logo-inline { width: 34px; height: 34px; border-radius: 9px; }
.platform-logo-detail,
.platform-logo-sale-detail { width: 52px; height: 52px; border-radius: 14px; }
.service-platform-cell { min-width: 0; display: flex; align-items: center; gap: 10px; }
.service-platform-cell .table-name { min-width: 0; }

@media (max-width: 1180px) {
  .platform-logo-detail,
  .platform-logo-sale-detail { width: 42px; height: 42px; border-radius: 11px; }
}

@media (min-width: 1181px) {
  .shell-body .stat-grid.data-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

.shell-body :is(
  .field input,
  .field select,
  .field textarea,
  .search-field,
  .password-control,
  .data-control,
  .filter-control,
  .studio-filter-search,
  .bloc-search,
  .studio-filter-options select
):is(:focus, :focus-within, :focus-visible),
.shell-body .studio-favorite-filter input:focus-visible + span {
  border-color: var(--ui-focus-edge) !important;
  outline: none !important;
  outline-offset: 0 !important;
  box-shadow:
    0 0 0 var(--ui-form-focus-width) var(--ui-form-focus-color),
    var(--control-material-shadow, var(--ui-interactive-shadow)) !important;
}

.shell-body :where(.search-field, .studio-filter-search, .bloc-search) > .icon {
  color: color-mix(in srgb, var(--ui-accent-content) 70%, var(--muted));
}

.shell-body :where(.search-field, .studio-filter-search, .bloc-search) input {
  color: var(--text) !important;
  caret-color: var(--ui-accent-content);
}

.shell-body :where(.search-field, .studio-filter-search, .bloc-search) input::placeholder {
  color: color-mix(in srgb, var(--muted) 90%, var(--text)) !important;
  opacity: 1;
}

/* Query focus stays stable when the pointer enters or leaves the control. */
body.shell-body :is(.search-field, .studio-filter-search, .bloc-search):is(:focus, :focus-visible, :focus-within) {
  border-color: var(--ui-query-focus-edge) !important;
  outline: none !important;
  box-shadow: var(--ui-query-shadow) !important;
}

.shell-body .studio-favorite-filter input:checked + span {
  color: var(--ui-on-accent) !important;
  border-color: var(--ui-accent-strong) !important;
  background: color-mix(
    in oklab,
    var(--ui-accent-strong) 78%,
    var(--ui-interactive-surface)
  ) !important;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--ui-accent) 20%, transparent) !important;
}

.shell-body:is(.area-app, .area-studio, .area-admin) .console-hero .hero-signal {
  border-left-color: color-mix(in srgb, var(--module-header-accent) 30%, var(--ui-edge-soft)) !important;
  background: color-mix(in srgb, var(--module-header-surface) 90%, var(--module-signal-accent)) !important;
}

.shell-body:is(.area-app, .area-studio, .area-admin) .console-hero .signal-radar {
  color: var(--module-signal-accent) !important;
  border-color: color-mix(in srgb, var(--module-signal-accent) 50%, var(--ui-edge)) !important;
  background: color-mix(in srgb, var(--ui-surface-raised) 90%, var(--module-signal-accent)) !important;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--module-signal-accent) 12%, transparent) !important;
}

/* Workspace heroes share one material recipe; each area only supplies its palette. */
.shell-body.area-app {
  --primary-card-accent: var(--ui-blue);
  --primary-hero-base: #07111d;
  --primary-hero-mid: #08285c;
  --primary-hero-peak: #1147a3;
  --primary-hero-highlight: var(--ui-cyan);
}

.shell-body:is(.area-studio, .area-admin) { --primary-card-accent: var(--ui-violet); }

.shell-body.area-studio {
  --primary-hero-base: #0b1020;
  --primary-hero-mid: #261a59;
  --primary-hero-peak: #5632a4;
  --primary-hero-highlight: var(--ui-accent-bright);
}

.shell-body.area-admin {
  --primary-hero-base: #0a0f1e;
  --primary-hero-mid: #23184d;
  --primary-hero-peak: #492a91;
  --primary-hero-highlight: var(--ui-accent-content);
}

.shell-body:is(.area-app, .area-studio, .area-admin) :is(.console-hero, .studio-command-hero) {
  border-color: var(--ui-edge-tonal) !important;
  background:
    radial-gradient(
      520px 310px at 92% 5%,
      color-mix(in srgb, var(--primary-card-accent) 17%, transparent),
      transparent 72%
    ),
    var(--ui-surface-raised) !important;
  background-clip: padding-box !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025) !important;
}

/* Shared dark hero sweep: Gestor, Studio and Admin inherit the same depth and interpolation. */
html:not([data-theme="light"]) :is(
  .shell-body.area-app .console-hero,
  .shell-body.area-studio .studio-command-hero,
  .shell-body.area-admin .console-hero
) {
  border-color: var(--ui-edge-tonal) !important;
  background:
    radial-gradient(
      ellipse 88% 170% at var(--primary-hero-light-origin) in oklab,
      var(--primary-hero-peak) 0%,
      color-mix(in oklab, var(--primary-hero-peak) 88%, var(--primary-hero-mid)) 14%,
      color-mix(in oklab, var(--primary-hero-peak) 68%, var(--primary-hero-mid)) 28%,
      color-mix(in oklab, var(--primary-hero-peak) 46%, var(--primary-hero-mid)) 42%,
      var(--primary-hero-mid) 56%,
      color-mix(in oklab, var(--primary-hero-mid) 68%, var(--primary-hero-base)) 70%,
      color-mix(in oklab, var(--primary-hero-mid) 36%, var(--primary-hero-base)) 82%,
      color-mix(in oklab, var(--primary-hero-mid) 14%, var(--primary-hero-base)) 92%,
      var(--primary-hero-base) 100%
    ) !important;
  background-clip: padding-box !important;
  box-shadow:
    var(--ui-shadow-card),
    inset 0 1px 0 color-mix(in srgb, var(--primary-hero-highlight) 10%, transparent) !important;
}

/* Shared operational signal core: Gestor and Admin inherit one geometry and their own accent. */
.shell-body:is(.area-app, .area-admin) .console-hero .hero-signal {
  --signal-radar-size: 120px;
  display: grid;
  grid-template-columns: var(--signal-radar-size) minmax(0, 1fr);
  align-items: center;
  justify-items: stretch;
  gap: 18px;
  padding: 22px 20px;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid var(--ui-edge-tonal) !important;
  border-radius: 16px;
  background:
    radial-gradient(
      230px 170px at 18% 48%,
      color-mix(in srgb, var(--primary-card-accent) 12%, transparent),
      transparent 72%
    ),
    color-mix(in srgb, var(--ui-surface-raised) 96%, var(--primary-card-accent)) !important;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--primary-card-accent) 8%, transparent) !important;
}

html:not([data-theme="light"]) .shell-body.area-app .console-hero .hero-signal {
  border-color: var(--ui-edge-tonal) !important;
  background:
    radial-gradient(
      ellipse 104% 152% at 72% -18% in oklab,
      var(--manager-signal-peak) 0%,
      color-mix(in oklab, var(--manager-signal-peak) 80%, var(--manager-signal-mid)) 18%,
      color-mix(in oklab, var(--manager-signal-peak) 56%, var(--manager-signal-mid)) 36%,
      var(--manager-signal-mid) 52%,
      color-mix(in oklab, var(--manager-signal-mid) 68%, var(--manager-signal-base)) 68%,
      color-mix(in oklab, var(--manager-signal-mid) 32%, var(--manager-signal-base)) 84%,
      var(--manager-signal-base) 100%
    ) !important;
  background-clip: padding-box !important;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ui-cyan) 12%, transparent) !important;
}

.shell-body:is(.area-app, .area-admin) .console-hero .signal-radar {
  position: relative;
  width: var(--signal-radar-size);
  height: var(--signal-radar-size);
  min-width: var(--signal-radar-size);
  aspect-ratio: 1;
  box-sizing: border-box;
  flex: 0 0 var(--signal-radar-size);
  display: grid;
  place-items: center;
  border: 0 !important;
  border-radius: 50%;
  background: transparent !important;
  box-shadow: none !important;
}

.shell-body:is(.area-app, .area-admin) .console-hero .signal-radar::before {
  content: "";
  display: block !important;
  position: absolute;
  inset: 4.166667%;
  border: 2px solid transparent;
  border-top-color: color-mix(in srgb, var(--module-signal-accent) 72%, transparent);
  border-left-color: color-mix(in srgb, var(--module-signal-accent) 48%, transparent);
  border-radius: 50%;
  transform: rotate(-32deg);
}

.shell-body:is(.area-app, .area-admin) .console-hero .signal-radar::after {
  content: "";
  display: block !important;
  position: absolute;
  top: 20.833333%;
  left: 5.833333%;
  width: 7.5%;
  height: 7.5%;
  border-radius: 50%;
  background: var(--module-signal-accent);
  box-shadow: 0 0 0 clamp(2px, .8vw, 4px) color-mix(in srgb, var(--module-signal-accent) 9%, transparent);
}

.shell-body:is(.area-app, .area-admin) .console-hero .signal-radar > i:first-child {
  display: block !important;
  position: absolute;
  inset: 15%;
  width: auto;
  height: auto;
  border: 1px solid transparent;
  border-top-color: color-mix(in srgb, var(--module-signal-accent) 25%, transparent);
  border-radius: 50%;
  background: none;
  transform: rotate(22deg);
}

.shell-body:is(.area-app, .area-admin) .console-hero .signal-radar > i:nth-child(2) {
  display: none;
}

.shell-body:is(.area-app, .area-admin) .console-hero .signal-radar > span {
  position: relative;
  z-index: 1;
  width: 51.666667%;
  height: 51.666667%;
  display: grid;
  place-items: center;
  color: var(--module-signal-accent);
  border: 1px solid color-mix(in srgb, var(--module-signal-accent) 52%, var(--ui-edge));
  border-radius: 25.806452%;
  background: color-mix(in srgb, var(--ui-surface-raised) 95%, var(--module-signal-accent)) !important;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--module-signal-accent) 11%, transparent);
}

.shell-body:is(.area-app, .area-admin) .console-hero .signal-radar > span .icon {
  width: 43.548387%;
  height: 43.548387%;
}

.shell-body:is(.area-app, .area-admin) .console-hero .signal-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.shell-body:is(.area-app, .area-admin) .console-hero .signal-copy small {
  color: color-mix(in srgb, var(--module-signal-accent) 42%, var(--muted));
}

.shell-body:is(.area-app, .area-admin) .console-hero .signal-copy strong {
  margin: 5px 0 0;
  font-size:var(--type-subtitle);
  line-height: 1.2;
}

.shell-body:is(.area-app, .area-admin) .console-hero .signal-copy .signal-steps {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 11px;
}

.shell-body:is(.area-app, .area-admin) .console-hero .signal-copy .signal-steps > i {
  width: 28px;
  height: 5px;
  margin: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--module-signal-accent) 24%, var(--ui-edge));
  box-shadow: none;
}

.shell-body:is(.area-app, .area-admin) .console-hero .signal-copy .signal-steps > i:first-child {
  background: var(--module-signal-accent);
}

.shell-body:is(.area-app, .area-admin) .console-hero .signal-copy .signal-state {
  display: flex;
  align-items: center;
  white-space: nowrap;
  color: var(--muted);
}

.shell-body:is(.area-app, .area-admin) .console-hero .signal-copy .signal-state > i {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 9%, transparent);
}

.shell-body.area-app .console-hero .hero-signal.signal-critical {
  --module-signal-accent: var(--danger);
  --signal-state-color: var(--danger);
}

.shell-body.area-app .console-hero .hero-signal.signal-warning {
  --module-signal-accent: var(--ui-amber);
  --signal-state-color: var(--ui-amber);
}

.shell-body.area-app .console-hero .hero-signal.signal-healthy {
  --module-signal-accent: var(--ui-cyan);
  --signal-state-color: var(--success);
}

.shell-body.area-app .console-hero a.hero-signal {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.shell-body.area-app .console-hero a.hero-signal:hover {
  border-color: color-mix(in srgb, var(--module-signal-accent) 38%, var(--ui-edge-tonal)) !important;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--module-signal-accent) 14%, transparent), var(--ui-shadow-card) !important;
}

.shell-body.area-app .console-hero .signal-copy .signal-steps > i.is-good {
  background: var(--success);
  box-shadow: 0 0 8px color-mix(in srgb, var(--success) 28%, transparent);
}

.shell-body.area-app .console-hero .signal-copy .signal-steps > i.is-warning {
  background: var(--ui-amber);
  box-shadow: 0 0 8px color-mix(in srgb, var(--ui-amber) 28%, transparent);
}

.shell-body.area-app .console-hero .signal-copy .signal-steps > i.is-critical {
  background: var(--danger);
  box-shadow: 0 0 8px color-mix(in srgb, var(--danger) 30%, transparent);
}

.shell-body.area-app .console-hero .signal-copy .signal-state {
  white-space: normal;
  line-height: 1.4;
}

.shell-body.area-app .console-hero .signal-copy .signal-state > i {
  background: var(--signal-state-color, var(--success));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal-state-color, var(--success)) 9%, transparent);
}

/* Gestor status details use explicit labels; color only reinforces their meaning. */
.shell-body.area-app .console-hero .signal-copy .signal-status-list {
  width: 100%;
  display: grid;
  gap: 6px;
  margin: 12px 0 10px;
}

.shell-body.area-app .console-hero .signal-copy .signal-status-item {
  --signal-status-accent: var(--ui-cyan);
  min-width: 0;
  min-height: 28px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 8px;
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--signal-status-accent) 28%, var(--ui-edge));
  border-radius: 8px;
  background: color-mix(in srgb, var(--signal-status-accent) 8%, transparent);
}

.shell-body.area-app .console-hero .signal-copy .signal-status-item.is-good {
  --signal-status-accent: var(--success);
}

.shell-body.area-app .console-hero .signal-copy .signal-status-item.is-warning {
  --signal-status-accent: var(--warning);
}

.shell-body.area-app .console-hero .signal-copy .signal-status-item.is-critical {
  --signal-status-accent: var(--danger);
}

.shell-body.area-app .console-hero .signal-copy .signal-status-icon {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  color: var(--signal-status-accent);
}

.shell-body.area-app .console-hero .signal-copy .signal-status-text {
  min-width: 0;
  display: inline;
  color: color-mix(in srgb, var(--text) 78%, var(--muted));
  font-size:var(--type-caption);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.shell-body.area-app .console-hero .signal-copy .signal-status-item strong {
  display: inline;
  margin: 0;
  color: color-mix(in srgb, var(--signal-status-accent) 74%, var(--text));
  font:800 var(--type-caption)/1 var(--mono);
}

.shell-body.area-app .console-hero .signal-copy .signal-action {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  padding: 0 9px;
  color: color-mix(in srgb, var(--module-signal-accent) 54%, var(--text));
  border: 1px solid color-mix(in srgb, var(--module-signal-accent) 34%, var(--ui-edge));
  border-radius: 8px;
  background: color-mix(in srgb, var(--module-signal-accent) 9%, transparent);
  font-size:var(--type-caption);
  font-weight: 750;
}

.shell-body.area-app .console-hero .signal-copy .signal-action > span {
  display: inline;
}

.shell-body.area-app .console-hero .signal-copy .signal-action .icon {
  transition: transform 180ms ease-out;
}

.shell-body.area-app .console-hero a.hero-signal:hover .signal-action .icon {
  transform: translateX(2px);
}

@media (prefers-reduced-motion: reduce) {
  .shell-body.area-app .console-hero .signal-copy .signal-action .icon {
    transition: none;
  }
}

@media (max-width: 1499px) {
  .shell-body.dashboard-screen.area-app .console-hero {
    grid-template-columns: minmax(0, 1fr) 320px;
  }

  .shell-body:is(.area-app, .area-admin) .console-hero .hero-signal {
    --signal-radar-size: 104px;
    grid-template-columns: var(--signal-radar-size) minmax(0, 1fr);
    gap: 12px;
    padding-inline: 14px;
  }

  .shell-body:is(.area-app, .area-admin) .console-hero .signal-copy .signal-steps > i {
    width: 22px;
  }

  .shell-body:is(.area-app, .area-admin) .console-hero .signal-copy strong {
    font-size:var(--type-subtitle);
  }
}

.shell-body.dashboard-screen.area-app .console-hero .signal-copy > small:first-child {
  white-space: nowrap;
}

/* Metric chroma is painted inside each rounded card and never spills outside. */
html body.shell-body .stat-grid > .metric-card {
  contain: paint;
  overflow: hidden !important;
  background-clip: padding-box !important;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--metric-accent) 11%, transparent) !important;
}

html body.shell-body .stat-grid > .metric-card:hover {
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--metric-accent) 15%, transparent) !important;
}

/* Global utilities: shared by Gestor, Studio and Admin, with contextual color only. */
.shell-body.area-app { --utility-accent: var(--ui-accent-content); }
.shell-body:is(.area-studio, .area-admin) { --utility-accent: var(--ui-violet); }

.top-actions .utility-control {
  position: relative;
  width: auto;
  min-width: 82px;
  padding: 0 11px;
  display: inline-flex;
  gap: 8px;
  font-size:var(--type-caption);
}

.shell-body .top-actions > :where(.topbar-business, .utility-control, .theme-control) {
  color: #fff !important;
  border-color: transparent !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--ui-control) 94%, var(--ui-cyan)) 0%, var(--ui-control) 72%) padding-box,
    linear-gradient(135deg, color-mix(in srgb, var(--ui-cyan) 42%, var(--ui-edge)) 0%, color-mix(in srgb, var(--ui-blue) 34%, var(--ui-edge)) 58%, var(--ui-edge) 100%) border-box !important;
}

.shell-body .top-actions > :where(.topbar-business, .utility-control, .theme-control) :where(.icon, strong, span) {
  color: #fff;
}

.shell-body .top-actions > :where(.topbar-business, .utility-control, .theme-control):hover {
  color: #fff !important;
  border-color: transparent !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--ui-control) 88%, var(--ui-cyan)) 0%, var(--ui-control) 74%) padding-box,
    linear-gradient(135deg, color-mix(in srgb, var(--ui-cyan) 62%, var(--ui-edge)) 0%, color-mix(in srgb, var(--ui-blue) 48%, var(--ui-edge)) 58%, var(--ui-edge-strong) 100%) border-box !important;
}

.top-actions .desktop-shortcuts { display: none; }
.desktop-utilities .top-actions .desktop-shortcuts { display: inline-flex; }

.top-actions .utility-control[aria-expanded="true"] {
  color: #fff;
  border-color: transparent !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--ui-control) 88%, var(--utility-accent)) 0%, var(--ui-control) 74%) padding-box,
    linear-gradient(135deg, color-mix(in srgb, var(--ui-cyan) 62%, var(--ui-edge)) 0%, color-mix(in srgb, var(--ui-blue) 48%, var(--ui-edge)) 58%, var(--ui-edge-strong) 100%) border-box !important;
}

.bloc-control [data-bloc-count] {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  color: #fff;
  border: 2px solid var(--ui-navigation-surface);
  border-radius: 999px;
  background: var(--utility-accent);
  font:700 var(--type-caption)/1 var(--font);
}

.global-utility-backdrop {
  position: fixed;
  inset: 0;
  z-index: 54;
  border: 0;
}

.shortcuts-popover,
.bloc-panel {
  position: fixed;
  z-index: 55;
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--utility-accent) 35%, var(--ui-edge));
  background: var(--ui-surface-raised);
  box-shadow: var(--ui-shadow-modal);
}

.shortcuts-popover[hidden],
.bloc-panel[hidden],
.global-utility-backdrop[hidden] { display: none !important; }

.shortcuts-popover {
  top: 76px;
  right: 116px;
  width: min(390px, calc(100vw - 32px));
  padding: 18px;
  border-radius: 16px;
}

.bloc-panel {
  top: 16px;
  right: 16px;
  bottom: 16px;
  width: min(440px, calc(100vw - 32px));
  padding: 20px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 18px;
}

.utility-panel-head {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 38px;
  align-items: center;
  gap: 11px;
}

.utility-panel-head .utility-panel-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: var(--utility-accent);
  border: 1px solid color-mix(in srgb, var(--utility-accent) 38%, var(--ui-edge));
  border-radius: 11px;
  background: color-mix(in srgb, var(--ui-surface) 92%, var(--utility-accent));
}

.utility-panel-head small {
  display: block;
  margin-bottom: 3px;
  color: var(--utility-accent);
  font:700 var(--type-caption)/1.2 var(--mono);
  letter-spacing: .13em;
}

.utility-panel-head h2 {
  margin: 0;
  font-size:var(--type-subtitle);
  line-height: 1.25;
  letter-spacing: -.02em;
}

.utility-panel-head > .icon-button { width: 38px; height: 38px; }
.utility-intro { margin: 12px 0 16px; color: var(--muted); font-size:var(--type-caption); line-height: 1.55; }

.shortcut-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.shortcut-grid > button,
.shortcut-grid > a {
  min-height: 72px;
  padding: 13px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  color: var(--text);
  text-align: left;
  border: 1px solid var(--ui-edge);
  border-radius: 12px;
  background: var(--ui-surface);
  cursor: pointer;
  text-decoration: none;
}
.shortcut-grid > button > .icon,
.shortcut-grid > a > .icon { color: var(--utility-accent); }
.shortcut-grid > button.shortcut-studio,
.shortcut-grid > a.shortcut-studio {
  border-color: color-mix(in srgb, var(--studio) 30%, var(--ui-edge));
  background: color-mix(in srgb, var(--studio) 7%, var(--ui-surface));
}
.shortcut-grid > button.shortcut-studio > .icon,
.shortcut-grid > a.shortcut-studio > .icon { color: var(--studio); }
.shortcut-grid > button span,
.shortcut-grid > a span { min-width: 0; display: grid; gap: 4px; }
.shortcut-grid > button strong,
.shortcut-grid > a strong { font-size:var(--type-caption); line-height: 1.3; }
.shortcut-grid > button small,
.shortcut-grid > a small { color: var(--muted); font:600 var(--type-caption)/1.2 var(--mono); }
.utility-preview-note { margin-top: 12px; padding: 10px 11px; display: flex; gap: 8px; color: var(--muted); border: 1px solid var(--ui-edge-soft); border-radius: 10px; background: var(--ui-surface); font-size:var(--type-caption); line-height: 1.45; }
.utility-preview-note .icon { flex: 0 0 auto; color: var(--utility-accent); }

.bloc-composer {
  padding: 14px;
  border: 1px solid var(--ui-edge);
  border-radius: 14px;
  background: var(--ui-surface);
}
.bloc-composer > label { display: block; margin-bottom: 7px; color: var(--muted); font-size:var(--type-caption); font-weight: 700; }
.bloc-composer textarea {
  width: 100%;
  min-height: 76px;
  padding: 11px 12px;
  resize: vertical;
  color: var(--text);
  border: 1px solid var(--ui-edge);
  border-radius: 10px;
  background: var(--ui-control);
  font:500 var(--type-caption)/1.5 var(--font);
}
.bloc-composer-row { margin-top: 10px; display: flex; align-items: end; justify-content: space-between; gap: 10px; }
.bloc-reminder { min-width: 0; display: grid; gap: 5px; color: var(--muted); font-size:var(--type-caption); }
.bloc-reminder > span { display: flex; align-items: center; gap: 5px; }
.bloc-reminder input { max-width: 190px; height: 36px; padding: 0 8px; color: var(--text); border: 1px solid var(--ui-edge); border-radius: 9px; background: var(--ui-control); font-size:var(--type-caption); color-scheme: dark; }
html[data-theme="light"] .bloc-reminder input { color-scheme: light; }
.bloc-composer-actions { display: flex; align-items: center; gap: 6px; }
.bloc-composer .button.compact { min-height: 36px; height: 36px; padding: 0 11px; font-size:var(--type-caption); }
.bloc-feedback { min-height: 16px; margin: 8px 0 -5px; color: var(--muted); font-size:var(--type-caption); }
.bloc-feedback[data-state="error"] { color: var(--danger); }
.bloc-feedback[data-state="success"] { color: var(--success); }

.bloc-tools { margin: 14px 0 10px; display: grid; gap: 9px; }
.bloc-search { height: 38px; padding: 0 10px; display: flex; align-items: center; gap: 8px; color: var(--muted); border: 1px solid var(--ui-edge); border-radius: 10px; background: var(--ui-surface); }
.bloc-search input { width: 100%; min-width: 0; height: 100%; color: var(--text); border: 0; outline: 0; background: transparent; font-size:var(--type-caption); }
.bloc-filters { display: flex; gap: 6px; }
.bloc-filters button { min-height: 30px; padding: 0 10px; color: var(--muted); border: 1px solid var(--ui-edge); border-radius: 999px; background: var(--ui-surface); font-size:var(--type-caption); font-weight: 700; }
.bloc-filters button.active { color: var(--utility-accent); border-color: color-mix(in srgb, var(--utility-accent) 45%, var(--ui-edge)); background: color-mix(in srgb, var(--ui-surface) 91%, var(--utility-accent)); }
.bloc-list { min-height: 0; flex: 1; display: grid; align-content: start; gap: 9px; overflow-y: auto; padding-right: 3px; scrollbar-width: thin; }
.bloc-loading,
.bloc-empty { padding: 30px 18px; color: var(--muted); text-align: center; border: 1px dashed var(--ui-edge); border-radius: 13px; font-size:var(--type-caption); }
.bloc-note { padding: 13px; border: 1px solid var(--ui-edge); border-radius: 13px; background: var(--ui-surface); }
.bloc-note.is-pinned { border-color: color-mix(in srgb, var(--utility-accent) 42%, var(--ui-edge)); }
.bloc-note.is-done { opacity: .72; }
.bloc-note.is-done .bloc-note-content { text-decoration: line-through; text-decoration-color: var(--muted); }
.bloc-note-top { display: flex; align-items: flex-start; gap: 9px; }
.bloc-note-state { flex: 0 0 auto; width: 22px; height: 22px; display: grid; place-items: center; color: var(--utility-accent); border: 1px solid color-mix(in srgb, var(--utility-accent) 38%, var(--ui-edge)); border-radius: 7px; font:700 var(--type-caption)/1 var(--mono); }
.bloc-note-content { flex: 1; margin: 1px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); font-size:var(--type-caption); line-height: 1.5; }
.bloc-note-meta { margin: 9px 0 0 31px; display: flex; flex-wrap: wrap; gap: 6px 10px; color: var(--muted); font-size:var(--type-caption); }
.bloc-note-meta a { color: var(--utility-accent); }
.bloc-note-meta span { display: inline-flex; align-items: center; gap: 4px; }
.bloc-note-actions { margin: 10px 0 0 31px; display: flex; flex-wrap: wrap; gap: 5px; }
.bloc-note-actions button { min-height: 29px; padding: 0 8px; color: var(--muted); border: 1px solid var(--ui-edge); border-radius: 8px; background: var(--ui-control); font-size:var(--type-caption); font-weight: 700; }
.bloc-note-actions button:hover { color: var(--text); border-color: var(--ui-edge-strong); }
.bloc-note-actions button[data-note-action="archive"]:hover { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, var(--ui-edge)); }

@media (max-width: 1100px) {
  .top-actions .topbar-business strong,
  .top-actions .utility-control span { display: none; }
  .top-actions .utility-control { min-width: 42px; width: 42px; padding: 0; justify-content: center; }
}

@media (max-width: 900px) {
  .desktop-shortcuts,
  .shortcuts-popover { display: none !important; }
  .top-actions .bloc-control { display: inline-flex; }
  .bloc-panel {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: 88svh;
    padding: 18px 14px max(18px, env(safe-area-inset-bottom));
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 20px 20px 0 0;
  }
  .bloc-panel .utility-panel-head > .icon-button,
  .bloc-panel .button.compact,
  .bloc-panel .bloc-search { min-height: 44px; }
  .bloc-panel .utility-panel-head > .icon-button { width: 44px; height: 44px; justify-self: end; }
  .bloc-panel .bloc-filters button,
  .bloc-panel .bloc-note-actions button { min-height: 44px; }
  .utility-open { overflow: hidden; }
}

@media (max-width: 520px) {
  .bloc-composer-row { align-items: stretch; flex-direction: column; }
  .bloc-reminder input { width: 100%; max-width: none; }
  .bloc-composer-actions { justify-content: flex-end; }
}

@media (prefers-reduced-motion: no-preference) {
  .shortcuts-popover,
  .bloc-panel { animation: global-utility-in .2s cubic-bezier(.2, .8, .2, 1); }
  @keyframes global-utility-in {
    from { opacity: 0; transform: translateY(-6px) scale(.99); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }
  @media (max-width: 900px) {
    .bloc-panel { animation-name: global-sheet-in; }
    @keyframes global-sheet-in { from { opacity: .7; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
  }
}
/* Account coverage: planning stays neutral until the account itself needs action. */
.inventory-coverage-notice,
.account-coverage-banner,
.renewal-coverage-check {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--ui-context-edge, var(--ui-border, #22304a));
  border-radius: 14px;
  background: var(--ui-context-surface, var(--ui-surface, #0a1323));
  color: var(--ui-text, #f8fafc);
}
.inventory-coverage-notice,
.account-coverage-banner.is-warning,
.renewal-coverage-check.is-warning {
  border-color: color-mix(in srgb, var(--warning, #f59e0b) 42%, var(--ui-border, #22304a));
}
.account-coverage-banner.is-planned { border-color: color-mix(in srgb, var(--ui-accent-content) 22%, var(--ui-context-edge, var(--ui-border, #22304a))); }
.account-coverage-banner.is-danger,
.renewal-coverage-check.is-danger { border-color: color-mix(in srgb, var(--danger, #ef4444) 58%, var(--ui-border, #22304a)); }

.inventory-coverage-notice > span,
.account-coverage-banner > div,
.renewal-coverage-check > span { display: grid; gap: 3px; min-width: 0; }
.account-coverage-banner .button { margin-left: auto; flex: 0 0 auto; }
.inventory-coverage-notice small,
.account-coverage-banner p,
.renewal-coverage-check small { margin: 0; color: var(--ui-text-muted, #94a3b8); }
.inventory-coverage-notice > svg {
  flex: 0 0 auto;
  color: var(--warning, #f59e0b);
}
.account-coverage-banner > svg,
.renewal-coverage-check > svg { flex: 0 0 auto; color: var(--ui-accent-content); }
.account-coverage-banner.is-warning > svg,
.renewal-coverage-check.is-warning > svg { color: var(--warning, #f59e0b); }
.account-coverage-banner.is-danger > svg,
.renewal-coverage-check.is-danger > svg { color: var(--danger, #ef4444); }
.inventory-coverage-notice,
.account-coverage-banner { margin: 14px 0; padding: 14px 16px; }
.renewal-coverage-check { padding: 12px 14px; }
.service-platform-title { min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.service-platform-title > strong { min-width: 0; }
.coverage-inline-danger { display: inline-flex !important; align-items: center; gap: 5px; margin-top: 0 !important; color: var(--danger, #ef4444) !important; white-space: nowrap; }
.badge.coverage { color: var(--danger, #ef4444); border-color: color-mix(in srgb, var(--danger, #ef4444) 50%, var(--ui-border, #22304a)); }

@media (max-width: 720px) {
  .account-coverage-banner {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .account-coverage-banner .button {
    width: 100%;
    margin-left: 0;
  }
}

/*
 * Shared card elevation: one contact shadow plus one lower-right directional
 * shadow. Applied only to self-contained surfaces, never to rows or controls.
 */
:where(
  .shell-body .page-content > .page-head,
  .shell-body .console-hero,
  .shell-body .studio-command-hero,
  .shell-body .panel,
  .shell-body .surface-toolbar,
  .shell-body .credential-vault,
  .shell-body .profile-card,
  .shell-body .security-form-panel,
  .shell-body .settings-hub,
  .shell-body .settings-action-card,
  .shell-body .template-card,
  .shell-body .status-card,
  .shell-body .payment-context,
  .shell-body .payment-card,
  .shell-body .renewal-summary article,
  .shell-body .plan-summary article,
  .shell-body .admin-plan-card,
  .shell-body .admin-period-card,
  .shell-body .current-plan-hero,
  .shell-body .period-choice,
  .shell-body .plan-choice,
  .shell-body .editor-publish-card,
  .payment-page .payment-context,
  .payment-page .payment-card,
  .public-body .home-destination-card,
  .public-body .home-context-core,
  .public-body .home-principles,
  .public-body .security-card,
  .public-body .public-period-card,
  .public-body .public-plan-card,
  .public-body .public-studio-library,
  .public-body .public-studio-steps li,
  .public-body .public-publishing-card,
  .public-body .product-bento > article,
  .public-body .decision-steps li,
  .public-body .studio-value-grid > article,
  .public-body .use-case-grid > article,
  .public-body .feature-card,
  .public-body .step-card,
  .public-body .price-card,
  .public-body .product-card,
  .public-body .public-card,
  .public-body .auth-card,
  .public-body .auth-shell,
  .admin-auth-body .admin-login-card,
  .priority-card
) {
  box-shadow: var(--ui-shadow-card) !important;
}

html body.shell-body .stat-grid > .metric-card,
html body.shell-body .stat-grid > .metric-card:hover {
  box-shadow: var(--ui-shadow-card) !important;
}

/* Gestor metrics use clean semantic surfaces without decorative overlays. */
html:not([data-theme="light"]) body.shell-body.area-app .dashboard-metrics > .metric-info {
  --metric-card-start: #083696;
  --metric-card-mid: #042a78;
  --metric-card-end: #012169;
  --metric-card-bottom: #01132f;
  --metric-border-start: #0e63cc;
  --metric-border-mid: #0b45aa;
  --metric-border-end: #08308a;
}

html:not([data-theme="light"]) body.shell-body.area-app .dashboard-metrics > .metric-violet {
  --metric-card-start: #40258b;
  --metric-card-mid: #2b1c62;
  --metric-card-end: #1f164d;
  --metric-card-bottom: #0a1129;
  --metric-border-start: #6b4fc0;
  --metric-border-mid: #453390;
  --metric-border-end: #392c7b;
}

html:not([data-theme="light"]) body.shell-body.area-app .dashboard-metrics > .metric-success {
  --metric-card-start: #015c5a;
  --metric-card-mid: #014040;
  --metric-card-end: #002f32;
  --metric-card-bottom: #012126;
  --metric-border-start: #049d95;
  --metric-border-mid: #06605e;
  --metric-border-end: #064848;
}

html:not([data-theme="light"]) body.shell-body.area-app .dashboard-metrics > .metric-warning {
  --metric-card-start: #9c4f00;
  --metric-card-mid: #693901;
  --metric-card-end: #572f00;
  --metric-card-bottom: #261a06;
  --metric-border-start: #db8e04;
  --metric-border-mid: #9b5b04;
  --metric-border-end: #824801;
}

html[data-theme="light"] body.shell-body.area-app .dashboard-metrics > .metric-info {
  --metric-card-start: #f5f9ff;
  --metric-card-mid: #eef6ff;
  --metric-card-end: #ddeaff;
  --metric-card-bottom: #e7f1ff;
  --metric-border-start: #4c9cff;
  --metric-border-mid: #7bb6ff;
  --metric-border-end: #b5d6ff;
}

html[data-theme="light"] body.shell-body.area-app .dashboard-metrics > .metric-violet {
  --metric-card-start: #faf7ff;
  --metric-card-mid: #f6f1ff;
  --metric-card-end: #e8ddff;
  --metric-card-bottom: #f1eaff;
  --metric-border-start: #9b74e8;
  --metric-border-mid: #b89af0;
  --metric-border-end: #d7c6f7;
}

html[data-theme="light"] body.shell-body.area-app .dashboard-metrics > .metric-success {
  --metric-card-start: #f3fdfa;
  --metric-card-mid: #edfbf8;
  --metric-card-end: #d8f3ed;
  --metric-card-bottom: #e5f9f5;
  --metric-border-start: #28a995;
  --metric-border-mid: #65c7b7;
  --metric-border-end: #a9e1d7;
}

html[data-theme="light"] body.shell-body.area-app .dashboard-metrics > .metric-warning {
  --metric-card-start: #fffaf0;
  --metric-card-mid: #fff8e8;
  --metric-card-end: #ffeac0;
  --metric-card-bottom: #fff3d8;
  --metric-border-start: #d39118;
  --metric-border-mid: #e5b257;
  --metric-border-end: #f0d59b;
}

html body.shell-body.area-app .dashboard-metrics > .metric-card,
html body.shell-body.area-app .dashboard-metrics > .metric-card:hover {
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  background:
    linear-gradient(180deg, transparent 0%, transparent 8%, var(--metric-card-bottom) 100%) padding-box,
    linear-gradient(90deg, var(--metric-card-start) 0%, var(--metric-card-mid) 50%, var(--metric-card-end) 100%) padding-box,
    linear-gradient(110deg, var(--metric-border-start) 0%, var(--metric-border-mid) 48%, var(--metric-border-end) 100%) border-box !important;
  background-clip: padding-box, padding-box, border-box !important;
}

html body.shell-body.area-app .dashboard-metrics > .metric-card > * {
  position: relative !important;
  z-index: 2;
}

html body.shell-body.area-app .dashboard-metrics > .metric-card > .metric-icon {
  inset: auto !important;
}

html:not([data-theme="light"]) body.shell-body.area-app .dashboard-metrics > .metric-card > .metric-icon {
  border-color: color-mix(in srgb, var(--metric-accent) 50%, rgba(255, 255, 255, .16)) !important;
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--metric-accent) 19%, rgba(255, 255, 255, .05)),
      color-mix(in srgb, var(--metric-accent) 9%, transparent)
    ) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    0 5px 14px color-mix(in srgb, var(--metric-accent) 7%, transparent) !important;
}

html[data-theme="light"] body.shell-body.area-app .dashboard-metrics > .metric-card > .metric-icon {
  border-color: color-mix(in srgb, var(--metric-accent) 36%, #d7e1ec) !important;
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--metric-accent) 10%, white),
      color-mix(in srgb, var(--metric-accent) 5%, white)
    ) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .82),
    0 4px 12px color-mix(in srgb, var(--metric-accent) 6%, transparent) !important;
}

html body.shell-body.area-app .dashboard-metrics > .metric-card::after,
html body.shell-body.area-app .dashboard-metrics > .metric-card::before {
  content: none !important;
  display: none !important;
}

@media (min-width: 1181px) and (max-width: 1380px) {
  html body.shell-body.area-app .dashboard-metrics > .metric-card,
  html body.shell-body.area-app .dashboard-metrics > .metric-card:hover {
    min-height: 108px;
    padding: 14px !important;
    grid-template-columns: 46px minmax(0, 1fr);
    column-gap: 13px;
    border-radius: 12px !important;
  }

  html body.shell-body.area-app .dashboard-metrics > .metric-card .metric-icon {
    width: 46px !important;
    height: 46px !important;
    border-radius: 11px !important;
  }

  html body.shell-body.area-app .dashboard-metrics > .metric-card .metric-icon .icon {
    width: 23px;
    height: 23px;
  }

  html body.shell-body.area-app .dashboard-metrics > .metric-card .stat-label {
    font-size:var(--type-caption) !important;
    letter-spacing: .02em;
  }

  html body.shell-body.area-app .dashboard-metrics > .metric-card > strong {
    font-size:var(--type-page) !important;
  }

  html body.shell-body.area-app .dashboard-metrics > .metric-card > .metric-note {
    font-size:var(--type-caption) !important;
    line-height: 1.25;
  }

}

/* Universal responsive closure for Gestor, Studio and Admin. */
@media (max-width: 760px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
    overflow-x: clip;
  }

  .shell-body .sidebar {
    width: min(300px, calc(100vw - 40px));
    padding-top: max(18px, env(safe-area-inset-top));
    padding-bottom: max(18px, env(safe-area-inset-bottom));
  }

  .shell-body .topbar {
    min-height: 72px;
    height: auto;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    column-gap: 10px;
    padding: 10px max(14px, env(safe-area-inset-right)) 10px max(14px, env(safe-area-inset-left));
  }

  .shell-body .mobile-nav-toggle { grid-column: 1; }
  .shell-body .topbar-copy { grid-column: 2; }

  .shell-body .top-actions {
    grid-column: 3;
    width: auto;
    justify-content: flex-end;
  }

  .shell-body .top-actions > :where(.topbar-business, .bloc-control, .theme-control) {
    display: inline-flex !important;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    align-items: center;
    justify-content: center;
  }

  .shell-body .top-actions .topbar-business > span { display: grid !important; }
  .shell-body .top-actions .topbar-business > strong,
  .shell-body .top-actions .bloc-control > span,
  .shell-body .top-actions .theme-control > span { display: none !important; }

  .shell-body .mobile-nav-toggle,
  .shell-body .top-actions > :is(.icon-button, .theme-control) {
    min-width: 44px;
    width: 44px;
    min-height: 44px;
    height: 44px;
  }

  .shell-body .top-actions {
    flex: 0 0 auto;
    gap: 6px;
  }

  .shell-body .topbar-copy {
    overflow: hidden;
  }

  .shell-body .page-content {
    width: 100%;
    padding: 18px max(14px, env(safe-area-inset-right)) max(48px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  }

  .shell-body :where(.page-content > .page-head, .console-hero, .studio-command-hero) {
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 18px !important;
  }

  .shell-body .console-hero {
    grid-template-areas:
      "signal"
      "copy"
      "actions" !important;
    grid-auto-columns: minmax(0, 1fr);
  }

  .shell-body.area-app .console-hero {
    grid-template-areas:
      "copy"
      "signal"
      "actions" !important;
  }

  .shell-body .console-hero > :is(.console-hero-copy, .console-hero-actions, .hero-signal) {
    grid-column: 1;
    min-width: 0;
    width: 100%;
  }

  .shell-body .console-hero .console-hero-copy {
    grid-area: copy;
  }

  .shell-body .console-hero .console-hero-actions {
    grid-area: actions;
  }

  .shell-body .console-hero .hero-signal {
    grid-area: signal;
    align-self: auto;
    margin: 0 !important;
  }

  .shell-body .page-content > .page-head {
    flex-direction: column;
    align-items: stretch;
  }

  .shell-body .page-content > .page-head > :is(.actions, .button, button, a.button) {
    width: 100%;
    max-width: 100%;
  }
  .shell-body :is(.console-hero-actions, .hero-actions) {
    width: 100%;
  }

  .shell-body :where(.console-hero-actions, .hero-actions, .page-head .actions) {
    grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
    gap: 9px;
  }

  .shell-body :where(.console-hero-actions, .hero-actions, .page-head .actions) > :is(.button, button, a) {
    width: 100%;
    min-height: 44px;
  }

  .shell-body :where(.grid-2, .settings-grid, .subscription-grid, .admin-dashboard-grid) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .shell-body .security-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    max-width: 100%;
  }

  .shell-body :where(.profile-grid, .template-grid) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .shell-body :where(.panel-head, .section-heading) {
    height: auto;
    min-height: 64px;
    flex-wrap: wrap;
    gap: 10px;
  }

  .shell-body :where(.surface-toolbar, .filter-bar) {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .shell-body :where(.surface-toolbar, .filter-bar) > *,
  .shell-body :where(.surface-toolbar, .filter-bar) .search-field {
    min-width: 0 !important;
  }

  .shell-body .table-wrap {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
  }

  .shell-body .data-table {
    width: max-content;
    min-width: 100%;
  }

  .shell-body :where(.button, .icon-button, button, summary, [role="button"]) {
    min-height: 44px;
  }

  .shell-body :where(.field input, .field select, .field textarea, .search-field, .password-control) {
    font-size:var(--type-body);
  }
}

@media (max-width: 620px) {
  .shell-body .topbar-copy .eyebrow {
    max-width: min(42vw, 180px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .shell-body .topbar h1 {
    max-width: min(48vw, 210px);
    font-size:var(--type-subtitle);
  }

  .shell-body .page-content > .page-head,
  .shell-body :where(.console-hero, .studio-command-hero) {
    padding: 18px 16px !important;
    border-radius: 16px !important;
  }

  .shell-body :where(.page-content > .page-head, .console-hero, .studio-command-hero) h2 {
    font-size:var(--type-page) !important;
    line-height: 1.08;
    max-width: none;
    overflow-wrap: anywhere;
  }

  .shell-body :where(.page-content > .page-head, .console-hero, .studio-command-hero) p {
    font-size:var(--type-caption);
    line-height: 1.6;
  }

  .shell-body:is(.area-app, .area-admin) .console-hero .hero-signal {
    --signal-radar-size: 84px;
    width: 100%;
    grid-template-columns: var(--signal-radar-size) minmax(0, 1fr) !important;
    gap: 10px !important;
    padding: 14px 12px !important;
  }

  .shell-body .console-hero .signal-radar {
    width: var(--signal-radar-size) !important;
    height: var(--signal-radar-size) !important;
    min-width: var(--signal-radar-size) !important;
    display: grid !important;
  }

  .shell-body .console-hero .signal-copy strong {
    font-size:var(--type-body) !important;
  }

  .shell-body.area-app .console-hero .signal-copy .signal-status-item strong {
    font-size:var(--type-caption) !important;
  }

  .shell-body :where(.surface-toolbar, .filter-bar) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding: 12px;
  }

  .shell-body :where(.surface-toolbar, .filter-bar) > *,
  .shell-body :where(.surface-toolbar, .filter-bar) .search-field,
  .shell-body :where(.surface-toolbar, .filter-bar) .button {
    width: 100%;
  }

  .shell-body .form-grid,
  .shell-body :where(.plan-grid, .periods, .template-grid) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .shell-body .field.full {
    grid-column: auto;
  }

  .shell-body :where(.panel-head, .panel-body) {
    padding-inline: 14px !important;
  }

  .shell-body .chart-bars {
    min-width: 0;
    gap: 7px;
    padding-inline: 4px;
  }

  .shell-body .chart-bars .bar {
    max-width: 30px;
  }

  .shell-body .security-progress {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
  }

  .shell-body .toast {
    right: 14px;
    left: 14px;
    width: auto;
    min-width: 0;
    max-width: none;
  }
}

/* Shared mobile dialog contract: every application modal stays centered and
 * contained inside the dynamic viewport, regardless of its feature module. */
@media (max-width: 620px) {
  .modal {
    place-items: center;
    padding:
      max(24px, env(safe-area-inset-top))
      max(clamp(18px, 5vw, 24px), env(safe-area-inset-right))
      max(24px, env(safe-area-inset-bottom))
      max(clamp(18px, 5vw, 24px), env(safe-area-inset-left));
  }

  .modal-card,
  .settings-modal-card,
  .account-password-modal-card,
  .sessions-modal-card {
    display: flex;
    flex-direction: column;
    width: min(100%, 520px) !important;
    max-width: 520px !important;
    max-height: calc(100svh - max(48px, calc(env(safe-area-inset-top) + env(safe-area-inset-bottom) + 24px))) !important;
    max-height: calc(100dvh - max(48px, calc(env(safe-area-inset-top) + env(safe-area-inset-bottom) + 24px))) !important;
    overflow-x: hidden;
    overflow-y: hidden;
    overscroll-behavior: contain;
    border: 1px solid var(--ui-edge-tonal) !important;
    border-radius: 18px !important;
  }

  .modal-head,
  .settings-modal-card > .modal-head {
    flex: 0 0 auto;
    min-height: 64px;
    padding: 10px 14px;
  }

  .modal-body {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    padding: 16px 14px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-padding-block: 12px 76px;
    scrollbar-gutter: stable;
  }

  .modal .form-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
    gap: 9px;
    bottom: -16px;
    margin: 18px -14px -16px;
    padding: 12px 14px max(12px, env(safe-area-inset-bottom));
  }

  .modal .form-actions .button {
    min-width: 0;
    width: 100%;
  }
}

/* Short landscape phones need more of the viewport than portrait dialogs while
 * preserving a visible perimeter and the same internal scrolling contract. */
@media (max-width: 900px) and (max-height: 520px) {
  .modal {
    padding:
      max(12px, env(safe-area-inset-top))
      max(18px, env(safe-area-inset-right))
      max(12px, env(safe-area-inset-bottom))
      max(18px, env(safe-area-inset-left));
  }

  .modal-card,
  .settings-modal-card,
  .account-password-modal-card,
  .sessions-modal-card {
    max-height: calc(100svh - max(24px, calc(env(safe-area-inset-top) + env(safe-area-inset-bottom)))) !important;
    max-height: calc(100dvh - max(24px, calc(env(safe-area-inset-top) + env(safe-area-inset-bottom)))) !important;
  }
}

/* Medium phones can show the two short identity/contact pairs together. This
 * removes an artificial field scroller without squeezing narrow handsets. */
@media (min-width: 480px) and (max-width: 620px) {
  .public-body.auth-body .auth-register-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 390px) {
  .shell-body .topbar-copy .eyebrow {
    display: none;
  }

  .shell-body .topbar h1 {
    max-width: 100%;
    font-size:var(--type-body);
  }

}

@media (max-width: 340px) {
  .shell-body .stat-grid {
    gap: 8px !important;
  }
}

/* Responsive closure for public, authentication and administrative access. */
@media (max-width: 900px) {
  .public-body,
  .admin-auth-body {
    max-width: 100%;
    overflow-x: hidden;
    overflow-x: clip;
  }

  .public-body .public-header,
  .admin-auth-body .admin-auth-header {
    min-height: 72px;
    height: auto;
    padding-top: max(10px, env(safe-area-inset-top));
    padding-bottom: 10px;
  }

  .public-body .public-header {
    gap: 16px;
  }

  .public-body :where(.header-actions, .auth-header-actions) {
    min-width: 0;
    flex: 0 1 auto;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
  }

  .public-body :where(.button, .icon-button, button, summary, [role="button"]),
  .admin-auth-body :where(.button, .icon-button, button, summary, [role="button"]) {
    min-height: 44px;
  }

  .public-body :where(input, select, textarea),
  .admin-auth-body :where(input, select, textarea) {
    font-size:var(--type-body);
  }

  .public-body :where(.auth-page, .status-layout, .auth-shell, .auth-card),
  .admin-auth-body :where(.admin-auth-page, .admin-login-card) {
    min-width: 0;
    max-width: 100%;
  }

  .public-body .status-layout,
  .admin-auth-body .admin-auth-page {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-auth-body .admin-auth-page {
    width: min(650px, calc(100% - 32px));
    min-height: calc(100svh - 72px);
    gap: 28px;
    padding: 28px 0 max(48px, env(safe-area-inset-bottom));
  }

  .admin-auth-body .admin-auth-context {
    max-width: 650px;
  }

  .admin-auth-body .admin-auth-context h1 {
    font-size:var(--type-hero);
  }
}

@media (max-width: 620px) {
  .public-body.auth-body {
    display: flex;
    flex-direction: column;
    height: 100svh;
    height: 100dvh;
    overflow: hidden;
  }

  .public-body.auth-body .auth-header {
    flex: 0 0 auto;
  }

  .public-body.auth-body > #main-content {
    flex: 1 1 auto;
    min-height: 0;
  }

  .public-body:not(.auth-body) .public-header,
  .public-body .auth-header,
  .admin-auth-body .admin-auth-header {
    padding-inline: max(14px, env(safe-area-inset-left));
  }

  .public-body:not(.auth-body) .public-header {
    width: 100%;
    top: 0;
    margin-top: 0;
  }

  .public-body .brand,
  .admin-auth-body .brand {
    flex: 0 0 auto;
  }

  .public-body .brand img,
  .admin-auth-body .brand img {
    max-width: 132px;
    height: auto;
  }

  .public-body:not(.auth-body) .header-actions .button {
    padding-inline: 13px;
  }

  .public-body .auth-page {
    min-height: calc(100svh - 72px);
    padding: 22px 14px max(42px, env(safe-area-inset-bottom));
  }

  /* Login and registration reuse one compact mobile authentication surface. */
  .public-body.auth-body .auth-page {
    place-items: center;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding:
      max(24px, env(safe-area-inset-top))
      max(clamp(18px, 5vw, 24px), env(safe-area-inset-right))
      max(24px, env(safe-area-inset-bottom))
      max(clamp(18px, 5vw, 24px), env(safe-area-inset-left));
  }

  .public-body.auth-body .auth-shell {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr);
    width: min(100%, 440px) !important;
    max-width: 440px !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden;
  }

  .public-body.auth-body .auth-form-panel {
    height: 100%;
    max-height: 100%;
    min-width: 0;
    min-height: 0;
    padding: 24px 20px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-padding-block: 18px;
    scrollbar-gutter: stable;
  }

  .public-body.auth-body .auth-form-heading {
    margin-bottom: 22px;
  }

  .public-body.auth-body .auth-form-heading.compact {
    margin-bottom: 18px;
  }

  .public-body.auth-body .auth-form-mark {
    margin-bottom: 16px;
  }

  .public-body.auth-body .auth-form-assurance {
    margin-top: 14px;
    padding-top: 14px;
  }

  .public-body.auth-body .auth-form-panel .auth-foot {
    margin-top: 16px;
  }

  /* Registration has one dedicated field scroller. The heading, progress,
   * current action and account link remain visible at every mobile height. */
  .public-body.auth-body .auth-form-panel.auth-register {
    height: auto;
    max-height: 100%;
    justify-content: flex-start;
    overflow: hidden;
  }

  .public-body.auth-body .auth-shell-register {
    grid-template-rows: minmax(0, 1fr);
    height: auto !important;
    max-height: min(100%, 860px) !important;
  }

  .public-body.auth-body .auth-register > :is(.auth-form-heading, .auth-form-progress, .auth-foot) {
    flex: 0 0 auto;
  }

  .public-body.auth-body .auth-register > form {
    display: flex;
    flex: 0 1 auto;
    height: auto;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
  }

  .public-body.auth-body .auth-register-panel:not([hidden]) {
    display: flex;
    flex: 0 1 auto;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
  }

  .public-body.auth-body .auth-register-panel-body {
    flex: 0 1 auto;
    height: auto;
    min-width: 0;
    min-height: 0;
    padding-right: 2px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    scrollbar-gutter: stable;
  }

  .public-body.auth-body .auth-next-button,
  .public-body.auth-body .auth-register-actions {
    flex: 0 0 auto;
    margin-top: 12px;
  }

  .public-body.auth-body .auth-register-actions {
    grid-template-columns: minmax(96px, .75fr) minmax(0, 1.25fr);
  }

  .public-body.auth-body .auth-register-actions .secondary {
    order: initial;
  }

  .public-body.auth-body .auth-payment-note {
    flex: 0 0 auto;
    margin-top: 8px;
  }

  .public-body :where(.auth-shell, .auth-card, .status-card),
  .admin-auth-body .admin-login-card {
    border-radius: 16px;
  }

  .public-body .auth-card,
  .admin-auth-body .admin-login-card {
    padding: 22px 18px;
  }

  .public-body :where(.form-grid, .auth-register-grid, .periods),
  .admin-auth-body .form-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .public-body :where(.toast, .flash-message),
  .admin-auth-body :where(.toast, .flash-message) {
    right: 14px;
    left: 14px;
    width: auto;
    min-width: 0;
    max-width: none;
  }

  .public-body :where(.hero-actions, .landing-final-cta > div:last-child, .auth-register-actions) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    gap: 9px;
  }

  .public-body :where(.hero-actions, .landing-final-cta > div:last-child, .auth-register-actions) > :is(.button, button, a) {
    width: 100%;
    min-height: 46px;
  }

  .admin-auth-body .admin-auth-context {
    display: none;
  }

  .admin-auth-body .admin-auth-page {
    width: min(100% - 28px, 520px);
    min-height: calc(100svh - 72px);
    padding-top: 22px;
  }

  .admin-auth-body .admin-card-foot {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 390px) {
  .public-body.auth-body .auth-form-heading p {
    display: none;
  }

  .public-body:not(.auth-body) .public-header {
    align-items: center;
    flex-wrap: wrap;
  }

  .public-body:not(.auth-body) .header-actions {
    display: grid;
    grid-template-columns: 44px repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .public-body:not(.auth-body) .header-actions > :is(.button, form),
  .public-body:not(.auth-body) .header-actions form .icon-button {
    width: 100%;
  }

  .public-body .auth-header,
  .admin-auth-body .admin-auth-header {
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
  }

  .public-body .auth-header .auth-header-actions,
  .admin-auth-body .admin-auth-header .header-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    width: 100%;
  }

  .public-body .auth-header .auth-header-actions .button,
  .admin-auth-body .admin-auth-header .header-actions .button {
    width: 100%;
  }

  .public-body .brand img,
  .admin-auth-body .brand img {
    max-width: 116px;
  }

  .public-body .auth-header-actions .button {
    padding-inline: 12px;
  }
}

@media (max-width: 620px) and (max-height: 520px) {
  .public-body.auth-body .auth-page {
    padding:
      max(12px, env(safe-area-inset-top))
      max(18px, env(safe-area-inset-right))
      max(12px, env(safe-area-inset-bottom))
      max(18px, env(safe-area-inset-left));
  }

  .public-body.auth-body .auth-shell {
    max-height: calc(100svh - 100px) !important;
    max-height: calc(100dvh - 100px) !important;
  }
}

/* A phone in landscape can exceed the portrait width breakpoint. It still
 * reuses the compact authentication surface and the single internal scroller. */
@media (min-width: 621px) and (max-width: 900px) and (max-height: 520px) {
  .public-body.auth-body {
    display: flex;
    flex-direction: column;
    height: 100svh;
    height: 100dvh;
    overflow: hidden;
  }

  .public-body.auth-body .auth-header {
    flex: 0 0 auto;
  }

  .public-body.auth-body > #main-content {
    flex: 1 1 auto;
    min-height: 0;
  }

  .public-body.auth-body .auth-page {
    place-items: center;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding:
      max(8px, env(safe-area-inset-top))
      max(18px, env(safe-area-inset-right))
      max(8px, env(safe-area-inset-bottom))
      max(18px, env(safe-area-inset-left));
  }

  .public-body.auth-body .auth-context {
    display: none;
  }

  .public-body.auth-body .auth-shell {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr);
    width: min(100%, 440px) !important;
    max-width: 440px !important;
    min-height: 0 !important;
    max-height: calc(100% - 8px) !important;
    overflow: hidden;
  }

  .public-body.auth-body .auth-form-panel {
    height: 100%;
    max-height: 100%;
    min-width: 0;
    min-height: 0;
    padding: 24px 20px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-padding-block: 18px;
    scrollbar-gutter: stable;
  }

  .public-body.auth-body .auth-form-heading {
    margin-bottom: 22px;
  }

  .public-body.auth-body .auth-form-heading.compact {
    margin-bottom: 18px;
  }

  .public-body.auth-body .auth-form-mark {
    margin-bottom: 16px;
  }

  .public-body.auth-body .auth-form-assurance {
    margin-top: 14px;
    padding-top: 14px;
  }

  .public-body.auth-body .auth-form-panel .auth-foot {
    margin-top: 16px;
  }

  .public-body.auth-body .auth-form-panel.auth-register {
    height: 100%;
    justify-content: flex-start;
    overflow: hidden;
  }

  .public-body.auth-body .auth-shell-register {
    grid-template-rows: minmax(0, 1fr);
    height: calc(100% - 8px) !important;
  }

  .public-body.auth-body .auth-register > :is(.auth-form-heading, .auth-form-progress, .auth-foot) {
    flex: 0 0 auto;
  }

  .public-body.auth-body .auth-register > form {
    display: flex;
    flex: 1 1 0%;
    height: 0;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
  }

  .public-body.auth-body .auth-register-panel:not([hidden]) {
    display: flex;
    flex: 1 1 0%;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
  }

  .public-body.auth-body .auth-register-panel-body {
    flex: 1 1 0%;
    height: 0;
    min-width: 0;
    min-height: 0;
    padding-right: 2px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    scrollbar-gutter: stable;
  }

  .public-body.auth-body .auth-next-button,
  .public-body.auth-body .auth-register-actions {
    flex: 0 0 auto;
    margin-top: 12px;
  }

  .public-body.auth-body .auth-register-actions {
    grid-template-columns: minmax(96px, .75fr) minmax(0, 1.25fr);
  }

  .public-body.auth-body .auth-register-actions .secondary {
    order: initial;
  }

  .public-body.auth-body .auth-payment-note {
    margin-top: 10px;
  }

  .public-body.auth-body .auth-form-panel {
    padding: 10px 18px;
  }

  .public-body.auth-body .auth-form-heading,
  .public-body.auth-body .auth-form-heading.compact {
    margin-bottom: 6px;
  }

  .public-body.auth-body .auth-form-mark,
  .public-body.auth-body .auth-form-heading p {
    display: none;
  }

  .public-body.auth-body .auth-form-progress {
    margin-bottom: 6px;
  }

  .public-body.auth-body .auth-form-progress span {
    height: 32px;
  }

  .public-body.auth-body .auth-form-panel .auth-foot {
    display: none;
  }

  .public-body.auth-body .auth-next-button,
  .public-body.auth-body .auth-register-actions {
    margin-top: 6px;
  }
}

/* Shared WhatsApp action --------------------------------------------------
 * One brand treatment serves full buttons, compact table actions, inline
 * phone links and sale-action menus throughout public, Gestor and Admin UI. */
.whatsapp-action {
  --whatsapp-brand: #25d366;
  --whatsapp-brand-hover: #1fbe5b;
  --whatsapp-brand-ink: #052e16;
  --whatsapp-brand-content: #4ade80;
}

/* The WhatsApp mark is always presented bare. Containers belong to the
 * interactive control, never to the icon itself. This guard keeps new button,
 * inline-link and menu variants from rebuilding an inner rounded tile. */
.whatsapp-action .icon {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.button.whatsapp-action {
  border-color: color-mix(in srgb, var(--whatsapp-brand) 24%, var(--ui-edge)) !important;
  background: color-mix(in srgb, var(--ui-surface-raised) 95%, var(--whatsapp-brand) 5%) !important;
  color: var(--text) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045) !important;
}

.button.whatsapp-action > .icon {
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--whatsapp-brand) !important;
  stroke-width: 1.9;
}

.button.whatsapp-action.small > .icon {
  width: 22px;
  height: 22px;
}

.button.whatsapp-action:hover:not(.is-disabled),
.button.whatsapp-action:focus-visible:not(.is-disabled) {
  border-color: color-mix(in srgb, var(--whatsapp-brand) 42%, var(--ui-edge)) !important;
  background: color-mix(in srgb, var(--ui-surface-raised) 91%, var(--whatsapp-brand) 9%) !important;
  color: var(--text) !important;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--whatsapp-brand) 17%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, .055) !important;
}

.button.whatsapp-action:hover:not(.is-disabled) > .icon,
.button.whatsapp-action:focus-visible:not(.is-disabled) > .icon {
  border-color: transparent;
  background: transparent;
  color: var(--whatsapp-brand) !important;
}

.button.whatsapp-action--solid {
  border-color: color-mix(in srgb, var(--whatsapp-brand) 78%, white) !important;
  background: var(--whatsapp-brand) !important;
  color: var(--whatsapp-brand-ink) !important;
  box-shadow: 0 11px 26px color-mix(in srgb, var(--whatsapp-brand) 24%, transparent) !important;
}

.button.whatsapp-action--solid > .icon,
.button.whatsapp-action--solid:hover:not(.is-disabled) > .icon,
.button.whatsapp-action--solid:focus-visible:not(.is-disabled) > .icon {
  border-color: transparent;
  background: transparent;
  color: var(--whatsapp-brand-ink) !important;
}

.button.whatsapp-action--solid:hover:not(.is-disabled),
.button.whatsapp-action--solid:focus-visible:not(.is-disabled) {
  background: var(--whatsapp-brand-hover) !important;
}

.button.whatsapp-action.is-disabled,
.button.whatsapp-action[aria-disabled="true"] {
  filter: saturate(.62);
}

.whatsapp-action--inline {
  min-height: 32px;
  padding: 3px 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 8px;
  color: var(--text) !important;
  transition: color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.whatsapp-action--inline .icon {
  box-sizing: border-box;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  color: var(--whatsapp-brand) !important;
  stroke-width: 2;
}

.whatsapp-action--inline:hover,
.whatsapp-action--inline:focus-visible {
  color: var(--text) !important;
  background: color-mix(in srgb, var(--whatsapp-brand) 5%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--whatsapp-brand) 20%, transparent);
}

.whatsapp-action--inline:hover .icon,
.whatsapp-action--inline:focus-visible .icon {
  color: var(--whatsapp-brand-hover) !important;
}

/* Keep data links neutral even when a module still carries legacy link colors. */
.sale-whatsapp-link.whatsapp-action--inline,
.sale-whatsapp-link.whatsapp-action--inline:hover,
.sale-whatsapp-link.whatsapp-action--inline:focus-visible {
  color: var(--text) !important;
}

.sale-whatsapp-link.whatsapp-action--inline .icon {
  color: var(--whatsapp-brand) !important;
}

.sale-action-popover .whatsapp-action--menu {
  grid-template-columns: 38px 1fr;
  background: color-mix(in srgb, var(--whatsapp-brand) 4%, transparent);
}

.sale-action-popover .whatsapp-action--menu > span:first-child {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--whatsapp-brand) !important;
}

.sale-action-popover .whatsapp-action--menu > span:first-child .icon {
  width: 26px;
  height: 26px;
}

.sale-action-popover .whatsapp-action--menu:hover,
.sale-action-popover .whatsapp-action--menu:focus-visible {
  background: color-mix(in srgb, var(--whatsapp-brand) 11%, var(--ui-surface-raised));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--whatsapp-brand) 28%, transparent);
}

.sale-action-popover .whatsapp-action--menu strong {
  color: var(--text);
}

html[data-theme="light"] .whatsapp-action {
  --whatsapp-brand-content: #087a3d;
}

@media (max-width: 760px) {
  .button.whatsapp-action.small,
  .whatsapp-action--inline {
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .whatsapp-action,
  .whatsapp-action--inline {
    transition: none !important;
  }
}

/* Contextual record surfaces -------------------------------------------------
 * Tables, operational catalogs and audit/history lists reuse one solid tonal
 * material. The active workspace supplies the pigment through --ui-accent;
 * rows only vary by a small solid step and never receive individual shadows. */
.shell-body:is(.area-app, .area-studio, .area-admin) {
  --ui-record-surface: color-mix(
    in oklab,
    var(--ui-surface) 97%,
    var(--ui-accent) 3%
  );
  --ui-record-row: color-mix(
    in oklab,
    var(--ui-surface) 99%,
    var(--ui-accent) 1%
  );
  --ui-record-row-alternate: var(--ui-record-row);
  --ui-record-header: color-mix(
    in oklab,
    var(--ui-surface-raised) 94%,
    var(--ui-accent) 6%
  );
  --ui-record-hover: color-mix(
    in oklab,
    var(--ui-surface-raised) 91%,
    var(--ui-accent) 9%
  );
  --ui-record-edge: color-mix(in srgb, var(--ui-accent) 13%, var(--ui-edge));
  --ui-record-divider: color-mix(in srgb, var(--ui-accent) 5%, var(--ui-edge-soft));
}

@media (max-width: 460px) {
  .shell-body .profile-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

html[data-theme="light"] .shell-body:is(.area-app, .area-studio, .area-admin) {
  --ui-record-surface: color-mix(
    in oklab,
    var(--ui-surface) 99%,
    var(--ui-accent) 1%
  );
  --ui-record-row: color-mix(
    in oklab,
    var(--ui-surface) 100%,
    var(--ui-accent) 0%
  );
  --ui-record-row-alternate: var(--ui-record-row);
  --ui-record-header: color-mix(
    in oklab,
    var(--ui-surface-raised) 97%,
    var(--ui-accent) 3%
  );
  --ui-record-hover: color-mix(
    in oklab,
    var(--ui-surface-raised) 94%,
    var(--ui-accent) 6%
  );
  --ui-record-edge: color-mix(in srgb, var(--ui-accent) 8%, var(--ui-edge));
  --ui-record-divider: color-mix(in srgb, var(--ui-accent) 4%, var(--ui-edge-soft));
}

/* Self-contained record hosts. */
.shell-body :is(
  .panel.table-wrap,
  .inventory-accounts-workspace,
  .inventory-catalog-panel,
  .studio-library-panel,
  .studio-report-panel,
  .intervention-history
) {
  border-color: var(--ui-record-edge) !important;
  background-color: var(--ui-record-surface) !important;
  background-image: none !important;
  box-shadow: var(--ui-shadow-card) !important;
}

/* Some screens place their table or list inside a panel with its own header. */
@supports selector(.panel:has(.data-table)) {
  .shell-body .panel:has(
    :is(
      .data-table,
      .inventory-catalog-list,
      .studio-admin-list,
      .studio-report-list,
      .account-session-list,
      .data-activity-list,
      .payment-history,
      .outage-impact-list,
      .sale-trace-list,
      .sale-timeline
    )
  ) {
    border-color: var(--ui-record-edge) !important;
    background-color: var(--ui-record-surface) !important;
    background-image: none !important;
    box-shadow: var(--ui-shadow-card) !important;
  }
}

.shell-body :is(
  .panel.table-wrap,
  .inventory-accounts-workspace,
  .inventory-catalog-panel,
  .studio-library-panel,
  .studio-report-panel,
  .intervention-history
) > :is(.panel-head, .inventory-catalog-head) {
  border-bottom-color: var(--ui-record-divider) !important;
  background-color: var(--ui-record-header) !important;
  background-image: none !important;
}

@supports selector(.panel:has(.data-table)) {
  .shell-body .panel:has(
    :is(
      .data-table,
      .studio-admin-list,
      .studio-report-list,
      .account-session-list,
      .data-activity-list,
      .payment-history,
      .outage-impact-list,
      .sale-trace-list,
      .sale-timeline
    )
  ) > .panel-head {
    border-bottom-color: var(--ui-record-divider) !important;
    background-color: var(--ui-record-header) !important;
    background-image: none !important;
  }
}

/* The table body stays part of the host instead of becoming a nested card. */
.shell-body .panel > .table-wrap {
  border: 0;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
}

.shell-body .data-table {
  background-color: transparent;
}

.shell-body .data-table :is(thead, th) {
  background-color: var(--ui-record-header) !important;
  background-image: none !important;
  border-bottom-color: var(--ui-record-divider) !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.shell-body .data-table tbody tr {
  background-color: var(--ui-record-row) !important;
}

.shell-body .data-table tbody tr:nth-child(even) {
  background-color: var(--ui-record-row-alternate) !important;
}

.shell-body .data-table tbody td {
  border-bottom-color: var(--ui-record-divider) !important;
}

.shell-body .data-table tbody tr:hover {
  background-color: var(--ui-record-hover) !important;
}

/* Non-table records consume the same row rhythm without extra ornaments. */
.shell-body :is(
  .inventory-catalog-row,
  .studio-admin-row,
  .studio-report-row,
  .account-session-list > div,
  .sale-timeline-item,
  .intervention-history li,
  .list-row
) {
  border-bottom-color: var(--ui-record-divider) !important;
  background-color: var(--ui-record-row);
}

.shell-body :is(
  .inventory-catalog-row:nth-child(even),
  .studio-admin-row:nth-child(even),
  .studio-report-row:nth-child(even),
  .account-session-list > div:nth-child(even),
  .sale-timeline-item:nth-child(even),
  .intervention-history li:nth-child(even),
  .list-row:nth-child(even)
) {
  background-color: var(--ui-record-row-alternate);
}

.shell-body :is(
  .inventory-catalog-row,
  .studio-admin-row,
  .studio-report-row,
  .account-session-list > div,
  .sale-timeline-item,
  .intervention-history li,
  .list-row
):hover {
  background-color: var(--ui-record-hover);
}

/* Lists living inside a modal still need their own bounded record surface. */
.shell-body :is(.session-list, .payment-event-list) {
  border: 1px solid var(--ui-record-edge) !important;
  border-radius: 12px;
  background-color: var(--ui-record-surface) !important;
  background-image: none !important;
  overflow-x: hidden;
}

/* The session list can stay shorter than its limit. Do not reserve a
 * scrollbar gutter in that state, otherwise the current-session surface
 * leaves an artificial dark strip along the right edge. */
.shell-body .session-list.ui-scroll-region {
  scrollbar-gutter: auto;
}

.shell-body .payment-event-list {
  padding-inline: 12px;
}

.shell-body .session-item:not(.is-current) {
  border-bottom-color: var(--ui-record-divider);
  background-color: var(--ui-record-row);
}

.shell-body .session-item:not(.is-current):nth-child(even) {
  background-color: var(--ui-record-row-alternate);
}

.shell-body .session-item:not(.is-current):hover {
  background-color: var(--ui-record-hover);
}

/* Contextual information surfaces ------------------------------------------
 * A quieter layer for summaries, identities and grouped operational facts.
 * It inherits the workspace accent and stays solid so it never competes with
 * module headers, metric cards or semantic status treatments.
 */
.shell-body:is(.area-app, .area-studio, .area-admin) {
  --ui-context-surface: color-mix(
    in oklab,
    var(--ui-surface) 97%,
    var(--ui-accent) 3%
  );
  --ui-context-raised: color-mix(
    in oklab,
    var(--ui-surface-raised) 96%,
    var(--ui-accent) 4%
  );
  --ui-context-inset: color-mix(
    in oklab,
    var(--ui-surface) 99%,
    var(--ui-accent) 1%
  );
  --ui-context-hover: color-mix(
    in oklab,
    var(--ui-surface-raised) 93%,
    var(--ui-accent) 7%
  );
  --ui-context-edge: color-mix(in srgb, var(--ui-accent) 11%, var(--ui-edge));
  --ui-context-divider: color-mix(in srgb, var(--ui-accent) 5%, var(--ui-edge-soft));
  --ui-context-shadow: 0 7px 18px rgba(3, 8, 17, .1), inset 0 1px 0 rgba(255, 255, 255, .014);
}

html[data-theme="light"] .shell-body:is(.area-app, .area-studio, .area-admin) {
  --ui-context-surface: color-mix(
    in oklab,
    var(--ui-surface) 99%,
    var(--ui-accent) 1%
  );
  --ui-context-raised: color-mix(
    in oklab,
    var(--ui-surface-raised) 98%,
    var(--ui-accent) 2%
  );
  --ui-context-inset: color-mix(
    in oklab,
    var(--ui-surface) 100%,
    var(--ui-accent) 0%
  );
  --ui-context-hover: color-mix(
    in oklab,
    var(--ui-surface-raised) 97%,
    var(--ui-accent) 3%
  );
  --ui-context-edge: color-mix(in srgb, var(--ui-accent) 7%, var(--ui-edge));
  --ui-context-divider: color-mix(in srgb, var(--ui-accent) 3%, var(--ui-edge-soft));
  --ui-context-shadow: 0 8px 20px rgba(30, 64, 175, .045), inset 0 1px 0 rgba(255, 255, 255, .72);
}

/* Reusable primitive plus the existing neutral context hosts. */
.shell-body :is(
  .ui-context-surface,
  .inventory-overview,
  .studio-overview-strip,
  .settings-hub,
  .sale-detail-hero,
  .sale-detail-metrics,
  .outage-summary-metrics,
  .outage-detail-progress,
  .outage-detail-overview > dl,
  .outage-context-note,
  .admin-metrics-context
) {
  border-color: var(--ui-context-edge) !important;
  background-color: var(--ui-context-surface) !important;
  background-image: none !important;
  box-shadow: var(--ui-context-shadow) !important;
}

/* Bounded context inside forms and modals uses the same material at one step up. */
.shell-body :is(
  .ui-context-segment,
  .sessions-summary,
  .modal-context-row,
  .modal-safety-note,
  .password-policy-compact,
  .security-code-panel,
  .security-explainer,
  .email-change-code,
  .renewal-context,
  .decision-context
) {
  border-color: var(--ui-context-edge) !important;
  background-color: var(--ui-context-raised) !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* A context host remains one component; its sections do not become new cards. */
.shell-body .settings-hub > :is(
  .account-hub-profile,
  .business-hub-identity,
  .settings-hub-foot
) {
  border-color: var(--ui-context-divider) !important;
  background-color: var(--ui-context-raised) !important;
  background-image: none !important;
}

.shell-body .settings-hub :is(
  .settings-action-card,
  .business-facts-grid > div
) {
  --ui-item-accent: var(--ui-accent);
  border-color: var(--ui-context-divider) !important;
  background-color: var(--ui-context-inset) !important;
  background-image: none !important;
  box-shadow: none !important;
}

.shell-body .settings-hub .settings-action-card:hover {
  border-color: var(--ui-context-edge) !important;
  background-color: var(--ui-context-hover) !important;
}

/* Horizontal summaries keep their compact grouping and gain tonal depth. */
.shell-body :is(
  .inventory-overview-metrics,
  .sale-detail-metrics > article,
  .outage-summary-metrics > span,
  .outage-detail-overview > dl > div,
  .sale-control-grid > div,
  .sale-trace-list > div,
  .renewal-result-facts > div
) {
  border-color: var(--ui-context-divider) !important;
  background-color: var(--ui-context-inset) !important;
  background-image: none !important;
}

.shell-body .inventory-overview-metrics {
  border-color: var(--ui-context-divider) !important;
  background-color: var(--ui-context-raised) !important;
}

.shell-body .studio-overview-strip > div {
  border-color: var(--ui-context-divider) !important;
}

/* Full internal-surface audit ------------------------------------------------
 * Any ordinary operational panel consumes the contextual material by default.
 * Record hosts and the two bespoke dashboard panels keep their own established
 * systems, so a later screen cannot silently fall back to a neutral void.
 */
@supports selector(.panel:has(.data-table)) {
  .shell-body .panel:not(
    :is(.dashboard-grid, .admin-dashboard-grid) > .panel,
    .table-wrap,
    .inventory-accounts-workspace,
    .inventory-catalog-panel,
    .studio-library-panel,
    .studio-report-panel,
    .intervention-history,
    .outage-workspace,
    .outage-impact-panel,
    .sale-timeline-panel
  ):not(:has(
    :is(
      .data-table,
      .inventory-catalog-list,
      .studio-admin-list,
      .studio-report-list,
      .account-session-list,
      .data-activity-list,
      .payment-history,
      .outage-impact-list,
      .sale-trace-list,
      .sale-timeline
    )
  )) {
    border-color: var(--ui-context-edge) !important;
    background-color: var(--ui-context-surface) !important;
    background-image: none !important;
    box-shadow: var(--ui-context-shadow) !important;
  }

  .shell-body .panel:not(
    :is(.dashboard-grid, .admin-dashboard-grid) > .panel,
    .table-wrap,
    .inventory-accounts-workspace,
    .inventory-catalog-panel,
    .studio-library-panel,
    .studio-report-panel,
    .intervention-history,
    .outage-workspace,
    .outage-impact-panel,
    .sale-timeline-panel
  ):not(:has(
    :is(
      .data-table,
      .inventory-catalog-list,
      .studio-admin-list,
      .studio-report-list,
      .account-session-list,
      .data-activity-list,
      .payment-history,
      .outage-impact-list,
      .sale-trace-list,
      .sale-timeline
    )
  )) > .panel-head {
    border-bottom-color: var(--ui-context-divider) !important;
    background-color: var(--ui-context-raised) !important;
    background-image: none !important;
  }
}

/* Standalone operational summaries that are not built with `.panel`. */
.shell-body :is(
  .customer-hero,
  .customer-note,
  .outage-summary-primary,
  .outage-detail-signal,
  .data-access-notice
) {
  background-color: var(--ui-context-surface) !important;
  background-image: none !important;
  box-shadow: var(--ui-context-shadow) !important;
}

.shell-body :is(
  .customer-hero,
  .customer-note,
  .outage-summary-primary:not(.has-open),
  .data-access-notice
) {
  border-color: var(--ui-context-edge) !important;
}

/* Semantic borders remain explicit even while their host gains depth. */
.shell-body .outage-summary-primary.has-open,
.shell-body .outage-detail-signal {
  border-color: color-mix(in srgb, var(--warning) 52%, var(--ui-context-edge)) !important;
}

/* Repeated neutral content inside the audited panels uses one quiet inset. */
.shell-body :is(
  .account-admin-data > div,
  .current-subscription-admin,
  .intervention-action:not(.danger),
  .export-card,
  .data-scope-list > div,
  .backup-explainer,
  .subscription-date,
  .platform-catalog-note,
  .sale-readiness,
  .sale-assignment-preview,
  .outage-resolution-summary,
  .admin-intervention-impact.is-info
) {
  border-color: var(--ui-context-divider) !important;
  background-color: var(--ui-context-inset) !important;
  background-image: none !important;
  box-shadow: none !important;
}

.shell-body :is(
  .intervention-action:not(.danger),
  .export-card
):hover {
  border-color: var(--ui-context-edge) !important;
  background-color: var(--ui-context-hover) !important;
}

/* Chart plotting areas retain their functional grid, but no longer look hollow. */
.shell-body .page-content > .panel .chart-bars {
  border-color: var(--ui-context-divider) !important;
  background-color: var(--ui-context-inset) !important;
}

/* Compact responsive records ----------------------------------------------
 * One semantic table on wide desktop, one shared two-band record when the
 * shell leaves insufficient width for a readable tabular row.
 * The roles are assigned progressively by app.js, so every module inherits
 * the same reading order while retaining its Gestor, Studio or Admin accent.
 */
.shell-body :is(.mobile-record-summary-cell, .mobile-record-details-cell) {
  display: none !important;
}

@media (max-width: 1180px) {
  .shell-body .table-wrap:has(> .data-table[data-mobile-records="true"]),
  .shell-body .panel:has(> .data-table[data-mobile-records="true"]) {
    max-width: 100%;
    overflow-x: hidden !important;
    overscroll-behavior-inline: auto;
    scrollbar-gutter: auto;
  }

  .shell-body .data-table[data-mobile-records="true"] {
    width: 100% !important;
    min-width: 0 !important;
    display: block;
    table-layout: auto;
    white-space: normal;
  }

  .shell-body .data-table[data-mobile-records="true"] thead {
    width: 1px;
    height: 1px;
    position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .shell-body .data-table[data-mobile-records="true"] tbody {
    width: 100%;
    padding: 8px;
    display: grid;
    gap: 8px;
  }

  .shell-body .data-table[data-mobile-records="true"] tbody > tr:not([data-mobile-record-empty="true"]) {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(84px, 1.1fr) minmax(68px, 1fr) var(--ui-status-label-width);
    overflow: hidden;
    border: 1px solid var(--ui-record-edge);
    border-radius: 13px;
    background-color: var(--ui-record-row) !important;
    box-shadow: inset 2px 0 0 color-mix(in srgb, var(--ui-accent) 32%, transparent);
  }

  .shell-body .data-table[data-mobile-records="true"] tbody > tr:nth-child(even):not([data-mobile-record-empty="true"]) {
    background-color: var(--ui-record-row-alternate) !important;
  }

  .shell-body .data-table[data-mobile-records="true"] tbody > tr:not([data-mobile-record-empty="true"]) > td {
    min-width: 0;
    min-height: 0;
    height: auto !important;
    padding: 8px 10px !important;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .shell-body .data-table[data-mobile-records="true"] td[data-mobile-field="identity"] { grid-column: 1; grid-row: 1; }
  .shell-body .data-table[data-mobile-records="true"] td[data-mobile-field="contact"] { grid-column: 2; grid-row: 1; }
  .shell-body .data-table[data-mobile-records="true"] td[data-mobile-field="status"] { grid-column: 3; grid-row: 1; align-items: flex-end !important; text-align: right; }
  .shell-body .data-table[data-mobile-records="true"] td[data-mobile-field="service"] { grid-column: 1; grid-row: 2; }
  .shell-body .data-table[data-mobile-records="true"] td[data-mobile-field="meta"] { grid-column: 2; grid-row: 2; }
  .shell-body .data-table[data-mobile-records="true"] td[data-mobile-field="amount"] { grid-column: 3; grid-row: 2; }
  .shell-body .data-table[data-mobile-records="true"] td[data-mobile-field="date"] { grid-column: 1; grid-row: 3; }
  .shell-body .data-table[data-mobile-records="true"] td[data-mobile-field="actions"] { grid-column: 2 / 4; grid-row: 3; align-items: flex-end !important; text-align: right; }

  .shell-body .data-table[data-mobile-records="true"] tr:not(:has(> [data-mobile-field="contact"])) > td[data-mobile-field="identity"] { grid-column: 1 / 3; }
  .shell-body .data-table[data-mobile-records="true"] tr:not(:has(> [data-mobile-field="status"])) > td[data-mobile-field="contact"] { grid-column: 2 / 4; }
  .shell-body .data-table[data-mobile-records="true"] tr:not(:has(> [data-mobile-field="contact"])):not(:has(> [data-mobile-field="status"])) > td[data-mobile-field="identity"] { grid-column: 1 / 4; }
  .shell-body .data-table[data-mobile-records="true"] tr:not(:has(> [data-mobile-field="meta"])) > td[data-mobile-field="service"] { grid-column: 1 / 3; }
  .shell-body .data-table[data-mobile-records="true"] tr:not(:has(> [data-mobile-field="amount"])):has(> [data-mobile-field="meta"]) > td[data-mobile-field="service"] { grid-column: 1 / 3; }
  .shell-body .data-table[data-mobile-records="true"] tr:not(:has(> [data-mobile-field="amount"])):has(> [data-mobile-field="service"]) > td[data-mobile-field="meta"] { grid-column: 3; }
  .shell-body .data-table[data-mobile-records="true"] tr:not(:has(> [data-mobile-field="service"])) > td[data-mobile-field="meta"] { grid-column: 1 / 3; }
  .shell-body .data-table[data-mobile-records="true"] tr:not(:has(> [data-mobile-field="meta"])):not(:has(> [data-mobile-field="amount"])) > td[data-mobile-field="service"] { grid-column: 1 / 4; }
  .shell-body .data-table[data-mobile-records="true"] tr:not(:has(> [data-mobile-field="service"])):not(:has(> [data-mobile-field="amount"])) > td[data-mobile-field="meta"] { grid-column: 1 / 4; }
  .shell-body .data-table[data-mobile-records="true"] tr:not(:has(> [data-mobile-field="service"])):not(:has(> [data-mobile-field="meta"])) > td[data-mobile-field="amount"] { grid-column: 1 / 4; }
  .shell-body .data-table[data-mobile-records="true"] tr:not(:has(> [data-mobile-field="date"])) > td[data-mobile-field="actions"] { grid-column: 1 / 4; }
  .shell-body .data-table[data-mobile-records="true"] tr:not(:has(> [data-mobile-field="actions"])) > td[data-mobile-field="date"] { grid-column: 1 / 4; }

  .shell-body .data-table[data-mobile-records="true"] td:is(
    [data-mobile-field="service"],
    [data-mobile-field="meta"],
    [data-mobile-field="amount"]
  ) {
    border-top: 1px solid var(--ui-record-divider) !important;
    background-color: color-mix(in srgb, var(--ui-context-inset) 42%, transparent) !important;
  }

  .shell-body .data-table[data-mobile-records="true"] td:is(
    [data-mobile-field="date"],
    [data-mobile-field="actions"]
  ) {
    border-top: 1px solid var(--ui-record-divider) !important;
  }

  .shell-body .data-table[data-mobile-records="true"] td::before {
    content: attr(data-mobile-label);
    margin-bottom: 4px;
    display: block;
    color: var(--muted);
    font:700 var(--type-caption)/1.2 var(--mono);
    letter-spacing: .075em;
    text-transform: uppercase;
  }

  .shell-body .data-table[data-mobile-records="true"] td[data-mobile-field="actions"]::before {
    display: none;
  }

  .shell-body .data-table[data-mobile-records="true"] :is(.table-primary, .customer-row-link, .service-platform-cell) {
    max-width: 100%;
    min-width: 0;
  }

  .shell-body .data-table[data-mobile-records="true"] :is(.table-name, .table-primary > span:last-child) {
    min-width: 0;
  }

  .shell-body .data-table[data-mobile-records="true"] .table-name small {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .shell-body .data-table[data-mobile-records="true"] td[data-mobile-field="actions"] > :is(
    .actions,
    .table-actions,
    .sale-row-actions,
    form
  ) {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
  }

  .shell-body .data-table[data-mobile-records="true"] td[data-mobile-field="actions"] :is(.button, .icon-button, button, summary) {
    min-height: 44px;
  }

  .shell-body .data-table[data-mobile-records="true"] td[data-mobile-field="actions"] > .button,
  .shell-body .data-table[data-mobile-records="true"] td[data-mobile-field="actions"] > form,
  .shell-body .data-table[data-mobile-records="true"] td[data-mobile-field="actions"] > details {
    max-width: 100%;
  }

  .shell-body .data-table[data-mobile-records="true"] tr[data-mobile-record-empty="true"] {
    display: block;
    border: 0;
    background: transparent !important;
  }

  .shell-body .data-table[data-mobile-records="true"] tr[data-mobile-record-empty="true"] > td {
    width: 100%;
    min-height: 128px;
    display: grid;
    place-items: center;
    border: 0 !important;
  }

  .shell-body .data-table[data-mobile-records="true"] tr[data-mobile-record-empty="true"] > td::before {
    display: none;
  }

  .shell-body .sales-list-table[data-mobile-records="true"] .sale-row-actions > .sale-action-menu {
    width: 44px;
    flex: 0 0 44px;
  }

  .shell-body .sales-list-table[data-mobile-records="true"] .sale-row-actions > .sale-action-menu > summary {
    width: 44px;
    padding-inline: 0;
    justify-content: center;
  }

  .shell-body .sales-list-table[data-mobile-records="true"] .sale-row-actions > .sale-detail-link {
    min-width: 0;
    flex: 1 1 auto;
    padding-inline: 8px;
  }

  .shell-body .sales-list-table[data-mobile-records="true"] .sale-row-menu-label,
  .shell-body .sales-list-table[data-mobile-records="true"] .sale-row-menu-chevron {
    display: none;
  }

  /* Studio and catalogue records are already semantic cards; they consume the
     same contextual material without being converted into artificial tables. */
  .shell-body :is(.studio-admin-list, .studio-report-list, .inventory-catalog-list) {
    padding: 8px;
    display: grid;
    gap: 8px;
  }

  .shell-body :is(.studio-admin-row, .studio-report-row, .inventory-catalog-row) {
    overflow: hidden;
    border: 1px solid var(--ui-record-edge) !important;
    border-radius: 13px;
    background-color: var(--ui-record-row) !important;
    box-shadow: inset 2px 0 0 color-mix(in srgb, var(--ui-accent) 32%, transparent);
  }

  .shell-body :is(.studio-admin-row, .studio-report-row, .inventory-catalog-row):nth-child(even) {
    background-color: var(--ui-record-row-alternate) !important;
  }

  .shell-body .studio-report-row {
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 10px;
    padding: 11px;
  }

  .shell-body .studio-report-row > img {
    grid-column: 1;
    grid-row: 1;
  }

  .shell-body .studio-report-copy {
    grid-column: 2;
    grid-row: 1;
  }

  .shell-body .studio-report-user {
    grid-column: 1 / 3;
    grid-row: 2;
    padding-top: 10px;
    border-top: 1px solid var(--ui-record-divider);
  }

  .shell-body .studio-report-actions {
    grid-column: 1 / 3;
    grid-row: 3;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .shell-body .studio-report-actions .button {
    min-width: 0;
    min-height: 44px;
  }
}

/* Service-first mobile records -------------------------------------------
 * The semantic desktop table remains untouched. On phones, each row exposes
 * its primary service/resource, identity context, status and its most useful
 * date or amount. The disclosure preserves secondary facts and then actions.
 */
@media (max-width: 760px) {
  .shell-body .data-table[data-mobile-records="true"] tbody {
    padding: 0 !important;
    gap: 4px !important;
  }

  .shell-body .data-table[data-mobile-records="true"] tbody > tr[data-mobile-record-item="true"] {
    display: block !important;
    border-radius: 12px;
    background-color: var(--ui-record-row) !important;
    box-shadow: none;
  }

  .shell-body .data-table[data-mobile-records="true"] tbody > tr[data-mobile-record-item="true"][data-mobile-expanded="true"] {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
  }

  .shell-body .data-table[data-mobile-records="true"] tbody > tr[data-mobile-record-item="true"]:nth-child(even) {
    background-color: var(--ui-record-row) !important;
  }

  .shell-body .data-table[data-mobile-records="true"] tr[data-mobile-record-item="true"] > td {
    display: none !important;
  }

  .shell-body .data-table[data-mobile-records="true"] tr[data-mobile-record-item="true"] > .mobile-record-summary-cell {
    width: 100%;
    height: auto;
    min-height: 68px;
    box-sizing: border-box;
    padding: 8px 8px 8px 12px !important;
    display: grid !important;
    grid-column: 1;
    grid-row: 1;
    grid-template-columns: minmax(0, 1fr) var(--ui-mobile-record-status-width) 44px;
    grid-template-rows: minmax(24px, auto) minmax(20px, auto);
    align-items: center;
    column-gap: 8px;
    border: 0 !important;
    background: transparent !important;
  }

  .shell-body .data-table[data-mobile-records="true"] .mobile-record-summary-cell::before {
    display: none;
  }

  .shell-body .mobile-record-summary-primary {
    min-width: 0;
    grid-column: 1;
    grid-row: 1;
    align-self: end;
  }

  .shell-body .mobile-record-summary-primary > :is(.table-primary, .table-name, .service-platform-cell, .inventory-account-name),
  .shell-body .mobile-record-summary-primary > :is(a, span, strong) {
    max-width: 100%;
    min-width: 0;
  }

  .shell-body .mobile-record-summary-primary :is(.platform-logo, [class*="platform-logo-"]) {
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    border-radius: 9px !important;
    transform: translateY(var(--ui-mobile-record-logo-shift));
  }

  .shell-body .mobile-record-summary-primary :is(.table-name strong, .service-platform-title strong, .inventory-account-name strong),
  .shell-body .mobile-record-summary-primary > strong {
    overflow: hidden;
    color: var(--text);
    font-size:var(--type-caption);
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .shell-body .mobile-record-summary-primary .service-platform-title {
    min-width: 0;
    flex-wrap: nowrap;
  }

  .shell-body .mobile-record-summary-primary .coverage-inline-danger {
    min-width: 0;
    overflow: hidden;
    font-size:var(--type-caption);
    overflow-wrap: normal;
    text-overflow: ellipsis;
    white-space: nowrap !important;
  }

  .shell-body .mobile-record-summary-secondary {
    min-width: 0;
    box-sizing: border-box;
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    overflow: hidden;
    color: var(--muted);
    font-size:var(--type-caption);
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .shell-body .mobile-record-summary-cell:has(.mobile-record-summary-primary :is(.platform-logo, [class*="platform-logo-"])) .mobile-record-summary-secondary {
    padding-inline-start: var(--ui-mobile-record-logo-offset);
  }

  .shell-body .mobile-record-summary-cell:has(.mobile-record-summary-primary :is(.table-avatar, .avatar)) .mobile-record-summary-secondary {
    padding-inline-start: var(--ui-mobile-record-avatar-offset);
  }

  .shell-body .mobile-record-summary-status {
    min-width: 0;
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }

  .shell-body .mobile-record-summary-status .customer-active-services {
    display: block;
    max-width: var(--ui-mobile-record-status-width);
    color: var(--muted);
    font:700 var(--type-caption)/1.25 var(--mono);
    text-align: right;
    white-space: normal;
  }

  .shell-body .mobile-record-summary-status:has(.customer-active-services) {
    grid-row: 1 / 3;
    align-self: center;
  }

  .shell-body .data-table[data-mobile-records="true"] tr[data-mobile-record-item="true"] > .mobile-record-summary-cell[data-mobile-rich-status="true"] {
    min-height: 76px;
    grid-template-columns: minmax(0, 1fr) var(--ui-mobile-record-rich-status-width) 44px;
    grid-template-rows: minmax(20px, auto) minmax(18px, auto) minmax(18px, auto);
  }

  .shell-body .mobile-record-summary-cell[data-mobile-rich-status="true"] .mobile-record-summary-status {
    width: 100%;
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: end;
    justify-self: stretch;
  }

  .shell-body .mobile-record-summary-cell[data-mobile-rich-status="true"] .mobile-record-summary-status .ui-capacity-meter {
    width: 100%;
    gap: 5px;
  }

  .shell-body .mobile-record-summary-cell[data-mobile-rich-status="true"] .mobile-record-summary-status .ui-capacity-meter__heading > strong {
    display: none;
  }

  .shell-body .mobile-record-summary-cell[data-mobile-rich-status="true"] .mobile-record-summary-status .ui-capacity-meter__heading:not(:has(.ui-capacity-meter__notice)) {
    display: none;
  }

  .shell-body .mobile-record-summary-cell[data-mobile-rich-status="true"] .mobile-record-summary-status .ui-capacity-meter__heading > small,
  .shell-body .mobile-record-summary-cell[data-mobile-rich-status="true"] .mobile-record-summary-status .ui-capacity-meter__meta > :is(strong, small) {
    font-size:var(--type-caption);
  }

  .shell-body .mobile-record-summary-cell[data-mobile-rich-status="true"] .mobile-record-summary-status .ui-capacity-meter__track {
    height: 4px;
  }

  .shell-body .mobile-record-summary-status :is(.badge, .ui-status-label),
  .shell-body .mobile-record-summary-status:is(.badge, .ui-status-label) {
    width: var(--ui-mobile-record-status-width) !important;
    min-width: var(--ui-mobile-record-status-width) !important;
    max-width: var(--ui-mobile-record-status-width) !important;
  }

  .shell-body .mobile-record-summary-signal {
    min-width: 0;
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    overflow: hidden;
    color: var(--muted);
    font:700 var(--type-caption)/1.2 var(--mono);
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .shell-body .mobile-record-summary-signal[data-mobile-signal="signal"] {
    max-width: var(--ui-mobile-record-status-width);
    overflow: visible;
    font:700 var(--type-caption)/1.2 var(--font);
    text-overflow: clip;
    white-space: normal;
  }

  .shell-body .mobile-record-summary-cell[data-mobile-rich-status="true"] .mobile-record-summary-signal {
    grid-column: 2;
    grid-row: 3;
    justify-self: end;
    text-align: right;
  }

  .shell-body .mobile-record-summary-cell[data-mobile-has-status="false"] .mobile-record-summary-primary {
    grid-column: 1 / 3;
  }

  .shell-body .mobile-record-summary-cell[data-mobile-has-status="false"][data-mobile-has-signal="false"] .mobile-record-summary-secondary {
    grid-column: 1 / 3;
  }

  .shell-body tr[data-mobile-record-static="true"] .mobile-record-summary-cell {
    grid-template-columns: minmax(0, 1fr) var(--ui-mobile-record-status-width);
  }

  .shell-body tr[data-mobile-record-static="true"] .mobile-record-summary-cell[data-mobile-has-status="false"][data-mobile-has-signal="false"] :is(.mobile-record-summary-primary, .mobile-record-summary-secondary) {
    grid-column: 1 / -1;
  }

  .shell-body .mobile-record-toggle {
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0;
    grid-column: 3;
    grid-row: 1 / 3;
    display: inline-grid;
    place-items: center;
    align-self: center;
    border: 1px solid var(--ui-interactive-edge);
    border-radius: 10px;
    color: var(--muted);
    background: var(--ui-interactive-surface);
    box-shadow: var(--ui-interactive-shadow);
    cursor: pointer;
    touch-action: manipulation;
  }

  .shell-body .mobile-record-summary-cell[data-mobile-rich-status="true"] .mobile-record-toggle {
    grid-row: 1 / 4;
  }

  .shell-body .mobile-record-toggle > span,
  .shell-body .mobile-record-toggle svg {
    width: 17px;
    height: 17px;
    display: block;
  }

  .shell-body .mobile-record-toggle > span {
    transition: transform var(--ui-fast) var(--ui-ease);
  }

  .shell-body .mobile-record-toggle svg {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
  }

  .shell-body tr[data-mobile-expanded="true"] .mobile-record-toggle > span {
    transform: rotate(90deg);
  }

  .shell-body .mobile-record-toggle:hover,
  .shell-body .mobile-record-toggle[aria-expanded="true"] {
    border-color: var(--ui-interactive-edge-hover);
    color: var(--ui-accent-content);
    background: var(--ui-interactive-surface-hover);
  }

  .shell-body .mobile-record-toggle:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--ui-accent-content) 72%, transparent);
    outline-offset: 2px;
  }

  .shell-body .data-table[data-mobile-records="true"] tr[data-mobile-expanded="true"] > .mobile-record-details-cell {
    width: 100%;
    padding: 10px !important;
    display: block !important;
    grid-column: 1;
    grid-row: 2;
    border-top: 1px solid var(--ui-record-divider) !important;
    background-color: var(--ui-context-inset) !important;
  }

  .shell-body .mobile-record-facts {
    margin: 0;
    display: grid;
    gap: 10px 14px;
  }

  .shell-body .mobile-record-fact {
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 4px;
  }

  .shell-body .mobile-record-fact dt {
    margin: 0;
    color: var(--muted);
    font:700 var(--type-caption)/1.2 var(--mono);
    letter-spacing: .055em;
    text-transform: uppercase;
  }

  .shell-body .mobile-record-fact dd {
    min-width: 0;
    margin: 0;
    color: var(--text);
    font-size:var(--type-caption);
    line-height: 1.4;
    overflow-wrap: anywhere;
  }

  .shell-body .mobile-record-fact dd :is(.table-primary, .table-name, .service-platform-cell, .inventory-account-name, .inventory-access-cell) {
    min-width: 0;
    max-width: 100%;
  }

  .shell-body .mobile-record-detail-content .inventory-expiry-relative {
    display: none;
  }

  .shell-body .mobile-record-fact dd :is(.platform-logo, [class*="platform-logo-"]) {
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
  }

  .shell-body .mobile-record-fact [data-mobile-passive="true"] {
    color: inherit;
    pointer-events: none;
    cursor: default;
  }

  .shell-body .data-table[data-mobile-records="true"] tr[data-mobile-expanded="true"] > td[data-mobile-field="actions"] {
    --ui-mobile-action-columns: 2;
    width: 100%;
    padding: 8px 10px 10px !important;
    display: grid !important;
    grid-column: 1;
    grid-row: 3;
    grid-template-columns: repeat(var(--ui-mobile-action-columns), minmax(0, 1fr));
    align-items: stretch !important;
    gap: 8px;
    border-top: 1px solid var(--ui-record-divider) !important;
    background-color: var(--ui-context-inset) !important;
  }

  .shell-body .data-table[data-mobile-records="true"] tr[data-mobile-expanded="true"] > td[data-mobile-field="actions"] > :is(
    .actions,
    .table-actions,
    .sale-row-actions,
    .outage-row-actions,
    div:has(> :is(a.button, button, form, details))
  ) {
    width: 100%;
    min-width: 0;
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(var(--ui-mobile-action-columns), minmax(0, 1fr));
    align-items: stretch;
    gap: 8px;
  }

  .shell-body .data-table[data-mobile-records="true"] tr[data-mobile-expanded="true"] > td[data-mobile-field="actions"]:has(> :nth-child(3):last-child),
  .shell-body .data-table[data-mobile-records="true"] tr[data-mobile-expanded="true"] > td[data-mobile-field="actions"] > :is(
    .actions,
    .table-actions,
    .sale-row-actions,
    .outage-row-actions,
    div:has(> :is(a.button, button, form, details))
  ):has(> :nth-child(3):last-child) {
    --ui-mobile-action-columns: 3;
  }

  .shell-body .data-table[data-mobile-records="true"] tr[data-mobile-expanded="true"] > td[data-mobile-field="actions"] > :is(a.button, button, form, details),
  .shell-body .data-table[data-mobile-records="true"] tr[data-mobile-expanded="true"] > td[data-mobile-field="actions"] > :is(
    .actions,
    .table-actions,
    .sale-row-actions,
    .outage-row-actions,
    div:has(> :is(a.button, button, form, details))
  ) > :is(a.button, button, form, details) {
    width: 100%;
    min-width: 0;
  }

  .shell-body .data-table[data-mobile-records="true"] tr[data-mobile-expanded="true"] > td[data-mobile-field="actions"] > :only-child,
  .shell-body .data-table[data-mobile-records="true"] tr[data-mobile-expanded="true"] > td[data-mobile-field="actions"] > :is(
    .actions,
    .table-actions,
    .sale-row-actions,
    .outage-row-actions,
    div:has(> :is(a.button, button, form, details))
  ) > :only-child {
    grid-column: 1 / -1;
  }

  .shell-body .data-table[data-mobile-records="true"] tr[data-mobile-expanded="true"] > td[data-mobile-field="actions"] :is(form, details) > :is(.button, button, summary) {
    width: 100%;
    min-width: 0;
    justify-content: center;
  }

  .shell-body .sales-list-table[data-mobile-records="true"] .sale-row-actions > .sale-action-menu,
  .shell-body .sales-list-table[data-mobile-records="true"] .sale-row-actions > .sale-action-menu > summary {
    width: 100%;
    min-width: 0;
  }

  .shell-body .sales-list-table[data-mobile-records="true"] .sale-row-actions > .sale-action-menu {
    flex: initial;
  }

  .shell-body .sales-list-table[data-mobile-records="true"] .sale-row-actions > .sale-action-menu > summary {
    padding-inline: 8px;
  }

  .shell-body .sales-list-table[data-mobile-records="true"] .sale-row-menu-label,
  .shell-body .sales-list-table[data-mobile-records="true"] .sale-row-menu-chevron {
    display: inline-flex;
  }
}

/* Functional filtering must outrank the mobile card display contract. */
.shell-body .data-table[data-mobile-records="true"] tbody > tr[hidden] {
  display: none !important;
}

@media (max-width: 360px) {
  .shell-body .data-table[data-mobile-records="true"] tbody {
    padding: 0 !important;
    gap: 4px !important;
  }

  .shell-body .data-table[data-mobile-records="true"] tr[data-mobile-record-item="true"] > .mobile-record-summary-cell {
    padding: 8px 8px 8px 10px !important;
  }

  .shell-body .data-table[data-mobile-records="true"] td[data-mobile-field="actions"] .button {
    font-size:var(--type-caption);
    gap: 4px;
  }

}

@media (prefers-reduced-motion: reduce) {
  .shell-body .mobile-record-toggle > span,
  .ui-capacity-meter__track > span {
    transition: none !important;
  }
}

/* Compact facts reuse the width of a phone instead of turning every short value
 * into a full-width row. Long-form content and forms deliberately do not opt in. */
@media (max-width: 760px) {
  .ui-compact-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .ui-compact-facts > * {
    min-width: 0;
  }

  .ui-compact-facts :is(dd, strong, b, a) {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .ui-compact-facts > :last-child:nth-child(odd) {
    grid-column: 1 / -1 !important;
  }

  .ui-compact-facts--seamless > * {
    border-right: 1px solid var(--ui-context-divider, var(--border)) !important;
    border-bottom: 1px solid var(--ui-context-divider, var(--border)) !important;
  }

  .ui-compact-facts--seamless > :nth-child(even),
  .ui-compact-facts--seamless > :last-child:nth-child(odd) {
    border-right: 0 !important;
  }

  .ui-compact-facts--seamless > :nth-last-child(2):nth-child(odd),
  .ui-compact-facts--seamless > :last-child {
    border-bottom: 0 !important;
  }
}

/* Wide phones share the same six-track fact grid as expanded table records.
 * Three facts use one row; incomplete rows redistribute instead of leaving a gap. */
@media (min-width: 480px) and (max-width: 760px) {
  .ui-compact-facts {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }

  .ui-compact-facts > *,
  .ui-compact-facts > :last-child:nth-child(odd) {
    grid-column: span 2 !important;
  }

  .ui-compact-facts > :nth-last-child(2):nth-child(3n + 1),
  .ui-compact-facts > :last-child:nth-child(3n + 2) {
    grid-column: span 3 !important;
  }

  .ui-compact-facts > :only-child,
  .ui-compact-facts > :last-child:nth-child(3n + 1) {
    grid-column: 1 / -1 !important;
  }

  .ui-compact-facts:has(> :nth-child(4):last-child) > * {
    grid-column: span 3 !important;
  }

  .ui-compact-facts--seamless > :nth-child(even) {
    border-right: 1px solid var(--ui-context-divider, var(--border)) !important;
  }

  .ui-compact-facts--seamless > :nth-last-child(2):nth-child(odd) {
    border-bottom: 1px solid var(--ui-context-divider, var(--border)) !important;
  }

  .ui-compact-facts--seamless > :nth-child(3n),
  .ui-compact-facts--seamless > :last-child {
    border-right: 0 !important;
  }

  .ui-compact-facts--seamless > :nth-last-child(3):nth-child(3n + 1),
  .ui-compact-facts--seamless > :nth-last-child(2):nth-child(3n + 1),
  .ui-compact-facts--seamless > :nth-last-child(2):nth-child(3n + 2),
  .ui-compact-facts--seamless > :last-child {
    border-bottom: 0 !important;
  }

  .ui-compact-facts--seamless:has(> :nth-child(4):last-child) > :nth-child(odd) {
    border-right: 1px solid var(--ui-context-divider, var(--border)) !important;
  }

  .ui-compact-facts--seamless:has(> :nth-child(4):last-child) > :nth-child(even) {
    border-right: 0 !important;
  }

  .ui-compact-facts--seamless:has(> :nth-child(4):last-child) > :nth-child(-n + 2) {
    border-bottom: 1px solid var(--ui-context-divider, var(--border)) !important;
  }

  .ui-compact-facts--seamless:has(> :nth-child(4):last-child) > :nth-last-child(-n + 2) {
    border-bottom: 0 !important;
  }
}

@media (max-width: 360px) {
  .ui-compact-facts {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .ui-compact-facts > :last-child:nth-child(odd) {
    grid-column: auto !important;
  }

  .ui-compact-facts--seamless > * {
    border-right: 0 !important;
    border-bottom: 1px solid var(--ui-context-divider, var(--border)) !important;
  }

  .ui-compact-facts--seamless > :last-child {
    border-bottom: 0 !important;
  }
}

/* Vigencias: el contorno completo comunica la identidad de cada opción.
 * Se mantiene el separador interno neutro para conservar jerarquía y lectura. */
.shell-body .admin-period-card,
.shell-body .period-choice,
.public-body .public-period-card {
  border-color: color-mix(in srgb, var(--plan-accent) 38%, var(--ui-edge)) !important;
}

.shell-body .admin-period-card:hover,
.shell-body .period-choice:hover,
.shell-body .period-choice.selected,
.public-body .public-period-card:hover {
  border-color: color-mix(in srgb, var(--plan-accent) 38%, var(--ui-edge)) !important;
}
/* Shared confirmation dialog replaces browser-native prompts with an accessible,
   visually consistent action review. */
.shared-confirm-card{width:min(520px,calc(100vw - 32px))}
.shared-confirm-body{display:grid;gap:18px}
.shared-confirm-summary{min-height:88px;padding:14px;display:grid;grid-template-columns:38px minmax(0,1fr);align-items:start;gap:12px;border:1px solid color-mix(in srgb,var(--primary) 25%,var(--ui-context-edge,var(--border)));border-radius:12px;background:color-mix(in srgb,var(--primary) 6%,var(--ui-context-inset,var(--surface-2)));color:var(--primary)}
.shared-confirm-summary>.icon{width:38px;height:38px;padding:9px;border-radius:10px;background:color-mix(in srgb,currentColor 10%,transparent)}
.shared-confirm-summary p{min-width:0;margin:0;display:grid;gap:5px}.shared-confirm-summary strong{color:var(--text);font-size:var(--type-caption)}.shared-confirm-summary span{color:var(--muted);font-size:var(--type-caption);line-height:1.55}
.shared-confirm-summary[data-tone="warning"]{border-color:color-mix(in srgb,var(--warning) 34%,var(--ui-context-edge,var(--border)));background:color-mix(in srgb,var(--warning) 7%,var(--ui-context-inset,var(--surface-2)));color:var(--warning)}
.shared-confirm-summary[data-tone="danger"]{border-color:color-mix(in srgb,var(--danger) 34%,var(--ui-context-edge,var(--border)));background:color-mix(in srgb,var(--danger) 7%,var(--ui-context-inset,var(--surface-2)));color:var(--danger)}
.shared-confirm-summary[data-tone="success"]{border-color:color-mix(in srgb,var(--success) 34%,var(--ui-context-edge,var(--border)));background:color-mix(in srgb,var(--success) 7%,var(--ui-context-inset,var(--surface-2)));color:var(--success)}
.shared-confirm-modal [data-confirm-accept].warning{border-color:var(--warning)!important;background:var(--warning)!important;color:#111827!important;box-shadow:0 8px 22px color-mix(in srgb,var(--warning) 20%,transparent)!important}
.shared-confirm-modal [data-confirm-accept].warning:hover{border-color:color-mix(in srgb,var(--warning) 84%,#fff)!important;background:color-mix(in srgb,var(--warning) 84%,#fff)!important}
.shared-confirm-modal .form-actions{margin-top:0}
@media(max-width:520px){.shared-confirm-card{width:min(100%,calc(100vw - 24px))}.shared-confirm-body{gap:14px}.shared-confirm-modal .form-actions{grid-template-columns:1fr 1fr}}

/* Personal keyboard shortcuts: shared by Gestor, Studio and administration. */
#global-shortcuts{
  inset:50% auto auto 50%;
  transform:translate(-50%,-50%);
  width:min(520px,calc(100vw - 40px));
  max-height:calc(100dvh - 40px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  padding:20px;
  animation:none;
}
#global-shortcuts.is-configuring{width:min(640px,calc(100vw - 40px))}
#global-shortcuts .utility-panel-head{flex:none;grid-template-columns:38px minmax(0,1fr) 44px}
#global-shortcuts .utility-panel-head>.icon-button{width:44px;height:44px}
.shortcuts-body{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding-right:3px}
#global-shortcuts .shortcut-grid>a{grid-template-columns:24px minmax(0,1fr);gap:9px;padding:12px}
#global-shortcuts .shortcut-grid strong{font-size:var(--type-ui);line-height:var(--type-leading-compact)}
#global-shortcuts .shortcut-grid small{font:400 var(--type-caption)/var(--type-leading-body) var(--font);letter-spacing:0}
.shortcut-grid kbd{margin-top:5px;justify-self:start;max-width:100%;padding:4px 6px;border:1px solid var(--ui-edge);border-radius:6px;color:var(--text);background:var(--ui-control);font:600 var(--type-caption)/var(--type-leading-compact) var(--font);overflow-wrap:anywhere}
.shortcuts-keyboard-state,.shortcuts-empty,.shortcuts-help{color:var(--muted);font-size:var(--type-caption);line-height:var(--type-leading-body)}
.shortcuts-keyboard-state:empty{display:none}
.shortcuts-footer{flex:none;display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px;padding-top:14px;margin-top:12px;border-top:1px solid var(--ui-edge-soft)}
.shortcuts-feedback{flex:none;margin:12px 0 0;line-height:var(--type-leading-body);font-size:var(--type-label);color:var(--success)}
.shortcuts-feedback:empty{display:none}
.shortcuts-feedback[data-state=error]{color:var(--danger)}
.shortcuts-keyboard-toggle{display:flex;align-items:center;gap:9px;min-height:44px;font-size:var(--type-ui);cursor:pointer}
.shortcuts-keyboard-toggle input{accent-color:var(--ui-accent-strong);width:18px;height:18px}
.shortcuts-editor-list{display:grid;gap:10px;margin:16px 0;padding:0;list-style:none}
.shortcut-editor-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:10px;padding:12px;border:1px solid var(--ui-edge);border-radius:12px;background:var(--ui-surface)}
.shortcut-action-field{min-width:0;display:grid;gap:6px;color:var(--muted);font-size:var(--type-label)}
.shortcut-action-field select{width:100%;min-width:0;max-width:100%;padding-inline:8px;border:1px solid var(--ui-edge);border-radius:10px;background:var(--ui-form-surface);color:var(--text)}
.shortcut-order-controls{display:flex;gap:6px;flex-wrap:wrap}
#global-shortcuts .shortcut-order-controls .button{padding:8px;min-width:44px;font-size:var(--type-caption)}
.shortcut-key-field{grid-column:1/-1;display:flex;align-items:stretch;gap:8px;flex-wrap:wrap}
.shortcut-key-field>[data-shortcut-record]{flex:1;min-width:0;overflow-wrap:anywhere}
#global-shortcuts [data-recording]{outline:2px solid var(--ui-accent-content);outline-offset:2px;color:var(--ui-accent-content)}
#global-shortcuts :is([data-shortcuts-save],[data-shortcuts-cancel]){min-width:110px}
#global-shortcuts [hidden]{display:none!important}
@media(min-width:901px) and (max-height:560px){#global-shortcuts{max-height:calc(100dvh - 24px);padding:14px}}

/* Compact auxiliary actions: create related records, edit secondary values and
 * reveal optional form fields without competing with the primary submission. */
.ui-aux-action{
  width:max-content;
  max-width:100%;
  min-height:36px;
  padding:7px 10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  border:1px solid var(--ui-interactive-edge,var(--ui-edge));
  border-radius:9px;
  background:var(--ui-interactive-surface,var(--ui-surface-raised));
  box-shadow:var(--ui-interactive-shadow,none);
  color:var(--text);
  font:700 var(--type-caption)/var(--type-leading-compact) var(--font);
  text-align:center;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  transition:color var(--ui-fast) ease,border-color var(--ui-fast) ease,background-color var(--ui-fast) ease,box-shadow var(--ui-fast) ease,transform var(--ui-fast) var(--ui-ease);
}
.ui-aux-action>.icon:first-child{flex:none;color:var(--ui-accent-content)}
.ui-aux-action:hover,
.optional-field[open]>.ui-aux-action{
  border-color:color-mix(in srgb,var(--ui-accent) 48%,var(--ui-edge));
  background:var(--ui-interactive-surface-hover,var(--ui-accent-soft));
  color:var(--ui-accent-content);
  text-decoration:none;
}
.ui-aux-action:active{transform:scale(.98)}
.optional-field>.ui-aux-action{list-style:none}
.optional-field>.ui-aux-action::-webkit-details-marker{display:none}
.optional-field[open]>.ui-aux-action{margin-bottom:10px}
.ui-aux-action-chevron{display:inline-flex;align-items:center;transition:transform var(--ui-fast) var(--ui-ease)}
.optional-field[open]>.ui-aux-action .ui-aux-action-chevron{transform:rotate(180deg)}
@media(max-width:760px),(hover:none),(pointer:coarse){.ui-aux-action{min-height:44px;padding:10px 12px}}
@media(prefers-reduced-motion:reduce){.ui-aux-action,.ui-aux-action-chevron{transition:none!important}.ui-aux-action:active{transform:none}}

/* High-value list filters: one shared interaction model for operational tables. */
.record-filter-controls{
  min-width:0;
  display:flex;
  align-items:center;
  gap:10px;
  flex:1 1 auto;
}
.surface-toolbar .record-filter-controls.filter-bar{margin:0}
:is(.sales-summary-toolbar,.renewals-summary-toolbar)>.record-filter-controls.filter-bar{width:min(720px,100%);flex-basis:720px}
.record-filter-controls .search-field{
  width:min(520px,100%);
  min-width:180px;
  flex:1 1 360px;
}
.record-filter-control{
  width:190px;
  min-width:150px;
  flex:0 1 190px;
}
.record-filter-control .filter-control{
  width:100%;
  min-height:46px;
  padding:0 36px 0 13px;
  color:var(--text);
  border:1px solid var(--ui-edge);
  border-radius:var(--ui-radius-control);
  background:var(--ui-control);
  font:600 var(--type-ui)/var(--type-leading-compact) var(--font);
  cursor:pointer;
}
.record-filter-empty-state{
  min-height:140px;
  padding:24px;
  display:grid;
  place-content:center;
  gap:5px;
  color:var(--muted);
  text-align:center;
  white-space:normal;
}
.record-filter-empty-state strong{color:var(--text);font-size:var(--type-ui)}
.record-filter-empty-state span{font-size:var(--type-caption)}
.data-table tr[data-record-filter-empty] td{
  height:auto!important;
  padding:0!important;
  text-align:center!important;
}

@media(max-width:760px){
  .record-filter-controls{width:100%;align-items:stretch;flex-wrap:wrap}
  .record-filter-controls .search-field{width:100%;min-width:0;flex:1 1 100%}
  .record-filter-control{width:100%;min-width:0;flex:1 1 100%}
  .shell-body :is(.sales-summary-toolbar,.renewals-summary-toolbar){align-items:center}
  .shell-body :is(.sales-summary-toolbar,.renewals-summary-toolbar) .record-filter-controls{display:flex;align-items:center;flex-wrap:nowrap}
  .shell-body :is(.sales-summary-toolbar,.renewals-summary-toolbar) .record-filter-controls .search-field{flex:1 1 auto}
  .shell-body :is(.sales-summary-toolbar,.renewals-summary-toolbar) .record-filter-control{width:148px;min-width:118px;flex:0 1 148px}
  .shell-body :is(.sales-summary-toolbar,.renewals-summary-toolbar) .record-filter-control .filter-control{padding-inline:10px 28px;font-size:var(--type-caption)}
}

/* Dense mobile modal forms -------------------------------------------------
 * Only long workflows opt in. Compact, related values share a row while
 * narrative fields, expandable groups and confirmations keep the full width. */
@media (max-width: 760px) {
  .shell-body .modal-body.ui-dense-modal-form {
    row-gap: 10px;
  }

  .shell-body .modal-body .form-grid.ui-dense-modal-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 10px;
    row-gap: 12px;
    align-items: start;
  }

  .shell-body .modal-body .ui-dense-modal-grid > * {
    min-width: 0;
  }

  .shell-body .modal-body .ui-dense-modal-grid > :is(.full, .ui-mobile-span-all) {
    grid-column: 1 / -1 !important;
    width: 100%;
  }

  .shell-body .modal-body .ui-dense-modal-grid :is(input, select, textarea) {
    min-width: 0;
    max-width: 100%;
  }

  .shell-body .modal-body .ui-dense-modal-grid .field-label-row {
    min-width: 0;
    flex-wrap: wrap;
    column-gap: 8px;
    row-gap: 4px;
  }

  .shell-body .modal-body .ui-dense-modal-grid .field-label-row .ui-aux-action {
    max-width: 100%;
    margin-left: auto;
  }

  .shell-body .modal-body .ui-dense-modal-grid .transaction-wallet-summary {
    width: 100%;
    min-width: 0;
    height: auto;
  }

  .shell-body .modal-body .ui-dense-modal-grid .transaction-wallet-summary small {
    overflow-wrap: anywhere;
  }
}

/* Long selectors and credential controls need a little more inline room.
 * Financial and date pairs remain compact on standard phone widths. */
@media (max-width: 420px) {
  .shell-body .modal-body .form-grid.ui-dense-modal-grid--wide-fields {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 340px) {
  .shell-body .modal-body .form-grid.ui-dense-modal-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}
@media(max-width:520px){
  .shell-body :is(.sales-summary-toolbar,.renewals-summary-toolbar){display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;row-gap:8px}
  .shell-body :is(.sales-summary-toolbar,.renewals-summary-toolbar) .record-filter-controls{display:contents}
  .shell-body :is(.sales-summary-toolbar,.renewals-summary-toolbar) .record-filter-controls .search-field{grid-column:1;grid-row:1;width:100%}
  .shell-body :is(.sales-summary-toolbar,.renewals-summary-toolbar) .toolbar-meta{grid-column:2;grid-row:1}
  .shell-body :is(.sales-summary-toolbar,.renewals-summary-toolbar) .record-filter-control{grid-column:1/-1;grid-row:2;width:100%;max-width:none}
}
/* Global select menu -------------------------------------------------------
 * The real select remains in the form for submission and browser validity;
 * this layer owns the consistent popup, focus and keyboard presentation. */
.ui-select{
  position:relative;
  width:100%;
  min-width:0;
  max-width:100%;
  display:block;
  color:var(--text);
  font:inherit;
}
.ui-select[hidden]{display:none!important}
.ui-select-native{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  min-width:1px!important;
  min-height:1px!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  clip:rect(0 0 0 0)!important;
  clip-path:inset(50%)!important;
  border:0!important;
  opacity:0!important;
  pointer-events:none!important;
  white-space:nowrap!important;
}
.ui-select-trigger{
  width:100%;
  min-width:0;
  min-height:44px;
  padding:0 12px 0 13px;
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid var(--ui-form-edge,var(--ui-edge));
  border-radius:var(--ui-radius-control);
  background:var(--ui-form-surface,var(--ui-control));
  color:var(--text);
  box-shadow:var(--ui-form-shadow);
  line-height:var(--type-leading-compact,1.25);
  text-align:left;
  cursor:pointer;
  user-select:none;
  touch-action:manipulation;
  transition:border-color var(--ui-fast) ease,background-color var(--ui-fast) ease,box-shadow var(--ui-fast) ease;
}
.ui-select-value{
  min-width:0;
  flex:1;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.ui-select-caret{
  width:8px;
  height:8px;
  flex:none;
  margin:-4px 2px 0 0;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  color:color-mix(in srgb,var(--muted) 88%,var(--text));
  transform:rotate(45deg);
  transition:transform var(--ui-fast) var(--ui-ease),color var(--ui-fast) ease;
}
.ui-select.is-placeholder .ui-select-value{color:var(--muted)}
.ui-select:not(.is-disabled) .ui-select-trigger:hover{
  border-color:var(--ui-form-edge-hover,var(--ui-edge-strong));
  background:var(--ui-form-surface-hover,var(--ui-interactive-surface-hover,var(--ui-control)));
}
.ui-select-trigger:focus-visible,
.ui-select.is-open .ui-select-trigger{
  border-color:var(--ui-focus-edge,var(--ui-accent-content));
  outline:none;
  box-shadow:0 0 0 var(--ui-form-focus-width) var(--ui-form-focus-color),var(--ui-form-shadow);
}
.ui-select.is-open .ui-select-caret{
  margin-top:4px;
  color:var(--ui-accent-content);
  transform:rotate(225deg);
}
.ui-select.is-disabled{opacity:.48}
.ui-select.is-disabled .ui-select-trigger{cursor:not-allowed;box-shadow:none}
.ui-select.is-invalid .ui-select-trigger,
.field.is-invalid .ui-select-trigger{
  border-color:color-mix(in srgb,var(--danger) 66%,var(--ui-edge))!important;
  box-shadow:0 0 0 var(--ui-form-focus-width) color-mix(in srgb,var(--danger) 18%,transparent)!important;
}

/* Filters retain their more prominent query material and established sizes. */
:is(.inventory-filter-group,.studio-filter-options,.studio-admin-filter,.record-filter-control) .ui-select-trigger{
  border-color:var(--ui-interactive-edge,var(--ui-edge));
  background:var(--ui-interactive-surface,var(--ui-control));
  box-shadow:var(--ui-interactive-shadow,var(--ui-form-shadow));
}
:is(.inventory-filter-group,.studio-filter-options,.studio-admin-filter,.record-filter-control) .ui-select:not(.is-disabled) .ui-select-trigger:hover{
  border-color:var(--ui-interactive-edge-hover,var(--ui-edge-strong));
  background:var(--ui-interactive-surface-hover,var(--ui-control));
}
.field .ui-select-trigger{min-height:44px}
.record-filter-control .ui-select-trigger{min-height:46px;padding-inline:13px 12px;font-weight:600}
.studio-filter-options .ui-select,.studio-admin-filter .ui-select,.record-filter-control .ui-select,.shortcut-action-field .ui-select{width:100%}
.studio-filter-options .ui-select-trigger{min-height:42px;padding-left:11px;color:var(--muted)}
.studio-admin-filter .ui-select-trigger{min-height:44px;padding-left:11px}
.shortcut-action-field .ui-select-trigger{min-height:44px;padding-inline:10px}

/* Inventory labels float inside the control; the generated wrapper must remain
 * in normal flow instead of inheriting the direct-child label position. */
.inventory-filter-group label>.ui-select{
  position:relative;
  left:auto;
  top:auto;
  z-index:auto;
  width:150px;
  height:44px;
  color:inherit;
  font:inherit;
  letter-spacing:normal;
  pointer-events:auto;
}
.inventory-filter-group .ui-select-trigger{
  height:44px;
  padding:15px 10px 3px;
  font-size:var(--type-caption);
}
.inventory-filter-group .ui-select-caret{margin-left:2px;margin-right:1px}

.ui-select-popover{
  position:fixed;
  z-index:var(--ui-z-popover);
  width:max-content;
  min-width:var(--ui-select-trigger-width,180px);
  max-width:calc(100vw - 16px);
  max-height:min(320px,calc(100dvh - 16px));
  padding:6px;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  border:1px solid color-mix(in srgb,var(--ui-accent) 20%,var(--ui-edge));
  border-radius:12px;
  background:var(--ui-surface-raised,var(--surface));
  color:var(--text);
  box-shadow:var(--ui-shadow-float,var(--shadow));
  font:600 var(--type-ui)/var(--type-leading-compact) var(--font);
  transform-origin:top center;
  animation:ui-select-enter var(--ui-fast) var(--ui-ease);
}
.ui-select-popover[hidden]{display:none!important}
.ui-select-popover.is-above{transform-origin:bottom center}
.ui-select-option{
  position:relative;
  min-width:0;
  min-height:44px;
  padding:9px 9px 9px 11px;
  display:flex;
  align-items:center;
  gap:14px;
  border:1px solid transparent;
  border-radius:8px;
  color:var(--text);
  cursor:pointer;
  touch-action:manipulation;
  transition:color var(--ui-fast) ease,border-color var(--ui-fast) ease,background-color var(--ui-fast) ease;
}
.ui-select-option-label{
  min-width:0;
  flex:1;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.ui-select-option-check{
  width:18px;
  height:18px;
  flex:none;
  display:grid;
  place-items:center;
  border:1px solid transparent;
  border-radius:6px;
  color:var(--ui-accent-content);
  opacity:0;
}
.ui-select-option-check::before{
  content:"";
  width:7px;
  height:4px;
  margin-top:-2px;
  border-left:1.7px solid currentColor;
  border-bottom:1.7px solid currentColor;
  transform:rotate(-45deg);
}
.ui-select-option:is(:hover,.is-active){
  border-color:color-mix(in srgb,var(--ui-accent) 15%,transparent);
  background:color-mix(in srgb,var(--ui-accent) 8%,var(--ui-surface-raised));
}
.ui-select-option.is-active{outline:1px solid color-mix(in srgb,var(--ui-accent-content) 32%,transparent);outline-offset:-1px}
.ui-select-option[aria-selected=true]{
  border-color:color-mix(in srgb,var(--ui-accent) 30%,var(--ui-edge));
  background:color-mix(in srgb,var(--ui-accent) 13%,var(--ui-surface-raised));
  color:var(--ui-accent-content);
}
.ui-select-option[aria-selected=true] .ui-select-option-check{
  border-color:color-mix(in srgb,var(--ui-accent) 36%,var(--ui-edge));
  background:color-mix(in srgb,var(--ui-accent) 10%,transparent);
  opacity:1;
}
.ui-select-option[aria-disabled=true]{color:var(--muted);cursor:not-allowed;opacity:.46}
.ui-select-option[aria-disabled=true]:is(:hover,.is-active){border-color:transparent;background:transparent;outline:0}
.ui-select-group{
  padding:9px 11px 5px;
  color:var(--muted);
  font:700 var(--type-caption)/1 var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase;
}
.ui-select-empty{padding:13px 11px;color:var(--muted);font-size:var(--type-caption)}
@keyframes ui-select-enter{from{opacity:0;transform:translateY(-4px) scale(.99)}to{opacity:1;transform:translateY(0) scale(1)}}

@media(max-width:1280px){.inventory-filter-group label>.ui-select{width:140px}}
@media(max-width:760px){
  .inventory-filter-group label>.ui-select{width:100%}
  .ui-select-option{min-height:46px;padding-block:10px}
  .ui-select-popover{padding:5px;border-radius:11px}
}
@media(max-width:390px){.studio-filter-options .ui-select-trigger{min-height:44px;padding-inline:8px;font-size:var(--type-caption)}}
@media(prefers-reduced-motion:reduce){
  .ui-select-trigger,.ui-select-caret,.ui-select-option{transition:none!important}
  .ui-select-popover{animation:none!important}
}
@media(forced-colors:active){
  .ui-select-trigger,.ui-select-popover,.ui-select-option[aria-selected=true]{border:1px solid CanvasText}
  .ui-select-option.is-active{outline:2px solid Highlight}
  .ui-select-option[aria-selected=true] .ui-select-option-check{forced-color-adjust:auto}
}

/* ==========================================================================
   GLOBAL BACK NAVIGATION & BREADCRUMBS
   High-contrast, interactive pill buttons with micro-animations
   ========================================================================== */
.detail-breadcrumb,
.inventory-breadcrumb,
.studio-detail-breadcrumb,
.app-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

/* The interactive back button */
.detail-breadcrumb a,
.inventory-breadcrumb a,
.studio-detail-breadcrumb a,
.app-breadcrumb a,
.back-link,
.breadcrumb-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 4px 13px 4px 9px;
  border-radius: 999px;
  background: var(--ui-context-raised, color-mix(in srgb, var(--surface-2, #101a2c) 82%, var(--primary, #008cff) 18%));
  border: 1px solid color-mix(in srgb, var(--cyan, #38bdf8) 28%, var(--border, rgba(110, 125, 151, .24)));
  color: var(--text, #ffffff) !important;
  font-size: var(--type-caption);
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  transition: border-color .2s ease, background-color .2s ease, transform .2s ease, box-shadow .2s ease, color .2s ease;
  position: relative;
  cursor: pointer;
  user-select: none;
}

/* Icon inside the back button */
.detail-breadcrumb a svg,
.detail-breadcrumb a .icon,
.inventory-breadcrumb a svg,
.inventory-breadcrumb a .icon,
.studio-detail-breadcrumb a svg,
.studio-detail-breadcrumb a .icon,
.app-breadcrumb a svg,
.app-breadcrumb a .icon,
.back-link svg,
.back-link .icon,
.breadcrumb-back svg,
.breadcrumb-back .icon {
  flex: none;
  width: 14px;
  height: 14px;
  color: var(--cyan, #38bdf8);
  transition: transform .2s ease, color .2s ease;
}

/* Hover and focus states */
.detail-breadcrumb a:hover,
.detail-breadcrumb a:focus-visible,
.inventory-breadcrumb a:hover,
.inventory-breadcrumb a:focus-visible,
.studio-detail-breadcrumb a:hover,
.studio-detail-breadcrumb a:focus-visible,
.app-breadcrumb a:hover,
.app-breadcrumb a:focus-visible,
.back-link:hover,
.back-link:focus-visible,
.breadcrumb-back:hover,
.breadcrumb-back:focus-visible {
  border-color: color-mix(in srgb, var(--cyan, #38bdf8) 75%, var(--border));
  background: color-mix(in srgb, var(--surface-2, #101a2c) 70%, var(--cyan, #38bdf8) 30%);
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--cyan, #38bdf8) 26%, transparent);
}

.detail-breadcrumb a:hover svg,
.detail-breadcrumb a:hover .icon,
.inventory-breadcrumb a:hover svg,
.inventory-breadcrumb a:hover .icon,
.studio-detail-breadcrumb a:hover svg,
.studio-detail-breadcrumb a:hover .icon,
.app-breadcrumb a:hover svg,
.app-breadcrumb a:hover .icon,
.back-link:hover svg,
.back-link:hover .icon,
.breadcrumb-back:hover svg,
.breadcrumb-back:hover .icon {
  transform: translateX(-3px);
  color: #ffffff;
}

.detail-breadcrumb a:active,
.inventory-breadcrumb a:active,
.studio-detail-breadcrumb a:active,
.app-breadcrumb a:active,
.back-link:active,
.breadcrumb-back:active {
  transform: scale(0.97) translateY(0);
}

/* Separator styling */
.detail-breadcrumb > svg,
.detail-breadcrumb > .icon,
.inventory-breadcrumb > svg,
.inventory-breadcrumb > .icon,
.studio-detail-breadcrumb > span:not([class]),
.breadcrumb-separator {
  color: var(--muted);
  opacity: 0.45;
  margin: 0 1px;
}

/* Current destination item */
.detail-breadcrumb > span:last-child,
.inventory-breadcrumb > span:last-child,
.studio-detail-breadcrumb > span:last-child,
.breadcrumb-current {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 2px 10px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--text) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
  color: var(--muted);
  font-size: var(--type-caption);
  font-weight: 500;
  line-height: 1.4;
}

@media(prefers-reduced-motion:reduce){
  .detail-breadcrumb a,
  .inventory-breadcrumb a,
  .studio-detail-breadcrumb a,
  .app-breadcrumb a,
  .back-link,
  .breadcrumb-back {
    transition: none !important;
    transform: none !important;
  }
  .detail-breadcrumb a:hover svg,
  .inventory-breadcrumb a:hover svg,
  .studio-detail-breadcrumb a:hover svg,
  .app-breadcrumb a:hover svg,
  .back-link:hover svg,
  .breadcrumb-back:hover svg {
    transform: none !important;
  }
}