/* Base design system carried over from the Metro admin (Medusa-style tokens, layout and components). */
:root{
  --alpha-250:rgba(24, 24, 27, 0.1);
  --alpha-400:rgba(24, 24, 27, 0.24);
  --bg-base:rgba(255, 255, 255, 1);
  --bg-base-hover:rgba(244, 244, 245, 1);
  --bg-base-pressed:rgba(228, 228, 231, 1);
  --bg-component:rgba(250, 250, 250, 1);
  --bg-component-hover:rgba(244, 244, 245, 1);
  --bg-component-pressed:rgba(228, 228, 231, 1);
  --bg-disabled:rgba(244, 244, 245, 1);
  --bg-field:rgba(250, 250, 250, 1);
  --bg-field-component:rgba(255, 255, 255, 1);
  --bg-field-component-hover:rgba(250, 250, 250, 1);
  --bg-field-hover:rgba(244, 244, 245, 1);
  --bg-highlight:rgba(239, 246, 255, 1);
  --bg-highlight-hover:rgba(219, 234, 254, 1);
  --bg-interactive:rgba(59, 130, 246, 1);
  --bg-overlay:rgba(24, 24, 27, 0.4);
  --bg-subtle:rgba(250, 250, 250, 1);
  --bg-subtle-hover:rgba(244, 244, 245, 1);
  --bg-subtle-pressed:rgba(228, 228, 231, 1);
  --bg-switch-off:rgba(228, 228, 231, 1);
  --bg-switch-off-hover:rgba(212, 212, 216, 1);
  --border-base:rgba(228, 228, 231, 1);
  --border-danger:rgba(190, 18, 60, 1);
  --border-error:rgba(225, 29, 72, 1);
  --border-interactive:rgba(59, 130, 246, 1);
  --border-menu-bot:rgba(255, 255, 255, 1);
  --border-menu-top:rgba(228, 228, 231, 1);
  --border-strong:rgba(212, 212, 216, 1);
  --border-transparent:rgba(255, 255, 255, 0);
  --borders-base:0px 1px 2px 0px rgba(0, 0, 0, 0.12), 0px 0px 0px 1px rgba(0, 0, 0, 0.08);
  --borders-error:0px 0px 0px 1px rgba(225, 29, 72, 1), 0px 0px 0px 3px rgba(225, 29, 72, 0.15);
  --borders-focus:0px 0px 0px 1px rgba(255, 255, 255, 1), 0px 0px 0px 3px rgba(59, 130, 246, 0.6);
  --borders-interactive-with-active:0px 0px 0px 4px rgba(37, 99, 235, 0.2), 0px 0px 0px 1px rgba(37, 99, 235, 1);
  --borders-interactive-with-focus:0px 1px 2px 0px rgba(30, 58, 138, 0.5), 0px 0px 0px 1px rgba(37, 99, 235, 1), 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px rgba(37, 99, 235, 0.6);
  --borders-interactive-with-shadow:0px 1px 2px 0px rgba(30, 58, 138, 0.5), 0px 0px 0px 1px rgba(37, 99, 235, 1);
  --button-danger:rgba(225, 29, 72, 1);
  --button-danger-hover:rgba(190, 18, 60, 1);
  --button-danger-pressed:rgba(159, 18, 57, 1);
  --button-inverted:rgba(39, 39, 42, 1);
  --button-inverted-hover:rgba(63, 63, 70, 1);
  --button-inverted-pressed:rgba(82, 82, 91, 1);
  --button-neutral:rgba(255, 255, 255, 1);
  --button-neutral-hover:rgba(244, 244, 245, 1);
  --button-neutral-pressed:rgba(228, 228, 231, 1);
  --button-transparent:rgba(255, 255, 255, 0);
  --button-transparent-hover:rgba(244, 244, 245, 1);
  --button-transparent-pressed:rgba(228, 228, 231, 1);
  --buttons-danger:0px 0.75px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px 1px 2px 0px rgba(190, 18, 60, 0.4), 0px 0px 0px 1px rgba(190, 18, 60, 1);
  --buttons-danger-focus:0px 0.75px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px 1px 2px 0px rgba(190, 18, 60, 0.4), 0px 0px 0px 1px rgba(190, 18, 60, 1), 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px rgba(59, 130, 246, 0.6);
  --buttons-inverted:0px 0.75px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px 1px 2px 0px rgba(0, 0, 0, 0.4), 0px 0px 0px 1px rgba(24, 24, 27, 1);
  --buttons-inverted-focus:0px 0.75px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px 1px 2px 0px rgba(0, 0, 0, 0.4), 0px 0px 0px 1px rgba(24, 24, 27, 1), 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px rgba(59, 130, 246, 0.6);
  --buttons-neutral:0px 1px 2px 0px rgba(0, 0, 0, 0.12), 0px 0px 0px 1px rgba(0, 0, 0, 0.08);
  --buttons-neutral-focus:0px 1px 2px 0px rgba(0, 0, 0, 0.12), 0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px rgba(59, 130, 246, 0.6);
  --contrast-bg-base:rgba(24, 24, 27, 1);
  --contrast-bg-base-hover:rgba(39, 39, 42, 1);
  --contrast-bg-base-pressed:rgba(63, 63, 70, 1);
  --contrast-bg-subtle:rgba(39, 39, 42, 1);
  --contrast-border-base:rgba(255, 255, 255, 0.15);
  --contrast-border-bot:rgba(255, 255, 255, 0.1);
  --contrast-border-top:rgba(24, 24, 27, 1);
  --contrast-fg-primary:rgba(255, 255, 255, 0.88);
  --contrast-fg-secondary:rgba(255, 255, 255, 0.56);
  --details-contrast-on-bg-interactive:0px 1px 2px 0px rgba(30, 58, 138, 0.6);
  --details-switch-background:0px 1px 1px 0px rgba(0, 0, 0, 0.04) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.04) inset, 0px 0px 0px 0.75px rgba(0, 0, 0, 0.06) inset, 0px 0px 8px 0px rgba(0, 0, 0, 0.02) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.04);
  --details-switch-background-focus:0px 0px 0px 1px rgba(255, 255, 255, 1), 0px 0px 0px 3px rgba(59, 130, 246, 0.6), 0px 1px 1px 0px rgba(0, 0, 0, 0.04) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.04) inset, 0px 0px 0px 0.75px rgba(0, 0, 0, 0.06) inset, 0px 0px 8px 0px rgba(0, 0, 0, 0.02) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.04);
  --details-switch-handle:0px 0px 2px 1px rgba(255, 255, 255, 1) inset, 0px 1px 0px 0px rgba(255, 255, 255, 1) inset, 0px 0px 0px 0.5px rgba(0, 0, 0, 0.02), 0px 5px 4px 0px rgba(0, 0, 0, 0.02), 0px 3px 3px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.12), 0px 0px 1px 0px rgba(0, 0, 0, 0.08);
  --elevation-card-hover:0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 1px 2px -1px rgba(0, 0, 0, 0.08), 0px 2px 8px 0px rgba(0, 0, 0, 0.1);
  --elevation-card-rest:0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 1px 2px -1px rgba(0, 0, 0, 0.08), 0px 2px 4px 0px rgba(0, 0, 0, 0.04);
  --elevation-code-block:0px 0px 0px 1px rgba(24, 24, 27, 1) inset, 0px 0px 0px 1.5px rgba(255, 255, 255, 0.2) inset;
  --elevation-commandbar:0px 0px 0px 0.75px rgba(39, 39, 42, 1) inset, 0px 0px 0px 1.25px rgba(255, 255, 255, 0.3) inset, 0px 8px 16px 0px rgba(0, 0, 0, 0.08), 0px 16px 32px 0px rgba(0, 0, 0, 0.08);
  --elevation-flyout:0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 4px 8px 0px rgba(0, 0, 0, 0.08), 0px 8px 16px 0px rgba(0, 0, 0, 0.08);
  --elevation-modal:0px 0px 0px 1px rgba(255, 255, 255, 1) inset, 0px 0px 0px 1.5px rgba(228, 228, 231, 0.6) inset, 0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 8px 16px 0px rgba(0, 0, 0, 0.08), 0px 16px 32px 0px rgba(0, 0, 0, 0.08);
  --elevation-tooltip:0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 2px 4px 0px rgba(0, 0, 0, 0.08), 0px 4px 8px 0px rgba(0, 0, 0, 0.08);
  --fg-base:rgba(24, 24, 27, 1);
  --fg-disabled:rgba(161, 161, 170, 1);
  --fg-error:rgba(225, 29, 72, 1);
  --fg-interactive:rgba(59, 130, 246, 1);
  --fg-interactive-hover:rgba(37, 99, 235, 1);
  --fg-muted:rgba(113, 113, 122, 1);
  --fg-on-color:rgba(255, 255, 255, 1);
  --fg-on-inverted:rgba(255, 255, 255, 1);
  --fg-subtle:rgba(82, 82, 91, 1);
  --tag-blue-bg:rgba(219, 234, 254, 1);
  --tag-blue-bg-hover:rgba(191, 219, 254, 1);
  --tag-blue-border:rgba(191, 219, 254, 1);
  --tag-blue-icon:rgba(96, 165, 250, 1);
  --tag-blue-text:rgba(30, 64, 175, 1);
  --tag-green-bg:rgba(209, 250, 229, 1);
  --tag-green-bg-hover:rgba(167, 243, 208, 1);
  --tag-green-border:rgba(167, 243, 208, 1);
  --tag-green-icon:rgba(16, 185, 129, 1);
  --tag-green-text:rgba(6, 95, 70, 1);
  --tag-neutral-bg:rgba(244, 244, 245, 1);
  --tag-neutral-bg-hover:rgba(228, 228, 231, 1);
  --tag-neutral-border:rgba(228, 228, 231, 1);
  --tag-neutral-icon:rgba(161, 161, 170, 1);
  --tag-neutral-text:rgba(82, 82, 91, 1);
  --tag-orange-bg:rgba(255, 237, 213, 1);
  --tag-orange-bg-hover:rgba(254, 215, 170, 1);
  --tag-orange-border:rgba(254, 215, 170, 1);
  --tag-orange-icon:rgba(249, 115, 22, 1);
  --tag-orange-text:rgba(154, 52, 18, 1);
  --tag-purple-bg:rgba(237, 233, 254, 1);
  --tag-purple-bg-hover:rgba(221, 214, 254, 1);
  --tag-purple-border:rgba(221, 214, 254, 1);
  --tag-purple-icon:rgba(167, 139, 250, 1);
  --tag-purple-text:rgba(91, 33, 182, 1);
  --tag-red-bg:rgba(255, 228, 230, 1);
  --tag-red-bg-hover:rgba(254, 205, 211, 1);
  --tag-red-border:rgba(254, 205, 211, 1);
  --tag-red-icon:rgba(244, 63, 94, 1);
  --tag-red-text:rgba(159, 18, 57, 1);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --alpha-250:rgba(255, 255, 255, 0.1);
  --alpha-400:rgba(255, 255, 255, 0.24);
  --bg-base:rgba(33, 33, 36, 1);
  --bg-base-hover:rgba(39, 39, 42, 1);
  --bg-base-pressed:rgba(63, 63, 70, 1);
  --bg-component:rgba(39, 39, 42, 1);
  --bg-component-hover:rgba(255, 255, 255, 0.1);
  --bg-component-pressed:rgba(255, 255, 255, 0.16);
  --bg-disabled:rgba(39, 39, 42, 1);
  --bg-field:rgba(255, 255, 255, 0.04);
  --bg-field-component:rgba(33, 33, 36, 1);
  --bg-field-component-hover:rgba(39, 39, 42, 1);
  --bg-field-hover:rgba(255, 255, 255, 0.08);
  --bg-highlight:rgba(23, 37, 84, 1);
  --bg-highlight-hover:rgba(30, 58, 138, 1);
  --bg-interactive:rgba(96, 165, 250, 1);
  --bg-overlay:rgba(24, 24, 27, 0.72);
  --bg-subtle:rgba(24, 24, 27, 1);
  --bg-subtle-hover:rgba(33, 33, 36, 1);
  --bg-subtle-pressed:rgba(39, 39, 42, 1);
  --bg-switch-off:rgba(63, 63, 70, 1);
  --bg-switch-off-hover:rgba(82, 82, 91, 1);
  --border-base:rgba(255, 255, 255, 0.08);
  --border-danger:rgba(190, 18, 60, 1);
  --border-error:rgba(251, 113, 133, 1);
  --border-interactive:rgba(96, 165, 250, 1);
  --border-menu-bot:rgba(255, 255, 255, 0.08);
  --border-menu-top:rgba(33, 33, 36, 1);
  --border-strong:rgba(255, 255, 255, 0.16);
  --border-transparent:rgba(255, 255, 255, 0);
  --borders-base:0px -1px 0px 0px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(39, 39, 42, 1), 0px 0px 1px 1.5px rgba(0, 0, 0, 0.24), 0px 2px 2px 0px rgba(0, 0, 0, 0.24);
  --borders-error:0px 0px 0px 1px rgba(244, 63, 94, 1), 0px 0px 0px 3px rgba(225, 29, 72, 0.25);
  --borders-focus:0px 0px 0px 1px rgba(24, 24, 27, 1), 0px 0px 0px 3px rgba(96, 165, 250, 0.8);
  --borders-interactive-with-active:0px 0px 0px 1px rgba(96, 165, 250, 1), 0px 0px 0px 4px rgba(59, 130, 246, 0.25);
  --borders-interactive-with-focus:0px -1px 2px 0px rgba(219, 234, 254, 0.5), 0px 0px 0px 1px rgba(96, 165, 250, 1), 0px 0px 0px 2px rgba(24, 24, 27, 1), 0px 0px 0px 4px rgba(96, 165, 250, 0.8);
  --borders-interactive-with-shadow:0px -1px 2px 0px rgba(219, 234, 254, 0.5), 0px 0px 0px 1px rgba(96, 165, 250, 1);
  --button-danger:rgba(159, 18, 57, 1);
  --button-danger-hover:rgba(190, 18, 60, 1);
  --button-danger-pressed:rgba(225, 29, 72, 1);
  --button-inverted:rgba(82, 82, 91, 1);
  --button-inverted-hover:rgba(113, 113, 122, 1);
  --button-inverted-pressed:rgba(161, 161, 170, 1);
  --button-neutral:rgba(255, 255, 255, 0.04);
  --button-neutral-hover:rgba(255, 255, 255, 0.08);
  --button-neutral-pressed:rgba(255, 255, 255, 0.12);
  --button-transparent:rgba(255, 255, 255, 0);
  --button-transparent-hover:rgba(255, 255, 255, 0.08);
  --button-transparent-pressed:rgba(255, 255, 255, 0.12);
  --buttons-danger:0px -1px 0px 0px rgba(255, 255, 255, 0.16), 0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 0px 0px 1px rgba(159, 18, 57, 1), 0px 0px 1px 1.5px rgba(0, 0, 0, 0.24), 0px 2px 2px 0px rgba(0, 0, 0, 0.24);
  --buttons-danger-focus:0px -1px 0px 0px rgba(255, 255, 255, 0.16), 0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 0px 0px 1px rgba(159, 18, 57, 1), 0px 0px 0px 2px rgba(24, 24, 27, 1), 0px 0px 0px 4px rgba(96, 165, 250, 0.8);
  --buttons-inverted:0px -1px 0px 0px rgba(255, 255, 255, 0.12), 0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 0px 0px 1px rgba(82, 82, 91, 1), 0px 0px 1px 1.5px rgba(0, 0, 0, 0.24), 0px 2px 2px 0px rgba(0, 0, 0, 0.24);
  --buttons-inverted-focus:0px -1px 0px 0px rgba(255, 255, 255, 0.12), 0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 0px 0px 1px rgba(82, 82, 91, 1), 0px 0px 0px 2px rgba(24, 24, 27, 1), 0px 0px 0px 4px rgba(96, 165, 250, 0.8);
  --buttons-neutral:0px -1px 0px 0px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(39, 39, 42, 1), 0px 0px 1px 1.5px rgba(0, 0, 0, 0.24), 0px 2px 2px 0px rgba(0, 0, 0, 0.24);
  --buttons-neutral-focus:0px -1px 0px 0px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(39, 39, 42, 1), 0px 0px 0px 2px rgba(24, 24, 27, 1), 0px 0px 0px 4px rgba(96, 165, 250, 0.8);
  --contrast-bg-base:rgba(39, 39, 42, 1);
  --contrast-bg-base-hover:rgba(63, 63, 70, 1);
  --contrast-bg-base-pressed:rgba(82, 82, 91, 1);
  --contrast-bg-subtle:rgba(255, 255, 255, 0.04);
  --contrast-border-base:rgba(255, 255, 255, 0.16);
  --contrast-border-bot:rgba(255, 255, 255, 0.08);
  --contrast-border-top:rgba(33, 33, 36, 1);
  --contrast-fg-primary:rgba(255, 255, 255, 0.88);
  --contrast-fg-secondary:rgba(255, 255, 255, 0.56);
  --details-contrast-on-bg-interactive:0px 1px 2px 0px rgba(30, 58, 138, 0.6);
  --details-switch-background:0px 1px 1px 0px rgba(0, 0, 0, 0.1) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.1) inset, 0px 0px 0px 0.75px rgba(255, 255, 255, 0.12) inset, 0px 0px 8px 0px rgba(0, 0, 0, 0.1) inset;
  --details-switch-background-focus:0px 0px 0px 1px rgba(24, 24, 27, 1), 0px 0px 0px 3px rgba(96, 165, 250, 0.8), 0px 1px 1px 0px rgba(0, 0, 0, 0.1) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.1) inset, 0px 0px 0px 0.75px rgba(255, 255, 255, 0.12) inset, 0px 0px 8px 0px rgba(0, 0, 0, 0.1) inset;
  --details-switch-handle:0px 0px 2px 1px rgba(255, 255, 255, 1) inset, 0px 1px 0px 0px rgba(255, 255, 255, 1) inset, 0px 0px 0px 0.5px rgba(0, 0, 0, 0.16), 0px 5px 4px 0px rgba(0, 0, 0, 0.1), 0px 3px 3px 0px rgba(0, 0, 0, 0.1), 0px 1px 2px 0px rgba(0, 0, 0, 0.1), 0px 0px 1px 0px rgba(0, 0, 0, 0.1);
  --elevation-card-hover:0px -1px 0px 0px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(39, 39, 42, 1), 0px 1px 4px 0px rgba(0, 0, 0, 0.48), 0px 2px 8px 0px rgba(0, 0, 0, 0.48);
  --elevation-card-rest:0px -1px 0px 0px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(39, 39, 42, 1), 0px 1px 2px 0px rgba(0, 0, 0, 0.32), 0px 2px 4px 0px rgba(0, 0, 0, 0.32);
  --elevation-code-block:0px -1px 0px 0px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(39, 39, 42, 1), 0px 1px 2px 0px rgba(0, 0, 0, 0.32), 0px 2px 4px 0px rgba(0, 0, 0, 0.32);
  --elevation-commandbar:0px 0px 0px 0.75px rgba(24, 24, 27, 1) inset, 0px 0px 0px 1.25px rgba(255, 255, 255, 0.1) inset, 0px 4px 8px 0px rgba(0, 0, 0, 0.32), 0px 8px 16px 0px rgba(0, 0, 0, 0.32);
  --elevation-flyout:0px -1px 0px 0px rgba(255, 255, 255, 0.04), 0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 4px 8px 0px rgba(0, 0, 0, 0.32), 0px 8px 16px 0px rgba(0, 0, 0, 0.32);
  --elevation-modal:0px 0px 0px 1px rgba(24, 24, 27, 1) inset, 0px 0px 0px 1.5px rgba(255, 255, 255, 0.06) inset, 0px -1px 0px 0px rgba(255, 255, 255, 0.04), 0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 4px 8px 0px rgba(0, 0, 0, 0.32), 0px 8px 16px 0px rgba(0, 0, 0, 0.32);
  --elevation-tooltip:0px -1px 0px 0px rgba(255, 255, 255, 0.04), 0px 2px 4px 0px rgba(0, 0, 0, 0.32), 0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 4px 8px 0px rgba(0, 0, 0, 0.32);
  --fg-base:rgba(244, 244, 245, 1);
  --fg-disabled:rgba(82, 82, 91, 1);
  --fg-error:rgba(251, 113, 133, 1);
  --fg-interactive:rgba(96, 165, 250, 1);
  --fg-interactive-hover:rgba(147, 197, 253, 1);
  --fg-muted:rgba(113, 113, 122, 1);
  --fg-on-color:rgba(255, 255, 255, 1);
  --fg-on-inverted:rgba(24, 24, 27, 1);
  --fg-subtle:rgba(161, 161, 170, 1);
  --tag-blue-bg:rgba(23, 37, 84, 1);
  --tag-blue-bg-hover:rgba(30, 58, 138, 1);
  --tag-blue-border:rgba(30, 58, 138, 1);
  --tag-blue-icon:rgba(96, 165, 250, 1);
  --tag-blue-text:rgba(147, 197, 253, 1);
  --tag-green-bg:rgba(2, 44, 34, 1);
  --tag-green-bg-hover:rgba(6, 78, 59, 1);
  --tag-green-border:rgba(6, 78, 59, 1);
  --tag-green-icon:rgba(16, 185, 129, 1);
  --tag-green-text:rgba(52, 211, 153, 1);
  --tag-neutral-bg:rgba(255, 255, 255, 0.08);
  --tag-neutral-bg-hover:rgba(255, 255, 255, 0.12);
  --tag-neutral-border:rgba(255, 255, 255, 0.06);
  --tag-neutral-icon:rgba(113, 113, 122, 1);
  --tag-neutral-text:rgba(212, 212, 216, 1);
  --tag-orange-bg:rgba(67, 20, 7, 1);
  --tag-orange-bg-hover:rgba(124, 45, 18, 1);
  --tag-orange-border:rgba(124, 45, 18, 1);
  --tag-orange-icon:rgba(251, 146, 60, 1);
  --tag-orange-text:rgba(253, 186, 116, 1);
  --tag-purple-bg:rgba(46, 16, 101, 1);
  --tag-purple-bg-hover:rgba(91, 33, 182, 1);
  --tag-purple-border:rgba(91, 33, 182, 1);
  --tag-purple-icon:rgba(167, 139, 250, 1);
  --tag-purple-text:rgba(196, 181, 253, 1);
  --tag-red-bg:rgba(76, 5, 25, 1);
  --tag-red-bg-hover:rgba(136, 19, 55, 1);
  --tag-red-border:rgba(136, 19, 55, 1);
  --tag-red-icon:rgba(251, 113, 133, 1);
  --tag-red-text:rgba(253, 164, 175, 1);
  color-scheme:dark}}
:root[data-theme="dark"]{
  --alpha-250:rgba(255, 255, 255, 0.1);
  --alpha-400:rgba(255, 255, 255, 0.24);
  --bg-base:rgba(33, 33, 36, 1);
  --bg-base-hover:rgba(39, 39, 42, 1);
  --bg-base-pressed:rgba(63, 63, 70, 1);
  --bg-component:rgba(39, 39, 42, 1);
  --bg-component-hover:rgba(255, 255, 255, 0.1);
  --bg-component-pressed:rgba(255, 255, 255, 0.16);
  --bg-disabled:rgba(39, 39, 42, 1);
  --bg-field:rgba(255, 255, 255, 0.04);
  --bg-field-component:rgba(33, 33, 36, 1);
  --bg-field-component-hover:rgba(39, 39, 42, 1);
  --bg-field-hover:rgba(255, 255, 255, 0.08);
  --bg-highlight:rgba(23, 37, 84, 1);
  --bg-highlight-hover:rgba(30, 58, 138, 1);
  --bg-interactive:rgba(96, 165, 250, 1);
  --bg-overlay:rgba(24, 24, 27, 0.72);
  --bg-subtle:rgba(24, 24, 27, 1);
  --bg-subtle-hover:rgba(33, 33, 36, 1);
  --bg-subtle-pressed:rgba(39, 39, 42, 1);
  --bg-switch-off:rgba(63, 63, 70, 1);
  --bg-switch-off-hover:rgba(82, 82, 91, 1);
  --border-base:rgba(255, 255, 255, 0.08);
  --border-danger:rgba(190, 18, 60, 1);
  --border-error:rgba(251, 113, 133, 1);
  --border-interactive:rgba(96, 165, 250, 1);
  --border-menu-bot:rgba(255, 255, 255, 0.08);
  --border-menu-top:rgba(33, 33, 36, 1);
  --border-strong:rgba(255, 255, 255, 0.16);
  --border-transparent:rgba(255, 255, 255, 0);
  --borders-base:0px -1px 0px 0px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(39, 39, 42, 1), 0px 0px 1px 1.5px rgba(0, 0, 0, 0.24), 0px 2px 2px 0px rgba(0, 0, 0, 0.24);
  --borders-error:0px 0px 0px 1px rgba(244, 63, 94, 1), 0px 0px 0px 3px rgba(225, 29, 72, 0.25);
  --borders-focus:0px 0px 0px 1px rgba(24, 24, 27, 1), 0px 0px 0px 3px rgba(96, 165, 250, 0.8);
  --borders-interactive-with-active:0px 0px 0px 1px rgba(96, 165, 250, 1), 0px 0px 0px 4px rgba(59, 130, 246, 0.25);
  --borders-interactive-with-focus:0px -1px 2px 0px rgba(219, 234, 254, 0.5), 0px 0px 0px 1px rgba(96, 165, 250, 1), 0px 0px 0px 2px rgba(24, 24, 27, 1), 0px 0px 0px 4px rgba(96, 165, 250, 0.8);
  --borders-interactive-with-shadow:0px -1px 2px 0px rgba(219, 234, 254, 0.5), 0px 0px 0px 1px rgba(96, 165, 250, 1);
  --button-danger:rgba(159, 18, 57, 1);
  --button-danger-hover:rgba(190, 18, 60, 1);
  --button-danger-pressed:rgba(225, 29, 72, 1);
  --button-inverted:rgba(82, 82, 91, 1);
  --button-inverted-hover:rgba(113, 113, 122, 1);
  --button-inverted-pressed:rgba(161, 161, 170, 1);
  --button-neutral:rgba(255, 255, 255, 0.04);
  --button-neutral-hover:rgba(255, 255, 255, 0.08);
  --button-neutral-pressed:rgba(255, 255, 255, 0.12);
  --button-transparent:rgba(255, 255, 255, 0);
  --button-transparent-hover:rgba(255, 255, 255, 0.08);
  --button-transparent-pressed:rgba(255, 255, 255, 0.12);
  --buttons-danger:0px -1px 0px 0px rgba(255, 255, 255, 0.16), 0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 0px 0px 1px rgba(159, 18, 57, 1), 0px 0px 1px 1.5px rgba(0, 0, 0, 0.24), 0px 2px 2px 0px rgba(0, 0, 0, 0.24);
  --buttons-danger-focus:0px -1px 0px 0px rgba(255, 255, 255, 0.16), 0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 0px 0px 1px rgba(159, 18, 57, 1), 0px 0px 0px 2px rgba(24, 24, 27, 1), 0px 0px 0px 4px rgba(96, 165, 250, 0.8);
  --buttons-inverted:0px -1px 0px 0px rgba(255, 255, 255, 0.12), 0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 0px 0px 1px rgba(82, 82, 91, 1), 0px 0px 1px 1.5px rgba(0, 0, 0, 0.24), 0px 2px 2px 0px rgba(0, 0, 0, 0.24);
  --buttons-inverted-focus:0px -1px 0px 0px rgba(255, 255, 255, 0.12), 0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 0px 0px 1px rgba(82, 82, 91, 1), 0px 0px 0px 2px rgba(24, 24, 27, 1), 0px 0px 0px 4px rgba(96, 165, 250, 0.8);
  --buttons-neutral:0px -1px 0px 0px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(39, 39, 42, 1), 0px 0px 1px 1.5px rgba(0, 0, 0, 0.24), 0px 2px 2px 0px rgba(0, 0, 0, 0.24);
  --buttons-neutral-focus:0px -1px 0px 0px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(39, 39, 42, 1), 0px 0px 0px 2px rgba(24, 24, 27, 1), 0px 0px 0px 4px rgba(96, 165, 250, 0.8);
  --contrast-bg-base:rgba(39, 39, 42, 1);
  --contrast-bg-base-hover:rgba(63, 63, 70, 1);
  --contrast-bg-base-pressed:rgba(82, 82, 91, 1);
  --contrast-bg-subtle:rgba(255, 255, 255, 0.04);
  --contrast-border-base:rgba(255, 255, 255, 0.16);
  --contrast-border-bot:rgba(255, 255, 255, 0.08);
  --contrast-border-top:rgba(33, 33, 36, 1);
  --contrast-fg-primary:rgba(255, 255, 255, 0.88);
  --contrast-fg-secondary:rgba(255, 255, 255, 0.56);
  --details-contrast-on-bg-interactive:0px 1px 2px 0px rgba(30, 58, 138, 0.6);
  --details-switch-background:0px 1px 1px 0px rgba(0, 0, 0, 0.1) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.1) inset, 0px 0px 0px 0.75px rgba(255, 255, 255, 0.12) inset, 0px 0px 8px 0px rgba(0, 0, 0, 0.1) inset;
  --details-switch-background-focus:0px 0px 0px 1px rgba(24, 24, 27, 1), 0px 0px 0px 3px rgba(96, 165, 250, 0.8), 0px 1px 1px 0px rgba(0, 0, 0, 0.1) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.1) inset, 0px 0px 0px 0.75px rgba(255, 255, 255, 0.12) inset, 0px 0px 8px 0px rgba(0, 0, 0, 0.1) inset;
  --details-switch-handle:0px 0px 2px 1px rgba(255, 255, 255, 1) inset, 0px 1px 0px 0px rgba(255, 255, 255, 1) inset, 0px 0px 0px 0.5px rgba(0, 0, 0, 0.16), 0px 5px 4px 0px rgba(0, 0, 0, 0.1), 0px 3px 3px 0px rgba(0, 0, 0, 0.1), 0px 1px 2px 0px rgba(0, 0, 0, 0.1), 0px 0px 1px 0px rgba(0, 0, 0, 0.1);
  --elevation-card-hover:0px -1px 0px 0px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(39, 39, 42, 1), 0px 1px 4px 0px rgba(0, 0, 0, 0.48), 0px 2px 8px 0px rgba(0, 0, 0, 0.48);
  --elevation-card-rest:0px -1px 0px 0px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(39, 39, 42, 1), 0px 1px 2px 0px rgba(0, 0, 0, 0.32), 0px 2px 4px 0px rgba(0, 0, 0, 0.32);
  --elevation-code-block:0px -1px 0px 0px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(39, 39, 42, 1), 0px 1px 2px 0px rgba(0, 0, 0, 0.32), 0px 2px 4px 0px rgba(0, 0, 0, 0.32);
  --elevation-commandbar:0px 0px 0px 0.75px rgba(24, 24, 27, 1) inset, 0px 0px 0px 1.25px rgba(255, 255, 255, 0.1) inset, 0px 4px 8px 0px rgba(0, 0, 0, 0.32), 0px 8px 16px 0px rgba(0, 0, 0, 0.32);
  --elevation-flyout:0px -1px 0px 0px rgba(255, 255, 255, 0.04), 0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 4px 8px 0px rgba(0, 0, 0, 0.32), 0px 8px 16px 0px rgba(0, 0, 0, 0.32);
  --elevation-modal:0px 0px 0px 1px rgba(24, 24, 27, 1) inset, 0px 0px 0px 1.5px rgba(255, 255, 255, 0.06) inset, 0px -1px 0px 0px rgba(255, 255, 255, 0.04), 0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 4px 8px 0px rgba(0, 0, 0, 0.32), 0px 8px 16px 0px rgba(0, 0, 0, 0.32);
  --elevation-tooltip:0px -1px 0px 0px rgba(255, 255, 255, 0.04), 0px 2px 4px 0px rgba(0, 0, 0, 0.32), 0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 4px 8px 0px rgba(0, 0, 0, 0.32);
  --fg-base:rgba(244, 244, 245, 1);
  --fg-disabled:rgba(82, 82, 91, 1);
  --fg-error:rgba(251, 113, 133, 1);
  --fg-interactive:rgba(96, 165, 250, 1);
  --fg-interactive-hover:rgba(147, 197, 253, 1);
  --fg-muted:rgba(113, 113, 122, 1);
  --fg-on-color:rgba(255, 255, 255, 1);
  --fg-on-inverted:rgba(24, 24, 27, 1);
  --fg-subtle:rgba(161, 161, 170, 1);
  --tag-blue-bg:rgba(23, 37, 84, 1);
  --tag-blue-bg-hover:rgba(30, 58, 138, 1);
  --tag-blue-border:rgba(30, 58, 138, 1);
  --tag-blue-icon:rgba(96, 165, 250, 1);
  --tag-blue-text:rgba(147, 197, 253, 1);
  --tag-green-bg:rgba(2, 44, 34, 1);
  --tag-green-bg-hover:rgba(6, 78, 59, 1);
  --tag-green-border:rgba(6, 78, 59, 1);
  --tag-green-icon:rgba(16, 185, 129, 1);
  --tag-green-text:rgba(52, 211, 153, 1);
  --tag-neutral-bg:rgba(255, 255, 255, 0.08);
  --tag-neutral-bg-hover:rgba(255, 255, 255, 0.12);
  --tag-neutral-border:rgba(255, 255, 255, 0.06);
  --tag-neutral-icon:rgba(113, 113, 122, 1);
  --tag-neutral-text:rgba(212, 212, 216, 1);
  --tag-orange-bg:rgba(67, 20, 7, 1);
  --tag-orange-bg-hover:rgba(124, 45, 18, 1);
  --tag-orange-border:rgba(124, 45, 18, 1);
  --tag-orange-icon:rgba(251, 146, 60, 1);
  --tag-orange-text:rgba(253, 186, 116, 1);
  --tag-purple-bg:rgba(46, 16, 101, 1);
  --tag-purple-bg-hover:rgba(91, 33, 182, 1);
  --tag-purple-border:rgba(91, 33, 182, 1);
  --tag-purple-icon:rgba(167, 139, 250, 1);
  --tag-purple-text:rgba(196, 181, 253, 1);
  --tag-red-bg:rgba(76, 5, 25, 1);
  --tag-red-bg-hover:rgba(136, 19, 55, 1);
  --tag-red-border:rgba(136, 19, 55, 1);
  --tag-red-icon:rgba(251, 113, 133, 1);
  --tag-red-text:rgba(253, 164, 175, 1);
  color-scheme:dark}
/* Admin design system: tokens, type scale and components. */
:root{--font-sans:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--font-mono:"Roboto Mono",ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;background:var(--bg-subtle);color:var(--fg-base)}
body{font:400 13px/20px var(--font-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:none;box-shadow:var(--borders-focus)!important;border-radius:6px}

/* typography (txt-* and h*-core from the preset) */
.txt-xsmall,.txt-compact-xsmall{font-size:12px;line-height:20px;font-weight:400}
.txt-compact-xsmall-plus{font-size:12px;line-height:20px;font-weight:500}
.txt-small,.txt-compact-small{font-size:13px;line-height:20px;font-weight:400}
.txt-compact-small-plus{font-size:13px;line-height:20px;font-weight:500}
.txt-compact-medium{font-size:14px;line-height:20px}
.txt-compact-medium-plus{font-size:14px;line-height:20px;font-weight:500}
.h1-core,h1{font-size:18px;line-height:28px;font-weight:500;margin:0}
.h2-core,h2{font-size:16px;line-height:24px;font-weight:500;margin:0}
.h3-core,h3{font-size:14px;line-height:20px;font-weight:500;margin:0}
.fg-subtle,.muted{color:var(--fg-subtle)}
.fg-muted,.faint{color:var(--fg-muted)}
.mono,code{font-family:var(--font-mono);font-size:12px}
.num,td.n{font-variant-numeric:tabular-nums}

/* Button: secondary (neutral), primary (inverted), transparent, danger; base h-8 px-3, small h-7 px-2 */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:32px;padding:6px 12px;border:0;border-radius:6px;background:var(--button-neutral);color:var(--fg-base);box-shadow:var(--buttons-neutral);font-size:13px;line-height:20px;font-weight:500;cursor:pointer;white-space:nowrap;text-decoration:none;transition:background .15s,color .15s}
.btn:hover{background:var(--button-neutral-hover)}
.btn:active{background:var(--button-neutral-pressed)}
.btn.primary{background:var(--button-inverted);color:var(--contrast-fg-primary);box-shadow:var(--buttons-inverted)}
.btn.primary:hover{background:var(--button-inverted-hover)}
.btn.danger{background:var(--button-danger);color:var(--fg-on-color);box-shadow:var(--buttons-danger)}
.btn.transparent{background:var(--button-transparent);box-shadow:none}
.btn.transparent:hover{background:var(--button-transparent-hover)}
.btn.small{height:28px;padding:4px 8px}
.btn:disabled{background:var(--bg-disabled);color:var(--fg-disabled);box-shadow:var(--buttons-neutral);cursor:default}
.btn svg{flex:none;color:var(--fg-subtle)}
.btn.primary svg{color:inherit}

/* Container (shadow-elevation-card-rest, rounded-lg) */
.container{background:var(--bg-base);border-radius:8px;box-shadow:var(--elevation-card-rest);min-width:0}
.container.divide>*+*{border-top:1px solid var(--border-base)}
.c-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;padding:16px 24px}
.c-body{padding:16px 24px}
.c-head p{margin:0}

/* Badge (tag colours) and StatusBadge (square dot) */
.badge{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 6px;border-radius:6px;border:1px solid var(--tag-neutral-border);background:var(--tag-neutral-bg);color:var(--tag-neutral-text);font-size:12px;line-height:20px;font-weight:500;white-space:nowrap}
.badge.green{background:var(--tag-green-bg);color:var(--tag-green-text);border-color:var(--tag-green-border)}
.badge.red{background:var(--tag-red-bg);color:var(--tag-red-text);border-color:var(--tag-red-border)}
.badge.orange{background:var(--tag-orange-bg);color:var(--tag-orange-text);border-color:var(--tag-orange-border)}
.badge.blue{background:var(--tag-blue-bg);color:var(--tag-blue-text);border-color:var(--tag-blue-border)}
.badge.purple{background:var(--tag-purple-bg);color:var(--tag-purple-text);border-color:var(--tag-purple-border)}
.status{display:inline-flex;align-items:center;height:20px;padding:0 4px 0 0;border:1px solid var(--border-base);border-radius:6px;background:var(--bg-subtle);color:var(--fg-subtle);font-size:12px;line-height:1;font-weight:500;white-space:nowrap}
.status::before{content:"";width:8px;height:8px;border-radius:2px;margin:0 6px;background:var(--tag-neutral-icon)}
.status.green::before{background:var(--tag-green-icon)}.status.red::before{background:var(--tag-red-icon)}.status.orange::before{background:var(--tag-orange-icon)}.status.blue::before{background:var(--tag-blue-icon)}.status.purple::before{background:var(--tag-purple-icon)}

/* Switch 32x18 */
.m-switch{position:relative;width:32px;height:18px;border-radius:999px;border:0;padding:0;background:var(--bg-switch-off);box-shadow:var(--details-switch-background);cursor:pointer;flex:none;transition:background .15s}
.m-switch:hover{background:var(--bg-switch-off-hover)}
.m-switch::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--fg-on-color);box-shadow:var(--details-switch-handle);transition:transform .15s}
.m-switch[aria-checked="true"]{background:var(--bg-interactive)}
.m-switch[aria-checked="true"]::after{transform:translateX(14px)}

/* Input and select */
.input,select.input{height:32px;width:100%;min-width:0;padding:6px 8px;border:0;border-radius:6px;background:var(--bg-field);box-shadow:var(--borders-base);color:var(--fg-base);font-size:13px;line-height:20px;outline:none;appearance:none}
.input:hover{background:var(--bg-field-hover)}
.input:focus{box-shadow:var(--borders-interactive-with-active)}
.input.bad{box-shadow:0 0 0 1px var(--fg-error),0 0 0 3px color-mix(in srgb,var(--fg-error) 18%,transparent)}
select.input{padding-right:28px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' fill='none'%3E%3Cpath fill='%2371717A' d='M4.2 6.2a.6.6 0 0 1 .85 0L7.5 8.65 9.95 6.2a.6.6 0 1 1 .85.85L7.93 9.93a.6.6 0 0 1-.86 0L4.2 7.05a.6.6 0 0 1 0-.85'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center}
textarea.input{height:auto;font-family:var(--font-mono);font-size:12px;resize:vertical}
.label{display:flex;flex-direction:column;gap:6px;font-size:13px;line-height:20px;font-weight:500;color:var(--fg-base);min-width:0}

/* Tabs (pill) */
.m-tabs{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.m-tabs button{display:inline-flex;align-items:center;justify-content:center;padding:4px 10px;border:1px solid transparent;border-radius:999px;background:transparent;color:var(--fg-subtle);font-size:13px;line-height:20px;font-weight:500;cursor:pointer}
.m-tabs button:hover{color:var(--fg-base)}
.m-tabs button[aria-pressed="true"],.m-tabs button[aria-selected="true"]{background:var(--bg-base);color:var(--fg-base);box-shadow:var(--elevation-card-rest)}

/* Table */
.tw{overflow-x:auto;min-width:0}
table.m-table,.m-table{width:100%;border-collapse:collapse;font-size:13px;line-height:20px;color:var(--fg-subtle)}
.m-table th{height:40px;padding:0 24px 0 0;text-align:left;font-weight:500;color:var(--fg-subtle);background:var(--bg-subtle);border-top:1px solid var(--border-base);border-bottom:1px solid var(--border-base);white-space:nowrap}
.m-table td{height:44px;padding:0 24px 0 0;border-bottom:1px solid var(--border-base);background:var(--bg-base)}
.m-table th:first-child,.m-table td:first-child{padding-left:24px}
.m-table tbody tr:hover td{background:var(--bg-base-hover)}
.m-table tbody tr:last-child td{border-bottom:0}
.m-table td.fg,.m-table td b{color:var(--fg-base);font-weight:500}
.m-table .n{text-align:right}

/* Shell: sidebar 220px on bg-subtle, nav items h-7 */
.shell{display:grid;grid-template-columns:220px minmax(0,1fr);min-height:100vh}
.sidebar{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;background:var(--bg-subtle);border-right:1px solid var(--border-base);overflow-y:auto}
.store{margin:12px;display:grid;grid-template-columns:24px 1fr 15px;align-items:center;gap:12px;padding:2px 8px 2px 2px;border-radius:6px;border:0;background:transparent;text-align:left;cursor:default}
.avatar{width:24px;height:24px;border-radius:6px;display:grid;place-items:center;background:var(--bg-base);box-shadow:var(--borders-base);font-size:12px;font-weight:500;color:var(--fg-subtle)}
.store .nm{font-size:13px;line-height:20px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.store svg{color:var(--fg-muted)}
.sb-sep{height:0;border-top:1px dashed var(--border-strong);margin:0 12px}
.sb-nav{padding:12px;display:flex;flex-direction:column;gap:2px}
.nav-search,.nav-item{display:flex;align-items:center;gap:8px;width:100%;padding:2px 8px 2px 2px;min-height:28px;border:0;border-radius:6px;background:transparent;color:var(--fg-subtle);font-size:13px;line-height:20px;font-weight:500;text-align:left;cursor:pointer;text-decoration:none}
.nav-search{padding:4px 8px;gap:10px}
.nav-search kbd{margin-left:auto;font:inherit;font-weight:400;color:var(--fg-muted)}
.nav-item .ic{width:24px;height:24px;display:grid;place-items:center;flex:none}
.nav-item:hover,.nav-search:hover{background:var(--bg-subtle-hover)}
.nav-item[aria-selected="true"],.nav-item.active{background:var(--bg-base);color:var(--fg-base);box-shadow:var(--elevation-card-rest)}
.nav-group{margin-top:10px;padding:0 0 2px 8px;display:flex;align-items:center;justify-content:space-between;font-size:12px;line-height:20px;font-weight:500;color:var(--fg-muted)}
.sb-bottom{margin-top:auto;position:sticky;bottom:0;background:var(--bg-subtle)}
.user{margin:0 12px 12px;display:grid;grid-template-columns:24px 1fr 15px;gap:12px;align-items:center;padding:2px 8px 2px 2px;border-radius:6px;border:0;background:transparent;text-align:left;cursor:pointer;width:calc(100% - 24px)}
.user:hover{background:var(--bg-subtle-hover)}
.user .who{overflow:hidden}
.user .who b{display:block;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user .who span{display:block;font-size:12px;line-height:16px;color:var(--fg-subtle);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.menu{position:absolute;left:12px;right:12px;bottom:56px;background:var(--bg-base);border-radius:8px;box-shadow:var(--elevation-flyout);padding:4px;z-index:40}
.menu .mh{padding:6px 8px 4px;font-size:12px;font-weight:500;color:var(--fg-muted)}
.menu button{display:grid;grid-template-columns:16px 1fr;gap:8px;width:100%;text-align:left;padding:6px 8px;border:0;border-radius:4px;background:transparent;cursor:pointer;font-size:13px;line-height:20px}
.menu button:hover{background:var(--bg-base-hover)}
.menu button small{display:block;color:var(--fg-subtle);font-size:12px;line-height:16px}
.menu .tick{color:var(--fg-interactive);visibility:hidden;padding-top:2px}
.menu button[aria-checked="true"] .tick{visibility:visible}
.main{min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;min-height:52px;padding:8px 12px 8px 16px;background:var(--bg-subtle);border-bottom:1px solid var(--border-base);flex-wrap:wrap}
.crumbs{display:flex;align-items:center;gap:6px;font-size:13px;line-height:20px;font-weight:500;color:var(--fg-muted);margin-right:auto;min-width:0}
.crumbs b{color:var(--fg-base);font-weight:500}
.crumbs svg{color:var(--fg-muted);flex:none}
.page{padding:12px;display:flex;flex-direction:column;gap:8px;min-width:0}
.callout{border-radius:8px;padding:10px 12px;font-size:13px;line-height:20px;background:var(--bg-component);box-shadow:var(--borders-base)}
.callout.green{background:var(--tag-green-bg);color:var(--tag-green-text);box-shadow:none}
.callout.orange{background:var(--tag-orange-bg);color:var(--tag-orange-text);box-shadow:none}
.callout.red{background:var(--tag-red-bg);color:var(--tag-red-text);box-shadow:none}
.callout.blue{background:var(--tag-blue-bg);color:var(--tag-blue-text);box-shadow:none}
.toast{position:fixed;right:16px;bottom:16px;z-index:60;max-width:min(440px,calc(100% - 32px));background:var(--bg-base);color:var(--fg-base);border-radius:8px;box-shadow:var(--elevation-flyout);padding:12px 14px;font-size:13px;line-height:20px;display:flex;gap:10px;align-items:flex-start}
.toast svg{flex:none;margin-top:2px;color:var(--tag-green-icon)}
.overlay{position:fixed;inset:0;background:var(--bg-overlay);z-index:50;display:grid;place-items:center;padding:16px}
.modal{width:min(640px,100%);max-height:calc(100vh - 32px);overflow:auto;background:var(--bg-base);border-radius:8px;box-shadow:var(--elevation-modal)}
.restricted{display:grid;place-items:center;text-align:center;padding:64px 24px;gap:8px;color:var(--fg-subtle)}
@media (max-width:900px){.shell{grid-template-columns:minmax(0,1fr)}.sidebar{position:static;height:auto}.sb-bottom{position:static}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* Nexus pages on the admin design system. Aliases keep the console scripts working. */
:root{--accent:var(--fg-interactive);--ink:var(--fg-base);--muted:var(--fg-subtle);--faint:var(--fg-muted);--hair:var(--border-base);--surface:var(--bg-base);--fill:var(--bg-component);--fill-2:var(--bg-switch-off);--green:var(--tag-green-icon);--red:var(--tag-red-icon);--orange:var(--tag-orange-text);--orange-dot:var(--tag-orange-icon)}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:8px;align-items:start}
@media (max-width:1180px){.layout{grid-template-columns:minmax(0,1fr)}}
main{min-width:0;display:flex;flex-direction:column}
.tab{display:flex;flex-direction:column;gap:8px}
.tab[hidden]{display:none}
.lead{margin:2px 0 0;color:var(--fg-subtle);max-width:78ch}
.eyebrow{font-size:12px;line-height:20px;color:var(--fg-muted);font-weight:500}
.small{font-size:12px;line-height:20px}
.panel,.card{background:var(--bg-base);border-radius:8px;box-shadow:var(--elevation-card-rest);padding:16px 24px;min-width:0}
.panel h3,.card h3{margin-bottom:12px}
.grid{display:grid;gap:8px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(4,minmax(0,1fr))}.g5{grid-template-columns:repeat(5,minmax(0,1fr))}
.panel .grid,.card .grid{gap:12px}
@media (max-width:1000px){.g3,.g4,.g5{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.g2,.g3,.g4,.g5{grid-template-columns:minmax(0,1fr)}}
.stack{display:flex;flex-direction:column;gap:12px}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.spread{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;justify-content:space-between}
.btn.bad{background:var(--button-danger);color:var(--fg-on-color);box-shadow:var(--buttons-danger)}
.btn.bad:hover{background:var(--button-danger-hover)}
.btn.good,.btn.warn{color:var(--fg-base)}
.btn.on{background:var(--tag-orange-bg);color:var(--tag-orange-text);box-shadow:0 0 0 1px var(--tag-orange-border)}
.btn.plain{background:transparent;box-shadow:none;color:var(--fg-interactive)}
label.f{display:flex;flex-direction:column;gap:6px;font-size:13px;line-height:20px;font-weight:500;color:var(--fg-base);min-width:0}
input[type=number],input[type=text],select{height:32px;width:100%;min-width:0;padding:6px 8px;border:0;border-radius:6px;background:var(--bg-field);box-shadow:var(--borders-base);color:var(--fg-base);font-size:13px;font-weight:400;line-height:20px;outline:none}
select{appearance:none;padding-right:28px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' fill='none'%3E%3Cpath fill='%2371717A' d='M4.2 6.2a.6.6 0 0 1 .85 0L7.5 8.65 9.95 6.2a.6.6 0 1 1 .85.85L7.93 9.93a.6.6 0 0 1-.86 0L4.2 7.05a.6.6 0 0 1 0-.85'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center}
input:focus,select:focus{box-shadow:var(--borders-interactive-with-active)}
.seg{display:inline-flex;gap:4px;flex-wrap:wrap}
.seg button{display:inline-flex;align-items:center;padding:4px 10px;border:1px solid transparent;border-radius:999px;background:transparent;color:var(--fg-subtle);font-size:13px;line-height:20px;font-weight:500;cursor:pointer}
.seg button:hover{color:var(--fg-base)}
.seg button[aria-pressed="true"]{background:var(--bg-base);color:var(--fg-base);box-shadow:var(--elevation-card-rest)}
.switchrow{display:inline-flex;align-items:center;gap:8px;border:0;background:transparent;padding:0;cursor:pointer;font-size:13px;line-height:20px;font-weight:500;color:var(--fg-base)}
.sw-track{position:relative;width:32px;height:18px;border-radius:999px;background:var(--bg-switch-off);box-shadow:var(--details-switch-background);flex:none;transition:background .15s}
.sw-track::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--fg-on-color);box-shadow:var(--details-switch-handle);transition:transform .15s}
[aria-checked="true"]>.sw-track{background:var(--bg-interactive)}
[aria-checked="true"]>.sw-track::after{transform:translateX(14px)}
.tstatus{display:flex;align-items:center;gap:16px;font-size:13px;color:var(--fg-subtle)}
.tstatus b{color:var(--fg-base);font-weight:500;font-variant-numeric:tabular-nums}
.tstatus .live{display:inline-flex;align-items:center;gap:6px}
.tstatus .live::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--tag-green-icon)}

/* metrics row: one container, divided cells */
.metrics{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));padding:0;overflow:hidden}
.metrics .kpi,.proof .kpi{padding:16px 24px;border-left:1px solid var(--border-base);min-width:0}
.metrics .kpi:first-child,.proof .kpi:first-child{border-left:0}
.kpi .k{display:flex;align-items:center;gap:6px;font-size:13px;line-height:20px;color:var(--fg-subtle)}
.kpi .v{font-size:24px;line-height:32px;font-weight:500;margin-top:4px;color:var(--fg-base);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.kpi .t{font-size:12px;line-height:20px;color:var(--fg-muted)}
.kpi.good .k::after,.kpi.warn .k::after,.kpi.bad .k::after{content:"";width:8px;height:8px;border-radius:2px;background:var(--tag-green-icon)}
.kpi.warn .k::after{background:var(--tag-orange-icon)}.kpi.bad .k::after{background:var(--tag-red-icon)}
.kpi.bad .v{color:var(--fg-error)}
.proof{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-radius:8px;box-shadow:var(--borders-base);overflow:hidden}
.proof .kpi .v{font-size:20px;line-height:28px}
@media (max-width:1000px){.metrics{grid-template-columns:repeat(3,minmax(0,1fr))}.metrics .kpi:nth-child(4){border-left:0}.metrics .kpi:nth-child(n+4){border-top:1px solid var(--border-base)}.proof{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:620px){.metrics{grid-template-columns:minmax(0,1fr)}.metrics .kpi{border-left:0;border-top:1px solid var(--border-base)}.metrics .kpi:first-child{border-top:0}.proof{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* pill -> StatusBadge */
.pill{display:inline-flex;align-items:center;height:20px;padding:0 6px 0 0;border:1px solid var(--border-base);border-radius:6px;background:var(--bg-subtle);color:var(--fg-subtle);font-size:12px;line-height:1;font-weight:500;white-space:nowrap}
.pill::before{content:"";width:8px;height:8px;border-radius:2px;margin:0 6px;background:var(--tag-neutral-icon);flex:none}
.pill.ok::before{background:var(--tag-green-icon)}.pill.warn::before{background:var(--tag-orange-icon)}.pill.bad::before{background:var(--tag-red-icon)}.pill.info::before{background:var(--tag-blue-icon)}
.pill.plain::before{display:none}.pill.plain{padding:0 6px}
.pill.tag{background:var(--tag-neutral-bg);color:var(--tag-neutral-text);border-color:var(--tag-neutral-border)}

/* systems list */
.syslist{padding:0;overflow:hidden}
.syshead,.sys{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(4,minmax(0,.8fr)) 132px;gap:12px;align-items:center;padding:0 24px}
.syshead{height:40px;background:var(--bg-subtle);border-bottom:1px solid var(--border-base);font-size:13px;font-weight:500;color:var(--fg-subtle)}
.sys{min-height:56px;padding-block:8px;border-top:1px solid var(--border-base)}
.syshead+.sys{border-top:0}
.sys .nm{font-weight:500;color:var(--fg-base)}
.sys .ds{font-size:12px;line-height:16px;color:var(--fg-subtle)}
.sys .m{color:var(--fg-subtle)}
.sys .m b{color:var(--fg-base);font-weight:400;font-variant-numeric:tabular-nums}
.sys .ctl{display:flex;gap:8px;align-items:center;justify-content:flex-end}
.sys .switchrow{gap:0}
@media (max-width:1000px){.sys,.syshead{grid-template-columns:minmax(0,1fr) repeat(2,minmax(0,.8fr)) 132px}.sys .m:nth-of-type(n+3),.syshead span:nth-child(4),.syshead span:nth-child(5){display:none}}
@media (max-width:620px){.sys,.syshead{grid-template-columns:minmax(0,1fr) auto}.sys .m,.syshead span:not(:first-child){display:none}}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:13px;line-height:20px;margin:0}
.kv dt{color:var(--fg-subtle)}.kv dd{margin:0;text-align:right;color:var(--fg-base);font-variant-numeric:tabular-nums}

/* tables inside .tw use the data-table look */
.tw{overflow-x:auto;background:var(--bg-base);border-radius:8px;box-shadow:var(--elevation-card-rest)}
.panel .tw,.card .tw,.callout .tw{box-shadow:var(--borders-base);border-radius:8px}
.tw table{width:100%;border-collapse:collapse;font-size:13px;line-height:20px;color:var(--fg-subtle)}
.tw th{height:40px;padding:0 16px;text-align:left;font-weight:500;color:var(--fg-subtle);background:var(--bg-subtle);border-bottom:1px solid var(--border-base);white-space:nowrap}
.tw td{height:44px;padding:4px 16px;border-bottom:1px solid var(--border-base);background:var(--bg-base);vertical-align:middle}
.tw th:first-child,.tw td:first-child{padding-left:24px}
.tw tbody tr:last-child td{border-bottom:0}
.tw td b{color:var(--fg-base);font-weight:500}
td.n,th.n{text-align:right}
td.z{color:var(--fg-error);font-weight:500}
tr.click{cursor:pointer}
tr.click:hover td{background:var(--bg-base-hover)}
tr.sel td{background:var(--bg-highlight)}
tr.flash td{animation:fl 1.8s ease}
@keyframes fl{0%{background:var(--tag-orange-bg)}100%{background:var(--bg-base)}}
.hl td{background:var(--bg-highlight)}
#invTable td:first-child{min-width:230px}
#invTable th{white-space:normal;line-height:16px}
#invTable td:last-child{white-space:nowrap}

/* activity */
aside.stream{position:sticky;top:64px;background:var(--bg-base);border-radius:8px;box-shadow:var(--elevation-card-rest);display:flex;flex-direction:column;max-height:calc(100vh - 76px);min-width:0;overflow:hidden}
aside .hd{padding:16px 24px 12px;border-bottom:1px solid var(--border-base)}
aside .hd b{font-size:16px;line-height:24px;font-weight:500}
#stream{overflow:auto;padding:4px 0 8px}
.ev{display:grid;grid-template-columns:8px 1fr;gap:10px;padding:8px 24px;font-size:13px;line-height:20px;border-bottom:1px solid var(--border-base)}
.ev:last-child{border-bottom:0}
.ev::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--tag-neutral-icon);margin-top:6px}
.ev.key::before{background:var(--tag-blue-icon)}.ev.ok::before{background:var(--tag-green-icon)}.ev.warn::before{background:var(--tag-orange-icon)}.ev.bad::before{background:var(--tag-red-icon)}
.ev .tm{display:block;color:var(--fg-muted);font-family:var(--font-mono);font-size:12px;line-height:16px}
.ev .st{font-weight:500;color:var(--fg-base);margin-right:4px}
.ev .tx{color:var(--fg-subtle)}
@media (max-width:1180px){aside.stream{position:static;max-height:420px}}

canvas{width:100%;height:160px;display:block}
.legend{display:flex;gap:12px;font-size:12px;color:var(--fg-subtle);flex-wrap:wrap}
.sw{display:inline-block;width:12px;height:2px;border-radius:2px;vertical-align:middle;margin-right:6px}

.pipe{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-radius:8px;box-shadow:var(--borders-base);overflow:hidden}
.stage{padding:12px 16px;border-left:1px solid var(--border-base)}
.stage:first-child{border-left:0}
.stage .s1{font-weight:500;color:var(--fg-base)}
.stage .s2{font-size:12px;line-height:16px;color:var(--fg-subtle);min-height:48px;margin-top:2px}
.stage .s3{font-size:20px;line-height:28px;font-weight:500;color:var(--fg-base);font-variant-numeric:tabular-nums;margin-top:8px}
@media (max-width:1000px){.pipe{grid-template-columns:repeat(3,minmax(0,1fr))}}
.bar{height:6px;border-radius:3px;background:var(--bg-switch-off);overflow:hidden;margin-top:6px}
.bar>i{display:block;height:100%;width:0;border-radius:3px;background:var(--tag-orange-icon);transition:width .25s}

.callout.ok{background:var(--tag-green-bg);color:var(--tag-green-text);box-shadow:none}
.callout.warn{background:var(--tag-orange-bg);color:var(--tag-orange-text);box-shadow:none}
.callout.bad{background:var(--tag-red-bg);color:var(--tag-red-text);box-shadow:none}
.callout.info{background:var(--tag-blue-bg);color:var(--tag-blue-text);box-shadow:none}
.alert{display:flex;gap:12px;align-items:flex-start}
.explain{font-size:13px;line-height:20px;color:var(--fg-subtle)}
.explain b{color:var(--fg-base);font-weight:500}
.explain code{font-family:var(--font-mono);font-size:12px;color:var(--fg-base)}

.steps{list-style:none;margin:0;padding:0}
.steps li{display:grid;grid-template-columns:24px 1fr auto;gap:12px;padding:10px 0;border-top:1px solid var(--border-base);align-items:start}
.steps li:first-child{border-top:0}
.dot{width:20px;height:20px;border-radius:50%;box-shadow:var(--borders-base);display:grid;place-items:center;font-size:11px;font-weight:500;color:var(--fg-muted);background:var(--bg-base)}
.steps li.done .dot{background:var(--tag-green-icon);color:#fff;box-shadow:none}
.steps li.run .dot{box-shadow:var(--borders-interactive-with-active);color:var(--fg-interactive)}
.steps b{font-weight:500;color:var(--fg-base)}
.steps .sd{font-size:12px;line-height:16px;color:var(--fg-subtle);margin-top:2px}
.steps .tm{font-family:var(--font-mono);font-size:12px;color:var(--fg-muted)}
.clock{font-size:40px;line-height:44px;font-weight:400;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--fg-base)}
.phone{width:min(100%,268px);margin:4px auto 0;border-radius:40px;padding:10px;background:#18181B;box-shadow:0 0 0 1px #3F3F46,0 16px 32px rgba(0,0,0,.16)}
.screen{border-radius:31px;background:#F4F4F5;min-height:420px;overflow:hidden;display:flex;flex-direction:column;color:#18181B}
.island{width:80px;height:22px;border-radius:12px;background:#000;margin:9px auto 0}
.ph{text-align:center;padding:10px 12px;border-bottom:1px solid #E4E4E7;font-size:13px;font-weight:500;background:#FAFAFA}
.ph small{display:block;font-weight:400;color:#71717A;font-size:12px}
.pb{padding:12px;display:flex;flex-direction:column;gap:8px;flex:1}
.msg{background:#E4E4E7;border-radius:16px;padding:8px 12px;font-size:13px;line-height:18px;max-width:88%}
.msg.me{align-self:flex-end;background:#3B82F6;color:#fff}
.msg .acts{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:10px}
.msg .acts button{border:0;background:#fff;color:#18181B;border-radius:6px;height:28px;font-weight:500;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.12),0 0 0 1px rgba(0,0,0,.08)}
.msg .acts button.yes{background:#27272A;color:#fff}

pre.resp{margin:0;background:var(--bg-component);border-radius:8px;box-shadow:var(--borders-base);padding:12px 16px;overflow:auto;max-height:440px;font-family:var(--font-mono);font-size:12px;line-height:20px;white-space:pre;color:var(--fg-base)}
.code-ok{color:var(--tag-green-text);font-weight:500}.code-bad{color:var(--fg-error);font-weight:500}

#caption{position:fixed;left:calc(50% + 110px);transform:translateX(-50%);bottom:16px;width:min(760px,calc(100% - 260px));background:var(--contrast-bg-base);color:var(--contrast-fg-primary);border-radius:12px;padding:12px 16px;box-shadow:var(--elevation-commandbar);display:grid;grid-template-columns:1fr auto;gap:2px 16px;z-index:30}
#caption .cn{font-size:12px;line-height:20px;font-weight:500;color:var(--contrast-fg-secondary)}
#caption .ct{grid-column:1;font-size:14px;line-height:22px}
#caption button{grid-column:2;grid-row:1/span 2;align-self:center;height:28px;padding:4px 10px;border-radius:6px;border:0;background:var(--contrast-bg-subtle);color:var(--contrast-fg-primary);box-shadow:0 0 0 1px var(--contrast-border-base);font-size:13px;font-weight:500;cursor:pointer}
@media (max-width:900px){#caption{left:50%;width:calc(100% - 32px)}}
.drawer{position:fixed;inset:0;z-index:50;display:flex;justify-content:flex-end;background:var(--bg-overlay);padding:8px}
.drawer .dp{width:min(560px,100%);height:100%;overflow:auto;background:var(--bg-base);border-radius:8px;box-shadow:var(--elevation-modal);display:flex;flex-direction:column}
.drawer .dh{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border-base)}
.drawer .db{padding:8px 24px 24px}
.sc{display:grid;grid-template-columns:1fr auto;gap:2px 16px;padding:16px 0;border-top:1px solid var(--border-base);align-items:start}
.sc:first-child{border-top:0}
.sc .st{font-weight:500;color:var(--fg-base)}
.sc p{margin:0;color:var(--fg-subtle);grid-column:1}
.sc ul{margin:6px 0 0;padding-left:16px;font-size:12px;line-height:18px;color:var(--fg-subtle);grid-column:1}
.sc .btn{grid-column:2;grid-row:1/span 3}
.rolebadge{margin:0 12px 8px;padding:8px 10px;border-radius:6px;background:var(--bg-base);box-shadow:var(--borders-base);font-size:12px;line-height:16px;color:var(--fg-subtle)}
.rolebadge b{display:block;color:var(--fg-base);font-weight:500;font-size:13px;line-height:20px}
/* admin core screens */
.envbadge{display:inline-flex;align-items:center;height:20px;padding:0 6px;border-radius:6px;background:var(--tag-orange-bg);color:var(--tag-orange-text);border:1px solid var(--tag-orange-border);font-size:12px;font-weight:500}
.menu.top{top:52px;bottom:auto}
.store{cursor:pointer}.store:hover{background:var(--bg-subtle-hover)}
.sidebar{position:sticky}
.nav-item[hidden],.nav-group[hidden]{display:none!important}
.crumbs a{color:var(--fg-muted);text-decoration:none}.crumbs a:hover{color:var(--fg-base)}
.dt .c-head{border-bottom:0}
.dt-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;padding:0 24px 12px}
.input.sm{height:28px;font-size:13px;padding:4px 8px;width:auto}
select.input.sm{padding-right:26px;min-width:150px}
.dt-search{position:relative;display:flex;align-items:center}
.dt-search svg{position:absolute;left:8px;color:var(--fg-muted);pointer-events:none}
.dt-search .input{padding-left:28px;width:260px;max-width:100%}
.container .tw.flat{box-shadow:none;border-radius:0;border-top:1px solid var(--border-base)}
.container .tw.flat th{border-top:0}
.dt-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 24px;border-top:1px solid var(--border-base);font-size:13px;color:var(--fg-subtle);flex-wrap:wrap}
.dt-foot .row{gap:12px}
.empty-cell{text-align:center;color:var(--fg-muted);height:96px!important}
.sub{display:block;font-size:12px;line-height:16px;color:var(--fg-subtle)}
td .sub{margin-top:1px}
.fg{color:var(--fg-base)}
.thumb{display:inline-block;flex:none;border-radius:4px;overflow:hidden;box-shadow:var(--borders-base);background:var(--bg-component)}
.thumb svg{width:100%;height:100%;display:block}
.prodcell{display:flex;align-items:center;gap:12px;min-width:0}
.prodcell b{font-weight:500;color:var(--fg-base)}
.avatar.lg{width:40px;height:40px;border-radius:8px;font-size:14px}
.detail{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:8px;align-items:start}
.detail .col{display:flex;flex-direction:column;gap:8px;min-width:0}
@media (max-width:1100px){.detail{grid-template-columns:minmax(0,1fr)}}
.c-sec{padding:16px 24px;border-top:1px solid var(--border-base)}
.c-sec h3{margin:0 0 8px}
.c-head h2{margin:0}
.container>.c-head+.c-body{border-top:1px solid var(--border-base)}
.li{display:grid;grid-template-columns:auto minmax(0,1fr) auto 90px;gap:12px;align-items:center;padding:8px 0}
.li+.li{border-top:1px dashed var(--border-base)}
.li-t b{display:block;font-weight:500;color:var(--fg-base)}
.li .fg{text-align:right}
.totals>div{display:flex;justify-content:space-between;padding:3px 0;color:var(--fg-subtle);font-variant-numeric:tabular-nums}
.totals .tot{color:var(--fg-base);font-weight:500;border-top:1px dashed var(--border-base);margin-top:6px;padding-top:9px}
.totals .sub{display:flex;justify-content:space-between}
.kvlist{display:flex;flex-direction:column;gap:0}
.kvlist>div{display:grid;grid-template-columns:minmax(120px,40%) 1fr;gap:16px;padding:7px 0;border-bottom:1px solid var(--border-base);align-items:center}
.kvlist>div:last-child{border-bottom:0}
.kvlist>div>span:first-child{color:var(--fg-subtle)}
.kvlist>div>span:last-child{color:var(--fg-base);text-align:right;min-width:0;overflow-wrap:anywhere}
.kvlist .wrap{text-align:left!important}
.kvlist.tight>div{grid-template-columns:minmax(96px,38%) 1fr;padding:6px 0}
.c-body.kvlist{padding-top:8px;padding-bottom:8px}
.who-row{display:flex;gap:12px;align-items:center;margin-bottom:8px}
.who-row b{display:block;font-weight:500;color:var(--fg-base)}
.who-row h1{margin:0}
.tl{list-style:none;margin:0;padding:0 0 0 16px;border-left:1px dashed var(--border-strong)}
.tl li{position:relative;display:grid;grid-template-columns:1fr auto;gap:0 12px;padding:0 0 14px 4px}
.tl li::before{content:"";position:absolute;left:-21px;top:5px;width:9px;height:9px;border-radius:50%;background:var(--bg-base);box-shadow:0 0 0 1px var(--border-strong)}
.tl li:first-child::before{background:var(--fg-interactive);box-shadow:none}
.tl b{font-weight:500;color:var(--fg-base)}
.tl .sub{grid-column:1}
.tl .when{grid-column:2;grid-row:1;font-size:12px;color:var(--fg-muted);white-space:nowrap}
.media{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.media svg{width:100%;height:auto;border-radius:6px;box-shadow:var(--borders-base);display:block}
.chlist{display:flex;flex-direction:column;gap:2px}
.chlist label{display:flex;align-items:center;justify-content:space-between;padding:6px 0;color:var(--fg-base);cursor:pointer}
.metrics.in{box-shadow:none;border-top:1px solid var(--border-base);border-radius:0;grid-template-columns:repeat(3,minmax(0,1fr))}
.settings{display:grid;grid-template-columns:220px minmax(0,1fr);gap:8px;align-items:start}
.setnav{padding:8px;display:flex;flex-direction:column;gap:2px;position:sticky;top:64px}
.setnav .nav-item{padding:4px 8px}
@media (max-width:900px){.settings{grid-template-columns:minmax(0,1fr)}.setnav{position:static;flex-direction:row;flex-wrap:wrap}}
.shiplist{list-style:none;margin:8px 0;padding:0;display:flex;flex-direction:column;gap:4px}
.shiplist li{display:flex;gap:8px;align-items:center;color:var(--fg-base)}
.shiplist svg{color:var(--fg-muted)}
.restricted{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:72px 24px;gap:8px;color:var(--fg-subtle)}
.restricted svg{width:20px;height:20px;color:var(--fg-muted)}
.modal{display:flex;flex-direction:column}
.modal.wide{width:min(820px,100%)}
.modal .c-body{padding:16px 24px}
.c-foot{display:flex;justify-content:flex-end;gap:8px;padding:12px 24px;border-top:1px solid var(--border-base)}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:620px){.fgrid{grid-template-columns:1fr}}
.overlay.top{align-items:start;padding-top:12vh}
.modal.cmd{width:min(640px,100%);overflow:hidden}
.cmd-in{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--border-base);color:var(--fg-muted)}
.cmd-in input{flex:1;border:0;background:transparent;outline:none;font-size:14px;color:var(--fg-base);box-shadow:none;height:28px;padding:0}
.cmd-res{max-height:52vh;overflow:auto;padding:6px}
.cmd-g{padding:8px 10px 4px;font-size:12px;font-weight:500;color:var(--fg-muted)}
.cmd-it{display:flex;justify-content:space-between;gap:12px;width:100%;text-align:left;padding:8px 10px;border:0;border-radius:6px;background:transparent;cursor:pointer}
.cmd-it:hover,.cmd-it.on{background:var(--bg-base-hover)}
.cmd-it b{font-weight:500}.cmd-it span{color:var(--fg-subtle);font-size:12px}
.cmd-foot{display:flex;gap:16px;padding:8px 16px;border-top:1px solid var(--border-base);font-size:12px;color:var(--fg-muted)}
.toast[hidden]{display:none}
td .input.price{width:96px;text-align:right;height:28px}
.badge.blue,.badge.orange,.badge.green,.badge.red,.badge.purple{font-weight:500}
body.sf-on{background:#fff}

.layout.wide{grid-template-columns:minmax(0,1fr)}
.layout.wide>aside.stream{display:none}

.thumb img.pimg,.thumb .ph-none{width:100%;height:100%;object-fit:cover;display:block}
.media .mi{aspect-ratio:4/5;border-radius:6px;overflow:hidden;box-shadow:var(--borders-base);background:var(--bg-component)}
.media .mi>img,.media .mi>.ph-crop,.media .mi>.ph-none{width:100%;height:100%;display:block;object-fit:cover}
.ph-crop{display:block;width:100%;height:100%;background-repeat:no-repeat}
.ph-none{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:#f1f1f0;color:#8a8a86;font-size:10px;text-align:center;line-height:1.2}

/* marketplaces module */
.mk{display:flex;flex-direction:column;gap:8px}
.mk-tabs{padding:0 24px 12px}
.mk-mono{display:inline-flex;align-items:center;justify-content:center;flex:none;border-radius:6px;font-size:11px;font-weight:600;letter-spacing:.02em;color:var(--fg-base);background:var(--bg-component);box-shadow:var(--borders-base)}
.mk-mono[style*="20px"],.mk-mono[style*="22px"],.mk-mono[style*="24px"]{font-size:9px;border-radius:4px}
.mk-tiktok{background:var(--tag-neutral-bg)}.mk-shopee{background:var(--tag-orange-bg);color:var(--tag-orange-text)}.mk-lazmall{background:var(--tag-blue-bg);color:var(--tag-blue-text)}
.mk-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
@media (max-width:1100px){.mk-cards{grid-template-columns:minmax(0,1fr)}}
.mk-card{display:flex;flex-direction:column}
.mk-ch{display:flex;align-items:center;gap:12px;padding:16px 24px;border-bottom:1px solid var(--border-base)}
.mk-ch>div{flex:1;min-width:0}.mk-ch h2{margin:0}
.mk-card .kvlist{padding:8px 24px}
.mk-acts{display:flex;flex-wrap:wrap;gap:8px;padding:12px 24px 16px;border-top:1px solid var(--border-base);margin-top:auto}
.mk-flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.mk-flow div{display:flex;flex-direction:column;gap:4px}.mk-flow b{font-weight:500;color:var(--fg-base)}.mk-flow span{color:var(--fg-subtle);font-size:13px;line-height:20px}
@media (max-width:1000px){.mk-flow{grid-template-columns:repeat(2,minmax(0,1fr))}}
.mk-cell{display:flex;align-items:center;gap:8px;white-space:nowrap}
.mk-pre{margin:0;max-height:320px;overflow:auto;padding:12px;border-radius:6px;background:var(--bg-subtle);box-shadow:var(--borders-base);font:12px/18px "Roboto Mono",ui-monospace,monospace;white-space:pre}
.nowrap{white-space:nowrap}
.mk .prodcell,.mk td.mono,.mk td .pill{white-space:nowrap}
.mk td .sub{white-space:nowrap}
.mk td .sub.wrap{white-space:normal}
/* marketplace connection guide */
.wz-modal{width:min(860px,100%)}
.wz-modal .c-body{padding:0}
.wz-steps{list-style:none;margin:0;padding:14px 24px;display:flex;gap:6px 20px;flex-wrap:wrap;border-bottom:1px solid var(--border-base);background:var(--bg-subtle)}
.wz-steps li{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--fg-muted)}
.wz-steps i{font-style:normal;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;font-size:11px;font-weight:500;box-shadow:var(--borders-base);background:var(--bg-base)}
.wz-steps i svg{width:12px;height:12px}
.wz-steps li.on{color:var(--fg-base);font-weight:500}.wz-steps li.on i{background:var(--bg-interactive);color:var(--fg-on-color);box-shadow:none}
.wz-steps li.done{color:var(--fg-subtle)}.wz-steps li.done i{background:var(--tag-green-bg);color:var(--tag-green-icon);box-shadow:none}
.wz-body{padding:20px 24px;max-height:min(62vh,560px);overflow:auto;display:flex;flex-direction:column;gap:12px}
.wz-lead{margin:0!important;color:var(--fg-subtle)}
.wz-h{margin:8px 0 0;font-size:13px;font-weight:500;color:var(--fg-base)}
.wz-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
@media (max-width:700px){.wz-grid{grid-template-columns:minmax(0,1fr)}}
.wz-tile{display:flex;align-items:center;gap:12px;padding:12px;border:0;border-radius:8px;background:var(--bg-base);box-shadow:var(--borders-base);text-align:left;cursor:pointer;min-width:0}
.wz-tile>span:nth-child(2){flex:1;min-width:0;display:flex;flex-direction:column}.wz-tile b{font-weight:500;color:var(--fg-base)}
.wz-tile:hover{background:var(--bg-base-hover)}.wz-tile.sel{box-shadow:0 0 0 2px var(--fg-interactive)}
.wz-tile:disabled{cursor:default;opacity:.65}
.wz-note{margin:0}
.wz-auth{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 16px;border-radius:8px;background:var(--bg-subtle);box-shadow:var(--borders-base);font-size:13px}
.wz-spin{width:16px;height:16px;border-radius:50%;border:2px solid var(--border-strong);border-top-color:var(--fg-interactive);animation:wzs .8s linear infinite}
@keyframes wzs{to{transform:rotate(360deg)}}
.wz-locs label .sub{display:block}
.wz-preview{display:flex;flex-direction:column;gap:2px;padding:12px 16px;border-radius:8px;background:var(--bg-subtle);box-shadow:var(--borders-base);font-size:13px}
.wz-chips{display:flex;flex-wrap:wrap;gap:6px}
.wz-chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border:0;border-radius:999px;background:var(--bg-base);box-shadow:var(--borders-base);font-size:13px;cursor:pointer;color:var(--fg-subtle)}
.wz-chip span{font-size:11px;color:var(--fg-muted)}
.wz-chip.on{background:var(--bg-interactive);color:var(--fg-on-color);box-shadow:none}.wz-chip.on span{color:var(--fg-on-color);opacity:.8}
.wz-radios{display:flex;flex-direction:column;gap:6px}
.wz-radio{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:8px;box-shadow:var(--borders-base);cursor:pointer;font-size:13px}
.wz-radio.on{box-shadow:0 0 0 2px var(--fg-interactive)}.wz-radio b{font-weight:500;display:block}.wz-radio input{margin-top:3px}
.wz-check{display:flex;gap:8px;align-items:center;font-size:13px;margin-top:6px}
.wz-cfg .wz-h:first-child{margin-top:0}
.mks .mk-ch h1{margin:0}
.mks-nav{display:flex;flex-wrap:wrap;gap:4px 18px;padding:0 24px 14px;font-size:13px}
.mks-nav a{color:var(--fg-subtle);text-decoration:none}.mks-nav a:hover{color:var(--fg-base)}
.mks-dirty{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 24px 12px;padding:8px 12px;border-radius:8px;background:var(--tag-orange-bg);color:var(--tag-orange-text);font-size:13px;box-shadow:inset 0 0 0 1px var(--tag-orange-border)}
.mks .c-body .fgrid+.kvlist{margin-top:12px}
.mks-rot{margin-top:12px;padding:12px;border-radius:8px;background:var(--bg-subtle);box-shadow:var(--borders-base)}
.mks-eff{margin:6px 0 0;padding-left:18px;font-size:13px;color:var(--fg-subtle);display:flex;flex-direction:column;gap:4px}
.wz-err{font-size:12px;color:var(--fg-error)}
.input.bad{box-shadow:0 0 0 1px var(--fg-error)}
.wz-prov{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.wz-prov li{display:flex;gap:12px;align-items:flex-start;font-size:13px;color:var(--fg-muted)}
.wz-prov li>span{display:flex;flex-direction:column}
.wz-prov li b{font-weight:500}
.wz-prov li.ok,.wz-prov li.run{color:var(--fg-base)}
.wz-prov i{flex:none;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;box-shadow:var(--borders-base);font-style:normal}
.wz-prov li.ok i{background:var(--tag-green-bg);color:var(--tag-green-icon);box-shadow:none}
.wz-prov i svg{width:12px;height:12px}
.wz-prov li.run i{box-shadow:none}
.hub-banner{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:80;max-width:min(640px,calc(100% - 32px));padding:10px 14px;border-radius:8px;background:var(--tag-orange-bg);color:var(--tag-orange-text);box-shadow:inset 0 0 0 1px var(--tag-orange-border),var(--elevation-flyout);font-size:13px}
.pr-confirm{display:flex;flex-direction:column;gap:6px}
span.pr-confirm{flex-direction:row;align-items:center;gap:8px}
.pr-confirm[hidden]{display:none!important}




/* storefront. Department-store layout: photography first, tracked uppercase labels, serif display, square controls. Single light look by design. */
.sf{--ink:#111111;--ink2:#3a3a3a;--mute:#707070;--line:#e4e2df;--line2:#cfccc7;--soft:#f5f4f2;--img:#efeeeb;--paper:#ffffff;--low:#9a3412;--bad:#b42318;--ok:#2f6b3f;
  --serif:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;--sans:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;
  background:var(--paper);color:var(--ink);font:400 14px/1.55 var(--sans);min-height:100vh;color-scheme:light;-webkit-font-smoothing:antialiased}
.sf *{box-sizing:border-box}
.sf a{color:inherit;text-decoration:none}
.sf button{font:inherit;color:inherit;cursor:pointer}
.sf svg{flex:none}
.sf img{max-width:100%}
.sf h1,.sf h2,.sf h3{text-wrap:balance}
.sf-wrap{max-width:1360px;margin:0 auto;padding-inline:clamp(16px,3.2vw,48px)}
.sf-narrow{max-width:820px}
.sf-sec{padding-block:clamp(36px,5vw,64px)}
.sf-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.sf-muted{color:var(--mute)}.sm{font-size:12.5px}
.sf-eyebrow{margin:0 0 10px;font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.sf-sub{margin:8px 0 0;color:var(--ink2);max-width:62ch;font-size:15px;line-height:1.6}
.sf-ul{display:inline-block;font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;border-bottom:1px solid currentColor;padding-bottom:2px;line-height:1.3}
.sf-ul:hover{opacity:.65}

/* prototype notice and utility bar */
.sf-proto{display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap;padding:7px 16px;background:#1d1d1b;color:#d9d6d0;font-size:12px;text-align:center}
.sf-proto button{display:inline-flex;align-items:center;gap:4px;border:0;background:transparent;color:#fff;padding:0;font-size:12px;font-weight:500;text-decoration:underline;text-underline-offset:3px}
.sf-proto svg{width:12px;height:12px}
.sf-util{background:var(--soft);border-bottom:1px solid var(--line);font-size:12px;color:var(--ink2)}
.sf-utilrow{display:flex;justify-content:space-between;align-items:center;gap:16px;height:34px}
.sf-utilrow nav{display:flex;gap:22px}
.sf-utilrow nav a:hover{text-decoration:underline;text-underline-offset:3px}
@media (max-width:760px){.sf-utilrow nav{display:none}.sf-utilrow{justify-content:center;text-align:center;height:auto;padding-block:8px}}

/* header */
.sf-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:#fff;border-bottom:1px solid var(--line)}
.sf-hrow{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:78px;gap:16px}
.sf-hl{display:flex;align-items:center;gap:8px;min-width:0}
.sf-hr{display:flex;justify-content:flex-end;align-items:center;gap:22px}
.sf-logo{display:flex;flex-direction:column;align-items:center;line-height:1}
.sf-logo span{font-family:var(--sans);font-weight:600;font-size:25px;letter-spacing:.42em;margin-right:-.42em}
.sf-logo small{margin-top:5px;font-size:9px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--mute)}
.sf-search{position:relative;display:flex;align-items:center;width:min(280px,100%);border-bottom:1px solid var(--line2)}
.sf-search svg{width:15px;height:15px;color:var(--mute)}
.sf-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:13px;padding:8px 8px;color:var(--ink)}
.sf-search:focus-within{border-color:var(--ink)}
.sf-tlink{display:inline-flex;align-items:center;gap:7px;border:0;background:none;padding:6px 0;font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase}
.sf-tlink svg{width:18px;height:18px}
.sf-tlink:hover span{text-decoration:underline;text-underline-offset:3px}
.sf-bag em{font-style:normal;display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;background:var(--ink);color:#fff;font-size:11px;letter-spacing:0;border-radius:10px}
.sf-ico{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:0;background:none;padding:0}
.sf-ico svg{width:18px;height:18px}
.sf-burger{display:none}
.sf-bars{display:block;width:18px;height:10px;border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);position:relative}
.sf-bars::after{content:"";position:absolute;left:0;right:0;top:50%;margin-top:-.75px;border-top:1.5px solid var(--ink)}
.sf-nav{border-top:1px solid var(--line)}
.sf-navrow{display:flex;justify-content:center;gap:clamp(16px,2.4vw,34px);height:46px;align-items:stretch;overflow-x:auto;scrollbar-width:none}
.sf-navrow::-webkit-scrollbar{display:none}
.sf-navrow a{display:flex;align-items:center;font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-1px}
.sf-navrow a:hover{border-color:var(--line2)}
.sf-navrow a.on{border-color:var(--ink)}
.sf-navrow a:first-child{color:#8a5a2b}
@media (max-width:900px){
  .sf-hrow{height:64px;grid-template-columns:auto 1fr auto}
  .sf-logo{align-items:flex-start}.sf-logo span{font-size:28px}.sf-logo small{display:none}
  .sf-burger{display:inline-flex}.sf-search{display:none}.sf-tlink span{display:none}.sf-hr{gap:10px}
  .sf-nav{display:none}.sf-nav.open{display:block}
  .sf-nav.open .sf-navrow{flex-direction:column;height:auto;align-items:stretch;gap:0;padding-block:8px}
  .sf-nav.open .sf-navrow a{padding:13px 0;border-bottom:1px solid var(--line);margin:0}
}
.sf-amb{background:#f3efe8;border-bottom:1px solid #e6dfd3;font-size:13px}
.sf-ambrow{display:flex;align-items:center;gap:12px;min-height:46px;padding-block:8px}
.sf-ambrow>span:nth-child(2){flex:1;min-width:0}
.sf-ambrow button{display:inline-flex;align-items:center;gap:6px;border:0;background:none;font-size:12px;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.sf-ambrow button svg{width:12px;height:12px}
.sf-mono{display:inline-flex;align-items:center;justify-content:center;flex:none;width:40px;height:40px;border-radius:50%;background:#ebe8e3;color:#3a352e;font-family:var(--sans);font-weight:500;font-size:13px;letter-spacing:.06em}
.sf-mono.sm{width:28px;height:28px;font-size:10.5px}
.sf-mono.xl{width:64px;height:64px;font-size:19px;margin:18px 0 16px}

/* buttons and form controls: square, black */
.sf-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 28px;border:1px solid var(--ink);background:var(--ink);color:#fff!important;font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;border-radius:0;transition:background .15s,color .15s}
.sf-btn:hover{background:#333;border-color:#333}
.sf-btn.ghost{background:transparent;color:var(--ink)!important}
.sf-btn.ghost:hover{background:var(--ink);color:#fff!important}
.sf-btn.light{background:#fff;border-color:#fff;color:var(--ink)!important}
.sf-btn.light:hover{background:#ecebe8}
.sf-btn.outline-light{background:transparent;border-color:rgba(255,255,255,.8);color:#fff!important}
.sf-btn.outline-light:hover{background:rgba(255,255,255,.12)}
.sf-btn.wide{width:100%}
.sf-btn.sm{height:40px;padding:0 16px}
.sf-btn:disabled{background:#e8e7e4;border-color:#e8e7e4;color:#8b8b8b!important;cursor:not-allowed}
.sf-link{border:0;background:none;text-decoration:underline;text-underline-offset:3px;font-size:13px;padding:0}

/* hero */
.sf-hero{position:relative;height:clamp(440px,68vh,680px);overflow:hidden;background:#2a2622;color:#fff}
.sf-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.sf-hero-sh{position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,12,10,.62) 0%,rgba(15,12,10,.28) 45%,rgba(15,12,10,0) 70%),linear-gradient(0deg,rgba(15,12,10,.35),rgba(15,12,10,0) 40%)}
.sf-hero-tx{position:relative;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:clamp(36px,6vw,72px)}
.sf-hero-tx .sf-eyebrow{color:rgba(255,255,255,.82)}
.sf-hero h1{margin:0;font-family:var(--serif);font-weight:300;letter-spacing:-.015em;font-size:clamp(38px,4.8vw,68px);line-height:1.04;letter-spacing:-.025em}
.sf-hero-tx>p:not(.sf-eyebrow){margin:18px 0 28px;max-width:44ch;font-size:16px;line-height:1.55;color:rgba(255,255,255,.9)}

/* editorial tiles */
.sf-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,24px)}
.sf-tile{display:flex;flex-direction:column;align-items:flex-start}
.sf-tileimg{width:100%;aspect-ratio:4/5;overflow:hidden;background:var(--img);margin-bottom:16px}
.sf-tileimg img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.sf-tile:hover .sf-tileimg img{transform:scale(1.03)}
.sf-tile .sf-eyebrow{margin-bottom:6px}
.sf-tile h3{margin:0 0 12px;font-family:var(--serif);font-weight:300;letter-spacing:-.015em;font-size:clamp(19px,1.5vw,22px);line-height:1.3}
@media (max-width:760px){.sf-tiles{grid-template-columns:minmax(0,1fr)}.sf-tileimg{aspect-ratio:5/4}}

/* section heads */
.sf-sechd{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:24px}
.sf-sechd h2,.sf-h2{margin:0;font-family:var(--serif);font-weight:300;letter-spacing:-.015em;font-size:clamp(22px,2vw,28px);line-height:1.2}
.sf-sechd+.sf-sub{margin:-12px 0 24px}

/* product grid and cards */
.sf-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px clamp(12px,1.4vw,20px)}
.sf-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.sf-grid.two{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}
@media (max-width:1000px){.sf-grid,.sf-grid.three{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sf-img{position:relative;display:block;overflow:hidden;background:var(--img);aspect-ratio:4/5}
.sf-img>img,.sf-img>svg,.sf-img>.ph-none{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.sf-pc{display:flex;flex-direction:column;min-width:0}
.sf-pc .sf-img img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.sf-pc:hover .sf-img img{transform:scale(1.035)}
.sf-tag{position:absolute;left:10px;top:10px;background:#fff;color:var(--ink);font-size:10.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;padding:5px 8px;line-height:1}
.sf-tag.low{color:var(--low)}
.sf-tag.out{background:var(--ink);color:#fff}
.sf-pmeta{display:flex;flex-direction:column;gap:3px;padding-top:12px}
.sf-brand{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.sf-pt{font-size:13.5px;color:var(--ink2);line-height:1.4}
.sf-price{font-size:13.5px;color:var(--ink);font-variant-numeric:tabular-nums;margin-top:2px}
.sf-opts{font-size:12px;color:var(--mute)}

/* makers band */
.sf-makers{background:var(--soft);padding-block:clamp(40px,6vw,88px)}
.sf-mkgrid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:stretch}
.sf-mkimg{min-height:100%;overflow:hidden;background:var(--img);position:relative}
.sf-mkimg img{position:absolute;inset:0}
.sf-mkimg img{width:100%;height:100%;object-fit:cover}
.sf-mktx h2{margin:0;font-family:var(--serif);font-weight:300;letter-spacing:-.015em;font-size:clamp(28px,2.8vw,40px);line-height:1.12}
.sf-mktx>p:not(.sf-eyebrow){margin:16px 0 32px;color:var(--ink2);font-size:15px;max-width:46ch}
.sf-mktx .sf-grid{margin-bottom:32px}
@media (max-width:900px){.sf-mkgrid{grid-template-columns:minmax(0,1fr)}.sf-mkimg{min-height:0;aspect-ratio:16/10}}

/* ambassadors */
.sf-ambs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px clamp(12px,1.6vw,24px)}
@media (max-width:1000px){.sf-ambs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.sf-ambs{grid-template-columns:minmax(0,1fr)}}
.sf-ambc{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.sf-mos{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:4px;width:100%;aspect-ratio:6/5;margin-bottom:16px}
.sf-mos .sf-img{aspect-ratio:auto;height:100%}
.sf-mos .m0{grid-row:1/3}
.sf-ambmeta{display:flex;gap:12px;align-items:center;margin-bottom:10px}
.sf-ambmeta b{display:block;font-weight:600;font-size:14px}
.sf-ambmeta span:not(.sf-mono){font-size:12px;color:var(--mute)}
.sf-ambc p{margin:0 0 14px;font-size:13.5px;color:var(--ink2);line-height:1.5}
.sf-ambc:hover .sf-ul{opacity:.65}
.sf-ambhero{background:var(--soft);border-bottom:1px solid var(--line)}
.sf-ambhgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:center;padding-block:28px 48px}
.sf-ambhero h1{margin:0;font-family:var(--serif);font-weight:300;letter-spacing:-.015em;font-size:clamp(30px,3.2vw,44px);line-height:1.1}
.sf-ambhero .sf-crumb{margin-bottom:0}
.sf-mos.big{margin:0;aspect-ratio:5/4}
@media (max-width:800px){.sf-ambhgrid{grid-template-columns:minmax(0,1fr)}}

/* service strip */
.sf-perks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;padding-block:40px 64px;border-top:1px solid var(--line)}
.sf-perks div{display:flex;flex-direction:column;gap:6px}
.sf-perks b{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.sf-perks span{font-size:13px;color:var(--mute);line-height:1.5}
@media (max-width:800px){.sf-perks{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* listing */
.sf-crumb{display:flex;flex-wrap:wrap;gap:8px;font-size:12px;color:var(--mute);margin-bottom:20px}
.sf-crumb a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.sf-crumb span:last-child{color:var(--ink2)}
.sf-cathd{margin-bottom:32px}
.sf-cathd h1,.sf-cohd h1,.sf-acchd h1,.sf-thanks{margin:0;font-family:var(--serif);font-weight:300;letter-spacing:-.015em;font-size:clamp(28px,3vw,40px);line-height:1.12}
.sf-plp{padding-top:28px}
.sf-plpgrid{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(24px,3.4vw,56px);align-items:start}
.sf-side{position:sticky;top:140px;display:flex;flex-direction:column}
.sf-side h4{margin:0 0 10px;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding-top:16px;border-top:1px solid var(--line)}
.sf-flist{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin-bottom:24px}
.sf-flist button,.sf-flist a,.sf-flist span{border:0;background:none;padding:4px 0;font-size:13.5px;color:var(--ink2);text-align:left}
.sf-flist.plain span{color:var(--mute);font-size:13px;padding:3px 0}
.sf-flist button:hover,.sf-flist a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.sf-flist .on{color:var(--ink);font-weight:600}
.sf-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-bottom:16px;margin-bottom:24px;border-bottom:1px solid var(--line);font-size:12.5px;color:var(--mute)}
.sf-sort{white-space:nowrap;display:flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.sf-sort select{border:1px solid var(--line2);border-radius:0;background:#fff;height:36px;padding:0 30px 0 10px;font:inherit;font-size:13px;letter-spacing:0;text-transform:none;color:var(--ink);appearance:none;background-image:linear-gradient(45deg,transparent 50%,#111 50%),linear-gradient(135deg,#111 50%,transparent 50%);background-position:calc(100% - 15px) 15px,calc(100% - 10px) 15px;background-size:5px 5px;background-repeat:no-repeat}
@media (max-width:800px){.sf-plpgrid{grid-template-columns:minmax(0,1fr)}.sf-side{position:static;flex-direction:row;flex-wrap:wrap;gap:0 24px}.sf-side h4,.sf-side .sf-flist.plain,.sf-side h4+.sf-flist.plain{display:none}.sf-side .sf-flist{flex-direction:row;flex-wrap:wrap;gap:6px 16px;margin-bottom:12px}}
.sf-empty{padding:64px 0;text-align:center;color:var(--mute)}
.sf-empty h3{margin:0 0 6px;font-weight:400;font-size:22px;color:var(--ink)}

/* product page */
.sf-pdpsec{padding-top:24px}
.sf-pdp{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:clamp(24px,4.4vw,72px);align-items:start}
.sf-gal{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.sf-gi{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--img)}
.sf-gi.main{grid-column:1/3}
.sf-gi>img,.sf-gi>svg,.sf-gi>.ph-crop,.sf-gi>.ph-none{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.sf-stick{position:sticky;top:150px;display:flex;flex-direction:column}
.sf-info .sf-brand{font-size:12px}
.sf-info h1{margin:8px 0 14px;font-family:var(--serif);font-weight:300;letter-spacing:-.015em;font-size:clamp(24px,2.2vw,30px);line-height:1.2}
.sf-pprice{display:flex;align-items:baseline;gap:10px;font-size:17px;font-variant-numeric:tabular-nums;padding-bottom:22px;border-bottom:1px solid var(--line);margin-bottom:22px}
.sf-pprice span{font-size:12px;color:var(--mute)}
.sf-opt{margin-bottom:20px}
.sf-ol{display:flex;gap:8px;font-size:12px;margin-bottom:10px}
.sf-ol span{letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.sf-optrow{display:flex;flex-wrap:wrap;gap:8px}
.sf-ob{min-width:64px;height:44px;padding:0 16px;border:1px solid var(--line2);background:#fff;border-radius:0;font-size:13px}
.sf-ob:hover{border-color:var(--ink)}
.sf-ob.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.sf-ob.out{color:#a3a3a3;background:linear-gradient(to top left,transparent calc(50% - .5px),#cfccc7 50%,transparent calc(50% + .5px))}
.sf-buy{display:flex;flex-direction:column;gap:8px;margin-bottom:22px}
.sf-buy p{margin:0}
.sf-low{color:var(--low);font-size:13px;font-weight:500;margin:0}
.sf-avail{display:flex;flex-direction:column;border-top:1px solid var(--line);margin-bottom:8px}
.sf-avail>div{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font-size:13px}
.sf-avail b{font-weight:500}
.sf-avail span{color:var(--ink2);text-align:right;display:inline-flex;align-items:center;gap:7px}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#c4c1bb}
.dot.ok{background:var(--ok)}
.sf-note{display:flex;gap:12px;align-items:center;background:#f3efe8;padding:12px 14px;font-size:13px;margin:12px 0 4px}
.sf-acc{border-bottom:1px solid var(--line)}
.sf-acc summary{list-style:none;display:flex;justify-content:space-between;align-items:center;padding:16px 0;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.sf-acc summary::-webkit-details-marker{display:none}
.sf-acc summary::after{content:"+";font-size:18px;font-weight:300;letter-spacing:0}
.sf-acc[open] summary::after{content:"−"}
.sf-acc p{margin:0 0 18px;color:var(--ink2);font-size:14px;line-height:1.65}
.sf-acc dl{display:grid;grid-template-columns:120px 1fr;gap:8px 16px;margin:0 0 18px;font-size:13px}
.sf-acc dt{color:var(--mute)}.sf-acc dd{margin:0}
@media (max-width:900px){.sf-pdp{grid-template-columns:minmax(0,1fr)}.sf-stick{position:static}.sf-gal{grid-template-columns:1fr 1fr}}

/* account */
.sf-acchd{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:28px}
.sf-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:40px}
.sf-kpis div{padding:18px 0;display:flex;flex-direction:column;gap:4px}
.sf-kpis div+div{padding-left:20px;border-left:1px solid var(--line)}
.sf-kpis span{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.sf-kpis b{font-family:var(--serif);font-weight:400;font-size:26px;font-variant-numeric:tabular-nums}
.sf-h2{margin-bottom:16px!important}
.sf-members{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.sf-member{display:flex;align-items:center;gap:16px;padding:16px 4px;border:0;border-bottom:1px solid var(--line);background:none;text-align:left}
.sf-member>span:nth-child(2){flex:1;display:flex;flex-direction:column}
.sf-member b{font-weight:600}.sf-member span span{font-size:13px;color:var(--mute)}
.sf-member:hover{background:var(--soft)}
.sf-member svg{width:16px;height:16px;color:var(--mute)}
.sf-orders{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.sf-ord{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:20px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}
.sf-ord>div:first-child{display:flex;flex-direction:column}
.sf-ord b{font-weight:600;font-variant-numeric:tabular-nums}
.sf-ordimgs{display:flex;gap:6px}
.sf-ordimgs .sf-img{width:44px}
.sf-ordr{display:flex;flex-direction:column;align-items:flex-end;font-variant-numeric:tabular-nums}
.sf-st{font-size:12px;color:var(--mute)}
@media (max-width:560px){.sf-ord{grid-template-columns:minmax(0,1fr) auto}.sf-ordimgs{display:none}}

/* checkout */
.sf-cohd{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;padding-bottom:20px;margin-bottom:32px;border-bottom:1px solid var(--line)}
.sf-cohd .sf-muted{display:inline-flex;align-items:center;gap:6px}
.sf-cohd svg{width:14px;height:14px}
.sf-co{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:clamp(24px,4vw,64px);align-items:start}
@media (max-width:960px){.sf-co{grid-template-columns:minmax(0,1fr)}}
.sf-step{padding-bottom:32px;margin-bottom:32px;border-bottom:1px solid var(--line)}
.sf-step:last-child{border-bottom:0}
.sf-step h2{display:flex;align-items:center;gap:12px;margin:0 0 18px;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.sf-step h2 i{font-style:normal;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border:1px solid var(--ink);border-radius:50%;font-size:11px;letter-spacing:0}
.sf-step>p{margin:12px 0 0}
.sf-fields{display:grid;gap:14px}
.sf-fields.two{grid-template-columns:1fr 1fr;margin-top:16px}
.sf-fields .full{grid-column:1/-1}
.sf-fields label{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--mute)}
.sf-fields input,.sf-promo input,.sf-nform input{height:46px;border:1px solid var(--line2);border-radius:0;padding:0 14px;font:inherit;font-size:14px;color:var(--ink);background:#fff;outline:0;min-width:0}
.sf-fields input:focus,.sf-promo input:focus,.sf-nform input:focus{border-color:var(--ink)}
@media (max-width:560px){.sf-fields.two{grid-template-columns:minmax(0,1fr)}}
.sf-radios{display:flex;flex-direction:column;border:1px solid var(--line2)}
.sf-radio{display:flex;gap:14px;align-items:center;padding:16px;cursor:pointer;background:#fff}
.sf-radio+.sf-radio{border-top:1px solid var(--line)}
.sf-radio input{accent-color:#111;width:16px;height:16px;margin:0;flex:none}
.sf-radio>span:nth-child(2){flex:1;display:flex;flex-direction:column}
.sf-radio b{font-weight:500}
.sf-radio>span>span{font-size:12.5px;color:var(--mute)}
.sf-radio.on{background:var(--soft)}
.sf-radio.dis{opacity:.5;cursor:not-allowed}
.sf-fee{font-size:13px;font-variant-numeric:tabular-nums}
.sf-stores{margin-top:12px}
.sf-signed{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--line2)}
.sf-signed>span:nth-child(2){flex:1;display:flex;flex-direction:column}
.sf-co-side{position:sticky;top:150px;background:var(--soft);padding:28px}
.sf-co-side h2{margin:0 0 18px;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.sf-lines{display:flex;flex-direction:column}
.sf-line{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:14px;align-items:start;padding:14px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.sf-line:first-child{padding-top:0}
.sf-line>div:nth-child(2){display:flex;flex-direction:column;gap:2px;min-width:0}
.sf-line b{font-weight:500;color:var(--ink)}
.sf-line>span{font-variant-numeric:tabular-nums}
.sf-line .sf-img{width:64px}
.sf-q{position:absolute;right:-1px;top:-1px;min-width:20px;height:20px;padding:0 5px;background:var(--ink);color:#fff;font-size:11px;display:flex;align-items:center;justify-content:center}
.sf-lines.boxed{border-top:1px solid var(--line);margin:28px 0}
.sf-lines.boxed .sf-line:first-child{padding-top:14px}
.sf-promo{display:flex;gap:8px;margin:18px 0 8px}
.sf-promo input{flex:1;height:40px}
.sf-pmsg{margin:0 0 6px;font-size:13px;color:var(--bad)}.sf-pmsg.ok{color:var(--ok)}
.sf-tot{display:grid;grid-template-columns:1fr auto;gap:8px;margin:20px 0;font-size:13.5px;font-variant-numeric:tabular-nums}
.sf-tot dt{color:var(--ink2)}.sf-tot dd{margin:0;text-align:right}
.sf-tot .big{font-size:16px;font-weight:600;color:var(--ink);padding-top:12px;border-top:1px solid var(--line2);margin-top:4px}
.sf-tot .sm{color:var(--mute)}
.sf-err{background:#fdf1ef;border-left:2px solid var(--bad);padding:12px 14px;font-size:13px;margin-bottom:12px;line-height:1.5}

/* confirmation */
.sf-behind{background:var(--soft);padding:24px 28px;margin:0 0 28px}
.sf-behind h3{margin:0 0 14px;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.sf-behind ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.sf-behind li{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--ink2)}
.sf-behind svg{width:16px;height:16px;margin-top:2px}
.sf-behind li.ok svg{color:var(--ok)}.sf-behind li.wait svg{color:var(--mute)}

/* bag drawer */
.sf-drawer{position:fixed;inset:0;z-index:60;background:rgba(17,17,17,.38);display:flex;justify-content:flex-end}
.sf-dpanel{width:min(440px,100%);height:100%;background:#fff;display:flex;flex-direction:column;animation:sfin .28s cubic-bezier(.2,.7,.2,1)}
@keyframes sfin{from{transform:translateX(24px);opacity:.4}to{transform:none;opacity:1}}
.sf-dh{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;padding-top:calc(16px + env(safe-area-inset-top,0px));border-bottom:1px solid var(--line)}
.sf-dh h2{margin:0;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.sf-dh h2 span{font-weight:400;color:var(--mute);letter-spacing:.04em;text-transform:none;margin-left:6px;font-size:13px}
.sf-dbody{flex:1;overflow:auto;padding:20px 24px}
.sf-dbody .sf-line{grid-template-columns:84px minmax(0,1fr) auto}
.sf-dbody .sf-line .sf-img{width:84px}
.sf-dbody .sf-line .sf-brand{font-size:10.5px}
.sf-dempty{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.sf-dempty p{margin:0;color:var(--mute)}
.sf-free{position:relative;padding-bottom:12px;margin-bottom:6px;font-size:12.5px;color:var(--ink2)}
.sf-free i{position:absolute;left:0;bottom:0;height:2px;background:var(--ink)}
.sf-free::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--line);z-index:-1}
.sf-free.ok{color:var(--ok)}.sf-free.ok i{background:var(--ok)}
.sf-step-q{display:inline-flex;align-items:center;border:1px solid var(--line2);margin-top:10px;width:max-content}
.sf-step-q button{width:32px;height:32px;border:0;background:none;display:inline-flex;align-items:center;justify-content:center}
.sf-step-q button:disabled{opacity:.3;cursor:not-allowed}
.sf-step-q svg{width:12px;height:12px}
.sf-step-q span{min-width:24px;text-align:center;font-size:13px;font-variant-numeric:tabular-nums}
.sf-dfoot{border-top:1px solid var(--line);padding:18px 24px;padding-bottom:calc(18px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:10px}
.sf-dfoot p{margin:0}
.spread{display:flex;justify-content:space-between;align-items:center;font-size:15px}

/* footer */
.sf-foot{background:var(--soft);border-top:1px solid var(--line);margin-top:24px}
.sf-ftop{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(24px,5vw,80px);padding-block:56px 48px}
.sf-news h3{margin:0 0 8px;font-weight:500;font-size:13px;letter-spacing:.12em;text-transform:uppercase}
.sf-news>p{margin:0 0 16px;color:var(--ink2);font-size:13.5px}
.sf-nform{display:flex}
.sf-nform input{flex:1;border-right:0}
.sf-nform .sf-btn{height:46px;padding:0 20px}
.sf-fine{font-size:12px;color:var(--mute);margin:10px 0 0;min-height:1em}
.sf-fcols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.sf-fcols div{display:flex;flex-direction:column;gap:9px}
.sf-fcols h4{margin:0 0 6px;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.sf-fcols a{font-size:13px;color:var(--ink2)}
.sf-fcols a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.sf-fbot{display:flex;flex-wrap:wrap;gap:6px 28px;padding-block:20px 32px;border-top:1px solid var(--line);font-size:11.5px;color:var(--mute)}
@media (max-width:900px){.sf-ftop{grid-template-columns:minmax(0,1fr)}.sf-fcols{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sf-main{display:block;min-height:60vh}
.sf input[type=text]{box-shadow:none}
.sf-search input,.sf-search input:focus{border:0!important;box-shadow:none!important;border-radius:0;height:auto;background:transparent}
.sf-tot{column-gap:0}
.sf-tot dd{padding-left:16px}
@media (max-width:760px){.sf-hero-sh{background:linear-gradient(0deg,rgba(15,12,10,.78) 0%,rgba(15,12,10,.4) 55%,rgba(15,12,10,.12) 100%)}.sf-hero-tx .sf-row .sf-btn{flex:1 1 100%}}
.hub-state{display:inline-flex;align-items:center;gap:6px;margin-left:10px;padding-left:12px;border-left:1px solid #4a4a46;color:#bdb9b2}
.hub-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#8a8780}.hub-dot.on{background:#4caf6a}
.sf-pprice .sf-sale{font-weight:600;color:#9a3412}
.sf-pprice s{color:var(--mute);font-size:14px}
.sf-info-body{display:flex;flex-direction:column;gap:16px;font-size:15px;line-height:1.65;color:var(--ink2);max-width:68ch}
.sf-info-body p{margin:0}
.sf-itbl{width:100%;border-collapse:collapse;font-size:14px}
.sf-itbl th,.sf-itbl td{text-align:left;padding:12px 12px 12px 0;border-bottom:1px solid var(--line);vertical-align:top}
.sf-itbl th{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.sf-track{display:flex;gap:8px;max-width:440px}
.sf-track input{flex:1;height:48px;border:1px solid var(--line2);padding:0 14px;font:inherit;outline:0;min-width:0}
.sf-trackres{display:flex;flex-direction:column;gap:4px;padding:16px;background:var(--soft)}