/*
 * ███╗   ███╗██╗███╗   ██╗███████╗██╗   ██╗██████╗ ███╗   ██╗
 * ████╗ ████║██║████╗  ██║██╔════╝██║   ██║██╔══██╗████╗  ██║
 * ██╔████╔██║██║██╔██╗ ██║█████╗  ██║   ██║██████╔╝██╔██╗ ██║
 * ██║╚██╔╝██║██║██║╚██╗██║██╔══╝  ╚██╗ ██╔╝██╔═══╝ ██║╚██╗██║
 * ██║ ╚═╝ ██║██║██║ ╚████║███████╗ ╚████╔╝ ██║     ██║ ╚████║
 * ╚═╝     ╚═╝╚═╝╚═╝  ╚═══╝╚══════╝  ╚═══╝  ╚═╝     ╚═╝  ╚═══╝
 * ==================================================================
 *                  C S S   B A S E   F I L E
 * ==================================================================
 * @category    VPN Subsystem
 * @package     MineVPN\Server
 * @version     5.0.0
 * [WARNING]
 * This source code is strictly proprietary and confidential.
 * Unauthorized reproduction, distribution, or decompilation
 * is strictly prohibited and heavily monitored.
 * @copyright   2026 MineVPN Systems. All rights reserved.
 *
 * MineVPN Server — Base / Reset + body + типографика + utility helpers
 *
 * Подключается в cabinet.php ПОСЛЕ tokens.css на каждой странице. Базовый слой, от которого строятся все остальные.
 *
 * Структура:
 *
 * 1. RESET (modern, без normalize.css):
 *    box-sizing: border-box всюду, margin/padding 0, smooth scroll, antialiased fonts.
 *    Отказ от normalize.css — меньше лишнего кода, современные браузеры уже согласованы.
 *
 * 2. BODY (mesh gradient фон):
 *    background-image — 5 soft радиальных точек (Stripe/Apple-стиль):
 *      • violet (top-left), blue (top-right), orange (centerY-right), rose (bottom-left), cyan (center)
 *    background-attachment: fixed — градиенты НЕ скролятся с main, зафиксированы на viewport.
 *    Одноразовый рендер — GPU кэширует слой после первого paint, скроллинг 0% cost.
 *
 * 3. СТАРЫЕ ОРБЫ (body::before / body::after):
 *    Прибраны в v5.6.0 — их роль выполняет mesh gradient выше. content: none + display: none.
 *    Селекторы сохранены как placeholder на случай будущего отката.
 *
 * 4. ТИПОГРАФИКА:
 *    • h1-h6 с font-weight 700/800, letter-spacing tight, line-height tight
 *    • .mono — JetBrains Mono с tabular-nums + slashed-zero (для ровных колонок цифр)
 *    • .gradient-text — brand-text-clip для hero accent
 *
 * 5. UTILITY CLASSES:
 *    • 11 цветов (text-blue/violet/cyan/emerald/amber/rose/purple/pink/orange + muted/secondary/primary)
 *    • 6 размеров текста (text-xs/sm/base/md/lg/xl)
 *    • .uppercase, .truncate, .divider
 *    • .sr-only — скрытый текст для скринридеров
 *    • Flex utilities: flex/flex-col/items-/justify-/flex-1/flex-shrink-0/flex-wrap
 *    • Gap helpers: gap-1 → gap-8
 *
 * 6. KEYBOARD FOCUS:
 *    :focus { outline: none } + :focus-visible { outline: 2px blue } — видны только при клавиатурной навигации
 *    — мышь не видит outline (визуальный шум), клавиатура видит (a11y соблюдается).
 *
 * 7. SCROLLBARS (WebKit + Firefox):
 *    Тонкие (12px) в брендовых тонах. surface-3 thumb на bg-base треке.
 *
 * 8. SELECTION:
 *    blue-soft фон, primary text — выделение текста выглядит «брендово».
 *
 * 9. KEYFRAMES (используются в компонентах):
 *    fade-in, slide-up, pulse-dot, spin, shimmer.
 *
 * 10. PAGE-CONTENT АНИМАЦИЯ:
 *     .page-content имеет slide-up animation 240ms при рендере — плавная появляемость при переходах между menu.
 *
 * Используется:
 *   • Все страницы через cabinet.php
 *   • layout.css/components.css/pages/* — все рассчитывают на reset и typography отсюда
 *
 * Зависит от:
 *   tokens.css — все var(--*) переменные должны быть определены раньше.
 */

/* ── Reset (modern, без normalize.css — меньше лишнего) ──────────────── */

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

html {
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--text-secondary);
    /* Mesh gradient — 5 soft радіальних точок замість плоского фону і двох орбів.
       Техніка Stripe/Apple типу. Відчуття: живий, стильний, брендовий (orange + rose) +
       акцентні (blue/violet/cyan). Одноразовий рендер — GPU кешує шар після
       першого paint, скролінг 0% cost. background-attachment: fixed — градієнти не
       скроляться з main (лишаються зафіксовані на viewport). */
    background-color: var(--bg-deep);
    background-image:
        radial-gradient(at 20% 20%, rgba(139, 92, 246, 0.12) 0%, transparent 45%),
        radial-gradient(at 80% 10%, rgba(59, 130, 246, 0.10) 0%, transparent 50%),
        radial-gradient(at 70% 70%, rgba(249, 115, 22, 0.12) 0%, transparent 45%),
        radial-gradient(at 10% 90%, rgba(244, 63, 94, 0.10) 0%, transparent 50%),
        radial-gradient(at 50% 50%, rgba(6, 182, 212, 0.04) 0%, transparent 60%);
    background-attachment: fixed;
    overflow-x: hidden;
}

button, input, select, textarea {
    font: inherit;
    color: inherit;
}

button {
    background: none;
    border: none;
    cursor: pointer;
}

a {
    color: inherit;
    text-decoration: none;
}

img, svg {
    display: block;
    max-width: 100%;
}

ul, ol {
    list-style: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* ── Декоративный фон (два статичных орба) ───────────────────────────── */
/* Рисуются один раз — браузер кеширует GPU layer. Ноль затрат на скролл. */

body::before,
body::after {
    /* Орби прибрані в v5.6.0 — mesh gradient на body замінив їх роль.
       Загальні стилі тут збережені на випадок майбутнього відкоту, але ::before/::after вимкнені вище. */
    content: none;
}

/* Top-left: розово-красный (rose). Раньше был синий — заменено для брендового
   тёплого тона (rose + orange = огненная диагональ). */
body::before {
    display: none;
}

/* Bottom-right: большой яркий оранжевый — основной бренд-акцент MineVPN.
   Раньше был cyan + ещё один маленький orange справа в середине. Их объединили
   в один большой яркий орб (900px, opacity 0.18) — визуально мощнее и чище. */
body::after {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    /* Орби в v5.6.0 прибрані — reduced-motion override більше не потрібен.
       Mesh gradient статичний і здаеться для всіх (не анімується). */
}

/* ── Typography helpers ──────────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary);
    font-weight: 700;
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
}

h1 { font-size: var(--text-2xl); font-weight: 800; }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); font-weight: 600; }
h4 { font-size: var(--text-md); font-weight: 600; }

p {
    line-height: var(--leading-normal);
}

.mono {
    font-family: var(--font-mono);
    font-feature-settings: 'tnum' 1, 'zero' 1;
}

.text-muted     { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }
.text-primary   { color: var(--text-primary); }
.text-blue      { color: var(--blue); }
.text-violet    { color: var(--violet); }
.text-cyan      { color: var(--cyan); }
.text-emerald   { color: var(--emerald); }
.text-amber     { color: var(--amber); }
.text-rose      { color: var(--rose); }
.text-purple    { color: var(--purple); }
.text-pink      { color: var(--pink); }
.text-orange    { color: var(--orange); }

.text-xs   { font-size: var(--text-xs); }
.text-sm   { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-md   { font-size: var(--text-md); }
.text-lg   { font-size: var(--text-lg); }
.text-xl   { font-size: var(--text-xl); }

.uppercase {
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.divider {
    border: 0;
    border-top: 1px solid var(--border-subtle);
    margin: var(--space-5) 0;
}

/* ── Gradient text (hero accent) ─────────────────────────────────────── */
.gradient-text {
    background: var(--grad-text-hero);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* ── Focus (клавиатурная навигация) ──────────────────────────────────── */

:focus {
    outline: none;
}

:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* ── Scrollbar (WebKit + Firefox) ────────────────────────────────────── */

::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: var(--bg-base);
}

::-webkit-scrollbar-thumb {
    background: var(--surface-3);
    border-radius: var(--radius-full);
    border: 3px solid var(--bg-base);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--surface-3) var(--bg-base);
}

/* ── Выделение текста ────────────────────────────────────────────────── */

::selection {
    background: var(--blue-soft);
    color: var(--text-primary);
}

/* ── Screen-reader only ──────────────────────────────────────────────── */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Flex / Grid utilities ───────────────────────────────────────────── */

.flex       { display: flex; }
.flex-col   { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.items-start  { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.flex-1     { flex: 1 1 0%; }
.flex-shrink-0 { flex-shrink: 0; }
.flex-wrap  { flex-wrap: wrap; }

.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }

/* ── Анимации keyframes ──────────────────────────────────────────────── */

@keyframes fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes slide-up {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.5; }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Стартовая анимация контента (160ms) ─────────────────────────────── */

.page-content {
    animation: slide-up var(--dur-slow) var(--ease-out) both;
}