/* =====================================================================
   BEKINDAR · ТЕКЕМЕТ DESIGN SYSTEM · v1.0 — токены и базовые компоненты
   Перенесено из утверждённого артефакта «bekindar · дизайн-система «Текемет»».
   На Текемете весь сайт: лендинг, вход, кабинет, поток (пульт, экран зала, телефон гостя), админка,
   «Ты — звезда». Стили страниц — поверх этого файла: /assets/site.css, /app/cabinet.css, /stream/stream.css.
   1 u = базовая единица. Всё (отступы, шрифт, контролы) считается от u,
   поэтому интерфейс растёт на 1920/2560 и ТВ пропорционально, а не растягивается.
   ===================================================================== */

/* ---------- 0. FONT ----------
   Onest (OFL) со своего сервера: в залах интернет слабый, а казахские буквы должны быть в шрифте.
   @font-face — в /shared/onest.css (его же подключают игры-прототипы). */
@import url("/shared/onest.css");

/* ---------- 1. TOKENS ---------- */
:root{
  --u: clamp(16px, 0.5vw + 9px, 22px);   /* 16px до 1440 · 18.6px @1920 · 21.8px @2560 */
}
:root, [data-scope]{
  /* spacing (4-кратная сетка) */
  --s1:calc(var(--u)*.25); --s2:calc(var(--u)*.5); --s3:calc(var(--u)*.75); --s4:var(--u);
  --s5:calc(var(--u)*1.25); --s6:calc(var(--u)*1.5); --s7:calc(var(--u)*2); --s8:calc(var(--u)*3); --s9:calc(var(--u)*4);
  /* radius: утилитарный — ровный; «киіз» — асимметричный, только для игровых/брендовых объектов */
  --r-s:calc(var(--u)*.375); --r-m:calc(var(--u)*.625); --r-l:var(--u); --r-pill:999px;
  --r-felt:calc(var(--u)*1.25) calc(var(--u)*.375);
  /* type scale (Onest) */
  --fs-h1:calc(var(--u)*2.25); --fs-h2:calc(var(--u)*1.75); --fs-h3:calc(var(--u)*1.375); --fs-h4:calc(var(--u)*1.125);
  --fs-body:var(--u); --fs-sm:calc(var(--u)*.875); --fs-cap:calc(var(--u)*.8125); --fs-btn:calc(var(--u)*.9375);
  /* controls */
  --h-s:calc(var(--u)*2.25); --h-m:calc(var(--u)*2.75); --h-l:calc(var(--u)*3.25);
  --ico:calc(var(--u)*1.25);
  --sidebar:calc(var(--u)*17);   /* вмещает «Ойындар кітапханасы» + иконку */
}
:root{
  /* neutrals · «Киіз» */
  --c-bg:#F4EEE4; --c-surface:#FFFCF7; --c-surface-2:#EDE5D8; --c-sunken:#E7DDCD;
  --c-border:#DCD0BE; --c-border-strong:#8E7D66;
  --c-text:#1E1915; --c-text-2:#5E534A; --c-text-3:#76695C; --c-disabled:#8C7C68;
  /* brand */
  --c-primary:#B3261E; --c-primary-hover:#9C2019; --c-primary-soft:#F7DFD9; --c-on-primary:#FFFFFF;
  --c-secondary:#2F4B9A; --c-secondary-hover:#263D80; --c-secondary-soft:#E4E9F7;
  --c-accent:#E3A21A; --c-accent-hover:#CF9010; --c-accent-soft:#FBEFD2; --c-on-accent:#1E1915;
  /* semantic */
  --c-success:#2E7D4F; --c-success-text:#1F6B43; --c-success-soft:#E3F2E8;
  --c-warning:#B86E00; --c-warning-text:#8A5300; --c-warning-soft:#FCEFD3;
  --c-error:#B0154C; --c-error-soft:#FBE4EC;
  --c-info:#2F4B9A; --c-info-soft:#E4E9F7;
  --c-focus:#2F4B9A;
  /* categories */
  --cat-toy:#B3261E; --cat-corp:#2F4B9A; --cat-forum:#1F7A78; --cat-jubilee:#C98A0E; --cat-bday:#3F7D3A;
  --cat-plum:#7B3A74; --cat-indigo:#5046A6; --cat-sienna:#9C4A1F;
  /* teams */
  --team-1:#B3261E; --team-2:#2F4B9A;
  /* elevation — тёплые тени, без серого */
  --e1:0 1px 2px rgba(58,38,20,.08), 0 1px 1px rgba(58,38,20,.04);
  --e2:0 6px 18px -6px rgba(58,38,20,.18), 0 2px 4px rgba(58,38,20,.06);
  --e3:0 24px 48px -16px rgba(58,38,20,.32);
  /* motion */
  --t-fast:120ms; --t-base:200ms; --t-slow:420ms; --ease:cubic-bezier(.2,.7,.2,1);
  --font:"Onest", "Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme:light;
}
/* Сцена — тёмная тема для зального экрана и режима «Эфир» */
[data-stage]{
  --c-bg:#15110E; --c-surface:#221C17; --c-surface-2:#2E261F; --c-sunken:#0F0C0A;
  --c-border:#3F352C; --c-border-strong:#7A6B5B;
  --c-text:#F4EEE4; --c-text-2:#BFB2A2; --c-text-3:#9E9080;
  --c-primary:#E4553F; --c-primary-hover:#CF4631; --c-primary-soft:#3A1F1A; --c-secondary:#8FA4EC; --c-accent:#F2B53A; --c-accent-hover:#E0A225;
  --c-success-soft:#1D3526; --c-success-text:#7FD1A0; --c-warning-soft:#3A2C12; --c-warning-text:#F2C16B;
  --c-error-soft:#3A1624; --c-error:#F07AA3; --c-info-soft:#1C2542; --c-info:#8FA4EC; --c-disabled:#7A6B5B;
  --team-1:#E4553F; --team-2:#6F8AE0;
  color-scheme:dark;
}

/* ---------- 2. BASE ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--c-bg);color:var(--c-text);font:400 var(--fs-body)/1.5 var(--font);
  overflow-wrap:break-word;hyphens:manual;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,p{margin:0}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
[hidden]{display:none!important}
.num,.tnum{font-variant-numeric:tabular-nums}
:focus-visible{outline:3px solid var(--c-focus);outline-offset:2px;border-radius:var(--r-s)}
[data-stage] :focus-visible{outline-color:var(--c-accent)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ico{width:var(--ico);height:var(--ico);flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* typography roles */
.t-h1{font-size:var(--fs-h1);line-height:1.1;font-weight:800;letter-spacing:-.02em}
.t-h2{font-size:var(--fs-h2);line-height:1.15;font-weight:700;letter-spacing:-.015em}
.t-h3{font-size:var(--fs-h3);line-height:1.25;font-weight:700;letter-spacing:-.01em}
.t-h4{font-size:var(--fs-h4);line-height:1.3;font-weight:600}
.t-body{font-size:var(--fs-body);line-height:1.5}
.t-sm{font-size:var(--fs-sm);line-height:1.45}
.t-cap{font-size:var(--fs-cap);line-height:1.4;font-weight:500;color:var(--c-text-2)}
.t-btn{font-size:var(--fs-btn);line-height:1.2;font-weight:600}
.muted{color:var(--c-text-2)}

/* ---------- 3. TEKEMET GRAPHIC LANGUAGE ---------- */
/* Паттерн «Төрт мүйіз» — 4-кратная симметрия, цвет через mask → любой токен.
   Работа: «здесь пока ничего нет» — обложки, пустые состояния, ожидание. Никогда под рабочим текстом. */
.tile{position:relative;isolation:isolate}
.tile::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--pat, currentColor);opacity:var(--pat-o,.14);pointer-events:none;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round'%3E%3Cpath d='M48 44V32M48 32C48 20 32 18 32 28C32 35 41 35 41 29M48 32C48 20 64 18 64 28C64 35 55 35 55 29'/%3E%3Cpath transform='rotate(90 48 48)' d='M48 44V32M48 32C48 20 32 18 32 28C32 35 41 35 41 29M48 32C48 20 64 18 64 28C64 35 55 35 55 29'/%3E%3Cpath transform='rotate(180 48 48)' d='M48 44V32M48 32C48 20 32 18 32 28C32 35 41 35 41 29M48 32C48 20 64 18 64 28C64 35 55 35 55 29'/%3E%3Cpath transform='rotate(270 48 48)' d='M48 44V32M48 32C48 20 32 18 32 28C32 35 41 35 41 29M48 32C48 20 64 18 64 28C64 35 55 35 55 29'/%3E%3C/g%3E%3Cpath d='M48 42l6 6-6 6-6-6zM0-7l7 7-7 7-7-7zM96-7l7 7-7 7-7-7zM0 89l7 7-7 7-7-7zM96 89l7 7-7 7-7-7z'/%3E%3C/svg%3E") 0 0/var(--pat-size,calc(var(--u)*4.5));
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round'%3E%3Cpath d='M48 44V32M48 32C48 20 32 18 32 28C32 35 41 35 41 29M48 32C48 20 64 18 64 28C64 35 55 35 55 29'/%3E%3Cpath transform='rotate(90 48 48)' d='M48 44V32M48 32C48 20 32 18 32 28C32 35 41 35 41 29M48 32C48 20 64 18 64 28C64 35 55 35 55 29'/%3E%3Cpath transform='rotate(180 48 48)' d='M48 44V32M48 32C48 20 32 18 32 28C32 35 41 35 41 29M48 32C48 20 64 18 64 28C64 35 55 35 55 29'/%3E%3Cpath transform='rotate(270 48 48)' d='M48 44V32M48 32C48 20 32 18 32 28C32 35 41 35 41 29M48 32C48 20 64 18 64 28C64 35 55 35 55 29'/%3E%3C/g%3E%3Cpath d='M48 42l6 6-6 6-6-6zM0-7l7 7-7 7-7-7zM96-7l7 7-7 7-7-7zM0 89l7 7-7 7-7-7zM96 89l7 7-7 7-7-7z'/%3E%3C/svg%3E") 0 0/var(--pat-size,calc(var(--u)*4.5))}
/* «Тіс» — зубчатая кайма: маркер категории, прогресс раундов, счёт на сцене */
.band{height:calc(var(--u)*.5);background:var(--band,var(--c-primary));
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8'%3E%3Cpath d='M0 8L8 0L16 8Z'/%3E%3C/svg%3E") 0 100%/calc(var(--u)*1) 100% repeat-x;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8'%3E%3Cpath d='M0 8L8 0L16 8Z'/%3E%3C/svg%3E") 0 100%/calc(var(--u)*1) 100% repeat-x}
/* «Мүйіз-бұрыш» — 4 угла только у того, что видит зал */
.corners{position:relative}
.corners>.cn{position:absolute;width:var(--cn,calc(var(--u)*1.75));height:var(--cn,calc(var(--u)*1.75));color:var(--cn-c,var(--c-accent));pointer-events:none}
.corners>.cn svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:4;stroke-linecap:round}
.cn.tl{top:calc(var(--cn-in,0px)*-1);left:calc(var(--cn-in,0px)*-1)}.cn.tr{top:calc(var(--cn-in,0px)*-1);right:calc(var(--cn-in,0px)*-1);transform:scaleX(-1)}
.cn.bl{bottom:calc(var(--cn-in,0px)*-1);left:calc(var(--cn-in,0px)*-1);transform:scaleY(-1)}.cn.br{bottom:calc(var(--cn-in,0px)*-1);right:calc(var(--cn-in,0px)*-1);transform:scale(-1)}
.felt{border-radius:var(--r-felt)}

/* loader «Төрт мүйіз» — рога собираются по кругу */
.loader{width:calc(var(--u)*3);height:calc(var(--u)*3);color:var(--c-primary)}
.loader path{fill:none;stroke:currentColor;stroke-width:6;stroke-linecap:round;stroke-dasharray:90;stroke-dashoffset:90;animation:draw 1.6s var(--ease) infinite}
.loader path:nth-child(2){animation-delay:.2s;stroke:var(--c-accent)}
.loader path:nth-child(3){animation-delay:.4s;stroke:var(--c-secondary)}
.loader path:nth-child(4){animation-delay:.6s}
@keyframes draw{0%{stroke-dashoffset:90}45%,70%{stroke-dashoffset:0}100%{stroke-dashoffset:-90}}
.skel{background:linear-gradient(90deg,var(--c-sunken) 0 40%,var(--c-surface-2) 50%,var(--c-sunken) 60%) 0 0/300% 100%;animation:sh 1.4s linear infinite;border-radius:var(--r-s)}
@keyframes sh{to{background-position:-150% 0}}

/* ---------- 4. COMPONENTS ---------- */
/* Buttons: текст переносится, а не вылезает; ширина не прыгает при loading */
.btn{--bg:var(--c-surface);--fg:var(--c-text);--bd:var(--c-border-strong);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:var(--h-m);max-width:100%;padding:var(--s2) var(--s5);border:1.5px solid var(--bd);border-radius:var(--r-m);
  background:var(--bg);color:var(--fg);font-size:var(--fs-btn);line-height:1.2;font-weight:600;text-align:center;
  cursor:pointer;text-decoration:none;transition:background var(--t-fast),border-color var(--t-fast),transform var(--t-fast)}
.btn:hover{--bg:var(--c-surface-2)}
.btn:active{transform:translateY(1px)}
.btn--primary{--bg:var(--c-primary);--fg:var(--c-on-primary);--bd:var(--c-primary)}
.btn--primary:hover{--bg:var(--c-primary-hover);--bd:var(--c-primary-hover)}
.btn--ghost{--bg:transparent;--bd:transparent;--fg:var(--c-text)}
.btn--ghost:hover{--bg:var(--c-surface-2)}
.btn--danger{--bg:var(--c-error);--fg:#fff;--bd:var(--c-error)}
.btn--danger:hover{--bg:#96103F}
/* Одна охристая кнопка на экран — только живое действие эфира */
.btn--live{--bg:var(--c-accent);--fg:var(--c-on-accent);--bd:var(--c-accent);min-height:var(--h-l);padding-inline:var(--s6);border-radius:var(--r-felt);font-size:var(--fs-h4);font-weight:700;box-shadow:inset 0 -3px 0 rgba(0,0,0,.14)}
.btn--live:hover{--bg:var(--c-accent-hover)}
.btn--s{min-height:var(--h-s);padding:var(--s1) var(--s3);font-size:var(--fs-sm)}
.btn--l{min-height:var(--h-l);padding-inline:var(--s6);font-size:var(--fs-h4)}
.btn--block{width:100%}
.btn--icon{width:var(--h-m);padding:0;flex:none}
.btn--icon.btn--s{width:var(--h-s)}
.btn:disabled,.btn[aria-disabled="true"]{--bg:var(--c-sunken);--fg:var(--c-disabled);--bd:transparent;cursor:not-allowed;transform:none;box-shadow:none}
.btn[aria-busy="true"]{color:transparent;pointer-events:none}
.btn[aria-busy="true"] .ico{visibility:hidden}
.btn[aria-busy="true"]::after{content:"";position:absolute;width:calc(var(--u)*1.1);height:calc(var(--u)*1.1);border-radius:50%;border:2.5px solid var(--fg);border-right-color:transparent;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center}

/* Tooltip */
[data-tip]{position:relative}
[data-tip]::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translate(-50%,4px);opacity:0;pointer-events:none;
  background:var(--c-text);color:var(--c-bg);font-size:var(--fs-cap);font-weight:500;line-height:1.3;padding:var(--s1) var(--s2);border-radius:var(--r-s);
  width:max-content;max-width:calc(var(--u)*14);text-align:center;transition:opacity var(--t-fast),transform var(--t-fast);z-index:30}
[data-tip]:hover::after,[data-tip]:focus-visible::after{opacity:1;transform:translate(-50%,0)}

/* Inputs */
.field{display:grid;gap:var(--s1);min-width:0}
.field__label{font-size:var(--fs-sm);font-weight:600}
.field__hint{font-size:var(--fs-cap);color:var(--c-text-2)}
.input{width:100%;min-height:var(--h-m);padding:var(--s2) var(--s3);border:1.5px solid var(--c-border-strong);border-radius:var(--r-m);background:var(--c-surface);
  font-size:var(--fs-body);line-height:1.3;transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.input::placeholder{color:var(--c-text-3)}
.input:hover{border-color:var(--c-text-2)}
.input:focus{outline:none;border-color:var(--c-focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--c-focus) 25%,transparent)}
.input:disabled{background:var(--c-sunken);border-color:transparent;color:var(--c-disabled);cursor:not-allowed}
textarea.input{resize:vertical;line-height:1.45}
select.input{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:calc(var(--s3) + var(--u) + var(--s1));
  background:var(--c-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E534A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right var(--s3) center/var(--u)}
.field--error .input{border-color:var(--c-error)}
.field--error .field__hint{color:var(--c-error);display:flex;gap:var(--s1);align-items:flex-start}
.field--error .field__hint .ico{width:1.1em;height:1.1em;margin-top:.15em}
.search{position:relative;display:flex;align-items:center;min-width:0}
.search .ico{position:absolute;left:var(--s3);color:var(--c-text-2);pointer-events:none}
.search .input{padding-left:calc(var(--s3) + var(--ico) + var(--s2))}

/* Чекбокс и радио: рамка 1.5px, отметка — Primary */
.check{display:flex;gap:var(--s2);align-items:flex-start;font-size:var(--fs-sm);line-height:1.4;cursor:pointer}
.check input{appearance:none;-webkit-appearance:none;width:calc(var(--u)*1.25);height:calc(var(--u)*1.25);flex:none;margin:.05em 0 0;
  border:1.5px solid var(--c-border-strong);border-radius:var(--r-s);background:var(--c-surface);display:grid;place-items:center;cursor:pointer;
  transition:background var(--t-fast),border-color var(--t-fast)}
.check input:checked{background:var(--c-primary);border-color:var(--c-primary)}
.check input:checked::after{content:"";width:.6em;height:.32em;border:2.5px solid #fff;border-top:0;border-right:0;transform:translateY(-18%) rotate(-45deg)}
.check input[type="radio"]{border-radius:50%}
.check input[type="radio"]:checked::after{width:.46em;height:.46em;border:0;border-radius:50%;background:#fff;transform:none}
.switch{display:inline-flex;align-items:center;gap:var(--s2);font-size:var(--fs-sm);font-weight:600;cursor:pointer}
.switch input{appearance:none;-webkit-appearance:none;width:calc(var(--u)*2.5);height:calc(var(--u)*1.4);border-radius:99px;background:var(--c-border-strong);position:relative;cursor:pointer;transition:background var(--t-fast);margin:0;flex:none}
.switch input::after{content:"";position:absolute;top:3px;left:3px;width:calc(var(--u)*1.4 - 6px);height:calc(var(--u)*1.4 - 6px);border-radius:50%;background:#fff;transition:transform var(--t-base) var(--ease)}
.switch input:checked{background:var(--c-primary)}
.switch input:checked::after{transform:translateX(calc(var(--u)*1.1))}

/* Badges & tags */
.badge{display:inline-flex;align-items:center;gap:var(--s1);min-height:calc(var(--u)*1.5);padding:2px var(--s2);border-radius:var(--r-pill);
  font-size:var(--fs-cap);font-weight:600;line-height:1.2;background:var(--c-surface-2);color:var(--c-text-2);max-width:100%;white-space:nowrap}
.badge::before{content:"";width:.5em;height:.5em;border-radius:50%;background:currentColor;flex:none}
.badge--ok{background:var(--c-success-soft);color:var(--c-success-text)}
.badge--warn{background:var(--c-warning-soft);color:var(--c-warning-text)}
.badge--err{background:var(--c-error-soft);color:var(--c-error)}
.badge--info{background:var(--c-info-soft);color:var(--c-info)}
.badge--live{background:var(--c-primary);color:#fff}
.badge--live::before,.badge--pulse::before{animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.3}}
.tag{display:inline-flex;align-items:center;gap:var(--s1);min-height:var(--h-s);padding:0 var(--s3);border:1.5px solid var(--c-border);border-radius:var(--r-pill);
  background:var(--c-surface);font-size:var(--fs-sm);font-weight:500;cursor:pointer;white-space:nowrap}
.tag:hover{border-color:var(--c-border-strong)}
.tag[aria-pressed="true"]{background:var(--c-text);border-color:var(--c-text);color:var(--c-bg)}
.chips{display:flex;gap:var(--s2);overflow-x:auto;scrollbar-width:none;padding-block:2px}
.chips::-webkit-scrollbar{display:none}

/* Cards */
.card{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-l);box-shadow:var(--e1);min-width:0}
.card__body{padding:var(--s4);display:grid;gap:var(--s2);min-width:0}
.progress{height:calc(var(--u)*.5);border-radius:var(--r-pill);background:var(--c-sunken);overflow:hidden}
.progress>i{display:block;height:100%;background:var(--bar,var(--c-success));border-radius:inherit;transition:width var(--t-slow) var(--ease)}
.rounds{display:flex;gap:4px}
.rounds>i{flex:1;height:calc(var(--u)*.5);border-radius:2px;background:var(--c-sunken)}
.rounds>i.done{background:var(--c-text-2)}
.rounds>i.cur{background:var(--c-accent)}
.stat__value{font-size:var(--fs-h2);font-weight:800;line-height:1.1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat{padding:var(--s4);display:grid;gap:var(--s1);align-content:start}
.stat__row{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center}
.delta{font-size:var(--fs-cap);font-weight:700;color:var(--c-success-text)}

/* Game card: обложка цвета категории, паттерн, механика-иконка и кайма */
.gcard{--cat:var(--cat-toy);display:flex;flex-direction:column;background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-felt);overflow:hidden;
  box-shadow:var(--e1);transition:box-shadow var(--t-base),transform var(--t-base);min-width:0}
.gcard:hover{box-shadow:var(--e2);transform:translateY(-2px)}
.gcard__cover{--pat:#fff;--pat-o:.16;aspect-ratio:16/8;background:var(--cat);color:#fff;display:grid;place-items:center;position:relative}
.gcard__cover .mech{width:calc(var(--u)*3.25);height:calc(var(--u)*3.25);border-radius:var(--r-felt);background:rgba(255,255,255,.16);display:grid;place-items:center;backdrop-filter:blur(2px)}
.gcard__cover .mech .ico{width:calc(var(--u)*1.75);height:calc(var(--u)*1.75)}
.gcard__cover .cat{position:absolute;left:var(--s3);top:var(--s3);max-width:calc(100% - 2*var(--s3));font-size:var(--fs-cap);font-weight:700;background:rgba(0,0,0,.22);padding:2px var(--s2);border-radius:var(--r-pill);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gcard__cover .band{position:absolute;left:0;right:0;bottom:-1px;--band:var(--c-surface)}
.gcard__body{padding:var(--s3) var(--s4) var(--s4);display:flex;flex-direction:column;gap:var(--s2);flex:1;min-width:0}
.gcard__title{font-size:var(--fs-h4);line-height:1.25;font-weight:700;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.gcard__desc{font-size:var(--fs-sm);color:var(--c-text-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gcard__foot{margin-top:auto;padding-top:var(--s2);display:flex;flex-wrap:wrap;gap:var(--s2)}
.gcard__foot .btn{flex:1 1 auto}
.meta{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3);font-size:var(--fs-cap);color:var(--c-text-2);font-weight:500}
.meta>span{display:inline-flex;align-items:center;gap:4px;min-width:0}
.meta .ico{width:1.15em;height:1.15em}

/* Event card: дата на войлочной плашке */
.ecard{display:grid;grid-template-columns:auto 1fr;gap:var(--s4);padding:var(--s4);align-items:start}
.date{width:calc(var(--u)*4);text-align:center;border-radius:var(--r-felt);background:var(--c-primary-soft);color:var(--c-primary);padding:var(--s2) 0;flex:none}
.date b{display:block;font-size:var(--fs-h2);line-height:1;font-weight:800;font-variant-numeric:tabular-nums}
.date small{font-size:var(--fs-cap);font-weight:700;text-transform:uppercase}
.date--none{background:var(--c-surface-2);color:var(--c-text-3)}
.ecard__top{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s2);align-items:flex-start;justify-content:space-between}

/* Category card */
.ccard{--cat:var(--cat-toy);position:relative;overflow:hidden;border-radius:var(--r-felt);background:var(--cat);color:#fff;padding:var(--s4);min-height:calc(var(--u)*6.5);
  display:flex;flex-direction:column;justify-content:flex-end;gap:2px;--pat:#fff;--pat-o:.14}
.ccard b{font-size:var(--fs-h4);line-height:1.2}
.ccard small{font-size:var(--fs-cap);opacity:.9;font-weight:500}

/* Profile: аватар с охристым кольцом */
.pcard{padding:var(--s4);display:grid;grid-template-columns:auto 1fr;gap:var(--s3);align-items:center}
.avatar{width:calc(var(--u)*3);height:calc(var(--u)*3);border-radius:50%;background:var(--c-secondary);color:#fff;display:grid;place-items:center;font-weight:700;flex:none;overflow:hidden;
  box-shadow:0 0 0 3px var(--c-surface),0 0 0 5px var(--c-accent)}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.avatar--s{width:calc(var(--u)*2.25);height:calc(var(--u)*2.25);font-size:var(--fs-sm);box-shadow:none}
.avatar--l{width:calc(var(--u)*4.5);height:calc(var(--u)*4.5);font-size:var(--fs-h3)}

/* Table → карточки на узком контейнере */
.tbl-wrap{container-type:inline-size;min-width:0}
.tbl{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.tbl th{text-align:left;font-size:var(--fs-cap);font-weight:600;color:var(--c-text-2);padding:var(--s2) var(--s3);border-bottom:1px solid var(--c-border);white-space:nowrap}
.tbl td{padding:var(--s3);border-bottom:1px solid var(--c-border);vertical-align:middle}
.tbl tr:hover td{background:var(--c-bg)}
.tbl .r{text-align:right;font-variant-numeric:tabular-nums}
.tbl td b{font-weight:600}
@container (max-width: 620px){
  .tbl thead{display:none}
  .tbl,.tbl tbody,.tbl tr,.tbl td{display:block;width:100%}
  .tbl tr{padding:var(--s3) 0;border-bottom:1px solid var(--c-border);display:grid;grid-template-columns:1fr auto;gap:2px var(--s3)}
  .tbl td{border:0;padding:0;text-align:left!important}
  .tbl td:first-child{grid-column:1/-1}
  .tbl td[data-l]::before{content:attr(data-l) ": ";color:var(--c-text-2);font-size:var(--fs-cap)}
}

/* Navigation: пункты меню; текущий — плашка Surface и красная метка */
.nav{display:grid;gap:2px}
.nav a,.nav button{display:flex;align-items:center;gap:var(--s3);width:100%;min-height:var(--h-m);padding:var(--s2) var(--s3);border:0;border-radius:var(--r-m);background:none;
  color:var(--c-text-2);text-decoration:none;text-align:left;font-weight:600;font-size:var(--fs-sm);line-height:1.2;position:relative;cursor:pointer}
.nav a:hover,.nav button:hover{background:var(--c-surface-2);color:var(--c-text)}
.nav [aria-current]{background:var(--c-surface);color:var(--c-text);box-shadow:var(--e1)}
.nav [aria-current]::before{content:"";position:absolute;left:calc(var(--s2)*-1);top:22%;bottom:22%;width:4px;border-radius:0 4px 4px 0;background:var(--c-primary)}
.nav [aria-current] .ico{color:var(--c-primary)}
.nav .count{margin-left:auto;font-size:var(--fs-cap);color:var(--c-text-2)}
.nav-label{font-size:var(--fs-cap);font-weight:600;color:var(--c-text-3);padding:var(--s4) var(--s3) var(--s1)}

/* Alerts / toast */
.alert{display:grid;grid-template-columns:auto 1fr;gap:var(--s3);padding:var(--s3) var(--s4);border-radius:var(--r-m);background:var(--c-info-soft);color:var(--c-text);border-left:4px solid var(--c-info)}
.alert .ico{color:var(--c-info);margin-top:2px}
.alert--warn{background:var(--c-warning-soft);border-color:var(--c-warning)} .alert--warn .ico{color:var(--c-warning)}
.alert--err{background:var(--c-error-soft);border-color:var(--c-error)} .alert--err .ico{color:var(--c-error)}
.alert--ok{background:var(--c-success-soft);border-color:var(--c-success)} .alert--ok .ico{color:var(--c-success)}
.alert b{display:block}
.toast-host{position:fixed;left:50%;bottom:var(--s5);transform:translateX(-50%);z-index:120;display:grid;gap:var(--s2);width:max-content;max-width:calc(100% - 2*var(--s4))}
.toast{display:flex;gap:var(--s3);align-items:center;padding:var(--s3) var(--s4);border-radius:var(--r-m);background:var(--c-text);color:var(--c-bg);box-shadow:var(--e3);max-width:calc(var(--u)*30);animation:pop var(--t-base) var(--ease)}
.toast .ico{color:#7FD1A0}
.toast--err .ico{color:#F07AA3}
.toast span{flex:1;min-width:0;font-size:var(--fs-sm);font-weight:500}

/* Modal */
.scrim{position:fixed;inset:0;background:rgba(30,25,21,.55);display:grid;place-items:center;padding:var(--s4);z-index:100;animation:fade var(--t-base)}
.modal{width:min(100%,calc(var(--u)*30));max-height:calc(100dvh - 2*var(--s4));display:flex;flex-direction:column;background:var(--c-surface);border-radius:var(--r-l);box-shadow:var(--e3);overflow:hidden;animation:pop var(--t-base) var(--ease)}
.modal__head{padding:var(--s5) var(--s5) 0;display:grid;grid-template-columns:1fr auto;gap:var(--s3);align-items:start}
.modal__body{padding:var(--s3) var(--s5) var(--s5);color:var(--c-text-2);overflow:auto;min-height:0}
.modal__foot{padding:var(--s4) var(--s5);background:var(--c-bg);display:flex;flex-wrap:wrap-reverse;gap:var(--s2);justify-content:flex-end}
@keyframes fade{from{opacity:0}}@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.98)}}

/* Empty state */
.empty{text-align:center;display:grid;justify-items:center;gap:var(--s3);padding:var(--s7) var(--s5)}
.empty__art{width:calc(var(--u)*7);height:calc(var(--u)*7);border-radius:var(--r-felt);background:var(--c-surface-2);--pat:var(--c-primary);--pat-o:.35;--pat-size:calc(var(--u)*3.5)}
.empty p{max-width:40ch;color:var(--c-text-2)}

/* Breadcrumbs */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:2px var(--s1);font-size:var(--fs-sm);color:var(--c-text-2);min-width:0}
.crumbs a{color:inherit;text-decoration:none;border-radius:var(--r-s)}
.crumbs a:hover{color:var(--c-text);text-decoration:underline}
.crumbs .ico{width:1em;height:1em}
.crumbs [aria-current]{color:var(--c-text);font-weight:600}

/* Segmented control */
.seg{max-width:100%;overflow-x:auto;scrollbar-width:none;display:inline-flex;background:var(--c-sunken);border-radius:var(--r-m);padding:3px;flex:none}
.seg button{border:0;background:transparent;min-height:var(--h-s);padding:0 var(--s3);border-radius:calc(var(--r-m) - 3px);font-weight:700;font-size:var(--fs-sm);cursor:pointer;color:var(--c-text-2);white-space:nowrap}
.seg button[aria-pressed="true"]{background:var(--c-surface);color:var(--c-text);box-shadow:var(--e1)}

/* Logo */
.logo{display:flex;align-items:center;gap:var(--s2);font-weight:800;font-size:var(--fs-h4);letter-spacing:-.02em;color:var(--c-text);text-decoration:none}
.logo__mark{width:calc(var(--u)*1.9);height:calc(var(--u)*1.9);border-radius:var(--r-felt);background:var(--c-primary);color:var(--c-accent);display:grid;place-items:center;flex:none}
.logo__mark svg{width:72%;height:72%;fill:none;stroke:currentColor;stroke-width:6;stroke-linecap:round}