:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Arial,sans-serif;color:#e9f0f9;background:#0b1523;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.5;cursor:not-allowed}.shell{max-width:1200px;margin:auto;padding:0 24px}header{height:84px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #26364a}.brand,.header-actions,.actions,.panelhead{display:flex;align-items:center;gap:12px}.brand b{display:block;font-size:17px}.brand small{display:block;color:#93a6be;font-size:12px;margin-top:3px}.logo{background:#1eae83;color:#071b17;font-size:28px;font-weight:900;width:42px;height:42px;border-radius:13px;text-align:center}.pill{display:inline-block;background:#173c35;color:#79e6b9;border:1px solid #286653;padding:7px 11px;border-radius:100px;font-size:12px}.iconbtn{border:1px solid #314357;background:#152336;color:#dbe8f6;padding:9px 13px;border-radius:11px}nav{display:flex;gap:8px;border-bottom:1px solid #26364a;padding:15px 0;overflow:auto}nav button{background:transparent;color:#9fb0c4;border:0;padding:11px 16px;border-radius:10px;white-space:nowrap}nav button.active,nav button:hover{background:#1c3045;color:#fff}.tab{display:none}.tab.active{display:block}.intro{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:44px 0 30px}.eyebrow{font-size:11px;letter-spacing:2px;font-weight:750;color:#67d8b3}h1{font-size:clamp(30px,4vw,48px);letter-spacing:-1.8px;line-height:1.13;margin:12px 0}h1 em{font-style:normal;color:#58d4a9}p{line-height:1.65;color:#a8b8ca}h2{font-size:18px;margin:0 0 18px}h3{font-size:15px;margin-top:25px}.primary,.secondary,.danger{padding:12px 17px;border-radius:11px;border:1px solid transparent;font-weight:700}.primary{background:#50d2a4;color:#08231a}.primary:hover{background:#81e7c2}.secondary{background:#1c3045;border-color:#334960;color:#e3eefb}.danger{background:#492b34;color:#ffb8b8;border-color:#70414b}.textbtn{border:0;background:none;color:#76ddba}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin:12px 0 22px}.stat,.panel{border:1px solid #27384c;background:#111f30;border-radius:18px;padding:23px}.stat small,.stat span{display:block;color:#96a9be}.stat strong{display:block;font-size:clamp(19px,2.4vw,28px);letter-spacing:-.8px;margin:14px 0}.stat span{font-size:12px}.two{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:20px 0 36px}.panelhead{justify-content:space-between;flex-wrap:wrap}.panelhead h2{margin:0}.muted{color:#91a4b9}.small{font-size:12px}.empty{padding:30px 0;color:#96a9be}.pagehead{padding:33px 0 8px}.pagehead h1{font-size:36px}.calcgrid{grid-template-columns:1.12fr .88fr}.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.wide{grid-column:1/-1}label{display:flex;flex-direction:column;gap:8px;color:#b9c8d9;font-size:13px;margin-bottom:16px}input,select{background:#0c1929;color:#f0f5fa;border:1px solid #33485d;border-radius:10px;padding:12px;width:100%;min-width:0}input:focus,select:focus{outline:2px solid #4ccca1;outline-offset:1px}input[type=range]{accent-color:#50d2a4}.result .heroNumber{display:block;font-size:clamp(30px,3.4vw,43px);margin:14px 0;color:#55d9a7}.result .heroNumber.negative{color:#ff9b9b}.resultRows{margin-top:24px}.resultRows>div{display:flex;justify-content:space-between;gap:14px;border-bottom:1px solid #293a4b;padding:14px 0}.resultRows span{color:#a5b7ca}.resultRows b{text-align:right}.notice{padding:13px;background:#1b2e3d;border-left:3px solid #54c7a1;border-radius:6px;font-size:12px}.actions{flex-wrap:wrap;margin-top:16px}.tablewrap{overflow:auto}table{width:100%;border-collapse:collapse;white-space:nowrap}th,td{text-align:left;border-bottom:1px solid #2a3b4d;padding:15px 11px;font-size:13px}th{color:#9bafc5}td{color:#e6effa}.gain{color:#61dcb1}.loss{color:#ff9e9e}canvas{width:100%;display:block}footer{text-align:center;border-top:1px solid #26364a;color:#7d90a5;padding:28px;font-size:12px;margin-top:40px}#toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:#254d43;color:white;padding:13px 20px;border-radius:12px;box-shadow:0 12px 40px #0007;opacity:0;pointer-events:none;transition:opacity .2s;max-width:90vw}#toast.show{opacity:1}body.light{background:#f5f8fb;color:#172a3d}body.light header,body.light nav,body.light footer{border-color:#dce5ee}body.light .panel,body.light .stat{background:#fff;border-color:#dbe5ee}body.light .stat small,body.light .stat span,body.light p,body.light .muted,body.light label{color:#52667b}body.light input,body.light select{background:#f8fbfe;color:#15293c;border-color:#cbd8e4}body.light nav button{color:#52667b}body.light nav button.active{background:#dbece7;color:#143c30}body.light .resultRows>div,body.light th,body.light td{border-color:#e3eaf1}body.light td{color:#24394d}body.light .notice{background:#e8f5f0}body.light .secondary{background:#eaf1f7;color:#25435d}body.light .iconbtn{background:#eaf1f7;color:#25435d}@media(max-width:850px){.stats{grid-template-columns:repeat(2,1fr)}.two,.calcgrid{grid-template-columns:1fr}.intro{padding:30px 0;align-items:start;flex-direction:column}.shell{padding:0 15px}}@media(max-width:440px){.stats{gap:9px}.stat,.panel{padding:16px}.formgrid{grid-template-columns:1fr}.brand b{font-size:14px}.header-actions .pill{display:none}.stat strong{font-size:19px}.pagehead h1{font-size:30px}}

#tradeSearch{width:100%;margin:8px 0 18px;max-width:480px} .resultRows b{overflow-wrap:anywhere}

/* v5 */
:focus-visible{outline:2px solid #4ccca1;outline-offset:2px}
button,input,select{min-height:44px}
.formnote{margin:-8px 0 14px}.routecard{margin-bottom:14px}.routecard .secondary{margin-top:14px}
.livebar{display:none}
.deleteTrade{padding:8px 12px;min-height:36px}
.result .heroNumber{overflow-wrap:anywhere}
body.light .gain{color:#0a7d58}body.light .loss{color:#c03636}
body.light .eyebrow,body.light .textbtn{color:#0a7d58}body.light h1 em{color:#0a8a62}
body.light .pill{background:#e1f5ee;color:#0a6e4e;border-color:#b8e2d3}
body.light .primary{background:#0f9f73;color:#fff}body.light .primary:hover{background:#0b8862}
body.light .danger{background:#fdeceb;color:#b42318;border-color:#f3c4c0}
body.light .result .heroNumber{color:#0a8a62}body.light .result .heroNumber.negative{color:#c03636}
body.light nav button:hover{background:#eaf1f7;color:#15293c}
body.light th{color:#52667b}body.light .muted{color:#5d7186}
body.light .logo{color:#fff}
@media(max-width:850px){
 .livebar{display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:5;padding:10px 14px;margin:8px 0 0;border:1px solid #27384c;border-radius:12px;background:#111f30;font-size:14px}
 body.light .livebar{background:#fff;border-color:#dbe5ee}
}
@media(max-width:700px){
 body{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
 header{height:64px}
 nav{position:fixed;left:0;right:0;bottom:0;z-index:20;margin:0;padding:6px 6px calc(6px + env(safe-area-inset-bottom));gap:2px;justify-content:space-around;background:#0e1b2c;border-top:1px solid #26364a;border-bottom:0;overflow:visible}
 body.light nav{background:#fff;border-top-color:#dce5ee}
 nav button{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;font-size:11px;min-height:52px;white-space:normal;line-height:1.1;text-align:center}
 nav button::before{content:attr(data-icon);font-size:18px;line-height:1}
 #toast{bottom:calc(88px + env(safe-area-inset-bottom))}
 /* trade table -> cards */
 table,tbody,tr,td{display:block;white-space:normal}thead{display:none}
 tr{border:1px solid #2a3b4d;border-radius:14px;padding:6px 12px;margin-bottom:12px}
 body.light tr{border-color:#dbe5ee}
 td{display:flex;justify-content:space-between;gap:12px;border:0;padding:8px 0;text-align:right}
 td::before{content:attr(data-label);color:#9bafc5;text-align:left}
 td[data-label=""]{justify-content:flex-end}td[data-label=""]::before{content:none}
 td[colspan]{display:block;text-align:center}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
/* v5.1: iOS zooms the page when a focused field's font is under 16px */
input,select,textarea{font-size:16px}