/* Stiff Intelligence — luminous operational interface, 2026 */
:root {
  --stiff-ink: #102a43;
  --stiff-ink-soft: #28445f;
  --stiff-muted: #52677d;
  --stiff-faint: #7d8ea1;
  --stiff-canvas: #f6f8fc;
  --stiff-canvas-blue: #edf4ff;
  --stiff-surface: #ffffff;
  --stiff-surface-soft: #f8faff;
  --stiff-line: #dbe5f0;
  --stiff-line-strong: #c6d5e5;
  --stiff-blue: #175cd3;
  --stiff-blue-strong: #0f4fbf;
  --stiff-indigo: #4f46e5;
  --stiff-cyan: #0891b2;
  --stiff-cyan-bright: #22d3ee;
  --stiff-success: #087a55;
  --stiff-warning: #a15c00;
  --stiff-danger: #c0354d;
  --stiff-blue-soft: rgba(23, 92, 211, 0.09);
  --stiff-shadow-sm: 0 8px 22px rgba(40, 68, 95, 0.07);
  --stiff-shadow: 0 18px 50px rgba(40, 68, 95, 0.1);
  --stiff-shadow-lg: 0 34px 90px rgba(40, 68, 95, 0.16);
  --stiff-radius: 18px;
  --stiff-top-h: 72px;

  /* Compatibility tokens consumed by the existing interfaces. */
  --bg: var(--stiff-canvas);
  --bg-soft: var(--stiff-surface-soft);
  --panel: var(--stiff-surface);
  --card: var(--stiff-surface);
  --card2: var(--stiff-surface-soft);
  --border: var(--stiff-line);
  --line: var(--stiff-line);
  --text: var(--stiff-ink);
  --text-soft: var(--stiff-ink-soft);
  --muted: var(--stiff-muted);
  --muted-2: var(--stiff-faint);
  --accent: var(--stiff-blue);
  --accent2: var(--stiff-indigo);
  --ok: var(--stiff-success);
  --warn: var(--stiff-warning);
  --danger: var(--stiff-danger);
  --err: var(--stiff-danger);
  --info: var(--stiff-blue-strong);
  --accent-ink: #ffffff;
  --accent-soft: var(--stiff-blue-soft);
  --surface: var(--stiff-surface);
  --surface-2: var(--stiff-surface-soft);
  --surface-3: var(--stiff-canvas-blue);
  --line-soft: rgba(40, 68, 95, 0.08);
  --font: Inter, Arial, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --radius: var(--stiff-radius);
  --top-h: var(--stiff-top-h);
}

html[data-stiff-theme="dark"] {
  --stiff-ink: #f2f7ff;
  --stiff-ink-soft: #cbd9e8;
  --stiff-muted: #9db1c6;
  --stiff-faint: #7890a8;
  --stiff-canvas: #07111f;
  --stiff-canvas-blue: #0d2036;
  --stiff-surface: #0e1b2b;
  --stiff-surface-soft: #122338;
  --stiff-line: #223750;
  --stiff-line-strong: #35516e;
  --stiff-blue: #6aa7ff;
  --stiff-blue-strong: #99c4ff;
  --stiff-indigo: #9892ff;
  --stiff-cyan: #44d7eb;
  --stiff-cyan-bright: #67e8f9;
  --stiff-success: #5ee0b2;
  --stiff-warning: #ffc978;
  --stiff-danger: #ff93a6;
  --stiff-blue-soft: rgba(106, 167, 255, 0.13);
  --stiff-shadow-sm: 0 8px 22px rgba(0, 7, 16, 0.24);
  --stiff-shadow: 0 18px 50px rgba(0, 7, 16, 0.34);
  --stiff-shadow-lg: 0 34px 90px rgba(0, 5, 13, 0.46);
  --line-soft: rgba(170, 203, 235, 0.08);
  color-scheme: dark;
}

html {
  min-width: 320px;
  background: var(--stiff-canvas);
  color-scheme: light;
  scrollbar-color: #b8c9da transparent;
  scrollbar-width: thin;
}

html[data-stiff-theme="dark"] { scrollbar-color: #35516e transparent; }

html,
body,
button,
input,
select,
textarea {
  font-family: var(--font);
}

body {
  min-width: 320px;
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 8% 4%, rgba(34, 211, 238, 0.09), transparent 24rem),
    radial-gradient(circle at 92% 0%, rgba(79, 70, 229, 0.07), transparent 30rem),
    var(--stiff-canvas);
  color: var(--stiff-ink);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img,
svg,
video { max-width: 100%; }

a,
button,
input,
select,
textarea { -webkit-tap-highlight-color: transparent; }

button,
a,
input,
select,
textarea {
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease, opacity 160ms ease;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(23, 92, 211, 0.22) !important;
  outline-offset: 3px;
}

/* Authentication — bright split workspace. */
#gate,
#gate.auth-shell {
  isolation: isolate;
  position: relative;
  width: 100%;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: clamp(20px, 4vw, 60px);
  background:
    radial-gradient(circle at 14% 18%, rgba(34, 211, 238, 0.2), transparent 25rem),
    radial-gradient(circle at 88% 12%, rgba(79, 70, 229, 0.13), transparent 27rem),
    linear-gradient(135deg, #f9fbff 0%, #eef4ff 52%, #f8f7ff 100%) !important;
  color: var(--stiff-ink);
}

#gate::before,
#gate::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

#gate::before {
  width: min(48vw, 680px);
  aspect-ratio: 1;
  top: -28%;
  right: -10%;
  border: 1px solid rgba(79, 70, 229, 0.12);
  border-radius: 50%;
  box-shadow: 0 0 0 82px rgba(79, 70, 229, 0.025), 0 0 0 164px rgba(8, 145, 178, 0.02);
}

#gate::after {
  width: 360px;
  height: 360px;
  left: -150px;
  bottom: -190px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.28), rgba(23, 92, 211, 0.04));
}

#gate .gate-card,
#gate .stiff-auth-card {
  position: relative;
  width: min(1060px, 100%);
  min-height: min(620px, calc(100dvh - clamp(40px, 8vw, 120px)));
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.88);
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--stiff-shadow-lg), 0 1px 0 rgba(255, 255, 255, 0.9) inset;
  color: var(--stiff-ink);
  text-align: left;
  animation: stiff-rise 420ms cubic-bezier(.2, .8, .2, 1) both;
}

.stiff-auth-stage {
  position: relative;
  isolation: isolate;
  min-width: 0;
  padding: clamp(34px, 5vw, 64px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  background:
    radial-gradient(circle at 86% 8%, rgba(34, 211, 238, 0.42), transparent 20rem),
    linear-gradient(145deg, #175cd3 0%, #315edc 45%, #4f46e5 100%);
  color: #ffffff;
}

.stiff-auth-stage::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: 0.16;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.34) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.34) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: linear-gradient(145deg, #000, transparent 72%);
  mask-image: linear-gradient(145deg, #000, transparent 72%);
}

.stiff-auth-stage::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 300px;
  aspect-ratio: 1;
  right: -120px;
  bottom: -130px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 42% 58% 64% 36% / 45% 42% 58% 55%;
  box-shadow: 0 0 0 54px rgba(255, 255, 255, 0.035), 0 0 0 108px rgba(255, 255, 255, 0.02);
  transform: rotate(18deg);
}

.stiff-auth-lockup {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 0;
}

.stiff-auth-lockup img {
  width: 42px;
  height: 54px;
  padding: 6px;
  object-fit: contain;
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 10px 26px rgba(13, 46, 122, 0.16);
}

.stiff-auth-lockup span { display: flex; flex-direction: column; line-height: 1; }
.stiff-auth-lockup strong { color: #ffffff; font-size: 0.76rem; font-weight: 780; letter-spacing: 0.18em; }
.stiff-auth-lockup small { margin-top: 6px; color: rgba(255, 255, 255, 0.72); font-size: 0.56rem; font-weight: 700; letter-spacing: 0.2em; }

.stiff-auth-stage-copy {
  max-width: 520px;
  padding-block: clamp(46px, 8vh, 94px) 32px;
}

.stiff-auth-eyebrow {
  margin: 0 0 14px !important;
  color: #b9f5ff !important;
  font-size: 0.68rem !important;
  font-weight: 760 !important;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

#gate .stiff-auth-title,
#gate .gate-card .stiff-auth-title {
  margin: 0 !important;
  color: #ffffff !important;
  font-size: clamp(3rem, 6.3vw, 5.6rem) !important;
  font-weight: 660 !important;
  letter-spacing: -0.065em !important;
  line-height: 0.94;
  text-wrap: balance;
}

#gate .stiff-auth-copy {
  max-width: 48ch;
  margin: 24px 0 0;
  color: rgba(255, 255, 255, 0.78) !important;
  font-size: clamp(0.95rem, 1.4vw, 1.08rem) !important;
  line-height: 1.7;
  text-wrap: pretty;
}

.stiff-auth-signals { display: flex; flex-wrap: wrap; gap: 10px; }
.stiff-auth-signals span {
  min-height: 34px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.72rem;
  font-weight: 640;
}

.stiff-auth-signals i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #67e8f9;
  box-shadow: 0 0 0 4px rgba(103, 232, 249, 0.15);
}

.stiff-auth-access {
  min-width: 0;
  padding: clamp(34px, 5vw, 64px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background:
    radial-gradient(circle at 100% 0%, rgba(23, 92, 211, 0.07), transparent 17rem),
    rgba(255, 255, 255, 0.96);
}

.stiff-auth-access-head { margin-bottom: 34px; }
.stiff-auth-overline {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--stiff-blue-soft);
  color: var(--stiff-blue-strong);
  font-size: 0.65rem;
  font-weight: 780;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.stiff-auth-access-head h2 {
  margin: 18px 0 8px;
  color: var(--stiff-ink);
  font-size: clamp(1.75rem, 3vw, 2.35rem);
  font-weight: 690;
  letter-spacing: -0.04em;
}

.stiff-auth-access-head p { margin: 0; color: var(--stiff-muted); font-size: 0.9rem; line-height: 1.6; }
#gate form { width: 100%; text-align: left; }
#gate .stiff-field-label { display: block; margin: 0 0 9px; color: var(--stiff-ink-soft); font-size: 0.72rem; font-weight: 700; }
#gate .stiff-auth-fields { display: grid; gap: 10px; }
#gate .stiff-auth-fields > .stiff-field-label:not(:first-child),

#gate .stiff-pin-row,
#gate .pin-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

#gate .stiff-pin-field,
#gate .pin-field {
  min-width: 0;
  display: flex;
  align-items: center;
  border: 1px solid var(--stiff-line-strong);
  border-radius: 14px;
  background: #f8faff;
  box-shadow: 0 1px 0 #ffffff inset;
}

#gate .stiff-pin-field::before,
#gate .pin-field::before {
  content: "";
  width: 18px;
  height: 18px;
  margin-left: 15px;
  border: 1.8px solid #698096;
  border-radius: 5px;
  clip-path: polygon(18% 40%, 18% 100%, 82% 100%, 82% 40%, 70% 40%, 70% 28%, 63% 15%, 50% 10%, 37% 15%, 30% 28%, 30% 40%);
  flex: 0 0 auto;
}

#gate .stiff-pin-field:focus-within,
#gate .pin-field:focus-within {
  border-color: var(--stiff-blue);
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(23, 92, 211, 0.1);
}

#gate :where(input[type="email"], input[type="password"], input[type="text"]) {
  width: 100%;
  min-width: 0;
  height: 54px;
  padding: 0 14px;
  border: 0 !important;
  border-radius: 14px;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--stiff-ink) !important;
  font-size: 1.08rem;
  letter-spacing: 0;
  text-align: left;
}

#gate :where(input[type="email"], input[type="password"], input[type="text"])::placeholder { color: #91a2b3; opacity: 1; }

#gate button[type="submit"] {
  width: 100%;
  min-width: 116px;
  min-height: 54px;
  margin: 0;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--stiff-blue), var(--stiff-indigo));
  box-shadow: 0 12px 28px rgba(23, 92, 211, 0.22);
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 760;
  cursor: pointer;
}

#gate button[type="submit"]::after { content: "→"; font-size: 1rem; transition: transform 160ms ease; }
#gate button[type="submit"]:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(23, 92, 211, 0.28); }
#gate button[type="submit"]:hover::after { transform: translateX(2px); }
#gate button[type="submit"]:disabled { cursor: wait; opacity: 0.65; transform: none; }

#gate .gate-err,
#gate .form-error,
#gate .err {
  min-height: 1.25em;
  margin: 11px 0 0;
  color: var(--stiff-danger);
  font-size: 0.78rem;
  font-weight: 620;
}

.stiff-auth-meta {
  margin-top: 26px;
  padding-top: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 14px;
  border-top: 1px solid var(--stiff-line);
  color: var(--stiff-faint);
  font-size: 0.68rem;
}

.stiff-auth-meta span { display: inline-flex; align-items: center; gap: 7px; }
.stiff-auth-meta span:first-child::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.11);
}

.stiff-auth-note { display: flex; align-items: center; gap: 8px; margin: 24px 0 0; color: var(--stiff-faint); font-size: 0.7rem; }
.stiff-auth-note::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #10b981; }

/* Application shell — light, modular and resilient. */
#app,
#app.app-shell {
  min-width: 0;
  min-height: 100dvh;
  background:
    radial-gradient(circle at 88% 0%, rgba(34, 211, 238, 0.09), transparent 28rem),
    radial-gradient(circle at 10% 10%, rgba(23, 92, 211, 0.06), transparent 24rem),
    var(--stiff-canvas);
  color: var(--stiff-ink);
}

#app :where(.hub-layout, .hub-pool, .hub-monitor, .topbar, .hub-toolbar, .topbar-actions, .account-grid, .settings-pad, .workspace, .gallery-panel) > * { min-width: 0; }
#app :where(p, span, strong, h1, h2, h3, h4, td, th, label) { overflow-wrap: anywhere; }

#app .topbar,
#vps-bar {
  position: sticky;
  top: 0;
  z-index: 40;
  min-height: var(--stiff-top-h);
  height: auto;
  padding: 10px clamp(14px, 2.2vw, 32px);
  border-color: rgba(40, 68, 95, 0.09);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 1px 0 rgba(40, 68, 95, 0.06), 0 8px 24px rgba(40, 68, 95, 0.035);
  color: var(--stiff-ink);
  backdrop-filter: saturate(150%) blur(14px);
}

#vps-bar { min-height: 34px; padding-block: 5px; z-index: 42; }
#app .brand,
#app .brand-copy strong { color: var(--stiff-ink); }

#app .brand .mark,
#app .mark,
#app .brand-mark {
  width: 36px;
  height: 44px;
  border: 0;
  border-radius: 0;
  background: url("stiff-symbol.webp") center / contain no-repeat;
  box-shadow: none;
  color: transparent !important;
  font-size: 0;
}

#app .brand-copy { display: flex; flex-direction: column; line-height: 1; }
#app .brand-copy strong { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.16em; }
#app .brand-copy small { margin-top: 5px; color: var(--stiff-blue); font-size: 0.58rem; font-weight: 720; letter-spacing: 0.13em; text-transform: uppercase; }
#app :where(.topbar-actions, .hub-actions, .settings-actions, .hero-actions) { gap: 8px; }

#app :where(.linkish, .icon-btn, .icon-button, .btn-ghost, .text-button) {
  min-height: 38px;
  border-color: rgba(40, 68, 95, 0.12);
  background: #f5f8fc;
  color: var(--stiff-ink-soft);
  box-shadow: 0 1px 0 #ffffff inset;
}

#app :where(.linkish, .icon-btn, .icon-button, .btn-ghost, .text-button):hover {
  border-color: rgba(23, 92, 211, 0.28);
  background: var(--stiff-blue-soft);
  color: var(--stiff-blue-strong);
  transform: translateY(-1px);
}

#app :where(.btn-primary, .button.primary, .send-btn) {
  min-height: 40px;
  border-color: transparent;
  background: linear-gradient(135deg, var(--stiff-blue), var(--stiff-indigo));
  box-shadow: 0 10px 22px rgba(23, 92, 211, 0.17);
  color: #ffffff;
}

#app :where(.btn-primary, .button.primary, .send-btn):hover { box-shadow: 0 14px 28px rgba(23, 92, 211, 0.23); transform: translateY(-1px); }

#app .hub-layout {
  width: min(1960px, 100%);
  min-height: calc(100dvh - var(--stiff-top-h));
  margin: 0 auto;
  padding: clamp(14px, 2vw, 28px);
  display: grid;
  grid-template-columns: minmax(280px, 320px) minmax(0, 1fr);
  gap: clamp(14px, 2vw, 26px);
  align-items: start;
}

#app .hub-monitor {
  position: sticky;
  top: calc(var(--stiff-top-h) + 18px);
  max-height: calc(100dvh - var(--stiff-top-h) - 36px);
  padding: 22px;
  overflow: auto;
  border: 1px solid rgba(23, 92, 211, 0.13);
  border-radius: 24px;
  background:
    radial-gradient(circle at 100% 0%, rgba(34, 211, 238, 0.18), transparent 15rem),
    linear-gradient(180deg, rgba(237, 244, 255, 0.96), rgba(255, 255, 255, 0.98) 42%);
  box-shadow: var(--stiff-shadow);
  color: var(--stiff-ink);
  scrollbar-width: thin;
}

#app .hub-monitor::before {
  content: "";
  position: absolute;
  top: 0;
  left: 28px;
  right: 28px;
  height: 3px;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(90deg, var(--stiff-blue), var(--stiff-indigo), var(--stiff-cyan-bright));
}

#app .hub-monitor :where(.monitor-head h2, .mon-v, strong) { color: var(--stiff-ink); }
#app .hub-monitor :where(.monitor-sub, .monitor-fresh, .mon-k, .mon-sub, .hint) { color: var(--stiff-muted); }
#app .hub-monitor :where(.monitor-stack, .monitor-models) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }

#app .hub-monitor :where(.mon-card, .ops-360, .collection-card, .private-note) {
  min-height: 68px;
  padding: 12px;
  border: 1px solid rgba(40, 68, 95, 0.09);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 5px 15px rgba(40, 68, 95, 0.045), 0 1px 0 #ffffff inset;
}

#app .hub-monitor .mon-v { font-variant-numeric: tabular-nums; letter-spacing: -0.04em; }
#app .hub-monitor .mon-v.ok,
#app .hub-monitor .mon-v.accent { color: var(--stiff-blue); }
#app .hub-monitor .mon-v.danger { color: var(--stiff-danger); }
#app .hub-monitor .btn-ghost { border-color: rgba(23, 92, 211, 0.18); background: var(--stiff-blue-soft); color: var(--stiff-blue-strong); }

#app :where(.hub-pool, .settings-pad, .gallery-panel, .model-hero, .lots-section) {
  min-width: 0;
  border: 1px solid rgba(40, 68, 95, 0.09);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--stiff-shadow);
}

#app .hub-pool { min-height: calc(100dvh - var(--stiff-top-h) - 56px); padding: clamp(18px, 2.4vw, 34px); }
#app :where(.hub-toolbar, .section-heading, .gallery-header, .lot-actions) { border-color: rgba(40, 68, 95, 0.09); }
#app :where(.pool-title, .section-heading h2, .gallery-title h2, .settings-card h2, .settings-card h3) { color: var(--stiff-ink); letter-spacing: -0.025em; }
#app .account-grid { grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 14px; contain: layout style; }

#app :where(.account-card, .queue-card, .settings-card, .gallery-card, .photo-card, .lot-card, details) {
  border-color: rgba(40, 68, 95, 0.1);
  background: var(--stiff-surface);
  box-shadow: var(--stiff-shadow-sm);
  color: var(--stiff-ink);
}

#app :where(.account-card, .queue-card, .photo-card, .lot-card):hover {
  border-color: rgba(23, 92, 211, 0.32);
  box-shadow: 0 16px 36px rgba(40, 68, 95, 0.11);
  transform: translateY(-2px);
}

#app :where(.model-chip, .chip, .set-tab, .lot-nav button, .density-control) {
  border-color: rgba(40, 68, 95, 0.11);
  background: #f4f7fb;
  color: var(--stiff-muted);
}

#app :where(.model-chip.active, .chip.active, .set-tab.active, .lot-nav button.active, .density-control .active) {
  border-color: rgba(23, 92, 211, 0.24);
  background: linear-gradient(135deg, rgba(23, 92, 211, 0.11), rgba(79, 70, 229, 0.08));
  color: var(--stiff-blue-strong);
}

#app :where(input, select, textarea, .search-field, .lot-select) {
  min-width: 0;
  border-color: rgba(40, 68, 95, 0.16);
  background: #ffffff;
  color: var(--stiff-ink);
}

#app :where(input, select, textarea):focus,
#app .search-field:focus-within { border-color: var(--stiff-blue); box-shadow: 0 0 0 4px rgba(23, 92, 211, 0.09); }
#app :where(.vps-vitals, .host-meters),
#vps-bar { color: var(--stiff-ink); }
#app :where(.vital-meter, .hm-track),
#vps-bar .vps-track { background: rgba(40, 68, 95, 0.09); }
#app :where(.vital-v, .hm-v),
#vps-bar .vps-val { color: var(--stiff-blue-strong); }

/* Live VPS telemetry — dynamic without adding requests or chart libraries. */
#app :where(.vps-vitals, .vps-stats, .host-meters),
#vps-bar {
  gap: 8px;
  font-variant-numeric: tabular-nums;
}

#app :where(.vital, .vs-item, .hm),
#vps-bar .vps-item {
  --stiff-load: 0;
  isolation: isolate;
  position: relative;
  min-width: 92px;
  min-height: 42px;
  padding: 7px 10px 9px;
  overflow: hidden;
  border: 1px solid rgba(23, 92, 211, 0.1);
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(238, 245, 255, 0.9));
  box-shadow: 0 5px 15px rgba(40, 68, 95, 0.055), 0 1px 0 #ffffff inset;
}

#app :where(.vital, .vs-item, .hm)::after,
#vps-bar .vps-item::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  border-radius: 0 999px 999px 0;
  background: linear-gradient(90deg, var(--stiff-blue), var(--stiff-indigo), var(--stiff-cyan-bright));
  transform: scaleX(var(--stiff-load));
  transform-origin: left center;
  transition: transform 620ms cubic-bezier(.2, .8, .2, 1);
}

#app :where(.vital-k, .vs-k, .hm-k),
#vps-bar .vps-lab {
  color: var(--stiff-faint);
  font-size: 0.57rem;
  font-weight: 760;
  letter-spacing: 0.1em;
}

#app :where(.vital-v, .vs-v, .hm-v),
#vps-bar .vps-val {
  color: var(--stiff-blue-strong);
  font-weight: 740;
}

#app :where(.vital-meter, .hm-track),
#vps-bar .vps-track {
  height: 4px;
  border: 0;
  background: rgba(40, 68, 95, 0.1);
  box-shadow: none;
}

#app :where(.vital-meter i, .hm-track i),
#vps-bar .vps-fill {
  background: linear-gradient(90deg, var(--stiff-blue), var(--stiff-indigo), var(--stiff-cyan-bright));
  box-shadow: none;
}

#app :where(.vital-net, .hm-net),
#vps-bar .vps-net { min-width: 142px; }
#app :where(.vital-netv [data-net="rx"], .hm-net .dn),
#vps-bar .vps-dn { color: var(--stiff-cyan); }
#app :where(.vital-netv [data-net="tx"], .hm-net .up),
#vps-bar .vps-up { color: var(--stiff-indigo); }

#app :where(.vital, .vs-item, .hm).is-updating,
#vps-bar .vps-item.is-updating { animation: stiff-metric-update 520ms ease-out both; }

#app :where(.vital, .vs-item, .hm)[data-level="attention"],
#vps-bar .vps-item[data-level="attention"] {
  border-color: rgba(161, 92, 0, 0.2);
  background: linear-gradient(145deg, #ffffff, #fff7e8);
}

#app :where(.vital, .vs-item, .hm)[data-level="critical"],
#vps-bar .vps-item[data-level="critical"] {
  border-color: rgba(192, 53, 77, 0.22);
  background: linear-gradient(145deg, #ffffff, #fff0f3);
}

/* Deep legacy surfaces — remove the near-black islands left by app-specific CSS. */
#app :where(.toolbar, .settings-nav) {
  gap: 8px;
  padding: 10px clamp(12px, 2vw, 26px);
  padding-left: max(clamp(12px, 2vw, 26px), env(safe-area-inset-left));
  padding-right: max(clamp(12px, 2vw, 26px), env(safe-area-inset-right));
  flex-wrap: nowrap;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
  border-color: rgba(40, 68, 95, 0.1);
  background: rgba(248, 251, 255, 0.94);
  box-shadow: 0 9px 26px rgba(40, 68, 95, 0.055);
  backdrop-filter: saturate(150%) blur(14px);
}

#app :where(.toolbar, .settings-nav) :where(.chip, .set-tab) {
  min-height: 38px;
  border: 1px solid rgba(40, 68, 95, 0.12);
  background: rgba(255, 255, 255, 0.92);
  color: var(--stiff-ink-soft);
  box-shadow: 0 1px 0 #ffffff inset;
}

#app :where(.toolbar, .settings-nav) :where(.chip, .set-tab):hover {
  border-color: rgba(23, 92, 211, 0.25);
  background: var(--stiff-blue-soft);
  color: var(--stiff-blue-strong);
}

#app :where(.toolbar, .settings-nav) :where(.chip, .set-tab).active {
  border-color: rgba(23, 92, 211, 0.28);
  background: linear-gradient(135deg, var(--stiff-blue), var(--stiff-indigo));
  box-shadow: 0 9px 20px rgba(23, 92, 211, 0.18);
  color: #ffffff;
}

#app :where(.stat-chip, .account-card .pmark, .account-card .pmark.name, .pmark.muted, .pmark.owl, .pmark.x) {
  border: 1px solid rgba(23, 92, 211, 0.12);
  background: linear-gradient(135deg, rgba(23, 92, 211, 0.075), rgba(34, 211, 238, 0.09));
  color: var(--stiff-ink-soft);
  box-shadow: none;
}

#app .stat-chip .sv,
#app :where(.account-card .pmark, .pmark.muted, .pmark.owl, .pmark.x) :where(strong, b, span) {
  color: var(--stiff-blue-strong);
}

#app :where(.account-card .pmark.done, .account-card .pmark.ready) {
  border-color: rgba(8, 122, 85, 0.16);
  background: rgba(8, 122, 85, 0.09);
  color: var(--stiff-success);
}

#app .danger-btn {
  border-color: rgba(192, 53, 77, 0.24) !important;
  background: rgba(192, 53, 77, 0.065) !important;
  color: var(--stiff-danger) !important;
}

#app .danger-btn:hover {
  border-color: rgba(192, 53, 77, 0.34) !important;
  background: rgba(192, 53, 77, 0.1) !important;
}

#app :where(.ar-fixed-info, .cq-fixed-info, .debug-box, .status-box) {
  border-color: rgba(23, 92, 211, 0.12);
  background: linear-gradient(135deg, rgba(23, 92, 211, 0.055), rgba(34, 211, 238, 0.065));
  color: var(--stiff-ink-soft);
}

#app :where(.ar-fixed-info, .cq-fixed-info, .debug-box, .status-box) :where(.k, .label) { color: var(--stiff-muted); }
#app :where(.ar-fixed-info, .cq-fixed-info, .debug-box, .status-box) :where(.v, .value) { color: var(--stiff-blue-strong); }

#app .cascade-grid {
  width: min(1600px, 100%);
  max-width: none;
  margin-inline: auto;
  padding: clamp(8px, 1.2vw, 16px);
  gap: clamp(7px, 0.8vw, 12px);
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  background: transparent;
}

#app .cascade-cell {
  overflow: hidden;
  border: 1px solid rgba(40, 68, 95, 0.1);
  border-radius: clamp(12px, 1vw, 18px);
  background: linear-gradient(145deg, #f2f7ff, #ffffff);
  box-shadow: 0 8px 24px rgba(40, 68, 95, 0.075);
  transform: translateZ(0);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

#app .cascade-cell:hover {
  border-color: rgba(23, 92, 211, 0.28);
  box-shadow: 0 16px 34px rgba(40, 68, 95, 0.13);
  transform: translateY(-2px) translateZ(0);
}

#app .cascade-cell img {
  background: linear-gradient(145deg, #eaf2ff, #f9fbff);
  animation: stiff-media-in 280ms ease-out both;
}

#app :where(.cascade-cell .ph, .cascade-cell .ph-img, .photo-slot .ph, .me-photo, .me-photos .shot) {
  border: 0;
  background:
    radial-gradient(circle at 28% 20%, rgba(34, 211, 238, 0.24), transparent 42%),
    linear-gradient(145deg, #eaf2ff, #f9fbff);
  color: var(--stiff-blue);
}

#app .cascade-cell .ph::after {
  content: "Foto indisponível";
  position: absolute;
  z-index: 1;
  left: 10px;
  right: 10px;
  bottom: 48px;
  margin: 0;
  color: var(--stiff-muted);
  font-size: 0.64rem;
  font-weight: 680;
  letter-spacing: 0.02em;
  text-align: center;
}

#app .cascade-cell .cap {
  padding: 28px 10px 10px;
  background: linear-gradient(transparent, rgba(245, 249, 255, 0.97) 58%);
  color: var(--stiff-ink);
  text-shadow: none;
}

#app .cascade-cell .online {
  width: 10px;
  height: 10px;
  border: 2px solid #ffffff;
  background: #0f9f70;
  box-shadow: 0 4px 10px rgba(8, 122, 85, 0.22);
}

#app :where(.inbox-item, .chat-compose, .bubble.theirs, .sheet-card, .profile-card) {
  border-color: rgba(40, 68, 95, 0.1);
  background: rgba(255, 255, 255, 0.96);
  color: var(--stiff-ink);
}

#app :where(.cq-job, .af-preview, .me-chip, .tag-badge, .captcha-box, .captcha-card, pre.out, .busy-shell, .confirm-card) {
  border-color: rgba(40, 68, 95, 0.12);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(240, 246, 255, 0.94));
  box-shadow: var(--stiff-shadow-sm);
  color: var(--stiff-ink-soft);
}

#app :where(.captcha-card header strong, .cq-job .cq-email, .busy-shell strong, .confirm-card strong) { color: var(--stiff-ink); }
#app :where(.captcha-card header span, .cq-job .cq-msg, .busy-shell span) { color: var(--stiff-muted); }
#app #stiff-arkose-host { background: rgba(31, 65, 108, 0.26); backdrop-filter: blur(4px); }
#app :where(.risk-hint, .ban-hint, .flash.err, .cq-st.failed, .cq-st.cancelled) { color: var(--stiff-danger); }
#app :where(.verify-banner, .verify-panel) { border-color: rgba(161, 92, 0, 0.2); background: rgba(161, 92, 0, 0.07); color: var(--stiff-warning); }
#app :where(.verify-panel h3, .verify-panel .vp-kind, .cq-st.need_captcha, .cq-st.needs_human) { color: var(--stiff-warning); }
#app .cq-st.done { color: var(--stiff-success); }

#app .inbox-item:hover { background: var(--stiff-canvas-blue); }
#app :where(.inbox-avatar, .avatar.ph, .av) { background: linear-gradient(145deg, #dceaff, #eef9ff); color: var(--stiff-blue); }
#app .sheet-backdrop { background: rgba(31, 65, 108, 0.26); backdrop-filter: blur(4px); }
#app :where(.sheet-close, .file-btn) { border: 1px solid rgba(40, 68, 95, 0.1); background: #f3f7fc; color: var(--stiff-ink); }
#app :where(.photo-slot .del, .me-photos .x) { background: rgba(192, 53, 77, 0.88); box-shadow: 0 5px 12px rgba(192, 53, 77, 0.2); }

.toast,
#app .toast {
  border-color: rgba(23, 92, 211, 0.14);
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 18px 46px rgba(40, 68, 95, 0.18);
  color: var(--stiff-ink-soft);
  backdrop-filter: blur(12px);
}

.toast.err,
#app .toast.err { border-color: rgba(192, 53, 77, 0.25); color: var(--stiff-danger); }
.toast.ok,
#app .toast.ok { border-color: rgba(8, 122, 85, 0.22); color: var(--stiff-success); }

/* Auxiliary frontend routes share the same luminous system. */
#app .steps .step,
#app :where(.create-card, .capture-card) {
  border-color: rgba(40, 68, 95, 0.1);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--stiff-shadow-sm);
  color: var(--stiff-ink);
}

#app .steps .step .n {
  background: linear-gradient(135deg, var(--stiff-blue), var(--stiff-indigo));
  color: #ffffff;
  box-shadow: 0 7px 16px rgba(23, 92, 211, 0.18);
}

#app .steps code { color: var(--stiff-blue-strong); }
#app .steps .mono { border-color: rgba(40, 68, 95, 0.12); background: #f4f7fb; color: var(--stiff-ink-soft); }

body > .wrap > .topbar {
  border-color: rgba(40, 68, 95, 0.1);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--stiff-shadow-sm);
  color: var(--stiff-ink);
}

body > .wrap :where(.card, .hero) {
  border-color: rgba(40, 68, 95, 0.1);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--stiff-shadow-sm);
  color: var(--stiff-ink);
}

body > .wrap :where(.badge, .tabs a, .btn.secondary, .btn.ghost) {
  border-color: rgba(23, 92, 211, 0.12);
  background: var(--stiff-blue-soft);
  color: var(--stiff-blue-strong);
}

body > .wrap .badge.ok,
body > .wrap .flash.ok { border-color: rgba(8, 122, 85, 0.2); background: rgba(8, 122, 85, 0.08); color: var(--stiff-success); }
body > .wrap .badge.warn { border-color: rgba(161, 92, 0, 0.2); background: rgba(161, 92, 0, 0.08); color: var(--stiff-warning); }
body > .wrap .flash.error { border-color: rgba(192, 53, 77, 0.22); background: rgba(192, 53, 77, 0.08); color: var(--stiff-danger); }
body > .wrap .flash.info { border-color: rgba(23, 92, 211, 0.18); background: var(--stiff-blue-soft); color: var(--stiff-blue-strong); }
body > .wrap :where(.form input, .form textarea, .form select) { border-color: rgba(40, 68, 95, 0.15); background: #ffffff; color: var(--stiff-ink); }
body > .wrap .tabs a.active { border-color: rgba(23, 92, 211, 0.28); background: linear-gradient(135deg, var(--stiff-blue), var(--stiff-indigo)); color: #ffffff; }

/* Photos overlays keep focus without falling back to black panels. */
.lightbox {
  background:
    radial-gradient(circle at 18% 8%, rgba(34, 211, 238, 0.16), transparent 30rem),
    rgba(235, 243, 253, 0.965);
  color: var(--stiff-ink);
}

.lightbox :where(.lightbox-top, .lightbox-bottom) {
  border-color: rgba(40, 68, 95, 0.11);
  background: rgba(255, 255, 255, 0.74);
}

.lightbox :where(.round-button, .lightbox-nav) {
  border-color: rgba(40, 68, 95, 0.14);
  background: rgba(255, 255, 255, 0.88);
  color: var(--stiff-ink-soft);
  box-shadow: var(--stiff-shadow-sm);
}

.lightbox :where(.round-button, .lightbox-nav):hover { border-color: rgba(23, 92, 211, 0.26); background: #ffffff; color: var(--stiff-blue); }
.lightbox-stage img { box-shadow: 0 28px 72px rgba(40, 68, 95, 0.22); }
.modal-backdrop { background: rgba(31, 65, 108, 0.27); backdrop-filter: blur(6px); }

.confirm-card {
  border-color: rgba(192, 53, 77, 0.18);
  background: #ffffff;
  box-shadow: var(--stiff-shadow-lg);
  color: var(--stiff-ink);
}

.confirm-impact { background: rgba(192, 53, 77, 0.065); color: var(--stiff-danger); }
.confirm-type strong { color: var(--stiff-ink-soft); }
.confirm-type input { border-color: rgba(40, 68, 95, 0.16); background: #ffffff; color: var(--stiff-ink); }

.busy-shell {
  background:
    radial-gradient(circle at 50% 42%, rgba(34, 211, 238, 0.14), transparent 20rem),
    rgba(239, 245, 253, 0.94);
  color: var(--stiff-ink);
}

.busy-shell span { color: var(--stiff-muted); }
.spinner { border-color: rgba(23, 92, 211, 0.14); border-top-color: var(--stiff-blue); }

/* Existing monitor numbers become proportional visual bars. */
#app .hub-monitor .mon-card {
  --stiff-meter: 0;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  contain: paint;
}

#app .hub-monitor .mon-card::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  border-radius: 0 999px 999px 0;
  background: linear-gradient(90deg, var(--stiff-blue), var(--stiff-indigo), var(--stiff-cyan-bright));
  transform: scaleX(var(--stiff-meter));
  transform-origin: left center;
  transition: transform 720ms cubic-bezier(.2, .8, .2, 1);
}

#app .hub-monitor .mon-card.is-updating { animation: stiff-metric-update 520ms ease-out both; }

#app .stiff-sparkline {
  position: absolute;
  z-index: -1;
  right: 8px;
  bottom: 8px;
  width: 54px;
  height: 20px;
  opacity: 0.28;
  pointer-events: none;
}

#app .stiff-sparkline polyline {
  fill: none;
  stroke: var(--stiff-blue);
  stroke-width: 1.6;
  vector-effect: non-scaling-stroke;
}

@media (prefers-reduced-data: reduce) {
  #app .stiff-sparkline { display: none; }
}

#app .bottom-nav {
  border-color: rgba(40, 68, 95, 0.1);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 -12px 32px rgba(40, 68, 95, 0.08);
  backdrop-filter: blur(14px);
}

#app .bottom-nav .nav-item { color: var(--stiff-muted); }
#app .bottom-nav .nav-item.active { color: var(--stiff-blue); }

/* Photos sidebar is light instead of a dark visual wall. */
#app .sidebar {
  border-color: rgba(40, 68, 95, 0.1);
  background:
    radial-gradient(circle at 100% 0%, rgba(34, 211, 238, 0.1), transparent 18rem),
    rgba(255, 255, 255, 0.97);
  box-shadow: 10px 0 34px rgba(40, 68, 95, 0.065);
  color: var(--stiff-ink);
}

#app .sidebar :where(.brand-copy strong, .sidebar-label, .model-nav, .collection-card, .private-note, .logout-button) { color: var(--stiff-ink); }
#app .sidebar .brand-copy small { color: var(--stiff-blue); }
#app .sidebar :where(.collection-card, .private-note) { border-color: rgba(23, 92, 211, 0.12); background: linear-gradient(135deg, rgba(23, 92, 211, 0.08), rgba(34, 211, 238, 0.08)); }
#app .sidebar :where(.model-button, .logout-button) { border-color: rgba(40, 68, 95, 0.1); background: rgba(246, 248, 252, 0.84); color: var(--stiff-ink-soft); }
#app .sidebar .model-button.active { border-color: rgba(23, 92, 211, 0.22); background: linear-gradient(135deg, var(--stiff-blue), var(--stiff-indigo)); color: #ffffff; box-shadow: 0 10px 24px rgba(23, 92, 211, 0.2); }
#app .sidebar .model-button.active :where(strong, span) { color: #ffffff; }
#app .sidebar .logout-button:hover { border-color: rgba(192, 53, 77, 0.2); background: rgba(192, 53, 77, 0.07); color: var(--stiff-danger); }
#app .workspace { min-width: 0; background: transparent; }

.stiff-tool-link {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid rgba(23, 92, 211, 0.13) !important;
  border-radius: 11px;
  background: var(--stiff-blue-soft) !important;
  color: var(--stiff-blue-strong) !important;
  text-decoration: none;
}

.stiff-diagnostics {
  margin-top: 18px;
  padding: 18px;
  border: 1px solid rgba(23, 92, 211, 0.12);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(23, 92, 211, 0.06), rgba(34, 211, 238, 0.07));
}

.stiff-diagnostics h3 { margin: 0 0 6px; color: var(--stiff-ink); }
.stiff-diagnostics p { margin: 0 0 12px; color: var(--stiff-muted); }
.stiff-diagnostic-result { max-width: 100%; margin-top: 10px; overflow: auto; color: var(--stiff-muted); font-size: 0.78rem; line-height: 1.55; white-space: pre-wrap; }

#stiff-network-state {
  position: fixed;
  z-index: 99999;
  left: 50%;
  bottom: max(20px, env(safe-area-inset-bottom));
  max-width: min(460px, calc(100vw - 32px));
  min-height: 44px;
  padding: 11px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(40, 68, 95, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 46px rgba(40, 68, 95, 0.18);
  color: var(--stiff-ink-soft);
  font-size: 0.78rem;
  font-weight: 680;
  text-align: center;
  transform: translateX(-50%);
  backdrop-filter: blur(12px);
}

#stiff-network-state.is-offline {
  border-color: rgba(161, 92, 0, 0.22);
  color: #7b4907;
}

#stiff-network-state.is-online {
  border-color: rgba(8, 122, 85, 0.2);
  color: var(--stiff-success);
}

#stiff-network-state[hidden] { display: none; }

/* Shared light/dark control. It is injected by the passive UI runtime. */
.stiff-theme-toggle {
  appearance: none;
  min-width: 42px;
  min-height: 38px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex: 0 0 auto;
  border: 1px solid rgba(40, 68, 95, 0.13);
  border-radius: 999px;
  background: rgba(245, 248, 252, 0.94);
  box-shadow: 0 4px 14px rgba(40, 68, 95, 0.08), 0 1px 0 rgba(255, 255, 255, 0.82) inset;
  color: var(--stiff-ink-soft);
  font: 680 0.7rem/1 var(--font);
  white-space: nowrap;
  cursor: pointer;
}

.stiff-theme-toggle:hover {
  border-color: rgba(23, 92, 211, 0.3);
  background: var(--stiff-blue-soft);
  color: var(--stiff-blue-strong);
  transform: translateY(-1px);
}

.stiff-theme-toggle.is-floating {
  position: fixed;
  z-index: 99998;
  top: max(14px, env(safe-area-inset-top));
  right: max(14px, env(safe-area-inset-right));
  backdrop-filter: saturate(150%) blur(14px);
}

.stiff-theme-icon {
  width: 17px;
  display: inline-grid;
  place-items: center;
  font-size: 1rem;
  line-height: 1;
}

html[data-stiff-theme="dark"] .stiff-theme-toggle {
  border-color: rgba(153, 196, 255, 0.2);
  background: rgba(18, 35, 56, 0.94);
  box-shadow: 0 7px 20px rgba(0, 5, 13, 0.28), 0 1px 0 rgba(255, 255, 255, 0.05) inset;
  color: var(--stiff-ink-soft);
}

html[data-stiff-theme="dark"] .stiff-theme-toggle:hover {
  border-color: rgba(106, 167, 255, 0.42);
  background: rgba(106, 167, 255, 0.15);
  color: var(--stiff-blue-strong);
}

/* Premium dark theme — deep navy surfaces, never pure black. */
html[data-stiff-theme="dark"],
html[data-stiff-theme="dark"] body {
  background:
    radial-gradient(circle at 8% 4%, rgba(68, 215, 235, 0.08), transparent 26rem),
    radial-gradient(circle at 92% 0%, rgba(152, 146, 255, 0.09), transparent 31rem),
    var(--stiff-canvas) !important;
  color: var(--stiff-ink);
}

html[data-stiff-theme="dark"] :where(button, input, select, textarea) { color-scheme: dark; }

html[data-stiff-theme="dark"] #gate,
html[data-stiff-theme="dark"] #gate.auth-shell {
  background:
    radial-gradient(circle at 14% 18%, rgba(68, 215, 235, 0.13), transparent 26rem),
    radial-gradient(circle at 88% 12%, rgba(152, 146, 255, 0.13), transparent 29rem),
    linear-gradient(135deg, #07111f 0%, #0a1829 52%, #11182c 100%) !important;
  color: var(--stiff-ink);
}

html[data-stiff-theme="dark"] #gate .gate-card,
html[data-stiff-theme="dark"] #gate .stiff-auth-card {
  border-color: rgba(153, 196, 255, 0.16);
  background: rgba(10, 23, 38, 0.96);
  box-shadow: var(--stiff-shadow-lg), 0 1px 0 rgba(255, 255, 255, 0.045) inset;
  color: var(--stiff-ink);
}

html[data-stiff-theme="dark"] .stiff-auth-stage {
  background:
    radial-gradient(circle at 86% 8%, rgba(103, 232, 249, 0.3), transparent 21rem),
    linear-gradient(145deg, #164c9d 0%, #334fbc 48%, #5b50c6 100%);
}

html[data-stiff-theme="dark"] .stiff-auth-access {
  background:
    radial-gradient(circle at 100% 0%, rgba(106, 167, 255, 0.11), transparent 18rem),
    rgba(10, 23, 38, 0.98);
}

html[data-stiff-theme="dark"] :where(.stiff-auth-access-head h2, #gate .stiff-field-label) { color: var(--stiff-ink); }
html[data-stiff-theme="dark"] :where(.stiff-auth-access-head p, .stiff-auth-note, .stiff-auth-meta) { color: var(--stiff-muted); }
html[data-stiff-theme="dark"] .stiff-auth-overline { color: var(--stiff-blue-strong); }

html[data-stiff-theme="dark"] #gate :where(.stiff-pin-field, .pin-field) {
  border-color: var(--stiff-line-strong);
  background: #0d1c2e;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
}

html[data-stiff-theme="dark"] #gate :where(.stiff-pin-field, .pin-field):focus-within {
  border-color: var(--stiff-blue);
  background: #102238;
  box-shadow: 0 0 0 4px rgba(106, 167, 255, 0.13);
}

html[data-stiff-theme="dark"] #gate :where(input[type="email"], input[type="password"], input[type="text"]) { color: var(--stiff-ink) !important; }
html[data-stiff-theme="dark"] #gate :where(input[type="email"], input[type="password"], input[type="text"])::placeholder { color: var(--stiff-faint); }

html[data-stiff-theme="dark"] #app,
html[data-stiff-theme="dark"] #app.app-shell {
  background:
    radial-gradient(circle at 88% 0%, rgba(68, 215, 235, 0.07), transparent 29rem),
    radial-gradient(circle at 10% 10%, rgba(106, 167, 255, 0.08), transparent 25rem),
    var(--stiff-canvas);
  color: var(--stiff-ink);
}

html[data-stiff-theme="dark"] #app .topbar,
html[data-stiff-theme="dark"] #vps-bar,
html[data-stiff-theme="dark"] body > .wrap > .topbar,
html[data-stiff-theme="dark"] header.topbar,
html[data-stiff-theme="dark"] header:not(.lightbox-top) {
  border-color: rgba(153, 196, 255, 0.11);
  background: rgba(9, 22, 37, 0.92);
  box-shadow: 0 1px 0 rgba(153, 196, 255, 0.06), 0 9px 28px rgba(0, 6, 15, 0.2);
  color: var(--stiff-ink);
}

html[data-stiff-theme="dark"] #app :where(.linkish, .icon-btn, .icon-button, .btn-ghost, .text-button),
html[data-stiff-theme="dark"] body > .wrap :where(.badge, .tabs a, .btn.secondary, .btn.ghost),
html[data-stiff-theme="dark"] #app :where(.model-chip, .chip, .set-tab, .lot-nav button, .density-control) {
  border-color: rgba(153, 196, 255, 0.15);
  background: rgba(18, 35, 56, 0.9);
  color: var(--stiff-ink-soft);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.035) inset;
}

html[data-stiff-theme="dark"] #app :where(.linkish, .icon-btn, .icon-button, .btn-ghost, .text-button):hover,
html[data-stiff-theme="dark"] #app :where(.model-chip, .chip, .set-tab, .lot-nav button, .density-control):hover {
  border-color: rgba(106, 167, 255, 0.38);
  background: rgba(106, 167, 255, 0.13);
  color: var(--stiff-blue-strong);
}

html[data-stiff-theme="dark"] #app .hub-monitor {
  border-color: rgba(106, 167, 255, 0.2);
  background:
    radial-gradient(circle at 100% 0%, rgba(68, 215, 235, 0.12), transparent 16rem),
    linear-gradient(180deg, rgba(13, 32, 54, 0.98), rgba(10, 24, 40, 0.98) 45%);
  color: var(--stiff-ink);
}

html[data-stiff-theme="dark"] #app .hub-monitor :where(.mon-card, .ops-360, .collection-card, .private-note),
html[data-stiff-theme="dark"] #app :where(.hub-pool, .settings-pad, .gallery-panel, .model-hero, .lots-section),
html[data-stiff-theme="dark"] #app :where(.account-card, .queue-card, .settings-card, .gallery-card, .photo-card, .lot-card, details),
html[data-stiff-theme="dark"] #app .steps .step,
html[data-stiff-theme="dark"] #app :where(.create-card, .capture-card),
html[data-stiff-theme="dark"] body > .wrap :where(.card, .hero) {
  border-color: rgba(153, 196, 255, 0.12);
  background: rgba(14, 27, 43, 0.96);
  box-shadow: var(--stiff-shadow-sm);
  color: var(--stiff-ink);
}

html[data-stiff-theme="dark"] #app :where(input, select, textarea, .search-field, .lot-select),
html[data-stiff-theme="dark"] body > .wrap :where(.form input, .form textarea, .form select),
html[data-stiff-theme="dark"] :where(.confirm-type input) {
  border-color: var(--stiff-line-strong);
  background: #0b192a;
  color: var(--stiff-ink);
}

html[data-stiff-theme="dark"] #app :where(.vital, .vs-item, .hm),
html[data-stiff-theme="dark"] #vps-bar .vps-item {
  border-color: rgba(106, 167, 255, 0.16);
  background: linear-gradient(145deg, rgba(18, 35, 56, 0.98), rgba(11, 27, 46, 0.94));
  box-shadow: 0 6px 18px rgba(0, 6, 15, 0.23), 0 1px 0 rgba(255, 255, 255, 0.035) inset;
}

html[data-stiff-theme="dark"] #app :where(.vital, .vs-item, .hm)[data-level="attention"],
html[data-stiff-theme="dark"] #vps-bar .vps-item[data-level="attention"] {
  border-color: rgba(255, 201, 120, 0.28);
  background: linear-gradient(145deg, #16253a, #2b2418);
}

html[data-stiff-theme="dark"] #app :where(.vital, .vs-item, .hm)[data-level="critical"],
html[data-stiff-theme="dark"] #vps-bar .vps-item[data-level="critical"] {
  border-color: rgba(255, 147, 166, 0.3);
  background: linear-gradient(145deg, #18263a, #321d2a);
}

html[data-stiff-theme="dark"] #app :where(.toolbar, .settings-nav) {
  border-color: rgba(153, 196, 255, 0.12);
  background: rgba(10, 24, 40, 0.94);
  box-shadow: 0 9px 28px rgba(0, 6, 15, 0.24);
}

html[data-stiff-theme="dark"] #app :where(.toolbar, .settings-nav) :where(.chip, .set-tab) {
  border-color: rgba(153, 196, 255, 0.16);
  background: rgba(18, 35, 56, 0.94);
  color: var(--stiff-ink-soft);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.035) inset;
}

html[data-stiff-theme="dark"] #app :where(.stat-chip, .account-card .pmark, .account-card .pmark.name, .pmark.muted, .pmark.owl, .pmark.x) {
  border-color: rgba(106, 167, 255, 0.2);
  background: linear-gradient(135deg, rgba(106, 167, 255, 0.14), rgba(68, 215, 235, 0.1));
  color: var(--stiff-ink-soft);
}

html[data-stiff-theme="dark"] #app :where(.ar-fixed-info, .cq-fixed-info, .debug-box, .status-box),
html[data-stiff-theme="dark"] #app :where(.cq-job, .af-preview, .me-chip, .tag-badge, .captcha-box, .captcha-card, pre.out, .busy-shell, .confirm-card) {
  border-color: rgba(106, 167, 255, 0.17);
  background: linear-gradient(145deg, rgba(18, 35, 56, 0.98), rgba(10, 27, 46, 0.96));
  color: var(--stiff-ink-soft);
}

html[data-stiff-theme="dark"] #app .cascade-cell {
  border-color: rgba(153, 196, 255, 0.14);
  background: linear-gradient(145deg, #0d2036, #0e1b2b);
  box-shadow: 0 9px 26px rgba(0, 6, 15, 0.3);
}

html[data-stiff-theme="dark"] #app .cascade-cell img { background: linear-gradient(145deg, #10243b, #0c1a2c); }
html[data-stiff-theme="dark"] #app :where(.cascade-cell .ph, .cascade-cell .ph-img, .photo-slot .ph, .me-photo, .me-photos .shot) {
  background:
    radial-gradient(circle at 28% 20%, rgba(68, 215, 235, 0.14), transparent 42%),
    linear-gradient(145deg, #10243b, #0b192a);
  color: var(--stiff-blue-strong);
}
html[data-stiff-theme="dark"] #app .cascade-cell .cap {
  background: linear-gradient(transparent, rgba(7, 17, 31, 0.97) 58%);
  color: var(--stiff-ink);
}
html[data-stiff-theme="dark"] #app .cascade-cell .online { border-color: #0e1b2b; }

html[data-stiff-theme="dark"] #app :where(.inbox-item, .chat-compose, .bubble.theirs, .sheet-card, .profile-card) {
  border-color: rgba(153, 196, 255, 0.13);
  background: rgba(14, 27, 43, 0.97);
  color: var(--stiff-ink);
}

html[data-stiff-theme="dark"] #app .inbox-item:hover { background: var(--stiff-canvas-blue); }
html[data-stiff-theme="dark"] #app :where(.inbox-avatar, .avatar.ph, .av) { background: linear-gradient(145deg, #17324f, #10243b); color: var(--stiff-blue-strong); }
html[data-stiff-theme="dark"] #app :where(.sheet-close, .file-btn) { border-color: var(--stiff-line); background: var(--stiff-surface-soft); color: var(--stiff-ink); }

html[data-stiff-theme="dark"] :where(.toast, #app .toast, #stiff-network-state) {
  border-color: rgba(106, 167, 255, 0.2);
  background: rgba(14, 27, 43, 0.97);
  box-shadow: 0 18px 48px rgba(0, 5, 13, 0.38);
  color: var(--stiff-ink-soft);
}

html[data-stiff-theme="dark"] .lightbox {
  background:
    radial-gradient(circle at 18% 8%, rgba(68, 215, 235, 0.1), transparent 31rem),
    rgba(7, 17, 31, 0.975);
  color: var(--stiff-ink);
}

html[data-stiff-theme="dark"] .lightbox :where(.lightbox-top, .lightbox-bottom) { border-color: var(--stiff-line); background: rgba(14, 27, 43, 0.82); }
html[data-stiff-theme="dark"] .lightbox :where(.round-button, .lightbox-nav) { border-color: var(--stiff-line-strong); background: rgba(18, 35, 56, 0.92); color: var(--stiff-ink-soft); }
html[data-stiff-theme="dark"] :where(.modal-backdrop, .sheet-backdrop, #app #stiff-arkose-host) { background: rgba(3, 9, 18, 0.66); }
html[data-stiff-theme="dark"] :where(.confirm-card) { border-color: rgba(255, 147, 166, 0.2); background: var(--stiff-surface); color: var(--stiff-ink); }
html[data-stiff-theme="dark"] :where(.busy-shell) { background: rgba(7, 17, 31, 0.95); color: var(--stiff-ink); }

html[data-stiff-theme="dark"] #app .bottom-nav {
  border-color: rgba(153, 196, 255, 0.12);
  background: rgba(9, 22, 37, 0.96);
  box-shadow: 0 -12px 34px rgba(0, 6, 15, 0.26);
}

html[data-stiff-theme="dark"] #app .sidebar {
  border-color: rgba(153, 196, 255, 0.12);
  background:
    radial-gradient(circle at 100% 0%, rgba(68, 215, 235, 0.08), transparent 19rem),
    rgba(10, 23, 38, 0.98);
  box-shadow: 10px 0 36px rgba(0, 6, 15, 0.24);
  color: var(--stiff-ink);
}

html[data-stiff-theme="dark"] #app .sidebar :where(.collection-card, .private-note) { border-color: rgba(106, 167, 255, 0.17); background: linear-gradient(135deg, rgba(106, 167, 255, 0.12), rgba(68, 215, 235, 0.08)); }
html[data-stiff-theme="dark"] #app .sidebar :where(.model-button, .logout-button) { border-color: var(--stiff-line); background: rgba(18, 35, 56, 0.86); color: var(--stiff-ink-soft); }

html[data-stiff-theme="dark"] body > .wrap :where(code, .mono) { color: var(--stiff-blue-strong); }
html[data-stiff-theme="dark"] body > .wrap .steps .mono { border-color: var(--stiff-line); background: var(--stiff-surface-soft); color: var(--stiff-ink-soft); }
html[data-stiff-theme="dark"] footer { color: var(--stiff-muted); }

@media (max-width: 720px) {
  .stiff-theme-toggle { min-width: 38px; width: 38px; padding-inline: 0; }
  .stiff-theme-toggle .stiff-theme-label { display: none; }
}

@supports (content-visibility: auto) {
  #app :where(.account-card, .photo-card, .gallery-card, .settings-card, .queue-card, .lot-card) {
    content-visibility: auto;
    contain: layout style;
    contain-intrinsic-size: auto 190px;
  }
}

@media (max-width: 1100px) {
  #app .hub-layout { grid-template-columns: minmax(250px, 282px) minmax(0, 1fr); }
}

@media (max-width: 900px) {
  :root { --stiff-top-h: 66px; }
  #gate .gate-card,
  #gate .stiff-auth-card { grid-template-columns: minmax(0, 1fr) minmax(330px, 0.86fr); }
  #app .hub-layout { grid-template-columns: 1fr; }
  #app .hub-monitor { position: relative; top: auto; max-height: none; overflow: visible; }
  #app .hub-monitor :where(.monitor-stack, .monitor-models) {
    grid-template-columns: repeat(4, minmax(124px, 1fr));
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    scroll-snap-type: x proximity;
  }
  #app .hub-monitor :where(.mon-card, .ops-360) { scroll-snap-align: start; }
}

@media (max-width: 720px) {
  #gate,
  #gate.auth-shell { align-items: start; padding: 16px; overflow: auto; }
  #gate .gate-card,
  #gate .stiff-auth-card { width: min(540px, 100%); min-height: 0; grid-template-columns: 1fr; border-radius: 26px; }
  .stiff-auth-stage { min-height: 280px; padding: 28px; }
  .stiff-auth-stage-copy { padding-block: 42px 28px; }
  #gate .stiff-auth-title,
  #gate .gate-card .stiff-auth-title { font-size: clamp(2.6rem, 14vw, 4.5rem) !important; }
  #gate .stiff-auth-copy { margin-top: 16px; line-height: 1.55; }
  .stiff-auth-access { padding: 30px 28px; }
  .stiff-auth-access-head { margin-bottom: 26px; }
  #app .topbar { padding-inline: 12px; flex-wrap: wrap; }
  #app .topbar-actions { max-width: 56vw; overflow-x: auto; justify-content: flex-start; overscroll-behavior-inline: contain; scrollbar-width: none; }
  #app .topbar-actions::-webkit-scrollbar { display: none; }
  #app :where(.vps-vitals, .host-meters, .vps-stats) {
    order: 3;
    flex: 1 1 100%;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    gap: 7px;
    padding: 2px 0;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    mask-image: linear-gradient(90deg, transparent, #000 6px, #000 calc(100% - 6px), transparent);
  }
  #app :where(.vps-vitals, .host-meters, .vps-stats)::-webkit-scrollbar { display: none; }
  #app :where(.vital, .vs-item, .hm) {
    flex: 0 0 auto;
    min-width: 82px;
    min-height: 36px;
    padding: 5px 8px 7px;
  }
  #app :where(.vital-net, .hm-net) { min-width: 132px; }
  #app .hub-layout { padding: 10px; gap: 10px; }
  #app :where(.hub-monitor, .hub-pool, .settings-pad, .gallery-panel, .model-hero, .lots-section) { border-radius: 18px; }
  #app .hub-monitor,
  #app .hub-pool { padding: 16px; }
  #app .hub-monitor :where(.monitor-stack, .monitor-models) { grid-template-columns: repeat(2, minmax(126px, 1fr)); overflow-x: visible; }
  #app .account-grid { grid-template-columns: 1fr; }
  #app .cascade-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 8px; }
  #app :where(.toolbar, .settings-nav) { position: relative; top: auto; padding-inline: 10px; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: none; }
}

@media (max-width: 520px) {
  .stiff-auth-stage { min-height: 248px; padding: 24px; }
  .stiff-auth-stage-copy { padding-block: 34px 22px; }
  .stiff-auth-signals span:nth-child(2) { display: none; }
  .stiff-auth-access { padding: 26px 22px; }
  #gate .stiff-pin-row,
  #gate .pin-row { grid-template-columns: 1fr; }
  #gate button[type="submit"] { width: 100%; }
  .stiff-auth-meta { align-items: flex-start; flex-direction: column; }
  #app .hub-monitor :where(.monitor-stack, .monitor-models) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-height: 720px) and (min-width: 721px) {
  #gate,
  #gate.auth-shell { padding: 18px; }
  #gate .gate-card,
  #gate .stiff-auth-card { min-height: calc(100dvh - 36px); }
  .stiff-auth-stage-copy { padding-block: 34px 24px; }
}

@media (pointer: coarse) {
  #app :where(button, a, input, select),
  #gate :where(button, input) { min-height: 44px; }
}

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

@keyframes stiff-rise {
  from { opacity: 0; transform: translateY(12px) scale(0.992); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes stiff-media-in {
  from { opacity: 0; transform: scale(1.012); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes stiff-metric-update {
  0% { box-shadow: 0 5px 15px rgba(40, 68, 95, 0.055), 0 0 0 0 rgba(23, 92, 211, 0.14); }
  55% { box-shadow: 0 8px 22px rgba(40, 68, 95, 0.09), 0 0 0 5px rgba(23, 92, 211, 0.04); }
  100% { box-shadow: 0 5px 15px rgba(40, 68, 95, 0.055), 0 0 0 0 rgba(23, 92, 211, 0); }
}