自动抄到每个 | ，不用手写一遍。 */
.table thead { display: none; }
.table, .table tbody, .table tr, .table td { display: block; width: 100%; }
.table tr { border: 1px solid var(--line); border-radius: 12px; background: var(--bg2);
padding: 8px 12px; margin-bottom: 10px; }
.table tr:hover td { background: transparent; }
.table td { border: none; padding: 6px 0; display: flex; align-items: center;
justify-content: space-between; gap: 12px; text-align: right; font-size: 13.5px; }
.table td + td { border-top: 1px solid rgba(38,50,74,.55); }
.table td::before { content: attr(data-label); color: var(--muted); font-size: 12.5px;
flex: none; text-align: left; font-weight: 400; }
.table td:not([data-label])::before { content: none; }
.table td[colspan] { display: block; text-align: center; padding: 14px 0; }
.table td[colspan]::before { content: none; }
.table td[colspan] + td { border-top: none; }
/* 卡片化之后卡片本身就是容器，别再叠一层横向滚动 */
.table-wrap { overflow: visible; }
/* 弹窗：底部抽屉式，手机上更容易够到按钮 */
.modal-bg { align-items: flex-end; padding: 0; }
.modal { width: 100%; max-width: 100%; border-radius: 20px 20px 0 0; border-bottom: none;
max-height: 92vh; padding: 20px 18px calc(20px + env(safe-area-inset-bottom)); }
.modal-actions { bottom: calc(-20px - env(safe-area-inset-bottom));
margin: 18px -18px calc(-20px - env(safe-area-inset-bottom));
padding: 14px 18px calc(14px + env(safe-area-inset-bottom)); border-radius: 0;
justify-content: center; }
/* 公告弹窗在手机上也是居中的大框：正文长，贴底抽屉读起来太憋屈。 */
.modal-bg.ann-bg { align-items: center; padding: 14px; }
.modal-bg.ann-bg .modal { width: 100%; max-width: 100%; border-radius: 18px;
border-bottom: 1px solid var(--line); max-height: 84vh; padding: 22px 18px; }
/* 手机端按钮居中（电脑端保持原来的靠右）。 */
.plan-cta { flex-direction: column; text-align: center; }
.plan-cta .plan-cta-text { min-width: 0; }
/* 登录页是整屏唯一的入口，不该是「贴在底部的半截抽屉」——
上面留一大片黑会让第一次进来的人以为没加载完。改成竖直居中的完整卡片，
再用三行卖点把高度撑起来。 */
#authScreen { align-items: center; padding: 16px; }
#authScreen .modal { border-radius: 18px; border-bottom: 1px solid var(--line);
padding: 22px 18px; max-height: 94vh; margin: 0 auto; }
#authScreen .auth-hero { display: block; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
#authScreen .tabs button { font-size: 14px; }
/* 触控尺寸：按钮至少 42px 高，别让用户戳不中 */
.btn { min-height: 42px; padding: 10px 16px; }
.btn.sm { min-height: 38px; padding: 8px 12px; }
.tabs button { min-height: 42px; }
/* 手机端标签只放两三个字，别折成两三行 —— 折了看着就像排版坏了 */
.tabs button { white-space: nowrap; }
/* 后台 6 个页签在小屏上排成两列，别挤成一条看不清的细缝。 */
.tabs.admin-tabs button { min-width: 0; flex: 1 1 30%; padding: 8px 10px; font-size: 13px; }
/* 「复制范围」三选一：三个 6 字标签等分会挤成一团，手机端改成整行竖排的选项，
右边用圆圈标出选中的那个 —— 既是更大的触控面，也一眼看得出选的是哪一项。 */
.copy-seg { grid-template-columns: 1fr; gap: 6px; }
.copy-seg button { display: flex; align-items: center; justify-content: space-between; gap: 10px;
min-height: 46px; padding: 11px 13px; text-align: left; }
.copy-seg button::after { content: ''; flex: none; width: 18px; height: 18px; border-radius: 50%;
border: 1.5px solid var(--line); }
.copy-seg button.active::after { border-color: var(--accent);
background: radial-gradient(circle, var(--accent) 0 5px, transparent 6px); }
/* 页头：手机上标题和按钮别挤在一条、也别让按钮孤零零挂在左边 —— 按钮通栏居中。 */
.page-head { flex-direction: column; align-items: stretch; gap: 12px; }
.page-head-main { min-width: 0; }
.page-head > .btn { width: 100%; }
.side .item { min-height: 46px; }
/* 栅格一律单列，指标卡两列 */
.stat-row { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.stat { padding: 13px; }
.stat .v { font-size: 20px; }
.grid2, .grid3, .grid.cols-2, .grid.cols-3, .side-by { grid-template-columns: 1fr; }
.metric { grid-template-columns: repeat(2, 1fr); }
.panel { padding: 14px; border-radius: 12px; }
/* 总览：资产大字收一号；小指标两列，运行任务独占一行。 */
.ov-assets { padding: 15px 16px; }
.ov-assets-num { font-size: 27px; }
.ov-curve { height: 68px; }
.ov-mini { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.ov-mini-card:nth-child(3) { grid-column: span 2; }
/* 持仓卡片自己管内外边距，别被上面的 .panel 覆盖回 14px。 */
.ov-pospanel { padding: 0; }
.ov-pos-head, .pos-row, .ov-pos-foot { padding-left: 14px; padding-right: 14px; }
/* 广场：手机上单列，卡片别那么高（简介只留 2 行，6 个指标 2 列）。 */
.plaza-grid { grid-template-columns: 1fr; gap: 12px; }
.trader-card { padding: 14px; }
.trader-card .top > .chip { top: 14px; right: 14px; }
.tr-metrics { grid-template-columns: repeat(2, 1fr); }
/* 手机端「查看详情」是文字链，太细按不准 —— 撑到 30px 的触控高度。 */
.tr-pos-more { padding: 5px 0; margin: -5px 0; }
/* 长表单分节卡片收紧一点，手机上少占横向空间。 */
.fgroup { padding: 12px 12px 2px; }
.row-flex { gap: 8px; }
/* 表单里并排的两个按钮改成整行，避免挤出屏幕 */
.row-flex > .btn { flex: 1 1 auto; }
/* 账户信息底部原来一行塞三个按钮：改密码、退出、关闭挤在一起，主次也不分。
手机上改成「改密码」独占一行（它是这一屏的主操作），退出 / 关闭平分下一行。 */
.acc-foot { flex-wrap: wrap; gap: 10px; }
.acc-foot #accSavePwd { flex: 1 1 100%; }
.acc-foot .acc-foot-spacer { display: none; }
.acc-foot #accLogout, .acc-foot [data-close] { flex: 1 1 0; min-width: 0; }
/* 提示条贴在底部导航上方 */
.toast { left: 12px; right: 12px; bottom: calc(84px + env(safe-area-inset-bottom)); font-size: 13.5px; }
/* 抢位历史：手机上一条也就两三行，字号和按钮收一点，五条不至于刷满屏 */
.grab-mini { gap: 6px; padding: 6px 0; }
.grab-mini .small { font-size: 11.5px; }
.grab-mini .btn { min-height: 34px; padding: 4px 10px; font-size: 12.5px; }
.grab-hist-foot .btn { min-height: 34px; padding: 4px 10px; font-size: 12.5px; }
/* 首页 */
.nav .wrap { height: 56px; padding: 0 14px; gap: 12px; }
.nav .links { display: none; }
.brand { font-size: 18px; }
.hero { padding: 46px 0 34px; }
.hero p.sub { font-size: 15px; }
.hero .cta { flex-direction: column; }
.hero .cta .btn { width: 100%; }
/* 手机端：把控制台的样子直接摆出来（矢量图，任何分辨率都清晰）。 */
.hero-visual { display: block; position: relative; margin: 26px auto 4px; width: 100%; max-width: 262px; }
.hero-visual::before { content: ''; position: absolute; inset: -10% -24% -4%; border-radius: 50%; z-index: 0;
background: radial-gradient(closest-side, rgba(240,185,11,.26), rgba(47,124,246,.12) 62%, rgba(47,124,246,0)); }
.hero-visual img { position: relative; z-index: 1; display: block; width: 100%; height: auto;
filter: drop-shadow(0 24px 46px rgba(0,0,0,.6)); }
section { padding: 42px 0; }
.sec-head { margin-bottom: 26px; }
.plugin-band { padding: 22px 16px; border-radius: 16px; }
.steps li { padding-left: 40px; }
.footer { padding: 30px 0 40px; }
.footer .cols { gap: 24px; flex-direction: column; }
.wrap { padding: 0 14px; }
}
/* 账户信息弹窗底部（电脑端）：改密码靠左，退出 / 关闭靠右，中间用占位撑开。 */
.acc-foot-spacer { flex: 1; }
/* 手机端仓位卡片（跟单任务 → 仓位 → 当前持仓 / 整体仓位记录）。
表格在手机上会被折成一列没有字段名的数字，所以这几屏改用卡片：
一张卡 = 一个仓位，第一行币种 + 方向 + 盈亏，第二行数量 / 开仓价 / 现价，
第三行占用和开仓时间（次要信息压成灰色小字）。 */
.tp-cards { display: grid; gap: 10px; }
/* 复制明细的摘要行：写「几个仓位 / 累计多少」。没有刷新按钮，
弹窗开着就每 5 秒自己拉一次，所以也不需要再挂一个时间戳。 */
.tp-metarow { display: flex; align-items: baseline; gap: 8px; }
.tp-metarow #tpMeta { min-width: 0; }
.tp-card { padding: 11px 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg2); }
.tp-card-top { display: flex; align-items: center; gap: 8px; }
.tp-card-top + .tp-card-line { margin-top: 7px; }
.tp-card-line { font-size: 13px; color: var(--text); }
.tp-card-line.muted { color: var(--muted); font-size: 12px; margin-top: 3px; }
/* 带单员持仓卡里「字段 —— 数值」那一列：字段名固定宽度、数值右对齐，
跟币安 App 的仓位卡一个排法，扫一眼就能跟手机上那几行对上。 */
.pos-kv { display: flex; align-items: baseline; gap: 10px; margin-top: 6px; font-size: 13px; }
.pos-kv > span { flex: none; color: var(--muted); min-width: 92px; }
.pos-kv > b { margin-left: auto; text-align: right; font-weight: 600; word-break: break-all; }
/* 已经保存到桌面（standalone）时再收一点边距，全屏利用率更高 */
html.cs-standalone body { overscroll-behavior: none; }
/* ---------- 在线客服 ---------- */
/* 电脑端：右下角一个常驻圆钮，点开在它上方展开对话面板。
底部留 24px 而不是贴着边，是为了不压住页面右下角最后一个「保存」之类的按钮。 */
.cs-fab { position: fixed; right: 22px; bottom: 24px; z-index: 130; width: 54px; height: 54px;
border-radius: 50%; border: 1px solid rgba(240,185,11,.34); background: linear-gradient(135deg, var(--accent), #f7931a);
color: #151109; display: grid; place-items: center; box-shadow: 0 10px 26px rgba(0,0,0,.45);
transition: transform .16s ease, box-shadow .16s ease; }
.cs-fab[hidden] { display: none !important; }
.cs-fab:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,0,0,.5); }
.cs-fab svg { width: 26px; height: 26px; }
.cs-fab-badge { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px;
border-radius: 999px; background: var(--red); color: #fff; font-size: 11.5px; font-weight: 700;
display: grid; place-items: center; box-shadow: 0 0 0 2px var(--bg); }
.cs-fab-badge[hidden] { display: none !important; }
.cs-panel { position: fixed; right: 22px; bottom: 90px; z-index: 131; width: 350px; max-width: calc(100vw - 44px);
height: 460px; max-height: calc(100vh - 140px); display: flex; flex-direction: column;
background: var(--bg2); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; }
.cs-panel[hidden] { display: none !important; }
.cs-head { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line);
background: linear-gradient(180deg, rgba(240,185,11,.08), transparent); }
.cs-head-main { display: flex; flex-direction: column; min-width: 0; }
.cs-head-main b { font-size: 15px; }
.cs-head-main span { font-size: 12px; }
.cs-x { margin-left: auto; border: 0; background: transparent; color: var(--muted); font-size: 15px; line-height: 1; padding: 4px 6px; border-radius: 8px; }
.cs-x:hover { color: var(--text); background: rgba(255,255,255,.06); }
.cs-body { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px;
overscroll-behavior: contain; }
.cs-msg { max-width: 84%; padding: 9px 12px; border-radius: 12px; font-size: 13.5px; line-height: 1.6;
white-space: pre-wrap; word-break: break-word; }
/* mine = 当前这一侧自己发的（金字靠右），peer = 对方发的（灰底靠左）。
用户端和后台共用这两个类，所以不按 sender 命名 —— 两边的「我」不是同一个人。 */
.cs-msg.mine { align-self: flex-end; background: rgba(240,185,11,.16); border: 1px solid rgba(240,185,11,.32); color: var(--text); border-bottom-right-radius: 4px; }
.cs-msg.peer { align-self: flex-start; background: var(--panel); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.cs-msg-time { display: block; margin-top: 4px; font-size: 11px; color: var(--muted); }
.cs-empty { margin: auto; text-align: center; color: var(--muted); font-size: 13px; line-height: 1.9; }
.cs-form { display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px; border-top: 1px solid var(--line); background: var(--bg); }
.cs-form textarea { flex: 1; min-height: 44px; max-height: 120px; resize: none; padding: 10px 12px; border-radius: 12px;
border: 1px solid var(--line); background: var(--bg2); color: var(--text); font: inherit; font-size: 13.5px; }
.cs-form textarea:focus { outline: none; border-color: var(--accent); }
/* 手机端：面板改成从底部升起的整屏卡片，盖住底部导航（z-index 320 > .mobnav 的 120），
这样输入框不会被底栏挡住，键盘弹起时也不会只露出一半。 */
html.cs-mobile .cs-panel { left: 0; right: 0; bottom: 0; top: 0; width: 100%; max-width: 100%;
height: auto; max-height: 100%; border-radius: 0; border: 0; }
html.cs-mobile .cs-head { padding-top: max(14px, env(safe-area-inset-top)); }
html.cs-mobile .cs-form { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
html.cs-mobile .cs-panel { z-index: 320; }
/* 管理后台「在线客服」：左边会话列表，右边对话。手机端上下摞起来。 */
.cs-admin { display: grid; grid-template-columns: 280px 1fr; gap: 16px; align-items: start; }
.cs-threads { display: flex; flex-direction: column; gap: 8px; max-height: 62vh; overflow-y: auto; }
.cs-thread { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line);
border-radius: 12px; background: var(--bg2); cursor: pointer; }
.cs-thread:hover { border-color: var(--accent); }
.cs-thread.active { border-color: var(--accent); background: rgba(240,185,11,.1); }
.cs-thread-main { min-width: 0; flex: 1; }
.cs-thread-main b { display: block; font-size: 13.5px; }
.cs-thread-main span { display: block; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-thread .tag { flex: none; }
/* 行尾的「彻底删除」：平时低调，指上去才变红 —— 列表里一眼能扫过，但不会误点。 */
.cs-thread-x { flex: none; border: 0; background: transparent; color: var(--muted); font-size: 13px; line-height: 1;
padding: 4px 6px; border-radius: 8px; }
.cs-thread-x:hover { color: var(--red); background: rgba(255,80,80,.12); }
.cs-chat { display: flex; flex-direction: column; min-height: 420px; }
/* 没选中用户时不用留一整屏高的空框，居中那句提示照样看得见。 */
.cs-chat.idle { min-height: 240px; }
.cs-chat-body { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px;
border: 1px solid var(--line); border-radius: 12px; background: var(--bg2); max-height: 52vh; }
.cs-chat-foot { display: flex; gap: 8px; align-items: flex-end; margin-top: 10px; }
.cs-chat-foot textarea { flex: 1; min-height: 46px; max-height: 120px; resize: none; padding: 11px 12px;
border-radius: 12px; border: 1px solid var(--line); background: var(--bg2); color: var(--text); font: inherit; font-size: 13.5px; }
.cs-chat-foot textarea:focus { outline: none; border-color: var(--accent); }
@media (max-width: 760px) {
.cs-admin { grid-template-columns: 1fr; }
.cs-threads { max-height: none; flex-direction: row; overflow-x: auto; padding-bottom: 4px; }
.cs-thread { min-width: 220px; }
.cs-chat-body { max-height: 46vh; }
/* 没选中用户时不摆一个空对话框：手机屏就这么点大，收起来只留会话列表。 */
.cs-chat.idle { display: none; }
}
/* 只藏「保存到桌面」那个引导弹层 —— 它和「更多」抽屉共用 .mob-sheet-bg 样式，
早先按类名藏会把「更多」一起藏掉，导致桌面图标打开后底部「更多」永远点不开。 */
html.cs-standalone .mob-homescreen-sheet { display: none; }
html.cs-standalone .topbar { padding-top: 12px; }
|