* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --dark-bg: #0a0a0f;
    --darker-bg: #050508;
    --accent-purple: #6b2c91;
    --accent-blue: #2c3e91;
    --accent-glow: #8b4fc7;
    --text-primary: #e0e0e0;
    --text-secondary: #a0a0a0;
    --border-color: #2a2a3a;
    --shadow-glow: rgba(139, 79, 199, 0.3);
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: var(--dark-bg);
    background-image: 
        radial-gradient(circle at 20% 50%, rgba(107, 44, 145, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(44, 62, 145, 0.1) 0%, transparent 50%);
    color: var(--text-primary);
    min-height: 100vh;
    overflow-x: hidden;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Header Styles */
.header {
    text-align: center;
    padding: 40px 20px 20px;
    position: relative;
}

.title {
    position: relative;
    z-index: 1;
}

.title-main {
    display: block;
    font-size: 3.5rem;
    font-weight: 900;
    letter-spacing: 8px;
    text-transform: uppercase;
    background: linear-gradient(135deg, var(--accent-purple), var(--accent-blue));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 30px var(--shadow-glow);
    margin-bottom: 10px;
    animation: glow 2s ease-in-out infinite alternate;
}

@keyframes glow {
    from {
        filter: drop-shadow(0 0 10px var(--shadow-glow));
    }
    to {
        filter: drop-shadow(0 0 20px var(--shadow-glow));
    }
}

.title-subtitle {
    display: block;
    font-size: 1.2rem;
    color: var(--text-secondary);
    letter-spacing: 4px;
    font-weight: 300;
}

/* Main Content */
.main-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    position: relative;
}

.gates-container {
    position: relative;
    width: 100%;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Dark Gates - Black Hole Style */
.dark-gates {
    position: relative;
    width: 380px;
    height: 380px;
    z-index: 10;
    perspective: 1000px;
}

/* Грубая рама врат */
.gate-frame {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 340px;
    height: 340px;
    border: 8px solid #1a1a1a;
    border-radius: 50%;
    box-shadow: 
        inset 0 0 50px rgba(0, 0, 0, 0.8),
        0 0 30px rgba(0, 0, 0, 0.6),
        0 0 60px rgba(0, 0, 0, 0.4);
    z-index: 1;
    background: radial-gradient(circle, rgba(20, 20, 20, 0.3) 0%, transparent 70%);
}

.gate-frame::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border: 4px solid #0a0a0a;
    border-radius: 50%;
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.9);
}

/* Аккреционный диск (вращающаяся материя вокруг черной дыры) */
.accretion-disk {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(139, 79, 199, 0.1) 30deg,
        rgba(44, 62, 145, 0.2) 60deg,
        rgba(139, 79, 199, 0.15) 90deg,
        transparent 120deg,
        rgba(139, 79, 199, 0.1) 150deg,
        rgba(44, 62, 145, 0.2) 180deg,
        rgba(139, 79, 199, 0.15) 210deg,
        transparent 240deg,
        rgba(139, 79, 199, 0.1) 270deg,
        rgba(44, 62, 145, 0.2) 300deg,
        rgba(139, 79, 199, 0.15) 330deg,
        transparent 360deg
    );
    animation: diskRotate 8s linear infinite;
    z-index: 2;
    opacity: 0.7;
}

.accretion-disk::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: conic-gradient(
        from 180deg,
        transparent 0deg,
        rgba(139, 79, 199, 0.15) 45deg,
        rgba(44, 62, 145, 0.25) 90deg,
        rgba(139, 79, 199, 0.2) 135deg,
        transparent 180deg,
        rgba(139, 79, 199, 0.15) 225deg,
        rgba(44, 62, 145, 0.25) 270deg,
        rgba(139, 79, 199, 0.2) 315deg,
        transparent 360deg
    );
    animation: diskRotate 6s linear infinite reverse;
}

@keyframes diskRotate {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Горизонт событий */
.event-horizon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 230px;
    height: 230px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(0, 0, 0, 0.95) 0%,
        rgba(0, 0, 0, 0.98) 40%,
        rgba(0, 0, 0, 1) 60%,
        rgba(0, 0, 0, 1) 100%
    );
    box-shadow: 
        inset 0 0 80px rgba(0, 0, 0, 1),
        0 0 40px rgba(139, 79, 199, 0.3),
        0 0 80px rgba(44, 62, 145, 0.2);
    z-index: 3;
    animation: horizonPulse 3s ease-in-out infinite;
}

@keyframes horizonPulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        box-shadow: 
            inset 0 0 80px rgba(0, 0, 0, 1),
            0 0 40px rgba(139, 79, 199, 0.3),
            0 0 80px rgba(44, 62, 145, 0.2);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.05);
        box-shadow: 
            inset 0 0 100px rgba(0, 0, 0, 1),
            0 0 60px rgba(139, 79, 199, 0.5),
            0 0 120px rgba(44, 62, 145, 0.4);
    }
}

/* Черная дыра (воронка) */
.black-hole {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) perspective(500px) rotateX(75deg);
    width: 190px;
    height: 190px;
    border-radius: 50%;
    background: 
        radial-gradient(
            ellipse at center,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0.3) 20%,
            rgba(0, 0, 0, 0.6) 40%,
            rgba(0, 0, 0, 0.85) 60%,
            rgba(0, 0, 0, 0.95) 80%,
            rgba(0, 0, 0, 1) 100%
        ),
        conic-gradient(
            from 0deg,
            rgba(0, 0, 0, 0.8) 0deg,
            rgba(20, 20, 20, 0.6) 90deg,
            rgba(0, 0, 0, 0.8) 180deg,
            rgba(20, 20, 20, 0.6) 270deg,
            rgba(0, 0, 0, 0.8) 360deg
        );
    box-shadow: 
        inset 0 0 100px rgba(0, 0, 0, 1),
        inset 0 0 200px rgba(0, 0, 0, 0.8),
        0 0 50px rgba(0, 0, 0, 0.9);
    z-index: 4;
    animation: blackHoleRotate 10s linear infinite;
}

.black-hole::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.5) 30%,
        rgba(0, 0, 0, 0.9) 60%,
        rgba(0, 0, 0, 1) 100%
    );
    box-shadow: inset 0 0 150px rgba(0, 0, 0, 1);
}

.black-hole::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(139, 79, 199, 0.05) 0%,
        rgba(0, 0, 0, 0.8) 40%,
        rgba(0, 0, 0, 1) 100%
    );
    animation: singularityPulse 2s ease-in-out infinite;
}

@keyframes blackHoleRotate {
    from {
        transform: translate(-50%, -50%) perspective(500px) rotateX(75deg) rotateZ(0deg);
    }
    to {
        transform: translate(-50%, -50%) perspective(500px) rotateX(75deg) rotateZ(360deg);
    }
}

@keyframes singularityPulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.3;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.1);
        opacity: 0.5;
    }
}

/* Files Container */
.files-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
}

.flying-file {
    position: absolute;
    font-size: 4rem;
    opacity: 0.8;
    filter: drop-shadow(0 0 15px var(--shadow-glow));
    transform-origin: center;
    animation: flyIntoGate 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    z-index: 6;
}

@keyframes flyIntoGate {
    0% {
        opacity: 0;
        transform: translate(var(--start-x), var(--start-y)) scale(1) rotate(0deg);
    }
    15% {
        opacity: 1;
        transform: translate(calc(var(--start-x) + (var(--delta-x) * 0.15)), calc(var(--start-y) + (var(--delta-y) * 0.15))) scale(1.2) rotate(5deg);
    }
    50% {
        opacity: 1;
        transform: translate(calc(var(--start-x) + (var(--delta-x) * 0.5)), calc(var(--start-y) + (var(--delta-y) * 0.5))) scale(1) rotate(-3deg);
    }
    85% {
        opacity: 0.7;
        transform: translate(calc(var(--start-x) + (var(--delta-x) * 0.85)), calc(var(--start-y) + (var(--delta-y) * 0.85))) scale(0.5) rotate(2deg);
    }
    100% {
        opacity: 0;
        transform: translate(calc(var(--start-x) + var(--delta-x)), calc(var(--start-y) + var(--delta-y))) scale(0.05) rotate(0deg);
    }
}

/* Footer */
.footer {
    text-align: center;
    padding: 30px 20px;
    color: var(--text-secondary);
    font-size: 0.9rem;
    border-top: 1px solid var(--border-color);
    margin-top: auto;
}

/* Navigation */
.nav {
    margin-top: 20px;
    display: flex;
    gap: 16px;
    justify-content: center;
}

.nav-link {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.95rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 6px 10px;
    border-radius: 4px;
    transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.nav-link:hover {
    color: var(--text-primary);
    background: rgba(139, 79, 199, 0.1);
    box-shadow: 0 0 12px rgba(139, 79, 199, 0.4);
}

/* Content Blocks (for about/login pages) */
.content-block {
    max-width: 520px;
    background: linear-gradient(145deg, rgba(5, 5, 8, 0.95), rgba(15, 10, 25, 0.98));
    border-radius: 18px;
    border: 1px solid var(--border-color);
    box-shadow:
        0 0 30px rgba(0, 0, 0, 0.9),
        0 0 35px rgba(139, 79, 199, 0.25);
    padding: 28px 26px 30px;
}

.content-block h2 {
    font-size: 1.4rem;
    margin-bottom: 16px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.content-block p {
    color: var(--text-secondary);
    font-size: 0.97rem;
    line-height: 1.6;
    margin-bottom: 12px;
}

/* Auth Form */
.auth-form {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.auth-label {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-size: 0.9rem;
    color: var(--text-secondary);
    gap: 6px;
}

.auth-input {
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: rgba(5, 5, 8, 0.9);
    color: var(--text-primary);
    outline: none;
    font-size: 0.95rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.auth-input:focus {
    border-color: var(--accent-glow);
    box-shadow: 0 0 14px var(--shadow-glow);
    background: rgba(10, 10, 16, 0.95);
}

.auth-button {
    margin-top: 8px;
    padding: 11px 18px;
    border-radius: 999px;
    border: 1px solid var(--accent-glow);
    background: radial-gradient(circle at 0% 0%, rgba(139, 79, 199, 0.45), rgba(44, 62, 145, 0.85));
    color: #f5f0ff;
    font-size: 0.95rem;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    cursor: pointer;
    align-self: flex-start;
    box-shadow:
        0 0 18px rgba(139, 79, 199, 0.6),
        0 0 30px rgba(44, 62, 145, 0.5);
    transition:
        transform 0.15s ease-out,
        box-shadow 0.15s ease-out,
        background-position 0.2s ease-out,
        filter 0.15s ease-out;
}

.auth-button:hover {
    transform: translateY(-1px);
    box-shadow:
        0 0 24px rgba(139, 79, 199, 0.85),
        0 0 40px rgba(44, 62, 145, 0.7);
    filter: brightness(1.05);
}

.auth-button:active {
    transform: translateY(1px) scale(0.98);
    box-shadow:
        0 0 14px rgba(139, 79, 199, 0.6),
        0 0 26px rgba(44, 62, 145, 0.5);
}

/* Small shake for error feedback */
@keyframes shake {
    0% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    50% { transform: translateX(3px); }
    75% { transform: translateX(-2px); }
    100% { transform: translateX(0); }
}

.shake {
    animation: shake 0.18s ease-out;
}

/* Auth Error Notification */
.auth-error {
    margin-top: 16px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 80, 120, 0.6);
    background: radial-gradient(circle at 0% 0%, rgba(80, 0, 30, 0.7), rgba(20, 0, 20, 0.95));
    color: #ffd7e0;
    font-size: 0.88rem;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow:
        0 0 14px rgba(255, 80, 120, 0.45),
        0 0 24px rgba(139, 79, 199, 0.25);
    opacity: 0;
    transform: translateY(4px);
    pointer-events: none;
    transition: opacity 0.18s ease-out, transform 0.18s ease-out;
}

.auth-error_visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.auth-error-icon {
    font-size: 1.1rem;
}

.auth-error-text {
    flex: 1;
}

/* Responsive */
@media (max-width: 768px) {
    .title-main {
        font-size: 2.5rem;
        letter-spacing: 4px;
    }
    
    .dark-gates {
        width: 280px;
        height: 280px;
    }
    
    .gate-frame {
        width: 250px;
        height: 250px;
    }
    
    .accretion-disk {
        width: 220px;
        height: 220px;
    }
    
    .accretion-disk::before {
        width: 190px;
        height: 190px;
    }
    
    .event-horizon {
        width: 170px;
        height: 170px;
    }
    
    .black-hole {
        width: 140px;
        height: 140px;
    }
    
    .black-hole::before {
        width: 110px;
        height: 110px;
    }
    
    .black-hole::after {
        width: 80px;
        height: 80px;
    }
    
    .gates-container {
        height: 400px;
    }
}