/* =========================================================
   NeuralFrame Cabinet — Design System v2
   Matches main site: soft tech / warm pastels / mono accents
   ========================================================= */

:root {
  --bg:          #F2ECE0;
  --bg-raise:    #EDE5D4;
  --bg-deep:     #1E1A15;
  --surface:     #FBF7EE;
  --surface-2:   #F8F1E0;
  --line:        #E1D7C2;
  --line-strong: #C9BCA1;

  --ink:         #1A1815;
  --ink-2:       #4A4338;
  --ink-3:       #8A7F6C;

  --accent:      #E85C2C;
  --accent-soft: #F4C9B6;
  --accent-2:    #B8A4E3;
  --accent-2-soft: #E7DFF5;
  --accent-3:    #7FB39B;
  --accent-3-soft: #D4E4DB;

  --f-display: 'Vetrino', 'Times New Roman', serif;
  --f-sans: 'AA Stetica', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --f-mono:    'JetBrains Mono', 'SF Mono', Consolas, monospace;

  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  --sh-sm: 0 1px 2px rgba(40, 30, 20, .06);
  --sh-md: 0 4px 20px -8px rgba(40, 30, 20, .12);
  --sh-lg: 0 20px 60px -20px rgba(40, 30, 20, .18);

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;

  --sidebar-w: 260px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--f-sans);
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* iOS Safari: input <16px → авто-зум при фокусе и не возвращает. На мобиле 16px. */
@media (max-width: 820px) {
  input[type="text"], input[type="email"], input[type="password"],
  input[type="tel"], input[type="search"], input[type="number"],
  textarea, select { font-size: 16px !important; }
}

/* ===== Mobile shrink: уменьшаем размеры всех типовых блоков ============
   Цель — чтобы любой компонент кабинета помещался по ширине ≤480-560px
   без необходимости pinch-to-zoom и без горизонтального скролла. */
@media (max-width: 820px) {
  /* Hero balance (billing) — крупная цифра меньше + компактный padding */
  .bill-hero-main { padding: 18px 18px 16px !important; }
  .bill-hero-num { font-size: clamp(1.9rem, 9vw, 2.6rem) !important; gap: 10px !important; }
  .bill-hero-bolt { width: 38px !important; height: 38px !important; }
  .bill-hero-stats { gap: 8px !important; }
  .bill-mini { padding: 10px 12px !important; gap: 8px !important; }
  .bill-mini-ic { width: 28px !important; height: 28px !important; border-radius: 7px !important; }
  .bill-mini-ic svg { width: 14px !important; height: 14px !important; }
  .bill-mini-num { font-size: 1.1rem !important; }
  .bill-mini-sub { font-size: .65rem !important; }
  .bill-mini-lbl { font-size: .56rem !important; }

  /* Packages — компактнее */
  .pkg-card { padding: 16px 16px 14px !important; }
  .pkg-price { font-size: 1.85rem !important; }
  .pkg-name { font-size: .64rem !important; }
  .pkg-credits { font-size: .82rem !important; }
  .pkg-per { font-size: .62rem !important; padding-top: 8px !important; }
  .pkg-usage-row { font-size: .66rem !important; }
  .pkg-usage-row svg { width: 11px !important; height: 11px !important; }

  /* Transactions — сжимаем строку, убираем перенос текста */
  .tx-row { padding: 10px 14px !important; gap: 10px !important; }
  .tx-icon { width: 30px !important; height: 30px !important; border-radius: 8px !important; }
  .tx-icon svg { width: 14px !important; height: 14px !important; }
  .tx-desc { font-size: .82rem !important; }
  .tx-meta { gap: 6px !important; }
  .tx-type-tag { font-size: .54rem !important; padding: 1px 6px !important; }
  .tx-date, .tx-pricetag { font-size: .62rem !important; }
  .tx-amount { font-size: .94rem !important; }
  .tx-balance-num { font-size: .82rem !important; }

  /* Page title — обрезается на узких иначе */
  .page-title { font-size: clamp(1.4rem, 6vw, 1.9rem) !important; }
  .page-sub { font-size: .82rem !important; }
  .section-title { font-size: 1rem !important; }

  /* Stats / quick / recent — все плотнее */
  .stat-card { padding: 12px 14px !important; gap: 6px !important; }
  .stat-num { font-size: 1.7rem !important; }
  .stat-label { font-size: .6rem !important; }
  .recent-row { padding: 8px 8px !important; gap: 10px !important; }
  .recent-thumb { width: 40px !important; height: 40px !important; }
  .recent-info .r-scene { font-size: .82rem !important; }
  .recent-info .r-meta { font-size: .62rem !important; }
  .recent-tag, .recent-status { font-size: .58rem !important; padding: 3px 7px !important; }

  /* Topbar — кванты+аватар не должны давить весь header */
  .topbar { padding: 10px 12px !important; gap: 8px !important; }
  .search-wrap { max-width: 100% !important; }
  .credits-badge { padding: 7px 11px !important; font-size: .74rem !important; }
}

@media (max-width: 820px) {
  /* Уменьшаем root font-size — каскадно сжимает все rem-based размеры
     (h2, кнопки, иконки и пр.) без перекрытия каждого правила вручную. */
  html { font-size: 14px; }

  /* Topbar — компактнее: burger меньше, поиск тоньше, аватар-кнопка ужата */
  .topbar { padding: 8px 10px !important; gap: 6px !important; }
  .topbar-burger { width: 34px !important; height: 34px !important; border-radius: 10px !important; }
  .topbar-burger svg { width: 16px !important; height: 16px !important; }
  .search-bar { padding: 6px 10px !important; gap: 6px !important; }
  .search-bar svg { width: 14px !important; height: 14px !important; }
  .search-bar input { font-size: 14px !important; }
  .credits-badge { padding: 6px 9px !important; font-size: .68rem !important; gap: 6px !important; }
  .credits-badge .cb-bolt, .credits-badge svg { width: 11px !important; height: 11px !important; }
  .nav-user-btn, .user-btn { padding: 3px 8px 3px 3px !important; gap: 5px !important; }
  .user-avatar, .nav-user-avatar { width: 22px !important; height: 22px !important; font-size: .68rem !important; }

  /* Page-top: меньше отступ, тоньше H1 */
  .page-top { margin-bottom: 18px !important; padding-bottom: 16px !important; }
  .page-title { font-size: 1.25rem !important; line-height: 1.2 !important; }
  .page-sub { font-size: .76rem !important; margin-top: 4px !important; }

  /* Create CTA — главная кнопка «+ Создать» */
  .create-cta, .create-cta-main, .btn-create { padding: 10px 14px !important; font-size: .88rem !important; min-height: 0 !important; }
  .create-cta-main + .create-cta-toggle, .create-cta-toggle { width: 36px !important; }

  /* Stat-cards — мельче иконки/числа/labels */
  .stat-card { padding: 11px 13px !important; gap: 4px !important; min-height: 0 !important; }
  .stat-icon { width: 26px !important; height: 26px !important; border-radius: 7px !important; }
  .stat-icon svg { width: 13px !important; height: 13px !important; }
  .stat-num { font-size: 1.4rem !important; line-height: 1 !important; }
  .stat-label { font-size: .58rem !important; }
  .stats-row { gap: 8px !important; margin-bottom: 20px !important; }

  /* Section-title (например «Что создать») */
  .section-title { font-size: .92rem !important; margin-bottom: 12px !important; }
  .st-meta { font-size: .58rem !important; }

  /* Products-row / quick-actions */
  .products-row, .quick-actions { gap: 8px !important; }
  .product-card, .quick-card { padding: 14px !important; min-height: 0 !important; }
  .pc-title { font-size: 1.1rem !important; }
  .pc-desc { font-size: .76rem !important; }
}

@media (max-width: 480px) {
  html { font-size: 13.5px; }
  .main-content { padding: 10px !important; }
  /* Совсем узкие — баланс ещё меньше */
  .bill-hero-num { font-size: 1.95rem !important; gap: 8px !important; }
  .bill-hero-bolt { width: 32px !important; height: 32px !important; }
  .pkg-price { font-size: 1.55rem !important; }
  /* Topbar ещё ужаться */
  .credits-badge { padding: 5px 8px !important; }
  .search-bar { padding: 5px 9px !important; }
}
img { max-width: 100%; display: block; }
a   { color: inherit; text-decoration: none; }
ul  { list-style: none; }
input, textarea, select, button { font-family: inherit; font-size: inherit; color: inherit; }

/* Logo (shared) -------------------------------------------- */
.logo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-display); font-size: 1.3rem; color: var(--ink); }
.logo-icon { display: none; }
.logo-text { font-family: var(--f-display); font-weight: 400; letter-spacing: -.02em; }
.logo-text .accent { color: var(--accent); }
.logo-mark {
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--ink); display: grid; place-items: center;
  position: relative; overflow: hidden;
}
.logo-mark::after {
  content:''; position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 30%, var(--accent) 0%, transparent 60%);
  opacity: .9;
}
.logo-mark-inner {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--surface); z-index: 2; position: relative;
}

/* =========================================================
   BUTTONS
   ========================================================= */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 20px;
  border-radius: 100px;
  font-weight: 500;
  font-size: 0.92rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all .35s var(--ease);
  line-height: 1;
  white-space: nowrap;
  letter-spacing: -.005em;
  text-align: center;
}
.btn-full { width: 100%; }
.btn-lg { padding: 16px 24px; font-size: 1rem; }

.btn-primary { background: var(--ink); color: var(--surface); }
.btn-primary:hover:not(:disabled) { background: var(--accent); transform: translateY(-1px); box-shadow: var(--sh-md); }
.btn-primary:disabled { opacity: .55; cursor: not-allowed; }

.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { background: var(--ink); color: var(--surface); border-color: var(--ink); }

.btn-arrow { transition: transform .3s var(--ease); }
.btn-primary:hover .btn-arrow { transform: translate(2px,-2px); }

/* =========================================================
   AUTH (login / register)
   ========================================================= */

.auth-body {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--bg);
  position: relative;
  overflow: hidden;
}

.auth-aside {
  background: var(--bg-deep);
  color: var(--surface);
  padding: 48px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
.auth-aside::before,
.auth-aside::after {
  content: ''; position: absolute; border-radius: 50%;
  filter: blur(80px); opacity: .35; pointer-events: none;
}
.auth-aside::before { width: 400px; height: 400px; background: var(--accent); top: -80px; right: -80px; }
.auth-aside::after  { width: 340px; height: 340px; background: var(--accent-2); bottom: -100px; left: -60px; opacity: .3; }

.auth-aside-inner { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 32px; }

.auth-logo-link {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-display);
  font-size: 1.4rem;
  color: var(--surface);
}
.auth-logo-link .logo-dot { color: var(--accent); }

.auth-aside-headline {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 3.5vw, 3.6rem);
  line-height: 1;
  letter-spacing: -.025em;
  color: var(--surface);
  margin-top: 40px;
}
.auth-aside-headline em { color: var(--accent); font-style: italic; }

.auth-aside-sub {
  color: rgba(255,255,255,.65);
  font-size: 1.05rem;
  line-height: 1.55;
  max-width: 360px;
  margin-top: 16px;
}

.auth-aside-features {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 32px;
}
.auth-aside-features li {
  display: flex; align-items: center; gap: 14px;
  font-size: 0.92rem;
  color: rgba(255,255,255,.85);
  padding: 12px 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--r-md);
}
.auth-aside-features li strong { color: var(--accent); font-weight: 500; font-family: var(--f-mono); font-size: 0.85rem; }

.auth-aside-foot {
  position: relative; z-index: 2;
  display: flex; justify-content: space-between;
  font-family: var(--f-mono);
  font-size: 0.74rem;
  color: rgba(255,255,255,.4);
  letter-spacing: .04em;
}
.auth-aside-foot .status-dot { display: inline-block; width: 6px; height: 6px; background: var(--accent-3); border-radius: 50%; margin-right: 8px; box-shadow: 0 0 8px var(--accent-3); vertical-align: middle; }

/* ---- right column ---- */

.auth-main {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  position: relative;
}
.auth-main::before {
  content: '';
  position: absolute; top: 40px; right: 48px;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  color: var(--ink-3);
}

.auth-top-right {
  position: absolute;
  top: 32px; right: 48px;
  font-family: var(--f-mono);
  font-size: 0.78rem;
  color: var(--ink-3);
  display: flex; gap: 10px; align-items: center;
}
.auth-top-right a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }

.auth-card {
  width: 100%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.auth-mode-path {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  color: var(--ink-3);
  letter-spacing: .04em;
}
.auth-mode-path .on { color: var(--accent); }

.auth-title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  line-height: 1;
  letter-spacing: -.03em;
}
.auth-title em { color: var(--accent); font-style: italic; }

.auth-sub { color: var(--ink-2); font-size: 1rem; line-height: 1.5; }

.auth-error {
  padding: 12px 16px;
  background: rgba(232,92,44,.08);
  border: 1px solid rgba(232,92,44,.3);
  border-radius: var(--r-md);
  color: var(--accent);
  font-size: 0.9rem;
  font-family: var(--f-mono);
}
.auth-error::before { content: '× '; }

.auth-form { display: flex; flex-direction: column; gap: 16px; margin-top: 8px; }

.form-group { display: flex; flex-direction: column; gap: 8px; }
.form-group label {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-3);
  display: flex; justify-content: space-between;
}
.form-group label .label-opt { text-transform: none; color: var(--ink-3); opacity: .7; letter-spacing: 0; font-size: 0.7rem; }

.form-group input,
.form-group select,
.form-group textarea {
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--ink);
  font-size: 0.95rem;
  transition: border-color .25s var(--ease), background .25s var(--ease);
  outline: none;
  width: 100%;
  appearance: none;
}
.form-group input:hover,
.form-group select:hover,
.form-group textarea:hover { border-color: var(--line-strong); }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color: var(--ink); background: white; }
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--ink-3); }

.form-group select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238A7F6C' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  padding-right: 40px;
}

.form-group textarea { resize: vertical; min-height: 100px; font-family: inherit; }

.auth-switch {
  font-size: 0.92rem;
  color: var(--ink-2);
  text-align: center;
  margin-top: 8px;
  padding-top: 20px;
  border-top: 1px dashed var(--line);
}
.auth-switch a { color: var(--ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }

.auth-oauth-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 4px;
}
.auth-oauth-row.auth-oauth-row-3 { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.auth-oauth-btn svg { flex-shrink: 0; }
.auth-oauth-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 100px;
  font-family: var(--f-mono);
  font-size: 0.8rem;
  color: var(--ink-2);
  cursor: pointer;
  transition: all .25s var(--ease);
}
.auth-oauth-btn:hover { background: var(--ink); color: var(--surface); border-color: var(--ink); }

.auth-divider {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--f-mono);
  font-size: 0.7rem;
  color: var(--ink-3);
  letter-spacing: .06em;
  text-transform: lowercase;
}
.auth-divider::before,
.auth-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--line);
}

@media (max-width: 900px) {
  .auth-body { grid-template-columns: 1fr; }
  .auth-aside { display: none; }
  .auth-main { padding: 32px 24px; }
  .auth-top-right { position: static; margin-bottom: 24px; }
}

/* =========================================================
   APP LAYOUT (dashboard / generate / billing / projects)
   ========================================================= */

.app-body {
  background: var(--bg);
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
}

/* --- Sidebar --- */

.sidebar {
  background: var(--surface);
  border-right: 1px solid var(--line);
  padding: 24px 18px;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.sidebar-header {
  padding: 6px 10px 28px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 18px;
}

.sidebar-nav {
  display: flex; flex-direction: column; gap: 2px;
  flex: 1;
  overflow-y: auto;
}

.nav-section-label {
  font-family: var(--f-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-3);
  padding: 20px 12px 8px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 100px;
  font-size: 0.92rem;
  color: var(--ink-2);
  transition: background .2s var(--ease), color .2s var(--ease);
  position: relative;
}
.nav-item:hover { background: var(--bg-raise); color: var(--ink); }
.nav-item.active {
  background: var(--ink);
  color: var(--surface);
}
.nav-item.active .nav-icon { color: var(--accent); }

/* Поддержка — слегка выделена зелёным accent-3 чтобы её было видно
   в любой момент. На hover усиливается, при active превращается в
   обычный «активный» (тёмный фон), чтобы не выбивалась с остальной
   подсветкой выбранной страницы. */
.nav-item-support {
  background: rgba(127, 179, 155, .12);
  color: var(--ink) !important;
  border: 1px solid rgba(127, 179, 155, .35);
  margin-top: 6px;
}
.nav-item-support .nav-icon { color: #3D6F5B; }
.nav-item-support:hover {
  background: rgba(127, 179, 155, .22);
  border-color: rgba(127, 179, 155, .55);
}
.nav-item-support.active {
  background: var(--ink) !important;
  color: var(--surface) !important;
  border-color: var(--ink);
}
.nav-item-support.active .nav-icon { color: #7FB39B; }
.nav-icon {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  font-family: var(--f-mono);
  font-size: 0.9rem;
  color: var(--ink-3);
  transition: color .2s;
}
.nav-item:hover .nav-icon { color: var(--ink); }

/* Sidebar footer */

.sidebar-footer {
  padding-top: 16px;
  border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 8px;
}
.sidebar-credits {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 16px;
  background: var(--bg-raise);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
}
.cr-label { font-family: var(--f-mono); font-size: 0.72rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
.cr-val { font-family: var(--f-display); font-size: 1.6rem; color: var(--accent); line-height: 1; letter-spacing: -.02em; }

.sidebar-logout {
  padding: 10px 16px;
  text-align: center;
  font-family: var(--f-mono);
  font-size: 0.78rem;
  color: var(--ink-3);
  border-radius: 100px;
  transition: all .2s;
}
.sidebar-logout:hover { background: var(--bg-raise); color: var(--ink); }

/* Юр-реквизиты — фиксированный блок в нижне-правом углу кабинета.
   Не занимает места в сайдбаре, виден на всех страницах с этим сайдбаром.
   pointer-events:none — клики проходят насквозь к контенту под ним.
   На узких экранах прячем, чтобы не перекрывать UI. */
.entity-fixed {
  position: fixed;
  right: 16px;
  bottom: 12px;
  z-index: 5;
  padding: 6px 12px;
  background: rgba(251, 247, 238, .65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--line);
  border-radius: 100px;
  font-family: var(--f-mono);
  font-size: 0.62rem;
  line-height: 1.4;
  color: var(--ink-3);
  letter-spacing: .02em;
  opacity: .55;
  pointer-events: none;
  white-space: nowrap;
  user-select: text;
  transition: opacity .25s ease;
}
.entity-fixed:hover { opacity: .9; }
@media (max-width: 900px) { .entity-fixed { display: none; } }

/* --- Main content --- */

.main-content {
  padding: 36px 44px 60px;
  max-width: 1640px;
  width: 100%;
}
/* Большие десктопы — добавляем чуть больше воздуха по краям, чтобы контент
   не упирался в левый/правый край sidebar/scrollbar при FullHD+. */
@media (min-width: 1800px) {
  .main-content { padding: 40px 64px 64px; }
}

.page-top {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 20px; flex-wrap: wrap;
  margin-bottom: 40px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line);
}

.page-title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(2rem, 3.5vw, 3rem);
  letter-spacing: -.025em;
  line-height: 1.05;
}
.page-title em { color: var(--accent); font-style: italic; }
.page-sub {
  font-family: var(--f-mono);
  font-size: 0.8rem;
  color: var(--ink-3);
  margin-top: 8px;
  letter-spacing: .02em;
}

.credits-badge {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--surface);
  border-radius: 100px;
  font-family: var(--f-mono);
  font-size: 0.82rem;
  transition: all .25s;
}
.credits-badge:hover { background: var(--accent); }
.credits-badge .cb-bolt {
  display: inline-flex; width: 16px; height: 16px;
  color: var(--accent); flex-shrink: 0;
}
.credits-badge .cb-bolt svg { width: 100%; height: 100%; }
.credits-badge:hover .cb-bolt { color: #fff; }

.credits-badge-lg {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  background: var(--ink);
  color: var(--surface);
  border-radius: var(--r-lg);
  font-family: var(--f-display);
  font-size: 2rem;
  letter-spacing: -.02em;
  line-height: 1;
}
.credits-badge-lg > span:first-child { color: var(--accent); font-family: var(--f-mono); font-size: 1rem; }

.section-title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 1.7rem;
  letter-spacing: -.015em;
  margin-bottom: 20px;
}

/* =========================================================
   DASHBOARD
   ========================================================= */

.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 32px;
}
/* Stat-card — матовое стекло с лёгким шумом, плотная компоновка.
   Фон: полупрозрачный gradient surface, тонкая light-обводка, мягкая тень.
   ::before — SVG feTurbulence noise overlay (opacity .06, multiply на светлом). */
.stat-card {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,.78) 0%, rgba(252,247,238,.62) 100%);
  border: 1px solid rgba(40,30,20,.06);
  border-radius: var(--r-lg);
  padding: 16px 18px 18px;
  display: flex; flex-direction: column; gap: 8px;
  transition: all .25s var(--ease);
  overflow: hidden;
  box-shadow:
    0 8px 24px -16px rgba(40,30,20,.18),
    inset 0 1px 0 rgba(255,255,255,.7);
  backdrop-filter: blur(8px) saturate(110%);
  -webkit-backdrop-filter: blur(8px) saturate(110%);
}
.stat-card::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.85 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
  opacity: .06;
  mix-blend-mode: multiply;
  pointer-events: none;
  border-radius: inherit;
}
.stat-card > * { position: relative; z-index: 1; }
.stat-card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 14px 32px -16px rgba(40,30,20,.22),
    inset 0 1px 0 rgba(255,255,255,.8);
  border-color: rgba(40,30,20,.10);
}
.stat-card:hover::before { opacity: .09; }

.stat-icon {
  width: 30px; height: 30px;
  border-radius: 8px;
  display: grid; place-items: center;
  background: var(--bg-raise);
  font-family: var(--f-mono);
  font-size: .9rem;
}
.stat-icon svg { width: 16px; height: 16px; stroke-width: 1.6; }
.stat-card:nth-child(1) .stat-icon { background: var(--accent-soft); color: var(--accent); }
.stat-card:nth-child(2) .stat-icon { background: var(--accent-2-soft); color: #6B5FA0; }
.stat-card:nth-child(3) .stat-icon { background: var(--accent-3-soft); color: #4F8C74; }
.stat-card:nth-child(4) .stat-icon { background: var(--ink); color: var(--accent); }
.stat-num { font-family: var(--f-display); font-size: 2.05rem; line-height: 1; letter-spacing: -.03em; }
.stat-label { font-family: var(--f-mono); font-size: .68rem; color: var(--ink-3); text-transform: lowercase; letter-spacing: .04em; }

.quick-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.quick-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px;
  display: flex; flex-direction: column; gap: 14px;
  transition: all .35s var(--ease);
  min-height: 180px;
}
.quick-card:hover {
  background: var(--ink);
  color: var(--surface);
  border-color: var(--ink);
  transform: translateY(-3px);
}
.qc-icon {
  width: 40px; height: 40px;
  border-radius: 12px;
  display: grid; place-items: center;
  color: white;
  font-family: var(--f-mono);
  font-size: 1.1rem;
  background: var(--accent) !important;
}
.quick-card:nth-child(2) .qc-icon { background: var(--accent-2) !important; }
.quick-card:nth-child(3) .qc-icon { background: var(--accent-3) !important; }
.quick-card:nth-child(4) .qc-icon { background: var(--ink) !important; color: var(--accent); border: 1px solid var(--line); }
.quick-card:hover .qc-icon:nth-child(4) { border-color: transparent; }
.qc-title { font-family: var(--f-display); font-size: 1.3rem; letter-spacing: -.01em; margin-top: auto; }
.qc-desc { font-size: 0.88rem; color: var(--ink-3); transition: color .3s; }
.quick-card:hover .qc-desc { color: rgba(255,255,255,.6); }
.qc-cost {
  font-family: var(--f-mono);
  font-size: 0.74rem;
  color: var(--accent);
  padding: 4px 10px;
  background: var(--accent-soft);
  border-radius: 100px;
  width: fit-content;
  margin-top: 4px;
  transition: all .3s;
}
.quick-card:hover .qc-cost { background: rgba(232,92,44,.15); }

/* Recent projects list */
.projects-list {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.project-row {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: 20px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
  align-items: center;
}
.project-row:last-child { border-bottom: none; }
.pr-type-badge {
  padding: 5px 10px;
  border-radius: 100px;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: .04em;
  text-transform: lowercase;
  width: fit-content;
}
.pr-photo { background: var(--accent-soft); color: var(--accent); }
.pr-tryon { background: var(--accent-2-soft); color: #6B5FA0; }
.pr-video { background: var(--accent-3-soft); color: #4F8C74; }
.pr-info { display: flex; flex-direction: column; gap: 2px; }
.pr-scene { font-size: 0.95rem; color: var(--ink); }
.pr-date { font-family: var(--f-mono); font-size: 0.72rem; color: var(--ink-3); }
.pr-status { font-family: var(--f-mono); font-size: 0.76rem; padding: 5px 10px; border-radius: 100px; }
.pr-status-done { background: var(--accent-3-soft); color: #4F8C74; }
.pr-status-processing { background: var(--accent-soft); color: var(--accent); }
.pr-status-error { background: #F5D0D0; color: #A04040; }

.empty-state {
  padding: 48px;
  text-align: center;
  color: var(--ink-3);
  font-family: var(--f-mono);
  font-size: 0.85rem;
}

/* =========================================================
   GENERATE (photo / tryon / video)
   ========================================================= */

.gen-layout {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 24px;
  align-items: start;
}

.form-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px;
}
.form-card h3 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: -.015em;
  margin-bottom: 20px;
}
.form-card form { display: flex; flex-direction: column; gap: 18px; }

.upload-zone {
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--r-md);
  padding: 32px 20px;
  text-align: center;
  cursor: pointer;
  transition: all .25s var(--ease);
  background: repeating-linear-gradient(135deg, var(--surface) 0 10px, var(--surface-2) 10px 20px);
  min-height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.upload-zone:hover, .upload-zone.drag-over {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.upload-placeholder { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.upload-icon {
  width: 44px; height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--f-mono);
  color: var(--ink-2);
  background: var(--surface);
}
.upload-text { font-size: 0.95rem; color: var(--ink); }
.upload-hint { font-family: var(--f-mono); font-size: 0.72rem; color: var(--ink-3); }

.radio-group { display: flex; gap: 8px; flex-wrap: wrap; }
.radio-opt {
  flex: 1;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: 0.88rem;
  text-align: center;
  cursor: pointer;
  transition: all .25s;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  color: var(--ink-2);
}
.radio-opt input { accent-color: var(--accent); }
.radio-opt:hover { border-color: var(--line-strong); }
.radio-opt:has(input:checked) {
  background: var(--ink);
  color: var(--surface);
  border-color: var(--ink);
}

.cost-line {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 16px;
  background: var(--bg-raise);
  border-radius: var(--r-md);
  font-size: 0.88rem;
  border: 1px dashed var(--line-strong);
}
.cost-val {
  font-family: var(--f-mono);
  font-size: 0.9rem;
  color: var(--accent);
  padding: 5px 12px;
  background: var(--accent-soft);
  border-radius: 100px;
}

/* Result column */

.result-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 36px;
  min-height: 540px;
  display: flex; flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}
.result-card::before {
  content: '// result';
  position: absolute;
  top: 20px; left: 24px;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  color: var(--ink-3);
  letter-spacing: .04em;
}
.result-placeholder {
  text-align: center;
  color: var(--ink-3);
  display: flex; flex-direction: column; gap: 12px; align-items: center;
}
.result-placeholder > div:first-child {
  width: 80px; height: 80px;
  border: 1px dashed var(--line-strong);
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--f-mono);
  font-size: 1.5rem !important;
  color: var(--ink-2);
  margin-bottom: 8px !important;
  background: var(--bg);
}
.result-placeholder p { font-family: var(--f-mono); font-size: 0.85rem; color: var(--ink-3); }
.result-placeholder small { font-family: var(--f-mono); font-size: 0.76rem; color: var(--ink-3); opacity: .7; }

.result-processing {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.spinner {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 2px solid var(--line);
  border-top-color: var(--accent);
  animation: spin .9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.result-processing p { font-family: var(--f-display); font-size: 1.2rem; }
.result-processing small { font-family: var(--f-mono); font-size: 0.78rem; color: var(--ink-3); }

.result-images {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  width: 100%;
}
.result-img-wrap {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--bg-raise);
  aspect-ratio: 1;
  border: 1px solid var(--line);
}
.result-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.img-download {
  position: absolute;
  top: 10px; right: 10px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--surface);
  display: grid; place-items: center;
  font-family: var(--f-mono);
  font-size: 0.9rem;
  transition: background .2s;
}
.img-download:hover { background: var(--accent); }

.result-actions {
  margin-top: 20px;
  display: flex; gap: 10px;
  width: 100%;
  justify-content: center;
}

/* =========================================================
   PROJECTS (grid / filters)
   ========================================================= */

.projects-filters {
  display: flex; gap: 8px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.filter-btn {
  font-family: var(--f-mono);
  font-size: 0.78rem;
  padding: 10px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 100px;
  color: var(--ink-2);
  cursor: pointer;
  transition: all .3s var(--ease);
}
.filter-btn:hover { border-color: var(--ink); }
.filter-btn.active { background: var(--ink); color: var(--surface); border-color: var(--ink); }

.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
.proj-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: all .3s var(--ease);
}
.proj-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.proj-header {
  padding: 14px 16px;
  display: flex; justify-content: space-between;
  align-items: center;
}
.proj-preview {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--bg-raise);
}
.proj-preview-placeholder {
  width: 100%; aspect-ratio: 1;
  background: repeating-linear-gradient(135deg, var(--surface-2) 0 10px, var(--bg-raise) 10px 20px);
  display: grid; place-items: center;
  font-family: var(--f-mono);
  font-size: 2rem;
  color: var(--ink-3);
}
.proj-footer {
  padding: 14px 16px;
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid var(--line);
}
.proj-scene { font-size: 0.88rem; color: var(--ink); }
.proj-date { font-family: var(--f-mono); font-size: 0.72rem; color: var(--ink-3); }

/* =========================================================
   BILLING
   ========================================================= */

.alert-success {
  padding: 14px 18px;
  background: var(--accent-3-soft);
  border: 1px solid var(--accent-3);
  border-radius: var(--r-md);
  color: #2F6B50;
  font-size: 0.92rem;
  margin-bottom: 20px;
  font-family: var(--f-mono);
}

/* ─── Billing v2 — matte glass + running balance ─────────────────────── */

/* Hero: текущий баланс + три mini-метрики */
.bill-hero {
  display: grid;
  grid-template-columns: 1.05fr 1.6fr;
  gap: 14px;
  margin: 0 0 32px;
}
@media (max-width: 820px) { .bill-hero { grid-template-columns: 1fr; } }
.bill-hero-main {
  position: relative;
  background:
    radial-gradient(circle at 18% 28%, rgba(232,92,44,.22) 0%, transparent 55%),
    radial-gradient(circle at 82% 75%, rgba(232,92,44,.12) 0%, transparent 50%),
    radial-gradient(circle at 50% 100%, rgba(255,150,112,.08) 0%, transparent 60%),
    linear-gradient(160deg, #1F140E 0%, #150D08 55%, #0B0807 100%);
  color: #fff;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--r-lg);
  padding: 26px 28px 24px;
  overflow: hidden;
  box-shadow: 0 18px 48px -24px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
}
/* Subtle grid pattern for texture */
.bill-hero-main::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 18px, rgba(232,92,44,.10) 18px 19px),
    repeating-linear-gradient(0deg,  transparent 0 18px, rgba(232,92,44,.10) 18px 19px);
  opacity: .18;
  pointer-events: none;
  border-radius: inherit;
}
.bill-hero-main > * { position: relative; z-index: 1; }
.bill-hero-label {
  font-family: var(--f-mono); font-size: .68rem;
  color: rgba(255,255,255,.55);
  text-transform: lowercase; letter-spacing: .06em; margin-bottom: 10px;
}
.bill-hero-num {
  font-family: var(--f-display); font-size: clamp(2.4rem, 6vw, 3.6rem);
  line-height: 1; letter-spacing: -.03em; color: #fff;
  display: inline-flex; align-items: center; gap: 14px;
  margin-bottom: 10px;
}
.bill-hero-bolt {
  display: inline-flex; width: 52px; height: 52px;
  color: var(--accent);
  filter: drop-shadow(0 0 18px rgba(232,92,44,.45));
}
.bill-hero-bolt svg { width: 100%; height: 100%; }
.bill-hero-unit {
  font-family: var(--f-mono); font-size: .9rem;
  color: rgba(255,255,255,.55);
  text-transform: lowercase; letter-spacing: .04em;
  align-self: flex-end; margin-bottom: 6px;
}
.bill-hero-foot {
  font-family: var(--f-mono); font-size: .72rem;
  color: rgba(255,255,255,.5);
}

.bill-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 540px) { .bill-hero-stats { grid-template-columns: 1fr; } }
.bill-mini {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,.78) 0%, rgba(252,247,238,.62) 100%);
  border: 1px solid rgba(40,30,20,.06);
  border-radius: var(--r-lg);
  padding: 14px 16px;
  display: flex; align-items: center; gap: 12px;
  overflow: hidden;
  box-shadow: 0 8px 24px -16px rgba(40,30,20,.18), inset 0 1px 0 rgba(255,255,255,.7);
  transition: all .25s var(--ease);
}
.bill-mini::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.85 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
  opacity: .06;
  mix-blend-mode: multiply;
  pointer-events: none;
  border-radius: inherit;
}
.bill-mini > * { position: relative; z-index: 1; }
.bill-mini:hover { transform: translateY(-1px); box-shadow: 0 12px 28px -16px rgba(40,30,20,.22); }
.bill-mini-ic {
  width: 32px; height: 32px; border-radius: 8px;
  display: grid; place-items: center; flex-shrink: 0;
}
.bill-mini-ic svg { width: 16px; height: 16px; stroke-width: 1.7; }
.bill-mini-ic-spend { background: var(--accent-soft);   color: var(--accent); }
.bill-mini-ic-buy   { background: var(--accent-2-soft); color: #6B5FA0; }
.bill-mini-ic-bonus { background: var(--accent-3-soft); color: #4F8C74; }
.bill-mini-body { min-width: 0; }
.bill-mini-num {
  font-family: var(--f-display); font-size: 1.45rem; line-height: 1;
  color: var(--ink); letter-spacing: -.02em;
}
.bill-mini-sub { font-family: var(--f-mono); font-size: .76rem; color: var(--ink-3); font-weight: 400; }
.bill-mini-lbl {
  font-family: var(--f-mono); font-size: .62rem; color: var(--ink-3);
  text-transform: lowercase; letter-spacing: .04em; margin-top: 4px;
}

/* ─── Packages — matte glass с лёгким шумом ─────────────────────────── */
.packages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 32px;
}
.pkg-card {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,.78) 0%, rgba(252,247,238,.62) 100%);
  border: 1px solid rgba(40,30,20,.06);
  border-radius: var(--r-lg);
  padding: 22px 22px 18px;
  display: flex; flex-direction: column; gap: 10px;
  overflow: hidden;
  transition: all .25s var(--ease);
  box-shadow: 0 8px 24px -16px rgba(40,30,20,.18), inset 0 1px 0 rgba(255,255,255,.7);
}
.pkg-card::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.85 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
  opacity: .05;
  mix-blend-mode: multiply;
  pointer-events: none;
  border-radius: inherit;
}
.pkg-card > * { position: relative; z-index: 1; }
.pkg-card:hover { transform: translateY(-2px); box-shadow: 0 14px 32px -16px rgba(40,30,20,.22); }
.pkg-popular {
  background: linear-gradient(180deg, rgba(40,30,20,.95) 0%, rgba(20,16,12,1) 100%);
  color: var(--surface);
  border-color: rgba(255,255,255,.10);
  box-shadow: 0 12px 32px -16px rgba(40,30,20,.40);
}
.pkg-popular::before { opacity: .14; mix-blend-mode: overlay; }
.pkg-popular .pkg-name,
.pkg-popular .pkg-credits,
.pkg-popular .pkg-per { color: rgba(255,255,255,.65); }
.pkg-popular .pkg-per { border-color: rgba(255,255,255,.10); }
.pkg-popular .btn-ghost { border-color: rgba(255,255,255,.30); color: var(--surface); }
.pkg-popular .btn-ghost:hover { background: var(--accent); border-color: var(--accent); }

.pkg-badge {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  background: var(--accent); color: white;
  padding: 3px 9px; border-radius: 100px;
  font-family: var(--f-mono); font-size: .58rem; font-weight: 600;
  letter-spacing: .06em; text-transform: lowercase;
  white-space: nowrap;
  box-shadow: 0 4px 12px -4px rgba(232,92,44,.55);
}
.pkg-name {
  font-family: var(--f-mono); font-size: .7rem;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-3);
}
.pkg-price {
  font-family: var(--f-display); font-size: 2.4rem;
  line-height: 1; letter-spacing: -.03em;
}
.pkg-price span { font-size: .9rem; color: var(--ink-3); font-family: var(--f-mono); }
.pkg-popular .pkg-price span { color: rgba(255,255,255,.5); }
.pkg-credits { font-size: .92rem; }
.pkg-usage {
  display: flex; flex-direction: column; gap: 4px;
  margin: 8px 0 4px;
  padding: 8px 0; border-top: 1px dashed rgba(40,30,20,.10);
}
.pkg-popular .pkg-usage { border-color: rgba(255,255,255,.10); }
.pkg-usage-row {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--f-mono); font-size: .7rem; color: var(--ink-2);
  letter-spacing: .02em;
}
.pkg-popular .pkg-usage-row { color: rgba(255,255,255,.75); }
.pkg-usage-row svg {
  width: 13px; height: 13px; opacity: .65; flex-shrink: 0;
  color: var(--accent);
}
.pkg-popular .pkg-usage-row svg { color: #FF9670; opacity: .85; }
.pkg-per {
  font-family: var(--f-mono); font-size: .7rem; color: var(--ink-3);
  padding-top: 10px; border-top: 1px dashed rgba(40,30,20,.10);
  margin-top: 4px; margin-bottom: 8px;
}

/* ─── History head + filters ─────────────────────────────────────── */
.bill-history-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  margin: 32px 0 14px;
}
.bill-history-head .section-title { margin: 0; }
.tx-filters {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.tx-flt {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 6px 12px;
  font-family: var(--f-mono); font-size: .72rem;
  color: var(--ink-2); cursor: pointer;
  transition: all .18s var(--ease);
  display: inline-flex; align-items: center; gap: 4px;
}
.tx-flt:hover { border-color: var(--ink-3); color: var(--ink); }
.tx-flt.is-active {
  background: var(--ink); color: var(--surface); border-color: var(--ink);
}
.tx-flt-count { font-size: .62rem; opacity: .65; }

/* ─── Transactions list — 4 колонки c balance-after ─────────────── */
.transactions-list {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.tx-row {
  display: grid;
  grid-template-columns: 40px 1fr auto auto;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  align-items: center;
  transition: background .15s var(--ease);
}
.tx-row:last-child { border-bottom: none; }
.tx-row:hover { background: var(--bg-raise); }
.tx-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: grid; place-items: center;
  background: var(--bg-raise);
  color: var(--ink-2);
}
.tx-icon svg { width: 18px; height: 18px; stroke-width: 1.7; }
.tx-bonus    { background: var(--accent-3-soft); color: #4F8C74; }
.tx-purchase { background: var(--accent-2-soft); color: #6B5FA0; }
.tx-spend    { background: var(--accent-soft);   color: var(--accent); }
.tx-refund   { background: rgba(184,132,94,.18); color: #B8845E; }
.tx-info { min-width: 0; }
.tx-desc {
  font-size: .92rem; color: var(--ink); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tx-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 3px;
}
.tx-type-tag {
  font-family: var(--f-mono); font-size: .58rem;
  padding: 2px 7px; border-radius: 100px;
  background: var(--bg-raise); color: var(--ink-3);
  letter-spacing: .04em; text-transform: lowercase;
}
.tx-row-bonus    .tx-type-tag { background: var(--accent-3-soft); color: #4F8C74; }
.tx-row-purchase .tx-type-tag { background: var(--accent-2-soft); color: #6B5FA0; }
.tx-row-spend    .tx-type-tag { background: var(--accent-soft);   color: var(--accent); }
.tx-row-refund   .tx-type-tag { background: rgba(184,132,94,.18); color: #B8845E; }
.tx-date {
  font-family: var(--f-mono); font-size: .68rem; color: var(--ink-3);
}
.tx-pricetag {
  font-family: var(--f-mono); font-size: .66rem;
  color: var(--ink-2); opacity: .75;
}
.tx-amount {
  font-family: var(--f-display); font-size: 1.15rem; font-weight: 500;
  letter-spacing: -.01em; white-space: nowrap;
}
.tx-amount-unit {
  font-family: var(--f-mono); font-size: .68rem;
  color: var(--ink-3); font-weight: 400; margin-left: 2px;
}
.tx-amount-pos { color: #4F8C74; }
.tx-amount-neg { color: var(--accent); }
.tx-balance {
  display: flex; align-items: baseline; gap: 4px;
  font-family: var(--f-mono); white-space: nowrap;
  padding-left: 14px; border-left: 1px dashed var(--line);
  color: var(--ink-3);
}
.tx-balance-arrow { font-size: .8rem; opacity: .55; margin-right: 4px; }
.tx-balance-num {
  font-family: var(--f-display); font-size: 1rem; font-weight: 500;
  color: var(--ink); letter-spacing: -.01em;
}
.tx-balance-unit { font-size: .62rem; opacity: .65; }

@media (max-width: 720px) {
  .tx-row { grid-template-columns: 36px 1fr auto; padding: 12px 14px; gap: 12px; }
  .tx-icon { width: 32px; height: 32px; }
  .tx-amount { font-size: 1rem; }
  /* balance переезжает в новую строку под amount */
  .tx-balance {
    grid-column: 2 / -1; padding-left: 0; border-left: none; margin-top: 2px;
  }
  .tx-balance-num { font-size: .85rem; }
}

/* ── Пагинация списка транзакций ──────────────────────────────────────── */
.tx-pagination {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 6px;
  margin-top: 18px; padding: 4px 8px;
}
.tx-pg-btn {
  min-width: 34px; height: 34px;
  padding: 0 10px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  font-family: var(--f-mono); font-size: .82rem;
  cursor: pointer;
  transition: all .15s var(--ease);
  display: inline-flex; align-items: center; justify-content: center;
}
.tx-pg-btn:not(:disabled):hover { background: var(--bg-raise); color: var(--ink); border-color: var(--ink-3); }
.tx-pg-btn.is-active {
  background: var(--ink); color: var(--surface); border-color: var(--ink);
  font-weight: 500;
}
.tx-pg-btn:disabled { opacity: .35; cursor: not-allowed; }
.tx-pg-arrow { font-size: 1.1rem; line-height: 1; padding: 0 8px; }
.tx-pg-ellipsis {
  display: inline-flex; align-items: center;
  padding: 0 4px; color: var(--ink-3);
  font-family: var(--f-mono); font-size: .82rem;
}
.tx-pg-info {
  margin-left: 14px; padding-left: 14px;
  border-left: 1px solid var(--line);
  font-family: var(--f-mono); font-size: .72rem;
  color: var(--ink-3);
  letter-spacing: .02em;
}
@media (max-width: 600px) {
  .tx-pg-info { display: none; }
  .tx-pg-btn { min-width: 30px; height: 30px; font-size: .76rem; padding: 0 8px; }
}


/* =========================================================
   COMPATIBILITY ALIASES
   ========================================================= */

.gen-form-col { display: contents; }
.gen-result-col { display: contents; }

.tx-info { flex: 1; display: flex; flex-direction: column; gap: 2px; }

.btn-sm { padding: 8px 14px; font-size: 0.82rem; }

/* =========================================================
   LANG SWITCHER
   ========================================================= */
.lang-switcher {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--surface, #FBF7EE);
  border: 1px solid var(--line, #E1D7C2);
  border-radius: 100px;
  padding: 3px;
}
.lang-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--f-mono, monospace);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-3, #8A7F6C);
  padding: 5px 10px;
  border-radius: 100px;
  transition: all .2s;
  line-height: 1;
}
.lang-btn:hover { color: var(--ink, #1A1815); }
.lang-btn.active {
  background: var(--ink, #1A1815);
  color: var(--surface, #FBF7EE);
}


/* === NEW: topbar, profile, projects (from aistudio) === */

/* Aliases used on profile / projects pages */
.btn-accent {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px;
  border-radius: 100px;
  font-weight: 500;
  font-size: 0.9rem;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--surface);
  cursor: pointer;
  transition: all .3s var(--ease);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.btn-accent:hover { background: var(--accent); border-color: var(--accent); color: white; transform: translateY(-1px); box-shadow: var(--sh-md); }

.btn-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px;
  border-radius: 100px;
  font-weight: 500;
  font-size: 0.9rem;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: all .3s var(--ease);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.btn-outline:hover { background: var(--ink); color: var(--surface); border-color: var(--ink); }

/* Form inputs used on profile */
.form-label {
  display: block;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  color: var(--ink-3);
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.form-input {
  width: 100%;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-family: var(--f-base);
  font-size: 0.92rem;
  color: var(--ink);
  transition: all .2s var(--ease);
  outline: none;
  appearance: none;
}
.form-input:hover { border-color: var(--line-strong); }
.form-input:focus { border-color: var(--ink); background: white; box-shadow: 0 0 0 4px rgba(232,92,44,.08); }
.form-input::placeholder { color: var(--ink-3); }
select.form-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238A7F6C' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

/* =========================================================
   TOPBAR (search + credits + user menu row)
   ========================================================= */

.cab-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 14px 0 18px;
  margin-bottom: 8px;
  border-bottom: 1px dashed var(--line);
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 30;
  backdrop-filter: blur(8px);
}
.cab-topbar-left {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}
.cab-topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.page-kicker {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  color: var(--ink-3);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

@media (max-width: 720px) {
  .cab-topbar { flex-wrap: nowrap; }
  .cab-topbar-left { flex: 1; min-width: 0; }
  .cab-topbar-right { flex-shrink: 0; }
  .search-bar { max-width: 100%; }
  .user-btn-name { display: none; }
}

/* =========================================================
   SEARCH BAR (global, used in top of content)
   ========================================================= */

/* Wrapper для search + dropdown */
.search-wrap { position: relative; flex: 1; min-width: 0; max-width: 480px; }

.search-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 100px;
  transition: all .2s var(--ease);
  width: 100%;
}
.search-wrap:has(.search-dropdown.open) .search-bar {
  border-color: var(--ink);
  background: white;
  box-shadow: 0 0 0 4px rgba(232,92,44,.1);
}

.search-clear {
  background: var(--bg-raise);
  border: none; cursor: pointer;
  width: 22px; height: 22px;
  border-radius: 50%;
  display: inline-grid; place-items: center;
  color: var(--ink-3);
  transition: all .15s;
  flex-shrink: 0;
}
.search-clear:hover { background: var(--ink); color: var(--surface); }

/* === DROPDOWN === */
.search-dropdown {
  position: absolute;
  top: calc(100% + 8px); left: 0; right: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  z-index: 60;
  display: none;
  overflow: hidden;
  max-height: 70vh;
  flex-direction: column;
}
.search-dropdown.open { display: flex; animation: sd-pop .22s var(--ease, cubic-bezier(.2,.7,.2,1)); }
@keyframes sd-pop {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
#searchResults { overflow-y: auto; max-height: 60vh; }

.search-result-empty {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 20px;
  font-family: var(--f-mono); font-size: 0.78rem; color: var(--ink-3);
}
.search-result-empty svg { stroke: var(--ink-3); fill: none; stroke-width: 1.6; flex-shrink: 0; }

/* Заголовки секций — // проекты, // мои папки, // мои пресеты */
.sd-section {
  font-family: var(--f-mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-3);
  padding: 12px 18px 6px;
  display: flex; align-items: center; gap: 8px;
  border-top: 1px dashed var(--line);
  background: var(--surface);
}
#searchResults > .sd-section:first-child { border-top: none; padding-top: 14px; }
.sd-section-cnt {
  margin-left: auto;
  background: var(--bg-raise);
  color: var(--ink-2);
  padding: 2px 8px;
  border-radius: 100px;
  font-size: 0.62rem;
  letter-spacing: 0;
}

/* Строка результата */
.sd-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 18px;
  text-decoration: none;
  color: var(--ink);
  transition: background .12s;
  cursor: pointer;
}
.sd-item:hover { background: var(--bg-raise); }
.sd-item-ic {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: grid; place-items: center;
  flex-shrink: 0;
  background: var(--bg-raise);
  color: var(--ink-2);
}
.sd-item-ic svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.sd-ic-photo { background: var(--accent-soft); color: var(--accent); }
.sd-ic-tryon { background: var(--accent-2-soft); color: #6B5FA0; }
.sd-ic-video { background: var(--accent-3-soft); color: #4F8C74; }
.sd-ic-info  { background: var(--accent-2-soft); color: #6B5FA0; }
.sd-ic-spark { background: var(--accent-soft); color: var(--accent); }

.sd-item-body { flex: 1; min-width: 0; }
.sd-item-title {
  font-size: 0.92rem;
  color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  display: flex; align-items: center; gap: 8px;
}
.sd-item-title mark {
  background: var(--accent-soft);
  color: var(--accent);
  padding: 0 2px; border-radius: 3px;
}
.sd-item-meta {
  font-family: var(--f-mono); font-size: 0.7rem;
  color: var(--ink-3);
  margin-top: 2px;
  letter-spacing: .02em;
}
.sd-article {
  font-family: var(--f-mono); font-size: 0.66rem;
  padding: 1px 7px; border-radius: 100px;
  background: var(--bg-raise); color: var(--ink-2);
  border: 1px solid var(--line);
  flex-shrink: 0;
}
.sd-status { color: var(--accent-3); font-weight: 500; }
.sd-status.sd-status-processing { color: var(--accent); }
.sd-status.sd-status-error      { color: #A04040; }

/* Mobile: dropdown на ширину viewport */
@media (max-width: 820px) {
  .search-wrap { max-width: 100%; }
  .search-dropdown { max-height: 70vh; }
  .sd-section { padding: 10px 14px 5px; }
  .sd-item { padding: 9px 14px; gap: 10px; }
  .sd-item-ic { width: 32px; height: 32px; border-radius: 8px; }
  .sd-item-ic svg { width: 16px; height: 16px; }
  .sd-item-title { font-size: 0.88rem; }
}
.search-bar:focus-within {
  border-color: var(--ink);
  background: white;
  box-shadow: 0 0 0 4px rgba(232,92,44,.1);
}
.search-bar svg { width: 16px; height: 16px; stroke: var(--ink-3); fill: none; stroke-width: 1.8; stroke-linecap: round; flex-shrink: 0; }
.search-bar:focus-within svg { stroke: var(--accent); }
.search-bar input {
  border: none; background: transparent; outline: none;
  flex: 1; font-size: 0.92rem; color: var(--ink);
  min-width: 0;
}
.search-bar input::placeholder { color: var(--ink-3); }
.search-bar kbd {
  font-family: var(--f-mono);
  font-size: 0.68rem;
  padding: 3px 7px;
  background: var(--bg-raise);
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--ink-3);
}

/* =========================================================
   USER MENU (top-right avatar + dropdown)
   ========================================================= */

.user-menu { position: relative; }
.user-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 12px 6px 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 100px;
  cursor: pointer;
  transition: all .2s;
}
.user-btn:hover { border-color: var(--line-strong); }
.user-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--surface);
  display: grid; place-items: center;
  font-family: var(--f-display);
  font-size: 1rem;
  letter-spacing: -.02em;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.user-avatar::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 30%, var(--accent) 0%, transparent 70%);
  opacity: .9;
}
.user-avatar span { position: relative; z-index: 1; color: var(--surface); }
.user-avatar-lg { width: 80px; height: 80px; font-size: 2.2rem; border-radius: 20px; }
.user-avatar-lg::before { border-radius: 20px; }
.user-btn-name { font-size: 0.88rem; color: var(--ink); }
.user-btn-chev { width: 14px; height: 14px; stroke: var(--ink-3); fill: none; stroke-width: 2; }

.user-dropdown {
  position: absolute; top: calc(100% + 10px); right: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 10px;
  min-width: 260px;
  box-shadow: var(--sh-lg);
  display: none;
  z-index: 50;
}
.user-dropdown.open { display: block; }
.user-dd-head {
  padding: 14px 14px 16px;
  border-bottom: 1px dashed var(--line);
  margin-bottom: 8px;
}
.user-dd-name { font-family: var(--f-display); font-size: 1.1rem; letter-spacing: -.01em; }
.user-dd-email { font-family: var(--f-mono); font-size: 0.76rem; color: var(--ink-3); }
.user-dd-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 0.9rem;
  color: var(--ink-2);
  cursor: pointer;
  transition: all .15s;
}
.user-dd-item:hover { background: var(--bg-raise); color: var(--ink); }
.user-dd-item svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.user-dd-divider { height: 1px; background: var(--line); margin: 6px 0; }

/* =========================================================
   PROJECTS — folder sidebar + toolbar
   ========================================================= */

.projects-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 24px;
  align-items: start;
}

.folders-panel {
  position: sticky; top: 36px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 18px 14px;
  display: flex; flex-direction: column; gap: 4px;
}
.folders-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 2px 8px 10px;
  border-bottom: 1px dashed var(--line);
  margin-bottom: 8px;
}
.folders-title {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.folder-new-btn {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 50%;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  cursor: pointer;
  color: var(--ink-2);
  transition: all .2s;
}
.folder-new-btn:hover { background: var(--accent); color: white; border-color: var(--accent); }
.folder-new-btn svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2.2; }

.folder-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  border-radius: 100px;
  font-size: 0.9rem;
  color: var(--ink-2);
  cursor: pointer;
  transition: all .2s;
  position: relative;
}
.folder-item:hover { background: var(--bg-raise); color: var(--ink); }
.folder-item.active { background: var(--ink); color: var(--surface); }
.folder-item.active .folder-ico { color: var(--accent); }
.folder-ico { width: 16px; height: 16px; flex-shrink: 0; }
.folder-ico svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* Pinterest-логотип в фолдере «Микс Фото» — растровый SVG, без обводки. */
.folder-ico-mix-pin img { width: 100%; height: 100%; display: block; }
.folder-item .folder-count {
  margin-left: auto;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  opacity: .7;
}
.folder-color-dot {
  width: 10px; height: 10px; border-radius: 50%;
  flex-shrink: 0;
}

.folders-section-label {
  font-family: var(--f-mono);
  font-size: 0.66rem;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 14px 12px 6px;
}

/* projects toolbar */

.projects-toolbar {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.toolbar-left { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 280px; }
.toolbar-right { display: flex; align-items: center; gap: 8px; }

.sort-select {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 10px 36px 10px 14px;
  font-family: var(--f-mono);
  font-size: 0.76rem;
  color: var(--ink-2);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238A7F6C' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

.view-toggle {
  display: flex;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 3px;
}
.view-toggle button {
  background: transparent;
  border: none;
  padding: 7px 11px;
  border-radius: 100px;
  cursor: pointer;
  color: var(--ink-3);
  display: grid; place-items: center;
  transition: all .2s;
}
.view-toggle button.active { background: var(--ink); color: var(--surface); }
.view-toggle svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* proj card polish */

.proj-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: all .3s var(--ease);
  position: relative;
}
.proj-check {
  position: absolute; top: 12px; left: 12px;
  width: 22px; height: 22px;
  border-radius: 6px;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(4px);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  cursor: pointer;
  opacity: 0;
  transition: all .2s;
  z-index: 2;
}
.proj-card:hover .proj-check { opacity: 1; }
.proj-check svg { width: 12px; height: 12px; stroke: var(--ink); fill: none; stroke-width: 2.5; opacity: 0; }
.proj-check.checked { background: var(--accent); border-color: var(--accent); opacity: 1; }
.proj-check.checked svg { stroke: white; opacity: 1; }

/* selection bar */

.selection-bar {
  display: none;
  position: sticky; top: 20px; z-index: 20;
  background: var(--ink);
  color: var(--surface);
  padding: 10px 16px;
  border-radius: 100px;
  margin-bottom: 18px;
  align-items: center; gap: 14px;
  box-shadow: var(--sh-md);
}
.selection-bar.show { display: flex; }
.selection-bar .sel-count { font-family: var(--f-mono); font-size: 0.82rem; }
.selection-bar button {
  background: transparent; border: 1px solid rgba(255,255,255,.2);
  color: var(--surface); border-radius: 100px;
  padding: 6px 14px; font-size: 0.82rem; cursor: pointer;
  transition: all .2s;
}
.selection-bar button:hover { background: var(--accent); border-color: var(--accent); }

/* Empty folder */
.folder-empty {
  padding: 80px 40px;
  text-align: center;
  background: var(--surface);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
  color: var(--ink-3);
}
.folder-empty h4 { font-family: var(--f-display); font-size: 1.5rem; color: var(--ink); margin-bottom: 8px; }
.folder-empty p { font-size: 0.92rem; margin-bottom: 18px; }

/* =========================================================
   PROFILE PAGE
   ========================================================= */

.profile-hero {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px;
  display: flex; align-items: center; gap: 24px;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
}
.profile-hero::before {
  content: ''; position: absolute;
  width: 400px; height: 400px; border-radius: 50%;
  background: var(--accent); filter: blur(140px); opacity: .15;
  top: -100px; right: -100px; pointer-events: none;
}
.profile-hero-info { flex: 1; position: relative; z-index: 1; }
.profile-name { font-family: var(--f-display); font-size: 2rem; letter-spacing: -.02em; line-height: 1.05; }
.profile-email { font-family: var(--f-mono); font-size: 0.82rem; color: var(--ink-3); margin-top: 6px; }
.profile-meta-row {
  display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap;
}
.profile-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px 5px 8px;
  background: var(--bg-raise);
  border: 1px solid var(--line);
  border-radius: 100px;
  font-family: var(--f-mono);
  font-size: 0.74rem;
  color: var(--ink-2);
}
.profile-chip-pro { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.profile-chip-pro .dot { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.profile-chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-3); }
.profile-chip svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.8; }

.profile-hero-actions { display: flex; gap: 8px; position: relative; z-index: 1; }

.profile-tabs {
  display: flex; gap: 4px;
  padding: 4px;
  background: var(--bg-raise);
  border: 1px solid var(--line);
  border-radius: 100px;
  margin-bottom: 24px;
  width: fit-content;
  overflow-x: auto;
  max-width: 100%;
}
.profile-tab {
  padding: 9px 18px;
  border-radius: 100px;
  font-size: 0.86rem;
  color: var(--ink-2);
  background: transparent;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: all .2s;
  display: inline-flex; align-items: center; gap: 7px;
}
.profile-tab svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.profile-tab:hover { color: var(--ink); }
.profile-tab.active { background: var(--ink); color: var(--surface); }
.profile-tab.active svg { stroke: var(--accent); }

.profile-panels > .profile-panel { display: none; }
.profile-panels > .profile-panel.active { display: block; }

.profile-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 16px;
  align-items: start;
}
@media (max-width: 960px) { .profile-grid { grid-template-columns: 1fr; } }

.settings-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px;
}
.settings-card h3 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 1.3rem;
  letter-spacing: -.015em;
  margin-bottom: 4px;
}
.settings-card .settings-sub {
  font-size: 0.86rem; color: var(--ink-3);
  margin-bottom: 20px;
}
.settings-card form { display: flex; flex-direction: column; gap: 16px; }
.settings-card .form-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}

/* Toggle switch */
.toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px dashed var(--line);
}
.toggle-row:last-child { border-bottom: none; }
.toggle-info { flex: 1; padding-right: 16px; }
.toggle-label { font-size: 0.95rem; color: var(--ink); margin-bottom: 2px; }
.toggle-hint { font-size: 0.82rem; color: var(--ink-3); }
.toggle {
  position: relative;
  width: 42px; height: 24px;
  background: var(--line);
  border-radius: 100px;
  cursor: pointer;
  transition: background .25s;
  flex-shrink: 0;
}
.toggle::after {
  content: '';
  position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px;
  background: white;
  border-radius: 50%;
  transition: transform .25s var(--ease);
  box-shadow: var(--sh-sm);
}
.toggle.on { background: var(--accent); }
.toggle.on::after { transform: translateX(18px); }

/* Plan card */
.plan-card {
  background: var(--bg-deep);
  color: var(--surface);
  border-radius: var(--r-lg);
  padding: 24px;
  position: relative;
  overflow: hidden;
}
.plan-card::before {
  content: ''; position: absolute;
  width: 260px; height: 260px; border-radius: 50%;
  background: var(--accent-2); filter: blur(80px); opacity: .25;
  bottom: -80px; right: -80px; pointer-events: none;
}
.plan-card > * { position: relative; z-index: 1; }
.plan-label { font-family: var(--f-mono); font-size: 0.72rem; color: rgba(255,255,255,.55); letter-spacing: .06em; text-transform: uppercase; }
.plan-name { font-family: var(--f-display); font-size: 2.4rem; letter-spacing: -.02em; line-height: 1; margin-top: 6px; }
.plan-name em { color: var(--accent); font-style: italic; }
.plan-desc { font-size: 0.9rem; color: rgba(255,255,255,.7); margin-top: 10px; line-height: 1.5; }
.plan-perks { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.1); }
.plan-perks li { font-size: 0.86rem; color: rgba(255,255,255,.8); display: flex; gap: 8px; align-items: center; }
.plan-perks svg { width: 14px; height: 14px; stroke: var(--accent-3); fill: none; stroke-width: 2; flex-shrink: 0; }

.api-key-row {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  background: var(--bg-raise);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-family: var(--f-mono);
  font-size: 0.82rem;
}
.api-key-row code { flex: 1; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.api-key-btn {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
  font-family: var(--f-mono);
  font-size: 0.74rem;
  color: var(--ink-2);
  transition: all .2s;
}
.api-key-btn:hover { background: var(--ink); color: var(--surface); border-color: var(--ink); }

/* Session row */
.session-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 0;
  border-bottom: 1px dashed var(--line);
}
.session-row:last-child { border-bottom: none; }

/* =========================================================
   NEW DESIGN — sidebar v2, dashboard v2, workspace
   ========================================================= */

/* Sidebar v2 sections / items */
.nav-section-label { padding: 18px 12px 6px; display: flex; align-items: center; gap: 8px; }
.nav-section-label::before { content: '//'; color: var(--accent); opacity: .55; }
.nav-item .nav-tag {
  margin-left: auto;
  font-family: var(--f-mono);
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 2px 7px;
  border-radius: 100px;
  background: var(--accent-2-soft);
  color: #6B5FA0;
}
.nav-item.disabled { opacity: .55; cursor: not-allowed; pointer-events: none; }
.nav-item.disabled .nav-tag { background: var(--bg-raise); color: var(--ink-3); }
.nav-icon svg { width: 18px; height: 18px; }
.nav-item.active .nav-icon { color: var(--accent); }

/* Sidebar logo (sb-style alias) */
.sidebar-header .logo-mark { background: var(--ink); }
.sidebar-header .logo-text { font-family: var(--f-display); font-size: 1.25rem; letter-spacing: -.02em; }

/* =========================================================
   DASHBOARD v2 — products-row + create CTA + recent + tip
   ========================================================= */

/* Create CTA (split button) */
.create-cta {
  position: relative;
  display: flex;
  align-items: stretch;
  border-radius: 100px;
  background: var(--ink);
  color: var(--surface);
  font-size: 0.95rem;
  overflow: visible;
  box-shadow: var(--sh-md);
}
.create-cta-main {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  border-right: 1px solid rgba(255,255,255,.08);
  transition: background .25s;
  border-radius: 100px 0 0 100px;
  font-weight: 500;
  color: var(--surface);
  background: transparent;
  border-top: none; border-bottom: none; border-left: none;
  cursor: pointer;
}
.create-cta-main:hover { background: var(--accent); }
.create-cta-main .plus {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: white;
  display: grid; place-items: center;
  font-size: 1rem; line-height: 1;
  transition: transform .25s;
}
.create-cta-main:hover .plus { background: white; color: var(--accent); transform: rotate(90deg); }
.create-cta-drop {
  display: flex; align-items: center; padding: 0 16px;
  border-radius: 0 100px 100px 0;
  transition: background .25s;
  background: transparent; border: none; cursor: pointer; color: var(--surface);
}
.create-cta-drop:hover { background: var(--accent); }
.create-cta-drop svg { width: 14px; height: 14px; transition: transform .25s; }
.create-cta.open .create-cta-drop svg { transform: rotate(180deg); }

.create-menu {
  position: absolute;
  top: calc(100% + 10px); right: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 8px;
  min-width: 320px;
  box-shadow: var(--sh-lg);
  z-index: 60;
  display: none;
  flex-direction: column;
  gap: 4px;
}
.create-menu.open { display: flex; }
.cm-section {
  font-family: var(--f-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-3);
  padding: 10px 12px 4px;
}
.cm-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background .15s;
  color: var(--ink);
  text-decoration: none;
  background: none; border: none; width: 100%; text-align: left;
}
.cm-item:hover { background: var(--bg-raise); }
.cm-item .cm-ic {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.cm-item .cm-ic svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cm-item .cm-info { flex: 1; min-width: 0; }
.cm-item .cm-title { font-size: 0.95rem; font-weight: 500; }
.cm-item .cm-desc { font-size: 0.78rem; color: var(--ink-3); margin-top: 1px; }
.cm-item .cm-ic-photo { background: var(--accent-soft); color: var(--accent); }
.cm-item .cm-ic-mix { background: var(--accent-2-soft); color: #6B5FA0; }
.cm-item .cm-ic-soon { background: var(--bg-raise); color: var(--ink-3); }
.cm-item .cm-ic-transcribe { background: var(--accent-3-soft); color: #4F8C74; }
.cm-item.cm-soon { opacity: .6; cursor: not-allowed; }
.cm-item .cm-tag {
  font-family: var(--f-mono); font-size: 0.6rem;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3);
}
.cm-item .cm-arrow svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; color: var(--ink-3); }

/* Section title with meta */
.section-title { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.section-title .st-meta {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  color: var(--ink-3);
  letter-spacing: .04em;
}

/* Products row (large featured cards on dashboard) */
.products-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 14px;
  margin-bottom: 36px;
}
@media (max-width: 1100px) { .products-row { grid-template-columns: 1fr; } }

.product-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px;
  display: flex; flex-direction: column; gap: 14px;
  transition: all .35s var(--ease);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  min-height: 220px;
  text-decoration: none;
  color: inherit;
}
.product-card.featured { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.product-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.product-card.featured:hover { box-shadow: var(--sh-lg); }
.product-card .pc-tag {
  position: absolute; top: 18px; right: 18px;
  font-family: var(--f-mono);
  font-size: 0.6rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 9px;
  background: var(--accent);
  color: white;
  border-radius: 100px;
}
.product-card .pc-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--accent-soft); color: var(--accent);
  display: grid; place-items: center;
}
.product-card .pc-icon svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.product-card.featured .pc-icon { background: rgba(232,92,44,.22); color: var(--accent); }
.product-card.purple .pc-icon { background: var(--accent-2-soft); color: #6B5FA0; }
/* Green-вариант — в стилистике transcribation-strip на главной сайта:
   тёмно-зелёный фон, светлый текст, мятный em-акцент, glass-чипы. */
.product-card.green {
  background:
    radial-gradient(circle at 18% 30%, rgba(127,179,155,.18) 0%, transparent 55%),
    radial-gradient(circle at 82% 75%, rgba(232,92,44,.10) 0%, transparent 50%),
    #14241F;
  color: #E8EFEA;
  border-color: #14241F;
  position: relative;
  overflow: hidden;
}
.product-card.green::before {
  content: ''; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(90deg, transparent 0 14px, rgba(127,179,155,.06) 14px 16px);
  opacity: .8; z-index: 0; pointer-events: none;
  border-radius: inherit;
}
.product-card.green > * { position: relative; z-index: 1; }
.product-card.green:hover {
  box-shadow: 0 18px 40px -18px rgba(0,0,0,.35);
}
.product-card.green .pc-icon {
  background: rgba(127,179,155,.18);
  color: #9FCDB4;
}
.product-card.green .pc-title { color: #fff; }
.product-card.green .pc-title em { color: #9FCDB4; font-style: italic; }
.product-card.green .pc-desc { color: rgba(232,239,234,.65); }
.product-card.green .pc-tool {
  background: rgba(255,255,255,.06);
  color: rgba(232,239,234,.82);
  border-color: rgba(255,255,255,.10);
}
.product-card.green .pc-cta {
  background: rgba(127,179,155,.20);
  color: #9FCDB4;
}
.product-card.green:hover .pc-cta {
  background: #9FCDB4;
  color: #14241F;
}

.product-card .pc-title {
  font-family: var(--f-display);
  font-size: 1.7rem;
  letter-spacing: -.02em;
  line-height: 1.05;
  margin-top: auto;
}
.product-card.featured .pc-title em { color: var(--accent); font-style: italic; }
.product-card .pc-desc {
  font-size: 0.88rem;
  color: var(--ink-3);
  line-height: 1.5;
}
.product-card.featured .pc-desc { color: rgba(255,255,255,.55); }
.product-card .pc-tools {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 4px;
}
.product-card .pc-tool {
  font-family: var(--f-mono);
  font-size: 0.66rem;
  padding: 4px 10px;
  border-radius: 100px;
  background: var(--bg-raise);
  color: var(--ink-2);
  border: 1px solid var(--line);
}
.product-card.featured .pc-tool {
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.78);
  border-color: rgba(255,255,255,.1);
}
.product-card .pc-cta {
  position: absolute; bottom: 22px; right: 22px;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--bg-raise);
  color: var(--ink);
  display: grid; place-items: center;
  transition: all .25s;
}
.product-card.featured .pc-cta { background: var(--accent); color: white; }
.product-card:hover .pc-cta { transform: rotate(-45deg); background: var(--accent); color: white; }
.product-card .pc-cta svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.product-card.soon { opacity: .85; }
.product-card.soon .pc-tag { background: var(--bg-raise); color: var(--ink-3); border: 1px solid var(--line); }
.product-card.soon .pc-cta { background: var(--bg-raise); color: var(--ink-3); }
.product-card.soon:hover { transform: none; }
.product-card.soon:hover .pc-cta { transform: none; background: var(--bg-raise); color: var(--ink-3); }

/* ── Pinterest-иконка — фирменный знак раздела «Микс Фото».
   SVG (красный «P») лежит в /img/brand/pinterest.svg, общая обёртка
   .nav-icon-mix-pin / .cm-ic-mix-pin / .pc-icon-mix-pin / .stat-icon-mix-pin
   только задаёт размеры контейнера; цвет — внутри SVG (#BD081C). */

/* Сайдбар — 24px квадрат с круглой иконкой внутри */
.nav-icon-mix-pin {
  display: grid; place-items: center;
  background: transparent;
  width: 24px; height: 24px;
}
.nav-icon-mix-pin img { width: 22px; height: 22px; display: block; }

/* Dashboard cm-item — крупная иконка ~32px на светлом подложке */
.cm-item .cm-ic-mix-pin {
  background: #fff !important;
  display: grid; place-items: center;
  /* размеры контейнера наследуем из .cm-ic */
}
.cm-item .cm-ic-mix-pin img { width: 70%; height: 70%; display: block; }

/* Product-card — крупная иконка по центру плашки */
.product-card.mix-card .pc-icon-mix-pin {
  background: #fff;
  display: grid; place-items: center;
}
.product-card.mix-card .pc-icon-mix-pin img { width: 64%; height: 64%; display: block; }
.product-card.mix-card:hover .pc-icon-mix-pin { filter: brightness(.98); }

/* Stat-card — стандартная 36px иконка с круглой плашкой */
.stat-icon-mix-pin {
  background: #fff !important;
  display: grid; place-items: center;
}
.stat-icon-mix-pin img { width: 68%; height: 68%; display: block; }
.stat-card .stat-icon.stat-icon-mix-pin { background: #fff !important; }

/* Recent list (dashboard bottom panel) */
/* Чуть «вылазим» из паддинга панели отрицательными маргинами, чтобы при
   ховере подсветка тянулась почти до края панели и закруглялась как
   карточка. Дашед-разделитель уносим в ::after — он остаётся прямой
   линией внутри и не режется округлением фона. */
.recent-list { display: flex; flex-direction: column; margin: 0 -10px; }
.recent-row {
  position: relative;
  display: grid;
  grid-template-columns: 46px 1fr auto auto;
  gap: 12px;
  padding: 10px 10px;
  border-radius: var(--r-md);
  align-items: center;
  transition: background .15s var(--ease, ease);
}
.recent-row::after {
  content: '';
  position: absolute;
  left: 10px; right: 10px; bottom: 0;
  border-bottom: 1px dashed var(--line);
  pointer-events: none;
}
.recent-row:last-child::after { display: none; }
/* Превью проекта — матовое стекло с лёгким шумом поверх. */
.recent-thumb {
  position: relative;
  width: 46px; height: 46px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, rgba(255,255,255,.55), rgba(252,247,238,.4));
  border: 1px solid rgba(40,30,20,.07);
  display: grid; place-items: center;
  color: var(--ink-3);
  overflow: hidden;
}
.recent-thumb::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.85 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 110px 110px;
  opacity: .07;
  mix-blend-mode: multiply;
  pointer-events: none;
  border-radius: inherit;
}
.recent-thumb > svg, .recent-thumb > img { position: relative; z-index: 1; }
.recent-thumb.photo      { background: var(--accent-soft);   color: var(--accent); }
.recent-thumb.tryon      { background: var(--accent-2-soft); color: #6B5FA0; }
.recent-thumb.video      { background: var(--accent-3-soft); color: #4F8C74; }
.recent-thumb.mix        { background: rgba(230,0,35,.12);   color: #C04C30; }
.recent-thumb.transcribe { background: rgba(127,179,155,.18); color: #3D6F5B; }
.recent-thumb svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.6; }
/* Когда есть реальная миниатюра — img заполняет блок, скрывая бэкграунд-плашку. */
.recent-thumb.has-img { padding: 0; overflow: hidden; }
.recent-thumb.has-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Делаем строку кликабельной — без подчёркивания/цвета ссылки. */
.recent-row-link { text-decoration: none; color: inherit; }
.recent-row-link:hover { background: var(--bg-raise); }
.recent-info .r-scene { font-size: 0.94rem; }
.recent-info .r-meta { font-family: var(--f-mono); font-size: 0.7rem; color: var(--ink-3); margin-top: 2px; }
.recent-tag {
  font-family: var(--f-mono); font-size: 0.66rem;
  padding: 4px 10px; border-radius: 100px;
  background: var(--bg-raise); color: var(--ink-2);
  text-transform: lowercase; letter-spacing: .04em;
}
.recent-tag.photo { background: var(--accent-soft); color: var(--accent); }
.recent-tag.tryon { background: var(--accent-2-soft); color: #6B5FA0; }
.recent-tag.video { background: var(--accent-3-soft); color: #4F8C74; }
.recent-status {
  font-family: var(--f-mono); font-size: 0.7rem;
  color: var(--accent-3);
  display: flex; align-items: center; gap: 6px;
}
.recent-status .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.recent-status.processing { color: var(--accent); }
.recent-status.error { color: #A04040; }

/* Tip card (dashboard) */
.tip-card {
  background: var(--bg-raise);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
  padding: 22px 24px;
  display: flex; gap: 16px;
}
.tip-card .tip-ic {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--accent-soft); color: var(--accent);
  display: grid; place-items: center; flex-shrink: 0;
}
.tip-card .tip-ic svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.tip-card .tip-title { font-family: var(--f-display); font-size: 1.15rem; margin-bottom: 4px; }
.tip-card .tip-text { font-size: 0.88rem; color: var(--ink-2); line-height: 1.5; }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px 24px; }

/* Нижняя сетка дашборда: «Последние проекты» + правая колонка с «Советом дня»
   и «Распределением». Без явного gap соседи слипаются. */
.dash-grid { display: flex; flex-direction: column; gap: 22px; margin-top: 28px; }
.panel-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 14px; padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.panel-title { font-family: var(--f-display); font-weight: 400; font-size: 1.2rem; letter-spacing: -.01em; }
.panel-link {
  font-family: var(--f-mono); font-size: 0.74rem;
  color: var(--ink-3);
  display: flex; align-items: center; gap: 5px;
  cursor: pointer; text-decoration: none;
}
.panel-link:hover { color: var(--ink); }
.panel-link svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.8; }

/* =========================================================
   WORKSPACE — full-screen create page (Карточка товара)
   ========================================================= */

.ws-mobile-fab { display: none; }

.workspace {
  position: fixed; inset: 0;
  /* iOS Safari: учитываем дин. viewport (URL bar) — workspace должен реально занять весь экран */
  height: 100dvh; max-height: 100dvh;
  background: var(--bg);
  z-index: 100;
  display: flex; flex-direction: column;
  animation: ws-in .35s var(--ease);
}
@keyframes ws-in {
  from { opacity: 0; transform: scale(.985); }
  to   { opacity: 1; transform: scale(1); }
}
.ws-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  flex-shrink: 0;
}
.ws-back {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--f-mono); font-size: 0.78rem;
  color: var(--ink-2);
  padding: 8px 14px;
  border-radius: 100px;
  transition: all .2s;
  background: none; border: none; cursor: pointer;
  text-decoration: none;
}
.ws-back:hover { background: var(--bg-raise); color: var(--ink); }
.ws-back svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.ws-breadcrumb {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--f-mono); font-size: 0.78rem;
  color: var(--ink-3);
}
.ws-breadcrumb .crumb-cur { color: var(--ink); }
.ws-breadcrumb .crumb-sep { color: var(--line-strong); }
.ws-actions { display: flex; align-items: center; gap: 10px; }
.ws-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 16px;
  border-radius: 100px;
  font-size: 0.85rem;
  border: 1px solid var(--line);
  background: var(--surface);
  transition: all .2s;
  cursor: pointer; color: inherit;
}
.ws-btn:hover { border-color: var(--line-strong); }
.ws-btn.primary { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.ws-btn.primary:hover { background: var(--accent); border-color: var(--accent); }
.ws-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.6; }

.ws-body {
  flex: 1;
  display: grid;
  grid-template-columns: 380px 1fr;
  overflow: hidden;
  transition: grid-template-columns .3s var(--ease);
}

/* Свернутая панель: ws-body становится в одну колонку, ws-panel схлопывается */
body.panel-collapsed .ws-body { grid-template-columns: 0 1fr; }
body.panel-collapsed .ws-panel {
  border-right: none;
  pointer-events: none;
  opacity: 0;
}
body.panel-collapsed .ws-collapse-btn svg { transform: rotate(180deg); }

/* Кнопка-табик на левом краю canvas-area */
.ws-collapse-btn {
  position: absolute;
  top: 50%; left: 0;
  transform: translateY(-50%);
  width: 22px; height: 56px;
  border: 1px solid var(--line);
  border-left: none;
  border-radius: 0 12px 12px 0;
  background: var(--surface);
  color: var(--ink-2);
  cursor: pointer;
  z-index: 10;
  display: grid; place-items: center;
  transition: all .2s var(--ease);
  box-shadow: 2px 0 8px -4px rgba(40,30,20,.15);
}
.ws-collapse-btn:hover { background: var(--ink); color: var(--surface); width: 28px; }
.ws-collapse-btn svg { width: 14px; height: 14px; transition: transform .3s var(--ease); }

.ws-panel {
  position: relative;
  border-right: 1px solid var(--line);
  background: var(--surface);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.ws-panel-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 22px 22px;
  display: flex; flex-direction: column; gap: 18px;
}
.ws-panel-scroll::-webkit-scrollbar { width: 6px; }
.ws-panel-scroll::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }

.ws-block { display: flex; flex-direction: column; gap: 10px; }
.ws-block-head { display: flex; justify-content: space-between; align-items: baseline; }
.ws-block-title {
  font-family: var(--f-mono); font-size: 0.7rem;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-3);
  display: flex; align-items: center; gap: 8px;
}
.ws-block-title .num {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--ink); color: var(--surface);
  display: inline-grid; place-items: center;
  font-size: 0.65rem;
}
.ws-block-meta { font-family: var(--f-mono); font-size: 0.66rem; color: var(--ink-3); }

/* Upload grid (workspace) */
.upload-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.upload-thumb {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-raise);
  display: grid; place-items: center;
}
.upload-thumb img {
  width: 100%; height: 100%; object-fit: cover;
}
.upload-thumb .uth-stripes {
  width: 100%; height: 100%;
  background: repeating-linear-gradient(135deg, var(--surface-2) 0 6px, var(--bg-raise) 6px 12px);
  display: grid; place-items: center;
  font-family: var(--f-mono); font-size: 0.66rem;
  color: var(--ink-3);
}
.upload-thumb .uth-x {
  position: absolute; top: 4px; right: 4px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(26,24,21,.9);
  color: white;
  display: grid; place-items: center;
  font-size: 0.7rem; line-height: 1;
  border: none; cursor: pointer;
}
.upload-thumb.add {
  background: transparent;
  border: 1.5px dashed var(--line-strong);
  cursor: pointer;
  color: var(--ink-3);
  font-family: var(--f-mono);
  font-size: 1.2rem;
  transition: all .2s;
}
.upload-thumb.add:hover { border-color: var(--accent); color: var(--accent); }

/* Segmented (content type) */
.seg {
  display: flex;
  background: var(--bg-raise);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 4px;
  gap: 4px;
}
.seg button {
  flex: 1;
  padding: 9px 6px;
  border-radius: 100px;
  font-size: 0.82rem;
  color: var(--ink-2);
  display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: all .25s;
  background: none; border: none; cursor: pointer;
}
.seg button svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.seg button.on { background: var(--ink); color: var(--surface); }
.seg button.on svg { color: var(--accent); }

/* Chips */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  padding: 7px 12px;
  border-radius: 100px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 0.82rem;
  color: var(--ink-2);
  cursor: pointer;
  transition: all .2s;
  display: flex; align-items: center; gap: 6px;
}
.chip:hover { border-color: var(--line-strong); }
.chip.on { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.chip.on .chip-dot { background: var(--accent); }
.chip-dot { width: 6px; height: 6px; background: var(--ink-3); border-radius: 50%; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.label-mono {
  font-family: var(--f-mono); font-size: 0.66rem;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-3);
  margin-bottom: 6px;
  display: flex; justify-content: space-between;
}

.text-input, .text-area {
  width: 100%;
  padding: 11px 14px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: 0.9rem;
  color: var(--ink);
  resize: vertical;
  transition: border-color .2s;
  font-family: inherit;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}
.text-input:focus, .text-area:focus { border-color: var(--ink); background: white; outline: none; }
.text-area { min-height: 86px; }

/* Кастомный select в стилистике сайта */
.select-wrap { position: relative; }
.select-wrap select.text-input {
  padding-right: 38px;
  cursor: pointer;
  background: var(--bg);
}
.select-wrap select.text-input:focus { background: white; }
.select-wrap .select-chev {
  position: absolute;
  right: 14px; top: 50%;
  transform: translateY(-50%);
  color: var(--ink-3);
  pointer-events: none;
  transition: color .2s;
}
.select-wrap select.text-input:focus + .select-chev { color: var(--ink); }

/* Подсказка под селектом категории — серый mono-курсив */
.cat-hint {
  font-family: var(--f-mono);
  font-size: 0.66rem;
  color: var(--ink-3);
  margin-top: 6px;
  padding-left: 4px;
  letter-spacing: .02em;
  line-height: 1.4;
}

/* Блок «О товаре» — компактный (название + категория рядом) */
.ws-block.product-info { gap: 8px; }
/* Когда не выбрано — placeholder-подобный серый */
.ws-block.product-info select.text-input:not(:focus):invalid,
.ws-block.product-info select.text-input:not(:focus) option[value=""] { color: var(--ink-3); }
.ws-block.product-info select.text-input { color: var(--ink); }

/* «★» вместо номера в ws-block-title для блока товара */
.ws-block-title .num:not(:empty) { background: var(--ink); }
.ws-block-title .num { font-family: inherit; }

/* Generate CTA bottom */
.gen-bottom {
  flex-shrink: 0;
  padding: 16px 22px 18px;
  border-top: 1px solid var(--line);
  background: var(--surface);
  display: flex; flex-direction: column; gap: 10px;
}
.gen-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 22px;
  background: var(--accent);
  color: white;
  border-radius: 100px;
  font-size: 0.95rem;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: all .25s;
  font-family: inherit;
}
.gen-btn:hover { background: var(--ink); transform: translateY(-1px); box-shadow: var(--sh-md); }
.gen-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.gen-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.gen-btn-cost {
  margin-left: 6px;
  padding: 3px 9px;
  background: rgba(255,255,255,.18);
  border-radius: 100px;
  font-family: var(--f-mono);
  font-size: 0.78rem;
}
.gen-btn.secondary {
  background: transparent;
  color: var(--ink-2);
  border: 1px solid var(--line);
}
.gen-btn.secondary:hover { background: var(--bg-raise); color: var(--ink); transform: none; box-shadow: none; }

/* Canvas area */
.canvas-area {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 20%, rgba(232,92,44,.04) 0%, transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(184,164,227,.05) 0%, transparent 40%),
    var(--bg);
}
.canvas-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(138,127,108,.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(138,127,108,.08) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}

.canvas-toolbar {
  position: absolute;
  top: 16px; left: 16px;
  display: flex; gap: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 5px;
  z-index: 5;
  box-shadow: var(--sh-sm);
}
.canvas-toolbar button {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--ink-2);
  transition: all .2s;
  background: none; border: none; cursor: pointer;
}
.canvas-toolbar button:hover { background: var(--bg-raise); color: var(--ink); }
.canvas-toolbar button.on { background: var(--ink); color: var(--surface); }
.canvas-toolbar button svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.canvas-toolbar .div { width: 1px; background: var(--line); margin: 4px 2px; }

.canvas-zoom {
  position: absolute;
  bottom: 16px; left: 16px;
  display: flex; align-items: center; gap: 4px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 5px 6px;
  z-index: 5;
  box-shadow: var(--sh-sm);
  font-family: var(--f-mono); font-size: 0.74rem;
  color: var(--ink-2);
}
.canvas-zoom button {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: inherit; background: none; border: none; cursor: pointer;
}
.canvas-zoom button:hover { background: var(--bg-raise); }
.canvas-zoom span { padding: 0 8px; min-width: 50px; text-align: center; }

.canvas-status {
  position: absolute;
  bottom: 16px; right: 16px;
  display: flex; align-items: center; gap: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 6px 14px;
  z-index: 5;
  font-family: var(--f-mono); font-size: 0.72rem;
  color: var(--ink-3);
  box-shadow: var(--sh-sm);
}
.canvas-status .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-3);
  box-shadow: 0 0 8px var(--accent-3);
}

/* Viewport / artboards */
/* overflow:hidden — позиция артбордов задаётся transform'ом на
   .artboard-row (pan/zoom). Скроллбары не нужны и портят дизайн. */
.viewport {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 60px 60px 80px;
  overflow: hidden;
}
.artboard-row {
  display: flex;
  gap: 32px;
  align-items: center;
  /* Без transition — pan/zoom через wheel-трекпад должны быть мгновенными.
     С 0.3s было заметное «резиновое» подёргивание после каждого тика. */
  transition: none;
  transform-origin: center;
  will-change: transform;
}
.artboard {
  position: relative;
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  overflow: hidden;
  transition: all .3s var(--ease);
  width: 460px; height: 575px;
  flex-shrink: 0;
}
.artboard.idle {
  display: grid; place-items: center;
  background: repeating-linear-gradient(135deg, var(--surface) 0 14px, var(--surface-2) 14px 28px);
}
.artboard.active { outline: 2px solid var(--accent); outline-offset: 4px; }

.artboard-img {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--f-mono);
  font-size: 0.78rem;
  color: var(--ink-3);
  text-align: center;
  background: linear-gradient(135deg, #E8DDC8 0%, #D4C5A8 100%);
}
.artboard-img img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  cursor: zoom-in;
  background: var(--surface);
}
.artboard-img.alt-1 { background: linear-gradient(135deg, #F4C9B6 0%, #E85C2C 100%); color: white; }
.artboard-img.alt-2 { background: linear-gradient(135deg, #E7DFF5 0%, #B8A4E3 100%); color: white; }
.artboard-img.alt-3 { background: linear-gradient(135deg, #D4E4DB 0%, #7FB39B 100%); color: white; }
.artboard-img-label {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 2;
  font-family: var(--f-mono);
  font-size: 0.78rem;
  letter-spacing: .04em;
  padding: 8px 14px;
  background: rgba(0,0,0,.25);
  color: white;
  border-radius: 100px;
  backdrop-filter: blur(10px);
}
.artboard-img:has(img) .artboard-img-label { display: none; }

.artboard-meta {
  position: absolute;
  top: 12px; left: 12px;
  display: flex; gap: 6px;
  z-index: 3;
}
.artboard-meta .am-tag {
  font-family: var(--f-mono); font-size: 0.62rem;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 9px;
  background: rgba(255,255,255,.85);
  color: var(--ink);
  border-radius: 100px;
  backdrop-filter: blur(8px);
}
.artboard-meta .am-tag.live { background: var(--accent); color: white; }

.artboard-hover {
  position: absolute;
  bottom: 12px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 4px;
  background: rgba(26,24,21,.92);
  border-radius: 100px;
  padding: 4px;
  z-index: 4;
  opacity: 0;
  transition: opacity .25s;
  backdrop-filter: blur(10px);
}
.artboard:hover .artboard-hover { opacity: 1; }
.artboard-hover button {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: rgba(255,255,255,.85);
  background: none; border: none; cursor: pointer;
}
.artboard-hover button:hover { background: rgba(255,255,255,.12); color: white; }
.artboard-hover button svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.6; }

.add-artboard {
  flex-shrink: 0;
  width: 96px; height: 575px;
  border-radius: var(--r-lg);
  border: 1.5px dashed var(--line-strong);
  background: transparent;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: .04em;
  color: var(--ink-3);
  cursor: pointer;
  transition: all .25s;
}
.add-artboard:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(232,92,44,.04);
}
.add-artboard .ab-plus {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  display: grid; place-items: center;
  font-size: 1.5rem; line-height: 1;
}
.add-artboard span:last-child { writing-mode: vertical-rl; transform: rotate(180deg); }

.artboard.loading {
  background: var(--surface-2);
  display: grid; place-items: center;
}
.artboard .ab-loader { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.artboard .ab-spinner {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 2px solid var(--line);
  border-top-color: var(--accent);
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.artboard .ab-text { font-family: var(--f-mono); font-size: 0.78rem; color: var(--ink-3); }
.artboard .ab-progress {
  width: 200px; height: 3px;
  background: var(--bg-raise);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.artboard .ab-progress-fill {
  position: absolute;
  height: 100%;
  width: 40%;
  background: var(--accent);
  animation: progress 1.4s ease-in-out infinite;
}
@keyframes progress {
  0% { left: -40%; }
  100% { left: 100%; }
}

@media (max-width: 1100px) {
  .ws-body { grid-template-columns: 320px 1fr; }
}
@media (max-width: 800px) {
  .ws-body { grid-template-columns: 1fr; }
}

/* =========================================================
   ИДЕЯ НА ХОЛСТЕ — форма прямо в артборде + анимация генерации
   ========================================================= */

/* viewport: центрирование артбордов через flex, позиционирование панорамой
   через transform на .artboard-row. Скроллбар не выводим — overflow:hidden. */
.viewport { justify-content: center; }

/* Артборд в режиме формы */
.artboard.idea-form {
  background: var(--surface);
  border: 1.5px solid var(--accent);
  box-shadow: 0 24px 60px -24px rgba(232,92,44,.35), var(--sh-md);
  overflow: hidden;
  display: flex; flex-direction: column;
  animation: ifm-slide-in .35s var(--ease-out, var(--ease));
}
.artboard.idea-form::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 100% 0%, rgba(232,92,44,.06) 0%, transparent 45%),
    radial-gradient(circle at 0% 100%, rgba(184,164,227,.05) 0%, transparent 45%);
  pointer-events: none;
}
@keyframes ifm-slide-in {
  from { opacity: 0; transform: translateX(-30px) scale(.96); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

.ifm-head {
  position: relative; z-index: 2;
  padding: 18px 22px 14px;
  border-bottom: 1px dashed var(--line);
  display: flex; align-items: center; gap: 14px;
}
.ifm-head-ic {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--accent); color: white;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.ifm-head-ic svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.ifm-head-text { flex: 1; min-width: 0; }
.ifm-head-title {
  font-family: var(--f-display);
  font-size: 1.25rem; line-height: 1.1;
  letter-spacing: -.015em;
  color: var(--ink);
}
.ifm-head-sub {
  font-family: var(--f-mono); font-size: 0.7rem;
  color: var(--ink-3); letter-spacing: .04em;
  margin-top: 3px;
}
.ifm-head-close {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--bg-raise);
  border: none; cursor: pointer;
  color: var(--ink-3);
  display: grid; place-items: center;
  transition: all .15s;
  flex-shrink: 0;
}
.ifm-head-close:hover { background: var(--ink); color: var(--surface); }
.ifm-head-close svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.8; }

.ifm-source {
  position: relative; z-index: 2;
  margin: 14px 22px 0;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: var(--bg-raise);
  border: 1px solid var(--line);
  display: flex; align-items: center; gap: 10px;
  font-family: var(--f-mono); font-size: 0.7rem;
  color: var(--ink-3);
}
.ifm-source-thumb {
  width: 36px; height: 36px;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(135deg, #E8DDC8 0%, #D4C5A8 100%);
  flex-shrink: 0;
  border: 1px solid var(--line);
  display: grid; place-items: center;
}
.ifm-source-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ifm-source-text {
  flex: 1; min-width: 0;
  color: var(--ink-2);
  text-transform: none; letter-spacing: 0;
}
.ifm-source-text b {
  display: block; color: var(--ink);
  font-family: var(--f-sans); font-size: 0.86rem;
  font-weight: 500; letter-spacing: -.005em;
  margin-bottom: 1px;
}
.ifm-source-tag {
  font-family: var(--f-mono); font-size: 0.62rem;
  padding: 2px 8px;
  background: var(--accent-soft); color: var(--accent);
  border-radius: 100px;
  text-transform: uppercase; letter-spacing: .06em;
  flex-shrink: 0;
}

.ifm-body {
  position: relative; z-index: 2;
  flex: 1;
  overflow-y: auto;
  padding: 14px 22px 18px;
  display: flex; flex-direction: column; gap: 14px;
}
.ifm-body::-webkit-scrollbar { width: 5px; }
.ifm-body::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }

.ifm-field { display: flex; flex-direction: column; gap: 6px; }
.ifm-label {
  font-family: var(--f-mono); font-size: 0.66rem;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-3);
  display: flex; justify-content: space-between; align-items: baseline;
}
.ifm-label-hint {
  font-family: var(--f-mono); font-size: 0.6rem;
  color: var(--ink-3); opacity: .7;
  letter-spacing: .02em; text-transform: none;
}
.ifm-input, .ifm-textarea {
  width: 100%;
  padding: 10px 13px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: 0.88rem;
  color: var(--ink);
  transition: all .2s;
  font-family: inherit; resize: vertical;
}
.ifm-input:focus, .ifm-textarea:focus {
  border-color: var(--ink); background: white; outline: none;
}
.ifm-textarea { min-height: 64px; line-height: 1.5; }
.ifm-textarea.tall { min-height: 88px; }
.ifm-input::placeholder, .ifm-textarea::placeholder { color: var(--ink-3); opacity: .85; }

.ifm-foot {
  position: relative; z-index: 2;
  flex-shrink: 0;
  padding: 14px 22px 18px;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
  display: flex; flex-direction: column; gap: 8px;
}
.ifm-foot-row { display: flex; gap: 8px; align-items: center; }
.ifm-create-btn {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 18px;
  background: var(--accent);
  color: white;
  border-radius: 100px;
  font-size: 0.92rem;
  font-weight: 500;
  border: none; cursor: pointer;
  transition: all .25s;
  font-family: inherit;
}
.ifm-create-btn:hover:not(:disabled) {
  background: var(--ink); transform: translateY(-1px); box-shadow: var(--sh-md);
}
.ifm-create-btn:disabled { opacity: .55; cursor: not-allowed; }
.ifm-create-btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.ifm-create-cost {
  margin-left: 4px;
  padding: 3px 10px;
  background: rgba(255,255,255,.18);
  border-radius: 100px;
  font-family: var(--f-mono);
  font-size: 0.74rem;
  letter-spacing: .02em;
}
.ifm-rand-btn {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink-2);
  cursor: pointer;
  display: grid; place-items: center;
  transition: all .2s;
  flex-shrink: 0;
}
.ifm-rand-btn:hover { border-color: var(--accent); color: var(--accent); transform: rotate(45deg); }
.ifm-rand-btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.ifm-foot-hint {
  font-family: var(--f-mono); font-size: 0.65rem;
  color: var(--ink-3); letter-spacing: .04em;
  text-align: center;
}
.ifm-foot-hint b { color: var(--accent); }

/* AI-suggestion chips inside the form */
.ifm-sugg { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.ifm-sugg-chip {
  padding: 4px 10px;
  border-radius: 100px;
  background: var(--accent-soft);
  border: 1px dashed var(--accent);
  color: var(--accent);
  font-family: var(--f-mono); font-size: 0.66rem;
  cursor: pointer;
  transition: all .15s;
}
.ifm-sugg-chip:hover { background: var(--accent); color: white; }
.ifm-sugg-label {
  font-family: var(--f-mono); font-size: 0.6rem;
  color: var(--ink-3); letter-spacing: .04em;
  margin-bottom: 2px;
}

/* Артборд в режиме «генерируется идея» */
.artboard.idea-generating {
  background: linear-gradient(135deg, #FBF7EE 0%, #F4E8DC 60%, #F4D8C8 100%);
  display: grid; place-items: center;
  overflow: hidden;
  position: relative;
}
.artboard.idea-generating::before {
  content: '';
  position: absolute; inset: -50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(232,92,44,.18) 0%, transparent 35%),
    radial-gradient(circle at 70% 70%, rgba(184,164,227,.18) 0%, transparent 35%);
  animation: ifg-rotate 18s linear infinite;
}
@keyframes ifg-rotate { to { transform: rotate(360deg); } }

.ifg-stack {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  gap: 18px; padding: 28px;
  text-align: center;
  width: 88%;
}
.ifg-pulse {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--accent);
  display: grid; place-items: center;
  color: white;
  position: relative;
  animation: idea-pulse 2s ease-in-out infinite;
}
.ifg-pulse::after {
  content: ''; position: absolute; inset: -10px;
  border: 2px solid var(--accent); border-radius: 50%;
  opacity: .35; animation: idea-ring 2s ease-in-out infinite;
}
.ifg-pulse svg { width: 32px; height: 32px; stroke: white; fill: none; stroke-width: 1.6; }
.ifg-title {
  font-family: var(--f-display);
  font-size: 1.4rem; line-height: 1.1;
  letter-spacing: -.015em;
  color: var(--ink);
}
.ifg-stages {
  display: flex; flex-direction: column; gap: 8px;
  width: 100%; max-width: 280px;
  margin-top: 4px;
}
.ifg-stage {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 100px;
  font-family: var(--f-mono); font-size: 0.72rem;
  color: var(--ink-3);
  text-align: left;
  transition: all .3s var(--ease);
  backdrop-filter: blur(8px);
}
.ifg-stage.active { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.ifg-stage.done   { background: rgba(127,179,155,.2); border-color: rgba(127,179,155,.4); color: #4F8C74; }
.ifg-stage-num {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(0,0,0,.08);
  display: grid; place-items: center;
  font-size: 0.62rem;
  flex-shrink: 0;
}
.ifg-stage.active .ifg-stage-num { background: var(--accent); color: white; }
.ifg-stage.done   .ifg-stage-num { background: var(--accent-3); color: white; }
.ifg-stage-spin {
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.3);
  border-top-color: var(--surface);
  animation: spin .9s linear infinite;
  margin-left: auto;
  display: none;
}
.ifg-stage.active .ifg-stage-spin { display: block; }
.ifg-stage-check { margin-left: auto; color: #4F8C74; display: none; }
.ifg-stage.done .ifg-stage-check { display: inline; }
.ifg-stage-check svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2.5; }
.ifg-timer {
  font-family: var(--f-mono); font-size: 0.7rem;
  color: var(--ink-3); letter-spacing: .04em;
  margin-top: 2px;
}

.grow-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* Segmented с 4 опциями */
.seg.seg-4 button { font-size: 0.78rem; padding: 8px 4px; gap: 5px; }
.seg.seg-4 button svg { width: 13px; height: 13px; }

/* Idea generating overlay (отдельный лоадер) */
.artboard.idea-loading {
  background: linear-gradient(135deg, rgba(232,92,44,.08), rgba(184,164,227,.06));
  display: grid; place-items: center;
}
.idea-loader {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding: 28px;
}
.idea-loader-pulse {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: var(--accent);
  position: relative;
  animation: idea-pulse 2s ease-in-out infinite;
  display: grid; place-items: center;
  color: white;
}
.idea-loader-pulse::after {
  content: ''; position: absolute; inset: -10px;
  border: 2px solid var(--accent); border-radius: 50%;
  opacity: .35; animation: idea-ring 2s ease-in-out infinite;
}
.idea-loader-pulse svg { width: 36px; height: 36px; stroke: white; fill: none; stroke-width: 1.6; }
@keyframes idea-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(.92); }
}
@keyframes idea-ring {
  0%   { transform: scale(.95); opacity: .5; }
  100% { transform: scale(1.6);  opacity: 0; }
}
.idea-loader-text {
  font-family: var(--f-display); font-size: 1.3rem;
  letter-spacing: -.01em; color: var(--ink); text-align: center;
}
.idea-loader-sub {
  font-family: var(--f-mono); font-size: 0.74rem;
  color: var(--ink-3); letter-spacing: .04em;
  text-align: center; max-width: 260px;
}

/* Popovers (rating, variant) — bottom-right floating */
.ws-popover-backdrop {
  position: fixed; inset: 0;
  background: rgba(30,26,21,.25);
  backdrop-filter: blur(2px);
  z-index: 1000;
  opacity: 0; pointer-events: none;
  transition: opacity .25s var(--ease);
}
.ws-popover-backdrop.show { opacity: 1; pointer-events: auto; }

.ws-popover {
  position: fixed;
  bottom: 28px; right: 28px;
  width: 380px; max-width: calc(100vw - 32px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 20px;
  box-shadow: var(--sh-lg);
  z-index: 1010;
  display: none;
  flex-direction: column;
  animation: ws-pop-in .3s var(--ease);
}
.ws-popover.show { display: flex; }
.ws-popover-variant { width: 480px; bottom: 28px; right: 28px; }
@keyframes ws-pop-in {
  from { opacity: 0; transform: translateY(20px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.ws-popover-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 14px;
}
.ws-popover-title {
  font-family: var(--f-display);
  font-size: 1.3rem; letter-spacing: -.01em;
  line-height: 1.1;
}
.ws-popover-sub {
  font-family: var(--f-mono); font-size: 0.7rem;
  color: var(--ink-3); letter-spacing: .04em;
  margin-top: 4px;
}
.ws-popover-close {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--bg-raise);
  border: none; cursor: pointer;
  font-size: 1.1rem; color: var(--ink-3);
  display: grid; place-items: center;
  transition: all .2s;
}
.ws-popover-close:hover { background: var(--ink); color: var(--surface); }
.ws-popover-foot { display: flex; gap: 8px; margin-top: 14px; justify-content: flex-end; }

/* Rating buttons */
.rate-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rate-btn {
  padding: 14px;
  border-radius: var(--r-md);
  border: 1.5px solid var(--line);
  background: var(--surface);
  cursor: pointer;
  transition: all .2s;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-size: 0.88rem; color: var(--ink-2);
  font-family: inherit;
}
.rate-btn:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.rate-btn .rate-emoji { font-size: 1.8rem; line-height: 1; }
.rate-btn.on[data-rate="good"] {
  border-color: var(--accent-3);
  background: var(--accent-3-soft);
  color: #2F6B50;
}
.rate-btn.on[data-rate="bad"] {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: #8B3A1A;
}

/* =========================================================
   nfModal — единый стиль модалок (alert / confirm / prompt / select)
   ========================================================= */
.nfm-host { position: relative; z-index: 2000; }
.nfm-overlay {
  position: fixed; inset: 0;
  background: rgba(30, 26, 21, .55);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  z-index: 2000;
  opacity: 0; transition: opacity .2s var(--ease);
}
.nfm-overlay.show { opacity: 1; }
.nfm {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px 26px 20px;
  width: 440px; max-width: 100%;
  box-shadow: var(--sh-lg);
  position: relative;
  transform: translateY(12px) scale(.98);
  transition: transform .25s var(--ease);
}
.nfm-overlay.show .nfm { transform: translateY(0) scale(1); }
.nfm-close {
  position: absolute; top: 14px; right: 14px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--bg-raise);
  border: none; cursor: pointer;
  font-size: 1.2rem; line-height: 1;
  color: var(--ink-3);
  display: grid; place-items: center;
  transition: all .15s;
}
.nfm-close:hover { background: var(--ink); color: var(--surface); }

/* ── nfShare — фирменное share-окно, заменяет системный navigator.share ── */
.nfm-share-overlay {
  position: fixed; inset: 0;
  background: rgba(30, 26, 21, .55);
  backdrop-filter: blur(6px);
  display: none; align-items: center; justify-content: center;
  padding: 24px;
  z-index: 10000;
  opacity: 0; transition: opacity .2s var(--ease, ease);
}
.nfm-share-overlay.show { display: flex; opacity: 1; }
.nfm-share-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 26px 28px 22px;
  width: 480px; max-width: 100%;
  box-shadow: var(--sh-lg);
  position: relative;
  transform: translateY(12px) scale(.98);
  transition: transform .25s var(--ease, ease);
}
.nfm-share-overlay.show .nfm-share-card { transform: translateY(0) scale(1); }
.nfm-share-x {
  position: absolute; top: 14px; right: 14px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--bg-raise);
  border: none; cursor: pointer;
  color: var(--ink-3);
  display: grid; place-items: center;
  transition: all .15s;
}
.nfm-share-x:hover { background: var(--ink); color: var(--surface); }
.nfm-share-x svg { width: 14px; height: 14px; }

.nfm-share-head {
  display: flex; gap: 14px; align-items: center; margin-bottom: 16px;
  padding-right: 32px;
}
.nfm-share-ic {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--accent);
  color: #fff;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.nfm-share-ic svg { width: 22px; height: 22px; }
.nfm-share-title {
  font-family: var(--f-display);
  font-size: 1.4rem; letter-spacing: -.015em;
  margin: 0 0 2px;
  color: var(--ink);
}
.nfm-share-sub {
  font-family: var(--f-mono); font-size: .68rem;
  color: var(--ink-3); margin: 0;
  letter-spacing: .04em;
}

.nfm-share-preview {
  width: 100%; aspect-ratio: 16/9;
  background: var(--bg-raise);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-bottom: 14px;
}
.nfm-share-preview[data-empty="1"] { display: none; }
.nfm-share-preview img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.nfm-share-link-row {
  display: flex; gap: 8px;
  margin-bottom: 16px;
}
.nfm-share-link-input {
  flex: 1; min-width: 0;
  padding: 10px 14px;
  background: var(--bg-raise);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-family: var(--f-mono); font-size: .78rem;
  color: var(--ink);
  outline: none;
}
.nfm-share-copy {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 14px;
  background: var(--ink);
  color: var(--surface);
  border: none; border-radius: var(--r-md);
  cursor: pointer;
  font-family: var(--f-sans); font-size: .82rem;
  transition: filter .15s var(--ease, ease);
}
.nfm-share-copy:hover { filter: brightness(1.1); }
.nfm-share-copy.done { background: var(--accent-3, #4F8C74); }
.nfm-share-copy svg { width: 14px; height: 14px; }

.nfm-share-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.nfm-share-tile {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 6px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background .15s var(--ease, ease), border-color .15s var(--ease, ease);
}
.nfm-share-tile:hover { background: var(--bg-raise); border-color: var(--line); }
.nfm-share-tile-ic {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: grid; place-items: center;
}
.nfm-share-tile-ic svg { width: 24px; height: 24px; }
.nfm-share-tile-name {
  font-family: var(--f-mono); font-size: .66rem;
  color: var(--ink-2);
  letter-spacing: .02em;
}
@media (max-width: 460px) {
  .nfm-share-grid { grid-template-columns: repeat(3, 1fr); }
}
.nfm-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: grid; place-items: center;
  margin-bottom: 14px;
  background: var(--bg-raise);
  color: var(--ink-2);
}
.nfm-icon svg { width: 22px; height: 22px; }
.nfm-icon-warn    { background: var(--accent-soft);     color: var(--accent); }
.nfm-icon-danger  { background: #F5D0D0;                color: #A04040; }
.nfm-icon-success { background: var(--accent-3-soft);   color: #2F6B50; }
.nfm-icon-error   { background: #F5D0D0;                color: #A04040; }
.nfm-icon-info    { background: var(--accent-2-soft);   color: #6B5FA0; }

.nfm-title {
  font-family: var(--f-display);
  font-size: 1.4rem;
  letter-spacing: -.015em;
  line-height: 1.15;
  margin-bottom: 6px;
  padding-right: 28px;
}
.nfm-message {
  font-size: 0.92rem;
  color: var(--ink-2);
  line-height: 1.5;
  white-space: pre-wrap;
}
.nfm-body { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.nfm-body:empty { margin-top: 0; }

.nfm-input {
  width: 100%;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-family: inherit;
  font-size: 0.94rem;
  color: var(--ink);
  outline: none;
  transition: all .2s;
  resize: vertical;
}
.nfm-input:focus { border-color: var(--ink); background: white; }
.nfm-input.nfm-invalid {
  border-color: var(--accent);
  background: var(--accent-soft);
  animation: nfm-shake .35s;
}
@keyframes nfm-shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-6px); }
  75%      { transform: translateX(6px); }
}

.nfm-list { display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow-y: auto; }
.nfm-list-item {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  font-family: inherit; font-size: 0.92rem;
  color: var(--ink); cursor: pointer;
  text-align: left;
  transition: all .18s;
}
.nfm-list-item:hover { border-color: var(--line-strong); }
.nfm-list-item.on { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.nfm-list-ic { display: inline-grid; place-items: center; width: 22px; height: 22px; flex-shrink: 0; color: var(--ink-3); }
.nfm-list-item.on .nfm-list-ic { color: var(--accent); }
.nfm-list-label { flex: 1; }
.nfm-list-hint { font-family: var(--f-mono); font-size: 0.7rem; color: var(--ink-3); }
.nfm-list-item.on .nfm-list-hint { color: rgba(255,255,255,.5); }

.nfm-actions {
  display: flex; justify-content: flex-end; gap: 10px;
  margin-top: 18px;
}
.nfm-btn {
  padding: 11px 22px;
  border-radius: 100px;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all .2s var(--ease);
  line-height: 1;
}
.nfm-btn.ghost   { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.nfm-btn.ghost:hover   { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.nfm-btn.primary { background: var(--ink); color: var(--surface); }
.nfm-btn.primary:hover { background: var(--accent); transform: translateY(-1px); box-shadow: var(--sh-md); }
.nfm-btn.danger  { background: var(--accent); color: white; }
.nfm-btn.danger:hover  { background: #A04040; transform: translateY(-1px); box-shadow: var(--sh-md); }

/* Presets dropdown в шапке workspace */
.presets-menu { position: relative; }
.presets-dd {
  position: absolute;
  top: calc(100% + 8px); right: 0;
  width: 320px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 12px;
  box-shadow: var(--sh-lg);
  z-index: 200;
  display: none;
  flex-direction: column;
  gap: 6px;
  animation: ws-pop-in .22s var(--ease);
}
.presets-dd.open { display: flex; }
.presets-dd-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 8px 8px;
  font-family: var(--f-mono); font-size: 0.7rem;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-3);
  border-bottom: 1px dashed var(--line);
  margin-bottom: 4px;
}
.presets-dd-count {
  font-family: var(--f-mono); font-size: 0.66rem;
  padding: 2px 8px; border-radius: 100px;
  background: var(--bg-raise); color: var(--ink-2);
}
.presets-dd-list {
  display: flex; flex-direction: column; gap: 4px;
  max-height: 280px; overflow-y: auto;
}
.presets-dd-empty {
  padding: 16px; text-align: center;
  font-family: var(--f-mono); font-size: 0.74rem;
  color: var(--ink-3);
}
.preset-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background .15s;
  position: relative;
}
.preset-item:hover { background: var(--bg-raise); }
.preset-item-info { flex: 1; min-width: 0; }
.preset-item-name { font-size: 0.9rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.preset-item-meta { font-family: var(--f-mono); font-size: 0.68rem; color: var(--ink-3); margin-top: 2px; }
.preset-item-actions { display: flex; gap: 4px; opacity: 0; transition: opacity .2s; }
.preset-item:hover .preset-item-actions { opacity: 1; }
.preset-item-actions button {
  width: 24px; height: 24px;
  border-radius: 6px;
  background: transparent; border: none;
  color: var(--ink-3); cursor: pointer;
  display: grid; place-items: center;
  transition: all .15s;
}
.preset-item-actions button:hover { background: var(--ink); color: var(--surface); }
.preset-item-actions button.danger:hover { background: var(--accent); color: white; }
.preset-item-actions svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.presets-dd-foot {
  padding-top: 6px;
  border-top: 1px dashed var(--line);
  margin-top: 4px;
}

/* Variant grid */
.variant-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
.variant-tile {
  padding: 14px 10px;
  border-radius: var(--r-md);
  border: 1.5px solid var(--line);
  background: var(--surface);
  cursor: pointer;
  transition: all .2s var(--ease);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-family: inherit; color: var(--ink);
  text-align: center; position: relative;
}
.variant-tile:hover { border-color: var(--accent); transform: translateY(-1px); }
.variant-tile.on { border-color: var(--ink); background: var(--ink); color: var(--surface); }
.variant-tile.on .variant-ic { background: var(--accent); color: white; }
.variant-tile.on .variant-desc { color: rgba(255,255,255,.6); }
.variant-tile.on .variant-cost { background: rgba(255,255,255,.18); color: var(--surface); }
.variant-ic {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--accent-soft); color: var(--accent);
  display: grid; place-items: center;
  transition: all .2s;
}
.variant-ic svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.variant-name { font-size: 0.86rem; font-weight: 500; }
.variant-desc { font-size: 0.7rem; color: var(--ink-3); line-height: 1.3; }
.variant-cost {
  font-family: var(--f-mono); font-size: 0.66rem;
  padding: 2px 8px;
  border-radius: 100px;
  background: var(--bg-raise); color: var(--ink-2);
  margin-top: 4px;
}
/* ============================================
   MOBILE BLOCK (must be at the very end so media-queries
   override all desktop base rules in the cascade)
   ============================================ */
/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 1100px) {
  .stats-row { grid-template-columns: repeat(2, 1fr); }
  .quick-actions { grid-template-columns: repeat(2, 1fr); }
  .gen-layout { grid-template-columns: 1fr; }
}

/* =========================================================
   MOBILE — Hamburger / drawer / адаптивные сетки
   ========================================================= */

/* Гамбургер виден только на мобильных */
.topbar-burger {
  display: none;
  align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
  cursor: pointer;
  flex-shrink: 0;
  transition: all .15s;
}
.topbar-burger:hover { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.topbar-burger svg { width: 20px; height: 20px; stroke: currentColor; fill: none; }

@media (max-width: 820px) {
  .app-body { grid-template-columns: 1fr; }
  .topbar-burger { display: inline-flex; }

  /* Sidebar превращается в drawer */
  .sidebar {
    position: fixed; top: 0; left: 0; height: 100vh;
    width: 280px; max-width: 85vw;
    transform: translateX(-100%);
    transition: transform .28s var(--ease);
    z-index: 110;
    box-shadow: var(--sh-lg);
    will-change: transform;
  }
  .sidebar.open { transform: translateX(0); }

  /* Backdrop при открытом drawer */
  body.sidebar-open::before {
    content: '';
    position: fixed; inset: 0;
    background: rgba(30,26,21,.55);
    backdrop-filter: blur(2px);
    z-index: 105;
    animation: fadeIn .2s;
  }
  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

  /* Блокируем прокрутку body при открытом drawer */
  body.sidebar-open { overflow: hidden; }

  /* Main-content на мобильных */
  .main-content { padding: 16px; }

  /* Page-top — вертикальный стек */
  .page-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding-bottom: 18px;
    margin-bottom: 24px;
  }
  .page-top > div:first-child { width: 100%; }

  /* Topbar */
  .cab-topbar {
    padding: 12px 0 14px;
    gap: 10px;
  }
  .search-bar {
    padding: 9px 14px;
    font-size: 0.86rem;
  }
  .search-bar kbd { display: none; }

  /* Создание CTA на мобильных — компактнее */
  .create-cta { font-size: .88rem; }
  .create-cta-main { padding: 12px 18px; }
  .create-cta-drop { padding: 0 14px; }
  .create-menu { left: 0; right: auto; min-width: 280px; }

  /* Stats / quick-actions / products — переключаются */
  .stats-row { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .quick-actions { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .products-row { grid-template-columns: 1fr; gap: 12px; }
  .stat-card { padding: 14px 16px; }
  .quick-card, .product-card { padding: 18px; }
  .stat-num { font-size: 1.8rem; }
  .product-card { min-height: 180px; }
  .product-card .pc-title { font-size: 1.4rem; }

  .dash-grid { gap: 18px; margin-top: 22px; }
  .panel { padding: 18px 16px; }

  .section-title { font-size: 1.35rem; flex-wrap: wrap; gap: 8px; }
  .page-title { font-size: clamp(1.7rem, 6vw, 2.2rem) !important; }

  /* Recent row — без бейджа статуса справа на тесных экранах */
  .recent-row { grid-template-columns: 48px 1fr auto; gap: 10px; padding: 12px 0; }
  .recent-row .recent-status { display: none; }
  .recent-thumb { width: 48px; height: 48px; }
  .recent-thumb svg { width: 18px; height: 18px; }

  /* Search dropdown / user dropdown — приклеиваем к правому краю */
  .user-dropdown { right: 0; left: auto; min-width: 240px; }

  /* Скрываем имя пользователя в кнопке */
  .user-btn-name { display: none; }
  .user-btn { padding: 4px 6px; }

  /* Topbar — кванты компактнее */
  .credits-badge,
  .credits-pill { padding: 8px 12px; font-size: 0.78rem; }

  /* Topbar в workspace — переносим */
  .ws-header {
    flex-wrap: wrap;
    padding: 10px 14px;
    gap: 8px;
  }
  .ws-breadcrumb { display: none; }
  .ws-actions { gap: 6px; flex-wrap: wrap; }
  .ws-btn { padding: 8px 12px; font-size: 0.8rem; }
  .ws-btn span:not(.ws-btn-cost) { display: inline; }

  /* Workspace body */
  .ws-body { grid-template-columns: 1fr; }
  .ws-panel {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: min(88dvh, calc(100dvh - 40px));
    max-height: 88dvh;
    padding-bottom: env(safe-area-inset-bottom);
    z-index: 100;
    border-right: none;
    border-top: 1px solid var(--line);
    transform: translateY(100%);
    transition: transform .3s var(--ease);
    box-shadow: 0 -24px 60px -10px rgba(0,0,0,.25);
    border-radius: 20px 20px 0 0;
    background: var(--surface);
    overflow: hidden;
  }
  .ws-panel.mobile-open { transform: translateY(0); }
  /* Перебиваем panel-collapsed (десктопное состояние) на мобиле — если панель
     открыта пользователем через FAB, она должна быть видна и интерактивна. */
  body.panel-collapsed .ws-panel.mobile-open {
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  .ws-panel-scroll { padding: 18px 16px; }
  .ws-panel::before {
    content: '';
    position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
    width: 36px; height: 4px;
    background: var(--line-strong); border-radius: 100px;
  }
  /* Touch: viewport должен поддерживать pan/pinch (не дать iOS перехватить) */
  .canvas-area .viewport { touch-action: none; }

  /* Close-кнопка на мобиле — крупный «×» в верхнем-правом углу панели */
  .ws-mobile-close {
    position: absolute; top: 14px; right: 14px;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--bg-raise); color: var(--ink);
    border: 1px solid var(--line);
    display: grid; place-items: center;
    cursor: pointer; z-index: 11;
    box-shadow: 0 4px 12px -4px rgba(0,0,0,.15);
  }
  .ws-mobile-close svg { width: 16px; height: 16px; }
  .ws-mobile-close:active { background: var(--ink); color: var(--surface); }
  /* Подвинуть скролл-содержимое чтобы крестик не накладывался на первый блок */
  .ws-panel.mobile-open .ws-panel-scroll { padding-top: 28px !important; padding-bottom: max(20px, env(safe-area-inset-bottom)) !important; }

  /* FAB на мобильных — открыть панель параметров. Растянутая pill-кнопка
     с подписью «Параметры» — намного понятнее круглой иконки.
     bottom учитывает safe-area-inset (iOS home indicator). */
  .ws-mobile-fab {
    display: inline-flex !important;
    position: fixed;
    left: 50%; bottom: calc(18px + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    width: auto; height: auto;
    padding: 12px 20px;
    border-radius: 100px;
    background: var(--accent); color: white;
    border: none; cursor: pointer;
    align-items: center; gap: 8px;
    box-shadow: 0 14px 36px -10px rgba(232,92,44,.55);
    z-index: 95;
    font-family: var(--f-base); font-size: .92rem; font-weight: 500;
  }
  /* Добавляем подпись после SVG через ::after — без правки markup */
  .ws-mobile-fab::after {
    content: 'Параметры';
    white-space: nowrap;
  }
  .ws-mobile-fab svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.7; }
  /* Прячем FAB когда панель открыта — она перекрывает её. */
  body.has-ws-open .ws-mobile-fab { display: none !important; }

  /* Canvas-area на мобильных — заполняет всё свободное место в ws-body. */
  .canvas-area {
    min-height: calc(100dvh - 100px);
    position: relative;
  }
  /* Подсказка по центру холста когда панель закрыта (нет проекта) */
  .canvas-area::before {
    content: 'Откройте «Параметры» внизу,\Aчтобы создать карточку';
    position: absolute; inset: 0;
    display: grid; place-items: center; text-align: center;
    white-space: pre-line;
    color: var(--ink-3); font-family: var(--f-mono); font-size: .82rem;
    line-height: 1.6;
    pointer-events: none;
    padding: 40px 20px;
    z-index: 1;
  }
  /* Скрываем подсказку как только появились артборды */
  .canvas-area:has(.artboard-row:not(:empty))::before { display: none; }
  /* Скрываем разные desktop-only декоративные тулбары в canvas-area */
  .canvas-area .canvas-toolbar,
  .canvas-area .canvas-viewmode,
  .canvas-area .canvas-zoom,
  .canvas-area .canvas-theme,
  .canvas-area .ws-collapse-btn { display: none !important; }
  /* Status-чип компактнее — внизу прижимаем к низу с safe-area */
  .canvas-area .canvas-status {
    bottom: calc(84px + env(safe-area-inset-bottom));
    left: 50%; transform: translateX(-50%);
    font-size: .7rem !important; padding: 6px 12px !important;
  }
  .canvas-toolbar { top: 12px; left: 12px; padding: 4px; gap: 4px; }
  .canvas-toolbar button { width: 28px; height: 28px; }
  .canvas-zoom { bottom: 12px; left: 12px; }
  .canvas-status { display: none; }
  .viewport { padding: 30px 16px 60px; }
  .artboard { width: min(88vw, 460px) !important; height: auto !important; aspect-ratio: 460/575; }
  .artboard.idea-form { height: auto; min-height: 70vh; }
  .add-artboard { width: 64px !important; height: auto !important; min-height: 200px; }
  .artboard-row { gap: 16px; }

  /* Projects layout */
  .projects-layout {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .folders-panel {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    max-height: 70vh;
    overflow-y: auto;
    z-index: 90;
    border-radius: 20px 20px 0 0;
    transform: translateY(100%);
    transition: transform .3s var(--ease);
    box-shadow: var(--sh-lg);
    background: var(--surface);
    padding: 24px 18px 20px;
  }
  .folders-panel.mobile-open { transform: translateY(0); }
  .folders-panel::before {
    content: '';
    position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
    width: 36px; height: 4px;
    background: var(--line-strong); border-radius: 100px;
  }

  /* Profile */
  .profile-hero { flex-direction: column; align-items: flex-start; padding: 20px; gap: 16px; }
  .profile-hero-actions { width: 100%; }
  .profile-tabs { gap: 4px; overflow-x: auto; padding-bottom: 4px; }
  .profile-tab { padding: 8px 12px; font-size: 0.82rem; flex-shrink: 0; }

  /* Modals */
  .nfm { width: 100%; padding: 20px 18px; }

  /* Selection bar (projects) */
  .selection-bar { flex-wrap: wrap; gap: 8px; padding: 10px 14px; }
  .selection-bar .sel-count { width: 100%; }
}

@media (max-width: 560px) {
  .stats-row, .quick-actions { grid-template-columns: 1fr; }
  .project-row { grid-template-columns: 1fr; gap: 8px; }
  .form-card { padding: 18px; }
  .result-images { grid-template-columns: 1fr; }

  .main-content { padding: 12px; }
  .stat-card, .quick-card, .product-card { padding: 16px; }
  .ws-actions .ws-btn:not(.primary) { display: none; }
  .ws-actions .credits-badge { padding: 7px 10px; }
  .credits-badge span:nth-of-type(2) { display: none; }

  .field-row { grid-template-columns: 1fr; gap: 10px; }
  .artboard { width: 92vw !important; }
  .ifm-source-text b { font-size: 0.82rem; }
  .ifm-create-btn { font-size: 0.86rem; padding: 12px 14px; }
  .packages-grid { grid-template-columns: 1fr; }

  /* Поиск компактно — поле даёт минимум, видна только иконка с input */
  .search-bar { padding: 8px 12px; }
  .search-bar input { font-size: 16px; min-width: 0; }
}

/* =========================================================
   iOS: предотвращаем zoom при focus на input (font-size >= 16px)
   ========================================================= */
@media (max-width: 820px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  input[type="number"],
  textarea,
  select,
  .form-input,
  .ifm-input,
  .ifm-textarea,
  .text-area,
  .text-input,
  .nfm-input,
  .form-group input,
  .form-group select,
  .form-group textarea {
    font-size: 16px !important;
  }
}

/* =========================================================
   Auth (login / register) — мобильная адаптация
   ========================================================= */
@media (max-width: 900px) {
  /* На мобильных auth-main в колонку, чтобы top-right и card не наезжали */
  .auth-main {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 24px 20px 32px;
    gap: 0;
  }
  .auth-top-right {
    position: static;
    align-self: flex-end;
    margin: 0 0 18px;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
  }
  /* Скрываем дублирующую ссылку «Нет аккаунта? / Уже есть аккаунт?» сверху —
     она же есть внизу в auth-switch. Оставляем только переключатель языка. */
  .auth-top-right > span,
  .auth-top-right > a { display: none; }
  .auth-top-right .lang-switcher { display: inline-flex; }

  .auth-card {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
  }
}

@media (max-width: 560px) {
  .auth-main { padding: 20px 16px 28px; }
  .auth-card { gap: 18px; max-width: 100%; }
  .auth-title { font-size: clamp(2rem, 9vw, 2.6rem) !important; }
  .auth-sub { font-size: 0.94rem; }
  .auth-mode-path { font-size: 0.7rem; }
  .auth-oauth-row { grid-template-columns: 1fr 1fr; gap: 8px; }
  .auth-oauth-btn { padding: 12px; font-size: 0.84rem; }
  .auth-divider { font-size: 0.7rem; }
  .auth-form { gap: 14px; }
  .form-group input,
  .form-group select,
  .form-group textarea { padding: 14px 14px; }
  .btn { padding: 14px 22px; font-size: 0.95rem; }
  .btn-full { padding: 15px 22px; }
}

@media (max-width: 380px) {
  /* Очень узкие — OAuth в столбец */
  .auth-oauth-row { grid-template-columns: 1fr; }
  .btn-full { font-size: 0.88rem; }
}

/* Авто-фит create-menu чтобы не вылезало за экран */
@media (max-width: 820px) {
  .create-menu {
    min-width: min(300px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    left: auto; right: 0;
  }
  /* Если CTA-кнопка занимает почти всю ширину — выравниваем по правому краю всё равно */
  #createCtaWrap { width: 100%; }
  .create-cta { width: 100%; justify-content: space-between; }
  .create-cta-main { flex: 1; justify-content: center; }
}

/* =========================================================
   Billing / Transactions / Pay-modal — мобильная адаптация
   ========================================================= */
@media (max-width: 820px) {
  /* Транзакции — компактнее, текст не обрезается */
  .tx-row { grid-template-columns: 36px 1fr auto; gap: 12px; padding: 12px 14px; }
  .tx-icon { width: 36px; height: 36px; border-radius: 10px; font-size: .82rem; }
  .tx-desc { font-size: .88rem; line-height: 1.3; word-break: break-word; }
  .tx-amount { font-size: .88rem; }

  /* Пакет квантов */
  .packages-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .pkg-card { padding: 22px 20px; }
  .pkg-name { font-size: 1.1rem; }
  .pkg-credits { font-size: 2rem; }

  /* PayModal — inline стили из billing.ejs, перебиваем */
  #payModal > div {
    padding: 24px 20px !important;
    max-width: calc(100vw - 24px) !important;
    border-radius: var(--r-lg) !important;
  }
  #payModal h2, #payModal h3 { font-size: 1.4rem !important; }

  /* Заголовок страницы и плашки баланса — wrap */
  .credits-badge-lg {
    font-size: 1.6rem;
    padding: 12px 18px;
    flex-wrap: wrap;
  }
}

@media (max-width: 560px) {
  .packages-grid { grid-template-columns: 1fr; }
  .tx-row { grid-template-columns: 32px 1fr; gap: 10px; padding: 10px 12px; }
  .tx-row .tx-amount { grid-column: 2; justify-self: end; padding-top: 4px; }
  .pkg-card { padding: 20px 18px; }
}

/* =========================================================
   2FA / forgot-password / reset-password / verify-email
   используют auth-body layout — fallback правила
   ========================================================= */
@media (max-width: 900px) {
  /* Эти страницы могут не иметь .auth-card, тогда форма прямо в auth-main */
  .auth-main > form,
  .auth-main > .auth-form {
    width: 100%;
    max-width: 100%;
  }
  /* Все кнопки — большой touch-target */
  .auth-main button[type="submit"],
  .auth-main .btn { min-height: 48px; }
}

/* =========================================================
   Profile — таблицы API ключей и сессии на мобильных
   ========================================================= */
@media (max-width: 820px) {
  .api-key-row {
    flex-wrap: wrap;
    gap: 8px;
  }
  .api-key-row code {
    flex: 1 1 100%;
    font-size: .76rem;
    padding: 6px 10px;
    background: var(--bg-raise);
    border-radius: 6px;
  }
  .session-row { flex-wrap: wrap; padding: 12px 0; gap: 10px; }
  .session-row .session-info { min-width: 60%; }

  /* QR-код 2FA на мобильных */
  #qrImage { width: 160px !important; height: 160px !important; }
}

/* ============================================
   MIX WORKSPACE — pin × product (mixPinterest)
   Дизайн от дизайнера, страница /generate/mix
   ============================================ */

/* Aspect chips — мини-прямоугольник пропорций (используется и в обычном workspace) */
.chip.aspect-chip { gap: 8px; padding-left: 10px; }
.aspect-visual {
  display: inline-block;
  box-sizing: border-box;
  border: 1.5px solid currentColor;
  border-radius: 2px;
  flex-shrink: 0;
  opacity: .85;
}
.chip.aspect-chip.on .aspect-visual { opacity: 1; }

/* Mix workspace shell */
.mix-ws .ws-body { display: flex; flex-direction: column; }

.mix-settings {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
  max-height: 46vh;
  overflow-y: auto;
}
.mix-settings-inner {
  display: grid;
  grid-template-columns: 1fr 1px 1fr 220px;
  gap: 22px;
  padding: 20px 24px;
  align-items: stretch;
}
.mix-step { display: flex; flex-direction: column; gap: 12px; }
.mix-step-divider { background: var(--line); width: 1px; }
.mix-step-head { display: flex; align-items: center; gap: 10px; }
.mix-step-head .num {
  width: 22px; height: 22px;
  background: var(--accent); color: white;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--f-mono); font-size: 0.72rem;
}
.mix-step-title {
  font-family: var(--f-display);
  font-size: 1.1rem;
  color: var(--ink);
}
.mix-step-body { display: flex; flex-direction: column; gap: 6px; }

.mix-ref-row, .mix-prod-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 14px;
  align-items: stretch;
}
.mix-prod-row { grid-template-columns: 200px 1fr; }
.mix-or {
  align-self: center;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  color: var(--ink-3);
  padding-top: 18px;
}
.mix-ref-input, .mix-ref-upload, .mix-prod-upload, .mix-prompt {
  display: flex; flex-direction: column; gap: 6px;
}

.mix-input-with-icon { position: relative; }
.mix-input-with-icon .text-input { padding-left: 34px; }
.mix-input-icon {
  position: absolute;
  left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--ink-3);
  pointer-events: none;
}

.mix-thumb {
  position: relative;
  height: 70px;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--line);
}
.mix-thumb img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.mix-thumb-stripes {
  width: 100%; height: 100%;
  background: repeating-linear-gradient(45deg, var(--accent-soft) 0 8px, var(--surface) 8px 16px);
  display: grid; place-items: center;
  font-family: var(--f-mono); font-size: 0.7rem;
  color: var(--ink-2);
}
.mix-thumb .uth-x {
  position: absolute; top: 6px; right: 6px;
  width: 22px; height: 22px;
  background: rgba(0,0,0,.55); color: white;
  border: none; border-radius: 50%;
  font-size: 14px; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
  z-index: 2;
}
.mix-thumb .uth-x:hover { background: rgba(0,0,0,.78); }

.mix-cta-col {
  display: flex; flex-direction: column; gap: 8px;
  justify-content: flex-end;
}

.mix-canvas { flex: 1; min-height: 0; }

@media (max-width: 1100px) {
  .mix-settings-inner {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .mix-step-divider { display: none; }
  .mix-prod-row, .mix-ref-row { grid-template-columns: 1fr; }
  .mix-or { padding-top: 0; }
}


/* ===== Generation flow mobile UX ============================================
   Toast + flash-in + увеличенный .result-processing на мобиле,
   чтобы spinner был виден сразу после отправки. */
.gen-toast {
  position: fixed; left: 50%; top: 16px;
  transform: translateX(-50%) translateY(-12px);
  background: var(--ink); color: var(--surface);
  padding: 12px 18px; border-radius: 100px;
  font-family: var(--f-mono); font-size: .82rem;
  box-shadow: 0 12px 32px -10px rgba(0,0,0,.35);
  z-index: 1500; opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .25s;
  max-width: calc(100vw - 32px);
}
.gen-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.flash-in { animation: flashIn .45s ease-out; }
@keyframes flashIn {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: none; }
}
@media (max-width: 820px) {
  /* Spinner-карточка крупнее на мобиле — её сразу видно после scroll */
  .result-processing {
    min-height: 220px !important;
    padding: 28px 18px !important;
    background: linear-gradient(180deg, rgba(232,92,44,.06), rgba(232,92,44,.02));
    border-radius: var(--r-lg);
  }
  .result-processing .spinner {
    width: 56px !important; height: 56px !important;
    border-width: 3px !important;
  }
  .result-processing p { font-size: 1.05rem !important; }
  .result-processing small { font-size: .82rem !important; }
}