/* ===================== Theme System - Phase 5 ===================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ===================== Base Variables ===================== */
:root {
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --radius: 0.5rem;
}

/* ===================== Theme: Default (Stone) ===================== */
[data-theme="default"] {
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 3.9%;
    --primary: 0 0% 9%;
    --primary-foreground: 0 0% 98%;
    --secondary: 0 0% 96.1%;
    --secondary-foreground: 0 0% 9%;
    --muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 45.1%;
    --accent: 0 0% 96.1%;
    --accent-foreground: 0 0% 9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 89.8%;
    --input: 0 0% 89.8%;
    --ring: 0 0% 3.9%;
}

    [data-theme="default"].dark {
        --background: 220 13% 10%;
        --foreground: 0 0% 98%;
        --card: 220 13% 12%;
        --card-foreground: 0 0% 98%;
        --popover: 220 13% 12%;
        --popover-foreground: 0 0% 98%;
        --primary: 0 0% 98%;
        --primary-foreground: 220 13% 10%;
        --secondary: 220 13% 18%;
        --secondary-foreground: 0 0% 98%;
        --muted: 220 13% 15%;
        --muted-foreground: 0 0% 65%;
        --accent: 220 13% 18%;
        --accent-foreground: 0 0% 98%;
        --destructive: 0 62.8% 30.6%;
        --destructive-foreground: 0 0% 98%;
        --border: 220 13% 20%;
        --input: 220 13% 18%;
        --ring: 0 0% 83.1%;
    }

/* ===================== Theme: Blue ===================== */
[data-theme="blue"] {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 221.2 83.2% 53.3%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 221.2 83.2% 53.3%;
}

    [data-theme="blue"].dark {
        --background: 222.2 84% 4.9%;
        --foreground: 210 40% 98%;
        --card: 222.2 84% 4.9%;
        --card-foreground: 210 40% 98%;
        --popover: 222.2 84% 4.9%;
        --popover-foreground: 210 40% 98%;
        --primary: 217.2 91.2% 59.8%;
        --primary-foreground: 222.2 47.4% 11.2%;
        --secondary: 217.2 32.6% 17.5%;
        --secondary-foreground: 210 40% 98%;
        --muted: 217.2 32.6% 12%;
        --muted-foreground: 215 20.2% 65.1%;
        --accent: 217.2 32.6% 17.5%;
        --accent-foreground: 210 40% 98%;
        --destructive: 0 62.8% 30.6%;
        --destructive-foreground: 210 40% 98%;
        --border: 217.2 32.6% 17.5%;
        --input: 217.2 32.6% 17.5%;
        --ring: 224.3 76.3% 48%;
    }

/* ===================== Theme: Green ===================== */
[data-theme="green"] {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;
    --primary: 142.1 76.2% 36.3%;
    --primary-foreground: 355.7 100% 97.3%;
    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;
    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;
    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;
    --ring: 142.1 76.2% 36.3%;
}

    [data-theme="green"].dark {
        --background: 20 14.3% 4.1%;
        --foreground: 0 0% 95%;
        --card: 24 9.8% 10%;
        --card-foreground: 0 0% 95%;
        --popover: 0 0% 9%;
        --popover-foreground: 0 0% 95%;
        --primary: 142.1 70.6% 45.3%;
        --primary-foreground: 144.9 80.4% 10%;
        --secondary: 240 3.7% 15.9%;
        --secondary-foreground: 0 0% 98%;
        --muted: 240 3.7% 10%;
        --muted-foreground: 240 5% 64.9%;
        --accent: 12 6.5% 15.1%;
        --accent-foreground: 0 0% 98%;
        --destructive: 0 62.8% 30.6%;
        --destructive-foreground: 0 85.7% 97.3%;
        --border: 240 3.7% 15.9%;
        --input: 240 3.7% 15.9%;
        --ring: 142.4 71.8% 29.2%;
    }

/* ===================== Theme: Orange ===================== */
[data-theme="orange"] {
    --background: 0 0% 100%;
    --foreground: 20 14.3% 4.1%;
    --card: 0 0% 100%;
    --card-foreground: 20 14.3% 4.1%;
    --popover: 0 0% 100%;
    --popover-foreground: 20 14.3% 4.1%;
    --primary: 24.6 95% 53.1%;
    --primary-foreground: 60 9.1% 97.8%;
    --secondary: 60 4.8% 95.9%;
    --secondary-foreground: 24 9.8% 10%;
    --muted: 60 4.8% 95.9%;
    --muted-foreground: 25 5.3% 44.7%;
    --accent: 60 4.8% 95.9%;
    --accent-foreground: 24 9.8% 10%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 20 5.9% 90%;
    --input: 20 5.9% 90%;
    --ring: 24.6 95% 53.1%;
}

    [data-theme="orange"].dark {
        --background: 20 14.3% 4.1%;
        --foreground: 60 9.1% 97.8%;
        --card: 20 14.3% 4.1%;
        --card-foreground: 60 9.1% 97.8%;
        --popover: 20 14.3% 4.1%;
        --popover-foreground: 60 9.1% 97.8%;
        --primary: 20.5 90.2% 48.2%;
        --primary-foreground: 60 9.1% 97.8%;
        --secondary: 12 6.5% 15.1%;
        --secondary-foreground: 60 9.1% 97.8%;
        --muted: 12 6.5% 10%;
        --muted-foreground: 24 5.4% 63.9%;
        --accent: 12 6.5% 15.1%;
        --accent-foreground: 60 9.1% 97.8%;
        --destructive: 0 72.2% 50.6%;
        --destructive-foreground: 60 9.1% 97.8%;
        --border: 12 6.5% 15.1%;
        --input: 12 6.5% 15.1%;
        --ring: 20.5 90.2% 48.2%;
    }

/* ===================== Theme: Red ===================== */
[data-theme="red"] {
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 3.9%;
    --primary: 0 72.2% 50.6%;
    --primary-foreground: 0 85.7% 97.3%;
    --secondary: 0 0% 96.1%;
    --secondary-foreground: 0 0% 9%;
    --muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 45.1%;
    --accent: 0 0% 96.1%;
    --accent-foreground: 0 0% 9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 89.8%;
    --input: 0 0% 89.8%;
    --ring: 0 72.2% 50.6%;
}

    [data-theme="red"].dark {
        --background: 0 0% 3.9%;
        --foreground: 0 0% 98%;
        --card: 0 0% 3.9%;
        --card-foreground: 0 0% 98%;
        --popover: 0 0% 3.9%;
        --popover-foreground: 0 0% 98%;
        --primary: 0 72.2% 50.6%;
        --primary-foreground: 0 85.7% 97.3%;
        --secondary: 0 0% 14.9%;
        --secondary-foreground: 0 0% 98%;
        --muted: 0 0% 10%;
        --muted-foreground: 0 0% 63.9%;
        --accent: 0 0% 14.9%;
        --accent-foreground: 0 0% 98%;
        --destructive: 0 62.8% 30.6%;
        --destructive-foreground: 0 0% 98%;
        --border: 0 0% 14.9%;
        --input: 0 0% 14.9%;
        --ring: 0 72.2% 50.6%;
    }

/* ===================== Theme: Rose ===================== */
[data-theme="rose"] {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;
    --primary: 346.8 77.2% 49.8%;
    --primary-foreground: 355.7 100% 97.3%;
    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;
    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;
    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;
    --ring: 346.8 77.2% 49.8%;
}

    [data-theme="rose"].dark {
        --background: 20 14.3% 4.1%;
        --foreground: 0 0% 95%;
        --card: 24 9.8% 10%;
        --card-foreground: 0 0% 95%;
        --popover: 0 0% 9%;
        --popover-foreground: 0 0% 95%;
        --primary: 346.8 77.2% 49.8%;
        --primary-foreground: 355.7 100% 97.3%;
        --secondary: 240 3.7% 15.9%;
        --secondary-foreground: 0 0% 98%;
        --muted: 240 3.7% 10%;
        --muted-foreground: 240 5% 64.9%;
        --accent: 12 6.5% 15.1%;
        --accent-foreground: 0 0% 98%;
        --destructive: 0 62.8% 30.6%;
        --destructive-foreground: 0 85.7% 97.3%;
        --border: 240 3.7% 15.9%;
        --input: 240 3.7% 15.9%;
        --ring: 346.8 77.2% 49.8%;
    }

/* ===================== Theme: Violet ===================== */
[data-theme="violet"] {
    --background: 0 0% 100%;
    --foreground: 224 71.4% 4.1%;
    --card: 0 0% 100%;
    --card-foreground: 224 71.4% 4.1%;
    --popover: 0 0% 100%;
    --popover-foreground: 224 71.4% 4.1%;
    --primary: 262.1 83.3% 57.8%;
    --primary-foreground: 210 20% 98%;
    --secondary: 220 14.3% 95.9%;
    --secondary-foreground: 220.9 39.3% 11%;
    --muted: 220 14.3% 95.9%;
    --muted-foreground: 220 8.9% 46.1%;
    --accent: 220 14.3% 95.9%;
    --accent-foreground: 220.9 39.3% 11%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 220 13% 91%;
    --input: 220 13% 91%;
    --ring: 262.1 83.3% 57.8%;
}

    [data-theme="violet"].dark {
        --background: 224 71.4% 4.1%;
        --foreground: 210 20% 98%;
        --card: 224 71.4% 4.1%;
        --card-foreground: 210 20% 98%;
        --popover: 224 71.4% 4.1%;
        --popover-foreground: 210 20% 98%;
        --primary: 263.4 70% 50.4%;
        --primary-foreground: 210 20% 98%;
        --secondary: 215 27.9% 16.9%;
        --secondary-foreground: 210 20% 98%;
        --muted: 215 27.9% 12%;
        --muted-foreground: 217.9 10.6% 64.9%;
        --accent: 215 27.9% 16.9%;
        --accent-foreground: 210 20% 98%;
        --destructive: 0 62.8% 30.6%;
        --destructive-foreground: 210 20% 98%;
        --border: 215 27.9% 16.9%;
        --input: 215 27.9% 16.9%;
        --ring: 263.4 70% 50.4%;
    }

/* ===================== Theme: Yellow ===================== */
[data-theme="yellow"] {
    --background: 0 0% 100%;
    --foreground: 20 14.3% 4.1%;
    --card: 0 0% 100%;
    --card-foreground: 20 14.3% 4.1%;
    --popover: 0 0% 100%;
    --popover-foreground: 20 14.3% 4.1%;
    --primary: 47.9 95.8% 53.1%;
    --primary-foreground: 26 83.3% 14.1%;
    --secondary: 60 4.8% 95.9%;
    --secondary-foreground: 24 9.8% 10%;
    --muted: 60 4.8% 95.9%;
    --muted-foreground: 25 5.3% 44.7%;
    --accent: 60 4.8% 95.9%;
    --accent-foreground: 24 9.8% 10%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 20 5.9% 90%;
    --input: 20 5.9% 90%;
    --ring: 20 14.3% 4.1%;
}

    [data-theme="yellow"].dark {
        --background: 20 14.3% 4.1%;
        --foreground: 60 9.1% 97.8%;
        --card: 20 14.3% 4.1%;
        --card-foreground: 60 9.1% 97.8%;
        --popover: 20 14.3% 4.1%;
        --popover-foreground: 60 9.1% 97.8%;
        --primary: 47.9 95.8% 53.1%;
        --primary-foreground: 26 83.3% 14.1%;
        --secondary: 12 6.5% 15.1%;
        --secondary-foreground: 60 9.1% 97.8%;
        --muted: 12 6.5% 10%;
        --muted-foreground: 24 5.4% 63.9%;
        --accent: 12 6.5% 15.1%;
        --accent-foreground: 60 9.1% 97.8%;
        --destructive: 0 62.8% 30.6%;
        --destructive-foreground: 60 9.1% 97.8%;
        --border: 12 6.5% 15.1%;
        --input: 12 6.5% 15.1%;
        --ring: 35.5 91.7% 32.9%;
    }

/* ===================== Apply Theme Colors ===================== */
* {
    border-color: hsl(var(--border));
}

body {
    font-family: var(--font-family);
    background: hsl(var(--background));
    color: hsl(var(--foreground));
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* ===================== Theme Toggle ===================== */
.theme-toggle-btn {
    position: relative;
    width: 2.5rem;
    height: 2.5rem;
}

    .theme-toggle-btn .fa-sun,
    .theme-toggle-btn .fa-moon {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        transition: opacity 0.3s ease;
    }

    .theme-toggle-btn .fa-sun {
        opacity: 1;
    }

    .theme-toggle-btn .fa-moon {
        opacity: 0;
    }

body.dark .theme-toggle-btn .fa-sun {
    opacity: 0;
}

body.dark .theme-toggle-btn .fa-moon {
    opacity: 1;
}

/* ===================== Glass Modal Customizer ===================== */

.customizer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

    .customizer-overlay.active {
        opacity: 1;
        visibility: visible;
    }

.customizer-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    width: 90%;
    max-width: 520px;
    max-height: 85vh;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
}

    .customizer-modal.active {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, -50%) scale(1);
    }

body.dark .customizer-modal {
    background: rgba(30, 30, 30, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.customizer-modal-header {
    padding: 1.5rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
    backdrop-filter: blur(10px);
}

body.dark .customizer-modal-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.customizer-modal-header h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: hsl(var(--foreground));
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 0;
}

.customizer-close {
    background: rgba(0, 0, 0, 0.05);
    border: none;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius);
    cursor: pointer;
    color: hsl(var(--muted-foreground));
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

    .customizer-close:hover {
        background: rgba(0, 0, 0, 0.1);
        color: hsl(var(--foreground));
    }

body.dark .customizer-close {
    background: rgba(255, 255, 255, 0.05);
}

    body.dark .customizer-close:hover {
        background: rgba(255, 255, 255, 0.1);
    }

.customizer-modal-content {
    padding: 1.5rem;
    overflow-y: auto;
    max-height: calc(85vh - 80px);
}

    .customizer-modal-content::-webkit-scrollbar {
        width: 8px;
    }

    .customizer-modal-content::-webkit-scrollbar-track {
        background: transparent;
    }

    .customizer-modal-content::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.2);
        border-radius: var(--radius);
    }

body.dark .customizer-modal-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
}

.customizer-group {
    margin-bottom: 2rem;
}

    .customizer-group h4 {
        font-size: 0.8125rem;
        font-weight: 600;
        color: hsl(var(--muted-foreground));
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 0.75rem;
    }

.dark-mode-toggle {
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: var(--radius);
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s;
}

    .dark-mode-toggle:hover {
        background: rgba(0, 0, 0, 0.05);
    }

body.dark .dark-mode-toggle {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

    body.dark .dark-mode-toggle:hover {
        background: rgba(255, 255, 255, 0.05);
    }

.dark-mode-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: hsl(var(--foreground));
}

.dark-mode-switch {
    position: relative;
    width: 3rem;
    height: 1.75rem;
    background: rgba(0, 0, 0, 0.1);
    border-radius: calc(var(--radius) * 2);
    transition: background 0.3s;
}

    .dark-mode-switch::after {
        content: '';
        position: absolute;
        top: 0.25rem;
        left: 0.25rem;
        width: 1.25rem;
        height: 1.25rem;
        background: white;
        border-radius: 50%;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

body.dark .dark-mode-switch {
    background: hsl(var(--primary));
}

    body.dark .dark-mode-switch::after {
        transform: translateX(1.25rem);
    }

.theme-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.625rem;
}

.theme-card {
    background: rgba(0, 0, 0, 0.03);
    border: 2px solid transparent;
    border-radius: var(--radius);
    padding: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
}

    .theme-card:hover {
        background: rgba(0, 0, 0, 0.05);
        transform: translateY(-2px);
    }

    .theme-card.active {
        background: rgba(0, 0, 0, 0.05);
        border-color: hsl(var(--primary));
    }

body.dark .theme-card {
    background: rgba(255, 255, 255, 0.03);
}

    body.dark .theme-card:hover {
        background: rgba(255, 255, 255, 0.05);
    }

    body.dark .theme-card.active {
        background: rgba(255, 255, 255, 0.05);
    }

.theme-card-name {
    font-size: 0.75rem;
    font-weight: 600;
    color: hsl(var(--foreground));
    margin-bottom: 0.5rem;
}

.theme-card-colors {
    display: flex;
    gap: 0.25rem;
    height: 1.5rem;
}

.color-swatch {
    flex: 1;
    border-radius: calc(var(--radius) * 0.6);
}

.font-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.625rem;
}

.font-card {
    background: rgba(0, 0, 0, 0.03);
    border: 2px solid transparent;
    border-radius: var(--radius);
    padding: 1.25rem 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

    .font-card:hover {
        background: rgba(0, 0, 0, 0.05);
        transform: translateY(-2px);
    }

    .font-card.active {
        background: rgba(0, 0, 0, 0.05);
        border-color: hsl(var(--primary));
    }

body.dark .font-card {
    background: rgba(255, 255, 255, 0.03);
}

    body.dark .font-card:hover {
        background: rgba(255, 255, 255, 0.05);
    }

    body.dark .font-card.active {
        background: rgba(255, 255, 255, 0.05);
    }

.font-preview {
    font-size: 2rem;
    font-weight: 500;
    color: hsl(var(--foreground));
    margin-bottom: 0.5rem;
    line-height: 1;
}

.font-name {
    font-size: 0.75rem;
    font-weight: 500;
    color: hsl(var(--muted-foreground));
}

.radius-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.625rem;
}

.radius-card {
    background: rgba(0, 0, 0, 0.03);
    border: 2px solid transparent;
    border-radius: var(--radius);
    padding: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

    .radius-card:hover {
        background: rgba(0, 0, 0, 0.05);
        transform: translateY(-2px);
    }

    .radius-card.active {
        background: rgba(0, 0, 0, 0.05);
        border-color: hsl(var(--primary));
    }

body.dark .radius-card {
    background: rgba(255, 255, 255, 0.03);
}

    body.dark .radius-card:hover {
        background: rgba(255, 255, 255, 0.05);
    }

    body.dark .radius-card.active {
        background: rgba(255, 255, 255, 0.05);
    }

.radius-preview {
    display: flex;
    justify-content: center;
    margin-bottom: 0.5rem;
}

.radius-shape {
    width: 2rem;
    height: 2rem;
    background: hsl(var(--primary));
}

.radius-name {
    font-size: 0.6875rem;
    font-weight: 500;
    color: hsl(var(--muted-foreground));
}

.reset-btn {
    width: 100%;
    padding: 0.875rem;
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--radius);
    cursor: pointer;
    color: hsl(var(--foreground));
    font-size: 0.875rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.2s;
}

    .reset-btn:hover {
        background: rgba(0, 0, 0, 0.08);
    }

body.dark .reset-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

    body.dark .reset-btn:hover {
        background: rgba(255, 255, 255, 0.08);
    }

@media (max-width: 480px) {
    .customizer-modal {
        width: 95%;
        max-width: none;
    }

    .theme-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
/* ====================================
Toastr Custom Styles - Theme Aware
==================================== */

/* Base toast container styling */
#toast-container > div {
    opacity: 1 !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    border: 1px solid hsl(var(--border));
    font-family: var(--font-family);
    background-color: hsl(var(--card)) !important;
    background-image: none !important;
    font-weight: normal;
    font-size: 0.9375rem;
}

/* Force text color to be readable in both light and dark modes */
#toast-container > div,
#toast-container > div .toast-message,
#toast-container > div .toast-title {
    color: hsl(var(--foreground)) !important;
}

/* Hide Toastr's default background-image icons to prevent duplicate icons */
#toast-container > .toast-success,
#toast-container > .toast-error,
#toast-container > .toast-info,
#toast-container > .toast-warning,
.dark #toast-container > .toast-success,
.dark #toast-container > .toast-error,
.dark #toast-container > .toast-info,
.dark #toast-container > .toast-warning,
body.dark #toast-container > .toast-success,
body.dark #toast-container > .toast-error,
body.dark #toast-container > .toast-info,
body.dark #toast-container > .toast-warning {
    background-image: none !important;
    padding-left: 1.25rem;
}

/* Ensure Font Awesome icons from toastr are hidden (toastr may inject these) */
#toast-container .toast-success .toast-icon,
#toast-container .toast-error .toast-icon,
#toast-container .toast-info .toast-icon,
#toast-container .toast-warning .toast-icon,
#toast-container > div::before {
    display: none !important;
}

/* Custom icon styling using ::before on message */
#toast-container > .toast-success .toast-message::before {
    content: "✓ ";
    color: #16a34a;
    font-weight: 600;
    font-size: 1.2em;
    margin-right: 0.5rem;
}

.dark #toast-container > .toast-success .toast-message::before {
    color: #22c55e;
}

#toast-container > .toast-error .toast-message::before {
    content: "✕ ";
    color: #dc2626;
    font-weight: 600;
    font-size: 1.2em;
    margin-right: 0.5rem;
}

.dark #toast-container > .toast-error .toast-message::before {
    color: #ef4444;
}

#toast-container > .toast-info .toast-message::before {
    content: "ⓘ ";
    color: #2563eb;
    font-weight: 600;
    font-size: 1.2em;
    margin-right: 0.5rem;
}

.dark #toast-container > .toast-info .toast-message::before {
    color: #3b82f6;
}

#toast-container > .toast-warning .toast-message::before {
    content: "⚠ ";
    color: #d97706;
    font-weight: 600;
    font-size: 1.2em;
    margin-right: 0.5rem;
}

.dark #toast-container > .toast-warning .toast-message::before {
    color: #f59e0b;
}

/* Close button styling */
.toast-close-button {
    color: hsl(var(--muted-foreground)) !important;
    opacity: 1 !important;
}

.toast-close-button:hover {
    color: hsl(var(--foreground)) !important;
}

/* Hide progress bar */
#toast-container .toast-progress {
    display: none;
}

/* Position adjustment */
.toast-top-center {
    margin-top: 15px;
}