/* ========== Base reset ========== */ *,*::before,*::after{box-sizing:border-box} html,body{height:100%} body{margin:0;font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,Inter,Arial,sans-serif;color:#0f172a;background:#fff} img,svg,video{display:block;max-width:100%} a{color:inherit} /* ========== Design tokens ========== */ :root{ --bg:#ffffff;--bg-soft:#f7f8fb;--bg-muted:#f1f5f9; --fg:#0f172a;--muted:#64748b; --border:#e2e8f0;--border-strong:#cbd5e1; --primary:#5779ff;--primary-600:#3f61f5;--primary-100:#eef2ff; --ok-bg:#e9f8ef;--ok-border:#b9e7c9;--ok-fg:#256b3f; --err-bg:#fdeeee;--err-border:#f2c7c7;--err-fg:#8f2d2d; --radius:12px;--radius-sm:10px;--focus:0 0 0 3px rgba(87,121,255,.25) } /* тёмная тема на будущее — подключим потом классом .theme-dark на */ .theme-dark{ --bg:#0b0e14;--bg-soft:#121622;--bg-muted:#0f1320; --fg:#e6e6e6;--muted:#a1a8b8; --border:#2b3142;--border-strong:#3b4154 } /* ========== Layout ========== */ header{display:flex;gap:16px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--border);background:var(--bg)} .brand{font-weight:700} .spacer{flex:1} main{max-width:980px;margin:32px auto;padding:0 16px} .container{max-width:720px;margin:32px auto;padding:0 16px} /* ========== Cards / blocks ========== */ .card{background:var(--bg-soft);border:1px solid var(--border);border-radius:var(--radius);padding:16px} .section-title { margin: 0 0 12px; font-size: 18px; } /* ========== Typography & links ========== */ h1,h2,h3{margin:0 0 12px} .muted{color:var(--muted)} a.link{color:var(--primary);text-decoration:none} a.link:hover{text-decoration:underline} /* ========== Forms ========== */ .form-group{margin-bottom:12px} label{display:block;margin-bottom:6px;color:var(--muted);font-size:14px} input,select,textarea{ width:100%;padding:10px 12px;border-radius:var(--radius-sm); border:1px solid var(--border);background:#fff;color:var(--fg) } input:focus,select:focus,textarea:focus{outline:none;box-shadow:var(--focus);border-color:var(--primary)} input[readonly]{background:var(--bg-muted)} .actions{display:flex;gap:12px;align-items:center;margin-top:12px} /* ========== Buttons ========== */ .btn{ appearance:none;border:0;cursor:pointer;padding:10px 14px;border-radius:var(--radius-sm); background:var(--primary);color:#fff;transition:.15s background-color ease } .btn:hover{background:var(--primary-600)} .btn.link{background:transparent;color:var(--primary);padding:0} /* ========== Messages ========== */ .msg{padding:10px 12px;border-radius:var(--radius-sm);margin:12px 0;border:1px solid transparent} .msg.ok{background:var(--ok-bg);border-color:var(--ok-border);color:var(--ok-fg)} .msg.err{background:var(--err-bg);border-color:var(--err-border);color:var(--err-fg)} .field-error{color:#b40000;font-size:13px;margin-top:6px} /* ========== Helpers ========== */ .hero{padding:24px;border-radius:var(--radius);background:var(--bg-soft);border:1px solid var(--border)} .row{display:grid;gap:12px} @media(min-width:640px){.row.two{grid-template-columns:1fr 1fr}} /* ===== Доп. токены (тени) ===== */ :root{ --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06); --shadow-md: 0 6px 16px rgba(15, 23, 42, .08); } /* ===== Контейнер страницы логина ===== */ .auth-container{max-width:520px;margin:24px auto;padding:0 16px} /* Карточки чуть «воздушнее» именно в зоне авторизации */ .auth-container .card{ background:var(--bg); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:16px; margin-bottom:16px; } /* Компактная вертикальная сетка внутри форм */ .stack-sm>.form-group{margin-bottom:12px} /* Поля: placeholder мягче */ input::placeholder, textarea::placeholder{color:#9aa4b2} /* Кнопки: выглядят как .btn даже без класса внутри auth-контейнера */ .auth-container button{ appearance:none;border:0;cursor:pointer; padding:10px 14px;border-radius:var(--radius-sm); background:var(--primary);color:#fff;font-weight:600; transition:.15s background-color ease; } .auth-container button:hover{background:var(--primary-600)} /* Разделитель «или» */ .divider{display:flex;align-items:center;margin:12px 0;color:#6b7280} .divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--border)} .divider span{padding:0 10px;font-size:12px;text-transform:uppercase;letter-spacing:.08em} /* Футер ссылок под формой */ .auth-footer{ display:flex;justify-content:space-between;gap:12px; margin:16px 0 8px } .auth-footer a{color:var(--primary);text-decoration:none} .auth-footer a:hover{text-decoration:underline} /* Заголовки секций внутри карточек */ .section-title{margin:0 0 12px;font-size:18px} /* опасная кнопка ) */ .btn-danger{ background:#ef4444; color:#fff; } .btn-danger:hover{ filter: brightness(0.95); } /* опционально */ .card:has(button[disabled]) { opacity:.95 }