/* =========================================================
   Cyberpunk Theme
   ========================================================= */
[data-theme="cyberpunk"] {
    --bg: #050508;
    --bg-rgb: 5, 5, 8;
    --bg-2: #0a0a12;
    --bg-3: #0f0f1a;
    
    --card: rgba(10, 10, 20, 0.75);
    --card-hover: rgba(20, 20, 35, 0.85);
    --border: rgba(0, 240, 255, 0.2);

    --text: #e0f0ff;
    --muted: #8a9bb5;
    --dim: #4a5a6a;

    --primary: #00f0ff;
    --primary-rgb: 0, 240, 255;
    --primary-dark: #0088aa;
    --primary-light: #66ffff;

    --accent: #ff00aa;
    --accent-rgb: 255, 0, 170;
    --accent-light: #ff66cc;

    --secondary: #00ff88;
    --secondary-rgb: 0, 255, 136;
    --tertiary: #ffcc00;
    --tertiary-rgb: 255, 204, 0;

    --grad-primary: linear-gradient(135deg, #00f0ff, #0088aa);
    --grad-accent: linear-gradient(135deg, #00f0ff, #ff00aa);
    --grad-text: linear-gradient(135deg, #00f0ff, #ff00aa 50%, #00ff88);
    --grad-mixed: linear-gradient(135deg, #00f0ff, #ff00aa 60%, #00ff88);

    --glow-accent: 0 0 30px rgba(0, 240, 255, 0.4);
    --glow-primary: 0 0 30px rgba(255, 0, 170, 0.4);

    --nav-tools-text: #050508;
    --btn-text: #050508;
}

[data-theme="cyberpunk"] body {
    background: 
        radial-gradient(ellipse at 10% 20%, rgba(0, 240, 255, 0.05) 0%, transparent 50%),
        radial-gradient(ellipse at 90% 80%, rgba(255, 0, 170, 0.05) 0%, transparent 50%),
        var(--bg);
}

/* افکت شیشه‌ای و نئون برای کارت‌ها */
[data-theme="cyberpunk"] .card,
[data-theme="cyberpunk"] .about-card-inner,
[data-theme="cyberpunk"] .admin-panel,
[data-theme="cyberpunk"] .tbox {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 240, 255, 0.15);
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.05), inset 0 0 20px rgba(0, 240, 255, 0.03);
}

[data-theme="cyberpunk"] .card:hover {
    border-color: rgba(255, 0, 170, 0.4);
    box-shadow: 0 0 30px rgba(255, 0, 170, 0.15), inset 0 0 30px rgba(0, 240, 255, 0.05);
}

[data-theme="cyberpunk"] .btn-primary {
    background: linear-gradient(135deg, #00f0ff, #ff00aa);
    color: #000;
    font-weight: 800;
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.4), 0 0 40px rgba(255, 0, 170, 0.2);
}
[data-theme="cyberpunk"] .btn-primary:hover {
    box-shadow: 0 0 30px rgba(0, 240, 255, 0.6), 0 0 60px rgba(255, 0, 170, 0.4);
    transform: translateY(-2px);
}

[data-theme="cyberpunk"] .btn-ghost {
    border-color: rgba(0, 240, 255, 0.4);
    color: #00f0ff;
}
[data-theme="cyberpunk"] .btn-ghost:hover {
    background: rgba(0, 240, 255, 0.1);
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.2);
}

[data-theme="cyberpunk"] .header,
[data-theme="cyberpunk"] .footer {
    background: rgba(5, 5, 8, 0.85);
    border-color: rgba(0, 240, 255, 0.1);
}

[data-theme="cyberpunk"] .logo-icon {
    background: linear-gradient(135deg, #00f0ff, #ff00aa);
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.5);
}
[data-theme="cyberpunk"] .logo-text {
    background: linear-gradient(135deg, #00f0ff, #ff00aa);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

[data-theme="cyberpunk"] .gradient-text,
[data-theme="cyberpunk"] .section-title:not(.right):not(.center),
[data-theme="cyberpunk"] .page-title {
    background: var(--grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 15px rgba(0, 240, 255, 0.3));
}

[data-theme="cyberpunk"] .theme-btn[data-theme-value="cyberpunk"] {
    background: linear-gradient(135deg, #00f0ff, #ff00aa);
    border-color: #00f0ff;
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.6);
}