:root { --ink:#102019; --muted:#617067; --paper:#eef3ed; --card:rgba(255,255,255,.64); --accent:#c8ff4e; --line:rgba(255,255,255,.72); --danger:#aa3d36; --shadow:0 18px 50px rgba(27,54,38,.10); }
:root[data-theme="dark"] { --ink:#f2f8f0; --muted:#afc0b4; --paper:#112119; --card:rgba(35,57,44,.62); --accent:#d7ff64; --line:rgba(204,235,214,.14); --danger:#ff9388; --shadow:0 18px 50px rgba(0,0,0,.27); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) { --ink:#f2f8f0; --muted:#afc0b4; --paper:#112119; --card:rgba(35,57,44,.62); --accent:#d7ff64; --line:rgba(204,235,214,.14); --danger:#ff9388; --shadow:0 18px 50px rgba(0,0,0,.27); } }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:radial-gradient(circle at 2% 2%,#d8fb84 0,transparent 27rem),radial-gradient(circle at 96% 24%,#b5e5dc 0,transparent 23rem),var(--paper); font:16px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; transition:background .25s,color .25s; }
:root[data-theme="dark"] body { background:radial-gradient(circle at 4% 2%,#2e5d42 0,transparent 28rem),radial-gradient(circle at 100% 30%,#1f5350 0,transparent 23rem),var(--paper); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) body { background:radial-gradient(circle at 4% 2%,#2e5d42 0,transparent 28rem),radial-gradient(circle at 100% 30%,#1f5350 0,transparent 23rem),var(--paper); } }
button,input { font:inherit; } button { cursor:pointer; }
.app-shell { width:min(100%,560px); min-height:100vh; margin:auto; padding:calc(20px + env(safe-area-inset-top)) 20px calc(32px + env(safe-area-inset-bottom)); }
header,.section-heading,.fee-row,.mini-stats,.target-row { display:flex; align-items:center; justify-content:space-between; }
header { margin-bottom:42px; } .brand { display:flex; align-items:center; gap:9px; font-weight:800; letter-spacing:-.03em; }
.brand-mark { display:grid; place-items:center; width:30px; height:30px; border:1px solid rgba(255,255,255,.55); border-radius:10px; color:#102019; background:linear-gradient(140deg,#e4ff9a,#b9f73b); box-shadow:inset 0 1px rgba(255,255,255,.7),0 5px 12px rgba(37,80,37,.16); font-size:14px; }
.header-actions { display:flex; align-items:center; gap:14px; }.icon-button { display:grid; place-items:center; width:31px; height:31px; border:1px solid var(--line); border-radius:10px; color:var(--ink); background:var(--card); backdrop-filter:blur(14px); }.text-button { border:0; background:none; color:var(--muted); font-size:14px; padding:6px 0; }.hidden { display:none!important; }
.hero { margin-bottom:28px; }.eyebrow { margin:0 0 8px; color:#5c7734; font-size:11px; font-weight:800; letter-spacing:.11em; }.hero h1 { margin:0; font-size:39px; line-height:1.03; letter-spacing:-.06em; }.hero p:not(.eyebrow) { margin:14px 0 0; color:var(--muted); max-width:420px; }
.calculator,.result,.history,.tip { border-radius:22px; }.calculator,.result,.history { background:var(--card); border:1px solid var(--line); backdrop-filter:blur(20px) saturate(1.15); -webkit-backdrop-filter:blur(20px) saturate(1.15); }.calculator { padding:20px; box-shadow:var(--shadow); }
.item-field { margin-bottom:16px; }.item-field em { margin-left:5px; color:var(--muted); font-weight:500; font-style:normal; }.item-field input { padding-right:11px; }
.field-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; } label { position:relative; display:block; color:var(--muted); font-size:12px; font-weight:650; } label span { position:absolute; right:12px; bottom:12px; color:#829087; font-size:15px; }
input { display:block; width:100%; margin-top:6px; padding:10px 30px 10px 11px; border:1px solid var(--line); border-radius:11px; outline:none; color:var(--ink); background:rgba(255,255,255,.48); font-weight:700; font-size:16px; } :root[data-theme="dark"] input { background:rgba(5,20,11,.2); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) input { background:rgba(5,20,11,.2); } } input:focus { border-color:#8dbd43; box-shadow:0 0 0 3px rgba(176,229,82,.22); }
.fee-row { margin:18px 0; padding:12px 0; border-block:1px solid var(--line); }.fee-row div { position:relative; width:84px; }.fee-row input { margin:0; text-align:right; padding:8px 25px 8px 8px; }.fee-row span { position:absolute; right:10px; top:8px; color:var(--muted); }
.target-row { gap:16px; margin:-2px 0 18px; }.target-row label { width:45%; }.target-row div { flex:1; padding:6px 0; text-align:right; }.target-row small { display:block; color:var(--muted); font-size:11px; font-weight:650; }.target-row b { font-size:17px; }
.primary,.secondary { width:100%; border:0; border-radius:11px; padding:13px 16px; font-weight:800; }.primary { background:var(--accent); color:var(--ink); }.primary:active { transform:translateY(1px); }.secondary { margin-top:18px; color:var(--ink); background:#edf0e9; }
.result { margin-top:18px; padding:21px; text-align:center; box-shadow:var(--shadow); }.result p { margin:0; color:var(--muted); font-size:14px; }.result strong { display:block; margin:3px 0 7px; font-size:43px; line-height:1; letter-spacing:-.07em; }.result.negative strong { color:var(--danger); }.result-divider { height:1px; margin:18px 0 13px; background:var(--line); }.mini-stats { text-align:left; }.mini-stats span { display:block; color:var(--muted); font-size:12px; }.mini-stats b { font-size:16px; }.mini-stats div:last-child { text-align:right; }
.history { margin-top:26px; padding:18px; }.history h2 { margin:0; font-size:16px; letter-spacing:-.03em; }.history ul { padding:0; margin:11px 0 0; list-style:none; }.history li { display:flex; justify-content:space-between; padding:11px 0; border-top:1px solid var(--line); font-size:14px; }.history li span { color:var(--muted); }.history li b { color:#367120; }.history li.loss b { color:var(--danger); }
.tip { margin-top:24px; padding:16px; border:1px solid rgba(202,240,137,.46); background:rgba(223,247,180,.42); backdrop-filter:blur(14px); }.tip span { color:#52722d; text-transform:uppercase; font-size:10px; font-weight:850; letter-spacing:.1em; }.tip p { margin:4px 0 0; font-size:13px; } footer { margin-top:34px; color:var(--muted); text-align:center; font-size:12px; }
@media (max-width:360px) { .field-grid { grid-template-columns:1fr; }.hero h1 { font-size:35px; } }