/**
 * Account Stylesheet
 * Назначение: Страница авторизации и управления аккаунтом.
 * Особенности: Переменные (CSS Variables), поддержка Dark Theme, адаптивность.
 */

:root {
    --bg: #f0f2f5; --card: #ffffff; --text: #1a1a1a; --text-m: #606266;
    --border: #dcdfe6; --primary: #3b82f6; --error: #f56c6c; --status-bg: #f0fdf4;
    --switch-bg: #ccc;
}
[data-theme="dark"] {
    --bg: #0b1120; --card: #1e293b; --text: #f8fafc; --text-m: #94a3b8;
    --border: #334155; --status-bg: #064e3b; --switch-bg: #475569;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background-color: var(--bg); color: var(--text);
    margin: 0; display: flex; flex-direction: column; justify-content: center;
    align-items: center; min-height: 100vh; transition: 0.3s;
}

#skeleton { position: fixed; inset: 0; background: var(--bg); z-index: 999; display: flex; justify-content: center; align-items: center; }
.sk-card { width: 420px; height: 500px; background: var(--card); border-radius: 16px; padding: 30px; box-sizing: border-box; }
.sk-item { background: var(--border); border-radius: 4px; margin-bottom: 20px; animation: pulse 1.5s infinite; }
@keyframes pulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }

.controls { position: absolute; top: 20px; right: 20px; display: flex; gap: 10px; z-index: 100; }
.btn-c { width: 40px; height: 40px; background: var(--card); border: 1px solid var(--border); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--primary); font-weight: bold; font-size: 12px; }

.login-card {
    background-color: var(--card); padding: 30px; border-radius: 16px;
    width: 100%; max-width: 420px; box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1);
    text-align: center; position: relative; z-index: 10; box-sizing: border-box;
}

.logo-box { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 8px; }
.logo-box i { color: var(--primary); font-size: 38px; }
.logo-box span { font-size: 30px; font-weight: 800; }

.slogan { font-size: 13px; color: var(--text-m); margin-bottom: 30px; line-height: 1.4; }
.sub-title { font-size: 18px; font-weight: 600; margin-bottom: 20px; text-align: center; }

.input-w { position: relative; margin-bottom: 15px; width: 100%; }
.input-w i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-m); }
input[type="text"], input[type="password"] {
    width: 100%; padding: 13px 12px 13px 42px; background: transparent; border: 1px solid var(--border);
    border-radius: 8px; color: var(--text); box-sizing: border-box; outline: none; font-size: 15px;
}

input:focus { border-color: var(--primary); }

.options { 
    display: flex; align-items: center; justify-content: space-between; 
    margin-bottom: 25px; font-size: 14px; color: var(--text-m); 
    width: 100%; padding: 0 2px; box-sizing: border-box; 
}

.switch { position: relative; display: inline-block; width: 40px; height: 22px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
    position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
    background-color: var(--switch-bg); transition: .4s; border-radius: 34px;
}
.slider:before {
    position: absolute; content: ""; height: 16px; width: 16px; left: 3px; bottom: 3px;
    background-color: white; transition: .4s; border-radius: 50%;
}
input:checked + .slider { background-color: var(--primary); }
input:checked + .slider:before { transform: translateX(18px); }

.btn-submit { width: 100%; padding: 14px; background: var(--primary); color: #fff; border: none; border-radius: 8px; font-weight: 700; cursor: pointer; font-size: 16px; }

.status-bar {
    margin-top: 25px; padding: 10px; background: var(--status-bg); border-radius: 8px;
    display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 12px; font-weight: 500;
}
.dot { width: 8px; height: 8px; background: #22c55e; border-radius: 50%; position: relative; }
.dot::after { content: ''; position: absolute; inset: 0; background: #22c55e; border-radius: 50%; animation: ping 1.5s infinite; }
@keyframes ping { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(3); opacity: 0; } }

#msg { margin-top: 15px; padding: 12px; border-radius: 6px; font-size: 12px; display: none; background: rgba(245,108,108,0.1); color: var(--error); border: 1px solid var(--error); white-space: nowrap; align-items: center; justify-content: center; gap: 8px; }

footer { margin-top: 30px; font-size: 12px; color: var(--text-m); display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; padding-bottom: 20px; }
footer a { color: var(--text-m); text-decoration: none; transition: 0.2s; }
footer a:hover { color: var(--primary); text-decoration: underline; }

@media (max-width: 480px) {
    .login-card { box-shadow: none; background: transparent; padding: 20px; border-radius: 0; }
    body { background: var(--card); }
    #skeleton { background: var(--card); }
}

/* Статус-плашка серверов: компактный стиль с поддержкой тем и анимацией пульсации */
.st-container {
    /* Контейнер-обертка: отвечает за позиционирование над формой и шрифт */
    --st-bg: rgba(0,0,0,0.01); --st-brd: rgba(255,255,255,0.08);
    --st-lbl: rgba(255,255,255,0.3); --st-txt: #fff;
    width: 100%; display: flex; justify-content: center;
    margin-bottom: 15px !important; font-family: 'Roboto Condensed', sans-serif !important;
}

html.light .st-container { --st-brd: rgba(0,0,0,0.1); --st-lbl: rgba(0,0,0,0.4); --st-txt: #1a1a1a; }

.st-pill {
    display: inline-flex; align-items: center; gap: 15px !important;
    padding: 6px 18px !important; background: var(--st-bg) !important;
    border: 1px solid var(--st-brd) !important; border-radius: 50px !important;
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-sizing: border-box;
}

.st-label, .st-name { white-space: nowrap !important; text-transform: uppercase; }
.st-label { font-size: 13px !important; font-weight: 700; color: var(--st-lbl) !important; letter-spacing: 0.02em; }
.st-name { font-size: 13px !important; font-weight: 800; color: var(--st-txt) !important; text-transform: none; }

.st-group, .st-item { display: flex !important; align-items: center; gap: 15px !important; }
.st-item { gap: 6px !important; }

.st-dot-pulse {
    width: 7px; height: 7px; background: #2ecc71; border-radius: 50%;
    box-shadow: 0 0 8px rgba(46,204,113,0.5); animation: stP 2s infinite ease-in-out; flex-shrink: 0;
}

@keyframes stP { 0%, 100% { opacity: 0.5; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1.1); } }

/* Адаптивность: мобильные и узкие экраны */
@media (max-width: 1366px) { #msg { font-size: 11px; } }

@media (max-width: 480px) {
    .st-pill { padding: 5px 14px !important; gap: 10px !important; }
    .st-group { gap: 10px !important; }
    .st-label, .st-name { font-size: 10px !important; }
}
@media (max-width: 360px) { .st-label { display: none !important; } }