/* Unified themes + components */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { font-family: var(--font-sans); background: var(--surface); color: var(--text); min-height: 100vh; line-height: var(--line-height); }
img { max-width: 100%; display: block; }

:root {
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, monospace;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 10px rgba(0,0,0,0.12);
  --shadow-lg: 0 12px 30px rgba(0,0,0,0.18);
  --line-height: 1.6;
  --border-width: 1px;
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
  --trans: 180ms ease;
  --success: #22c55e;
  --success-strong: #16a34a;
  --warning: #f59e0b;
  --warning-strong: #d97706;
  --danger: #ef4444;
  --danger-strong: #dc2626;
  --info: #3b82f6;
  --info-strong: #2563eb;
  --on-success: #ffffff;
  --on-warning: #0b0f14;
  --on-danger: #ffffff;
  --on-info: #ffffff;
  /* Legacy aliasing for old selectors */
  --bg: var(--surface, #0a0a1a);
  --bg-secondary: var(--surface-2, #11182a);
  --bg-tertiary: var(--surface-3, #192030);
  --card-bg: var(--surface-card, #151d2d);
  --header-bg: var(--surface-header, #080814);
  --text-secondary: var(--muted, #99bbcc);
  --blue: var(--accent, #3b82f6);
  --success-rgb: 34, 197, 94;
  --warning-rgb: 245, 158, 11;
  --danger-rgb: 239, 68, 68;
  --info-rgb: 59, 130, 246;
  --blue-rgb: 59, 130, 246;
}

a { color: var(--accent); text-decoration: none; transition: color var(--trans), opacity var(--trans); }
a:not([class*="btn"]):hover { color: var(--accent-hover); opacity: 0.9; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: var(--focus-ring); }

p { margin: 0 0 0.75rem; color: var(--text); }
h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.2; color: var(--text); }
small, .muted { color: var(--muted); }
code, pre, .mono { font-family: var(--font-mono); }
pre { background: var(--surface-2); border: 1px solid var(--border); padding: 12px; border-radius: var(--radius-sm); overflow: auto; }

/* Layout */
.main { padding-top: 16px; padding-bottom: 24px; min-height: calc(100vh - 60px); position: relative; }
.main::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 150px; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 6%, var(--surface)) 0%, var(--surface) 100%); pointer-events: none; z-index: -1; }
.container { width: min(1400px, 100%); margin: 0 auto; padding: 0 clamp(12px, 2vw, 20px); }
.section { padding: 16px 0; }
.card-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; width: 100%; margin-bottom: 20px; }
.card-grid .card { margin-bottom: 0; text-align: center; padding: 20px 12px; }
.card-grid .stat-icon { font-size: 24px; margin-bottom: 10px; }
.card-grid .stat-value { font-size: 28px; font-weight: 700; line-height: 1.2; }
.card-grid .stat-label { font-size: 12px; color: var(--muted); margin-top: 6px; }
@media (max-width: 1200px) { .card-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .card-grid { grid-template-columns: 1fr; } }

/* Alternative grid layouts */
.card-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; width: 100%; margin-bottom: 20px; }
.card-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; width: 100%; margin-bottom: 20px; }
@media (max-width: 900px) { .card-grid-3, .card-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .card-grid-3, .card-grid-4 { grid-template-columns: 1fr; } }
.flex { display: flex; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.flex-center { display: flex; justify-content: center; align-items: center; }
.gap-sm { gap: 8px; } .gap-md { gap: 12px; } .gap-lg { gap: 16px; }

.surface { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.surface-2 { background: var(--surface-2); }
.surface-card { background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }

.text-muted { color: var(--muted) !important; }
.text-accent { color: var(--accent) !important; }
.text-success { color: var(--success) !important; }
.text-warning { color: var(--warning) !important; }
.text-danger { color: var(--danger) !important; }
.text-info { color: var(--info) !important; }
.text-center { text-align: center !important; }
.text-sm { font-size: 12px; line-height: 1.5; }
.text-xs { font-size: 11px; line-height: 1.5; }
.text-base { font-size: 14px; line-height: 1.6; }
.ellipsis { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ellipsis-wide { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-spaced { margin-top: 20px; }
.mt-md { margin-top: 16px; }
.mt-lg { margin-top: 24px; }
.inline-form { display: inline-flex; align-items: center; gap: 6px; }
.text-light { color: var(--on-accent); }
.text-mono { font-family: var(--font-mono); }
.nowrap { white-space: nowrap; }
.ml-xs { margin-left: 4px; }
.ml-sm { margin-left: 5px; }
.text-xxs { font-size: 9px; line-height: 1.4; }
.col-check { width: 32px; }
.form-control-inline { width: auto; }
.form-control-sm { width: auto; padding: 4px 8px; font-size: 11px; }
.bulk-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.quick-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.control-panel { display: flex; flex-direction: column; gap: 10px; }
.control-item { display: flex; align-items: center; gap: 10px; }
.control-desc { color: var(--muted); font-size: 12px; }
@media (max-width: 480px) {
  .bulk-actions { gap: 6px; }
  .quick-actions { gap: 6px; }
  .control-item { flex-wrap: wrap; }
}
.mb-sm { margin-bottom: 8px; }
.mb-md { margin-bottom: 16px; }
.mb-lg { margin-bottom: 24px; }
.mt-sm { margin-top: 8px; }
.mt-md { margin-top: 16px; }
.my-md { margin: 16px 0; }
.my-lg { margin: 24px 0; }
.py-lg { padding: 32px 0; }
hr.my-lg { border: none; border-top: 1px solid var(--border); }
.hidden { display: none !important; }
.row { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.flash { padding: 12px 14px; border-radius: 8px; margin: 12px 0; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); }
.flash-success { background: color-mix(in srgb, var(--success) 12%, var(--surface)); border-color: color-mix(in srgb, var(--success) 35%, transparent); color: var(--success-strong); }
.flash-error { background: color-mix(in srgb, var(--danger) 12%, var(--surface)); border-color: color-mix(in srgb, var(--danger) 35%, transparent); color: var(--danger-strong); }
.flash-warning { background: color-mix(in srgb, var(--warning) 12%, var(--surface)); border-color: color-mix(in srgb, var(--warning) 35%, transparent); color: var(--warning-strong); }
.page-title { font-size: 24px; font-weight: 700; margin-bottom: 6px; color: var(--text); }
.page-subtitle { color: var(--muted); margin-bottom: 20px; font-size: 14px; }

/* Info boxes inside cards */
.info-box { padding: 14px 16px; background: var(--surface-2); border-radius: 8px; }
.info-box-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 4px; }
.info-box-value { font-size: 15px; font-weight: 600; color: var(--text); }
.info-boxes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
@media (max-width: 900px) { .info-boxes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .info-boxes { grid-template-columns: 1fr; } }

/* Button groups */
.btn-group { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }

.bg-accent { background: var(--accent); color: var(--on-accent); }
.bg-success { background: color-mix(in srgb, var(--success) 18%, transparent); color: var(--success); }
.bg-warning { background: color-mix(in srgb, var(--warning) 18%, transparent); color: var(--warning-strong); }
.bg-danger { background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger); }
.bg-info { background: color-mix(in srgb, var(--info) 18%, transparent); color: var(--info); }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 5px; padding: 7px 12px; border-radius: 6px; font-size: 12px; font-weight: 500; cursor: pointer; border: 1px solid transparent; transition: background var(--trans), color var(--trans), border-color var(--trans); text-decoration: none; background: var(--surface-2); color: var(--text); border-color: var(--border); }
.btn:hover { background: var(--surface-3); color: var(--text); }
.btn-sm { padding: 5px 10px; font-size: 11px; }
.btn-primary { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-success { background: var(--success); color: var(--on-success); border-color: transparent; }
.btn-success:hover { opacity: 0.9; }
.btn-danger { background: var(--danger); color: var(--on-danger); border-color: transparent; }
.btn-danger:hover { opacity: 0.9; }
.btn-warning { background: var(--warning); color: var(--on-warning); border-color: transparent; }
.btn-warning:hover { opacity: 0.9; }
.btn-secondary { background: transparent; color: var(--text); border-color: var(--border); }
.btn-secondary:hover { background: var(--surface-2); }
@media (max-width: 480px) {
  .btn { padding: 6px 10px; font-size: 11px; gap: 4px; }
  .btn-sm { padding: 4px 8px; font-size: 10px; }
  .btn-group { gap: 6px; }
}

/* Inputs & forms */
.input, input[type="text"], input[type="email"], input[type="password"], input[type="number"], textarea, select { width: 100%; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-2); color: var(--text); transition: border-color var(--trans), box-shadow var(--trans), background var(--trans); }
.input:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.input:disabled, input:disabled, textarea:disabled, select:disabled { opacity: 0.6; cursor: not-allowed; }
/* Dropdown open-list (the <option> popup). Without these the browser renders
   options with the OS default (white bg + grey text) — illegible on dark
   themes. Theme-adaptive bg/text + color-scheme so the native popup follows
   the active theme. Applies to ALL selects across every theme. */
select option, select optgroup, .form-control option, .form-control optgroup {
  background-color: var(--surface-card);
  color: var(--text);
}
select option:checked, select option:hover, .form-control option:checked {
  background-color: color-mix(in srgb, var(--accent) 22%, var(--surface-card));
  color: var(--text);
}
/* color-scheme: light dark → the browser picks the native popup chrome
   (scrollbar, arrow) to match our explicit bg/text, correct on both light
   and dark themes without enumerating each one. */
select, .form-control { color-scheme: light dark; }
label { display: block; margin-bottom: 6px; font-weight: 600; color: var(--text); }
.form-group { margin-bottom: 14px; }

/* Tables */
.table { width: 100%; border-collapse: collapse; background: transparent; table-layout: auto; }
.table th, .table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--border); color: var(--text); vertical-align: middle; }
.table th { font-weight: 600; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; background: color-mix(in srgb, var(--surface-2) 50%, transparent); white-space: nowrap; }
.table td { font-size: 13px; line-height: 1.5; }
.table td small { font-size: 11px; color: var(--muted); display: block; margin-top: 2px; }
.table tr:hover td { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.table tbody tr:last-child td { border-bottom: none; }
.table-responsive { width: 100%; overflow-x: auto; }
.table code { font-size: 11px; background: var(--surface-2); padding: 3px 6px; border-radius: 4px; }
.table .actions { display: flex; gap: 4px; align-items: center; flex-wrap: nowrap; }
@media (max-width: 480px) {
  .table th, .table td { padding: 8px 6px; }
  .table th { font-size: 9px; }
  .table td { font-size: 11px; }
  .table code { font-size: 9px; padding: 1px 4px; }
}

/* Tabs */
.tabs { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 4px; gap: 4px; flex-wrap: wrap; }
.tab { padding: 8px 12px; border-radius: var(--radius-sm); color: var(--muted); cursor: pointer; border: 1px solid transparent; transition: background var(--trans), color var(--trans), border-color var(--trans); }
.tab:hover { color: var(--text); background: var(--surface-3); }
.tab.active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent); }

/* Cards */
.card { background: var(--surface-card); border-radius: 10px; border: none; padding: 16px; margin-bottom: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); overflow: hidden; }
.card-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.card > .table, .card > div > .table { width: 100%; }
.card .table-wrap { overflow-x: auto; margin: 0 -16px; padding: 0 16px; }
@media (max-width: 480px) {
  .card { padding: 12px; margin-bottom: 10px; border-radius: 8px; }
  .card-header { margin-bottom: 10px; }
  .card .table-wrap { margin: 0 -12px; padding: 0 12px; }
}
.card-title { font-weight: 600; font-size: 15px; color: var(--text); display: flex; align-items: center; gap: 8px; }
.card-header .actions { display: flex; align-items: center; gap: 8px; }
.card-header select { min-width: 120px; padding: 8px 12px; }

/* Toggle */
.toggle, .toggle-switch { --toggle-w: 50px; --toggle-h: 26px; --toggle-knob: 20px; --toggle-shift: 24px; position: relative; display: inline-flex; align-items: center; justify-content: flex-start; width: var(--toggle-w); height: var(--toggle-h); cursor: pointer; }
.toggle input, .toggle-switch input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.toggle-slider, .toggle-switch .toggle-slider { position: absolute; inset: 0; border-radius: 999px; background: var(--surface-2) !important; border: 1px solid var(--border) !important; transition: background var(--trans), border-color var(--trans); pointer-events: none; }
.toggle-slider::before, .toggle-switch .toggle-slider::before { content: ''; position: absolute; top: 3px; left: 3px; width: var(--toggle-knob); height: var(--toggle-knob); border-radius: 50%; background: var(--text) !important; transition: transform var(--trans), background var(--trans); }
.toggle input:checked + .toggle-slider, .toggle-switch input:checked + .toggle-slider { background: var(--accent) !important; border-color: var(--accent) !important; }
.toggle input:checked + .toggle-slider::before, .toggle-switch input:checked + .toggle-slider::before { transform: translateX(var(--toggle-shift)) !important; background: var(--on-accent) !important; }
.toggle:focus-within, .toggle-switch:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: var(--focus-ring); }

/* Badges & alerts */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 6px; font-weight: 600; font-size: 11px; line-height: 1.3; text-transform: uppercase; letter-spacing: 0.3px; }
.badge-accent { background: color-mix(in srgb, var(--accent) 18%, var(--surface-2)); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.badge-success { background: color-mix(in srgb, var(--success) 18%, var(--surface-2)); color: var(--success); border: 1px solid color-mix(in srgb, var(--success) 40%, transparent); }
.badge-warning { background: color-mix(in srgb, var(--warning) 18%, var(--surface-2)); color: var(--warning); border: 1px solid color-mix(in srgb, var(--warning) 40%, transparent); }
.badge-danger { background: color-mix(in srgb, var(--danger) 18%, var(--surface-2)); color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent); }
.badge-info { background: color-mix(in srgb, var(--info) 18%, var(--surface-2)); color: var(--info); border: 1px solid color-mix(in srgb, var(--info) 40%, transparent); }

.alert { border-radius: var(--radius-md); padding: 12px 14px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); display: flex; gap: 10px; align-items: flex-start; }
.alert-success { background: color-mix(in srgb, var(--success) 12%, var(--surface)); border-color: color-mix(in srgb, var(--success) 35%, transparent); color: var(--success-strong); }
.alert-warning { background: color-mix(in srgb, var(--warning) 12%, var(--surface)); border-color: color-mix(in srgb, var(--warning) 35%, transparent); color: var(--warning-strong); }
.alert-danger { background: color-mix(in srgb, var(--danger) 12%, var(--surface)); border-color: color-mix(in srgb, var(--danger) 35%, transparent); color: var(--danger-strong); }
.alert-info { background: color-mix(in srgb, var(--info) 12%, var(--surface)); border-color: color-mix(in srgb, var(--info) 35%, transparent); color: var(--info-strong); }

/* IP badges */
.ip-badge, .ip-badge.blocked, .ip-badge.whitelisted { display: inline-flex; align-items: center; gap: 6px; padding: 2px 0; border-radius: var(--radius-sm); background: transparent !important; border: none !important; font-family: var(--font-mono); }
.ip-badge, .ip-badge.blocked { color: var(--danger) !important; }
.ip-badge.whitelisted { color: var(--success) !important; }

/* Mailer & misc overrides */
.table td[style*="font-size: 11px"] { color: var(--muted) !important; }
.mailto-link, a[href^="mailto:"], .api-mail-link { color: var(--accent) !important; }
.mailer-muted { color: var(--muted) !important; }
.mailer-strong { color: var(--text) !important; }
.mailer-highlight { background: var(--surface-2) !important; color: var(--accent) !important; border-radius: var(--radius-sm); padding: 6px 8px; display: inline-block; border: 1px solid var(--border); }
.mailer-success { color: var(--success) !important; }
.mailer-warning { color: var(--warning) !important; }

/* Privacy / blocklist */
.blocklist-hero { background: color-mix(in srgb, var(--success) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--success) 40%, var(--border)); border-radius: 12px; padding: 24px; margin-bottom: 24px; }
.blocklist-hero-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.blocklist-hero-title { font-size: 20px; font-weight: 700; color: var(--text); }
.blocklist-status { display: inline-flex; align-items: center; gap: 8px; background: var(--success); color: var(--on-success); padding: 6px 14px; border-radius: 20px; font-size: 13px; font-weight: 600; }
.blocklist-status::before { content: ''; width: 8px; height: 8px; background: var(--on-success); border-radius: 50%; animation: pulse 2s infinite; }
.blocklist-hero-desc { color: var(--muted); font-size: 14px; margin-bottom: 20px; }
.blocklist-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 16px; }
.blocklist-stat { text-align: center; padding: 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; }
.blocklist-stat-value { font-size: 24px; font-weight: 700; color: var(--accent); }
.blocklist-stat-label { font-size: 11px; color: var(--muted); text-transform: uppercase; margin-top: 4px; }
.categories-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-top: 20px; }
.category-chip { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--surface-card); border: 1px solid var(--border); border-radius: 8px; }
.category-chip-icon { font-size: 20px; }
.category-chip-info { flex: 1; }
.category-chip-name { font-weight: 600; font-size: 13px; color: var(--text); }
.category-chip-count { font-size: 11px; color: var(--muted); }
.info-banner { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: color-mix(in srgb, var(--info) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--info) 35%, transparent); border-radius: 8px; margin-bottom: 20px; font-size: 13px; color: var(--muted); }
.info-banner svg { flex-shrink: 0; color: var(--info); }

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

/* Privacy toggles */
.toggle-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.toggle-row:last-child { border-bottom: none; }
.toggle-info h4 { margin: 0 0 6px 0; font-size: 15px; color: var(--text); }
.toggle-info p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }

/* Setup page */
.setup-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 16px; border-bottom: 1px solid var(--border); }
.setup-tab { padding: 10px 12px; color: var(--muted); text-decoration: none; font-size: 13px; font-weight: 600; border-bottom: 2px solid transparent; transition: color var(--trans), border-color var(--trans); }
.setup-tab:hover { color: var(--text); }
.setup-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.endpoint-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 16px; margin-bottom: 16px; }
.endpoint-header { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.endpoint-label { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--text); }
.endpoint-badge { padding: 4px 10px; border-radius: var(--radius-sm); font-size: 11px; font-weight: 700; text-transform: uppercase; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.endpoint-badge.recommended { background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--success); border-color: color-mix(in srgb, var(--success) 40%, transparent); }
.endpoint-badge.encrypted { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.endpoint-url { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; color: var(--text); word-break: break-all; }
.endpoint-url span { color: var(--text); }
.copy-btn { background: var(--accent); color: var(--on-accent); border: none; padding: 6px 12px; border-radius: 6px; font-size: 12px; cursor: pointer; flex-shrink: 0; transition: background var(--trans), color var(--trans), box-shadow var(--trans); }
.copy-btn:hover { background: var(--accent-hover); color: var(--on-accent); box-shadow: var(--focus-ring); }

/* ============================================================
   Shared public top bar (.pub-topbar) — used by landing, login,
   register, FAQ, ToS, privacy-policy. Single source of truth.
   100% theme-driven via var(--*).
   ============================================================ */
.pub-topbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(12px);
}
.pub-topbar-inner {
    max-width: 1200px; margin: 0 auto;
    padding: 12px 24px;
    display: flex; justify-content: space-between; align-items: center;
    gap: 16px;
}
.pub-topbar-logo {
    display: flex; align-items: center; gap: 8px;
    text-decoration: none; color: var(--text);
}
.pub-topbar-logo img { height: 36px; }
.pub-topbar-brand {
    font-size: 18px; font-weight: 700; color: var(--accent);
    letter-spacing: .3px;
}
.pub-topbar-nav { display: flex; align-items: center; gap: 8px; }

/* Dropdown buttons (lang + theme) */
.pub-topbar-dd { position: relative; }
.pub-topbar-dd-btn {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text); font-size: 13px; font-weight: 500;
    cursor: pointer;
    transition: background var(--trans), border-color var(--trans), color var(--trans);
}
.pub-topbar-dd-btn:hover { border-color: var(--accent); background: var(--surface-3); }
.pub-topbar-dd-btn svg { width: 14px; height: 14px; transition: transform var(--trans); }
.pub-topbar-dd-btn svg:first-child { width: 16px; height: 16px; }
.pub-topbar-dd.is-open .pub-topbar-dd-btn > svg:last-child { transform: rotate(180deg); }
.pub-topbar-dd-label { line-height: 1; }

.pub-topbar-dd-menu {
    display: none; position: absolute; top: calc(100% + 6px); right: 0;
    min-width: 180px;
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 6px;
    box-shadow: 0 12px 36px color-mix(in srgb, var(--accent) 12%, transparent);
    z-index: 1001;
}
.pub-topbar-dd.is-open .pub-topbar-dd-menu { display: block; }
.pub-topbar-dd-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px;
    border-radius: 6px;
    font-size: 13px; color: var(--text);
    text-decoration: none;
    transition: background var(--trans), color var(--trans);
}
.pub-topbar-dd-item:hover { background: var(--surface-2); color: var(--accent); }
.pub-topbar-dd-item.is-active { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }

/* Theme grid inside theme dropdown */
.pub-topbar-theme-menu { min-width: 320px; max-height: 340px; overflow-y: auto; padding: 10px; }
.pub-topbar-theme-title {
    font-size: 10.5px; text-transform: uppercase; letter-spacing: .8px;
    color: var(--muted); margin: 0 0 8px 4px; font-weight: 600;
}
.pub-topbar-theme-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
}
.pub-topbar-theme-btn {
    padding: 6px 4px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--muted);
    border-radius: 6px;
    font-size: 10px; font-weight: 500;
    cursor: pointer;
    text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: background var(--trans), color var(--trans), border-color var(--trans);
}
.pub-topbar-theme-btn:hover { background: var(--surface-3); color: var(--text); border-color: var(--accent); }
.pub-topbar-theme-btn.is-active {
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    color: var(--accent);
    border-color: var(--accent);
}

/* Login / Register quick links */
.pub-topbar-link {
    padding: 8px 14px;
    color: var(--text); font-size: 13px; font-weight: 500;
    border-radius: 8px; text-decoration: none;
    transition: background var(--trans), color var(--trans);
}
.pub-topbar-link:hover { background: var(--surface-2); color: var(--accent); }
.pub-topbar-cta {
    padding: 8px 16px;
    background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 78%, black 22%));
    color: var(--on-accent); font-size: 13px; font-weight: 600;
    border-radius: 8px; text-decoration: none;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 25%, transparent);
    transition: transform 180ms cubic-bezier(.34,1.61,.7,1.3), box-shadow 180ms ease;
}
.pub-topbar-cta:hover { transform: scale(1.03); box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 35%, transparent); }

/* Pages using the public topbar need top padding to clear the fixed bar */
body.pub-body { padding-top: 64px; }

/* Public content wrapper — used by tos, privacy-policy, faq, verify-email
   and any standalone long-form page. Single column, generous reading width. */
.pub-content {
    max-width: 820px;
    margin: 0 auto;
    padding: 40px 24px 64px;
}
.pub-content > .page-title { font-size: clamp(1.8rem, 3.5vw, 2.4rem); margin-bottom: 6px; }
.pub-content > .page-subtitle { color: var(--muted); margin-bottom: 28px; font-size: 14px; }
.pub-content .aeu-card { margin-bottom: 16px; padding: 22px 24px; }
.pub-content .aeu-section-title { font-size: 16px; font-weight: 700; color: var(--text); margin: 0 0 12px; letter-spacing: -.1px; }
.pub-content .aeu-card > p { font-size: 14.5px; line-height: 1.65; color: var(--text); margin: 0 0 10px; }
.pub-content .aeu-card > p strong { color: var(--accent); font-weight: 600; }
.pub-content .aeu-card > p:last-child { margin-bottom: 0; }
.pub-content .aeu-card a { color: var(--accent); }
.pub-content .aeu-card a:hover { text-decoration: underline; }

/* Long-form bullet list — soft tinted dots, generous spacing */
.pub-content .pp-list {
    list-style: none; padding: 0; margin: 12px 0;
}
.pub-content .pp-list li {
    position: relative;
    padding: 8px 12px 8px 28px;
    margin-bottom: 4px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--text);
}
.pub-content .pp-list li::before {
    content: '';
    position: absolute;
    left: 10px; top: 16px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--accent);
    opacity: .7;
}
.pub-content .pp-list li strong { color: var(--accent); font-weight: 600; }
.pub-content .text-muted { color: var(--muted); font-size: 13px; }
.pub-content .text-center { text-align: center; }
.pub-content .mt-sm { margin-top: 8px; }

/* Hero-like info boxes for "intro" + "accept" notices in tos/privacy */
.pub-content .info-box.warning,
.pub-content .info-box.success {
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 20px;
    border: 1px solid;
    font-size: 14px; line-height: 1.55;
}
.pub-content .info-box.warning {
    background: color-mix(in srgb, var(--warning) 10%, transparent);
    border-color: color-mix(in srgb, var(--warning) 28%, transparent);
    color: var(--text);
}
.pub-content .info-box.success {
    background: color-mix(in srgb, var(--success) 10%, transparent);
    border-color: color-mix(in srgb, var(--success) 28%, transparent);
    color: var(--text);
}
.pub-content .info-box.warning p strong,
.pub-content .info-box.success p strong { color: var(--text); }

@media (max-width: 600px) {
    .pub-content { padding: 24px 16px 48px; }
    .pub-content .aeu-card { padding: 18px 16px; }
    .pub-content .pp-list li { padding: 6px 4px 6px 24px; font-size: 13.5px; }
}

/* Mobile */
@media (max-width: 700px) {
    .pub-topbar-inner { padding: 10px 14px; gap: 8px; }
    .pub-topbar-dd-label { display: none; }
    .pub-topbar-link, .pub-topbar-cta { padding: 8px 12px; font-size: 12px; }
    .pub-topbar-cta { padding: 8px 14px; }
    .pub-topbar-theme-menu { min-width: 260px; max-height: 280px; }
    .pub-topbar-theme-grid { grid-template-columns: repeat(3, 1fr); }
    .pub-topbar-dd-menu { right: -8px; }
}
@media (max-width: 480px) {
    /* Keep Login visible on small mobile — Chrome reports viewport differently
       than Firefox, so hiding it broke the entry point on Chrome mobile. Both
       Login + Register stay visible, just compact. */
    .pub-topbar-link, .pub-topbar-cta { padding: 7px 10px; font-size: 11.5px; }
    .pub-topbar-theme-menu { min-width: 220px; }
}

/* Auth pages — header aligned with landing's full-width fixed top bar */
.auth-container { max-width: 520px; width: calc(100% - 32px); margin: 100px auto 40px; }
.auth-topbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
    margin-bottom: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(12px);
    padding: 14px 24px;
}
.auth-topbar > .logo.auth-logo { max-width: 1200px; }
.auth-topbar-controls { display: flex; align-items: center; gap: 10px; }
.auth-logo { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--text); }
.auth-logo img { height: 38px !important; }
.auth-lang-dropdown, .auth-theme-dropdown { position: relative; display: inline-block; }
.auth-lang-toggle, .auth-theme-toggle { display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; color: var(--text); font-size: 14px; transition: background var(--trans), color var(--trans), border-color var(--trans), box-shadow var(--trans); }
.auth-lang-toggle:hover, .auth-theme-toggle:hover { background: var(--accent); color: var(--on-accent); border-color: var(--accent); box-shadow: var(--focus-ring); }
.auth-lang-toggle .flag, .auth-lang-item .flag { font-size: 18px; }
.auth-lang-toggle .chevron, .auth-theme-toggle .chevron { font-size: 10px; transition: transform var(--trans); }
.auth-lang-dropdown.open .auth-lang-toggle .chevron, .auth-theme-dropdown.open .auth-theme-toggle .chevron { transform: rotate(180deg); }
.auth-lang-menu, .auth-theme-menu { display: none; position: absolute; top: calc(100% + 6px); right: 0; background-color: var(--surface-card); border: 1px solid var(--border); border-radius: 10px; padding: 8px; box-shadow: var(--shadow-lg); z-index: 100; transition: opacity var(--trans); }
.auth-lang-dropdown.open .auth-lang-menu, .auth-theme-dropdown.open .auth-theme-menu { display: block; }
.auth-lang-menu { min-width: 160px; }
.auth-lang-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; color: var(--text); border-radius: 6px; font-size: 14px; text-decoration: none; transition: background var(--trans), color var(--trans); }
.auth-lang-item:hover { background: var(--surface-2); color: var(--accent); }
.auth-lang-item.active { background: var(--accent); color: var(--on-accent); }
.auth-lang-item .flag { font-size: 20px; }
.auth-theme-menu { min-width: 280px; padding: 12px; max-height: 260px; overflow-y: auto; }
.auth-theme-title { font-size: 11px; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; padding-left: 4px; }
.auth-theme-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; max-height: 200px; overflow-y: auto; }
.auth-theme-btn { padding: 6px 4px; border-radius: 4px; font-size: 10px; cursor: pointer; border: 1px solid var(--border); background: var(--surface-3); color: var(--muted); transition: background var(--trans), color var(--trans), border-color var(--trans); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.auth-theme-btn:hover { background: var(--nav-hover-bg); color: var(--text); border-color: var(--accent); }
.auth-theme-btn.active { background: color-mix(in srgb, var(--accent) 18%, transparent); border-color: var(--accent); color: var(--accent); }
.auth-title { margin-bottom: 24px; text-align: center; }
.auth-footnote { text-align: center; margin-top: 24px; color: var(--muted); }
.auth-zkp { margin-bottom: 15px; padding: 10px; background: var(--surface-2); border-radius: 8px; font-size: 13px; }
.auth-key-box { background: var(--surface-3); padding: 12px; border-radius: 8px; text-align: center; margin-bottom: 24px; border: 1px solid var(--border); }
.auth-code { font-size: 14px; font-family: var(--font-mono); }
.auth-otp { text-align: center; font-size: 24px; letter-spacing: 8px; }
@media (max-width: 600px) {
  .auth-container { margin: 16px auto; padding: 24px 20px; }
  .auth-theme-menu { position: fixed; top: 80px; left: 8px; right: 8px; min-width: auto; width: auto; max-height: calc(100vh - 100px); overflow-y: auto; }
  .auth-lang-menu { position: fixed; top: 80px; right: 8px; min-width: 140px; }
  .auth-theme-grid { grid-template-columns: repeat(3, 1fr); gap: 4px; }
  .auth-theme-btn { padding: 5px 3px; font-size: 9px; }
}
@media (max-width: 400px) {
  .auth-theme-menu { left: 4px; right: 4px; padding: 10px; }
  .auth-theme-grid { grid-template-columns: repeat(3, 1fr); gap: 3px; max-height: 180px; }
  .auth-theme-btn { padding: 4px 2px; font-size: 8px; }
  .auth-theme-title { font-size: 10px; }
}

/* Header/Nav */
.header { background: var(--surface-header); padding: 12px 0; position: sticky; top: 0; z-index: 1000; }
.header-inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 0 clamp(16px, 3vw, 24px); }
.header-left { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.header-nav { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.header-nav .nav-item, .header-nav .nav-group-toggle { font-size: 13px; padding: 8px 12px; color: var(--muted); border-radius: 6px; white-space: nowrap; transition: background var(--trans), color var(--trans); }
.header-nav .nav-item:hover, .header-nav .nav-group-toggle:hover { background: var(--surface-3); color: var(--text); }
.header-nav .nav-item.active, .header-nav .nav-group-toggle.has-active { background: var(--accent); color: var(--on-accent); }
.header-nav .nav-group { position: relative; margin-left: 2px; }
.header-nav .nav-group-toggle { cursor: pointer; background: none; border: none; font-family: inherit; }
.header-nav .nav-dropdown { display: none; position: absolute; top: 100%; left: 0; min-width: 170px; background: var(--surface-card); border: 1px solid var(--border); border-radius: 8px; padding: 6px; box-shadow: var(--shadow-lg); z-index: 1001; padding-top: 12px; margin-top: 0; }
.header-nav .nav-dropdown::before { content: ''; position: absolute; top: -8px; left: 0; right: 0; height: 12px; background: transparent; }
.header-nav .nav-group:hover .nav-dropdown, .header-nav .nav-group.open .nav-dropdown { display: block; }
.header-nav .nav-dropdown a { display: block; padding: 8px 10px; border-radius: 6px; color: var(--text); }
.header-nav .nav-dropdown a:hover { background: var(--surface-2); color: var(--accent); }
.user-menu { position: relative; }
.user-menu-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; color: var(--text); }
.user-menu-toggle svg { width: 20px; height: 20px; flex-shrink: 0; }
.user-menu-label { font-size: 14px; }
.user-menu-dropdown { display: none; position: absolute; right: 0; top: calc(100% + 6px); min-width: 300px; max-width: min(420px, calc(100vw - 24px)); background: var(--surface-card); border: 1px solid var(--border); border-radius: 8px; padding: 8px; box-shadow: 0 10px 40px rgba(0,0,0,0.3); z-index: 1002; }
.user-menu.open .user-menu-dropdown { display: block; }
.user-menu-header { padding: 12px; border-bottom: 1px solid var(--border); margin-bottom: 8px; }
.user-menu-name { font-weight: 600; color: var(--text); font-size: 13px; }
.user-menu-email { font-size: 11px; color: var(--muted); margin-top: 2px; word-break: break-all; }
.user-menu-section { padding: 4px 0; }
.user-menu-section-title { font-size: 10px; text-transform: uppercase; color: var(--muted); padding: 8px 12px 4px; font-weight: 600; }
.user-menu-themes { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; max-height: 180px; overflow-y: auto; padding: 4px 12px 8px; }
.user-menu-langs { display: flex; gap: 6px; padding: 4px 12px; }
.theme-option { padding: 4px 6px; border-radius: 4px; font-size: 11px; cursor: pointer; border: 1px solid var(--border); background: var(--surface-2); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); transition: all var(--trans); }
.theme-option:hover { background: var(--surface-3); color: var(--text); border-color: var(--accent); }
.theme-option.active { background: color-mix(in srgb, var(--accent) 20%, var(--surface)); border-color: var(--accent); color: var(--accent); }
.lang-option { padding: 6px 10px; border-radius: 6px; font-size: 14px; cursor: pointer; border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); transition: all var(--trans); text-decoration: none; }
.lang-option:hover { background: var(--surface-3); color: var(--text); border-color: var(--accent); }
.lang-option.active { background: color-mix(in srgb, var(--accent) 20%, var(--surface)); border-color: var(--accent); color: var(--accent); }
.user-menu-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; color: var(--text); border-radius: 6px; font-size: 13px; transition: background var(--trans); text-decoration: none; }
.user-menu-item:hover { background: var(--surface-2); color: var(--accent); }
.user-menu-item.danger { color: var(--danger); }
.user-menu-item.danger:hover { background: color-mix(in srgb, var(--danger) 12%, var(--surface)); }
.user-menu-item svg { width: 16px; height: 16px; flex-shrink: 0; }
.user-menu-dropdown a { display: block; padding: 8px 10px; border-radius: 6px; color: var(--text); }
.user-menu-dropdown a:hover { background: var(--surface-2); color: var(--accent); }
.mobile-toggle { display: none; }
.logo { display: flex; align-items: center; font-size: 20px; font-weight: 700; color: var(--text); gap: 8px; }
.logo img { height: 36px; }
.logo-text { font-size: 18px; font-weight: 700; color: var(--accent); }
.header-actions { display: flex; align-items: center; gap: 10px; }
.user-id { background: var(--surface-2); padding: 6px 12px; border-radius: 6px; font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.theme-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; color: var(--text); cursor: pointer; }
.mobile-menu { display: none; position: fixed; inset: 0; background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(6px); z-index: 999; overflow-y: auto; }
.mobile-menu .menu-section { padding: 12px 16px; font-weight: 700; color: var(--muted); }
.mobile-menu a { display: block; padding: 10px 16px; color: var(--text); text-decoration: none; border-bottom: 1px solid var(--border); }
.mobile-menu a.active { background: var(--accent); color: var(--on-accent); }
.mobile-menu .lang-buttons a { font-size: 20px; padding: 8px 10px; border-radius: 8px; background: var(--surface-2); display: inline-flex; }
.mobile-menu .lang-buttons { display: flex; gap: 10px; padding: 10px 16px; flex-wrap: wrap; }
.mobile-menu.active { display: block; padding-top: 70px; }
.mobile-toggle span { width: 22px; height: 2px; background: var(--text); transition: 0.3s; }
.mobile-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(4px, 4px); }
.mobile-toggle.active span:nth-child(2) { opacity: 0; }
.mobile-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
@media (max-width: 900px) {
  .header-nav { display: none; }
  .mobile-toggle { display: flex; flex-direction: column; gap: 5px; padding: 8px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; }
  .header-inner { align-items: flex-start; }
}

/* Header user-menu: ALWAYS icon-only (no aeu_id / email text next to it).
   Copre 2 markup diversi:
   - User pages (includes/header.php):  .user-menu-toggle > .user-menu-label
   - Admin pages (admin/includes/header.php): .admin-user-toggle > .user-label + .chevron
   Info dell'utente gia' presenti nel dropdown, averli duplicati nel toggle
   e' rumore. Updated 2026-05-24 user feedback (anche admin). */
.user-menu-label,
.admin-user-toggle .user-label,
.admin-user-toggle .chevron { display: none; }
.user-menu-toggle,
.admin-user-toggle { gap: 0; padding: 10px; }

/* Mobile header layout fix 2026-05-24 — keep single row:
   logo on left, only user icon + hamburger on right.
   Breakpoint at 1024 to catch tablets too (was 900, missed iPad portrait). */
@media (max-width: 1024px) {
  .header-inner {
    flex-wrap: nowrap;       /* single row; the wrap was the root visual issue */
    align-items: center;     /* override the flex-start above */
    gap: 8px;
  }
  .header-left {
    flex: 1 1 auto;
    min-width: 0;            /* allow logo to shrink instead of pushing user-info out */
    gap: 8px;
  }
  /* Both user-info (user pages) and header-actions (admin) get same treatment */
  .user-info,
  .header-actions {
    flex: 0 0 auto;
    gap: 8px;
    margin-left: auto;       /* anchor to right edge */
  }
  .user-menu-toggle,
  .admin-user-toggle { padding: 8px; }
  .user-menu-caret { display: none; }
  /* Both user-menu-dropdown and admin-user-dropdown constrained to viewport */
  .user-menu-dropdown,
  .admin-user-dropdown {
    min-width: 280px;
    max-width: calc(100vw - 16px);
    right: 0;
  }
  /* Logo tightens to free up space */
  .logo img { height: 30px; }
  .logo-text { font-size: 16px; }
}

/* Even tighter for tiny phones (<= 380px). Logo text disappears, leaving
   just the mark + nav hamburger + user icon. */
@media (max-width: 380px) {
  .logo-text { display: none; }
}

/* Dashboard */
.dashboard-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.dashboard-actions form { display: inline-flex; }
.dashboard-actions .btn { min-width: auto; }
.pqc-banner, .infra-banner { background: var(--surface-card); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; margin-bottom: 12px; }
.pqc-banner h3, .infra-banner strong { color: var(--text); margin: 0 0 4px; font-size: 13px; font-weight: 600; }
.pqc-banner p { color: var(--muted); margin: 0 0 8px; font-size: 12px; }
.pqc-features { display: flex; gap: 12px; flex-wrap: wrap; }
.pqc-feature { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11px; }
.status-indicator { width: 7px; height: 7px; border-radius: 50%; display: inline-block; background: var(--muted); flex-shrink: 0; }
.status-indicator.online { background: var(--success); }
.status-indicator.offline { background: var(--danger); }
.status-indicator.unknown { background: var(--warning); }
@media (max-width: 480px) {
  .pqc-banner, .infra-banner { padding: 10px 12px; margin-bottom: 10px; }
  .pqc-banner h3, .infra-banner strong { font-size: 12px; }
  .pqc-banner p { font-size: 11px; margin-bottom: 6px; }
  .pqc-features { gap: 8px; }
  .pqc-feature { font-size: 10px; gap: 4px; }
  .dashboard-actions { gap: 6px; margin-bottom: 10px; }
}
.status-indicator.degraded { background: var(--warning); }
.infra-banner { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.infra-status { display: flex; align-items: center; gap: 10px; }
.infra-message { color: var(--muted); font-size: 13px; }
.infra-count { color: var(--text); font-weight: 600; margin-left: 6px; }
.node-info { display: flex; align-items: center; gap: 8px; }
.node-details { padding: 12px 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.detail-row { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.detail-label { color: var(--muted); font-size: 12px; white-space: nowrap; }
.detail-value { color: var(--text); font-weight: 600; font-size: 12px; text-align: right; word-break: break-all; }
.node-services { padding: 12px 16px 16px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.node-services + .node-services { padding-top: 0; margin-top: -4px; }
.services-mini-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 8px; }
.service-item { background: var(--surface-2); border-radius: 6px; padding: 6px 10px; display: flex; align-items: center; justify-content: space-between; font-size: 12px; }
.service-item.span-2 { grid-column: span 2; }
.service-item.online .service-status { color: var(--success); }
.service-item.offline .service-status { color: var(--danger); }
.service-item.unknown .service-status { color: var(--warning); }
.service-label { color: var(--muted); font-size: 11px; }
.service-name { color: var(--muted); font-size: 11px; font-weight: 500; }
.service-status { font-weight: 600; color: var(--text); font-size: 12px; }
@media (max-width: 480px) {
  .node-details { grid-template-columns: 1fr; padding: 10px 12px; gap: 6px; }
  .node-services { grid-template-columns: repeat(2, 1fr); padding: 10px 12px; gap: 6px; }
  .service-item { padding: 5px 8px; font-size: 11px; }
  .service-item.span-2 { grid-column: span 2; }
  .service-name { font-size: 10px; }
  .service-status { font-size: 11px; }
}
.event-table-wrap { overflow-x: auto; }
.event-table-wrap td code { font-size: 11px; }
.dashboard-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; }
.node-card .badge { font-size: 11px; }
.node-name { font-weight: 700; color: var(--text); }
.node-card .status-indicator { margin-right: 6px; }
@media (max-width: 1024px) { .dashboard-grid { grid-template-columns: 1fr; } }

/* Security Levels Grid */
.security-levels-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 16px; }
.security-level-card { background: var(--surface-2); border: 2px solid var(--border); border-radius: 12px; padding: 16px; transition: all 0.2s ease; }
.security-level-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.security-level-card.standard { border-color: color-mix(in srgb, var(--info) 40%, transparent); }
.security-level-card.standard:hover { border-color: var(--info); }
.security-level-card.secure { border-color: color-mix(in srgb, var(--warning) 40%, transparent); }
.security-level-card.secure:hover { border-color: var(--warning); }
.security-level-card.blackberry { border-color: color-mix(in srgb, #9333ea 40%, transparent); }
.security-level-card.blackberry:hover { border-color: #9333ea; }
.security-level-header { margin-bottom: 12px; }
.security-level-features { display: flex; flex-direction: column; gap: 6px; }
.security-level-features .feature { font-size: 12px; color: var(--muted); padding-left: 8px; border-left: 2px solid var(--border); }
.security-level-card.standard .feature { border-left-color: var(--info); }
.security-level-card.secure .feature { border-left-color: var(--warning); }
.security-level-card.blackberry .feature { border-left-color: #9333ea; }
@media (max-width: 768px) { .security-levels-grid { grid-template-columns: 1fr; } }

/* Info banner & stats */
.info-banner {
  background: linear-gradient(135deg, #1e40af 0%, #7c3aed 100%);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 24px;
  color: var(--on-accent);
}
.info-banner h3 { margin: 0 0 8px 0; }
.info-banner p { margin: 0; opacity: 0.9; font-size: 14px; }
.stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 160px)); gap: 12px; margin-bottom: 16px; }
.stat-box { background: var(--surface-card); border-radius: 8px; padding: 12px; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,0.06); border: 1px solid var(--border); }
.stat-box .icon { font-size: 18px; margin-bottom: 6px; }
.stat-box .value { font-size: 22px; font-weight: 700; color: var(--text); line-height: 1.2; }
.stat-box .label { font-size: 10px; color: var(--muted); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.3px; }
@media (max-width: 900px) { .stats-row { grid-template-columns: repeat(2, 1fr); gap: 10px; } }
@media (max-width: 480px) {
  .stats-row { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .stat-box { padding: 10px 8px; }
  .stat-box .value { font-size: 18px; }
  .stat-box .label { font-size: 9px; }
}
.section-title { font-size: 16px; font-weight: 600; margin: 20px 0 12px 0; display: flex; align-items: center; gap: 8px; color: var(--text); }

/* Blocklists */
.list-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.list-card { background: var(--surface-card); border: none; border-radius: 10px; padding: 14px; position: relative; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.list-card .header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; gap: 8px; }
.list-card .name { font-weight: 600; font-size: 15px; color: var(--text); }
.list-card .badge { padding: 4px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; }
.list-card .desc { font-size: 13px; color: var(--muted); margin-bottom: 12px; }
.list-card .meta { display: flex; gap: 12px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.list-card .actions { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); display: flex; gap: 8px; flex-wrap: wrap; }
.list-card.is-default { border-color: var(--accent); }
.inactive-category { margin-bottom: 20px; }
.inactive-category-title { margin: 0 0 10px 0; font-size: 13px; font-weight: 500; color: var(--muted); }
.inactive-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.inactive-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 12px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.inactive-card-info { flex: 1; min-width: 0; }
.inactive-card-name { font-weight: 600; font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inactive-card-desc { font-size: 11px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inactive-card-domains { font-size: 10px; color: var(--accent); margin-top: 4px; }
.category-chip { display: inline-flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--surface-card); border: 1px solid var(--border); border-radius: 8px; }
.category-chip .emoji { font-size: 18px; }
.category-chip .info { display: flex; flex-direction: column; gap: 2px; }
.category-chip .title { font-weight: 600; color: var(--text); }
.category-chip .desc { font-size: 12px; color: var(--muted); }
.blocklist-cta { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 12px; }

/* Services */
.services-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; gap: 12px; flex-wrap: wrap; }
.refresh-info { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; }
.refresh-info #countdown { font-weight: 600; color: var(--accent); min-width: 20px; }
.legend { display: flex; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.legend-item { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); }
.legend-icon { font-size: 14px; }
/* DNS Nodes Grid - Professional Design */
.nodes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 24px; }
.node-card { background: var(--surface-card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; transition: box-shadow 0.2s ease, transform 0.2s ease; }
.node-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.15); transform: translateY(-2px); }
.node-header { padding: 16px 20px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--surface-2) 50%, transparent); }
.node-header-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.node-info { flex: 1; min-width: 0; }
.node-info h3 { font-size: 14px; font-weight: 700; margin: 0 0 8px 0; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.node-info .node-ips { display: flex; flex-direction: column; gap: 4px; }
.node-info .node-ips code { font-size: 11px; color: var(--text); background: var(--surface-2); padding: 4px 8px; border-radius: 4px; display: inline-block; font-family: var(--font-mono); }
.node-info .node-ips code.ipv6 { font-size: 10px; color: var(--muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.node-body { padding: 16px 20px; }
.services-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.service-box { background: var(--surface-2); border-radius: 8px; padding: 12px 8px; text-align: center; border: 1px solid var(--border); transition: all 0.2s ease; }
.service-box.online { border-color: color-mix(in srgb, var(--success) 40%, transparent); background: color-mix(in srgb, var(--success) 8%, var(--surface-2)); }
.service-box.offline { border-color: color-mix(in srgb, var(--danger) 40%, transparent); background: color-mix(in srgb, var(--danger) 8%, var(--surface-2)); }
.service-box.unknown { border-color: color-mix(in srgb, var(--warning) 40%, transparent); background: color-mix(in srgb, var(--warning) 8%, var(--surface-2)); }
.service-box .service-name { font-size: 12px; font-weight: 700; color: var(--text); margin-bottom: 6px; letter-spacing: 0.3px; }
.service-box .service-status { font-size: 18px; margin-bottom: 4px; line-height: 1; }
.service-box.online .service-status { color: var(--success); }
.service-box.offline .service-status { color: var(--danger); }
.service-latency { font-size: 13px; font-weight: 600; color: var(--success); }
.service-box.offline .service-latency { color: var(--danger); }
.service-port { font-size: 10px; color: var(--muted); margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--border); }
.node-actions { padding: 12px 20px; border-top: 1px solid var(--border); background: var(--surface-2); display: flex; justify-content: flex-end; }
.node-actions .btn { font-size: 12px; padding: 6px 14px; }
.timestamp { font-size: 11px; color: var(--muted); text-align: right; margin-top: 12px; padding-top: 8px; border-top: 1px dashed var(--border); }
.test-form { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; }
.test-form .form-group { margin-bottom: 0; flex: 1; min-width: 150px; }
.test-form .form-group:last-child { flex: 0; }
.test-form .form-label { font-size: 11px; margin-bottom: 4px; }
.test-form .form-control { padding: 8px 10px; font-size: 13px; }
.test-result { background: var(--surface-2); border-radius: 8px; padding: 14px; margin-top: 14px; font-size: 12px; }
.test-output { margin-top: 10px; background: var(--surface); padding: 10px; border-radius: 6px; overflow-x: auto; font-family: var(--font-mono); font-size: 11px; }
@media (max-width: 1200px) { .nodes-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (max-width: 900px) { .nodes-grid { grid-template-columns: 1fr; gap: 16px; } }
@media (max-width: 768px) {
  .services-grid { grid-template-columns: repeat(5, 1fr); gap: 6px; }
  .service-box { padding: 10px 6px; }
  .service-box .service-name { font-size: 11px; }
  .service-box .service-status { font-size: 16px; }
  .service-latency { font-size: 12px; }
  .service-port { font-size: 9px; }
  .node-header { padding: 14px 16px; }
  .node-body { padding: 14px 16px; }
  .test-form { flex-direction: column; }
  .test-form .form-group { width: 100%; }
  .services-header { flex-direction: column; align-items: flex-start; gap: 10px; }
  .refresh-info { width: 100%; justify-content: space-between; }
}
@media (max-width: 480px) {
  .services-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .service-box { padding: 8px 4px; }
  .service-box .service-name { font-size: 10px; }
  .service-box .service-status { font-size: 14px; }
  .service-latency { font-size: 11px; }
  .node-header { padding: 12px; }
  .node-body { padding: 12px; }
  .node-actions { padding: 10px 12px; }
}
@media (max-width: 360px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Status dot indicator */
.status-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 8px; vertical-align: middle; }
.status-dot.online { background: var(--success); box-shadow: 0 0 6px var(--success); }
.status-dot.offline { background: var(--danger); box-shadow: 0 0 6px var(--danger); }

/* Table compact */
.table.table-compact { margin: 0; }
.table.table-compact td { padding: 8px 10px; font-size: 13px; }

/* Card actions */
.card-actions { margin-top: 16px; display: flex; gap: 8px; flex-wrap: wrap; }

/* Status dot large */
.status-dot.large { width: 32px; height: 32px; }

/* Failover nodes */
.failover-nodes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.failover-node { padding: 20px; background: var(--surface-2); border-radius: 12px; text-align: center; border: 1px solid var(--border); }
.failover-node.online { border-color: color-mix(in srgb, var(--success) 40%, var(--border)); }
.failover-node.offline { border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); }
.failover-node-status { margin-bottom: 12px; }
.failover-node-name { margin-bottom: 8px; font-size: 14px; font-weight: 600; }
.failover-node-badges { margin-top: 12px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
@media (max-width: 768px) { .failover-nodes { grid-template-columns: 1fr; } }

/* Info box */
.info-box { padding: 12px; background: var(--surface-2); border-radius: 8px; border: 1px solid var(--border); }

/* Break all */
.break-all { word-break: break-all; }

/* Threat Intel */
.ti-add-form { display: grid; grid-template-columns: 1fr 2fr 150px 150px auto; gap: 12px; align-items: end; }
@media (max-width: 1200px) { .ti-add-form { grid-template-columns: 1fr 1fr; } }
@media (max-width: 768px) { .ti-add-form { grid-template-columns: 1fr; } }
.ti-source-name { font-weight: 600; color: var(--text); }
.ti-source-url { font-size: 12px; color: var(--muted); max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge-malware { background: color-mix(in srgb, var(--danger) 20%, transparent); color: var(--danger); }
.badge-phishing { background: color-mix(in srgb, var(--warning) 20%, transparent); color: var(--warning); }
.badge-botnet { background: color-mix(in srgb, #8b5cf6 20%, transparent); color: #8b5cf6; }
.badge-spam { background: color-mix(in srgb, var(--info) 20%, transparent); color: var(--info); }
.badge-suspicious { background: var(--surface-2); color: var(--muted); }
.control-step { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; background: var(--accent); color: var(--surface); border-radius: 50%; font-size: 12px; font-weight: 600; flex-shrink: 0; }

/* Steps grid */
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.step-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 20px; text-align: center; }
.step-number { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: var(--accent); color: var(--surface); border-radius: 50%; font-size: 14px; font-weight: 700; margin-bottom: 12px; }
.step-title { font-size: 14px; font-weight: 600; color: var(--text); margin: 0 0 8px 0; }
.step-desc { font-size: 13px; color: var(--muted); margin: 0; line-height: 1.5; }
@media (max-width: 900px) { .steps-grid { grid-template-columns: 1fr; } }

/* Quantum */
.quantum-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 20px; }
.quantum-node { background: var(--surface-card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-sm); }
.quantum-node-header { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 15%, var(--surface-2)), var(--surface-2)); padding: 16px 20px; border-bottom: 1px solid var(--border); }
.quantum-node-header.cyan { background: linear-gradient(135deg, color-mix(in srgb, #06b6d4 15%, var(--surface-2)), var(--surface-2)); }
.quantum-node-title { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; }
.quantum-node-ip { font-size: 12px; color: var(--muted); font-weight: normal; background: var(--surface); padding: 2px 8px; border-radius: 4px; }
.quantum-node-body { padding: 16px; }
.quantum-services { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.quantum-service { background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 14px; display: flex; align-items: center; gap: 12px; transition: border-color 0.2s; }
.quantum-service:hover { border-color: var(--accent); }
.quantum-service-info { flex: 1; }
.quantum-service-name { font-weight: 600; font-size: 13px; color: var(--text); }
.quantum-service-port { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* Quantum CA Stats */
.quantum-ca-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
.quantum-stat { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 16px; text-align: center; }
.quantum-stat .label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
.quantum-stat .value { font-size: 18px; font-weight: 700; color: var(--text); word-break: break-all; }
.quantum-stat .value.sm { font-size: 13px; }
.quantum-stat .value.accent { color: var(--accent); }
.quantum-stat .value.success { color: var(--success); }
.quantum-stat .value.danger { color: var(--danger); }

/* PQC/ZKP Cards */
.quantum-info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 20px; }
.quantum-info-card { background: var(--surface-card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-sm); }
.quantum-info-header { padding: 14px 20px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.quantum-info-header h3 { margin: 0; font-size: 14px; font-weight: 600; }
.quantum-info-body { padding: 20px; }
.quantum-stats-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.quantum-algo-box { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 16px; text-align: center; }
.quantum-algo-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
.quantum-algo-value { font-size: 16px; font-weight: 700; color: var(--accent); }
.quantum-algo-note { font-size: 10px; color: var(--muted); margin-top: 6px; }
.quantum-info-footer { padding: 12px 20px; border-top: 1px solid var(--border); background: var(--surface-2); text-align: center; }
.quantum-features { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 12px 20px; border-top: 1px solid var(--border); background: var(--surface-2); }
.quantum-feature { font-size: 11px; color: var(--success); display: flex; align-items: center; gap: 4px; }
.quantum-feature::before { content: '✓'; font-weight: bold; }

/* Protocol Cards */
.protocol-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.protocol-card { background: var(--surface-card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.protocol-card-header { padding: 16px 20px; border-bottom: 1px solid var(--border); }
.protocol-card-header.accent { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, var(--surface-2)), var(--surface-2)); }
.protocol-card-header.cyan { background: linear-gradient(135deg, color-mix(in srgb, #06b6d4 12%, var(--surface-2)), var(--surface-2)); }
.protocol-card-header.success { background: linear-gradient(135deg, color-mix(in srgb, var(--success) 12%, var(--surface-2)), var(--surface-2)); }
.protocol-card-header h4 { margin: 0; font-size: 14px; font-weight: 600; }
.protocol-card-header.accent h4 { color: var(--accent); }
.protocol-card-header.cyan h4 { color: #06b6d4; }
.protocol-card-header.success h4 { color: var(--success); }
.protocol-card-body { padding: 16px 20px; flex: 1; }
.protocol-desc { font-size: 13px; color: var(--muted); margin-bottom: 12px; line-height: 1.5; }
.protocol-list { margin: 0; padding-left: 18px; font-size: 12px; color: var(--muted); }
.protocol-list li { margin-bottom: 6px; }
.protocol-card-footer { padding: 12px 20px; border-top: 1px solid var(--border); background: var(--surface-2); }

/* Code block */
.code-block { background: var(--surface-2); padding: 20px; border-radius: 10px; font-size: 11px; overflow-x: auto; border: 1px solid var(--border); line-height: 1.4; }

.text-cyan { color: #06b6d4 !important; }
.text-xs { font-size: 10px; }
.opacity-70 { opacity: 0.7; }
.ml-xs { margin-left: 4px; }
.mb-0 { margin-bottom: 0 !important; }
.mb-xs { margin-bottom: 4px; }
.mb-sm { margin-bottom: 8px; }
.mb-md { margin-bottom: 16px; }
.mt-sm { margin-top: 8px; }
.d-flex { display: flex; }
.justify-between { justify-content: space-between; }
.align-center { align-items: center; }
.profiles-section { margin-bottom: 20px; }
@media (max-width: 900px) {
  .quantum-grid, .protocol-grid, .quantum-info-grid { grid-template-columns: 1fr; }
  .quantum-services { grid-template-columns: 1fr; }
  .quantum-stats-2 { grid-template-columns: 1fr; }
  .quantum-ca-stats { grid-template-columns: repeat(2, 1fr); }
}

/* Firewall */
.firewall-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 20px; }
.stat-card { background: var(--surface-card); border-radius: var(--radius-sm); padding: 16px; text-align: center; border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.stat-card.danger { border-left: 4px solid var(--danger); }
.stat-card.success { border-left: 4px solid var(--success); }
.stat-card.warning { border-left: 4px solid var(--warning); }
.stat-card.info { border-left: 4px solid var(--accent); }
.stat-value { font-size: 1.8em; font-weight: 700; color: var(--text); }
.stat-label { color: var(--muted); font-size: 0.9em; }
.monitor-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.monitor-badge { padding: 6px 12px; border-radius: 20px; font-size: 12px; display: flex; align-items: center; gap: 6px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); }
.monitor-badge.active { background: color-mix(in srgb, var(--success) 16%, var(--surface)); color: var(--success-strong); border-color: color-mix(in srgb, var(--success) 30%, var(--border)); }
.section-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.timeline-bar { height: 30px; background: var(--surface-2); border-radius: 6px; display: flex; align-items: flex-end; padding: 2px; gap: 2px; margin: 10px 0; border: 1px solid var(--border); }
.timeline-bar .bar { flex: 1; background: color-mix(in srgb, var(--danger) 75%, transparent); border-radius: 3px; min-height: 4px; transition: opacity var(--trans); }
.timeline-bar .bar:hover { opacity: 0.8; }
.ip-cell { display: flex; align-items: center; gap: 8px; }
.flag { font-size: 1.2em; }
.target-list { font-size: 11px; color: var(--accent); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.geo-info { font-size: 11px; color: var(--muted); }
.attack-count { font-weight: 700; color: var(--danger); }
.severity-low { color: var(--success); }
.severity-medium { color: var(--warning); }
.severity-high { color: #ff6b6b; }
.severity-critical { color: var(--danger); font-weight: 700; }
.attack-type { padding: 2px 8px; border-radius: 6px; font-size: 11px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); }
.attack-type.brute_force { background: color-mix(in srgb, var(--danger) 16%, var(--surface)); color: var(--danger); }
.attack-type.dns_abuse { background: color-mix(in srgb, var(--warning) 16%, var(--surface)); color: var(--warning-strong); }
.attack-type.api_abuse { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); color: var(--accent); }
.attack-type.scan { background: color-mix(in srgb, var(--info) 16%, var(--surface)); color: var(--info); }
.details-row { background: var(--surface-2); padding: 10px 12px; border-radius: 8px; margin-top: 6px; font-size: 11px; border: 1px solid var(--border); }

/* Audit */
.w-icon { width: 40px; text-align: center; }
.w-auto { max-width: 300px; }
.detail-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.detail-chip { background: var(--surface-2); padding: 2px 8px; border-radius: 4px; white-space: nowrap; font-size: 11px; border: 1px solid var(--border); }
.truncate-cell { max-width: 250px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-dot.warning { background: var(--warning); box-shadow: 0 0 8px var(--warning); }
.btn-group { display: flex; gap: 12px; flex-wrap: wrap; }
.mt-md { margin-top: 16px; }

/* Modal */
.modal { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.8); z-index: 1000; align-items: center; justify-content: center; }
.modal-content { background: var(--surface-card); padding: 24px; border-radius: 12px; max-width: 400px; width: 90%; border: 1px solid var(--border); box-shadow: var(--shadow-lg); }
.modal-title { margin: 0 0 16px 0; font-size: 18px; font-weight: 600; }

/* Form variants */
.form-control-sm { padding: 4px 8px; font-size: 13px; }

/* Settings / Maintenance */
.maintenance-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.maintenance-card { padding: 16px; background: var(--surface-2); border-radius: 8px; border: 1px solid var(--border); }
.maintenance-title { margin: 0 0 8px 0; font-size: 14px; font-weight: 600; }
.maintenance-desc { font-size: 12px; color: var(--muted); margin-bottom: 12px; line-height: 1.5; }

/* Branding */
.font-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.font-card { cursor: pointer; padding: 16px; border: 2px solid var(--border); border-radius: 12px; background: var(--surface-2); transition: all 0.2s; }
.font-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.font-card.selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface-2)); }
.font-card input { display: none; }
.font-name { font-size: 18px; font-weight: 600; margin-bottom: 4px; }
.font-style { font-size: 12px; color: var(--muted); }
.font-sample { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 13px; line-height: 1.6; color: var(--muted); }

.logo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.logo-card { cursor: pointer; text-align: center; padding: 16px 12px; border: 2px solid var(--border); border-radius: 12px; background: var(--surface-2); transition: all 0.2s; }
.logo-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.logo-card.selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface-2)); }
.logo-card input { display: none; }
.logo-card img { max-width: 100%; max-height: 60px; margin-bottom: 8px; }
.logo-name { font-size: 10px; color: var(--muted); word-break: break-all; }

.branding-preview-box { display: flex; align-items: center; gap: 16px; padding: 16px; background: var(--surface-2); border-radius: 10px; border: 1px solid var(--border); }
.branding-2fa-img { width: 64px; height: 64px; border-radius: 8px; }
.branding-2fa-name { font-weight: 600; margin-bottom: 4px; }

.branding-config-card { background: var(--surface-2); }
.branding-config-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; }
.branding-config-label { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.branding-config-value { font-weight: 600; }

@media (max-width: 600px) { .font-grid { grid-template-columns: 1fr; } .logo-grid { grid-template-columns: repeat(3, 1fr); } }

.firewall-actions { display: flex; justify-content: space-between; font-size: 10px; color: var(--muted); }
.firewall-cards { margin-top: 20px; }
.firewall-table-wrap { overflow-x: auto; }
.firewall-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.badge.danger { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, transparent); }
.badge.info { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.badge.warning { background: color-mix(in srgb, var(--warning) 16%, transparent); color: var(--warning-strong); border-color: color-mix(in srgb, var(--warning) 35%, transparent); }
.badge.secondary { background: var(--surface-2); color: var(--muted); border-color: var(--border); }
.stat-hint { color: var(--muted); font-size: 12px; margin-top: 4px; }
.firewall-settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
.firewall-settings-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 15px; margin-top: 20px; }
.toggle-label { margin-left: 10px; color: var(--text); }

@media (max-width: 1000px) { .section-grid { grid-template-columns: 1fr; } .target-list { max-width: 160px; } }
@media (max-width: 768px) {
  .firewall-stats { grid-template-columns: repeat(2, 1fr); }
  .monitor-badges { gap: 6px; }
}
@media (max-width: 520px) {
  .firewall-stats { grid-template-columns: 1fr 1fr; gap: 8px; }
  .stat-card { padding: 12px; }
  .stat-value { font-size: 1.4em; }
  .stat-label { font-size: 11px; }
  .ip-cell { flex-direction: column; align-items: flex-start; gap: 4px; }
  .ip-badge { font-size: 11px; }
  .target-list { max-width: 120px; font-size: 11px; }
  .geo-info { font-size: 10px; }
  .attack-type { font-size: 10px; }
  .details-row { font-size: 10px; padding: 8px 10px; }
}

/* Responsive */
@media (max-width: 1024px) { .container { padding: 0 16px; } .table th, .table td { padding: 10px; } }
@media (max-width: 900px) { .header-nav { display: none; } .card { padding: 16px; } .stats-grid { grid-template-columns: 1fr 1fr; } .page-title { font-size: 24px; } .navbar-inner { flex-wrap: wrap; gap: 12px; } .nav-list { width: 100%; overflow-x: auto; } .card-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .container { padding: 0 16px; } .mobile-toggle { display: flex; } .table-responsive { overflow-x: auto; } .table { min-width: 640px; } .action-buttons, .blocklist-hero-actions, .profile-actions, .bulk-actions { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; } .tabs, .setup-tabs { flex-wrap: wrap; } }
@media (max-width: 600px) { .user-menu-label { display: none; } .user-menu-toggle { padding: 10px; } .user-menu-dropdown { position: fixed; top: 70px; left: 10px; right: 10px; min-width: auto; width: calc(100% - 20px); max-height: calc(100vh - 90px); overflow-y: auto; } .user-menu-themes { grid-template-columns: repeat(4, 1fr); gap: 4px; max-height: 150px; } .theme-option { padding: 5px 4px; font-size: 9px; } .stats-grid { grid-template-columns: 1fr; } .table th, .table td { padding: 8px; font-size: 13px; } .table { min-width: 520px; } }

:root {
  --surface: #0a0a1a;
  --surface-2: #11182a;
  --surface-3: #192030;
  --surface-card: #151d2d;
  --surface-header: #080814;
  --bg: #0a0a1a;
  --bg-secondary: #11182a;
  --bg-tertiary: #192030;
  --card-bg: #151d2d;
  --header-bg: #080814;
  --text: #cce7ff;
  --text-secondary: #99bbcc;
  --muted: #99bbcc;
  --border: #2a3a4a;
  --accent: #66b2ff;
  --accent-hover: color-mix(in srgb, #66b2ff 88%, #ffffff 12%);
  --accent-active: #5492d1;
  --accent-glow: rgba(102,178,255,0.2);
  --on-accent: #ffffff;
  --nav-hover-bg: rgba(51,102,153,0.15);
  --select-hover-bg: rgba(51,102,153,0.15);
}


[data-theme="OLED"] {
  --surface: #000000;
  --surface-2: #0a0a0a;
  --surface-3: #111111;
  --surface-card: #1a1a1a;
  --surface-header: #000000;
  --bg: #000000;
  --bg-secondary: #0a0a0a;
  --bg-tertiary: #111111;
  --card-bg: #1a1a1a;
  --header-bg: #000000;
  --text: #f0f0f0;
  --text-secondary: #a0a0a0;
  --muted: #a0a0a0;
  --border: #2a2a2a;
  --accent: #30d9fa;
  --accent-hover: color-mix(in srgb, #30d9fa 88%, #ffffff 12%);
  --accent-active: #27b2cd;
  --accent-glow: rgba(48,217,250,0.25);
  --on-accent: #0b0f14;
  --nav-hover-bg: rgba(48,217,250,0.1);
  --select-hover-bg: rgba(48,217,250,0.1);
}


[data-theme="Cyber"] {
  --surface: #050508;
  --surface-2: #0a0a10;
  --surface-3: #101018;
  --surface-card: #101520;
  --surface-header: #020205;
  --bg: #050508;
  --bg-secondary: #0a0a10;
  --bg-tertiary: #101018;
  --card-bg: #101520;
  --header-bg: #020205;
  --text: #00f0ff;
  --text-secondary: #00b8c8;
  --muted: #00b8c8;
  --border: #003040;
  --accent: #00f0ff;
  --accent-hover: color-mix(in srgb, #00f0ff 88%, #ffffff 12%);
  --accent-active: #00c5d1;
  --accent-glow: rgba(0,240,255,0.25);
  --on-accent: #0b0f14;
  --nav-hover-bg: rgba(0,240,255,0.12);
  --select-hover-bg: rgba(0,240,255,0.12);
}


[data-theme="Executive Dark"] {
  --surface: #0d1117;
  --surface-2: #161b22;
  --surface-3: #21262d;
  --surface-card: #1c222a;
  --surface-header: #0a0e12;
  --bg: #0d1117;
  --bg-secondary: #161b22;
  --bg-tertiary: #21262d;
  --card-bg: #1c222a;
  --header-bg: #0a0e12;
  --text: #f0f0f0;
  --text-secondary: #8b949e;
  --muted: #8b949e;
  --border: #30363d;
  --accent: #1f6feb;
  --accent-hover: color-mix(in srgb, #1f6feb 88%, #ffffff 12%);
  --accent-active: #195bc1;
  --accent-glow: rgba(31,111,235,0.2);
  --on-accent: #ffffff;
  --nav-hover-bg: rgba(255,255,255,0.05);
  --select-hover-bg: rgba(255,255,255,0.05);
}


[data-theme="Black Red"] {
  --surface: #000000;
  --surface-2: #0a0505;
  --surface-3: #150808;
  --surface-card: #1a0a0a;
  --surface-header: #000000;
  --bg: #000000;
  --bg-secondary: #0a0505;
  --bg-tertiary: #150808;
  --card-bg: #1a0a0a;
  --header-bg: #000000;
  --text: #ffffff;
  --text-secondary: #ff8888;
  --muted: #ff8888;
  --border: #3a1515;
  --accent: #ff3333;
  --accent-hover: color-mix(in srgb, #ff3333 88%, #ffffff 12%);
  --accent-active: #d12a2a;
  --accent-glow: rgba(255,51,51,0.25);
  --on-accent: #ffffff;
  --nav-hover-bg: rgba(255,51,51,0.15);
  --select-hover-bg: rgba(255,51,51,0.15);
}


[data-theme="Sunset Industrial"] {
  --surface: #252a2e;
  --surface-2: #2f3a3f;
  --surface-3: #394550;
  --surface-card: #3a4550;
  --surface-header: #1f2428;
  --bg: #252a2e;
  --bg-secondary: #2f3a3f;
  --bg-tertiary: #394550;
  --card-bg: #3a4550;
  --header-bg: #1f2428;
  --text: #f0f0f0;
  --text-secondary: #ffc300;
  --muted: #ffc300;
  --border: #4a5560;
  --accent: #ff8300;
  --accent-hover: color-mix(in srgb, #ff8300 88%, #ffffff 12%);
  --accent-active: #d16b00;
  --accent-glow: rgba(255,131,0,0.25);
  --on-accent: #ffffff;
  --nav-hover-bg: rgba(255,131,0,0.12);
  --select-hover-bg: rgba(255,131,0,0.12);
}


[data-theme="Sunset Modern Dark"] {
  --surface: #252a2e;
  --surface-2: #2f3a3f;
  --surface-3: #394550;
  --surface-card: #3a4550;
  --surface-header: #1f2428;
  --bg: #252a2e;
  --bg-secondary: #2f3a3f;
  --bg-tertiary: #394550;
  --card-bg: #3a4550;
  --header-bg: #1f2428;
  --text: #f0f0f0;
  --text-secondary: #ffc300;
  --muted: #ffc300;
  --border: #4a5560;
  --accent: #ff8300;
  --accent-hover: color-mix(in srgb, #ff8300 88%, #ffffff 12%);
  --accent-active: #d16b00;
  --accent-glow: rgba(255,131,0,0.25);
  --on-accent: #ffffff;
  --nav-hover-bg: rgba(255,131,0,0.12);
  --select-hover-bg: rgba(255,131,0,0.12);
}


[data-theme="LimeBlue"] {
  --surface: #0a1420;
  --surface-2: #0f1b2c;
  --surface-3: #142540;
  --surface-card: #182838;
  --surface-header: #060d18;
  --bg: #0a1420;
  --bg-secondary: #0f1b2c;
  --bg-tertiary: #142540;
  --card-bg: #182838;
  --header-bg: #060d18;
  --text: #aaff00;
  --text-secondary: #d6ff66;
  --muted: #d6ff66;
  --border: #2a4020;
  --accent: #aaff00;
  --accent-hover: color-mix(in srgb, #aaff00 88%, #ffffff 12%);
  --accent-active: #8bd100;
  --accent-glow: rgba(170,255,0,0.25);
  --on-accent: #0b0f14;
  --nav-hover-bg: rgba(170,255,0,0.12);
  --select-hover-bg: rgba(170,255,0,0.12);
}


[data-theme="Charcoal Gold"] {
  --surface: #0c0c0c;
  --surface-2: #121212;
  --surface-3: #1a1a1a;
  --surface-card: #222018;
  --surface-header: #080808;
  --bg: #0c0c0c;
  --bg-secondary: #121212;
  --bg-tertiary: #1a1a1a;
  --card-bg: #222018;
  --header-bg: #080808;
  --text: #ffbf00;
  --text-secondary: #ffe066;
  --muted: #ffe066;
  --border: #3a3020;
  --accent: #ffbf00;
  --accent-hover: color-mix(in srgb, #ffbf00 88%, #ffffff 12%);
  --accent-active: #d19d00;
  --accent-glow: rgba(255,191,0,0.25);
  --on-accent: #0b0f14;
  --nav-hover-bg: rgba(255,191,0,0.12);
  --select-hover-bg: rgba(255,191,0,0.12);
}


[data-theme="Slate Purple"] {
  --surface: #18192a;
  --surface-2: #1e1f2f;
  --surface-3: #26283a;
  --surface-card: #2a2b40;
  --surface-header: #121320;
  --bg: #18192a;
  --bg-secondary: #1e1f2f;
  --bg-tertiary: #26283a;
  --card-bg: #2a2b40;
  --header-bg: #121320;
  --text: #cc66ff;
  --text-secondary: #e0b3ff;
  --muted: #e0b3ff;
  --border: #3a2a5a;
  --accent: #cc66ff;
  --accent-hover: color-mix(in srgb, #cc66ff 88%, #ffffff 12%);
  --accent-active: #a754d1;
  --accent-glow: rgba(204,102,255,0.25);
  --on-accent: #ffffff;
  --nav-hover-bg: rgba(204,102,255,0.12);
  --select-hover-bg: rgba(204,102,255,0.12);
}


[data-theme="Acid Carbon"] {
  --surface: #141414;
  --surface-2: #1c1c1c;
  --surface-3: #242424;
  --surface-card: #282a20;
  --surface-header: #0c0c0c;
  --bg: #141414;
  --bg-secondary: #1c1c1c;
  --bg-tertiary: #242424;
  --card-bg: #282a20;
  --header-bg: #0c0c0c;
  --text: #baff29;
  --text-secondary: #d7ff5e;
  --muted: #d7ff5e;
  --border: #3a4020;
  --accent: #baff29;
  --accent-hover: color-mix(in srgb, #baff29 88%, #ffffff 12%);
  --accent-active: #99d122;
  --accent-glow: rgba(186,255,41,0.25);
  --on-accent: #0b0f14;
  --nav-hover-bg: rgba(186,255,41,0.12);
  --select-hover-bg: rgba(186,255,41,0.12);
}


[data-theme="Oceanic Midnight"] {
  --surface: #011627;
  --surface-2: #022030;
  --surface-3: #032a3d;
  --surface-card: #0a3040;
  --surface-header: #000d18;
  --bg: #011627;
  --bg-secondary: #022030;
  --bg-tertiary: #032a3d;
  --card-bg: #0a3040;
  --header-bg: #000d18;
  --text: #E0F7FA;
  --text-secondary: #B2DFDB;
  --muted: #B2DFDB;
  --border: #0a4050;
  --accent: #2EC4B6;
  --accent-hover: color-mix(in srgb, #2EC4B6 88%, #ffffff 12%);
  --accent-active: #26a195;
  --accent-glow: rgba(46,196,182,0.25);
  --on-accent: #ffffff;
  --nav-hover-bg: rgba(46,196,182,0.15);
  --select-hover-bg: rgba(46,196,182,0.15);
}


[data-theme="Graphite Royal Violet"] {
  --surface: #141414;
  --surface-2: #1A1A1A;
  --surface-3: #222222;
  --surface-card: #281830;
  --surface-header: #0c0c0c;
  --bg: #141414;
  --bg-secondary: #1A1A1A;
  --bg-tertiary: #222222;
  --card-bg: #281830;
  --header-bg: #0c0c0c;
  --text: #EAEAEA;
  --text-secondary: #CFCFCF;
  --muted: #CFCFCF;
  --border: #3a2850;
  --accent: #8E44AD;
  --accent-hover: color-mix(in srgb, #8E44AD 88%, #ffffff 12%);
  --accent-active: #74388e;
  --accent-glow: rgba(142,68,173,0.25);
  --on-accent: #ffffff;
  --nav-hover-bg: rgba(142,68,173,0.12);
  --select-hover-bg: rgba(142,68,173,0.12);
}


[data-theme="Aurora Gray"] {
  --surface: #242430;
  --surface-2: #2e2e3a;
  --surface-3: #383848;
  --surface-card: #3a3a4a;
  --surface-header: #1c1c28;
  --bg: #242430;
  --bg-secondary: #2e2e3a;
  --bg-tertiary: #383848;
  --card-bg: #3a3a4a;
  --header-bg: #1c1c28;
  --text: #ff4d88;
  --text-secondary: #ff99bb;
  --muted: #ff99bb;
  --border: #4a3050;
  --accent: #ff4d88;
  --accent-hover: color-mix(in srgb, #ff4d88 88%, #ffffff 12%);
  --accent-active: #d13f70;
  --accent-glow: rgba(255,77,136,0.25);
  --on-accent: #ffffff;
  --nav-hover-bg: rgba(255,77,136,0.12);
  --select-hover-bg: rgba(255,77,136,0.12);
}


[data-theme="Forest Night"] {
  --surface: #081a15;
  --surface-2: #0b2e26;
  --surface-3: #104030;
  --surface-card: #144838;
  --surface-header: #040d0a;
  --bg: #081a15;
  --bg-secondary: #0b2e26;
  --bg-tertiary: #104030;
  --card-bg: #144838;
  --header-bg: #040d0a;
  --text: #a8ff60;
  --text-secondary: #cfff90;
  --muted: #cfff90;
  --border: #1a5040;
  --accent: #a8ff60;
  --accent-hover: color-mix(in srgb, #a8ff60 88%, #ffffff 12%);
  --accent-active: #8ad14f;
  --accent-glow: rgba(168,255,96,0.25);
  --on-accent: #0b0f14;
  --nav-hover-bg: rgba(168,255,96,0.12);
  --select-hover-bg: rgba(168,255,96,0.12);
}


[data-theme="Retro Terminal"] {
  --surface: #000000;
  --surface-2: #050505;
  --surface-3: #0a0a0a;
  --surface-card: #0a1a0a;
  --surface-header: #000000;
  --bg: #000000;
  --bg-secondary: #050505;
  --bg-tertiary: #0a0a0a;
  --card-bg: #0a1a0a;
  --header-bg: #000000;
  --text: #33ff33;
  --text-secondary: #66ff66;
  --muted: #66ff66;
  --border: #0a3010;
  --accent: #33ff33;
  --accent-hover: color-mix(in srgb, #33ff33 88%, #ffffff 12%);
  --accent-active: #2ad12a;
  --accent-glow: rgba(51,255,51,0.3);
  --on-accent: #0b0f14;
  --nav-hover-bg: rgba(51,255,51,0.1);
  --select-hover-bg: rgba(51,255,51,0.1);
}


[data-theme="Solar Storm"] {
  --surface: #000000;
  --surface-2: #080500;
  --surface-3: #100a00;
  --surface-card: #1a1200;
  --surface-header: #000000;
  --bg: #000000;
  --bg-secondary: #080500;
  --bg-tertiary: #100a00;
  --card-bg: #1a1200;
  --header-bg: #000000;
  --text: #ffee00;
  --text-secondary: #ffbb00;
  --muted: #ffbb00;
  --border: #402a00;
  --accent: #ff8800;
  --accent-hover: color-mix(in srgb, #ff8800 88%, #ffffff 12%);
  --accent-active: #d17000;
  --accent-glow: rgba(255,136,0,0.3);
  --on-accent: #ffffff;
  --nav-hover-bg: rgba(255,136,0,0.15);
  --select-hover-bg: rgba(255,136,0,0.15);
}


[data-theme="Espresso Rose"] {
  --surface: #2a1a18;
  --surface-2: #3e2723;
  --surface-3: #4a3530;
  --surface-card: #503a38;
  --surface-header: #1a0f0d;
  --bg: #2a1a18;
  --bg-secondary: #3e2723;
  --bg-tertiary: #4a3530;
  --card-bg: #503a38;
  --header-bg: #1a0f0d;
  --text: #f48fb1;
  --text-secondary: #f8bbd0;
  --muted: #f8bbd0;
  --border: #5a3a3a;
  --accent: #f48fb1;
  --accent-hover: color-mix(in srgb, #f48fb1 88%, #ffffff 12%);
  --accent-active: #c87591;
  --accent-glow: rgba(244,143,177,0.25);
  --on-accent: #ffffff;
  --nav-hover-bg: rgba(244,143,177,0.12);
  --select-hover-bg: rgba(244,143,177,0.12);
}


[data-theme="Tech Mint"] {
  --surface: #181818;
  --surface-2: #212121;
  --surface-3: #2a2a2a;
  --surface-card: #2a3830;
  --surface-header: #101010;
  --bg: #181818;
  --bg-secondary: #212121;
  --bg-tertiary: #2a2a2a;
  --card-bg: #2a3830;
  --header-bg: #101010;
  --text: #a8ffce;
  --text-secondary: #d0ffe5;
  --muted: #d0ffe5;
  --border: #2a4a3a;
  --accent: #a8ffce;
  --accent-hover: color-mix(in srgb, #a8ffce 88%, #ffffff 12%);
  --accent-active: #8ad1a9;
  --accent-glow: rgba(168,255,206,0.25);
  --on-accent: #0b0f14;
  --nav-hover-bg: rgba(168,255,206,0.12);
  --select-hover-bg: rgba(168,255,206,0.12);
}


[data-theme="Infra Night"] {
  --surface: #080608;
  --surface-2: #0b0b0f;
  --surface-3: #120a15;
  --surface-card: #1a0a20;
  --surface-header: #050305;
  --bg: #080608;
  --bg-secondary: #0b0b0f;
  --bg-tertiary: #120a15;
  --card-bg: #1a0a20;
  --header-bg: #050305;
  --text: #ff0033;
  --text-secondary: #ff3366;
  --muted: #ff3366;
  --border: #3a1040;
  --accent: #9900ff;
  --accent-hover: color-mix(in srgb, #9900ff 88%, #ffffff 12%);
  --accent-active: #7d00d1;
  --accent-glow: rgba(153,0,255,0.25);
  --on-accent: #ffffff;
  --nav-hover-bg: rgba(153,0,255,0.12);
  --select-hover-bg: rgba(153,0,255,0.12);
}


[data-theme="Solarized Terminal"] {
  --surface: #001a22;
  --surface-2: #002b36;
  --surface-3: #063845;
  --surface-card: #083a48;
  --surface-header: #000f15;
  --bg: #001a22;
  --bg-secondary: #002b36;
  --bg-tertiary: #063845;
  --card-bg: #083a48;
  --header-bg: #000f15;
  --text: #b58900;
  --text-secondary: #93a1a1;
  --muted: #93a1a1;
  --border: #0a4a55;
  --accent: #2aa198;
  --accent-hover: color-mix(in srgb, #2aa198 88%, #ffffff 12%);
  --accent-active: #22847d;
  --accent-glow: rgba(42,161,152,0.25);
  --on-accent: #ffffff;
  --nav-hover-bg: rgba(42,161,152,0.12);
  --select-hover-bg: rgba(42,161,152,0.12);
}


[data-theme="Sunset Blaze"] {
  --surface: #1a0000;
  --surface-2: #290001;
  --surface-3: #380508;
  --surface-card: #401015;
  --surface-header: #0d0000;
  --bg: #1a0000;
  --bg-secondary: #290001;
  --bg-tertiary: #380508;
  --card-bg: #401015;
  --header-bg: #0d0000;
  --text: #ff6f00;
  --text-secondary: #ffb380;
  --muted: #ffb380;
  --border: #5a1515;
  --accent: #ff3e3e;
  --accent-hover: color-mix(in srgb, #ff3e3e 88%, #ffffff 12%);
  --accent-active: #d13333;
  --accent-glow: rgba(255,62,62,0.25);
  --on-accent: #ffffff;
  --nav-hover-bg: rgba(255,62,62,0.15);
  --select-hover-bg: rgba(255,62,62,0.15);
}


[data-theme="Eclipse Void"] {
  --surface: #000000;
  --surface-2: #080808;
  --surface-3: #101010;
  --surface-card: #181428;
  --surface-header: #000000;
  --bg: #000000;
  --bg-secondary: #080808;
  --bg-tertiary: #101010;
  --card-bg: #181428;
  --header-bg: #000000;
  --text: #e6e6e6;
  --text-secondary: #aaaaaa;
  --muted: #aaaaaa;
  --border: #2a2050;
  --accent: #5A4FCF;
  --accent-hover: color-mix(in srgb, #5A4FCF 88%, #ffffff 12%);
  --accent-active: #4a41aa;
  --accent-glow: rgba(90,79,207,0.25);
  --on-accent: #ffffff;
  --nav-hover-bg: rgba(90,79,207,0.12);
  --select-hover-bg: rgba(90,79,207,0.12);
}


[data-theme="Quantum Emerald"] {
  --surface: #101010;
  --surface-2: #1b1b1b;
  --surface-3: #222222;
  --surface-card: #1a3020;
  --surface-header: #080808;
  --bg: #101010;
  --bg-secondary: #1b1b1b;
  --bg-tertiary: #222222;
  --card-bg: #1a3020;
  --header-bg: #080808;
  --text: #e0f8ec;
  --text-secondary: #a3e4d7;
  --muted: #a3e4d7;
  --border: #1a4a2a;
  --accent: #2ecc71;
  --accent-hover: color-mix(in srgb, #2ecc71 88%, #ffffff 12%);
  --accent-active: #26a75d;
  --accent-glow: rgba(46,204,113,0.25);
  --on-accent: #ffffff;
  --nav-hover-bg: rgba(46,204,113,0.12);
  --select-hover-bg: rgba(46,204,113,0.12);
}


[data-theme="Noir Rose"] {
  --surface: #222222;
  --surface-2: #2e2e2e;
  --surface-3: #3a3a3a;
  --surface-card: #3a3035;
  --surface-header: #181818;
  --bg: #222222;
  --bg-secondary: #2e2e2e;
  --bg-tertiary: #3a3a3a;
  --card-bg: #3a3035;
  --header-bg: #181818;
  --text: #f2f2f2;
  --text-secondary: #ffe6eb;
  --muted: #ffe6eb;
  --border: #4a3040;
  --accent: #ffb6c1;
  --accent-hover: color-mix(in srgb, #ffb6c1 88%, #ffffff 12%);
  --accent-active: #d1959e;
  --accent-glow: rgba(255,182,193,0.25);
  --on-accent: #0b0f14;
  --nav-hover-bg: rgba(255,182,193,0.12);
  --select-hover-bg: rgba(255,182,193,0.12);
}


[data-theme="Night Ice"] {
  --surface: #080d1a;
  --surface-2: #0b132b;
  --surface-3: #141d38;
  --surface-card: #1a2848;
  --surface-header: #050810;
  --bg: #080d1a;
  --bg-secondary: #0b132b;
  --bg-tertiary: #141d38;
  --card-bg: #1a2848;
  --header-bg: #050810;
  --text: #b0c4de;
  --text-secondary: #dbe9f4;
  --muted: #dbe9f4;
  --border: #2a3a5a;
  --accent: #b0c4de;
  --accent-hover: color-mix(in srgb, #b0c4de 88%, #ffffff 12%);
  --accent-active: #90a1b6;
  --accent-glow: rgba(176,196,222,0.25);
  --on-accent: #ffffff;
  --nav-hover-bg: rgba(176,196,222,0.12);
  --select-hover-bg: rgba(176,196,222,0.12);
}


[data-theme="Inkbyte"] {
  --surface: #000000;
  --surface-2: #080808;
  --surface-3: #101010;
  --surface-card: #1a1a1a;
  --surface-header: #000000;
  --bg: #000000;
  --bg-secondary: #080808;
  --bg-tertiary: #101010;
  --card-bg: #1a1a1a;
  --header-bg: #000000;
  --text: #f8f8f8;
  --text-secondary: #cccccc;
  --muted: #cccccc;
  --border: #303030;
  --accent: #f8f8f8;
  --accent-hover: color-mix(in srgb, #f8f8f8 88%, #ffffff 12%);
  --accent-active: #cbcbcb;
  --accent-glow: rgba(255,255,255,0.15);
  --on-accent: #0b0f14;
  --nav-hover-bg: rgba(255,255,255,0.08);
  --select-hover-bg: rgba(255,255,255,0.08);
}


[data-theme="Metal Pulse"] {
  --surface: #222528;
  --surface-2: #2c2f36;
  --surface-3: #363a40;
  --surface-card: #3a3535;
  --surface-header: #181a1c;
  --bg: #222528;
  --bg-secondary: #2c2f36;
  --bg-tertiary: #363a40;
  --card-bg: #3a3535;
  --header-bg: #181a1c;
  --text: #ff6f61;
  --text-secondary: #ff958b;
  --muted: #ff958b;
  --border: #4a3530;
  --accent: #ff6f61;
  --accent-hover: color-mix(in srgb, #ff6f61 88%, #ffffff 12%);
  --accent-active: #d15b50;
  --accent-glow: rgba(255,111,97,0.25);
  --on-accent: #ffffff;
  --nav-hover-bg: rgba(255,111,97,0.12);
  --select-hover-bg: rgba(255,111,97,0.12);
}


[data-theme="Obsidian Green"] {
  --surface: #080a0c;
  --surface-2: #0b0c10;
  --surface-3: #101318;
  --surface-card: #151a10;
  --surface-header: #050608;
  --bg: #080a0c;
  --bg-secondary: #0b0c10;
  --bg-tertiary: #101318;
  --card-bg: #151a10;
  --header-bg: #050608;
  --text: #c5ff00;
  --text-secondary: #e2ff66;
  --muted: #e2ff66;
  --border: #2a3a10;
  --accent: #c5ff00;
  --accent-hover: color-mix(in srgb, #c5ff00 88%, #ffffff 12%);
  --accent-active: #a2d100;
  --accent-glow: rgba(197,255,0,0.25);
  --on-accent: #0b0f14;
  --nav-hover-bg: rgba(197,255,0,0.12);
  --select-hover-bg: rgba(197,255,0,0.12);
}


[data-theme="light"] {
  --surface: #f8fafc;
  --surface-2: #f0f4f8;
  --surface-3: #e8eef4;
  --surface-card: #ffffff;
  --surface-header: #ffffff;
  --bg: #f8fafc;
  --bg-secondary: #f0f4f8;
  --bg-tertiary: #e8eef4;
  --card-bg: #ffffff;
  --header-bg: #ffffff;
  --text: #0a1929;
  --text-secondary: #3a5070;
  --muted: #3a5070;
  --border: #c8d8e8;
  --accent: #3399ff;
  --accent-hover: color-mix(in srgb, #3399ff 88%, #ffffff 12%);
  --accent-active: #2a7dd1;
  --accent-glow: rgba(51,153,255,0.15);
  --on-accent: #ffffff;
  --nav-hover-bg: rgba(0,51,102,0.08);
  --select-hover-bg: rgba(0,51,102,0.08);
}


[data-theme="Executive Light"] {
  --surface: #f5f7fa;
  --surface-2: #edf0f5;
  --surface-3: #e5e8ef;
  --surface-card: #ffffff;
  --surface-header: #ffffff;
  --bg: #f5f7fa;
  --bg-secondary: #edf0f5;
  --bg-tertiary: #e5e8ef;
  --card-bg: #ffffff;
  --header-bg: #ffffff;
  --text: #0d1117;
  --text-secondary: #4a5560;
  --muted: #4a5560;
  --border: #d0d8e0;
  --accent: #1f6feb;
  --accent-hover: color-mix(in srgb, #1f6feb 88%, #ffffff 12%);
  --accent-active: #195bc1;
  --accent-glow: rgba(31,111,235,0.15);
  --on-accent: #ffffff;
  --nav-hover-bg: rgba(31,111,235,0.08);
  --select-hover-bg: rgba(31,111,235,0.08);
}


[data-theme="Sunset Modern Light"] {
  --surface: #f8f4f0;
  --surface-2: #f0ebe5;
  --surface-3: #e8e0d8;
  --surface-card: #ffffff;
  --surface-header: #fffcfa;
  --bg: #f8f4f0;
  --bg-secondary: #f0ebe5;
  --bg-tertiary: #e8e0d8;
  --card-bg: #ffffff;
  --header-bg: #fffcfa;
  --text: #2a2520;
  --text-secondary: #6a5a48;
  --muted: #6a5a48;
  --border: #d8ccc0;
  --accent: #ff8300;
  --accent-hover: color-mix(in srgb, #ff8300 88%, #ffffff 12%);
  --accent-active: #d16b00;
  --accent-glow: rgba(255,131,0,0.2);
  --on-accent: #ffffff;
  --nav-hover-bg: rgba(255,131,0,0.1);
  --select-hover-bg: rgba(255,131,0,0.1);
}


[data-theme="Ebook Paper"] {
  --surface: #f5efe5;
  --surface-2: #ebe5d8;
  --surface-3: #e0d8c8;
  --surface-card: #fffdf8;
  --surface-header: #faf6ef;
  --bg: #f5efe5;
  --bg-secondary: #ebe5d8;
  --bg-tertiary: #e0d8c8;
  --card-bg: #fffdf8;
  --header-bg: #faf6ef;
  --text: #2e2b23;
  --text-secondary: #655c41;
  --muted: #655c41;
  --border: #d0c4a8;
  --accent: #a46a00;
  --accent-hover: color-mix(in srgb, #a46a00 88%, #ffffff 12%);
  --accent-active: #865700;
  --accent-glow: rgba(164,106,0,0.2);
  --on-accent: #ffffff;
  --nav-hover-bg: rgba(164,106,0,0.1);
  --select-hover-bg: rgba(164,106,0,0.1);
}


[data-theme="Ebook Sepia"] {
  --surface: #ede0c8;
  --surface-2: #e5d8c0;
  --surface-3: #dcceb0;
  --surface-card: #faf5e8;
  --surface-header: #f2e8d5;
  --bg: #ede0c8;
  --bg-secondary: #e5d8c0;
  --bg-tertiary: #dcceb0;
  --card-bg: #faf5e8;
  --header-bg: #f2e8d5;
  --text: #2e2b23;
  --text-secondary: #6b624a;
  --muted: #6b624a;
  --border: #ccc090;
  --accent: #b47e16;
  --accent-hover: color-mix(in srgb, #b47e16 88%, #ffffff 12%);
  --accent-active: #946712;
  --accent-glow: rgba(180,126,22,0.2);
  --on-accent: #ffffff;
  --nav-hover-bg: rgba(180,126,22,0.1);
  --select-hover-bg: rgba(180,126,22,0.1);
}


[data-theme="Sky Blue"] {
  --surface: #f0f8ff;
  --surface-2: #e5f0fa;
  --surface-3: #d8e8f5;
  --surface-card: #ffffff;
  --surface-header: #f8fcff;
  --bg: #f0f8ff;
  --bg-secondary: #e5f0fa;
  --bg-tertiary: #d8e8f5;
  --card-bg: #ffffff;
  --header-bg: #f8fcff;
  --text: #003060;
  --text-secondary: #2060a0;
  --muted: #2060a0;
  --border: #b0d0f0;
  --accent: #3399ff;
  --accent-hover: color-mix(in srgb, #3399ff 88%, #ffffff 12%);
  --accent-active: #2a7dd1;
  --accent-glow: rgba(51,153,255,0.2);
  --on-accent: #ffffff;
  --nav-hover-bg: rgba(51,153,255,0.1);
  --select-hover-bg: rgba(51,153,255,0.1);
}


[data-theme="Mint Cloud"] {
  --surface: #f0faf6;
  --surface-2: #e5f5f0;
  --surface-3: #d8f0e8;
  --surface-card: #ffffff;
  --surface-header: #f8fffc;
  --bg: #f0faf6;
  --bg-secondary: #e5f5f0;
  --bg-tertiary: #d8f0e8;
  --card-bg: #ffffff;
  --header-bg: #f8fffc;
  --text: #004038;
  --text-secondary: #306858;
  --muted: #306858;
  --border: #a8e0d0;
  --accent: #44d7b6;
  --accent-hover: color-mix(in srgb, #44d7b6 88%, #ffffff 12%);
  --accent-active: #38b095;
  --accent-glow: rgba(68,215,182,0.2);
  --on-accent: #ffffff;
  --nav-hover-bg: rgba(68,215,182,0.1);
  --select-hover-bg: rgba(68,215,182,0.1);
}


[data-theme="Coral Reef"] {
  --surface: #f8f5e8;
  --surface-2: #f0ede0;
  --surface-3: #e8e5d5;
  --surface-card: #ffffff;
  --surface-header: #fffcf5;
  --bg: #f8f5e8;
  --bg-secondary: #f0ede0;
  --bg-tertiary: #e8e5d5;
  --card-bg: #ffffff;
  --header-bg: #fffcf5;
  --text: #205048;
  --text-secondary: #d04030;
  --muted: #d04030;
  --border: #d0c8b0;
  --accent: #ff6f61;
  --accent-hover: color-mix(in srgb, #ff6f61 88%, #ffffff 12%);
  --accent-active: #d15b50;
  --accent-glow: rgba(255,111,97,0.2);
  --on-accent: #ffffff;
  --nav-hover-bg: rgba(255,111,97,0.12);
  --select-hover-bg: rgba(255,111,97,0.12);
}


[data-theme="Arctic Ice"] {
  --surface: #f4f8fc;
  --surface-2: #eaf0f6;
  --surface-3: #dce6f0;
  --surface-card: #ffffff;
  --surface-header: #fafcff;
  --bg: #f4f8fc;
  --bg-secondary: #eaf0f6;
  --bg-tertiary: #dce6f0;
  --card-bg: #ffffff;
  --header-bg: #fafcff;
  --text: #1a2838;
  --text-secondary: #4a5a70;
  --muted: #4a5a70;
  --border: #c0d0e0;
  --accent: #3b82f6;
  --accent-hover: color-mix(in srgb, #3b82f6 88%, #ffffff 12%);
  --accent-active: #306bca;
  --accent-glow: rgba(59,130,246,0.2);
  --on-accent: #ffffff;
  --nav-hover-bg: rgba(59,130,246,0.12);
  --select-hover-bg: rgba(59,130,246,0.12);
}


[data-theme="Lavender Haze"] {
  --surface: #f8f4fc;
  --surface-2: #f0eaf8;
  --surface-3: #e8e0f2;
  --surface-card: #ffffff;
  --surface-header: #fdfaff;
  --bg: #f8f4fc;
  --bg-secondary: #f0eaf8;
  --bg-tertiary: #e8e0f2;
  --card-bg: #ffffff;
  --header-bg: #fdfaff;
  --text: #3a2848;
  --text-secondary: #6a5080;
  --muted: #6a5080;
  --border: #d0c0e0;
  --accent: #b388eb;
  --accent-hover: color-mix(in srgb, #b388eb 88%, #ffffff 12%);
  --accent-active: #9370c1;
  --accent-glow: rgba(179,136,235,0.2);
  --on-accent: #ffffff;
  --nav-hover-bg: rgba(179,136,235,0.1);
  --select-hover-bg: rgba(179,136,235,0.1);
}


[data-theme="Tundra Teal"] {
  --surface: #f4fafa;
  --surface-2: #eaf5f5;
  --surface-3: #ddf0f0;
  --surface-card: #ffffff;
  --surface-header: #faffff;
  --bg: #f4fafa;
  --bg-secondary: #eaf5f5;
  --bg-tertiary: #ddf0f0;
  --card-bg: #ffffff;
  --header-bg: #faffff;
  --text: #003040;
  --text-secondary: #006070;
  --muted: #006070;
  --border: #a0d8d8;
  --accent: #00bfa6;
  --accent-hover: color-mix(in srgb, #00bfa6 88%, #ffffff 12%);
  --accent-active: #009d88;
  --accent-glow: rgba(0,191,166,0.2);
  --on-accent: #ffffff;
  --nav-hover-bg: rgba(0,191,166,0.1);
  --select-hover-bg: rgba(0,191,166,0.1);
}


[data-theme="Ice Terminal"] {
  --surface: #f4f8fc;
  --surface-2: #eaf0f8;
  --surface-3: #dce8f2;
  --surface-card: #ffffff;
  --surface-header: #fafcff;
  --bg: #f4f8fc;
  --bg-secondary: #eaf0f8;
  --bg-tertiary: #dce8f2;
  --card-bg: #ffffff;
  --header-bg: #fafcff;
  --text: #303030;
  --text-secondary: #505050;
  --muted: #505050;
  --border: #b8d0e0;
  --accent: #60c8f0;
  --accent-hover: color-mix(in srgb, #60c8f0 88%, #ffffff 12%);
  --accent-active: #4fa4c5;
  --accent-glow: rgba(96,200,240,0.2);
  --on-accent: #ffffff;
  --nav-hover-bg: rgba(96,200,240,0.12);
  --select-hover-bg: rgba(96,200,240,0.12);
}


[data-theme="Arctic Breeze"] {
  --surface: #f2f6fa;
  --surface-2: #e8eef4;
  --surface-3: #dce4ec;
  --surface-card: #ffffff;
  --surface-header: #f8fafc;
  --bg: #f2f6fa;
  --bg-secondary: #e8eef4;
  --bg-tertiary: #dce4ec;
  --card-bg: #ffffff;
  --header-bg: #f8fafc;
  --text: #182838;
  --text-secondary: #4a6080;
  --muted: #4a6080;
  --border: #c0d0e0;
  --accent: #90c8e8;
  --accent-hover: color-mix(in srgb, #90c8e8 88%, #ffffff 12%);
  --accent-active: #76a4be;
  --accent-glow: rgba(144,200,232,0.2);
  --on-accent: #ffffff;
  --nav-hover-bg: rgba(144,200,232,0.12);
  --select-hover-bg: rgba(144,200,232,0.12);
}


[data-theme="Arctic Snow"] {
  --surface: #fafafa;
  --surface-2: #f2f2f2;
  --surface-3: #e8e8e8;
  --surface-card: #ffffff;
  --surface-header: #ffffff;
  --bg: #fafafa;
  --bg-secondary: #f2f2f2;
  --bg-tertiary: #e8e8e8;
  --card-bg: #ffffff;
  --header-bg: #ffffff;
  --text: #181818;
  --text-secondary: #505050;
  --muted: #505050;
  --border: #d0d0d0;
  --accent: #60c0f8;
  --accent-hover: color-mix(in srgb, #60c0f8 88%, #ffffff 12%);
  --accent-active: #4f9dcb;
  --accent-glow: rgba(96,192,248,0.2);
  --on-accent: #ffffff;
  --nav-hover-bg: rgba(96,192,248,0.1);
  --select-hover-bg: rgba(96,192,248,0.1);
}


[data-theme="Sandstone Glow"] {
  --surface: #f8f2e5;
  --surface-2: #f0eadc;
  --surface-3: #e8e0d0;
  --surface-card: #fffdf8;
  --surface-header: #fcf8f0;
  --bg: #f8f2e5;
  --bg-secondary: #f0eadc;
  --bg-tertiary: #e8e0d0;
  --card-bg: #fffdf8;
  --header-bg: #fcf8f0;
  --text: #3a3020;
  --text-secondary: #685840;
  --muted: #685840;
  --border: #d0c0a0;
  --accent: #e08000;
  --accent-hover: color-mix(in srgb, #e08000 88%, #ffffff 12%);
  --accent-active: #b86900;
  --accent-glow: rgba(224,128,0,0.2);
  --on-accent: #ffffff;
  --nav-hover-bg: rgba(224,128,0,0.1);
  --select-hover-bg: rgba(224,128,0,0.1);
}


[data-theme="Sunrise Shell"] {
  --surface: #fff8f0;
  --surface-2: #f8f0e5;
  --surface-3: #f0e8dc;
  --surface-card: #ffffff;
  --surface-header: #fffcfa;
  --bg: #fff8f0;
  --bg-secondary: #f8f0e5;
  --bg-tertiary: #f0e8dc;
  --card-bg: #ffffff;
  --header-bg: #fffcfa;
  --text: #603820;
  --text-secondary: #a06040;
  --muted: #a06040;
  --border: #e0c8b0;
  --accent: #f09030;
  --accent-hover: color-mix(in srgb, #f09030 88%, #ffffff 12%);
  --accent-active: #c57627;
  --accent-glow: rgba(240,144,48,0.2);
  --on-accent: #ffffff;
  --nav-hover-bg: rgba(240,144,48,0.1);
  --select-hover-bg: rgba(240,144,48,0.1);
}


[data-theme="Pearl Mist"] {
  --surface: #fafafa;
  --surface-2: #f4f4f4;
  --surface-3: #ececec;
  --surface-card: #ffffff;
  --surface-header: #fefefe;
  --bg: #fafafa;
  --bg-secondary: #f4f4f4;
  --bg-tertiary: #ececec;
  --card-bg: #ffffff;
  --header-bg: #fefefe;
  --text: #404040;
  --text-secondary: #686868;
  --muted: #686868;
  --border: #d0d4d8;
  --accent: #98a8b0;
  --accent-hover: color-mix(in srgb, #98a8b0 88%, #ffffff 12%);
  --accent-active: #7d8a90;
  --accent-glow: rgba(152,168,176,0.2);
  --on-accent: #ffffff;
  --nav-hover-bg: rgba(152,168,176,0.1);
  --select-hover-bg: rgba(152,168,176,0.1);
}


[data-theme="Mango Cream"] {
  --surface: #fff8f0;
  --surface-2: #fff0e0;
  --surface-3: #f8e8d5;
  --surface-card: #ffffff;
  --surface-header: #fffcf8;
  --bg: #fff8f0;
  --bg-secondary: #fff0e0;
  --bg-tertiary: #f8e8d5;
  --card-bg: #ffffff;
  --header-bg: #fffcf8;
  --text: #5a3010;
  --text-secondary: #905020;
  --muted: #905020;
  --border: #e0c8a0;
  --accent: #f09020;
  --accent-hover: color-mix(in srgb, #f09020 88%, #ffffff 12%);
  --accent-active: #c5761a;
  --accent-glow: rgba(240,144,32,0.25);
  --on-accent: #ffffff;
  --nav-hover-bg: rgba(240,144,32,0.12);
  --select-hover-bg: rgba(240,144,32,0.12);
}


[data-theme="Mint Snow"] {
  --surface: #f4fcf8;
  --surface-2: #e8f8f0;
  --surface-3: #dcf0e8;
  --surface-card: #ffffff;
  --surface-header: #fafffc;
  --bg: #f4fcf8;
  --bg-secondary: #e8f8f0;
  --bg-tertiary: #dcf0e8;
  --card-bg: #ffffff;
  --header-bg: #fafffc;
  --text: #183028;
  --text-secondary: #3a6050;
  --muted: #3a6050;
  --border: #a8d8c0;
  --accent: #30c080;
  --accent-hover: color-mix(in srgb, #30c080 88%, #ffffff 12%);
  --accent-active: #279d69;
  --accent-glow: rgba(48,192,128,0.2);
  --on-accent: #ffffff;
  --nav-hover-bg: rgba(48,192,128,0.12);
  --select-hover-bg: rgba(48,192,128,0.12);
}

/* ========================================
   ADMIN PANEL CSS - Missing Classes Fix
   ======================================== */

/* Badge variants */
.badge-blackberry { background: color-mix(in srgb, #9333ea 20%, var(--surface)); color: #a855f7; border: 1px solid #9333ea; font-weight: 600; }
.badge-blue { background: color-mix(in srgb, var(--info) 15%, var(--surface)); color: var(--info); border: 1px solid color-mix(in srgb, var(--info) 35%, transparent); }
.badge-cyan { background: color-mix(in srgb, #06b6d4 15%, var(--surface)); color: #06b6d4; border: 1px solid color-mix(in srgb, #06b6d4 35%, transparent); }
.badge-primary { background: color-mix(in srgb, var(--accent) 20%, var(--surface)); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent); font-weight: 600; }
.badge-secondary { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }
.badge-secure { background: color-mix(in srgb, var(--warning) 18%, var(--surface)); color: var(--warning); border: 1px solid color-mix(in srgb, var(--warning) 50%, transparent); font-weight: 600; }
.badge-standard { background: color-mix(in srgb, var(--info) 15%, var(--surface)); color: var(--info); border: 1px solid color-mix(in srgb, var(--info) 40%, transparent); font-weight: 600; }

/* Button variants */
.btn-blue { background: var(--info); color: var(--on-info); border-color: color-mix(in srgb, var(--info) 70%, var(--border) 30%); }
.btn-blue:hover { background: var(--info-strong); }
.btn-cyan { background: #06b6d4; color: #fff; border-color: #0891b2; }
.btn-cyan:hover { background: #0891b2; }
.btn-icon { padding: 8px; min-width: auto; }
.btn-info { background: var(--info); color: var(--on-info); border-color: color-mix(in srgb, var(--info) 70%, var(--border) 30%); }
.btn-info:hover { background: var(--info-strong); }
.btn-lg { padding: 12px 24px; font-size: 15px; }
.btn-sm { padding: 6px 12px; font-size: 12px; }

/* Modal */
.modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.8); z-index: 1000; align-items: center; justify-content: center; }
.modal.open, .modal.active { display: flex; }
.modal-content { background: var(--surface-card); border: 1px solid var(--border); border-radius: 12px; padding: 24px; max-width: 500px; width: 90%; max-height: 90vh; overflow-y: auto; }
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.modal-title { font-size: 18px; font-weight: 600; color: var(--text); }
.modal-close { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 24px; padding: 4px; }
.modal-close:hover { color: var(--text); }

/* Form controls */
.form-control { width: 100%; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 14px; }
.form-control:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.form-label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 500; color: var(--text); }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 16px; }
.form-actions { display: flex; gap: 12px; margin-top: 20px; justify-content: flex-end; }
.control-panel { background: var(--surface-card); border: 1px solid var(--border); border-radius: 12px; padding: 20px; }
.control-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border); }
.control-item:last-child { border-bottom: none; }
.control-label { font-weight: 500; color: var(--text); }
.control-desc { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* Grid layouts */
.card-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .card-grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .card-grid-3 { grid-template-columns: 1fr; } }
.service-card { background: var(--surface-card); border: 1px solid var(--border); border-radius: 10px; padding: 16px; }
.service-grid-q { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.quantum-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.quantum-node { background: var(--surface-card); border: 1px solid var(--border); border-radius: 12px; padding: 20px; }
@media (max-width: 900px) { .quantum-grid, .service-grid-q { grid-template-columns: 1fr; } }

/* Profile & IP cards */
.profile-list { display: flex; flex-direction: column; gap: 8px; }
.profile-item { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--surface-2); border-radius: 8px; }
.profile-checkbox { width: 18px; height: 18px; accent-color: var(--accent); }
.ip-card { background: var(--surface-card); border: 1px solid var(--border); border-radius: 10px; padding: 16px; }
.ip-address { font-family: var(--font-mono); font-size: 13px; background: var(--surface-2); padding: 4px 8px; border-radius: 4px; }
.register-url { font-family: var(--font-mono); font-size: 12px; background: var(--surface-2); padding: 8px 12px; border-radius: 6px; word-break: break-all; }

/* Category & blocklist */
.category-section { margin-bottom: 24px; }
.category-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.category-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: var(--surface-2); border-radius: 6px; font-size: 12px; }
.domains { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.domains-count { font-weight: 600; color: var(--text); }
.sources-table { width: 100%; }
.source-name { font-weight: 500; color: var(--text); }
.source-url { font-family: var(--font-mono); font-size: 11px; color: var(--muted); word-break: break-all; }
.add-source-form { display: flex; gap: 12px; margin-top: 16px; }

/* Header & layout */
.dashboard-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; flex-wrap: wrap; gap: 16px; }
.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.quick-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.stat-icon { font-size: 28px; margin-bottom: 8px; }

/* Tables & info */
.activity-table { width: 100%; }
.activity-table th, .activity-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border); }
.info-box { background: color-mix(in srgb, var(--info) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--info) 30%, transparent); border-radius: 8px; padding: 12px 16px; }
.protocol-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.protocol-card { background: var(--surface-card); border: 1px solid var(--border); border-radius: 10px; padding: 16px; border-left: 4px solid var(--accent); }
@media (max-width: 900px) { .protocol-grid { grid-template-columns: 1fr; } }

/* Admin user menu - CRITICAL for SVG sizing */
.admin-user-menu { position: relative; }
.admin-user-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; color: var(--text); font-family: inherit; font-size: 13px; }
.admin-user-toggle svg { width: 20px; height: 20px; flex-shrink: 0; }
.admin-user-toggle:hover { background: var(--surface-3); border-color: var(--accent); }
.admin-user-dropdown { display: none; position: absolute; right: 0; top: 100%; margin-top: 6px; min-width: 240px; background: var(--surface-card); border: 1px solid var(--border); border-radius: 8px; padding: 8px; box-shadow: 0 10px 40px rgba(0,0,0,0.3); z-index: 9999; }
.admin-user-menu.open .admin-user-dropdown { display: block !important; }
.admin-menu-header { padding: 12px; border-bottom: 1px solid var(--border); margin-bottom: 8px; }
.admin-menu-email { font-weight: 600; color: var(--text); font-size: 13px; }
.admin-menu-role { font-size: 11px; color: var(--muted); margin-top: 2px; }
.admin-menu-section { padding: 4px 0; }
.admin-menu-title { font-size: 10px; text-transform: uppercase; color: var(--muted); padding: 8px 12px 4px; font-weight: 600; }
.admin-menu-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 6px; color: var(--text); font-size: 13px; transition: background var(--trans); text-decoration: none; }
.admin-menu-item:hover { background: var(--surface-2); color: var(--accent); }
.admin-menu-item svg { width: 16px; height: 16px; flex-shrink: 0; }
.admin-menu-item.danger { color: var(--danger); }
.admin-menu-item.danger:hover { background: color-mix(in srgb, var(--danger) 12%, var(--surface)); }
.admin-menu-langs { display: flex; gap: 6px; padding: 4px 12px; }
.admin-lang-option { font-size: 18px; padding: 6px 8px; border-radius: 6px; background: var(--surface-2); transition: background var(--trans); text-decoration: none; }
.admin-lang-option:hover, .admin-lang-option.active { background: var(--accent); }
.admin-theme-btn { padding: 6px 10px; font-size: 11px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; color: var(--text); cursor: pointer; transition: all var(--trans); }
.admin-theme-btn:hover { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.user-label { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chevron { font-size: 10px; color: var(--muted); transition: transform var(--trans); }
.admin-user-menu.open .chevron { transform: rotate(180deg); }
.admin-theme-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; padding: 4px 12px 8px; max-height: 180px; overflow-y: auto; }
.admin-theme-btn.active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
@media (max-width: 600px) { .admin-theme-grid { grid-template-columns: repeat(4, 1fr); gap: 4px; max-height: 150px; } }

/* Mobile menu styles */
.mobile-lang-row { display: flex; gap: 8px; padding: 10px 16px; flex-wrap: wrap; }
.mobile-lang-btn { font-size: 20px; padding: 8px 10px; border-radius: 8px; background: var(--surface-2); text-decoration: none; transition: background var(--trans); }
.mobile-lang-btn:hover, .mobile-lang-btn.active { background: var(--accent); }
.mobile-link-user { color: var(--accent) !important; }
.mobile-link-logout { color: var(--danger) !important; }

/* Alert variant */
.alert-error { background: color-mix(in srgb, var(--danger) 12%, var(--surface)); border-color: color-mix(in srgb, var(--danger) 35%, transparent); color: var(--danger-strong); }

/* Status grid for dashboard */
.status-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
@media (max-width: 1100px) { .status-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .status-grid { grid-template-columns: 1fr; gap: 10px; } }
.status-card { background: var(--surface-card); border: none; border-radius: 10px; padding: 14px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.status-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.status-card-title { font-weight: 600; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }
.service-row { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; font-size: 12px; }
.service-row .service-name { color: var(--muted); display: flex; align-items: center; gap: 5px; font-size: 11px; }
.service-row .service-status { color: var(--text); font-weight: 500; font-family: var(--font-mono); font-size: 11px; }
@media (max-width: 480px) {
  .status-card { padding: 12px; }
  .status-card-title { font-size: 10px; }
  .service-row { font-size: 11px; padding: 3px 0; }
  .service-row .service-name { font-size: 10px; gap: 4px; }
  .service-row .service-status { font-size: 10px; }
}

/* Backend info for non-public nodes */
.backend-info { padding: 10px 12px; background: var(--surface-2); }
.backend-info p { color: var(--muted); font-size: 11px; margin: 4px 0 0; }
.vpn-status { display: flex; align-items: center; gap: 6px; font-weight: 500; color: var(--text); font-size: 12px; }

/* Infra banner - minimal */
.infra-banner.online, .infra-banner.degraded, .infra-banner.offline { border-left: 3px solid var(--success); }
.infra-banner.degraded { border-left-color: var(--warning); }
.infra-banner.offline { border-left-color: var(--danger); }

/* =============================================
   USER PANEL - DASHBOARD STYLES (COMPACT)
   ============================================= */

/* Dashboard header */
.dashboard-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; gap: 12px; flex-wrap: wrap; }
.welcome-text { font-size: 13px; color: var(--muted); }
.welcome-text strong { color: var(--text); }

/* Stats grid - COMPACT */
.user-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 20px; }
.user-stat-card { background: var(--surface-card); border-radius: 10px; padding: 14px; position: relative; overflow: hidden; }
.user-stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--accent); }
.user-stat-card.success::before { background: var(--success); }
.user-stat-card.warning::before { background: var(--warning); }
.user-stat-card.danger::before { background: var(--danger); }
.user-stat-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; background: color-mix(in srgb, var(--accent) 12%, transparent); }
.user-stat-icon svg { width: 16px; height: 16px; color: var(--accent); }
.user-stat-card.success .user-stat-icon { background: color-mix(in srgb, var(--success) 12%, transparent); }
.user-stat-card.success .user-stat-icon svg { color: var(--success); }
.user-stat-card.warning .user-stat-icon { background: color-mix(in srgb, var(--warning) 12%, transparent); }
.user-stat-card.warning .user-stat-icon svg { color: var(--warning); }
.user-stat-card.danger .user-stat-icon { background: color-mix(in srgb, var(--danger) 12%, transparent); }
.user-stat-card.danger .user-stat-icon svg { color: var(--danger); }
.user-stat-value { font-size: 24px; font-weight: 700; color: var(--text); line-height: 1; }
.user-stat-label { font-size: 11px; color: var(--muted); margin-top: 4px; }
@media (max-width: 900px) { .user-stats-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .user-stats-grid { gap: 8px; } .user-stat-card { padding: 12px; } .user-stat-value { font-size: 20px; } .user-stat-icon { width: 28px; height: 28px; } .user-stat-icon svg { width: 14px; height: 14px; } }

/* Quick actions - COMPACT */
.user-quick-actions { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-bottom: 20px; }
.user-quick-action { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px; background: var(--surface-card); border: 1px solid var(--border); border-radius: 10px; text-decoration: none; color: var(--text); transition: all 0.2s; }
.user-quick-action:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.user-quick-action-icon { width: 32px; height: 32px; border-radius: 8px; background: color-mix(in srgb, var(--accent) 12%, transparent); display: flex; align-items: center; justify-content: center; }
.user-quick-action-icon svg { width: 16px; height: 16px; color: var(--accent); }
.user-quick-action-label { font-size: 11px; font-weight: 500; text-align: center; }
@media (max-width: 768px) { .user-quick-actions { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .user-quick-actions { grid-template-columns: repeat(2, 1fr); gap: 6px; } .user-quick-action { padding: 12px 6px; } .user-quick-action-icon { width: 28px; height: 28px; } .user-quick-action-icon svg { width: 14px; height: 14px; } .user-quick-action-label { font-size: 10px; } }

/* Profiles page layout */
.profiles-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.profiles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }

/* Profile cards - COMPACT */
.profile-card { background: var(--surface-card); border-radius: 10px; padding: 16px; }
.profile-card-header, .profile-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; gap: 10px; }
.profile-info h3, .profile-name { margin: 0; font-size: 15px; font-weight: 600; color: var(--text); }
.profile-mode { font-size: 10px; font-weight: 600; padding: 4px 8px; border-radius: 4px; text-transform: uppercase; background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); }
.profile-code-box { background: var(--surface-2); padding: 10px 12px; border-radius: 8px; margin-bottom: 12px; text-align: center; }
.profile-code { font-family: var(--font-mono); font-size: 13px; color: var(--accent); font-weight: 600; }
.profile-status { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--success); }
.profile-status::before { content: ''; width: 6px; height: 6px; background: var(--success); border-radius: 50%; }

/* Profile endpoints */
.profile-endpoints { margin-bottom: 12px; }
.profile-endpoints .endpoint-item { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 11px; }
.profile-endpoints .endpoint-item:last-child { border-bottom: none; }
.profile-endpoints .endpoint-type { font-weight: 600; color: var(--accent); min-width: 32px; }
.profile-endpoints code { font-family: var(--font-mono); font-size: 10px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Endpoints - COMPACT inline */
.endpoints-row { display: flex; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.endpoint-item { flex: 1; min-width: 280px; background: var(--surface-2); border-radius: 8px; padding: 10px 12px; }
.endpoint-label { font-size: 10px; font-weight: 600; color: var(--muted); text-transform: uppercase; margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
.endpoint-label svg { width: 12px; height: 12px; }
.endpoint-url { font-family: var(--font-mono); font-size: 11px; color: var(--text); display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.endpoint-url code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.copy-btn { background: none; border: none; color: var(--muted); cursor: pointer; padding: 4px; border-radius: 4px; transition: all 0.2s; flex-shrink: 0; }
.copy-btn:hover { background: var(--surface-3); color: var(--accent); }
.copy-btn.copied { color: var(--success); }

/* Feature badges - COMPACT */
.profile-features { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.feature-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 12px; font-size: 10px; font-weight: 500; }
.feature-badge.enabled { background: color-mix(in srgb, var(--success) 12%, transparent); color: var(--success); }
.feature-badge.disabled { background: var(--surface-2); color: var(--muted); }

/* Profile actions - COMPACT */
.profile-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.profile-actions .btn { padding: 6px 12px; font-size: 11px; }

/* Section title - COMPACT */
.user-section-title { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; margin-bottom: 12px; color: var(--text); }
.user-section-title svg { width: 16px; height: 16px; color: var(--accent); }

/* Two column layout */
.user-two-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 900px) { .user-two-cols { grid-template-columns: 1fr; } }

/* DNS nodes status - COMPACT */
.dns-status { display: flex; flex-direction: column; }
.dns-node { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border); }
.dns-node:last-child { border-bottom: none; }
.dns-node-info { display: flex; align-items: center; gap: 10px; }
.dns-node-icon { width: 32px; height: 32px; border-radius: 8px; background: color-mix(in srgb, var(--success) 12%, transparent); display: flex; align-items: center; justify-content: center; }
.dns-node-icon svg { width: 16px; height: 16px; color: var(--success); }
.dns-node-icon.offline { background: color-mix(in srgb, var(--danger) 12%, transparent); }
.dns-node-icon.offline svg { color: var(--danger); }
.dns-node-name { font-weight: 500; font-size: 13px; }
.dns-node-ip { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.dns-node-status { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--success); }
.dns-node-status::before { content: ''; width: 6px; height: 6px; background: currentColor; border-radius: 50%; animation: pulse 2s infinite; }
.dns-node-status.offline { color: var(--danger); }

/* Activity list - COMPACT */
.activity-list { display: flex; flex-direction: column; }
.activity-item { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.activity-item:last-child { border-bottom: none; }
.activity-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.activity-icon.login { background: color-mix(in srgb, var(--success) 12%, transparent); color: var(--success); }
.activity-icon.security { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.activity-icon.settings { background: color-mix(in srgb, var(--warning) 12%, transparent); color: var(--warning); }
.activity-icon svg { width: 16px; height: 16px; }
.activity-content { flex: 1; min-width: 0; }
.activity-title { font-size: 13px; font-weight: 500; color: var(--text); }
.activity-time { font-size: 11px; color: var(--muted); }

/* Empty state */
.empty-state-inline { text-align: center; padding: 24px; color: var(--muted); }

/* User panel card - COMPACT override */
.user-card { background: var(--surface-card); border-radius: 10px; padding: 16px; margin-bottom: 12px; }

/* =============================================
   USER PANEL - SETUP PAGE STYLES (COMPACT)
   ============================================= */

/* Setup tabs */
.setup-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; background: var(--surface-2); padding: 6px; border-radius: 10px; }
.setup-tab { padding: 8px 14px; border-radius: 6px; font-size: 12px; font-weight: 500; color: var(--muted); text-decoration: none; transition: all 0.2s; white-space: nowrap; }
.setup-tab:hover { background: var(--surface-3); color: var(--text); }
.setup-tab.active { background: var(--accent); color: var(--on-accent); }
@media (max-width: 600px) { .setup-tab { padding: 6px 10px; font-size: 11px; } }

/* Endpoint cards - COMPACT */
.endpoint-card { background: var(--surface-2); border-radius: 10px; padding: 14px; margin-bottom: 10px; }
.endpoint-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; flex-wrap: wrap; gap: 8px; }
.endpoint-label { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; color: var(--text); }
.endpoint-label svg { width: 18px; height: 18px; color: var(--accent); }
.endpoint-badge { padding: 3px 8px; border-radius: 4px; font-size: 10px; font-weight: 600; text-transform: uppercase; }
.endpoint-badge.recommended { background: color-mix(in srgb, var(--success) 15%, transparent); color: var(--success); }
.endpoint-badge.encrypted { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); }
.setup-endpoint-url { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--surface); padding: 10px 12px; border-radius: 6px; font-family: var(--font-mono); font-size: 12px; color: var(--text); }
.setup-endpoint-url span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.endpoint-note { margin-top: 6px; font-size: 11px; color: var(--muted); }

/* DNS servers grid */
.dns-servers-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 10px; }
.dns-server-item { background: var(--surface); padding: 10px 12px; border-radius: 6px; }
.dns-server-label { font-size: 10px; color: var(--muted); margin-bottom: 4px; }
.dns-server-value { font-family: var(--font-mono); font-size: 11px; color: var(--text); }
@media (max-width: 500px) { .dns-servers-grid { grid-template-columns: 1fr; } }

/* Config steps - COMPACT */
.config-steps { display: flex; flex-direction: column; gap: 12px; }
.config-step { display: flex; gap: 12px; align-items: flex-start; }
.step-number { width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 12px; flex-shrink: 0; }
.step-content { flex: 1; }
.step-content h4 { margin: 0 0 4px 0; font-size: 13px; font-weight: 600; color: var(--text); }
.step-content p { margin: 0; font-size: 12px; color: var(--muted); }
.step-content ul { margin: 6px 0; padding-left: 16px; font-size: 12px; color: var(--muted); }
.step-content ul li { margin: 4px 0; }

/* Config section */
.config-section { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
.config-title { font-weight: 600; font-size: 14px; color: var(--text); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }

/* Code blocks - COMPACT */
.setup-code-block { position: relative; background: var(--surface-2); border-radius: 8px; padding: 12px; margin-top: 8px; }
.setup-code-block pre { margin: 0; font-family: var(--font-mono); font-size: 11px; color: var(--text); white-space: pre-wrap; word-break: break-all; line-height: 1.5; }
.setup-code-block .copy-btn { position: absolute; top: 8px; right: 8px; }

/* Download buttons */
.download-buttons { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.download-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; background: var(--accent); color: var(--on-accent); border-radius: 6px; font-size: 12px; font-weight: 500; text-decoration: none; transition: all 0.2s; }
.download-btn:hover { opacity: 0.9; transform: translateY(-1px); }
.download-btn.secondary { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); }
.download-btn svg { width: 14px; height: 14px; }

/* Linux tool selector */
.linux-tool-selector { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.linux-tool-btn { padding: 6px 12px; border-radius: 6px; font-size: 11px; font-weight: 500; background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); cursor: pointer; transition: all 0.2s; }
.linux-tool-btn:hover { background: var(--surface-3); color: var(--text); }
.linux-tool-btn.active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.linux-config { display: none; }
.linux-config.active { display: block; }

/* Platform grid */
.platform-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 20px; }
.platform-card { background: var(--surface-2); border-radius: 10px; padding: 14px; text-align: center; transition: all 0.2s; }
.platform-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.platform-icon { font-size: 28px; margin-bottom: 8px; }
.platform-name { font-weight: 600; font-size: 13px; color: var(--text); margin-bottom: 4px; }
.platform-desc { font-size: 11px; color: var(--muted); }

/* Linked IP section */
.linked-ip-section { margin-top: 16px; }
.linked-ip-current { display: flex; justify-content: space-between; align-items: center; background: var(--surface-2); padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; flex-wrap: wrap; gap: 10px; }
.linked-ip-address { font-family: var(--font-mono); font-weight: 600; font-size: 14px; color: var(--text); }
.linked-ip-list { margin-top: 16px; }
.linked-ip-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); }
.linked-ip-item:last-child { border-bottom: none; }

/* Architecture diagram - COMPACT */
.arch-diagram { background: var(--surface-2); border-radius: 10px; padding: 16px; margin-bottom: 16px; overflow-x: auto; }
.arch-flow { display: flex; align-items: center; justify-content: space-between; min-width: 600px; gap: 12px; }
.arch-step { text-align: center; flex: 1; }
.arch-step-icon { width: 48px; height: 48px; margin: 0 auto 8px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.arch-step-icon svg { width: 24px; height: 24px; color: white; }
.arch-step-icon.blue { background: linear-gradient(135deg, var(--info), #1e40af); }
.arch-step-icon.purple { background: linear-gradient(135deg, var(--accent), #7c3aed); }
.arch-step-icon.warning { background: linear-gradient(135deg, var(--warning), #d97706); }
.arch-step-icon.cyan { background: linear-gradient(135deg, #06b6d4, #0891b2); }
.arch-step-name { font-weight: 600; font-size: 12px; color: var(--text); margin-bottom: 2px; }
.arch-step-desc { font-size: 10px; color: var(--muted); }
.arch-arrow { flex: 0.4; display: flex; flex-direction: column; align-items: center; }
.arch-arrow-label { font-size: 9px; font-weight: 600; margin-bottom: 2px; }
.arch-arrow-line { color: var(--muted); }
.arch-arrow-note { font-size: 8px; color: var(--muted); }

/* Privacy matrix cards */
.privacy-matrix { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 16px; }
.privacy-card { background: var(--surface-2); border-radius: 10px; padding: 12px; border-left: 3px solid var(--accent); }
.privacy-card.purple { border-left-color: var(--accent); }
.privacy-card.warning { border-left-color: var(--warning); }
.privacy-card.cyan { border-left-color: #06b6d4; }
.privacy-card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.privacy-card-icon { width: 24px; height: 24px; border-radius: 6px; display: flex; align-items: center; justify-content: center; }
.privacy-card-icon svg { width: 12px; height: 12px; }
.privacy-card-name { font-weight: 600; font-size: 12px; color: var(--text); }
.privacy-card-row { display: flex; justify-content: space-between; padding: 3px 0; font-size: 11px; }
.privacy-card-row span:first-child { color: var(--muted); }

/* Protocol identification grid */
.protocol-id-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.protocol-id-item { background: var(--surface); padding: 10px; border-radius: 6px; text-align: center; }
.protocol-id-name { font-weight: 600; font-size: 12px; margin-bottom: 2px; }
.protocol-id-method { font-size: 10px; color: var(--muted); }
.protocol-id-code { font-family: var(--font-mono); font-size: 9px; color: var(--muted); margin-top: 4px; }

/* Privacy result banner */
.privacy-result { display: flex; align-items: center; gap: 12px; padding: 14px; background: linear-gradient(135deg, color-mix(in srgb, var(--success) 12%, transparent), color-mix(in srgb, #06b6d4 12%, transparent)); border: 1px solid color-mix(in srgb, var(--success) 30%, transparent); border-radius: 10px; margin-top: 16px; }
.privacy-result-icon { width: 36px; height: 36px; background: linear-gradient(135deg, var(--success), #06b6d4); border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.privacy-result-icon svg { width: 18px; height: 18px; color: white; }
.privacy-result-title { font-weight: 600; font-size: 13px; color: var(--success); margin-bottom: 2px; }
.privacy-result-desc { font-size: 12px; color: var(--muted); }

/* Info boxes */
.info-box { padding: 14px; border-radius: 8px; margin-top: 16px; }
.info-box.purple { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.info-box.warning { background: color-mix(in srgb, var(--warning) 12%, transparent); }
.info-box.success { background: color-mix(in srgb, var(--success) 12%, transparent); }
.info-box strong { display: block; margin-bottom: 6px; }
.info-box.purple strong { color: var(--accent); }
.info-box.warning strong { color: var(--warning); }
.info-box.success strong { color: var(--success); }
.info-box p, .info-box ul { font-size: 12px; color: var(--muted); margin: 0; }
.info-box ul { padding-left: 16px; margin-top: 6px; }
.info-box ul li { margin: 4px 0; }

/* ASCII diagram box */
.ascii-box { background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 14px; margin-top: 16px; }
.ascii-box strong { display: block; margin-bottom: 10px; color: var(--accent); font-size: 12px; }
.ascii-box pre { margin: 0; font-family: var(--font-mono); font-size: 10px; line-height: 1.4; color: var(--muted); white-space: pre; overflow-x: auto; }

/* Device naming section */
.device-naming-section { margin-top: 16px; }
.naming-method { background: var(--surface-2); border-radius: 10px; padding: 14px; margin-bottom: 12px; }
.naming-method h4 { margin: 0 0 6px 0; font-size: 13px; color: var(--text); }
.naming-method p { margin: 0 0 10px 0; font-size: 12px; color: var(--muted); }

/* Config list for step-by-step instructions */
.config-list { padding-left: 18px; font-size: 13px; color: var(--muted); line-height: 1.7; margin: 6px 0; }
.config-list li { margin: 4px 0; }
.config-list code { background: var(--surface); padding: 2px 6px; border-radius: 4px; font-size: 12px; }

/* Utility classes */
.ml-sm { margin-left: 6px; }
.inline-form { display: inline-block; }

/* Linked IPs page - COMPACT */
.profile-selector { background: var(--surface-2); border-radius: 10px; padding: 14px 16px; margin-bottom: 16px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.profile-selector label { font-size: 13px; color: var(--muted); }
.profile-selector select { background: var(--surface); border: 1px solid var(--border); color: var(--text); padding: 8px 12px; border-radius: 6px; font-size: 13px; min-width: 220px; }

.current-ip-card { background: linear-gradient(135deg, var(--accent) 0%, #06b6d4 100%); border-radius: 10px; padding: 18px 20px; margin-bottom: 16px; color: white; }
.current-ip-card h3 { margin: 0 0 8px 0; font-size: 12px; opacity: 0.85; font-weight: 500; }
.current-ip-address { font-size: 22px; font-weight: 700; font-family: var(--font-mono); margin-bottom: 10px; }
.current-ip-status { display: flex; align-items: center; gap: 8px; font-size: 12px; flex-wrap: wrap; }
.current-ip-status .dot { width: 8px; height: 8px; border-radius: 50%; }
.current-ip-status .dot.linked { background: #4ade80; }
.current-ip-status .dot.not-linked { background: #fbbf24; }
.current-ip-status form { margin-left: 12px; }
.current-ip-status .btn { background: rgba(255,255,255,0.2); color: white; border: 1px solid rgba(255,255,255,0.3); }
.current-ip-status .btn:hover { background: rgba(255,255,255,0.3); }

.ip-list { display: flex; flex-direction: column; gap: 8px; }
.ip-item { background: var(--surface-2); border-radius: 8px; padding: 12px 14px; display: flex; justify-content: space-between; align-items: center; transition: all 0.2s; }
.ip-item:hover { background: var(--surface-3); }
.ip-item-info { display: flex; flex-direction: column; gap: 2px; }
.ip-item-address { font-family: var(--font-mono); font-size: 14px; font-weight: 600; color: var(--text); }
.ip-item-meta { font-size: 11px; color: var(--muted); }
.ip-item-actions { display: flex; gap: 6px; }

.settings-card { background: var(--surface-card); border-radius: 10px; padding: 16px; }
.settings-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border); }
.settings-row:last-child { border-bottom: none; }
.settings-label { display: flex; flex-direction: column; gap: 2px; }
.settings-label h4 { margin: 0; font-size: 13px; color: var(--text); }
.settings-label p { margin: 0; font-size: 11px; color: var(--muted); }

.token-display { background: var(--surface-2); border-radius: 6px; padding: 10px 12px; font-family: var(--font-mono); font-size: 11px; word-break: break-all; margin-top: 10px; }
.auto-register-url { background: var(--surface-2); border-radius: 6px; padding: 10px 12px; font-family: var(--font-mono); font-size: 10px; word-break: break-all; margin-top: 8px; color: var(--muted); }

.empty-state { text-align: center; padding: 30px 20px; color: var(--muted); }
.empty-state svg { width: 48px; height: 48px; margin-bottom: 12px; opacity: 0.4; }
.empty-state p { margin: 4px 0; font-size: 13px; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 768px) { .grid-2 { grid-template-columns: 1fr; } }

.add-ip-form { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.add-ip-form input { flex: 1; min-width: 120px; background: var(--surface); border: 1px solid var(--border); color: var(--text); padding: 8px 10px; border-radius: 6px; font-family: var(--font-mono); font-size: 12px; }
.add-ip-form input[name="description"] { max-width: 160px; font-family: inherit; }

/* Switch toggle */
.switch { position: relative; display: inline-block; width: 40px; height: 22px; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider { position: absolute; cursor: pointer; inset: 0; background: var(--surface-3); transition: 0.3s; border-radius: 22px; }
.switch .slider::before { content: ''; position: absolute; height: 16px; width: 16px; left: 3px; bottom: 3px; background: white; transition: 0.3s; border-radius: 50%; }
.switch input:checked + .slider { background: var(--accent); }
.switch input:checked + .slider::before { transform: translateX(18px); }

/* Additional utility classes */
.border-top { border-top: 1px solid var(--border); }
.pt-md { padding-top: 16px; }
.form-input-sm { background: var(--surface); border: 1px solid var(--border); color: var(--text); padding: 6px 10px; border-radius: 6px; font-size: 12px; }

/* Certificates page - COMPACT */
.cert-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; flex-wrap: wrap; gap: 12px; }

.cert-status-card { background: var(--surface-card); border-radius: 12px; padding: 24px; text-align: center; margin-bottom: 16px; }
.cert-status-icon { font-size: 48px; margin-bottom: 12px; }
.cert-status-title { font-size: 18px; font-weight: 600; margin-bottom: 6px; color: var(--text); }
.cert-status-subtitle { color: var(--muted); font-size: 13px; margin-bottom: 16px; }
.cert-status-valid .cert-status-icon { color: var(--success); }
.cert-status-expiring .cert-status-icon { color: var(--warning); }
.cert-status-expired .cert-status-icon, .cert-status-revoked .cert-status-icon { color: var(--danger); }
.cert-status-none .cert-status-icon { color: var(--muted); }

.cert-details { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: 16px; }
.cert-detail { background: var(--surface-2); padding: 12px; border-radius: 8px; }
.cert-detail-label { font-size: 10px; color: var(--muted); text-transform: uppercase; margin-bottom: 4px; }
.cert-detail-value { font-size: 13px; font-weight: 500; font-family: var(--font-mono); word-break: break-all; color: var(--text); }

.cert-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

.download-section { background: var(--surface-card); border-radius: 10px; padding: 16px; margin-bottom: 16px; }
.download-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 12px; }
.download-card { background: var(--surface-2); border-radius: 10px; padding: 16px; text-align: center; transition: all 0.2s; cursor: pointer; border: 1px solid transparent; }
.download-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.download-card-icon { font-size: 32px; margin-bottom: 10px; }
.download-card-title { font-weight: 600; font-size: 13px; margin-bottom: 4px; color: var(--text); }
.download-card-desc { font-size: 11px; color: var(--muted); margin-bottom: 10px; }

.security-info { background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius: 10px; padding: 16px; margin-bottom: 16px; }
.security-info h3 { color: var(--accent); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; font-size: 14px; }
.security-info p { font-size: 12px; color: var(--muted); }
.security-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; margin-top: 12px; }
.security-feature { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text); }
.security-feature-icon { color: var(--success); }

.pqc-badge { display: inline-flex; align-items: center; gap: 4px; background: linear-gradient(135deg, #6366f1, #8b5cf6); color: white; padding: 3px 10px; border-radius: 12px; font-size: 10px; font-weight: 600; }

/* Modal - generic */
.modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); display: none; align-items: center; justify-content: center; z-index: 1000; }
.modal.open, .modal.active { display: flex; }
.modal.hidden { display: none; }
.modal-content { background: var(--surface-card); border-radius: 12px; padding: 20px; max-width: 400px; width: 90%; }
.modal-content.modal-lg { max-width: 600px; max-height: 80vh; overflow-y: auto; }
.modal-content h3 { margin: 0 0 8px 0; font-size: 16px; color: var(--text); }
.modal-actions { margin-top: 14px; display: flex; gap: 8px; }

/* Text utilities */
.text-left { text-align: left; }
.hidden { display: none !important; }

/* Account page - Professional Design */
.alert-bordered { border-left: 4px solid var(--warning); }

/* Account Header */
.account-header { display: flex; align-items: center; gap: 20px; background: linear-gradient(135deg, var(--surface-card) 0%, var(--surface-2) 100%); border-radius: 16px; padding: 24px; margin-bottom: 20px; flex-wrap: wrap; }
.account-avatar { width: 72px; height: 72px; background: linear-gradient(135deg, var(--accent), var(--accent-hover)); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 700; color: var(--on-accent); flex-shrink: 0; }
.account-header-info { flex: 1; min-width: 200px; }
.account-name { font-size: 22px; font-weight: 700; color: var(--text); margin: 0 0 6px 0; word-break: break-word; }
.account-meta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.account-role { background: var(--accent); color: white; padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: 600; text-transform: uppercase; }
.account-id { color: var(--muted); font-size: 12px; font-family: var(--font-mono); }
.account-security-score { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.security-score-circle { position: relative; width: 64px; height: 64px; }
.security-score-circle svg { transform: rotate(-90deg); width: 100%; height: 100%; }
.security-score-bg { fill: none; stroke: var(--surface-3); stroke-width: 3; }
.security-score-fill { fill: none; stroke: var(--success); stroke-width: 3; stroke-linecap: round; transition: stroke-dasharray 0.6s ease; }
.security-score-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 14px; font-weight: 700; color: var(--text); }
.security-score-label { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }

/* Security Status Cards */
.security-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 20px; }
.security-card { display: flex; align-items: center; gap: 12px; background: var(--surface-card); border-radius: 12px; padding: 16px; border: 1px solid var(--border); transition: all 0.2s; }
.security-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.security-card.active { border-color: var(--success); background: linear-gradient(135deg, color-mix(in srgb, var(--success) 5%, var(--surface-card)), var(--surface-card)); }
.security-card-icon { font-size: 28px; flex-shrink: 0; }
.security-card-info { flex: 1; min-width: 0; }
.security-card-info h3 { font-size: 13px; font-weight: 600; color: var(--text); margin: 0 0 2px 0; }
.security-card-info p { font-size: 11px; color: var(--muted); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.security-card-status { flex-shrink: 0; }

/* Status Badges */
.status-badge { display: inline-block; padding: 3px 10px; border-radius: 10px; font-size: 10px; font-weight: 600; text-transform: uppercase; }
.status-badge.success { background: color-mix(in srgb, var(--success) 15%, transparent); color: var(--success); }
.status-badge.warning { background: color-mix(in srgb, var(--warning) 15%, transparent); color: var(--warning); }
.status-badge.neutral { background: var(--surface-3); color: var(--muted); }

/* Account Grid */
.account-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 900px) { .account-grid { grid-template-columns: 1fr; } }
.account-column { display: flex; flex-direction: column; gap: 16px; }

/* Card Header with badge */
.card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.card-header .card-title { margin: 0; }

/* Account Details List */
.account-details-list { display: flex; flex-direction: column; }
.detail-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); }
.detail-row:last-child { border-bottom: none; }
.detail-label { color: var(--muted); font-size: 13px; }
.detail-value { color: var(--text); font-size: 13px; font-weight: 500; text-align: right; word-break: break-word; max-width: 60%; }
.detail-value code { font-size: 11px; }

/* IP Tags */
.ip-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.ip-tag { background: var(--surface-2); padding: 6px 12px; border-radius: 6px; font-size: 12px; color: var(--text); }

/* Feature Promo Box */
.feature-promo { display: flex; gap: 14px; background: var(--surface-2); border-radius: 10px; padding: 16px; margin-bottom: 16px; }
.feature-promo-icon { font-size: 32px; flex-shrink: 0; }
.feature-promo-content h4 { font-size: 14px; font-weight: 600; color: var(--text); margin: 0 0 4px 0; }
.feature-promo-content p { font-size: 12px; color: var(--muted); margin: 0; line-height: 1.5; }

/* Button Full Width */
.btn-full { width: 100%; justify-content: center; }
.btn-lg { padding: 12px 24px; font-size: 14px; }

/* Backup Codes Display */
.account-backup-codes { background: linear-gradient(135deg, color-mix(in srgb, var(--success) 10%, var(--surface-card)), var(--surface-card)); border: 2px solid var(--success); border-radius: 16px; padding: 32px; text-align: center; max-width: 600px; margin: 0 auto; }
.backup-codes-header { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 20px; }
.backup-codes-header .backup-codes-icon { font-size: 48px; }
.backup-codes-header h2 { font-size: 22px; color: var(--success); margin: 0; }
.backup-codes-warning { background: color-mix(in srgb, var(--warning) 15%, transparent); color: var(--warning); padding: 12px 16px; border-radius: 8px; font-size: 13px; margin-bottom: 20px; }
.backup-codes-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; max-width: 300px; margin: 0 auto 20px; }
.backup-code { background: var(--surface-2); padding: 10px; border-radius: 6px; font-family: var(--font-mono); font-size: 14px; font-weight: 600; color: var(--text); }

/* 2FA Setup */
.account-2fa-setup { max-width: 800px; margin: 0 auto; }
.setup-2fa-container { display: flex; gap: 40px; align-items: flex-start; flex-wrap: wrap; background: var(--surface-card); border-radius: 16px; padding: 32px; }
.setup-2fa-qr-section { flex: 0 0 auto; text-align: center; }
.qr-code-img { background: white; padding: 16px; border-radius: 12px; display: block; }
.setup-2fa-divider { display: flex; align-items: center; padding: 0 20px; }
.setup-2fa-divider span { background: var(--surface-3); padding: 8px 16px; border-radius: 20px; font-size: 12px; color: var(--muted); text-transform: uppercase; }
.setup-2fa-manual-section { flex: 1; min-width: 280px; }
.setup-2fa-manual-section h3 { font-size: 14px; margin: 0 0 10px 0; color: var(--text); }
.manual-entry-code { display: block; background: var(--surface-2); padding: 14px; border-radius: 8px; font-size: 13px; word-break: break-all; color: var(--text); }
.otp-input { font-size: 28px; letter-spacing: 8px; text-align: center; font-weight: 600; }

/* GDPR Section */
.gdpr-section { margin-top: 32px; }
.gdpr-section .section-title { font-size: 18px; font-weight: 600; color: var(--text); margin: 0 0 16px 0; }
.gdpr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 900px) { .gdpr-grid { grid-template-columns: 1fr; } }
.gdpr-card { display: flex; flex-direction: column; gap: 16px; }
.gdpr-card-icon { font-size: 40px; text-align: center; }
.gdpr-card-content h3 { font-size: 16px; font-weight: 600; color: var(--text); margin: 0 0 6px 0; }
.gdpr-card-content p { font-size: 13px; color: var(--muted); margin: 0; line-height: 1.5; }
.gdpr-card .btn { align-self: center; }
.gdpr-card-danger { border: 1px solid color-mix(in srgb, var(--error) 30%, transparent); }

/* Delete Account Modal */
.modal-danger { border: 2px solid var(--error); }
.modal-warning-box { background: color-mix(in srgb, var(--error) 10%, transparent); border: 1px solid color-mix(in srgb, var(--error) 30%, transparent); border-radius: 8px; padding: 16px; margin-bottom: 16px; }
.modal-warning-box p { margin: 0 0 12px 0; color: var(--error); }
.modal-warning-box ul { margin: 0; padding-left: 20px; color: var(--text); font-size: 13px; }
.modal-warning-box li { margin: 6px 0; }

/* Button groups */
.btn-group { display: flex; gap: 10px; flex-wrap: wrap; }

/* Modal styles */
.modal-title-danger { color: var(--danger); margin: 0 0 8px 0; }
.modal-title-success { color: var(--success); margin: 0 0 8px 0; }
.modal-error { color: var(--danger); font-size: 13px; padding: 8px 12px; background: color-mix(in srgb, var(--danger) 10%, transparent); border-radius: 6px; margin-bottom: 12px; }
.modal-success { color: var(--success); font-size: 13px; padding: 8px 12px; background: color-mix(in srgb, var(--success) 10%, transparent); border-radius: 6px; margin-bottom: 12px; }
.modal-warning { color: var(--warning); font-size: 13px; margin-bottom: 12px; }

/* ========================================
   ACCOUNT PAGE - New Professional Design
   ======================================== */

/* Welcome Header */
.account-welcome { background: var(--surface-card); border-radius: 16px; padding: 32px; margin-bottom: 32px; border-left: 4px solid var(--accent); }
.account-welcome-content { display: flex; align-items: center; gap: 24px; }
.account-avatar-large { width: 80px; height: 80px; border-radius: 50%; background: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 32px; font-weight: 700; color: var(--on-accent); flex-shrink: 0; }
.account-welcome-text h1 { color: var(--text); font-size: 28px; margin: 0 0 8px 0; font-weight: 600; }
.account-welcome-text .text-accent { opacity: 0.9; }
.account-welcome-text p { color: var(--muted); margin: 0; font-size: 15px; }

/* Account Sections */
.account-section { margin-bottom: 32px; }
.section-header { margin-bottom: 20px; }
.section-title { font-size: 20px; font-weight: 600; color: var(--text); margin: 0 0 6px 0; display: flex; align-items: center; gap: 10px; }
.section-desc { font-size: 14px; color: var(--muted); margin: 0; }

/* Theme Selector */
.theme-selector { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.theme-option { background: var(--surface-card); border: 2px solid var(--border); border-radius: 12px; padding: 16px; cursor: pointer; transition: all 0.2s; text-align: center; position: relative; }
.theme-option:hover { border-color: var(--accent); transform: translateY(-2px); }
.theme-option.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface-card)); }
.theme-preview { display: flex; gap: 4px; justify-content: center; margin-bottom: 10px; }
.theme-color { width: 24px; height: 24px; border-radius: 50%; }
.theme-name { font-size: 12px; font-weight: 500; color: var(--text); display: block; }
.theme-check { position: absolute; top: 8px; right: 8px; background: var(--accent); color: white; width: 20px; height: 20px; border-radius: 50%; font-size: 12px; display: flex; align-items: center; justify-content: center; }

/* Security Options */
.security-options { display: flex; flex-direction: column; gap: 16px; }
.security-option-card { background: var(--surface-card); border: 1px solid var(--border); border-radius: 12px; padding: 20px; transition: all 0.2s; }
.security-option-card.enabled { border-color: color-mix(in srgb, var(--success) 50%, var(--border)); background: color-mix(in srgb, var(--success) 5%, var(--surface-card)); }
.security-option-header { display: flex; align-items: flex-start; gap: 16px; }
.security-option-icon { font-size: 32px; flex-shrink: 0; }
.security-option-info { flex: 1; }
.security-option-info h3 { font-size: 16px; font-weight: 600; color: var(--text); margin: 0 0 4px 0; }
.security-option-info p { font-size: 13px; color: var(--muted); margin: 0; line-height: 1.5; }
.security-option-status { flex-shrink: 0; }
.security-option-actions { display: flex; gap: 10px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }

/* Status Pills */
.status-pill { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 500; }
.status-pill.success { background: color-mix(in srgb, var(--success) 15%, transparent); color: var(--success); }
.status-pill.warning { background: color-mix(in srgb, var(--warning) 15%, transparent); color: var(--warning); }
.status-pill.neutral { background: var(--surface-2); color: var(--muted); }

/* Info Cards */
.info-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.info-card { background: var(--surface-card); border: 1px solid var(--border); border-radius: 12px; padding: 16px; }
.info-label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; }
.info-value { display: block; font-size: 15px; color: var(--text); font-weight: 500; word-break: break-word; }
.info-value code { font-size: 13px; background: var(--surface-2); padding: 2px 6px; border-radius: 4px; }

/* Data Actions */
.data-actions { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.data-action-card { background: var(--surface-card); border: 1px solid var(--border); border-radius: 12px; padding: 20px; display: flex; align-items: center; gap: 16px; }
.data-action-card.danger { border-color: color-mix(in srgb, var(--error) 30%, var(--border)); }
.data-action-icon { font-size: 32px; flex-shrink: 0; }
.data-action-content { flex: 1; }
.data-action-content h3 { font-size: 15px; font-weight: 600; color: var(--text); margin: 0 0 4px 0; }
.data-action-content p { font-size: 13px; color: var(--muted); margin: 0; }

/* Button Variants */
.btn-sm { padding: 8px 16px; font-size: 13px; }
.btn-danger-outline { background: transparent; border: 1px solid var(--error); color: var(--error); }
.btn-danger-outline:hover { background: var(--error); color: white; }

/* Modal Header with close button */
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.modal-header h3 { margin: 0; font-size: 18px; }
.modal-close { background: none; border: none; font-size: 24px; color: var(--muted); cursor: pointer; padding: 0; line-height: 1; }
.modal-close:hover { color: var(--text); }

/* Form Hint */
.form-hint { display: block; font-size: 12px; color: var(--muted); margin-top: 6px; }

/* Responsive Account */
@media (max-width: 768px) {
    .account-welcome { padding: 24px; }
    .account-welcome-content { flex-direction: column; text-align: center; }
    .account-avatar-large { width: 64px; height: 64px; font-size: 26px; }
    .account-welcome-text h1 { font-size: 22px; }
    .theme-selector { grid-template-columns: repeat(2, 1fr); }
    .security-option-header { flex-wrap: wrap; }
    .security-option-status { width: 100%; margin-top: 12px; }
    .data-actions { grid-template-columns: 1fr; }
    .data-action-card { flex-direction: column; text-align: center; }
}

@media (max-width: 600px) {
    .account-header { padding: 20px; gap: 16px; }
    .account-avatar { width: 56px; height: 56px; font-size: 22px; }
    .account-name { font-size: 18px; }
    .security-cards { grid-template-columns: 1fr; }
    .setup-2fa-container { padding: 20px; }
    .setup-2fa-divider { width: 100%; justify-content: center; padding: 16px 0; }
    .info-cards { grid-template-columns: 1fr; }
    .theme-selector { grid-template-columns: repeat(2, 1fr); }
}

/* ========================================
   SETTINGS PAGE - Professional Design
   ======================================== */

/* Settings Header */
.settings-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; }
.settings-header-info { flex: 1; }
.settings-title { font-size: 28px; font-weight: 700; color: var(--text); margin: 0 0 4px 0; }
.settings-subtitle { font-size: 14px; color: var(--muted); margin: 0; }
.settings-profile-selector { flex-shrink: 0; }
.profile-select { background: var(--surface-card); border: 1px solid var(--border); color: var(--text); padding: 10px 16px; border-radius: 10px; font-size: 14px; font-weight: 500; min-width: 180px; cursor: pointer; }
.profile-select:focus { outline: none; border-color: var(--accent); }

/* Settings Profile Card */
.settings-profile-card { display: flex; justify-content: space-between; align-items: center; background: linear-gradient(135deg, var(--surface-card) 0%, var(--surface-2) 100%); border-radius: 16px; padding: 20px 24px; margin-bottom: 16px; flex-wrap: wrap; gap: 16px; }
.profile-card-main { display: flex; align-items: center; gap: 16px; }
.profile-card-icon { font-size: 40px; }
.profile-card-info h2 { font-size: 20px; font-weight: 700; color: var(--text); margin: 0 0 8px 0; }
.profile-card-meta { display: flex; gap: 10px; flex-wrap: wrap; }
.profile-code-badge { background: var(--surface-3); color: var(--text); padding: 4px 12px; border-radius: 6px; font-size: 12px; font-family: var(--font-mono); font-weight: 600; }
.profile-mode-badge { padding: 4px 12px; border-radius: 6px; font-size: 11px; font-weight: 600; text-transform: uppercase; }
.profile-mode-badge.standard { background: color-mix(in srgb, var(--success) 15%, transparent); color: var(--success); }
.profile-mode-badge.secure { background: color-mix(in srgb, var(--warning) 15%, transparent); color: var(--warning); }
.profile-mode-badge.blackberry { background: color-mix(in srgb, #9333ea 15%, transparent); color: #a855f7; }
.profile-card-id { display: flex; align-items: center; gap: 10px; background: var(--surface-2); padding: 10px 14px; border-radius: 10px; }
.profile-card-id .id-label { font-size: 11px; color: var(--muted); text-transform: uppercase; }
.profile-card-id code { font-size: 11px; color: var(--accent); max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
.copy-btn { background: transparent; border: none; color: var(--muted); cursor: pointer; padding: 4px; border-radius: 4px; transition: all 0.2s; display: flex; }
.copy-btn:hover { color: var(--accent); background: var(--surface-3); }
.copy-btn.copied { color: var(--success); }

/* Settings Stats */
.settings-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
@media (max-width: 768px) { .settings-stats { grid-template-columns: repeat(2, 1fr); } }
.stat-card { display: flex; align-items: center; gap: 12px; background: var(--surface-card); border-radius: 12px; padding: 16px; border: 1px solid var(--border); }
.stat-icon { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.stat-icon.perf { background: linear-gradient(135deg, color-mix(in srgb, var(--warning) 20%, transparent), color-mix(in srgb, #f97316 20%, transparent)); }
.stat-icon.advanced { background: linear-gradient(135deg, color-mix(in srgb, #06b6d4 20%, transparent), color-mix(in srgb, var(--accent) 20%, transparent)); }
.stat-icon.security { background: linear-gradient(135deg, color-mix(in srgb, #9333ea 20%, transparent), color-mix(in srgb, #6366f1 20%, transparent)); }
.stat-icon.rewrites { background: linear-gradient(135deg, color-mix(in srgb, var(--success) 20%, transparent), color-mix(in srgb, #06b6d4 20%, transparent)); }
.stat-info { display: flex; flex-direction: column; }
.stat-value { font-size: 18px; font-weight: 700; color: var(--text); }
.stat-label { font-size: 11px; color: var(--muted); text-transform: uppercase; }

/* Settings Grid */
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 900px) { .settings-grid { grid-template-columns: 1fr; } }
.settings-column { display: flex; flex-direction: column; gap: 16px; }

/* Settings Card */
.settings-card { background: var(--surface-card); border-radius: 14px; padding: 20px; border: 1px solid var(--border); }
.settings-card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.settings-card-header h3 { font-size: 15px; font-weight: 600; color: var(--text); margin: 0; flex: 1; }
.settings-card-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.settings-card-icon svg { color: white; }
.settings-card-icon.purple { background: linear-gradient(135deg, #8b5cf6, #6366f1); }
.settings-card-icon.warning { background: linear-gradient(135deg, var(--warning), #f97316); }
.settings-card-icon.cyan { background: linear-gradient(135deg, #06b6d4, var(--accent)); }
.settings-card-icon.quantum { background: linear-gradient(135deg, #9333ea, #6366f1); }
.settings-card-icon.success { background: linear-gradient(135deg, var(--success), #06b6d4); }
.settings-card-icon.danger { background: linear-gradient(135deg, var(--danger), #f97316); }

/* Coming Soon Badge */
.coming-soon-badge { background: var(--surface-3); color: var(--muted); font-size: 9px; font-weight: 700; padding: 3px 8px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.5px; }

/* Rewrite Count Badge */
.rewrite-count { background: var(--accent); color: white; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 10px; min-width: 20px; text-align: center; }

/* Profile Name Edit */
.profile-name-edit { display: flex; gap: 10px; }
.profile-name-edit .form-input { flex: 1; }

/* Settings Toggle List */
.settings-toggle-list { display: flex; flex-direction: column; gap: 2px; }
.settings-toggle { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--border); }
.settings-toggle:last-child { border-bottom: none; padding-bottom: 0; }
.settings-toggle:first-child { padding-top: 0; }
.settings-toggle.disabled { opacity: 0.5; }
.toggle-content { flex: 1; padding-right: 16px; }
.toggle-content h4 { font-size: 13px; font-weight: 600; color: var(--text); margin: 0 0 3px 0; }
.toggle-content p { font-size: 12px; color: var(--muted); margin: 0; line-height: 1.4; }

/* Security Card */
.settings-card.security-card { border-color: color-mix(in srgb, #9333ea 30%, var(--border)); background: linear-gradient(135deg, var(--surface-card), color-mix(in srgb, #9333ea 5%, var(--surface-card))); }

/* Rewrite Form */
.rewrite-form { margin-bottom: 16px; }
.rewrite-form-row { display: grid; grid-template-columns: 2fr 2fr 80px 44px; gap: 8px; }
@media (max-width: 600px) { .rewrite-form-row { grid-template-columns: 1fr 1fr; } .rewrite-form-row .btn { grid-column: span 2; } }
.rewrite-type-select { text-align: center; }

/* Rewrites List */
.rewrites-list { display: flex; flex-direction: column; gap: 8px; }
.rewrite-item { display: flex; justify-content: space-between; align-items: center; background: var(--surface-2); border-radius: 8px; padding: 10px 12px; }
.rewrite-info { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; overflow: hidden; }
.rewrite-domain { font-family: var(--font-mono); font-size: 12px; color: var(--accent); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rewrite-arrow { color: var(--muted); font-size: 12px; flex-shrink: 0; }
.rewrite-answer { font-family: var(--font-mono); font-size: 12px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rewrite-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.rewrite-type-badge { background: var(--surface-3); color: var(--muted); font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 4px; }
.btn-icon-danger { background: transparent; border: none; color: var(--muted); cursor: pointer; padding: 6px; border-radius: 6px; display: flex; transition: all 0.2s; }
.btn-icon-danger:hover { background: color-mix(in srgb, var(--danger) 15%, transparent); color: var(--danger); }

/* Empty State Small */
.empty-state-small { text-align: center; padding: 24px 16px; color: var(--muted); }
.empty-state-small span { font-size: 28px; display: block; margin-bottom: 8px; opacity: 0.5; }
.empty-state-small p { margin: 0; font-size: 13px; }

/* Danger Card */
.settings-card.danger-card { border-color: color-mix(in srgb, var(--danger) 30%, var(--border)); }
.danger-actions { display: flex; flex-direction: column; gap: 12px; }
.danger-action { display: flex; justify-content: space-between; align-items: center; padding: 14px; background: var(--surface-2); border-radius: 10px; gap: 16px; }
.danger-action.delete { background: color-mix(in srgb, var(--danger) 8%, var(--surface-2)); }
.danger-action-info { flex: 1; }
.danger-action-info h4 { font-size: 13px; font-weight: 600; color: var(--text); margin: 0 0 2px 0; }
.danger-action-info p { font-size: 11px; color: var(--muted); margin: 0; }

/* Button Sizes */
.btn-sm { padding: 6px 14px; font-size: 12px; }

/* ========================================
   PARENTAL CONTROL PAGE
   ======================================== */

/* Parental Header */
.parental-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; }
.parental-header-info { flex: 1; }
.parental-title { font-size: 28px; font-weight: 700; color: var(--text); margin: 0 0 4px 0; }
.parental-subtitle { font-size: 14px; color: var(--muted); margin: 0; }
.parental-profile-selector { flex-shrink: 0; }

/* Parental Stats */
.parental-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
@media (max-width: 768px) { .parental-stats { grid-template-columns: repeat(2, 1fr); } }
.parental-stat-card { display: flex; align-items: center; gap: 12px; background: var(--surface-card); border-radius: 12px; padding: 16px; border: 1px solid var(--border); }
.parental-stat-icon { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.parental-stat-icon.blocked { background: linear-gradient(135deg, color-mix(in srgb, var(--danger) 20%, transparent), color-mix(in srgb, #f97316 20%, transparent)); }
.parental-stat-icon.total { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 20%, transparent), color-mix(in srgb, #06b6d4 20%, transparent)); }
.parental-stat-icon.protection { background: linear-gradient(135deg, color-mix(in srgb, var(--success) 20%, transparent), color-mix(in srgb, #06b6d4 20%, transparent)); }
.parental-stat-icon.schedule { background: linear-gradient(135deg, color-mix(in srgb, #9333ea 20%, transparent), color-mix(in srgb, #6366f1 20%, transparent)); }
.parental-stat-info { display: flex; flex-direction: column; }
.parental-stat-value { font-size: 20px; font-weight: 700; color: var(--text); }
.parental-stat-label { font-size: 11px; color: var(--muted); text-transform: uppercase; }

/* Parental Card */
.parental-card { background: var(--surface-card); border-radius: 14px; padding: 20px; border: 1px solid var(--border); margin-bottom: 16px; }
.parental-card-header { margin-bottom: 16px; }
.parental-card-title { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.parental-card-title h3 { font-size: 16px; font-weight: 600; color: var(--text); margin: 0; }
.parental-card-icon { font-size: 22px; }
.parental-card-desc { font-size: 13px; color: var(--muted); margin: 0; }

/* Category Filter */
.category-filter { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.filter-chip { padding: 6px 14px; border: 1px solid var(--border); border-radius: 20px; background: var(--surface-2); color: var(--muted); font-size: 12px; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; gap: 4px; }
.filter-chip:hover { border-color: var(--accent); color: var(--text); }
.filter-chip.active { background: var(--accent); border-color: var(--accent); color: white; }

/* Services Container */
.services-container { max-height: 500px; overflow-y: auto; padding-right: 8px; }
.services-container::-webkit-scrollbar { width: 6px; }
.services-container::-webkit-scrollbar-track { background: var(--surface-2); border-radius: 3px; }
.services-container::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* Category Section */
.category-section { margin-bottom: 20px; }
.category-header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.category-emoji { font-size: 16px; }
.category-title { font-size: 13px; font-weight: 600; color: var(--text); flex: 1; }
.category-count { font-size: 11px; color: var(--muted); background: var(--surface-2); padding: 2px 8px; border-radius: 10px; }

/* Services Grid */
.services-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; }
.service-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 12px 8px; text-align: center; cursor: pointer; transition: all 0.2s; position: relative; }
.service-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.service-card.blocked { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, var(--surface-2)); }
.service-icon { font-size: 24px; margin-bottom: 6px; }
.service-name { font-size: 11px; font-weight: 600; color: var(--text); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.service-card .service-status { position: absolute; top: 4px; right: 4px; font-size: 12px; }
.status-blocked { color: var(--danger); }

/* Parental Grid */
.parental-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 900px) { .parental-grid { grid-template-columns: 1fr; } }
.parental-column { display: flex; flex-direction: column; gap: 16px; }
.parental-column .parental-card { margin-bottom: 0; }

/* Recreation Rules */
.recreation-rules { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.recreation-rule { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; background: var(--surface-2); border-radius: 10px; }
.recreation-rule.inactive { opacity: 0.5; }
.rule-info { display: flex; align-items: center; gap: 16px; }
.rule-day { font-size: 13px; font-weight: 600; color: var(--accent); min-width: 80px; }
.rule-time { font-size: 13px; color: var(--text); font-family: var(--font-mono); }

/* Add Rule Form */
.add-rule-form { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.add-rule-row { display: grid; grid-template-columns: 2fr 1fr 1fr 44px; gap: 8px; }
@media (max-width: 600px) { .add-rule-row { grid-template-columns: 1fr 1fr; } .add-rule-row .btn { grid-column: span 2; } }

/* Loading Overlay */
.loading-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.loading-overlay.hidden { display: none; }
.spinner { width: 40px; height: 40px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ========================================
   DOMAIN LISTS (DENYLIST / ALLOWLIST)
   ======================================== */

/* Domain List Header */
.domainlist-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.domainlist-header-content {
    display: flex;
    align-items: center;
    gap: 16px;
}

.domainlist-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.domainlist-icon svg {
    width: 28px;
    height: 28px;
}

.domainlist-icon-deny {
    background: linear-gradient(135deg, color-mix(in srgb, var(--danger) 20%, transparent), color-mix(in srgb, #f97316 20%, transparent));
    color: var(--danger);
}

.domainlist-icon-allow {
    background: linear-gradient(135deg, color-mix(in srgb, var(--success) 20%, transparent), color-mix(in srgb, #06b6d4 20%, transparent));
    color: var(--success);
}

.domainlist-header-text h1 {
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 4px 0;
}

.domainlist-subtitle {
    font-size: 14px;
    color: var(--muted);
    margin: 0;
}

.domainlist-profile-select {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.domainlist-profile-select .form-input {
    min-width: 180px;
}

/* Domain List Stats */
.domainlist-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    .domainlist-stats { grid-template-columns: 1fr; }
}

.domainlist-stat {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--surface-card);
    border-radius: 12px;
    padding: 16px;
    border: 1px solid var(--border);
}

.domainlist-stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.domainlist-stat-icon svg {
    width: 22px;
    height: 22px;
}

.domainlist-stat-icon.deny {
    background: linear-gradient(135deg, color-mix(in srgb, var(--danger) 20%, transparent), color-mix(in srgb, #f97316 20%, transparent));
    color: var(--danger);
}

.domainlist-stat-icon.allow {
    background: linear-gradient(135deg, color-mix(in srgb, var(--success) 20%, transparent), color-mix(in srgb, #06b6d4 20%, transparent));
    color: var(--success);
}

.domainlist-stat-icon.recent {
    background: linear-gradient(135deg, color-mix(in srgb, var(--warning) 20%, transparent), color-mix(in srgb, #f59e0b 20%, transparent));
    color: var(--warning);
}

.domainlist-stat-icon.profile {
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 20%, transparent), color-mix(in srgb, #6366f1 20%, transparent));
    color: var(--accent);
}

.domainlist-stat-info {
    display: flex;
    flex-direction: column;
}

.domainlist-stat-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
}

.domainlist-stat-label {
    font-size: 11px;
    color: var(--muted);
    text-transform: uppercase;
}

/* Add Domain Card */
.domainlist-add-card {
    background: linear-gradient(135deg, color-mix(in srgb, var(--danger) 8%, var(--surface-card)) 0%, var(--surface-card) 100%);
    border: 1px solid color-mix(in srgb, var(--danger) 20%, var(--border));
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 16px;
}

.domainlist-add-card.allowlist {
    background: linear-gradient(135deg, color-mix(in srgb, var(--success) 8%, var(--surface-card)) 0%, var(--surface-card) 100%);
    border-color: color-mix(in srgb, var(--success) 20%, var(--border));
}

.domainlist-add-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

.domainlist-add-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--danger) 15%, transparent);
    color: var(--danger);
}

.domainlist-add-icon.allow {
    background: color-mix(in srgb, var(--success) 15%, transparent);
    color: var(--success);
}

.domainlist-add-icon svg {
    width: 20px;
    height: 20px;
}

.domainlist-add-header h3 {
    font-size: 15px;
    font-weight: 600;
    margin: 0;
    color: var(--text);
}

.domainlist-add-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.domainlist-add-input-group {
    display: flex;
    gap: 10px;
}

.domainlist-add-input-group .form-input {
    flex: 1;
}

@media (max-width: 600px) {
    .domainlist-add-input-group {
        flex-direction: column;
    }
    .domainlist-add-input-group .btn {
        width: 100%;
    }
}

/* Domain List Card */
.domainlist-card {
    background: var(--surface-card);
    border-radius: 14px;
    padding: 20px;
    border: 1px solid var(--border);
    margin-bottom: 16px;
}

.domainlist-card.allowlist {
    border-color: color-mix(in srgb, var(--success) 15%, var(--border));
}

.domainlist-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.domainlist-card-header h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    color: var(--text);
}

/* Domain List Empty State */
.domainlist-empty {
    text-align: center;
    padding: 40px 20px;
}

.domainlist-empty-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: color-mix(in srgb, var(--danger) 10%, var(--surface-2));
    color: var(--danger);
    opacity: 0.6;
}

.domainlist-empty-icon.allow {
    background: color-mix(in srgb, var(--success) 10%, var(--surface-2));
    color: var(--success);
}

.domainlist-empty-icon svg {
    width: 32px;
    height: 32px;
}

.domainlist-empty h4 {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 6px 0;
    color: var(--text);
}

/* Domain List Items */
.domainlist-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.domainlist-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    background: var(--surface-2);
    border-radius: 10px;
    border: 1px solid transparent;
    transition: all 0.2s;
}

.domainlist-item:hover {
    border-color: var(--border);
    background: var(--surface-3);
}

.domainlist-item-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.domainlist-item-icon svg {
    width: 18px;
    height: 18px;
}

.domainlist-item-icon.deny {
    background: color-mix(in srgb, var(--danger) 15%, transparent);
    color: var(--danger);
}

.domainlist-item-icon.allow {
    background: color-mix(in srgb, var(--success) 15%, transparent);
    color: var(--success);
}

.domainlist-item-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.domainlist-item-domain {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    font-family: var(--font-mono);
    background: none;
    padding: 0;
}

.domainlist-item-date {
    font-size: 11px;
    color: var(--muted);
}

.domainlist-item .btn {
    flex-shrink: 0;
}

.btn-icon {
    width: 14px;
    height: 14px;
    margin-right: 4px;
}

@media (max-width: 600px) {
    .domainlist-item {
        flex-wrap: wrap;
    }
    .domainlist-item .btn {
        width: 100%;
        margin-top: 8px;
    }
}

/* Domain List Info */
.domainlist-info {
    display: flex;
    gap: 16px;
    background: color-mix(in srgb, var(--accent) 6%, var(--surface-card));
    border: 1px solid color-mix(in srgb, var(--accent) 15%, var(--border));
    border-radius: 12px;
    padding: 16px;
}

.domainlist-info.allowlist {
    background: color-mix(in srgb, var(--success) 6%, var(--surface-card));
    border-color: color-mix(in srgb, var(--success) 15%, var(--border));
}

.domainlist-info-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent);
    flex-shrink: 0;
}

.domainlist-info.allowlist .domainlist-info-icon {
    background: color-mix(in srgb, var(--success) 12%, transparent);
    color: var(--success);
}

.domainlist-info-icon svg {
    width: 20px;
    height: 20px;
}

.domainlist-info-content h4 {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 8px 0;
    color: var(--text);
}

.domainlist-info-content ul {
    margin: 0;
    padding-left: 18px;
}

.domainlist-info-content li {
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 4px;
}

.domainlist-info-content li:last-child {
    margin-bottom: 0;
}

/* ========================================
   SETUP PAGE - Professional Design
   ======================================== */

/* Setup Header */
.setup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.setup-header-content {
    display: flex;
    align-items: center;
    gap: 16px;
}

.setup-header-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 20%, transparent), color-mix(in srgb, #6366f1 20%, transparent));
    color: var(--accent);
    flex-shrink: 0;
}

.setup-header-icon svg {
    width: 28px;
    height: 28px;
}

.setup-header-text h1 {
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 4px 0;
}

.setup-header-text p {
    font-size: 14px;
    color: var(--muted);
    margin: 0;
}

.setup-profile-select {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.setup-profile-select .form-input {
    min-width: 200px;
}

/* Profile Quick Info */
.setup-profile-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 16px;
}

.setup-profile-code {
    display: flex;
    align-items: center;
    gap: 10px;
}

.setup-profile-label {
    font-size: 12px;
    color: var(--muted);
}

.setup-profile-code code {
    font-size: 14px;
    font-weight: 600;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    padding: 4px 10px;
    border-radius: 6px;
}

.setup-profile-endpoints {
    display: flex;
    gap: 8px;
}

.setup-endpoint-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    text-transform: uppercase;
}

.setup-endpoint-badge.doh { background: color-mix(in srgb, var(--success) 15%, transparent); color: var(--success); }
.setup-endpoint-badge.dot { background: color-mix(in srgb, var(--info) 15%, transparent); color: var(--info); }
.setup-endpoint-badge.doq { background: color-mix(in srgb, var(--warning) 15%, transparent); color: var(--warning); }
.setup-endpoint-badge.dns53 { background: color-mix(in srgb, var(--muted) 15%, transparent); color: var(--muted); }

/* Tabs Container */
.setup-tabs-container {
    margin-bottom: 20px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.setup-tabs {
    display: flex;
    gap: 4px;
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 6px;
    min-width: max-content;
}

.setup-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--muted);
    text-decoration: none;
    transition: all 0.2s;
    white-space: nowrap;
}

.setup-tab:hover {
    background: var(--surface-2);
    color: var(--text);
}

.setup-tab.active {
    background: var(--accent);
    color: white;
}

.setup-tab-icon {
    font-size: 16px;
}

/* Setup Content */
.setup-content {
    min-height: 400px;
}

.setup-section {
    animation: fadeIn 0.3s ease;
}

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

.setup-section-header {
    margin-bottom: 20px;
}

.setup-section-header h2 {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 6px 0;
}

/* Endpoint Cards */
.endpoint-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.endpoint-card {
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px;
    transition: all 0.2s;
}

.endpoint-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.endpoint-card.featured {
    border-color: var(--success);
    background: linear-gradient(135deg, color-mix(in srgb, var(--success) 5%, var(--surface-card)) 0%, var(--surface-card) 100%);
}

.endpoint-card-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 14px;
}

.endpoint-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.endpoint-card-icon svg {
    width: 22px;
    height: 22px;
}

.endpoint-card-icon.doh { background: color-mix(in srgb, var(--success) 15%, transparent); color: var(--success); }
.endpoint-card-icon.dot { background: color-mix(in srgb, var(--info) 15%, transparent); color: var(--info); }
.endpoint-card-icon.doq { background: color-mix(in srgb, var(--warning) 15%, transparent); color: var(--warning); }

.endpoint-card-info h3 {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 6px 0;
}

.endpoint-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px;
    text-transform: uppercase;
}

.endpoint-badge.recommended { background: var(--success); color: white; }
.endpoint-badge.encrypted { background: var(--info); color: white; }
.endpoint-badge.fast { background: var(--warning); color: #000; }

.endpoint-url-box {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 10px;
}

.endpoint-url-box code {
    flex: 1;
    font-size: 13px;
    color: var(--text);
    word-break: break-all;
}

.endpoint-note {
    font-size: 12px;
    color: var(--muted);
    margin: 0;
}

/* Setup Card */
.setup-card {
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 16px;
}

.setup-card.featured {
    border-color: var(--accent);
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 5%, var(--surface-card)) 0%, var(--surface-card) 100%);
}

.setup-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

.setup-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.setup-card-icon svg {
    width: 22px;
    height: 22px;
}

.setup-card-icon.dns53 { background: color-mix(in srgb, var(--muted) 15%, transparent); color: var(--muted); }
.setup-card-icon.privacy { background: color-mix(in srgb, var(--success) 15%, transparent); color: var(--success); }

.setup-card-header h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

.setup-card-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 16px 0;
}

/* DNS Servers Grid */
.dns-servers-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

@media (max-width: 600px) {
    .dns-servers-grid { grid-template-columns: 1fr; }
}

.dns-server-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: var(--surface-2);
    border-radius: 8px;
}

.dns-server-label {
    font-size: 11px;
    color: var(--muted);
    min-width: 90px;
}

.dns-server-item code {
    flex: 1;
    font-size: 13px;
    color: var(--text);
}

.copy-mini {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--muted);
    cursor: pointer;
    transition: all 0.2s;
}

.copy-mini:hover {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}

.copy-mini svg {
    width: 14px;
    height: 14px;
}

/* Architecture Flow */
.arch-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px 0;
    overflow-x: auto;
    margin-bottom: 16px;
}

.arch-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 80px;
}

.arch-node-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    background: var(--surface-2);
    border: 2px solid var(--border);
    border-radius: 12px;
}

.arch-node.client .arch-node-icon { border-color: var(--accent); }
.arch-node.proxy .arch-node-icon { border-color: var(--success); }
.arch-node.relay .arch-node-icon { border-color: var(--warning); }
.arch-node.resolver .arch-node-icon { border-color: var(--info); }

.arch-node-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text);
    text-align: center;
}

.arch-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.arch-arrow-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--success);
}

.arch-arrow-line {
    width: 40px;
    height: 2px;
    background: var(--border);
    position: relative;
}

.arch-arrow-line::after {
    content: '';
    position: absolute;
    right: 0;
    top: -3px;
    border: 4px solid transparent;
    border-left-color: var(--border);
}

/* Privacy Info Box */
.privacy-info-box {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 16px;
    background: color-mix(in srgb, var(--success) 8%, var(--surface-2));
    border-radius: 10px;
}

.privacy-info-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.privacy-check {
    color: var(--success);
    font-weight: bold;
}

/* Setup Steps */
.setup-steps {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.setup-step {
    display: flex;
    gap: 16px;
}

.setup-step-number {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: white;
    font-size: 14px;
    font-weight: 700;
    border-radius: 50%;
    flex-shrink: 0;
}

.setup-step-content {
    flex: 1;
    padding-top: 4px;
}

.setup-step-content h4 {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 6px 0;
}

.setup-step-content p {
    font-size: 13px;
    color: var(--muted);
    margin: 0;
}

/* Setup Code Box */
.setup-code-box {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    margin-top: 10px;
}

.setup-code-box code {
    flex: 1;
    font-size: 13px;
    color: var(--accent);
    word-break: break-all;
}

/* Setup Code Block */
.setup-code-block {
    position: relative;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}

.setup-code-block pre {
    margin: 0;
    padding: 16px;
    font-size: 12px;
    line-height: 1.5;
    overflow-x: auto;
    background: transparent;
    border: none;
}

.setup-code-block .btn {
    position: absolute;
    top: 8px;
    right: 8px;
}

/* Setup Tip Box */
.setup-tip-box {
    display: flex;
    gap: 16px;
    background: color-mix(in srgb, var(--accent) 8%, var(--surface-card));
    border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border));
    border-radius: 12px;
    padding: 16px;
    margin-top: 16px;
}

.setup-tip-icon {
    font-size: 24px;
    flex-shrink: 0;
}

.setup-tip-content h4 {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 8px 0;
}

.setup-tip-content p {
    font-size: 13px;
    color: var(--muted);
    margin: 0 0 12px 0;
}

.setup-tip-content ul {
    margin: 0;
    padding-left: 18px;
}

.setup-tip-content li {
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 4px;
}

/* Setup Info Box */
.setup-info-box {
    background: color-mix(in srgb, var(--info) 8%, var(--surface-card));
    border: 1px solid color-mix(in srgb, var(--info) 20%, var(--border));
    border-radius: 12px;
    padding: 16px;
}

.setup-info-box h4 {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 12px 0;
    color: var(--info);
}

.setup-info-box ul {
    margin: 0;
    padding-left: 18px;
}

.setup-info-box li {
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 6px;
}

/* Setup Warning Box */
.setup-warning-box {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: color-mix(in srgb, var(--warning) 10%, var(--surface-2));
    border-radius: 8px;
    padding: 12px;
}

.warning-icon {
    font-size: 18px;
    flex-shrink: 0;
}

.setup-warning-box p {
    font-size: 13px;
    color: var(--muted);
    margin: 0;
}

/* Setup Download Buttons */
.setup-download-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.setup-download-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
}

.setup-download-btn.primary {
    background: var(--accent);
    color: white;
}

.setup-download-btn.primary:hover {
    background: var(--accent-hover);
    transform: translateY(-2px);
}

.setup-download-btn.secondary {
    background: var(--surface-2);
    color: var(--text);
    border: 1px solid var(--border);
}

.setup-download-btn.secondary:hover {
    border-color: var(--accent);
}

.setup-download-btn svg {
    width: 18px;
    height: 18px;
}

/* Setup Method Tabs */
.setup-method-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.setup-method-tab {
    padding: 10px 18px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--muted);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.setup-method-tab:hover {
    border-color: var(--accent);
    color: var(--text);
}

.setup-method-tab.active {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}

.setup-method-content {
    display: none;
}

.setup-method-content.active {
    display: block;
}

.linux-config-content {
    display: none;
}

.linux-config-content.active {
    display: block;
}

/* Setup Config List */
.setup-config-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.setup-config-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--surface-2);
    border-radius: 8px;
}

.setup-config-item span {
    font-size: 13px;
    color: var(--muted);
    min-width: 120px;
}

.setup-config-item code {
    flex: 1;
    font-size: 13px;
    color: var(--text);
    word-break: break-all;
}

/* Browser Grid */
.browser-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    .browser-grid { grid-template-columns: repeat(2, 1fr); }
}

.browser-card {
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}

.browser-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
}

.browser-card.active {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, var(--surface-card));
}

.browser-icon {
    font-size: 32px;
    margin-bottom: 8px;
}

.browser-card h4 {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 4px 0;
}

.browser-config {
    display: none;
}

.browser-config.active {
    display: block;
}

/* Linked IP */
.linked-ip-current {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.linked-ip-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.linked-ip-label {
    font-size: 12px;
    color: var(--muted);
}

.linked-ip-address {
    font-size: 18px;
    font-weight: 600;
    color: var(--accent);
}

.linked-ip-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.linked-ip-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: var(--surface-2);
    border-radius: 8px;
}

.linked-ip-item-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Device Examples */
.device-examples {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.device-example {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--surface-2);
    border-radius: 8px;
}

.device-icon {
    font-size: 20px;
}

.device-example span:not(.device-icon) {
    min-width: 100px;
    font-weight: 500;
}

.device-example code {
    flex: 1;
    font-size: 12px;
    color: var(--muted);
}

@media (max-width: 768px) {
    .setup-header { flex-direction: column; align-items: flex-start; }
    .setup-profile-info { flex-direction: column; gap: 12px; align-items: flex-start; }
    .setup-tabs { overflow-x: auto; }
    .endpoint-cards { grid-template-columns: 1fr; }
    .arch-flow { justify-content: flex-start; }
}

/* ===== FAQ PAGE STYLES ===== */
.faq-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 24px;
    padding: 24px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 15%, var(--surface-card)) 0%, var(--surface-card) 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.faq-header-icon {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.faq-header-icon svg {
    width: 32px !important;
    height: 32px !important;
    max-width: 32px;
    max-height: 32px;
    color: white;
}

.faq-header-content h1 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 6px;
}

.faq-header-content p {
    color: var(--muted);
    font-size: 14px;
    margin: 0;
}

/* FAQ Stats */
.faq-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.faq-stat {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.faq-stat-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.faq-stat-icon svg {
    width: 22px !important;
    height: 22px !important;
    max-width: 22px;
    max-height: 22px;
}

.faq-stat-icon.sections {
    background: color-mix(in srgb, var(--info) 15%, transparent);
    color: var(--info);
}

.faq-stat-icon.questions {
    background: color-mix(in srgb, var(--success) 15%, transparent);
    color: var(--success);
}

.faq-stat-icon.protocols {
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    color: var(--accent);
}

.faq-stat-info {
    display: flex;
    flex-direction: column;
}

.faq-stat-value {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
}

.faq-stat-label {
    font-size: 12px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* FAQ Table of Contents */
.faq-toc {
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px;
    margin-bottom: 24px;
}

.faq-toc h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.faq-toc-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.faq-toc-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--surface-2);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 13px;
    font-weight: 500;
    transition: all var(--trans);
    text-decoration: none;
}

.faq-toc-item:hover {
    background: color-mix(in srgb, var(--accent) 10%, var(--surface-2));
    border-color: var(--accent);
    color: var(--accent);
}

.faq-toc-item .toc-icon {
    font-size: 16px;
    flex-shrink: 0;
}

/* FAQ Sections */
.faq-section {
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    margin-bottom: 20px;
    overflow: hidden;
}

.faq-section-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
}

.faq-section-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.faq-section-icon.info { background: color-mix(in srgb, var(--info) 15%, transparent); color: var(--info); }
.faq-section-icon.dns { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); }
.faq-section-icon.security { background: color-mix(in srgb, var(--success) 15%, transparent); color: var(--success); }
.faq-section-icon.privacy { background: color-mix(in srgb, #8b5cf6 15%, transparent); color: #8b5cf6; }
.faq-section-icon.blocking { background: color-mix(in srgb, var(--danger) 15%, transparent); color: var(--danger); }
.faq-section-icon.profiles { background: color-mix(in srgb, var(--warning) 15%, transparent); color: var(--warning); }
.faq-section-icon.stats { background: color-mix(in srgb, #06b6d4 15%, transparent); color: #06b6d4; }
.faq-section-icon.account { background: color-mix(in srgb, #f97316 15%, transparent); color: #f97316; }
.faq-section-icon.mobile { background: color-mix(in srgb, #ec4899 15%, transparent); color: #ec4899; }
.faq-section-icon.router { background: color-mix(in srgb, #84cc16 15%, transparent); color: #84cc16; }
.faq-section-icon.issues { background: color-mix(in srgb, #ef4444 15%, transparent); color: #ef4444; }
.faq-section-icon.support { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); }

.faq-section-title,
.faq-section-header h2 {
    font-size: 17px;
    font-weight: 600;
    margin: 0;
}

.faq-section-content {
    padding: 8px;
}

.faq-sections {
    margin-bottom: 24px;
}

.faq-items {
    padding: 8px;
}

/* FAQ Items (Collapsible) */
.faq-item {
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    margin-bottom: 4px;
}

.faq-item[open] {
    background: var(--surface-2);
    border-color: var(--border);
}

.faq-question {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    cursor: pointer;
    font-weight: 500;
    font-size: 14px;
    list-style: none;
    transition: all var(--trans);
    border-radius: var(--radius-sm);
}

.faq-question::-webkit-details-marker {
    display: none;
}

.faq-question:hover {
    background: var(--surface-2);
}

.faq-question::before {
    content: '';
    width: 20px;
    height: 20px;
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2.5'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    transition: transform var(--trans);
}

.faq-item[open] .faq-question::before {
    transform: rotate(90deg);
}

.faq-answer {
    padding: 0 16px 16px 48px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.7;
}

.faq-answer p {
    margin-bottom: 12px;
    color: var(--muted);
}

.faq-answer p:last-child {
    margin-bottom: 0;
}

.faq-answer strong {
    color: var(--text);
    font-weight: 600;
}

.faq-answer code {
    background: var(--surface);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
    color: var(--accent);
}

.faq-answer ul, .faq-answer ol {
    margin: 12px 0;
    padding-left: 20px;
}

.faq-answer li {
    margin-bottom: 6px;
    color: var(--muted);
}

/* FAQ Protocol Cards */
.faq-protocols {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin: 16px 0;
}

.faq-protocol {
    padding: 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.faq-protocol.doh { border-top: 3px solid var(--success); }
.faq-protocol.dot { border-top: 3px solid var(--info); }
.faq-protocol.dns53 { border-top: 3px solid var(--warning); }
.faq-protocol.doq { border-top: 3px solid #8b5cf6; }

.faq-protocol .protocol-badge {
    display: inline-block;
    padding: 4px 10px;
    background: var(--accent);
    color: white;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    font-family: var(--font-mono);
    align-self: center;
}

.faq-protocol .protocol-name {
    font-weight: 600;
    font-size: 13px;
    color: var(--text);
}

.faq-protocol .protocol-desc {
    font-size: 11px;
    color: var(--muted);
    line-height: 1.4;
}

.faq-protocol-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--accent);
    margin-bottom: 4px;
}

.faq-protocol-port {
    font-size: 11px;
    color: var(--muted);
    font-family: var(--font-mono);
}

/* FAQ Security Modes */
.faq-security-modes,
.security-modes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 16px 0;
}

.faq-security-mode,
.security-mode {
    padding: 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.faq-security-mode.standard,
.security-mode.standard { border-left: 3px solid var(--info); }
.faq-security-mode.secure,
.security-mode.secure { border-left: 3px solid var(--warning); }
.faq-security-mode.blackberry,
.security-mode.blackberry { border-left: 3px solid var(--danger); }

.faq-security-mode-name,
.mode-name {
    font-weight: 600;
    font-size: 13px;
    color: var(--text);
}

.faq-security-mode-desc,
.mode-desc {
    font-size: 12px;
    color: var(--muted);
}

/* FAQ Priority List */
.faq-priority-list {
    margin: 16px 0;
    padding: 0;
    list-style: none;
    counter-reset: priority;
}

.faq-priority-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: 6px;
    counter-increment: priority;
}

.faq-priority-list li::before {
    content: counter(priority);
    width: 24px;
    height: 24px;
    background: var(--accent);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
}

/* FAQ Crypto Cards */
.faq-crypto-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin: 16px 0;
}

.faq-crypto-card {
    padding: 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.faq-crypto-card-title {
    font-weight: 600;
    font-size: 13px;
    color: var(--accent);
    margin-bottom: 6px;
}

.faq-crypto-card-desc {
    font-size: 12px;
    color: var(--muted);
}

/* FAQ Note Box */
.faq-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: color-mix(in srgb, var(--info) 10%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--info) 30%, var(--border));
    border-radius: var(--radius-sm);
    margin: 16px 0;
}

.faq-note-icon {
    color: var(--info);
    flex-shrink: 0;
    font-size: 16px;
}

.faq-note-text {
    font-size: 13px;
    color: var(--text);
}

/* FAQ Responsive */
@media (max-width: 1024px) {
    .faq-toc-grid { grid-template-columns: repeat(3, 1fr); }
    .faq-protocols { grid-template-columns: repeat(2, 1fr); }
    .faq-security-modes { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .faq-header { flex-direction: column; text-align: center; }
    .faq-stats { grid-template-columns: 1fr; }
    .faq-toc-grid { grid-template-columns: repeat(2, 1fr); }
    .faq-protocols { grid-template-columns: 1fr; }
    .faq-crypto-cards { grid-template-columns: 1fr; }
    .faq-answer { padding-left: 16px; }
}

@media (max-width: 480px) {
    .faq-toc-grid { grid-template-columns: 1fr; }
    .faq-header-icon { width: 48px; height: 48px; }
    .faq-header-icon svg { width: 24px; height: 24px; }
    .faq-header-content h1 { font-size: 22px; }
}

/* ==========================================================================
   Privacy Policy Page Styles
   ========================================================================== */

/* Summary Box */
.pp-summary {
    background: linear-gradient(135deg, color-mix(in srgb, var(--success) 15%, var(--surface)) 0%, var(--surface) 100%);
    border: 1px solid var(--success);
}

.pp-summary-title {
    color: var(--success);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
}

.pp-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
}

.pp-summary-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    background: var(--surface);
    border-radius: 8px;
}

.pp-summary-check {
    color: var(--success);
    font-weight: bold;
}

.pp-summary-text {
    color: var(--text);
}

/* Section Title */
.pp-section-title {
    color: var(--accent);
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
    font-size: 18px;
    font-weight: 600;
}

/* Section Text */
.pp-text {
    color: var(--text);
    line-height: 1.7;
}

.pp-text-muted {
    color: var(--muted);
    line-height: 1.7;
}

/* Info Block */
.pp-info-block {
    background: var(--surface-2);
    border-radius: 10px;
    padding: 16px;
}

.pp-info-block + .pp-info-block {
    margin-top: 12px;
}

.pp-info-title {
    color: var(--text);
    margin-bottom: 10px;
    font-size: 15px;
    font-weight: 600;
}

/* List Styles */
.pp-list {
    padding-left: 20px;
    margin: 0;
}

.pp-list li {
    color: var(--text);
    line-height: 1.7;
    margin-bottom: 6px;
}

.pp-list-spaced li {
    margin-bottom: 8px;
}

/* Highlight Box */
.pp-highlight {
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 15%, var(--surface)) 0%, var(--surface) 100%);
    border-left: 4px solid var(--accent);
    padding: 16px 20px;
    margin: 16px 0;
    border-radius: 0 10px 10px 0;
    color: var(--text);
}

/* Contact Box */
.pp-contact {
    text-align: center;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
    color: #fff;
}

.pp-contact-title {
    color: #fff;
    margin-bottom: 16px;
    font-size: 18px;
    font-weight: 600;
}

.pp-contact-text {
    color: rgba(255,255,255,0.9);
    margin-bottom: 8px;
}

.pp-contact-email {
    color: #fff;
    font-weight: 600;
}

.pp-contact-small {
    margin-top: 16px;
    font-size: 0.9rem;
    color: rgba(255,255,255,0.8);
}

/* Link Styles */
.pp-link {
    color: var(--accent);
}

.pp-link:hover {
    text-decoration: underline;
}

/* Privacy Policy Responsive */
@media (max-width: 768px) {
    .pp-summary-grid { grid-template-columns: 1fr; }
    .pp-info-block { padding: 12px; }
}

/* ==========================================================================
   Site Footer
   ========================================================================== */

.site-footer {
    padding: 24px 20px;
    text-align: center;
    background: var(--surface);
    border-top: 1px solid var(--border);
    margin-top: 40px;
}

.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.footer-brand {
    margin-bottom: 12px;
}

.footer-brand-name {
    font-size: 15px;
    font-weight: 500;
    color: var(--text);
}

.footer-brand-sub {
    color: var(--muted);
    font-size: 13px;
}

.footer-links {
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 8px;
}

.footer-links a {
    color: var(--muted);
    text-decoration: none;
    transition: color var(--trans);
}

.footer-links a:hover {
    color: var(--accent);
}

.footer-sep {
    margin: 0 8px;
    color: var(--border);
}

.footer-copy {
    font-size: 11px;
    color: var(--muted);
}

@media (max-width: 480px) {
    .site-footer { padding: 20px 16px; margin-top: 24px; }
    .footer-sep { margin: 0 6px; }
}

/* ==================== Header inline overrides moved to theme ==================== */
.user-info { display: flex; align-items: center; gap: 12px; }
@media (max-width: 600px) {
    .user-menu-label { display: none; }
    .user-menu-dropdown { position: fixed; top: 60px; left: 8px; right: 8px; width: auto; min-width: auto; max-height: calc(100vh - 80px); overflow-y: auto; padding: 12px; }
    .user-menu-themes { grid-template-columns: repeat(4, 1fr); gap: 4px; max-height: 160px; }
    .theme-option { padding: 5px 4px; font-size: 9px; }
    .user-menu-langs { justify-content: center; }
    .lang-option { padding: 8px 12px; font-size: 16px; }
}
@media (max-width: 400px) {
    .user-menu-dropdown { left: 4px; right: 4px; padding: 10px; }
    .user-menu-themes { grid-template-columns: repeat(3, 1fr); gap: 3px; max-height: 140px; }
    .theme-option { padding: 4px 3px; font-size: 8px; }
}

/* ============================================================
   aeudnstheme — Material Dashboard PRO design system
   adapted to AEU DNS Control Plane themes (47 dark + light)
   ============================================================
   Tokens extracted (verified) from MDP analytics demo via Playwright.
   Source skill: /root/.claude/skills/material-dashboard-pro-design/
   Target: append to /home/aeudnsc/web/aeu-dns.com/public_html/css/themes.css
   ALL colors via var(--…) so it adapts to every AEU theme.

   How the MDP→AEU mapping works:
   - MDP "info" gradient (cyan)    → AEU --accent (varies per theme)
   - MDP "success"                 → AEU --success (#22c55e default)
   - MDP "warning"                 → AEU --warning (#f59e0b)
   - MDP "danger"                  → AEU --danger  (#ef4444)
   - MDP "primary" (purple)        → AEU --info    (#3b82f6 default — blue accent)
   - MDP "rose" (pink)             → custom AEU rose
   - MDP page bg (#eee light)      → AEU --surface (auto adapts dark/light)
   - MDP card bg (#fff)            → AEU --surface-card (auto)
   - MDP text (#3c4858)            → AEU --text
   - MDP shadows: keep multilayer, opacities tuned (heavier on light themes)

   Naming: every class prefixed `.aeu-` to never collide with existing
   `.card`/`.btn`/`.table`. Usable side-by-side with legacy components.
   ============================================================ */

/* ──────────────────────────────────────────────────────────────
   1. TOKENS (additive — extends :root with aeu-prefixed gradients/shadows)
   ────────────────────────────────────────────────────────────── */
:root {
    /* Motion tokens — extracted from live MD3 React JS bundle 2026-05-07.
       Material Design official easing curves + MD3 signature bouncy spring. */
    --mat-ease-standard:    cubic-bezier(0.4, 0, 0.2, 1);
    --mat-ease-decelerate:  cubic-bezier(0.0, 0, 0.2, 1);
    --mat-ease-accelerate:  cubic-bezier(0.4, 0, 1, 1);
    --mat-ease-sharp:       cubic-bezier(0.4, 0, 0.6, 1);
    --mat-ease-bouncy:      cubic-bezier(.34, 1.61, .7, 1.3);
    --mat-dur-fast:    150ms;
    --mat-dur-base:    200ms;
    --mat-dur-slow:    250ms;
    --mat-dur-slower:  300ms;
    --mat-dur-slowest: 500ms;

    /* Gradient pairs — the MDP signature. Use exact MDP shades for hue
       fidelity, theme-aware luminosity via mix-blend on the tile parent
       if needed. These don't change per theme: tiles stay vivid as accents. */
    --aeu-grad-info-from:    #26c6da;  --aeu-grad-info-to:    #00acc1;
    --aeu-grad-success-from: #66bb6a;  --aeu-grad-success-to: #43a047;
    --aeu-grad-warning-from: #ffa726;  --aeu-grad-warning-to: #fb8c00;
    --aeu-grad-danger-from:  #ef5350;  --aeu-grad-danger-to:  #e53935;
    --aeu-grad-primary-from: #ab47bc;  --aeu-grad-primary-to: #7b1fa2;
    --aeu-grad-rose-from:    #ec407a;  --aeu-grad-rose-to:    #d81b60;
    --aeu-grad-accent-from:  color-mix(in srgb, var(--accent) 75%, white 25%);
    --aeu-grad-accent-to:    var(--accent);

    /* Color-matched halo shadows — verified MDP values.
       The first layer is generic black @0.14, the second is rgba-of-color @0.4.
       On dark themes, the black layer reads weaker; we boost to 0.30. */
    --aeu-shadow-tile-info:    0 4px 20px 0 rgba(0,0,0,0.30), 0 7px 10px -5px rgba(0,172,193,0.45);
    --aeu-shadow-tile-success: 0 4px 20px 0 rgba(0,0,0,0.30), 0 7px 10px -5px rgba(76,175,80,0.45);
    --aeu-shadow-tile-warning: 0 4px 20px 0 rgba(0,0,0,0.30), 0 7px 10px -5px rgba(255,152,0,0.45);
    --aeu-shadow-tile-danger:  0 4px 20px 0 rgba(0,0,0,0.30), 0 7px 10px -5px rgba(244,67,54,0.45);
    --aeu-shadow-tile-primary: 0 4px 20px 0 rgba(0,0,0,0.30), 0 7px 10px -5px rgba(156,39,176,0.45);
    --aeu-shadow-tile-rose:    0 4px 20px 0 rgba(0,0,0,0.30), 0 7px 10px -5px rgba(233,30,99,0.45);
    --aeu-shadow-tile-accent:  0 4px 20px 0 rgba(0,0,0,0.30), 0 7px 10px -5px rgba(var(--blue-rgb,59,130,246), 0.45);

    /* Card shadow — single layer at rest (MDP), heavier on dark for separation */
    --aeu-shadow-card:        0 1px 4px 0 rgba(0,0,0,0.40), 0 2px 12px 0 rgba(0,0,0,0.18);
    --aeu-shadow-card-raised: 0 12px 28px -8px rgba(0,0,0,0.55), 0 4px 20px 0 rgba(0,0,0,0.20), 0 8px 10px -5px rgba(0,0,0,0.28);

    /* Sidebar drop shadow — verified MDP */
    --aeu-shadow-sidebar:
        0 10px 30px -12px rgba(0,0,0,0.55),
        0 4px  25px 0    rgba(0,0,0,0.18),
        0 8px  10px -5px rgba(0,0,0,0.28);

    /* Active sidebar item — color-matched, keyed to --accent for per-theme brand */
    --aeu-shadow-active:
        0 12px 20px -10px rgba(var(--blue-rgb,59,130,246), 0.32),
        0 4px  20px 0    rgba(0,0,0,0.18),
        0 7px   8px -5px rgba(var(--blue-rgb,59,130,246), 0.20);

    /* Button color-matched shadows (verified MDP, smaller offsets) */
    --aeu-shadow-btn-info:    0 2px 2px 0 rgba(0,172,193,0.20),  0 3px 1px -2px rgba(0,172,193,0.28),  0 1px 5px 0 rgba(0,172,193,0.18);
    --aeu-shadow-btn-success: 0 2px 2px 0 rgba(76,175,80,0.20),  0 3px 1px -2px rgba(76,175,80,0.28),  0 1px 5px 0 rgba(76,175,80,0.18);
    --aeu-shadow-btn-warning: 0 2px 2px 0 rgba(255,152,0,0.20),  0 3px 1px -2px rgba(255,152,0,0.28),  0 1px 5px 0 rgba(255,152,0,0.18);
    --aeu-shadow-btn-danger:  0 2px 2px 0 rgba(244,67,54,0.20),  0 3px 1px -2px rgba(244,67,54,0.28),  0 1px 5px 0 rgba(244,67,54,0.18);
    --aeu-shadow-btn-primary: 0 2px 2px 0 rgba(156,39,176,0.20), 0 3px 1px -2px rgba(156,39,176,0.28), 0 1px 5px 0 rgba(156,39,176,0.18);
    --aeu-shadow-btn-rose:    0 2px 2px 0 rgba(233,30,99,0.20),  0 3px 1px -2px rgba(233,30,99,0.28),  0 1px 5px 0 rgba(233,30,99,0.18);
    --aeu-shadow-btn-accent:  0 2px 2px 0 rgba(var(--blue-rgb,59,130,246), 0.20), 0 3px 1px -2px rgba(var(--blue-rgb,59,130,246), 0.28), 0 1px 5px 0 rgba(var(--blue-rgb,59,130,246), 0.18);

    /* Layout (verified MDP) */
    --aeu-card-radius:   10px;   /* slightly softer than MDP 6px to match AEU --radius-md */
    --aeu-tile-radius:   3px;    /* MDP exact — contrast with card radius is intentional */
    --aeu-btn-radius:    3px;    /* MDP exact */
    --aeu-pill-radius:   30px;
    --aeu-content-pad:   30px;
}

/* ──────────────────────────────────────────────────────────────
   2. PAGE / LAYOUT — adapt the MDP-style page chrome to AEU structure
   ────────────────────────────────────────────────────────────── */
.aeu-page-head { margin: 0 0 20px; }
.aeu-page-head .page-title {
    font-size: 24px;
    font-weight: 600;          /* AEU uses bolder titles than MDP — 600 not 300 */
    color: var(--text);
    margin: 0 0 4px;
    letter-spacing: -0.2px;
}
.aeu-page-head .page-subtitle {
    color: var(--muted);
    font-size: 14px;
    margin: 0;
}

/* ──────────────────────────────────────────────────────────────
   3. CARD (the foundation)
   ────────────────────────────────────────────────────────────── */
.aeu-card {
    background: var(--surface-card);
    border-radius: var(--aeu-card-radius);
    box-shadow: var(--aeu-shadow-card);
    margin-top: 30px;          /* room above for the lifted tile */
    margin-bottom: 24px;
    border: 1px solid var(--border);
    color: var(--text);
    position: relative;
    overflow: visible;          /* CRITICAL — tile must protrude */
    transition: transform 180ms ease, box-shadow 180ms ease;
}
.aeu-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--aeu-shadow-card-raised);
}
.aeu-card-body { padding: 16px 20px; }
.aeu-card-body--snug { padding: 0 20px; }
.aeu-card-footer {
    padding: 12px 15px;
    border-top: 1px solid var(--border);
    margin: 0 15px;
    color: var(--muted);
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.aeu-card-footer .icon { width: 16px; height: 16px; }

/* Card with lifted header tile — used for section/form/table cards */
.aeu-section-card-header {
    padding: 0 20px;
}
.aeu-section-card-header::after { content: ''; display: block; clear: both; }

/* ──────────────────────────────────────────────────────────────
   4. LIFTED TILE — the signature element. 86×86 stat / 60×60 section.
      Float left, lifted -20px above the card.
   ────────────────────────────────────────────────────────────── */
.aeu-tile {
    width: 56px; height: 56px;
    padding: 10px;
    margin: -16px 14px 0 -16px;   /* lift -16 top, -16 left → flush to card's left corner (cancels card's 16px padding-left) */
    border-radius: var(--aeu-tile-radius);
    color: #fff;
    display: inline-flex;
    align-items: center; justify-content: center;
    float: left;
}
.aeu-tile .icon, .aeu-tile svg { width: 20px; height: 20px; color: #fff; fill: currentColor; }
.aeu-tile-info    { background: linear-gradient(60deg, var(--aeu-grad-info-from),    var(--aeu-grad-info-to));    box-shadow: var(--aeu-shadow-tile-info); }
.aeu-tile-success { background: linear-gradient(60deg, var(--aeu-grad-success-from), var(--aeu-grad-success-to)); box-shadow: var(--aeu-shadow-tile-success); }
.aeu-tile-warning { background: linear-gradient(60deg, var(--aeu-grad-warning-from), var(--aeu-grad-warning-to)); box-shadow: var(--aeu-shadow-tile-warning); }
.aeu-tile-danger  { background: linear-gradient(60deg, var(--aeu-grad-danger-from),  var(--aeu-grad-danger-to));  box-shadow: var(--aeu-shadow-tile-danger); }
.aeu-tile-primary { background: linear-gradient(60deg, var(--aeu-grad-primary-from), var(--aeu-grad-primary-to)); box-shadow: var(--aeu-shadow-tile-primary); }
.aeu-tile-rose    { background: linear-gradient(60deg, var(--aeu-grad-rose-from),    var(--aeu-grad-rose-to));    box-shadow: var(--aeu-shadow-tile-rose); }
.aeu-tile-accent  { background: linear-gradient(60deg, var(--aeu-grad-accent-from),  var(--aeu-grad-accent-to));  box-shadow: var(--aeu-shadow-tile-accent); }

/* Smaller variant for section headers (40×40) */
.aeu-section-tile {
    width: 40px; height: 40px;
    padding: 8px;
    margin: -14px 12px 0 -20px;   /* -20 cancels .aeu-section-card-header padding-left → tile flush to corner */
    border-radius: var(--aeu-tile-radius);
    color: #fff;
    display: inline-flex;
    align-items: center; justify-content: center;
    float: left;
}
.aeu-section-tile .icon, .aeu-section-tile svg { width: 14px; height: 14px; color: #fff; fill: currentColor; }
.aeu-section-tile.aeu-tile-info,
.aeu-section-tile.aeu-tile-success,
.aeu-section-tile.aeu-tile-warning,
.aeu-section-tile.aeu-tile-danger,
.aeu-section-tile.aeu-tile-primary,
.aeu-section-tile.aeu-tile-rose,
.aeu-section-tile.aeu-tile-accent {
    /* Inherit gradient/shadow from .aeu-tile-* — already set */
}

.aeu-section-title {
    padding: 10px 0 0;
    font-size: 15px;
    font-weight: 500;
    color: var(--text);
    line-height: 1.3;
    margin: 0;
}

/* ──────────────────────────────────────────────────────────────
   5. STAT CARD — number on right, lifted icon tile on left
   ────────────────────────────────────────────────────────────── */
.aeu-stat-card { padding: 8px 16px 0; }
.aeu-stat-card::after { content: ''; display: block; clear: both; }
.aeu-stat-text { text-align: right; padding-top: 0; min-height: 40px; }
/* Card-footer inside stat-card: divider line sits right under the tile, NOT at the bottom of a tall card */
.aeu-stat-card .aeu-card-footer { padding: 6px 0 8px; margin: 6px 0 0; }
.aeu-stat-label {
    font-size: 12px;
    color: var(--muted);
    font-weight: 400;
    margin: 0 0 3px;
}
.aeu-stat-value {
    font-size: 18px;
    font-weight: 400;
    color: var(--text);
    line-height: 1.3;
    margin: 0;
}
.aeu-stat-value small { font-size: 12px; color: var(--muted); margin-left: 3px; font-weight: 400; }

/* ──────────────────────────────────────────────────────────────
   6. BUTTONS (variants + sizes + shapes — all 7 colors × 4 sizes × 4 shapes)
   ────────────────────────────────────────────────────────────── */
.aeu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 12px 30px;
    border: none;
    border-radius: var(--aeu-btn-radius);
    background: var(--muted);
    color: #fff;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1.4;
    cursor: pointer;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.20),
                0 3px 1px -2px rgba(0,0,0,0.28),
                0 1px 5px 0 rgba(0,0,0,0.18);
    transition: box-shadow 0.4s, background-color 0.4s, transform 180ms;
    user-select: none;
    text-decoration: none;
}
.aeu-btn:hover { transform: translateY(-1px); }
.aeu-btn:disabled, .aeu-btn[disabled] { opacity: 0.5; pointer-events: none; }

/* Color variants */
.aeu-btn-info    { background: #00acc1; box-shadow: var(--aeu-shadow-btn-info); }
.aeu-btn-success { background: var(--success); box-shadow: var(--aeu-shadow-btn-success); }
.aeu-btn-warning { background: var(--warning); color: var(--on-warning); box-shadow: var(--aeu-shadow-btn-warning); }
.aeu-btn-danger  { background: var(--danger); box-shadow: var(--aeu-shadow-btn-danger); }
.aeu-btn-primary { background: #9c27b0; box-shadow: var(--aeu-shadow-btn-primary); }
.aeu-btn-rose    { background: #e91e63; box-shadow: var(--aeu-shadow-btn-rose); }
.aeu-btn-accent  { background: var(--accent); color: var(--on-accent); box-shadow: var(--aeu-shadow-btn-accent); }

.aeu-btn-info:hover    { background: #008b9a; }
.aeu-btn-success:hover { background: var(--success-strong); }
.aeu-btn-warning:hover { background: var(--warning-strong); }
.aeu-btn-danger:hover  { background: var(--danger-strong); }
.aeu-btn-primary:hover { background: #7b1fa2; }
.aeu-btn-rose:hover    { background: #c2185b; }
.aeu-btn-accent:hover  { background: var(--accent-active, var(--accent)); }

/* Sizes */
.aeu-btn-sm { padding: 6.5px 20px; font-size: 11px; border-radius: 3.2px; }
.aeu-btn-lg { padding: 18px 36px;  font-size: 14px; border-radius: 3.2px; }

/* Shapes */
.aeu-btn-round { border-radius: var(--aeu-pill-radius); }
.aeu-btn-icon  { width: 41px; height: 41px; padding: 12px; border-radius: var(--aeu-pill-radius); }
.aeu-btn-icon .icon, .aeu-btn-icon svg { width: 20px; height: 20px; }

/* Outlined / simple (no shadow, transparent bg) */
.aeu-btn-outline {
    background: transparent;
    border: 1px solid currentColor;
    box-shadow: none;
}
.aeu-btn-outline.aeu-btn-info    { color: #00acc1; }
.aeu-btn-outline.aeu-btn-success { color: var(--success); }
.aeu-btn-outline.aeu-btn-danger  { color: var(--danger); }
.aeu-btn-simple {
    background: transparent;
    box-shadow: none;
    color: var(--text);
}
.aeu-btn-simple:hover { background: rgba(127,127,127,0.12); }

/* Topbar icon button (40×40 round, transparent at rest) */
.aeu-icon-btn {
    width: 40px; height: 40px;
    border: none; background: transparent;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--muted);
    cursor: pointer;
    position: relative;
    transition: background 0.2s, color 0.2s;
}
.aeu-icon-btn:hover { background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); }
.aeu-icon-btn .icon, .aeu-icon-btn svg { width: 22px; height: 22px; }

/* Notification badge dot */
.aeu-badge-dot {
    position: absolute; top: 2px; right: 2px;
    background: var(--danger);
    color: #fff;
    border-radius: var(--aeu-pill-radius);
    font-size: 9px; font-weight: 700;
    min-width: 16px; height: 16px;
    padding: 0 4px;
    display: flex; align-items: center; justify-content: center;
}

/* ──────────────────────────────────────────────────────────────
   7. BADGES / CHIPS (pill shape, 6 colors)
   ────────────────────────────────────────────────────────────── */
.aeu-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: var(--aeu-pill-radius);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #fff;
    line-height: 1;
}
.aeu-badge-info    { background: #00acc1; }
.aeu-badge-success { background: var(--success); color: var(--on-success); }
.aeu-badge-warning { background: var(--warning); color: var(--on-warning); }
.aeu-badge-danger  { background: var(--danger); color: var(--on-danger); }
.aeu-badge-primary { background: #9c27b0; }
.aeu-badge-rose    { background: #e91e63; }
.aeu-badge-accent  { background: var(--accent); color: var(--on-accent); }
.aeu-badge-muted   { background: var(--muted); color: var(--surface); }
.aeu-badge-soft.aeu-badge-success { background: color-mix(in srgb, var(--success) 18%, transparent); color: var(--success-strong); }
.aeu-badge-soft.aeu-badge-warning { background: color-mix(in srgb, var(--warning) 18%, transparent); color: var(--warning-strong); }
.aeu-badge-soft.aeu-badge-danger  { background: color-mix(in srgb, var(--danger) 18%, transparent);  color: var(--danger-strong); }
.aeu-badge-soft.aeu-badge-info    { background: color-mix(in srgb, var(--info) 18%, transparent);    color: var(--info-strong); }

/* ──────────────────────────────────────────────────────────────
   8. ALERTS (icon + body + dismiss; 4 variants with gradient bg)
   ────────────────────────────────────────────────────────────── */
.aeu-alert {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-radius: var(--aeu-card-radius);
    color: #fff;
    box-shadow: var(--aeu-shadow-card);
    margin-bottom: 16px;
}
.aeu-alert .icon, .aeu-alert > svg { width: 24px; height: 24px; flex-shrink: 0; }
.aeu-alert-body { flex: 1; font-size: 14px; }
.aeu-alert-close {
    background: transparent; border: none; color: #fff;
    font-size: 20px; line-height: 1; cursor: pointer; opacity: 0.85;
    padding: 4px 8px;
}
.aeu-alert-close:hover { opacity: 1; }
.aeu-alert-success { background: linear-gradient(60deg, var(--aeu-grad-success-from), var(--aeu-grad-success-to)); }
.aeu-alert-info    { background: linear-gradient(60deg, var(--aeu-grad-info-from),    var(--aeu-grad-info-to)); }
.aeu-alert-warning { background: linear-gradient(60deg, var(--aeu-grad-warning-from), var(--aeu-grad-warning-to)); color: var(--on-warning); }
.aeu-alert-warning .aeu-alert-close { color: var(--on-warning); }
.aeu-alert-danger  { background: linear-gradient(60deg, var(--aeu-grad-danger-from),  var(--aeu-grad-danger-to)); }

/* ──────────────────────────────────────────────────────────────
   9. TABLE (uppercase header, hover row, integrates inside .aeu-card)
   ────────────────────────────────────────────────────────────── */
.aeu-table {
    width: 100%;
    border-collapse: collapse;
}
.aeu-table thead th {
    padding: 12px 8px;
    text-align: left;
    font-size: 12px;
    font-weight: 500;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.aeu-table thead th:first-child,
.aeu-table tbody td:first-child { padding-left: 20px; }
.aeu-table thead th:last-child,
.aeu-table tbody td:last-child  { padding-right: 20px; }
.aeu-table tbody td {
    padding: 12px 8px;
    font-size: 14px;
    color: var(--text);
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.aeu-table tbody tr { transition: background 180ms; }
.aeu-table tbody tr:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
.aeu-table tbody tr:last-child td { border-bottom: 0; }
.aeu-table .aeu-table-actions { display: flex; gap: 6px; align-items: center; }

/* ──────────────────────────────────────────────────────────────
   10. FORMS — material floating-label inputs
   ────────────────────────────────────────────────────────────── */
.aeu-input-group {
    position: relative;
    padding-top: 27px;
    margin-bottom: 17px;
}
.aeu-input-group label {
    position: absolute;
    top: 27px; left: 0;
    font-size: 14px;
    font-weight: 400;
    color: var(--muted);
    pointer-events: none;
    transition: transform 0.3s, font-size 0.3s, color 0.3s;
    transform-origin: left top;
}
.aeu-input-group input,
.aeu-input-group textarea,
.aeu-input-group select {
    width: 100%;
    border: none;
    border-bottom: 1px solid var(--border);
    background: transparent;
    padding: 7px 0;
    font-size: 14px;
    color: var(--text);
    outline: none;
    font-family: inherit;
    transition: border-color 0.3s;
}
.aeu-input-group input:focus,
.aeu-input-group input:not(:placeholder-shown),
.aeu-input-group textarea:focus,
.aeu-input-group textarea:not(:placeholder-shown) {
    border-bottom: 2px solid var(--accent);
}
.aeu-input-group input:focus ~ label,
.aeu-input-group input:not(:placeholder-shown) ~ label,
.aeu-input-group textarea:focus ~ label,
.aeu-input-group textarea:not(:placeholder-shown) ~ label {
    transform: translateY(-22px) scale(0.85);
    color: var(--accent);
}
.aeu-input-group input:disabled { color: var(--muted); border-bottom-style: dashed; }
.aeu-input-group input[readonly] { color: var(--muted); cursor: not-allowed; }

/* SELECT fields can't use the floating-label trick (no placeholder).
   Force the label into "floated" position permanently.
   Always wrap a <select> in .aeu-input-group AND add .aeu-input-group-select. */
.aeu-input-group.aeu-input-group-select label {
    transform: translateY(-22px) scale(0.85);
    color: var(--accent);
}
.aeu-input-group.aeu-input-group-select select {
    padding-top: 4px;
}

/* Form button row at the bottom of a form */
.aeu-form-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}

/* Toggle switches + their labels arranged in a horizontal row */
.aeu-toggles-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 16px 0 8px;
}
.aeu-toggle-label {
    color: var(--text);
    font-size: 13px;
    margin-right: 20px;
}

/* Inline radio group (e.g. "Apply to: All / By flag") */
.aeu-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 4px 0 16px;
}
.aeu-radio-group label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text);
    font-size: 13px;
    cursor: pointer;
}
.aeu-radio-group input[type="radio"] { margin: 0; accent-color: var(--accent); }

/* Small uppercase muted label sitting above a field group */
.aeu-input-label {
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin: 12px 0 4px;
    display: block;
}

/* Help text shown below an input — tighter than .aeu-stat-label */
.aeu-field-help {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.4;
    margin: -10px 0 14px;
    display: block;
}

/* Muted secondary text helper (inline) */
.aeu-muted { color: var(--muted); font-size: 12px; }

/* Checkbox + radio + switch (material) */
.aeu-switch {
    position: relative;
    display: inline-block;
    width: 36px; height: 20px;
}
.aeu-switch input { opacity: 0; width: 0; height: 0; }
.aeu-switch-slider {
    position: absolute; cursor: pointer; inset: 0;
    background: var(--border);
    border-radius: 20px; transition: 0.4s;
}
.aeu-switch-slider::before {
    content: ''; position: absolute;
    height: 16px; width: 16px;
    left: 2px; bottom: 2px;
    background: var(--surface-card);
    border-radius: 50%; transition: 0.4s;
}
.aeu-switch input:checked + .aeu-switch-slider { background: var(--accent); }
.aeu-switch input:checked + .aeu-switch-slider::before { transform: translateX(16px); }

.aeu-checkbox {
    appearance: none; -webkit-appearance: none;
    width: 18px; height: 18px;
    border: 2px solid var(--border);
    border-radius: 3px;
    background: transparent;
    cursor: pointer;
    position: relative;
    vertical-align: middle;
    transition: border-color 0.2s, background 0.2s;
}
.aeu-checkbox:checked { background: var(--accent); border-color: var(--accent); }
.aeu-checkbox:checked::after {
    content: ''; position: absolute;
    left: 4px; top: 0;
    width: 5px; height: 10px;
    border: solid var(--on-accent);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* ──────────────────────────────────────────────────────────────
   11. SIDEBAR (MDP-style: dark with photo overlay OR brand gradient)
   ────────────────────────────────────────────────────────────── */
.aeu-sidebar {
    position: fixed;
    top: 16px; left: 16px; bottom: 16px;
    width: 260px;
    background: #1f1f1f;
    border-radius: var(--aeu-card-radius);
    box-shadow: var(--aeu-shadow-sidebar);
    z-index: 100;
    overflow: hidden;
    color: #fff;
    display: flex;
    flex-direction: column;
}
/* Photo overlay layer (optional). Set --aeu-sidebar-photo: url(...) on the element to enable. */
.aeu-sidebar.aeu-sidebar-photo::before {
    content: '';
    position: absolute; inset: 0;
    background-image: var(--aeu-sidebar-photo);
    background-size: cover;
    background-position: center;
    z-index: 0;
}
.aeu-sidebar.aeu-sidebar-photo::after {
    content: '';
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.7);
    z-index: 1;
}
.aeu-sidebar > * { position: relative; z-index: 2; }

.aeu-brand {
    padding: 15px 20px;
    border-bottom: 1px solid rgba(180,180,180,0.3);
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 10px;
}
.aeu-brand-logo { width: 32px; height: 32px; }
.aeu-brand-name {
    font-size: 17px; font-weight: 500;
    letter-spacing: 0.4px;
    color: #fff;
    text-transform: uppercase;
}
.aeu-sidebar-user {
    padding: 10px 15px 15px;
    border-bottom: 1px solid rgba(180,180,180,0.3);
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 10px;
}
.aeu-avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: linear-gradient(60deg, var(--aeu-grad-accent-from), var(--aeu-grad-accent-to));
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 600; font-size: 14px;
}
.aeu-avatar-lg { width: 64px; height: 64px; font-size: 24px; }
.aeu-avatar-sm { width: 28px; height: 28px; font-size: 11px; }

.aeu-nav { padding: 0 15px; flex: 1; overflow-y: auto; }
.aeu-nav-item {
    display: flex; align-items: center; gap: 14px;
    padding: 10px 15px;
    margin: 4px 0;
    border-radius: var(--aeu-tile-radius);
    color: rgba(255,255,255,0.85);
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
    transition: background 0.3s, box-shadow 0.3s;
    cursor: pointer;
}
.aeu-nav-item:hover { background: rgba(200,200,200,0.2); color: #fff; }
.aeu-nav-item .icon, .aeu-nav-item svg { width: 22px; height: 22px; }
.aeu-nav-item.aeu-nav-active {
    background: var(--accent);
    color: var(--on-accent);
    box-shadow: var(--aeu-shadow-active);
}

/* ──────────────────────────────────────────────────────────────
   12. TOPBAR
   ────────────────────────────────────────────────────────────── */
.aeu-topbar {
    height: 70px;
    padding: 10px 30px;
    background: transparent;
    color: var(--text);
    display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; z-index: 50;
}
.aeu-topbar-title { font-size: 18px; font-weight: 400; color: var(--text); }
.aeu-topbar-actions { display: flex; gap: 4px; align-items: center; }
.aeu-search-box {
    border: none;
    background: color-mix(in srgb, var(--text) 5%, transparent);
    border-bottom: 1px solid var(--border);
    outline: none;
    padding: 6px 12px;
    font-family: inherit; font-size: 14px;
    color: var(--text);
    width: 180px;
    border-radius: 3px;
}
.aeu-search-box:focus { border-bottom-color: var(--accent); }

/* ──────────────────────────────────────────────────────────────
   13. MODAL / DIALOG
   ────────────────────────────────────────────────────────────── */
.aeu-modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.5);
    display: flex; align-items: center; justify-content: center;
    z-index: 1000;
    animation: aeu-fade-in 200ms ease;
}
.aeu-modal {
    background: var(--surface-card);
    border-radius: var(--aeu-card-radius);
    box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
    min-width: 380px;
    max-width: 92vw;
    max-height: 92vh;
    overflow: hidden;
    color: var(--text);
    animation: aeu-zoom-in 200ms ease;
    display: flex; flex-direction: column;
}
.aeu-modal-header { padding: 18px 24px 8px; display: flex; justify-content: space-between; align-items: center; }
.aeu-modal-header h5 { margin: 0; font-size: 18px; font-weight: 500; color: var(--text); }
.aeu-modal-body { padding: 8px 24px 16px; overflow-y: auto; }
.aeu-modal-footer { padding: 8px 16px 16px; display: flex; justify-content: flex-end; gap: 8px; }
@keyframes aeu-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes aeu-zoom-in { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } }

/* ──────────────────────────────────────────────────────────────
   14. DROPDOWN MENU
   ────────────────────────────────────────────────────────────── */
.aeu-dropdown { position: relative; display: inline-block; }
.aeu-dropdown-menu {
    position: absolute; top: 100%; right: 0;
    min-width: 180px;
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: var(--aeu-card-radius);
    box-shadow: 0 13px 24px -11px rgba(0,0,0,0.30), 0 5px 20px 0 rgba(0,0,0,0.10);
    padding: 6px 0;
    z-index: 200;
    display: none;
}
.aeu-dropdown.aeu-dropdown-open .aeu-dropdown-menu { display: block; }
.aeu-dropdown-item {
    display: block;
    padding: 8px 16px;
    color: var(--text);
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
}
.aeu-dropdown-item:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.aeu-dropdown-divider { border-top: 1px solid var(--border); margin: 6px 0; }

/* ──────────────────────────────────────────────────────────────
   15. TOOLTIP
   ────────────────────────────────────────────────────────────── */
.aeu-tooltip { position: relative; display: inline-block; }
.aeu-tooltip[data-tip]::after {
    content: attr(data-tip);
    position: absolute; bottom: calc(100% + 6px); left: 50%;
    transform: translateX(-50%);
    background: var(--text);
    color: var(--surface);
    padding: 4px 8px;
    border-radius: 3px;
    font-size: 11px; white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 180ms;
}
.aeu-tooltip:hover::after { opacity: 1; }

/* ──────────────────────────────────────────────────────────────
   16. TABS
   ────────────────────────────────────────────────────────────── */
.aeu-tabs {
    display: flex; gap: 4px;
    border-bottom: 1px solid var(--border);
    padding: 0 16px;
}
.aeu-tab {
    padding: 12px 20px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--muted);
    font-size: 14px; font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: color 180ms, border-color 180ms;
}
.aeu-tab:hover { color: var(--text); }
.aeu-tab.aeu-tab-active { color: var(--accent); border-bottom-color: var(--accent); }

/* ──────────────────────────────────────────────────────────────
   17. BREADCRUMB
   ────────────────────────────────────────────────────────────── */
.aeu-breadcrumb {
    display: flex; gap: 4px; align-items: center;
    font-size: 13px; color: var(--muted);
    margin: 0 0 12px;
    list-style: none; padding: 0;
}
.aeu-breadcrumb li:not(:last-child)::after {
    content: '/'; color: var(--muted); margin: 0 6px;
}
.aeu-breadcrumb a { color: var(--muted); text-decoration: none; }
.aeu-breadcrumb a:hover { color: var(--accent); }
.aeu-breadcrumb li:last-child { color: var(--text); font-weight: 500; }

/* ──────────────────────────────────────────────────────────────
   18. PAGINATION
   ────────────────────────────────────────────────────────────── */
.aeu-pagination {
    display: flex; gap: 4px;
    list-style: none; padding: 0; margin: 16px 0;
    align-items: center;
}
.aeu-pagination li a, .aeu-pagination li span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 36px; height: 36px;
    padding: 0 10px;
    border-radius: var(--aeu-pill-radius);
    color: var(--text);
    text-decoration: none;
    font-size: 13px;
    transition: background 180ms;
}
.aeu-pagination li:not(.aeu-pagination-disabled):not(.aeu-pagination-active) a:hover {
    background: color-mix(in srgb, var(--text) 8%, transparent);
}
.aeu-pagination li.aeu-pagination-active a, .aeu-pagination li.aeu-pagination-active span {
    background: var(--accent);
    color: var(--on-accent);
    box-shadow: var(--aeu-shadow-btn-accent);
}
.aeu-pagination li.aeu-pagination-disabled a, .aeu-pagination li.aeu-pagination-disabled span {
    color: var(--muted); pointer-events: none; opacity: 0.5;
}

/* ──────────────────────────────────────────────────────────────
   19. PROGRESS (linear + circular)
   ────────────────────────────────────────────────────────────── */
.aeu-progress {
    width: 100%; height: 6px;
    background: var(--border);
    border-radius: var(--aeu-pill-radius);
    overflow: hidden;
}
.aeu-progress-bar {
    height: 100%;
    background: linear-gradient(60deg, var(--aeu-grad-accent-from), var(--aeu-grad-accent-to));
    transition: width 360ms ease;
}
.aeu-progress-bar.aeu-progress-success { background: linear-gradient(60deg, var(--aeu-grad-success-from), var(--aeu-grad-success-to)); }
.aeu-progress-bar.aeu-progress-warning { background: linear-gradient(60deg, var(--aeu-grad-warning-from), var(--aeu-grad-warning-to)); }
.aeu-progress-bar.aeu-progress-danger  { background: linear-gradient(60deg, var(--aeu-grad-danger-from),  var(--aeu-grad-danger-to)); }

.aeu-spinner {
    width: 24px; height: 24px;
    border: 3px solid color-mix(in srgb, var(--text) 12%, transparent);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: aeu-spin 800ms linear infinite;
    display: inline-block;
}
@keyframes aeu-spin { to { transform: rotate(360deg); } }

/* ──────────────────────────────────────────────────────────────
   20. SKELETON LOADER (shimmer)
   ────────────────────────────────────────────────────────────── */
.aeu-skeleton {
    display: block;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--text) 6%, transparent) 0%,
        color-mix(in srgb, var(--text) 12%, transparent) 50%,
        color-mix(in srgb, var(--text) 6%, transparent) 100%);
    background-size: 200% 100%;
    animation: aeu-shimmer 1.4s ease infinite;
    border-radius: 3px;
    height: 12px;
    width: 100%;
    margin: 6px 0;
}
.aeu-skeleton-circle { border-radius: 50%; }
.aeu-skeleton-line-lg { height: 22px; }
@keyframes aeu-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ──────────────────────────────────────────────────────────────
   21. EMPTY STATE
   ────────────────────────────────────────────────────────────── */
.aeu-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--muted);
}
.aeu-empty-icon {
    width: 64px; height: 64px;
    color: var(--muted);
    margin: 0 auto 16px;
    opacity: 0.5;
}
.aeu-empty-title { font-size: 16px; font-weight: 500; color: var(--text); margin: 0 0 6px; }
.aeu-empty-desc  { font-size: 13px; margin: 0 0 16px; }

/* ──────────────────────────────────────────────────────────────
   22. SIGN-IN CARD (MDP style — gradient header tile + form below)
   ────────────────────────────────────────────────────────────── */
.aeu-signin-card {
    max-width: 380px;
    margin: 60px auto;
}
.aeu-signin-header {
    margin: -40px 20px 0;
    padding: 28px 22px;
    border-radius: var(--aeu-tile-radius);
    text-align: center;
    color: #fff;
}
.aeu-signin-header h3 { color: #fff; font-weight: 400; margin: 0; }
.aeu-signin-header.aeu-tile-info,
.aeu-signin-header.aeu-tile-success,
.aeu-signin-header.aeu-tile-warning,
.aeu-signin-header.aeu-tile-danger,
.aeu-signin-header.aeu-tile-primary,
.aeu-signin-header.aeu-tile-rose,
.aeu-signin-header.aeu-tile-accent {
    /* Inherits gradient/shadow from .aeu-tile-* */
}

/* ──────────────────────────────────────────────────────────────
   23. STATUS DOT (online/offline/warning) — already exists in legacy CSS
       but adding aeu-prefixed for parity
   ────────────────────────────────────────────────────────────── */
.aeu-status-dot {
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--muted);
    vertical-align: middle;
    margin-right: 6px;
}
.aeu-status-dot.aeu-status-online  { background: var(--success); box-shadow: 0 0 6px var(--success); }
.aeu-status-dot.aeu-status-offline { background: var(--danger);  box-shadow: 0 0 6px var(--danger); }
.aeu-status-dot.aeu-status-warning { background: var(--warning); box-shadow: 0 0 6px var(--warning); }

/* ──────────────────────────────────────────────────────────────
   24. GRID HELPERS (responsive 4/3/2/1 columns)
   ────────────────────────────────────────────────────────────── */
.aeu-grid { display: grid; gap: 30px; }
.aeu-grid-4 { grid-template-columns: repeat(4, 1fr); }
.aeu-grid-3 { grid-template-columns: repeat(3, 1fr); }
.aeu-grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1200px) {
    .aeu-grid-4 { grid-template-columns: repeat(2, 1fr); }
    .aeu-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .aeu-grid-4, .aeu-grid-3, .aeu-grid-2 { grid-template-columns: 1fr; }
}

/* ──────────────────────────────────────────────────────────────
   25. CHART CARD (lifted gradient panel containing chart at top)
   ────────────────────────────────────────────────────────────── */
.aeu-chart-card .aeu-chart-tile {
    margin: -20px 15px 0;
    height: 140px;
    padding: 8px;
    border-radius: var(--aeu-tile-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.aeu-chart-tile.aeu-tile-info,
.aeu-chart-tile.aeu-tile-success,
.aeu-chart-tile.aeu-tile-warning,
.aeu-chart-tile.aeu-tile-danger,
.aeu-chart-tile.aeu-tile-primary,
.aeu-chart-tile.aeu-tile-rose,
.aeu-chart-tile.aeu-tile-accent {
    /* Inherits gradient/shadow from .aeu-tile-* */
}
.aeu-chart-tile canvas, .aeu-chart-tile svg {
    width: 100%; height: 100%;
}
.aeu-chart-card .aeu-card-body { padding-top: 16px; }
.aeu-chart-card h4 { margin: 0 0 4px; font-size: 16px; font-weight: 500; }
.aeu-chart-card .aeu-chart-desc { color: var(--muted); font-size: 13px; margin: 0; }

/* ──────────────────────────────────────────────────────────────
   26. RESPONSIVE OVERRIDES (mobile sidebar collapse)
   ────────────────────────────────────────────────────────────── */
@media (max-width: 992px) {
    .aeu-sidebar {
        transform: translateX(-110%);
        transition: transform 300ms ease;
    }
    body.aeu-sidebar-open .aeu-sidebar { transform: translateX(0); }
    .aeu-main { margin-left: 0; }
}
@media (max-width: 480px) {
    .aeu-tile { width: 48px; height: 48px; padding: 8px; }
    .aeu-tile .icon, .aeu-tile svg { width: 18px; height: 18px; }
    .aeu-stat-value { font-size: 16px; }
    .aeu-card { margin-top: 20px; }
}

/* ──────────────────────────────────────────────────────────────
   27. GRID-5 (5 cards in a row — for cases like stats with 5 KPIs)
   ────────────────────────────────────────────────────────────── */
.aeu-grid-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1400px) {
    .aeu-grid-5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 992px) {
    .aeu-grid-5 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .aeu-grid-5 { grid-template-columns: 1fr; }
}

/* ──────────────────────────────────────────────────────────────
   28. ACTION ROW (button left + help text inline right — replaces
       the table-as-action-list anti-pattern)
   ────────────────────────────────────────────────────────────── */
.aeu-action-row {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}
.aeu-action-row:last-child { border-bottom: 0; }
.aeu-action-row > form { margin: 0; flex-shrink: 0; }
.aeu-action-row-help {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
    flex: 1;
}
@media (max-width: 600px) {
    .aeu-action-row { flex-direction: column; align-items: flex-start; gap: 8px; }
    .aeu-action-row-help { font-size: 12px; }
}

/* ──────────────────────────────────────────────────────────────
   29. MOTION — hover scale, press scale, dropdown chevron rotate.
       Apply .aeu-card-interactive / .aeu-stat-card-interactive on
       cards meant to feel clickable. NOT auto-applied to every card.
   ────────────────────────────────────────────────────────────── */
.aeu-card-interactive,
.aeu-stat-card-interactive,
.aeu-btn:not(:disabled),
.aeu-icon-btn:not(:disabled),
.aeu-nav-item {
    transition: transform var(--mat-dur-base) var(--mat-ease-bouncy),
                box-shadow var(--mat-dur-base) var(--mat-ease-standard),
                background-color var(--mat-dur-base) var(--mat-ease-standard),
                color var(--mat-dur-fast) ease-in;
}
.aeu-card-interactive:hover,
.aeu-stat-card-interactive:hover { transform: scale(1.02); }
.aeu-btn:not(:disabled):active   { transform: scale(0.94); }
.aeu-icon-btn:not(:disabled):active { transform: scale(0.92); }
.aeu-dropdown-toggle .icon { transition: transform var(--mat-dur-base) var(--mat-ease-standard); }
.aeu-dropdown-open > .aeu-dropdown-toggle .icon { transform: rotate(180deg); }

/* ──────────────────────────────────────────────────────────────
   30. GLASS TOPBAR — sticky + backdrop-filter blur(12px)
       Add `.aeu-topbar-glass` next to `.aeu-topbar` to enable.
   ────────────────────────────────────────────────────────────── */
.aeu-topbar-glass {
    position: sticky;
    top: 0;
    z-index: 1100;
    background: color-mix(in srgb, var(--surface) 70%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
}

/* ──────────────────────────────────────────────────────────────
   31. MINI SIDENAV — collapsed icon-only variant (96px wide)
       Toggle with `.aeu-sidebar-mini` on the sidebar element.
   ────────────────────────────────────────────────────────────── */
.aeu-sidebar { transition: width var(--mat-dur-slower) var(--mat-ease-standard); }
.aeu-sidebar.aeu-sidebar-mini { width: 96px; }
.aeu-sidebar.aeu-sidebar-mini .aeu-nav-item span,
.aeu-sidebar.aeu-sidebar-mini .aeu-brand-name,
.aeu-sidebar.aeu-sidebar-mini .aeu-sidebar-user span { display: none; }
.aeu-sidebar.aeu-sidebar-mini .aeu-nav-item { justify-content: center; padding: 12px; }

/* ======================================================================
 * aeudnstheme — extension v3 (added 2026-05-15)
 *
 * FIX: `<svg class="icon">` had no default size, so when used outside
 * `.aeu-tile` / `.aeu-section-tile` the SVG rendered at its viewBox size
 * (literally 100s of pixels in some browsers). This broke buttons in the
 * page-head action row in admin/index.php — they became full-width banners.
 *
 * Rule: every `.icon` MUST have a default size + currentColor fill, then
 * specific contexts override.
 * ====================================================================== */

/* ---- Generic default for .icon (when not in a tile) ---------------- */
.icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    fill: currentColor;
    vertical-align: middle;
    flex-shrink: 0;
}

/* ---- Inside buttons (smaller, sits next to text) ------------------ */
.aeu-btn .icon { width: 14px; height: 14px; margin-right: 4px; }
.aeu-btn-sm .icon { width: 12px; height: 12px; margin-right: 3px; }
.aeu-btn-lg .icon { width: 16px; height: 16px; margin-right: 5px; }
.aeu-btn-icon .icon, .aeu-icon-btn .icon { margin-right: 0; }

/* ---- Inside alerts, status rows, status name ---------------------- */
.aeu-alert .icon { width: 18px; height: 18px; flex-shrink: 0; }
.aeu-status-row .icon { width: 14px; height: 14px; }
.aeu-empty-icon { width: 48px; height: 48px; opacity: .5; }

/* ---- Inside table cells ------------------------------------------- */
.aeu-table .icon { width: 14px; height: 14px; }

/* ---- Inside dropdown items, list items ---------------------------- */
.aeu-dropdown-item .icon, .aeu-nav-item .icon { width: 16px; height: 16px; margin-right: 8px; }

/* ════════════════════════════════════════════════════════════════
   AEUDNSTHEME v17 — SOFT ELEGANT (flex two-row, space-efficient)
   ──────────────────────────────────────────────────────────────
   No grid quirks, no display:contents, no stacked column.
   Layout per stat card (flex-wrap, justify-content space-between):

   ┌────────────────────────────────────────────────────┐
   │  [chip]   LABEL .................. VALUE  24       │  row 1 (one line)
   │           ✓ subtitle                               │  row 2 (wraps via flex-basis 100%)
   └────────────────────────────────────────────────────┘

   - chip:   44 × 44 left
   - label:  flex-grows in the middle
   - value:  on the right, BIG
   - footer: wraps to row 2, indented under label

   Geometry (4px grid):
     padding         : 14px 16px
     chip            : 44 × 44 / radius 10
     col gap         : 14px (chip ↔ stat-text)
     row gap         : 4px (label-line ↔ subtitle-line)
     footer indent   : 58px (= chip 44 + gap 14, lines subtitle under label)
     label           : 11/600/1px tracking/uppercase
     value           : 28/700/-0.5 tracking
     subtitle        : 11/400/muted
   ════════════════════════════════════════════════════════════════ */

.aeu-stat-card.aeu-stat-soft {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 14px;
    row-gap: 4px;
    padding: 14px 16px !important;
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: none;
    transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
    position: relative;
    overflow: hidden;
}
.aeu-stat-card.aeu-stat-soft:hover {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
    transform: translateY(-1px);
    box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--accent) 15%, transparent);
}
.aeu-stat-card.aeu-stat-soft::after { content: none !important; display: none !important; }

/* CHIP — fixed width on the left */
.aeu-stat-soft .aeu-tile {
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 10px !important;
    background: color-mix(in srgb, var(--accent) 12%, transparent) !important;
    color: var(--accent) !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    float: none !important;
    order: 1;
}
.aeu-stat-soft .aeu-tile .icon, .aeu-stat-soft .aeu-tile svg {
    width: 20px !important; height: 20px !important;
    color: inherit !important; fill: currentColor !important;
}

/* Semantic tints */
.aeu-stat-soft .aeu-tile-info    { background: color-mix(in srgb, var(--info) 14%, transparent) !important;    color: var(--info-strong, var(--info)) !important; }
.aeu-stat-soft .aeu-tile-success { background: color-mix(in srgb, var(--success) 14%, transparent) !important; color: var(--success-strong, var(--success)) !important; }
.aeu-stat-soft .aeu-tile-warning { background: color-mix(in srgb, var(--warning) 16%, transparent) !important; color: var(--warning-strong, var(--warning)) !important; }
.aeu-stat-soft .aeu-tile-danger  { background: color-mix(in srgb, var(--danger) 14%, transparent) !important;  color: var(--danger-strong, var(--danger)) !important; }
.aeu-stat-soft .aeu-tile-primary { background: color-mix(in srgb, var(--accent) 14%, transparent) !important;  color: var(--accent) !important; }
.aeu-stat-soft .aeu-tile-rose    { background: color-mix(in srgb, var(--accent) 14%, transparent) !important;  color: var(--accent) !important; }
.aeu-stat-soft .aeu-tile-accent  { background: color-mix(in srgb, var(--accent) 14%, transparent) !important;  color: var(--accent) !important; }

/* STAT-TEXT — middle block, becomes inner flex row (label left, value right) */
.aeu-stat-soft .aeu-stat-text {
    flex: 1 1 0 !important;
    min-width: 0;
    order: 2;
    display: flex !important;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 0 !important;
    text-align: left !important;
}

.aeu-stat-soft .aeu-stat-label {
    flex: 0 1 auto;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--muted) !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1.3 !important;
    margin: 0 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.aeu-stat-soft .aeu-stat-value {
    flex: 0 0 auto;
    font-size: 28px !important;
    font-weight: 700 !important;
    color: var(--text) !important;
    line-height: 1 !important;
    letter-spacing: -0.5px;
    margin: 0 !important;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-align: right;
}
.aeu-stat-soft .aeu-stat-value small {
    font-size: 13px !important;
    font-weight: 400;
    color: var(--muted) !important;
    margin-left: 4px;
    letter-spacing: 0;
}

/* FOOTER → wraps to row 2, indented under label (no divider) */
.aeu-stat-soft .aeu-card-footer {
    flex: 0 0 100%;
    order: 3;
    margin: 0 !important;
    padding: 0 0 0 58px !important;  /* indent: chip 44 + gap 14 */
    border: none !important;
    border-top: none !important;
    font-size: 11px;
    color: var(--muted);
    line-height: 1.3;
    display: block;
    float: none;
    clear: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.aeu-stat-soft .aeu-card-footer small { font-size: 11px; color: var(--muted) !important; line-height: 1.3; }
.aeu-stat-soft .aeu-card-footer .icon {
    width: 11px !important; height: 11px !important;
    vertical-align: -1px; margin-right: 3px;
    color: var(--muted) !important; fill: currentColor !important;
}

/* ──────── MOBILE (≤ 480px) — same flex layout, smaller numbers ──────── */
@media (max-width: 480px) {
    .aeu-stat-card.aeu-stat-soft {
        padding: 12px 14px !important;
        column-gap: 12px;
        border-radius: 10px;
    }
    .aeu-stat-soft .aeu-tile {
        flex: 0 0 40px !important;
        width: 40px !important;
        height: 40px !important;
        border-radius: 9px !important;
    }
    .aeu-stat-soft .aeu-tile .icon, .aeu-stat-soft .aeu-tile svg {
        width: 18px !important; height: 18px !important;
    }
    .aeu-stat-soft .aeu-stat-label {
        font-size: 10.5px !important;
        letter-spacing: 0.8px;
    }
    .aeu-stat-soft .aeu-stat-value { font-size: 24px !important; }
    .aeu-stat-soft .aeu-card-footer { padding-left: 52px !important; font-size: 10.5px; }
}


/* ════════════════════════════════════════════════════════════════
   AEUDNSTHEME v18 — full-page softification
   ──────────────────────────────────────────────────────────────
   1. .aeu-section-soft → softens the .aeu-section-card-header tile
      so it matches the .aeu-stat-soft chip aesthetic. No vivid
      gradient, no halo, no MDP-style protrusion.
   2. .aeu-btn-soft-danger → muted danger button matching outline style
   3. Mobile table fix: any .aeu-table inside a card scrolls horizontally
      via a wrap, not the page.
   4. More breathing between stacked cards.
   ════════════════════════════════════════════════════════════════ */

/* ── SECTION CARD HEADER — soft variant ─────────────────────────── */
.aeu-card.aeu-section-soft > .aeu-section-card-header {
    padding: 14px 20px !important;
    display: flex !important;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid var(--border);
}
.aeu-card.aeu-section-soft > .aeu-section-card-header::after { content: none !important; display: none !important; }

.aeu-card.aeu-section-soft .aeu-section-tile {
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 9px !important;
    background: color-mix(in srgb, var(--accent) 12%, transparent) !important;
    color: var(--accent) !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    float: none !important;
    flex-shrink: 0;
}
.aeu-card.aeu-section-soft .aeu-section-tile .icon,
.aeu-card.aeu-section-soft .aeu-section-tile svg {
    width: 17px !important;
    height: 17px !important;
    color: inherit !important;
    fill: currentColor !important;
}

/* Semantic chip tints (same as stat-soft) */
.aeu-card.aeu-section-soft .aeu-section-tile.aeu-tile-info    { background: color-mix(in srgb, var(--info) 14%, transparent) !important;    color: var(--info-strong, var(--info)) !important; }
.aeu-card.aeu-section-soft .aeu-section-tile.aeu-tile-success { background: color-mix(in srgb, var(--success) 14%, transparent) !important; color: var(--success-strong, var(--success)) !important; }
.aeu-card.aeu-section-soft .aeu-section-tile.aeu-tile-warning { background: color-mix(in srgb, var(--warning) 16%, transparent) !important; color: var(--warning-strong, var(--warning)) !important; }
.aeu-card.aeu-section-soft .aeu-section-tile.aeu-tile-danger  { background: color-mix(in srgb, var(--danger) 14%, transparent) !important;  color: var(--danger-strong, var(--danger)) !important; }
.aeu-card.aeu-section-soft .aeu-section-tile.aeu-tile-primary { background: color-mix(in srgb, var(--accent) 14%, transparent) !important;  color: var(--accent) !important; }
.aeu-card.aeu-section-soft .aeu-section-tile.aeu-tile-rose    { background: color-mix(in srgb, var(--accent) 14%, transparent) !important;  color: var(--accent) !important; }
.aeu-card.aeu-section-soft .aeu-section-tile.aeu-tile-accent  { background: color-mix(in srgb, var(--accent) 14%, transparent) !important;  color: var(--accent) !important; }

.aeu-card.aeu-section-soft .aeu-section-title {
    padding: 0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--text) !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    letter-spacing: -0.1px;
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex: 1 1 auto;
}
.aeu-card.aeu-section-soft .aeu-section-title small {
    font-size: 12px;
    font-weight: 400;
    color: var(--muted) !important;
}

/* When .aeu-card.aeu-section-soft is the wrapper, the card itself gets the soft chrome */
.aeu-card.aeu-section-soft {
    border-radius: 12px !important;
    border: 1px solid var(--border) !important;
    background: var(--surface-card);
    overflow: hidden;
}

/* Inner body padding tighter and consistent */
.aeu-card.aeu-section-soft .aeu-card-body {
    padding: 16px 20px !important;
}

/* ── BUTTON: soft danger (muted red, outline-style) ─────────────── */
.aeu-btn.aeu-btn-soft-danger {
    background: color-mix(in srgb, var(--danger) 10%, transparent);
    color: var(--danger-strong, var(--danger));
    border: 1px solid color-mix(in srgb, var(--danger) 40%, var(--border));
    box-shadow: none;
}
.aeu-btn.aeu-btn-soft-danger:hover {
    background: color-mix(in srgb, var(--danger) 18%, transparent);
    border-color: var(--danger);
    color: var(--danger);
}
.aeu-btn.aeu-btn-soft-danger .icon { color: currentColor; fill: currentColor; }

/* ── TABLE: horizontal scroll wrapper so mobile doesn't break layout ── */
.aeu-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.aeu-table-scroll > .aeu-table { min-width: 720px; }

/* ── GRID gap consistency for stacked cards ─────────────────────── */
.aeu-grid + .aeu-card,
.aeu-card + .aeu-card,
.aeu-quick-actions + .aeu-card,
.aeu-card + .aeu-quick-actions,
.aeu-grid + .aeu-quick-actions,
.aeu-quick-actions + .aeu-grid {
    margin-top: 20px;
}


/* ════════════════════════════════════════════════════════════════
   AEUDNSTHEME v19 — RESPONSIVE TABLE
   ──────────────────────────────────────────────────────────────
   At tablet/mobile (≤ 768px), any .aeu-table.aeu-table-responsive
   converts each row into a stacked card with label-value pairs.
   NO horizontal scrolling, NO content cut off.

   HTML requirement: every <td> needs data-label="Column name"
   so CSS ::before can render the column label as a small uppercase
   tag on the left of the cell value.

   <td.col-check> and <td.actions> are special-cased — they don't
   get a data-label rendered.
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .aeu-table.aeu-table-responsive,
    .aeu-table-scroll > .aeu-table.aeu-table-responsive {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        border-collapse: separate;
        border-spacing: 0;
    }
    .aeu-table.aeu-table-responsive thead { display: none !important; }
    .aeu-table.aeu-table-responsive tbody { display: block !important; }
    .aeu-table.aeu-table-responsive tr {
        display: block !important;
        border: 1px solid var(--border) !important;
        border-radius: 10px !important;
        padding: 12px 14px !important;
        margin: 0 0 10px 0 !important;
        background: var(--surface-card) !important;
        box-shadow: none !important;
    }
    .aeu-table.aeu-table-responsive tr:last-child { margin-bottom: 0 !important; }
    .aeu-table.aeu-table-responsive td {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        padding: 7px 0 !important;
        border: none !important;
        border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent) !important;
        gap: 12px;
        min-width: 0;
        text-align: right;
        font-size: 13px;
        line-height: 1.4;
    }
    .aeu-table.aeu-table-responsive td:last-child { border-bottom: none !important; }
    .aeu-table.aeu-table-responsive td::before {
        content: attr(data-label);
        font-size: 10.5px !important;
        font-weight: 600 !important;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        color: var(--muted) !important;
        flex: 0 0 auto;
        text-align: left;
        white-space: nowrap;
    }
    /* Checkbox column: only the checkbox, no label, no value */
    .aeu-table.aeu-table-responsive td.col-check {
        padding: 0 0 8px 0 !important;
        justify-content: flex-start;
        border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent) !important;
        margin-bottom: 4px;
    }
    .aeu-table.aeu-table-responsive td.col-check::before { display: none !important; }
    /* Actions column: row of buttons, full-width below */
    .aeu-table.aeu-table-responsive td.actions {
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 6px;
        padding-top: 10px !important;
        padding-bottom: 0 !important;
        border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent) !important;
        border-bottom: none !important;
        margin-top: 4px;
    }
    .aeu-table.aeu-table-responsive td.actions::before { display: none !important; }
    .aeu-table.aeu-table-responsive td.actions .inline-form { display: inline-flex; }
    /* Profile code: full value on right, wrap if long */
    .aeu-table.aeu-table-responsive td > code,
    .aeu-table.aeu-table-responsive td > div {
        text-align: right;
        word-break: break-word;
        min-width: 0;
        flex: 1 1 auto;
    }
    /* Small selects shouldn't span — keep them narrow */
    .aeu-table.aeu-table-responsive td .form-control-sm {
        width: auto;
        max-width: 60%;
    }
    /* Multiple badges on one cell (protocols) — let them wrap right */
    .aeu-table.aeu-table-responsive td.nowrap {
        white-space: normal;
        flex-wrap: wrap;
        justify-content: flex-end;
    }
    .aeu-table.aeu-table-responsive td.nowrap > .aeu-badge { margin: 1px 0; }
}


/* ════════════════════════════════════════════════════════════════
   AEUDNSTHEME v20 — FLUID RESPONSIVE (not breakpoint-snap)
   ──────────────────────────────────────────────────────────────
   At EVERY browser width, layout reflows smoothly. No "jumps" at
   1200 / 768 — uses auto-fit + minmax() + clamp() so the design
   adapts continuously from 320px to 1920px+.

   Key techniques:
   1. .aeu-grid-* uses repeat(auto-fit, minmax(MIN, 1fr)) so cards
      reflow at any width — 4 columns at desktop, 3 / 2 / 1
      automatically as the viewport narrows.
   2. clamp(min, fluid, max) for paddings, gaps, font sizes.
   3. flex-wrap on every multi-item row (page-head, action-row,
      quick-actions, status-row, section-card-header).
   4. container side-padding scales with viewport.
   ════════════════════════════════════════════════════════════════ */

/* --- FLUID GRIDS: auto-fit replaces fixed column count --- */
/* These override the older breakpoint-snap rules — must be after them in cascade */
.aeu-grid { display: grid; gap: clamp(12px, 2vw, 24px); }
.aeu-grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)) !important; }
.aeu-grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)) !important; }
.aeu-grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)) !important; }

/* Override the @media breakpoints — auto-fit handles it */
@media (max-width: 1200px) {
    .aeu-grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)) !important; }
    .aeu-grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)) !important; }
}
@media (max-width: 768px) {
    .aeu-grid-4, .aeu-grid-3, .aeu-grid-2 {
        grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)) !important;
    }
}

/* --- PAGE-HEAD: wraps when narrow, title + actions both flex --- */
.aeu-page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: clamp(8px, 1.5vw, 16px);
    padding: clamp(8px, 1.5vw, 16px) 0;
    margin-bottom: clamp(12px, 2vw, 24px);
}
.aeu-page-head > div:first-child { flex: 1 1 240px; min-width: 0; }
.aeu-page-head .page-title {
    font-size: clamp(18px, 2.4vw, 26px) !important;
    line-height: 1.2;
    margin: 0 0 4px !important;
}
.aeu-page-head .page-subtitle {
    font-size: clamp(12px, 1.2vw, 14px) !important;
    margin: 0 !important;
    color: var(--muted);
}
.aeu-page-head-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    flex: 0 1 auto;
}

/* --- QUICK-ACTIONS (filter pills): wrap + fluid gap --- */
.aeu-quick-actions {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    margin: clamp(8px, 1.5vw, 16px) 0;
}

/* --- STAT-SOFT card: fluid padding + value clamp --- */
.aeu-stat-card.aeu-stat-soft {
    padding: clamp(12px, 1.6vw, 16px) clamp(14px, 1.8vw, 18px) !important;
    column-gap: clamp(10px, 1.4vw, 14px);
    row-gap: clamp(2px, 0.5vw, 4px);
}
.aeu-stat-card.aeu-stat-soft .aeu-stat-value {
    font-size: clamp(20px, 2.4vw, 28px) !important;
    line-height: 1 !important;
}
.aeu-stat-card.aeu-stat-soft .aeu-stat-label {
    font-size: clamp(10px, 0.85vw, 11px) !important;
    letter-spacing: clamp(0.6px, 0.1vw, 1px);
}
.aeu-stat-card.aeu-stat-soft .aeu-tile {
    width: clamp(36px, 3.2vw, 44px) !important;
    height: clamp(36px, 3.2vw, 44px) !important;
    flex-basis: clamp(36px, 3.2vw, 44px) !important;
}
.aeu-stat-card.aeu-stat-soft .aeu-tile .icon,
.aeu-stat-card.aeu-stat-soft .aeu-tile svg {
    width: clamp(16px, 1.4vw, 20px) !important;
    height: clamp(16px, 1.4vw, 20px) !important;
}
.aeu-stat-card.aeu-stat-soft .aeu-card-footer {
    padding-left: clamp(44px, 4.6vw, 58px) !important;
    font-size: clamp(10px, 0.85vw, 11px);
}

/* --- SECTION-SOFT card: fluid header padding + title clamp --- */
.aeu-card.aeu-section-soft > .aeu-section-card-header {
    padding: clamp(12px, 1.4vw, 14px) clamp(14px, 1.6vw, 20px) !important;
    gap: clamp(10px, 1vw, 12px);
    flex-wrap: wrap;
}
.aeu-card.aeu-section-soft .aeu-section-tile {
    width: clamp(32px, 2.6vw, 36px) !important;
    height: clamp(32px, 2.6vw, 36px) !important;
}
.aeu-card.aeu-section-soft .aeu-section-tile .icon,
.aeu-card.aeu-section-soft .aeu-section-tile svg {
    width: clamp(15px, 1.3vw, 17px) !important;
    height: clamp(15px, 1.3vw, 17px) !important;
}
.aeu-card.aeu-section-soft .aeu-section-title {
    font-size: clamp(13px, 1.1vw, 14px) !important;
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: wrap;
}
.aeu-card.aeu-section-soft .aeu-card-body {
    padding: clamp(12px, 1.4vw, 16px) clamp(14px, 1.6vw, 20px) !important;
}

/* --- ACTION-ROW (bulk actions, forms): wrap + fluid gap --- */
.aeu-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(8px, 1vw, 12px);
    align-items: center;
}
.aeu-action-row > * { flex: 0 1 auto; }

/* --- STATUS-ROW (badge + description in security legend etc): wrap on narrow --- */
.aeu-status-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: baseline;
}
.aeu-status-row > .aeu-badge { flex: 0 0 auto; }
.aeu-status-row > .text-sm { flex: 1 1 auto; min-width: 0; }

/* --- RESPONSIVE TABLE: trigger the row-as-card at ≤ 900px (not 768) --- */
/* The old @media (max-width: 768px) was too narrow — tablet (768-1024) was still trying
   to fit 8 columns and pushing the layout. Trigger card-stack earlier. */
@media (max-width: 900px) {
    .aeu-table.aeu-table-responsive,
    .aeu-table-scroll > .aeu-table.aeu-table-responsive {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
    }
    .aeu-table.aeu-table-responsive thead { display: none !important; }
    .aeu-table.aeu-table-responsive tbody { display: block !important; }
    .aeu-table.aeu-table-responsive tr {
        display: block !important;
        border: 1px solid var(--border) !important;
        border-radius: 10px !important;
        padding: clamp(10px, 1.3vw, 14px) clamp(12px, 1.5vw, 16px) !important;
        margin: 0 0 10px 0 !important;
        background: var(--surface-card) !important;
        box-shadow: none !important;
    }
    .aeu-table.aeu-table-responsive tr:last-child { margin-bottom: 0 !important; }
    .aeu-table.aeu-table-responsive td {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        padding: 7px 0 !important;
        border: none !important;
        border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent) !important;
        gap: 12px;
        min-width: 0;
        text-align: right;
        font-size: 13px;
        line-height: 1.4;
    }
    .aeu-table.aeu-table-responsive td:last-child { border-bottom: none !important; }
    .aeu-table.aeu-table-responsive td::before {
        content: attr(data-label);
        font-size: 10.5px !important;
        font-weight: 600 !important;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        color: var(--muted) !important;
        flex: 0 0 auto;
        text-align: left;
        white-space: nowrap;
    }
    .aeu-table.aeu-table-responsive td.col-check {
        padding: 0 0 8px 0 !important;
        justify-content: flex-start;
        border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent) !important;
        margin-bottom: 4px;
    }
    .aeu-table.aeu-table-responsive td.col-check::before { display: none !important; }
    .aeu-table.aeu-table-responsive td.actions {
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 6px;
        padding-top: 10px !important;
        padding-bottom: 0 !important;
        border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent) !important;
        border-bottom: none !important;
        margin-top: 4px;
    }
    .aeu-table.aeu-table-responsive td.actions::before { display: none !important; }
    .aeu-table.aeu-table-responsive td.nowrap { white-space: normal; flex-wrap: wrap; justify-content: flex-end; }
    .aeu-table.aeu-table-responsive td.nowrap > .aeu-badge { margin: 1px 0; }
    .aeu-table.aeu-table-responsive td .form-control-sm { width: auto; max-width: 60%; }
}

/* --- Tiny phones (≤ 360px): tighter padding & smaller value --- */
@media (max-width: 360px) {
    .aeu-stat-card.aeu-stat-soft { padding: 10px 12px !important; }
    .aeu-stat-card.aeu-stat-soft .aeu-stat-value { font-size: 18px !important; }
    .aeu-stat-card.aeu-stat-soft .aeu-card-footer { padding-left: 44px !important; }
    .aeu-card.aeu-section-soft > .aeu-section-card-header { padding: 10px 12px !important; }
    .aeu-card.aeu-section-soft .aeu-card-body { padding: 10px 12px !important; }
}


/* ════════════════════════════════════════════════════════════════
   AEUDNSTHEME v21 — FLUID + GEOMETRIC (no orphan, no overflow)
   ──────────────────────────────────────────────────────────────
   Strict 4→2→1 cascade for stat grid (NEVER 3-col orphan):
     ≥ 1100px : 4 columns
     540-1099 : 2 columns (2×2)
     < 540px  : 1 column

   Within each step, content fluid via clamp().

   Responsive table card-stack: now triggers at ≤ 1024px (was 900),
   because the 8-column table cannot fit in a tablet card.
   ════════════════════════════════════════════════════════════════ */

/* ──────── STAT GRID — strict 4 / 2 / 1 cascade (no orphan!) ──────── */
.aeu-grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
@media (max-width: 1099px) {
    .aeu-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 539px) {
    .aeu-grid-4 { grid-template-columns: minmax(0, 1fr) !important; }
}

/* 3-column grid: 3 / 1 cascade (skip 2 to avoid orphan when 3 items) */
.aeu-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
@media (max-width: 899px) {
    .aeu-grid-3 { grid-template-columns: minmax(0, 1fr) !important; }
}

/* 2-column grid: 2 / 1 */
.aeu-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
@media (max-width: 599px) {
    .aeu-grid-2 { grid-template-columns: minmax(0, 1fr) !important; }
}

/* ──────── RESPONSIVE TABLE: trigger card-stack at ≤ 1024px ──────── */
/* The 8-column profile table cannot fit on a tablet (1024×768). At
   tablet portrait especially, the table overflows. Trigger row-as-card
   at ≤ 1024px so tablets get the card layout, not horizontal scroll. */
@media (max-width: 1024px) {
    .aeu-table.aeu-table-responsive,
    .aeu-table-scroll > .aeu-table.aeu-table-responsive {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
    }
    .aeu-table.aeu-table-responsive thead { display: none !important; }
    .aeu-table.aeu-table-responsive tbody { display: block !important; }
    .aeu-table.aeu-table-responsive tr {
        display: block !important;
        border: 1px solid var(--border) !important;
        border-radius: 10px !important;
        padding: clamp(10px, 1.3vw, 14px) clamp(12px, 1.5vw, 16px) !important;
        margin: 0 0 10px 0 !important;
        background: var(--surface-card) !important;
        box-shadow: none !important;
    }
    .aeu-table.aeu-table-responsive tr:last-child { margin-bottom: 0 !important; }
    .aeu-table.aeu-table-responsive td {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        padding: 7px 0 !important;
        border: none !important;
        border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent) !important;
        gap: 12px;
        min-width: 0;
        text-align: right;
        font-size: 13px;
        line-height: 1.4;
    }
    .aeu-table.aeu-table-responsive td:last-child { border-bottom: none !important; }
    .aeu-table.aeu-table-responsive td::before {
        content: attr(data-label);
        font-size: 10.5px !important;
        font-weight: 600 !important;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        color: var(--muted) !important;
        flex: 0 0 auto;
        text-align: left;
        white-space: nowrap;
    }
    .aeu-table.aeu-table-responsive td.col-check {
        padding: 0 0 8px 0 !important;
        justify-content: flex-start;
        border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent) !important;
        margin-bottom: 4px;
    }
    .aeu-table.aeu-table-responsive td.col-check::before { display: none !important; }
    .aeu-table.aeu-table-responsive td.actions {
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 6px;
        padding-top: 10px !important;
        padding-bottom: 0 !important;
        border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent) !important;
        border-bottom: none !important;
        margin-top: 4px;
    }
    .aeu-table.aeu-table-responsive td.actions::before { display: none !important; }
    .aeu-table.aeu-table-responsive td.nowrap { white-space: normal; flex-wrap: wrap; justify-content: flex-end; }
    .aeu-table.aeu-table-responsive td.nowrap > .aeu-badge { margin: 1px 0; }
    .aeu-table.aeu-table-responsive td .form-control-sm { width: auto; max-width: 60%; }
}

/* ──────── GEOMETRIC ALIGNMENT POLISH ──────── */

/* Stat-soft: ensure equal-height cards (grid does this when min-content equal) */
.aeu-stat-card.aeu-stat-soft { height: 100%; }

/* Section-soft: full-width header with consistent padding regardless of viewport */
.aeu-card.aeu-section-soft { height: auto; }

/* All cards share the same border-radius rhythm */
.aeu-stat-card.aeu-stat-soft,
.aeu-card.aeu-section-soft { border-radius: 12px !important; }

/* Page-head fluid alignment */
.aeu-page-head {
    align-items: baseline;
}

/* Quick-actions baseline alignment */
.aeu-quick-actions .aeu-btn {
    line-height: 1;
}


/* ════════════════════════════════════════════════════════════════
   AEUDNSTHEME v22 — RESPONSIVE TABLE GEOMETRIC FIX
   ──────────────────────────────────────────────────────────────
   At ≤ 1024px (where the table is now a card stack), the previous
   `justify-content: space-between` was spreading multi-child cells
   so the label sat left, the LAST child sat right, and middle children
   floated awkwardly in the middle.

   Fix: use `margin-right: auto` on ::before (the label) instead.
   This pushes the label to the start and lets ALL following children
   cluster on the right edge together, separated only by `gap`.

   Multi-element values (e.g. <code>prftest1</code> + <div>full.url</div>,
   or 4 protocol badges) now render as a cohesive right-aligned group.
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
    .aeu-table.aeu-table-responsive td {
        justify-content: flex-start !important;  /* override space-between */
        flex-wrap: wrap;                          /* allow long values to wrap */
        column-gap: 12px;
        row-gap: 2px;
    }
    .aeu-table.aeu-table-responsive td::before {
        margin-right: auto !important;           /* pushes label LEFT, rest cluster RIGHT */
    }
    /* Multi-line value: <code> + <div> on same row, but if no room they wrap. */
    .aeu-table.aeu-table-responsive td > * {
        text-align: right;
    }
    /* When a cell holds a profile-code-style block (code + url),
       group them vertically on the right (mono code on top, full URL below). */
    .aeu-table.aeu-table-responsive td > code + div,
    .aeu-table.aeu-table-responsive td > div.text-xs {
        flex: 1 1 100%;
        margin-top: 2px;
    }
    /* Protocol/status badges: cluster tightly together right */
    .aeu-table.aeu-table-responsive td.nowrap {
        column-gap: 4px;
        row-gap: 4px;
    }
    /* CERTIFICATE cell: badge + button group, both right */
    .aeu-table.aeu-table-responsive td .inline-form {
        display: inline-flex;
    }
    /* SECURITY MODE select: limit width so it doesn't span full row */
    .aeu-table.aeu-table-responsive td .form-control-sm {
        width: auto !important;
        min-width: 130px;
        max-width: 50%;
    }
}


/* ════════════════════════════════════════════════════════════════
   AEUDNSTHEME v23 — fix actions-row right-alignment + col-check
   v22 override broke .actions justify-content. Restore explicit rules.
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
    /* ACTIONS cell: buttons cluster to the RIGHT (override v22 flex-start) */
    .aeu-table.aeu-table-responsive td.actions {
        justify-content: flex-end !important;
        flex-wrap: wrap;
    }
    /* CHECKBOX cell: align left, no label */
    .aeu-table.aeu-table-responsive td.col-check {
        justify-content: flex-start !important;
    }
}



/* ════════════════════════════════════════════════════════════════
   AEUDNSTHEME v24 — services.php helpers + utility classes
   - aeu-services-grid: 5-col status pills inside node cards
   - aeu-svc-pill: per-protocol status indicator
   - aeu-form-grid: responsive 4-col form layout for test tools
   - aeu-test-result, aeu-code-block: test output styling
   - aeu-pad-h, ml-auto: small utility classes used across pages
   ════════════════════════════════════════════════════════════════ */

/* Services grid inside a node card: 5 protocol pills in a row */
.aeu-services-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    margin-top: 14px;
}
@media (max-width: 480px) {
    .aeu-services-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.aeu-svc-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 4px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface-card) 50%, transparent);
    transition: background var(--mat-dur-base, 200ms) var(--mat-ease-standard, cubic-bezier(0.4, 0, 0.2, 1));
}
.aeu-svc-pill .aeu-svc-name {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--text);
}
.aeu-svc-pill .aeu-svc-icon {
    line-height: 1;
}
.aeu-svc-pill .aeu-svc-icon .icon {
    width: 16px;
    height: 16px;
}
.aeu-svc-pill .aeu-svc-port {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 10px;
    color: var(--muted);
}

.aeu-svc-online {
    background: color-mix(in srgb, var(--success) 12%, transparent);
    border-color: color-mix(in srgb, var(--success) 30%, var(--border));
}
.aeu-svc-online .aeu-svc-icon { color: var(--success-strong, var(--success)); }

.aeu-svc-offline {
    background: color-mix(in srgb, var(--danger) 12%, transparent);
    border-color: color-mix(in srgb, var(--danger) 30%, var(--border));
}
.aeu-svc-offline .aeu-svc-icon { color: var(--danger-strong, var(--danger)); }

.aeu-svc-unknown {
    background: color-mix(in srgb, var(--warning) 10%, transparent);
    border-color: color-mix(in srgb, var(--warning) 25%, var(--border));
}
.aeu-svc-unknown .aeu-svc-icon { color: var(--warning-strong, var(--warning)); }

/* Form grid — responsive 4-col → 2-col → 1-col cascade for inline forms */
.aeu-form-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    align-items: end;
}
.aeu-form-grid .form-group {
    margin: 0;
}
.aeu-form-grid .form-group-actions {
    display: flex;
    align-items: end;
}
@media (max-width: 900px) {
    .aeu-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 539px) {
    .aeu-form-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Test result block */
.aeu-test-result {
    padding: 12px 14px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--surface-2, var(--surface-card)) 60%, transparent);
    border: 1px solid var(--border);
}

/* Code block — preformatted output */
.aeu-code-block {
    margin: 10px 0 0 0;
    padding: 10px 12px;
    background: var(--surface, #0a0a1a);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 12px;
    line-height: 1.5;
    overflow-x: auto;
    white-space: pre;
}

/* Utility — horizontal padding equal to card body */
.aeu-pad-h {
    padding-left: 20px;
    padding-right: 20px;
}

/* Utility — push to right of flex parent */
.ml-auto { margin-left: auto !important; }

/* Empty state — bigger icon + title */
.aeu-empty-title {
    margin: 12px 0 6px;
    font-size: 16px;
    font-weight: 500;
    color: var(--text);
}


/* ════════════════════════════════════════════════════════════════
   AEUDNSTHEME v25 — failover.php helpers
   - aeu-step-list: numbered ordered list with circular numbers
   ════════════════════════════════════════════════════════════════ */

.aeu-step-list {
    list-style: none;
    counter-reset: step;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.aeu-step-list li {
    counter-increment: step;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    color: var(--text);
    font-size: 14px;
    line-height: 1.5;
}
.aeu-step-list li::before {
    content: counter(step);
    flex: 0 0 24px;
    height: 24px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    color: var(--accent);
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}


/* ════════════════════════════════════════════════════════════════
   AEUDNSTHEME v26 — certificates.php helpers
   - .modal-content-wide: wider modal for cascade output
   - aeu-cascade-status, aeu-cascade-log, aeu-cascade-summary
   ════════════════════════════════════════════════════════════════ */

.modal-content-wide { max-width: 720px !important; }

.aeu-cascade-status {
    padding: 12px 14px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--info) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--info) 25%, var(--border));
    color: var(--text);
    margin-bottom: 14px;
    font-weight: 500;
}

.aeu-cascade-log {
    max-height: 300px;
    overflow-y: auto;
    padding: 12px 14px;
    border-radius: 8px;
    background: var(--surface, #0a0a1a);
    color: var(--text);
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 12px;
    line-height: 1.5;
    margin-bottom: 14px;
    border: 1px solid var(--border);
}
.aeu-cascade-log-info    { color: var(--text); }
.aeu-cascade-log-step    { color: var(--accent); font-weight: 600; }
.aeu-cascade-log-success { color: var(--success-strong, var(--success)); }
.aeu-cascade-log-warning { color: var(--warning-strong, var(--warning)); }
.aeu-cascade-log-error   { color: var(--danger-strong, var(--danger)); }

.aeu-cascade-summary {
    display: none;
    padding: 12px 14px;
    border-radius: 8px;
    margin-bottom: 14px;
    border: 1px solid var(--border);
}
.aeu-cascade-summary-ok {
    background: color-mix(in srgb, var(--success) 12%, transparent);
    border-color: color-mix(in srgb, var(--success) 30%, var(--border));
}
.aeu-cascade-summary-warn {
    background: color-mix(in srgb, var(--warning) 12%, transparent);
    border-color: color-mix(in srgb, var(--warning) 30%, var(--border));
}


/* ════════════════════════════════════════════════════════════════
   AEUDNSTHEME v27 — firewall.php helpers
   - aeu-timeline-bar: 24-bar histogram for attack timeline
   - aeu-toggle-row: row with checkbox + label
   - aeu-flex-row: horizontal flex with gap
   ════════════════════════════════════════════════════════════════ */

.aeu-timeline-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 80px;
    padding: 8px 0;
    border-bottom: 1px dashed var(--border);
}
.aeu-timeline-bar-item {
    flex: 1;
    min-width: 0;
    height: var(--bar-height, 5%);
    background: color-mix(in srgb, var(--accent) 60%, transparent);
    border-radius: 3px 3px 0 0;
    transition: background var(--mat-dur-base, 200ms) var(--mat-ease-standard, cubic-bezier(0.4, 0, 0.2, 1));
}
.aeu-timeline-bar-item:hover {
    background: var(--accent);
}

.aeu-toggle-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--surface-2, var(--surface-card)) 40%, transparent);
    cursor: pointer;
    user-select: none;
    transition: border-color var(--mat-dur-base, 200ms) var(--mat-ease-standard, cubic-bezier(0.4, 0, 0.2, 1));
}
.aeu-toggle-row:hover {
    border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}
.aeu-toggle-row input[type="checkbox"] {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
    margin: 0;
}
.aeu-toggle-row span {
    font-size: 13px;
    color: var(--text);
    line-height: 1.3;
}

.aeu-flex-row {
    display: flex;
    align-items: center;
    gap: 8px;
}


/* ════════════════════════════════════════════════════════════════
   AEUDNSTHEME v28 — settings.php helpers
   - aeu-mini-card: compact info card inside a parent section (used for
     maintenance action grids)
   ════════════════════════════════════════════════════════════════ */

.aeu-mini-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: color-mix(in srgb, var(--surface-2, var(--surface-card)) 50%, transparent);
    transition: border-color var(--mat-dur-base, 200ms) var(--mat-ease-standard, cubic-bezier(0.4, 0, 0.2, 1));
}
.aeu-mini-card:hover {
    border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}
.aeu-mini-card-title {
    margin: 0 0 4px 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
}
.aeu-mini-card-title .icon {
    width: 16px;
    height: 16px;
    color: var(--accent);
}
.aeu-mini-card p {
    margin: 0 0 4px 0;
    line-height: 1.4;
}
.aeu-mini-card .aeu-btn {
    align-self: flex-start;
    margin-top: auto;
}


/* ════════════════════════════════════════════════════════════════
   AEUDNSTHEME v29 — linked-ips.php helpers
   - aeu-profile-grid + aeu-profile-pill: clickable profile selector grid
   - aeu-pill-url: long URL chip with monospace + ellipsis
   - aeu-info-block: indented help text block
   - aeu-bullet-list: clean bullet list with muted color
   ════════════════════════════════════════════════════════════════ */

/* Profile selector — dense horizontal pills, code+name on left, mode badge on right.
   v29b (2026-05-16): user feedback "troppo incasinato con questi profili linkati,
   diventa ingestibile se me li metti tutti in una colona — le info poi non vanno
   uno sopra l'altro". Compact two-col layout, denser grid. */
.aeu-profile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px;
}
@media (max-width: 540px) {
    .aeu-profile-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
    }
}

.aeu-profile-pill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    min-height: 44px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--surface-2, var(--surface-card)) 50%, transparent);
    text-decoration: none;
    color: var(--text);
    transition: border-color var(--mat-dur-base, 200ms) var(--mat-ease-bouncy, cubic-bezier(.34,1.61,.7,1.3)),
                background var(--mat-dur-base, 200ms) var(--mat-ease-standard, cubic-bezier(0.4, 0, 0.2, 1));
}
.aeu-profile-pill:hover {
    border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
    background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.aeu-profile-pill-selected {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.aeu-profile-pill-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}
.aeu-profile-pill-code {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 12px;
    font-weight: 600;
    color: var(--accent);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
}
.aeu-profile-pill-name {
    font-size: 11px;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
}
.aeu-profile-pill-mode {
    flex: 0 0 auto;
    font-size: 10px !important;
    padding: 2px 6px !important;
    letter-spacing: 0.02em;
}

.aeu-pill-url {
    display: inline-block;
    padding: 6px 10px;
    background: var(--surface, #0a0a1a);
    border: 1px solid var(--border);
    border-radius: 6px;
    max-width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    vertical-align: middle;
}

.aeu-info-block {
    padding: 12px 14px;
    background: color-mix(in srgb, var(--info) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--info) 25%, var(--border));
    border-radius: 8px;
    font-size: 14px;
    color: var(--text);
}

.aeu-bullet-list {
    margin: 8px 0 0 0;
    padding-left: 20px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.6;
}
.aeu-bullet-list li {
    margin: 2px 0;
}
.aeu-bullet-list li strong {
    color: var(--text);
}


/* ════════════════════════════════════════════════════════════════
   AEUDNSTHEME v31 — theme-safety overrides
   User feedback (2026-05-16): "attenzione ai colori hardcoded —
   ci sono dei temi da rispettare". AEU DNS has 47 themes (light + dark);
   any `color: #fff` / `#00acc1` etc. breaks on the opposite-luminance
   themes. Force theme tokens everywhere.
   ════════════════════════════════════════════════════════════════ */

/* Plain outline button (no color sub-variant) — was inheriting white from
   .aeu-btn parent, invisible on light themes. */
.aeu-btn.aeu-btn-outline {
    background: transparent !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
    box-shadow: none !important;
}
.aeu-btn.aeu-btn-outline:hover {
    border-color: color-mix(in srgb, var(--accent) 60%, var(--border)) !important;
    color: var(--accent) !important;
    background: color-mix(in srgb, var(--accent) 8%, transparent) !important;
}
.aeu-btn.aeu-btn-outline .icon,
.aeu-btn.aeu-btn-outline svg {
    color: currentColor;
    fill: currentColor;
}

/* Color-variant outline buttons — replace MDP hardcoded with theme tokens */
.aeu-btn.aeu-btn-outline.aeu-btn-info {
    color: var(--info, #3b82f6) !important;
    border-color: color-mix(in srgb, var(--info, #3b82f6) 40%, var(--border)) !important;
}
.aeu-btn.aeu-btn-outline.aeu-btn-info:hover {
    color: var(--info-strong, var(--info)) !important;
    border-color: var(--info, #3b82f6) !important;
    background: color-mix(in srgb, var(--info, #3b82f6) 10%, transparent) !important;
}
.aeu-btn.aeu-btn-outline.aeu-btn-success {
    color: var(--success) !important;
    border-color: color-mix(in srgb, var(--success) 40%, var(--border)) !important;
}
.aeu-btn.aeu-btn-outline.aeu-btn-success:hover {
    color: var(--success-strong, var(--success)) !important;
    border-color: var(--success) !important;
    background: color-mix(in srgb, var(--success) 10%, transparent) !important;
}
.aeu-btn.aeu-btn-outline.aeu-btn-danger {
    color: var(--danger) !important;
    border-color: color-mix(in srgb, var(--danger) 40%, var(--border)) !important;
}
.aeu-btn.aeu-btn-outline.aeu-btn-danger:hover {
    color: var(--danger-strong, var(--danger)) !important;
    border-color: var(--danger) !important;
    background: color-mix(in srgb, var(--danger) 10%, transparent) !important;
}

/* Accent outline (active filter state) — explicit theme colors */
.aeu-btn.aeu-btn-outline.aeu-btn-accent,
.aeu-btn.aeu-btn-accent {
    background: var(--accent) !important;
    color: var(--on-accent, #fff) !important;
    border-color: var(--accent) !important;
    box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--accent) 40%, transparent);
}
.aeu-btn.aeu-btn-accent:hover {
    background: var(--accent-active, var(--accent)) !important;
}

/* Soft-danger button (delete/remove/revoke) — theme-aware tint */
.aeu-btn.aeu-btn-soft-danger {
    background: color-mix(in srgb, var(--danger) 10%, transparent) !important;
    color: var(--danger-strong, var(--danger)) !important;
    border: 1px solid color-mix(in srgb, var(--danger) 40%, var(--border)) !important;
    box-shadow: none !important;
}
.aeu-btn.aeu-btn-soft-danger:hover {
    background: color-mix(in srgb, var(--danger) 18%, transparent) !important;
    border-color: var(--danger) !important;
    color: var(--danger) !important;
}
.aeu-btn.aeu-btn-soft-danger .icon,
.aeu-btn.aeu-btn-soft-danger svg {
    color: currentColor;
    fill: currentColor;
}

/* All text inside stat-soft and section-soft cards must adapt to theme. */
.aeu-stat-card.aeu-stat-soft .aeu-stat-value,
.aeu-stat-card.aeu-stat-soft .aeu-stat-text strong {
    color: var(--text) !important;
}
.aeu-stat-card.aeu-stat-soft .aeu-stat-label,
.aeu-stat-card.aeu-stat-soft .aeu-card-footer small,
.aeu-stat-card.aeu-stat-soft .aeu-muted {
    color: var(--muted) !important;
}
.aeu-card.aeu-section-soft .aeu-section-title,
.aeu-card.aeu-section-soft .aeu-section-title strong,
.aeu-card.aeu-section-soft .aeu-card-body {
    color: var(--text);
}
.aeu-card.aeu-section-soft .aeu-muted,
.aeu-card.aeu-section-soft .text-muted,
.aeu-card.aeu-section-soft .aeu-section-title small {
    color: var(--muted) !important;
}
.aeu-card.aeu-section-soft strong {
    color: var(--text);
}

/* aeu-quick-actions row badges — theme-aware */
.aeu-quick-actions .aeu-badge {
    background: color-mix(in srgb, var(--surface-2, var(--surface-card)) 60%, transparent);
    color: var(--text);
    border: 1px solid var(--border);
}
.aeu-quick-actions .aeu-badge.aeu-badge-success {
    background: color-mix(in srgb, var(--success) 12%, transparent);
    color: var(--success-strong, var(--success));
    border-color: color-mix(in srgb, var(--success) 35%, var(--border));
}
.aeu-quick-actions .aeu-badge.aeu-badge-warning {
    background: color-mix(in srgb, var(--warning) 12%, transparent);
    color: var(--warning-strong, var(--warning));
    border-color: color-mix(in srgb, var(--warning) 35%, var(--border));
}
.aeu-quick-actions .aeu-badge.aeu-badge-danger {
    background: color-mix(in srgb, var(--danger) 12%, transparent);
    color: var(--danger-strong, var(--danger));
    border-color: color-mix(in srgb, var(--danger) 35%, var(--border));
}
.aeu-quick-actions .aeu-badge.aeu-badge-info {
    background: color-mix(in srgb, var(--info, #3b82f6) 12%, transparent);
    color: var(--info-strong, var(--info));
    border-color: color-mix(in srgb, var(--info, #3b82f6) 35%, var(--border));
}

/* Status dot — adapt to theme (was inheriting accent unconditionally) */
.aeu-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}
.aeu-status-dot.aeu-status-online  { background: var(--success); box-shadow: 0 0 6px color-mix(in srgb, var(--success) 50%, transparent); }
.aeu-status-dot.aeu-status-offline { background: var(--danger);  box-shadow: 0 0 6px color-mix(in srgb, var(--danger) 40%, transparent); }
.aeu-status-dot.aeu-status-unknown { background: var(--warning); box-shadow: 0 0 6px color-mix(in srgb, var(--warning) 40%, transparent); }

/* Form inputs inside soft cards — theme-aware */
.aeu-card.aeu-section-soft .form-control,
.aeu-card.aeu-section-soft input[type="text"],
.aeu-card.aeu-section-soft input[type="email"],
.aeu-card.aeu-section-soft input[type="password"],
.aeu-card.aeu-section-soft input[type="number"],
.aeu-card.aeu-section-soft input[type="url"],
.aeu-card.aeu-section-soft select,
.aeu-card.aeu-section-soft textarea {
    background: var(--surface, transparent);
    color: var(--text);
    border: 1px solid var(--border);
}
.aeu-card.aeu-section-soft .form-control:focus,
.aeu-card.aeu-section-soft input:focus,
.aeu-card.aeu-section-soft select:focus,
.aeu-card.aeu-section-soft textarea:focus {
    border-color: var(--accent);
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}
.aeu-card.aeu-section-soft .form-label,
.aeu-card.aeu-section-soft label {
    color: var(--text);
}


/* ════════════════════════════════════════════════════════════════
   AEUDNSTHEME v32 — user pages helpers (dashboard.php, profiles.php)
   - aeu-profile-block: standalone profile container inside a section card
   - aeu-endpoint-card: DoH/DoT endpoint pill with code + copy button
   ════════════════════════════════════════════════════════════════ */

.aeu-profile-block {
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: color-mix(in srgb, var(--surface-2, var(--surface-card)) 40%, transparent);
    margin-bottom: 14px;
}
.aeu-profile-block:last-child { margin-bottom: 0; }

.aeu-endpoint-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--surface, var(--surface-card)) 50%, transparent);
}
.aeu-endpoint-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--muted);
}
.aeu-endpoint-label .icon { width: 12px; height: 12px; color: var(--accent); }
.aeu-endpoint-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.aeu-endpoint-row code {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.aeu-endpoint-row .aeu-btn { flex: 0 0 auto; }


/* ════════════════════════════════════════════════════════════════
   AEUDNSTHEME v33 — keep action-row horizontal at every width
   User feedback (2026-05-16): "i pulsanti sicurezza privacy impostazione
   nella pagina sono in colona non va bene slineare bene". The original
   aeu-action-row had `flex-direction: column` at ≤600 px which stacked
   action buttons vertically. Override that — at every width the buttons
   stay horizontal and wrap onto multiple rows if there's no space.
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 600px) {
    .aeu-action-row {
        flex-direction: row !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
}

/* Buttons inside an action-row always stay inline; the row wraps as a
   whole when there's not enough horizontal space. */
.aeu-action-row > .aeu-btn,
.aeu-action-row > a.aeu-btn,
.aeu-action-row > form,
.aeu-action-row > button {
    flex: 0 0 auto;
    white-space: nowrap;
}


/* ════════════════════════════════════════════════════════════════
   AEUDNSTHEME v34 — admin nav structure (desktop + mobile hamburger)
   User feedback (2026-05-16): "nel menu sia desktop sia mobile habirger
   non si riesce a distinguere le voci del menu dalle sezioni menu".
   Section headers (Users / Profiles / Infrastructure / System) and
   sub-items (All Users / Pending / etc.) were rendered identically,
   confusing the hierarchy. This v34 makes the distinction unmistakable
   in both layouts.
   ════════════════════════════════════════════════════════════════ */

/* ── DESKTOP DROPDOWN — items indented + soft hover ─────────────── */
.nav-dropdown {
    background: var(--surface-card, var(--bg-secondary)) !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    padding: 6px !important;
    box-shadow: 0 8px 24px color-mix(in srgb, var(--text) 12%, transparent), 0 2px 8px color-mix(in srgb, var(--text) 8%, transparent) !important;
    min-width: 200px !important;
}
.nav-dropdown .nav-item {
    display: flex !important;
    align-items: center !important;
    padding: 9px 12px !important;
    margin: 1px 0 !important;
    border-radius: 6px !important;
    color: var(--text) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    transition: background var(--mat-dur-fast, 150ms) var(--mat-ease-standard, ease);
}
.nav-dropdown .nav-item::before {
    content: '';
    flex: 0 0 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--muted);
    margin-right: 10px;
    opacity: 0.5;
    transition: all var(--mat-dur-fast, 150ms) var(--mat-ease-standard, ease);
}
.nav-dropdown .nav-item:hover {
    background: color-mix(in srgb, var(--accent) 10%, transparent) !important;
    color: var(--accent) !important;
}
.nav-dropdown .nav-item:hover::before {
    background: var(--accent);
    opacity: 1;
    transform: scale(1.4);
}
.nav-dropdown .nav-item.active {
    background: color-mix(in srgb, var(--accent) 16%, transparent) !important;
    color: var(--accent) !important;
    font-weight: 600 !important;
}
.nav-dropdown .nav-item.active::before {
    background: var(--accent);
    opacity: 1;
    transform: scale(1.5);
}

/* ── MOBILE HAMBURGER NAV (≤1100px) — clear section hierarchy ───── */
@media (max-width: 1100px) {
    .nav-inner {
        padding: 8px !important;
        gap: 2px !important;
        border-top: 1px solid var(--border) !important;
        background: var(--surface-card, var(--bg-secondary)) !important;
    }

    /* Top-level direct nav items (Dashboard, User Panel) — bold and prominent */
    .nav-inner > .nav-item {
        width: 100%;
        padding: 12px 14px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        border-radius: 8px !important;
        color: var(--text) !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        margin: 0 !important;
    }
    .nav-inner > .nav-item:hover {
        background: color-mix(in srgb, var(--accent) 10%, transparent) !important;
    }
    .nav-inner > .nav-item.active {
        background: color-mix(in srgb, var(--accent) 16%, transparent) !important;
        color: var(--accent) !important;
    }
    .nav-inner > .nav-item:not(:first-child) {
        margin-top: 4px !important;
    }

    /* Strip the "margin-left: auto" inline style that pushes User Panel
       to the right edge — meaningless in a vertical column. */
    .nav-inner > .nav-item[style*="margin-left: auto"] {
        margin-left: 0 !important;
        border-top: 1px solid var(--border);
        margin-top: 8px !important;
        padding-top: 16px !important;
    }

    /* Section group (Users / Profiles / Infrastructure / System) */
    .nav-inner .nav-group {
        width: 100%;
        margin-top: 6px !important;
    }
    .nav-inner .nav-group:first-of-type {
        margin-top: 4px !important;
    }

    /* Section header (the toggle button "Users", "Profiles" etc.) —
       uppercase + tracking + small + muted so the eye reads "category". */
    .nav-inner .nav-group-toggle {
        width: 100%;
        text-align: left !important;
        padding: 8px 14px 6px 14px !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        text-transform: uppercase;
        letter-spacing: 1.2px !important;
        color: var(--muted) !important;
        background: transparent !important;
        border: none !important;
        border-bottom: 1px solid var(--border) !important;
        border-radius: 0 !important;
        margin-bottom: 4px !important;
        cursor: default;
        pointer-events: none;  /* Section is always "open" in mobile, no toggle needed */
    }
    .nav-inner .nav-group-toggle::after {
        display: none !important;  /* Remove the ▾ chevron */
    }
    .nav-inner .nav-group-toggle.has-active {
        color: var(--accent) !important;
        border-bottom-color: var(--accent) !important;
    }

    /* Sub-items inside a section — indented + smaller + dot bullet */
    .nav-inner .nav-dropdown {
        display: block !important;
        position: static !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 0 0 6px !important;
        min-width: 0 !important;
    }
    .nav-inner .nav-dropdown .nav-item {
        width: 100% !important;
        padding: 10px 12px 10px 24px !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        margin: 1px 0 !important;
        border-radius: 6px !important;
        color: var(--text) !important;
    }
    .nav-inner .nav-dropdown .nav-item::before {
        content: '';
        position: relative;
        left: -12px;
        flex: 0 0 4px;
        height: 4px;
        border-radius: 50%;
        background: var(--muted);
        margin-right: 0;
        opacity: 0.4;
    }
    .nav-inner .nav-dropdown .nav-item:hover {
        background: color-mix(in srgb, var(--accent) 8%, transparent) !important;
        color: var(--accent) !important;
    }
    .nav-inner .nav-dropdown .nav-item:hover::before {
        background: var(--accent);
        opacity: 1;
    }
    .nav-inner .nav-dropdown .nav-item.active {
        background: color-mix(in srgb, var(--accent) 14%, transparent) !important;
        color: var(--accent) !important;
        font-weight: 600 !important;
    }
    .nav-inner .nav-dropdown .nav-item.active::before {
        background: var(--accent);
        opacity: 1;
        transform: scale(1.4);
    }
}

/* ── DESKTOP > 1100px: section toggle gets a clearer affordance ─── */
@media (min-width: 1101px) {
    .nav-group-toggle {
        font-weight: 500 !important;
        gap: 6px !important;
    }
    .nav-group-toggle::after {
        opacity: 0.5;
        transition: transform var(--mat-dur-base, 200ms) var(--mat-ease-standard, ease);
    }
    .nav-group:hover .nav-group-toggle::after,
    .nav-group.open .nav-group-toggle::after {
        transform: rotate(180deg);
        opacity: 1;
    }
    .nav-group:hover .nav-group-toggle,
    .nav-group.open .nav-group-toggle {
        background: color-mix(in srgb, var(--accent) 8%, transparent) !important;
        color: var(--accent) !important;
    }
}


/* ════════════════════════════════════════════════════════════════
   AEUDNSTHEME v35 — admin nav hierarchy (FIXED — correct classes)
   Replaces v34 (wrong target). The admin uses:
   - `.mobile-menu` (fixed overlay) with `.menu-section` div headers
     and plain `<a>` link items.
   - `.header-nav` (desktop) with `.nav-item` direct links and
     `.nav-group > .nav-group-toggle + .nav-dropdown > .nav-item`.

   User feedback: "nel menu sia desktop sia mobile habirger non si
   riesce a distinguere le voci del menu dalle sezioni menu".
   ════════════════════════════════════════════════════════════════ */

/* ── MOBILE MENU — clear section/item hierarchy ─────────────────── */

.mobile-menu .menu-section {
    /* Section header — uppercase tag with hairline underline */
    padding: 18px 16px 8px 16px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.4px !important;
    color: var(--muted) !important;
    border-bottom: 1px solid var(--border) !important;
    margin-bottom: 4px !important;
}
.mobile-menu .menu-section:first-of-type {
    padding-top: 8px !important;
}

.mobile-menu > a {
    /* Menu items — indented from section header, no per-item border */
    display: flex !important;
    align-items: center !important;
    padding: 11px 16px 11px 28px !important;
    color: var(--text) !important;
    border-bottom: 0 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border-radius: 6px !important;
    margin: 1px 8px !important;
    text-decoration: none !important;
    transition: background var(--mat-dur-fast, 150ms) var(--mat-ease-standard, ease);
}
.mobile-menu > a::before {
    content: '';
    flex: 0 0 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--muted);
    margin-right: 12px;
    margin-left: -16px;
    opacity: 0.4;
    transition: all var(--mat-dur-fast, 150ms) var(--mat-ease-standard, ease);
}
.mobile-menu > a:hover {
    background: color-mix(in srgb, var(--accent) 10%, transparent) !important;
    color: var(--accent) !important;
}
.mobile-menu > a:hover::before {
    background: var(--accent);
    opacity: 1;
    transform: scale(1.4);
}
.mobile-menu > a.active {
    background: color-mix(in srgb, var(--accent) 16%, transparent) !important;
    color: var(--accent) !important;
    font-weight: 600 !important;
}
.mobile-menu > a.active::before {
    background: var(--accent);
    opacity: 1;
    transform: scale(1.5);
}

/* Special-case the "Actions" mini-group (User Panel + Logout) */
.mobile-menu .mobile-link-user,
.mobile-menu .mobile-link-logout {
    display: flex !important;
    align-items: center !important;
    padding: 12px 16px !important;
    margin: 6px 8px !important;
    border-radius: 8px !important;
    border-bottom: 0 !important;
    font-weight: 600 !important;
    font-size: 14px !important;
}
.mobile-menu .mobile-link-user::before,
.mobile-menu .mobile-link-logout::before {
    content: none !important;
}
.mobile-menu .mobile-link-user {
    background: color-mix(in srgb, var(--accent) 14%, transparent) !important;
    color: var(--accent) !important;
    border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)) !important;
}
.mobile-menu .mobile-link-user:hover {
    background: color-mix(in srgb, var(--accent) 22%, transparent) !important;
}
.mobile-menu .mobile-link-logout {
    background: color-mix(in srgb, var(--danger) 10%, transparent) !important;
    color: var(--danger-strong, var(--danger)) !important;
    border: 1px solid color-mix(in srgb, var(--danger) 30%, var(--border)) !important;
}
.mobile-menu .mobile-link-logout:hover {
    background: color-mix(in srgb, var(--danger) 18%, transparent) !important;
    color: var(--danger) !important;
}

/* Language row (mobile) — make it a soft selector */
.mobile-menu .mobile-lang-row {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    padding: 8px 16px 14px 16px !important;
    border-bottom: 1px solid var(--border) !important;
    margin-bottom: 4px !important;
}
.mobile-menu .mobile-lang-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 10px !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    background: transparent !important;
    border-bottom: 1px solid var(--border) !important;
    margin: 0 !important;
}
.mobile-menu .mobile-lang-btn.active {
    border-color: var(--accent) !important;
    background: color-mix(in srgb, var(--accent) 14%, transparent) !important;
    box-shadow: 0 0 0 1px var(--accent) inset;
}
.mobile-menu .mobile-lang-btn::before { content: none !important; }


/* ── DESKTOP DROPDOWN — sub-items get a dot bullet + soft hover ── */

.header-nav .nav-dropdown {
    background: var(--surface-card, var(--bg-secondary)) !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    padding: 6px !important;
    box-shadow: 0 8px 24px color-mix(in srgb, #000 30%, transparent), 0 2px 6px color-mix(in srgb, #000 20%, transparent) !important;
    min-width: 200px !important;
    margin-top: 4px !important;
}
.header-nav .nav-dropdown a,
.header-nav .nav-dropdown .nav-item {
    display: flex !important;
    align-items: center !important;
    padding: 9px 12px !important;
    margin: 1px 0 !important;
    border-radius: 6px !important;
    color: var(--text) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background var(--mat-dur-fast, 150ms) ease, color var(--mat-dur-fast, 150ms) ease;
}
.header-nav .nav-dropdown a::before,
.header-nav .nav-dropdown .nav-item::before {
    content: '';
    flex: 0 0 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--muted);
    margin-right: 10px;
    opacity: 0.45;
    transition: all var(--mat-dur-fast, 150ms) ease;
}
.header-nav .nav-dropdown a:hover,
.header-nav .nav-dropdown .nav-item:hover {
    background: color-mix(in srgb, var(--accent) 10%, transparent) !important;
    color: var(--accent) !important;
}
.header-nav .nav-dropdown a:hover::before,
.header-nav .nav-dropdown .nav-item:hover::before {
    background: var(--accent);
    opacity: 1;
    transform: scale(1.4);
}
.header-nav .nav-dropdown a.active,
.header-nav .nav-dropdown .nav-item.active {
    background: color-mix(in srgb, var(--accent) 16%, transparent) !important;
    color: var(--accent) !important;
    font-weight: 600 !important;
}
.header-nav .nav-dropdown a.active::before,
.header-nav .nav-dropdown .nav-item.active::before {
    background: var(--accent);
    opacity: 1;
    transform: scale(1.5);
}

/* Desktop section toggle — show a clearer affordance */
.header-nav .nav-group-toggle {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}
.header-nav .nav-group-toggle::after {
    content: '▾' !important;
    font-size: 10px;
    opacity: 0.55;
    margin-left: 2px;
    transition: transform var(--mat-dur-base, 200ms) ease, opacity var(--mat-dur-base, 200ms) ease;
}
.header-nav .nav-group:hover .nav-group-toggle::after,
.header-nav .nav-group.open .nav-group-toggle::after {
    transform: rotate(180deg);
    opacity: 1;
}
.header-nav .nav-group:hover .nav-group-toggle,
.header-nav .nav-group.open .nav-group-toggle {
    background: color-mix(in srgb, var(--accent) 10%, transparent) !important;
    color: var(--accent) !important;
}


/* ════════════════════════════════════════════════════════════════
   AEUDNSTHEME v36 — long-value overflow fix (cert IDs, hashes, IPv6)
   User feedback (2026-05-16): "atyenzione ci sono dei card che il
   contenuto quasi sborda — sistemare e anche lo skill così non si
   ripetono i errori". Long monospace strings (serial numbers,
   SHA256 fingerprints, IPv6, etc.) inside a grid cell can push the
   cell wider than the column track, breaking the layout.

   GENERIC FIX — every grid item gets `min-width: 0` (CSS Grid default
   is `auto`, which lets content overflow the column track), and every
   code/mono element inside it gets `overflow-wrap: anywhere` so long
   unbroken strings wrap at any character if needed.
   ════════════════════════════════════════════════════════════════ */

/* Grid cells never overflow their track */
.aeu-grid > *,
.aeu-card-body > .aeu-grid > *,
.aeu-grid-2 > *, .aeu-grid-3 > *, .aeu-grid-4 > *, .aeu-grid-5 > * {
    min-width: 0 !important;
}

/* Monospace code inside any card/grid wraps long strings */
.aeu-card code,
.aeu-card .text-mono,
.aeu-stat-card .text-mono,
.aeu-stat-card code,
.aeu-status-row code,
.aeu-mini-card code,
.aeu-mini-card .text-mono,
.aeu-endpoint-row code {
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 100%;
}

/* The pseudo-table cards used for cert details, system info, CA info, etc. */
.aeu-stat-text,
.aeu-status-row,
.aeu-card-body,
.aeu-mini-card {
    min-width: 0;
}

/* Specific fix for user certificates page — cert-detail grid */
.cert-details {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    gap: 12px !important;
}
.cert-detail {
    min-width: 0;
    overflow: hidden;
}
.cert-detail-value {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    line-height: 1.45;
    max-width: 100%;
}

/* The same pattern applies anywhere a "label + monospace value" pair
   sits in a 2-col grid (admin/quantum.php CA info, admin/redis.php
   connection details, admin/certificates.php export-format table, etc.). */
.aeu-status-row > code,
.aeu-status-row > .text-mono {
    flex: 1 1 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Endpoint card (DoH/DoT) — long URL with copy button */
.aeu-endpoint-row {
    flex-wrap: nowrap;
    min-width: 0;
}
.aeu-endpoint-row > code {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;   /* one-liner with ellipsis (full URL on hover via title attr) */
}
@media (max-width: 540px) {
    .aeu-endpoint-row > code {
        white-space: normal;
        overflow-wrap: anywhere;
        text-overflow: clip;
    }
}


/* ════════════════════════════════════════════════════════════════
   AEUDNSTHEME v37 — unify user-page custom classes with admin
   User feedback (2026-05-16): "il css utente il css admin per quanto
   riguarda le stesse variabili devono essere uguali — non ce sistema,
   non e pulito, contenuto non e perfetto nelle card su utenti".

   User pages (/pages/*.php) use custom class names (.profile-card,
   .setup-card, .settings-card, .endpoint-card, .info-box, .cert-detail,
   .user-stat-card, etc.) that pre-date the aeudnstheme soft system.
   This block applies the same geometry/colors/spacing/overflow rules
   to those classes, so the user panel matches the admin panel
   visually and adapts to all 47 themes.
   ════════════════════════════════════════════════════════════════ */

/* ── 1. UNIVERSAL: all card-like containers get the same baseline ── */

.profile-card,
.setup-card,
.settings-card,
.endpoint-card,
.security-section,
.cert-status-card,
.cert-details,
.user-stat-card,
.user-card,
.feature-card,
.setup-tip-box,
.setup-section,
.info-box {
    min-width: 0;
}

/* ── 2. UNIVERSAL: all monospace content wraps long strings ─────── */

.profile-card code, .profile-card .text-mono,
.setup-card code, .setup-card .text-mono,
.setup-code-block, .setup-code-box,
.settings-card code, .settings-card .text-mono,
.endpoint-card code, .endpoint-card .text-mono,
.cert-detail-value, .cert-detail code,
.user-card code, .endpoint-note code,
.endpoint-item code, .endpoint-url code,
.aeu-code-block {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    max-width: 100% !important;
}

/* ── 3. CERT-DETAILS — same geometry as aeu-stat-card / aeu-stat-soft ── */

.cert-details {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 12px !important;
    margin-bottom: 16px;
}
.cert-detail {
    background: color-mix(in srgb, var(--surface-2, var(--surface-card)) 50%, transparent) !important;
    border: 1px solid var(--border) !important;
    padding: 12px 14px !important;
    border-radius: 10px !important;
    min-width: 0;
    overflow: hidden;
}
.cert-detail-label {
    font-size: 10px !important;
    color: var(--muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    font-weight: 600 !important;
    margin-bottom: 6px !important;
}
.cert-detail-value {
    font-size: 13px !important;
    font-weight: 500 !important;
    font-family: var(--font-mono, 'JetBrains Mono', monospace) !important;
    color: var(--text) !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    line-height: 1.5 !important;
}

/* ── 4. CERT-STATUS-CARD — soft variant with theme-aware tint ──── */

.cert-status-card {
    background: var(--surface-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    padding: 24px !important;
    text-align: center;
    margin-bottom: 16px;
}
.cert-status-card.cert-status-valid {
    border-color: color-mix(in srgb, var(--success) 40%, var(--border)) !important;
    background: color-mix(in srgb, var(--success) 6%, var(--surface-card)) !important;
}
.cert-status-card.cert-status-expiring {
    border-color: color-mix(in srgb, var(--warning) 40%, var(--border)) !important;
    background: color-mix(in srgb, var(--warning) 6%, var(--surface-card)) !important;
}
.cert-status-card.cert-status-expired,
.cert-status-card.cert-status-revoked {
    border-color: color-mix(in srgb, var(--danger) 40%, var(--border)) !important;
    background: color-mix(in srgb, var(--danger) 6%, var(--surface-card)) !important;
}
.cert-status-card.cert-status-none {
    border-style: dashed !important;
}
.cert-status-icon {
    font-size: 36px !important;
    margin-bottom: 8px !important;
    line-height: 1 !important;
}
.cert-status-title {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--text) !important;
    margin-bottom: 4px !important;
}
.cert-status-subtitle {
    font-size: 13px !important;
    color: var(--muted) !important;
}

/* ── 5. PROFILE-CARD — same look as aeu-section-soft ─────────────── */

.profile-card {
    background: var(--surface-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    padding: 16px !important;
    margin-bottom: 12px !important;
}

/* ── 6. SETUP / SETTINGS / SECURITY card baseline ───────────────── */

.setup-card,
.settings-card,
.security-section,
.user-card {
    background: var(--surface-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    padding: 16px !important;
    margin-bottom: 12px !important;
}

.setup-section,
.setup-section-header {
    background: var(--surface-card);
    border-radius: 12px;
}
.setup-card-title,
.settings-card-header h3,
.section-header h2,
.section-header h3 {
    color: var(--text) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
}

/* ── 7. SETUP CODE BLOCK — proper code styling, wraps long lines ── */

.setup-code-block,
.setup-code-box {
    background: var(--surface) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    padding: 10px 12px !important;
    font-family: var(--font-mono, 'JetBrains Mono', monospace) !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    overflow-x: auto !important;
    word-break: normal;
    white-space: pre-wrap;
    margin: 8px 0;
}

/* ── 8. ENDPOINT CARDS (DoH/DoT URL pills) ──────────────────────── */

.endpoint-card,
.endpoint-item {
    background: color-mix(in srgb, var(--surface-2, var(--surface-card)) 50%, transparent) !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    padding: 12px !important;
    min-width: 0;
}
.endpoint-url,
.endpoint-card-info {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.endpoint-url code,
.endpoint-item code,
.endpoint-card-info code {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 12px;
    color: var(--text);
}
@media (max-width: 540px) {
    .endpoint-url code,
    .endpoint-item code,
    .endpoint-card-info code {
        white-space: normal;
        overflow-wrap: anywhere;
        text-overflow: clip;
    }
}

/* ── 9. INFO-BOX — unify all variants ──────────────────────────── */

.info-box {
    background: color-mix(in srgb, var(--info, #3b82f6) 8%, var(--surface-card)) !important;
    border: 1px solid color-mix(in srgb, var(--info, #3b82f6) 25%, var(--border)) !important;
    border-radius: 10px !important;
    padding: 14px 16px !important;
    color: var(--text) !important;
}
.info-box.purple,
.info-box-accent {
    background: color-mix(in srgb, var(--accent) 10%, var(--surface-card)) !important;
    border-color: color-mix(in srgb, var(--accent) 30%, var(--border)) !important;
}
.info-box.warning {
    background: color-mix(in srgb, var(--warning) 8%, var(--surface-card)) !important;
    border-color: color-mix(in srgb, var(--warning) 25%, var(--border)) !important;
}
.info-box.success {
    background: color-mix(in srgb, var(--success) 8%, var(--surface-card)) !important;
    border-color: color-mix(in srgb, var(--success) 25%, var(--border)) !important;
}
.info-box.danger {
    background: color-mix(in srgb, var(--danger) 8%, var(--surface-card)) !important;
    border-color: color-mix(in srgb, var(--danger) 25%, var(--border)) !important;
}
.info-box strong {
    color: var(--text);
    display: block;
    margin-bottom: 4px;
}
.info-box p,
.info-box ul {
    font-size: 13px !important;
    color: var(--muted) !important;
    margin: 4px 0 0 0 !important;
}
.info-box ul { padding-left: 20px !important; }
.info-box ul li { margin-bottom: 3px; }

/* ── 10. USER STAT CARDS — match aeu-stat-soft geometry ────────── */

.user-stats-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
}
.user-stat-card {
    background: var(--surface-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    padding: 14px 16px !important;
    min-width: 0;
}
.user-stat-card::before { display: none; }   /* remove the top accent bar */
.user-stat-icon {
    background: color-mix(in srgb, var(--accent) 12%, transparent) !important;
    color: var(--accent) !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 9px !important;
}
.user-stat-card.success .user-stat-icon { background: color-mix(in srgb, var(--success) 14%, transparent) !important; color: var(--success-strong, var(--success)) !important; }
.user-stat-card.warning .user-stat-icon { background: color-mix(in srgb, var(--warning) 16%, transparent) !important; color: var(--warning-strong, var(--warning)) !important; }
.user-stat-card.danger  .user-stat-icon { background: color-mix(in srgb, var(--danger) 14%, transparent) !important;  color: var(--danger-strong, var(--danger)) !important; }
.user-stat-value {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--text) !important;
    line-height: 1.1 !important;
}
.user-stat-label {
    font-size: 11px !important;
    color: var(--muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    font-weight: 600 !important;
}

/* ── 11. SETUP STEPS / STEP NUMBERS — use accent theme ─────────── */

.setup-step {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}
.setup-step:last-child { border-bottom: 0; }
.setup-step-number {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 14%, transparent) !important;
    color: var(--accent) !important;
    font-weight: 700;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.setup-step-content {
    flex: 1 1 0;
    min-width: 0;
    color: var(--text);
}
.setup-step-content code {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* ── 12. SETTINGS TOGGLE LIST — uniform soft style ─────────────── */

.settings-toggle-list,
.settings-toggle {
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}
.settings-toggle:last-child { border-bottom: 0; }
.settings-toggle-list { padding: 0; }

/* ── 13. DOMAIN LIST (allowlist/denylist) — soft variant ───────── */

.domainlist-card,
.domainlist-add-card,
.domainlist-info,
.domainlist-stat {
    background: var(--surface-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
}

/* ── 14. SECURITY SECTION SOFT TINTS (Threat Protection, etc.) ─── */

.security-section {
    margin-bottom: 12px;
}
.security-section-title {
    color: var(--text) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
}
/* === AEUDNSTHEME v38 user pages === */

/* ============================================================
   AEUDNSTHEME v38 — user pages (account, privacy, certificates)
   Adds proper soft-variant components missing from prior versions
   2026-05-15
   ============================================================ */

/* --- Pills (theme-aware soft pill badge) -------------------- */
.aeu-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 3px 10px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    letter-spacing: .3px !important;
    text-transform: uppercase !important;
    border: 1px solid transparent !important;
    white-space: nowrap !important;
}
.aeu-pill-success { background: color-mix(in srgb, var(--success) 14%, transparent) !important; color: var(--success-strong, var(--success)) !important; border-color: color-mix(in srgb, var(--success) 32%, transparent) !important; }
.aeu-pill-warning { background: color-mix(in srgb, var(--warning) 14%, transparent) !important; color: var(--warning-strong, var(--warning)) !important; border-color: color-mix(in srgb, var(--warning) 32%, transparent) !important; }
.aeu-pill-danger  { background: color-mix(in srgb, var(--danger) 14%, transparent) !important;  color: var(--danger-strong, var(--danger)) !important;  border-color: color-mix(in srgb, var(--danger) 32%, transparent) !important; }
.aeu-pill-info    { background: color-mix(in srgb, var(--info) 14%, transparent) !important;    color: var(--info-strong, var(--info)) !important;    border-color: color-mix(in srgb, var(--info) 32%, transparent) !important; }
.aeu-pill-accent  { background: color-mix(in srgb, var(--accent) 14%, transparent) !important;  color: var(--accent) !important;                       border-color: color-mix(in srgb, var(--accent) 32%, transparent) !important; }
.aeu-pill-muted   { background: color-mix(in srgb, var(--muted) 12%, transparent) !important;   color: var(--muted) !important;                        border-color: var(--border) !important; }

/* --- Welcome card (account page header) --------------------- */
.aeu-welcome-card .aeu-card-body { padding: 16px 20px !important; }
.aeu-welcome {
    display: flex !important;
    gap: 16px !important;
    align-items: center !important;
    flex-wrap: wrap !important;
}
.aeu-welcome-avatar {
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    background: color-mix(in srgb, var(--accent) 22%, var(--surface-2, var(--surface-card))) !important;
    color: var(--accent) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    flex-shrink: 0 !important;
}
.aeu-welcome-text { flex: 1; min-width: 0; }
.aeu-welcome-text .page-title { margin: 0 0 4px 0 !important; font-size: 22px !important; }
.aeu-welcome-text .page-title .text-accent { color: var(--accent) !important; }
.aeu-welcome-text p { margin: 0 !important; }

/* --- Theme selector (account → appearance) ------------------ */
.aeu-theme-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important;
    gap: 12px !important;
    margin-top: 12px !important;
}
.aeu-theme-card {
    position: relative;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 14px 10px !important;
    background: var(--surface-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    transition: border-color .15s ease, transform .15s ease !important;
    color: var(--text) !important;
    font-family: inherit !important;
    text-align: center;
}
.aeu-theme-card:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)) !important; }
.aeu-theme-card.active {
    border-color: var(--accent) !important;
    background: color-mix(in srgb, var(--accent) 8%, var(--surface-card)) !important;
}
.aeu-theme-swatches { display: flex; gap: 4px; }
.aeu-theme-swatch {
    width: 18px; height: 18px; border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--text) 16%, transparent);
}
.aeu-theme-name { font-size: 12px; font-weight: 600; color: var(--text); }
.aeu-theme-check {
    position: absolute; top: 6px; right: 6px;
    width: 18px; height: 18px;
    background: var(--accent); color: var(--on-accent, #fff);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.aeu-theme-check svg { width: 12px; height: 12px; fill: currentColor; }

/* --- Security row (account → security) ---------------------- */
.aeu-security-row {
    display: grid !important;
    grid-template-columns: 48px 1fr auto auto !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 14px 0 !important;
    border-bottom: 1px solid var(--border) !important;
    min-width: 0 !important;
}
.aeu-security-row:last-child { border-bottom: none !important; }
.aeu-security-icon {
    width: 40px !important; height: 40px !important;
    border-radius: 8px !important;
    background: color-mix(in srgb, var(--accent) 12%, transparent) !important;
    color: var(--accent) !important;
    display: flex; align-items: center; justify-content: center !important;
}
.aeu-security-icon svg { width: 18px; height: 18px; fill: currentColor; }
.aeu-security-row.is-enabled .aeu-security-icon {
    background: color-mix(in srgb, var(--success) 14%, transparent) !important;
    color: var(--success-strong, var(--success)) !important;
}
.aeu-security-info { min-width: 0; }
.aeu-security-info strong { display: block; font-size: 14px; color: var(--text); }
.aeu-security-info p { margin: 2px 0 0 !important; }
.aeu-security-status { min-width: 0; }
.aeu-security-actions {
    display: flex; gap: 6px; align-items: center;
    min-width: 0;
}
.aeu-security-actions form { margin: 0; }

@media (max-width: 700px) {
    .aeu-security-row {
        grid-template-columns: 40px 1fr !important;
        grid-template-areas:
            "icon  info"
            "icon  status"
            "actions actions" !important;
        row-gap: 8px !important;
    }
    .aeu-security-row > .aeu-security-icon    { grid-area: icon; }
    .aeu-security-row > .aeu-security-info    { grid-area: info; }
    .aeu-security-row > .aeu-security-status  { grid-area: status; }
    .aeu-security-row > .aeu-security-actions { grid-area: actions; flex-wrap: wrap; }
}

/* --- Info card (account → account info quad) ---------------- */
.aeu-info-card {
    background: color-mix(in srgb, var(--surface-2, var(--surface-card)) 50%, var(--surface-card)) !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    padding: 12px 14px !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}
.aeu-info-card .aeu-info-label {
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: .6px !important;
    color: var(--muted) !important;
}
.aeu-info-card .aeu-info-value {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--text) !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    line-height: 1.3 !important;
}

/* --- Data action row (account → data & privacy pair) -------- */
.aeu-data-row {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px !important;
    background: var(--surface-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    min-width: 0 !important;
}
.aeu-data-row-danger {
    background: color-mix(in srgb, var(--danger) 6%, var(--surface-card)) !important;
    border-color: color-mix(in srgb, var(--danger) 30%, var(--border)) !important;
}
.aeu-data-icon {
    width: 40px !important; height: 40px !important;
    margin: 0 !important;
    border-radius: 8px !important;
    flex-shrink: 0 !important;
}
.aeu-data-icon svg { width: 18px !important; height: 18px !important; }
.aeu-data-content { flex: 1; min-width: 0; }
.aeu-data-content strong { display: block; font-size: 14px; color: var(--text); }
.aeu-data-content p { margin: 2px 0 0 !important; }

@media (max-width: 540px) {
    .aeu-data-row { flex-wrap: wrap; }
    .aeu-data-row > .aeu-btn { width: 100%; }
}

/* --- Privacy "config row" (title+desc left, toggle right) ---- */
.aeu-config-row {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid var(--border) !important;
    min-width: 0 !important;
}
.aeu-config-row:last-child { border-bottom: none !important; }
.aeu-config-info { flex: 1; min-width: 0; }
.aeu-config-info strong { display: block; font-size: 14px; color: var(--text); }
.aeu-config-info p { margin: 2px 0 0 !important; }
.aeu-config-row > label.toggle { flex-shrink: 0; }

/* --- Privacy category chip grid ----------------------------- */
.aeu-cat-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    gap: 10px !important;
}
.aeu-cat-chip {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 14px !important;
    background: var(--surface-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    min-width: 0 !important;
}
.aeu-cat-icon {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent);
    display: inline-flex !important;
    align-items: center; justify-content: center;
    flex-shrink: 0;
}
.aeu-cat-icon svg { width: 16px; height: 16px; fill: currentColor; }
.aeu-cat-name { font-size: 13px; font-weight: 600; color: var(--text); }
.aeu-cat-count { font-size: 11px; color: var(--muted); }

/* --- Backup codes display ----------------------------------- */
.aeu-backup-codes {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
    gap: 8px !important;
    margin-top: 16px !important;
}
.aeu-backup-code {
    display: block !important;
    padding: 8px 12px !important;
    background: var(--surface-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 6px !important;
    font-family: var(--font-mono, monospace) !important;
    font-size: 14px !important;
    text-align: center !important;
    color: var(--text) !important;
    letter-spacing: 1px !important;
}

/* --- 2FA setup screen (account) ----------------------------- */
.aeu-2fa-setup {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    gap: 24px !important;
    align-items: center !important;
}
.aeu-2fa-qr { text-align: center; min-width: 0; }
.aeu-2fa-qr img { max-width: 220px; width: 100%; background: #fff; padding: 8px; border-radius: 8px; }
.aeu-2fa-qr p { margin-top: 8px !important; }
.aeu-2fa-or { color: var(--muted); position: relative; padding: 0 12px; }
.aeu-2fa-or span {
    display: inline-block;
    padding: 4px 8px;
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.aeu-2fa-manual { min-width: 0; }
.aeu-2fa-manual code {
    display: block;
    word-break: break-all;
    padding: 10px 12px;
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-family: var(--font-mono, monospace);
    font-size: 13px;
    color: var(--text);
    margin-top: 8px;
}

@media (max-width: 720px) {
    .aeu-2fa-setup { grid-template-columns: 1fr !important; }
    .aeu-2fa-or { text-align: center; padding: 8px 0; }
}

/* --- Modal alignment with soft theme ------------------------ */
.modal { z-index: 1200; }
.modal.hidden { display: none !important; }
.modal .modal-content {
    background: var(--surface-card) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    padding: 20px !important;
    max-width: 520px;
    margin: 40px auto;
    box-shadow: 0 24px 80px rgba(0,0,0,0.25);
}
.modal .modal-content.modal-danger {
    border-color: color-mix(in srgb, var(--danger) 40%, var(--border)) !important;
}
.modal .modal-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}
.modal .modal-header h3 {
    margin: 0; font-size: 16px; color: var(--text);
    display: flex; align-items: center; gap: 8px;
}
.modal .modal-header h3 svg { width: 18px; height: 18px; fill: currentColor; }
.modal .modal-close {
    background: transparent; border: none; color: var(--muted);
    font-size: 24px; line-height: 1; cursor: pointer; padding: 4px 8px;
    border-radius: 6px;
}
.modal .modal-close:hover { background: var(--surface-2, var(--surface-card)); color: var(--text); }
.modal .form-group { margin-bottom: 14px; }
.modal .form-group .form-label { display: block; margin-bottom: 6px; font-size: 13px; color: var(--text); font-weight: 500; }
.modal .form-group .form-control { width: 100%; }

/* --- Certificate status card (user → certificates) ---------- */
/* uses .aeu-pill-* variants applied to the status badge */
/* uses .aeu-info-card grid for the cert detail values */
/* download grid uses .aeu-grid-4 and .aeu-mini-card */

/* Hard min-width:0 reinforcement on every aeu-grid child */
.aeu-grid > *,
.aeu-grid-2 > *,
.aeu-grid-3 > *,
.aeu-grid-4 > *,
.aeu-grid-5 > *,
.aeu-grid-6 > * { min-width: 0 !important; }

/* --- mobile: aeu-data-row & aeu-config-row stack ----------- */
@media (max-width: 480px) {
    .aeu-config-row { flex-wrap: wrap; }
    .aeu-data-row { flex-direction: column; align-items: flex-start; }
    .aeu-data-row > .aeu-btn { align-self: stretch; }
}

/* --- aeu-section-soft small spacing fix --------------------- */
/* When section card-body contains aeu-grid right after the header,
   nudge the grid up so it doesn't have huge top padding gap */
.aeu-card.aeu-section-soft > .aeu-card-body > .aeu-grid:first-child,
.aeu-card.aeu-section-soft > .aeu-card-body > .aeu-grid-2:first-child,
.aeu-card.aeu-section-soft > .aeu-card-body > .aeu-grid-3:first-child,
.aeu-card.aeu-section-soft > .aeu-card-body > .aeu-grid-4:first-child {
    margin-top: 0 !important;
}
/* === AEUDNSTHEME v38b certificates extras === */

/* ============================================================
   AEUDNSTHEME v38b — extras for certificates page
   2026-05-15
   ============================================================ */

/* --- Post-Quantum feature strip ----------------------------- */
.aeu-feature-strip {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 14px !important;
    margin-top: 12px !important;
}
.aeu-feature {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 13px !important;
    color: var(--text) !important;
}
.aeu-feature svg {
    width: 14px; height: 14px;
    color: var(--success-strong, var(--success));
    fill: currentColor;
    flex-shrink: 0;
}

/* --- Download card (certificate download grid) -------------- */
.aeu-download-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 10px !important;
    padding: 16px 14px !important;
    background: var(--surface-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    font-family: inherit !important;
    color: var(--text) !important;
    min-width: 0 !important;
    transition: border-color .15s ease, transform .15s ease !important;
}
.aeu-download-card:hover {
    border-color: color-mix(in srgb, var(--accent) 50%, var(--border)) !important;
    transform: translateY(-2px);
}
.aeu-download-icon.aeu-tile {
    /* override the floating-tile negative margins inside the download card */
    margin: 0 !important;
    width: 44px !important; height: 44px !important;
}
.aeu-download-icon svg { width: 20px !important; height: 20px !important; }
.aeu-download-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; max-width: 100%; }
.aeu-download-body strong { font-size: 14px; color: var(--text); }
.aeu-download-body small { font-size: 12px; }

/* --- Certificate status sub line (in section header) -------- */
.aeu-section-card-header .ml-auto { margin-left: auto !important; }

/* --- Card footer in aeu-card aeu-section-soft --------------- */
.aeu-card.aeu-section-soft > .aeu-card-footer {
    padding: 12px 20px !important;
    border-top: 1px solid var(--border) !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center !important;
}

@media (max-width: 600px) {
    .aeu-card.aeu-section-soft > .aeu-card-footer form { width: 100%; }
    .aeu-card.aeu-section-soft > .aeu-card-footer form .aeu-btn { width: 100%; }
}
/* === AEUDNSTHEME v38c download horizontal === */

/* ============================================================
   AEUDNSTHEME v38c — download cards horizontal layout
   2026-05-15
   ============================================================ */

/* Override the previous vertical layout — make download cards
   horizontal (icon | body | button) so they don't waste space */
.aeu-download-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    text-align: left !important;
    gap: 12px !important;
    padding: 12px 14px !important;
}
.aeu-download-card .aeu-download-icon.aeu-tile {
    width: 40px !important;
    height: 40px !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
}
.aeu-download-card .aeu-download-icon svg {
    width: 18px !important;
    height: 18px !important;
}
.aeu-download-card .aeu-download-body {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
    align-items: flex-start !important;
}
.aeu-download-card .aeu-download-body strong {
    font-size: 13px !important;
    color: var(--text) !important;
    line-height: 1.2 !important;
}
.aeu-download-card .aeu-download-body small {
    font-size: 11px !important;
    line-height: 1.3 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 100% !important;
}
.aeu-download-card > .aeu-btn {
    flex-shrink: 0 !important;
    padding: 6px 12px !important;
    font-size: 12px !important;
}

@media (max-width: 480px) {
    .aeu-download-card { gap: 10px !important; padding: 10px !important; }
    .aeu-download-card .aeu-download-body small { white-space: normal !important; }
    .aeu-download-card > .aeu-btn { padding: 5px 10px !important; }
}
/* === AEUDNSTHEME v38d cert UX === */

/* ============================================================
   AEUDNSTHEME v38d — cert page UX polish + mobile download cards
   2026-05-15
   ============================================================ */

/* On mobile, download card stacks vertically so the long
   description text gets the full row width. The button becomes
   full-width below for easier tapping. */
@media (max-width: 540px) {
    .aeu-download-card {
        flex-direction: column !important;
        align-items: stretch !important;
        text-align: left !important;
    }
    .aeu-download-card .aeu-download-icon.aeu-tile {
        align-self: flex-start !important;
    }
    .aeu-download-card .aeu-download-body {
        align-items: flex-start !important;
        flex-direction: column !important;
    }
    .aeu-download-card .aeu-download-body small {
        white-space: normal !important;
        overflow: visible !important;
    }
    .aeu-download-card > .aeu-btn {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
    }
}

/* Modal layout improvements — center vertically + horizontally
   and provide padding. The base .modal already does display: flex
   with align-items: center but mobile sometimes pushes content
   off-screen. Lock body scroll while modal is open via JS. */
.modal.active { align-items: center !important; justify-content: center !important; padding: 16px !important; }
.modal.active .modal-content {
    margin: 0 !important;
    max-height: calc(100vh - 32px) !important;
    overflow-y: auto !important;
}

/* Stronger min-width:0 on download body so ellipsis works */
.aeu-download-card > * { min-width: 0; }
/* === AEUDNSTHEME v38e final === */

/* ============================================================
   AEUDNSTHEME v38e — cert password display + theme consistency
   2026-05-15
   ============================================================ */

/* --- Auto-generated PKCS12 password display ----------------- */
.aeu-pwd-display {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 12px !important;
    padding: 10px 12px !important;
    background: color-mix(in srgb, var(--accent) 8%, var(--surface-card)) !important;
    border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)) !important;
    border-radius: 8px !important;
}
.aeu-pwd-display code {
    flex: 1 !important;
    font-family: var(--font-mono, monospace) !important;
    font-size: 14px !important;
    color: var(--text) !important;
    word-break: break-all !important;
    overflow-wrap: anywhere !important;
    background: transparent !important;
    padding: 0 !important;
    user-select: all !important;
}
.aeu-pwd-display .aeu-btn { flex-shrink: 0 !important; }

/* --- Theme layout consistency -------------------------------
   Some themes set surface-card very close to surface, making
   cards visually disappear. Ensure every aeu-card has a visible
   border so the structure is consistent across all 47 themes.
   ------------------------------------------------------------ */
.aeu-card.aeu-section-soft {
    border: 1px solid color-mix(in srgb, var(--text) 8%, var(--border)) !important;
    background: var(--surface-card) !important;
}
.aeu-stat-card.aeu-stat-soft {
    border: 1px solid color-mix(in srgb, var(--text) 8%, var(--border)) !important;
    background: var(--surface-card) !important;
}
/* Make sure card-body text always has minimum contrast */
.aeu-card .aeu-muted,
.aeu-stat-card .aeu-stat-label { color: color-mix(in srgb, var(--text) 60%, var(--muted)) !important; }

/* Section title always visible regardless of theme */
.aeu-card.aeu-section-soft .aeu-section-title {
    color: var(--text) !important;
    font-weight: 600 !important;
}
/* === AEUDNSTHEME v38f cert split === */

/* ============================================================
   AEUDNSTHEME v38f — cert page 2-column layout
   Certificate details (LEFT) + Download options (RIGHT)
   2026-05-15
   ============================================================ */

.aeu-cert-split {
    display: grid !important;
    grid-template-columns: 1.4fr 1fr !important;
    gap: 16px !important;
    margin-bottom: 16px !important;
    align-items: start !important;
}

/* Inside the split, ensure each card body stays full-width of its column */
.aeu-cert-split > .aeu-card { margin: 0 !important; min-width: 0 !important; }

/* Download cards stacked vertically inside the right column */
.aeu-download-stack {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-top: 12px !important;
}
.aeu-download-stack > .aeu-download-card { width: 100% !important; }

/* On narrower screens, stack into 1 column (cert details on top, downloads below) */
@media (max-width: 1100px) {
    .aeu-cert-split {
        grid-template-columns: 1fr !important;
    }
}

/* When the download stack is the only column, allow 2-col layout on tablets */
@media (max-width: 1100px) and (min-width: 600px) {
    .aeu-download-stack {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
}

@media (max-width: 600px) {
    .aeu-download-stack {
        display: flex !important;
        flex-direction: column !important;
    }
}
/* === AEUDNSTHEME v38g download mobile row === */

/* ============================================================
   AEUDNSTHEME v38g — keep download card horizontal on mobile
   User wants: [icon] [title+desc] [DOWNLOAD] all on one row
   2026-05-15
   ============================================================ */

/* Override v38d/v38f mobile stack — force horizontal row even at narrow widths */
@media (max-width: 540px) {
    .aeu-download-card {
        flex-direction: row !important;
        align-items: center !important;
        text-align: left !important;
        gap: 10px !important;
        padding: 10px !important;
    }
    .aeu-download-card .aeu-download-icon.aeu-tile {
        align-self: center !important;
        width: 36px !important;
        height: 36px !important;
        flex-shrink: 0 !important;
    }
    .aeu-download-card .aeu-download-icon svg {
        width: 16px !important;
        height: 16px !important;
    }
    .aeu-download-card .aeu-download-body {
        flex: 1 !important;
        min-width: 0 !important;
        align-items: flex-start !important;
        flex-direction: column !important;
    }
    .aeu-download-card .aeu-download-body strong {
        font-size: 13px !important;
        line-height: 1.2 !important;
    }
    .aeu-download-card .aeu-download-body small {
        font-size: 11px !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
    }
    .aeu-download-card > .aeu-btn {
        width: auto !important;
        flex-shrink: 0 !important;
        padding: 6px 10px !important;
        font-size: 11px !important;
        text-align: center !important;
        white-space: nowrap !important;
    }
}

/* Very narrow phones — keep row but tighten further */
@media (max-width: 380px) {
    .aeu-download-card { gap: 8px !important; padding: 8px !important; }
    .aeu-download-card .aeu-download-icon.aeu-tile { width: 32px !important; height: 32px !important; }
    .aeu-download-card .aeu-download-body strong { font-size: 12px !important; }
    .aeu-download-card .aeu-download-body small { font-size: 10px !important; }
    .aeu-download-card > .aeu-btn { padding: 5px 8px !important; font-size: 10px !important; }
}
/* === AEUDNSTHEME v38h security page === */

/* ============================================================
   AEUDNSTHEME v38h — security page components
   2026-05-15
   ============================================================ */

/* TLD blocked tag list */
.aeu-tld-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}
.aeu-tld-tag {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: color-mix(in srgb, var(--danger) 8%, var(--surface-card)) !important;
    border: 1px solid color-mix(in srgb, var(--danger) 32%, var(--border)) !important;
    border-radius: 16px !important;
    padding: 4px 10px !important;
    font-size: 12px !important;
    color: var(--text) !important;
}
.aeu-tld-name { font-weight: 600 !important; font-family: var(--font-mono, monospace) !important; }
.aeu-tld-remove {
    background: transparent !important;
    border: none !important;
    color: var(--muted) !important;
    cursor: pointer !important;
    padding: 0 !important;
    width: 16px; height: 16px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    transition: color .15s ease, background .15s ease;
}
.aeu-tld-remove:hover { background: var(--danger) !important; color: var(--on-danger, #fff) !important; }
.aeu-tld-remove svg { width: 12px; height: 12px; fill: currentColor; }

/* TLD suggestions grouped */
.aeu-tld-suggestion-group {
    margin-bottom: 12px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid var(--border) !important;
}
.aeu-tld-suggestion-group:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
}
.aeu-tld-suggestion-title {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: var(--accent) !important;
    text-transform: uppercase !important;
    letter-spacing: .5px !important;
    margin-top: 8px;
}
.aeu-tld-suggestion-desc {
    font-size: 11px !important;
    color: var(--muted) !important;
    margin: 4px 0 6px !important;
}
.aeu-tld-suggestion-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
}
.aeu-tld-suggestion-tag {
    background: var(--surface-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    padding: 3px 10px !important;
    font-size: 11px !important;
    color: var(--muted) !important;
    cursor: pointer !important;
    transition: border-color .15s, color .15s;
    font-family: var(--font-mono, monospace) !important;
}
.aeu-tld-suggestion-tag:hover {
    border-color: var(--accent) !important;
    color: var(--accent) !important;
}
.aeu-tld-suggestion-tag.is-added {
    background: color-mix(in srgb, var(--success) 16%, transparent) !important;
    border-color: color-mix(in srgb, var(--success) 40%, var(--border)) !important;
    color: var(--success-strong, var(--success)) !important;
    cursor: default !important;
}

/* Privacy architecture flow diagram */
.aeu-privacy-flow {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 12px 0 !important;
}
.aeu-flow-step {
    background: var(--surface-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    text-align: center !important;
    min-width: 100px !important;
    flex: 1 1 100px;
    max-width: 180px;
}
.aeu-flow-icon.aeu-tile {
    margin: 0 auto 6px !important;
    width: 36px !important;
    height: 36px !important;
    display: flex; align-items: center; justify-content: center;
}
.aeu-flow-icon.aeu-tile svg { width: 16px !important; height: 16px !important; }
.aeu-flow-label {
    font-weight: 600 !important;
    font-size: 13px !important;
    color: var(--text) !important;
}
.aeu-flow-desc {
    font-size: 11px !important;
    color: var(--muted) !important;
    margin-top: 4px !important;
}
.aeu-flow-arrow {
    color: var(--accent) !important;
    display: flex; align-items: center;
}
.aeu-flow-arrow svg { width: 18px; height: 18px; fill: currentColor; }

.aeu-privacy-features {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-top: 12px !important;
}
.aeu-privacy-feature {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 12px !important;
    background: var(--surface-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    color: var(--muted) !important;
}
.aeu-privacy-feature svg {
    width: 14px !important;
    height: 14px !important;
    color: var(--accent) !important;
    fill: currentColor;
    flex-shrink: 0;
}

@media (max-width: 540px) {
    .aeu-privacy-flow { flex-direction: column !important; }
    .aeu-flow-arrow svg { transform: rotate(90deg); }
    .aeu-flow-step { width: 100%; max-width: 100%; }
}

/* Algorithm tile cards */
.aeu-algo-card {
    text-align: center !important;
}
.aeu-algo-name {
    font-size: 22px !important;
    font-weight: 700 !important;
    font-family: var(--font-mono, monospace) !important;
}
.aeu-algo-purpose {
    font-size: 11px !important;
    color: var(--muted) !important;
    margin-top: 4px !important;
}
.aeu-algo-level {
    font-size: 10px !important;
    color: var(--muted) !important;
    opacity: 0.7;
    margin-top: 2px !important;
}
/* === AEUDNSTHEME v38i settings === */

/* ============================================================
   AEUDNSTHEME v38i — settings page components
   2026-05-15
   ============================================================ */

/* 2-col split layout (matches cert page pattern) */
.aeu-settings-split {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
    align-items: start !important;
    margin-top: 16px !important;
}
.aeu-settings-col {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    min-width: 0 !important;
}
@media (max-width: 1100px) {
    .aeu-settings-split { grid-template-columns: 1fr !important; }
}

/* Disabled config row (for coming soon toggles) */
.aeu-config-row.is-disabled {
    opacity: 0.55 !important;
    pointer-events: none !important;
}
.aeu-config-row.is-disabled .toggle input,
.aeu-config-row.is-disabled .toggle-slider {
    cursor: not-allowed !important;
}

/* Icon button (small, for inline actions like copy/delete) */
.aeu-icon-btn {
    background: transparent !important;
    border: 1px solid var(--border) !important;
    border-radius: 6px !important;
    padding: 4px 6px !important;
    color: var(--muted) !important;
    cursor: pointer !important;
    transition: border-color .15s, color .15s, background .15s;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.aeu-icon-btn svg { width: 14px; height: 14px; fill: currentColor; }
.aeu-icon-btn:hover {
    border-color: var(--accent) !important;
    color: var(--accent) !important;
}
.aeu-icon-btn-danger:hover {
    border-color: var(--danger) !important;
    color: var(--danger) !important;
    background: color-mix(in srgb, var(--danger) 8%, transparent) !important;
}

/* Profile ID inside info-card: keep code + copy button inline */
.aeu-info-card .aeu-flex-row {
    align-items: center;
}
.aeu-info-card code {
    background: transparent !important;
    padding: 0 !important;
    font-size: 13px !important;
    word-break: break-all;
}

/* DNS rewrites add form: 4-col grid on desktop, stacked on mobile */
.aeu-rewrite-form {
    display: grid !important;
    grid-template-columns: 1fr 1fr 90px 40px !important;
    gap: 8px !important;
    align-items: center !important;
}
.aeu-rewrite-form .form-control { min-width: 0 !important; }
.aeu-rewrite-form > button {
    padding: 6px 8px !important;
    width: 40px !important;
    aspect-ratio: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.aeu-rewrite-form > button svg { width: 14px; height: 14px; }

@media (max-width: 540px) {
    .aeu-rewrite-form {
        grid-template-columns: 1fr 1fr !important;
    }
    .aeu-rewrite-form > select { grid-column: 1; }
    .aeu-rewrite-form > button { grid-column: 2; width: 100% !important; aspect-ratio: auto !important; }
}

/* Rewrites list item */
.aeu-rewrite-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}
.aeu-rewrite-item {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 12px !important;
    background: var(--surface-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    flex-wrap: wrap !important;
    min-width: 0 !important;
}
.aeu-rewrite-domain {
    color: var(--text) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    overflow-wrap: anywhere;
}
.aeu-rewrite-answer {
    color: var(--accent) !important;
    font-size: 13px !important;
    overflow-wrap: anywhere;
}
.aeu-rewrite-arrow {
    width: 14px !important;
    height: 14px !important;
    color: var(--muted);
    fill: currentColor;
    flex-shrink: 0;
}

@media (max-width: 540px) {
    .aeu-rewrite-item {
        flex-wrap: wrap;
        gap: 6px;
    }
    .aeu-rewrite-item form { margin-left: auto !important; }
}

/* Danger card visual cue */
.aeu-card.aeu-danger-card {
    border: 1px solid color-mix(in srgb, var(--danger) 25%, var(--border)) !important;
}

/* Stat value with /N suffix small text */
.aeu-stat-value small {
    font-size: 12px !important;
    color: var(--muted) !important;
    font-weight: 500 !important;
}
/* === AEUDNSTHEME v38j confirm guard + admin nodes === */

/* === AEUDNSTHEME v39 — auth pages soft section (2026-05-18) === */
/* Auth card sits centered in the .auth-container; intentionally narrower
   than a normal section card. The aeu-section-soft wrapper provides the
   border/radius/background; .auth-card just tweaks max-width. */
.auth-card {
    max-width: 460px;
    width: 100%;
    margin: 0 auto;
    overflow: hidden; /* keep child border radii crisp */
}
/* Centre the .auth-container itself so the card has breathing room above the
   fold and the footer doesn't crowd on tall viewports. */
.auth-container { padding-top: 24px; }
@media (max-width: 600px) {
    .auth-container { padding-top: 16px; padding-left: 12px; padding-right: 12px; }
    .auth-card { max-width: 100%; }
}

/* Centred intro paragraph under the section header — muted help text */
.auth-card .auth-intro {
    text-align: center;
    color: var(--muted);
    font-size: 13.5px;
    line-height: 1.5;
    margin: 0 0 18px;
}

/* Full-width button — used by auth forms (Login / Register / 2FA submit) */
.aeu-btn.aeu-btn-block {
    display: flex;
    width: 100%;
    justify-content: center;
    padding: 12px 16px;
    font-size: 14px;
    margin-top: 4px;
}

/* Footnote (forgot password / register link / etc.) */
.auth-card .auth-footnote {
    text-align: center;
    margin: 18px 0 0;
    font-size: 13px;
    color: var(--muted);
}
.auth-card .auth-footnote a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 500;
}
.auth-card .auth-footnote a:hover { text-decoration: underline; }

/* TOS checkbox row in register — inline checkbox + label */
.auth-tos-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 4px 0 14px;
    font-size: 13px;
    color: var(--muted);
}
.aeu-checkbox-label {
    display: inline-flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    line-height: 1.4;
}
.aeu-checkbox-label input[type="checkbox"] {
    margin-top: 2px;
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
    cursor: pointer;
    flex: 0 0 16px;
}
.aeu-checkbox-label a {
    color: var(--accent);
    text-decoration: none;
}
.aeu-checkbox-label a:hover { text-decoration: underline; }

/* Auth alerts use the new aeu-alert pattern; .hidden hides them until toggled */
.auth-card .aeu-alert { margin-bottom: 14px; }
.auth-card .aeu-alert.hidden { display: none !important; }

/* QR container inside enable2fa */
.auth-card .qr-container {
    display: flex;
    justify-content: center;
    margin: 0 0 14px;
    padding: 12px;
    background: var(--surface-3);
    border-radius: 10px;
    border: 1px solid var(--border);
}
.auth-card .qr-container img { max-width: 180px; height: auto; border-radius: 6px; }


/* === AEUDNSTHEME v39b — parental page (2026-05-18) === */

/* Page-head with right-side profile selector */
.aeu-page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 20px;
}
.aeu-page-head-left { flex: 1 1 240px; min-width: 0; }
.aeu-page-head-right { flex: 0 0 auto; min-width: 200px; max-width: 280px; }

/* Compact input-group variant for inline selectors in page head */
.aeu-input-group.aeu-input-group-compact { margin-bottom: 0; padding-top: 22px; }
.aeu-input-group.aeu-input-group-compact label { top: 22px; font-size: 13px; }
.aeu-input-group.aeu-input-group-compact select { padding: 6px 0; font-size: 14px; }

/* Category filter row — soft pill buttons with SVG icon */
.aeu-cat-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0;
}
.aeu-cat-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--muted);
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--trans), color var(--trans), border-color var(--trans);
}
.aeu-cat-filter-btn .icon { width: 14px; height: 14px; }
.aeu-cat-filter-btn:hover {
    background: color-mix(in srgb, var(--accent) 8%, var(--surface-2));
    border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
    color: var(--text);
}
.aeu-cat-filter-btn.is-active {
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    border-color: var(--accent);
    color: var(--accent);
}

/* Category section header inside the services list */
.aeu-cat-section { margin-top: 18px; }
.aeu-cat-section:first-child { margin-top: 8px; }
.aeu-cat-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 0 8px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 12px;
}
.aeu-cat-section-header .icon { width: 16px; height: 16px; color: var(--accent); }
.aeu-cat-section-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: 0.2px;
    text-transform: uppercase;
}
.aeu-cat-section-count {
    margin-left: auto;
    background: var(--surface-2);
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
}

/* Service tile grid — soft, tap-friendly */
.aeu-svc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 8px;
}
.aeu-svc-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 8px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    font-family: inherit;
    cursor: pointer;
    transition: background var(--trans), border-color var(--trans), transform var(--trans);
    text-align: center;
    min-height: 72px;
}
.aeu-svc-tile:hover {
    background: color-mix(in srgb, var(--accent) 8%, var(--surface-2));
    border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
    transform: translateY(-1px);
}
.aeu-svc-tile.is-blocked {
    background: color-mix(in srgb, var(--danger) 12%, var(--surface-2));
    border-color: color-mix(in srgb, var(--danger) 40%, var(--border));
}
.aeu-svc-tile.is-blocked .aeu-svc-name { color: var(--danger); }
.aeu-svc-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.aeu-svc-icon .icon { width: 16px; height: 16px; color: var(--accent); }
.aeu-svc-tile.is-blocked .aeu-svc-icon {
    background: color-mix(in srgb, var(--danger) 18%, transparent);
}
.aeu-svc-tile.is-blocked .aeu-svc-icon .icon { color: var(--danger); }
.aeu-svc-name {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    word-break: break-word;
}
.aeu-svc-status {
    position: absolute;
    top: 6px;
    right: 6px;
}
.aeu-svc-status .icon { width: 14px; height: 14px; color: var(--danger); }

/* Recreation Time list */
.aeu-rec-rules {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 12px 0 16px;
}
.aeu-rec-rule {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
}
.aeu-rec-rule.is-inactive { opacity: 0.55; }
.aeu-rec-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.aeu-rec-day {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}
.aeu-rec-time {
    font-size: 12px;
    color: var(--muted);
    font-family: var(--font-mono);
}

/* Recreation Time add-rule inline form */
.aeu-rec-add-form {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr auto;
    gap: 10px;
    align-items: end;
    margin-top: 8px;
}
.aeu-rec-add-form .aeu-input-group { margin-bottom: 0; }
@media (max-width: 600px) {
    .aeu-rec-add-form {
        grid-template-columns: 1fr 1fr;
    }
    .aeu-rec-add-form .aeu-input-group:first-child {
        grid-column: 1 / -1;
    }
    .aeu-rec-add-form > button { grid-column: 1 / -1; width: 100%; }
}


/* === AEUDNSTHEME v39c — current IP card (linked-ips, 2026-05-18) === */
.aeu-current-ip-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.aeu-current-ip-address {
    font-size: 22px;
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--text);
    letter-spacing: -0.3px;
    word-break: break-all;
}
.aeu-current-ip-action { flex: 0 0 auto; margin: 0; }
@media (max-width: 540px) {
    .aeu-current-ip-body { flex-direction: column; align-items: flex-start; }
    .aeu-current-ip-address { font-size: 18px; }
    .aeu-current-ip-action { width: 100%; }
    .aeu-current-ip-action .aeu-btn { width: 100%; }
}


/* === AEUDNSTHEME v39d — verify-email (2026-05-18) === */
.auth-stacked-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
}


/* === AEUDNSTHEME v39e — user menu caret hint (2026-05-18) === */
.user-menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.user-menu-caret {
    width: 14px;
    height: 14px;
    color: var(--muted);
    transition: transform var(--trans);
    margin-left: 2px;
}
.user-menu.open .user-menu-caret { transform: rotate(180deg); color: var(--accent); }


/* === AEUDNSTHEME v39f — auth card form-group (2026-05-18) ===
   Auth pages use the classic label-above-input pattern, NOT Material
   floating-label, to stay consistent with the rest of the panel
   (.form-input + .form-label everywhere else). Inputs inherit the
   filled-rect look from .aeu-card.aeu-section-soft input[type=...]
   defined earlier in this file. We just add proper spacing + label
   typography for readability. */
.auth-card .form-group { margin-bottom: 16px; }
.auth-card .form-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    margin-bottom: 6px;
    letter-spacing: 0.1px;
}
.auth-card .form-input,
.auth-card input[type="email"],
.auth-card input[type="password"],
.auth-card input[type="text"],
.auth-card input[type="number"] {
    display: block;
    width: 100%;
    padding: 10px 14px;
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    color: var(--text) !important;
    font-size: 14px;
    font-family: inherit;
    transition: border-color var(--trans), box-shadow var(--trans);
}
.auth-card .form-input:focus,
.auth-card input[type="email"]:focus,
.auth-card input[type="password"]:focus,
.auth-card input[type="text"]:focus,
.auth-card input[type="number"]:focus {
    outline: none;
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent) !important;
}
.auth-card .form-input::placeholder {
    color: var(--muted);
    opacity: 0.7;
}
.auth-card .form-hint {
    display: block;
    margin-top: 4px;
    font-size: 11.5px;
    color: var(--muted);
}

/* The OTP code input (2FA verify) — center the digits */
.auth-card .auth-otp {
    text-align: center !important;
    letter-spacing: 8px !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    font-family: var(--font-mono) !important;
}


/* ============================================================
   aeudnstheme v39g — setup page legacy tab icons → SVG sprite
   The setup tabs historically used emoji glyphs (⭐ 🔗 🤖 …); we
   replaced them with SVG <use href="#i-…"> references resolved by
   the global sprite (includes/svg-icons.php). These rules give
   the inline SVG the right intrinsic box and color.
   ============================================================ */
.setup-tab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
}
.setup-tab-icon .icon,
.setup-tab-icon svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
    color: inherit;
}
.setup-tab.active .setup-tab-icon .icon,
.setup-tab.active .setup-tab-icon svg {
    color: var(--on-accent);
}

/* ============================================================
   aeudnstheme v39h — setup page structural refactor (2026-05-18)

   New aeu-* primitives used by the refactored setup.php top:
   - .aeu-setup-context        profile context card body layout
   - .aeu-setup-context-row    label + value pair
   - .aeu-setup-tabs-wrap      card holding the platform tab strip
   - .aeu-tabs-scroll          horizontal-scroll modifier for the
                               existing .aeu-tabs (so 12 tabs fit on
                               mobile + tablet without wrapping)
   - .aeu-setup-content        thin wrapper around tab panels
   - Sets the .aeu-tab to render its inline SVG + label

   The deeper install-step / code-block / tip-box / warning-box /
   method-tab patterns still use the existing .setup-* class names —
   those CSS rules already follow aeudnstheme tokens (var(--accent),
   var(--surface-*), var(--border), var(--muted)) and produce the
   matching look. Renaming them in HTML would be churn.
   ============================================================ */
.aeu-setup-context-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 20px 20px;
}
.aeu-setup-context-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.aeu-setup-context-label {
    flex: 0 0 140px;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.aeu-setup-context-code {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
    border-radius: 6px;
    padding: 4px 10px;
}
.aeu-setup-context-select {
    flex: 1;
    max-width: 360px;
}
.aeu-setup-context-protocols {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
}

.aeu-setup-tabs-wrap {
    margin: 16px 0;
    padding: 0;
    overflow: hidden;
}
.aeu-tabs-scroll {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding: 0 12px;
}
.aeu-tabs-scroll::-webkit-scrollbar { height: 4px; }
.aeu-tabs-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.aeu-tabs-scroll .aeu-tab {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    font-size: 13px;
    padding: 10px 14px;
    white-space: nowrap;
}
.aeu-tabs-scroll .aeu-tab .icon,
.aeu-tabs-scroll .aeu-tab svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    fill: currentColor;
}

.aeu-setup-content {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Mobile + tablet adaptations */
@media (max-width: 768px) {
    .aeu-setup-context-label {
        flex: 1 1 100%;
        margin-bottom: -4px;
    }
    .aeu-setup-context-select,
    .aeu-setup-context-code {
        flex: 1 1 100%;
        max-width: none;
    }
    .aeu-tabs-scroll .aeu-tab {
        padding: 9px 12px;
        font-size: 12.5px;
    }
}
@media (max-width: 480px) {
    .aeu-setup-context-body {
        padding: 14px 16px 16px;
    }
    .aeu-tabs-scroll .aeu-tab-label {
        font-size: 12px;
    }
}

/* ============================================================
   aeudnstheme v39i — setup page mobile/tablet hardening
   (2026-05-18)

   Fixes catalogued from a full 12-tab Playwright sweep at 375 /
   768 / 1440:
   - .setup-method-tabs overflowed viewport on 375 (4 buttons in
     a non-wrapping flex row); now horizontally scrollable like
     the main aeu-tabs-scroll
   - .setup-config-item stacked label+code horizontally with a
     hard 120px min-width on label; on 375 the IPv6 code wrapped
     into a 3-character-wide column; now stacks on ≤640
   - .browser-grid was a fixed `repeat(4, 1fr)`; cards were
     ~70px wide on mobile; now auto-fit with minmax(150px, 1fr)
   - .device-example same issue as .setup-config-item; stacks
     on ≤640
   - .aeu-mini-card-title — new class replacing emoji-prefixed
     inline-styled <div style="font-weight:600;">EMOJI Name</div>
     in the browsers tab
   - .aeu-h2-icon — inline icon sized for <h2> headings (so the
     device-tab "Identify Your Devices" h2 reads cleanly)
   - .arch-flow — already had overflow-x:auto but had no min-width
     on .arch-node so the labels/icons squashed; now sized so the
     diagram is readable when horizontally scrolled
   ============================================================ */

/* Small icon-aligned card heading used inside grid cells */
.aeu-mini-card-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 13px;
    color: var(--text);
    margin: 0 0 6px;
}
.aeu-mini-card-title .icon,
.aeu-mini-card-title svg {
    width: 16px;
    height: 16px;
    fill: var(--accent);
    flex-shrink: 0;
}

/* Inline icon used inside an <h2> tag (~22px font) */
.aeu-h2-icon {
    width: 22px !important;
    height: 22px !important;
    vertical-align: -4px;
    fill: var(--accent);
}

/* Linux + similar sub-tabs: horizontal scroll on narrow viewport */
.setup-method-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
}
.setup-method-tabs::-webkit-scrollbar { height: 4px; }
.setup-method-tabs::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 2px;
}
.setup-method-tab {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* Browser grid → responsive on mobile */
.browser-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
}
@media (max-width: 480px) {
    .browser-grid {
        grid-template-columns: 1fr 1fr !important;
    }
    .browser-card {
        padding: 12px !important;
    }
    .browser-icon {
        font-size: 24px !important;
        margin-bottom: 4px !important;
    }
    .browser-icon svg {
        width: 28px;
        height: 28px;
        fill: var(--accent);
    }
}
.browser-icon .icon,
.browser-icon svg {
    width: 32px;
    height: 32px;
    fill: var(--accent);
}

/* Config item (DoT host / DNS IPs / etc.) — stack on mobile so
   long IPv6 doesn't wrap into a useless thin column */
@media (max-width: 640px) {
    .setup-config-item {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 4px !important;
    }
    .setup-config-item span {
        min-width: 0 !important;
        font-weight: 600;
        font-size: 11.5px !important;
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }
    .setup-config-item code {
        width: 100%;
        word-break: break-all;
    }
    /* Same treatment for the devices tab cards */
    .device-example {
        flex-direction: column;
        align-items: flex-start !important;
    }
    .device-example .device-icon { margin-bottom: 4px; }
    .device-example span:not(.device-icon) {
        min-width: 0 !important;
        font-size: 14px;
    }
    .device-example code {
        width: 100%;
        word-break: break-all;
    }
}

/* device-icon should render the inline SVG */
.device-icon .icon,
.device-icon svg {
    width: 20px;
    height: 20px;
    fill: var(--accent);
}

/* warning-icon span should render the inline SVG */
.warning-icon .icon,
.warning-icon svg {
    width: 18px;
    height: 18px;
    fill: var(--warning);
}

/* arch-flow — give the architecture diagram a min-width so labels
   stay readable when horizontally scrolled on mobile */
.arch-flow {
    min-width: 520px;
    padding: 12px 8px;
}
.arch-node {
    min-width: 70px;
    text-align: center;
}
.arch-node-icon {
    width: 44px !important;
    height: 44px !important;
}
.arch-node-icon .icon,
.arch-node-icon svg {
    width: 24px;
    height: 24px;
    fill: #fff;
}
.arch-node-label {
    font-size: 11.5px;
    color: var(--text);
    font-weight: 500;
}
@media (max-width: 640px) {
    /* Hide the arch-flow visualization on small viewports — it's
       a "nice-to-have" decoration and the surrounding bullet list
       conveys the same info. Re-show on tablet+. */
    .arch-flow {
        display: none;
    }
}

/* Generic guard — no aeu/setup card content should push past
   its card width even with long unbreakable strings */
.aeu-card-body,
.aeu-section-soft .aeu-card-body {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Sub-section headings inside browser/device cards */
.aeu-card-body h4.aeu-section-title {
    margin-top: 18px;
}

/* ============================================================
   aeudnstheme v39j — setup code-block wrapping fix (2026-05-18)

   .setup-code-block pre had TWO rules in cascade — one set
   white-space:pre-wrap+word-break:break-all (line ~2603) the
   later one (line ~4219) only overrode overflow-x. Net effect
   on mobile: long bash commands wrapped at every character into
   useless narrow columns. Force horizontal scroll instead.
   ============================================================ */
.setup-code-block pre {
    white-space: pre !important;
    word-break: normal !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    tab-size: 4;
}
.setup-code-block pre::-webkit-scrollbar { height: 4px; }
.setup-code-block pre::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 2px;
}
/* The copy button must stay reachable above the scrolling pre */
.setup-code-block .aeu-btn,
.setup-code-block .copy-btn,
.setup-code-block button {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 2;
}
.setup-code-block { padding-top: 30px; }

/* v39k — render SVG inside setup-tip-icon (was holding a 💡 emoji) */
.setup-tip-icon .icon,
.setup-tip-icon svg {
    width: 22px;
    height: 22px;
    fill: var(--accent);
}

/* ============================================================
   aeudnstheme v39l — fix aeu-step-list children stacking
   (2026-05-18, found in user screenshot 588)

   .aeu-step-list li was `display: flex` so its strong + p +
   div.aeu-code-block flowed HORIZONTALLY beside the ::before
   counter. On mobile the code-block was crushed into a ~100px
   column and the URL inside <pre> wrapped 8-10 lines high,
   producing the giant square boxes the user saw.

   Switch to a 2-column grid: counter in col 1, every content
   child in col 2 stacked vertically. Then the code-block fills
   the full content column and shows the URL on 1-2 lines.
   ============================================================ */
.aeu-step-list li {
    display: grid !important;
    grid-template-columns: 28px 1fr;
    column-gap: 12px;
    row-gap: 6px;
    align-items: start;
}
.aeu-step-list li::before {
    grid-column: 1;
    grid-row: 1;
    margin-top: 2px;
}
.aeu-step-list li > * {
    grid-column: 2;
    margin: 0;
    min-width: 0;
}
.aeu-step-list li > strong {
    font-size: 14px;
    color: var(--text);
}
.aeu-step-list li > .aeu-field-help,
.aeu-step-list li > p {
    margin: 2px 0 0;
    color: var(--muted);
    font-size: 13px;
}
.aeu-step-list li > .aeu-code-block {
    margin-top: 8px;
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    overflow: hidden;
}
.aeu-step-list li > .aeu-code-block pre {
    flex: 1;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    white-space: pre;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 12px;
    line-height: 1.4;
    color: var(--accent);
}
.aeu-step-list li > .aeu-code-block pre::-webkit-scrollbar { height: 4px; }
.aeu-step-list li > .aeu-code-block pre::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 2px;
}
.aeu-step-list li > .aeu-code-block .aeu-btn,
.aeu-step-list li > .aeu-code-block button {
    flex: 0 0 auto;
    position: static;
    margin: 0;
}

/* Mobile: shrink the counter and tighten spacing */
@media (max-width: 480px) {
    .aeu-step-list li {
        grid-template-columns: 24px 1fr;
        column-gap: 10px;
    }
    .aeu-step-list li > strong { font-size: 13.5px; }
    .aeu-step-list li > .aeu-code-block { padding: 7px 9px; }
    .aeu-step-list li > .aeu-code-block pre { font-size: 11.5px; }
}

/* ────────────────────────────────────────────────────────────
 * v39m fix (2026-05-18) — feature-strip + grid-card equal height
 *
 * Bug 1: .aeu-feature-strip applied to <ul> didn't kill native list-style
 *        and the <li> children inherited browser defaults (disc bullet,
 *        ~16px font, .icon at default 18px). Setup.php uses bare <li> with-
 *        out the .aeu-feature class so nothing styled them.
 *
 * Bug 2: cards inside .aeu-grid-2 weren't equal-height because no rule
 *        stretched the inner .aeu-card-body to fill the card. Grid items
 *        stretch by default but the BODY inside each card needs flex:1 to
 *        consume leftover height so siblings line up.
 * ──────────────────────────────────────────────────────────── */

.aeu-feature-strip {
    list-style: none !important;
    padding: 0 !important;
    margin: 12px 0 0 0 !important;
}
.aeu-feature-strip > li {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    color: var(--text) !important;
}
.aeu-feature-strip > li > svg,
.aeu-feature-strip > li > .icon {
    width: 14px !important;
    height: 14px !important;
    color: var(--success-strong, var(--success)) !important;
    fill: currentColor !important;
    flex-shrink: 0 !important;
}

/* Equal-height card layout inside any .aeu-grid-N */
.aeu-grid > .aeu-card,
.aeu-grid-2 > .aeu-card,
.aeu-grid-3 > .aeu-card,
.aeu-grid-4 > .aeu-card,
.aeu-grid-5 > .aeu-card {
    display: flex !important;
    flex-direction: column !important;
}
.aeu-grid > .aeu-card > .aeu-card-body,
.aeu-grid-2 > .aeu-card > .aeu-card-body,
.aeu-grid-3 > .aeu-card > .aeu-card-body,
.aeu-grid-4 > .aeu-card > .aeu-card-body,
.aeu-grid-5 > .aeu-card > .aeu-card-body {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
}

/* ────────────────────────────────────────────────────────────
 * v39n fix (2026-05-18) — aeu-config-row text hierarchy
 *
 * Bug: .aeu-config-info <strong> was font-size:14px (no !important, easily
 * overridden) and the <p> description had no font-size / no muted color, so
 * it inherited the parent's default (~16px black). Result: title and desc
 * read at the same weight — no visual hierarchy, text felt oversized and
 * disordered (parental page: SafeSearch / YouTube Restricted / Block Bypass
 * rows). Fix: explicit sizes + muted color on the description.
 * ──────────────────────────────────────────────────────────── */

.aeu-config-info {
    flex: 1 !important;
    min-width: 0 !important;
    line-height: 1.4 !important;
}
.aeu-config-info strong {
    display: block !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--text) !important;
    margin: 0 !important;
}
.aeu-config-info p {
    margin: 2px 0 0 !important;
    font-size: 12px !important;
    color: var(--muted) !important;
    line-height: 1.4 !important;
}

/* ────────────────────────────────────────────────────────────
 * v39o (2026-05-18) — softer card elevation (global)
 *
 * User feedback: "il rialzo che ce nele schede si puo abasare un po?
 * deve essere appena percetibile non cosi alte" — globally reduce
 * card elevation so the lift is barely perceptible. One token change
 * → cascades to every .aeu-card across 47 themes (the design system
 * point). Values aligned with MD elevation level 1/2 from skill §3.5
 * (rest alpha 0.06+0.10, hover alpha 0.10+0.14).
 * ──────────────────────────────────────────────────────────── */

:root {
    --aeu-shadow-card:        0 1px 2px 0 rgba(0,0,0,0.06), 0 1px 3px 0 rgba(0,0,0,0.10) !important;
    --aeu-shadow-card-raised: 0 2px 6px 0 rgba(0,0,0,0.10), 0 4px 12px 0 rgba(0,0,0,0.14) !important;
}
.aeu-card:hover {
    transform: translateY(-1px) !important;   /* was -2px → barely perceptible */
}

/* ────────────────────────────────────────────────────────────
 * v39p (2026-05-18) — softer borders + even softer elevation
 *
 * User feedback: "abasiamole ancora in po o meglio sfumiamo i bordi
 * un po di piu". Two changes — both via tokens, both global:
 *  - Card border: was 1px solid color-mix(var(--text) 8%, var(--border))
 *    → now 1px solid color-mix(var(--text) 4%, transparent), more diffuse
 *  - Card shadow: further reduced from rest 0.06+0.10 → 0.04+0.06
 *    (just enough to separate from page background, no "lift" feel)
 *  - Hover shadow stays at v39o values (0.10+0.14) — still subtle but
 *    clearly responsive to interaction
 * ──────────────────────────────────────────────────────────── */

:root {
    --aeu-shadow-card: 0 1px 1px 0 rgba(0,0,0,0.04), 0 1px 2px 0 rgba(0,0,0,0.06) !important;
}
.aeu-card.aeu-section-soft,
.aeu-stat-card.aeu-stat-soft {
    border: 1px solid color-mix(in srgb, var(--text) 4%, transparent) !important;
}
.aeu-card {
    border: 1px solid color-mix(in srgb, var(--text) 4%, transparent) !important;
}

/* ────────────────────────────────────────────────────────────
 * v39q (2026-05-18) — uniform status-row height (dashboard pairs)
 *
 * Even with same N of rows, two cards in a 2-col grid can render at
 * different heights when one card's rows wrap (long descriptions) and
 * the other's don't (short hostnames). Force the first line of every
 * status-row in a grid-2 to a single line with ellipsis. Sub-line
 * (text-xs / aeu-muted) already stays one line because short.
 * Result: every row is exactly 2 lines tall → cards align.
 * ──────────────────────────────────────────────────────────── */

.aeu-grid-2 .aeu-status-row > div > .text-sm,
.aeu-grid-2 .aeu-status-row > div > div:first-child:not(.text-xs):not(.aeu-muted) {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    min-width: 0 !important;
}

/* ────────────────────────────────────────────────────────────
 * v39r (2026-05-18) — deterministic equal-card-height in grid-2
 *
 * User feedback: "parlo alto come dimensione del card non alteza
 * del bordo" — the CARD OVERALL HEIGHT must be identical, not just
 * the border. v39q line-clamped the text but the row padding/dot
 * sizing wasn't enforced. Now: every .aeu-status-row inside a
 * .aeu-grid-2 has min-height 48px, align-items center, gap 12 →
 * each row is exactly one box of fixed height. N matching rows
 * = identical card height by construction.
 * ──────────────────────────────────────────────────────────── */

.aeu-grid-2 .aeu-status-row {
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 6px 0 !important;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent) !important;
}
.aeu-grid-2 .aeu-status-row:last-child {
    border-bottom: none !important;
}
.aeu-grid-2 .aeu-status-row > div[style*="flex:1"],
.aeu-grid-2 .aeu-status-row > div {
    min-width: 0 !important;
    overflow: hidden !important;
}

/* ────────────────────────────────────────────────────────────
 * v39s (2026-05-18) — minimal hover effect
 *
 * User feedback: "on mouse over meno effetto". v39o reduced lift to
 * -1px and shadow to 0.10+0.14; v39p reduced rest to 0.04+0.06. Now
 * remove the translateY entirely and bring shadow-raised to only
 * marginally above rest → hover is almost invisible, just a hint.
 * ──────────────────────────────────────────────────────────── */

:root {
    --aeu-shadow-card-raised: 0 1px 2px 0 rgba(0,0,0,0.06), 0 2px 4px 0 rgba(0,0,0,0.08) !important;
}
.aeu-card:hover {
    transform: none !important;
}

/* ────────────────────────────────────────────────────────────
 * v39t (2026-05-18) — setup.php profile context: row layout
 *
 * User feedback: "la questione in colone sai che non ci piace".
 * The 4 metadata rows (PROFILE, PROFILE CODE, SECURITY MODE,
 * ENDPOINTS) were stacked column. Now inline + flex-wrap on
 * desktop; collapses back to column on mobile (≤ 600px).
 * The dropdown (1st row) stays on its own line because it's
 * full-width by nature; the 3 chip rows wrap inline below.
 * ──────────────────────────────────────────────────────────── */

.aeu-setup-context-body {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px 20px !important;
    row-gap: 10px !important;
}
.aeu-setup-context-body > label.aeu-setup-context-row {
    flex: 1 1 100% !important;   /* PROFILE dropdown takes its own line */
}
.aeu-setup-context-body > div.aeu-setup-context-row {
    flex: 0 1 auto !important;
    gap: 8px !important;
}
.aeu-setup-context-body > div.aeu-setup-context-row .aeu-setup-context-label {
    flex: 0 0 auto !important;       /* label sits inline, NO 140px column */
    padding-right: 4px !important;
}

@media (max-width: 600px) {
    .aeu-setup-context-body {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .aeu-setup-context-body > div.aeu-setup-context-row {
        flex: 1 1 100% !important;
    }
}

/* ────────────────────────────────────────────────────────────
 * v39u (2026-05-18) — setup context: no horizontal scroll on mobile
 *
 * User feedback: "non devono avere scroll in basso su mobile vani
 * sistemate". On narrow screens the 4 endpoint pills + the row's
 * inline label could overflow because the parent flex container
 * lacked min-width: 0 (required for flex items to shrink/wrap).
 * Now: enforce min-width 0 + overflow-wrap on every level, label
 * stacks above value on mobile so nothing forces horizontal scroll.
 * ──────────────────────────────────────────────────────────── */

.aeu-setup-context-body,
.aeu-setup-context-row,
.aeu-setup-context-protocols {
    min-width: 0 !important;
    max-width: 100% !important;
}
.aeu-setup-context-protocols {
    overflow-wrap: anywhere !important;
}

@media (max-width: 600px) {
    .aeu-setup-context-body > div.aeu-setup-context-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 4px !important;
    }
    .aeu-setup-context-body > div.aeu-setup-context-row .aeu-setup-context-label {
        font-size: 11px !important;
    }
    .aeu-setup-context-protocols {
        flex-wrap: wrap !important;
        width: 100% !important;
    }
    .aeu-setup-context-protocols .aeu-pill {
        flex: 0 0 auto !important;
    }
    .aeu-card.aeu-section-soft {
        overflow-x: hidden !important;
    }
}

/* ────────────────────────────────────────────────────────────
 * v39v (2026-05-18) — global no-horizontal-scroll safety net
 *
 * Real culprit found: <pre> base rule has overflow: auto → long
 * URLs in <pre id="apk-link">https://update.alickaj.eu/aeu-dns.apk</pre>
 * (and similar in install steps) force a horizontal scrollbar. The
 * Profile context card v39u fix was complete; the scroll was coming
 * from elsewhere on the page.
 *
 * Two layers of defense:
 *  1) <pre> inside any .aeu-card / .aeu-code-block: wrap, no scroll
 *  2) body/html: overflow-x: hidden → no horizontal scroll AT ALL,
 *     no matter what slips through. .aeu-tabs-scroll keeps its own
 *     internal scroll (intentional for tab strip overflow).
 * ──────────────────────────────────────────────────────────── */

.aeu-card pre,
.aeu-code-block pre,
.aeu-code-block {
    overflow: hidden !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    white-space: pre-wrap !important;
    max-width: 100% !important;
}

html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

/* ────────────────────────────────────────────────────────────
 * v39w (2026-05-18) — REVERT v39v body overflow-x hidden
 *
 * v39v added `html, body { overflow-x: hidden }` as a safety net.
 * Side effect: this breaks position: sticky on the .header
 * (the header un-sticks because overflow on an ancestor creates a
 * new scroll container that swallows the sticky behavior).
 *
 * Restore default overflow on html/body. Keep ONLY the granular
 * fixes on <pre> / .aeu-code-block from v39v — they were the
 * actual fix; the body-level rule was overreach.
 * ──────────────────────────────────────────────────────────── */

html, body {
    overflow-x: visible !important;
    max-width: none !important;
}

/* ────────────────────────────────────────────────────────────
 * v39x (2026-05-18) — setup profile card: CSS Grid 3-col
 *
 * v39t/v39u used flex-wrap which produced inconsistent rendering:
 * "Profile Code" wrapped to 2 lines (because <code> with padding
 * is wider than expected), while "Security Mode" and "Endpoints"
 * stayed on one line. Visual asymmetry.
 *
 * Switch to CSS Grid: dropdown spans full width, then 3 equal-width
 * columns for Code/Mode/Endpoints. Deterministic, never wraps wrong.
 * Mobile: collapses to single column.
 * ──────────────────────────────────────────────────────────── */

.aeu-setup-context-body {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 12px 20px !important;
    align-items: center !important;
}
.aeu-setup-context-body > label.aeu-setup-context-row {
    grid-column: 1 / -1 !important;     /* dropdown spans all 3 cols */
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}
.aeu-setup-context-body > div.aeu-setup-context-row {
    display: flex !important;
    flex-direction: column !important;   /* label above value inside each col */
    align-items: flex-start !important;
    gap: 4px !important;
    min-width: 0 !important;
}
.aeu-setup-context-body > div.aeu-setup-context-row .aeu-setup-context-label {
    flex: 0 0 auto !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 0 !important;
}
.aeu-setup-context-body > div.aeu-setup-context-row > * + * {
    margin-top: 0 !important;             /* override flex-wrap stale rule */
}

@media (max-width: 900px) {
    .aeu-setup-context-body {
        grid-template-columns: 1fr 1fr !important;   /* 2 col on tablet */
    }
    .aeu-setup-context-body > div.aeu-setup-context-row:last-child {
        grid-column: 1 / -1 !important;   /* endpoints (4 chips) gets full row */
    }
}
@media (max-width: 600px) {
    .aeu-setup-context-body {
        grid-template-columns: 1fr !important;
    }
    .aeu-setup-context-body > div.aeu-setup-context-row:last-child {
        grid-column: 1 / -1 !important;
    }
}

/* ════════════════════════════════════════════════════════════
 * v39y FINAL (2026-05-18) — setup Profile context, atomic rewrite
 *
 * Replaces ALL previous .aeu-setup-context-* fixes (v17 → v39x). 
 * Uses .aeu-card.aeu-section-soft.aeu-setup-context for max
 * specificity so this block wins regardless of source order.
 * Every property has !important. No conflict possible.
 *
 * Layout:
 *   Desktop (>900px): dropdown spans full + 3 cols (Code | Mode | Endpoints)
 *   Tablet (600-900): dropdown spans full + 2 cols + endpoints spans full
 *   Mobile  (<600px): single column stack
 * ════════════════════════════════════════════════════════════ */

.aeu-card.aeu-section-soft.aeu-setup-context > .aeu-card-body.aeu-setup-context-body {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 14px 20px !important;
    align-items: start !important;
    padding: 16px 20px 20px !important;
    min-width: 0 !important;
}

/* Dropdown row — spans full width */
.aeu-card.aeu-section-soft.aeu-setup-context .aeu-setup-context-body > label.aeu-setup-context-row {
    grid-column: 1 / -1 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 14px !important;
    margin: 0 !important;
    min-width: 0 !important;
}
.aeu-card.aeu-section-soft.aeu-setup-context .aeu-setup-context-body > label.aeu-setup-context-row > .aeu-setup-context-label {
    flex: 0 0 auto !important;
}
.aeu-card.aeu-section-soft.aeu-setup-context .aeu-setup-context-body > label.aeu-setup-context-row > .aeu-setup-context-select {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

/* Chip rows — each cell is column flex (label above value) */
.aeu-card.aeu-section-soft.aeu-setup-context .aeu-setup-context-body > div.aeu-setup-context-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
}

/* Label always small uppercase muted */
.aeu-card.aeu-section-soft.aeu-setup-context .aeu-setup-context-body .aeu-setup-context-label {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    padding: 0 !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
    line-height: 1.4 !important;
}

/* Code value — fits in cell, never forces wrap */
.aeu-card.aeu-section-soft.aeu-setup-context .aeu-setup-context-code {
    display: inline-block !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    font-family: var(--font-mono) !important;
    font-size: 13px !important;
}

/* Protocol pills row — wraps within cell */
.aeu-card.aeu-section-soft.aeu-setup-context .aeu-setup-context-protocols {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

/* Tablet — 2 cols, endpoints (4 pills) gets its own row */
@media (max-width: 900px) {
    .aeu-card.aeu-section-soft.aeu-setup-context > .aeu-card-body.aeu-setup-context-body {
        grid-template-columns: 1fr 1fr !important;
    }
    .aeu-card.aeu-section-soft.aeu-setup-context .aeu-setup-context-body > div.aeu-setup-context-row:nth-of-type(4) {
        grid-column: 1 / -1 !important;
    }
}

/* Mobile — single column, dropdown row stacks too */
@media (max-width: 600px) {
    .aeu-card.aeu-section-soft.aeu-setup-context > .aeu-card-body.aeu-setup-context-body {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .aeu-card.aeu-section-soft.aeu-setup-context .aeu-setup-context-body > label.aeu-setup-context-row {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 4px !important;
    }
    .aeu-card.aeu-section-soft.aeu-setup-context .aeu-setup-context-body > div.aeu-setup-context-row:nth-of-type(4) {
        grid-column: 1 / -1 !important;
    }
}

/* ════════════════════════════════════════════════════════════
 * v39z FINAL (2026-05-18) — fix 3 visible issues in setup page
 *
 *  1) URL endpoint nelle card DoH/DoT/DoQ troncati con ellipsis →
 *     ora wrap full visible
 *  2) Card in .aeu-grid-3 non equal-height → applica stessa regola
 *     di v39m (flex column body)
 *  3) Tab strip dispositivi scroll orizzontale → wrap su mobile,
 *     scroll resta solo su desktop largo
 * ════════════════════════════════════════════════════════════ */

/* 1. Endpoint URLs visible (wrap instead of ellipsis) */
.aeu-card .aeu-endpoint-row code,
.aeu-endpoint-row > code {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

/* 2. Equal-height cards in .aeu-grid-3 (was missing) */
.aeu-grid-3 > .aeu-card {
    display: flex !important;
    flex-direction: column !important;
}
.aeu-grid-3 > .aeu-card > .aeu-card-body {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
}

/* 3. Tab strip — wrap on mobile/tablet instead of horizontal scroll */
@media (max-width: 900px) {
    .aeu-tabs.aeu-tabs-scroll {
        overflow-x: visible !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
        scrollbar-width: none !important;
    }
    .aeu-tabs.aeu-tabs-scroll::-webkit-scrollbar {
        display: none !important;
    }
    .aeu-tabs.aeu-tabs-scroll .aeu-tab {
        flex: 0 0 auto !important;
    }
}

/* ════════════════════════════════════════════════════════════
 * v39aa (2026-05-18) — endpoint cards: clean URL + button layout
 *
 * v39z made URLs wrap with `overflow-wrap: anywhere` → splits in
 * the middle of words ("dns-" / "query") — ugly. Cards also looked
 * inconsistent because content lengths differ.
 *
 * Clean layout:
 *   ┌────────────────────────────────────────────┐
 *   │  Title         RECOMMENDED                  │  ← header
 *   ├────────────────────────────────────────────┤
 *   │  url-monospace-on-its-own-row              │
 *   │                                  [ COPY ]  │  ← button right
 *   │  Description text below                     │
 *   └────────────────────────────────────────────┘
 * ════════════════════════════════════════════════════════════ */

/* Stack URL + button vertically (button below, right-aligned) */
.aeu-endpoint-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    min-width: 0 !important;
}

/* URL: full row, monospace, word-break only at separators */
.aeu-endpoint-row > code {
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    font-family: var(--font-mono) !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    color: var(--accent) !important;
    background: color-mix(in srgb, var(--accent) 8%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent) !important;
    border-radius: 6px !important;
    padding: 8px 10px !important;
    display: block !important;
}

/* COPY button: aligned right, below the URL */
.aeu-endpoint-row > .aeu-btn,
.aeu-endpoint-row > button {
    align-self: flex-end !important;
    flex: 0 0 auto !important;
}

/* ════════════════════════════════════════════════════════════
 * v39ab (2026-05-18) — force-equal heights in .aeu-grid-3
 *
 * User ha ragione: chiede misure, non opinioni. Le regole v39m+v39z
 * c'erano già MA dipendevano dal default `align-items: stretch` del
 * grid container. Se qualche regola sovrascrive align-items, le
 * card non si stretchano. Forziamo TUTTO esplicito.
 * ════════════════════════════════════════════════════════════ */

.aeu-grid-3 {
    align-items: stretch !important;
}
.aeu-grid-3 > .aeu-card,
.aeu-grid-3 > .aeu-card.aeu-section-soft {
    height: 100% !important;
    min-height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}
.aeu-grid-3 > .aeu-card > .aeu-card-body {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
}
/* Push description text to the bottom so all 3 cards have description
 * at the same y-coordinate regardless of URL wrapping above */
.aeu-grid-3 > .aeu-card > .aeu-card-body > .aeu-field-help:last-child,
.aeu-grid-3 > .aeu-card > .aeu-card-body > p:last-child {
    margin-top: auto !important;
}

/* v39ab REVERTED — non aggiungeva valore, restano regole v39z/v39aa */
.aeu-grid-3 { align-items: initial !important; }
.aeu-grid-3 > .aeu-card.aeu-section-soft {
    height: auto !important;
    min-height: auto !important;
}

/* ════════════════════════════════════════════════════════════
 * v39ac (2026-05-18) — endpoint cards uniform grid layout
 *
 * HTML è invariato:
 *   <div class="aeu-card-body">
 *     <div class="aeu-endpoint-row">
 *       <code>URL</code>
 *       <button>COPY</button>
 *     </div>
 *     <p class="aeu-field-help">description</p>
 *   </div>
 *
 * Uso :has() per identificare card-body con endpoint-row e li
 * trasformo in grid 2-area:
 *   - row 1: URL (full width)
 *   - row 2: description (LEFT) + COPY (RIGHT)
 *
 * `display: contents` su .aeu-endpoint-row dissolve il wrapper,
 * i figli (code + button) partecipano al grid del genitore.
 * Risultato: layout pixel-identico in tutte e 3 le card.
 * ════════════════════════════════════════════════════════════ */

.aeu-card-body:has(> .aeu-endpoint-row) {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
        "url url"
        "desc copy" !important;
    gap: 10px 12px !important;
    align-items: center !important;
}

.aeu-card-body:has(> .aeu-endpoint-row) > .aeu-endpoint-row {
    display: contents !important;
}

.aeu-card-body:has(> .aeu-endpoint-row) > .aeu-endpoint-row > code {
    grid-area: url !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    font-family: var(--font-mono) !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    color: var(--accent) !important;
    background: color-mix(in srgb, var(--accent) 8%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent) !important;
    border-radius: 6px !important;
    padding: 8px 10px !important;
    display: block !important;
}

.aeu-card-body:has(> .aeu-endpoint-row) > .aeu-endpoint-row > .aeu-btn,
.aeu-card-body:has(> .aeu-endpoint-row) > .aeu-endpoint-row > button {
    grid-area: copy !important;
    justify-self: end !important;
    align-self: center !important;
}

.aeu-card-body:has(> .aeu-endpoint-row) > .aeu-field-help {
    grid-area: desc !important;
    margin: 0 !important;
    align-self: center !important;
}

/* ════════════════════════════════════════════════════════════
 * v39ad (2026-05-18) — fix v39ac specificity war
 *
 * v39z aveva .aeu-grid-3 > .aeu-card > .aeu-card-body con
 * specificity 0,3,0 + !important. v39ac aveva .aeu-card-body
 * :has(...) con specificity 0,2,0 + !important. Quando
 * entrambe hanno !important, vince la specificità — quindi
 * v39z stava sovrascrivendo v39ac (display: flex invece di
 * display: grid). Alzo specificity di v39ac sopra v39z.
 * ════════════════════════════════════════════════════════════ */

.aeu-grid-3 > .aeu-card > .aeu-card-body:has(> .aeu-endpoint-row),
.aeu-grid > .aeu-card > .aeu-card-body:has(> .aeu-endpoint-row) {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
        "url url"
        "desc copy" !important;
    gap: 10px 12px !important;
    align-items: center !important;
    flex-direction: initial !important;   /* annulla v39z column */
}

.aeu-grid-3 > .aeu-card > .aeu-card-body:has(> .aeu-endpoint-row) > .aeu-endpoint-row,
.aeu-grid > .aeu-card > .aeu-card-body:has(> .aeu-endpoint-row) > .aeu-endpoint-row {
    display: contents !important;
}

.aeu-grid-3 > .aeu-card > .aeu-card-body:has(> .aeu-endpoint-row) > .aeu-endpoint-row > code,
.aeu-grid > .aeu-card > .aeu-card-body:has(> .aeu-endpoint-row) > .aeu-endpoint-row > code {
    grid-area: url !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    font-family: var(--font-mono) !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    color: var(--accent) !important;
    background: color-mix(in srgb, var(--accent) 8%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent) !important;
    border-radius: 6px !important;
    padding: 8px 10px !important;
    display: block !important;
}

.aeu-grid-3 > .aeu-card > .aeu-card-body:has(> .aeu-endpoint-row) > .aeu-endpoint-row > .aeu-btn,
.aeu-grid-3 > .aeu-card > .aeu-card-body:has(> .aeu-endpoint-row) > .aeu-endpoint-row > button,
.aeu-grid > .aeu-card > .aeu-card-body:has(> .aeu-endpoint-row) > .aeu-endpoint-row > .aeu-btn,
.aeu-grid > .aeu-card > .aeu-card-body:has(> .aeu-endpoint-row) > .aeu-endpoint-row > button {
    grid-area: copy !important;
    justify-self: end !important;
    align-self: center !important;
}

.aeu-grid-3 > .aeu-card > .aeu-card-body:has(> .aeu-endpoint-row) > .aeu-field-help,
.aeu-grid > .aeu-card > .aeu-card-body:has(> .aeu-endpoint-row) > .aeu-field-help {
    grid-area: desc !important;
    margin: 0 !important;
    align-self: center !important;
}

/* ════════════════════════════════════════════════════════════
 * v39ae (2026-05-18) — FORCE equal height on endpoint cards
 *
 * Bypasso tutte le sottigliezze di Grid/Flex/specificity.
 * Imposto min-height fisso sulle 3 card che contengono
 * endpoint-row. Forza pixel-identical altezze.
 * ════════════════════════════════════════════════════════════ */

.aeu-grid-3 > .aeu-card:has(.aeu-endpoint-row),
.aeu-grid > .aeu-card:has(.aeu-endpoint-row) {
    min-height: 180px !important;
    height: auto !important;
}

/* In più, body height riempie sempre la card */
.aeu-grid-3 > .aeu-card:has(.aeu-endpoint-row) > .aeu-card-body,
.aeu-grid > .aeu-card:has(.aeu-endpoint-row) > .aeu-card-body {
    min-height: 110px !important;
}

/* ════════════════════════════════════════════════════════════
 * v39af (2026-05-18) — kill action-row border-bottom in user cards
 *
 * .aeu-action-row ha `border-bottom: 1px solid var(--border)` di
 * default — concepito per liste-azioni admin (più action-row come
 * stack con separator). Sul setup utente, action-row contiene un
 * solo button e questa linea inferiore appare come "linea sopra
 * la nota" sotto, confondendo l'occhio.
 *
 * Rimuovo il bordo nelle card user-side (aeu-section-soft).
 * ════════════════════════════════════════════════════════════ */

.aeu-card.aeu-section-soft .aeu-action-row {
    border-bottom: 0 !important;
    padding: 8px 0 !important;
}

/* v39af REVERTED — la linea sopra la nota È PARTE DEL DESIGN
 * (card-footer divider pattern MDP, skill §5.3). Ripristino. */
.aeu-card.aeu-section-soft .aeu-action-row {
    border-bottom: 1px solid var(--border) !important;
    padding: 12px 0 !important;
}

/* ════════════════════════════════════════════════════════════
 * v39ag (2026-05-18) — TRUE equal height (measured via chromium)
 *
 * Pixel measurement con chromium headless:
 *   DoH: top=50, bottom=230, height=180
 *   DoT: top=40, bottom=230, height=190
 *   DoQ: top=40, bottom=230, height=190
 *
 * Causa: v39ae aveva `height: auto !important` che annullava lo
 * stretch del grid. DoH si fermava al min-height (180), DoT/DoQ
 * stretchavano al content (190).
 *
 * Fix: align-self: stretch + height: 100% per fare stretchare TUTTI
 * i card alla stessa altezza (max della row). Tolgo height:auto.
 * ════════════════════════════════════════════════════════════ */

.aeu-grid-3 > .aeu-card:has(.aeu-endpoint-row),
.aeu-grid > .aeu-card:has(.aeu-endpoint-row) {
    align-self: stretch !important;
    height: 100% !important;
    min-height: 180px !important;
}

/* ════════════════════════════════════════════════════════════
 * v39ah (2026-05-18) — fix top alignment for grid endpoint cards
 *
 * Dopo v39ag heights sono uguali (234 tutte) ma DoH ha top=50
 * mentre DoT/DoQ hanno top=40 (10px offset). Forzo align-self:
 * start sui card endpoint così iniziano tutti dal top della row.
 * ════════════════════════════════════════════════════════════ */

.aeu-grid-3 > .aeu-card:has(.aeu-endpoint-row),
.aeu-grid > .aeu-card:has(.aeu-endpoint-row) {
    align-self: start !important;
    margin-top: 30px !important;
}

/* ════════════════════════════════════════════════════════════
 * v39ai (2026-05-18) — split single-endpoint vs multi-endpoint
 *
 * Bug v39ac/ad: display: contents su .aeu-endpoint-row + grid
 * 2-area sul card-body funziona quando c'è UNA SOLA endpoint-row
 * + description. Quando ci sono N endpoint-row (es. AdGuard:
 * DoQ + DoH), tutte si dissolvono nella stessa grid e i loro
 * figli (label + code + button × N) si sovrappongono nelle
 * stesse celle.
 *
 * Fix: limito il grid 2-area al caso SINGOLO usando
 *      :has(> .aeu-endpoint-row:only-of-type)
 * Per il caso MULTI, riporto endpoint-row a flex row normale
 * con label + code + button inline.
 * ════════════════════════════════════════════════════════════ */

/* ─────────── CASE 1: SINGLE endpoint-row (DoH/DoT/DoQ cards) ──────
 * Riapplico v39ad ma SOLO se c'è una sola endpoint-row nella body.
 * Per evitare override di multi-endpoint, lo restringo. */

.aeu-card-body:has(> .aeu-endpoint-row:only-of-type) {
    /* keep v39ad grid behavior — only applies to single endpoint cards */
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-areas: "url url" "desc copy" !important;
    gap: 10px 12px !important;
}
.aeu-card-body:has(> .aeu-endpoint-row:only-of-type) > .aeu-endpoint-row {
    display: contents !important;
}

/* ─────────── CASE 2: MULTIPLE endpoint-row (AdGuard pattern) ──────
 * Quando ci sono ≥2 endpoint-row nello stesso card-body, ogni
 * endpoint-row è una RIGA standalone:
 *   [label] [URL — flex 1] [COPY] 
 * Ripristino flex row e annullo v39aa column. */

.aeu-card-body:has(> .aeu-endpoint-row + .aeu-endpoint-row) {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}
.aeu-card-body:has(> .aeu-endpoint-row + .aeu-endpoint-row) > .aeu-endpoint-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    min-width: 0 !important;
}
.aeu-card-body:has(> .aeu-endpoint-row + .aeu-endpoint-row) > .aeu-endpoint-row > .aeu-muted {
    flex: 0 0 auto !important;
    min-width: 50px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    font-size: 11px !important;
    letter-spacing: 0.5px !important;
}
.aeu-card-body:has(> .aeu-endpoint-row + .aeu-endpoint-row) > .aeu-endpoint-row > code {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    font-family: var(--font-mono) !important;
    font-size: 12px !important;
    background: color-mix(in srgb, var(--accent) 8%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent) !important;
    border-radius: 6px !important;
    padding: 6px 10px !important;
    color: var(--accent) !important;
    white-space: normal !important;
}
.aeu-card-body:has(> .aeu-endpoint-row + .aeu-endpoint-row) > .aeu-endpoint-row > .aeu-btn,
.aeu-card-body:has(> .aeu-endpoint-row + .aeu-endpoint-row) > .aeu-endpoint-row > button {
    flex: 0 0 auto !important;
}

/* ─────────── CASE 3: aeu-code-block standalone ──────
 * Quando un aeu-code-block è da solo (myphone hostname case),
 * mostralo INLINE con pre + COPY side-by-side, non stacked.
 * Riduce dimensione padding. */

.aeu-card-body > .aeu-code-block {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 12px !important;
    margin: 8px 0 !important;
}
.aeu-card-body > .aeu-code-block > pre {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    white-space: pre-wrap !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    font-family: var(--font-mono) !important;
    font-size: 12px !important;
    color: var(--accent) !important;
}
.aeu-card-body > .aeu-code-block > .aeu-btn,
.aeu-card-body > .aeu-code-block > button {
    flex: 0 0 auto !important;
}

/* ════════════════════════════════════════════════════════════
 * v39aj (2026-05-18) — fix v39ai: align stretch + override v39ad
 *
 * v39ai funziona ma v39ad applica anche al multi-case con
 * align-items: center → URL+COPY centrati invece di full-width.
 * Forzo align-items: stretch + alzo specificità.
 * ════════════════════════════════════════════════════════════ */

/* MULTI endpoint case — full width stretch, row layout per riga */
.aeu-card.aeu-section-soft .aeu-card-body:has(> .aeu-endpoint-row + .aeu-endpoint-row) {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-items: stretch !important;
    gap: 10px !important;
    grid-template-areas: none !important;
    grid-template-columns: none !important;
}
.aeu-card.aeu-section-soft .aeu-card-body:has(> .aeu-endpoint-row + .aeu-endpoint-row) > .aeu-endpoint-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    min-width: 0 !important;
}
.aeu-card.aeu-section-soft .aeu-card-body:has(> .aeu-endpoint-row + .aeu-endpoint-row) > .aeu-endpoint-row > .aeu-muted {
    flex: 0 0 60px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    font-size: 11px !important;
    letter-spacing: 0.5px !important;
    color: var(--muted) !important;
}
.aeu-card.aeu-section-soft .aeu-card-body:has(> .aeu-endpoint-row + .aeu-endpoint-row) > .aeu-endpoint-row > code {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    font-family: var(--font-mono) !important;
    font-size: 12px !important;
    background: color-mix(in srgb, var(--accent) 8%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent) !important;
    border-radius: 6px !important;
    padding: 6px 10px !important;
    color: var(--accent) !important;
    white-space: normal !important;
}
.aeu-card.aeu-section-soft .aeu-card-body:has(> .aeu-endpoint-row + .aeu-endpoint-row) > .aeu-endpoint-row > .aeu-btn,
.aeu-card.aeu-section-soft .aeu-card-body:has(> .aeu-endpoint-row + .aeu-endpoint-row) > .aeu-endpoint-row > button {
    flex: 0 0 auto !important;
}
/* Description before endpoint list */
.aeu-card.aeu-section-soft .aeu-card-body:has(> .aeu-endpoint-row + .aeu-endpoint-row) > .aeu-field-help {
    width: 100% !important;
    text-align: left !important;
    margin: 0 0 4px 0 !important;
}
/* ────────────────────────────────────────────────────────────────
   AEUDNSTHEME v39ak — aeu-feature-list pattern (2026-05-18)
   ----------------------------------------------------------------
   Use a vertical list of items (icon + title + description + meta
   badges) INSTEAD of a CSS grid of "mini-cards" when listing more
   than 2-3 short items inside a parent card. Rule: niente colone.
   ──────────────────────────────────────────────────────────────── */
.aeu-feature-list {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.aeu-feature-list .aeu-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 12px 14px;
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: 8px;
}
.aeu-feature-list .aeu-feature-icon {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent);
}
.aeu-feature-list .aeu-feature-icon .icon,
.aeu-feature-list .aeu-feature-icon svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}
.aeu-feature-list .aeu-feature-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.aeu-feature-list .aeu-feature-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    margin: 0;
    line-height: 1.3;
}
.aeu-feature-list .aeu-feature-desc {
    margin: 0;
    font-size: 13px;
    color: var(--muted);
    line-height: 1.45;
}
.aeu-feature-list .aeu-feature-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
}
.aeu-feature-list .aeu-feature-meta .aeu-pill {
    font-size: 11px;
    padding: 2px 8px;
}
@media (max-width: 480px) {
    .aeu-feature-list .aeu-feature-item {
        padding: 10px 12px;
        gap: 10px;
    }
    .aeu-feature-list .aeu-feature-icon {
        flex: 0 0 32px;
        width: 32px;
        height: 32px;
    }
}

/* Same pattern works for "configuration list" entries used in routers
   tab — explicit override so .setup-config-list always stacks vertically. */
.aeu-card.aeu-section-soft .setup-config-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    grid-template-columns: none !important;
}
.aeu-card.aeu-section-soft .setup-config-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 8px 12px !important;
    background: var(--surface-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 6px !important;
    min-width: 0 !important;
}
.aeu-card.aeu-section-soft .setup-config-item > span {
    color: var(--muted) !important;
    font-size: 13px !important;
    flex-shrink: 0 !important;
}
.aeu-card.aeu-section-soft .setup-config-item > code {
    color: var(--text) !important;
    font-family: var(--font-mono) !important;
    font-size: 12px !important;
    flex: 1 !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    text-align: right !important;
}
@media (max-width: 480px) {
    .aeu-card.aeu-section-soft .setup-config-item {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 4px !important;
    }
    .aeu-card.aeu-section-soft .setup-config-item > code {
        text-align: left !important;
        width: 100% !important;
    }
}

/* ────────────────────────────────────────────────────────────────
   AEUDNSTHEME v39ak supplement — helper classes used by Browsers tab
   ──────────────────────────────────────────────────────────────── */
.aeu-subsection-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    margin: 14px 0 8px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border);
}
.aeu-subsection-title:first-child {
    margin-top: 0;
}
.aeu-details {
    margin-top: 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface-card);
    overflow: hidden;
}
.aeu-details > summary {
    cursor: pointer;
    list-style: none;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
    user-select: none;
}
.aeu-details > summary::-webkit-details-marker { display: none; }
.aeu-details > summary::before {
    content: '▸';
    color: var(--muted);
    transition: transform var(--mat-dur-base) var(--mat-ease-standard);
}
.aeu-details[open] > summary::before {
    transform: rotate(90deg);
}
.aeu-details > *:not(summary) {
    padding: 0 14px 12px;
}
.aeu-details > summary + * {
    padding-top: 6px;
    border-top: 1px solid var(--border);
}

/* ══════════════════════════════════════════════════════════════════════════
   AEUDNSTHEME v39m — elegant admin typography (2026-05-18, user feedback)
   "il testo è grande non va bene non è elegante"
   ──────────────────────────────────────────────────────────────────────────
   Refined font scale for admin/* and user dashboard pages. Reduces oversized
   numbers, page titles, and card headers to a calmer, more "premium admin"
   feel (Linear / Vercel / Stripe-style). Mobile clamps kept.
   ══════════════════════════════════════════════════════════════════════════ */

/* PAGE-HEAD — title bigger than body but not heavy */
.aeu-page-head .page-title {
    font-size: clamp(17px, 1.6vw, 20px) !important;
    font-weight: 600 !important;
    letter-spacing: -0.2px !important;
    line-height: 1.25 !important;
}
.aeu-page-head .page-subtitle {
    font-size: clamp(11.5px, 1vw, 13px) !important;
    color: var(--muted) !important;
}

/* SECTION CARD TITLE — lighter, less shouty */
.aeu-section-title {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--text);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 1.3;
}

/* STAT CARD (lifted-tile dashboard KPI) — number prominent but not huge */
.aeu-stat-soft .aeu-stat-value {
    font-size: 20px !important;
    font-weight: 600 !important;
    letter-spacing: -0.3px !important;
    line-height: 1.2 !important;
}
.aeu-stat-soft .aeu-stat-value small {
    font-size: 11px !important;
    font-weight: 400 !important;
    color: var(--muted) !important;
}
.aeu-stat-soft .aeu-stat-label {
    font-size: 9.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    color: var(--muted) !important;
}

/* Generic .stat-value (legacy class still used in some admin pages) */
.stat-value, .card-grid .stat-value {
    font-size: 20px !important;
    font-weight: 600 !important;
    letter-spacing: -0.3px !important;
}
.stat-label, .card-grid .stat-label {
    font-size: 10px !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}

/* h1 .page-title legacy (non-aeu-page-head) */
.page-title:not(.aeu-page-head .page-title) {
    font-size: 19px !important;
    font-weight: 600 !important;
    letter-spacing: -0.2px !important;
}
.page-subtitle:not(.aeu-page-head .page-subtitle) {
    font-size: 12.5px !important;
    color: var(--muted);
}

/* Section section-title (admin secondary section) */
.section-title {
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* aeu-status-row text */
.aeu-status-row {
    font-size: 12.5px;
    line-height: 1.4;
}

/* Aria of the "Quantum Bunker" subtitle: deemphasised */
.aeu-page-head .page-subtitle strong { font-weight: 500; }

/* Compact card body — less vertical air around the title */
.aeu-section-card-header { padding: 12px 16px 8px !important; }
.aeu-section-card-header .aeu-section-tile { width: 32px; height: 32px; min-width: 32px; }
.aeu-section-card-header .aeu-section-tile svg { width: 16px; height: 16px; }
.aeu-card-body { padding: 12px 16px !important; }


/* ══════════════════════════════════════════════════════════════════════════
   AEUDNSTHEME v39n — missing admin classes (2026-05-18)
   Fixes unstyled aeu-mini-stat / aeu-status-name / aeu-auth-modes tiles on
   admin/index.php dashboard.
   ══════════════════════════════════════════════════════════════════════════ */

/* --- Mini-stat tile (DoH / DoT / DNS53 / DoQ / ODoH / AuthProxy) ----- */
.aeu-mini-stat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--surface-2, color-mix(in srgb, var(--text) 3%, transparent));
    border: 1px solid var(--border);
    transition: border-color .15s ease, background .15s ease;
    min-height: 36px;
}
.aeu-mini-stat.is-online {
    background: color-mix(in srgb, var(--success) 8%, transparent);
    border-color: color-mix(in srgb, var(--success) 25%, transparent);
}
.aeu-mini-stat.is-offline {
    background: color-mix(in srgb, var(--muted) 6%, transparent);
    border-color: color-mix(in srgb, var(--muted) 18%, transparent);
    opacity: .75;
}
.aeu-mini-stat-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    line-height: 1.2;
}
.aeu-mini-stat-value {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
    line-height: 1.2;
    text-align: right;
}
.aeu-mini-stat.is-online .aeu-mini-stat-value {
    color: var(--success-strong, var(--success));
}
.aeu-mini-stat.is-offline .aeu-mini-stat-value {
    color: var(--muted);
}

/* --- Status row: protocol name in service-status table -------------- */
.aeu-status-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
}
.aeu-status-name {
    font-weight: 600;
    color: var(--text);
    font-size: 13px;
}
.aeu-stat-text {
    color: var(--muted);
    font-size: 12px;
}

/* --- aeu-auth-modes cell: wrap 2-3 pills on the same row ----------- */
td.aeu-auth-modes {
    display: table-cell;
}
td.aeu-auth-modes > .aeu-pill {
    margin-right: 4px;
    margin-bottom: 2px;
}
@media (max-width: 900px) {
    td.aeu-auth-modes {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
    }
    td.aeu-auth-modes > .aeu-pill {
        margin: 0;
    }
}

/* Tabular-nums on mini-stat for ms latency alignment */
.aeu-grid-4 .aeu-mini-stat,
.aeu-grid-2 .aeu-mini-stat {
    font-variant-numeric: tabular-nums;
}


/* ══════════════════════════════════════════════════════════════════════════
   AEUDNSTHEME v39o — fix mini-stat tile wrapping (2026-05-18)
   "62" and "ms" su due righe perche' 4 colonne strette + space-between.
   Layout verticale stacked: label tiny uppercase top, value mono bottom,
   nowrap su entrambi. Look "Linear/Stripe metric tile".
   ══════════════════════════════════════════════════════════════════════════ */

/* OVERRIDE v39n: layout verticale stacked, no wrap */
.aeu-mini-stat {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 2px !important;
    padding: 7px 10px !important;
    border-radius: 6px;
    background: color-mix(in srgb, var(--text) 3%, transparent);
    border: 1px solid var(--border);
    min-height: 44px;
    overflow: hidden;
}
.aeu-mini-stat.is-online {
    background: color-mix(in srgb, var(--success) 8%, transparent);
    border-color: color-mix(in srgb, var(--success) 25%, transparent);
}
.aeu-mini-stat.is-offline {
    background: color-mix(in srgb, var(--muted) 5%, transparent);
    border-color: color-mix(in srgb, var(--muted) 16%, transparent);
    opacity: .7;
}

.aeu-mini-stat-label {
    display: block !important;
    font-size: 9px !important;
    font-weight: 600 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: var(--muted) !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    text-align: left !important;
}

.aeu-mini-stat-value {
    display: block !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--text) !important;
    font-variant-numeric: tabular-nums !important;
    font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    text-align: left !important;
    width: 100%;
}

.aeu-mini-stat.is-online .aeu-mini-stat-value {
    color: var(--success-strong, var(--success)) !important;
}
.aeu-mini-stat.is-offline .aeu-mini-stat-value {
    color: var(--muted) !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   AEUDNSTHEME v39p — elegant DNS Authentication Methods table (2026-05-18)
   "rendiamola piu elegante" — user request
   ──────────────────────────────────────────────────────────────────────────
   Refines .aeu-protocol-table: protocol name as colored mono badge with
   left-border indicator, tighter pill spacing in auth-modes cell, refined
   ODoH status, mono notes. Look: "Stripe / Linear API docs table".
   ══════════════════════════════════════════════════════════════════════════ */

.aeu-protocol-table {
    --proto-doh:   var(--info,   #3b82f6);
    --proto-dot:   var(--accent, #8b5cf6);
    --proto-doq:   var(--warning, #f59e0b);
    --proto-dns53: var(--muted,   #94a3b8);
}

/* HEADER — tighter, monospace-like, more refined */
.aeu-protocol-table thead th {
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: var(--muted) !important;
    padding: 14px 12px 10px !important;
    border-bottom: 1px solid var(--border) !important;
}

/* ROW SPACING */
.aeu-protocol-table tbody td {
    padding: 14px 12px !important;
    font-size: 13px !important;
    vertical-align: middle !important;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent) !important;
}

/* PROTOCOL CELL — colored left-border accent + badge */
.aeu-protocol-cell {
    position: relative;
    padding-left: 24px !important;
}
.aeu-protocol-cell::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 22px;
    border-radius: 2px;
    background: var(--proto-color, var(--muted));
}
tr:has(.aeu-proto-doh)   .aeu-protocol-cell { --proto-color: var(--proto-doh); }
tr:has(.aeu-proto-dot)   .aeu-protocol-cell { --proto-color: var(--proto-dot); }
tr:has(.aeu-proto-doq)   .aeu-protocol-cell { --proto-color: var(--proto-doq); }
tr:has(.aeu-proto-dns53) .aeu-protocol-cell { --proto-color: var(--proto-dns53); }

/* PROTOCOL BADGE — bold mono name, no caps decoration */
.aeu-proto-badge {
    display: inline-block;
    font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--text);
    padding: 0;
    background: none;
    border: 0;
}
.aeu-proto-doh   { color: var(--proto-doh)   !important; }
.aeu-proto-dot   { color: var(--proto-dot)   !important; }
.aeu-proto-doq   { color: var(--proto-doq)   !important; }
.aeu-proto-dns53 { color: var(--proto-dns53) !important; font-size: 11.5px; }

/* PORT CELL — small mono in subtle muted pill */
.aeu-protocol-table tbody td:nth-child(2) code {
    display: inline-block;
    padding: 2px 8px;
    background: color-mix(in srgb, var(--text) 5%, transparent);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

/* AUTH MODES CELL — pills tighter */
.aeu-protocol-table .aeu-auth-modes {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    align-items: center;
}
.aeu-protocol-table .aeu-auth-modes .aeu-pill {
    padding: 2px 8px !important;
    font-size: 9.5px !important;
    letter-spacing: 0.05em !important;
    font-weight: 600 !important;
    border-radius: 4px !important;
    text-transform: uppercase !important;
}

/* ODoH CELL — pill with leading dot indicator */
.aeu-protocol-table tbody td:nth-child(4) .aeu-pill {
    padding: 2px 8px 2px 18px !important;
    font-size: 10px !important;
    letter-spacing: 0.05em !important;
    border-radius: 4px !important;
    position: relative;
}
.aeu-protocol-table tbody td:nth-child(4) .aeu-pill::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* NOTES CELL — muted mono with smaller text */
.aeu-protocol-table tbody td:last-child {
    color: var(--muted) !important;
    font-size: 11.5px !important;
    line-height: 1.5 !important;
    max-width: 380px;
}
.aeu-protocol-table tbody td:last-child code {
    background: color-mix(in srgb, var(--text) 4%, transparent);
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 11px;
    color: var(--text);
}

/* HOVER — softer, accent left-border */
.aeu-protocol-table tbody tr {
    transition: background 180ms ease, border-color 180ms ease;
}
.aeu-protocol-table tbody tr:hover {
    background: color-mix(in srgb, var(--proto-color, var(--text)) 6%, transparent) !important;
}
.aeu-protocol-table tbody tr:has(.aeu-proto-doh):hover   { --proto-color: var(--proto-doh); }
.aeu-protocol-table tbody tr:has(.aeu-proto-dot):hover   { --proto-color: var(--proto-dot); }
.aeu-protocol-table tbody tr:has(.aeu-proto-doq):hover   { --proto-color: var(--proto-doq); }
.aeu-protocol-table tbody tr:has(.aeu-proto-dns53):hover { --proto-color: var(--proto-dns53); }

/* MOBILE — stacked cards per row */
@media (max-width: 900px) {
    .aeu-protocol-cell::before { left: 0; }
    .aeu-protocol-table tbody td:last-child {
        max-width: 100%;
    }
}


/* ══════════════════════════════════════════════════════════════════════════
   AEUDNSTHEME v39q — kill protocol-cell vertical bar + fix mobile overlap
   (2026-05-18) "vedo una | davanti ai protocolli" + "sovrapposizione mobile"
   ──────────────────────────────────────────────────────────────────────────
   v39p added .aeu-protocol-cell::before as a 3px colored vertical bar to act
   as accent indicator. User finds it ugly AND it conflicts with the mobile
   responsive rule .aeu-table-responsive td::before { content: attr(data-label) }
   causing the data-label to be overwritten on small screens.
   Solution: kill the bar entirely. The colored protocol name (DoH blue, DoT
   purple, DoQ amber) is already the indicator.
   ══════════════════════════════════════════════════════════════════════════ */

/* Remove the bar entirely — protocol-name color is enough */
.aeu-protocol-table .aeu-protocol-cell::before {
    content: none !important;
    display: none !important;
}
.aeu-protocol-table .aeu-protocol-cell {
    padding-left: 12px !important;
}

/* MOBILE — restore data-label rendering + tighter spacing */
@media (max-width: 768px) {
    /* Ensure mobile pseudo-element shows the data-label correctly */
    .aeu-protocol-table tbody td::before {
        content: attr(data-label) !important;
        display: inline-block !important;
        font-size: 10.5px !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.08em !important;
        color: var(--muted) !important;
        background: none !important;
        border: 0 !important;
        width: auto !important;
        height: auto !important;
        position: static !important;
        transform: none !important;
        border-radius: 0 !important;
    }
    .aeu-protocol-table .aeu-protocol-cell { padding-left: 0 !important; }
    .aeu-protocol-table tbody td {
        padding: 8px 0 !important;
        font-size: 13px !important;
    }
    .aeu-protocol-table tbody td:last-child {
        flex-direction: column !important;
        align-items: flex-start !important;
        text-align: left !important;
    }
    .aeu-protocol-table tbody td:last-child::before {
        margin-bottom: 4px;
    }
    /* Auth modes pills wrap right-aligned */
    .aeu-protocol-table .aeu-auth-modes {
        justify-content: flex-end !important;
        flex: 1 1 auto;
    }
    /* Protocol badge bigger on mobile so it reads well */
    .aeu-proto-badge { font-size: 14px !important; }
    .aeu-proto-dns53 { font-size: 13px !important; }
}


/* ══════════════════════════════════════════════════════════════════════════
   AEUDNSTHEME v39r — landing.php + branding.php + slpfw.php
   (2026-05-18) Apply elegant token system to 3 admin pages.
   Adds CSS for: feature-item/header, checkbox-grid/item, font-preview-*,
   branding-config-*, logo-grid/card refinements. Removes need for inline
   <style> blocks in these templates.
   ══════════════════════════════════════════════════════════════════════════ */

/* === LANDING.PHP — feature/benefit cards & checkbox grid ============ */
.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px 14px;
    padding: 4px 0 8px;
}
.checkbox-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text);
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--text) 2%, transparent);
    transition: border-color .15s ease, background .15s ease;
    user-select: none;
}
.checkbox-item:hover { border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.checkbox-item:has(input:checked) {
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    border-color: color-mix(in srgb, var(--accent) 35%, transparent);
    color: var(--text);
}
.checkbox-item input[type="checkbox"] {
    accent-color: var(--accent);
    width: 14px;
    height: 14px;
    margin: 0;
}

.feature-item {
    background: color-mix(in srgb, var(--text) 2%, transparent);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px 16px;
    margin: 10px 0;
    transition: border-color .15s ease;
}
.feature-item:hover {
    border-color: color-mix(in srgb, var(--accent) 28%, transparent);
}
.feature-item.disabled { opacity: 0.55; }
.feature-header {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding-bottom: 10px;
    margin-bottom: 12px;
    border-bottom: 1px dashed color-mix(in srgb, var(--border) 70%, transparent);
}
.form-group-inline {
    display: flex;
    align-items: center;
    gap: 8px;
}
.form-group-inline .form-label {
    margin-bottom: 0;
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* legacy "inline-form" — sit form on same row as button */
.inline-form {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

/* mt-md utility (was inline) */
.mt-md { margin-top: 16px !important; }
.mb-md { margin-bottom: 16px !important; }
.mb-lg { margin-bottom: 24px !important; }

/* Legacy <h4> + <h5> inside cards (landing.php uses these as sub-section labels) */
.aeu-card h4:not(.aeu-section-title),
.aeu-card h5 {
    font-size: 11.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--muted) !important;
    margin: 18px 0 8px !important;
    padding-bottom: 4px;
    border-bottom: 1px dashed color-mix(in srgb, var(--border) 60%, transparent);
}
.aeu-card h5 { font-size: 11px !important; }
.aeu-card > h4:first-of-type:not(.aeu-section-title) { margin-top: 4px !important; }

/* Legacy btn → match aeu-btn dimensions when used inside landing.php */
.btn:not(.aeu-btn) {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 12.5px;
    font-weight: 600;
    border-radius: 6px;
    border: 1px solid var(--border);
    cursor: pointer;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease;
}
.btn-primary { background: var(--accent); color: white; border-color: var(--accent); }
.btn-primary:hover { background: color-mix(in srgb, var(--accent) 85%, black); }
.btn-success { background: var(--success, #10b981); color: white; border-color: var(--success, #10b981); }
.btn-success:hover { filter: brightness(0.92); }
.btn-danger  { background: var(--danger, #ef4444); color: white; border-color: var(--danger, #ef4444); }
.btn-danger:hover  { filter: brightness(0.92); }

/* Legacy form-row / form-group / form-label / form-control polish */
.form-row {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.form-row > .form-group { flex: 1 1 180px; min-width: 0; }
.form-group { margin-bottom: 12px; }
.form-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 4px;
}
.form-control:not(textarea) {
    width: 100%;
    padding: 8px 10px;
    background: color-mix(in srgb, var(--text) 3%, transparent);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-size: 13px;
    font-family: inherit;
    transition: border-color .15s ease, background .15s ease;
}
.form-control:focus {
    outline: 0;
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 4%, transparent);
}
textarea.form-control {
    width: 100%;
    padding: 8px 10px;
    background: color-mix(in srgb, var(--text) 3%, transparent);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-size: 13px;
    font-family: inherit;
    line-height: 1.5;
    resize: vertical;
}
textarea.form-control:focus {
    outline: 0;
    border-color: var(--accent);
}
.form-control-sm { font-size: 12px; padding: 6px 8px; }

/* === BRANDING.PHP — font preview & logo cards ======================= */
.font-preview-box {
    background: color-mix(in srgb, var(--text) 3%, transparent);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 18px;
    transition: border-color .25s ease;
}
.font-preview-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 12px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--border);
}
.font-preview-name {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.2px;
    color: var(--text);
}
.font-preview-category {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent);
    border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
}
.font-preview-samples {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}
.font-preview-sample {
    background: var(--surface-card, var(--card-bg, color-mix(in srgb, var(--text) 4%, transparent)));
    padding: 10px 12px;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid var(--border);
    transition: border-color .15s ease, background .15s ease;
}
.font-preview-sample:hover {
    border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}
.font-preview-sample.selected {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.font-preview-sample.selected .sample-label {
    color: var(--accent);
}
.sample-label {
    font-size: 9.5px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    margin-bottom: 4px;
}
.sample-text {
    font-size: 15px;
    color: var(--text);
    line-height: 1.3;
}
.font-preview-paragraph {
    background: var(--surface-card, var(--card-bg, color-mix(in srgb, var(--text) 4%, transparent)));
    border: 1px solid var(--border);
    padding: 12px 14px;
    border-radius: 6px;
}
.font-preview-paragraph p {
    font-size: 13px;
    line-height: 1.6;
    color: var(--text);
    margin: 4px 0 0 0;
}

/* Logo grid */
.logo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    padding: 4px 0;
}
.logo-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    background: color-mix(in srgb, var(--text) 2%, transparent);
    transition: border-color .15s ease, background .15s ease;
}
.logo-card:hover {
    border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}
.logo-card.selected {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.logo-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.logo-card img {
    max-width: 100%;
    max-height: 80px;
    object-fit: contain;
}
.logo-card .logo-name {
    font-size: 10.5px;
    color: var(--muted);
    text-align: center;
    word-break: break-all;
    font-family: 'JetBrains Mono', monospace;
    line-height: 1.3;
}

/* Branding 2FA fixed preview */
.branding-preview-box {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--text) 2%, transparent);
}
.branding-2fa-img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    border-radius: 6px;
    background: white;
    padding: 4px;
}
.branding-2fa-name {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--text);
    font-weight: 600;
}

/* Branding "Configurazione Attuale" summary */
.branding-config-card {
    background: color-mix(in srgb, var(--accent) 4%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
    border-radius: 10px;
    padding: 16px;
    margin: 16px 0;
}
.branding-config-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
}
.branding-config-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.branding-config-label {
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
}
.branding-config-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    font-family: 'JetBrains Mono', monospace;
    word-break: break-all;
}

/* === SLPFW.PHP — plugin form ======================================== */
/* aeu-toggles-row layout */
.aeu-toggles-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 16px;
    padding: 12px 0;
    margin: 8px 0;
}
.aeu-toggle-label {
    font-size: 12.5px;
    color: var(--text);
    margin-right: 16px;
}
.aeu-radio-group {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    padding: 8px 0;
    margin-bottom: 8px;
}
.aeu-radio-group label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--text);
    cursor: pointer;
}
.aeu-radio-group input[type="radio"] {
    accent-color: var(--accent);
}
.aeu-input-label {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 14px 0 6px;
}
.aeu-field-help {
    display: block;
    margin: -6px 0 12px;
    font-size: 11px;
    color: var(--muted);
    line-height: 1.4;
}
.aeu-form-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

/* Inline form (e.g. add-feature with text input + button) compact */
.aeu-section-card-header .inline-form { margin-left: auto; }
.aeu-section-card-header .inline-form .form-control {
    height: 30px;
    font-size: 12px;
    width: 180px !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   AEUDNSTHEME v39s — proper aeu-* classes for landing.php + branding.php
   (2026-05-18) Replaces v39r legacy shims with aeu-prefixed components.
   Pattern: same as redis.php / slpfw.php (model implementations).
   ══════════════════════════════════════════════════════════════════════════ */

/* === Inline SVG sprite container — hide from layout ================ */
.aeu-svg-sprite { display: none; width: 0; height: 0; position: absolute; }

/* === Page-head actions row (top-right toggle / preview links) ====== */
.aeu-page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}
.aeu-page-head-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* === Section header with inline form (e.g. Benefits "+ Add") ======= */
.aeu-section-card-header {
    flex-wrap: wrap;
    row-gap: 8px;
}
.aeu-section-card-header > h4 + form,
.aeu-section-card-header > h4 + .inline-form {
    margin-left: auto;
}
.aeu-section-card-header .inline-form {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.aeu-section-card-header .inline-form .aeu-input-group {
    margin: 0;
    padding-top: 14px;
    min-width: 180px;
}
.aeu-section-card-header .inline-form .aeu-input-group label {
    top: 14px;
    font-size: 12px;
}

/* === Inline-group variant (sits side-by-side with toggles) ========= */
.aeu-input-group-inline {
    padding-top: 14px !important;
    margin: 0 !important;
    min-width: 140px;
}
.aeu-input-group-inline label { top: 14px; font-size: 11px; }

/* === Generic ms-auto helper used in card headers =================== */
.ms-auto { margin-left: auto; }

/* === Input label (small uppercase divider inside form) ============= */
.aeu-input-label {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 22px 0 10px;
    padding-bottom: 4px;
    border-bottom: 1px dashed color-mix(in srgb, var(--border) 60%, transparent);
}
.aeu-card-body > form > .aeu-input-label:first-child { margin-top: 4px; }

/* === Field help (small caption below a row) ========================= */
.aeu-field-help {
    display: block;
    margin: -8px 0 14px;
    font-size: 11px;
    color: var(--muted);
    line-height: 1.4;
}

/* === Checkbox tile grid (used on landing "Sections Visibility") ==== */
.aeu-checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
    padding: 4px 0 8px;
}
.aeu-check-tile {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--text) 2%, transparent);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
    user-select: none;
    font-size: 13px;
    color: var(--text);
}
.aeu-check-tile:hover {
    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}
.aeu-check-tile input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}
.aeu-check-tile-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 1.5px solid var(--border);
    background: var(--surface-card, transparent);
    transition: border-color .15s ease, background .15s ease;
    flex-shrink: 0;
}
.aeu-check-tile-mark::after {
    content: "";
    width: 4px;
    height: 8px;
    border-right: 2px solid white;
    border-bottom: 2px solid white;
    transform: rotate(45deg) translate(-1px, -1px);
    opacity: 0;
    transition: opacity .15s ease;
}
.aeu-check-tile input:checked ~ .aeu-check-tile-mark {
    background: var(--accent);
    border-color: var(--accent);
}
.aeu-check-tile input:checked ~ .aeu-check-tile-mark::after { opacity: 1; }
.aeu-check-tile:has(input:checked) {
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}
.aeu-check-tile-label { line-height: 1.3; }

/* === Repeatable item card (used on landing for each Feature/Benefit) */
.aeu-item-card {
    background: color-mix(in srgb, var(--text) 2%, transparent);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px 16px;
    margin: 12px 0;
    transition: border-color .15s ease;
}
.aeu-item-card:hover {
    border-color: color-mix(in srgb, var(--accent) 28%, transparent);
}
.aeu-item-card.is-disabled { opacity: 0.55; }
.aeu-item-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding-bottom: 12px;
    margin-bottom: 14px;
    border-bottom: 1px dashed color-mix(in srgb, var(--border) 70%, transparent);
}

/* === Font preview (branding.php) — aeu-prefixed =================== */
.aeu-font-preview {
    background: color-mix(in srgb, var(--text) 3%, transparent);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 18px;
    transition: border-color .25s ease, box-shadow .25s ease;
    margin-top: 16px;
}
.aeu-font-preview.is-flash {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
}
.aeu-font-preview-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 12px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--border);
}
.aeu-font-preview-name {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.2px;
    color: var(--text);
}
.aeu-font-preview-category {
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent);
    border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
}
.aeu-font-preview-samples {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}
.aeu-font-preview-sample {
    background: var(--card-bg, color-mix(in srgb, var(--text) 4%, transparent));
    padding: 10px 12px;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid var(--border);
    transition: border-color .15s ease, background .15s ease;
}
.aeu-font-preview-sample:hover {
    border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}
.aeu-font-preview-sample.is-selected {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.aeu-font-preview-sample.is-selected .aeu-font-preview-sample-label {
    color: var(--accent);
}
.aeu-font-preview-sample-label {
    font-size: 9.5px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    margin-bottom: 4px;
}
.aeu-font-preview-sample-text {
    font-size: 15px;
    color: var(--text);
    line-height: 1.3;
}
.aeu-font-preview-paragraph {
    background: var(--card-bg, color-mix(in srgb, var(--text) 4%, transparent));
    border: 1px solid var(--border);
    padding: 12px 14px;
    border-radius: 6px;
}
.aeu-font-preview-paragraph p {
    font-size: 13px;
    line-height: 1.6;
    color: var(--text);
    margin: 4px 0 0 0;
}

/* === Logo grid (branding.php) — aeu-prefixed ====================== */
.aeu-logo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    padding: 4px 0;
}
.aeu-logo-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    background: color-mix(in srgb, var(--text) 2%, transparent);
    transition: border-color .15s ease, background .15s ease;
    position: relative;
}
.aeu-logo-card:hover {
    border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}
.aeu-logo-card.is-selected {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.aeu-logo-card.is-selected::before {
    content: "✓";
    position: absolute;
    top: 6px;
    right: 8px;
    color: var(--accent);
    font-weight: 700;
    font-size: 12px;
}
.aeu-logo-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.aeu-logo-card img {
    max-width: 100%;
    max-height: 80px;
    object-fit: contain;
}
.aeu-logo-name {
    font-size: 10.5px;
    color: var(--muted);
    text-align: center;
    word-break: break-all;
    font-family: 'JetBrains Mono', monospace;
    line-height: 1.3;
}

/* === 2FA fixed preview ============================================ */
.aeu-2fa-preview {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--text) 2%, transparent);
}
.aeu-2fa-preview img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    border-radius: 6px;
    background: white;
    padding: 4px;
}
.aeu-2fa-name {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--text);
    font-weight: 600;
}

/* === Summary card (branding "Current Config") ===================== */
.aeu-summary-card {
    background: color-mix(in srgb, var(--accent) 4%, transparent) !important;
    border-color: color-mix(in srgb, var(--accent) 22%, transparent) !important;
}
.aeu-summary-item { display: flex; flex-direction: column; gap: 4px; }
.aeu-summary-label {
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
}
.aeu-summary-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    font-family: 'JetBrains Mono', monospace;
    word-break: break-all;
}

/* === Inline-form helper polish ==================================== */
.inline-form {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

/* === aeu-btn-outline / aeu-btn-soft-danger sanity sizing ========== */
.aeu-btn { white-space: nowrap; }
.aeu-btn .icon { width: 14px; height: 14px; }


/* ══════════════════════════════════════════════════════════════════════════
   AEUDNSTHEME v39u — live-dot pulse indicator (2026-05-18)
   Ports stremportal .live-dot to AEU as .aeu-live-dot utility.
   7px colored dot + glowing box-shadow, opacity 1↔0.35 every 1.8s.
   Default color: --success. Modifiers: --accent / --warning / --danger.
   ══════════════════════════════════════════════════════════════════════════ */

.aeu-live-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--success, #10b981);
    box-shadow: 0 0 8px var(--success, #10b981);
    animation: aeuLivePulse 1.8s ease-in-out infinite;
    flex-shrink: 0;
    vertical-align: middle;
    margin-right: 6px;
}
.aeu-live-dot--accent {
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent);
}
.aeu-live-dot--warning {
    background: var(--warning, #f59e0b);
    box-shadow: 0 0 8px var(--warning, #f59e0b);
}
.aeu-live-dot--danger {
    background: var(--danger, #ef4444);
    box-shadow: 0 0 8px var(--danger, #ef4444);
}
.aeu-live-dot--muted {
    background: var(--muted, #94a3b8);
    box-shadow: 0 0 6px color-mix(in srgb, var(--muted) 70%, transparent);
    animation: none;
    opacity: 0.6;
}

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

@media (prefers-reduced-motion: reduce) {
    .aeu-live-dot { animation: none; }
}


/* ══════════════════════════════════════════════════════════════════════════


/* ══════════════════════════════════════════════════════════════════════════


/* ══════════════════════════════════════════════════════════════════════════
   AEUDNSTHEME brand-shine — sweep visible fix (2026-05-18)
   Logo TORNA ORIGINALE (nessun recolor). Solo fix dello sweep:
   - Alpha 0.32 → 0.85 (più visibile)
   - mask-image sul ::after come stremportal originale
   ══════════════════════════════════════════════════════════════════════════ */

.aeu-logo-mark {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    width: auto;
    height: 36px;
    /* NIENTE background-color, NIENTE mask-image qui */
}

.aeu-logo-mark > img {
    display: block;
    width: auto;
    height: 36px;
    opacity: 1;
    animation: aeuBrandGlow 5s ease-in-out infinite;
}

.aeu-logo-mark::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(
        -115deg,
        transparent 30%,
        rgba(255, 255, 255, 1) 50%,
        transparent 70%
    );
    background-size: 220% 100%;
    background-repeat: no-repeat;
    background-position: -1% 0;
    /* mask-image URL injected inline per page (see admin/includes/header.php) */
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-mode: alpha;
            mask-mode: alpha;
    animation: aeuBrandShine 15s ease-in-out infinite;
}

@keyframes aeuBrandShine {
    0%, 5%    { background-position: -50% 0; }
    70%, 100% { background-position: 150% 0; }
}

@keyframes aeuBrandGlow {
    0%, 100% { filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent) 40%, transparent)); }
    50%      { filter: drop-shadow(0 0 9px color-mix(in srgb, var(--accent) 65%, transparent)); }
}

[data-theme="latte"] .aeu-logo-mark > img,
[data-theme="aurora"] .aeu-logo-mark > img,
[data-theme="paper"] .aeu-logo-mark > img,
[data-theme="TailPanel Light"] .aeu-logo-mark > img {
    animation-name: aeuBrandGlowLight;
}
@keyframes aeuBrandGlowLight {
    0%, 100% { filter: drop-shadow(0 0 4px color-mix(in srgb, var(--accent) 30%, transparent)); }
    50%      { filter: drop-shadow(0 0 8px color-mix(in srgb, var(--accent) 50%, transparent)); }
}

@media (prefers-reduced-motion: reduce) {
    .aeu-logo-mark > img { animation: none; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--accent) 45%, transparent)); }
    .aeu-logo-mark::after { animation: none; opacity: 0; }
}

/* ── Cross-document View Transition (added 2026-05-21) ──
   Avoid the brief blank-then-paint flash on every admin/user page
   navigation. Browser captures source page state, fades cross-fade
   to dest page, with named elements (logo + topbar) morphing in
   place instead of disappearing/reappearing. Native API, no JS. */
@view-transition { navigation: auto; }

/* Make the cross-fade fast so it doesn't feel like a transition,
   just a removed flicker. */
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 140ms;
    animation-timing-function: ease-out;
}

/* Named transitions for elements that exist on EVERY admin page —
   the browser animates them in place instead of fading them with
   the root. Result: logo stays visible across navigation. */
.aeu-logo-mark           { view-transition-name: aeu-logo;   contain: layout; }
.logo-text               { view-transition-name: aeu-logo-text; }
.header                  { view-transition-name: aeu-header; }

/* Slightly slower morph for the persisted elements so the eye
   tracks them across the change. */
::view-transition-old(aeu-logo),
::view-transition-new(aeu-logo),
::view-transition-old(aeu-logo-text),
::view-transition-new(aeu-logo-text),
::view-transition-old(aeu-header),
::view-transition-new(aeu-header) {
    animation-duration: 200ms;
    animation-timing-function: ease-out;
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) { animation: none; }
}

/* =============================================================
   AEUDNSTHEME v40 — user-menu dropdown unified with admin
   ATOMIC OVERRIDE (skill §9.9 v39y pattern): one canonical block
   at end of file, parent specificity .user-menu .X (0,2,0) beats
   every scattered legacy .user-menu-* rule (0,1,0) regardless of
   cascade order. Mirrors .admin-user-dropdown exactly so the user
   menu and admin menu are visually identical, desktop + mobile,
   respecting device width.  Cache: AEUDNSTHEME-2026-05-30-usermenu-v40
   ============================================================= */
.user-menu { position: relative; }
.user-menu .user-menu-toggle {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 12px; background: var(--surface-2);
    border: 1px solid var(--border); border-radius: 8px;
    cursor: pointer; color: var(--text);
    font-family: inherit; font-size: 13px;
}
.user-menu .user-menu-toggle:hover { background: var(--surface-3); border-color: var(--accent); }
.user-menu .user-menu-toggle > svg { width: 20px; height: 20px; flex-shrink: 0; }
.user-menu .user-menu-label { font-size: 13px; }
.user-menu .user-menu-caret { transition: transform var(--trans); }
.user-menu.open .user-menu-caret { transform: rotate(180deg); }

/* The dropdown — identical geometry to .admin-user-dropdown,
   but width is responsive: grows with content up to a cap that
   never exceeds the viewport. */
.user-menu .user-menu-dropdown {
    display: none; position: absolute; right: 0; top: 100%;
    margin-top: 6px;
    min-width: 300px;
    width: max-content;
    max-width: min(440px, calc(100vw - 24px));
    max-height: calc(100vh - 90px);
    overflow-y: auto;
    overscroll-behavior: contain;   /* scrolling the menu never scrolls the page underneath */
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    z-index: 9999;
}
.user-menu.open .user-menu-dropdown { display: block; }

/* Header — email/name block */
.user-menu .user-menu-header {
    padding: 12px; border-bottom: 1px solid var(--border);
    margin-bottom: 8px;
}
.user-menu .user-menu-name { font-weight: 600; color: var(--text); font-size: 13px; }
.user-menu .user-menu-email { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* Sections — flat, hairline-free (admin look) */
.user-menu .user-menu-section { padding: 4px 0; margin: 0; border: none; }
.user-menu .user-menu-section-title {
    font-size: 10px; text-transform: uppercase; color: var(--muted);
    padding: 8px 12px 4px; font-weight: 600; margin: 0;
}

/* Menu items */
.user-menu .user-menu-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: 6px;
    color: var(--text); font-size: 13px;
    transition: background var(--trans); text-decoration: none;
}
.user-menu .user-menu-item:hover { background: var(--surface-2); color: var(--accent); }
.user-menu .user-menu-item svg { width: 16px; height: 16px; flex-shrink: 0; }
.user-menu .user-menu-item.danger { color: var(--danger); }
.user-menu .user-menu-item.danger:hover { background: color-mix(in srgb, var(--danger) 12%, var(--surface)); color: var(--danger); }

/* Language row — flag chips */
.user-menu .user-menu-langs { display: flex; gap: 6px; padding: 4px 12px; flex-wrap: wrap; }
.user-menu .user-menu-langs .lang-option {
    padding: 6px 8px; border-radius: 6px; background: var(--surface-2);
    border: 1px solid transparent; transition: all var(--trans); text-decoration: none;
}
.user-menu .user-menu-langs .lang-option:hover { background: var(--surface-3); }
.user-menu .user-menu-langs .lang-option.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, var(--surface-2)); }

/* Theme grid — 6 columns like admin, scrolls if tall */
.user-menu .user-menu-themes {
    display: grid; grid-template-columns: repeat(6, 1fr);
    gap: 6px; padding: 4px 12px 8px;
    max-height: 180px; overflow-y: auto;
    overscroll-behavior: contain;   /* don't chain scroll to the page underneath */
}
.user-menu .user-menu-themes .theme-option {
    padding: 6px 4px; font-size: 11px;
    background: var(--surface-2); border: 1px solid var(--border);
    border-radius: 6px; color: var(--text); cursor: pointer;
    transition: all var(--trans);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center;
}
.user-menu .user-menu-themes .theme-option:hover { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.user-menu .user-menu-themes .theme-option.active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

/* Mobile: full-width sheet pinned under the header, respects device width */
@media (max-width: 600px) {
    .user-menu .user-menu-label { display: none; }
    .user-menu .user-menu-toggle { padding: 8px; }
    .user-menu .user-menu-dropdown {
        position: fixed; top: 64px; left: 8px; right: 8px;
        width: auto; min-width: 0; max-width: none;
        max-height: calc(100vh - 80px); overflow-y: auto;
        overscroll-behavior: contain;
    }
    .user-menu .user-menu-themes { grid-template-columns: repeat(4, 1fr); gap: 4px; max-height: 150px; }
}
@media (max-width: 380px) {
    .user-menu .user-menu-dropdown { left: 4px; right: 4px; }
    .user-menu .user-menu-themes { grid-template-columns: repeat(3, 1fr); }
}

/* =============================================================
   AEUDNSTHEME v41 — analytics query-trend chart
   Cache: AEUDNSTHEME-2026-05-30-analytics-chart-v41
   ============================================================= */
.aeu-chart-wrap { width: 100%; overflow: hidden; }
.aeu-chart-wrap svg { display: block; width: 100%; height: auto; }
.aeu-chart-legend {
    display: flex; gap: 18px; flex-wrap: wrap;
    margin-top: 10px; padding-top: 10px;
    border-top: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
}
.aeu-chart-legend-item {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; color: var(--muted);
}
.aeu-chart-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex-shrink: 0; }
.aeu-chart-dot-accent { background: var(--accent); }
.aeu-chart-dot-danger { background: var(--danger); }