/* ════════ Components ════════ */

/* ── Button ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  height:40px;padding:0 var(--sp-4);border-radius:var(--r-md);
  font-size:var(--fs-md);font-weight:var(--fw-semibold);
  border:1px solid transparent;transition:all var(--dur-fast) var(--ease);white-space:nowrap;
}
.btn:disabled{opacity:.5;pointer-events:none}
.btn-accent{background:var(--accent-grad);color:#fff;box-shadow:var(--sh-glow)}
.btn-accent:hover{filter:brightness(1.08)}
.btn-ghost{background:var(--panel-2);color:var(--text);border-color:var(--line)}
.btn-ghost:hover{background:var(--panel-3);border-color:var(--line-2)}
.btn-outline{background:transparent;color:var(--text);border-color:var(--line-2)}
.btn-outline:hover{background:var(--panel-2)}
.btn-sm{height:32px;padding:0 var(--sp-3);font-size:var(--fs-sm);border-radius:var(--r-sm)}
.btn-lg{height:48px;padding:0 var(--sp-5);font-size:var(--fs-lg)}
.btn-icon{width:40px;padding:0}
.btn-danger{background:var(--danger-soft);color:var(--danger);border-color:transparent}
.btn-danger:hover{background:var(--danger);color:#fff}

/* ── Chip ── */
.chip{
  display:inline-flex;align-items:center;gap:var(--sp-2);
  padding:7px 13px;border-radius:var(--r-sm);font-size:var(--fs-sm);
  background:var(--panel-2);border:1px solid var(--line);color:var(--muted);
  cursor:pointer;user-select:none;transition:all var(--dur-fast) var(--ease);
}
.chip:hover{background:var(--panel-3);color:var(--text);border-color:var(--line-2)}
.chip.on{background:var(--accent-grad);color:#fff;border-color:transparent;font-weight:var(--fw-semibold);box-shadow:0 4px 14px var(--glow)}
.chip.disabled{opacity:.4;pointer-events:none}
.chip-clear:hover{background:color-mix(in srgb,var(--danger) 16%,transparent);color:var(--danger);border-color:color-mix(in srgb,var(--danger) 45%,transparent)}
.chip-cnt{font-size:var(--fs-xs);color:var(--muted);background:var(--panel-3);border-radius:var(--r-full);padding:1px 7px}
.chip.on .chip-cnt{color:#fff;background:rgba(255,255,255,.22)}

/* ── Input / Textarea ── */
.field{
  width:100%;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-md);
  color:var(--text);padding:11px 13px;font-size:var(--fs-md);transition:border-color var(--dur-fast) var(--ease);
}
.field::placeholder{color:var(--muted)}
.field:focus{outline:none;border-color:var(--line-3)}
.field:focus-visible{border-color:var(--c1);outline:none}
textarea.field{resize:none;line-height:var(--lh-base)}
.label{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:var(--ls-wide);color:var(--muted);font-weight:var(--fw-semibold);margin-bottom:var(--sp-2)}

/* ── Card (image) ── */
.card{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  background:var(--panel);border:1px solid var(--line);cursor:pointer;
  transition:transform var(--dur-base) var(--ease-out),border-color var(--dur-fast) var(--ease),box-shadow var(--dur-base) var(--ease);
}
.card:hover{transform:translateY(-3px);border-color:var(--line-2);box-shadow:var(--sh-md)}
/* До загрузки img резервирует высоту через aspect-ratio (inline из реальных w/h)
   + мягкий пульсирующий фон — чтобы карточка занимала место сразу и не провоцировала
   лавинную ленивую подгрузку. После onload aspect-ratio снимается (.ph-done) → картинка
   принимает натуральную высоту, masonry снова «живой» (разной высоты, без обрезки). */
.card img{width:100%;display:block;background:var(--panel-2)}
.card img.ph{aspect-ratio:var(--ar,1);object-fit:cover;animation:cardph 1.1s ease-in-out infinite}
.card img.ph-done{aspect-ratio:auto;object-fit:initial;animation:none}
@keyframes cardph{0%,100%{background-color:var(--panel-2)}50%{background-color:var(--panel-3)}}
.card-ov{
  position:absolute;inset:0;padding:var(--sp-3);color:#fff;
  background:linear-gradient(to top,rgba(0,0,0,.82),transparent 48%);
  display:flex;flex-direction:column;justify-content:flex-end;
  opacity:0;transition:opacity var(--dur-base) var(--ease);
}
.card:hover .card-ov{opacity:1}
.card-like{position:absolute;top:9px;right:9px;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);color:#fff;border-radius:var(--r-full);padding:3px 9px;font-size:var(--fs-xs);display:flex;align-items:center;gap:4px}

/* ── Skeleton ── */
.skel{position:relative;overflow:hidden;background:var(--panel-2);border-radius:var(--r-lg)}
.skel::after{content:'';position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);
  animation:shimmer 1.4s infinite}
@keyframes shimmer{100%{transform:translateX(100%)}}

/* ── Toast ── */
.toast{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(8px);
  background:var(--panel);border:1px solid var(--line-2);color:var(--text);
  padding:11px 18px;border-radius:var(--r-md);font-size:var(--fs-sm);box-shadow:var(--sh-md);
  opacity:0;pointer-events:none;transition:opacity var(--dur-base),transform var(--dur-base);z-index:var(--z-toast);
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── Badge / pill ── */
.pill{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:var(--r-full);
  background:var(--panel-2);border:1px solid var(--line);font-size:var(--fs-sm)}
.pill-btn{cursor:pointer;transition:all var(--dur-fast) var(--ease)}
.pill-btn:hover{border-color:var(--c1);background:var(--panel-3)}
/* ── Докупка: сетка пакетов ── */
.bill-balance{margin-bottom:14px;font-size:var(--fs-sm)}
.bill-need{margin-bottom:12px;padding:10px 12px;border-radius:var(--r-md);font-size:var(--fs-sm);line-height:1.4;
  background:var(--danger-soft);color:var(--danger);display:flex;gap:8px;align-items:flex-start}
.bill-need b{color:var(--text)}
.bill-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.bill-pkg{border:1px solid var(--line);border-radius:var(--r-lg);padding:14px;display:flex;flex-direction:column;gap:6px;
  background:var(--panel-2);text-align:center}
.bill-pkg-credits{font-size:var(--fs-lg);font-weight:var(--fw-bold)}
.bill-pkg-price{font-size:var(--fs-md);font-weight:var(--fw-semibold);color:var(--c1)}
.bill-pkg .btn{margin-top:6px}

/* ── Reveal animation (для появления карточек/результата) ── */
.reveal{animation:reveal var(--dur-slow) var(--ease-out) both}
@keyframes reveal{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.blur-up{animation:blurUp .6s var(--ease-out) both}
@keyframes blurUp{from{filter:blur(16px);opacity:.4;transform:scale(1.02)}to{filter:none;opacity:1;transform:none}}

/* ── Spinner (минимальный, для редких случаев) ── */
.spin{width:18px;height:18px;border:2px solid var(--line-2);border-top-color:var(--c1);border-radius:50%;animation:rot .7s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}