.site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(250, 248, 244, .96);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; gap: var(--s5); min-height: 68px; padding-block: 6px; }
.logo { display: inline-flex; align-items: center; gap: var(--s3); font-weight: 700; font-size: 1.125rem; color: var(--ink); text-decoration: none; letter-spacing: -.02em; }
.logo .mark {
  display: block; width: auto; height: 52px; border-radius: 0; background: none;
}
.site-header .logo .mark { height: 78px; }
.logo small { display: block; font-size: .6875rem; font-weight: 600; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }
.site-nav { display: flex; flex-wrap: wrap; gap: var(--s4) var(--s5); margin-left: auto; }
.site-nav a { color: var(--muted); font-weight: 600; font-size: .9375rem; text-decoration: none; white-space: nowrap; }
@media (hover: hover) { .site-nav a:hover { color: var(--ink); } }
.site-nav a[aria-current] { color: var(--ink); }
.site-header .btn { margin-left: var(--s4); }
.header-cta, .site-nav a.nav-cab { display: none; }
.header-cab { display: inline-flex; }
.site-nav a.nav-signup { display: inline-flex; }
@media (max-width: 860px) {
  .site-header .wrap { flex-wrap: wrap; gap: var(--s3); min-height: 0; padding-block: var(--s2); }
  .logo small { display: none; }

  .site-nav {
    display: flex; order: 3; width: 100%; flex-wrap: nowrap; gap: var(--s4) var(--s5);
    overflow-x: auto; padding: 0 var(--s6) 0 0; margin-left: 0;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
            mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
  }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav a {
    flex: 0 0 auto; font-size: .875rem;
    display: inline-flex; align-items: center; min-height: 44px;
    padding-block: 2px;
  }
  .site-header .btn { margin-left: auto; }
}
@media (max-width: 860px) {
  .landing .site-header .wrap { row-gap: var(--s1); padding-bottom: 0; }
}
@media (max-width: 399px) {
  .landing .site-header .header-cab { padding-inline: var(--s4); }
}
@media (max-width: 359px) {
  .landing .site-header .header-cab { padding-inline: var(--s3); font-size: .875rem; }
  .landing .site-header .wrap { column-gap: var(--s2); }
  .landing .site-header .logo { gap: var(--s2); }
}
@media (min-width: 861px) and (max-width: 1100px) {
  .landing .logo small { display: none; }
  .landing .site-header .wrap { gap: var(--s4); }
  .landing .site-header .header-cab { margin-left: 0; }
  .landing .site-nav { column-gap: var(--s4); }
}
@media (min-width: 861px) and (max-width: 960px) {
  .landing .site-nav { column-gap: var(--s3); }
}
@media (min-width: 861px) and (pointer: coarse) {
  .landing .site-nav a { padding-block: 10px; }
}
@media (max-width: 860px) and (max-height: 500px), (max-height: 500px) and (pointer: coarse) {
  .landing .site-header { position: static; }
}
.landing { --hdr-guess: 80px; scroll-padding-top: calc(var(--hdr, var(--hdr-guess)) + 12px); }
@media (max-width: 860px) { .landing { --hdr-guess: 124px; } }
@media (max-width: 860px) and (max-height: 500px), (max-height: 500px) and (pointer: coarse) { .landing { --hdr-guess: 0px; } }
.cabinet-page main [id] { scroll-margin-top: calc(var(--cab-hdr, 84px) + 12px); }

.hero { padding: var(--s8) 0 var(--s7); }
.hero .wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--s8); align-items: center; }
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: 6px 14px; margin-bottom: var(--s4);
  background: var(--accent-soft); color: var(--accent-ink);
  border-radius: var(--r-pill); font-size: .8125rem; font-weight: 650;
}
.hero p.lead { font-size: 1.125rem; color: var(--muted); max-width: 52ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }
.hero-facts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5);
  margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid var(--line);
}
.hero-facts b { display: block; font-size: 1.75rem; letter-spacing: -.02em; }
.hero-facts span { color: var(--muted); font-size: .875rem; }

.board-figure { margin: 0; display: grid; gap: var(--s3); justify-items: center; }
.board {
  position: relative;
  aspect-ratio: 1; width: 100%; max-width: 420px;
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow-lg); border: 8px solid #2a2118;
  container-type: inline-size;
}
.board-squares {
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  grid-template-rows: repeat(8, minmax(0, 1fr));
}
.board-squares i { background: #f0e5d2; }
.board-squares i.dark { background: #a97d51; }
.board-squares i.piece { display: grid; place-items: center; font-style: normal; color: #14151a; font-size: 28px; font-size: 9cqi; }
.board-squares i.piece.light-piece { color: #fffdf8; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.board-squares i.from { box-shadow: inset 0 0 0 100vmax rgba(168, 80, 15, .22); }
.board-squares i.to { box-shadow: inset 0 0 0 100vmax rgba(168, 80, 15, .34); }

.board-pieces { position: absolute; inset: 0; }
.board-pieces .cp {
  position: absolute; top: 0; left: 0;
  width: 12.5%; height: 12.5%;
  display: grid; place-items: center;
  font-size: 28px; font-size: 9cqi; line-height: 1;
  color: #14151a;
  transition: transform .42s cubic-bezier(.22, .61, .36, 1), opacity .3s ease;
  will-change: transform;
}
.board-pieces .cp.light-piece { color: #fffdf8; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.board-pieces .cp.taken { opacity: 0; }
.board.live .board-squares i.piece { color: transparent; text-shadow: none; }

.board-caption {
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  justify-content: center; max-width: 420px;
  color: var(--muted); font-size: .875rem;
}
.board-caption #board-move { font-variant-numeric: tabular-nums; }
.board-caption b { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .board-pieces .cp { transition: none; }
}

@media (max-width: 920px) {
  .hero { padding-top: var(--s6); }
  .hero .wrap { grid-template-columns: 1fr; gap: var(--s6); }
  .hero-media { order: -1; }
  .board { max-width: 300px; }
  .hero-facts { margin-top: var(--s5); }
}
@media (max-width: 640px) {
  .landing section:not(.hero) { padding: var(--s7) 0; }
  .hero-facts { gap: var(--s3); }
  .hero-facts b { font-size: 1.125rem; }
  .hero-facts span { display: block; font-size: .8125rem; line-height: 1.35; }
}
@media (max-width: 640px) and (orientation: portrait) {
  .landing .hero { padding-top: var(--s4); }
  .landing .hero .wrap { gap: var(--s4); }
  .landing .hero .wrap > div:first-child { display: flex; flex-direction: column; }
  .landing .hero .eyebrow { align-self: flex-start; margin-bottom: var(--s3); }
  .landing .hero-actions { order: 1; margin-top: var(--s1); }
  .landing .hero p.lead { order: 2; margin: var(--s5) 0 0; }
  .landing .hero-facts { order: 3; }
}
@media (max-width: 359px) {
  .landing .hero h1 { font-size: 1.75rem; }
}

section { padding: var(--s8) 0; }
.section-head { max-width: 62ch; margin-bottom: var(--s6); }
.section-head p { color: var(--muted); margin-bottom: 0; }
.kicker { color: var(--accent-ink); font-weight: 650; font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: var(--s2); }

.grid { display: grid; gap: var(--s4); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 601px) and (max-width: 900px) {
  .landing .grid-3 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.club-facts { margin-top: var(--s4); }
@media (max-width: 700px) { .grid-2 { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s5);
  box-shadow: var(--shadow-sm);
}
.card h3 { margin-bottom: var(--s2); }
.card p:last-child { margin-bottom: 0; }
.card .icon { display: block; margin-bottom: var(--s3); color: var(--accent); }
.card .icon svg { width: 34px; height: 34px; display: block; }

.alt { background: var(--surface-2); }

.program { display: flex; flex-direction: column; }
.program .level { font-size: .8125rem; font-weight: 650; color: var(--accent-ink); text-transform: uppercase; letter-spacing: .06em; }
.program ul { list-style: none; padding: 0; margin: var(--s3) 0 var(--s5); display: grid; gap: var(--s2); }
.program li { position: relative; padding-left: var(--s5); color: var(--muted); font-size: .9375rem; }
.program li::before { content: "♟"; position: absolute; left: 0; color: var(--accent); }
.program .price { margin-top: auto; padding-top: var(--s4); border-top: 1px solid var(--line); display: flex; align-items: baseline; gap: var(--s2); }
.program .price b { font-size: 1.5rem; letter-spacing: -.02em; }
.program .price span { color: var(--muted); font-size: .875rem; }

.steps { counter-reset: step; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s5); padding: 0; margin: 0; }
.steps li { counter-increment: step; list-style: none; padding-top: var(--s5); border-top: 3px solid var(--line-strong); }
.steps li::before { content: "0" counter(step); display: block; font-family: var(--font-num); font-size: .875rem; color: var(--accent); font-weight: 700; margin-bottom: var(--s2); }
.steps b { display: block; margin-bottom: var(--s1); }
.steps span { color: var(--muted); font-size: .9375rem; }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }

.coach { display: flex; gap: var(--s4); align-items: flex-start; }
.coach-lead { grid-column: 1 / -1; }
.coach .avatar {
  flex: 0 0 56px; width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center; background: var(--ink); color: #fff;
  font-weight: 700; font-size: 1.125rem; letter-spacing: -.02em;
}
.coach h3 { font-size: 1.0625rem; margin-bottom: var(--s1); }
.coach .role { color: var(--accent-ink); font-size: .875rem; font-weight: 600; margin-bottom: var(--s2); }
.coach p { font-size: .9375rem; color: var(--muted); margin: 0; }
@media (max-width: 420px) {
  .coach { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 0 var(--s3); align-items: center; }
  .coach .avatar { width: 44px; height: 44px; font-size: 1rem; grid-row: 1 / span 2; }
  .coach > div { display: contents; }
  .coach h3, .coach .role { grid-column: 2; }
  .coach > div > p:last-child { grid-column: 1 / -1; margin-top: var(--s2); }
}

.faq { display: grid; gap: var(--s2); max-width: 800px; }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.faq summary { cursor: pointer; padding: var(--s4) var(--s5); font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: var(--s4); min-height: 44px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent); font-size: 1.375rem; line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq p { padding: 0 var(--s5) var(--s4); color: var(--muted); margin: 0; }
.faq p + .faq-venues { margin-top: calc(-1 * var(--s3)); }
.faq-venues { margin: 0; padding: 0 var(--s5) var(--s4) calc(var(--s5) + 1.25em); color: var(--muted); display: grid; gap: var(--s1); }

.signup .wrap {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s8); align-items: start;
  grid-template-areas: "head form" "contacts form"; grid-template-rows: auto 1fr;
}
.signup-head { grid-area: head; }
#lead-form { grid-area: form; }
.signup .contacts { grid-area: contacts; }
@media (max-width: 900px) {
  .signup .wrap { grid-template-columns: 1fr; grid-template-areas: "head" "form" "contacts"; grid-template-rows: none; gap: var(--s6); }
}
.signup-form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s6); box-shadow: var(--shadow-md); }
@media (max-width: 520px) { .signup-form { padding: var(--s4); border-radius: var(--r-md); } }
.signup-form .btn { width: 100%; }
.consent { display: flex; gap: var(--s3); align-items: flex-start; font-size: .875rem; color: var(--muted); margin: var(--s4) 0; cursor: pointer; min-height: 44px; }
.consent input { width: 22px; height: 22px; flex: 0 0 22px; margin: 1px 0 0; accent-color: var(--accent); }
.consent label { max-width: none; }
.landing #lead-consent-err { margin: calc(-1 * var(--s2)) 0 var(--s3); }

.form-status { min-height: 24px; font-size: .9375rem; font-weight: 600; margin-top: var(--s3); }
.form-status:empty { min-height: 0; margin-top: 0; }
.form-status[data-kind="ok"] { color: var(--ok); }
.form-status[data-kind="err"] { color: var(--danger); }

.contacts { display: grid; gap: var(--s4); }
.contacts a { font-weight: 600; }
.landing .contacts .btn { margin-bottom: var(--s2); }
@media (max-width: 359px) {
  .landing .contacts .btn { font-size: .9375rem; padding-inline: var(--s4); }
}

.site-footer { border-top: 1px solid var(--line); padding: var(--s6) 0; color: var(--muted); font-size: .875rem; }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: var(--s5); justify-content: space-between; align-items: center; }
.site-footer a { color: var(--muted); }
.site-footer .foot-ico { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.site-footer .foot-ico > span { text-decoration: underline; text-underline-offset: 3px; }
.foot-ico-img { flex: none; width: 18px; height: 18px; }
.site-footer div:has(> .foot-ico) { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--s4); }
.site-footer div:has(> .foot-ico) > .sep { display: none; }
@media (pointer: coarse), (max-width: 860px) {
  .site-footer a { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (max-width: 400px) {
  :is(.landing, .cabinet-page) .site-footer .wrap > div { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--s4); }
  :is(.landing, .cabinet-page) .site-footer .sep { display: none; }
}

body.auth { display: grid; place-items: center; min-height: 100vh; background: var(--surface-2); }
.auth-card { width: min(100% - 2 * var(--s4), 420px); padding: var(--s5) 0; }
.auth-logo { display: flex; width: max-content; margin-inline: auto; justify-content: center; margin-bottom: var(--s5); }
.auth-title { font-size: 1.375rem; margin-bottom: var(--s2); }
.auth-back { text-align: center; margin-top: var(--s4); font-size: .875rem; }
@media (pointer: coarse), (max-width: 860px) { .auth-back a { display: inline-block; padding: var(--s3) var(--s2); } }

@media (max-width: 420px) {
  .logo small { display: none; }
}

.messengers { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.messengers-title { flex-basis: 100%; margin: 0; }
.landing .messengers-title { max-width: none; }
.messenger { gap: var(--s2); padding-left: var(--s3); }
.btn:has(> .messenger-mark) { padding-block: var(--s3); }
.messenger-mark {
  display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 8px;
  font-size: .8125rem; font-weight: 700; line-height: 1; color: #fff;
}
.messenger-max span.messenger-mark { background: #7c4dff; }
.messenger-tg span.messenger-mark { background: #2aabee; font-size: .875rem; }
img.messenger-mark {
  background: none; border-radius: 0; object-fit: contain;
}

.board-pieces.instant .cp { transition: none; }

.messenger-wa span.messenger-mark { background: #25d366; }
.messenger-vk span.messenger-mark { background: #0077ff; font-size: .6875rem; }

:root {
  --lvl-jr: #2f8f5b;   --lvl-jr-soft: #eaf5ee;
  --lvl-mid: #2f7fb8;  --lvl-mid-soft: #e8f2f9;
  --lvl-sr: #c28a12;   --lvl-sr-soft: #fbf3df;
  --lvl-team: #9a4a8c; --lvl-team-soft: #f6ebf4;
}

.schedule-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-bottom: var(--s5); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 var(--s4);
  border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink);
  font: inherit; font-size: .9375rem; font-weight: 600; cursor: pointer;
}
.chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.chip-jr::before { background: var(--lvl-jr); }
.chip-mid::before { background: var(--lvl-mid); }
.chip-sr::before { background: var(--lvl-sr); }
.chip-team::before { background: var(--lvl-team); }
@media (hover: hover) { .chip:hover { border-color: var(--ink); } }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.schedule-select { width: auto; min-width: 200px; min-height: 44px; padding-block: var(--s2); }
.schedule-count { margin: 0 0 0 auto; }
@media (max-width: 720px) { .schedule-count { margin-left: 0; flex-basis: 100%; } }

.week { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s3); align-items: start; }
@media (max-width: 1060px) { .week { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .week { grid-template-columns: 1fr; } }

.day-tabs { display: none; }
@media (max-width: 640px) {
  .schedule-tools { gap: var(--s2); }
  .chips {
    flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-right: var(--s6);
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
            mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
  }
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex: 0 0 auto; }
  .schedule-select {
    flex: 1 1 calc(50% - var(--s1)); width: auto; min-width: 0;
    padding-inline: var(--s3) 26px; background-position: right 16px center, right 10px center;
  }
  .schedule-count { flex-basis: 100%; }
  .day-tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s1); margin-bottom: var(--s3); }
  .day-tab {
    min-height: 44px; padding: 0;
    border: 1px solid var(--line-strong); border-radius: var(--r-sm);
    background: var(--surface); color: var(--ink);
    font: inherit; font-weight: 600; cursor: pointer;
  }
  .day-tab.is-today { border-color: var(--accent); }
  .day-tab[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
  #week.has-day-tabs:not(.is-filtered) .day:not(.is-current) { display: none; }
}
@media (max-width: 359px) { .schedule-select { flex-basis: 100%; } }

.day { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s3); }
.day.today { position: relative; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.day-name {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2); min-width: 0;
  font-size: .8125rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); margin: var(--s1) var(--s1) var(--s3);
}
.day-short { display: none; }
.day.today .day-name { color: var(--accent-ink); }
.day.today .day-name::after {
  position: absolute; top: -10px; right: var(--s3);
  content: "сегодня"; text-transform: none; letter-spacing: 0;
  font-size: .75rem; font-weight: 650; color: #fff;
  background: var(--accent); border-radius: var(--r-pill); padding: 1px 8px;
  white-space: nowrap;
}

.slots { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.slots li { max-width: none; }
.slot {
  display: grid; gap: 2px;
  padding: var(--s2) var(--s3) var(--s2) calc(var(--s3) + 2px);
  border-radius: var(--r-sm);
  border-left: 4px solid var(--line-strong);
  background: var(--surface-2);
  line-height: 1.35;
}
.slot-jr   { border-left-color: var(--lvl-jr);   background: var(--lvl-jr-soft); }
.slot-mid  { border-left-color: var(--lvl-mid);  background: var(--lvl-mid-soft); }
.slot-sr   { border-left-color: var(--lvl-sr);   background: var(--lvl-sr-soft); }
.slot-team { border-left-color: var(--lvl-team); background: var(--lvl-team-soft); }
.slot-time { font-weight: 700; font-variant-numeric: tabular-nums; font-size: .9375rem; }
.slot-group { font-weight: 600; font-size: .9375rem; }
.slot-note, .slot-venue { color: var(--muted); font-size: .8125rem; }
.slot-venue::before { content: "⌖ "; }
.day-empty { margin: var(--s1); font-size: .8125rem; }

@media (max-width: 860px) {
  .logo .mark { height: 44px; }
  .site-header .logo .mark { height: 66px; }
}

.cabinet-page { background: var(--surface-2); }
.site-header .cabinet-schedule { margin-left: auto; }
.cabinet { padding: var(--s5) 0 var(--s8); display: grid; gap: var(--s4); }
.cabinet .form-status { margin: 0; min-height: 0; }
.cabinet .form-status:empty { display: none; }
.cabinet-loading {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s4);
  min-height: 60vh; min-height: 60svh; padding: var(--s7) 0;
  color: var(--muted); text-align: center;
  animation: loading-in .35s ease .15s both;
}
.loading-mark { display: block; width: 136px; height: auto; }
.max-noapp { margin: var(--s2) 0 0; font-size: .9375rem; line-height: 1.45; }
@keyframes loading-in { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cabinet-loading { animation: none; } }
.cabinet-error { color: var(--danger); font-weight: 600; }
.cabinet .cabinet-error p { margin: 0; }
.cabinet .cabinet-error .cabinet-error-exit { margin-top: var(--s3); }
.cabinet h1 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); margin-bottom: var(--s1); overflow-wrap: anywhere; }
.cabinet h2 { font-size: 1.25rem; margin-bottom: var(--s3); }
.cabinet-note { text-align: center; max-width: 60ch; margin: var(--s2) auto 0; }
#content { display: grid; gap: var(--s4); }

.profile { display: grid; grid-template-columns: auto 1fr; gap: var(--s6); align-items: start; }
@media (max-width: 640px) { .profile { grid-template-columns: 1fr; justify-items: center; text-align: center; } }
.avatar-block { display: grid; justify-items: center; gap: var(--s2); width: 180px; }
.avatar-frame {
  width: 150px; height: 150px; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center;
  background: var(--ink); box-shadow: var(--shadow-md);
  border: 4px solid var(--surface);
}
.avatar-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-frame.busy { opacity: .5; }
.avatar-empty { color: #fff; font-size: 64px; line-height: 1; }
.avatar-actions { display: flex; flex-wrap: wrap; gap: var(--s3); justify-content: center; }
.avatar-actions label { cursor: pointer; }
.avatar-hint { text-align: center; font-size: .75rem; margin: 0; }
.avatar-note { text-align: center; font-size: .75rem; margin: 0; }
.profile-body { min-width: 0; width: 100%; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3) var(--s5); margin: var(--s4) 0 0; }
@media (max-width: 640px) { .facts { grid-template-columns: 1fr; text-align: left; } }
@media (min-width: 641px) {
  .cabinet .facts { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(15rem, 40%)), 1fr)); }
}
.facts dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.facts dd { margin: 2px 0 0; font-weight: 600; }
.facts .msg-chan { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.facts .msg-hint { display: block; font-weight: 400; font-size: .875rem; white-space: nowrap; }
.cabinet .facts .badge { white-space: normal; }
@media (max-width: 640px) {
  .profile { justify-items: stretch; text-align: left; gap: var(--s4); }
  .avatar-block { width: auto; grid-template-columns: 72px minmax(0, 1fr); align-items: center; justify-items: start; column-gap: var(--s3); }
  .avatar-frame { width: 72px; height: 72px; border-width: 2px; }
  .avatar-empty { font-size: 32px; }
  .avatar-actions { justify-content: flex-start; }
  .avatar-hint { display: none; }
  .avatar-note { grid-column: 2; text-align: left; margin-top: var(--s1); }
  .lesson-list li { text-align: left; }
}

.pay-sum { font-size: 1rem; margin-bottom: var(--s1); color: var(--muted); }
.pay-sum b {
  display: block; margin-top: 2px; color: var(--ink);
  font-size: 1.75rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pay-actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s4); }
.cabinet .pay-budget { margin: 0; font-size: 1rem; }
.cabinet-page .badge-budget { background: #e8effb; color: #1f4f9e; }

.invoice-list { list-style: none; margin: 0; padding: 0; display: grid; }
.invoice-list li { max-width: none; }
.invoice {
  display: grid; grid-template-columns: 1fr auto auto; gap: var(--s3); align-items: center;
  padding: var(--s3) 0; border-top: 1px solid var(--line);
}
.invoice:first-child { border-top: 0; }
.invoice > div:first-child { display: grid; }
.invoice-actions { display: flex; gap: var(--s2); }
@media (max-width: 640px) { .invoice { grid-template-columns: 1fr; } }
.invoice .badge { justify-self: start; }

.pay-dialog {
  width: min(100% - 2 * var(--s4), 720px); border: 0; border-radius: var(--r-lg); padding: 0;
  box-shadow: var(--shadow-lg); color: var(--ink); background: var(--surface);
}
.pay-dialog[open] {
  display: flex; flex-direction: column; overflow: hidden;
  max-height: calc(100vh - 2 * var(--s4)); max-height: calc(100dvh - 2 * var(--s4));
}
.cabinet-page .pay-dialog[open] {
  top: env(safe-area-inset-top); bottom: env(safe-area-inset-bottom);
  max-height: calc(100vh - 2 * var(--s4) - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  max-height: calc(100dvh - 2 * var(--s4) - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}
.pay-dialog::backdrop { background: rgba(20, 21, 26, .5); }
.pay-dialog-head { display: flex; align-items: center; padding: var(--s4) var(--s5) 0; }
.pay-dialog-head h2 { margin: 0; font-size: 1.25rem; }
.pay-dialog-head .btn { margin-left: auto; }
.pay-dialog-head, .pay-dialog-foot { flex: none; }
.pay-dialog-body {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s5); padding: var(--s4) var(--s5);
  flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain;
}
@media (max-width: 640px) { .pay-dialog-body { grid-template-columns: 1fr; } }
#pay-close { min-width: 44px; min-height: 44px; font-size: 1.25rem; }
.qr-box { display: grid; justify-items: center; gap: var(--s2); }
#pay-dialog .qr-box { align-self: start; align-content: start; }
.qr-box img { width: 220px; height: 220px; border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; padding: 6px; }
.qr-amount { text-align: center; margin: 0; max-width: 240px; }
.qr-amount b { display: block; font-size: 1.375rem; white-space: nowrap; }
.qr-amount .sub { display: block; }
.pay-steps { margin: 0 0 var(--s3); padding-left: 1.2em; display: grid; gap: var(--s1); }
.requisites summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.requisites summary::-webkit-details-marker { display: none; }
.requisites summary::after { content: "▾"; content: "▾" / ""; margin-left: auto; transition: transform .15s; }
.requisites[open] summary::after { transform: rotate(180deg); }
.requisites dl { display: grid; grid-template-columns: auto 1fr; gap: var(--s1) var(--s3); margin: 0; font-size: .875rem; }
.requisites dt { color: var(--muted); }
.requisites dd { margin: 0; display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; word-break: break-word; }
.requisites .num { white-space: nowrap; font-variant-numeric: tabular-nums; }
#pay-dialog .requisites dl { align-items: baseline; }
#pay-dialog .requisites dd { align-items: baseline; }
#pay-dialog .requisites { container: requisites / inline-size; }
@container requisites (min-width: 25rem) {
  #pay-dialog .requisites dd > span:not(.num) { flex: 1 1 0; min-width: 0; }
  #pay-dialog .requisites dd > .num { flex: 1 0 auto; }
}
.copy { border: 0; background: none; color: var(--accent-ink); font: inherit; font-size: .875rem; cursor: pointer; min-height: 44px; padding: 0 var(--s3); text-decoration: underline; }
.pay-dialog-foot { display: flex; gap: var(--s4); align-items: center; padding: var(--s4) var(--s5); border-top: 1px solid var(--line); }
.pay-dialog-foot p { margin: 0; flex: 1; }
@media (max-width: 480px) {
  .pay-dialog-head, .pay-dialog-body, .pay-dialog-foot { padding-inline: var(--s4); }
  .pay-dialog-foot { flex-direction: column; align-items: stretch; gap: var(--s2); }
  .pay-dialog-foot p { flex: none; }
  .pay-dialog-foot .btn { width: 100%; }
  .qr-box img { width: 160px; height: 160px; }
  .requisites dl { grid-template-columns: 1fr; gap: 0; }
  .requisites dt { margin-top: var(--s3); }
}

.vhod-head p { max-width: 60ch; }
.vhod-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); align-items: start; }
@media (max-width: 760px) { .vhod-grid { grid-template-columns: 1fr; } }
.vhod h2 { display: flex; align-items: center; gap: var(--s2); }
.vhod-max { background: #7c4dff; width: 28px; height: 28px; }
.max-wait { display: flex; gap: var(--s4); align-items: flex-start; margin-top: var(--s4); flex-wrap: wrap; }
.max-wait img { width: 180px; height: 180px; border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; padding: 6px; }
.max-wait .form-status { margin-top: var(--s2); }
.max-wait #max-renew { margin-top: var(--s3); }
@media (pointer: coarse) {
  .max-wait { flex-direction: column-reverse; align-items: stretch; }
  .max-wait img { width: 140px; height: 140px; align-self: center; }
  .max-wait .btn { width: 100%; }
  .qr-hint { display: none; }
}
.children { list-style: none; padding: 0; margin: var(--s4) 0; display: grid; gap: var(--s2); }
.children li { max-width: none; }
.child {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4); border: 1px solid var(--line); border-radius: var(--r-md);
  text-decoration: none; color: var(--ink); background: var(--surface);
}
@media (hover: hover) { .child:hover { border-color: var(--ink); } }
.child::after { content: "→"; color: var(--accent); font-weight: 700; }
.child span { margin-left: auto; }
#signed-out { display: grid; gap: var(--s4); }

.vhod-grid.single { grid-template-columns: minmax(0, 560px); }

.hp-field { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.linklike { border: 0; background: none; padding: 0; font: inherit; color: var(--accent-ink); text-decoration: underline; cursor: pointer; }
@media (hover: hover) { .linklike:hover { color: var(--accent); } }
@media (pointer: coarse), (max-width: 860px) {
  .cabinet .linklike { display: inline-flex; align-items: center; min-height: 44px; }
}
.field .typo-hint { color: var(--warn); font-size: .875rem; font-weight: 600; }
.cabinet .typo-hint { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.typo-hint b { overflow-wrap: anywhere; }
.mail-nopass { margin: var(--s3) 0 0; }
#mail-form .form-status { margin-top: var(--s2); }
.mail-sent-text { overflow-wrap: anywhere; margin-bottom: var(--s2); }
.mail-sent-text:focus { outline: none; }
.vhod .mail-sent-title { font-size: 1rem; margin: 0 0 var(--s2); }
.mail-help { border-top: 1px solid var(--line); margin-top: var(--s4); padding-top: var(--s4); }
.mail-help h3 { font-size: 1rem; margin: 0 0 var(--s2); }
.mail-help ul { margin: 0 0 var(--s4); padding-left: 1.2em; display: grid; gap: var(--s1); }
.mail-help .form-status { margin-top: var(--s2); }
#mail-request-slot:not(:empty) { margin-bottom: var(--s4); }
#req-form { margin-top: var(--s2); padding: var(--s4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); }
#req-form .sub { margin: 0 0 var(--s3); }
#req-form .field { margin-bottom: var(--s3); }
#req-form .form-status { margin-top: var(--s2); }
#req-done { margin: 0; }
@media (max-width: 420px) {
  .cabinet-page .wrap { width: calc(100% - 2 * var(--s4)); }
  .cabinet .card { padding: var(--s4); }
  #req-form { padding: 0; border: 0; background: none; }
}
.vhod-enter form { margin: var(--s4) 0; }
.mode-phone { display: none; }
body[data-mode="phone"] .mode-phone { display: block; }
body[data-mode="phone"] .mode-not-phone { display: none; }
.vhod-enter .field { margin-bottom: var(--s3); max-width: 22rem; }
.vhod-enter a[href^="tel:"] { white-space: nowrap; }

.slot-pick { cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
@media (hover: hover) { .slot-pick:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); } }
.slot-pick:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.slot-pick::after {
  content: 'Записаться →'; display: block; margin-top: 4px;
  font-size: .75rem; color: var(--accent); opacity: 0; transition: opacity .12s ease;
}
.slot-pick:focus-visible::after { opacity: 1; }
@media (hover: hover) { .slot-pick:hover::after { opacity: 1; } }
@media (hover: none) { .slot-pick::after { opacity: .8; } }

.qr-actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s2) 0 var(--s3); }
.qr-actions .btn { flex: 1 1 auto; }
.qr-box .qr-actions { width: 100%; max-width: 240px; margin: 0; }
@media (max-width: 640px) { .qr-box .qr-actions { max-width: none; } }

.lessons { margin-top: var(--s4); }
.lesson-list { list-style: none; margin: var(--s2) 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lesson-list li {
  display: grid; grid-template-columns: 3.5em auto; gap: 2px var(--s3); align-items: baseline;
  padding: 6px var(--s3); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface);
}
.lesson-day { font-weight: 600; text-transform: capitalize; }
.lesson-time { font-variant-numeric: tabular-nums; }
.lesson-list .sub { grid-column: 2; }

.attend { margin-top: var(--s4); }
.attend-month { margin: var(--s2) 0 var(--s1); }
.attend-days { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.attend-day {
  display: grid; justify-items: center; min-width: 44px; padding: 4px 6px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface);
  font-variant-numeric: tabular-nums; line-height: 1.2;
}
.attend-num { font-weight: 700; }
.attend-wd { font-size: .75rem; color: var(--muted); text-transform: lowercase; }
.attend-sign { font-weight: 700; }
.attend-day.is-present { border-color: #9cc9a6; background: #edf7ef; }
.attend-day.is-present .attend-sign { color: #1f6b33; }
.attend-day.is-absent { border-color: #e8b9b5; background: #fbeeec; }
.attend-day.is-absent .attend-sign { color: #a81c24; }
.attend-day.is-none .attend-sign { color: var(--muted); }
.attend-day.is-cancelled { background: var(--surface-2); color: var(--muted); }
.attend-legend { margin: var(--s2) 0 0; font-size: .8125rem; }

.cab-tournaments { list-style: none; margin: var(--s3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); }
.cab-tournaments li { padding: var(--s3); border: 1px solid var(--line); border-radius: var(--r-md); }
.cab-tournaments li.past { background: var(--surface-2); }
.cab-t-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); align-items: start; }
.cab-t-cols .mini-title { margin: var(--s3) 0 0; font-size: .9375rem; }
.cab-t-link { display: inline-block; margin-top: 4px; font-size: .9375rem; }
@media (pointer: coarse), (max-width: 860px) {
  .cab-t-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 0; }
}
@media (max-width: 760px) { .cab-t-cols { grid-template-columns: 1fr; gap: var(--s4); } }
.cab-t-name { font-weight: 600; }
.cab-t-state { margin-top: 4px; font-size: .9375rem; }
.cab-t-state.due { color: var(--danger); }
.cab-t-state.ok { color: var(--ok); }
.cab-tournaments li.cab-t-club { background: var(--accent-soft); border-color: var(--accent); }
.cab-t-badge {
  display: inline-block; margin-bottom: 4px; padding: 2px 10px; border-radius: var(--r-pill);
  background: var(--accent); color: #fff; font-size: .8125rem; font-weight: 600;
}
.cab-t-details { margin-top: var(--s2); font-size: .9375rem; }
.cab-t-details summary { cursor: pointer; color: var(--accent-ink); padding: 10px 0; }
.cab-t-details p { margin: var(--s1) 0 0; white-space: pre-line; }
.cab-cal-filter {
  display: inline-flex; gap: 4px; padding: 4px; margin-top: var(--s3); max-width: 100%; box-sizing: border-box;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-pill);
}
.cab-cal-filter[hidden], #cab-cal-source-note[hidden] { display: none; }
.cab-cal-filter-btn {
  flex: 1 1 0; min-width: 0; min-height: 44px; padding: 0 var(--s4);
  border: 0; border-radius: var(--r-pill); background: transparent; color: var(--muted);
  font: inherit; font-size: .9375rem; font-weight: 600; white-space: nowrap; cursor: pointer;
}
@media (hover: hover) { .cab-cal-filter-btn:hover { color: var(--ink); } }
.cab-cal-filter-btn[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.cab-cal-filter-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (max-width: 400px) { .cab-cal-filter { display: flex; width: 100%; } .cab-cal-filter-btn { padding: 0 var(--s2); } }
.cab-tournaments li.cab-t-unfit { background: var(--surface-2); }
.cab-tournaments li.cab-t-club.cab-t-unfit { background: var(--surface-2); border-color: var(--line); }
.cab-tournaments li.cab-t-none { border-style: dashed; }

.slider { margin: 0; display: grid; gap: var(--s3); position: relative; }
.slides {
  list-style: none; margin: 0; padding: 0; position: relative;
  aspect-ratio: 4 / 3; border-radius: var(--r-lg); overflow: hidden;
  background: #e9e3d8; box-shadow: var(--shadow-lg);
}
.slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .7s ease; }
.landing .slides > .slide { max-width: none; }
.slide.is-active { opacity: 1; z-index: 1; }
.slide:not([hidden]):first-child { opacity: 1; }
.slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

.slider-nav {
  position: absolute; top: calc(50% - 40px); z-index: 2;
  width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(20, 21, 26, .55); color: #fff; font-size: 26px; line-height: 1;
  display: grid; place-items: center; padding: 0 0 3px;
  transition: background .15s ease;
}
@media (hover: hover) { .slider-nav:hover { background: rgba(20, 21, 26, .8); } }
.slider-nav:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.slider-nav.prev { left: 10px; }
.slider-nav.next { right: 10px; }

.slider-caption { display: flex; align-items: center; justify-content: center; gap: var(--s4); flex-wrap: wrap; }
.slider-dots { display: inline-flex; gap: 2px; }
.slider-dots button {
  width: 28px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer;
  display: grid; place-items: center;
}
.slider-dots button::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: #8f8778; transition: background .2s ease, transform .2s ease;
}
.slider-dots button[aria-selected="true"]::before { background: var(--accent); transform: scale(1.35); }
.slider-dots button:focus-visible { outline: 2px solid var(--focus); border-radius: 50%; }
@media (pointer: coarse) {
  .landing .slider-dots { gap: 0; }
  .landing .slider-dots button { width: 34px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) { .slide { transition: none; } }

@media (max-width: 920px) { .slides { aspect-ratio: 16 / 10; max-height: 38vh; max-height: 38svh; width: 100%; } }
@media (max-width: 640px) and (orientation: portrait) {
  .landing .slider { gap: var(--s1); }
  .landing .slides { max-height: 30vh; max-height: 30svh; }
}
@media (max-width: 640px) and (orientation: portrait) and (max-height: 600px) {
  .landing .slides { max-height: 26vh; max-height: 26svh; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .hero .wrap { grid-template-columns: 1fr 1fr; gap: var(--s5); align-items: start; }
  .hero-media { order: 0; }
  .slides { max-height: 70vh; max-height: 70svh; }
  .landing .hero { padding-top: var(--s4); }
  .landing .hero h1 { font-size: clamp(1.6rem, 1rem + 2vw, 2.2rem); }
  .landing .hero-facts { gap: var(--s3); }
  .landing .hero-facts b { font-size: 1.125rem; white-space: nowrap; }
  .landing .hero-facts span { font-size: .8125rem; line-height: 1.35; }
}

.cabinet .btn-ghost { --btn-bd: var(--line-strong); }

.pass-tabs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin: var(--s3) 0;
  background: var(--surface-2); border-radius: var(--r-pill);
}
.pass-tabs .btn { min-height: 44px; --btn-bd: transparent; padding-inline: var(--s2); white-space: normal; }
.pass-tabs .btn[aria-selected="true"] { --btn-bg: var(--ink); --btn-fg: #fff; --btn-bd: var(--ink); }
.vhod .pass-wrap { display: flex; gap: var(--s2); }
.vhod .pass-wrap .input { flex: 1 1 auto; min-width: 0; }
.vhod .pass-show { flex: none; padding-inline: var(--s3); }
.vhod .pass-show[aria-pressed="true"] { --btn-bg: var(--surface-2); --btn-bd: var(--line-strong); }
#pass-word::-ms-reveal { display: none; }
#pass-forgot-row .linklike { text-align: left; }
#acc-form { margin-top: var(--s4); display: grid; gap: var(--s3); }
#acc-pending { border-bottom: 1px solid var(--line); padding-bottom: var(--s5); }
#signed-in > #logout { display: flex; width: fit-content; margin: var(--s6) auto 0; }

#vhod-lead { margin-bottom: 0; }
#notice:not(:empty) { margin-top: var(--s3); }
.vhod-ways { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }
#acc-pending-text { background: var(--warn-soft); padding: var(--s3) var(--s4); border-radius: var(--r-md); }
#mail-sent-text { background: var(--ok-soft); padding: var(--s3) var(--s4); border-radius: var(--r-md); }
#max-on > .sub { font-size: 1rem; color: var(--ink); }
.vhod details > summary { min-height: 44px; padding-block: 10px; cursor: pointer; }
.vhod :is(#max-how, #tg-how) { margin-bottom: var(--s1); }
.vhod :is(#max-on, #tg-on) > details { margin-bottom: var(--s3); }
.vhod-contacts { display: flex; flex-wrap: wrap; gap: var(--s2); justify-content: center; max-width: none; margin: 0; }

.cabinet-exit { margin: 0; text-align: center; max-width: none; }
.cabinet #pay-reported { margin: var(--s2) 0; padding: var(--s3) var(--s4); border-radius: var(--r-md); background: var(--warn-soft); font-weight: 600; }
.cabinet #cab-cal-more { margin-top: var(--s3); }
.cabinet #cab-cal-col > p.sub:last-child { margin-top: var(--s3); }
.cabinet .mail-code-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.bind-notify { margin: 0 0 var(--s3); font-weight: 600; }
.cab-t-request { margin-top: var(--s2); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }

.done-card { text-align: center; display: grid; gap: var(--s3); justify-items: center; }
.done-mark { width: 56px; height: 56px; margin: 0; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-ink); font-size: 1.75rem; font-weight: 700; }
.done-actions { display: grid; gap: var(--s2); width: 100%; max-width: 360px; }
.done-actions .btn { width: 100%; }

.has-suggest { position: relative; }
.suggest-list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; margin: 0; padding: 4px 0;
  list-style: none; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-md);
  box-shadow: var(--shadow-md, 0 8px 24px rgba(0,0,0,.12)); max-height: 60vh; overflow: auto; }
.suggest-list li { min-height: 44px; padding: 10px 14px; display: flex; align-items: center; cursor: pointer; font-size: 1rem; }
.suggest-list li[aria-selected="true"] { background: var(--surface-2); }
@media (hover: hover) { .suggest-list li:hover { background: var(--surface-2); } }

.app-install .btn { margin-top: var(--s2); }
.app-guide { border-top: 1px solid var(--line); }
.app-guide:last-of-type { border-bottom: 1px solid var(--line); margin-bottom: var(--s3); }
.app-guide summary {
  display: flex; align-items: center; justify-content: space-between; min-height: 48px;
  font-weight: 650; cursor: pointer; list-style: none;
}
.app-guide summary::-webkit-details-marker { display: none; }
.app-guide summary::after { content: "▾"; color: var(--muted); transition: transform .15s; }
.app-guide[open] summary::after { transform: rotate(180deg); }
.app-guide ol { margin: 0 0 var(--s3); padding-left: 1.25rem; display: grid; gap: var(--s2); }
.app-guide li { max-width: 60ch; }

.cabinet-page { --tabbar-h: 56px; }
.cabinet-page :is(.site-header, .site-footer, main.cabinet) { padding-inline: env(safe-area-inset-left) env(safe-area-inset-right); }
.cabinet-page .cab-panel { display: grid; gap: var(--s4); }
.cabinet-page:not(.is-app) .cab-panel:not(:has(> :not([hidden]))) { display: none; }
.cabinet-page:not(.is-app) #turniry-empty,
.cabinet-page:not(.is-app) .cab-head-name { display: none; }

.cabinet-page.is-app .cab-panel:not(.is-current) { display: none; }
.cabinet-page.is-app { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
.cabinet-page.is-app .cabinet { padding-bottom: var(--s5); }
.cabinet-page.is-app main [id] { scroll-margin-top: calc(var(--cab-hdr, 76px) + 8px); }
.cabinet-page.is-app:not([data-tab="eshche"]):not(.is-fatal) .site-footer { display: none; }
.cabinet-page.is-app .cab-tab-empty { margin: 0; max-width: none; padding: var(--s7) var(--s4); text-align: center; }

.cabinet-page.is-app .site-header .wrap { min-height: 52px; flex-wrap: nowrap; gap: var(--s3); padding-block: var(--s1); }
.cabinet-page.is-app .logo { flex: none; min-width: 44px; min-height: 44px; justify-content: center; }
.cabinet-page.is-app .logo .mark { height: 66px; }
.cabinet-page.is-app .logo > span {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.cabinet-page.is-app .cab-head-name {
  display: block; flex: 1 1 auto; min-width: 0;
  font-weight: 700; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cabinet-page.is-app #schedule-link { display: none; }
@media (max-height: 500px) {
  .cabinet-page.is-app .site-header { position: relative; }
}

.cab-head .logo { margin-right: auto; }
.cab-head .wrap > .btn { margin-left: 0; }
.cab-head [hidden] { display: none !important; }
.cab-exit { flex: none; gap: 6px; white-space: nowrap; }
.cab-exit-icon { flex: none; display: block; }
.cab-kids { position: relative; min-width: 0; }
.cab-kids-btn {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  min-height: 34px; padding: 0 var(--s3) 0 var(--s4);
  border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink);
  font: inherit; font-size: .875rem; font-weight: 700; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
@media (pointer: coarse), (max-width: 620px) { .cab-kids-btn { min-height: 44px; } }
@media (hover: hover) { .cab-kids-btn:hover { border-color: var(--ink); } }
.cab-kids-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.cab-kids-btn[aria-expanded="true"] { border-color: var(--ink); background: var(--surface-2); }
.cab-kids-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cab-kids-chev { flex: none; display: block; transition: transform .15s; }
.cab-kids-btn[aria-expanded="true"] .cab-kids-chev { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .cab-kids-chev { transition: none; } }
.cab-kids-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;
  width: max-content; min-width: 280px; max-width: min(380px, calc(100vw - 2 * var(--s4)));
  padding: var(--s2); border: 1px solid var(--line-strong); border-radius: var(--r-md);
  background: var(--surface); box-shadow: var(--shadow-lg, 0 12px 32px rgba(20, 21, 26, .18));
}
.cab-kids-title { margin: var(--s1) var(--s3) var(--s2); color: var(--muted); font-size: .8125rem; font-weight: 600; max-width: none; }
.cab-kids-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.cab-kids-item {
  display: grid; gap: 2px; min-height: 52px; align-content: center;
  padding: var(--s2) var(--s3); border-radius: var(--r-sm);
  color: var(--ink); text-decoration: none; -webkit-tap-highlight-color: transparent;
}
.cab-kids-item:active { background: var(--surface-2); }
@media (hover: hover) { .cab-kids-item:hover { background: var(--surface-2); color: var(--ink); } }
.cab-kids-item:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.cab-kids-item-name { font-weight: 700; overflow-wrap: anywhere; }
.cab-kids-item-sub { color: var(--muted); font-size: .8125rem; }
.cab-kids-item[aria-current] { background: var(--accent-soft); }
.cab-kids-item[aria-current] .cab-kids-item-name::after { content: " ✓"; content: " ✓" / ""; color: var(--accent-ink); }
.cab-kids-item[aria-current] .cab-kids-item-sub { color: var(--accent-ink); }
.cabinet-page.is-app.has-kids .cab-head-name { display: none; }
.cabinet-page.is-app .cab-kids { position: static; flex: 1 1 auto; }
.cabinet-page.is-app .cab-kids-btn { width: max-content; min-height: 44px; font-size: .9375rem; }
.cabinet-page.is-app .cab-kids-menu {
  top: calc(100% + 4px); left: max(var(--s2), env(safe-area-inset-left)); right: max(var(--s2), env(safe-area-inset-right));
  width: auto; min-width: 0; max-width: 480px; margin-inline: auto;
}
.cabinet-page.is-app .cab-exit { padding-inline: var(--s3); }
@media (max-width: 359px) {
  .cabinet-page.is-app .cab-head .wrap { gap: var(--s2); }
  .cabinet-page.is-app .cab-exit-icon { display: none; }
  .cabinet-page.is-app .cab-kids-btn { padding-inline: var(--s3) var(--s2); gap: 4px; }
}

.cab-anchors { border-top: 1px solid var(--line); }
.cabinet-page.is-app .cab-anchors { display: none; }
.cab-anchors-list {
  display: flex; gap: var(--s1); list-style: none;
  width: min(100% - 2 * var(--s5), var(--wrap)); margin: 0 auto; padding: 4px 0;
  overflow-x: auto; scrollbar-width: none;
}
.cab-anchors-list::-webkit-scrollbar { display: none; }
.cab-anchors-list li { flex: none; max-width: none; }
.cab-anchor {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-width: 52px; min-height: 40px; padding: 0 var(--s3);
  border-radius: var(--r-pill); color: var(--muted);
  text-decoration: none; -webkit-tap-highlight-color: transparent;
}
.cab-anchor .cab-tab-icon { display: block; width: 24px; height: 24px; flex: none; }
.cab-anchor .cab-tab-icon[hidden] { display: none; }
.cab-anchor:focus-visible { outline-offset: -3px; }
@media (hover: hover) { .cab-anchor:hover { color: var(--ink); background: var(--surface-2); } }
.cab-anchor[aria-current] { color: var(--accent-ink); background: var(--accent-soft); }
.cab-anchor[aria-current]::after {
  content: ""; position: absolute; left: 30%; right: 30%; bottom: 4px;
  height: 2px; border-radius: 1px; background: currentColor;
}
@media (pointer: coarse) { .cab-anchor { min-height: 44px; } }
@media (max-height: 500px) { .cabinet-page:not(.is-app) .cab-head { position: relative; } }

.exit-dialog {
  width: min(100% - 2 * var(--s4), 460px); border: 0; border-radius: var(--r-lg); padding: var(--s5);
  box-shadow: var(--shadow-lg); color: var(--ink); background: var(--surface);
}
.exit-dialog[open] {
  max-height: calc(100vh - 2 * var(--s4)); max-height: calc(100dvh - 2 * var(--s4) - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow: auto; overscroll-behavior: contain;
}
.exit-dialog::backdrop { background: rgba(20, 21, 26, .5); }
.exit-dialog h2 { margin: 0 0 var(--s3); font-size: 1.25rem; }
.exit-dialog p { margin: 0 0 var(--s3); max-width: none; }
.exit-dialog .form-status:empty { display: none; }
.exit-dialog .form-status[data-kind="err"] { color: var(--danger); font-weight: 600; }
.exit-actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
@media (max-width: 480px) {
  .exit-dialog { padding: var(--s4); }
  .exit-actions .btn { flex: 1 1 100%; }
}

.avatar-mod { margin: var(--s2) 0 0; padding: var(--s2) var(--s3); border-radius: var(--r-sm); font-size: .875rem; font-weight: 600; max-width: 32ch; text-align: left; }
.avatar-mod[data-kind="pending"] { background: var(--warn-soft); color: var(--warn); }
.avatar-mod[data-kind="rejected"] { background: var(--danger-soft); color: var(--danger); }
.avatar-mod[hidden] { display: none; }
@media (max-width: 640px) {
  .avatar-mod { grid-column: 2; max-width: none; margin-top: var(--s1); }
}
.cabinet-page.is-standalone .site-header { padding-top: env(safe-area-inset-top); }
.cabinet-page.is-standalone .cabinet-exit.is-guest { display: none; }

.cabinet-page.is-app .cab-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  padding-inline: max(env(safe-area-inset-left), (100% - 560px) / 2) max(env(safe-area-inset-right), (100% - 560px) / 2);
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--surface); border-top: 1px solid var(--line);
}
.cabinet-page .cab-tab[hidden], .cabinet-page .cab-panel[hidden] { display: none !important; }
.cabinet-page.is-app .cab-tab {
  position: relative; min-width: 0; min-height: var(--tabbar-h);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: 6px 2px 4px; border: 0; border-radius: 0; background: none; color: var(--muted);
  font: inherit; font-size: .75rem; line-height: 1.2; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.cabinet-page.is-app .cab-tab:active { background: var(--surface-2); }
.cabinet-page.is-app .cab-tab[aria-selected="true"] { color: var(--accent-ink); font-weight: 600; }
.cabinet-page.is-app .cab-tab:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; border-radius: var(--r-sm); }
.cabinet-page.is-app .cab-tab-icon { display: block; width: 24px; height: 24px; }
.cabinet-page .cab-tab-icon-lichess {
  background-color: currentColor;
  -webkit-mask: url("lichess-logo.svg") center / 22px 22px no-repeat;
          mask: url("lichess-logo.svg") center / 22px 22px no-repeat;
}
.cabinet-page.is-app .cab-tab-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cabinet-page.is-app .cab-badge { position: absolute; box-shadow: 0 0 0 2px var(--surface); }
.cabinet-page.is-app .cab-badge-dot { top: 7px; left: calc(50% + 7px); width: 8px; height: 8px; border-radius: 50%; background: var(--danger); }
.cabinet-page.is-app .cab-badge-count {
  top: 3px; left: calc(50% + 5px); min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--r-pill); background: var(--accent); color: #fff;
  font-size: .6875rem; font-weight: 700; line-height: 18px; text-align: center;
}
.cabinet-page.is-app.kb-open { padding-bottom: 0; }
.cabinet-page.is-app.kb-open .cab-tabbar { display: none; }
.cabinet-page.is-app:not(.kb-open) > .toast { bottom: calc(var(--tabbar-h) + var(--s2) + env(safe-area-inset-bottom)); }

.cabinet #push-text { margin-bottom: 0; }
.cabinet #push-devices { margin: var(--s2) 0 0; }
.cabinet .push-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-top: var(--s3); }
.cabinet .push-actions:not(:has(> :not([hidden]))) { display: none; }

.cabinet-page.vhod-page.is-standalone .site-header .wrap { min-height: 52px; padding-block: var(--s1); }
.cabinet-page.vhod-page.is-standalone .logo .mark { height: 66px; }
.cabinet-page.vhod-page.is-standalone .logo small { display: none; }
.cabinet-page.vhod-page.is-standalone .site-header .cabinet-schedule { display: none; }

.lichess-nick { font-weight: 700; overflow-wrap: anywhere; }
.lichess-card-head { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; margin: 0 0 var(--s3); }
.lichess-card-head .badge, .lichess-tour-head .badge { white-space: normal; }
.lichess-ratings { list-style: none; padding: 0; margin: 0 0 var(--s3); display: flex; flex-wrap: wrap; gap: var(--s2); }
.lichess-ratings li { display: inline-flex; gap: 6px; align-items: baseline; padding: 4px 12px; border-radius: var(--r-pill); background: var(--surface-2); }
.lichess-rating-label { color: var(--muted); font-size: .8125rem; }
.lichess-week { margin: 0 0 var(--s3); }
.lichess-games { list-style: none; padding: 0; margin: 0 0 var(--s3); }
.lichess-game { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--s3); padding: var(--s2) 0; border-top: 1px solid var(--line); }
.lichess-game-when { grid-column: 1 / -1; color: var(--muted); font-size: .8125rem; }
.lichess-game-who { overflow-wrap: anywhere; }
.lichess-game.is-win .lichess-game-res { color: var(--ok); }
.lichess-game.is-loss .lichess-game-res { color: var(--danger); }
.lichess-game-link { grid-column: 1 / -1; font-size: .875rem; }
.lichess-tours { list-style: none; padding: 0; margin: var(--s3) 0 0; display: grid; gap: var(--s3); }
.lichess-tour { border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s3) var(--s4); background: var(--surface); }
.lichess-tour .sub { margin: var(--s1) 0 0; }
.lichess-tour-head { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.lichess-tour-name { font-weight: 700; overflow-wrap: anywhere; }
.lichess-results { margin: var(--s2) 0 0; padding-left: 0; list-style: none; display: grid; gap: 2px; font-size: .9375rem; }

.lichess-card-info { border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--s3) var(--s4); margin-bottom: var(--s4); font-size: .9375rem; }
.lichess-card-info[hidden], .lichess-block [hidden], .lichess-card [hidden] { display: none; }
.lichess-block { margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--line); }
.lichess-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s4); margin-bottom: var(--s3); }
.lichess-title { font-size: 1.25rem; margin: 0; }
.lichess-actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
.lichess-steps { margin: 0 0 var(--s4); padding-left: 1.25em; display: grid; gap: var(--s2); font-size: .9375rem; }
.lichess-kind { border: 0; padding: 0; margin: 0 0 var(--s4); display: grid; gap: var(--s2); }
.lichess-kind legend { font-weight: 600; margin-bottom: var(--s2); padding: 0; }
.lichess-start::-webkit-datetime-edit, .lichess-start::-webkit-datetime-edit-fields-wrapper { padding-block: 0; }

.lichess-card .lichess-intro { margin-bottom: var(--s3); }
.lichess-card .lichess-connect { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); align-items: center; margin: 0 0 var(--s3); }
.lichess-card .lichess-team { margin: var(--s4) 0 0; }
.lichess-card .mini-title { margin-top: var(--s5); }
.lichess-card .lichess-switch { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin: calc(-1 * var(--s1)) 0 var(--s3); }
.lichess-card .lichess-switch .sub { margin: 0; }
.lichess-card .lichess-switch-hint { margin: 0 0 var(--s3); }
.lichess-flash { margin: 0 0 var(--s3); padding: var(--s2) var(--s3); border-radius: var(--r-sm); background: var(--surface-2); font-weight: 600; }
.lichess-flash[data-kind="ok"] { background: var(--ok-soft); color: var(--ok); }
.lichess-flash[data-kind="err"] { background: var(--danger-soft); color: var(--danger); }
@media (max-width: 620px) {
  .lichess-actions .btn, .lichess-card .btn { min-height: 44px; }
  .lichess-game-link { display: inline-block; min-height: 44px; line-height: 44px; }
  .lichess-tour-name { display: inline-block; padding-block: 10px; }
}

.puzzle-band { background: #efe3cf; }
.puzzle-wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s6); align-items: center; }
.puzzle-text p { color: #4a4436; }
.puzzle-frame { width: 400px; max-width: 100%; container-type: inline-size; border-radius: var(--r-md); overflow: hidden; background: #fff; box-shadow: var(--shadow-md); }
.puzzle-frame iframe { display: block; width: 100%; height: 444px; height: calc(100cqw + 52px); border: 0; }
@media (max-width: 860px) {
  .puzzle-wrap { grid-template-columns: minmax(0, 1fr); }
  .puzzle-frame { justify-self: center; }
}

.lichess-page { max-width: 560px; padding-block: var(--s7); }
.lichess-page h1 { font-size: 1.5rem; }
.lichess-page-actions { display: flex; flex-wrap: wrap; gap: var(--s2); }

.lichess-puzzles .lichess-ratings { margin-bottom: var(--s2); }
.lichess-puzzle-week { margin: 0 0 var(--s2); }
.lichess-card .lichess-puzzles .lichess-connect { margin: var(--s3) 0 var(--s2); }
.lichess-puzzle-hint { margin: 0; }
.lichess-arena-list { gap: var(--s2); }
.lichess-arena { padding: var(--s2) var(--s3); }
.lichess-arena.is-started { border-color: var(--ok); }
.lichess-arena-meta .badge, .lichess-arena-meta .lichess-cap { margin-right: var(--s2); }
.lichess-cap { display: inline-block; padding: 2px 10px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--muted); font-size: .8125rem; }
.lichess-arena-note { margin: var(--s1) 0 0; font-size: .875rem; color: var(--warn); overflow-wrap: anywhere; }
.lichess-card .lichess-more { margin: var(--s3) 0 0; }
@media (max-width: 620px) {
  .lichess-more a { display: inline-block; padding-block: 10px; }
}

.puzzle-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); }
.puzzle-more { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

.max-app .max-app-actions { display: grid; gap: var(--s2); margin-top: var(--s4); }
.max-app .max-app-actions [hidden] { display: none; }

.ratings-table { border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ratings-table th, .ratings-table td { padding: 2px var(--s4) 2px 0; text-align: left; font-weight: 400; }
.ratings-table thead th { color: var(--muted); font-size: .8125rem; font-weight: 600; }
.ratings-table tbody th a { font-weight: 600; white-space: nowrap; }
.ratings-table td { font-weight: 700; }
.ratings-table tr > :last-child { padding-right: 0; }
@media (max-width: 360px) { .ratings-table th, .ratings-table td { padding-right: var(--s2); } }
@media (pointer: coarse), (max-width: 640px) {
  .ratings-table tbody th a { display: inline-block; padding-block: 11px; }
}
.lichess-card .lichess-now { margin: var(--s2) 0 var(--s3); }

.cabinet-page #content, #panel-stats, .stats-card, .stats-card #stats-body, .stats-out { min-width: 0; }
.stats-card .stats-status { margin: var(--s3) 0 0; color: var(--muted); }
.stats-card .stats-status[hidden] { display: none; }

.stats-pick { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
.stats-pick-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 var(--s4);
  border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink);
  font: inherit; font-size: .9375rem; font-weight: 600; white-space: nowrap; cursor: pointer;
}
@media (hover: hover) { .stats-pick-btn:hover { border-color: var(--ink); } }
.stats-pick-btn[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.stats-pick-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (max-width: 640px) {
  .stats-pick {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-right: var(--s6);
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
            mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
  }
  .stats-pick::-webkit-scrollbar { display: none; }
  .stats-pick-btn { flex: 0 0 auto; }
}

.stats-place { margin: var(--s4) 0 0; font-size: 1.0625rem; }
.stats-country { margin: var(--s1) 0 0; }

.stats-table {
  width: 100%; margin-top: var(--s4);
  border-collapse: collapse; font-variant-numeric: tabular-nums;
}
.stats-table th, .stats-table td { padding: 7px var(--s3) 7px 0; text-align: left; font-weight: 400; vertical-align: baseline; }
.stats-table tr > :last-child { padding-right: 0; }
.stats-table thead th { color: var(--muted); font-size: .8125rem; font-weight: 600; white-space: nowrap; }
.stats-table tbody + tbody tr:first-child td, .stats-table tbody tr + tr th,
.stats-table tbody tr + tr td { border-top: 1px solid var(--line); }
.stats-table .stats-rank { width: 1%; text-align: right; color: var(--muted); white-space: nowrap; }
.stats-table .stats-num, .stats-table .stats-prog { width: 1%; text-align: right; white-space: nowrap; }
.stats-table tbody .stats-num b { font-weight: 700; }
.stats-table .stats-name { width: 100%; max-width: 0; font-weight: 400; overflow: hidden; text-overflow: ellipsis; }
.stats-table .stats-name-text { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stats-table .stats-name-box { display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.stats-table .stats-name-text { flex: 1 1 auto; min-width: 0; }
.stats-ava {
  flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%;
  display: block; object-fit: cover; background: var(--surface-2);
}
.stats-ava-empty {
  display: grid; place-items: center;
  background: var(--ink); color: #fff;
  font-size: .8125rem; font-weight: 700; line-height: 1; letter-spacing: 0;
}
.stats-table tbody tr.is-me { background: var(--accent-soft); }
.stats-table tbody tr.is-me .stats-name-text { font-weight: 700; }
.stats-table tbody tr.is-me td:first-child, .stats-table tbody tr.is-me th:first-child { border-radius: var(--r-sm) 0 0 var(--r-sm); }
.stats-table tbody tr.is-me td:last-child { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.stats-up { color: var(--ok); font-weight: 600; }
.stats-down { color: var(--danger); font-weight: 600; }
.stats-same, .stats-none { color: var(--muted); }
.stats-table .stats-gap td { color: var(--muted); text-align: center; letter-spacing: .3em; }
.stats-note { margin-top: var(--s4); }
.stats-note .sub { margin: 0 0 var(--s1); }
.stats-note .sub:last-child { margin-bottom: 0; }
@media (max-width: 400px) {
  .stats-table th, .stats-table td { padding-right: var(--s2); }
  .stats-table .stats-rank, .stats-table .stats-name { padding-right: var(--s1); }
  .stats-table thead th { font-size: .75rem; }
  .stats-table tbody { font-size: .9375rem; }
  .stats-place { font-size: 1rem; }
  .stats-table .stats-name-box { gap: var(--s1); }
  .stats-ava { flex-basis: 28px; width: 28px; height: 28px; }
}