@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html { scrollbar-width: thin; scrollbar-color: #475569 #0b1120; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0b1120; }
::-webkit-scrollbar-thumb { border: 3px solid #0b1120; border-radius: 999px; background: linear-gradient(180deg, #64748b, #334155); }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #60a5fa, #f97316); }
::-webkit-scrollbar-corner { background: #0b1120; }
:root { --blue:#5b8cff; --ink:#f8fafc; --muted:#94a3b8; --line:#334155; --soft:#172033; --accent:#fb923c; }
body { position:relative; isolation:isolate; margin:0; min-height:100vh; padding:28px 16px; color:var(--ink); font-family:'Poppins',ui-sans-serif,system-ui,sans-serif; background:linear-gradient(135deg,#070b16 0%,#111827 52%,#1e1b4b 100%); }
body:not(.has-results) { display:flex; align-items:center; justify-content:center; }
body.has-results { display:block; }
body::before, body::after { position:fixed; z-index:-1; content:""; width:260px; height:260px; border-radius:50%; filter:blur(18px); opacity:.22; pointer-events:none; }
body::before { top:-100px; right:-70px; background:#3b82f6; }
body::after { bottom:-120px; left:-80px; background:#f97316; }
.container { width:100%; max-width:680px; margin:0 auto; overflow:hidden; background:rgba(15,23,42,.88); border:1px solid rgba(148,163,184,.18); border-radius:26px; box-shadow:0 24px 65px rgba(0,0,0,.42); backdrop-filter:blur(18px); }
.container.has-results { animation: settle-card .42s ease both; }
.hero { position:relative; overflow:hidden; padding:30px 32px 26px; color:#fff; background:linear-gradient(135deg,#111827,#312e81 70%,#1d4ed8); }
.hero::after { position:absolute; content:""; width:230px; height:230px; right:-100px; bottom:-155px; border:1px solid rgba(255,255,255,.18); border-radius:50%; box-shadow:0 0 0 24px rgba(255,255,255,.04),0 0 0 48px rgba(255,255,255,.03); pointer-events:none; }
.hero-top { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand { display:flex; align-items:center; gap:13px; }
h1 { margin:0; font-size:clamp(23px,5vw,31px); letter-spacing:-.04em; }
.hero p { margin:16px 0 0; color:#dbeafe; font-size:14px; line-height:1.55; }
.reset-btn { display:inline-flex; align-items:center; gap:5px; padding:7px 9px; border:1px solid rgba(255,255,255,.28); border-radius:10px; color:#fff; background:rgba(255,255,255,.12); font:inherit; font-size:12px; font-weight:700; cursor:pointer; transition:.2s; }
.reset-btn:hover { background:rgba(255,255,255,.22); transform:translateY(-1px); }
.content { padding:28px 32px 32px; }
.results-area { display:none; }
.results-area.is-visible { display:block; animation: reveal-results .42s ease both; }
@keyframes settle-card { from { opacity:.86; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
@keyframes reveal-results { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion:reduce) { .container.has-results, .results-area.is-visible { animation:none; } }
.section-title { display:flex; align-items:center; gap:10px; margin:0 0 18px; font-size:15px; }
.section-title::before { content:""; width:4px; height:18px; border-radius:5px; background:var(--blue); }
.mode-card, .total-card { min-width:0; }
.mode-row span, .mode-rounding span, .mode-net span { color:#94a3b8; font-size:12px; }
.mode-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:18px; }
.merchant-result { margin-bottom:18px; padding:16px 18px; border:1px solid rgba(74,222,128,.28); border-radius:15px; color:#bbf7d0; background:rgba(20,83,45,.24); }
.merchant-heading { margin-bottom:9px; color:#f0fdf4; font-size:13px; font-weight:700; }
.merchant-row, .merchant-total { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:7px 0; }
.merchant-row { border-bottom:1px solid rgba(134,239,172,.12); color:#bbf7d0; font-size:12px; }
.merchant-row strong { color:#d1fae5; font-size:13px; }
.merchant-total { margin-top:5px; padding-bottom:0; color:#bbf7d0; font-size:13px; }
.merchant-total strong { color:#86efac; font-size:20px; }
.mode-card { padding:18px; border:1px solid rgba(96,165,250,.24); border-radius:18px; background:rgba(15,23,42,.72); }
.mode-subtract { border-color:rgba(251,146,60,.3); }
.mode-heading { display:flex; align-items:center; gap:9px; margin-bottom:13px; }
.mode-heading h3 { margin:0; color:#f8fafc; font-size:15px; }
.mode-dot { width:9px; height:9px; border-radius:50%; background:#60a5fa; box-shadow:0 0 0 4px rgba(96,165,250,.15); }
.mode-subtract .mode-dot { background:#fb923c; box-shadow:0 0 0 4px rgba(251,146,60,.15); }
.mode-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid rgba(148,163,184,.13); }
.mode-row span { min-width:0; overflow-wrap:anywhere; }
.mode-row strong { min-width:0; color:#f8fafc; font-size:12px; letter-spacing:-.02em; text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.mode-rounding { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:12px; margin-top:12px; padding:10px 11px; border:1px solid rgba(96,165,250,.28); border-radius:11px; background:rgba(30,64,175,.2); }
.mode-subtract .mode-rounding { border-color:rgba(251,146,60,.3); background:rgba(124,45,18,.22); }
.rounding-item { display:flex; min-width:0; flex-direction:column; gap:4px; }
.rounding-label { color:#94a3b8; font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.mode-rounding strong { min-width:0; color:#93c5fd; font-size:clamp(10px,1.2vw,12px); letter-spacing:-.03em; text-align:left; white-space:nowrap; font-variant-numeric:tabular-nums; overflow:hidden; }
.mode-subtract .mode-rounding strong { color:#fdba74; }
.mode-net { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px; margin-top:12px; padding:12px; border:1px solid rgba(74,222,128,.22); border-radius:11px; color:#bbf7d0; background:rgba(20,83,45,.24); }
.mode-net strong { color:#86efac; font-size:13px; letter-spacing:-.02em; white-space:nowrap; font-variant-numeric:tabular-nums; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field { margin-bottom:18px; }
label { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; color:#cbd5e1; font-size:13px; font-weight:750; }
.hint { color:#94a3b8; font-size:11px; font-weight:500; }
.input-wrap { display:flex; align-items:center; padding:4px; border:1px solid var(--line); border-radius:13px; background:#0f172a; transition:.2s; box-shadow:0 2px 6px rgba(0,0,0,.14); }
.input-wrap:focus-within { border-color:var(--blue); box-shadow:0 0 0 4px rgba(37,99,235,.12); }
input { min-width:0; width:100%; padding:10px 8px; border:0; outline:0; background:transparent; color:var(--ink); font:inherit; font-size:16px; font-weight:700; text-align:center; }
input::-webkit-inner-spin-button, input::-webkit-outer-spin-button { appearance:none; margin:0; }
.step-btn { display:grid; place-items:center; flex:0 0 34px; width:34px; height:34px; padding:0; border:0; border-radius:9px; color:#cbd5e1; background:#1e293b; font-family:inherit; font-size:20px; line-height:1; cursor:pointer; transition:.2s; }
.step-btn:hover { color:#fff; background:var(--blue); }
.step-btn:active { transform:scale(.94); }
.results { margin-top:10px; padding:20px; border:1px solid rgba(148,163,184,.16); border-radius:18px; background:rgba(15,23,42,.72); }
.result-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid rgba(148,163,184,.14); color:#94a3b8; font-size:14px; }
.result-row strong { color:#f8fafc; font-size:14px; font-weight:700; text-align:right; }
.net-income { margin-top:10px; padding:14px 12px; border:1px solid rgba(74,222,128,.22); border-bottom:0; border-radius:12px; color:#bbf7d0; background:rgba(20,83,45,.24); }
.net-income strong { color:#86efac; font-size:15px; }
.net-income-down { border-color:rgba(74,222,128,.22); color:#bbf7d0; background:rgba(20,83,45,.24); }
.net-income-down strong { color:#86efac; }
.detail-divider { margin:20px 0 2px; padding-top:16px; border-top:1px solid rgba(148,163,184,.16); color:#fdba74; font-size:11px; font-weight:800; letter-spacing:.12em; }
.rounding-down { border-color:rgba(96,165,250,.3); color:#bfdbfe; background:rgba(30,64,175,.22); }
.rounding-down strong { color:#93c5fd; }
.result-row:last-of-type { border-bottom:0; }
.rounding { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:16px; padding:13px 14px; border:1px solid rgba(251,146,60,.35); border-radius:12px; color:#fed7aa; background:rgba(124,45,18,.28); font-size:13px; }
.rounding strong { display:flex; align-items:center; gap:8px; color:#fdba74; font-size:14px; }
.arrow { display:inline-block; margin:0 6px; color:#93c5fd; font-size:18px; font-weight:800; line-height:1; }
.mode-subtract .arrow { color:#fdba74; }
.totals-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:18px; }
.total-card { position:relative; overflow:hidden; padding:21px 20px; border:1px solid rgba(255,255,255,.12); border-radius:18px; color:#fff; background:linear-gradient(135deg,#172554,#1e40af); box-shadow:0 14px 28px rgba(30,64,175,.22); }
.total-card.subtract { background:linear-gradient(135deg,#431407,#9a3412); box-shadow:0 14px 28px rgba(154,52,18,.2); }
.total-card::after { content:""; position:absolute; width:145px; height:145px; right:-52px; top:-70px; border-radius:50%; background:rgba(255,255,255,.08); }
.total-label { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; color:#bfdbfe; font-size:11px; font-weight:800; letter-spacing:.13em; }
.total-value { position:relative; z-index:1; margin-top:5px; font-size:clamp(30px,7vw,40px); font-weight:850; letter-spacing:-.04em; white-space:nowrap; font-variant-numeric:tabular-nums; transition:font-size .2s ease; }
.formula { position:relative; z-index:1; margin-top:5px; color:#dbeafe; font-size:13px; }
.status { display:inline-flex; align-items:center; gap:6px; color:#bbf7d0; font-size:11px; letter-spacing:0; }
.status::before { content:""; width:7px; height:7px; border-radius:50%; background:#4ade80; box-shadow:0 0 0 3px rgba(74,222,128,.18); }
.reset-btn:focus-visible, .step-btn:focus-visible { outline:3px solid rgba(96,165,250,.45); outline-offset:2px; }
@media (max-width:720px) and (min-width:561px) {
    body { padding:20px 12px; }
    .container { max-width:680px; border-radius:22px; }
    .hero { padding:26px 26px 23px; }
    .content { padding:24px 26px 28px; }
    .mode-grid, .totals-grid { grid-template-columns:1fr; gap:14px; }
    .mode-card, .total-card { padding:18px 20px; }
}
@media (max-width:560px) { body { padding:12px 9px; } .hero { padding:24px 20px; } .content { padding:23px 18px 24px; } .hero-top { align-items:flex-start; } .reset-btn { padding:8px; font-size:0; } .reset-btn svg { width:17px; } .form-grid, .mode-grid, .totals-grid { grid-template-columns:1fr; gap:0; } .mode-grid, .totals-grid { gap:14px; } .rounding { align-items:flex-start; flex-direction:column; gap:6px; } }