/*
  Sekorix Theme
  Layered on top of Bootstrap 5.3.8.

  Bootstrap owns standard component and layout behavior. This file contains
  the Sekorix token contract, Bootstrap variable mapping, and the small set of
  product visuals that cannot be expressed by Bootstrap utilities alone.
*/

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/static/vendor/space-grotesk/space-grotesk-variable.ttf") format("truetype");
}

:root {
  color-scheme: light;

  /* Typography */
  --skx-font-sans: "Space Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
  --skx-font-display: "Space Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
  --skx-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --skx-type-page-title: clamp(1.875rem, 1.5rem + 1vw, 2.375rem);
  --skx-type-section-title: clamp(1.375rem, 1.15rem + 0.55vw, 1.75rem);
  --skx-type-panel-title: clamp(1.0625rem, 1rem + 0.2vw, 1.25rem);
  --skx-type-body: clamp(0.9375rem, 0.9rem + 0.1vw, 1rem);
  --skx-type-dense: 0.875rem;
  --skx-type-meta: 0.75rem;
  --skx-type-metric: clamp(1.75rem, 1.35rem + 1.4vw, 2.75rem);
  --skx-type-display: clamp(2.375rem, 1.75rem + 2.5vw, 4rem);
  --skx-weight-regular: 400;
  --skx-weight-medium: 500;
  --skx-weight-semibold: 600;
  --skx-weight-bold: 700;
  --skx-weight-heavy: 700;
  --skx-leading-tight: 1.2;
  --skx-leading-heading: 1.3;
  --skx-leading-dense: 1.4;
  --skx-leading-body: 1.5;

  /* Spacing */
  --skx-space-1: 4px;
  --skx-space-2: 8px;
  --skx-space-3: 12px;
  --skx-space-4: 16px;
  --skx-space-5: 20px;
  --skx-space-6: 24px;
  --skx-space-8: 32px;
  --skx-space-10: 40px;
  --skx-space-12: 48px;
  --skx-page-padding: clamp(var(--skx-space-4), 1.5vw, var(--skx-space-8));
  --skx-section-gap: clamp(var(--skx-space-6), 2vw, var(--skx-space-10));
  --skx-panel-padding: clamp(var(--skx-space-4), 1vw, var(--skx-space-6));
  --skx-table-cell-x: var(--skx-space-4);
  --skx-table-cell-y: var(--skx-space-3);

  /* Shape and size */
  --skx-radius-micro: 4px;
  --skx-radius-control: 10px;
  --skx-radius-panel: 16px;
  --skx-radius-overlay: 20px;
  --skx-radius-circle: 999px;
  --skx-border-width: 1px;
  --skx-focus-width: 3px;
  --skx-control-sm: 36px;
  --skx-control-md: 40px;
  --skx-control-lg: 44px;
  --skx-icon-sm: 16px;
  --skx-icon-md: 20px;
  --skx-icon-lg: 24px;

  /* Content and application shell */
  --skx-content-reading: 72ch;
  --skx-content-standard: 1200px;
  --skx-content-wide: 1600px;
  --skx-sidebar-width: 260px;

  /* Motion */
  --skx-motion-fast: 120ms;
  --skx-motion-standard: 180ms;
  --skx-motion-slow: 240ms;
  --skx-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --skx-ease-emphasized: cubic-bezier(0.2, 0, 0, 1.2);

  /* Layering */
  --skx-z-base: 0;
  --skx-z-sticky: 100;
  --skx-z-dropdown: 1000;
  --skx-z-overlay: 1040;
  --skx-z-modal: 1050;
  --skx-z-toast: 1080;
  --skx-z-tooltip: 1090;

  /* Semantic color roles: light */
  --skx-app-bg: #edf2f8;
  --skx-panel-bg: #ffffff;
  --skx-panel-muted: #f4f7fb;
  --skx-panel-raised: #ffffff;
  --skx-text: #29384d;
  --skx-text-strong: #111d31;
  --skx-text-muted: #63738a;
  --skx-border-soft: rgba(24, 43, 72, 0.12);
  --skx-border-strong: rgba(24, 43, 72, 0.22);
  --skx-control-border: #8798ad;
  --skx-primary: #2457f5;
  --skx-primary-hover: #1d46d8;
  --skx-primary-active: #1838ad;
  --skx-primary-soft: #eaf0ff;
  --skx-brand-deep: #12328d;
  --skx-brand-bright: #5b7fff;
  --skx-on-brand: #ffffff;
  --skx-on-primary: #ffffff;
  --skx-on-success: #ffffff;
  --skx-on-danger: #ffffff;
  --skx-blue: #2f6fed;
  --skx-amber: #b7791f;
  --skx-red: #c2414b;
  --skx-success: #16875f;
  --skx-danger: var(--skx-red);
  --skx-info: var(--skx-blue);
  --skx-warning: var(--skx-amber);
  --skx-navy: var(--skx-text-strong);
  --skx-teal: #0f766e;
  --skx-violet: #6d5bd0;

  /* Data visualization roles */
  --skx-chart-series-own: var(--skx-primary);
  --skx-chart-series-1: #1d4ed8;
  --skx-chart-series-2: #6d28d9;
  --skx-chart-series-3: var(--skx-teal);
  --skx-chart-series-4: #a14a00;
  --skx-chart-series-5: #be123c;
  --skx-chart-series-6: #0369a1;
  --skx-chart-series-7: #a21caf;
  --skx-chart-series-8: #4d7c0f;
  --skx-chart-series-9: #8b5e34;
  --skx-chart-event-positive: var(--skx-success);
  --skx-chart-event-negative: var(--skx-danger);
  --skx-chart-event-mixed: var(--skx-warning);
  --skx-flag-at-red: #d62828;
  --skx-flag-neutral: #ffffff;
  --skx-flag-de-black: #161616;
  --skx-flag-de-red: #d62828;
  --skx-flag-de-gold: #f2c94c;

  --skx-shell-bg: #e5ebf4;
  --skx-bg: var(--skx-panel-bg);
  --skx-bg-strong: var(--skx-panel-muted);
  --skx-focus-ring: #1e63d4;
  --skx-disabled-opacity: 0.56;
  --skx-shadow-card: 0 1px 3px rgba(17, 29, 49, 0.08);
  --skx-shadow-raised: 0 12px 32px rgba(17, 29, 49, 0.1), 0 2px 8px rgba(17, 29, 49, 0.05);
  --skx-shadow-float: 0 24px 64px rgba(17, 29, 49, 0.18);

  /* Bootstrap semantic mapping */
  --bs-body-font-family: var(--skx-font-sans);
  --bs-body-font-size: var(--skx-type-body);
  --bs-body-line-height: var(--skx-leading-body);
  --bs-body-color: var(--skx-text);
  --bs-body-color-rgb: 41, 56, 77;
  --bs-body-bg: var(--skx-app-bg);
  --bs-body-bg-rgb: 237, 242, 248;
  --bs-emphasis-color: var(--skx-text-strong);
  --bs-emphasis-color-rgb: 17, 29, 49;
  --bs-secondary-color: var(--skx-text-muted);
  --bs-secondary-color-rgb: 99, 115, 138;
  --bs-secondary: var(--skx-text-muted);
  --bs-secondary-rgb: 99, 115, 138;
  --bs-light: var(--skx-panel-muted);
  --bs-light-rgb: 244, 247, 251;
  --bs-dark: var(--skx-text-strong);
  --bs-dark-rgb: 17, 29, 49;
  --bs-tertiary-bg: var(--skx-panel-muted);
  --bs-tertiary-bg-rgb: 244, 247, 251;
  --bs-primary: var(--skx-primary);
  --bs-primary-rgb: 36, 87, 245;
  --bs-success: var(--skx-success);
  --bs-success-rgb: 22, 135, 95;
  --bs-info: var(--skx-blue);
  --bs-info-rgb: 47, 111, 237;
  --bs-warning: var(--skx-amber);
  --bs-warning-rgb: 183, 121, 31;
  --bs-danger: var(--skx-red);
  --bs-danger-rgb: 194, 65, 75;
  --bs-primary-text-emphasis: color-mix(in srgb, var(--skx-primary) 72%, var(--skx-text-strong));
  --bs-secondary-text-emphasis: var(--skx-text-strong);
  --bs-success-text-emphasis: color-mix(in srgb, var(--skx-success) 72%, var(--skx-text-strong));
  --bs-info-text-emphasis: color-mix(in srgb, var(--skx-info) 72%, var(--skx-text-strong));
  --bs-warning-text-emphasis: color-mix(in srgb, var(--skx-warning) 68%, var(--skx-text-strong));
  --bs-danger-text-emphasis: color-mix(in srgb, var(--skx-danger) 72%, var(--skx-text-strong));
  --bs-light-text-emphasis: var(--skx-text);
  --bs-dark-text-emphasis: var(--skx-text-strong);
  --bs-primary-bg-subtle: color-mix(in srgb, var(--skx-primary) 12%, var(--skx-panel-bg));
  --bs-secondary-bg-subtle: var(--skx-panel-muted);
  --bs-success-bg-subtle: color-mix(in srgb, var(--skx-success) 12%, var(--skx-panel-bg));
  --bs-info-bg-subtle: color-mix(in srgb, var(--skx-info) 12%, var(--skx-panel-bg));
  --bs-warning-bg-subtle: color-mix(in srgb, var(--skx-warning) 14%, var(--skx-panel-bg));
  --bs-danger-bg-subtle: color-mix(in srgb, var(--skx-danger) 12%, var(--skx-panel-bg));
  --bs-light-bg-subtle: var(--skx-panel-bg);
  --bs-dark-bg-subtle: color-mix(in srgb, var(--skx-text-strong) 12%, var(--skx-panel-bg));
  --bs-primary-border-subtle: color-mix(in srgb, var(--skx-primary) 38%, var(--skx-panel-bg));
  --bs-secondary-border-subtle: var(--skx-border-soft);
  --bs-success-border-subtle: color-mix(in srgb, var(--skx-success) 38%, var(--skx-panel-bg));
  --bs-info-border-subtle: color-mix(in srgb, var(--skx-info) 38%, var(--skx-panel-bg));
  --bs-warning-border-subtle: color-mix(in srgb, var(--skx-warning) 42%, var(--skx-panel-bg));
  --bs-danger-border-subtle: color-mix(in srgb, var(--skx-danger) 38%, var(--skx-panel-bg));
  --bs-light-border-subtle: var(--skx-border-soft);
  --bs-dark-border-subtle: var(--skx-border-strong);
  --bs-form-valid-color: var(--skx-success);
  --bs-form-valid-border-color: var(--skx-success);
  --bs-form-invalid-color: var(--skx-danger);
  --bs-form-invalid-border-color: var(--skx-danger);
  --bs-link-color: var(--skx-primary);
  --bs-link-hover-color: var(--skx-primary-hover);
  --bs-border-color: var(--skx-border-soft);
  --bs-border-color-translucent: var(--skx-border-soft);
  --bs-border-radius: var(--skx-radius-control);
  --bs-border-radius-sm: var(--skx-radius-micro);
  --bs-border-radius-lg: var(--skx-radius-panel);
  --bs-focus-ring-color: var(--skx-focus-ring);
  --bs-box-shadow-sm: var(--skx-shadow-card);
  --bs-box-shadow: var(--skx-shadow-card);
  --bs-box-shadow-lg: var(--skx-shadow-float);
}

[data-bs-theme="dark"],
:root[data-theme="dark"],
body.cs-theme-dark {
  color-scheme: dark;
  --skx-app-bg: #070d19;
  --skx-panel-bg: #111d31;
  --skx-panel-muted: #0e1829;
  --skx-panel-raised: #172640;
  --skx-text: #dce4f1;
  --skx-text-strong: #f7f9fc;
  --skx-text-muted: #93a4bb;
  --skx-border-soft: #22324a;
  --skx-border-strong: #354966;
  --skx-control-border: #607a9d;
  --skx-primary: #6c8cff;
  --skx-primary-hover: #86a1ff;
  --skx-primary-active: #5575ed;
  --skx-primary-soft: #172754;
  --skx-brand-deep: #091a43;
  --skx-brand-bright: #86a2ff;
  --skx-on-primary: #071126;
  --skx-on-success: #071126;
  --skx-on-danger: #071126;
  --skx-blue: #79a5ff;
  --skx-amber: #f59e0b;
  --skx-red: #f87171;
  --skx-success: #3dd68c;
  --skx-teal: #5eead4;
  --skx-violet: #a89bf4;
  --skx-chart-series-1: #60a5fa;
  --skx-chart-series-2: #a78bfa;
  --skx-chart-series-4: #fdba74;
  --skx-chart-series-5: #fb7185;
  --skx-chart-series-6: #38bdf8;
  --skx-chart-series-7: #f0abfc;
  --skx-chart-series-8: #a3e635;
  --skx-chart-series-9: #d6a77a;
  --skx-shell-bg: #0b1424;
  --skx-focus-ring: #8cb8ff;
  --skx-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.28);
  --skx-shadow-raised: 0 16px 38px rgba(0, 0, 0, 0.34), 0 2px 8px rgba(0, 0, 0, 0.24);
  --skx-shadow-float: 0 28px 72px rgba(0, 0, 0, 0.5);
  --bs-body-color-rgb: 220, 228, 241;
  --bs-body-bg-rgb: 7, 13, 25;
  --bs-emphasis-color-rgb: 247, 249, 252;
  --bs-secondary-color-rgb: 147, 164, 187;
  --bs-secondary-rgb: 147, 164, 187;
  --bs-light-rgb: 14, 24, 41;
  --bs-dark-rgb: 247, 249, 252;
  --bs-tertiary-bg-rgb: 14, 24, 41;
  --bs-primary-rgb: 108, 140, 255;
  --bs-success-rgb: 61, 214, 140;
  --bs-info-rgb: 121, 165, 255;
  --bs-warning-rgb: 245, 158, 11;
  --bs-danger-rgb: 248, 113, 113;
  --bs-primary-text-emphasis: color-mix(in srgb, var(--skx-primary) 72%, var(--skx-text-strong));
  --bs-secondary-text-emphasis: var(--skx-text-strong);
  --bs-success-text-emphasis: color-mix(in srgb, var(--skx-success) 72%, var(--skx-text-strong));
  --bs-info-text-emphasis: color-mix(in srgb, var(--skx-info) 72%, var(--skx-text-strong));
  --bs-warning-text-emphasis: color-mix(in srgb, var(--skx-warning) 68%, var(--skx-text-strong));
  --bs-danger-text-emphasis: color-mix(in srgb, var(--skx-danger) 72%, var(--skx-text-strong));
  --bs-light-text-emphasis: var(--skx-text);
  --bs-dark-text-emphasis: var(--skx-text-strong);
  --bs-primary-bg-subtle: color-mix(in srgb, var(--skx-primary) 12%, var(--skx-panel-bg));
  --bs-secondary-bg-subtle: var(--skx-panel-muted);
  --bs-success-bg-subtle: color-mix(in srgb, var(--skx-success) 12%, var(--skx-panel-bg));
  --bs-info-bg-subtle: color-mix(in srgb, var(--skx-info) 12%, var(--skx-panel-bg));
  --bs-warning-bg-subtle: color-mix(in srgb, var(--skx-warning) 14%, var(--skx-panel-bg));
  --bs-danger-bg-subtle: color-mix(in srgb, var(--skx-danger) 12%, var(--skx-panel-bg));
  --bs-light-bg-subtle: var(--skx-panel-bg);
  --bs-dark-bg-subtle: color-mix(in srgb, var(--skx-text-strong) 12%, var(--skx-panel-bg));
  --bs-primary-border-subtle: color-mix(in srgb, var(--skx-primary) 38%, var(--skx-panel-bg));
  --bs-secondary-border-subtle: var(--skx-border-soft);
  --bs-success-border-subtle: color-mix(in srgb, var(--skx-success) 38%, var(--skx-panel-bg));
  --bs-info-border-subtle: color-mix(in srgb, var(--skx-info) 38%, var(--skx-panel-bg));
  --bs-warning-border-subtle: color-mix(in srgb, var(--skx-warning) 42%, var(--skx-panel-bg));
  --bs-danger-border-subtle: color-mix(in srgb, var(--skx-danger) 38%, var(--skx-panel-bg));
  --bs-light-border-subtle: var(--skx-border-soft);
  --bs-dark-border-subtle: var(--skx-border-strong);
  --bs-form-valid-color: var(--skx-success);
  --bs-form-valid-border-color: var(--skx-success);
  --bs-form-invalid-color: var(--skx-danger);
  --bs-form-invalid-border-color: var(--skx-danger);
}

/* Global foundation */

html {
  min-width: 0;
  background: var(--skx-app-bg);
}

body {
  min-width: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background-color: var(--skx-app-bg);
  background-image: radial-gradient(
    circle at 86% -12%,
    color-mix(in srgb, var(--skx-primary) 8%, transparent),
    transparent min(52rem, 72vw)
  );
  background-attachment: fixed;
  color: var(--skx-text);
  font-family: var(--skx-font-sans);
  font-size: var(--skx-type-body);
  line-height: var(--skx-leading-body);
  letter-spacing: 0;
  text-rendering: optimizeLegibility;
}

body.auth-page {
  display: grid;
  min-height: 100vh;
  min-height: 100dvh;
  align-items: safe center;
  justify-items: center;
  padding: var(--skx-page-padding);
  background-image:
    radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--skx-brand-bright) 18%, transparent), transparent 32rem),
    radial-gradient(circle at 92% 92%, color-mix(in srgb, var(--skx-success) 9%, transparent), transparent 34rem),
    linear-gradient(145deg, var(--skx-app-bg), color-mix(in srgb, var(--skx-brand-deep) 8%, var(--skx-app-bg)));
}

[hidden],
.hidden,
.is-hidden {
  display: none !important;
}

:where(a, button, input, select, textarea, summary, [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: var(--skx-focus-width) solid var(--skx-focus-ring);
  outline-offset: var(--skx-space-1);
}

:where([aria-disabled="true"], :disabled) {
  cursor: not-allowed;
  opacity: var(--skx-disabled-opacity);
}

a {
  text-underline-offset: var(--skx-space-1);
}

h1,
.page-title,
.stitch-dashboard-title {
  color: var(--skx-text-strong);
  font-family: var(--skx-font-display);
  font-size: var(--skx-type-page-title);
  font-weight: var(--skx-weight-bold);
  letter-spacing: -0.035em;
  line-height: var(--skx-leading-tight);
}

h2,
.section-title,
.god-section-title {
  color: var(--skx-text-strong);
  font-size: var(--skx-type-section-title);
  font-weight: var(--skx-weight-bold);
  letter-spacing: -0.025em;
  line-height: var(--skx-leading-heading);
}

h3,
h4,
.panel-title {
  color: var(--skx-text-strong);
  font-size: var(--skx-type-panel-title);
  font-weight: var(--skx-weight-bold);
  letter-spacing: -0.018em;
  line-height: var(--skx-leading-heading);
}

.skx-type-page-title {
  font-size: var(--skx-type-page-title);
  letter-spacing: -0.035em;
  line-height: var(--skx-leading-tight);
}

.skx-type-section-title {
  font-size: var(--skx-type-section-title);
  letter-spacing: -0.025em;
  line-height: var(--skx-leading-heading);
}

.skx-type-panel-title {
  font-size: var(--skx-type-panel-title);
  letter-spacing: -0.018em;
  line-height: var(--skx-leading-heading);
}

.skx-type-body {
  font-size: var(--skx-type-body);
  line-height: var(--skx-leading-body);
}

.skx-type-dense {
  font-size: var(--skx-type-dense);
  line-height: var(--skx-leading-dense);
}

.skx-type-meta {
  font-size: var(--skx-type-meta);
  line-height: var(--skx-leading-dense);
}

.skx-type-metric {
  font-size: var(--skx-type-metric);
  line-height: var(--skx-leading-tight);
}

.skx-type-display {
  font-family: var(--skx-font-display);
  font-size: var(--skx-type-display);
  letter-spacing: -0.045em;
  line-height: var(--skx-leading-tight);
}

.small,
small,
.muted-small,
.meta,
.form-text {
  font-size: var(--skx-type-meta);
}

.muted,
.muted-small,
.text-muted,
.sub {
  color: var(--skx-text-muted);
}

code,
pre,
kbd,
samp,
.font-monospace {
  font-family: var(--skx-font-mono);
}

pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Bootstrap brand mapping */

.btn {
  --bs-btn-font-family: var(--skx-font-sans);
  --bs-btn-font-size: var(--skx-type-dense);
  --bs-btn-font-weight: var(--skx-weight-semibold);
  --bs-btn-padding-y: var(--skx-space-2);
  --bs-btn-padding-x: var(--skx-space-3);
  --bs-btn-border-radius: var(--skx-radius-control);
  min-height: var(--skx-control-md);
  align-items: center;
  justify-content: center;
  letter-spacing: 0;
  transition:
    transform var(--skx-motion-fast) var(--skx-ease-standard),
    color var(--skx-motion-fast) var(--skx-ease-standard),
    background-color var(--skx-motion-fast) var(--skx-ease-standard),
    border-color var(--skx-motion-fast) var(--skx-ease-standard),
    box-shadow var(--skx-motion-fast) var(--skx-ease-standard);
}

@media (hover: hover) {
  .btn:not(:disabled):not(.disabled):hover {
    transform: translateY(calc(var(--skx-border-width) * -1));
  }
}

.btn-sm,
.compact-btn {
  min-height: var(--skx-control-sm);
  font-size: var(--skx-type-meta);
}

.btn-lg {
  min-height: var(--skx-control-lg);
}

.btn-primary {
  --bs-btn-color: var(--skx-on-primary);
  --bs-btn-bg: var(--skx-primary);
  --bs-btn-border-color: var(--skx-primary);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
  --bs-btn-hover-color: var(--skx-on-primary);
  --bs-btn-hover-bg: var(--skx-primary-hover);
  --bs-btn-hover-border-color: var(--skx-primary-hover);
  --bs-btn-active-color: var(--skx-on-primary);
  --bs-btn-active-bg: var(--skx-primary-active);
  --bs-btn-active-border-color: var(--skx-primary-active);
  --bs-btn-disabled-color: var(--skx-on-primary);
  --bs-btn-disabled-bg: var(--skx-primary);
  --bs-btn-disabled-border-color: var(--skx-primary);
  box-shadow: var(--skx-shadow-card);
}

.btn-secondary {
  --bs-btn-color: var(--skx-text);
  --bs-btn-bg: var(--skx-panel-muted);
  --bs-btn-border-color: var(--skx-border-strong);
  --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb);
  --bs-btn-hover-color: var(--skx-text-strong);
  --bs-btn-hover-bg: color-mix(in srgb, var(--skx-text-muted) 12%, var(--skx-panel-muted));
  --bs-btn-hover-border-color: var(--skx-text-muted);
  --bs-btn-active-color: var(--skx-text-strong);
  --bs-btn-active-bg: color-mix(in srgb, var(--skx-text-muted) 18%, var(--skx-panel-muted));
  --bs-btn-active-border-color: var(--skx-text-muted);
  --bs-btn-disabled-color: var(--skx-text);
  --bs-btn-disabled-bg: var(--skx-panel-muted);
  --bs-btn-disabled-border-color: var(--skx-border-soft);
}

.btn-danger {
  --bs-btn-color: var(--skx-on-danger);
  --bs-btn-bg: var(--skx-danger);
  --bs-btn-border-color: var(--skx-danger);
  --bs-btn-focus-shadow-rgb: var(--bs-danger-rgb);
  --bs-btn-hover-color: var(--skx-on-danger);
  --bs-btn-hover-bg: color-mix(in srgb, var(--skx-danger) 84%, var(--skx-text-strong));
  --bs-btn-hover-border-color: color-mix(in srgb, var(--skx-danger) 84%, var(--skx-text-strong));
  --bs-btn-active-color: var(--skx-on-danger);
  --bs-btn-active-bg: color-mix(in srgb, var(--skx-danger) 72%, var(--skx-text-strong));
  --bs-btn-active-border-color: color-mix(in srgb, var(--skx-danger) 72%, var(--skx-text-strong));
  --bs-btn-disabled-color: var(--skx-on-danger);
  --bs-btn-disabled-bg: var(--skx-danger);
  --bs-btn-disabled-border-color: var(--skx-danger);
}

.btn-outline-primary {
  --bs-btn-color: var(--skx-primary);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--skx-primary);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
  --bs-btn-hover-color: var(--skx-on-primary);
  --bs-btn-hover-bg: var(--skx-primary);
  --bs-btn-hover-border-color: var(--skx-primary);
  --bs-btn-active-color: var(--skx-on-primary);
  --bs-btn-active-bg: var(--skx-primary-active);
  --bs-btn-active-border-color: var(--skx-primary-active);
  --bs-btn-disabled-color: var(--skx-primary);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--skx-primary);
}

.btn-outline-secondary {
  --bs-btn-color: var(--skx-text);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--skx-border-strong);
  --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb);
  --bs-btn-hover-color: var(--skx-text-strong);
  --bs-btn-hover-bg: var(--skx-panel-muted);
  --bs-btn-hover-border-color: var(--skx-border-strong);
  --bs-btn-active-color: var(--skx-text-strong);
  --bs-btn-active-bg: var(--skx-panel-muted);
  --bs-btn-active-border-color: var(--skx-primary);
  --bs-btn-disabled-color: var(--skx-text-muted);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--skx-border-soft);
}

.btn-outline-success {
  --bs-btn-color: var(--skx-success);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--skx-success);
  --bs-btn-focus-shadow-rgb: var(--bs-success-rgb);
  --bs-btn-hover-color: var(--skx-on-success);
  --bs-btn-hover-bg: var(--skx-success);
  --bs-btn-hover-border-color: var(--skx-success);
  --bs-btn-active-color: var(--skx-on-success);
  --bs-btn-active-bg: color-mix(in srgb, var(--skx-success) 76%, var(--skx-text-strong));
  --bs-btn-active-border-color: color-mix(in srgb, var(--skx-success) 76%, var(--skx-text-strong));
  --bs-btn-disabled-color: var(--skx-success);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--skx-success);
}

.btn-outline-danger {
  --bs-btn-color: var(--skx-danger);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--skx-danger);
  --bs-btn-focus-shadow-rgb: var(--bs-danger-rgb);
  --bs-btn-hover-color: var(--skx-on-danger);
  --bs-btn-hover-bg: var(--skx-danger);
  --bs-btn-hover-border-color: var(--skx-danger);
  --bs-btn-active-color: var(--skx-on-danger);
  --bs-btn-active-bg: color-mix(in srgb, var(--skx-danger) 72%, var(--skx-text-strong));
  --bs-btn-active-border-color: color-mix(in srgb, var(--skx-danger) 72%, var(--skx-text-strong));
  --bs-btn-disabled-color: var(--skx-danger);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--skx-danger);
}

.btn-link {
  --bs-btn-color: var(--skx-primary);
  --bs-btn-hover-color: var(--skx-primary-hover);
}

.form-control,
.form-select {
  min-height: var(--skx-control-md);
  border-color: var(--skx-control-border);
  border-radius: var(--skx-radius-control);
  background-color: var(--skx-panel-raised);
  color: var(--skx-text);
  font-size: var(--skx-type-dense);
}

.form-control:hover:not(:disabled):not([readonly]),
.form-select:hover:not(:disabled) {
  border-color: var(--skx-border-strong);
}

textarea.form-control {
  min-height: auto;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--skx-primary);
  box-shadow: 0 0 0 var(--skx-focus-width) var(--skx-focus-ring);
}

.input-group-text {
  border-color: var(--skx-control-border);
  background: var(--skx-panel-muted);
  color: var(--skx-text-muted);
}

.form-label,
.field > label,
.field > .label {
  color: var(--skx-text-strong);
  font-size: var(--skx-type-dense);
  font-weight: var(--skx-weight-semibold);
}

.table {
  --bs-table-color: var(--skx-text);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--skx-border-soft);
  --bs-table-hover-bg: var(--skx-panel-muted);
  --bs-table-striped-bg: color-mix(in srgb, var(--skx-panel-muted) 72%, transparent);
  margin-bottom: 0;
  font-size: var(--skx-type-dense);
}

.table > :not(caption) > * > * {
  padding: var(--skx-table-cell-y) var(--skx-table-cell-x);
}

.table > thead > tr > th {
  background: var(--skx-panel-muted);
  color: var(--skx-text-muted);
  font-size: var(--skx-type-meta);
  font-weight: var(--skx-weight-semibold);
  letter-spacing: 0.045em;
  line-height: var(--skx-leading-dense);
}

.badge {
  font-size: var(--skx-type-meta);
  font-weight: var(--skx-weight-semibold);
  line-height: var(--skx-leading-dense);
}

.card {
  --bs-card-spacer-y: var(--skx-space-4);
  --bs-card-spacer-x: var(--skx-space-4);
  --bs-card-title-spacer-y: var(--skx-space-2);
  --bs-card-border-width: var(--skx-border-width);
  --bs-card-border-color: var(--skx-border-soft);
  --bs-card-border-radius: var(--skx-radius-panel);
  --bs-card-cap-padding-y: var(--skx-space-3);
  --bs-card-cap-padding-x: var(--skx-space-4);
  --bs-card-cap-bg: var(--skx-panel-muted);
  --bs-card-cap-color: var(--skx-text-strong);
  --bs-card-color: var(--skx-text);
  --bs-card-bg: var(--skx-panel-raised);
  box-shadow: var(--skx-shadow-card);
  transition:
    border-color var(--skx-motion-fast) var(--skx-ease-standard),
    box-shadow var(--skx-motion-fast) var(--skx-ease-standard);
}

.list-group {
  --bs-list-group-color: var(--skx-text);
  --bs-list-group-bg: var(--skx-panel-bg);
  --bs-list-group-border-color: var(--skx-border-soft);
  --bs-list-group-action-color: var(--skx-text);
  --bs-list-group-action-hover-color: var(--skx-text-strong);
  --bs-list-group-action-hover-bg: var(--skx-panel-muted);
  --bs-list-group-action-active-color: var(--skx-text-strong);
  --bs-list-group-action-active-bg: color-mix(in srgb, var(--skx-primary) 12%, var(--skx-panel-bg));
  --bs-list-group-disabled-color: var(--skx-text-muted);
  --bs-list-group-disabled-bg: var(--skx-panel-muted);
  --bs-list-group-active-color: var(--skx-on-primary);
  --bs-list-group-active-bg: var(--skx-primary);
  --bs-list-group-active-border-color: var(--skx-primary);
}

.alert {
  --bs-alert-padding-x: var(--skx-space-4);
  --bs-alert-padding-y: var(--skx-space-3);
  border-radius: var(--skx-radius-control);
  font-size: var(--skx-type-dense);
}

.alert-primary {
  --bs-alert-color: var(--bs-primary-text-emphasis);
  --bs-alert-bg: var(--bs-primary-bg-subtle);
  --bs-alert-border-color: var(--bs-primary-border-subtle);
  --bs-alert-link-color: var(--bs-primary-text-emphasis);
}

.alert-secondary {
  --bs-alert-color: var(--skx-text);
  --bs-alert-bg: var(--bs-secondary-bg-subtle);
  --bs-alert-border-color: var(--bs-secondary-border-subtle);
  --bs-alert-link-color: var(--skx-text-strong);
}

.alert-success {
  --bs-alert-color: var(--bs-success-text-emphasis);
  --bs-alert-bg: var(--bs-success-bg-subtle);
  --bs-alert-border-color: var(--bs-success-border-subtle);
  --bs-alert-link-color: var(--bs-success-text-emphasis);
}

.alert-danger {
  --bs-alert-color: var(--bs-danger-text-emphasis);
  --bs-alert-bg: var(--bs-danger-bg-subtle);
  --bs-alert-border-color: var(--bs-danger-border-subtle);
  --bs-alert-link-color: var(--bs-danger-text-emphasis);
}

.alert-warning {
  --bs-alert-color: var(--bs-warning-text-emphasis);
  --bs-alert-bg: var(--bs-warning-bg-subtle);
  --bs-alert-border-color: var(--bs-warning-border-subtle);
  --bs-alert-link-color: var(--bs-warning-text-emphasis);
}

.alert-info {
  --bs-alert-color: var(--bs-info-text-emphasis);
  --bs-alert-bg: var(--bs-info-bg-subtle);
  --bs-alert-border-color: var(--bs-info-border-subtle);
  --bs-alert-link-color: var(--bs-info-text-emphasis);
}

.alert-light {
  --bs-alert-color: var(--skx-text);
  --bs-alert-bg: var(--skx-panel-muted);
  --bs-alert-border-color: var(--skx-border-soft);
  --bs-alert-link-color: var(--skx-text-strong);
}

.dropdown-menu {
  --bs-dropdown-bg: var(--skx-panel-raised);
  --bs-dropdown-border-color: var(--skx-border-soft);
  --bs-dropdown-link-color: var(--skx-text);
  --bs-dropdown-link-hover-color: var(--skx-text-strong);
  --bs-dropdown-link-hover-bg: var(--skx-panel-muted);
  --bs-dropdown-link-active-bg: color-mix(in srgb, var(--skx-primary) 14%, var(--skx-panel-bg));
  --bs-dropdown-link-active-color: var(--skx-primary);
  border-radius: var(--skx-radius-panel);
  box-shadow: var(--skx-shadow-float);
}

.modal-content,
.offcanvas {
  --bs-modal-bg: var(--skx-panel-raised);
  --bs-modal-border-color: var(--skx-border-soft);
  --bs-offcanvas-bg: var(--skx-panel-raised);
  --bs-offcanvas-border-color: var(--skx-border-soft);
  color: var(--skx-text);
}

.modal-content {
  border-radius: var(--skx-radius-overlay);
  box-shadow: var(--skx-shadow-float);
}

.nav-pills {
  --bs-nav-pills-link-active-bg: color-mix(in srgb, var(--skx-primary) 14%, var(--skx-panel-bg));
  --bs-nav-pills-link-active-color: var(--skx-primary);
}

.nav-link {
  color: var(--skx-text-muted);
  font-size: var(--skx-type-dense);
  font-weight: var(--skx-weight-medium);
}

.nav-link:hover,
.nav-link:focus {
  color: var(--skx-primary);
}

.step-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--skx-space-2);
}

/* Product shell and stable state hooks */

.skx-app-shell {
  min-width: 0;
  min-height: 100vh;
}

body.sekorix-workspace > .skx-app-shell {
  display: grid;
  grid-template-columns: minmax(0, var(--skx-sidebar-width)) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
}

body.sekorix-workspace > .skx-app-shell > .stitch-topbar-card {
  grid-row: 1;
  grid-column: 1 / -1;
}

body.sekorix-workspace > .skx-app-shell > .skx-sidebar {
  grid-row: 2;
  grid-column: 1;
}

body.sekorix-workspace > .skx-app-shell > .skx-main {
  grid-row: 2;
  grid-column: 2;
}

.skx-main,
.workspace-main,
.god-main,
.support-main {
  min-width: 0;
  padding: var(--skx-page-padding);
}

.skx-page {
  width: min(100%, var(--skx-content-standard));
  margin-inline: auto;
}

.skx-page-wide {
  width: min(100%, var(--skx-content-wide));
  margin-inline: auto;
}

.skx-section {
  display: grid;
  gap: var(--skx-section-gap);
  min-width: 0;
}

.skx-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--skx-space-4) var(--skx-space-6);
  min-width: 0;
}

.skx-page-header > :where(div, header) {
  min-width: 0;
}

.skx-page-title {
  min-width: 0;
  color: var(--skx-text-strong);
  font-family: var(--skx-font-display);
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.skx-page-summary {
  min-width: 0;
  max-width: var(--skx-content-reading);
  color: var(--skx-text-muted);
  line-height: var(--skx-leading-body);
  text-wrap: pretty;
}

.skx-page-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--skx-space-2);
  min-width: 0;
}

.skx-page-eyebrow {
  color: var(--skx-primary);
  font-size: var(--skx-type-meta);
  font-weight: var(--skx-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.skx-surface {
  min-width: 0;
  padding: var(--skx-panel-padding);
  border: var(--skx-border-width) solid var(--skx-border-soft);
  border-radius: var(--skx-radius-panel);
  background: var(--skx-panel-bg);
  box-shadow: var(--skx-shadow-card);
}

.skx-surface--subtle {
  background: var(--skx-panel-muted);
  box-shadow: none;
}

.skx-surface--raised {
  border-color: var(--skx-border-strong);
  background: var(--skx-panel-raised);
  box-shadow: var(--skx-shadow-raised);
}

.skx-surface--danger {
  border-color: color-mix(in srgb, var(--skx-danger) 38%, var(--skx-border-soft));
  background: color-mix(in srgb, var(--skx-danger) 7%, var(--skx-panel-raised));
}

.card.skx-surface:not(.card-body) {
  padding: 0;
}

.skx-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--skx-space-2);
  min-width: 0;
  padding: var(--skx-space-3);
  border: var(--skx-border-width) solid var(--skx-border-soft);
  border-radius: var(--skx-radius-panel);
  background: color-mix(in srgb, var(--skx-panel-raised) 94%, transparent);
  box-shadow: var(--skx-shadow-card);
  backdrop-filter: blur(var(--skx-space-2));
}

.card-header.skx-toolbar {
  padding: var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);
  border: 0;
  border-bottom: var(--skx-border-width) solid var(--skx-border-soft);
  border-radius: calc(var(--skx-radius-panel) - var(--skx-border-width)) calc(var(--skx-radius-panel) - var(--skx-border-width)) 0 0;
  background: var(--skx-panel-muted);
  box-shadow: none;
  backdrop-filter: none;
}

.skx-meta-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: var(--skx-space-3) var(--skx-space-6);
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.skx-meta-list :where(dt, .skx-meta-label) {
  margin: 0 0 var(--skx-space-1);
  color: var(--skx-text-muted);
  font-size: var(--skx-type-meta);
  font-weight: var(--skx-weight-semibold);
}

.skx-meta-list :where(dd, .skx-meta-value) {
  min-width: 0;
  margin: 0;
  color: var(--skx-text-strong);
  overflow-wrap: anywhere;
}

.skx-split-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.34fr);
  align-items: start;
  gap: var(--skx-section-gap);
  min-width: 0;
}

.support-space-page .skx-split-workspace,
.stitch-support-thread-workspace.skx-split-workspace,
.settings-accounts-panel.skx-split-workspace {
  grid-template-columns: minmax(18rem, 0.34fr) minmax(0, 1fr);
}

.skx-metric-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: var(--skx-space-3);
  min-width: 0;
}

.skx-metric {
  position: relative;
  min-width: 0;
  padding: var(--skx-panel-padding);
  overflow: hidden;
  border: var(--skx-border-width) solid var(--skx-border-soft);
  border-radius: var(--skx-radius-panel);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--skx-primary-soft) 58%, transparent), transparent 62%),
    var(--skx-panel-raised);
  box-shadow: var(--skx-shadow-card);
}

.skx-metric-label {
  margin: 0;
  color: var(--skx-text-muted);
  font-size: var(--skx-type-meta);
  font-weight: var(--skx-weight-semibold);
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.skx-metric-value {
  color: var(--skx-text-strong);
  font-variant-numeric: tabular-nums;
}

.skx-metric-delta {
  color: var(--skx-text-muted);
  font-size: var(--skx-type-meta);
  font-weight: var(--skx-weight-medium);
}

.skx-empty-state {
  display: grid;
  min-height: calc(var(--skx-control-lg) * 5);
  place-items: center;
  align-content: center;
  gap: var(--skx-space-3);
  padding: var(--skx-section-gap) var(--skx-panel-padding);
  border: var(--skx-border-width) dashed var(--skx-control-border);
  border-radius: var(--skx-radius-panel);
  background: color-mix(in srgb, var(--skx-panel-muted) 88%, transparent);
  color: var(--skx-text-muted);
  text-align: center;
}

.skx-empty-state > :where(h2, h3, h4, p) {
  max-width: var(--skx-content-reading);
  margin: 0;
}

.skx-empty-state > :where(.bi, svg) {
  color: var(--skx-primary);
  font-size: calc(var(--skx-icon-lg) + var(--skx-space-3));
}

.skx-empty-state--compact,
.skx-empty-state:is(
  .run-empty-inline,
  .stats-card-empty,
  .checks-empty,
  .accounts-inbox-empty-action,
  .competitor-empty-state,
  .prompt-empty-state,
  .quick-empty,
  .quick-prompt-result-detail-empty,
  .run-model-overview-empty,
  .stitch-insight-empty,
  .stitch-support-thread-empty
) {
  min-height: 0;
  place-items: start;
  align-content: start;
  gap: var(--skx-space-2);
  padding: var(--skx-space-3);
  text-align: left;
}

.skx-auth-shell {
  display: grid;
  grid-template-columns: minmax(18rem, 0.78fr) minmax(0, 1.22fr);
  width: min(100%, var(--skx-content-standard));
  min-height: min(46rem, calc(100vh - (var(--skx-page-padding) * 2)));
  min-height: min(46rem, calc(100dvh - (var(--skx-page-padding) * 2)));
  margin: 0 auto;
  border: var(--skx-border-width) solid var(--skx-border-soft);
  border-radius: var(--skx-radius-overlay);
  background: var(--skx-panel-raised);
  box-shadow: var(--skx-shadow-float);
}

.skx-auth-brand,
.skx-auth-form {
  min-width: 0;
  padding: clamp(var(--skx-space-6), 4vw, var(--skx-space-12));
}

.skx-auth-brand {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--skx-section-gap);
  overflow: hidden;
  border-radius: var(--skx-radius-overlay) 0 0 var(--skx-radius-overlay);
  background:
    radial-gradient(circle at 78% 16%, color-mix(in srgb, var(--skx-brand-bright) 54%, transparent), transparent 15rem),
    linear-gradient(155deg, var(--skx-brand-deep), color-mix(in srgb, var(--skx-brand-deep) 76%, var(--skx-app-bg)));
  color: var(--skx-on-brand);
}

.skx-auth-brand-mark img {
  filter: brightness(0) invert(1);
}

.skx-auth-brand-signal {
  display: inline-grid;
  width: calc(var(--skx-control-lg) * 2);
  height: calc(var(--skx-control-lg) * 2);
  place-items: center;
  align-self: center;
  border: var(--skx-border-width) solid color-mix(in srgb, var(--skx-on-brand) 34%, transparent);
  border-radius: var(--skx-radius-overlay);
  background: color-mix(in srgb, var(--skx-on-brand) 11%, transparent);
  box-shadow: var(--skx-shadow-raised);
  color: var(--skx-on-brand);
  font-size: calc(var(--skx-icon-lg) + var(--skx-space-4));
}

.skx-auth-form {
  display: grid;
  align-content: center;
  background: var(--skx-panel-raised);
  border-radius: 0 var(--skx-radius-overlay) var(--skx-radius-overlay) 0;
}

body.sekorix-workspace .skx-page {
  width: min(100%, var(--skx-content-wide));
}

.skx-sidebar {
  --bs-body-bg-rgb: 9, 26, 67;
  --bs-body-color-rgb: 245, 248, 255;
  --bs-secondary-color-rgb: 184, 199, 229;
  --bs-border-color: color-mix(in srgb, var(--skx-on-brand) 14%, transparent);
  --bs-offcanvas-bg: var(--skx-brand-deep);
  --bs-offcanvas-color: var(--skx-on-brand);
  --bs-nav-pills-link-active-bg: color-mix(in srgb, var(--skx-on-brand) 15%, transparent);
  --bs-nav-pills-link-active-color: var(--skx-on-brand);
  border-color: color-mix(in srgb, var(--skx-on-brand) 14%, transparent);
  background-color: var(--skx-brand-deep);
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--skx-brand-bright) 14%, var(--skx-brand-deep)), var(--skx-brand-deep) 34%);
  color: var(--skx-on-brand);
}

.skx-sidebar .nav-link {
  border-radius: var(--skx-radius-control);
  color: color-mix(in srgb, var(--skx-on-brand) 74%, transparent);
}

.skx-sidebar .nav-link:hover,
.skx-sidebar .nav-link:focus-visible {
  background: color-mix(in srgb, var(--skx-on-brand) 9%, transparent);
  color: var(--skx-on-brand);
}

.skx-sidebar .nav-link.active,
.skx-sidebar .nav-link.is-active {
  box-shadow: inset var(--skx-focus-width) 0 0 var(--skx-brand-bright);
}

.skx-sidebar .btn-primary {
  --bs-btn-color: var(--skx-brand-deep);
  --bs-btn-bg: var(--skx-on-brand);
  --bs-btn-border-color: var(--skx-on-brand);
  --bs-btn-hover-color: var(--skx-brand-deep);
  --bs-btn-hover-bg: color-mix(in srgb, var(--skx-on-brand) 90%, var(--skx-brand-bright));
  --bs-btn-hover-border-color: color-mix(in srgb, var(--skx-on-brand) 90%, var(--skx-brand-bright));
  --bs-btn-active-color: var(--skx-brand-deep);
  --bs-btn-active-bg: color-mix(in srgb, var(--skx-on-brand) 88%, var(--skx-brand-bright));
  --bs-btn-active-border-color: var(--skx-on-brand);
}

.skx-sidebar .card {
  --bs-card-bg: color-mix(in srgb, var(--skx-on-brand) 8%, transparent);
  --bs-card-border-color: color-mix(in srgb, var(--skx-on-brand) 16%, transparent);
  --bs-card-color: var(--skx-on-brand);
  box-shadow: none;
}

.skx-sidebar .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

.stitch-topbar-card {
  --bs-body-bg-rgb: 9, 26, 67;
  --bs-body-color-rgb: 245, 248, 255;
  --bs-border-color: color-mix(in srgb, var(--skx-on-brand) 14%, transparent);
  background-color: var(--skx-brand-deep);
  background-image: linear-gradient(105deg, var(--skx-brand-deep), color-mix(in srgb, var(--skx-brand-deep) 72%, var(--skx-primary)));
  color: var(--skx-on-brand);
  box-shadow: var(--skx-shadow-raised);
}

.stitch-topbar-card .stitch-topbar-logo-image {
  filter: brightness(0) invert(1);
}

.stitch-topbar-card .btn-outline-secondary {
  --bs-btn-color: var(--skx-on-brand);
  --bs-btn-border-color: color-mix(in srgb, var(--skx-on-brand) 28%, transparent);
  --bs-btn-hover-color: var(--skx-on-brand);
  --bs-btn-hover-bg: color-mix(in srgb, var(--skx-on-brand) 12%, transparent);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--skx-on-brand) 48%, transparent);
  --bs-btn-active-color: var(--skx-on-brand);
  --bs-btn-active-bg: color-mix(in srgb, var(--skx-on-brand) 18%, transparent);
  --bs-btn-active-border-color: color-mix(in srgb, var(--skx-on-brand) 54%, transparent);
}

.stitch-topbar-card .theme-switch-icon {
  color: color-mix(in srgb, var(--skx-on-brand) 72%, transparent);
}

.skx-sticky-toolbar {
  position: sticky;
  top: 0;
  z-index: var(--skx-z-sticky);
  background: color-mix(in srgb, var(--skx-panel-bg) 94%, transparent);
  backdrop-filter: blur(var(--skx-space-2));
}

.section-panel {
  display: none;
}

.section-panel.active,
.section-panel.is-active {
  display: block;
}

body.god-mode-locked .requires-god-mode {
  display: none;
}

body:not(.god-mode-locked) #godModeGate {
  display: none;
}

.god-mode-gate {
  max-width: var(--skx-content-reading);
}

.god-brand img,
.navbar-brand img,
.stitch-topbar-logo-image {
  display: block;
  width: auto;
  max-height: var(--skx-control-sm);
}

.bi {
  font-size: var(--skx-icon-md);
  line-height: 1;
}

.god-icon,
.god-admin-avatar,
.god-hero-icon,
.god-section-icon,
.quick-run-detail-icon,
.model-icon {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  color: var(--skx-primary);
}

.god-icon,
.god-admin-avatar,
.model-icon {
  width: var(--skx-control-sm);
  height: var(--skx-control-sm);
}

.god-hero-icon {
  width: calc(var(--skx-control-lg) + var(--skx-space-5));
  height: calc(var(--skx-control-lg) + var(--skx-space-5));
}

.god-section-icon,
.quick-run-detail-icon {
  width: var(--skx-control-md);
  height: var(--skx-control-md);
}

:where(.god-icon, .god-admin-avatar, .god-hero-icon, .god-section-icon, .quick-run-detail-icon, .model-icon) svg,
.model-icon img {
  width: var(--skx-icon-md);
  height: var(--skx-icon-md);
  object-fit: contain;
}

:where(.god-icon, .god-admin-avatar, .god-section-icon, .quick-run-detail-icon, .model-icon) > .bi {
  font-size: var(--skx-icon-md);
}

.god-hero-icon > .bi {
  font-size: var(--skx-icon-lg);
}

.skx-model-icon {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  object-fit: contain;
}

.skx-model-icon-xs {
  width: calc(var(--skx-icon-sm) - var(--skx-space-1));
  height: calc(var(--skx-icon-sm) - var(--skx-space-1));
  flex-basis: calc(var(--skx-icon-sm) - var(--skx-space-1));
}

.skx-model-icon-sm {
  width: var(--skx-icon-sm);
  height: var(--skx-icon-sm);
  flex-basis: var(--skx-icon-sm);
}

.skx-model-icon-md {
  width: var(--skx-icon-lg);
  height: var(--skx-icon-lg);
  flex-basis: var(--skx-icon-lg);
}

.skx-model-icon-lg {
  width: calc(var(--skx-icon-lg) + var(--skx-space-2));
  height: calc(var(--skx-icon-lg) + var(--skx-space-2));
  flex-basis: calc(var(--skx-icon-lg) + var(--skx-space-2));
}

.theme-toggle {
  min-width: calc(var(--skx-control-md) + var(--skx-space-4));
  min-height: var(--skx-control-md);
}

.theme-switch-track {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: calc(var(--skx-control-md) + var(--skx-space-2));
  gap: var(--skx-space-1);
}

.theme-switch-icon {
  display: inline-grid;
  place-items: center;
  width: var(--skx-icon-sm);
  height: var(--skx-icon-sm);
  color: var(--skx-text-muted);
  font-size: var(--skx-type-meta);
}

.theme-switch-thumb {
  position: absolute;
  left: 0;
  width: var(--skx-icon-md);
  height: var(--skx-icon-md);
  border-radius: var(--skx-radius-circle);
  background: var(--skx-primary);
  box-shadow: var(--skx-shadow-card);
  transition: transform var(--skx-motion-standard) var(--skx-ease-standard);
}

[data-bs-theme="dark"] .theme-switch-thumb,
body.cs-theme-dark .theme-switch-thumb {
  transform: translateX(calc(var(--skx-control-md) - var(--skx-space-3)));
}

.account-logo-image,
.account-logo-preview-image {
  display: block;
  width: auto;
  max-width: min(100%, calc(var(--skx-sidebar-width) - var(--skx-space-10)));
  object-fit: contain;
}

.account-logo-preview-image {
  max-height: calc(var(--skx-control-lg) + var(--skx-control-lg));
}

/* Status, loading, and feedback primitives */

:where(
  .chip,
  .status-chip,
  .settings-status-chip,
  .stitch-support-status-chip,
  .quick-prompt-state,
  .quick-prompt-intent,
  .quick-run-detail-status,
  .kpi-chip,
  .competitor-trend-badge
) {
  --skx-status-color: var(--skx-text-muted);
  --skx-status-bg: var(--skx-panel-muted);
  --skx-status-border: var(--skx-border-soft);
  display: inline-flex;
  align-items: center;
  gap: var(--skx-space-1);
  max-width: 100%;
  padding: var(--skx-space-1) var(--skx-space-2);
  border: var(--skx-border-width) solid var(--skx-status-border);
  border-radius: var(--skx-radius-circle);
  background: var(--skx-status-bg);
  color: var(--skx-status-color);
  font-size: var(--skx-type-meta);
  font-weight: var(--skx-weight-semibold);
  line-height: var(--skx-leading-dense);
  overflow-wrap: anywhere;
}

:where(.status-fertig, .status-erfolgreich, .is-success, .ok) {
  --skx-status-color: var(--skx-success);
  --skx-status-bg: color-mix(in srgb, var(--skx-success) 12%, var(--skx-panel-bg));
  --skx-status-border: color-mix(in srgb, var(--skx-success) 32%, var(--skx-border-soft));
}

:where(.status-lauft, .status-running, .is-running, .is-info) {
  --skx-status-color: var(--skx-blue);
  --skx-status-bg: color-mix(in srgb, var(--skx-blue) 12%, var(--skx-panel-bg));
  --skx-status-border: color-mix(in srgb, var(--skx-blue) 32%, var(--skx-border-soft));
}

:where(.status-prufen, .status-teilweise, .is-review, .is-needs-review, .warn) {
  --skx-status-color: var(--skx-amber);
  --skx-status-bg: color-mix(in srgb, var(--skx-amber) 13%, var(--skx-panel-bg));
  --skx-status-border: color-mix(in srgb, var(--skx-amber) 34%, var(--skx-border-soft));
}

:where(.status-fehler, .status-abgebrochen, .is-error, .error) {
  --skx-status-color: var(--skx-red);
  --skx-status-bg: color-mix(in srgb, var(--skx-red) 12%, var(--skx-panel-bg));
  --skx-status-border: color-mix(in srgb, var(--skx-red) 32%, var(--skx-border-soft));
}

:where(.status-neu, .is-paused, .is-muted, .is-inactive) {
  --skx-status-color: var(--skx-text-muted);
  --skx-status-bg: var(--skx-panel-muted);
  --skx-status-border: var(--skx-border-soft);
}

.status-inline,
.stitch-status-inline,
.premium-ai-model-status-row {
  display: inline-flex;
  align-items: center;
  gap: var(--skx-space-2);
  min-width: 0;
  color: var(--skx-status-color, var(--skx-text));
  font-size: var(--skx-type-dense);
  font-weight: var(--skx-weight-semibold);
}

.stitch-status-dot,
.skx-status-dot,
.status-dot {
  display: inline-block;
  width: var(--skx-space-2);
  height: var(--skx-space-2);
  flex: 0 0 var(--skx-space-2);
  border-radius: var(--skx-radius-circle);
  background: currentColor;
}

.chip-spinner,
.status-spinner {
  display: inline-block;
  width: var(--skx-icon-sm);
  height: var(--skx-icon-sm);
  flex: 0 0 var(--skx-icon-sm);
  border: calc(var(--skx-border-width) + var(--skx-border-width)) solid currentColor;
  border-right-color: transparent;
  border-radius: var(--skx-radius-circle);
  animation: skx-spin var(--skx-motion-slow) linear infinite;
}

.cs-skeleton {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--skx-radius-micro);
  background: var(--skx-panel-muted);
  color: transparent;
}

.cs-skeleton::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--skx-panel-bg) 72%, transparent),
    transparent
  );
  content: "";
  transform: translateX(-100%);
  animation:
    skx-shimmer
    calc(
      var(--skx-motion-slow) + var(--skx-motion-slow) + var(--skx-motion-slow) +
        var(--skx-motion-slow) + var(--skx-motion-slow)
    )
    var(--skx-ease-standard) infinite;
}

.cs-skeleton-line {
  min-height: var(--skx-space-3);
}

.cs-skeleton-pill {
  width: calc(var(--skx-control-lg) + var(--skx-space-8));
  min-height: var(--skx-space-4);
  border-radius: var(--skx-radius-circle);
}

.cs-skeleton-chip {
  width: calc(var(--skx-control-lg) + var(--skx-space-6));
  min-height: var(--skx-control-sm);
}

.cs-skeleton-block {
  min-height: calc(var(--skx-control-lg) + var(--skx-control-lg) + var(--skx-control-lg));
}

.skx-placeholder-sm {
  min-height: calc(var(--skx-control-lg) + var(--skx-control-lg));
}

.skx-placeholder-md {
  min-height: calc(var(--skx-control-lg) + var(--skx-control-lg) + var(--skx-control-lg));
}

.skx-placeholder-lg {
  min-height: calc(
    var(--skx-control-lg) + var(--skx-control-lg) + var(--skx-control-lg) + var(--skx-control-lg)
  );
}

.is-loading,
.is-bulk-loading,
.busy {
  cursor: progress;
}

.prompt-bulk-tray.is-loading {
  opacity: var(--skx-disabled-opacity);
  pointer-events: none;
}

@keyframes skx-spin {
  to {
    transform: rotate(1turn);
  }
}

@keyframes skx-shimmer {
  to {
    transform: translateX(100%);
  }
}

/* Dashboard metrics and data density */

:where(.skx-metric, .stitch-kpi-card, .stitch-health-card) {
  min-width: 0;
  height: 100%;
}

.stitch-insight-card {
  min-width: 0;
}

.stitch-kpi-icon {
  display: inline-grid;
  width: var(--skx-control-lg);
  height: var(--skx-control-lg);
  place-items: center;
  border-radius: var(--skx-radius-control);
  background: color-mix(in srgb, var(--skx-primary) 12%, var(--skx-panel-bg));
  color: var(--skx-primary);
}

.stitch-kpi-icon.is-blue {
  background: color-mix(in srgb, var(--skx-blue) 12%, var(--skx-panel-bg));
  color: var(--skx-blue);
}

.stitch-kpi-icon.is-violet {
  background: color-mix(in srgb, var(--skx-violet) 12%, var(--skx-panel-bg));
  color: var(--skx-violet);
}

.stitch-kpi-copy > :where(p, span),
.stitch-health-card :where(p, .stitch-health-delta) {
  margin: 0;
  color: var(--skx-text-muted);
  font-size: var(--skx-type-meta);
}

.stitch-kpi-copy h3,
.stitch-health-card h3,
.stats-metric-value,
.stats-kpi-ring-value,
.skx-metric-value {
  margin: var(--skx-space-1) 0;
  color: var(--skx-text-strong);
  font-size: var(--skx-type-metric);
  font-weight: var(--skx-weight-bold);
  line-height: var(--skx-leading-tight);
}

.stitch-health-ring,
.stitch-health-donut {
  --skx-health-score: 0;
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: var(--skx-radius-circle);
  background: conic-gradient(
    var(--skx-success) calc(var(--skx-health-score) * 1%),
    var(--skx-panel-muted) 0
  );
  color: var(--skx-text-strong);
  font-size: var(--skx-type-dense);
  font-weight: var(--skx-weight-bold);
}

.stitch-health-ring {
  width: calc(var(--skx-control-lg) + var(--skx-space-2));
  height: calc(var(--skx-control-lg) + var(--skx-space-2));
}

.stitch-health-donut {
  width: calc(var(--skx-control-lg) + var(--skx-control-lg) + var(--skx-space-6));
  height: calc(var(--skx-control-lg) + var(--skx-control-lg) + var(--skx-space-6));
  margin-inline: auto;
}

.stitch-health-ring::before,
.stitch-health-donut::before {
  position: absolute;
  inset: var(--skx-space-2);
  border-radius: inherit;
  background: var(--skx-panel-bg);
  content: "";
}

.stitch-health-ring > *,
.stitch-health-donut > * {
  position: relative;
}

.stitch-health-legend,
.stitch-insight-body,
.stitch-next-checks-list {
  display: grid;
  gap: var(--skx-space-2);
}

.stitch-health-legend > span {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--skx-space-2);
  color: var(--skx-text-muted);
  font-size: var(--skx-type-meta);
}

.stitch-health-legend i {
  width: var(--skx-space-2);
  height: var(--skx-space-2);
  border-radius: var(--skx-radius-circle);
  background: var(--skx-text-muted);
}

.stitch-health-legend i.is-success {
  background: var(--skx-success);
}

.stitch-health-legend i.is-error {
  background: var(--skx-red);
}

.stitch-health-legend i.is-paused {
  background: var(--skx-amber);
}

.stitch-dashboard-table-wrap {
  max-height: min(72vh, 760px);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.stitch-dashboard-table-wrap thead {
  position: sticky;
  top: 0;
  z-index: var(--skx-z-sticky);
  background: var(--skx-panel-muted);
}

.stitch-dashboard-table-wrap tbody tr {
  transition: background-color var(--skx-motion-fast) var(--skx-ease-standard);
}

.stitch-dashboard-table-wrap tbody tr.is-selected {
  --bs-table-bg: color-mix(in srgb, var(--skx-primary) 9%, var(--skx-panel-bg));
}

.stitch-dashboard-status-cell,
.stitch-dashboard-placement-cell {
  white-space: nowrap;
}

.stitch-placement-value.is-empty {
  color: var(--skx-text-muted);
}

.stitch-status-inline.is-placement {
  color: var(--skx-primary);
}

.prompt-bulk-tray {
  position: sticky;
  bottom: var(--skx-space-3);
  z-index: var(--skx-z-sticky);
  border-color: color-mix(in srgb, var(--skx-primary) 35%, var(--skx-border-soft));
  box-shadow: var(--skx-shadow-float);
}

.stitch-insight-toggle,
.insight-toggle,
[data-insight-toggle] {
  display: inline-grid;
  place-items: center;
  width: clamp(28px, 2vw, 32px);
  height: clamp(28px, 2vw, 32px);
  flex: 0 0 clamp(28px, 2vw, 32px);
  border: var(--skx-border-width) solid var(--skx-border-soft);
  border-radius: var(--skx-radius-control);
  background: var(--skx-panel-bg);
  color: var(--skx-text);
  white-space: nowrap;
}

.stitch-insight-rail.is-collapsed {
  flex: 0 0 var(--skx-control-md);
  max-width: var(--skx-control-md);
}

.stitch-insight-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--skx-space-2);
}

.stitch-insight-head h2 {
  margin: 0;
  font-size: var(--skx-type-panel-title);
}

/* Charts and progress visualizations */

.stats-chart-wrap,
.visibility-chart-host,
.prompt-history-chart,
.stitch-mini-chart {
  position: relative;
  min-width: 0;
}

.stats-chart,
.visibility-chart-svg,
.stitch-mini-chart svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.stats-chart {
  min-height: calc(var(--skx-control-lg) + var(--skx-control-lg) + var(--skx-control-lg));
}

.stats-grid-line,
.stats-axis-line {
  stroke: var(--skx-border-soft);
  stroke-width: var(--skx-border-width);
}

.stats-axis,
.stats-label {
  fill: var(--skx-text-muted);
  font-family: var(--skx-font-sans);
  font-size: var(--skx-type-meta);
}

.stats-line,
.visibility-line {
  fill: none;
  stroke: var(--skx-primary);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: calc(var(--skx-border-width) + var(--skx-border-width));
}

.stats-dot,
.visibility-dot {
  fill: var(--skx-panel-bg);
  stroke: var(--skx-primary);
  stroke-width: calc(var(--skx-border-width) + var(--skx-border-width));
}

.stats-area,
.visibility-area {
  fill: color-mix(in srgb, var(--skx-primary) 14%, transparent);
}

.stats-bar,
.visibility-bar {
  fill: var(--skx-blue);
}

.stats-bar.is-own,
.visibility-bar.is-own {
  fill: var(--skx-primary);
}

.stitch-mini-chart-area {
  fill: color-mix(in srgb, var(--skx-primary) 16%, transparent);
}

.stitch-mini-chart-line {
  fill: none;
  stroke: var(--skx-primary);
  stroke-linecap: round;
  stroke-width: calc(var(--skx-border-width) + var(--skx-border-width));
}

.stats-tooltip,
.visibility-tooltip {
  position: absolute;
  z-index: var(--skx-z-dropdown);
  max-width: var(--skx-content-reading);
  padding: var(--skx-space-2) var(--skx-space-3);
  border: var(--skx-border-width) solid var(--skx-border-soft);
  border-radius: var(--skx-radius-control);
  background: var(--skx-panel-bg);
  color: var(--skx-text);
  box-shadow: var(--skx-shadow-float);
  font-size: var(--skx-type-meta);
  pointer-events: none;
}

.competitor-bar-track,
.stats-breakdown-track,
.run-editorial-summary-progress-track {
  position: relative;
  min-height: var(--skx-space-2);
  overflow: hidden;
  border-radius: var(--skx-radius-micro);
  background: var(--skx-panel-muted);
}

.competitor-bar-fill,
.stats-breakdown-fill,
.run-editorial-summary-progress-track > span {
  display: block;
  min-height: inherit;
  border-radius: inherit;
  background: var(--skx-primary);
  transition: width var(--skx-motion-slow) var(--skx-ease-standard);
}

.skx-progress-bar {
  width: var(--skx-progress-value, 0%);
}

.stats-breakdown-fill {
  width: var(--skx-bar-value, 0%);
}

.stats-kpi-ring {
  position: relative;
  display: inline-grid;
  width: calc(var(--skx-control-lg) + var(--skx-control-lg) + var(--skx-space-6));
  height: calc(var(--skx-control-lg) + var(--skx-control-lg) + var(--skx-space-6));
  place-items: center;
  border-radius: var(--skx-radius-circle);
  background: conic-gradient(
    var(--skx-primary) var(--skx-ring-value, 0%),
    var(--skx-panel-muted) 0
  );
}

.stats-kpi-ring::before {
  position: absolute;
  inset: var(--skx-space-2);
  border-radius: inherit;
  background: var(--skx-panel-bg);
  content: "";
}

.stats-kpi-ring-value {
  position: relative;
  z-index: var(--skx-z-base);
}

.stats-coverage-bar {
  display: flex;
  min-height: var(--skx-space-3);
  overflow: hidden;
  border-radius: var(--skx-radius-micro);
  background: var(--skx-panel-muted);
}

.stats-coverage-segment {
  flex: 0 0 var(--skx-segment-size, 0%);
  min-width: var(--skx-space-1);
  background: var(--skx-blue);
}

.stats-coverage-segment.is-success {
  background: var(--skx-success);
}

.stats-coverage-segment.is-warning {
  background: var(--skx-amber);
}

.stats-coverage-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--skx-space-2);
}

.run-editorial-summary-progress,
.stats-breakdown-row,
.competitor-bar-row {
  display: grid;
  gap: var(--skx-space-2);
}

.run-editorial-summary-progress-head,
.competitor-bar-head,
.stats-breakdown-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--skx-space-2);
  color: var(--skx-text-muted);
  font-size: var(--skx-type-meta);
}

.vis-chart-anim .stats-line-anim {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation:
    skx-chart-reveal
    calc(var(--skx-motion-slow) + var(--skx-motion-slow) + var(--skx-motion-slow))
    var(--skx-ease-standard) forwards;
}

.vis-line {
  fill: none;
  stroke: var(--skx-line-color, var(--skx-primary));
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: calc(var(--skx-border-width) + var(--skx-border-width));
}

.vis-dot {
  transform-box: fill-box;
  transform-origin: center;
}

.vis-line-anim {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation:
    skx-chart-reveal
    calc(var(--skx-motion-slow) + var(--skx-motion-slow) + var(--skx-motion-slow))
    var(--skx-ease-standard) forwards;
  animation-delay: var(--skx-line-delay, 0ms);
}

.vis-dot-anim {
  animation: skx-chart-point var(--skx-motion-standard) var(--skx-ease-emphasized) both;
  animation-delay: var(--skx-dot-delay, 0ms);
}

.vis-bar-anim {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: skx-chart-bar var(--skx-motion-standard) var(--skx-ease-standard) both;
  animation-delay: var(--skx-bar-delay, 0ms);
}

.visibility-chip {
  border-color: color-mix(in srgb, var(--skx-chip-color, var(--skx-blue)) 42%, var(--skx-border-soft));
}

.visibility-chip.selected {
  background: color-mix(in srgb, var(--skx-chip-color, var(--skx-blue)) 14%, var(--skx-panel-bg));
  color: var(--skx-text-strong);
}

.visibility-tooltip::after {
  position: absolute;
  top: calc(var(--skx-space-1) * -1);
  left: var(--skx-visibility-tip-arrow-x, var(--skx-space-4));
  width: var(--skx-space-2);
  height: var(--skx-space-2);
  border-top: var(--skx-border-width) solid var(--skx-border-soft);
  border-left: var(--skx-border-width) solid var(--skx-border-soft);
  background: var(--skx-panel-bg);
  content: "";
  transform: rotate(45deg);
}

@keyframes skx-chart-reveal {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes skx-chart-point {
  from {
    opacity: 0;
    transform: scale(0);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes skx-chart-bar {
  from {
    opacity: 0;
    transform: scaleY(0);
  }

  to {
    opacity: 1;
    transform: scaleY(1);
  }
}

/* Context help uses JS-calculated viewport-safe coordinates. */

.vis-help-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.vis-help-btn {
  width: var(--skx-control-sm);
  min-width: var(--skx-control-sm);
  height: var(--skx-control-sm);
  min-height: var(--skx-control-sm);
  padding: 0;
  border-radius: var(--skx-radius-circle);
}

.vis-help-btn-content {
  display: inline-grid;
  place-items: center;
  width: var(--skx-icon-sm);
  height: var(--skx-icon-sm);
  font-size: var(--skx-type-meta);
  font-weight: var(--skx-weight-bold);
}

.vis-help-pop {
  position: absolute;
  top: var(--skx-help-pop-top, var(--skx-control-md));
  left: var(--skx-help-pop-left, 0);
  z-index: var(--skx-z-tooltip);
  width: min(var(--skx-content-reading), calc(100vw - var(--skx-space-8)));
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity var(--skx-motion-fast) var(--skx-ease-standard),
    visibility var(--skx-motion-fast) var(--skx-ease-standard);
}

.vis-help-wrap.is-open .vis-help-pop,
.visibility-card.vis-help-open .vis-help-pop {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.vis-help-surface {
  position: relative;
  display: grid;
  gap: var(--skx-space-2);
  padding: var(--skx-space-3);
  border: var(--skx-border-width) solid var(--skx-border-strong);
  border-radius: var(--skx-radius-control);
  background: var(--skx-panel-bg);
  color: var(--skx-text);
  box-shadow: var(--skx-shadow-float);
  font-size: var(--skx-type-dense);
}

.vis-help-head {
  display: flex;
  align-items: center;
  gap: var(--skx-space-2);
  color: var(--skx-text-strong);
  font-weight: var(--skx-weight-semibold);
}

.vis-help-badge,
.vis-help-badge-icon {
  width: var(--skx-icon-md);
  height: var(--skx-icon-md);
}

.vis-help-body {
  color: var(--skx-text-muted);
  font-size: var(--skx-type-meta);
  line-height: var(--skx-leading-body);
}

.vis-help-arrow {
  position: absolute;
  width: var(--skx-space-2);
  height: var(--skx-space-2);
  border-top: var(--skx-border-width) solid var(--skx-border-strong);
  border-left: var(--skx-border-width) solid var(--skx-border-strong);
  background: var(--skx-panel-bg);
  transform: rotate(45deg);
}

.vis-help-wrap[data-help-placement="top"] .vis-help-arrow,
.vis-help-wrap[data-help-placement="bottom"] .vis-help-arrow {
  left: var(--skx-help-arrow-x, var(--skx-space-4));
}

.vis-help-wrap[data-help-placement="left"] .vis-help-arrow,
.vis-help-wrap[data-help-placement="right"] .vis-help-arrow {
  top: var(--skx-help-arrow-y, var(--skx-space-4));
}

.vis-help-wrap[data-help-placement="top"] .vis-help-arrow {
  bottom: calc(var(--skx-space-1) * -1);
  transform: rotate(225deg);
}

.vis-help-wrap[data-help-placement="bottom"] .vis-help-arrow {
  top: calc(var(--skx-space-1) * -1);
}

.vis-help-wrap[data-help-placement="left"] .vis-help-arrow {
  right: calc(var(--skx-space-1) * -1);
  transform: rotate(135deg);
}

.vis-help-wrap[data-help-placement="right"] .vis-help-arrow {
  left: calc(var(--skx-space-1) * -1);
  transform: rotate(315deg);
}

/* Rich run content, sources, and technical evidence */

.rich-text,
.quick-rich-answer,
.skx-rich-content {
  min-width: 0;
  color: var(--skx-text);
  font-size: var(--skx-type-body);
  line-height: var(--skx-leading-body);
  overflow-wrap: anywhere;
}

.rich-text > :first-child,
.quick-rich-answer > :first-child,
.skx-rich-content > :first-child {
  margin-top: 0;
}

.rich-text > :last-child,
.quick-rich-answer > :last-child,
.skx-rich-content > :last-child {
  margin-bottom: 0;
}

.rich-h4,
.quick-rich-h4 {
  margin: var(--skx-space-6) 0 var(--skx-space-2);
  color: var(--skx-text-strong);
  font-size: var(--skx-type-panel-title);
}

.rich-p,
.quick-rich-p {
  margin: 0 0 var(--skx-space-3);
}

.rich-ul,
.rich-ol,
.quick-rich-ul {
  display: grid;
  gap: var(--skx-space-2);
  margin: 0 0 var(--skx-space-4);
  padding-inline-start: var(--skx-space-6);
}

.rich-li-structured {
  display: grid;
  gap: var(--skx-space-1);
}

.rich-li-title,
.rich-li-detail {
  color: var(--skx-text-strong);
}

.rich-inline-code,
.quick-rich-code,
.run-events-code,
.log-payload,
.skx-code-block {
  border-radius: var(--skx-radius-micro);
  background: var(--skx-panel-muted);
  color: var(--skx-text-strong);
  font-family: var(--skx-font-mono);
  font-size: var(--skx-type-meta);
  overflow-wrap: anywhere;
}

.rich-inline-code {
  padding: 0 var(--skx-space-1);
}

.quick-rich-code,
.run-events-code,
.log-payload,
.skx-code-block {
  display: block;
  max-width: 100%;
  padding: var(--skx-space-3);
  overflow: auto;
}

.rich-table-wrap,
.quick-rich-table-wrap {
  margin-block: var(--skx-space-4);
}

.rich-table,
.quick-rich-table {
  min-width: var(--skx-content-reading);
}

.run-text-extraction-card,
.run-sources-card,
.run-debug-screenshot-card {
  display: grid;
  gap: var(--skx-space-3);
  min-width: 0;
  padding: var(--skx-space-4);
  border: var(--skx-border-width) solid var(--skx-border-soft);
  border-radius: var(--skx-radius-panel);
  background: var(--skx-panel-bg);
}

.run-text-extraction-card::before {
  content: none;
}

.run-text-extraction-head,
.run-sources-head,
.run-debug-screenshot-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--skx-space-3);
  color: var(--skx-text-strong);
  font-size: var(--skx-type-dense);
  font-weight: var(--skx-weight-semibold);
}

.run-text-extraction-body,
.run-debug-screenshot-body {
  min-width: 0;
  color: var(--skx-text);
  overflow-wrap: anywhere;
}

.run-source-list {
  display: grid;
  gap: var(--skx-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.run-source-item {
  display: grid;
  grid-template-columns: var(--skx-control-sm) minmax(0, 1fr);
  align-items: start;
  gap: var(--skx-space-2);
  padding: var(--skx-space-2);
  border: var(--skx-border-width) solid var(--skx-border-soft);
  border-radius: var(--skx-radius-control);
  background: var(--skx-panel-muted);
}

.run-source-index {
  display: inline-grid;
  width: var(--skx-control-sm);
  height: var(--skx-control-sm);
  place-items: center;
  border-radius: var(--skx-radius-circle);
  background: color-mix(in srgb, var(--skx-blue) 12%, var(--skx-panel-bg));
  color: var(--skx-blue);
  font-size: var(--skx-type-meta);
  font-weight: var(--skx-weight-bold);
}

.run-source-main {
  min-width: 0;
}

.run-source-link,
.run-debug-artifact-link,
.rich-text a.rich-source-link,
.quick-rich-link {
  color: var(--skx-blue);
  font-weight: var(--skx-weight-semibold);
  overflow-wrap: anywhere;
}

.run-source-url {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  color: var(--skx-text-muted);
  font-size: var(--skx-type-meta);
  text-overflow: ellipsis;
  vertical-align: bottom;
  white-space: nowrap;
}

.run-debug-screenshot-body img {
  display: block;
  max-width: 100%;
  height: auto;
  border: var(--skx-border-width) solid var(--skx-border-soft);
  border-radius: var(--skx-radius-control);
}

.run-review-prompt-title .run-review-prompt-open,
.run-text-extraction-card.is-prompt.is-clickable,
[data-run-detail],
[data-dashboard-run-open] {
  cursor: pointer;
}

.ssg-geocheck-card.is-manual-verification-required {
  border-color: color-mix(in srgb, var(--skx-amber) 48%, var(--skx-border-soft));
  background: color-mix(in srgb, var(--skx-amber) 8%, var(--skx-panel-bg));
}

.run-selected-model-section:not(.is-active) {
  display: none;
}

.quick-prompt-country,
.quick-prompt-result-model {
  display: inline-flex;
  align-items: center;
  gap: var(--skx-space-2);
}

.quick-prompt-country-flag {
  display: inline-block;
  width: var(--skx-icon-lg);
  height: var(--skx-icon-lg);
  overflow: hidden;
  border: var(--skx-border-width) solid var(--skx-border-soft);
  border-radius: var(--skx-radius-circle);
  background: linear-gradient(
    to bottom,
    var(--skx-flag-at-red) 0 33.33%,
    var(--skx-flag-neutral) 33.33% 66.66%,
    var(--skx-flag-at-red) 66.66%
  );
  box-shadow: var(--skx-shadow-card);
}

.quick-prompt-country.is-de .quick-prompt-country-flag {
  background: linear-gradient(
    to bottom,
    var(--skx-flag-de-black) 0 33.33%,
    var(--skx-flag-de-red) 33.33% 66.66%,
    var(--skx-flag-de-gold) 66.66%
  );
}

.quick-prompt-country.is-int .quick-prompt-country-flag {
  background: linear-gradient(
    135deg,
    var(--skx-blue),
    color-mix(in srgb, var(--skx-blue) 55%, var(--skx-panel-bg))
  );
}

.quick-prompt-result-nav {
  min-width: 0;
}

.quick-prompt-result-detail,
.quick-run-detail-block {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* DOM inspector */

body.skx-dom-inspector-active {
  cursor: crosshair;
}

#domInspectorOverlay {
  position: fixed;
  inset: 0;
  z-index: var(--skx-z-overlay);
  pointer-events: none;
}

#domInspectorBox,
.dom-inspector-box {
  position: fixed;
  min-width: var(--skx-space-1);
  min-height: var(--skx-space-1);
  border: var(--skx-focus-width) solid var(--skx-blue);
  border-radius: var(--skx-radius-control);
  background: color-mix(in srgb, var(--skx-blue) 12%, transparent);
  box-shadow: var(--skx-shadow-float);
  pointer-events: none;
  transition:
    inset var(--skx-motion-fast) var(--skx-ease-standard),
    width var(--skx-motion-fast) var(--skx-ease-standard),
    height var(--skx-motion-fast) var(--skx-ease-standard);
}

#domInspectorOverlay.is-locked #domInspectorBox,
#domInspectorOverlay.is-locked .dom-inspector-box {
  border-color: var(--skx-success);
  background: color-mix(in srgb, var(--skx-success) 12%, transparent);
}

.dom-inspector-panel {
  position: fixed;
  right: var(--skx-space-4);
  bottom: var(--skx-space-4);
  z-index: var(--skx-z-modal);
  display: grid;
  width: min(
    calc(var(--skx-sidebar-width) + 20ch),
    calc(100vw - var(--skx-space-8))
  );
  max-height: calc(100vh - var(--skx-space-8));
  gap: var(--skx-space-3);
  padding: var(--skx-space-4);
  overflow: auto;
  border: var(--skx-border-width) solid var(--skx-border-strong);
  border-radius: var(--skx-radius-panel);
  background: color-mix(in srgb, var(--skx-panel-bg) 96%, transparent);
  color: var(--skx-text);
  box-shadow: var(--skx-shadow-float);
  backdrop-filter: blur(var(--skx-space-2));
  pointer-events: auto;
}

.dom-inspector-toolbar,
.dom-inspector-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--skx-space-2);
}

.dom-inspector-kicker {
  color: var(--skx-text-muted);
  font-size: var(--skx-type-meta);
  font-weight: var(--skx-weight-semibold);
  text-transform: uppercase;
}

#domInspectorContent,
.dom-inspector-note,
.dom-inspector-transcription {
  min-width: 0;
  overflow-wrap: anywhere;
}

#domInspectorContent {
  display: grid;
  gap: var(--skx-space-2);
}

#domInspectorContent dl {
  display: grid;
  gap: var(--skx-space-2);
  margin: 0;
}

#domInspectorContent dl > div {
  min-width: 0;
  padding: var(--skx-space-2);
  border: var(--skx-border-width) solid var(--skx-border-soft);
  border-radius: var(--skx-radius-control);
  background: var(--skx-panel-muted);
}

#domInspectorContent dt {
  color: var(--skx-text-muted);
  font-size: var(--skx-type-meta);
  font-weight: var(--skx-weight-semibold);
}

#domInspectorContent dd {
  margin: var(--skx-space-1) 0 0;
  color: var(--skx-text);
  font-size: var(--skx-type-dense);
  overflow-wrap: anywhere;
}

#domInspectorContent code {
  color: var(--skx-blue);
  font-family: var(--skx-font-mono);
  font-size: var(--skx-type-meta);
  white-space: normal;
}

.dom-inspector-textarea {
  min-height: calc(var(--skx-control-lg) + var(--skx-control-lg) + var(--skx-control-lg));
  resize: vertical;
}

.dom-inspector-note,
.dom-inspector-transcription {
  color: var(--skx-text-muted);
  font-size: var(--skx-type-meta);
}

.dom-inspector-transcription.is-ok {
  color: var(--skx-success);
}

.dom-inspector-transcription.is-error {
  color: var(--skx-red);
}

/* Responsive behavior */

@media (min-width: 992px) {
  .skx-sidebar {
    position: sticky;
    top: var(--skx-space-4);
    max-height: calc(100vh - var(--skx-space-8));
    overflow-y: auto;
  }

  .settings-setup-rail {
    position: sticky;
    top: var(--skx-space-4);
    align-self: start;
  }
}

@media (max-width: 991.98px) {
  body.sekorix-workspace > .skx-app-shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }

  body.sekorix-workspace > .skx-app-shell > .stitch-topbar-card,
  body.sekorix-workspace > .skx-app-shell > .skx-main {
    grid-column: 1;
  }

  body.sekorix-workspace > .skx-app-shell > .stitch-topbar-card {
    grid-row: 1;
  }

  body.sekorix-workspace > .skx-app-shell > .skx-main {
    grid-row: 2;
  }

  .settings-setup-rail {
    position: static;
    max-height: none;
  }

  .stitch-insight-rail.is-collapsed {
    flex-basis: auto;
    max-width: none;
  }

  .stitch-dashboard-table-wrap {
    max-height: none;
  }

  .skx-split-workspace {
    grid-template-columns: minmax(0, 1fr);
  }

  .support-space-page .skx-split-workspace,
  .stitch-support-thread-workspace.skx-split-workspace,
  .settings-accounts-panel.skx-split-workspace {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 767.98px) {
  .table > :not(caption) > * > * {
    padding: var(--skx-space-2) var(--skx-space-3);
  }

  .run-source-item {
    grid-template-columns: 1fr;
  }

  .run-source-index {
    width: var(--skx-control-sm);
  }

  .rich-table,
  .quick-rich-table {
    min-width: var(--skx-content-reading);
  }

  .skx-auth-shell {
    grid-template-columns: minmax(0, 1fr);
    min-height: auto;
  }

  .skx-auth-brand {
    flex-direction: row;
    align-items: center;
    border-radius: var(--skx-radius-overlay) var(--skx-radius-overlay) 0 0;
  }

  .skx-auth-brand-signal {
    width: var(--skx-control-lg);
    height: var(--skx-control-lg);
    align-self: auto;
    border-radius: var(--skx-radius-control);
    box-shadow: none;
    font-size: var(--skx-icon-lg);
  }

  .skx-auth-form {
    border-radius: 0 0 var(--skx-radius-overlay) var(--skx-radius-overlay);
  }

  .skx-page-header {
    align-items: stretch;
  }

  .skx-page-actions {
    justify-content: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto;
    animation-duration: 0s;
    animation-iteration-count: 1;
    transition-duration: 0s;
  }

  .btn:not(:disabled):not(.disabled):hover {
    transform: none;
  }
}

@media (max-width: 680px) {
  .step-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .step-actions > * {
    width: 100%;
  }

  .dom-inspector-panel {
    right: var(--skx-space-2);
    bottom: var(--skx-space-2);
    width: calc(100vw - var(--skx-space-4));
    max-height: calc(100vh - var(--skx-space-4));
  }
}