/* =========================================================
   QuantDinger A股 · H5 终端
   设计系统 / 布局 / 组件
   ========================================================= */

/* ---------- tokens ---------- */
:root{
  --bg:#05080F;
  --bg2:#080D18;
  --surface:rgba(18,26,43,.72);
  --surface-solid:#0E1626;
  --surface2:rgba(26,37,58,.72);
  --line:rgba(148,173,214,.10);
  --line2:rgba(148,173,214,.18);
  --text:#E9F0FB;
  --text2:#93A3BD;
  --text3:#606F89;
  --up:#FF4D5E;
  --down:#12C48B;
  --flat:#8895AA;
  --accent:#3DDCFF;
  --accent2:#7C6CFF;
  --gold:#FFC061;
  --r-xl:22px;
  --r-lg:16px;
  --r-md:12px;
  --r-sm:8px;
  --tab-h:62px;
  --font:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,"SF Mono","JetBrains Mono","Roboto Mono",Consolas,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0;background:radial-gradient(120% 90% at 50% -10%,#0C1526 0%,#05080F 55%,#03060B 100%);
  color:var(--text);font-family:var(--font);font-size:14px;line-height:1.45;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow:hidden;
}
button,input,select,textarea{font:inherit;color:inherit;background:none;border:none;outline:none}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p{margin:0}
canvas{display:block;touch-action:pan-y}
::selection{background:rgba(61,220,255,.25)}

/* ---------- frame / desktop shell ---------- */
.frame{height:100dvh;display:flex;align-items:center;justify-content:center;gap:64px;position:relative;overflow:hidden}
.ambient{
  position:fixed;inset:0;pointer-events:none;
  background:
    radial-gradient(38% 30% at 12% 8%,rgba(61,220,255,.10),transparent 70%),
    radial-gradient(34% 28% at 88% 92%,rgba(124,108,255,.12),transparent 72%),
    radial-gradient(50% 40% at 50% 50%,rgba(255,77,94,.035),transparent 70%);
}
.ambient::after{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(148,173,214,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(148,173,214,.045) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(70% 60% at 50% 40%,#000 20%,transparent 75%);
  opacity:.5;
}
.desk-note{display:none}

.phone{
  position:relative;z-index:2;width:100%;max-width:430px;height:100dvh;min-width:0;
  display:flex;flex-direction:column;overflow:hidden;background:var(--bg);
  isolation:isolate;flex:0 1 auto;
}
.phone::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(70% 30% at 50% 0%,rgba(61,220,255,.08),transparent 70%);
}

/* ---------- status bar ---------- */
.statusbar{
  position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;
  height:calc(28px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 18px 0;
  font-size:12px;font-weight:600;letter-spacing:.03em;color:var(--text2);flex:none;
}
.sb-right{display:flex;align-items:center;gap:7px}
.sb-session{font-size:11px;font-weight:600;padding:1px 6px;border-radius:5px;background:rgba(61,220,255,.10);color:var(--accent)}
.sb-session.closed{background:rgba(148,173,214,.10);color:var(--text3)}

/* ---------- screen ---------- */
.screen{
  position:relative;z-index:2;flex:1;overflow-y:auto;overflow-x:hidden;
  overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;
  padding-bottom:calc(var(--tab-h) + 26px + env(safe-area-inset-bottom));
  scrollbar-width:none;
}
.screen::-webkit-scrollbar{display:none}

/* ---------- boot ---------- */
.boot{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding-bottom:80px}
.boot-mark{color:var(--accent);animation:bootPulse 1.6s var(--ease) infinite}
.boot-name{font-size:17px;font-weight:700;letter-spacing:.02em}
.boot-name span{margin-left:6px;font-size:12px;font-weight:700;color:var(--accent);padding:1px 6px;border:1px solid rgba(61,220,255,.35);border-radius:5px;vertical-align:2px}
.boot-bar{width:132px;height:2px;border-radius:2px;background:rgba(148,173,214,.16);overflow:hidden;margin-top:6px}
.boot-bar i{display:block;height:100%;width:38%;border-radius:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent);animation:bootSlide 1.1s linear infinite}
.boot-txt{font-size:11px;color:var(--text3);letter-spacing:.08em}
@keyframes bootPulse{0%,100%{opacity:.45;transform:translateY(0)}50%{opacity:1;transform:translateY(-2px)}}
@keyframes bootSlide{0%{transform:translateX(-100%)}100%{transform:translateX(360%)}}

/* ---------- tabbar ---------- */
.tabbar{
  position:absolute;left:0;right:0;bottom:0;z-index:20;
  height:calc(var(--tab-h) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  background:linear-gradient(180deg,rgba(8,13,24,.82),rgba(6,10,18,.97));
  backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%);
  border-top:1px solid var(--line);
}
.tab{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  color:var(--text3);font-size:10px;font-weight:500;letter-spacing:.02em;position:relative;
  transition:color .22s var(--ease);padding-top:2px;
}
.tab svg{width:21px;height:21px;transition:transform .28s var(--ease)}
.tab.on{color:var(--accent)}
.tab.on svg{transform:translateY(-1px) scale(1.06);filter:drop-shadow(0 0 8px rgba(61,220,255,.55))}
.tab.on::after{content:"";position:absolute;top:0;width:22px;height:2px;border-radius:0 0 3px 3px;background:var(--accent);box-shadow:0 0 10px var(--accent)}
.tab:active svg{transform:scale(.92)}

/* ---------- page shell ---------- */
.page{padding:0 14px;animation:pageIn .3s var(--ease) both}
@keyframes pageIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* nav bar inside page */
.navbar{
  position:sticky;top:0;z-index:12;display:flex;align-items:center;gap:10px;
  height:46px;margin:0 -14px 10px;padding:0 14px;
  background:linear-gradient(180deg,rgba(5,8,15,.96),rgba(5,8,15,.72) 72%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.navbar h2{font-size:17px;font-weight:700;letter-spacing:.01em}
.navbar .grow{flex:1}
.iconbtn{
  width:32px;height:32px;display:grid;place-items:center;border-radius:10px;color:var(--text2);
  transition:background .2s,color .2s;flex:none;
}
.iconbtn:active{background:rgba(148,173,214,.12);color:var(--text)}
.iconbtn svg{width:19px;height:19px}

/* ---------- text utils ---------- */
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.up{color:var(--up)}
.down{color:var(--down)}
.flat{color:var(--flat)}
.muted{color:var(--text2)}
.dim{color:var(--text3)}
.t10{font-size:10px}.t11{font-size:11px}.t12{font-size:12px}.t13{font-size:13px}
.t16{font-size:16px}.t18{font-size:18px}
.b6{font-weight:600}.b7{font-weight:700}
.row{display:flex;align-items:center;gap:8px}
.between{display:flex;align-items:center;justify-content:space-between;gap:10px}
.wrap{display:flex;flex-wrap:wrap;gap:6px}
.sp8{height:8px}.sp12{height:12px}.sp16{height:16px}
.ellip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.grow{flex:1;min-width:0}

/* ---------- card ---------- */
.card{
  position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:14px;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  overflow:hidden;
}
.card.flat{background:rgba(15,22,38,.55)}
.card.tap:active{transform:scale(.994);border-color:var(--line2)}
.card.tap{transition:transform .16s var(--ease),border-color .2s}
.card-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px}
.card-h h3{font-size:13.5px;font-weight:700;letter-spacing:.01em;display:flex;align-items:center;gap:6px}
.card-h h3::before{content:"";width:2.5px;height:12px;border-radius:2px;background:linear-gradient(180deg,var(--accent),var(--accent2))}
.card-h .more{font-size:11.5px;color:var(--text3);display:flex;align-items:center;gap:2px}

/* ---------- chips / badges ---------- */
.chip{
  display:inline-flex;align-items:center;gap:4px;padding:2.5px 7px;border-radius:6px;
  font-size:10.5px;font-weight:600;line-height:1.5;white-space:nowrap;
  background:rgba(148,173,214,.10);color:var(--text2);border:1px solid transparent;
}
.chip.up{background:rgba(255,77,94,.10);color:var(--up);border-color:rgba(255,77,94,.20)}
.chip.down{background:rgba(18,196,139,.10);color:var(--down);border-color:rgba(18,196,139,.20)}
.chip.accent{background:rgba(61,220,255,.10);color:var(--accent);border-color:rgba(61,220,255,.22)}
.chip.violet{background:rgba(124,108,255,.12);color:#A99CFF;border-color:rgba(124,108,255,.24)}
.chip.gold{background:rgba(255,192,97,.10);color:var(--gold);border-color:rgba(255,192,97,.22)}
.chip.on{background:rgba(61,220,255,.14);color:var(--accent);border-color:rgba(61,220,255,.4)}
.tag{font-size:9.5px;font-weight:700;padding:1px 4px;border-radius:4px;background:rgba(148,173,214,.14);color:var(--text2)}
.tag.st{background:rgba(124,108,255,.2);color:#B7ACFF}
.tag.up{background:rgba(255,77,94,.2);color:#FF8B96}
.tag.dn{background:rgba(18,196,139,.2);color:#6FE5BC}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:40px;padding:0 16px;border-radius:12px;font-size:13.5px;font-weight:600;
  background:rgba(148,173,214,.10);color:var(--text);border:1px solid var(--line);
  transition:transform .14s var(--ease),opacity .2s,background .2s;
}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.42;pointer-events:none}
.btn svg{width:16px;height:16px}
.btn.primary{background:linear-gradient(135deg,#3DDCFF,#5FA8FF 55%,#7C6CFF);color:#04121C;border:none;box-shadow:0 6px 20px rgba(61,220,255,.22)}
.btn.buy{background:linear-gradient(135deg,#FF5566,#E23446);color:#fff;border:none;box-shadow:0 6px 20px rgba(255,77,94,.22)}
.btn.sell{background:linear-gradient(135deg,#12C48B,#0AA073);color:#fff;border:none;box-shadow:0 6px 20px rgba(18,196,139,.2)}
.btn.ghost{background:transparent}
.btn.sm{height:30px;padding:0 11px;font-size:12px;border-radius:9px}
.btn.block{width:100%}
.btn.bs{flex:1}

/* ---------- segmented ---------- */
.seg{display:flex;gap:3px;padding:3px;background:rgba(148,173,214,.08);border-radius:11px;border:1px solid var(--line)}
.seg button{
  flex:1;height:29px;border-radius:8px;font-size:12px;font-weight:600;color:var(--text2);
  transition:background .2s,color .2s;
}
.seg button.on{background:rgba(24,36,58,.95);color:var(--text);box-shadow:0 2px 8px rgba(0,0,0,.35)}
.seg.sm button{height:25px;font-size:11.5px}

/* ---------- top tabs (scrollable) ---------- */
.tabs{display:flex;gap:18px;overflow-x:auto;scrollbar-width:none;padding:2px 0 0;border-bottom:1px solid var(--line)}
.tabs::-webkit-scrollbar{display:none}
.tabs button{
  position:relative;flex:none;padding:7px 0 9px;font-size:13px;font-weight:600;color:var(--text3);
  transition:color .2s;
}
.tabs button.on{color:var(--text)}
.tabs button.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--accent),var(--accent2))}

/* ---------- list ---------- */
.list{display:flex;flex-direction:column}
.li{
  display:flex;align-items:center;gap:10px;padding:10px 0;position:relative;
  transition:background .16s;
}
.li+.li::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--line)}
.li:active{background:rgba(148,173,214,.05)}
.li .grow{flex:1;min-width:0}
.li .name{font-size:13.5px;font-weight:600;display:flex;align-items:center;gap:5px}
.li .code{font-size:10.5px;color:var(--text3);margin-top:1px;font-family:var(--mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- price flash ---------- */
@keyframes flashUp{0%{background:rgba(255,77,94,.26)}100%{background:transparent}}
@keyframes flashDown{0%{background:rgba(18,196,139,.26)}100%{background:transparent}}
.flash-up{animation:flashUp .6s ease-out;border-radius:5px}
.flash-down{animation:flashDown .6s ease-out;border-radius:5px}

/* ---------- market / index cards ---------- */
.idx-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:9px}
.idx-card{
  position:relative;border-radius:var(--r-lg);padding:11px 12px 8px;overflow:hidden;
  background:linear-gradient(155deg,rgba(20,30,50,.9),rgba(12,18,32,.9));
  border:1px solid var(--line);
}
.idx-card:first-child{grid-column:1 / -1;display:grid;grid-template-columns:1fr auto;align-items:center}
.idx-card .ix-name{font-size:11.5px;color:var(--text2);display:flex;align-items:center;gap:5px}
.idx-card .ix-px{font-size:22px;font-weight:700;margin-top:3px;letter-spacing:-.02em}
.idx-card:first-child .ix-px{font-size:26px}
.idx-card .ix-chg{font-size:11.5px;font-weight:600;margin-top:1px}
.idx-card .ix-spark{position:absolute;right:0;bottom:0;width:48%;height:40px;opacity:.8}
.idx-card:first-child .ix-spark{position:static;width:96px;height:40px;margin-top:0;opacity:.95}

/* ---------- breadth ---------- */
.breadth-bar{display:flex;height:7px;border-radius:4px;overflow:hidden;gap:1.5px;margin:9px 0 7px}
.breadth-bar i{display:block;height:100%}
.breadth-bar .b-up{background:linear-gradient(90deg,#FF5566,#E23446)}
.breadth-bar .b-dn{background:linear-gradient(90deg,#0AA073,#12C48B)}
.breadth-bar .b-fl{background:rgba(148,173,214,.28)}
.breadth-legend{display:flex;justify-content:space-between;font-size:10.5px}

/* ---------- rankings ---------- */
.rank-row{display:flex;align-items:center;gap:9px;padding:8px 0;position:relative}
.rank-row+.rank-row::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--line)}
.rank-no{width:17px;font-family:var(--mono);font-size:11px;color:var(--text3);font-weight:700;text-align:center;flex:none}
.rank-no.top{color:var(--gold)}
.pct-pill{
  min-width:62px;text-align:center;padding:4px 0;border-radius:7px;font-family:var(--mono);
  font-size:12px;font-weight:700;letter-spacing:-.02em;
}
.pct-pill.up{background:rgba(255,77,94,.13);color:var(--up)}
.pct-pill.down{background:rgba(18,196,139,.13);color:var(--down)}
.pct-pill.flat{background:rgba(148,173,214,.1);color:var(--flat)}

/* ---------- stock detail ---------- */
.quote-head{padding:6px 0 2px}
.qh-title{display:flex;align-items:flex-end;gap:8px}
.qh-name{font-size:20px;font-weight:700;letter-spacing:.01em}
.qh-code{font-size:11.5px;color:var(--text3);font-family:var(--mono);margin-bottom:2px}
.qh-price{display:flex;align-items:baseline;gap:10px;margin-top:8px}
.qh-px{font-size:38px;font-weight:800;line-height:1;letter-spacing:-.03em}
.qh-delta{display:flex;flex-direction:column;gap:1px;font-size:12.5px;font-weight:700}
.qh-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 10px;margin-top:12px}
.qh-meta div{display:flex;justify-content:space-between;font-size:11px;padding:2px 0}
.qh-meta span:first-child{color:var(--text3)}
.qh-meta span:last-child{font-family:var(--mono);font-weight:600}

.orderbook{display:flex;flex-direction:column;gap:1px;margin-top:4px}
.ob-row{display:grid;grid-template-columns:26px 1fr 44px;align-items:center;gap:8px;font-size:11px;position:relative;padding:2.5px 0}
.ob-row .ob-lbl{color:var(--text3);font-family:var(--mono)}
.ob-row .ob-px{font-family:var(--mono);font-weight:600;text-align:right}
.ob-row .ob-vol{font-family:var(--mono);color:var(--text2);text-align:right}
.ob-bar{position:absolute;right:0;top:2px;bottom:2px;border-radius:3px;opacity:.13;pointer-events:none}
.ob-row.up .ob-bar{background:var(--up)}
.ob-row.down .ob-bar{background:var(--down)}

/* ---------- chart shells ---------- */
.chart-wrap{position:relative;margin:0 -4px}
.chart-box{position:relative;width:100%;overflow:hidden}
.chart-tip{
  position:absolute;z-index:6;pointer-events:none;padding:5px 8px;border-radius:8px;
  background:rgba(8,13,24,.94);border:1px solid var(--line2);font-size:10.5px;
  font-family:var(--mono);white-space:nowrap;color:var(--text);box-shadow:0 8px 20px rgba(0,0,0,.5);
  opacity:0;transition:opacity .12s;line-height:1.55;
}
.chart-tip.on{opacity:1}
.chart-legend{display:flex;gap:10px;font-size:10px;color:var(--text3);margin-top:5px;padding:0 2px}
.chart-legend i{display:inline-block;width:7px;height:2px;border-radius:2px;margin-right:3px;vertical-align:2px}

/* ---------- stat grid ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border-radius:var(--r-md);overflow:hidden}
.stat-grid.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.stat{background:rgba(12,19,32,.92);padding:9px 6px;text-align:center}
.stat b{display:block;font-family:var(--mono);font-size:14px;font-weight:700;letter-spacing:-.02em}
.stat span{display:block;font-size:10px;color:var(--text3);margin-top:2px}

/* ---------- kpi list ---------- */
.kv{display:flex;justify-content:space-between;font-size:12px;padding:6px 0;position:relative}
.kv+.kv::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--line)}
.kv span:first-child{color:var(--text2)}
.kv span:last-child{font-family:var(--mono);font-weight:600}

/* ---------- strategy cards ---------- */
.strat{
  border-radius:var(--r-lg);border:1px solid var(--line);background:linear-gradient(160deg,rgba(20,30,50,.85),rgba(11,17,30,.9));
  padding:13px;position:relative;overflow:hidden;
}
.strat::after{
  content:"";position:absolute;right:-40px;top:-40px;width:120px;height:120px;border-radius:50%;
  background:radial-gradient(circle,rgba(61,220,255,.13),transparent 68%);pointer-events:none;
}
.strat .st-top{display:flex;align-items:flex-start;gap:8px}
.strat .st-name{font-size:14.5px;font-weight:700;letter-spacing:.01em}
.strat .st-desc{font-size:11px;color:var(--text3);margin-top:3px;line-height:1.5}
.strat .st-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:11px}
.strat .st-metrics div{text-align:left}
.strat .st-metrics b{display:block;font-family:var(--mono);font-size:14px;font-weight:700;letter-spacing:-.02em}
.strat .st-metrics span{font-size:9.5px;color:var(--text3)}
.strat .st-foot{display:flex;align-items:center;gap:6px;margin-top:11px;padding-top:10px;border-top:1px solid var(--line)}
.pulse{width:6px;height:6px;border-radius:50%;background:var(--down);box-shadow:0 0 0 0 rgba(18,196,139,.6);animation:pulse 1.8s infinite}
.pulse.off{background:var(--text3);animation:none;box-shadow:none}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(18,196,139,.55)}70%{box-shadow:0 0 0 7px rgba(18,196,139,0)}100%{box-shadow:0 0 0 0 rgba(18,196,139,0)}}

/* ---------- forms ---------- */
.field{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;position:relative}
.field+.field::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--line)}
.field label{font-size:12.5px;color:var(--text2);flex:none}
.field .ctl{display:flex;align-items:center;gap:4px}
.inp{
  width:100%;height:38px;border-radius:10px;padding:0 11px;font-size:13.5px;font-family:var(--mono);
  background:rgba(148,173,214,.07);border:1px solid var(--line);color:var(--text);
  transition:border-color .2s,background .2s;
}
.inp:focus{border-color:rgba(61,220,255,.45);background:rgba(61,220,255,.05)}
.inp::-webkit-outer-spin-button,.inp::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.stepper{display:flex;align-items:center;background:rgba(148,173,214,.07);border:1px solid var(--line);border-radius:10px;overflow:hidden;height:38px}
.stepper button{width:34px;height:100%;display:grid;place-items:center;color:var(--text2);font-size:16px}
.stepper button:active{background:rgba(148,173,214,.12)}
.stepper .v{min-width:64px;text-align:center;font-family:var(--mono);font-weight:700;font-size:14px}
.switch{width:40px;height:23px;border-radius:12px;background:rgba(148,173,214,.18);position:relative;transition:background .22s;flex:none}
.switch::after{content:"";position:absolute;top:2.5px;left:2.5px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .24s var(--ease);box-shadow:0 1px 4px rgba(0,0,0,.35)}
.switch.on{background:linear-gradient(135deg,var(--accent),#5FA8FF)}
.switch.on::after{transform:translateX(17px)}

/* ---------- trade panel ---------- */
.trade-side{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.side-btn{height:44px;border-radius:12px;font-size:14px;font-weight:700;background:rgba(148,173,214,.08);color:var(--text2);border:1px solid var(--line);transition:all .2s}
.side-btn.on-buy{background:linear-gradient(135deg,rgba(255,85,102,.18),rgba(226,52,70,.12));color:var(--up);border-color:rgba(255,77,94,.42)}
.side-btn.on-sell{background:linear-gradient(135deg,rgba(18,196,139,.18),rgba(10,160,115,.12));color:var(--down);border-color:rgba(18,196,139,.42)}
.qty-chips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:8px}
.qty-chips button{height:29px;border-radius:8px;font-size:11.5px;font-weight:600;background:rgba(148,173,214,.08);color:var(--text2);border:1px solid var(--line)}
.qty-chips button.on{background:rgba(61,220,255,.14);color:var(--accent);border-color:rgba(61,220,255,.4)}
.fee-line{display:flex;justify-content:space-between;font-size:11px;color:var(--text3);padding:2px 0}

/* ---------- bottom sheet ---------- */
.sheet-mask{
  position:absolute;inset:0;z-index:60;background:rgba(2,5,10,.62);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .26s var(--ease);display:flex;align-items:flex-end;
}
.sheet-mask.on{opacity:1}
.sheet{
  width:100%;max-height:88%;overflow-y:auto;background:linear-gradient(180deg,#111A2B,#0A1120);
  border-radius:22px 22px 0 0;border-top:1px solid var(--line2);
  transform:translateY(100%);transition:transform .32s var(--ease);
  padding:8px 16px calc(20px + env(safe-area-inset-bottom));
  box-shadow:0 -20px 60px rgba(0,0,0,.6);
}
.sheet-mask.on .sheet{transform:none}
.sheet-grab{width:36px;height:4px;border-radius:3px;background:rgba(148,173,214,.3);margin:2px auto 12px}
.sheet-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.sheet-h h3{font-size:15.5px;font-weight:700}

/* ---------- toast ---------- */
.toast-root{position:fixed;left:50%;top:16%;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{
  padding:9px 16px;border-radius:11px;font-size:12.5px;font-weight:600;color:var(--text);
  background:rgba(16,24,40,.96);border:1px solid var(--line2);box-shadow:0 12px 34px rgba(0,0,0,.55);
  animation:toastIn .26s var(--ease) both;max-width:78vw;text-align:center;
}
.toast.err{border-color:rgba(255,77,94,.45);color:#FFB4BC}
.toast.ok{border-color:rgba(18,196,139,.45);color:#8FF0CE}
.toast.out{animation:toastOut .24s ease-in both}
@keyframes toastIn{from{opacity:0;transform:translateY(-8px) scale(.96)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(-6px) scale(.97)}}

/* ---------- empty / skeleton ---------- */
.empty{padding:44px 18px;text-align:center;color:var(--text3)}
.empty svg{width:38px;height:38px;opacity:.35;margin-bottom:10px}
.empty p{font-size:12.5px;line-height:1.7}
.empty .btn{margin-top:14px}
.sk{background:linear-gradient(90deg,rgba(148,173,214,.06),rgba(148,173,214,.13),rgba(148,173,214,.06));background-size:200% 100%;animation:sk 1.3s linear infinite;border-radius:6px}
@keyframes sk{to{background-position:-200% 0}}

/* ---------- misc ---------- */
.hr{height:1px;background:var(--line);margin:12px 0}
.notice{display:flex;gap:8px;padding:9px 11px;border-radius:11px;background:rgba(255,192,97,.07);border:1px solid rgba(255,192,97,.18);font-size:11px;color:#E9C68A;line-height:1.6}
.notice.info{background:rgba(61,220,255,.06);border-color:rgba(61,220,255,.18);color:#9FDDEE}
.notice svg{width:14px;height:14px;flex:none;margin-top:1px}
.sec-title{display:flex;align-items:center;justify-content:space-between;margin:18px 2px 9px;font-size:12.5px;font-weight:700;color:var(--text2);letter-spacing:.02em}
.sec-title .more{font-size:11px;color:var(--text3);font-weight:500}
.divider-dot{color:var(--text3);opacity:.5;margin:0 4px}
.mono{font-family:var(--mono)}
.right{text-align:right}

/* heatmap */
.heat{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:3px}
.heat i{aspect-ratio:1/.82;border-radius:3px;background:rgba(148,173,214,.07)}
.heat-lbl{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:3px;font-size:8px;color:var(--text3);margin-top:4px;text-align:center}

/* strategy detail header */
.st-hero{
  position:relative;border-radius:var(--r-xl);padding:16px;overflow:hidden;
  background:linear-gradient(150deg,rgba(124,108,255,.16),rgba(20,30,50,.7) 55%,rgba(11,17,30,.9));
  border:1px solid var(--line2);
}
.st-hero::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(80% 60% at 100% 0%,rgba(61,220,255,.16),transparent 65%);pointer-events:none;
}

/* profile */
.me-hero{
  position:relative;border-radius:var(--r-xl);padding:16px;overflow:hidden;
  background:linear-gradient(145deg,rgba(61,220,255,.13),rgba(124,108,255,.10) 60%,rgba(11,17,30,.85));
  border:1px solid var(--line2);
}
.avatar{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-weight:800;font-size:17px;color:#04121C;background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 6px 18px rgba(61,220,255,.3)}
.grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:9px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.mini-stat{background:rgba(148,173,214,.06);border:1px solid var(--line);border-radius:12px;padding:9px 10px}
.mini-stat b{display:block;font-family:var(--mono);font-size:15px;font-weight:700;letter-spacing:-.02em}
.mini-stat span{font-size:10px;color:var(--text3)}

/* account hero */
.acct{
  position:relative;border-radius:var(--r-xl);padding:16px 16px 14px;overflow:hidden;
  background:linear-gradient(140deg,rgba(61,220,255,.14),rgba(29,44,72,.55) 48%,rgba(10,16,28,.92));
  border:1px solid rgba(61,220,255,.18);
}
.acct::after{
  content:"";position:absolute;right:-30px;bottom:-50px;width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle,rgba(124,108,255,.22),transparent 66%);pointer-events:none;
}

/* search */
.searchbar{display:flex;align-items:center;gap:8px;height:38px;padding:0 12px;border-radius:11px;background:rgba(148,173,214,.08);border:1px solid var(--line)}
.searchbar input{flex:1;font-size:13px;min-width:0}
.searchbar input::placeholder{color:var(--text3)}
.searchbar svg{width:15px;height:15px;color:var(--text3);flex:none}

/* ---------- 二级页底部操作条 ---------- */
.screen.sub{padding-bottom:20px}
.actionbar{
  position:sticky;bottom:0;z-index:16;display:flex;gap:8px;
  margin:16px -14px -6px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(6,10,18,0),rgba(6,10,18,.94) 26%,#060A12);
  border-top:1px solid var(--line);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}

/* desktop */
@media (min-width:900px){
  .frame{gap:56px;padding:0 48px}
  .desk-note{display:block;flex:1;max-width:420px;color:var(--text2)}
  .desk-note h1{font-size:30px;font-weight:800;letter-spacing:-.02em;color:var(--text);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .desk-note h1 span{font-size:12px;font-weight:700;color:var(--accent);padding:2px 8px;border:1px solid rgba(61,220,255,.35);border-radius:6px;letter-spacing:.06em}
  .desk-note p{font-size:13.5px;line-height:1.9;margin-top:14px;color:var(--text2)}
  .desk-note ul{margin-top:20px;display:flex;flex-direction:column;gap:9px}
  .desk-note li{font-size:12.5px;color:var(--text3);padding-left:16px;position:relative}
  .desk-note li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent)}
  .desk-logo{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;color:var(--accent);background:rgba(61,220,255,.1);border:1px solid rgba(61,220,255,.25);margin-bottom:18px}
  .desk-tip{margin-top:26px;font-size:11px;color:var(--text3);padding:8px 12px;border-radius:9px;background:rgba(148,173,214,.05);border:1px solid var(--line);display:inline-block}
  .phone{height:min(880px,94dvh);max-width:390px;border-radius:38px;border:1px solid rgba(148,173,214,.16);box-shadow:0 50px 120px -20px rgba(0,0,0,.9),0 0 0 9px rgba(12,18,30,.9),0 0 0 10px rgba(148,173,214,.1),inset 0 0 60px rgba(61,220,255,.03)}
  .phone::after{content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);width:88px;height:19px;border-radius:12px;background:#04070D;z-index:30;border:1px solid rgba(148,173,214,.1)}
  .statusbar{padding-top:0;height:44px;align-items:flex-end;padding-bottom:6px}
  .toast-root{top:12%}
}
@media (max-width:899px){
  .phone{max-width:none;height:100dvh}
  .frame{gap:0}
}