/* settings.css - AthenaCore Settings & Theme Builder */

.settings-container {
 display: flex;
 flex-direction: column;
 height: calc(100vh - 60px);
 background: transparent;
 max-width: 100% !important;
 width: 100% !important;
}

.settings-header {
 padding: 2rem 2rem 1rem;
 border-bottom: 1px solid var(--border-light);
 background: var(--color-surface);
}

.settings-header h1 {
 margin: 0;
 font-size: 1.75rem;
 font-weight: 700;
 color: var(--text-primary);
}

.settings-header p {
 margin: 0.5rem 0 0;
 color: var(--text-secondary);
}

.settings-layout {
 display: grid;
 grid-template-columns: 260px 1fr;
 flex: 1;
 overflow: hidden;
 width: 100%;
}

/* Sidebar Navigation */
.settings-sidebar {
 background: var(--color-surface);
 border-right: 1px solid var(--border-light);
 padding: 1.5rem 1rem;
}

.nav-item {
 display: flex;
 align-items: center;
 gap: 0.75rem;
 width: 100%;
 padding: 0.75rem 1rem;
 border: none;
 background: transparent;
 color: var(--text-secondary);
 font-family: inherit;
 font-size: 0.95rem;
 font-weight: 500;
 text-align: left;
 cursor: pointer;
 border-radius: 8px;
 transition: all 0.2s ease;
 margin-bottom: 0.25rem;
}

.nav-item:hover {
 background: var(--color-surface-subtle);
 color: var(--text-primary);
}

.nav-item.active {
 background: var(--google-blue-subtle);
 color: var(--google-blue);
 font-weight: 600;
}

.nav-item i {
 width: 20px;
 text-align: center;
}

/* Content Area */
.settings-content {
 padding: 2rem;
 overflow-y: auto;
 background: transparent;
 width: 100%;
}

.tab-content {
 display: none;
 max-width: 100%;
 width: 100%;
 margin: 0;
 animation: fadeIn 0.3s ease;
}

.tab-content.active {
 display: block;
}

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

.card {
 background: var(--color-surface);
 border: 1px solid var(--border-light);
 border-radius: 16px;
 padding: 2rem;
 box-shadow: var(--theme-shadow-sm);
 margin-bottom: 2rem;
}

.card h2 {
 margin-top: 0;
 font-size: 1.25rem;
 color: var(--text-primary);
 border-bottom: 1px solid var(--border-light);
 padding-bottom: 1rem;
 margin-bottom: 1.5rem;
}

/* Forms */
.form-grid {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 1.5rem;
 margin-bottom: 1.5rem;
}

.form-group {
 display: flex;
 flex-direction: column;
 gap: 0.5rem;
}

.form-group.full-width {
 grid-column: 1 / -1;
}

.form-group label {
 font-size: 0.875rem;
 font-weight: 500;
 color: var(--text-secondary);
}

.form-group input,
.form-group select,
.form-group textarea {
 padding: 0.75rem;
 border: 1px solid var(--border-light);
 border-radius: 8px;
 font-family: inherit;
 font-size: 0.95rem;
 background: var(--color-surface);
 color: var(--text-primary);
}

.form-group input:focus {
 outline: none;
 border-color: var(--google-blue);
 box-shadow: 0 0 0 3px var(--google-blue-subtle);
}

.text-muted {
 color: var(--text-tertiary);
}

/* Theme Builder */
.theme-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
 gap: 1rem;
 margin-bottom: 2rem;
}

.theme-card {
 border: 2px solid var(--border-light);
 border-radius: 12px;
 padding: 0.5rem;
 background: var(--color-surface);
 cursor: pointer;
 transition: all 0.2s ease;
 text-align: center;
}

.theme-card.selected {
 border-color: var(--google-blue);
 box-shadow: 0 0 0 2px var(--google-blue-subtle);
}

.theme-preview {
 height: 84px;
 border-radius: 10px;
 margin-bottom: 0.5rem;
 position: relative;
 border: 1px solid var(--border-light);
 overflow: hidden;
 background-size: cover;
 background-position: center;
}

/* Mini UI Representation inside previews */
.theme-preview__mini {
 position: absolute;
 left: 10px;
 top: 10px;
 right: 10px;
 bottom: 10px;
 border-radius: 8px;
 background: rgba(255,255,255,0.1);
 border: 1px solid rgba(255,255,255,0.2);
 backdrop-filter: blur(4px);
 padding: 8px;
 display: grid;
 grid-template-rows: 8px 1fr 1fr;
 gap: 6px;
 z-index: 2;
}

.theme-preview__pill {
 border-radius: 999px;
 height: 8px;
 width: 40%;
 background: currentColor;
 opacity: 0.8;
}

.theme-preview__line {
 border-radius: 4px;
 height: 6px;
 width: 80%;
 background: currentColor;
 opacity: 0.4;
}

/* --- Theme Specific Preview Styles --- */

/* Athena Fusion */
.theme-preview.fusion {
 background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
 border: 1px solid #cbd5e1;
 color: #0f172a;
}
.theme-preview.fusion::before {
 content: '';
 position: absolute;
 top: 0; left: 0;
 width: 100%; height: 4px;
 background: linear-gradient(90deg, #3b82f6, #ef4444, #f59e0b);
 z-index: 3;
}
.theme-preview.fusion .theme-preview__mini {
 background: rgba(255,255,255,0.8);
 border-color: #e2e8f0;
}
.theme-preview.fusion .theme-preview__pill { background: #3b82f6; }
.theme-preview.fusion .theme-preview__line { background: #64748b; }

/* Fusion Shapes in Preview */
.fusion-shape {
 position: absolute;
 z-index: 1;
 opacity: 0.6;
}
.fusion-shape.shape-1 {
 top: 10px; left: 10px;
 width: 20px; height: 20px;
 border: 2px solid #3b82f6;
 border-radius: 50%;
}
.fusion-shape.shape-2 {
 bottom: 10px; right: 10px;
 width: 0; height: 0;
 border-left: 10px solid transparent;
 border-right: 10px solid transparent;
 border-bottom: 18px solid #f59e0b;
 transform: rotate(-15deg);
}
.fusion-shape.shape-3 {
 top: 15px; right: 15px;
 width: 16px; height: 16px;
 background: #ef4444;
 border-radius: 4px;
 transform: rotate(45deg);
}

/* Terminal */
.theme-preview.terminal {
 background: #0d0208;
 border-color: #00ff41;
 color: #00ff41;
}
.theme-preview.terminal .theme-preview__mini {
 background: rgba(0, 20, 0, 0.8);
 border-color: #00ff41;
}

/* Neon City */
.theme-preview.neon {
 background: #0a0a0f;
 border-color: #ec4899;
 color: #f0f0ff;
}
.theme-preview.neon .theme-preview__mini {
 background: rgba(15, 15, 25, 0.8);
 border-color: #ec4899;
 box-shadow: 0 0 10px rgba(236, 72, 153, 0.2);
}
.theme-preview.neon .theme-preview__pill { background: #ec4899; }

/* Retro */
.theme-preview.retro {
 background: #1a1a2e;
 border-color: #e94560;
 color: #eee;
}
.theme-preview.retro .theme-preview__mini {
 background: #16213e;
 border: 2px solid #e94560;
 border-radius: 0;
 box-shadow: 4px 4px 0 #0f3460;
}
.theme-preview.retro .theme-preview__pill { background: #e94560; }

/* Glass */
.theme-preview.glass {
 background: #0b1220;
 border-color: rgba(148, 163, 184, 0.3);
 color: #f1f5f9;
}
.theme-preview.glass .theme-preview__mini {
 background: rgba(30, 41, 59, 0.4);
 backdrop-filter: blur(8px);
 border: 1px solid rgba(148, 163, 184, 0.2);
}
.theme-preview.glass .theme-preview__pill { background: #38bdf8; }

/* Vaporwave */
.theme-preview.vaporwave {
 background: linear-gradient(135deg, #190428 0%, #2d0f4f 100%);
 border-color: #ff71ef;
 color: #ff71ef;
}
.theme-preview.vaporwave .theme-preview__mini {
 background: rgba(45, 15, 79, 0.7);
 border-color: #ff71ef;
}
.theme-preview.vaporwave .theme-preview__pill { background: #00f5ff; }

/* Sketch */
.theme-preview.sketch {
 background: #fdfbf7;
 border: 2px solid #2c3e50;
 border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
 color: #2c3e50;
}
.theme-preview.sketch .theme-preview__mini {
 background: #ffffff;
 border: 2px solid #2c3e50;
 border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
}
.theme-preview.sketch .theme-preview__pill { background: #2980b9; }

/* Frosted */
.theme-preview.frosted {
 background: #1c1c1e;
 border-color: rgba(255,255,255,0.2);
 color: white;
}
.theme-preview.frosted .theme-preview__mini {
 background: rgba(44, 44, 46, 0.6);
 backdrop-filter: blur(12px);
 border: 1px solid rgba(255,255,255,0.15);
}
.theme-preview.frosted .theme-preview__pill { background: #0a84ff; }

/* Cosmos */
.theme-preview.cosmos {
 background: radial-gradient(circle at center, #141428 0%, #050510 100%);
 border-color: #7b2cbf;
 color: #e0e0ff;
}
.theme-preview.cosmos .theme-preview__mini {
 background: rgba(20, 20, 40, 0.6);
 border-color: #7b2cbf;
 box-shadow: 0 0 10px rgba(123, 44, 191, 0.3);
}
.theme-preview.cosmos .theme-preview__pill { background: #ff006e; }

/* Molten */
.theme-preview.molten {
 background: #1a0505;
 border-color: #ff4d00;
 color: #ffccaa;
}
.theme-preview.molten .theme-preview__mini {
 background: #2a0a0a;
 border: 1px solid #ff4d00;
 box-shadow: inset 0 0 10px rgba(255, 77, 0, 0.2);
}
.theme-preview.molten .theme-preview__pill { background: #ff4d00; }

/* Prism */
.theme-preview.prism {
 background: #0a0e1a;
 border-color: #a78bfa;
 color: #f3f4f6;
}
.theme-preview.prism .theme-preview__mini {
 background: linear-gradient(135deg, rgba(15, 20, 35, 0.8), rgba(20, 25, 45, 0.9));
 border: 1px solid rgba(147, 51, 234, 0.3);
}
.theme-preview.prism .theme-preview__pill { background: #a78bfa; }

/* Soft Light */
.theme-preview.soft-light {
 background: #f9fafb;
 border-color: #e5e7eb;
 color: #111827;
}
.theme-preview.soft-light .theme-preview__mini {
 background: #ffffff;
 border: 1px solid #e5e7eb;
 box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.theme-preview.soft-light .theme-preview__pill { background: #3b82f6; }

/* Cherry Blossom */
.theme-preview.cherry-blossom {
 background: linear-gradient(135deg, #fff5f7 0%, #ffe8ed 100%);
 border-color: #ffd1dc;
 color: #4a1c2e;
 overflow: hidden;
}
.theme-preview.cherry-blossom .theme-preview__mini {
 background: rgba(255, 255, 255, 0.9);
 border: 1px solid #ffd1dc;
 box-shadow: 0 4px 12px rgba(255, 107, 157, 0.08);
}
.theme-preview.cherry-blossom .theme-preview__pill { background: #ff6b9d; }
.theme-preview.cherry-blossom .theme-preview__line { background: #8b5569; }

/* Sakura Petals in Cherry Blossom Preview */
.sakura-petal {
 position: absolute;
 width: 6px;
 height: 6px;
 background: linear-gradient(135deg, #ffb3d9 0%, #ff6ba6 50%, #ffb3d9 100%);
 border-radius: 50% 0 50% 0;
 opacity: 0.6;
 z-index: 1;
 animation: petalFloat 3s ease-in-out infinite;
}
.sakura-petal.petal-1 {
 top: 10px;
 left: 20%;
 animation-delay: 0s;
}
.sakura-petal.petal-2 {
 top: 30px;
 left: 60%;
 animation-delay: 1s;
}
.sakura-petal.petal-3 {
 top: 50px;
 left: 40%;
 animation-delay: 2s;
}

@keyframes petalFloat {
 0%, 100% {
 transform: translateY(0) rotate(0deg);
 opacity: 0.6;
 }
 50% {
 transform: translateY(-10px) rotate(180deg);
 opacity: 0.3;
 }
}

/* Silver Metallic */
.theme-preview.silver-metallic {
 background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
 border: 2px solid #94a3b8;
 color: #0f172a;
 overflow: hidden;
 position: relative;
}
.theme-preview.silver-metallic .theme-preview__mini {
 background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
 border: 2px solid #94a3b8;
 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.theme-preview.silver-metallic .theme-preview__pill { background: #3b82f6; }
.theme-preview.silver-metallic .theme-preview__line { background: #475569; }

/* Silver Glint Effect */
.silver-glint {
 position: absolute;
 top: -50%;
 left: -50%;
 width: 200%;
 height: 200%;
 background: linear-gradient(
 135deg,
 transparent 40%,
 rgba(255, 255, 255, 0.4) 48%,
 rgba(255, 255, 255, 0.8) 50%,
 rgba(255, 255, 255, 0.4) 52%,
 transparent 60%
 );
 animation: glintSweep 4s ease-in-out infinite;
 z-index: 1;
 pointer-events: none;
}

@keyframes glintSweep {
 0%, 100% {
 transform: translate(-100%, -100%) rotate(45deg);
 opacity: 0;
 }
 50% {
 transform: translate(0%, 0%) rotate(45deg);
 opacity: 1;
 }
}

/* Gold Metallic */
.theme-preview.gold-metallic {
 background: radial-gradient(ellipse at center, #1a1a0a 0%, #0f0f00 100%);
 border-color: #d4af37;
 color: #f5f0e8;
 overflow: hidden;
 position: relative;
}
.theme-preview.gold-metallic .theme-preview__mini {
 background: linear-gradient(135deg, rgba(26, 26, 10, 0.95), rgba(37, 37, 22, 0.9));
 border: 1px solid rgba(212, 175, 55, 0.4);
 box-shadow: 0 4px 12px rgba(212, 175, 55, 0.2);
}
.theme-preview.gold-metallic .theme-preview__pill { background: #d4af37; }
.theme-preview.gold-metallic .theme-preview__line { background: #9a8a5a; }

/* Gold Sparkles */
.gold-sparkle {
 position: absolute;
 width: 3px;
 height: 3px;
 background: radial-gradient(circle, #ffd700 0%, #d4af37 50%, transparent 100%);
 border-radius: 50%;
 z-index: 1;
 animation: sparkleFlicker 2s ease-in-out infinite;
 box-shadow: 0 0 4px #d4af37;
}
.gold-sparkle.spark-1 {
 top: 15%;
 left: 20%;
 animation-delay: 0s;
}
.gold-sparkle.spark-2 {
 top: 60%;
 left: 70%;
 animation-delay: 0.7s;
}
.gold-sparkle.spark-3 {
 top: 40%;
 left: 50%;
 animation-delay: 1.4s;
 width: 4px;
 height: 4px;
}

@keyframes sparkleFlicker {
 0%, 100% {
 opacity: 0;
 transform: scale(0.8);
 }
 50% {
 opacity: 1;
 transform: scale(1.2);
 }
}

/* Glass Liquid */
.theme-preview.glass-liquid {
 background: #0a0e1a;
 border-color: rgba(255, 255, 255, 0.2);
 color: #f0f4f8;
 overflow: hidden;
 position: relative;
}
.theme-preview.glass-liquid .theme-preview__mini {
 background: rgba(255, 255, 255, 0.1);
 backdrop-filter: blur(12px) saturate(180%);
 -webkit-backdrop-filter: blur(12px) saturate(180%);
 border: 1px solid rgba(255, 255, 255, 0.15);
 box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}
.theme-preview.glass-liquid .theme-preview__pill { background: #38bdf8; }
.theme-preview.glass-liquid .theme-preview__line { background: #cbd5e1; }

/* Mechanical Clockwork */
.theme-preview.mechanical-clockwork {
 background:
 radial-gradient(circle at 28% 32%, rgba(245, 193, 104, 0.34), transparent 26%),
 radial-gradient(circle at 76% 70%, rgba(122, 74, 31, 0.45), transparent 30%),
 linear-gradient(135deg, #23170d 0%, #5f3b19 48%, #1a1008 100%);
 border-color: #c08a3e;
 color: #fff1cf;
 overflow: hidden;
 position: relative;
}
.theme-preview.mechanical-clockwork::before {
 content: '';
 position: absolute;
 inset: 0;
 background:
 repeating-linear-gradient(90deg, rgba(255, 226, 160, 0.08) 0 1px, transparent 1px 12px),
 repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.12) 0 1px, transparent 1px 10px);
}
.theme-preview.mechanical-clockwork .theme-preview__mini {
 background: linear-gradient(145deg, rgba(81, 50, 22, 0.88), rgba(25, 17, 10, 0.92));
 border: 1px solid rgba(245, 193, 104, 0.55);
 box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08), 0 6px 14px rgba(0,0,0,0.35);
}
.theme-preview.mechanical-clockwork .theme-preview__pill { background: linear-gradient(90deg, #f2c66d, #9a5d24); }
.theme-preview.mechanical-clockwork .theme-preview__line { background: #e9c27d; }

.clockwork-gear {
 position: absolute;
 border-radius: 50%;
 border: 5px dashed rgba(242, 198, 109, 0.78);
 box-shadow: inset 0 0 0 5px rgba(42, 25, 11, 0.85), 0 0 14px rgba(242, 198, 109, 0.28);
 animation: clockPreviewSpin 8s linear infinite;
}
.clockwork-gear::after {
 content: '';
 position: absolute;
 inset: 35%;
 border-radius: 50%;
 background: #1b1108;
 border: 2px solid rgba(242, 198, 109, 0.7);
}
.clockwork-gear.gear-1 {
 width: 54px;
 height: 54px;
 left: -12px;
 top: 8px;
}
.clockwork-gear.gear-2 {
 width: 38px;
 height: 38px;
 right: 10px;
 bottom: 8px;
 animation-direction: reverse;
 animation-duration: 5s;
}
.clockwork-hand {
 position: absolute;
 left: 50%;
 top: 50%;
 width: 44px;
 height: 2px;
 background: linear-gradient(90deg, transparent, #ffe3a1 45%, #5b3515);
 transform-origin: left center;
 animation: clockPreviewTick 6s steps(12) infinite;
 box-shadow: 0 0 8px rgba(255, 227, 161, 0.55);
}

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

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

/* Liquid Blobs */
.liquid-blob {
 position: absolute;
 border-radius: 50%;
 filter: blur(25px);
 z-index: 1;
 animation: blobFloat 8s ease-in-out infinite;
 mix-blend-mode: screen;
}
.liquid-blob.blob-1 {
 width: 50px;
 height: 50px;
 background: radial-gradient(circle, rgba(56, 189, 248, 0.3) 0%, transparent 70%);
 top: 20%;
 left: 10%;
 animation-delay: 0s;
}
.liquid-blob.blob-2 {
 width: 40px;
 height: 40px;
 background: radial-gradient(circle, rgba(129, 140, 248, 0.25) 0%, transparent 70%);
 bottom: 20%;
 right: 15%;
 animation-delay: 2s;
}

@keyframes blobFloat {
 0%, 100% {
 transform: translate(0, 0) scale(1);
 }
 33% {
 transform: translate(10px, -8px) scale(1.1);
 }
 66% {
 transform: translate(-8px, 5px) scale(0.9);
 }
}


/* Modal */
.modal {
 border: none;
 border-radius: 16px;
 padding: 0;
 background: transparent;
 backdrop-filter: blur(4px);
}

.modal::backdrop {
 background: rgba(0,0,0,0.4);
}

.modal-box {
 background: var(--color-surface);
 padding: 2rem;
 border-radius: 16px;
 width: 100%;
 box-shadow: var(--theme-shadow-lg);
}

.modal-box h3 {
 color: var(--text-primary);
 margin-top: 0;
}

.modal-actions {
 display: flex;
 justify-content: flex-end;
 gap: 1rem;
 margin-top: 1.5rem;
}

/* Modal (HTML5 dialog element) */
dialog.modal {
 position: fixed;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 max-width: 500px;
 width: 90%;
 padding: 0;
 border: 1px solid var(--border-light);
 border-radius: var(--radius-lg);
 background: var(--color-surface);
 box-shadow: var(--shadow-xl);
 z-index: 1000;
}

dialog.modal::backdrop {
 background: rgba(0, 0, 0, 0.6);
 backdrop-filter: blur(4px);
}

dialog.modal[open] {
 display: block;
 animation: modalFadeIn 0.2s ease;
}

@keyframes modalFadeIn {
 from {
 opacity: 0;
 transform: translate(-50%, -48%) scale(0.96);
 }
 to {
 opacity: 1;
 transform: translate(-50%, -50%) scale(1);
 }
}

.modal-box {
 padding: 1.5rem;
}

.modal-box h3 {
 margin: 0 0 1.25rem 0;
 font-size: 1.125rem;
 font-weight: 600;
 color: var(--text-primary);
 display: flex;
 align-items: center;
 gap: 0.5rem;
}

.modal-box h3 i {
 color: var(--google-blue);
}

.modal-actions {
 display: flex;
 gap: 0.75rem;
 justify-content: flex-end;
 margin-top: 1.5rem;
 padding-top: 1.25rem;
 border-top: 1px solid var(--border-light);
}

/* Buttons */
.btn {
 padding: 0.6rem 1.2rem;
 border-radius: 8px;
 font-weight: 500;
 cursor: pointer;
 border: none;
 transition: all 0.2s;
}

.btn-primary {
 background: var(--google-blue);
 color: white;
}

.btn-primary:hover {
 background: var(--google-blue-dark);
}

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

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

.btn-sm {
 padding: 0.5rem 0.875rem;
 font-size: 0.875rem;
}

.btn-icon {
 background: transparent;
 border: none;
 color: var(--text-secondary);
 cursor: pointer;
 padding: 0.5rem;
 border-radius: 6px;
}

.btn-icon:hover {
 background: var(--color-surface-subtle);
 color: var(--google-blue);
}

.btn-outline-danger {
 background: transparent;
 color: var(--google-red);
 border: 1px solid var(--google-red);
}

.btn-outline-danger:hover {
 background: var(--google-red);
 color: white;
}

.btn-outline-primary {
 background: transparent;
 color: var(--google-blue);
 border: 1px solid var(--google-blue);
}

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

/* Theme Builder - New Controls */
.builder-grid {
 display: grid;
 grid-template-columns: repeat(3, minmax(0,1fr));
 gap:1rem;
 margin-top:1rem;
}

.builder-item {
 display: grid;
 gap:0.5rem;
 padding:0.9rem;
 border:1px solid var(--border-light);
 border-radius:12px;
 background: var(--color-surface);
}

.builder-item label {
 font-size:0.85rem;
 font-weight:600;
 color: var(--text-secondary);
}

.builder-item select,
.builder-item input[type="range"],
.builder-item input[type="color"] {
 width:100%;
 background: var(--color-surface);
 color: var(--text-primary);
 border: 1px solid var(--border-light);
}

.builder-item input[type="color"] {
 height:42px;
 padding:0.2rem;
 border-radius:10px;
}

.builder-actions {
 margin-top:1rem;
 display:flex;
 justify-content: flex-end;
}

/* Alert Messages */
.alert {
 padding: 1rem 1.25rem;
 border-radius: var(--radius-lg);
 margin-bottom: 1.5rem;
 display: flex;
 align-items: flex-start;
 gap: 0.75rem;
 font-size: 0.9375rem;
 border: 1px solid;
 animation: slideDown 0.3s ease;
}

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

.alert i {
 flex-shrink: 0;
 font-size: 1.125rem;
 margin-top: 0.125rem;
}

.alert-success {
 background: var(--google-green-subtle);
 border-color: var(--google-green-light);
 color: var(--google-green-dark);
}

.alert-success i {
 color: var(--google-green);
}

.alert-danger {
 background: var(--google-red-subtle);
 border-color: var(--google-red-light);
 color: var(--google-red-dark);
}

.alert-danger i {
 color: var(--google-red);
}

/* Modal (HTML5 dialog element) */
dialog.modal {
 position: fixed;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 max-width: 500px;
 width: 90%;
 padding: 0;
 border: 1px solid var(--border-light);
 border-radius: var(--radius-lg);
 background: var(--color-surface);
 box-shadow: var(--shadow-xl);
 z-index: 1000;
}

dialog.modal::backdrop {
 background: rgba(0, 0, 0, 0.6);
 backdrop-filter: blur(4px);
}

dialog.modal[open] {
 display: block;
 animation: modalFadeIn 0.2s ease;
}

@keyframes modalFadeIn {
 from {
 opacity: 0;
 transform: translate(-50%, -48%) scale(0.96);
 }
 to {
 opacity: 1;
 transform: translate(-50%, -50%) scale(1);
 }
}

.modal-box {
 padding: 1.5rem;
}

.modal-box h3 {
 margin: 0 0 1.25rem 0;
 font-size: 1.125rem;
 font-weight: 600;
 color: var(--text-primary);
 display: flex;
 align-items: center;
 gap: 0.5rem;
}

.modal-box h3 i {
 color: var(--google-blue);
}

.modal-actions {
 display: flex;
 gap: 0.75rem;
 justify-content: flex-end;
 margin-top: 1.5rem;
 padding-top: 1.25rem;
 border-top: 1px solid var(--border-light);
}

.theme-name {
 color: var(--text-primary);
 font-size: 0.875rem;
 font-weight: 500;
}

/* Fix theme name contrast on dark themes */
html[data-theme="terminal"] .theme-name,
html[data-theme="neon"] .theme-name,
html[data-theme="retro"] .theme-name,
html[data-theme="glass"] .theme-name,
html[data-theme="vaporwave"] .theme-name,
html[data-theme="frosted"] .theme-name,
html[data-theme="cosmos"] .theme-name,
html[data-theme="molten"] .theme-name,
html[data-theme="prism"] .theme-name {
 color: rgba(255, 255, 255, 0.9);
}

/* User Tables - Enhanced Styles */
.users-table {
 width: 100%;
 border-collapse: collapse;
 margin-bottom: 1.5rem;
}

.users-table th {
 padding: 1rem;
 text-align: left;
 background: var(--color-surface);
 color: var(--text-primary);
}

.users-table td {
 padding: 1rem;
 border-bottom: 1px solid var(--border-light);
 vertical-align: middle;
 color: var(--text-primary);
}

/* Better table contrast on dark themes */
html[data-theme="terminal"] .users-table,
html[data-theme="neon"] .users-table,
html[data-theme="retro"] .users-table,
html[data-theme="glass"] .users-table,
html[data-theme="vaporwave"] .users-table,
html[data-theme="frosted"] .users-table,
html[data-theme="cosmos"] .users-table,
html[data-theme="molten"] .users-table,
html[data-theme="prism"] .users-table {
 background: var(--color-surface);
}

html[data-theme="terminal"] .users-table tbody tr:nth-child(even),
html[data-theme="neon"] .users-table tbody tr:nth-child(even),
html[data-theme="retro"] .users-table tbody tr:nth-child(even),
html[data-theme="glass"] .users-table tbody tr:nth-child(even),
html[data-theme="vaporwave"] .users-table tbody tr:nth-child(even),
html[data-theme="frosted"] .users-table tbody tr:nth-child(even),
html[data-theme="cosmos"] .users-table tbody tr:nth-child(even),
html[data-theme="molten"] .users-table tbody tr:nth-child(even),
html[data-theme="prism"] .users-table tbody tr:nth-child(even) {
 background: var(--color-surface-subtle);
}

html[data-theme="terminal"] .users-table tbody tr:hover,
html[data-theme="neon"] .users-table tbody tr:hover,
html[data-theme="retro"] .users-table tbody tr:hover,
html[data-theme="glass"] .users-table tbody tr:hover,
html[data-theme="vaporwave"] .users-table tbody tr:hover,
html[data-theme="frosted"] .users-table tbody tr:hover,
html[data-theme="cosmos"] .users-table tbody tr:hover,
html[data-theme="molten"] .users-table tbody tr:hover,
html[data-theme="prism"] .users-table tbody tr:hover {
 background: var(--color-surface-elevated);
}

/* Crystal Glass preview — smoked grey premium glass */
.theme-preview.crystal-glass {
    background:
        radial-gradient(circle at 25% 30%, rgba(160, 185, 220, 0.45), transparent 55%),
        radial-gradient(circle at 80% 75%, rgba(110, 135, 175, 0.50), transparent 60%),
        linear-gradient(140deg, #1a1f2c 0%, #2a3344 50%, #1c2230 100%);
    border-color: rgba(200, 215, 235, 0.30);
    color: #eef2f8;
    overflow: hidden;
    position: relative;
    box-shadow: 0 14px 36px rgba(8, 12, 22, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
.theme-preview.crystal-glass::before {
    content: '';
    position: absolute;
    inset: -15%;
    background:
        radial-gradient(ellipse 60% 40% at 28% 28%, rgba(220, 235, 255, 0.28), transparent 60%),
        radial-gradient(ellipse 50% 35% at 75% 72%, rgba(160, 185, 220, 0.22), transparent 60%);
    filter: blur(10px);
    pointer-events: none;
}
.theme-preview.crystal-glass::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 38%, rgba(255, 255, 255, 0.18) 50%, transparent 62%);
    pointer-events: none;
}
.theme-preview.crystal-glass .theme-preview__mini {
    background: linear-gradient(140deg, rgba(90, 105, 130, 0.55), rgba(50, 60, 78, 0.65));
    backdrop-filter: blur(14px) saturate(170%);
    -webkit-backdrop-filter: blur(14px) saturate(170%);
    border: 1px solid rgba(200, 215, 235, 0.30);
    box-shadow:
        0 8px 22px rgba(8, 12, 22, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    position: relative;
    z-index: 1;
}
.theme-preview.crystal-glass .theme-preview__pill {
    background: linear-gradient(135deg, #c4d4ea, #6f8aae);
}
.theme-preview.crystal-glass .theme-preview__line { background: rgba(220, 235, 255, 0.35); }

/* IATFusion preview — dark cyber techy */
.theme-preview.iatfusion {
    background:
        radial-gradient(circle at 18% 25%, rgba(76, 141, 255, 0.55), transparent 55%),
        radial-gradient(circle at 82% 22%, rgba(255, 210, 63, 0.40), transparent 55%),
        radial-gradient(circle at 50% 92%, rgba(255, 61, 87, 0.45), transparent 60%),
        linear-gradient(160deg, #05070f 0%, #0a0f24 55%, #050912 100%);
    border-color: rgba(76, 141, 255, 0.45);
    color: #eef2ff;
    overflow: hidden;
    position: relative;
    box-shadow: 0 12px 32px rgba(76, 141, 255, 0.25), inset 0 0 0 1px rgba(76, 141, 255, 0.18);
}
.theme-preview.iatfusion::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(transparent 49.5%, rgba(76, 141, 255, 0.22) 50%, transparent 50.5%) 0 0/100% 16px,
        linear-gradient(90deg, transparent 49.5%, rgba(76, 141, 255, 0.18) 50%, transparent 50.5%) 0 0/16px 100%;
    opacity: 0.55;
    mask-image: radial-gradient(ellipse at 50% 100%, #000 35%, transparent 85%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 100%, #000 35%, transparent 85%);
}
.theme-preview.iatfusion::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 3px;
    background: linear-gradient(90deg, #4c8dff 0%, #5ce1ff 25%, #ff3d57 60%, #ffd23f 100%);
    box-shadow: 0 0 18px rgba(76, 141, 255, 0.65);
}
.theme-preview.iatfusion .iat-grid { display: none; }
.theme-preview.iatfusion .iat-beam {
    position: absolute;
    left: -10%;
    right: -10%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #5ce1ff 25%, #4c8dff 50%, transparent);
    filter: blur(0.5px);
    opacity: 0.85;
}
.theme-preview.iatfusion .iat-beam-1 { top: 32%; transform: rotate(-3deg); }
.theme-preview.iatfusion .iat-beam-2 { top: 62%; transform: rotate(2deg); background: linear-gradient(90deg, transparent, #ffd23f 30%, #ff3d57 55%, transparent); }
.theme-preview.iatfusion .iat-node {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    box-shadow: 0 0 10px currentColor, 0 0 18px currentColor;
}
.theme-preview.iatfusion .iat-node-1 { top: 28%; left: 22%; color: #4c8dff; background: #4c8dff; }
.theme-preview.iatfusion .iat-node-2 { top: 58%; left: 70%; color: #ff3d57; background: #ff3d57; }
.theme-preview.iatfusion .iat-node-3 { top: 42%; left: 50%; color: #ffd23f; background: #ffd23f; width: 4px; height: 4px; }
.theme-preview.iatfusion .theme-preview__mini {
    background: rgba(10, 15, 36, 0.78);
    border: 1px solid rgba(76, 141, 255, 0.35);
    box-shadow: 0 8px 22px rgba(5, 8, 22, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(10px);
    position: relative;
    z-index: 2;
}
.theme-preview.iatfusion .theme-preview__pill {
    background: linear-gradient(90deg, #4c8dff, #ff3d57, #ffd23f);
    box-shadow: 0 0 12px rgba(76, 141, 255, 0.55);
}
.theme-preview.iatfusion .theme-preview__line { background: rgba(180, 200, 255, 0.45); }

/* Glass Prism preview — clean refractive glass */
.theme-preview.glass-prism {
    background:
        radial-gradient(circle at 22% 28%, rgba(127, 176, 255, 0.55), transparent 55%),
        radial-gradient(circle at 78% 30%, rgba(220, 180, 255, 0.50), transparent 55%),
        radial-gradient(circle at 50% 92%, rgba(170, 230, 255, 0.45), transparent 60%),
        linear-gradient(160deg, #f4f8ff 0%, #eaf1fb 55%, #f8fbff 100%);
    border-color: rgba(76, 141, 255, 0.25);
    color: #0e1a33;
    overflow: hidden;
    position: relative;
    box-shadow: 0 14px 36px rgba(76, 141, 255, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.85);
}
.theme-preview.glass-prism .prism-orb {
    position: absolute;
    border-radius: 50%;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.25));
    border: 1px solid rgba(255, 255, 255, 0.75);
    box-shadow: 0 6px 18px rgba(76, 141, 255, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
.theme-preview.glass-prism .prism-orb-1 { width: 38%; height: 60%; top: -10%; left: -8%; transform: rotate(-12deg); }
.theme-preview.glass-prism .prism-orb-2 { width: 32%; height: 52%; bottom: -12%; right: -6%; transform: rotate(15deg);
    background: linear-gradient(135deg, rgba(220, 180, 255, 0.65), rgba(255, 215, 107, 0.35));
}
.theme-preview.glass-prism .prism-sheen {
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 35%, rgba(255, 255, 255, 0.55) 50%, transparent 65%);
    pointer-events: none;
}
.theme-preview.glass-prism .theme-preview__mini {
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 8px 22px rgba(76, 141, 255, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(14px) saturate(180%);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    position: relative;
    z-index: 2;
}
.theme-preview.glass-prism .theme-preview__pill {
    background: linear-gradient(90deg, #7fb0ff, #c9b4ff, #ffd76b);
}
.theme-preview.glass-prism .theme-preview__line { background: rgba(14, 26, 51, 0.20); }

/* GLSL showcase theme previews */
.theme-preview.samurai-steel,
.theme-preview.steel-sakura,
.theme-preview.liquid-gold-pour,
.theme-preview.marble {
 position: relative;
 overflow: hidden;
 isolation: isolate;
}

.theme-preview.samurai-steel {
 background:
  radial-gradient(circle at 76% 28%, rgba(220, 45, 62, 0.72), transparent 16%),
  linear-gradient(116deg, transparent 36%, rgba(255, 255, 255, 0.18) 42%, rgba(176, 190, 203, 0.06) 48%, transparent 54%),
  repeating-linear-gradient(102deg, rgba(255,255,255,0.08) 0 1px, transparent 1px 10px),
  linear-gradient(140deg, #06080b 0%, #232b34 48%, #090c11 100%);
 border-color: rgba(225, 47, 57, 0.46);
 color: #f3f6f8;
}

.theme-preview.steel-sakura {
 background:
  radial-gradient(circle at 78% 26%, rgba(255, 143, 180, 0.38), transparent 17%),
  linear-gradient(116deg, transparent 36%, rgba(255, 222, 232, 0.18) 42%, rgba(176, 190, 203, 0.06) 49%, transparent 55%),
  repeating-linear-gradient(102deg, rgba(255,255,255,0.07) 0 1px, transparent 1px 10px),
  linear-gradient(140deg, #06080b 0%, #242b33 49%, #10080d 100%);
 border-color: rgba(255, 143, 180, 0.42);
 color: #fff2f7;
}

.theme-preview.liquid-gold-pour {
 background:
  radial-gradient(circle at 28% 32%, rgba(255, 196, 80, 0.42), transparent 22%),
  radial-gradient(circle at 76% 70%, rgba(210, 150, 40, 0.32), transparent 26%),
  repeating-linear-gradient(58deg, rgba(190, 145, 50, 0.16) 0 1px, transparent 1px 10px),
  repeating-linear-gradient(122deg, rgba(220, 175, 70, 0.10) 0 1px, transparent 1px 14px),
  linear-gradient(140deg, #fffcf2 0%, #faf2dc 50%, #fff8e6 100%);
 border-color: rgba(200, 160, 60, 0.55);
 color: #4a3208;
}

.theme-preview.marble {
 background:
  radial-gradient(circle at 28% 30%, rgba(255, 255, 255, 0.55), transparent 20%),
  radial-gradient(circle at 78% 78%, rgba(180, 145, 60, 0.18), transparent 26%),
  repeating-linear-gradient(58deg, rgba(70, 70, 75, 0.10) 0 1px, transparent 1px 8px),
  repeating-linear-gradient(122deg, rgba(160, 130, 60, 0.10) 0 1px, transparent 1px 14px),
  linear-gradient(140deg, #f6f3ec 0%, #e3ddce 50%, #efeae0 100%);
 border-color: rgba(170, 150, 110, 0.45);
 color: #2a2a2a;
}

.theme-preview.samurai-steel::before,
.theme-preview.steel-sakura::before {
 content: '';
 position: absolute;
 inset: -40%;
 z-index: 0;
 background: conic-gradient(from 0deg, transparent, currentColor, transparent 34%, transparent 64%, currentColor, transparent);
 opacity: 0.12;
 animation: shaderPreviewSpin 12s linear infinite;
}

.theme-preview__mini {
 z-index: 3;
}

.theme-preview.samurai-steel .theme-preview__mini,
.theme-preview.steel-sakura .theme-preview__mini {
 background: rgba(3, 8, 14, 0.58);
 border-color: rgba(255,255,255,0.18);
 box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 10px 22px rgba(0,0,0,0.34);
 backdrop-filter: blur(12px) saturate(160%);
}

.theme-preview.marble .theme-preview__mini,
.theme-preview.liquid-gold-pour .theme-preview__mini {
 background: rgba(255, 253, 247, 0.62);
 border-color: rgba(120, 100, 70, 0.30);
 box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), 0 10px 22px rgba(80,70,40,0.18);
 backdrop-filter: blur(12px) saturate(140%);
}

.theme-preview.samurai-steel .theme-preview__pill { background: linear-gradient(90deg, #cf2333, #eff4f7); }
.theme-preview.samurai-steel .theme-preview__line { background: rgba(218, 226, 232, 0.68); }
.theme-preview.steel-sakura .theme-preview__pill { background: linear-gradient(90deg, #3d4651, #ff8fb4); }
.theme-preview.steel-sakura .theme-preview__line { background: rgba(255, 218, 230, 0.68); }
.theme-preview.liquid-gold-pour .theme-preview__pill { background: linear-gradient(90deg, #b8841e, #ffd76a); }
.theme-preview.liquid-gold-pour .theme-preview__line { background: rgba(150, 110, 30, 0.55); }
.theme-preview.marble .theme-preview__pill { background: linear-gradient(90deg, #3a3a3a, #c8a347); }
.theme-preview.marble .theme-preview__line { background: rgba(80, 75, 65, 0.55); }

.shader-moon,
.shader-slash {
 position: absolute;
 pointer-events: none;
 z-index: 1;
}

.shader-moon { width: 32px; height: 32px; right: 14px; top: 10px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #ff8a94 0%, #cf2333 55%, #6b0d16 100%); box-shadow: 0 0 24px rgba(207,35,51,0.76), 0 0 44px rgba(207,35,51,0.24); }
.shader-moon::after { content: ''; position: absolute; inset: 4px 0 0 9px; border-radius: 50%; background: #1c232b; opacity: 0.82; }
.shader-slash { height: 2px; width: 74px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.95), rgba(207,35,51,0.92), transparent); box-shadow: 0 0 12px rgba(207,35,51,0.54); transform: rotate(-18deg); animation: shaderPreviewSlash 3.8s ease-in-out infinite; }
.shader-slash.slash-a { left: 16px; top: 32px; }
.shader-slash.slash-b { right: 4px; bottom: 18px; animation-delay: -1.7s; }

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

@keyframes shaderPreviewSlash {
 0%, 100% { opacity: 0.22; transform: translateX(-10px) rotate(-18deg); }
 45%, 55% { opacity: 1; transform: translateX(10px) rotate(-18deg); }
}


/* Crystal Glass preview */