:root{
  --font-display:'Bricolage Grotesque','Manrope',system-ui,sans-serif;
  --font-body:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;

  --color-bg:#0B0B0C;
  --color-surface:#17171A;
  --color-text:#F2F0EC;
  --color-primary:#C8FF3D;
  --color-accent:#FF5A36;
  --color-line:rgba(242,240,236,.14);
  --color-muted:rgba(242,240,236,.56);

  --radius-card:18px;
  --radius-btn:100px;
  --radius-tile:0px;
  --radius-xs:6px;

  --space-section:96px;
  --pad-x:14px;
  --topbar-h:56px;
  --ease:cubic-bezier(.2,.85,.15,1);
}
@supports (color: oklch(0.5 0.1 200)){
  :root{
    --color-bg:oklch(0.145 0.005 285);
    --color-surface:oklch(0.205 0.006 285);
    --color-text:oklch(0.955 0.006 90);
    --color-primary:oklch(0.921 0.212 127);
    --color-accent:oklch(0.687 0.206 36);
  }
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{overflow-x:clip;background:var(--color-bg)}
body{
  margin:0;
  background:var(--color-bg);
  color:var(--color-text);
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.no-scroll{overflow:hidden}
button{font-family:inherit;color:inherit}
a{color:inherit}

/* ---------- decorative backdrop (parallax) ---------- */
.glow{
  position:fixed;
  top:-24vh;left:-18vw;
  width:96vw;height:96vh;
  z-index:0;
  pointer-events:none;
  opacity:.9;
  transform:translate3d(0,0,0);
  will-change:transform;
  background:
    radial-gradient(38% 42% at 32% 30%, color-mix(in oklab, var(--color-primary) 9%, transparent), transparent 72%),
    radial-gradient(42% 46% at 82% 78%, color-mix(in oklab, var(--color-accent) 8%, transparent), transparent 74%);
}

/* ---------- header ---------- */
.topbar{
  position:sticky;top:0;z-index:60;
  display:flex;align-items:center;gap:10px;
  height:var(--topbar-h);
  padding:0 var(--pad-x);
  background:color-mix(in oklab, var(--color-bg) 74%, transparent);
  -webkit-backdrop-filter:blur(20px) saturate(1.3);
  backdrop-filter:blur(20px) saturate(1.3);
  border-bottom:1px solid var(--color-line);
}
.brand{display:flex;align-items:center;gap:9px;flex:0 0 auto}
.brand__mark{
  position:relative;
  width:18px;height:18px;
  border-radius:var(--radius-xs);
  background:var(--color-primary);
}
.brand__mark::after{
  content:"";
  position:absolute;left:4px;right:4px;top:50%;
  height:2px;background:var(--color-bg);
  transform:translateY(-50%) rotate(-24deg);
}
.brand__name{
  font-family:var(--font-display);
  font-weight:700;font-size:17px;letter-spacing:-.02em;
}
.topbar__sub{
  flex:1 1 auto;min-width:0;margin:0;
  font-size:12px;color:var(--color-muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.iconbtn{
  flex:0 0 auto;
  width:40px;height:40px;
  display:grid;place-items:center;
  border:1px solid var(--color-line);
  border-radius:var(--radius-btn);
  background:transparent;
  cursor:pointer;
  padding:0;
  transition:transform .18s var(--ease), opacity .2s;
}
.iconbtn:hover{background:color-mix(in oklab, var(--color-text) 9%, transparent)}
.iconbtn:active{transform:scale(.9)}
.iconbtn:focus-visible,
.chip:focus-visible,
.btn:focus-visible,
.tile:focus-visible,
.thumb__x:focus-visible,
.vpreset:focus-visible{
  outline:2px solid var(--color-primary);
  outline-offset:2px;
}
.pill{
  flex:0 0 auto;
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 12px;
  border:1px solid var(--color-line);
  border-radius:var(--radius-btn);
  background:transparent;
  font-size:12px;font-weight:600;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
}
.pill__dot{width:6px;height:6px;border-radius:var(--radius-btn);background:var(--color-primary)}

/* ---------- vibe panel ---------- */
.vibe{
  position:fixed;top:var(--topbar-h);left:0;right:0;z-index:55;
  padding:16px var(--pad-x) 18px;
  background:color-mix(in oklab, var(--color-bg) 90%, transparent);
  -webkit-backdrop-filter:blur(22px);
  backdrop-filter:blur(22px);
  border-bottom:1px solid var(--color-line);
  opacity:0;transform:translateY(-10px);pointer-events:none;
  transition:opacity .22s var(--ease), transform .3s var(--ease);
}
.vibe.is-open{opacity:1;transform:none;pointer-events:auto}
.vibe__lead{
  margin:0 0 12px;
  font-family:var(--font-display);
  font-size:14px;font-weight:600;letter-spacing:-.01em;
}
.vibe__lead span{color:var(--color-muted);font-family:var(--font-body);font-weight:400;font-size:12px}
.vibe__presets{
  display:flex;flex-wrap:wrap;gap:6px;
  max-height:50vh;
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color: var(--color-line) transparent;
  padding-right:2px;
}
.vibe__presets::-webkit-scrollbar{width:4px}
.vibe__presets::-webkit-scrollbar-thumb{background:var(--color-line);border-radius:100px}
.vpreset{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 13px;
  border:1px solid var(--color-line);
  border-radius:var(--radius-btn);
  background:transparent;
  font-size:13px;font-weight:500;
  cursor:pointer;
  transition:transform .18s var(--ease);
}
.vpreset:hover{background:color-mix(in oklab, var(--color-text) 9%, transparent)}
.vpreset:active{transform:scale(.95)}
.vpreset[aria-pressed="true"]{
  border-color:var(--color-primary);
  color:var(--color-primary);
}
.vpreset__dots{display:inline-flex;gap:3px}
.vpreset__dots i{width:5px;height:5px;border-radius:var(--radius-btn);display:block}
.vibe__row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:14px;
}
.vibe__count{font-size:12px;color:var(--color-muted)}

/* ---------- tag rail ---------- */
.rail{
  position:sticky;top:var(--topbar-h);z-index:45;
  background:color-mix(in oklab, var(--color-bg) 80%, transparent);
  -webkit-backdrop-filter:blur(20px);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--color-line);
}
.rail__scroll{
  display:flex;gap:6px;
  overflow-x:auto;
  padding:8px var(--pad-x);
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.rail__scroll::-webkit-scrollbar{display:none}
.chip{
  flex:0 0 auto;
  padding:9px 14px;
  border:1px solid var(--color-line);
  border-radius:var(--radius-btn);
  background:transparent;
  font-size:13px;font-weight:500;line-height:1;
  white-space:nowrap;
  cursor:pointer;
  transition:transform .18s var(--ease);
}
.chip:hover{background:color-mix(in oklab, var(--color-text) 9%, transparent)}
.chip:active{transform:scale(.94)}
.chip[aria-pressed="true"]{
  background:var(--color-primary);
  border-color:var(--color-primary);
  color:var(--color-bg);
  font-weight:700;
}
.chip--reset{color:var(--color-accent);border-color:color-mix(in oklab, var(--color-accent) 50%, transparent)}

/* ---------- feed ---------- */
main{position:relative;z-index:1}
/* ---------- Акционный баннер на главной (вместо hint) ---------- */
.promo-strip{
  display:flex;
  align-items:center;
  gap:10px;
  margin:10px var(--pad-x) 4px;
  padding:11px 14px;
  border-radius:14px;
  background:linear-gradient(95deg,
    color-mix(in oklab, #E5BE3D 22%, var(--color-surface)) 0%,
    color-mix(in oklab, #E5BE3D 8%, var(--color-surface)) 100%);
  border:1px solid color-mix(in oklab, #E5BE3D 55%, transparent);
  box-shadow:0 8px 24px -12px color-mix(in oklab, #E5BE3D 60%, transparent);
  color:var(--color-text);
  font-size:13px;
  line-height:1.2;
}
.promo-strip__fire{font-size:18px;flex-shrink:0}
.promo-strip__text{
  flex:1 1 auto;
  display:flex;align-items:baseline;gap:8px;
  flex-wrap:wrap;
}
.promo-strip__text b{
  color:#F4D264;
  font-weight:800;
  font-size:14px;
}
.promo-strip__timer{
  font-variant-numeric:tabular-nums;
  font-weight:600;
  color:color-mix(in oklab, var(--color-text) 72%, transparent);
  font-size:12px;
}
.promo-strip__btn{
  flex:0 0 auto;
  padding:7px 14px;
  border-radius:100px;
  background:#E5BE3D;
  color:#1A1400;
  font-size:12px;
  font-weight:800;
  letter-spacing:.02em;
  border:none;
  cursor:pointer;
  transition:transform .15s var(--ease);
  -webkit-tap-highlight-color:transparent;
  font-family:inherit;
}
.promo-strip__btn:active{transform:scale(.96)}

.hint{
  margin:0;
  padding:10px var(--pad-x) 4px;
  font-size:12px;
  color:var(--color-muted);
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.hint.is-gone{opacity:0;transform:translateY(-6px);pointer-events:none}
.dropbar{
  display:flex;align-items:center;gap:8px;
  padding:14px var(--pad-x) 10px;
}
.dropbar__dot{
  width:7px;height:7px;flex:0 0 auto;
  border-radius:var(--radius-btn);
  background:var(--color-primary);
}
.dropbar__title{
  font-family:var(--font-display);
  font-size:14px;font-weight:700;letter-spacing:-.01em;
}
.dropbar__meta{font-size:12px;color:var(--color-muted)}
.dropbar__count{
  margin-left:auto;
  font-size:11px;font-weight:600;
  color:var(--color-bg);
  background:var(--color-text);
  padding:3px 8px;
  border-radius:var(--radius-btn);
}
.feed-wrap{container-type:inline-size}
.feed{
  column-count:2;
  column-gap:6px;
  padding:6px;
  background:var(--color-bg);
}
@media (min-width:640px){.feed{column-count:3}}
@media (min-width:1024px){.feed{column-count:4}}
@media (min-width:1440px){.feed{column-count:5}}

.tile{
  position:relative;
  display:block;
  margin:0;padding:0;
  border:0;
  border-radius:var(--radius-tile);
  background:var(--color-surface);
  overflow:hidden;
  isolation:isolate;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  -webkit-touch-callout:none;
  user-select:none;
}
.tile[hidden]{display:none}

/* Pinterest masonry через columns */
.tile{
  display:block;
  width:100%;
  break-inside:avoid;
  margin:0 0 6px 0;
  aspect-ratio:var(--ar, 3 / 4);
  /* ВАЖНО: content-visibility: auto УБРАН —
     он ломает masonry через column-count + aspect-ratio.
     Вместо него — виртуализация окна DOM (см. JS). */
  position:relative;
  overflow:hidden;
}
/* Аспект по data-атрибуту */
.tile[data-aspect="9:16"]{ --ar: 9 / 16; }
.tile[data-aspect="3:4"] { --ar: 3 / 4; }
.tile[data-aspect="1:1"] { --ar: 1 / 1; }
.tile[data-aspect="4:3"] { --ar: 4 / 3; }
.tile[data-aspect="16:9"]{ --ar: 16 / 9; }
.tile[data-aspect="2:3"] { --ar: 2 / 3; }
.tile[data-aspect="3:2"] { --ar: 3 / 2; }

/* Изображение внутри плитки — заполняет её */
.tile__media{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}
.tile__art{
  position:absolute;inset:0;
  display:block;
  overflow:hidden;
  transform:scale(1);
  transition:transform .5s var(--ease);
}
.tile:hover .tile__art{transform:scale(1.05)}
.tile:active .tile__art{transform:scale(.985)}
.tile__art::after{
  content:"";
  position:absolute;inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='0.5'/></svg>");
  background-size:140px 140px;
  opacity:.34;
  mix-blend-mode:overlay;
  pointer-events:none;
}
.tile__media{
  position:absolute;inset:0;
  display:block;
  transform-origin:50% 50%;
}

/* ---------- procedural art presets (палитра: только цвета концепта) ---------- */
[data-art="neon"] .tile__media{
  background:
    radial-gradient(42% 52% at 28% 24%, color-mix(in oklab, var(--a) 82%, transparent), transparent 68%),
    radial-gradient(52% 62% at 78% 76%, color-mix(in oklab, var(--b) 62%, transparent), transparent 70%),
    radial-gradient(80% 90% at 50% 55%, color-mix(in oklab, var(--b) 16%, transparent), transparent 76%),
    linear-gradient(180deg, var(--c), var(--color-bg));
}
[data-art="chrome"] .tile__media{
  background:
    conic-gradient(from 200deg at 52% 48%,
      var(--c) 0deg,
      color-mix(in oklab, var(--a) 70%, transparent) 70deg,
      var(--c) 140deg,
      color-mix(in oklab, var(--b) 58%, transparent) 215deg,
      var(--c) 300deg,
      var(--c) 360deg),
    linear-gradient(160deg, var(--color-bg), var(--c));
}
[data-art="scan"] .tile__media{
  background:
    repeating-linear-gradient(112deg, color-mix(in oklab, var(--a) 30%, transparent) 0 4px, transparent 4px 12px),
    radial-gradient(66% 76% at 70% 18%, color-mix(in oklab, var(--b) 52%, transparent), transparent 72%),
    linear-gradient(200deg, var(--c), var(--color-bg));
}
[data-art="liquid"] .tile__media{
  background:
    radial-gradient(30% 40% at 22% 78%, color-mix(in oklab, var(--a) 72%, transparent), transparent 70%),
    radial-gradient(36% 46% at 62% 30%, color-mix(in oklab, var(--b) 68%, transparent), transparent 72%),
    radial-gradient(28% 34% at 84% 62%, color-mix(in oklab, var(--a) 42%, transparent), transparent 70%),
    linear-gradient(180deg, var(--color-bg), var(--c));
}
[data-art="grid"] .tile__media{
  background:
    repeating-linear-gradient(0deg, color-mix(in oklab, var(--a) 22%, transparent) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, color-mix(in oklab, var(--b) 18%, transparent) 0 1px, transparent 1px 24px),
    radial-gradient(62% 62% at 60% 38%, color-mix(in oklab, var(--a) 28%, transparent), transparent 72%),
    linear-gradient(180deg, var(--c), var(--color-bg));
}
[data-art="flare"] .tile__media{
  background:
    linear-gradient(115deg, transparent 40%, color-mix(in oklab, var(--a) 58%, transparent) 50%, transparent 58%),
    linear-gradient(115deg, transparent 46%, color-mix(in oklab, var(--b) 30%, transparent) 52%, transparent 64%),
    radial-gradient(72% 62% at 30% 82%, color-mix(in oklab, var(--a) 24%, transparent), transparent 72%),
    linear-gradient(200deg, var(--color-bg), var(--c));
}
[data-art="silhouette"] .tile__media{
  background:
    radial-gradient(38% 46% at 50% 44%, color-mix(in oklab, var(--a) 86%, transparent), transparent 72%),
    radial-gradient(30% 22% at 50% 80%, var(--color-bg) 62%, transparent 76%),
    radial-gradient(13% 16% at 50% 40%, var(--color-bg) 70%, transparent 84%),
    linear-gradient(180deg, var(--c), var(--color-bg));
}
[data-art="duo"] .tile__media{
  background:
    linear-gradient(155deg, color-mix(in oklab, var(--a) 84%, transparent) 0%, transparent 56%),
    linear-gradient(335deg, color-mix(in oklab, var(--b) 72%, transparent) 0%, transparent 62%),
    var(--c);
}
/* Autoplay видео в плитке */
.tile__media--video{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  background:#0B0B0C;
}
.tile__play{
  position:absolute;
  right:8px;bottom:8px;
  width:22px;height:22px;
  display:grid;place-items:center;
  border-radius:50%;
  background:rgba(11,11,12,0.68);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  color:#fff;
  font-size:9px;
  line-height:1;
  pointer-events:none;
  transition:opacity .22s var(--ease);
}
.tile[data-video="1"] .tile__play{
  transition:opacity .22s var(--ease);
}
.tile[data-video="1"].is-playing .tile__play{
  opacity:0;
}

.tile__flash{
  position:absolute;inset:0;
  border:2px solid var(--color-primary);
  opacity:0;
  pointer-events:none;
}

.empty{
  margin:0;
  padding:56px var(--pad-x) 0;
  font-size:14px;
  color:var(--color-muted);
  max-width:34ch;
}

/* ---------- infinite scroll: spinner ---------- */
.feed-spinner{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px var(--pad-x) 28px;
  font-size:13px;
  color:var(--color-muted);
}
.feed-spinner::before{
  content:"";
  width:14px;height:14px;
  margin-right:10px;
  border:2px solid var(--color-line);
  border-top-color:var(--color-primary);
  border-radius:50%;
  animation:spin 0.8s linear infinite;
}
@keyframes spin{
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce){
  .feed-spinner::before{ animation:none; }
}

/* ---------- fullscreen reference card ---------- */
.card{
  position:fixed;inset:0;z-index:90;
  background:var(--color-bg);
  overflow:hidden;
}
.card__stage{
  position:absolute;inset:0;
  overflow:hidden;
  touch-action:none;
}
.card__track{
  display:flex;
  width:300%;height:100%;
  transform:translateX(-33.3333%);
  will-change:transform;
}
.slide{
  position:relative;
  flex:0 0 33.3333%;
  height:100%;
  overflow:hidden;
  background:var(--color-surface);
}
.card__top{
  position:absolute;left:0;right:0;top:0;z-index:3;
  display:flex;align-items:center;gap:10px;
  padding:12px var(--pad-x);
  padding-top:max(12px, env(safe-area-inset-top));
  pointer-events:none;
}
.card__top > *{pointer-events:auto}
.card__index{
  flex:1 1 auto;text-align:center;
  font-family:var(--font-display);
  font-size:12px;letter-spacing:.04em;
  color:var(--color-muted);
}
.iconbtn--glass{
  background:color-mix(in oklab, var(--color-bg) 52%, transparent);
  border-color:color-mix(in oklab, var(--color-text) 16%, transparent);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
}
.card__sheet{
  position:absolute;left:0;right:0;bottom:0;z-index:4;
  padding:18px var(--pad-x) calc(18px + env(safe-area-inset-bottom));
  background:color-mix(in oklab, var(--color-surface) 88%, transparent);
  -webkit-backdrop-filter:blur(26px) saturate(1.2);
  backdrop-filter:blur(26px) saturate(1.2);
  border-top:1px solid var(--color-line);
  transform:translateY(112%);
  transition:transform .36s var(--ease);
}
.card.is-open .card__sheet{transform:none;transition-delay:.14s}
.sheet__title{
  margin:0 0 5px;
  font-family:var(--font-display);
  font-size:20px;font-weight:700;letter-spacing:-.02em;
}
.sheet__tags{
  margin:0 0 14px;
  font-size:12px;color:var(--color-muted);
}
.proof{
  display:flex;align-items:center;gap:10px;
  margin-bottom:16px;
}
.proof__avs{display:flex;flex:0 0 auto;padding-left:6px}
.av{
  width:22px;height:22px;
  margin-left:-6px;
  display:grid;place-items:center;
  border-radius:var(--radius-btn);
  border:1px solid var(--color-bg);
  background:color-mix(in oklab, var(--color-text) 16%, var(--color-surface));
  color:var(--color-text);
  font-size:8px;font-weight:700;letter-spacing:.02em;
}
.proof__text{margin:0;font-size:12px;color:var(--color-muted)}
.proof__text b{color:var(--color-text);font-weight:600}
.sheet__actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:8px;
  min-height:48px;
  padding:0 18px;
  border:1px solid transparent;
  border-radius:var(--radius-btn);
  font-size:14px;font-weight:600;
  text-decoration:none;
  cursor:pointer;
  transition:transform .18s var(--ease), opacity .2s;
}
.btn:active{transform:scale(.97)}
.btn--primary{
  grid-column:1 / -1;
  background:var(--color-primary);
  color:var(--color-bg);
  border-color:var(--color-primary);
  font-weight:700;
}
.btn--primary:hover{transform:translateY(-1px)}
.btn--ghost{
  background:transparent;
  border-color:var(--color-line);
  color:var(--color-text);
}
.btn--ghost:hover{background:color-mix(in oklab, var(--color-text) 9%, transparent)}

.btn--danger{
  background:var(--color-accent);
  color:var(--color-bg);
  border-color:var(--color-accent);
  font-weight:700;
}
.btn--danger:hover{filter:brightness(1.08)}
.btn--danger:active{transform:scale(.97)}

/* ---------- moodboard ---------- */
.board{
  position:fixed;inset:0;z-index:120;
  display:flex;align-items:flex-end;
}
.board__scrim{
  position:absolute;inset:0;
  background:color-mix(in oklab, var(--color-bg) 74%, transparent);
  opacity:0;
  transition:opacity .26s var(--ease);
}
.board.is-open .board__scrim{opacity:1}
.board__panel{
  position:relative;
  width:100%;
  max-height:84vh;
  display:flex;flex-direction:column;
  background:var(--color-surface);
  border-top:1px solid var(--color-line);
  border-radius:var(--radius-card) var(--radius-card) 0 0;
  padding-bottom:env(safe-area-inset-bottom);
  transform:translateY(100%);
  transition:transform .38s var(--ease);
}
.board.is-open .board__panel{transform:none}
.board__head{
  display:flex;align-items:baseline;gap:10px;
  padding:18px var(--pad-x) 12px;
}
.board__title{
  margin:0;
  font-family:var(--font-display);
  font-size:19px;font-weight:700;letter-spacing:-.02em;
}
.board__count{font-size:12px;color:var(--color-muted)}
.board__close{margin-left:auto;align-self:center}
.board__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:6px;
  padding:0 var(--pad-x) 4px;
  overflow-y:auto;
  max-height:52vh;
}
.thumb{
  position:relative;
  margin:0;
  aspect-ratio:1/1;
  border-radius:var(--radius-card);
  overflow:hidden;
  background:var(--color-bg);
}
.thumb__x{
  position:absolute;top:6px;right:6px;
  width:26px;height:26px;
  display:grid;place-items:center;
  border:0;border-radius:var(--radius-btn);
  background:color-mix(in oklab, var(--color-bg) 70%, transparent);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  font-size:15px;line-height:1;
  cursor:pointer;
  transition:transform .18s var(--ease);
}
.thumb__x:hover{background:var(--color-accent)}
.thumb__x:active{transform:scale(.9)}
.board__empty{
  margin:0;
  padding:24px var(--pad-x) 28px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:6px;
}
.board__empty-icon{
  color:var(--color-muted);
  opacity:.6;
  margin-bottom:6px;
}
.board__empty-title{
  margin:0;
  font-family:var(--font-display);
  font-size:16px;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--color-text);
}
.board__empty-text{
  margin:0 0 12px;
  font-size:13px;
  line-height:1.5;
  color:var(--color-muted);
  max-width:32ch;
}
.board__empty .btn--primary{
  grid-column:auto;
  max-width:220px;
}
.board__foot{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  padding:14px var(--pad-x) 18px;
  border-top:1px solid var(--color-line);
}
.board__foot .btn--primary{grid-column:1 / -1}

/* ---------- footer ---------- */
.foot{
  position:relative;z-index:1;
  padding:var(--space-section) var(--pad-x) 40px;
  border-top:1px solid var(--color-line);
  background:var(--color-bg);
}
.foot__brand{
  margin:0 0 8px;
  font-family:var(--font-display);
  font-size:24px;font-weight:700;letter-spacing:-.03em;
}
.foot__text{
  margin:0 0 18px;
  max-width:44ch;
  font-size:13px;
  color:var(--color-muted);
}
.foot__note{
  margin:22px 0 0;
  font-size:11px;
  color:color-mix(in oklab, var(--color-text) 38%, transparent);
}

/* ---------- collage modal ---------- */
.collage{
  position:fixed;inset:0;z-index:140;
  display:flex;align-items:center;justify-content:center;
}
.collage__scrim{
  position:absolute;inset:0;
  background:color-mix(in oklab, var(--color-bg) 82%, transparent);
  opacity:0;transition:opacity .26s var(--ease);
}
.collage.is-open .collage__scrim{opacity:1}
.collage__panel{
  position:relative;
  width:min(92vw, 520px);
  max-height:92vh;
  display:flex;flex-direction:column;
  background:var(--color-surface);
  border:1px solid var(--color-line);
  border-radius:var(--radius-card);
  padding-bottom:env(safe-area-inset-bottom);
  transform:scale(.94);
  opacity:0;
  transition:transform .3s var(--ease), opacity .26s var(--ease);
}
.collage.is-open .collage__panel{transform:none;opacity:1}
.collage__head{
  display:flex;align-items:center;gap:10px;
  padding:14px var(--pad-x);
  border-bottom:1px solid var(--color-line);
}
.collage__title{
  margin:0;flex:1 1 auto;
  font-family:var(--font-display);
  font-size:16px;font-weight:700;letter-spacing:-.01em;
}
.collage__close{flex:0 0 auto}
.collage__stage{
  flex:1 1 auto;
  display:flex;align-items:center;justify-content:center;
  padding:14px;
  overflow:auto;
  background:var(--color-bg);
}
.collage__img{
  max-width:100%;
  max-height:60vh;
  display:block;
  border-radius:var(--radius-xs);
  box-shadow:0 8px 30px rgba(0,0,0,.5);
}
.collage__actions{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
  padding:12px var(--pad-x) 14px;
  border-top:1px solid var(--color-line);
}

/* ---------- bottom navigation ---------- */
.bottom-nav{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:65;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  background:color-mix(in oklab, var(--color-bg) 88%, transparent);
  -webkit-backdrop-filter:blur(20px) saturate(1.3);
  backdrop-filter:blur(20px) saturate(1.3);
  border-top:1px solid var(--color-line);
  padding-bottom:env(safe-area-inset-bottom);
  padding-top:6px;
}
.bottom-nav__item{
  position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;
  padding:6px 2px 8px;
  border:0;
  background:transparent;
  color:var(--color-muted);
  font-size:9.5px;
  font-weight:500;
  letter-spacing:.01em;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:color .15s;
}
.bottom-nav__item:active{transform:scale(.94)}
.bottom-nav__item svg{display:block}
.bottom-nav__item--active{color:var(--color-primary)}
.bottom-nav__item--active svg{stroke:var(--color-primary)}
.bottom-nav__item span:not(.bottom-nav__badge){line-height:1.1}

/* Тренды: золотой акцент. Заметно, но не выбивается из палитры.
   Когда таб активен — остаётся обычный --color-primary (лаймовый),
   чтобы не сбивать визуальный язык "я сейчас на этой вкладке". */
.bottom-nav__item--trending:not(.bottom-nav__item--active){
  color:#E5BE3D;
}
.bottom-nav__item--trending:not(.bottom-nav__item--active) svg{
  stroke:#E5BE3D;
  filter:drop-shadow(0 0 4px rgba(229,190,61,.35));
}
.bottom-nav__item--trending:not(.bottom-nav__item--active):active{
  color:#F0CE5A;
}
.bottom-nav__item--badge{position:relative}
.bottom-nav__badge{
  position:absolute;
  top:4px;right:calc(50% - 22px);
  min-width:16px;height:16px;
  padding:0 4px;
  border-radius:8px;
  background:var(--color-primary);
  color:var(--color-bg);
  font-size:10px;font-weight:800;
  display:grid;place-items:center;
  line-height:1;
}
.bottom-nav__badge:empty,
.bottom-nav__badge[data-empty="1"]{display:none}

/* Сдвигаем контент под nav */
body{padding-bottom:calc(56px + env(safe-area-inset-bottom))}
main{padding-bottom:calc(20px + env(safe-area-inset-bottom))}

/* Вайб-панель — над nav */
.vibe{bottom:auto; top:var(--topbar-h)}

/* Сдвигаем футер */
.foot{padding-bottom:calc(40px + 56px + env(safe-area-inset-bottom))}

/* ---------- Insta Vaibe: fullscreen feed ---------- */
.feed-screen{
  position:fixed;
  inset:0;
  z-index:80;
  background:#000;
  overflow-y:auto;
  overflow-x:hidden;
  scroll-snap-type:y mandatory;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;
  scrollbar-width:none;
}
.feed-screen::-webkit-scrollbar{display:none}
.feed-screen__top{
  position:fixed;
  top:0;left:0;right:0;
  z-index:82;
  display:flex;align-items:center;justify-content:space-between;
  padding:12px var(--pad-x);
  padding-top:max(12px, env(safe-area-inset-top));
  pointer-events:none;
}
.feed-screen__top > *{pointer-events:auto}
.feed-screen__brand{
  font-family:var(--font-display);
  font-weight:700;
  font-size:15px;
  letter-spacing:-.01em;
  color:var(--color-text);
  background:color-mix(in oklab, var(--color-bg) 55%, transparent);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  padding:6px 12px;
  border-radius:100px;
  border:1px solid color-mix(in oklab, var(--color-text) 16%, transparent);
}
.feed-screen__close{
  background:color-mix(in oklab, var(--color-bg) 55%, transparent);
  border-color:color-mix(in oklab, var(--color-text) 16%, transparent);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
}

/* слайд = одна работа */
.feed-slide{
  position:relative;
  width:100%;
  height:100vh;
  height:100dvh;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  background:#0B0B0C;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.feed-slide__img,
.feed-slide__video{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;
  user-select:none;
  -webkit-user-drag:none;
  background:#000;
}

/* кнопки поверх — внизу справа */
.feed-slide__actions{
  position:absolute;
  right:14px;
  bottom:calc(80px + env(safe-area-inset-bottom));
  display:flex;
  flex-direction:column;
  gap:10px;
  transition:opacity .25s var(--ease), transform .25s var(--ease);
}
.feed-slide--hide-ui .feed-slide__actions{
  opacity:0;
  pointer-events:none;
  transform:translateY(10px);
}
.feed-slide__btn{
  width:46px;height:46px;
  display:grid;place-items:center;
  border:1px solid color-mix(in oklab, var(--color-text) 22%, transparent);
  border-radius:50%;
  background:color-mix(in oklab, var(--color-bg) 55%, transparent);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  color:var(--color-text);
  cursor:pointer;
  transition:transform .15s var(--ease), background .15s;
}
.feed-slide__btn:active{transform:scale(.9)}
.feed-slide__btn svg{display:block}
.feed-slide__btn.is-saved{
  color:var(--color-bg);
  background:var(--color-primary);
  border-color:var(--color-primary);
}
.feed-slide__btn.is-saved svg path{fill:var(--color-bg)}
/* Seedance Mini — нейтральная иконка с пометкой M */
.feed-slide__btn--gen-mini{
  border-color:color-mix(in oklab, var(--color-text) 22%, transparent);
}
/* Seedance 2 Pro — акцентная иконка с пометкой P */
.feed-slide__btn--gen-pro{
  border-color:var(--color-primary);
  color:var(--color-primary);
  background:color-mix(in oklab, var(--color-primary) 14%, transparent);
}
.feed-slide__btn--gen-pro:active{
  background:color-mix(in oklab, var(--color-primary) 25%, transparent);
}

/* индикатор прогресса внизу */
.feed-screen__loader{
  position:fixed;
  left:50%;
  bottom:calc(80px + env(safe-area-inset-bottom));
  transform:translateX(-50%);
  z-index:81;
  padding:8px 16px;
  border-radius:100px;
  background:color-mix(in oklab, var(--color-bg) 75%, transparent);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  color:var(--color-muted);
  font-size:12px;
  pointer-events:none;
}

/* ---------- Trending screen ---------- */
.trending-screen{
  position:fixed;
  inset:0;
  z-index:78;
  background:var(--color-bg);
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
}
.trending-screen__top{
  position:sticky;
  top:0;
  z-index:3;
  display:flex;align-items:center;justify-content:space-between;
  padding:12px var(--pad-x);
  padding-top:max(12px, env(safe-area-inset-top));
  background:color-mix(in oklab, var(--color-bg) 82%, transparent);
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
  border-bottom:1px solid var(--color-line);
}
.trending-screen__brand{
  font-family:var(--font-display);
  font-weight:700;
  font-size:16px;
  letter-spacing:-.01em;
}
.trending-screen__hint{
  padding:10px var(--pad-x) 8px;
  font-size:12px;
  color:var(--color-muted);
}
.trending-screen__body{
  padding-bottom:calc(80px + env(safe-area-inset-bottom));
}
.trending-grid{
  column-count:2;
  column-gap:6px;
  padding:6px;
}
@media (min-width:640px){ .trending-grid{column-count:3} }
@media (min-width:1024px){ .trending-grid{column-count:4} }
@media (min-width:1440px){ .trending-grid{column-count:5} }

.trending-tile{
  position:relative;
  display:block;
  width:100%;
  break-inside:avoid;
  margin:0 0 6px 0;
  padding:0;
  border:0;
  background:var(--color-surface);
  overflow:hidden;
  cursor:pointer;
  aspect-ratio:var(--ar, 3 / 4);
  -webkit-tap-highlight-color:transparent;
}
.trending-tile[data-aspect="9:16"]{ --ar: 9 / 16; }
.trending-tile[data-aspect="3:4"] { --ar: 3 / 4; }
.trending-tile[data-aspect="1:1"] { --ar: 1 / 1; }
.trending-tile[data-aspect="4:3"] { --ar: 4 / 3; }
.trending-tile[data-aspect="16:9"]{ --ar: 16 / 9; }
.trending-tile__img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}
.trending-tile__rank{
  position:absolute;
  top:6px;left:6px;
  min-width:24px;height:24px;
  padding:0 6px;
  display:grid;place-items:center;
  border-radius:100px;
  background:color-mix(in oklab, var(--color-bg) 72%, transparent);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  color:var(--color-primary);
  font-size:11px;
  font-weight:800;
  letter-spacing:.02em;
}
.trending-tile__score{
  position:absolute;
  bottom:6px;left:6px;
  padding:3px 8px;
  border-radius:100px;
  background:color-mix(in oklab, var(--color-bg) 72%, transparent);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  color:var(--color-text);
  font-size:11px;
  font-weight:600;
  letter-spacing:.01em;
}
.trending-tile__score b{color:var(--color-primary);font-weight:800}

/* ---------- topup modal ---------- */
.topup{
  position:fixed;inset:0;z-index:135;
  display:flex;align-items:flex-end;
}
.topup__scrim{
  position:absolute;inset:0;
  background:color-mix(in oklab, var(--color-bg) 76%, transparent);
  opacity:0;
  transition:opacity .26s var(--ease);
}
.topup.is-open .topup__scrim{opacity:1}
.topup__panel{
  position:relative;
  width:100%;
  max-height:92vh;
  display:flex;flex-direction:column;
  background:var(--color-surface);
  border-top:1px solid var(--color-line);
  border-radius:var(--radius-card) var(--radius-card) 0 0;
  padding:18px var(--pad-x) 0;
  transform:translateY(100%);
  transition:transform .38s var(--ease);
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
}
.topup.is-open .topup__panel{transform:none}
.topup__head{
  display:flex;align-items:center;gap:10px;
  margin-bottom:14px;
}
.topup__title{
  margin:0;flex:1 1 auto;
  font-family:var(--font-display);
  font-size:19px;font-weight:700;letter-spacing:-.02em;
}
.topup__close{flex:0 0 auto}

.topup__promo{
  display:flex;align-items:center;gap:10px;
  padding:12px 14px;
  margin-bottom:16px;
  border:1px solid color-mix(in oklab, var(--color-primary) 45%, transparent);
  border-radius:var(--radius-sm);
  background:color-mix(in oklab, var(--color-primary) 10%, transparent);
  color:var(--color-text);
  font-size:13px;
  line-height:1.35;
}
.topup__promo-fire{font-size:18px}
.topup__promo-text b{color:var(--color-primary);font-weight:800}

.topup__section{margin-bottom:14px}
.topup__label{
  display:block;
  margin-bottom:6px;
  font-size:12px;
  color:var(--color-muted);
  font-weight:600;
  letter-spacing:.02em;
  text-transform:uppercase;
}
.topup__email{
  width:100%;
  padding:12px 14px;
  background:color-mix(in oklab, var(--color-text) 6%, transparent);
  border:1px solid var(--color-line);
  border-radius:var(--radius-sm);
  color:var(--color-text);
  font-family:inherit;
  font-size:15px;
  outline:none;
  transition:border-color .15s;
}
.topup__email:focus{border-color:var(--color-primary)}

/* Баннер-предупреждение над полем email */
.topup__email-banner{
  display:flex;gap:12px;align-items:flex-start;
  padding:14px;margin-bottom:14px;
  border-radius:12px;
  background:color-mix(in oklab, #E5BE3D 12%, var(--color-surface));
  border:1.5px solid color-mix(in oklab, #E5BE3D 60%, transparent);
  animation:topupBannerIn .28s var(--ease);
}
@keyframes topupBannerIn{
  from{opacity:0;transform:translateY(-6px)}
  to{opacity:1;transform:none}
}
.topup__email-banner-icon{font-size:26px;line-height:1;flex-shrink:0}
.topup__email-banner-body{display:flex;flex-direction:column;gap:4px}
.topup__email-banner-title{font-size:14px;font-weight:700;letter-spacing:-.01em;color:var(--color-text)}
.topup__email-banner-text{font-size:12.5px;line-height:1.45;color:color-mix(in oklab, var(--color-text) 72%, transparent)}

/* Подсветка поля email при ошибке */
.topup__email--error{
  border-color:#FF6B6B !important;
  box-shadow:0 0 0 3px color-mix(in oklab, #FF6B6B 22%, transparent);
  animation:topupEmailShake .5s var(--ease);
}
@keyframes topupEmailShake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-4px)}
  40%{transform:translateX(4px)}
  60%{transform:translateX(-3px)}
  80%{transform:translateX(3px)}
}

.topup__email-saved{
  display:flex;
  align-items:center;
  gap:8px;
  padding:12px 14px;
  background:color-mix(in oklab, var(--color-primary) 8%, transparent);
  border:1px solid color-mix(in oklab, var(--color-primary) 35%, transparent);
  border-radius:var(--radius-sm);
  font-size:13px;
  line-height:1.3;
  flex-wrap:wrap;
}
.topup__email-check{
  flex:0 0 auto;
  width:20px;height:20px;
  display:grid;place-items:center;
  border-radius:50%;
  background:var(--color-primary);
  color:var(--color-bg);
  font-size:13px;
  font-weight:900;
  line-height:1;
}
.topup__email-label{
  color:var(--color-muted);
  font-weight:500;
}
.topup__email-value{
  color:var(--color-text);
  font-weight:700;
  word-break:break-all;
  flex:1 1 auto;
  min-width:0;
}
.topup__email-change{
  flex:0 0 auto;
  padding:4px 10px;
  border:1px solid var(--color-line);
  border-radius:100px;
  background:transparent;
  color:var(--color-text);
  font-size:11px;
  font-weight:600;
  cursor:pointer;
  transition:background .15s;
}
.topup__email-change:hover{
  background:color-mix(in oklab, var(--color-text) 10%, transparent);
}

/* .topup__grid{display:grid;2x2} — УДАЛЕНО, заменено на flex-column ниже */
/* .topup__pack* правила УДАЛЕНЫ — используются .tariff* */

.topup__panel .topup__grid{
  display:flex !important;
  flex-direction:column !important;
  gap:12px !important;
  padding-bottom:8px;
}

/* Radio-кружок выбора */
.topup__panel .tariff__radio{
  position:absolute;
  top:16px;
  right:16px;
  width:22px;
  height:22px;
  z-index:1;
  border-radius:50%;
  border:1.5px solid color-mix(in oklab, var(--color-text) 22%, transparent);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:border-color .18s var(--ease), background-color .18s var(--ease);
  flex-shrink:0;
}
.topup__panel .tariff--featured .tariff__radio{
  top:22px;
  border-color:color-mix(in oklab, #E5BE3D 35%, transparent);
}
.topup__panel .tariff__radio-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--color-primary);
  transform:scale(0);
  transition:transform .18s var(--ease);
}
.topup__panel .tariff--selected .tariff__radio{
  border-color:var(--color-primary);
}
.topup__panel .tariff--selected .tariff__radio-dot{
  transform:scale(1);
}
.topup__panel .tariff--featured.tariff--selected .tariff__radio{
  border-color:#E5BE3D;
}
.topup__panel .tariff--featured.tariff--selected .tariff__radio-dot{
  background:#E5BE3D;
}

/* Selected state — зелёная полоска слева + светлее фон */
.topup__panel .tariff--selected{
  background:color-mix(in oklab, var(--color-text) 4%, var(--color-surface));
  border-color:color-mix(in oklab, var(--color-text) 22%, transparent);
}
.topup__panel .tariff--selected::before{
  content:"";
  position:absolute;
  left:-1px;
  top:18px;
  bottom:18px;
  width:3px;
  border-radius:0 3px 3px 0;
  background:var(--color-primary);
  z-index:1;
}
.topup__panel .tariff--featured.tariff--selected{
  background:linear-gradient(
    165deg,
    color-mix(in oklab, #E5BE3D 13%, var(--color-surface)) 0%,
    var(--color-surface) 55%
  );
  box-shadow:
    0 0 0 1px color-mix(in oklab, #E5BE3D 35%, transparent),
    0 20px 56px -20px color-mix(in oklab, #E5BE3D 85%, transparent);
}
.topup__panel .tariff--featured.tariff--selected::before{
  background:#E5BE3D;
  top:24px;
  bottom:24px;
}

/* Subtitle под заголовком */
.topup__panel .topup__subtitle{
  display:flex;
  gap:14px;
  padding:8px 0 14px;
  font-size:12px;
  color:color-mix(in oklab, var(--color-text) 60%, transparent);
}
.topup__panel .topup__subtitle span{
  display:inline-flex;
  align-items:center;
  gap:5px;
}

/* Sticky pay-bar внизу панели */
.topup__panel .topup__sticky{
  position:sticky;
  bottom:0;
  margin:14px calc(-1 * var(--pad-x)) 0;
  padding:10px var(--pad-x) calc(12px + env(safe-area-inset-bottom));
  background:color-mix(in oklab, var(--color-surface) 96%, transparent);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  border-top:1px solid color-mix(in oklab, var(--color-text) 10%, transparent);
  z-index:2;
  flex-shrink:0;
}
.topup__panel .topup__sticky-row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:10px;
  margin-bottom:8px;
  font-size:12px;
  color:color-mix(in oklab, var(--color-text) 60%, transparent);
}
.topup__panel .topup__sticky-info b{
  color:var(--color-text);
  font-weight:700;
}
.topup__panel .topup__sticky-tokens{
  color:color-mix(in oklab, var(--color-text) 60%, transparent);
}
.topup__panel .topup__sticky-tokens b{
  color:var(--color-primary);
  font-weight:800;
  font-size:14px;
}
.topup__panel .topup__sticky-btn{
  width:100%;
  padding:12px;
  border:none;
  border-radius:12px;
  background:var(--color-primary);
  color:var(--color-bg);
  font-size:14px;
  font-weight:800;
  letter-spacing:-.01em;
  cursor:pointer;
  transition:transform .15s var(--ease), opacity .2s;
  -webkit-tap-highlight-color:transparent;
  font-family:inherit;
}
.topup__panel .topup__sticky-btn:active{
  transform:scale(.985);
}
.topup__panel .topup__sticky-btn:disabled{
  background:color-mix(in oklab, var(--color-text) 20%, transparent);
  color:color-mix(in oklab, var(--color-text) 45%, transparent);
  cursor:not-allowed;
}

.tariff{
  position:relative;
  display:flex;
  flex-direction:column;
  padding:18px 18px 18px;
  border-radius:20px;
  border:1px solid color-mix(in oklab, var(--color-text) 10%, transparent);
  background:var(--color-surface);
  color:var(--color-text);
  text-align:left;
  cursor:pointer;
  transition:transform .18s var(--ease), border-color .18s var(--ease), box-shadow .22s var(--ease);
  -webkit-tap-highlight-color:transparent;
  font-family:inherit;
  overflow:hidden;
}

.tariff:hover{
  border-color:color-mix(in oklab, var(--color-text) 24%, transparent);
  transform:translateY(-1px);
}

.tariff:active{
  transform:scale(.985);
}

/* === FEATURED (Оптимальный) === */
.tariff--featured{
  border:1.5px solid #E5BE3D;
  background:linear-gradient(
    165deg,
    color-mix(in oklab, #E5BE3D 10%, var(--color-surface)) 0%,
    var(--color-surface) 55%
  );
  box-shadow:
    0 0 0 1px color-mix(in oklab, #E5BE3D 20%, transparent),
    0 16px 48px -20px color-mix(in oklab, #E5BE3D 70%, transparent);
  padding-top:18px;
}

.tariff--featured:hover{
  transform:translateY(-1px);
  box-shadow:
    0 0 0 1px color-mix(in oklab, #E5BE3D 35%, transparent),
    0 20px 56px -20px color-mix(in oklab, #E5BE3D 85%, transparent);
}

/* Плашка сверху — снаружи, работает как визуальный якорь */
.tariff__badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  align-self:flex-start;
  padding:5px 11px;
  margin-bottom:10px;
  border-radius:100px;
  background:linear-gradient(180deg, #F4D264 0%, #E5BE3D 100%);
  color:#1A1400;
  font-size:10px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  white-space:nowrap;
  box-shadow:
    0 4px 14px -4px rgba(229, 190, 61, .55),
    inset 0 1px 0 rgba(255,255,255,.45);
}
.tariff__badge-dot{
  width:5px;
  height:5px;
  border-radius:50%;
  background:#1A1400;
  flex-shrink:0;
}

/* === HEAD: имя + экономия === */
.tariff__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:14px;
  padding-right:34px;
}

.tariff__name{
  font-family:var(--font-display);
  font-size:14px;
  font-weight:700;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:color-mix(in oklab, var(--color-text) 62%, transparent);
}

.tariff--featured .tariff__name{
  color:#F4D264;
}

.tariff__savings{
  display:inline-flex;
  align-items:center;
  padding:3px 10px;
  border-radius:100px;
  background:color-mix(in oklab, var(--color-primary) 16%, transparent);
  color:var(--color-primary);
  font-size:11px;
  font-weight:800;
  letter-spacing:.02em;
  white-space:nowrap;
  margin-right:30px;
}

.tariff--featured .tariff__savings{
  background:color-mix(in oklab, #E5BE3D 26%, transparent);
  color:#F4D264;
}

/* === HERO: БОЛЬШИЕ токены + цена === */
.tariff__hero{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}

.tariff__tokens-block{
  display:flex;
  align-items:baseline;
  gap:8px;
}

.tariff__tokens{
  font-family:var(--font-display);
  font-size:38px;
  font-weight:800;
  letter-spacing:-.04em;
  line-height:.95;
  color:var(--color-primary);
}

.tariff--featured .tariff__tokens{
  color:#F4D264;
  text-shadow:0 0 24px color-mix(in oklab, #E5BE3D 45%, transparent);
}

.tariff__tokens-label{
  font-size:11px;
  font-weight:700;
  color:color-mix(in oklab, var(--color-text) 48%, transparent);
  letter-spacing:.06em;
  text-transform:uppercase;
}

/* Старое количество токенов (зачёркнутое, тусклое) — при активной акции */
.tariff__tokens-old{
  font-family:var(--font-display);
  font-size:22px;
  font-weight:700;
  letter-spacing:-.02em;
  color:color-mix(in oklab, var(--color-text) 42%, transparent);
  text-decoration:line-through;
  text-decoration-thickness:2px;
  text-decoration-color:color-mix(in oklab, var(--color-text) 55%, transparent);
  margin-right:8px;
  line-height:1;
  align-self:baseline;
}
.tariff--featured .tariff__tokens-old{
  color:color-mix(in oklab, #F4D264 45%, transparent);
  text-decoration-color:color-mix(in oklab, #F4D264 60%, transparent);
}

.tariff__price{
  font-family:var(--font-display);
  font-size:22px;
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--color-text);
  white-space:nowrap;
}

.tariff--featured .tariff__price{
  color:#F4D264;
}

/* === COUNTS: что можно сделать — 2 плашки === */
.tariff__counts{
  display:flex;
  gap:8px;
  margin-bottom:14px;
}

.tariff__count{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:10px 12px;
  border-radius:12px;
  background:color-mix(in oklab, var(--color-text) 5%, transparent);
  font-size:11px;
  font-weight:600;
  color:color-mix(in oklab, var(--color-text) 55%, transparent);
  text-transform:uppercase;
  letter-spacing:.04em;
  line-height:1.2;
}

.tariff__count strong{
  display:flex;
  align-items:baseline;
  gap:7px;
  font-family:var(--font-display);
  font-size:18px;
  font-weight:800;
  letter-spacing:-.01em;
  color:var(--color-text);
  text-transform:none;
  margin-top:2px;
}

/* Старое значение — мелкое, тусклое, зачёркнутое */
.tariff__val-old{
  font-family:var(--font-display);
  font-size:13px;
  font-weight:600;
  color:color-mix(in oklab, var(--color-text) 38%, transparent);
  text-decoration:line-through;
  text-decoration-thickness:1.5px;
  text-decoration-color:color-mix(in oklab, var(--color-text) 48%, transparent);
  letter-spacing:0;
  line-height:1;
}
.tariff--featured .tariff__val-old{
  color:color-mix(in oklab, #F4D264 40%, transparent);
  text-decoration-color:color-mix(in oklab, #F4D264 50%, transparent);
}

/* Новое значение — крупное, яркое */
.tariff__val-new{
  font-family:var(--font-display);
  font-size:18px;
  font-weight:800;
  color:var(--color-text);
  letter-spacing:-.01em;
  line-height:1;
}
.tariff--featured .tariff__val-new{
  color:#F4D264;
}

.tariff--featured .tariff__count{
  background:color-mix(in oklab, #E5BE3D 8%, transparent);
  color:color-mix(in oklab, #F4D264 70%, transparent);
}

.tariff--featured .tariff__count strong{
  color:#F4D264;
}

/* === FEATURES === */
.tariff__features{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:7px;
  padding-top:14px;
  border-top:1px solid color-mix(in oklab, var(--color-text) 8%, transparent);
}

.tariff--featured .tariff__features{
  border-top-color:color-mix(in oklab, #E5BE3D 18%, transparent);
}

.tariff__features li{
  position:relative;
  padding-left:24px;
  font-size:13px;
  line-height:1.4;
  color:color-mix(in oklab, var(--color-text) 85%, transparent);
}

.tariff__features li::before{
  content:"";
  position:absolute;
  left:0;
  top:2px;
  width:16px;
  height:16px;
  border-radius:50%;
  background-color:color-mix(in oklab, var(--color-primary) 15%, transparent);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C8FF3D' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12l5 5 9-11'/></svg>");
  background-size:10px;
  background-position:center;
  background-repeat:no-repeat;
}

.tariff--featured .tariff__features li::before{
  background-color:color-mix(in oklab, #E5BE3D 20%, transparent);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F4D264' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12l5 5 9-11'/></svg>");
}

/* === PROMO === */
.tariff__promo{
  margin-top:12px;
  padding:10px 12px;
  border-radius:12px;
  background:color-mix(in oklab, var(--color-primary) 12%, transparent);
  border:1px solid color-mix(in oklab, var(--color-primary) 30%, transparent);
  color:var(--color-primary);
  font-size:12px;
  font-weight:700;
  line-height:1.35;
}

.tariff--featured .tariff__promo{
  background:color-mix(in oklab, #E5BE3D 14%, transparent);
  border-color:color-mix(in oklab, #E5BE3D 36%, transparent);
  color:#F4D264;
}

@media (max-width:480px){
  .tariff{padding:18px 16px 16px}
  .tariff--featured{padding-top:26px}
  .tariff__tokens{font-size:34px}
  .tariff__price{font-size:20px}
  .tariff__features li{font-size:12.5px}
}
  font-weight:700;
  line-height:1.2;
}

.topup__status{
  margin-top:10px;
  padding:10px 14px;
  border-radius:var(--radius-sm);
  font-size:13px;
  text-align:center;
}
.topup__status.is-info{
  background:color-mix(in oklab, var(--color-primary) 12%, transparent);
  color:var(--color-primary);
}
.topup__status.is-err{
  background:color-mix(in oklab, var(--color-accent) 15%, transparent);
  color:var(--color-accent);
}

/* ---------- all-gens: все мои генерации ---------- */
.all-gens{
  position:fixed;inset:0;z-index:117;
  background:var(--color-bg);
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
}
.all-gens__top{
  position:sticky;top:0;z-index:3;
  display:flex;align-items:center;justify-content:space-between;
  padding:12px var(--pad-x);
  padding-top:max(12px, env(safe-area-inset-top));
  background:color-mix(in oklab, var(--color-bg) 82%, transparent);
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
  border-bottom:1px solid var(--color-line);
}
.all-gens__brand{
  font-family:var(--font-display);
  font-weight:700;
  font-size:16px;
  letter-spacing:-.01em;
}
.all-gens__grid{
  column-count:2;
  column-gap:6px;
  padding:6px 6px calc(20px + env(safe-area-inset-bottom));
}
@media (min-width:640px){ .all-gens__grid{column-count:3} }
@media (min-width:1024px){ .all-gens__grid{column-count:4} }
@media (min-width:1440px){ .all-gens__grid{column-count:5} }

.all-gens__tile{
  position:relative;
  display:block;
  width:100%;
  break-inside:avoid;
  margin:0 0 6px 0;
  padding:0;
  border:0;
  background:var(--color-surface);
  overflow:hidden;
  cursor:pointer;
  aspect-ratio:3 / 4;
  -webkit-tap-highlight-color:transparent;
}
.all-gens__tile img,
.all-gens__tile video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}
.all-gens__tile--video::after{
  content:"▶";
  position:absolute;
  left:6px;bottom:6px;
  width:22px;height:22px;
  display:grid;place-items:center;
  border-radius:50%;
  background:rgba(0,0,0,.55);
  color:#fff;
  font-size:10px;
  pointer-events:none;
}

/* ---------- gen-modal: моя генерация ---------- */
.gen-modal{
  position:fixed;inset:0;z-index:145;
  background:var(--color-bg);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.gen-modal__stage{
  position:absolute;inset:0;
  bottom:220px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:#000;
}
.gen-modal__stage img,
.gen-modal__stage video{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;
}
/* Постер + кнопка Play для видео */
.gen-modal__poster-wrap{
  position:relative;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.gen-modal__poster{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;
}
.gen-modal__play{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  border:0;
  background:transparent;
  padding:0;
  cursor:pointer;
  display:grid;
  place-items:center;
  transition:transform .15s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.gen-modal__play:active{transform:translate(-50%,-50%) scale(.92)}
.gen-modal__play:disabled{cursor:progress}
.gen-modal__play svg{
  display:block;
  filter:drop-shadow(0 4px 16px rgba(0,0,0,0.5));
}

.gen-modal__top{
  position:absolute;left:0;right:0;top:0;z-index:3;
  display:flex;align-items:center;gap:10px;
  padding:12px var(--pad-x);
  padding-top:max(12px, env(safe-area-inset-top));
  pointer-events:none;
}
.gen-modal__top > *{pointer-events:auto}
.gen-modal__meta{
  flex:1 1 auto;text-align:center;
  font-family:var(--font-display);
  font-size:11px;
  letter-spacing:.04em;
  color:var(--color-muted);
  text-transform:uppercase;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.gen-modal__sheet{
  position:absolute;left:0;right:0;bottom:0;z-index:4;
  padding:18px var(--pad-x) calc(18px + env(safe-area-inset-bottom));
  background:color-mix(in oklab, var(--color-surface) 92%, transparent);
  -webkit-backdrop-filter:blur(26px) saturate(1.2);
  backdrop-filter:blur(26px) saturate(1.2);
  border-top:1px solid var(--color-line);
  transform:translateY(110%);
  transition:transform .36s var(--ease);
  max-height:230px;
  overflow-y:auto;
}
.gen-modal.is-open .gen-modal__sheet{transform:none;transition-delay:.14s}

.gen-modal__info{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:12px;
}
.gen-modal__badge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:4px 10px;
  border-radius:100px;
  background:color-mix(in oklab, var(--color-text) 8%, transparent);
  border:1px solid var(--color-line);
  font-size:11px;
  font-weight:600;
  color:var(--color-text);
  white-space:nowrap;
}
.gen-modal__badge--model{
  color:var(--color-primary);
  border-color:color-mix(in oklab, var(--color-primary) 40%, transparent);
}

.gen-modal__prompt{
  margin:0 0 14px;
  font-size:13px;
  line-height:1.45;
  color:var(--color-muted);
  max-height:66px;
  overflow:hidden;
  position:relative;
  -webkit-mask-image:linear-gradient(180deg, #000 60%, transparent 100%);
  mask-image:linear-gradient(180deg, #000 60%, transparent 100%);
}

.gen-modal__actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.gen-modal__actions .btn--primary{
  grid-column:1 / -1;
  font-size:13px;
  min-height:42px;
}
.gen-modal__actions .btn--ghost{
  font-size:12px;
  min-height:38px;
}

@media (max-width:560px){
  .gen-modal__stage{bottom:200px}
  .gen-modal__prompt{max-height:54px}
}

/* ---------- sheet__model: бейдж нейросети в карточке ---------- */
.sheet__meta-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  margin:0 0 14px;
}
.sheet__model{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:3px 9px 3px 7px;
  background:color-mix(in oklab, var(--color-primary) 12%, transparent);
  border:1px solid color-mix(in oklab, var(--color-primary) 35%, transparent);
  border-radius:100px;
  font-size:11px;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--color-primary);
  line-height:1;
  white-space:nowrap;
  max-width:100%;
}
.sheet__model svg{
  flex:0 0 auto;
  display:block;
  opacity:.9;
}
.sheet__model span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.sheet__meta-row .sheet__tags{
  margin:0;
  font-size:12px;
  color:var(--color-muted);
}

/* ---------- toast ---------- */
/* ---------- In-app notification: акция +30% ---------- */
.promo-nudge{
  position:fixed;
  inset:0;
  z-index:160;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.promo-nudge__scrim{
  position:absolute;
  inset:0;
  background:color-mix(in oklab, var(--color-bg) 74%, transparent);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  opacity:0;
  transition:opacity .28s var(--ease);
}
.promo-nudge.is-open .promo-nudge__scrim{opacity:1}
.promo-nudge__panel{
  position:relative;
  width:100%;
  max-width:340px;
  padding:26px 22px 22px;
  border-radius:20px;
  background:linear-gradient(165deg,
    color-mix(in oklab, #E5BE3D 12%, var(--color-surface)) 0%,
    var(--color-surface) 70%);
  border:1.5px solid color-mix(in oklab, #E5BE3D 55%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in oklab, #E5BE3D 20%, transparent),
    0 24px 64px -24px color-mix(in oklab, #E5BE3D 75%, transparent);
  text-align:center;
  transform:scale(.92) translateY(20px);
  opacity:0;
  transition:transform .3s var(--ease), opacity .28s var(--ease);
}
.promo-nudge.is-open .promo-nudge__panel{
  transform:none;
  opacity:1;
}
.promo-nudge__icon{
  font-size:44px;
  line-height:1;
  margin-bottom:12px;
}
.promo-nudge__title{
  margin:0 0 8px;
  font-family:var(--font-display);
  font-size:19px;
  font-weight:800;
  letter-spacing:-.02em;
  color:#F4D264;
}
.promo-nudge__text{
  margin:0 0 20px;
  font-size:14px;
  line-height:1.5;
  color:color-mix(in oklab, var(--color-text) 78%, transparent);
}
.promo-nudge__text b{
  color:var(--color-text);
  font-weight:800;
  font-variant-numeric:tabular-nums;
}
.promo-nudge__actions{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.promo-nudge__btn{
  width:100%;
  padding:13px;
  border-radius:12px;
  font-family:inherit;
  font-size:14px;
  font-weight:800;
  letter-spacing:-.01em;
  cursor:pointer;
  border:none;
  transition:transform .15s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.promo-nudge__btn:active{transform:scale(.97)}
.promo-nudge__btn--primary{
  background:linear-gradient(180deg, #F4D264 0%, #E5BE3D 100%);
  color:#1A1400;
  box-shadow:0 8px 22px -8px rgba(229,190,61,.7);
}
.promo-nudge__btn--ghost{
  background:transparent;
  border:1px solid color-mix(in oklab, var(--color-text) 15%, transparent);
  color:color-mix(in oklab, var(--color-text) 70%, transparent);
}

.toast{
  position:fixed;
  left:50%;bottom:calc(24px + env(safe-area-inset-bottom));
  z-index:200;
  max-width:calc(100vw - 28px);
  padding:11px 18px;
  border-radius:var(--radius-btn);
  background:var(--color-text);
  color:var(--color-bg);
  font-size:13px;font-weight:600;
  text-align:center;
  opacity:0;
  transform:translate(-50%,14px);
  pointer-events:none;
  transition:opacity .22s var(--ease), transform .3s var(--ease);
}
.toast.is-on{opacity:1;transform:translate(-50%,0)}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: no-preference){
  .tile{
    opacity:0;
    transform:translate3d(0,22px,0);
  }
  .tile.is-in{
    opacity:1;
    transform:none;
    transition:opacity .5s var(--ease), transform .62s var(--ease);
    transition-delay:var(--d,0ms);
  }
  .tile.is-pop{animation:pop .42s var(--ease) both}
  .tile.is-saved .tile__flash{animation:flash .85s var(--ease)}
  [data-video="1"] .tile__media{animation:drift 22s ease-in-out infinite alternate}
  .card__sheet{will-change:transform}
}
@keyframes drift{
  from{transform:scale(1.08) translate3d(-1.2%,-1%,0)}
  to{transform:scale(1.17) translate3d(1.2%,1.4%,0)}
}
@keyframes pop{
  0%{transform:scale(.965)}
  100%{transform:scale(1)}
}
@keyframes flash{
  0%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(1.05)}
}

@media (max-width:560px){
  .topbar__sub{display:none}
  .sheet__title{font-size:18px}
}
@media (min-width:900px){
  .card__sheet{max-width:520px;left:auto;right:24px;bottom:24px;border-radius:var(--radius-card);border:1px solid var(--color-line)}
  .board__panel{max-width:720px;margin:0 auto}
}
.brand__ai{
  color:var(--color-primary);
  font-weight:800;
  letter-spacing:-.02em;
}

/* ============================================================
   Topbar: аватар пользователя
   ============================================================ */
.topbar__user{
  flex:0 0 auto;
  width:32px;height:32px;
  margin-right:8px;
  border-radius:50%;
  overflow:hidden;
  background:color-mix(in oklab, var(--color-text) 12%, transparent);
  border:1px solid var(--color-line);
}
.topbar__avatar{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}

/* ============================================================
   Topbar: бейдж баланса токенов
   ============================================================ */
.topbar__balance{
  display:inline-flex;
  align-items:center;
  gap:4px;
  height:32px;
  padding:0 10px;
  border:1px solid var(--color-line);
  border-radius:100px;
  background:color-mix(in oklab, var(--color-text) 6%, transparent);
  color:var(--color-text);
  font-size:12px;
  font-weight:700;
  letter-spacing:-.01em;
  cursor:pointer;
  transition:transform .15s var(--ease), background .15s;
  -webkit-tap-highlight-color:transparent;
}
.topbar__balance:active{transform:scale(.94)}
.topbar__balance:hover{background:color-mix(in oklab, var(--color-text) 12%, transparent)}
.topbar__balance svg{opacity:.7}
.topbar__balance-num{line-height:1;font-variant-numeric:tabular-nums}
.topbar__balance-promo{
  font-size:11px;
  line-height:1;
}
/* цветовая индикация баланса */
.topbar__balance.is-low{
  color:var(--color-accent);
  border-color:color-mix(in oklab, var(--color-accent) 45%, transparent);
}
.topbar__balance.is-ok{
  color:var(--color-text);
}
.topbar__balance.is-high{
  color:var(--color-primary);
  border-color:color-mix(in oklab, var(--color-primary) 45%, transparent);
}
@media (max-width:480px){
  .topbar__balance{height:30px;padding:0 8px;font-size:11px}
}

.profile{
  position:fixed;inset:0;z-index:130;
  display:flex;align-items:flex-end;
}
.profile__scrim{
  position:absolute;inset:0;
  background:color-mix(in oklab, var(--color-bg) 74%, transparent);
  opacity:0;
  transition:opacity .26s var(--ease);
}
.profile.is-open .profile__scrim{opacity:1}
.profile__panel{
  position:relative;
  width:100%;
  max-height:86vh;
  background:var(--color-surface);
  border-top:1px solid var(--color-line);
  border-radius:var(--radius-card) var(--radius-card) 0 0;
  padding:18px var(--pad-x) calc(24px + env(safe-area-inset-bottom));
  transform:translateY(100%);
  transition:transform .38s var(--ease);
  overflow-y:auto;
}
.profile.is-open .profile__panel{transform:none}

.profile__head{
  display:flex;align-items:center;gap:14px;
  margin-bottom:22px;
}
.profile__avatar-wrap{
  flex:0 0 auto;
  width:64px;height:64px;
  border-radius:50%;
  overflow:hidden;
  background:color-mix(in oklab, var(--color-text) 12%, transparent);
  border:2px solid var(--color-primary);
}
.profile__avatar{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}
.profile__meta{flex:1 1 auto;min-width:0}
.profile__name{
  font-family:var(--font-display);
  font-size:20px;font-weight:700;letter-spacing:-.02em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.profile__username{
  font-size:13px;color:var(--color-muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.profile__close{flex:0 0 auto}

.profile__section{margin-bottom:20px}
.profile__section-title{
  font-family:var(--font-display);
  font-size:12px;font-weight:700;letter-spacing:.06em;
  color:var(--color-muted);
  text-transform:uppercase;
  margin-bottom:10px;
}
.profile__stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
}
.profile__stat{
  background:color-mix(in oklab, var(--color-text) 6%, transparent);
  border-radius:var(--radius-card);
  padding:12px 8px;
  text-align:center;
}
.profile__stat span{
  display:block;
  font-family:var(--font-display);
  font-size:22px;font-weight:700;
  color:var(--color-primary);
  line-height:1.1;
}
.profile__stat small{
  display:block;
  font-size:11px;color:var(--color-muted);
  margin-top:4px;
}
.profile__favorites{
  font-size:14px;color:var(--color-muted);
  padding:12px 14px;
  background:color-mix(in oklab, var(--color-text) 6%, transparent);
  border-radius:var(--radius-card);
}

/* ============================================================
   Профиль — расширенный ЛК
   ============================================================ */
.profile__balance-card{
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px 18px;
  margin-bottom:14px;
  background:linear-gradient(135deg,
    color-mix(in oklab, var(--color-primary) 12%, var(--color-surface)) 0%,
    var(--color-surface) 100%);
  border:1px solid color-mix(in oklab, var(--color-primary) 30%, transparent);
  border-radius:var(--radius-card);
}
.profile__balance-info{flex:1 1 auto;min-width:0}
.profile__balance-label{
  font-size:11px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--color-muted);
  margin-bottom:4px;
}
.profile__balance-amount{
  font-family:var(--font-display);
  font-size:26px;
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--color-text);
  line-height:1;
}
.profile__balance-amount small{
  font-size:13px;
  font-weight:600;
  color:var(--color-muted);
  margin-left:4px;
}
.profile__balance-right{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
  flex:0 0 auto;
}
.profile__balance-promo{
  font-size:11px;
  font-weight:800;
  color:var(--color-accent);
  letter-spacing:.02em;
}
.profile__balance-btn{
  min-height:36px;
  padding:0 14px;
  font-size:13px;
  border-radius:100px;
}

.profile__chips{
  display:flex;
  gap:6px;
  margin-bottom:12px;
  overflow-x:auto;
  scrollbar-width:none;
  padding-bottom:2px;
}
.profile__chips::-webkit-scrollbar{display:none}
.chip-stat{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  gap:1px;
  padding:8px 12px;
  background:color-mix(in oklab, var(--color-text) 6%, transparent);
  border:1px solid var(--color-line);
  border-radius:100px;
  min-height:36px;
  justify-content:center;
}
.chip-stat__val{
  font-family:var(--font-display);
  font-size:15px;
  font-weight:800;
  letter-spacing:-.01em;
  color:var(--color-primary);
  line-height:1;
}
.chip-stat__lbl{
  font-size:10px;
  color:var(--color-muted);
  line-height:1;
  font-weight:500;
}

.profile__motivation{
  padding:12px 14px;
  margin-bottom:14px;
  background:color-mix(in oklab, var(--color-primary) 10%, transparent);
  border:1px solid color-mix(in oklab, var(--color-primary) 35%, transparent);
  border-radius:var(--radius-sm);
  font-size:13px;
  line-height:1.4;
  color:var(--color-text);
  font-weight:600;
}

.profile__level{
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:6px;
  flex-wrap:wrap;
}
.profile__level-badge{
  font-size:11px;
  font-weight:700;
  color:var(--color-primary);
  letter-spacing:-.01em;
  white-space:nowrap;
}
.profile__level-bar{
  flex:1 1 80px;
  height:4px;
  border-radius:100px;
  background:color-mix(in oklab, var(--color-text) 12%, transparent);
  overflow:hidden;
  min-width:60px;
}
.profile__level-bar span{
  display:block;
  height:100%;
  border-radius:100px;
  background:var(--color-primary);
  transition:width .4s var(--ease);
}
.profile__level-next{
  font-size:10px;
  color:var(--color-muted);
  white-space:nowrap;
}

.profile__section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:8px;
}
.profile__section-link{
  padding:4px 10px;
  border:1px solid var(--color-line);
  border-radius:100px;
  background:transparent;
  color:var(--color-muted);
  font-size:11px;
  font-weight:600;
  cursor:pointer;
}

/* ---------- Сворачиваемый блок (История платежей) ---------- */
.profile__toggle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  padding:12px 14px;
  border:1px solid var(--color-line);
  border-radius:var(--radius-sm);
  background:transparent;
  color:var(--color-text);
  font-family:var(--font-display);
  font-size:14px;
  font-weight:600;
  letter-spacing:-.01em;
  text-align:left;
  cursor:pointer;
  transition:background .15s var(--ease), border-color .15s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.profile__toggle:hover{
  background:color-mix(in oklab, var(--color-text) 6%, transparent);
  border-color:color-mix(in oklab, var(--color-text) 20%, transparent);
}
.profile__toggle-arrow{
  color:var(--color-muted);
  transition:transform .2s var(--ease);
  flex-shrink:0;
}
.profile__toggle[aria-expanded="true"] .profile__toggle-arrow{
  transform:rotate(180deg);
}

/* Список платежей */
.profile__payments{
  margin-top:10px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.payment-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:11px 14px;
  border:1px solid var(--color-line);
  border-radius:var(--radius-sm);
  background:color-mix(in oklab, var(--color-text) 2%, transparent);
}
.payment-item__left{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
  flex:1 1 auto;
}
.payment-item__date{
  font-size:11.5px;
  color:var(--color-muted);
  letter-spacing:.01em;
}
.payment-item__tokens{
  font-size:13px;
  font-weight:600;
  color:var(--color-text);
}
.payment-item__tokens b{
  color:var(--color-primary);
  font-weight:800;
}
.payment-item__right{
  flex:0 0 auto;
  text-align:right;
}
.payment-item__amount{
  font-family:var(--font-display);
  font-size:15px;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--color-text);
  white-space:nowrap;
}

/* Когда профиль раскрыл блок — пустое состояние */
.profile__payments .empty-payments{
  padding:14px;
  text-align:center;
  font-size:13px;
  color:var(--color-muted);
}
.profile__section-link:hover{
  color:var(--color-text);
  background:color-mix(in oklab, var(--color-text) 8%, transparent);
}

.profile__hscroll{
  display:flex;
  gap:8px;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  padding-bottom:4px;
  margin:0 calc(-1 * var(--pad-x));
  padding-left:var(--pad-x);
  padding-right:var(--pad-x);
}
.profile__hscroll::-webkit-scrollbar{display:none}
.profile__hscroll--badges{
  padding-bottom:8px;
}

.profile__mini-tile{
  flex:0 0 auto;
  width:104px;
  height:138px;
  border-radius:var(--radius-sm);
  overflow:hidden;
  background:var(--color-bg);
  border:1px solid var(--color-line);
  cursor:pointer;
  position:relative;
  padding:0;
  -webkit-tap-highlight-color:transparent;
  transition:transform .15s var(--ease);
}
.profile__mini-tile:active{transform:scale(.96)}
.profile__mini-tile img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}
.profile__mini-tile--gen{
  background:var(--color-surface);
}

.profile__badge{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  width:64px;
  padding:6px 4px;
  background:transparent;
  border:0;
  text-align:center;
  opacity:.28;
  transition:opacity .2s, transform .15s;
  cursor:pointer;
}
.profile__badge.is-earned{
  opacity:1;
}
.profile__badge.is-earned:hover{
  transform:scale(1.08);
}
.profile__badge-icon{
  width:36px;height:36px;
  display:grid;place-items:center;
  color:var(--color-text);
  filter:grayscale(1);
  transition:filter .2s, color .2s;
}
.profile__badge.is-earned .profile__badge-icon{
  color:var(--color-primary);
  filter:none;
}
.profile__badge-name{
  font-size:9px;
  font-weight:600;
  letter-spacing:.01em;
  color:var(--color-muted);
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:60px;
}
.profile__badge.is-earned .profile__badge-name{
  color:var(--color-text);
}

/* прогресс-бар уровня — цифра */
.profile__level-num{
  font-size:10px;
  color:var(--color-muted);
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
  font-weight:600;
}

/* видео в мини-плитках */
.profile__mini-tile video{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}
.profile__mini-tile--video{
  position:relative;
}
.profile__mini-tile--video::after{
  content:"▶";
  position:absolute;
  left:6px;bottom:6px;
  width:20px;height:20px;
  display:grid;place-items:center;
  border-radius:50%;
  background:rgba(0,0,0,.55);
  color:#fff;
  font-size:9px;
  pointer-events:none;
}

.profile__empty{
  padding:20px 8px;
  font-size:13px;
  color:var(--color-muted);
  text-align:center;
}

.profile__links{
  display:grid;
  gap:8px;
  margin-top:6px;
  margin-bottom:4px;
}
.profile__link{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border:1px solid var(--color-line);
  border-radius:var(--radius-sm);
  background:transparent;
  text-decoration:none;
  transition:background .15s, border-color .15s;
}
.profile__link:hover{
  background:color-mix(in oklab, var(--color-text) 6%, transparent);
  border-color:color-mix(in oklab, var(--color-text) 24%, transparent);
}
.profile__link-icon{
  flex:0 0 auto;
  width:36px;height:36px;
  display:grid;place-items:center;
  border-radius:10px;
  background:color-mix(in oklab, var(--color-text) 6%, transparent);
  color:var(--color-primary);
}
.profile__link-body{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.profile__link-title{
  font-size:13px;
  font-weight:700;
  color:var(--color-text);
  letter-spacing:-.01em;
}
.profile__link-sub{
  font-size:11px;
  color:var(--color-muted);
  line-height:1.3;
}

/* ============================================================
   Card: явные размеры для слайдов и медиа
   ============================================================ */
/* .slide — использует оригинальное flex определение выше.
   Дополняем только поведение media внутри слайда карточки. */
.slide .tile__art{
  position:absolute;inset:0;
  width:100%;height:100%;
  display:block;
}
/* Видео в карточке — как .slide .tile__media, но с object-fit:contain */
.tile__media--card{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  background:#000;
  display:block;
}
/* Кнопка ▶ поверх постера видео в карточке */
.slide__play{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  z-index:2;
  width:80px;height:80px;
  padding:0;
  border:0;
  border-radius:50%;
  background:color-mix(in oklab, var(--color-bg) 55%, transparent);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  color:var(--color-text);
  display:grid;place-items:center;
  cursor:pointer;
  transition:transform .15s var(--ease), background .15s;
  box-shadow:0 6px 30px rgba(0,0,0,.35);
}
.slide__play:active{transform:translate(-50%,-50%) scale(.92)}
.slide__play svg{display:block;margin-left:4px}
.slide__play[hidden]{display:none}

.slide .tile__media{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:contain;
  display:block;
  transform-origin:center center;
  will-change:transform;
}

/* ============================================================
   Card track: принудительная GPU-отрисовка
   Chrome/WebView иногда не рисует слайды, пока не произойдёт
   репейнт. Форсируем отдельный слой и backface.
   ============================================================ */
.card__track{
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  transform:translate3d(-33.3333%, 0, 0);
}
.card.is-open .card__track{
  transition:transform .34s var(--ease);
}
.slide{
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  will-change:transform;
}
.slide .tile__media{
  transform:translateZ(0);
}

/* ============================================================
   TOPBAR — фикс. иконки-закладки вместо пилюли, компактнее
   ============================================================ */
.topbar{
  gap:6px;
  padding:0 10px;
}
.brand__name{
  font-size:14px;
  letter-spacing:-.03em;
  white-space:nowrap;
}
@media (max-width:480px){
  .brand__name{ font-size:12px; }
  .topbar__avatar{ width:28px;height:28px; }
  .topbar__user{ width:28px;height:28px; margin-right:6px; }
  .iconbtn{ width:36px;height:36px; }
}

/* Иконка-закладка для мудборда с бейджем */
.iconbtn--badge{
  position:relative;
}
.iconbtn__badge{
  position:absolute;
  top:-3px;right:-3px;
  min-width:16px;height:16px;
  padding:0 4px;
  border-radius:8px;
  background:var(--color-primary);
  color:var(--color-bg);
  font-size:10px;font-weight:800;
  display:grid;place-items:center;
  line-height:1;
}
.iconbtn__badge:empty,
.iconbtn__badge[data-empty="1"]{ display:none; }

/* ============================================================
   CARD — компактнее, фото НЕ закрывается панелью
   ============================================================ */
.card__stage{
  bottom:210px; /* под панель */
}
@media (min-width:900px){
  .card__stage{ bottom:0; }
}

.card__top{
  padding:8px var(--pad-x);
  padding-top:max(8px, env(safe-area-inset-top));
  gap:8px;
}
.card__index{
  font-size:11px;
  letter-spacing:.02em;
}

.card__sheet{
  padding:14px var(--pad-x) calc(14px + env(safe-area-inset-bottom));
}
.sheet__title{
  font-size:16px;
  margin:0 0 3px;
}
.sheet__tags{
  margin:0 0 8px;
  font-size:11px;
}
.proof{
  margin-bottom:10px;
  gap:6px;
}
/* Убираем аватарки полностью */
.proof__avs{ display:none !important; }
.av{ display:none !important; }
.proof__text{
  font-size:11px;
  color:var(--color-muted);
  background:color-mix(in oklab, var(--color-text) 6%, transparent);
  padding:4px 10px;
  border-radius:100px;
}
.proof__text b{
  color:var(--color-primary);
  font-weight:700;
}

.sheet__actions{
  gap:6px;
}
.btn{
  min-height:40px;
  padding:0 14px;
  font-size:13px;
}
.btn--primary{
  font-size:13px;
}

@media (max-width:560px){
  .sheet__title{ font-size:15px; }
}

/* Topbar actions — прижать к правому краю */
.topbar__actions{
  display:flex;
  align-items:center;
  gap:4px;
  margin-left:auto;
  flex:0 0 auto;
}
.brand__name{
  font-size:15px;
  letter-spacing:-.02em;
}
@media (max-width:480px){
  .brand__name{ font-size:13px; }
}

/* ============================================================
   FIX 2026-09-29: (1) шумовой ::after скрывал фото
                     (2) анимация is-in ломала видимость плиток
   ============================================================ */

/* 1) Шумовой overlay поверх фото даёт «цветные блоки» вместо картинок.
      Убираем полностью — фото должны быть видны как есть. */
.tile__art::after { display: none !important; }

/* 2) Плитки по умолчанию скрыты (opacity:0) и появляются только через
      класс .is-in (IntersectionObserver). Если observer не сработал
      (например, на медленной сети или при первом рендере) — плитки
      остаются невидимыми. Принудительно показываем их. */
.tile { opacity: 1 !important; transform: none !important; }