@charset "UTF-8";
/* Личный кабинет: те же токены бренда (style.css/modern.css), новые компоненты */

body.cab-body { min-height: 100vh; }
body.cab-body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 50% at 85% -10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%),
    radial-gradient(50% 40% at 0% 100%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%);
}
.happ.cab-body::before {
  background:
    radial-gradient(60% 50% at 85% -10%, rgba(255,255,255,.08), transparent 70%),
    radial-gradient(50% 40% at 0% 100%, rgba(255,255,255,.04), transparent 70%);
}
[data-screen] { display: none; }
body[data-view="login"] [data-screen="login"] { display: grid; }
body[data-view="app"] [data-screen="app"] { display: block; }

.cab-wrap { width: min(1120px, calc(100% - 32px)); margin-inline: auto; }

/* ---- верхняя панель ---- */
.cab-top { position: sticky; top: 12px; z-index: 40; margin: 12px auto 0; width: min(1120px, calc(100% - 32px)); }
.cab-top .bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; padding: 8px 12px 8px 18px;
  border: 1px solid var(--hair-strong); border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--paper) 78%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.cab-top .brand { margin: 0; }
.cab-user { display: flex; align-items: center; gap: 10px; min-width: 0; }
.chip-mail { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--muted); padding: 7px 12px; border-radius: var(--r-pill); background: var(--glass); border: 1px solid var(--hair); }
.btn-ghost {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: var(--r-pill);
  border: 1px solid var(--hair-strong); background: transparent; font-weight: 600; font-size: 14px; color: var(--ink);
}
.btn-ghost:hover { background: var(--glass); }
.btn-solid {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 22px; border-radius: var(--r-pill);
  border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: 15px;
}
.btn-solid:hover { filter: brightness(1.06); }
.btn-solid.block { width: 100%; }
.btn-sm { min-height: 36px; padding: 0 14px; font-size: 13px; }

/* ---- вход ---- */
.login { min-height: 100vh; place-items: center; padding: 28px 16px; }
.login-card {
  width: min(440px, 100%); padding: 34px 30px 26px; border-radius: var(--r-lg);
  border: 1px solid var(--hair-strong); background: color-mix(in srgb, var(--surface) 86%, transparent);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 30px 80px -30px rgba(0,0,0,.45);
  display: grid; gap: 16px;
}
.login-card .brand { justify-self: center; margin-bottom: 4px; }
.login-card h1 { margin: 0; font-size: 30px; letter-spacing: -0.04em; text-align: center; text-wrap: balance; }
.login-card .sub { margin: 0; text-align: center; color: var(--muted); font-size: 15px; line-height: 1.5; }
.f { display: grid; gap: 7px; }
.f label { font-size: 13px; color: var(--muted); }
.f input {
  height: 50px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--hair-strong); background: color-mix(in srgb, var(--paper) 60%, transparent);
  color: var(--ink); font: inherit; font-size: 16px; min-width: 0;
}
.f input:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.f-err { margin: 0; color: #f08a7e; font-size: 13px; }
.karing .f-err { color: #b3382c; }
.login-foot { display: grid; gap: 8px; justify-items: center; text-align: center; font-size: 14px; color: var(--muted); }
.login-foot a { color: var(--accent); font-weight: 600; }
.demo-note { margin: 0; padding: 10px 12px; border-radius: 12px; border: 1px dashed var(--hair-strong); font-size: 12.5px; color: var(--muted); text-align: center; }
.login-split { display: grid; grid-template-columns: 1.05fr 1fr; width: min(980px, 100%); gap: 0; border-radius: var(--r-lg); border: 1px solid var(--hair-strong); overflow: hidden; background: color-mix(in srgb, var(--surface) 86%, transparent); }
.login-split .login-card { border: 0; border-radius: 0; box-shadow: none; width: auto; backdrop-filter: none; background: transparent; padding: 42px 38px; }
.login-aside { padding: 42px 38px; display: grid; align-content: space-between; gap: 22px; background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 22%, var(--surface)), var(--surface)); border-left: 1px solid var(--hair); }
.happ .login-aside { background: linear-gradient(160deg, #3b3b3b, #2b2b2b); }
.login-aside h2 { margin: 0; font-size: 28px; letter-spacing: -.04em; text-wrap: balance; }
.login-aside ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.login-aside li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.4; }
.login-aside li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; background: var(--accent); }
@media (max-width: 820px) { .login-split { grid-template-columns: 1fr; } .login-aside { display: none; } }

/* ---- карточки ---- */
.cab { padding-block: 22px 70px; display: grid; gap: 18px; }
.c-card { padding: 24px; border-radius: var(--r-lg); border: 1px solid var(--hair-strong); background: color-mix(in srgb, var(--surface) 80%, transparent); min-width: 0; }
.c-card h2, .c-card h3 { margin: 0 0 6px; letter-spacing: -0.03em; }
.c-card h2 { font-size: 22px; }
.c-card h3 { font-size: 17px; }
.c-card p { color: var(--muted); line-height: 1.5; margin: 0; }
.c-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
@media (max-width: 860px) { .grid2, .grid3 { grid-template-columns: 1fr; } .grid4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }

.pill { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: var(--r-pill); font-size: 12.5px; font-weight: 700; letter-spacing: .02em; border: 1px solid var(--hair-strong); background: var(--glass); }
.pill.ok::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent); }
.happ .pill.ok::before { background: #8fe3b4; }
.pill.max { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

.status-hero { position: relative; overflow: hidden; display: grid; gap: 18px; padding: 30px; }
.status-hero::after { content: ""; position: absolute; inset: auto -60px -80px auto; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 22%, transparent), transparent); pointer-events: none; }
.status-hero h1 { margin: 0; font-size: clamp(30px, 5vw, 46px); letter-spacing: -0.045em; line-height: 1.04; text-wrap: balance; }
.status-hero .row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; position: relative; z-index: 1; }
.bar-days { height: 10px; border-radius: 99px; background: var(--hair); overflow: hidden; }
.bar-days > i { display: block; height: 100%; width: 93%; border-radius: 99px; background: var(--accent); }
.bar-cap { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); gap: 12px; flex-wrap: wrap; }

.stat { padding: 18px; border-radius: var(--r-md); border: 1px solid var(--hair); background: var(--glass); display: grid; gap: 4px; }
.stat b { font-size: 26px; letter-spacing: -0.04em; }
.stat span { color: var(--muted); font-size: 13px; }

/* ---- ключ ---- */
.keybox { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.keybox code {
  flex: 1 1 260px; min-width: 0; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--hair-strong); background: color-mix(in srgb, var(--paper) 62%, transparent);
  font: 600 13.5px/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center;
}
.key-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.steps3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin: 18px 0 0; padding: 0; list-style: none; counter-reset: s; }
.steps3 li { counter-increment: s; padding: 16px; border-radius: var(--r-md); border: 1px solid var(--hair); background: var(--glass); display: grid; gap: 6px; font-size: 14px; line-height: 1.45; color: var(--muted); }
.steps3 li::before { content: counter(s); width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-weight: 800; font-size: 13px; }
.steps3 li b { color: var(--ink); font-size: 15px; }
@media (max-width: 700px) { .steps3 { grid-template-columns: 1fr; } }

/* ---- серверы ---- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.chips button { min-height: 38px; padding: 0 14px; border-radius: var(--r-pill); border: 1px solid var(--hair-strong); background: transparent; font-weight: 600; font-size: 14px; }
.chips button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.srv { display: grid; gap: 8px; }
.srv-row { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; width: 100%; text-align: left; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--hair); background: var(--glass); }
.srv-row[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.srv-row .flag { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 16%, transparent); font-weight: 800; font-size: 13px; color: var(--accent); }
.karing .srv-row .flag { color: var(--accent); }
.srv-row b { display: block; font-size: 15px; }
.srv-row small { color: var(--muted); font-size: 12.5px; }
.srv-row .ms { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.srv-row .ms i { font-style: normal; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--accent); }
.srv-row[hidden] { display: none; }
.srv-note { margin-top: 10px; font-size: 13px; color: var(--muted); }
.tag-max { margin-left: 6px; padding: 2px 8px; border-radius: 99px; font-size: 11px; font-weight: 800; background: var(--accent); color: var(--accent-ink); vertical-align: 2px; }

/* ---- устройства ---- */
.dev { display: grid; gap: 8px; }
.dev-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--hair); background: var(--glass); }
.dev-row .ic { flex: none; }
.dev-row div { min-width: 0; flex: 1; }
.dev-row b { display: block; font-size: 15px; }
.dev-row small { color: var(--muted); font-size: 12.5px; }

/* ---- продление ---- */
.renew-terms { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; margin: 14px 0; }
.rt { position: relative; text-align: left; padding: 16px 14px; border-radius: 16px; border: 1px solid var(--hair-strong); background: var(--glass); display: grid; gap: 3px; }
.rt[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.rt b { font-size: 18px; letter-spacing: -.03em; }
.rt small { color: var(--muted); font-size: 12.5px; }
.rt .off { position: absolute; top: 10px; right: 10px; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 99px; background: var(--accent); color: var(--accent-ink); }
.seg { display: inline-grid; grid-auto-flow: column; padding: 4px; gap: 4px; border-radius: var(--r-pill); border: 1px solid var(--hair-strong); background: var(--glass); }
.seg button { min-height: 38px; padding: 0 18px; border-radius: var(--r-pill); border: 0; background: transparent; font-weight: 700; font-size: 14px; }
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.renew-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.renew-foot p { font-size: 13px; }
@media (max-width: 760px) { .renew-terms { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* ---- история ---- */
.hist { width: 100%; border-collapse: collapse; font-size: 14px; }
.hist th { text-align: left; font-weight: 600; color: var(--muted); font-size: 12.5px; padding: 0 0 10px; }
.hist td { padding: 12px 0; border-top: 1px solid var(--hair); }
.hist td:last-child, .hist th:last-child { text-align: right; }
.scroll-x { overflow-x: auto; }

/* ---- помощь ---- */
.help-list { display: grid; gap: 10px; }
.help-list a, .help-list button { display: flex; justify-content: space-between; align-items: center; gap: 12px; text-align: left; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--hair); background: var(--glass); font-weight: 600; font-size: 15px; }
.help-list a:hover, .help-list button:hover { border-color: var(--hair-strong); }
.help-list small { display: block; font-weight: 400; color: var(--muted); font-size: 13px; margin-top: 2px; }
.tg { color: var(--accent); }

/* ---- B: боковая панель ---- */
.cab-b { display: grid; grid-template-columns: 240px minmax(0,1fr); gap: 22px; padding-block: 22px 70px; align-items: start; }
.side { position: sticky; top: 88px; display: grid; gap: 6px; padding: 12px; border-radius: var(--r-lg); border: 1px solid var(--hair-strong); background: color-mix(in srgb, var(--surface) 80%, transparent); }
.side button { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 14px; border: 0; border-radius: 14px; background: transparent; text-align: left; font-weight: 600; font-size: 15px; color: var(--muted); }
.side button .ic { width: 22px; height: 22px; background: none; border: 0; display: inline-grid; place-items: center; }
.side button[aria-current="true"] { background: var(--accent); color: var(--accent-ink); }
.side .plan-mini { margin-top: 8px; padding: 14px; border-radius: 14px; border: 1px solid var(--hair); background: var(--glass); font-size: 13px; color: var(--muted); display: grid; gap: 4px; }
.side .plan-mini b { color: var(--ink); font-size: 15px; }
.sec { display: none; gap: 18px; }
.sec.on { display: grid; }
@media (max-width: 900px) {
  .cab-b { grid-template-columns: 1fr; }
  .side { position: static; grid-auto-flow: column; overflow-x: auto; padding: 6px; }
  .side button { min-height: 44px; white-space: nowrap; padding: 0 14px; }
  .side .plan-mini { display: none; }
}

/* ---- C: диагностика ---- */
.diag { display: grid; grid-template-columns: 1.1fr 1fr; gap: 26px; align-items: center; }
@media (max-width: 860px) { .diag { grid-template-columns: 1fr; } }
.ring { position: relative; width: 190px; height: 190px; justify-self: center; display: grid; place-items: center; }
.ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 10; }
.ring .bg { stroke: var(--hair-strong); }
.ring .fg { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 502; stroke-dashoffset: 36; transition: stroke-dashoffset .6s var(--ease), stroke .3s; }
.ring[data-state="run"] .fg { stroke-dashoffset: 380; }
.ring b { font-size: 44px; letter-spacing: -.05em; line-height: 1; }
.ring span { display: block; font-size: 13px; color: var(--muted); text-align: center; margin-top: 4px; }
.checks { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.checks li { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 14px; border: 1px solid var(--hair); background: var(--glass); font-size: 14.5px; color: var(--muted); }
.checks li::before { content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--hair-strong); }
.checks li[data-s="run"]::before { border-color: var(--accent); border-top-color: transparent; animation: spin .7s linear infinite; }
.checks li[data-s="ok"] { color: var(--ink); }
.checks li[data-s="ok"]::before { background: var(--accent) center/12px no-repeat; border-color: var(--accent); }
@keyframes spin { to { transform: rotate(360deg); } }
.quick { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
.quick button, .quick a { text-align: left; display: grid; gap: 8px; align-content: start; padding: 18px; border-radius: var(--r-md); border: 1px solid var(--hair-strong); background: color-mix(in srgb, var(--surface) 80%, transparent); min-height: 128px; }
.quick button:hover, .quick a:hover { border-color: var(--accent); }
.quick b { font-size: 16px; letter-spacing: -.02em; }
.quick small { color: var(--muted); font-size: 13px; line-height: 1.4; }
@media (max-width: 860px) { .quick { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* ---- прочее ---- */
.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 20px); opacity: 0; pointer-events: none; z-index: 90; padding: 12px 18px; border-radius: var(--r-pill); background: var(--ink); color: var(--paper); font-weight: 600; font-size: 14px; transition: .25s var(--ease); max-width: calc(100% - 32px); text-align: center; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.cab-dialog { border: 1px solid var(--hair-strong); border-radius: var(--r-lg); background: var(--surface); color: var(--ink); padding: 28px; width: min(440px, calc(100% - 32px)); }
.cab-dialog::backdrop { background: rgba(0,0,0,.55); }
.cab-dialog h2 { margin: 0 0 8px; }
.cab-dialog p { color: var(--muted); line-height: 1.5; }
.cab-dialog .row { display: grid; gap: 10px; margin-top: 18px; }
.cab-foot { text-align: center; color: var(--muted); font-size: 13px; padding: 0 16px 30px; }

/* ===== кабинет v2: чат, друзья, подарки, оформление, настройки ===== */
body.cab-body.th-light { --paper:#f6f7f6; --surface:#ffffff; --card:#ffffff; --ink:#1d2321; --muted:#66706b; --line:#dde3df; }
body.happ.cab-body.th-light { --accent:#2b2b2b; --accent-ink:#ffffff; }
body.karing.cab-body.th-dark { --paper:#141816; --surface:#1c211e; --card:#242a26; --ink:#f2f5f3; --muted:#9aa7a0; --line:#34403a; --accent:#3fb97a; --accent-ink:#06210f; }
body.cab-body.th-dark.incy, body.cab-body.th-dark.happ { }
.banner { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; border-radius:16px; border:1px solid var(--hair-strong); background:color-mix(in srgb, var(--accent) 14%, var(--surface)); font-size:14px; }
.banner button.x { border:0; background:transparent; font-size:20px; line-height:1; width:32px; height:32px; border-radius:50%; }
.banner[hidden] { display:none; }
.row-tg { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

/* чат */
.chat { display:grid; grid-template-rows:auto 1fr auto; min-height:460px; border-radius:var(--r-lg); border:1px solid var(--hair-strong); background:color-mix(in srgb, var(--surface) 80%, transparent); overflow:hidden; }
.chat-top { display:flex; gap:8px; align-items:center; padding:12px 14px; border-bottom:1px solid var(--hair); flex-wrap:wrap; }
.chat-top .chips { margin:0; }
.msgs { padding:16px; display:grid; gap:10px; align-content:start; max-height:420px; overflow-y:auto; }
.msg { max-width:82%; padding:11px 15px; border-radius:18px; font-size:15px; line-height:1.45; }
.msg.me { justify-self:end; background:var(--accent); color:var(--accent-ink); border-bottom-right-radius:6px; }
.msg.ai { justify-self:start; background:var(--glass); border:1px solid var(--hair); border-bottom-left-radius:6px; }
.chat-in { display:flex; gap:8px; padding:12px; border-top:1px solid var(--hair); }
.chat-in input { flex:1; min-width:0; height:46px; padding:0 16px; border-radius:var(--r-pill); border:1px solid var(--hair-strong); background:color-mix(in srgb, var(--paper) 60%, transparent); color:var(--ink); font:inherit; }
.sugg { display:flex; gap:8px; flex-wrap:wrap; padding:0 16px 12px; }
.sugg button { min-height:34px; padding:0 12px; border-radius:var(--r-pill); border:1px solid var(--hair-strong); background:transparent; font-size:13px; }

/* друзья / подарки */
.ref-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:16px; }
.how { display:grid; gap:10px; margin:16px 0 0; padding:0; list-style:none; }
.how li { display:flex; gap:12px; align-items:flex-start; padding:12px 14px; border-radius:14px; border:1px solid var(--hair); background:var(--glass); font-size:14.5px; color:var(--muted); line-height:1.45; }
.how li b { color:var(--ink); }
.how .n { flex:none; width:26px; height:26px; border-radius:50%; background:var(--accent); color:var(--accent-ink); display:grid; place-items:center; font-weight:800; font-size:12px; }
.inline-form { display:flex; gap:8px; flex-wrap:wrap; }
.inline-form input { flex:1 1 180px; min-width:0; height:46px; padding:0 16px; border-radius:14px; border:1px solid var(--hair-strong); background:color-mix(in srgb, var(--paper) 60%, transparent); color:var(--ink); font:inherit; }

/* оформление */
.theme-seg { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.theme-seg button { padding:14px; border-radius:16px; border:1px solid var(--hair-strong); background:var(--glass); display:grid; gap:10px; text-align:left; font-weight:700; }
.theme-seg button[aria-pressed="true"] { border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }
.theme-seg i { display:block; height:44px; border-radius:10px; border:1px solid var(--hair); }
.sw-dark { background:linear-gradient(135deg,#1d1f1e,#2b2f2d); } .sw-light { background:linear-gradient(135deg,#ffffff,#e9eeeb); } .sw-auto { background:linear-gradient(90deg,#1d1f1e 50%,#ffffff 50%); }
.swatches { display:flex; gap:12px; flex-wrap:wrap; margin-top:6px; }
.swatches button { width:44px; height:44px; border-radius:50%; border:2px solid var(--hair-strong); }
.swatches button[aria-pressed="true"] { outline:3px solid var(--ink); outline-offset:2px; }
.toggle { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:14px 0; border-top:1px solid var(--hair); font-size:15px; }
.toggle:first-of-type { border-top:0; }
.toggle small { display:block; color:var(--muted); font-size:13px; }
.sw { position:relative; flex:none; width:48px; height:28px; border-radius:99px; border:0; background:var(--hair-strong); }
.sw::after { content:""; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:var(--paper); transition:.2s; }
.sw[aria-pressed="true"] { background:var(--accent); }
.sw[aria-pressed="true"]::after { left:23px; background:var(--accent-ink); }
.kv { display:grid; gap:0; }
.kv > div { display:flex; justify-content:space-between; gap:12px; padding:13px 0; border-top:1px solid var(--hair); font-size:15px; flex-wrap:wrap; }
.kv > div:first-child { border-top:0; }
.kv span { color:var(--muted); }

/* хаб (B) */
.tiles { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.tile { text-align:left; padding:22px; border-radius:var(--r-lg); border:1px solid var(--hair-strong); background:color-mix(in srgb, var(--surface) 80%, transparent); display:grid; gap:10px; min-height:150px; align-content:space-between; }
.tile:hover { border-color:var(--accent); transform:translateY(-2px); transition:.2s; }
.tile .ic { width:46px; height:46px; border-radius:14px; }
.tile b { font-size:18px; letter-spacing:-.03em; display:block; }
.tile small { color:var(--muted); font-size:13.5px; line-height:1.4; }
.tile.wide { grid-column:span 2; }
@media (max-width:860px){ .tiles{grid-template-columns:repeat(2,minmax(0,1fr));} .tile.wide{grid-column:span 2;} .ref-stats{grid-template-columns:1fr;} }
.back { display:inline-flex; align-items:center; gap:8px; margin-bottom:4px; min-height:40px; padding:0 14px 0 10px; border-radius:var(--r-pill); border:1px solid var(--hair-strong); background:transparent; font-weight:600; font-size:14px; justify-self:start; }

/* нижняя панель (C) */
.cab-c { max-width:620px; margin-inline:auto; padding-bottom:110px; }
.cab-c .cab-top, .cab-c-top { width:min(620px, calc(100% - 32px)); }
.tabbar { position:fixed; left:50%; transform:translateX(-50%); bottom:calc(14px + env(safe-area-inset-bottom,0px)); z-index:60; width:min(560px, calc(100% - 24px)); display:grid; grid-template-columns:repeat(5,1fr); padding:6px; border-radius:var(--r-pill); border:1px solid var(--hair-strong); background:color-mix(in srgb, var(--paper) 82%, transparent); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); box-shadow:0 20px 50px -20px rgba(0,0,0,.5); }
.tabbar button { display:grid; justify-items:center; gap:2px; padding:8px 2px; border:0; border-radius:var(--r-pill); background:transparent; font-size:11.5px; font-weight:600; color:var(--muted); }
.tabbar button[aria-current="true"] { background:var(--accent); color:var(--accent-ink); }
.tabbar .ic { background:none; border:0; width:24px; height:24px; display:grid; place-items:center; }
body[data-view="login"] .tabbar { display:none; }
.cab-c .status-hero h1 { font-size:clamp(26px,7vw,36px); }
.more-list { display:grid; gap:10px; }
.more-list button { display:flex; align-items:center; gap:14px; padding:16px; border-radius:18px; border:1px solid var(--hair-strong); background:color-mix(in srgb, var(--surface) 80%, transparent); text-align:left; font-weight:700; font-size:16px; }
.more-list small { display:block; font-weight:400; color:var(--muted); font-size:13px; }

/* ===== v2.1: подключение по шагам, чат поддержки, серверы с пингом ===== */
.plat-tabs { display:flex; gap:8px; flex-wrap:wrap; margin:4px 0 16px; }
.plat-tabs button { min-height:40px; padding:0 16px; border-radius:var(--r-pill); border:1px solid var(--hair-strong); background:transparent; font-weight:600; font-size:14px; }
.plat-tabs button[aria-pressed="true"] { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.wiz { display:grid; gap:14px; }
.wz-path { display:flex; gap:6px; flex-wrap:wrap; list-style:none; margin:0; padding:0; font-size:12.5px; color:var(--muted); }
.wz-path li { display:flex; align-items:center; gap:6px; }
.wz-path li + li::before { content:"→"; opacity:.5; }
.wz-path li[aria-current="true"] { color:var(--ink); font-weight:700; }
.wz-step { display:grid; gap:12px; padding:22px; border-radius:var(--r-md); border:1px solid var(--hair-strong); background:var(--glass); }
.wz-step h3 { margin:0; font-size:21px; letter-spacing:-.03em; text-wrap:balance; }
.wz-step p { margin:0; color:var(--muted); line-height:1.5; font-size:15px; }
.wz-step .note { font-size:13.5px; }
.wz-actions { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.wz-alt { display:grid; gap:8px; margin-top:4px; }
.wz-alt button, .wz-link { display:flex; justify-content:space-between; align-items:center; gap:12px; width:100%; text-align:left; padding:13px 16px; border-radius:14px; border:1px dashed var(--hair-strong); background:transparent; font-weight:600; font-size:14.5px; color:var(--ink); }
.wz-alt button:hover { border-style:solid; border-color:var(--accent); }
.wz-alt button::after { content:"→"; color:var(--muted); }
.wz-back { justify-self:start; display:inline-flex; align-items:center; gap:6px; min-height:34px; padding:0 12px; border-radius:var(--r-pill); border:1px solid var(--hair); background:transparent; font-size:13px; font-weight:600; color:var(--muted); }
.wz-back[hidden] { display:none; }
.tag-ru { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:99px; font-size:12px; font-weight:700; background:color-mix(in srgb, var(--accent) 16%, transparent); color:var(--ink); justify-self:start; }
.region { display:grid; grid-template-columns:minmax(0,1fr) 210px; gap:18px; align-items:start; }
.region ol { margin:0; padding:0; list-style:none; counter-reset:r; display:grid; gap:8px; }
.region li { counter-increment:r; display:flex; gap:10px; align-items:flex-start; font-size:14.5px; line-height:1.45; color:var(--ink); }
.region li::before { content:counter(r); flex:none; width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:800; background:var(--accent); color:var(--accent-ink); margin-top:-1px; }
.region li small { color:var(--muted); }
.region video { width:100%; max-width:210px; aspect-ratio:9/16; border-radius:18px; border:1px solid var(--hair-strong); background:#000; object-fit:cover; }
.region details { grid-column:1 / -1; font-size:14px; color:var(--muted); }
.region summary { cursor:pointer; color:var(--ink); font-weight:600; }
@media (max-width:700px){ .region { grid-template-columns:1fr; } .region video { justify-self:center; } }
.plat-card { display:grid; gap:12px; }
.plat-card .wz-actions { margin-top:2px; }

/* чат поддержки */
.sup { display:grid; grid-template-rows:auto 1fr auto; height:min(560px, 72vh); border-radius:var(--r-lg); border:1px solid var(--hair-strong); background:color-mix(in srgb, var(--surface) 82%, transparent); overflow:hidden; }
.sup-head { display:flex; align-items:center; gap:12px; padding:14px 16px; border-bottom:1px solid var(--hair); }
.sup-head .av { width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:var(--accent); color:var(--accent-ink); font-weight:800; flex:none; }
.sup-head b { display:block; font-size:16px; }
.sup-head small { color:var(--muted); font-size:12.5px; }
.sup-head .live { margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--muted); }
.sup-head .live::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--accent); }
.sup-msgs { padding:16px; overflow-y:auto; display:flex; flex-direction:column; gap:10px; }
.sm { max-width:80%; padding:10px 14px 6px; border-radius:18px; font-size:15px; line-height:1.45; }
.sm p { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; }
.sm img { display:block; max-width:220px; border-radius:12px; margin-bottom:4px; }
.sm time { display:block; text-align:right; font-size:11px; opacity:.6; margin-top:2px; }
.sm.me { align-self:flex-end; background:var(--accent); color:var(--accent-ink); border-bottom-right-radius:6px; }
.sm.op { align-self:flex-start; background:var(--glass); border:1px solid var(--hair); border-bottom-left-radius:6px; }
.sup-in { display:flex; gap:8px; align-items:center; padding:10px 12px; border-top:1px solid var(--hair); }
.sup-in input[type="text"] { flex:1; min-width:0; height:46px; padding:0 16px; border-radius:var(--r-pill); border:1px solid var(--hair-strong); background:color-mix(in srgb, var(--paper) 60%, transparent); color:var(--ink); font:inherit; font-size:16px; }
.sup-attach { flex:none; width:46px; height:46px; display:grid; place-items:center; border-radius:50%; border:1px solid var(--hair-strong); cursor:pointer; color:var(--muted); }
.sup-attach:hover { color:var(--ink); border-color:var(--accent); }
.sup-fab { position:fixed; right:max(18px, env(safe-area-inset-right,0px)); bottom:calc(18px + env(safe-area-inset-bottom,0px)); z-index:55; display:inline-flex; align-items:center; gap:8px; min-height:52px; padding:0 20px 0 16px; border-radius:var(--r-pill); border:0; background:var(--accent); color:var(--accent-ink); font-weight:700; font-size:15px; box-shadow:0 16px 40px -14px rgba(0,0,0,.55); }
.cab-c ~ .sup-fab, body.lay-c .sup-fab { bottom:calc(96px + env(safe-area-inset-bottom,0px)); }
body[data-view="login"] .sup-fab { display:none; }

/* серверы с пингом */
.srv-head { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.srv-sum { font-size:13.5px; color:var(--muted); }
.srv-best { display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; padding:16px; border-radius:18px; background:color-mix(in srgb, var(--accent) 14%, var(--surface)); border:1px solid color-mix(in srgb, var(--accent) 40%, transparent); margin-bottom:6px; }
.srv-best small { display:block; font-size:12px; color:var(--muted); font-weight:600; }
.srv-best b { font-size:17px; }
.srv-best .ms b { font-size:22px; }
.srv-row .flag, .srv-best .flag { font-size:20px; }
.srv-row .res { display:inline-flex; align-items:center; gap:10px; }
.srv-row .ms, .srv-best .ms { font-size:13px; color:var(--muted); white-space:nowrap; font-variant-numeric:tabular-nums; display:inline-flex; align-items:center; gap:6px; }
.srv-row .ms b { color:var(--ink); font-size:15px; }
.bars { display:inline-flex; align-items:flex-end; gap:2px; height:14px; }
.bars i { width:4px; border-radius:2px; background:var(--hair-strong); }
.bars i:nth-child(1){height:5px} .bars i:nth-child(2){height:8px} .bars i:nth-child(3){height:11px} .bars i:nth-child(4){height:14px}
.bars i.on { background:var(--accent); }
.sk { width:64px; height:12px; border-radius:6px; background:linear-gradient(90deg, var(--hair) 25%, var(--hair-strong) 50%, var(--hair) 75%); background-size:200% 100%; animation:sk 1.1s linear infinite; }
@keyframes sk { to { background-position:-200% 0; } }
.srv-udp { margin-top:10px; padding:12px 14px; border-radius:14px; border:1px dashed var(--hair-strong); font-size:13.5px; color:var(--muted); }
.srv-udp summary { cursor:pointer; color:var(--ink); font-weight:600; }
.srv-udp p { margin:8px 0; }
.udp-chips { display:flex; flex-wrap:wrap; gap:6px; }
.udp-chips span { padding:4px 10px; border-radius:99px; border:1px solid var(--hair); font-size:12.5px; }
.srv-alert { padding:14px 16px; border-radius:14px; border:1px solid #d97757; background:color-mix(in srgb, #d97757 12%, transparent); font-size:14px; line-height:1.45; margin-bottom:8px; }

/* внутри Telegram: выхода нет, шапка ближе к краю */
.in-tg [data-logout] { display: none; }
.in-tg .cab-top { top: 6px; margin-top: 6px; }


/* ===== 30.10 мини-приложение: бургер-меню вместо горизонтальной полосы, поддержка не перекрывает ввод ===== */
.burger { display: none; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px 0 10px; margin-left: auto; margin-right: 8px; border-radius: var(--r-pill); border: 1px solid var(--hair-strong); background: var(--glass); color: var(--ink); font-weight: 700; font-size: 14px; max-width: 46vw; }
.burger svg { width: 20px; height: 20px; flex: none; }
.burger span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-backdrop { position: fixed; inset: 0; z-index: 65; background: rgba(0,0,0,.5); }
.sup { grid-template-rows: auto 1fr auto auto; }
.sup-mail { padding: 10px 12px 0; border-top: 1px solid var(--hair); }
.sup-mail input { width: 100%; height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--hair-strong); background: color-mix(in srgb, var(--paper) 60%, transparent); color: var(--ink); font: inherit; font-size: 15px; }
.sup-mail[hidden] { display: none; }
.sup-mail + .sup-in { border-top: 0; }
.sm.sys { align-self: center; max-width: 92%; background: transparent; border: 1px dashed var(--hair-strong); color: var(--muted); font-size: 13.5px; text-align: center; }
body[data-sec="help"] .sup-fab { display: none; }
@media (max-width: 900px) {
  .burger { display: inline-flex; }
  .cab-b { grid-template-columns: 1fr; padding-top: 14px; }
  .side { position: fixed; top: 0; bottom: 0; left: 0; z-index: 70; width: min(300px, 86vw); grid-auto-flow: row; align-content: start; overflow-x: hidden; overflow-y: auto; gap: 4px; padding: calc(18px + env(safe-area-inset-top, 0px)) 12px calc(18px + env(safe-area-inset-bottom, 0px)); border-radius: 0 24px 24px 0; background: var(--surface); transform: translateX(-105%); transition: transform .25s var(--ease); box-shadow: 20px 0 60px -20px rgba(0,0,0,.6); }
  .side button { white-space: normal; min-height: 50px; }
  .side .plan-mini { display: grid; }
  body.menu-open .side { transform: none; }
  body.menu-open { overflow: hidden; }
  .cab-top .brand small { display: none; }
  .sup { height: min(520px, calc(100vh - 170px)); }
  .sup-fab { min-height: 46px; padding: 0 16px 0 12px; font-size: 14px; }
}
@media (max-width: 440px) {
  .cab-top .bar { padding-left: 12px; }
  .chip-mail { display: none; }
  .in-tg .cab-user { display: none; }
}

/* ===== боевой кабинет (happlk.store): макетные разделы без настоящих данных скрыты ===== */
body[data-live="1"] [data-nav="chat"], body[data-live="1"] [data-nav="friends"], body[data-live="1"] [data-nav="gifts"],
body[data-live="1"] .sec[data-sec="home"] .tiles, body[data-live="1"] .banner, body[data-live="1"] [data-rekey],
body[data-live="1"] .c-card:has(.dev), body[data-live="1"] .stat:has([data-dev-count]), body[data-live="1"] .c-card:has(.hist),
body[data-live="1"] .c-card:has(.toggle), body[data-live="1"] .sec[data-sec="help"] .c-card:has([data-rekey]) { display: none !important; }
body.no-sub .status-hero .pill.ok::before { background: var(--muted); box-shadow: none; }
.renew-email { flex: 1 1 240px; min-width: 0; height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--hair-strong); background: color-mix(in srgb, var(--paper) 60%, transparent); color: var(--ink); font: inherit; font-size: 15px; }

.renew-consent { display: flex; gap: 10px; align-items: flex-start; flex-basis: 100%; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.renew-consent input { margin-top: 2px; width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
.renew-consent a { text-decoration: underline; text-underline-offset: 3px; }