/* ---------------------------------------------------------------- палитра */
/* Три режима: «как в Telegram» (переменные клиента), принудительно светлая
   и принудительно тёмная. Акцент можно переопределить своим цветом. */
:root{
  --bg:        var(--tg-theme-bg-color, #ffffff);
  --bg2:       var(--tg-theme-secondary-bg-color, #f1f3f6);
  --card:      var(--tg-theme-section-bg-color, #ffffff);
  --text:      var(--tg-theme-text-color, #0f1114);
  --hint:      var(--tg-theme-hint-color, #8b93a1);
  --accent:    var(--accent-user, var(--tg-theme-button-color, #3b82f6));
  --on-accent: var(--on-accent-user, var(--tg-theme-button-text-color, #ffffff));
  --sep:       color-mix(in srgb, var(--hint) 22%, transparent);
  --danger:    #e0525a;
  --warn:      #d59027;
  --ok:        #3aa76d;
  --radius: 18px;
  --shadow: 0 1px 2px rgba(0,0,0,.05), 0 8px 24px -12px rgba(0,0,0,.22);
  --pad: 16px;
  --bar: 62px;
  --card-pad: 14px;
  --card-gap: 10px;
  --fx-ink: #8fb8e0;      /* снег на светлом фоне — голубовато-серый */
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme]){
    --fx-ink:#eaf4ff;
    --bg:  var(--tg-theme-bg-color, #17212b);
    --bg2: var(--tg-theme-secondary-bg-color, #0e1621);
    --card:var(--tg-theme-section-bg-color, #1d2733);
    --text:var(--tg-theme-text-color, #f5f7fa);
    --hint:var(--tg-theme-hint-color, #8fa0b3);
    --danger:#f0757c;
    --warn:  #e5a94a;
    --ok:    #56c98d;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 28px -14px rgba(0,0,0,.8);
  }
}
:root[data-theme="light"]{
  --fx-ink:#8fb8e0;
  --bg:#ffffff; --bg2:#f1f3f6; --card:#ffffff;
  --text:#0f1114; --hint:#8b93a1;
  --accent:var(--accent-user, #3b82f6);
  --on-accent:var(--on-accent-user, #ffffff);
  --danger:#e0525a; --warn:#d59027; --ok:#3aa76d;
  --shadow: 0 1px 2px rgba(0,0,0,.05), 0 8px 24px -12px rgba(0,0,0,.22);
}
:root[data-theme="dark"]{
  --fx-ink:#eaf4ff;
  --bg:#17212b; --bg2:#0e1621; --card:#1d2733;
  --text:#f5f7fa; --hint:#8fa0b3;
  --accent:var(--accent-user, #4b8bf4);
  --on-accent:var(--on-accent-user, #ffffff);
  --danger:#f0757c; --warn:#e5a94a; --ok:#56c98d;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 28px -14px rgba(0,0,0,.8);
}

/* готовые темы: палитра целиком, акцент можно перебить своим */
:root[data-theme="midnight"]{
  --fx-ink:#eaf4ff;
  --bg:#000000; --bg2:#0b0b0f; --card:#131319;
  --text:#f3f3f7; --hint:#8b8b98;
  --accent:var(--accent-user, #5b8dff); --on-accent:var(--on-accent-user, #fff);
  --danger:#ff6b73; --warn:#e5a94a; --ok:#4fd18b;
  --shadow: 0 1px 2px rgba(0,0,0,.6), 0 10px 28px -14px rgba(0,0,0,1);
}
:root[data-theme="ocean"]{
  --fx-ink:#dff3fb;
  --bg:#0b1f2a; --bg2:#07161e; --card:#103042;
  --text:#e9f6fc; --hint:#7fa8ba;
  --accent:var(--accent-user, #24c3cb); --on-accent:var(--on-accent-user, #04222a);
  --danger:#ff7a84; --warn:#f0b45a; --ok:#4fd1a5;
  --shadow: 0 1px 2px rgba(0,0,0,.45), 0 10px 30px -14px rgba(0,20,30,.9);
}
:root[data-theme="sunset"]{
  --fx-ink:#ffe6ee;
  --bg:#1e1220; --bg2:#160d18; --card:#2b1a2d;
  --text:#fdeef3; --hint:#b790a7;
  --accent:var(--accent-user, #ff7a59); --on-accent:var(--on-accent-user, #2a1008);
  --danger:#ff6f8b; --warn:#ffb648; --ok:#5fd3a0;
  --shadow: 0 1px 2px rgba(0,0,0,.45), 0 10px 30px -14px rgba(30,5,25,.9);
}
:root[data-theme="forest"]{
  --fx-ink:#e6f6ec;
  --bg:#0f1b14; --bg2:#0a140f; --card:#17291e;
  --text:#eaf6ee; --hint:#8caa98;
  --accent:var(--accent-user, #40c078); --on-accent:var(--on-accent-user, #06200f);
  --danger:#ff7a84; --warn:#e8b45a; --ok:#57d68d;
  --shadow: 0 1px 2px rgba(0,0,0,.45), 0 10px 30px -14px rgba(0,20,10,.9);
}
:root[data-theme="sakura"]{
  --fx-ink:#e39ab8;
  --bg:#fff7fa; --bg2:#ffecf3; --card:#ffffff;
  --text:#2c1f26; --hint:#ab8b99;
  --accent:var(--accent-user, #ff6f9c); --on-accent:var(--on-accent-user, #fff);
  --danger:#e0526a; --warn:#d2913a; --ok:#3aa87a;
  --shadow: 0 1px 2px rgba(120,60,90,.07), 0 8px 24px -12px rgba(160,80,120,.28);
}
:root[data-theme="coffee"]{
  --fx-ink:#c2a683;
  --bg:#f8f3ea; --bg2:#efe5d6; --card:#fffdf9;
  --text:#2f2721; --hint:#9d8a77;
  --accent:var(--accent-user, #a9743f); --on-accent:var(--on-accent-user, #fff);
  --danger:#c0554e; --warn:#b78334; --ok:#5a8f5e;
  --shadow: 0 1px 2px rgba(90,70,40,.07), 0 8px 24px -12px rgba(110,80,45,.28);
}

/* размер текста */
:root[data-fs="s"]{ --fs:.92 }
:root[data-fs="l"]{ --fs:1.1 }
:root{ --fs:1 }
body{font-size:calc(15px * var(--fs))}
.subject{font-size:calc(16px * var(--fs))}
.dayhead h1{font-size:calc(23px * var(--fs))}
.chip{font-size:calc(12.5px * var(--fs))}
.news h3{font-size:calc(15.5px * var(--fs))}
.talk{font-size:calc(13.5px * var(--fs))}

/* плотный режим и выключенные анимации */
:root[data-compact="1"]{ --card-pad:10px; --card-gap:7px; --radius:15px }
:root[data-compact="1"] .subject{font-size:15px;margin-bottom:4px}
:root[data-compact="1"] .num{flex-basis:34px;height:34px;font-size:15px;border-radius:11px}
:root[data-compact="1"] .chip{padding:3px 7px;font-size:11.5px}
:root[data-motion="0"] *{animation:none !important;transition:none !important}

:root{
  --heart:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 21s-8.5-5.4-8.5-11.6A4.9 4.9 0 0 1 12 6.6a4.9 4.9 0 0 1 8.5 2.8C20.5 15.6 12 21 12 21z" fill="black"/></svg>');
  --petal:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2.4c4.6 3.8 7.6 7.9 7.6 11.8 0 4.3-3.4 7.4-7.6 7.4s-7.6-3.1-7.6-7.4c0-3.9 3-8 7.6-11.8z" fill="black"/></svg>');
  --leaf:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21 3C10.5 3 3 9.4 3 20.2c0 .5.4.8.9.8C14.4 21 21 14 21 3z" fill="black"/></svg>');
  --bucket:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4.6 5.2h14.8v3.2H4.6z" fill="black"/><path d="M6 9.4h12l-1.3 10.4a1.7 1.7 0 01-1.7 1.4H9a1.7 1.7 0 01-1.7-1.4z" fill="black"/></svg>');
  --lips:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 8.6c2.1-2.3 5.6-2.7 7.7-.8 1.4 1.3-1.7 2.1-2.5 2.7 1.2.2 2.7.6 3.1 1.5-1.5 2.7-4.8 4.8-8.3 4.8s-6.8-2.1-8.3-4.8c.4-.9 1.9-1.3 3.1-1.5-.8-.6-3.9-1.4-2.5-2.7 2.1-1.9 5.6-1.5 7.7.8z" fill="black"/></svg>');
  --money:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M2.4 6h19.2v12H2.4V6zm9.6 2.5a3.5 3.5 0 100 7 3.5 3.5 0 000-7z" fill="black"/></svg>');
  --crownm:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3.2 17.4 2 7.6l5.1 3.3L12 3.8l4.9 7.1L22 7.6l-1.2 9.8zM3.6 19.2h16.8v2H3.6z" fill="black"/></svg>');
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* атрибут hidden должен побеждать любые наши display-правила */
[hidden]{display:none !important}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--text);
  font:15px/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, system-ui, sans-serif;
  padding-bottom:calc(var(--bar) + 12px + env(safe-area-inset-bottom));
  overscroll-behavior-y:contain;
}
button,input,textarea,select{font:inherit;color:inherit}

.glow{
  position:fixed; inset:-40% 0 auto 0; height:340px; pointer-events:none; z-index:0;
  background:radial-gradient(60% 60% at 50% 40%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 70%);
  filter:blur(24px); opacity:.5;
}

/* ---------------------------------------------------------------- иконки */
.ic{
  width:1em;height:1em;flex:0 0 auto;display:block;
  fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
}
.ic-slot{display:inline-flex;align-items:center;justify-content:center;font-size:16px;line-height:0}
.ic-slot.big{font-size:22px;color:var(--hint)}
.ic-slot.tiny{font-size:13px}

/* --------------------------------------------------------- приветствие */
.hello{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  background:var(--bg);padding:32px 26px;
  transition:opacity .45s ease, visibility .45s;
}
.hello[hidden]{display:none}
.hello.gone{opacity:0;visibility:hidden;pointer-events:none}
.hello-inner{width:100%;max-width:360px;text-align:center;animation:helloUp .5s cubic-bezier(.2,.8,.25,1)}
@keyframes helloUp{from{opacity:0;transform:translateY(16px)}}
.hello-mark{
  width:66px;height:66px;margin:0 auto 20px;display:grid;place-items:center;
  border-radius:22px;color:var(--accent);font-size:32px;
  background:color-mix(in srgb, var(--accent) 13%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 24%, transparent);
}
.hello h1{margin:0 0 6px;font-size:26px;font-weight:760;letter-spacing:-.5px;line-height:1.2}
.hello p{margin:0;font-size:14px;color:var(--hint)}
.hello-form{margin-top:26px;text-align:left}
.hello-form[hidden]{display:none}
.hello-form label{display:block;margin-bottom:8px;font-size:13px;color:var(--hint)}
.hello-form .btn{margin-top:12px}

.field{
  width:100%;padding:13px 15px;border:0;border-radius:14px;
  background:var(--bg2);outline:none;
}
.field:focus{box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 45%, transparent)}

.chip-btn{
  margin-top:9px;padding:8px 13px;border:0;border-radius:999px;
  background:var(--bg2);color:var(--hint);font-size:13px;font-weight:640;cursor:pointer;
}
.chip-btn:active{transform:scale(.96)}
.chip-btn.small{margin:0;padding:7px 12px;font-size:12.5px;color:var(--accent);
  background:color-mix(in srgb, var(--accent) 13%, transparent)}
.chip-btn.wide{display:block;width:100%;margin-top:8px;text-align:center}

/* список групп внутри знакомства */
.hello-groups{
  max-height:38vh;overflow-y:auto;margin-top:10px;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:7px;
}
.hello-groups .spec{grid-column:1/-1;margin:8px 0 2px}
.hello-groups .empty-line{grid-column:1/-1;color:var(--hint);font-size:13px;padding:8px 2px}

/* ------------------------------------------------------------------ шапка */
.top{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:calc(10px + env(safe-area-inset-top)) var(--pad) 10px;
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
}
.group-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 11px 8px 10px; border:0; border-radius:999px;
  background:color-mix(in srgb, var(--accent) 13%, var(--card));
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 24%, transparent);
  font-weight:650; letter-spacing:.2px; cursor:pointer;
  transition:transform .15s ease;
}
.group-chip:active{transform:scale(.96)}
/* аватар: из Telegram, если есть, иначе инициал */
.ava{
  position:relative;flex:0 0 auto;display:grid;place-items:center;overflow:hidden;
  width:26px;height:26px;border-radius:50%;
  background:color-mix(in srgb, var(--accent) 22%, var(--bg2));
  color:var(--accent);font-size:12px;font-weight:800;line-height:1;
  box-shadow:0 0 0 1.5px color-mix(in srgb, var(--accent) 35%, transparent);
}
.ava .ini{font-style:normal;line-height:1;user-select:none}
/* фото ложится поверх буквы и проявляется только когда действительно загрузилось */
.ava img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  opacity:0;transition:opacity .18s ease;
}
.ava img.ok{opacity:1}
.ava.sm{width:26px;height:26px;font-size:12px}
.ava.md{width:34px;height:34px;font-size:13px}
.ava.lg{width:76px;height:76px;font-size:30px;box-shadow:0 0 0 2.5px color-mix(in srgb, var(--accent) 35%, transparent)}
.group-chip{padding-left:6px}
.group-chip .ic-slot{opacity:.55;font-size:15px}
.top-right{display:flex;gap:8px}
.icon-btn{
  position:relative; width:38px;height:38px;display:grid;place-items:center;
  border:0;border-radius:50%;background:var(--card);box-shadow:var(--shadow);cursor:pointer;
  color:var(--hint);font-size:19px;transition:transform .15s ease,color .2s;
}
.icon-btn:active{transform:scale(.9)}
.icon-btn.spin .ic{animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ------------------------------------------------------------- вкладки дней */
.tabs{
  position:relative; z-index:10;
  display:flex; gap:8px; overflow-x:auto; scrollbar-width:none;
  padding:4px var(--pad) 12px;
}
.tabs::-webkit-scrollbar{display:none}
.tab{
  flex:0 0 auto; min-width:66px; padding:8px 12px; border:0; border-radius:14px;
  background:var(--card); box-shadow:var(--shadow); cursor:pointer; text-align:center;
  transition:transform .18s cubic-bezier(.2,.9,.3,1.3), background .2s, color .2s;
}
.tab b{display:block;font-size:15px;font-weight:700;letter-spacing:.2px}
.tab i{display:block;font-size:11px;font-style:normal;opacity:.6;margin-top:1px;text-transform:lowercase}
.tab .pill{display:inline-block;margin-top:4px;font-size:10px;opacity:.7}
.tab.today{box-shadow:var(--shadow), inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 50%, transparent)}
.tab.on{background:var(--accent);color:var(--on-accent);transform:translateY(-2px) scale(1.03)}
.tab.on i,.tab.on .pill{opacity:.85}
.tab:active{transform:scale(.94)}

/* --------------------------------------------------------------- контент */
.page{position:relative;z-index:1}
.page[hidden]{display:none}
main{padding:0 var(--pad)}

.dayhead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:2px 0 14px}
.dayhead h1{margin:0;font-size:23px;line-height:1.15;font-weight:760;letter-spacing:-.3px}
.dayhead span{font-size:12px;color:var(--hint);white-space:nowrap}
.badge-rel{
  display:inline-block;margin-left:8px;padding:3px 9px;border-radius:999px;
  font-size:11px;font-weight:700;vertical-align:middle;
  background:color-mix(in srgb, var(--accent) 15%, transparent); color:var(--accent);
}

.talk{
  display:flex;align-items:center;gap:9px;margin:0 0 14px;padding:12px 14px;
  border-radius:var(--radius); background:var(--bg2); font-size:13.5px;
}
.talk .ic-slot{color:var(--hint)}
.talk b{font-weight:650}
.talk .room{margin-left:auto;font-weight:700;color:var(--accent);white-space:nowrap}

.card{
  position:relative; display:flex; gap:12px;
  margin-bottom:var(--card-gap); padding:var(--card-pad);
  border-radius:var(--radius); background:var(--card); box-shadow:var(--shadow);
  animation:rise .38s cubic-bezier(.2,.8,.25,1) backwards;
}
@keyframes rise{from{opacity:0;transform:translateY(14px) scale(.985)}}
.card.now{box-shadow:var(--shadow), inset 0 0 0 1.5px var(--accent)}
.card.now::after{
  content:"сейчас"; position:absolute; top:-8px; right:12px;
  padding:2px 8px; border-radius:999px; font-size:10px; font-weight:800; letter-spacing:.4px;
  background:var(--accent); color:var(--on-accent);
  animation:pulse 2.2s ease-out infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 50%, transparent)}
  70%{box-shadow:0 0 0 10px transparent}
  100%{box-shadow:0 0 0 0 transparent}
}
.num{
  flex:0 0 42px; height:42px; display:grid; place-items:center;
  border-radius:13px; font-size:17px; font-weight:800;
  background:color-mix(in srgb, var(--accent) 11%, transparent); color:var(--accent);
}
.card.done{opacity:.72}
.card.done .num{background:var(--bg2);color:var(--hint)}
.body{min-width:0;flex:1}
.subject{margin:1px 0 6px;font-size:16px;font-weight:680;line-height:1.25;letter-spacing:-.1px;word-break:break-word}
.meta{display:flex;flex-wrap:wrap;gap:6px}
.chip{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 9px;border-radius:9px;font-size:12.5px;background:var(--bg2);color:var(--hint);
}
.chip .ic{opacity:.85}
.chip.time{font-variant-numeric:tabular-nums;font-weight:640;color:var(--text)}
.chip.room{background:color-mix(in srgb, var(--accent) 13%, transparent);color:var(--accent);font-weight:700}

.gap{
  margin:6px 0 14px; padding:8px 12px; border-radius:12px;
  border:1px dashed var(--sep); color:var(--hint); font-size:12.5px; text-align:center;
}

.empty{padding:48px 20px;text-align:center;color:var(--hint);animation:rise .4s ease backwards}
.empty .ic-slot{font-size:40px;color:var(--sep);margin-bottom:14px;justify-content:center}
.empty b{display:block;color:var(--text);font-size:17px;margin-bottom:4px}

/* --------------------------------------------------- панель и сегменты */
.panel{margin-bottom:12px;padding:14px;border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow)}
.panel-head{display:flex;align-items:center;gap:10px;margin-bottom:11px}
.panel-head .ic-slot{font-size:20px;color:var(--accent)}
.panel-head b{display:block;font-size:14.5px;font-weight:700}
.panel-head i{display:block;font-style:normal;font-size:12px;color:var(--hint);margin-top:1px}

.seg{display:flex;gap:4px;padding:4px;border-radius:14px;background:var(--bg2)}
.seg.thin{margin-bottom:12px}
.seg button{
  flex:1;padding:9px 8px;border:0;border-radius:11px;background:transparent;
  font-size:13px;font-weight:650;color:var(--hint);cursor:pointer;transition:.2s;
}
.seg button.on{background:var(--card);color:var(--text);box-shadow:var(--shadow)}

/* ------------------------------------------------------------- новости */
.news{
  position:relative;margin-bottom:10px;padding:14px;border-radius:var(--radius);
  background:var(--card);box-shadow:var(--shadow);
  animation:rise .35s cubic-bezier(.2,.8,.25,1) backwards;
}
.news-top{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.news.has-drop .news-top{padding-right:30px}
.kind{
  display:inline-flex;align-items:center;gap:5px;padding:3px 9px 3px 7px;border-radius:999px;
  font-size:11px;font-weight:750;letter-spacing:.3px;
}
.kind .ic{font-size:12px}
.kind.new{background:color-mix(in srgb, var(--ok) 16%, transparent);color:var(--ok)}
.kind.changed{background:color-mix(in srgb, var(--warn) 18%, transparent);color:var(--warn)}
.kind.manual{background:color-mix(in srgb, var(--danger) 16%, transparent);color:var(--danger)}
.news-top .when{margin-left:auto;font-size:11.5px;color:var(--hint);white-space:nowrap}
.news h3{margin:2px 0 2px;font-size:15.5px;font-weight:700;letter-spacing:-.1px}
.news .where{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--hint);margin-bottom:8px}
.news .where b{color:var(--accent)}
.news .goto{
  display:flex;align-items:center;justify-content:center;gap:7px;
  width:100%;margin-top:10px;padding:10px;border:0;border-radius:12px;
  background:color-mix(in srgb, var(--accent) 12%, transparent);color:var(--accent);
  font-size:13.5px;font-weight:700;cursor:pointer;
}
.news .goto:active{transform:scale(.98)}
.news .drop{
  position:absolute;top:10px;right:10px;width:28px;height:28px;
  display:grid;place-items:center;border:0;border-radius:50%;
  background:var(--bg2);color:var(--hint);font-size:14px;cursor:pointer;
}

.dl{display:flex;gap:9px;padding:7px 0;border-top:1px solid var(--sep);font-size:13.5px}
.dl:first-of-type{border-top:0}
.dl .mark{flex:0 0 20px;display:grid;place-items:center;font-size:14px;padding-top:2px}
.dl.added .mark{color:var(--ok)}
.dl.removed .mark{color:var(--danger)}
.dl.changed .mark{color:var(--warn)}
.dl .what{min-width:0;flex:1}
.dl .pnum{font-weight:750;margin-right:4px;color:var(--hint)}
.dl .was{color:var(--hint);text-decoration:line-through}
.dl .now{font-weight:640}
.dl .ln{display:flex;align-items:baseline;gap:5px}
.dl .ln.to{margin-top:2px;color:var(--warn)}
.dl .ln.to .ic{font-size:12px;flex:0 0 auto;align-self:center}
.dl .ln.to .now{color:var(--text)}

/* --------------------------------------------------------------- админ */
.astrip{
  display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:12px;
  padding:12px 8px;border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow);
}
.astrip div{text-align:center;min-width:0}
.astrip b{display:block;font-size:19px;font-weight:800;letter-spacing:-.5px;line-height:1.1}
.astrip i{font-style:normal;font-size:10px;color:var(--hint);line-height:1.2;display:block;margin-top:2px}

label.mini,p.mini{
  display:block;margin:2px 2px 6px;font-size:11.5px;font-weight:700;
  letter-spacing:.4px;text-transform:uppercase;color:var(--hint);
}
p.mini{text-transform:none;font-weight:400;letter-spacing:0;font-size:12px;margin-bottom:10px}

/* превью сообщения — как оно придёт в Telegram */
.preview{
  margin:2px 0 10px;padding:12px 14px;border-radius:14px;
  background:var(--bg2);border-left:3px solid var(--accent);
}
.pv-head{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:800;color:var(--accent);margin-bottom:6px}
.pv-body{font-size:14px;line-height:1.4;white-space:pre-wrap;word-break:break-word}
.pv-body i{color:var(--hint)}
.pv-sign{margin-top:8px;padding-top:7px;border-top:1px solid var(--sep);font-size:12px;color:var(--hint);font-style:italic}

.hist{
  position:relative;padding:10px 40px 10px 0;border-bottom:1px solid var(--sep);
}
.hist:last-child{border-bottom:0}
.hist b{display:block;font-size:13.5px;font-weight:640;line-height:1.35}
.hist i{font-style:normal;font-size:11.5px;color:var(--hint)}
.hist .drop{position:absolute;top:8px;right:0}

.danger-zone{box-shadow:var(--shadow), inset 0 0 0 1px color-mix(in srgb, var(--danger) 30%, transparent)}
.danger-zone h3 .ic-slot{color:var(--danger)}

.astat{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:12px}
.astat div{padding:14px;border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow)}
.astat b{display:block;font-size:24px;font-weight:800;letter-spacing:-.5px;line-height:1.1}
.astat i{font-style:normal;font-size:12px;color:var(--hint)}

.block{margin-bottom:12px;padding:14px;border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow)}
.block h3{display:flex;align-items:center;gap:8px;margin:0 0 11px;font-size:15px;font-weight:720}
.block h3 .ic-slot{font-size:17px;color:var(--accent)}
.block .row{display:flex;gap:8px;font-size:13px;padding:5px 0;color:var(--hint)}
.block .row b{margin-left:auto;color:var(--text);font-weight:640;text-align:right}

.ulist{max-height:340px;overflow-y:auto;margin:0 -4px}
.uitem{
  display:flex;align-items:center;gap:10px;width:100%;padding:9px 6px;
  border:0;border-bottom:1px solid var(--sep);background:transparent;
  text-align:left;cursor:pointer;
}
.uitem:last-child{border-bottom:0}
.uitem:active{background:var(--bg2)}
.uinfo{min-width:0;flex:1}
.uinfo b{display:block;font-size:13.5px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.uinfo i{display:block;font-style:normal;font-size:11.5px;color:var(--hint)}
.utags{display:flex;gap:3px;flex:0 0 auto;color:var(--hint);font-size:12px}
.utags .on{color:var(--accent)}

textarea, select{
  width:100%;padding:11px 13px;border:0;border-radius:13px;
  background:var(--bg2);outline:none;resize:vertical;
}
textarea{min-height:84px;margin-bottom:10px;line-height:1.4}
select{margin-bottom:10px;appearance:none}
select[hidden]{display:none}
.btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;padding:13px;border:0;border-radius:14px;
  background:var(--accent);color:var(--on-accent);
  font-size:15px;font-weight:700;cursor:pointer;transition:transform .15s ease,opacity .2s;
}
.btn:active{transform:scale(.98)}
.btn[disabled]{opacity:.55}
.btn.ghost{background:var(--bg2);color:var(--text)}
.btn.danger{background:var(--danger);color:#fff}
.btn + .btn{margin-top:8px}

/* ------------------------------------------------------------- таб-бар */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  display:flex;
  padding:6px 8px calc(6px + env(safe-area-inset-bottom));
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-top:1px solid var(--sep);
}
.tabbar button{
  position:relative;flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:6px 1px;border:0;background:transparent;color:var(--hint);cursor:pointer;
  font-size:10px;font-weight:640;white-space:nowrap;letter-spacing:-.1px;
  transition:color .2s,transform .15s ease;
}
.tabbar button span{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.tabbar.six button{font-size:9px;letter-spacing:-.3px;padding-left:0;padding-right:0}
.tabbar.six button .ic{font-size:19px;width:19px;height:19px}
.tabbar.seven button{font-size:8.5px;letter-spacing:-.4px;padding-left:0;padding-right:0;gap:2px}
.tabbar.seven button .ic{font-size:18px;width:18px;height:18px}
.tabbar.seven .count{right:calc(50% - 18px)}
.tabbar button[hidden]{display:none}
.tabbar button .ic{font-size:21px;width:21px;height:21px}
.tabbar button.on{color:var(--accent)}
.tabbar button:active{transform:scale(.92)}
.tabbar .count{
  position:absolute;top:2px;right:calc(50% - 22px);
  min-width:16px;height:16px;padding:0 4px;border-radius:9px;
  background:var(--danger);color:#fff;font-size:10px;font-style:normal;font-weight:800;
  display:grid;place-items:center;
}
.tabbar .count[hidden]{display:none}

/* ---------------------------------------------------------------- шторки */
.sheet-wrap{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end}
.sheet-wrap[hidden]{display:none}
.backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45);animation:fade .25s ease}
@keyframes fade{from{opacity:0}}
.sheet{
  position:relative;width:100%;max-height:86vh;display:flex;flex-direction:column;
  background:var(--bg);border-radius:22px 22px 0 0;
  padding:8px var(--pad) calc(14px + env(safe-area-inset-bottom));
  animation:up .32s cubic-bezier(.2,.9,.25,1);
}
@keyframes up{from{transform:translateY(100%)}}
.grabber{width:38px;height:4px;border-radius:2px;background:var(--sep);margin:2px auto 10px}
.sheet h2{margin:0 0 4px;font-size:18px;font-weight:720}
.sheet .sub{margin:0 0 10px;font-size:12.5px;color:var(--hint)}
.search{
  width:100%;padding:11px 14px;margin-bottom:10px;border:0;border-radius:13px;
  background:var(--bg2);outline:none;
}
.sheet-body{overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:6px}

.spec{margin:14px 0 7px;font-size:11.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--hint)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:8px}
.gitem{
  padding:11px 8px;border:0;border-radius:13px;background:var(--bg2);
  font-size:13.5px;font-weight:650;cursor:pointer;transition:transform .15s ease;
}
.gitem:active{transform:scale(.94)}
.gitem.on{background:var(--accent);color:var(--on-accent)}

.switch-row,.row-line{display:flex;align-items:center;gap:12px;padding:12px 4px;border-bottom:1px solid var(--sep)}
.row-line{border-bottom:0}
.switch-row.locked{opacity:.5}
.switch-row .txt,.row-line .txt{flex:1;display:flex;flex-direction:column;min-width:0}
.switch-row .txt i,.row-line .txt i{font-style:normal;font-size:12px;color:var(--hint)}
.switch input{position:absolute;opacity:0;pointer-events:none}
.switch .track{
  display:block;width:46px;height:28px;border-radius:999px;background:var(--sep);
  position:relative;transition:background .22s ease;
}
.switch .track::after{
  content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .22s cubic-bezier(.3,1.4,.5,1);
}
.switch input:checked + .track{background:var(--ok)}
.switch input:checked + .track::after{transform:translateX(18px)}
.note{font-size:12px;color:var(--hint);margin:12px 4px 0}

.group-title{
  margin:18px 4px 6px;font-size:11.5px;font-weight:750;letter-spacing:.6px;
  text-transform:uppercase;color:var(--hint);
}
.group-title:first-child{margin-top:4px}
.row-line.tight{padding-bottom:4px}

/* ---------------------------------------------------------- эффекты фона */
/* Частицы рисуются CSS-фигурами: снежинка — мягкий круг с бликом,
   звезда и сердце — SVG-маски. Ни одного эмодзи. */
.fx{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.fx i{
  position:absolute;top:-8vh;display:block;
  animation:fxfall var(--dur,12s) linear var(--delay,0s) infinite;
  will-change:transform;
}
.fx i b{
  display:block;width:var(--size,7px);height:var(--size,7px);
  animation:fxsway calc(var(--dur,12s) / 3.5) ease-in-out var(--delay,0s) infinite alternate;
}
@keyframes fxfall{
  0%{transform:translate3d(0,-8vh,0);opacity:0}
  6%{opacity:var(--o,.8)}
  92%{opacity:var(--o,.8)}
  100%{transform:translate3d(var(--drift,0px),112vh,0);opacity:0}
}
@keyframes fxsway{
  from{transform:translateX(-9px) rotate(-12deg)}
  to{transform:translateX(9px) rotate(12deg)}
}

/* снег — круглая снежинка с бликом и лёгким ореолом */
.fx-snow i b{
  border-radius:50%;
  background:radial-gradient(circle at 34% 32%,
    color-mix(in srgb, var(--fx-ink) 30%, #fff) 0%,
    var(--fx-ink) 46%,
    color-mix(in srgb, var(--fx-ink) 80%, transparent) 72%,
    transparent 74%);
  box-shadow:0 0 6px color-mix(in srgb, var(--fx-ink) 55%, transparent);
}

/* звёзды — четырёхлучевая искра */
.fx-stars i b{
  background:linear-gradient(160deg,#fff3c4,#ffd166);
  clip-path:polygon(50% 0%,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0% 50%,42% 42%);
  filter:drop-shadow(0 0 5px rgba(255,180,60,.85));
  animation-name:fxsway,fxtwinkle;
  animation-duration:calc(var(--dur,12s) / 3.5), 2.4s;
  animation-iteration-count:infinite,infinite;
  animation-direction:alternate,alternate;
  animation-timing-function:ease-in-out,ease-in-out;
}
@keyframes fxtwinkle{from{opacity:.45}to{opacity:1}}

/* сердечки — настоящая форма через маску */
.fx-hearts i b{
  background:linear-gradient(150deg,#ff9ec2,#ff5f97);
  -webkit-mask:var(--heart) center/contain no-repeat;
  mask:var(--heart) center/contain no-repeat;
  filter:drop-shadow(0 0 5px rgba(255,110,160,.55));
}

/* лепестки сакуры — кувыркаются, а не просто падают */
.fx-petals i b{
  background:linear-gradient(150deg,#ffd7e6,#ff8fb8);
  -webkit-mask:var(--petal) center/contain no-repeat;
  mask:var(--petal) center/contain no-repeat;
  filter:drop-shadow(0 0 4px rgba(255,150,190,.45));
  animation-name:fxtumble;
}
@keyframes fxtumble{
  from{transform:translateX(-11px) rotate(-40deg) scaleX(.75)}
  to{transform:translateX(11px) rotate(50deg) scaleX(1)}
}

/* листья — переворачиваются на лету */
.fx-leaves i b{
  background:linear-gradient(150deg,#8fd6a3,#3f9a5f);
  -webkit-mask:var(--leaf) center/contain no-repeat;
  mask:var(--leaf) center/contain no-repeat;
  filter:drop-shadow(0 0 4px rgba(70,160,100,.4));
  animation-name:fxtumble;
}

/* угольки заката — тёплые точки со свечением */
.fx-embers i b{
  border-radius:50%;
  background:radial-gradient(circle at 40% 40%, #fff0d8, #ff9d5c 55%, #ff6b3d 80%);
  box-shadow:0 0 8px rgba(255,140,80,.75);
}

/* кофейные зёрна */
.fx-beans i b{
  border-radius:50% / 42%;
  background:linear-gradient(135deg,#a9743f,#6f4522);
  box-shadow:inset 0 0 0 1px rgba(255,235,210,.28);
  animation-name:fxtumble;
}
.fx-beans i b{transform-origin:center}

/* пузыри — поднимаются снизу */
.fx-bubbles i{
  top:auto;bottom:-8vh;
  animation-name:fxrise;
}
.fx-bubbles i b{
  border-radius:50%;background:transparent;
  box-shadow:inset 0 0 0 1.2px color-mix(in srgb, var(--accent) 60%, transparent),
             inset -2px -3px 4px -2px #fff;
}
@keyframes fxrise{
  0%{transform:translate3d(0,8vh,0);opacity:0}
  8%{opacity:var(--o,.7)}
  90%{opacity:var(--o,.7)}
  100%{transform:translate3d(var(--drift,0px),-112vh,0);opacity:0}
}

/* выбор эффекта: в кнопке живая мини-частица, а не символ */
.fx-row{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;padding:4px 4px 10px}
.fx-item{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:11px 4px;border:0;border-radius:14px;background:var(--bg2);
  color:var(--text);cursor:pointer;transition:transform .15s ease;
}
.fx-item span{font-size:11px;color:var(--hint)}
.fx-item:active{transform:scale(.95)}
.fx-item.on{
  background:color-mix(in srgb, var(--accent) 14%, transparent);
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 45%, transparent);
}
.fx-item.on span{color:var(--accent)}
.fx-dot{width:16px;height:16px;display:block}
.fx-dot.none{border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--hint);opacity:.5}
.fx-dot.snow{border-radius:50%;background:radial-gradient(circle at 34% 32%,color-mix(in srgb, var(--fx-ink) 30%, #fff),var(--fx-ink) 55%,color-mix(in srgb, var(--fx-ink) 80%, transparent) 85%)}
.fx-dot.stars{background:linear-gradient(160deg,#fff3c4,#ffd166);
  clip-path:polygon(50% 0%,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0% 50%,42% 42%)}
.fx-dot.hearts{background:linear-gradient(150deg,#ff9ec2,#ff5f97);
  -webkit-mask:var(--heart) center/contain no-repeat;mask:var(--heart) center/contain no-repeat}
.fx-dot.petals{background:linear-gradient(150deg,#ffd7e6,#ff8fb8);
  -webkit-mask:var(--petal) center/contain no-repeat;mask:var(--petal) center/contain no-repeat}
.fx-dot.leaves{background:linear-gradient(150deg,#8fd6a3,#3f9a5f);
  -webkit-mask:var(--leaf) center/contain no-repeat;mask:var(--leaf) center/contain no-repeat}
.fx-dot.embers{border-radius:50%;background:radial-gradient(circle at 40% 40%,#fff0d8,#ff9d5c 55%,#ff6b3d 85%)}
.fx-dot.beans{border-radius:50% / 42%;background:linear-gradient(135deg,#a9743f,#6f4522)}
.fx-dot.theme{border-radius:50%;background:conic-gradient(#ff8fb8,#8fd6a3,#ffd166,#9ec9ff,#ff8fb8)}
.fx-dot.bubbles{border-radius:50%;box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 70%, transparent)}

/* карточки тем */
.themes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:4px 4px 10px}
.theme-card{
  display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:11px 4px;border:0;border-radius:14px;background:var(--bg2);
  color:var(--text);cursor:pointer;transition:transform .15s ease;
}
.theme-card:active{transform:scale(.95)}
.theme-card span{font-size:11px;color:var(--hint);line-height:1.2;text-align:center}
.theme-card.on{box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 55%, transparent)}
.theme-card.on span{color:var(--accent)}
.tprev{
  width:34px;height:34px;border-radius:50%;position:relative;overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(127,127,127,.35);
}
.tprev::after{
  content:"";position:absolute;right:3px;bottom:3px;width:13px;height:13px;border-radius:50%;
  background:var(--tp-accent);
}

.ulist.tall{max-height:460px}

.swatches{display:flex;flex-wrap:wrap;gap:9px;padding:4px 4px 10px}
.sw{
  width:32px;height:32px;border:0;border-radius:50%;cursor:pointer;position:relative;
  box-shadow:inset 0 0 0 1px rgba(127,127,127,.3);transition:transform .15s ease;
}
.sw:active{transform:scale(.9)}
.sw.on::after{
  content:"";position:absolute;inset:-4px;border-radius:50%;
  box-shadow:0 0 0 2px currentColor;
}
.sw.auto{background:conic-gradient(#3b82f6,#22c55e,#f59e0b,#ec4899,#3b82f6);color:var(--text)}

/* ---------------------------------------------------------------- время */
.timer-wrap{display:flex;flex-direction:column;align-items:center;padding:6px 0 2px}

.ring-box{position:relative;width:min(74vw,268px);aspect-ratio:1;margin:4px 0 6px}
.ring{width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.ring circle{fill:none;stroke-linecap:round}
.ring .track{stroke:var(--bg2);stroke-width:12}
.ring .fill{
  stroke:var(--accent);stroke-width:12;
  transition:stroke-dashoffset 1s linear, stroke .4s ease;
  filter:drop-shadow(0 0 10px color-mix(in srgb, var(--accent) 45%, transparent));
}
.ring-box.break .fill{stroke:var(--warn);filter:drop-shadow(0 0 10px color-mix(in srgb, var(--warn) 45%, transparent))}
.ring-box.idle  .fill{stroke:var(--hint);filter:none}

/* мягкое дыхание, пока пара идёт */
.ring-box.live::before{
  content:"";position:absolute;inset:14%;border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb, var(--accent) 20%, transparent), transparent 70%);
  animation:breathe 3.4s ease-in-out infinite;pointer-events:none;
}
@keyframes breathe{0%,100%{opacity:.35;transform:scale(.94)}50%{opacity:.8;transform:scale(1.04)}}

.ring-face{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:4px;text-align:center;padding:0 14%;
}
.ring-face .big{
  font-size:clamp(38px,13vw,52px);font-weight:800;letter-spacing:-2px;line-height:1;
  font-variant-numeric:tabular-nums;
}
.ring-face .cap{font-size:12.5px;color:var(--hint);line-height:1.25}
.ring-face .pairno{
  margin-bottom:2px;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:800;
  background:color-mix(in srgb, var(--accent) 14%, transparent);color:var(--accent);
}
.ring-box.break .ring-face .pairno{background:color-mix(in srgb, var(--warn) 16%, transparent);color:var(--warn)}

.now-card{
  width:100%;display:flex;gap:12px;padding:14px;margin-top:2px;
  border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow);
  animation:rise .4s cubic-bezier(.2,.8,.25,1) backwards;
}
.now-card .label{
  font-size:10.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
  color:var(--hint);margin-bottom:3px;
}
.now-card h4{margin:0 0 6px;font-size:16px;font-weight:700;line-height:1.25;letter-spacing:-.1px}

/* лента дня */
.strip{width:100%;margin:14px 0 4px}
.strip-head{display:flex;justify-content:space-between;font-size:11.5px;color:var(--hint);margin-bottom:6px}
.strip-bar{position:relative;display:flex;gap:4px;height:34px}
/* тонкая нить сквозь перемены — вместо мутного фона во всю полосу */
.strip-bar::before{
  content:"";position:absolute;left:2px;right:2px;top:50%;height:2px;
  transform:translateY(-50%);border-radius:2px;background:var(--sep);
}
.tseg{
  position:relative;z-index:1;display:grid;place-items:center;
  font-size:11px;font-weight:750;transition:background .3s, color .3s;
}
.tseg.pair{
  border-radius:10px;background:var(--bg2);color:var(--hint);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
}
.tseg.pair.past{box-shadow:none;opacity:.6}
.tseg.pair.live{
  background:var(--accent);color:var(--on-accent);
  box-shadow:0 2px 10px -3px color-mix(in srgb, var(--accent) 70%, transparent);
}
.tseg.rest{background:transparent}
.strip-now{
  position:absolute;z-index:2;top:-4px;bottom:-4px;width:2px;border-radius:2px;
  background:var(--text);box-shadow:0 0 0 3px var(--bg);
  transition:left 1s linear;
}
.strip-now::after{
  content:"";position:absolute;top:-4px;left:-3px;width:8px;height:8px;
  border-radius:50%;background:var(--text);
}

/* -------------------------------------------------------------- магазин */
.sheet.tall{max-height:92vh}

.shop-card{
  position:relative;display:grid;grid-template-columns:1fr auto;
  align-items:center;gap:8px 12px;
  padding:12px 14px;margin-bottom:9px;border-radius:16px;
  background:var(--card);box-shadow:var(--shadow);
}
.shop-card .badge-wrap{min-width:0}
.shop-card .side{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.shop-card .price{
  display:inline-flex;align-items:center;gap:4px;
  font-size:14px;font-weight:800;font-variant-numeric:tabular-nums;
}
.shop-card .rar{
  font-size:10px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;
}
.rar.common{color:var(--hint)}
.rar.rare{color:#4b8bf4}
.rar.epic{color:#a855f7}
.rar.legend{color:#ffb020}
.shop-card.legend{box-shadow:var(--shadow), inset 0 0 0 1.5px color-mix(in srgb,#ffb020 40%,transparent)}
.shop-card.epic{box-shadow:var(--shadow), inset 0 0 0 1.5px color-mix(in srgb,#a855f7 32%,transparent)}
.shop-card .note{grid-column:1/-1;margin:0;font-size:11.5px;color:var(--hint)}
.shop-buy{
  padding:7px 13px;border:0;border-radius:11px;cursor:pointer;
  background:var(--accent);color:var(--on-accent);font-size:13px;font-weight:750;
}
.shop-buy:active{transform:scale(.96)}
.shop-buy.owned{background:color-mix(in srgb, var(--ok) 18%, transparent);color:var(--ok)}
.shop-buy.worn{background:var(--bg2);color:var(--hint)}
.shop-buy[disabled]{opacity:.6}

.gift-row{
  display:flex;align-items:center;gap:10px;padding:8px 0;
  border-bottom:1px solid var(--sep);
}
.gift-row:last-child{border-bottom:0}
.gift-row .side{margin-left:auto;display:flex;align-items:center;gap:8px}
.gift-row .price{font-size:12px;color:var(--hint);white-space:nowrap}

.shop-open{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;margin-top:8px;padding:13px;border:0;border-radius:14px;cursor:pointer;
  background:linear-gradient(135deg,
    color-mix(in srgb,#ffb020 26%,transparent), color-mix(in srgb,#ff7a3d 16%,transparent));
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb,#ffb020 40%,transparent);
  color:#ffb020;font-size:15px;font-weight:750;
}
.shop-open:active{transform:scale(.98)}

/* --------------------------------------------------------------- профиль */
.prof-card{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:22px 16px 18px;margin-bottom:12px;
  border-radius:22px;background:var(--card);box-shadow:var(--shadow);
}
.prof-card h2{margin:2px 0 0;font-size:20px;font-weight:750;letter-spacing:-.3px;text-align:center}
.prof-card .sub{margin:0;font-size:13px;color:var(--hint)}
.uid-badge{
  display:inline-flex;align-items:center;gap:6px;margin-top:2px;
  padding:5px 12px;border-radius:999px;font-size:12.5px;font-weight:750;
  font-variant-numeric:tabular-nums;
  background:color-mix(in srgb, var(--accent) 13%, transparent);color:var(--accent);
}
.bio-line{
  display:inline-flex;align-items:center;gap:7px;max-width:100%;
  margin-top:2px;padding:7px 13px;border:0;border-radius:14px;
  background:var(--bg2);color:var(--text);
  font-size:13.5px;font-style:italic;line-height:1.3;cursor:pointer;
  transition:transform .15s ease;
}
.bio-line:active{transform:scale(.97)}
.bio-line.empty{color:var(--hint);font-style:normal}
.bio-line .ic{opacity:.5;flex:0 0 auto}

/* админская подпись: красная, с искрами */
.bio-line.admin,
.bio-item.admin{
  --tag:#ff7a55;                 /* цвет искр вокруг бейджа */
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,
    color-mix(in srgb, #ff3b47 22%, transparent),
    color-mix(in srgb, #ff8a3d 16%, transparent));
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb, #ff3b47 45%, transparent),
             0 4px 18px -8px color-mix(in srgb, #ff3b47 70%, transparent);
  color:#ff5560;font-style:normal;font-weight:800;letter-spacing:1.4px;
  text-transform:uppercase;
}
.bio-line.admin .ic,
.bio-item.admin .ic{color:#ff5560;opacity:.9}

/* сами частички: несколько точек, всплывающих вверх */
@keyframes spark{
  0%{opacity:0;transform:translateY(0) scale(.6)}
  15%{opacity:.95}
  70%{opacity:.5}
  100%{opacity:0;transform:translateY(-26px) scale(1.1)}
}

/* личная подпись: розовая, с сердечками */
.bio-line.secret,
.bio-item.secret{
  --tag:#ff7ab5;
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,
    color-mix(in srgb, #ff5fa2 24%, transparent),
    color-mix(in srgb, #ff9ecb 16%, transparent));
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb, #ff5fa2 45%, transparent),
             0 4px 18px -8px color-mix(in srgb, #ff5fa2 70%, transparent);
  color:#ff7ab5;font-style:normal;font-weight:750;
}
.bio-line.secret .ic,
.bio-item.secret .ic{color:#ff7ab5}

@keyframes heart{
  0%{opacity:0;transform:translateY(0) rotate(-8deg) scale(.7)}
  20%{opacity:.95}
  70%{opacity:.6}
  100%{opacity:0;transform:translateY(-30px) rotate(10deg) scale(1.15)}
}

/* выданный админом тег: цвет задаёт админ */
.bio-line.tagged,
.bio-item.tagged{
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,
    color-mix(in srgb, var(--tag) 26%, transparent),
    color-mix(in srgb, var(--tag) 14%, transparent));
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--tag) 50%, transparent),
             0 4px 18px -8px color-mix(in srgb, var(--tag) 70%, transparent);
  color:var(--tag);font-style:normal;font-weight:750;
}
.bio-line.tagged .ic,.bio-item.tagged .ic{color:var(--tag)}
/* Частицы бейджа. Форма задаётся вторым классом, цвет — переменной --tag. */
.bp{
  position:absolute;bottom:-5px;opacity:0;pointer-events:none;
  animation:spark 2.8s linear infinite;
}
.bp.spark{border-radius:50%;background:var(--tag)}
.bp.snow{
  border-radius:50%;
  background:radial-gradient(circle at 34% 32%,#ffffff,#eaf4ff 45%,#bcd8f5 78%,transparent 80%);
}
.bp.heart{
  background:linear-gradient(150deg,#ffa8cd,#ff5f97);
  -webkit-mask:var(--heart) center/contain no-repeat;mask:var(--heart) center/contain no-repeat;
}
.bp.star{
  background:linear-gradient(160deg,#fff3c4,#ffd166);
  clip-path:polygon(50% 0%,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0% 50%,42% 42%);
}
.bp.petal{
  background:linear-gradient(150deg,#ffd7e6,#ff8fb8);
  -webkit-mask:var(--petal) center/contain no-repeat;mask:var(--petal) center/contain no-repeat;
}
.bp.leaf{
  background:linear-gradient(150deg,#8fd6a3,#3f9a5f);
  -webkit-mask:var(--leaf) center/contain no-repeat;mask:var(--leaf) center/contain no-repeat;
}
.bp.ember{
  border-radius:50%;
  background:radial-gradient(circle at 40% 40%,#fff0d8,#ff9d5c 55%,#ff6b3d 85%);
}

/* ведро КФС */
.bp.kfc{
  background:linear-gradient(150deg,#ff5a63,#c8001f);
  -webkit-mask:var(--bucket) center/contain no-repeat;mask:var(--bucket) center/contain no-repeat;
}
/* «1000-7» — текстовая частица */
.bp.num{
  width:auto !important;height:auto !important;
  font-size:8px;font-weight:800;letter-spacing:-.3px;line-height:1;
  color:#e8e8ef;text-shadow:0 0 5px rgba(0,0,0,.8);white-space:nowrap;
}
/* серая пыль */
.bp.ash{
  border-radius:50%;
  background:radial-gradient(circle at 36% 34%,#dfe4ea,#93a1b0 60%,rgba(147,161,176,0) 72%);
}
/* губы */
.bp.lips{
  background:linear-gradient(150deg,#ff7ab0,#e01f6b);
  -webkit-mask:var(--lips) center/contain no-repeat;mask:var(--lips) center/contain no-repeat;
}
/* нос клоуна */
.bp.nose{
  border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#ff9b95,#ff2d20 62%,#c40e05 100%);
  box-shadow:0 0 5px rgba(255,60,45,.6);
}
/* деньги */
.bp.money{
  background:linear-gradient(150deg,#8ef0b4,#1f9d55);
  -webkit-mask:var(--money) center/contain no-repeat;mask:var(--money) center/contain no-repeat;
  filter:drop-shadow(0 0 4px rgba(45,190,110,.5));
}
/* корона */
.bp.crown{
  background:linear-gradient(150deg,#ffe9a8,#d4af37);
  -webkit-mask:var(--crownm) center/contain no-repeat;mask:var(--crownm) center/contain no-repeat;
}

.fx-row.wide{grid-template-columns:repeat(4,1fr)}
.fx-dot.spark{border-radius:50%;background:var(--accent)}
.fx-dot.heart{background:linear-gradient(150deg,#ffa8cd,#ff5f97);
  -webkit-mask:var(--heart) center/contain no-repeat;mask:var(--heart) center/contain no-repeat}
.fx-dot.star{background:linear-gradient(160deg,#fff3c4,#ffd166);
  clip-path:polygon(50% 0%,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0% 50%,42% 42%)}
.fx-dot.petal{background:linear-gradient(150deg,#ffd7e6,#ff8fb8);
  -webkit-mask:var(--petal) center/contain no-repeat;mask:var(--petal) center/contain no-repeat}
.fx-dot.leaf{background:linear-gradient(150deg,#8fd6a3,#3f9a5f);
  -webkit-mask:var(--leaf) center/contain no-repeat;mask:var(--leaf) center/contain no-repeat}
.fx-dot.ember{border-radius:50%;background:radial-gradient(circle at 40% 40%,#fff0d8,#ff9d5c 55%,#ff6b3d 85%)}
.fx-dot.kfc{background:linear-gradient(150deg,#ff5a63,#c8001f);
  -webkit-mask:var(--bucket) center/contain no-repeat;mask:var(--bucket) center/contain no-repeat}
.fx-dot.ash{border-radius:50%;background:radial-gradient(circle at 36% 34%,#dfe4ea,#93a1b0 65%)}
.fx-dot.lips{background:linear-gradient(150deg,#ff7ab0,#e01f6b);
  -webkit-mask:var(--lips) center/contain no-repeat;mask:var(--lips) center/contain no-repeat}
.fx-dot.nose{border-radius:50%;background:radial-gradient(circle at 34% 30%,#ff9b95,#ff2d20 65%)}
.fx-dot.money{background:linear-gradient(150deg,#8ef0b4,#1f9d55);
  -webkit-mask:var(--money) center/contain no-repeat;mask:var(--money) center/contain no-repeat}
.fx-dot.crown{background:linear-gradient(150deg,#ffe9a8,#d4af37);
  -webkit-mask:var(--crownm) center/contain no-repeat;mask:var(--crownm) center/contain no-repeat}
.fx-dot.num{font-size:7px;font-weight:800;color:var(--text);display:grid;place-items:center;width:auto}

.uitem .utag{
  flex:0 0 auto;max-width:88px;padding:2px 7px;border-radius:8px;
  font-size:10.5px;font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  background:color-mix(in srgb, var(--tag) 20%, transparent);color:var(--tag);
}

/* корона над бейджем администратора */
.crowned{display:inline-flex;flex-direction:column;align-items:center;gap:0}
.crown{
  color:#ffce4d;font-size:17px;line-height:0;margin-bottom:-3px;
  filter:drop-shadow(0 1px 4px rgba(255,190,60,.55));
  animation:crownFloat 3.2s ease-in-out infinite;
}
.crown .ic{fill:currentColor;stroke:none}
@keyframes crownFloat{
  0%,100%{transform:translateY(0) rotate(-3deg)}
  50%{transform:translateY(-2.5px) rotate(3deg)}
}

.bio-item.locked{opacity:.45;cursor:not-allowed}
.bio-item.locked .tick{opacity:1;color:var(--hint)}

.bio-item{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:13px 14px;margin-bottom:7px;border:0;border-radius:14px;
  background:var(--bg2);color:var(--text);
  font-size:14px;text-align:left;cursor:pointer;transition:transform .15s ease;
}
.bio-item:active{transform:scale(.98)}
.bio-item.on{
  background:color-mix(in srgb, var(--accent) 14%, transparent);
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 45%, transparent);
}
.bio-item .tick{flex:0 0 18px;color:var(--accent);opacity:0}
.bio-item.on .tick{opacity:1}
.bio-item.clear{color:var(--hint);font-size:13.5px}

.prof-tags{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:4px}
.ptag{
  display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:10px;
  font-size:12px;background:var(--bg2);color:var(--hint);
}
.ptag.on{background:color-mix(in srgb, var(--ok) 15%, transparent);color:var(--ok)}

/* ---------------------------------------------------------------- звонки */
.bell-row{display:flex;align-items:center;gap:8px;padding:6px 0}
.bell-row .n{
  flex:0 0 28px;height:28px;display:grid;place-items:center;border-radius:9px;
  background:color-mix(in srgb, var(--accent) 12%, transparent);color:var(--accent);
  font-size:13px;font-weight:800;
}
.bell-row .n.zero{background:var(--bg2);color:var(--hint)}
.uitem.banned{opacity:.55}
.uitem .utags i{font-style:normal;font-size:11px;white-space:nowrap}
.uitem .kind{flex:0 0 34px;height:34px;justify-content:center;border-radius:11px;
  background:var(--bg2);color:var(--hint)}
.uitem .kind.new{background:color-mix(in srgb, var(--ok) 16%, transparent);color:var(--ok)}
.uitem .kind.changed{background:color-mix(in srgb, var(--warn) 18%, transparent);color:var(--warn)}
.uitem .kind.manual{background:color-mix(in srgb, var(--danger) 16%, transparent);color:var(--danger)}
#banned p a{color:var(--accent);text-decoration:none;font-weight:650}
.bell-row input{
  flex:1;min-width:0;padding:8px 10px;border:0;border-radius:10px;
  background:var(--bg2);outline:none;text-align:center;
  font-variant-numeric:tabular-nums;font-size:13.5px;
}
.bell-row .dash{color:var(--hint);font-size:12px}
.bell-note{font-size:12px;color:var(--hint);margin:4px 2px 10px}
.bell-note b{color:var(--warn)}

.credits{
  display:flex;align-items:center;justify-content:center;gap:7px;
  margin:22px 0 4px;padding-top:14px;border-top:1px solid var(--sep);
  font-size:12.5px;color:var(--hint);
}
.credits .ic-slot{font-size:14px;opacity:.7}
.credits a{color:var(--accent);text-decoration:none;font-weight:650}

/* ---------------------------------------------------------------- тост */
.toast{
  position:fixed;left:50%;bottom:calc(var(--bar) + 22px + env(safe-area-inset-bottom));
  transform:translateX(-50%);z-index:80;
  padding:11px 18px;border-radius:14px;max-width:82vw;
  background:var(--card);box-shadow:0 8px 32px -8px rgba(0,0,0,.5);
  font-size:13.5px;font-weight:640;text-align:center;
  animation:toast .3s cubic-bezier(.2,.9,.25,1);
}
.toast[hidden]{display:none}
@keyframes toast{from{opacity:0;transform:translate(-50%,12px)}}

/* ------------------------------------------------------------- скелетоны */
.skeleton{padding-top:4px}
.sk{border-radius:var(--radius);background:var(--bg2);position:relative;overflow:hidden;margin-bottom:10px}
.sk-title{height:26px;width:62%;border-radius:9px;margin-bottom:16px}
.sk-card{height:74px}
.sk::after{
  content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,color-mix(in srgb, var(--text) 8%, transparent),transparent);
  animation:shimmer 1.3s infinite;
}
@keyframes shimmer{to{transform:translateX(100%)}}

/* ------------------------------------------------------- широкий экран */
/* В Telegram Desktop окно широкое: держим колонку по центру,
   иначе карточки растягиваются на всю ширину и читать неудобно. */
@media (min-width: 620px){
  :root{ --maxw: 560px }

  .top, .tabs, main{
    max-width:var(--maxw);
    margin-left:auto;
    margin-right:auto;
  }
  .top{padding-left:0;padding-right:0}
  .tabs{padding-left:0;padding-right:0}
  main{padding-left:0;padding-right:0}

  .tabbar{
    padding-left:calc((100% - var(--maxw)) / 2);
    padding-right:calc((100% - var(--maxw)) / 2);
  }
  .toast{bottom:calc(var(--bar) + 26px)}

  .sheet{
    max-width:var(--maxw);
    margin:0 auto;
    border-radius:22px 22px 0 0;
  }
  .sheet-wrap{justify-content:center}

  /* на широком экране влезает больше колонок */
  .grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
  .hello-groups{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));max-height:42vh}
  .astrip{grid-template-columns:repeat(4,1fr)}
}

/* -------------------------------------------------------------- награды */
/* Ник в таблице лидеров: цвет и частицы берутся из тега человека. */
.nick{
  position:relative;overflow:hidden;min-width:0;
  padding:2px 7px;border:0;border-radius:9px;background:transparent;
  font-family:inherit;font-size:13.5px;font-weight:700;line-height:1.35;
  white-space:nowrap;text-overflow:ellipsis;text-align:left;
  color:var(--text);cursor:pointer;
}
.nick .nm{position:relative;z-index:1}
.nick .bp:not(.num){width:6px !important;height:6px !important}
.nick .bp.num{font-size:6px}
.nick.tagged{
  color:var(--tag);
  background:color-mix(in srgb, var(--tag) 14%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--tag) 30%, transparent);
}
.nick:active{transform:scale(.97)}

.gcard{
  padding:16px 14px;margin-bottom:12px;border-radius:20px;
  background:var(--card);box-shadow:var(--shadow);
}
.gtop{display:flex;align-items:center;gap:11px;margin-bottom:13px}
.gtop .ic-slot{font-size:22px;color:var(--accent);flex:0 0 auto}
.gtop>div{min-width:0}
.gtop b{display:block;font-size:16px;font-weight:750}
.gtop i{display:block;font-style:normal;font-size:12.5px;color:var(--hint);margin-top:2px}
.gstats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}

/* награда за игру */
.award{
  position:relative;overflow:hidden;margin-top:12px;padding:13px;
  border-radius:16px;background:var(--bg2);
}
.award.done{
  background:linear-gradient(135deg,
    color-mix(in srgb, var(--tag) 22%, transparent),
    color-mix(in srgb, var(--tag) 10%, transparent));
  box-shadow:inset 0 0 0 1.4px color-mix(in srgb, var(--tag) 45%, transparent);
}
.aw-top{display:flex;align-items:center;gap:8px;position:relative;z-index:1}
.aw-top .ic{flex:0 0 auto;width:17px;height:17px;color:var(--hint)}
.award.done .aw-top .ic{color:var(--tag)}
.aw-top b{
  flex:1;min-width:0;font-size:14px;font-weight:750;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.award.done .aw-top b{color:var(--tag)}
.aw-top span{
  flex:0 0 auto;font-size:12px;font-weight:700;color:var(--hint);
  font-variant-numeric:tabular-nums;
}
.aw-bar{height:6px;margin:10px 0 8px;border-radius:3px;background:var(--card);overflow:hidden}
.aw-bar i{display:block;height:100%;border-radius:3px;background:var(--accent);transition:width .4s ease}
.award .mini{margin:0;position:relative;z-index:1}
.award .chip-btn{margin-top:10px;position:relative;z-index:1}

/* строка таблицы лидеров */
.lrow{
  display:grid;grid-template-columns:26px 26px 1fr auto;align-items:center;
  gap:9px;padding:8px 2px;border-bottom:1px solid var(--sep);
}
.lrow:last-child{border-bottom:0}
.lrow.me{
  margin:0 -8px;padding:8px;border-radius:12px;border-bottom:0;
  background:color-mix(in srgb, var(--accent) 12%, transparent);
}
.lplace{
  font-size:13px;font-weight:800;color:var(--hint);text-align:center;
  font-variant-numeric:tabular-nums;
}
.lplace.p1{color:#ffce4d}
.lplace.p2{color:#c9d3dd}
.lplace.p3{color:#d9a06a}
.lwho{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:1px}
.lwho .nick{max-width:100%}
.lgroup{font-size:11px;color:var(--hint);padding-left:7px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lscore{font-size:15px;font-weight:780;font-variant-numeric:tabular-nums}
.lscore i{font-style:normal;font-size:11px;font-weight:600;color:var(--hint);margin-left:3px}

/* --------------------------------------------------------- поле игры */
.stage{
  position:fixed;inset:0;z-index:90;display:flex;flex-direction:column;
  background:var(--bg);
}
.stage[hidden]{display:none}
.stage-top{
  display:flex;align-items:center;gap:12px;
  padding:calc(10px + env(safe-area-inset-top)) 14px 10px;
}
.stage-score{flex:1;text-align:center}
.stage-score b{
  display:block;font-size:26px;font-weight:800;line-height:1;
  font-variant-numeric:tabular-nums;
}
.stage-score i{display:block;font-style:normal;font-size:11px;color:var(--hint);margin-top:3px}
.stage-best{
  flex:0 0 auto;min-width:44px;text-align:right;
  font-size:11.5px;color:var(--hint);font-variant-numeric:tabular-nums;
}
.stage-body{
  flex:1;min-height:0;position:relative;display:grid;place-items:center;padding:0 12px;
}
#stageCanvas{
  max-width:100%;max-height:100%;border-radius:18px;
  background:var(--bg2);touch-action:none;user-select:none;
}
#stageCanvas[hidden]{display:none}
.stage-hint{
  padding:10px 16px calc(12px + env(safe-area-inset-bottom));
  text-align:center;font-size:12px;color:var(--hint);min-height:18px;
}

/* «Счёт» */
.mathbox{width:100%;max-width:420px;display:flex;flex-direction:column;gap:14px}
.mathbox[hidden]{display:none}
.mathbar{height:6px;border-radius:3px;background:var(--bg2);overflow:hidden}
.mathbar i{
  display:block;height:100%;width:100%;transform-origin:left center;
  background:var(--accent);
}
.mathbar i.hot{background:var(--danger)}
.mathlevel{text-align:center;font-size:12px;color:var(--hint)}
.mathtask{
  text-align:center;font-size:44px;font-weight:800;letter-spacing:-1px;
  font-variant-numeric:tabular-nums;line-height:1.1;
}
.mathopts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mathopts button{
  padding:20px 8px;border:0;border-radius:16px;cursor:pointer;
  background:var(--card);box-shadow:var(--shadow);color:var(--text);
  font-family:inherit;font-size:22px;font-weight:750;
  font-variant-numeric:tabular-nums;transition:transform .12s ease,background .15s;
}
.mathopts button:active{transform:scale(.96)}
.mathopts button.right{background:color-mix(in srgb, var(--ok) 34%, var(--card))}
.mathopts button.wrong{background:color-mix(in srgb, var(--danger) 34%, var(--card))}

/* итог партии */
.stage-over{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
  padding:20px;text-align:center;
  background:color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  animation:fade .25s ease;
}
.stage-over[hidden]{display:none}
.over-mark{
  width:66px;height:66px;border-radius:22px;display:grid;place-items:center;
  background:var(--bg2);color:var(--accent);font-size:30px;
}
.over-mark .ic{width:30px;height:30px}
.stage-over h2{margin:4px 0 0;font-size:20px;font-weight:750}
.over-sub{margin:0;font-size:13.5px;color:var(--hint);max-width:280px}
.over-num{
  font-size:52px;font-weight:820;line-height:1;letter-spacing:-2px;
  font-variant-numeric:tabular-nums;margin:2px 0 6px;
}
.stage-over .btn{width:100%;max-width:280px}
.stage-over .chip-btn{max-width:280px}
.over-award{
  position:relative;overflow:hidden;width:100%;max-width:280px;
  margin:2px 0 6px;padding:12px;border-radius:16px;
  background:linear-gradient(135deg,
    color-mix(in srgb, var(--tag) 26%, transparent),
    color-mix(in srgb, var(--tag) 12%, transparent));
  box-shadow:inset 0 0 0 1.4px color-mix(in srgb, var(--tag) 50%, transparent);
}
.over-award b{position:relative;z-index:1;display:block;color:var(--tag);font-size:15px;font-weight:780}
.over-award i{position:relative;z-index:1;display:block;font-style:normal;font-size:12px;color:var(--hint);margin-top:3px}

/* ------------------------------------------------- карточка участника */
.ucard{display:flex;flex-direction:column;align-items:center;gap:9px;padding:2px 0 6px}
.ucard h2{margin:2px 0 0;font-size:19px;font-weight:750;letter-spacing:-.3px;text-align:center}
.ucard .sub{margin:0;font-size:13px;color:var(--hint)}
.ustats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%;margin-top:6px;
}
.ustat{
  padding:11px 8px;border-radius:15px;background:var(--bg2);text-align:center;
}
.ustat b{display:block;font-size:17px;font-weight:780;font-variant-numeric:tabular-nums}
.ustat i{display:block;font-style:normal;font-size:11px;color:var(--hint);margin-top:2px}
.urow{
  display:flex;justify-content:space-between;gap:12px;width:100%;
  padding:10px 2px;border-bottom:1px solid var(--sep);font-size:13.5px;
}
.urow:last-of-type{border-bottom:0}
.urow b{font-weight:700;text-align:right;overflow:hidden;text-overflow:ellipsis}
.uhidden{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:22px 12px;color:var(--hint);text-align:center;font-size:13.5px;
}
.uhidden .ic-slot{font-size:26px;color:var(--hint);opacity:.7}
.uacts{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;margin-top:12px}
.uacts .btn{margin:0}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}