/* Global variables updated by admin panel */
:root {
    --btn-color: #3b82f6;
    --btn-hover: #2563eb;
    --btn-rgb: 59, 130, 246;
    --glow-color: rgba(59, 130, 246, 0.4);
    --logo-hue: 0deg;
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: rgba(0,0,0,0.3); }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.3); }

/* Luxurious Base Background */
body {
    background-color: #030305;
}

/* Pure CSS Animated Aurora Background */
.animated-bg {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
    background: #000;
}

.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.6;
    mix-blend-mode: screen;
    animation: floatOrb 25s infinite ease-in-out alternate;
}

.orb-1 {
    width: 60vw; height: 60vw;
    background: var(--btn-color);
    top: -10%; left: -10%;
    animation-duration: 30s;
}

.orb-2 {
    width: 70vw; height: 70vw;
    background: #4338ca;
    bottom: -20%; right: -10%;
    animation-duration: 25s;
    animation-delay: -5s;
}

.orb-3 {
    width: 50vw; height: 50vw;
    background: #7e22ce;
    top: 40%; left: 30%;
    animation-duration: 35s;
    animation-delay: -15s;
}

.orb-4 {
    width: 80vw; height: 80vw;
    background: #0f766e;
    bottom: -30%; left: -20%;
    animation-duration: 40s;
    animation-delay: -20s;
}

@keyframes floatOrb {
    0% { transform: translate(0, 0) scale(1) rotate(0deg); }
    33% { transform: translate(15vw, 15vh) scale(1.3) rotate(45deg); }
    66% { transform: translate(-10vw, 20vh) scale(0.8) rotate(90deg); }
    100% { transform: translate(-20vw, -10vh) scale(1.1) rotate(135deg); }
}

/* Dynamic Filters */
.filter-logo-hue {
    filter: hue-rotate(var(--logo-hue));
}

/* Animations */
@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.animate-fade-in { animation: fadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

@keyframes fadeOut { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.9); } }
.animate-fade-out { animation: fadeOut 0.5s ease-in forwards; }

@keyframes entranceSpin {
    0% { transform: scale(0.5) rotate(0deg); opacity: 0; filter: brightness(1) hue-rotate(var(--logo-hue)); }
    50% { transform: scale(1.2) rotate(180deg); opacity: 1; filter: brightness(2) hue-rotate(var(--logo-hue)); }
    100% { transform: scale(1) rotate(360deg); opacity: 1; filter: brightness(1) hue-rotate(var(--logo-hue)); }
}
.animate-entrance-spin { animation: entranceSpin 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }

@keyframes entranceGlow {
    0% { opacity: 0; transform: scale(0.5); }
    50% { opacity: 1; transform: scale(1.5); }
    100% { opacity: 0; transform: scale(2); }
}
.animate-entrance-glow { animation: entranceGlow 1.5s ease-out forwards; }

@keyframes pulseFast {
    0%, 100% { opacity: 0.8; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.1); }
}
.animate-pulse-fast { animation: pulseFast 1s ease-in-out infinite; }

@keyframes shakeError {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-10px); }
    50% { transform: translateX(10px); }
    75% { transform: translateX(-10px); }
}
.animate-shake { animation: shakeError 0.4s ease-in-out; }

/* iOS Glassmorphism Premium Buttons */
.ios-btn {
    background: linear-gradient(135deg, rgba(var(--btn-rgb), 0.5) 0%, rgba(var(--btn-rgb), 0.1) 100%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 8px 32px 0 rgba(var(--btn-rgb), 0.4), inset 0 2px 10px rgba(255,255,255,0.1);
    color: white;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow: hidden;
    position: relative;
}

.ios-btn::before {
    content: '';
    position: absolute;
    top: 0; left: -100%; width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transform: skewX(-20deg);
    transition: left 0.5s;
}

.ios-btn:hover::before { left: 150%; }
.ios-btn:hover { box-shadow: 0 12px 40px 0 rgba(var(--btn-rgb), 0.6), inset 0 2px 15px rgba(255,255,255,0.2); border: 1px solid rgba(255, 255, 255, 0.3); }
.ios-btn:active { transform: scale(0.95); box-shadow: 0 4px 15px 0 rgba(var(--btn-rgb), 0.3); }

/* Glass Panels */
.glass-panel {
    background: rgba(20, 20, 30, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

/* WebKit Autofill Fix */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px #0a0a0f inset !important;
    -webkit-text-fill-color: white !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* OTP */
.otp-box.filled { background-color: rgba(var(--btn-rgb), 0.15); border-color: var(--btn-color); box-shadow: 0 0 15px rgba(var(--btn-rgb), 0.3); transform: translateY(-2px); }
.otp-box.node { width: 16px !important; height: 16px !important; min-width: 16px !important; border-radius: 50% !important; color: transparent !important; background-color: var(--btn-color) !important; border-color: var(--btn-color) !important; padding: 0 !important; box-shadow: 0 0 10px rgba(var(--btn-rgb), 0.8); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.otp-path-draw { stroke-dasharray: 100; stroke-dashoffset: 100; }
.otp-path-draw.draw { animation: pathDraw 1.2s ease-in-out forwards; }
@keyframes pathDraw { to { stroke-dashoffset: 0; } }
.otp-path-comet { stroke-dasharray: 15 100; stroke-dashoffset: 100; opacity: 0; }
.otp-path-comet.move { opacity: 1; animation: cometMove 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
@keyframes cometMove { 0% { stroke-dashoffset: 100; } 100% { stroke-dashoffset: 0; } }

/* LTR for OTP inputs */
.dir-ltr { direction: ltr; }

/* Range Sliders */
input[type=range] { -webkit-appearance: none; width: 100%; background: transparent; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; height: 24px; width: 24px; border-radius: 50%; background: var(--btn-color); cursor: pointer; margin-top: -10px; box-shadow: 0 4px 10px rgba(0,0,0,0.5), inset 0 2px 5px rgba(255,255,255,0.4); transition: transform 0.1s; }
input[type=range]::-webkit-slider-thumb:active { transform: scale(1.15); }
input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 6px; cursor: pointer; background: rgba(255,255,255,0.1); border-radius: 3px; border: 1px solid rgba(255,255,255,0.05); }

/* Color Pickers */
input[type="color"] { -webkit-appearance: none; border: none; padding: 0; cursor: pointer; background: transparent; }
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch { border: 2px solid rgba(255,255,255,0.2); border-radius: 50%; box-shadow: 0 4px 10px rgba(0,0,0,0.3); }

/* ===== THEME PICKER ===== */
.theme-picker-btn { position: fixed; bottom: 20px; left: 20px; z-index: 50; width: 44px; height: 44px; border-radius: 14px; background: rgba(15,15,25,0.85); border: 1.5px solid rgba(255,255,255,0.12); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s; box-shadow: 0 4px 16px rgba(0,0,0,0.4); color: rgba(255,255,255,0.85); }
.theme-picker-btn:hover { border-color: rgba(255,255,255,0.3); box-shadow: 0 4px 24px rgba(0,0,0,0.5); transform: scale(1.05); }

.theme-panel { position: fixed; bottom: 74px; left: 20px; z-index: 50; width: 200px; max-height: 70vh; overflow-y: auto; background: rgba(10,10,18,0.95); border: 1px solid rgba(255,255,255,0.1); border-radius: 20px; padding: 12px; box-shadow: 0 20px 60px rgba(0,0,0,0.6); display: none; }
.theme-panel.open { display: block; animation: fadeIn 0.25s ease forwards; }
.theme-panel-title { font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.5); text-align: center; margin-bottom: 10px; letter-spacing: 2px; text-transform: uppercase; }
.theme-option { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; cursor: pointer; transition: all 0.2s; border: 1.5px solid transparent; }
.theme-option:hover { background: rgba(255,255,255,0.06); }
.theme-option.active { border-color: rgba(255,255,255,0.25); background: rgba(255,255,255,0.08); }
.theme-swatch { width: 28px; height: 28px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.15); flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.theme-name { font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.85); }

/* ===== THEME COLORS ===== */
/* Dark (default) */
[data-theme="dark"] { --t-bg: linear-gradient(135deg,#0d1228 0%,#1e3a8a 100%); --logo-hue: 0deg; --t-card: rgba(15,15,25,0.75); --t-card-border: rgba(255,255,255,0.08); --t-text: #f1f5f9; --t-text-muted: rgba(255,255,255,0.5); --t-surface: rgba(15,15,26,0.9); --t-orb1: var(--btn-color); --t-orb2: #a855f7; --t-orb3: #ec4899; --t-orb4: var(--btn-color); --t-orb5: #6366f1; --t-profile-border: conic-gradient(var(--btn-color, #3b82f6), #a855f7, #ec4899, var(--btn-color, #3b82f6)); --t-glow: var(--glow-color); }

/* Gold */
[data-theme="gold"] { --t-bg: linear-gradient(135deg,#1c1306 0%,#a8761a 100%); --logo-hue: 30deg; --t-card: rgba(20,16,8,0.8); --t-card-border: rgba(212,168,67,0.25); --t-text: #f5edd5; --t-text-muted: rgba(212,168,67,0.6); --t-surface: rgba(18,14,6,0.9); --t-orb1: #d4a843; --t-orb2: #b8860b; --t-orb3: #8b6914; --t-orb4: #c5a55a; --t-orb5: #d4a843; --t-profile-border: conic-gradient(#d4a843, #ffd700, #b8860b, #d4a843); --t-glow: rgba(212,168,67,0.4); }

/* Day */
[data-theme="day"] { --t-bg: linear-gradient(135deg,#eef2ff 0%,#93b0f0 100%); --logo-hue: 0deg; --t-card: rgba(255,255,255,0.85); --t-card-border: rgba(0,0,0,0.08); --t-text: #1a1a2e; --t-text-muted: rgba(0,0,0,0.45); --t-surface: rgba(240,242,245,0.95); --t-orb1: #60a5fa; --t-orb2: #a78bfa; --t-orb3: #f472b6; --t-orb4: #34d399; --t-orb5: #fbbf24; --t-profile-border: conic-gradient(#60a5fa, #a78bfa, #f472b6, #60a5fa); --t-glow: rgba(96,165,250,0.3); }

/* Neon */
[data-theme="neon"] { --t-bg: linear-gradient(135deg,#021008 0%,#12a150 100%); --logo-hue: 100deg; --t-card: rgba(0,20,0,0.8); --t-card-border: rgba(0,255,65,0.2); --t-text: #e0ffe0; --t-text-muted: rgba(0,255,65,0.5); --t-surface: rgba(0,15,0,0.9); --t-orb1: #00ff41; --t-orb2: #00e5ff; --t-orb3: #39ff14; --t-orb4: #00ff41; --t-orb5: #00e5ff; --t-profile-border: conic-gradient(#00ff41, #00e5ff, #39ff14, #00ff41); --t-glow: rgba(0,255,65,0.35); }

/* Royal */
[data-theme="royal"] { --t-bg: linear-gradient(135deg,#0e0720 0%,#7c3aed 100%); --logo-hue: 280deg; --t-card: rgba(15,8,25,0.8); --t-card-border: rgba(168,85,247,0.25); --t-text: #f0e6ff; --t-text-muted: rgba(168,85,247,0.6); --t-surface: rgba(12,6,20,0.9); --t-orb1: #a855f7; --t-orb2: #7c3aed; --t-orb3: #c084fc; --t-orb4: #a855f7; --t-orb5: #7c3aed; --t-profile-border: conic-gradient(#a855f7, #c084fc, #7c3aed, #a855f7); --t-glow: rgba(168,85,247,0.4); }

/* Midnight - Black + Purple Mix */
[data-theme="midnight"] { --t-bg: linear-gradient(135deg,#0d0624 0%,#5b21b6 100%); --logo-hue: 260deg; --t-card: rgba(12,4,22,0.8); --t-card-border: rgba(139,92,246,0.2); --t-text: #e8e0ff; --t-text-muted: rgba(139,92,246,0.5); --t-surface: rgba(10,3,18,0.9); --t-orb1: #8b5cf6; --t-orb2: #6d28d9; --t-orb3: #a78bfa; --t-orb4: #7c3aed; --t-orb5: #5b21b6; --t-profile-border: conic-gradient(#8b5cf6, #a78bfa, #6d28d9, #8b5cf6); --t-glow: rgba(139,92,246,0.35); }

/* Crimson - Dark + Red Mix */
[data-theme="crimson"] { --t-bg: linear-gradient(135deg,#170508 0%,#a31621 100%); --logo-hue: 15deg; --t-card: rgba(18,4,4,0.8); --t-card-border: rgba(239,68,68,0.2); --t-text: #ffe8e8; --t-text-muted: rgba(239,68,68,0.5); --t-surface: rgba(14,3,3,0.9); --t-orb1: #ef4444; --t-orb2: #dc2626; --t-orb3: #f87171; --t-orb4: #b91c1c; --t-orb5: #fca5a5; --t-profile-border: conic-gradient(#ef4444, #f87171, #dc2626, #ef4444); --t-glow: rgba(239,68,68,0.35); }

/* Ocean - Dark + Blue/Cyan Mix */
[data-theme="ocean"] { --t-bg: linear-gradient(135deg,#051325 0%,#0e7fb0 100%); --logo-hue: 20deg; --t-card: rgba(4,10,22,0.8); --t-card-border: rgba(56,189,248,0.2); --t-text: #e0f4ff; --t-text-muted: rgba(56,189,248,0.5); --t-surface: rgba(3,8,18,0.9); --t-orb1: #38bdf8; --t-orb2: #0ea5e9; --t-orb3: #7dd3fc; --t-orb4: #06b6d4; --t-orb5: #22d3ee; --t-profile-border: conic-gradient(#38bdf8, #7dd3fc, #0ea5e9, #38bdf8); --t-glow: rgba(56,189,248,0.35); }

/* Apply theme */
body[data-theme] { background: var(--t-bg) !important; background-attachment: fixed !important; background-size: cover !important; color: var(--t-text) !important; }

body[data-theme] .glass-panel { background: var(--t-card) !important; border-color: var(--t-card-border) !important; }
body[data-theme] .user-profile-card { background: var(--t-card) !important; border-color: var(--t-card-border) !important; }
body[data-theme] .profile-img-wrap { background: var(--t-profile-border) !important; }
body[data-theme] .editor-section { background: var(--t-surface) !important; border-color: var(--t-card-border) !important; }
body[data-theme] .scrubber-section { background: var(--t-surface) !important; border-color: var(--t-card-border) !important; }
body[data-theme] .section-label { color: var(--btn-color) !important; }
body[data-theme] .bg-orb-1 { background: radial-gradient(circle, var(--t-orb1) 0%, transparent 70%) !important; }
body[data-theme] .bg-orb-2 { background: radial-gradient(circle, var(--t-orb2) 0%, transparent 70%) !important; }
body[data-theme] .bg-orb-3 { background: radial-gradient(circle, var(--t-orb3) 0%, transparent 70%) !important; }
body[data-theme] .bg-orb-4 { background: radial-gradient(circle, var(--t-orb4) 0%, transparent 70%) !important; }
body[data-theme] .bg-orb-5 { background: radial-gradient(circle, var(--t-orb5) 0%, transparent 70%) !important; }
body[data-theme] .dpad-btn { background: var(--t-surface) !important; border-color: var(--t-card-border) !important; }
body[data-theme] .dpad-btn:hover { background: rgba(var(--btn-rgb), 0.15) !important; border-color: var(--btn-color) !important; color: var(--btn-color) !important; }
body[data-theme] #entrance-glow { background: var(--btn-color) !important; }
body[data-theme] .otp-box { background: var(--t-surface) !important; border-color: var(--t-card-border) !important; }
body[data-theme] .otp-box:focus { border-color: var(--btn-color) !important; box-shadow: 0 0 20px rgba(var(--btn-rgb), 0.3) !important; }
body[data-theme] .otp-box.filled { background: rgba(var(--btn-rgb), 0.1) !important; border-color: var(--btn-color) !important; }
body[data-theme] input[type=range]::-webkit-slider-runnable-track { background: var(--t-card-border) !important; }
body[data-theme] .glow-layer { background: var(--btn-color) !important; }
body[data-theme] #main-header img:not(.filter-logo-hue) { filter: brightness(1.1) drop-shadow(0 0 15px rgba(var(--btn-rgb), 0.4)); }
body[data-theme] #main-header img.filter-logo-hue { filter: brightness(1.1) hue-rotate(var(--logo-hue)) drop-shadow(0 0 15px rgba(var(--btn-rgb), 0.4)); }

/* Profile / Stats overlay pages — theme-aware colors (so light "day" theme stays readable) */
#profile-view, #stats-view { color: var(--t-text, #f1f5f9); }
#profile-view .text-white, #stats-view .text-white { color: var(--t-text, #f1f5f9) !important; }
#profile-view [class*="text-white/"], #stats-view [class*="text-white/"] { color: var(--t-text-muted, rgba(255,255,255,0.5)) !important; }
#profile-view [class*="bg-white/"], #stats-view [class*="bg-white/"] { background: rgba(var(--btn-rgb), 0.08) !important; }
#profile-view [class*="border-white/"], #stats-view [class*="border-white/"] { border-color: var(--t-card-border, rgba(255,255,255,0.08)) !important; }

/* Day theme extras */
body[data-theme="day"] { color: #1a1a2e !important; }
body[data-theme="day"] .bg-orb { opacity: 0.15 !important; }
body[data-theme="day"] .glass-panel { box-shadow: 0 8px 32px rgba(0,0,0,0.08) !important; }
body[data-theme="day"] ::-webkit-scrollbar-track { background: rgba(0,0,0,0.05); }
body[data-theme="day"] ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); }
body[data-theme="day"] input[type="color"]::-webkit-color-swatch { border-color: rgba(0,0,0,0.15); }
body[data-theme="day"] .otp-box.filled { background: rgba(var(--btn-rgb), 0.08) !important; }
body[data-theme="day"] .ios-btn { color: white !important; }
body[data-theme="day"] #entrance-text { color: #1a1a2e !important; -webkit-text-fill-color: #1a1a2e !important; }

/* Neon extras */
body[data-theme="neon"] .glass-panel { box-shadow: 0 0 30px rgba(0,255,65,0.05), 0 25px 50px -12px rgba(0,0,0,0.5) !important; }
body[data-theme="neon"] .ios-btn { border-color: rgba(0,255,65,0.3) !important; }
body[data-theme="neon"] .otp-box:focus { box-shadow: 0 0 20px rgba(0,255,65,0.3) !important; }
body[data-theme="neon"] .otp-path-draw { stroke: #00ff41 !important; }
body[data-theme="neon"] .otp-path-comet { fill: #00ff41 !important; }

/* Royal extras */
body[data-theme="royal"] .glass-panel { box-shadow: 0 0 30px rgba(168,85,247,0.08), 0 25px 50px -12px rgba(0,0,0,0.5) !important; }
body[data-theme="royal"] .ios-btn { border-color: rgba(168,85,247,0.3) !important; }

/* ===== BOTTOM NAVIGATION BAR ===== */
#bottom-nav {
    position: fixed;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    z-index: 60;
    display: none;
    align-items: center;
    justify-content: space-around;
    gap: 4px;
    width: min(92%, 420px);
    padding: 10px 12px;
    border-radius: 26px;
    background: var(--t-surface, rgba(15,15,26,0.9));
    border: 1px solid var(--t-card-border, rgba(255,255,255,0.12));
    border-top: 1px solid rgba(255,255,255,0.2);
    box-shadow: 0 20px 50px -12px rgba(0,0,0,0.7), inset 0 2px 12px rgba(255,255,255,0.06);
    animation: navIn 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
#bottom-nav.visible { display: flex; }
@keyframes navIn {
    from { transform: translate(-50%, 40px); opacity: 0; }
    to { transform: translate(-50%, 0); opacity: 1; }
}

.nav-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 4px 6px;
    min-width: 58px;
    background: transparent;
    border: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.nav-btn-icon {
    position: relative;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    padding: 2px;
    background: var(--t-profile-border, var(--btn-color));
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s;
    box-shadow: 0 4px 14px -4px rgba(var(--btn-rgb), 0.5);
}
.nav-btn-icon::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--t-surface, rgba(15,15,26,0.95));
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.4);
    z-index: 0;
}
.nav-btn-icon i,
.nav-btn-icon svg {
    position: relative;
    z-index: 1;
    color: var(--btn-color, #3b82f6);
    stroke: var(--btn-color, #3b82f6);
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
    transition: color 0.2s, stroke 0.2s;
}
.nav-btn-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--t-text-muted, rgba(255,255,255,0.55));
    transition: color 0.2s;
}
.nav-btn:hover .nav-btn-icon { transform: translateY(-3px); box-shadow: 0 8px 22px -6px rgba(var(--btn-rgb), 0.7); }
.nav-btn:active .nav-btn-icon { transform: scale(0.92); }
.nav-btn.active .nav-btn-icon::after { background: rgba(var(--btn-rgb), 0.14); }
.nav-btn.active .nav-btn-label { color: var(--btn-color, #3b82f6); }
body[data-theme="day"] .nav-btn-label { color: #4b5563; }
body[data-theme="day"] .nav-btn.active .nav-btn-label { color: var(--btn-color, #3b82f6); }

/* Keep page content clear of the floating bottom nav so buttons
   (e.g. export) are not hidden behind it */
#editor-view, #gallery-view { padding-bottom: 140px !important; }

/* Theme panel opens above the bottom nav */
body #theme-panel {
    position: fixed;
    left: 50%;
    bottom: 96px;
    transform: translateX(-50%);
    width: 240px;
    z-index: 61;
}
/* The floating palette button is replaced by the nav Theme button */
#theme-picker-btn { display: none !important; }

/* ===== TEMPLATE PAGINATION BAR ===== */
.pagination-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    width: 100%;
    margin-top: 22px;
    padding: 6px 0 18px;
}
.page-btn {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    padding: 2px;
    background: var(--t-profile-border, var(--btn-color));
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 16px -4px rgba(var(--btn-rgb), 0.5);
    transition: transform 0.2s, box-shadow 0.2s;
    -webkit-tap-highlight-color: transparent;
}
.page-btn::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--t-surface, rgba(15,15,26,0.95));
    z-index: 0;
}
.page-btn { position: relative; }
.page-btn i,
.page-btn svg {
    position: relative;
    z-index: 1;
    color: var(--btn-color, #3b82f6);
    stroke: var(--btn-color, #3b82f6);
}
.page-btn:hover:not(:disabled) { transform: translateY(-3px); box-shadow: 0 8px 24px -6px rgba(var(--btn-rgb), 0.75); }
.page-btn:active:not(:disabled) { transform: scale(0.92); }
.page-btn:disabled { opacity: 0.35; cursor: not-allowed; filter: grayscale(0.6); }
.page-num {
    min-width: 52px;
    text-align: center;
    font-size: 15px;
    font-weight: 800;
    color: var(--btn-color, #3b82f6);
    text-shadow: 0 0 14px rgba(var(--btn-rgb), 0.35);
    direction: ltr;
    font-variant-numeric: tabular-nums;
}