/* ═══════════════════════════════════════════════════════
   AliCanDoIt — Planet Fitness Graffiti Neon Blacklight
   Urban gym walls · UV glow · Street art energy
   ═══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&family=Russo+One&family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root {
    --bg-primary: #0a0a0a;
    --bg-secondary: #0e0e12;
    --bg-card: rgba(18, 14, 28, 0.85);
    --bg-card-hover: rgba(28, 20, 45, 0.9);
    --bg-input: rgba(20, 16, 32, 0.9);
    --border: rgba(138, 43, 226, 0.2);
    --border-focus: #bf00ff;
    --text-primary: #f0e6ff;
    --text-secondary: #b8a0d8;
    --text-muted: #6a5580;
    --neon-purple: #bf00ff;
    --neon-pink: #ff00aa;
    --neon-blue: #00d4ff;
    --neon-yellow: #ffe600;
    --neon-green: #39ff14;
    --neon-orange: #ff6600;
    --glow-purple: 0 0 10px #bf00ff, 0 0 20px #bf00ff, 0 0 40px #bf00ff;
    --glow-pink: 0 0 10px #ff00aa, 0 0 20px #ff00aa, 0 0 40px #ff00aa;
    --glow-blue: 0 0 10px #00d4ff, 0 0 20px #00d4ff, 0 0 40px #00d4ff;
    --glow-yellow: 0 0 10px #ffe600, 0 0 20px #ffe600, 0 0 30px #ffe600;
    --glow-green: 0 0 10px #39ff14, 0 0 20px #39ff14, 0 0 30px #39ff14;
    --gradient-neon: linear-gradient(135deg, #bf00ff, #ff00aa, #00d4ff);
    --gradient-fire: linear-gradient(135deg, #ff6600, #ff00aa);
    --gradient-ice: linear-gradient(135deg, #00d4ff, #bf00ff);
    --font-graffiti: 'Permanent Marker', cursive;
    --font-display: 'Russo One', sans-serif;
    --font-body: 'Inter', -apple-system, sans-serif;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --sidebar-width: 260px;
    --topbar-height: 64px;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
    font-family: var(--font-body);
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--neon-blue); text-decoration: none; }

/* ══════════════════════════════════════════
   BLACKLIGHT BACKGROUND EFFECTS
   ══════════════════════════════════════════ */

.bg-grid {
    position: fixed; inset: 0; z-index: 0;
    background-image:
        linear-gradient(rgba(138,43,226,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(138,43,226,0.04) 1px, transparent 1px);
    background-size: 50px 50px;
}

/* Graffiti splatter texture overlay */
.bg-grid::after {
    content: '';
    position: fixed; inset: 0;
    background:
        radial-gradient(ellipse 80px 60px at 15% 25%, rgba(191,0,255,0.06), transparent),
        radial-gradient(ellipse 120px 80px at 75% 15%, rgba(255,0,170,0.05), transparent),
        radial-gradient(ellipse 60px 90px at 85% 70%, rgba(0,212,255,0.05), transparent),
        radial-gradient(ellipse 100px 50px at 25% 80%, rgba(57,255,20,0.04), transparent),
        radial-gradient(ellipse 70px 70px at 50% 50%, rgba(255,230,0,0.03), transparent);
    pointer-events: none;
}

.bg-glow {
    position: fixed; border-radius: 50%; z-index: 0; opacity: 0.5;
    animation: floatGlow 15s ease-in-out infinite;
    filter: blur(100px);
}
.bg-glow-1 { width: 500px; height: 500px; background: rgba(191,0,255,0.12); top: -150px; right: -150px; }
.bg-glow-2 { width: 400px; height: 400px; background: rgba(255,0,170,0.08); bottom: -100px; left: -100px; animation-delay: -5s; }
.bg-glow-3 { width: 300px; height: 300px; background: rgba(0,212,255,0.07); top: 40%; left: 30%; animation-delay: -10s; }

@keyframes floatGlow {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(40px, -30px) scale(1.15); }
    66% { transform: translate(-30px, 30px) scale(0.85); }
}


/* ══════════════════════════════════════════
   GRAFFITI WALL ART — Dense Urban Layers
   Hosier Lane / NYC subway inspired
   Uses only existing HTML elements + pseudo-elements
   ══════════════════════════════════════════ */

/* ── Dense Graffiti Spray Paint Texture ──
   Layered on .bg-grid::before (element exists in both pages) */
.bg-grid::before {
    content: '';
    position: fixed; inset: 0;
    background:
        /* === HOT PINK cluster — upper left === */
        radial-gradient(ellipse 180px 120px at 8% 15%, rgba(255,0,170,0.07), transparent 70%),
        radial-gradient(ellipse 90px 70px at 12% 20%, rgba(255,0,170,0.05), transparent 60%),
        radial-gradient(circle 45px at 6% 28%, rgba(255,0,170,0.04), transparent),
        /* === ELECTRIC BLUE wash — upper right === */
        radial-gradient(ellipse 250px 150px at 82% 8%, rgba(0,212,255,0.06), transparent 65%),
        radial-gradient(ellipse 100px 80px at 78% 12%, rgba(0,212,255,0.04), transparent 55%),
        radial-gradient(circle 55px at 88% 5%, rgba(0,212,255,0.035), transparent),
        /* === NEON GREEN burst — center left === */
        radial-gradient(ellipse 140px 200px at 20% 55%, rgba(57,255,20,0.05), transparent 60%),
        radial-gradient(circle 60px at 25% 50%, rgba(57,255,20,0.04), transparent),
        radial-gradient(circle 30px at 18% 62%, rgba(57,255,20,0.03), transparent),
        /* === BRIGHT YELLOW tag area — lower center === */
        radial-gradient(ellipse 200px 100px at 50% 85%, rgba(255,230,0,0.05), transparent 65%),
        radial-gradient(ellipse 80px 60px at 55% 82%, rgba(255,230,0,0.04), transparent 55%),
        radial-gradient(circle 40px at 45% 90%, rgba(255,230,0,0.03), transparent),
        /* === ORANGE blast — right side === */
        radial-gradient(ellipse 160px 220px at 90% 45%, rgba(255,102,0,0.06), transparent 60%),
        radial-gradient(circle 70px at 88% 50%, rgba(255,102,0,0.04), transparent),
        /* === RED throw-up — lower left === */
        radial-gradient(ellipse 190px 130px at 15% 80%, rgba(255,34,0,0.05), transparent 65%),
        radial-gradient(circle 50px at 18% 75%, rgba(255,34,0,0.03), transparent),
        /* === PURPLE wildstyle — mid-right === */
        radial-gradient(ellipse 170px 110px at 70% 60%, rgba(191,0,255,0.06), transparent 60%),
        radial-gradient(ellipse 80px 120px at 65% 65%, rgba(191,0,255,0.04), transparent 55%),
        /* === Secondary scattered splashes === */
        radial-gradient(circle 100px at 40% 30%, rgba(255,0,170,0.04), transparent),
        radial-gradient(circle 40px at 35% 35%, rgba(255,0,170,0.03), transparent),
        radial-gradient(ellipse 60px 180px at 50% 40%, rgba(0,212,255,0.04), transparent 70%),
        radial-gradient(circle 35px at 75% 30%, rgba(57,255,20,0.035), transparent),
        radial-gradient(circle 25px at 30% 70%, rgba(57,255,20,0.03), transparent),
        radial-gradient(circle 45px at 60% 15%, rgba(255,230,0,0.035), transparent),
        radial-gradient(circle 30px at 85% 85%, rgba(255,230,0,0.03), transparent),
        /* === Chaotic overlap zone — center canvas === */
        radial-gradient(ellipse 300px 200px at 50% 50%, rgba(191,0,255,0.03), transparent 70%),
        radial-gradient(ellipse 200px 300px at 45% 55%, rgba(255,0,170,0.025), transparent 65%);
    pointer-events: none;
    z-index: 0;
}

/* ── SVG Splatter + Graffiti Text Ghosts ──
   Layered on body::before (applies to both pages) */
body::before {
    content: '';
    position: fixed; inset: 0; z-index: 0;
    pointer-events: none;
    background:
        /* Splatter shape 1 — pink ellipses */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cellipse cx='100' cy='100' rx='80' ry='60' fill='%23ff00aa' opacity='0.04' transform='rotate(15 100 100)'/%3E%3Cellipse cx='70' cy='130' rx='30' ry='20' fill='%23ff00aa' opacity='0.03' transform='rotate(-25 70 130)'/%3E%3Ccircle cx='150' cy='60' r='15' fill='%23ff00aa' opacity='0.035'/%3E%3Ccircle cx='40' cy='50' r='8' fill='%23ff00aa' opacity='0.04'/%3E%3Ccircle cx='160' cy='150' r='10' fill='%23ff00aa' opacity='0.03'/%3E%3C/svg%3E") 0% 0% / 400px 400px repeat,
        /* Splatter shape 2 — blue ellipses */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cellipse cx='90' cy='110' rx='70' ry='50' fill='%2300d4ff' opacity='0.035' transform='rotate(-20 90 110)'/%3E%3Cellipse cx='140' cy='60' rx='40' ry='25' fill='%2300d4ff' opacity='0.03' transform='rotate(30 140 60)'/%3E%3Ccircle cx='30' cy='170' r='18' fill='%2300d4ff' opacity='0.025'/%3E%3Ccircle cx='170' cy='40' r='12' fill='%2300d4ff' opacity='0.03'/%3E%3C/svg%3E") 200px 150px / 350px 350px repeat,
        /* Splatter shape 3 — green/yellow strokes */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Cpath d='M50 150 Q80 50 150 100 T250 80' stroke='%2339ff14' stroke-width='8' fill='none' opacity='0.03' stroke-linecap='round'/%3E%3Cpath d='M30 200 Q100 180 120 250 T220 200' stroke='%23ffe600' stroke-width='6' fill='none' opacity='0.025' stroke-linecap='round'/%3E%3Ccircle cx='200' cy='50' r='20' fill='%2339ff14' opacity='0.02'/%3E%3C/svg%3E") 100px 250px / 500px 500px repeat,
        /* Splatter shape 4 — orange/red strokes */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 250 250'%3E%3Cpath d='M20 125 Q60 20 125 80 T230 50' stroke='%23ff6600' stroke-width='10' fill='none' opacity='0.03' stroke-linecap='round'/%3E%3Cellipse cx='180' cy='180' rx='50' ry='35' fill='%23ff2200' opacity='0.025' transform='rotate(40 180 180)'/%3E%3Ccircle cx='50' cy='200' r='25' fill='%23ff6600' opacity='0.02'/%3E%3C/svg%3E") 300px 50px / 450px 450px repeat,
        /* Ghost text — PUSH / LIFT */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Ctext x='20' y='80' font-family='Impact,sans-serif' font-size='60' fill='%23bf00ff' opacity='0.02' transform='rotate(-12 20 80)'%3EPUSH%3C/text%3E%3Ctext x='60' y='160' font-family='Impact,sans-serif' font-size='40' fill='%23ff00aa' opacity='0.018' transform='rotate(8 60 160)'%3ELIFT%3C/text%3E%3C/svg%3E") 50px 100px / 600px 600px repeat,
        /* Ghost text — GRIND / GAINS */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Ctext x='10' y='90' font-family='Impact,sans-serif' font-size='55' fill='%2300d4ff' opacity='0.02' transform='rotate(6 10 90)'%3EGRIND%3C/text%3E%3Ctext x='40' y='170' font-family='Impact,sans-serif' font-size='35' fill='%2339ff14' opacity='0.015' transform='rotate(-10 40 170)'%3EGAINS%3C/text%3E%3C/svg%3E") 350px 300px / 550px 550px repeat;
    animation: graffitiShimmer 30s ease-in-out infinite;
}

/* ── Paint Drip Streaks (Primary) ──
   Layered on body::after */
body::after {
    content: '';
    position: fixed; inset: 0; z-index: 0;
    pointer-events: none;
    background:
        /* Hot pink drips */
        linear-gradient(180deg, rgba(255,0,170,0.06) 0%, rgba(255,0,170,0.03) 15%, transparent 40%) 8% 0 / 3px 100% no-repeat,
        linear-gradient(180deg, rgba(255,0,170,0.05) 0%, rgba(255,0,170,0.02) 25%, transparent 55%) 12% 0 / 2px 100% no-repeat,
        linear-gradient(180deg, transparent 5%, rgba(255,0,170,0.04) 8%, rgba(255,0,170,0.02) 30%, transparent 50%) 10% 0 / 4px 100% no-repeat,
        /* Electric blue drips */
        linear-gradient(180deg, rgba(0,212,255,0.06) 0%, rgba(0,212,255,0.03) 20%, transparent 45%) 25% 0 / 2px 100% no-repeat,
        linear-gradient(180deg, transparent 10%, rgba(0,212,255,0.05) 12%, rgba(0,212,255,0.02) 35%, transparent 55%) 28% 0 / 3px 100% no-repeat,
        /* Neon green drips */
        linear-gradient(180deg, rgba(57,255,20,0.05) 0%, rgba(57,255,20,0.02) 18%, transparent 38%) 42% 0 / 2px 100% no-repeat,
        linear-gradient(180deg, transparent 15%, rgba(57,255,20,0.04) 18%, rgba(57,255,20,0.015) 40%, transparent 60%) 45% 0 / 3px 100% no-repeat,
        /* Orange drips */
        linear-gradient(180deg, rgba(255,102,0,0.06) 0%, rgba(255,102,0,0.025) 22%, transparent 42%) 60% 0 / 3px 100% no-repeat,
        linear-gradient(180deg, transparent 8%, rgba(255,102,0,0.05) 10%, rgba(255,102,0,0.02) 32%, transparent 50%) 63% 0 / 2px 100% no-repeat,
        /* Purple drips */
        linear-gradient(180deg, rgba(191,0,255,0.06) 0%, rgba(191,0,255,0.03) 16%, transparent 36%) 78% 0 / 2px 100% no-repeat,
        linear-gradient(180deg, transparent 5%, rgba(191,0,255,0.05) 8%, rgba(191,0,255,0.02) 28%, transparent 48%) 80% 0 / 4px 100% no-repeat,
        linear-gradient(180deg, rgba(191,0,255,0.04) 0%, rgba(191,0,255,0.02) 20%, transparent 40%) 82% 0 / 2px 100% no-repeat,
        /* Yellow drips */
        linear-gradient(180deg, rgba(255,230,0,0.05) 0%, rgba(255,230,0,0.02) 14%, transparent 34%) 93% 0 / 3px 100% no-repeat,
        linear-gradient(180deg, transparent 12%, rgba(255,230,0,0.04) 15%, rgba(255,230,0,0.015) 35%, transparent 55%) 95% 0 / 2px 100% no-repeat,
        /* Red drips */
        linear-gradient(180deg, rgba(255,34,0,0.05) 0%, rgba(255,34,0,0.025) 18%, transparent 40%) 52% 0 / 2px 100% no-repeat,
        linear-gradient(180deg, transparent 20%, rgba(255,34,0,0.04) 22%, rgba(255,34,0,0.015) 42%, transparent 60%) 55% 0 / 3px 100% no-repeat;
}

/* ── Additional Drip Streaks (Secondary) ──
   Layered on .neon-quotes-wall::before */
.neon-quotes-wall::before {
    content: '';
    position: fixed; inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        linear-gradient(180deg, rgba(255,0,170,0.04) 0%, transparent 30%) 18% 0 / 2px 100% no-repeat,
        linear-gradient(180deg, transparent 25%, rgba(0,212,255,0.04) 28%, transparent 50%) 35% 0 / 2px 100% no-repeat,
        linear-gradient(180deg, rgba(57,255,20,0.035) 0%, transparent 25%) 48% 0 / 2px 100% no-repeat,
        linear-gradient(180deg, transparent 30%, rgba(255,102,0,0.04) 33%, transparent 55%) 70% 0 / 3px 100% no-repeat,
        linear-gradient(180deg, rgba(191,0,255,0.04) 0%, transparent 28%) 88% 0 / 2px 100% no-repeat,
        linear-gradient(180deg, transparent 18%, rgba(255,230,0,0.035) 20%, transparent 45%) 5% 0 / 2px 100% no-repeat,
        linear-gradient(180deg, rgba(255,34,0,0.035) 0%, transparent 22%) 38% 0 / 2px 100% no-repeat;
}

/* ── Conic Color Wash (behind quotes wall) ──
   Layered on .neon-quotes-wall::after */
.neon-quotes-wall::after {
    content: '';
    position: fixed; inset: -20%; z-index: 0;
    pointer-events: none;
    background: conic-gradient(
        from 0deg at 40% 45%,
        transparent 0deg,
        rgba(255,0,170,0.015) 15deg,
        transparent 30deg,
        rgba(0,212,255,0.012) 50deg,
        transparent 65deg,
        rgba(57,255,20,0.01) 85deg,
        transparent 100deg,
        rgba(255,230,0,0.015) 120deg,
        transparent 135deg,
        rgba(191,0,255,0.012) 155deg,
        transparent 170deg,
        rgba(255,102,0,0.01) 190deg,
        transparent 205deg,
        rgba(255,34,0,0.012) 225deg,
        transparent 240deg,
        rgba(0,212,255,0.015) 260deg,
        transparent 275deg,
        rgba(255,0,170,0.01) 295deg,
        transparent 310deg,
        rgba(57,255,20,0.012) 330deg,
        transparent 345deg
    );
    filter: blur(60px);
    animation: graffitiShimmer 25s ease-in-out infinite reverse;
}

/* ── Sunburst Rays (behind welcome banner) ── */
.welcome-banner::after {
    content: '';
    position: absolute; inset: -50%; z-index: 0;
    background: conic-gradient(
        from 0deg at 50% 60%,
        transparent 0deg,
        rgba(255,102,0,0.04) 8deg,
        transparent 16deg,
        rgba(255,230,0,0.035) 24deg,
        transparent 32deg,
        rgba(255,0,170,0.03) 40deg,
        transparent 48deg,
        rgba(0,212,255,0.035) 56deg,
        transparent 64deg,
        rgba(57,255,20,0.03) 72deg,
        transparent 80deg,
        rgba(191,0,255,0.04) 88deg,
        transparent 96deg,
        rgba(255,34,0,0.03) 104deg,
        transparent 112deg,
        rgba(255,230,0,0.035) 120deg,
        transparent 128deg,
        rgba(255,0,170,0.03) 136deg,
        transparent 144deg,
        rgba(0,212,255,0.04) 152deg,
        transparent 160deg,
        rgba(255,102,0,0.03) 168deg,
        transparent 176deg,
        rgba(57,255,20,0.035) 184deg,
        transparent 192deg,
        rgba(191,0,255,0.03) 200deg,
        transparent 208deg,
        rgba(255,230,0,0.04) 216deg,
        transparent 224deg,
        rgba(255,34,0,0.035) 232deg,
        transparent 240deg,
        rgba(0,212,255,0.03) 248deg,
        transparent 256deg,
        rgba(255,0,170,0.04) 264deg,
        transparent 272deg,
        rgba(255,102,0,0.035) 280deg,
        transparent 288deg,
        rgba(57,255,20,0.03) 296deg,
        transparent 304deg,
        rgba(191,0,255,0.035) 312deg,
        transparent 320deg,
        rgba(255,230,0,0.03) 328deg,
        transparent 336deg,
        rgba(255,34,0,0.04) 344deg,
        transparent 352deg
    );
    animation: sunburstRotate 120s linear infinite;
    pointer-events: none;
}
@keyframes sunburstRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
/* Ensure welcome banner children sit above the sunburst */
.welcome-text, .welcome-graphic { position: relative; z-index: 1; }

/* ── Enhanced Multi-Color Background Glows ── */
.bg-glow-1 {
    background: radial-gradient(circle, rgba(255,0,170,0.12) 0%, rgba(191,0,255,0.06) 50%, transparent 70%) !important;
}
.bg-glow-2 {
    background: radial-gradient(circle, rgba(0,212,255,0.09) 0%, rgba(57,255,20,0.04) 50%, transparent 70%) !important;
}
.bg-glow-3 {
    background: radial-gradient(circle, rgba(255,102,0,0.08) 0%, rgba(255,230,0,0.04) 50%, transparent 70%) !important;
}

/* ── Brick/Concrete Wall Texture on Auth Brand Panel ── */
.auth-brand {
    background:
        repeating-linear-gradient(0deg, transparent, transparent 28px, rgba(191,0,255,0.015) 28px, rgba(191,0,255,0.015) 29px),
        repeating-linear-gradient(90deg, transparent, transparent 58px, rgba(191,0,255,0.01) 58px, rgba(191,0,255,0.01) 59px),
        radial-gradient(ellipse 200px 150px at 30% 60%, rgba(255,0,170,0.04), transparent 70%),
        radial-gradient(ellipse 150px 200px at 70% 30%, rgba(0,212,255,0.035), transparent 65%),
        radial-gradient(ellipse 180px 100px at 50% 80%, rgba(57,255,20,0.03), transparent 60%),
        linear-gradient(160deg, rgba(14,10,24,0.95), rgba(10,8,18,0.98)) !important;
}

/* ── Sidebar Graffiti Texture ── */
.sidebar {
    background:
        radial-gradient(ellipse 80px 120px at 50% 20%, rgba(191,0,255,0.03), transparent 70%),
        radial-gradient(ellipse 60px 80px at 30% 60%, rgba(255,0,170,0.025), transparent 65%),
        radial-gradient(ellipse 70px 50px at 70% 80%, rgba(0,212,255,0.02), transparent 60%),
        linear-gradient(180deg, rgba(14,10,24,0.98), rgba(10,8,18,0.99)),
        repeating-linear-gradient(0deg, transparent, transparent 40px, rgba(191,0,255,0.015) 40px, rgba(191,0,255,0.015) 41px) !important;
}

/* ── Conic Gradient Accent behind Stats Grid ── */
.stats-grid {
    position: relative;
}
.stats-grid::before {
    content: '';
    position: absolute;
    top: -30%; left: -20%; right: -20%; bottom: -30%;
    background: conic-gradient(
        from 45deg at 50% 50%,
        transparent 0deg,
        rgba(255,0,170,0.02) 30deg,
        transparent 60deg,
        rgba(0,212,255,0.02) 90deg,
        transparent 120deg,
        rgba(57,255,20,0.015) 150deg,
        transparent 180deg,
        rgba(255,230,0,0.02) 210deg,
        transparent 240deg,
        rgba(191,0,255,0.02) 270deg,
        transparent 300deg,
        rgba(255,102,0,0.015) 330deg,
        transparent 360deg
    );
    pointer-events: none;
    z-index: -1;
    filter: blur(40px);
}

/* ── Card Hover Graffiti Glow Effects ── */
.stat-card:hover {
    box-shadow:
        0 0 15px rgba(191,0,255,0.12),
        0 0 30px rgba(255,0,170,0.06),
        inset 0 0 15px rgba(191,0,255,0.03) !important;
}
.goal-card:hover {
    box-shadow:
        0 0 12px rgba(0,212,255,0.1),
        0 0 25px rgba(57,255,20,0.05),
        inset 0 0 10px rgba(0,212,255,0.02) !important;
}
.workout-card:hover {
    box-shadow:
        0 0 12px rgba(255,102,0,0.1),
        0 0 25px rgba(255,230,0,0.05),
        inset 0 0 10px rgba(255,102,0,0.02) !important;
}
.action-card:hover {
    box-shadow:
        0 0 20px rgba(191,0,255,0.15),
        0 0 40px rgba(255,0,170,0.08),
        inset 0 0 15px rgba(191,0,255,0.04) !important;
}

/* ── Auth Container Enhanced Graffiti Border Glow ── */
.auth-container {
    box-shadow:
        0 0 60px rgba(191,0,255,0.1),
        0 0 120px rgba(255,0,170,0.04),
        0 8px 40px rgba(0,0,0,0.5),
        inset 0 0 30px rgba(191,0,255,0.02) !important;
}

/* ── Graffiti Shimmer Animation ── */
@keyframes graffitiShimmer {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.85; }
}

/* ══════════════════════════════════════════
   NEON QUOTE WALL — Floating blacklight quotes
   ══════════════════════════════════════════ */

.neon-quotes-wall {
    position: fixed; inset: 0; z-index: 0;
    pointer-events: none; overflow: hidden;
}
.neon-quote {
    position: absolute;
    font-family: var(--font-graffiti);
    font-size: clamp(0.7rem, 1.2vw, 1.1rem);
    opacity: 0;
    animation: quoteGlow 20s ease-in-out infinite;
    white-space: nowrap;
    letter-spacing: 1px;
}
.neon-quote.c1 { color: var(--neon-purple); text-shadow: var(--glow-purple); }
.neon-quote.c2 { color: var(--neon-pink); text-shadow: var(--glow-pink); }
.neon-quote.c3 { color: var(--neon-blue); text-shadow: var(--glow-blue); }
.neon-quote.c4 { color: var(--neon-yellow); text-shadow: var(--glow-yellow); }
.neon-quote.c5 { color: var(--neon-green); text-shadow: var(--glow-green); }

@keyframes quoteGlow {
    0%, 100% { opacity: 0; }
    10%, 90% { opacity: 0.15; }
    40%, 60% { opacity: 0.3; }
}

/* ══════════════════════════════════════════
   AUTH PAGE
   ══════════════════════════════════════════ */

.auth-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    position: relative;
}

.auth-container {
    display: flex;
    width: 980px;
    max-width: 95vw;
    min-height: 620px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: 0 0 60px rgba(191,0,255,0.1), 0 8px 40px rgba(0,0,0,0.5);
    position: relative;
    z-index: 1;
    backdrop-filter: blur(10px);
}

/* Brand Panel — Gym Wall */
.auth-brand {
    flex: 1;
    background:
        linear-gradient(160deg, rgba(14,10,24,0.95), rgba(10,8,18,0.98)),
        repeating-linear-gradient(0deg, transparent, transparent 30px, rgba(191,0,255,0.02) 30px, rgba(191,0,255,0.02) 31px),
        repeating-linear-gradient(90deg, transparent, transparent 30px, rgba(191,0,255,0.02) 30px, rgba(191,0,255,0.02) 31px);
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-right: 1px solid var(--border);
    position: relative;
    overflow: hidden;
}

/* UV Glow stripe on gym wall */
.auth-brand::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 3px;
    background: var(--gradient-neon);
    box-shadow: 0 0 20px rgba(191,0,255,0.5), 0 0 40px rgba(255,0,170,0.3);
}
.auth-brand::after {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse at 20% 80%, rgba(191,0,255,0.06), transparent 60%),
        radial-gradient(ellipse at 80% 20%, rgba(255,0,170,0.04), transparent 50%);
}

.brand-content { position: relative; z-index: 1; }
.brand-logo { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 2rem; }
.logo-icon {
    width: 48px; height: 48px; color: var(--neon-purple);
    background: rgba(191,0,255,0.1);
    border: 1px solid rgba(191,0,255,0.3);
    border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    padding: 8px;
    box-shadow: 0 0 15px rgba(191,0,255,0.2);
}
.brand-name {
    font-family: var(--font-graffiti);
    font-size: 1.8rem;
    color: var(--text-primary);
    letter-spacing: 1px;
}
.brand-name span {
    background: var(--gradient-neon);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 8px rgba(191,0,255,0.4));
}
.brand-tagline {
    font-family: var(--font-graffiti);
    font-size: 1rem;
    color: var(--neon-pink);
    text-shadow: 0 0 10px rgba(255,0,170,0.3);
    margin-bottom: 2.5rem;
    line-height: 1.6;
}
.brand-features { display: flex; flex-direction: column; gap: 1.25rem; }
.feature {
    display: flex; gap: 1rem; align-items: flex-start;
    padding: 0.75rem; border-radius: var(--radius-md);
    transition: background 0.2s;
    border-left: 2px solid transparent;
}
.feature:hover {
    background: rgba(191,0,255,0.05);
    border-left-color: var(--neon-purple);
}
.feature-icon { font-size: 1.5rem; margin-top: 2px; filter: saturate(2); }
.feature h3 {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 400;
    margin-bottom: 2px;
    color: var(--text-primary);
}
.feature p { font-size: 0.78rem; color: var(--text-muted); }
.brand-footer { position: relative; z-index: 1; }
.brand-footer p { font-size: 0.7rem; color: var(--text-muted); font-family: var(--font-display); letter-spacing: 1px; }

/* Auth Forms Panel */
.auth-forms {
    flex: 1;
    padding: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.auth-forms-inner { width: 100%; max-width: 380px; }

/* Tabs — neon underline */
.auth-tabs {
    display: flex;
    position: relative;
    background: rgba(20,16,32,0.8);
    border: 1px solid rgba(191,0,255,0.15);
    border-radius: var(--radius-md);
    padding: 4px;
    margin-bottom: 2rem;
}
.auth-tab {
    flex: 1; padding: 0.6rem 1rem;
    border: none; background: none;
    color: var(--text-muted);
    font-size: 0.85rem; font-weight: 600;
    cursor: pointer; border-radius: var(--radius-sm);
    transition: color 0.3s, text-shadow 0.3s;
    z-index: 1; font-family: var(--font-display);
    letter-spacing: 0.5px;
}
.auth-tab.active {
    color: var(--neon-purple);
    text-shadow: 0 0 10px rgba(191,0,255,0.4);
}
.tab-indicator {
    position: absolute; top: 4px; left: 4px;
    width: calc(50% - 4px); height: calc(100% - 8px);
    background: rgba(191,0,255,0.08);
    border: 1px solid rgba(191,0,255,0.2);
    border-radius: var(--radius-sm);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 15px rgba(191,0,255,0.1);
}
.auth-tabs[data-active="register"] .tab-indicator { transform: translateX(100%); }

/* Forms */
.auth-form { display: none; }
.auth-form.active { display: block; animation: fadeSlide 0.3s ease; }
@keyframes fadeSlide {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.form-header { margin-bottom: 1.5rem; }
.form-header h2 {
    font-family: var(--font-graffiti);
    font-size: 1.6rem;
    margin-bottom: 0.25rem;
    background: var(--gradient-neon);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 6px rgba(191,0,255,0.3));
}
.form-header p { font-size: 0.85rem; color: var(--text-secondary); }
.form-group { margin-bottom: 1.25rem; }
.form-group label {
    display: block; font-size: 0.75rem; font-weight: 600;
    color: var(--text-secondary); margin-bottom: 0.4rem;
    text-transform: uppercase; letter-spacing: 1px;
    font-family: var(--font-display);
}
.input-wrapper { position: relative; display: flex; align-items: center; }
.input-icon {
    position: absolute; left: 12px;
    width: 18px; height: 18px;
    color: var(--text-muted);
    pointer-events: none; transition: color 0.2s;
}
.input-wrapper input {
    width: 100%;
    padding: 0.7rem 0.75rem 0.7rem 2.5rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.9rem; font-family: var(--font-body);
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
}
.input-wrapper input:focus {
    border-color: var(--neon-purple);
    box-shadow: 0 0 0 3px rgba(191,0,255,0.15), 0 0 15px rgba(191,0,255,0.1);
}
.input-wrapper input:focus ~ .input-icon { color: var(--neon-purple); }
.input-wrapper input::placeholder { color: var(--text-muted); }
.password-toggle {
    position: absolute; right: 10px;
    background: none; border: none;
    color: var(--text-muted); cursor: pointer;
    font-size: 1rem; padding: 4px;
}
.password-toggle:hover { color: var(--neon-pink); }

/* Password strength */
.password-strength { margin-top: 0.5rem; display: flex; align-items: center; gap: 0.5rem; }
.strength-bar { flex: 1; height: 3px; background: rgba(191,0,255,0.1); border-radius: 2px; overflow: hidden; }
.strength-fill { height: 100%; width: 0; border-radius: 2px; transition: width 0.3s, background 0.3s; }
.strength-label { font-size: 0.7rem; color: var(--text-muted); min-width: 50px; }

/* Form error */
.form-error {
    color: var(--neon-orange);
    font-size: 0.8rem; margin-bottom: 0.75rem;
    min-height: 1.2rem; display: flex; align-items: center; gap: 0.4rem;
    text-shadow: 0 0 8px rgba(255,102,0,0.3);
}
.form-error:not(:empty)::before { content: '\26A0'; }

/* Buttons — Neon glow */
.btn {
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    width: 100%; padding: 0.8rem 1.5rem;
    border: none; border-radius: var(--radius-sm);
    font-size: 0.9rem; font-weight: 700;
    font-family: var(--font-display);
    letter-spacing: 1px;
    cursor: pointer; transition: all 0.2s;
    position: relative; overflow: hidden;
    text-transform: uppercase;
}
.btn-primary {
    background: var(--gradient-neon);
    color: white;
    box-shadow: 0 0 20px rgba(191,0,255,0.3), 0 0 40px rgba(191,0,255,0.1);
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 30px rgba(191,0,255,0.5), 0 0 60px rgba(255,0,170,0.2);
}
.btn-primary:active { transform: translateY(0); }
.btn.loading .btn-text { visibility: hidden; }
.btn.loading .btn-loader { display: block; }
.btn-loader {
    display: none; position: absolute;
    width: 20px; height: 20px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ══════════════════════════════════════════
   DASHBOARD PAGE
   ══════════════════════════════════════════ */

.dashboard-page { display: flex; min-height: 100vh; }

/* Sidebar — Dark gym wall */
.sidebar {
    width: var(--sidebar-width);
    height: 100vh; position: fixed;
    left: 0; top: 0;
    background:
        linear-gradient(180deg, rgba(14,10,24,0.98), rgba(10,8,18,0.99)),
        repeating-linear-gradient(0deg, transparent, transparent 40px, rgba(191,0,255,0.015) 40px, rgba(191,0,255,0.015) 41px);
    border-right: 1px solid var(--border);
    display: flex; flex-direction: column;
    z-index: 100; transition: transform 0.3s;
}
/* Neon strip on sidebar */
.sidebar::after {
    content: ''; position: absolute;
    top: 0; right: 0; width: 2px; height: 100%;
    background: linear-gradient(180deg, var(--neon-purple), transparent 30%, transparent 70%, var(--neon-pink));
    box-shadow: 0 0 10px rgba(191,0,255,0.3);
}

.sidebar-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border);
}
.sidebar-logo { display: flex; align-items: center; gap: 0.65rem; }
.logo-icon-sm {
    width: 36px; height: 36px; color: var(--neon-purple);
    background: rgba(191,0,255,0.1);
    border: 1px solid rgba(191,0,255,0.3);
    border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    padding: 6px;
    box-shadow: 0 0 10px rgba(191,0,255,0.2);
}
.sidebar-brand {
    font-family: var(--font-graffiti);
    font-size: 1.15rem;
}
.sidebar-brand span {
    background: var(--gradient-neon);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 6px rgba(191,0,255,0.3));
}

/* Nav items */
.sidebar-nav {
    flex: 1; padding: 1rem 0.75rem;
    display: flex; flex-direction: column; gap: 4px;
}
.nav-item {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.65rem 1rem;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 0.88rem; font-weight: 500;
    transition: all 0.2s; text-decoration: none;
    font-family: var(--font-display);
    letter-spacing: 0.3px;
    border-left: 2px solid transparent;
}
.nav-item svg { width: 20px; height: 20px; flex-shrink: 0; }
.nav-item:hover {
    color: var(--text-primary);
    background: rgba(191,0,255,0.05);
    border-left-color: rgba(191,0,255,0.3);
}
.nav-item.active {
    color: var(--neon-purple);
    background: rgba(191,0,255,0.08);
    border-left-color: var(--neon-purple);
    text-shadow: 0 0 10px rgba(191,0,255,0.3);
}

.sidebar-footer {
    padding: 1rem 0.75rem;
    border-top: 1px solid var(--border);
}
.btn-logout {
    display: flex; align-items: center; gap: 0.75rem;
    width: 100%; padding: 0.65rem 1rem;
    background: none; border: none;
    color: var(--text-secondary);
    font-size: 0.88rem; font-weight: 500;
    font-family: var(--font-display);
    cursor: pointer; border-radius: var(--radius-sm);
    transition: all 0.2s;
}
.btn-logout svg { width: 20px; height: 20px; }
.btn-logout:hover {
    color: var(--neon-orange);
    background: rgba(255,102,0,0.08);
    text-shadow: 0 0 8px rgba(255,102,0,0.3);
}

/* Main content */
.main-content { flex: 1; margin-left: var(--sidebar-width); min-height: 100vh; }

/* Topbar */
.topbar {
    height: var(--topbar-height);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 2rem;
    border-bottom: 1px solid var(--border);
    background: rgba(10,10,15,0.85);
    backdrop-filter: blur(16px);
    position: sticky; top: 0; z-index: 50;
}
.topbar h1 {
    font-family: var(--font-display);
    font-size: 1.1rem; font-weight: 400;
    letter-spacing: 1px;
}
.user-info { display: flex; align-items: center; gap: 0.75rem; }
.user-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--gradient-neon);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.85rem; color: white;
    box-shadow: 0 0 12px rgba(191,0,255,0.3);
}
.user-name { font-size: 0.85rem; font-weight: 500; color: var(--text-secondary); }
.menu-toggle {
    display: none; background: none; border: none;
    color: var(--text-secondary); cursor: pointer; padding: 4px;
}
.menu-toggle svg { width: 24px; height: 24px; }

/* Dashboard content */
.dashboard-content { padding: 2rem; max-width: 1100px; }

/* Sections */
.section { display: none; animation: fadeSlide 0.3s ease; }
.section.active { display: block; }
.section-header {
    margin-bottom: 1.25rem;
    display: flex; align-items: center; justify-content: space-between;
}
.section-header h3 {
    font-family: var(--font-graffiti);
    font-size: 1.3rem;
    background: var(--gradient-neon);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 6px rgba(191,0,255,0.3));
}

/* Welcome banner — graffiti wall */
.welcome-banner {
    display: flex; align-items: center; justify-content: space-between;
    background:
        linear-gradient(135deg, rgba(191,0,255,0.08), rgba(255,0,170,0.04), rgba(0,212,255,0.03));
    border: 1px solid rgba(191,0,255,0.15);
    border-radius: var(--radius-lg);
    padding: 2rem;
    margin-bottom: 2rem;
    position: relative;
    overflow: hidden;
}
.welcome-banner::before {
    content: ''; position: absolute;
    top: 0; left: 0; right: 0; height: 2px;
    background: var(--gradient-neon);
    box-shadow: 0 0 15px rgba(191,0,255,0.4);
}
.welcome-text h2 {
    font-family: var(--font-graffiti);
    font-size: 1.4rem; margin-bottom: 0.4rem;
    color: var(--text-primary);
}
.welcome-text h2 span { color: var(--neon-yellow); text-shadow: 0 0 10px rgba(255,230,0,0.3); }
.welcome-text p { color: var(--text-secondary); font-size: 0.9rem; }

/* Neon motivational quote in banner */
.welcome-quote {
    font-family: var(--font-graffiti);
    font-size: 0.85rem;
    color: var(--neon-pink);
    text-shadow: var(--glow-pink);
    margin-top: 0.75rem;
    opacity: 0.8;
    font-style: italic;
}

.welcome-graphic svg { width: 100px; height: 100px; }

/* Stats grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem; margin-bottom: 2rem;
}
.stat-card {
    display: flex; align-items: center; gap: 1rem;
    padding: 1.25rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    transition: all 0.2s;
    backdrop-filter: blur(8px);
    position: relative;
    overflow: hidden;
}
.stat-card::after {
    content: ''; position: absolute;
    bottom: 0; left: 0; right: 0; height: 2px;
    background: var(--gradient-neon);
    opacity: 0; transition: opacity 0.3s;
}
.stat-card:hover { border-color: rgba(191,0,255,0.3); transform: translateY(-2px); }
.stat-card:hover::after { opacity: 1; }
.stat-icon {
    width: 48px; height: 48px;
    border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem; flex-shrink: 0;
}
.stat-info { display: flex; flex-direction: column; }
.stat-value {
    font-family: var(--font-display);
    font-size: 1.5rem; font-weight: 400; line-height: 1.2;
}
.stat-label { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }

/* Quick actions */
.quick-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.action-card {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 0.5rem; padding: 1.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer; font-family: var(--font-display);
    color: var(--text-secondary);
    font-size: 0.82rem; letter-spacing: 0.5px;
    transition: all 0.2s;
}
.action-card:hover {
    border-color: var(--neon-purple);
    color: var(--neon-purple);
    transform: translateY(-2px);
    box-shadow: 0 0 25px rgba(191,0,255,0.15);
    text-shadow: 0 0 8px rgba(191,0,255,0.3);
}
.action-icon { font-size: 1.5rem; filter: saturate(1.5); }

/* Empty state */
.empty-state {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 4rem 2rem; text-align: center;
    background: var(--bg-card);
    border: 1px dashed rgba(191,0,255,0.2);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(8px);
}
.empty-icon { font-size: 3rem; margin-bottom: 1rem; opacity: 0.5; }
.empty-state h3 {
    font-family: var(--font-display);
    font-size: 1.1rem; margin-bottom: 0.5rem;
}
.empty-state p { color: var(--text-muted); font-size: 0.9rem; max-width: 320px; }

/* Goal cards */
.goal-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    margin-bottom: 0.75rem;
    transition: all 0.2s;
    backdrop-filter: blur(8px);
}
.goal-card:hover { border-color: rgba(191,0,255,0.3); }
.goal-card-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 0.75rem;
}
.goal-card-title {
    font-family: var(--font-display);
    font-size: 0.95rem; letter-spacing: 0.3px;
}
.goal-card-category {
    font-size: 0.7rem; padding: 0.2rem 0.6rem;
    border-radius: 20px; font-family: var(--font-display);
    letter-spacing: 0.5px; text-transform: uppercase;
}
.goal-card-category.strength { background: rgba(255,0,170,0.15); color: var(--neon-pink); }
.goal-card-category.cardio { background: rgba(0,212,255,0.15); color: var(--neon-blue); }
.goal-card-category.flexibility { background: rgba(57,255,20,0.15); color: var(--neon-green); }
.goal-card-category.weight { background: rgba(255,230,0,0.15); color: var(--neon-yellow); }
.goal-card-category.nutrition { background: rgba(255,102,0,0.15); color: var(--neon-orange); }
.goal-card-category.custom { background: rgba(191,0,255,0.15); color: var(--neon-purple); }

/* Progress bar */
.progress-bar {
    width: 100%; height: 6px;
    background: rgba(191,0,255,0.1);
    border-radius: 3px; overflow: hidden;
    margin-top: 0.5rem;
}
.progress-fill {
    height: 100%; border-radius: 3px;
    background: var(--gradient-neon);
    box-shadow: 0 0 8px rgba(191,0,255,0.3);
    transition: width 0.5s ease;
}
.goal-card-meta {
    display: flex; justify-content: space-between;
    font-size: 0.75rem; color: var(--text-muted);
    margin-top: 0.4rem;
}

/* Workout cards */
.workout-card {
    display: flex; align-items: center; gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    margin-bottom: 0.5rem;
    transition: all 0.2s;
}
.workout-card:hover { border-color: rgba(191,0,255,0.3); }
.workout-type-icon {
    width: 40px; height: 40px;
    border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
}
.workout-info { flex: 1; }
.workout-info h4 {
    font-family: var(--font-display);
    font-size: 0.85rem; letter-spacing: 0.3px;
}
.workout-info p { font-size: 0.75rem; color: var(--text-muted); }
.workout-stats {
    display: flex; gap: 1rem;
    font-size: 0.78rem; color: var(--text-secondary);
}

/* Profile card */
.profile-card {
    display: flex; align-items: center; gap: 1.5rem;
    padding: 2rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(8px);
}
.profile-avatar-lg {
    width: 80px; height: 80px; border-radius: 50%;
    background: var(--gradient-neon);
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem; font-weight: 700; color: white; flex-shrink: 0;
    box-shadow: 0 0 20px rgba(191,0,255,0.3);
    font-family: var(--font-graffiti);
}
.profile-details h3 {
    font-family: var(--font-display);
    font-size: 1.2rem; margin-bottom: 2px;
}
.profile-details p { color: var(--text-secondary); font-size: 0.9rem; }
.profile-joined { color: var(--text-muted) !important; font-size: 0.8rem !important; margin-top: 4px; }

/* Profile form */
.profile-form {
    margin-top: 1.5rem;
    padding: 1.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
.profile-form h4 {
    font-family: var(--font-display);
    font-size: 0.95rem; margin-bottom: 1rem;
    color: var(--neon-purple);
    text-shadow: 0 0 8px rgba(191,0,255,0.2);
}
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem; margin-bottom: 1rem;
}
.form-row .form-group { margin-bottom: 0; }
.profile-form input, .profile-form select, .profile-form textarea {
    width: 100%; padding: 0.6rem 0.75rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.85rem; font-family: var(--font-body);
    outline: none; transition: border-color 0.2s;
}
.profile-form input:focus, .profile-form select:focus, .profile-form textarea:focus {
    border-color: var(--neon-purple);
    box-shadow: 0 0 0 2px rgba(191,0,255,0.1);
}
.profile-form textarea { resize: vertical; min-height: 60px; }
.btn-sm {
    padding: 0.5rem 1.5rem;
    font-size: 0.8rem;
    width: auto;
}

/* Modal / Overlay */
.modal-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(4px);
    z-index: 200;
    align-items: center; justify-content: center;
}
.modal-overlay.active { display: flex; }
.modal {
    width: 480px; max-width: 90vw;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 2rem;
    box-shadow: 0 0 60px rgba(191,0,255,0.15);
}
.modal h3 {
    font-family: var(--font-graffiti);
    font-size: 1.3rem; margin-bottom: 1.5rem;
    background: var(--gradient-neon);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.modal .form-group { margin-bottom: 1rem; }
.modal .form-group label {
    display: block; font-size: 0.75rem; font-weight: 600;
    color: var(--text-secondary); margin-bottom: 0.3rem;
    text-transform: uppercase; letter-spacing: 0.5px;
    font-family: var(--font-display);
}
.modal input, .modal select, .modal textarea {
    width: 100%; padding: 0.6rem 0.75rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.85rem; font-family: var(--font-body);
    outline: none;
}
.modal input:focus, .modal select:focus { border-color: var(--neon-purple); }
.modal-actions {
    display: flex; gap: 0.75rem; margin-top: 1.5rem;
}
.modal-actions .btn { flex: 1; }
.btn-ghost {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
}
.btn-ghost:hover {
    border-color: rgba(191,0,255,0.3);
    color: var(--text-primary);
}

/* Goal list */
.goals-list { display: flex; flex-direction: column; gap: 0.5rem; }
.goal-actions {
    display: flex; gap: 0.5rem;
}
.goal-actions button {
    background: none; border: none;
    color: var(--text-muted); cursor: pointer;
    font-size: 0.8rem; padding: 0.25rem 0.5rem;
    border-radius: 4px; transition: all 0.2s;
    font-family: var(--font-body);
}
.goal-actions button:hover { color: var(--neon-purple); background: rgba(191,0,255,0.1); }
.goal-actions button.delete:hover { color: var(--neon-orange); background: rgba(255,102,0,0.1); }

/* Toast notification */
.toast {
    position: fixed; bottom: 2rem; right: 2rem;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-md);
    font-family: var(--font-display);
    font-size: 0.85rem;
    z-index: 300;
    animation: toastIn 0.3s ease, toastOut 0.3s ease 2.7s;
    box-shadow: 0 0 30px rgba(0,0,0,0.5);
}
.toast.success {
    background: rgba(57,255,20,0.15);
    border: 1px solid rgba(57,255,20,0.3);
    color: var(--neon-green);
    text-shadow: 0 0 8px rgba(57,255,20,0.3);
}
.toast.error {
    background: rgba(255,102,0,0.15);
    border: 1px solid rgba(255,102,0,0.3);
    color: var(--neon-orange);
}
@keyframes toastIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toastOut { from { opacity: 1; } to { opacity: 0; transform: translateY(-10px); } }

/* Workout log section */
.workout-form-inline {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}
.workout-form-inline h4 {
    font-family: var(--font-display);
    font-size: 0.9rem;
    color: var(--neon-blue);
    text-shadow: 0 0 8px rgba(0,212,255,0.2);
    margin-bottom: 1rem;
}

/* ══════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════ */

@media (max-width: 768px) {
    .auth-container { flex-direction: column; }
    .auth-brand { display: none; }
    .auth-forms { padding: 2rem 1.5rem; }
    .sidebar { transform: translateX(-100%); }
    .sidebar.open { transform: translateX(0); }
    .main-content { margin-left: 0; }
    .menu-toggle { display: block; }
    .topbar { padding: 0 1rem; }
    .dashboard-content { padding: 1.25rem; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .quick-actions { grid-template-columns: 1fr; }
    .welcome-banner { flex-direction: column; text-align: center; gap: 1rem; }
    .form-row { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .stats-grid { grid-template-columns: 1fr; }
}