/* Дизайн-система ИИЗИ ВМЕСТЕ (консилиум 18.10.2026): середина между статьёй /appstore и платформой.
   Из /appstore материалы (цвета, шрифты, стекло, 3D, полароиды), от платформы плотность (заголовки в 1,5 раза меньше, фон статичный).
   Подключают /materials, /club и оболочка club-shell.js. Шрифты: Unbounded 700/900, Onest 400-700, JetBrains Mono 500. */
:root{
  --void:#04050E;--deep:#0A0C24;--panel:#0B0D22;
  --ink:#F3F4FF;--soft:rgba(226,230,255,.76);--dim:rgba(196,202,240,.56);
  --line:rgba(255,255,255,.12);--rim:rgba(255,255,255,.2);--glass:rgba(255,255,255,.065);
  --blue:#4C93FF;--violet:#A07CFF;--lime:#C8F238;--lime-ink:#0D1100;--coral:#FF7A6B;--amber:#FFC15E;--mint:#6EF2C4;
  --grad:linear-gradient(100deg,var(--blue) 0%,var(--violet) 45%,var(--lime) 100%);
  --display:'Unbounded','Arial Black',system-ui,sans-serif;--body:'Onest',-apple-system,'Segoe UI',system-ui,sans-serif;--mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --t-hero:clamp(30px,4.6vw,56px);--t-h1:clamp(26px,3.4vw,40px);--t-h2:clamp(20px,2.4vw,28px);--t-lead:clamp(15px,1.4vw,19px);
  --r-s:14px;--r-m:20px;--r-l:24px;--r-xl:28px;
  --hl:inset 0 1px 0 rgba(255,255,255,.22);--e2:0 20px 50px -30px rgba(0,0,30,.9);--e3:0 30px 70px -40px rgba(0,0,30,.9);
  --glow-lime:0 10px 40px -10px rgba(200,242,56,.6);--glow-media:0 50px 120px -40px rgba(60,90,255,.6);
  --spring:cubic-bezier(.3,1.6,.5,1);--out:cubic-bezier(.2,.8,.2,1);
  --rail:264px;--rail-mini:76px;
  color-scheme:dark}
*{box-sizing:border-box}[hidden]{display:none!important}
html{background:var(--void)}
body{margin:0;color:var(--ink);font:16px/1.55 var(--body);-webkit-font-smoothing:antialiased;min-height:100dvh;
  background:radial-gradient(900px 520px at 0% -10%,rgba(47,91,255,.28),transparent 60%),radial-gradient(760px 520px at 100% 10%,rgba(123,61,255,.22),transparent 60%),radial-gradient(700px 420px at 50% 115%,rgba(200,242,56,.10),transparent 60%),var(--void);background-attachment:fixed}
button{font:inherit;color:inherit}
::selection{background:var(--lime);color:var(--lime-ink)}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px;border-radius:10px}
h1,h2,h3{font-family:var(--display);letter-spacing:-.02em;text-wrap:balance;margin:0}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font:600 11.5px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 12px var(--lime)}
.soft{color:var(--soft)}.dim{color:var(--dim)}
/* стекло: настоящее только у меню, шапки, дока, листа; карточки без размытия */
.glass{background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.035));border:1px solid var(--rim);backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);box-shadow:var(--hl),inset 0 -1px 0 rgba(255,255,255,.04),var(--e3)}
.card{position:relative;background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.03));border:1px solid var(--rim);border-radius:var(--r-l);padding:20px;box-shadow:var(--hl),var(--e2)}
/* кнопки: главная одна на экран */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:13px 20px;border-radius:999px;border:0;cursor:pointer;font:600 15px/1 var(--body);text-decoration:none;white-space:nowrap;transition:transform .3s var(--spring),box-shadow .3s,background .2s}
.btn.main{background:var(--lime);color:var(--lime-ink);box-shadow:var(--glow-lime)}
.btn.ghost{background:rgba(255,255,255,.07);color:var(--ink);border:1px solid var(--rim)}
.btn.small{min-height:36px;padding:8px 13px;font-size:13px}.btn.wide{width:100%}
.btn:active{transform:scale(.97)}.btn:disabled{opacity:.55;cursor:default;transform:none}
@media (hover:hover){.btn.main:hover{transform:translateY(-2px);box-shadow:0 16px 50px -10px rgba(200,242,56,.8)}.btn.ghost:hover{background:rgba(255,255,255,.12)}}
/* бейджи */
.badge{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;font:600 11.5px/1 var(--body);white-space:nowrap}
.badge.ok{color:var(--mint);background:rgba(110,242,196,.12);border:1px solid rgba(110,242,196,.35)}
.badge.new{color:var(--lime-ink);background:var(--lime)}
.badge.soon{color:var(--amber);background:rgba(255,193,94,.08);border:1px dashed rgba(255,193,94,.5)}
.badge.lock{color:#CDBBFF;background:rgba(160,124,255,.14);border:1px solid rgba(160,124,255,.4)}
.badge.got{color:var(--lime);background:rgba(4,5,14,.6);border:1px solid rgba(200,242,56,.45)}
.badge.kind{color:var(--ink);background:rgba(4,5,14,.55);border:1px solid var(--rim);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
/* чипы-фильтры */
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin-inline:-16px;padding:2px 16px}.chips::-webkit-scrollbar{display:none}
.chip{all:unset;cursor:pointer;flex:0 0 auto;padding:9px 14px;border-radius:999px;font:600 13.5px/1 var(--body);color:var(--soft);background:rgba(255,255,255,.06);border:1px solid var(--line)}
.chip b{font-weight:600;color:var(--dim);margin-left:4px}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--void)}.chip[aria-pressed="true"] b{color:rgba(4,5,14,.55)}
/* карточка материала: обложка с заголовком поверх */
.mats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.mat{all:unset;cursor:pointer;position:relative;display:block;aspect-ratio:3/4;border-radius:var(--r-l);overflow:hidden;background:var(--panel);box-shadow:0 0 0 1px var(--rim),0 30px 60px -36px rgba(0,0,0,.9);transition:transform .35s var(--spring)}
.mat img,.mat video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mat::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,5,14,0) 35%,rgba(4,5,14,.6) 62%,rgba(4,5,14,.96) 100%)}
.mat .tl{position:absolute;left:10px;right:10px;top:10px;z-index:2;display:flex;justify-content:space-between;gap:6px}
.mat .bt{position:absolute;left:14px;right:14px;bottom:14px;z-index:2;display:grid;gap:6px}
.mat b{font:700 15px/1.18 var(--display);letter-spacing:-.01em;text-wrap:balance}
.mat small{font:500 12.5px/1.3 var(--body);color:var(--soft)}
.mat.hero{aspect-ratio:1/1;grid-column:1/-1}.mat.hero b{font-size:clamp(20px,5.4vw,28px)}
.mat:active{transform:scale(.98)}.mat:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
@media (hover:hover){.mat:hover{transform:translateY(-4px)}}
@media (min-width:768px){.mats{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}.mat.hero{grid-column:span 2;aspect-ratio:16/10}}
/* полароид */
.pol{position:absolute;width:30%;padding:7px 7px 26px;background:#F5F3EE;border-radius:6px;box-shadow:0 24px 50px -16px rgba(0,0,0,.7);color:#222;font:500 11px/1 var(--body);text-align:center;rotate:var(--rot,-8deg);animation:bob 7s ease-in-out infinite alternate}
.pol img{width:100%;aspect-ratio:1/1.05;object-fit:cover;border-radius:3px;display:block}
.pol span{position:absolute;left:0;right:0;bottom:8px}
@keyframes bob{to{translate:0 -6px;rotate:calc(var(--rot,-8deg) + 1.5deg)}}
/* нижний док */
.dock{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:40;display:flex;gap:4px;padding:6px;border-radius:26px}
.dock button,.dock a{all:unset;cursor:pointer;position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;min-width:64px;min-height:52px;justify-content:center;padding:6px 10px 5px;border-radius:18px;transition:background .3s}
.dock img{width:32px;height:32px;border-radius:50%;object-fit:cover;transition:transform .35s var(--spring)}
.dock span{font:500 11px/1 var(--body);color:var(--dim)}
.dock [aria-current="page"]{background:rgba(255,255,255,.1)}.dock [aria-current="page"] span{color:var(--ink)}
.dock [aria-current="page"]::after{content:"";position:absolute;bottom:2px;width:4px;height:4px;border-radius:50%;background:var(--lime);box-shadow:0 0 10px var(--lime)}
.dock :active img{transform:scale(.88)}
@media (hover:hover){.dock button:hover img,.dock a:hover img{transform:translateY(-5px) scale(1.15)}}
@media (max-width:767px){.dock{left:0;right:0;transform:none;bottom:0;border-radius:22px 22px 0 0;border-bottom:0;justify-content:space-around;padding:6px max(6px,env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(6px,env(safe-area-inset-left,0px))}
  .dock button,.dock a{flex:1;min-width:0;padding:4px 2px}.dock img{width:28px;height:28px}.dock span{font-size:10.5px}}
/* состояния */
.state{display:grid;justify-items:center;gap:12px;text-align:center;padding:40px 20px;border-radius:var(--r-xl);border:1px dashed var(--rim);background:rgba(255,255,255,.03)}
.state img{width:84px;height:84px;filter:drop-shadow(0 0 26px rgba(120,140,255,.45))}
.state h3{font:700 18px/1.2 var(--display)}.state p{color:var(--soft);max-width:36ch;margin:0}
.skel{border-radius:var(--r-l);background:linear-gradient(90deg,rgba(255,255,255,.05),rgba(255,255,255,.1),rgba(255,255,255,.05));background-size:200% 100%;animation:sk 1.2s linear infinite}
@keyframes sk{to{background-position:-200% 0}}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(92px + env(safe-area-inset-bottom,0px));z-index:70;padding:12px 16px;border-radius:14px;background:#14173a;border:1px solid var(--rim);font-size:14px;max-width:calc(100vw - 32px);text-align:center;box-shadow:var(--e3)}
.rise{animation:rise .6s var(--out) both}@keyframes rise{from{opacity:0;transform:translateY(16px)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}