:root {
  --ux-bg: #eef2f6;
  --ux-bg-mid: #f8fafc;
  --ux-bg-strong: #e5ebf2;
  --ux-panel: #ffffff;
  --ux-panel-soft: #f7f9fc;
  --ux-field: #ffffff;
  --ux-line: #d7e0ea;
  --ux-line-strong: #b8c5d4;
  --ux-ink: #111827;
  --ux-text: #253044;
  --ux-muted: #68758a;
  --ux-active-text: #ffffff;
  --ux-active-icon: #73e1d0;
  --ux-blue: #155eef;
  --ux-blue-strong: #0f3fb4;
  --ux-blue-soft: #e7efff;
  --ux-blue-border: #9db8ff;
  --ux-teal: #00856f;
  --ux-teal-soft: #ddf4ef;
  --ux-amber: #a96900;
  --ux-amber-soft: #fff3d6;
  --ux-red: #d92d20;
  --ux-red-soft: #ffe8e5;
  --ux-plum: #7c3aed;
  --ux-plum-soft: #f0e8ff;
  --ux-topbar-bg: rgba(255, 255, 255, 0.92);
  --ux-row-hover: #f3f7fc;
  --ux-warning: #f6c453;
  --ux-focus-ring: rgba(21, 94, 239, 0.13);
  --ux-info-text: #18426d;
  --ux-info-bg: #e9f4ff;
  --ux-info-border: #badcff;
  --ux-warning-text: #6f4600;
  --ux-warning-border: #ffd985;
  --ux-danger-text: #821b14;
  --ux-danger-border: #ffbdb6;
  --ux-success-text: #045c4e;
  --ux-success-border: #a9ddd3;
  --ux-auth-bg: #111827;
  --ux-auth-surface: linear-gradient(135deg, #101828 0%, #1b2a3f 52%, #0f3b37 100%);
  --ux-auth-grid: rgba(255, 255, 255, 0.05);
  --ux-auth-logo-bg: #ffffff;
  --ux-auth-panel-shadow: -24px 0 54px rgba(0, 0, 0, 0.26);
  --ux-radius: 14px;
  --ux-radius-sm: 10px;
  --ux-shadow: 0 14px 42px rgba(17, 24, 39, 0.10);
  --ux-shadow-soft: 0 5px 18px rgba(17, 24, 39, 0.07);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --ux-bg: #07111f;
  --ux-bg-mid: #0e1726;
  --ux-bg-strong: #111d2e;
  --ux-panel: #121b2a;
  --ux-panel-soft: #182435;
  --ux-field: #0f1725;
  --ux-line: #2a3a51;
  --ux-line-strong: #40536e;
  --ux-ink: #f8fafc;
  --ux-text: #d7e1ee;
  --ux-muted: #9fb0c6;
  --ux-active-text: #07111f;
  --ux-active-icon: #07111f;
  --ux-blue: #6ea8ff;
  --ux-blue-strong: #91bdff;
  --ux-blue-soft: #16345f;
  --ux-blue-border: #527bb8;
  --ux-teal: #35d0bc;
  --ux-teal-soft: #123b3c;
  --ux-amber: #f4bf5f;
  --ux-amber-soft: #3d2e11;
  --ux-red: #ff7b72;
  --ux-red-soft: #40201f;
  --ux-plum: #c4a1ff;
  --ux-plum-soft: #2d2347;
  --ux-topbar-bg: rgba(18, 27, 42, 0.94);
  --ux-row-hover: #19283c;
  --ux-warning: #f1c75b;
  --ux-focus-ring: rgba(110, 168, 255, 0.22);
  --ux-info-text: #cfe4ff;
  --ux-info-bg: #112c4f;
  --ux-info-border: #255a8f;
  --ux-warning-text: #ffe3a3;
  --ux-warning-border: #725318;
  --ux-danger-text: #ffd2cd;
  --ux-danger-border: #7a312c;
  --ux-success-text: #c9f6ec;
  --ux-success-border: #1b6a5c;
  --ux-auth-bg: #07111f;
  --ux-auth-surface: linear-gradient(135deg, #07111f 0%, #111d2e 54%, #0d3b3a 100%);
  --ux-auth-grid: rgba(255, 255, 255, 0.06);
  --ux-auth-logo-bg: #ffffff;
  --ux-auth-panel-shadow: -24px 0 54px rgba(0, 0, 0, 0.42);
  --ux-shadow: 0 14px 42px rgba(0, 0, 0, 0.34);
  --ux-shadow-soft: 0 5px 18px rgba(0, 0, 0, 0.24);
}

html[data-theme="ocean"] {
  --ux-bg: #e8f4f7;
  --ux-bg-mid: #f6fbfd;
  --ux-bg-strong: #d7eaf0;
  --ux-panel: #ffffff;
  --ux-panel-soft: #f0f8fb;
  --ux-field: #ffffff;
  --ux-line: #c5dbe5;
  --ux-line-strong: #9ebfce;
  --ux-ink: #0d2b45;
  --ux-text: #24445d;
  --ux-muted: #61788b;
  --ux-active-text: #ffffff;
  --ux-active-icon: #afece7;
  --ux-blue: #0f6cbd;
  --ux-blue-strong: #084c8d;
  --ux-blue-soft: #dff0ff;
  --ux-blue-border: #9cccf5;
  --ux-teal: #008c95;
  --ux-teal-soft: #ddf5f4;
  --ux-amber: #9b6500;
  --ux-amber-soft: #fff0cc;
  --ux-red: #c7372f;
  --ux-red-soft: #ffe5e1;
  --ux-plum: #6157c8;
  --ux-plum-soft: #ebe9ff;
  --ux-topbar-bg: rgba(255, 255, 255, 0.94);
  --ux-row-hover: #eef8fb;
  --ux-warning: #efb53d;
  --ux-focus-ring: rgba(15, 108, 189, 0.16);
  --ux-auth-bg: #0d2b45;
  --ux-auth-surface: linear-gradient(135deg, #0d2b45 0%, #104e6d 52%, #006b70 100%);
}

html[data-theme="contrast"] {
  color-scheme: dark;
  --ux-bg: #050505;
  --ux-bg-mid: #101010;
  --ux-bg-strong: #161616;
  --ux-panel: #141414;
  --ux-panel-soft: #202020;
  --ux-field: #0b0b0b;
  --ux-line: #3d3d3d;
  --ux-line-strong: #666666;
  --ux-ink: #ffffff;
  --ux-text: #eeeeee;
  --ux-muted: #c8c8c8;
  --ux-active-text: #050505;
  --ux-active-icon: #050505;
  --ux-blue: #8bb8ff;
  --ux-blue-strong: #b9d4ff;
  --ux-blue-soft: #1a2d52;
  --ux-blue-border: #80a8e8;
  --ux-teal: #ffd166;
  --ux-teal-soft: #3a310f;
  --ux-amber: #ffdd75;
  --ux-amber-soft: #3d3214;
  --ux-red: #ff8a80;
  --ux-red-soft: #401b18;
  --ux-plum: #d0a6ff;
  --ux-plum-soft: #2f2045;
  --ux-topbar-bg: rgba(20, 20, 20, 0.96);
  --ux-row-hover: #242424;
  --ux-warning: #ffd166;
  --ux-focus-ring: rgba(255, 209, 102, 0.24);
  --ux-info-text: #d8e8ff;
  --ux-info-bg: #132a4a;
  --ux-info-border: #5b87d6;
  --ux-warning-text: #fff0bf;
  --ux-warning-border: #8a6b1f;
  --ux-danger-text: #ffd6d1;
  --ux-danger-border: #8a3a33;
  --ux-success-text: #fff0bf;
  --ux-success-border: #8a6b1f;
  --ux-auth-bg: #050505;
  --ux-auth-surface: linear-gradient(135deg, #050505 0%, #151515 56%, #332800 100%);
  --ux-auth-grid: rgba(255, 255, 255, 0.08);
  --ux-auth-logo-bg: #ffffff;
  --ux-auth-panel-shadow: -24px 0 54px rgba(0, 0, 0, 0.52);
  --ux-shadow: 0 14px 42px rgba(0, 0, 0, 0.42);
  --ux-shadow-soft: 0 5px 18px rgba(0, 0, 0, 0.32);
}

html {
  font-size: 15px;
}

body {
  background:
    linear-gradient(180deg, var(--ux-bg) 0%, var(--ux-bg-mid) 48%, var(--ux-bg) 100%);
  color: var(--ux-text);
  font-family: "Segoe UI", Inter, Roboto, Arial, sans-serif;
  letter-spacing: 0;
}

a {
  color: var(--ux-blue);
  font-weight: 650;
}

a:hover {
  color: var(--ux-blue-strong);
}

.uniflow-app .app-shell {
  min-height: 100vh;
  background: transparent;
}

.uniflow-app .app-sidebar {
  width: 304px;
  padding: 14px;
  background: var(--ux-panel);
  color: var(--ux-text);
  border-right: 1px solid var(--ux-line);
  box-shadow: none;
}

.sidebar-brand {
  min-height: 62px;
  padding: 10px 8px 16px;
  border-bottom: 1px solid var(--ux-line);
}

.brand-link {
  gap: 12px;
  color: var(--ux-ink);
}

.brand-link:hover {
  color: var(--ux-ink);
}

.brand-logo {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--ux-line);
  background: var(--ux-panel-soft);
  box-shadow: var(--ux-shadow-soft);
}

.brand-mark {
  color: var(--ux-ink);
  font-size: 1.15rem;
  font-weight: 850;
}

.sidebar-search {
  height: 44px;
  margin: 16px 0 8px;
  padding: 0 13px;
  color: var(--ux-muted);
  background: var(--ux-panel-soft);
  border: 1px solid var(--ux-line);
  border-radius: var(--ux-radius-sm);
}

.sidebar-search input {
  color: var(--ux-text);
}

.sidebar-search input::placeholder {
  color: var(--ux-muted);
}

.sidebar-nav {
  padding: 6px 0 18px;
}

.nav-section {
  margin-top: 16px;
}

.nav-section-title {
  padding: 0 10px 8px;
  color: var(--ux-muted);
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.11em;
}

.sidebar-nav-item,
.sidebar-group-toggle {
  min-height: 42px;
  padding: 10px 11px;
  color: var(--ux-text);
  border-radius: 12px;
  font-size: 0.91rem;
  font-weight: 720;
}

.sidebar-nav-item i,
.sidebar-group-toggle i:first-child {
  color: var(--ux-teal);
}

.sidebar-nav-item:hover,
.sidebar-group-toggle:hover {
  color: var(--ux-ink);
  background: var(--ux-panel-soft);
}

.sidebar-nav-item.active {
  color: var(--ux-active-text);
  background: var(--ux-ink);
  box-shadow: inset 4px 0 0 var(--ux-teal);
}

.sidebar-nav-item.active i {
  color: var(--ux-active-icon);
}

.sidebar-nav-item-danger {
  color: var(--ux-red);
}

.sidebar-nav-item-danger i,
.sidebar-nav-item-danger .fas {
  color: var(--ux-red);
}

.sidebar-nav-item-danger:hover {
  color: var(--ux-red);
  background: var(--ux-red-soft);
}

.sidebar-nav-item-danger.active {
  color: #ffffff;
  background: var(--ux-red);
  box-shadow: inset 4px 0 0 var(--ux-amber);
}

.sidebar-nav-item-danger.active i {
  color: #ffffff;
}

.sidebar-group-toggle .fa-chevron-down {
  color: var(--ux-muted);
}

.sidebar-subnav {
  margin: 6px 0 10px 22px;
  padding-left: 12px;
  border-left: 1px solid var(--ux-line);
}

.sidebar-subnav a {
  color: var(--ux-muted);
  border-radius: 10px;
  font-weight: 650;
}

.sidebar-subnav a:hover {
  color: var(--ux-ink);
  background: var(--ux-panel-soft);
}

.app-main {
  margin-left: 304px;
}

.app-topbar {
  min-height: 76px;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 440px) auto;
  gap: 18px;
  padding: 14px 26px;
  background: var(--ux-topbar-bg);
  border-bottom: 1px solid var(--ux-line);
  box-shadow: 0 1px 0 rgba(17, 24, 39, 0.03);
}

.topbar-kicker {
  color: var(--ux-teal);
  font-size: 0.72rem;
  font-weight: 850;
}

.topbar-title strong {
  color: var(--ux-ink);
  font-size: 1.1rem;
  font-weight: 850;
}

.icon-button {
  width: 42px;
  height: 42px;
  color: var(--ux-text);
  background: var(--ux-panel);
  border: 1px solid var(--ux-line);
  border-radius: 12px;
}

.icon-button:hover {
  color: var(--ux-blue);
  background: var(--ux-blue-soft);
  border-color: var(--ux-blue-border);
}

.topbar-search {
  height: 44px;
  color: var(--ux-muted);
  background: var(--ux-panel-soft);
  border: 1px solid var(--ux-line);
  border-radius: 999px;
}

.topbar-search input {
  color: var(--ux-text);
}

.user-menu-button {
  min-height: 44px;
  padding: 7px 10px 7px 7px;
  color: var(--ux-text);
  background: var(--ux-panel);
  border: 1px solid var(--ux-line);
  border-radius: 999px;
}

.user-avatar {
  color: var(--ux-active-text);
  background: var(--ux-ink);
}

.theme-menu-button {
  flex: 0 0 auto;
}

.theme-dropdown {
  min-width: 230px;
  padding: 8px;
}

.theme-option {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  border-radius: 10px;
  color: var(--ux-text);
  font-weight: 760;
}

.theme-option:hover,
.theme-option:focus {
  color: var(--ux-ink);
  background: var(--ux-panel-soft);
}

.theme-option.active,
.theme-option[aria-pressed="true"] {
  color: var(--ux-active-text);
  background: var(--ux-ink);
}

.theme-swatch {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border: 1px solid var(--ux-line-strong);
  border-radius: 999px;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.28);
}

.theme-swatch-light {
  background: linear-gradient(135deg, #ffffff 0 48%, #155eef 49% 100%);
}

.theme-swatch-dark {
  background: linear-gradient(135deg, #07111f 0 48%, #35d0bc 49% 100%);
}

.theme-swatch-ocean {
  background: linear-gradient(135deg, #e8f4f7 0 48%, #008c95 49% 100%);
}

.theme-swatch-contrast {
  background: linear-gradient(135deg, #050505 0 48%, #ffd166 49% 100%);
}

.app-content {
  padding: 28px;
}

.app-footer {
  padding: 0 28px 22px;
  color: var(--ux-muted);
}

.app-footer small {
  border-top: 1px solid var(--ux-line);
}

.page-header {
  padding: 22px;
  margin-bottom: 22px;
  align-items: center;
  background: var(--ux-panel);
  border: 1px solid var(--ux-line);
  border-left: 5px solid var(--ux-teal);
  border-radius: var(--ux-radius);
  box-shadow: var(--ux-shadow-soft);
}

.page-kicker {
  margin-bottom: 6px;
  color: var(--ux-teal);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.page-header h1,
.page-header h2 {
  color: var(--ux-ink);
  font-size: clamp(1.45rem, 2vw, 2.05rem);
  font-weight: 880;
  line-height: 1.1;
}

.page-header p {
  color: var(--ux-muted);
  font-size: 0.96rem;
}

.page-actions {
  gap: 10px;
}

.surface,
.card,
.modal-content,
.dropdown-menu,
.list-group {
  background: var(--ux-panel);
  border: 1px solid var(--ux-line);
  border-radius: var(--ux-radius);
  box-shadow: var(--ux-shadow-soft);
}

.dropdown-menu {
  color: var(--ux-text);
}

.dropdown-item {
  color: var(--ux-text);
  border-radius: 10px;
  font-weight: 650;
}

.dropdown-item:hover,
.dropdown-item:focus {
  color: var(--ux-ink);
  background: var(--ux-panel-soft);
}

.surface {
  padding: 20px;
}

.surface-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 0 0 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--ux-line);
}

.surface-header h2,
.section-title h2,
.section-header h2 {
  color: var(--ux-ink);
  font-size: 1.1rem;
  font-weight: 850;
}

.surface-header p,
.section-title p,
.section-header p {
  color: var(--ux-muted);
}

.metric-grid,
.configuration-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}

.metric-card,
.configuration-summary .metric-card {
  min-height: 118px;
  padding: 18px;
  background: var(--ux-panel);
  border: 1px solid var(--ux-line);
  border-top: 4px solid var(--ux-blue);
  border-radius: var(--ux-radius);
  box-shadow: var(--ux-shadow-soft);
}

.metric-card:nth-child(2n),
.configuration-summary .metric-card:nth-child(2n) {
  border-top-color: var(--ux-teal);
}

.metric-card:nth-child(3n),
.configuration-summary .metric-card:nth-child(3n) {
  border-top-color: var(--ux-amber);
}

.metric-card h6,
.metric-card span:first-child {
  color: var(--ux-muted);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.metric-card strong,
.metric-card h2 {
  color: var(--ux-ink);
  font-size: 2rem;
  font-weight: 900;
}

.metric-icon {
  color: var(--ux-blue);
  background: var(--ux-blue-soft);
  border-radius: 13px;
}

.metric-icon.success {
  color: var(--ux-teal);
  background: var(--ux-teal-soft);
}

.metric-icon.warning {
  color: var(--ux-amber);
  background: var(--ux-amber-soft);
}

.metric-icon.danger {
  color: var(--ux-red);
  background: var(--ux-red-soft);
}

.flow-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.flow-tile {
  min-height: 158px;
  padding: 20px;
  color: var(--ux-text);
  background: var(--ux-panel);
  border: 1px solid var(--ux-line);
  border-radius: var(--ux-radius);
  box-shadow: var(--ux-shadow-soft);
}

.flow-tile:hover {
  color: var(--ux-ink);
  border-color: var(--ux-line-strong);
  transform: translateY(-2px);
  box-shadow: var(--ux-shadow);
}

.flow-tile i {
  width: 44px;
  height: 44px;
  color: var(--ux-teal);
  background: var(--ux-teal-soft);
  border-radius: 13px;
}

.flow-tile:nth-child(3n + 2) i {
  color: var(--ux-blue);
  background: var(--ux-blue-soft);
}

.flow-tile:nth-child(3n) i {
  color: var(--ux-amber);
  background: var(--ux-amber-soft);
}

.flow-tile strong {
  color: var(--ux-ink);
  font-weight: 850;
}

.flow-tile span {
  color: var(--ux-muted);
}

.btn {
  min-height: 40px;
  border-radius: 11px;
  font-weight: 760;
}

.btn-sm {
  min-height: 34px;
}

.btn-lg {
  min-height: 48px;
}

.btn-primary,
.page-item.active .page-link {
  background: var(--ux-blue);
  border-color: var(--ux-blue);
}

.btn-primary:hover,
.btn-primary:focus {
  background: var(--ux-blue-strong);
  border-color: var(--ux-blue-strong);
}

.btn-outline-primary {
  color: var(--ux-blue);
  border-color: var(--ux-blue-border);
}

.btn-outline-primary:hover {
  background: var(--ux-blue);
  border-color: var(--ux-blue);
}

.btn-success {
  background: var(--ux-teal);
  border-color: var(--ux-teal);
}

.btn-danger {
  background: var(--ux-red);
  border-color: var(--ux-red);
}

.btn-warning {
  color: var(--ux-ink);
  background: var(--ux-warning);
  border-color: var(--ux-warning);
}

.btn-warning:hover,
.btn-warning:focus {
  color: var(--ux-ink);
  background: var(--ux-amber);
  border-color: var(--ux-amber);
}

.form-control,
.form-select,
.input-group-text {
  min-height: 42px;
  color: var(--ux-text);
  background: var(--ux-field);
  border-color: var(--ux-line-strong);
  border-radius: 11px;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--ux-blue);
  box-shadow: 0 0 0 4px var(--ux-focus-ring);
}

.form-control::placeholder {
  color: var(--ux-muted);
}

.form-label {
  color: var(--ux-text);
  font-weight: 760;
}

.form-text,
small,
.text-muted {
  color: var(--ux-muted) !important;
}

.form-check-input {
  border-color: var(--ux-line-strong);
}

.form-check-input:checked {
  background-color: var(--ux-teal);
  border-color: var(--ux-teal);
}

.table {
  color: var(--ux-text);
  border-collapse: separate;
  border-spacing: 0;
}

.table > :not(caption) > * > * {
  padding: 0.9rem 1rem;
  border-bottom-color: var(--ux-line);
}

.table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  color: var(--ux-muted);
  background: var(--ux-panel-soft);
  border-bottom: 1px solid var(--ux-line);
  font-size: 0.73rem;
  font-weight: 850;
  letter-spacing: 0.08em;
}

.table-hover tbody tr:hover {
  background: var(--ux-row-hover);
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  color: var(--ux-text);
  background-color: var(--ux-panel-soft);
}

.badge {
  padding: 0.45rem 0.65rem;
  border-radius: 999px;
  font-weight: 850;
}

.alert {
  border-radius: var(--ux-radius-sm);
  border-width: 1px;
  box-shadow: none;
}

.alert-info {
  color: var(--ux-info-text);
  background: var(--ux-info-bg);
  border-color: var(--ux-info-border);
}

.alert-warning {
  color: var(--ux-warning-text);
  background: var(--ux-amber-soft);
  border-color: var(--ux-warning-border);
}

.alert-danger {
  color: var(--ux-danger-text);
  background: var(--ux-red-soft);
  border-color: var(--ux-danger-border);
}

.alert-success {
  color: var(--ux-success-text);
  background: var(--ux-teal-soft);
  border-color: var(--ux-success-border);
}

.empty-state {
  padding: 54px 20px;
}

.empty-state i {
  color: var(--ux-teal);
}

.pagination {
  gap: 6px;
}

.page-link {
  color: var(--ux-blue);
  border: 1px solid var(--ux-line);
  border-radius: 10px !important;
}

.content-grid {
  gap: 18px;
}

.surface-subtle,
.config-group-title,
.key-card,
.cleanup-result,
.wizard-option,
.wizard-field,
.integration-choice,
.summary-block,
.cleanup-option {
  background: var(--ux-panel-soft);
  border: 1px solid var(--ux-line);
  border-radius: var(--ux-radius-sm);
  box-shadow: none;
}

.app-tabs {
  padding: 4px;
  gap: 4px;
  background: var(--ux-panel-soft);
  border: 1px solid var(--ux-line);
  border-radius: 12px;
}

.app-tabs .nav-link {
  border: 0;
  border-radius: 10px;
  color: var(--ux-muted);
  font-weight: 800;
}

.app-tabs .nav-link.active {
  color: var(--ux-active-text);
  background: var(--ux-ink);
}

.legacy-process-config,
.integration-wizard,
.database-admin {
  background: var(--ux-panel);
}

.process-section {
  background: var(--ux-panel);
  border: 1px solid var(--ux-line);
  border-radius: var(--ux-radius);
}

.process-section-header {
  background: var(--ux-panel-soft);
}

.process-section-header h5 {
  color: var(--ux-ink);
}

.legacy-process-config .postman-tabs {
  padding: 4px;
  gap: 4px;
  background: var(--ux-panel-soft);
  border: 1px solid var(--ux-line);
  border-radius: 12px;
}

.legacy-process-config .postman-tab {
  border-radius: 10px;
  color: var(--ux-muted);
}

.legacy-process-config .postman-tab.active {
  color: var(--ux-active-text);
  background: var(--ux-ink);
  border-bottom-color: transparent;
}

.legacy-process-config .param-row,
.legacy-process-config .url-preview {
  background: var(--ux-panel-soft);
  border-color: var(--ux-line);
}

.account-layout {
  gap: 20px;
}

.account-nav,
.account-sidebar,
.account-content {
  background: var(--ux-panel);
  border: 1px solid var(--ux-line);
  border-radius: var(--ux-radius);
  box-shadow: var(--ux-shadow-soft);
}

.account-content {
  padding: 24px;
}

.account-menu a {
  color: var(--ux-text);
  border-radius: 11px;
}

.account-menu a.active,
.account-menu a:hover {
  color: var(--ux-active-text);
  background: var(--ux-ink);
}

.section-header {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ux-line);
}

.form-panel {
  max-width: 760px;
  padding: 20px;
  background: var(--ux-panel-soft);
  border: 1px solid var(--ux-line);
  border-radius: var(--ux-radius);
}

.recovery-code {
  background: var(--ux-field);
}

.uniflow-auth-only {
  min-height: 100vh;
  background: var(--ux-auth-bg);
}

.auth-only-shell {
  min-height: 100vh;
}

.auth-theme-switcher {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 20;
}

.auth-shell {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) minmax(360px, 520px);
  align-items: stretch;
  padding: 0;
  background: var(--ux-auth-surface);
}

.auth-shell::before {
  content: "";
  display: block;
  min-height: 100vh;
  background:
    linear-gradient(90deg, var(--ux-auth-grid) 1px, transparent 1px),
    linear-gradient(180deg, var(--ux-auth-grid) 1px, transparent 1px);
  background-size: 42px 42px;
}

.auth-panel {
  width: auto;
  min-height: 100vh;
  margin: 0;
  padding: clamp(28px, 7vw, 72px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--ux-panel);
  border: 0;
  border-radius: 0;
  box-shadow: var(--ux-auth-panel-shadow);
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 26px;
}

.auth-brand img {
  width: 56px;
  height: 56px;
  padding: 6px;
  border: 1px solid var(--ux-line);
  border-radius: 16px;
  background: var(--ux-auth-logo-bg);
}

.auth-brand span {
  color: var(--ux-teal);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.auth-brand h1 {
  margin: 2px 0 0;
  color: var(--ux-ink);
  font-size: clamp(1.65rem, 4vw, 2.35rem);
  font-weight: 900;
}

.auth-form {
  display: grid;
  gap: 2px;
}

.auth-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  margin-top: 18px;
}

.auth-links a {
  font-size: 0.9rem;
}

@media (max-width: 1199.98px) {
  .metric-grid,
  .configuration-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .flow-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 991.98px) {
  .app-sidebar {
    width: min(88vw, 320px);
    transform: translateX(-100%);
  }

  body.sidebar-open .app-sidebar {
    transform: translateX(0);
  }

  .app-main {
    margin-left: 0;
  }

  .auth-shell {
    grid-template-columns: 1fr;
  }

  .auth-shell::before {
    display: none;
  }

  .auth-panel {
    min-height: 100vh;
    box-shadow: none;
  }
}

@media (max-width: 767.98px) {
  .app-content {
    padding: 16px;
  }

  .page-header {
    padding: 18px;
  }

  .metric-grid,
  .configuration-summary,
  .flow-grid,
  .recovery-code-grid {
    grid-template-columns: 1fr;
  }

  .surface {
    padding: 16px;
  }

  .endpoint-preview > div,
  .summary-list > div {
    grid-template-columns: 1fr;
    align-items: flex-start;
  }
}