:root {
      color-scheme: dark;
      --bg:#050b1f;
      --surface:#0b1330;
      --surface-2:#101a3d;
      --line:#1f2d5c;
      --text:#f7f9fc;
      --muted:#9ba7b4;
      --blue:#0b5cff;
      --blue-strong:#0846c9;
      --blue-soft:#0e2a66;
      --green:#32d17d;
      --green-soft:#0d2c20;
      --red:#ff6473;
      --red-soft:#32151a;
      --shadow:0 22px 70px rgba(0,0,0,.38);
    }
    * { box-sizing:border-box; }
    html { background:var(--bg); }
    body {
      margin:0;
      min-height:100vh;
      background:
        radial-gradient(circle at 50% -10%, rgba(22,119,255,.16), transparent 32rem),
        var(--bg);
      color:var(--text);
      font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
      font-size:16px;
      line-height:1.45;
    }
    button,input,select { font:inherit; }
    button { cursor:pointer; }
    button:focus-visible,input:focus-visible,select:focus-visible { outline:3px solid rgba(22,119,255,.48); outline-offset:2px; }
    .shell { width:min(100%,500px); min-height:100vh; margin:0 auto; position:relative; background:var(--bg); box-shadow:var(--shadow); }
    .view { display:none; min-height:100vh; padding:calc(18px + env(safe-area-inset-top)) 18px calc(104px + env(safe-area-inset-bottom)); }
    .view.active { display:block; }
    .setup-view { padding-bottom:32px; }
    .brand { display:flex; align-items:center; gap:10px; }
    .brand-mark { width:42px; height:42px; border-radius:13px; background:transparent; border:0; display:grid; place-items:center; box-shadow:0 8px 24px rgba(22,119,255,.18); overflow:hidden; }
    .brand-mark svg { width:30px; height:30px; }
    .brand-name { font-size:1.25rem; font-weight:750; letter-spacing:-.04em; }
    .brand-name span { color:#69a9ff; }
    .brand-sub { color:#b9c4cf; font-size:.78rem; margin-top:1px; }
    .topbar { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:24px; }
    .icon-button { width:44px; height:44px; border:1px solid var(--line); border-radius:14px; background:var(--surface); color:var(--text); display:grid; place-items:center; }
    .icon-button svg { width:20px; height:20px; }
    .eyebrow { margin:18px 0 7px; color:#75b1ff; font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
    h1,h2,h3,p { margin-top:0; }
    h1 { margin-bottom:10px; font-size:clamp(1.8rem,8vw,2.35rem); line-height:1.08; letter-spacing:-.045em; }
    h2 { margin-bottom:8px; font-size:1.65rem; line-height:1.12; letter-spacing:-.035em; }
    h3 { margin-bottom:0; font-size:1rem; }
    .muted { color:var(--muted); }
    .intro { margin-bottom:22px; color:var(--muted); }
    .fields { display:grid; gap:15px; }
    .two { grid-template-columns:1fr 1fr; gap:10px; }
    .field label { display:block; color:#b8c2cd; font-size:.875rem; font-weight:600; margin-bottom:7px; }
    .field input,.field select { width:100%; min-height:50px; border:1px solid var(--line); border-radius:14px; background:var(--surface); color:var(--text); padding:0 14px; }
    .field input::placeholder { color:#677483; }
    .field input:focus,.field select:focus { border-color:#4a93f7; }
    .money { position:relative; }
    .money::before { content:"R$"; position:absolute; left:14px; top:14px; color:var(--muted); font-size:.875rem; pointer-events:none; }
    .money input { padding-left:42px; }
    .helper { color:#768493; font-size:.78rem; margin:7px 0 0; }
    .card { background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:17px; }
    .card + .card { margin-top:12px; }
    .setup-total { margin:18px 0; }
    .label { color:var(--muted); font-size:.8rem; }
    .value { font-size:1.5rem; font-weight:750; letter-spacing:-.035em; font-variant-numeric:tabular-nums; }
    .btn { min-height:52px; border-radius:15px; padding:0 17px; border:1px solid transparent; font-weight:700; transition:transform .15s ease,background .15s ease; }
    .btn:active { transform:scale(.985); }
    .btn-primary { width:100%; color:white; background:var(--blue); box-shadow:0 9px 26px rgba(22,119,255,.2); }
    .btn-primary:hover { background:var(--blue-strong); }
    .btn-secondary { color:var(--text); background:var(--surface); border-color:var(--line); }
    .btn-danger { color:var(--red); background:var(--red-soft); border-color:#6a2730; }
    .actions { display:grid; grid-template-columns:.72fr 1.28fr; gap:10px; margin-top:18px; }
    .hero { margin:18px 0 12px; padding:21px; border:1px solid #284a72; border-radius:23px; background:linear-gradient(145deg,#14243a,#0d1a2b); overflow:hidden; position:relative; }
    .hero::after { content:""; position:absolute; width:170px; height:170px; border-radius:50%; right:-85px; top:-100px; background:rgba(22,119,255,.18); }
    .hero .value { font-size:2.15rem; margin:4px 0; }
    .progress { height:7px; border-radius:999px; background:#28384d; margin-top:17px; overflow:hidden; }
    .progress > span { display:block; height:100%; width:0; border-radius:inherit; background:var(--blue); transition:width .3s ease; }
    .metric-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:12px 0; }
    .metric-grid .card { padding:15px; }
    .metric-grid .value { margin-top:4px; font-size:1.18rem; }
    .close-cta { width:100%; border:1px solid #2b63a5; border-radius:19px; background:var(--blue-soft); color:var(--text); padding:15px; display:flex; align-items:center; gap:13px; text-align:left; }
    .close-cta .cta-icon { width:45px; height:45px; flex:0 0 45px; border-radius:14px; background:var(--blue); display:grid; place-items:center; }
    .close-cta strong,.close-cta small { display:block; }
    .close-cta strong { font-size:1rem; }
    .close-cta small { color:#a6c5ee; margin-top:3px; }
    .time-chip { display:inline-flex; align-items:center; gap:6px; margin:11px 0 18px; padding:6px 10px; border-radius:999px; background:var(--blue-soft); color:#8cbcff; font-size:.78rem; }
    .section-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:22px 0 10px; }
    .section-head button { border:0; background:transparent; color:#80b6ff; padding:8px 0; font-weight:650; }
    .empty { text-align:center; padding:28px 18px; color:var(--muted); }
    .empty strong { display:block; color:var(--text); margin-bottom:4px; }
    .recent-row,.history-row { display:flex; justify-content:space-between; gap:14px; align-items:center; }
    .recent-row + .recent-row,.history-row + .history-row { border-top:1px solid var(--line); margin-top:13px; padding-top:13px; }
    .row-title { font-weight:700; }
    .row-meta { color:var(--muted); font-size:.8rem; margin-top:2px; }
    .positive { color:var(--green); }
    .negative { color:var(--red); }
    .gross-preview { display:flex; align-items:center; justify-content:space-between; margin-top:17px; }
    .result-card { text-align:center; margin:18px 0 12px; padding:23px 17px; border-radius:21px; background:var(--green-soft); border:1px solid #246344; }
    .result-card.loss { background:var(--red-soft); border-color:#6a2730; }
    .result-card .value { color:var(--green); font-size:2.4rem; }
    .result-card.loss .value { color:var(--red); }
    .breakdown { margin:12px 0 18px; }
    .break-row { display:flex; justify-content:space-between; gap:12px; padding:11px 0; border-bottom:1px solid var(--line); }
    .break-row:last-child { border-bottom:0; }
    .break-row span:first-child { color:var(--muted); }
    .history-actions { display:flex; gap:7px; margin-top:8px; }
    .mini-btn { min-height:38px; padding:0 12px; border-radius:11px; border:1px solid var(--line); color:#bdc8d3; background:var(--surface-2); font-size:.8rem; font-weight:650; }
    .mini-btn.delete { color:#ff8c97; }
    .notice { display:flex; gap:10px; padding:13px; border-radius:15px; background:#101d2e; color:#b6cbea; font-size:.85rem; margin:16px 0; }
    .notice svg { flex:0 0 19px; margin-top:1px; }
    .bottom-nav { position:fixed; z-index:10; bottom:0; left:50%; transform:translateX(-50%); width:min(100%,500px); height:calc(78px + env(safe-area-inset-bottom)); padding:8px 12px env(safe-area-inset-bottom); display:grid; grid-template-columns:repeat(3,1fr); background:rgba(10,14,20,.96); border-top:1px solid var(--line); backdrop-filter:blur(18px); }
    .bottom-nav[hidden] { display:none; }
    .nav-btn { border:0; background:transparent; color:#788493; display:grid; place-items:center; align-content:center; gap:3px; font-size:.75rem; }
    .nav-btn svg { width:21px; height:21px; }
    .nav-btn.active { color:#69a9ff; font-weight:700; }
    .toast { position:fixed; z-index:30; left:50%; bottom:calc(92px + env(safe-area-inset-bottom)); transform:translate(-50%,18px); opacity:0; pointer-events:none; width:min(calc(100% - 36px),464px); padding:13px 15px; border-radius:14px; background:#edf4ff; color:#0a1422; font-weight:700; box-shadow:0 14px 40px rgba(0,0,0,.36); transition:.2s ease; }
    .toast.show { opacity:1; transform:translate(-50%,0); }
    .dialog-backdrop { position:fixed; z-index:20; inset:0; display:grid; place-items:end center; background:rgba(0,0,0,.68); padding:18px; }
    .dialog-backdrop[hidden] { display:none; }
    .dialog { width:min(100%,464px); background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:19px; box-shadow:var(--shadow); }
    .dialog p { color:var(--muted); }
    .install-button { display:none; width:100%; margin-top:10px; }
    .install-button.visible { display:block; }
    .link-button { border:0; padding:0; color:#80b6ff; background:transparent; font-weight:650; }
    @media (min-width:700px) {
      body { padding:24px 0; }
      .shell { min-height:calc(100vh - 48px); border:1px solid var(--line); border-radius:30px; overflow:hidden; }
      .view { min-height:calc(100vh - 48px); }
      .bottom-nav { bottom:24px; width:498px; border:1px solid var(--line); border-radius:0 0 29px 29px; }
    }
  
.demo-bar{display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap;padding:8px 16px;background:#102747;color:#b6cbea;font-size:.78rem;text-align:center}.demo-bar button{border:1px solid #2b63a5;background:transparent;color:#8cbcff;border-radius:999px;padding:4px 12px;font-size:.78rem}
/* --- extras (resumo, histórico, plano) --- */
.brand-mark img{display:block;width:100%;height:100%;object-fit:contain}
.card{box-shadow:0 8px 24px rgba(0,0,0,.22)}
.bottom-nav{grid-template-columns:repeat(4,1fr)}
.metric-grid{grid-auto-rows:1fr}
.metric-grid .card{margin:0;min-width:0;display:flex;flex-direction:column;justify-content:center}
.metric-grid .value{font-size:1.1rem;white-space:nowrap}
.x-bars{display:flex;align-items:flex-end;gap:8px;height:96px;margin-top:12px}
.x-bar{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:5px;font-size:.68rem;color:var(--muted)}
.x-bar i{display:block;width:100%;min-height:3px;border-radius:7px 7px 3px 3px;background:var(--green)}
.x-bar.neg i{background:var(--red)}.x-bar.today b{color:var(--text)}
.x-split{display:flex;height:10px;border-radius:99px;overflow:hidden;background:#28384d;margin:12px 0 10px}
.x-split span:first-child{background:var(--blue)}.x-split span:last-child{background:var(--green)}
.x-legend{display:flex;justify-content:space-between;gap:8px;font-size:.85rem}
.x-legend small{display:block;color:var(--muted)}
.x-row{display:flex;gap:10px;margin-top:12px}.x-row .btn{flex:1;min-height:46px}
.banner{border:1px solid var(--line);background:var(--blue-soft);border-radius:14px;padding:12px 14px;margin-bottom:12px;font-size:.9rem}
.banner.warn{background:var(--red-soft)}
.banner button{margin-left:8px}
.sync-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--muted);margin-right:6px}
.sync-dot.ok{background:var(--green)}.sync-dot.off{background:#f5b942}
@keyframes x-pop{from{opacity:0;transform:scale(.94) translateY(10px)}to{opacity:1;transform:none}}
#result-view.active .result-card{animation:x-pop .45s cubic-bezier(.2,.9,.3,1.2)}
@media (prefers-reduced-motion:reduce){#result-view.active .result-card{animation:none}}