*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;background:#09090F;font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',sans-serif;color:#F0F0F0;-webkit-font-smoothing:antialiased}
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
#app{height:100%;max-width:430px;margin:0 auto;display:flex;flex-direction:column;position:relative}
.scr{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:16px;scroll-behavior:smooth}
.scr::-webkit-scrollbar{display:none}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}
input[type=number]{-moz-appearance:textfield}
input[type=range]{-webkit-appearance:none;height:6px;background:#1E1E30;border-radius:3px;outline:none;width:100%}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;background:linear-gradient(135deg,#A855F7,#06B6D4);border-radius:50%;cursor:pointer;box-shadow:0 0 12px #A855F750}

@keyframes pulse{0%,100%{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}
@keyframes fadeIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes glow{0%,100%{filter:drop-shadow(0 0 20px #A855F740)}50%{filter:drop-shadow(0 0 50px #A855F7aa)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

.fi{animation:fadeIn .5s ease}
.gl{animation:glow 3s ease-in-out infinite}
.float{animation:float 3s ease-in-out infinite}

/* ===== NAV BAR — MUITO MAIS VISIVEL ===== */
.nav{display:flex;justify-content:space-around;padding:10px 6px env(safe-area-inset-bottom,22px);border-top:1px solid #1E1E30;background:#0B0B14;flex-shrink:0;z-index:10}
.nb{display:flex;flex-direction:column;align-items:center;gap:4px;background:none;border:none;cursor:pointer;padding:6px 10px;transition:all .25s;border-radius:12px}
.nb .ni{font-size:22px;transition:transform .2s}
.nb .nl{font-size:11px;color:#A0A0B5;font-weight:600;letter-spacing:.3px}
.nb.ac{opacity:1;background:#A855F715}
.nb.ac .ni{transform:scale(1.15)}
.nb.ac .nl{color:#C084FC;font-weight:800}
.nb:not(.ac){opacity:.75}

/* ===== CARDS — MAIS DESTAQUE ===== */
.bx{background:linear-gradient(145deg,#10101C,#0E0E1A);border:1px solid #252540;border-radius:16px;padding:16px 18px;margin-bottom:10px;cursor:pointer;display:flex;align-items:center;gap:14px;transition:all .25s}
.bx:active{border-color:#A855F745;transform:scale(.98);background:#14142A}

/* ===== BUTTONS — MAIS IMPACTO ===== */
.bp{padding:18px 52px;background:linear-gradient(135deg,#A855F7,#7C3AED,#6366F1);color:#fff;border:none;border-radius:18px;cursor:pointer;font-size:17px;font-weight:800;transition:all .15s;letter-spacing:.4px;box-shadow:0 6px 28px #A855F735}
.bp:active{transform:scale(.96);box-shadow:0 3px 14px #A855F720}

/* ===== CREDIT BADGE ===== */
.cb{display:inline-flex;align-items:center;gap:5px;border-radius:12px;padding:6px 14px;cursor:pointer;font-size:14px;font-weight:700;backdrop-filter:blur(8px)}

/* ===== INPUTS ===== */
.ai{width:100%;max-width:320px;padding:18px 22px;background:#0E0E1A;border:1.5px solid #303050;border-radius:16px;color:#F0F0F0;font-size:17px;text-align:center;outline:none;transition:all .25s;font-family:inherit}
.ai:focus{border-color:#A855F7;box-shadow:0 0 0 4px #A855F718}
.ai::placeholder{color:#505065}

/* ===== SPINNER ===== */
.sp{display:inline-block;width:24px;height:24px;border:2px solid #A855F730;border-top-color:#A855F7;border-radius:50%;animation:spin .6s linear infinite}

/* ===== WAVEFORM ===== */
canvas.wv{width:100%;height:48px;border-radius:12px;opacity:.85}

/* ===== GRID ===== */
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}

/* ===== STAT CARDS — MAIORES ===== */
.stat-card{background:linear-gradient(145deg,#10101C,#0E0E1A);border-radius:16px;padding:18px 10px;text-align:center;border:1px solid #252540}
.stat-card .st-icon{font-size:20px;margin-bottom:6px}
.stat-card .st-val{font-size:32px;font-weight:900;color:#F0F0F0;line-height:1.2}
.stat-card .st-label{font-size:12px;color:#8080A0;font-weight:600;margin-top:4px;text-transform:uppercase;letter-spacing:.6px}

/* ===== SECTION HEADERS ===== */
.sec-title{color:#A855F7;font-size:13px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;margin:0 0 10px}

/* ===== TIP BOX ===== */
.tip-box{background:linear-gradient(145deg,#06B6D408,#06B6D415);border:1px solid #06B6D430;border-radius:16px;padding:18px}
.tip-box .tip-label{color:#06B6D4;font-weight:800;font-size:13px;margin-bottom:6px;letter-spacing:.5px}
.tip-box p{color:#B0B0C8;font-size:15px;line-height:1.5}

/* ===== PLAN STEPS ===== */
.plan-step{background:linear-gradient(145deg,#10101C,#0E0E1A);border:1px solid #252540;border-radius:16px;padding:16px 18px;margin-bottom:10px;cursor:pointer;display:flex;align-items:center;gap:14px;transition:all .25s}
.plan-step:active{border-color:#A855F745;transform:scale(.98)}
.plan-num{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#A855F725,#6366F125);border-radius:50%;font-size:13px;font-weight:900;color:#A855F7;flex-shrink:0}

/* ===== PRESET ACTIVE ===== */
.preset-active{background:linear-gradient(145deg,#A855F714,#6366F114);border:1px solid #A855F738;border-radius:18px;padding:20px;margin-bottom:20px}

/* ===== PAGE PADDING ===== */
.page-pad{padding:26px 22px}

/* ===== CENTERED SCREENS ===== */
.center-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:calc(100vh - 80px);padding:44px 28px;text-align:center}

/* ===== PAYWALL BUTTONS ===== */
.paywall-btn{width:100%;max-width:320px;padding:18px;border-radius:18px;cursor:pointer;font-weight:800;font-size:16px;letter-spacing:.3px;transition:all .15s;display:block;margin:0 auto 12px;border:none;font-family:inherit}
.paywall-btn:active{transform:scale(.97)}

/* ===== INSTALL GUIDE ===== */
.install-guide{background:linear-gradient(145deg,#10101C,#14142A);border:1px solid #252540;border-radius:18px;padding:22px;margin:14px auto;max-width:340px}
.install-step{display:flex;gap:14px;align-items:flex-start;margin-bottom:16px}
.install-step-num{width:30px;height:30px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#06B6D425,#A855F725);border-radius:50%;font-size:13px;font-weight:900;color:#06B6D4;flex-shrink:0}
.install-step-text{color:#B0B0C8;font-size:14px;line-height:1.6}
.install-step-text strong{color:#F0F0F0}