/* ============================================
   НАВЕСА - ENCHANTED FOREST CAMPFIRE NIGHT
   Premium Welcome & Login Experience
   ============================================ */

/* ===== BASE RESET FOR WELCOME ===== */
#app:has(#welcomeScreen) {
    height: 100vh;
    overflow: hidden;
}

/* ===== WELCOME SCREEN CONTAINER ===== */
#welcomeScreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: 'Cormorant Garamond', Georgia, serif;
}

/* ===== NOISE TEXTURE OVERLAY ===== */
#welcomeScreen::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.03;
    z-index: 1000;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}

/* ===== VIGNETTE ===== */
#welcomeScreen::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.4) 100%);
    z-index: 2;
    pointer-events: none;
}

/* ===== WELCOME BACKGROUND ===== */
.welcome-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to bottom,
        #0a0505 0%,
        #1a0a1a 20%,
        #2d1b00 60%,
        #1c0a00 100%
    );
    z-index: 0;
}

/* ===== CANVAS BACKGROUND ===== */
#welcomeParticleCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
}

/* ===== PARALLAX STARS ===== */
.welcome-stars-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.welcome-stars-1 {
    background-image:
        radial-gradient(2px 2px at 20px 30px, #fff, transparent),
        radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 90px 40px, #fff, transparent),
        radial-gradient(2px 2px at 160px 120px, rgba(255,255,255,0.9), transparent),
        radial-gradient(1px 1px at 230px 80px, #fff, transparent),
        radial-gradient(2px 2px at 300px 150px, rgba(255,255,255,0.7), transparent),
        radial-gradient(1px 1px at 370px 60px, #fff, transparent),
        radial-gradient(2px 2px at 100px 200px, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 180px 250px, #fff, transparent),
        radial-gradient(2px 2px at 260px 220px, rgba(255,255,255,0.9), transparent);
    background-size: 400px 300px;
    animation: welcomeTwinkle1 4s ease-in-out infinite;
}

.welcome-stars-2 {
    background-image:
        radial-gradient(1px 1px at 50px 100px, #fff, transparent),
        radial-gradient(2px 2px at 120px 50px, rgba(255,220,180,0.9), transparent),
        radial-gradient(1px 1px at 200px 180px, #fff, transparent),
        radial-gradient(1px 1px at 280px 90px, rgba(255,255,255,0.8), transparent),
        radial-gradient(2px 2px at 350px 200px, rgba(255,220,180,0.7), transparent),
        radial-gradient(1px 1px at 80px 280px, #fff, transparent);
    background-size: 450px 350px;
    animation: welcomeTwinkle2 5s ease-in-out infinite 1s;
}

.welcome-stars-3 {
    background-image:
        radial-gradient(3px 3px at 70px 40px, rgba(255,215,0,0.5), transparent),
        radial-gradient(3px 3px at 250px 120px, rgba(255,215,0,0.4), transparent),
        radial-gradient(4px 4px at 180px 280px, rgba(255,180,100,0.3), transparent);
    background-size: 350px 320px;
    animation: welcomeTwinkle3 3s ease-in-out infinite 0.5s;
}

@keyframes welcomeTwinkle1 {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

@keyframes welcomeTwinkle2 {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.85; }
}

@keyframes welcomeTwinkle3 {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.7; }
}

/* ===== MOON ===== */
.welcome-moon {
    position: fixed;
    top: 8%;
    right: 15%;
    width: 55px;
    height: 55px;
    background: radial-gradient(circle at 35% 35%,
        #fff8e7 0%,
        #ffecd2 40%,
        #ffd89b 70%,
        #e8a87c 100%
    );
    border-radius: 50%;
    box-shadow:
        0 0 20px rgba(255, 248, 231, 0.5),
        0 0 40px rgba(255, 216, 155, 0.4),
        0 0 80px rgba(255, 180, 100, 0.3),
        inset -8px -6px 15px rgba(200, 140, 80, 0.3);
    z-index: 2;
    animation: welcomeMoonGlow 6s ease-in-out infinite, welcomeMoonFloat 20s ease-in-out infinite;
}

.welcome-moon::before {
    content: '';
    position: absolute;
    top: 12px;
    left: 10px;
    width: 7px;
    height: 7px;
    background: rgba(180, 140, 100, 0.25);
    border-radius: 50%;
}

.welcome-moon::after {
    content: '';
    position: absolute;
    top: 24px;
    left: 26px;
    width: 10px;
    height: 8px;
    background: rgba(180, 140, 100, 0.2);
    border-radius: 50%;
}

@keyframes welcomeMoonGlow {
    0%, 100% {
        box-shadow:
            0 0 20px rgba(255, 248, 231, 0.5),
            0 0 40px rgba(255, 216, 155, 0.4),
            0 0 80px rgba(255, 180, 100, 0.3);
    }
    50% {
        box-shadow:
            0 0 30px rgba(255, 248, 231, 0.7),
            0 0 60px rgba(255, 216, 155, 0.5),
            0 0 100px rgba(255, 180, 100, 0.4);
    }
}

@keyframes welcomeMoonFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* ===== FOREST SILHOUETTE ===== */
.welcome-forest-silhouette {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 35%;
    z-index: 4;
    pointer-events: none;
}

.welcome-forest-layer-back {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 400' preserveAspectRatio='none'%3E%3Cpath fill='%230f1a14' d='M0,400 L0,280 Q30,240 60,280 L60,200 Q75,160 90,200 L90,250 Q120,200 150,250 L150,180 Q165,120 180,180 L180,220 Q200,180 220,220 L220,260 Q250,220 280,260 L280,150 Q295,80 310,150 L310,200 Q340,150 370,200 L370,240 Q390,200 410,240 L410,280 Q430,250 450,280 L450,170 Q465,100 480,170 L480,230 Q510,180 540,230 L540,190 Q555,140 570,190 L570,260 Q600,220 630,260 L630,140 Q645,60 660,140 L660,200 Q690,160 720,200 L720,250 Q750,200 780,250 L780,180 Q795,110 810,180 L810,240 Q840,200 870,240 L870,160 Q885,90 900,160 L900,220 Q930,170 960,220 L960,270 Q990,230 1020,270 L1020,190 Q1035,120 1050,190 L1050,240 Q1080,200 1110,240 L1110,280 Q1140,250 1170,280 L1170,200 Q1185,150 1200,200 L1200,400 Z'/%3E%3C/svg%3E") no-repeat bottom center;
    background-size: cover;
    opacity: 0.6;
}

.welcome-forest-layer-mid {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 85%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 350' preserveAspectRatio='none'%3E%3Cpath fill='%230a120d' d='M0,350 L0,300 Q20,270 40,300 L40,220 Q55,170 70,220 L70,260 Q100,210 130,260 L130,180 Q145,100 160,180 L160,230 Q180,190 200,230 L200,280 Q230,240 260,280 L260,160 Q275,70 290,160 L290,210 Q310,170 330,210 L330,250 Q360,200 390,250 L390,170 Q405,90 420,170 L420,220 Q450,180 480,220 L480,130 Q495,40 510,130 L510,190 Q540,150 570,190 L570,240 Q590,200 610,240 L610,150 Q625,60 640,150 L640,200 Q670,160 700,200 L700,260 Q730,210 760,260 L760,180 Q775,100 790,180 L790,230 Q820,180 850,230 L850,150 Q865,60 880,150 L880,200 Q900,160 920,200 L920,260 Q950,220 980,260 L980,170 Q995,80 1010,170 L1010,220 Q1040,180 1070,220 L1070,140 Q1085,50 1100,140 L1100,200 Q1130,160 1160,200 L1160,260 Q1180,230 1200,260 L1200,350 Z'/%3E%3C/svg%3E") no-repeat bottom center;
    background-size: cover;
    opacity: 0.8;
}

.welcome-forest-layer-front {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 300' preserveAspectRatio='none'%3E%3Cpath fill='%23050a07' d='M0,300 L0,280 Q30,250 60,280 L60,200 Q75,140 90,200 L90,240 Q120,200 150,240 L150,160 Q165,80 180,160 L180,210 Q200,170 220,210 L220,250 Q250,210 280,250 L280,140 Q295,50 310,140 L310,190 Q340,150 370,190 L370,230 Q400,190 430,230 L430,150 Q445,60 460,150 L460,200 Q490,160 520,200 L520,170 Q535,100 550,170 L550,220 Q580,180 610,220 L610,130 Q625,40 640,130 L640,180 Q670,140 700,180 L700,230 Q730,190 760,230 L760,160 Q775,70 790,160 L790,210 Q820,170 850,210 L850,140 Q865,50 880,140 L880,190 Q910,150 940,190 L940,240 Q970,200 1000,240 L1000,170 Q1015,80 1030,170 L1030,220 Q1060,180 1090,220 L1090,150 Q1105,60 1120,150 L1120,200 Q1150,160 1180,200 L1180,260 Q1190,240 1200,260 L1200,300 Z'/%3E%3C/svg%3E") no-repeat bottom center;
    background-size: cover;
}

/* ===== AMBIENT FIRE GLOW ===== */
.welcome-fire-ambient {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 400px;
    height: 25%;
    background: radial-gradient(ellipse at 50% 100%,
        rgba(255, 107, 53, 0.25) 0%,
        rgba(247, 127, 0, 0.15) 25%,
        rgba(214, 40, 40, 0.08) 45%,
        transparent 65%
    );
    z-index: 5;
    animation: welcomeAmbientPulse 3s ease-in-out infinite;
    pointer-events: none;
}

@keyframes welcomeAmbientPulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

/* ===== MAIN CONTAINER - CRITICAL FOR LAYOUT ===== */
.welcome-main-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* ===== WELCOME CONTENT ===== */
.welcome-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: auto;
    padding: 0;
    text-align: center;
    width: 100%;
}

/* Staggered entrance animations */
.welcome-logo-fire {
    font-size: 72px;
    margin-bottom: 8px;
    animation: welcomeFireFlicker 1.5s ease-in-out infinite, welcomeFadeSlideIn 0.8s ease-out both;
    filter: drop-shadow(0 0 25px rgba(255, 107, 53, 0.8));
}

.welcome-app-title {
    font-family: 'Cinzel Decorative', 'Cinzel', Georgia, serif;
    font-size: clamp(2.2rem, 9vw, 3.5rem);
    font-weight: 900;
    color: #fbbf24;
    text-shadow:
        -2px -2px 0 #1a0a00,
        2px -2px 0 #1a0a00,
        -2px 2px 0 #1a0a00,
        2px 2px 0 #1a0a00,
        0 0 30px rgba(251, 191, 36, 0.8),
        0 0 60px rgba(251, 191, 36, 0.4);
    letter-spacing: 6px;
    margin-bottom: 6px;
    animation: welcomeTitleGlow 3s ease-in-out infinite, welcomeFadeSlideIn 0.8s ease-out 0.15s both;
}

.welcome-app-subtitle {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(1rem, 3.5vw, 1.2rem);
    font-weight: 500;
    color: #d97706;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
    margin-bottom: 32px;
    letter-spacing: 3px;
    font-style: italic;
    animation: welcomeFadeSlideIn 0.8s ease-out 0.3s both;
}

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

@keyframes welcomeFireFlicker {
    0%, 100% {
        transform: scale(1) rotate(-1deg);
        filter: drop-shadow(0 0 25px rgba(255, 107, 53, 0.8));
    }
    25% {
        transform: scale(1.03) rotate(1deg);
        filter: drop-shadow(0 0 35px rgba(247, 127, 0, 0.9));
    }
    50% {
        transform: scale(0.98) rotate(-0.5deg);
        filter: drop-shadow(0 0 30px rgba(214, 40, 40, 0.85));
    }
    75% {
        transform: scale(1.01) rotate(1.5deg);
        filter: drop-shadow(0 0 40px rgba(252, 163, 17, 0.9));
    }
}

@keyframes welcomeTitleGlow {
    0%, 100% {
        text-shadow:
            -2px -2px 0 #1a0a00,
            2px -2px 0 #1a0a00,
            -2px 2px 0 #1a0a00,
            2px 2px 0 #1a0a00,
            0 0 30px rgba(251, 191, 36, 0.8),
            0 0 60px rgba(251, 191, 36, 0.4);
    }
    50% {
        text-shadow:
            -2px -2px 0 #1a0a00,
            2px -2px 0 #1a0a00,
            -2px 2px 0 #1a0a00,
            2px 2px 0 #1a0a00,
            0 0 40px rgba(255, 107, 53, 0.9),
            0 0 80px rgba(247, 127, 0, 0.5);
    }
}

/* ===== WOOD CARD ===== */
.welcome-wood-card {
    background: linear-gradient(145deg,
        #503628 0%,
        #7a5a47 45%,
        #503628 100%
    );
    border: 3px solid #92400e;
    border-radius: 16px;
    padding: 28px 24px;
    width: calc(100% - 40px);
    max-width: 340px;
    margin: 0 auto;
    position: relative;
    box-shadow:
        0 0 35px rgba(139, 105, 20, 0.4),
        0 12px 40px rgba(0, 0, 0, 0.7),
        inset 0 1px 6px rgba(255, 255, 255, 0.12),
        inset 0 -3px 10px rgba(0, 0, 0, 0.5);
    animation: welcomeFadeSlideIn 0.8s ease-out 0.45s both, welcomeCardFloat 6s ease-in-out infinite 1s;
}

@keyframes welcomeCardFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

.welcome-wood-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 13px;
    background-image:
        repeating-linear-gradient(90deg,
            transparent,
            transparent 2px,
            rgba(42, 28, 20, 0.15) 2px,
            rgba(42, 28, 20, 0.15) 4px
        ),
        repeating-linear-gradient(0deg,
            transparent,
            transparent 60px,
            rgba(80, 54, 40, 0.1) 60px,
            rgba(80, 54, 40, 0.1) 62px
        );
    pointer-events: none;
    opacity: 0.7;
}

/* Metal rivets */
.welcome-rivet {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: linear-gradient(135deg, #d97706 0%, #92400e 100%);
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.4),
        0 2px 4px rgba(0, 0, 0, 0.7);
}
.welcome-rivet-tl { top: 8px; left: 8px; }
.welcome-rivet-tr { top: 8px; right: 8px; }
.welcome-rivet-bl { bottom: 8px; left: 8px; }
.welcome-rivet-br { bottom: 8px; right: 8px; }

/* Fire glow line */
.welcome-fire-line {
    position: absolute;
    bottom: 0;
    left: 10%;
    right: 10%;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg,
        transparent,
        #ff6b35 20%,
        #fca311 50%,
        #ff6b35 80%,
        transparent
    );
    box-shadow: 0 0 15px #ff6b35, 0 0 30px rgba(255, 107, 53, 0.3);
    animation: welcomeFireLine 2s ease-in-out infinite;
}

@keyframes welcomeFireLine {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* ===== FORM ELEMENTS ===== */
#welcomeScreen .welcome-form-input {
    width: 100%;
    padding: 14px 16px;
    background: linear-gradient(135deg,
        rgba(35, 22, 15, 0.85) 0%,
        rgba(25, 16, 10, 0.9) 100%
    );
    border: 2px solid rgba(146, 64, 14, 0.6);
    border-radius: 10px;
    color: #fbbf24;
    font-size: 1rem;
    font-family: inherit;
    box-sizing: border-box;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#welcomeScreen .welcome-form-input::placeholder {
    color: rgba(217, 119, 6, 0.4);
    font-style: italic;
}

#welcomeScreen .welcome-form-input:focus {
    outline: none;
    border-color: #ff6b35;
    box-shadow:
        inset 0 2px 6px rgba(0, 0, 0, 0.5),
        0 0 0 3px rgba(255, 107, 53, 0.15),
        0 0 20px rgba(255, 107, 53, 0.3);
}

/* ===== BUTTONS ===== */
#welcomeScreen .welcome-btn-primary {
    width: 100%;
    padding: 15px 24px;
    margin-top: 16px;
    background: linear-gradient(145deg, #15803d 0%, #16a34a 50%, #22c55e 100%);
    border: 2px solid #22c55e;
    border-radius: 12px;
    color: #dcfce7;
    font-family: inherit;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow:
        0 0 18px rgba(34, 197, 94, 0.4),
        0 4px 16px rgba(0, 0, 0, 0.6),
        inset 0 1px 3px rgba(255, 255, 255, 0.2);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

#welcomeScreen .welcome-btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    transition: left 0.5s ease;
}

#welcomeScreen .welcome-btn-primary:hover::before {
    left: 100%;
}

#welcomeScreen .welcome-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow:
        0 0 28px rgba(34, 197, 94, 0.6),
        0 8px 24px rgba(0, 0, 0, 0.7),
        inset 0 1px 3px rgba(255, 255, 255, 0.3);
}

#welcomeScreen .welcome-btn-primary:active {
    transform: translateY(1px);
    box-shadow:
        0 0 15px rgba(34, 197, 94, 0.4),
        0 2px 8px rgba(0, 0, 0, 0.6);
}

#welcomeScreen .welcome-btn-secondary {
    width: 100%;
    padding: 13px 24px;
    margin-top: 12px;
    background: linear-gradient(145deg,
        rgba(60, 56, 52, 0.8) 0%,
        rgba(38, 35, 32, 0.9) 100%
    );
    border: 2px solid rgba(139, 105, 20, 0.5);
    border-radius: 10px;
    color: #b8b5b0;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

#welcomeScreen .welcome-btn-secondary:hover {
    border-color: #d97706;
    color: #fbbf24;
    background: linear-gradient(145deg,
        rgba(70, 65, 60, 0.85) 0%,
        rgba(45, 42, 38, 0.95) 100%
    );
    box-shadow:
        0 3px 10px rgba(0, 0, 0, 0.4),
        0 0 12px rgba(217, 119, 6, 0.2);
}

#welcomeScreen .welcome-btn-secondary:active {
    transform: translateY(1px);
}

/* ===== ADMIN LINK ===== */
#welcomeScreen .welcome-admin-link {
    margin-top: 24px;
    color: #78350f;
    font-size: 0.75rem;
    background: none;
    border: none;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.2s;
}

#welcomeScreen .welcome-admin-link:hover {
    opacity: 0.8;
}

/* ===== FORM WRAPPER ===== */
#welcomeScreen .welcome-form-wrapper {
    position: relative;
}

/* ===== FORM LABEL ===== */
#welcomeScreen .welcome-form-label {
    display: block;
    color: #fbbf24;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 8px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    letter-spacing: 0.5px;
    text-align: left;
}

/* ===== MOBILE RESPONSIVE ===== */
@media (max-height: 680px) {
    #welcomeScreen .welcome-logo-fire { font-size: 56px; }
    #welcomeScreen .welcome-app-title { font-size: 2rem; letter-spacing: 4px; }
    #welcomeScreen .welcome-app-subtitle { margin-bottom: 24px; }
    #welcomeScreen .welcome-wood-card { padding: 22px 20px; }
}

@media (max-width: 380px) {
    #welcomeScreen .welcome-main-container { padding: 15px; }
    #welcomeScreen .welcome-wood-card { padding: 20px 16px; max-width: 100%; }
    #welcomeScreen .welcome-app-title { letter-spacing: 3px; }
}

/* ============================================
   LOGIN MODAL - EXACT COPY FROM TEST FILE
   ============================================ */

#loginModal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(5, 3, 2, 0.92);
    backdrop-filter: blur(10px);
    z-index: 100;
    overflow: hidden;
}

#loginModal.active {
    display: block !important;
    padding: 0 !important;
    animation: modalFadeIn 0.35s ease-out;
}

@keyframes modalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

#loginModal .modal-content {
    background: linear-gradient(145deg,
        #503628 0%,
        #7a5a47 45%,
        #503628 100%
    ) !important;
    border: 3px solid #92400e !important;
    border-radius: 18px !important;
    width: calc(100% - 30px) !important;
    max-width: 380px !important;
    max-height: calc(100vh - 30px) !important;
    overflow-y: auto !important;
    /* ЦЕНТРИРАНЕ с absolute + transform */
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    box-shadow:
        0 0 50px rgba(139, 105, 20, 0.5),
        0 16px 50px rgba(0, 0, 0, 0.85),
        inset 0 1px 6px rgba(255, 255, 255, 0.12),
        inset 0 -3px 10px rgba(0, 0, 0, 0.5) !important;
    animation: modalSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

#loginModal .modal-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 15px;
    background-image:
        repeating-linear-gradient(90deg,
            transparent,
            transparent 2px,
            rgba(42, 28, 20, 0.15) 2px,
            rgba(42, 28, 20, 0.15) 4px
        ),
        repeating-linear-gradient(0deg,
            transparent,
            transparent 60px,
            rgba(80, 54, 40, 0.1) 60px,
            rgba(80, 54, 40, 0.1) 62px
        );
    pointer-events: none;
    opacity: 0.6;
}

#loginModal .modal-header {
    position: relative !important;
    text-align: center !important;
    padding: 22px 22px 14px !important;
    border-bottom: 2px solid rgba(139, 105, 20, 0.25) !important;
    display: block !important;
    background: none !important;
    justify-content: unset !important;
    align-items: unset !important;
}

#loginModal .modal-close {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    width: 34px !important;
    height: 34px !important;
    background: linear-gradient(145deg, #991b1b 0%, #dc2626 100%) !important;
    border: 2px solid #ef4444 !important;
    border-radius: 50% !important;
    color: white !important;
    font-size: 16px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    box-shadow:
        0 0 12px rgba(220, 38, 38, 0.4),
        0 2px 6px rgba(0, 0, 0, 0.5) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 50 !important;
}

#loginModal .modal-close:hover {
    transform: scale(1.1) rotate(90deg);
    box-shadow:
        0 0 20px rgba(220, 38, 38, 0.6),
        0 4px 10px rgba(0, 0, 0, 0.6);
}

#loginModal .modal-close:active {
    transform: scale(1.05) rotate(90deg);
}

#loginModal .modal-logo {
    font-size: 44px !important;
    margin: 0 auto 4px auto !important;
    display: block !important;
    text-align: center !important;
    filter: drop-shadow(0 0 18px rgba(255, 107, 53, 0.7)) !important;
}

#loginModal .modal-title {
    font-family: 'Cinzel Decorative', 'Cinzel', Georgia, serif !important;
    font-size: 1.6rem !important;
    font-weight: 700 !important;
    color: #fbbf24 !important;
    margin: 0 !important;
    text-align: center !important;
    display: block !important;
    text-shadow:
        -1px -1px 0 #1a0a00,
        1px -1px 0 #1a0a00,
        -1px 1px 0 #1a0a00,
        1px 1px 0 #1a0a00,
        0 0 18px rgba(251, 191, 36, 0.5) !important;
}

#loginModal .modal-body {
    padding: 18px 22px 22px !important;
    position: relative !important;
}

/* Tabs */
#loginModal .tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 18px;
}

#loginModal .tab-btn {
    flex: 1;
    padding: 11px 14px;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    background: linear-gradient(145deg,
        rgba(60, 56, 52, 0.8) 0%,
        rgba(38, 35, 32, 0.9) 100%
    );
    border: 2px solid rgba(139, 105, 20, 0.35);
    color: #9a9590;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

#loginModal .tab-btn.active {
    background: linear-gradient(145deg, #92400e 0%, #d97706 100%);
    border-color: #fbbf24;
    color: white;
    box-shadow: 0 0 14px rgba(217, 119, 6, 0.45);
}

#loginModal .tab-btn:not(.active):hover {
    border-color: rgba(217, 119, 6, 0.6);
    color: #d97706;
}

#loginModal .form-group {
    margin-bottom: 14px;
}

#loginModal .form-label {
    display: block;
    color: #fbbf24;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 8px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    letter-spacing: 0.5px;
}

#loginModal .form-input {
    width: 100%;
    padding: 14px 16px;
    background: linear-gradient(135deg,
        rgba(35, 22, 15, 0.85) 0%,
        rgba(25, 16, 10, 0.9) 100%
    );
    border: 2px solid rgba(146, 64, 14, 0.6);
    border-radius: 10px;
    color: #fbbf24;
    font-size: 1rem;
    font-family: inherit;
    box-sizing: border-box;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#loginModal .form-input::placeholder {
    color: rgba(217, 119, 6, 0.4);
    font-style: italic;
}

#loginModal .form-input:focus {
    outline: none;
    border-color: #ff6b35;
    box-shadow:
        inset 0 2px 6px rgba(0, 0, 0, 0.5),
        0 0 0 3px rgba(255, 107, 53, 0.15),
        0 0 20px rgba(255, 107, 53, 0.3);
}

#loginModal .relative {
    position: relative;
}

#loginModal .password-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #d97706;
    font-size: 1.1rem;
    cursor: pointer;
    padding: 4px;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

#loginModal .password-toggle:hover {
    opacity: 1;
}

#loginModal .forgot-link {
    display: block;
    text-align: center;
    color: #fbbf24;
    font-size: 0.85rem;
    text-decoration: none;
    margin-top: 12px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
    transition: all 0.2s ease;
    opacity: 0.85;
}

#loginModal .forgot-link:hover {
    color: #ff6b35;
    opacity: 1;
}

#loginModal .tab-content {
    display: none;
}

#loginModal .tab-content.active {
    display: block;
    animation: tabFadeIn 0.3s ease-out;
}

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

#loginModal .modal-fire-line {
    position: absolute;
    bottom: 0;
    left: 10%;
    right: 10%;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg,
        transparent,
        #ff6b35 20%,
        #fca311 50%,
        #ff6b35 80%,
        transparent
    );
    box-shadow: 0 0 18px #ff6b35;
    animation: welcomeFireLine 2s ease-in-out infinite;
}

/* Modal rivets - same as welcome rivets */
#loginModal .modal-content .rivet {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: linear-gradient(135deg, #d97706 0%, #92400e 100%);
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.4),
        0 2px 4px rgba(0, 0, 0, 0.7);
    z-index: 10;
}
#loginModal .modal-content .rivet-tl { top: 8px; left: 8px; }
#loginModal .modal-content .rivet-tr { top: 8px; right: 8px; }
#loginModal .modal-content .rivet-bl { bottom: 8px; left: 8px; }
#loginModal .modal-content .rivet-br { bottom: 8px; right: 8px; }

/* Modal buttons - same as welcome buttons */
#loginModal .modal-content .btn-primary {
    width: 100%;
    padding: 15px 24px;
    background: linear-gradient(145deg, #15803d 0%, #16a34a 50%, #22c55e 100%);
    border: 2px solid #22c55e;
    border-radius: 12px;
    color: #dcfce7;
    font-family: inherit;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow:
        0 0 18px rgba(34, 197, 94, 0.4),
        0 4px 16px rgba(0, 0, 0, 0.6),
        inset 0 1px 3px rgba(255, 255, 255, 0.2);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

#loginModal .modal-content .btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    transition: left 0.5s ease;
}

#loginModal .modal-content .btn-primary:hover::before {
    left: 100%;
}

#loginModal .modal-content .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow:
        0 0 28px rgba(34, 197, 94, 0.6),
        0 8px 24px rgba(0, 0, 0, 0.7),
        inset 0 1px 3px rgba(255, 255, 255, 0.3);
}

#loginModal .modal-content .btn-primary:active {
    transform: translateY(1px);
    box-shadow:
        0 0 15px rgba(34, 197, 94, 0.4),
        0 2px 8px rgba(0, 0, 0, 0.6);
}

/* Mobile responsive for modal */
@media (max-height: 680px) {
    #loginModal .modal-header { padding: 18px 18px 12px; }
    #loginModal .modal-logo { font-size: 38px; }
    #loginModal .modal-body { padding: 14px 18px 18px; }
}