/* Соцчасть Poké Hub (shared/social/*.js) — общие стили для PokéSwarm и PokéArena. Всё внутри .sx-root:
   слой экранов (.sx-layer), окна (.sx-ov), боковая панель меню (.sx-season), кнопки друзей и почты (.sx-topbar), всплывашки.
   Где стоят панель и кнопки в меню — решает страница игры (её стили). */
.sx-root { --ink:#2a2440; --ink-2:#5a5478; --paper:#fff; --paper-2:#f3f1fa; --line:#e4e0f0;
  --red:#ff5a5f; --red-d:#e0303e; --orange:#ff9a3a; --yellow:#ffcc33; --yellow-d:#f2a516; --blue:#3a8cff; --blue-d:#2563d8; --green:#36c96a; --green-d:#1fa04e; --purple:#8a5cff; --purple-d:#5a3ad8;
  --shadow:0 10px 28px #1a124638, 0 2px 6px #1a12461f; --shadow-sm:0 4px 12px #1a12462e;
  --font-title:"M PLUS Rounded 1c", "Nunito", system-ui, sans-serif; --font:"Nunito", system-ui, sans-serif;
  --stripes:repeating-linear-gradient(-45deg, #ffffff24 0 10px, #fff0 10px 20px);
  color:var(--ink); font:700 14px/1.35 var(--font); font-variant-numeric:tabular-nums; text-align:left; letter-spacing:normal; text-transform:none; }
:where(.sx-root) *, :where(.sx-root) *::before, :where(.sx-root) *::after { box-sizing:border-box; }
:where(.sx-root) :is(button, input, textarea) { font:inherit; color:inherit; letter-spacing:normal; text-transform:none; }
:where(.sx-root) img { -webkit-user-drag:none; }
.sx-layer { position:fixed; inset:0; z-index:50; display:none; flex-direction:column; background:#140e32d6; backdrop-filter:blur(6px); overflow:hidden; zoom:var(--uiz, 1); user-select:none; }
.sx-layer.on { display:flex; animation:sxFade .2s ease-out; }
@keyframes sxFade { from { opacity:0 } } @keyframes sxPulse { to { filter:brightness(1.3) } }
/* базовые элементы (как в играх, но свои — чтобы стили игры их не меняли) */
.sx-root .btn { --c:var(--yellow); --cd:var(--yellow-d); --tc:var(--ink); color:var(--tc); background:linear-gradient(180deg, color-mix(in srgb, var(--c) 82%, white) 0%, var(--c) 60%, var(--cd) 100%); box-shadow:0 4px 0 color-mix(in srgb, var(--cd) 70%, black), var(--shadow-sm);
  border:none; border-radius:999px; display:inline-flex; justify-content:center; align-items:center; gap:8px; padding:11px 24px; font:900 16px var(--font-title); position:relative; overflow:hidden; cursor:pointer; white-space:nowrap; transition:transform .1s, filter .12s; min-width:0; min-height:0; width:auto; height:auto; margin:0; text-shadow:none; }
.sx-root .btn::after { content:""; position:absolute; inset:0; background:var(--stripes); opacity:.5; pointer-events:none; }
@media (hover:hover) { .sx-root .btn:hover { filter:brightness(1.06); transform:translateY(-2px) scale(1.02); } }
.sx-root .btn:active { transform:translateY(2px); } .sx-root .btn:disabled { filter:grayscale(.85); opacity:.7; cursor:not-allowed; transform:none; }
.sx-root .btn.red { --c:var(--red); --cd:var(--red-d); --tc:#fff; } .sx-root .btn.blue { --c:var(--blue); --cd:var(--blue-d); --tc:#fff; } .sx-root .btn.green { --c:var(--green); --cd:var(--green-d); --tc:#fff; } .sx-root .btn.purple { --c:var(--purple); --cd:var(--purple-d); --tc:#fff; }
.sx-root .btn.ghost { --c:#fff; --cd:#e6e2f2; } .sx-root .btn.ghost::after { display:none; } .sx-root .btn.small { padding:7px 14px; font-size:13px; } .sx-root .btn.big { padding:15px 38px; font-size:22px; }
.sx-root .btn img { width:22px; height:22px; image-rendering:pixelated; }
.sx-root .seg { display:inline-flex; gap:4px; padding:4px; background:var(--paper-2); border-radius:999px; flex-wrap:wrap; }
.sx-root .pill { display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border:none; border-radius:999px; background:none; color:var(--ink-2); font-size:13px; font-weight:900; cursor:pointer; box-shadow:none; }
.sx-root .pill.on { background:#fff; color:var(--ink); box-shadow:0 2px 0 #1a12461f, var(--shadow-sm); } .sx-root .pill:disabled { opacity:.45; cursor:not-allowed; } .sx-root .pill img { image-rendering:pixelated; }
.sx-root .chip { display:inline-flex; align-items:center; gap:4px; padding:2px 9px; border-radius:99px; font-size:11px; font-weight:900; color:#fff; background:var(--ink-2); }
.sx-root .kb { display:inline-grid; place-items:center; min-width:22px; height:22px; padding:0 6px; border-radius:6px; background:#fff; color:var(--ink); font:900 11px var(--font-title); box-shadow:0 2px 0 #1a124647; }
.sx-root .scr-top { display:flex; align-items:center; gap:18px; padding:16px 24px 0; flex:none; }
.sx-root .esc { display:inline-flex; align-items:center; gap:8px; padding:5px 15px 5px 6px; border:none; border-radius:999px; background:#fff; color:var(--ink); font:900 15px var(--font-title); box-shadow:0 4px 0 #1a124638, var(--shadow-sm); cursor:pointer; transition:transform .1s; }
@media (hover:hover) { .sx-root .esc:hover { transform:translateY(-2px); } } .sx-root .esc .kb { background:var(--ink); color:#fff; box-shadow:none; }
.sx-root .scr-title { display:flex; align-items:baseline; gap:14px; padding:8px 28px 9px; border-radius:14px; color:#fff; transform:skewX(-8deg); background:var(--stripes), linear-gradient(100deg, var(--red), var(--orange)); box-shadow:0 4px 0 #b02030, var(--shadow-sm); }
.sx-root .scr-title > * { transform:skewX(8deg); } .sx-root .scr-title b { font:900 30px/1 var(--font-title); text-shadow:0 2px #0003; } .sx-root .scr-title small { font:900 13px var(--font-title); opacity:.95; }
.sx-root .grow { flex:1; } .sx-root .muted { color:var(--ink-2); } .sx-root .row { display:flex; align-items:center; gap:8px; }
:where(.sx-root) :is(h2, h3, p, ul) { margin:0; }
@media (hover:none) { .sx-root .kb { display:none; } }
.sx-emb, .sx-art { image-rendering:pixelated; flex:none; filter:drop-shadow(0 2px 2px #1a124640); }
body.sx-open .ph-toasts { z-index:90; }
.sx-root .sx-sp-note { display:flex; align-items:center; gap:6px; padding:6px 12px; border-radius:12px; background:var(--paper-2); color:var(--ink-2); font-size:12px; font-weight:900; }
.sx-root .sx-games { display:flex; background:#fffffff0; box-shadow:var(--shadow-sm); } .sx-root .sx-games .pill { flex:1; justify-content:center; } .sx-root .sx-games img { width:20px; }
.sx-root .sx-pgame { display:flex; } .sx-root .sx-pgame .seg { background:#fffffff0; box-shadow:var(--shadow-sm); } .sx-root .sx-pgame img { width:20px; }
.sx-root .sx-duelwl { display:flex; align-items:center; gap:8px; } .sx-root .sx-duelwl b { font:900 15px var(--font-title); } .sx-root .sx-duelwl i { padding:0 8px; border-radius:99px; background:#ffe3e6; color:var(--red-d); font:900 11px/18px var(--font-title); font-style:normal; }
.sx-root .sx-hero.duel { --sky:#8a5cff; --gr:#ff5a5f; }
.sx-root .sx-few-box { display:flex; align-items:center; gap:10px; padding:10px 16px; color:var(--ink-2); font-weight:800; font-size:13px; }
.sx-root .sx-clsrc { display:flex; flex-direction:column; gap:6px; padding:12px; } .sx-root .sx-clsrc b { font:900 15px var(--font-title); } .sx-root .sx-clsrc span { display:flex; align-items:center; gap:8px; color:var(--ink-2); font-size:13px; font-weight:800; }
.sx-root .sx-ev.duel.win { background:linear-gradient(90deg, #ece4ff, var(--paper-2)); }
.sx-root .sx-pend { margin-top:8px; }
  @keyframes sxIn { from { opacity:0; transform:translateY(14px) } } @keyframes sxPop { from { opacity:0; transform:scale(.92) } } @keyframes sxSpin { to { rotate:360deg } }
  @keyframes sxSpark { to { transform:translate(var(--dx), var(--dy)) scale(.2); opacity:0 } } @keyframes sxFloat { 50% { translate:0 -6px } } @keyframes sxPod { from { opacity:0; transform:translateY(40px) scale(.9) } }
  .sx-screen { flex:1; min-height:0; display:flex; flex-direction:column; padding-top:max(0px, env(safe-area-inset-top)); }
  .sx-in > * { animation:sxIn .3s ease-out backwards; }
  .sx-top { padding-bottom:12px; flex-wrap:wrap; row-gap:8px; } .sx-sub { font:900 13px var(--font-title); }
  .sx-hbtn { position:relative; } .sx-hbtn img { width:20px; height:20px; }
  .sx-badge { position:absolute; top:-7px; right:-7px; min-width:20px; height:20px; padding:0 6px; border-radius:99px; background:var(--red); color:#fff; font:900 11px/20px var(--font-title); box-shadow:0 0 0 2px #fff; text-align:center; z-index:1; }
  .sx-panel { background:#fffffff7; border-radius:20px; box-shadow:var(--shadow); color:var(--ink); }
  .sx-box { display:flex; flex-direction:column; gap:8px; padding:12px 14px; }
  .sx-grp { display:flex; align-items:baseline; gap:10px; padding-left:10px; border-left:5px solid var(--blue); } .sx-grp b { font:900 18px var(--font-title); } .sx-grp small { color:var(--ink-2); font-weight:800; font-size:12px; }
  .sx-pad { padding:14px; text-align:center; }
  .sx-ic { image-rendering:pixelated; vertical-align:middle; flex:none; }
  .sx-spin { display:grid; place-items:center; } .sx-spin i { width:38px; height:38px; border-radius:50%; background:linear-gradient(var(--red) 0 46%, var(--ink) 46% 54%, #fff 54%); box-shadow:0 0 0 3px var(--ink), 0 3px 8px #0004; animation:sxSpin .8s linear infinite; }
  .sx-empty { display:flex; flex-direction:column; align-items:center; gap:8px; padding:30px 22px; text-align:center; } .sx-empty h3 { margin:0; font:900 20px var(--font-title); } .sx-empty p { margin:0; max-width:460px; color:var(--ink-2); }
  .sx-empty img { image-rendering:pixelated; }
  .sx-center { flex:1; display:grid; place-items:center; padding:20px; }
  .sx-tag { display:inline-flex; align-items:center; margin-right:6px; padding:1px 6px; border-radius:7px; background:var(--ink); color:var(--yellow); font:900 .72em/1.35 var(--font-title); letter-spacing:.5px; vertical-align:.12em; white-space:nowrap; text-shadow:none; }
  .sx-title { display:inline-flex; align-items:center; gap:3px; color:#b07a10; font:900 11px var(--font-title); white-space:nowrap; } .sx-title img { width:12px; height:12px; image-rendering:pixelated; }
  .sx-rank { image-rendering:pixelated; vertical-align:middle; flex:none; } .sx-micon { image-rendering:pixelated; object-fit:contain; }
  .sx-dot { display:inline-block; flex:none; width:24px; height:24px; border-radius:50%; background:linear-gradient(var(--sky) 50%, var(--gr) 50%); box-shadow:0 0 0 2px #fff, 0 1px 3px #0004; }
  .sx-dot.mon { background:#fff; display:inline-grid; place-items:center; overflow:hidden; } .sx-dot.mon img { width:26px; height:26px; }
  .sx-spark { position:fixed; z-index:99; width:7px; height:7px; border-radius:50%; pointer-events:none; animation:sxSpark .65s ease-out forwards; }
  .sx-link { padding:0; border:0; background:none; color:var(--blue-d); font:900 12px var(--font); text-decoration:underline; cursor:pointer; }
  /* аватар с рамкой */
  .sx-av { --s:48px; position:relative; flex:none; display:inline-grid; place-items:center; width:var(--s); height:var(--s); }
  .sx-av .pic { display:grid; place-items:center; width:100%; height:100%; border-radius:50%; overflow:hidden; background:radial-gradient(circle at 40% 35%, #fff, #e4e0f4); box-shadow:0 0 0 max(2px, calc(var(--s) * .05)) #fff, 0 2px 6px #1a124640; }
  .sx-av .pic img { width:100%; height:100%; object-fit:cover; image-rendering:pixelated; } .sx-av.tr .pic img { object-fit:contain; transform:translateY(6%) scale(1.08); }
  .sx-av.framed .pic { width:72%; height:72%; box-shadow:none; }
  .sx-av .fr { position:absolute; left:50%; top:50%; width:calc(var(--s) * 1.56); height:calc(var(--s) * 1.56); transform:translate(-50%, -50%); pointer-events:none; filter:drop-shadow(0 2px 3px #1a12464d); }
  .sx-emb, .sx-art { image-rendering:pixelated; flex:none; filter:drop-shadow(0 2px 2px #1a124640); }
  /* окна поверх */
  .sx-ov { position:fixed; inset:0; z-index:60; display:flex; align-items:safe center; justify-content:center; padding:16px; overflow-y:auto; background:radial-gradient(#1e14464d, #140e32cf); backdrop-filter:blur(3px); animation:fadeIn .2s; zoom:var(--uiz, 1); }
  .sx-card { width:min(520px, 100%); max-height:none; display:flex; flex-direction:column; gap:10px; padding:18px 22px; border-radius:22px; background:#fff; box-shadow:var(--shadow); color:var(--ink); animation:sxPop .25s ease-out; }
  .sx-card h2 { margin:0; font:900 22px var(--font-title); } .sx-card p { margin:0; }
  .sx-mhead { display:flex; align-items:center; gap:12px; } .sx-mhead h2 { margin:0; font:900 22px var(--font-title); }
  .sx-mbtns { display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap; margin-top:4px; }
  .sx-msec { color:var(--ink-2); font:900 12px var(--font-title); text-transform:uppercase; letter-spacing:1px; }
  .sx-field, .sx-search { width:100%; padding:10px 14px; border:0; border-radius:14px; background:var(--paper-2); color:var(--ink); font:800 15px var(--font); outline:none; box-shadow:inset 0 0 0 2px var(--line); user-select:text; }
  .sx-field:focus, .sx-search:focus { box-shadow:inset 0 0 0 2px var(--blue); background:#fff; } .sx-search { padding:8px 14px; font-size:14px; }
  .sx-ta { min-height:76px; resize:vertical; font-size:14px; } .sx-count { align-self:flex-end; margin-top:-6px; color:var(--ink-2); font-size:11px; font-weight:800; }
  .sx-err { min-height:0; color:var(--red-d); font-weight:900; font-size:13px; } .sx-err:empty { display:none; }
  .sx-sugg { display:flex; flex-wrap:wrap; gap:6px; } .sx-sugg .pill { background:var(--paper-2); } .sx-pal img { width:24px; } .sx-pal.on { box-shadow:inset 0 0 0 2px var(--green); }
  .sx-pals { display:flex; flex-direction:column; gap:4px; } .sx-pals small { color:var(--ink-2); font-weight:900; }
  .sx-ideas { display:flex; flex-wrap:wrap; gap:6px; } .sx-ideas .pill { background:var(--paper-2); text-align:left; white-space:normal; font-size:12px; }
  .sx-cost { display:inline-flex; align-items:center; gap:3px; padding:2px 9px 2px 4px; border-radius:99px; background:#ffffffd9; color:var(--ink); font:900 14px var(--font-title); } .sx-cost.no { color:var(--red-d); } .sx-cost img { width:18px; }
  .sx-dust { display:inline-flex; align-items:center; gap:6px; padding:5px 14px 5px 8px; border-radius:99px; background:#fff; font:900 16px var(--font-title); box-shadow:0 4px 0 #1a124638; }
  /* ---- меню: кнопки друзей/почты, пункт «Клан», боковая панель сезона ---- */
  .sx-topbar { z-index:3; display:flex; gap:10px; }
  .sx-tb { position:relative; width:44px; height:44px; display:grid; place-items:center; padding:0; border:0; border-radius:50%; background:#fff; box-shadow:0 4px 0 #1a124638, var(--shadow-sm); cursor:pointer; transition:transform .1s; }
  @media (hover:hover) { .sx-tb:hover { transform:translateY(-2px); } } .sx-tb:active { transform:translateY(2px); }
  .sx-season { z-index:1; width:clamp(340px, 26vw, 400px); max-height:min(640px, calc(100% - 150px)); display:flex; flex-direction:column; gap:9px; padding:14px; overflow:hidden; border-radius:22px; background:#fffffff5; box-shadow:var(--shadow); color:var(--ink); animation:sxPop .45s cubic-bezier(.2, 1.3, .4, 1) .2s backwards; }
  .sx-sp-head { display:flex; align-items:center; gap:10px; margin:-14px -14px 0; padding:12px 16px; color:#fff; background:var(--stripes), linear-gradient(100deg, var(--yellow-d), #e0902a); }
  .sx-sp-head > div { display:flex; flex-direction:column; } .sx-sp-head b { font:900 22px/1.05 var(--font-title); text-shadow:0 2px #0000002e; } .sx-sp-head span { font:900 12px var(--font-title); opacity:.95; }
  .sx-sp-dust { margin-left:auto; padding:2px 10px; border-radius:99px; background:#ffffff40; font:900 12px var(--font-title); }
  .sx-sp-tabs { display:flex; } .sx-sp-tabs .pill { flex:1; justify-content:center; padding:6px 8px; } .sx-sp-tabs img { width:18px; image-rendering:pixelated; }
  .sx-sp-ladder { display:flex; } .sx-sp-ladder .pill { flex:1; justify-content:center; }
  .sx-scope { position:relative; } .sx-scope-btn { width:100%; display:flex; align-items:center; gap:10px; padding:6px 12px 6px 8px; border:0; border-radius:14px; background:var(--paper-2); color:var(--ink); text-align:left; cursor:pointer; }
  .sx-scope-btn > span, .sx-scope-menu button > span { flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.1; }
  .sx-scope-btn b, .sx-scope-menu b { font:900 15px var(--font-title); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .sx-scope-btn small, .sx-scope-menu small { color:var(--ink-2); font-size:11px; font-weight:800; }
  .sx-caret { width:10px; height:10px; border-right:3px solid var(--ink-2); border-bottom:3px solid var(--ink-2); rotate:45deg; translate:0 -3px; transition:rotate .15s; } .sx-scope.open .sx-caret { rotate:225deg; translate:0 2px; }
  .sx-scope-menu { position:absolute; z-index:3; left:0; right:0; top:calc(100% + 4px); max-height:330px; overflow:auto; display:flex; flex-direction:column; gap:2px; padding:6px; border-radius:16px; background:#fff; box-shadow:var(--shadow); }
  .sx-scope-menu button { display:flex; align-items:center; gap:10px; padding:5px 8px; border:0; border-radius:10px; background:none; text-align:left; cursor:pointer; } .sx-scope-menu button.on, .sx-scope-menu button:hover { background:var(--paper-2); }
  .sx-scope-h { padding:6px 8px 0; color:var(--ink-2); font:900 11px var(--font-title); text-transform:uppercase; letter-spacing:1px; }
  .sx-sp-body { flex:1 1 auto; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:6px; margin:0 -4px; padding:2px 4px; }
  .sx-sp-empty { display:flex; flex-direction:column; align-items:center; gap:4px; padding:18px 10px; text-align:center; color:var(--ink-2); } .sx-sp-empty b { color:var(--ink); font:900 15px var(--font-title); } .sx-sp-empty img { image-rendering:pixelated; }
  .sx-pod { --mc:#d8dce8; width:100%; min-width:0; display:flex; align-items:center; gap:10px; padding:8px 10px; border:0; border-radius:16px; background:color-mix(in srgb, var(--mc) 18%, #fff); box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--mc) 60%, #fff); color:var(--ink); text-align:left; cursor:pointer; transition:background .12s, box-shadow .12s; }
  @media (hover:hover) { .sx-pod:hover { background:color-mix(in srgb, var(--mc) 30%, #fff); box-shadow:inset 0 0 0 3px var(--mc); } }
  .sx-pod.p1 { --mc:#f2b81a; padding:10px 12px; } .sx-pod.p2 { --mc:#9aa4c8; } .sx-pod.p3 { --mc:#d88a4a; } .sx-pod.me { box-shadow:inset 0 0 0 3px var(--blue); }
  .sx-pod-av { position:relative; flex:none; display:grid; place-items:center; } .sx-pod-av > .sx-rank { position:absolute; right:-6px; bottom:-6px; }
  .sx-pod-who { flex:1; min-width:0; display:flex; flex-direction:column; } .sx-pod-who b { font:900 16px var(--font-title); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .sx-pod.p1 .sx-pod-who b { font-size:19px; }
  .sx-pod-who small { color:var(--ink-2); font-size:11px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .sx-pod-who .sx-tag { font-size:10px; margin-right:5px; }
  .sx-pod-val { display:flex; flex-direction:column; align-items:flex-end; } .sx-pod-val b { font:900 18px var(--font-title); } .sx-pod.p1 .sx-pod-val b { font-size:22px; } .sx-pod-val small { color:var(--ink-2); font-size:10px; font-weight:800; }
  .sx-duo { display:grid; grid-template-columns:1fr; gap:6px; }
  .sx-list { display:flex; flex-direction:column; }
  .sx-row { width:100%; display:grid; grid-template-columns:28px 30px minmax(0, 1fr) auto auto; align-items:center; gap:6px; padding:3px 8px; border:0; border-radius:12px; background:none; color:var(--ink); text-align:left; font-size:13px; font-weight:800; cursor:pointer; }
  .sx-row:nth-child(odd) { background:var(--paper-2); } .sx-row.me { box-shadow:inset 0 0 0 2px var(--blue); background:#e8f0ff; } @media (hover:hover) { .sx-row:hover { box-shadow:inset 0 0 0 2px var(--blue); } }
  .sx-row b { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .sx-row .sx-tag { font-size:10px; margin-right:4px; } .sx-row em { font-style:normal; font:900 14px var(--font-title); }
  .sx-mini { display:grid; place-items:center; }
  .sx-rk { display:inline-grid; place-items:center; min-width:26px; height:24px; padding:0 4px; border-radius:8px; background:var(--ink); color:#fff; font:900 12px var(--font-title); }
  .sx-cut { padding:3px 10px; border-radius:10px; background:var(--paper-2); color:var(--ink-2); font-size:11.5px; font-weight:900; text-align:center; }
  .sx-sp-me { flex:none; display:flex; flex-direction:column; gap:4px; padding:8px 12px; border-radius:16px; background:linear-gradient(100deg, #fff6d0, #fff); box-shadow:inset 0 0 0 2px #f2c04a; }
  .sx-sp-me > small { color:#b07a10; font:900 11px var(--font-title); text-transform:uppercase; letter-spacing:1px; } .sx-sp-me > b { font:900 15px var(--font-title); }
  .sx-sp-me-row { display:flex; align-items:center; gap:8px; } .sx-sp-me-row b { font:900 16px var(--font-title); } .sx-hint { color:var(--ink-2); font-size:12px; font-weight:800; } .sx-sp-me .btn { align-self:flex-start; }
  .sx-sp-prizes { flex:none; display:flex; flex-direction:column; gap:3px; } .sx-sp-prizes > small { color:var(--ink-2); font-size:11px; font-weight:800; text-align:center; }
  .sx-sp-prizes > div { display:flex; justify-content:space-around; gap:4px; } .sx-sp-prizes > div > span { display:flex; flex-direction:column; align-items:center; } .sx-sp-prizes > div small { color:var(--ink-2); font:900 10px var(--font-title); }
  .sx-sp-all { flex:none; }
  /* ---- полный экран таблицы ---- */
  .sx-bwrap { flex:1; min-height:0; display:grid; grid-template-columns:300px minmax(0, 1fr); gap:16px; padding:0 24px 16px; }
  .sx-bside { min-height:0; overflow-y:auto; overflow-x:hidden; display:flex; flex-direction:column; gap:10px; padding:2px 8px 8px 2px; }   /* справа запас под сдвиг вкладки при наведении — иначе появлялась нижняя полоса прокрутки */
  .sx-bmain { min-height:0; display:flex; flex-direction:column; gap:10px; }
  .sx-kind { display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:5px; border-radius:18px; background:#fffffff0; box-shadow:var(--shadow-sm); }
  .sx-kind-t { display:flex; flex-direction:column; align-items:center; gap:2px; padding:7px 4px; border:0; border-radius:14px; background:none; color:var(--ink); cursor:pointer; text-align:center; }
  .sx-kind-t > span { display:flex; flex-direction:column; } .sx-kind-t b { font:900 15px var(--font-title); } .sx-kind-t small { color:var(--ink-2); font-size:10.5px; font-weight:800; } .sx-kind-t img { image-rendering:pixelated; }
  .sx-kind-t.on { color:#fff; background:var(--stripes), linear-gradient(135deg, #ff8084, var(--red)); box-shadow:0 3px 0 #a81c2c; } .sx-kind-t.on small { color:#fff; }
  .sx-modes { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
  .sx-mode-t { position:relative; display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 6px; border:0; border-radius:14px; background:#fffffff0; color:var(--ink); box-shadow:var(--shadow-sm); text-align:center; cursor:pointer; }
  .sx-mode-t > span:not(.sx-mode-ic) { display:flex; flex-direction:column; } .sx-mode-t b { font:900 14px var(--font-title); } .sx-mode-t small { color:var(--ink-2); font-size:10.5px; font-weight:800; }
  .sx-mode-ic { width:40px; height:40px; display:grid; place-items:center; border-radius:50%; background:var(--paper-2); } .sx-mode-ic img { image-rendering:pixelated; max-width:34px; max-height:34px; }
  .sx-mode-t.on { box-shadow:0 0 0 3px var(--blue), var(--shadow-sm); background:linear-gradient(160deg, #e8f0ff, #fff); }
  .sx-soon { position:absolute; top:4px; right:4px; padding:0 6px; border-radius:99px; background:var(--purple); color:#fff; font:900 9px/16px var(--font-title); font-style:normal; }
  .sx-picks { display:flex; flex-direction:column; gap:6px; }
  .sx-pick { display:flex; align-items:center; gap:10px; padding:6px 10px 6px 6px; border:0; border-radius:16px; color:#fff; text-align:left; cursor:pointer; background:var(--stripes), linear-gradient(100deg, var(--sky), color-mix(in srgb, var(--gr) 70%, #000)); box-shadow:var(--shadow-sm); text-shadow:0 1px 2px #0007; transition:transform .1s; }
  @media (hover:hover) { .sx-pick:hover { transform:translateX(4px); } } .sx-pick.on { box-shadow:0 0 0 3px #fff, 0 0 0 6px var(--red), var(--shadow-sm); }
  .sx-pick > span:not(.sx-pick-ic) { display:flex; flex-direction:column; min-width:0; } .sx-pick b { font:900 16px var(--font-title); } .sx-pick small { font-size:11px; font-weight:800; opacity:.95; }
  .sx-pick-ic { width:42px; height:42px; flex:none; display:grid; place-items:center; border-radius:12px; background:#ffffff40; overflow:hidden; } .sx-pick-ic img { width:40px; height:40px; image-rendering:pixelated; object-fit:cover; }
  .sx-opt { display:flex; flex-direction:column; gap:4px; } .sx-opt > small { padding-left:8px; color:#fff; font:900 12px var(--font-title); text-transform:uppercase; letter-spacing:1px; text-shadow:0 1px 3px #0008; }
  .sx-opt .seg { display:flex; background:#fffffff0; } .sx-opt .seg .pill { flex:1; justify-content:center; }
  .sx-prizes { display:flex; flex-direction:column; gap:6px; padding:12px; } .sx-prizes.off { opacity:.7; }
  .sx-ph { display:flex; flex-direction:column; gap:2px; } .sx-ph b { font:900 16px var(--font-title); display:flex; align-items:center; gap:6px; } .sx-ph small { color:var(--ink-2); font-size:11.5px; font-weight:800; }
  .sx-x { padding:0 8px; border-radius:99px; background:var(--purple); color:#fff; font-size:11px; }
  .sx-prize { display:grid; grid-template-columns:36px minmax(0, 1fr) auto; align-items:center; gap:8px; padding:3px 6px; border-radius:12px; background:var(--paper-2); }
  .sx-prize > span { display:flex; flex-direction:column; line-height:1.1; } .sx-prize b { font:900 14px var(--font-title); } .sx-prize small { color:var(--ink-2); font-size:11px; font-weight:800; }
  .sx-prize em { display:inline-flex; align-items:center; gap:3px; font:900 14px var(--font-title); font-style:normal; color:var(--purple-d); } .sx-prize em img { width:16px; }
  .sx-pnote { margin:2px 0 0; color:var(--ink-2); font-size:11.5px; font-weight:700; }
  .sx-searchbox { display:flex; flex-direction:column; gap:6px; } .sx-searchbox .sx-search { background:#fffffff0; box-shadow:var(--shadow-sm); } .sx-found { display:flex; flex-wrap:wrap; gap:6px; } .sx-found .pill { background:#fff; }
  .sx-monbox { padding:10px; border-radius:18px; background:#fffffff0; box-shadow:var(--shadow-sm); } .sx-monbox > small { color:var(--ink-2); text-shadow:none; padding-left:2px; } .sx-sort { display:flex; } .sx-sort .pill { flex:1; justify-content:center; padding:6px 6px; font-size:12px; }
  .sx-mons { display:grid; grid-template-columns:repeat(auto-fill, minmax(52px, 1fr)); gap:6px; max-height:420px; overflow-y:auto; padding:2px; }
  .sx-mon-t { position:relative; aspect-ratio:1; display:grid; place-items:center; padding:0; border:0; border-radius:12px; cursor:pointer; background:linear-gradient(160deg, color-mix(in srgb, var(--sky) 45%, #fff), color-mix(in srgb, var(--gr) 55%, #fff)); }
  .sx-mon-t img { width:84%; height:84%; border-radius:10px; image-rendering:pixelated; object-fit:cover; } .sx-mon-t.off img { filter:grayscale(.8) brightness(.9); opacity:.6; }
  .sx-mon-t.on { box-shadow:0 0 0 3px var(--red); } .sx-mon-t.crown { box-shadow:0 0 0 2px var(--yellow-d); }
  .sx-mon-rk, .sx-mon-n { position:absolute; bottom:-3px; right:-3px; padding:0 5px; border-radius:99px; font:900 10px/16px var(--font-title); font-style:normal; color:#fff; background:var(--blue); } .sx-mon-n { background:var(--ink-2); }
  .sx-hero { flex:none; position:relative; display:flex; align-items:center; gap:16px; padding:14px 22px; overflow:hidden; border-radius:22px; color:#fff; background:var(--stripes), linear-gradient(110deg, color-mix(in srgb, var(--sky) 85%, #000), color-mix(in srgb, var(--gr) 80%, #000)); box-shadow:var(--shadow); text-shadow:0 2px 4px #0007; }
  .sx-hero-tx { flex:1; min-width:0; } .sx-hero small { font:900 11px var(--font-title); text-transform:uppercase; letter-spacing:1.4px; opacity:.9; } .sx-hero h2 { margin:0; font:900 30px/1.1 var(--font-title); } .sx-hero p { margin:4px 0 0; max-width:640px; font-size:13px; font-weight:800; opacity:.95; }
  .sx-hero-mon { flex:none; width:76px; height:76px; display:grid; place-items:center; border-radius:22px; background:#ffffff38; box-shadow:inset 0 0 0 3px #ffffff73; } .sx-hero-mon img { width:68px; height:68px; }
  .sx-chips { flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
  .sx-chip { display:inline-flex; align-items:center; gap:6px; padding:3px 12px; border-radius:99px; background:#ffffffe6; color:var(--ink); font:900 12px var(--font-title); text-shadow:none; white-space:nowrap; }
  .sx-chip.live i { width:8px; height:8px; border-radius:50%; background:var(--red); box-shadow:0 0 0 3px #ff5a5f40; animation:pulse .8s infinite alternate; }
  .sx-bscroll { flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:12px; padding:2px 2px 6px; }
  .sx-podium { flex:none; display:flex; justify-content:center; align-items:flex-end; gap:14px; padding-top:24px; }
  .sx-p { --mc:#9aa4c8; width:210px; display:flex; flex-direction:column; align-items:center; gap:2px; padding:0; border:0; background:none; color:#fff; text-align:center; text-shadow:0 2px 4px #0009; cursor:pointer; animation:sxPod .55s var(--d, 0s) cubic-bezier(.2, 1.3, .4, 1) backwards; transition:transform .14s; }
  @media (hover:hover) { .sx-p:hover { transform:translateY(-4px); } } .sx-p.p1 { --mc:#f2b81a; } .sx-p.p3 { --mc:#d88a4a; }
  .sx-p-av { position:relative; display:grid; place-items:center; margin-bottom:6px; } .sx-p-medal { position:absolute; right:-10px; bottom:-8px; }
  .sx-p b { text-shadow:0 2px 4px #000c, 0 0 2px #000; font:900 18px var(--font-title); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .sx-p.p1 b { font-size:22px; } .sx-p > small { font-size:12px; font-weight:800; opacity:.95; } .sx-p-title { text-shadow:none; color:#ffe08a; }
  .sx-p-score { display:flex; align-items:baseline; gap:5px; margin:2px 0 4px; } .sx-p-score b { font-size:24px; color:#ffe066; } .sx-p.p1 .sx-p-score b { font-size:30px; } .sx-p-score small { font-weight:800; font-size:12px; }
  .sx-p-base { width:100%; display:grid; place-items:center; border-radius:16px 16px 6px 6px; color:#ffffffe6; font:900 46px var(--font-title); background:var(--stripes), linear-gradient(180deg, color-mix(in srgb, var(--mc) 70%, #fff), var(--mc)); box-shadow:inset 0 -6px 0 #00000026, var(--shadow); }
  .sx-p.p1 .sx-p-base { height:110px; } .sx-p.p2 .sx-p-base { height:76px; } .sx-p.p3 .sx-p-base { height:56px; } .sx-p.me .sx-p-base { box-shadow:0 0 0 4px var(--blue), inset 0 -6px 0 #00000026; }
  .sx-blist { display:flex; flex-direction:column; gap:2px; padding:8px; }
  .sx-brow { display:grid; grid-template-columns:44px minmax(150px, 1.2fr) minmax(130px, 1.6fr) 74px 58px 120px; align-items:center; gap:10px; padding:5px 12px; border:0; border-radius:14px; background:none; color:var(--ink); text-align:left; font-size:14px; font-weight:800; cursor:pointer; animation:sxIn .3s var(--d, 0s) backwards; transition:background .12s; }
  .sx-brow.hd { cursor:default; animation:none; padding-top:2px; padding-bottom:2px; color:var(--ink-2); font:900 11px var(--font-title); text-transform:uppercase; letter-spacing:1px; }
  @media (hover:hover) { .sx-brow:not(.hd):hover { background:#ece8fb; } } .sx-brow.prize:not(.me) { background:color-mix(in srgb, var(--yellow) 9%, #fff); } .sx-brow.me { background:#e8f0ff; box-shadow:inset 0 0 0 2px var(--blue); }
  .sx-bwho { display:flex; align-items:center; gap:10px; min-width:0; } .sx-bwho > span { display:flex; flex-direction:column; min-width:0; } .sx-bwho b { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .sx-bmon { display:flex; align-items:center; gap:6px; } .sx-gap { color:var(--ink-2); font-size:12.5px; text-align:right; } .sx-bbadge { display:grid; place-items:center; }
  .sx-bval { display:flex; align-items:baseline; justify-content:flex-end; gap:5px; } .sx-bval b { font:900 18px var(--font-title); } .sx-bval small { color:var(--ink-2); font-size:11px; }
  .sx-parts { display:flex; flex-wrap:wrap; gap:4px; } .sx-parts i { display:inline-flex; align-items:center; gap:4px; padding:1px 8px 1px 2px; border-radius:99px; background:var(--paper-2); font:900 11px var(--font-title); font-style:normal; }
  .sx-parts i span { padding:1px 6px; border-radius:99px; color:#fff; font-size:9px; text-transform:uppercase; background:linear-gradient(90deg, var(--sky), color-mix(in srgb, var(--gr) 70%, #000)); text-shadow:0 1px 1px #0006; }
  .sx-splits { display:flex; flex-wrap:wrap; gap:4px; } .sx-splits i { padding:0 7px; border-radius:99px; background:var(--paper-2); font:900 11px var(--font-title); font-style:normal; }
  .sx-btier { display:flex; align-items:center; gap:8px; margin-top:6px; padding:4px 12px; border-radius:12px; background:linear-gradient(90deg, #fff3c4, #fff0); } .sx-btier b { font:900 14px var(--font-title); } .sx-btier span { color:var(--ink-2); font-size:12px; font-weight:800; }
  .sx-btier em { margin-left:auto; display:inline-flex; align-items:center; gap:3px; color:var(--purple-d); font:900 13px var(--font-title); font-style:normal; } .sx-btier em img { width:14px; } .sx-btier.out { background:var(--paper-2); }
  .sx-bme { flex:none; display:flex; align-items:center; gap:14px; padding:10px 16px; border-radius:20px; background:linear-gradient(100deg, #fff6d0, #fff 60%); box-shadow:0 0 0 3px #f2c04a, var(--shadow); color:var(--ink); }
  .sx-bme-av { display:flex; flex-direction:column; align-items:center; gap:2px; padding:0; border:0; background:none; cursor:pointer; } .sx-bme-av > span:last-child { color:var(--blue-d); font:900 11px var(--font-title); text-transform:uppercase; }
  .sx-bme-tx { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; } .sx-bme-tx > small { color:#b07a10; font:900 11px var(--font-title); text-transform:uppercase; letter-spacing:1px; } .sx-bme-tx > b { font:900 17px var(--font-title); }
  .sx-bme-row { display:flex; align-items:center; flex-wrap:wrap; gap:8px; } .sx-bme-row > b { display:inline-flex; align-items:baseline; gap:4px; font:900 20px var(--font-title); } .sx-bme-row > b small { font-size:12px; color:var(--ink-2); }
  .sx-bme-prize { display:inline-flex; align-items:center; gap:4px; padding:1px 10px 1px 3px; border-radius:99px; background:#fff; box-shadow:inset 0 0 0 2px #f2c04a; font:900 12px var(--font-title); }
  .sx-next { color:var(--ink-2); font-size:12.5px; font-weight:800; } .sx-next b { color:var(--ink); }
  .sx-mpbox { display:flex; flex-direction:column; gap:8px; padding:12px 16px; } .sx-mp-h { display:flex; flex-direction:column; } .sx-mp-h b { font:900 16px var(--font-title); } .sx-mp-h small { color:var(--ink-2); font-size:12px; font-weight:800; }
  .sx-mp-row { display:flex; flex-wrap:wrap; gap:6px 18px; } .sx-mp-row > span { display:flex; align-items:center; gap:8px; }
  /* рамка шире аватара в 1.56 раза (свисает на 0.28 размера с каждой стороны): в строках наград и таблицы оставляем под неё место, иначе она лезет на текст */
  .sx-mp-row .sx-av.framed { margin:calc(var(--s) * .26); } .sx-bwho .sx-av { margin-inline:calc(var(--s) * .14); } .sx-bwho .sx-av.framed { margin-block:calc(var(--s) * .12); } .sx-mp-row > span > span:not(.sx-av) { display:flex; flex-direction:column; } .sx-mp-row b { font:900 14px var(--font-title); } .sx-mp-row small { color:var(--ink-2); font-size:11px; font-weight:800; }
  .sx-few { color:var(--red-d); font-weight:900; font-size:12px; } .sx-mpbox.few { opacity:.85; }
  /* ---- карточка тренера ---- */
  .sx-pacts { display:flex; flex-wrap:wrap; gap:8px; }
  .sx-pbody { flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:12px; padding:0 24px 18px; }
  .sx-phero { flex:none; display:flex; flex-wrap:wrap; align-items:center; gap:18px; padding:16px 20px; background:linear-gradient(120deg, #fff 55%, color-mix(in srgb, var(--c) 30%, #fff)); animation:sxPop .35s backwards; }
  .sx-pav { position:relative; display:flex; flex-direction:column; align-items:center; gap:8px; padding:6px; }
  .sx-pid { flex:1; min-width:220px; display:flex; flex-direction:column; gap:3px; } .sx-pid h2 { margin:0; font:900 30px/1.1 var(--font-title); } .sx-ptitle { font-size:13px; } .sx-on { color:var(--green-d); font-style:normal; font-weight:900; }
  .sx-pchips { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; } .sx-pchips .chip { font-size:11.5px; padding:3px 10px; }
  .sx-pclan { display:flex; align-items:center; gap:10px; padding:8px 14px 8px 8px; border:0; border-radius:18px; background:#fffffff2; box-shadow:var(--shadow-sm); text-align:left; cursor:pointer; color:var(--ink); }
  .sx-pclan > span { display:flex; flex-direction:column; } .sx-pclan small { color:var(--ink-2); font:900 10px var(--font-title); text-transform:uppercase; letter-spacing:1px; } .sx-pclan b { font:900 17px var(--font-title); } .sx-pclan em { display:flex; align-items:center; gap:4px; color:var(--ink-2); font-size:12px; font-style:normal; font-weight:900; }
  .sx-ptsum { display:grid; grid-template-columns:repeat(3, auto); gap:4px 10px; } .sx-ptsum span { display:flex; align-items:center; gap:3px; } .sx-ptsum b { font:900 14px var(--font-title); } .sx-ptsum .off { opacity:.35; filter:grayscale(1); }
  .sx-pstats { display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:8px; }
  .sx-pstat { display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:10px; align-items:center; padding:10px 12px; border-radius:16px; background:#fffffff2; box-shadow:var(--shadow-sm); }
  .sx-psic { grid-row:span 2; width:40px; height:40px; display:grid; place-items:center; border-radius:12px; background:var(--paper-2); } .sx-psic img { image-rendering:pixelated; }
  .sx-pstat b { font:900 20px/1.1 var(--font-title); white-space:nowrap; } .sx-pstat small { color:var(--ink-2); font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:.5px; }
  .sx-pcols { display:grid; grid-template-columns:minmax(0, 1.2fr) minmax(0, 1fr); gap:12px; align-items:start; } .sx-pbox { display:flex; flex-direction:column; gap:10px; padding:12px 14px; }
  .sx-pmaps { display:flex; flex-direction:column; gap:6px; }
  .sx-pmap { display:grid; grid-template-columns:minmax(120px, 1fr) auto auto; align-items:center; gap:12px; padding:6px 10px 6px 12px; border-radius:14px; background:linear-gradient(100deg, color-mix(in srgb, var(--sky) 22%, #fff), #fff 70%); box-shadow:inset 4px 0 0 var(--gr); }
  .sx-pmname { display:flex; flex-direction:column; } .sx-pmname b { font:900 14px var(--font-title); } .sx-pmname small { color:var(--ink-2); font-size:11px; font-weight:800; }
  .sx-pmk, .sx-pmt { display:flex; align-items:center; gap:4px; font:900 15px var(--font-title); } .sx-pmk small { color:var(--ink-2); font-size:11px; }
  .sx-build { padding:2px 10px; border:0; border-radius:99px; background:var(--blue); color:#fff; font:900 11px var(--font-title); cursor:pointer; box-shadow:0 2px 0 var(--blue-d); }
  .sx-tros { display:grid; grid-template-columns:repeat(auto-fill, minmax(86px, 1fr)); gap:8px; }
  .sx-tro { display:flex; flex-direction:column; align-items:center; gap:1px; padding:8px 4px; border-radius:14px; background:var(--paper-2); text-align:center; } .sx-tro b { font:900 15px var(--font-title); } .sx-tro small { color:var(--ink-2); font-size:10px; font-weight:900; } .sx-tro span { font-size:10.5px; font-weight:800; line-height:1.15; }
  .sx-tro.m6 { background:linear-gradient(160deg, #e8f0ff, #f6e8ff); box-shadow:inset 0 0 0 2px #a8b8ff; } .sx-tro.m5 { background:linear-gradient(160deg, #ffe8ee, #fff4f6); box-shadow:inset 0 0 0 2px #ffb0c0; } .sx-tro.m4 { background:linear-gradient(160deg, #fff4d0, #fffaf0); box-shadow:inset 0 0 0 2px #f2c04a; }
  .sx-ptitles { display:flex; flex-wrap:wrap; gap:6px; } .sx-ptl { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:99px; background:#fff3c4; color:#8a5a00; font:900 12px var(--font-title); } .sx-ptl.on { box-shadow:inset 0 0 0 2px var(--yellow-d); } .sx-ptl.top { background:var(--paper-2); color:var(--ink); }
  .sx-pmons { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:8px; }
  .sx-pmon { display:flex; align-items:center; gap:10px; padding:6px 12px 6px 6px; border:0; border-radius:16px; color:var(--ink); text-align:left; cursor:pointer; background:linear-gradient(110deg, color-mix(in srgb, var(--sky) 25%, #fff), #fff 70%); box-shadow:var(--shadow-sm); }
  .sx-pmon.crown { box-shadow:0 0 0 2px var(--yellow-d), var(--shadow-sm); } .sx-pmon-pic { width:44px; height:44px; display:grid; place-items:center; border-radius:12px; background:#ffffffb0; } .sx-pmon-pic img { width:42px; }
  .sx-pmon > span:not(.sx-pmon-pic) { flex:1; display:flex; flex-direction:column; } .sx-pmon b { font:900 14px var(--font-title); } .sx-pmon small { color:var(--ink-2); font-size:11px; font-weight:800; }
  .sx-pmon em { display:flex; flex-direction:column; align-items:flex-end; font:900 18px var(--font-title); font-style:normal; color:var(--blue-d); } .sx-pmon em small { font-size:10px; }
  .sx-recent { display:flex; flex-direction:column; gap:4px; }
  .sx-run { display:grid; grid-template-columns:36px minmax(90px, 1fr) minmax(140px, 1.3fr) 90px 60px 110px auto auto; align-items:center; gap:8px; padding:4px 10px; border-radius:12px; background:var(--paper-2); font-size:13px; font-weight:800; }
  .sx-run.win { background:linear-gradient(90deg, #dff8e6, var(--paper-2)); } .sx-run b { font-family:var(--font-title); }
  /* ---- сборка забега ---- */
  .sx-rd { width:min(600px, 100%); padding:0 0 16px; overflow:hidden; gap:12px; }
  .sx-rd > :not(.sx-rd-hero) { margin:0 20px; }
  .sx-rd-hero { display:flex; align-items:center; gap:14px; padding:16px 20px; color:#fff; text-shadow:0 2px 3px #0007; background:var(--stripes), linear-gradient(110deg, color-mix(in srgb, var(--sky) 85%, #000), color-mix(in srgb, var(--gr) 80%, #000)); }
  .sx-rd-mons { display:flex; align-items:center; gap:4px; } .sx-rd-mons img { width:60px; height:60px; border-radius:16px; background:#ffffff40; filter:drop-shadow(0 2px #0005); } .sx-rd-tx { flex:1; min-width:0; } .sx-rd-tx small { font-weight:900; font-size:12px; opacity:.9; } .sx-rd-tx h2 { margin:0; font:900 26px var(--font-title); } .sx-rd-tx span { font-size:13px; font-weight:800; }
  .sx-rd-pts { display:flex; flex-direction:column; align-items:flex-end; } .sx-rd-pts b { font:900 26px var(--font-title); color:#ffe066; } .sx-rd-pts small { font-size:11px; font-weight:900; }
  @media (max-width:520px) { .sx-rd-hero { flex-wrap:wrap; row-gap:10px; } .sx-rd-tx { order:2; flex-basis:100%; } .sx-rd-pts { margin-left:auto; } }   /* телефон: покемоны и очки — строкой, текст и чип ⚡ — под ними во всю ширину */
  /* ⚡ день шторма (прогноз D4): значок 12×12 на жёлтой плашке (как чип «день шторма» карточки прогноза) у рекорда и партии; в сборке — чип с текстом */
  .sx-storm { flex:none; display:inline-flex; align-items:center; justify-content:center; width:20px; height:16px; margin:0 4px; border-radius:99px; background:var(--yellow); box-shadow:inset 0 0 0 2px var(--yellow-d); vertical-align:middle; align-self:center; }
  .sx-storm img { width:12px; height:12px; }
  .sx-rd-storm { display:flex; align-items:center; gap:4px; width:fit-content; max-width:100%; margin-top:6px; padding:2px 10px 2px 5px; border-radius:12px; background:var(--yellow); color:var(--ink); text-shadow:none; box-shadow:inset 0 0 0 2px var(--yellow-d); }
  .sx-rd-storm img { flex:none; width:12px; height:12px; } .sx-rd-storm b { font:900 12px var(--font-title); }
  .sx-rd-stats { display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; } .sx-rd-stat { display:flex; flex-direction:column; align-items:center; padding:6px; border-radius:12px; background:var(--paper-2); } .sx-rd-stat b { font:900 18px var(--font-title); } .sx-rd-stat small { color:var(--ink-2); font-size:10.5px; font-weight:900; text-transform:uppercase; }
  .sx-rd-sec { display:flex; flex-direction:column; gap:6px; } .sx-rd-sec > small { color:var(--ink-2); font:900 11px var(--font-title); text-transform:uppercase; letter-spacing:1px; }
  .sx-rd-zones, .sx-rd-moves, .sx-rd-items { display:flex; flex-wrap:wrap; gap:6px; }
  .sx-rd-zone { display:flex; flex-direction:column; align-items:center; min-width:76px; padding:4px 10px; border-radius:12px; background:var(--paper-2); } .sx-rd-zone b { font:900 15px var(--font-title); } .sx-rd-zone small, .sx-rd-zone em { color:var(--ink-2); font-size:10.5px; font-weight:900; font-style:normal; }
  .sx-rd-move { display:inline-flex; align-items:center; gap:6px; padding:3px 12px 3px 4px; border-radius:99px; background:var(--paper-2); font:900 13px var(--font-title); }
  .sx-rd-move.fz { background:color-mix(in srgb, var(--purple) 18%, var(--paper)); box-shadow:inset 0 0 0 2px var(--purple); } .sx-rd-move.fz small { color:var(--purple-d); font:900 11px var(--font-title); }   /* связка E3 — как в окне Мастерской */
  .sx-rd-item { position:relative; width:42px; height:42px; display:grid; place-items:center; border-radius:12px; background:var(--paper-2); } .sx-rd-item img { width:32px; } .sx-rd-item i { position:absolute; right:-4px; bottom:-4px; padding:0 5px; border-radius:99px; background:var(--ink); color:#fff; font:900 10px/15px var(--font-title); font-style:normal; }
  /* ---- облик ---- */
  .sx-lk { width:min(760px, 100%); } .sx-lk-head { display:flex; align-items:center; gap:18px; } .sx-lk-head small { color:var(--ink-2); font:900 11px var(--font-title); text-transform:uppercase; letter-spacing:1px; }
  .sx-lk-prev { display:flex; flex-direction:column; align-items:center; gap:10px; padding:12px; } .sx-lk-title { font-size:12px; }
  .sx-lk-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(92px, 1fr)); gap:8px; max-height:44vh; overflow-y:auto; padding:8px 4px; }
  .sx-lk-cell { position:relative; display:flex; flex-direction:column; align-items:center; gap:10px; padding:16px 4px 8px; border:0; border-radius:16px; background:var(--paper-2); cursor:pointer; color:var(--ink); }
  .sx-lk-cell small { font-size:11px; font-weight:900; text-align:center; line-height:1.15; } .sx-lk-cell.on { box-shadow:0 0 0 3px var(--green); background:#e8f8ee; } .sx-lk-cell.locked > :not(.sx-lock) { opacity:.45; filter:grayscale(.8); }
  .sx-lock { position:absolute; top:6px; right:6px; } .sx-lock img { image-rendering:pixelated; }
  .sx-lk-tcell { grid-column:1 / -1; display:flex; align-items:center; gap:10px; padding:6px 12px; border:0; border-radius:14px; background:var(--paper-2); cursor:pointer; text-align:left; color:var(--ink); } .sx-lk-tcell.on { box-shadow:0 0 0 3px var(--green); }
  .sx-lk-tcell span { display:flex; flex-direction:column; } .sx-lk-tcell small { color:var(--ink-2); font-size:11px; font-weight:800; }
  .sx-lk-note { grid-column:1 / -1; margin:4px 0 0; color:var(--ink-2); font-size:12px; font-weight:800; } .sx-lk-info { min-height:18px; margin:0; color:var(--ink-2); font-size:12.5px; font-weight:800; text-align:center; }
  /* ---- почта ---- */
  .sx-mlwrap { flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column; align-items:center; gap:10px; padding:0 20px 20px; }
  .sx-ml { width:min(780px, 100%); display:flex; align-items:center; gap:18px; padding:14px 20px; animation:sxIn .35s var(--d, 0s) backwards; } .sx-ml.new { box-shadow:0 0 0 3px var(--yellow), var(--shadow); } .sx-ml.done { opacity:.78; }
  .sx-ml > img, .sx-ml-pic img { image-rendering:pixelated; flex:none; } .sx-ml-tx { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; } .sx-ml-tx small { color:var(--ink-2); font-size:11.5px; font-weight:900; }
  .sx-ml-tx h3 { margin:0; font:900 20px var(--font-title); } .sx-ml-tx p { margin:0; font-size:13px; font-weight:700; color:var(--ink-2); } .sx-ml-text { color:var(--ink) !important; white-space:pre-wrap; }
  .sx-ml-av { position:relative; flex:none; display:grid; place-items:center; } .sx-ml-avic { position:absolute; right:-6px; bottom:-6px; width:36px; height:36px; display:grid; place-items:center; border-radius:50%; background:#fff; box-shadow:var(--shadow-sm); }
  .sx-ml-btns { display:flex; flex-direction:column; align-items:stretch; gap:6px; } .sx-ml-st { flex:none; } .sx-ml-st.accepted, .sx-ml-st.claimed { background:var(--green); } .sx-ml-st.declined { background:var(--red); } .sx-ml-st.expired { background:var(--ink-2); }
  .sx-ml-items { display:flex; flex-wrap:wrap; gap:6px; margin:2px 0; } .sx-ml-it { display:inline-flex; align-items:center; gap:5px; padding:2px 10px 2px 3px; border-radius:99px; background:var(--paper-2); font:900 12px var(--font-title); } .sx-ml-it em { color:var(--purple-d); font-style:normal; }
  .sx-ml-note { margin:4px 0 0; color:#fff; font-size:12px; font-weight:800; text-align:center; text-shadow:0 1px 3px #000a; }
  .sx-mailcard { display:flex; align-items:center; gap:14px; padding:14px 18px; border:0; text-align:left; cursor:pointer; position:relative; } .sx-mailcard > span:not(.sx-badge) { display:flex; flex-direction:column; } .sx-mailcard b { font:900 20px var(--font-title); } .sx-mailcard small { color:var(--ink-2); font-weight:800; }
  /* ---- друзья ---- */
  .sx-frwrap { flex:1; min-height:0; overflow-y:auto; display:grid; grid-template-columns:minmax(0, 1.3fr) minmax(300px, 1fr); gap:14px; align-items:start; padding:0 24px 18px; }
  .sx-frside { display:flex; flex-direction:column; gap:12px; }
  .sx-frlist { display:flex; flex-direction:column; gap:4px; }
  .sx-fr { display:grid; grid-template-columns:minmax(0, 1fr) auto auto; align-items:center; gap:8px; padding:4px 8px; border-radius:16px; background:var(--paper-2); animation:sxIn .3s var(--d, 0s) backwards; } .sx-fr.on { background:linear-gradient(90deg, #e2f8e8, var(--paper-2)); }
  .sx-fr-who { display:flex; align-items:center; gap:10px; min-width:0; padding:2px; border:0; background:none; color:var(--ink); text-align:left; cursor:pointer; } .sx-fr-who > span:last-child { display:flex; flex-direction:column; min-width:0; }
  .sx-fr-who b { font:900 15px var(--font-title); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .sx-fr-who small { color:var(--ink-2); font-size:11.5px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .sx-fr-who em { font-style:normal; } .sx-fr.on .sx-fr-who em { color:var(--green-d); }
  .sx-fr-av { position:relative; } .sx-fr-dot { position:absolute; right:-1px; bottom:-1px; width:13px; height:13px; border-radius:50%; background:#b8b4c8; box-shadow:0 0 0 2px #fff; } .sx-fr.on .sx-fr-dot { background:var(--green); }
  .sx-frtools { display:flex; gap:4px; } .sx-frtools .pill, .sx-frclan { background:#fff; font-size:12px; padding:5px 10px; } .sx-kick { color:var(--red-d) !important; } .sx-frinv { color:var(--blue-d) !important; }
  .sx-frempty { display:flex; flex-direction:column; align-items:center; gap:6px; padding:20px; text-align:center; } .sx-frempty h3 { margin:0; font:900 18px var(--font-title); } .sx-frempty p { margin:0; color:var(--ink-2); font-size:13px; max-width:420px; } .sx-frempty img { image-rendering:pixelated; }
  .sx-frq { display:flex; align-items:center; gap:8px; padding:4px 8px; border-radius:14px; background:var(--paper-2); } .sx-frq .sx-fr-who { flex:1; } .sx-frq-btns { display:flex; gap:6px; } .sx-frq .pill { background:#fff; }
  .sx-addrow { display:flex; gap:8px; } .sx-addrow .sx-field { flex:1; min-width:0; } .sx-addrow .btn { flex:none; }
  /* ---- кланы: хаб ---- */
  .sx-clhub, .sx-clpage { flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:12px; padding:0 24px 18px; }
  .sx-cols { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:14px; align-items:start; } .sx-col { display:flex; flex-direction:column; gap:12px; min-width:0; }
  .sx-clpage .sx-cols { grid-template-columns:minmax(0, 1.6fr) minmax(300px, 1fr); }
  .sx-clfound { position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:8px; padding:20px 22px; overflow:hidden; background:linear-gradient(130deg, #fff 50%, #e8f0ff); }
  .sx-clfound h2 { position:relative; z-index:1; max-width:calc(100% - 170px); margin:0; font:900 28px/1.1 var(--font-title); } .sx-clfound p { position:relative; z-index:1; margin:0; max-width:calc(100% - 170px); color:var(--ink-2); font-weight:800; font-size:13.5px; }
  .sx-clart { position:absolute; right:8px; top:10px; width:170px; height:140px; transform:scale(.85); transform-origin:top right; } .sx-clart .sx-emb { position:absolute; } .sx-clart .sx-emb:first-child { right:30px; top:10px; z-index:1; animation:sxFloat 3.4s ease-in-out infinite; } .sx-clart .f2 { left:0; top:0; rotate:-12deg; } .sx-clart .f3 { right:-8px; top:60px; rotate:10deg; }
  .sx-clfound .btn { margin-top:6px; }
  .sx-clhow ul { margin:0; padding-left:20px; display:flex; flex-direction:column; gap:5px; font-size:13px; font-weight:700; color:var(--ink-2); } .sx-clhow b { color:var(--ink); }
  .sx-cflist { display:flex; flex-direction:column; gap:6px; max-height:440px; overflow-y:auto; }
  .sx-cfrow { display:flex; align-items:center; gap:12px; padding:6px 10px; border-radius:16px; background:var(--paper-2); cursor:pointer; } @media (hover:hover) { .sx-cfrow:hover { box-shadow:inset 0 0 0 2px var(--blue); } }
  .sx-cfrow-tx { flex:1; min-width:0; display:flex; flex-direction:column; } .sx-cfrow-tx small { color:var(--ink-2); font-size:11.5px; font-weight:800; } .sx-cfrow-tx em { color:var(--ink-2); font-size:12px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .sx-ctitle { display:inline-flex; align-items:center; min-width:0; } .sx-ctitle b { font:900 15px var(--font-title); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .sx-acc { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:99px; background:#ffffffd9; color:var(--ink); font:900 12px var(--font-title); white-space:nowrap; } .sx-acc img { width:16px; }
  .sx-acc.pending { background:#fff3c4; } .sx-acc.full { background:var(--paper-2); color:var(--ink-2); } .sx-acc.open { background:#dff8e6; } .sx-acc.invite { background:#f0e8ff; }
  .sx-crow { width:100%; display:grid; grid-template-columns:30px 40px minmax(0, 1fr) auto auto; align-items:center; gap:10px; padding:4px 10px; border:0; border-radius:14px; background:var(--paper-2); color:var(--ink); text-align:left; cursor:pointer; }
  .sx-crow.me { box-shadow:inset 0 0 0 2px var(--yellow-d); background:#fff8dc; } .sx-crow em { font:900 15px var(--font-title); font-style:normal; } .sx-clall { align-self:center; margin-top:4px; }
  /* ---- кланы: страница ---- */
  .sx-clhero { flex:none; display:flex; align-items:center; gap:22px; padding:14px 24px; border-radius:24px; color:#fff; background:var(--stripes), linear-gradient(110deg, #2a2a7a, #3a5cd8 55%, #8a5cff); box-shadow:var(--shadow); animation:sxPop .35s backwards; }
  .sx-clhero-emb .sx-emb { animation:sxFloat 3.4s ease-in-out infinite; } .sx-clhero-tx { flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
  .sx-clhero-meta { display:flex; align-items:center; flex-wrap:wrap; gap:10px; } .sx-clhero-meta small { font-weight:800; opacity:.9; }
  .sx-clhero h2 { margin:0; font:900 34px/1.05 var(--font-title); text-shadow:0 3px #0003; } .sx-cldesc { margin:0; font-weight:800; opacity:.95; max-width:680px; }
  .sx-clhero-stats { display:flex; flex-wrap:wrap; gap:8px; } .sx-clhero-stats > span { display:flex; flex-direction:column; padding:6px 14px; border-radius:14px; background:#ffffff26; } .sx-clhero-stats b { font:900 22px/1.1 var(--font-title); } .sx-clhero-stats small { font-size:11px; font-weight:800; opacity:.9; }
  .sx-clprize { align-self:flex-start; display:inline-flex; align-items:center; gap:6px; padding:3px 12px 3px 4px; border-radius:99px; background:#fff3c4; color:var(--ink); font:900 12px var(--font-title); } .sx-clprize.off { background:#ffffff26; color:#fff; padding-left:12px; }
  .sx-clacts { display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; } .sx-danger { color:var(--red-d) !important; }
  .sx-notice { display:flex; align-items:center; gap:14px; padding:12px 16px; background:linear-gradient(100deg, #fff6d0, #fff); box-shadow:0 0 0 3px #f2c04a, var(--shadow); } .sx-notice img { image-rendering:pixelated; }
  .sx-notice-tx { flex:1; min-width:0; } .sx-notice-tx small { color:#b07a10; font:900 11px var(--font-title); text-transform:uppercase; letter-spacing:1px; } .sx-notice-tx p { margin:2px 0 0; font:900 16px var(--font-title); white-space:pre-wrap; overflow-wrap:anywhere; }
  .sx-notice-btns { display:flex; flex-direction:column; gap:6px; } .sx-notice.empty { border:0; text-align:left; cursor:pointer; box-shadow:var(--shadow); background:#fffffff2; } .sx-notice.empty > span { display:flex; flex-direction:column; } .sx-notice.empty b { font:900 16px var(--font-title); } .sx-notice.empty small { color:var(--ink-2); font-weight:800; }
  .sx-cltabbox { padding:8px 10px 12px; } .sx-cltabs { display:flex; gap:6px; padding:4px; border-radius:16px; background:var(--paper-2); }
  .sx-cltab { position:relative; flex:1; display:flex; align-items:center; justify-content:center; gap:6px; padding:8px; border:0; border-radius:12px; background:none; color:var(--ink-2); font:900 15px var(--font-title); cursor:pointer; } .sx-cltab small { font-size:11px; } .sx-cltab.on { background:#fff; color:var(--ink); box-shadow:var(--shadow-sm); } .sx-cltab .sx-badge { position:static; box-shadow:none; }
  .sx-cltabbody { padding-top:8px; } .sx-tabbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; margin-bottom:6px; } .sx-tabnote { margin:0 0 6px; color:var(--ink-2); font-size:12px; font-weight:800; }
  .sx-memlist { display:flex; flex-direction:column; gap:3px; max-height:520px; overflow-y:auto; }
  .sx-mem { display:grid; grid-template-columns:minmax(0, 1fr) 90px 90px var(--tools, 0px); align-items:center; gap:8px; padding:4px 8px; border-radius:14px; background:var(--paper-2); }
  .sx-mem.hd { background:none; color:var(--ink-2); font:900 11px var(--font-title); text-transform:uppercase; letter-spacing:1px; padding-top:0; padding-bottom:0; } .sx-mem.me { box-shadow:inset 0 0 0 2px var(--blue); } .sx-mem.idle { opacity:.75; }
  .sx-mem-who { display:flex; align-items:center; gap:10px; min-width:0; padding:2px; border:0; background:none; color:var(--ink); text-align:left; cursor:pointer; } .sx-mem-who > span:last-child { display:flex; flex-direction:column; min-width:0; }
  .sx-mem-who b { font:900 15px var(--font-title); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .sx-mem-who small { display:flex; align-items:center; gap:4px; color:var(--ink-2); font-size:11.5px; font-weight:800; white-space:nowrap; overflow:hidden; } .sx-seen { font-style:normal; } .sx-seen.on { color:var(--green-d); }
  .sx-mem-pts { display:flex; flex-direction:column; } .sx-mem-pts b { font:900 16px var(--font-title); } .sx-mem-pts small { color:var(--ink-2); font-size:10.5px; font-weight:800; } .sx-mem-tot { font:900 14px var(--font-title); color:var(--ink-2); }
  .sx-mem-tools { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:4px; } .sx-mem-tools .pill { background:#fff; font-size:11.5px; padding:4px 10px; }
  .sx-invites { display:flex; flex-direction:column; gap:4px; margin-top:8px; } .sx-invites > small { color:var(--ink-2); font:900 11px var(--font-title); text-transform:uppercase; letter-spacing:1px; }
  .sx-inv { display:flex; align-items:center; gap:8px; padding:4px 10px; border-radius:12px; background:var(--paper-2); } .sx-inv small { flex:1; color:var(--ink-2); font-size:11.5px; font-weight:800; } .sx-inv .pill { background:#fff; }
  .sx-reqs { display:flex; flex-direction:column; gap:6px; } .sx-req { display:grid; grid-template-columns:minmax(150px, 1fr) minmax(0, 1.4fr) auto; align-items:center; gap:10px; padding:6px 10px; border-radius:14px; background:var(--paper-2); }
  .sx-req-msg { color:var(--ink-2); font-size:13px; font-weight:700; overflow-wrap:anywhere; } .sx-req-btns { display:flex; gap:6px; }
  .sx-activity { display:flex; flex-direction:column; gap:6px; } .sx-logtabs .pill { font-size:12px; padding:5px 12px; } .sx-log { display:flex; flex-direction:column; gap:4px; max-height:520px; overflow-y:auto; } .sx-logmore { align-self:center; }
  .sx-ev { display:grid; grid-template-columns:44px minmax(0, 1fr) auto auto; align-items:center; gap:10px; padding:5px 10px; border:0; border-radius:14px; background:var(--paper-2); color:var(--ink); text-align:left; font-size:13px; font-weight:700; }
  .sx-ev.run { cursor:pointer; } .sx-ev.run.win { background:linear-gradient(90deg, #dff8e6, var(--paper-2)); } @media (hover:hover) { .sx-ev.run:hover { box-shadow:inset 0 0 0 2px var(--blue); } }
  .sx-ev-pic { width:44px; height:44px; display:grid; place-items:center; border-radius:12px; background:#fff; } .sx-ev-pic img { image-rendering:pixelated; max-width:40px; }
  .sx-ev-tx { display:flex; flex-direction:column; min-width:0; } .sx-ev-tx em { color:var(--green-d); font-style:normal; font-weight:900; } .sx-ev-tx small { color:var(--ink-2); font-size:11.5px; font-weight:800; }
  .sx-ev-q { margin-top:2px; color:var(--ink); font-style:italic; overflow-wrap:anywhere; } .sx-ev-at { color:var(--ink-2); font-size:11px; font-weight:800; white-space:nowrap; } .sx-ev-go { color:var(--blue-d); font:900 12px var(--font-title); }
  .sx-slots-bar { display:grid; grid-template-columns:repeat(10, 1fr); gap:4px; }
  .sx-slot { position:relative; height:16px; border-radius:6px; overflow:hidden; background:#dff8e6; box-shadow:inset 0 0 0 2px #36c96a55; } .sx-slot::before { content:""; position:absolute; inset:0; width:calc(var(--f) * 100%); background:var(--green); }
  .sx-slot.off { display:grid; place-items:center; background:var(--paper-2); box-shadow:none; } .sx-slot.off img { width:12px; opacity:.6; }
  .sx-slots-tx { color:var(--ink-2); font-size:12px; font-weight:800; } .sx-slots-btn { width:100%; } .sx-slots-max { display:flex; align-items:center; justify-content:center; gap:6px; padding:8px; border-radius:14px; background:#dff8e6; font:900 15px var(--font-title); color:var(--green-d); }
  .sx-slots-jump { display:flex; align-items:baseline; justify-content:center; gap:12px; padding:6px; } .sx-slots-jump b { font:900 38px var(--font-title); } .sx-slots-jump b.new { color:var(--green-d); } .sx-slots-jump span { font:900 26px var(--font-title); color:var(--ink-2); }
  .sx-clp { display:grid; grid-template-columns:32px minmax(0, 1fr) auto 36px 28px; align-items:center; gap:8px; padding:4px 8px; border-radius:12px; background:var(--paper-2); } .sx-clp.on { box-shadow:inset 0 0 0 2px var(--yellow-d); background:#fff8dc; }
  .sx-clp > span:nth-child(2) { display:flex; flex-direction:column; line-height:1.1; } .sx-clp b { font:900 14px var(--font-title); } .sx-clp small { color:var(--ink-2); font-size:11px; font-weight:800; }
  .sx-clp em { display:inline-flex; align-items:center; gap:3px; color:var(--purple-d); font:900 14px var(--font-title); font-style:normal; } .sx-clp em img { width:15px; }
  .sx-clwon { display:flex; flex-wrap:wrap; gap:8px; } .sx-clwon > span { display:flex; flex-direction:column; align-items:center; gap:2px; width:84px; text-align:center; } .sx-clwon small { font-size:10.5px; font-weight:800; line-height:1.1; }
  .sx-symrow { display:flex; justify-content:center; gap:8px; }
  .sx-accs { display:flex; flex-direction:column; gap:6px; }
  .sx-acc-opt { display:flex; align-items:center; gap:12px; padding:8px 12px; border:0; border-radius:16px; background:var(--paper-2); color:var(--ink); text-align:left; cursor:pointer; } .sx-acc-opt > span { flex:1; display:flex; flex-direction:column; } .sx-acc-opt b { font:900 15px var(--font-title); } .sx-acc-opt small { color:var(--ink-2); font-size:12px; font-weight:700; }
  .sx-acc-opt.on { box-shadow:inset 0 0 0 3px var(--green); background:#e8f8ee; } .sx-radio { width:18px; height:18px; flex:none; border-radius:50%; box-shadow:inset 0 0 0 3px var(--ink-2); } .sx-acc-opt.on .sx-radio { box-shadow:inset 0 0 0 5px var(--green); background:#fff; }
  .sx-set { width:min(560px, 100%); }
  /* ---- редактор эмблемы ---- */
  .sx-cfwrap { flex:1; min-height:0; display:grid; grid-template-columns:340px minmax(0, 1fr); gap:16px; padding:0 24px 18px; }
  .sx-cfleft { display:flex; flex-direction:column; align-items:stretch; gap:10px; padding:16px; overflow-y:auto; } .sx-cfright { min-height:0; display:flex; flex-direction:column; gap:10px; padding:12px; }
  .sx-cfprev { align-self:center; width:220px; height:220px; display:grid; place-items:center; border-radius:50%; background:radial-gradient(#fff 55%, #ece8fb); box-shadow:inset 0 0 0 4px #fff, 0 4px 16px #1a124626; }
  .sx-cfnames { display:flex; gap:8px; } .sx-cfnames .sx-field:first-child { flex:1; min-width:0; } .sx-cftag { width:96px; text-transform:uppercase; text-align:center; font-family:var(--font-title); }
  .sx-hintline { color:var(--ink-2); font-size:12px; font-weight:800; } .sx-hintline.bad { color:var(--red-d); } .sx-hintline.ok { color:var(--green-d); }
  .sx-cfsample { align-self:center; display:flex; align-items:center; gap:6px; padding:5px 14px; border-radius:99px; background:var(--paper-2); font:900 15px var(--font-title); } .sx-cfsample small { color:var(--ink-2); font-size:12px; }
  .sx-cfacc { display:flex; flex-direction:column; gap:4px; } .sx-cfacc small { color:var(--ink-2); font:900 11px var(--font-title); text-transform:uppercase; letter-spacing:1px; } .sx-cfacc .seg { display:flex; } .sx-cfacc .pill { flex:1; justify-content:center; padding:6px 6px; font-size:11.5px; } .sx-cfacc img { width:18px; }
  .sx-cfrow2 { justify-content:center; } .sx-cfnote { font-size:11.5px; font-weight:800; }
  .sx-cftabs { display:flex; align-self:flex-start; } .sx-cfpane { flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:12px; padding:4px; }
  .sx-cfgrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(112px, 1fr)); gap:8px; }
  .sx-cfopt { position:relative; display:flex; flex-direction:column; align-items:center; gap:4px; padding:10px 4px 8px; border:0; border-radius:16px; background:var(--paper-2); cursor:pointer; color:var(--ink); } .sx-cfopt small { font-size:11px; font-weight:900; text-align:center; }
  .sx-cfopt.on { box-shadow:0 0 0 3px var(--yellow-d); background:#fff8dc; } .sx-cfopt.locked > :not(.sx-lock) { opacity:.4; filter:grayscale(.8); }
  .sx-cfcols { display:flex; flex-direction:column; gap:6px; } .sx-cfcols small { color:var(--ink-2); font:900 12px var(--font-title); } .sx-cfsw { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
  .sx-cfdot { width:30px; height:30px; padding:0; border:0; border-radius:50%; cursor:pointer; box-shadow:inset 0 0 0 2px #0002, 0 2px 0 #0002; } .sx-cfdot.on { box-shadow:0 0 0 3px #fff, 0 0 0 5px var(--ink); }
  .sx-cfcolor { width:44px; height:32px; padding:0; border:0; border-radius:10px; background:none; cursor:pointer; }
  .sx-cfsyms { display:grid; grid-template-columns:repeat(auto-fill, minmax(56px, 1fr)); gap:6px; } .sx-cfsyms.big { grid-template-columns:repeat(auto-fill, minmax(72px, 1fr)); } .sx-cfsyms.mons { max-height:none; }
  .sx-cfsym { position:relative; aspect-ratio:1; display:grid; place-items:center; padding:4px; border:0; border-radius:14px; background:var(--paper-2); cursor:pointer; } .sx-cfsym img { max-width:100%; max-height:100%; image-rendering:pixelated; }
  .sx-cfsym.on { box-shadow:0 0 0 3px var(--yellow-d); background:#fff8dc; } .sx-cfsym.locked img:not(.sx-ic) { opacity:.35; filter:grayscale(1); }
  .sx-cfmonbar { flex-wrap:wrap; } .sx-cfmonbar .sx-search { flex:1; min-width:180px; width:auto; }
  .sx-clbhero { --sky:#3a8cff; --gr:#8a5cff; }
  .sx-cbrow { grid-template-columns:44px minmax(160px, 1.4fr) 80px minmax(120px, 1fr) 74px 58px 110px; } .sx-cbmem { color:var(--ink-2); font-size:13px; } .sx-cbtop { color:var(--ink-2); font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .sx-toasts { position:fixed; left:50%; bottom:max(24px, env(safe-area-inset-bottom)); translate:-50% 0; z-index:80; display:flex; flex-direction:column; align-items:center; gap:6px; pointer-events:none; zoom:var(--uiz, 1); }
  .sx-toast { max-width:min(560px, 92vw); padding:9px 18px; border-radius:16px; background:#16102cf0; color:#fff; font:800 14px var(--font); text-align:center; box-shadow:var(--shadow); animation:sxIn .25s ease-out; }
  /* ---- итог забега: строка мест ---- */
  .sx-runline { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; } .sx-runline > span { color:#fff; font-weight:800; }
  .sx-rl { display:inline-flex; align-items:center; gap:6px; padding:4px 14px 4px 6px; border-radius:99px; background:#16102cd0; color:#fff; font:900 14px var(--font-title); } .sx-up { color:#7dff9a; font-style:normal; }
  .sx-runline .chip { font-size:12px; padding:4px 12px; }
  /* ---- телефоны и узкие окна ---- */
  @media (max-width:1100px) {
    .sx-bwrap { grid-template-columns:260px minmax(0, 1fr); padding:0 14px 12px; }
    .sx-brow { grid-template-columns:40px minmax(130px, 1fr) minmax(0, 1fr) 48px 100px; gap:8px; } .sx-brow > :nth-child(4) { display:none; }
    .sx-pstats { grid-template-columns:repeat(4, minmax(0, 1fr)); } .sx-run { grid-template-columns:32px minmax(80px, 1fr) minmax(110px, 1fr) 80px 52px 96px auto; } .sx-run > :nth-child(7) { display:none; }
    .sx-cbrow { grid-template-columns:40px minmax(150px, 1.4fr) 70px 48px 100px; } .sx-cbrow > :nth-child(4), .sx-cbrow > :nth-child(5) { display:none; }
  }
  @media (max-width:860px), (max-height:520px) {
    .sx-screen { overflow-y:auto; -webkit-overflow-scrolling:touch; }
    .sx-bwrap, .sx-cfwrap, .sx-frwrap { display:flex; flex-direction:column; flex:none; min-height:auto; overflow:visible; padding:0 max(12px, env(safe-area-inset-left)) 16px; }
    .sx-bside, .sx-bmain, .sx-bscroll, .sx-cfpane, .sx-cfleft, .sx-cfright, .sx-pbody, .sx-clhub, .sx-clpage, .sx-mlwrap, .sx-memlist, .sx-log, .sx-cflist, .sx-mons { flex:none; min-height:auto; max-height:none; overflow:visible; }
    .sx-pbody, .sx-clhub, .sx-clpage, .sx-mlwrap { padding:0 max(12px, env(safe-area-inset-left)) 16px; }
    .sx-bside { order:2; } .sx-bmain { order:1; } .sx-bme { position:sticky; bottom:8px; z-index:2; }
    .sx-hero { flex-wrap:wrap; padding:12px 16px; } .sx-hero h2 { font-size:24px; } .sx-chips { flex-direction:row; flex-wrap:wrap; align-items:flex-start; width:100%; } .sx-chip { white-space:normal; }
    .sx-podium { gap:8px; padding-top:10px; } .sx-p { width:31%; min-width:0; } .sx-p b { font-size:13px; white-space:normal; overflow-wrap:anywhere; line-height:1.1; } .sx-p.p1 b { font-size:16px; } .sx-p-score b { font-size:18px; } .sx-p.p1 .sx-p-score b { font-size:21px; }
    .sx-p-score { flex-wrap:wrap; justify-content:center; row-gap:0; } .sx-p-score b { white-space:nowrap; overflow-wrap:normal; }   /* узкий подиум: число целиком, подпись и ⚡ — следующей строкой */
    .sx-p .sx-av { --s:56px !important; } .sx-p.p1 .sx-av { --s:68px !important; } .sx-p-base { font-size:30px; } .sx-p.p1 .sx-p-base { height:72px; } .sx-p.p2 .sx-p-base { height:52px; } .sx-p.p3 .sx-p-base { height:40px; } .sx-p > small { font-size:10.5px; }
    .sx-brow { grid-template-columns:34px minmax(0, 1fr) 32px 76px; gap:6px; padding:5px 6px; } .sx-brow > :nth-child(3), .sx-brow > :nth-child(4) { display:none; }
    .sx-brow.hd > :nth-child(5) { visibility:hidden; } .sx-bwho .sx-av { --s:30px !important; } .sx-bval b { font-size:15px; } .sx-bval small { display:none; }
    .sx-cbrow { grid-template-columns:34px minmax(0, 1fr) 46px 32px 76px; } .sx-cbrow > :nth-child(3) { display:revert; }
    .sx-cols, .sx-clpage .sx-cols, .sx-pcols { grid-template-columns:1fr; } .sx-pstats { grid-template-columns:repeat(2, minmax(0, 1fr)); }
    .sx-pstat { padding:8px; column-gap:8px; } .sx-psic { width:34px; height:34px; } .sx-pstat b { font-size:16px; }
    .sx-phero { padding:12px; gap:12px; } .sx-pid h2 { font-size:24px; } .sx-pav .sx-av { --s:84px !important; }
    .sx-run { grid-template-columns:32px minmax(0, 1fr) auto auto auto; } .sx-run > :nth-child(3), .sx-run > :nth-child(5), .sx-run > :nth-child(7) { display:none; }
    .sx-pmap { grid-template-columns:minmax(0, 1fr) auto; } .sx-pmt { grid-column:1 / -1; justify-self:end; }
    .sx-clhero { flex-direction:column; text-align:center; padding:14px; gap:10px; } .sx-clhero h2 { font-size:26px; } .sx-clhero-meta, .sx-clhero-stats, .sx-clacts { justify-content:center; } .sx-clprize { align-self:center; }
    .sx-clhero-emb .sx-emb { width:120px !important; height:120px !important; }
    .sx-clfound h2, .sx-clfound p { max-width:none; } .sx-clart { position:relative; align-self:center; height:130px; transform:none; }
    .sx-mem { grid-template-columns:minmax(0, 1fr) 70px; } .sx-mem > .sx-mem-tot, .sx-mem.hd > :nth-child(3) { display:none; } .sx-mem-tools { grid-column:1 / -1; justify-content:flex-start; } .sx-mem.hd > :nth-child(4) { display:none; }
    .sx-req { grid-template-columns:1fr; } .sx-ev { grid-template-columns:40px minmax(0, 1fr) auto; } .sx-ev-go { display:none; }
    .sx-ml { flex-wrap:wrap; gap:12px; padding:12px 14px; } .sx-ml-tx h3 { font-size:17px; } .sx-ml .sx-emb { width:56px !important; height:56px !important; } .sx-ml-btns { flex-direction:row; width:100%; justify-content:flex-end; }
    .sx-fr { grid-template-columns:minmax(0, 1fr) auto; } .sx-frtools { grid-column:1 / -1; justify-content:flex-end; }
    .sx-cfprev { width:170px; height:170px; } .sx-cfprev .sx-emb { width:150px !important; height:150px !important; } .sx-cfgrid { grid-template-columns:repeat(auto-fill, minmax(92px, 1fr)); } .sx-cfopt .sx-emb { width:72px !important; height:72px !important; }
    .sx-top { padding-left:max(12px, env(safe-area-inset-left)); padding-right:max(12px, env(safe-area-inset-right)); } .sx-top .scr-title b { font-size:22px; } .sx-top .scr-title small { display:none; }
    .sx-card { padding:14px 16px; } .sx-rd-stats { grid-template-columns:repeat(2, 1fr); } .sx-lk-head { flex-direction:column; text-align:center; gap:6px; }
  }
  /* сезон 0: цена основания клана — старая зачёркнута, новая красным */
  .sx-cost.s0 s { opacity:.6; font-weight:800; } .sx-cost.s0 b { color:#ff3b45; font-weight:900; }
  .sx-s0 { margin:6px 0 0; color:#ff3b45; font:900 13px var(--font-title); text-align:center; }
  /* сборка: карточка предмета при наведении (и по тапу — фокус) */
  .sx-rd-item { cursor:help; outline:none; } .sx-rd-item:focus-visible { box-shadow:0 0 0 3px var(--blue); }
  .sx-tip { position:absolute; z-index:6; left:50%; bottom:calc(100% + 8px); width:230px; translate:calc(-50% + var(--dx, 0px)) 4px; opacity:0; pointer-events:none; transition:opacity .12s, translate .12s;
    display:flex; flex-direction:column; gap:3px; padding:9px 11px; border-radius:12px; background:#1a1446f2; color:#fff; text-align:left; box-shadow:0 8px 22px #0007; border-top:3px solid var(--rc); }
  .sx-tip b { font:900 14px var(--font-title); color:#fff; } .sx-tip small { font:900 11px var(--font-title); color:var(--rc); text-transform:uppercase; letter-spacing:.4px; } .sx-tip span { font:700 12.5px/1.35 var(--font); color:#e6e2ff; }
  .sx-rd-item:hover .sx-tip, .sx-rd-item:focus .sx-tip { opacity:1; translate:calc(-50% + var(--dx, 0px)) 0; }
  /* ---- кланы 2.0 (G1): кольцо уровня, вкладки из реестра, «Главная» (награды, дорога, уровень), «Клан» (места до 200, полка витрины) ---- */
  @property --lvp { syntax:'<number>'; inherits:true; initial-value:0; }
  .sx-lvring { position:relative; display:grid; place-items:center; width:184px; height:184px; flex:none; transition:--lvp .5s ease-out; }
  .sx-lvring::before { content:""; position:absolute; inset:0; border-radius:50%; background:conic-gradient(var(--yellow) calc(var(--lvp) * 1turn), color-mix(in srgb, var(--ink) 72%, black) 0);
    -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 10px), currentColor calc(100% - 9px)); mask:radial-gradient(farthest-side, transparent calc(100% - 10px), currentColor calc(100% - 9px)); }
  .sx-lvring .sx-emb { position:relative; animation:none; }
  .sx-clhero-emb .sx-lvring { animation:sxFloat 3.4s ease-in-out infinite; } .sx-clhero-emb .sx-lvring .sx-emb { width:160px !important; height:160px !important; }
  .sx-lvplate { position:absolute; left:50%; bottom:-4px; translate:-50% 0; padding:1px 12px; border-radius:99px; background:var(--yellow); color:var(--ink); font:900 15px/22px var(--font-title); white-space:nowrap; box-shadow:0 3px 0 var(--yellow-d), var(--shadow-sm); }
  .sx-lvchip { display:inline-flex; align-items:center; margin-left:6px; padding:0 7px; border-radius:99px; background:var(--yellow); color:var(--ink); font:900 11px/18px var(--font-title); vertical-align:middle; white-space:nowrap; }
  .sx-clhero-shelf { flex:none; align-self:center; display:flex; flex-direction:column; align-items:center; gap:4px; } .sx-clhero-shelf > small { font:900 11px var(--font-title); text-transform:uppercase; letter-spacing:1px; opacity:.9; }
  .sx-clhero-shelf > div { display:flex; align-items:center; gap:10px; }
  .sx-shelf-it { display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:48px; } .sx-shelf-it small { font:900 11px var(--font-title); }
  /* вкладки: ряд кнопок; на узком экране — лента с прокруткой внутри себя */
  .sx-cltab { flex:1 0 auto; } .sx-cltab:focus-visible, .sx-shelf-slot:focus-visible { outline:3px solid var(--blue); outline-offset:2px; }
  .sx-home { display:flex; flex-direction:column; gap:12px; }
  /* «Забрать» */
  .sx-rwbox { background:linear-gradient(100deg, color-mix(in srgb, var(--yellow) 24%, white), var(--paper)); box-shadow:0 0 0 3px var(--yellow-d), var(--shadow); animation:sxPop .35s ease-out backwards; }
  .sx-rwbox .sx-grp { border-left-color:var(--yellow-d); } .sx-rwbox.gone { overflow:hidden; animation:sxPop .25s ease-in reverse forwards; }
  .sx-rwbox.fold { padding-top:0; padding-bottom:0; margin-bottom:-12px; transition:height .25s ease-out, padding .25s ease-out, margin .25s ease-out; }
  .sx-rw-row { display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; } .sx-rw-list { display:flex; flex-wrap:wrap; gap:8px; }
  .sx-rw { display:flex; flex-direction:column; align-items:center; gap:2px; width:136px; padding:8px 6px; border-radius:16px; background:var(--paper); box-shadow:var(--shadow-sm); text-align:center; animation:sxIn .3s ease-out backwards; animation-delay:var(--d, 0s); }
  .sx-rw.got { animation:sxPop .28s ease-in reverse forwards; animation-delay:var(--d, 0s); }
  .sx-rw-pic { position:relative; display:grid; place-items:center; width:80px; height:80px; } .sx-rw b { font:900 12.5px/1.2 var(--font-title); } .sx-rw small { color:var(--ink-2); font-size:11px; font-weight:800; }
  .sx-rw em { display:inline-flex; align-items:center; gap:3px; color:var(--purple-d); font:900 14px var(--font-title); font-style:normal; }
  .sx-rw-go { margin:0 auto; } .sx-rw-sum { font-size:18px; }
  /* дорога клана */
  .sx-road { overflow-x:auto; overflow-y:hidden; padding:8px 0 2px; scroll-behavior:smooth; scrollbar-width:thin; }
  .sx-road-in { --node:92px; position:relative; display:flex; justify-content:space-between; min-width:100%; width:max-content; }
  .sx-road-track { position:absolute; left:calc(var(--node) / 2); right:calc(var(--node) / 2); top:37px; height:10px; border-radius:99px; background:var(--paper-2); box-shadow:inset 0 0 0 2px var(--line); }
  .sx-road-fill { position:absolute; left:0; top:0; bottom:0; width:0; border-radius:inherit; background:var(--stripes), linear-gradient(180deg, color-mix(in srgb, var(--yellow) 70%, white), var(--yellow-d)); transition:width .5s ease-out; }
  .sx-rstep { position:relative; z-index:1; flex:0 0 var(--node); width:var(--node); display:flex; flex-direction:column; align-items:center; gap:3px; text-align:center; animation:sxIn .3s ease-out backwards; animation-delay:var(--d, 0s); }
  .sx-rstep-pic { position:relative; display:grid; place-items:center; width:84px; height:84px; border-radius:20px; background:var(--paper); box-shadow:inset 0 0 0 3px var(--line), var(--shadow-sm); }
  .sx-rstep.done .sx-rstep-pic { background:color-mix(in srgb, var(--yellow) 16%, white); box-shadow:inset 0 0 0 3px var(--yellow-d), var(--shadow-sm); }
  .sx-rstep.next .sx-rstep-pic { box-shadow:inset 0 0 0 3px var(--blue), 0 0 0 4px color-mix(in srgb, var(--blue) 25%, white), var(--shadow-sm); }
  .sx-rstep.lock .sx-rstep-pic > :not(.sx-rstep-ok) { filter:grayscale(1) contrast(.75) brightness(1.15); }
  .sx-rstep-ok { position:absolute; right:-6px; top:-6px; display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--green); box-shadow:0 0 0 2px var(--paper); }
  .sx-rstep-n { position:absolute; right:6px; bottom:6px; color:var(--purple-d); font:900 15px var(--font-title); }
  .sx-rstep-lv { font:900 13px var(--font-title); } .sx-rstep.next .sx-rstep-lv { color:var(--blue-d); }
  .sx-rstep small { max-width:var(--node); padding:0 3px; color:var(--ink-2); font-size:10.5px; font-weight:800; line-height:1.15; overflow-wrap:anywhere; }
  .sx-road-next { margin:2px 0 0; font:900 13px var(--font-title); } .sx-road-next em { color:var(--ink-2); font-style:normal; }
  /* уровень и опыт за сегодня */
  .sx-lvrow { display:flex; align-items:center; gap:12px; }
  .sx-lvnum { flex:none; display:grid; place-items:center; width:54px; height:54px; border-radius:50%; background:var(--yellow); color:var(--ink); font:900 26px var(--font-title); box-shadow:0 4px 0 var(--yellow-d), var(--shadow-sm); }
  .sx-lvbar { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; } .sx-lvbar small { color:var(--ink-2); font:900 12px var(--font-title); }
  .sx-xpbar { --x:0; position:relative; display:block; height:16px; border-radius:99px; overflow:hidden; background:var(--paper-2); box-shadow:inset 0 0 0 2px var(--line); }
  .sx-xpbar i { position:absolute; left:0; top:0; bottom:0; width:calc(var(--x) * 100%); border-radius:inherit; background:var(--stripes), linear-gradient(180deg, color-mix(in srgb, var(--yellow) 70%, white), var(--yellow-d)); transition:width .5s ease-out; }
  .sx-xpbar.small { height:10px; }
  .sx-today { display:flex; flex-direction:column; gap:6px; } .sx-todaybar { display:grid; grid-template-columns:96px minmax(0, 1fr) auto; align-items:center; gap:8px; }
  .sx-todaybar small { color:var(--ink-2); font-size:12px; font-weight:800; } .sx-todaybar b { font:900 13px var(--font-title); }
  .sx-todaybar.full b { color:var(--green-d); } .sx-todaybar.full .sx-xpbar i { background:var(--stripes), var(--green); }
  .sx-lvhow { margin:0; padding-left:18px; display:flex; flex-direction:column; gap:3px; color:var(--ink-2); font-size:12.5px; font-weight:700; }
  .sx-stats { display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:10px; }
  .sx-stat { display:flex; flex-direction:column; gap:2px; padding:10px 14px; border-radius:20px; background:var(--paper); box-shadow:var(--shadow); }
  .sx-stat small { color:var(--ink-2); font-size:12px; font-weight:800; } .sx-stat b { font:900 20px var(--font-title); } .sx-stat-avs { display:flex; flex-wrap:wrap; gap:3px; margin-top:2px; }
  /* «Клан»: эмблема и название, места, полка витрины */
  .sx-clmgr-row { display:flex; align-items:center; gap:14px; } .sx-clmgr-tx { flex:1; min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:6px; } .sx-clmgr-tx > b { font:900 22px var(--font-title); overflow-wrap:anywhere; }
  .sx-clmgr-tx .sx-clacts { margin-top:2px; }
  .sx-slot.buy { background:var(--paper-2); box-shadow:inset 0 0 0 2px var(--line); }
  .sx-slots-max.lock { background:var(--paper-2); color:var(--ink-2); }
  .sx-shelf-row { display:flex; flex-wrap:wrap; gap:10px; }
  .sx-shelf-slot { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; width:104px; height:104px; padding:0; border:0; border-radius:20px; background:var(--paper-2); box-shadow:inset 0 0 0 2px var(--line); color:var(--ink-2); cursor:pointer; }
  .sx-shelf-slot.full { background:color-mix(in srgb, var(--yellow) 14%, white); box-shadow:inset 0 0 0 2px var(--yellow-d); } .sx-shelf-slot:disabled { cursor:default; } .sx-shelf-slot small { font:900 12px var(--font-title); }
  @media (hover:hover) { .sx-shelf-slot:not(:disabled):hover { box-shadow:inset 0 0 0 3px var(--blue); } }
  .sx-shelf-plus { font:900 32px/1 var(--font-title); }
  .sx-shelf-pick { display:grid; grid-template-columns:repeat(auto-fill, minmax(108px, 1fr)); gap:8px; max-height:50vh; overflow-y:auto; padding:2px; }
  .sx-shelf-opt { display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 4px; border:0; border-radius:16px; background:var(--paper-2); color:var(--ink); cursor:pointer; } .sx-shelf-opt small { font-size:11px; font-weight:800; line-height:1.15; }
  .sx-shelf-opt.on { box-shadow:inset 0 0 0 3px var(--blue); } .sx-shelf-opt:disabled { cursor:default; filter:grayscale(1); }
  .sx-clrw .btn { align-self:flex-start; } .sx-clrw .sx-grp { flex-wrap:wrap; row-gap:0; }
  @media (max-width:860px), (max-height:520px) {
    .sx-cltabs { overflow-x:auto; scrollbar-width:none; } .sx-cltabs::-webkit-scrollbar { display:none; } .sx-cltab { flex:0 0 auto; padding:8px 12px; font-size:14px; min-height:44px; }
    .sx-road-in { --node:90px; }
    .sx-rw { width:calc(50% - 4px); }
    .sx-clmgr-row { flex-direction:column; text-align:center; } .sx-clmgr-tx { align-items:center; } .sx-clmgr-tx .sx-clacts { justify-content:center; }
    .sx-todaybar { grid-template-columns:84px minmax(0, 1fr) auto; }
  }
  @media (prefers-reduced-motion:reduce) { .sx-lvring, .sx-road-fill, .sx-xpbar i { transition:none; } .sx-clhero-emb .sx-lvring { animation:none; } }
  .sx-calm .sx-lvring, .sx-calm .sx-road-fill, .sx-calm .sx-xpbar i { transition:none; } .sx-calm .sx-clhero-emb .sx-lvring { animation:none; }   /* «Меньше движения: Выкл» */
  /* ---- доска клана (G2): лента, сообщения и системные записи, реакции, форма, «в сети»; окошко реакций, меню, нижнее меню на телефоне ---- */
  .sx-board { display:flex; flex-direction:column; }
  .sx-bd-onchip { display:inline-flex; align-items:center; gap:6px; color:var(--ink-2); font:900 12px var(--font-title); }
  .sx-bd-dot { width:9px; height:9px; border-radius:50%; background:color-mix(in srgb, var(--ink-2) 40%, white); } .sx-bd-dot.on { background:var(--green); box-shadow:0 0 0 3px color-mix(in srgb, var(--green) 25%, white); }
  .sx-bd-cols { display:grid; grid-template-columns:minmax(0, 1fr) 270px; gap:12px; align-items:stretch; }
  .sx-bd-feed { display:flex; flex-direction:column; min-width:0; height:clamp(420px, calc(100vh - 380px), 640px); border-radius:18px; background:var(--paper-2); box-shadow:inset 0 0 0 2px var(--line); overflow:hidden; }
  .sx-bd-scroll { flex:1; min-height:0; display:flex; flex-direction:column; overflow-y:auto; overscroll-behavior:contain; padding:10px 14px 8px; scrollbar-width:thin; }
  .sx-bd-list { display:flex; flex-direction:column; gap:3px; } .sx-bd-more { align-self:center; margin-bottom:6px; }
  /* день и «новые» */
  .sx-bd-day, .sx-bd-unread { display:flex; align-items:center; gap:10px; margin:10px 0 6px; color:var(--ink-2); font:900 11.5px var(--font-title); letter-spacing:.4px; }
  .sx-bd-day::before, .sx-bd-day::after, .sx-bd-unread::before, .sx-bd-unread::after { content:""; flex:1; height:2px; border-radius:2px; background:var(--line); }
  .sx-bd-day span { padding:2px 12px; border-radius:99px; background:var(--paper); box-shadow:0 2px 0 var(--line); }
  .sx-bd-unread { color:var(--red-d); } .sx-bd-unread::before, .sx-bd-unread::after { background:color-mix(in srgb, var(--red) 45%, white); }
  /* сообщение: аватар, имя и звание, пузырь со временем, реакции; своё — справа, голубое */
  .sx-bm { display:flex; align-items:flex-start; gap:8px; padding-top:6px; } .sx-bm.cont { padding-top:0; }
  .sx-bm-av { flex:none; width:40px; display:grid; place-items:center; padding:2px 0 0; border:0; background:none; cursor:pointer; } span.sx-bm-av { height:1px; }
  .sx-bm-body { display:flex; flex-direction:column; align-items:flex-start; gap:3px; min-width:0; max-width:min(680px, 80%); }
  .sx-bm-head { display:flex; align-items:center; gap:5px; padding-left:6px; } .sx-bm-head b { font:900 13px var(--font-title); } .sx-bm-gone { color:var(--ink-2); font-size:11px; font-weight:800; }
  .sx-bm-line { display:flex; align-items:center; gap:6px; max-width:100%; }
  .sx-bm-bub { display:flex; flex-wrap:wrap; align-items:flex-end; gap:0 10px; min-width:0; padding:7px 12px 6px; border-radius:6px 18px 18px 18px; background:var(--paper); color:var(--ink); box-shadow:0 2px 0 var(--line); font-size:14.5px; font-weight:700; line-height:1.35; overflow-wrap:anywhere; user-select:text; }
  .sx-bm.cont .sx-bm-bub { border-radius:18px; } .sx-bm-tx { min-width:0; }
  .sx-bm-t { margin-left:auto; color:var(--ink-2); font-size:10.5px; font-weight:800; line-height:1.6; white-space:nowrap; }
  .sx-bm.me { flex-direction:row-reverse; } .sx-bm.me .sx-bm-body { align-items:flex-end; } .sx-bm.me .sx-bm-line { flex-direction:row-reverse; } .sx-bm.me .sx-bm-re { justify-content:flex-end; }
  .sx-bm.me .sx-bm-bub { border-radius:18px 6px 18px 18px; background:color-mix(in srgb, var(--blue) 15%, white); box-shadow:0 2px 0 color-mix(in srgb, var(--blue) 32%, white); } .sx-bm.me.cont .sx-bm-bub { border-radius:18px; }
  .sx-bm.del { justify-content:center; padding:4px 0; }
  .sx-bm-del { padding:3px 12px; border-radius:99px; background:color-mix(in srgb, var(--line) 60%, white); color:var(--ink-2); font-size:12px; font-weight:800; font-style:italic; }
  /* кнопки у сообщения (ПК: при наведении и фокусе), три точки — CSS */
  .sx-bm-tools { flex:none; display:flex; gap:4px; opacity:0; transition:opacity .15s; }
  .sx-bm:hover .sx-bm-tools, .sx-bs:hover .sx-bm-tools, .sx-bm:focus-within .sx-bm-tools, .sx-bs:focus-within .sx-bm-tools { opacity:1; }
  .sx-bm-tool { display:grid; place-items:center; width:30px; height:30px; padding:0; border:0; border-radius:50%; background:var(--paper); box-shadow:var(--shadow-sm); cursor:pointer; transition:transform .1s; }
  .sx-bm-tool:hover, .sx-bm-tool:focus-visible { transform:translateY(-2px); box-shadow:inset 0 0 0 2px var(--blue), var(--shadow-sm); outline:none; }
  .sx-dots { display:flex; gap:3px; } .sx-dots i { width:4px; height:4px; border-radius:50%; background:var(--ink-2); }
  /* реакции */
  .sx-bm-re { display:flex; flex-wrap:wrap; gap:4px; padding:0 2px; }
  .sx-re { display:inline-flex; align-items:center; gap:5px; height:26px; padding:0 9px 0 5px; border:0; border-radius:99px; background:var(--paper); color:var(--ink); font:900 12px var(--font-title); box-shadow:inset 0 0 0 2px var(--line); cursor:pointer; transition:transform .1s; }
  .sx-re img { image-rendering:pixelated; } .sx-re.on { background:color-mix(in srgb, var(--blue) 14%, white); box-shadow:inset 0 0 0 2px var(--blue); color:var(--blue-d); }
  .sx-re:hover, .sx-re:focus-visible { transform:translateY(-2px); outline:none; } .sx-re.pop { animation:sxPop .25s ease-out; }
  /* системная запись: карточка с полосой цвета вида, по центру ленты */
  .sx-bs { display:flex; flex-direction:column; align-items:center; gap:4px; padding:6px 0 2px; } .sx-bs > .sx-bm-line { justify-content:center; width:100%; } .sx-bs > .sx-bm-re { justify-content:center; }
  .sx-bs-card { --bt:var(--blue); display:grid; grid-template-columns:48px minmax(0, 1fr) auto; align-items:center; gap:10px; width:min(580px, 100%); padding:7px 14px 7px 8px; border:0; border-radius:16px;
    background:color-mix(in srgb, var(--bt) 10%, white); box-shadow:inset 4px 0 0 var(--bt), 0 2px 0 color-mix(in srgb, var(--bt) 24%, white); color:var(--ink); text-align:left; font-size:13px; font-weight:700; }
  .sx-bs.t-green .sx-bs-card { --bt:var(--green); } .sx-bs.t-yellow .sx-bs-card { --bt:var(--yellow-d); } .sx-bs.t-purple .sx-bs-card { --bt:var(--purple); } .sx-bs.t-red .sx-bs-card { --bt:var(--red); } .sx-bs.t-orange .sx-bs-card { --bt:var(--orange); }
  button.sx-bs-card { cursor:pointer; transition:transform .1s; } @media (hover:hover) { button.sx-bs-card.go:hover { transform:translateY(-2px); box-shadow:inset 4px 0 0 var(--bt), 0 0 0 2px var(--bt), 0 4px 0 color-mix(in srgb, var(--bt) 24%, white); } }
  .sx-bs-pic { position:relative; display:grid; place-items:center; width:48px; height:48px; border-radius:12px; background:var(--paper); } .sx-bs-pic img { image-rendering:pixelated; }
  .sx-bs-lv { position:absolute; right:-5px; bottom:-5px; min-width:22px; padding:0 5px; border-radius:99px; background:var(--yellow); color:var(--ink); font:900 12px/20px var(--font-title); text-align:center; box-shadow:0 2px 0 var(--yellow-d); }
  .sx-bs-tx { display:flex; flex-direction:column; gap:1px; min-width:0; overflow-wrap:anywhere; } .sx-bs-tx b { font-weight:900; } .sx-bs-tx small { color:var(--ink-2); font-size:11.5px; font-weight:800; }
  .sx-bs-at { align-self:start; padding-top:2px; color:var(--ink-2); font-size:10.5px; font-weight:800; white-space:nowrap; }
  .sx-bm.fresh, .sx-bs.fresh { animation:sxIn .3s ease-out backwards; animation-delay:var(--d, 0s); }
  /* «новые сообщения» внизу ленты, когда читаешь выше */
  .sx-bd-new { position:sticky; bottom:6px; z-index:2; display:none; align-items:center; gap:8px; flex:none; align-self:center; margin-top:6px; padding:7px 16px; border:0; border-radius:99px; background:var(--blue); color:var(--paper); font:900 13px var(--font-title); box-shadow:0 3px 0 var(--blue-d), var(--shadow-sm); cursor:pointer; }
  .sx-bd-new.on { display:flex; animation:sxIn .25s ease-out; } .sx-bd-chev { width:8px; height:8px; border-right:3px solid currentColor; border-bottom:3px solid currentColor; rotate:45deg; translate:0 -2px; }
  /* форма */
  .sx-bd-form { flex:none; padding:8px 10px; background:var(--paper); box-shadow:0 -2px 0 var(--line); }
  .sx-bd-row { display:flex; align-items:flex-end; gap:8px; }
  .sx-bd-ta { flex:1; min-width:0; height:46px; min-height:46px; max-height:104px; padding:12px 14px; resize:none; font-size:14.5px; line-height:1.4; overflow-y:auto; }
  .sx-bd-send { flex:none; min-height:46px; } .sx-bd-send img { width:22px; height:22px; }
  .sx-bd-foot { display:flex; align-items:center; gap:10px; min-height:20px; padding:4px 4px 0; }
  .sx-bd-err { font-size:12.5px; } .sx-bd-hint { margin-left:auto; color:var(--ink-2); font-size:11px; font-weight:800; } .sx-bd-cnt { color:var(--ink-2); font:900 11px var(--font-title); } .sx-bd-cnt.over { color:var(--red-d); } .sx-bd-cnt:empty { display:none; }
  .sx-bd-muted { display:flex; align-items:center; gap:12px; padding:8px 12px; border-radius:14px; background:color-mix(in srgb, var(--red) 9%, white); box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--red) 32%, white); }
  .sx-bd-muted span { display:flex; flex-direction:column; } .sx-bd-muted b { font:900 14px var(--font-title); } .sx-bd-muted small { color:var(--ink-2); font-size:12px; font-weight:800; }
  /* пусто и ошибка */
  .sx-bd-empty { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:40px 16px; text-align:center; } .sx-bd-empty b { font:900 18px var(--font-title); } .sx-bd-empty small { max-width:340px; color:var(--ink-2); font-size:13px; font-weight:800; }
  .sx-bd-fan { display:flex; gap:10px; margin-bottom:8px; } .sx-bd-fan span { display:grid; animation:sxIn .3s ease-out backwards, sxFloat 2.8s ease-in-out infinite; animation-delay:var(--d, 0s), calc(var(--d, 0s) * 4); }
  .sx-bd-fan img { image-rendering:pixelated; filter:drop-shadow(0 4px 4px #00000040); }
  /* в сети и правила */
  .sx-bd-side { display:flex; flex-direction:column; gap:12px; min-width:0; }
  .sx-bd-online, .sx-bd-rules { display:flex; flex-direction:column; gap:6px; padding:10px 12px; border-radius:18px; background:var(--paper-2); }
  .sx-bd-mems { display:flex; flex-direction:column; gap:2px; max-height:330px; overflow-y:auto; scrollbar-width:thin; }
  .sx-bd-mem { display:flex; align-items:center; gap:8px; padding:5px 6px; border:0; border-radius:12px; background:none; color:var(--ink); text-align:left; cursor:pointer; animation:sxIn .3s ease-out backwards; animation-delay:var(--d, 0s); }
  .sx-bd-mem:hover, .sx-bd-mem:focus-visible { background:var(--paper); outline:none; } .sx-bd-mem:not(.on) .sx-av { filter:grayscale(.7) opacity(.7); }
  .sx-bd-mem > span:nth-child(2) { flex:1; display:flex; flex-direction:column; min-width:0; } .sx-bd-mem b { display:flex; align-items:center; gap:4px; font:900 13px var(--font-title); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .sx-bd-mem small { color:var(--ink-2); font-size:11px; font-weight:800; } .sx-bd-mem.on small { color:var(--green-d); } .sx-bd-mute { display:grid; opacity:.8; }
  .sx-bd-rules ul { display:flex; flex-direction:column; gap:4px; margin:0; padding-left:18px; color:var(--ink-2); font-size:12px; font-weight:700; }
  /* окошко реакций и меню у кнопки: окно соцчасти без затемнения; нижнее меню на телефоне */
  .sx-ov.sx-popov { align-items:flex-start; justify-content:flex-start; padding:0; background:none; backdrop-filter:none; }
  .sx-popov .sx-card { position:absolute; width:auto; gap:4px; padding:8px; border-radius:18px; box-shadow:0 0 0 2px var(--line), var(--shadow); outline:none; animation:sxPop .15s ease-out; }
  .sx-rp-row { display:flex; gap:4px; }
  .sx-rp { display:flex; flex-direction:column; align-items:center; gap:3px; min-width:44px; padding:6px; border:0; border-radius:14px; background:none; color:var(--ink-2); cursor:pointer; transition:transform .1s, background .1s; animation:sxIn .2s ease-out backwards; animation-delay:var(--d, 0s); }
  .sx-rp:hover, .sx-rp:focus-visible { background:var(--paper-2); transform:translateY(-3px); outline:none; } .sx-rp.on { background:color-mix(in srgb, var(--blue) 14%, white); box-shadow:inset 0 0 0 2px var(--blue); }
  .sx-rp img { image-rendering:pixelated; } .sx-rp small { font:900 11px var(--font-title); white-space:nowrap; } .sx-rp-name { color:var(--ink-2); font:900 12px var(--font-title); text-align:center; }
  .sx-bmenu { display:flex; flex-direction:column; gap:2px; min-width:220px; }
  .sx-bmenu-it { display:flex; align-items:center; gap:10px; padding:8px 12px; border:0; border-radius:12px; background:none; color:var(--ink); font:800 14px var(--font); text-align:left; cursor:pointer; }
  .sx-bmenu-it:hover, .sx-bmenu-it:focus-visible { background:var(--paper-2); outline:none; } .sx-bmenu-it.danger { color:var(--red-d); }
  .sx-ov.sx-sheetov { align-items:flex-end; padding:0; }
  .sx-sheetov .sx-card { width:100%; max-width:560px; margin:0 auto; gap:10px; padding:8px max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-bottom)); border-radius:22px 22px 0 0; animation:sxIn .25s ease-out; }
  .sx-bsheet-grip { align-self:center; width:44px; height:5px; border-radius:99px; background:var(--line); }
  .sx-bsheet .sx-rp-row { justify-content:space-between; } .sx-bsheet .sx-rp { flex:1; min-width:0; } .sx-bsheet .sx-bmenu { min-width:0; } .sx-bsheet .sx-bmenu-it { min-height:48px; font-size:15px; } .sx-bsheet-x { width:100%; justify-content:center; }
  /* жалоба */
  .sx-bd-quote { display:flex; align-items:flex-start; gap:10px; padding:10px 12px; border-radius:14px; background:var(--paper-2); } .sx-bd-quote > span { display:flex; flex-direction:column; min-width:0; }
  .sx-bd-quote b { font:900 13px var(--font-title); } .sx-bd-quote q { overflow-wrap:anywhere; font-style:italic; } .sx-bd-why { align-self:flex-start; }
  @media (hover:none) { .sx-bm-tools { display:none; } .sx-re { height:44px; padding:0 12px 0 6px; font-size:14px; } }
  @media (max-width:860px), (max-height:520px) {
    .sx-bd-cols { grid-template-columns:1fr; } .sx-bd-side { display:none; }
    .sx-bd-feed { height:clamp(380px, 68vh, 620px); } .sx-bd-scroll { padding:8px 10px 6px; }
    .sx-bm-body { max-width:86%; } .sx-bm-av { width:36px; }
    .sx-bd-send { width:46px; padding:0; justify-content:center; } .sx-bd-send span { display:none; }
    .sx-bd-err:not(:empty) + .sx-bd-hint { display:none; }   /* узко: ошибка вместо подсказки, не в два столбика */
    .sx-bs-card { grid-template-columns:44px minmax(0, 1fr) auto; gap:8px; padding:6px 10px 6px 6px; } .sx-bs-pic { width:44px; height:44px; }
  }
  @media (max-width:480px) { .sx-bd-report .sx-mbtns { flex-direction:column-reverse; } .sx-bd-report .sx-mbtns .btn { justify-content:center; } }   /* жалоба на телефоне: кнопки во всю ширину, «Отправить» сверху */
  @media (prefers-reduced-motion:reduce) { .sx-bm.fresh, .sx-bs.fresh, .sx-bd-mem, .sx-bd-fan span, .sx-bd-new.on, .sx-re.pop, .sx-rp, .sx-popov .sx-card, .sx-sheetov .sx-card { animation:none; } }
  .sx-calm .sx-bm.fresh, .sx-calm .sx-bs.fresh, .sx-calm .sx-bd-mem, .sx-calm .sx-bd-fan span, .sx-calm .sx-bd-new.on, .sx-calm .sx-re.pop, .sx-calm .sx-rp, .sx-calm.sx-ov .sx-card { animation:none; }   /* «Меньше движения: Выкл» */