/* ============ 金汇投 H5 金色主题 ============ */
:root {
  --gold: #1d6fe0;
  --gold-dark: #1552b0;
  --gold-light: #63a4f5;
  --up: #16a34a;      /* 涨-绿 */
  --down: #dc2626;    /* 跌-红 */
  --text: #1f2430;
  --text-2: #6b7280;
  --bg: #f4f5f7;
  --card: #ffffff;
  --radius: 14px;
  --tabbar-h: 56px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  background: #d8d8d8;
  color: var(--text);
}

#app { max-width: 480px; margin: 0 auto; min-height: 100vh; background: var(--bg); position: relative; box-shadow: 0 0 40px rgba(0,0,0,.18); }

button { font-family: inherit; border: none; outline: none; cursor: pointer; background: none; }
input { font-family: inherit; outline: none; border: none; }
ul { list-style: none; }
a { text-decoration: none; color: inherit; }

.up { color: var(--up); }
.down { color: var(--down); }

/* ---------- 通用 ---------- */
.gold-btn {
  display: block; width: 100%; height: 46px; border-radius: 24px;
  background: linear-gradient(135deg, var(--gold-light), var(--gold) 55%, var(--gold-dark));
  color: #fff; font-size: 16px; font-weight: 600; letter-spacing: 4px;
  box-shadow: 0 4px 14px rgba(29,111,224,.35);
}
.gold-btn:active { transform: scale(.98); }
.gold-btn.plain { background: #fff; color: var(--gold-dark); box-shadow: 0 4px 14px rgba(0,0,0,.12); }
.gold-btn.sm { height: 34px; font-size: 13px; letter-spacing: 1px; border-radius: 17px; width: auto; padding: 0 18px; }

.page { padding-bottom: calc(var(--tabbar-h) + var(--safe-b) + 12px); min-height: 100vh; }

/* 页面切换进场动画（纯 CSS，替代 Vue transition，杜绝卡死） */
.page { animation: pageIn .3s cubic-bezier(.4,0,.2,1); }
@keyframes pageIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.page.no-tab { padding-bottom: calc(var(--safe-b) + 12px); }

/* ---------- 顶部导航 ---------- */
.navbar {
  position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: center;
  height: 48px; background: #fff; border-bottom: 1px solid #f0f0f0;
}
.navbar .title { font-size: 17px; font-weight: 600; }
.navbar .back { position: absolute; left: 8px; top: 0; height: 48px; width: 44px; display: flex; align-items: center; justify-content: center; color: #333; }
.back-ico { width: 18px; height: 18px; }

/* ---------- 底部 TabBar ---------- */
.tabbar {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; z-index: 60;
  width: 100%; max-width: 480px; height: calc(var(--tabbar-h) + var(--safe-b));
  padding-bottom: var(--safe-b);
  background: #fff; border-top: 1px solid #ececec;
  display: flex;
}
.tabbar .item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: #9aa0a6; font-size: 11px; }
.tabbar .item svg { width: 22px; height: 22px; }
.tabbar .item.active { color: var(--gold); }

/* ---------- 登录页 ---------- */
.login-page {
  min-height: 100vh; position: relative; overflow: hidden; display: flex; flex-direction: column;
  background:
    radial-gradient(220px 160px at 50% 58%, rgba(225,242,255,.95), rgba(170,214,255,.55) 45%, transparent 72%),
    linear-gradient(180deg, #cfe7ff 0%, #8ec2f8 38%, #4f97ec 55%, #1f62c4 58.5%, #14407f 66%, #0b2652 82%, #071a38 100%);
}
.login-page .wave {
  position: absolute; left: 0; right: 0; top: 58%; bottom: 0;
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.10) 0 2px, transparent 2px 14px),
    linear-gradient(180deg, rgba(170,214,255,.35), transparent 30%);
  pointer-events: none;
}
.login-page .sun {
  position: absolute; left: 50%; top: 56%; width: 130px; height: 130px; transform: translate(-50%,-50%);
  background: radial-gradient(circle, rgba(240,250,255,.98), rgba(180,220,255,.75) 45%, rgba(150,205,255,0) 70%);
  border-radius: 50%; pointer-events: none;
}
.login-top { position: relative; z-index: 2; display: flex; align-items: center; gap: 6px; padding: 14px 16px; color: #fff; font-size: 14px; }
.login-top .coin { width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #dbeafe, #2f7ae5 60%, #123a75); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: #e6f2ff; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.login-top .lang { margin-left: auto; background: rgba(255,255,255,.18); border-radius: 14px; padding: 4px 12px; font-size: 12px; backdrop-filter: blur(4px); }

.login-brand { position: relative; z-index: 2; text-align: center; margin-top: 34vh; color: #fff; }
.login-brand .name { font-size: 30px; font-weight: 800; letter-spacing: 6px; text-shadow: 0 2px 10px rgba(0,30,70,.5); }
.login-brand .en { margin-top: 6px; font-size: 11px; letter-spacing: 3px; opacity: .85; }

.login-form { position: relative; z-index: 2; margin: 34px 26px 0; }
.login-form .field {
  display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 16px;
  background: rgba(255,255,255,.92); border-radius: 24px; margin-bottom: 14px;
  box-shadow: 0 3px 10px rgba(0,40,90,.18);
}
.login-form .field .ico { width: 20px; text-align: center; color: #5b82b5; font-size: 15px; }
.login-form .field input { flex: 1; background: transparent; font-size: 15px; color: #333; }
.login-form .field input::placeholder { color: #b3b3b3; }
.login-form .field .eye { color: #999; font-size: 14px; padding: 4px; }
.login-form .field.captcha { padding-right: 6px; }
.login-form .field.captcha img { height: 36px; border-radius: 6px; cursor: pointer; }
.login-actions { margin-top: 22px; }
.login-links { display: flex; justify-content: center; gap: 26px; margin-top: 16px; }
.login-links a { color: rgba(255,255,255,.92); font-size: 13px; text-shadow: 0 1px 4px rgba(0,25,60,.4); }
.login-register { margin: 22px 26px 30px; position: relative; z-index: 2; }

/* ---------- 首页 ---------- */
.home-top {
  position: sticky; top: 0; z-index: 50; height: 48px; background: #fff;
  display: flex; align-items: center; justify-content: center; border-bottom: 1px solid #f2f2f2;
}
.home-top .logo { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 17px; letter-spacing: 1px; color: #2a2a2a; }
.home-top .logo .mark {
  width: 30px; height: 30px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #dbeafe, #2f7ae5 62%, #123a75);
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 900; color: #e6f2ff;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.home-top .lang { position: absolute; left: 12px; font-size: 13px; color: #666; }
.home-top .bell { position: absolute; right: 12px; color: #666; font-size: 16px; }

.banner { margin: 10px 12px 0; border-radius: var(--radius); overflow: hidden; position: relative; height: 150px; }
.banner .slide { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 0 22px; color: #fff; opacity: 0; transition: opacity .6s; }
.banner .slide.on { opacity: 1; }
.banner .slide .t { font-size: 19px; font-weight: 700; text-shadow: 0 1px 6px rgba(0,0,0,.3); }
.banner .slide .s { margin-top: 8px; font-size: 12px; opacity: .9; }
.banner .dots { position: absolute; bottom: 8px; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; }
.banner .dots i { width: 6px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.5); transition: width .3s; }
.banner .dots i.on { width: 16px; background: #fff; }

.cat-tabs { display: flex; background: #fff; margin: 10px 0 0; padding: 0 6px; overflow-x: auto; }
.cat-tabs::-webkit-scrollbar { display: none; }
.cat-tabs .t { flex: none; padding: 12px 12px 9px; font-size: 14px; color: #666; position: relative; white-space: nowrap; }
.cat-tabs .t.on { color: var(--text); font-weight: 700; }
.cat-tabs .t.on::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); bottom: 4px; width: 22px; height: 3px; border-radius: 2px; background: var(--gold); }

.quote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; padding: 12px; }
.quote-card { background: var(--card); border-radius: 12px; padding: 12px 6px 11px; text-align: center; box-shadow: 0 1px 6px rgba(0,0,0,.04); cursor: pointer; }
.quote-card:active { transform: scale(.97); }
.quote-card .n { font-size: 13px; color: #333; font-weight: 600; }
.quote-card .p { font-size: 16px; font-weight: 800; margin: 6px 0 3px; font-variant-numeric: tabular-nums; }
.quote-card .c { font-size: 12px; font-weight: 600; }

.sec-title { padding: 6px 14px 2px; font-size: 15px; font-weight: 700; }
.news-item { display: flex; gap: 12px; padding: 13px 14px; background: #fff; margin: 9px 12px 0; border-radius: 12px; cursor: pointer; }
.news-item .txt { flex: 1; }
.news-item .h { font-size: 14px; line-height: 1.45; font-weight: 600; color: #222; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.news-item .time { margin-top: 8px; font-size: 11px; color: #999; }
.news-item .thumb { width: 96px; height: 62px; border-radius: 8px; flex: none; background-size: cover; }

/* ---------- K线页 ---------- */
.kline-head { background: #fff; padding: 14px 14px 10px; }
.kline-head .row1 { display: flex; align-items: baseline; gap: 10px; }
.kline-head .sym { font-size: 17px; font-weight: 700; }
.kline-head .price { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.kline-head .chg { font-size: 13px; font-weight: 700; }
.kline-stats { display: flex; justify-content: space-between; padding: 14px 18px 16px; background: #fff; font-size: 11px; color: #999; }
.kline-stats span { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.kline-stats b { color: #333; font-weight: 600; font-size: 14px; font-variant-numeric: tabular-nums; }
.tf-tabs { display: flex; background: #fff; border-top: 1px solid #f4f4f4; padding: 0 6px; }
.tf-tabs .t { flex: 1; text-align: center; padding: 14px 0 11px; font-size: 13px; color: #666; position: relative; }
.tf-tabs .t.on { color: var(--gold-dark); font-weight: 700; }
.tf-tabs .t.on::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); bottom: 3px; width: 20px; height: 3px; border-radius: 2px; background: var(--gold); }
#kline-box { height: 340px; background: #fff; }
.kline-orders { background: #fff; margin-top: 10px; padding: 12px 14px 16px; }
.kline-orders .hd { font-size: 14px; font-weight: 700; border-left: 3px solid var(--gold); padding-left: 8px; margin-bottom: 10px; }
.order-row { display: flex; justify-content: space-between; font-size: 12px; padding: 7px 0; border-bottom: 1px dashed #f0f0f0; color: #555; }
.buy-bar {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; z-index: 60;
  width: 100%; max-width: 480px; display: flex; gap: 10px; padding: 8px 12px calc(8px + var(--safe-b));
  background: #fff; border-top: 1px solid #eee;
}
.buy-bar button { flex: 1; height: 46px; border-radius: 10px; color: #fff; font-size: 16px; font-weight: 700; letter-spacing: 2px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.buy-bar .arr { width: 11px; height: 9px; opacity: .95; }
.buy-bar .buyup { background: linear-gradient(135deg, #22c55e, #15803d); box-shadow: 0 3px 10px rgba(34,197,94,.28); }
.buy-bar .buydown { background: linear-gradient(135deg, #f87171, #dc2626); box-shadow: 0 3px 10px rgba(220,38,38,.28); }
.buy-bar button:active { transform: scale(.98); }

/* ---------- 价格闪烁 / 新闻详情 ---------- */
@keyframes flashUp { 0% { background: rgba(34,197,94,.30); } 100% { background: transparent; } }
@keyframes flashDown { 0% { background: rgba(220,38,38,.30); } 100% { background: transparent; } }
.flash-up { animation: flashUp .7s ease-out; border-radius: 6px; }
.flash-down { animation: flashDown .7s ease-out; border-radius: 6px; }
.news-detail { background: #fff; margin: 12px; border-radius: var(--radius); padding: 20px 18px; }
.news-detail h1 { font-size: 19px; line-height: 1.5; font-weight: 700; }
.news-detail .meta { display: flex; align-items: center; gap: 8px; margin: 12px 0 4px; font-size: 12px; color: #999; }
.news-detail .meta .src { color: #fff; font-size: 10px; border-radius: 3px; padding: 2px 7px; }
.news-detail .body { margin-top: 14px; }
.news-poster { width: 100%; border-radius: 10px; margin-top: 14px; display: block; object-fit: cover; }
.ne-row { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.ne-row label { width: 64px; flex: none; font-size: 13px; color: #666; padding-top: 8px; }
.ne-row textarea { width: 100%; border: 1px solid #d2d6de; border-radius: 3px; padding: 8px 10px; font-family: inherit; font-size: 13px; resize: vertical; }
.ne-row textarea:focus { border-color: var(--fa-blue); }
.ne-upload { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; background: #f4f6f8; border: 1px dashed #c3cbd4; border-radius: 4px; font-size: 13px; color: #555; cursor: pointer; }
.ne-upload:hover { border-color: var(--fa-blue); color: var(--fa-blue); }
.news-detail .body p { font-size: 15px; line-height: 1.9; color: #333; margin-bottom: 16px; text-align: justify; }
.ratio-bar-wrap { background: #fff; margin: 10px 12px 0; border-radius: 12px 12px 0 0; padding: 11px 14px 9px; }
.rb-labels { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; margin-bottom: 7px; }
.ratio-bar { height: 8px; border-radius: 4px; background: linear-gradient(90deg, #f87171, #dc2626); overflow: hidden; }
.ratio-bar i { display: block; height: 100%; background: linear-gradient(90deg, #15803d, #22c55e); border-radius: 4px 0 0 4px; }
.ex-cols { display: flex; gap: 0; margin: 0 12px; background: #fff; border-top: 1px solid #f5f5f5; }
.ex-cols .ob-wrap { flex: 1.12; margin: 0; border-radius: 0; padding: 2px 4px 8px; }
.ex-cols .tr-wrap { flex: 1; margin: 0; border-radius: 0; padding: 2px 4px 8px; border-left: 1px solid #f5f5f5; max-height: 430px; overflow-y: auto; }
.ob-row { display: flex; justify-content: space-between; align-items: center; font-size: 11px; padding: 4.5px 5px; position: relative; font-variant-numeric: tabular-nums; }
.ob-row > span { position: relative; z-index: 1; white-space: nowrap; }
.ob-row > span:first-child { width: 42%; }
.ob-row > span:nth-child(2) { width: 30%; text-align: right; color: #555; }
.ob-row > span:nth-child(3) { width: 28%; text-align: right; color: #999; }
.ob-head { color: #999; font-size: 10px; padding: 7px 5px; border-bottom: 1px solid #f5f5f5; }
.ob-row .bar { position: absolute; right: 0; top: 2px; bottom: 2px; border-radius: 3px; z-index: 0; }
.ob-row.ask .bar { background: rgba(220,38,38,.09); }
.ob-row.bid .bar { background: rgba(22,163,74,.09); }
.ob-row.mine { background: rgba(29,111,224,.12); border-radius: 4px; }
.ob-row.mine > span:first-child { font-weight: 800; }
.ob-mid { display: flex; justify-content: space-between; align-items: center; padding: 6px 5px; margin: 4px 0; background: #fafafa; border-radius: 6px; font-weight: 800; font-size: 14px; font-variant-numeric: tabular-nums; }
.ob-mid .spread { font-size: 10px; color: #999; font-weight: 500; }
.tr-row { display: flex; font-size: 11px; padding: 4.5px 5px; font-variant-numeric: tabular-nums; }
.tr-row.th { color: #999; font-size: 10px; border-bottom: 1px solid #f5f5f5; padding: 7px 5px; position: sticky; top: 0; background: #fff; }
.tr-row .t { width: 32%; color: #999; }
.tr-row > span:nth-child(2) { width: 36%; font-weight: 600; }
.tr-row .r { width: 32%; text-align: right; color: #555; }
.tr-row.mine { background: rgba(29,111,224,.12); border-radius: 4px; }
.mine-tag { display: inline-block; font-style: normal; font-size: 9px; color: #fff; background: var(--gold); border-radius: 3px; padding: 0 3px; margin-left: 3px; vertical-align: 1px; line-height: 12px; }
/* 币种信息（双列网格） */
.info-grid.cols2 { background: #fff; margin: 0 12px; border-top: 1px solid #f5f5f5; padding: 4px 14px 8px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; }
.info-grid.cols2 .ir { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px dashed #f0f0f0; font-size: 12px; font-variant-numeric: tabular-nums; }
.info-grid.cols2 .ir:nth-last-child(-n+2) { border-bottom: none; }
.info-grid.cols2 .ir .k { color: #888; flex: none; margin-right: 6px; }
.info-desc { background: #fff; margin: 8px 12px 0; border-radius: 12px; padding: 12px 16px; font-size: 12.5px; color: #555; line-height: 1.7; }
.info-desc b { color: #333; }

/* ---------- 秒合约 / 现货 ---------- */
.mode-seg { display: flex; background: #fff; margin: 8px 12px 0; border-radius: 10px; padding: 3px; box-shadow: 0 1px 6px rgba(0,0,0,.04); }
.mode-seg span { flex: 1; text-align: center; padding: 8px 0; font-size: 13.5px; color: #777; border-radius: 8px; cursor: pointer; font-weight: 600; }
.mode-seg span.on { background: linear-gradient(135deg, var(--gold-light), var(--gold)); color: #fff; box-shadow: 0 2px 8px rgba(29,111,224,.3); }
.sc-label { padding: 10px 18px 8px; font-size: 12px; color: #888; }
/* 套餐融合卡：结算时间/秒数/门槛/收益率 四行 */
.combo-row { display: flex; gap: 8px; padding: 2px 18px 6px; }
.combo-card { flex: 1; border: 1.5px solid #ececec; border-radius: 11px; padding: 10px 2px 9px; text-align: center; background: #fafbfc; cursor: pointer; transition: all .15s; }
.combo-card:active { transform: scale(.97); }
.combo-card.on { border-color: var(--gold); background: linear-gradient(160deg, #f2f7fd, #faf1d8); box-shadow: 0 3px 12px rgba(29,111,224,.22); }
.combo-card .c1 { font-size: 10.5px; color: #9aa0a6; }
.combo-card .c2 { font-size: 19px; font-weight: 800; color: #2b2f36; line-height: 1.25; font-variant-numeric: tabular-nums; }
.combo-card .c2 small { font-size: 11px; font-weight: 600; color: #888; margin-left: 1px; }
.combo-card .c3 { font-size: 11px; color: #8a8f98; margin-top: 3px; font-variant-numeric: tabular-nums; }
.combo-card .c4 { font-size: 11px; color: #9aa0a6; margin-top: 4px; display: flex; align-items: center; justify-content: center; gap: 4px; }
.combo-card .c4 b { color: var(--down); font-size: 14.5px; font-weight: 800; }
.combo-card.on .c4 b { color: #e11d48; }
.dur-row { display: flex; gap: 8px; padding: 0 18px 4px; }
.dur-row button { flex: 1; height: 38px; border-radius: 8px; background: #f6f6f8; color: #555; font-size: 14px; font-weight: 600; }
.dur-row button.on { background: linear-gradient(135deg, var(--gold-light), var(--gold)); color: #fff; box-shadow: 0 2px 8px rgba(29,111,224,.3); }
.tier-row { display: flex; gap: 7px; padding: 4px 18px 10px; }
.tier { flex: 1; border: 1.5px solid #eee; border-radius: 9px; padding: 8px 2px; text-align: center; background: #fafafa; }
.tier.on { border-color: var(--gold); background: #f2f7fd; }
.tier .tt { font-size: 12px; color: #888; font-weight: 600; }
.tier .tr { font-size: 13px; color: var(--up); font-weight: 800; margin-top: 3px; }
.tier.on .tr { color: #15803d; }
.fee-row { display: flex; justify-content: space-between; padding: 4px 18px 12px; font-size: 12px; color: #999; }
.fee-row b { color: #333; }
.fee-row b.up { color: var(--up); }
.pos-card .cd { font-size: 13px; font-weight: 700; color: var(--gold-dark); font-variant-numeric: tabular-nums; }
.pos-card .cd.late { color: var(--down); animation: cdBlink 1s step-end infinite; }
@keyframes cdBlink { 50% { opacity: .35; } }
/* 持仓进度条 */
.cd-wrap { margin-top: 12px; }
.cd-bar { height: 8px; border-radius: 5px; background: #efece2; overflow: hidden; }
.cd-bar i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--gold-light), var(--gold)); transition: width .5s linear; }
.cd-bar i.late { background: linear-gradient(90deg, #f87171, #dc2626); }
.cd-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }
.cd-hint { font-size: 11px; color: #b5b5b5; }
.spot-summary { display: flex; justify-content: space-around; background: #fff; margin: 12px; border-radius: var(--radius); padding: 14px; font-size: 13px; color: #888; box-shadow: 0 1px 6px rgba(0,0,0,.04); }
.spot-summary b { font-size: 16px; color: #333; }

/* ---------- 下单弹层 v2（方向色版式） ---------- */
.sheet-mask { position: fixed; inset: 0; background: rgba(15,18,25,.5); z-index: 90; display: flex; align-items: flex-end; justify-content: center; backdrop-filter: blur(2px); }
.sheet { width: 100%; max-width: 480px; background: #fff; border-radius: 18px 18px 0 0; animation: up .22s ease; }
@keyframes up { from { transform: translateY(60%); } to { transform: translateY(0); } }
.order-sheet { padding: 0 0 calc(20px + var(--safe-b)); }
.sheet-grip { width: 38px; height: 4px; border-radius: 2px; background: #e3e3e3; margin: 10px auto 0; }
.os-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 12px; }
.os-left { display: flex; align-items: center; gap: 8px; }
.os-badge { font-size: 13px; font-weight: 800; color: #fff; padding: 4px 12px; border-radius: 7px; letter-spacing: 1px; }
.order-sheet.buy .os-badge { background: linear-gradient(135deg, #22c55e, #15803d); box-shadow: 0 2px 8px rgba(34,197,94,.35); }
.order-sheet.sell .os-badge { background: linear-gradient(135deg, #f87171, #dc2626); box-shadow: 0 2px 8px rgba(220,38,38,.35); }
.os-sym { font-size: 17px; font-weight: 700; }
.os-lev { font-size: 10px; color: var(--gold-dark); background: #f7f0dc; border: 1px solid #ecdfb8; padding: 2px 8px; border-radius: 10px; font-weight: 600; }
.os-close { width: 26px; height: 26px; border-radius: 50%; background: #f2f2f4; color: #999; display: flex; align-items: center; justify-content: center; font-size: 12px; cursor: pointer; }
.os-close:active { background: #e8e8ea; }
.os-price-row { display: flex; align-items: stretch; margin: 0 18px 14px; background: #f8f8fb; border-radius: 12px; padding: 12px 0; }
.os-item { flex: 1; text-align: center; min-width: 0; }
.os-item .lb { font-size: 10px; color: #9aa0a6; }
.os-item .vl { font-size: 15px; font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.os-divider { width: 1px; background: #ececf1; margin: 2px 0; }
.amt-input { display: flex; align-items: center; gap: 8px; border: 1.5px solid #ececec; border-radius: 12px; height: 52px; padding: 0 14px; margin: 0 18px 12px; transition: border-color .15s; }
.amt-input:focus-within { border-color: var(--gold); }
.amt-input .cur { font-size: 13px; font-weight: 700; color: #aaa; letter-spacing: .5px; }
.amt-input input { flex: 1; font-size: 22px; font-weight: 800; background: transparent; min-width: 0; }
.amt-input input::placeholder { font-size: 14px; font-weight: 400; color: #c3c3c3; }
.amt-input .all { font-size: 12px; font-weight: 600; color: var(--gold-dark); background: #f7f0dc; padding: 4px 10px; border-radius: 12px; cursor: pointer; flex: none; }
.quick { display: flex; gap: 8px; margin: 0 18px 18px; }
.quick button { flex: 1; height: 36px; border-radius: 9px; background: #f6f6f8; color: #555; font-size: 13px; font-weight: 600; transition: all .12s; }
.quick button.on { background: linear-gradient(135deg, var(--gold-light), var(--gold)); color: #fff; box-shadow: 0 2px 8px rgba(29,111,224,.3); }
.os-submit { width: calc(100% - 36px); height: 50px; border-radius: 25px; color: #fff; font-size: 17px; font-weight: 700; letter-spacing: 3px; margin: 0 18px; }
.os-submit.buy { background: linear-gradient(135deg, #2fbd63, #15803d); box-shadow: 0 5px 16px rgba(34,197,94,.4); }
.os-submit.sell { background: linear-gradient(135deg, #f87171, #dc2626); box-shadow: 0 5px 16px rgba(220,38,38,.4); }
.os-submit:active { transform: scale(.98); }

/* ---------- 交易页 ---------- */
.seg-tabs { display: flex; background: #fff; border-bottom: 1px solid #f0f0f0; }
.seg-tabs .t { flex: 1; text-align: center; padding: 13px 0 11px; font-size: 14px; color: #666; position: relative; }
.seg-tabs .t.on { color: var(--text); font-weight: 700; }
.seg-tabs .t.on::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); bottom: 4px; width: 24px; height: 3px; border-radius: 2px; background: var(--gold); }
.pos-card { background: #fff; margin: 10px 12px 0; border-radius: 12px; padding: 13px 14px; box-shadow: 0 1px 6px rgba(0,0,0,.04); }
.pos-card .r1 { display: flex; justify-content: space-between; align-items: center; }
.pos-card .sym { font-size: 15px; font-weight: 700; }
.pos-card .side { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 4px; color: #fff; }
.pos-card .side.buy { background: var(--up); }
.pos-card .side.sell { background: var(--down); }
.pos-card .r2 { display: flex; justify-content: space-between; margin-top: 10px; font-size: 12px; color: #888; }
.pos-card .r2 b { color: #333; font-variant-numeric: tabular-nums; }
.pos-card .r3 { display: flex; justify-content: space-between; align-items: center; margin-top: 11px; }
.pos-card .profit { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pos-card .profit small { font-size: 11px; font-weight: 600; }
.empty { text-align: center; color: #b5b5b5; padding: 70px 0 30px; font-size: 13px; }
.empty .ico { font-size: 44px; margin-bottom: 12px; }

/* ---------- 我的 ---------- */
.mine-head {
  padding: 26px 18px 60px;
  background:
    radial-gradient(300px 160px at 80% 0%, rgba(215,238,255,.5), transparent 70%),
    linear-gradient(135deg, #4f8ef0, #2a66c8 60%, #1a4a9e);
  color: #fff; position: relative;
}
.mine-head .u { display: flex; align-items: center; gap: 13px; }
.mine-head .avatar { width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,.25); display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800; border: 2px solid rgba(255,255,255,.6); }
.mine-head .nick { font-size: 17px; font-weight: 700; }
.mine-head .acc { font-size: 12px; opacity: .85; margin-top: 4px; }
.mine-head .badge { display: inline-block; margin-left: 6px; font-size: 10px; background: rgba(255,255,255,.28); border-radius: 8px; padding: 1px 7px; }
.mine-balance {
  margin: -44px 12px 0; background: #fff; border-radius: var(--radius); padding: 16px;
  box-shadow: 0 4px 16px rgba(90,60,0,.10); position: relative; z-index: 2;
}
.mine-balance .lb { font-size: 12px; color: #999; }
.mine-balance .val { font-size: 26px; font-weight: 800; margin-top: 4px; font-variant-numeric: tabular-nums; }
.mine-balance .btns { display: flex; gap: 10px; margin-top: 14px; }
.mine-balance .btns button { flex: 1; height: 38px; border-radius: 19px; font-size: 14px; font-weight: 600; }
.mine-balance .btns .r { background: linear-gradient(135deg, var(--gold-light), var(--gold)); color: #fff; }
.mine-balance .btns .w { background: #f6f1e3; color: var(--gold-dark); }

/* 我的菜单（竖排列表） */
.menu-grid { display: flex; flex-direction: column; background: #fff; margin: 12px; border-radius: var(--radius); padding: 6px 0; box-shadow: 0 1px 6px rgba(0,0,0,.04); }
.menu-grid .m { display: flex; flex-direction: row; align-items: center; gap: 14px; padding: 15px 18px; font-size: 14px; color: #333; cursor: pointer; border-bottom: 1px solid #f5f5f5; position: relative; }
.menu-grid .m:last-child { border-bottom: none; }
.menu-grid .m:active { background: #faf7ee; }
.menu-grid .m::after { content: ''; width: 8px; height: 8px; border-top: 2px solid #c6c6c6; border-right: 2px solid #c6c6c6; transform: rotate(45deg); margin-left: auto; flex: none; }
.menu-grid .m .mi { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex: none; }

/* ---------- 通用表单页 ---------- */
.form-card { background: #fff; margin: 12px; border-radius: var(--radius); padding: 4px 16px; box-shadow: 0 1px 6px rgba(0,0,0,.04); }
.form-row { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid #f4f4f4; }
.form-row:last-child { border-bottom: none; }
.form-row .lb { width: 74px; font-size: 14px; color: #555; flex: none; }
.form-row input { flex: 1; font-size: 14px; background: transparent; }
.form-row .val { flex: 1; font-size: 14px; color: #333; text-align: right; font-variant-numeric: tabular-nums; }
.form-row .val.muted { color: #aaa; }
.form-card .gold-btn { margin: 16px 0; }

/* 理财产品 */
.fin-card { background: linear-gradient(135deg, #fff8e8, #eef5fe); margin: 12px 12px 0; border-radius: var(--radius); padding: 16px; box-shadow: 0 2px 10px rgba(160,120,20,.08); }
.fin-card .r1 { display: flex; align-items: center; gap: 8px; }
.fin-card .nm { font-size: 15px; font-weight: 700; }
.fin-card .tag { font-size: 10px; color: #fff; background: linear-gradient(90deg, #f08c2e, #e2591c); border-radius: 8px; padding: 2px 8px; }
.fin-card .apr { margin: 10px 0 2px; font-size: 26px; font-weight: 800; color: #d64511; font-variant-numeric: tabular-nums; }
.fin-card .apr small { font-size: 12px; font-weight: 600; }
.fin-card .meta { display: flex; gap: 18px; margin-top: 10px; font-size: 12px; color: #8a6d2f; }
.fin-card .buy { margin-top: 12px; }
/* 理财收益记录入口 */
.fin-records-entry { display: flex; align-items: center; gap: 12px; margin: 14px 12px 0; padding: 14px 16px; background: #fff; border: 1px solid #ecdfb8; border-radius: var(--radius); cursor: pointer; }
.fin-records-entry:active { background: #f2f7fd; }
.fin-records-entry .fr-ico { font-size: 20px; flex: none; }
.fin-records-entry .fr-txt { flex: 1; font-size: 14px; font-weight: 600; color: #333; display: flex; flex-direction: column; gap: 3px; }
.fin-records-entry .fr-txt small { font-size: 11.5px; color: #aaa; font-weight: 400; }
.fin-records-entry .fr-arrow { width: 8px; height: 8px; border-top: 2px solid var(--gold); border-right: 2px solid var(--gold); transform: rotate(45deg); flex: none; }
/* K线页持仓进度条 */
.kprog { padding: 2px 0 8px; border-bottom: 1px dashed #f0f0f0; margin-bottom: 4px; }
.kprog .cd-bar { height: 6px; }
.kprog .cd-meta { margin-top: 4px; }

/* ---------- 充值渠道 / 提现 ---------- */
.qk { flex: 1; height: 36px; border-radius: 8px; background: #f6f3ea; color: var(--gold-dark); font-size: 13px; font-weight: 600; }
.qk.on { background: var(--gold); color: #fff; }
.channel { display: flex; justify-content: space-between; align-items: center; border: 1.5px solid #eee; border-radius: 10px; padding: 12px 14px; margin: 0 0 10px; cursor: pointer; }
.channel.on { border-color: var(--gold); background: #f4f9ff; }
.channel .b { font-size: 14px; font-weight: 700; }
.channel .a { font-size: 13px; color: #444; margin-top: 3px; font-variant-numeric: tabular-nums; word-break: break-all; }
.channel .h { font-size: 11px; color: #999; margin-top: 3px; }
.channel .dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #ddd; flex: none; margin-left: 10px; position: relative; }
.channel.on .dot { border-color: var(--gold); }
.channel.on .dot::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--gold); }
.sel { flex: 1; border: none; background: transparent; font-size: 14px; color: #333; }
.fee-notice { background: linear-gradient(135deg, #f2f7fd, #faf3dd); border: 1px solid #ecdfb8; border-radius: var(--radius); margin: 12px; padding: 14px 16px; }
/* 充值页（纯客服引导） */
.recharge-cs { padding: 64px 26px 0; }
.rc-hero { text-align: center; }
.rc-av { width: 92px; height: 92px; margin: 0 auto; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #eef5fe, #ecd9a0 65%, #8fb8e8); border: 1px solid #ecdfb8; display: flex; align-items: center; justify-content: center; font-size: 40px; box-shadow: 0 8px 24px rgba(160,120,20,.2); }
.rc-t1 { margin-top: 22px; font-size: 19px; font-weight: 800; }
.rc-t2 { margin-top: 10px; font-size: 13px; color: #888; line-height: 1.75; }
.rc-hours { margin-top: 10px; font-size: 12px; color: var(--gold-dark); }
.recharge-cs .gold-btn { margin-top: 36px; }

/* 充值页客服入口 */
.cs-entry { display: flex; align-items: center; gap: 10px; margin: 0 12px; padding: 13px 16px; background: #fff; border: 1px solid #ecdfb8; border-radius: var(--radius); cursor: pointer; box-shadow: 0 1px 6px rgba(0,0,0,.04); }
.cs-entry:active { transform: scale(.99); background: #f2f7fd; }
.cs-entry .cs-ico { font-size: 20px; flex: none; }
.cs-entry .cs-txt { flex: 1; font-size: 13px; color: #8a7a55; }
.cs-entry .cs-txt b { color: var(--gold-dark); margin-left: 2px; }
.cs-entry .cs-arrow { width: 8px; height: 8px; border-top: 2px solid var(--gold); border-right: 2px solid var(--gold); transform: rotate(45deg); flex: none; }
.fee-notice b { color: var(--gold-dark); font-size: 13px; }
.fee-notice p { margin-top: 7px; font-size: 12.5px; color: #7a6a45; line-height: 1.6; }
.fee-notice p b { color: #b45309; }
.addr-row { align-items: flex-start; }
.addr-input { flex: 1; font-size: 13px; font-family: Consolas, monospace; word-break: break-all; min-height: 40px; border: 1px solid #e8e8e8; border-radius: 8px; padding: 10px 12px; background: #f9f9fb; }
.addr-input:focus { border-color: var(--gold); background: #fff; }
.addr-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 0 0 12px; font-size: 11.5px; color: #999; }
.addr-meta b { color: var(--gold-dark); }
.addr-meta .sc { display: inline-block; padding: 3px 10px; background: #f6f3ea; color: var(--gold-dark); border: 1px solid #ecdfb8; border-radius: 11px; font-size: 11px; cursor: pointer; }
.addr-meta .sc:active { background: var(--gold); color: #fff; }
.addr-meta .sc-t { color: #999; }
.addr-meta .muted { color: #bbb; }

/* 关于/客服 */
.about-hero { text-align: center; padding: 40px 0 10px; }
.about-hero .mark { width: 72px; height: 72px; margin: 0 auto; border-radius: 20px; background: radial-gradient(circle at 35% 30%, #dbeafe, #2f7ae5 62%, #123a75); display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 900; color: #e6f2ff; box-shadow: 0 6px 18px rgba(160,120,20,.35); }
.about-hero .nm { margin-top: 14px; font-size: 20px; font-weight: 800; letter-spacing: 2px; }
.about-hero .ver { margin-top: 6px; font-size: 12px; color: #999; }
.about-list { background: #fff; margin: 16px 12px; border-radius: var(--radius); overflow: hidden; }
.about-list .li { display: flex; justify-content: space-between; padding: 14px 16px; font-size: 14px; border-bottom: 1px solid #f5f5f5; color: #444; }
.about-list .li:last-child { border-bottom: none; }
.about-list .li .v { color: #999; font-size: 13px; }

/* ---------- 在线客服：落地页 + 排队 ---------- */
.cs-landing { padding: 26px 20px 0; }
.cs-hero { text-align: center; padding: 22px 0 18px; }
.cs-hero .big-av { position: relative; width: 84px; height: 84px; margin: 0 auto; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #dbeafe, #2f7ae5 62%, #123a75); display: flex; align-items: center; justify-content: center; font-size: 32px; font-weight: 900; color: #e6f2ff; box-shadow: 0 8px 24px rgba(160,120,20,.35); }
.cs-hero .big-av .pulse { position: absolute; right: 4px; bottom: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--up); border: 3px solid #fff; }
.cs-hero .nm { margin-top: 14px; font-size: 18px; font-weight: 800; }
.cs-hero .st { margin-top: 7px; font-size: 12px; color: var(--up); display: flex; align-items: center; justify-content: center; gap: 5px; }
.cs-hero .st i { width: 7px; height: 7px; border-radius: 50%; background: var(--up); }
.cs-info-card { background: #fff; border-radius: var(--radius); padding: 4px 16px; margin: 6px 0 20px; box-shadow: 0 1px 6px rgba(0,0,0,.04); }
.cs-info-card .row { display: flex; justify-content: space-between; padding: 13px 0; border-bottom: 1px solid #f4f4f4; font-size: 13px; color: #777; }
.cs-info-card .row:last-child { border-bottom: none; }
.cs-info-card .row b { color: #333; font-weight: 600; }
.cs-contact { box-shadow: 0 6px 18px rgba(29,111,224,.4); }
.cs-tip { margin-top: 16px; font-size: 12px; color: #999; text-align: center; line-height: 2.2; }
.cs-tip .mini { display: inline-block; margin: 0 4px; padding: 3px 10px; background: #fff; border: 1px solid #ecdfb8; color: var(--gold-dark); border-radius: 12px; cursor: pointer; }
.cs-queue { display: flex; flex-direction: column; align-items: center; justify-content: center; height: calc(100dvh - 48px - var(--tabbar-h) - var(--safe-b)); }
.q-ring { position: relative; width: 76px; height: 76px; }
.q-ring i { position: absolute; inset: 0; border-radius: 50%; border: 3px solid transparent; border-top-color: var(--gold); animation: qspin 1.2s linear infinite; }
.q-ring i:nth-child(2) { inset: 8px; border-top-color: var(--gold-light); animation-duration: 1.6s; animation-direction: reverse; }
.q-ring i:nth-child(3) { inset: 16px; border-top-color: #2a66c8; animation-duration: 2s; }
@keyframes qspin { to { transform: rotate(360deg); } }
.q-t1 { margin-top: 26px; font-size: 16px; font-weight: 700; }
.q-t2 { margin-top: 10px; font-size: 13px; color: #999; min-height: 18px; }
.q-bar { width: 200px; height: 6px; border-radius: 3px; background: #ececec; margin-top: 20px; overflow: hidden; }
.q-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-light), var(--gold)); border-radius: 3px; transition: width .8s ease; }
.ghost-btn { margin-top: 30px; height: 34px; padding: 0 24px; border-radius: 17px; background: #fff; color: #888; font-size: 13px; border: 1px solid #e2e2e2; }

/* ---------- 在线客服聊天 ---------- */
.chat-page { padding-bottom: 0 !important; }
.cs-online { position: absolute; right: 14px; top: 0; height: 48px; display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--up); }
.cs-online i { width: 7px; height: 7px; border-radius: 50%; background: var(--up); box-shadow: 0 0 0 3px rgba(22,163,74,.15); }
.chat-body { height: calc(100dvh - 48px - 44px - 60px - var(--tabbar-h) - var(--safe-b)); overflow-y: auto; padding: 14px 14px 6px; }
.chat-row { display: flex; gap: 8px; margin-bottom: 14px; align-items: flex-start; }
.chat-row.me { flex-direction: row-reverse; }
.cavatar { width: 34px; height: 34px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; }
.chat-row.cs .cavatar { background: linear-gradient(135deg, #4f8ef0, #1a4a9e); }
.chat-row.me .cavatar { background: linear-gradient(135deg, #5b6472, #2e3540); }
.bubble { max-width: 72%; padding: 10px 13px; border-radius: 12px; font-size: 14px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.chat-row.cs .bubble { background: #fff; border-top-left-radius: 3px; box-shadow:  0 1px 4px rgba(0,0,0,.05); }
.chat-row.me .bubble { background: linear-gradient(135deg, #4f8ef0, #2a66c8); color: #fff; border-top-right-radius: 3px; }
.chat-quick { position: fixed; left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px; bottom: calc(var(--tabbar-h) + var(--safe-b) + 60px); display: flex; gap: 8px; padding: 7px 12px; overflow-x: auto; background: var(--bg); z-index: 30; }
.chat-quick::-webkit-scrollbar { display: none; }
.chat-quick button { flex: none; height: 30px; padding: 0 13px; border-radius: 15px; background: #fff; color: var(--gold-dark); font-size: 12px; font-weight: 600; border: 1px solid #ecdfb8; }
.chat-input-bar { position: fixed; left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px; bottom: calc(var(--tabbar-h) + var(--safe-b)); display: flex; gap: 10px; padding: 9px 12px; background: #fff; border-top: 1px solid #f0f0f0; z-index: 30; }
.chat-input-bar input { flex: 1; height: 40px; border-radius: 20px; border: 1px solid #e8e8e8; padding: 0 16px; font-size: 14px; background: #f7f7f9; }
.chat-input-bar input:focus { border-color: var(--gold); background: #fff; }
.chat-input-bar .send-btn { width: 72px; height: 40px; border-radius: 20px; background: linear-gradient(135deg, var(--gold-light), var(--gold)); color: #fff; font-size: 14px; font-weight: 700; }

/* ---------- 语言选择器 ---------- */
.lang-mask { position: fixed; inset: 0; background: rgba(15,18,25,.45); z-index: 150; display: flex; align-items: center; justify-content: center; }
.lang-sheet { width: 270px; background: #fff; border-radius: 16px; padding: 18px 14px 12px; animation: fadein .18s ease; }
.lang-sheet .lt { text-align: center; font-size: 14px; font-weight: 700; margin-bottom: 12px; }
.lang-sheet .lopt { display: flex; justify-content: space-between; align-items: center; padding: 14px 14px; font-size: 15px; border-radius: 10px; cursor: pointer; color: #333; }
.lang-sheet .lopt span { color: var(--gold-dark); font-weight: 800; }
.lang-sheet .lopt.on { background: #faf6ea; font-weight: 700; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; top: 42%; transform: translateX(-50%); z-index: 200;
  background: rgba(20,20,20,.82); color: #fff; font-size: 14px; padding: 11px 20px;
  border-radius: 10px; max-width: 300px; text-align: center; pointer-events: none;
  animation: fadein .2s ease;
}
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

.fade-enter-active, .fade-leave-active { transition: opacity .2s; }
.fade-enter-from, .fade-leave-to { opacity: 0; }


/* ===== 活动弹窗（后台开启才显示） ===== */
.promo-mask { position:fixed; inset:0; background:rgba(10,16,28,.62); backdrop-filter:blur(3px); z-index:900; display:flex; align-items:center; justify-content:center; padding:24px; animation:promoIn .25s ease; }
@keyframes promoIn { from { opacity:0 } to { opacity:1 } }
.promo-card { position:relative; width:100%; max-width:330px; max-height:82vh; overflow:auto; border-radius:16px; padding:26px 20px 20px; background:linear-gradient(165deg,#f7fbff 0%,#eef4fd 62%,#d8ecfe 100%); box-shadow:0 18px 50px rgba(0,0,0,.35); text-align:center; animation:promoPop .28s cubic-bezier(.2,1.2,.4,1); }
@keyframes promoPop { from { transform:scale(.86); opacity:0 } to { transform:scale(1); opacity:1 } }
.promo-x { position:absolute; top:8px; right:10px; width:30px; height:30px; border:0; background:rgba(120,90,20,.12); color:#1552b0; border-radius:50%; font-size:18px; line-height:1; cursor:pointer; }
.promo-badge { display:inline-block; font-size:12px; color:#0c3c78; background:linear-gradient(90deg,#7cc4fb,#3aa0f0); border-radius:999px; padding:4px 14px; font-weight:700; letter-spacing:2px; margin-bottom:12px; }
.promo-img { width:100%; border-radius:10px; margin:2px 0 10px; max-height:220px; object-fit:cover; }
.promo-title { font-size:17.5px; font-weight:800; color:#16324f; margin-bottom:8px; line-height:1.4; }
.promo-body { font-size:13.8px; color:#3d5670; line-height:1.75; white-space:pre-wrap; text-align:left; margin-bottom:16px; word-break:break-word; }
.promo-btn { width:100%; border:0; border-radius:999px; padding:12px 0; font-size:15px; font-weight:700; color:#0d2b52; background:linear-gradient(90deg,#7cc4fb,#2f8fe8); box-shadow:0 6px 16px rgba(63,150,240,.4); cursor:pointer; }
.promo-btn:active { transform:translateY(1px); }


/* 关于我们：平台介绍段落 */
.about-intro { margin: 14px 16px 4px; padding: 16px 15px; background: linear-gradient(160deg, #f7fbff, #eef6ff); border: 1px solid #cfe4fb; border-radius: 12px; }
.about-intro p { font-size: 13.5px; line-height: 1.95; color: #274060; text-align: justify; margin-bottom: 12px; }
.about-intro p:last-child { margin-bottom: 0; }


/* ===== 底部导航：客服未读红色数字 ===== */
.tabbar .item .ico-wrap { position: relative; display: inline-flex; }
.tabbar .item .tab-badge { position:absolute; top:-7px; right:-13px; min-width:17px; height:17px; padding:0 4px; border-radius:999px; background:#f03e3e; color:#fff; font-size:10.5px; font-weight:700; line-height:17px; text-align:center; box-shadow:0 1px 3px rgba(0,0,0,.35); border:1.5px solid #fff; box-sizing:border-box; letter-spacing:0; }

/* ===== 学院栏目 ===== */
.academy-list { margin-top: 4px; }
.academy-item { display:flex; align-items:center; gap:10px; padding:13px 14px; background:#fff; border-radius:12px; margin-bottom:9px; box-shadow:0 1px 4px rgba(15,23,42,.05); cursor:pointer; }
.academy-item:active { transform:translateY(1px); }
.academy-item .ai-ico { font-size:16px; flex:none; }
.academy-item .ai-t { flex:1; min-width:0; font-size:13.8px; color:#26364a; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.academy-item .ai-go { width:15px; height:15px; color:#b8c2cf; flex:none; }
.academy-card { text-align:left; }
.academy-card .ac-h1 { font-size:16.5px; font-weight:800; color:#16324f; margin:4px 0 10px; line-height:1.45; }
.academy-card .ac-body { font-size:13.6px; color:#3d5670; line-height:1.8; white-space:pre-wrap; margin-bottom:16px; word-break:break-word; max-height:56vh; overflow:auto; }
.academy-card .promo-badge { margin-bottom:6px; }


/* ===== 我的页：高端金融 VIP 等级头像区（深蓝鎏金） ===== */
.mine-head {
  background:
    radial-gradient(340px 170px at 82% -8%, rgba(63,150,240,.38), transparent 68%),
    radial-gradient(240px 140px at 6% 110%, rgba(64,120,190,.35), transparent 70%),
    linear-gradient(135deg, #0a1626 0%, #122942 45%, #1b3a5c 72%, #27527c 100%);
}
.mine-head::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 52%, rgba(255,255,255,.05) 53%, transparent 55%, rgba(255,255,255,.04) 66%, transparent 68%);
}
.mine-head .u { position: relative; z-index: 1; }
.mine-head .avatar {
  width: 58px; height: 58px; font-size: 24px;
  background: linear-gradient(160deg, #2f5580 0%, #16324f 75%);
  border: 2px solid rgba(120,180,250,.9);
  box-shadow: 0 0 0 3px rgba(120,180,250,.16), 0 8px 18px rgba(0,0,0,.4);
  color: #dbeafe; position: relative;
}
.mine-head .nick { color: #fff; }
.mine-head .acc { color: rgba(255,255,255,.72); }

/* VIP 徽标：每级专属配色（青铜→白银→黄金→铂金→钻石紫→黑金） */
.vip-badge {
  position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%);
  font-size: 9.5px; font-weight: 800; letter-spacing: .6px; line-height: 1.4;
  padding: 2px 8px; border-radius: 999px; color: #fff; white-space: nowrap;
  border: 1.5px solid rgba(255,255,255,.9); box-shadow: 0 3px 8px rgba(0,0,0,.45);
}
.vip-badge.v0 { background: linear-gradient(135deg, #64748b, #94a3b8); }
.vip-badge.v1 { background: linear-gradient(135deg, #9a5b1e, #e2a55c); }
.vip-badge.v2 { background: linear-gradient(135deg, #77828f, #ccd6e0); color: #2f3d4c; }
.vip-badge.v3 { background: linear-gradient(135deg, #b8860b, #ffdd6e); color: #4a3300; }
.vip-badge.v4 { background: linear-gradient(135deg, #46618a, #a9cbe8); color: #10263c; }
.vip-badge.v5 { background: linear-gradient(135deg, #5b21b6, #b391f7); }
.vip-badge.v6 { background: linear-gradient(135deg, #0b0b0b, #453a12); color: #f7c948; border-color: #d9b23c; }


/* 撤回占位（已读/撤回按钮已按需求关闭，仅保留占位样式） */
.bubble.recalled { background: #f1f3f5 !important; color: #98a2b3 !important; font-style: italic; border: 1px dashed #ccd3db; }


/* ===== 页面切换动效（高端大气：淡入上浮） ===== */
.page-enter-active, .page-leave-active { transition: opacity .3s cubic-bezier(.4,0,.2,1), transform .3s cubic-bezier(.4,0,.2,1); }
.page-enter-from { opacity: 0; transform: translateY(16px); }
.page-leave-to { opacity: 0; transform: translateY(-8px); }

/* ===== 活动弹窗：雾蒙蒙磨砂透明背景 ===== */
.promo-mask {
  background: rgba(244, 248, 252, .58);
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
}

/* ===== 活动详情页（马上参与进入，右上角可关闭） ===== */
.activity-mask {
  position: fixed; inset: 0; z-index: 960;
  background: rgba(242, 247, 252, .72);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  display: flex;
}
.activity-card {
  position: relative; margin: 0 auto; width: 100%; max-width: 480px; min-height: 100vh;
  background: linear-gradient(180deg, #ffffff 0%, #f3f8fd 100%);
  display: flex; flex-direction: column;
  box-shadow: 0 0 60px rgba(10, 40, 90, .28);
  animation: actIn .34s cubic-bezier(.2,.9,.3,1);
}
@keyframes actIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.ac-bar {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 16px; background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px); border-bottom: 1px solid #e3edf8;
}
.ac-t { font-weight: 800; font-size: 16.5px; color: #16324f; letter-spacing: 3px; }
.ac-bar .promo-x { position: static; }
.ac-body { flex: 1; overflow: auto; padding: 18px 18px 26px; }
.ac-body .promo-img { width: 100%; border-radius: 12px; margin-bottom: 14px; }
.ac-body .promo-title { font-size: 18px; font-weight: 800; color: #16324f; margin-bottom: 10px; line-height: 1.45; }
.ac-body .promo-text { font-size: 14px; line-height: 1.95; color: #3d5670; white-space: pre-wrap; word-break: break-word; }
.ac-foot { padding: 12px 18px calc(20px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid #eef4fa; }

/* logo 图片化标记 */
img.mark { object-fit: cover; }

/* ---------- 用户协议 / 隐私政策文档页 ---------- */
.legal-doc { margin: 12px; background: #fff; border-radius: var(--radius); padding: 22px 18px 26px; }
.legal-doc .ld-head { text-align: center; padding-bottom: 16px; border-bottom: 1px solid #eaf0f7; }
.legal-doc .ld-brand { font-size: 11.5px; letter-spacing: 2px; color: #9aa7b8; }
.legal-doc .ld-head h1 { font-size: 20px; font-weight: 800; color: #16233a; margin: 8px 0 8px; letter-spacing: 1px; }
.legal-doc .ld-meta { font-size: 12px; color: #98a2b3; }
.legal-doc .ld-intro { font-size: 14px; line-height: 1.95; color: #3a4a63; text-align: justify; margin: 16px 0 4px; }
.legal-doc .ld-sec { margin-top: 20px; }
.legal-doc .ld-sec h2 {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 15.5px; font-weight: 700; color: #16324f; line-height: 1.5; margin-bottom: 9px;
}
.legal-doc .ld-sec h2 .no {
  flex: none; width: 21px; height: 21px; margin-top: 2px; border-radius: 7px;
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  color: #fff; font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.legal-doc .ld-sec p {
  font-size: 14px; line-height: 1.95; color: #40506a; text-align: justify;
  margin-bottom: 10px; padding-left: 30px;
}
.legal-doc .ld-sec p:last-child { margin-bottom: 0; }
.legal-doc .ld-end {
  margin-top: 24px; padding-top: 14px; border-top: 1px dashed #e3e8f0;
  font-size: 12px; color: #a3adbd; text-align: center;
}

/* 注册页：协议勾选行（登录页深蓝背景，用浅色文字） */
.agree-row {
  display: flex; align-items: flex-start; gap: 8px; margin: 2px 4px 0;
  font-size: 12.5px; line-height: 1.65; color: rgba(255,255,255,.88);
  text-shadow: 0 1px 4px rgba(0,25,60,.4); cursor: pointer; user-select: none;
}
.agree-row .ck {
  flex: none; width: 16px; height: 16px; margin-top: 2px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.6); box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: transparent; transition: .18s;
}
.agree-row .ck.on { background: #ffd979; border-color: #ffd979; color: #14407f; font-weight: 800; }
.agree-row a { color: #ffd979; text-decoration: none; font-weight: 600; }


/* ===== 页面切换撕裂感修复：预留滚动条槽位，切换时不再左右偏移 ===== */
html { scrollbar-gutter: stable; }

/* ===== 夜间纯黑主题（data-theme="night"） ===== */
html[data-theme="night"] { color-scheme: dark; }
html[data-theme="night"] body,
html[data-theme="night"] #app,
html[data-theme="night"] .page { background: #000; }
html[data-theme="night"] #app { box-shadow: none; }

/* 顶栏 / 导航 / 底栏 / 分类条 */
html[data-theme="night"] .navbar,
html[data-theme="night"] .home-top { background: #0a0a0b; border-bottom-color: #1e2023; }
html[data-theme="night"] .navbar .title,
html[data-theme="night"] .home-top .logo { color: #f4f4f6; }
html[data-theme="night"] .navbar .back { color: #cfd4da; }
html[data-theme="night"] .home-top .lang,
html[data-theme="night"] .home-top .bell { color: #9aa2ad; }
html[data-theme="night"] .tabbar { background: #0a0a0b; border-top-color: #1e2023; }
html[data-theme="night"] .tabbar .item { color: #7d8590; }
html[data-theme="night"] .tabbar .item.active { color: #4f9cff; }
html[data-theme="night"] .cat-tabs { background: #0a0a0b; }
html[data-theme="night"] .cat-tabs .t { color: #8b9199; }
html[data-theme="night"] .cat-tabs .t.on { color: #f4f4f6; }

/* 首页：行情卡 / 新闻 / 学院 / 标题 */
html[data-theme="night"] .quote-card,
html[data-theme="night"] .news-item,
html[data-theme="night"] .academy-item { background: #0e0f11; border: 1px solid #1e2023; box-shadow: none; }
html[data-theme="night"] .quote-card .n,
html[data-theme="night"] .news-item .h,
html[data-theme="night"] .academy-item .ai-t { color: #e8eaed; }
html[data-theme="night"] .news-item .time,
html[data-theme="night"] .academy-item .ai-go { color: #7d8590; }
html[data-theme="night"] .sec-title { color: #f4f4f6; }
html[data-theme="night"] .empty { color: #7d8590; }
html[data-theme="night"] .news-item .thumb { filter: brightness(.8); }

/* K线页 */
html[data-theme="night"] .kline-head,
html[data-theme="night"] .kline-stats,
html[data-theme="night"] .tf-tabs,
html[data-theme="night"] #kline-box,
html[data-theme="night"] .kline-orders,
html[data-theme="night"] .ex-cols,
html[data-theme="night"] .tr-row.th,
html[data-theme="night"] .ratio-bar-wrap { background: #0e0f11; }
html[data-theme="night"] .kline-head .sym,
html[data-theme="night"] .kline-stats b { color: #e8eaed; }
html[data-theme="night"] .kline-stats span { color: #7d8590; }
html[data-theme="night"] .tf-tabs { border-top-color: #1e2023; }
html[data-theme="night"] .tf-tabs .t.on { color: #4f9cff; }
html[data-theme="night"] .buy-bar { background: #0a0a0b; border-top-color: #1e2023; }
html[data-theme="night"] .info-grid.cols2,
html[data-theme="night"] .info-desc { background: #0e0f11; color: #9aa2ad; border-color: #1e2023; }

/* 交易 / 现货 / 表单 / 记录 */
html[data-theme="night"] .seg-tabs,
html[data-theme="night"] .pos-card,
html[data-theme="night"] .mode-seg,
html[data-theme="night"] .spot-summary,
html[data-theme="night"] .sheet,
html[data-theme="night"] .form-card,
html[data-theme="night"] .combo-card,
html[data-theme="night"] .fin-records-entry,
html[data-theme="night"] .cs-entry,
html[data-theme="night"] .about-list,
html[data-theme="night"] .ghost-btn { background: #0e0f11; border: 1px solid #1e2023; color: #e8eaed; box-shadow: none; }
html[data-theme="night"] .pos-card .sym,
html[data-theme="night"] .combo-card .cd-title { color: #e8eaed; }
html[data-theme="night"] input,
html[data-theme="night"] textarea { background: #141517; color: #e8eaed; }
html[data-theme="night"] input::placeholder,
html[data-theme="night"] textarea::placeholder { color: #6b7178; }
html[data-theme="night"] .addr-input,
html[data-theme="night"] .chat-input-bar input { background: #141517; color: #e8eaed; }

/* 我的页 */
html[data-theme="night"] .mine-balance,
html[data-theme="night"] .menu-grid { background: #0e0f11; }
html[data-theme="night"] .menu-grid .m { background: #0e0f11; border: 1px solid #1e2023; color: #e8eaed; }
html[data-theme="night"] .mine-balance .lb { color: #9aa2ad; }
html[data-theme="night"] .mine-balance .val { color: #f4f4f6; }
html[data-theme="night"] .mine-head { background: linear-gradient(180deg, #050607 0%, #0b0d10 100%); }
html[data-theme="night"] .mine-head::after { opacity: .4; }

/* 客服页 / 聊天 */
html[data-theme="night"] .cs-hero,
html[data-theme="night"] .cs-info-card { background: #0e0f11; border: 1px solid #1e2023; }
html[data-theme="night"] .cs-info-card .row { border-bottom-color: #1a1c1f; }
html[data-theme="night"] .cs-tip { color: #9aa2ad; }
html[data-theme="night"] .cs-tip .mini,
html[data-theme="night"] .chat-quick button { background: #141517; color: #cfd6dd; border: 1px solid #24262a; }
html[data-theme="night"] .chat-row.cs .bubble { background: #16181b; color: #e8eaed; }
html[data-theme="night"] .chat-input-bar { background: #0a0a0b; border-top-color: #1e2023; }
html[data-theme="night"] .quick-bar { background: #0a0a0b; border-top: 1px solid #1e2023; }
html[data-theme="night"] .gold-btn.plain { background: #141517; color: #7db1ff; }
html[data-theme="night"] .lang-sheet { background: #141517; }
html[data-theme="night"] .lang-sheet .lt,
html[data-theme="night"] .lang-sheet .lopt { color: #e8eaed; }
html[data-theme="night"] .lang-sheet .lopt.on { background: #1e2023; color: #4f9cff; }

/* 资讯详情 / 法律文档 */
html[data-theme="night"] .news-detail,
html[data-theme="night"] .legal-doc { background: #0e0f11; color: #d7dbe0; }
html[data-theme="night"] .news-detail h1 { color: #f4f4f6; }

/* 活动弹窗 / 详情页夜间 */
html[data-theme="night"] .promo-mask,
html[data-theme="night"] .activity-mask { background: rgba(0, 0, 0, .62); }
html[data-theme="night"] .promo-card,
html[data-theme="night"] .activity-card { background: #111214; }
html[data-theme="night"] .promo-title,
html[data-theme="night"] .ac-t,
html[data-theme="night"] .ac-body .promo-title { color: #f4f4f6; }
html[data-theme="night"] .promo-body,
html[data-theme="night"] .ac-body .promo-text { color: #aeb6bf; }
html[data-theme="night"] .ac-bar { background: #0e0f11; border-bottom-color: #1e2023; }
html[data-theme="night"] .ac-foot { background: #0e0f11; border-top-color: #1e2023; }
html[data-theme="night"] .academy-card .ac-h1,
html[data-theme="night"] .academy-card .ac-body { color: #d7dbe0; }

/* 登录页夜间：整体压黑，保留场景轮廓 */
html[data-theme="night"] .login-page { background: #000; }
html[data-theme="night"] .login-page .wave,
html[data-theme="night"] .login-page .sun { opacity: .12; }
html[data-theme="night"] .login-form .field { background: #141517; }
html[data-theme="night"] .login-form .field input { color: #e8eaed; }
html[data-theme="night"] .login-links a { color: #aeb6bf; }

/* ===== 安装提示行（登录页）+ 主题切换按钮 ===== */
.install-hint { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 16px; }
.ih-txt { font-size: 13.5px; color: rgba(255,255,255,.94); text-shadow: 0 1px 5px rgba(0,25,65,.5); letter-spacing: 1px; }
.ih-btn { padding: 7px 22px; border-radius: 999px; font-size: 13.5px; font-weight: 800; color: #0d2b52; background: linear-gradient(135deg, #a9d1ff, #4f9cff); box-shadow: 0 5px 14px rgba(60,140,250,.45); letter-spacing: 2px; }
.ih-btn:active { transform: translateY(1px); }
.install-hint.done .ih-txt { opacity: .85; }
.theme-btn { cursor: pointer; font-size: 15px; line-height: 1; padding: 2px 4px; }


/* 安装入口：登录页左下角 */
.install-hint.corner {
  position: absolute;
  left: 14px;
  bottom: calc(4cm + 16px + env(safe-area-inset-bottom, 0px));   /* 上移4厘米 */
  margin-top: 0;
  justify-content: flex-start;
  gap: 8px;
  z-index: 3;
}
.install-hint.corner .ih-txt { font-size: 12.5px; letter-spacing: .5px; }
.install-hint.corner .ih-btn { padding: 6px 16px; font-size: 12.5px; }

/* 登录页协议入口 */
.login-agree {
  position: relative;
  z-index: 2;
  text-align: center;
  margin-top: 14px;
  font-size: 11.5px;
  color: rgba(255, 255, 255, .88);
  text-shadow: 0 1px 4px rgba(0, 25, 65, .45);
}
.login-agree a { text-decoration: underline; text-underline-offset: 2px; }
html[data-theme="night"] .login-agree { color: #cfd6dd; }

/* 底部安全区: 为左下角安装入口让位，避免协议行重叠 */
.login-page { padding-bottom: 60px; }
.login-brand { margin-top: 30vh; }

/* ===== 夜间模式 · 卡片描边体系 =====
 * 纯黑背景上给所有卡片加统一的1px清晰边框（#24282f），页面结构一目了然，两侧轮廓分明 */
html[data-theme="night"] .quote-card { background: #0e0f11; border: 1px solid #24282f; box-shadow: none; }
html[data-theme="night"] .news-item { background: #0e0f11; border: 1px solid #24282f; box-shadow: none; }
html[data-theme="night"] .academy-item { background: #0e0f11; border: 1px solid #24282f; box-shadow: none; }
html[data-theme="night"] .news-detail { background: #0e0f11; border: 1px solid #24282f; color: #cfd6dd; }
html[data-theme="night"] .legal-doc { background: #0e0f11; border: 1px solid #24282f; }
html[data-theme="night"] .about-list { background: #0e0f11; border: 1px solid #24282f; }
html[data-theme="night"] .about-intro { background: #12141a; border: 1px solid #24282f; color: #cfd6dd; }

/* 我的页 */
html[data-theme="night"] .mine-balance { background: #0e0f11; border: 1px solid #24282f; }
html[data-theme="night"] .menu-grid { background: #0e0f11; border: 1px solid #24282f; }
html[data-theme="night"] .menu-grid .m { border: none; border-bottom: 1px solid #1a1d22; }
html[data-theme="night"] .menu-grid .m:last-child { border-bottom: none; }
html[data-theme="night"] .form-card { background: #0e0f11; border: 1px solid #24282f; }
html[data-theme="night"] .spot-summary { background: #0e0f11; border: 1px solid #24282f; }
html[data-theme="night"] .pos-card { background: #0e0f11; border: 1px solid #24282f; }
html[data-theme="night"] .seg-tabs { background: #0e0f11; border-bottom-color: #24282f; }

/* 交易/K线页：整叠面板做外框，节与节之间不画双线 */
html[data-theme="night"] .kline-head { background: #0e0f11; border: 1px solid #24282f; border-bottom: none; }
html[data-theme="night"] .kline-stats { background: #0e0f11; border-left: 1px solid #24282f; border-right: 1px solid #24282f; }
html[data-theme="night"] .tf-tabs { background: #0e0f11; border-top-color: #1a1d22; border-left: 1px solid #24282f; border-right: 1px solid #24282f; }
html[data-theme="night"] #kline-box { background: #0a0a0b; border-left: 1px solid #24282f; border-right: 1px solid #24282f; }
html[data-theme="night"] .kline-orders { background: #0e0f11; border: 1px solid #24282f; border-top: none; }
html[data-theme="night"] .ob-mid { background: #16191e; }
html[data-theme="night"] .tr-row.th { background: #0e0f11; border-bottom-color: #24282f; }
html[data-theme="night"] .ratio-bar-wrap { background: #0e0f11; border-left: 1px solid #24282f; border-right: 1px solid #24282f; border-top: 1px solid #24282f; border-radius: 12px 12px 0 0; }
html[data-theme="night"] .ex-cols { background: #0e0f11; border-top-color: #24282f; border-left: 1px solid #24282f; border-right: 1px solid #24282f; }
html[data-theme="night"] .info-grid.cols2 { background: #0e0f11; border-top-color: #24282f; border-left: 1px solid #24282f; border-right: 1px solid #24282f; }
html[data-theme="night"] .mode-seg { background: #0e0f11; border: 1px solid #24282f; box-shadow: none; }
html[data-theme="night"] .combo-card { background: #12141a; border: 1px solid #2a2e36; }
html[data-theme="night"] .dur-row button { background: #1a1d22; color: #cfd6dd; }
html[data-theme="night"] .tier { background: #12141a; border: 1px solid #2a2e36; color: #cfd6dd; }

/* 理财 / 充提 / 客服入口 */
html[data-theme="night"] .fin-card { background: #12141a; border: 1px solid #24282f; box-shadow: none; }
html[data-theme="night"] .fin-records-entry { background: #0e0f11; border: 1px solid #24282f; color: #cfd6dd; }
html[data-theme="night"] .cs-entry { background: #0e0f11; border: 1px solid #24282f; color: #cfd6dd; box-shadow: none; }
html[data-theme="night"] .cs-info-card { background: #0e0f11; border: 1px solid #24282f; }
html[data-theme="night"] .cs-tip .mini { background: #141517; border: 1px solid #24282f; color: #cfd6dd; }
html[data-theme="night"] .fee-notice { background: #12141a; border: 1px solid #24282f; color: #cfd6dd; }
html[data-theme="night"] .addr-input { background: #0e0f11; border: 1px solid #24282f; color: #e8eaed; }
html[data-theme="night"] .sheet { background: #111214; border-top: 1px solid #24282f; }
html[data-theme="night"] .lang-sheet { background: #141517; border: 1px solid #24282f; }

/* 客服聊天 */
html[data-theme="night"] .chat-row.cs .bubble { background: #16181b; border: 1px solid #24282f; }
html[data-theme="night"] .bubble.recalled { background: #141517 !important; border: 1px dashed #2a2e36; }

/* 登录/注册页输入框 */
html[data-theme="night"] .login-form .field { background: #141517; border: 1px solid #212429; }

/* 宽屏（电脑浏览器）：内容列两侧加分界线，不再孤零零浮在黑底上 */
@media (min-width: 500px) {
  html[data-theme="night"] #app { border-left: 1px solid #23262b; border-right: 1px solid #23262b; }
  #app { border-left: 1px solid #e7e9ec; border-right: 1px solid #e7e9ec; }
}