/* GOJUMP — светлый, чистый интерфейс: липкая верхняя панель с логотипом, крупный заголовок без плашки,
   белые карточки на прохладном сером фоне, коралловый акцент бренда и цвета направлений. */

/* Логотип: шрифт Intro, если положить файл в папку fonts/ (Intro.woff2 / Intro.woff / Intro.otf / Intro.ttf).
   Пока файла нет, используется похожий бесплатный Montserrat Black. */
@font-face{font-family:"Intro";font-weight:900;font-style:normal;font-display:swap;
  src:url("fonts/Intro.woff2") format("woff2"),url("fonts/Intro.woff") format("woff"),
      url("fonts/Intro.otf") format("opentype"),url("fonts/Intro.ttf") format("truetype")}

:root{
  --bg:#f4f4f6; --surface:#ffffff; --surface-2:#f7f7f9; --ink:#121216; --muted:#6a6a76; --line:#e5e5ea; --line-2:#d6d6de;
  --accent:#ff4b33; --accent-hover:#ec3a22; --accent-ink:#ffffff; --accent-soft:#ffebe7;
  --ok:#0e8f5a; --ok-soft:#e3f6ec; --warn:#b06400; --warn-soft:#fff3df; --danger:#d0342c;
  --taken:#efeff3; --taken-ink:#a7a7b3; --sel:#121216; --sel-ink:#ffffff;
  --c-coral:#ef4430; --c-violet:#6a4bf2; --c-teal:#0b9384; --c-amber:#c97a00; --c-pink:#d6366f; --c-blue:#2563eb;
  --topbar:rgba(255,255,255,.82);
  --shadow:0 1px 2px rgba(18,18,22,.04),0 6px 20px rgba(18,18,22,.05);
  --f-logo:"Intro","Montserrat","Arial Black",system-ui,sans-serif;
  --f-body:"Onest",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --r:20px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0b0b0e; --surface:#15151a; --surface-2:#1b1b21; --ink:#f2f2f5; --muted:#9a9aa8; --line:#26262e; --line-2:#34343e;
  --accent:#ff5d47; --accent-hover:#ff7360; --accent-ink:#ffffff; --accent-soft:#36191a;
  --ok:#3fd394; --ok-soft:#10291f; --warn:#f2ad44; --warn-soft:#2e2412; --danger:#ff7468;
  --taken:#1c1c22; --taken-ink:#5b5b68; --sel:#f2f2f5; --sel-ink:#121216;
  --c-coral:#ff6a55; --c-violet:#9b85ff; --c-teal:#3cc9b6; --c-amber:#f2b13c; --c-pink:#ff6f9f; --c-blue:#6b9bff;
  --topbar:rgba(11,11,14,.8);
  --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 20px rgba(0,0,0,.2);
  color-scheme:dark}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
a{color:inherit}
.gutter{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.inner{max-width:880px;margin:0 auto}

/* ---------- верхняя панель ---------- */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--topbar)}
.topbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:9;background:var(--topbar);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line)}
.topbar .inner{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px}
.logo{font-family:var(--f-logo);font-weight:900;font-size:26px;letter-spacing:.02em;line-height:1;text-transform:uppercase;text-decoration:none;color:var(--ink);display:inline-flex;align-items:baseline;gap:8px}
.logo .sub{font-family:var(--f-body);font-weight:600;font-size:13px;letter-spacing:0;text-transform:none;color:var(--muted)}
.topbar .actions{gap:8px}

/* ---------- заголовок страницы ---------- */
.intro{padding-block:36px 24px}
.intro h1{font-weight:800;font-size:clamp(30px,6vw,52px);line-height:1.04;letter-spacing:-.025em;margin:0;max-width:18ch;text-wrap:balance}
.intro p{margin:14px 0 0;max-width:56ch;color:var(--muted);font-size:17px}
.badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.badge{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:7px 14px;font-weight:700;font-size:14px;background:var(--surface);border:1px solid var(--line)}
.badge.hot{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}

/* ---------- основная зона ---------- */
main .inner{display:flex;flex-direction:column;gap:16px;padding-bottom:56px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:22px}
.card-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:14px}
h2{font-weight:800;font-size:21px;letter-spacing:-.01em;margin:0}
h3{margin:0;font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:800}
.muted{color:var(--muted)}
.small{font-size:13px}
.note{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px;font-size:14px;margin:0}
.note.warn{background:var(--warn-soft);border-color:transparent}

/* фильтры направлений */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.filter{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);font:700 14px var(--f-body);padding:8px 14px;border-radius:999px;cursor:pointer}
.filter:hover{border-color:var(--ink)}
.filter[aria-pressed="true"]{border-color:var(--dc,var(--sel));background:var(--dc,var(--sel));color:#fff}
.filter.all[aria-pressed="true"]{background:var(--sel);border-color:var(--sel);color:var(--sel-ink)}
.filter[aria-pressed="true"] .cdot{background:#fff}

/* дни */
.days{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 8px;margin:0 -2px;scrollbar-width:thin;scroll-snap-type:x proximity}
.day{flex:0 0 auto;width:70px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);border-radius:16px;padding:10px 4px 9px;cursor:pointer;display:flex;flex-direction:column;align-items:center;font-family:var(--f-body);scroll-snap-align:start}
.day:hover{border-color:var(--line-2)}
.day .wd{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.day .dn{font-weight:800;font-size:24px;line-height:1.15;font-variant-numeric:tabular-nums}
.day .mo{font-size:11px;color:var(--muted)}
.day .dot{margin-top:5px;width:6px;height:6px;border-radius:50%;background:var(--ok)}
.day.full .dot{background:var(--taken-ink)}
.day[aria-pressed="true"]{background:var(--sel);border-color:var(--sel);color:var(--sel-ink)}
.day[aria-pressed="true"] .wd,.day[aria-pressed="true"] .mo{color:inherit;opacity:.7}

/* слоты */
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.slot{position:relative;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:16px;padding:14px 14px 13px 18px;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;font-family:var(--f-body);overflow:hidden;transition:border-color .15s,box-shadow .15s,transform .15s}
.slot::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--dc,var(--accent))}
.slot .dn{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--dc)}
.slot .tm{font-weight:800;font-size:28px;line-height:1.05;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.slot .to{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.slot .st{font-size:13px;font-weight:700;color:var(--ok);margin-top:2px}
.slot .bar{width:100%;height:4px;border-radius:4px;background:var(--taken);overflow:hidden;margin-top:4px}
.slot .bar span{display:block;height:100%;background:var(--dc,var(--accent));border-radius:4px}
.slot:hover:not(:disabled){border-color:var(--dc,var(--accent));box-shadow:var(--shadow);transform:translateY(-1px)}
.slot:disabled{background:var(--taken);border-color:transparent;cursor:default}
.slot:disabled .tm,.slot:disabled .to,.slot:disabled .st{color:var(--taken-ink)}
.slot:disabled::before{opacity:.35}
.slot.mine{background:var(--ok-soft);border-color:var(--ok)}
.slot.mine .st{color:var(--ok)}
.empty{color:var(--muted);padding:22px;border:1.5px dashed var(--line-2);border-radius:16px;text-align:center;grid-column:1/-1}

/* направления */
[data-c]{--dc:var(--c-coral)}
[data-c="violet"]{--dc:var(--c-violet)} [data-c="teal"]{--dc:var(--c-teal)} [data-c="amber"]{--dc:var(--c-amber)}
[data-c="pink"]{--dc:var(--c-pink)} [data-c="blue"]{--dc:var(--c-blue)}
.cdot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--dc);flex:0 0 auto}
.dirs{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.dir{border:1px solid var(--line);border-radius:16px;padding:16px;background:var(--surface-2);display:flex;flex-direction:column;gap:4px}
.dir b{font-size:17px;display:flex;align-items:center;gap:8px}
.dir span{font-size:14px;color:var(--muted)}
.dir .pr{color:var(--ink);font-weight:700;margin-top:4px}
.dtag{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--dc);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:2px 10px 2px 8px;white-space:nowrap}
.ttag{display:inline-flex;align-items:center;font-size:12px;font-weight:800;border-radius:999px;padding:2px 10px;white-space:nowrap;background:var(--surface-2);border:1px solid var(--line);color:var(--muted)}
.ttag.trial{background:var(--ok-soft);border-color:transparent;color:var(--ok)}

/* записи клиента */
.tickets{display:flex;flex-direction:column;gap:10px}
.ticket{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;border:1px solid var(--line);background:var(--surface-2);border-radius:16px;padding:12px 14px 12px 19px;overflow:hidden}
.ticket::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--dc,var(--accent))}
.ticket .tm{font-weight:800;font-size:24px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ticket .dt{min-width:0;display:flex;flex-direction:column;gap:3px;align-items:flex-start}
.ticket .dt small{color:var(--muted);font-size:14px}
.ticket .tags{display:flex;gap:6px;flex-wrap:wrap}
.ticket.past{opacity:.75}

/* кабинет */
.profile{display:flex;justify-content:space-between;gap:16px;align-items:center;flex-wrap:wrap}
.avatar{width:52px;height:52px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-weight:800;font-size:22px;flex:0 0 auto}
.kv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.kv div{background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.kv b{display:block;font-size:20px;font-weight:800}
.kv span{font-size:13px;color:var(--muted)}
.soon{border:1.5px dashed var(--line-2);border-radius:16px;padding:18px;color:var(--muted);text-align:center}

/* кнопки */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;background:var(--accent);color:var(--accent-ink);font:700 16px var(--f-body);padding:13px 22px;border-radius:14px;cursor:pointer;text-decoration:none;transition:background .15s}
.btn:hover:not(:disabled){background:var(--accent-hover)}
.btn:disabled{opacity:.55;cursor:default}
.btn.dark{background:var(--sel);color:var(--sel-ink)}
.btn.block{width:100%}
.ghost{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);font:700 14px var(--f-body);padding:9px 14px;border-radius:12px;cursor:pointer;text-decoration:none}
.ghost:hover{border-color:var(--ink)}
.ghost.danger{color:var(--danger)}
.ghost.sm{padding:6px 11px;font-size:13px;border-radius:10px}
.linkbtn{border:0;background:none;padding:0;color:var(--muted);font:600 14px var(--f-body);text-decoration:underline;cursor:pointer}
.x{border:0;background:transparent;color:inherit;opacity:.7;cursor:pointer;font-size:14px;line-height:1;padding:2px 4px;border-radius:6px}
.x:hover{opacity:1}

/* формы */
.form{display:flex;flex-direction:column;gap:14px}
label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:700;color:var(--muted)}
input,select,textarea{font:500 16px var(--f-body);color:var(--ink);background:var(--surface-2);border:1px solid var(--line-2);border-radius:12px;padding:12px 13px;width:100%}
input:focus,select:focus,textarea:focus{border-color:var(--ink);outline:none;background:var(--surface)}
textarea{resize:vertical;min-height:64px}
.pin{letter-spacing:.6em;font-size:24px;font-weight:800;text-align:center;font-variant-numeric:tabular-nums}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;align-items:center}
.err{color:var(--danger);font-size:14px;font-weight:600;margin:0}
.hint{font-size:13px;color:var(--muted);margin:0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.switch{flex-direction:row;align-items:center;gap:10px;color:var(--ink);font-size:15px;font-weight:600;cursor:pointer}
.switch input{width:20px;height:20px;accent-color:var(--accent)}

/* нижний лист */
.sheet-bg{position:fixed;inset:0;background:rgba(10,10,14,.5);display:flex;align-items:flex-end;justify-content:center;z-index:20;backdrop-filter:blur(3px)}
.sheet{background:var(--surface);width:100%;max-width:480px;border-radius:24px 24px 0 0;padding:22px max(20px,env(safe-area-inset-right,0px)) calc(22px + env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px));display:flex;flex-direction:column;gap:14px;max-height:92vh;overflow:auto;animation:up .2s ease-out}
@media (min-width:640px){.sheet-bg{align-items:center}.sheet{border-radius:24px}}
@keyframes up{from{transform:translateY(24px);opacity:.6}to{transform:none;opacity:1}}
.when{position:relative;display:flex;align-items:center;gap:14px;background:var(--surface-2);border:1px solid var(--line);border-radius:16px;padding:14px 16px 14px 20px;overflow:hidden}
.when::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--dc,var(--accent))}
.when .tm{font-weight:800;font-size:32px;line-height:1;letter-spacing:-.02em}
.when .dt{font-size:14px;color:var(--muted)}
.when .dt b{color:var(--dc);font-size:15px}
.price{display:flex;justify-content:space-between;align-items:center;gap:10px;border-radius:14px;padding:12px 14px;font-weight:700;background:var(--surface-2);border:1px solid var(--line)}
.price.free{background:var(--ok-soft);border-color:transparent;color:var(--ok)}
.steps{display:flex;gap:6px}
.steps i{flex:1;height:4px;border-radius:4px;background:var(--line)}
.steps i.on{background:var(--accent)}

.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--sel);color:var(--sel-ink);padding:12px 18px;border-radius:14px;font-weight:700;z-index:30;max-width:calc(100% - 32px);box-shadow:var(--shadow)}
footer{color:var(--muted);font-size:13px;text-align:center;padding-bottom:calc(28px + env(safe-area-inset-bottom,0px))}

/* ---------- админка ---------- */
.seg{display:inline-flex;gap:4px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:4px;flex-wrap:wrap}
.tab{border:0;background:transparent;color:var(--muted);font:700 14px var(--f-body);padding:9px 14px;border-radius:10px;cursor:pointer}
.tab[aria-selected="true"]{background:var(--sel);color:var(--sel-ink)}
.tab .n{display:inline-block;min-width:20px;margin-left:6px;padding:0 6px;border-radius:999px;background:var(--accent);color:#fff;font-size:12px;font-variant-numeric:tabular-nums}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px 16px}
.stat b{display:block;font-weight:800;font-size:28px;line-height:1.1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat span{font-size:13px;color:var(--muted)}
.group{display:flex;flex-direction:column;gap:8px}
.group + .group{margin-top:20px}
.group-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.group-h h3{text-transform:none;letter-spacing:0;font-size:15px;color:var(--ink)}
.row{display:grid;grid-template-columns:72px 1fr auto;gap:12px;align-items:center;background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:11px 13px}
.row .t{font-weight:800;font-size:19px;font-variant-numeric:tabular-nums;line-height:1.1}
.row .t small{display:block;font-size:12px;color:var(--muted);font-weight:600}
.row .who{min-width:0;display:flex;flex-direction:column;gap:3px}
.row .nm{font-weight:700;overflow-wrap:anywhere}
.row .tags{display:flex;gap:6px;flex-wrap:wrap}
.row .meta{color:var(--muted);font-size:14px;overflow-wrap:anywhere}
.flag{background:var(--warn-soft);color:var(--warn);border-radius:10px;padding:6px 10px;font-size:13px;font-weight:600}
.tag{display:inline-block;font-size:11px;font-weight:800;color:var(--muted);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:0 8px;margin-left:6px;vertical-align:2px}
details summary{cursor:pointer;color:var(--muted);font-weight:700;padding:4px 0}
.search{max-width:360px}
.clients{display:flex;flex-direction:column;gap:8px}
.client{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.client .nm{font-weight:700}
.client .meta{color:var(--muted);font-size:14px}
.client .acts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}

/* редактор направлений */
.week{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.wrow{display:grid;grid-template-columns:120px 1fr;gap:12px;align-items:center;padding:11px 14px;background:var(--surface)}
.wrow + .wrow{border-top:1px solid var(--line)}
.wrow.off{background:var(--surface-2)}
.wname{font-weight:700}
.wname small{display:block;font-weight:500;color:var(--muted);font-size:12px}
.times{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.chip{display:inline-flex;align-items:center;gap:4px;background:var(--dc,var(--sel));color:#fff;border-radius:999px;padding:5px 6px 5px 12px;font-weight:700;font-size:15px;font-variant-numeric:tabular-nums}
.chip .x{color:#fff}
.addtime{display:inline-flex;gap:4px;align-items:center}
.addtime input{width:120px;padding:7px 9px;font-size:15px}
.addtime button{padding:7px 11px}
.durs{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.durs button{border:1px solid var(--line-2);background:var(--surface);color:var(--ink);font:700 14px var(--f-body);padding:7px 12px;border-radius:999px;cursor:pointer}
.durs button[aria-pressed="true"]{border-color:var(--sel);background:var(--sel);color:var(--sel-ink)}
.durs input{width:110px}
.closed{display:flex;gap:6px;flex-wrap:wrap}
.closed .chip{background:var(--accent-soft);color:var(--ink);font-weight:700;font-size:14px}
.closed .chip .x{color:var(--ink)}
.dcard{position:relative;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow);padding:20px 20px 20px 25px;display:flex;flex-direction:column;gap:14px;overflow:hidden}
.dcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--dc)}
.dcard-h{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.dcard-h input{flex:1 1 200px;font-size:19px;font-weight:800}
.swatches{display:flex;gap:6px;flex-wrap:wrap}
.swatch{width:30px;height:30px;border-radius:50%;border:3px solid var(--surface);background:var(--dc);box-shadow:0 0 0 1px var(--line-2);cursor:pointer;padding:0}
.swatch[aria-pressed="true"]{box-shadow:0 0 0 2.5px var(--dc)}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.conflict{color:var(--warn);font-size:12px;font-weight:700}
.login{max-width:420px;width:100%;margin:24px auto 0}
.savebar{position:sticky;bottom:calc(12px + env(safe-area-inset-bottom,0px));display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:10px 12px 10px 16px;box-shadow:var(--shadow);z-index:5}

@media (max-width:560px){
  .grid2,.grid3{grid-template-columns:1fr}
  .slots{grid-template-columns:repeat(2,minmax(0,1fr))}
  .slot .tm{font-size:24px}
  .row{grid-template-columns:58px 1fr}
  .row > .ghost{grid-column:2;justify-self:start}
  .wrow{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kv{gap:6px}
  .kv div{padding:10px}
  .kv b{font-size:17px}
  .kv span{font-size:12px}
  .client{grid-template-columns:1fr}
  .client .acts{justify-content:flex-start}
  .ticket{grid-template-columns:auto 1fr}
  .ticket > .ghost{grid-column:2;justify-self:start}
  .logo{font-size:22px}
  .topbar .ghost{padding:8px 11px;font-size:13px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- цветная шапка ---------- */
body{--hdr1:#ff4b33;--hdr2:#ff8a3d}
body[data-hdr="violet"]{--hdr1:#5b3fe0;--hdr2:#9b6bff}
body[data-hdr="teal"]{--hdr1:#08877a;--hdr2:#1fb39b}
body[data-hdr="ink"]{--hdr1:#141418;--hdr2:#34343f}
body[data-hdr="blue"]{--hdr1:#1d4fd8;--hdr2:#3b8bf6}
body[data-hdr="pink"]{--hdr1:#d6266a;--hdr2:#ff6a8e}
body::before{background:var(--hdr1)}
.hdr{position:relative;overflow:hidden;color:#fff;background:linear-gradient(120deg,var(--hdr1) 0%,var(--hdr2) 100%)}
.hdr::before{content:"";position:absolute;right:-12%;top:-60%;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.22),rgba(255,255,255,0) 65%);pointer-events:none}
.hdr::after{content:"";position:absolute;left:-10%;bottom:-70%;width:55%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(0,0,0,.12),rgba(0,0,0,0) 65%);pointer-events:none}
.hdr > *{position:relative;z-index:1}
.hdr .topbar{position:relative;top:auto;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:1px solid rgba(255,255,255,.18)}
.hdr .logo{color:#fff}
.hdr .logo .sub{color:rgba(255,255,255,.75)}
.hdr .ghost{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.32);color:#fff}
.hdr .ghost:hover{background:rgba(255,255,255,.24);border-color:#fff}
.hdr .intro{padding-block:36px 64px}
.hdr .intro p{color:rgba(255,255,255,.86)}
.hdr .badge{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3);color:#fff}
.hdr .badge.hot{background:#fff;border-color:#fff;color:#121216}
.hdr .badge.hot::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--hdr1)}
.hdr .linkbtn{color:rgba(255,255,255,.85)}
.hdr .seg{background:rgba(255,255,255,.14);border-color:transparent}
.hdr .tab{color:rgba(255,255,255,.85)}
.hdr .tab[aria-selected="true"]{background:#fff;color:#121216}
.hdr ~ main > .inner{margin-top:-36px;position:relative}
.hdrpick{display:flex;gap:8px;flex-wrap:wrap}
.hdrpick button{width:44px;height:30px;border-radius:10px;border:3px solid var(--surface);box-shadow:0 0 0 1px var(--line-2);cursor:pointer;padding:0}
.hdrpick button[aria-pressed="true"]{box-shadow:0 0 0 2.5px var(--ink)}

/* ---------- абонементы ---------- */
.pgroups{display:flex;flex-direction:column;gap:18px}
.pgroup-h{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.pgroup-h b{display:flex;align-items:center;gap:8px;font-size:17px}
.plans{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.plan{position:relative;border:1px solid var(--line);background:var(--surface-2);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:4px;overflow:hidden}
.plan.top{border-color:var(--dc,var(--ink))}
.plan .pn{font-weight:800;font-size:22px;letter-spacing:-.02em}
.plan .pp{font-weight:800;font-size:20px}
.plan .ps{font-size:13px;color:var(--muted)}
.plan .btn{margin-top:10px;padding:10px 14px;font-size:14px}
.plan.unl{background:linear-gradient(135deg,var(--hdr1),var(--hdr2));color:#fff;border-color:transparent}
.plan.unl .ps{color:rgba(255,255,255,.85)}
.plan.unl .btn{background:#fff;color:#121216}
.subcard{position:relative;border:1px solid var(--line);background:var(--surface-2);border-radius:16px;padding:14px 16px 14px 21px;display:flex;flex-direction:column;gap:8px;overflow:hidden}
.subcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--dc,var(--ink))}
.subcard .sh{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;flex-wrap:wrap}
.subcard b{font-size:16px}
.meter{height:8px;border-radius:8px;background:var(--taken);overflow:hidden}
.meter span{display:block;height:100%;background:var(--dc,var(--accent));border-radius:8px}
.state{display:inline-flex;font-size:12px;font-weight:800;border-radius:999px;padding:2px 10px;background:var(--surface);border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.state.active{background:var(--ok-soft);border-color:transparent;color:var(--ok)}
.state.pending{background:var(--warn-soft);border-color:transparent;color:var(--warn)}
.payopts{display:flex;flex-direction:column;gap:8px}
.payopt{display:flex;align-items:center;gap:12px;border:1px solid var(--line-2);border-radius:14px;padding:12px 14px;cursor:pointer;color:var(--ink);font-size:15px;font-weight:600;flex-direction:row}
.payopt input{width:20px;height:20px;accent-color:var(--accent);flex:0 0 auto}
.payopt small{display:block;color:var(--muted);font-weight:500;font-size:13px}
.payopt:has(input:checked){border-color:var(--ink);background:var(--surface-2)}
.ttag.sub{background:var(--surface);color:var(--ink)}
.subs{display:flex;flex-direction:column;gap:10px}
.prow{display:grid;grid-template-columns:1fr auto auto auto auto;gap:8px;align-items:center;padding:8px 0;border-top:1px solid var(--line)}
.prow:first-child{border-top:0}
.prow input,.prow select{padding:8px 10px;font-size:15px}
.prow .pt{font-weight:700;font-size:14px;min-width:0}
@media (max-width:560px){
  .plans{grid-template-columns:1fr;gap:8px}
  .plan{display:grid;grid-template-columns:1fr auto auto;column-gap:10px;row-gap:0;align-items:center;padding:12px 12px 12px 14px}
  .plan .pn{grid-column:1;grid-row:1;font-size:18px}
  .plan .sd{grid-column:1;grid-row:2}
  .plan .pp{grid-column:2;grid-row:1;text-align:right;font-size:17px}
  .plan .pe{grid-column:2;grid-row:2;text-align:right}
  .plan{grid-template-columns:1fr auto}
  .plan .btn{grid-column:1/-1;grid-row:3;margin-top:10px;width:100%}
  .prow{grid-template-columns:1fr 1fr}
  .prow .pt{grid-column:1/-1}
  .hdr .intro{padding-block:26px 56px}
}
[data-c="ink"]{--dc:var(--ink)}

.slot .ff{font-size:12px;font-weight:700;color:var(--accent);margin-top:2px}
.slot:disabled .ff{display:none}
.singles{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.single{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 14px;background:var(--surface-2)}
.single + .single{border-top:1px solid var(--line)}
.single .cdot{vertical-align:1px}
.consent a{color:var(--ink)}
footer a{color:var(--muted)}
.dtoggles{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.dtoggle{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;background:var(--surface)}
.dtoggle + .dtoggle{border-top:1px solid var(--line)}
.dtoggle .n{display:flex;align-items:center;gap:10px;font-weight:700}
.dtoggle small{display:block;color:var(--muted);font-weight:500;font-size:13px}
.tgl{position:relative;width:52px;height:30px;flex:0 0 auto;cursor:pointer}
.tgl input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:1}
.tgl span{position:absolute;inset:0;border-radius:999px;background:var(--line-2);transition:background .15s}
.tgl span::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .15s}
.tgl input:checked + span{background:var(--ok)}
.tgl input:checked + span::after{transform:translateX(22px)}
.tgl input:focus-visible + span{outline:3px solid var(--accent);outline-offset:2px}
.dcard.hiddendir{opacity:.6}
.trialchips{display:flex;gap:6px;flex-wrap:wrap}
.trialchips button{border:1px solid var(--line-2);background:var(--surface);color:var(--ink);font:600 12px var(--f-body);padding:4px 10px;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.trialchips button.done{background:var(--surface-2);color:var(--muted);text-decoration:line-through}
.trialchips button.free{background:var(--ok-soft);border-color:transparent;color:var(--ok)}
.trialchips button:disabled{cursor:default}

.plan .pn,.plan .pp,.plan .pe{white-space:nowrap}

/* логотип */
.logo{align-items:center}
.logo img{height:38px;width:auto;max-width:130px;object-fit:contain;border-radius:8px;display:block}
.logobox{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.logoprev{width:180px;height:96px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(120deg,var(--hdr1),var(--hdr2));overflow:hidden;padding:12px}
.logoprev img{max-width:156px;max-height:72px;width:auto;height:auto;object-fit:contain}
.logoprev .muted{color:rgba(255,255,255,.85)}
.ttag.late{background:var(--warn-soft);border-color:transparent;color:var(--warn)}
@media (max-width:560px){.logo img{height:32px;max-width:96px}}

/* своя картинка шапки: фото + затемнение, чтобы текст читался */
body.has-hdrimg .hdr{background:linear-gradient(180deg,rgba(8,8,12,.62) 0%,rgba(8,8,12,.38) 55%,rgba(8,8,12,.55) 100%),var(--hdr-img) center/cover no-repeat,var(--hdr1)}
body.has-hdrimg .hdr::before,body.has-hdrimg .hdr::after{display:none}
.hdrimgbox{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.hdrprev{position:relative;width:280px;max-width:100%;aspect-ratio:16/6;border-radius:14px;overflow:hidden;background:linear-gradient(120deg,var(--hdr1),var(--hdr2));display:flex;align-items:flex-end;padding:10px 12px;color:#fff;font-weight:800;font-size:15px}
.hdrprev.img{background:linear-gradient(180deg,rgba(8,8,12,.6),rgba(8,8,12,.4)),var(--prev) center/cover no-repeat}
.hdrprev span{position:relative}
.spec{margin:0;padding-left:18px;color:var(--muted);font-size:13px;line-height:1.55}