/* Valuation Engine — wizard styles.
   Inherits the 3XScale app-shell design tokens (--accent green, --spark orange,
   --surface, --ink, --line, Inter font) so it matches the home page & InvestFlow.
   Fallback literals keep it sane if ever rendered outside the shell. */
.ve-app {
	--ve-accent: var(--accent, #0C7D47);
	--ve-accent-press: var(--accent-press, #0A6239);
	--ve-spark: var(--spark, #E8760F);
	--ve-ink: var(--ink, #0E2A21);
	--ve-soft: var(--ink-soft, #37483F);
	--ve-muted: var(--muted, #5E6F66);
	--ve-line: var(--line, #E3EBE6);
	--ve-surface: var(--surface, #ffffff);
	--ve-ground: var(--ground, #F5F8F6);
	max-width: 620px;
	margin: 0 auto;
	font-family: var(--font, 'Inter', system-ui, sans-serif);
	color: var(--ve-ink);
	line-height: 1.6;
	padding: 8px 0 4px;
}
.ve-app * { box-sizing: border-box; }

.ve-progress { height: 6px; background: color-mix(in srgb, var(--ve-accent) 14%, var(--ve-surface)); border-radius: 99px; overflow: hidden; margin-bottom: 1.7rem; }
.ve-progress-fill { height: 100%; background: var(--ve-accent); border-radius: 99px; transition: width .35s ease; }

.ve-step, .ve-result { animation: ve-in .3s ease; }
@keyframes ve-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ve-step, .ve-result, .ve-confetti { animation: none !important; } .ve-progress-fill { transition: none; } }

.ve-count { font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ve-muted); font-weight: 600; }
.ve-q { font-size: clamp(1.35rem, 4.2vw, 1.8rem); line-height: 1.22; margin: .5rem 0 0; font-weight: 700; letter-spacing: -.02em; color: var(--ve-ink); }
.ve-q.ve-shake { animation: ve-shake .35s; }
@keyframes ve-shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }
.ve-hint { color: var(--ve-muted); margin: .6rem 0 0; font-size: .93rem; }

.ve-cards { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin-top: 1.4rem; }
.ve-card {
	display: flex; flex-direction: column; align-items: flex-start; gap: .4rem;
	padding: 1.05rem; min-height: 82px; text-align: left;
	background: var(--ve-surface); border: 1.5px solid var(--ve-line); border-radius: 12px;
	cursor: pointer; font: inherit; color: inherit; transition: border-color .15s, background .15s, transform .08s;
}
.ve-card:hover { border-color: var(--ve-accent); }
.ve-card:active { transform: scale(.985); }
.ve-card.is-sel { border-color: var(--ve-accent); background: color-mix(in srgb, var(--ve-accent) 8%, var(--ve-surface)); }
.ve-card-ico { font-size: 1.6rem; line-height: 1; }
.ve-card-lbl { font-weight: 600; font-size: .98rem; letter-spacing: -.01em; }

.ve-field { margin-top: 1.4rem; }
.ve-input {
	width: 100%; padding: .85rem 1rem; font-size: 1.1rem; font: inherit; font-weight: 500;
	border: 1.5px solid var(--ve-line); border-radius: 10px; background: var(--ve-surface); color: var(--ve-ink);
}
.ve-input::placeholder { color: var(--ve-muted); opacity: .7; }
.ve-input:focus { outline: none; border-color: var(--ve-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ve-accent) 15%, transparent); }
.ve-money-box { display: flex; align-items: center; border: 1.5px solid var(--ve-line); border-radius: 10px; overflow: hidden; background: var(--ve-surface); }
.ve-money-box:focus-within { border-color: var(--ve-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ve-accent) 15%, transparent); }
.ve-rs { padding: 0 .25rem 0 1rem; font-size: 1.35rem; color: var(--ve-muted); font-weight: 600; }
.ve-input-money { border: none; box-shadow: none; font-size: 1.45rem; font-weight: 650; font-variant-numeric: tabular-nums; padding-left: .3rem; }
.ve-input-money:focus { border: none; box-shadow: none; }

.ve-nav { display: flex; gap: .8rem; margin-top: 1.6rem; align-items: center; }
.ve-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-weight: 600; letter-spacing: -.01em; border-radius: 9px; padding: .8rem 1.35rem; cursor: pointer; border: 1.5px solid transparent; font-size: .95rem; transition: background .15s, border-color .15s, color .15s; }
.ve-btn-primary { background: var(--ve-accent); color: #fff; margin-left: auto; }
.ve-btn-primary:hover { background: var(--ve-accent-press); }
.ve-btn-ghost { background: transparent; color: var(--ve-muted); border-color: var(--ve-line); }
.ve-btn-ghost:hover { color: var(--ve-ink); }
.ve-btn-outline { background: var(--ve-surface); color: var(--ve-accent); border-color: var(--ve-accent); }
.ve-btn-pay { background: var(--ve-spark); color: #fff; width: 100%; padding: 1.05rem; font-size: 1.05rem; margin-top: 1rem; }
.ve-btn-pay:hover { filter: brightness(.95); }
.ve-btn:disabled { opacity: .55; cursor: default; }

.ve-loading { text-align: center; padding: 3rem 0; color: var(--ve-muted); }
.ve-spinner { width: 38px; height: 38px; border: 4px solid color-mix(in srgb, var(--ve-accent) 18%, var(--ve-surface)); border-top-color: var(--ve-accent); border-radius: 50%; margin: 0 auto 1rem; animation: ve-spin 1s linear infinite; }
@keyframes ve-spin { to { transform: rotate(360deg); } }

.ve-result { text-align: center; padding-top: .5rem; }
.ve-confetti { font-size: 2.3rem; animation: ve-pop .5s ease; }
@keyframes ve-pop { 0% { transform: scale(0); } 70% { transform: scale(1.3); } 100% { transform: scale(1); } }
.ve-bignum { font-size: clamp(1.9rem, 7vw, 2.9rem); font-weight: 800; color: var(--ve-accent); letter-spacing: -.03em; margin: .3rem 0; font-variant-numeric: tabular-nums; }
.ve-disc { color: var(--ve-muted); font-size: .8rem; margin: 0 0 1.4rem; }

.ve-gate { background: color-mix(in srgb, var(--ve-accent) 6%, var(--ve-surface)); border: 1px solid var(--ve-line); border-radius: 12px; padding: 1.1rem; text-align: left; }
.ve-gate label { font-weight: 600; font-size: .93rem; display: block; margin-bottom: .6rem; color: var(--ve-ink); }
.ve-gate-row { display: flex; gap: .5rem; }
.ve-gate-row .ve-input { font-size: .98rem; padding: .65rem .8rem; }
.ve-gate-row .ve-btn { white-space: nowrap; padding: .65rem 1rem; }
.ve-gate-msg { font-size: .84rem; margin-top: .5rem; min-height: 1em; color: var(--ve-muted); }
.ve-gate-msg.ok { color: var(--ve-accent); } .ve-gate-msg.err { color: #c0392b; }

/* Paywall — uses the "spark" (orange) accent to mark the paid moment. */
.ve-paywall { margin-top: 1.5rem; text-align: left; background: color-mix(in srgb, var(--ve-spark) 7%, var(--ve-surface)); border: 1px solid color-mix(in srgb, var(--ve-spark) 30%, var(--ve-line)); border-radius: 14px; padding: 1.4rem; }
.ve-anchor { font-size: .82rem; color: var(--ve-muted); }
.ve-paywall h3 { margin: .35rem 0 1rem; font-size: 1.3rem; color: var(--ve-ink); font-weight: 700; letter-spacing: -.02em; }
.ve-feat { list-style: none; padding: 0; margin: 0 0 .3rem; display: flex; flex-direction: column; gap: .5rem; }
.ve-feat li { padding-left: 1.55rem; position: relative; font-size: .93rem; color: var(--ve-soft); }
.ve-feat li::before { content: "✓"; position: absolute; left: 0; color: var(--ve-spark); font-weight: 800; }
.ve-pay-msg { font-size: .85rem; margin-top: .6rem; min-height: 1em; color: var(--ve-spark); }
.ve-trust { text-align: center; font-size: .8rem; color: var(--ve-muted); margin-top: .8rem; }

/* UPI payment panel */
.ve-upi { margin-top: 1rem; border-top: 1px dashed color-mix(in srgb, var(--ve-spark) 40%, var(--ve-line)); padding-top: 1rem; }
.ve-upi-head { font-weight: 600; font-size: .95rem; margin-bottom: .8rem; color: var(--ve-ink); }
.ve-upi-amt { font-weight: 800; color: var(--ve-spark); }
.ve-upi-qr { display: block; width: 190px; max-width: 62%; height: auto; margin: 0 auto .9rem; border-radius: 12px; border: 1px solid var(--ve-line); background: #fff; padding: 8px; }
.ve-upi-id { display: flex; align-items: center; gap: .5rem; justify-content: center; background: var(--ve-surface); border: 1px solid var(--ve-line); border-radius: 9px; padding: .6rem .8rem; font-weight: 650; font-size: 1rem; margin-bottom: .8rem; }
.ve-upi-id .vpa { font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.ve-copy { font: inherit; font-size: .78rem; font-weight: 600; border: 1px solid var(--ve-line); background: transparent; color: var(--ve-accent); border-radius: 7px; padding: .25rem .55rem; cursor: pointer; }
.ve-upi-open { display: block; text-align: center; background: var(--ve-accent); color: #fff; border-radius: 9px; padding: .8rem; font-weight: 600; margin-bottom: 1rem; text-decoration: none; }
.ve-upi-open:hover { background: var(--ve-accent-press); }
.ve-upi-note { font-size: .82rem; color: var(--ve-muted); margin: 0 0 .7rem; }
.ve-upi label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .4rem; color: var(--ve-ink); }
.ve-upi .ve-input { margin-bottom: .6rem; }

.ve-freetag { display: inline-block; font-size: .75rem; font-weight: 700; letter-spacing: .02em; color: #fff; background: var(--ve-spark); padding: .25rem .6rem; border-radius: 99px; margin-bottom: .7rem; }
.ve-was { text-decoration: line-through; color: var(--ve-muted); font-weight: 600; }
.ve-reg-fields { display: flex; flex-direction: column; gap: .6rem; }
.ve-register .ve-hint { margin-bottom: .4rem; }

.ve-note { padding: 1.2rem; background: color-mix(in srgb, var(--ve-accent) 6%, var(--ve-surface)); border: 1px solid var(--ve-line); border-radius: 12px; color: var(--ve-soft); text-align: center; }
.ve-reveal-h { font-size: 1.35rem; font-weight: 700; }

@media (max-width: 420px) { .ve-cards { grid-template-columns: 1fr; } }