:root {
  --bg:#06101d; --panel:#0c1a2a; --line:#1d3550; --text:#f5f9ff;
  --muted:#8498b2; --cyan:#36d5ff; --blue:#3878ff; --green:#36d89b;
  --red:#ff6e87; --purple:#8b7cff; --safe-bottom:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif}
button,input,select{font:inherit}.hidden{display:none!important}
.app-shell{min-height:100vh;background:radial-gradient(circle at 50% -10%,#12375d 0,transparent 36%),var(--bg)}
.topbar{height:68px;display:flex;align-items:center;justify-content:space-between;padding:10px 16px;position:sticky;top:0;z-index:20;background:rgba(6,16,29,.88);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.05)}
.brand{display:flex;align-items:center;gap:10px}.brand-mark{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(135deg,var(--cyan),var(--blue));font-weight:900;color:#00111c;box-shadow:0 0 24px rgba(54,213,255,.25)}
.brand strong,.brand small{display:block}.brand strong{font-size:17px}.brand small{font-size:9px;color:var(--muted);letter-spacing:.8px;margin-top:2px}
.wallet-button{border:1px solid #2c4d70;background:#0f2338;color:#cfe9ff;border-radius:12px;padding:9px 12px;font-size:12px;max-width:142px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.main-content{width:min(720px,100%);margin:0 auto;padding:16px 14px 98px}
.connect-view{min-height:calc(100vh - 120px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px}.connect-view h1{font-size:28px;margin:28px 0 10px}.connect-view p{max-width:430px;color:var(--muted);line-height:1.7;margin:0 0 24px}
.connect-orbit{width:104px;height:104px;border:1px solid #285779;border-radius:50%;display:grid;place-items:center;position:relative;box-shadow:0 0 60px rgba(54,213,255,.15)}.connect-orbit span{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(135deg,var(--cyan),var(--blue));font-size:30px;color:#00111c}.connect-orbit i,.connect-orbit b{position:absolute;width:11px;height:11px;border-radius:50%;background:var(--green);top:7px;left:18px;box-shadow:0 0 12px var(--green)}.connect-orbit b{background:var(--purple);top:auto;left:auto;right:5px;bottom:22px}
.primary-button,.secondary-button{border:0;border-radius:14px;padding:14px 18px;font-weight:750;cursor:pointer}.primary-button{background:linear-gradient(135deg,var(--cyan),var(--blue));color:#00111c;box-shadow:0 10px 30px rgba(56,120,255,.25)}.secondary-button{background:#10243a;color:#e8f5ff;border:1px solid #294662}.wide{width:100%}.connect-view .wide{max-width:360px}.notice-card{margin-top:18px;padding:12px 14px;border:1px solid #29445f;background:#0b1a2a;color:#8da4bc;border-radius:12px;font-size:12px;max-width:430px}
.hero-card{padding:20px;border-radius:22px;background:linear-gradient(145deg,#112b45,#0b1a2c 65%);border:1px solid #204462;box-shadow:0 16px 44px rgba(0,0,0,.22);position:relative;overflow:hidden}.hero-card:after{content:"";position:absolute;width:170px;height:170px;border-radius:50%;background:rgba(54,213,255,.08);right:-55px;top:-80px}.hero-head{display:flex;align-items:center;justify-content:space-between;color:#a8bad0;font-size:12px}.rate-badge{padding:6px 9px;border-radius:20px;background:rgba(54,216,155,.12);color:var(--green)}
.principal{margin:20px 0}.principal small,.principal strong{display:block}.principal small{font-size:12px;color:var(--muted)}.principal strong{font-size:36px;letter-spacing:-1px;margin-top:5px}.hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.hero-stats div{padding:11px 8px;border-radius:12px;background:rgba(255,255,255,.04)}.hero-stats small,.hero-stats b{display:block}.hero-stats small{font-size:10px;color:var(--muted)}.hero-stats b{font-size:13px;margin-top:5px}
.page{display:none}.page.active{display:block}.action-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:15px 0 22px}.action-card{border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:16px;padding:14px 7px;display:flex;flex-direction:column;align-items:center;gap:5px}.action-card i{font-style:normal;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:rgba(54,216,155,.12)}.action-card i.blue{background:rgba(56,120,255,.12);color:#74a0ff}.action-card i.green{color:var(--green)}.action-card i.purple{background:rgba(139,124,255,.12);color:#a99eff}.action-card span{font-size:12px;font-weight:700}.action-card small{font-size:9px;color:var(--muted)}
.section-title{display:flex;align-items:flex-end;justify-content:space-between;margin:24px 2px 12px}.section-title b,.section-title small{display:block}.section-title b{font-size:16px}.section-title small{color:var(--muted);font-size:10px;margin-top:4px}.section-title>span{font-size:10px;color:var(--cyan);border:1px solid #25506a;padding:5px 8px;border-radius:20px}.text-button{border:0;background:none;color:var(--cyan);font-size:11px}
.market-list,.order-list,.commission-list,.level-list{display:grid;gap:10px}.market-card,.order-card,.commission-card,.level-row{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:14px}.market-top,.order-head,.order-foot,.commission-card,.level-row{display:flex;justify-content:space-between;align-items:center}.symbol{display:flex;align-items:center;gap:9px;font-weight:800}.coin-icon{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#2a4b69,#172a42);color:var(--cyan);font-size:10px}.spread{color:var(--green);font-size:13px;font-weight:800}
.legs{display:grid;grid-template-columns:1fr 28px 1fr;align-items:center;margin-top:14px}.leg{padding:10px;border-radius:12px;background:#0a1725}.leg small,.leg b,.leg em{display:block}.leg small{font-size:9px;color:var(--muted)}.leg b{font-size:12px;margin:4px 0}.leg em{font-size:11px;font-style:normal}.leg.long em{color:var(--green)}.leg.short em{color:var(--red)}.leg-arrow{text-align:center;color:#4e6e8e}
.order-card{padding:15px}.order-head{font-size:12px}.order-no{color:var(--muted);font-size:9px;margin-top:3px}.status{font-size:10px;padding:5px 8px;border-radius:20px;background:rgba(255,183,77,.12);color:#ffbd65}.status.settled{background:rgba(54,216,155,.12);color:var(--green)}.order-mid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:13px 0}.order-mid div{background:#091624;border-radius:10px;padding:9px}.order-mid small,.order-mid b{display:block}.order-mid small{font-size:9px;color:var(--muted)}.order-mid b{font-size:11px;margin-top:4px}.order-foot{font-size:10px;color:var(--muted)}.order-foot strong{color:var(--green);font-size:13px}
.page-heading{margin:22px 2px 18px}.page-heading h2{font-size:22px;margin:0}.page-heading p{font-size:11px;color:var(--muted);margin:6px 0 0;word-break:break-all}.filter-tabs{display:flex;gap:8px;margin-bottom:12px}.filter-tabs button{border:1px solid var(--line);background:var(--panel);color:var(--muted);padding:8px 13px;border-radius:20px;font-size:11px}.filter-tabs button.active{background:#153c5d;color:var(--cyan);border-color:#285f83}
.team-summary{display:grid;grid-template-columns:2fr 1fr;gap:10px}.team-summary div{background:var(--panel);border:1px solid var(--line);padding:16px;border-radius:16px}.team-summary small,.team-summary strong{display:block}.team-summary small{font-size:10px;color:var(--muted)}.team-summary strong{font-size:20px;margin-top:6px}.rule-card,.disclosure{margin:12px 0;background:linear-gradient(135deg,rgba(139,124,255,.1),rgba(54,213,255,.05));border:1px solid #354a6c;padding:15px;border-radius:16px}.rule-card b,.disclosure b{font-size:13px}.rule-card p,.disclosure p{font-size:11px;color:#9dafc5;line-height:1.65;margin:7px 0 0}
.level-row{gap:12px}.level-row.current{border-color:var(--cyan);box-shadow:0 0 18px rgba(54,213,255,.08)}.level-badge{width:40px;height:40px;border-radius:12px;background:#122b43;display:grid;place-items:center;color:var(--cyan);font-weight:800}.level-detail{flex:1}.level-detail b,.level-detail small{display:block}.level-detail b{font-size:12px}.level-detail small{font-size:9px;color:var(--muted);margin-top:3px}.level-rate{font-weight:800;color:var(--green)}
.commission-card{gap:9px}.commission-card>div:first-child{min-width:0}.commission-card b,.commission-card small{display:block}.commission-card b{font-size:11px}.commission-card small{font-size:9px;color:var(--muted);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:230px}.commission-amount{color:var(--green);font-size:13px;font-weight:800}.asset-list{background:var(--panel);border:1px solid var(--line);border-radius:16px;margin-bottom:12px;overflow:hidden}.asset-list div{display:flex;justify-content:space-between;padding:15px;border-bottom:1px solid rgba(255,255,255,.05);font-size:12px}.asset-list div:last-child{border-bottom:0}.asset-list span{color:var(--muted)}
.bottom-nav{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:min(720px,100%);height:72px;padding:7px 12px calc(7px + var(--safe-bottom));display:grid;grid-template-columns:repeat(4,1fr);background:rgba(8,20,34,.95);border-top:1px solid var(--line);backdrop-filter:blur(18px);z-index:30}.bottom-nav button{border:0;background:none;color:#6f849d;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10px}.bottom-nav i{font-style:normal;font-size:21px}.bottom-nav button.active{color:var(--cyan)}
.modal{position:fixed;inset:0;z-index:60}.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(4px)}.modal-sheet{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:min(720px,100%);background:#0d1c2d;border:1px solid var(--line);border-radius:24px 24px 0 0;padding:24px 18px calc(24px + var(--safe-bottom));max-height:88vh;overflow:auto}.modal-close{position:absolute;right:15px;top:14px;width:32px;height:32px;border:0;border-radius:50%;background:#152b42;color:#a9bad0;font-size:20px}.modal h3{margin:0 0 7px}.modal p{color:var(--muted);font-size:11px;line-height:1.6}.field{margin:15px 0}.field label{display:block;color:#aabbd0;font-size:11px;margin-bottom:7px}.field input,.field select{width:100%;border:1px solid #294661;background:#081624;color:var(--text);border-radius:12px;padding:13px;outline:0}.field input:focus{border-color:var(--cyan)}.form-note{font-size:10px;color:var(--muted);margin:8px 0 15px}
.toast{position:fixed;left:50%;bottom:92px;transform:translateX(-50%);z-index:100;background:#172c42;border:1px solid #335574;border-radius:12px;padding:11px 15px;font-size:11px;box-shadow:0 10px 30px rgba(0,0,0,.3);max-width:88%;text-align:center}.skeleton,.empty{padding:24px;text-align:center;color:var(--muted);font-size:11px;background:var(--panel);border:1px dashed var(--line);border-radius:14px}
@media(min-width:640px){.main-content{padding-left:22px;padding-right:22px}.hero-card{padding:24px}.market-list{grid-template-columns:1fr 1fr}.action-card{padding:18px}.bottom-nav{border-left:1px solid var(--line);border-right:1px solid var(--line)}}