/* ============================================================================
 * GateControl — app.css
 *
 * The single stylesheet of the Aurora admin UI (docs/feature-wave2.md §W2).
 * Merged from pro.css, aurora.css, security.css, nav.css, ops.css,
 * problems.css, l4-protect.css and two-factor.css, in exactly the order in
 * which layout.njk used to link them, so the cascade is unchanged.
 *
 * Order: tokens/base → Aurora theme → feature sections.
 * Stays separate on purpose: portal.css (own design).
 * ============================================================================ */


/* ============================================================================
 * §1 Base — tokens, reset, layout shell, components (was public/css/pro.css)
 * ============================================================================ */

/* ============================================================
   GateControl Pro Theme CSS
   Clean Corporate Light — Royal Blue Accent (#2563EB), Inter font
   ============================================================ */

/* ============================================================
   SECTION 1: CSS CUSTOM PROPERTIES (Design Tokens)
   ============================================================ */
:root {
  /* Colors — Core */
  --bg-body: #F8FAFC;
  --bg-card: #FFFFFF;
  --bg-card-hover: #F8FAFC;
  --bg-sidebar: #FFFFFF;
  --bg-topbar: #FFFFFF;
  --bg-input: #F8FAFC;
  --bg-input-focus: #FFFFFF;
  --bg-hover: #F1F5F9;
  --bg-active: #EFF6FF;
  --bg-code: #F1F5F9;
  --bg-overlay: rgba(15, 23, 42, 0.45);
  --bg-badge: #F1F5F9;

  /* Colors — Borders */
  --border: #E2E8F0;
  --border-light: #F1F5F9;
  --border-focus: #2563EB;
  --border-input: #CBD5E1;

  /* Colors — Text */
  --text-primary: #0F172A;
  --text-secondary: #475569;
  --text-muted: #94A3B8;
  --text-inverse: #FFFFFF;
  --text-link: #2563EB;

  /* Colors — Accent (Royal Blue) */
  --accent: #2563EB;
  --accent-hover: #1D4ED8;
  --accent-light: #EFF6FF;
  --accent-lighter: #DBEAFE;
  --accent-border: #BFDBFE;
  --accent-text: #1E40AF;

  /* Colors — Status */
  --green: #10B981;
  --green-light: #ECFDF5;
  --green-border: #A7F3D0;
  --green-text: #065F46;

  --red: #EF4444;
  --red-light: #FEF2F2;
  --red-border: #FECACA;
  --red-text: #991B1B;

  --amber: #F59E0B;
  --amber-light: #FFFBEB;
  --amber-border: #FDE68A;
  --amber-text: #92400E;

  --blue: #3B82F6;
  --blue-light: #EFF6FF;
  --blue-border: #BFDBFE;
  --blue-text: #1E40AF;

  --purple: #8B5CF6;
  --purple-light: #F5F3FF;
  --purple-border: #DDD6FE;
  --purple-text: #5B21B6;

  --cyan: #06B6D4;
  --cyan-light: #ECFEFF;

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.875rem;
  --text-lg: 1rem;
  --text-xl: 1.125rem;
  --text-2xl: 1.375rem;
  --text-3xl: 1.75rem;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  /* Layout */
  --sidebar-w: 252px;
  --sidebar-collapsed: 68px;
  --topbar-h: 60px;
  --nav-h: 60px;

  /* Radius */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.15);

  /* Transitions */
  --transition-fast: 120ms ease;
  --transition: 180ms ease;
  --transition-slow: 280ms ease;

  /* Legacy alias variables — map old default theme vars to Pro vars */
  --bg-base: var(--bg-body);
  --bg-panel: var(--bg-card);
  --bg-hover: #F1F5F9;
  --bg-input: #F8FAFC;
  --border-hi: var(--border-input);
  --text-1: var(--text-primary);
  --text-2: var(--text-secondary);
  --text-3: var(--text-muted);
  --font-ui: var(--font-sans);
  --font-display: var(--font-sans);
  --accent-lt: var(--accent-light);
  --accent-md: var(--accent-lighter);
  --green-lt: var(--green-light);
  --green-bd: var(--green-border);
  --red-lt: var(--red-light);
  --red-bd: var(--red-border);
  --amber-lt: var(--amber-light);
  --amber-bd: var(--amber-border);
  --blue-lt: var(--blue-light);
  --blue-bd: var(--blue-border);
  --purple-lt: var(--purple-light);
  --purple-bd: var(--purple-border);
}

/* ============================================================
   SECTION 2: RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  height: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background: var(--bg-body);
  min-height: 100vh;
}

a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Scrollbar */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-input); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* Selection */
::selection { background: var(--accent-lighter); color: var(--accent-text); }

.shell {
  flex: 1;
  display: flex;
}

/* ============================================================
   SECTION 4: SIDEBAR
   ============================================================ */
.sidebar {
  width: var(--sidebar-w);
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 100;
  transition: transform var(--transition-slow);
  overflow-y: auto;
  padding: 0;
  flex-shrink: 0;
}

/* nav-section-label: alias for old default theme class */
.nav-section-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: var(--space-4) var(--space-4) var(--space-1);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
  position: relative;
  margin: 1px 0;
}

.nav-item:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  text-decoration: none;
}

.nav-item.active {
  background: var(--accent-light);
  color: var(--accent);
  font-weight: var(--weight-semibold);
}

.nav-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  background: var(--accent);
  border-radius: 0 2px 2px 0;
}

.nav-item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.7;
}

.nav-item.active svg {
  opacity: 1;
}

.nav-badge {
  margin-left: auto;
  background: var(--bg-badge);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  padding: 1px 7px;
  border-radius: var(--radius-full);
  min-width: 20px;
  text-align: center;
  border: 1px solid var(--border);
  font-family: var(--font-mono);
}

.nav-badge.green {
  background: var(--green-light);
  border-color: var(--green-border);
  color: var(--green-text);
}

.nav-item.active .nav-badge {
  background: var(--accent-lighter);
  color: var(--accent-text);
}

/* ============================================================
   SECTION 5: TOPBAR
   ============================================================ */
.main-wrap {
  flex: 1;
  margin-left: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-y: auto;
}

.main {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.topbar {
  height: var(--topbar-h);
  background: var(--bg-topbar);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 var(--space-8);
  gap: var(--space-4);
  position: sticky;
  top: 0;
  z-index: 90;
  flex-shrink: 0;
  box-shadow: var(--shadow-xs);
}

.topbar-spacer { flex: 1; }

/* Topbar language switcher */
.topbar-lang {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--bg-body);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 2px 4px;
}

.lang-btn {
  padding: 3px 8px;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--weight-semibold);
  cursor: pointer;
  color: var(--text-muted);
  text-transform: uppercase;
  transition: all var(--transition-fast);
}

.lang-btn:hover { color: var(--text-primary); background: var(--bg-hover); }

.lang-btn.active {
  background: var(--bg-card);
  color: var(--text-primary);
  box-shadow: var(--shadow-xs);
}

/* Topbar status pill */
.topbar-status {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--green-light);
  border: 1px solid var(--green-border);
  border-radius: var(--radius-full);
  padding: 4px 10px 4px 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--green-text);
  font-weight: var(--weight-medium);
}

.topbar-status.inactive {
  background: var(--red-light);
  border-color: var(--red-border);
  color: var(--red-text);
}

.pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  animation: pulseDot 2.5s ease infinite;
  flex-shrink: 0;
}

@keyframes pulseDot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* Topbar profile dropdown */
.topbar-profile { position: relative; }

.topbar-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--accent-lighter);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  cursor: pointer;
  border: none;
  flex-shrink: 0;
}

.topbar-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 300;
  animation: fadeIn 120ms ease;
  overflow: hidden;
}

.topbar-dropdown.open { display: block; }

.topbar-dropdown-header {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-body);
}

.topbar-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  text-decoration: none;
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  font-family: var(--font-sans);
  transition: background var(--transition-fast);
}

.topbar-dropdown-item:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  text-decoration: none;
}

.topbar-dropdown-item svg { width: 15px; height: 15px; flex-shrink: 0; }

.topbar-dropdown-logout { color: var(--red); }
.topbar-dropdown-logout:hover { background: var(--red-light); color: var(--red); }

.topbar-dropdown-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
  50% { box-shadow: 0 0 0 4px rgba(16, 185, 129, 0); }
}

/* ============================================================
   SECTION 6: PAGE CONTENT & HEADERS
   ============================================================ */
.page-content {
  flex: 1;
  padding: var(--space-8);
  max-width: 1400px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

.page-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 4px;
}

.page-title {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  letter-spacing: -0.025em;
  line-height: var(--leading-tight);
}

.page-sub,
.page-subtitle {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-top: 4px;
  font-weight: var(--weight-normal);
}

/* ============================================================
   SECTION 7: CARDS
   ============================================================ */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--transition);
}

.card-head,
.card-header {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--bg-body);
  justify-content: space-between;
}

.card-title,
.card-header-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.card-sub {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-left: auto;
  font-family: var(--font-mono);
}

.card-body {
  padding: var(--space-5) var(--space-6);
}

.card-body.no-pad { padding: 0; }

/* ============================================================
   SECTION 8: STAT CARDS
   ============================================================ */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-4);
}

/* stat dot indicators */
.stat-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.stat-dot-green { background: var(--green); }
.stat-dot-red { background: var(--red); }
.stat-dot-amber { background: var(--amber); }
.stat-dot-blue { background: var(--blue); }
.stat-dot-purple { background: var(--purple); }

/* ============================================================
   SECTION 9: LAYOUT GRIDS
   ============================================================ */
.two-col   { display: grid; grid-template-columns: 1fr 360px; gap: var(--space-5); }

/* ============================================================
   SECTION 10: BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 36px;
  padding: 0 var(--space-4);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  font-family: var(--font-sans);
  cursor: pointer;
  border: 1px solid transparent;
  transition: all var(--transition-fast);
  white-space: nowrap;
  text-decoration: none;
}

.btn svg { width: 16px; height: 16px; }

.btn.is-loading {
  pointer-events: none;
  opacity: 0.65;
  position: relative;
}

.btn.is-loading::after {
  content: '';
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: btnSpin 0.5s linear infinite;
}

@keyframes btnSpin { to { transform: rotate(360deg); } }

.btn-primary {
  background: var(--accent);
  color: var(--text-inverse);
  border-color: var(--accent);
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.2);
}

.btn-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  box-shadow: 0 3px 10px rgba(37, 99, 235, 0.3);
  transform: translateY(-1px);
  text-decoration: none;
}

.btn-secondary {
  background: var(--bg-card);
  color: var(--text-secondary);
  border-color: var(--border);
  box-shadow: var(--shadow-xs);
}

.btn-secondary:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  border-color: var(--border);
}

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border-color: transparent;
}

.btn-ghost:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  border-color: var(--border);
}

.btn-green {
  background: var(--green-light);
  color: var(--green-text);
  border-color: var(--green-border);
}

.btn-green:hover {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
}

.btn-danger {
  background: var(--red);
  color: var(--text-inverse);
  border-color: var(--red);
  box-shadow: 0 1px 3px rgba(239, 68, 68, 0.2);
}

.btn-danger:hover {
  background: #DC2626;
  border-color: #DC2626;
}

.btn-green {
  background: var(--green);
  color: var(--text-inverse);
  border-color: var(--green);
}

.btn-green:hover { opacity: 0.9; }

.btn-sm {
  height: 30px;
  padding: 0 var(--space-3);
  font-size: var(--text-xs);
  border-radius: var(--radius-sm);
}

/* Icon button (small square) */
.icon-btn {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all var(--transition-fast);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.icon-btn:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--border-input); }
.icon-btn svg { width: 12px; height: 12px; }

/* ============================================================
   SECTION 11: TAGS & BADGES
   ============================================================ */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--weight-medium);
  background: var(--bg-body);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

.tag-green  { background: var(--green-light);  color: var(--green-text);  border: 1px solid var(--green-border); }
.tag-red    { background: var(--red-light);    color: var(--red-text);    border: 1px solid var(--red-border); }
.tag-amber  { background: var(--amber-light);  color: var(--amber-text);  border: 1px solid var(--amber-border); }
.tag-blue   { background: var(--blue-light);   color: var(--blue-text);   border: 1px solid var(--blue-border); }
.tag-grey   { background: var(--bg-body);      color: var(--text-secondary); border: 1px solid var(--border); }
.tag-purple { background: var(--purple-light); color: var(--purple-text); border: 1px solid var(--purple-border); }
.tag-neutral { background: var(--bg-body);     color: var(--text-secondary); border: 1px solid var(--border); }

.tag-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* RDP/remote-desktop protocol badges + browser indicator (Phase 3a) */
.proto-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: var(--weight-bold, 700);
  letter-spacing: .03em;
  text-transform: uppercase;
}
.b-rdp    { background: #13314a; color: #7fc0ff; }
.b-vnc    { background: #3a2a4d; color: #c9a3ff; }
.b-ssh    { background: #13402c; color: #74e0a8; }
.b-telnet { background: #3f2f16; color: #e6c477; }
.browser-ind {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid var(--border);
  padding: 1px 7px;
  border-radius: 999px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px 10px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* ============================================================
   SECTION 12: FORMS
   ============================================================ */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: 14px;
}

.form-group:last-child { margin-bottom: 0; }

.form-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  display: block;
  margin-bottom: 5px;
}

.form-hint {
  font-size: var(--text-xs);
  color: var(--text-muted);
  display: block;
  margin-top: 4px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.form-row > .form-group {
  flex: 1;
  min-width: 0;
}

.form-input,
.form-select,
.form-textarea {
  height: 38px;
  padding: 0 var(--space-3);
  background: var(--bg-input);
  border: 1px solid var(--border-input);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  color: var(--text-primary);
  font-family: var(--font-sans);
  transition: all var(--transition);
  outline: none;
  width: 100%;
}

.form-textarea {
  height: auto;
  min-height: 80px;
  padding: var(--space-3);
  resize: vertical;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
  background: var(--bg-input-focus);
}

.form-input::placeholder { color: var(--text-muted); }

.form-error {
  font-size: var(--text-xs);
  color: var(--red);
  margin-top: 8px;
  padding: 6px 10px;
  background: var(--red-light);
  border: 1px solid var(--red-border);
  border-radius: var(--radius-sm);
}

.field-error {
  font-size: 11px;
  color: var(--red);
  margin-top: 4px;
}

.field-invalid { border-color: var(--red) !important; }

/* Native input fallback */
input[type=text], input[type=search], input[type=password], input[type=email], input[type=number], input[type=time], input[type=date], select {
  background: var(--bg-input);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

input[type=search] { padding-left: 32px; }

input[type=text]:focus,
input[type=search]:focus,
input[type=password]:focus,
input[type=email]:focus,
input[type=time]:focus,
input[type=date]:focus,
select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

input[type="file"] {
  font-size: 12px;
  padding: 6px 0;
  color: var(--text-secondary);
}

.input-wrap { position: relative; }
.input-wrap svg {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px;
  color: var(--text-muted);
  pointer-events: none;
}

.checkbox {
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--border-input);
  border-radius: 4px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background: var(--bg-card);
  transition: all var(--transition-fast);
  flex-shrink: 0;
  accent-color: var(--accent);
}

.checkbox:checked {
  background: var(--accent);
  border-color: var(--accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 8l3 3 5-5'/%3E%3C/svg%3E");
}

/* ============================================================
   SECTION 13: TOGGLE SWITCHES
   ============================================================ */
.toggle {
  position: relative;
  width: 40px;
  height: 22px;
  cursor: pointer;
  flex-shrink: 0;
  background: var(--border-input);
  border-radius: var(--radius-full);
  transition: background var(--transition);
}

/* CSS-class-based toggle (used by app.js — .toggle.on) */
.toggle.on { background: var(--accent); }

.toggle::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  z-index: 1;
}

.toggle.on::after { transform: translateX(18px); }

/* Input-based toggle (label.toggle > input + .toggle-slider) */
.toggle:has(input) {
  background: transparent;
}

.toggle:has(input)::after {
  display: none;
}

.toggle input { display: none; }

/* Toggle button group */
.toggle-group {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-body);
}

.toggle-btn {
  padding: 6px 16px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-family: var(--font-sans);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  outline: none;
}

.toggle-btn:not(:last-child) { border-right: 1px solid var(--border); }
.toggle-btn:hover { background: var(--bg-hover); color: var(--text-primary); }

.toggle-btn.on,
.toggle-btn.active {
  background: var(--accent);
  color: var(--text-inverse);
}
/* Green = effective-active auth method. Scoped to the auth-type group so its
   #id specificity beats the blue .on (green wins when a tab is both active and
   visited) and other toggle-groups stay blue. */
#edit-auth-type-group .toggle-btn.method-active {
  background: var(--green);
  color: var(--text-inverse);
}

/* ============================================================
   SECTION 14: TABS
   ============================================================ */
.tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-6);
}

.tab {
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all var(--transition-fast);
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  font-family: var(--font-sans);
  white-space: nowrap;
  border-radius: 0;
}

.tab:hover { color: var(--text-primary); }

.tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: var(--weight-semibold);
}

table {
  width: 100%;
  border-collapse: collapse;
}

table thead th {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  background: var(--bg-body);
}

table tbody td {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-light);
  vertical-align: middle;
}

table tbody tr { transition: background var(--transition-fast); }
table tbody tr:hover { background: var(--bg-hover); }
table tbody tr:last-child td { border-bottom: none; }

/* ============================================================
   SECTION 16: PEER TABLE
   ============================================================ */
.peer-table {
  width: 100%;
  border-collapse: collapse;
}

.peer-table th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--weight-semibold);
  color: var(--text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 9px var(--space-5);
  border-bottom: 1px solid var(--border);
  background: var(--bg-body);
}

.peer-table td {
  padding: 12px var(--space-5);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.peer-table tr:last-child td { border-bottom: none; }
.peer-table tr:hover td { background: var(--bg-hover); }
.peers-mobile { display: none; }

/* ============================================================
   SECTION 17: ROUTE ITEMS
   ============================================================ */
.route-item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
}

.route-item:last-child { border-bottom: none; }
.route-domain { font-family: var(--font-mono); font-size: 12.5px; font-weight: var(--weight-semibold); color: var(--accent); }

/* ─── Routes toolbar (search + chips + sort + view toggle) ─ */
.routes-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding: 10px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.routes-toolbar .input-wrap { flex: 0 1 220px; min-width: 160px; }
.filter-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex: 1; }
.chip-sep { width: 1px; height: 18px; background: var(--border-hi, var(--border)); margin: 0 4px; }
.filter-chip {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-body);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.13s;
}
.filter-chip:hover { color: var(--text-primary); }
.filter-chip.on { background: var(--accent-lt, var(--bg-hover)); border-color: var(--accent); color: var(--accent); font-weight: var(--weight-semibold, 600); }
.sort-select {
  font-size: 12px;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--bg-body);
  color: var(--text-secondary);
}

@media (max-width: 1023px) {
  .routes-toolbar { align-items: stretch; }
  .routes-toolbar .input-wrap { flex-basis: 100%; }
  .filter-chips { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
}

/* ============================================================
   SECTION 19: MODALS
   ============================================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg-overlay);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
  animation: fadeIn 180ms ease;
}

/* default theme uses display:none + no flex; Pro uses .open to show */
/* Support both patterns */
.modal-overlay[style*="display:none"],
.modal-overlay[style*="display: none"] {
  display: none !important;
}

.modal-overlay.open { display: flex; }

.modal {
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: slideUp 250ms cubic-bezier(0.16, 1, 0.3, 1);
}

.modal.modal-sm { max-width: 380px; }
.modal.modal-wide { max-width: 780px; }
.modal.modal-wide .modal-body { min-height: 420px; }
.modal.modal-xl { max-width: 960px; }

.modal-head,
.modal-header {
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.modal-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.modal-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
  font-size: 20px;
}

.modal-close:hover { background: var(--bg-hover); color: var(--text-primary); }

.modal-body {
  padding: var(--space-6);
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.modal-foot,
.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--border);
  background: var(--bg-body);
  flex-shrink: 0;
}

/* ============================================================
   SECTION 20: FLASH MESSAGES
   ============================================================ */
.flash {
  position: fixed;
  bottom: 24px;
  right: 24px;
  padding: 12px 20px;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  z-index: 10000;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  max-width: 400px;
  box-shadow: var(--shadow-lg);
  border-left: 3px solid transparent;
  min-width: 280px;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.flash.toast-visible,
.flash.flash-visible {
  opacity: 1;
  transform: translateY(0);
}

.flash-success {
  background: var(--green-light);
  border: 1px solid var(--green-border);
  border-left-color: var(--green);
  color: var(--green-text);
}

.flash-error {
  background: var(--red-light);
  border: 1px solid var(--red-border);
  border-left-color: var(--red);
  color: var(--red-text);
}

.toast {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-4) var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  min-width: 300px;
  animation: slideInRight 250ms cubic-bezier(0.16, 1, 0.3, 1);
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 10000;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.3s, transform 0.3s;
  max-width: 400px;
}

.toast.success,
.toast-success { background: var(--green-light); color: var(--green-text); border: 1px solid var(--green-border); border-left: 3px solid var(--green); }
.toast.error,
.toast-error   { background: var(--red-light);   color: var(--red-text);   border: 1px solid var(--red-border);   border-left: 3px solid var(--red); }
.toast.warning { border-left: 3px solid var(--amber); }
.toast.info    { border-left: 3px solid var(--blue); }

.toast-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Gateway update toast (pulsing while running, static when terminal) ── */
#gw-update-toast-stack {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  z-index: 10001;
  pointer-events: none;
}
.gw-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  background: var(--bg-card, var(--bg-panel, #fff));
  color: var(--text-1);
  border: 1px solid var(--border);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.3s, transform 0.3s;
  max-width: 360px;
  pointer-events: auto;
}
.gw-toast.show { opacity: 1; transform: translateY(0); }
.gw-toast-dot {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--text-3);
}
.gw-toast-msg { flex: 1 1 auto; }
.gw-toast-close {
  flex: 0 0 auto;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 2px;
  font-size: 14px;
  line-height: 1;
  color: inherit;
  opacity: 0.6;
}
.gw-toast-close:hover { opacity: 1; }
/* running → blue, the whole toast gently pulses, dot pulses stronger */
.gw-toast-updating {
  border-color: var(--blue-bd, rgba(37,99,235,0.4));
  animation: gw-toast-pulse 1.6s ease-in-out infinite;
}
.gw-toast-updating .gw-toast-dot {
  background: var(--blue, #2563eb);
  animation: gw-toast-dot-pulse 1.6s ease-in-out infinite;
}
/* done → green static */
.gw-toast-done {
  background: var(--green-lt, var(--green-light));
  color: var(--green-text, var(--green));
  border-color: var(--green-bd, var(--green-border));
}
.gw-toast-done .gw-toast-dot { background: var(--green, #16a34a); }
/* failed → red static */
.gw-toast-failed {
  background: var(--red-lt, var(--red-light));
  color: var(--red-text, var(--red));
  border-color: var(--red-bd, var(--red-border));
}
.gw-toast-failed .gw-toast-dot { background: var(--red, #dc2626); }
/* unknown → amber static */
.gw-toast-unknown {
  background: var(--amber-lt, rgba(217,119,6,0.1));
  color: var(--amber, #b45309);
  border-color: var(--amber-bd, rgba(217,119,6,0.4));
}
.gw-toast-unknown .gw-toast-dot { background: var(--amber, #b45309); }
@keyframes gw-toast-pulse {
  0%, 100% { box-shadow: 0 4px 12px rgba(0,0,0,0.15), 0 0 0 0 rgba(37,99,235,0.45); }
  50%      { box-shadow: 0 4px 12px rgba(0,0,0,0.15), 0 0 0 5px rgba(37,99,235,0); }
}
@keyframes gw-toast-dot-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.78); }
}
@media (prefers-reduced-motion: reduce) {
  .gw-toast { transition: none; }
  .gw-toast-updating, .gw-toast-updating .gw-toast-dot { animation: none; }
}

/* ============================================================
   SECTION 22: SIDEBAR TOGGLE & OVERLAY (mobile)
   ============================================================ */
.sidebar-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
}

.sidebar-toggle:hover { background: var(--bg-hover); }

.sidebar-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.sidebar-toggle svg { color: var(--text-primary); }

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 59;
  opacity: 0;
  transition: opacity 0.3s ease;
  -webkit-tap-highlight-color: transparent;
}

.sidebar-overlay.visible {
  display: block;
  opacity: 1;
}

/* ============================================================
   SECTION 23: BOTTOM NAV (mobile)
   ============================================================ */
.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 64px;
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  z-index: 100;
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.06);
}

.bottom-nav-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.bn-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  color: var(--text-muted);
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
  font-size: 10px;
  font-weight: var(--weight-semibold);
  min-width: 60px;
  text-decoration: none;
}

.bn-item.active { color: var(--accent); }
.bn-item svg { width: 20px; height: 20px; }

/* ============================================================
   SECTION 24: FAB SPEED DIAL (mobile)
   ============================================================ */
.fab-wrap {
  display: none;
  position: fixed;
  bottom: 80px;
  right: 18px;
  z-index: 102;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.fab {
  width: 50px;
  height: 50px;
  background: var(--accent);
  border-radius: 50%;
  border: none;
  cursor: pointer;
  color: white;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.35);
  display: grid;
  place-items: center;
  transition: transform 0.2s, box-shadow 0.15s;
}

.fab:hover { transform: scale(1.06); box-shadow: 0 6px 20px rgba(37, 99, 235, 0.45); }
.fab svg { width: 22px; height: 22px; }
.fab .fab-icon-close { display: none; }

.fab-wrap.open .fab { background: var(--text-secondary); }
.fab-wrap.open .fab .fab-icon-plus { display: none; }
.fab-wrap.open .fab .fab-icon-close { display: block; }

.fab-menu {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  opacity: 0;
  transform: translateY(10px) scale(0.95);
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}

.fab-wrap.open .fab-menu {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.fab-option {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text-primary);
  cursor: pointer;
}

.fab-option-label {
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
}

.fab-option-icon {
  width: 40px;
  height: 40px;
  background: var(--accent);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: white;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

.fab-option-icon svg { width: 18px; height: 18px; }
.fab-option:hover .fab-option-label { background: var(--bg-hover); }

.fab-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 101;
}

.fab-backdrop.open { display: block; }

/* ============================================================
   SECTION 25: BATCH BAR
   ============================================================ */
.batch-bar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
  gap: 16px;
  padding: 12px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 100;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  max-width: calc(100vw - 24px);
  /* JS controls visibility via inline style.display — do NOT set display:none here */
}
.batch-bar span { white-space: nowrap; }

.batch-checkbox {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--accent);
}

.batch-col { text-align: center; }

/* ============================================================
   SECTION 26: FEATURE LOCKED
   ============================================================ */
.feature-locked {
  opacity: 0.5;
  pointer-events: none;
  position: relative;
}

.feature-locked .lock-icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: 6px;
  vertical-align: middle;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}

.limit-badge {
  font-size: 12px;
  color: var(--text-secondary);
  margin-left: 8px;
}

.limit-badge.at-limit {
  color: var(--amber-text);
  font-weight: var(--weight-semibold);
}

.meter-bar {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width var(--transition-slow);
}

.meter-bar.blue   { background: var(--accent); }
.meter-bar.green  { background: var(--green); }
.meter-bar.amber  { background: var(--amber); }
.meter-bar.red    { background: var(--red); }

.chart-svg { width: 100%; height: 100%; }

.chart-area {
  width: 100%;
  height: 260px;
  background: linear-gradient(180deg, var(--accent-light) 0%, transparent 100%);
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
}

.chart-area svg { width: 100%; height: 100%; }

/* ============================================================
   SECTION 32: WG CONFIG
   ============================================================ */
.wg-config {
  background: var(--bg-code);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.75;
  color: var(--text-secondary);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04);
  white-space: pre-wrap;
  word-break: break-all;
}

/* ============================================================
   SECTION 33: EMPTY STATE & TOOLBAR
   ============================================================ */
.empty-state {
  text-align: center;
  padding: var(--space-12) var(--space-8);
  color: var(--text-muted);
}

.empty-state svg {
  width: 48px;
  height: 48px;
  margin-bottom: var(--space-4);
  opacity: 0.4;
}

.toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}

.history-table { width: 100%; border-collapse: collapse; }
.history-table th { text-align: left; font-size: 11px; font-weight: var(--weight-semibold); color: var(--text-muted); text-transform: uppercase; letter-spacing: .3px; padding: 8px 12px; border-bottom: 2px solid var(--border); }
.history-table td { padding: 10px 12px; font-size: 12px; border-bottom: 1px solid var(--border); color: var(--text-secondary); }
.history-table tr:last-child td { border-bottom: none; }
.history-table tr:hover { background: var(--bg-hover); }

/* ============================================================
   SECTION 35: UTILITY CLASSES
   ============================================================ */
.flex { display: flex; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* ============================================================
   SECTION 36: ANIMATIONS
   ============================================================ */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ============================================================
   SECTION 37: RESPONSIVE
   ============================================================ */
@media (max-width: 1200px) {
  .stats-grid { grid-template-columns: repeat(3, 1fr); }
  .two-col { grid-template-columns: 1fr; }
}

@media (max-width: 1024px) {
  .sidebar {
    transform: translateX(-100%);
  }
  .sidebar.open {
    transform: translateX(0);
    box-shadow: var(--shadow-xl);
  }
  .main-wrap {
    margin-left: 0;
  }
}

@media (max-width: 900px) {
  /* Show sidebar toggle button */
  .sidebar-toggle { display: flex; }

  /* Sidebar: off-screen by default, slides in */
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    z-index: 60;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .sidebar.open {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
  }

  .bottom-nav  { display: flex; }
  .fab-wrap    { display: flex; }
  .main        { padding: 16px; padding-bottom: 80px; }
  .page-header { flex-direction: column; }
  .page-header .btn { align-self: flex-start; }
  .peers-mobile  { display: block; }
  .card        { overflow: visible; }
  .topbar-lang { display: none; }

  .modal { width: calc(100vw - 16px); max-height: calc(100vh - 16px); margin: 8px; }
  .modal-overlay { align-items: flex-start; padding: 8px 0; overflow-y: auto; }
  .modal-head  { padding: 12px 16px; position: sticky; top: 0; background: var(--bg-card); z-index: 1; }
  .modal-foot  { padding: 10px 16px; position: sticky; bottom: 0; background: var(--bg-card); z-index: 1; }
  .modal-body  { padding: 16px; }

  .route-item {
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 0;
    position: relative;
    padding-right: 100px;
  }

  .batch-bar {
    bottom: 76px;
    flex-direction: column;
    gap: 8px;
    padding: 10px 14px;
    width: calc(100vw - 24px);
  }

  .batch-bar > div { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
  .batch-bar .btn  { font-size: 12px; padding: 6px 10px; }

}

@media (max-width: 768px) {
  #users-table thead { display: none !important; }
  #users-table { display: block !important; }
  #users-table tbody { display: block !important; }
  #users-table tr { display: block !important; padding: 14px 16px !important; border-bottom: 1px solid var(--border) !important; margin-bottom: 0 !important; }
  #users-table td { display: block !important; padding: 2px 0 !important; border: none !important; font-size: 13px !important; background: none !important; width: 100% !important; }
  #users-table td:first-child { font-size: 15px !important; font-weight: var(--weight-semibold) !important; margin-bottom: 4px !important; }
  #users-table td:empty { display: none !important; }
  .form-row { flex-direction: column; gap: 0; grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .page-content  { padding: var(--space-4); }
  .page-header   { flex-direction: column; align-items: flex-start; }
  .stats-grid    { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .topbar-status span { display: none; }
}


/* ─── JS-Rendered Component Compatibility ───────────────── */

/* Alert banners */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--radius);
  font-size: 13px;
  line-height: 1.5;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-secondary);
  margin-bottom: 12px;
}

/* Route trace entries (entry editor debug tab) */
.trace-entry {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 3px 0;
  font-size: 12px;
  font-family: var(--font-mono);
  color: var(--text-secondary);
  border-bottom: 1px dashed var(--border);
}

.trace-entry:last-child { border-bottom: none; }

/* Checkbox helper — RDP user picker */
.rdp-user-cb {
  accent-color: var(--accent);
  width: 14px;
  height: 14px;
  cursor: pointer;
}

/* ============================================================
   Gateway Pools
   ============================================================ */
.data-table {
  width: 100%;
  border-collapse: collapse;
}
.data-table th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--weight-semibold);
  color: var(--text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 9px var(--space-5);
  border-bottom: 1px solid var(--border);
}
.data-table td {
  padding: 12px var(--space-5);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  font-size: 13px;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--bg-hover); }

.modal-box {
  background: var(--bg-panel);
  border-radius: var(--radius);
  width: 600px;
  max-width: 96vw;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  position: relative;
}

.pool-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}
.pool-form-col {
  min-width: 0;
}
.pool-members-col {
  border-left: 1px solid var(--border, rgba(0,0,0,0.08));
  padding-left: 24px;
}
@media (max-width: 760px) {
  .pool-form-grid { grid-template-columns: 1fr; }
  .pool-members-col { border-left: none; padding-left: 0; border-top: 1px solid var(--border, rgba(0,0,0,0.08)); padding-top: 16px; }
}

.pool-members-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 80px;
}
.pool-members-list:empty::before {
  content: attr(data-empty-text);
  display: block;
  color: var(--text-3);
  font-size: 12px;
  padding: 24px 0;
  text-align: center;
  border: 1px dashed var(--border, rgba(0,0,0,0.12));
  border-radius: var(--radius, 6px);
}
.pool-member-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: var(--bg-2, rgba(0,0,0,0.03));
  border-radius: var(--radius, 6px);
  cursor: grab;
  user-select: none;
  transition: background 0.12s ease, opacity 0.12s ease;
}
.pool-member-row:active { cursor: grabbing; }
.pool-member-row.dragging { opacity: 0.4; }
.pool-member-row.drag-over-top { box-shadow: 0 -2px 0 0 var(--accent, #6366f1); }
.pool-member-row.drag-over-bottom { box-shadow: 0 2px 0 0 var(--accent, #6366f1); }
.pool-member-handle {
  font-family: var(--font-mono, monospace);
  color: var(--text-3);
  font-size: 14px;
  line-height: 1;
  padding: 0 4px;
}
.pool-member-position {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  color: var(--text-2);
  min-width: 24px;
  text-align: center;
}
.pool-member-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pool-mode-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-family: var(--font-mono);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pool-mode-failover {
  background: rgba(99, 102, 241, 0.15);
  color: var(--accent, #6366f1);
}
.pool-mode-load_balancing {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
}

.pool-member-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: var(--bg-soft, var(--bg-hover));
  border-radius: 4px;
  margin-bottom: 4px;
  font-size: 13px;
}
/* ── Inline-Help Tooltips (gc-tip) ───────────────────────── */
.gc-tip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; margin-left: 5px;
  color: var(--text-3); cursor: help; vertical-align: middle;
  border-radius: 50%; flex-shrink: 0;
}
.gc-tip:hover, .gc-tip:focus { color: var(--accent); outline: none; }
#gc-tip-bubble {
  position: fixed; display: none; max-width: 280px;
  background: var(--bg-panel); color: var(--text-1);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 8px 10px; font-size: 12px; line-height: 1.45;
  white-space: pre-line; box-shadow: 0 8px 24px rgba(0,0,0,.18);
  z-index: 10000; pointer-events: none;
}
.gc-port-error { border-color: var(--red) !important; }
/* Domain-Feld bei L4-none ausgeblendet -> 2-Spalten-Reihe einspaltig kollabieren
   (sonst leere Spalte). Bei flex-basierten .form-row wirkungslos = ok. */
.form-row.gc-row-collapsed { grid-template-columns: 1fr; }
/* ── Gateway Fleet Dashboard (#2a) — scoped under .gw-fleet to avoid collisions ── */
.gw-fleet .page-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.gw-fleet .page-sub { color: var(--text-3); margin: 0 0 20px; }
.gw-fleet .note { background: var(--amber-lt); border: 1px solid var(--amber-bd); color: var(--amber); padding: 10px 14px; border-radius: var(--radius-sm); margin-bottom: 18px; font-size: 13px; }
.gw-fleet .kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 24px; }
.gw-fleet .kpi { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); }
.gw-fleet .kpi .n { font-size: 26px; font-weight: 700; font-family: var(--font-display); line-height: 1.1; }
.gw-fleet .kpi .l { color: var(--text-3); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }
.gw-fleet .kpi.ok .n { color: var(--green); }
.gw-fleet .kpi.warn .n { color: var(--amber); }
.gw-fleet .kpi.bad .n { color: var(--red); }
.gw-fleet .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; }
.gw-fleet .gw { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.gw-fleet .gw .top { padding: 14px 16px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.gw-fleet .gw .top h3 { margin: 0 0 2px; font-size: 15px; }
.gw-fleet .gw .host { color: var(--text-3); font-size: 12px; font-family: var(--font-mono); }
.gw-fleet .gw .body { padding: 14px 16px; display: grid; gap: 12px; }
/* Scan / loading indicators (LAN discovery + egress dropdown). Mirrored from
   app.css — the Pro theme loads only pro.css. Must be a linked rule, not a
   runtime-injected <style> (CSP styleSrcElem requires a nonce). */
@keyframes gw-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes gw-progress-slide { 0% { left: -35%; } 100% { left: 100%; } }
.gw-progress { height: 5px; width: 100%; grid-column: 1 / -1; background: var(--border); border-radius: 3px; overflow: hidden; margin: 10px 0 4px; position: relative; }
.gw-progress::before { content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 35%; border-radius: 3px; background: var(--accent, #2563eb); animation: gw-progress-slide 1.1s ease-in-out infinite; }
.gw-fleet .gw .kv { display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
.gw-fleet .gw .kv .k { color: var(--text-3); }
.gw-fleet .gw .kv .v { font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.gw-fleet .gw .metric { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-2); margin-bottom: 4px; }
.gw-fleet .gw .bar { height: 6px; background: var(--bg-panel); border-radius: 4px; overflow: hidden; }
.gw-fleet .gw .bar .fill { display: block; height: 100%; background: var(--accent); }
.gw-fleet .gw .bar .fill.warn { background: var(--amber); }
.gw-fleet .gw .bar .fill.bad { background: var(--red); }
.gw-fleet .gw .foot { padding: 10px 16px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; color: var(--text-3); font-size: 12px; background: var(--bg-panel); }
.gw-fleet .pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; white-space: nowrap; text-transform: capitalize; }
.gw-fleet .pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.gw-fleet .pill.online { color: var(--green); background: var(--green-lt); }
.gw-fleet .pill.degraded { color: var(--amber); background: var(--amber-lt); }
.gw-fleet .pill.offline { color: var(--red); background: var(--red-lt); }
.gw-fleet .pill.pending { color: var(--text-3); background: var(--bg-panel); }
.gw-fleet .badge.drift { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 6px; color: var(--amber); background: var(--amber-lt); }
.gw-fleet .recheck { padding: 4px 10px; font-size: 13px; line-height: 1; background: transparent; border: 1px solid var(--border); color: var(--text-2); border-radius: var(--radius-sm); cursor: pointer; }
.gw-fleet .recheck:hover { border-color: var(--accent); color: var(--accent); }
/* ── Gateway detail view (full-page, mirrors gateway-detail.html mockup) ── */
.gw-fleet #gw-detail-view .gw-back { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; color: var(--text-3); font-size: 13px; cursor: pointer; padding: 0; margin-bottom: 16px; font-family: inherit; }
.gw-fleet #gw-detail-view .gw-back:hover { color: var(--accent); }
.gw-fleet .gw-detail .page-h h1 { display: inline-flex; align-items: center; gap: 12px; font-size: 22px; margin: 0; }
.gw-fleet .gw-detail-actions { display: flex; gap: 8px; align-items: center; }
.gw-fleet .gw-update { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; padding: 6px 13px; border-radius: var(--radius-sm); border: 1px solid var(--accent); background: var(--accent); color: #fff; cursor: pointer; text-decoration: none; white-space: nowrap; }
.gw-fleet .gw-update:hover { filter: brightness(1.06); }
.gw-fleet .grid.two { grid-template-columns: 1fr 1fr; }
.gw-fleet .gw.full { grid-column: 1 / -1; }
.gw-fleet .row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 16px; }
.gw-fleet .row3 .kv { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.gw-fleet .gw .kv .v.ok { color: var(--green); }
.gw-fleet .gw .kv .v.bad { color: var(--red); }
.gw-fleet .gw-metrics .bar { margin-bottom: 12px; }
.gw-fleet .gw-metrics .bar:last-child { margin-bottom: 0; }
.gw-fleet .gw-routes { width: 100%; border-collapse: collapse; font-size: 13px; }
.gw-fleet .gw-routes th { text-align: left; font-weight: 600; color: var(--text-3); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; padding: 0 10px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.gw-fleet .gw-routes td { padding: 9px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.gw-fleet .gw-routes tr:last-child td { border-bottom: 0; }
.gw-fleet .gw-routes .sub { color: var(--text-3); font-family: var(--font-mono); font-size: 12px; }
.gw-fleet .gw-routes .num { font-family: var(--font-mono); color: var(--text-2); white-space: nowrap; }
.gw-fleet .gw-empty { color: var(--text-3); font-size: 13px; padding: 4px 0; }
@media (max-width: 760px) { .gw-fleet .kpis { grid-template-columns: repeat(2, 1fr); } .gw-fleet .grid.two { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .gw-fleet .row3 { grid-template-columns: 1fr 1fr; } }

/* ── Browser RDP Session Player (pro theme) ──────────────────────────────── */
body.rdp-session-body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
}
.rdp-session-page {
  --player-bg:   #0d1117;
  --player-grid: #1a212c;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  background: var(--player-bg);
}
.rdp-session-display {
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: hidden;
  background: var(--player-bg);
}
/* Slim toolbar */
.rdp-session-toolbar {
  flex: 0 0 auto;
  height: 48px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  background: rgba(13,17,23,0.92);
  border-top: 1px solid #232c38;
  backdrop-filter: blur(6px);
}
.rdp-spacer { flex: 1; }
/* Status pill */
.rdp-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px 5px 10px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  border: 1px solid transparent;
  flex-shrink: 0;
}
.rdp-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.rdp-spin {
  width: 11px; height: 11px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: rdp-spin 0.6s linear infinite;
  flex: 0 0 auto;
}
.rdp-pill--connecting { background: var(--blue-lt);  border-color: var(--blue-bd);  color: #6da0ff; }
.rdp-pill--connecting .rdp-dot { background: var(--blue); animation: rdp-pulse 1s ease-in-out infinite; }
.rdp-pill--connected  { background: var(--green-lt); border-color: var(--green-bd); color: #4ade80; }
.rdp-pill--connected  .rdp-dot { background: var(--green); box-shadow: 0 0 0 3px var(--green-lt); }
.rdp-pill--reconnect  { background: var(--amber-lt); border-color: var(--amber-bd); color: #f5b454; }
.rdp-pill--reconnect  .rdp-dot { background: var(--amber); animation: rdp-pulse 0.8s ease-in-out infinite; }
.rdp-pill--disconnect { background: rgba(168,160,153,0.14); border-color: #3a4350; color: #9aa6b2; }
.rdp-pill--disconnect .rdp-dot { background: var(--text-3); }
.rdp-pill--error      { background: var(--red-lt); border-color: var(--red-bd); color: #f87171; }
.rdp-pill--error      .rdp-dot { background: var(--red); }
/* Toolbar buttons (on dark surface) */
.rdp-tbtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid #2a3340;
  background: #161d27;
  color: #c2ccd6;
  transition: background 0.13s, color 0.13s, border-color 0.13s;
  white-space: nowrap;
  flex-shrink: 0;
}
.rdp-tbtn:hover { background: #1d2632; color: #fff; border-color: #3a4654; }
.rdp-tbtn svg { width: 14px; height: 14px; flex: 0 0 auto; }
.rdp-tbtn[aria-pressed="true"] { background: var(--accent-md); border-color: var(--accent); color: #6ee7b7; }
.rdp-tbtn--danger { background: var(--red-lt); border-color: var(--red-bd); color: #f87171; }
.rdp-tbtn--danger:hover { background: rgba(220,38,38,0.18); color: #fff; border-color: var(--red); }
/* Inline clipboard-unavailable warning pill */
.rdp-clip-warn {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border-radius: 13px;
  border: 1px solid var(--amber-bd, rgba(180,83,9,0.19));
  background: var(--amber-lt, rgba(180,83,9,0.08));
  color: var(--amber, #b45309);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
}
/* Reconnecting overlay */
.rdp-reconnect-veil {
  position: absolute; inset: 0;
  background: rgba(13,17,23,0.55);
  backdrop-filter: blur(1.5px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}
.rdp-reconnect-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 22px 28px;
  border-radius: var(--radius);
  background: rgba(20,26,34,0.9);
  border: 1px solid #2a3340;
  box-shadow: var(--shadow-md);
}
.rdp-big-spin {
  width: 30px; height: 30px;
  border: 3px solid var(--amber-bd);
  border-top-color: var(--amber);
  border-radius: 50%;
  animation: rdp-spin 0.7s linear infinite;
}
.rdp-rc-title { font-size: 13px; font-weight: 600; color: #f5b454; }
.rdp-rc-sub   { font-family: var(--font-mono); font-size: 11px; color: #6b7785; }
/* Error / limit overlay */
.rdp-error-veil {
  position: absolute; inset: 0;
  background: rgba(8,11,16,0.74);
  backdrop-filter: blur(2.5px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 11;
}
.rdp-error-modal {
  width: 100%;
  max-width: 420px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.rdp-em-bar  { height: 4px; background: var(--red); }
.rdp-em-body { padding: 26px 26px 14px; text-align: center; }
.rdp-em-icon {
  width: 52px; height: 52px;
  margin: 0 auto 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--red-lt);
  border: 1px solid var(--red-bd);
  color: var(--red);
}
.rdp-em-icon svg { width: 26px; height: 26px; }
.rdp-em-body h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 22px;
  color: var(--text-1);
}
.rdp-em-cause {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--red-lt);
  border: 1px solid var(--red-bd);
  color: var(--red);
}
.rdp-em-text {
  margin-top: 14px;
  font-size: 13.5px;
  color: var(--text-2);
  line-height: 1.55;
}
.rdp-em-actions {
  display: flex;
  gap: 10px;
  padding: 18px 26px 24px;
  border-top: 1px solid var(--border);
  background: var(--bg-card);
}
/* Animations (rdp- prefix to avoid conflicts) */
@keyframes rdp-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes rdp-spin  { to { transform: rotate(360deg); } }

/* ─── Domain zones (zn-) ─── */
/* Shared zones building blocks (zones.njk, domain-modal.js, host-dialogs.js):
   toolbar, health dots, gateway pill, icon buttons, popup menu and the small
   dialogs (.zn-dialog). Uses only the legacy tokens (--bg-*, --text-*,
   --border*, --accent …). The page layout and the big dialogs are the rt-
   block in §2 ("Domains & Routen redesign"). */
.zn-toolbar [hidden], .zn-page-header [hidden], .zn-dialog [hidden] { display: none !important; }

.routes-toolbar.zn-toolbar { margin-bottom: 0; }
.zn-toolbar .zn-search { flex: 0 1 300px; min-width: 180px; }
.zn-toolbar .zn-search input[type=search] { width: 100%; }
.zn-gw-select { max-width: 220px; }
.zn-toolbar .filter-chips { flex-wrap: wrap; overflow: visible; padding-bottom: 0; }
.zn-toolbar .filter-chip { white-space: nowrap; flex-shrink: 0; }
.btn.zn-btn-sm { padding: 5px 10px; font-size: 12px; gap: 6px; }
.btn.zn-btn-sm svg { width: 12px; height: 12px; }

.zn-mono { font-family: var(--font-mono); }
.zn-muted { color: var(--text-3); }
.zn-spacer { flex: 1; }
.zn-ic { flex-shrink: 0; }

/* ── Page: zone cards ── */
.zn-zones { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.zn-empty { font-size: 13px; color: var(--text-3); padding: 24px 0; text-align: center; display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; }
.zn-error { color: var(--red); }

.zn-host:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.zn-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: var(--green); box-shadow: 0 0 0 3px var(--green-lt); }
.zn-dot-degraded { background: var(--amber); box-shadow: 0 0 0 3px var(--amber-lt); }
.zn-dot-down { background: var(--red); box-shadow: 0 0 0 3px var(--red-lt); }
.zn-dot-disabled { background: var(--border-hi); box-shadow: 0 0 0 3px var(--bg-hover); }
.zn-domain { font-family: var(--font-mono); font-size: 14px; font-weight: 600; color: var(--text-1); overflow-wrap: anywhere; }
.zn-gw-pill { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 11px; color: var(--text-2); padding: 3px 8px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-panel); white-space: nowrap; }
.zn-gw-pill .zn-ic { color: var(--text-3); }
.zn-gw-pill.off { color: var(--amber); border-color: var(--amber-bd); background: var(--amber-lt); }
.zn-gw-pill.off .zn-ic { color: var(--amber); }

/* host rows */
.zn-host { transition: background 0.13s; }
.zn-name { font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; color: var(--accent); overflow-wrap: anywhere; }
.zn-more { display: block; width: 100%; border: 0; background: transparent; font-family: var(--font-ui); font-size: 12px; font-weight: 600; color: var(--accent); cursor: pointer; text-align: left; }
.zn-more:hover { background: var(--bg-hover); }

/* small icon button, toggle states, links */
.zn-ibtn { width: 28px; height: 28px; padding: 0; border-radius: var(--radius-xs); background: var(--bg-card); border: 1px solid var(--border); color: var(--text-2); cursor: pointer; display: inline-grid; place-items: center; flex-shrink: 0; box-shadow: 0 1px 2px rgba(0,0,0,0.04); transition: background 0.13s, color 0.13s, border-color 0.13s; }
.zn-ibtn:hover, .zn-ibtn[aria-expanded="true"] { background: var(--bg-hover); color: var(--text-1); border-color: var(--border-hi); }
.zn-ibtn:focus-visible, .zn-toggle:focus-visible, .zn-menu-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.zn-ibtn-danger:hover { background: var(--red-lt); color: var(--red); border-color: var(--red-bd); }
.zn-ibtn.is-loading, .zn-busy, .toggle-btn.is-loading { opacity: 0.55; pointer-events: none; }
.zn-link { color: var(--accent); font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; text-decoration: none; white-space: nowrap; }
.zn-link:hover { text-decoration: underline; }

/* popup menu (fixed-positioned by domain-modal.js) */
.zn-menu { position: fixed; z-index: 1200; min-width: 210px; max-width: min(320px, calc(100vw - 16px)); padding: 4px; display: flex; flex-direction: column; background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); }
.zn-menu-item { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; width: 100%; padding: 7px 10px; border: 0; background: transparent; border-radius: var(--radius-xs); font-family: var(--font-ui); font-size: 13px; font-weight: 500; color: var(--text-1); cursor: pointer; text-align: left; }
.zn-menu-item .zn-ic { color: var(--text-3); }
.zn-menu-item:hover { background: var(--bg-hover); }
.zn-menu-item.danger, .zn-menu-item.danger .zn-ic { color: var(--red); }
.zn-menu-item[disabled] { opacity: 0.5; cursor: not-allowed; }
.zn-menu-sub { flex-basis: 100%; padding-left: 21px; font-size: 11px; font-weight: 400; color: var(--text-3); }
.zn-menu-sep { height: 1px; background: var(--border); margin: 4px 2px; }

/* ── Fields ── */
.zn-field { display: flex; flex-direction: column; min-width: 0; }
.zn-search-wrap { position: relative; display: flex; align-items: center; min-width: 0; }
.zn-search-wrap > .zn-ic { position: absolute; left: 10px; color: var(--text-3); pointer-events: none; }
.zn-search-wrap > input.zn-input[type] { padding-left: 30px; }
.zn-select { width: 100%; min-width: 0; font-size: 13px; }
.zn-input, input.zn-input[type=text], input.zn-input[type=search] { width: 100%; min-width: 0; padding: 7px 10px; font-size: 13px; }

.zn-hint-muted { font-size: 11px; color: var(--text-3); }

/* labelled fields in small dialogs */
.zn-f { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.zn-f-label { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-3); }
.zn-check { display: inline-flex; align-items: center; gap: 6px; padding-bottom: 8px; font-size: 12px; color: var(--text-2); cursor: pointer; white-space: nowrap; }
.zn-check input, .zn-radio input { accent-color: var(--accent); }
.zn-field-error { margin-top: 6px; font-size: 12px; color: var(--red); }
.zn-affix { display: flex; align-items: stretch; min-width: 0; }
.zn-affix > .zn-input { flex: 1; width: auto; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.zn-affix-sfx { display: flex; align-items: center; max-width: 60%; padding: 0 10px; font-family: var(--font-mono); font-size: 11px; color: var(--text-3); background: var(--bg-base); border: 1px solid var(--border); border-left: 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Small dialogs (confirm / scan / add domain) — above the big rt- dialogs and the entry editor ── */
.modal-overlay.zn-dialog { z-index: 1100; }
.modal.zn-dialog-box { width: 100%; max-width: min(460px, calc(100vw - 32px)); }
.zn-dialog .modal-head { gap: 12px; }
.zn-dialog .modal-close svg { width: 16px; height: 16px; }
.zn-dialog-body .form-group:last-child { margin-bottom: 0; }
.zn-dialog-msg { font-size: 14px; line-height: 1.6; color: var(--text-1); }
.zn-dialog-detail { margin-top: 8px; font-size: 12.5px; line-height: 1.5; color: var(--text-2); }
.zn-dialog-body > .zn-dialog-detail:first-child { margin: 0 0 12px; }
.zn-dialog-body > .form-hint { margin: -8px 0 12px; }
.zn-radios { display: flex; gap: 16px; flex-wrap: wrap; }
.zn-radio { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.zn-domain-status { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.zn-domain-result { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ── Narrow screens: rows wrap, modal scrolls ── */
@media (max-width: 900px) {
  .zn-toolbar .zn-search { flex-basis: 100%; }
}
@media (max-width: 480px) {
  .zn-gw-select { max-width: none; flex: 1 1 100%; }
}

/* ─── Domain zones: LAN discovery (zn-disc-) ─── */
.zn-disc-hint .zn-link { font-size: 11px; }
.modal.zn-dialog-box.zn-dialog-wide { max-width: min(680px, calc(100vw - 32px)); }
.zn-disc-bar { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.zn-disc-gwwrap { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.zn-disc-gwwrap .zn-f-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-3); }
.zn-disc-gwname { display: inline-flex; align-items: center; gap: 6px; height: 32px; font-size: 13px; font-weight: 600; }
.zn-disc-gwname .zn-ic { color: var(--text-3); }
.zn-disc-gw { min-width: 200px; }
.zn-disc-search { flex: 1 1 180px; }
.zn-disc-bar .zn-disc-scan { margin-left: auto; }
.zn-disc-status { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-height: 18px; margin-bottom: 8px; font-size: 12px; color: var(--text-2); }
.zn-disc-status:empty { display: none; }
.zn-disc-spin { display: inline-flex; color: var(--accent); animation: zn-disc-spin 1s linear infinite; }
@keyframes zn-disc-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.zn-disc-err { color: var(--red); }
.zn-disc-warn { display: inline-flex; align-items: center; gap: 4px; color: var(--amber); }
.zn-disc-age { color: var(--text-3); }
.zn-disc-hintbox { margin-bottom: 10px; padding: 10px 12px; border: 1px dashed var(--border); border-radius: var(--radius-sm); font-size: 12.5px; line-height: 1.5; color: var(--text-2); }
.zn-disc-list { max-height: min(52vh, 460px); overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-base); }
.zn-disc-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--border); }
.zn-disc-row:last-child { border-bottom: 0; }
.zn-disc-info { min-width: 0; }
.zn-disc-name { font-size: 13px; font-weight: 600; color: var(--text-1); overflow-wrap: anywhere; }
.zn-disc-sep { color: var(--text-3); font-weight: 400; }
.zn-disc-ip { font-family: var(--font-mono); font-size: 12px; font-weight: 400; color: var(--text-2); }
.zn-disc-ports { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-top: 4px; font-size: 11px; }
.zn-disc-chip { display: inline-block; padding: 1px 7px; border: 1px solid var(--border); border-radius: 999px; font-family: var(--font-mono); font-size: 11px; color: var(--text-2); }
.zn-disc-chip-http { border-color: var(--accent); color: var(--accent); }
.zn-disc-portwrap { display: flex; flex-direction: column; gap: 4px; }
.zn-disc-portwrap .zn-f-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-3); }
.zn-disc-port { width: 96px; }
.zn-disc-empty { padding: 22px 12px; text-align: center; font-size: 12px; color: var(--text-3); }
@media (max-width: 600px) {
  .zn-disc-row { grid-template-columns: minmax(0, 1fr) auto; }
  .zn-disc-row > .zn-disc-info { grid-column: 1 / -1; }
  .zn-disc-bar .zn-disc-scan { margin-left: 0; }
}
/* ─── TLS guard (tg-) ─── */
/* Certificates page (certificates.njk), the TLS dialogs of tls-ui.js and the
   TLS markers on the zones page / domain dialog / settings. Uses only the
   legacy tokens (--bg-*, --text-*, --border, --accent, --green/-lt/-bd …)
   like the zn- block, so app.css and pro.css carry the same rules (aurora
   loads pro.css plus its own override block). */
.tg-banner[hidden], .tg-chips [hidden], .tg-dialog [hidden], .tg-table [hidden], .tg-notice [hidden], .tg-records[hidden], .tg-orig[hidden] { display: none !important; }

.tg-muted { color: var(--text-3); }
.tg-mono { font-family: var(--font-mono); font-size: 11.5px; }
.tg-small { font-size: 11px; }
.tg-ic { flex-shrink: 0; }
.tg-link { background: none; border: none; padding: 0; font: inherit; font-size: 11.5px; color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.tg-link:hover { color: var(--text-1); }

/* ── Tiles ── */
.stats-grid.tg-tiles { grid-template-columns: repeat(4, 1fr); margin-bottom: 14px; }
.tg-tile { cursor: pointer; user-select: none; }
.tg-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tg-tile.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-lt, var(--bg-hover)); }

/* ── ACME e-mail banner ── */
.tg-banner { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; margin-bottom: 14px; background: var(--amber-lt); border: 1px solid var(--amber-bd); border-left: 3px solid var(--amber); border-radius: var(--radius-sm); color: var(--text-1); font-size: 13px; line-height: 1.5; }
.tg-banner .tg-ic { color: var(--amber); margin-top: 2px; }
.tg-banner-link { color: var(--accent); font-weight: 600; white-space: nowrap; }

/* ── Card head with filter chips ── */
.tg-card-head { flex-wrap: wrap; gap: 10px; }
.tg-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; flex: 0 1 auto; }
.tg-chips .filter-chip { white-space: nowrap; }
.tg-count { margin-left: 5px; font-family: var(--font-mono); font-size: 10px; opacity: 0.75; }
.tg-count:empty { display: none; }

/* ── Table ── */
.tg-table-wrap { overflow-x: auto; }
.tg-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tg-table th { text-align: left; padding: 9px 12px; font-family: var(--font-mono); font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-3); border-bottom: 1px solid var(--border); white-space: nowrap; }
.tg-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.tg-table tbody tr:last-child td { border-bottom: none; }
.tg-table tbody tr:hover td { background: var(--bg-hover); }
.tg-row-problem td:first-child { box-shadow: inset 3px 0 0 var(--amber); }
.tg-row[data-state="failed"] td:first-child { box-shadow: inset 3px 0 0 var(--red); }
.tg-host { font-family: var(--font-mono); font-weight: 600; color: var(--text-1); text-decoration: none; overflow-wrap: anywhere; }
.tg-host:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.tg-sub { display: block; margin-top: 4px; font-size: 11px; color: var(--text-3); max-width: 28ch; line-height: 1.4; }
.tg-cell-status, .tg-cell-host { white-space: nowrap; }
.tg-cell-error { min-width: 200px; max-width: 34ch; }
.tg-err-short { color: var(--text-1); line-height: 1.4; }
.tg-orig-toggle { display: inline-block; margin-top: 3px; }
.tg-orig { margin: 6px 0 0; padding: 8px 10px; background: var(--bg-base); border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 11px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; max-height: 180px; overflow: auto; color: var(--text-2); }
.tg-actions { display: flex; gap: 6px; white-space: nowrap; }
.tg-actions .btn { padding: 4px 9px; font-size: 11.5px; gap: 5px; }
.tg-actions .btn svg { width: 12px; height: 12px; }
.tg-actions:empty { display: none; }
.tg-empty td { text-align: center; color: var(--text-3); padding: 24px 12px; }
.tg-empty.tg-error td { color: var(--red); }
.tg-backend-missing { display: inline-flex; gap: 8px; align-items: center; color: var(--amber); }

/* ── Dialogs (certificate detail / preflight / DNS check) ── */
.modal.tg-dialog-box { max-width: min(600px, calc(100vw - 32px)); }
.tg-dialog-body { max-height: min(70vh, 640px); overflow-y: auto; }
.tg-dialog-foot { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.tg-facts { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; font-size: 13px; color: var(--text-2); }
.tg-fact-state { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; }
.tg-fact-err { margin-top: 4px; }
.tg-fact-label { display: block; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-3); margin-bottom: 3px; }
.tg-field-error { color: var(--red); font-size: 12px; margin-top: 10px; }
.tg-preflight { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; background: var(--bg-base); }
.tg-pf-ok { border-color: var(--green-bd); }
.tg-pf-bad { border-color: var(--red-bd); }
.tg-pf-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-weight: 600; color: var(--text-1); font-size: 13px; }
.tg-pf-detail { margin-top: 6px; color: var(--text-2); word-break: break-all; }
.tg-pf-hint { margin: 8px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--text-2); }
.tg-pf-running { display: flex; gap: 8px; align-items: center; padding: 12px 0; font-size: 13px; }
.tg-pf-running .tg-ic { animation: tg-spin 1s linear infinite; }
@keyframes tg-spin { to { transform: rotate(360deg); } }
.tg-records { margin-top: 12px; display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 4px 12px; font-size: 12px; align-items: baseline; }
.tg-rec { display: contents; }
.tg-rec-title { grid-column: 1 / -1; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-3); margin-top: 6px; }
.tg-rec-label { color: var(--text-2); }
.tg-rec-vals { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.tg-records code { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; overflow-wrap: anywhere; }
.tg-records > .tg-small { grid-column: 1 / -1; margin-top: 4px; }

/* ── Zones page / domain dialog markers ── */
.tg-warn-mark { display: inline-flex; color: var(--amber); margin-left: 3px; }
.rt-chip.tg-chip-warn { border-color: var(--amber-bd); background: var(--amber-lt); }
.tag.tg-entry-tag, .tag.tg-dns-tag { cursor: pointer; line-height: inherit; }
.tag.tg-entry-tag:hover, .tag.tg-dns-tag:hover { filter: brightness(0.93); }
.tg-notice { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 10px 12px; margin-bottom: 12px; background: var(--amber-lt); border: 1px solid var(--amber-bd); border-left: 3px solid var(--amber); border-radius: var(--radius-sm); font-size: 12.5px; line-height: 1.5; color: var(--text-1); }
.tg-notice .tg-ic { color: var(--amber); }
.tg-notice-text { flex: 1 1 220px; }
.tg-notice code { overflow-wrap: anywhere; }


/* ── Toast variant ── */
.toast-warning { background: var(--amber-lt); color: var(--amber); border: 1px solid var(--amber-bd); }

@media (max-width: 900px) {
  .stats-grid.tg-tiles { grid-template-columns: repeat(2, 1fr); }
  .tg-records { grid-template-columns: 1fr; }
  .tg-chips { margin-left: 0; }
}
/* ─── HSTS (hs-) ─── */
/* HSTS per host (docs/feature-hsts.md): the HSTS fields of the
   "Domain-Einstellungen" dialog, the preload confirmation of hsts-ui.js and
   the block in the entry editor's "Sicherheit" section. Legacy tokens only, like the zn-/tg- blocks,
   so app.css and pro.css carry the same rules (aurora overrides surfaces). */
.hs-dialog [hidden], .hs-editor-block [hidden] { display: none !important; }
.hs-ic { flex-shrink: 0; }

/* ── HSTS fields (max-age · includeSubDomains · preload) ── */
.hs-fields { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: flex-end; min-width: 0; }
.hs-f { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hs-f-label, .hs-editor-f .hs-f-label { font-size: 11px; color: var(--text-3); }
.hs-fields .hs-age { min-width: 0; }
.hs-checks { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; padding-bottom: 6px; }
.hs-check { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); cursor: pointer; white-space: nowrap; user-select: none; }
.hs-check input { accent-color: var(--accent); margin: 0; }
.hs-check input:disabled { cursor: not-allowed; }
.hs-check-off { opacity: 0.55; }
.hs-fields-off .hs-checks, .hs-disabled .hs-checks { opacity: 0.55; }

/* ── Dialog (preload confirmation; also the alias dialog of secopt-ui.js) ── */
.modal.hs-dialog-box { max-width: min(520px, calc(100vw - 32px)); }
.hs-dialog-body { max-height: min(70vh, 640px); overflow-y: auto; }
.hs-dialog-foot { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.hs-dialog-body .hs-fields { padding: 0 2px; margin-bottom: 10px; }
.hs-warn { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; margin: 4px 0 12px; background: var(--amber-lt); border: 1px solid var(--amber-bd); border-left: 3px solid var(--amber); border-radius: var(--radius-sm); font-size: 12.5px; line-height: 1.5; color: var(--text-1); }
.hs-warn-text { display: flex; gap: 8px; align-items: flex-start; }
.hs-warn-text .hs-ic { color: var(--amber); margin-top: 2px; }
.hs-warn .hs-confirm { white-space: normal; font-weight: 600; color: var(--text-1); }
.hs-dialog .zn-dialog-msg { margin: 0; }

/* ── Entry editor block (security tab) ── */
.hs-editor-block.hs-locked { opacity: 0.5; pointer-events: none; }
.hs-editor-block.hs-locked .toggle { cursor: not-allowed; }
.hs-editor-fields { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: flex-end; padding: 10px 12px 4px; }
.hs-editor-fields.hs-fields-off { opacity: 0.55; }
.hs-editor-f { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.hs-editor-fields .form-select { padding: 5px 28px 5px 10px; font-size: 12px; min-width: 130px; }
.hs-editor-fields .hs-check { padding-bottom: 7px; }
.hs-editor-hint { line-height: 1.45; }
.hs-editor-hint:empty { display: none; }

@media (max-width: 900px) {
  .hs-check { white-space: normal; }
}

/* ─── Security options (so-) ─── */
/* docs/feature-security-options.md: host aliases (tags, dialog, www checkbox,
   "+ www" on the zones page, "Alias von …" on the certificates page), backend
   TLS / body limit / mTLS blocks of the entry editor, header preset warning,
   TLS profile select in the domain dialog head and the CAA recommendation.
   Legacy tokens only, like the zn-/tg-/hs- blocks, so app.css and pro.css
   carry the same rules (aurora overrides surfaces). */
.so-dialog [hidden], .so-editor-block [hidden], .so-caa [hidden], .so-warn[hidden], .so-www-check[hidden], .so-field-error [hidden] { display: none !important; }
.so-ic { flex-shrink: 0; }
.so-mono { font-family: var(--font-mono); }

/* ── Host rows + certificates: aliases ── */
.tag.so-alias-tag { padding: 1px 6px; font-size: 10px; font-family: var(--font-mono); color: var(--text-3); background: transparent; border-style: dashed; white-space: nowrap; }
.tag.so-alias-tag.so-alias-serve { border-style: solid; }
.so-alias-more { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); white-space: nowrap; }
.so-alias-of { font-family: var(--font-mono); }
.zn-check.so-www-check { padding-bottom: 0; margin-left: auto; font-size: 11.5px; white-space: normal; }
.zn-check.so-www-check.so-www-taken { opacity: 0.55; cursor: not-allowed; }

/* ── Entry line tags ── */
.tag.so-body-tag { font-family: var(--font-mono); white-space: nowrap; }
.tag.so-mtls-tag { gap: 3px; white-space: nowrap; }

/* ── Dialogs (aliases) ── */
.modal.so-dialog-box { max-width: min(560px, calc(100vw - 32px)); }
.so-dialog-body { max-height: min(72vh, 680px); overflow-y: auto; }
.so-dialog-foot { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.so-dialog .zn-dialog-msg { margin: 0 0 10px; }
.so-alias-intro { margin: 0 0 12px; }
.so-alias-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.so-alias-head .form-label { margin: 0; }
.so-alias-count { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); }
.so-alias-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.so-alias-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: var(--bg-base); border: 1px solid var(--border); border-radius: var(--radius-sm); min-width: 0; }
.so-alias-fqdn { font-family: var(--font-mono); font-size: 12px; color: var(--text-1); overflow-wrap: anywhere; min-width: 0; }
.so-alias-row .zn-ibtn { width: 24px; height: 24px; }
.so-alias-empty { padding: 8px 10px; font-size: 12px; color: var(--text-3); border: 1px dashed var(--border); border-radius: var(--radius-sm); }
.so-alias-add { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.so-alias-affix { flex: 1 1 240px; }
.so-alias-affix > .so-alias-input { min-width: 70px; }
.so-alias-add-error { margin-top: 6px; }
.so-radios { flex-direction: column; gap: 8px; margin: 14px 0 10px; }
.so-radios > .form-label { margin-bottom: 0; }
.zn-radio.so-radio { align-items: flex-start; gap: 8px; }
.so-radio input { margin-top: 3px; }
.so-radio-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.so-radio-title { font-size: 13px; color: var(--text-1); font-weight: 500; }
.so-radio-desc { font-size: 11.5px; color: var(--text-2); line-height: 1.45; }
.so-hints { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.so-hint { display: flex; gap: 6px; align-items: flex-start; font-size: 12px; line-height: 1.45; color: var(--text-2); }
.so-hint .so-ic { margin-top: 2px; color: var(--text-3); }
.so-hint-warn, .so-hint-warn .so-ic { color: var(--amber); }
.so-field-error { display: flex; flex-direction: column; gap: 2px; }
.so-err-detail { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); overflow-wrap: anywhere; }
.so-warn { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; margin: 4px 0 12px; background: var(--amber-lt); border: 1px solid var(--amber-bd); border-left: 3px solid var(--amber); border-radius: var(--radius-sm); font-size: 12.5px; line-height: 1.5; color: var(--text-1); }
.so-warn .so-ic { color: var(--amber); margin-top: 2px; }

/* ── Entry editor blocks (general / auth / security tabs) ── */
.so-editor-block { margin-bottom: 14px; }
.so-editor-block.so-backend-tls { margin-top: -6px; padding: 10px 12px; background: var(--bg-base); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.so-editor-block.so-locked > *:not(.so-editor-hint) { opacity: 0.5; pointer-events: none; }
.so-editor-block.so-locked .toggle { cursor: not-allowed; }
.so-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; background: var(--bg-base); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.so-switch-row > label { display: flex; flex-direction: column; min-width: 0; cursor: pointer; }
.so-switch-title { font-size: 13px; font-weight: 600; color: var(--text-1); }
.so-switch-desc { font-size: 11px; color: var(--text-2); margin-top: 2px; line-height: 1.4; }
.so-check { display: inline-flex; align-items: flex-start; gap: 8px; cursor: pointer; user-select: none; }
.so-check input { accent-color: var(--accent); margin: 2px 0 0; flex-shrink: 0; }
.so-check input:disabled { cursor: not-allowed; }
.so-check-text { display: flex; flex-direction: column; min-width: 0; }
.so-check-title { font-size: 13px; font-weight: 600; color: var(--text-1); }
.so-check-desc { font-size: 11px; color: var(--text-2); margin-top: 2px; line-height: 1.4; }
.so-editor-fields { display: flex; flex-direction: column; gap: 10px; padding: 10px 0 2px; }
.so-mtls .so-editor-fields { padding: 10px 2px 2px; }
.so-editor-fields.so-fields-off { opacity: 0.55; }
.so-editor-f { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 12px; }
.so-f-label { font-size: 11px; color: var(--text-3); }
.so-editor-f .form-input { width: 100%; padding: 6px 10px; font-size: 12px; }
.so-editor-f .form-hint { font-size: 11px; line-height: 1.4; }
textarea.so-pem { display: block; width: 100%; min-height: 84px; padding: 6px 10px; font-family: var(--font-mono); font-size: 11px; line-height: 1.45; resize: vertical; white-space: pre; overflow-wrap: normal; overflow-x: auto; color: var(--text-1); background: var(--bg-input, var(--bg-base)); border: 1px solid var(--border); border-radius: var(--radius-xs); }
textarea.so-pem:focus { outline: none; border-color: var(--accent); }
textarea.so-pem:disabled { opacity: 0.6; cursor: not-allowed; }
.so-editor-hint { margin-top: 6px; font-size: 11px; line-height: 1.45; color: var(--text-2); }
.so-editor-hint:empty { display: none; }
.so-editor-hint.so-hint-warn { color: var(--amber); }
.so-locked-hint { color: var(--text-3); }
.so-editor-error { margin-top: 8px; padding: 6px 10px; font-size: 12px; line-height: 1.45; color: var(--red); background: var(--red-lt); border: 1px solid var(--red-bd); border-radius: var(--radius-xs); }
.so-editor-block.so-license-locked { opacity: 0.6; }
input.so-num { width: 110px; flex-shrink: 0; padding: 6px 10px; font-size: 12px; font-family: var(--font-mono); text-align: right; }
.so-warn.so-csp-warning { margin: 0 0 12px; font-size: 11.5px; }

/* ── CAA recommendation (preflight dialog, settings domains) ── */
.so-caa { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; padding: 8px 10px; border-radius: var(--radius-sm); font-size: 12px; line-height: 1.45; color: var(--text-2); }
.so-caa-ok { flex-direction: row; align-items: center; gap: 6px; background: var(--green-lt); border: 1px solid var(--green-bd); color: var(--green); font-weight: 600; }
.so-caa-none { background: var(--bg-panel, var(--bg-card)); border: 1px dashed var(--border); }
.so-caa-head { display: flex; gap: 6px; align-items: flex-start; color: var(--text-1); font-weight: 500; }
.so-caa-head .tg-ic { margin-top: 2px; color: var(--text-3); }
.so-caa-hint { color: var(--text-2); }
.so-caa-rec { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.so-caa-record { flex: 1 1 220px; min-width: 0; padding: 4px 8px; background: var(--bg-base); border: 1px solid var(--border); border-radius: 4px; overflow-wrap: anywhere; user-select: all; color: var(--text-1); }
.btn.so-copy { flex-shrink: 0; }
.btn.so-copy.so-copied { color: var(--green); border-color: var(--green-bd); }
.so-caa.so-caa-compact { margin-top: 6px; padding: 6px 8px; font-family: inherit; font-size: 11px; }
.so-caa-compact .so-caa-record { font-size: 10.5px; }
.so-copy-buf { position: fixed; top: -1000px; left: -1000px; opacity: 0; }

@media (max-width: 900px) {
  .zn-check.so-www-check { margin-left: 0; flex-basis: 100%; }
  .so-switch-row { flex-wrap: wrap; }
  input.so-num { width: 100%; text-align: left; }
}

/* ─── WAF (wf-) ─── */
/* docs/feature-waf.md: WAF page (waf.njk: tiles, filters, event table,
   routes with WAF, locked notice), the exclusion / entry dialogs of
   waf-ui.js, the entry editor block (Security tab) and the domain-dialog
   entry tag. Legacy tokens only, like the zn-/tg-/hs-/so- blocks, so
   app.css and pro.css carry the same rules (aurora overrides surfaces). */
.wf-dialog [hidden], .wf-editor-block [hidden], .wf-banner[hidden], .wf-card [hidden], .wf-field-error[hidden] { display: none !important; }
.wf-ic { flex-shrink: 0; }
.wf-mono { font-family: var(--font-mono); font-size: 11.5px; }
.wf-muted { color: var(--text-3); }
.wf-sub { display: block; margin-top: 3px; font-size: 11px; color: var(--text-3); line-height: 1.4; }
.wf-link { background: none; border: none; padding: 0; font: inherit; font-size: 11.5px; color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.wf-link:hover { color: var(--text-1); }
.wf-f-label { font-size: 11px; color: var(--text-3); }

/* ── Tiles + engine banner ── */
.stats-grid.wf-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 14px; }
.wf-tile { cursor: pointer; user-select: none; }
.wf-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wf-tile.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-lt, var(--bg-hover)); }
.wf-banner { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; margin-bottom: 14px; background: var(--amber-lt); border: 1px solid var(--amber-bd); border-left: 3px solid var(--amber); border-radius: var(--radius-sm); color: var(--text-1); font-size: 13px; line-height: 1.5; }
.wf-banner .wf-ic { color: var(--amber); margin-top: 2px; }

/* ── Cards, filters ── */
.wf-card { min-width: 0; }
.wf-card + .wf-card { margin-top: 14px; }
.wf-card-head { flex-wrap: wrap; gap: 10px; justify-content: flex-start; }
.btn.wf-new-events { margin-left: auto; padding: 4px 10px; font-size: 11.5px; color: var(--accent); border-color: var(--accent); }
.wf-filters { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: flex-end; padding: 10px 16px 12px; border-bottom: 1px solid var(--border); min-width: 0; }
.wf-filter { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.wf-filter-host { flex: 0 1 260px; }
.wf-host-select { width: 100%; min-width: 0; padding: 6px 10px; font-size: 12px; }
.wf-chips { flex: 0 1 auto; }
.wf-chips .filter-chip { white-space: nowrap; }

/* ── Tables ── */
.wf-table-wrap { overflow-x: auto; }
.wf-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
#wf-table { min-width: 980px; }
.wf-routes-table { min-width: 560px; }
.wf-table th { text-align: left; padding: 9px 10px; font-family: var(--font-mono); font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-3); border-bottom: 1px solid var(--border); white-space: nowrap; }
.wf-table td { padding: 9px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.wf-table tbody tr:last-child td { border-bottom: none; }
.wf-table tbody tr:hover td { background: var(--bg-hover); }
.wf-row-blocked td:first-child { box-shadow: inset 3px 0 0 var(--red); }
.wf-row-detected td:first-child { box-shadow: inset 3px 0 0 var(--amber); }
.wf-row-excluded td { color: var(--text-3); }
.wf-cell-time { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-2); }
.wf-date, .wf-clock { display: block; white-space: nowrap; }
.wf-clock { color: var(--text-3); }
.wf-cell-host, .wf-cell-action { white-space: nowrap; }
.wf-host-link { background: none; border: none; padding: 0; font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--text-1); cursor: pointer; text-align: left; overflow-wrap: anywhere; }
.wf-host-link:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.wf-rule { font-family: var(--font-mono); font-size: 11.5px; padding: 1px 5px; background: var(--bg-base); border: 1px solid var(--border); border-radius: 4px; color: var(--text-1); }
.tag.wf-excluded-tag { display: inline-flex; margin-top: 4px; font-size: 10px; }
.wf-cell-message { min-width: 180px; max-width: 40ch; }
.wf-msg { color: var(--text-1); line-height: 1.4; overflow-wrap: anywhere; }
.wf-raw-toggle { display: inline-block; margin-top: 3px; }
/* Row detail (redacted raw record): request, engine, matched data, tags, other hits, JSON */
.wf-row.wf-open td { border-bottom-color: transparent; }
.wf-table tbody tr.wf-detail-tr:hover td { background: transparent; }
.wf-table td.wf-detail-cell { padding-top: 0; }
.wf-detail { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; background: var(--bg-base); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 11.5px; line-height: 1.45; color: var(--text-2); min-width: 0; }
.wf-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px 20px; }
.wf-detail-row { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wf-detail-row.wf-detail-others { grid-column: 1 / -1; }
.wf-detail-code { font-family: var(--font-mono); font-size: 11px; color: var(--text-1); white-space: pre-wrap; word-break: break-all; }
.wf-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.tag.wf-tag { font-family: var(--font-mono); font-size: 10px; white-space: nowrap; }
.wf-others { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.wf-other { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.wf-other .wf-rule { font-size: 10.5px; }
.wf-other-msg { color: var(--text-1); overflow-wrap: anywhere; min-width: 0; }
.wf-sub.wf-other-sev { display: inline; margin: 0; }
.wf-raw-json { margin: 4px 0 0; padding: 8px 10px; background: var(--bg-panel, var(--bg-card)); border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 11px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; max-height: 260px; overflow: auto; color: var(--text-2); }
.wf-cell-client { white-space: nowrap; }
.wf-cell-request { max-width: 30ch; }
.wf-req { display: block; max-width: 26ch; font-family: var(--font-mono); font-size: 11px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wf-actions { display: flex; gap: 6px; }
.btn.wf-act { padding: 4px 9px; font-size: 11.5px; gap: 5px; white-space: nowrap; }
.btn.wf-act svg { width: 12px; height: 12px; }
.btn.wf-act:disabled { opacity: 0.45; cursor: not-allowed; }
.btn.wf-act-icon { width: 30px; height: 30px; padding: 0; justify-content: center; }
.btn.wf-act-icon svg { width: 13px; height: 13px; }
.tag.wf-mode-tag, .tag.wf-action-tag { white-space: nowrap; }
.wf-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wf-num-blocked { color: var(--red); font-weight: 600; }
.wf-route-current td { background: var(--accent-lt, var(--bg-hover)); }
.wf-empty td { text-align: center; color: var(--text-3); padding: 24px 12px; }
.wf-empty.wf-error td { color: var(--red); }
.wf-empty-box { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.wf-empty-title { color: var(--text-1); font-weight: 500; }
.wf-empty-hint { font-size: 12px; }
.wf-reset { margin-top: 4px; }
.wf-backend-missing { display: inline-flex; gap: 8px; align-items: center; color: var(--amber); }
.wf-pager { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 10px 16px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-3); }
.wf-pager:has(.wf-page-info:empty):has(.wf-more[hidden]) { display: none; }
.btn.wf-more { padding: 5px 12px; font-size: 12px; }

/* ── Locked page ── */
.wf-locked { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; color: var(--text-2); }
.wf-locked .wf-ic { color: var(--text-3); margin-top: 2px; }
.wf-locked-title { font-size: 14px; font-weight: 600; color: var(--text-1); margin-bottom: 4px; }
.wf-locked-text { font-size: 13px; line-height: 1.5; }

/* ── Dialogs (exclusions, entry WAF dialog) ── */
.modal.wf-dialog-box { max-width: min(560px, calc(100vw - 32px)); }
.wf-dialog-body { max-height: min(72vh, 640px); overflow-y: auto; }
.wf-dialog-foot { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.wf-dialog .wf-dialog-msg { margin: 0 0 10px; overflow-wrap: anywhere; }
.wf-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; }
.wf-path-input { width: 100%; }
.wf-hint { display: flex; gap: 6px; align-items: flex-start; margin-top: 6px; font-size: 12px; line-height: 1.45; color: var(--text-2); }
.wf-hint .wf-ic { margin-top: 2px; color: var(--text-3); }
.wf-hint-warn, .wf-hint-warn .wf-ic { color: var(--amber); }
.wf-field-error { margin-top: 10px; }
.wf-facts { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.wf-fact { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; font-size: 13px; }
.wf-fact-val { color: var(--text-1); font-weight: 500; }
.btn.wf-events-link { gap: 5px; }

/* ── Entry editor block (Security tab) ── */
.wf-editor-block { margin-bottom: 14px; }
.wf-editor-block.wf-locked > *:not(.wf-editor-hint) { opacity: 0.5; pointer-events: none; }
.wf-editor-block.wf-license-locked { opacity: 0.6; }
.wf-editor-fields { display: flex; flex-direction: column; gap: 6px; padding: 10px 2px 2px; }
.wf-editor-fields.wf-fields-off { opacity: 0.55; }
.wf-editor-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.wf-editor-f { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 12px; }
.wf-editor-f .form-select { width: 100%; padding: 6px 10px; font-size: 12px; }
.wf-editor-hint { font-size: 11px; line-height: 1.45; color: var(--text-2); }
.wf-editor-hint:empty { display: none; }
.wf-editor-block > .wf-editor-hint { margin-top: 6px; }
.wf-editor-hint.wf-hint-warn { color: var(--amber); }
.wf-locked-hint { color: var(--text-3); }
.wf-recommendation { display: flex; gap: 6px; align-items: flex-start; margin-top: 10px; padding: 8px 10px; font-size: 11.5px; line-height: 1.45; color: var(--text-2); background: var(--bg-base); border: 1px dashed var(--border); border-radius: var(--radius-sm); }
.wf-recommendation .wf-ic { margin-top: 1px; color: var(--accent); }
.wf-exclusions { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.wf-exclusions:empty { display: none; }
.wf-excl-list { display: flex; flex-direction: column; gap: 4px; }
.wf-excl-row { display: flex; align-items: center; gap: 8px; padding: 5px 8px; background: var(--bg-base); border: 1px solid var(--border); border-radius: var(--radius-sm); min-width: 0; }
.tag.wf-excl-kind { font-size: 10px; white-space: nowrap; }
.wf-excl-value { font-family: var(--font-mono); font-size: 12px; color: var(--text-1); overflow-wrap: anywhere; min-width: 0; }
.wf-excl-row .zn-ibtn { width: 24px; height: 24px; }
.wf-excl-empty { padding: 7px 10px; font-size: 12px; color: var(--text-3); border: 1px dashed var(--border); border-radius: var(--radius-sm); }
.wf-excl-add-row { display: flex; gap: 6px; align-items: stretch; flex-wrap: wrap; }
.wf-excl-type { flex: 0 0 110px; padding: 6px 8px; font-size: 12px; }
.wf-excl-input { flex: 1 1 160px; min-width: 0; padding: 6px 10px; font-size: 12px; }
.btn.wf-excl-add { padding: 6px 10px; font-size: 12px; gap: 4px; }
.wf-events-link { display: inline-block; margin-top: 8px; font-size: 12px; color: var(--accent); text-decoration: none; }
.wf-events-link:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ── Domain dialog entry tag ── */

@media (max-width: 900px) {
  .wf-filter-host { flex: 1 1 100%; }
}
@media (max-width: 600px) {
  .stats-grid.wf-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .wf-editor-row { grid-template-columns: 1fr; }
  .wf-filters { padding: 10px 12px; }
  .wf-pager { padding: 10px 12px; }
}


/* ============================================================================
 * §2 Aurora — theme tokens and component overrides (was public/css/aurora.css)
 * ============================================================================ */

/* =============================================================================
   GateControl — "Aurora" Theme (Redesign)
   Working name: aurora  ·  Dark "Midnight" + Light "Papier" via [data-theme]
   -----------------------------------------------------------------------------
   IMPLEMENTATION NOTE
   This stylesheet is structured to drop into production as public/css/aurora.css
   (theme name is a placeholder — rename consistently). It mirrors pro.css's
   strategy: define a fresh design-token palette, then alias the LEGACY variable
   names (--text-1, --bg-card, --accent, --border, --radius, --font-ui, …) onto
   the new palette so existing njk markup that references those variables renders
   in this theme with little to no change.

   Component selectors use the EXACT production class names
   (.btn/.btn-primary, .card, .modal-overlay/.modal, .nav-item, .form-group,
   .toggle, .tabs/.tab, .tag, .topbar-*) so existing partials lift directly.
   Selectors marked "NEW (aurora)" are theme-specific additions (data-viz,
   toasts, app-shell grid) that production must add CSS for.

   Companion files:
     · 2026-06-21-admin-redesign-mockup.html         (clickable reference)
     · 2026-06-21-admin-redesign-implementation-guide.md
   ========================================================================== */

/* ----------------------------------------------------------------------------
   0 · FONTS
   Mockup loads these via Google Fonts in the HTML <head>.
   PRODUCTION: self-host (see implementation guide §Fonts).
   --------------------------------------------------------------------------- */

:root{
  --r:18px; --r-sm:12px;            /* aurora component radii (large/medium) */
  --font-display:"Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-body:"Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-mono:"JetBrains Mono", ui-monospace, monospace;
  --sidebar-w:250px; --topbar-h:62px; --nav-h:62px;

  /* ---- LEGACY ALIASES (map old default/pro var names → aurora tokens) ----
     These let existing markup (var(--text-1), var(--bg-card), var(--accent)…)
     render correctly in aurora. CSS vars resolve lazily, so referencing the
     per-theme tokens from :root is fine — they pick up the active [data-theme]. */
  --bg-base:    var(--bg);
  --bg-body:    var(--bg);
  --bg-panel:   var(--surface);
  --bg-card:    var(--surface-2);
  --bg-sidebar: var(--surface);
  --bg-topbar:  var(--surface);
  --bg-hover:   var(--surface-3);
  --bg-input:   var(--surface);
  --bg-active:  var(--surface-2);
  --bg-overlay: rgba(4,7,11,.62);
  --border:     var(--line);
  --border-hi:  var(--line-2);
  --border-light: var(--line);
  --border-input: var(--line-2);
  --border-focus: var(--teal);
  --text-1:     var(--text);     --text-primary:   var(--text);
  --text-2:     var(--muted);    --text-secondary: var(--muted);
  --text-3:     var(--faint);    --text-muted:     var(--faint);
  --text-inverse: var(--btn-text);
  --accent:     var(--teal);
  --accent-hover: var(--teal-dim);
  --accent-lt:  var(--teal-soft); --accent-light: var(--teal-soft);
  --accent-md:  var(--teal-soft); --accent-lighter: var(--teal-soft);
  --accent-border: var(--teal-dim);
  --green-lt:   var(--green-bg);  --green-light: var(--green-bg);
  --green-border: var(--green-bd);
  --red-lt:     var(--red-bg);    --red-light: var(--red-bg);
  --red-border: var(--red-bd);
  --amber-lt:   var(--amber-bg);  --amber-light: var(--amber-bg);
  --amber-bd:   var(--amber-bd);
  --blue-lt:    var(--blue-bg);   --blue-light: var(--blue-bg);
  --blue-border: var(--blue-bd);
  --purple-lt:  var(--purple-bg);
  --font-ui:    var(--font-body);
  --font-sans:  var(--font-body);
  /* --font-display & --font-mono already defined above */
  --radius:     12px; --radius-sm:8px; --radius-xs:6px;
  --radius-md:  10px; --radius-lg:14px; --radius-xl:18px; --radius-full:9999px;
  --shadow-md:  0 10px 24px -14px rgba(0,0,0,.6);

  /* --- additional pro.css var aliases (close leaks) --- */
  --accent-text: var(--teal-dim);
  --green-text: var(--green); --red-text: var(--red);
  --amber-text: var(--amber); --blue-text: var(--blue); --purple-text: var(--purple);
  --text-link: var(--teal);
  --bg-code: var(--surface-3); --bg-badge: var(--surface-3);
  --bg-card-hover: var(--surface-3);
  --cyan: var(--teal); --cyan-light: var(--teal-soft);
  /* close remaining pro.css leaks */
  --bg-input-focus: var(--surface);   /* pro.css uses #fff; aurora uses surface */
  --purple-light:   var(--purple-bg); /* pro.css: #F5F3FF — used by .tag-purple/.badge-purple */
  --amber-border:   var(--amber-bd);  /* pro.css: #FDE68A — used by .btn-amber */
  --purple-bd:      var(--purple-border); /* fills an aurora vocab gap */
}

/* ----------------------------------------------------------------------------
   1 · THEME TOKENS — two modes (palette 1:1 from the portal landing mockup)
   --------------------------------------------------------------------------- */
[data-theme="dark"]{
  --bg:#0a0e14; --bg-2:#0c1219;
  --surface:#111a24; --surface-2:#16212e; --surface-3:#1b2836;
  --chip:rgba(255,255,255,.03);
  --line:rgba(255,255,255,.07); --line-2:rgba(255,255,255,.12);
  --text:#e9eff6; --muted:#90a1b3; --faint:#5f6f7e;
  --teal:#34dcc6; --teal-dim:#1f9c8e; --teal-soft:rgba(52,220,198,.12);
  --coral:#ff9d6c; --coral-dim:#cf6f45;
  --coral-bg:rgba(255,157,108,.10); --coral-bd:rgba(255,157,108,.30);
  --amber:#f5c451; --amber-bg:rgba(245,196,81,.10); --amber-bd:rgba(245,196,81,.30);
  --green:#4ade80; --green-bg:rgba(74,222,128,.10); --green-bd:rgba(74,222,128,.25);
  --red:#ff6b6b;   --red-bg:rgba(255,107,107,.10);  --red-bd:rgba(255,107,107,.28);
  --blue:#7aa2ff;  --blue-bg:rgba(122,162,255,.10); --blue-bd:rgba(122,162,255,.30);
  --purple:#b89cff; --purple-bg:rgba(184,156,255,.10); --purple-border:rgba(184,156,255,.28);
  --btn-text:#04201d;
  --glow1:rgba(52,220,198,.10); --glow2:rgba(255,157,108,.08); --grain:.035;
  --shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 18px 40px -22px rgba(0,0,0,.9);
  --modal-shadow:0 40px 120px -30px rgba(0,0,0,.85);
}
[data-theme="light"]{
  --bg:#f3efe6; --bg-2:#ece6d9;
  --surface:#fffdf8; --surface-2:#f8f3ea; --surface-3:#f0e9db;
  --chip:rgba(60,45,25,.04);
  --line:rgba(60,45,25,.10); --line-2:rgba(60,45,25,.17);
  --text:#2c2720; --muted:#6e6456; --faint:#766b59;
  --teal:#0e9b8a; --teal-dim:#0b7d70; --teal-soft:rgba(14,155,138,.12);
  --coral:#d9602f; --coral-dim:#b14d24;
  --coral-bg:rgba(217,96,47,.10); --coral-bd:rgba(217,96,47,.30);
  --amber:#b5811f; --amber-bg:rgba(181,129,31,.10); --amber-bd:rgba(181,129,31,.30);
  --green:#15924f; --green-bg:rgba(21,146,79,.10); --green-bd:rgba(21,146,79,.28);
  --red:#d23b3b;   --red-bg:rgba(210,59,59,.08);   --red-bd:rgba(210,59,59,.28);
  --blue:#3858c4;  --blue-bg:rgba(56,88,196,.08); --blue-bd:rgba(56,88,196,.28);
  --purple:#7a4fd0; --purple-bg:rgba(122,79,208,.08); --purple-border:rgba(122,79,208,.25);
  --btn-text:#ffffff;
  --glow1:rgba(14,155,138,.10); --glow2:rgba(217,96,47,.09); --grain:.02;
  --shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 16px 34px -24px rgba(80,60,30,.5);
  --modal-shadow:0 40px 110px -28px rgba(80,60,30,.5);
}

/* ----------------------------------------------------------------------------
   2 · BASE
   --------------------------------------------------------------------------- */
*{box-sizing:border-box}
html,body{margin:0; height:100%}
body{
  font-family:var(--font-body); color:var(--text); background:var(--bg);
  -webkit-font-smoothing:antialiased; line-height:1.5; min-height:100vh;
  transition:background-color .35s ease, color .35s ease;
  background-image:
    radial-gradient(1100px 600px at 88% -10%, var(--glow1), transparent 60%),
    radial-gradient(900px 520px at -5% 4%, var(--glow2), transparent 55%),
    linear-gradient(180deg, var(--bg), var(--bg-2));
  background-attachment:fixed;
}
body::before{ /* film grain — NEW (aurora) */
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:var(--grain);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
::selection{background:var(--teal); color:var(--btn-text)}
a{color:inherit}

/* ----------------------------------------------------------------------------
   3 · APP SHELL — NEW (aurora) grid; topbar/sidebar use production class names
   --------------------------------------------------------------------------- */
.app{position:relative; z-index:1; min-height:100vh; display:grid;
  grid-template-columns:var(--sidebar-w) 1fr; grid-template-rows:var(--topbar-h) 1fr;
  grid-template-areas:"brand topbar" "side main";}

/* brand corner */
.app-brand{grid-area:brand; display:flex; align-items:center; gap:11px; padding:0 18px;
  font-family:var(--font-display); font-weight:800; letter-spacing:-.02em; font-size:17px;
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);}
.app-brand .mark{width:30px;height:30px;border-radius:9px;display:grid;place-items:center; flex:0 0 auto;
  background:linear-gradient(145deg,var(--teal),var(--teal-dim)); color:var(--btn-text); box-shadow:0 6px 18px -8px var(--teal-dim)}
.app-brand .mark svg{width:17px;height:17px}
.app-brand .nm small{color:var(--faint); font-weight:500}

/* topbar (production: .topbar, .topbar-* ) */
.topbar{grid-area:topbar; display:flex; align-items:center; gap:14px; padding:0 20px;
  border-bottom:1px solid var(--line); background:linear-gradient(180deg,var(--surface),transparent); backdrop-filter:blur(6px)}
.sidebar-toggle{display:none; width:38px;height:38px;border-radius:11px;border:1px solid var(--line);background:var(--chip);color:var(--muted);
  place-items:center;cursor:pointer}
.sidebar-toggle svg{width:22px;height:22px}
.page-crumb{font-family:var(--font-display); font-weight:700; font-size:15px; letter-spacing:-.01em}
.page-crumb small{color:var(--faint); font-weight:500; font-family:var(--font-body); margin-left:8px; font-size:12.5px}
.topbar-spacer{flex:1}
.topbar-status{display:flex; align-items:center; gap:9px; padding:6px 12px; border:1px solid var(--line);
  background:var(--chip); border-radius:999px; font-size:12.5px; color:var(--muted)}
.pulse-dot{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(74,222,128,.55);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(74,222,128,.5)}70%{box-shadow:0 0 0 7px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}}
.topbar-status.inactive{color:var(--red); background:var(--red-bg); border-color:var(--red-bd)}
.topbar-status.inactive .pulse-dot{background:var(--red); animation:none; box-shadow:none}

.icon-btn{width:38px;height:38px;border-radius:11px;border:1px solid var(--line);background:var(--chip);color:var(--muted);
  display:grid;place-items:center;cursor:pointer;transition:.18s; flex:0 0 auto}
.icon-btn:hover{color:var(--text);border-color:var(--line-2);transform:translateY(-1px)}
.icon-btn svg{width:18px;height:18px}
[data-theme="dark"] .ic-sun{display:block} [data-theme="dark"] .ic-moon{display:none}
[data-theme="light"] .ic-sun{display:none} [data-theme="light"] .ic-moon{display:block}

.topbar-lang{display:flex; gap:2px; background:var(--surface-3); border:1px solid var(--line); border-radius:9px; padding:3px}
.lang-btn{border:0;background:transparent;color:var(--muted);font-family:var(--font-mono);font-weight:700;font-size:11px;
  padding:4px 8px;border-radius:6px;cursor:pointer;transition:.15s; text-transform:uppercase}
.lang-btn.active{background:var(--surface); color:var(--text)}

.topbar-profile{position:relative}
.topbar-avatar{width:38px;height:38px;border-radius:11px;border:1px solid var(--line-2);cursor:pointer;display:grid;place-items:center;
  font-family:var(--font-display);font-weight:800;font-size:14px;color:var(--btn-text);
  background:linear-gradient(145deg,var(--coral),var(--coral-dim));transition:.18s}
.topbar-avatar:hover{transform:translateY(-1px)}
.topbar-dropdown{position:absolute; right:0; top:46px; min-width:190px; background:var(--surface); border:1px solid var(--line-2);
  border-radius:var(--r-sm); box-shadow:var(--modal-shadow); padding:7px; display:none; z-index:60}
.topbar-dropdown.open{display:block; animation:pop .16s ease}
@keyframes pop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.topbar-dropdown-header{padding:8px 10px 10px; border-bottom:1px solid var(--line); margin-bottom:6px}
.topbar-dropdown-header b{display:block; font-size:13.5px} .topbar-dropdown-header span{font-size:12px;color:var(--faint)}
.topbar-dropdown-item{display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px; font-size:13px; text-decoration:none; color:var(--text); cursor:pointer; width:100%; border:0; background:transparent; font-family:var(--font-body); text-align:left}
.topbar-dropdown-item:hover{background:var(--surface-3)}
.topbar-dropdown-item svg{width:16px;height:16px;color:var(--muted)}
.topbar-dropdown-divider{height:1px; background:var(--line); margin:6px 4px}
.topbar-dropdown-logout{color:var(--red)} .topbar-dropdown-logout svg{color:var(--red)}

/* sidebar (production: .sidebar, .nav-item, .nav-section-label, .nav-badge) */
.sidebar{grid-area:side; border-right:1px solid var(--line); padding:16px 12px 24px; overflow-y:auto;
  display:flex; flex-direction:column; gap:3px; background:linear-gradient(180deg,var(--surface),transparent 40%); position:static}
.nav-section-label{font-size:10.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--faint); font-weight:700; padding:14px 12px 6px}
.nav-section-label:first-child{padding-top:2px}
.nav-item{display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:10px; cursor:pointer;
  color:var(--muted); font-size:13.5px; font-weight:500; border:1px solid transparent; transition:.15s; position:relative; text-decoration:none}
.nav-item:hover{background:var(--chip); color:var(--text)}
.nav-item svg{width:18px;height:18px; flex:0 0 auto}
.nav-item.active{background:var(--surface-2); color:var(--text); border-color:var(--line); font-weight:600}
.nav-item.active::before{content:""; position:absolute; left:-12px; top:50%; transform:translateY(-50%);
  width:3px; height:20px; border-radius:0 3px 3px 0; background:linear-gradient(180deg,var(--teal),var(--teal-dim))}
.nav-badge{margin-left:auto; font-family:var(--font-mono); font-size:11px; font-weight:700; padding:1px 7px; border-radius:999px;
  background:var(--surface-3); color:var(--muted)}
.nav-badge.green{background:var(--green-bg); color:var(--green); border:1px solid var(--green-bd)}
.nav-badge.coral{color:var(--coral); background:rgba(255,157,108,.10); border:1px solid var(--coral-dim)}

/* main */
.main{grid-area:main; overflow-y:auto; padding:26px 30px 60px}
.page{display:none}
.page.active{display:block; animation:rise .5s cubic-bezier(.2,.7,.2,1)}
@keyframes rise{from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none}}

/* ----------------------------------------------------------------------------
   4 · PAGE HEADER (production: .page-header/.page-eyebrow/.page-title/.page-sub)
   --------------------------------------------------------------------------- */
.page-header{display:flex; align-items:flex-end; gap:16px; margin-bottom:22px; flex-wrap:wrap}
.page-eyebrow{font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--teal); font-weight:700; margin-bottom:6px}
.page-title{font-family:var(--font-display); font-weight:800; letter-spacing:-.025em; font-size:clamp(22px,3vw,30px); margin:0; line-height:1.05}
.page-sub{margin:7px 0 0; color:var(--muted); font-size:14px; max-width:60ch}
.page-header .page-actions{margin-left:auto; display:flex; gap:10px; align-items:center}

/* ----------------------------------------------------------------------------
   5 · BUTTONS (production: .btn + .btn-primary/.btn-ghost/.btn-secondary/.btn-danger/.btn-sm)
   --------------------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:11px;cursor:pointer;
  font-family:var(--font-body);font-weight:600;font-size:13.5px;border:1px solid var(--line); background:var(--chip); color:var(--text); transition:transform .15s ease, filter .15s, background .15s; text-decoration:none}
.btn:hover{transform:translateY(-1px)}
.btn svg{width:16px;height:16px}
.btn-primary{color:var(--btn-text); border:0; background:linear-gradient(145deg,var(--teal),var(--teal-dim)); box-shadow:0 10px 24px -12px var(--teal-dim)}
.btn-primary:hover{filter:brightness(1.06)}
.btn-secondary{background:var(--surface-3)}
.btn-ghost{background:transparent}
.btn-danger{color:var(--red); border-color:var(--red-bd); background:var(--red-bg)}
.btn-danger.solid{color:#fff; background:linear-gradient(145deg,var(--red),#b8302f); border:0}
.btn-sm{padding:6px 11px; font-size:12.5px; border-radius:9px}
.btn-block{width:100%; justify-content:center}

/* ----------------------------------------------------------------------------
   6 · CARDS (production: .card/.card-head/.card-title/.card-body) + grid
   --------------------------------------------------------------------------- */
.grid{display:grid; grid-template-columns:repeat(12,1fr); gap:18px}
.card{background:linear-gradient(180deg,var(--surface),var(--surface-2));
  border:1px solid var(--line); border-radius:var(--r); padding:20px; box-shadow:var(--shadow); position:relative; overflow:hidden}
.card::after{content:"";position:absolute;inset:0 0 auto 0;height:1px;background:linear-gradient(90deg,transparent,var(--line-2),transparent)}
.card-title{margin:0 0 2px; font-family:var(--font-display); font-weight:700; letter-spacing:-.01em; font-size:15px; display:flex; align-items:center; gap:9px}
.card-title .ic{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:var(--surface-3);color:var(--teal); flex:0 0 auto}
.card-title .ic svg{width:15px;height:15px}
.card-title .card-sub{color:var(--faint); font-size:12px; margin-left:auto; font-weight:500; font-family:var(--font-body)} .span4{grid-column:span 4} .span5{grid-column:span 5}
.span6{grid-column:span 6} .span7{grid-column:span 7} .span8{grid-column:span 8} .span12{grid-column:span 12}

/* ----------------------------------------------------------------------------
   7 · TABLES (production styles <table> directly; .data-table = aurora wrapper)
   --------------------------------------------------------------------------- */
.data-table{width:100%; border-collapse:collapse; font-size:13.5px}
.data-table th{text-align:left; font-weight:600; color:var(--faint); font-size:11px; text-transform:uppercase; letter-spacing:.06em;
  padding:12px 14px; vertical-align:middle; border-bottom:1px solid var(--line)}
.data-table td{padding:13px 14px; border-bottom:1px solid var(--line); vertical-align:middle}
.data-table tr:last-child td{border-bottom:0}
.data-table tbody tr:hover td{background:var(--chip)}
.data-table .mono{font-family:var(--font-mono); font-size:12.5px; color:var(--muted)}
.data-table .cell-name{font-weight:600}
/* RDP modal segmented selectors (protocol + SSH auth-mode) — styled like the
   .toggle-group segmented control; JS toggles .active on the chosen option. */
.rdp-proto-seg, .rdp-auth-seg{display:inline-flex; gap:2px; background:var(--surface-3); border:1px solid var(--line); border-radius:10px; padding:3px; flex-wrap:wrap}
.rdp-proto-opt, .rdp-auth-opt{border:0; background:transparent; color:var(--muted); font-family:var(--font-body); font-weight:600; font-size:12.5px; padding:7px 14px; border-radius:7px; cursor:pointer; transition:.15s}
.rdp-proto-opt:hover, .rdp-auth-opt:hover{color:var(--text)}
.rdp-proto-opt.active, .rdp-auth-opt.active{background:var(--surface); color:var(--text); box-shadow:0 2px 8px -4px rgba(0,0,0,.35)}
/* Batch-select checkbox column (shown only in batch mode) */
.data-table .batch-checkbox{width:16px; height:16px; accent-color:var(--teal); cursor:pointer; vertical-align:middle}
.data-table.batch-mode tbody tr[data-route-id]{cursor:pointer}
.row-actions{display:flex; gap:6px; justify-content:flex-end}
.icon-action{width:30px;height:30px;border-radius:8px;border:1px solid var(--line);background:var(--chip);color:var(--muted);
  display:grid;place-items:center;cursor:pointer;transition:.15s}
.icon-action:hover{color:var(--text);border-color:var(--line-2)}
.icon-action.danger:hover{color:var(--red);border-color:var(--red-bd)}
.icon-action svg{width:15px;height:15px}

/* ----------------------------------------------------------------------------
   8 · FORMS (production: .form-group/.form-label/.form-input/.form-select/.form-hint)
   --------------------------------------------------------------------------- */
.form-group{margin-bottom:15px}
.form-group:last-child{margin-bottom:0}
.form-label{display:block; font-size:12.5px; font-weight:600; color:var(--muted); margin-bottom:7px}
.form-label .req{color:var(--coral)}
.form-hint{display:block; font-size:11.5px; color:var(--faint); margin-top:6px}
.form-input,.form-select,.form-textarea{width:100%; padding:10px 12px; border:1px solid var(--line-2); background:var(--surface);
  border-radius:10px; color:var(--text); font-family:var(--font-body); font-size:13.5px; outline:0; transition:.15s}
.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--teal); box-shadow:0 0 0 3px var(--glow1)}
.form-input.mono,.form-textarea.mono{font-family:var(--font-mono); font-size:12.5px}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.form-check{display:flex; align-items:center; gap:10px; padding:11px 12px; border:1px solid var(--line); border-radius:10px; cursor:pointer; font-size:13px}
.form-check:hover{border-color:var(--line-2)}

/* native input focus — pro.css hardcodes rgba(37,99,235,.1) blue; override with aurora teal */
input[type=text]:focus, input[type=search]:focus, input[type=password]:focus,
input[type=email]:focus, input[type=number]:focus, input[type=time]:focus,
input[type=date]:focus, select:focus {
  border-color:var(--teal); box-shadow:0 0 0 3px var(--glow1)
}

/* .btn-warning — amber warning variant (used e.g. in peer-edit modal) */
.btn-warning{background:var(--amber-bg); color:var(--amber); border-color:var(--amber-bd)}
.btn-warning:hover{background:var(--amber); color:#fff; border-color:var(--amber)}

/* .alert-warning — amber inline alert (used in rdp.njk feature-locked notice) */
.alert-warning{background:var(--amber-bg); color:var(--amber); border-color:var(--amber-bd); border-left:3px solid var(--amber)}

/* ----------------------------------------------------------------------------
   9 · MODALS (production: .modal-overlay/.modal/.modal-head/.modal-title/
       .modal-close/.modal-body/.modal-foot, .modal-wide/.modal-sm)
       Production toggles inline display:none → display:flex via openModal().
   --------------------------------------------------------------------------- */
.modal-overlay{position:fixed; inset:0; background:var(--bg-overlay); backdrop-filter:blur(4px); z-index:100;
  display:none; align-items:flex-start; justify-content:center; padding:48px 18px; overflow-y:auto}
[data-theme="light"] .modal-overlay{background:rgba(60,45,25,.32)}
.modal-overlay.open{display:flex; animation:fade .18s ease}   /* mockup uses .open; prod uses inline display:flex */
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{width:100%; max-width:520px; background:linear-gradient(180deg,var(--surface),var(--surface-2));
  border:1px solid var(--line-2); border-radius:var(--r); box-shadow:var(--modal-shadow); overflow:hidden;
  animation:lift .22s cubic-bezier(.2,.7,.2,1)}
@keyframes lift{from{opacity:0; transform:translateY(16px) scale(.98)}to{opacity:1; transform:none}}
.modal.modal-sm{max-width:400px} .modal.modal-wide{max-width:720px}
.modal-head{display:flex; align-items:center; gap:12px; padding:18px 20px; border-bottom:1px solid var(--line)}
.modal-title{font-family:var(--font-display); font-weight:700; font-size:16px; letter-spacing:-.01em}
.modal-title small{display:block; color:var(--faint); font-size:12px; font-weight:500; font-family:var(--font-body)}
.modal-head .mi{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:var(--surface-3);color:var(--teal); flex:0 0 auto}
.modal-head .mi svg{width:17px;height:17px}
.modal-head .mi.danger{color:var(--red); background:var(--red-bg)}
.modal-close{margin-left:auto; width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:var(--chip);color:var(--muted);
  display:grid;place-items:center;cursor:pointer;transition:.15s; flex:0 0 auto; font-size:18px; line-height:1}
.modal-close:hover{color:var(--text);border-color:var(--line-2)}
.modal-close svg{width:16px;height:16px}
.modal-body{padding:20px; max-height:62vh; overflow-y:auto}
.modal-foot{display:flex; gap:10px; justify-content:flex-end; padding:16px 20px; border-top:1px solid var(--line); background:var(--chip)}

/* ----------------------------------------------------------------------------
   10 · TABS / TOGGLES / SEGMENTED (production: .tabs/.tab/.active, .toggle/.on,
        route-edit: .edit-route-panel[data-panel] + .tab[data-edit-tab])
   --------------------------------------------------------------------------- */
.tabs{display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:18px; flex-wrap:wrap}
.tab{padding:9px 14px; font-size:13.5px; font-weight:600; color:var(--muted); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; background:transparent; border-top:0; border-left:0; border-right:0; font-family:var(--font-body)}
.tab:hover{color:var(--text)}
.tab.active{color:var(--text); border-bottom-color:var(--teal)}
/* compact tab bar inside modals (route-edit) */
.tabs.edit-route-tabs{border-bottom:0; gap:3px; background:var(--surface-3); border:1px solid var(--line); border-radius:10px; padding:3px}
.tabs.edit-route-tabs .tab{padding:7px 12px; font-size:12.5px; border-radius:7px; border:0; margin:0}
.tabs.edit-route-tabs .tab.active{background:var(--surface); color:var(--text); border:0}
/* The shared route-edit JS toggles panels via inline style.display (showing the
   active one with display:'' → falls back to the stylesheet). So the base must
   NOT be display:none, or no panel ever shows. Inactive panels carry inline
   display:none from the template; the fade runs each time one is revealed. */
.edit-route-panel{animation:fade .2s ease}

.toggle{width:42px;height:24px;border-radius:999px;background:var(--surface-3);border:1px solid var(--line-2);position:relative;cursor:pointer;transition:.2s; flex:0 0 auto}
.toggle::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--muted);transition:.2s}
.toggle.on{background:linear-gradient(145deg,var(--teal),var(--teal-dim));border-color:transparent}
/* transform:none resets pro.css's .toggle.on::after translateX(18px) — without
   it the knob is shifted left:20px AND +18px, landing outside the switch. */
.toggle.on::after{left:20px;transform:none;background:#fff}

/* segmented button group (production: .toggle-group/.toggle-btn/.on) */
.toggle-group{display:inline-flex; gap:2px; background:var(--surface-3); border:1px solid var(--line); border-radius:10px; padding:3px}
.toggle-btn{border:0; background:transparent; color:var(--muted); font-family:var(--font-body); font-weight:600; font-size:12.5px;
  padding:6px 12px; border-radius:7px; cursor:pointer; transition:.15s}
.toggle-btn.on,.toggle-btn.active{background:var(--surface);color:var(--text); box-shadow:0 2px 8px -4px rgba(0,0,0,.35)}

/* ----------------------------------------------------------------------------
   11 · TAGS / BADGES / STATUS DOTS (production: .tag/.tag-*, .status-dot/.online…)
   --------------------------------------------------------------------------- */
.tag{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:12px;padding:3px 9px;border-radius:999px;border:1px solid var(--line); font-family:var(--font-body); white-space:nowrap}
.tag-green{color:var(--green); background:var(--green-bg); border-color:var(--green-bd)}
.tag-grey{color:var(--faint); background:var(--chip)}
.tag-amber{color:var(--amber); background:var(--amber-bg); border-color:var(--amber-bd)}
.tag-red{color:var(--red); background:var(--red-bg); border-color:var(--red-bd)}
.tag-blue{color:var(--blue); background:var(--blue-bg); border-color:rgba(122,162,255,.3)}
.tag-dot::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}

/* ----------------------------------------------------------------------------
   12 · SEARCH / TOOLBAR — NEW (aurora)
   --------------------------------------------------------------------------- */
.toolbar{display:flex; align-items:center; gap:10px; margin-bottom:18px; flex-wrap:wrap}
.search-box{flex:1; min-width:200px; display:flex; align-items:center; gap:9px; padding:9px 13px; border:1px solid var(--line);
  background:var(--surface); border-radius:11px; color:var(--muted)}
.search-box svg{width:16px;height:16px; flex:0 0 auto}
.search-box input{border:0; background:transparent; outline:0; color:var(--text); font-family:var(--font-body); font-size:13.5px; width:100%}

/* ----------------------------------------------------------------------------
   13 · DATA-VIZ — NEW (aurora): kpi, donut, chart, toplist, resbar (peers, gateways, Pi-hole pages)
   --------------------------------------------------------------------------- */
.kpi{display:flex; flex-direction:column; gap:10px}
.kpi .top{display:flex; align-items:center; gap:10px}
.kpi .ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center; flex:0 0 auto}
.kpi .ic svg{width:18px;height:18px}
.kpi .lab{font-size:12px; color:var(--muted)}
.kpi .val{font-family:var(--font-mono); font-weight:700; font-size:28px; line-height:1; letter-spacing:-.02em}
.kpi .delta{font-size:11.5px; font-weight:600; display:inline-flex; align-items:center; gap:4px}
.kpi .delta.up{color:var(--green)} .kpi .delta.down{color:var(--coral)}

.kv{display:flex; flex-direction:column; gap:12px; margin-top:14px}
.kv .row{display:flex; align-items:center; justify-content:space-between; gap:14px}
.kv .k{color:var(--muted); font-size:13px}
.kv .v{font-family:var(--font-mono); font-size:13px}

.unit-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px}
.unit{background:linear-gradient(180deg,var(--surface),var(--surface-2)); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:16px; transition:.16s; cursor:pointer; position:relative}
.unit:hover{transform:translateY(-2px); border-color:var(--line-2)}
.unit .uh{display:flex; align-items:center; gap:11px; margin-bottom:13px}
.unit .uav{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;color:#fff; flex:0 0 auto}
.unit .uav svg{width:19px;height:19px}
.unit .un{font-weight:600; font-size:14px} .unit .ud{font-size:11.5px; color:var(--faint); font-family:var(--font-mono)}
.unit .urow{display:flex; justify-content:space-between; font-size:12.5px; padding:5px 0; color:var(--muted)}
.unit .urow b{font-family:var(--font-mono); color:var(--text); font-weight:600}
.resbar{height:6px; border-radius:3px; background:var(--surface-3); overflow:hidden; margin-top:4px}
.resbar i{display:block; height:100%; border-radius:3px; background:linear-gradient(90deg,var(--teal-dim),var(--teal))}
.resbar i.hot{background:linear-gradient(90deg,var(--coral-dim),var(--coral))}

.pi-wrap{display:flex; gap:22px; margin-top:16px; align-items:center; flex-wrap:wrap}
.donut-host{position:relative; width:120px;height:120px;flex:0 0 auto}
.donut{width:120px;height:120px;display:block}
.donut .track{stroke:var(--surface-3)} .donut .val{stroke:var(--teal); transition:stroke-dashoffset .8s cubic-bezier(.2,.7,.2,1)}
.donut-center{position:absolute; inset:0; display:grid; place-items:center; text-align:center}
.donut-center .big{font-family:var(--font-mono); font-weight:700; font-size:23px; line-height:1}
.donut-center .cap{font-size:10px; color:var(--faint); text-transform:uppercase; letter-spacing:.08em; margin-top:3px}
.pi-stats{flex:1; min-width:160px; display:flex; flex-direction:column; gap:11px}
.pi-stats .s{display:flex; align-items:baseline; gap:10px}
.pi-stats .s .n{font-family:var(--font-mono); font-weight:700; font-size:19px}
.pi-stats .s .n.blk{color:var(--coral)} .pi-stats .s .t{color:var(--muted); font-size:13px}

.toplist{margin-top:16px; border-top:1px solid var(--line); padding-top:13px}
.toplist .h{font-size:11px; color:var(--faint); text-transform:uppercase; letter-spacing:.08em; margin-bottom:9px}
.toplist ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.toplist li{display:flex; align-items:center; gap:10px; font-size:13px}
.toplist li .d{font-family:var(--font-mono); color:var(--muted); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.toplist li .bar{height:6px; border-radius:3px; background:linear-gradient(90deg,var(--coral-dim),var(--coral))}
.toplist li .cnt{font-family:var(--font-mono); font-size:12px; color:var(--faint); width:40px; text-align:right}

.chart{margin-top:18px; display:flex; align-items:flex-end; gap:8px; height:150px; padding-top:6px}
.chart .col{flex:1; display:flex; flex-direction:column; justify-content:flex-end; gap:3px; height:100%}
.chart .col .bar{width:100%; border-radius:5px 5px 2px 2px; background:linear-gradient(180deg,var(--teal),var(--teal-dim)); transition:height .5s cubic-bezier(.2,.7,.2,1)}
.chart .col .bar.up{background:linear-gradient(180deg,var(--coral),var(--coral-dim))}
.chart .col .lab{font-size:10.5px; color:var(--faint); text-align:center; font-family:var(--font-mono)}

/* log rows — NEW (aurora) */
.log-row{display:flex; align-items:center; gap:13px; padding:11px 12px; border-radius:10px; font-size:13px; border:1px solid transparent}
.log-row:hover{background:var(--chip); border-color:var(--line)}
.log-row .sev{width:8px;height:8px;border-radius:50%; flex:0 0 auto}
.log-row .sev.ok{background:var(--green)} .log-row .sev.warn{background:var(--amber)} .log-row .sev.err{background:var(--red)} .log-row .sev.info{background:var(--blue)}
.log-row .ts{font-family:var(--font-mono); font-size:11.5px; color:var(--faint); width:148px; flex:0 0 auto}
.log-row .msg{flex:1} .log-row .msg b{font-weight:600}
.log-row .src{font-family:var(--font-mono); font-size:11px; color:var(--muted); padding:2px 8px; border:1px solid var(--line); border-radius:999px}

/* severity/status filter: .tab inside .toggle-group for JS compat — override tab underline */
.toggle-group .tab{border-bottom:0;margin-bottom:0;padding:7px 12px;border-radius:7px;font-size:12.5px}
.toggle-group .tab.active{background:var(--surface);color:var(--text);border-bottom-color:transparent;box-shadow:0 2px 8px -4px rgba(0,0,0,.35)}


.feature-lock{display:inline-flex; gap:7px; align-items:center; font-size:12px; color:var(--amber); background:var(--amber-bg); border:1px solid var(--amber-bd); padding:6px 11px; border-radius:999px}
.empty-state{padding:30px; text-align:center; color:var(--faint); font-size:13px; border:1px dashed var(--line-2); border-radius:var(--r-sm)}

/* ----------------------------------------------------------------------------
   14 · TOASTS — NEW (aurora). Production has .flash/.flash-success/.flash-error;
        a toast queue would be a new addition (see implementation guide §JS).
   --------------------------------------------------------------------------- */
.toasts{position:fixed; bottom:22px; right:22px; z-index:200; display:flex; flex-direction:column; gap:10px; align-items:flex-end}
.toast{display:flex; align-items:center; gap:11px; padding:12px 15px; min-width:240px; max-width:340px;
  background:linear-gradient(180deg,var(--surface),var(--surface-2)); border:1px solid var(--line-2); border-radius:12px;
  box-shadow:var(--modal-shadow); font-size:13px; animation:slidein .25s cubic-bezier(.2,.7,.2,1)}
@keyframes slidein{from{opacity:0; transform:translateX(20px)}to{opacity:1; transform:none}}
.toast.out{animation:slideout .25s ease forwards}
@keyframes slideout{to{opacity:0; transform:translateX(20px)}}
.toast .tk{width:26px;height:26px;border-radius:8px;display:grid;place-items:center; flex:0 0 auto; color:var(--green); background:var(--green-bg)}
.toast.err .tk{color:var(--red); background:var(--red-bg)}
.toast .tk svg{width:15px;height:15px}
.toast b{display:block; font-weight:600} .toast span{color:var(--muted); font-size:12px}

.sidebar-overlay{position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:40; display:none}
@media (max-width:980px){
  .app{grid-template-columns:1fr; grid-template-areas:"topbar" "main"}
  .app-brand{display:none}
  .sidebar-toggle{display:grid}
  .sidebar{position:fixed; left:0; top:0; bottom:0; width:260px; z-index:50; transform:translateX(-105%); transition:.25s; background:var(--surface)}
  .sidebar.open{transform:none}
  .sidebar-overlay.visible{display:block}
  .grid > [class*="span"]{grid-column:span 12 !important}
  .main{padding:20px 16px 50px}
  .topbar-lang{display:none}
}
@media (prefers-reduced-motion: reduce){
  *,*::before{transition:none !important; animation:none !important}
  .page.active{opacity:1; transform:none}
}

/* ----------------------------------------------------------------------------
   A-global fixes — Theme-wide color leak overrides (Task 3)
   aurora.css loads after pro.css; every rule here wins by cascade position.
   --------------------------------------------------------------------------- */

/* btn-primary:hover — add teal glow (pro.css only has filter:brightness) */
.btn-primary:hover{box-shadow:0 3px 12px -6px var(--teal-dim)}

/* btn-danger — teal shadow leaks through pro.css; replace with red shadow */
.btn-danger{box-shadow:0 1px 3px var(--red-bd)}
.btn-danger:hover{background:var(--red);border-color:var(--red)}

/* FAB — replace pro.css green/blue rgba literals with teal token */
.fab{box-shadow:0 4px 16px var(--teal-dim)}
.fab:hover{box-shadow:0 6px 20px var(--teal-dim)}
.fab-option-icon{box-shadow:0 2px 8px var(--teal-dim)}

/* Gateway-pool mode badges — replace hardcoded indigo/green with Aurora tokens */
.pool-mode-failover{background:var(--blue-bg);color:var(--blue)}
.pool-mode-load_balancing{background:var(--green-bg);color:var(--green)}

/* gw-toast-pulse — replace blue rgba with teal glow */
@keyframes gw-toast-pulse{
  0%,100%{box-shadow:0 4px 12px rgba(0,0,0,.15),0 0 0 0 var(--teal-soft)}
  50%    {box-shadow:0 4px 12px rgba(0,0,0,.15),0 0 0 5px transparent}
}

/* ----------------------------------------------------------------------------
   B · GATEWAY-specific fixes (Task 4 — theme-branched-JS pilot)
   Aurora fleet cards use .gw.unit; detail sub-cards still use .gw wrapper.
   --------------------------------------------------------------------------- */

/* Strang-A: legacy .gw .kv vertical-stack bleeds into Aurora detail sub-cards.
   Force horizontal (label left / value right) to match .kv .row pattern. */
.gw-fleet .gw .kv{flex-direction:row;gap:0;margin-top:0}

/* .gw-relnotes — bare <a> in detailHead() gets Aurora link styling */
.gw-relnotes{font-size:12px;color:var(--muted);text-decoration:underline;text-underline-offset:2px;opacity:.8}
.gw-relnotes:hover{opacity:1;color:var(--text)}

/* Issue 11: Gateway detail — exactly 3 columns (1/3 each), max 3 side by side; collapse on narrow */
.gw-detail-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media(max-width:1100px){.gw-detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.gw-detail-grid{grid-template-columns:1fr}}
.gw-detail-grid .gw.full{grid-column:1/-1}
/* Fix 3: "Discovered devices" + "Scan targets" at 1/2 width each in their own row */
.gw-half-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;grid-column:1/-1}
@media(max-width:640px){.gw-half-row{grid-template-columns:1fr}}

/* ----------------------------------------------------------------------------
   C · PEERS page — Aurora mockup fidelity (Task P2-3)
   --------------------------------------------------------------------------- */

/* Empty-state for the gateway unit-grid */
.aurora-gw-empty{padding:24px;text-align:center;color:var(--muted);font-size:13px}

/* tag-dot helper used in Aurora status tags on gateway/peer rows.
   Issue 9: text LEFT of dot — suppress ::before, put dot via ::after */
/* pro.css's standalone .tag-dot is a 5px dot; when combined as `tag tag-dot` on
   one element (card status badges) it would force width/height:5px and collapse
   the label. Reset so the text shows; aurora renders the dot via ::after. */
.tag.tag-dot{width:auto;height:auto}
.tag.tag-dot::before{content:none}
.tag.tag-dot::after{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor;margin-left:5px}

/* ----------------------------------------------------------------------------
   D · Wizard modal shells (Task P2-4b) — used by the RDP wizard (rdp.njk).
   --------------------------------------------------------------------------- */

/* Wizard modal size/scroll modifiers */
.modal.modal-xl{max-width:880px}
.modal.modal-wizard{overflow-y:auto; max-height:88vh}
/* Nested .modal-body must not create a second scroll container inside .modal-wizard */
.modal.modal-wizard .modal-body{max-height:none; overflow-y:visible}

/* Wizard head: two-row layout */
.modal-head.wiz-head{flex-direction:column; align-items:stretch; padding-bottom:14px}

/* Wizard foot: prev/back on left, next/save on right */
.modal-foot.wiz-foot{justify-content:space-between; align-items:center; background:var(--surface)}

/* ── Users page (Task P2-5) ─────────────────────────────────────────────────── */

/* Unassigned-tokens banner: replaces the inline-style block on #unassigned-banner */
.banner-amber{
  padding:12px 16px; margin-bottom:16px;
  background:var(--amber-lt); border:1px solid var(--amber-bd);
  border-radius:var(--radius-sm); font-size:13px; color:var(--text-1);
}

/* ── Gateway-Pools page — Aurora mockup fidelity (Task P2-9) ────────────────── */

/* Pool member drag list — override accent/indigo from pro.css with aurora teal token */
.pool-member-row{
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-sm);
  transition:background 120ms ease, opacity 120ms ease;
}
.pool-member-row.drag-over-top{box-shadow:0 -2px 0 0 var(--teal)}
.pool-member-row.drag-over-bottom{box-shadow:0 2px 0 0 var(--teal)}
.pool-member-handle{color:var(--faint); font-size:15px; cursor:grab; padding:0 4px}
.pool-member-position{color:var(--muted); font-family:var(--font-mono); font-size:11px; min-width:22px; text-align:center}
.pool-member-name{flex:1; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* Preset-templates card button grid */
.btn-cooldown-preset{font-size:13px; padding:7px 10px}

/* Pool kv rows: mode badge inside .card-sub stays inline */
.card-sub .pool-mode-badge{font-size:11px; padding:2px 7px; border-radius:999px; font-family:var(--font-mono)}

/* ── RDP page — Aurora mockup fidelity (Task P2-10) ─────────────────────────── */

/* Wizard step indicator — extracted from inline <style nonce> in rdp.njk */
#rdp-wizard-steps{user-select:none}
.rdp-step-dot{
  flex-shrink:0; width:28px; height:28px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:600;
  background:var(--surface-3); color:var(--faint); border:2px solid var(--line);
  transition:background .15s, color .15s, border-color .15s;
}
.rdp-step-line{flex:1; height:2px; background:var(--line); min-width:10px}
.rdp-step-dot.done{
  background:color-mix(in srgb, var(--teal) 15%, transparent);
  color:var(--teal); border-color:var(--teal); cursor:pointer;
}
.rdp-step-dot.done:hover{background:color-mix(in srgb, var(--teal) 28%, transparent)}
.rdp-step-dot.active{
  background:var(--teal); color:#fff; border-color:var(--teal);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--teal) 18%, transparent);
}
.rdp-step-line.done{background:var(--teal)}
#rdp-form > div > [data-wizard-step]{padding-top:4px}
@media(max-width:600px){
  .rdp-step-dot{width:24px; height:24px; font-size:11px; border-width:1.5px}
}

/* Modal shell: override legacy inline styles — use aurora modal sizing tokens */
#rdp-modal.modal.modal-xl{width:880px; max-width:96vw; max-height:90vh; overflow-y:auto}
.modal-head.wiz-head{padding:18px 24px 14px; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--surface); z-index:1}
#rdp-modal .modal-body{padding:20px 24px}
.modal-foot.wiz-foot{padding:16px 24px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:8px; position:sticky; bottom:0; background:var(--surface)}

/* Aurora RDP card grid (built by auroraRenderGrid()) */
/* Issue 12: auto-fill minmax grid — matches .unit-grid sizing on gateways/peers pages */
.rdp-card-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px}

/* --- D2 · Routes KPI strip (zones page, #zn-kpis) --- */
.aurora-routes-kpis{display:flex; gap:10px; flex-wrap:wrap; margin:0 0 18px}
.aurora-routes-kpi{display:flex; align-items:baseline; gap:7px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius-sm); padding:8px 14px}
.aurora-routes-kpi b{font-family:var(--font-display); font-weight:800; font-size:18px; letter-spacing:-.02em}
.aurora-routes-kpi span{font-size:11.5px; color:var(--muted)}
.aurora-routes-kpi.warn b{color:var(--coral)}
.aurora-routes-kpi.dim b{color:var(--faint)}

/* ─── Domain zones (zn-) ─── */
/* Aurora overrides for the zones page. The base zn- block comes from pro.css
   (loaded first); here only surfaces, radii and the Aurora card padding. */
.zn-more:hover { background: var(--surface-3); }
.zn-gw-pill, .zn-affix-sfx { background: var(--chip); border-color: var(--line); }
.zn-ibtn { width: 30px; height: 30px; border-radius: 8px; background: var(--chip); border-color: var(--line); color: var(--muted); box-shadow: none; }
.zn-ibtn:hover, .zn-ibtn[aria-expanded="true"] { color: var(--text); border-color: var(--line-2); background: var(--chip); }
.zn-ibtn svg { width: 15px; height: 15px; }
.zn-menu { background: var(--surface); border-color: var(--line-2); border-radius: var(--r-sm); box-shadow: var(--modal-shadow); }
.zn-menu-item:hover { background: var(--surface-3); }
.zn-name { color: var(--teal); }
.zn-gw-pill.off { color: var(--amber); border-color: var(--amber-bd); background: var(--amber-bg); }
.toolbar.zn-toolbar { margin-bottom: 0; }
.toolbar.zn-toolbar .zn-search { flex: 1 1 240px; min-width: 200px; }
.toolbar.zn-toolbar .search-box input[type=search] { padding: 0; box-shadow: none; }

/* ─── Domains & Routen redesign (rt-) ─── */
/* Page (zones.njk / zones-page.js), "Host bearbeiten" + "Neuer Host"
   (host-dialogs.js), "Domain-Einstellungen" (domain-modal.js) and the entry
   editor (route-edit.njk / entry-editor.js). Aurora tokens only; the light
   theme reuses the profile's contrast inks (--pf-*) because the Papier
   teal/green/red are too light for small text. Stacking: big dialogs
   (.rt-overlay) 1000 < entry editor 1050 < small dialogs (.zn-dialog) 1100
   < popup menu 1200. Touch targets are 44px (40px compact on fine pointers). */
[data-theme="dark"]{
  --rt-teal-ink:var(--pf-teal-ink); --rt-green-ink:var(--pf-green-ink); --rt-red-ink:var(--pf-red-ink);
  --rt-blue-ink:var(--pf-blue-ink); --rt-purple-ink:#c6b0ff; --rt-amber-ink:var(--amber);
  --rt-teal-bd:var(--pf-teal-bd); --rt-input:var(--pf-input); --rt-btn-bg:var(--pf-btn-bg); --rt-muted:#9aaabb;
}
[data-theme="light"]{
  --rt-teal-ink:var(--pf-teal-ink); --rt-green-ink:var(--pf-green-ink); --rt-red-ink:var(--pf-red-ink);
  --rt-blue-ink:var(--pf-blue-ink); --rt-purple-ink:#5f3bb0; --rt-amber-ink:#8a5f12;
  --rt-teal-bd:var(--pf-teal-bd); --rt-input:var(--pf-input); --rt-btn-bg:var(--pf-btn-bg); --rt-muted:var(--muted);
}

/* generic helpers */
.rt-sr{position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.rt-mono{font-family:var(--font-mono); font-weight:600}
.rt-strong{font-weight:700; color:var(--text)}
.rt-muted{color:var(--rt-muted)}
.rt-block{display:block}
.rt-mt{margin-top:6px !important}
.rt-grow{flex:1 1 auto; min-width:0}
.rt-hint{display:block; margin-top:5px; color:var(--rt-muted); font-size:12.5px; line-height:1.45}
.rt-hint-warn{color:var(--rt-amber-ink)}
.rt-hint.rt-err, .rt-err{color:var(--rt-red-ink)}
.rt-hint.rt-ok, .rt-ok{color:var(--rt-green-ink)}
.rt-err-box{display:flex; align-items:flex-start; gap:8px; margin-top:12px; padding:10px 12px; border-radius:12px; border:1px solid var(--red-bd); background:var(--red-bg); font-size:13px; font-weight:600}
.rt-err-row{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-top:10px; padding:8px 10px 8px 12px; border-radius:12px; border:1px solid var(--red-bd); background:var(--red-bg); font-size:13px; font-weight:600}
.rt-err-row[hidden]{display:none}
.rt-link, .rt-link-btn{color:var(--rt-teal-ink); font-weight:700; text-decoration:none}
.rt-link:hover, .rt-link-btn:hover{text-decoration:underline}
.rt-link-btn{display:inline-flex; align-items:center; align-self:flex-start; min-height:32px; padding:0; border:0; background:none; font:inherit; font-weight:700; text-align:left; cursor:pointer}
.rt-empty{margin:0; padding:16px; border-radius:12px; border:1px dashed var(--line-2); color:var(--rt-muted); text-align:center; font-size:13px}
:where(.rt-page-head, .rt-toolbar, .rt-zones, .rt-dlg, .rt-ee) :focus-visible{outline:2px solid var(--teal); outline-offset:2px}

/* buttons */
.btn.rt-btn{min-height:44px; padding:0 16px; border-radius:11px; gap:8px; font-weight:600; font-size:13.5px; white-space:nowrap}
.btn.rt-btn svg{width:16px; height:16px}
.btn.rt-btn-sm{min-height:40px; padding:0 13px; border-radius:10px; font-size:13px; gap:7px}
.btn.rt-btn-sm svg{width:14px; height:14px}
.btn.rt-btn-teal{border:1px solid var(--rt-teal-bd); background:var(--teal-soft); color:var(--rt-teal-ink); font-weight:700}
.btn.rt-btn-teal:hover{background:var(--teal-soft); border-color:var(--teal); color:var(--rt-teal-ink)}
.btn.btn-danger.rt-btn-danger{color:var(--rt-red-ink); background:var(--red-bg); border:1px solid var(--red-bd)}
.btn.btn-danger.rt-btn-danger:hover{border-color:var(--red)}
.btn.btn-primary.rt-btn{background:var(--rt-btn-bg); color:var(--btn-text); border:0}
.btn.rt-btn:disabled, .btn.rt-btn[disabled]{opacity:.5; cursor:not-allowed}
.rt-icon-btn, .rt-ibtn.zn-ibtn{width:44px; height:44px; flex:0 0 auto; display:grid; place-items:center; padding:0; border-radius:11px;
  border:1px solid var(--line-2); background:var(--chip); color:var(--rt-muted); cursor:pointer}
.rt-icon-btn:hover, .rt-ibtn.zn-ibtn:hover{color:var(--text); border-color:var(--faint)}
.rt-ibtn.zn-ibtn svg, .rt-icon-btn svg{width:16px; height:16px}
.rt-ibtn.zn-ibtn:disabled{opacity:.35; cursor:not-allowed}
.rt-ibtn-danger.zn-ibtn:hover{color:var(--rt-red-ink); border-color:var(--red-bd); background:var(--red-bg)}

/* chips, tags, notes */
.rt-chip{display:inline-flex; align-items:center; justify-content:center; min-width:52px; padding:2px 8px; border-radius:7px; flex:0 0 auto;
  font:700 11px var(--font-mono); letter-spacing:.02em; border:1px solid var(--line-2); color:var(--rt-muted); background:var(--chip)}
.rt-chip-https, .rt-chip-http{color:var(--rt-teal-ink); background:var(--teal-soft); border-color:var(--rt-teal-bd)}
.rt-chip-tcp{color:var(--rt-blue-ink); background:var(--blue-bg); border-color:var(--blue-bd)}
.rt-chip-udp{color:var(--rt-purple-ink); background:var(--purple-bg); border-color:var(--purple-border)}
.rt-chip-rdp{color:var(--rt-purple-ink); background:var(--purple-bg); border-color:var(--purple-border)}
.rt-tag{display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px; font-size:11.5px; font-weight:700; line-height:1.3;
  color:var(--rt-muted); background:var(--chip); border:1px solid var(--line-2); white-space:nowrap}
.rt-tag-xs{padding:1px 7px; font-size:10.5px}
.rt-tag-green{color:var(--rt-green-ink); background:var(--green-bg); border-color:var(--green-bd)}
.rt-tag-red{color:var(--rt-red-ink); background:var(--red-bg); border-color:var(--red-bd)}
.rt-tag-amber{color:var(--rt-amber-ink); background:var(--amber-bg); border-color:var(--amber-bd)}
.rt-tag-blue{color:var(--rt-blue-ink); background:var(--blue-bg); border-color:var(--blue-bd)}
.rt-tag-grey{color:var(--faint)}
button.rt-tag{cursor:pointer; font-family:inherit}
.rt-access{display:inline-flex; align-items:center; padding:3px 9px; border-radius:999px; font-size:11.5px; font-weight:700; white-space:nowrap;
  color:var(--rt-muted); background:var(--chip); border:1px solid var(--line-2)}
.rt-access-ext{color:var(--rt-green-ink); background:var(--green-bg); border-color:var(--green-bd)}
.rt-note{display:inline-flex; align-items:center; padding:2px 8px; border-radius:999px; font-size:11px; font-weight:700; line-height:1.35;
  color:var(--rt-muted); background:var(--chip); border:1px solid var(--line-2); white-space:nowrap}
.rt-note-purple{color:var(--rt-purple-ink); background:var(--purple-bg); border-color:var(--purple-border)}
.rt-note-teal{color:var(--rt-teal-ink); background:var(--teal-soft); border-color:var(--rt-teal-bd)}
.rt-note-off{color:var(--faint); border-style:dashed}
.rt-pro{display:inline-flex; align-items:center; margin-left:6px; padding:1px 7px; border-radius:999px; font-size:10.5px; font-weight:700; line-height:1.4;
  vertical-align:2px; color:var(--rt-amber-ink); background:var(--amber-bg); border:1px solid var(--amber-bd)}
.rt-new{display:inline-flex; margin-left:4px; padding:0 6px; border-radius:999px; font-size:10px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  color:var(--rt-teal-ink); background:var(--teal-soft); border:1px solid var(--rt-teal-bd); vertical-align:1px}
.rt-dot{display:inline-block; width:8px; height:8px; border-radius:50%; flex:0 0 auto; box-shadow:none}
.rt-dot.zn-dot-ok{background:var(--green)}
.rt-dot.zn-dot-degraded{background:var(--amber)}
.rt-dot.zn-dot-down{background:var(--red)}
.rt-dot.zn-dot-disabled{background:var(--faint)}
.rt-dot-lg{width:12px; height:12px}
.rt-arrow{display:inline-flex; color:var(--faint)}
.rt-arrow svg{width:14px; height:14px}

/* switch (button role=switch) and segmented control (aria-pressed) */
.rt-switch{position:relative; width:48px; height:28px; flex:0 0 auto; padding:3px; border:0; border-radius:999px; cursor:pointer;
  display:flex; justify-content:flex-start; background:var(--surface-3); box-shadow:inset 0 0 0 1px var(--line-2); transition:background .15s}
.rt-switch-knob{width:22px; height:22px; border-radius:50%; background:#c9d3dd; transition:transform .15s}
.rt-switch.on{background:var(--rt-btn-bg); box-shadow:none}
.rt-switch.on .rt-switch-knob{background:#fff; transform:translateX(20px)}
.rt-switch:disabled{opacity:.45; cursor:not-allowed}
[data-theme="light"] .rt-switch-knob{background:#fff; box-shadow:0 1px 2px rgba(60,45,25,.3)}
.rt-seg{display:inline-flex; flex-wrap:wrap; padding:4px; gap:4px; border-radius:13px; background:var(--rt-input); border:1px solid var(--line); max-width:100%}
.rt-seg-btn{min-height:36px; padding:0 14px; border:0; border-radius:9px; background:transparent; color:var(--rt-muted);
  font:600 13px var(--font-body); cursor:pointer; white-space:nowrap}
.rt-seg-btn:hover{color:var(--text)}
.rt-seg-btn[aria-pressed="true"]{background:var(--surface-3); color:var(--text); box-shadow:0 1px 0 var(--line-2)}
.rt-seg-btn:disabled{opacity:.4; cursor:not-allowed}
.rt-seg-sm{padding:3px; gap:3px; border-radius:11px}
.rt-seg-sm .rt-seg-btn{min-height:34px; padding:0 11px; font-size:12.5px; font-family:var(--font-mono); font-weight:700}

/* form fields */
.rt-field{display:flex; flex-direction:column; min-width:0}
.rt-label{display:block; margin-bottom:6px; font-size:12.5px; font-weight:600; color:var(--rt-muted)}
.rt-input, .rt-select, .rt-readonly{width:100%; min-width:0; min-height:44px; box-sizing:border-box; padding:0 12px; border-radius:11px;
  border:1px solid var(--line-2); background:var(--rt-input); color:var(--text); font:500 14px var(--font-body)}
.rt-input.rt-mono, .rt-select.rt-mono{font-family:var(--font-mono); font-weight:600}
.rt-input:focus, .rt-select:focus{outline:none; border-color:var(--teal); box-shadow:0 0 0 3px var(--teal-soft)}
.rt-input:disabled, .rt-select:disabled{opacity:.55; cursor:not-allowed}
.rt-input[aria-invalid="true"]{border-color:var(--red)}
.rt-input-accent{border-color:var(--rt-teal-bd)}
.rt-input-sm{min-height:40px; padding:0 10px; border-radius:10px; font-size:13.5px}
.rt-input-code{max-width:150px; letter-spacing:.12em}
.rt-select-auto{width:auto}
.rt-textarea{min-height:96px; padding:10px 12px; resize:vertical; line-height:1.45}
.rt-readonly{display:block; padding-top:11px; padding-bottom:11px; line-height:1.45; border-style:dashed; background:transparent; font-weight:600; overflow-wrap:anywhere}
.rt-readonly svg{vertical-align:-2px; margin-right:4px}
.rt-affix{display:flex; min-height:44px; border-radius:11px; border:1px solid var(--line-2); background:var(--rt-input); overflow:hidden}
.rt-affix:focus-within{border-color:var(--teal); box-shadow:0 0 0 3px var(--teal-soft)}
.rt-affix > .rt-input{flex:1 1 6ch; width:auto; min-width:5ch; border:0; border-radius:0; background:transparent; box-shadow:none}
.rt-affix-sfx{display:flex; align-items:center; max-width:75%; padding:0 12px; border-left:1px solid var(--line); color:var(--faint);
  font:500 13px var(--font-mono); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.rt-check{display:inline-flex; align-items:center; gap:8px; min-height:40px; font-size:13.5px; font-weight:600; cursor:pointer}
.rt-check input, .rt-check-input{width:18px; height:18px; margin:0; accent-color:var(--teal); flex:0 0 auto}
.rt-check-inline{align-self:flex-end; min-height:40px}
.rt-check-spacer{visibility:hidden}
.rt-fs{margin:0; padding:0; border:0; min-width:0}
.rt-fs > legend{padding:0; margin:0 0 10px; font-family:var(--font-display); font-size:14px; font-weight:700}
.rt-grid1, .rt-grid2, .rt-grid3, .rt-grid4{display:grid; gap:14px 16px; min-width:0}
.rt-grid2{grid-template-columns:repeat(2, minmax(0, 1fr))}
.rt-grid3{grid-template-columns:repeat(3, minmax(0, 1fr))}
.rt-grid4{grid-template-columns:repeat(4, minmax(0, 1fr))}
.rt-grid-end{align-items:end}
.rt-row-end{display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px}
.rt-row-end > .rt-field{flex:1 1 220px}

/* ── Page ── */
.page-header.rt-page-head{margin-bottom:20px}
.rt-page-titles{flex:1 1 320px; min-width:0}
.rt-page-actions{display:flex; flex-wrap:wrap; gap:10px}
.toolbar.rt-toolbar{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:0 0 20px; padding:10px; border-radius:16px;
  background:var(--chip); border:1px solid var(--line)}
.toolbar.rt-toolbar .rt-search{position:relative; flex:1 1 220px; min-width:0; min-height:44px; padding:0 13px; gap:9px;
  border-radius:11px; border:1px solid var(--line-2); background:var(--rt-input); color:var(--rt-muted)}
.toolbar.rt-toolbar .rt-search:focus-within{border-color:var(--teal); box-shadow:0 0 0 3px var(--teal-soft)}
.toolbar.rt-toolbar .rt-search input[type=search]{min-height:42px; font-size:14px; font-weight:500}
.rt-toolbar .rt-search input:focus-visible{outline:none}
.rt-selectbox{display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 4px 0 12px; border-radius:11px;
  border:1px solid var(--line-2); background:var(--rt-input); color:var(--rt-muted); font-size:13.5px; font-weight:600; max-width:100%}
.rt-selectbox[hidden]{display:none}
.rt-selectbox select{min-width:0; max-width:170px; min-height:40px; border:0; background:transparent; color:var(--text);
  font:600 13.5px var(--font-body); cursor:pointer}
.rt-selectbox select:focus-visible{outline:2px solid var(--teal); outline-offset:0; border-radius:8px}
.rt-selectbox:focus-within{border-color:var(--teal)}

.rt-zones{display:flex; flex-direction:column; gap:20px; min-width:0}
.rt-empty-page{padding:32px 16px; color:var(--rt-muted); font-size:14px}
.rt-empty-card{display:flex; flex-direction:column; align-items:center; gap:10px; padding:44px 20px; text-align:center;
  border-radius:18px; border:1px dashed var(--line-2); background:var(--chip)}
.rt-empty-icon{width:48px; height:48px; border-radius:14px; display:grid; place-items:center; background:var(--teal-soft); color:var(--rt-teal-ink)}
.rt-empty-title{font-family:var(--font-display); font-weight:700; font-size:18px}
.rt-empty-text{max-width:52ch; color:var(--rt-muted); font-size:14px}

.rt-zone{background:linear-gradient(180deg, var(--surface), var(--surface-2)); border:1px solid var(--line); border-radius:18px;
  box-shadow:var(--shadow); overflow:hidden; min-width:0}
.rt-zone-head{display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px; padding:16px 20px}
.rt-zone-toggle{width:44px; height:44px; flex:0 0 auto; display:grid; place-items:center; padding:0; border-radius:11px;
  border:1px solid var(--line); background:var(--chip); color:var(--rt-muted); cursor:pointer}
.rt-zone-toggle:hover{color:var(--text); border-color:var(--line-2)}
.rt-zone-toggle svg{width:16px; height:16px; transition:transform .15s}
.rt-collapsed .rt-zone-toggle svg{transform:rotate(-90deg)}
.rt-zone-info{flex:1 1 280px; min-width:0}
.rt-zone-line{display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px}
.rt-zone-title.zn-domain{margin:0; font-family:var(--font-display); font-weight:700; font-size:19px; letter-spacing:-.01em; color:var(--text); overflow-wrap:anywhere}
.rt-gw-pill.zn-gw-pill{gap:6px; padding:3px 10px; border-radius:999px; font:600 12px var(--font-body); color:var(--rt-muted); border:1px solid var(--line-2); background:var(--chip)}
.rt-gw-pill.zn-gw-pill.off{color:var(--rt-amber-ink); border-color:var(--amber-bd); background:var(--amber-bg)}
.rt-zone-meta{display:flex; align-items:center; gap:8px; margin-top:4px; color:var(--rt-muted); font-size:13px}
.rt-zone-actions{display:flex; flex-wrap:wrap; gap:8px}
.rt-zone-body[hidden], .rt-collapsed .rt-zone-body{display:none}
.rt-cols{display:flex; align-items:center; gap:6px 16px; padding:10px 20px; border-top:1px solid var(--line); background:var(--chip);
  font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--faint)}
.rt-col-sel{flex:0 0 22px}
.rt-col-host{flex:1 1 200px; min-width:0}
.rt-col-lines{flex:3 1 320px; min-width:0}
.rt-col-access{flex:0 0 120px}
.rt-col-status{flex:0 0 140px}
.rt-col-actions{flex:0 0 190px}
.rt-hosts{list-style:none; margin:0; padding:0}
.rt-host{position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; padding:14px 20px; border-top:1px solid var(--line)}
.rt-host.off .rt-host-name, .rt-host.off .rt-lines{opacity:.6}
.rt-host.rt-flash{animation:rt-flash 1.8s ease}
@keyframes rt-flash{0%,30%{background:var(--teal-soft)} 100%{background:transparent}}
.rt-host-name{flex:1 1 200px; min-width:0}
.rt-host-title{display:flex; flex-wrap:wrap; align-items:baseline; gap:0 2px; font-weight:700; font-size:14.5px; overflow-wrap:anywhere}
.rt-host-label.zn-name{font-family:var(--font-body); font-size:14.5px; font-weight:700; color:var(--text)}
.rt-host-sfx{color:var(--faint); font-weight:500}
.rt-host-desc{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:2px; color:var(--rt-muted); font-size:12.5px}
.rt-lines{flex:3 1 320px; min-width:0; display:flex; flex-direction:column; gap:6px}
.rt-line{display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; min-width:0}
.rt-line.off > :not(.rt-note-off){opacity:.55}
.rt-from{font:600 13px var(--font-mono); color:var(--rt-muted)}
.rt-to{font:600 13px var(--font-mono); overflow-wrap:anywhere}
.rt-line-name{color:var(--rt-muted); font-size:12.5px}
.rt-alias-more{font-size:12px}
.rt-host-access{flex:0 0 120px; display:flex; flex-wrap:wrap; align-items:center; gap:6px}
.rt-host-status{flex:0 0 140px; display:flex; align-items:center; gap:7px; font-size:13px; font-weight:600; min-width:0}
.rt-status-text{overflow-wrap:anywhere}
.rt-host-actions{flex:0 0 190px; display:flex; justify-content:flex-end; gap:6px}
.rt-more.zn-ibtn{width:40px; height:40px; border-radius:10px; border-color:transparent; background:transparent}
.rt-more.zn-ibtn:hover, .rt-more.zn-ibtn[aria-expanded="true"]{border-color:var(--line-2); background:var(--chip)}
.rt-more-hosts.zn-more{min-height:44px; padding:0 20px; border-top:1px solid var(--line); font-size:13px; color:var(--rt-teal-ink)}
.rt-zone-empty{display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:18px 20px; border-top:1px solid var(--line); color:var(--rt-muted); font-size:13.5px}
.rt-add-host-row{display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:48px; padding:0 16px;
  border:0; border-top:1px dashed var(--line-2); background:transparent; color:var(--rt-teal-ink); font:700 13px var(--font-body); cursor:pointer}
.rt-add-host-row:hover{background:var(--teal-soft)}
.rt-add-host-row svg{width:15px; height:15px}

/* ── Big dialogs (host edit, new host, domain settings) ── */
.modal-overlay.rt-overlay{z-index:1000; padding:24px}
.rt-dialog-open{overflow:hidden}
.rt-dlg{display:flex; flex-direction:column; width:100%; max-width:920px; max-height:min(980px, calc(100dvh - 48px)); min-height:0;
  background:linear-gradient(180deg, var(--surface), var(--surface-2)); border:1px solid var(--line-2); border-radius:20px;
  box-shadow:var(--modal-shadow); overflow:hidden; color:var(--text); animation:rt-pop .18s ease-out}
@keyframes rt-pop{from{opacity:0; transform:translateY(8px) scale(.99)} to{opacity:1; transform:none}}
.rt-dlg-new{max-width:1080px}
.rt-dlg-settings{max-width:780px}
.rt-dlg-head{display:flex; align-items:flex-start; gap:14px; padding:20px 24px; border-bottom:1px solid var(--line); flex:0 0 auto}
.rt-dlg-icon{width:40px; height:40px; flex:0 0 auto; display:grid; place-items:center; border-radius:12px; background:var(--surface-3); color:var(--rt-teal-ink)}
.rt-dlg-icon-teal{background:var(--teal-soft)}
.rt-dlg-titles{flex:1 1 auto; min-width:0}
.rt-dlg-title{margin:0; font-family:var(--font-display); font-weight:700; font-size:20px; letter-spacing:-.01em; line-height:1.25}
.rt-dlg-sub{display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; margin-top:4px; color:var(--rt-muted); font-size:13px; min-width:0}
.rt-dlg-sub .rt-mono{font-size:13px; overflow-wrap:anywhere}
.rt-dlg-close{width:44px; height:44px; flex:0 0 auto; display:grid; place-items:center; padding:0; border-radius:12px;
  border:1px solid var(--line); background:transparent; color:var(--rt-muted); cursor:pointer}
.rt-dlg-close:hover{color:var(--text); border-color:var(--line-2)}
.rt-dlg-body{flex:1 1 auto; min-height:0; overflow:auto; padding:22px 24px; display:flex; flex-direction:column; gap:26px}
.rt-dlg-foot{display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:14px 24px; border-top:1px solid var(--line); background:var(--chip); flex:0 0 auto}
.rt-dlg-note{margin-right:auto; color:var(--rt-muted); font-size:13px; min-width:0}
.rt-dlg-note.rt-dirty{color:var(--rt-amber-ink); font-weight:700}
.rt-mono-mix .rt-mono{color:var(--text)}
.rt-sec{min-width:0}
.rt-sec-head{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-bottom:12px}
.rt-sec-head-split{align-items:flex-end; gap:10px 16px}
.rt-sec-head-text{flex:1 1 300px; min-width:0}
.rt-sec-title{margin:0; font-family:var(--font-display); font-size:15px; font-weight:700}
.rt-sec > .rt-sec-title{margin-bottom:12px}
.rt-sec-hint{margin:3px 0 0; color:var(--rt-muted); font-size:13px}
.rt-sec > .rt-sec-hint{margin:-6px 0 12px}
.rt-sec-card{padding:16px; border-radius:14px; border:1px solid var(--line); background:var(--chip)}
.rt-confirm-list{margin:10px 0 0; padding-left:18px; max-height:30vh; overflow:auto; font-size:13px; color:var(--rt-muted)}

/* host edit: actions bar and forwarding rows */
.rt-host-actions-bar{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:-10px}
.rt-erows{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.rt-erow{padding:12px 14px; border-radius:14px; border:1px solid var(--line); background:var(--chip)}
.rt-erow.editing{border-color:var(--rt-teal-bd)}
.rt-erow.off .rt-erow-path{opacity:.55}
.rt-erow-main{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px}
.rt-erow-path{flex:1 1 300px; min-width:0; display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; font-size:14px}
.rt-erow-path .rt-mono{font-size:14px; overflow-wrap:anywhere}
.rt-erow-name{color:var(--rt-muted); font-size:13px}
.rt-erow-tools{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-left:auto}
.rt-erow-edit{margin-top:14px; padding-top:14px; border-top:1px dashed var(--line-2)}
.rt-change{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:10px; font-size:12.5px; color:var(--rt-muted)}
.rt-change:empty{display:none}
.rt-change b, .rt-change strong{color:var(--rt-amber-ink)}
.rt-addform{margin-bottom:10px; padding:16px; border-radius:14px; border:1px solid var(--rt-teal-bd); background:var(--chip)}
.rt-addform-title{margin-bottom:12px; font-weight:700; font-size:13.5px}
.rt-addform-actions{display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; margin-top:12px}

/* new host: two columns (form | preview + checks) */
.rt-dlg-new .rt-dlg-body{padding:0; gap:0}
.rt-new-grid{display:flex; min-height:100%}
.rt-new-main{flex:3 1 0; min-width:0; padding:22px 24px; display:flex; flex-direction:column; gap:24px; border-right:1px solid var(--line)}
.rt-new-aside{flex:2 1 0; min-width:0; padding:22px 24px; background:var(--chip); display:flex; flex-direction:column; gap:14px}
.rt-step-head{display:flex; align-items:center; gap:10px; margin-bottom:12px}
.rt-step{width:24px; height:24px; flex:0 0 auto; display:grid; place-items:center; border-radius:50%; background:var(--surface-3);
  color:var(--rt-teal-ink); font:700 12px var(--font-mono)}
.rt-www-slot:empty{display:none}
.rt-www-slot{margin-top:10px}
.rt-tpl{margin-top:14px}
.rt-pills{display:flex; flex-wrap:wrap; gap:8px}
.rt-pill{min-height:40px; padding:0 14px; border-radius:999px; border:1px solid var(--line-2); background:transparent; color:var(--text);
  font:600 13px var(--font-body); cursor:pointer}
.rt-pill:hover{border-color:var(--faint)}
.rt-pill[aria-pressed="true"]{border-color:var(--rt-teal-bd); background:var(--teal-soft); color:var(--rt-teal-ink)}
.rt-nh-entries{display:flex; flex-direction:column; gap:10px}
.rt-nh-entry{display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px; padding:12px; border-radius:14px; background:var(--chip); border:1px solid var(--line)}
.rt-nh-entry > .rt-field-type{flex:0 0 auto}
.rt-nh-entry > .rt-field-port{flex:1 1 72px; min-width:72px}
.rt-nh-entry > .rt-check-inline{white-space:nowrap}
.rt-nh-entry > .rt-ibtn{margin-left:auto}
.rt-nh-entry > .rt-field .rt-label{font-size:12px}
.rt-nh-entry > .rt-err-row{flex:1 1 100%; margin-top:0}
.rt-add-row{display:inline-flex; align-items:center; gap:7px; align-self:flex-start; min-height:40px; padding:0 14px; border-radius:10px;
  border:1px dashed var(--line-2); background:transparent; color:var(--rt-teal-ink); font:700 13px var(--font-body); cursor:pointer}
.rt-add-row:hover{border-color:var(--rt-teal-bd); background:var(--teal-soft)}
.rt-add-row:disabled{opacity:.45; cursor:not-allowed}
.rt-add-row svg{width:15px; height:15px}
.rt-add-row-sm{min-height:38px; margin-top:10px; font-size:12.5px; padding:0 12px}
.rt-preview{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.rt-preview-item{padding:12px 14px; border-radius:14px; background:var(--surface); border:1px solid var(--line)}
.rt-preview-from{display:flex; align-items:center; gap:8px; min-width:0}
.rt-preview-from .rt-mono{font-size:13px; overflow-wrap:anywhere; min-width:0}
.rt-preview-to{display:flex; align-items:center; gap:8px; margin-top:6px; color:var(--rt-muted); font-size:13px; overflow-wrap:anywhere}
.rt-preview-to svg{width:14px; height:14px; flex:0 0 auto}
.rt-checks{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; font-size:13px}
.rt-checkline{display:flex; align-items:flex-start; gap:10px}
.rt-check-ic{width:20px; height:20px; flex:0 0 auto; display:grid; place-items:center; border-radius:50%;
  background:var(--green-bg); border:1px solid var(--green-bd); color:var(--rt-green-ink)}
.rt-check-ic svg{width:11px; height:11px}
.rt-check-warn .rt-check-ic{background:var(--amber-bg); border-color:var(--amber-bd); color:var(--rt-amber-ink)}
.rt-check-error .rt-check-ic, .rt-check-fail .rt-check-ic{background:var(--red-bg); border-color:var(--red-bd); color:var(--rt-red-ink)}
.rt-check-error, .rt-check-fail{color:var(--rt-red-ink)}

/* domain settings */
.rt-ds-row{display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; padding:14px 0; border-top:1px solid var(--line)}
.rt-sec-card > .rt-ds-row:first-of-type, .rt-sec-card > .rt-ds-block:first-of-type > .rt-ds-row{border-top:0; padding-top:4px}
.rt-ds-block > .rt-ds-row{border-top:1px solid var(--line)}
.rt-ds-text{flex:1 1 260px; min-width:0}
.rt-ds-label{display:flex; align-items:center; font-weight:700; font-size:14px}
.rt-ds-text .rt-hint{margin-top:2px}
.rt-ds-ctrl{display:flex; flex-wrap:wrap; gap:8px}
.rt-ds-details{padding:0 0 12px}
.rt-ds-details:empty{display:none}
.rt-locked .rt-ds-ctrl{opacity:.55}
.rt-apply{display:flex; align-items:flex-start; gap:10px; margin-top:6px; padding:14px; border-radius:12px; border:1px dashed var(--line-2); cursor:pointer}
.rt-apply .rt-check-input{margin-top:2px}
.rt-apply.rt-disabled{opacity:.55; cursor:not-allowed}
.rt-apply-preview:empty{display:none}
.rt-apply-preview{margin-top:8px; font-size:12.5px; color:var(--rt-muted)}
.rt-apply-list{margin:6px 0 0; padding-left:18px; max-height:140px; overflow:auto}
.rt-dns-card{display:flex; flex-wrap:wrap; align-items:center; gap:12px 14px; padding:14px 16px; border-radius:14px; border:1px solid var(--line); background:var(--chip)}
.rt-dns-text{flex:1 1 240px; min-width:0}
.rt-sec > .rt-sec-hint:last-child{margin:12px 0 0}

/* ── Entry editor ("Weiterleitung bearbeiten") ── */
.modal-overlay.rt-ee-overlay{z-index:1050; padding:24px}
.modal.rt-ee{width:100%; max-width:1140px; height:min(1220px, calc(100dvh - 48px)); max-height:none; padding:0;
  display:flex; flex-direction:column; background:linear-gradient(180deg, var(--surface), var(--surface-2)); border:1px solid var(--line-2);
  border-radius:20px; box-shadow:var(--modal-shadow); overflow:hidden}
.rt-ee-head{display:flex; align-items:flex-start; gap:14px; padding:20px 24px 14px; flex:0 0 auto}
.rt-chip.rt-ee-chip{padding:6px 10px; border-radius:9px; font-size:13px; min-width:0}
.rt-ee-titles{flex:1 1 auto; min-width:0}
.rt-ee-flow{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 24px 14px; padding:10px 12px; border-radius:14px;
  background:var(--chip); border:1px solid var(--line); flex:0 0 auto}
.rt-ee-flow:empty{display:none}
.rt-ee-step{padding:7px 12px; border-radius:11px; background:var(--surface); border:1px solid var(--line-2); min-width:0}
.rt-ee-step-k{font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--faint)}
.rt-ee-step-v{font-size:13px; overflow-wrap:anywhere}
.rt-ee-step-auth{border-color:var(--amber-bd)}
.rt-ee-step-gc{border-color:var(--rt-teal-bd)}
.rt-ee-step-arrow{color:var(--faint); font-weight:700}
.rt-ee-main{flex:1 1 auto; min-height:0; display:flex; border-top:1px solid var(--line)}
.rt-ee-nav{flex:0 0 240px; padding:14px 12px; border-right:1px solid var(--line); display:flex; flex-direction:column; gap:4px;
  background:var(--chip); overflow:auto}
.rt-ee-tab{display:flex; flex-direction:column; align-items:flex-start; gap:1px; width:100%; min-height:52px; padding:7px 12px;
  border:0; border-radius:10px; background:transparent; color:var(--text); text-align:left; cursor:pointer; font-family:var(--font-body)}
.rt-ee-tab:hover{background:var(--surface-3)}
.rt-ee-tab[aria-current="page"]{background:var(--teal-soft); color:var(--rt-teal-ink)}
.rt-ee-tab-label{font-weight:700; font-size:13.5px}
.rt-ee-tab-sum{font-size:12px; font-weight:500; color:var(--rt-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%}
.rt-ee-tab-sum:empty{display:none}
.rt-ee-tab-note{display:none; margin-top:2px; padding:0 6px; border-radius:999px; font-size:10.5px; font-weight:700;
  color:var(--faint); border:1px dashed var(--line-2)}
.rt-ee-tab-off .rt-ee-tab-note{display:inline-flex}
.rt-ee-tab-off .rt-ee-tab-sum{display:none}
.rt-ee-tab-off .rt-ee-tab-label{color:var(--faint)}
.rt-ee-panels{flex:1 1 auto; min-width:0; overflow:auto; padding:22px 26px 28px}
.rt-ee-panel{display:flex; flex-direction:column; gap:16px}
.rt-ee-panel[hidden]{display:none}
.rt-ee-panel-title{margin:0; font-family:var(--font-display); font-size:17px; font-weight:700}
.rt-ee-panel > .rt-ee-ttl + .rt-hint{margin-top:-12px}
.rt-ee-l4note{margin:0; padding:10px 12px; border-radius:12px; border:1px dashed var(--line-2); color:var(--rt-muted); font-size:13px}
.rt-ee-l4note[hidden]{display:none}
.rt-ee-disabled{opacity:.42; filter:grayscale(.5); pointer-events:none; user-select:none}
.rt-ee-card{padding:16px; border-radius:14px; border:1px solid var(--line); background:var(--chip); min-width:0}
.rt-ee-card-inner{background:var(--surface); margin-bottom:12px}
.rt-ee-card.feature-locked{opacity:.75}
.rt-ee-row{display:flex; align-items:center; gap:16px; min-width:0}
.rt-ee-row > div:first-child{flex:1 1 auto; min-width:0}
.rt-ee-row-sep{margin-top:14px; padding-top:14px; border-top:1px dashed var(--line-2)}
.rt-ee-ttl{font-weight:700; font-size:14px}
.rt-ee-desc{color:var(--rt-muted); font-size:12.5px; font-weight:500}
.rt-ee-ttl > .rt-ee-desc{margin-left:6px}
.rt-ee-kicker{margin-bottom:8px; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--faint)}
.rt-ee-sub{display:flex; flex-direction:column; gap:12px; margin-top:14px; padding-top:14px; border-top:1px dashed var(--line-2)}
.rt-ee-stack{display:flex; flex-direction:column; gap:14px}
.rt-ee-grid-cards{align-items:start}
.rt-ee-wol{display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px 16px; margin-top:12px}
.rt-ee-wol > .rt-field{flex:1 1 240px}
.rt-ee-rules{display:flex; flex-wrap:wrap; gap:8px}
.rt-ee-rules:empty{display:none}
.rt-ee-rule{display:inline-flex; align-items:center; gap:6px; min-height:32px; padding:0 4px 0 10px; border-radius:999px;
  font-size:12.5px; font-weight:600; background:var(--surface-3); border:1px solid var(--line-2)}
.rt-ee-addrow{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.rt-ee-addrow > .rt-input{flex:1 1 200px}
.rt-ee-checklist, .rt-ee-chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.rt-ee-checklist label, .rt-ee-chips label{display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:0 12px; border-radius:999px;
  border:1px solid var(--line-2); font-size:13px; font-weight:600; cursor:pointer}
.rt-ee-checklist input, .rt-ee-chips input{width:16px; height:16px; accent-color:var(--teal)}
.rt-ee-badge:empty{display:none}
.rt-ee-badge{margin-left:6px}
.rt-ee-info{padding:10px 12px; border-radius:12px; border:1px solid var(--blue-bd); background:var(--blue-bg); color:var(--rt-blue-ink); font-size:13px; font-weight:600}
.rt-ee-info[hidden]{display:none}
.rt-ee-cb-status{font-size:13px; font-weight:600}
/* toggle-group buttons styled like the segmented control */
.toggle-group.rt-seg-like, #edit-ip-filter-mode-group.toggle-group{display:inline-flex; flex-wrap:wrap; padding:4px; gap:4px; border-radius:13px;
  background:var(--rt-input); border:1px solid var(--line); overflow:visible}
.rt-seg-like .toggle-btn, #edit-ip-filter-mode-group .toggle-btn{min-height:36px; padding:0 14px; border:0 !important; border-radius:9px; background:transparent;
  color:var(--rt-muted); font:600 13px var(--font-body)}
.rt-seg-like .toggle-btn.on, .rt-seg-like .toggle-btn.active, .rt-seg-like .toggle-btn.method-active,
#edit-ip-filter-mode-group .toggle-btn.on{background:var(--surface-3); color:var(--text)}
/* The stored sign-in method keeps a green outline (the selection is the fill). */
#edit-auth-type-group.rt-seg-like .toggle-btn.method-active{background:transparent; color:var(--rt-green-ink); box-shadow:inset 0 0 0 1px var(--green-bd)}
#edit-auth-type-group.rt-seg-like .toggle-btn.method-active.on{background:var(--surface-3)}
.toggle-group.rt-ee-methods{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; margin-bottom:14px; border:0; background:none; overflow:visible}
.rt-ee-methods .toggle-btn{display:flex; flex-direction:column; align-items:flex-start; gap:2px; min-height:60px; padding:10px 12px; border-radius:12px !important;
  border:1px solid var(--line-2) !important; background:transparent; color:var(--text); text-align:left}
.rt-ee-methods .toggle-btn.on, .rt-ee-methods .toggle-btn.method-active{border-color:var(--rt-teal-bd) !important; background:var(--teal-soft)}
.rt-ee-m-ttl{font-weight:700; font-size:13.5px}
.rt-ee-m-desc{font-size:12px; color:var(--rt-muted); font-weight:500}
.rt-ee-totp{display:flex; flex-direction:column; gap:10px; margin-top:14px; padding:14px; border-radius:12px; border:1px dashed var(--line-2)}
.rt-ee-qr{align-self:flex-start; padding:8px; border-radius:10px; background:#fff}
.rt-ee-secret{font:600 12.5px var(--font-mono); overflow-wrap:anywhere}
/* editor toggles: 44px hit area around the visual switch */
.rt-ee .toggle{width:48px; height:28px; margin:8px 0}
.rt-ee .toggle::after{width:22px; height:22px; top:2px; left:2px}
.rt-ee .toggle.on::after{left:22px}
.rt-ee .toggle[aria-disabled="true"]{opacity:.45; cursor:not-allowed}
/* header presets + editable header lists */
.rt-ee-presets{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px}
.rt-ee-preset{display:flex; flex-direction:column; align-items:flex-start; gap:3px; min-height:64px; padding:10px 12px; border-radius:12px;
  border:1px solid var(--line-2); background:transparent; color:var(--text); text-align:left; cursor:pointer; font-family:var(--font-body)}
.rt-ee-preset:hover{border-color:var(--faint)}
.rt-ee-preset[aria-pressed="true"]{border-color:var(--rt-teal-bd); background:var(--teal-soft)}
.rt-ee-preset-ttl{font-weight:700; font-size:13.5px}
.rt-ee-preset-desc{font-size:12px; color:var(--rt-muted)}
.rt-ee-hlist{display:flex; flex-direction:column; gap:8px; margin-top:12px}
.rt-ee-hrow{display:grid; grid-template-columns:minmax(0, 2fr) minmax(0, 3fr) 44px; gap:8px; align-items:center}
.rt-ee-hempty{margin:0}
/* branding: fields + live preview */
.rt-ee-brand{display:grid; grid-template-columns:minmax(0, 3fr) minmax(0, 2fr); gap:20px; align-items:start}
.rt-ee-brand-fields{display:flex; flex-direction:column; gap:14px; min-width:0}
.rt-ee-upload{display:flex; flex-wrap:wrap; align-items:center; gap:8px}
.rt-file-btn{position:relative; overflow:hidden; cursor:pointer}
.rt-file-input{position:absolute; inset:0; opacity:0; cursor:pointer}
.rt-file-btn:focus-within{outline:2px solid var(--teal); outline-offset:2px}
.rt-ee-color{display:flex; align-items:center; gap:10px; min-height:44px; padding:0 8px; border-radius:11px; border:1px solid var(--line-2); background:var(--rt-input)}
.rt-ee-color input[type=color]{width:36px; height:30px; padding:0; border:0; background:none; cursor:pointer}
.rt-ee-brand-preview{display:grid; place-items:center; min-height:320px; padding:20px; border-radius:14px; border:1px solid var(--line-2);
  background:#f2f0eb; background-size:cover; background-position:center}
.rt-ee-bp-card{width:100%; max-width:260px; padding:20px 18px; border-radius:14px; background:#fff; color:#222; box-shadow:0 10px 30px -14px rgba(0,0,0,.45);
  display:flex; flex-direction:column; gap:8px; text-align:center}
.rt-ee-bp-logo{width:44px; height:44px; margin:0 auto 4px; display:grid; place-items:center; border-radius:12px; color:#fff; font:800 15px var(--font-display); letter-spacing:.02em}
.rt-ee-bp-title{font-family:var(--font-display); font-weight:700; font-size:16px}
.rt-ee-bp-text{font-size:12px; color:#555}
.rt-ee-bp-input{min-height:32px; display:flex; align-items:center; padding:0 10px; border-radius:8px; border:1px solid #d6d3cc; color:#888; font-size:12px; text-align:left}
.rt-ee-bp-btn{min-height:34px; display:grid; place-items:center; border-radius:8px; background:#0a6e4f; color:#fff; font-weight:700; font-size:13px}
/* diagnose */
.rt-ee-stat{display:flex; align-items:center; gap:7px; font-weight:700; font-size:15px; overflow-wrap:anywhere}
.rt-ee-log{max-height:280px; overflow:auto; margin-top:4px; padding:8px 10px; border-radius:12px; border:1px solid var(--line); background:var(--rt-input);
  font:500 12px var(--font-mono)}
.rt-ee-log-empty{margin:6px 0}
/* sticky footer with the change summary */
.rt-ee-foot{display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:14px 24px; border-top:1px solid var(--line); background:var(--chip); flex:0 0 auto}
.rt-ee-foot-msg{margin-right:auto; min-width:0; flex:1 1 240px; display:flex; flex-direction:column; gap:4px}
.rt-ee-changes{color:var(--rt-muted); font-size:13px}
.rt-ee-changes.rt-dirty{color:var(--rt-amber-ink); font-weight:700}
.rt-ee-foot .form-error{margin:0; font-size:13px; font-weight:600}

/* ── Narrow screens ── */
@media (pointer:coarse){
  .btn.rt-btn-sm, .rt-pill, .rt-add-row, .rt-more.zn-ibtn, .rt-check, .rt-check-inline, .rt-link-btn{min-height:44px}
  .rt-more.zn-ibtn{width:44px}
  .rt-seg-btn{min-height:40px}
  .rt-input-sm{min-height:44px}
}
@media (max-width:1100px){
  .rt-cols{display:none}
  .rt-host-actions{flex:1 0 auto}
  .rt-host-access, .rt-host-status{flex:0 1 auto}
  .rt-ee-presets{grid-template-columns:repeat(2, minmax(0, 1fr))}
}
@media (max-width:900px){
  .rt-grid3, .rt-grid4{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .rt-new-grid{flex-direction:column}
  .rt-new-main{border-right:0; border-bottom:1px solid var(--line)}
  .rt-ee-main{flex-direction:column}
  .rt-ee-nav{flex:0 0 auto; flex-direction:row; overflow-x:auto; border-right:0; border-bottom:1px solid var(--line); padding:8px 12px; gap:6px}
  .rt-ee-tab{flex:0 0 auto; width:auto; min-height:44px; padding:6px 12px}
  .rt-ee-tab-sum{max-width:160px}
  .rt-ee-brand{grid-template-columns:minmax(0, 1fr)}
}
@media (max-width:640px){
  .page-header.rt-page-head{align-items:stretch}
  .page-header.rt-page-head .rt-page-titles{flex:0 0 auto}
  .page-header.rt-page-head .page-actions{margin-left:0; width:100%}
  .rt-page-actions .btn.rt-btn{flex:1 1 0}
  .toolbar.rt-toolbar{padding:8px; gap:8px}
  .toolbar.rt-toolbar .rt-search{flex-basis:100%}
  .rt-toolbar .rt-seg{flex:1 1 100%}
  .rt-toolbar .rt-seg-btn{flex:1 1 0}
  .rt-selectbox{flex:1 1 calc(50% - 4px)}
  .rt-selectbox select{flex:1 1 auto; max-width:none}
  .rt-zone-head{padding:14px}
  .rt-zone-info{flex-basis:calc(100% - 120px)}
  .rt-zone-actions{width:100%}
  .rt-zone-actions .btn{flex:1 1 0}
  .rt-host{padding:14px; gap:8px 12px}
  .rt-host-name{flex:1 1 calc(100% - 160px); order:1}
  .rt-host-actions{flex:0 0 auto; margin-left:auto; order:2}
  .rt-lines{flex-basis:100%; order:3}
  .rt-host-access{order:4}
  .rt-host-status{order:5}
  .rt-edit-text{display:none}
  .rt-host-actions .rt-edit-host{width:44px; min-height:44px; padding:0; justify-content:center}
  .modal-overlay.rt-overlay, .modal-overlay.rt-ee-overlay{padding:0; align-items:stretch}
  .rt-dlg, .modal.rt-ee{max-width:none; max-height:none; height:100dvh; border-radius:0; border:0}
  .rt-dlg-head, .rt-ee-head{padding:14px 16px}
  .rt-dlg-body{padding:16px}
  .rt-new-main, .rt-new-aside{padding:16px}
  .rt-dlg-foot, .rt-ee-foot{padding:10px 16px calc(10px + env(safe-area-inset-bottom))}
  .rt-dlg-foot .btn.rt-btn, .rt-ee-foot .btn.rt-btn{flex:1 1 auto}
  .rt-dlg-note, .rt-ee-foot-msg{flex:1 1 100%}
  .rt-ee-flow{margin:0 16px 10px}
  .rt-ee-panels{padding:16px}
  .rt-grid2, .rt-grid3, .rt-grid4, .rt-ee-presets, .toggle-group.rt-ee-methods{grid-template-columns:minmax(0, 1fr)}
  .rt-erow-tools{margin-left:0; width:100%}
  .rt-ee-hrow{grid-template-columns:minmax(0, 1fr) 44px}
  .rt-ee-hrow > :nth-child(2){grid-column:1; grid-row:2}
  .rt-ee-hrow > :nth-child(3){grid-row:1 / span 2; grid-column:2}
}
@media (prefers-reduced-motion:reduce){
  .rt-dlg, .rt-host.rt-flash{animation:none}
  .rt-switch, .rt-switch-knob, .rt-zone-toggle svg{transition:none}
}

/* ─── TLS guard (tg-) ─── */
/* Aurora overrides for the certificates page and the TLS dialogs. The base
   tg- block comes from pro.css (loaded first); here only surfaces, the KPI
   strip and the data-table integration. */
.tg-tiles.aurora-routes-kpis { margin-bottom: 14px; }
.aurora-routes-kpi.tg-tile { cursor: pointer; }
.aurora-routes-kpi.tg-tile:hover { border-color: var(--line-2); }
.aurora-routes-kpi.tg-tile.on { border-color: var(--teal); box-shadow: 0 0 0 3px var(--glow1); }
.aurora-routes-kpi.tg-tile.warn b { color: var(--amber); }
#tg-tile-failed.warn b { color: var(--coral); }
.alert.tg-banner { display: flex; gap: 10px; margin-bottom: 14px; }
.tg-banner-link { color: var(--teal); }
.toolbar.tg-toolbar { margin-bottom: 14px; }
#tg-card.card { padding: 0; }
#tg-card .card-head { padding: 14px 16px 0; }
#tg-card.card::after { content: none; }
#tg-table.data-table th { padding: 12px 14px; border-bottom: 1px solid var(--line); }
#tg-table.data-table td { padding: 12px 14px; border-color: var(--line); }
#tg-table.data-table tbody tr:hover td { background: var(--chip); }
.tg-host { color: var(--teal); }
.tg-orig, .tg-preflight { background: var(--chip); border-color: var(--line); border-radius: var(--r-sm); }
.tg-records code { background: var(--surface); border-color: var(--line); }
.tg-notice { background: var(--amber-bg); border-color: var(--amber-bd); border-radius: var(--r-sm); }
.tg-link { color: var(--teal); }
.tg-empty td { color: var(--muted); }
.toast-warning { background: var(--amber-bg); color: var(--amber); border-color: var(--amber-bd); }

/* ─── HSTS (hs-) ─── */
/* Aurora overrides for the HSTS controls and dialogs. The base hs- block
   comes from pro.css (loaded first); here only surfaces and accents. */
.hs-warn { background: var(--amber-bg); border-color: var(--amber-bd); border-radius: var(--r-sm); }
.hs-check input { accent-color: var(--teal); }
.hs-f-label { color: var(--muted); }

/* ─── Security options (so-) ─── */
/* Aurora overrides for the security-option controls (docs/feature-security-
   options.md). The base so- block comes from pro.css (loaded first); here
   only surfaces and accents. */
.so-switch-row, .so-alias-row, .so-editor-block.so-backend-tls, .so-caa-record, textarea.so-pem { background: var(--chip); border-color: var(--line); border-radius: var(--r-sm); }
.so-warn { background: var(--amber-bg); border-color: var(--amber-bd); border-radius: var(--r-sm); }
.so-caa-none { background: transparent; border-color: var(--line); border-radius: var(--r-sm); }
.so-caa-ok { background: var(--green-bg, var(--green-lt)); border-radius: var(--r-sm); }
.so-check input, .so-radio input, .so-www-check input { accent-color: var(--teal); }
.so-f-label, .so-alias-count, .so-alias-more, .tag.so-alias-tag, .so-err-detail, .so-hint .so-ic { color: var(--muted); }
.tag.so-alias-tag { border-color: var(--line); }

/* ─── WAF (wf-) ─── */
/* Aurora overrides for the WAF page, its dialogs and the editor block
   (docs/feature-waf.md). The base wf- block comes from pro.css (loaded
   first); here only surfaces, the KPI strip, the filter toolbar and the
   data-table integration. */
.wf-tiles.aurora-routes-kpis { margin-bottom: 14px; }
.aurora-routes-kpi.wf-tile { cursor: pointer; }
.aurora-routes-kpi.wf-tile:hover { border-color: var(--line-2); }
.aurora-routes-kpi.wf-tile.on { border-color: var(--teal); box-shadow: 0 0 0 3px var(--glow1); }
#wf-tile-blocked.warn b { color: var(--coral); }
.alert.wf-banner { display: flex; gap: 10px; margin-bottom: 14px; }
.toolbar.wf-toolbar { margin-bottom: 14px; }
.wf-toolbar .wf-filters { flex: 1 1 100%; min-width: 0; padding: 0; border-bottom: none; }
.wf-card.card { padding: 0; }
.wf-card .card-head { padding: 14px 16px 10px; }
.wf-card.card::after { content: none; }
.wf-table.data-table th { padding: 12px 14px; border-bottom: 1px solid var(--line); }
.wf-table.data-table td { padding: 12px 14px; border-color: var(--line); }
.wf-table.data-table tbody tr:hover td { background: var(--chip); }
.wf-host-link, .wf-link, .wf-events-link, .wf-recommendation .wf-ic { color: var(--teal); }
.wf-raw, .wf-raw-json, .wf-rule, .wf-excl-row, .wf-recommendation { background: var(--chip); border-color: var(--line); border-radius: var(--r-sm); }
.wf-raw-json { background: var(--surface); }
.wf-excl-empty { border-color: var(--line); border-radius: var(--r-sm); }
.wf-filters, .wf-pager { border-color: var(--line); }
.wf-empty td, .wf-f-label, .wf-muted, .wf-sub, .wf-pager, .wf-hint .wf-ic { color: var(--muted); }
.wf-route-current td { background: var(--chip); }
.wf-locked .wf-ic { color: var(--muted); }

/* ─── Auth pages (au-) ─── */
/* Standalone pages outside the app shell: /login, /login/2fa, the error page
   and the route-auth login (loaded via /route-auth/static/ on proxied domains).
   They load pro.css + aurora.css like layout.njk (app.css is gone since the
   Default theme was removed); tokens, .card, .btn and .form-* come from above,
   this block only adds the centred layout and the auth-specific pieces. */
body.au-page { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; padding: 32px 16px; overflow: auto; }
.au-wrap { position: relative; z-index: 1; width: 100%; max-width: 410px; animation: rise .45s cubic-bezier(.2,.7,.2,1); }
.au-brand { display: flex; align-items: center; justify-content: center; gap: 11px; margin-bottom: 22px; font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em; font-size: 21px; color: var(--text); }
.au-brand .mark { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex: 0 0 auto; background: linear-gradient(145deg, var(--teal), var(--teal-dim)); color: var(--btn-text); box-shadow: 0 10px 24px -10px var(--teal-dim); }
.au-brand .mark svg { width: 20px; height: 20px; }
.au-brand-logo img { max-height: 96px; max-width: 100%; object-fit: contain; }
.au-brand-text { margin: -10px 0 18px; text-align: center; font-size: 13.5px; color: var(--muted); }
.card.au-card { padding: 28px 28px 26px; }
.au-card .page-eyebrow { margin-bottom: 4px; }
.au-title { margin: 0; font-family: var(--font-display); font-weight: 800; letter-spacing: -.025em; font-size: 26px; line-height: 1.1; color: var(--text); overflow-wrap: anywhere; }
.au-sub { margin: 8px 0 22px; color: var(--muted); font-size: 13.5px; line-height: 1.55; }
.au-card .form-input { padding: 11px 13px; font-size: 14px; }
.au-pw { position: relative; }
.au-pw .form-input { padding-right: 44px; }
.au-pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--faint); cursor: pointer; }
.au-pw-toggle:hover, .au-pw-toggle[aria-pressed="true"] { color: var(--text); background: var(--chip); }
.au-pw-toggle svg { width: 17px; height: 17px; }
.btn.au-submit { width: 100%; justify-content: center; padding: 12px 16px; font-size: 14px; margin-top: 6px; }
.btn.is-loading { pointer-events: none; opacity: .65; }
.btn.is-loading::after { content: ""; width: 14px; height: 14px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: au-spin .6s linear infinite; }
@keyframes au-spin { to { transform: rotate(360deg); } }
.au-card .login-error, .au-card .form-error { display: flex; gap: 9px; align-items: flex-start; margin-bottom: 16px; padding: 10px 12px; border: 1px solid var(--red-bd); border-radius: 10px; background: var(--red-bg); color: var(--red); font-size: 13px; line-height: 1.45; }
.au-card .login-error svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 1px; }
.au-card .form-error { display: none; }
.au-card .form-error.visible { display: block; }
.au-links { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; margin-top: 16px; font-size: 12.5px; }
.au-links-center { justify-content: center; gap: 12px; }
.au-links a, .au-link { padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--teal); text-decoration: none; cursor: pointer; }
.au-links a:hover, .au-link:hover { text-decoration: underline; }
.au-link-sep { width: 1px; height: 12px; background: var(--line-2); }
.au-meta { margin-top: 14px; font-family: var(--font-mono); font-size: 11px; color: var(--faint); }
.au-foot { margin-top: 18px; text-align: center; font-family: var(--font-mono); font-size: 11px; letter-spacing: .03em; color: var(--faint); }
.au-center { text-align: center; }
.au-center .au-sub { margin-bottom: 22px; }
.au-icon { width: 46px; height: 46px; margin-bottom: 16px; display: grid; place-items: center; border-radius: 13px; background: var(--teal-soft); color: var(--teal); }
.au-center .au-icon { margin-left: auto; margin-right: auto; }
.au-icon svg { width: 21px; height: 21px; }
.au-icon.au-icon-danger { background: var(--red-bg); color: var(--red); }
.tf-mono { font-family: var(--font-mono); letter-spacing: .08em; }
.au-card .form-input.tf-code { font-size: 22px; text-align: center; letter-spacing: .35em; }
/* route-auth: domain chip, step dots, one-digit code boxes */
.au-domain { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; margin-bottom: 18px; padding: 4px 11px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--teal-soft); color: var(--teal); font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; }
.au-domain span { overflow-wrap: anywhere; }
.au-domain svg { width: 12px; height: 12px; flex: 0 0 auto; }
.au-steps { display: flex; align-items: center; gap: 6px; margin: 16px 0 18px; }
.au-step { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); transition: .2s; }
.au-step.done { background: var(--teal); opacity: .45; }
.au-step.active { width: 22px; border-radius: 4px; background: var(--teal); }
.au-step-line { flex: 0 0 18px; height: 1px; background: var(--line-2); }
.au-info { margin: 12px 0 18px; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.au-info strong { color: var(--text); font-weight: 600; }
.au-card .au-title + .form-error + form, .au-card .au-title + .form-error + #email-section { margin-top: 20px; }
.au-card .au-title + .form-error.visible { margin-top: 16px; }
.au-code { display: flex; gap: 8px; margin-bottom: 18px; }
.au-code input { flex: 1; min-width: 0; height: 52px; padding: 0; text-align: center; font-family: var(--font-mono); font-size: 20px; font-weight: 700; color: var(--text); background: var(--surface); border: 1px solid var(--line-2); border-radius: 10px; outline: 0; -moz-appearance: textfield; appearance: textfield; transition: border-color .15s, box-shadow .15s; }
.au-code input::-webkit-outer-spin-button, .au-code input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.au-code input:focus { border-color: var(--teal); box-shadow: 0 0 0 3px var(--glow1); }
.au-code input.filled { border-color: var(--teal); }
.ra-share-invitation .au-sub { margin-bottom: 0; }
/* Invitation: optional portal PIN step (shared devices) */
.inv-pin { margin: 4px 0 8px; padding: 12px 14px 0; border: 1px solid var(--line); border-radius: 12px; background: var(--chip); min-width: 0; }
.inv-pin legend { padding: 0 6px; margin: 0 0 0 -6px; font-weight: 700; }
.inv-optional { font-weight: 500; font-size: 12px; color: var(--muted); }
.inv-pin-text { display: block; margin: 0 0 10px; }
.inv-pin-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.au-card .form-input.inv-pin-input { font-family: var(--font-mono); letter-spacing: .3em; }
@media (max-width: 420px) { .inv-pin-row { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  body.au-page { justify-content: flex-start; padding-top: 40px; }
  .card.au-card { padding: 24px 18px 22px; }
  .au-title { font-size: 23px; }
  .au-code input { height: 46px; font-size: 18px; }
}

/* ----------------------------------------------------------------------------
   PROFILE PAGE (pf-) — identity header, grouped sections, security rail
   (templates/aurora/pages/profile.njk + partials two-factor-card / passkeys-card)
   --------------------------------------------------------------------------- */
/* Light-theme inks: the Papier teal/green/red are too light for text and
   white-on-teal buttons (< 4.5:1), so the profile uses darker variants there. */
[data-theme="dark"]{
  --pf-teal-ink:var(--teal); --pf-green-ink:var(--green); --pf-red-ink:#ff8585; --pf-blue-ink:#9bb8ff;
  --pf-faint:#7d8d9c; --pf-teal-bd:rgba(52,220,198,.30); --pf-input:#0d141c;
  --pf-btn-bg:linear-gradient(145deg,var(--teal),var(--teal-dim));
}
[data-theme="light"]{
  --pf-teal-ink:#0b7d70; --pf-green-ink:#0f7a41; --pf-red-ink:#b52f2f; --pf-blue-ink:#2f4cb0;
  --pf-faint:var(--faint); --pf-teal-bd:rgba(14,155,138,.30); --pf-input:#f6f1e7;
  --pf-btn-bg:#0b7d70;
}

.pf-page{max-width:1160px; margin:0 auto}
.pf-page .page-header{align-items:flex-start}
.pf-page [hidden]{display:none !important}
.pf-page :focus-visible{outline:2px solid var(--teal); outline-offset:2px}
.pf-page .form-input:focus-visible{outline:0}
.pf-sr{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* buttons + inputs: 44 px touch targets, darker primary in Papier */
.pf-page .pf-btn{min-height:44px; padding:0 16px; justify-content:center; border-color:var(--line-2)}
.pf-page .btn-primary.pf-btn{background:var(--pf-btn-bg); border:0; padding:0 18px}
.pf-page .btn-ghost.pf-btn{background:transparent}
.pf-page .btn-danger.pf-btn{color:var(--pf-red-ink); border-color:var(--red-bd); background:var(--red-bg)}
.pf-page .pf-btn:disabled{opacity:.55; cursor:not-allowed; transform:none}
.pf-page .pf-input{height:44px; padding:0 13px; border-radius:11px; background:var(--pf-input); font-size:14px}
.pf-page .pf-input:disabled{background:transparent; border-style:dashed; color:var(--muted); cursor:not-allowed}
.pf-page .pf-input.mono{font-size:13.5px}

/* inline messages (showMessage): in-flow here instead of a floating toast */
.pf-msg{display:none}
.pf-page .flash{position:static; opacity:1; transform:none; min-width:0; max-width:none; box-shadow:none; z-index:auto;
  padding:10px 14px; border-radius:11px; font-size:13px; line-height:1.45}
.pf-page .flash-success{color:var(--pf-green-ink)}
.pf-page .flash-error{color:var(--pf-red-ink)}
.pf-section > .flash{margin:0 24px 16px}
.pf-block .flash{margin-top:12px}

/* identity header */
.pf-identity{display:flex; flex-wrap:wrap; align-items:center; gap:20px 28px; padding:22px 24px; margin-bottom:22px;
  background:linear-gradient(180deg,var(--surface),var(--surface-2)); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow)}
.pf-id-main{display:flex; align-items:center; gap:16px; flex:1 1 300px; min-width:0}
.pf-avatar{width:68px; height:68px; flex:0 0 auto; border-radius:50%; display:grid; place-items:center;
  background:var(--teal-soft); border:1px solid var(--pf-teal-bd); color:var(--pf-teal-ink);
  font-family:var(--font-display); font-weight:800; font-size:24px; letter-spacing:-.01em}
.pf-id-text{min-width:0}
.pf-id-name-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.pf-id-name{font-family:var(--font-display); font-weight:700; font-size:21px; letter-spacing:-.015em; overflow-wrap:anywhere}
.pf-chip{padding:3px 9px; border-radius:999px; font-size:11.5px; font-weight:700; background:var(--chip); border:1px solid var(--line-2); color:var(--muted)}
.pf-id-meta{margin-top:4px; color:var(--muted); font-size:13.5px; overflow-wrap:anywhere}
.pf-mono{font-family:var(--font-mono); font-size:12.5px}
.pf-stats{display:flex; flex-wrap:wrap; gap:10px}
.pf-stat{min-width:128px; flex:1 0 auto; padding:11px 14px; border-radius:13px; background:var(--chip); border:1px solid var(--line)}
.pf-stat-label{font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--pf-faint)}
.pf-stat-value{margin-top:4px; display:flex; align-items:center; gap:7px; flex-wrap:wrap; font-weight:600; font-size:14px}
.pf-stat-sub{font-weight:500; color:var(--muted)}
.pf-dot{width:8px; height:8px; border-radius:50%; background:var(--pf-faint); flex:0 0 auto}
.pf-stat-2fa{flex-wrap:nowrap}
.pf-stat-2fa[data-on="1"]{color:var(--pf-green-ink)}
.pf-stat-2fa[data-on="1"] .pf-dot{background:var(--green)}
.pf-stat-2fa[data-on="0"]{color:var(--muted)}

/* two columns: sections + rail (the rail drops below when there is no room) */
.pf-layout{display:flex; flex-wrap:wrap; gap:22px; align-items:flex-start}
.pf-main{flex:999 1 560px; min-width:0; display:flex; flex-direction:column; gap:22px}
.pf-rail{flex:1 1 280px; min-width:0; display:flex; flex-direction:column; gap:22px; position:sticky; top:0}

/* sections */
.pf-section{background:linear-gradient(180deg,var(--surface),var(--surface-2)); border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--shadow); overflow:hidden}
.pf-sec-head{display:flex; align-items:flex-start; gap:13px; padding:20px 24px; border-bottom:1px solid var(--line)}
.pf-sec-ic{width:34px; height:34px; flex:0 0 auto; border-radius:10px; display:grid; place-items:center; background:var(--surface-3); color:var(--pf-teal-ink)}
.pf-sec-ic svg{width:17px; height:17px}
.pf-sec-title{margin:0; font-family:var(--font-display); font-weight:700; font-size:17px; letter-spacing:-.01em}
.pf-sec-desc{margin:3px 0 0; color:var(--muted); font-size:13px}

/* rows: label + hint left, control right, wrapping when narrow */
.pf-row{display:flex; flex-wrap:wrap; align-items:center; gap:10px 28px; padding:18px 24px}
.pf-row + .pf-row{border-top:1px solid var(--line)}
.pf-row.pf-row-flat{padding:0}
.pf-row-label{flex:1 1 220px; min-width:0}
.pf-row-control{flex:2 1 300px; min-width:0; position:relative}
.pf-row-actions, .pf-actions{display:flex; flex-wrap:wrap; gap:10px}
.pf-label{display:block; font-weight:600; font-size:14px; color:var(--text)}
.pf-label-line{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.pf-label-line .pf-label{display:inline}
.pf-hint{margin-top:3px; color:var(--muted); font-size:12.5px; line-height:1.5}
.pf-hint-wide{max-width:62ch}
.pf-hint-extra:not(:empty)::before{content:" · "}
.pf-locked .pf-input{padding-right:40px}
.pf-lock{position:absolute; right:14px; top:14px; width:16px; height:16px; color:var(--pf-faint); pointer-events:none}
.pf-foot{display:flex; justify-content:flex-end; gap:10px; padding:14px 24px; background:var(--chip); border-top:1px solid var(--line)}

/* blocks in "Sign-in & security" */
.pf-block{padding:18px 24px}
.pf-block ~ .pf-block{border-top:1px solid var(--line)}
.pf-block:last-child{padding-bottom:22px}
.pf-banner{margin-bottom:14px}
.pf-note-inline{margin-top:10px}

/* status pills (#tf-status, #pk-status) */
.pf-page .tf-status{margin-left:0; display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px;
  font-family:var(--font-body); font-size:12px; font-weight:700; letter-spacing:0; text-transform:none;
  color:var(--muted); background:var(--chip); border:1px solid var(--line-2)}
.pf-page .tf-status:empty{display:none}
.pf-page .tf-status.tf-status-on{color:var(--pf-green-ink); background:var(--green-bg); border-color:var(--green-bd)}
.pf-page .tf-status.tf-status-on::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--green)}
.pf-page .tf-status.pf-pill-teal.tf-status-on{color:var(--pf-teal-ink); background:var(--teal-soft); border-color:var(--pf-teal-bd)}
.pf-page .tf-status.pf-pill-teal::before{display:none}

/* inline expanding forms (password, 2FA setup/codes/regenerate/disable, passkey add/remove) */
.pf-expand{margin-top:16px; padding:16px; border-radius:14px; background:var(--chip); border:1px solid var(--line);
  display:flex; flex-direction:column; gap:12px}
.pf-expand-accent{border-color:var(--pf-teal-bd)}
.pf-expand-danger{border-color:var(--red-bd)}
.pf-fields{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px}
.pf-field-label{display:block; font-size:12.5px; font-weight:600; color:var(--muted); margin-bottom:6px}
.pf-expand-actions{display:flex; justify-content:flex-end; flex-wrap:wrap; gap:10px}
.pf-inline{display:flex; flex-wrap:wrap; align-items:center; gap:10px}
.pf-inline.pf-inline-end{align-items:flex-end}
.pf-inline > .pf-input{flex:1 1 180px; min-width:0}
.pf-inline > .pf-input.tf-code-input{flex:0 1 160px}
.pf-grow{flex:1 1 220px; min-width:0}
.pf-strong{color:var(--text); font-weight:600; font-size:13px}
.pf-page .tf-hint{color:var(--muted); font-size:12.5px}
.pf-page .tf-step{font-size:13.5px}
.pf-page .tf-secret{background:var(--pf-input); border-color:var(--line-2)}

/* passkey list */
.pf-page .pk-list{margin-top:16px; gap:10px}
.pf-page .pk-list:empty{display:none}
.pf-page .pk-empty{margin-top:14px; color:var(--muted); font-size:13px}
.pf-page .pk-item{display:block; padding:12px 12px 12px 14px; border-radius:14px; background:var(--chip); border:1px solid var(--line)}
.pk-item-row{display:flex; align-items:center; gap:14px}
.pk-item-ic{width:40px; height:40px; flex:0 0 auto; border-radius:11px; display:grid; place-items:center; background:var(--surface-3); color:var(--pf-teal-ink)}
.pk-item-ic svg{width:19px; height:19px}
.pf-page .pk-item-main{flex:1 1 auto; min-width:0}
.pk-item-head{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.pf-page .pk-item-name{font-size:14px; font-weight:600}
.pf-page .pk-item-meta{margin-top:2px; font-family:var(--font-body); font-size:12.5px; color:var(--muted)}
.pk-chip-synced{padding:2px 8px; border-radius:999px; font-size:11px; font-weight:700; color:var(--pf-blue-ink); background:var(--blue-bg); border:1px solid var(--blue-bd)}
.pk-item-remove{width:44px; height:44px; flex:0 0 auto; border-radius:11px; border:1px solid transparent; background:transparent;
  color:var(--muted); display:grid; place-items:center; cursor:pointer; transition:.15s}
.pk-item-remove svg{width:17px; height:17px}
.pk-item-remove:hover{color:var(--pf-red-ink); border-color:var(--red-bd); background:var(--red-bg)}
.pk-item .pf-expand{margin-top:12px}

/* segmented controls (language, colour scheme) */
.pf-seg{display:inline-flex; padding:4px; gap:4px; border-radius:13px; background:var(--pf-input); border:1px solid var(--line)}
.pf-seg-btn{min-height:40px; padding:0 16px; border-radius:9px; border:0; cursor:pointer; background:transparent; color:var(--muted);
  font-family:var(--font-body); font-weight:600; font-size:13.5px; transition:background .15s, color .15s}
.pf-seg-btn:hover{color:var(--text)}
.pf-seg-btn[aria-pressed="true"]{background:var(--surface); color:var(--text); box-shadow:0 1px 3px rgba(0,0,0,.18)}

/* right rail */
.pf-status, .pf-note{border-radius:var(--r); padding:20px 22px}
.pf-status{background:linear-gradient(180deg,var(--surface),var(--surface-2)); border:1px solid var(--line); box-shadow:var(--shadow)}
.pf-note{border:1px dashed var(--line-2); padding:18px 22px}
.pf-rail-title{margin:0; font-family:var(--font-display); font-weight:700; font-size:16px}
.pf-note .pf-rail-title{font-size:15px}
.pf-note-text{margin:8px 0 0; color:var(--muted); font-size:13px; line-height:1.55}
.pf-score{display:flex; align-items:baseline; gap:8px; margin-top:12px}
.pf-score-num{font-family:var(--font-display); font-weight:800; font-size:34px; letter-spacing:-.03em; color:var(--pf-teal-ink); line-height:1.1}
.pf-score-label{color:var(--muted); font-size:13px}
.pf-bar{height:6px; border-radius:999px; background:var(--surface-3); margin-top:10px; overflow:hidden}
.pf-bar-fill{height:100%; width:0; border-radius:999px; background:var(--pf-btn-bg); transition:width .3s ease}
.pf-status[data-score="1"] .pf-bar-fill{width:33.34%}
.pf-status[data-score="2"] .pf-bar-fill{width:66.67%}
.pf-status[data-score="3"] .pf-bar-fill{width:100%}
.pf-checks{list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:12px}
.pf-check{display:flex; gap:11px; align-items:flex-start}
.pf-check-ic{width:22px; height:22px; flex:0 0 auto; border-radius:50%; display:grid; place-items:center; margin-top:1px;
  background:var(--green-bg); color:var(--pf-green-ink); border:1px solid var(--green-bd)}
.pf-check-ic svg{width:12px; height:12px}
.pf-check:not([data-done="1"]) .pf-check-ic{background:transparent; border:1.5px dashed var(--line-2); color:transparent}
.pf-check-label{font-weight:600; font-size:13.5px}
.pf-check:not([data-done="1"]) .pf-check-label{color:var(--muted)}
.pf-check-hint{color:var(--muted); font-size:12.5px}
.pf-check:not([data-done="0"]) .pf-when-off, .pf-check:not([data-done="1"]) .pf-when-on{display:none}

@media (max-width:900px){
  .pf-rail{position:static}
}
@media (max-width:600px){
  .pf-identity{padding:18px 16px; gap:16px}
  .pf-avatar{width:56px; height:56px; font-size:20px}
  .pf-stat{flex:1 1 140px; min-width:0}
  .pf-sec-head{padding:16px}
  .pf-row{padding:16px}
  .pf-block{padding:16px}
  .pf-section > .flash{margin:0 16px 14px}
  .pf-foot{padding:12px 16px}
  .pf-row-control, .pf-row-actions, .pf-seg{flex:1 1 100%}
  .pf-row-actions > .pf-actions{flex:1 1 100%}
  .pf-row-actions .pf-btn, .pf-foot .pf-btn, .pf-expand-actions .pf-btn, .pf-actions .pf-btn{flex:1 1 auto}
  .pf-seg-btn{flex:1 1 0; min-height:44px}
  .pf-inline > .pf-input, .pf-inline > .pf-input.tf-code-input{flex:1 1 100%; max-width:none}
  .pf-inline > .pf-btn{flex:1 1 auto}
  .pf-status, .pf-note{padding:18px 16px}
}


/* ----------------------------------------------------------------------------
   DASHBOARD REDESIGN (db-) — templates/aurora/pages/dashboard.njk + dashboard.js
   Health tiles, "Braucht Aufmerksamkeit", traffic chart, peers / gateways /
   server, live activity, security (24 h). Aurora tokens; small text in the
   light theme uses the profile's contrast inks (--pf-*). The two chart series
   colours were validated for colour-blind safety and contrast and are used
   as-is; they colour marks only (lines, area, bars, swatches) — never text.
   Status colours (good / warn / crit) mark status only and always come with
   an icon and a text label. Touch targets are 44px (36px on fine pointers).
   --------------------------------------------------------------------------- */
[data-theme="dark"]{
  --db-s1:#1fa391; --db-s2:#d97447;
  --db-good-ink:var(--pf-green-ink); --db-warn-ink:var(--amber); --db-crit-ink:var(--pf-red-ink);
  --db-muted:#9aaabb; --db-input:var(--pf-input); --db-tip-bg:var(--surface-3);
  --db-grid:rgba(255,255,255,.08); --db-cross:rgba(233,239,246,.45);
  --db-btn-bg:var(--pf-btn-bg); --db-accent-ink:var(--pf-teal-ink); --db-accent-bd:var(--pf-teal-bd);
}
[data-theme="light"]{
  --db-s1:#0e9b8a; --db-s2:#d9602f;
  --db-good-ink:var(--pf-green-ink); --db-warn-ink:#8a5f12; --db-crit-ink:var(--pf-red-ink);
  --db-muted:var(--muted); --db-input:var(--pf-input); --db-tip-bg:var(--surface);
  --db-grid:rgba(60,45,25,.10); --db-cross:rgba(44,39,32,.45);
  --db-btn-bg:var(--pf-btn-bg); --db-accent-ink:var(--pf-teal-ink); --db-accent-bd:var(--pf-teal-bd);
}

.db-page{max-width:1240px; margin:0 auto; display:flex; flex-direction:column; gap:18px; min-width:0}
.db-page [hidden]{display:none !important}
.db-page :focus-visible{outline:2px solid var(--teal); outline-offset:2px}
.db-sr{position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.db-mono{font-family:var(--font-mono); font-weight:600; font-variant-numeric:tabular-nums}
.db-num{text-align:right; font-family:var(--font-mono); font-variant-numeric:tabular-nums}

/* buttons + links */
.db-btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:0 16px; border-radius:11px;
  border:1px solid var(--line-2); background:var(--chip); color:var(--text); font:600 13.5px var(--font-body); text-decoration:none;
  cursor:pointer; white-space:nowrap; transition:background .15s, border-color .15s}
.db-btn:hover{border-color:var(--muted)}
.db-btn svg{width:15px; height:15px; flex:0 0 auto}
.db-btn-primary{background:var(--db-btn-bg); color:var(--btn-text); border:0; font-weight:700; padding:0 18px}
.db-btn-primary:hover{filter:brightness(1.06)}
.db-btn-accent{background:var(--teal-soft); border-color:var(--db-accent-bd); color:var(--db-accent-ink); font-weight:700}
.db-btn-sm{min-height:36px; padding:0 12px; font-size:12.5px; border-radius:9px}
.db-btn:disabled{opacity:.55; cursor:not-allowed}
.db-link, .db-card-link, .db-link-btn, .db-card-foot-link{color:var(--db-accent-ink); font-weight:700; text-decoration:none}
.db-link:hover, .db-card-link:hover, .db-link-btn:hover, .db-card-foot-link:hover{text-decoration:underline}
.db-link-btn{border:0; background:none; padding:0 4px; min-height:44px; font:700 13px var(--font-body); cursor:pointer}
.db-ghost-btn{min-height:36px; padding:0 12px; border-radius:9px; border:1px solid var(--line-2); background:transparent; color:var(--db-muted);
  font:600 12.5px var(--font-body); cursor:pointer}
.db-ghost-btn:hover, .db-ghost-btn[aria-pressed="true"]{color:var(--text); border-color:var(--muted)}
.db-icon-btn{width:44px; height:44px; flex:0 0 auto; display:grid; place-items:center; border-radius:10px; border:1px solid var(--line-2);
  background:transparent; color:var(--db-muted); cursor:pointer}
.db-icon-btn:hover{color:var(--text); border-color:var(--muted)}
@media (pointer:fine){
  .db-btn{min-height:40px}
  .db-btn-sm{min-height:34px}
  .db-icon-btn{width:38px; height:38px}
  .db-link-btn{min-height:36px}
}

/* status: icon circle, badge, dot — colour + icon + text together */
.db-status-ic{width:22px; height:22px; flex:0 0 auto; border-radius:50%; display:grid; place-items:center;
  color:var(--db-muted); background:var(--chip); border:1px solid var(--line-2)}
.db-status-ic svg{width:13px; height:13px}
.db-status-ic-lg{width:28px; height:28px}
.db-status-ic-lg svg{width:14px; height:14px}
.db-status-ic-sm{width:18px; height:18px}
.db-status-ic-sm svg{width:10px; height:10px}
.db-badge{display:inline-flex; align-items:center; gap:4px; padding:1px 8px; border-radius:999px; font-size:11px; font-weight:700; white-space:nowrap;
  color:var(--db-muted); background:var(--chip); border:1px solid var(--line-2)}
.db-badge svg{width:10px; height:10px}
.db-badge-sm{padding:0 6px; font-size:10.5px}
.db-dot{width:9px; height:9px; flex:0 0 auto; border-radius:50%; background:var(--faint)}
[data-state="good"] > .db-status-ic, .db-status-ic[data-state="good"], .db-badge[data-state="good"], .db-tile[data-state="good"] .db-tile-badge,
.db-act-ic[data-state="good"]{color:var(--db-good-ink); background:var(--green-bg); border-color:var(--green-bd)}
[data-state="warn"] > .db-status-ic, .db-status-ic[data-state="warn"], .db-badge[data-state="warn"], .db-tile[data-state="warn"] .db-tile-badge,
.db-act-ic[data-state="warn"]{color:var(--db-warn-ink); background:var(--amber-bg); border-color:var(--amber-bd)}
[data-state="crit"] > .db-status-ic, .db-status-ic[data-state="crit"], .db-badge[data-state="crit"], .db-tile[data-state="crit"] .db-tile-badge,
.db-act-ic[data-state="crit"]{color:var(--db-crit-ink); background:var(--red-bg); border-color:var(--red-bd)}
.db-status-ic[data-state="info"], .db-act-ic[data-state="info"]{color:var(--db-accent-ink); background:var(--teal-soft); border-color:var(--db-accent-bd)}
.db-dot[data-state="good"]{background:var(--green)}
.db-dot[data-state="warn"]{background:var(--amber)}
.db-dot[data-state="crit"]{background:var(--red)}

/* banners (unlicensed, gateway re-pairing) */
.db-banner{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; padding:12px 16px; border-radius:14px; border:1px solid var(--line-2); background:var(--chip)}
.db-banner-accent{background:var(--teal-soft); border-color:var(--db-accent-bd)}
.db-banner-warn{background:var(--amber-bg); border-color:var(--amber-bd); align-items:flex-start}
.db-banner-ic{width:28px; height:28px; flex:0 0 auto; border-radius:50%; display:grid; place-items:center; background:var(--surface); color:var(--db-accent-ink)}
.db-banner-warn .db-banner-ic{color:var(--db-warn-ink)}
.db-banner-ic svg{width:15px; height:15px}
.db-banner-text{flex:1 1 260px; min-width:0; font-size:13.5px; display:flex; flex-direction:column; gap:2px}
.db-banner-sub{color:var(--db-muted); font-size:13px}
.db-banner-list{margin:4px 0 0; padding-left:18px; font-size:13px}
.db-banner-list a{color:var(--db-accent-ink); font-weight:700}

/* "Was ist neu" strip */
.db-news{padding:8px 14px; border-radius:14px; background:var(--chip); border:1px solid var(--line)}
.db-news-row{display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px}
.db-news-badge{padding:2px 9px; border-radius:999px; font-size:11.5px; font-weight:700; color:var(--db-accent-ink); background:var(--teal-soft); border:1px solid var(--db-accent-bd); white-space:nowrap}
.db-news-text{flex:1 1 300px; min-width:0; font-size:13.5px}
.db-news-body{border-top:1px solid var(--line); padding-top:12px}

/* header */
.db-head{display:flex; flex-wrap:wrap; align-items:flex-end; gap:14px 20px}
.db-head-main{flex:1 1 380px; min-width:0}
.db-live{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--db-muted)}
.db-live-dot{width:8px; height:8px; border-radius:50%; background:var(--faint); flex:0 0 auto}
.db-live[data-state="live"] .db-live-dot, .db-live-chip .db-live-dot{background:var(--green)}
.db-live[data-state="stale"] .db-live-dot{background:var(--amber)}
.db-title{margin:6px 0 0; font-family:var(--font-display); font-weight:800; font-size:clamp(24px,3.2vw,32px); letter-spacing:-.025em; line-height:1.1}
.db-sub{margin:6px 0 0; color:var(--db-muted); font-size:14px; max-width:80ch}
.db-sub:empty{display:none}
.db-head-actions{display:flex; flex-wrap:wrap; gap:10px}

/* health tiles */
.db-tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px}
.db-tile{display:flex; flex-direction:column; gap:6px; padding:16px; border-radius:16px; min-width:0;
  background:linear-gradient(180deg,var(--surface),var(--surface-2)); border:1px solid var(--line); box-shadow:var(--shadow);
  color:var(--text); text-decoration:none; transition:border-color .15s, transform .15s}
.db-tile:hover{border-color:var(--line-2); transform:translateY(-1px)}
.db-tile-top{display:flex; align-items:center; gap:8px; min-width:0}
.db-tile-main{display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px}
.db-tile-label{font-size:12.5px; font-weight:700; color:var(--db-muted); min-width:0; overflow-wrap:break-word; hyphens:auto}
.db-tile-badge{margin-left:auto}
.db-tile-badge:empty{display:none}
.db-tile-value{font-family:var(--font-display); font-weight:700; font-size:26px; letter-spacing:-.02em; line-height:1.15; font-variant-numeric:tabular-nums}
.db-tile-sub{font-size:12.5px; color:var(--db-muted); min-height:1.5em}
.db-tile[data-state="loading"] .db-tile-value{color:var(--faint)}

/* rows + cards */
.db-row{display:flex; flex-wrap:wrap; gap:18px; align-items:stretch}
.db-row-bottom{align-items:flex-start}
.db-grid3{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:18px}
.db-card{min-width:0; background:linear-gradient(180deg,var(--surface),var(--surface-2)); border:1px solid var(--line);
  border-radius:18px; box-shadow:var(--shadow); padding:18px 20px}
.db-card-head{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 10px}
.db-card-head-rule{margin:-18px -20px 0; padding:16px 18px; border-bottom:1px solid var(--line); align-items:center}
.db-card-title{margin:0; font-family:var(--font-display); font-size:16px; font-weight:700; letter-spacing:-.01em}
.db-card-meta{font-size:12.5px; color:var(--db-muted)}
.db-card-link{margin-left:auto; font-size:12.5px}
.db-count{padding:1px 8px; border-radius:999px; font-size:12px; font-weight:700; color:var(--db-warn-ink); background:var(--amber-bg); border:1px solid var(--amber-bd)}
.db-count[data-state="crit"]{color:var(--db-crit-ink); background:var(--red-bg); border-color:var(--red-bd)}
.db-note{margin:10px 0 0; font-size:12.5px; color:var(--db-muted)}
.db-empty{margin:16px 0 0; padding:26px 16px; text-align:center; color:var(--db-muted); font-size:13px; border:1px dashed var(--line-2); border-radius:12px}
.db-empty-sm{padding:16px 12px; margin-top:12px}
.db-card-foot-link{display:inline-flex; align-items:center; min-height:44px; font-size:13px}

/* Braucht Aufmerksamkeit */
.db-problems{flex:1 1 340px; display:flex; flex-direction:column; padding-bottom:12px}
.db-plist{list-style:none; margin:0 -20px; padding:0}
.db-prow{display:flex; gap:12px; padding:14px 18px; border-bottom:1px solid var(--line)}
.db-prow-body{flex:1 1 auto; min-width:0}
.db-prow-head{display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px}
.db-prow-title{font-weight:700; font-size:14px; overflow-wrap:anywhere}
.db-prow-detail{margin-top:2px; color:var(--db-muted); font-size:12.5px; overflow-wrap:anywhere}
.db-prow-actions{margin-top:8px; display:flex; flex-wrap:wrap; gap:8px}
.db-prow-when{flex:0 0 auto; font-size:12px; color:var(--db-muted); white-space:nowrap}
.db-od{margin-top:10px}
.db-od-title{margin:0 0 4px; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--db-muted)}
.db-od-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px}
.db-od-row{display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; font-size:12.5px; color:var(--db-muted)}
.db-od-text{flex:1 1 auto; min-width:0}
.db-od-row .db-link{display:inline-flex; align-items:center; min-height:36px}

/* traffic */
.db-traffic{flex:2 1 560px}
.db-row-main[data-problems="0"] .db-traffic{flex-basis:100%}
.db-traffic-head{display:flex; flex-wrap:wrap; align-items:flex-start; gap:12px 20px}
.db-traffic-sum{flex:1 1 260px; min-width:0}
.db-hero{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px; margin-top:6px}
.db-hero-value{font-family:var(--font-display); font-weight:800; font-size:40px; letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums}
.db-hero-label{font-size:13px; color:var(--db-muted)}
.db-split{display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; margin-top:8px; font-size:13px}
.db-split-item{display:inline-flex; align-items:center; gap:6px}
.db-split-rate{color:var(--db-muted)}
.db-key{display:inline-block; width:14px; height:3px; border-radius:2px; flex:0 0 auto}
.db-key-s1{background:var(--db-s1)}
.db-key-s2{background:var(--db-s2)}
.db-traffic-ctl{display:flex; flex-direction:column; align-items:flex-end; gap:8px}
.db-seg{display:inline-flex; padding:3px; gap:3px; border-radius:11px; background:var(--db-input); border:1px solid var(--line)}
.db-seg-btn{min-height:38px; min-width:44px; padding:0 11px; border-radius:8px; border:0; background:transparent; color:var(--db-muted);
  font:600 12.5px var(--font-body); cursor:pointer; white-space:nowrap}
.db-seg-btn:hover{color:var(--text)}
.db-seg-btn[aria-pressed="true"]{background:var(--surface-3); color:var(--text); box-shadow:0 2px 8px -4px rgba(0,0,0,.35)}
@media (pointer:fine){ .db-seg-btn{min-height:32px} }

.db-chart{margin-top:16px}
.db-chart-frame{display:flex; gap:6px}
.db-chart-y{position:relative; flex:0 0 52px; height:200px}
.db-chart-ytick{position:absolute; right:0; transform:translateY(-50%); font-size:11px; color:var(--db-muted); white-space:nowrap; font-variant-numeric:tabular-nums}
.db-chart-main{flex:1 1 auto; min-width:0}
.db-chart-plot{position:relative; height:200px; border-radius:4px; touch-action:pan-y; cursor:crosshair}
.db-chart-svg{display:block; width:100%; height:100%; overflow:visible}
.db-grid{stroke:var(--db-grid); stroke-width:1}
.db-area-s1{fill:var(--db-s1); fill-opacity:.10}
.db-line{fill:none; stroke-width:2; stroke-linejoin:round; stroke-linecap:round}
.db-line-s1{stroke:var(--db-s1)}
.db-line-s2{stroke:var(--db-s2)}
.db-cross{stroke:var(--db-cross); stroke-width:1}
.db-chart-dot{position:absolute; width:10px; height:10px; border-radius:50%; transform:translate(-50%,-50%); pointer-events:none; box-shadow:0 0 0 2px var(--surface)}
.db-dot-s1{background:var(--db-s1)}
.db-dot-s2{background:var(--db-s2)}
.db-tip{position:absolute; top:4px; min-width:170px; padding:10px 12px; border-radius:12px; background:var(--db-tip-bg); border:1px solid var(--line-2);
  box-shadow:0 12px 30px -12px rgba(0,0,0,.6); pointer-events:none; z-index:2; font-size:12.5px}
.db-tip-title{font-weight:700; margin-bottom:4px}
.db-tip-row{display:flex; align-items:center; gap:6px}
.db-tip-row strong{margin-left:auto; padding-left:12px}
.db-chart-x{position:relative; height:22px}
.db-chart-xtick{position:absolute; top:5px; transform:translateX(-50%); font-size:11px; color:var(--db-muted); white-space:nowrap}
.db-chart-xtick-last{transform:translateX(-80%)}
.db-legend{display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:8px; font-size:12.5px; color:var(--db-muted)}
.db-legend-item{display:inline-flex; align-items:center; gap:6px}
.db-table-wrap{margin-top:14px; max-height:260px; overflow:auto; border:1px solid var(--line); border-radius:12px}
.db-table{width:100%; border-collapse:collapse; font-size:13px}
.db-table th, .db-table td{padding:7px 12px; border-top:1px solid var(--line); text-align:left; font-weight:500}
.db-table thead th{position:sticky; top:0; background:var(--surface-2); border-top:0; color:var(--db-muted); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em}
.db-table .db-num{text-align:right}

/* peers */
.db-counts{display:flex; flex-wrap:wrap; gap:8px 22px; margin:12px 0 14px}
.db-count-value{font-family:var(--font-display); font-weight:800; font-size:26px; line-height:1.1; font-variant-numeric:tabular-nums}
.db-count-label{font-size:12px; color:var(--db-muted)}
.db-bars{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px}
.db-bar-head{display:flex; align-items:center; gap:8px; font-size:13px; min-width:0}
.db-bar-name{font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.db-bar-meta{color:var(--db-muted); font-size:12px; white-space:nowrap}
.db-bar-row{display:flex; align-items:center; gap:8px; margin-top:5px}
.db-bar-track{flex:1 1 auto; min-width:0; height:8px}
.db-bar{display:block; height:8px; border-radius:4px; background:var(--db-s1)}
.db-bar-value{flex:0 0 auto; font-family:var(--font-mono); font-size:12.5px; font-variant-numeric:tabular-nums}

/* gateways */
.db-gwlist{list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:10px}
.db-gw{padding:12px; border-radius:13px; background:var(--chip); border:1px solid var(--line)}
.db-gw-head{display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px}
.db-gw-name{font-weight:700; color:var(--text); text-decoration:none; min-width:0; overflow-wrap:anywhere}
.db-gw-name:hover{text-decoration:underline}
.db-gw-version{margin-left:auto; font:600 12px var(--font-mono); color:var(--db-muted)}
.db-gw-detail{margin-top:4px; font-size:12.5px; color:var(--db-muted)}
.db-gw .db-btn{margin-top:8px}
.db-gw-note{display:flex; align-items:center; gap:6px; margin-top:8px; font-size:12.5px}

/* server */
.db-meters{display:flex; flex-direction:column; gap:12px; margin-top:14px}
.db-meter-head{display:flex; align-items:baseline; gap:8px; font-size:13px; min-width:0}
.db-meter-label{font-weight:600}
.db-meter-detail{color:var(--db-muted); font-size:12px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.db-meter-value{margin-left:auto; font-weight:700; white-space:nowrap; font-variant-numeric:tabular-nums}
.db-meter{--db-meter:var(--db-s1)}
.db-meter[data-level="warn"]{--db-meter:var(--amber)}
.db-meter[data-level="crit"]{--db-meter:var(--red)}
.db-meter[data-level="none"]{--db-meter:var(--faint)}
.db-meter-track{margin-top:6px; height:8px; border-radius:4px; overflow:hidden; background:color-mix(in srgb, var(--db-meter) 18%, transparent)}
.db-meter-fill{height:100%; width:0; border-radius:4px; background:var(--db-meter); transition:width .5s cubic-bezier(.2,.7,.2,1)}
.db-au{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:16px; padding:12px; border-radius:13px; background:var(--chip); border:1px solid var(--line)}
.db-au > .db-status-ic{width:26px; height:26px}
.db-au-text{flex:1 1 180px; min-width:0}
.db-au-title{font-weight:700; font-size:13.5px}
.db-au-sub{font-size:12px; color:var(--db-muted)}
.db-au-notes{list-style:none; margin:4px 0 0; padding:0; display:flex; flex-direction:column; gap:4px}
.db-au-note{display:flex; align-items:center; gap:6px; font-size:12.5px}
.db-au-actions{flex:1 1 100%; display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding-left:36px}
.db-au:focus{outline:none}
.db-flash{animation:db-flash 1.2s ease 2; border-color:var(--teal)}
@keyframes db-flash{0%,100%{box-shadow:0 0 0 0 transparent} 40%{box-shadow:0 0 0 6px var(--teal-soft)}}
.db-details{margin-top:14px}
.db-details summary{cursor:pointer; min-height:36px; display:flex; align-items:center}
.db-pre{background:var(--surface-3); padding:10px 12px; border-radius:8px; font-size:11px; overflow-x:auto; border:1px solid var(--line)}

/* activity */
.db-activity{flex:3 1 520px; padding-bottom:6px}
.db-activity-head{gap:10px}
.db-live-chip{display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--db-muted)}
.db-chips{margin-left:auto; display:flex; flex-wrap:wrap; gap:6px}
.db-chip{min-height:36px; padding:0 12px; border-radius:999px; border:1px solid var(--line-2); background:transparent; color:var(--db-muted);
  font:600 12px var(--font-body); cursor:pointer; white-space:nowrap}
.db-chip:hover{color:var(--text)}
.db-chip[aria-pressed="true"]{border-color:var(--db-accent-bd); background:var(--teal-soft); color:var(--db-accent-ink)}
.db-feed{list-style:none; margin:0; padding:8px 0 4px}
.db-act{display:flex; gap:12px; padding:10px 0; border-bottom:1px solid var(--line)}
.db-act-ic{width:30px; height:30px; flex:0 0 auto; border-radius:50%; display:grid; place-items:center; border:1px solid var(--line-2); background:var(--chip); color:var(--db-muted)}
.db-act-body{flex:1 1 auto; min-width:0}
.db-act-text{font-size:13.5px; overflow-wrap:anywhere}
.db-act-meta{display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; font-size:12px; color:var(--db-muted)}
.db-act-time{flex:0 0 auto; font-size:12px; color:var(--db-muted); white-space:nowrap}
.db-act-new{animation:db-new 1.6s ease}
@keyframes db-new{from{background:var(--teal-soft)} to{background:transparent}}

/* security */
.db-security{flex:2 1 340px}
.db-subtiles{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:14px}
.db-subtiles:not(:has(.db-subtile:not([hidden]))){display:none}
.db-subtile{padding:12px; border-radius:13px; background:var(--chip); border:1px solid var(--line); min-width:0}
.db-subtile-label{font-size:12px; color:var(--db-muted); font-weight:600}
.db-subtile-main{display:flex; align-items:flex-end; gap:10px; margin-top:4px}
.db-subtile-value{font-family:var(--font-display); font-weight:800; font-size:26px; line-height:1; font-variant-numeric:tabular-nums}
.db-subtile > .db-subtile-value{margin-top:4px}
.db-subtile-sub{font-size:12px; color:var(--db-muted); margin-top:4px}
.db-spark{flex:1 1 auto; min-width:0; height:28px}
.db-spark-line{fill:none; stroke:var(--db-muted); stroke-width:2; stroke-linejoin:round; vector-effect:non-scaling-stroke}
.db-spark-last{fill:none; stroke:var(--db-s1); stroke-width:2; stroke-linecap:round; vector-effect:non-scaling-stroke}
.db-checkrow{display:flex; align-items:center; gap:12px; margin-top:14px; padding:12px; min-height:44px; border-radius:13px;
  border:1px solid var(--line-2); background:var(--chip); color:var(--text); text-decoration:none}
.db-checkrow[data-state="warn"]{border-color:var(--amber-bd); background:var(--amber-bg)}
.db-checkrow[data-state="crit"]{border-color:var(--red-bd); background:var(--red-bg)}
.db-checkrow[data-state="good"]{border-color:var(--green-bd)}
.db-checkrow > .db-status-ic{width:26px; height:26px}
.db-checkrow-text{flex:1 1 auto; min-width:0; display:flex; flex-direction:column}
.db-checkrow-title{font-weight:700; font-size:13.5px}
.db-checkrow-sub{font-size:12px; color:var(--db-muted)}
.db-checkrow-go{font-size:12.5px; font-weight:700; color:var(--db-accent-ink)}
.db-checkrow:hover .db-checkrow-go{text-decoration:underline}

@media (prefers-reduced-motion: reduce){
  .db-tile, .db-meter-fill{transition:none}
  .db-act-new, .db-flash{animation:none}
}
@media (max-width:640px){
  .db-page{gap:14px}
  .db-head-actions, .db-head-actions .db-btn{flex:1 1 auto}
  .db-tiles{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
  .db-tile{padding:13px}
  .db-tile-value{font-size:22px}
  .db-card{padding:16px}
  .db-card-head-rule{margin:-16px -16px 0; padding:14px 16px}
  .db-plist{margin:0 -16px}
  .db-prow{padding:12px 16px; flex-wrap:wrap}
  .db-prow-when{order:3; flex-basis:100%; padding-left:40px}
  .db-au-actions{padding-left:0}
  .db-traffic-ctl{align-items:stretch; flex:1 1 100%}
  .db-seg{display:flex}
  .db-seg-btn{flex:1 1 0}
  .db-hero-value{font-size:34px}
  .db-chart-y{flex-basis:44px}
  .db-chips{margin-left:0; width:100%}
  .db-subtiles{gap:10px}
  .db-grid3{grid-template-columns:minmax(0,1fr)}
  .db-traffic, .db-problems, .db-activity, .db-security{flex-basis:100%}
}
@media (max-width:380px){
  .db-tiles{grid-template-columns:minmax(0,1fr)}
}


/* ----------------------------------------------------------------------------
   SETTINGS PAGE (st-) — grouped section nav, cards with label/control rows,
   one sticky save bar per section (templates/aurora/pages/settings.njk,
   public/js/settings.js). Text inks in the light theme come from the
   profile/dashboard tokens (--pf-*, --db-*); status colours always come with
   a text label. Touch targets 44px (36–40px on fine pointers).
   --------------------------------------------------------------------------- */
[data-theme="dark"]{ --st-knob-off:#c9d3dd; --st-row-hover:rgba(255,255,255,.025); }
[data-theme="light"]{ --st-knob-off:#ffffff; --st-row-hover:rgba(60,45,25,.025); }

.st-page{width:100%; max-width:1240px; margin:0 auto; min-width:0}
.st-page [hidden], .st-modal [hidden]{display:none !important}
.st-page :focus-visible, .st-modal :focus-visible{outline:2px solid var(--teal); outline-offset:2px}
.st-sr{position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.st-mono{font-family:var(--font-mono); font-variant-numeric:tabular-nums}
.st-strong{font-weight:700}
.st-wrap{overflow-wrap:anywhere}
.st-push{margin-left:auto}
.st-crit{color:var(--pf-red-ink)}
.st-warn-text{color:var(--db-warn-ink)}
.st-link{color:var(--pf-teal-ink); font-weight:700}
.st-link-btn{border:0; background:none; padding:0; min-height:32px; color:var(--pf-teal-ink); font:600 12.5px var(--font-body); cursor:pointer}
.st-link-btn:hover{text-decoration:underline}
.st-pad{margin:0 22px 14px}

/* header */
.st-head{display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px 20px; margin-bottom:20px}
.st-head-main{flex:1 1 300px; min-width:0}
.st-title{margin:0; font-family:var(--font-display); font-weight:800; font-size:clamp(24px,3vw,30px); letter-spacing:-.025em; line-height:1.05}
.st-search{flex:0 1 380px; min-width:0; display:flex; align-items:center; gap:10px; height:44px; padding:0 12px; border-radius:11px;
  border:1px solid var(--line-2); background:var(--pf-input); color:var(--db-muted)}
.st-search:focus-within{border-color:var(--teal); box-shadow:0 0 0 3px var(--glow1)}
.st-search input{flex:1 1 auto; min-width:0; height:100%; padding:0; border:0; outline:0; background:transparent; color:var(--text); font:500 13.5px var(--font-body)}
.st-search input:focus{box-shadow:none}
.st-search-count{flex:0 0 auto; font-size:12px; color:var(--db-muted); white-space:nowrap}

/* layout + section nav */
.st-layout{display:grid; grid-template-columns:248px minmax(0,1fr); gap:24px; align-items:start}
.st-compact{display:none}
.st-nav{position:sticky; top:0; display:flex; flex-direction:column; gap:2px; padding:10px; border-radius:18px;
  background:var(--chip); border:1px solid var(--line); max-height:calc(100vh - var(--topbar-h) - 40px); overflow-y:auto}
.st-nav-head{padding:12px 10px 4px; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--pf-faint)}
.st-nav-group:first-child .st-nav-head{padding-top:4px}
.st-nav-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px}
.st-nav-item{display:flex; align-items:center; gap:10px; width:100%; min-height:42px; padding:0 10px; border-radius:10px; border:0;
  background:transparent; color:var(--text); font:500 13.5px var(--font-body); cursor:pointer; text-align:left}
.st-nav-item svg{flex:0 0 auto; color:var(--db-muted)}
.st-nav-item:hover{background:var(--surface-2)}
.st-nav-item[aria-current="page"]{background:var(--teal-soft); color:var(--pf-teal-ink); font-weight:700}
.st-nav-item[aria-current="page"] svg{color:var(--pf-teal-ink)}
.st-nav-label{flex:1 1 auto; min-width:0}
.st-nav-dot{width:8px; height:8px; flex:0 0 auto; border-radius:50%; background:var(--amber)}
.st-nav-empty{margin:8px 10px; font-size:12.5px; color:var(--db-muted)}
.st-pro{display:inline-flex; align-items:center; padding:0 7px; border-radius:999px; font:700 10.5px var(--font-body); line-height:1.6;
  color:var(--db-warn-ink); background:var(--amber-bg); border:1px solid var(--amber-bd); vertical-align:2px; white-space:nowrap}
.st-pro-sm{padding:0 6px; font-size:10px}

/* sections + cards */
.st-main{min-width:0; display:flex; flex-direction:column; gap:18px}
.st-section{display:flex; flex-direction:column; gap:18px; min-width:0}
.st-sec-title{margin:0; font-family:var(--font-display); font-weight:800; font-size:24px; letter-spacing:-.02em}
.st-sec-title:focus{outline:none}
.st-sec-desc{margin:6px 0 0; color:var(--db-muted); font-size:14px; max-width:72ch}
.st-card{min-width:0; background:linear-gradient(180deg,var(--surface),var(--surface-2)); border:1px solid var(--line); border-radius:18px;
  box-shadow:var(--shadow); overflow:hidden}
.st-card-danger{border-color:var(--red-bd)}
.st-card.st-search-miss{display:none}
.st-card-head{display:flex; flex-wrap:wrap; align-items:flex-start; gap:8px 14px; padding:18px 22px; border-bottom:1px solid var(--line)}
.st-card-headtext{flex:1 1 260px; min-width:0}
.st-card-title{margin:0; font-family:var(--font-display); font-size:16px; font-weight:700; letter-spacing:-.01em}
.st-card-desc{margin:4px 0 0; color:var(--db-muted); font-size:13px; max-width:72ch}
.st-card-desc-side{margin:2px 0 0; font-size:12.5px}
.st-card-desc-side:empty{display:none}
.st-card-foot{display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:10px; padding:14px 22px; border-top:1px solid var(--line); background:var(--chip)}
.st-card-pad{padding:14px 22px 18px}
.st-src{padding:10px 22px 0}
.st-src:not(:has(> :not([hidden]))){display:none}
.st-foot-left{margin-right:auto}
.st-foot-msg{font-size:13px; color:var(--db-muted)}
.st-foot-msg[data-state="good"]{color:var(--pf-green-ink)}
.st-foot-msg[data-state="crit"], .st-foot-msg[data-state="warn"]{color:var(--pf-red-ink)}
.st-btnrow{display:flex; flex-wrap:wrap; align-items:center; gap:10px}

/* label / control rows */
.st-row{display:flex; flex-wrap:wrap; align-items:center; gap:10px 24px; padding:16px 22px; border-top:1px solid var(--line)}
.st-card-head + .st-row, .st-card-head + [data-st-show] > .st-row:first-child, .st-row-first{border-top:0}
.st-row-text{flex:1 1 240px; min-width:0; display:flex; flex-direction:column; gap:3px}
.st-label{font-weight:600; font-size:14px}
.st-hint{color:var(--db-muted); font-size:12.5px; max-width:62ch}
.st-err{color:var(--pf-red-ink); font-size:12.5px; font-weight:600}
.st-err-block{flex-basis:100%}
.st-row-ctl{flex:1 1 280px; min-width:0; display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:8px}
.st-row-ctl-stack{flex-direction:column; align-items:stretch; flex:0 1 360px; margin-left:auto}
.st-row-ctl-stack .st-input{max-width:none}
.st-row-stack{flex-direction:column; align-items:stretch}
.st-row-stack .st-textarea{width:100%}
.st-row-read .st-row-ctl{gap:6px}
.st-read{font-weight:600; text-align:right; overflow-wrap:anywhere}
.st-read.st-mono{font-size:13.5px}
.st-unit{min-width:44px; font-size:13px; color:var(--db-muted)}

.st-input, .st-select{width:100%; max-width:360px; height:44px; padding:0 12px; border-radius:11px; border:1px solid var(--line-2);
  background:var(--pf-input); color:var(--text); font:500 14px var(--font-body); box-sizing:border-box}
.st-select{padding:0 10px; font-weight:600}
.st-select-lg{height:48px; max-width:none; font-size:15px; font-weight:700}
.st-input.st-mono{font:600 13.5px var(--font-mono)}
.st-input-num{width:120px; font-family:var(--font-mono); font-weight:600}
.st-w-xs{max-width:140px} .st-w-sm{max-width:180px} .st-w-md{max-width:260px} .st-w-full{max-width:none}
.st-grow{flex:1 1 240px; max-width:none}
.st-input:focus, .st-select:focus, .st-textarea:focus{border-color:var(--teal); box-shadow:0 0 0 3px var(--glow1); outline:0}
.st-input[aria-invalid="true"], .st-select[aria-invalid="true"], .st-textarea[aria-invalid="true"]{border-color:var(--red)}
.st-input:disabled, .st-select:disabled, .st-textarea:disabled{background:transparent; border-style:dashed; color:var(--db-muted); cursor:not-allowed}
.st-input::placeholder, .st-textarea::placeholder{color:var(--pf-faint)}
.st-textarea{display:block; padding:10px 12px; border-radius:11px; border:1px solid var(--line-2); background:var(--pf-input); color:var(--text);
  font:500 13px var(--font-mono); resize:vertical; box-sizing:border-box}
.st-color{width:52px; height:44px; padding:4px; border:1px solid var(--line-2); border-radius:11px; background:var(--pf-input); cursor:pointer}

/* switch (role=switch) */
.st-switch{flex:0 0 auto; display:flex; justify-content:flex-start; width:48px; height:28px; padding:3px; border-radius:999px; cursor:pointer;
  border:1px solid var(--line-2); background:var(--surface-3); transition:background .15s}
.st-switch .st-knob{width:20px; height:20px; border-radius:50%; background:var(--st-knob-off); box-shadow:0 1px 2px rgba(0,0,0,.3); transition:transform .15s}
.st-switch[aria-checked="true"]{background:var(--pf-btn-bg); border-color:transparent}
.st-switch[aria-checked="true"] .st-knob{background:#fff; transform:translateX(20px)}
.st-switch:disabled{opacity:.5; cursor:not-allowed}

/* segmented */
.st-seg{display:inline-flex; flex-wrap:wrap; gap:4px; padding:4px; border-radius:13px; background:var(--pf-input); border:1px solid var(--line)}
.st-seg-btn{min-height:38px; padding:0 13px; border-radius:9px; border:0; background:transparent; color:var(--db-muted); font:600 13px var(--font-body); cursor:pointer}
.st-seg-btn:hover{color:var(--text)}
.st-seg-btn[aria-pressed="true"]{background:var(--surface-3); color:var(--text); box-shadow:0 2px 8px -4px rgba(0,0,0,.35)}
.st-seg-btn:disabled{opacity:.55; cursor:not-allowed}
.st-seg[aria-invalid="true"]{border-color:var(--red)}

/* range */
.st-range-ctl{justify-content:stretch}
.st-range{flex:1 1 200px; accent-color:var(--db-s1)}
.st-range-out{min-width:56px; text-align:right; font-weight:700; font-size:14px}

/* buttons */
.st-btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:40px; padding:0 14px; border-radius:10px;
  border:1px solid var(--line-2); background:var(--chip); color:var(--text); font:600 13px var(--font-body); text-decoration:none;
  cursor:pointer; white-space:nowrap; box-sizing:border-box}
.st-btn:hover{border-color:var(--muted)}
.st-btn-primary{background:var(--pf-btn-bg); color:var(--btn-text); border:0; font-weight:700; padding:0 18px; min-height:44px}
.st-btn-primary:hover{filter:brightness(1.06)}
.st-btn-danger{color:var(--pf-red-ink); border-color:var(--red-bd); background:var(--red-bg)}
.st-btn-ghost{background:transparent}
.st-btn-sm{min-height:36px; padding:0 12px; font-size:12.5px; border-radius:9px}
.st-btn-dashed{min-height:44px; padding:0 16px; border-style:dashed; background:transparent; color:var(--pf-teal-ink); font-weight:700; font-size:13.5px}
.st-btn:disabled{opacity:.55; cursor:not-allowed; filter:none}
.st-btn.is-loading{opacity:.7; pointer-events:none}
.st-icon-btn{width:38px; height:38px; flex:0 0 auto; display:grid; place-items:center; border-radius:10px; border:1px solid transparent;
  background:transparent; color:var(--db-muted); cursor:pointer}
.st-icon-btn:hover{color:var(--text); border-color:var(--line-2)}
.st-icon-btn:disabled{opacity:.45; cursor:not-allowed}

/* notes, pills, licence */
.st-note{margin:14px 22px; padding:10px 14px; border-radius:12px; font-size:13px; background:var(--chip); border:1px solid var(--line-2)}
.st-note:empty{display:none}
.st-section > .st-note{margin:0}
.st-note-warn{background:var(--amber-bg); border-color:var(--amber-bd)}
.st-note-pro{display:flex; align-items:center; gap:8px}
.st-note[data-state="good"]{border-color:var(--green-bd); color:var(--pf-green-ink)}
.st-note[data-state="crit"]{border-color:var(--red-bd); background:var(--red-bg)}
.st-note-row{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px}
.st-lock{margin:14px 22px 0}
.st-lock:empty{display:none}
.st-pill{display:inline-flex; align-items:center; padding:2px 9px; border-radius:999px; font-size:11.5px; font-weight:700; white-space:nowrap;
  color:var(--db-muted); background:var(--chip); border:1px solid var(--line-2)}
.st-pill[data-state="good"]{color:var(--pf-green-ink); background:var(--green-bg); border-color:var(--green-bd)}
.st-pill[data-state="warn"]{color:var(--db-warn-ink); background:var(--amber-bg); border-color:var(--amber-bd)}
.st-pill[data-state="crit"]{color:var(--pf-red-ink); background:var(--red-bg); border-color:var(--red-bd)}
.st-pill[data-state="info"]{color:var(--pf-teal-ink); background:var(--teal-soft); border-color:var(--pf-teal-bd)}
.st-chip-accent{padding:1px 8px; border-radius:999px; font-size:11px; font-weight:700; color:var(--pf-teal-ink); background:var(--teal-soft); border:1px solid var(--pf-teal-bd); white-space:nowrap}

/* service / stat / version tiles */
.st-tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; padding:16px 22px 20px}
.st-tiles-pad{padding:18px 22px}
.st-tile, .st-stat{padding:14px; border-radius:14px; background:var(--chip); border:1px solid var(--line); min-width:0}
.st-tile-head{display:flex; align-items:center; gap:8px}
.st-tile-name{font-weight:700}
.st-tile-head .st-pill{margin-left:auto}
.st-dot{width:9px; height:9px; flex:0 0 auto; border-radius:50%; background:var(--faint)}
.st-tile[data-state="good"] .st-dot{background:var(--green)}
.st-tile[data-state="crit"] .st-dot{background:var(--red)}
.st-tile[data-state="warn"] .st-dot{background:var(--amber)}
.st-tile-detail{margin-top:4px; font-size:12.5px; color:var(--db-muted)}
.st-tile-actions{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.st-stat-label{font-size:12px; font-weight:600; color:var(--db-muted)}
.st-stat-value{margin-top:4px; font-family:var(--font-display); font-weight:800; font-size:20px; letter-spacing:-.01em}
.st-stat-sub{font-size:12px; color:var(--db-muted); min-height:1.4em}
.st-stat[data-state="crit"]{border-color:var(--red-bd)}
.st-stat[data-state="crit"] .st-stat-sub{color:var(--pf-red-ink)}
.st-bars{list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:8px}
.st-bar-head{display:flex; align-items:baseline; gap:8px; font-size:12.5px}
.st-bar-flag{font-size:11px; font-weight:700; color:var(--db-warn-ink)}
.st-bar-track{display:block; margin-top:4px; height:6px; border-radius:3px; background:color-mix(in srgb, var(--db-s1) 16%, transparent)}
.st-bar-fill{display:block; height:6px; border-radius:3px; background:var(--db-s1)}
.st-bar-warn{background:var(--amber)}

/* lists */
.st-list{list-style:none; margin:0; padding:0}
.st-list-top{border-top:1px solid var(--line)}
.st-li{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; padding:14px 22px; border-bottom:1px solid var(--line)}
.st-li:last-child{border-bottom:0}
.st-li-main{flex:1 1 240px; min-width:0}
.st-li-title{font-weight:700; overflow-wrap:anywhere}
.st-li-title.st-mono{font-weight:600; font-size:14px}
.st-li-sub{font-size:12.5px; color:var(--db-muted); overflow-wrap:anywhere}
.st-li-extra{margin-top:4px}
.st-li-actions{display:flex; flex-wrap:wrap; align-items:center; gap:8px}
.st-li-actions-wrap{flex-basis:100%}
.st-li-pills{display:flex; flex-wrap:wrap; gap:6px}
.st-li-edit .st-formline{padding:0; width:100%}
.st-li.st-paused{opacity:.75}
.st-empty{list-style:none; padding:16px 22px; color:var(--db-muted); font-size:13px; margin:0}
.st-tiles .st-empty, .st-chiplist .st-empty, .st-tags .st-empty{padding:0}
.st-colordot{width:12px; height:12px; flex:0 0 auto; border-radius:50%}
.st-typebadge{padding:4px 8px; border-radius:8px; font:700 11px var(--font-mono); background:var(--surface-3); border:1px solid var(--line-2)}
.st-result{flex-basis:100%; display:flex; flex-direction:column; gap:6px; padding:8px 10px; border-radius:8px; font-size:12.5px; border:1px solid var(--line)}
.st-result[data-state="good"]{color:var(--pf-green-ink); background:var(--green-bg); border-color:var(--green-bd)}
.st-result[data-state="crit"]{color:var(--pf-red-ink); background:var(--red-bg); border-color:var(--red-bd)}
.st-result .st-li-sub{color:var(--text)}
.st-code{display:block; padding:6px 8px; font:500 11.5px var(--font-mono); white-space:pre-wrap; overflow-wrap:anywhere; background:var(--chip); border:1px solid var(--line); border-radius:7px; color:var(--text)}
.st-code.st-crit{color:var(--pf-red-ink); border-color:var(--red-bd); background:var(--red-bg)}
.st-warnlist{margin:0; padding-left:18px; color:var(--db-warn-ink)}
.st-tfiles{flex-basis:100%; border-top:1px dashed var(--line-2); padding-top:8px}
.st-sublist{list-style:none; margin:4px 0; padding:0}
.st-sublist li{display:flex; flex-wrap:wrap; gap:4px 12px; padding:6px 0; font-size:12.5px; border-bottom:1px solid var(--line)}

/* add forms, chips, tags */
.st-addline{display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:16px 22px; border-top:1px solid var(--line)}
.st-formline{display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px; padding:14px 22px 18px; border-top:1px solid var(--line)}
.st-formline-end{padding:0; border:0}
.st-fl{display:flex; flex-direction:column; gap:6px; min-width:0}
.st-fl .st-input, .st-fl .st-select{max-width:none}
.st-fl-2{flex:2 1 180px}
.st-fl-3{flex:3 1 220px}
.st-fl-label{font-size:12.5px; font-weight:600; color:var(--db-muted)}
.st-sub{padding:14px 22px 18px; border-top:1px solid var(--line)}
.st-sub .st-formline{padding:10px 0 0; border:0}
.st-sub-title{margin:0 0 8px; font-weight:700; font-size:14px}
.st-chiplist{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.st-chiprow{display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; padding:10px 12px; border-radius:12px; background:var(--chip); border:1px solid var(--line)}
.st-chiprow > :last-child{margin-left:auto}
.st-tags{list-style:none; margin:0; display:flex; flex-wrap:wrap; gap:8px; padding:16px 22px}
.st-tag{display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:0 4px 0 12px; border-radius:999px; border:1px solid var(--line-2); font-size:13px; font-weight:600}
.st-tag-n{color:var(--db-muted); font-weight:500}
.st-tag-x{width:30px; height:30px; border-radius:50%; border:0; background:transparent; color:var(--db-muted); cursor:pointer; font-size:16px; line-height:1}
.st-tag-x:hover{color:var(--pf-red-ink); background:var(--red-bg)}

/* client policy form (client-policy-form.js markup) */
.st-cp{padding:8px 22px 16px; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:4px 24px}
.st-cp .form-group{margin:0; padding:10px 0; display:flex; flex-direction:column; gap:6px}
.st-cp .form-label{margin:0; font-size:13.5px; font-weight:600; color:var(--text)}
.st-cp select{width:100%; height:44px; padding:0 10px; border-radius:11px; border:1px solid var(--line-2); background:var(--pf-input); color:var(--text); font:600 13.5px var(--font-body)}
.st-cp label{min-height:32px}
.st-cp input[type="checkbox"]{width:18px; height:18px; accent-color:var(--db-s1)}
.st-cp .form-hint{margin:0; color:var(--db-muted); font-size:12px}

/* event matrix */
.st-matrix-wrap{overflow-x:auto; padding:6px 22px 18px}
.st-matrix{width:100%; min-width:460px; border-collapse:collapse; font-size:13.5px}
.st-matrix thead th{padding:10px 8px; text-align:left; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--db-muted)}
.st-matrix .st-mx-group th{padding:14px 8px 6px; text-align:left; font-size:12px; font-weight:700; color:var(--pf-teal-ink)}
.st-matrix td{padding:8px; border-top:1px solid var(--line)}
.st-matrix tbody tr:not(.st-mx-group):hover td{background:var(--st-row-hover)}
.st-matrix th.st-mx-c, .st-matrix td.st-mx-c{width:110px; text-align:center}
.st-cb{width:18px; height:18px; accent-color:var(--db-s1); cursor:pointer}
.st-cb:disabled{cursor:not-allowed}
.st-mx-hooks{font:600 13px var(--font-mono); color:var(--text)}
.st-mx-hooks[data-on="0"]{color:var(--pf-faint)}

/* passphrase strength */
.st-strength{display:flex; align-items:center; gap:10px; min-height:20px; font-size:12px; color:var(--db-muted)}
.st-meter{display:inline-flex; gap:3px; flex:0 0 auto}
.st-meter i{width:20px; height:4px; border-radius:2px; background:var(--line-2)}
.st-strength[data-level="short"] .st-meter i:nth-child(-n+1){background:var(--red)}
.st-strength[data-level="weak"] .st-meter i:nth-child(-n+2){background:var(--amber)}
.st-strength[data-level="ok"] .st-meter i:nth-child(-n+3){background:var(--teal)}
.st-strength[data-level="strong"] .st-meter i{background:var(--green)}
.st-strength.st-mismatch, .st-strength[data-level="short"]{color:var(--pf-red-ink)}
.st-strength[data-level="strong"]{color:var(--pf-green-ink)}

/* maintenance window timeline */
.st-timeline{padding:4px 22px 20px}
.st-tl-caption{margin-bottom:6px; font-size:12.5px; color:var(--db-muted)}
.st-tl-bar{position:relative; height:34px; border-radius:10px; overflow:hidden; background:color-mix(in srgb, var(--db-s1) 16%, transparent)}
.st-tl-win{position:absolute; top:0; bottom:0; background:var(--db-s1)}
.st-tl-now{position:absolute; top:0; bottom:0; width:2px; background:var(--text)}
.st-tl-axis{display:flex; justify-content:space-between; margin-top:4px; font-size:11px; color:var(--db-muted)}
.st-cmds{padding:0 22px 18px; display:flex; flex-direction:column; gap:8px}
.st-pre{margin:0; padding:10px 12px; font:500 12px/1.6 var(--font-mono); white-space:pre; overflow-x:auto; background:var(--surface-3); border:1px solid var(--line); border-radius:8px}

/* licence */
.st-plan{display:flex; flex-wrap:wrap; align-items:center; gap:16px; padding:18px 22px}
.st-plan-mark{width:56px; height:56px; flex:0 0 auto; display:grid; place-items:center; border-radius:16px; background:var(--teal-soft);
  color:var(--pf-teal-ink); border:1px solid var(--pf-teal-bd); font-family:var(--font-display); font-weight:800; font-size:20px}
.st-plan-text{flex:1 1 240px; min-width:0}
.st-plan-name{font-family:var(--font-display); font-weight:800; font-size:22px}
.st-plan-meta{font-size:13px; color:var(--db-muted)}
.st-lic-form{border-top:1px solid var(--line)}
.st-lic-form .st-row:first-child{border-top:0}
.st-features{list-style:none; margin:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr)); gap:8px; padding:16px 22px 20px}
.st-feature{display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:12px; background:var(--chip); border:1px solid var(--line); min-width:0}
.st-feature-ic{width:20px; height:20px; flex:0 0 auto; display:grid; place-items:center; border-radius:50%; color:var(--db-muted); background:var(--chip); border:1px solid var(--line-2)}
.st-feature[data-on="1"] .st-feature-ic{color:var(--pf-green-ink); background:var(--green-bg); border-color:var(--green-bd)}
.st-feature-name{font-size:13px; font-weight:600; min-width:0; overflow-wrap:break-word; hyphens:auto}
.st-feature-val{margin-left:auto; font-size:12px; color:var(--db-muted); white-space:nowrap}
.st-feature[data-on="1"][data-src="plan_default"]{border-style:dashed}
.st-feature[data-on="1"][data-src="plan_default"] .st-feature-ic{color:var(--amber); background:var(--amber-bg); border-color:var(--amber-bd)}
.st-feature[data-on="1"][data-src="plan_default"] .st-feature-val{color:var(--amber)}
.st-lic-derived-note{margin:14px 22px 0}

/* save bar */
/* .main is overflow:auto but grows with its content (the document scrolls), so
   it would be the sticky container and the bar would never stick. clip keeps
   horizontal overflow cut without making .main a scroll container. */
.main:has(> .st-page){overflow:visible; overflow-x:clip}
.st-savebar{position:sticky; bottom:16px; z-index:20; display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; padding:12px 16px;
  border-radius:16px; background:var(--db-tip-bg); border:1px solid var(--pf-teal-bd); box-shadow:0 18px 40px -16px rgba(0,0,0,.6)}
.st-savebar-dot{width:9px; height:9px; flex:0 0 auto; border-radius:50%; background:var(--amber)}
.st-savebar-text{flex:1 1 200px; font-weight:600}
.st-savebar-err{flex-basis:100%; order:5; color:var(--pf-red-ink); font-size:13px; font-weight:600}
.st-saved{margin:0; min-height:1.5em; font-size:12.5px; color:var(--db-muted)}

/* dialogs */
.st-dlg{display:flex; flex-direction:column; gap:14px}
.st-dlg-sub{display:block; margin-top:3px; color:var(--db-muted); font-size:13px; font-weight:500; font-family:var(--font-body)}
.st-dlg-text{margin:0; font-size:13.5px}
.st-modal .modal-foot{flex-wrap:wrap; align-items:center}
.st-modal .modal.modal-xl{max-width:860px}
.st-fieldset{border:0; margin:0; padding:0; min-width:0; display:flex; flex-direction:column; gap:8px}
.st-fieldset > legend.st-fl-label{margin-bottom:8px; padding:0}
.st-typecards{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px}
.st-typecard{display:flex; flex-direction:column; align-items:flex-start; gap:2px; min-height:64px; padding:10px 12px; border-radius:12px; text-align:left;
  border:1px solid var(--line-2); background:transparent; color:var(--text); font-family:var(--font-body); cursor:pointer}
.st-typecard b{font-weight:800; font-size:15px}
.st-typecard small{font-size:12px; color:var(--db-muted)}
.st-typecard[aria-pressed="true"]{border-color:var(--pf-teal-bd); background:var(--teal-soft)}
.st-typecard:disabled{opacity:.4; cursor:not-allowed}
.st-grid2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px}
.st-span2{grid-column:span 2}
.st-panel{display:flex; flex-direction:column; gap:6px; padding:14px; border-radius:14px; background:var(--chip); border:1px solid var(--line)}
.st-key{resize:none; font-size:12px; word-break:break-all}
.st-check{display:inline-flex; align-items:center; gap:10px; min-height:44px; font-weight:600; font-size:13.5px; cursor:pointer}
.st-check input{width:18px; height:18px; accent-color:var(--db-s1)}
.st-radios{display:flex; flex-wrap:wrap; gap:10px}
.st-radio{flex:1 1 220px; display:flex; align-items:flex-start; gap:10px; padding:10px 12px; border-radius:12px; border:1px solid var(--line-2); cursor:pointer; font-weight:600; font-size:13.5px}
.st-radio:has(input:checked){border-color:var(--pf-teal-bd); background:var(--teal-soft)}
.st-radio input{margin-top:3px; accent-color:var(--db-s1)}
.st-radio small{display:block; font-weight:500; font-size:12px; color:var(--db-muted)}
.st-wh-groups{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px}
.st-wh-group{margin:0; padding:8px 12px; border:1px solid var(--line); border-radius:12px; min-width:0}
.st-wh-legend{padding:0 4px; font-size:12px; font-weight:700; color:var(--pf-teal-ink)}
.st-wh-group .st-check{display:flex; min-height:36px; font-weight:500}

@media (pointer:fine){
  .st-btn{min-height:38px}
  .st-btn-sm{min-height:34px}
  .st-nav-item{min-height:38px}
}
@media (max-width:900px){
  .st-layout{grid-template-columns:minmax(0,1fr); gap:16px}
  .st-nav{display:none}
  .st-compact{display:block}
  .st-compact-label{display:block; margin-bottom:6px; font-size:12.5px; font-weight:600; color:var(--db-muted)}
  .st-savebar{bottom:calc(76px + env(safe-area-inset-bottom)); z-index:110}
  /* the quick-add button would cover Speichern while the bar is shown */
  body:has(#st-savebar:not([hidden])) .fab-wrap{display:none}
}
@media (max-width:640px){
  .st-matrix{min-width:0}
  .st-matrix th.st-mx-c, .st-matrix td.st-mx-c{width:68px; padding-left:4px; padding-right:4px}
  .st-matrix thead th{letter-spacing:.02em}
  .st-search{flex:1 1 100%}
  .st-card-head, .st-row, .st-li, .st-addline, .st-formline, .st-card-foot, .st-card-pad, .st-tiles, .st-tags, .st-sub, .st-plan, .st-features{padding-left:16px; padding-right:16px}
  .st-matrix-wrap, .st-timeline, .st-cmds, .st-cp{padding-left:16px; padding-right:16px}
  .st-note, .st-lock{margin-left:16px; margin-right:16px}
  .st-row-ctl{justify-content:flex-start}
  .st-row-ctl-stack{flex-basis:100%}
  .st-input, .st-select{max-width:none}
  .st-input-num{width:120px}
  .st-typecards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .st-grid2{grid-template-columns:minmax(0,1fr)}
  .st-span2{grid-column:auto}
  .st-savebar .st-btn{flex:1 1 auto}
}
@media (prefers-reduced-motion: reduce){
  .st-switch, .st-switch .st-knob{transition:none}
}


/* ============================================================================
 * §3 Security page: licence hint (lh-), security check (sc-), WAF assistant (wfa-) (was public/css/security.css)
 * ============================================================================ */

/* =============================================================================
   Release B security UI (docs/feature-release-b.md §1, §3, §10, §11).
   Loaded by templates/aurora/layout.njk right after aurora.css; uses the
   Aurora tokens (--surface*, --line*, --teal, --amber*, …). Sections:
     lh-   licence hint (public/js/license-hint.js), every page
     sc-   Sicherheits-Check page (security.njk / security.js)
     wfa-  WAF page tabs, assistant, own IPs, scanner ban, bans (waf-assistant.js)
   ========================================================================== */

/* ─── Licence hint (lh-) ─── */
.lh-hint { display: flex; gap: 10px; align-items: flex-start; margin-top: 10px; padding: 11px 13px; border: 1px solid var(--amber-bd); border-radius: var(--r-sm, 12px); background: var(--amber-bg); color: var(--text); font-size: 12.5px; line-height: 1.5; text-align: left; }
.lh-hint .lh-ic { flex: 0 0 auto; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: var(--surface); color: var(--amber); }
.lh-hint .lh-body { flex: 1 1 auto; min-width: 0; }
.lh-title { font-weight: 700; font-size: 13px; margin-bottom: 2px; }
.lh-text { color: var(--muted); }
.lh-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 8px; }
.lh-actions:empty { display: none; }
.lh-actions .btn { padding: 6px 11px; font-size: 12.5px; border-radius: 9px; }
.lh-link { color: var(--teal); font-weight: 600; text-decoration: none; }
.lh-link:hover { text-decoration: underline; }
.lh-msg { margin-top: 6px; font-weight: 600; }
.lh-msg-ok { color: var(--green); }
.lh-msg-warn { color: var(--amber); }
.lh-msg-error { color: var(--red); }
.lh-hint.lh-compact { padding: 8px 10px; margin-top: 8px; }
.lh-hint.lh-compact .lh-ic { width: 22px; height: 22px; }
.lh-host:empty { display: none; }
/* "Derived from your plan" (docs/feature-next-package.md §S2.3): a quiet line,
   not a lock — the feature IS on. Hidden unless the source is plan_default. */
.lh-src { display: inline-block; margin-top: 6px; font-size: 11.5px; color: var(--muted, var(--text)); }
[data-license-source]:empty { display: none; }
/* A locked block is dimmed and click-through (.feature-locked in pro.css):
   keep the hint inside readable and clickable, dim the rest instead. */
.feature-locked.lh-in-locked { opacity: 1; }
.feature-locked.lh-in-locked > :not(.lh-host) { opacity: .55; }
.feature-locked .lh-host, .feature-locked .lh-hint { pointer-events: auto; }
.wf-locked .wf-locked-hint-slot { margin-top: 4px; }

/* ─── Sicherheits-Check (sc-) ─── */
.sc-tabs { margin-bottom: 16px; }
.sc-tab-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px; padding: 0 6px; margin-left: 4px; border-radius: 999px; background: var(--surface-3); color: var(--muted); font-size: 11px; font-weight: 700; font-family: var(--font-mono); vertical-align: 1px; }
.sc-tab-count[hidden] { display: none; }
.tab.active .sc-tab-count { background: var(--teal-soft); color: var(--teal); }
#sc-refresh.sc-spinning svg { animation: au-spin .8s linear infinite; }
.sc-tiles.aurora-routes-kpis { margin-bottom: 14px; }
.aurora-routes-kpi.sc-tile-fail.sc-hot b { color: var(--coral); }
.aurora-routes-kpi.sc-tile-info.sc-hot b { color: var(--blue); }
.aurora-routes-kpi.sc-tile-pass b { color: var(--green); }
.sc-pending { display: flex; gap: 8px; align-items: center; margin: 0 0 14px; padding: 9px 12px; border: 1px solid var(--blue-bd); border-radius: var(--r-sm); background: var(--blue-bg); color: var(--text); font-size: 13px; }
.sc-pending[hidden] { display: none; }
.sc-checks { display: flex; flex-direction: column; gap: 16px; }
.sc-state { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 26px 18px; border: 1px dashed var(--line-2); border-radius: var(--r); color: var(--muted); font-size: 13.5px; justify-content: center; text-align: center; }
.sc-state.sc-error { border-color: var(--red-bd); color: var(--red); }
.sc-empty td .sc-state { border: 0; padding: 14px 6px; }
.sc-allgood { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border: 1px solid var(--green-bd); border-radius: var(--r-sm); background: var(--green-bg); color: var(--green); font-weight: 600; }
.card.sc-group { padding: 0; }
.card.sc-group::after { content: none; }
.sc-group-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px 12px; border-bottom: 1px solid var(--line); }
.sc-group-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--faint); flex: 0 0 auto; }
.sc-group-critical .sc-group-dot { background: var(--red); box-shadow: 0 0 0 4px var(--red-bg); }
.sc-group-warning .sc-group-dot { background: var(--amber); box-shadow: 0 0 0 4px var(--amber-bg); }
.sc-group-info .sc-group-dot { background: var(--blue); box-shadow: 0 0 0 4px var(--blue-bg); }
.sc-group-title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: -.01em; }
.sc-group-count { margin-left: auto; color: var(--faint); font-size: 12px; font-weight: 600; }
.sc-check { padding: 14px 18px 15px; border-bottom: 1px solid var(--line); }
.sc-check:last-child { border-bottom: 0; }
.sc-check.sc-k-pass, .sc-check.sc-k-na { padding-top: 11px; padding-bottom: 11px; }
.sc-check.sc-k-pass .sc-check-desc, .sc-check.sc-k-na .sc-check-desc { color: var(--faint); }
.sc-check-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.sc-check-title { margin: 0; font-size: 14px; font-weight: 700; letter-spacing: -.005em; font-family: var(--font-body); }
.sc-check-count { margin-left: auto; color: var(--muted); font-size: 12px; font-weight: 600; font-family: var(--font-mono); }
.tag.sc-pill { font-size: 11.5px; padding: 2px 9px; }
.sc-check-desc { margin: 6px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; max-width: 90ch; }
.sc-check-note { margin: 6px 0 0; color: var(--blue); font-size: 12.5px; }
.sc-items { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.sc-item { display: inline-flex; align-items: center; max-width: 100%; padding: 3px 10px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--chip); color: var(--text); font-family: var(--font-mono); font-size: 11.5px; text-decoration: none; }
.sc-item-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.sc-item:hover { border-color: var(--teal); color: var(--teal); }
.sc-link, .sc-items-more { padding: 0; border: 0; background: none; color: var(--teal); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.sc-link:hover { text-decoration: underline; }
.sc-copy { margin-top: 10px; }
.sc-copy-hint { color: var(--muted); font-size: 12px; margin-bottom: 5px; }
.sc-copy-text { margin: 0 0 8px; padding: 9px 11px; max-height: 180px; overflow: auto; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--text); font-family: var(--font-mono); font-size: 12px; line-height: 1.55; white-space: pre-wrap; word-break: break-all; user-select: all; }
.sc-copy-buffer { position: fixed; left: -9999px; top: 0; opacity: 0; }
.sc-check-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.sc-check-actions .btn svg, .sc-copy .btn svg { width: 13px; height: 13px; }
.sc-check-error { margin-top: 8px; padding: 8px 10px; border: 1px solid var(--red-bd); border-radius: 9px; background: var(--red-bg); color: var(--red); font-size: 12.5px; }
.sc-licence[hidden] { display: none; }
/* Exposure */
.toolbar.sc-toolbar { margin-bottom: 14px; }
.sc-toolbar .sc-search { flex: 1 1 240px; min-width: 0; }
.sc-toolbar .search-box input[type=search] { padding: 0; box-shadow: none; }
.sc-toolbar .filter-chip { white-space: nowrap; flex-shrink: 0; }
.sc-chip-n { margin-left: 4px; font-family: var(--font-mono); font-size: 11px; opacity: .8; }
.card.sc-card { padding: 0; }
.card.sc-card::after { content: none; }
.sc-card-head { display: flex; align-items: center; justify-content: flex-start; gap: 9px; padding: 14px 16px 12px; flex-wrap: wrap; }
.sc-card-sub { margin-left: auto; color: var(--muted); font-size: 12.5px; font-weight: 600; }
.sc-exp-intro, .sc-legend { margin: 0; padding: 10px 16px; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.sc-legend { padding-top: 10px; border-top: 1px solid var(--line); color: var(--faint); }
.sc-table-wrap { overflow-x: auto; }
.sc-exp-table.data-table th, .sc-exp-table.data-table td { padding: 11px 12px; }
.sc-exp-table th.sc-p, .sc-exp-table td.sc-p { text-align: center; white-space: nowrap; }
.sc-host-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.sc-host { font-weight: 600; overflow-wrap: anywhere; }
.sc-host-sub { margin-top: 2px; color: var(--faint); font-size: 11.5px; font-family: var(--font-mono); }
.tag.sc-unprot-tag { font-size: 10.5px; padding: 1px 7px; }
.sc-mono { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.sc-exp-target .sc-mono { white-space: nowrap; }
.tag.sc-type, .tag.sc-health { font-size: 11px; padding: 2px 8px; }
.sc-mark { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 24px; height: 22px; padding: 0 6px; border-radius: 7px; font-size: 11.5px; font-weight: 700; }
.sc-mark.sc-on { color: var(--green); background: var(--green-bg); }
.sc-mark.sc-off { color: var(--faint); }
.sc-mark-off { font-size: 15px; line-height: 1; }
.sc-mark.sc-na .sc-mark-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--line-2); }
.sc-mark.sc-tls { font-family: var(--font-mono); color: var(--muted); background: var(--chip); }
.sc-mark.sc-tls.sc-on { color: var(--green); background: var(--green-bg); }
.sc-exp-unprotected td:first-child { box-shadow: inset 3px 0 0 var(--amber); }
.sc-exp-open { text-align: right; white-space: nowrap; }
.btn.sc-open svg { width: 13px; height: 13px; }
@media (max-width: 1100px) {
  .sc-open-txt { display: none; }
}
@media (max-width: 720px) {
  .sc-card-sub { margin-left: 0; width: 100%; }
  .sc-toolbar .sc-search { flex: 1 1 100%; }
  .sc-exp-target .sc-mono { white-space: normal; overflow-wrap: anywhere; }
  /* Exposure table → one card per entry */
  .sc-exp-table thead { display: none; }
  .sc-exp-table, .sc-exp-table tbody { display: block; }
  .sc-exp-table tr.sc-exp-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
  .sc-exp-table tr.sc-exp-row td { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 0; border: 0; text-align: left; min-width: 0; }
  .sc-exp-table tr.sc-exp-row td[data-label]::before { content: attr(data-label); color: var(--faint); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
  .sc-exp-table td.sc-exp-host { grid-column: 1 / -2; }
  .sc-exp-table td.sc-exp-host::before { display: none; }
  .sc-exp-table td.sc-exp-open { grid-column: -2 / -1; grid-row: 1; align-items: flex-end; justify-content: flex-start; }
  .sc-exp-table td.sc-exp-target { grid-column: 1 / 3; }
  .sc-exp-table td.sc-exp-type, .sc-exp-table td.sc-exp-health { grid-column: span 1; }
  .sc-exp-table tr.sc-empty, .sc-exp-table tr.sc-empty td { display: block; }
  .sc-exp-unprotected td:first-child { box-shadow: none; }
  .sc-exp-table tr.sc-exp-unprotected { box-shadow: inset 3px 0 0 var(--amber); }
  .sc-group-head, .sc-check { padding-left: 14px; padding-right: 14px; }
  .sc-check-count { margin-left: 0; }
}

/* ─── WAF: tabs, assistant, own IPs, scanner ban, bans (wfa-) ─── */
.wfa-tabs { margin-bottom: 16px; }
.wfa-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px; padding: 0 6px; margin-left: 4px; border-radius: 999px; background: var(--surface-3); color: var(--muted); font-size: 11px; font-weight: 700; font-family: var(--font-mono); }
.wfa-count:empty { display: none; }
.wfa-panel[hidden] { display: none; }
.wfa-intro { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin: 0 0 14px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.wfa-intro p { margin: 0; flex: 1 1 420px; max-width: 90ch; }
.wfa-summary { font-weight: 600; color: var(--text); font-size: 12.5px; }
.wfa-routes { display: flex; flex-direction: column; gap: 14px; }
.wfa-state { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; padding: 24px 16px; border: 1px dashed var(--line-2); border-radius: var(--r); color: var(--muted); font-size: 13.5px; text-align: center; }
.wfa-state.wfa-error { border-color: var(--red-bd); color: var(--red); }
.wf-empty td .wfa-state { border: 0; padding: 10px 4px; }
.card.wfa-route { padding: 16px 18px; }
.card.wfa-route::after { content: none; }
.wfa-route.wfa-rd-ready { border-color: var(--green-bd); }
.wfa-route.wfa-rd-review { border-color: var(--amber-bd); }
.wfa-route-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.wfa-host { font-family: var(--font-mono); font-weight: 700; font-size: 14px; overflow-wrap: anywhere; }
.wfa-spacer { flex: 1 1 auto; }
.wfa-events-link { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; text-decoration: none; }
.wfa-facts { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 8px; color: var(--muted); font-size: 12.5px; }
.wfa-fact { display: inline-flex; align-items: center; gap: 5px; }
.wfa-hint { margin: 10px 0 0; padding: 8px 11px; border-radius: 9px; background: var(--chip); color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.wfa-hint-ready { background: var(--green-bg); color: var(--green); }
.wfa-hint-review { background: var(--amber-bg); color: var(--amber); }
.wfa-hint-block { background: var(--red-bg); color: var(--red); }
.wfa-sub-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 14px 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.wfa-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-sm); }
.wfa-rules-table.data-table th, .wfa-rules-table.data-table td { padding: 9px 11px; font-size: 12.5px; vertical-align: top; }
.wfa-msg { margin-top: 3px; color: var(--muted); font-size: 12px; max-width: 42ch; }
.wfa-c-num { font-family: var(--font-mono); text-align: right; white-space: nowrap; }
.wfa-rules-table th:nth-child(2), .wfa-rules-table th:nth-child(3) { text-align: right; }
.wfa-c-paths { max-width: 260px; }
.wfa-path { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); }
.wfa-reason { margin-top: 4px; color: var(--muted); font-size: 11.5px; line-height: 1.4; max-width: 34ch; }
.tag.wfa-verdict, .tag.wfa-ready, .tag.wfa-ban-kind { font-size: 11px; padding: 2px 8px; }
.wfa-rules-empty { margin-top: 12px; color: var(--faint); font-size: 12.5px; }
.wfa-suggest-hint { margin: 0 0 8px; color: var(--muted); font-size: 12px; }
.wfa-suggest-list { display: flex; flex-direction: column; gap: 6px; }
.wfa-suggest-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--chip); }
.wfa-suggest-item.wfa-done { opacity: .65; }
.wfa-suggest-value { font-family: var(--font-mono); font-size: 12px; overflow-wrap: anywhere; min-width: 0; }
.wfa-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.wfa-actions .btn svg, .wfa-suggest .btn svg, .wfa-unban svg { width: 12px; height: 12px; }
.wfa-row-trusted td { opacity: .72; }
.tag.wfa-trusted-tag { margin-left: 6px; font-size: 10.5px; padding: 1px 7px; }
/* own IPs + scanner ban */
.wfa-settings-state { margin-bottom: 14px; }
.wfa-settings-state[hidden] { display: none; }
.wfa-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.card.wfa-card { display: flex; flex-direction: column; gap: 10px; padding: 18px; }
.card.wfa-card.wfa-unavailable { opacity: .55; pointer-events: none; }
.wfa-card-head { display: flex; align-items: center; gap: 8px; }
.wfa-card-head .wfa-count { margin-left: auto; }
.wfa-desc { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.55; }
.wfa-ip-list { display: flex; flex-wrap: wrap; gap: 6px; min-height: 30px; align-items: center; }
.wfa-ip-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 10px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--chip); font-family: var(--font-mono); font-size: 12px; max-width: 100%; }
.wfa-ip-chip code { overflow-wrap: anywhere; }
.wfa-ip-remove { width: 20px; height: 20px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--faint); cursor: pointer; flex: 0 0 auto; }
.wfa-ip-remove:hover { background: var(--red-bg); color: var(--red); }
.wfa-ip-empty { color: var(--faint); font-size: 12.5px; }
.wfa-add-row { display: flex; gap: 8px; }
.wfa-add-row .form-input { flex: 1 1 auto; min-width: 0; }
.wfa-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--chip); }
.wfa-switch-title { font-size: 13px; font-weight: 600; }
.wfa-switch-desc { margin-top: 2px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.toggle[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.wfa-warn { padding: 9px 11px; border: 1px solid var(--line); border-left: 3px solid var(--amber); border-radius: 9px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.wfa-warn.wfa-warn-on { border-color: var(--amber-bd); border-left-color: var(--amber); background: var(--amber-bg); color: var(--amber); font-weight: 600; }
.wfa-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.wfa-fields.wfa-fields-off { opacity: .6; }
.wfa-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.wfa-field .form-input { width: 100%; }
.form-input.wfa-invalid { border-color: var(--red); }
.wfa-field-row { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 10px; margin-top: 10px; }
.wfa-card-foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: auto; padding-top: 4px; }
.wfa-dirty { color: var(--amber); font-size: 12px; font-weight: 600; }
.wfa-card .btn:disabled, .sc-page .btn:disabled, .lh-hint .btn:disabled, .wfa-route .btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; filter: none; }
.wfa-dirty[hidden] { display: none; }
.wfa-bans-card .card-head { display: flex; align-items: center; gap: 9px; }
.wfa-bans-card .wfa-ban-add { margin-left: auto; }
.wfa-ban-ip { font-weight: 600; }
.wfa-ban-reason { color: var(--muted); font-size: 12.5px; max-width: 36ch; }
.wfa-c-act { text-align: right; white-space: nowrap; }
.wfa-dialog .wfa-field { margin-top: 10px; }
.wfa-dialog .wf-hint { margin-top: 10px; }
@media (max-width: 900px) {
  .wfa-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .wfa-fields { grid-template-columns: minmax(0, 1fr); }
  .wfa-field-row { grid-template-columns: minmax(0, 1fr); }
  .card.wfa-route { padding: 14px; }
  /* rule and ban tables → stacked rows */
  .wfa-rules-table thead, .wfa-bans-table thead { display: none; }
  .wfa-rules-table, .wfa-rules-table tbody, .wfa-bans-table, .wfa-bans-table tbody { display: block; }
  .wfa-rules-table tr, .wfa-bans-table tr.wfa-ban-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
  .wfa-rules-table.data-table td, .wfa-bans-table.data-table td { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 0; border: 0; text-align: left; min-width: 0; }
  .wfa-rules-table td[data-label]::before, .wfa-bans-table td[data-label]::before { content: attr(data-label); color: var(--faint); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
  .wfa-rules-table td.wfa-c-rule, .wfa-rules-table td.wfa-c-paths, .wfa-rules-table td.wfa-c-verdict { grid-column: 1 / -1; }
  .wfa-c-paths { max-width: none; }
  .wfa-path { white-space: normal; overflow-wrap: anywhere; }
  .wfa-bans-table td.wfa-c-act { grid-column: 1 / -1; align-items: flex-end; }
  .wfa-bans-table tr.wf-empty, .wfa-bans-table tr.wf-empty td { display: block; }
  .wfa-bans-table.data-table tr.wf-empty td { padding: 12px 14px; }
  .wfa-c-num { text-align: left; }
  .wfa-bans-card .card-head { flex-wrap: wrap; }
}


/* ============================================================================
 * §4 Navigation: quick search, mobile drawer, shield, bulk bar (was public/css/nav.css)
 * ============================================================================ */

/* =============================================================================
   Navigation, quick search and calmer zone rows — release B, strand B4
   (docs/feature-release-b.md §8, §9). Loaded by templates/aurora/layout.njk
   right after aurora.css; uses the Aurora tokens (--surface, --line, --teal …).
   Prefixes: cp- quick search (command-palette.js), sh- shield / risk filters /
   bulk selection / WAF default (zones-page.js, domain-modal.js).
   ========================================================================== */

/* ─── Topbar: quick search trigger ─── */
.cp-trigger{display:flex; align-items:center; gap:9px; height:38px; min-width:210px; padding:0 8px 0 12px;
  border:1px solid var(--line); border-radius:11px; background:var(--chip); color:var(--muted);
  font:500 13px var(--font-body); cursor:pointer; transition:border-color .15s, color .15s}
.cp-trigger:hover{color:var(--text); border-color:var(--line-2)}
.cp-trigger:focus-visible{outline:2px solid var(--teal); outline-offset:2px}
.cp-trigger svg{width:16px; height:16px; flex:0 0 auto}
.cp-trigger-label{flex:1; text-align:left}
.cp-kbd, .cp-close kbd{font:700 10.5px var(--font-mono); color:var(--faint); padding:2px 6px; border:1px solid var(--line-2);
  border-radius:6px; background:var(--surface); white-space:nowrap}
@media (max-width:1100px){ .cp-trigger{min-width:0} .cp-trigger-label{display:none} }
@media (max-width:980px){
  .cp-trigger{width:38px; padding:0; justify-content:center}
  .cp-trigger .cp-kbd{display:none}
}

/* ─── Bottom nav: "Mehr" is a button ─── */
.bottom-nav button.bn-item{appearance:none; background:none; border:0; font-family:inherit; line-height:inherit}
.bn-item:focus-visible{outline:2px solid var(--teal); outline-offset:-2px}

/* ─── Mobile drawer (hamburger and "Mehr"): above the sticky topbar (z 90),
   scrim included; the bottom nav (outside .app) stays on top, so the list
   scrolls clear of it. ─── */
@media (max-width:980px){
  .sidebar{z-index:95}
  .sidebar-overlay{z-index:92}
}
@media (max-width:900px){
  .sidebar{padding-bottom:calc(88px + env(safe-area-inset-bottom))}
}

/* ─── Quick search dialog ─── */
.cp-overlay{position:fixed; inset:0; z-index:1300; display:flex; justify-content:center; align-items:flex-start;
  padding:12vh 16px 16px; background:var(--bg-overlay); backdrop-filter:blur(3px)}
.cp-overlay[hidden]{display:none}
.cp-dialog{width:min(640px,100%); max-height:min(580px,76vh); display:flex; flex-direction:column; overflow:hidden;
  background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r); box-shadow:var(--modal-shadow);
  animation:cp-pop .14s ease-out}
@keyframes cp-pop{from{opacity:0; transform:translateY(-6px) scale(.99)} to{opacity:1; transform:none}}
.cp-sr{position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; padding:0}
.cp-inputrow{display:flex; align-items:center; gap:10px; padding:12px 12px 12px 16px; border-bottom:1px solid var(--line)}
.cp-inputrow > svg{width:18px; height:18px; color:var(--muted); flex:0 0 auto}
.cp-inputrow input.cp-input[type=text], .cp-inputrow input.cp-input[type=text]:focus{flex:1; min-width:0; width:auto; height:auto; border:0; outline:0;
  box-shadow:none; background:transparent; color:var(--text); font:500 16px var(--font-body); padding:4px 0; border-radius:0}
.cp-inputrow:focus-within{box-shadow:inset 0 -2px 0 var(--teal)}
.cp-input::placeholder{color:var(--faint)}
.cp-close{appearance:none; border:0; background:none; padding:4px; cursor:pointer; border-radius:8px}
.cp-close:focus-visible{outline:2px solid var(--teal)}
.cp-list{overflow-y:auto; padding:4px 6px 8px; flex:1 1 auto; overscroll-behavior:contain}
.cp-group-label{font-size:10.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--faint); font-weight:700; padding:10px 10px 4px}
.cp-opt{display:flex; align-items:center; gap:11px; padding:7px 10px; border-radius:10px; cursor:pointer; color:var(--text);
  border:1px solid transparent; scroll-margin:8px}
.cp-opt[aria-selected="true"]{background:var(--teal-soft); border-color:var(--teal-dim)}
.cp-ic{width:28px; height:28px; border-radius:8px; display:grid; place-items:center; flex:0 0 auto;
  background:var(--chip); border:1px solid var(--line); color:var(--muted)}
.cp-ic svg{width:15px; height:15px}
.cp-opt[aria-selected="true"] .cp-ic{color:var(--teal); border-color:var(--teal-dim)}
.cp-txt{display:flex; flex-direction:column; min-width:0; flex:1}
.cp-label{font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cp-opt[data-kind="host"] .cp-label, .cp-opt[data-kind="entry"] .cp-label{font-family:var(--font-mono); font-size:12.5px}
.cp-label mark{background:transparent; color:var(--teal); font-weight:800}
.cp-sub{font-size:11.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cp-enter{color:var(--faint); font-size:13px; opacity:0}
.cp-opt[aria-selected="true"] .cp-enter{opacity:1; color:var(--teal)}
.cp-empty{padding:26px 16px; text-align:center; color:var(--muted); font-size:13px}
.cp-status{font-size:11.5px; color:var(--faint); padding:0 16px 8px}
.cp-status:empty{display:none}
.cp-foot{border-top:1px solid var(--line); padding:8px 16px; font-size:11.5px; color:var(--faint); background:var(--chip)}
@media (max-width:640px){
  .cp-overlay{padding:8px 8px calc(8px + env(safe-area-inset-bottom))}
  .cp-dialog{max-height:calc(100dvh - 16px); border-radius:var(--r-sm)}
  .cp-foot{display:none}
  .cp-opt{padding:9px 10px}
}
@media (hover:none){ .cp-foot{display:none} }
@media (prefers-reduced-motion:reduce){ .cp-dialog{animation:none} }

/* ─── Zones page: risk check ("Prüfen") — highlighted while a check is picked ─── */
.sh-risk-select:has(option:checked:not([value=""])){color:var(--amber); border-color:var(--amber-bd)}

/* ─── Shield (.sh-shield): number of active protections ─── */
.sh-shield{display:inline-flex; align-items:center; gap:3px; height:20px; padding:0 7px 0 5px; border-radius:999px;
  border:1px solid var(--line-2); background:var(--chip); color:var(--muted); font:700 11px var(--font-mono);
  cursor:pointer; vertical-align:middle; flex:0 0 auto; line-height:1}
.sh-shield svg{width:12px; height:12px}
.sh-shield:hover{color:var(--text); border-color:var(--faint)}
.sh-shield:focus-visible{outline:2px solid var(--teal); outline-offset:1px}
.sh-shield-ok{color:var(--teal); border-color:var(--teal-dim); background:var(--teal-soft)}
.sh-shield-open{color:var(--amber); border-color:var(--amber-bd); background:var(--amber-bg)}
.sh-shield-internal{color:var(--muted)}
.sh-shield[aria-expanded="true"]{border-color:var(--text)}
.sh-menu-head{font-size:10px; text-transform:uppercase; letter-spacing:.08em; font-weight:700; color:var(--faint); padding:7px 10px 2px}
.zn-menu-item.sh-mi-on .zn-ic{color:var(--green)}
.zn-menu-item.sh-mi-off .zn-ic{color:var(--amber)}
.zn-menu-item.sh-mi-none{color:var(--faint)}

/* ─── Bulk selection ─── */
.sh-sel{display:inline-flex; align-items:center; justify-content:center; width:22px; min-height:22px; flex:0 0 22px; cursor:pointer; margin:0}
.sh-sel-cb{width:16px; height:16px; margin:0; accent-color:var(--teal); cursor:pointer}
.sh-sel-cb:disabled{cursor:default; opacity:.35}
.sh-sel-cb:focus-visible{outline:2px solid var(--teal); outline-offset:2px}
.zn-host.sh-selected{background:var(--teal-soft)}
.zn-host.sh-selected:hover{background:var(--teal-soft)}
.sh-bulkbar{position:fixed; z-index:95; left:calc(var(--sidebar-w) + 30px); right:30px; bottom:18px;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:10px 12px 10px 16px;
  background:var(--surface); border:1px solid var(--line-2); border-radius:14px; box-shadow:var(--modal-shadow);
  animation:cp-pop .14s ease-out}
.sh-bulkbar[hidden]{display:none}
.sh-bulk-count{font-weight:700; font-size:13px; color:var(--text); white-space:nowrap}
.sh-bulk-actions{display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-left:auto}
.sh-bulk-actions .btn svg{width:12px; height:12px}
.sh-bulk-open .main{padding-bottom:110px}
.sh-bulk-fields{display:flex; gap:10px; flex-wrap:wrap; margin:10px 0 4px}
.sh-bulk-fields .zn-f{flex:1 1 160px; display:flex; flex-direction:column; gap:4px; min-width:0}
.sh-bulk-fields .zn-select{width:100%}
.sh-bulk-affected{font-weight:600; color:var(--text)}
.sh-bulk-fail-list{list-style:none; margin:10px 0 0; padding:0; max-height:42vh; overflow:auto; display:flex; flex-direction:column; gap:6px}
.sh-bulk-fail-list li{display:flex; flex-direction:column; gap:2px; padding:8px 10px; border:1px solid var(--red-bd); background:var(--red-bg); border-radius:10px}
.sh-bulk-fail-entry{font-size:12px; color:var(--text); overflow-wrap:anywhere}
.sh-bulk-fail-why{font-size:12px; color:var(--red)}
@media (max-width:980px){ .sh-bulkbar{left:12px; right:12px} }
@media (max-width:900px){
  .sh-bulkbar{bottom:calc(64px + env(safe-area-inset-bottom) + 10px); padding:8px 10px; gap:8px}
  .sh-bulk-actions{flex-wrap:nowrap; overflow-x:auto; margin-left:0; width:100%; padding-bottom:2px}
  .sh-bulk-actions .btn{flex:0 0 auto}
  .sh-bulk-open .fab-wrap{display:none}
  .sh-bulk-open .main{padding-bottom:170px}
}

/* ─── Domains & Routen: selection box and shield inside the rt- host rows ─── */
.rt-host > .sh-sel{width:44px; min-height:44px; flex:0 0 44px; margin:-10px -8px -10px -14px}
.rt-dlg .sh-shield, .rt-host .sh-shield{height:26px; padding:0 9px 0 7px}
@media (pointer:coarse){ .rt-host .sh-shield{height:32px} }

/* ─── Topbar on phones: the search button needs room — the title stays on one line ─── */
@media (max-width:640px){
  .topbar{min-width:0}
  .topbar .page-crumb{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; flex:0 1 auto}
}
@media (max-width:900px){ body:has(.sidebar.open) .fab-wrap{display:none} }


/* ============================================================================
 * §5 Operations (op-): "Was ist neu", entry-editor fingerprint (was public/css/ops.css)
 * ============================================================================ */

/* ─── Operations UI (op-): release B §13b ─────────────────────────────────────
   "Was ist neu" (dashboard strip, ops-ui.js whatsNewNodes) and the gateway
   fingerprint field in the entry editor. Off-site backups and the maintenance
   window moved to the settings page (st- block in §2). Aurora tokens only, so
   light and dark mode follow the theme. */

.op-empty { font-size: 12.5px; color: var(--faint); padding: 10px 0; }

/* ── "Was ist neu": release list (dashboard strip, ops-ui.js whatsNewNodes) ── */
.op-wn-body { margin-top: 14px; max-height: 340px; overflow-y: auto; padding-right: 6px; }
.op-wn-body:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 8px; }
.op-wn-section + .op-wn-section { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.op-wn-ver { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.op-wn-vnum { font-family: var(--font-display); font-weight: 700; font-size: 14px; }
.op-wn-date { font-size: 12px; color: var(--faint); }
.op-wn-gtitle { margin: 10px 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.op-wn-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 1.55; color: var(--text); }
.op-wn-list li::marker { color: var(--teal); }
.op-wn-code { font-family: var(--font-mono); font-size: 12px; padding: 1px 5px; border-radius: 5px; background: var(--surface-3); overflow-wrap: anywhere; }

/* ── Entry editor: gateway certificate fingerprint (§13b) ── */
.so-editor-block.so-locked > .so-fp { opacity: 1; pointer-events: auto; }
.so-editor-block.so-locked > .so-fp.so-fields-off { opacity: .55; }
.so-editor-block.so-locked > .so-editor-error { opacity: 1; }
.so-fp { gap: 6px; margin-top: 4px; border-top: 1px solid var(--line); padding-top: 10px; }
.so-fp .form-hint { margin-top: 0; font-size: 11px; line-height: 1.45; }
.so-fp-cmd { display: block; margin-top: 4px; padding: 5px 8px; font-family: var(--font-mono); font-size: 10.5px; color: var(--muted);
  background: var(--surface-3); border-radius: 6px; overflow-x: auto; white-space: pre; }
.so-fp-note { color: var(--amber); }


/* ============================================================================
 * §6 Entry names (od-) (was public/css/problems.css)
 * ============================================================================ */

/* ─── Entry names (docs/feature-next-package.md S3) ───
   The dashboard's problems list moved to the db- block of §2 (dashboard
   redesign); what stays here is the entry name in the zones views. */

/* Entry name in the zones list and the domain dialog. */
.od-name {
  font-weight: 700;
  color: var(--text-1);
}


/* ============================================================================
 * §7 Protection block for TCP/UDP entries (l4p-) (was public/css/l4-protect.css)
 * ============================================================================ */

/* Protection block for TCP/UDP entries in the entry editor
   (docs/feature-next-package.md §S1.4). Layer 4 has no WAF, no login and no
   mTLS — what is left is the IP filter, the connection rate and "internal
   only", and this block groups exactly those next to the port fields. */

.gc-l4-protect {
  margin-top: 14px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-base);
}

.gc-l4-protect-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
}

.gc-l4-protect-title {
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-1);
}

.gc-l4-protect-note {
  font-size: 11px;
  color: var(--text-2);
}

.gc-l4-protect-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  background: var(--bg-surface, var(--bg-base));
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.gc-l4-protect-label {
  font-size: 13px;
  font-weight: 600;
}

.gc-l4-protect-desc {
  font-size: 11px;
  color: var(--text-2);
  margin-top: 2px;
}

.gc-l4-protect-sublabel {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-2);
}

.gc-l4-protect-foot {
  display: block;
  margin-top: 10px;
}

/* One column as soon as the modal gets narrow. */
@media (max-width: 520px) {
  .gc-l4-protect-row {
    flex-direction: column;
    align-items: flex-start;
  }
}


/* ============================================================================
 * §8 Two-factor (tf-): profile setup, users list, settings (was public/css/two-factor.css)
 * ============================================================================ */

/* Admin 2FA (docs/feature-admin-2fa.md): profile card, users badge/reset row,
   settings toggle. Own file instead of an app.css/pro.css append: both of those
   end inside an unclosed `@media (max-width: 600px) {` (zn-disc block), so every
   rule appended there only applies on narrow screens. Uses the legacy tokens
   (--text-*, --border, --green/-lt/-bd, --amber-lt …) that app.css, pro.css and
   aurora.css all define; linked from the pages via {% block head %}. */
.tf-card [hidden] { display: none !important; }
.tf-body { display: flex; flex-direction: column; gap: 12px; }
.tf-status { margin-left: auto; font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-3); }
.tf-status-on { color: var(--green); background: var(--green-lt); border-color: var(--green-bd, var(--green)); }
.tf-hint { font-size: 12px; color: var(--text-3); line-height: 1.5; }
.tf-mono { font-family: var(--font-mono); }
.tf-label { font-size: 12px; font-weight: 600; color: var(--text-2); }
.tf-step { font-size: 13px; color: var(--text-1, var(--text-primary)); }
.tf-banner { font-size: 12px; padding: 8px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); line-height: 1.5; }
.tf-banner-amber { background: var(--amber-lt); border-color: var(--amber-bd, var(--amber)); color: var(--amber); }
.tf-panel { display: flex; flex-direction: column; gap: 12px; }
.tf-qr { display: flex; justify-content: center; padding: 8px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); align-self: flex-start; }
.tf-qr-img { display: block; width: 168px; height: 168px; image-rendering: pixelated; }
.tf-secret-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tf-secret { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; padding: 4px 8px; background: var(--bg-base); border: 1px solid var(--border); border-radius: var(--radius-sm); user-select: all; overflow-wrap: anywhere; }
.tf-inline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tf-inline input { flex: 1 1 140px; min-width: 120px; }
.tf-code-input { font-family: var(--font-mono); font-size: 16px; letter-spacing: 0.3em; text-align: center; max-width: 160px; }
.tf-btn-sm { font-size: 11px; padding: 4px 10px; }
.tf-subform { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; background: var(--bg-base); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.tf-codes { columns: 2; column-gap: 18px; margin: 0; padding-left: 22px; font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.06em; line-height: 1.9; }
.tf-codes li { break-inside: avoid; }
@media (max-width: 600px) { .tf-codes { columns: 1; } }
/* Passkeys (docs/feature-admin-passkeys.md): login button + profile card */
.au-passkey[hidden], .pk-card [hidden] { display: none !important; }
.au-divider { display: flex; align-items: center; gap: 10px; margin: 18px 0 4px; font-size: 11.5px; color: var(--faint); text-transform: uppercase; letter-spacing: .08em; }
.au-divider::before, .au-divider::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }
.btn.au-passkey-btn { display: inline-flex; align-items: center; gap: 8px; }
.btn.au-passkey-btn svg { width: 17px; height: 17px; flex: 0 0 auto; }
.au-passkey-msg { margin: 10px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); text-align: center; }
.pk-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pk-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-base); }
.pk-item-main { flex: 1 1 auto; min-width: 0; }
.pk-item-name { font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.pk-item-meta { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); }
.pk-empty { font-size: 12px; color: var(--text-3); }
/* Device binding per token on the Users page (mb-): status, per-token switch,
   reset. Binds a token to the client device's hardware fingerprint — not the
   token→peer binding. The switch reuses .st-switch (settings). */
.mb-area { display: flex; flex-direction: column; gap: 6px; padding: 9px 11px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-base); font-size: 12px; }
.mb-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
.mb-title { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2, var(--muted)); }
.mb-pro { display: inline-flex; align-items: center; padding: 0 7px; border-radius: 999px; font-size: 10px; font-weight: 700; line-height: 1.6; color: var(--db-warn-ink, var(--amber)); background: var(--amber-bg); border: 1px solid var(--amber-bd); white-space: nowrap; }
.mb-eff { margin-left: auto; padding: 0 7px; border-radius: 999px; font-size: 10.5px; font-weight: 600; line-height: 1.6; color: var(--pf-green-ink, var(--green)); background: var(--green-lt); border: 1px solid var(--green-bd, var(--green)); }
.mb-eff-global { color: var(--pf-teal-ink, var(--teal)); background: var(--teal-soft); border-color: var(--pf-teal-bd, var(--teal)); }
.mb-status { display: flex; align-items: baseline; gap: 7px; line-height: 1.45; color: var(--text-1, var(--text)); }
.mb-status-text { min-width: 0; overflow-wrap: anywhere; }
.mb-dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); transform: translateY(-1px); }
.mb-status-bound .mb-dot { background: var(--green); }
.mb-status-pending .mb-dot { background: var(--amber); }
.mb-status-off { color: var(--text-3); }
.mb-fp { font-family: var(--font-mono); font-size: 11.5px; padding: 0 4px; border-radius: 4px; background: var(--chip, var(--bg-card)); border: 1px solid var(--border); }
.mb-ctl { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.mb-ctl .st-switch { width: 40px; height: 24px; }
.mb-ctl .st-switch .st-knob { width: 16px; height: 16px; }
.mb-ctl .st-switch[aria-checked="true"] .st-knob { transform: translateX(16px); }
.mb-switch-label { font-size: 12px; cursor: pointer; }
.mb-switch:disabled + .mb-switch-label { color: var(--text-3); cursor: not-allowed; }
.mb-ctl .btn.mb-reset { margin-left: auto; padding: 5px 10px; font-size: 11.5px; border-radius: 8px; }
.mb-hint { font-size: 11.5px; line-height: 1.45; color: var(--text-3); }
.mb-hint-lock { display: flex; align-items: center; gap: 6px; color: var(--db-warn-ink, var(--amber)); }
.mb-link { color: var(--pf-teal-ink, var(--teal)); font-weight: 600; }
.mb-locked .mb-status, .mb-locked .mb-ctl { opacity: .6; }
/* Settings → Gerätebindung: the facts list (one .st-note, bullets) */
.st-note.st-mb-facts { display: flex; flex-direction: column; gap: 6px; padding-left: 30px; line-height: 1.5; }

/* ============================================================================
 * §9 Users page (us-): role cards, list + detail panel, dialogs, wizard,
 *    "Wer nutzt dieses Gerät?". Profile portal PIN (pf-pin). Auth extras (au-ok).
 * ============================================================================ */
[data-theme="dark"]{ --us-ink:var(--teal); --us-accent-bd:rgba(52,220,198,.30); --us-blue-ink:#9dbaff; }
[data-theme="light"]{ --us-ink:var(--teal-dim); --us-accent-bd:rgba(14,155,138,.32); --us-blue-ink:#2f56b0; }

.us-sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.us-muted{color:var(--muted)}
.us-small{font-size:13px}
.us-center{text-align:center}
.us-grow{flex:1 1 auto}
.us-hint{display:block; font-size:12.5px; color:var(--muted); line-height:1.45}
.us-label{display:block; font-size:12.5px; font-weight:600; color:var(--muted); margin-bottom:6px}
.us-mono{font-family:var(--font-mono)}
.us-mb{margin-bottom:10px}
.us-new{display:inline-block; padding:0 7px; border-radius:999px; font-size:10.5px; font-weight:700; color:var(--us-ink); border:1px solid var(--us-accent-bd); vertical-align:middle}

/* head */
.us-header{margin-bottom:18px}
.us-header-text{flex:1 1 340px}
.us-header .page-sub{max-width:640px}
.us-header-actions{display:flex; flex-wrap:wrap; gap:10px}
.us-header-actions .btn{min-height:44px}
.us-rolecards{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap:12px; margin-bottom:18px}
.us-rolecard{display:flex; gap:14px; padding:16px 18px; border-radius:16px; background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow)}
.us-rolecard-ic{flex:0 0 auto; width:40px; height:40px; border-radius:12px; display:grid; place-items:center}
.us-rolecard-ic svg{width:19px; height:19px}
.us-rolecard-title{font-weight:800; font-size:15px}
.us-rolecard-text{font-size:13px; color:var(--muted)}
.us-tone-admin{background:var(--teal-soft); color:var(--us-ink)}
.us-tone-member{background:var(--blue-bg); color:var(--us-blue-ink)}

.us-orphans{display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; padding:12px 16px; margin-bottom:18px; border-radius:14px; background:var(--amber-bg); border:1px solid var(--amber-bd)}
.us-orphans[hidden]{display:none}
.us-orphans > svg{width:18px; height:18px; color:var(--amber); flex:0 0 auto}
.us-orphans-text{flex:1 1 320px}
.us-orphans-text span{color:var(--muted)}

/* chips, dots, avatars, buttons */
.us-chip{display:inline-block; padding:2px 9px; border-radius:999px; font-size:11.5px; font-weight:700; border:1px solid var(--line-2); color:var(--muted); white-space:nowrap}
.us-chip-admin{color:var(--us-ink); background:var(--teal-soft); border-color:var(--us-accent-bd)}
.us-chip-member{color:var(--us-blue-ink); background:var(--blue-bg); border-color:var(--blue-bd)}
.us-chip-crit{color:var(--red); background:var(--red-bg); border-color:var(--red-bd)}
.us-chip-good{color:var(--green); background:var(--green-bg); border-color:var(--green-bd)}
.us-chip-warn{color:var(--amber); background:var(--amber-bg); border-color:var(--amber-bd)}
.us-chip-off{color:var(--muted)}
.us-chip-dashed{color:var(--us-blue-ink); border:1px dashed var(--blue-bd)}
.us-chip + .us-chip{margin-left:6px}
.us-dot{display:inline-block; width:8px; height:8px; border-radius:50%; flex:0 0 auto; background:var(--line-2)}
.us-dot-good{background:var(--green)}
.us-dot-warn{background:var(--amber)}
.us-dot-crit{background:var(--red)}
.us-dot-off{background:var(--line-2)}
.us-dot-accent{background:var(--teal)}
.us-avatar{width:38px; height:38px; flex:0 0 auto; border-radius:50%; display:grid; place-items:center; font:700 13px var(--font-body); border:1px solid transparent}
.us-avatar.us-tone-admin{border-color:var(--us-accent-bd)}
.us-avatar.us-tone-member{border-color:var(--blue-bd)}
.us-avatar-lg{width:52px; height:52px; font-size:17px}
.us-avatar-off{opacity:.55}
.btn.us-btn-chip{min-height:36px; padding:0 12px; border-radius:9px; border:1px solid var(--line-2); background:var(--chip); color:var(--text); font-size:12.5px; justify-content:center}
.btn.us-btn-danger{min-height:36px; padding:0 12px; border-radius:9px; border:1px solid var(--red-bd); background:transparent; color:var(--red); font-size:12.5px}
.btn:disabled, .btn[disabled]{opacity:.5; cursor:not-allowed; transform:none}
.us-icon-btn{width:40px; height:40px; flex:0 0 auto; border-radius:10px; border:1px solid var(--line-2); background:transparent; color:var(--muted); cursor:pointer; display:grid; place-items:center}
.us-icon-btn svg{width:15px; height:15px}
.us-icon-btn:hover{color:var(--text)}

/* layout: list + detail */
.us-layout{display:flex; flex-wrap:wrap; gap:20px; align-items:flex-start}
.us-list, .us-detail{min-width:0; border-radius:18px; background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow); overflow:hidden}
.us-list{flex:1 1 100%}
.us-layout.has-detail .us-list{flex:1 1 440px}
.us-detail{flex:1 1 560px}
.us-detail[hidden]{display:none}
.us-toolbar{display:flex; flex-wrap:wrap; gap:10px; align-items:center; padding:14px 16px; border-bottom:1px solid var(--line)}
.us-search{flex:1 1 220px; display:flex; align-items:center; gap:8px; height:40px; padding:0 12px; border-radius:10px; border:1px solid var(--line-2); background:var(--bg-2); color:var(--muted)}
.us-search svg{width:14px; height:14px; flex:0 0 auto}
.us-search input{flex:1 1 auto; min-width:0; border:0; background:transparent; color:var(--text); font:500 13.5px var(--font-body); outline:0; padding:0}
.us-search:focus-within{border-color:var(--teal); box-shadow:0 0 0 3px var(--glow1)}
.us-search input:focus{box-shadow:none}
.us-filters{display:flex; flex-wrap:wrap; gap:2px; padding:3px; border-radius:11px; background:var(--chip); border:1px solid var(--line)}
.us-filter{min-height:34px; padding:0 11px; border-radius:8px; border:0; cursor:pointer; font:600 12.5px var(--font-body); background:transparent; color:var(--muted)}
.us-filter[aria-pressed="true"]{background:var(--surface-3); color:var(--text)}
.us-filter-count{opacity:.7}
.us-table-wrap{overflow-x:auto}
.us-table{width:100%; border-collapse:collapse}
.us-table th{text-align:left; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); padding:10px 8px; white-space:nowrap}
.us-table th:first-child, .us-table td:first-child{padding-left:16px}
.us-table th:last-child, .us-table td:last-child{padding-right:16px; text-align:right}
.us-table td{padding:12px 8px; font-size:13px; border-top:1px solid var(--line); vertical-align:middle}
.us-row.is-selected{background:var(--teal-soft)}
.us-row.is-off .us-who-name, .us-row.is-off .us-col-dev, .us-row.is-off .us-col-auth{color:var(--muted)}
.us-who{display:flex; align-items:center; gap:12px; border:0; background:transparent; padding:0; color:inherit; cursor:pointer; text-align:left; font:inherit; min-width:0}
.us-who-text{min-width:0; display:flex; flex-direction:column}
.us-who-name{display:flex; align-items:center; gap:6px; font-weight:700; font-size:14px; color:var(--text)}
.us-who-sub{display:block; font-size:12.5px; color:var(--muted); overflow-wrap:anywhere}
.us-you{padding:0 6px; border-radius:999px; font-size:10.5px; font-weight:700; color:var(--muted); border:1px solid var(--line-2)}
.us-auth{display:inline-flex; align-items:center; gap:6px; white-space:nowrap}
.us-col-last{white-space:nowrap}
.us-cards{display:none; list-style:none; margin:0; padding:10px; flex-direction:column; gap:8px}
.us-card{border:1px solid var(--line); border-radius:14px; background:var(--chip)}
.us-card.is-selected{border-color:var(--us-accent-bd); background:var(--teal-soft)}
.us-card-btn{display:flex; align-items:flex-start; gap:12px; width:100%; padding:12px 14px; border:0; background:transparent; color:inherit; text-align:left; font:inherit; cursor:pointer; min-height:44px}
.us-card-chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:6px}
.us-card-chips .us-chip + .us-chip{margin-left:0}
.us-card-meta{display:flex; flex-wrap:wrap; gap:4px 12px; margin-top:6px; font-size:12.5px}
.us-card-go{margin-left:auto; font-size:22px; line-height:1; color:var(--muted); align-self:center}
.us-card-empty{padding:16px}
/* list beside the detail: hide the secondary columns while space is tight */
@media (max-width: 1599px){
  .us-layout.has-detail .us-col-auth, .us-layout.has-detail .us-table th:nth-child(3),
  .us-layout.has-detail .us-col-last, .us-layout.has-detail .us-table th:nth-child(5){display:none}
}
@media (max-width: 1279px){
  .us-layout.has-detail .us-list{flex-basis:100%}
  .us-layout.has-detail .us-col-auth, .us-layout.has-detail .us-table th:nth-child(3),
  .us-layout.has-detail .us-col-last, .us-layout.has-detail .us-table th:nth-child(5){display:table-cell}
  .us-detail{flex-basis:100%}
}
@media (max-width: 767px){
  .us-table-wrap{display:none}
  .us-cards{display:flex}
  .us-filters{width:100%}
  .us-filter{flex:1 1 auto}
  .us-header-actions{width:100%}
  .us-header-actions .btn{flex:1 1 auto; justify-content:center}
}

/* detail panel */
.us-detail-head{display:flex; flex-wrap:wrap; align-items:center; gap:14px; padding:18px 20px; border-bottom:1px solid var(--line)}
.us-detail-id{flex:1 1 200px; min-width:0}
.us-detail-name{display:flex; flex-wrap:wrap; align-items:center; gap:8px}
.us-detail-name h2{margin:0; font-family:var(--font-display); font-size:22px; font-weight:800; letter-spacing:-.02em; overflow-wrap:anywhere}
.us-detail-sub{font-size:13px; color:var(--muted); overflow-wrap:anywhere}
.us-tabs{display:flex; gap:4px; padding:8px 14px 0; border-bottom:1px solid var(--line); overflow-x:auto; scrollbar-width:thin}
.us-tab{flex:0 0 auto; min-height:42px; padding:0 10px; border:0; border-bottom:2px solid transparent; background:transparent; cursor:pointer; font:600 13.5px var(--font-body); color:var(--muted); white-space:nowrap}
.us-tab:hover{color:var(--text)}
.us-tab.is-active{font-weight:700; color:var(--text); border-bottom-color:var(--teal)}
.us-panel{padding:18px 20px 22px}
.us-panel[hidden]{display:none}
.us-panel:focus{outline:none}
.us-tiles{display:grid; grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); gap:10px; margin-bottom:18px}
.us-tile{padding:12px 14px; border-radius:13px; background:var(--chip); border:1px solid var(--line)}
.us-tile-label{font-size:12px; color:var(--muted)}
.us-tile-value{font-family:var(--font-display); font-size:19px; line-height:1.25; font-weight:800; overflow-wrap:anywhere}
.us-tile-hint{font-size:11.5px; color:var(--faint)}
.us-box{padding:14px 16px; border-radius:14px; background:var(--chip); border:1px solid var(--line); margin-bottom:14px}
.us-box[hidden]{display:none}
.us-box-head{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:10px}
.us-box-title{font-weight:800; margin-bottom:4px}
.us-rolebox-head{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:6px}
.us-rolebox-head .btn{margin-left:auto}
.us-grid2{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap:12px}
.us-span2{grid-column:1 / -1}
.us-field{display:block; min-width:0}
.us-field[hidden]{display:none}
.us-field .form-input{min-height:44px}
.us-profile{margin-bottom:18px}
.us-profile-foot{display:flex; align-items:center; justify-content:flex-end; gap:10px; margin-top:10px}
.us-profile-foot .us-error{flex:1 1 auto; margin:0}
.us-danger{border-top:1px solid var(--line); padding-top:16px}
.us-danger-title{font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--red); margin-bottom:10px}
.us-danger-row{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.us-danger-row .btn{min-height:44px}
.us-danger-row .us-hint{flex:1 1 240px}
.us-sec-head{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:4px 0 12px}
.us-sec-headtext{flex:1 1 260px}
.us-sec-title{margin:0; font-weight:800; font-size:15px; font-family:var(--font-body)}
.us-stack{display:flex; flex-direction:column; gap:10px; margin-bottom:20px}
.us-emptybox{padding:18px; border-radius:14px; border:1px dashed var(--line-2); text-align:center; color:var(--muted); font-size:13px}
.us-item{padding:14px 16px; border-radius:14px; border:1px solid var(--line); background:var(--chip)}
.us-item-api{padding:12px 16px}
.us-item-row{display:flex; flex-wrap:wrap; align-items:center; gap:10px}
.us-item-ic{width:36px; height:36px; flex:0 0 auto; border-radius:10px; display:grid; place-items:center; background:var(--surface-3); color:var(--text)}
.us-item-main{flex:1 1 200px; min-width:0}
.us-item-name{display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-weight:700; overflow-wrap:anywhere}
.us-item-state{font-size:12px; font-weight:500; color:var(--muted)}
.us-rightchips{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px}
.us-rightchip{padding:2px 9px; border-radius:999px; font-size:12px; font-weight:600; border:1px solid var(--line-2); color:var(--text)}
.us-presetchip{padding:2px 9px; border-radius:999px; font-size:12px; font-weight:700; border:1px solid var(--line-2)}
.us-item-facts{display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:10px; font-size:12.5px; color:var(--muted)}
.us-item-facts b{color:var(--text); font-weight:600}
.us-intro{padding:12px 14px; border-radius:13px; background:var(--teal-soft); border:1px solid var(--us-accent-bd); margin-bottom:16px; font-size:13.5px}
.us-see-group{margin-bottom:16px}
.us-see-head{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:8px}
.us-see-link{margin-left:auto; font-size:12.5px; font-weight:600; color:var(--us-ink); text-decoration:none}
.us-see-link:hover{text-decoration:underline}
.us-see-list{list-style:none; margin:0; padding:0; border-radius:13px; border:1px solid var(--line); overflow:hidden}
.us-see-item{display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; padding:10px 14px; font-size:13px}
.us-see-item + .us-see-item{border-top:1px solid var(--line)}
.us-see-name{font-weight:600}
.us-see-detail{font:500 12px var(--font-mono); color:var(--muted); overflow-wrap:anywhere}
.us-see-why{margin-left:auto; font-size:11.5px; font-weight:700}
.us-why-all{color:var(--muted)}
.us-why-own{color:var(--us-ink)}
.us-why-pick{color:var(--us-blue-ink)}
.us-secrow{display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; padding:14px 0; border-bottom:1px solid var(--line)}
.us-secrow-text{flex:1 1 260px; min-width:0}
.us-secrow-title{display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-weight:700}
.us-sessions-head{margin-top:18px}
.us-sublist{list-style:none; margin:0 0 6px; padding:0}
.us-subitem{display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--line); font-size:13px}
.us-subitem-text{flex:1 1 240px; min-width:0; overflow-wrap:anywhere}
.us-this{font-size:12px; font-weight:700; color:var(--green)}
.us-invitebox{display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; padding:16px; border-radius:14px; border:1px dashed var(--us-accent-bd)}
.us-invitebox-text{flex:1 1 300px}
.us-btnrow{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.us-switchrow{display:flex; align-items:flex-start; gap:12px}
.us-switchrow-text{flex:1 1 auto; min-width:0}
.us-log{list-style:none; margin:0; padding:0}
.us-log-item{display:flex; gap:12px; align-items:flex-start; padding:10px 0; border-bottom:1px solid var(--line); font-size:13px}
.us-log-item .us-dot{margin-top:6px}
.us-log-text{flex:1 1 auto; min-width:0; overflow-wrap:anywhere}
.us-log-item time{white-space:nowrap}
.us-log-all{display:inline-block; margin-top:12px; margin-left:0}
.us-error{padding:10px 12px; border-radius:10px; background:var(--red-bg); border:1px solid var(--red-bd); color:var(--red); font-size:13px}
.us-error[hidden]{display:none}
.us-warnbox{padding:10px 12px; border-radius:11px; background:var(--amber-bg); border:1px solid var(--amber-bd); font-size:13px}

/* dialogs */
.us-dlg .modal{max-height:calc(100vh - 64px); display:flex; flex-direction:column}
.us-modal-sm{max-width:520px}
.us-modal-md{max-width:680px}
.us-modal-lg{max-width:760px}
.us-modal-xl{max-width:1100px}
.us-dlg .modal-title{font-family:var(--font-display); font-size:20px; font-weight:800; margin:0}
.us-modal-headtext{flex:1 1 auto; min-width:0}
.us-modal-headtext .page-eyebrow{margin-bottom:2px}
.us-modal-body{max-height:none; flex:1 1 auto; overflow-y:auto}
.us-form{display:flex; flex-direction:column; gap:16px}
.us-form p{margin:0}
.us-fieldset{border:0; padding:0; margin:0; min-width:0}
.us-choice-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap:10px}
.us-choice{display:block; text-align:left; padding:14px 16px; border-radius:14px; cursor:pointer; color:var(--text); font:inherit; border:2px solid var(--line); background:var(--chip)}
.us-choice[aria-pressed="true"]{border-color:var(--teal); background:var(--teal-soft)}
.us-choice-title{display:flex; align-items:center; gap:8px; font-weight:800; font-size:15px}
.us-choice-title svg{width:20px; height:20px}
.us-choice-text{display:block; font-size:12.5px; color:var(--muted); margin:6px 0 8px}
.us-point{display:flex; gap:6px; font-size:12.5px}
.us-pt-yes, .us-pt-no, .us-pt-warn{flex:0 0 14px; font-weight:800}
.us-pt-yes{color:var(--green)}
.us-pt-no{color:var(--faint)}
.us-pt-warn{color:var(--us-ink)}
.us-radio{width:16px; height:16px; flex:0 0 auto; border-radius:50%; box-sizing:border-box; border:2px solid var(--line-2)}
[aria-pressed="true"] > .us-radio, [aria-pressed="true"] .us-choice-title .us-radio{border:5px solid var(--teal)}
.us-pwrow{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.us-pwrow .form-input{flex:1 1 220px; min-height:44px}
.us-pwrow .btn{min-height:44px}
.us-check{display:flex; align-items:center; gap:10px; font-size:13.5px; min-height:36px; cursor:pointer}
.us-check[hidden]{display:none}
.us-check input{width:18px; height:18px; flex:0 0 auto; accent-color:var(--teal)}
.us-check-top{align-items:flex-start}
.us-check-top input{margin-top:2px}
.us-check + .us-check{margin-top:6px}
.us-radios{display:flex; flex-direction:column; gap:4px}
/* wizard */
.us-steps{display:flex; gap:6px; list-style:none; margin:0; padding:12px 20px 14px; border-bottom:1px solid var(--line)}
.us-steps li{flex:1 1 0; min-width:0}
.us-step{width:100%; display:flex; align-items:center; gap:8px; min-height:40px; padding:0 10px; border-radius:10px; cursor:pointer; font:600 13px var(--font-body); border:1px solid var(--line); background:transparent; color:var(--muted)}
.us-step:disabled{cursor:default}
.us-step.is-current{font-weight:700; border-color:var(--us-accent-bd); background:var(--teal-soft); color:var(--text)}
.us-step.is-done{color:var(--text)}
.us-step-num{width:22px; height:22px; flex:0 0 auto; border-radius:50%; display:grid; place-items:center; font-size:11.5px; font-weight:800; border:1px solid var(--line-2)}
.us-step.is-current .us-step-num, .us-step.is-done .us-step-num{border:0; background:linear-gradient(145deg,var(--teal),var(--teal-dim)); color:var(--btn-text)}
.us-step-label{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.us-wz-body{min-height:440px}
.us-wz-page{display:flex; flex-direction:column; gap:16px}
.us-wz-page[hidden]{display:none}
.us-wz-head{padding-bottom:12px}
.us-presets{display:flex; flex-direction:column; gap:8px}
.us-preset{display:flex; align-items:center; gap:12px; min-height:56px; padding:10px 14px; border-radius:12px; cursor:pointer; color:var(--text); font:inherit; text-align:left; border:2px solid var(--line); background:transparent}
.us-preset[aria-pressed="true"]{border-color:var(--teal); background:var(--teal-soft)}
.us-preset.is-locked{opacity:.55; cursor:not-allowed}
.us-preset-text{flex:1 1 auto; min-width:0}
.us-pihole-opt{padding:10px 14px; border-radius:12px; border:1px solid var(--line)}
.us-scopes{padding:14px 16px; border-radius:14px; background:var(--chip); border:1px solid var(--line)}
.us-scopes[hidden]{display:none}
.us-scope-group{font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); margin:8px 0 4px}
.us-scope-group:first-child{margin-top:0}
.us-scope-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap:6px 16px}
.us-scope{display:flex; gap:10px; align-items:flex-start; padding:6px 0; font-size:13px; cursor:pointer}
.us-scope input{width:18px; height:18px; margin-top:2px; flex:0 0 auto; accent-color:var(--teal)}
.us-scope b{font-weight:600}
.us-scope.is-locked{opacity:.5; cursor:not-allowed}
.us-details{padding:12px 16px; border-radius:14px; border:1px solid var(--line)}
.us-details summary{cursor:pointer; font-weight:700}
.us-details .us-hint{margin-top:8px}
.us-st{margin-top:12px}
.us-st[hidden]{display:none}
.us-st-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap:10px 14px}
.us-st-grid textarea{min-height:60px; resize:vertical}
.us-code{display:flex; flex-wrap:wrap; gap:20px}
.us-code[hidden], .us-keybox[hidden]{display:none}
.us-code-qr{flex:0 0 220px; display:flex; flex-direction:column; align-items:center; gap:10px; margin:0 auto}
.us-code-qr img{width:200px; height:200px; border-radius:16px; background:#fff; padding:8px; box-sizing:border-box}
.us-code-qr img.is-expired{opacity:.2}
.us-code-value{font:600 17px var(--font-mono); letter-spacing:.04em; white-space:nowrap; user-select:all; text-align:center}
.us-code-value.is-expired{text-decoration:line-through; color:var(--muted)}
.us-code-side{flex:1 1 300px; min-width:0; display:flex; flex-direction:column; gap:8px; align-items:flex-start}
.us-sum-title{font-weight:800; font-size:15px}
.us-sum{display:grid; grid-template-columns:130px 1fr; gap:6px 12px; margin:0 0 8px; font-size:13px; width:100%}
.us-sum dt{color:var(--muted)}
.us-sum dd{margin:0; font-weight:600; overflow-wrap:anywhere}
.us-curl{margin:0; width:100%; padding:10px 12px; border-radius:10px; background:var(--bg-2); border:1px solid var(--line-2); font:500 12px var(--font-mono); white-space:pre-wrap; overflow-wrap:anywhere}
.us-keybox{display:flex; flex-direction:column; gap:12px}
.us-key{flex:1 1 260px; padding:10px 12px; border-radius:10px; background:var(--bg-2); border:1px solid var(--line-2); font:500 12px var(--font-mono); overflow-wrap:anywhere; user-select:all}
.us-wz-foot .btn{min-height:44px}
.us-wz-foot .btn[hidden]{display:none}
/* edit dialog */
.us-ed-ic{width:40px; height:40px; flex:0 0 auto; border-radius:11px; display:grid; place-items:center; background:var(--surface-3); color:var(--text)}
.us-rights{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap:4px 16px; padding:12px 16px; border-radius:14px; background:var(--chip); border:1px solid var(--line)}
.us-right{display:flex; gap:10px; align-items:center; min-height:36px; font-size:13.5px; cursor:pointer}
.us-right input{width:18px; height:18px; flex:0 0 auto; accent-color:var(--teal)}
.us-right.is-locked{opacity:.55; cursor:not-allowed}
.us-facts{display:flex; flex-direction:column; border-radius:14px; border:1px solid var(--line); overflow:hidden}
.us-fact{display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; padding:12px 16px}
.us-fact + .us-fact{border-top:1px solid var(--line)}
.us-fact-col{flex-direction:column; align-items:stretch}
.us-fact-row{display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px}
.us-fact-text{flex:1 1 240px; min-width:0}
.us-fact-title{font-weight:700}
.us-fact-mb .mb-area{flex:1 1 100%}
.us-fact select.form-input{min-height:44px}
/* role + delete dialogs */
.us-ro-card{padding:12px 14px; border-radius:12px; border:1px solid var(--line)}
.us-ro-new{border:2px solid var(--us-accent-bd); background:var(--teal-soft)}
.us-ro-list{margin:0; padding-left:18px; font-size:13px; color:var(--muted); display:flex; flex-direction:column; gap:4px}
.us-effects{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.us-effect{display:flex; gap:10px; padding:10px 12px; border-radius:11px; background:var(--chip); border:1px solid var(--line); font-size:13px}
.us-effect .us-dot{width:9px; height:9px; margin-top:6px}
.us-effect-text{display:block; color:var(--muted); overflow-wrap:anywhere}
.us-del-intro{font-size:13.5px}
.us-orph-list{list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:10px}
.us-orph{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; padding:12px 14px; border-radius:12px; border:1px solid var(--line); background:var(--chip)}
.us-orph-info{flex:1 1 220px; min-width:0}
.us-orph-ctl{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.us-orph-ctl select{min-height:40px; width:auto; min-width:180px}
/* roles matrix */
.us-mx-intro{margin:0 0 10px}
.us-mx-legend{display:flex; flex-wrap:wrap; gap:14px; font-size:12.5px; color:var(--muted); margin-bottom:14px}
.us-mx-legend > span{display:inline-flex; align-items:center; gap:6px}
.us-mx-wrap{overflow-x:auto; border-radius:16px; border:1px solid var(--line)}
.us-mx{width:100%; border-collapse:collapse; min-width:720px}
.us-mx thead th{text-align:left; padding:14px 12px; font-size:12px; vertical-align:top}
.us-mx thead th:first-child{padding-left:18px; width:36%; letter-spacing:.08em; text-transform:uppercase; color:var(--faint)}
.us-mx-sub{font-size:12px; font-weight:500; color:var(--muted); margin-top:6px}
.us-mx-group{text-align:left; padding:14px 18px 6px; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--us-ink); border-top:1px solid var(--line)}
.us-mx tbody tr + tr th[scope="row"], .us-mx tbody tr + tr td{border-top:1px solid var(--line)}
.us-mx th[scope="row"]{text-align:left; padding:10px 18px; font-weight:600; font-size:13.5px}
.us-mx td{padding:10px 12px; font-size:13px; vertical-align:top}
.us-mx-note{font-size:12px; font-weight:500; color:var(--muted)}
.us-mx-cell{display:flex; gap:8px; align-items:flex-start}
.us-mx-text{color:var(--muted)}
.us-mx-ic{flex:0 0 auto; width:22px; height:22px; border-radius:7px; display:grid; place-items:center; font-size:12px; font-weight:800}
.us-mx-yes{background:var(--green-bg); color:var(--green)}
.us-mx-some{background:var(--blue-bg); color:var(--us-blue-ink)}
.us-mx-no{color:var(--faint); border:1px solid var(--line-2)}
@media (max-width: 767px){
  .us-steps{padding:10px 12px}
  .us-step{justify-content:center; padding:0 6px}
  .us-step-label{display:none}
  .us-step.is-current .us-step-label{display:inline}
  .us-sum{grid-template-columns:110px 1fr}
  .us-dlg.modal-overlay{padding:12px 8px}
  .us-panel{padding:16px 14px 20px}
  .us-detail-head{padding:16px 14px}
}

/* topbar role chip for members */
.topbar-role{align-self:center}
@media (max-width: 767px){ .topbar-role{display:none} }

/* ── "Wer nutzt dieses Gerät?" (Zugang bearbeiten, portal device usage) ── */
.us-usage{margin:0; padding:0; border:0; min-width:0; display:flex; flex-direction:column; gap:10px}
.us-usage legend{padding:0; margin-bottom:8px}
.us-usage-modes{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px}
.us-usage-mode{display:flex; flex-direction:column; gap:4px; text-align:left; padding:12px 14px; border-radius:14px; border:2px solid var(--line); background:var(--chip); color:var(--text); font:inherit; cursor:pointer}
.us-usage-mode b{font-size:14.5px}
.us-usage-mode.is-on{border-color:var(--teal); background:var(--teal-soft)}
.us-usage-note{padding:12px 14px; border-radius:14px; background:var(--teal-soft); border:1px solid var(--us-accent-bd); font-size:13px}
.us-usage-box{padding:12px 14px; border-radius:14px; background:var(--chip); border:1px solid var(--line)}
.us-usage-box-title{font-weight:700; margin-bottom:6px}
.us-usage-people{display:flex; flex-direction:column}
.us-usage-person{display:flex; align-items:center; gap:10px; min-height:40px; font-size:13.5px}
.us-usage-person input{width:18px; height:18px; accent-color:var(--teal); flex:0 0 auto}
.us-usage-pin{font-size:12px; text-align:right}
.us-usage-pin.is-good{color:var(--muted)}
.us-usage-pin.is-warn{color:var(--amber)}
@media (max-width: 560px){ .us-usage-modes{grid-template-columns:1fr} .us-usage-person{flex-wrap:wrap} .us-usage-pin{flex-basis:100%; text-align:left; padding-left:28px} }

/* ── Profile: portal PIN (pf-pin) ── */
.pf-pin-state{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--muted)}
.pf-pin-state[data-on="1"]{color:var(--green)}
.pf-pin-input{font-family:var(--font-mono); letter-spacing:.3em}

/* auth pages: success flash + invitation */
.au-card .au-ok{display:flex; gap:9px; align-items:flex-start; margin-bottom:16px; padding:10px 12px; border:1px solid var(--green-bd); border-radius:10px; background:var(--green-bg); color:var(--green); font-size:13px; line-height:1.45}
.au-card .au-ok svg{width:16px; height:16px; flex:0 0 auto; margin-top:1px}
.au-card .form-input[readonly]{color:var(--muted)}
.inv-what{text-align:center}
.us-page [hidden], .us-dlg [hidden]{display:none !important}
.us-col-dev{white-space:nowrap}
/* dialogs above the mobile bottom navigation and the quick-add button
   (GCDialog confirmations at 1100 stay on top of them) */
.modal-overlay.us-dlg{z-index:1000}
@media (max-width: 767px){ .us-step.is-current{flex:2 1 0} .us-steps li:has(.is-current){flex:2 1 0} }
@media (max-width: 767px){ .us-header-text{flex:1 1 auto} }

/* ═══ Plugins (docs/plugins.md): Settings → Plugins, plugin pages, sidebar ═══ */
.nav-item.nav-item-off{opacity:.62}
.nav-tag-off{margin-left:auto; padding:0 6px; border-radius:999px; border:1px solid var(--line-2); color:var(--db-muted); font-size:10.5px; font-weight:700; line-height:1.6}
.pg-sec-head{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:12px 20px}
.pg-root{display:flex; flex-direction:column; gap:18px; min-width:0}
.pg-moved{margin:0}
.pg-moved[hidden]{display:none}
.pg-sub{display:block; color:var(--db-muted); font-size:12.5px}
.pg-pad{margin:0 0 14px}
.pg-mt{margin-top:10px}
.pg-h{font-weight:800; margin:14px 0 8px}
.pg-drop{position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:14px; padding:18px 20px; border-radius:16px; cursor:pointer;
  border:2px dashed var(--pf-teal-bd); background:var(--teal-soft)}
.pg-drop.is-over{border-style:solid}
.pg-drop:focus-within{box-shadow:0 0 0 3px var(--glow1)}
.pg-drop-ic{width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:var(--surface); color:var(--pf-teal-ink)}
.pg-drop-text{flex:1 1 280px; min-width:0}
.pg-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr)); gap:14px}
.pg-grid:empty{display:none}
.pg-empty{margin:0; color:var(--db-muted)}
.pg-card{display:block; text-align:left; padding:16px; border-radius:16px; cursor:pointer; color:var(--text); font:inherit;
  background:linear-gradient(180deg,var(--surface),var(--surface-2)); border:2px solid var(--line)}
.pg-card:hover{border-color:var(--line-2)}
.pg-card[aria-pressed="true"]{border-color:var(--pf-teal-ink)}
.pg-card[data-status="disabled"],.pg-card[data-status="blocked"]{opacity:.88}
.pg-card-head{display:flex; align-items:center; gap:12px; margin-bottom:10px}
.pg-card-name{flex:1 1 auto; min-width:0}
.pg-card-name b{display:block; font-size:15.5px}
.pg-card-note{display:block; margin-top:10px; font-size:12.5px; color:var(--db-muted)}
.pg-ic{width:42px; height:42px; flex:0 0 auto; border-radius:12px; display:grid; place-items:center; background:var(--chip); border:1px solid var(--line); color:var(--pf-teal-ink)}
.pg-ic-lg{width:52px; height:52px; border-radius:14px}
.pg-chips{display:flex; flex-wrap:wrap; gap:6px}
.pg-chip,.pg-badge{display:inline-flex; align-items:center; padding:1px 9px; border-radius:999px; font-size:11.5px; font-weight:700; white-space:nowrap;
  border:1px solid var(--line-2); color:var(--db-muted)}
.pg-badge[data-state="good"]{color:var(--pf-green-ink); background:var(--green-bg); border-color:var(--green-bd)}
.pg-badge[data-state="warn"]{color:var(--db-warn-ink); background:var(--amber-bg); border-color:var(--amber-bd)}
.pg-badge[data-state="crit"]{color:var(--pf-red-ink); background:var(--red-bg); border-color:var(--red-bd)}
.pg-badge[data-state="info"]{color:var(--pf-teal-ink); background:var(--teal-soft); border-color:var(--pf-teal-bd)}
.pg-detail{overflow:hidden}
.pg-dhead{display:flex; flex-wrap:wrap; align-items:center; gap:14px; padding:18px 20px; border-bottom:1px solid var(--line)}
.pg-dhead-text{flex:1 1 240px; min-width:0}
.pg-dhead-text .pg-sub{display:flex; flex-wrap:wrap; align-items:center; gap:6px}
.pg-dtitle{margin:0; font-family:var(--font-display); font-size:22px; font-weight:800}
.pg-toggle{display:flex; align-items:center; gap:10px; font-size:13px; font-weight:600}
.pg-banner{display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:12px 20px; border-bottom:1px solid var(--red-bd); background:var(--red-bg); font-size:13px}
.pg-banner[data-state="warn"]{border-color:var(--amber-bd); background:var(--amber-bg)}
.pg-banner[data-state="good"]{border-color:var(--green-bd); background:var(--green-bg)}
.pg-banner .st-btn{margin-left:auto}
.pg-tabs{display:flex; gap:4px; padding:8px 14px 0; border-bottom:1px solid var(--line); overflow-x:auto}
.pg-tab{flex:0 0 auto; min-height:42px; padding:0 12px; border:0; border-bottom:2px solid transparent; background:transparent; cursor:pointer;
  color:var(--db-muted); font:600 13.5px var(--font-body)}
.pg-tab[aria-selected="true"]{color:var(--text); font-weight:700; border-bottom-color:var(--pf-teal-ink)}
.pg-panel{padding:18px 20px 6px}
.pg-tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-bottom:16px}
.pg-tile{padding:12px 14px; border-radius:13px; background:var(--chip); border:1px solid var(--line)}
.pg-tile-l{font-size:12px; color:var(--db-muted)}
.pg-tile-v{font-weight:800; font-size:16px}
.pg-desc{margin:0 0 6px; color:var(--db-muted)}
.pg-adds{margin:0; padding:0; list-style:none; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:8px}
.pg-adds li{display:flex; gap:10px; padding:10px 12px; border-radius:12px; border:1px solid var(--line)}
.pg-dot{width:8px; height:8px; margin-top:7px; flex:0 0 auto; border-radius:50%; background:var(--pf-teal-ink)}
.pg-dfoot{display:flex; flex-wrap:wrap; gap:10px; margin:12px 20px 0; padding:14px 0 18px; border-top:1px solid var(--line)}
.pg-form .st-row{padding-left:0; padding-right:0}
.pg-formfoot{display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:10px; padding:14px 0}
.pg-lic{display:flex; flex-wrap:wrap; gap:16px; align-items:flex-start; padding-bottom:12px}
.pg-dl{flex:1 1 280px; display:grid; grid-template-columns:minmax(110px,150px) 1fr; gap:8px 12px; margin:0; font-size:13.5px}
.pg-dl dt{color:var(--db-muted)}
.pg-dl dd{margin:0; font-weight:700; overflow-wrap:anywhere}
.pg-dl dd[data-state="good"]{color:var(--pf-green-ink)}
.pg-dl dd[data-state="warn"]{color:var(--db-warn-ink)}
.pg-dl dd[data-state="crit"]{color:var(--pf-red-ink)}
.pg-lic-form{flex:1 1 280px; padding:14px 16px; border-radius:14px; background:var(--chip); border:1px solid var(--line)}
.pg-lic-form .st-input{width:100%}
.pg-perms{display:flex; flex-direction:column; border-radius:14px; border:1px solid var(--line); overflow:hidden; margin-bottom:12px}
.pg-perm{display:flex; flex-wrap:wrap; gap:4px 14px; padding:12px 16px; border-bottom:1px solid var(--line); font-size:13.5px}
.pg-perm:last-child{border-bottom:0}
.pg-perm b{flex:0 0 170px}
.pg-perm span{flex:1 1 240px; min-width:0; color:var(--db-muted); overflow-wrap:anywhere}
.pg-log{list-style:none; margin:0 0 12px; padding:0; font:500 12.5px var(--font-mono)}
.pg-log li{display:flex; flex-wrap:wrap; gap:4px 12px; padding:8px 0; border-bottom:1px solid var(--line)}
.pg-log-t{flex:0 0 140px; color:var(--pf-faint)}
.pg-log-l{flex:0 0 52px; color:var(--pf-green-ink)}
.pg-log-l[data-level="warn"]{color:var(--db-warn-ink)}
.pg-log-l[data-level="error"]{color:var(--pf-red-ink)}
.pg-log-m{flex:1 1 280px; min-width:0; overflow-wrap:anywhere}
/* install / uninstall dialogs */
.pg-steps{display:flex; gap:6px; list-style:none; margin:0 0 16px; padding:0}
.pg-step{flex:1 1 0; display:flex; align-items:center; gap:8px; min-height:40px; padding:0 10px; border-radius:10px; border:1px solid var(--line);
  color:var(--db-muted); font-size:13px; font-weight:600; min-width:0}
.pg-step[aria-current="step"]{color:var(--text); font-weight:700; border-color:var(--pf-teal-bd); background:var(--teal-soft)}
.pg-step[data-done="1"]{color:var(--text)}
.pg-step-n{width:22px; height:22px; flex:0 0 auto; border-radius:50%; display:grid; place-items:center; font-size:11.5px; font-weight:800; border:1px solid var(--line-2)}
.pg-step[aria-current="step"] .pg-step-n,.pg-step[data-done="1"] .pg-step-n{background:var(--pf-btn-bg); color:var(--btn-text); border:0}
.pg-stepbody{min-height:220px}
.pg-file,.pg-in-plugin{display:flex; flex-direction:column; gap:2px; padding:12px 14px; margin-bottom:10px; border-radius:12px; background:var(--chip); border:1px solid var(--line)}
.pg-checks{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px}
.pg-checks li{display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border-radius:12px; border:1px solid var(--line)}
.pg-check-ic{width:22px; height:22px; flex:0 0 auto; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:800;
  background:var(--green-bg); color:var(--pf-green-ink)}
.pg-checks li[data-state="warn"] .pg-check-ic{background:var(--amber-bg); color:var(--db-warn-ink)}
.pg-checks li[data-state="fail"] .pg-check-ic{background:var(--red-bg); color:var(--pf-red-ink)}
.pg-checks li[data-state="fail"]{border-color:var(--red-bd)}
.pg-accept{display:flex; gap:10px; align-items:center; font-size:13.5px}
.pg-accept input{width:18px; height:18px}
.pg-key{width:100%; font-size:15px; letter-spacing:.04em}
.pg-details{margin-top:12px; font-size:13px}
.pg-details summary{cursor:pointer; font-weight:700}
.pg-done{text-align:center; padding:18px 0}
.pg-done-ic{width:60px; height:60px; margin:0 auto 12px; border-radius:50%; display:grid; place-items:center; background:var(--green-bg); color:var(--pf-green-ink); font-size:28px; font-weight:800}
.pg-done-title{margin:0 0 6px; font-family:var(--font-display); font-size:21px}
.pg-radios{display:flex; flex-direction:column; gap:8px; margin:6px 0 4px}
.pg-radio{display:flex; gap:12px; align-items:flex-start; width:100%; padding:12px 14px; border-radius:12px; cursor:pointer; text-align:left; color:var(--text); font:inherit;
  border:2px solid var(--line); background:transparent}
.pg-radio[aria-checked="true"]{border-color:var(--pf-teal-ink); background:var(--teal-soft)}
.pg-radio b{display:block}
.pg-radio-dot{width:16px; height:16px; flex:0 0 auto; margin-top:3px; border-radius:50%; border:2px solid var(--line-2)}
.pg-radio[aria-checked="true"] .pg-radio-dot{border:5px solid var(--pf-teal-ink)}
.pg-effects{margin:0 0 10px; padding:0; list-style:none; display:flex; flex-direction:column; gap:6px; font-size:13.5px}
.pg-effects li{display:flex; gap:10px}
.pg-effects li[data-state="crit"] .pg-dot{background:var(--pf-red-ink)}
.pg-effects li[data-state="good"] .pg-dot{background:var(--pf-green-ink)}
.pg-confirm{display:block; margin:6px 0 10px}
.pg-confirm .st-input{width:100%}
/* plugin page */
.pg-plugin-page{display:flex; flex-direction:column; gap:16px; min-width:0}
.pg-ph{display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px 20px}
.pg-ph-main{flex:1 1 300px; min-width:0}
.pg-ph-eyebrow{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:6px}
.pg-ph-kicker{font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--pf-teal-ink)}
.pg-ph-title{margin:0; font-family:var(--font-display); font-weight:800; font-size:clamp(24px,3vw,30px); letter-spacing:-.02em}
.pg-ptabs{display:flex; gap:6px; flex-wrap:wrap}
.pg-ptab{padding:6px 12px; border-radius:999px; border:1px solid var(--line-2); color:var(--db-muted); text-decoration:none; font-size:13px; font-weight:700}
.pg-ptab[aria-current="page"]{color:var(--pf-teal-ink); background:var(--teal-soft); border-color:var(--pf-teal-bd)}
.pg-frame{display:block; width:100%; min-height:420px; border:0; border-radius:16px; background:transparent}
.pg-off{display:flex; gap:14px; align-items:flex-start; padding:20px; border-radius:16px; border:1px dashed var(--line-2); background:var(--chip)}
.pg-off-ic{width:44px; height:44px; flex:0 0 auto; border-radius:12px; display:grid; place-items:center; background:var(--surface); color:var(--db-muted)}
.pg-off-title{margin:0 0 4px; font-size:17px}
.pg-off-text{margin:0 0 12px; color:var(--db-muted)}
@media (max-width:600px){
  .pg-steps{flex-wrap:wrap}
  .pg-step{flex:1 1 40%}
  .pg-perm b{flex-basis:100%}
}
/* Zugriffsziele */
.pg-targets{margin-bottom:16px; padding-bottom:6px; border-bottom:1px solid var(--line)}
.pg-target{padding:12px 0; border-top:1px solid var(--line)}
.pg-target-head{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px}
.pg-target-head .pg-sub{display:inline}
.pg-target-list{list-style:none; margin:8px 0; padding:0; display:flex; flex-direction:column; gap:6px}
.pg-target-list li{display:flex; flex-wrap:wrap; align-items:center; gap:8px}
.pg-target-add{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.pg-target-add .st-input:not(.st-input-num){flex:1 1 200px; min-width:0}
.pg-target-add [hidden]{display:none}