/* ═══════════════════════════════════════════════════════════
   CONFIGURATOR — Part 1: Layout, Progress, Steps, Cards
   ═══════════════════════════════════════════════════════════ */

/* ── Shell ─────────────────────────────────────── */
.configurator-shell{display:grid;gap:26px;min-height:calc(100vh - 120px);padding-bottom:60px}

/* ── Header ────────────────────────────────────── */
.cfg-header{display:grid;gap:10px;justify-items:center;text-align:center}
.cfg-header-console{font-size:clamp(24px,5vw,40px);font-weight:700;letter-spacing:-.04em}
.cfg-header-cursor{display:inline-block;animation:projectCursorBlink .8s step-end infinite}
.cfg-header-kicker{color:var(--muted);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.cfg-header h1{margin:0;font-size:clamp(26px,4vw,38px);line-height:1.1;letter-spacing:-.04em}
.cfg-header p{margin:0;max-width:54ch;line-height:1.7}

/* ── Two-column layout ─────────────────────────── */
.cfg-layout{display:grid;grid-template-columns:1fr;gap:28px;max-width:1240px;margin:0 auto;width:100%}
@media(min-width:1025px){
  .cfg-layout{grid-template-columns:1fr 420px}
}

/* ── Steps Panel ───────────────────────────────── */
.cfg-steps-panel{min-width:0}

/* ── Preview Panel ─────────────────────────────── */
.cfg-preview-panel{display:none}
@media(min-width:1025px){
  .cfg-preview-panel{display:block}
}
.cfg-preview-sticky{position:sticky;top:140px}

/* ── Progress Bar ──────────────────────────────── */
.cfg-progress{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:24px;padding:4px 0;position:relative;z-index:10}

.cfg-progress-step{display:flex;align-items:center;gap:6px;flex-shrink:0;cursor:pointer;padding:8px 12px;border-radius:999px;border:1px solid rgba(148,163,184,.1);background:rgba(255,255,255,.02);transition:all .22s ease;font-size:12px;font-weight:700;letter-spacing:.02em;color:var(--muted,rgba(230,233,239,.5));white-space:nowrap}
.cfg-progress-step:hover{border-color:rgba(79,70,229,.2);background:rgba(79,70,229,.04)}
.cfg-progress-num{width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;background:rgba(148,163,184,.12);color:inherit;transition:all .22s ease;flex-shrink:0}

.cfg-progress-step.is-active{color:inherit;border-color:rgba(79,70,229,.18)}
.cfg-progress-step.is-active .cfg-progress-num{background:rgba(79,70,229,.2)}
.cfg-progress-step.is-current{color:inherit;border-color:rgba(79,70,229,.4);background:rgba(79,70,229,.08)}
.cfg-progress-step.is-current .cfg-progress-num{background:linear-gradient(135deg,#4f46e5,#22d3ee);color:#fff;box-shadow:0 0 12px rgba(79,70,229,.3)}
.cfg-progress-step.is-completed .cfg-progress-num{background:rgba(34,197,94,.18);color:#22c55e}
.cfg-progress-step.is-completed .cfg-progress-num::after{content:"✓"}

body.light .cfg-progress-step,body[data-theme="light-ornament"] .cfg-progress-step{background:rgba(15,23,42,.02);border-color:rgba(15,23,42,.06)}
body[data-theme="dark-ornament"] .cfg-progress-step{border-color:rgba(209,163,79,.08)}
body[data-theme="dark-ornament"] .cfg-progress-step.is-current{border-color:rgba(209,163,79,.3);background:rgba(209,163,79,.08)}
body[data-theme="dark-ornament"] .cfg-progress-step.is-current .cfg-progress-num{background:linear-gradient(135deg,#c9933a,#f6d288);color:#1b1206}
body[data-theme="light-ornament"] .cfg-progress-step.is-current{border-color:rgba(170,126,45,.3);background:rgba(170,126,45,.08)}
body[data-theme="light-ornament"] .cfg-progress-step.is-current .cfg-progress-num{background:linear-gradient(135deg,#bb8332,#f0cf8b);color:#22170a}

/* ── Step container ────────────────────────────── */
.cfg-step{display:grid;gap:20px;animation:cfgStepIn .36s ease both}
.cfg-step[hidden]{display:none!important}
.cfg-step h2{margin:0;font-size:clamp(26px,4vw,36px);line-height:1.08;letter-spacing:-.035em}
.cfg-step-intro{margin:0;max-width:54ch;line-height:1.7}

@keyframes cfgStepIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

/* ── Card Grid (product, style selection) ──────── */
.cfg-card-grid{display:grid;gap:12px}
@media(min-width:540px){.cfg-card-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:860px){.cfg-card-grid.cfg-card-grid--3col{grid-template-columns:repeat(3,1fr)}}

.cfg-option-card{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;padding:16px;border-radius:20px;border:1px solid rgba(148,163,184,.1);background:rgba(255,255,255,.03);color:inherit;text-align:left;cursor:pointer;transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease,background .22s ease;position:relative;overflow:hidden}
.cfg-option-card::before{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;transition:opacity .3s ease;pointer-events:none}
.cfg-option-card:hover,.cfg-option-card:focus-visible{transform:translateY(-2px);border-color:rgba(79,70,229,.28);box-shadow:0 16px 40px rgba(15,23,42,.1);outline:none}
.cfg-option-card.is-selected{border-color:rgba(79,70,229,.45);background:rgba(79,70,229,.1)}
.cfg-option-card.is-selected::before{opacity:1;background:radial-gradient(circle at top right,rgba(79,70,229,.12),transparent 60%)}

body.light .cfg-option-card,body[data-theme="light-ornament"] .cfg-option-card{background:rgba(15,23,42,.02)}
body.light .cfg-option-card.is-selected,body[data-theme="light-ornament"] .cfg-option-card.is-selected{background:rgba(79,70,229,.06)}
body[data-theme="dark-ornament"] .cfg-option-card:hover{border-color:rgba(209,163,79,.24)}
body[data-theme="dark-ornament"] .cfg-option-card.is-selected{border-color:rgba(209,163,79,.4);background:rgba(209,163,79,.08)}
body[data-theme="light-ornament"] .cfg-option-card:hover{border-color:rgba(170,126,45,.2)}
body[data-theme="light-ornament"] .cfg-option-card.is-selected{border-color:rgba(170,126,45,.35);background:rgba(170,126,45,.06)}

.cfg-option-icon{width:50px;height:50px;display:inline-flex;align-items:center;justify-content:center;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid rgba(148,163,184,.1);font-size:24px;flex-shrink:0;transition:border-color .22s ease,background .22s ease}
.cfg-option-card.is-selected .cfg-option-icon{border-color:rgba(79,70,229,.3);background:rgba(79,70,229,.1)}
.cfg-option-content{display:grid;gap:4px;min-width:0}
.cfg-option-title{font-size:16px;font-weight:700;letter-spacing:-.02em}
.cfg-option-desc{font-size:13px;line-height:1.5;color:var(--muted,rgba(230,233,239,.6));overflow:hidden;text-overflow:ellipsis}
.cfg-option-badge{display:inline-flex;padding:2px 8px;border-radius:999px;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:rgba(79,70,229,.12);color:rgba(79,70,229,.9);margin-top:2px;justify-self:start}
body[data-theme="dark-ornament"] .cfg-option-badge{background:rgba(209,163,79,.12);color:rgba(244,214,154,.9)}
body[data-theme="light-ornament"] .cfg-option-badge{background:rgba(170,126,45,.1);color:rgba(143,101,32,.9)}

/* ── Checkbox Grid (screens, integrations) ─────── */
.cfg-checkbox-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.cfg-checkbox-item{display:grid;grid-template-columns:auto auto 1fr auto;gap:10px;align-items:center;padding:12px 14px;border-radius:14px;border:1px solid rgba(148,163,184,.1);background:rgba(255,255,255,.02);cursor:pointer;transition:border-color .22s ease,background .22s ease,transform .18s ease;user-select:none}
.cfg-checkbox-item:hover{border-color:rgba(79,70,229,.22);background:rgba(79,70,229,.04);transform:translateY(-1px)}
.cfg-checkbox-item.is-checked{border-color:rgba(79,70,229,.38);background:rgba(79,70,229,.07);box-shadow:0 4px 16px rgba(79,70,229,.08)}
body.light .cfg-checkbox-item,body[data-theme="light-ornament"] .cfg-checkbox-item{background:rgba(15,23,42,.02)}
body[data-theme="dark-ornament"] .cfg-checkbox-item.is-checked{border-color:rgba(209,163,79,.35);background:rgba(209,163,79,.07)}
body[data-theme="light-ornament"] .cfg-checkbox-item.is-checked{border-color:rgba(170,126,45,.3);background:rgba(170,126,45,.06)}

.cfg-check-box{width:20px;height:20px;border-radius:6px;border:2px solid rgba(148,163,184,.28);display:inline-flex;align-items:center;justify-content:center;transition:border-color .18s,background .18s;flex-shrink:0}
.cfg-check-box::after{content:"";width:10px;height:10px;border-radius:3px;background:linear-gradient(135deg,#4f46e5,#22d3ee);opacity:0;transform:scale(0);transition:opacity .18s,transform .18s}
.cfg-checkbox-item.is-checked .cfg-check-box{border-color:#4f46e5}
.cfg-checkbox-item.is-checked .cfg-check-box::after{opacity:1;transform:scale(1)}
body[data-theme="dark-ornament"] .cfg-checkbox-item.is-checked .cfg-check-box{border-color:#c9933a}
body[data-theme="dark-ornament"] .cfg-checkbox-item.is-checked .cfg-check-box::after{background:linear-gradient(135deg,#c9933a,#f6d288)}
body[data-theme="light-ornament"] .cfg-checkbox-item.is-checked .cfg-check-box{border-color:#bb8332}
body[data-theme="light-ornament"] .cfg-checkbox-item.is-checked .cfg-check-box::after{background:linear-gradient(135deg,#bb8332,#f0cf8b)}

.cfg-check-icon{font-size:16px;line-height:1}
.cfg-check-label-wrap{display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap}
.cfg-check-label{font-size:13px;font-weight:600;letter-spacing:-.01em;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cfg-apple-prefix{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:999px;background:rgba(255,255,255,.08);color:#dbe5f1;font-size:11px;line-height:1;margin-right:6px;flex-shrink:0}
.cfg-apple-chip{display:inline-flex;align-items:center;padding:2px 8px;border-radius:999px;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:rgba(148,163,184,.16);color:rgba(226,232,240,.95);border:1px solid rgba(148,163,184,.25);line-height:1.2;flex-shrink:0}
.cfg-check-pts{font-size:10px;font-weight:800;color:var(--muted,rgba(230,233,239,.45));letter-spacing:.04em}
body.light .cfg-apple-prefix,body[data-theme="light-ornament"] .cfg-apple-prefix{background:rgba(15,23,42,.08);color:#334155}
body.light .cfg-apple-chip,body[data-theme="light-ornament"] .cfg-apple-chip{background:rgba(15,23,42,.06);color:#334155;border-color:rgba(15,23,42,.12)}
body[data-theme="dark-ornament"] .cfg-apple-prefix{background:rgba(209,163,79,.18);color:#f9dfab}
body[data-theme="dark-ornament"] .cfg-apple-chip{background:rgba(209,163,79,.12);color:#f4dba8;border-color:rgba(209,163,79,.28)}
body[data-theme="light-ornament"] .cfg-apple-prefix{background:rgba(170,126,45,.14);color:#8b6521}
body[data-theme="light-ornament"] .cfg-apple-chip{background:rgba(170,126,45,.1);color:#8b6521;border-color:rgba(170,126,45,.24)}

/* ── Tooltip ───────────────────────────────────── */
.cfg-tooltip-trigger{position:relative;margin-left:auto;cursor:help;z-index:2}
.cfg-tooltip-icon{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;font-size:10px;font-weight:800;color:var(--muted);border:1.5px solid rgba(148,163,184,.25);background:rgba(255,255,255,.03);flex-shrink:0;transition:border-color .18s,color .18s}
.cfg-tooltip-text{position:absolute;right:-8px;bottom:calc(100% + 10px);width:260px;padding:12px 14px;border-radius:14px;font-size:13px;font-weight:500;line-height:1.55;background:rgba(9,14,30,.96);color:#e6e9ef;border:1px solid rgba(148,163,184,.14);box-shadow:0 16px 40px rgba(2,6,23,.28);pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity .2s,transform .2s;z-index:20}
.cfg-tooltip-trigger:hover .cfg-tooltip-text,.cfg-tooltip-trigger:focus-within .cfg-tooltip-text{opacity:1;transform:translateY(0);pointer-events:auto}
body.light .cfg-tooltip-text{background:rgba(255,255,255,.98);color:#0f172a;border-color:rgba(15,23,42,.1);box-shadow:0 16px 40px rgba(15,23,42,.12)}
body[data-theme="dark-ornament"] .cfg-tooltip-text{background:rgba(18,14,12,.98);border-color:rgba(209,163,79,.14)}
body[data-theme="light-ornament"] .cfg-tooltip-text{background:rgba(255,252,246,.98);color:#2a2014;border-color:rgba(170,126,45,.12)}

/* ── Navigation buttons ────────────────────────── */
.cfg-nav-buttons{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.cfg-nav-buttons .button{min-width:120px;text-align:center;font-size:15px;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease}
.cfg-nav-buttons .button:hover{transform:translateY(-1px)}
.cfg-nav-buttons .button:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}

/* ── Budget / Timeline selectors ───────────────── */
.cfg-radio-group{display:grid;gap:8px}
.cfg-radio-group-label{font-size:14px;font-weight:700;margin-bottom:4px}
.cfg-radio-item{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:16px;border:1px solid rgba(148,163,184,.1);background:rgba(255,255,255,.02);cursor:pointer;transition:all .22s ease}
.cfg-radio-item:hover{border-color:rgba(79,70,229,.2);background:rgba(79,70,229,.03)}
.cfg-radio-item.is-selected{border-color:rgba(79,70,229,.4);background:rgba(79,70,229,.08)}
body[data-theme="dark-ornament"] .cfg-radio-item.is-selected{border-color:rgba(209,163,79,.35);background:rgba(209,163,79,.07)}
body[data-theme="light-ornament"] .cfg-radio-item.is-selected{border-color:rgba(170,126,45,.3);background:rgba(170,126,45,.06)}
.cfg-radio-dot{width:20px;height:20px;border-radius:50%;border:2px solid rgba(148,163,184,.25);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:border-color .18s}
.cfg-radio-dot::after{content:"";width:10px;height:10px;border-radius:50%;background:linear-gradient(135deg,#4f46e5,#22d3ee);opacity:0;transform:scale(0);transition:opacity .18s,transform .18s}
.cfg-radio-item.is-selected .cfg-radio-dot{border-color:#4f46e5}
.cfg-radio-item.is-selected .cfg-radio-dot::after{opacity:1;transform:scale(1)}
body[data-theme="dark-ornament"] .cfg-radio-item.is-selected .cfg-radio-dot{border-color:#c9933a}
body[data-theme="dark-ornament"] .cfg-radio-item.is-selected .cfg-radio-dot::after{background:linear-gradient(135deg,#c9933a,#f6d288)}
.cfg-radio-label{font-size:14px;font-weight:600}
.cfg-radio-hint{font-size:12px;color:var(--muted)}

/* ── Visual Style Cards ────────────────────────── */
.cfg-style-card{grid-template-columns:1fr!important;padding:0!important;overflow:hidden}
.cfg-style-preview{height:64px;display:flex;align-items:stretch;border-radius:19px 19px 0 0;overflow:hidden}
.cfg-style-swatch{flex:1;transition:background .3s ease}
.cfg-style-info{padding:14px 16px;display:grid;gap:2px}
.cfg-style-name{font-size:15px;font-weight:700;letter-spacing:-.02em}
.cfg-style-tag{font-size:11px;color:var(--muted);letter-spacing:.02em}

/* ── Live Preview Panel ────────────────────────── */
.cfg-preview-frame{border-radius:24px;border:1px solid rgba(148,163,184,.1);background:rgba(9,14,30,.6);overflow:hidden;min-height:360px;position:relative;transition:border-color .3s ease,box-shadow .4s ease}
body.light .cfg-preview-frame,body[data-theme="light-ornament"] .cfg-preview-frame{background:rgba(255,255,255,.7);border-color:rgba(15,23,42,.08)}
body[data-theme="dark-ornament"] .cfg-preview-frame{background:rgba(18,14,12,.7);border-color:rgba(209,163,79,.1)}

.cfg-preview-header{padding:10px 14px;border-bottom:1px solid rgba(148,163,184,.08);display:flex;align-items:center;gap:8px}
.cfg-preview-dots{display:flex;gap:5px}
.cfg-preview-dots span{width:10px;height:10px;border-radius:50%}
.cfg-preview-dots span:nth-child(1){background:#ef4444}
.cfg-preview-dots span:nth-child(2){background:#f59e0b}
.cfg-preview-dots span:nth-child(3){background:#22c55e}
.cfg-preview-title{font-size:11px;font-weight:700;opacity:.4;margin-left:auto;letter-spacing:.02em}
.cfg-preview-url{font-size:10px;opacity:.25;margin-left:4px;font-family:monospace}

.cfg-preview-body{padding:0;min-height:300px;display:flex;flex-direction:column;transition:background .4s ease,color .4s ease;position:relative;overflow:hidden}

/* ── Mockup: Status bar (iOS) ──────────────────── */
.mock-statusbar{display:flex;justify-content:space-between;align-items:center;padding:4px 16px;font-size:9px;font-weight:700;opacity:.5}
.mock-statusbar-time{letter-spacing:.02em}
.mock-statusbar-icons{display:flex;gap:4px;align-items:center}
.mock-statusbar-icons span{display:block;width:14px;height:8px;border-radius:2px;border:1px solid currentColor;opacity:.6}

/* ── Mockup: Navigation ────────────────────────── */
.mock-topnav{display:flex;justify-content:space-between;align-items:center;padding:8px 16px}
.mock-topnav-title{font-size:14px;font-weight:800;letter-spacing:-.02em}
.mock-topnav-actions{display:flex;gap:6px}
.mock-topnav-btn{width:28px;height:28px;border-radius:50%;opacity:.12}

.mock-tabnav{display:flex;gap:0;border-top:1px solid rgba(128,128,128,.1);padding:6px 12px}
.mock-tabnav-item{flex:1;text-align:center;font-size:8px;font-weight:700;opacity:.3;padding:4px 0;display:flex;flex-direction:column;align-items:center;gap:2px}
.mock-tabnav-item.is-active{opacity:.7}
.mock-tabnav-dot{width:4px;height:4px;border-radius:50%}

/* ── Mockup: Content blocks ────────────────────── */
.mock-content{flex:1;padding:12px 16px;display:flex;flex-direction:column;gap:10px;overflow:hidden}

.mock-hero{border-radius:14px;padding:16px;min-height:60px;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;position:relative;overflow:hidden}
.mock-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.4),transparent);border-radius:inherit}
.mock-hero-title{font-size:12px;font-weight:800;position:relative;z-index:1;letter-spacing:-.02em}
.mock-hero-sub{font-size:8px;opacity:.7;position:relative;z-index:1}

.mock-section-title{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;opacity:.35;margin-top:4px}

.mock-card-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mock-card{border-radius:12px;padding:10px;border:1px solid rgba(128,128,128,.08);display:flex;flex-direction:column;gap:4px;min-height:48px}
.mock-card-icon{width:22px;height:22px;border-radius:8px;opacity:.2}
.mock-card-title{font-size:9px;font-weight:700;opacity:.6}
.mock-card-value{font-size:14px;font-weight:800;opacity:.7}
.mock-card-bar{height:4px;border-radius:2px;opacity:.15;width:70%}

/* ── Mockup: Chat ──────────────────────────────── */
.mock-chat-messages{display:flex;flex-direction:column;gap:6px}
.mock-chat-bubble{max-width:70%;padding:8px 12px;border-radius:14px;font-size:8px;font-weight:600;opacity:.6;line-height:1.4}
.mock-chat-bubble.is-sent{align-self:flex-end;border-bottom-right-radius:4px}
.mock-chat-bubble.is-received{align-self:flex-start;border-bottom-left-radius:4px;opacity:.3;border:1px solid rgba(128,128,128,.1)}
.mock-chat-input{display:flex;gap:8px;align-items:center;padding:8px 12px;border-radius:20px;border:1px solid rgba(128,128,128,.1);margin-top:auto}
.mock-chat-input-field{flex:1;height:8px;border-radius:4px;opacity:.12}
.mock-chat-input-send{width:24px;height:24px;border-radius:50%;opacity:.3}

/* ── Mockup: Sidebar (admin/web) ───────────────── */
.mock-sidebar-layout{display:grid;grid-template-columns:52px 1fr;flex:1;overflow:hidden}
.mock-sidebar{display:flex;flex-direction:column;gap:2px;padding:8px 6px;border-right:1px solid rgba(128,128,128,.06)}
.mock-sidebar-item{width:100%;height:32px;border-radius:8px;opacity:.06;display:flex;align-items:center;justify-content:center;font-size:12px}
.mock-sidebar-item.is-active{opacity:.15}
.mock-sidebar-main{padding:12px;display:flex;flex-direction:column;gap:8px;overflow:hidden}

/* ── Mockup: Table (admin) ─────────────────────── */
.mock-table{border-radius:10px;overflow:hidden;border:1px solid rgba(128,128,128,.06)}
.mock-table-header{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:0;padding:6px 10px;opacity:.2;font-size:7px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.mock-table-row{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:0;padding:6px 10px;border-top:1px solid rgba(128,128,128,.04)}
.mock-table-cell{height:6px;border-radius:3px;opacity:.08;margin:2px 4px}

/* ── Mockup: Product grid (shop) ───────────────── */
.mock-product-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mock-product{border-radius:12px;overflow:hidden;border:1px solid rgba(128,128,128,.06)}
.mock-product-img{height:48px;opacity:.1}
.mock-product-info{padding:6px 8px;display:flex;flex-direction:column;gap:2px}
.mock-product-name{height:6px;border-radius:3px;opacity:.15;width:70%}
.mock-product-price{font-size:10px;font-weight:800;opacity:.5}

/* ── Mockup: Feature pills ─────────────────────── */
.mock-feature-pills{display:flex;flex-wrap:wrap;gap:4px;margin-top:auto;padding-top:6px}
.mock-feature-pill{padding:3px 8px;border-radius:999px;font-size:7px;font-weight:700;opacity:.5;border:1px solid rgba(128,128,128,.1);white-space:nowrap}

/* ── Mockup: Watermark ─────────────────────────── */
.mock-watermark{text-align:center;padding:6px;font-size:8px;font-weight:700;opacity:.15;letter-spacing:.06em;margin-top:auto}

.cfg-preview-mock-nav{height:8px;border-radius:4px;width:60%;opacity:.3}
.cfg-preview-mock-hero{height:48px;border-radius:12px;opacity:.15}
.cfg-preview-mock-text{height:6px;border-radius:3px;opacity:.12}
.cfg-preview-mock-btn{height:32px;border-radius:8px;width:40%;opacity:.25}
.cfg-preview-mock-card{height:56px;border-radius:10px;opacity:.08;border:1px solid rgba(255,255,255,.06)}
.cfg-preview-mock-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cfg-preview-mock-sidebar{display:grid;grid-template-columns:60px 1fr;gap:12px}
.cfg-preview-mock-sidebar-nav{display:grid;gap:6px;align-content:start}
.cfg-preview-mock-sidebar-item{height:8px;border-radius:4px;opacity:.15}
.cfg-preview-mock-content{display:grid;gap:8px;align-content:start}

.cfg-preview-feature-list{margin-top:8px;display:grid;gap:6px}
.cfg-preview-feature{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:600;opacity:.7;padding:6px 10px;border-radius:8px;background:rgba(255,255,255,.04)}
.cfg-preview-feature-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}

/* ── Summary Card ──────────────────────────────── */
.cfg-summary-card{margin-top:16px;padding:20px;border-radius:20px;border:1px solid rgba(148,163,184,.1);background:rgba(255,255,255,.03);display:grid;gap:14px}
body.light .cfg-summary-card,body[data-theme="light-ornament"] .cfg-summary-card{background:rgba(15,23,42,.02)}
body[data-theme="dark-ornament"] .cfg-summary-card{border-color:rgba(209,163,79,.1)}

/* ── Screen Detail Preview Card ───────────────── */
.cfg-screen-detail-card{margin-top:12px;border-radius:18px;border:1px solid rgba(148,163,184,.12);overflow:hidden;animation:cfgStepIn .3s ease both}
body.light .cfg-screen-detail-card{border-color:rgba(15,23,42,.06)}
body[data-theme="dark-ornament"] .cfg-screen-detail-card{border-color:rgba(209,163,79,.12)}

.cfg-screen-detail-header{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:rgba(255,255,255,.03);border-bottom:1px solid rgba(148,163,184,.06)}
body.light .cfg-screen-detail-header{background:rgba(15,23,42,.02)}
.cfg-screen-detail-label{font-size:12px;font-weight:700;letter-spacing:-.01em}
.cfg-screen-detail-nav{display:flex;align-items:center;gap:6px}
.cfg-screen-detail-counter{font-size:10px;font-weight:700;opacity:.4;min-width:28px;text-align:center}
.cfg-screen-nav-btn{width:24px;height:24px;border-radius:50%;border:1px solid rgba(148,163,184,.15);background:rgba(255,255,255,.03);color:inherit;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;transition:all .18s ease}
.cfg-screen-nav-btn:hover:not(:disabled){border-color:rgba(79,70,229,.3);background:rgba(79,70,229,.08)}
.cfg-screen-nav-btn:disabled{opacity:.25;cursor:not-allowed}
.cfg-screen-detail-body{min-height:120px;transition:background .3s ease}
.cfg-screen-visual{display:grid;grid-template-rows:minmax(170px,1fr) auto;min-height:220px}
.cfg-screen-visual-image{width:100%;height:100%;object-fit:cover;display:block}
.cfg-screen-visual-caption{padding:10px 12px;border-top:1px solid rgba(148,163,184,.12);font-size:11px;font-weight:600;letter-spacing:.02em;color:rgba(226,232,240,.78)}
body.light .cfg-screen-visual-caption,
body[data-theme="light-ornament"] .cfg-screen-visual-caption{color:rgba(15,23,42,.7);border-top-color:rgba(15,23,42,.1)}
.cfg-screen-visual--fallback{display:block;min-height:220px}

.cfg-summary-title{font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.cfg-summary-row{display:flex;justify-content:space-between;align-items:center;font-size:14px}
.cfg-summary-label{color:var(--muted);font-weight:600}
.cfg-summary-value{font-weight:700}

.cfg-complexity-bar{height:8px;border-radius:999px;background:rgba(148,163,184,.12);overflow:hidden}
.cfg-complexity-fill{height:100%;border-radius:inherit;transition:width .4s ease,background .4s ease}
.cfg-complexity-fill.level-low{background:linear-gradient(90deg,#22c55e,#4ade80);width:20%}
.cfg-complexity-fill.level-mid{background:linear-gradient(90deg,#f59e0b,#fbbf24);width:50%}
.cfg-complexity-fill.level-high{background:linear-gradient(90deg,#f97316,#ef4444);width:75%}
.cfg-complexity-fill.level-enterprise{background:linear-gradient(90deg,#8b5cf6,#ec4899);width:95%}

.cfg-price-range{font-size:18px;font-weight:800;letter-spacing:-.02em;background:linear-gradient(90deg,#4facfe,#00f2fe);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
body[data-theme="dark-ornament"] .cfg-price-range{background:linear-gradient(90deg,#f6d187,#fff4de);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
body[data-theme="light-ornament"] .cfg-price-range{background:linear-gradient(90deg,#9a6b21,#d5a652);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ── Brief Card ────────────────────────────────── */
.cfg-brief-card{padding:24px;border-radius:24px;border:1px solid rgba(148,163,184,.1);background:rgba(255,255,255,.03);display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:640px){.cfg-brief-card{grid-template-columns:1fr 1fr}}
body.light .cfg-brief-card,body[data-theme="light-ornament"] .cfg-brief-card{background:rgba(15,23,42,.02)}
.cfg-brief-section{display:grid;gap:6px;padding-bottom:14px;border-bottom:1px solid rgba(148,163,184,.06)}
.cfg-brief-section:last-child{border-bottom:none;padding-bottom:0}
.cfg-brief-label{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.cfg-brief-value{font-size:15px;font-weight:600;line-height:1.5}
.cfg-brief-list{margin:0;padding:0 0 0 18px;font-size:14px;line-height:1.7}
.cfg-brief-actions{display:flex;gap:10px;flex-wrap:wrap}

/* ── Contact Form ──────────────────────────────── */
.cfg-contact-form{display:grid;gap:16px}
.cfg-form-section-label{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:4px;display:flex;align-items:center;gap:8px}
.cfg-form-row{display:grid;gap:14px}
@media(min-width:540px){.cfg-form-row{grid-template-columns:1fr 1fr}}

/* ── Submit Feedback ───────────────────────────── */
.cfg-submit-feedback{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border-radius:14px;border:1px solid rgba(148,163,184,.18);background:rgba(15,23,42,.22);margin:6px 0 18px;animation:cfgStepIn .28s ease both}
.cfg-submit-feedback[hidden]{display:none!important}
.cfg-submit-feedback__icon{width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;flex-shrink:0}
.cfg-submit-feedback__body{display:grid;gap:4px}
.cfg-submit-feedback__title{font-size:14px;font-weight:800;letter-spacing:-.01em}
.cfg-submit-feedback__text{font-size:13px;line-height:1.5;color:var(--muted)}
.cfg-submit-feedback.is-success{border-color:rgba(34,197,94,.36);background:rgba(34,197,94,.08)}
.cfg-submit-feedback.is-success .cfg-submit-feedback__icon{background:linear-gradient(135deg,#22c55e,#4ade80);color:#fff}
.cfg-submit-feedback.is-error{border-color:rgba(239,68,68,.34);background:rgba(239,68,68,.08)}
.cfg-submit-feedback.is-error .cfg-submit-feedback__icon{background:linear-gradient(135deg,#ef4444,#f97316);color:#fff}
body.light .cfg-submit-feedback,body[data-theme="light-ornament"] .cfg-submit-feedback{background:rgba(255,255,255,.86);border-color:rgba(15,23,42,.12)}
body.light .cfg-submit-feedback__text,body[data-theme="light-ornament"] .cfg-submit-feedback__text{color:#334155}
.cfg-submit-brief-preview{display:flex;align-items:center;gap:10px;margin-top:10px;padding:10px 12px;border-radius:12px;border:1px solid rgba(79,70,229,.22);background:rgba(79,70,229,.08);color:inherit;cursor:pointer;transition:transform .2s ease,border-color .2s ease,background .2s ease;text-align:left}
.cfg-submit-brief-preview:hover,.cfg-submit-brief-preview:focus-visible{transform:translateY(-1px);border-color:rgba(79,70,229,.4);background:rgba(79,70,229,.14);outline:none}
.cfg-submit-brief-preview__icon{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:rgba(79,70,229,.18)}
.cfg-submit-brief-preview__meta{display:grid;gap:2px}
.cfg-submit-brief-preview__title{font-size:12px;font-weight:700}
.cfg-submit-brief-preview__hint{font-size:11px;color:var(--muted)}
body.light .cfg-submit-brief-preview,body[data-theme="light-ornament"] .cfg-submit-brief-preview{border-color:rgba(37,99,235,.2);background:rgba(37,99,235,.08)}
body.light .cfg-submit-brief-preview__hint,body[data-theme="light-ornament"] .cfg-submit-brief-preview__hint{color:#475569}

/* ── Submit Overlay ───────────────────────────── */
.cfg-submit-overlay{position:fixed;inset:0;display:grid;place-items:center;z-index:1000}
.cfg-submit-overlay[hidden]{display:none!important}
.cfg-submit-overlay__backdrop{position:absolute;inset:0;background:rgba(2,6,23,.52);backdrop-filter:blur(4px)}
.cfg-submit-overlay__panel{position:relative;z-index:2;display:grid;justify-items:center;gap:12px;max-width:420px;padding:30px 26px;border-radius:24px;border:1px solid rgba(148,163,184,.18);background:rgba(9,14,30,.88);box-shadow:0 24px 60px rgba(2,6,23,.35)}
.cfg-submit-overlay__title{font-size:18px;font-weight:700;letter-spacing:-.01em}
.cfg-submit-overlay__subtitle{font-size:13px;line-height:1.55;color:var(--muted);text-align:center}
.cfg-loader-logo{position:relative;width:130px;height:130px;display:grid;place-items:center}
.cfg-loader-core{width:74px;height:74px;border-radius:22px;display:grid;place-items:center;font-size:32px;font-weight:800;letter-spacing:-.05em;color:#f8fafc;background:linear-gradient(135deg,rgba(79,70,229,.85),rgba(34,211,238,.85));box-shadow:0 14px 30px rgba(79,70,229,.35)}
.cfg-loader-orbit{position:absolute;left:50%;top:50%;border-radius:50%;border:1px solid rgba(148,163,184,.25);transform-origin:center;animation:cfgOrbit 3.2s linear infinite}
.cfg-loader-orbit--one{width:92px;height:92px;margin:-46px 0 0 -46px}
.cfg-loader-orbit--two{width:118px;height:118px;margin:-59px 0 0 -59px;animation-duration:4.2s;animation-direction:reverse}
.cfg-loader-orbit--three{width:130px;height:130px;margin:-65px 0 0 -65px;animation-duration:5.4s;opacity:.65}
@keyframes cfgOrbit{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
body.light .cfg-submit-overlay__panel,body[data-theme="light-ornament"] .cfg-submit-overlay__panel{background:rgba(255,255,255,.92);border-color:rgba(15,23,42,.14)}
body.light .cfg-submit-overlay__title,body[data-theme="light-ornament"] .cfg-submit-overlay__title{color:#0f172a}
body.light .cfg-submit-overlay__subtitle,body[data-theme="light-ornament"] .cfg-submit-overlay__subtitle{color:#475569}
body.light .cfg-loader-core,body[data-theme="light-ornament"] .cfg-loader-core{color:#f8fafc}

/* ── Brief Modal ──────────────────────────────── */
.cfg-brief-modal{position:fixed;inset:0;z-index:1001;display:grid;place-items:center;padding:20px}
.cfg-brief-modal[hidden]{display:none!important}
.cfg-brief-modal__backdrop{position:absolute;inset:0;background:rgba(2,6,23,.7);backdrop-filter:blur(6px)}
.cfg-brief-modal__panel{position:relative;z-index:2;width:min(1200px,calc(100vw - 40px));height:min(92vh,900px);display:grid;grid-template-rows:auto auto 1fr;gap:12px;padding:14px;border-radius:20px;border:1px solid rgba(148,163,184,.2);background:rgba(9,14,30,.92);box-shadow:0 30px 70px rgba(2,6,23,.45)}
.cfg-brief-modal__head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:2px 4px}
.cfg-brief-modal__head h3{margin:0;font-size:18px;font-weight:700;letter-spacing:-.01em}
.cfg-brief-modal__close{width:34px;height:34px;border-radius:10px;border:1px solid rgba(148,163,184,.24);background:rgba(255,255,255,.03);color:inherit;cursor:pointer;font-size:18px;line-height:1}
.cfg-brief-modal__close:hover,.cfg-brief-modal__close:focus-visible{border-color:rgba(79,70,229,.45);background:rgba(79,70,229,.14);outline:none}
.cfg-brief-modal__actions{display:flex;justify-content:flex-end}
.cfg-brief-modal__body{min-height:0;border-radius:14px;overflow:hidden;border:1px solid rgba(148,163,184,.16);background:#fff}
.cfg-brief-modal__body iframe{width:100%;height:100%;border:none;background:#fff}
body.light .cfg-brief-modal__panel,body[data-theme="light-ornament"] .cfg-brief-modal__panel{background:rgba(255,255,255,.95);border-color:rgba(15,23,42,.12);color:#0f172a}
body.light .cfg-brief-modal__close,body[data-theme="light-ornament"] .cfg-brief-modal__close{border-color:rgba(15,23,42,.12);background:rgba(15,23,42,.03)}
body.cfg-overlay-open,body.cfg-modal-open{overflow:hidden}


/* ── Responsive ────────────────────────────────── */
@media(max-width:640px){
  .cfg-card-grid{grid-template-columns:1fr!important}
  .cfg-checkbox-grid{grid-template-columns:1fr}
  .cfg-header h1{font-size:24px}
  .cfg-progress-step span:not(.cfg-progress-num){display:none}
  .cfg-progress-step{padding:6px 8px}
  .cfg-brief-card{padding:16px}
  .cfg-brief-modal{padding:10px}
  .cfg-brief-modal__panel{width:calc(100vw - 20px);height:min(92vh,780px);padding:10px}
  .cfg-submit-overlay__panel{max-width:340px;padding:24px 20px}
  .cfg-loader-logo{width:108px;height:108px}
  .cfg-loader-core{width:64px;height:64px;font-size:28px}
}

@media (prefers-reduced-motion: reduce){
  .cfg-loader-orbit,
  .cfg-header-cursor{animation:none!important}
  .cfg-submit-overlay__backdrop{backdrop-filter:none}
}

/* ── Print styles for brief ────────────────────── */
@media print{
  .cfg-header,.cfg-progress,.cfg-nav-buttons,.cfg-preview-panel,.bottom-nav,.nav,.sheet{display:none!important}
  .cfg-brief-card{border:1px solid #ccc;box-shadow:none;page-break-inside:avoid}
}

/* ═══════════════════════════════════════════════════════════
   AESTHETIC POLISH — Premium feel enhancements
   ═══════════════════════════════════════════════════════════ */

/* Selected card glow pulse */
.cfg-option-card.is-selected{box-shadow:0 0 0 1px rgba(79,70,229,.2),0 8px 32px rgba(79,70,229,.12),0 0 60px -12px rgba(79,70,229,.15)}
body[data-theme="dark-ornament"] .cfg-option-card.is-selected{box-shadow:0 0 0 1px rgba(209,163,79,.2),0 8px 32px rgba(209,163,79,.1),0 0 60px -12px rgba(209,163,79,.12)}
body[data-theme="light-ornament"] .cfg-option-card.is-selected{box-shadow:0 0 0 1px rgba(170,126,45,.15),0 8px 32px rgba(170,126,45,.08)}

/* Checkbox selection pulse */
.cfg-checkbox-item.is-checked .cfg-check-box::after{animation:cfgCheckPulse .3s ease}
@keyframes cfgCheckPulse{0%{transform:scale(0)}50%{transform:scale(1.3)}100%{transform:scale(1)}}

/* Preview body transition for smoother color changes */
.cfg-preview-body *{transition:background .35s ease,border-color .35s ease,opacity .35s ease}

/* Feature list items stagger animation */
.cfg-preview-feature{animation:cfgFeatureSlide .25s ease both}
.cfg-preview-feature:nth-child(1){animation-delay:0s}
.cfg-preview-feature:nth-child(2){animation-delay:.04s}
.cfg-preview-feature:nth-child(3){animation-delay:.08s}
.cfg-preview-feature:nth-child(4){animation-delay:.12s}
.cfg-preview-feature:nth-child(5){animation-delay:.16s}
@keyframes cfgFeatureSlide{from{opacity:0;transform:translateX(-8px)}to{opacity:.7;transform:translateX(0)}}

/* Mock elements — better visibility */
.cfg-preview-mock-nav{opacity:.4}
.cfg-preview-mock-hero{opacity:.2}
.cfg-preview-mock-btn{opacity:.35}
.cfg-preview-mock-card{opacity:.1;border:1px solid rgba(255,255,255,.08)}

/* Style card hover zoom on swatches */
.cfg-style-card:hover .cfg-style-preview{filter:brightness(1.1)}
.cfg-style-card.is-selected .cfg-style-preview{filter:brightness(1.15) saturate(1.1)}

/* Summary card — subtle glow when score changes */
.cfg-summary-card{transition:border-color .3s ease,box-shadow .3s ease}

/* Complexity bar thicker on hover */
.cfg-complexity-bar{height:10px;transition:height .2s ease}

/* Nav button hover glow */
.cfg-nav-buttons .button:not(.secondary):hover{box-shadow:0 12px 30px rgba(56,189,248,.2)}
body[data-theme="dark-ornament"] .cfg-nav-buttons .button:not(.secondary):hover{box-shadow:0 12px 30px rgba(209,163,79,.2)}

/* Brief section dividers — gradient fade */
.cfg-brief-section{border-bottom:1px solid rgba(148,163,184,.08)}
.cfg-brief-section:last-child{border-bottom:none}

/* Contact form inputs — match configurator style */
.cfg-contact-form .project-field input,.cfg-contact-form .project-field textarea{border-radius:14px}
.cfg-contact-form .project-field input:focus-visible,.cfg-contact-form .project-field textarea:focus-visible{outline:2px solid rgba(79,70,229,.2);outline-offset:2px;border-color:rgba(79,70,229,.24)}

/* Header title gradient matching theme */
.cfg-header h1{background:linear-gradient(90deg,#4facfe,#00f2fe);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
body.light .cfg-header h1{background:linear-gradient(90deg,#1d4ed8,#0ea5e9);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
body[data-theme="dark-ornament"] .cfg-header h1{background:linear-gradient(90deg,#f6d187,#fff4de);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
body[data-theme="light-ornament"] .cfg-header h1{background:linear-gradient(90deg,#9a6b21,#d5a652);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* Step headings — gradient */
.cfg-step h2{background:linear-gradient(90deg,#e2e8f0,#94a3b8);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
body.light .cfg-step h2{background:linear-gradient(90deg,#0f172a,#334155);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
body[data-theme="dark-ornament"] .cfg-step h2{background:linear-gradient(90deg,#f4efe6,#c9b896);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
body[data-theme="light-ornament"] .cfg-step h2{background:linear-gradient(90deg,#2a2014,#6b5130);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* Radio item — flex-wrap for label+hint */
.cfg-radio-item{flex-wrap:wrap}
.cfg-radio-hint{width:100%;padding-left:32px;margin-top:-4px}