/* =========================================================
   APP — Máquina Lucrativa Iceberg (dashboard da ferramenta)
   ========================================================= */

.app-body { display: flex; flex-direction: column; min-height: 100vh; }

/* Top bar do app */
.appbar {
  position: sticky; top: 0; z-index: 50; height: 64px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 26px;
  background: linear-gradient(180deg, rgba(4,10,22,.9), rgba(4,10,22,.55));
  border-bottom: 1px solid var(--stroke); backdrop-filter: blur(16px);
}
.appbar .left { display: flex; align-items: center; gap: 14px; }
.appbar .right { display: flex; align-items: center; gap: 14px; }
.plan-pill { font-size: .74rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ice-200); background: rgba(34,211,238,.1); border: 1px solid var(--stroke-hi); padding: 5px 12px; border-radius: 999px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg,#22d3ee,#0ea5e9); display: grid; place-items: center; color: #04121f; font-weight: 700; font-family: var(--font-display); }
.back-link { color: var(--text-dim); text-decoration: none; font-size: .9rem; }
.back-link:hover { color: var(--ice-300); }

.app-main { flex: 1; display: flex; align-items: flex-start; justify-content: center; padding: 40px 24px 80px; }

.view { width: 100%; max-width: 1120px; animation: fade .5s ease; }
.view[hidden] { display: none; }
@keyframes fade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- INPUT ---------- */
.input-card { max-width: 780px; margin: 30px auto 0; padding: 44px; border-radius: var(--radius-lg); }
.input-card h1 { font-size: 2.1rem; margin: 14px 0 10px; }
.input-card > p { color: var(--text-dim); margin-bottom: 30px; }
.field-label { display: block; font-size: .82rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ice-300); margin-bottom: 10px; }
.url-box { display: flex; gap: 12px; }
.url-input {
  flex: 1; padding: 17px 18px; border-radius: 14px; font-size: 1rem; font-family: var(--font-body);
  background: rgba(3,10,22,.6); border: 1px solid var(--stroke-hi); color: var(--text-hi);
  transition: border-color .2s, box-shadow .2s;
}
.url-input::placeholder { color: var(--text-faint); }
.url-input:focus { outline: none; border-color: var(--ice-400); box-shadow: 0 0 0 4px rgba(34,211,238,.12); }
.chips { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0 6px; }
.chip { cursor: pointer; font-size: .84rem; color: var(--text); background: rgba(20,42,74,.5); border: 1px solid var(--stroke); padding: 8px 14px; border-radius: 999px; transition: all .18s; }
.chip:hover { border-color: var(--ice-400); color: var(--ice-200); }
.chip.example { color: var(--gold-300); border-color: rgba(247,183,51,.3); background: rgba(247,183,51,.08); }

.optionals { margin-top: 20px; }
.optionals summary { cursor: pointer; color: var(--text-dim); font-size: .92rem; list-style: none; padding: 6px 0; }
.optionals summary::-webkit-details-marker { display: none; }
.optionals summary::before { content: "＋ "; color: var(--ice-400); }
.optionals[open] summary::before { content: "－ "; }
.opt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.opt-grid .url-input { width: 100%; font-size: .92rem; padding: 13px 15px; }
.gen-btn { margin-top: 30px; }
.input-note { margin-top: 16px; font-size: .84rem; color: var(--text-faint); text-align: center; }

/* ---------- PROCESSING ---------- */
.proc-wrap { max-width: 620px; margin: 20px auto 0; text-align: center; }
.proc-berg { position: relative; width: 160px; height: 160px; margin: 0 auto 30px; }
.proc-berg svg { width: 100%; animation: float 5s ease-in-out infinite; }
.proc-berg .berg-glow { width: 200px; height: 200px; top: -20px; left: -20px; }
.proc-wrap h2 { font-size: 1.7rem; margin-bottom: 8px; }
.proc-wrap > p { color: var(--text-dim); margin-bottom: 30px; }
.proc-bar { height: 8px; border-radius: 999px; background: rgba(20,42,74,.7); overflow: hidden; margin-bottom: 34px; border: 1px solid var(--stroke); }
.proc-bar .fill { height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg,#7ff0ff,#22d3ee,#0ea5e9); box-shadow: 0 0 16px var(--ice-glow); transition: width .5s ease; }
.proc-steps { list-style: none; text-align: left; display: flex; flex-direction: column; gap: 12px; }
.proc-steps li { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 14px; background: rgba(8,20,40,.4); border: 1px solid transparent; color: var(--text-dim); transition: all .3s; }
.proc-steps li .tick { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--text-faint); display: grid; place-items: center; flex: 0 0 auto; font-size: .8rem; transition: all .3s; }
.proc-steps li.active { color: var(--text-hi); border-color: var(--stroke-hi); background: rgba(34,211,238,.06); }
.proc-steps li.active .tick { border-color: var(--ice-400); }
.proc-steps li.active .tick::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ice-400); animation: pulse 1s infinite; }
.proc-steps li.done { color: var(--ice-100); }
.proc-steps li.done .tick { background: linear-gradient(135deg,#22d3ee,#0ea5e9); border-color: transparent; color: #04121f; }
.proc-steps li.done .tick::after { content: "✓"; }

/* ---------- RESULTS ---------- */
.result-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px; margin-bottom: 26px; }
.result-title { display: flex; align-items: center; gap: 16px; }
.result-title .flake { font-size: 2rem; filter: drop-shadow(0 0 10px var(--ice-glow)); }
.result-title h1 { font-size: 1.55rem; }
.result-title .sub { color: var(--text-dim); font-size: .92rem; }
.result-title .sub b { color: var(--ice-200); }
.result-actions { display: flex; gap: 12px; }

.tabs { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid var(--stroke); margin-bottom: 28px; }
.tab { cursor: pointer; padding: 13px 20px; font-family: var(--font-display); font-weight: 600; font-size: .95rem; color: var(--text-dim); background: none; border: none; border-bottom: 2px solid transparent; transition: all .2s; }
.tab:hover { color: var(--ice-200); }
.tab.active { color: var(--ice-100); border-bottom-color: var(--ice-400); }
.tab .n { font-size: .72rem; background: rgba(34,211,238,.14); color: var(--ice-300); padding: 1px 7px; border-radius: 999px; margin-left: 6px; }

.pane { animation: fade .4s ease; }
.pane[hidden] { display: none; }

/* Análise */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.card { padding: 24px; border-radius: var(--radius); }
.card h4 { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ice-300); margin-bottom: 10px; }
.card .big { font-family: var(--font-display); font-size: 1.35rem; color: var(--text-hi); }
.card p { color: var(--text); font-size: .95rem; }
.price-flip { display: flex; align-items: center; gap: 18px; }
.price-flip .old { font-family: var(--font-display); font-size: 1.6rem; color: var(--text-faint); text-decoration: line-through; }
.price-flip .arrow { color: var(--ice-400); font-size: 1.4rem; }
.price-flip .new { font-family: var(--font-display); font-size: 2.6rem; color: var(--gold-400); font-weight: 700; }
.tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.tag2 { font-size: .82rem; padding: 5px 11px; border-radius: 8px; background: rgba(34,211,238,.1); border: 1px solid var(--stroke); color: var(--ice-200); }

/* Anúncios */
.ads-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-bottom: 18px; }
.ads-status { display: flex; align-items: center; gap: 10px; font-size: .9rem; color: var(--text); }
.dot-live { width: 10px; height: 10px; border-radius: 50%; background: #37e0a0; box-shadow: 0 0 10px #37e0a0; display: inline-block; }
.dot-live.sim { background: var(--gold-400); box-shadow: 0 0 10px var(--gold-400); }
.dot-live.busy { background: var(--ice-400); box-shadow: 0 0 10px var(--ice-400); animation: pulse 1s infinite; }
.ads-tools { display: flex; align-items: center; gap: 14px; }
.fmt-tag { font-size: .8rem; color: var(--text-dim); border: 1px solid var(--stroke); padding: 6px 12px; border-radius: 8px; }
.ads-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.ad-canvas { width: 100%; display: block; aspect-ratio: 4 / 5; background: #041426; }
.ad-canvas.loading { position: relative; }
.ad-shimmer { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ice-200); font-size: .9rem; background: linear-gradient(110deg, rgba(8,20,40,.6), rgba(34,211,238,.08), rgba(8,20,40,.6)); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.ad-canvas-wrap { position: relative; }
.dl-btn { cursor: pointer; font-size: .82rem; color: #04121f; background: var(--ice-400); border: none; padding: 6px 12px; border-radius: 8px; font-weight: 600; }
.dl-btn:hover { filter: brightness(1.06); }
.ad { border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.ad-creative { aspect-ratio: 1/1; position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 18px; overflow: hidden; }
.ad-creative.c1 { background: linear-gradient(150deg,#0b3a5c,#041426); }
.ad-creative.c2 { background: linear-gradient(150deg,#123a2f,#04140f); }
.ad-creative.c3 { background: linear-gradient(150deg,#3a2a0b,#1a1204); }
.ad-creative .r1-badge { align-self: flex-start; background: var(--gold-400); color: #2a1a02; font-family: var(--font-display); font-weight: 700; font-size: .8rem; padding: 6px 12px; border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.4); }
.ad-creative .headline { font-family: var(--font-display); font-weight: 700; color: #fff; font-size: 1.15rem; line-height: 1.2; text-shadow: 0 2px 10px rgba(0,0,0,.5); }
.ad-creative .cta-fake { background: rgba(255,255,255,.95); color: #04121f; font-weight: 700; font-size: .82rem; text-align: center; padding: 9px; border-radius: 8px; }
.ad-body { padding: 18px; background: rgba(8,20,40,.5); flex: 1; }
.ad-angle { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ice-300); margin-bottom: 8px; }
.ad-copy { font-size: .9rem; color: var(--text); white-space: pre-line; }
.ad-foot { padding: 12px 18px; display: flex; justify-content: space-between; align-items: center; background: rgba(3,10,22,.5); border-top: 1px solid var(--stroke); }
.copy-btn { cursor: pointer; font-size: .82rem; color: var(--ice-200); background: none; border: 1px solid var(--stroke-hi); padding: 6px 12px; border-radius: 8px; transition: all .18s; }
.copy-btn:hover { background: rgba(34,211,238,.1); }
.copy-btn.copied { color: #04121f; background: var(--ice-400); border-color: transparent; }

/* Página preview */
.page-preview { display: grid; grid-template-columns: 1.3fr .7fr; gap: 20px; }
.browser { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--stroke-hi); }
.browser-bar { display: flex; align-items: center; gap: 8px; padding: 11px 14px; background: rgba(3,10,22,.8); border-bottom: 1px solid var(--stroke); }
.browser-bar .dots { display: flex; gap: 6px; }
.browser-bar .dots i { width: 11px; height: 11px; border-radius: 50%; display: block; }
.browser-bar .url { flex: 1; font-size: .78rem; color: var(--text-dim); background: rgba(20,42,74,.5); padding: 5px 12px; border-radius: 7px; }
.mock-lp { padding: 34px 28px; background: linear-gradient(180deg,#071a30,#03101f); max-height: 520px; overflow-y: auto; }
.mock-lp .m-eyebrow { color: var(--ice-300); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; }
.mock-lp h2 { font-size: 1.7rem; margin: 10px 0; color: #fff; }
.mock-lp .m-lead { color: var(--text); font-size: .95rem; margin-bottom: 20px; }
.mock-lp .m-img { height: 130px; border-radius: 12px; background: linear-gradient(135deg,#0b3a5c,#123a2f); border: 1px solid var(--stroke); display:grid; place-items:center; color: var(--text-dim); font-size:.85rem; margin-bottom: 20px; }
.mock-lp ul { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; }
.mock-lp ul li { font-size: .9rem; color: var(--text); }
.mock-lp ul li::before { content: "✔ "; color: var(--ice-400); }
.m-plans { display: grid; grid-template-columns: 1fr 1.15fr; gap: 12px; }
.m-plan { padding: 18px; border-radius: 12px; border: 1px solid var(--stroke); background: rgba(8,20,40,.5); }
.m-plan.r1 { opacity: .82; }
.m-plan.main { border-color: var(--ice-400); background: rgba(34,211,238,.07); box-shadow: 0 0 30px -12px var(--ice-glow); }
.m-plan .mp-name { font-size: .8rem; color: var(--text-dim); }
.m-plan .mp-price { font-family: var(--font-display); font-size: 1.8rem; color: #fff; }
.m-plan.r1 .mp-price { color: var(--text); font-size: 1.5rem; }
.m-plan.main .mp-price { color: var(--gold-400); }
.m-plan .mp-tag { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ice-300); }
.page-side .card { margin-bottom: 16px; }

/* Esteira / funil */
.funnel { display: flex; flex-direction: column; gap: 12px; max-width: 640px; margin: 0 auto; }
.funnel-step { display: flex; align-items: center; gap: 18px; padding: 18px 22px; border-radius: var(--radius); position: relative; }
.funnel-step .fs-icon { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; font-size: 1.2rem; flex: 0 0 auto; }
.funnel-step .fs-body { flex: 1; }
.funnel-step .fs-body h4 { color: var(--text-hi); font-size: 1.02rem; margin-bottom: 2px; }
.funnel-step .fs-body p { color: var(--text-dim); font-size: .86rem; }
.funnel-step .fs-price { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; }
.funnel-step.entry { border-color: var(--ice-400); }
.funnel-step.entry .fs-icon { background: rgba(34,211,238,.15); }
.funnel-step.entry .fs-price { color: var(--ice-200); }
.funnel-step.up .fs-icon { background: rgba(247,183,51,.14); }
.funnel-step.up .fs-price { color: var(--gold-400); }
.funnel-connector { text-align: center; color: var(--text-faint); font-size: 1.1rem; }
.funnel-total { margin-top: 8px; padding: 20px 24px; border-radius: var(--radius); display: flex; justify-content: space-between; align-items: center; border: 1px dashed var(--stroke-hi); }
.funnel-total span { color: var(--text-dim); }
.funnel-total b { font-family: var(--font-display); font-size: 1.7rem; color: var(--gold-400); }

/* Checkout / split */
.checkout-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.split-bar { height: 40px; border-radius: 12px; overflow: hidden; display: flex; margin: 18px 0; border: 1px solid var(--stroke); }
.split-bar .seg { display: grid; place-items: center; font-size: .82rem; font-weight: 600; color: #04121f; }
.split-bar .seg.aluno { background: linear-gradient(90deg,#7ff0ff,#22d3ee); }
.split-bar .seg.voce { background: linear-gradient(90deg,#ffd166,#f7b733); }
.split-legend { display: flex; gap: 20px; font-size: .86rem; }
.split-legend .li { display: flex; align-items: center; gap: 8px; color: var(--text); }
.split-legend i { width: 12px; height: 12px; border-radius: 3px; display: block; }
.dom-badge { display: inline-flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--ice-200); background: rgba(34,211,238,.08); border: 1px solid var(--stroke-hi); padding: 7px 13px; border-radius: 999px; margin-top: 4px; }
.toast { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--glass-2); border: 1px solid var(--stroke-hi); color: var(--ice-100); padding: 14px 24px; border-radius: 12px; backdrop-filter: blur(14px); box-shadow: var(--shadow); opacity: 0; transition: all .3s; z-index: 100; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Em breve */
.soon-pane { text-align: center; padding: 60px 20px; }
.soon-pane .big-ico { font-size: 3rem; margin-bottom: 16px; filter: drop-shadow(0 0 12px var(--ice-glow)); }
.soon-pane h3 { font-size: 1.5rem; margin-bottom: 10px; }
.soon-pane p { color: var(--text-dim); max-width: 440px; margin: 0 auto; }

@media (max-width: 860px) {
  .grid-2, .grid-3, .ads-grid, .page-preview, .checkout-grid, .m-plans { grid-template-columns: 1fr; }
  .opt-grid { grid-template-columns: 1fr; }
  .input-card { padding: 28px; }
}