:root{
  --bg:#f7f4ff; --bg2:#fffdfa; --text:#1f2937; --muted:#6b7280; --line:#eadcff; --card:#ffffff; --accent:#8b5cf6; --accent2:#c084fc; --shadow:0 18px 55px rgba(139,92,246,.12); --radius:28px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,sans-serif;color:var(--text);background:linear-gradient(180deg,var(--bg),#fff);min-height:100%;}
body{overflow-x:hidden}
.bg-orb{position:fixed;border-radius:999px;filter:blur(80px);pointer-events:none;z-index:0;opacity:.28}
.bg-orb-1{width:280px;height:280px;background:#d8b4fe;top:-70px;left:-80px}
.bg-orb-2{width:340px;height:340px;background:#fde68a;right:-100px;bottom:-120px}
.app-shell{position:relative;z-index:1;max-width:760px;margin:0 auto;padding:16px 14px 40px}
.screen{display:none;animation:fadeUp .35s ease}
.screen.active{display:block}
.card,.intro-card{background:rgba(255,255,255,.86);backdrop-filter:blur(8px);border:1px solid rgba(234,220,255,.9);border-radius:32px;box-shadow:var(--shadow)}
.intro-card{padding:18px;display:grid;gap:18px}
.eyebrow,.mini-label,.result-badge,.trust-chip,.status-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;font-size:12px;font-weight:700}
.eyebrow{background:#f0e8ff;color:#7c3aed}
.mini-label,.result-badge,.trust-chip,.status-chip{background:#fff2e2;color:#c26c10}
h1,h2,h3{margin:0 0 10px;line-height:1.05;letter-spacing:-.03em}
h1{font-size:clamp(34px,7.6vw,58px);font-weight:800}
h2{font-size:clamp(28px,6vw,42px);font-weight:800}
h3{font-size:20px;font-weight:800}
.intro-sub,.muted{font-size:16px;line-height:1.55;color:var(--muted)}
.pill-row{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 8px}
.pill{padding:10px 14px;border-radius:999px;background:#f4efff;color:#7c3aed;font-size:13px;font-weight:600}
.btn{appearance:none;border:0;cursor:pointer;transition:.22s ease;display:inline-flex;align-items:center;justify-content:center;font-weight:800}
.btn-primary{padding:16px 24px;border-radius:18px;color:#fff;background:linear-gradient(90deg,var(--accent),#a855f7);box-shadow:0 12px 28px rgba(139,92,246,.24)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 16px 32px rgba(139,92,246,.26)}
.btn-primary:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn-full{width:100%;margin-top:18px}
.intro-media img,.question-media img{width:100%;display:block;border-radius:24px;border:1px solid #efe8ff;background:#fff;aspect-ratio:4/3;object-fit:cover}
.screen-form,.screen-question,.screen-result,.screen-offer{margin-top:14px}
.panel-card,.question-shell,.result-card,.offer-main,.offer-side{padding:18px}
.form-grid{display:grid;grid-template-columns:1fr;gap:12px;margin-top:18px}
.field label{display:block;font-size:13px;font-weight:600;margin:0 0 8px;color:#4b5563}
.field input,.field select,.field textarea,.admin-card input,.admin-card textarea,.admin-card select{width:100%;border:1.5px solid #eadcff;background:#fcfbff;border-radius:16px;padding:15px 14px;font:inherit;color:var(--text);outline:none;transition:.2s ease}
.field textarea,.admin-card textarea{min-height:110px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus,.admin-card input:focus,.admin-card textarea:focus,.admin-card select:focus{border-color:var(--accent);box-shadow:0 0 0 4px rgba(139,92,246,.1)}
.field-full{grid-column:1/-1}
.question-topbar{display:flex;gap:12px;align-items:center;margin-bottom:16px}
.btn-back{border:0;background:#f4efff;color:#111827;border-radius:18px;padding:13px 16px;font-size:16px;font-weight:800}
.progress-wrap{flex:1}
.progress-meta{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:#6b7280;margin-bottom:10px}
.progress{height:10px;background:#efe8ff;border-radius:999px;overflow:hidden}
.progress > div{height:100%;width:0;background:linear-gradient(90deg,var(--accent),#d8b4fe);border-radius:inherit;transition:width .3s ease}
.question-body{display:grid;gap:16px}
.options-grid{display:grid;gap:12px}
.option-card{display:flex;align-items:center;gap:14px;padding:12px;border:1.5px solid #eadcff;border-radius:22px;background:#fff;cursor:pointer;transition:.2s ease;position:relative;overflow:hidden}
.option-card:hover{transform:translateY(-1px);border-color:#d4b8ff;box-shadow:0 10px 22px rgba(139,92,246,.08)}
.option-card.selected{border-color:var(--accent);box-shadow:0 12px 30px rgba(139,92,246,.12);background:linear-gradient(180deg,#fff,#faf7ff)}
.option-thumb{width:76px;height:76px;border-radius:18px;object-fit:cover;flex:0 0 76px;background:#f7f4ff;border:1px solid #efe8ff}
.option-radio{width:24px;height:24px;border:2px solid #d8b4fe;border-radius:999px;display:inline-block;position:relative;flex:0 0 24px}
.option-card.selected .option-radio::after{content:"";position:absolute;inset:4px;border-radius:999px;background:var(--accent)}
.option-label{font-size:17px;font-weight:700;line-height:1.25;letter-spacing:-.01em}
.audio-box,.video-box{background:#faf7ff;border:1px dashed #d4b8ff;border-radius:18px;padding:14px;color:#6b7280}
.audio-box audio{width:100%}
.video-box iframe{width:100%;min-height:220px;border:0;border-radius:16px}
.placeholder-video{display:grid;place-items:center;min-height:220px;border-radius:18px;background:linear-gradient(135deg,#f7f4ff,#fff7ed);color:#6b7280;font-weight:600;text-align:center;padding:20px}
.result-card{text-align:center}
.result-points{display:grid;gap:12px;margin:18px 0}
.result-point{padding:16px;border-radius:20px;border:1px solid #eadcff;background:#fcfbff;text-align:left}
.result-point strong{display:block;margin-bottom:6px}
.offer-layout{display:grid;gap:14px}
.price-row{display:flex;align-items:end;gap:12px;margin:10px 0 8px}
.old{text-decoration:line-through;color:#9ca3af;font-weight:700}
.new{font-size:34px;font-weight:800;color:#111827}
.guarantee{font-size:14px;color:#6b7280}
.check-list{list-style:none;margin:16px 0;padding:0;display:grid;gap:10px}
.check-list li{padding-left:30px;position:relative;line-height:1.45}
.check-list li::before{content:"✓";position:absolute;left:0;top:0;width:22px;height:22px;border-radius:999px;display:grid;place-items:center;background:#ecfdf5;color:#16a34a;font-weight:800}
.freebies-grid,.testimonials-stack{display:grid;gap:12px;margin-top:16px}
.mini-card,.testimonial{padding:16px;border-radius:22px;background:#fff;border:1px solid #eadcff}
.testimonial p{margin:8px 0 10px;line-height:1.5}
.testimonial strong,.mini-card strong{display:block}
.testimonial span{font-size:13px;color:#6b7280}
.stars{color:#f59e0b;letter-spacing:1px}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* admin */
.admin-wrap{max-width:1180px;margin:0 auto;padding:18px 14px 40px}
.admin-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}
.admin-title{font-size:38px;font-weight:800;letter-spacing:-.03em}
.admin-nav{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.admin-nav a{padding:12px 14px;border-radius:16px;background:#fff;border:1px solid #eadcff;color:#111827;text-decoration:none;font-weight:700}
.admin-nav a.active{background:linear-gradient(90deg,var(--accent),#a855f7);color:#fff;border-color:transparent}
.admin-grid{display:grid;gap:16px}
.admin-card{background:rgba(255,255,255,.92);border:1px solid #eadcff;border-radius:28px;padding:16px;box-shadow:var(--shadow)}
.admin-card h3{margin-bottom:8px}
.admin-actions{display:flex;gap:10px;flex-wrap:wrap}
.small{font-size:13px;color:#6b7280}
.step-admin{border:1px solid #efe8ff;border-radius:22px;padding:14px;background:#fcfbff;margin-bottom:14px;cursor:grab}
.option-row{display:grid;grid-template-columns:1fr 88px 160px auto;gap:10px;margin-top:10px}
.kpi-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.kpi{padding:16px;border-radius:20px;background:linear-gradient(135deg,#fff,#f8f3ff);border:1px solid #eadcff}
.kpi strong{font-size:28px;display:block}
.table-wrap{overflow:auto}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:12px;border-bottom:1px solid #f0e7ff;text-align:left;font-size:14px;vertical-align:top}
.login-shell{min-height:100vh;display:grid;place-items:center;padding:20px}
.login-card{width:min(100%,420px);background:rgba(255,255,255,.92);border:1px solid #eadcff;border-radius:32px;padding:22px;box-shadow:var(--shadow)}

@media (min-width:760px){
  .app-shell{padding:26px 18px 48px}
  .intro-card{grid-template-columns:1.05fr .95fr;align-items:center;padding:26px}
  .form-grid{grid-template-columns:1fr 1fr}
  .question-body{grid-template-columns:.9fr 1.1fr;align-items:start}
  .result-points{grid-template-columns:repeat(3,1fr)}
  .offer-layout{grid-template-columns:1.05fr .95fr}
  .admin-grid.split{grid-template-columns:1.1fr .9fr}
}