/* ===========================================================
   Jardim dos Seus Sonhos — Design tokens
   =========================================================== */
:root{
  /* color */
  --bg:#0B1411;
  --bg-elev:#11201B;
  --surface:#16291F;
  --surface-2:#1E3A2D;
  --primary:#2E7D5B;
  --primary-hover:#3FA375;
  --accent:#D4A857;
  --accent-hover:#E5BE72;
  --text:#F2EDE0;
  --text-sub:#A8B3A8;
  --text-muted:#6E7A6E;
  --border:#28433A;
  --border-soft:#1B3027;
  --success:#4CAF7B;
  --warning:#D4A857;
  --danger:#C75656;
  /* gradients */
  --g-radial: radial-gradient(120% 80% at 50% -10%, #1E3A2D 0%, #0B1411 60%);
  --g-leaf: linear-gradient(180deg, rgba(46,125,91,.0) 0%, rgba(46,125,91,.18) 100%);
  --g-gold: linear-gradient(135deg, #E5BE72 0%, #D4A857 50%, #B88A3A 100%);

  /* type */
  --font-display: 'Cormorant Garamond', 'Source Han Serif SC', 'Songti SC', Georgia, serif;
  --font-body: 'Inter Tight', system-ui, -apple-system, 'PingFang SC', 'Helvetica Neue', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* radius */
  --r-sm:8px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-full:999px;
  /* shadow */
  --shadow-sm: 0 2px 8px rgba(0,0,0,.25);
  --shadow-md: 0 8px 24px rgba(0,0,0,.35);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.45);
  --shadow-gold: 0 8px 28px rgba(212,168,87,.30);
  /* spacing */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px;

  --phone-w: 440px;
  --header-h: 64px;
}

/* fallback system fonts (offline-safe) — Cormorant / InterTight may be missing offline,
   so we provide elegant system fallbacks. */
@font-face{
  font-family:'Cormorant Fallback';
  src: local('Cormorant Garamond'), local('Georgia'), local('Times New Roman');
  font-display: swap;
}
@font-face{
  font-family:'Inter Tight Fallback';
  src: local('Inter Tight'), local('Helvetica Neue'), local('Helvetica'), local('Arial');
  font-display: swap;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family: var(--font-body);
  color:var(--text);
  background:#000;
  min-height:100vh;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
button,input,select,textarea{font-family:inherit;color:inherit;background:transparent;border:none;outline:none}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* ===========================================================
   Background canvas (noise + leaves)
   =========================================================== */
.bg-canvas{
  position:fixed; inset:0; z-index:0;
  background: var(--g-radial);
  pointer-events:none;
}
.bg-canvas::before{
  content:""; position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 12% 88%, rgba(46,125,91,.25) 0%, transparent 35%),
    radial-gradient(circle at 92% 14%, rgba(212,168,87,.12) 0%, transparent 30%),
    radial-gradient(circle at 60% 60%, rgba(46,125,91,.10) 0%, transparent 50%);
  filter: blur(2px);
}
.bg-canvas::after{
  /* noise texture via inline SVG */
  content:""; position:absolute; inset:0; opacity:.35; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.95 0 0 0 0 0.93 0 0 0 0 0.88 0 0 0 0.05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.bg-leaves{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.07;
  background-repeat:no-repeat;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'><path d='M200 30 C 140 80, 90 160, 110 240 C 130 320, 200 360, 260 320 C 320 280, 350 200, 320 140 C 290 80, 240 40, 200 30 Z' fill='none' stroke='%23F2EDE0' stroke-width='1.2'/><path d='M200 60 L 200 360 M80 200 L 320 200' stroke='%23F2EDE0' stroke-width='0.6' fill='none'/></svg>");
  background-size: 520px 520px;
  background-position: -80px -120px, 380px 320px;
  filter: drop-shadow(0 0 4px rgba(46,125,91,.4));
  animation: leafDrift 28s ease-in-out infinite alternate;
}
@keyframes leafDrift{
  0%{transform:translate(0,0) rotate(0deg)}
  100%{transform:translate(20px,-12px) rotate(2deg)}
}

/* ===========================================================
   Phone frame (centered)
   =========================================================== */
.phone-frame{
  position:relative; z-index:2;
  margin:0 auto;
  width:100%; max-width:var(--phone-w);
  height:100vh; height:100dvh;
  display:flex; flex-direction:column;
  background: linear-gradient(180deg, rgba(11,20,17,.0) 0%, rgba(11,20,17,.4) 100%);
  /* backdrop-filter intentionally removed — it created a containing
     block that trapped position:fixed descendants (FAB save button).
     The dim gradient above gives a similar visual depth on PC. */
}
@media (min-width: 720px){
  .phone-frame{
    height:92vh; max-height:900px;
    margin-top:4vh;
    border-radius:36px;
    border:1px solid var(--border);
    box-shadow: var(--shadow-lg);
    overflow:hidden;
  }
}

/* ===========================================================
   Header
   =========================================================== */
.app-header{
  flex:0 0 var(--header-h);
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 var(--s-4);
  border-bottom: 1px solid var(--border-soft);
  background: rgba(11,20,17,.55);
  backdrop-filter: blur(12px);
  position:relative; z-index:5;
}
.app-header .brand{
  font-family: var(--font-display);
  font-weight:500;
  font-size: 18px;
  letter-spacing: .02em;
  color:var(--text);
  display:flex; align-items:center; gap:8px;
}
.app-header .brand .dot{
  width:8px; height:8px; border-radius:50%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
}
.app-header .step{
  font-size:12px; color:var(--text-sub); letter-spacing:.08em; text-transform:uppercase;
}
.back-btn, .icon-btn, .avatar-btn{
  width:40px; height:40px; border-radius:var(--r-full);
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.04);
  border:1px solid var(--border-soft);
  color:var(--text);
  cursor:pointer;
  transition: all .2s ease;
  padding:0;
}
.back-btn:hover, .icon-btn:hover, .avatar-btn:hover{
  background: rgba(255,255,255,.08);
  border-color: var(--border);
}
.avatar-btn:active{ transform: scale(.95); }

/* Avatar bubble */
.avatar{
  width:100%; height:100%;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display);
  font-size: 17px; font-weight:500;
  background: var(--g-gold);
  color: #2A1E07;
  box-shadow: 0 0 0 2px rgba(212,168,87,.18);
}
.avatar.lg{
  width:56px; height:56px;
  font-size: 24px;
}

/* User sheet (mini profile) */
.user-head{
  display:flex; align-items:center; gap:14px;
  padding-bottom: var(--s-4);
  margin-bottom: var(--s-4);
  border-bottom: 1px solid var(--border-soft);
}
.user-head h3{
  font-family: var(--font-display);
  font-size: 22px; font-weight:500;
  margin-bottom:2px;
}
.user-list{ display:flex; flex-direction:column; gap:6px; }
.user-row{
  display:flex; align-items:center; gap:12px;
  padding: 12px 14px;
  background: var(--surface);
  border:1px solid var(--border-soft);
  border-radius: var(--r-md);
  color: var(--text);
  cursor:pointer;
  font-size: 14px;
  text-align: left;
  width: 100%;
}
.user-row:hover{ background: var(--surface-2); border-color: var(--border); }
.user-row .ico{ color: var(--accent); width:20px; height:20px; }
.user-row .lang-current{
  margin-left:auto;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: var(--r-full);
  background: rgba(212,168,87,.14);
  color: var(--accent);
  border:1px solid rgba(212,168,87,.3);
}

/* ===========================================================
   Main + page transitions
   =========================================================== */
.app-main{
  flex:1 1 auto;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width:none;
}
.app-main::-webkit-scrollbar{display:none}
.page{
  display:none;
  padding: var(--s-5) var(--s-4) var(--s-6);
  animation: pageIn .42s cubic-bezier(.2,.8,.2,1) both;
}
.page.active{display:block}
@keyframes pageIn{
  from{opacity:0; transform: translateY(12px)}
  to{opacity:1; transform: translateY(0)}
}

/* stagger reveal helpers */
.reveal{opacity:0; transform:translateY(10px); animation: revealUp .55s cubic-bezier(.2,.8,.2,1) forwards}
.reveal.d1{animation-delay:.06s}
.reveal.d2{animation-delay:.14s}
.reveal.d3{animation-delay:.22s}
.reveal.d4{animation-delay:.30s}
.reveal.d5{animation-delay:.38s}
@keyframes revealUp{to{opacity:1; transform:none}}

/* ===========================================================
   Typography
   =========================================================== */
.h-display{
  font-family: var(--font-display);
  font-weight:500;
  font-size: 36px;
  line-height: 1.05;
  letter-spacing:-.01em;
}
.h1{font-family:var(--font-display); font-weight:500; font-size:32px; line-height:1.1; letter-spacing:-.01em}
.h2{font-family:var(--font-display); font-weight:500; font-size:24px; line-height:1.15}
.h3{font-size:18px; font-weight:500; line-height:1.3}
.lead{font-size:16px; line-height:1.5; color:var(--text-sub)}
.body{font-size:14px; line-height:1.55; color:var(--text-sub)}
.caption{font-size:12px; line-height:1.4; color:var(--text-muted); letter-spacing:.04em}
.eyebrow{
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent); font-weight:500;
}
.serif-italic{font-family:var(--font-display); font-style:italic; font-weight:400}
.gold{color:var(--accent)}
.primary{color:var(--primary)}

/* ===========================================================
   Buttons
   =========================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:48px; padding:0 22px;
  border-radius: var(--r-md);
  font-size:15px; font-weight:500; letter-spacing:.01em;
  cursor:pointer; user-select:none;
  transition: transform .15s ease, background .2s ease, box-shadow .2s ease, border-color .2s ease;
  white-space:nowrap;
}
.btn-primary{
  background: linear-gradient(180deg, var(--primary-hover) 0%, var(--primary) 100%);
  color: #07120C;
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.18);
}
.btn-primary:hover{transform: translateY(-1px); box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,.18)}
.btn-primary:active{transform: translateY(0)}
.btn-primary:disabled{opacity:.5; cursor:not-allowed; transform:none}
.btn-gold{
  background: var(--g-gold);
  color: #2A1E07;
  box-shadow: var(--shadow-gold);
  font-weight:600;
}
.btn-gold:hover{transform: translateY(-1px)}
.btn-ghost{
  background: rgba(255,255,255,.04);
  border:1px solid var(--border);
  color:var(--text);
}
.btn-ghost:hover{background: rgba(255,255,255,.08); border-color: var(--accent)}
.btn-outline{
  background: transparent;
  border:1px solid var(--accent);
  color:var(--accent);
}
.btn-outline:hover{background: rgba(212,168,87,.10)}
.btn-link{
  background:transparent; color:var(--accent); padding:0; height:auto;
}
.btn-full{width:100%}

/* post-pay downloads bar */
.download-bar{
  margin-top: 18px;
}
.download-bar .btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px;
}

/* floating save-as-PDF action — position:sticky inside .app-main.
   The button lives at the end of the result page in document order.
   As the user scrolls, the button sticks to the mid-line of the
   scroll container — it is ALWAYS visible while reading the result.
   It does NOT need to be position:fixed, so backdrop-filter / transform
   ancestors cannot trap it. */
.fab-save{
  position: sticky;
  top: 50%;
  align-self: flex-end;
  margin: -22px 12px 8px;
  z-index: 60;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  background: rgba(11, 20, 17, 0.85);
  box-shadow: 0 4px 14px rgba(0,0,0,.35), 0 0 0 1px rgba(212,168,87,.55);
  color: var(--accent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: none;
  opacity: 0.85;
  transition: opacity .2s ease, background .25s ease, transform .15s ease;
}
body[data-page="result"] .fab-save{
  display: inline-flex;
}
.fab-save:hover{
  background: var(--accent);
  color: var(--bg-deep);
  opacity: 1;
}
.fab-save:active{
  transform: scale(.95);
  opacity: 1;
}
.fab-save span[data-icon]{
  display: block;
  margin: 0;
}
.fab-save span[data-i18n]{
  display: none;
}

/* ===========================================================
   Cards / chips / tags
   =========================================================== */
.card{
  background: var(--surface);
  border:1px solid var(--border-soft);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  box-shadow: var(--shadow-sm);
}
.card-elev{
  background: var(--surface-2);
  border-color: var(--border);
}
.tag{
  display:inline-flex; align-items:center; gap:6px;
  padding: 5px 10px;
  border-radius: var(--r-full);
  font-size:11px; letter-spacing:.06em;
  background: rgba(46,125,91,.16);
  color: var(--primary-hover);
  border:1px solid rgba(46,125,91,.35);
}
.tag.gold{
  background: rgba(212,168,87,.14);
  color: var(--accent);
  border-color: rgba(212,168,87,.4);
}

/* ===========================================================
   Form controls
   =========================================================== */
.field{display:flex; flex-direction:column; gap:6px}
.field label{font-size:13px; color:var(--text-sub); font-weight:500}
.input, .select, .textarea{
  height:48px; padding: 0 14px;
  background: var(--surface);
  border:1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text);
  font-size:14px;
  transition: border-color .2s ease, background .2s ease;
}
.input:focus, .select:focus, .textarea:focus{
  border-color: var(--accent);
  background: var(--surface-2);
}
.textarea{height:auto; padding:12px 14px; min-height:96px; resize:vertical}

/* Toggle switch */
.toggle{
  position:relative;
  display:inline-flex; align-items:center; gap:12px; cursor:pointer;
  user-select:none;
}
.toggle input{display:none}
.toggle .track{
  width:52px; height:30px;
  border-radius: var(--r-full);
  background: var(--surface-2);
  border:1px solid var(--border);
  position:relative;
  transition: all .25s ease;
}
.toggle .track::after{
  content:""; position:absolute;
  top:3px; left:3px;
  width:22px; height:22px;
  border-radius:50%;
  background: var(--text-sub);
  transition: all .25s ease;
}
.toggle input:checked + .track{
  background: rgba(212,168,87,.18);
  border-color: var(--accent);
  box-shadow: 0 0 14px rgba(212,168,87,.25);
}
.toggle input:checked + .track::after{
  left: 25px;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
}

/* ===========================================================
   Bottom nav — removed in single-page mode
   =========================================================== */

/* ===========================================================
   Home
   =========================================================== */
.hero{
  position:relative;
  border-radius: var(--r-xl);
  overflow:hidden;
  height: 280px;
  margin-bottom: var(--s-5);
  box-shadow: var(--shadow-lg);
}
.hero img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.hero::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(11,20,17,.0) 0%, rgba(11,20,17,.85) 80%, rgba(11,20,17,1) 100%);
}
.hero-content{
  position:absolute; left:0; right:0; bottom:0;
  padding: var(--s-5);
  z-index:2;
}
.hero-content .eyebrow{margin-bottom:8px}
.hero-content .h-display{color:var(--text)}

.feature-row{
  display:grid; grid-template-columns: 1fr 1fr; gap:12px;
  margin-bottom: var(--s-5);
}
.feature{
  background: var(--surface);
  border:1px solid var(--border-soft);
  border-radius: var(--r-lg);
  padding:14px;
  display:flex; flex-direction:column; gap:8px;
  min-height: 110px;
}
.feature .ico{
  width:36px; height:36px; border-radius: var(--r-md);
  background: rgba(46,125,91,.18);
  color: var(--primary-hover);
  display:flex; align-items:center; justify-content:center;
}
.feature .ico.gold{background: rgba(212,168,87,.18); color:var(--accent)}
.feature h4{font-size:14px; font-weight:500; line-height:1.3}
.feature p{font-size:12px; color:var(--text-muted); line-height:1.45}

/* ===========================================================
   Upload
   =========================================================== */
.upload-zone{
  position:relative;
  display:block;
  border:1.5px dashed var(--border);
  border-radius: var(--r-xl);
  background: var(--surface);
  padding: var(--s-7) var(--s-4);
  text-align:center;
  transition: border-color .2s ease, background .2s ease;
  cursor:pointer;
}
/* native file input must be invisible but still triggerable */
.upload-zone input[type="file"]{
  position:absolute !important;
  width:1px !important; height:1px !important;
  opacity:0 !important; pointer-events:none !important;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space:nowrap; overflow:hidden;
}
.upload-zone:hover{border-color: var(--accent); background: var(--surface-2)}
.upload-zone.has-file{
  padding:0; border-style:solid; height: 280px;
  overflow:hidden;
}
.upload-zone img#uploadPreview{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
}
.upload-zone.has-file .upload-overlay{
  position:absolute; left:12px; bottom:12px; right:12px;
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 14px;
  background: rgba(11,20,17,.7);
  border-radius: var(--r-md);
  backdrop-filter: blur(8px);
  z-index:2;
}
.upload-zone .ico-upload{
  width:64px; height:64px; border-radius:50%;
  background: rgba(46,125,91,.18);
  color: var(--primary-hover);
  display:inline-flex; align-items:center; justify-content:center;
  margin-bottom: var(--s-3);
}
.upload-cta-row{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  margin-top: var(--s-4);
}
.upload-cta-row .btn{
  width: 100%; max-width: 280px;
  height: 44px;
}
.upload-cta-row .upload-demo-btn{
  font-size: 13px;
}

.angle-grid,
.angle-card{
  /* angle selector deleted — single-page mode */
  display:none !important;
}

/* ===========================================================
   Style selection
   =========================================================== */
.style-list{display:flex; flex-direction:column; gap:14px}
.style-card{
  position:relative;
  background: var(--surface);
  border:1px solid var(--border-soft);
  border-radius: var(--r-lg);
  overflow:hidden;
  cursor:pointer;
  transition: transform .2s ease, border-color .2s ease;
}
.style-card:hover{transform: translateY(-2px)}
.style-card.selected{
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(212,168,87,.2), var(--shadow-md);
}
.style-card .thumb{
  height: 140px; position:relative; overflow:hidden;
}
.style-card .thumb img{width:100%; height:100%; object-fit:cover}
.style-card .thumb::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 30%, rgba(11,20,17,.7) 100%);
}
.style-card .meta{
  padding: 14px;
  display:flex; justify-content:space-between; align-items:center;
}
.style-card .meta h4{font-size:16px; font-weight:500; margin-bottom:4px; font-family: var(--font-display)}
.style-card .meta p{font-size:12px; color:var(--text-muted); max-width:220px}
.style-card .check{
  width:28px; height:28px; border-radius:50%;
  border:1.5px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  color:transparent;
}
.style-card.selected .check{
  background: var(--accent); border-color: var(--accent); color:#2A1E07;
}

.harmonia-card{
  margin-top: var(--s-5);
  padding: var(--s-4);
  background:
    linear-gradient(135deg, rgba(212,168,87,.10) 0%, rgba(46,125,91,.08) 100%);
  border:1px solid rgba(212,168,87,.25);
  border-radius: var(--r-lg);
  position:relative;
  overflow:hidden;
}
.harmonia-card::before{
  content:""; position:absolute; right:-30px; top:-30px;
  width:140px; height:140px;
  background: radial-gradient(circle, rgba(212,168,87,.25) 0%, transparent 70%);
  pointer-events:none;
}
.harmonia-card h4{
  font-family:var(--font-display); font-size:20px; font-weight:500;
  margin-bottom:6px;
}
.harmonia-card .desc{font-size:13px; color:var(--text-sub); line-height:1.5; margin-bottom:12px}
.harmonia-card .toggle-row{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.harmonia-card .toggle-row strong{font-size:14px}

/* ===========================================================
   Preferences (Q&A)
   =========================================================== */
.q-block{margin-bottom: var(--s-5)}
.q-block .eyebrow{margin-bottom:6px}
.q-block .h3{margin-bottom:14px}
.choice-grid{display:grid; grid-template-columns: 1fr 1fr 1fr; gap:10px}
.choice{
  background: var(--surface);
  border:1px solid var(--border-soft);
  border-radius: var(--r-md);
  padding: 14px 10px;
  text-align:center;
  cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  transition: all .2s ease;
}
.choice .ico{width:22px; height:22px; color:var(--text-sub)}
.choice span{font-size:12px; color:var(--text-sub); line-height:1.3}
.choice:hover{border-color: var(--border); background: var(--surface-2)}
.choice.selected{
  border-color: var(--accent);
  background: rgba(212,168,87,.12);
}
.choice.selected .ico, .choice.selected span{color:var(--accent)}

/* Loading state */
.gen-stage{
  text-align:center;
  padding: var(--s-7) var(--s-4);
}
.gen-stage .spinner{
  width:96px; height:96px;
  border-radius:50%;
  margin: 0 auto var(--s-4);
  position:relative;
  background: var(--g-radial);
  display:flex; align-items:center; justify-content:center;
}
.gen-stage .spinner::before{
  content:""; position:absolute; inset:0;
  border-radius:50%;
  border: 2px solid transparent;
  border-top-color: var(--accent);
  border-right-color: rgba(212,168,87,.4);
  animation: spin 1.6s linear infinite;
}
.gen-stage .spinner .leaf{
  width:40px; height:40px; color:var(--accent);
}
@keyframes spin{to{transform: rotate(360deg)}}
.gen-stage .step-label{
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--text-muted); margin-bottom: var(--s-3);
}
.gen-stage .progress{
  width:100%; height:4px; border-radius:2px;
  background: var(--surface-2); overflow:hidden; margin: var(--s-4) 0;
}
.gen-stage .progress .bar{
  height:100%; width: 0;
  background: var(--g-gold);
  transition: width .4s ease;
}
.gen-stage .tip{
  margin-top: var(--s-4);
  padding: var(--s-4);
  background: rgba(212,168,87,.08);
  border-radius: var(--r-md);
  border:1px solid rgba(212,168,87,.18);
  font-size:13px; color:var(--text-sub);
  display:flex; gap:10px; align-items:flex-start; text-align:left;
}
.gen-stage .tip .ico{color:var(--accent); flex:0 0 auto; margin-top:2px}

/* ===========================================================
   Result
   =========================================================== */
.result-hero{
  position:relative;
  border-radius: var(--r-xl);
  overflow:hidden;
  height: 260px;
  margin-bottom: var(--s-4);
  box-shadow: var(--shadow-lg);
}
.result-hero img{width:100%; height:100%; object-fit:cover}
.result-hero .veil{
  position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 30%, rgba(11,20,17,.85) 100%);
}
.result-hero .meta{
  position:absolute; left:0; right:0; bottom:0;
  padding: var(--s-4);
  display:flex; justify-content:space-between; align-items:flex-end;
}
.result-hero .meta .pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius: var(--r-full);
  background: rgba(11,20,17,.6); border:1px solid rgba(255,255,255,.18);
  font-size:11px; color:var(--text); backdrop-filter: blur(8px);
}

.gallery{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:8px;
  margin-bottom: var(--s-5);
}
.gallery .g-thumb{
  height: 92px;
  border-radius: var(--r-md);
  overflow:hidden;
  position:relative;
  background: var(--surface-2);
}
.gallery .g-thumb img{width:100%; height:100%; object-fit:cover; transition: transform .4s ease}
.gallery .g-thumb:hover img{transform: scale(1.05)}
.gallery .g-thumb.locked img{filter: blur(6px) brightness(.6)}
.gallery .g-thumb .lock{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  color:var(--accent);
}

.harmonia-panel{
  background:
    linear-gradient(135deg, rgba(212,168,87,.10) 0%, rgba(46,125,91,.06) 100%);
  border:1px solid rgba(212,168,87,.30);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  margin-bottom: var(--s-5);
  position:relative;
}
.harmonia-panel .det-head{
  display:flex; justify-content:space-between; align-items:flex-start; margin-bottom: var(--s-3);
}
.harmonia-panel h3{font-family:var(--font-display); font-size:22px; font-weight:500; margin-bottom:4px}
.harmonia-panel .badge{
  padding:4px 10px; border-radius: var(--r-full);
  background: var(--accent); color:#2A1E07;
  font-size:10px; font-weight:600; letter-spacing:.1em;
}
.tip-list{display:flex; flex-direction:column; gap:10px}
.tip-item{
  display:flex; gap:12px; padding:12px;
  background: rgba(11,20,17,.45);
  border:1px solid var(--border-soft);
  border-radius: var(--r-md);
}
.tip-item .ico{color:var(--accent); flex:0 0 auto; margin-top:2px}
.tip-item h5{font-size:14px; font-weight:500; margin-bottom:4px}
.tip-item p{font-size:13px; color:var(--text-sub); line-height:1.5}
.tip-item .compass-tag{
  display:inline-flex; align-items:center; gap:4px;
  margin-top:6px;
  padding:3px 8px; border-radius: var(--r-sm);
  background: rgba(212,168,87,.16);
  color:var(--accent);
  font-size:11px;
}

/* Plants list */
.plant-list{
  display:flex; flex-direction:column; gap:10px;
  margin-bottom: var(--s-5);
}
.plant-item{
  display:flex; gap:12px; align-items:center;
  padding: 10px;
  background: var(--surface);
  border:1px solid var(--border-soft);
  border-radius: var(--r-md);
}
.plant-item .swatch{
  width:48px; height:48px; border-radius: var(--r-md);
  background: var(--g-leaf);
  display:flex; align-items:center; justify-content:center;
  color:var(--primary-hover);
  flex:0 0 auto;
}
.plant-item .body{flex:1; min-width:0}
.plant-item h5{font-size:14px; font-weight:500; margin-bottom:2px}
.plant-item .meta{font-size:11px; color:var(--text-muted)}
.plant-item .price{font-size:13px; color:var(--accent); font-weight:500}

/* placement chip after the plant name */
.plant-placement{
  display:inline-flex; align-items:center; gap:3px;
  margin-left:6px;
  padding: 2px 6px 2px 5px;
  border-radius: var(--r-full);
  background: rgba(212,168,87,.10);
  border:1px solid rgba(212,168,87,.30);
  color: var(--accent);
  font-size: 10px; font-weight: 500;
  vertical-align: 1px;
}
.plant-placement .ico{ color: var(--accent); }

/* locked plant card */
.plant-item.is-locked{
  opacity: .65;
  filter: grayscale(.25);
}
.plant-item.is-locked .swatch{
  background: rgba(255,255,255,.04);
  color: var(--text-muted);
}
.plant-item.is-locked .plant-name{
  color: var(--text-muted);
  font-style: italic;
}

/* ===========================================================
   Rich sticky CTA bar (conversion-optimized)
   =========================================================== */
.cta-bar{
  position: sticky; bottom: 0;
  margin: var(--s-5) calc(-1 * var(--s-4)) 0;
  padding: 14px var(--s-4) calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(11,20,17,0) 0%, rgba(11,20,17,.96) 22%);
  display:flex; gap:12px; align-items:stretch;
  z-index:10;
  border-top: 1px solid var(--border);
}
/* Once paid, hide the funnel block — the floating save button takes over */
body[data-paid="true"] .cta-bar{
  display:none;
}
.cta-col{
  flex:1; min-width:0;
  display:flex; flex-direction:column; gap:8px;
}
.urgency{
  display:inline-flex; align-items:center; gap:6px;
  font-size: 12px; color: var(--text-sub);
  align-self:flex-start;
  padding: 4px 10px;
  background: rgba(212,168,87,.10);
  border-radius: var(--r-full);
  border:1px solid rgba(212,168,87,.25);
}
.urgency-label{ color: var(--text-muted); }
.urgency-time{
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--accent);
  font-weight:600;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}
.price-row{
  display:flex; align-items:baseline; gap:8px;
}
.price-main{
  display:flex; align-items:baseline; gap:6px;
}
.price-old{
  font-size: 12px;
  color: var(--text-muted);
  text-decoration: line-through;
  text-decoration-color: rgba(198,86,86,.55);
  text-decoration-thickness: 1.5px;
}
.price-now{
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 500;
  color: var(--accent);
  line-height: 1;
}
.price-sub{
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text-sub);
}
.pix-note{
  color: var(--primary-hover);
  font-weight: 500;
}
/* trust-pill + trust-row removed — rating moved to post-purchase */
.rating-modal{
  text-align:center;
  padding: var(--s-6) var(--s-5);
}
.rating-title{
  font-family: var(--font-display);
  font-size: 22px; font-weight: 500;
  margin-bottom: 6px;
  color: var(--text);
}
.rating-sub{
  font-size: 13px; color: var(--text-muted);
  margin-bottom: var(--s-5);
}
.thumbs-row{
  display:flex; justify-content:center; gap:10px;
  margin: var(--s-3) 0 var(--s-3);
}
.thumb-btn{
  width:48px; height:48px;
  border-radius:50%;
  background: var(--surface-2);
  border:1.5px solid var(--border-soft);
  color: var(--text-muted);
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition: transform .15s ease, color .2s ease, border-color .2s ease, background .2s ease;
}
.thumb-btn:hover{ transform: translateY(-2px); }
.thumb-btn.on{
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(212,168,87,.12);
}
.thumb-btn .ico{ width:22px; height:22px; }
.rating-hint{
  margin-top: var(--s-3);
  font-size: 13px;
  color: var(--accent);
  min-height: 20px;
  font-weight: 500;
}
.rating-skip{
  margin-top: var(--s-5);
  height: 40px;
  font-size: 13px;
  color: var(--text-muted);
  background: transparent;
  border: none;
  width: 100%;
}

/* ===========================================================
   Dev simulator (prototype only)
   =========================================================== */
.sim-panel{
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 9999;
  width: 220px;
  background: #0F1A14;
  border:1px solid var(--accent);
  border-radius: 12px;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.6);
  overflow:hidden;
}
.sim-head{
  display:flex; align-items:center; gap:8px;
  padding: 8px 12px;
  background: linear-gradient(90deg, rgba(212,168,87,.25), rgba(212,168,87,.05));
  border-bottom: 1px solid rgba(212,168,87,.30);
}
.sim-dot{
  width:8px; height:8px; border-radius:50%;
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent);
}
.sim-title{
  flex:1;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--accent);
}
.sim-toggle{
  background: none;
  border: none;
  color: var(--accent);
  font-size: 16px;
  cursor: pointer;
  padding: 0 4px;
}
.sim-body{
  padding: 12px;
  display:flex; flex-direction:column; gap: 12px;
}
.sim-body.collapsed{ display:none; }
.sim-section{ display:flex; flex-direction:column; gap:6px; }
.sim-label{
  font-size: 9.5px; letter-spacing: .1em;
  color: var(--text-muted);
  text-transform: uppercase;
  font-weight: 600;
}
.sim-route-row{
  display:flex; flex-wrap:wrap; gap:5px;
}
.sim-route{
  flex: 1 0 calc(50% - 3px);
  background: rgba(255,255,255,.05);
  border: 1px solid var(--border-soft);
  color: var(--text);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 11px;
  cursor: pointer;
}
.sim-route:hover{
  border-color: var(--accent);
  background: rgba(212,168,87,.10);
}
.sim-lang-row{
  display:inline-flex;
  background: rgba(255,255,255,.04);
  border:1px solid var(--border-soft);
  border-radius: var(--r-full);
  padding: 2px;
  gap: 2px;
  align-self: flex-start;
}
.sim-lang-btn{
  padding: 4px 12px;
  border-radius: var(--r-full);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all .2s ease;
  font-family: inherit;
}
.sim-lang-btn:hover{ color: var(--text-sub); }
.sim-lang-btn.on{
  background: var(--g-gold);
  color: #2A1E07;
  box-shadow: 0 0 8px rgba(212,168,87,.25);
}
.sim-toggle-row{
  display:flex; align-items:center; gap:8px;
  cursor: pointer;
}
.sim-toggle-row input{ display:none; }
.sim-switch{
  position: relative;
  width:36px; height:20px;
  border-radius: var(--r-full);
  background: rgba(255,255,255,.10);
  border: 1px solid var(--border-soft);
  transition: all .2s ease;
  flex: 0 0 auto;
}
.sim-switch::after{
  content:'';
  position: absolute;
  left: 2px; top: 2px;
  width:14px; height:14px;
  border-radius: 50%;
  background: var(--text);
  transition: all .2s ease;
}
.sim-toggle-row input:checked + .sim-switch{
  background: var(--accent);
  border-color: var(--accent);
}
.sim-toggle-row input:checked + .sim-switch::after{
  left: 18px;
  background: #1a1306;
}
.sim-reset{
  background: rgba(255,92,57,.10);
  border:1px solid rgba(255,92,57,.30);
  color: var(--hot);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 11px;
  cursor: pointer;
}
.sim-reset:hover{ background: rgba(255,92,57,.20); }
.cta-pay{
  flex: 0 0 auto;
  min-width: 116px;
  height: auto;
  padding: 12px 18px;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  align-self: stretch;
  font-size: 13px;
}
.cta-pay-label{ font-weight:700; font-size: 14px; }
.cta-pay-arrow{ display:inline-flex; opacity:.85; }

/* ===========================================================
   Modal (paywall)
   =========================================================== */
.credit-row{
  display:flex; justify-content:center; gap:6px; flex-wrap:wrap;
  margin-bottom: var(--s-4);
}
.credit-pill{
  display:inline-flex; align-items:center; gap:4px;
  padding: 5px 10px;
  border-radius: var(--r-full);
  background: rgba(255,255,255,.05);
  border:1px solid var(--border-soft);
  font-size: 11px;
  color: var(--text-sub);
  font-weight: 500;
}
.credit-pill .ico{ color: var(--accent); }

/* Pix QR placeholder */
.pix-qr{
  display:flex; gap:14px;
  padding: var(--s-4);
  margin-bottom: var(--s-4);
  background: rgba(46,125,91,.10);
  border:1px solid rgba(46,125,91,.30);
  border-radius: var(--r-lg);
  align-items:center;
}
.qr-frame{
  position:relative;
  width:110px; height:110px; flex:0 0 auto;
  background:#F2EDE0;
  border-radius: var(--r-md);
  padding: 10px;
  overflow:hidden;
}
.qr-grid{
  position:absolute; inset:10px;
  background-image:
    linear-gradient(#0B1411 1px, transparent 1px),
    linear-gradient(90deg, #0B1411 1px, transparent 1px);
  background-size: 6px 6px;
  background-position: 0 0;
  -webkit-mask-image: radial-gradient(circle at 30% 30%, #000 50%, transparent 60%);
          mask-image: radial-gradient(circle at 30% 30%, #000 50%, transparent 60%);
}
.qr-corner{
  position:absolute;
  width:18px; height:18px;
  border:3px solid #0B1411;
  background:#F2EDE0;
}
.qr-corner.tl{ top:8px; left:8px; }
.qr-corner.tr{ top:8px; right:8px; }
.qr-corner.bl{ bottom:8px; left:8px; }
.qr-corner.br{ bottom:8px; right:8px; }
.qr-center{
  position:absolute; left:50%; top:50%;
  transform: translate(-50%,-50%);
  width:30px; height:30px;
  background: var(--primary);
  border-radius: var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  color: var(--text);
  box-shadow: 0 0 0 3px #F2EDE0;
}
.qr-label{
  font-size: 11px; letter-spacing:.06em; color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 6px;
  font-weight: 500;
}
.qr-code{
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-sub);
  background: var(--surface-2);
  padding: 8px 10px;
  border-radius: var(--r-sm);
  word-break: break-all;
  line-height: 1.4;
}
.modal-veil{
  position:fixed; inset:0;
  background: rgba(11,20,17,.75);
  backdrop-filter: blur(8px);
  z-index: 50;
  display:none;
  align-items:flex-end; justify-content:center;
}
.modal-veil.open{display:flex}
.modal{
  width:100%; max-width: var(--phone-w);
  background: linear-gradient(180deg, #11201B 0%, #0B1411 100%);
  border-top: 1px solid rgba(212,168,87,.3);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: var(--s-5) var(--s-4) calc(var(--s-5) + env(safe-area-inset-bottom));
  animation: modalIn .35s cubic-bezier(.2,.8,.2,1) both;
  max-height: 85vh; overflow-y:auto;
}
@keyframes modalIn{from{transform: translateY(100%)} to{transform: translateY(0)}}
.modal .handle{
  width:36px; height:4px; border-radius:2px;
  background: var(--border);
  margin: 0 auto var(--s-4);
}
.modal h2{font-family:var(--font-display); font-size:28px; margin-bottom:6px; text-align:center}
.modal .sub{text-align:center; color:var(--text-sub); font-size:14px; margin-bottom: var(--s-5)}
.plan-list{display:flex; flex-direction:column; gap:10px; margin-bottom: var(--s-5)}
.plan{
  padding: var(--s-4);
  border:1px solid var(--border-soft);
  border-radius: var(--r-md);
  background: var(--surface);
  display:flex; justify-content:space-between; align-items:center;
  cursor:pointer; transition: all .2s ease;
}
.plan.selected{
  border-color: var(--accent);
  background: rgba(212,168,87,.10);
  box-shadow: 0 0 0 1px var(--accent);
}
.plan .body h4{font-size:15px; font-weight:500; margin-bottom:4px}
.plan .body p{font-size:12px; color:var(--text-muted)}
.plan .body .list-inline{display:flex; gap:8px; margin-top:8px; flex-wrap:wrap}
.plan .body .list-inline span{font-size:11px; color:var(--text-sub); display:inline-flex; gap:4px; align-items:center}
.plan .body .list-inline .ico{width:12px; height:12px; color:var(--accent)}
.plan .price{font-family:var(--font-display); font-size:24px; font-weight:500; color:var(--accent)}
.plan .price small{font-size:11px; color:var(--text-muted); display:block; text-align:right}
.pay-methods{
  display:flex; gap:8px; margin-bottom: var(--s-4);
}
.pay-method{
  flex:1;
  padding: 10px;
  border:1px solid var(--border-soft);
  border-radius: var(--r-md);
  text-align:center;
  cursor:pointer;
  font-size:12px;
  color:var(--text-sub);
  transition: all .2s ease;
}
.pay-method.selected{border-color: var(--accent); background: rgba(212,168,87,.10); color:var(--accent)}
.modal .small{font-size:11px; color:var(--text-muted); text-align:center; margin-top:10px}

/* ===========================================================
   Toast
   =========================================================== */
.toast{
  position:fixed; left:50%; bottom: 100px;
  transform: translateX(-50%) translateY(20px);
  background: var(--surface-2); border:1px solid var(--border);
  padding: 12px 18px; border-radius: var(--r-full);
  font-size:13px; color:var(--text);
  box-shadow: var(--shadow-md);
  opacity:0; pointer-events:none;
  transition: all .25s ease;
  z-index: 60;
}
.toast.show{opacity:1; transform: translateX(-50%) translateY(0)}