/* Оформление сервиса «Кружок» поверх nemzo.css (kruzhok.go). */
html[data-kruzhok], html[data-kruzhok] body.admin {
  --bg: #fafaf2;
  --surface: #ffffff;
  --surface-2: #f4f3ea;
  --ink: #2a2440;
  --muted: #5d5775;
  --line: #e7e5da;
  --line-strong: #d3d0c4;
  --accent: #6554d8;
  --accent-ink: #4f3fc0;
  --accent-soft: #ece8fd;
  --focus: #6554d8;
  --r-sm: 10px; --r-md: 14px; --r-lg: 20px;
  --nz-r-btn: 999px;
  --dl-a: #6554d8; --dl-b: #e8643c;
}
/* Фон: вместо капель — сирень и лайм образца. */
html[data-kruzhok]:has(> :is(.cabinet-page, body.admin, body.trener)) { background: #f3eefb; }
html[data-kruzhok] :is(.cabinet-page, body.admin, body.trener)::before { background: linear-gradient(150deg, #e9dcfb 0%, #f4f1e4 52%, #eef2c0 100%) !important; }
html[data-kruzhok] .nz-demo { background: #c9a0f5; color: #2a2440; }
html[data-kruzhok] .nz-demo a { color: #2a2440; font-weight: 600; }

/* ---- нет шахмат: админка ---- */
html[data-kruzhok] .stat:has(#stat-rating),
html[data-kruzhok] #refresh-all, html[data-kruzhok] #refresh-note,
html[data-kruzhok] .refresh-note,
html[data-kruzhok] fieldset:has(#f-fsr),
html[data-kruzhok] fieldset:has(#f-lichess),
html[data-kruzhok] #lichess-card-info,
html[data-kruzhok] #tab-lichess, html[data-kruzhok] #lichess-panel,
html[data-kruzhok] section:has(> #lichess-block-title), html[data-kruzhok] :has(> #lichess-block-title),
html[data-kruzhok] .rt-head,
html[data-kruzhok] #sort-mobile option[value^="rating"],
html[data-kruzhok] .field:has(#t-min-rating), html[data-kruzhok] .field:has(#t-max-rating),
html[data-kruzhok] :has(> #li-lim-title) { display: none !important; }
html[data-kruzhok] .sort[data-sort="rating"] { pointer-events: none; color: inherit; }

/* ---- нет шахмат: кабинет ---- */
html[data-kruzhok] #rating-row,
html[data-kruzhok] #photo-club-note,
html[data-kruzhok] #duo-card,
html[data-kruzhok] [data-tab="lichess"], html[data-kruzhok] [data-tab="igra"],
html[data-kruzhok] [data-tab="stats"], html[data-kruzhok] [data-tab="ga"],
html[data-kruzhok] [data-tab="pp"], html[data-kruzhok] [data-tab="duel"], html[data-kruzhok] [data-tab="bh"] { display: none !important; }
html[data-kruzhok] .avatar-frame { background: #e7d6fb; }
html[data-kruzhok] .avatar-empty { font-size: 0; display: block; width: 100%; height: 100%; background: url("m-art.svg") center / 78% no-repeat; }

/* ---- прелоадер: кружок вместо доски ---- */
html[data-kruzhok] .debut-loader .dl-stage, html[data-kruzhok] .dl-stage { visibility: hidden; position: relative; }
html[data-kruzhok] .dl-stage::after {
  content: ""; visibility: visible; position: absolute; left: 50%; top: 50%; width: 38px; height: 38px; margin: -19px 0 0 -19px;
  border-radius: 50%; border: 7px solid #ece8fd; border-top-color: #e8643c; animation: kr-spin .9s linear infinite;
}
@keyframes kr-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { html[data-kruzhok] .dl-stage::after { animation-duration: 4s; } }

/* ---- уровень в таблице ---- */
.kr-lv { display: inline-flex; flex-direction: column; gap: 1px; line-height: 1.2; }
.kr-lv b { font-weight: 600; }
.kr-lv small { color: var(--muted); font-size: 12px; }
.kr-lv-empty { color: var(--muted); }

/* ---- шкалы в настройках ---- */
.kr-scales { margin: 0 0 16px; padding: 18px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.kr-scales h3 { margin: 0 0 4px; }
.kr-scales textarea { width: 100%; min-height: 128px; margin: 10px 0; }
.kr-scales .kr-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

/* ---- кружки за посещения в кабинете ---- */
.kr-card { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 6px 18px; align-items: center; background: #eef2ae; border: 0; }
.kr-card img { width: 112px; height: auto; }
.kr-card h2 { margin: 0 0 2px; font-size: 20px; letter-spacing: -.02em; }
.kr-card p { margin: 0; color: #4e4a35; font-size: 15px; line-height: 1.35; }
.kr-rings { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 8px; list-style: none; padding: 0; }
.kr-rings li { width: 26px; height: 26px; border-radius: 50%; border: 5px solid #2a244026; }
.kr-rings li.on { border-color: #e8643c; }
.kr-stars { font-weight: 700; color: #2a2440; }
.kr-ladder { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.kr-ladder li { font-size: 13px; font-weight: 600; padding: 5px 11px; border-radius: 999px; background: #ffffffb3; color: #5d5775; }
.kr-ladder li.done { color: #2a2440; }
.kr-ladder li.now { background: #6554d8; color: #fff; }
@media (max-width: 460px) { .kr-card { grid-template-columns: 76px minmax(0, 1fr); } .kr-card img { width: 76px; } .kr-rings li { width: 22px; height: 22px; } }