:root{--bg:#f4f8ff;--card:#fff;--card2:#eef4ff;--txt:#0b1b3a;--mut:#5c6f94;--accent:#1f6bff;--accent2:#00b4ff;--line:#dbe6fb;--shadow:0 10px 40px rgba(31,107,255,.12)}
[data-theme=dark]{--bg:#050912;--card:#0c1426;--card2:#111c36;--txt:#eaf1ff;--mut:#8ea2cc;--accent:#3d8bff;--accent2:#22d3ff;--line:#1a2a4d;--shadow:0 10px 50px rgba(0,0,0,.6)}
*{box-sizing:border-box;margin:0}html{scroll-behavior:smooth}
body{font-family:"Segoe UI",Tahoma,system-ui,sans-serif;background:var(--bg);color:var(--txt);line-height:1.7;transition:background .3s}
.bg{position:fixed;inset:0;z-index:-1;background:radial-gradient(600px 400px at 85% -5%,color-mix(in srgb,var(--accent) 28%,transparent),transparent),radial-gradient(500px 380px at 5% 30%,color-mix(in srgb,var(--accent2) 18%,transparent),transparent)}
.wrap{max-width:1100px;margin:auto;padding:0 18px}
header{position:sticky;top:0;z-index:9;backdrop-filter:blur(14px);background:color-mix(in srgb,var(--bg) 70%,transparent);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:20px;height:64px}.nav nav{margin-inline-start:auto;display:flex;gap:18px}
.nav a{color:var(--mut);text-decoration:none;font-weight:600}.nav a:hover{color:var(--accent)}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.25rem;color:var(--txt)!important}.brand img{width:40px;border-radius:50%;box-shadow:0 0 18px var(--accent)}.brand b{color:var(--accent)}
#themeBtn{border:1px solid var(--line);background:var(--card);border-radius:12px;width:42px;height:42px;cursor:pointer;font-size:1.1rem}
.moon{display:none}[data-theme=dark] .moon{display:inline}[data-theme=dark] .sun{display:none}
.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:28px;align-items:center;padding:46px 0 24px}
.pill{display:inline-block;background:var(--card2);border:1px solid var(--line);color:var(--accent);padding:4px 14px;border-radius:99px;font-weight:700;font-size:.85rem}
h1{font-size:clamp(1.9rem,4.5vw,3.1rem);line-height:1.25;margin:14px 0}h1 em{font-style:normal;background:linear-gradient(90deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p,.lead{color:var(--mut);font-size:1.05rem}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin:22px 0}.cta.c{justify-content:center}
.btn{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;text-decoration:none;font-weight:700;padding:12px 24px;border-radius:14px;box-shadow:0 8px 24px color-mix(in srgb,var(--accent) 45%,transparent);transition:.2s}
.btn:hover{transform:translateY(-2px)}.btn.ghost{background:var(--card);color:var(--accent);border:1px solid var(--line);box-shadow:none}
.ticker{display:flex;gap:10px;flex-wrap:wrap}.chip{display:flex;gap:8px;align-items:center;background:var(--card);border:1px solid var(--line);padding:8px 14px;border-radius:14px}
.chip img,.rate img{width:26px;height:18px;object-fit:cover;border-radius:3px}.chip span{color:var(--mut);font-size:.9rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);padding:20px}
.ch{display:flex;justify-content:space-between;margin-bottom:6px}small{color:var(--mut)}
#chart svg{width:100%;height:220px;display:block}.line{fill:none;stroke:var(--accent);stroke-width:3.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 2.2s ease forwards;filter:drop-shadow(0 0 6px var(--accent))}
.area{opacity:0;animation:fade 1s 1.6s forwards}.dot{fill:var(--accent2);opacity:0;animation:fade .4s 2s forwards,pulse 1.8s 2.4s infinite;transform-box:fill-box;transform-origin:center}
@keyframes draw{to{stroke-dashoffset:0}}@keyframes fade{to{opacity:1}}@keyframes pulse{50%{transform:scale(1.8);opacity:.4}}
section{padding:34px 0}h2{font-size:1.6rem;margin-bottom:16px}h2 small{font-size:.9rem;font-weight:400}
.calc{max-width:560px;margin:auto}.tabs{display:flex;gap:6px;margin-bottom:14px;align-items:center}
.tab,.utab{border:0;background:none;color:var(--mut);font:inherit;font-weight:700;padding:6px 14px;cursor:pointer;border-bottom:3px solid transparent}.tab.on,.utab.on{color:var(--accent);border-color:var(--accent)}
.swap{margin-inline-start:auto;border:1px solid var(--line);background:var(--card2);color:var(--accent);border-radius:10px;width:36px;height:36px;cursor:pointer;font-size:1.1rem}
.row{display:grid;grid-template-columns:150px 1fr;grid-template-areas:"s i" ". n";gap:2px 8px;margin-bottom:10px}.row .sel{grid-area:s}.row input{grid-area:i}.row small{grid-area:n;font-size:.8rem}
.sel{position:relative;display:flex;align-items:center;gap:8px;background:var(--card2);border:1px solid var(--line);border-radius:14px;padding:0 12px;height:54px}.sel img{width:28px;height:20px;border-radius:3px;object-fit:cover}
.sel select{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
input{background:var(--card2);border:1px solid var(--line);border-radius:14px;height:54px;padding:0 16px;font:inherit;font-size:1.2rem;color:var(--txt);text-align:left;min-width:0}input:focus{outline:2px solid var(--accent)}
.old{color:var(--mut);font-size:.85rem;min-height:1.4em}
.custom{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:12px;padding-top:14px;border-top:1px dashed var(--line)}.custom input{height:42px;width:170px;font-size:1rem}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}.rate{display:flex;gap:12px;align-items:center;padding:14px 18px}.rate small{display:block;line-height:1}
.nums{margin-inline-start:auto;text-align:left}.nums span{font-weight:800}.nums em{display:block;font-style:normal;color:var(--mut);font-size:.9rem}
.gold{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;background:linear-gradient(135deg,var(--card),color-mix(in srgb,#ffb800 14%,var(--card)));font-size:1.1rem}.gold em{font-style:normal;color:var(--mut)}
.feat i{font-style:normal;font-size:1.8rem}.feat p{color:var(--mut);font-size:.95rem}.lead{max-width:700px;margin-bottom:18px}
footer{text-align:center;color:var(--mut);padding:30px;font-size:.9rem}
@media(max-width:820px){.hero{grid-template-columns:1fr}.nav nav{display:none}.nav #themeBtn{margin-inline-start:auto}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01s!important}}

.unit{display:flex;align-items:center;gap:6px;margin-bottom:10px;color:var(--mut);font-size:.9rem}.hidden{display:none!important}