/* ========================================================================
   АГРЕГАТО — страница «Ася» (ИИ-дизайнер интерьеров)
   Вынесено из aesthetics.html (Волна 7.2). Переопределяет общие токены.
   Подключение: style.css → landing.css → aesthetics.css (последним).
   ======================================================================== */

/* ---------- Токены страницы (фиолетовый, Playfair, скругления xl) ---------- */
:root {
    /* Основные токены — совместимы с landing.css и style.css */
    --accent: #7C5CFF;
    --accent-hover: #6A48FF;
    --accent-soft: #EDE8FF;
    --text: #0E0E14;
    --text-muted: #6B6B7B;
    --text-faint: #A0A0B0;
    --surface: #FFFFFF;
    --surface-2: #F7F7FB;
    --border: #E8E6F0;
    --border-strong: #D6D2E8;
    --font-sans: "Inter", system-ui, -apple-system, sans-serif;
    --font-serif: "Playfair Display", Georgia, serif;
    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-2xl: 32px;
    --radius-pill: 999px;
    --shadow-sm: 0 1px 2px rgba(20,15,60,.06);
    --shadow-md: 0 6px 24px rgba(124,92,255,.10);
    --shadow-lg: 0 16px 48px rgba(124,92,255,.16);
}

/* ========================================================================
   Волна 7.8 (подзадача 1) — глобальный фон страницы hero-bg.png
   ======================================================================== */
body.view-aesthetics {
    background-color: #FBFAFF;
    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.65),
            rgba(255, 255, 255, 0.85)
        ),
        url('/static/assets/backgrounds/hero-bg.png');
    background-size: cover, cover;
    background-position: center, center top;
    background-repeat: no-repeat, no-repeat;
    background-attachment: fixed, fixed;
}
.container {
    background: transparent;
}

/* ========================================================================
   ИНЛАЙН-СТИЛИ (перенесены как есть из aesthetics.html)
   ======================================================================== */
.sticky-bar {
    position: sticky; top: 0; z-index: 100;
    background: rgba(246, 244, 239, 0.92);
    backdrop-filter: blur(12px);
    padding: var(--space-4) 0;
    margin-bottom: var(--space-5);
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s;
}
.sticky-bar.scrolled { border-bottom-color: var(--border); }

.panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-5);
}
.panel-row {
    display: flex; gap: var(--space-5); margin-bottom: var(--space-4);
    align-items: flex-start; flex-wrap: wrap;
}
.panel-row:last-child { margin-bottom: 0; }
.field-block { display: flex; flex-direction: column; gap: 8px; }
.field-label {
    font-size: 11px; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500;
}
.photos-strip { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.photo-thumb { position: relative; width: 64px; height: 64px; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border); }
.photo-thumb img { width: 100%; height: 100%; object-fit: cover; }
.photo-remove {
    position: absolute; top: 2px; right: 2px;
    width: 18px; height: 18px; border-radius: 50%;
    background: rgba(30, 28, 24, 0.7); color: #fff;
    border: none; cursor: pointer; font-size: 12px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
}
.photo-remove:hover { background: var(--danger); }
.photo-add {
    width: 64px; height: 64px; border-radius: var(--radius-sm);
    border: 1px dashed var(--border-strong); background: var(--surface-alt);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--text-light); font-size: 22px;
    transition: all 0.15s;
}
.photo-add:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-tint); }
.photo-add input { display: none; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
    padding: 8px 14px; font-size: 13px;
    background: var(--surface-alt); color: var(--text);
    border: 1px solid var(--border);
    border-radius: 20px; cursor: pointer;
    font-family: var(--font-sans); font-weight: 500;
    transition: all 0.15s;
}
.chip:hover { border-color: var(--border-strong); }
.chip.active { background: var(--accent); color: #fff; border-color: var(--accent); }

.budget-block { display: flex; flex-direction: column; gap: 6px; min-width: 280px; }
.budget-row { display: flex; align-items: center; gap: 8px; }
.budget-row .prefix { font-size: 12px; color: var(--text-muted); width: 20px; text-align: right; }
.budget-row input[type=number] {
    width: 90px; padding: 6px 10px; font-size: 13px;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    outline: none; font-family: var(--font-sans);
}
.budget-row input[type=number]:focus { border-color: var(--accent); }
.budget-row input[type=range] { flex: 1; accent-color: var(--accent); min-width: 100px; }

.question-row { display: flex; gap: 10px; align-items: center; }
.question-row input[type=text] {
    flex: 1; padding: 12px 16px; font-size: 14px;
    border: 1px solid var(--border); border-radius: var(--radius);
    outline: none; font-family: var(--font-sans);
}
.question-row input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(61, 90, 69, 0.08); }
.question-submit {
    padding: 12px 24px; font-size: 13px;
    background: var(--accent); color: #fff;
    border: none; border-radius: var(--radius);
    cursor: pointer; font-weight: 500;
    font-family: var(--font-sans); white-space: nowrap;
    transition: background 0.15s;
}
.question-submit:hover { background: var(--accent-hover); }
.question-submit:disabled { opacity: 0.6; cursor: wait; }

.compact-bar { display: none; align-items: center; gap: 10px; }
.compact-photos { display: flex; gap: 4px; align-items: center; flex-shrink: 0; }
.compact-photo { width: 36px; height: 36px; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border); }
.compact-photo img { width: 100%; height: 100%; object-fit: cover; }
.compact-edit {
    font-size: 12px; color: var(--accent); background: none;
    border: 1px solid var(--border); padding: 8px 12px;
    border-radius: var(--radius-sm); font-family: var(--font-sans);
    white-space: nowrap; cursor: pointer;
}
.compact-edit:hover { border-color: var(--accent); }

/* W46 AS-12: поле компакт-бара (перенесено из inline-стиля) + адаптив 390px */
.compact-bar .compact-input {
    flex: 1 1 0;
    min-width: 0;
    padding: 12px 16px; font-size: 14px;
    border: 1px solid var(--border); border-radius: var(--radius);
    outline: none; font-family: var(--font-sans);
}
@media (max-width: 599px) {
    .compact-bar { flex-wrap: wrap; gap: 8px; }
    /* Ввод — на всю ширину своей строки; кнопки переносятся ниже */
    .compact-bar .compact-input { flex: 1 1 100%; }
    .compact-bar #askCompactBtn,
    .compact-bar .compact-edit { flex: 1 1 auto; }
}

/* Чат */
.chat-area { display: flex; flex-direction: column; gap: var(--space-5); }
.message {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: var(--space-5);
}
.message-user { background: var(--accent-tint); }
.message-header {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: var(--space-4); flex-wrap: wrap;
}
.message-title { font-family: var(--font-serif); font-size: 17px; }
.message-budget {
    font-size: 11px; color: var(--text-muted);
    background: var(--surface); padding: 4px 10px;
    border-radius: var(--radius-sm); margin-left: auto;
}

.ai-description { font-size: 14px; line-height: 1.6; margin-bottom: var(--space-3); }
.ai-meta { font-size: 12px; color: var(--text-muted); display: flex; gap: 16px; flex-wrap: wrap; }

.palette-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--space-3); }
.palette-color { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.palette-swatch { width: 40px; height: 40px; border-radius: var(--radius-sm); border: 2px solid var(--surface); box-shadow: var(--shadow-xs); }
.palette-label { font-size: 10px; color: var(--text-muted); max-width: 60px; text-align: center; }

.qa-answer {
    font-size: 14px; line-height: 1.65;
    padding: var(--space-4) var(--space-5);
    background: var(--surface-alt);
    border-radius: var(--radius); margin-bottom: var(--space-4);
    border-left: 2px solid var(--accent);
}

.section-heading {
    font-size: 11px; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.08em;
    margin-bottom: var(--space-3); margin-top: var(--space-5);
    font-weight: 500;
    display: flex; align-items: baseline; gap: 8px;
}
.section-heading:first-of-type { margin-top: 0; }
.section-heading .query-hint { font-size: 11px; color: var(--text-light); text-transform: none; letter-spacing: 0; }

.category-block {
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--border);
}
.category-block:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.category-title { font-family: var(--font-serif); font-size: 17px; margin-bottom: 4px; }
.category-reason { font-size: 12px; color: var(--text-muted); font-style: italic; margin-bottom: var(--space-3); padding-left: 4px; border-left: 2px solid var(--border); }

.products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.product-card-wrap { position: relative; }
.product-card {
    background: var(--surface-alt); border: 1px solid var(--border);
    border-radius: var(--radius-sm); overflow: hidden;
    color: inherit; display: flex; flex-direction: column;
    transition: border-color 0.15s, transform 0.15s;
}
.product-card:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.product-card img { width: 100%; height: 130px; object-fit: cover; background: var(--surface); display: block; }
.product-body { padding: 10px; flex: 1; display: flex; flex-direction: column; }
.product-name { font-size: 12px; font-weight: 500; line-height: 1.3; margin-bottom: 6px; flex: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.product-price { font-size: 14px; font-weight: 600; }
.product-rating { font-size: 10px; color: var(--text-muted); margin-top: 3px; }

.cart-btn-mini {
    position: absolute; top: 6px; right: 6px;
    width: 30px; height: 30px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.95); border: 1px solid var(--border);
    font-size: 12px; cursor: pointer; color: var(--text-muted);
    display: flex; align-items: center; justify-content: center;
    z-index: 2;
}
.cart-btn-mini.active { color: var(--accent); border-color: var(--accent); }

.empty-category { font-size: 13px; color: var(--text-light); font-style: italic; }

.loading-message {
    text-align: center; padding: var(--space-5);
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius);
}
.loading-text { font-size: 13px; color: var(--text-muted); margin-top: var(--space-3); }

.empty-state {
    text-align: center; padding: var(--space-7) var(--space-5);
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); color: var(--text-muted); font-size: 13px;
}
/* ─── Режимы (визуализатор / вайб / примерка / редизайн) ─── */
.mode-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: var(--space-4); }
.mode-tab {
    padding: 9px 16px; font-size: 13px; font-weight: 500;
    background: var(--surface); color: var(--text);
    border: 1px solid var(--border); border-radius: 20px;
    cursor: pointer; font-family: var(--font-sans);
    transition: all 0.15s; white-space: nowrap;
}
.mode-tab:hover { border-color: var(--border-strong); }
.mode-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.mode-panel { display: none; }
.mode-panel.active { display: block; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 720px) { .two-col { grid-template-columns: 1fr; } }
.upload-box {
    border: 1px dashed var(--border-strong); border-radius: var(--radius);
    padding: var(--space-5); text-align: center; cursor: pointer;
    color: var(--text-light); background: var(--surface-alt);
    transition: all 0.15s; position: relative;
}
.upload-box:hover { border-color: var(--accent); color: var(--accent); }
.upload-box img { max-width: 100%; max-height: 180px; border-radius: var(--radius-sm); margin-top: 8px; }
.upload-box .hint { font-size: 12px; margin-top: 6px; color: var(--text-muted); }
.upload-box input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.generated-image { width: 100%; border-radius: var(--radius); margin-top: var(--space-3); border: 1px solid var(--border); }
.generated-note { font-size: 12px; color: var(--text-muted); margin-top: 6px; }
.materials-box { white-space: pre-line; font-size: 13px; line-height: 1.6; }
.variant-card { border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-4); margin-bottom: var(--space-4); }
.variant-name { font-family: var(--font-serif); font-size: 17px; margin-bottom: 6px; }
.feasibility-badge { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.feasibility-realistic { background: #e6f4ea; color: #1e7d34; }
.feasibility-partially { background: #fdf3d8; color: #9a6b00; }
.feasibility-unrealistic { background: #fdeaea; color: #b3261e; }
.estimate-line { font-size: 15px; font-weight: 600; margin: var(--space-3) 0; }
.action-btn {
    display: inline-block; padding: 12px 22px; font-size: 13px; font-weight: 500;
    background: var(--accent); color: #fff; border: none; border-radius: var(--radius);
    cursor: pointer; font-family: var(--font-sans); transition: background 0.15s;
}
.action-btn:hover { background: var(--accent-hover); }
.action-btn:disabled { opacity: 0.6; cursor: wait; }
.action-btn--ghost { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
.action-btn--ghost:hover { background: var(--accent-tint); }

/* Волна 7.2: primary-кнопки временно остаются тёмными (перекрасим в 7.4) */
.question-submit,
.action-btn {
    background: #0a0a0a;
}
.question-submit:hover,
.action-btn:hover {
    background: #262626;
}

/* ========================================================================
   Волна 7.3 — tabs под концепт + 2-колоночный pick-layout
   ======================================================================== */

/* Tabs: pill-кнопки с иконками */
#modeTabs,
.mode-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 24px;
}

.mode-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 999px;
    border: 1px solid #E8E6F0;
    background: #fff;
    color: #6B6B7B;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s ease;
    white-space: nowrap;
}
.mode-tab:hover {
    border-color: #D6D2E8;
    color: #0E0E14;
}
.mode-tab.active,
.mode-tab.is-active,
.mode-tab[aria-current="true"] {
    background: #7C5CFF;
    border-color: #7C5CFF;
    color: #fff;
    box-shadow: 0 6px 18px rgba(124,92,255,.28);
}
.mode-tab.active:hover {
    background: #6A48FF;
}
.mode-tab svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* 2-колоночный layout pick-режима */
.as-pick-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 32px;
    align-items: start;
    margin-top: 8px;
}
.as-pick-left {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.as-pick-right {
    position: sticky;
    top: 90px;
    min-height: 400px;
}

/* Правая колонка видна только в режиме pick */
body[data-mode="pick"] .as-pick-layout { display: grid; }
body:not([data-mode="pick"]) .as-pick-layout { display: none; }

/* Узкие экраны — одна колонка */
@media (max-width: 1199px) {
    .as-pick-layout {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .as-pick-right {
        position: static;
        min-height: 0;
    }
}

/* Волна 7.3 доп.: фикс горизонтального переполнения на узких экранах
   (flex-элементы по умолчанию не сжимаются ниже контента) */
.panel-row .field-block,
.question-row,
.question-row input[type=text] {
    min-width: 0;
}

/* ========================================================================
   Волна 7.4 — стилизация левой колонки pick-режима (форма подбора)
   ======================================================================== */

/* ── Карточка формы (обёртка .panel в stickyBar) ── */
.as-form-card {
    background: #fff;
    border: 1px solid #E8E6F0;
    border-radius: 20px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-shadow: 0 4px 16px rgba(124,92,255,.04);
}

/* ── 1. Загрузка фото: карточка с «+» в кружке ── */
.photo-add {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 140px;
    height: 140px;
    border: 2px dashed #D6D2E8;
    border-radius: 20px;
    background: #FAFAFE;
    cursor: pointer;
    transition: border-color .15s, background .15s;
    position: relative;
}
.photo-add:hover {
    border-color: #7C5CFF;
    background: #F5F1FF;
}
.photo-add::before {
    content: '+';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #EDE8FF;
    color: #7C5CFF;
    font-size: 28px;
    font-weight: 300;
    line-height: 1;
    transition: background .15s, color .15s;
}
.photo-add:hover::before {
    background: #7C5CFF;
    color: #fff;
}
.photo-add span,
.photo-add small {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 12px;
    color: #6B6B7B;
    text-align: center;
    padding: 0 8px;
}
.photo-add input[type="file"] {
    display: none;
}

#photosStrip {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 12px;
}
#photosStrip .photo-thumb {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 14px;
    overflow: hidden;
    background: #F7F7FB;
    border: 1px solid #E8E6F0;
}
#photosStrip .photo-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#photosStrip .photo-thumb .photo-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255,255,255,.95);
    border: none;
    color: #6B6B7B;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
#photosStrip .photo-thumb .photo-remove:hover { color: #EF4444; }

/* ── 2. Чипы комнат с эмодзи + «Другое» ── */
#roomChips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
#pickCategoryChips,
#pickVariantsChips {
    gap: 10px;
}
.as-room-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 999px;
    border: 1px solid #E8E6F0;
    background: #fff;
    color: #0E0E14;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s ease;
}
.as-room-chip:hover {
    border-color: #D6D2E8;
    background: #FAFAFE;
}
.as-room-chip.active,
.as-room-chip.is-active {
    background: #0E0E14;
    border-color: #0E0E14;
    color: #fff;
}
.as-room-chip__icon {
    font-size: 16px;
    line-height: 1;
    display: inline-block;
}
.as-room-chip--other .as-room-chip__icon {
    font-weight: 700;
    color: #7C5CFF;
}
.as-room-chip--other.active .as-room-chip__icon {
    color: #fff;
}

/* ── 3. Бюджет: фиолетовые слайдеры ── */
.budget-block {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 0;
}
.budget-block > label,
.budget-block__label {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #6B6B7B;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}
.budget-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.budget-row input[type="number"] {
    width: 110px;
    padding: 10px 14px;
    border: 1px solid #E8E6F0;
    border-radius: 12px;
    background: #fff;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 14px;
    color: #0E0E14;
    outline: none;
    text-align: right;
    transition: border-color .15s;
}
.budget-row input[type="number"]:focus {
    border-color: #7C5CFF;
    box-shadow: 0 0 0 3px rgba(124,92,255,.12);
}
.budget-row__currency {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 14px;
    color: #6B6B7B;
}

/* ── 4. Поле «Что ищете?» + кнопки ── */
.as-suggest-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid #E8E6F0;
    border-radius: 999px;
    background: #fff;
    color: #7C5CFF;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s ease;
    white-space: nowrap;
}
.as-suggest-btn:hover {
    background: #EDE8FF;
    border-color: #7C5CFF;
}
.as-suggest-btn img {
    width: 14px;
    height: 14px;
    object-fit: contain;
}
#questionInput {
    flex: 1;
    min-width: 0;
    padding: 14px 18px;
    border: 1px solid #E8E6F0;
    border-radius: 14px;
    background: #fff;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 14px;
    color: #0E0E14;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
#questionInput:focus {
    border-color: #7C5CFF;
    box-shadow: 0 0 0 3px rgba(124,92,255,.12);
}
#questionInput::placeholder { color: #A0A0B0; }

#submitBtn,
.question-submit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    border: none;
    border-radius: 14px;
    background: linear-gradient(135deg, #7C5CFF 0%, #A855F7 40%, #EC4899 100%);
    background-size: 200% 200%;
    color: #fff;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-position .4s ease, transform .15s, box-shadow .15s;
    box-shadow: 0 8px 24px rgba(124,92,255,.28);
    white-space: nowrap;
}
#submitBtn:hover {
    background-position: 100% 50%;
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(168,85,247,.4);
}
#submitBtn::after {
    content: '\2192';
    font-size: 16px;
    margin-left: 2px;
    transition: transform .3s ease;
}
#submitBtn:hover::after {
    transform: translateX(3px);
}
#submitBtn img {
    width: 16px;
    height: 16px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

/* ========================================================================
   Волна 7.5 — правая колонка pick-режима (3D-куб + заголовок + фичи)
   ======================================================================== */

.as-pick-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
    padding: 24px 12px;
}

/* 3D-куб */
.as-cube {
    position: relative;
    width: 100%;
    max-width: 320px;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}
.as-cube__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    animation: asCubeFloat 6s ease-in-out infinite;
    filter: drop-shadow(0 20px 40px rgba(124, 92, 255, 0.18));
}
@keyframes asCubeFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-8px) rotate(-1deg); }
}
@media (prefers-reduced-motion: reduce) {
    .as-cube__img { animation: none; }
}

.as-hero-title {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: #0E0E14;
    margin: 0;
}
@media (max-width: 1199px) {
    .as-hero-title { font-size: 28px; }
}

.as-hero-sub {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #6B6B7B;
    max-width: 320px;
    margin: 0;
}

.as-features {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 340px;
    text-align: left;
}
.as-feature {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(124, 92, 255, 0.05);
    transition: transform .15s ease, box-shadow .15s ease;
}
.as-feature:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(124, 92, 255, 0.10);
}
.as-feature__icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #EDE8FF;
    color: #7C5CFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.as-feature__icon svg {
    width: 20px;
    height: 20px;
}
.as-feature__text {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #0E0E14;
    line-height: 1.35;
}

@media (max-width: 1199px) {
    .as-pick-right {
        position: static;
        padding: 16px 12px 0;
    }
    .as-cube {
        max-width: 240px;
    }
}

/* ========================================================================
   Волна 7.6 — плашка-пустышка в #chatArea с interior-card-bg.png
   ======================================================================== */

.as-empty-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 24px;
    min-height: 180px;
    border-radius: 24px;
    padding: 32px 24px;
    background:
        linear-gradient(90deg,
            rgba(247, 245, 255, 0.95) 0%,
            rgba(247, 245, 255, 0.6) 40%,
            rgba(247, 245, 255, 0.1) 70%),
        url('/static/assets/aesthetics/interior-card-bg.png');
    background-size: auto 100%, cover;
    background-position: left center, right center;
    background-repeat: no-repeat, no-repeat;
    overflow: hidden;
    border: 1px solid #EDE8FF;
}

.as-empty-hero__text {
    position: relative;
    z-index: 1;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.as-empty-hero__title {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: #0E0E14;
    margin: 0;
}

.as-empty-hero__sub {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 13.5px;
    line-height: 1.5;
    color: #6B6B7B;
    margin: 0;
}

.as-empty-hero__loading {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: #fff;
    border: 1px solid #E8E6F0;
    border-radius: 999px;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #6B6B7B;
    margin-top: 6px;
    width: fit-content;
    box-shadow: 0 2px 10px rgba(124, 92, 255, 0.06);
}

.as-empty-hero__loading-text {
    color: #6B6B7B;
}

.as-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid #D6D2E8;
    border-top-color: #7C5CFF;
    animation: asSpin 0.9s linear infinite;
    flex-shrink: 0;
}
@keyframes asSpin {
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .as-spinner { animation-duration: 3s; }
}

.as-empty-hero__bg {
    display: none;
}

@media (max-width: 899px) {
    .as-empty-hero {
        grid-template-columns: 1fr;
        min-height: 0;
        padding: 24px 20px;
        background:
            linear-gradient(180deg,
                rgba(247, 245, 255, 0.95) 0%,
                rgba(247, 245, 255, 0.7) 60%,
                rgba(247, 245, 255, 0.3) 100%),
            url('/static/assets/aesthetics/interior-card-bg.png');
        background-size: cover, cover;
        background-position: center top, center bottom;
    }
    .as-empty-hero__title { font-size: 18px; }
}

@media (max-width: 599px) {
    .as-empty-hero { background-image: none; background: #F7F5FF; }
}

/* ========================================================================
   Волна 7.7 — модалка «Другое» (полный список типов комнат)
   ======================================================================== */

.as-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.as-modal[hidden] { display: none; }

.as-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(14, 14, 20, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    cursor: pointer;
    animation: asFadeIn .2s ease;
}

.as-modal__window {
    position: relative;
    z-index: 1;
    background: #fff;
    border-radius: 24px;
    width: 100%;
    max-width: 560px;
    max-height: 85vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 72px rgba(20, 10, 60, 0.24);
    animation: asModalIn .25s ease;
}
@keyframes asFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes asModalIn {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .as-modal__overlay,
    .as-modal__window { animation: none; }
}

.as-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid #F1EFFF;
}
.as-modal__title {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 22px;
    font-weight: 700;
    color: #0E0E14;
    margin: 0;
}
.as-modal__close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: #F1EFFF;
    color: #6B6B7B;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    transition: background .15s, color .15s;
}
.as-modal__close:hover {
    background: #EDE8FF;
    color: #7C5CFF;
}
.as-modal__body {
    padding: 20px 24px;
    overflow-y: auto;
    flex: 1;
}
.as-modal__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
@media (max-width: 480px) {
    .as-modal__grid { grid-template-columns: 1fr; }
}
.as-modal__room {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #E8E6F0;
    border-radius: 14px;
    cursor: pointer;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #0E0E14;
    transition: all .15s ease;
    text-align: left;
}
.as-modal__room:hover {
    border-color: #7C5CFF;
    background: #FAFAFE;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(124, 92, 255, 0.08);
}
.as-modal__room-icon {
    font-size: 22px;
    line-height: 1;
    flex-shrink: 0;
}
.as-modal__room-name {
    flex: 1;
    min-width: 0;
}
.as-modal__empty {
    padding: 40px 24px;
    text-align: center;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 14px;
    color: #A0A0B0;
}
.as-modal__foot {
    padding: 16px 24px;
    background: #FAFAFE;
    border-top: 1px solid #F1EFFF;
}
.as-modal__note {
    margin: 0;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 12px;
    line-height: 1.5;
    color: #6B6B7B;
    text-align: center;
}
@media (max-width: 599px) {
    .as-modal { padding: 12px; }
    .as-modal__window { border-radius: 18px; }
    .as-modal__head,
    .as-modal__body { padding: 16px; }
    .as-modal__foot { padding: 12px 16px; }
}

/* ========================================================================
   Волна 7.8 — глобальный polish Аси
   ======================================================================== */

/* ── «← К поиску» + табы ── */
.as-top-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.as-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #6B6B7B;
    text-decoration: none;
    background: transparent;
    transition: color .15s, background .15s;
    flex-shrink: 0;
}
.as-back:hover {
    color: #7C5CFF;
    background: rgba(237, 232, 255, 0.6);
}
.as-back svg {
    width: 16px;
    height: 16px;
}
#modeTabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 0;
}

/* ── Стеклянные табы ── */
.mode-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #0E0E14;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all .2s ease;
    white-space: nowrap;
    box-shadow: 0 2px 10px rgba(124, 92, 255, 0.05);
}
.mode-tab:hover {
    background: rgba(255, 255, 255, 0.75);
    border-color: #D6D2E8;
    transform: translateY(-1px);
}
.mode-tab.active,
.mode-tab.is-active,
.mode-tab[aria-current="true"] {
    background: linear-gradient(135deg, #7C5CFF 0%, #A855F7 50%, #EC4899 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 15px rgba(168, 85, 247, 0.4);
    font-weight: 600;
}
.mode-tab.active:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(168, 85, 247, 0.5);
}
.mode-tab svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* ── W19a: переключатель режима аналитики «Быстро» / «Точность» ── */
.as-speed {
    display: inline-flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
}
.as-speed__group {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border-radius: 999px;
    border: 1px solid #E8E6F0;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(124, 92, 255, 0.05);
}
.as-speed__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: #6B6B7B;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: all .15s ease;
}
.as-speed__btn:hover { color: #0E0E14; }
.as-speed__btn.is-active {
    background: linear-gradient(135deg, #7C5CFF 0%, #A855F7 50%, #EC4899 100%);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(168, 85, 247, 0.35);
}
.as-speed__btn:focus-visible {
    outline: 2px solid #7C5CFF;
    outline-offset: 2px;
}
.as-speed__tag {
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    padding: 3px 7px;
    border-radius: 999px;
    text-transform: lowercase;
    background: rgba(124, 92, 255, 0.12);
    color: #6A48FF;
}
.as-speed__btn.is-active .as-speed__tag {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}
.as-speed__tag--exp {
    background: rgba(245, 158, 11, 0.14);
    color: #B45309;
}
.as-speed__hint {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 12px;
    color: #B45309;
    line-height: 1.3;
}
.as-speed__hint[hidden] { display: none; }
@media (min-width: 1200px) {
    .as-speed { margin-left: auto; }
}
@media (max-width: 599px) {
    .as-speed { width: 100%; }
    .as-speed__group { width: 100%; }
    .as-speed__btn { flex: 1; justify-content: center; }
    .as-speed__tag { display: none; }
}

/* ── W22b: явный выбор модели генерации «Аси» (тестовая фича) ── */
.as-model {
    display: inline-flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
}
.as-model__select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 8px 34px 8px 14px;
    border-radius: 999px;
    border: 1px solid #E8E6F0;
    background-color: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(124, 92, 255, 0.05);
    color: #0E0E14;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6B7B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px 12px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.as-model__select:hover { border-color: #D8D4E8; }
.as-model__select:focus-visible {
    outline: 2px solid #7C5CFF;
    outline-offset: 2px;
}
.as-model__hint {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 12px;
    color: #B45309;
    line-height: 1.3;
}
.as-model__hint[hidden] { display: none; }
@media (max-width: 599px) {
    .as-model { width: 100%; }
    .as-model__select { width: 100%; }
}

/* ── Textarea «Что ищете?» ── */
#questionInput,
.as-question-input {
    flex: 0 0 auto;
    width: 100%;
    min-height: 100px;
    padding: 16px 18px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-family: "Inter", system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #0E0E14;
    outline: none;
    resize: vertical;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
#questionInput:focus {
    border-color: #7C5CFF;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.12);
}
#questionInput::placeholder { color: #A0A0B0; }

/* ── Блок вопроса: textarea сверху, кнопки снизу ── */
.as-question-block {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 8px;
}
.as-question-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
}

/* ── «Предложить» — стеклянная ── */
.as-suggest-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #7C5CFF;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s ease;
    white-space: nowrap;
}
.as-suggest-btn:hover {
    background: rgba(237, 232, 255, 0.8);
    transform: translateY(-1px);
}
.as-suggest-btn img {
    width: 14px;
    height: 14px;
    object-fit: contain;
}

/* ── «Подобрать» — широкая градиентная ── */
.as-submit-btn,
#submitBtn {
    flex: 1;
    min-width: 200px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 28px;
    border: none;
    border-radius: 16px;
    background: linear-gradient(135deg,
        #7C5CFF 0%,
        #A855F7 45%,
        #EC4899 100%);
    background-size: 200% 200%;
    color: #fff;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(124, 92, 255, 0.32);
    transition: background-position .5s ease,
                transform .15s,
                box-shadow .15s;
    white-space: nowrap;
}
.as-submit-btn:hover,
#submitBtn:hover {
    background-position: 100% 50%;
    transform: translateY(-1px);
    box-shadow: 0 12px 32px rgba(168, 85, 247, 0.42);
}
.as-submit-btn__icon,
#submitBtn img {
    width: 16px;
    height: 16px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}
.as-submit-btn__arrow {
    font-size: 18px;
    margin-left: 2px;
    transition: transform .3s ease;
}
.as-submit-btn:hover .as-submit-btn__arrow {
    transform: translateX(4px);
}
/* убираем старую стрелку из волны 7.4 (теперь span внутри кнопки) */
#submitBtn::after {
    content: none;
}

@media (max-width: 599px) {
    .as-question-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }
    .as-submit-btn,
    #submitBtn,
    .as-suggest-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ── Подсказка под формой ── */
.as-hint {
    display: flex;
    gap: 14px;
    padding: 16px 20px;
    margin-top: 4px;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(124, 92, 255, 0.06);
}
.as-hint__icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #EDE8FF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.as-hint__icon img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}
.as-hint__text {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 13px;
    line-height: 1.5;
    color: #6B6B7B;
}
.as-hint__text b {
    color: #0E0E14;
    font-weight: 600;
}

/* ── Отступы ── */
.as-pick-left {
    gap: 20px;
}

/* ========================================================================
   Волна 7.9 — декоративные элементы вокруг куба
   ======================================================================== */

.as-cube {
    position: relative;
}

.as-cube__deco {
    position: absolute;
    width: 32px;
    height: 32px;
    object-fit: contain;
    filter: drop-shadow(0 6px 20px rgba(168, 85, 247, 0.25));
    animation: asCubeFloat 7s ease-in-out infinite;
    z-index: 2;
    background: transparent;
    border: none;
    border-radius: 0;
}
.as-cube__deco--2,
.as-cube__deco--4 {
    width: 28px;
    height: 28px;
}

.as-cube__deco--1 { top: 8%; left: -4%; animation-delay: -1s; }
.as-cube__deco--2 { top: 20%; right: -6%; animation-delay: -2.5s; }
.as-cube__deco--3 { bottom: 18%; left: -8%; animation-delay: -4s; }
.as-cube__deco--4 { bottom: 10%; right: -3%; animation-delay: -3s; }

.as-cube__spark {
    position: absolute;
    font-size: 14px;
    color: #A855F7;
    opacity: 0.7;
    pointer-events: none;
    animation: asSpark 3s ease-in-out infinite;
    z-index: 3;
}
.as-cube__spark--1 { top: 15%; left: 15%; animation-delay: 0s;   font-size: 16px; }
.as-cube__spark--2 { top: 30%; right: 20%; animation-delay: -0.8s; font-size: 12px; }
.as-cube__spark--3 { bottom: 25%; left: 25%; animation-delay: -1.6s; font-size: 14px; }
.as-cube__spark--4 { bottom: 15%; right: 25%; animation-delay: -2.4s; font-size: 12px; }

@keyframes asSpark {
    0%, 100% { opacity: 0.3; transform: scale(0.9); }
    50%      { opacity: 0.85; transform: scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {
    .as-cube__deco,
    .as-cube__spark { animation: none; }
}

@media (max-width: 599px) {
    .as-cube__deco--1,
    .as-cube__deco--3 { left: -6%; }
    .as-cube__deco--2,
    .as-cube__deco--4 { right: -4%; }
}

/* ========================================================================
   Волна 7.10 — финальный polish Аси: фон + стекло + градиенты
   ======================================================================== */

/* ── 1. Глобальный фон — насыщеннее ── */
body.view-aesthetics {
    background-color: #F5EEFF;
    background-image:
        linear-gradient(
            135deg,
            rgba(243, 232, 255, 0.55) 0%,
            rgba(255, 228, 230, 0.45) 50%,
            rgba(224, 242, 254, 0.55) 100%
        ),
        url('/static/assets/backgrounds/hero-bg.png');
    background-size: cover, cover;
    background-position: center, center top;
    background-repeat: no-repeat, no-repeat;
    background-attachment: fixed, fixed;
}

/* ── 2. Основной контейнер формы — glass-panel ── */
.as-form-card {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 24px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.04);
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.as-hint {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 20px;
    padding: 18px 22px;
    box-shadow: 0 4px 20px rgba(124, 92, 255, 0.06);
}

/* ── 3. Зона загрузки фото — крупнее + градиентный «+» ── */
.photo-add {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 180px;
    height: 180px;
    border: 2px dashed rgba(168, 85, 247, 0.35);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    cursor: pointer;
    transition: all .2s ease;
}
.photo-add:hover {
    border-color: #A855F7;
    background: rgba(255, 255, 255, 0.6);
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(168, 85, 247, 0.15);
}
.photo-add::before {
    content: '+';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #A855F7 0%, #D946EF 100%);
    color: #fff;
    font-size: 32px;
    font-weight: 300;
    line-height: 1;
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.4);
    transition: transform .2s ease, box-shadow .2s ease;
}
.photo-add:hover::before {
    transform: scale(1.05);
    box-shadow: 0 0 32px rgba(168, 85, 247, 0.6);
}
.photo-add span,
.photo-add small {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 12px;
    color: #6B6B7B;
    text-align: center;
    padding: 0 12px;
    line-height: 1.35;
}
#photosStrip .photo-thumb {
    width: 120px;
    height: 120px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.8);
}

/* ── 5. Textarea — прозрачнее + больше padding ── */
#questionInput,
.as-question-input {
    width: 100%;
    min-height: 110px;
    padding: 18px 22px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-family: "Inter", system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.55;
    color: #0E0E14;
    outline: none;
    resize: vertical;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
#questionInput:focus {
    border-color: #A855F7;
    background: rgba(255, 255, 255, 0.75);
    box-shadow: 0 0 0 4px rgba(168, 85, 247, 0.12);
}
#questionInput::placeholder {
    color: #A0A0B0;
}

/* ── 6. Куб крупнее + заголовок жирнее ── */
.as-cube {
    max-width: 380px;
    margin-bottom: 8px;
}
.as-hero-title {
    font-size: 36px;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
}
@media (max-width: 1199px) {
    .as-hero-title { font-size: 30px; }
    .as-cube { max-width: 300px; }
}

/* ── 7. Фичи — усилить стекло ── */
.as-feature {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(124, 92, 255, 0.06);
    transition: transform .15s ease, box-shadow .15s ease;
}
.as-feature__icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, #A855F7 0%, #D946EF 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(168, 85, 247, 0.25);
}
.as-feature__icon svg {
    width: 20px;
    height: 20px;
    color: #fff;
}

/* ── 8. Нижний баннер — усилить контраст ── */
.as-empty-hero {
    background-image:
        linear-gradient(90deg,
            rgba(255, 255, 255, 0.9) 0%,
            rgba(255, 255, 255, 0.6) 45%,
            rgba(255, 255, 255, 0.05) 80%),
        url('/static/assets/aesthetics/interior-card-bg.png');
    background-size: auto 100%, cover;
    background-position: left center, right center;
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 8px 32px rgba(124, 92, 255, 0.08);
}

/* ========================================================================
   Волна 7.11 — готовые SVG-иконки + 3D-PNG для фич
   ======================================================================== */

/* ── Фото: SVG-круг с плюсом вместо ::before ── */
.photo-add__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #A855F7 0%, #D946EF 100%);
    color: #fff;
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.4);
    transition: transform .2s ease, box-shadow .2s ease;
}
.photo-add__icon svg {
    width: 32px;
    height: 32px;
    color: #fff;
}
.photo-add:hover .photo-add__icon {
    transform: scale(1.05);
    box-shadow: 0 0 32px rgba(168, 85, 247, 0.6);
}
.photo-add::before {
    content: none;
}

/* ── Кнопка «Предложить» — волшебная палочка ── */
.as-suggest-btn__icon {
    width: 16px;
    height: 16px;
    color: #7C5CFF;
    flex-shrink: 0;
}

/* ── Кнопка «Подобрать» — стрелка со звездой ── */
.as-submit-btn__icon {
    width: 20px;
    height: 20px;
    color: #fff;
    flex-shrink: 0;
    filter: none;
}

/* ── Спиннер «ИИ анализирует…» — пунктирный круг ── */
.as-empty-hero__spinner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: #7C5CFF;
    flex-shrink: 0;
}
.as-empty-hero__spinner svg {
    width: 100%;
    height: 100%;
    animation: asSpin 1.5s linear infinite;
}

/* ── Фичи: 3D-PNG вместо градиентных кружков ── */
.as-feature__icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.as-feature__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ── Чипы комнат: SVG-иконки (вместо эмодзи) ── */
.as-room-chip__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.as-room-chip__icon svg {
    width: 18px;
    height: 18px;
}

/* ========================================================================
   Волна 7.11 (полная) — 3D-PNG плюс, новые SVG-иконки, фикс баннера,
   белый трек слайдера
   ======================================================================== */

/* ── Часть A. Фикс обрезки баннера внизу ── */
body.view-aesthetics {
    padding-bottom: 48px;
}
.as-pick-left {
    padding-bottom: 8px;
}
.as-empty-hero {
    margin-bottom: 24px;
    background-attachment: scroll;
}

/* ── Часть B. Кнопка фото — 3D-PNG плюс ── */
.photo-add__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    background: transparent;
    border-radius: 50%;
    box-shadow: none;
    transition: transform .2s ease;
}
.photo-add__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 8px 24px rgba(168, 85, 247, 0.35));
}
.photo-add:hover .photo-add__icon {
    transform: scale(1.05);
    box-shadow: none;
}

/* ── Часть C. Чипы комнат — SVG-иконки + цвета ── */
.as-room-chip__icon {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #6B6B7B;
    flex-shrink: 0;
}
.as-room-chip__icon svg {
    width: 100%;
    height: 100%;
}
.as-room-chip:hover .as-room-chip__icon {
    color: #7C5CFF;
}
.as-room-chip.active .as-room-chip__icon,
.as-room-chip.is-active .as-room-chip__icon {
    color: #fff;
}

/* ── Часть G. Фичи — 3D-PNG, 52px, без скругления ── */
.as-feature__icon {
    width: 52px;
    height: 52px;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.as-feature__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ========================================================================
   Волна 7.12 — единый двухползунковый слайдер + PNG-иконки кнопок
   ======================================================================== */

/* ── Правка 1. Единый слайдер бюджета ── */
.budget-block {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 8px 0;
}
.budget-block__label {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #6B6B7B;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.as-budget-slider {
    position: relative;
    height: 24px;
    margin: 4px 0;
    --min-p: 0%;
    --max-p: 40%;
}
.as-budget-slider__track {
    position: absolute;
    top: 50%;
    left: 0; right: 0;
    height: 6px;
    transform: translateY(-50%);
    background: #EDE8FF;
    border-radius: 999px;
    z-index: 0;
}
.as-budget-slider__fill {
    position: absolute;
    top: 50%;
    height: 6px;
    transform: translateY(-50%);
    background: linear-gradient(90deg, #A855F7 0%, #D946EF 100%);
    border-radius: 999px;
    left: var(--min-p);
    right: calc(100% - var(--max-p));
    z-index: 1;
    pointer-events: none;
}
.as-budget-slider input[type="range"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 24px;
    margin: 0;
    background: transparent;
    appearance: none;
    -webkit-appearance: none;
    pointer-events: none;
    z-index: 2;
}
.as-budget-slider input[type="range"]::-webkit-slider-runnable-track {
    background: transparent;
    height: 24px;
}
.as-budget-slider input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #A855F7;
    box-shadow: 0 2px 12px rgba(168, 85, 247, 0.4);
    cursor: pointer;
    pointer-events: auto;
    margin-top: 1px;
}
.as-budget-slider input[type="range"]::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #A855F7;
    box-shadow: 0 2px 12px rgba(168, 85, 247, 0.4);
    cursor: pointer;
    pointer-events: auto;
}
.as-budget-slider input[type="range"]::-moz-range-track {
    background: transparent;
}

.budget-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.budget-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 14px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: border-color .15s, box-shadow .15s;
}
.budget-pill:focus-within {
    border-color: #A855F7;
    box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.12);
}
.budget-pill__label {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 13px;
    color: #6B6B7B;
    flex-shrink: 0;
}
.budget-pill input[type="number"] {
    flex: 1;
    min-width: 0;
    width: auto;
    border: none;
    background: transparent;
    outline: none;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #0E0E14;
    text-align: right;
    padding: 0;
}
.budget-pill input[type="number"]::-webkit-inner-spin-button,
.budget-pill input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.budget-pill input[type="number"] {
    -moz-appearance: textfield;
}
.budget-pill__currency {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #6B6B7B;
    flex-shrink: 0;
}

/* ── Правка 2. PNG-иконки кнопок ── */
.as-suggest-btn img.as-suggest-btn__icon {
    display: inline-flex;
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex-shrink: 0;
}
#submitBtn img.as-submit-btn__icon {
    display: inline-flex;
    width: 20px;
    height: 20px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    flex-shrink: 0;
}

/* ── Правка 3. Подсказка — 3D-PNG вместо кружка ── */
.as-hint__icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 0;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.as-hint__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ========================================================================
   Волна 7.12ф — финальный polish: bokeh-фон, неровные края, иконки,
   декор куба, обрезка баннера
   ======================================================================== */

/* ── Правка 1. Неровные края под формой: убираем бежевый fallback ── */
/*   .sticky-bar имел beige-фон rgba(246,244,239,.92), который просвечивал */
/*   под полупрозрачной карточкой формы (серо-бежевые полосы). */
.sticky-bar {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.as-form-card {
    box-shadow: 0 4px 12px rgba(124, 92, 255, 0.06);
}
.as-hint {
    box-shadow: 0 4px 12px rgba(124, 92, 255, 0.06);
}

/* ── Правка 2. Bokeh-фон на всю страницу Аси ── */
body.view-aesthetics {
    background-color: #F5EEFF;
    background-image:
        url('/static/assets/aesthetics/as-bg.png'),
        linear-gradient(
            135deg,
            rgba(243, 232, 255, 0.55) 0%,
            rgba(255, 228, 230, 0.45) 50%,
            rgba(224, 242, 254, 0.55) 100%
        ),
        url('/static/assets/backgrounds/hero-bg.png');
    background-size: 100% auto, cover, cover;
    background-position: center top, center, center top;
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-attachment: fixed, fixed, fixed;
    opacity: 1;
}
body.view-aesthetics::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(251, 250, 255, 0.45);
    pointer-events: none;
    z-index: 0;
}
.container {
    position: relative;
    z-index: 1;
}

/* ── Правка 3. Кнопка «Предложить» — magic.png крупнее ── */
.as-suggest-btn {
    gap: 10px;
    padding: 12px 20px;
}
.as-suggest-btn img.as-suggest-btn__icon {
    width: 36px;
    height: 36px;
}

/* ── Правка 4. Подсказка — hint-window.png крупнее ── */
.as-hint {
    padding: 20px 24px;
}
.as-hint__icon {
    width: 80px;
    height: 80px;
}

/* ── Правка 6. Обрезка баннера при скролле ── */
body.view-aesthetics {
    padding-bottom: 64px;
}
.as-empty-hero {
    min-height: 200px;
}
.as-pick-left,
.as-pick-layout,
.container {
    overflow: visible;
}

/* ========================================================================
   Волна 8.2 — редизайн панели #panelVisualize: 2 колонки + своя форма
   ======================================================================== */

/* Нейтрализуем chrome .panel у визуализатора (контент рисует сам) */
#panelVisualize {
    background: transparent;
    border: 0;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
}

/* Layout визуализатора — перебиваем .as-pick-layout display:none вне pick */
.as-pick-layout--visualize {
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: 32px;
}
body[data-mode="visualize"] .as-pick-layout--visualize {
    display: grid;
}
@media (max-width: 1199px) {
    .as-pick-layout--visualize {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .as-pick-right--viz {
        position: static;
        min-height: 0;
    }
}

/* Заголовок визуализатора */
.as-viz-head {
    margin-bottom: 20px;
}
.as-viz-head__title {
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(28px, 2.6vw, 36px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #0E0E14;
    margin: 0 0 8px;
}
.as-viz-head__sub {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #6B6B7B;
    max-width: 560px;
    margin: 0;
}

/* Основная сетка формы: фото слева, поля справа */
.as-viz-row {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}
@media (max-width: 899px) {
    .as-viz-row {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* Левая колонка — фото */
.as-viz-photo { display: flex; flex-direction: column; gap: 10px; }
.as-viz-photo__label,
.as-viz-field__label {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #6B6B7B;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.as-viz-photo__zone {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.as-viz-photo__zone .photo-add {
    width: 100%;
    max-width: 220px;
}

/* Правая колонка — поля */
.as-viz-fields {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}
.as-viz-field {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.as-viz-chips { display: flex; flex-wrap: wrap; gap: 10px; }

/* Слайдер бюджета визуализатора — переиспользует .as-budget-slider */
.as-budget-slider--viz { margin: 4px 0; }
.as-viz-budget-values {
    display: flex;
    justify-content: space-between;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 13px;
    color: #6B6B7B;
}

/* Широкая кнопка */
.as-submit-btn--wide {
    width: 100%;
    margin-top: 8px;
    justify-content: center;
}
#visualizeBtn img.as-submit-btn__icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
}

/* 3 мини-бейджа под кнопкой */
.as-viz-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
    justify-content: center;
}
.as-viz-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(237, 232, 255, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 999px;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 11.5px;
    font-weight: 500;
    color: #6B6B7B;
    white-space: nowrap;
}
.as-viz-badge img {
    width: 14px;
    height: 14px;
    object-fit: contain;
}
@media (max-width: 599px) {
    .as-viz-badges { flex-direction: column; align-items: stretch; }
    .as-viz-badge { justify-content: center; }
}

/* ========================================================================
   Волна 8.3 — hero-композиция в правой колонке Визуализатора
   ======================================================================== */

/* Правая колонка визуализатора */
.as-pick-right--viz {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    padding: 8px 0;
}

/* Hero-композиция — слоистый блок */
.as-viz-hero {
    position: relative;
    width: 100%;
    max-width: 460px;
    aspect-ratio: 1 / 1;
    margin-bottom: 4px;
}

/* Ноутбук — основа */
.as-viz-hero__laptop {
    position: absolute;
    inset: 8% 4% 8% 4%;
    width: 92%;
    height: 84%;
    object-fit: contain;
    filter: drop-shadow(0 24px 48px rgba(124, 92, 255, 0.22));
    animation: asVizFloat 7s ease-in-out infinite;
    z-index: 1;
}

/* Волшебная палочка — поверх ноутбука (лежит снизу-слева) */
.as-viz-hero__wand {
    position: absolute;
    left: -2%;
    bottom: 6%;
    width: 42%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 12px 28px rgba(236, 72, 153, 0.28));
    transform: rotate(-12deg);
    transform-origin: center;
    animation: asVizFloat 6s ease-in-out infinite;
    animation-delay: -2s;
    z-index: 3;
    pointer-events: none;
}

/* Стеклянные карточки — парят вокруг */
.as-viz-hero__card {
    position: absolute;
    width: 24%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 8px 20px rgba(124, 92, 255, 0.15));
    animation: asVizFloat 6.5s ease-in-out infinite;
    z-index: 2;
    pointer-events: none;
}
.as-viz-hero__card--sofa {
    top: 2%;
    left: -2%;
    animation-delay: -0.5s;
}
.as-viz-hero__card--lamp {
    top: 8%;
    right: -4%;
    animation-delay: -2s;
}
.as-viz-hero__card--image {
    bottom: 4%;
    right: 2%;
    animation-delay: -3.5s;
}

@keyframes asVizFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

/* Палочка не двигается, чтобы не «дёргалась» вместе с float */
.as-viz-hero__wand {
    animation: asVizFloatWand 8s ease-in-out infinite;
}
@keyframes asVizFloatWand {
    0%, 100% { transform: rotate(-12deg) translateY(0); }
    50%      { transform: rotate(-12deg) translateY(-6px); }
}

@media (prefers-reduced-motion: reduce) {
    .as-viz-hero__laptop,
    .as-viz-hero__wand,
    .as-viz-hero__card { animation: none; }
}

/* Заголовок */
.as-viz-hero-title {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 32px;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: #0E0E14;
    margin: 0;
    max-width: 400px;
}

/* Подзаголовок */
.as-viz-hero-sub {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.55;
    color: #6B6B7B;
    max-width: 340px;
    margin: 0;
}

/* 3 фичи — те же стили, что в Подборе, но с max-width */
.as-features--viz {
    width: 100%;
    max-width: 340px;
    margin: 8px 0 0;
}

/* Адаптив */
@media (max-width: 1199px) {
    .as-pick-right--viz {
        padding: 16px 0 0;
    }
    .as-viz-hero {
        max-width: 340px;
    }
    .as-viz-hero-title {
        font-size: 26px;
    }
}
@media (max-width: 599px) {
    .as-viz-hero {
        max-width: 280px;
    }
    .as-viz-hero-title {
        font-size: 22px;
    }
    .as-viz-hero-sub {
        font-size: 13px;
    }
}

/* ========================================================================
   Волна 8.4 — секция «Твои проекты здесь» (карусель До/После)
   ======================================================================== */

.as-projects {
    margin-top: 48px;
    padding: 28px 24px 32px;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 24px;
    box-shadow: 0 8px 32px rgba(138, 43, 226, 0.1);
}

.as-projects__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.as-projects__title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: "Playfair Display", Georgia, serif;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #0E0E14;
    margin: 0;
}
.as-projects__icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
}
.as-projects__sub {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 13px;
    color: #6B6B7B;
    margin: 6px 0 0;
}

.as-projects__nav {
    display: inline-flex;
    gap: 8px;
}
.as-projects__nav-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.8);
    color: #7C5CFF;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .15s ease;
}
.as-projects__nav-btn:hover:not(:disabled) {
    background: #fff;
    border-color: #A855F7;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(168, 85, 247, 0.2);
}
.as-projects__nav-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}
.as-projects__nav-btn svg {
    width: 18px;
    height: 18px;
}

.as-projects__track {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 4px;
    padding: 4px 4px 16px;
    -webkit-overflow-scrolling: touch;
}
.as-projects__track::-webkit-scrollbar {
    height: 6px;
}
.as-projects__track::-webkit-scrollbar-thumb {
    background: #D6D2E8;
    border-radius: 999px;
}

.as-project-card {
    flex: 0 0 400px;
    scroll-snap-align: start;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(124, 92, 255, 0.08);
    transition: transform .2s, box-shadow .2s;
    display: flex;
    flex-direction: column;
}
.as-project-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(124, 92, 255, 0.15);
}

@media (max-width: 899px) {
    .as-project-card { flex: 0 0 320px; }
}
@media (max-width: 599px) {
    .as-project-card { flex: 0 0 280px; }
}

.as-project-card__images {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 4px;
}
.as-project-card__img-wrap {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 16px;
    overflow: hidden;
    background: #F7F7FB;
}
.as-project-card__img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.as-project-card__badge {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 4px 10px;
    border-radius: 999px;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 2;
}
.as-project-card__badge--before {
    background: rgba(30, 30, 40, 0.75);
}
.as-project-card__badge--after {
    background: rgba(124, 92, 255, 0.85);
}

.as-project-card__body {
    padding: 16px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.as-project-card__title {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #0E0E14;
}
.as-project-card__title span {
    color: #A0A0B0;
    margin: 0 4px;
}
.as-project-card__tags {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 12px;
    color: #6B6B7B;
    line-height: 1.4;
}
.as-project-card__tags span {
    color: #A0A0B0;
    margin: 0 4px;
}

.as-project-card__cta {
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 18px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #A855F7 0%, #EC4899 100%);
    color: #fff;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: transform .15s, box-shadow .15s;
    box-shadow: 0 6px 16px rgba(168, 85, 247, 0.25);
    align-self: flex-start;
}
.as-project-card__cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(168, 85, 247, 0.4);
}
.as-project-card__cta img {
    width: 14px;
    height: 14px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

@media (max-width: 899px) {
    .as-projects {
        padding: 20px 16px 24px;
        margin-top: 32px;
    }
    .as-projects__title {
        font-size: 22px;
    }
}
@media (max-width: 599px) {
    .as-projects__head {
        align-items: flex-start;
    }
    .as-projects__nav {
        width: 100%;
        justify-content: flex-end;
    }
}

/* ========================================================================
   Волна 9.2 — режим «Улучшить вайб»: layout + форма (правая колонка пустая)
   ======================================================================== */

/* 2-колоночный layout вайба (правая колонка заполнится в 9.3) */
.as-pick-layout--vibe {
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: 32px;
}
body[data-mode="vibe"] .as-pick-layout--vibe {
    display: grid;
}
@media (max-width: 1199px) {
    .as-pick-layout--vibe {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .as-pick-right--vibe {
        position: static;
        min-height: 0;
    }
}

/* Заголовок вайба */
.as-vibe-head {
    margin-bottom: 20px;
}
.as-vibe-head__title {
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(28px, 2.6vw, 36px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #0E0E14;
    margin: 0 0 8px;
}
.as-vibe-head__sub {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #6B6B7B;
    max-width: 560px;
    margin: 0;
}

/* Сетка формы: фото слева, поля справа */
.as-vibe-row {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}
@media (max-width: 899px) {
    .as-vibe-row {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* Левая колонка — загрузка фото (orb + effects) */
.as-vibe-photo { display: flex; flex-direction: column; gap: 10px; }
.as-vibe-photo__label,
.as-vibe-field__label {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #6B6B7B;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.as-vibe-photo__zone {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.as-vibe-upload {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px 16px;
    border: 2px dashed rgba(168, 85, 247, 0.35);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    cursor: pointer;
    overflow: hidden;
    text-align: center;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.as-vibe-upload:hover {
    border-color: #A855F7;
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0 8px 24px rgba(168, 85, 247, 0.15);
}
.as-vibe-upload__orb {
    position: relative;
    z-index: 2;
    width: 64px;
    height: 64px;
    object-fit: contain;
}
.as-vibe-upload__title {
    position: relative;
    z-index: 2;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #0E0E14;
}
.as-vibe-upload__sub {
    position: relative;
    z-index: 2;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 12px;
    line-height: 1.5;
    color: #6B6B7B;
    max-width: 200px;
}

/* Правая колонка — вайбы, textarea, бюджет */
.as-vibe-fields {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}
.as-vibe-field {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 6 карточек вайбов */
.as-vibe-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.as-vibe-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 10px;
    border: 1.5px solid rgba(255, 255, 255, 0.8);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    cursor: pointer;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #3A3A4A;
    text-align: center;
    transition: border-color .15s, box-shadow .15s, transform .15s, background .15s;
}
.as-vibe-card:hover {
    transform: translateY(-2px);
    border-color: #C4B5FD;
    box-shadow: 0 8px 20px rgba(168, 85, 247, 0.12);
}
.as-vibe-card img {
    width: 48px;
    height: 48px;
    object-fit: contain;
}
.as-vibe-card.is-active {
    border-color: #A855F7;
    background: linear-gradient(135deg, rgba(237, 232, 255, 0.9) 0%, rgba(252, 231, 243, 0.9) 100%);
    box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.14);
    color: #0E0E14;
}
@media (max-width: 599px) {
    .as-vibe-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 375px) {
    .as-vibe-cards { grid-template-columns: 1fr; }
}

/* ── W14b: «Готовые пресеты» в режиме «Улучшить вайб» ─────────────── */
.as-vibe-field[hidden] { display: none; }

.as-preset-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.as-preset-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    padding: 14px 10px;
    border: 1.5px solid rgba(255, 255, 255, 0.8);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    cursor: pointer;
    font-family: "Inter", system-ui, sans-serif;
    color: #3A3A4A;
    text-align: center;
    transition: border-color .15s, box-shadow .15s, transform .15s, background .15s;
}
.as-preset-card:hover {
    transform: translateY(-2px);
    border-color: #C4B5FD;
    box-shadow: 0 8px 20px rgba(168, 85, 247, 0.12);
}
.as-preset-card.is-active {
    border-color: #A855F7;
    background: linear-gradient(135deg, rgba(237, 232, 255, 0.9) 0%, rgba(252, 231, 243, 0.9) 100%);
    box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.14);
    color: #0E0E14;
}
.as-preset-card__emoji { font-size: 26px; line-height: 1; }
.as-preset-card__name { font-size: 12px; font-weight: 700; }
.as-preset-card__tagline {
    font-size: 10.5px;
    font-weight: 500;
    line-height: 1.3;
    color: #6B6B7B;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.as-preset-card.is-active .as-preset-card__tagline { color: #4B3A6B; }

.as-preset-refine[hidden] { display: none; }
.as-preset-refine {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
    padding: 10px 12px;
    border: 1.5px solid rgba(255, 255, 255, 0.8);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    cursor: pointer;
}
.as-preset-refine__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.as-preset-refine__switch {
    flex: 0 0 auto;
    position: relative;
    width: 38px;
    height: 22px;
    border-radius: 999px;
    background: #D8D8E4;
    transition: background .15s;
}
.as-preset-refine__switch::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
    transition: transform .15s;
}
.as-preset-refine__input:checked + .as-preset-refine__switch {
    background: linear-gradient(135deg, #A855F7 0%, #EC4899 100%);
}
.as-preset-refine__input:checked + .as-preset-refine__switch::after { transform: translateX(16px); }
.as-preset-refine__input:focus-visible + .as-preset-refine__switch {
    box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.25);
}
.as-preset-refine__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 12.5px;
    font-weight: 600;
    color: #3A3A4A;
}
.as-preset-refine__sub { font-size: 11px; font-weight: 500; color: #6B6B7B; }

@media (max-width: 599px) {
    .as-preset-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 375px) {
    .as-preset-cards { grid-template-columns: 1fr; }
}

/* Textarea с искрой */
.as-vibe-textarea-wrap {
    position: relative;
}
.as-vibe-textarea-wrap .as-question-input {
    padding-right: 48px;
}
.as-vibe-textarea-sparkle {
    position: absolute;
    bottom: 14px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.as-vibe-textarea-sparkle img {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

/* Слайдер бюджета вайба — переиспользует .as-budget-slider */
.as-budget-slider--vibe { margin: 4px 0; }

/* Щит-подпись под кнопкой */
.as-vibe-shield {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(237, 232, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.as-vibe-shield__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: #A855F7;
    flex-shrink: 0;
    margin-top: 1px;
}
.as-vibe-shield__icon svg {
    width: 16px;
    height: 16px;
}
.as-vibe-shield__text {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 12px;
    line-height: 1.55;
    color: #6B6B7B;
}

/* Правая колонка вайба */
.as-pick-right--vibe {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    padding: 8px 0;
}

/* ========================================================================
   Волна 9.3 — hero-композиция в правой колонке «Улучшить вайб»
   ======================================================================== */

/* Hero-композиция — слоистый блок */
.as-vibe-hero {
    position: relative;
    width: 100%;
    max-width: 480px;
    aspect-ratio: 1 / 1;
    margin-bottom: 4px;
}

/* Фоновые эффекты — звёздная пыль */
.as-vibe-hero__effects {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    opacity: 0.75;
    z-index: 0;
    animation: asVibePulse 8s ease-in-out infinite;
}
@keyframes asVibePulse {
    0%, 100% { opacity: 0.55; transform: scale(1); }
    50%      { opacity: 0.85; transform: scale(1.03); }
}

/* Диско-шар — центральный объект */
.as-vibe-hero__disco {
    position: absolute;
    top: 8%;
    left: 50%;
    transform: translateX(-50%);
    width: 72%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 20px 48px rgba(168, 85, 247, 0.35));
    animation: asVibeFloat 7s ease-in-out infinite;
    z-index: 2;
}

/* Полароиды — вокруг */
.as-vibe-hero__polaroid {
    position: absolute;
    width: 28%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 10px 24px rgba(124, 92, 255, 0.18));
    animation: asVibeFloat 6.5s ease-in-out infinite;
    z-index: 3;
    pointer-events: none;
}

/* Диван — верхний левый, наклон влево */
.as-vibe-hero__polaroid--sofa {
    top: 2%;
    left: -4%;
    transform: rotate(-9deg);
    animation-delay: -0.5s;
}
/* Лампа — верхний правый, наклон вправо */
.as-vibe-hero__polaroid--lamp {
    top: 6%;
    right: -4%;
    transform: rotate(7deg);
    animation-delay: -2s;
}
/* Растение — нижний левый */
.as-vibe-hero__polaroid--plant {
    bottom: 4%;
    left: -2%;
    transform: rotate(-6deg);
    animation-delay: -3.5s;
}
/* Палитра — нижний правый */
.as-vibe-hero__polaroid--palette {
    bottom: 6%;
    right: -2%;
    transform: rotate(8deg);
    animation-delay: -5s;
}

@keyframes asVibeFloat {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(-8px); }
}

/* Для полароидов — анимация с учётом rotate */
.as-vibe-hero__polaroid--sofa    { animation: asVibeFloatSofa 6.5s ease-in-out infinite; animation-delay: -0.5s; }
.as-vibe-hero__polaroid--lamp    { animation: asVibeFloatLamp 7s ease-in-out infinite; animation-delay: -2s; }
.as-vibe-hero__polaroid--plant   { animation: asVibeFloatPlant 7.5s ease-in-out infinite; animation-delay: -3.5s; }
.as-vibe-hero__polaroid--palette { animation: asVibeFloatPalette 6.8s ease-in-out infinite; animation-delay: -5s; }

@keyframes asVibeFloatSofa {
    0%, 100% { transform: rotate(-9deg) translateY(0); }
    50%      { transform: rotate(-9deg) translateY(-8px); }
}
@keyframes asVibeFloatLamp {
    0%, 100% { transform: rotate(7deg) translateY(0); }
    50%      { transform: rotate(7deg) translateY(-8px); }
}
@keyframes asVibeFloatPlant {
    0%, 100% { transform: rotate(-6deg) translateY(0); }
    50%      { transform: rotate(-6deg) translateY(-8px); }
}
@keyframes asVibeFloatPalette {
    0%, 100% { transform: rotate(8deg) translateY(0); }
    50%      { transform: rotate(8deg) translateY(-8px); }
}

@media (prefers-reduced-motion: reduce) {
    .as-vibe-hero__disco,
    .as-vibe-hero__polaroid,
    .as-vibe-hero__effects { animation: none; }
}

/* Заголовок */
.as-vibe-hero-title {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 36px;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: #0E0E14;
    margin: 0;
    max-width: 400px;
}

/* Подзаголовок */
.as-vibe-hero-sub {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.55;
    color: #6B6B7B;
    max-width: 360px;
    margin: 0;
}

/* 4 фичи — стеклянные таблетки */
.as-vibe-features {
    list-style: none;
    padding: 0;
    margin: 12px 0 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 360px;
    text-align: left;
}

.as-vibe-feature {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(138, 43, 226, 0.08);
    transition: transform .15s ease, box-shadow .15s ease;
}
.as-vibe-feature:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(168, 85, 247, 0.12);
}

.as-vibe-feature__icon {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: linear-gradient(135deg, #A855F7 0%, #EC4899 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(168, 85, 247, 0.25);
}
.as-vibe-feature__icon svg {
    width: 16px;
    height: 16px;
    color: #fff;
}

.as-vibe-feature__text {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #0E0E14;
    line-height: 1.35;
}

/* Адаптив */
@media (max-width: 1199px) {
    .as-pick-right--vibe { padding: 16px 0 0; }
    .as-vibe-hero { max-width: 360px; }
    .as-vibe-hero-title { font-size: 28px; }
    .as-vibe-hero-sub { font-size: 13px; }
}
@media (max-width: 599px) {
    .as-vibe-hero { max-width: 300px; }
    .as-vibe-hero-title { font-size: 22px; }
    .as-vibe-features { max-width: 100%; }
}

/* ========================================================================
   Волна 9.4 — секция «Твой вайб здесь» (карусель До/После + trend-плашки)
   ======================================================================== */

/* Секция «Твой вайб здесь» */
.as-vibe-projects {
    margin-top: 48px;
    padding: 28px 24px 32px;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 24px;
    box-shadow: 0 8px 32px rgba(138, 43, 226, 0.1);
}

/* Шапка: слева заголовок + подпись, справа trend-плашки */
.as-vibe-projects__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.as-vibe-projects__title-wrap { flex: 1; min-width: 240px; }

.as-vibe-projects__title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: "Playfair Display", Georgia, serif;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #0E0E14;
    margin: 0;
}
.as-vibe-projects__icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
}
.as-vibe-projects__sub {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 13px;
    color: #6B6B7B;
    margin: 6px 0 0;
}

/* Trend-плашки — 3 штуки */
.as-trend-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-self: flex-start;
}
.as-trend-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    background: rgba(237, 232, 255, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 999px;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 11.5px;
    font-weight: 500;
    color: #6B6B7B;
    white-space: nowrap;
}
.as-trend-pill img {
    width: 12px;
    height: 12px;
    object-fit: contain;
}

/* Стрелки */
.as-vibe-projects__nav {
    display: inline-flex;
    gap: 8px;
    margin-left: auto;
    margin-bottom: 12px;
}

/* Трек */
.as-vibe-projects__track {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 4px;
    padding: 4px 4px 16px;
    -webkit-overflow-scrolling: touch;
}
.as-vibe-projects__track::-webkit-scrollbar {
    height: 6px;
}
.as-vibe-projects__track::-webkit-scrollbar-thumb {
    background: #D6D2E8;
    border-radius: 999px;
}

/* Адаптив */
@media (max-width: 899px) {
    .as-vibe-projects {
        padding: 20px 16px 24px;
        margin-top: 32px;
    }
    .as-vibe-projects__title {
        font-size: 22px;
    }
    .as-vibe-projects__head {
        flex-direction: column;
        align-items: stretch;
    }
    .as-trend-pills {
        align-self: stretch;
    }
    .as-vibe-projects__nav {
        margin-left: 0;
        align-self: flex-end;
    }
}
@media (max-width: 599px) {
    .as-trend-pill {
        font-size: 10.5px;
        padding: 5px 10px;
    }
}

/* ========================================================================
   Волна 9.7 — финальная полировка «Улучшить вайб»
   ======================================================================== */

/* ── Правка 1: большая upload-зона со свечением и орбом ── */
.as-vibe-upload {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 32px 24px;
    min-height: 440px;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow:
        0 0 0 2px rgba(168, 85, 247, 0.15),
        0 0 40px rgba(168, 85, 247, 0.28);
    overflow: hidden;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: box-shadow .25s ease, transform .2s ease;
    text-align: center;
}
.as-vibe-upload:hover {
    transform: translateY(-2px);
    box-shadow:
        0 0 0 2px rgba(168, 85, 247, 0.35),
        0 0 60px rgba(168, 85, 247, 0.5);
}
.as-vibe-upload__bg {
    position: absolute;
    inset: 0;
    background: url('/static/assets/aesthetics/card-for-vibe.png') center/cover no-repeat;
    z-index: 0;
    pointer-events: none;
}
.as-vibe-upload__overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(168, 85, 247, 0.18), rgba(217, 70, 239, 0.12) 70%);
    z-index: 0;
    pointer-events: none;
}
.as-vibe-upload__orb {
    position: relative;
    z-index: 1;
    width: 140px;
    height: 140px;
    object-fit: contain;
    filter: drop-shadow(0 12px 32px rgba(168, 85, 247, 0.35));
    animation: asVibeOrbFloat 5s ease-in-out infinite;
}
@keyframes asVibeOrbFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) {
    .as-vibe-upload__orb { animation: none; }
}
.as-vibe-upload__title {
    position: relative;
    z-index: 1;
    font-family: "Playfair Display", Georgia, serif;
    font-size: 20px;
    font-weight: 700;
    color: #0E0E14;
    margin-top: 8px;
}
.as-vibe-upload__sub {
    position: relative;
    z-index: 1;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 13px;
    color: #6B6B7B;
    line-height: 1.4;
    max-width: 240px;
    opacity: 0.9;
}
@media (min-width: 900px) {
    .as-vibe-row { grid-template-columns: 340px minmax(0, 1fr); }
}

/* ── Правка 2: цветные градиенты карточек вайбов ── */
.as-vibe-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 16px 12px;
    min-height: 120px;
    border-radius: 20px;
    border: 2px solid rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: transform .2s, box-shadow .2s;
    text-align: center;
    font-family: "Inter", system-ui, sans-serif;
    color: #0E0E14;
    box-shadow: 0 4px 16px rgba(138, 43, 226, 0.06);
    position: relative;
    overflow: hidden;
}
.as-vibe-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(168, 85, 247, 0.18);
}
.as-vibe-card img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    transition: transform .15s;
}
.as-vibe-card:hover img { transform: scale(1.08); }
.as-vibe-card__name {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
}
.as-vibe-card__sub {
    font-size: 11px;
    font-weight: 500;
    opacity: 0.65;
}

.as-vibe-card--clean {
    background: linear-gradient(135deg, #E8F5E9 0%, #C8E6C9 100%);
}
.as-vibe-card--y2k {
    background: linear-gradient(135deg, #A855F7 0%, #EC4899 100%);
    color: #fff;
}
.as-vibe-card--y2k .as-vibe-card__sub { opacity: 0.85; }
.as-vibe-card--cozy {
    background: linear-gradient(135deg, #F5E6D3 0%, #E8D4BE 100%);
}
.as-vibe-card--cyberpunk {
    background: linear-gradient(135deg, #1E1B4B 0%, #4C1D95 100%);
    color: #fff;
}
.as-vibe-card--cyberpunk .as-vibe-card__sub { opacity: 0.75; }
.as-vibe-card--dark {
    background: linear-gradient(135deg, #3F3A33 0%, #5B4A42 100%);
    color: #fff;
}
.as-vibe-card--dark .as-vibe-card__sub { opacity: 0.75; }
.as-vibe-card--tiktok {
    background: linear-gradient(135deg, #FCE7F3 0%, #FBCFE8 100%);
}

.as-vibe-card.is-active {
    border: 2px solid transparent;
    box-shadow:
        0 0 0 4px rgba(168, 85, 247, 0.22),
        0 10px 28px rgba(168, 85, 247, 0.28);
    transform: translateY(-2px);
}
.as-vibe-card--clean.is-active {
    background: linear-gradient(#E8F5E9, #C8E6C9) padding-box, linear-gradient(135deg, #A855F7 0%, #EC4899 100%) border-box;
}
.as-vibe-card--y2k.is-active {
    background: linear-gradient(135deg, #A855F7 0%, #EC4899 100%) padding-box, linear-gradient(135deg, #A855F7 0%, #EC4899 100%) border-box;
}
.as-vibe-card--cozy.is-active {
    background: linear-gradient(#F5E6D3, #E8D4BE) padding-box, linear-gradient(135deg, #A855F7 0%, #EC4899 100%) border-box;
}
.as-vibe-card--cyberpunk.is-active {
    background: linear-gradient(135deg, #1E1B4B 0%, #4C1D95 100%) padding-box, linear-gradient(135deg, #A855F7 0%, #EC4899 100%) border-box;
}
.as-vibe-card--dark.is-active {
    background: linear-gradient(135deg, #3F3A33 0%, #5B4A42 100%) padding-box, linear-gradient(135deg, #A855F7 0%, #EC4899 100%) border-box;
}
.as-vibe-card--tiktok.is-active {
    background: linear-gradient(135deg, #FCE7F3 0%, #FBCFE8 100%) padding-box, linear-gradient(135deg, #A855F7 0%, #EC4899 100%) border-box;
}

/* ── Правка 3: textarea и слайдер + кнопка ── */
#vibeInput.as-question-input {
    padding: 16px 44px 16px 18px;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.5;
    resize: vertical;
    min-height: 110px;
}
#vibeInput.as-question-input:focus {
    border-color: #A855F7;
    box-shadow: 0 0 0 4px rgba(168, 85, 247, 0.12);
}
.as-vibe-textarea-sparkle {
    position: absolute;
    right: 14px;
    bottom: 12px;
    pointer-events: none;
}
#vibeBtn.as-submit-btn {
    box-shadow: 0 8px 24px rgba(168, 85, 247, 0.4);
}
#vibeBtn.as-submit-btn:hover {
    box-shadow: 0 12px 32px rgba(168, 85, 247, 0.5);
}

/* ── Правка 4: hero крупнее ── */
.as-vibe-hero {
    max-width: 560px;
}
.as-vibe-hero__disco {
    width: 78%;
}
.as-vibe-hero__polaroid {
    width: 30%;
}
.as-pick-layout--vibe {
    grid-template-columns: minmax(0, 1fr) 460px;
}
@media (max-width: 1199px) {
    .as-pick-layout--vibe { grid-template-columns: 1fr; }
}

/* ── Правка 5: таблетки-фичи ── */
.as-vibe-feature {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 16px;
    padding: 14px 18px;
    gap: 14px;
    box-shadow: 0 6px 20px rgba(138, 43, 226, 0.08);
}
.as-vibe-feature__icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #A855F7 0%, #EC4899 100%);
    box-shadow: 0 4px 14px rgba(168, 85, 247, 0.3);
}

/* ── Правка 6: карусель «Твой вайб здесь» — стекло ── */
.as-vibe-projects {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 24px;
    box-shadow: 0 8px 32px rgba(138, 43, 226, 0.08);
}
.as-project-card {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 20px;
    box-shadow: 0 6px 24px rgba(124, 92, 255, 0.08);
}
.as-project-card__cta {
    background: linear-gradient(135deg, #A855F7 0%, #EC4899 100%);
    color: #fff;
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(168, 85, 247, 0.25);
}
.as-trend-pill {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 999px;
    box-shadow: 0 2px 10px rgba(124, 92, 255, 0.06);
}

/* ── Правка 7: общие отступы ── */
.as-pick-left { gap: 24px; }
.as-form-card {
    gap: 24px;
    padding: 28px 26px;
    border-radius: 24px;
}

/* ── Фикс: тёмные карточки — белый текст, когда активны ── */
.as-vibe-card--y2k.is-active,
.as-vibe-card--cyberpunk.is-active,
.as-vibe-card--dark.is-active {
    color: #ffffff;
}

/* ========================================================================
   Волна 9.8 — расширить «Улучшить вайб» + читаемость подписи под орбом
   ======================================================================== */

/* ── Правка 1: форма на всю доступную ширину ── */
body[data-mode="vibe"] .container {
    max-width: 1720px;
    width: 100%;
    padding-left: 32px;
    padding-right: 32px;
    margin-left: auto;
    margin-right: auto;
}
body[data-mode="vibe"] .as-form-card {
    max-width: none;
    width: 100%;
}
.as-pick-layout--vibe {
    grid-template-columns: minmax(0, 1fr) 460px;
    gap: 40px;
}
@media (min-width: 1200px) {
    .as-vibe-row {
        grid-template-columns: 400px minmax(0, 1fr);
        gap: 32px;
    }
}

/* ── Правка 2: читаемость подписи и заголовка под орбом ── */
.as-vibe-upload__title {
    color: #ffffff;
    text-shadow:
        0 1px 4px rgba(20, 10, 60, 0.55),
        0 2px 12px rgba(20, 10, 60, 0.35);
}
.as-vibe-upload__sub {
    max-width: 260px;
    color: #ffffff;
    text-shadow:
        0 1px 3px rgba(20, 10, 60, 0.5),
        0 2px 8px rgba(20, 10, 60, 0.35);
    font-weight: 500;
    opacity: 1;
}
.as-vibe-upload::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 55%;
    background: linear-gradient(180deg, transparent 0%, rgba(20, 10, 60, 0.35) 100%);
    z-index: 0;
    pointer-events: none;
    border-radius: 0 0 24px 24px;
}
/* ── W23-polish-vibe: переключатель «По стилю» / «По референсу» ────── */
.as-vibe-source {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 16px;
}
.as-vibe-mode {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border-radius: 999px;
    border: 1px solid #E8E6F0;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(124, 92, 255, 0.05);
}
.as-vibe-mode__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: #6B6B7B;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: all .15s ease;
}
.as-vibe-mode__btn:hover { color: #0E0E14; }
.as-vibe-mode__btn.is-active {
    background: linear-gradient(135deg, #7C5CFF 0%, #A855F7 50%, #EC4899 100%);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(168, 85, 247, 0.35);
}
.as-vibe-mode__btn:focus-visible {
    outline: 2px solid #7C5CFF;
    outline-offset: 2px;
}
.as-vibe-photo[hidden] { display: none; }
.as-vibe-upload--ref {
    min-height: 200px;
    padding: 20px 16px;
    gap: 8px;
}
.as-vibe-upload--ref .as-vibe-upload__orb {
    width: 72px;
    height: 72px;
}
.as-vibe-upload--ref .as-vibe-upload__title { font-size: 16px; }
.as-vibe-ref-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    padding: 6px 0;
    border: none;
    background: transparent;
    color: #8B8B9B;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 12px;
    font-weight: 500;
    text-align: left;
    cursor: not-allowed;
}
.as-vibe-ref-link svg { flex: 0 0 auto; }
.as-vibe-refnote {
    padding: 12px 14px;
    border-radius: 14px;
    border: 1.5px solid rgba(168, 85, 247, 0.25);
    background: rgba(237, 232, 255, 0.55);
    font-family: "Inter", system-ui, sans-serif;
    font-size: 12.5px;
    line-height: 1.45;
    color: #4B3A6B;
}
@media (max-width: 599px) {
    .as-vibe-source { justify-content: stretch; }
    .as-vibe-mode { width: 100%; }
    .as-vibe-mode__btn { flex: 1; }
}
/* Фикс адаптива: на ≤1199px — одна колонка (перебиваем 9.8 grid) */
@media (max-width: 1199px) {
    .as-pick-layout--vibe {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

/* ========================================================================
   Волна 10.2 — панель «Примерка»: 2-колоночный layout + форма
   ======================================================================== */

.as-pick-layout--tryon {
    grid-template-columns: minmax(0, 1fr) 460px;
    gap: 40px;
}
body[data-mode="tryon"] .as-pick-layout--tryon {
    display: grid;
}
@media (max-width: 1199px) {
    .as-pick-layout--tryon { grid-template-columns: 1fr; gap: 24px; }
    .as-pick-right--tryon { position: static; min-height: 0; }
}

.as-tryon-head { margin-bottom: 20px; }
.as-tryon-head__title {
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(28px, 2.6vw, 36px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #0E0E14;
    margin: 0 0 8px;
}
.as-tryon-head__sub {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #6B6B7B;
    max-width: 560px;
    margin: 0;
}

/* Сетка формы: фото слева (большая зона), поля справа */
.as-tryon-row {
    display: grid;
    grid-template-columns: 400px minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}
@media (max-width: 899px) {
    .as-tryon-row { grid-template-columns: 1fr; gap: 20px; }
}

/* Левая колонка: 2 зоны загрузки стеком */
.as-tryon-photos {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

/* Большая upload-зона */
.as-tryon-upload {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px 20px;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow:
        0 0 0 2px rgba(168, 85, 247, 0.15),
        0 0 40px rgba(168, 85, 247, 0.25);
    overflow: hidden;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: box-shadow .25s ease, transform .2s ease;
    text-align: center;
}
.as-tryon-upload:hover {
    transform: translateY(-2px);
    box-shadow:
        0 0 0 2px rgba(168, 85, 247, 0.35),
        0 0 60px rgba(168, 85, 247, 0.45);
}

.as-tryon-upload--person { min-height: 440px; }
.as-tryon-upload--garment {
    min-height: 160px;
    padding: 18px 16px;
}

/* Фон у большой зоны — фото примерочной */
.as-tryon-upload--person .as-tryon-upload__bg {
    position: absolute;
    inset: 0;
    background: url('/static/assets/aesthetics/tryon/upload-bg.png')
                center/cover no-repeat;
    z-index: 0;
    pointer-events: none;
}
.as-tryon-upload--person .as-tryon-upload__overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at center,
            rgba(168, 85, 247, 0.20),
            rgba(217, 70, 239, 0.14) 70%);
    z-index: 0;
    pointer-events: none;
}

/* Орб — у большой зоны */
.as-tryon-upload__orb {
    position: relative;
    z-index: 1;
    width: 120px;
    height: 120px;
    object-fit: contain;
    filter: drop-shadow(0 12px 32px rgba(168, 85, 247, 0.35));
    animation: asVibeOrbFloat 5s ease-in-out infinite;
}

/* Иконка для маленькой зоны garment */
.as-tryon-upload__garment-icon {
    position: relative;
    z-index: 1;
    width: 56px;
    height: 56px;
    object-fit: contain;
    filter: drop-shadow(0 8px 20px rgba(168, 85, 247, 0.25));
}

.as-tryon-upload__title {
    position: relative;
    z-index: 1;
    font-family: "Playfair Display", Georgia, serif;
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    text-shadow:
        0 1px 4px rgba(20, 10, 60, 0.55),
        0 2px 12px rgba(20, 10, 60, 0.35);
    margin-top: 6px;
    max-width: 260px;
}
.as-tryon-upload__title--small {
    color: #0E0E14;
    font-size: 14px;
    text-shadow: none;
}
.as-tryon-upload__sub {
    position: relative;
    z-index: 1;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 12.5px;
    line-height: 1.4;
    max-width: 260px;
    color: #ffffff;
    text-shadow:
        0 1px 3px rgba(20, 10, 60, 0.5),
        0 2px 8px rgba(20, 10, 60, 0.35);
    font-weight: 500;
}
.as-tryon-upload--garment .as-tryon-upload__sub {
    color: #6B6B7B;
    text-shadow: none;
}

/* Тёмная подложка снизу у большой зоны для читаемости текста */
.as-tryon-upload--person::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 55%;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(20, 10, 60, 0.35) 100%);
    z-index: 0;
    pointer-events: none;
    border-radius: 0 0 24px 24px;
}

/* Правая колонка формы */
.as-tryon-fields {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}
.as-tryon-field {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.as-tryon-field__label {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #6B6B7B;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Сетка карточек стилей 3×2 */
.as-tryon-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
@media (max-width: 899px) {
    .as-tryon-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 499px) {
    .as-tryon-cards { grid-template-columns: 1fr; }
}

/* Карточки стилей — как as-vibe-card, но со своими градиентами */
.as-style-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px 10px;
    min-height: 120px;
    border-radius: 20px;
    border: 2px solid rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: transform .2s, box-shadow .2s;
    text-align: center;
    font-family: "Inter", system-ui, sans-serif;
    color: #0E0E14;
    box-shadow: 0 4px 16px rgba(138, 43, 226, 0.06);
    position: relative;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.as-style-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(168, 85, 247, 0.18);
}
.as-style-card img {
    width: 44px; height: 44px;
    object-fit: contain;
    transition: transform .15s;
}
.as-style-card:hover img { transform: scale(1.08); }
.as-style-card__name {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
}
.as-style-card__sub {
    font-size: 11px;
    font-weight: 500;
    opacity: 0.65;
}

/* Цветные градиенты */
.as-style-card--casual {
    background: linear-gradient(135deg, #DBEAFE 0%, #BFDBFE 100%);
}
.as-style-card--streetwear {
    background: linear-gradient(135deg, #A855F7 0%, #EC4899 100%);
    color: #fff;
}
.as-style-card--streetwear .as-style-card__sub { opacity: 0.85; }
.as-style-card--evening {
    background: linear-gradient(135deg, #F9A8D4 0%, #EC4899 100%);
    color: #fff;
}
.as-style-card--evening .as-style-card__sub { opacity: 0.85; }
.as-style-card--office {
    background: linear-gradient(135deg, #E2E8F0 0%, #CBD5E1 100%);
}
.as-style-card--y2k {
    background: linear-gradient(135deg, #A855F7 0%, #38BDF8 100%);
    color: #fff;
}
.as-style-card--y2k .as-style-card__sub { opacity: 0.85; }
.as-style-card--cozy {
    background: linear-gradient(135deg, #F5E6D3 0%, #E8D4BE 100%);
}

/* Активная — градиентная рамка + свечение (сохраняет свой фон) */
.as-style-card.is-active {
    border: 2px solid transparent;
    box-shadow:
        0 0 0 4px rgba(168, 85, 247, 0.22),
        0 10px 28px rgba(168, 85, 247, 0.28);
    transform: translateY(-2px);
}
.as-style-card--casual.is-active {
    background:
        linear-gradient(#DBEAFE, #BFDBFE) padding-box,
        linear-gradient(135deg, #A855F7 0%, #EC4899 100%) border-box;
}
.as-style-card--streetwear.is-active {
    background:
        linear-gradient(135deg, #A855F7 0%, #EC4899 100%) padding-box,
        linear-gradient(135deg, #A855F7 0%, #EC4899 100%) border-box;
}
.as-style-card--evening.is-active {
    background:
        linear-gradient(135deg, #F9A8D4 0%, #EC4899 100%) padding-box,
        linear-gradient(135deg, #A855F7 0%, #EC4899 100%) border-box;
}
.as-style-card--office.is-active {
    background:
        linear-gradient(#E2E8F0, #CBD5E1) padding-box,
        linear-gradient(135deg, #A855F7 0%, #EC4899 100%) border-box;
}
.as-style-card--y2k.is-active {
    background:
        linear-gradient(135deg, #A855F7 0%, #38BDF8 100%) padding-box,
        linear-gradient(135deg, #A855F7 0%, #EC4899 100%) border-box;
}
.as-style-card--cozy.is-active {
    background:
        linear-gradient(#F5E6D3, #E8D4BE) padding-box,
        linear-gradient(135deg, #A855F7 0%, #EC4899 100%) border-box;
}

/* Textarea со sparkles в углу */
#tryonInput.as-question-input {
    padding: 16px 44px 16px 18px;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.5;
    resize: vertical;
    min-height: 110px;
    width: 100%;
}
#tryonInput.as-question-input:focus {
    border-color: #A855F7;
    box-shadow: 0 0 0 4px rgba(168, 85, 247, 0.12);
}
.as-tryon-textarea-wrap { position: relative; }
.as-tryon-textarea-sparkle {
    position: absolute;
    right: 14px;
    bottom: 12px;
    pointer-events: none;
    opacity: 0.7;
}

/* Слайдер бюджета tryon */
.as-budget-slider--tryon { margin: 4px 0; }

/* Мини-бейджи под кнопкой */
.as-tryon-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
    justify-content: center;
}

/* Кнопка — общий стиль as-submit-btn--wide уже есть */
#tryonBtn.as-submit-btn {
    box-shadow: 0 8px 24px rgba(168, 85, 247, 0.4);
}
#tryonBtn.as-submit-btn:hover {
    box-shadow: 0 12px 32px rgba(168, 85, 247, 0.5);
}

/* ========================================================================
   Волна 10.3 — растяжка «Примерки» + hero-композиция правой колонки
   ======================================================================== */

/* ── Часть A: растяжка страницы «Примерка» — как у Вайба ── */
body[data-mode="tryon"] .container {
    max-width: 1720px;
    width: 100%;
    padding-left: 32px;
    padding-right: 32px;
    margin-left: auto;
    margin-right: auto;
}
body[data-mode="tryon"] #panelTryon {
    max-width: 1720px;
    width: 100%;
    margin: 0 auto;
    padding-left: 32px;
    padding-right: 32px;
}
@media (min-width: 1200px) {
    body[data-mode="tryon"] .as-tryon-row {
        grid-template-columns: 400px minmax(0, 1fr);
        gap: 32px;
    }
}
.as-pick-layout--tryon {
    grid-template-columns: minmax(0, 1fr) 460px;
    gap: 40px;
}
@media (max-width: 1199px) {
    .as-pick-layout--tryon { grid-template-columns: 1fr; gap: 24px; }
}

/* ── Часть C: hero-сцена ── */
.as-pick-right--tryon {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
    padding: 8px 0;
}

/* ── Hero-сцена «Примерки» — единая композиция (Волна 10.6) ── */
.as-tryon-scene {
    position: relative;
    width: 100%;
    max-width: 600px;
    aspect-ratio: 4 / 5;
    margin: 0 auto 20px;
    padding-bottom: 90px;
}

/* 1. Большой glow за всей сценой */
.as-tryon-scene__glow {
    position: absolute;
    inset: 0 0 90px 0;
    background: radial-gradient(circle at 50% 45%,
        rgba(168, 85, 247, 0.32) 0%,
        rgba(236, 72, 153, 0.14) 40%,
        transparent 72%);
    z-index: 0;
    pointer-events: none;
    animation: asTryonGlowPulse 7s ease-in-out infinite;
}
@keyframes asTryonGlowPulse {
    0%, 100% { opacity: 0.85; transform: scale(1); }
    50%      { opacity: 1;    transform: scale(1.04); }
}

/* 2. Стеклянная витрина — большая, по центру, за манекеном */
.as-tryon-scene__glass {
    position: absolute;
    left: 50%;
    top: 45%;
    transform: translate(-50%, -50%);
    width: 72%;
    height: auto;
    object-fit: contain;
    z-index: 2;
    pointer-events: none;
    filter: drop-shadow(0 24px 60px rgba(168, 85, 247, 0.28));
    animation: asTryonGlassFloat 9s ease-in-out infinite;
}
@keyframes asTryonGlassFloat {
    0%, 100% { transform: translate(-50%, -50%) translateY(0); }
    50%      { transform: translate(-50%, -50%) translateY(-6px); }
}

/* 3. Манекен — герой. Внутри стекла, целиком */
.as-tryon-scene__hologram {
    position: absolute;
    left: 50%;
    top: 47%;
    transform: translate(-50%, -50%);
    width: 30%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 20px 44px rgba(168, 85, 247, 0.45));
    animation: asTryonHoloFloat 7s ease-in-out infinite;
    z-index: 3;
}
@keyframes asTryonHoloFloat {
    0%, 100% { transform: translate(-50%, -50%) translateY(0); }
    50%      { transform: translate(-50%, -50%) translateY(-6px); }
}

/* 4. Экспозиция — элементы вокруг витрины */
/* Вешалка — слева, чуть выше середины */
.as-tryon-scene__hanger {
    position: absolute;
    left: -4%;
    top: 20%;
    width: 30%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 10px 24px rgba(124, 92, 255, 0.24));
    animation: asTryonHangerFloat 8s ease-in-out infinite;
    z-index: 4;
}
@keyframes asTryonHangerFloat {
    0%, 100% { transform: translateY(0) rotate(-5deg); }
    50%      { transform: translateY(-6px) rotate(-5deg); }
}

/* Сумка — справа, на уровне груди манекена */
.as-tryon-scene__bag {
    position: absolute;
    right: -2%;
    top: 26%;
    width: 18%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 10px 24px rgba(168, 85, 247, 0.28));
    animation: asTryonFloatA 7s ease-in-out infinite;
    z-index: 4;
}
@keyframes asTryonFloatA {
    0%, 100% { transform: translateY(0) rotate(8deg); }
    50%      { transform: translateY(-8px) rotate(8deg); }
}

/* Кроссовки — слева, в нижней части сцены */
.as-tryon-scene__sneakers {
    position: absolute;
    left: 2%;
    bottom: 24%;
    width: 24%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 10px 24px rgba(168, 85, 247, 0.28));
    animation: asTryonFloatB 6.5s ease-in-out infinite;
    animation-delay: -1.5s;
    z-index: 4;
}
@keyframes asTryonFloatB {
    0%, 100% { transform: translateY(0) rotate(-10deg); }
    50%      { transform: translateY(-8px) rotate(-10deg); }
}

/* Полароид 1 — справа, в нижней части сцены */
.as-tryon-scene__polaroid-1 {
    position: absolute;
    right: 2%;
    bottom: 22%;
    width: 22%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 10px 22px rgba(124, 92, 255, 0.22));
    animation: asTryonFloatC 7s ease-in-out infinite;
    animation-delay: -2s;
    z-index: 4;
}
@keyframes asTryonFloatC {
    0%, 100% { transform: translateY(0) rotate(7deg); }
    50%      { transform: translateY(-8px) rotate(7deg); }
}

/* Полароид 2 — СКРЫТ по умолчанию (композиция без него полнее) */
.as-tryon-scene__polaroid-2 { display: none; }

/* 5. Искры — фоновый слой (под манекеном и стеклом) */
.as-tryon-scene__effects {
    position: absolute;
    left: 50%;
    top: 62%;
    transform: translate(-50%, -50%);
    width: 110%;
    height: auto;
    object-fit: contain;
    z-index: 1;
    pointer-events: none;
    opacity: 0.75;
    animation: asTryonEffectsPulse 7s ease-in-out infinite;
}
@keyframes asTryonEffectsPulse {
    0%, 100% { opacity: 0.6; }
    50%      { opacity: 0.85; }
}

/* 6. Текст — ПОД витриной, не поверх манекена */
.as-tryon-scene__text {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0 12px;
    text-align: center;
    z-index: 5;
}
.as-tryon-scene__title {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #0E0E14;
    margin: 0 0 6px;
}
.as-tryon-scene__subtitle {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 12.5px;
    line-height: 1.5;
    color: #6B6B7B;
    max-width: 360px;
    margin: 0 auto;
}

@media (prefers-reduced-motion: reduce) {
    .as-tryon-scene__glow,
    .as-tryon-scene__glass,
    .as-tryon-scene__hologram,
    .as-tryon-scene__hanger,
    .as-tryon-scene__bag,
    .as-tryon-scene__sneakers,
    .as-tryon-scene__polaroid-1,
    .as-tryon-scene__effects { animation: none; }
}




.as-tryon-features {
    list-style: none;
    padding: 0;
    margin: 12px 0 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 380px;
    text-align: left;
}
.as-tryon-feature {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 16px;
    box-shadow: 0 6px 20px rgba(138, 43, 226, 0.08);
    transition: transform .15s ease, box-shadow .15s ease;
}
.as-tryon-feature:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(168, 85, 247, 0.12);
}
.as-tryon-feature__icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #A855F7 0%, #EC4899 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(168, 85, 247, 0.3);
}
.as-tryon-feature__icon svg {
    width: 16px;
    height: 16px;
    color: #fff;
}
.as-tryon-feature__text {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #0E0E14;
    line-height: 1.35;
}
@media (max-width: 1199px) {
    .as-pick-right--tryon { padding: 16px 0 0; }
    .as-tryon-scene { max-width: 500px; padding-bottom: 80px; }
    .as-tryon-scene__title { font-size: 22px; }
    .as-tryon-scene__subtitle { font-size: 12px; }
}
@media (max-width: 599px) {
    .as-tryon-scene { max-width: 320px; padding-bottom: 70px; }
    .as-tryon-scene__title { font-size: 18px; }
    .as-tryon-scene__subtitle { font-size: 11px; }
    .as-tryon-features { max-width: 100%; }
}

/* ========================================================================
   Волна 10.4 — hero-сцена «Примерки» + секция «Твой образ здесь»
   ======================================================================== */

.as-tryon-projects {
    margin-top: 48px;
    padding: 28px 24px 32px;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 24px;
    box-shadow: 0 8px 32px rgba(138, 43, 226, 0.1);
}
.as-tryon-projects__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.as-tryon-projects__title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: "Playfair Display", Georgia, serif;
    font-size: 26px;
    font-weight: 700;
    color: #0E0E14;
    margin: 0;
}
.as-tryon-projects__icon {
    width: 22px; height: 22px; object-fit: contain;
}
.as-tryon-projects__sub {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 13px;
    color: #6B6B7B;
    margin: 6px 0 0;
}
.as-tryon-projects__nav {
    display: inline-flex;
    gap: 8px;
}
.as-tryon-projects__track {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 4px;
    padding: 4px 4px 16px;
    -webkit-overflow-scrolling: touch;
}
.as-tryon-projects__track::-webkit-scrollbar { height: 6px; }
.as-tryon-projects__track::-webkit-scrollbar-thumb {
    background: #D6D2E8;
    border-radius: 999px;
}

.as-project-card__img-wrap--placeholder {
    background: linear-gradient(135deg, #F1EFFF 0%, #E3DEFF 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}
.as-project-card__placeholder {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 12px;
    color: #7C5CFF;
    opacity: 0.7;
    font-weight: 500;
    text-align: center;
    padding: 0 8px;
}

@media (max-width: 899px) {
    .as-tryon-projects {
        padding: 20px 16px 24px;
        margin-top: 32px;
    }
    .as-tryon-projects__title { font-size: 22px; }
}

/* ========================================================================
   Волна 11.2 — панель «Редизайн»: 2-колоночный layout + форма
   ======================================================================== */

/* Layout редизайна — как у Примерки/Вайба */
.as-pick-layout--redesign {
    grid-template-columns: minmax(0, 1fr) 460px;
    gap: 40px;
}
body[data-mode="redesign"] .as-pick-layout--redesign {
    display: grid;
}
@media (max-width: 1199px) {
    .as-pick-layout--redesign { grid-template-columns: 1fr; gap: 24px; }
    .as-pick-right--redesign { position: static; min-height: 0; }
}

/* Растяжка контейнера */
body[data-mode="redesign"] .container,
body[data-mode="redesign"] #panelRedesign {
    max-width: 1720px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 32px;
    padding-right: 32px;
}

.as-redesign-head { margin-bottom: 20px; }
.as-redesign-head__title {
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(28px, 2.6vw, 36px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #0E0E14;
    margin: 0 0 8px;
}
.as-redesign-head__sub {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #6B6B7B;
    max-width: 600px;
    margin: 0;
}

/* Внутренняя сетка формы: фото слева, поля справа */
.as-redesign-row {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}
@media (max-width: 899px) {
    .as-redesign-row { grid-template-columns: 1fr; gap: 20px; }
}

/* Левая колонка формы: 2 upload-зоны + щит */
.as-redesign-photos {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

/* Upload-зона редизайна */
.as-redesign-upload {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px 18px;
    min-height: 230px;
    border-radius: 24px;
    border: 2px dashed rgba(168, 85, 247, 0.35);
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    cursor: pointer;
    text-align: center;
    transition: box-shadow .25s ease, transform .2s ease,
                background .25s ease, border-color .25s ease;
    overflow: hidden;
}
.as-redesign-upload:hover {
    border-color: #A855F7;
    background: rgba(255, 255, 255, 0.6);
    transform: translateY(-2px);
    box-shadow:
        0 0 0 2px rgba(168, 85, 247, 0.2),
        0 12px 36px rgba(168, 85, 247, 0.18);
}

.as-redesign-upload__orb {
    position: relative;
    z-index: 1;
    width: 100px;
    height: 100px;
    object-fit: contain;
    filter: drop-shadow(0 12px 28px rgba(168, 85, 247, 0.3));
    animation: asVibeOrbFloat 5s ease-in-out infinite;
}
.as-redesign-upload--ref .as-redesign-upload__orb {
    animation-delay: -2s;
}

.as-redesign-upload__title {
    position: relative;
    z-index: 1;
    font-family: "Playfair Display", Georgia, serif;
    font-size: 16px;
    font-weight: 700;
    color: #0E0E14;
    max-width: 260px;
    margin-top: 6px;
}
.as-redesign-upload__sub {
    position: relative;
    z-index: 1;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 12px;
    line-height: 1.4;
    color: #6B6B7B;
    max-width: 260px;
}

/* Щит-подпись */
.as-redesign-shield {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 16px;
    background: rgba(237, 232, 255, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 14px;
}
.as-redesign-shield__icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #EDE8FF;
    color: #7C5CFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}
.as-redesign-shield__icon svg { width: 12px; height: 12px; }
.as-redesign-shield__text {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 12px;
    line-height: 1.5;
    color: #6B6B7B;
}

/* Правая колонка формы */
.as-redesign-fields {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}
.as-redesign-field {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.as-redesign-field__label {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #6B6B7B;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Сетка карточек стилей 4×2 */
.as-redesign-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}
@media (max-width: 1099px) {
    .as-redesign-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
    .as-redesign-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 499px) {
    .as-redesign-cards { grid-template-columns: 1fr; }
}

/* Цветовые градиенты карточек стилей редизайна */

.as-style-card--modern {
    background: linear-gradient(135deg, #F0EDE8 0%, #E0DAD0 100%);
}
.as-style-card--scandi {
    background: linear-gradient(135deg, #E8F5E9 0%, #C8E6C9 100%);
}
.as-style-card--loft {
    background: linear-gradient(135deg, #F5D6B8 0%, #E8B889 100%);
}
.as-style-card--minimalism {
    background: linear-gradient(135deg, #E2E8F0 0%, #CBD5E1 100%);
}
.as-style-card--boho {
    background: linear-gradient(135deg, #F5E6D3 0%, #E8D4BE 100%);
}
.as-style-card--classic {
    background: linear-gradient(135deg, #F5EED8 0%, #E8D9A8 100%);
}
.as-style-card--tech {
    background: linear-gradient(135deg, #4C1D95 0%, #2563EB 100%);
    color: #fff;
}
.as-style-card--tech .as-style-card__sub { opacity: 0.85; }
.as-style-card--fantasy {
    background: linear-gradient(135deg, #A855F7 0%, #EC4899 100%);
    color: #fff;
}
.as-style-card--fantasy .as-style-card__sub { opacity: 0.85; }

/* Активная карточка — градиентная рамка + свечение */
.as-style-card.is-active {
    border: 2px solid transparent;
    box-shadow:
        0 0 0 4px rgba(168, 85, 247, 0.22),
        0 10px 28px rgba(168, 85, 247, 0.28);
    transform: translateY(-2px);
}
.as-style-card--modern.is-active {
    background:
        linear-gradient(#F0EDE8, #E0DAD0) padding-box,
        linear-gradient(135deg, #A855F7 0%, #EC4899 100%) border-box;
}
.as-style-card--scandi.is-active {
    background:
        linear-gradient(#E8F5E9, #C8E6C9) padding-box,
        linear-gradient(135deg, #A855F7 0%, #EC4899 100%) border-box;
}
.as-style-card--loft.is-active {
    background:
        linear-gradient(#F5D6B8, #E8B889) padding-box,
        linear-gradient(135deg, #A855F7 0%, #EC4899 100%) border-box;
}
.as-style-card--minimalism.is-active {
    background:
        linear-gradient(#E2E8F0, #CBD5E1) padding-box,
        linear-gradient(135deg, #A855F7 0%, #EC4899 100%) border-box;
}
.as-style-card--boho.is-active {
    background:
        linear-gradient(#F5E6D3, #E8D4BE) padding-box,
        linear-gradient(135deg, #A855F7 0%, #EC4899 100%) border-box;
}
.as-style-card--classic.is-active {
    background:
        linear-gradient(#F5EED8, #E8D9A8) padding-box,
        linear-gradient(135deg, #A855F7 0%, #EC4899 100%) border-box;
}
.as-style-card--tech.is-active {
    background:
        linear-gradient(135deg, #4C1D95 0%, #2563EB 100%) padding-box,
        linear-gradient(135deg, #A855F7 0%, #EC4899 100%) border-box;
}
.as-style-card--fantasy.is-active {
    background:
        linear-gradient(135deg, #A855F7 0%, #EC4899 100%) padding-box,
        linear-gradient(135deg, #A855F7 0%, #EC4899 100%) border-box;
}

/* Textarea с sparkles */
#redesignInput.as-question-input {
    padding: 16px 44px 16px 18px;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.5;
    resize: vertical;
    min-height: 110px;
    width: 100%;
}
#redesignInput.as-question-input:focus {
    border-color: #A855F7;
    box-shadow: 0 0 0 4px rgba(168, 85, 247, 0.12);
}
.as-redesign-textarea-wrap { position: relative; }
.as-redesign-textarea-sparkle {
    position: absolute;
    right: 14px;
    bottom: 12px;
    pointer-events: none;
    opacity: 0.7;
}

/* ============ W20b: чек-лист «Что можно менять» ============ */

.as-redesign-changes {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.as-redesign-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.as-redesign-preset {
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid rgba(168, 85, 247, 0.28);
    background: rgba(255, 255, 255, 0.55);
    color: #6B6B7B;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, color .15s ease,
                border-color .15s ease, box-shadow .15s ease;
}
.as-redesign-preset:hover {
    border-color: #A855F7;
    color: #7C5CFF;
}
.as-redesign-preset.is-active {
    background: linear-gradient(135deg, #A855F7 0%, #EC4899 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 18px rgba(168, 85, 247, 0.32);
}

.as-redesign-changes__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.as-redesign-change {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.as-redesign-change:hover {
    background: rgba(255, 255, 255, 0.7);
}
.as-redesign-change.is-active {
    border-color: rgba(168, 85, 247, 0.55);
    box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.12);
}
.as-redesign-change__input {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    pointer-events: none;
}
.as-redesign-change__box {
    flex-shrink: 0;
    width: 22px; height: 22px;
    border-radius: 7px;
    border: 2px solid rgba(168, 85, 247, 0.45);
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: background .15s ease, border-color .15s ease;
}
.as-redesign-change__box svg {
    width: 13px; height: 13px;
    opacity: 0;
    transition: opacity .12s ease;
}
.as-redesign-change__input:checked + .as-redesign-change__box {
    background: linear-gradient(135deg, #A855F7 0%, #EC4899 100%);
    border-color: transparent;
}
.as-redesign-change__input:checked + .as-redesign-change__box svg { opacity: 1; }
.as-redesign-change__input:focus-visible + .as-redesign-change__box {
    outline: 2px solid #7C5CFF;
    outline-offset: 2px;
}
.as-redesign-change__text {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #0E0E14;
}
.as-redesign-changes__note {
    margin: 0;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 12px;
    line-height: 1.45;
    color: #B45309;
}
.as-redesign-changes__note[hidden] { display: none; }

/* ============ W20b: бюджет редизайна (слайдер без снапа) ============ */

.as-redesign-price {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.as-redesign-price__head {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
}
.as-redesign-price__value {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #7C5CFF;
}
.as-redesign-price__value.is-empty {
    color: #6B6B7B;
    font-weight: 600;
}
.as-redesign-price__slider-wrap {
    position: relative;
    padding: 4px 0;
}
.as-redesign-price__slider-wrap input[type="range"] {
    position: relative;
    z-index: 2;
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    height: 6px;
    border-radius: 999px;
    outline: none;
    cursor: pointer;
    background: linear-gradient(to right,
        #A855F7 0%,
        #EC4899 var(--p, 0%),
        #E8E6F0 var(--p, 0%),
        #E8E6F0 100%);
}
.as-redesign-price__slider-wrap input[type="range"]:focus-visible {
    outline: 2px solid #7C5CFF;
    outline-offset: 3px;
}
.as-redesign-price__slider-wrap input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #A855F7;
    box-shadow: 0 2px 12px rgba(168, 85, 247, 0.4);
    cursor: pointer;
}
.as-redesign-price__slider-wrap input[type="range"]::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #A855F7;
    box-shadow: 0 2px 12px rgba(168, 85, 247, 0.4);
    cursor: pointer;
}
.as-redesign-price__ticks {
    position: absolute;
    top: 50%;
    left: 14px;
    right: 14px;
    height: 6px;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 1;
}
.as-redesign-price__tick {
    position: absolute;
    top: 50%;
    width: 2px;
    height: 8px;
    background: rgba(124, 92, 255, 0.30);
    border-radius: 1px;
    transform: translate(-50%, -50%);
}
.as-redesign-price__tick:nth-child(1) { left: 0%; }
.as-redesign-price__tick:nth-child(2) { left: 25%; }
.as-redesign-price__tick:nth-child(3) { left: 50%; }
.as-redesign-price__tick:nth-child(4) { left: 75%; }
.as-redesign-price__tick:nth-child(5) { left: 100%; }
.as-redesign-price__scale {
    display: flex;
    justify-content: space-between;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 11px;
    color: #6B6B7B;
}
.as-redesign-price__row {
    display: grid;
    grid-template-columns: minmax(0, 220px);
}
@media (max-width: 599px) {
    .as-redesign-changes__list { grid-template-columns: 1fr; }
    .as-redesign-presets { gap: 6px; }
    .as-redesign-preset { padding: 7px 12px; font-size: 12px; }
    .as-redesign-price__row { grid-template-columns: 1fr; }
}

/* Кнопка */
#redesignBtn.as-submit-btn {
    box-shadow: 0 8px 24px rgba(168, 85, 247, 0.4);
}
#redesignBtn.as-submit-btn:hover {
    box-shadow: 0 12px 32px rgba(168, 85, 247, 0.5);
}

/* ========================================================================
   Волна 11.3 — hero-композиция «Редизайна» + фикс tooltip слайдера
   ======================================================================== */

/* Правая колонка редизайна */
.as-pick-right--redesign {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
    padding: 8px 0;
}

/* Hero-сцена */
.as-redesign-scene {
    position: relative;
    width: 100%;
    max-width: 560px;
    aspect-ratio: 1 / 1;
    margin: 0 auto 20px;
    padding-bottom: 90px;
}

/* Свечение фона */
.as-redesign-scene__glow {
    position: absolute;
    inset: 0 0 90px 0;
    background: radial-gradient(circle at 50% 45%,
        rgba(168, 85, 247, 0.30) 0%,
        rgba(236, 72, 153, 0.13) 40%,
        transparent 72%);
    z-index: 0;
    pointer-events: none;
    animation: asRedesignGlowPulse 7s ease-in-out infinite;
}
@keyframes asRedesignGlowPulse {
    0%, 100% { opacity: 0.85; transform: scale(1); }
    50%      { opacity: 1;    transform: scale(1.04); }
}

/* Изометрическая комната — центральный объект */
.as-redesign-scene__room {
    position: absolute;
    left: 50%;
    top: 46%;
    transform: translate(-50%, -50%);
    width: 78%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 24px 60px rgba(168, 85, 247, 0.32));
    animation: asRedesignRoomFloat 8s ease-in-out infinite;
    z-index: 1;
}
@keyframes asRedesignRoomFloat {
    0%, 100% { transform: translate(-50%, -50%) translateY(0); }
    50%      { transform: translate(-50%, -50%) translateY(-6px); }
}

/* Волшебная палочка — поверх комнаты, снизу-слева */
.as-redesign-scene__wand {
    position: absolute;
    left: -2%;
    bottom: 22%;
    width: 38%;
    height: auto;
    object-fit: contain;
    transform: rotate(-15deg);
    transform-origin: center;
    filter: drop-shadow(0 10px 28px rgba(236, 72, 153, 0.35));
    animation: asRedesignWandFloat 7s ease-in-out infinite;
    z-index: 2;
    pointer-events: none;
}
@keyframes asRedesignWandFloat {
    0%, 100% { transform: rotate(-15deg) translateY(0); }
    50%      { transform: rotate(-15deg) translateY(-8px); }
}

/* Парящие предметы — вокруг сцены */
.as-redesign-scene__floating {
    position: absolute;
    width: 16%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 8px 20px rgba(124, 92, 255, 0.22));
    animation: asRedesignFloat 7s ease-in-out infinite;
    z-index: 3;
    pointer-events: none;
}
@keyframes asRedesignFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-8px) rotate(2deg); }
}

/* Позиции 6 предметов вокруг комнаты — симметрично */
.as-redesign-scene__floating--sofa   { top: 4%;    left: 0%;    width: 20%; animation-delay: -0.5s; }
.as-redesign-scene__floating--lamp   { top: 8%;    right: 0%;   width: 14%; animation-delay: -2s; }
.as-redesign-scene__floating--plant  { top: 42%;   left: -4%;   width: 15%; animation-delay: -3.5s; }
.as-redesign-scene__floating--chair  { bottom: 24%; right: -3%;  width: 17%; animation-delay: -5s; }
.as-redesign-scene__floating--table  { bottom: 22%; left: 6%;    width: 16%; animation-delay: -1.2s; }
.as-redesign-scene__floating--shelf  { bottom: 4%;  right: 8%;   width: 15%; animation-delay: -2.8s; }

/* Искры — под всем, фоновая подсветка */
.as-redesign-scene__effects {
    position: absolute;
    left: 50%;
    top: 55%;
    transform: translate(-50%, -50%);
    width: 105%;
    height: auto;
    object-fit: contain;
    z-index: 0;
    pointer-events: none;
    opacity: 0.75;
    animation: asRedesignEffectsPulse 7s ease-in-out infinite;
}
@keyframes asRedesignEffectsPulse {
    0%, 100% { opacity: 0.6; }
    50%      { opacity: 0.85; }
}

/* Текст внизу сцены */
.as-redesign-scene__text {
    position: absolute;
    left: 0; right: 0;
    bottom: 0;
    padding: 0 12px;
    text-align: center;
    z-index: 4;
}
.as-redesign-scene__title {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #0E0E14;
    margin: 0 0 6px;
}
.as-redesign-scene__subtitle {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 12.5px;
    line-height: 1.5;
    color: #6B6B7B;
    max-width: 380px;
    margin: 0 auto;
}

/* 4 фичи */
.as-redesign-features {
    list-style: none;
    padding: 0;
    margin: 12px 0 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 380px;
    text-align: left;
}
.as-redesign-feature {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 16px;
    box-shadow: 0 6px 20px rgba(138, 43, 226, 0.08);
    transition: transform .15s, box-shadow .15s;
}
.as-redesign-feature:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(168, 85, 247, 0.12);
}
.as-redesign-feature__icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #A855F7 0%, #EC4899 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(168, 85, 247, 0.3);
}
.as-redesign-feature__icon svg {
    width: 16px; height: 16px; color: #fff;
}
.as-redesign-feature__text {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #0E0E14;
    line-height: 1.35;
}

@media (prefers-reduced-motion: reduce) {
    .as-redesign-scene__glow,
    .as-redesign-scene__room,
    .as-redesign-scene__wand,
    .as-redesign-scene__floating,
    .as-redesign-scene__effects { animation: none; }
}

@media (max-width: 1199px) {
    .as-pick-right--redesign { padding: 16px 0 0; }
    .as-redesign-scene { max-width: 460px; padding-bottom: 80px; }
    .as-redesign-scene__title { font-size: 22px; }
    .as-redesign-scene__subtitle { font-size: 12px; }
}
@media (max-width: 599px) {
    .as-redesign-scene { max-width: 320px; padding-bottom: 70px; }
    .as-redesign-scene__title { font-size: 18px; }
    .as-redesign-scene__subtitle { font-size: 11px; }
}

/* ========================================================================
   Волна 11.4 — секция «Твои проекты здесь» в Редизайне
   ======================================================================== */

/* Секция «Твои проекты здесь» в Редизайне */
.as-redesign-projects {
    margin-top: 48px;
    padding: 28px 24px 32px;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 24px;
    box-shadow: 0 8px 32px rgba(138, 43, 226, 0.1);
}

.as-redesign-projects__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.as-redesign-projects__title-wrap { flex: 1; min-width: 240px; }

.as-redesign-projects__title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: "Playfair Display", Georgia, serif;
    font-size: 26px;
    font-weight: 700;
    color: #0E0E14;
    margin: 0;
}
.as-redesign-projects__icon {
    width: 22px; height: 22px; object-fit: contain;
}
.as-redesign-projects__sub {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 13px;
    color: #6B6B7B;
    margin: 6px 0 0;
}
.as-redesign-projects__nav {
    display: inline-flex;
    gap: 8px;
}

/* Trend-плашки */
.as-redesign-projects__trends {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

/* Трек */
.as-redesign-projects__track {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 4px;
    padding: 4px 4px 16px;
    -webkit-overflow-scrolling: touch;
}
.as-redesign-projects__track::-webkit-scrollbar { height: 6px; }
.as-redesign-projects__track::-webkit-scrollbar-thumb {
    background: #D6D2E8;
    border-radius: 999px;
}

/* Карточка проекта — с 3 картинками */
.as-redesign-project-card {
    flex: 0 0 480px;
    scroll-snap-align: start;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(124, 92, 255, 0.08);
    transition: transform .2s, box-shadow .2s;
    display: flex;
    flex-direction: column;
}
.as-redesign-project-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(124, 92, 255, 0.15);
}
@media (max-width: 899px) {
    .as-redesign-project-card { flex: 0 0 380px; }
}
@media (max-width: 599px) {
    .as-redesign-project-card { flex: 0 0 300px; }
}

/* Три картинки в ряд */
.as-redesign-project-card__images {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 4px;
    padding: 4px;
}
.as-redesign-project-card__img-wrap {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 14px;
    overflow: hidden;
    background: #F7F7FB;
}
.as-redesign-project-card__img-wrap img {
    width: 100%; height: 100%;
    object-fit: cover;
}

/* Плейсхолдеры */
.as-redesign-project-card__img-wrap--placeholder {
    background: linear-gradient(135deg, #F1EFFF 0%, #E3DEFF 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}
.as-redesign-project-card__placeholder {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 11px;
    color: #7C5CFF;
    opacity: 0.7;
    font-weight: 500;
    text-align: center;
    padding: 0 6px;
}

/* Бейдж «Референс» — отличающийся от До/После */
.as-project-card__badge--reference {
    background: rgba(236, 72, 153, 0.85);
}

/* Тело карточки */
.as-redesign-project-card__body {
    padding: 14px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.as-redesign-project-card__title {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #0E0E14;
}
.as-redesign-project-card__title span {
    color: #A0A0B0; margin: 0 4px;
}
.as-redesign-project-card__tags {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 12px;
    color: #6B6B7B;
    line-height: 1.4;
}
.as-redesign-project-card__tags span {
    color: #A0A0B0; margin: 0 4px;
}

/* Адаптив секции */
@media (max-width: 899px) {
    .as-redesign-projects {
        padding: 20px 16px 24px;
        margin-top: 32px;
    }
    .as-redesign-projects__title { font-size: 22px; }
}

/* ========================================================================
   P5c — карточки результата нового async-«Подбора» (scoped .as-pick-card*)
   ======================================================================== */
.as-pick-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 16px;
    margin-top: var(--space-3);
}
.as-pick-card {
    width: 100%;
    max-width: 460px;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    color: inherit;
}
.as-pick-card__viz {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--surface-alt);
    overflow: hidden;
}
.as-pick-card__viz img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.as-pick-card__viz-fallback {
    display: none;
    position: absolute; inset: 0;
    align-items: center; justify-content: center;
    padding: 12px; text-align: center;
    font-size: 12px; color: var(--text-muted);
}
.as-pick-card__viz--broken .as-pick-card__viz-fallback { display: flex; }
.as-pick-card__viz--broken img { display: none; }
.as-pick-card__body {
    flex: 1;
    display: flex; flex-direction: column; gap: var(--space-3);
    padding: var(--space-4);
}
.as-pick-card__strategy { font-family: var(--font-serif); font-size: 16px; line-height: 1.3; }
.as-pick-card__desc { font-size: 12px; color: var(--text-muted); line-height: 1.5; }
.as-pick-card__why {
    font-size: 13px; line-height: 1.55; color: var(--text);
    background: var(--accent-soft);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
}
.as-pick-card__why b { font-weight: 600; }
.as-pick-card__compromise { font-size: 12px; color: var(--text-muted); line-height: 1.5; }
.as-pick-card__nh {
    font-size: 12px; color: var(--text-muted);
    background: var(--surface-alt, #f5f5f5);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 12px; text-align: center;
}
/* W23-polish-viz-pick: карточка товара — крупное фото, сердечко/скидка поверх, В корзину */
.as-pick-card__product {
    display: flex; flex-direction: column;
    min-width: 0;
}
.as-pick-card__media {
    position: relative; aspect-ratio: 1 / 1;
    background: var(--surface-alt); overflow: hidden;
}
.as-pick-card__media img.as-pick-card__thumb {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.as-pick-card__media .as-pick-card__fav { position: absolute; top: 10px; right: 10px; z-index: 2; }
.as-pick-card__discount {
    position: absolute; top: 10px; left: 10px; z-index: 2;
    padding: 4px 10px; border-radius: var(--radius-pill);
    background: var(--terracotta); color: #fff;
    font-family: var(--font-sans); font-size: 12px; font-weight: 700;
}
.as-pick-card__meta {
    display: flex; flex-direction: column; gap: 4px;
    padding: var(--space-3) var(--space-4) 0;
}
.as-pick-card__name {
    font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--text);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden; word-break: break-word;
}
.as-pick-card__brand { font-size: 11px; color: var(--text-muted); }
.as-pick-card__rating { font-size: 12px; color: var(--text-muted); }
.as-pick-card__delivery { font-size: 12px; color: var(--accent); font-weight: 500; }
.as-pick-card__prices { display: flex; align-items: baseline; gap: 8px; margin-top: 2px; }
.as-pick-card__old { font-size: 13px; color: var(--text-muted); text-decoration: line-through; }
.as-pick-card__price { font-family: var(--font-serif); font-size: 20px; font-weight: 700; color: var(--text); }
.as-pick-card__source {
    display: flex; align-items: center; gap: 6px;
    font-size: 11px; color: var(--text-muted); margin-top: 2px;
}
.as-pick-card__logo { height: 14px; width: auto; display: block; }
.as-pick-card__actions {
    display: flex; align-items: center; gap: 8px;
    padding: var(--space-3) var(--space-4) var(--space-4);
}
/* Кнопка «В корзину» переиспользует cart-btn-mini ради синхронизации toggleCart. */
.as-pick-card__cart.cart-btn-mini {
    position: static; top: auto; right: auto; z-index: auto;
    flex: 1 1 auto; width: auto; height: auto; min-height: 44px;
    padding: 10px 16px; border-radius: var(--radius-pill);
    border: 1px solid transparent; background: var(--accent); color: #fff;
    font-family: var(--font-sans); font-size: 13px; font-weight: 500;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background .15s;
}
.as-pick-card__cart.cart-btn-mini:hover { background: var(--accent-hover); }
.as-pick-card__cart.cart-btn-mini.active { background: var(--accent-hover); color: #fff; border-color: transparent; }
.as-pick-card__cta {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--surface); color: var(--text); text-decoration: none;
    border: 1px solid var(--border); border-radius: var(--radius-pill);
    padding: 10px 16px; font-size: 13px; font-weight: 500;
    transition: border-color .15s, color .15s;
}
.as-pick-card__cta:hover { border-color: var(--accent); color: var(--accent); }
.as-pick-card__fav {
    flex: 0 0 auto;
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--surface);
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.as-pick-card__fav svg { width: 20px; height: 20px; display: block; }
.as-pick-card__fav:hover { color: var(--terracotta); border-color: var(--terracotta); }
.as-pick-card__fav.active { color: var(--terracotta); border-color: var(--terracotta); }
.as-pick-card__fav.active svg { fill: currentColor; }
.as-pick-card__viz-label { font-size: 12px; color: var(--text-muted); }

@media (max-width: 599px) {
    .as-pick-card { max-width: none; }
    .as-pick-cards { gap: 12px; }
}

/* ========================================================================
   P5d — поле ответа на уточняющий вопрос «Подбора» (scoped .as-pick-clar*)
   ======================================================================== */
.as-pick-clar {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: var(--space-3);
}
.as-pick-clar__input {
    min-height: 64px;
}
.as-pick-clar .as-question-actions {
    justify-content: flex-start;
}
.as-pick-clar__btn {
    flex: 0 0 auto;
    min-width: 0;
}
.as-pick-clar--sent {
    opacity: 0.6;
    pointer-events: none;
}
@media (max-width: 599px) {
    .as-pick-clar__btn { width: 100%; }
}

/* ========================================================================
   P5e — кнопки-действия результата «Подбора» (scoped .as-pick-actions*)
   ======================================================================== */
.as-pick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border);
}
.as-pick-actions__btn {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    padding: 10px 18px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.as-pick-actions__btn:hover { border-color: var(--accent); color: var(--accent); }
.as-pick-actions__btn:disabled { opacity: 0.55; cursor: wait; }
.as-pick-actions__btn--primary {
    border-color: transparent;
    background: var(--accent);
    color: #fff;
}
.as-pick-actions__btn--primary:hover {
    border-color: transparent;
    background: var(--accent-hover);
    color: #fff;
}

/* ========================================================================
   W19-front — ранние товары и 👍/👎 «Подбора» (.as-pick-early*, .as-pick-feedback*)
   ======================================================================== */
.as-pick-early__note {
    font-size: 13px; color: var(--text-muted); line-height: 1.5;
    margin-bottom: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--accent-soft);
    border-radius: var(--radius-lg);
}
.as-pick-card__viz--pending {
    background: linear-gradient(100deg, var(--surface-alt) 30%, var(--surface) 50%, var(--surface-alt) 70%);
    background-size: 200% 100%;
    animation: asPickShimmer 1.6s ease-in-out infinite;
}
.as-pick-card__viz--pending .as-pick-card__viz-fallback { display: flex; }
@keyframes asPickShimmer {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}
.as-pick-feedback {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
    margin-top: var(--space-4); padding-top: var(--space-3);
    border-top: 1px dashed var(--border);
}
.as-pick-feedback__label { font-size: 13px; color: var(--text-muted); }
.as-pick-feedback__buttons { display: flex; gap: 8px; }
.as-pick-feedback__btn {
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 20px; line-height: 1;
    border: 1px solid var(--border); border-radius: 50%;
    background: var(--surface); cursor: pointer;
    transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.as-pick-feedback__btn:hover { border-color: var(--accent); transform: translateY(-1px); }
.as-pick-feedback__btn.active { border-color: var(--accent); background: var(--accent-soft); }
.as-pick-feedback__btn:disabled { cursor: default; opacity: 0.6; }
.as-pick-feedback__btn.active:disabled { opacity: 1; }
.as-pick-feedback__reason {
    flex: 1 1 100%;
    display: flex; flex-direction: column; gap: 8px; margin-top: 4px;
}
.as-pick-feedback__input {
    width: 100%; box-sizing: border-box; resize: vertical;
    font-family: var(--font-sans); font-size: 13px; color: var(--text);
    padding: 10px 12px;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--surface);
}
.as-pick-feedback__reason-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.as-pick-feedback__send, .as-pick-feedback__skip {
    font-family: var(--font-sans); font-size: 13px; font-weight: 500;
    padding: 8px 16px; border-radius: var(--radius-pill); cursor: pointer;
}
.as-pick-feedback__send { border: 1px solid transparent; background: var(--accent); color: #fff; }
.as-pick-feedback__send:hover { background: var(--accent-hover); }
.as-pick-feedback__send:disabled { opacity: 0.6; cursor: wait; }
.as-pick-feedback__skip { border: 1px solid var(--border); background: var(--surface); color: var(--text); }
.as-pick-feedback__skip:hover { border-color: var(--accent); color: var(--accent); }
.as-pick-feedback__thanks { font-size: 14px; color: var(--accent); }
.as-pick-feedback__note { font-size: 12px; color: var(--terracotta); }
@media (max-width: 599px) {
    .as-pick-feedback__reason-actions { flex-direction: column; }
    .as-pick-feedback__send, .as-pick-feedback__skip { width: 100%; }
}

/* ========================================================================
   W23-front — «страницы после генерации» для режимов Аси (.as-result)
   Единый переиспользуемый каркас результата (чистый каркас, без логики).
   ======================================================================== */

/* В режиме результата прячем форму-лейаут и блоки вдохновения */
body.view-aesthetics .mode-panel.is-showing-result > .as-pick-layout,
body.view-aesthetics .mode-panel.is-showing-result > .as-projects,
body.view-aesthetics .mode-panel.is-showing-result > .as-vibe-projects,
body.view-aesthetics .mode-panel.is-showing-result > .as-tryon-projects,
body.view-aesthetics .mode-panel.is-showing-result > .as-redesign-projects {
    display: none;
}

.as-result { margin-top: 8px; }
.as-result[hidden] { display: none; }

.as-result__head {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: var(--space-5);
}
.as-result__back {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    padding: 8px 16px;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}
.as-result__back:hover { border-color: var(--accent); color: var(--accent); }
.as-result__title {
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: clamp(26px, 3.4vw, 44px);
    line-height: 1.1;
    color: var(--text);
    text-align: center;
    margin: 8px 0 0;
}
.as-result__sub {
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-muted);
    text-align: center;
    margin: 0;
}
.as-result__section { margin-top: var(--space-5); }
.as-result__section-title {
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: clamp(20px, 2.2vw, 28px);
    color: var(--text);
    margin: 0 0 6px;
}
.as-result__section-sub {
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--text-muted);
    margin: 0 0 12px;
}
.as-result__section-body { margin-top: 12px; }

.as-result__changes { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.7; color: var(--text); }
.as-result__changes li { margin-bottom: 4px; }

.as-result__loading {
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    padding: 64px 16px;
}
.as-result__loading .loading-text { color: var(--text-muted); font-size: 14px; }

/* Карточка «Ася говорит» */
.as-result__asa {
    display: flex; gap: 14px; align-items: flex-start;
    background: linear-gradient(135deg, rgba(124,92,255,.06), rgba(124,92,255,.02));
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
}
.as-result__asa-icon {
    flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--accent-soft); color: var(--accent); font-size: 20px;
}
.as-result__asa-avatar {
    flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
    object-fit: cover; display: block;
}
.as-result__asa-title { font-weight: 600; font-size: 14px; margin: 0 0 4px; }
.as-result__asa-text { font-size: 14px; line-height: 1.6; color: var(--text); margin: 0; white-space: pre-line; }

/* Строка кнопок */
.as-result__buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--space-5); }
.as-result__btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    flex: 1 1 200px; min-height: 52px; padding: 12px 22px;
    font-family: var(--font-sans); font-size: 15px; font-weight: 500;
    color: var(--text); background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius-pill);
    cursor: pointer; transition: border-color .15s, color .15s, background .15s;
}
.as-result__btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.as-result__btn:disabled { opacity: .55; cursor: not-allowed; }
.as-result__btn--primary { border-color: transparent; background: var(--accent); color: #fff; }
.as-result__btn--primary:hover:not(:disabled) { background: var(--accent-hover); color: #fff; }

/* ── Слайдер «До/После» (чистый CSS+JS, input range) ── */
/* W23-polish-vibe-viewer: обёртка ограничивает ширину блока и центрирует.
   Сам .as-ba не меняем — aspect-ratio 16/10 и object-fit:cover сохранены. */
.as-ba-block {
    width: 100%;
    max-width: 960px;
    margin-inline: auto;
}
.as-ba {
    position: relative; width: 100%; aspect-ratio: 16 / 10;
    border-radius: var(--radius-xl); overflow: hidden;
    border: 1px solid var(--border); background: var(--surface-2);
    --pos: 50%;
}
.as-ba__layer { position: absolute; inset: 0; }
.as-ba__layer img { width: 100%; height: 100%; object-fit: cover; display: block; }
.as-ba__after { z-index: 1; }
.as-ba__before { z-index: 2; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.as-ba__tag {
    position: absolute; top: 14px; z-index: 3;
    padding: 5px 14px; border-radius: var(--radius-pill);
    font-family: var(--font-sans); font-size: 12px; font-weight: 600;
    color: #fff; background: rgba(14,14,20,.55); backdrop-filter: blur(4px);
}
.as-ba__tag--before { left: 14px; }
.as-ba__tag--after { right: 14px; background: var(--accent); }
.as-ba__handle {
    position: absolute; top: 0; bottom: 0; left: var(--pos);
    transform: translateX(-50%); width: 2px; background: #fff;
    z-index: 3; pointer-events: none; box-shadow: 0 0 0 1px rgba(14,14,20,.15);
}
.as-ba__handle-knob {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 44px; height: 44px; border-radius: 50%;
    background: #fff; color: var(--accent);
    display: grid; place-items: center; font-size: 18px; box-shadow: var(--shadow-md);
}
.as-ba__range {
    position: absolute; inset: 0; z-index: 4;
    width: 100%; height: 100%; margin: 0; padding: 0;
    opacity: 0; cursor: ew-resize;
    -webkit-appearance: none; appearance: none; background: transparent;
}
.as-ba__range::-webkit-slider-thumb { -webkit-appearance: none; width: 44px; height: 100%; cursor: ew-resize; }
.as-ba__range::-moz-range-thumb { width: 44px; height: 100%; border: 0; cursor: ew-resize; }
.as-ba__empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-muted); font-size: 14px; }

/* W23-polish-tryon: бейдж «Ася говорит: Стиль: …» внутри окна До/После */
.as-ba__asa-badge {
    position: absolute; left: 14px; bottom: 14px; z-index: 3;
    max-width: calc(100% - 28px);
    padding: 6px 14px; border-radius: var(--radius-pill);
    font-family: var(--font-sans); font-size: 13px; font-weight: 600;
    color: #fff; background: rgba(14, 14, 20, 0.62);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.as-ba__asa-badge b { font-weight: 700; }

/* Кнопки отдельного просмотра «Исходник» / «Результат» */
.as-ba__toolbar {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 10px; margin-top: 12px;
}
.as-ba__view {
    font-family: var(--font-sans); font-size: 14px; font-weight: 500;
    color: var(--text); background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius-pill);
    padding: 9px 18px; cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}
.as-ba__view:hover { border-color: var(--accent); color: var(--accent); }
.as-ba__view:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── W23-polish-vibe-viewer: лайтбокс отдельного просмотра (самодостаточный) ── */
.as-lightbox {
    position: fixed; inset: 0; z-index: 3000;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
}
.as-lightbox[hidden] { display: none; }
.as-lightbox__overlay {
    position: absolute; inset: 0;
    background: rgba(14, 14, 20, 0.72);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    cursor: zoom-out;
}
.as-lightbox__panel {
    position: relative; z-index: 1;
    display: flex; flex-direction: column;
    width: min(1100px, 100%);
    height: min(88vh, 860px);
    max-height: calc(100vh - 48px);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}
.as-lightbox__bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 10px 14px; flex: 0 0 auto;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}
.as-lightbox__label {
    font-family: var(--font-sans); font-size: 14px; font-weight: 600;
    color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.as-lightbox__tools { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.as-lightbox__btn {
    min-width: 40px; height: 40px; padding: 0 12px;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-sans); font-size: 18px; font-weight: 600; line-height: 1;
    color: var(--text); background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius-pill);
    cursor: pointer; transition: border-color .15s, color .15s, background .15s;
}
.as-lightbox__btn:hover { border-color: var(--accent); color: var(--accent); }
.as-lightbox__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.as-lightbox__btn--reset { font-size: 13px; min-width: 64px; }
.as-lightbox__btn--close { font-size: 20px; }
.as-lightbox__stage {
    position: relative; flex: 1 1 auto; min-height: 0;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; background: var(--surface-2);
    cursor: default; touch-action: none; overscroll-behavior: contain;
}
.as-lightbox__stage.is-zoomed { cursor: grab; }
.as-lightbox__stage.is-dragging { cursor: grabbing; }
.as-lightbox__img {
    max-width: 100%; max-height: 100%;
    width: auto; height: auto;
    object-fit: contain;
    transform-origin: center center;
    user-select: none; -webkit-user-drag: none;
    will-change: transform;
}
body.as-lightbox-open { overflow: hidden; }
@media (max-width: 720px) {
    .as-lightbox { padding: 12px; }
    .as-lightbox__panel {
        border-radius: 18px;
        height: min(92vh, 760px);
        max-height: calc(100vh - 24px);
    }
    .as-lightbox__bar { padding: 8px 10px; gap: 8px; }
    .as-lightbox__btn { min-width: 36px; height: 36px; padding: 0 10px; }
    .as-lightbox__btn--reset { min-width: 58px; }
}

/* ── Три картинки редизайна: До / Референс / После ── */
.as-tri { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.as-tri__item {
    position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-lg);
    overflow: hidden; border: 1px solid var(--border); background: var(--surface-2);
}
.as-tri__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.as-tri__tag {
    position: absolute; top: 12px; left: 12px;
    padding: 4px 12px; border-radius: var(--radius-pill);
    font-family: var(--font-sans); font-size: 12px; font-weight: 600;
    color: #fff; background: rgba(14,14,20,.55);
}
.as-tri__tag--after { background: var(--accent); }

/* ── Заглушки-плитки ── */
.as-result__stubs { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.as-result__stub {
    display: flex; gap: 12px; align-items: flex-start;
    background: var(--surface); border: 1px dashed var(--border-strong);
    border-radius: var(--radius-lg); padding: 18px;
    color: var(--text-muted); font-size: 13px; line-height: 1.5;
}
.as-result__stub-icon { font-size: 18px; line-height: 1; color: var(--accent); }

/* W23-polish-tryon: карточки-заглушки «Соберите образ» */
.as-result__products {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px;
}
.as-result__pcard {
    display: flex; flex-direction: column; gap: 10px;
    background: var(--surface); border: 1px dashed var(--border-strong);
    border-radius: var(--radius-lg); padding: 14px;
}
.as-result__pcard-media {
    position: relative; aspect-ratio: 1 / 1; overflow: hidden;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--surface-alt), var(--surface-2));
    display: grid; place-items: center;
}
.as-result__pcard-mark { font-size: 22px; line-height: 1; color: var(--accent); opacity: .6; }
.as-result__pcard-name { font-family: var(--font-sans); font-size: 14px; font-weight: 600; color: var(--text-muted); }
.as-result__pcard-price { font-family: var(--font-serif); font-weight: 700; font-size: 18px; color: var(--text-light); }
.as-result__pcard-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; }
.as-result__pcard-mp {
    font-family: var(--font-sans); font-size: 12px; color: var(--text-muted);
    border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 3px 10px;
}
.as-result__pcard-cart {
    width: 38px; height: 38px; border-radius: 50%;
    border: 1px solid var(--border); background: var(--surface);
    color: var(--text-light); cursor: not-allowed; opacity: .55; font-size: 16px;
}

/* ── Оценка проекта (редизайн) ── */
.as-result__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.as-result__stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px; }
.as-result__stat-label { font-size: 12px; color: var(--text-muted); margin-bottom: 6px; }
.as-result__stat-value { font-family: var(--font-serif); font-size: 22px; font-weight: 700; color: var(--text); }
.as-result__stat-note { font-size: 12px; color: var(--text-muted); margin-top: 6px; line-height: 1.4; }

/* ── Шапка результата «Подбора» (доводка W19b) ── */
.as-pick-result-head { margin-bottom: 12px; }
.as-pick-result__title {
    font-family: var(--font-serif); font-weight: 700;
    font-size: clamp(24px, 3vw, 36px); color: var(--text); margin: 0 0 10px;
}
.as-pick-result__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.as-pick-result__chip {
    font-family: var(--font-sans); font-size: 13px;
    padding: 6px 14px; border-radius: var(--radius-pill);
    background: var(--accent-soft); color: var(--accent);
}
.as-pick-result__recommend {
    display: flex; gap: 10px; align-items: flex-start;
    background: linear-gradient(135deg, rgba(124,92,255,.06), rgba(124,92,255,.02));
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: 14px 16px; margin-bottom: 16px;
    font-size: 14px; line-height: 1.5; color: var(--text);
}
.as-pick-result__recommend b { color: var(--accent); }

/* W23-polish-tryon: лёгкий тост для действий результата */
.as-result__toast {
    position: fixed; left: 50%; bottom: 28px;
    transform: translateX(-50%) translateY(12px);
    z-index: 3200; max-width: min(90vw, 420px);
    padding: 12px 18px; border-radius: var(--radius-pill);
    background: var(--text); color: #fff;
    font-family: var(--font-sans); font-size: 14px; line-height: 1.4;
    box-shadow: var(--shadow-lg);
    opacity: 0; pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
}
.as-result__toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 720px) {
    .as-tri { grid-template-columns: 1fr; }
    .as-result__stats { grid-template-columns: 1fr; }
    .as-result__btn { flex: 1 1 100%; }
    .as-ba { aspect-ratio: 4 / 5; }
    .as-result__products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .as-ba__asa-badge { font-size: 12px; padding: 5px 12px; }
}

/* ── W23-polish-redesign: подпись, экономия, карусель товаров проекта ── */
.as-result__caption {
    text-align: center;
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--text-muted);
    margin-top: 14px;
}
.as-result__caption b { color: var(--text); font-weight: 600; }

.as-result__savings {
    display: flex; align-items: center; gap: 10px;
    margin-top: var(--space-5);
    padding: 16px 20px;
    background: linear-gradient(135deg, rgba(180, 83, 9, .08), rgba(180, 83, 9, .02));
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    font-family: var(--font-sans); font-size: 15px; color: var(--text);
}
.as-result__savings b { color: var(--gold); font-weight: 700; }
.as-result__savings-icon { font-size: 20px; line-height: 1; }

.as-result__shop-group { margin-top: 22px; }
.as-result__shop-group:first-child { margin-top: 0; }
.as-result__shop-head { margin-bottom: 12px; }
.as-result__shop-title {
    font-family: var(--font-sans); font-size: 16px; font-weight: 700;
    color: var(--text); margin: 0;
}
.as-result__shop-est {
    font-family: var(--font-serif); font-size: 15px; font-weight: 700;
    color: var(--text-muted); margin-top: 2px;
}
.as-result__shop-reason {
    font-family: var(--font-sans); font-size: 13px; color: var(--text-muted);
    line-height: 1.5; margin-top: 4px;
}
.as-result__shop-track {
    display: grid; grid-auto-flow: column;
    grid-auto-columns: minmax(200px, 230px);
    grid-template-rows: 1fr; gap: 14px;
    overflow-x: auto; padding-bottom: 6px;
    scroll-snap-type: x proximity;
}
.as-result__shop-card {
    display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); overflow: hidden;
    scroll-snap-align: start;
}
.as-result__shop-link { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.as-result__shop-media { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--surface-2); }
.as-result__shop-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.as-result__shop-name {
    font-family: var(--font-sans); font-size: 13px; font-weight: 500; color: var(--text);
    line-height: 1.4; margin: 10px 12px 0; min-height: 36px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.as-result__shop-price {
    font-family: var(--font-serif); font-size: 18px; font-weight: 700;
    color: var(--text); margin: 6px 12px 0;
}
.as-result__shop-foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; padding: 10px 12px 12px; margin-top: auto;
}
.as-result__shop-mp {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--font-sans); font-size: 12px; color: var(--text-muted);
}
.as-result__shop-logo { width: 18px; height: 18px; object-fit: contain; display: block; }
.as-result__shop-fav {
    width: 36px; height: 36px; border-radius: 50%;
    border: 1px solid var(--border); background: var(--surface); color: var(--text-light);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; transition: border-color .15s, color .15s, background .15s;
}
.as-result__shop-fav svg { width: 18px; height: 18px; }
.as-result__shop-fav:hover { border-color: var(--accent); color: var(--accent); }
.as-result__shop-fav.active { color: #fff; background: var(--accent); border-color: var(--accent); }
.as-result__shop-fav.active svg { fill: currentColor; }

.as-result__shop-nav { display: flex; justify-content: center; gap: 10px; margin-top: 12px; }
.as-result__shop-arrow {
    width: 40px; height: 40px; border-radius: 50%;
    border: 1px solid var(--border); background: var(--surface); color: var(--text);
    font-size: 16px; line-height: 1; cursor: pointer;
    transition: border-color .15s, color .15s, opacity .15s;
}
.as-result__shop-arrow:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.as-result__shop-arrow:disabled { opacity: .4; cursor: not-allowed; }

@media (max-width: 720px) {
    .as-result__caption { font-size: 13px; }
    .as-result__savings { font-size: 14px; padding: 14px 16px; }
    .as-result__shop-track { grid-auto-columns: minmax(150px, 68%); }
}

/* ── W23-polish-viz-pick: визуализатор — две колонки, сетка и карусель ── */
.as-result__viz-top {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}
.as-result__viz-media { min-width: 0; }
.as-result__viz-aside { min-width: 0; }
.as-result__viz-aside-title {
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: clamp(18px, 2vw, 24px);
    color: var(--text);
    margin: 0 0 12px;
}
.as-result__viz-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}
@media (max-width: 900px) {
    .as-result__viz-top { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
    .as-result__viz-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── W23-polish-viz-pick: подбор — подпись-сводка и строка «что мы поняли» ── */
.as-pick-result__sub {
    font-family: var(--font-sans); font-size: 14px; line-height: 1.5;
    color: var(--text-muted); margin: 0 0 12px;
}
.as-pick-understood {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
}
.as-pick-understood__label { font-size: 13px; color: var(--text-muted); }
.as-pick-understood__edit {
    margin-left: auto;
    font-family: var(--font-sans); font-size: 13px; font-weight: 500;
    color: var(--text); background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius-pill);
    padding: 8px 16px; cursor: pointer;
    transition: border-color .15s, color .15s;
}
.as-pick-understood__edit:hover { border-color: var(--accent); color: var(--accent); }
@media (max-width: 599px) {
    .as-pick-understood__edit { margin-left: 0; }
}

/* ════ W25-redesign-modes: режимы формы «Редакции» («По референсу» / «Подобрать») ════ */
/* [hidden] обязан побеждать display:flex (паттерн .as-vibe-field[hidden]/.as-vibe-photo[hidden]) */
.as-redesign-field[hidden],
.as-redesign-upload[hidden] { display: none; }

/* Карточка стиля «Авто» (ИИ подберёт) — без PNG-ассета, эмодзи */
.as-style-card__emoji {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    line-height: 1;
}
.as-style-card--auto {
    background: linear-gradient(135deg, #EDE8FF 0%, #D8CCFF 100%);
}
.as-style-card--auto.is-active {
    background:
        linear-gradient(135deg, #EDE8FF 0%, #D8CCFF 100%) padding-box,
        linear-gradient(135deg, #A855F7 0%, #EC4899 100%) border-box;
}

/* В «По референсу» поле пожеланий — крупнее (в «Подобрать» — базовые 110px) */
#panelRedesign[data-redesign-source="reference"] #redesignInput.as-question-input {
    min-height: 240px;
}
@media (max-width: 599px) {
    #panelRedesign[data-redesign-source="reference"] #redesignInput.as-question-input {
        min-height: 180px;
    }
}

/* ════════════════ W27-outfit-ui: «Подобрать образ» (режим Примерки) ════════════════ */

/* [hidden] обязан побеждать display-контейнеры форм */
#tryonFormTryon[hidden],
#tryonFormOutfit[hidden],
.as-outfit-subs[hidden],
.as-outfit-cats-hint[hidden] { display: none; }

/* Новые стили одежды (без PNG-ассетов — эмодзи) */
.as-style-card--minimal      { background: linear-gradient(135deg, #F1F5F9 0%, #E2E8F0 100%); }
.as-style-card--old-money    { background: linear-gradient(135deg, #EFE7D8 0%, #D9CBB2 100%); }
.as-style-card--sport        { background: linear-gradient(135deg, #CFFAFE 0%, #A7F3D0 100%); }
.as-style-card--smart-casual { background: linear-gradient(135deg, #E0E7FF 0%, #C7D2FE 100%); }
.as-style-card--minimal.is-active {
    background: linear-gradient(#F1F5F9, #E2E8F0) padding-box,
                linear-gradient(135deg, #A855F7 0%, #EC4899 100%) border-box;
}
.as-style-card--old-money.is-active {
    background: linear-gradient(#EFE7D8, #D9CBB2) padding-box,
                linear-gradient(135deg, #A855F7 0%, #EC4899 100%) border-box;
}
.as-style-card--sport.is-active {
    background: linear-gradient(135deg, #CFFAFE, #A7F3D0) padding-box,
                linear-gradient(135deg, #A855F7 0%, #EC4899 100%) border-box;
}
.as-style-card--smart-casual.is-active {
    background: linear-gradient(#E0E7FF, #C7D2FE) padding-box,
                linear-gradient(135deg, #A855F7 0%, #EC4899 100%) border-box;
}

/* Левая колонка outfit — одна зона загрузки */
.as-outfit-photos { max-width: 520px; }

/* Способ подбора */
.as-outfit-method { max-width: 360px; }
.as-outfit-hint {
    margin: 8px 0 0;
    font-family: var(--font-sans);
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-muted);
}

/* Инпуты/селекты outfit */
.as-outfit-select,
.as-outfit-input {
    width: 100%;
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--text);
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 12px);
    padding: 12px 14px;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.as-outfit-select:focus,
.as-outfit-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint, rgba(168,85,247,.15)); }

/* Категории + раскрывающиеся подкатегории */
.as-outfit-cats { display: flex; flex-direction: column; gap: 8px; }
.as-outfit-cat-block { border: 1px solid var(--border); border-radius: 14px; background: rgba(255,255,255,.45); overflow: hidden; }
.as-outfit-cat {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    width: 100%; text-align: left; cursor: pointer;
    font-family: var(--font-sans); font-size: 14px; font-weight: 600; color: var(--text);
    background: transparent; border: 0; padding: 12px 14px;
}
.as-outfit-cat.is-selected { color: var(--accent); background: var(--accent-tint, rgba(168,85,247,.10)); }
.as-outfit-cat__caret { transition: transform .15s; opacity: .6; }
.as-outfit-cat.is-open .as-outfit-cat__caret { transform: rotate(180deg); }
.as-outfit-subs { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 14px 14px; }
.as-outfit-sub {
    font-family: var(--font-sans); font-size: 13px; color: var(--text);
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-pill, 999px); padding: 7px 14px; cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
}
.as-outfit-sub:hover { border-color: var(--accent); }
.as-outfit-sub.is-selected { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Погода */
.as-outfit-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.as-outfit-chip {
    font-family: var(--font-sans); font-size: 13px; color: var(--text);
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-pill, 999px); padding: 8px 16px; cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
}
.as-outfit-chip:hover { border-color: var(--accent); }
.as-outfit-chip.is-selected { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Advanced */
.as-outfit-advanced { border-top: 1px solid var(--border); padding-top: 12px; }
.as-outfit-advanced__summary {
    cursor: pointer; font-family: var(--font-sans); font-size: 14px; font-weight: 600; color: var(--text);
    padding: 6px 0;
}
.as-outfit-advanced__body { display: flex; flex-direction: column; gap: 16px; padding-top: 8px; }

/* Ранние товары в лоадере */
.as-outfit-early { margin-top: 12px; font-size: 13px; color: var(--accent); text-align: center; }

/* Карточки товаров образа */
.as-outfit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}
.as-outfit-card {
    display: flex; flex-direction: column; gap: 10px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg, 18px); padding: 14px;
}
.as-outfit-card__cat {
    align-self: flex-start;
    font-family: var(--font-sans); font-size: 11px; font-weight: 600; text-transform: uppercase;
    letter-spacing: .04em; color: var(--text-muted);
}
.as-outfit-card__head {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.as-outfit-card__similar {
    flex: 0 0 auto;
    font-family: var(--font-sans); font-size: 11px; font-weight: 600;
    color: var(--accent);
    background: var(--accent-tint, rgba(168,85,247,.10));
    border: 1px solid var(--accent);
    border-radius: var(--radius-pill, 999px);
    padding: 2px 10px; line-height: 1.5; white-space: nowrap;
}
.as-outfit-card__alts { font-size: 12px; color: var(--text-muted); }
.as-outfit-card__foot { display: flex; justify-content: flex-end; }
.as-outfit-card__replace {
    font-family: var(--font-sans); font-size: 13px; color: var(--text);
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-pill, 999px); padding: 8px 16px;
}
.as-outfit-card__replace:disabled { opacity: .55; cursor: not-allowed; }

/* W46 AS-16: мини-выбор альтернатив для замены товара образа */
.as-outfit-card__replace-box {
    display: flex; flex-direction: column; gap: 8px;
    margin-top: 6px; padding-top: 10px; border-top: 1px dashed var(--border);
}
.as-outfit-card__replace-box[hidden] { display: none; }
.as-outfit-alt {
    display: flex; align-items: center; gap: 10px; width: 100%;
    text-align: left; cursor: pointer;
    background: var(--surface-alt); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 8px;
    font-family: var(--font-sans);
}
.as-outfit-alt:hover { border-color: var(--accent); }
.as-outfit-alt__media {
    flex: 0 0 auto; width: 48px; height: 48px; overflow: hidden;
    border-radius: var(--radius-sm); border: 1px solid var(--border);
}
.as-outfit-alt__media img { width: 100%; height: 100%; object-fit: cover; }
.as-outfit-alt__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.as-outfit-alt__name {
    font-size: 13px; color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.as-outfit-alt__price { font-size: 13px; font-weight: 600; color: var(--text); }
.as-outfit-alt__source { font-size: 11px; color: var(--text-muted); }

/* Бюджет */
.as-outfit-budget {
    margin-top: var(--space-5, 20px);
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg, 18px); padding: 16px 18px;
}
.as-outfit-budget__total { font-family: var(--font-serif); font-size: 20px; font-weight: 700; color: var(--text); }
.as-outfit-budget__note { margin-top: 6px; font-size: 13px; color: var(--text-muted); }

.as-outfit-size-note { margin-top: 14px; font-size: 12px; color: var(--text-muted); }

@media (max-width: 599px) {
    #tryonFormOutfit .as-outfit-grid { grid-template-columns: 1fr; }
    .as-outfit-photos { max-width: none; }
}

/* ════════════════ W32-tryon-fav-ui: панель избранного в «Примерке» ════════════════ */

/* [hidden] обязан побеждать display-контейнеры */
#tryonGarmentZone[hidden],
#tryonStyleField[hidden],
#tryonBudgetField[hidden],
#tryonFavPanel[hidden],
.as-fav-panel__list[hidden],
.as-fav-panel__selected[hidden],
.as-fav-panel__confirm[hidden],
.as-fav-panel__note[hidden],
.as-fav-panel__prepare[hidden],
.as-fav-panel__more[hidden],
.as-fav-panel__state[hidden] { display: none; }

.as-fav-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    background: rgba(255, 255, 255, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 18px;
    padding: 14px;
}
.as-fav-panel__head {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.as-fav-panel__counter {
    font-family: var(--font-sans);
    font-size: 12px; font-weight: 700;
    color: var(--accent);
    background: var(--accent-tint, rgba(168,85,247,.10));
    border-radius: var(--radius-pill, 999px);
    padding: 3px 10px; line-height: 1.4; white-space: nowrap;
}
.as-fav-panel__state {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 18px 10px; text-align: center;
}
.as-fav-panel__state-text { font-size: 13px; color: var(--text-muted); line-height: 1.5; }
.as-fav-panel__empty-title { font-family: var(--font-serif); font-size: 16px; font-weight: 700; color: var(--text); }
.as-fav-panel__retry {
    font-family: var(--font-sans); font-size: 13px; color: var(--text);
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-pill, 999px); padding: 8px 16px; cursor: pointer;
}
.as-fav-panel__retry:hover { border-color: var(--accent); }

.as-fav-panel__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
@media (max-width: 599px) { .as-fav-panel__list { grid-template-columns: 1fr; } }

.as-fav-card {
    display: flex; gap: 10px; align-items: stretch; text-align: left;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 14px; padding: 8px; cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
    font-family: var(--font-sans); color: var(--text);
}
.as-fav-card:hover { border-color: var(--accent); }
.as-fav-card.is-selected {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-tint, rgba(168,85,247,.15));
}
.as-fav-card__media {
    position: relative; flex: 0 0 64px; width: 64px; height: 64px;
    border-radius: 10px; overflow: hidden; background: #f5f3ee;
}
.as-fav-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.as-fav-card__check {
    position: absolute; inset: 0; display: none;
    align-items: center; justify-content: center;
    background: rgba(168,85,247,.55); color: #fff; font-size: 24px; font-weight: 700;
}
.as-fav-card.is-selected .as-fav-card__check { display: flex; }
.as-fav-card__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.as-fav-card__name {
    font-size: 13px; font-weight: 600; line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.as-fav-card__tags { display: flex; flex-wrap: wrap; gap: 4px; }
.as-fav-card__slot {
    font-size: 11px; font-weight: 600; color: var(--text-muted);
    background: var(--surface-alt, #f2f0ec); border-radius: var(--radius-pill, 999px);
    padding: 1px 8px; line-height: 1.5;
}
.as-fav-card__warn {
    font-size: 11px; font-weight: 600; color: var(--gold, #b45309);
    background: rgba(180,83,9,.08); border-radius: var(--radius-pill, 999px);
    padding: 1px 8px; line-height: 1.5;
}
.as-fav-card__price { font-size: 13px; font-weight: 700; margin-top: auto; }

.as-fav-panel__selected { display: flex; flex-wrap: wrap; gap: 6px; }
.as-fav-chip {
    display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
    background: var(--accent-tint, rgba(168,85,247,.10));
    border: 1px solid var(--accent);
    border-radius: var(--radius-pill, 999px);
    padding: 4px 4px 4px 10px; font-size: 12px; color: var(--text);
}
.as-fav-chip__slot { font-weight: 700; color: var(--accent); }
.as-fav-chip__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; }
.as-fav-chip__remove {
    border: 0; background: transparent; cursor: pointer;
    font-size: 16px; line-height: 1; color: var(--text-muted); padding: 0 4px;
}
.as-fav-chip__remove:hover { color: var(--terracotta, #c2410c); }

.as-fav-panel__confirm {
    background: rgba(194,65,12,.06); border: 1px solid var(--terracotta, #c2410c);
    border-radius: 12px; padding: 10px 12px;
    display: flex; flex-direction: column; gap: 8px;
}
.as-fav-confirm__text { font-size: 13px; line-height: 1.5; color: var(--text); }
.as-fav-confirm__actions { display: flex; gap: 8px; }
.as-fav-confirm__yes, .as-fav-confirm__no {
    font-family: var(--font-sans); font-size: 13px; font-weight: 600;
    border-radius: var(--radius-pill, 999px); padding: 7px 16px; cursor: pointer;
}
.as-fav-confirm__yes { background: var(--accent); border: 1px solid var(--accent); color: #fff; }
.as-fav-confirm__no { background: var(--surface); border: 1px solid var(--border); color: var(--text); }

.as-fav-panel__note { font-size: 12px; color: var(--text-muted); line-height: 1.4; }
.as-fav-panel__more {
    align-self: center; font-family: var(--font-sans); font-size: 13px;
    background: var(--surface); border: 1px solid var(--border); color: var(--text);
    border-radius: var(--radius-pill, 999px); padding: 8px 18px; cursor: pointer;
}
.as-fav-panel__more:hover { border-color: var(--accent); }

.as-fav-panel__prepare {
    display: flex; flex-direction: column; gap: 6px;
    border-top: 1px solid var(--border); padding-top: 10px;
}
.as-fav-panel__prepare-head {
    font-family: var(--font-sans); font-size: 12px; font-weight: 600; color: var(--text-muted);
}
.as-fav-prep__row {
    display: grid; grid-template-columns: 10px minmax(0, 1fr) auto auto; gap: 8px;
    align-items: center; font-size: 12.5px; color: var(--text);
}
.as-fav-prep__dot { width: 8px; height: 8px; border-radius: 50%; background: #c9c6c0; justify-self: center; }
.as-fav-prep__row.is-preparing .as-fav-prep__dot { background: var(--accent); animation: asFavPulse 1s infinite; }
.as-fav-prep__row.is-ready .as-fav-prep__dot { background: #16a34a; }
.as-fav-prep__row.is-error .as-fav-prep__dot { background: var(--terracotta, #c2410c); }
.as-fav-prep__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-fav-prep__state { color: var(--text-muted); }
.as-fav-prep__refs { color: var(--text-muted); }
.as-fav-prep__err { grid-column: 2 / -1; color: var(--terracotta, #c2410c); font-size: 12px; }
@keyframes asFavPulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* ════════════════ W33-tryon-fav-result: «Вы примерили» + уточнение ════════════════ */

/* Сетка реальных примеренных товаров (карточки — переиспользованный pickProductBlock) */
.as-tried-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
.as-tried-card {
    display: flex;
    min-width: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.as-tried-card .as-pick-card__product { flex: 1 1 auto; min-width: 0; }

.as-clarify {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 18px;
}
.as-clarify__q {
    margin: 0 0 12px;
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.5;
    color: var(--text);
}
.as-clarify__form { display: flex; flex-direction: column; gap: 10px; }
.as-clarify__input {
    box-sizing: border-box;
    width: 100%;
    padding: 10px 12px;
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.5;
    color: var(--text);
    background: var(--surface-alt, #f7f5f2);
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 12px);
    resize: vertical;
}
.as-clarify__input:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}
.as-clarify__actions { display: flex; flex-wrap: wrap; gap: 10px; }

@media (max-width: 899px) {
    .as-tried-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
    .as-tried-grid { grid-template-columns: 1fr; }
    .as-clarify { padding: 14px; }
    .as-clarify__actions .as-result__btn { flex: 1 1 100%; }
}