/* Панель CosmoVPN — оформление поверх kanal.css (30.09.2026). Компоненты и вёрстка — прежние (kanal.css), здесь только тема: палитра сайта v3 (почти чёрный, лайм, крем), звёздное небо, знак-квазар. Подключается ПОСЛЕ kanal.css только в панели (panel/layout.html, ). */ :root.cosmos[data-theme="dark"] { --page: #08090A; --bg: #0F1012; --surface: #17181B; --sunken: #0F1012; --line: #202226; --line-2: #2A2C31; --border-strong: #3A3C42; --hover: #1E2024; --pressed: #111214; --ink: #F2F0EA; --ink-body: #CFCDC6; --ink-2: #A8A69E; --ink-3: #86847C; --accent: #D7F75B; --accent-hover: #E3FB82; --accent-pressed: #C4E34A; --accent-ink: #111204; --accent-under: rgba(215, 247, 91, .4); --green: #9BE08A; --green-bg: rgba(155, 224, 138, .12); --install: #D7F75B; --install-hover: #E3FB82; --install-pressed: #C4E34A; --install-ink: #111204; --ochre: #FF9E4A; --ochre-ink: #FF9E4A; --ochre-bg: rgba(255, 158, 74, .10); --ochre-line: rgba(255, 158, 74, .35); --warn-field: #1A1511; --grey-state: #86847C; --danger: #FF7A66; --disabled-bg: #141517; --disabled-ink: #5E5D57; --shadow-1: 0 0 0 1px var(--line); --shadow-2: 0 0 0 1px var(--line-2); --shadow-3: 0 0 0 1px var(--line-2), 0 18px 40px -20px rgba(0, 0, 0, .8); --shadow-4: 0 0 0 1px var(--line-2), 0 30px 60px -24px rgba(0, 0, 0, .9); background: var(--bg); scrollbar-gutter: stable; } /* звёзды — неподвижный слой позади всего, как на сайте */ .cosmos body { background: transparent; } .cosmos body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle at 18px 26px, rgba(242, 240, 234, .55) 0 .8px, transparent 1.4px), radial-gradient(circle at 131px 83px, rgba(242, 240, 234, .4) 0 .7px, transparent 1.3px), radial-gradient(circle at 67px 149px, rgba(215, 247, 91, .45) 0 .8px, transparent 1.4px), radial-gradient(circle at 203px 37px, rgba(242, 240, 234, .7) 0 1px, transparent 1.7px); background-size: 173px 173px, 241px 241px, 317px 317px, 419px 419px; } .cosmos .pan { background: transparent; } /* шапка: стекло, знак-квазар у названия, лаймовая текущая вкладка */ .cosmos .pan-head { position: sticky; top: 0; z-index: 20; background: rgba(15, 16, 18, .82); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--line); } .cosmos .brand::before { content: ""; display: inline-block; width: .5em; height: .5em; margin-right: .36em; vertical-align: .06em; border-radius: 50%; background: radial-gradient(circle, #fff 0 22%, #D7F75B 42%, rgba(215, 247, 91, 0) 72%); box-shadow: 0 0 10px rgba(215, 247, 91, .55); } .cosmos .pan-nav a { border-radius: 8px; } .cosmos .pan-nav a[aria-current="page"] { background: var(--accent); color: var(--accent-ink); } .pan-count { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 9px; background: #FF9E4A; color: #111204; font-size: 11px; line-height: 18px; font-weight: 700; text-align: center; } .cosmos .pan-nav a[aria-current="page"] .pan-count { background: #111204; color: #D7F75B; } .pan-count-in { opacity: .7; font-weight: 500; margin-left: 2px; } /* карточки и таблицы — рамка вместо тени, скругления как на сайте */ .cosmos .card, .cosmos .pan .card, .cosmos .tile, .cosmos .ptable-wrap, .cosmos .mapframe { border-radius: 12px; } .cosmos .ptable tr.urgent { background: rgba(255, 158, 74, .06); } .cosmos .btn { border-radius: 10px; } .cosmos .btn-primary { font-weight: 600; } .cosmos .demobar, .cosmos .footer { background: var(--surface); } .cosmos .demobar a[aria-current="page"] { background: var(--accent); color: var(--accent-ink); } .cosmos .graph .link, .cosmos .graph .gnode.is-exit rect { stroke: #D7F75B; } .cosmos .tick input { accent-color: #D7F75B; } .cosmos .role:has(input:checked) { border-color: #D7F75B; } /* вход: карточка со знаком и мягким свечением */ .cosmos .login-box { margin-top: clamp(40px, 12vh, 120px); } .cosmos .login-box .card { padding: 28px; box-shadow: 0 0 0 1px var(--line-2), 0 40px 90px -40px rgba(215, 247, 91, .25); } .login-wide { max-width: 460px; } .login-mark { display: block; width: 48px; height: 48px; margin-bottom: 4px; } .field-code { font-size: 26px; letter-spacing: .3em; text-align: center; font-variant-numeric: tabular-nums; } .qr-otp { width: 220px; padding: 8px; border-radius: 12px; background: #F2F0EA; } .qr-otp svg { display: block; width: 100%; height: auto; } .otp-secret { margin-top: 6px; font-size: 15px; letter-spacing: .08em; overflow-wrap: anywhere; color: var(--ink); } .recovery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; margin: 4px 0 8px; padding: 14px 18px 14px 36px; border-radius: 10px; background: var(--sunken); font-size: 17px; letter-spacing: .06em; } /* обращения */ .tk { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; vertical-align: middle; } .tk-new { background: #FF9E4A; color: #111204; } .tk-open { background: rgba(255, 158, 74, .18); color: #FF9E4A; } .tk-answered { background: rgba(215, 247, 91, .14); color: #D7F75B; } .tk-closed { background: var(--hover); color: var(--ink-3); } .tk-first { max-width: 420px; color: var(--ink-2); } .tk-grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 12px; align-items: start; } @media (max-width: 860px) { .tk-grid { grid-template-columns: 1fr; } } .tk-area { min-height: 140px; padding-top: 10px; line-height: 1.5; resize: vertical; font-family: inherit; } .thread { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .msg { max-width: 70ch; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--bg); } .msg-admin { margin-left: auto; border-color: rgba(215, 247, 91, .35); background: rgba(215, 247, 91, .06); } .msg .who { display: block; font-size: 12px; color: var(--ink-3); margin-bottom: 4px; } .msg .said { color: var(--ink); line-height: 1.55; overflow-wrap: anywhere; } /* подтверждение действия кодом (manage.js askCode) */ .otp-dialog { width: min(92vw, 380px); padding: 24px; border: 0; border-radius: 14px; background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--line-2), 0 40px 90px -30px rgba(0, 0, 0, .9); } .otp-dialog::backdrop { background: rgba(8, 9, 10, .72); backdrop-filter: blur(3px); } /* карточка абонента */ .acct { margin-bottom: 20px; } .acct-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 14px 24px; margin-bottom: 20px; } .acct-head form { display: inline-flex; } .acct-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; margin-bottom: 22px; } .acct-grid form { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 12px; background: var(--sunken); } .acct-grid form .btn { margin-top: auto; align-self: flex-start; } .acct-sub { margin-bottom: 10px; } .acct-dev { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 12px 0; border-top: 1px solid var(--line-2); } .acct-dev span:first-child { flex: 1 1 220px; color: var(--ink); } [data-acct-devices] { margin-bottom: 14px; } /* --- воздух по высоте (30.09.2026: «все элементы по высоте очень близко») --- gap-10 в шаблонах был, а в kanal.css — нет: элементы карточек шли вплотную. Поля и промежутки шире; margin карточек из атрибутов style перекрывается. */ .cosmos .gap-6 { gap: 8px; } .cosmos .gap-8 { gap: 12px; } .cosmos .gap-10 { gap: 14px; } .cosmos .gap-12 { gap: 16px; } .cosmos .gap-16 { gap: 20px; } .cosmos .pan-body { padding: 32px 32px 72px; } .cosmos .pan-body > .wrap.between:first-child, .cosmos .pan-body > div:first-child { margin-bottom: 28px !important; } .cosmos .pan-body h1.t-block { margin-bottom: 10px !important; } .cosmos .card, .cosmos .pan .card { padding: 26px 28px; } .cosmos .pan-body > .card, .cosmos .pan-body > section.card, .cosmos .pan-body > form.card, .cosmos .pan-body > .wrap, .cosmos .pan-body > .tiles, .cosmos .pan-body > .mapframe, .cosmos .pan-body > .ptable-wrap { margin-bottom: 24px !important; } .cosmos .card > .t-sub, .cosmos .card > h2, .cosmos .card > .wrap > h2 { margin-bottom: 14px !important; } .cosmos .card > .t-sub + .t-small, .cosmos .card > h2 + .t-small, .cosmos .card > h2 + p { margin-bottom: 6px; } .cosmos .label { display: block; margin-bottom: 2px; line-height: 20px; } .cosmos .stack > .label { margin-top: 4px; } .cosmos [role="radiogroup"] { margin: 2px 0 6px; } .cosmos .field-sm { min-height: 44px; } .cosmos .ptable th { padding: 12px 10px; } .cosmos .ptable td { padding: 13px 10px; font-size: 14px; } .cosmos .tiles { gap: 16px; } .cosmos .tile { padding: 20px 22px; display: flex; flex-direction: column; gap: 4px; } .cosmos .srv { padding: 20px 22px; } .cosmos .srv + .srv { margin-top: 16px; } .cosmos .srv-body { gap: 22px; margin-top: 18px; } .cosmos .pan-head { padding: 16px 32px; } .key-shown { letter-spacing: .04em; color: var(--accent) !important; user-select: all; } .pager { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 16px; }