:root,
html[data-theme="dark"],
html[data-theme-preview="dark"] {
    --bg: #070b14;
    --card: #101827;
    --text: #f7fbff;
    --muted: #9aa8ba;
    --line: rgba(255, 255, 255, 0.11);
    --brand: #60a5fa;
    --brand-2: #a78bfa;
    --success: #22c55e;
    --danger: #fb7185;
    --shadow: 0 18px 55px rgba(0, 0, 0, 0.28);
    --glow-a: rgba(96, 165, 250, 0.24);
    --glow-b: rgba(167, 139, 250, 0.20);
}

html[data-theme="glow"],
html[data-theme-preview="glow"] {
    --bg: #040012;
    --card: rgba(17, 6, 38, 0.86);
    --text: #fff7ff;
    --muted: #d8b4fe;
    --line: rgba(236, 72, 153, 0.35);
    --brand: #ff2bd6;
    --brand-2: #00f5ff;
    --success: #00ff9d;
    --danger: #ff3b6b;
    --shadow: 0 0 22px rgba(255, 43, 214, 0.22), 0 0 44px rgba(0, 245, 255, 0.16), 0 22px 70px rgba(0, 0, 0, 0.40);
    --glow-a: rgba(255, 43, 214, 0.42);
    --glow-b: rgba(0, 245, 255, 0.34);
}

html[data-theme="christmas"],
html[data-theme-preview="christmas"] {
    --bg: #07110a;
    --card: rgba(16, 32, 22, 0.86);
    --text: #fff8ed;
    --muted: #ffe7c2;
    --line: rgba(255, 255, 255, 0.18);
    --brand: #ff2f3d;
    --brand-2: #19e46a;
    --success: #22f070;
    --danger: #ff5c75;
    --shadow: 0 0 22px rgba(255, 47, 61, 0.22), 0 0 42px rgba(25, 228, 106, 0.20), 0 20px 62px rgba(0, 0, 0, 0.35);
    --glow-a: rgba(255, 47, 61, 0.34);
    --glow-b: rgba(25, 228, 106, 0.32);
}

html[data-theme="victorian"],
html[data-theme-preview="victorian"] {
    --bg: #211713;
    --card: #31231d;
    --text: #fff3df;
    --muted: #d8c2a8;
    --line: rgba(244, 213, 172, 0.22);
    --brand: #d4a373;
    --brand-2: #7f5539;
    --success: #90a955;
    --danger: #c1121f;
    --shadow: 0 18px 55px rgba(26, 18, 14, 0.38);
    --glow-a: rgba(212, 163, 115, 0.26);
    --glow-b: rgba(127, 85, 57, 0.20);
}

html[data-theme="times"],
html[data-theme-preview="times"] {
    --bg: #f4f1ea;
    --card: #fffaf0;
    --text: #1c1917;
    --muted: #6b5f55;
    --line: rgba(28, 25, 23, 0.18);
    --brand: #111827;
    --brand-2: #7c2d12;
    --success: #166534;
    --danger: #991b1b;
    --shadow: 0 18px 40px rgba(28, 25, 23, 0.12);
    --glow-a: rgba(124, 45, 18, 0.14);
    --glow-b: rgba(17, 24, 39, 0.10);
}

html[data-theme="times"] body,
html[data-theme-preview="times"] body {
    font-family: "Times New Roman", Times, serif;
}

html[data-theme="ocean"],
html[data-theme-preview="ocean"] {
    --bg: #031926;
    --card: #082f49;
    --text: #e0f7ff;
    --muted: #a5d8ef;
    --line: rgba(125, 211, 252, 0.2);
    --brand: #38bdf8;
    --brand-2: #14b8a6;
    --success: #2dd4bf;
    --danger: #fb7185;
    --shadow: 0 18px 55px rgba(8, 47, 73, 0.35);
    --glow-a: rgba(56, 189, 248, 0.28);
    --glow-b: rgba(20, 184, 166, 0.22);
}

html[data-theme="forest"],
html[data-theme-preview="forest"] {
    --bg: #07130b;
    --card: #102016;
    --text: #f0fff4;
    --muted: #a7c7ad;
    --line: rgba(134, 239, 172, 0.16);
    --brand: #4ade80;
    --brand-2: #84cc16;
    --success: #22c55e;
    --danger: #f87171;
    --shadow: 0 18px 55px rgba(20, 83, 45, 0.28);
    --glow-a: rgba(74, 222, 128, 0.24);
    --glow-b: rgba(132, 204, 22, 0.18);
}

html[data-theme="sunset"],
html[data-theme-preview="sunset"] {
    --bg: #1f0a12;
    --card: #321321;
    --text: #fff7ed;
    --muted: #fdba74;
    --line: rgba(251, 146, 60, 0.22);
    --brand: #fb923c;
    --brand-2: #e879f9;
    --success: #86efac;
    --danger: #f43f5e;
    --shadow: 0 18px 55px rgba(154, 52, 18, 0.32);
    --glow-a: rgba(251, 146, 60, 0.30);
    --glow-b: rgba(232, 121, 249, 0.22);
}

html[data-theme="matrix"],
html[data-theme-preview="matrix"] {
    --bg: #000900;
    --card: #031403;
    --text: #d1ffd6;
    --muted: #65a96f;
    --line: rgba(34, 197, 94, 0.22);
    --brand: #22c55e;
    --brand-2: #86efac;
    --success: #22c55e;
    --danger: #ef4444;
    --shadow: 0 0 32px rgba(34, 197, 94, 0.18);
    --glow-a: rgba(34, 197, 94, 0.26);
    --glow-b: rgba(134, 239, 172, 0.18);
}

html[data-theme="candy"],
html[data-theme-preview="candy"] {
    --bg: #fff1f8;
    --card: #ffffff;
    --text: #3b1227;
    --muted: #9d5779;
    --line: rgba(219, 39, 119, 0.16);
    --brand: #ec4899;
    --brand-2: #8b5cf6;
    --success: #10b981;
    --danger: #e11d48;
    --shadow: 0 18px 45px rgba(219, 39, 119, 0.14);
    --glow-a: rgba(236, 72, 153, 0.18);
    --glow-b: rgba(139, 92, 246, 0.14);
}

html[data-theme="aurora"],
html[data-theme-preview="aurora"] {
    --bg: #06111f;
    --card: rgba(9, 22, 42, 0.88);
    --text: #ecfeff;
    --muted: #a7f3d0;
    --line: rgba(103, 232, 249, 0.22);
    --brand: #67e8f9;
    --brand-2: #c084fc;
    --success: #34d399;
    --danger: #fb7185;
    --shadow: 0 0 36px rgba(103, 232, 249, 0.18), 0 20px 60px rgba(0, 0, 0, 0.36);
    --glow-a: rgba(103, 232, 249, 0.30);
    --glow-b: rgba(192, 132, 252, 0.22);
}

html[data-theme="midnight"],
html[data-theme-preview="midnight"] {
    --bg: #020617;
    --card: #0f172a;
    --text: #e5e7eb;
    --muted: #94a3b8;
    --line: rgba(148, 163, 184, 0.18);
    --brand: #818cf8;
    --brand-2: #38bdf8;
    --success: #22c55e;
    --danger: #f43f5e;
    --shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
    --glow-a: rgba(129, 140, 248, 0.22);
    --glow-b: rgba(56, 189, 248, 0.16);
}

html[data-theme="cyberpunk"],
html[data-theme-preview="cyberpunk"] {
    --bg: #100018;
    --card: rgba(33, 7, 48, 0.88);
    --text: #fff7ad;
    --muted: #f0abfc;
    --line: rgba(250, 204, 21, 0.30);
    --brand: #facc15;
    --brand-2: #ff00ea;
    --success: #00ff9d;
    --danger: #ff3860;
    --shadow: 0 0 34px rgba(255, 0, 234, 0.22), 0 0 50px rgba(250, 204, 21, 0.14);
    --glow-a: rgba(255, 0, 234, 0.34);
    --glow-b: rgba(250, 204, 21, 0.28);
}

html[data-theme="fire"],
html[data-theme-preview="fire"] {
    --bg: #180600;
    --card: #2b1006;
    --text: #fff7ed;
    --muted: #fed7aa;
    --line: rgba(251, 146, 60, 0.24);
    --brand: #f97316;
    --brand-2: #ef4444;
    --success: #84cc16;
    --danger: #fb7185;
    --shadow: 0 0 32px rgba(249, 115, 22, 0.20), 0 20px 60px rgba(0, 0, 0, 0.34);
    --glow-a: rgba(249, 115, 22, 0.32);
    --glow-b: rgba(239, 68, 68, 0.22);
}

html[data-theme="ice"],
html[data-theme-preview="ice"] {
    --bg: #ecfeff;
    --card: rgba(255, 255, 255, 0.86);
    --text: #164e63;
    --muted: #0e7490;
    --line: rgba(14, 116, 144, 0.20);
    --brand: #06b6d4;
    --brand-2: #60a5fa;
    --success: #10b981;
    --danger: #e11d48;
    --shadow: 0 18px 45px rgba(6, 182, 212, 0.16);
    --glow-a: rgba(6, 182, 212, 0.20);
    --glow-b: rgba(96, 165, 250, 0.16);
}

html[data-theme="royal"],
html[data-theme-preview="royal"] {
    --bg: #14072e;
    --card: #211047;
    --text: #faf5ff;
    --muted: #d8b4fe;
    --line: rgba(216, 180, 254, 0.22);
    --brand: #a855f7;
    --brand-2: #f59e0b;
    --success: #22c55e;
    --danger: #f43f5e;
    --shadow: 0 0 34px rgba(168, 85, 247, 0.20), 0 20px 60px rgba(0, 0, 0, 0.34);
    --glow-a: rgba(168, 85, 247, 0.28);
    --glow-b: rgba(245, 158, 11, 0.20);
}

html[data-theme="coffee"],
html[data-theme-preview="coffee"] {
    --bg: #1c120d;
    --card: #2a1b13;
    --text: #fef3c7;
    --muted: #d6b58d;
    --line: rgba(217, 119, 6, 0.20);
    --brand: #d97706;
    --brand-2: #92400e;
    --success: #65a30d;
    --danger: #dc2626;
    --shadow: 0 18px 55px rgba(41, 25, 15, 0.42);
    --glow-a: rgba(217, 119, 6, 0.24);
    --glow-b: rgba(146, 64, 14, 0.20);
}

html[data-theme="bubblegum"],
html[data-theme-preview="bubblegum"] {
    --bg: #fff0fb;
    --card: rgba(255, 255, 255, 0.88);
    --text: #5b1748;
    --muted: #a21caf;
    --line: rgba(236, 72, 153, 0.20);
    --brand: #f472b6;
    --brand-2: #22d3ee;
    --success: #10b981;
    --danger: #e11d48;
    --shadow: 0 18px 45px rgba(244, 114, 182, 0.16);
    --glow-a: rgba(244, 114, 182, 0.24);
    --glow-b: rgba(34, 211, 238, 0.18);
}

html[data-theme="solar"],
html[data-theme-preview="solar"] {
    --bg: #fff7ed;
    --card: #ffffff;
    --text: #431407;
    --muted: #9a3412;
    --line: rgba(234, 88, 12, 0.18);
    --brand: #f59e0b;
    --brand-2: #ef4444;
    --success: #16a34a;
    --danger: #b91c1c;
    --shadow: 0 18px 45px rgba(245, 158, 11, 0.16);
    --glow-a: rgba(245, 158, 11, 0.24);
    --glow-b: rgba(239, 68, 68, 0.14);
}

html[data-theme="terminal"],
html[data-theme-preview="terminal"] {
    --bg: #020403;
    --card: #07100b;
    --text: #ccffcc;
    --muted: #65a96f;
    --line: rgba(34, 197, 94, 0.20);
    --brand: #00ff66;
    --brand-2: #00ffaa;
    --success: #00ff66;
    --danger: #ff3b3b;
    --shadow: 0 0 26px rgba(0, 255, 102, 0.16);
    --glow-a: rgba(0, 255, 102, 0.22);
    --glow-b: rgba(0, 255, 170, 0.16);
}

html[data-theme="terminal"] body,
html[data-theme-preview="terminal"] body {
    font-family: Consolas, "Courier New", monospace;
}

html[data-theme="lavender"],
html[data-theme-preview="lavender"] {
    --bg: #f5f0ff;
    --card: #ffffff;
    --text: #33215f;
    --muted: #7c5bb8;
    --line: rgba(124, 91, 184, 0.18);
    --brand: #8b5cf6;
    --brand-2: #ec4899;
    --success: #16a34a;
    --danger: #dc2626;
    --shadow: 0 18px 45px rgba(139, 92, 246, 0.14);
    --glow-a: rgba(139, 92, 246, 0.20);
    --glow-b: rgba(236, 72, 153, 0.14);
}

html[data-theme="gold"],
html[data-theme-preview="gold"] {
    --bg: #171005;
    --card: #2a210d;
    --text: #fff7cc;
    --muted: #f5d77b;
    --line: rgba(250, 204, 21, 0.24);
    --brand: #facc15;
    --brand-2: #f97316;
    --success: #22c55e;
    --danger: #ef4444;
    --shadow: 0 0 28px rgba(250, 204, 21, 0.18), 0 20px 60px rgba(0, 0, 0, 0.38);
    --glow-a: rgba(250, 204, 21, 0.28);
    --glow-b: rgba(249, 115, 22, 0.18);
}

html[data-theme] body {
    background:
        radial-gradient(circle at top left, var(--glow-a), transparent 35rem),
        radial-gradient(circle at top right, var(--glow-b), transparent 36rem),
        radial-gradient(circle at 50% 110%, color-mix(in srgb, var(--brand) 10%, transparent), transparent 34rem),
        var(--bg) !important;
    color: var(--text) !important;
}

html[data-theme="christmas"] body,
html[data-theme-preview="christmas"] body {
    background:
        radial-gradient(circle at 8% 12%, rgba(255, 47, 61, 0.34), transparent 24rem),
        radial-gradient(circle at 92% 10%, rgba(25, 228, 106, 0.32), transparent 26rem),
        radial-gradient(circle at 50% 105%, rgba(255, 215, 90, 0.22), transparent 30rem),
        linear-gradient(135deg, #07110a, #102016 55%, #2a0707) !important;
}

html[data-theme="glow"] body,
html[data-theme-preview="glow"] body {
    background:
        radial-gradient(circle at 10% 12%, rgba(255, 43, 214, 0.38), transparent 25rem),
        radial-gradient(circle at 90% 12%, rgba(0, 245, 255, 0.34), transparent 28rem),
        radial-gradient(circle at 50% 102%, rgba(124, 58, 237, 0.30), transparent 30rem),
        #040012 !important;
}

html[data-theme] input,
html[data-theme] select,
html[data-theme] textarea {
    background: color-mix(in srgb, var(--card) 82%, var(--text) 5%) !important;
    color: var(--text) !important;
    border-color: var(--line) !important;
}

html[data-theme] input::placeholder,
html[data-theme] textarea::placeholder {
    color: var(--muted) !important;
}

html[data-theme] .dashboard-hero,
html[data-theme] .addresses-hero,
html[data-theme] .credentials-hero,
html[data-theme] .users-hero,
html[data-theme] .standards-hero,
html[data-theme] .import-hero,
html[data-theme] .hero {
    background:
        radial-gradient(circle at top right, color-mix(in srgb, #ffffff 22%, transparent), transparent 34%),
        linear-gradient(135deg, var(--brand), var(--brand-2)) !important;
}

html[data-theme] .topbar,
html[data-theme] .dashboard-card,
html[data-theme] .dashboard-panel,
html[data-theme] .address-card,
html[data-theme] .address-table-wrap,
html[data-theme] .addresses-toolbar,
html[data-theme] .credential-card,
html[data-theme] .credentials-toolbar,
html[data-theme] .user-card,
html[data-theme] .users-toolbar,
html[data-theme] .users-list-panel,
html[data-theme] .standard-card,
html[data-theme] .standards-toolbar,
html[data-theme] .standards-table-wrap,
html[data-theme] .subnet-tabs,
html[data-theme] .import-form,
html[data-theme] .result-panel,
html[data-theme] .preview-panel,
html[data-theme] .modal-card,
html[data-theme] .panel,
html[data-theme] .card,
html[data-theme] .empty-state,
html[data-theme] .profile-hero,
html[data-theme] .profile-card,
html[data-theme] .profile-alert {
    background: var(--card) !important;
    color: var(--text) !important;
    border-color: var(--line) !important;
    box-shadow: var(--shadow) !important;
}

html[data-theme="christmas"] .topbar,
html[data-theme="christmas"] .dashboard-card,
html[data-theme="christmas"] .dashboard-panel,
html[data-theme="christmas"] .address-card,
html[data-theme="christmas"] .credential-card,
html[data-theme="christmas"] .user-card,
html[data-theme="christmas"] .standard-card,
html[data-theme="christmas"] .profile-card,
html[data-theme="christmas"] .profile-hero {
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.06),
        0 0 22px rgba(255, 47, 61, 0.18),
        0 0 34px rgba(25, 228, 106, 0.14),
        0 20px 60px rgba(0, 0, 0, 0.34) !important;
}

html[data-theme="glow"] .topbar,
html[data-theme="glow"] .dashboard-card,
html[data-theme="glow"] .dashboard-panel,
html[data-theme="glow"] .address-card,
html[data-theme="glow"] .credential-card,
html[data-theme="glow"] .user-card,
html[data-theme="glow"] .standard-card,
html[data-theme="glow"] .profile-card,
html[data-theme="glow"] .profile-hero {
    box-shadow:
        0 0 0 1px rgba(255, 43, 214, 0.10),
        0 0 24px rgba(255, 43, 214, 0.24),
        0 0 42px rgba(0, 245, 255, 0.16),
        0 22px 70px rgba(0, 0, 0, 0.42) !important;
}

html[data-theme] .credential-grid.is-list .credential-card {
    background: var(--card) !important;
}

html[data-theme] .address-meta span,
html[data-theme] .credential-meta span,
html[data-theme] .user-meta span,
html[data-theme] .standard-meta span,
html[data-theme] .result-grid div,
html[data-theme] .hint-box,
html[data-theme] .warning-box,
html[data-theme] .notice,
html[data-theme] .check,
html[data-theme] .admin-tool-card,
html[data-theme] .admin-tool-card button,
html[data-theme] .audit-item,
html[data-theme] .audit-meta time,
html[data-theme] .audit-meta span {
    background: color-mix(in srgb, var(--card) 84%, var(--text) 5%) !important;
    color: var(--text) !important;
    border-color: var(--line) !important;
}

html[data-theme] .address-table th,
html[data-theme] .users-list-table th,
html[data-theme] .audit-table th,
html[data-theme] .standards-table th {
    background: color-mix(in srgb, var(--card) 82%, var(--text) 5%) !important;
    color: var(--muted) !important;
    border-color: var(--line) !important;
}

html[data-theme] .address-table td,
html[data-theme] .users-list-table td,
html[data-theme] .audit-table td,
html[data-theme] .standards-table td {
    color: var(--text) !important;
    border-color: var(--line) !important;
}

html[data-theme] code,
html[data-theme] .secret-row code {
    background: color-mix(in srgb, var(--brand) 15%, var(--card)) !important;
    color: var(--brand) !important;
}

html[data-theme] .footer-pill {
    background: color-mix(in srgb, var(--card) 78%, transparent) !important;
    color: var(--muted) !important;
    border-color: var(--line) !important;
}

html[data-theme] .footer-brand,
html[data-theme] .brand,
html[data-theme] .brand-text,
html[data-theme] .dashboard-card strong,
html[data-theme] .panel-heading h2,
html[data-theme] .empty-state strong,
html[data-theme] .user-card h2,
html[data-theme] .credential-card h2,
html[data-theme] .address-card h2,
html[data-theme] .standard-card h2 {
    color: var(--text) !important;
}

html[data-theme] .card-label,
html[data-theme] .card-helper,
html[data-theme] .muted-eyebrow,
html[data-theme] .user-card p,
html[data-theme] .credential-card-header p,
html[data-theme] .address-meta b,
html[data-theme] .credential-meta b,
html[data-theme] .user-meta b,
html[data-theme] .standard-meta b,
html[data-theme] .standard-note b {
    color: var(--muted) !important;
}

html[data-theme] .primary-action,
html[data-theme] button,
html[data-theme] .button-primary,
html[data-theme] .bulk-mode-button,
html[data-theme] .scan-button {
    border-color: var(--line);
}

html[data-theme] .modal-backdrop,
html[data-theme] .ping-modal-backdrop {
    background: color-mix(in srgb, var(--bg) 68%, transparent) !important;
}

html[data-theme] .modal-header,
html[data-theme] .ping-modal-header {
    background: var(--card) !important;
    border-color: var(--line) !important;
}

html[data-theme] .file-drop {
    background:
        radial-gradient(circle at top, color-mix(in srgb, var(--brand) 14%, transparent), transparent 56%),
        color-mix(in srgb, var(--card) 86%, var(--text) 4%) !important;
    border-color: color-mix(in srgb, var(--brand) 34%, var(--line)) !important;
}

html[data-theme] .file-drop:hover,
html[data-theme] .file-drop.is-active {
    background:
        radial-gradient(circle at top, color-mix(in srgb, var(--brand) 20%, transparent), transparent 56%),
        color-mix(in srgb, var(--card) 78%, var(--text) 6%) !important;
    border-color: var(--brand) !important;
}

html[data-theme] .file-drop strong {
    color: var(--text) !important;
}

html[data-theme] .file-drop span,
html[data-theme] .file-drop small {
    color: var(--muted) !important;
}