/* === Кастомная авторизация === */
.auth-block {
    display: flex;
    align-items: center;
    gap: 15px;
    font-family: 'Orbitron', sans-serif;
}

.btn-auth {
    padding: 8px 16px;
    border: 1px solid #0f6;
    background: transparent;
    color: #0f6;
    font-family: 'Orbitron', sans-serif;
    font-size: 14px;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s;
    text-shadow: 0 0 5px #0f6;
}

.btn-auth:hover {
    background: #0f6;
    color: #000;
}

.btn-logout {
    border-color: #f60;
    color: #f60;
    text-shadow: 0 0 5px #f60;
}

.btn-logout:hover {
    background: #f60;
    color: #000;
}

.user-panel {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #0f6;
    font-family: 'Orbitron', sans-serif;
}

.user-hello {
    font-size: 14px;
}

/* === Кастомные новости в стиле ретро === */
.retro-news-block {
    font-family: 'Orbitron', sans-serif;
    background: #0a0a0a;
    padding: 20px;
    border: 2px solid #0f6;
    border-radius: 6px;
    box-shadow: 0 0 15px #0f6;
    color: #0f6;
    margin: 20px 0;
}

.retro-title {
    margin: 0 0 15px;
    font-size: 1.3em;
    text-align: center;
    text-shadow: 0 0 10px #0f6;
    letter-spacing: 1px;
}

.retro-news-item {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px dashed #0f6;
}

.retro-news-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.retro-date {
    color: #66ff66;
    font-size: 0.9em;
    margin-right: 10px;
}

.retro-link {
    color: #0f6;
    text-decoration: none;
    font-weight: 500;
}

.retro-link:hover {
    color: #66ff66;
    text-shadow: 0 0 5px #66ff66;
}

.retro-desc {
    font-size: 0.9em;
    color: #aaa;
    margin-top: 8px;
    line-height: 1.4;
}

/* Фон: "Cyber Highway" (векторный) */
/* === Убираем старые псевдоэлементы === */
body::before,
body::after {
    display: none !important;
}

/* === Основной контейнер фона === */
.retro-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -100;
    overflow: hidden;
}

.retro-bg-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* === 1. Градиент неба + перспективные лучи === */
.retro-bg-layer.sky {
    background: 
        linear-gradient(180deg, #0a0a12 0%, #120a2a 60%, #000000 100%),
        conic-gradient(
            from 270deg at 50% 100%,
            transparent 0deg,
            transparent 90deg,
            rgba(0, 243, 255, 0.03) 90deg,
            rgba(0, 243, 255, 0.03) 91deg,
            transparent 91deg,
            transparent 180deg,
            rgba(255, 41, 123, 0.03) 180deg,
            rgba(255, 41, 123, 0.03) 181deg,
            transparent 181deg,
            transparent 270deg,
            rgba(138, 43, 226, 0.03) 270deg,
            rgba(138, 43, 226, 0.03) 271deg,
            transparent 271deg,
            transparent 360deg
        );
    background-size: 100% 100%, 100% 100%;
    background-repeat: no-repeat;
}

/* === 2. Движущаяся дорожная разметка === */
.retro-bg-layer.lines {
    background: repeating-linear-gradient(
        180deg,
        transparent 0px,
        transparent 80px,
        rgba(0, 243, 255, 0.15) 80px,
        rgba(0, 243, 255, 0.15) 86px
    );
    background-size: 15px 120px;
    background-position: center;
    background-repeat: repeat-y;
    animation: moveLines 90s linear infinite;
}

@keyframes moveLines {
    0% {
        background-position: center 0;
    }
    100% {
        background-position: center 1200px;
    }
}

/* === 3. Боковые неоновые вспышки === */
.retro-bg-layer.glows {
    background: 
        radial-gradient(circle at 40% 100%, rgba(0, 243, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 60% 100%, rgba(255, 41, 123, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 50% 100%, rgba(138, 43, 226, 0.12) 0%, transparent 60%);
    background-size: 100% 300px, 100% 300px, 100% 400px;
    background-repeat: no-repeat;
    opacity: 0.7;
}

/* === 4. Мерцающие звёзды === */
.retro-bg-layer.stars {
    background: 
        radial-gradient(1px 1px at 10% 20%, #00f3ff, transparent 1px),
        radial-gradient(1px 1px at 30% 15%, #ff297b, transparent 1px),
        radial-gradient(2px 2px at 70% 30%, #8a2be2, transparent 2px),
        radial-gradient(1px 1px at 90% 10%, #00f3ff, transparent 1px),
        radial-gradient(1px 1px at 50% 80%, #ff297b, transparent 1px),
        radial-gradient(1px 1px at 20% 90%, #8a2be2, transparent 1px),
        radial-gradient(1px 1px at 80% 70%, #00f3ff, transparent 1px);
    background-repeat: no-repeat;
    animation: flickerStars 10s infinite alternate;
    opacity: 0.9;
}

@keyframes flickerStars {
    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; }
    20%, 22%, 24%, 55% { opacity: 0.3; }
}