:root{
  --bg:#f5f6f8; --panel:#fff; --panel2:#f9fafb; --text:#15171a; --muted:#747a84;
  --line:#e7e9ed; --line2:#d9dde3; --accent:#1f6fff; --accent-soft:#eaf1ff; --green:#198754;
  --shadow:0 18px 50px rgba(27,31,36,.07); --radius:24px; --radius-sm:16px;
}
*{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;-webkit-font-smoothing:antialiased}
button,input,select{font:inherit} button{cursor:pointer} .app-shell{min-height:100vh;display:grid;grid-template-columns:260px minmax(0,1fr)}
.sidebar{position:sticky;top:0;height:100vh;padding:28px 18px 22px;background:rgba(255,255,255,.9);backdrop-filter:blur(22px);border-right:1px solid var(--line);display:flex;flex-direction:column;z-index:5}
.brand{display:flex;align-items:center;gap:12px;padding:0 10px 26px}.brand-mark{width:40px;height:40px;border-radius:13px;background:#15171a;color:#fff;display:grid;place-items:center;font-weight:800;font-size:20px;box-shadow:0 8px 18px rgba(0,0,0,.12)}.brand strong{display:block;font-size:15px;letter-spacing:.08em}.brand span{display:block;color:var(--muted);font-size:11px;margin-top:3px}
.sidebar-note{display:flex;gap:10px;align-items:flex-start;margin:0 8px 20px;padding:12px 13px;border:1px solid #dfeae4;border-radius:15px;background:#f7fbf8}.sidebar-note b{font-size:12px;display:block}.sidebar-note small{display:block;color:#68716c;margin-top:2px}.privacy-dot{margin-top:4px;width:8px;height:8px;border-radius:50%;background:#2a9d62;box-shadow:0 0 0 4px rgba(42,157,98,.1)}
.nav-list{display:flex;flex-direction:column;gap:7px}.nav-item{border:0;background:transparent;color:#5d636c;display:flex;align-items:center;gap:12px;width:100%;padding:12px 13px;border-radius:14px;text-align:left;transition:.16s ease}.nav-item:hover{background:#f4f5f7;color:#222}.nav-item.active{background:#111315;color:white;box-shadow:0 8px 18px rgba(0,0,0,.10)}.nav-icon{width:24px;text-align:center;font-size:16px}.nav-item span:last-child{font-size:13px;font-weight:650}
.sidebar-footer{margin-top:auto;padding:18px 11px 2px;color:#737a84}.sidebar-footer span,.sidebar-footer small{display:block}.sidebar-footer span{font-size:11px;text-transform:uppercase;letter-spacing:.06em}.sidebar-footer small{font-size:10px;margin-top:4px}
.main{width:100%;max-width:1440px;padding:36px 42px 50px;margin:0 auto}.topbar{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:22px}.eyebrow,.hero-kicker{font-size:11px;font-weight:800;letter-spacing:.14em;color:#737a84}.topbar h1{font-size:30px;line-height:1.15;margin:7px 0 7px;letter-spacing:-.03em}.topbar p{margin:0;color:var(--muted);font-size:14px;line-height:1.7;max-width:760px}.status-pill{white-space:nowrap;border:1px solid var(--line);background:#fff;border-radius:999px;padding:9px 13px;color:#59606a;font-size:12px;box-shadow:0 6px 18px rgba(20,25,30,.03)}.status-pill span{display:inline-block;width:7px;height:7px;background:#27a568;border-radius:50%;margin-right:6px}
.mobile-nav{display:none}.notice{display:flex;align-items:flex-start;gap:11px;background:#fff;border:1px solid var(--line);border-radius:17px;padding:13px 15px;margin-bottom:20px;color:#60666f;font-size:12px;line-height:1.65}.notice strong{color:#25282d}.notice-icon{flex:0 0 22px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#eef2f7;color:#4a5564;font-weight:800;font-family:Georgia,serif}
.page{display:none;animation:fade .18s ease}.page.active{display:block}@keyframes fade{from{opacity:.35;transform:translateY(4px)}to{opacity:1;transform:none}}
.hero-card{background:linear-gradient(135deg,#17191d,#24272d);color:#fff;border-radius:28px;padding:28px 30px;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:18px;box-shadow:0 18px 44px rgba(20,23,27,.13)}.hero-card .hero-kicker{color:#9ca4af}.hero-card h2,.section-intro h2{margin:8px 0 8px;font-size:24px;letter-spacing:-.025em}.hero-card p{margin:0;color:#b9bec7;font-size:13px;line-height:1.7;max-width:680px}.role-switch{display:flex;background:#30343a;border:1px solid #3d424a;padding:4px;border-radius:14px;min-width:360px}.seg{flex:1;border:0;background:transparent;color:#aeb4be;padding:10px 12px;border-radius:10px;font-size:12px;font-weight:700}.seg.active{background:#fff;color:#15171a;box-shadow:0 4px 12px rgba(0,0,0,.16)}
.section-intro{margin:9px 0 18px;padding:4px 2px}.section-intro h2{font-size:25px}.section-intro p{margin:0;color:var(--muted);font-size:13px;line-height:1.7}
.calculator-grid{display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);gap:18px;align-items:start}.input-card,.result-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}.result-card.featured{background:linear-gradient(180deg,#fff 0%,#fbfcfe 100%)}
.card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.card-head>div{display:flex;align-items:center;gap:9px}.card-head h3{margin:0;font-size:16px}.step{display:grid;place-items:center;width:27px;height:27px;border-radius:9px;background:#f1f3f6;color:#747a84;font-size:10px;font-weight:800}.text-btn{border:0;background:transparent;color:#7a818b;font-size:12px;padding:7px 0}.text-btn:hover{color:#222}
.field{display:block;margin:0 0 15px}.field>span{display:block;color:#6c737d;font-size:11px;font-weight:650;margin:0 0 7px}.field input,.field select{width:100%;height:47px;border:1px solid var(--line2);border-radius:13px;background:#fff;color:#1b1d21;outline:none;padding:0 13px;transition:.15s;appearance:none}.field input:focus,.field select:focus{border-color:#8eb1ff;box-shadow:0 0 0 4px rgba(31,111,255,.08)}.field select{background-image:linear-gradient(45deg,transparent 50%,#8d939b 50%),linear-gradient(135deg,#8d939b 50%,transparent 50%);background-position:calc(100% - 18px) 20px,calc(100% - 13px) 20px;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:34px}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:12px}.amount-field .money-input{display:flex;align-items:center;border:1px solid var(--line2);border-radius:14px;overflow:hidden;height:57px;background:#fff;transition:.15s}.amount-field .money-input:focus-within{border-color:#8eb1ff;box-shadow:0 0 0 4px rgba(31,111,255,.08)}.money-input span{padding-left:15px;color:#7a8089;font-weight:700}.money-input input{height:100%;border:0!important;box-shadow:none!important;border-radius:0!important;font-size:22px;font-weight:720;letter-spacing:-.02em;padding-left:9px}.hidden{display:none!important}.formula-note{font-size:11px;line-height:1.65;color:#7a818b;background:#f7f8fa;border:1px solid #eceef1;border-radius:13px;padding:10px 12px}.soft-line{border:0;border-top:1px solid #eceef1;margin:20px 0}.currency-pair{display:grid;grid-template-columns:1fr 42px 1fr;gap:8px;align-items:end}.swap-btn{height:47px;border:1px solid var(--line2);background:#f7f8fa;border-radius:13px;margin-bottom:15px;color:#555c65;font-size:17px}.rate-line{display:grid;grid-template-columns:1fr auto;gap:9px}.secondary-btn{border:1px solid var(--line2);background:#f7f8fa;border-radius:13px;padding:0 13px;font-size:11px;font-weight:700;color:#434a53;white-space:nowrap}.rate-status{margin-top:-7px;margin-bottom:14px;font-size:10px;color:#8a9099}
.result-top{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:1px solid #eceef1;padding-bottom:20px;margin-bottom:8px}.result-label{display:block;color:#777e88;font-size:11px;font-weight:700;margin-bottom:8px}.big-number{font-size:34px;font-weight:780;letter-spacing:-.04em;line-height:1.05;word-break:break-word}.result-badge{background:#edf3ff;color:#296ce2;border-radius:999px;padding:7px 10px;font-size:10px;font-weight:800}.result-list{display:flex;flex-direction:column}.result-list>div{display:flex;align-items:center;justify-content:space-between;gap:15px;border-bottom:1px solid #eff0f2;padding:14px 1px}.result-list>div:last-child{border-bottom:0}.result-list span{font-size:12px;color:#717882}.result-list strong{font-size:14px;text-align:right}.result-list .em{margin:5px -9px 0;padding:14px 10px;border:0;background:#f6f8fb;border-radius:13px}.result-list .em strong{font-size:16px}.primary-btn{width:100%;height:46px;border:0;border-radius:14px;background:#17191c;color:#fff;font-weight:750;font-size:12px;margin-top:16px;transition:.15s}.primary-btn:hover{transform:translateY(-1px);background:#000}.equation{font-size:10px;line-height:1.55;color:#8a9099;text-align:center;margin-top:11px}.metric-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:13px 0 5px}.metric-row>div{background:#f6f8fa;border-radius:15px;padding:13px}.metric-row span{display:block;color:#7a818a;font-size:10px;margin-bottom:6px}.metric-row strong{font-size:19px}
.footer{display:grid;grid-template-columns:1fr 1.4fr;gap:20px;margin-top:22px;padding:20px 5px;color:#7c838d;font-size:10px;line-height:1.6}.footer b,.footer span{display:block}.footer b{color:#474e57;font-size:11px}.footer-disclaimer{text-align:right}.toast{position:fixed;left:50%;bottom:30px;transform:translate(-50%,20px);background:#111;color:#fff;padding:10px 16px;border-radius:999px;font-size:12px;opacity:0;pointer-events:none;transition:.2s;z-index:30}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:980px){.app-shell{grid-template-columns:1fr}.sidebar{display:none}.main{padding:20px 16px 84px;max-width:760px}.topbar{display:block;margin-bottom:14px}.topbar h1{font-size:25px}.topbar p{font-size:12px}.status-pill{display:inline-block;margin-top:12px}.mobile-nav{display:flex;position:sticky;top:0;z-index:10;overflow:auto;gap:7px;margin:0 -16px 14px;padding:8px 16px;background:rgba(245,246,248,.86);backdrop-filter:blur(18px);scrollbar-width:none}.mobile-nav::-webkit-scrollbar{display:none}.mobile-nav-item{flex:0 0 auto;border:1px solid var(--line);background:#fff;color:#626973;border-radius:999px;padding:9px 13px;font-size:11px;font-weight:700}.mobile-nav-item.active{background:#15171a;color:#fff;border-color:#15171a}.notice{font-size:11px;padding:11px 12px}.hero-card{display:block;padding:22px;border-radius:22px}.hero-card h2,.section-intro h2{font-size:21px}.role-switch{min-width:0;width:100%;margin-top:18px}.calculator-grid{grid-template-columns:1fr}.input-card,.result-card{border-radius:20px;padding:19px}.footer{grid-template-columns:1fr}.footer-disclaimer{text-align:left}.big-number{font-size:31px}}
@media(max-width:520px){.main{padding-left:12px;padding-right:12px}.mobile-nav{margin-left:-12px;margin-right:-12px;padding-left:12px;padding-right:12px}.two-col{grid-template-columns:1fr}.currency-pair{grid-template-columns:1fr 39px 1fr}.field input,.field select{height:45px}.amount-field .money-input{height:54px}.rate-line{grid-template-columns:1fr}.secondary-btn{height:42px}.role-switch{display:grid;grid-template-columns:1fr 1fr}.seg{padding:9px 7px;font-size:10px}.result-top{gap:10px}.big-number{font-size:28px}.footer{padding-bottom:12px}}