/* ЛК в стиле страницы подписки (03.10.2026, владелец: «в таком же стиле сделать ЛК»). Только внешний вид поверх app.css: разметку и логику (cabinet-app.js) не трогаем. Всё под body.cab2 — снять класс в cabinet.html = вернуть прежний вид. Цвета — через переменные темы, поэтому переключатель тем продолжает работать. */ body.cab2{ font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"Noto Sans",sans-serif; --c2-r:18px; --c2-rs:12px; --c2-card:color-mix(in srgb, var(--ink) 3.5%, transparent); --c2-shadow:0 18px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05); } :root[data-theme="light"] body.cab2{ --c2-shadow:0 1px 2px rgba(16,20,40,.05), 0 18px 44px -28px rgba(16,20,40,.25); } @media (prefers-color-scheme: light){ :root:not([data-theme]) body.cab2{ --c2-shadow:0 1px 2px rgba(16,20,40,.05), 0 18px 44px -28px rgba(16,20,40,.25); } } /* ---------- шапка кабинета: приветствие крупно, как «Ваше подключение готово» ---------- */ body.cab2 .prompt{font-family:inherit; font-size:.82rem; letter-spacing:.02em; color:var(--ink-3);} body.cab2 .prompt .cur{display:none;} body.cab2 #v-dash h1, body.cab2 .cabhead h1, body.cab2 #helloName{ font-weight:800; letter-spacing:-.02em; line-height:1.15; } /* ---------- карточки ---------- */ body.cab2 .glass, body.cab2 .chanlist, body.cab2 .dev, body.cab2 .doact-i, body.cab2 .tile{ background:var(--c2-card); border:1px solid var(--line); border-radius:var(--c2-r); box-shadow:var(--c2-shadow); } body.cab2 .dev, body.cab2 .doact-i, body.cab2 .tile{border-radius:var(--c2-rs); box-shadow:none;} body.cab2 .glass h2, body.cab2 .glass h3{font-weight:800; letter-spacing:-.01em;} /* ---------- главный ответ «работает ли»: как герой страницы подписки ---------- */ body.cab2 .hero{ text-align:left; padding:22px 22px 18px; border-radius:var(--c2-r); background:var(--c2-card); border:1px solid var(--line); box-shadow:var(--c2-shadow); border-left:1px solid var(--line); } body.cab2 .hero.st-ok{border-color:color-mix(in srgb, var(--ok) 35%, var(--line));} body.cab2 .hero.st-warn{border-color:color-mix(in srgb, var(--warn) 45%, var(--line));} body.cab2 .hero.st-err{border-color:color-mix(in srgb, var(--err) 45%, var(--line));} body.cab2 .hero-title{font-weight:800; font-size:clamp(1.3rem, 2.4vw, 1.75rem); letter-spacing:-.02em;} body.cab2 .hero-note{font-size:.9rem; color:var(--ink-2);} body.cab2 .hero-dot{width:.6rem; height:.6rem;} body.cab2 .hero-dot.ok{box-shadow:0 0 12px var(--ok);} /* цифры — таблетками, как «Активно · Без срока · Устройства 8 из 10» */ body.cab2 .hero-stats{gap:8px;} body.cab2 .stat{ flex-direction:row; align-items:baseline; gap:.45rem; border-radius:999px; padding:6px 13px; border:1px solid var(--line-2); text-align:left; } body.cab2 .stat-n{font-family:inherit; font-weight:700; font-size:.92rem; line-height:1.2;} body.cab2 .stat-l{font-size:.8rem; color:var(--ink-2);} body.cab2 .stat:has(.stat-n.ok){border-color:color-mix(in srgb, var(--ok) 45%, transparent);} body.cab2 .stat:has(.stat-n.warn){border-color:color-mix(in srgb, var(--warn) 50%, transparent);} body.cab2 .stat:has(.stat-n.err){border-color:color-mix(in srgb, var(--err) 50%, transparent);} /* ---------- кнопки: фиолетовый градиент с подсветкой, остальное — тёмное стекло ---------- */ body.cab2 .btn{border-radius:var(--c2-rs); font-weight:600; transition:.15s;} body.cab2 .btn-main{ background:linear-gradient(135deg, #7c3aed, #5b21b6); color:#fff; border:1px solid transparent; box-shadow:0 8px 28px rgba(124,58,237,.45); } body.cab2 .btn-main:hover{filter:brightness(1.08); background:linear-gradient(135deg, #7c3aed, #5b21b6);} body.cab2 .btn-main:disabled{background:var(--line-2); color:var(--ink-3); box-shadow:none; filter:none;} body.cab2 .btn-ghost, body.cab2 .btn.btn-soft{ background:color-mix(in srgb, var(--ink) 5%, transparent); color:var(--ink); border:1px solid var(--line-2); } body.cab2 .btn-ghost:hover, body.cab2 .btn.btn-soft:hover{ background:color-mix(in srgb, var(--ink) 10%, transparent); border-color:color-mix(in srgb, var(--ink) 28%, transparent); } /* жёлтая «Переименовать» и красная «Отвязать» кричали громче главной кнопки — теперь они тихие, цвет остаётся только намёком в рамке и тексте */ body.cab2 .btn-warn{ background:color-mix(in srgb, var(--ink) 5%, transparent); color:var(--ink); border:1px solid var(--line-2); } body.cab2 .btn-warn:hover{border-color:color-mix(in srgb, var(--warn) 60%, transparent); filter:none;} body.cab2 .btn-danger{ background:transparent; color:var(--err); border:1px solid color-mix(in srgb, var(--err) 45%, transparent); } body.cab2 .btn-danger:hover{background:color-mix(in srgb, var(--err) 12%, transparent); color:var(--err); filter:none; border-color:color-mix(in srgb, var(--err) 65%, transparent);} /* ---------- значки состояния — как .chip на странице подписки ---------- */ body.cab2 .badge{padding:.28rem .7rem; font-size:.78rem; background:transparent;} body.cab2 .badge.ok::before{box-shadow:0 0 10px var(--ok);} body.cab2 .dev-here-tag{padding:.28rem .7rem; font-size:.74rem;} /* ---------- меню разделов: таблетки, как вкладки систем ---------- */ body.cab2 .cabnav{gap:6px; align-items:stretch;} body.cab2 .cabtab{ display:block; width:100%; text-align:left; border-radius:999px; padding:9px 16px; border:1px solid transparent; color:var(--ink-2); font-weight:500; text-align:left; } body.cab2 .cabtab:hover{background:color-mix(in srgb, var(--ink) 6%, transparent); color:var(--ink);} body.cab2 .cabtab.on{ background:color-mix(in srgb, var(--acc) 16%, transparent); border-color:color-mix(in srgb, var(--acc) 45%, transparent); color:var(--ink); font-weight:600; box-shadow:none; } body.cab2 .modesw{border-radius:999px; overflow:hidden;} body.cab2 .modesw button{border-radius:999px;} /* ---------- заголовки групп («WINDOWS · 1», «ЧТО ВНУТРИ»): как «1 ОТКРЫТЬ В ПРИЛОЖЕНИИ» ---------- */ body.cab2 .devgrp-h, body.cab2 .faqcat, body.cab2 .chan-grp{ font-family:inherit; font-weight:700; font-size:.82rem; line-height:1; letter-spacing:.04em; color:var(--ink-2); } body.cab2 .devgrp-h::after, body.cab2 .faqcat::after{opacity:.6;} body.cab2 .devgrp-os{ padding:4px 10px; border-radius:8px; background:color-mix(in srgb, var(--acc) 16%, transparent); color:var(--acc); } /* ---------- устройства: без цветной полосы слева, состояние — в рамке ---------- */ body.cab2 .dev{border-left:1px solid var(--line); padding:14px 16px;} body.cab2 .dev.st-ok{border-color:color-mix(in srgb, var(--ok) 32%, var(--line));} body.cab2 .dev.st-warn{border-color:color-mix(in srgb, var(--warn) 40%, var(--line));} body.cab2 .dev.st-err{border-color:color-mix(in srgb, var(--err) 40%, var(--line));} body.cab2 .dev-this{box-shadow:0 0 0 1px color-mix(in srgb, var(--acc) 40%, transparent), 0 10px 30px -12px rgba(124,58,237,.45);} body.cab2 .dev-head b{font-weight:700; font-size:1rem;} body.cab2 .dev-acts{gap:8px; margin-top:12px;} /* ---------- поля ввода — как строка ссылки на странице подписки ---------- */ body.cab2 .field input, body.cab2 .devadd input, body.cab2 .faqsearch-i{ background:color-mix(in srgb, var(--bg) 70%, #000 30%); border:1px solid var(--line-2); border-radius:var(--c2-rs); padding:11px 13px; } :root[data-theme="light"] body.cab2 .field input, :root[data-theme="light"] body.cab2 .devadd input, :root[data-theme="light"] body.cab2 .faqsearch-i{background:var(--bg);} /* ---------- плитки цифр ---------- */ body.cab2 .tile-k{letter-spacing:.04em;} body.cab2 .tile-v{font-weight:800; letter-spacing:-.01em;} @media (max-width: 760px){ body.cab2 .hero{padding:18px 16px;} body.cab2 .cabtab{padding:8px 14px;} } /* ---------- фон как на странице подписки: чистый тёмный + два мягких свечения ---------- Соты и пятна под карточками делали ЛК бледным («наш бледный ЛК», владелец 03.10). */ body.cab2::before{display:none;} html:has(body.cab2)::before, html:has(body.cab2)::after{display:none;} body.cab2{ background-color:var(--bg); background-image: radial-gradient(900px 500px at 15% -10%, color-mix(in srgb, var(--acc-2) 18%, transparent), transparent 60%), radial-gradient(700px 400px at 100% 20%, color-mix(in srgb, var(--ok) 10%, transparent), transparent 60%); background-attachment:scroll; } :root[data-theme="violet"] body.cab2{ --ink:#eef0fa; --ink-2:#9aa0bd; --ink-3:#6b7194; } @media (prefers-color-scheme: dark){ :root:not([data-theme]) body.cab2{ --ink:#eef0fa; --ink-2:#9aa0bd; --ink-3:#6b7194; } } html:has(body.cab2){background:var(--bg);} /* ---------- «подсвеченные» кнопки второго уровня (22.10.2026) ---------- Те же ощущения, что у главной фиолетовой кнопки: стеклянная заливка цвета акцента, светящаяся рамка, мягкое свечение снизу и подъём на наведении. Цвет берётся из темы (--acc / --acc-2), поэтому ложится и на фиолетовую, и на бирюзовую, и на светлую. --g — цвет свечения; у «Как поддержать» он тёплый. */ body.cab2 .btn.btn-glow{ --g:var(--acc); --g2:var(--acc-2); color:var(--ink); font-weight:600; letter-spacing:.005em; background:linear-gradient(180deg, color-mix(in srgb, var(--g) 24%, transparent), color-mix(in srgb, var(--g2) 9%, transparent)); border:1px solid color-mix(in srgb, var(--g) 58%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 16%, transparent), 0 8px 26px -12px color-mix(in srgb, var(--g) 80%, transparent); transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease; } body.cab2 .btn.btn-glow:hover{ border-color:var(--g); background:linear-gradient(180deg, color-mix(in srgb, var(--g) 36%, transparent), color-mix(in srgb, var(--g2) 16%, transparent)); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 22%, transparent), 0 0 0 1px color-mix(in srgb, var(--g) 35%, transparent), 0 12px 34px -10px color-mix(in srgb, var(--g) 95%, transparent); transform:translateY(-1px); } body.cab2 .btn.btn-glow:active{transform:none; filter:brightness(.97);} body.cab2 .btn.btn-glow:focus-visible{outline:2px solid var(--g); outline-offset:3px;} body.cab2 .btn.btn-glow.ico::before{background:var(--g); filter:drop-shadow(0 0 6px color-mix(in srgb, var(--g) 70%, transparent));} body.cab2 .btn.btn-glow-warm{--g:#f472b6; --g2:#fb923c;} @media (prefers-reduced-motion: reduce){ body.cab2 .btn.btn-glow, body.cab2 .btn.btn-glow:hover{transition:none; transform:none;} } /* значки: скачать и добавить (маска, красится в цвет свечения) */ .ico-dl { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z'/%3E%3C/svg%3E"); } .ico-plus { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6z'/%3E%3C/svg%3E"); }