/* ═══════════ БАЗА: скелет сайта, общий для всех пяти дизайн-систем ═══════════
   Цвета, шрифты, радиусы и тени приходят токенами из systems/*.css.
   Здесь только структура, сетка и поведение. */

.site *{box-sizing:border-box}
.site{
  background:var(--bg); color:var(--text);
  font-family:var(--font-ui); font-size:var(--fs-base,16px); line-height:1.55;
  -webkit-font-smoothing:antialiased;
  container-type:inline-size;
}
.site img{max-width:100%}
.site a{color:inherit; text-decoration:none}
.site h1,.site h2,.site h3,.site h4{
  font-family:var(--font-head); font-weight:var(--w-head,600);
  letter-spacing:var(--tr-head,-.02em); line-height:1.12; margin:0; text-wrap:balance;
}
.site h1{font-size:var(--fs-h1,clamp(28px,4.6cqw,46px))}
.site h2{font-size:var(--fs-h2,clamp(22px,3cqw,32px))}
.site h3{font-size:var(--fs-h3,19px)}
.site p{margin:0}
.num{font-family:var(--font-num,var(--font-mono)); font-variant-numeric:tabular-nums; letter-spacing:var(--tr-num,0)}

.wrap{width:100%; max-width:var(--maxw,1180px); margin:0 auto; padding:0 20px}
/* статья и длинный текст: оглавление + мера строки 65–75 знаков + врезка не влезают в общую сетку */
.wrap-wide{max-width:1330px}
.stack{display:flex; flex-direction:column}
.sec{padding:var(--sec-pad,48px) 0}
.sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:22px; flex-wrap:wrap}
.sec-head p{color:var(--muted); font-size:14px; max-width:60ch}
.lead{color:var(--muted); font-size:var(--fs-lead,17px); line-height:1.6; max-width:64ch}

/* ─── шапка ─── */
.site-head{
  position:sticky; top:0; z-index:30;
  background:var(--head-bg,var(--surface)); border-bottom:var(--head-bd,1px solid var(--border));
  backdrop-filter:var(--head-blur,none);
}
.site-head .wrap{display:flex; align-items:center; gap:var(--head-gap,26px); min-height:var(--head-h,64px)}
.logo{display:flex; align-items:center; gap:9px; font-family:var(--font-head); font-weight:700;
  font-size:var(--logo-size,17px); letter-spacing:var(--logo-tr,-.02em); white-space:nowrap}
.logo .mark{
  width:26px; height:26px; border-radius:var(--mark-radius,7px); background:var(--mark-bg,var(--accent));
  color:var(--on-accent); display:grid; place-items:center; font-size:13px; font-weight:700; flex:none;
}
.nav{display:none; gap:var(--nav-gap,20px); align-items:center; font-size:var(--nav-size,14px);
  font-weight:var(--nav-weight,500); color:var(--muted); text-transform:var(--nav-tt,none);
  letter-spacing:var(--nav-tr,0)}
.nav a:hover{color:var(--text)}
.nav a[aria-current]{color:var(--accent-text,var(--text)); font-weight:600}
.head-act{margin-left:auto; display:flex; align-items:center; gap:10px}
/* переключатель светлая/тёмная: живёт на токенах системы, поэтому выглядит
   по-своему в каждой из двадцати и нигде не выпадает из шапки */
.theme-tog{display:flex; align-items:center; gap:2px; flex:none; padding:3px;
  background:var(--field-bg,var(--surface-2)); border:var(--sel-bd,1px solid var(--border));
  border-radius:var(--btn-radius,var(--radius-sm,8px))}
.theme-tog button{width:36px; height:36px; display:grid; place-items:center; flex:none;
  border:0; background:transparent; color:var(--muted); cursor:pointer; padding:0;
  border-radius:calc(var(--btn-radius,var(--radius-sm,8px)) - 2px);
  transition:background .18s,color .18s}
.theme-tog button:hover{color:var(--text)}
.theme-tog button[aria-pressed="true"]{background:var(--accent-soft); color:var(--accent-text,var(--text))}
.theme-tog button:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
@container (min-width:840px){ .nav{display:flex} }

/* Мобильная навигация. Раньше .nav просто пряталась и на телефоне разделов не было
   вообще — при том что больше половины трафика в нише мобильный. */
.burger{display:grid; place-items:center; width:40px; height:40px; flex:none; padding:0;
  background:transparent; border:var(--sel-bd,1px solid var(--border)); color:var(--text);
  border-radius:var(--radius-sm,8px); cursor:pointer}
.burger:hover{background:var(--surface-2)}
.burger:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
@container (min-width:840px){ .burger{display:none} }
/* на самом узком «Sign in» уходит в меню: он есть и там, и в подвале */
@container (max-width:519px){ .site .sign-in{display:none} }
/* на телефоне в шапке остаётся логотип, «Exchange» и бургер: переключатель темы
   и вход переезжают в выпадающее меню, иначе шапка не влезает в 390 px */
@container (max-width:659px){ .site-head .head-act > .theme-tog{display:none} }
.nav-drop .drop-foot{display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding-top:14px; margin-top:8px; border-top:1px solid var(--border-strong,var(--border))}
.nav-drop .drop-foot span{font-size:13.5px; color:var(--muted)}
.nav-drop{position:absolute; left:0; right:0; top:100%; z-index:29;
  background:var(--head-bg,var(--surface)); backdrop-filter:var(--head-blur,none);
  border-bottom:1px solid var(--border); box-shadow:var(--shadow-lg,var(--shadow))}
.nav-drop nav{display:flex; flex-direction:column; padding:8px 20px 16px; max-width:var(--maxw,1180px); margin:0 auto}
.nav-drop a{padding:12px 0; min-height:44px; display:flex; align-items:center; font-size:15.5px;
  font-weight:500; color:var(--text); border-bottom:1px solid var(--border)}
.nav-drop a:last-child{border-bottom:0}
.nav-drop a[aria-current]{color:var(--accent-text,var(--accent)); font-weight:600}
.nav-drop a.sep{margin-top:8px; border-top:1px solid var(--border-strong,var(--border)); padding-top:16px}
@container (min-width:840px){ .nav-drop{display:none} }
.site-head .wrap{position:relative}

/* ─── кнопки ─── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font:inherit; font-family:var(--font-ui); font-weight:var(--btn-weight,600); font-size:14px;
  min-height:44px; padding:0 var(--btn-px,18px); border-radius:var(--btn-radius,var(--radius));
  border:1px solid transparent; cursor:pointer; text-transform:var(--btn-tt,none);
  letter-spacing:var(--btn-tr,0); transition:background .18s,color .18s,border-color .18s,transform .18s;
  white-space:nowrap;
}
.site .btn-primary{background:var(--accent); color:var(--on-accent); box-shadow:var(--btn-shadow,none)}
.site .btn-primary:hover{background:var(--accent-hover,var(--accent)); transform:var(--btn-lift,none)}
.site .btn-ghost{background:transparent; color:var(--text); border-color:var(--border-strong,var(--border))}
.site .btn-ghost:hover{background:var(--surface-2); border-color:var(--accent)}
.btn-sm{min-height:36px; font-size:13px; padding:0 13px}
.btn-lg{min-height:52px; font-size:15.5px; padding:0 26px}
.btn-block{width:100%}

/* ─── карточки и плитки ─── */
.card{
  background:var(--card-bg,var(--surface)); border:var(--card-bd,1px solid var(--border));
  border-radius:var(--radius); padding:var(--card-pad,20px); box-shadow:var(--shadow);
}
.card-link{transition:border-color .18s, transform .18s, box-shadow .18s; display:block}
.card-link:hover{border-color:var(--accent); transform:var(--card-lift,none); box-shadow:var(--shadow-lg,var(--shadow))}
.grid{display:grid; gap:var(--gap,16px)}
/* у элемента грида min-width по умолчанию auto: длинное слово или широкая таблица
   внутри карточки раздувает всю сетку вместо переноса. Правило общее для всех сеток
   сайта — забыть его на одной из них означает поехавший вбок макет на телефоне */
.site :is(.grid, .acc, .acc-cards, .steps, .article-grid, .login-wrap, .foot-grid) > *{min-width:0}
@container (min-width:640px){ .g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(2,1fr)} .g4{grid-template-columns:repeat(2,1fr)} }
@container (min-width:960px){ .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)} }

.site .badge{
  display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600;
  padding:4px 9px; border-radius:var(--badge-radius,999px); background:var(--accent-soft);
  color:var(--accent-text,var(--accent)); text-transform:var(--badge-tt,none); letter-spacing:var(--badge-tr,.02em);
  border:var(--badge-bd,0);
}
.site .badge-mute{background:var(--surface-2); color:var(--muted); border:1px solid var(--border)}
.site .badge-ok{background:var(--ok-soft); color:var(--ok)}
.eyebrow{font-family:var(--font-mono); font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--muted)}
.dot{width:7px; height:7px; border-radius:50%; background:var(--ok); flex:none;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 22%,transparent)}

/* ─── калькулятор: главный элемент сайта ─── */
.calc{
  background:var(--calc-bg,var(--surface)); border:var(--calc-bd,1px solid var(--border));
  border-radius:var(--calc-radius,var(--radius-lg,var(--radius))); padding:var(--calc-pad,20px);
  box-shadow:var(--calc-shadow,var(--shadow-lg,var(--shadow)));
}
.calc-rows{display:grid; gap:10px; position:relative}
.field{
  background:var(--field-bg,var(--surface-2)); border:var(--field-bd,1px solid var(--border));
  border-radius:var(--field-radius,var(--radius)); padding:11px 14px; display:flex; align-items:center; gap:12px;
  transition:border-color .15s, box-shadow .15s;
}
.field:focus-within{border-color:var(--accent); box-shadow:0 0 0 3px var(--ring,color-mix(in srgb,var(--accent) 25%,transparent))}
.field-lab{display:block; font-size:11.5px; color:var(--muted); margin-bottom:5px; font-weight:500;
  text-transform:var(--lab-tt,none); letter-spacing:var(--lab-tr,0)}
.field input{
  font:inherit; font-family:var(--font-num,var(--font-mono)); font-size:22px; font-weight:600;
  background:none; border:0; color:var(--text); width:100%; min-width:0; padding:0; outline:none;
  font-variant-numeric:tabular-nums;
}
.field select{
  font:inherit; font-weight:600; font-size:14px; background:var(--sel-bg,transparent); color:var(--text);
  border:var(--sel-bd,1px solid var(--border)); border-radius:var(--radius-sm,8px); padding:8px 10px;
  cursor:pointer; outline:none; flex:none; min-height:40px;
}
.field select:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.swap{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2;
  width:34px; height:34px; border-radius:var(--swap-radius,50%); display:grid; place-items:center; cursor:pointer;
  background:var(--surface); border:1px solid var(--border-strong,var(--border)); color:var(--muted);
}
.swap:hover{color:var(--accent); border-color:var(--accent)}
.calc-meta{display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:14px; font-size:13px; color:var(--muted)}
.calc-meta b{color:var(--text); font-family:var(--font-num,var(--font-mono)); font-weight:600}
.calc-note{margin-top:12px; font-size:12.5px; color:var(--muted); line-height:1.5}

/* ─── таблицы: курсы, комиссии, резервы ─── */
.tbl-wrap{overflow-x:auto; border:var(--tbl-outer-bd,1px solid var(--border)); border-radius:var(--radius);
  background:var(--surface); -webkit-overflow-scrolling:touch}
table.tbl{width:100%; border-collapse:collapse; font-size:var(--tbl-size,14px); min-width:640px}
table.tbl th{
  text-align:left; font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:.07em;
  color:var(--muted); padding:11px 14px; background:var(--th-bg,var(--surface-2));
  border-bottom:1px solid var(--border-strong,var(--border)); position:sticky; top:0; white-space:nowrap;
}
table.tbl td{padding:var(--td-pad,12px 14px); border-bottom:1px solid var(--border); vertical-align:middle}
table.tbl tbody tr:last-child td{border-bottom:0}
table.tbl tbody tr:hover{background:var(--row-hover,var(--surface-2))}
table.tbl td.n{font-family:var(--font-num,var(--font-mono)); font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap}
table.tbl th.n{text-align:right}
.pair{display:flex; align-items:center; gap:9px; font-weight:600; white-space:nowrap}
.coin{width:24px; height:24px; border-radius:var(--coin-radius,50%); display:grid; place-items:center;
  font-size:9.5px; font-weight:700; flex:none; letter-spacing:-.02em}
.tbl-cap{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
  font-size:12.5px; color:var(--muted); margin-top:10px}

/* ─── фильтры ─── */
.filters{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px}
.site .chip{
  font:inherit; font-size:13px; font-weight:500; padding:8px 14px; min-height:38px;
  border-radius:var(--chip-radius,999px); border:1px solid var(--border); background:var(--surface);
  color:var(--muted); cursor:pointer; transition:.15s;
}
.site .chip:hover{color:var(--text); border-color:var(--border-strong,var(--border))}
.site .chip[aria-pressed="true"]{background:var(--accent-soft); border-color:var(--accent); color:var(--accent-text,var(--accent)); font-weight:600}
.search{
  display:flex; align-items:center; gap:9px; padding:0 14px; min-height:44px; flex:1 1 220px;
  background:var(--field-bg,var(--surface-2)); border:1px solid var(--border); border-radius:var(--field-radius,var(--radius));
}
.search input{font:inherit; font-size:14px; background:none; border:0; outline:none; color:var(--text); width:100%}

/* ─── длинный текст: академия и юридические ─── */
.prose{font-family:var(--font-read,var(--font-ui)); font-size:var(--read-size,17px);
  line-height:var(--read-lh,1.72); max-width:var(--measure,68ch); color:var(--read-color,var(--text))}
.site .prose > * + *{margin-top:1.15em}
.prose h2{margin-top:1.9em; font-size:var(--fs-h2,clamp(22px,3cqw,30px))}
.prose h3{margin-top:1.5em}
.prose ul,.prose ol{padding-left:1.25em}
.prose li + li{margin-top:.5em}
.prose a{color:var(--accent-text,var(--accent)); text-decoration:underline; text-underline-offset:3px}
.prose strong{font-weight:650; color:var(--text)}
.prose blockquote{border-left:3px solid var(--accent); padding-left:16px; color:var(--muted); font-style:italic}
/* таблица внутри статьи прокручивается сама, а не толкает колонку текста */
.prose table{width:100%; border-collapse:collapse; font-size:14.5px; font-family:var(--font-ui);
  display:block; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch}
.prose table thead, .prose table tbody{display:table; width:100%; min-width:460px}
.prose th,.prose td{border:1px solid var(--border); padding:9px 12px; text-align:left}
.prose th{background:var(--surface-2); font-weight:600; font-size:12.5px; text-transform:uppercase; letter-spacing:.05em}
.takeaways{background:var(--accent-soft); border-left:3px solid var(--accent); border-radius:var(--radius-sm,8px);
  padding:16px 18px; font-family:var(--font-ui); font-size:15px; line-height:1.6}
.takeaways h3{font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--accent-text,var(--accent)); margin-bottom:9px}
.takeaways ul{margin:0; padding-left:18px}
.article-grid{display:grid; gap:34px; align-items:start}
@container (min-width:1000px){ .article-grid{grid-template-columns:220px minmax(0,1fr) 280px} }
.toc{position:sticky; top:86px; font-size:13.5px; line-height:1.45; display:none}
.aside-col{position:sticky; top:86px; display:none}
@container (min-width:1000px){ .toc{display:block} .aside-col{display:block} }
.toc-t{font-size:11px; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); margin-bottom:11px; font-weight:600}
.toc a{display:block; padding:5px 0 5px 11px; border-left:2px solid var(--border); color:var(--muted)}
.toc a:hover{color:var(--text); border-color:var(--border-strong,var(--border))}
.toc a.on{color:var(--accent-text,var(--accent)); border-color:var(--accent); font-weight:600}
.byline{display:flex; align-items:center; gap:11px; font-size:13px; color:var(--muted); flex-wrap:wrap}
.ava{width:34px; height:34px; border-radius:var(--coin-radius,50%); background:var(--accent-soft);
  color:var(--accent-text,var(--accent)); display:grid; place-items:center; font-weight:700; font-size:13px}

/* ─── FAQ ─── */
.faq{border-top:1px solid var(--border)}
.faq details{border-bottom:1px solid var(--border)}
.faq summary{
  cursor:pointer; padding:15px 34px 15px 0; font-weight:600; font-size:15.5px; position:relative;
  list-style:none; font-family:var(--font-head);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; position:absolute; right:6px; top:13px; font-size:19px; color:var(--muted); font-weight:400}
.faq details[open] summary::after{content:"–"}
.faq details[open] summary{color:var(--accent-text,var(--accent))}
.faq .ans{padding:0 34px 16px 0; color:var(--muted); font-size:15px; line-height:1.65; max-width:70ch}

/* ─── шаги сделки ─── */
.steps{counter-reset:s; display:grid; gap:var(--gap,16px)}
@container (min-width:760px){ .steps{grid-template-columns:repeat(3,1fr)} }
@container (min-width:900px){ .steps.s4{grid-template-columns:repeat(4,1fr)} }  /* сделка деловой ветки — четыре шага */
.step{position:relative; padding-top:var(--step-pt,42px)}
.step::before{
  counter-increment:s; content:counter(s); position:absolute; top:0; left:0;
  width:30px; height:30px; border-radius:var(--step-radius,50%); display:grid; place-items:center;
  background:var(--step-bg,var(--accent-soft)); color:var(--step-fg,var(--accent-text,var(--accent)));
  font-family:var(--font-num,var(--font-mono)); font-weight:700; font-size:14px;
}
.step h3{font-size:16px; margin-bottom:6px}
.step p{color:var(--muted); font-size:14.5px; line-height:1.55}

/* ─── крошки, подвал, мелочи ─── */
.crumbs{display:flex; flex-wrap:wrap; gap:7px; align-items:center; font-size:12.5px; color:var(--muted); padding:16px 0 0}
.crumbs a:hover{color:var(--accent-text,var(--accent))}
.crumbs span{opacity:.5}
.stat{display:flex; flex-direction:column; gap:3px}
.stat b{font-family:var(--font-num,var(--font-mono)); font-size:var(--stat-size,24px); font-weight:700; letter-spacing:-.02em}
.stat span{font-size:12.5px; color:var(--muted)}
.hr{height:1px; background:var(--border); border:0; margin:0}
.site-foot{background:var(--foot-bg,var(--surface)); border-top:1px solid var(--border); padding:40px 0 28px; margin-top:56px}
.foot-grid{display:grid; gap:26px}
@container (min-width:760px){ .foot-grid{grid-template-columns:1.4fr repeat(3,1fr)} }
.foot-grid h4{font-size:11.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); margin-bottom:11px; font-family:var(--font-ui); font-weight:600}
.foot-grid li{list-style:none; margin-bottom:8px; font-size:14px; color:var(--muted)}
.foot-grid a:hover{color:var(--text)}
.foot-bot{display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-top:30px; padding-top:18px;
  border-top:1px solid var(--border); font-size:12.5px; color:var(--muted)}
.marquee{display:flex; gap:22px; overflow:hidden; font-family:var(--font-num,var(--font-mono)); font-size:12.5px;
  padding:9px 0; border-bottom:1px solid var(--border); color:var(--muted); background:var(--tick-bg,transparent)}
.marquee b{color:var(--text); font-weight:600}
.up{color:var(--ok)} .down{color:var(--danger)}
.empty{text-align:center; padding:64px 20px; max-width:52ch; margin:0 auto}
.empty .code{font-family:var(--font-num,var(--font-mono)); font-size:clamp(64px,13cqw,120px); font-weight:700;
  line-height:1; color:var(--accent); letter-spacing:-.04em}
.login-wrap{display:grid; gap:0; min-height:520px}
@container (min-width:900px){ .login-wrap{grid-template-columns:1fr 1fr} }
.login-side{padding:44px; display:flex; flex-direction:column; justify-content:center; gap:18px;
  background:var(--login-side-bg,var(--surface-2))}
.login-form{padding:44px; display:flex; flex-direction:column; justify-content:center; max-width:420px; width:100%; margin:0 auto}
.inp{width:100%; font:inherit; font-size:15px; padding:12px 14px; min-height:46px; color:var(--text);
  background:var(--field-bg,var(--surface-2)); border:var(--field-bd,1px solid var(--border));
  border-radius:var(--field-radius,var(--radius)); outline:none}
.inp:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--ring,color-mix(in srgb,var(--accent) 25%,transparent))}
@media (prefers-reduced-motion:reduce){ .site *{transition:none !important; animation:none !important} }

/* ═══════════ ЛИЧНЫЙ КАБИНЕТ ═══════════
   Отдельный каркас: сайдбар вместо публичной навигации, плотнее сетка, без футера.
   Цвет — те же токены системы, поэтому кабинет выглядит продолжением сайта, а не
   чужой админкой. Закрыт noindex + Disallow, но вход доступен с любой страницы. */

/* minmax(0,1fr), а не 1fr: иначе широкая таблица внутри растягивает колонку,
   и кабинет уезжает вбок на планшете и телефоне */
.acc{display:grid; grid-template-columns:minmax(0,1fr); min-height:100%}
@container (min-width:900px){ .acc{grid-template-columns:248px minmax(0,1fr)} }

/* min-width:0 обязателен обоим: у элемента грида он по умолчанию auto, и горизонтально
   прокручиваемая навигация внутри раздувает всю сетку вместо того, чтобы прокручиваться */
.acc-side{
  background:var(--foot-bg,var(--surface)); border-right:1px solid var(--border);
  padding:18px 14px; display:flex; flex-direction:column; gap:22px; min-width:0;
}
@container (max-width:899px){ .acc-side{border-right:0; border-bottom:1px solid var(--border)} }
.acc-nav{display:flex; flex-direction:column; gap:2px; min-width:0}
@container (max-width:899px){ .acc-nav{flex-direction:row; overflow-x:auto; gap:6px; padding-bottom:4px} }
.acc-nav a{
  display:flex; align-items:center; gap:10px; padding:9px 11px; min-height:40px;
  border-radius:var(--radius-sm,8px); color:var(--muted); font-size:14px; font-weight:500;
  white-space:nowrap; transition:background .15s, color .15s;
}
.acc-nav a:hover{background:var(--row-hover,var(--surface-2)); color:var(--text)}
.acc-nav a[aria-current]{background:var(--accent-soft); color:var(--accent-text,var(--accent)); font-weight:600}
.acc-nav .cnt{margin-left:auto; font-family:var(--font-num,var(--font-mono)); font-size:11.5px;
  background:var(--surface-2); color:var(--muted); padding:1px 7px; border-radius:999px}
.acc-nav-t{font-size:10.5px; text-transform:uppercase; letter-spacing:.12em; color:var(--muted);
  font-weight:600; padding:0 11px 6px}
@container (max-width:899px){ .acc-nav-t{display:none} }

.acc-main{padding:22px 20px 40px; min-width:0}
@container (min-width:900px){ .acc-main{padding:26px 30px 56px} }
.acc-head{display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  flex-wrap:wrap; margin-bottom:20px}
.acc-head h1{font-size:clamp(22px,3cqw,29px)}
.acc-head p{color:var(--muted); font-size:14px; margin-top:6px; max-width:64ch}

.acc-cards{display:grid; gap:14px; grid-template-columns:1fr}
@container (min-width:640px){ .acc-cards{grid-template-columns:repeat(2,1fr)} }
@container (min-width:1100px){ .acc-cards{grid-template-columns:repeat(4,1fr)} }

/* статус заявки: подпись + точка. Цвет никогда не единственный носитель смысла */
.st{display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600;
  padding:4px 10px; border-radius:var(--badge-radius,999px); white-space:nowrap;
  background:var(--surface-2); color:var(--muted); border:1px solid var(--border)}
.st i{width:7px; height:7px; border-radius:50%; background:currentColor; flex:none}
.st-wait{background:var(--accent-soft); color:var(--accent-text,var(--accent)); border-color:transparent}
.st-ok{background:var(--ok-soft); color:var(--ok); border-color:transparent}
.st-done{background:var(--surface-2); color:var(--muted)}
.st-fail{background:color-mix(in srgb,var(--danger) 14%,transparent); color:var(--danger); border-color:transparent}

/* лента прогресса сделки */
.flow{display:flex; flex-wrap:wrap; gap:0; margin:18px 0 4px; counter-reset:f}
.flow-i{flex:1 1 130px; min-width:120px; padding:0 12px 0 0; position:relative}
.flow-i .bar{height:4px; border-radius:999px; background:var(--surface-2); margin-bottom:9px}
.flow-i.on .bar{background:var(--accent)}
.flow-i.was .bar{background:color-mix(in srgb,var(--accent) 45%,transparent)}
.flow-i b{display:block; font-size:13px; font-weight:600}
.flow-i span{display:block; font-size:12px; color:var(--muted); margin-top:2px}
.flow-i:not(.on):not(.was) b{color:var(--muted); font-weight:500}

/* таймер удержания курса */
.timer{display:flex; align-items:center; gap:12px; padding:13px 16px; border-radius:var(--radius);
  background:var(--accent-soft); border:1px solid var(--border-strong,var(--border))}
.timer b{font-family:var(--font-num,var(--font-mono)); font-size:23px; font-weight:700;
  color:var(--accent-text,var(--accent)); letter-spacing:-.02em}
.timer span{font-size:13px; color:var(--muted); line-height:1.45}

/* реквизиты для оплаты: адрес крупно, моноширинно, с кнопкой копирования */
.addr{display:flex; align-items:center; gap:12px; padding:14px 16px; flex-wrap:wrap;
  background:var(--field-bg,var(--surface-2)); border:1px solid var(--border);
  border-radius:var(--field-radius,var(--radius))}
.addr code{font-family:var(--font-mono); font-size:14.5px; word-break:break-all; flex:1 1 260px; color:var(--text)}
.qr{width:132px; height:132px; flex:none; border-radius:var(--radius-sm,8px); background:var(--surface-2);
  border:1px solid var(--border); display:grid; place-items:center; color:var(--muted); font-size:11px; text-align:center}

/* строки «ключ → значение» */
.kv{display:grid; gap:0; font-size:14px}
.kv > div{display:flex; justify-content:space-between; gap:16px; padding:11px 0;
  border-bottom:1px solid var(--border)}
.kv > div:last-child{border-bottom:0}
.kv dt, .kv .k{color:var(--muted)}
.kv dd, .kv .v{margin:0; font-weight:600; text-align:right; font-family:var(--font-num,var(--font-mono))}
.kv .v.txt{font-family:var(--font-ui); font-weight:500}

/* шаги проверки документов */
.chk{display:flex; gap:13px; padding:14px 0; border-bottom:1px solid var(--border); align-items:flex-start}
.chk:last-child{border-bottom:0}
.chk .mk{width:24px; height:24px; border-radius:50%; flex:none; display:grid; place-items:center;
  font-size:12px; font-weight:700; background:var(--surface-2); color:var(--muted); border:1px solid var(--border)}
.chk.done .mk{background:var(--ok-soft); color:var(--ok); border-color:transparent}
.chk.wait .mk{background:var(--accent-soft); color:var(--accent-text,var(--accent)); border-color:transparent}
.chk b{font-size:14.5px; display:block}
.chk span{font-size:13px; color:var(--muted); display:block; margin-top:2px}

/* пустое состояние */
.blank{text-align:center; padding:52px 20px; max-width:44ch; margin:0 auto}
.blank .ic{width:54px; height:54px; border-radius:50%; margin:0 auto 14px; display:grid; place-items:center;
  background:var(--accent-soft); color:var(--accent-text,var(--accent))}
.blank h3{font-size:17px; margin-bottom:7px}
.blank p{color:var(--muted); font-size:14px; line-height:1.6; margin-bottom:18px}

/* подсказка/предупреждение в потоке */
.note{display:flex; gap:11px; padding:13px 15px; border-radius:var(--radius-sm,var(--radius));
  background:var(--surface-2); border:1px solid var(--border); font-size:13.5px; line-height:1.55; color:var(--muted)}
.note b{color:var(--text)}
.note-warn{background:color-mix(in srgb,var(--danger) 9%,transparent); border-color:color-mix(in srgb,var(--danger) 30%,transparent)}
.note .ic{flex:none; color:var(--accent-text,var(--accent))}
.note-warn .ic{color:var(--danger)}

/* флажок: 13 px по умолчанию — цель меньше любого требования; растим и даём área клика на подпись */
.site input[type="checkbox"]{width:24px; height:24px; flex:none; accent-color:var(--accent); cursor:pointer}
.site label:has(input[type="checkbox"]){cursor:pointer; padding:4px 0; min-height:44px; align-items:center}

/* строки живого стайлгайда: на телефоне подпись встаёт над образцом, иначе
   170 пикселей на подпись не оставляют места самому компоненту */
.sg-row{display:grid; grid-template-columns:minmax(0,1fr); gap:8px;
  padding:18px 0; border-bottom:1px solid var(--border)}
.sg-row:last-child{border-bottom:0}
.sg-key{font-size:13px; color:var(--muted)}
.sg-val{min-width:0}
.h1-sample{font-family:var(--font-head); font-weight:var(--w-head,600);
  letter-spacing:var(--tr-head,-.02em); line-height:1.12; font-size:var(--fs-h1,clamp(28px,4.6cqw,46px))}
@container (min-width:700px){
  .sg-row{grid-template-columns:170px minmax(0,1fr); gap:20px; align-items:start}
  .sg-key{padding-top:6px}
}

/* нумерованный шаг на странице «как это работает» */
.step-num{width:38px; height:38px; border-radius:var(--step-radius,50%); flex:none;
  display:grid; place-items:center; font-family:var(--font-num,var(--font-mono));
  font-weight:700; font-size:16px; background:var(--accent-soft);
  color:var(--accent-text,var(--accent))}

/* ═══ 6. СТЕКЛО — жидкое стекло ═══ ВЫБРАНА КАК ОСНОВА САЙТА (07.09.2026)
   Полупрозрачные слои поверх свечения, размытие, светящаяся кромка, ледяной циан.
   Обе темы равноправны: ночь — свет изнутри панелей в тёмном зале, день — дневной свет
   сквозь матовое стекло. Переключатель стоит в шапке сайта (.theme-tog).
   Цена приёма — размытие стоит кадров, поэтому стекло только на панелях, а длинный
   текст академии лежит на плотном фоне. */
[data-ds="glass"]{
  --font-ui:'Manrope',-apple-system,'Segoe UI',sans-serif;
  --font-head:'Manrope',-apple-system,sans-serif;
  --font-read:'Manrope',sans-serif;
  --font-mono:'Chivo Mono',ui-monospace,monospace;
  --font-num:'Chivo Mono',ui-monospace,monospace;
  --radius:18px; --radius-sm:12px; --radius-lg:26px; --btn-radius:999px; --field-radius:14px;
  --coin-radius:50%; --step-radius:50%; --badge-radius:999px; --chip-radius:999px; --mark-radius:12px; --swap-radius:50%;
  --maxw:1180px; --sec-pad:56px; --card-pad:22px; --calc-pad:24px; --head-h:70px;
  --tr-head:-.03em; --w-head:700; --fs-h1:clamp(30px,5cqw,50px); --fs-lead:17.5px;
  --tbl-size:14px; --td-pad:13px 16px; --read-size:17px; --read-lh:1.75; --measure:66ch; --stat-size:26px;
  --nav-size:14px; --nav-gap:22px; --nav-weight:500; --lab-tt:none; --badge-tt:none;
  --logo-size:19px; --logo-tr:-.03em; --btn-lift:translateY(-1px); --card-lift:translateY(-2px);
}
[data-ds="glass"][data-mode="dark"]{
  --bg:#070B14; --surface:rgba(255,255,255,.055); --surface-2:rgba(255,255,255,.085); --band-bg:rgba(255,255,255,.03);
  --text:#EAF2FF; --muted:#93A4C4; --border:rgba(255,255,255,.12); --border-strong:rgba(255,255,255,.24);
  --accent:#5FE3F0; --accent-hover:#7CEBF6; --on-accent:#032027; --accent-soft:rgba(95,227,240,.14); --accent-text:#8AECF6;
  --ok:#5FE3B0; --ok-soft:rgba(95,227,176,.14); --danger:#FF7A7A; --ring:rgba(95,227,240,.32);
  --head-bg:rgba(7,11,20,.55); --head-blur:blur(20px) saturate(160%); --foot-bg:rgba(255,255,255,.03);
  --field-bg:rgba(255,255,255,.06); --sel-bd:1px solid rgba(255,255,255,.16); --th-bg:rgba(255,255,255,.06);
  --row-hover:rgba(255,255,255,.05); --calc-bg:rgba(255,255,255,.07);
  --shadow:0 1px 1px rgba(0,0,0,.2); --shadow-lg:0 26px 70px rgba(0,0,0,.55);
  --btn-shadow:0 8px 26px rgba(95,227,240,.28);
}
[data-ds="glass"][data-mode="light"]{
  --bg:#EDF2F9; --surface:rgba(255,255,255,.78); --surface-2:rgba(255,255,255,.92); --band-bg:rgba(255,255,255,.52);
  --text:#0B1524; --muted:#485870; --border:rgba(12,21,38,.11); --border-strong:rgba(12,21,38,.22);
  --accent:#07707F; --accent-hover:#055B67; --on-accent:#FFFFFF; --accent-soft:rgba(7,112,127,.13); --accent-text:#054A54;
  --ok:#0A5C40; --ok-soft:rgba(15,122,85,.14); --danger:#A5271A; --ring:rgba(7,112,127,.3);
  --head-bg:rgba(237,242,249,.66); --head-blur:blur(22px) saturate(170%); --foot-bg:rgba(255,255,255,.55);
  --field-bg:rgba(255,255,255,.82); --sel-bd:1px solid rgba(12,21,38,.14); --th-bg:rgba(255,255,255,.76);
  --row-hover:rgba(255,255,255,.9); --calc-bg:rgba(255,255,255,.84);
  --shadow:0 1px 2px rgba(20,35,60,.07); --shadow-lg:0 22px 56px rgba(20,35,60,.14);
  --btn-shadow:0 8px 24px rgba(7,112,127,.2);
}
/* характер: подсветка под слоями и кромка на стекле */
[data-ds="glass"] .site{position:relative}
[data-ds="glass"] .site::before{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(760px 460px at 12% -8%, color-mix(in srgb,var(--accent) 26%,transparent), transparent 70%),
    radial-gradient(680px 420px at 92% 8%, rgba(122,138,255,.24), transparent 72%),
    radial-gradient(900px 560px at 50% 108%, color-mix(in srgb,var(--accent) 16%,transparent), transparent 70%);
}
/* день — не инверсия ночи: свечение слабее втрое, иначе цветная муть на белом,
   и добавлен холодный небесный намёк сверху вместо фиолетового пятна */
[data-ds="glass"][data-mode="light"] .site::before{
  background:
    radial-gradient(820px 480px at 10% -12%, color-mix(in srgb,var(--accent) 12%,transparent), transparent 68%),
    radial-gradient(700px 420px at 94% 2%, rgba(122,150,255,.1), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.5), transparent 220px);
}
[data-ds="glass"] .site > *{position:relative; z-index:1}
[data-ds="glass"] .card, [data-ds="glass"] .calc, [data-ds="glass"] .tbl-wrap, [data-ds="glass"] .field{
  backdrop-filter:blur(18px) saturate(150%); -webkit-backdrop-filter:blur(18px) saturate(150%);
}
[data-ds="glass"] .calc{border:1px solid var(--border-strong); box-shadow:var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.28)}
[data-ds="glass"] .card{box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.16)}
[data-ds="glass"] .btn-primary{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 92%,#fff),var(--accent))}
/* днём блик сверху опускает контраст белого текста до 4,3 — поэтому днём градиент
   уходит не в блик, а в тень: белое на #07707F и темнее */
[data-ds="glass"][data-mode="light"] .btn-primary{
  background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 88%,#000));
}
[data-ds="glass"][data-mode="light"] .card{box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.85)}
[data-ds="glass"][data-mode="light"] .calc{box-shadow:var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.95)}
[data-ds="glass"] table.tbl th{backdrop-filter:blur(12px)}
[data-ds="glass"] .step::before{background:var(--accent-soft); border:1px solid var(--border-strong); color:var(--accent-text)}
@container (min-width:900px){
  [data-ds="glass"] .grid:has(> .hero-calc){grid-template-columns:1fr .92fr; gap:44px !important}
}

/* страница вне макета: фон под прокруткой и нулевые поля */
html{background:var(--bg)} body{margin:0} .site{min-height:100vh}