/* ГЛОБАЛЬНІ ЗМІННІ ТА СТИЛІ САЙТУ */ :root { --bg-gradient: linear-gradient(135deg, #070a12, #0f172a); --glass-bg: rgba(255, 255, 255, 0.02); --glass-border: rgba(255, 255, 255, 0.08); --glow-cyan: #06b6d4; --glow-purple: #a855f7; --text-main: #f8fafc; --text-muted: #64748b; --sidebar-bg: rgba(0, 0, 0, 0.25); } html, body { margin: 0; padding: 0; width: 100%; height: 100vh; font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; background: var(--bg-gradient); color: var(--text-main); overflow: hidden; /* Захищає від появи зайвих скролів у додатку */ } /* СПЕЦІАЛЬНИЙ КЛАС ДЛЯ СТОРІНОК ВХОДУ ТА РЕЄСТРАЦІЇ */ /* Додай цей клас у тег всередині index.html та register.html */ .auth-body { display: flex; justify-content: center; align-items: center; } /* ЕКРАНИ АВТОРИЗАЦІЇ ТА ПОМИЛОК (login, register, 404) */ .auth-screen { background: var(--glass-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--glass-border); border-radius: 24px; padding: 40px; width: 360px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); animation: fadeIn 0.4s ease-out; } .auth-screen h2 { margin: 0 0 25px 0; font-weight: 600; letter-spacing: 1px; text-align: center; color: var(--glow-cyan); text-shadow: 0 0 15px rgba(6, 182, 212, 0.2); } /* ЕЛЕМЕНТИ ФОРМ (ІНПУТИ Й КНОПКИ) */ .input-group { margin-bottom: 20px; text-align: left; } .input-group label { display: block; font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; font-weight: 600; } input { width: 100%; padding: 12px 16px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--glass-border); border-radius: 10px; color: #fff; font-size: 14px; box-sizing: border-box; transition: all 0.25s ease; } input:focus { outline: none; border-color: var(--glow-cyan); background: rgba(255, 255, 255, 0.07); box-shadow: 0 0 12px rgba(6, 182, 212, 0.25); } button { width: 100%; padding: 14px; background: linear-gradient(135deg, #0891b2, #0284c7); border: none; border-radius: 10px; color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; } button:hover { filter: brightness(1.15); box-shadow: 0 4px 15px rgba(2, 132, 199, 0.3); } button:active { transform: scale(0.98); } .toggle-auth { font-size: 13px; color: var(--text-muted); margin-top: 20px; text-align: center; } .toggle-auth a { color: var(--glow-cyan); text-decoration: none; font-weight: 600; } .toggle-auth a:hover { text-decoration: underline; } /* СТИЛІ ДЛЯ АДМІНІСТРАТИВНИХ ТАБЛИЦЬ ТА ДЕВ-БЛОКІВ */ table { width: 100%; border-collapse: collapse; margin-top: 15px; background: rgba(0, 0, 0, 0.1); border-radius: 12px; overflow: hidden; } th { text-align: left; padding: 12px; background: rgba(255, 255, 255, 0.03); color: var(--glow-cyan); font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; } /* АНІМАЦІЇ */ @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }