:root {
  --bg: #050a12;
  --bg-2: #08111f;
  --panel: rgba(12, 25, 44, 0.88);
  --panel-strong: #0d1c31;
  --border: rgba(116, 145, 190, 0.18);
  --text: #f5f9ff;
  --muted: #8da0bb;
  --accent: #3f8cff;
  --accent-2: #6df6d5;
  --danger: #ff6b7a;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.34);
  --radius: 22px;
  --radius-sm: 14px;
}

* { box-sizing: border-box; }

html {
  background: var(--bg);
  min-height: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at top right, rgba(63, 140, 255, 0.16), transparent 30%),
    radial-gradient(circle at 15% 20%, rgba(109, 246, 213, 0.08), transparent 24%),
    linear-gradient(180deg, #07111e 0%, #050a12 45%, #04070c 100%);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

button, input, select {
  font: inherit;
}

button {
  border: 0;
}

.app-shell {
  width: min(100%, 760px);
  margin: 0 auto;
  padding: max(18px, env(safe-area-inset-top)) 16px calc(28px + env(safe-area-inset-bottom));
}

.hero {
  padding: 12px 4px 18px;
}

.brand-chip, .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent-2);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: .13em;
}

.hero h1 {
  margin: 10px 0 8px;
  font-size: clamp(2rem, 9vw, 4rem);
  line-height: .92;
  letter-spacing: -0.055em;
  font-weight: 900;
}

.hero h1 span {
  color: transparent;
  background: linear-gradient(90deg, #f8fbff 0%, #6df6d5 45%, #3f8cff 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.hero p {
  margin: 0;
  color: var(--muted);
  font-size: 0.98rem;
}

.top-nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(7, 16, 28, .78);
  position: sticky;
  top: max(8px, env(safe-area-inset-top));
  z-index: 10;
  backdrop-filter: blur(18px);
  margin-bottom: 16px;
  box-shadow: 0 10px 35px rgba(0,0,0,.18);
}

.nav-btn {
  padding: 12px 8px;
  border-radius: 13px;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  font-weight: 800;
  font-size: .86rem;
}

.nav-btn.active {
  background: linear-gradient(180deg, rgba(63,140,255,.22), rgba(63,140,255,.1));
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(95, 157, 255, .22);
}

.view { display: none; }
.view.active { display: block; }

.panel, .result-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(14, 29, 50, .94), rgba(8, 18, 31, .95));
  box-shadow: var(--shadow);
}

.form-panel {
  padding: 18px;
}

.field-group {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
}

label {
  color: #dbe7f7;
  font-size: .84rem;
  font-weight: 800;
}

.optional {
  color: var(--muted);
  font-weight: 600;
}

input, select {
  width: 100%;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(132, 161, 202, .18);
  background: #07111f;
  color: var(--text);
  padding: 15px 14px;
  outline: none;
  transition: .18s ease;
}

input:focus, select:focus {
  border-color: rgba(63, 140, 255, .75);
  box-shadow: 0 0 0 4px rgba(63, 140, 255, .1);
}

.money-input {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
  background: #07111f;
  border: 1px solid rgba(132, 161, 202, .18);
  border-radius: var(--radius-sm);
  padding-left: 16px;
}

.money-input:focus-within {
  border-color: rgba(63, 140, 255, .75);
  box-shadow: 0 0 0 4px rgba(63, 140, 255, .1);
}

.money-input > span {
  color: var(--accent-2);
  font-weight: 900;
  font-size: 1.25rem;
}

.money-input input {
  border: 0;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  box-shadow: none !important;
  background: transparent;
  font-size: 1.25rem;
  font-weight: 800;
}

.inline-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 4px 0 16px;
}

.mini-card {
  border: 1px solid var(--border);
  background: rgba(5, 12, 21, .54);
  border-radius: 16px;
  padding: 14px;
}

.mini-card span {
  display: block;
  color: var(--muted);
  font-size: .72rem;
  margin-bottom: 8px;
}

.mini-card strong {
  font-size: 1.12rem;
}

.primary-btn {
  width: 100%;
  min-height: 54px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--accent), #2864ff 55%, #4d7fff);
  color: white;
  font-weight: 900;
  letter-spacing: .035em;
  cursor: pointer;
  box-shadow: 0 16px 38px rgba(48, 112, 255, .24);
}

.primary-btn:active {
  transform: translateY(1px);
}

.result-card {
  margin: 14px 0;
  padding: 24px 18px;
  text-align: center;
  overflow: hidden;
  position: relative;
  background:
    linear-gradient(180deg, rgba(14, 35, 61, .98), rgba(7, 22, 38, .96)),
    radial-gradient(circle at top, rgba(109,246,213,.14), transparent 40%);
}

.result-card::before {
  content: "";
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: rgba(63, 140, 255, .12);
  filter: blur(40px);
  top: -100px;
  right: -50px;
}

.result-kicker {
  color: var(--accent-2);
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .14em;
  position: relative;
}

.sale-price {
  font-size: clamp(3rem, 16vw, 5.8rem);
  line-height: 1;
  font-weight: 950;
  letter-spacing: -0.06em;
  margin: 12px 0 16px;
  position: relative;
}

.result-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 14px;
  color: var(--muted);
  font-size: .78rem;
  position: relative;
}

.compare-panel {
  padding: 8px 14px;
}

.section-toggle {
  width: 100%;
  background: transparent;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 2px;
  font-weight: 800;
  cursor: pointer;
}

.chevron {
  font-size: 1.4rem;
  color: var(--accent-2);
}

.compare-content {
  padding: 4px 0 10px;
}

.compare-content.hidden { display: none; }

.compare-row {
  display: grid;
  grid-template-columns: 70px 1fr;
  align-items: center;
  gap: 12px;
  padding: 11px 4px;
  border-top: 1px solid rgba(130,155,190,.1);
}

.compare-row strong {
  font-size: 1.05rem;
  color: var(--accent-2);
}

.compare-row span {
  text-align: right;
  font-weight: 800;
}

.calculation-note {
  color: var(--muted);
  font-size: .78rem;
  text-align: center;
  margin: 14px 0 6px;
}

.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 8px 2px 14px;
}

.section-heading h2 {
  margin: 5px 0 0;
  font-size: 1.45rem;
  letter-spacing: -.03em;
}

.section-copy {
  color: var(--muted);
  font-size: .88rem;
  margin: 0 2px 14px;
  line-height: 1.5;
}

.ghost-btn, .danger-ghost-btn {
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  color: #cbd8e9;
  cursor: pointer;
  font-weight: 800;
}

.danger-ghost-btn {
  color: var(--danger);
}

.margin-list, .history-list {
  display: grid;
  gap: 10px;
}

.margin-row, .history-item {
  border: 1px solid var(--border);
  background: rgba(11, 24, 41, .84);
  border-radius: 17px;
  padding: 14px;
}

.margin-row {
  display: grid;
  grid-template-columns: 1fr 96px;
  gap: 12px;
  align-items: center;
}

.margin-row strong {
  font-size: .96rem;
}

.percent-input {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  background: #07111f;
  border: 1px solid rgba(132,161,202,.18);
  border-radius: 12px;
  overflow: hidden;
}

.percent-input input {
  text-align: right;
  border: 0;
  padding: 12px 8px;
  font-weight: 900;
}

.percent-input span {
  color: var(--accent-2);
  font-weight: 900;
  padding-right: 10px;
}

.sticky-save {
  position: sticky;
  bottom: calc(12px + env(safe-area-inset-bottom));
  margin-top: 14px;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(78px + env(safe-area-inset-bottom));
  transform: translate(-50%, 20px);
  background: #10223a;
  color: #fff;
  padding: 11px 16px;
  border-radius: 999px;
  border: 1px solid rgba(109,246,213,.3);
  opacity: 0;
  pointer-events: none;
  transition: .22s ease;
  z-index: 20;
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

.history-item {
  display: grid;
  gap: 10px;
}

.history-topline {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.history-name {
  font-weight: 900;
}

.history-date {
  color: var(--muted);
  font-size: .74rem;
  white-space: nowrap;
}

.history-category {
  color: var(--accent-2);
  font-size: .78rem;
  font-weight: 800;
}

.history-data {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.history-stat {
  background: rgba(4, 11, 19, .5);
  border-radius: 12px;
  padding: 10px;
}

.history-stat span {
  display: block;
  color: var(--muted);
  font-size: .68rem;
  margin-bottom: 5px;
}

.history-stat strong {
  font-size: .83rem;
}

.empty-state {
  border: 1px dashed rgba(135, 158, 189, .22);
  border-radius: 18px;
  padding: 28px 18px;
  text-align: center;
  color: var(--muted);
}

footer {
  display: grid;
  gap: 4px;
  justify-items: center;
  color: var(--muted);
  margin-top: 28px;
  padding: 14px 0 6px;
  text-align: center;
}

footer span {
  color: #dbe7f7;
  font-weight: 900;
  font-size: .75rem;
  letter-spacing: .08em;
}

footer small {
  font-size: .7rem;
}

@media (min-width: 700px) {
  .app-shell { padding-inline: 22px; }
  .form-panel { padding: 22px; }
  .hero { padding-top: 26px; }
}

/* V1.1 */
.hero-with-cover{display:grid;grid-template-columns:minmax(0,1fr) 92px;gap:14px;align-items:center}
.hero-copy{min-width:0}
.ebook-mini{justify-self:end;width:88px;padding:5px;border:1px solid rgba(109,246,213,.22);border-radius:14px;background:linear-gradient(180deg,rgba(20,43,72,.9),rgba(6,15,27,.9));box-shadow:0 12px 28px rgba(0,0,0,.28)}
.ebook-mini img{display:block;width:100%;height:auto;border-radius:9px}
.ebook-cta{margin-top:18px;padding:20px;text-align:center;background:radial-gradient(circle at top right,rgba(109,246,213,.10),transparent 36%),linear-gradient(180deg,rgba(14,29,50,.96),rgba(8,18,31,.97))}
.ebook-discount{display:inline-block;color:var(--accent-2);font-size:.72rem;font-weight:950;letter-spacing:.08em;margin-bottom:9px}
.ebook-cta h2{margin:0 0 8px;font-size:1.3rem;letter-spacing:-.025em}
.ebook-cta p{margin:0 auto 16px;max-width:560px;color:var(--muted);line-height:1.5;font-size:.86rem}
.ebook-btn{width:100%;min-height:52px;border-radius:15px;color:#06121c;background:linear-gradient(135deg,#6df6d5,#47d6df);font-weight:950;cursor:pointer}
.ebook-pending{display:none;margin-top:10px;color:var(--muted)}
.ebook-pending.show{display:block}
@media (min-width:700px){.hero-with-cover{grid-template-columns:minmax(0,1fr) 150px;gap:24px}.ebook-mini{width:142px}}

/* V1.2 — IVA */
.iva-option{margin:14px 0 16px}
.iva-toggle{display:flex;gap:11px;align-items:flex-start;padding:13px 14px;border:1px solid rgba(150,180,210,.18);border-radius:14px;background:rgba(4,14,25,.55);cursor:pointer}
.iva-toggle input{position:absolute;opacity:0;pointer-events:none}
.iva-check{width:23px;height:23px;flex:0 0 23px;border:1px solid rgba(109,246,213,.55);border-radius:7px;background:rgba(3,12,22,.8);position:relative}
.iva-toggle input:checked+.iva-check{background:linear-gradient(135deg,#6df6d5,#47d6df);border-color:transparent}
.iva-toggle input:checked+.iva-check:after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;color:#06121c;font-size:16px;font-weight:1000}
.iva-toggle strong{display:block;font-size:.88rem;color:var(--text)}
.iva-toggle small{display:block;margin-top:3px;color:var(--muted);font-size:.72rem;line-height:1.35}
.iva-breakdown{margin-top:8px;padding:9px 12px;border-radius:11px;background:rgba(109,246,213,.07);color:var(--muted);font-size:.76rem;line-height:1.4}
.iva-breakdown strong{color:var(--accent-2)}

.margin-lesson{margin:18px 0 4px;border:1px solid rgba(109,246,213,.18);border-radius:18px;background:linear-gradient(180deg,rgba(8,25,39,.82),rgba(5,15,26,.78));overflow:hidden}
.margin-lesson-toggle{width:100%;border:0;background:transparent;color:var(--text);padding:16px;display:grid;grid-template-columns:auto 1fr;gap:10px 12px;text-align:left;cursor:pointer}
.margin-lesson-icon{font-size:1.15rem}.margin-lesson-heading strong{display:block;font-size:.92rem}.margin-lesson-heading small{display:block;margin-top:4px;color:var(--muted);font-size:.75rem;line-height:1.4}
.margin-lesson-action{grid-column:2;color:var(--accent-2);font-size:.72rem;font-weight:900}.margin-lesson-content{padding:0 16px 17px 48px;border-top:1px solid rgba(150,180,210,.10)}
.margin-lesson-content h3{margin:16px 0 10px;font-size:1rem}.margin-lesson-content p{margin:9px 0;color:var(--muted);font-size:.82rem;line-height:1.55}.margin-lesson-content strong{color:var(--text)}
.lesson-definitions{margin:12px 0;padding:10px 12px;border-radius:12px;background:rgba(109,246,213,.06)}.lesson-definitions p{margin:4px 0}.lesson-impact{color:var(--text)!important}.lesson-source{font-size:.72rem!important;opacity:.8}
.lesson-ebook-button{margin-top:10px;border:1px solid rgba(109,246,213,.35);border-radius:11px;background:rgba(109,246,213,.08);color:var(--accent-2);padding:10px 12px;font-size:.72rem;font-weight:900;cursor:pointer}
.lesson-ebook-pending{font-size:.7rem!important;margin-top:8px!important}@media(max-width:560px){.margin-lesson-content{padding-left:16px}}

.install-card{margin:0 0 14px;padding:12px 14px;border:1px solid rgba(109,246,213,.22);border-radius:15px;background:rgba(7,24,37,.82);display:grid;grid-template-columns:1fr auto;gap:10px 12px;align-items:center}.install-card strong{display:block;font-size:.86rem}.install-card small{display:block;margin-top:3px;color:var(--muted);font-size:.72rem}.install-card button{border:0;border-radius:10px;padding:10px 12px;background:linear-gradient(135deg,#6df6d5,#47d6df);color:#06121c;font-weight:950}.install-help{grid-column:1/-1;margin:0;color:var(--muted);font-size:.72rem}
.price-breakdown{margin-top:14px;padding:16px}.breakdown-title{margin-bottom:10px;color:var(--accent-2);font-size:.7rem;font-weight:900;letter-spacing:.08em}.breakdown-row{display:flex;justify-content:space-between;gap:18px;padding:8px 0;border-bottom:1px solid rgba(150,180,210,.10);font-size:.8rem;color:var(--muted)}.breakdown-row strong{color:var(--text)}.breakdown-row.total strong,.breakdown-row.margin strong{color:var(--accent-2)}
.history-count{font-size:.68rem;color:var(--muted);font-weight:800}.history-item{position:relative;padding-right:54px}.history-delete-btn{position:absolute;right:12px;top:12px;width:34px;height:34px;border:1px solid rgba(255,110,110,.25);border-radius:10px;background:rgba(255,80,80,.06);color:#ff8c8c;cursor:pointer}
@media(max-width:560px){.install-card{grid-template-columns:1fr}.install-card button{width:100%}.history-count{display:block;margin-top:3px}}

.lesson-exclusive-offer{margin:14px 0 4px;padding:11px 12px;border:1px solid rgba(109,246,213,.18);border-radius:12px;background:rgba(109,246,213,.055)}
.lesson-exclusive-offer strong{display:block;color:var(--text);font-size:.78rem;margin-bottom:5px}
.lesson-exclusive-offer span{display:block;color:var(--muted);font-size:.76rem;line-height:1.45}
.lesson-exclusive-offer s{opacity:.75}.lesson-exclusive-offer b{color:var(--accent-2)}
a.lesson-ebook-button{display:inline-block;text-decoration:none;text-align:center}

.share-price-button{width:100%;margin:12px 0 2px;padding:13px 16px;border:1px solid rgba(109,246,213,.24);border-radius:13px;background:rgba(109,246,213,.07);color:var(--accent-2);font-weight:900;letter-spacing:.025em;cursor:pointer}
.share-price-status{margin:7px 0 0;text-align:center;color:var(--muted);font-size:.72rem}
.lesson-exclusive-offer--featured{margin-top:18px;padding:18px;border:1px solid rgba(109,246,213,.34);border-radius:16px;background:radial-gradient(circle at 100% 0%,rgba(71,214,223,.13),transparent 38%),linear-gradient(145deg,rgba(12,39,52,.96),rgba(7,25,37,.96));box-shadow:0 12px 30px rgba(0,0,0,.16)}
.offer-kicker{color:var(--accent-2);font-size:.76rem;font-weight:950;letter-spacing:.055em}.offer-headline{margin-top:9px;color:var(--text);font-size:1.08rem;font-weight:950;line-height:1.18}.offer-copy{margin:8px 0 14px;color:var(--muted);font-size:.82rem;line-height:1.55}.offer-copy strong{color:var(--text)}
.offer-price-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.offer-old-price{color:var(--muted);font-size:.82rem;text-decoration:line-through}.offer-current-price{color:var(--text);font-size:1.65rem;line-height:1}.offer-badge{padding:5px 8px;border-radius:999px;background:rgba(109,246,213,.14);color:var(--accent-2);font-size:.72rem;font-weight:950}.offer-launch{margin-top:7px;color:var(--muted);font-size:.67rem;font-weight:850;letter-spacing:.07em}
.lesson-ebook-button--featured{display:block!important;width:100%;box-sizing:border-box;margin-top:10px!important;padding:14px 12px!important;border-radius:13px!important;background:linear-gradient(135deg,#6df6d5,#47d6df)!important;color:#06121c!important;font-weight:950!important;text-align:center;text-decoration:none}

.feedback-cta{margin:18px auto 0;max-width:980px;padding:17px;display:flex;align-items:center;justify-content:space-between;gap:18px}.feedback-cta h2{margin:4px 0 5px;font-size:1rem}.feedback-cta p{margin:0;color:var(--muted);font-size:.78rem;line-height:1.5}.feedback-eyebrow{color:var(--accent-2);font-size:.68rem;font-weight:950;letter-spacing:.075em}.feedback-open-button,.feedback-submit,.feedback-done{border:0;border-radius:12px;background:linear-gradient(135deg,#6df6d5,#47d6df);color:#06121c;font-weight:950;cursor:pointer}.feedback-open-button{padding:12px 14px}.feedback-modal[hidden]{display:none}.feedback-modal{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:16px}.feedback-backdrop{position:absolute;inset:0;background:rgba(2,9,15,.82);backdrop-filter:blur(6px)}.feedback-dialog{position:relative;z-index:1;width:min(100%,560px);max-height:88vh;overflow:auto;padding:22px;border:1px solid rgba(109,246,213,.22);border-radius:20px;background:linear-gradient(160deg,#0b2231,#071722);box-shadow:0 24px 80px rgba(0,0,0,.48)}.feedback-close{position:absolute;right:12px;top:10px;border:0;background:transparent;color:var(--muted);font-size:1.6rem}.feedback-intro{color:var(--muted);font-size:.8rem}.feedback-fieldset{margin:17px 0;padding:0;border:0}.feedback-fieldset legend,.feedback-label>span{display:block;margin-bottom:9px;font-size:.8rem;font-weight:850}.business-options{display:flex;flex-wrap:wrap;gap:7px}.business-options input,.rating-options input{position:absolute;opacity:0}.business-options span{display:block;padding:8px 10px;border:1px solid rgba(150,180,210,.18);border-radius:999px;color:var(--muted);font-size:.73rem}.business-options input:checked+span{border-color:rgba(109,246,213,.5);background:rgba(109,246,213,.12);color:var(--accent-2)}.rating-options{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:4px}.rating-options label{font-size:1.85rem;color:rgba(160,180,195,.28);cursor:pointer}.rating-options label:hover,.rating-options label:hover~label,.rating-options input:checked~label{color:#ffd76a}.feedback-label{display:block;margin-bottom:17px}.feedback-label textarea,.feedback-label input{width:100%;box-sizing:border-box;border:1px solid rgba(150,180,210,.18);border-radius:12px;background:rgba(3,15,24,.65);color:var(--text);padding:11px 12px;font:inherit}.feedback-label small{display:block;margin-top:6px;color:var(--muted);font-size:.66rem}.feedback-submit{width:100%;padding:14px}.feedback-submit:disabled{opacity:.55}.feedback-error{color:#ff9a9a;text-align:center;font-size:.72rem}.feedback-honeypot{position:absolute!important;left:-9999px!important}.feedback-thanks{text-align:center;padding:30px 8px}.feedback-thanks-icon{width:54px;height:54px;margin:0 auto 12px;display:grid;place-items:center;border-radius:50%;background:rgba(109,246,213,.12);color:var(--accent-2);font-size:1.6rem}.feedback-thanks p{color:var(--muted)}.feedback-done{padding:12px 16px}body.feedback-modal-open{overflow:hidden}@media(max-width:640px){.feedback-cta{margin-left:16px;margin-right:16px;flex-direction:column;align-items:stretch}.feedback-open-button{width:100%}}