@dataengineeringformachinelearning/viking-ui 1.0.1 → 3.0.0-alpha.2

package/src/styles/surfaces/swagger-ui.scss

@@ -0,0 +1,921 @@
+/**
+ * Swagger UI — Viking-UI theme (single-panel, flat operation list).
+ * Load after swagger-ui.css; tokens from the built viking-ui.css bundle.
+ */
+
+body.backend-swagger {
+  background: var(--viking-bg, var(--bg-color));
+}
+
+.backend-swagger-shell {
+  padding-block: var(--viking-space-3) var(--viking-space-6);
+}
+
+/* ── VikingCard panel wrapping Swagger UI ──────────────────────────────────── */
+.backend-swagger-panel {
+  padding: 0;
+  overflow: hidden;
+}
+
+.backend-swagger-hero {
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+  border-bottom: 1px solid var(--viking-border);
+  margin: 0;
+}
+
+.backend-swagger-toolbar {
+  padding: var(--viking-space-2) var(--viking-space-3);
+  border-bottom: 1px solid var(--viking-border);
+  background: color-mix(in srgb, var(--viking-surface-alt) 40%, transparent);
+}
+
+.backend-swagger-search {
+  margin: 0;
+  max-width: none;
+}
+
+.backend-swagger-search .viking-input-shell {
+  width: 100%;
+}
+
+.backend-swagger-panel #swagger-ui {
+  padding: 0 var(--viking-space-3) var(--viking-space-3);
+}
+
+.swagger-ui .opblock .opblock-summary {
+  flex-wrap: wrap;
+  gap: var(--viking-space-1, 8px);
+}
+
+/* ── Base resets ─────────────────────────────────────────────────────────── */
+.swagger-ui .topbar {
+  display: none;
+}
+
+.swagger-ui {
+  font-family: var(--viking-font-family, "Inter", system-ui, sans-serif);
+  color: var(--viking-text, var(--text-color));
+}
+
+.swagger-ui,
+.swagger-ui .wrapper,
+.swagger-ui section {
+  background: transparent;
+}
+
+/* Hide duplicate Swagger title — page hero is authoritative */
+.swagger-ui .info .title {
+  display: none;
+}
+
+.swagger-ui .info {
+  margin: 0;
+  padding: var(--viking-space-2, 16px) 0;
+  border-bottom: 1px solid var(--viking-border, var(--border));
+}
+
+.swagger-ui .info .markdown,
+.swagger-ui .info .description {
+  margin: 0;
+  max-width: none;
+  text-align: left;
+}
+
+.swagger-ui .info .base-url,
+.swagger-ui .info p,
+.swagger-ui .info li,
+.swagger-ui .info .markdown p {
+  font-size: 0.92rem;
+  line-height: 1.6;
+  color: var(--viking-text-muted, var(--text-muted));
+}
+
+.swagger-ui .info .description {
+  padding: var(--viking-space-2, 16px);
+  border-radius: var(--viking-radius, 8px);
+  border: 1px solid
+    color-mix(
+      in srgb,
+      var(--viking-accent, var(--color-primary)) 22%,
+      var(--border)
+    );
+  background: color-mix(
+    in srgb,
+    var(--viking-accent, var(--color-primary)) 6%,
+    transparent
+  );
+}
+
+.swagger-ui .info a {
+  color: var(--viking-accent, var(--color-primary));
+  text-decoration: none;
+}
+
+.swagger-ui .info a:hover,
+.swagger-ui .info a:focus-visible {
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+/* ── Toolbar: authorize + filter ─────────────────────────────────────────── */
+.swagger-ui .scheme-container {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  flex-wrap: wrap;
+  gap: var(--viking-space-2, 16px);
+  margin: 0;
+  padding: var(--viking-space-2, 16px) 0;
+  border: none;
+  border-bottom: 1px solid var(--viking-border, var(--border));
+  border-radius: 0;
+  box-shadow: none !important;
+  background: transparent !important;
+}
+
+.swagger-ui .scheme-container .schemes > label {
+  color: var(--viking-text-muted, var(--text-muted));
+  font-size: 0.72rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.swagger-ui .scheme-container select {
+  background: var(--viking-surface-alt, var(--viking-charcoal-700));
+  border: 1px solid var(--viking-border-strong, var(--border));
+  border-radius: var(--viking-radius-sm, 6px);
+  color: var(--viking-text, var(--text-color));
+  font-family: inherit;
+  font-size: var(--viking-font-size-sm, 14px);
+  min-height: 36px;
+  padding: 0 var(--viking-space-2, 16px);
+}
+
+.swagger-ui .filter-container {
+  margin: 0;
+  padding: 0;
+  border: none;
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.swagger-ui .filter-container input[type="text"] {
+  width: 100%;
+  max-width: 100%;
+  min-height: 36px;
+  padding: 0 var(--viking-space-2, 16px);
+  border: 1px solid var(--viking-border, var(--border));
+  border-radius: var(--viking-radius, 8px);
+  background: var(--viking-surface-alt, var(--viking-charcoal-800));
+  box-shadow: none;
+  color: var(--viking-text, var(--text-color));
+}
+
+/* ── Buttons ─────────────────────────────────────────────────────────────── */
+.swagger-ui .btn {
+  background: var(--viking-surface, var(--card-bg));
+  border: 1px solid var(--viking-border-strong, var(--border));
+  border-radius: var(--viking-radius, 8px);
+  box-shadow: none;
+  color: var(--viking-text, var(--text-color));
+  font-family: inherit;
+  font-size: 0.78rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  min-height: 36px;
+  padding: 0 var(--viking-space-2, 16px);
+  text-transform: uppercase;
+  transition: var(--viking-transition-interactive, all 0.2s ease);
+}
+
+.swagger-ui .btn:hover {
+  background: var(--viking-surface-raised, var(--viking-charcoal-600));
+  border-color: var(--viking-accent-strong, var(--viking-teal-400));
+  transform: none;
+}
+
+.swagger-ui .btn:focus-visible {
+  outline: var(--viking-ring-width, 2px) solid
+    var(--viking-ring, var(--focus-ring-color));
+  outline-offset: var(--viking-ring-offset, 2px);
+}
+
+.swagger-ui .btn.authorize,
+.swagger-ui .btn.authorize.unlocked,
+.swagger-ui .btn.execute {
+  background: var(--viking-accent, var(--color-primary));
+  border-color: color-mix(
+    in srgb,
+    var(--viking-accent) 82%,
+    var(--viking-black)
+  );
+  color: var(--viking-accent-content, var(--viking-white-pure));
+  box-shadow: var(--viking-shadow-sm);
+  min-height: var(--viking-control-height, 40px);
+  border-radius: var(--viking-radius, 8px);
+}
+
+.swagger-ui .btn.authorize:hover,
+.swagger-ui .btn.authorize.unlocked:hover,
+.swagger-ui .btn.execute:hover {
+  background: var(--viking-accent-hover, var(--viking-teal-500));
+  border-color: color-mix(
+    in srgb,
+    var(--viking-accent-hover) 82%,
+    var(--viking-black)
+  );
+  color: var(--viking-accent-content, var(--viking-white-pure));
+  box-shadow: var(--viking-shadow-md);
+}
+
+/* ── Tag groups ──────────────────────────────────────────────────────────── */
+.swagger-ui .opblock-tag-section {
+  margin: 0;
+}
+
+.swagger-ui .opblock-tag {
+  margin: var(--viking-space-3, 24px) 0 var(--viking-space-1, 8px);
+  padding: 0 0 var(--viking-space-1, 8px);
+  border-bottom: 1px solid var(--viking-border, var(--border));
+  font-size: 0.72rem;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--viking-text-muted, var(--text-muted));
+}
+
+.swagger-ui .opblock-tag small {
+  font-size: 0.85rem;
+  font-weight: 500;
+  letter-spacing: normal;
+  text-transform: none;
+}
+
+.swagger-ui .opblock-tag svg {
+  fill: var(--viking-text-muted, var(--text-muted));
+}
+
+/* ── Operations — flat rows, no nested cards ─────────────────────────────── */
+.swagger-ui .opblock {
+  margin: 0;
+  border: none;
+  border-bottom: 1px solid var(--viking-border, var(--border));
+  border-radius: 0;
+  box-shadow: none;
+  background: transparent;
+}
+
+.swagger-ui .opblock.opblock-post,
+.swagger-ui .opblock.opblock-get,
+.swagger-ui .opblock.opblock-put,
+.swagger-ui .opblock.opblock-patch,
+.swagger-ui .opblock.opblock-delete,
+.swagger-ui .opblock.opblock-options,
+.swagger-ui .opblock.opblock-head {
+  border: none;
+  border-bottom: 1px solid var(--viking-border, var(--border));
+  background: transparent;
+}
+
+.swagger-ui .opblock .opblock-summary {
+  border: none;
+  background: transparent !important;
+  padding: var(--viking-space-2, 16px) 0;
+}
+
+.swagger-ui .opblock.is-open .opblock-summary {
+  border-bottom: 1px solid var(--viking-border-subtle, var(--border));
+}
+
+.swagger-ui .opblock .opblock-summary-method {
+  border-radius: var(--viking-radius-sm, 6px);
+  font-family: var(--viking-font-family-mono, "JetBrains Mono", monospace);
+  font-size: 0.68rem;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  min-width: 64px;
+  text-align: center;
+}
+
+.swagger-ui .opblock.opblock-get .opblock-summary-method {
+  background: color-mix(in srgb, var(--viking-accent) 16%, transparent);
+  color: var(--viking-accent-strong);
+}
+
+.swagger-ui .opblock.opblock-post .opblock-summary-method {
+  background: color-mix(in srgb, var(--viking-accent) 16%, transparent);
+  color: var(--viking-accent-strong);
+}
+
+.swagger-ui .opblock.opblock-put .opblock-summary-method,
+.swagger-ui .opblock.opblock-patch .opblock-summary-method {
+  background: color-mix(in srgb, var(--viking-gold-500) 16%, transparent);
+  color: var(--viking-gold-500);
+}
+
+.swagger-ui .opblock.opblock-delete .opblock-summary-method {
+  background: color-mix(in srgb, var(--viking-crimson-600) 14%, transparent);
+  color: var(--viking-crimson-400);
+}
+
+.swagger-ui .opblock .opblock-summary-path,
+.swagger-ui .opblock .opblock-summary-path__deprecated {
+  color: var(--viking-text, var(--text-color));
+  font-family: var(--viking-font-family-mono, "JetBrains Mono", monospace);
+  font-size: 0.88rem;
+}
+
+.swagger-ui .opblock .opblock-summary-description {
+  color: var(--viking-text-muted, var(--text-muted));
+  font-size: 0.88rem;
+}
+
+.swagger-ui .opblock-body,
+.swagger-ui .opblock-section {
+  background: color-mix(
+    in srgb,
+    var(--viking-bg, var(--bg-color)) 35%,
+    transparent
+  );
+}
+
+/* Inner operation panels — beat swagger-ui.css specificity (.opblock .opblock-section-header) */
+.swagger-ui .opblock .opblock-section-header {
+  align-items: center;
+  background: color-mix(
+    in srgb,
+    var(--viking-surface-alt, var(--viking-charcoal-800)) 72%,
+    transparent
+  ) !important;
+  border-bottom: 1px solid var(--viking-border-subtle, var(--border));
+  box-shadow: none !important;
+  min-height: auto;
+  padding: var(--viking-space-1-5, 12px) var(--viking-space-2, 16px);
+}
+
+.swagger-ui .opblock .opblock-section-header h4 {
+  color: var(--viking-text-muted, var(--text-muted));
+  flex: 1;
+  font-family: inherit;
+  font-size: 0.72rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  margin: 0;
+  text-transform: uppercase;
+}
+
+.swagger-ui .opblock .opblock-section-header > label {
+  align-items: center;
+  color: var(--viking-text-muted, var(--text-muted));
+  display: flex;
+  font-family: inherit;
+  font-size: 0.72rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  margin: 0 0 0 auto;
+  text-transform: uppercase;
+}
+
+.swagger-ui .opblock .opblock-section-header > label > span {
+  padding: 0 var(--viking-space-1, 8px) 0 0;
+}
+
+.swagger-ui .opblock-section-header {
+  background: color-mix(
+    in srgb,
+    var(--viking-surface-alt, var(--viking-charcoal-800)) 72%,
+    transparent
+  ) !important;
+  border-bottom: 1px solid var(--viking-border-subtle, var(--border));
+  box-shadow: none !important;
+  padding: var(--viking-space-1-5, 12px) 0;
+}
+
+.swagger-ui .opblock-section-header h4,
+.swagger-ui .opblock-section-header label {
+  color: var(--viking-text-muted, var(--text-muted));
+  font-size: 0.72rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.swagger-ui .opblock-body {
+  padding: var(--viking-space-2, 16px) 0;
+}
+
+.swagger-ui .opblock-description-wrapper,
+.swagger-ui .opblock-external-docs-wrapper,
+.swagger-ui .opblock-title_normal {
+  background: transparent;
+  color: var(--viking-text-muted, var(--text-muted));
+  font-family: inherit;
+  font-size: 0.88rem;
+  margin: 0;
+  padding: var(--viking-space-1, 8px) 0;
+}
+
+.swagger-ui .opblock-description-wrapper h4,
+.swagger-ui .opblock-external-docs-wrapper h4,
+.swagger-ui .opblock-title_normal h4 {
+  color: var(--viking-text-muted, var(--text-muted));
+  font-family: inherit;
+  font-size: 0.72rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.swagger-ui .table-container {
+  background: transparent;
+  padding: var(--viking-space-1, 8px) 0;
+}
+
+.swagger-ui .parameters-col_description,
+.swagger-ui .parameters-col_name {
+  color: var(--viking-text, var(--text-color));
+}
+
+.swagger-ui .parameters-col_description .markdown p,
+.swagger-ui .parameters-col_description .renderedMarkdown p,
+.swagger-ui .opblock-body .markdown p,
+.swagger-ui .opblock-body .renderedMarkdown p {
+  color: var(--viking-text-muted, var(--text-muted));
+  font-size: 0.88rem;
+  margin: 0;
+}
+
+.swagger-ui .parameter__name {
+  color: var(--viking-text, var(--text-color));
+  font-family: var(--viking-font-family-mono, "JetBrains Mono", monospace);
+  font-size: 0.88rem;
+  font-weight: 600;
+}
+
+.swagger-ui .parameter__name.required span {
+  color: var(--viking-crimson-400, var(--color-error));
+}
+
+.swagger-ui .parameter__extension,
+.swagger-ui .parameter__in {
+  color: var(--viking-text-muted, var(--text-muted));
+  font-family: var(--viking-font-family-mono, "JetBrains Mono", monospace);
+  font-size: 0.78rem;
+}
+
+.swagger-ui .tab {
+  display: flex;
+  gap: var(--viking-space-2, 16px);
+  margin: 0 0 var(--viking-space-1, 8px);
+}
+
+.swagger-ui .tab li {
+  color: var(--viking-text-muted, var(--text-muted));
+  font-family: inherit;
+  font-size: 0.78rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  min-width: 0;
+  padding: 0;
+  text-transform: uppercase;
+}
+
+.swagger-ui .tab li:first-of-type:after {
+  background: var(--viking-border-subtle, var(--border));
+}
+
+.swagger-ui .tab li.active {
+  color: var(--viking-accent-strong, var(--viking-teal-400));
+  font-weight: 700;
+}
+
+.swagger-ui .tab li button.tablinks {
+  color: inherit;
+}
+
+.swagger-ui .body-param-options label {
+  color: var(--viking-text-muted, var(--text-muted));
+  font-size: 0.78rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  padding: var(--viking-space-1, 8px) 0;
+  text-transform: uppercase;
+}
+
+.swagger-ui .body-param__media-type,
+.swagger-ui .body-param__text {
+  color: var(--viking-text, var(--text-color));
+}
+
+.swagger-ui .execute-wrapper {
+  background: transparent;
+  padding: var(--viking-space-2, 16px) 0 0;
+  text-align: left;
+}
+
+.swagger-ui .execute-wrapper .btn {
+  width: 100%;
+}
+
+.swagger-ui .responses-inner h4,
+.swagger-ui .responses-inner h5,
+.swagger-ui .response-control-media-type__title,
+.swagger-ui .response-control-examples__title {
+  color: var(--viking-text-muted, var(--text-muted));
+  font-family: inherit;
+  font-size: 0.72rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.swagger-ui .response-col_status,
+.swagger-ui .response-col_links {
+  color: var(--viking-text, var(--text-color));
+  font-family: inherit;
+  font-size: 0.88rem;
+}
+
+.swagger-ui .response-col_status .response-undocumented {
+  color: var(--viking-text-muted, var(--text-muted));
+}
+
+.swagger-ui .response-control-media-type__accept-message {
+  color: var(--viking-success, var(--viking-green-500));
+}
+
+.swagger-ui
+  .response-control-media-type--accept-controller
+  select.content-type {
+  border-color: var(--viking-success, var(--viking-green-500));
+}
+
+.swagger-ui .btn.cancel {
+  background: transparent !important;
+  border-color: var(--viking-border-strong, var(--border)) !important;
+  color: var(--viking-text-muted, var(--text-muted)) !important;
+}
+
+.swagger-ui .btn.cancel:hover {
+  background: color-mix(
+    in srgb,
+    var(--viking-crimson-500, var(--color-error)) 10%,
+    transparent
+  ) !important;
+  border-color: var(--viking-crimson-400, var(--color-error)) !important;
+  color: var(--viking-crimson-400, var(--color-error)) !important;
+}
+
+.swagger-ui .opblock-body pre.microlight {
+  background: var(--viking-charcoal-950, #0a0a0a) !important;
+  border: 1px solid var(--viking-border, var(--border));
+  border-radius: var(--viking-radius, 8px);
+  color: var(--viking-text, var(--text-color)) !important;
+  font-family: var(
+    --viking-font-family-mono,
+    "JetBrains Mono",
+    monospace
+  ) !important;
+  font-size: 0.84rem !important;
+  padding: var(--viking-space-2, 16px) !important;
+}
+
+.swagger-ui .markdown p,
+.swagger-ui .renderedMarkdown p {
+  color: var(--viking-text-muted, var(--text-muted));
+}
+
+.swagger-ui .markdown pre,
+.swagger-ui .renderedMarkdown pre {
+  background: none;
+  color: var(--viking-text, var(--text-color));
+  font-weight: 400;
+  padding: 0;
+}
+
+.swagger-ui .copy-to-clipboard {
+  background: var(--viking-surface-alt, var(--viking-charcoal-700));
+  border: 1px solid var(--viking-border, var(--border));
+}
+
+.swagger-ui .copy-to-clipboard:hover {
+  background: var(--viking-surface-raised, var(--viking-charcoal-600));
+}
+
+/* ── Parameters & inputs ─────────────────────────────────────────────────── */
+.swagger-ui .parameters-col_description input[type="text"],
+.swagger-ui .parameters-col_description select,
+.swagger-ui .opblock-body input[type="text"],
+.swagger-ui .opblock-body input[type="password"],
+.swagger-ui .opblock-body input[type="search"],
+.swagger-ui .opblock-body input[type="email"],
+.swagger-ui .opblock-body input[type="url"],
+.swagger-ui .opblock-body textarea,
+.swagger-ui textarea,
+.swagger-ui input[type="text"],
+.swagger-ui input[type="password"],
+.swagger-ui input[type="search"],
+.swagger-ui input[type="email"],
+.swagger-ui input[type="url"],
+.swagger-ui select {
+  background: var(--viking-surface, var(--card-bg));
+  border: 1px solid var(--viking-border-strong, var(--border));
+  border-radius: var(--viking-radius-sm, 6px);
+  color: var(--viking-text, var(--text-color));
+  font-family: var(--viking-font-family-mono, "JetBrains Mono", monospace);
+  font-size: 0.88rem;
+  min-height: 32px;
+  padding: var(--viking-space-1, 8px) var(--viking-space-2, 16px);
+}
+
+.swagger-ui input:focus-visible,
+.swagger-ui textarea:focus-visible,
+.swagger-ui select:focus-visible {
+  border-color: var(--viking-accent-strong, var(--viking-teal-400));
+  outline: var(--viking-ring-width, 2px) solid
+    var(--viking-ring, var(--focus-ring-color));
+  outline-offset: var(--viking-ring-offset, 2px);
+}
+
+.swagger-ui .parameter__name,
+.swagger-ui .parameter__type,
+.swagger-ui .parameter__in {
+  font-family: var(--viking-font-family-mono, "JetBrains Mono", monospace);
+  font-size: 0.88rem;
+}
+
+.swagger-ui .parameter__in {
+  color: var(--viking-text-muted, var(--text-muted));
+}
+
+.swagger-ui table thead tr th,
+.swagger-ui table thead tr td {
+  border-bottom: 1px solid var(--viking-border, var(--border));
+  color: var(--viking-text-muted, var(--text-muted));
+  font-size: 0.68rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.swagger-ui table tbody tr td {
+  border-bottom: 1px solid var(--viking-border-subtle, var(--border));
+  font-size: 0.88rem;
+  padding: var(--viking-space-1-5, 12px) 0;
+}
+
+/* ── Responses & code ────────────────────────────────────────────────────── */
+.swagger-ui .responses-inner {
+  padding: var(--viking-space-2, 16px) 0;
+}
+
+.swagger-ui .response-col_status {
+  font-family: var(--viking-font-family-mono, "JetBrains Mono", monospace);
+  font-weight: 700;
+}
+
+.swagger-ui .response-col_description__inner p,
+.swagger-ui .response-col_links {
+  color: var(--viking-text-muted, var(--text-muted));
+  font-size: 0.88rem;
+}
+
+.swagger-ui .highlight-code,
+.swagger-ui .microlight,
+.swagger-ui .renderedMarkdown pre,
+.swagger-ui pre {
+  background: var(--viking-charcoal-950, #0a0a0a) !important;
+  border: 1px solid var(--viking-border, var(--border));
+  border-radius: var(--viking-radius, 8px);
+  color: var(--viking-text, var(--text-color)) !important;
+  font-family: var(
+    --viking-font-family-mono,
+    "JetBrains Mono",
+    monospace
+  ) !important;
+  font-size: 0.84rem !important;
+  line-height: 1.55;
+  padding: var(--viking-space-2, 16px) !important;
+}
+
+.swagger-ui .markdown code,
+.swagger-ui .renderedMarkdown code {
+  background: color-mix(
+    in srgb,
+    var(--viking-surface-alt, #1a1a1a) 70%,
+    transparent
+  );
+  border: 1px solid var(--viking-border-subtle, var(--border));
+  border-radius: 4px;
+  color: var(--viking-accent-strong, var(--viking-teal-400));
+  font-size: 0.84em;
+  padding: 1px 5px;
+}
+
+/* ── Schemas — flat index, no gray pill buttons ────────────────────────────── */
+.swagger-ui section.models {
+  margin-top: var(--viking-space-3, 24px);
+  border: none;
+  border-top: 1px solid var(--viking-border, var(--border));
+  border-radius: 0;
+  overflow: visible;
+}
+
+.swagger-ui section.models h4 {
+  margin: 0;
+  padding: var(--viking-space-3, 24px) 0 var(--viking-space-1, 8px);
+  border: none;
+  background: transparent;
+  font-size: 0.72rem;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--viking-text-muted, var(--text-muted));
+}
+
+.swagger-ui section.models.is-open h4 {
+  border-bottom: none;
+}
+
+.swagger-ui section.models .model-container {
+  margin: 0;
+  padding: 0;
+}
+
+.swagger-ui section.models .model-box {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--viking-space-1, 8px);
+  margin: 0;
+  padding: var(--viking-space-2, 16px) 0;
+  border: none;
+  border-bottom: 1px solid var(--viking-border-subtle, var(--border));
+  border-radius: 0;
+  background: transparent;
+}
+
+.swagger-ui section.models .model-box:last-child {
+  border-bottom: none;
+}
+
+.swagger-ui section.models .model-box-control {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--viking-space-1, 8px);
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: transparent !important;
+  box-shadow: none !important;
+  text-align: left;
+}
+
+.swagger-ui section.models .model-box .btn,
+.swagger-ui section.models .model-toggle,
+.swagger-ui section.models button.model-box-control {
+  background: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
+  min-height: auto;
+  padding: 0;
+  text-transform: none;
+  letter-spacing: normal;
+  font-weight: 600;
+  color: var(--viking-text, var(--text-color));
+}
+
+.swagger-ui section.models .model-box > .btn {
+  margin-left: auto;
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--viking-text-muted, var(--text-muted));
+}
+
+.swagger-ui section.models .model-title,
+.swagger-ui section.models .model-title__text {
+  color: var(--viking-text, var(--text-color));
+  font-family: var(--viking-font-family-mono, "JetBrains Mono", monospace);
+  font-size: 0.88rem;
+  font-weight: 600;
+}
+
+.swagger-ui section.models .model .prop-type,
+.swagger-ui section.models .model .prop-format {
+  margin-left: auto;
+  color: var(--viking-accent, var(--color-primary));
+  font-size: 0.78rem;
+}
+
+.swagger-ui .model .property-row {
+  border-bottom: 1px solid var(--viking-border-subtle, var(--border));
+}
+
+/* ── Modal (Authorize) ───────────────────────────────────────────────────── */
+.swagger-ui .dialog-ux .modal-ux {
+  background: color-mix(in srgb, #0a0a0a 72%, transparent);
+}
+
+.swagger-ui .dialog-ux .modal-ux-content {
+  background: var(--viking-surface, var(--card-bg));
+  border: 1px solid var(--viking-border-strong, var(--border));
+  border-radius: var(--viking-radius-lg, 12px);
+  box-shadow: var(--viking-shadow-lg, var(--shadow-lg));
+  padding: var(--viking-space-3, 24px);
+}
+
+.swagger-ui .dialog-ux .modal-ux-header {
+  border-bottom: 1px solid var(--viking-border, var(--border));
+  padding: 0 0 var(--viking-space-2, 16px);
+  margin-bottom: var(--viking-space-2, 16px);
+}
+
+.swagger-ui .dialog-ux .modal-ux-header h3 {
+  font-size: 1.1rem;
+  font-weight: 700;
+  color: var(--viking-text, var(--text-color));
+}
+
+.swagger-ui .auth-container h4,
+.swagger-ui .auth-container label {
+  color: var(--viking-text, var(--text-color));
+}
+
+/* ── Loading / errors ────────────────────────────────────────────────────── */
+.swagger-ui .loading-container .loading {
+  color: var(--viking-text-muted, var(--text-muted));
+}
+
+.swagger-ui .errors-wrapper {
+  background: color-mix(in srgb, var(--viking-crimson-500) 10%, transparent);
+  border: 1px solid
+    color-mix(in srgb, var(--viking-crimson-500) 30%, transparent);
+  border-radius: var(--viking-radius, 8px);
+  color: var(--viking-crimson-400);
+  margin: var(--viking-space-2, 16px) 0;
+  padding: var(--viking-space-2, 16px);
+}
+
+html[data-theme="light"] .swagger-ui .highlight-code,
+html[data-theme="light"] .swagger-ui .microlight,
+html[data-theme="light"] .swagger-ui pre,
+html[data-theme="light"] .swagger-ui .opblock-body pre.microlight {
+  background: var(--viking-charcoal-900, #111111) !important;
+}
+
+html[data-theme="light"] .swagger-ui .opblock .opblock-section-header {
+  background: color-mix(
+    in srgb,
+    var(--viking-surface-alt, var(--charcoal-800)) 35%,
+    var(--viking-surface, var(--card-bg))
+  ) !important;
+}
+
+html[data-theme="light"] .swagger-ui .filter-container input[type="text"] {
+  background: var(--viking-surface, var(--card-bg));
+  color: var(--viking-text, var(--text-color));
+}
+
+html[data-theme="light"] .swagger-ui .scheme-container select,
+html[data-theme="light"] .swagger-ui .opblock-body select,
+html[data-theme="light"] .swagger-ui select {
+  background: var(--viking-surface, var(--card-bg));
+  color: var(--viking-text, var(--text-color));
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .swagger-ui .btn:hover {
+    transform: none;
+  }
+}
+
+@media (min-width: 641px) {
+  .backend-swagger-hero {
+    padding: var(--viking-space-3) var(--viking-space-3) var(--viking-space-2);
+  }
+
+  .backend-swagger-toolbar {
+    padding: var(--viking-space-2) var(--viking-space-3);
+  }
+
+  .backend-swagger-panel #swagger-ui {
+    padding: 0 var(--viking-space-3) var(--viking-space-3);
+  }
+
+  .swagger-ui .opblock .opblock-summary {
+    flex-wrap: nowrap;
+    gap: 0;
+  }
+}