:root{
    --bg:#040406;
    --panel:#0C0C10;
    --panel-border:rgba(207,161,82,0.18);
    --gold-light:#F5E3B8;
    --gold:#CFA152;
    --gold-dark:#9E7431;
    --ink:#EDE8DD;
    --ink-dim:#9C968A;
    --emerald:#3FA66C;
    --rose:#C2495A;
    --radius:18px;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  body{
    background:
      radial-gradient(ellipse at top, rgba(207,161,82,0.06), transparent 60%),
      var(--bg);
    color:var(--ink);
    font-family:'Plus Jakarta Sans', sans-serif;
    min-height:100vh;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.serif{ font-family:'Cinzel', serif; letter-spacing:0.02em; }
  .gold-text{
    background:linear-gradient(120deg, var(--gold-light), var(--gold) 55%, var(--gold-dark));
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .wrap{ max-width:640px; margin:0 auto; padding:0 20px 80px; }

  /* ===== HEADER ===== */
  header{ padding:24px 20px 18px; text-align:center; position:relative; }
  .brand-row{ display:inline-flex; align-items:center; gap:9px; }
  .brand-logo{ width:26px; height:26px; }
  .brand{ font-size:15px; font-weight:700; letter-spacing:0.18em; }
  .brand-by{ font-size:10px; color:var(--ink-dim); letter-spacing:0.08em; margin-top:3px; }
  .brand-by b{ color:var(--gold); font-weight:600; }
  .status-tag{ display:none; } /* AYUR-ENGINE badge retired — folded into single privacy line below */
  .status-dot{ width:6px; height:6px; border-radius:50%; background:var(--emerald); box-shadow:0 0 8px var(--emerald); animation:pulse 2s infinite; }
  @keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:0.35} }
  .privacy-line{ margin-top:8px; font-size:10.5px; color:var(--ink-dim); opacity:0.8; }

  /* Resume-routine icon — small persistent header shortcut, only shown
     when a saved routine actually exists (see updateSavedRoutineEntryPoint) */
  #resumeRoutineIcon{
    display:none; position:absolute; right:20px; top:24px;
    width:34px; height:34px; border-radius:50%;
    background:rgba(63,166,108,0.1); border:1px solid rgba(63,166,108,0.35);
    align-items:center; justify-content:center; font-size:14px; cursor:pointer;
  }

  /* Hero (home view) */
  .hero-title{ font-size:24px; line-height:1.32; text-align:center; margin:6px 0 10px; }
  .hero-sub{ font-size:12.5px; color:var(--ink-dim); text-align:center; line-height:1.55; padding:0 8px; margin-bottom:20px; }
  .hero-cta-row{ display:flex; gap:10px; margin-bottom:10px; }
  .hero-btn{ flex:1; border:none; border-radius:16px; padding:18px 10px; font-size:14.5px; font-weight:700; cursor:pointer; text-align:center; font-family:'Plus Jakarta Sans'; }
  .hero-btn-gold{ background:linear-gradient(135deg,var(--gold-light),var(--gold)); color:#1a1200; box-shadow:0 8px 24px rgba(207,161,82,0.22); }
  .hero-btn-outline{ background:transparent; border:1.5px solid var(--panel-border); color:var(--ink); }
  .hero-micro{ text-align:center; font-size:10px; color:var(--ink-dim); opacity:0.7; margin-bottom:26px; }
  .sample-section-label{ font-size:9.5px; letter-spacing:1.5px; color:var(--ink-dim); opacity:0.75; text-transform:uppercase; margin-bottom:10px; }
  .value-banner{ display:flex; align-items:center; gap:10px; background:rgba(207,161,82,0.07); border:1px solid var(--panel-border); border-radius:16px; padding:14px 16px; margin-top:22px; cursor:pointer; }
  .value-banner .icon{ font-size:18px; flex-shrink:0; }
  .value-banner p{ font-size:12px; color:var(--ink); line-height:1.5; }
  .value-banner p b{ color:var(--gold); font-weight:600; }

  /* Report — user photo + skin-balance score row */
  .report-user-photo-wrap{ text-align:center; margin-bottom:18px; }
  .report-user-photo{ width:76px; height:76px; border-radius:50%; object-fit:cover; border:2px solid var(--panel-border); }
  .score-desc-title{ font-size:14.5px; font-weight:700; color:var(--ink); line-height:1.3; }
  .score-desc-text{ font-size:11.5px; color:var(--ink-dim); line-height:1.5; margin-top:5px; }

  /* Skin Snapshot rows */
  .signal-title{ font-size:15px; color:var(--ink); font-weight:600; margin:4px 0 14px; }
  .signal-row{ display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid rgba(255,255,255,0.05); }
  .signal-row:last-child{ border-bottom:none; }
  .signal-badge{ width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,0.04); border:1px solid var(--panel-border); display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; }
  .signal-mid{ flex:1; min-width:0; }
  .signal-label{ font-size:12.5px; color:var(--ink); }
  .signal-val{ flex-shrink:0; width:58px; text-align:right; }
  .signal-num{ font-size:12.5px; font-weight:700; line-height:1.2; }
  .signal-word{ font-size:10px; margin-top:1px; }
  .val-good{ color:var(--emerald); }
  .val-mod{ color:var(--gold); }
  .val-high{ color:var(--rose); }

  /* Dosha — 3-column horizontal */
  .dosha-grid{ display:flex; gap:14px; margin-top:22px; }
  .dosha-col{ flex:1; }
  .dosha-col-name{ font-size:11px; letter-spacing:1px; color:var(--ink-dim); text-transform:uppercase; margin-bottom:6px; }
  .dosha-col-pct{ font-family:'Cinzel'; font-size:19px; font-weight:600; color:var(--ink); margin-bottom:8px; }

  /* Hide legacy zone-selector chip/tabs — zone is already known from the
     quiz, showing it again on the paywall was redundant. Elements stay in
     the DOM (untouched JS still toggles classes on them) — just visually
     hidden, so nothing breaks. */
  #zoneConfirmed, #pricingTabs{ display:none !important; }
  /* "89% OFF" duplicate discount badge — kept in DOM for the JS that sets
     its textContent, just visually hidden now that the strikethrough price
     alone communicates the discount. */
  #priceOff{ display:none !important; }
  /* WhatsApp field removed from paywall per product decision — kept in the
     DOM (hidden) so existing JS reading contactWhatsapp.value never breaks. */
  #contactWhatsappWrap{ display:none !important; }
  #requiredCaption{ display:none !important; }

  /* ===== CARD ===== */
  .card{
    background:var(--panel);
    border:1px solid var(--panel-border);
    border-radius:var(--radius);
    backdrop-filter:blur(25px);
    padding:24px;
    margin-top:18px;
  }

  /* ===== PRESETS ===== */
  .section-label{ font-size:11px; letter-spacing:0.14em; color:var(--ink-dim); text-transform:uppercase; margin:26px 4px 10px; }
  .presets{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:4px; }
  .preset{
    background:var(--panel); border:1px solid rgba(207,161,82,0.1); border-radius:12px;
    padding:10px 6px; text-align:center; cursor:pointer; transition:border-color .2s, transform .2s;
  }
  .preset:hover{ border-color:var(--gold); transform:translateY(-2px); }
  .preset-avatar{ width:32px; height:32px; border-radius:50%; margin:0 auto 6px; overflow:hidden; border:1px solid var(--panel-border); }
  .preset-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
  .preset-name{ font-size:10.5px; font-weight:700; }
  .preset-tag{ font-size:8.5px; color:var(--ink-dim); margin-top:1px; }

  /* ===== CAPTURE ===== */
  .capture-actions{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:16px; }
  .btn{
    border:none; cursor:pointer; font-family:'Plus Jakarta Sans',sans-serif; font-weight:700;
    border-radius:14px; padding:15px 18px; font-size:14px; transition:transform .15s, box-shadow .2s;
  }
  .btn:active{ transform:scale(0.97); }
  .btn-gold{
    background:linear-gradient(120deg,var(--gold-light),var(--gold) 50%,var(--gold-dark));
    background-size:200% 100%;
    color:#1a1305;
    box-shadow:0 6px 24px rgba(207,161,82,0.25);
    animation:shimmer 3.5s linear infinite;
  }
  @keyframes shimmer{ 0%{background-position:0% 0} 100%{background-position:200% 0} }
  .btn-outline{
    background:transparent; border:1px solid var(--panel-border); color:var(--ink);
  }
  .btn-full{ width:100%; }
  input[type=file]{ display:none; }

  /* ===== CAMERA VIEW ===== */
  .camera-wrap{ position:relative; border-radius:16px; overflow:hidden; background:#000; aspect-ratio:3/4; }
  .camera-wrap video, .camera-wrap canvas{ width:100%; height:100%; object-fit:cover; }
  .camera-ring{ position:absolute; inset:0; border:2px solid rgba(207,161,82,0.5); border-radius:16px; box-shadow:0 0 0 6px rgba(207,161,82,0.08) inset; pointer-events:none; animation:ringpulse 2.2s infinite; }
  .camera-error{
    position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding:28px; text-align:center; background:rgba(4,4,6,0.92);
  }
  .cam-err-icon{ font-size:32px; margin-bottom:14px; opacity:0.6; }
  .cam-err-title{ font-family:'Cinzel',serif; font-size:16px; margin-bottom:10px; color:var(--ink); }
  .cam-err-text{ font-size:12.5px; color:var(--ink-dim); line-height:1.6; }
  @keyframes ringpulse{ 0%,100%{box-shadow:0 0 0 6px rgba(207,161,82,0.08) inset} 50%{box-shadow:0 0 0 12px rgba(207,161,82,0.14) inset} }

  /* ===== LOADING VIEW ===== */
  .loading-frame{
    width:180px; height:180px; border-radius:50%; margin:10px auto 22px;
    border:2px solid var(--gold); overflow:hidden; position:relative;
    box-shadow:0 0 40px rgba(207,161,82,0.25);
  }
  .loading-frame img{ width:100%; height:100%; object-fit:cover; display:block; }
  .laser{
    position:absolute; left:0; right:0; height:3px;
    background:linear-gradient(90deg, transparent, var(--gold-light), transparent);
    box-shadow:0 0 12px 2px var(--gold-light);
    animation:sweep 2.1s ease-in-out infinite;
  }
  @keyframes sweep{ 0%{top:5%} 50%{top:92%} 100%{top:5%} }
  .progress-track{ height:6px; border-radius:100px; background:rgba(255,255,255,0.06); overflow:hidden; margin-top:6px; }
  .progress-fill{ height:100%; background:linear-gradient(90deg,var(--gold-dark),var(--gold),var(--gold-light)); width:0%; transition:width .4s ease; }
  .progress-pct{ text-align:right; font-size:11px; color:var(--gold-light); margin-top:6px; }
  .log-line{ font-size:12.5px; color:var(--ink-dim); text-align:center; margin-top:16px; min-height:18px; }

  /* ===== REPORT ===== */
  .report-meta{ display:flex; justify-content:space-between; font-size:11px; color:var(--ink-dim); margin-bottom:6px; }
  .disclaimer{
    font-size:9.5px; color:var(--ink-dim); opacity:0.65;
    padding:10px 4px 0; margin-top:12px; line-height:1.5; text-align:center;
    border-top:1px solid var(--panel-border); background:none; border-left:none; border-right:none; border-bottom:none; border-radius:0;
  }
  .inline-share-row{
    display:flex; align-items:center; justify-content:center; gap:12px;
    margin-top:14px; padding-top:14px; border-top:1px solid var(--panel-border);
  }
  .inline-share-label{ font-size:11px; color:var(--ink-dim); }
  .inline-share-icons{ display:flex; gap:8px; }
  .inline-share-icon{
    width:30px; height:30px; display:flex; align-items:center; justify-content:center;
    border-radius:50%; border:1px solid var(--panel-border); cursor:pointer; font-size:14px;
    transition:.2s;
  }
  .inline-share-icon:hover{ border-color:var(--gold); background:rgba(207,161,82,0.08); }
  .metrics-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:16px; }
  .ring-box{ text-align:center; padding:18px 10px; }
  .ring-svg{ width:110px; height:110px; }
  .ring-label{ font-size:10.5px; color:var(--ink-dim); margin-top:8px; letter-spacing:0.05em; }
  .ring-context{ font-size:10px; font-weight:700; margin-top:4px; letter-spacing:0.02em; }

  .progress-nudge{
    margin-top:14px; padding:12px 14px; border-radius:12px; font-size:12.5px; line-height:1.5;
    border:1px solid rgba(207,161,82,0.3);
    background:linear-gradient(135deg, rgba(207,161,82,0.08), rgba(63,166,108,0.05));
  }
  .progress-nudge b{ color:var(--gold-light); }

  /* ===== ROUTINE VIEW ===== */
  .phase-badge{
    display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:0.1em;
    padding:5px 14px; border-radius:100px; color:var(--gold-light);
    border:1px solid var(--panel-border); background:rgba(207,161,82,0.08);
  }
  .mini-spinner{
    width:34px; height:34px; margin:0 auto; border-radius:50%;
    border:3px solid rgba(207,161,82,0.15); border-top-color:var(--gold);
    animation:spin 0.9s linear infinite;
  }
  @keyframes spin{ to{ transform:rotate(360deg); } }
  .day-card{
    background:var(--panel); border:1px solid var(--panel-border); border-radius:16px;
    padding:16px 18px; margin-top:12px;
  }
  .day-card-title{ font-family:'Cinzel',serif; font-size:14px; font-weight:700; color:var(--gold-light); margin-bottom:2px; }
  .day-focus{ font-size:11.5px; color:var(--ink-dim); font-style:italic; margin-bottom:12px; }
  .day-slot-group{ margin-bottom:12px; }
  .day-slot-head{ font-size:12px; font-weight:700; color:var(--ink); margin-bottom:5px; display:flex; align-items:center; gap:6px; }
  .day-steps{ margin:0; padding-left:18px; }
  .day-steps li{ font-size:12.5px; line-height:1.55; margin-bottom:4px; color:var(--ink); }
  .day-slot{ font-size:12.5px; line-height:1.55; margin-bottom:8px; }
  .day-slot:last-child{ margin-bottom:0; }
  .day-slot b{ color:var(--ink); }
  .day-extra{ margin-top:12px; padding-top:12px; border-top:1px solid var(--panel-border); }
  .day-extra-row{ font-size:12px; line-height:1.55; margin-bottom:6px; }
  .day-extra-row:last-child{ margin-bottom:0; }
  .day-extra-row b{ color:var(--gold-light); }
  .avoid-item{ font-size:12.5px; line-height:1.5; margin-bottom:10px; }
  .avoid-item:last-child{ margin-bottom:0; }
  .avoid-item .ing-name{ color:var(--rose); font-weight:700; }
  .ring-value{ font-family:'Cinzel',serif; font-size:26px; font-weight:700; }
  .age-box{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:0 6px; }
  .age-value{ font-family:'Plus Jakarta Sans',sans-serif; font-size:12.5px; font-weight:700; line-height:1.4; }

  .contact-optional{ margin-top:16px; }
  .contact-optional-label{ font-size:10.5px; color:var(--ink-dim); text-align:center; margin-bottom:8px; }
  .contact-optional-row{ display:flex; gap:8px; }
  .contact-optional-row input{
    flex:1; min-width:0; padding:10px 12px; border-radius:10px;
    border:1px solid var(--panel-border); background:rgba(255,255,255,0.015);
    color:var(--ink); font-family:'Plus Jakarta Sans',sans-serif; font-size:12px;
  }
  .contact-optional-row input::placeholder{ color:var(--ink-dim); opacity:0.7; }
  .age-label{ font-size:10.5px; color:var(--ink-dim); margin-top:6px; letter-spacing:0.05em; }

  .dosha-bar-wrap{ margin-top:14px; }
  .dosha-row{ margin-bottom:12px; }
  .dosha-head{ display:flex; justify-content:space-between; font-size:12.5px; margin-bottom:5px; }
  .dosha-track{ height:9px; border-radius:100px; background:rgba(255,255,255,0.06); overflow:hidden; }
  .dosha-fill{ height:100%; border-radius:100px; }

  .obs-block{ margin-top:18px; padding-top:16px; border-top:1px solid var(--panel-border); }
  .obs-title{ font-size:13.5px; font-weight:700; margin-bottom:6px; color:var(--gold-light); }
  .obs-text{ font-size:13.5px; line-height:1.6; color:var(--ink); }
  .ritual-box{
    margin-top:14px; border-radius:12px; padding:14px;
    background:linear-gradient(135deg, rgba(207,161,82,0.10), rgba(63,166,108,0.07));
    border:1px solid rgba(207,161,82,0.35);
    box-shadow:0 0 18px rgba(207,161,82,0.12), inset 0 0 20px rgba(245,227,184,0.03);
    animation:ritualGlow 3s ease-in-out infinite;
  }
  @keyframes ritualGlow{
    0%,100%{ box-shadow:0 0 18px rgba(207,161,82,0.12), inset 0 0 20px rgba(245,227,184,0.03); }
    50%{ box-shadow:0 0 26px rgba(207,161,82,0.22), inset 0 0 24px rgba(245,227,184,0.06); }
  }
  .ritual-title{ font-size:12.5px; font-weight:700; color:var(--gold-light); margin-bottom:4px; }

  /* ===== FLAW SPOTLIGHT ===== */
  .flaw-list{ display:flex; flex-direction:column; gap:10px; margin-top:10px; }
  .flaw-item{
    display:flex; gap:10px; align-items:flex-start; padding:10px 12px;
    border:1px solid rgba(194,73,90,0.25); border-radius:12px; background:rgba(194,73,90,0.06);
  }
  .flaw-icon{ font-size:16px; flex-shrink:0; line-height:1.4; }
  .flaw-label{ font-size:13px; font-weight:700; color:var(--ink); }
  .flaw-detail{ font-size:11.5px; color:var(--ink-dim); margin-top:2px; line-height:1.5; }

  /* ===== LOCKED HOOK BOX ===== */
  .lock-box{
    margin-top:14px; border-radius:12px; padding:16px;
    background:linear-gradient(135deg, rgba(194,73,90,0.10), rgba(207,161,82,0.06));
    border:1px solid rgba(194,73,90,0.35); text-align:center;
  }
  .lock-icon{ font-size:20px; margin-bottom:6px; }
  .lock-title{ font-family:'Cinzel',serif; font-size:14px; color:var(--gold-light); margin-bottom:6px; }
  .lock-text{ font-size:12.5px; color:var(--ink); line-height:1.6; }

  /* ===== PAYWALL ===== */
  .paywall{ margin-top:26px; }
  .paywall-banner{
    text-align:center; font-size:11px; font-weight:700; letter-spacing:0.06em;
    padding:9px; border-radius:100px;
    background:linear-gradient(120deg,rgba(245,227,184,0.15),rgba(207,161,82,0.15));
    border:1px solid var(--panel-border); color:var(--gold-light);
    margin-bottom:16px;
  }
  .paywall-head{ text-align:center; font-size:21px; margin-bottom:8px; }
  .paywall-sub{ text-align:center; font-size:12.5px; color:var(--ink-dim); line-height:1.6; margin-bottom:20px; }
  .value-list{ display:flex; flex-direction:column; gap:12px; }
  .value-item{ display:flex; gap:10px; align-items:center; }
  .value-icon{ font-size:16px; flex-shrink:0; }
  .value-title{ font-size:13px; font-weight:700; }
  .badge-row{ display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
  .badge{ font-size:10px; color:var(--ink-dim); border:1px solid var(--panel-border); padding:5px 10px; border-radius:100px; }

  .pricing-tabs{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:20px 0 4px; }
  .zone-confirmed{
    display:flex; align-items:center; justify-content:center; gap:10px;
    font-size:12.5px; color:var(--ink-dim); margin:20px 0 4px; padding:10px;
    border:1px solid var(--panel-border); border-radius:12px; background:rgba(207,161,82,0.04);
  }
  .zone-confirmed span:first-child{ color:var(--gold-light); font-weight:700; }
  .zone-change-link{ text-decoration:underline; cursor:pointer; opacity:0.7; }
  .zone-change-link:hover{ opacity:1; }
  .tab{
    text-align:center; padding:10px; border-radius:12px; cursor:pointer;
    border:1px solid var(--panel-border); font-size:12.5px; font-weight:700; color:var(--ink-dim);
    transition:.2s;
  }
  .tab.active{ border-color:var(--gold); color:var(--gold-light); background:rgba(207,161,82,0.07); }
  .price-display{ text-align:center; margin:14px 0; }
  .price-old{ text-decoration:line-through; color:var(--ink-dim); font-size:13px; margin-right:8px; }
  .price-new{ font-family:'Cinzel',serif; font-size:30px; font-weight:700; }
  .price-off{ font-size:11px; color:var(--emerald); font-weight:700; margin-top:2px; }

  .countdown{ text-align:center; font-size:11.5px; color:var(--rose); margin-top:14px; }
  .countdown b{ font-variant-numeric:tabular-nums; }
  .security-line{ text-align:center; font-size:10.5px; color:var(--ink-dim); margin-top:10px; }

  .hidden{ display:none !important; }
  .view{ animation:fadein .35s ease; }
  @keyframes fadein{ from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:translateY(0)} }

  .back-link{ font-size:12px; color:var(--ink-dim); cursor:pointer; margin-bottom:10px; display:inline-block; }
  .config-note{ font-size:10.5px; color:var(--ink-dim); text-align:center; margin-top:24px; opacity:0.6; }

  .legal-links{
    display:flex; align-items:center; justify-content:center; gap:6px;
    margin-top:14px; padding-top:14px; border-top:1px solid var(--panel-border);
    font-size:10px; color:var(--ink-dim);
  }
  .legal-links a{ color:var(--ink-dim); text-decoration:underline; cursor:pointer; }
  .legal-links .dot{ opacity:0.5; }

  .legal-modal-overlay{
    display:none; position:fixed; inset:0; background:rgba(0,0,0,0.65);
    z-index:200; align-items:flex-end; justify-content:center;
  }
  .legal-modal-overlay.open{ display:flex; }
  .legal-modal-box{
    background:var(--panel); border:1px solid var(--panel-border); border-radius:20px 20px 0 0;
    padding:20px; width:100%; max-width:480px; max-height:75vh; overflow-y:auto; position:relative;
  }
  .legal-modal-close{
    position:absolute; top:14px; right:16px; font-size:18px; color:var(--ink-dim);
    cursor:pointer; background:none; border:none;
  }
  .legal-modal-title{ font-family:'Cinzel',serif; font-size:16px; color:var(--gold-light); margin-bottom:10px; }
  .legal-modal-tabs{ display:flex; gap:6px; margin-bottom:16px; }
  .legal-modal-tab{
    font-size:11px; padding:6px 12px; border-radius:100px; border:1px solid var(--panel-border);
    color:var(--ink-dim); background:transparent; cursor:pointer;
  }
  .legal-modal-tab.active{ background:rgba(207,161,82,0.12); color:var(--gold-light); border-color:var(--gold); }
  .legal-modal-body{ font-size:12px; color:var(--ink-dim); line-height:1.7; }
  .legal-modal-body h4{ color:var(--ink); font-size:12.5px; margin:14px 0 4px; }
  .legal-modal-body h4:first-child{ margin-top:0; }
  .legal-modal-panel{ display:none; }
  .legal-modal-panel.active{ display:block; }

  /* ===== QUIZ ===== */
  .quiz-progress-track{ height:5px; border-radius:100px; background:rgba(255,255,255,0.06); overflow:hidden; }
  .quiz-progress-fill{ height:100%; background:linear-gradient(90deg,var(--gold-dark),var(--gold)); width:20%; transition:width .35s ease; }
  .quiz-step-label{ font-size:11px; color:var(--ink-dim); margin:10px 0 22px; letter-spacing:0.04em; }
  .quiz-question{ font-family:'Cinzel',serif; font-size:18px; line-height:1.4; margin-bottom:20px; }
  .quiz-options{ display:flex; flex-direction:column; gap:10px; }
  .quiz-option{
    border:1px solid var(--panel-border); border-radius:14px; padding:14px 16px;
    font-size:13.5px; cursor:pointer; transition:.2s; background:rgba(255,255,255,0.015);
  }
  .quiz-option:hover{ border-color:var(--gold); background:rgba(207,161,82,0.06); }
  .quiz-option.selected{ border-color:var(--gold); background:rgba(207,161,82,0.1); color:var(--gold-light); font-weight:700; }

  /* ===== LUXURY TOAST ===== */
  .luxury-toast{
    position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(20px);
    max-width:88%; padding:12px 20px; border-radius:100px; font-size:12.5px; text-align:center;
    background:rgba(12,12,16,0.95); border:1px solid rgba(207,161,82,0.35); color:var(--ink);
    backdrop-filter:blur(12px); box-shadow:0 8px 30px rgba(0,0,0,0.4);
    opacity:0; pointer-events:none; transition:opacity .3s ease, transform .3s ease;
    z-index:300;
  }
  .luxury-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

  /* ===== UPI QR MODAL ===== */
  .upi-modal-overlay{
    position:fixed; inset:0; background:rgba(2,2,4,0.82); backdrop-filter:blur(6px);
    display:flex; align-items:center; justify-content:center; z-index:400;
    opacity:0; pointer-events:none; transition:opacity .25s ease;
  }
  .upi-modal-overlay.show{ opacity:1; pointer-events:auto; }
  .upi-modal-card{
    position:relative; width:88%; max-width:340px; padding:26px 22px;
    background:var(--panel); border:1px solid var(--panel-border); border-radius:20px;
    text-align:center; box-shadow:0 20px 60px rgba(0,0,0,0.5);
  }
  .upi-modal-close{
    position:absolute; top:14px; right:16px; font-size:16px; color:var(--ink-dim); cursor:pointer;
  }
  .upi-qr-image{
    width:100%; max-width:220px; border-radius:12px; margin:0 auto;
    border:1px solid var(--panel-border); display:block;
  }
  .upi-id-row{
    display:flex; align-items:center; justify-content:center; gap:10px; margin-top:14px;
    font-size:13px; color:var(--gold-light); font-weight:700;
  }
  .upi-copy-btn{
    font-size:11px; color:var(--ink-dim); border:1px solid var(--panel-border);
    padding:4px 10px; border-radius:100px; cursor:pointer; font-weight:500;
  }
  .upi-copy-btn:hover{ border-color:var(--gold); color:var(--gold-light); }

  .upi-pay-now-btn{ display:block; text-decoration:none; text-align:center; margin-top:4px; }
  .upi-or-divider{
    display:flex; align-items:center; gap:10px; margin:16px 0; font-size:10.5px; color:var(--ink-dim);
  }
  .upi-or-divider::before, .upi-or-divider::after{ content:''; flex:1; height:1px; background:var(--panel-border); }

  .upi-screenshot-row{ margin-top:16px; text-align:left; }
  .upi-screenshot-label{ display:block; font-size:10.5px; color:var(--ink-dim); margin-bottom:8px; text-align:center; }
  .upi-screenshot-btn{
    display:flex; align-items:center; justify-content:center; gap:6px;
    width:100%; padding:12px; border-radius:10px; font-size:12.5px; font-weight:700;
    border:1px dashed var(--gold); background:rgba(207,161,82,0.06); color:var(--gold-light);
    cursor:pointer; box-sizing:border-box;
  }
  .upi-screenshot-btn:active{ background:rgba(207,161,82,0.12); }
  .upi-screenshot-preview-wrap{ margin-top:10px; display:flex; align-items:center; gap:10px; }
  .upi-screenshot-preview{ width:44px; height:44px; object-fit:cover; border-radius:8px; border:1px solid var(--panel-border); flex-shrink:0; }
  .upi-screenshot-name{ font-size:11px; color:var(--ink-dim); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .upi-screenshot-remove{ font-size:11px; color:var(--rose); cursor:pointer; text-decoration:underline; flex-shrink:0; }