/* ===========================
   RESET
=========================== */

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

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: 'Inter', sans-serif;
}

/* ===========================
   BACKGROUND (Тёмная тема)
=========================== */

body {
    background: radial-gradient(circle at top left, #1a1e2b 0%, #0f1219 35%, #05070a 100%);
    position: relative;
}

.bg {
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(circle at 20% 20%, rgba(30, 40, 60, 0.6), transparent 45%),
        radial-gradient(circle at 80% 30%, rgba(60, 120, 200, 0.15), transparent 35%),
        radial-gradient(circle at bottom, rgba(40, 80, 140, 0.2), transparent 50%);
}

/* ===========================
   NETWORK
=========================== */

#network {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
}

/* ===========================
   LOGIN CARD (Тёмная)
=========================== */

.login {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 470px;
    padding: 45px;
    border-radius: 18px;
    background: rgba(20, 25, 35, 0.8);
    backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
    z-index: 5;
}

.login::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0));
    filter: blur(18px);
    z-index: -1;
}

/* ===========================
   LOGO
=========================== */

.logo {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.logo svg {
    filter: drop-shadow(0 0 18px rgba(44, 125, 255, 0.5));
}

/* ===========================
   TITLE
=========================== */

.login h1 {
    text-align: center;
    font-size: 42px;
    color: #eef3ff;
    margin-bottom: 35px;
}

/* ===========================
   INPUTS (Тёмные)
=========================== */

.input {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(255, 255, 255, 0.05);
    height: 58px;
    border-radius: 10px;
    margin-bottom: 18px;
    padding: 0 18px;
    transition: 0.3s;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.input:focus-within {
    box-shadow: 0 0 0 2px #3d7dff;
    background: rgba(255, 255, 255, 0.08);
}

.input input {
    width: 100%;
    border: none;
    background: none;
    outline: none;
    font-size: 17px;
    color: #dce3f0;
}

.input input::placeholder {
    color: #6b7280;
}

/* ===========================
   REMEMBER
=========================== */

.remember {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0 28px;
    color: #9ca3af;
}

.remember input {
    width: 20px;
    height: 20px;
    accent-color: #3d7dff;
}

/* ===========================
   BUTTON
=========================== */

button {
    width: 100%;
    height: 56px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(180deg, #5c9dff, #2f75ff);
    color: white;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
}

button:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 25px rgba(47, 117, 255, 0.5);
}

/* ===========================
   COPYRIGHT
=========================== */

.copyright {
    margin-top: 35px;
    text-align: center;
    color: #6b7280;
    font-size: 14px;
}

/* ===========================
   SERVERS (Тёмная стилизация)
=========================== */

.server {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    color: #94a3b8;
    font-weight: 600;
    letter-spacing: 1px;
    z-index: 2;
    transition: 0.3s;
}

.server:hover {
    transform: scale(1.08);
    color: #cbd5e1;
}

.server-icon {
    width: 90px;
    height: 105px;
    position: relative;
    border-radius: 8px;
    background: linear-gradient(180deg, #2d3748 0%, #1a202c 18%, #0f1419 100%);
    border: 1px solid #4a5568;
    box-shadow: 
        0 12px 18px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Верхняя крышка */
.server-icon::before {
    content: "";
    position: absolute;
    left: 6px;
    right: 6px;
    top: -8px;
    height: 16px;
    border-radius: 8px;
    background: linear-gradient(180deg, #3a4556, #1e293b);
    border: 1px solid #4a5568;
}

/* Передняя панель (сетка) */
.server-icon::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    top: 24px;
    bottom: 12px;
    border-radius: 4px;
    background: repeating-linear-gradient(
        to bottom,
        #4a5568 0px,
        #4a5568 2px,
        transparent 2px,
        transparent 6px
    );
    opacity: 0.6;
}

/* Дополнительные декоративные элементы для тёмной темы */
.server-icon::before {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    top: 14px;
    height: 8px;
    border-radius: 20px;
    background: #2d3748;
}

.server-icon::after {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 18px;
    height: 35px;
    background: repeating-linear-gradient(
        to bottom,
        #4a5568,
        #4a5568 3px,
        transparent 3px,
        transparent 7px
    );
}

/* ===========================
   ПОЗИЦИИ СЕРВЕРОВ (ПК)
=========================== */

.ulyanovsk {
    left: 12%;
    top: 14%;
}

/* Сервер Ульяновск — цвет #8B4513 */
.ulyanovsk .server-icon {
    background: linear-gradient(180deg, #8B4513 0%, #6b3410 18%, #4a2208 100%);
    border: 1px solid #a0522d;
    box-shadow: 
        0 12px 18px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.ulyanovsk .server-icon::before {
    background: linear-gradient(180deg, #a0522d, #6b3410);
    border: 1px solid #8B4513;
}

.ulyanovsk .server-icon::after {
    background: repeating-linear-gradient(
        to bottom,
        #a0522d 0px,
        #a0522d 2px,
        transparent 2px,
        transparent 6px
    );
}

.yakutsk {
    right: 12%;
    top: 14%;
}

/* Сервер Якутск — цвет #42AAFF */
.yakutsk .server-icon {
    background: linear-gradient(180deg, #42AAFF 0%, #2b8fd4 18%, #1a6ba8 100%);
    border: 1px solid #5bb8ff;
    box-shadow: 
        0 12px 18px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.yakutsk .server-icon::before {
    background: linear-gradient(180deg, #5bb8ff, #2b8fd4);
    border: 1px solid #42AAFF;
}

.yakutsk .server-icon::after {
    background: repeating-linear-gradient(
        to bottom,
        #5bb8ff 0px,
        #5bb8ff 2px,
        transparent 2px,
        transparent 6px
    );
}

.tambov {
    left: 10%;
    bottom: 10%;
}

/* Сервер Тамбов — цвет #808080 */
.tambov .server-icon {
    background: linear-gradient(180deg, #808080 0%, #666666 18%, #4d4d4d 100%);
    border: 1px solid #999999;
    box-shadow: 
        0 12px 18px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.tambov .server-icon::before {
    background: linear-gradient(180deg, #999999, #666666);
    border: 1px solid #808080;
}

.tambov .server-icon::after {
    background: repeating-linear-gradient(
        to bottom,
        #999999 0px,
        #999999 2px,
        transparent 2px,
        transparent 6px
    );
}

.bratsk {
    right: 10%;
    bottom: 10%;
}

/* Сервер Братск — цвет #E8BEAC */
.bratsk .server-icon {
    background: linear-gradient(180deg, #E8BEAC 0%, #d4a390 18%, #b88570 100%);
    border: 1px solid #f0cebf;
    box-shadow: 
        0 12px 18px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.bratsk .server-icon::before {
    background: linear-gradient(180deg, #f0cebf, #d4a390);
    border: 1px solid #E8BEAC;
}

.bratsk .server-icon::after {
    background: repeating-linear-gradient(
        to bottom,
        #f0cebf 0px,
        #f0cebf 2px,
        transparent 2px,
        transparent 6px
    );
}

.astrakhan {
    left: 50%;
    bottom: 3%;
    transform: translateX(-50%);
}

/* Сервер Астрахань — цвет #E30B5D */
.astrakhan .server-icon {
    background: linear-gradient(180deg, #E30B5D 0%, #c0094e 18%, #8a0738 100%);
    border: 1px solid #f5216e;
    box-shadow: 
        0 12px 18px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.astrakhan .server-icon::before {
    background: linear-gradient(180deg, #f5216e, #c0094e);
    border: 1px solid #E30B5D;
}

.astrakhan .server-icon::after {
    background: repeating-linear-gradient(
        to bottom,
        #f5216e 0px,
        #f5216e 2px,
        transparent 2px,
        transparent 6px
    );
}

/* Светодиоды (оставляем зелёный/красный для контраста) */
.server-icon .led {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #35d04b;
    box-shadow: 0 0 8px #35d04b;
}

.server-icon .led.red {
    background: #ff4f4f;
    box-shadow: 0 0 8px #ff4f4f;
}

.server-icon .led:nth-child(1) {
    left: 12px;
    bottom: 10px;
}

.server-icon .led:nth-child(2) {
    left: 24px;
    bottom: 10px;
}

.server-icon .led:nth-child(3) {
    left: 36px;
    bottom: 10px;
}

/* ===========================
   МОБИЛЬНАЯ ВЕРСИЯ (до 768px)
=========================== */

@media (max-width: 768px) {
    
    /* Фон на мобильных */
    body {
        background: radial-gradient(circle at center, #1a1e2b 0%, #0f1219 50%, #05070a 100%);
    }
    
    /* Карточка логина */
    .login {
        width: 92%;
        max-width: 400px;
        padding: 30px 25px;
        border-radius: 16px;
    }
    
    .login h1 {
        font-size: 28px;
        margin-bottom: 25px;
    }
    
    /* Поля ввода */
    .input {
        height: 50px;
        padding: 0 14px;
        margin-bottom: 14px;
    }
    
    .input input {
        font-size: 15px;
    }
    
    /* Кнопка */
    button {
        height: 50px;
        font-size: 16px;
    }
    
    /* Copyright */
    .copyright {
        margin-top: 25px;
        font-size: 12px;
    }
    
    /* Серверы — скрываем на мобильных */
    .server {
        display: none;
    }
    
    /* Логотип */
    .logo svg {
        width: 40px;
        height: 40px;
    }
}

/* ===========================
   ПЛАНШЕТЫ (768px - 1024px)
=========================== */

@media (min-width: 769px) and (max-width: 1024px) {
    
    .login {
        width: 420px;
        padding: 35px;
    }
    
    .login h1 {
        font-size: 34px;
    }
    
    /* Серверы меньше на планшетах */
    .server-icon {
        width: 70px;
        height: 82px;
    }
    
    .server {
        gap: 10px;
        font-size: 12px;
    }
    
    .ulyanovsk {
        left: 5%;
        top: 8%;
    }
    
    .yakutsk {
        right: 5%;
        top: 8%;
    }
    
    .tambov {
        left: 5%;
        bottom: 8%;
    }
    
    .bratsk {
        right: 5%;
        bottom: 8%;
    }
    
    .astrakhan {
        bottom: 2%;
    }
}