:root {
  color-scheme: light;
  --bg: #f4f6f8;
  --panel: #ffffff;
  --ink: #18202e;
  --muted: #6a7280;
  --line: #dfe4ec;
  --line-strong: #c8d1dd;
  --accent: #4f46e5;
  --accent-2: #2563eb;
  --btn-primary: linear-gradient(135deg, #3b82f6 0%, #4f46e5 55%, #6366f1 100%);
  --btn-primary-solid: #4f46e5;
  --btn-primary-ink: #ffffff;
  --btn-primary-glow: rgba(79, 70, 229, 0.30);
  --btn-primary-inset: rgba(255, 255, 255, 0.18);
  --danger: #b42318;
  --success: #15803d;
  --warning: #a16207;
  --soft: #eef2f6;
  --shadow: 0 16px 40px rgba(31, 42, 68, 0.10);
  --shadow-sm: 0 8px 22px rgba(31, 42, 68, 0.055);
  --shadow-card: 0 10px 26px rgba(31, 42, 68, 0.07);
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 12px;
  --r-pill: 999px;
  --topbar-bg: rgba(255, 255, 255, 0.92);
  --input-bg: #ffffff;
  --th-bg: #fbfcfe;
  --hover-bg: #fbfcfe;
  --chip-bg: #f8fafc;
  --chip-ink: #334155;
  --icon-btn-bg: #f8fafc;
  --icon-btn-ink: #475569;
  --icon-btn-hover-bg: #eff6ff;
  --secondary-bg: #ffffff;
  --danger-soft: #fee4e2;
  --danger-border: #fda29b;
  --danger-icon-bg: #fff7f7;
  --success-soft: #ecfdf3;
  --success-border: #bbf7d0;
  --private-soft: #eff6ff;
  --private-border: #bfdbfe;
  --warning-soft: #fffbeb;
  --warning-border: #fde68a;
  --flash-bg: #fff7ed;
  --flash-border: #fed7aa;
  --flash-ink: #9a3412;
  --code-bg: #0f172a;
  --code-panel: #182235;
  --modal-backdrop: rgba(15, 23, 42, 0.44);
  --selected-row: #eef2ff;
  --progress-track: #e8edf4;
  --help-bg: #eef2ff;
  --help-ink: #4338ca;
  --help-border: #c7d2fe;
  --help-tooltip-bg: #0f172a;
  --help-tooltip-ink: #f8fafc;
  --help-tooltip-border: #334155;
  --theme-toggle-bg: linear-gradient(145deg, #f8fafc, #eef2f7);
  --theme-toggle-glow: rgba(79, 70, 229, 0.16);
  --input-border: #d5dde8;
  --input-border-hover: #b7c3d4;
  --input-placeholder: #94a3b8;
  --input-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
  --focus-ring: 0 0 0 3px rgba(79, 70, 229, 0.18);
  --focus-border: #4f46e5;
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236a7280' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --toggle-track: #e8edf4;
  --nav-active-bg: #eef2ff;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b1220;
  --panel: #121a2b;
  --ink: #e8eef8;
  --muted: #94a3b8;
  --line: #243247;
  --line-strong: #334155;
  --accent: #818cf8;
  --accent-2: #60a5fa;
  --btn-primary: linear-gradient(135deg, #38bdf8 0%, #6366f1 52%, #8b5cf6 100%);
  --btn-primary-solid: #6366f1;
  --btn-primary-ink: #ffffff;
  --btn-primary-glow: rgba(99, 102, 241, 0.38);
  --btn-primary-inset: rgba(255, 255, 255, 0.14);
  --danger: #f87171;
  --success: #34d399;
  --warning: #fbbf24;
  --soft: #182235;
  --shadow: 0 18px 44px rgba(0, 0, 0, 0.38);
  --shadow-sm: 0 10px 24px rgba(0, 0, 0, 0.28);
  --shadow-card: 0 12px 28px rgba(0, 0, 0, 0.32);
  --topbar-bg: rgba(11, 18, 32, 0.88);
  --help-tooltip-bg: #020617;
  --help-tooltip-ink: #f8fafc;
  --help-tooltip-border: #334155;
  --nav-active-bg: #1e1b4b;
  --input-bg: #0f172a;
  --th-bg: #101827;
  --hover-bg: #172033;
  --chip-bg: #182235;
  --chip-ink: #cbd5e1;
  --icon-btn-bg: #182235;
  --icon-btn-ink: #cbd5e1;
  --icon-btn-hover-bg: #1e293b;
  --secondary-bg: #182235;
  --danger-soft: #3f1d1d;
  --danger-border: #7f1d1d;
  --danger-icon-bg: #3f1d1d;
  --success-soft: #123526;
  --success-border: #166534;
  --private-soft: #172554;
  --private-border: #1e3a8a;
  --warning-soft: #3b2f0b;
  --warning-border: #854d0e;
  --flash-bg: #2a1d0c;
  --flash-border: #92400e;
  --flash-ink: #fdba74;
  --code-bg: #070b14;
  --code-panel: #0f172a;
  --modal-backdrop: rgba(2, 6, 23, 0.72);
  --selected-row: #1e1b4b;
  --progress-track: #1e293b;
  --help-bg: #1e1b4b;
  --help-ink: #a5b4fc;
  --help-border: #3730a3;
  --theme-toggle-bg: linear-gradient(145deg, #1e293b, #0f172a);
  --theme-toggle-glow: rgba(99, 102, 241, 0.22);
  --input-border: #2b3a52;
  --input-border-hover: #3d516f;
  --input-placeholder: #64748b;
  --input-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  --focus-ring: 0 0 0 3px rgba(99, 102, 241, 0.22);
  --focus-border: #818cf8;
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --toggle-track: #1a2438;
}

* { box-sizing: border-box; }

/* Global anti-alias: fonts, SVG icons, images, canvas */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body,
button,
input,
select,
textarea {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img,
video,
canvas,
svg,
.ui-icon {
  image-rendering: auto;
  image-rendering: smooth;
  -ms-interpolation-mode: bicubic;
}
svg,
.ui-icon {
  shape-rendering: geometricPrecision;
  text-rendering: geometricPrecision;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "DM Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  background: var(--bg);
  color: var(--ink);
  transition: background-color .18s ease, color .18s ease;
}
a { color: var(--accent-2); text-decoration: none; }
main { width: min(1440px, calc(100vw - 40px)); margin: 0 auto; padding: 28px 0 48px; }
.ui-icon {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}

.topbar {
  height: 68px;
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(12px);
}
.brand {
  color: var(--ink);
  font-weight: 800;
  font-size: 1.05rem;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
  white-space: nowrap;
  min-width: 0;
}
.brand span { white-space: nowrap; }
.brand .ui-icon { color: var(--accent); }
.topbar nav,
.top-nav { display: flex; align-items: center; gap: 14px; }
.topbar nav a,
.top-nav a { color: var(--muted); font-weight: 650; font-size: .93rem; }
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.nav-link .ui-icon { width: 16px; height: 16px; }
.nav-link:hover { color: var(--ink); }
.topbar form,
.logout-form { margin: 0; }

.theme-toggle {
  width: 38px;
  height: 38px;
  min-height: 38px;
  min-width: 38px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--theme-toggle-bg);
  color: var(--ink);
  box-shadow: 0 0 0 0 transparent, inset 0 1px 0 rgba(255, 255, 255, 0.35);
  position: relative;
  overflow: hidden;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, color .16s ease;
}
.theme-toggle:hover {
  transform: none;
  border-color: var(--accent);
  box-shadow: none;
  color: var(--accent);
}
.theme-toggle:active { transform: scale(0.97); }
.theme-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-color: var(--accent);
  box-shadow: none;
}
.theme-toggle .theme-icon {
  display: grid;
  place-items: center;
  line-height: 0;
}
.theme-toggle .theme-icon .ui-icon {
  width: 18px;
  height: 18px;
}
.theme-toggle .theme-icon-sun { display: none; }
html[data-theme="dark"] .theme-toggle .theme-icon-moon { display: none; }
html[data-theme="dark"] .theme-toggle .theme-icon-sun { display: grid; }
html[data-theme="dark"] .theme-toggle {
  color: #fbbf24;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
html[data-theme="dark"] .theme-toggle:hover {
  color: #fde68a;
}

button, .button {
  border: 0;
  background: var(--btn-primary-solid);
  background-color: var(--btn-primary-solid);
  color: var(--btn-primary-ink);
  border-radius: var(--r-md);
  padding: 10px 15px;
  font-weight: 750;
  font-size: .88rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  box-shadow: none;
  filter: none;
  transition: background-color .14s ease, border-color .14s ease, color .14s ease, opacity .14s ease;
}
button:hover:not(:disabled), .button:hover {
  filter: none;
  box-shadow: none;
  background: color-mix(in srgb, var(--btn-primary-solid) 88%, #000);
  background-color: color-mix(in srgb, var(--btn-primary-solid) 88%, #000);
}
button:disabled, .button[aria-disabled="true"] {
  opacity: .6;
  cursor: wait;
}
button:active:not(:disabled), .button:active {
  transform: none;
  filter: none;
  background: color-mix(in srgb, var(--btn-primary-solid) 78%, #000);
  background-color: color-mix(in srgb, var(--btn-primary-solid) 78%, #000);
}
button:focus-visible, .button:focus-visible {
  outline: 2px solid var(--focus-border);
  outline-offset: 2px;
  box-shadow: none;
}
button.secondary, .button.secondary {
  color: var(--ink);
  background: var(--secondary-bg);
  background-color: var(--secondary-bg);
  border: 1px solid var(--line-strong);
  box-shadow: none;
  filter: none;
}
button.secondary:hover:not(:disabled), .button.secondary:hover {
  border-color: var(--line-strong);
  background: var(--soft);
  background-color: var(--soft);
  box-shadow: none;
  filter: none;
}
button.secondary:focus-visible, .button.secondary:focus-visible {
  outline: 2px solid var(--focus-border);
  outline-offset: 2px;
  box-shadow: none;
}
.button.compact {
  min-height: 34px;
  padding: 7px 11px;
  border-radius: 9px;
  font-size: .86rem;
}
button.ghost {
  color: var(--muted);
  background: transparent;
  background-color: transparent;
  border: 1px solid var(--line);
  box-shadow: none;
  filter: none;
}
button.ghost:hover:not(:disabled) {
  color: var(--ink);
  border-color: var(--input-border-hover);
  background: var(--soft);
  background-color: var(--soft);
  box-shadow: none;
  filter: none;
}
button.danger:not(.icon-button) {
  background: var(--danger-soft);
  background-color: var(--danger-soft);
  color: var(--danger);
  border: 1px solid var(--danger-border);
  min-height: 32px;
  padding: 6px 10px;
  box-shadow: none;
  filter: none;
}
button.danger:not(.icon-button):hover:not(:disabled) {
  filter: none;
  box-shadow: none;
  border-color: var(--danger);
}
input, select, textarea {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--input-border);
  border-radius: var(--r-md);
  background: var(--input-bg);
  color: var(--ink);
  padding: 10px 13px;
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.35;
  box-shadow: var(--input-shadow);
  outline: none;
  transition:
    border-color .15s ease,
    box-shadow .15s ease,
    background-color .15s ease,
    color .15s ease;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),
select,
textarea {
  appearance: none;
  -webkit-appearance: none;
}
textarea {
  min-height: 96px;
  padding-top: 11px;
  padding-bottom: 11px;
  resize: vertical;
  line-height: 1.5;
}
select {
  padding-right: 40px;
  background-color: var(--input-bg);
  background-image: var(--select-chevron);
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  cursor: pointer;
}
input::placeholder,
textarea::placeholder {
  color: var(--input-placeholder);
  font-weight: 550;
  opacity: 1;
}
input:hover:not(:disabled):not([readonly]),
select:hover:not(:disabled),
textarea:hover:not(:disabled):not([readonly]) {
  border-color: var(--input-border-hover);
}
input:focus,
select:focus,
textarea:focus,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  border-color: var(--focus-border);
  box-shadow: var(--input-shadow);
  outline: none;
}
input:disabled,
select:disabled,
textarea:disabled,
input[readonly],
textarea[readonly] {
  color: var(--muted);
  background: var(--soft);
  border-color: var(--line);
  cursor: default;
  opacity: .92;
}
input[type="number"] {
  font-variant-numeric: tabular-nums;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  height: auto;
}
input[type="datetime-local"],
input[type="date"],
input[type="time"] {
  min-height: 42px;
  color-scheme: inherit;
}
input[type="checkbox"],
input[type="radio"] {
  width: 17px;
  min-width: 17px;
  height: 17px;
  min-height: 17px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  accent-color: var(--accent);
  cursor: pointer;
  flex: 0 0 auto;
  vertical-align: middle;
}
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
  outline: 2px solid var(--focus-border);
  outline-offset: 2px;
  box-shadow: none;
}
label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-weight: 750;
  font-size: .78rem;
  letter-spacing: .02em;
}
label > span:not(.login-input-wrap):not(.label-line):not(.ui-icon):not(.help-badge) {
  color: inherit;
}
.label-line {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.field-hint {
  margin: 0;
  color: var(--muted);
  font-size: .74rem;
  font-weight: 650;
  line-height: 1.4;
}
.help-badge {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border: 1px solid var(--help-border);
  border-radius: 999px;
  background: var(--help-bg);
  color: var(--help-ink);
  font-size: .72rem;
  font-weight: 900;
  line-height: 1;
  cursor: help;
  user-select: none;
}
.help-badge::after {
  content: attr(data-help);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  z-index: 30;
  width: min(260px, calc(100vw - 40px));
  padding: 9px 10px;
  border: 1px solid var(--help-tooltip-border);
  border-radius: var(--r-sm);
  background: var(--help-tooltip-bg);
  color: var(--help-tooltip-ink);
  box-shadow: var(--shadow-sm);
  font-size: .76rem;
  font-weight: 750;
  line-height: 1.35;
  text-align: left;
  white-space: normal;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition: opacity .14s ease, transform .14s ease;
}
.help-badge::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 3px);
  z-index: 31;
  width: 9px;
  height: 9px;
  background: var(--help-tooltip-bg);
  border-right: 1px solid var(--help-tooltip-border);
  border-bottom: 1px solid var(--help-tooltip-border);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 4px) rotate(45deg);
  transition: opacity .14s ease, transform .14s ease;
}
.help-badge:hover,
.help-badge:focus-visible {
  border-color: var(--accent);
  background: var(--help-bg);
  outline: none;
}
.help-badge:hover::after,
.help-badge:hover::before,
.help-badge:focus-visible::after,
.help-badge:focus-visible::before {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Immersive login (Three.js warp scene) — theme-aware day/night */
body:has(.login-immersive) {
  background: #dbeafe;
}
html[data-theme="dark"] body:has(.login-immersive) {
  background: #020617;
}
body:has(.login-immersive) .topbar {
  background: rgba(255, 255, 255, 0.72);
  border-bottom-color: rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(16px);
}
body:has(.login-immersive) .topbar .brand {
  color: #0f172a;
}
body:has(.login-immersive) .topbar .nav-link,
body:has(.login-immersive) .topbar button.ghost {
  color: #475569;
}
body:has(.login-immersive) .topbar .nav-link:hover { color: #0f172a; }
body:has(.login-immersive) .brand .ui-icon { color: #4f46e5; }

html[data-theme="dark"] body:has(.login-immersive) .topbar {
  background: rgba(2, 6, 23, 0.42);
  border-bottom-color: rgba(148, 163, 184, 0.12);
}
html[data-theme="dark"] body:has(.login-immersive) .topbar .brand,
html[data-theme="dark"] body:has(.login-immersive) .topbar button.ghost {
  color: #e2e8f0;
}
html[data-theme="dark"] body:has(.login-immersive) .topbar .nav-link { color: #94a3b8; }
html[data-theme="dark"] body:has(.login-immersive) .topbar .nav-link:hover { color: #f8fafc; }
html[data-theme="dark"] body:has(.login-immersive) .brand .ui-icon { color: #818cf8; }

body:has(.login-immersive) main {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  min-height: calc(100vh - 68px);
}
body:has(.login-immersive) .flash-wrap { display: none !important; }

.login-immersive {
  position: relative;
  isolation: isolate;
  min-height: calc(100vh - 68px);
  overflow: hidden;
  background: radial-gradient(120% 80% at 50% 35%, #eff6ff 0%, #dbeafe 42%, #bfdbfe 100%);
  transition: background .35s ease;
}
html[data-theme="dark"] .login-immersive {
  background: radial-gradient(120% 80% at 50% 40%, #0b1c33 0%, #020617 55%, #000 100%);
}
.login-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}
.login-glow {
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
  z-index: 1;
  filter: blur(60px);
  opacity: .55;
}
.login-glow-a {
  width: min(52vw, 560px);
  height: min(52vw, 560px);
  left: 8%;
  top: 18%;
  background: radial-gradient(circle, rgba(79, 70, 229, 0.18), transparent 68%);
}
.login-glow-b {
  width: min(42vw, 420px);
  height: min(42vw, 420px);
  right: 10%;
  bottom: 8%;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.2), transparent 70%);
}
html[data-theme="dark"] .login-glow-a {
  background: radial-gradient(circle, rgba(99, 102, 241, 0.32), transparent 68%);
}
html[data-theme="dark"] .login-glow-b {
  background: radial-gradient(circle, rgba(56, 189, 248, 0.28), transparent 70%);
}
.login-grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(15, 23, 42, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, 0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at center, black 20%, transparent 78%);
  opacity: .35;
}
html[data-theme="dark"] .login-grid {
  background-image:
    linear-gradient(rgba(148, 163, 184, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.05) 1px, transparent 1px);
  opacity: .45;
}
.login-stage {
  position: relative;
  z-index: 2;
  width: min(1180px, calc(100% - 40px));
  min-height: calc(100vh - 68px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 420px);
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
  padding: 28px 0 48px;
}
.login-hud-copy {
  color: #0f172a;
  max-width: 560px;
  padding: 8px 4px;
  transition: color .25s ease;
}
html[data-theme="dark"] .login-hud-copy { color: #e2e8f0; }
.login-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(79, 70, 229, 0.22);
  background: rgba(224, 231, 255, 0.78);
  color: #4338ca;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
html[data-theme="dark"] .login-kicker {
  border-color: rgba(129, 140, 248, 0.32);
  background: rgba(67, 56, 202, 0.18);
  color: #c7d2fe;
}
.login-kicker .ui-icon { width: 15px; height: 15px; }
.login-headline {
  margin: 0;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 900;
  color: #0f172a;
}
html[data-theme="dark"] .login-headline { color: #f8fafc; }
.login-headline span {
  background: linear-gradient(110deg, #2563eb 0%, #4f46e5 55%, #7c3aed 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
html[data-theme="dark"] .login-headline span {
  background: linear-gradient(110deg, #38bdf8 0%, #818cf8 55%, #c4b5fd 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.login-lede {
  margin: 16px 0 0;
  max-width: 46ch;
  color: #475569;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.6;
}
html[data-theme="dark"] .login-lede { color: #94a3b8; }
.login-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 28px;
  max-width: 420px;
}
.login-stat {
  padding: 12px 12px 11px;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(10px);
}
html[data-theme="dark"] .login-stat {
  border-color: rgba(148, 163, 184, 0.16);
  background: rgba(15, 23, 42, 0.45);
}
.login-stat strong {
  display: block;
  color: #0f172a;
  font-size: .98rem;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}
html[data-theme="dark"] .login-stat strong { color: #f1f5f9; }
.login-stat small {
  color: #64748b;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.login-panel {
  width: min(460px, 100%);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow);
  padding: 28px;
  display: grid;
  gap: 18px;
}
.settings-panel {
  display: grid;
  gap: 18px;
}
.login-immersive .login-panel {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.88) 48%, rgba(241, 245, 249, 0.9));
  box-shadow:
    0 28px 70px rgba(15, 23, 42, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(22px) saturate(1.25);
  padding: clamp(26px, 4vw, 34px);
  color: #0f172a;
  transition: background .3s ease, border-color .3s ease, color .3s ease, box-shadow .3s ease;
}
html[data-theme="dark"] .login-immersive .login-panel {
  border-color: rgba(255, 255, 255, 0.14);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.14), rgba(15, 23, 42, 0.55) 42%, rgba(2, 6, 23, 0.72));
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  color: #e2e8f0;
}
.login-panel-shine {
  position: absolute;
  inset: -40% -20% auto;
  height: 70%;
  background: radial-gradient(circle at 30% 20%, rgba(99, 102, 241, 0.16), transparent 55%);
  pointer-events: none;
}
html[data-theme="dark"] .login-panel-shine {
  background: radial-gradient(circle at 30% 20%, rgba(165, 180, 252, 0.2), transparent 55%);
}
.login-mark {
  width: 48px;
  height: 48px;
  display: inline-grid;
  place-items: center;
  color: #4f46e5;
  background: rgba(224, 231, 255, 0.9);
  border: 1px solid rgba(129, 140, 248, 0.45);
  border-radius: 14px;
  box-shadow: none;
}
html[data-theme="dark"] .login-mark {
  color: #a5b4fc;
  background: rgba(67, 56, 202, 0.22);
  border-color: rgba(129, 140, 248, 0.35);
  box-shadow: none;
}
.login-mark .ui-icon {
  width: 22px;
  height: 22px;
}
.login-panel h1, .page-head h1 { margin: 0; font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.02; }
.login-immersive .login-panel h1 {
  color: #0f172a;
  font-size: clamp(1.85rem, 3.4vw, 2.45rem);
  letter-spacing: -0.03em;
}
html[data-theme="dark"] .login-immersive .login-panel h1 { color: #f8fafc; }
.login-immersive .login-panel .eyebrow {
  color: #4f46e5;
}
html[data-theme="dark"] .login-immersive .login-panel .eyebrow {
  color: #a5b4fc;
}
.login-copy {
  margin: 12px 0 0;
  color: var(--muted);
  font-weight: 650;
  line-height: 1.55;
}
.login-immersive .login-copy {
  color: #64748b;
  margin-top: 8px;
  font-size: .94rem;
}
html[data-theme="dark"] .login-immersive .login-copy { color: #94a3b8; }
.login-immersive .login-panel label {
  color: #64748b;
}
html[data-theme="dark"] .login-immersive .login-panel label {
  color: #94a3b8;
}
.login-input-wrap {
  position: relative;
  display: block;
}
.login-input-wrap .ui-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  width: 17px;
  height: 17px;
  color: var(--input-placeholder);
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 1;
  transition: color .15s ease;
}
.login-input-wrap input {
  padding-left: 44px;
  min-height: 48px;
  border-radius: 12px;
  font-size: .95rem;
  letter-spacing: .08em;
}
.login-immersive .login-input-wrap input {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(15, 23, 42, 0.12);
  color: #0f172a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
html[data-theme="dark"] .login-immersive .login-input-wrap input {
  background: rgba(2, 6, 23, 0.55);
  border-color: rgba(148, 163, 184, 0.28);
  color: #f8fafc;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.login-immersive .login-input-wrap input:focus {
  border-color: #4f46e5;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.18);
}
html[data-theme="dark"] .login-immersive .login-input-wrap input:focus {
  border-color: #818cf8;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.24);
}
.login-input-wrap:focus-within .ui-icon {
  color: var(--accent);
}
.login-immersive .login-input-wrap:focus-within .ui-icon {
  color: #4f46e5;
}
html[data-theme="dark"] .login-immersive .login-input-wrap:focus-within .ui-icon {
  color: #a5b4fc;
}
.login-panel button {
  min-height: 48px;
  border-radius: 12px;
  font-size: .92rem;
}
.login-immersive .login-panel button[type="submit"] {
  min-height: 50px;
  border-radius: 12px;
  background: var(--btn-primary-solid);
  background-color: var(--btn-primary-solid);
  color: var(--btn-primary-ink);
  box-shadow: none;
  filter: none;
}
.login-immersive .login-panel button[type="submit"]:hover {
  filter: none;
  box-shadow: none;
  background: color-mix(in srgb, var(--btn-primary-solid) 88%, #000);
  background-color: color-mix(in srgb, var(--btn-primary-solid) 88%, #000);
}
.login-footnote {
  margin: 0;
  color: #64748b;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-align: center;
}
.eyebrow { margin: 0 0 8px; color: var(--accent); font-size: .78rem; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; }

@media (max-width: 960px) {
  .login-stage {
    grid-template-columns: 1fr;
    align-content: center;
    gap: 28px;
    width: min(520px, calc(100% - 28px));
    padding: 20px 0 36px;
  }
  .login-hud-copy { order: 2; text-align: center; max-width: none; }
  .login-lede { margin-left: auto; margin-right: auto; }
  .login-stats { margin-left: auto; margin-right: auto; }
  .login-kicker { margin-left: auto; margin-right: auto; }
  .login-immersive .login-panel { order: 1; }
}
@media (max-width: 560px) {
  .login-stats { grid-template-columns: 1fr; }
  .login-headline { font-size: 2rem; }
}

.page-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 20px;
  margin: 12px 0 26px;
  padding: 28px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-card);
}
.page-head-lite {
  padding: 18px 22px;
  margin: 8px 0 20px;
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-sm);
}
.page-head-lite h1 { font-size: clamp(1.45rem, 2.2vw, 1.75rem); }
.page-head-lite .page-subtitle { margin-top: 6px; }
.page-subtitle {
  margin: 10px 0 0;
  color: var(--muted);
  max-width: 660px;
  font-weight: 600;
}
.head-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 26px;
}
.stat, aside, .panel-aside, .table-wrap, .uploader-shell, .panel-block {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-sm);
}
.stat {
  padding: 16px;
  display: grid;
  gap: 6px;
  position: relative;
  overflow: hidden;
}
.stat::before {
  content: "";
  width: 4px;
  position: absolute;
  inset: 16px auto 16px 0;
  background: var(--accent);
  border-radius: 0 4px 4px 0;
}
.stat span { font-size: 1.55rem; font-weight: 850; line-height: 1; }
.stat small { color: var(--muted); font-weight: 850; text-transform: uppercase; font-size: .68rem; letter-spacing: .06em; }
.stat em { color: var(--muted); font-style: normal; font-size: .78rem; }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: 18px;
  align-items: start;
}
.split > * { min-width: 0; }
@media (max-width: 1100px) {
  .split { grid-template-columns: 1fr; }
}
.section-title { display: flex; justify-content: space-between; gap: 18px; align-items: center; margin-bottom: 12px; }
h2 { margin: 0; font-size: 1rem; }
.inline-search { display: flex; gap: 8px; min-width: min(420px, 100%); }
.inline-search input { min-width: 230px; }

.table-wrap { overflow: hidden; }
table { width: 100%; border-collapse: collapse; table-layout: auto; }
th, td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--line); font-size: .84rem; vertical-align: middle; }
th { color: var(--muted); background: var(--th-bg); font-size: .67rem; font-weight: 850; text-transform: uppercase; letter-spacing: .06em; position: sticky; top: 0; }
/* Recent-files / generic file tables only — never apply to keys/webhooks */
.files-table { table-layout: fixed; }
.files-table th:nth-child(1), .files-table td:nth-child(1) { width: 29%; }
.files-table th:nth-child(2), .files-table td:nth-child(2) { width: 17%; }
.files-table th:nth-child(3), .files-table td:nth-child(3) { width: 8%; }
.files-table th:nth-child(4), .files-table td:nth-child(4) { width: 10%; }
.files-table th:nth-child(5), .files-table td:nth-child(5) { width: 10%; }
.files-table th:nth-child(6), .files-table td:nth-child(6) { width: 13%; white-space: nowrap; }
.files-table th:nth-child(7), .files-table td:nth-child(7) { width: 13%; }
.keys-table-wrap {
  overflow-x: auto;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.keys-table {
  table-layout: fixed;
  width: 100%;
  min-width: 1080px;
  border-collapse: separate;
  border-spacing: 0;
}
.keys-table th,
.keys-table td {
  vertical-align: middle;
  overflow: visible;
  padding: 12px 12px;
}
.keys-table th:nth-child(1), .keys-table td:nth-child(1) { width: 140px; }
.keys-table th:nth-child(2), .keys-table td:nth-child(2) { width: 120px; }
.keys-table th:nth-child(3), .keys-table td:nth-child(3) { width: auto; min-width: 260px; }
.keys-table th:nth-child(4), .keys-table td:nth-child(4) { width: 88px; white-space: nowrap; }
.keys-table th:nth-child(5), .keys-table td:nth-child(5) { width: 130px; }
.keys-table th:nth-child(6), .keys-table td:nth-child(6) { width: 150px; }
.keys-table th:nth-child(7), .keys-table td:nth-child(7) { width: 92px; }
.keys-table th:nth-child(8), .keys-table td:nth-child(8) {
  width: 120px;
  white-space: nowrap;
  text-align: right;
}
.keys-table td:nth-child(1),
.keys-table td:nth-child(2),
.keys-table td:nth-child(5),
.keys-table td:nth-child(6) {
  overflow: hidden;
  text-overflow: ellipsis;
}
.keys-table .key-action {
  display: inline-flex;
  justify-content: flex-end;
  width: 100%;
  margin: 0;
}
.keys-table .key-action button {
  min-height: 34px;
  min-width: 104px;
  padding: 7px 12px;
  white-space: nowrap;
  flex: 0 0 auto;
}
tbody tr:hover { background: var(--hover-bg); }
td:first-child { font-weight: 720; }
.file-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
}
.file-cell { display: grid; gap: 3px; min-width: 0; }
.file-cell strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .88rem;
  line-height: 1.15;
}
.file-cell span { color: var(--muted); font-size: .72rem; font-weight: 700; }
.file-id-chip {
  display: block;
  max-width: 100%;
  margin: 2px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: .68rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  opacity: .72;
}
.file-id-chip.static {
  cursor: default;
  pointer-events: none;
  opacity: .65;
}
.file-id-chip:hover,
.file-id-chip:focus-visible {
  color: var(--accent-2);
  opacity: 1;
  outline: none;
}
.inspector-name .file-id-chip {
  opacity: .85;
}
.file-row:focus-visible {
  outline: 2px solid var(--focus-border);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
.mime-pill, .status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: .72rem;
  font-weight: 800;
  white-space: nowrap;
}
.mime-pill {
  max-width: 100%;
  color: var(--chip-ink);
  background: var(--soft);
  border: 1px solid var(--line);
  overflow: hidden;
  text-overflow: ellipsis;
}
.status-pill {
  color: var(--chip-ink);
  background: var(--chip-bg);
  border: 1px solid var(--line);
  text-transform: capitalize;
}
.status-pill.public, .status-pill.active {
  color: var(--success);
  background: var(--success-soft);
  border-color: var(--success-border);
}
.status-pill.private {
  color: var(--accent-2);
  background: var(--private-soft);
  border-color: var(--private-border);
}
.status-pill.disabled {
  color: var(--warning);
  background: var(--warning-soft);
  border-color: var(--warning-border);
}
.actions-head { text-align: right; }
.actions {
  text-align: right;
  white-space: nowrap;
}
.actions form { margin: 0; }
.action-group {
  display: inline-grid;
  grid-template-columns: repeat(3, 30px);
  align-items: center;
  justify-content: end;
  gap: 6px;
}
.icon-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 750;
}
.icon-link .ui-icon { width: 15px; height: 15px; }
.icon-button {
  width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  color: var(--icon-btn-ink);
  background: var(--icon-btn-bg);
  background-color: var(--icon-btn-bg);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: none;
  filter: none;
  position: relative;
}
.icon-button:hover {
  color: var(--accent-2);
  background: var(--icon-btn-hover-bg);
  background-color: var(--icon-btn-hover-bg);
  border-color: var(--private-border);
  box-shadow: none;
  filter: none;
}
.icon-button span {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
.icon-button.danger {
  color: var(--danger);
  background: var(--danger-icon-bg);
  border-color: var(--danger-border);
}
.icon-button .ui-icon { width: 16px; height: 16px; }
.table-file-icon {
  position: relative;
  width: 30px;
  height: 36px;
  display: grid;
  place-items: end center;
  padding-bottom: 5px;
  color: #0f172a;
  background: linear-gradient(145deg, #ffffff 0 70%, #e2e8f0 70% 100%);
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  box-shadow: inset 0 -8px 14px rgba(148, 163, 184, 0.14);
}
.table-file-icon::before {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  border-top: 10px solid #e2e8f0;
  border-left: 10px solid transparent;
  border-top-right-radius: 7px;
}
.table-file-icon span {
  position: relative;
  z-index: 1;
  max-width: 24px;
  padding: 2px 3px;
  color: white;
  background: #64748b;
  border-radius: 4px;
  font-size: .47rem;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0;
  text-align: center;
}
.table-file-icon.image span { background: #0891b2; }
.table-file-icon.video span { background: #7c3aed; }
.table-file-icon.audio span { background: #0f766e; }
.table-file-icon.text span { background: #475569; }
.table-file-icon.pdf span { background: #dc2626; }
.table-file-icon.archive span { background: #b45309; }
.table-file-icon.code span { background: #2563eb; }
.table-file-icon.design span { background: #c026d3; }
.table-file-icon.app span { background: #4f46e5; }

aside { padding: 14px; display: grid; gap: 12px; }
.category-list { display: grid; gap: 10px; }
.category-item {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
  background: var(--th-bg);
}
.category-item strong, .category-item span { display: block; }
.category-item strong { font-size: .88rem; }
.category-item span { color: var(--muted); font-size: .76rem; font-weight: 700; }
.stack-form { display: grid; gap: 12px; }
.form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.stack-form label { font-size: .76rem; }
.stack-form input,
.stack-form select,
.stack-form textarea {
  min-height: 40px;
  padding: 9px 12px;
  font-size: .86rem;
  border-radius: 9px;
}
.panel-block { padding: 18px; margin-top: 22px; display: grid; gap: 16px; }
.key-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: stretch;
  min-width: 0;
}
.key-form-fields {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
  min-width: 0;
}
.key-form-actions {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
}
.fleet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 14px;
}
.fleet-card {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--th-bg);
}
.fleet-card-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}
.fleet-card-head h2 { margin: 0 0 4px; }
.fleet-card-head span:not(.status-pill) { color: var(--muted); font-weight: 700; font-size: .88rem; }
.fleet-meta {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: 8px 12px;
  margin: 0;
  font-size: .9rem;
}
.fleet-meta dt {
  color: var(--muted);
  font-weight: 850;
}
.fleet-meta dd {
  margin: 0;
  overflow-wrap: anywhere;
}
.fleet-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.fleet-actions form { margin: 0; }
.install-form {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 140px auto;
  gap: 10px;
  align-items: end;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.fleet-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
}

.settings-panel {
  margin-top: 12px;
  width: min(880px, 100%);
  gap: 18px;
  border-radius: var(--r-lg);
}
.settings-panel:not(.settings-grouped) {
  padding: 22px;
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.settings-panel > button[type="submit"] {
  justify-self: start;
  min-width: 160px;
  margin-top: 4px;
}
.fleet-form input,
.fleet-form select,
.install-form input,
.key-form input,
.key-form select {
  min-height: 40px;
  border-radius: 9px;
}
.field-group {
  display: grid;
  gap: 8px;
}
.field-group > label {
  color: var(--muted);
  font-weight: 750;
  font-size: .78rem;
  letter-spacing: .02em;
}
.filetype-setting textarea {
  min-height: 96px;
  resize: vertical;
}
.filetype-picker {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}
.search-wrap {
  position: relative;
}
.search-wrap .ui-icon {
  position: absolute;
  left: 13px;
  top: 50%;
  width: 17px;
  height: 17px;
  color: var(--input-placeholder);
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 1;
  transition: color .15s ease;
}
.search-wrap:focus-within .ui-icon {
  color: var(--accent);
}
.search-wrap input {
  padding-left: 42px;
}
.suggestion-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  max-height: 280px;
  overflow: auto;
  padding: 10px;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 12px;
  align-items: stretch;
}
.suggestion-item {
  width: 100%;
  min-width: 0;
  min-height: 70px;
  height: 100%;
  margin: 0;
  padding: 10px 11px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  text-align: left;
  overflow: hidden;
  box-shadow: none;
  transition: border-color .16s ease, background .16s ease;
}
.suggestion-item:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--panel));
  box-shadow: none;
  transform: none;
}
.suggestion-item.selected {
  color: var(--success);
  background: var(--success-soft);
  border-color: var(--success-border);
}
.filetype-icon {
  position: relative;
  width: 36px;
  height: 42px;
  flex: 0 0 36px;
  display: grid;
  place-items: end center;
  padding-bottom: 6px;
  color: #0f172a;
  background: linear-gradient(145deg, #ffffff 0 70%, #e2e8f0 70% 100%);
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  box-shadow: inset 0 -10px 18px rgba(148, 163, 184, 0.16);
  overflow: hidden;
}
.filetype-icon::before {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  border-top: 11px solid #e2e8f0;
  border-left: 11px solid transparent;
  border-top-right-radius: 7px;
}
.filetype-icon span {
  position: relative;
  z-index: 1;
  max-width: 28px;
  padding: 2px 3px;
  color: white;
  background: #64748b;
  border-radius: 4px;
  font-size: .52rem;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.filetype-icon.image span { background: #0891b2; }
.filetype-icon.video span { background: #7c3aed; }
.filetype-icon.audio span { background: #0f766e; }
.filetype-icon.text span { background: #475569; }
.filetype-icon.pdf span { background: #dc2626; }
.filetype-icon.archive span { background: #b45309; }
.filetype-icon.code span { background: #2563eb; }
.filetype-icon.design span { background: #c026d3; }
.filetype-icon.mime span,
.filetype-icon.app span { background: #4f46e5; }
.suggestion-copy {
  min-width: 0;
  max-width: 100%;
  display: grid;
  gap: 3px;
  overflow: hidden;
}
.suggestion-item strong {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .86rem;
  line-height: 1.25;
  font-weight: 800;
}
.suggestion-item span,
.suggestion-empty {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 700;
}
.suggestion-item .filetype-icon span {
  color: white;
  font-size: .52rem;
}
.suggestion-item .suggestion-copy > span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.suggestion-empty {
  grid-column: 1 / -1;
  padding: 14px;
  background: var(--panel);
  border: 1px dashed var(--line);
  border-radius: 7px;
}
.explorer-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.explorer-main {
  display: grid;
  gap: 18px;
  min-width: 0;
}
.explorer-filters {
  display: block;
  gap: 14px;
  padding: 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
}
.explorer-filters label,
.explorer-filters input,
.explorer-filters select {
  min-width: 0;
}
.explorer-filters input,
.explorer-filters select {
  min-height: 40px;
  border-radius: var(--r-md);
}
.explorer-filters .filter-wide { grid-column: auto; }
.filter-actions {
  display: flex;
  gap: 8px;
  align-items: end;
}
.filter-actions button {
  min-height: 40px;
  border-radius: 9px;
}
.inline-search input {
  min-height: 40px;
  border-radius: 9px;
}
.result-count {
  color: var(--muted);
  font-weight: 750;
}
.explorer-table table {
  table-layout: fixed;
  min-width: 0;
}
.explorer-table tbody tr {
  height: 52px;
}
.explorer-table th,
.explorer-table td {
  height: 52px;
  padding-top: 8px;
  padding-bottom: 8px;
  vertical-align: middle;
}
.explorer-table thead th {
  height: 36px;
}
.explorer-table .actions { text-align: right; }
.explorer-table .icon-button {
  width: 30px;
  height: 30px;
  min-height: 30px;
  align-self: center;
}
/* Checkbox + name layout (8 columns after bulk-select was added) */
.explorer-table th:nth-child(1),
.explorer-table td:nth-child(1) { width: 40px; padding-left: 10px; padding-right: 4px; }
.explorer-table th:nth-child(2),
.explorer-table td:nth-child(2) { width: auto; min-width: 0; }
.explorer-table th:nth-child(3),
.explorer-table td:nth-child(3) { width: 15%; }
.explorer-table th:nth-child(4),
.explorer-table td:nth-child(4) { width: 9%; white-space: nowrap; }
.explorer-table th:nth-child(5),
.explorer-table td:nth-child(5) { width: 10%; }
.explorer-table th:nth-child(6),
.explorer-table td:nth-child(6) { width: 7%; white-space: nowrap; }
.explorer-table th:nth-child(7),
.explorer-table td:nth-child(7) { width: 10%; white-space: nowrap; }
.explorer-table th:nth-child(8),
.explorer-table td:nth-child(8) {
  width: 120px;
  padding-left: 8px;
  padding-right: 10px;
}
.explorer-table td:nth-child(6),
.explorer-table td:nth-child(7) {
  font-variant-numeric: tabular-nums;
}
.file-select {
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: auto;
  display: grid;
  justify-content: stretch;
  justify-items: stretch;
  align-items: center;
  padding: 0;
  margin: 0;
  color: inherit;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0;
  box-shadow: none !important;
  filter: none !important;
  text-align: left;
  font: inherit;
  font-weight: inherit;
  cursor: pointer;
}
.file-select:hover,
.file-select:active,
.file-select:focus-visible {
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none;
  color: inherit;
}
.file-select .file-row {
  width: 100%;
  justify-items: start;
}
.file-select .file-cell {
  pointer-events: none;
  text-align: left;
  justify-items: start;
}
.selected-row td { background: var(--selected-row); }
.file-inspector {
  position: static;
  display: grid;
  gap: 14px;
  padding: 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 10px 26px rgba(31, 42, 68, 0.06);
}
.file-inspector h2 {
  margin: 0;
  font-size: 1.05rem;
}
.file-inspector p {
  margin: 8px 0 0;
  color: var(--muted);
  font-weight: 650;
}
.file-inspector form {
  display: grid;
  gap: 14px;
}
.inspector-name {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.inspector-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.inspector-meta span {
  padding: 5px 8px;
  color: var(--muted);
  background: var(--chip-bg);
  border: 1px solid var(--line);
  border-radius: 7px;
  font-size: .78rem;
  font-weight: 750;
}
.file-modal-backdrop {
  position: fixed;
  inset: 0;
  /* Above image hover preview (1400) so edit dialog never sits under the tip */
  z-index: 1500;
  display: grid;
  place-items: center;
  padding: 22px;
  background: var(--modal-backdrop);
}
.file-modal-backdrop[hidden] {
  display: none;
}
.file-edit-modal {
  width: min(560px, 100%);
  max-height: min(720px, calc(100vh - 44px));
  display: grid;
  gap: 14px;
  padding: 20px;
  overflow: auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}
.file-edit-modal .modal-head {
  align-items: center;
}
.file-edit-modal h2 {
  margin: 0;
  font-size: 1.12rem;
}
.file-edit-modal label {
  display: grid;
  gap: 7px;
}
.file-edit-modal input,
.file-edit-modal select,
.file-edit-modal textarea,
.editor-modal input,
.editor-modal select,
.editor-modal textarea {
  border-radius: 10px;
}
.file-edit-modal .modal-actions {
  align-items: center;
}
body.modal-open {
  overflow: hidden;
}
.empty-state {
  padding: 28px;
  color: var(--muted);
  text-align: center;
  font-weight: 750;
}
.empty-state[hidden],
.empty-state-rich[hidden],
.table-loading[hidden] {
  display: none !important;
}
/* Legacy flash blocks (hidden; drained into UploadNotify) */
.flash-wrap { display: none !important; }
.flash { display: none !important; }

/* Global notification system */
.notify-root {
  position: fixed;
  inset: 0;
  z-index: 1800;
  pointer-events: none;
}
.notify-region {
  position: absolute;
  top: 18px;
  right: 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  width: min(420px, calc(100vw - 28px));
  max-height: calc(100vh - 36px);
  overflow: visible;
}
.notify-toast {
  pointer-events: auto;
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 32px;
  gap: 10px;
  align-items: start;
  width: 100%;
  padding: 13px 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  color: var(--ink);
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.18);
  backdrop-filter: blur(14px);
  overflow: hidden;
  opacity: 0;
  transform: translate3d(18px, -6px, 0) scale(0.98);
  transition:
    opacity .22s ease,
    transform .22s cubic-bezier(.2, .8, .2, 1),
    box-shadow .18s ease;
}
.notify-toast.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}
.notify-toast.is-leaving {
  opacity: 0;
  transform: translate3d(24px, -4px, 0) scale(0.98);
}
.notify-toast.is-pulse {
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.18), 0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent);
}
.notify-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  border: 1px solid transparent;
}
.notify-icon-svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.notify-body {
  min-width: 0;
  padding-top: 2px;
  display: grid;
  gap: 3px;
}
.notify-title {
  font-size: .9rem;
  font-weight: 850;
  line-height: 1.25;
}
.notify-message {
  margin: 0;
  color: var(--muted);
  font-size: .84rem;
  font-weight: 650;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.notify-close {
  width: 32px;
  height: 32px;
  min-height: 32px;
  min-width: 32px;
  padding: 0;
  border-radius: 9px;
  border: 0;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
}
.notify-close:hover {
  color: var(--ink);
  background: var(--soft);
  box-shadow: none;
}
.notify-close .notify-icon-svg {
  width: 16px;
  height: 16px;
}
.notify-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: color-mix(in srgb, var(--line) 70%, transparent);
  overflow: hidden;
}
.notify-progress-bar {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: left center;
  transform: scaleX(1);
  background: var(--accent);
  opacity: .9;
}
.notify-progress-bar.is-running {
  animation-name: notify-progress;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
@keyframes notify-progress {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

.notify-success {
  border-color: color-mix(in srgb, var(--success) 35%, var(--line));
}
.notify-success .notify-icon {
  color: var(--success);
  background: var(--success-soft);
  border-color: var(--success-border);
}
.notify-success .notify-progress-bar { background: var(--success); }

.notify-error {
  border-color: color-mix(in srgb, var(--danger) 35%, var(--line));
}
.notify-error .notify-icon {
  color: var(--danger);
  background: var(--danger-soft);
  border-color: var(--danger-border);
}
.notify-error .notify-progress-bar { background: var(--danger); }

.notify-warning {
  border-color: color-mix(in srgb, var(--warning) 40%, var(--line));
}
.notify-warning .notify-icon {
  color: var(--warning);
  background: var(--warning-soft);
  border-color: var(--warning-border);
}
.notify-warning .notify-progress-bar { background: var(--warning); }

.notify-info {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
}
.notify-info .notify-icon {
  color: var(--accent);
  background: var(--help-bg);
  border-color: var(--help-border);
}
.notify-info .notify-progress-bar { background: var(--accent); }

@media (max-width: 640px) {
  .notify-region {
    top: auto;
    bottom: 14px;
    right: 14px;
    left: 14px;
    width: auto;
    align-items: stretch;
  }
  .notify-toast {
    transform: translate3d(0, 12px, 0) scale(0.98);
  }
  .notify-toast.is-visible {
    transform: translate3d(0, 0, 0) scale(1);
  }
  .notify-toast.is-leaving {
    transform: translate3d(0, 12px, 0) scale(0.98);
  }
}

.uploader-shell { padding: 22px; display: grid; gap: 18px; }
.dropzone {
  min-height: 280px;
  border: 2px dashed var(--line-strong);
  border-radius: 8px;
  display: grid;
  place-items: center;
  text-align: center;
  background: var(--th-bg);
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease;
}
.dropzone:hover, .dropzone.active {
  border-color: var(--accent);
  background: var(--selected-row);
  box-shadow: none;
}
.dropzone.paste-flash {
  border-color: var(--accent);
  background: var(--selected-row);
  box-shadow: none;
  animation: dropzone-paste-pulse .7s ease;
}
@keyframes dropzone-paste-pulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.008); }
  100% { transform: scale(1); }
}
.dropzone input { display: none; }
.drop-icon {
  width: 54px;
  height: 54px;
  display: inline-grid;
  place-items: center;
  margin-bottom: 14px;
  color: var(--accent);
  background: var(--success-soft);
  border: 1px solid var(--success-border);
  border-radius: 8px;
}
.drop-icon .ui-icon {
  width: 26px;
  height: 26px;
}
.dropzone strong { display: block; font-size: 1.35rem; margin-bottom: 6px; }
.dropzone span:not(.drop-icon) { color: var(--muted); }
.compact-label { max-width: 360px; }
.upload-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 360px));
  gap: 14px;
}
.toggle-field {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-weight: 700;
  font-size: .9rem;
}
.toggle-label { display: block; }
.visibility-toggle {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  width: min(360px, 100%);
  min-height: 46px;
  padding: 4px;
  background: var(--toggle-track);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
}
.toggle-option {
  min-height: 36px;
  padding: 8px 12px;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 9px;
  box-shadow: none;
  transition: color .14s ease, background-color .14s ease, box-shadow .14s ease;
}
.toggle-option.active {
  color: var(--ink);
  background: var(--panel);
  box-shadow: none;
  border: 1px solid var(--line);
}
.toggle-option[data-visibility="private"].active {
  color: var(--accent-2);
}
.toggle-option[data-visibility="public"].active {
  color: var(--success);
}
.toggle-option .ui-icon {
  width: 16px;
  height: 16px;
}
.queue { display: grid; gap: 10px; }
.queue-item {
  display: grid;
  grid-template-columns: minmax(240px, .9fr) minmax(240px, 360px) minmax(260px, .8fr);
  gap: 18px;
  align-items: center;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
  box-shadow: 0 7px 18px rgba(31, 42, 68, 0.05);
}
.queue-item.complete { border-color: var(--success-border); }
.queue-item.failed { border-color: var(--danger-border); background: var(--danger-soft); }
.upload-file {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-width: 0;
}
.upload-file-meta {
  min-width: 0;
}
.upload-file strong, .upload-file span { display: block; overflow-wrap: anywhere; }
.upload-file span { color: var(--muted); font-size: .86rem; margin-top: 4px; }
/* Floating image hover preview (dashboard / files tables) */
[data-image-preview] {
  cursor: zoom-in;
  position: relative;
}
[data-image-preview]::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 10px;
  border: 1px solid transparent;
  pointer-events: none;
  transition: border-color .14s ease, box-shadow .14s ease;
}
[data-image-preview]:hover::after,
[data-image-preview]:focus-within::after {
  border-color: color-mix(in srgb, var(--btn-primary-solid) 45%, transparent);
  box-shadow: none;
}
.image-hover-preview {
  position: fixed;
  z-index: 1400;
  left: 0;
  top: 0;
  width: min(380px, 46vw);
  max-height: min(400px, 58vh);
  padding: 10px;
  border-radius: 14px;
  border: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--panel) 96%, transparent);
  box-shadow:
    0 22px 56px rgba(15, 23, 42, 0.34),
    0 0 0 1px color-mix(in srgb, var(--btn-primary-solid) 12%, transparent);
  backdrop-filter: blur(12px);
  opacity: 0;
  transform: scale(0.96) translateY(4px);
  pointer-events: none;
  transition: opacity .14s ease, transform .14s ease;
}
html[data-theme="dark"] .image-hover-preview {
  background: color-mix(in srgb, var(--panel) 94%, #000);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.5),
    0 0 0 1px color-mix(in srgb, var(--btn-primary-solid) 22%, transparent);
}
.image-hover-preview.is-visible {
  opacity: 1;
  transform: scale(1) translateY(0);
}
.image-hover-preview-frame {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 120px;
  border-radius: 10px;
  overflow: hidden;
  background:
    linear-gradient(45deg, var(--soft) 25%, transparent 25%),
    linear-gradient(-45deg, var(--soft) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--soft) 75%),
    linear-gradient(-45deg, transparent 75%, var(--soft) 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-color: var(--panel);
}
.image-hover-preview.is-loading .image-hover-preview-frame::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--btn-primary-solid) 25%, transparent);
  border-top-color: var(--btn-primary-solid);
  animation: image-hover-spin .7s linear infinite;
}
@keyframes image-hover-spin {
  to { transform: rotate(360deg); }
}
.image-hover-preview img {
  display: block;
  width: 100%;
  max-height: min(320px, 48vh);
  object-fit: contain;
  border-radius: 10px;
  background: transparent;
}
.image-hover-preview.is-loading img {
  opacity: 0.35;
}
.image-hover-preview.is-error img {
  display: none;
}
.image-hover-preview-caption {
  margin-top: 8px;
  padding: 0 2px;
  color: var(--muted);
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 720px) {
  .image-hover-preview {
    width: min(300px, calc(100vw - 24px));
  }
}

.upload-thumb-wrap {
  position: relative;
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--soft);
  overflow: visible;
  z-index: 1;
}
.upload-thumb-wrap[hidden],
.upload-thumb-wrap.is-empty {
  display: none;
}
.upload-thumb {
  display: block;
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 9px;
  background: var(--chip-bg);
  cursor: zoom-in;
}
.upload-thumb-preview {
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) scale(0.96);
  width: min(320px, 42vw);
  max-height: min(320px, 50vh);
  padding: 8px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.28);
  opacity: 0;
  pointer-events: none;
  z-index: 40;
  transition: opacity .14s ease, transform .14s ease;
}
.upload-thumb-preview img {
  display: block;
  width: 100%;
  max-height: min(300px, 46vh);
  object-fit: contain;
  border-radius: 8px;
  background: var(--soft);
}
.upload-thumb-wrap:hover,
.upload-thumb-wrap:focus-within {
  z-index: 30;
}
.upload-thumb-wrap:hover .upload-thumb-preview,
.upload-thumb-wrap:focus-within .upload-thumb-preview {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}
@media (max-width: 900px) {
  .upload-thumb-preview {
    left: auto;
    right: 0;
    top: calc(100% + 10px);
    transform: translateY(0) scale(0.96);
  }
  .upload-thumb-wrap:hover .upload-thumb-preview,
  .upload-thumb-wrap:focus-within .upload-thumb-preview {
    transform: translateY(0) scale(1);
  }
}
.progress-wrap { display: grid; gap: 9px; }
.progress-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: .83rem;
  font-weight: 750;
}
.progress-meta strong {
  color: var(--ink);
  min-width: 44px;
  text-align: right;
}
.upload-speed {
  color: var(--accent-strong);
  min-width: 86px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.progress-track {
  height: 12px;
  overflow: hidden;
  background: var(--progress-track);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.progress-fill {
  width: 0%;
  height: 100%;
  background: var(--accent);
  border-radius: inherit;
  transition: width .18s ease;
}
.queue-item.complete .progress-fill { background: var(--success); }
.queue-item.failed .progress-fill { background: var(--danger); }
.upload-result {
  display: flex;
  justify-content: flex-end;
  min-width: 0;
}
.upload-link-card {
  width: 100%;
  display: grid;
  gap: 8px;
  justify-items: end;
}
.upload-link {
  max-width: 100%;
  padding: 7px 9px;
  color: var(--help-ink);
  background: var(--help-bg);
  border: 1px solid var(--help-border);
  border-radius: 7px;
  font-size: .78rem;
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.upload-link-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.upload-link-actions .copied {
  color: white;
  background: var(--success);
  border-color: var(--success);
}
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: grid;
  place-items: center;
  padding: 22px;
  background: var(--modal-backdrop);
}
.modal-backdrop[hidden] { display: none; }
.editor-modal {
  width: min(760px, 100%);
  max-height: min(760px, calc(100vh - 44px));
  display: grid;
  gap: 16px;
  padding: 22px;
  overflow: auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}
.modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.modal-head h2 {
  margin: 0;
  font-size: 1.35rem;
  line-height: 1.1;
}
.editor-modal textarea {
  min-height: 300px;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  line-height: 1.5;
}
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
code { color: var(--muted); overflow-wrap: anywhere; font-size: .84rem; }

.docs-hero {
  align-items: center;
}
.docs-endpoints {
  display: grid;
  gap: 8px;
  min-width: min(360px, 100%);
}
.docs-endpoints div,
.docs-md-link {
  display: block;
  padding: 10px 12px;
  color: var(--chip-ink);
  background: var(--chip-bg);
  border: 1px solid var(--line);
  border-radius: 7px;
}
.docs-endpoints small {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.docs-endpoints span {
  display: block;
  font-size: .88rem;
  font-weight: 800;
  overflow-wrap: anywhere;
}
.docs-md-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--accent);
  font-size: .86rem;
  font-weight: 850;
}
.docs-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}
.docs-toc {
  position: sticky;
  top: 86px;
  padding: 12px;
}
.docs-toc a {
  display: block;
  padding: 9px 10px;
  color: var(--muted);
  border-radius: 7px;
  font-weight: 800;
  font-size: .88rem;
}
.docs-toc a:hover {
  color: var(--ink);
  background: var(--chip-bg);
}
.docs-main {
  display: grid;
  gap: 18px;
}
.doc-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 8px 22px rgba(31, 42, 68, 0.055);
  padding: 20px;
  display: grid;
  gap: 14px;
}
.doc-card p {
  margin: 0;
  color: var(--muted);
  font-weight: 600;
  line-height: 1.55;
}
.doc-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.doc-card-head h2 {
  margin-top: 8px;
  font-size: 1.22rem;
}
.method-pill {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.method-pill.get { color: #1d4ed8; background: var(--private-soft); border: 1px solid var(--private-border); }
.method-pill.post { color: #047857; background: var(--success-soft); border: 1px solid var(--success-border); }
.method-pill.put { color: #7c3aed; background: #f5f3ff; border: 1px solid #ddd6fe; }
.method-pill.delete { color: var(--danger); background: var(--danger-soft); border: 1px solid var(--danger-border); }
.method-pill.neutral { color: var(--chip-ink); background: var(--chip-bg); border: 1px solid var(--line); }
.code-grid, .client-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.code-card {
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--code-bg);
}
.code-head {
  min-height: 44px;
  padding: 8px 10px 8px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--code-panel);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.code-head span {
  color: #dbeafe;
  font-size: .82rem;
  font-weight: 850;
}
.copy-btn {
  min-height: 30px;
  padding: 6px 9px;
  gap: 6px;
  color: #dbeafe;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 7px;
  font-size: .78rem;
}
.copy-btn:hover, .copy-btn.copied {
  color: white;
  background: rgba(79, 70, 229, 0.88);
  border-color: rgba(255,255,255,0.18);
}
.copy-icon, .copy-btn .ui-icon {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}
.code-card pre {
  margin: 0;
  padding: 16px;
  overflow: auto;
  max-height: 520px;
}
.code-card code {
  color: #e2e8f0;
  font-size: .86rem;
  line-height: 1.55;
  white-space: pre;
}

@media (max-width: 880px) {
  main { width: min(100% - 28px, 1440px); }
  .topbar { height: auto; padding: 14px 16px; align-items: start; gap: 12px; }
  .topbar, .page-head, .section-title { flex-direction: column; }
  .topbar nav { flex-wrap: wrap; gap: 10px; }
  body:has(.login-immersive) main { width: 100%; padding: 0; }
  .stats-grid, .split { grid-template-columns: 1fr; }
  .table-wrap { overflow: auto; }
  table { min-width: 840px; table-layout: auto; }
  .files-table th:nth-child(n), .files-table td:nth-child(n),
  .keys-table th:nth-child(n), .keys-table td:nth-child(n) { width: auto; }
  .inline-search { width: 100%; }
  .form-row { grid-template-columns: 1fr; }
  .key-form-fields { grid-template-columns: 1fr; }
  .key-form-actions { justify-content: stretch; }
  .key-form-actions button { width: 100%; }
  .scope-picker-grid { grid-template-columns: 1fr; }
  .keys-table { min-width: 1080px; }
  .fleet-form, .install-form { grid-template-columns: 1fr; }
  .fleet-grid { grid-template-columns: 1fr; }
  .explorer-layout { grid-template-columns: 1fr; }
  .filter-primary { grid-template-columns: 1fr; }
  .filter-advanced { grid-template-columns: 1fr; }
  .filter-actions { align-items: stretch; }
  .file-inspector { position: static; }
  .upload-options { grid-template-columns: 1fr; }
  .queue-item { grid-template-columns: 1fr; }
  .upload-result, .upload-link-card, .upload-link-actions { justify-content: flex-start; justify-items: start; }
  .modal-actions { justify-content: stretch; flex-direction: column-reverse; }
  .modal-actions button { width: 100%; }
  .docs-layout, .code-grid, .client-grid { grid-template-columns: 1fr; }
  .docs-toc { position: static; }
}

.stats-grid {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.scope-list {
  display: none;
}
.scope-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 100%;
  min-width: 0;
}
.scope-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 22px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  background: color-mix(in srgb, var(--accent) 8%, var(--panel));
  color: var(--accent);
  font-size: .68rem;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.scope-picker {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--chip-bg);
  min-width: 0;
}
.scope-picker > span {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.scope-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 6px 10px;
}
.scope-picker label {
  display: flex;
  grid-template-columns: none;
  align-items: center;
  gap: 9px;
  min-height: 36px;
  margin: 0;
  padding: 7px 10px;
  color: var(--chip-ink);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: 0;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel);
  cursor: pointer;
  transition: background-color .14s ease, border-color .14s ease;
}
.scope-picker label:hover {
  background: color-mix(in srgb, var(--accent) 8%, var(--panel));
  border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
}

/* Dark mode polish for remaining light-only surfaces */
html[data-theme="dark"] .method-pill.get {
  color: #93c5fd;
  background: #172554;
  border-color: #1e3a8a;
}
html[data-theme="dark"] .method-pill.post {
  color: #6ee7b7;
  background: #123526;
  border-color: #166534;
}
html[data-theme="dark"] .method-pill.put {
  color: #c4b5fd;
  background: #2e1065;
  border-color: #5b21b6;
}
html[data-theme="dark"] .method-pill.delete {
  color: #fca5a5;
  background: #3f1d1d;
  border-color: #7f1d1d;
}
html[data-theme="dark"] .queue-item,
html[data-theme="dark"] .docs-toc,
html[data-theme="dark"] .docs-card,
html[data-theme="dark"] .panel-soft,
html[data-theme="dark"] .key-card,
html[data-theme="dark"] .category-card,
html[data-theme="dark"] .endpoint-card,
html[data-theme="dark"] .client-card,
html[data-theme="dark"] .audit-card,
html[data-theme="dark"] .webhook-card {
  background: var(--panel);
  border-color: var(--line);
}
html[data-theme="dark"] .table-file-icon,
html[data-theme="dark"] .filetype-icon {
  color: #e2e8f0;
  background: linear-gradient(145deg, #1e293b 0 70%, #0f172a 70% 100%);
  border-color: #334155;
  box-shadow: inset 0 -8px 14px rgba(2, 6, 23, 0.35);
}
html[data-theme="dark"] .table-file-icon::before,
html[data-theme="dark"] .filetype-icon::before {
  border-top-color: #0f172a;
}

html[data-theme="dark"] .queue-item.failed {
  border-color: var(--danger-border);
  background: var(--danger-soft);
}
html[data-theme="dark"] .help-badge:hover,
html[data-theme="dark"] .help-badge:focus-visible {
  border-color: #818cf8;
  background: #312e81;
  color: #e0e7ff;
}
.scope-picker input {
  width: auto;
}
.ops-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 22px;
}
.ops-card {
  margin-top: 0;
}
.ops-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.ops-metrics span {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--chip-bg);
}
.ops-metrics strong {
  color: var(--ink);
  font-size: 1rem;
}
.ops-metrics small,
.ops-note {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 700;
}
.audit-list {
  display: grid;
  gap: 8px;
}
.audit-item {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: 0 6px 16px rgba(31, 42, 68, 0.04);
}
.audit-item.empty {
  opacity: .92;
}
.audit-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  border: 1px solid var(--line);
  background: var(--soft);
  color: var(--accent);
  flex: 0 0 auto;
}
.audit-icon .ui-icon {
  width: 18px;
  height: 18px;
}
.audit-item.tone-success .audit-icon {
  color: var(--success);
  background: var(--success-soft);
  border-color: var(--success-border);
}
.audit-item.tone-danger .audit-icon {
  color: var(--danger);
  background: var(--danger-soft);
  border-color: var(--danger-border);
}
.audit-item.tone-warning .audit-icon {
  color: var(--warning);
  background: var(--warning-soft);
  border-color: var(--warning-border);
}
.audit-item.tone-info .audit-icon {
  color: var(--accent);
  background: var(--help-bg);
  border-color: var(--help-border);
}
.audit-body {
  min-width: 0;
  display: grid;
  gap: 4px;
}
.audit-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.audit-action {
  color: var(--ink);
  font-size: .9rem;
  font-weight: 850;
  line-height: 1.25;
}
.audit-time {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 750;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.audit-name {
  color: var(--ink);
  font-size: .86rem;
  font-weight: 700;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.audit-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}
.audit-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--chip-bg);
  color: var(--chip-ink);
  font-size: .72rem;
  font-weight: 750;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.audit-meta-chip .ui-icon {
  width: 13px;
  height: 13px;
  color: var(--muted);
}
.audit-meta-chip.muted {
  color: var(--muted);
  font-weight: 700;
}
.docs-md-link.copied {
  color: white;
  background: var(--accent);
  border-color: var(--accent);
}
@media (max-width: 880px) {
  .ops-grid,
  .ops-metrics {
    grid-template-columns: 1fr;
  }
}

/* ===== UI polish 2026-08-02 ===== */
.skip-link {
  position: absolute;
  left: 12px;
  top: -48px;
  z-index: 200;
  padding: 10px 14px;
  border-radius: var(--r-md);
  background: var(--accent);
  color: #fff;
  font-weight: 800;
  box-shadow: var(--shadow-sm);
  transition: top .15s ease;
}
.skip-link:focus {
  top: 12px;
  outline: none;
}

.topbar {
  gap: 12px;
}
.top-nav {
  display: flex;
  align-items: center;
  gap: 14px;
}
.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  min-height: 40px;
  min-width: 40px;
  padding: 0;
  border-radius: var(--r-md);
  border: 1px solid var(--line-strong);
  background: var(--secondary-bg);
  color: var(--ink);
  box-shadow: none;
}
.nav-toggle .ui-icon { width: 18px; height: 18px; }
.nav-link {
  padding: 8px 10px;
  border-radius: var(--r-md);
  transition: color .14s ease, background .14s ease;
}
.nav-link.is-active {
  color: var(--accent);
  background: var(--nav-active-bg);
  font-weight: 800;
}
.nav-link.is-active .ui-icon { color: var(--accent); }
body.is-login-page .topbar-login {
  background: transparent;
  border-bottom-color: transparent;
  position: absolute;
  inset: 0 0 auto 0;
  width: 100%;
  z-index: 20;
}
body.is-login-page .top-nav-login {
  margin-left: auto;
}
body.is-login-page main {
  width: 100%;
  max-width: none;
  padding: 0;
}

.dash-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 18px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--panel);
  box-shadow: var(--shadow-sm);
}
.dash-tab {
  min-height: 38px;
  padding: 8px 14px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
  font-weight: 750;
}
.dash-tab:hover {
  color: var(--ink);
  background: var(--soft);
  filter: none;
  box-shadow: none;
}
.dash-tab.is-active {
  color: var(--accent);
  background: var(--nav-active-bg);
  border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
  box-shadow: none;
  filter: none;
}
.dash-panel[hidden] { display: none !important; }
.dash-panel.is-active { display: block; }
.section-title-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.table-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .82rem;
  font-weight: 700;
}
.text-link {
  color: var(--accent-2);
  font-weight: 800;
  font-size: .84rem;
}
.panel-secondary {
  opacity: .98;
  box-shadow: none;
}
.stat-secondary {
  opacity: .92;
}
.stats-grid-primary .stat:not(.stat-secondary) {
  box-shadow: var(--shadow-card);
}

.empty-state-rich {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 8px;
  margin: 12px 0 0;
  padding: 40px 24px 36px;
  min-height: 180px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-sm);
}
.empty-state-rich[hidden] {
  display: none !important;
}
.empty-state-rich strong {
  margin: 0;
  color: var(--ink);
  font-size: .98rem;
  font-weight: 800;
}
.empty-state-rich p {
  margin: 0;
  max-width: 300px;
  color: var(--muted);
  font-weight: 650;
  font-size: .86rem;
  line-height: 1.45;
}
.empty-state-rich .button {
  margin-top: 10px;
}
.empty-state-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--r-lg);
  background: var(--soft);
  border: 1px solid var(--line);
  color: var(--muted);
  margin: 0 0 2px;
}
.empty-state-icon .ui-icon { width: 22px; height: 22px; }
.empty-state-compact {
  padding: 16px;
  text-align: center;
  color: var(--muted);
  font-weight: 750;
}
.empty-row td {
  border-bottom: 0;
  padding: 0;
}

.table-wrap.is-loading { position: relative; }
.table-wrap.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--panel) 55%, transparent);
  pointer-events: none;
}
.table-loading {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  padding: 6px 10px;
  border-radius: var(--r-pill);
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: .75rem;
  font-weight: 800;
  box-shadow: var(--shadow-sm);
}
.explorer-table { position: relative; }

.filter-primary {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(140px, .7fr) auto;
  gap: 12px;
  align-items: end;
  margin-bottom: 10px;
}
.filter-advanced {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}
.filter-advanced[hidden] { display: none !important; }
#toggleAdvanced.is-open .ui-icon { transform: rotate(180deg); }
#toggleAdvanced .ui-icon { transition: transform .15s ease; }
.explorer-filters {
  display: block;
  padding: 16px;
  margin-bottom: 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-sm);
}
.explorer-filters .filter-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: end;
}

.bulk-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
  padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--accent) 8%, var(--panel));
  font-weight: 800;
  color: var(--ink);
}
.bulk-bar[hidden] { display: none !important; }
.bulk-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.col-check {
  width: 40px !important;
  max-width: 44px;
  text-align: center;
  vertical-align: middle;
}
.col-check input {
  width: 16px;
  min-width: 16px;
  height: 16px;
  min-height: 16px;
  margin: 0 auto;
  display: inline-block;
  vertical-align: middle;
}

/* File selection controls: circular at rest, with a crisp filled state. */
.explorer-table .col-check input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  display: grid;
  place-content: center;
  width: 18px;
  min-width: 18px;
  height: 18px;
  min-height: 18px;
  border: 1.5px solid var(--line-strong);
  border-radius: 50%;
  background: color-mix(in srgb, var(--panel) 88%, var(--soft));
  box-shadow: inset 0 1px 1px rgba(15, 23, 42, 0.06);
  transition: background-color 160ms ease, border-color 160ms ease,
    box-shadow 160ms ease, transform 120ms ease;
}
.explorer-table .col-check input[type="checkbox"]::after {
  content: "";
  width: 7px;
  height: 4px;
  border: solid #fff;
  border-width: 0 0 2px 2px;
  transform: translateY(-1px) rotate(-45deg) scale(0);
  transform-origin: center;
  transition: transform 140ms cubic-bezier(.2, .8, .2, 1);
}
.explorer-table .col-check input[type="checkbox"]:hover:not(:disabled) {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 11%, transparent),
    inset 0 1px 1px rgba(15, 23, 42, 0.05);
}
.explorer-table .col-check input[type="checkbox"]:active:not(:disabled) {
  transform: scale(.92);
}
.explorer-table .col-check input[type="checkbox"]:checked,
.explorer-table .col-check input[type="checkbox"]:indeterminate {
  border-color: var(--btn-primary-solid);
  background: var(--btn-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent),
    inset 0 1px 0 var(--btn-primary-inset);
}
.explorer-table .col-check input[type="checkbox"]:checked::after {
  transform: translateY(-1px) rotate(-45deg) scale(1);
}
.explorer-table .col-check input[type="checkbox"]:indeterminate::after {
  width: 8px;
  height: 2px;
  border: 0;
  border-radius: var(--r-pill);
  background: #fff;
  transform: scale(1);
}
.explorer-table .col-check input[type="checkbox"]:focus-visible {
  outline: none;
  border-color: var(--focus-border);
  box-shadow: var(--focus-ring);
}
.explorer-table td.col-check,
.explorer-table th.col-check {
  width: 40px !important;
}
tr.is-checked td { background: color-mix(in srgb, var(--selected-row) 70%, transparent); }
.explorer-table tbody tr:hover td { background: var(--hover-bg); }
.explorer-table .file-cell strong {
  display: block;
  text-align: left;
}

.confirm-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1600;
  display: grid;
  place-items: center;
  padding: 22px;
  background: var(--modal-backdrop);
}
.confirm-modal-backdrop[hidden] { display: none; }
.confirm-modal {
  width: min(420px, 100%);
  max-height: calc(100dvh - 44px);
  overflow-y: auto;
  overflow-wrap: anywhere;
  display: grid;
  gap: 14px;
  padding: 20px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
}
.confirm-modal-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--r-lg);
  background: var(--danger-soft);
  color: var(--danger);
}
.confirm-modal-icon[hidden] { display: none; }
.confirm-modal-copy h2 {
  margin: 0 0 6px;
  font-size: 1.1rem;
}
.confirm-modal-copy p {
  margin: 0;
  color: var(--muted);
  font-weight: 650;
  line-height: 1.45;
}
.confirm-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.settings-grouped {
  display: grid;
  gap: 16px;
  max-width: 880px;
}
.settings-section {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.settings-section-head {
  padding: 16px 18px 0;
}
.settings-section-head h2 {
  margin: 0 0 6px;
  font-size: 1rem;
}
.settings-section-head p {
  margin: 0;
  color: var(--muted);
  font-size: .84rem;
  font-weight: 650;
  line-height: 1.45;
}
.settings-section-body {
  display: grid;
  gap: 14px;
  padding: 16px 18px 18px;
}
.settings-actions {
  display: flex;
  justify-content: flex-start;
}
.secret-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}
.settings-secret-group { display: grid; gap: 7px; }
.secret-field input {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .86rem;
  letter-spacing: .02em;
}
.secret-field-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.key-cards { display: none; }
.key-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--panel);
}
.key-card-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}
.key-card-meta { margin: 0; color: var(--muted); font-size: .82rem; font-weight: 700; }

.docs-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -6px 0 18px;
}
.method-pill.patch {
  color: #b45309;
  background: var(--warning-soft);
  border: 1px solid var(--warning-border);
}
html[data-theme="dark"] .method-pill.patch {
  color: #fcd34d;
  background: #3b2f0b;
  border-color: #854d0e;
}
.docs-toc-shell { min-width: 0; }
.docs-toc-toggle {
  display: none;
  width: 100%;
  justify-content: space-between;
  margin-bottom: 10px;
}
.docs-toc-toggle .ui-icon:last-child { transition: transform .15s ease; }
.docs-toc-toggle[aria-expanded="true"] .ui-icon:last-child { transform: rotate(180deg); }

.dropzone {
  border-radius: var(--r-lg);
  border: 1.5px dashed var(--line-strong);
  transition: border-color .15s ease, background .15s ease;
}
.dropzone:hover,
.dropzone:focus-visible,
.dropzone.active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, var(--panel));
  box-shadow: none;
  outline: none;
  transform: none;
}
.dropzone.active {
  transform: none;
}
.dropzone-inner {
  display: grid;
  justify-items: center;
  gap: 4px;
  text-align: center;
}
.dropzone-hint { color: var(--muted); font-weight: 650; }
.dropzone-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}
.dropzone-meta li {
  padding: 5px 10px;
  border-radius: var(--r-pill);
  background: var(--soft);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: .74rem;
  font-weight: 750;
}

@media (max-width: 980px) {
  .nav-toggle { display: inline-grid; place-items: center; margin-left: auto; }
  .topbar { flex-wrap: wrap; height: auto; min-height: 64px; padding: 12px 16px; }
  .topbar .top-nav:not(.top-nav-login) {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding-top: 8px;
  }
  .topbar .top-nav:not(.top-nav-login).is-open { display: flex; }
  .top-nav .nav-link,
  .top-nav .logout-form,
  .top-nav .theme-toggle {
    width: 100%;
    justify-content: flex-start;
  }
  .top-nav .theme-toggle { width: 100%; max-width: none; border-radius: var(--r-md); }
  .top-nav .logout-form button { width: 100%; }
  body.nav-open { overflow: hidden; }
  body.nav-open .topbar {
    max-height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .filter-primary { grid-template-columns: 1fr; }
  .keys-table-wrap { display: none; }
  .key-cards {
    display: grid;
    gap: 10px;
    margin-bottom: 16px;
  }
  .docs-toc-toggle { display: inline-flex; }
  .docs-toc {
    display: none;
    position: static;
    margin-bottom: 12px;
  }
  .docs-toc.is-open { display: grid; }
}

@media (max-width: 640px) {
  .secret-field { grid-template-columns: 1fr; }
  .bulk-bar { align-items: stretch; }
  .bulk-actions { width: 100%; }
  .bulk-actions button { flex: 1 1 auto; }
  .dash-tabs { gap: 6px; }
  .dash-tab { flex: 1 1 auto; }
  .section-title-actions {
    width: 100%;
    justify-content: stretch;
  }
  .inline-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    min-width: 0;
    width: 100%;
  }
  .inline-search input { min-width: 0; }

  /* Keep the essential file controls readable instead of squeezing every
     desktop column into a phone-width table. */
  .dash-panel[data-panel="overview"] .files-table,
  .explorer-table table {
    min-width: 0;
    table-layout: fixed;
  }
  .dash-panel[data-panel="overview"] .files-table th:nth-child(2),
  .dash-panel[data-panel="overview"] .files-table td:nth-child(2),
  .dash-panel[data-panel="overview"] .files-table th:nth-child(3),
  .dash-panel[data-panel="overview"] .files-table td:nth-child(3),
  .dash-panel[data-panel="overview"] .files-table th:nth-child(5),
  .dash-panel[data-panel="overview"] .files-table td:nth-child(5),
  .dash-panel[data-panel="overview"] .files-table th:nth-child(6),
  .dash-panel[data-panel="overview"] .files-table td:nth-child(6),
  .explorer-table th:nth-child(3),
  .explorer-table td:nth-child(3),
  .explorer-table th:nth-child(4),
  .explorer-table td:nth-child(4),
  .explorer-table th:nth-child(6),
  .explorer-table td:nth-child(6),
  .explorer-table th:nth-child(7),
  .explorer-table td:nth-child(7) {
    display: none;
  }
  .dash-panel[data-panel="overview"] .files-table th:nth-child(1),
  .dash-panel[data-panel="overview"] .files-table td:nth-child(1) {
    width: auto;
  }
  .dash-panel[data-panel="overview"] .files-table th:nth-child(4),
  .dash-panel[data-panel="overview"] .files-table td:nth-child(4) {
    width: 76px;
    padding-left: 4px;
    padding-right: 4px;
  }
  .dash-panel[data-panel="overview"] .files-table th:nth-child(7),
  .dash-panel[data-panel="overview"] .files-table td:nth-child(7),
  .explorer-table th:nth-child(8),
  .explorer-table td:nth-child(8) {
    width: 126px;
    padding-left: 5px;
    padding-right: 7px;
  }
  .explorer-table th:nth-child(5),
  .explorer-table td:nth-child(5) {
    width: 76px;
    padding-left: 4px;
    padding-right: 4px;
  }
  .dash-panel[data-panel="overview"] .file-id-chip,
  .explorer-table .file-id-chip.static {
    display: none;
  }
  .explorer-table .file-select { overflow: hidden; }
  .explorer-table .file-select .file-row,
  .explorer-table .file-select .file-cell {
    min-width: 0;
    max-width: 100%;
    width: 100%;
    justify-items: stretch;
    overflow: hidden;
  }
  .explorer-table .file-select .file-cell strong {
    min-width: 0;
    max-width: 100%;
    width: 100%;
  }
  .dash-panel[data-panel="overview"] .action-group,
  .explorer-table .action-group {
    grid-template-columns: repeat(3, 34px);
    gap: 5px;
  }
  .dash-panel[data-panel="overview"] .icon-button,
  .explorer-table .icon-button {
    width: 34px;
    height: 34px;
    min-height: 34px;
  }
  .docs-md-link { min-height: 42px; }
  .copy-btn { min-height: 36px; }
  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .stats-grid .stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .stat { padding: 14px; }
  .stat span { font-size: 1.35rem; }
}

@media (max-width: 420px) {
  .dash-panel[data-panel="overview"] .files-table th:nth-child(4),
  .dash-panel[data-panel="overview"] .files-table td:nth-child(4),
  .explorer-table th:nth-child(5),
  .explorer-table td:nth-child(5) {
    display: none;
  }
}

/* Warm Studio — reference palette: ivory, sand, charcoal, quiet sage. */
:root {
  --bg: #faf9f6;
  --panel: #ffffff;
  --ink: #252521;
  --muted: #6c6963;
  --line: #e7e4de;
  --line-strong: #d5d0c7;
  --accent: #484e40;
  --accent-2: #515a46;
  --btn-primary: linear-gradient(135deg, #383c32, #383c32);
  --btn-primary-solid: #383c32;
  --btn-primary-ink: #fffefa;
  --btn-primary-glow: rgba(66, 70, 55, .12);
  --btn-primary-inset: rgba(255, 255, 255, .12);
  --soft: #f2f0eb;
  --shadow: 0 18px 50px rgba(51, 43, 29, .08);
  --shadow-sm: 0 2px 8px rgba(51, 43, 29, .025);
  --shadow-card: 0 4px 18px rgba(51, 43, 29, .035);
  --r-sm: 16px;
  --r-md: 11px;
  --r-lg: 20px;
  --topbar-bg: rgba(250, 249, 246, .94);
  --input-bg: #fdfcfa;
  --th-bg: #f8f7f4;
  --hover-bg: #f6f5f1;
  --chip-bg: #f5f3ef;
  --chip-ink: #625f56;
  --icon-btn-bg: #fffefa;
  --icon-btn-ink: #747167;
  --icon-btn-hover-bg: #eeeee6;
  --secondary-bg: #fffefa;
  --danger: #a54a3e;
  --danger-soft: #f9efec;
  --danger-border: #ebcec7;
  --danger-icon-bg: #fdf8f5;
  --success: #49664a;
  --success-soft: #eef3eb;
  --success-border: #d9e4d3;
  --private-soft: #efeee8;
  --private-border: #dcd9cb;
  --warning: #84672e;
  --warning-soft: #f7f1e5;
  --warning-border: #e8dcc2;
  --selected-row: #efeee6;
  --progress-track: #e9e6df;
  --help-bg: #eeeee6;
  --help-ink: #515a46;
  --help-border: #d8ddce;
  --help-tooltip-bg: #302f2a;
  --help-tooltip-ink: #faf9f6;
  --help-tooltip-border: #57544d;
  --theme-toggle-bg: #fffefa;
  --theme-toggle-glow: rgba(70, 70, 50, .12);
  --input-border: #e1ddd5;
  --input-border-hover: #bfb9ad;
  --input-placeholder: #74716b;
  --input-shadow: none;
  --focus-ring: 0 0 0 3px rgba(81, 90, 70, .13);
  --focus-border: #7b856f;
  --toggle-track: #eae7df;
  --nav-active-bg: #ecebe4;
  --modal-backdrop: rgba(39, 36, 28, .38);
}
html[data-theme="dark"] {
  --bg: #191816;
  --panel: #22211e;
  --ink: #f2efe7;
  --muted: #aaa69b;
  --line: #36342e;
  --line-strong: #4e4a40;
  --accent: #c3c9ae;
  --accent-2: #c3c9ae;
  --btn-primary: linear-gradient(135deg, #d5d8c6, #d5d8c6);
  --btn-primary-solid: #d5d8c6;
  --btn-primary-ink: #25271f;
  --btn-primary-glow: rgba(195, 201, 174, .1);
  --soft: #2c2a25;
  --topbar-bg: rgba(25, 24, 22, .95);
  --input-bg: #27251f;
  --th-bg: #27251f;
  --hover-bg: #2d2b25;
  --chip-bg: #2b2923;
  --chip-ink: #c6c1b4;
  --icon-btn-bg: #292720;
  --icon-btn-ink: #c1bdae;
  --icon-btn-hover-bg: #35372b;
  --secondary-bg: #292720;
  --danger: #e1a091;
  --danger-soft: #392922;
  --danger-border: #674239;
  --danger-icon-bg: #30231e;
  --success: #b2c3a3;
  --success-soft: #2a3325;
  --success-border: #43543b;
  --private-soft: #323125;
  --private-border: #514e37;
  --warning: #dcc18e;
  --warning-soft: #373020;
  --warning-border: #5f4e2d;
  --selected-row: #323529;
  --progress-track: #38352d;
  --help-bg: #303429;
  --help-ink: #c3c9ae;
  --help-border: #4b523c;
  --theme-toggle-bg: #2b2923;
  --input-border: #444035;
  --input-border-hover: #68634f;
  --input-placeholder: #908b7e;
  --input-shadow: none;
  --focus-ring: 0 0 0 3px rgba(195, 201, 174, .16);
  --focus-border: #b6bea0;
  --toggle-track: #3b382f;
  --nav-active-bg: #34362b;
  --modal-backdrop: rgba(12, 11, 9, .7);
}
h1, h2, h3, .brand, .stat > span {
  font-family: "Space Grotesk", "DM Sans", sans-serif;
  font-weight: 600;
  letter-spacing: -.035em;
}
button, .button { font-family: "DM Sans", sans-serif; font-weight: 600; }
input:not([type="checkbox"]):not([type="radio"]), select, textarea, .editor-modal textarea,
code, pre, .secret-field input {
  font-family: "JetBrains Mono", ui-monospace, monospace;
}
input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: .79rem; }
.topbar { border-bottom-color: var(--line); }
.brand { font-size: 1.12rem; }
.brand .ui-icon { color: var(--accent); }
.topbar nav a { font-size: .86rem; font-weight: 500; }
.nav-link { border-radius: 999px; padding: 9px 13px; }
.nav-link.is-active { color: var(--ink); font-weight: 600; }
.theme-toggle { border-color: var(--line); box-shadow: none; }
.page-head {
  background: linear-gradient(115deg, var(--th-bg), var(--soft));
  border-color: var(--line);
  border-radius: 24px;
  box-shadow: none;
  padding: 28px 30px;
  margin-bottom: 24px;
}
.page-head-lite h1 { font-size: clamp(1.65rem, 2.5vw, 2.1rem); }
.page-subtitle { font-weight: 400; font-size: .92rem; line-height: 1.6; }
.eyebrow { color: var(--muted); font-size: .66rem; font-weight: 600; letter-spacing: .13em; }
.stat { padding: 22px; gap: 10px; border-color: var(--line); box-shadow: none; }
.stat::before { display: none; }
.stat small { font-weight: 600; letter-spacing: .08em; color: var(--muted); }
.stat > span { font-size: 1.9rem; color: var(--ink); font-weight: 600; }
.stat em { font-size: .76rem; font-weight: 400; }
.stats-grid-primary .stat:not(.stat-secondary) { box-shadow: none; }
.stat-secondary { opacity: 1; background: var(--th-bg); }
.dash-tabs { width: fit-content; max-width: 100%; background: var(--soft); border: 0; padding: 5px; gap: 4px; box-shadow: none; }
.dash-tab { min-height: 36px; font-size: .84rem; padding: 8px 20px; }
.dash-tab.is-active { color: var(--ink); background: var(--panel); border-color: var(--line); box-shadow: 0 1px 3px rgba(50, 40, 20, .04); }
.panel-aside { padding: 20px; }
.section-title { margin-bottom: 16px; }
label { font-weight: 500; font-size: .76rem; letter-spacing: 0; }
th { color: var(--muted); font-weight: 600; font-size: .65rem; letter-spacing: .08em; padding-top: 13px; padding-bottom: 13px; }
td { border-bottom-color: var(--line); }
.files-table td { padding-top: 14px; padding-bottom: 14px; }
.files-table td:nth-child(3) { white-space: nowrap; font-variant-numeric: tabular-nums; }
.file-cell strong { font-weight: 600; font-size: .85rem; }
.file-id-chip { min-height: 20px; font-weight: 400; font-size: .65rem; }
.file-id-chip, .file-id-chip.static, .inspector-name .file-id-chip { opacity: 1; }
.mime-pill, .status-pill { font-weight: 500; font-size: .68rem; }
.mime-pill { background: var(--chip-bg); border-color: transparent; }
.icon-button, .explorer-table .icon-button { border-radius: 9px; }
.table-file-icon, .filetype-icon,
html[data-theme="dark"] .table-file-icon, html[data-theme="dark"] .filetype-icon {
  background: var(--soft); border-color: var(--line-strong); box-shadow: none;
}
.table-file-icon::before, .filetype-icon::before,
html[data-theme="dark"] .table-file-icon::before, html[data-theme="dark"] .filetype-icon::before { border-top-color: var(--line); }
.table-file-icon span, .filetype-icon span { background: var(--accent) !important; color: var(--panel) !important; }
.category-item, .fleet-card { background: var(--th-bg); border-color: var(--line); border-radius: 12px; }
.help-badge { color: var(--help-ink); background: var(--help-bg); border-color: var(--help-border); }
.explorer-table .col-check input[type="checkbox"]::after { border-color: var(--btn-primary-ink); }
.explorer-table .col-check input[type="checkbox"]:indeterminate::after { background: var(--btn-primary-ink); }
.drop-icon { background: var(--soft); color: var(--accent); border-color: var(--line); }
.copy-btn:hover, .copy-btn.copied { background: #515a46; }

/* Complete the palette on secondary surfaces and interaction states. */
:root {
  --code-bg: #292821;
  --code-panel: #333229;
  --flash-bg: #f7f1e5;
  --flash-border: #e8dcc2;
  --flash-ink: #84672e;
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2374716b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
html[data-theme="dark"] {
  --code-bg: #171612;
  --code-panel: #2a2821;
  --flash-bg: #373020;
  --flash-border: #5f4e2d;
  --flash-ink: #dcc18e;
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23aaa69b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
.method-pill.get, html[data-theme="dark"] .method-pill.get,
.method-pill.put, html[data-theme="dark"] .method-pill.put {
  color: var(--accent-2);
  background: var(--private-soft);
  border: 1px solid var(--private-border);
}
.method-pill.post, html[data-theme="dark"] .method-pill.post {
  color: var(--success);
  background: var(--success-soft);
  border-color: var(--success-border);
}
.method-pill.delete, html[data-theme="dark"] .method-pill.delete {
  color: var(--danger);
  background: var(--danger-soft);
  border-color: var(--danger-border);
}
.method-pill.patch, html[data-theme="dark"] .method-pill.patch {
  color: var(--warning);
  background: var(--warning-soft);
  border-color: var(--warning-border);
}
.doc-card { border-radius: var(--r-sm); box-shadow: var(--shadow-sm); scroll-margin-top: 100px; }
.code-head span, .copy-btn, .code-card code { color: #eeeade; }
.copy-btn:hover, .copy-btn.copied { color: #fffefa; }
.docs-md-link.copied {
  color: var(--btn-primary-ink);
  background: var(--btn-primary-solid);
  border-color: var(--btn-primary-solid);
}
.upload-link-actions .button.copied,
.upload-link-actions .button.copied:hover,
.upload-link-actions .button.copied:active {
  color: var(--success);
  background: var(--success-soft);
  border-color: var(--success-border);
}
html[data-theme="dark"] .help-badge:hover,
html[data-theme="dark"] .help-badge:focus-visible {
  color: var(--help-ink);
  background: var(--help-bg);
  border-color: var(--focus-border);
}
.notify-toast, .audit-item { box-shadow: var(--shadow-card); }
.notify-toast.is-pulse { box-shadow: var(--shadow-card), var(--focus-ring); }
.notify-title, .audit-action { font-weight: 600; }
.notify-message, .audit-name { font-weight: 400; }
.notify-title, .audit-action, .login-stat strong { font-family: "Space Grotesk", "DM Sans", sans-serif; }
.skip-link { background: var(--btn-primary-solid); color: var(--btn-primary-ink); }
.file-id-chip:focus-visible { outline: 2px solid var(--focus-border); outline-offset: 2px; }
.visually-hidden, .notify-announcer {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Keep filename grids inside their cells at tablet widths as well. */
.file-select .file-row,
.file-select .file-cell {
  min-width: 0;
  max-width: 100%;
  width: 100%;
  justify-items: stretch;
}
.file-select .file-cell strong {
  min-width: 0;
  max-width: 100%;
  width: 100%;
}
@media (min-width: 641px) and (max-width: 1100px) {
  .explorer-table { overflow-x: auto; }
  .explorer-table table { min-width: 1000px; }
}
@media (max-width: 980px) {
  .topbar:not(.topbar-login) {
    flex-direction: row;
    align-items: center;
  }
  .topbar .top-nav:not(.top-nav-login) {
    flex-basis: 100%;
    min-width: 0;
    max-width: 100%;
  }
}

/* Login keeps its animated scene, with the same ivory/sage day and warm night. */
body:has(.login-immersive), html[data-theme="dark"] body:has(.login-immersive) { background: var(--bg); }
body:has(.login-immersive) .topbar,
html[data-theme="dark"] body:has(.login-immersive) .topbar { background: transparent; border-bottom-color: transparent; }
body:has(.login-immersive) .topbar .brand,
html[data-theme="dark"] body:has(.login-immersive) .topbar .brand,
body:has(.login-immersive) .topbar button.ghost,
html[data-theme="dark"] body:has(.login-immersive) .topbar button.ghost { color: var(--ink); }
body:has(.login-immersive) .brand .ui-icon,
html[data-theme="dark"] body:has(.login-immersive) .brand .ui-icon { color: var(--accent); }
.login-immersive, html[data-theme="dark"] .login-immersive {
  background: radial-gradient(ellipse at center, var(--soft), var(--bg));
}
.login-glow-a, html[data-theme="dark"] .login-glow-a {
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 14%, transparent), transparent 68%);
}
.login-glow-b, html[data-theme="dark"] .login-glow-b {
  background: radial-gradient(circle, color-mix(in srgb, var(--warning) 12%, transparent), transparent 70%);
}
.login-grid, html[data-theme="dark"] .login-grid {
  background-image: linear-gradient(color-mix(in srgb, var(--ink) 5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--ink) 5%, transparent) 1px, transparent 1px);
}
.login-hud-copy, html[data-theme="dark"] .login-hud-copy,
.login-headline, html[data-theme="dark"] .login-headline,
.login-stat strong, html[data-theme="dark"] .login-stat strong,
.login-immersive .login-panel h1, html[data-theme="dark"] .login-immersive .login-panel h1 { color: var(--ink); }
.login-headline span, html[data-theme="dark"] .login-headline span {
  background: none;
  color: var(--accent);
  -webkit-text-fill-color: currentColor;
}
.login-headline { font-weight: 600; }
.login-kicker, html[data-theme="dark"] .login-kicker,
.login-mark, html[data-theme="dark"] .login-mark {
  color: var(--accent);
  background: var(--help-bg);
  border-color: var(--help-border);
  font-weight: 600;
}
.login-lede, html[data-theme="dark"] .login-lede,
.login-immersive .login-copy, html[data-theme="dark"] .login-immersive .login-copy,
.login-immersive .login-panel label, html[data-theme="dark"] .login-immersive .login-panel label,
.login-stat small, .login-footnote { color: var(--muted); font-weight: 400; }
.login-stat, html[data-theme="dark"] .login-stat {
  background: color-mix(in srgb, var(--panel) 82%, transparent);
  border-color: var(--line);
}
.login-immersive .login-panel, html[data-theme="dark"] .login-immersive .login-panel {
  color: var(--ink);
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  border-color: var(--line-strong);
  box-shadow: var(--shadow);
}
.login-panel-shine, html[data-theme="dark"] .login-panel-shine {
  background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 55%);
}
.login-immersive .login-panel .eyebrow,
html[data-theme="dark"] .login-immersive .login-panel .eyebrow { color: var(--muted); }
.login-immersive .login-input-wrap input,
html[data-theme="dark"] .login-immersive .login-input-wrap input {
  color: var(--ink);
  background: var(--input-bg);
  border-color: var(--input-border);
  box-shadow: none;
}
.login-immersive .login-input-wrap input:focus,
html[data-theme="dark"] .login-immersive .login-input-wrap input:focus {
  border-color: var(--focus-border);
  box-shadow: var(--focus-ring);
}
.login-immersive .login-input-wrap:focus-within .ui-icon,
html[data-theme="dark"] .login-immersive .login-input-wrap:focus-within .ui-icon { color: var(--accent); }
@media (max-width: 980px) {
  body.is-login-page .topbar-login {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    min-height: 64px;
  }
  body.is-login-page .top-nav-login {
    width: auto;
    flex-direction: row;
    padding: 0;
  }
  body.is-login-page .top-nav-login .theme-toggle {
    width: 38px;
    min-width: 38px;
    border-radius: 50%;
    justify-content: center;
  }
  body.is-login-page .login-stage {
    padding-top: 92px;
    align-content: start;
  }
}
@media (max-width: 640px) {
  .page-head { padding: 23px 22px; border-radius: 20px; align-items: stretch; }
  .page-head .head-actions { justify-content: flex-start; }
  .stat { padding: 16px; gap: 8px; }
  .stat > span { font-size: 1.5rem; }
  .dash-tabs { width: 100%; }
  .dash-tab { padding: 8px 12px; }
  .section-title { align-items: stretch; }
  .files-table td { padding-top: 10px; padding-bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}