/* ===== Переменные тем ===== */ [data-bs-theme="light"] { --app-bg: #eef2f9; --blob-1: rgba(99, 102, 241, .16); --blob-2: rgba(34, 211, 238, .14); --surface: rgba(255, 255, 255, .78); --surface-solid: #ffffff; --border: rgba(15, 23, 42, .08); --navbar-bg: rgba(255, 255, 255, .75); --shadow-card: 0 8px 28px rgba(15, 23, 42, .07); } [data-bs-theme="dark"] { --app-bg: #0b1020; --blob-1: rgba(99, 102, 241, .22); --blob-2: rgba(34, 211, 238, .12); --surface: rgba(23, 30, 51, .72); --surface-solid: #171e33; --border: rgba(148, 163, 184, .14); --navbar-bg: rgba(11, 16, 32, .72); --shadow-card: 0 10px 32px rgba(0, 0, 0, .45); } /* ===== База ===== */ body { font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background-color: var(--app-bg); min-height: 100vh; position: relative; } /* Декоративные пятна фона */ body::before, body::after { content: ""; position: fixed; z-index: -1; border-radius: 50%; filter: blur(90px); pointer-events: none; } body::before { width: 46vw; height: 46vw; top: -12vw; right: -10vw; background: var(--blob-1); } body::after { width: 40vw; height: 40vw; bottom: -14vw; left: -12vw; background: var(--blob-2); } .text-gradient { background: linear-gradient(92deg, #6366f1, #06b6d4); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ===== Навбар ===== */ .app-navbar { background: var(--navbar-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); } .brand-icon { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: #fff; font-size: 1.1rem; background: linear-gradient(135deg, #6366f1, #06b6d4); box-shadow: 0 4px 14px rgba(99, 102, 241, .4); } .navbar-brand { gap: .5rem; } .theme-toggle { border: 1px solid var(--border); border-radius: 50%; width: 38px; height: 38px; display: inline-grid; place-items: center; color: inherit; flex-shrink: 0; } .theme-toggle:hover { transform: rotate(20deg); } /* Иконка соответствует активной теме (переключение через data-bs-theme на ) */ [data-bs-theme="light"] .theme-toggle .icon-dark { display: none; } [data-bs-theme="dark"] .theme-toggle .icon-light { display: none; } /* ===== Карточки ===== */ .card { background-color: var(--surface); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--border); border-radius: 1rem; box-shadow: var(--shadow-card); } .min-width-0 { min-width: 0; } .stat-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--bs-secondary-color); font-weight: 600; } .stat-card { transition: transform .18s ease, box-shadow .18s ease; } .stat-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(15, 23, 42, .14); } .icon-badge { width: 48px; height: 48px; display: inline-grid; place-items: center; border-radius: 14px; font-size: 1.35rem; color: #fff; flex-shrink: 0; } .bg-indigo { background: linear-gradient(135deg, #6366f1, #8b5cf6); box-shadow: 0 6px 16px rgba(99, 102, 241, .35); } .bg-cyan { background: linear-gradient(135deg, #06b6d4, #0ea5e9); box-shadow: 0 6px 16px rgba(6, 182, 212, .35); } .bg-emerald { background: linear-gradient(135deg, #10b981, #059669); box-shadow: 0 6px 16px rgba(16, 185, 129, .35); } .bg-amber { background: linear-gradient(135deg, #f59e0b, #f97316); box-shadow: 0 6px 16px rgba(245, 158, 11, .35); } .bg-rose { background: linear-gradient(135deg, #f43f5e, #e11d48); box-shadow: 0 6px 16px rgba(244, 63, 94, .35); } /* ===== Кнопки ===== */ .btn { border-radius: .65rem; transition: transform .15s ease, box-shadow .15s ease; } .btn:active { transform: scale(.97); } .btn-primary { background: linear-gradient(135deg, #6366f1, #4f46e5); border: none; } .btn-primary:hover { background: linear-gradient(135deg, #4f46e5, #4338ca); box-shadow: 0 6px 18px rgba(79, 70, 229, .35); } /* ===== Быстрые действия ===== */ .action-tile { display: flex; align-items: center; gap: .9rem; width: 100%; height: 100%; padding: 1rem 1.15rem; border-radius: 1rem; border: 1px solid var(--border); background-color: var(--surface); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: var(--shadow-card); color: inherit; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .action-tile:hover { transform: translateY(-3px); border-color: rgba(99, 102, 241, .45); box-shadow: 0 14px 34px rgba(15, 23, 42, .16); color: inherit; } .action-title { font-weight: 600; line-height: 1.25; } .action-sub { font-size: .78rem; color: var(--bs-secondary-color); } .tile-arrow { margin-left: auto; font-size: 1.05rem; color: var(--bs-secondary-color); transition: transform .18s ease, color .18s ease; } .action-tile:hover .tile-arrow { transform: translateX(3px); color: var(--bs-primary); } /* ===== Таблицы ===== */ .table > :not(caption) > * > * { padding: .7rem .75rem; } .table thead th { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--bs-secondary-color); } a { text-decoration-thickness: 1px; text-underline-offset: 3px; } /* ===== Страница входа ===== */ .hero-icon { width: 84px; height: 84px; display: grid; place-items: center; border-radius: 26px; font-size: 2.6rem; color: #fff; background: linear-gradient(135deg, #6366f1, #06b6d4); box-shadow: 0 14px 40px rgba(99, 102, 241, .45); } .feature-chip { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .9rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); backdrop-filter: blur(8px); font-size: .85rem; font-weight: 500; } /* ===== Прочее ===== */ .qr-img { border: 1px solid var(--border); border-radius: .75rem; padding: .5rem; background: #fff; /* QR читается только на белом фоне в обеих темах */ } .font-monospace.small { word-break: break-all; } .footer-note { padding-top: 1.5rem; } /* Бейдж WireGuard — тёмно-красный (фирменный цвет) */ .badge-wg { background-color: #8b0000; color: #fff; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }