/* 模拟炒股 H5 公共样式 —— 亮蓝版设计规范 */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{font-family:-apple-system,'PingFang SC','Microsoft YaHei',sans-serif;background:#E9EDF3;color:#17233D;-webkit-font-smoothing:antialiased}
.page{max-width:420px;margin:0 auto;min-height:100vh;background:#F2F4F8;display:flex;flex-direction:column;position:relative}
/* 色板：蓝渐变头部 / 红涨 #F5455C / 绿跌 #0AA864 / 主蓝 #1D6AFF */
.up{color:#F5455C}.down{color:#0AA864}
.num{font-variant-numeric:tabular-nums}
/* ===== 头部 ===== */
.hero{background:linear-gradient(160deg,#2E7BFF 0%,#1D6AFF 55%,#0F55E6 100%);padding:10px 14px 52px;color:#fff}
.nav{display:flex;align-items:center;gap:8px}
.nav .sch{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.14);border-radius:16px;padding:3px 10px 3px 4px;flex:none}
.nav .sch .bdg{width:22px;height:22px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.nav .sch span:last-child{font-size:11px;font-weight:600}
.nav h1{font-size:16px;font-weight:600;flex:1;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav .ph{width:84px;flex:none}
.nav .cir{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;flex:none}
.nav .back{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;flex:none;cursor:pointer;border:none}
/* ===== 卡片 ===== */
.card{margin:10px 12px 0;background:#fff;border-radius:14px;padding:12px 14px;box-shadow:0 6px 18px rgba(23,52,110,.06);position:relative;}
.card.lift{margin-top:20px;box-shadow:0 10px 28px rgba(23,52,110,.1)}
.card h3{font-size:13px;font-weight:700;display:flex;justify-content:space-between;align-items:center}
.card h3 span{font-size:10px;color:#8A93A6;font-weight:400}
/* ===== 列表行 ===== */
.row{display:flex;align-items:center;padding:7px 0;border-top:1px solid #F2F4F8;font-size:12px}
.row:first-of-type{border-top:none}
/* ===== 按钮 ===== */
.btn{display:block;width:100%;height:44px;border:none;border-radius:22px;font-size:15px;font-weight:700;color:#fff;cursor:pointer}
.btn.blue{background:linear-gradient(135deg,#2E7BFF,#1D6AFF);box-shadow:0 6px 14px rgba(29,106,255,.3)}
.btn.red{background:linear-gradient(135deg,#F5455C,#E03450);box-shadow:0 6px 14px rgba(245,69,92,.3)}
.btn.green{background:linear-gradient(135deg,#0AA864,#078F54);box-shadow:0 6px 14px rgba(10,168,100,.3)}
.btn.gray{background:#C9D0DE;box-shadow:none;cursor:not-allowed}
.btn.ghost{background:#F2F4F8;color:#5A6B8C;box-shadow:none}
/* ===== 表单 ===== */
.field{margin-top:12px}
.field label{font-size:11px;color:#8A93A6;display:block;margin-bottom:6px}
.field input,.field select{width:100%;height:44px;border:1.5px solid #E4E8F0;border-radius:11px;padding:0 12px;font-size:14px;color:#17233D;background:#fff;outline:none;font-family:inherit}
.field input:focus{border-color:#1D6AFF}
/* ===== 开关 ===== */
.switch{width:38px;height:22px;border-radius:11px;background:#C7D0DE;position:relative;flex:none;cursor:pointer;border:none;transition:background .2s}
.switch i{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:left .2s}
.switch.on{background:#1D6AFF}
.switch.on i{left:18px}
/* ===== 底部导航 ===== */
.tabbar{margin-top:auto;background:#fff;border-top:1px solid #EDF0F6;display:flex;padding:6px 0 16px;position:sticky;bottom:0;z-index:5;box-shadow:0 -4px 12px rgba(23,52,110,.04)}
.tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10px;color:#8A93A6;text-decoration:none}
.tabbar a.on{color:#1D6AFF;font-weight:600}
.tabbar svg{width:22px;height:22px}
/* ===== 弹窗 ===== */
.mask{position:fixed;inset:0;background:rgba(10,17,40,.5);display:none;align-items:center;justify-content:center;z-index:99;padding:0 40px}
.mask.show{display:flex}
.dialog{width:100%;max-width:320px;background:#fff;border-radius:16px;padding:18px 16px}
.dialog h4{font-size:15px;font-weight:700;text-align:center}
/* ===== 空态 / 提示 ===== */
.empty{text-align:center;color:#8A93A6;font-size:12px;padding:30px 0}
.toast{position:fixed;left:50%;bottom:120px;transform:translateX(-50%);background:rgba(23,35,61,.9);color:#fff;font-size:13px;padding:9px 18px;border-radius:20px;z-index:999;display:none;max-width:80%;text-align:center}
.toast.show{display:block}
/* ===== 骨架 ===== */
.skeleton{background:linear-gradient(90deg,#F2F4F8 25%,#E9EDF3 50%,#F2F4F8 75%);background-size:200% 100%;animation:sk 1.2s infinite;border-radius:8px}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}