/* ForexPro - 外汇交易平台全局样式
   视觉风格: Coiny UI Kit (纯黑/纯白, #00CA78绿色强调)
   布局: 外汇交易标准 (5Tab底部导航, 专业交易面板)
*/
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
/* 品牌迁移 2026-09-07：LSE → 华润新能源 (CionSafe)
   --g / --r 保留原交易语义 (涨绿/跌红)，避免破坏行情/持仓/盈亏视觉
   新增 --brand / --brand-2 用于品牌 CTA / Hero / Logo
*/
/* 品牌色体系
   --brand      主 CTA/强调红 (matches cr-newenergy hero red)
   --brand-2    深红/hover
   --brand-3    深蓝辅助
   --brand-gold 官方琥珀金 (华润 logo 五角星色)
   --brand-gold-2 深琥珀 (hover / accent)
   --brand-text 官方棕色文字 (logo 中文字色) */
:root{--g:#00CA78;--r:#FF3B30;--o:#FAAB53;--bl:#3B82F6;--brand:#C8102E;--brand-2:#8B0000;--brand-3:#003874;--brand-gold:#F0B03C;--brand-gold-2:#D68F1E;--brand-text:#5D4037;--font:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","SF Pro Display","Helvetica Neue",sans-serif;--mono:"SF Mono",Menlo,Consolas,monospace}
[data-theme="dark"]{--bg:#0A0A0A;--bg2:#111;--bg3:#1A1A1A;--card:#141414;--text:#FFF;--sub:rgba(255,255,255,.55);--dim:rgba(255,255,255,.3);--line:rgba(255,255,255,.08);--input:#1A1A1A;--navbg:#0A0A0A}
[data-theme="light"]{--bg:#F5F5F5;--bg2:#FFF;--bg3:#FFF;--card:#FFF;--text:#111;--sub:rgba(0,0,0,.5);--dim:rgba(0,0,0,.25);--line:rgba(0,0,0,.06);--input:#F0F0F0;--navbg:#FFF}
/* brand-lse 类保留供旧代码兼容；实际显示切换为华润品牌字样 */
.brand-lse,.brand-crne{font-size:16px;font-weight:800;letter-spacing:2px;font-family:'PingFang SC','Microsoft YaHei',sans-serif;color:var(--brand)}
[data-theme="dark"] .brand-lse,[data-theme="dark"] .brand-crne{color:#fff}
[data-theme="light"] .brand-lse,[data-theme="light"] .brand-crne{color:var(--brand)}
/* 品牌按钮 */
.btn-brand{background:var(--brand);color:#FFF}
.btn-brand:hover{background:var(--brand-2)}
html{-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
body{font-family:var(--font);background:var(--bg);color:var(--text);min-height:100vh;min-height:100dvh}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font-family:var(--font);outline:none}

/* === APP SHELL === */
.app{max-width:430px;margin:0 auto;min-height:100vh;min-height:100dvh;background:var(--bg2);position:relative;overflow-x:hidden}
.page{padding-bottom:calc(56px + env(safe-area-inset-bottom,0px))}

/* === 顶部栏 === */
.topbar{display:flex;align-items:center;justify-content:space-between;height:48px;padding:0 16px;background:var(--bg2);position:sticky;top:0;z-index:50}
.topbar-title{font-size:18px;font-weight:700}
.topbar-back{width:32px;height:32px;display:flex;align-items:center;justify-content:center}
.topbar-back svg{width:20px;height:20px}
.topbar-actions{display:flex;align-items:center;gap:12px}

/* === 底部导航 5Tab === */
.btm-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:430px;height:calc(56px + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);background:var(--navbg);border-top:1px solid var(--line);display:flex;z-index:100}
.btm-nav a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--dim);font-size:10px;font-weight:500;transition:color .2s}
.btm-nav a svg{width:22px;height:22px}
.btm-nav a.on{color:var(--g)}

/* === 输入框 === */
.inp{width:100%;height:48px;background:var(--input);border:1px solid var(--line);border-radius:10px;padding:0 14px;font-size:15px;color:var(--text)}
.inp::placeholder{color:var(--dim)}
.inp:focus{border-color:var(--g)}
.inp-label{font-size:13px;font-weight:600;color:var(--sub);margin-bottom:6px;display:block}
.inp-group{margin-bottom:14px}
select.inp,select.form-input{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,.4)' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:12px;padding-right:36px;cursor:pointer;}

/* === 按钮 === */
.btn{width:100%;height:50px;border-radius:12px;font-size:16px;font-weight:600;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:opacity .15s}
.btn:active{opacity:.8}
.btn-g{background:var(--g);color:#FFF}
.btn-r{background:var(--r);color:#FFF}
.btn-o{background:transparent;border:1px solid var(--line);color:var(--text)}
.btn-sm{height:40px;font-size:14px;border-radius:10px}
.btn-xs{height:32px;font-size:12px;border-radius:8px;padding:0 12px;width:auto}

/* === 卡片 === */
.card{background:var(--card);border-radius:12px;padding:16px;border:1px solid var(--line)}

/* === 行情列表项 === */
.quote-item{display:flex;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line)}
.quote-item:active{background:var(--bg3)}
.qi-pair{flex:1}
.qi-name{font-size:15px;font-weight:600}
.qi-sub{font-size:12px;color:var(--sub);margin-top:2px}
.qi-chart{width:64px;height:32px;margin:0 12px;flex-shrink:0}
.qi-chart polyline{fill:none;stroke-width:1.5}
.qi-right{text-align:right;min-width:80px}
.qi-price{font-size:15px;font-weight:600;font-family:var(--mono)}
.qi-chg{font-size:12px;font-weight:600;margin-top:2px}

/* === 涨跌色 === */
.up{color:var(--g)}.down{color:var(--r)}
.bg-up{background:rgba(0,202,120,.12);color:var(--g);padding:2px 8px;border-radius:4px;font-size:12px;font-weight:600}
.bg-down{background:rgba(255,59,48,.12);color:var(--r);padding:2px 8px;border-radius:4px;font-size:12px;font-weight:600}

/* === 分类Tab === */
.tabs{display:flex;gap:0;border-bottom:1px solid var(--line);padding:0 16px}
.tab{padding:10px 16px;font-size:14px;font-weight:500;color:var(--sub);border-bottom:2px solid transparent;cursor:pointer;white-space:nowrap}
.tab.on{color:var(--g);border-bottom-color:var(--g);font-weight:600}

/* === Pills === */
.pills{display:flex;gap:8px;padding:8px 16px;overflow-x:auto;scrollbar-width:none}
.pills::-webkit-scrollbar{display:none}
.pill{padding:6px 14px;border-radius:16px;font-size:13px;font-weight:500;border:1px solid var(--line);background:transparent;color:var(--sub);cursor:pointer;white-space:nowrap;flex-shrink:0}
.pill.on{background:var(--g);color:#FFF;border-color:var(--g)}

/* === 持仓项 === */
.pos-item{padding:14px 16px;border-bottom:1px solid var(--line)}
.pos-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.pos-pair{font-size:15px;font-weight:700}
.pos-dir{font-size:12px;font-weight:600;padding:2px 8px;border-radius:4px}
.pos-dir.buy{background:rgba(0,202,120,.12);color:var(--g)}
.pos-dir.sell{background:rgba(255,59,48,.12);color:var(--r)}
.pos-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px}
.pos-label{font-size:11px;color:var(--dim)}
.pos-val{font-size:13px;font-weight:600;font-family:var(--mono)}
.pos-pnl{font-size:16px;font-weight:700;font-family:var(--mono)}
.pos-actions{display:flex;gap:8px;margin-top:10px}

/* === 交易面板 === */
.trade-dir{display:flex;border-radius:10px;overflow:hidden;border:1px solid var(--line)}
.trade-dir button{flex:1;height:44px;font-size:15px;font-weight:700;border:none;cursor:pointer;background:transparent;color:var(--sub);font-family:var(--font)}
.trade-dir .buy-on{background:var(--g);color:#FFF}
.trade-dir .sell-on{background:var(--r);color:#FFF}
.lot-ctrl{display:flex;align-items:center;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.lot-btn{width:44px;height:44px;background:var(--input);border:none;font-size:20px;color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center}
.lot-btn:active{background:var(--g);color:#FFF}
.lot-val{flex:1;height:44px;border:none;background:transparent;text-align:center;font-size:18px;font-weight:700;color:var(--text);font-family:var(--mono)}

/* === 菜单列表 === */
.menu-item{display:flex;align-items:center;gap:14px;padding:14px 16px;border-bottom:1px solid var(--line);cursor:pointer}
.menu-item:active{opacity:.6}
.mi-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:transparent;color:var(--sub)}
.mi-icon svg{width:20px;height:20px}
.mi-body{flex:1}
.mi-title{font-size:15px;font-weight:500}
.mi-desc{font-size:12px;color:var(--sub);margin-top:2px}
.mi-arrow{color:var(--dim);font-size:18px}

/* === 资产概览 === */
.asset-hero{text-align:center;padding:24px 16px 16px}
.asset-label{font-size:12px;color:var(--sub);text-transform:uppercase;letter-spacing:.5px}
.asset-bal{font-size:34px;font-weight:700;font-family:var(--mono);margin:6px 0}
.asset-row{display:flex;gap:10px;padding:0 16px}
.asset-row .btn{flex:1}
.asset-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:16px}

/* === 方法选择 === */
.method{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line);cursor:pointer}
.method:active{opacity:.7}
.method.on{background:rgba(0,202,120,.04)}
.m-radio{width:20px;height:20px;border-radius:50%;border:2px solid var(--dim);flex-shrink:0;display:flex;align-items:center;justify-content:center}
.method.on .m-radio{border-color:var(--g);background:var(--g)}
.method.on .m-radio::after{content:'';width:8px;height:8px;border-radius:50%;background:#FFF}
.m-icon{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:transparent;color:var(--sub)}
.m-icon svg{width:18px;height:18px}
.m-body{flex:1}
.m-name{font-size:14px;font-weight:600}
.m-sub{font-size:12px;color:var(--sub);margin-top:1px}

/* === 通用 === */
.section{padding:16px}
.section-title{font-size:12px;font-weight:700;color:var(--sub);text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px}
.divider{height:8px;background:var(--bg)}
.mono{font-family:var(--mono)}
.hidden{display:none!important}
.px{padding-left:16px;padding-right:16px}
.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mb16{margin-bottom:16px}
.flex{display:flex}.gap8{gap:8px}.gap12{gap:12px}
.items-c{align-items:center}.jc-sb{justify-content:space-between}
.text-c{text-align:center}
.w100{width:100%}
.fs11{font-size:11px}.fs12{font-size:12px}.fs13{font-size:13px}.fs14{font-size:14px}.fs15{font-size:15px}.fs16{font-size:16px}.fs18{font-size:18px}.fs20{font-size:20px}.fs24{font-size:24px}.fs28{font-size:28px}
.fw500{font-weight:500}.fw600{font-weight:600}.fw700{font-weight:700}

/* === Toast === */
.toast-c{position:fixed;top:0;left:50%;transform:translateX(-50%);width:100%;max-width:430px;z-index:9999;padding:12px 16px;pointer-events:none;}
.toast-i{pointer-events:auto;display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:12px;background:var(--card);border:1px solid var(--line);box-shadow:0 8px 32px rgba(0,0,0,.5);font-size:13px;animation:tIn .25s ease;margin-bottom:6px;}
.toast-i.out{animation:tOut .2s ease forwards;}
.toast-i .t-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
.toast-i .t-dot.ok{background:var(--g);}
.toast-i .t-dot.err{background:var(--r);}
.toast-i .t-dot.warn{background:var(--o);}
@keyframes tIn{from{opacity:0;transform:translateY(-20px);}to{opacity:1;transform:translateY(0);}}
@keyframes tOut{from{opacity:1;}to{opacity:0;transform:translateY(-10px);}}

/* === Confirm === */
.cfm-ov{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:10000;padding:20px;animation:cfmFade .15s ease;}
.cfm-box{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px 20px 20px;width:100%;max-width:430px;animation:cfmUp .2s ease;}
.cfm-title{font-size:16px;font-weight:700;text-align:center;margin-bottom:6px;}
.cfm-msg{font-size:13px;color:var(--sub);text-align:center;line-height:1.5;margin-bottom:20px;}
.cfm-input{width:100%;height:44px;background:var(--input);border:1px solid var(--line);border-radius:10px;padding:0 14px;font-size:15px;color:var(--text);margin-bottom:16px;outline:none;}
.cfm-input:focus{border-color:var(--g);}
.cfm-btns{display:flex;gap:10px;}
.cfm-btns button{flex:1;height:48px;border-radius:12px;font-size:15px;font-weight:600;border:none;cursor:pointer;}
.cfm-btns .cfm-cancel{background:var(--input);color:var(--sub);}
.cfm-btns .cfm-ok{background:var(--g);color:#fff;}
.cfm-btns .cfm-danger{background:var(--r);color:#fff;}
@keyframes cfmFade{from{opacity:0;}to{opacity:1;}}
@keyframes cfmUp{from{opacity:0;transform:scale(.95);}to{opacity:1;transform:scale(1);}}

/* === 响应式 === */
@media(max-width:374px){.topbar-title{font-size:16px}.qi-name{font-size:14px}.asset-bal{font-size:28px}.tabs{padding:0 8px}.tab{padding:10px 10px;font-size:13px}}
@media(max-width:320px){.asset-bal{font-size:24px}.topbar{padding:0 10px}.section{padding:12px 10px}.px{padding-left:10px;padding-right:10px}}
@media(min-width:431px) and (max-width:1023px){body{background:#080808}[data-theme="light"] body{background:#E0E0E0}.app{box-shadow:0 0 40px rgba(0,0,0,.2)}}
@media(min-width:768px) and (max-width:1023px){.app{border-radius:16px;margin-top:20px;margin-bottom:20px;min-height:calc(100vh - 40px);min-height:calc(100dvh - 40px)}.btm-nav{border-radius:0 0 16px 16px}}