/* ==========================================================================
   keyf — новый кабинет: тёмный, как превью «Всё под рукой» на главной.
   Самостоятельный файл: site.css и mono.js кабинету больше не нужны.
   ========================================================================== */
:root {
  --bg: #070707; --panel: #111111; --panel-2: #161616; --line: #242424; --line-2: #2e2e2e;
  --ink: #f2f1ed; --dim: #b9b8b3; --mute: #8b8a86; --faint: #5d5c58;
  --serif: "Oranienbaum", "Times New Roman", serif;
  --sans: "Inter", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --r: 20px; --r-sm: 12px;
  /* старые имена — на них ссылаются style="…" в разметке */
  --surface-2: var(--panel-2); --border: var(--line); --text: var(--ink); --radius-sm: var(--r-sm);
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; min-height: 100vh; }
body { background: var(--bg); color: var(--ink); font: 400 15px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
/* лёгкий растр из точек на фоне, как на главной */
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, rgba(255,255,255,.07) 1px, transparent 1.3px) 0 0 / 14px 14px;
  -webkit-mask: radial-gradient(ellipse 80% 60% at 70% 0%, #000 0%, transparent 75%); mask: radial-gradient(ellipse 80% 60% at 70% 0%, #000 0%, transparent 75%); }
a { color: var(--ink); text-decoration: none; }
p a, .qa-body a, .muted a { text-decoration: underline; text-decoration-color: var(--faint); text-underline-offset: 3px; }
p a:hover, .qa-body a:hover { text-decoration-color: var(--ink); }
.muted { color: var(--mute); }
small.muted { font-size: 12.5px; }
code { font: 500 .9em var(--mono); background: #1c1c1c; border: 1px solid var(--line); border-radius: 6px; padding: 1px 5px; }
strong, b { color: var(--ink); font-weight: 600; }
[hidden] { display: none !important; }

/* ---------- каркас: панель в рамке, как превью на главной ---------- */
.dash-frame { position: relative; z-index: 1; padding: 18px; min-height: 100vh; } /* панель на весь экран */
.dashboard-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); min-height: calc(100vh - 36px); border-radius: 28px; background: #121212; border: 1px solid #262626;
  box-shadow: 0 0 0 10px #0c0c0c, 0 0 0 11px #1d1d1d, 0 50px 120px -40px rgba(0,0,0,.9); overflow: clip; }
.topbar { position: sticky; top: 18px; height: calc(100vh - 36px); align-self: start; border-right: 1px solid #222; background: linear-gradient(#151515, #101010); border-radius: 28px 0 0 28px; }
.pill-nav { display: flex; flex-direction: column; gap: 3px; height: 100%; padding: 22px 16px 16px; overflow-y: auto; scrollbar-width: none; }
.pill-nav::-webkit-scrollbar { display: none; }
.pill-nav .logo { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 18px; }
.pill-nav .brand { display: flex; gap: 8px; align-items: center; font: 700 19px/1 var(--sans); letter-spacing: -.03em; color: #fff; }
.pill-nav .brand svg { width: 18px; height: 18px; }
.pill-nav .col { all: unset; cursor: pointer; width: 22px; height: 22px; border: 1.5px solid #555; border-radius: 4px; position: relative; box-sizing: border-box; transition: border-color .2s; }
.pill-nav .col::after { content: ""; position: absolute; left: 6px; top: 0; bottom: 0; border-left: 1.5px solid #555; }
.pill-nav .col:hover, .pill-nav .col:hover::after { border-color: #aaa; }
.acct { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; background: #1e1e1e; border: 1px solid #262626; font: 500 14px/1.2 var(--sans); color: var(--ink); margin-bottom: 14px; transition: border-color .2s; }
.acct:hover { border-color: #3a3a3a; }
.acct .av { width: 26px; height: 26px; flex: none; border-radius: 6px; background: #3a3a3a; display: grid; place-items: center; font-weight: 600; font-size: 13px; }
.acct .acct-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct .chev { margin-left: auto; color: #888; font-size: 11px; }
.pill-nav a[data-tab], .pill-nav > a[href="/admin"], .pill-nav .logout button { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; color: #9a9994; font: 400 14.5px/1.2 var(--sans); position: relative; border: 1px solid transparent; transition: color .2s, background .2s; }
.pill-nav a svg { width: 18px; height: 18px; flex: none; }
.pill-nav a[data-tab]:hover, .pill-nav > a[href="/admin"]:hover, .pill-nav .logout button:hover { color: #e6e5e0; }
.pill-nav a.active { color: #fff; background: linear-gradient(90deg, #2a2a2a 0%, #232323 60%, rgba(255,255,255,.1) 100%); border-color: #333; box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.pill-nav a.active::after { content: ""; position: absolute; right: 0; top: 10px; bottom: 10px; width: 4px; border-radius: 3px; background: #fff; box-shadow: 0 0 12px 2px #fff, -10px 0 26px rgba(255,255,255,.25); }
.pill-nav > a[href="/admin"]::before { content: ""; width: 18px; height: 18px; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M10 2.5 3.5 5v5c0 3.8 2.8 6.6 6.5 7.5 3.7-.9 6.5-3.7 6.5-7.5V5z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M10 2.5 3.5 5v5c0 3.8 2.8 6.6 6.5 7.5 3.7-.9 6.5-3.7 6.5-7.5V5z'/%3E%3C/svg%3E") center / contain no-repeat; }
/* карточка подписки внизу меню */
.lvl { margin-top: auto; flex: none; border: 1px solid #262626; background: #171717; border-radius: 14px; padding: 16px 14px; text-align: center; position: relative; overflow: hidden; }
.lvl::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 30%, rgba(255,255,255,.12), transparent 60%); }
.lvl canvas { width: 56px; height: 56px; image-rendering: pixelated; margin: 4px auto 10px; display: block; filter: drop-shadow(0 0 10px rgba(255,255,255,.45)); position: relative; }
.lvl b { display: block; font: 700 20px/1 var(--sans); letter-spacing: -.02em; position: relative; }
.lvl small { display: block; font: 600 10px/1 var(--mono); letter-spacing: .14em; color: #8b8a86; margin: 6px 0 12px; position: relative; }
.lvl .prog { display: flex; justify-content: space-between; font: 600 10.5px/1 var(--mono); color: #cfcec9; margin-bottom: 6px; position: relative; }
.dotbar { display: grid; grid-template-columns: repeat(30, 1fr); gap: 2px; position: relative; }
.dotbar i { height: 3px; border-radius: 1px; background: #3a3a3a; }
.dotbar i.on { background: #fff; }
.lvl.free .dotbar i.on { background: #8b8a86; }
.pill-nav .logout { display: contents; }
.pill-nav .logout button { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 12px; padding: 9px 12px; margin-top: 6px; color: #77766f; font: 400 13.5px/1.2 var(--sans); cursor: pointer; border-radius: 12px; }
.pill-nav .logout button::before { content: ""; width: 16px; height: 16px; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.5 3.5h3.5v13h-3.5M8.5 13.5 5 10l3.5-3.5M5 10h9'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.5 3.5h3.5v13h-3.5M8.5 13.5 5 10l3.5-3.5M5 10h9'/%3E%3C/svg%3E") center / contain no-repeat; }
.pill-nav .logout button:hover { color: #e6e5e0; }
/* свёрнутое меню — только иконки */

/* ---------- содержимое: верхняя строка и раздел ---------- */
.main { position: relative; z-index: 1; min-width: 0; padding: 0 22px 32px; }
.header.top { position: sticky; top: 18px; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 22px 16px; margin: 0 -22px 18px; border-bottom: 1px solid #222; background: rgba(18,18,18,.94); border-radius: 0 28px 0 0; }
.header.top h1 { margin: 0; font: 500 15px/1 var(--sans); letter-spacing: 0; color: #fff; }
.user-pill { display: flex; align-items: center; gap: 8px; font: 11px/1 var(--mono); color: #8b8a86; border: 1px solid #2c2c2c; padding: 5px 5px 5px 9px; border-radius: 999px; white-space: nowrap; }
.user-pill .plan { color: #0a0a0a; background: #e6e5e0; border-radius: 999px; padding: 4px 7px; font-weight: 600; letter-spacing: .04em; }

/* ---------- «Главная»: плитки, график, устройства — один в один с превью ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.stat { border: 1px solid #262626; background: linear-gradient(#171717, #131313); border-radius: 14px; padding: 14px 14px 12px; }
.stat .h { display: flex; justify-content: space-between; font-size: 12.5px; color: #9a9994; }
.stat .h em { white-space: nowrap; align-self: start; flex: none; margin-left: 6px; font: normal 500 11px/1 var(--mono); color: #d9d8d3; border: 1px solid #2c2c2c; border-radius: 999px; padding: 3px 6px; }
.stat .v { font: 600 27px/1 var(--sans); letter-spacing: -.03em; margin: 12px 0 10px; font-variant-numeric: tabular-nums; color: #fff; }
.stat .f { font-size: 12px; color: #e6e5e0; font-weight: 500; line-height: 1.4; }
.stat .f + .f { color: #8b8a86; font-weight: 400; margin-top: 3px; }
.stat .f a { color: #e6e5e0; text-decoration: underline; text-decoration-color: #555; }
.chart { margin-top: 10px; border: 1px solid #262626; border-radius: 14px; background: #131313; padding: 14px 14px 6px; position: relative; }
.chart .h { display: flex; justify-content: space-between; align-items: start; gap: 10px; flex-wrap: wrap; }
.chart .h b { font: 600 15px/1.2 var(--sans); display: block; color: #fff; }
.chart .h small { font-size: 12px; color: #8b8a86; }
.seg { display: flex; border: 1px solid #2c2c2c; border-radius: 9px; overflow: hidden; }
.seg button { all: unset; cursor: pointer; font: 500 12px/1 var(--sans); padding: 8px 11px; color: #b4b3ae; }
.seg button + button { border-left: 1px solid #2c2c2c; }
.seg button[aria-pressed="true"] { background: #2a2a2a; color: #fff; }
.seg button:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.chart svg { width: 100%; height: 210px; display: block; margin-top: 6px; overflow: visible; }
.chart-empty { display: none; height: 210px; place-items: center; text-align: center; color: #8b8a86; font-size: 13px; }
.chart.empty svg { display: none; }
.chart.empty .chart-empty { display: grid; }
.chart .tip { position: absolute; pointer-events: none; background: #0b0b0b; border: 1px solid #333; border-radius: 8px; padding: 7px 9px; font: 11.5px/1.5 var(--mono); color: #e6e5e0; opacity: 0; transition: opacity .15s; white-space: nowrap; }
.chart .tip i { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border: 1px solid #8b8a86; }
.chart .tip i.b { background: #fff; border-color: #fff; }
.devs { width: 100%; margin: 12px 0 22px; font: 13px/1.3 var(--sans); border-collapse: collapse; }
.devs th { color: #8b8a86; border-bottom: 1px solid #262626; font: 500 11px/1 var(--sans); letter-spacing: 0; text-transform: none; padding: 10px 0; text-align: right; }
.devs td { border-bottom: 1px solid #1e1e1e; padding: 11px 0; color: #e6e5e0; text-align: right; }
.devs td:first-child, .devs th:first-child { text-align: left; }
.devs th:nth-child(3), .devs td:nth-child(3) { text-align: center; }
.devs .st { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; border: 1px solid #2c2c2c; border-radius: 999px; padding: 3px 8px; color: #cfcec9; }
.devs .st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 1px solid #8b8a86; }
.devs .st.ok::before { background: #fff; border-color: #fff; box-shadow: 0 0 6px #fff; }
.devs td.devs-empty { text-align: left; color: #8b8a86; }
/* статус «всё работает» уже виден в плитках — крупный блок нужен, только когда доступ не работает */
#tab-home .home-hero.ok { display: none; }

.tab { display: none; }
.tab.active { display: block; animation: rise .45s cubic-bezier(.2,.8,.2,1); }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }

/* ---------- карточки ---------- */
.card { position: relative; background: linear-gradient(180deg, #141414, #101010); border: 1px solid var(--line); border-radius: var(--r); padding: 24px 26px; margin-bottom: 16px; box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
.card .card { background: #0d0d0d; border-color: #1f1f1f; box-shadow: none; margin-bottom: 0; }
.section-title { font: 600 18px/1.25 var(--sans); letter-spacing: -.015em; color: #fff; margin: 0 0 12px; }
.section-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.icon-link { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--dim); border: 1px solid var(--line-2); border-radius: 999px; padding: 6px 12px; }
.icon-link:hover { color: #fff; border-color: #555; }
.icon-link svg { width: 15px; height: 15px; }
.card p { margin: 0 0 12px; }
.card p:last-child { margin-bottom: 0; }
.label { font: 500 12.5px/1.3 var(--sans); color: var(--mute); }
.value { font: 600 28px/1 var(--sans); letter-spacing: -.03em; color: #fff; margin: 12px 0 8px; font-variant-numeric: tabular-nums; }

/* ---------- кнопки и поля ---------- */
.btn, button.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 999px; font: 600 14px/1 var(--sans); cursor: pointer; border: 1px solid transparent; text-align: center; transition: transform .15s, background .2s, border-color .2s, color .2s; }
.btn:active { transform: scale(.98); }
.btn-primary { background: #f2f1ed; color: #0a0a0a; }
.btn-primary:hover { background: #fff; box-shadow: 0 0 24px rgba(255,255,255,.18); }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn-secondary:hover { border-color: #5a5a5a; background: #171717; }
.btn-icon svg { width: 16px; height: 16px; }
button { font-family: inherit; color: inherit; }
input, select, textarea { width: 100%; padding: 13px 15px; font: 400 15px/1.3 var(--sans); color: var(--ink); background: #0b0b0b; border: 1px solid var(--line-2); border-radius: var(--r-sm); outline: none; transition: border-color .2s, box-shadow .2s; }
input::placeholder, textarea::placeholder { color: var(--faint); }
input:focus, select:focus, textarea:focus { border-color: #6a6a6a; box-shadow: 0 0 0 4px rgba(255,255,255,.05); }
textarea { resize: vertical; }
.form-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.form-row input { flex: 1 1 220px; width: auto; }

/* ---------- главная ---------- */
.home-hero { padding: 34px 34px 32px; overflow: hidden; }
.home-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 90% at 100% 0%, rgba(255,255,255,.09), transparent 60%); }
.home-state { display: inline-flex; align-items: center; gap: 9px; font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); border: 1px solid var(--line-2); border-radius: 999px; padding: 7px 12px 7px 10px; }
.home-dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px 2px rgba(255,255,255,.8); animation: pulse 2.4s ease-in-out infinite; }
.home-hero.off .home-dot { background: transparent; border: 1.5px solid var(--mute); box-shadow: none; animation: none; }
@keyframes pulse { 50% { box-shadow: 0 0 3px 1px rgba(255,255,255,.4); } }
.home-title { font: 400 56px/.98 var(--serif); letter-spacing: -.03em; color: #fff; margin: 20px 0 12px; }
.home-text { color: var(--dim); font-size: 16px; max-width: 640px; }
.home-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.home-hint { color: var(--mute); font-size: 13px; margin-top: 14px !important; }
.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.facts .card { margin: 0; padding: 18px 18px 16px; background: linear-gradient(#161616, #121212); }
.fact .value { font-size: 27px; }
.fact-hint { font-size: 12.5px; color: var(--mute); }
.simple-steps, .guide-steps { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.simple-steps li, .guide-step { display: grid; grid-template-columns: 38px 1fr; gap: 14px; padding: 16px 0; border-top: 1px solid #1d1d1d; }
.simple-steps li:first-child, .guide-step:first-child { border-top: 0; }
.simple-steps .n, .step-num { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 600 13px/1 var(--mono); color: #0a0a0a; background: #f2f1ed; }
.simple-steps b, .step-title { display: block; font: 600 16px/1.3 var(--sans); color: #fff; margin: 6px 0 6px; }
.simple-steps p, .guide-step p { color: var(--mute); margin: 0 0 12px; }
.simple-steps .btn, .guide-step .btn { margin-top: 2px; }

/* ссылка-подписка: копируется по нажатию */
.link-box { all: unset; box-sizing: border-box; display: block; width: 100%; cursor: pointer; padding: 15px 16px; border-radius: 14px; background: #0a0a0a; border: 1px dashed #3a3a3a; transition: border-color .2s, background .2s; }
.link-box:hover { border-color: #777; background: #0e0e0e; }
.link-text { display: block; font: 500 14px/1.45 var(--mono); color: #fff; word-break: break-all; }
.copy-hint { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font: 500 11.5px/1 var(--mono); color: var(--mute); }
.copy-hint svg { width: 13px; height: 13px; }
.link-box.copied, .copyable.copied { border-color: #fff; }

/* вопросы-ответы */
details.qa { border-top: 1px solid #1d1d1d; }
details.qa:last-of-type { border-bottom: 1px solid #1d1d1d; }
details.qa summary { list-style: none; cursor: pointer; padding: 15px 0; font: 500 15px/1.35 var(--sans); color: #e6e5e0; display: flex; justify-content: space-between; gap: 14px; }
details.qa summary::-webkit-details-marker { display: none; }
details.qa summary::after { content: ""; flex: none; width: 8px; height: 8px; margin-top: 5px; border-right: 1.5px solid var(--mute); border-bottom: 1.5px solid var(--mute); transform: rotate(45deg); transition: transform .25s; }
details.qa[open] summary::after { transform: rotate(225deg); margin-top: 9px; }
.qa-body { color: var(--mute); padding: 0 0 16px; max-width: 720px; }
.client-steps { margin: 0; padding-left: 20px; display: grid; gap: 6px; }

/* ---------- подписки ---------- */
.status-card { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.status-meta .state { display: inline-flex; align-items: center; gap: 8px; font: 500 11.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); border: 1px solid var(--line-2); border-radius: 999px; padding: 6px 11px 6px 9px; }
.status-meta .state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px #fff; }
.status-meta .state.inactive::before { background: none; border: 1.5px solid var(--mute); box-shadow: none; }
.plan-name { font: 400 46px/1 var(--serif); letter-spacing: -.02em; color: #fff; margin: 14px 0 6px; }
.ring { position: relative; width: 132px; height: 132px; flex: none; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring svg circle { stroke: #262626; }
.ring svg circle + circle { stroke: #f2f1ed; filter: drop-shadow(0 0 6px rgba(255,255,255,.45)); }
.ring .center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ring .pct { font: 600 26px/1 var(--sans); letter-spacing: -.03em; }
.ring .pct-sub { font: 500 10.5px/1 var(--mono); letter-spacing: .08em; color: var(--mute); text-transform: uppercase; margin-top: 5px; }
.guide-tabs { display: inline-flex; border: 1px solid var(--line-2); border-radius: 12px; overflow: hidden; margin: 2px 0 10px; }
.guide-tab { all: unset; cursor: pointer; padding: 10px 16px; font: 500 13.5px/1 var(--sans); color: var(--dim); }
.guide-tab + .guide-tab { border-left: 1px solid var(--line-2); }
.guide-tab.active { background: #262626; color: #fff; }
.plan-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px !important; margin-top: 10px !important; transition: border-color .2s; }
.plan-card:hover { border-color: #3a3a3a; }
.plan-card-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex: 1; }
.plan-title { font: 600 16px/1.2 var(--sans); color: #fff; }
.plan-sub, .plan-per-month { font-size: 12.5px; }
/* деньги — не антиквой: у Oranienbaum «4» с длинной перекладиной и читается как зачёркнутая */
.plan-price { font: 600 24px/1 var(--sans); letter-spacing: -.03em; color: #fff; white-space: nowrap; font-variant-numeric: tabular-nums; }
.plan-price-box { text-align: right; }
.plan-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.plan-actions form { display: contents; }

/* ---------- баланс ---------- */
.balance-hero { padding: 30px 30px 28px; overflow: hidden; }
.balance-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 50% 100% at 100% 0%, rgba(255,255,255,.08), transparent 65%); }
.balance-hero .amount { font: 600 64px/1 var(--sans); letter-spacing: -.05em; color: #fff; margin: 14px 0 14px; font-variant-numeric: tabular-nums; }
.trend { display: inline-flex; align-items: center; gap: 6px; font: 500 12px/1 var(--mono); color: var(--dim); border: 1px solid var(--line-2); border-radius: 999px; padding: 6px 10px; }
.trend svg { width: 13px; height: 13px; }
.choice-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.choice-grid form { display: contents; }
.tx-list { list-style: none; margin: 0; padding: 0; }
.tx { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 14px; padding: 13px 0; border-top: 1px solid #1d1d1d; }
.tx:first-child { border-top: 0; }
.tx-icon { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: #1a1a1a; border: 1px solid var(--line); color: var(--dim); }
.tx-icon svg { width: 18px; height: 18px; }
.tx-title { font-weight: 500; color: #fff; }
.tx-date { font: 400 12.5px/1 var(--mono); color: var(--mute); }
.tx-amount { font: 600 16px/1 var(--sans); font-variant-numeric: tabular-nums; color: #fff; white-space: nowrap; }
.tx-amount.out { color: var(--mute); }
.tx-empty { color: var(--mute); padding: 10px 0; list-style: none; }

/* ---------- рефералы, таблицы, профиль ---------- */
.referral-box { display: flex; gap: 10px; margin: 6px 0 14px; }
.referral-box input { font-family: var(--mono); font-size: 13.5px; }
.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.stats-grid .card { padding: 18px; }
.table-wrap { overflow-x: auto; margin: 0 -4px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font: 500 11.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mute); padding: 10px 4px; border-bottom: 1px solid var(--line); }
td { padding: 13px 4px; border-bottom: 1px solid #1b1b1b; color: #e6e5e0; vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
td.muted { color: var(--mute); }
.badge { display: inline-flex; align-items: center; gap: 6px; font: 500 11.5px/1 var(--mono); border: 1px solid var(--line-2); border-radius: 999px; padding: 5px 9px; color: var(--dim); }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; border: 1px solid var(--mute); }
.badge.answered::before, .badge.open::before { background: #fff; border-color: #fff; box-shadow: 0 0 6px #fff; }
.toggle-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0; border-top: 1px solid #1d1d1d; }
.toggle-row:first-of-type { border-top: 0; }
.switch { position: relative; width: 46px; height: 26px; flex: none; }
.switch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; z-index: 1; }
.slider { position: absolute; inset: 0; border-radius: 999px; background: #222; border: 1px solid var(--line-2); transition: background .2s; }
.slider::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #777; transition: transform .25s cubic-bezier(.2,.8,.2,1), background .2s; }
.switch input:checked + .slider { background: #f2f1ed; border-color: #f2f1ed; }
.switch input:checked + .slider::after { transform: translateX(20px); background: #0a0a0a; }
#tab-info .form-row .btn { flex: 1 1 180px; }

/* ---------- телефон ---------- */
@media (max-width: 860px) {
  .dash-frame { padding: 0; }
  .dashboard-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; min-height: 100vh; border-radius: 0; border: 0; box-shadow: none; }
  /* меню — лента сверху, листается пальцем; карточка срока и свёртка не нужны */
  .topbar { top: 0; height: auto; z-index: 20; border-right: 0; border-bottom: 1px solid #222; border-radius: 0; background: rgba(16,16,16,.96); }
  .pill-nav { flex-direction: row; align-items: center; height: auto; padding: 10px 12px; gap: 4px; overflow-x: auto; }
  .pill-nav .logo { padding: 0 8px 0 4px; }
  .pill-nav .col, .acct, .lvl { display: none; }
  .pill-nav a[data-tab], .pill-nav > a[href="/admin"] { flex: none; padding: 9px 12px; gap: 8px; font-size: 13.5px; white-space: nowrap; }
  .pill-nav a.active::after { left: 14px; right: 14px; top: auto; bottom: -1px; width: auto; height: 2px; }
  .pill-nav .logout button { margin: 0; flex: none; white-space: nowrap; }
  .main { padding: 0 14px 40px; }
  .header.top { top: 59px; margin: 0 -14px 14px; padding: 14px; border-radius: 0; }
  .user-pill > span:first-child { display: none; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat .v { font-size: 24px; }
  .chart svg, .chart-empty { height: 160px; }
  .devs th:nth-child(4), .devs td:nth-child(4) { display: none; }
  .devs th:nth-child(3), .devs td:nth-child(3) { text-align: right; }
  .card { padding: 20px 18px; border-radius: 18px; }
  .home-hero { padding: 24px 20px; }
  .home-title { font-size: 40px; }
  .facts { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .status-card { flex-direction: column-reverse; align-items: flex-start; }
  .ring { width: 110px; height: 110px; }
  .plan-card, .plan-card-head { flex-wrap: wrap; }
  .plan-actions { width: 100%; }
  .plan-actions .btn { flex: 1; }
  .balance-hero .amount { font-size: 50px; }
  .referral-box { flex-direction: column; }
}
/* внутри Telegram выход и Mini App не нужны */
.tg .tg-hide { display: none !important; }

/* прежние плитки «Главной» повторяют панель сверху */
#tab-home .facts { display: none; }

/* невысокий экран: меню плотнее, карточка срока компактнее */
@media (min-width: 861px) and (max-height: 820px) {
  .pill-nav a[data-tab] { padding: 8px 12px; }
  .pill-nav .logo { padding-bottom: 12px; }
  .acct { margin-bottom: 8px; padding: 8px 10px; }
  .lvl { padding: 10px 12px 12px; }
  .lvl canvas { width: 36px; height: 36px; margin: 0 auto 6px; }
  .lvl small { margin: 4px 0 8px; }
}
/* доступ не работает — это главное, блок с кнопками встаёт над панелью */
#tab-home.active { display: flex; flex-direction: column; }
#tab-home .home-hero.off { order: -1; margin-bottom: 12px; }

/* ---------- точь-в-точь как превью: меню «Мой доступ», верхняя метка ---------- */
.acct-wrap { position: relative; margin-bottom: 14px; }
.acct-wrap .acct { width: 100%; margin: 0; padding: 12px 10px; font-size: 15px; }
.acct.open { border-color: #3a3a3a; }
.acct.open .chev { transform: rotate(180deg); }
.acct .chev { transition: transform .2s; }
.acct-menu { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; padding: 6px; border-radius: 12px; background: #1a1a1a; border: 1px solid #2e2e2e; box-shadow: 0 20px 40px -10px rgba(0,0,0,.8); display: grid; gap: 2px; }
.acct-menu[hidden] { display: none; }
.acct-menu a[data-tab], .acct-menu > a[href="/admin"], .acct-menu .logout button { padding: 9px 10px !important; font-size: 14px !important; }
.acct-menu a.active { background: #262626; border-color: #333; }
.acct-menu a.active::after { display: none; }
.acct-menu .logout button { margin: 0 !important; border-top: 1px solid #262626 !important; border-radius: 0 0 8px 8px !important; }
.top-tag { font: 11px/1 var(--mono); color: #8b8a86; border: 1px solid #2c2c2c; padding: 5px 8px; border-radius: 999px; white-space: nowrap; }
/* пункты меню — крупнее, как на превью */
.pill-nav > a[data-tab] { padding: 13px 14px; font-size: 15px; gap: 14px; }
.pill-nav > a[data-tab] + a[data-tab] { margin-top: 4px; }
.lvl { padding: 18px 14px 16px; }
/* «Главная» — только панель; шаги и вопросы живут в «Устройствах» и «Поддержке» */
#tab-home .home-steps, #tab-home .home-faq { display: none; }
.devs-card .devs { margin-bottom: 0; }
@media (max-width: 860px) {
  .pill-nav > a[data-tab] { padding: 9px 12px; font-size: 13.5px; gap: 8px; }
  .pill-nav > a[data-tab] + a[data-tab] { margin-top: 0; }
  /* на телефоне выпадающего меню нет: Профиль, Рефералы, Подарки, Информация и Выйти — в конце ленты */
  .acct-wrap, .acct-menu, .acct-menu[hidden], .acct-menu .logout { display: contents !important; }
  .acct-wrap .acct { display: none; }
  .acct-menu a[data-tab], .acct-menu > a[href="/admin"], .acct-menu .logout button { order: 50; flex: none; white-space: nowrap; padding: 9px 12px !important; font-size: 13.5px !important; gap: 8px; border-top: 0 !important; }
}

/* ---------- «Баланс»: СБП — главный способ, остальное раскрывается ---------- */
.pay-card { padding: 26px 26px 10px; }
.pay-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.pay-head .section-title { margin: 0; font-size: 20px; }
.pay-badge { font: 700 11px/1 var(--mono); letter-spacing: .08em; color: #0a0a0a; background: #f2f1ed; border-radius: 7px; padding: 6px 8px; box-shadow: 0 0 18px rgba(255,255,255,.18); }
.pay-sub { margin: 0 0 16px !important; }
.amount-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-bottom: 10px; }
.amount-chips form { display: contents; }
.amount-chip { all: unset; box-sizing: border-box; cursor: pointer; text-align: center; padding: 15px 10px; border-radius: 14px; background: #0d0d0d; border: 1px solid #2a2a2a; font: 600 17px/1 var(--sans); letter-spacing: -.02em; color: #fff; font-variant-numeric: tabular-nums; transition: border-color .2s, background .2s, transform .15s; }
.amount-chip:hover { border-color: #f2f1ed; background: #151515; }
.amount-chip:active { transform: scale(.97); }
.pay-own { display: flex; gap: 10px; flex-wrap: wrap; }
.pay-own input { flex: 1 1 200px; width: auto; }
.pay-own .btn-primary { min-width: 190px; }
.pay-check { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; font-size: 13px; }
.link-btn { all: unset; cursor: pointer; font: 500 13px/1.3 var(--sans); color: #e6e5e0; text-decoration: underline; text-decoration-color: #555; text-underline-offset: 3px; }
.link-btn:hover { text-decoration-color: #fff; }
.pay-more { margin: 18px -26px 0; border-top: 1px solid #222; }
.pay-more summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 16px 26px; font: 500 14.5px/1.2 var(--sans); color: #e6e5e0; }
.pay-more summary::-webkit-details-marker { display: none; }
.pay-more summary small { font: 400 12.5px/1 var(--mono); color: #77766f; }
.pay-more summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 1.5px solid #8b8a86; border-bottom: 1.5px solid #8b8a86; transform: rotate(45deg); transition: transform .25s; }
.pay-more[open] summary::after { transform: rotate(225deg); }
.pay-more summary:hover { color: #fff; }
.pay-opt { margin: 0 26px 14px; padding: 16px; border-radius: 14px; background: #0d0d0d; border: 1px solid #1f1f1f; }
.pay-more[open] .pay-opt { animation: rise .35s cubic-bezier(.2,.8,.2,1); }
.pay-opt:last-child { margin-bottom: 22px; }
.pay-opt-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.pay-opt-h b { font: 600 15px/1.2 var(--sans); }
.pay-opt-h small { color: #77766f; font-size: 12.5px; }
.stars-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.star-pack { flex-direction: column; gap: 5px; min-height: 0 !important; padding: 13px 10px !important; border-radius: 14px !important; }
.star-pack b { font: 600 16px/1 var(--sans); }
.star-pack span { font: 400 12px/1 var(--mono); color: #8b8a86; }
@media (max-width: 860px) {
  .pay-card { padding: 20px 18px 6px; }
  .pay-more { margin: 16px -18px 0; }
  .pay-more summary { padding: 15px 18px; }
  .pay-opt { margin: 0 18px 12px; }
  .amount-chips { grid-template-columns: repeat(3, 1fr); }
  .pay-own .btn-primary { flex: 1 1 100%; }
}

/* пустой ряд кнопок под статусом (премиум — кнопки активации нет) */
.status-card + .form-row:not(:has(*)) { display: none; }

/* ---------- плитки: картинка рядом с числом, чтобы читалось с одного взгляда ---------- */
.stat { position: relative; overflow: hidden; transition: border-color .25s, transform .25s; }
.stat:hover { border-color: #333; transform: translateY(-2px); }
.stat::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 70% at 100% 0%, rgba(255,255,255,.06), transparent 70%); }
.stats .stat { animation: rise .55s cubic-bezier(.2,.8,.2,1) both; }
.stats .stat:nth-child(2) { animation-delay: .06s; } .stats .stat:nth-child(3) { animation-delay: .12s; } .stats .stat:nth-child(4) { animation-delay: .18s; }
.vrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 12px 0 10px; min-height: 34px; }
.vrow .v { margin: 0; }
@keyframes pop { from { opacity: 0; transform: scale(.3); } }
@keyframes blink { 0%, 92%, 100% { opacity: 1; } 96% { opacity: .35; } }
/* срок: 30 точек в две строки */
.viz-days { display: grid; grid-template-columns: repeat(15, 6px); gap: 3px; }
.viz-days i { width: 6px; height: 6px; border-radius: 2px; background: #2c2c2c; }
.viz-days i.on { background: #fff; box-shadow: 0 0 6px rgba(255,255,255,.5); animation: pop .35s cubic-bezier(.2,.8,.2,1) both; }
.viz-days.free i.on { background: #8b8a86; box-shadow: none; }
/* устройства: телефон — узкий, компьютер — широкий */
.viz-devs { display: flex; align-items: flex-end; gap: 6px; }
.viz-devs i { display: block; border: 1.6px solid #4a4a4a; border-radius: 4px; animation: pop .4s cubic-bezier(.2,.8,.2,1) both; position: relative; }
.viz-devs i.ph { width: 13px; height: 22px; }
.viz-devs i.pc { width: 26px; height: 18px; border-radius: 3px; }
.viz-devs i.pc::after { content: ""; position: absolute; left: -5px; right: -5px; bottom: -5px; height: 2px; border-radius: 2px; background: #4a4a4a; }
.viz-devs i.on { border-color: #fff; box-shadow: 0 0 10px rgba(255,255,255,.35), inset 0 0 6px rgba(255,255,255,.25); }
.viz-devs i.on.pc::after { background: #fff; }
/* отклик за неделю */
.viz-spark { width: 96px; height: 34px; overflow: visible; flex: none; }
.viz-spark .l { fill: none; stroke: #fff; stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.viz-spark .a { fill: url(#none); fill: rgba(255,255,255,.08); }
.viz-spark .d { fill: #fff; filter: drop-shadow(0 0 3px #fff); }
/* серверы: квадратик на каждый */
.viz-grid { display: grid; grid-template-columns: repeat(6, 8px); gap: 3px; }
.viz-grid i { width: 8px; height: 8px; border-radius: 2px; background: #2a2a2a; animation: pop .35s cubic-bezier(.2,.8,.2,1) both; }
.viz-grid i.on { background: #e6e5e0; animation: pop .35s cubic-bezier(.2,.8,.2,1) both, blink 3.5s linear infinite; }
@media (max-width: 860px) {
  .vrow { flex-wrap: wrap; }
  .viz-days { grid-template-columns: repeat(15, 5px); gap: 2px; }
  .viz-days i { width: 5px; height: 5px; }
  .viz-spark { width: 72px; }
}

/* ---------- плашка выбранного пункта меню, которая переезжает ---------- */
.pill-nav { position: relative; }
.nav-glider { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; border-radius: 12px;
  background: linear-gradient(90deg, #2a2a2a 0%, #232323 60%, rgba(255,255,255,.1) 100%); border: 1px solid #333; box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  transition: transform .5s cubic-bezier(.3,1.25,.4,1), width .4s cubic-bezier(.2,.8,.2,1), height .4s, opacity .25s; will-change: transform; }
.nav-glider::after { content: ""; position: absolute; right: 0; top: 10px; bottom: 10px; width: 4px; border-radius: 3px; background: #fff; box-shadow: 0 0 12px 2px #fff, -10px 0 26px rgba(255,255,255,.25); }
.pill-nav > a[data-tab] { z-index: 1; }
.has-glider > a.active[data-tab] { background: none; border-color: transparent; box-shadow: none; }
.has-glider > a.active[data-tab]::after { display: none; }
.pill-nav > a[data-tab] svg { transition: transform .35s cubic-bezier(.3,1.4,.4,1); }
.pill-nav > a.active[data-tab] svg { transform: scale(1.12); }
/* раздел сменился — содержимое мягко выезжает */
.tab.active { animation: tabIn .45s cubic-bezier(.2,.8,.2,1); }
@keyframes tabIn { from { opacity: 0; transform: translateY(10px); filter: blur(3px); } }
@media (max-width: 860px) {
  .nav-glider { background: #232323; }
  .nav-glider::after { left: 14px; right: 14px; top: auto; bottom: -1px; width: auto; height: 2px; }
}

/* ---------- тарифы: «Купить» крупная справа, подарок — только значок ---------- */
.plan-actions { flex-wrap: nowrap; align-items: center; }
.plan-actions .btn-icon { order: 1; width: 44px; min-width: 44px; padding: 0 !important; font-size: 0 !important; gap: 0; border-radius: 50%; }
.plan-actions .btn-icon svg { width: 18px; height: 18px; }
.plan-actions .btn-primary { order: 2; min-width: 150px; min-height: 50px; font-size: 15px; padding: 0 30px; }
.plan-actions .btn-icon:hover { border-color: #f2f1ed; }
@media (max-width: 860px) {
  .plan-actions .btn-primary { flex: 1; }
  .plan-actions .btn-icon { flex: none; }
}

/* ---------- копирование: вспышка, полоса света и «Скопировано» ---------- */
.link-box { position: relative; overflow: hidden; }
.link-box::before { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent); }
.link-box.copied { border-style: solid; border-color: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.06), 0 0 24px rgba(255,255,255,.12); animation: copyPop .45s cubic-bezier(.3,1.5,.4,1); }
.link-box.copied::before { animation: sweep .7s ease-out; }
.link-box.copied .copy-hint { font-size: 0; gap: 0; }
.link-box.copied .copy-hint svg { display: none; }
.link-box.copied .copy-hint::after { content: "✓  Скопировано"; font: 600 11.5px/1 var(--mono); color: #fff; animation: rise .3s ease-out; white-space: pre; }
.btn.copied { border-color: #fff; animation: copyPop .45s cubic-bezier(.3,1.5,.4,1); }
@keyframes copyPop { 40% { transform: scale(.985); } 70% { transform: scale(1.01); } }
@keyframes sweep { from { left: -40%; opacity: 1; } to { left: 110%; opacity: 1; } }
/* всплывающее уведомление снизу (его создаёт copy.js) */
.keyf-toast { position: fixed; left: 50%; bottom: 28px; z-index: 100; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  display: flex; align-items: center; gap: 9px; padding: 11px 16px 11px 13px; border-radius: 999px; background: #f2f1ed; color: #0a0a0a; font: 600 13.5px/1 var(--sans);
  box-shadow: 0 14px 40px -10px rgba(0,0,0,.8), 0 0 30px rgba(255,255,255,.15); transition: transform .4s cubic-bezier(.3,1.4,.4,1), opacity .25s; }
.keyf-toast::before { content: "✓"; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #0a0a0a; color: #fff; font-size: 11px; }
.keyf-toast.show { transform: translate(-50%, 0); opacity: 1; }

/* ---------- стрелки: одинаковые галочки, при раскрытии не поворачиваются ---------- */
details.qa[open] summary::after, .pay-more[open] summary::after { transform: rotate(45deg); margin-top: 5px; }
.acct .chev { font-size: 0; width: 8px; height: 8px; margin-right: 4px; border-right: 1.5px solid #8b8a86; border-bottom: 1.5px solid #8b8a86; transform: rotate(45deg) translate(-2px, -2px); transition: none; }
.acct.open .chev { transform: rotate(45deg) translate(-2px, -2px); }

/* ---------- уведомления (пополнение, ошибки, сообщения после действий) ---------- */
#flash { display: none !important; }
.notes { position: fixed; right: 24px; top: 24px; z-index: 120; display: grid; gap: 10px; width: min(360px, calc(100vw - 32px)); pointer-events: none; }
.note { pointer-events: auto; display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center; padding: 14px 14px 14px 14px; border-radius: 16px;
  background: rgba(22,22,22,.96); border: 1px solid #2e2e2e; box-shadow: 0 24px 60px -20px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.05);
  animation: noteIn .5s cubic-bezier(.3,1.3,.4,1); position: relative; overflow: hidden; }
.note.out { animation: noteOut .3s ease-in forwards; }
@keyframes noteIn { from { opacity: 0; transform: translateX(30px) scale(.96); } }
@keyframes noteOut { to { opacity: 0; transform: translateX(30px); } }
.note .ic { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #f2f1ed; color: #0a0a0a; font: 700 15px/1 var(--sans); }
.note.err .ic { background: transparent; border: 1.5px solid #8b8a86; color: #e6e5e0; }
.note.wait .ic { background: transparent; border: 2px solid #333; border-top-color: #fff; animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.note.ok .ic { box-shadow: 0 0 18px rgba(255,255,255,.35); animation: popIc .5s cubic-bezier(.3,1.6,.4,1); }
@keyframes popIc { from { transform: scale(.2); } }
.note b { display: block; font: 600 14.5px/1.25 var(--sans); color: #fff; }
.note small { display: block; font-size: 12.5px; color: #8b8a86; margin-top: 3px; line-height: 1.35; }
.note .x { all: unset; cursor: pointer; color: #77766f; font-size: 18px; line-height: 1; padding: 4px; }
.note .x:hover { color: #fff; }
.note .bar { position: absolute; left: 0; bottom: 0; height: 2px; background: rgba(255,255,255,.5); animation: noteBar linear forwards; }
@keyframes noteBar { from { width: 100%; } to { width: 0; } }
/* деньги пришли — сумма баланса вспыхивает */
.balance-hero .amount.flash { animation: amtFlash 1.4s ease-out; }
@keyframes amtFlash { 0% { text-shadow: 0 0 0 rgba(255,255,255,0); } 25% { text-shadow: 0 0 28px rgba(255,255,255,.7); transform: scale(1.04); } 100% { text-shadow: 0 0 0 rgba(255,255,255,0); } }
@media (max-width: 860px) { .notes { top: auto; bottom: 18px; right: 16px; left: 16px; width: auto; } }

/* ---------- аватар из Telegram ---------- */
.acct .av { position: relative; overflow: hidden; }
.acct .av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.acct .av.has-img { color: transparent; }

/* ---------- свёрнутое меню: всё ровно по центру ---------- */

/* ---------- карточка подписки: дышит светом, значок парит, точки загораются ---------- */
.lvl { transition: border-color .3s, transform .3s; }
.lvl:hover { border-color: #3a3a3a; transform: translateY(-2px); }
.lvl::before { animation: lvlGlow 4s ease-in-out infinite; }
@keyframes lvlGlow { 50% { opacity: .45; transform: scale(1.15); } }
/* полоса света раз в несколько секунд */
.lvl::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 40%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.09), transparent); transform: skewX(-15deg); animation: lvlSweep 6s ease-in-out infinite 1.5s; }
@keyframes lvlSweep { 0% { left: -60%; } 30%, 100% { left: 130%; } }
.lvl canvas { animation: pixFloat 3.2s ease-in-out infinite; }
@keyframes pixFloat { 50% { transform: translateY(-4px) rotate(4deg); filter: drop-shadow(0 0 16px rgba(255,255,255,.7)); } }
.lvl b { animation: rise .6s cubic-bezier(.2,.8,.2,1) both .15s; }
.lvl .dotbar i.on { animation: dotOn .3s cubic-bezier(.3,1.5,.4,1) both; }
@keyframes dotOn { from { opacity: 0; transform: scaleY(0); } }
.lvl .dotbar i.now { animation: dotOn .3s cubic-bezier(.3,1.5,.4,1) both, dotNow 1.4s ease-in-out infinite 1.6s; box-shadow: 0 0 6px #fff; }
@keyframes dotNow { 50% { opacity: .25; } }

/* ---------- меню «Мой доступ»: раскрывается сверху вниз, пункты выезжают по очереди ---------- */
@media (min-width: 861px) {
  .acct-menu { transform-origin: 50% 0; animation: menuIn .28s cubic-bezier(.2,1.2,.4,1); }
  .acct-menu.closing { animation: menuOut .18s ease-in forwards; }
  .acct-menu > * { animation: itemIn .32s cubic-bezier(.2,.8,.2,1) both; }
  .acct-menu > :nth-child(1) { animation-delay: .03s; } .acct-menu > :nth-child(2) { animation-delay: .06s; }
  .acct-menu > :nth-child(3) { animation-delay: .09s; } .acct-menu > :nth-child(4) { animation-delay: .12s; }
  .acct-menu > :nth-child(5) { animation-delay: .15s; } .acct-menu > :nth-child(6) { animation-delay: .18s; }
  .acct-menu .logout button { animation: itemIn .32s cubic-bezier(.2,.8,.2,1) both .18s; }
  .acct .chev { transition: transform .25s cubic-bezier(.3,1.4,.4,1); }
  .acct.open .chev { transform: rotate(45deg) translate(-2px, -2px) scale(1.15); }
  .acct.open { background: #222; }
}
@keyframes menuIn { from { opacity: 0; transform: translateY(-8px) scaleY(.85); } }
@keyframes menuOut { to { opacity: 0; transform: translateY(-6px) scaleY(.9); } }
@keyframes itemIn { from { opacity: 0; transform: translateX(-8px); } }

/* ---------- свёрнутое меню: колонка плавно сужается, подписи гаснут, иконки остаются на месте ---------- */
@media (min-width: 861px) {
  .dashboard-layout { transition: grid-template-columns .45s cubic-bezier(.3,1.1,.4,1); }
  .side-min .dashboard-layout { grid-template-columns: 76px minmax(0, 1fr); }
  .pill-nav { transition: padding .45s cubic-bezier(.3,1.1,.4,1); }
  .side-min .pill-nav { padding-left: 12px; padding-right: 12px; }
  /* подписи не исчезают рывком: гаснут и сжимаются вместе с колонкой */
  .pill-nav .brand, .pill-nav > a[data-tab], .acct { white-space: nowrap; overflow: hidden; }
  .pill-nav > a[data-tab] { padding-left: 16px; padding-right: 16px; }
  .acct-wrap .acct { padding-left: 13px; padding-right: 12px; }
  .pill-nav > a[data-tab] span, .acct .acct-name, .acct .chev, .pill-nav .brand .bt { transition: opacity .25s ease, transform .35s cubic-bezier(.3,1.1,.4,1); }
  .side-min .pill-nav > a[data-tab] span, .side-min .acct .acct-name, .side-min .acct .chev { opacity: 0; transform: translateX(-6px); }
  /* в узкой колонке логотип и кнопка не помещаются рядом — остаётся только кнопка, по центру */
  .pill-nav .logo { transition: padding .45s cubic-bezier(.3,1.1,.4,1); }
  .pill-nav .brand { transition: opacity .2s ease, width .45s cubic-bezier(.3,1.1,.4,1); width: 120px; }
  .side-min .pill-nav .logo { padding-left: 15px; padding-right: 15px; }
  .side-min .pill-nav .brand { width: 0; opacity: 0; gap: 0; }
  .side-min .acct-menu { width: 210px; right: auto; }
  .lvl { transition: opacity .3s ease, transform .4s cubic-bezier(.3,1.1,.4,1), visibility .3s, border-color .3s; }
  /* свёрнуто: от карточки остаётся один значок внизу колонки (подсказка — что за подписка) */
  /* без рывков: подписи гаснут и схлопываются по высоте, рамка тает, значок плавно уменьшается */
  .lvl { transition: background-color .4s, border-color .4s, padding .45s cubic-bezier(.3,1.1,.4,1), transform .3s; }
  .lvl > :not(canvas) { max-height: 40px; overflow: hidden; white-space: nowrap; transition: opacity .2s ease, max-height .45s cubic-bezier(.3,1.1,.4,1), margin .45s cubic-bezier(.3,1.1,.4,1); }
  .lvl canvas { transition: width .45s cubic-bezier(.3,1.1,.4,1), height .45s cubic-bezier(.3,1.1,.4,1), margin .45s cubic-bezier(.3,1.1,.4,1); }
  .lvl::after { transition: opacity .2s; }
  .side-min .lvl { background-color: transparent; border-color: transparent; padding: 0 0 6px; overflow: visible; }
  .side-min .lvl::after { opacity: 0; }
  .side-min .lvl > :not(canvas) { opacity: 0; max-height: 0; margin-top: 0; margin-bottom: 0; }
  .side-min .lvl canvas { width: 40px; height: 40px; margin: 0 auto; }
  /* при раскрытии подписи появляются, когда колонка уже почти широкая */
  .lvl > :not(canvas) { transition-delay: .18s, 0s, 0s; }
  .side-min .lvl > :not(canvas) { transition-delay: 0s; }
  .pill-nav .col { flex: none; transition: transform .45s cubic-bezier(.3,1.4,.4,1), border-color .2s; }
  .side-min .pill-nav .col { transform: scaleX(-1); }
  .side-min .nav-glider::after { right: -1px; top: 12px; bottom: 12px; width: 3px; }
  /* пока колонка сужается, плашка выбранного пункта едет вместе с ней, без своей задержки */
  .side-anim .nav-glider { transition: none; }
}

/* ---------- график: горки плавают целиком ----------
   Только сдвиг вверх-вниз, без растяжения: такой сдвиг видеокарта делает готовой картинкой,
   плавно и без перерисовки линии — нечему ни мерцать, ни рваться. */
.chart svg { overflow: hidden; }
.chart .ser { will-change: transform; backface-visibility: hidden; }
.chart .ser-a { animation: serFloatA 8s cubic-bezier(.45,0,.55,1) infinite; }
.chart .ser-b { animation: serFloatB 6s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes serFloatA { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -6px, 0); } }
@keyframes serFloatB { 0%, 100% { transform: translate3d(0, -2px, 0); } 50% { transform: translate3d(0, 4px, 0); } }

/* кнопка суммы нажата — вместо текста крутится значок загрузки */
.amount-chip.sending { position: relative; color: transparent; border-color: #f2f1ed; pointer-events: none; }
.amount-chip.sending::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; border: 2px solid #444; border-top-color: #fff; animation: spin .8s linear infinite; }

/* поля с числом без стрелок «вверх-вниз» */
input[type=number] { -moz-appearance: textfield; appearance: textfield; }
input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------- галочки и кружки выбора в стиле кабинета (вместо системных синих) ---------- */
input[type=checkbox]:not(.switch input), input[type=radio] {
  -webkit-appearance: none; appearance: none; flex: none; width: 18px; height: 18px; margin: 0; padding: 0; cursor: pointer; vertical-align: middle;
  background: #0b0b0b; border: 1.5px solid #4a4a4a; display: inline-grid; place-content: center; transition: border-color .2s, background .2s, box-shadow .2s;
}
input[type=checkbox]:not(.switch input) { border-radius: 5px; }
input[type=radio] { border-radius: 50%; }
input[type=checkbox]:not(.switch input):hover, input[type=radio]:hover { border-color: #8b8a86; }
input[type=checkbox]:not(.switch input)::before { content: ""; width: 10px; height: 10px; transform: scale(0); transition: transform .18s cubic-bezier(.3,1.5,.4,1);
  background: #0a0a0a; clip-path: polygon(14% 52%, 0 66%, 38% 100%, 100% 22%, 86% 8%, 38% 72%); }
input[type=checkbox]:not(.switch input):checked { background: #f2f1ed; border-color: #f2f1ed; box-shadow: 0 0 10px rgba(255,255,255,.25); }
input[type=checkbox]:not(.switch input):checked::before { transform: scale(1); }
input[type=radio]::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff; transform: scale(0); transition: transform .18s cubic-bezier(.3,1.5,.4,1); box-shadow: 0 0 8px rgba(255,255,255,.7); }
input[type=radio]:checked { border-color: #f2f1ed; }
input[type=radio]:checked::before { transform: scale(1); }
input[type=checkbox]:focus-visible, input[type=radio]:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* поле текста нельзя сжать до полоски: минимум три строки, тянется только вниз */
textarea { min-height: 96px; resize: vertical; }