/* 币种页样式（coin.php）。页面用 <link> 引用，文件名带 ?v=修改时间 防缓存 */
:root{
    --brand:#e6ac00;
    --brand-2:#ebbc33;
    --brand-3:#f0cd66;
    --brand-soft:rgba(230,172,0,.10);
    --bg:#fff;
    --surface:#fff;
    --surface2:#f8f8f8;
    --text:#09090b;
    --muted:#71717a;
    --faint:#a1a1aa;
    --line:#efefef;
    --green:#16a34a;
    --green-soft:rgba(22,163,74,.10);
    --red:#e5484d;
    --red-soft:rgba(229,72,77,.10);
    /* 市场深度每行背后的红/绿深度条，比 --red-soft/--green-soft 更明显一些，方便一眼看出堆量 */
    --depth-ask:rgba(229,72,77,.16);
    --depth-bid:rgba(22,163,74,.16);
    --radius:12px;
    --ease:cubic-bezier(.22,1,.36,1);
    /* 全站字体：交易所同款 IBM Plex Sans（拉丁/数字），汉字回退到系统中文字体 */
    --num-font:"IBM Plex Sans","SF Pro Display","Helvetica Neue","Segoe UI",Roboto,"PingFang SC","HarmonyOS Sans SC","Hiragino Sans GB","Microsoft YaHei UI","Microsoft YaHei",Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:76px}
body{
    background:var(--bg);
    color:var(--text);
    font-family:var(--num-font);
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button{font:inherit}
.container{width:min(1440px,calc(100% - 48px));margin:auto}

/* ===== 顶栏 ===== */
.topbar{
    height:60px;
    background:rgba(255,255,255,.82);
    -webkit-backdrop-filter:saturate(180%) blur(14px);
    backdrop-filter:saturate(180%) blur(14px);
    border-bottom:1px solid var(--line);
    display:flex;
    align-items:center;
    position:sticky;
    top:0;
    z-index:50;
}
.topbar-inner{
    width:min(1440px,calc(100% - 48px));
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}
.brand{
    display:flex;
    align-items:center;
    gap:9px;
    font-weight:800;
    font-size:18px;
    color:var(--brand);
    letter-spacing:-.2px;
}
.logo-img{height:30px;width:auto;display:block}
.brand-mark{
    width:26px;height:26px;
    display:grid;place-items:center;
    border-radius:8px;
    background:var(--brand);color:#fff;
    font-size:15px;
    font-weight:900;
    line-height:1;
}
/* 顶栏右侧：排行榜入口 + 搜索图标 */
.tb-right{display:flex;align-items:center;gap:14px}
.tb-link{
    display:inline-flex;
    align-items:center;
    gap:6px;
    height:38px;
    padding:0 14px 0 12px;
    border:1px solid var(--line);
    border-radius:999px;
    background:#fff;
    color:var(--text);
    font-size:14px;
    font-weight:500;
    transition:border-color .2s,color .2s,background .2s;
}
.tb-link svg{width:17px;height:17px;flex:none}
.tb-link:hover{border-color:var(--brand-3);color:var(--brand);background:var(--brand-soft)}

/* 顶栏搜索图标 */
.search-btn{
    flex:none;
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border:1px solid var(--line);
    border-radius:50%;
    background:#fff;
    color:var(--text);
    cursor:pointer;
    transition:border-color .2s,color .2s,background .2s;
}
.search-btn svg{width:18px;height:18px}
.search-btn:hover{border-color:var(--brand-3);color:var(--brand);background:var(--brand-soft)}

/* 搜索弹窗 */
.sx{
    position:fixed;
    inset:0;
    z-index:100;
    display:flex;
    justify-content:center;
    align-items:flex-start;
    padding:10vh 16px 16px;
    background:rgba(9,9,11,.35);
    -webkit-backdrop-filter:blur(4px);
    backdrop-filter:blur(4px);
}
.sx[hidden]{display:none}
html.sx-lock{overflow:hidden}
.sx-panel{
    width:min(560px,100%);
    max-height:76vh;
    display:flex;
    flex-direction:column;
    background:#fff;
    border-radius:16px;
    box-shadow:0 24px 64px rgba(0,0,0,.18);
    overflow:hidden;
}
.sx-bar{
    flex:none;
    display:flex;
    align-items:center;
    gap:10px;
    padding:0 16px;
    height:56px;
    border-bottom:1px solid var(--line);
    color:var(--faint);
}
.sx-bar svg{flex:none;width:20px;height:20px}
.sx-bar input{
    flex:1;
    min-width:0;
    height:100%;
    border:0;
    outline:none;
    background:none;
    color:var(--text);
    font:inherit;
    font-size:16px;
}
.sx-bar input::placeholder{color:var(--faint)}
.sx-cancel{
    flex:none;
    border:0;
    background:none;
    color:var(--muted);
    font-size:14px;
    cursor:pointer;
}
.sx-cancel:hover{color:var(--text)}
.sx-list{flex:1;overflow-y:auto;padding:6px}
.sx-label{padding:8px 10px 4px;color:var(--faint);font-size:12px}
.sx-empty{padding:28px 10px;text-align:center;color:var(--faint);font-size:13px}
.sx-item{
    display:grid;
    grid-template-columns:34px 1fr auto;
    align-items:center;
    gap:12px;
    padding:10px;
    border-radius:10px;
}
.sx-item.active,.sx-item:hover{background:var(--brand-soft)}
.sx-ico{
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:var(--brand-soft);
    color:#a87c00;
    font-size:11px;
    font-weight:800;
}
.sx-name{min-width:0}
.sx-name b{display:block;font-size:14px;font-weight:600}
.sx-name small{display:block;color:var(--faint);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sx-px{text-align:right;font-variant-numeric:tabular-nums}
.sx-px b{display:block;font-size:14px;font-weight:600}
.sx-px small{display:block;font-size:12px;font-weight:500}
.sx-go{grid-column:2 / -1;color:var(--muted);font-size:13px}

/* ===== 页首（面包屑 + 标题 + 价格） ===== */
/* 页首的暖色底：画在伪元素上、往下多铺 160px 并渐隐到透明，不在页首底边留一条硬边；下面的概览卡片盖在渐隐区上面 */
.page-top{position:relative;isolation:isolate}
.page-top::before{
    content:"";
    position:absolute;
    inset:0 0 -160px;
    z-index:-1;
    pointer-events:none;
    background:
        radial-gradient(circle at 50% 0%,rgba(230,172,0,.13) 0%,transparent 40%),
        radial-gradient(circle at 12% 30%,rgba(230,172,0,.06) 0%,transparent 26%),
        radial-gradient(circle at 88% 26%,rgba(230,172,0,.05) 0%,transparent 28%),
        linear-gradient(180deg,rgba(230,172,0,.03) 0%,transparent 100%);
    -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent);
    mask-image:linear-gradient(180deg,#000 55%,transparent);
}
.breadcrumb{
    padding:22px 0 6px;
    color:var(--muted);
    font-size:13px;
}
.breadcrumb a:hover{color:var(--brand)}
.breadcrumb span{margin:0 7px;color:var(--faint)}

.hero{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:end;
    gap:30px;
    padding:14px 0 32px;
}
.hero-kicker{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:3px 12px;
    border-radius:999px;
    background:var(--brand-soft);
    color:#a87c00;
    font-size:12px;
    font-weight:600;
    letter-spacing:.02em;
    font-variant-numeric:tabular-nums;
}
.kicker-ico{flex:none}
.hero h1{
    margin-top:12px;
    font-size:clamp(28px,3.6vw,44px);
    line-height:1.15;
    font-weight:800;
    letter-spacing:-1px;
}
.hero-title{
    display:flex;
    align-items:center;
    gap:12px;
}
.hero-icon{
    flex:none;
    width:clamp(36px,4.4vw,52px);
    height:clamp(36px,4.4vw,52px);
    border-radius:50%;
}
.hero-sub{
    margin-top:10px;
    color:var(--muted);
    font-size:15px;
}
.hero-price{text-align:right}
/* 已有价格首屏可见，更新时间由页面如实显示。 */
.hero-price .stale{visibility:visible}
.hero-price strong{
    font-family:var(--num-font);
    display:block;
    font-size:clamp(30px,4vw,46px);
    line-height:1;
    font-weight:800;
    letter-spacing:-.5px;
    font-variant-numeric:tabular-nums;
}
.change{
    font-family:var(--num-font);
    display:inline-flex;
    margin-top:9px;
    padding:5px 11px;
    border-radius:999px;
    font-size:13px;
    font-weight:700;
    font-variant-numeric:tabular-nums;
}
.up{color:var(--green)}
.down{color:var(--red)}
.change.up{background:var(--green-soft)}
.change.down{background:var(--red-soft)}

/* 涨跌幅 + 货币切换 */
.hero-row{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:10px;
    margin-top:12px;
}
.hero-row .change{margin-top:0}
.ccy-switch{
    display:inline-flex;
    padding:3px;
    gap:2px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:999px;
}
.ccy-switch button{
    border:0;
    background:transparent;
    padding:5px 14px;
    border-radius:999px;
    font:inherit;
    font-size:12px;
    font-weight:700;
    letter-spacing:.2px;
    color:var(--muted);
    cursor:pointer;
    transition:background .18s ease, color .18s ease, box-shadow .18s ease;
}
.ccy-switch button:hover:not(.active){
    background:var(--brand-soft);
    color:var(--text);
}
.ccy-switch button.active{
    background:var(--brand);
    color:#fff;
}

/* ===== 24H 概览 ===== */
.snapshot{
    position:relative;              /* 盖在页首渐隐的暖色底上面 */
    display:grid;
    grid-template-columns:repeat(6,1fr);
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    overflow:hidden;
    box-shadow:0 1px 2px rgba(16,24,40,.03),0 12px 32px -18px rgba(16,24,40,.12);
}
.snapshot-item{
    min-width:0;
    padding:18px 20px;
    border-right:1px solid var(--line);
}
.snapshot-item:last-child{border-right:0}
.snapshot-item span{
    display:block;
    color:var(--muted);
    font-size:12px;
}
.snapshot-item strong{
    display:block;
    margin-top:7px;
    font-size:15px;
    font-weight:700;
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.workspace{
    display:grid;
    grid-template-columns:minmax(0,1fr);   /* K 线图通栏；标签栏（深度 / 成交 / 历史 / 清算）在其下方 */
    gap:20px;
    margin-top:20px;
}
.panel{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    overflow:hidden;
}
.panel-head{
    min-height:58px;
    padding:14px 20px;
    border-bottom:1px solid var(--line);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
}
.panel-head h2{
    font-size:16px;
    font-weight:700;
    letter-spacing:-.2px;
}
.panel-head small{color:var(--faint);font-size:12px}

.chart-wrap{
    position:relative;
    display:flex;
    align-items:stretch;
    background:#fff;
}
.chart-tools{
    display:flex;
    align-items:center;
    gap:4px;
    overflow:auto;
    scrollbar-width:none;
}
.chart-tools::-webkit-scrollbar{display:none}
.chart-tools button,
.chart-tools a{
    flex:0 0 auto;
    border:0;
    background:transparent;
    color:var(--muted);
    padding:6px 12px;
    border-radius:999px;
    cursor:pointer;
    font-size:12px;
    font-weight:500;
    transition:background .18s,color .18s;
}
.chart-tools a{text-decoration:none;display:inline-block;line-height:normal}
.chart-tools .kl-s{display:none}             /* 短名（1时 / 日 / 年…）只在手机上用，见下方 @media */
.chart-tools .kl-more-btn{display:none}      /* 「更多」只在手机上用 */
/* 桌面：下拉容器不占位，里面的 4 个链接和其它周期一起平铺；用 order 排回 1分 … 年线 的顺序，全屏按钮放最后 */
.chart-tools .kl-drop{display:contents}
.chart-tools [data-i="1m"]{order:1} .chart-tools [data-i="5m"]{order:2} .chart-tools [data-i="15m"]{order:3}
.chart-tools [data-i="30m"]{order:4} .chart-tools [data-i="1h"]{order:5} .chart-tools [data-i="4h"]{order:6}
.chart-tools [data-i="1d"]{order:7} .chart-tools [data-i="1w"]{order:8} .chart-tools [data-i="1mo"]{order:9}
.chart-tools [data-i="1y"]{order:10} .chart-tools .chart-fs{order:11}
.chart-tools button:hover,.chart-tools a:hover{background:var(--brand-soft);color:var(--text)}
.chart-tools button.active,
.chart-tools a.active{
    background:var(--brand);
    color:#fff;
}
.chart-tools .chart-fs{
    margin-left:auto;
    font-size:15px;
    padding:5px 10px;
}

#chart{
    flex:1 1 auto;
    min-width:0;
    width:100%;
    height:520px;
}
/*
 * klinecharts 给容器写死了内联 touch-action:none，手机上手指落在图上整页就划不动了。
 * 改成 pan-y：竖向滑动交给浏览器滚动页面，横向拖动/双指缩放/长按十字线仍由图表处理。
 * 配套改动：vendor/klinecharts.min.js 打了三处补丁（v=10.0.3-p2），升级该库时记得重新打：
 *  1. treatVertDragAsPageScroll 改为返回 true，否则图表会在 touchmove 里 preventDefault 把竖向滚动吞掉；
 *  2. 判断手势方向的距离从 5px 提到 10px（!(o<st) → !(o<10)），手指起步时轻微横向抖动不再把整次下拉判成拖图；
 *  3. 根节点上除 touchend 外也监听 touchcancel，否则手势被系统取消后，库挂在 document 上的 touchmove
 *     监听不会被移除，之后在页面任何位置滑动都可能被 preventDefault，整页卡住。
 */
#chart > div{touch-action:pan-y !important}

/* 服务端直出的 K 线（coin.php 的 ss_kline_ssr）：klinecharts 载入前先显示，载入后由 coin.js 移除 */
.kl-ssr{display:block;width:100%;height:100%}
#chart{position:relative}
.js-kl #chart > .kl-ssr{position:absolute;inset:0}
.js-kl #chart:not(.kl-ready):not(.kl-fallback) > .kl-ssr,
.js-kl #chart:not(.kl-ready) > div{visibility:hidden}
.js-kl #chart:not(.kl-ready):not(.kl-fallback)::after{content:"正在加载实时走势图…";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--faint);font-size:13px;background:#fff;pointer-events:none}
#chart.kl-fallback > .kl-ssr{position:absolute;inset:0;visibility:visible}
.kl-ssr .u line,.kl-ssr .u rect{stroke:#16a34a;fill:#16a34a}
.kl-ssr .d line,.kl-ssr .d rect{stroke:#e5484d;fill:#e5484d}
.kl-ssr line{stroke-width:1;vector-effect:non-scaling-stroke}
.kl-ssr rect{stroke-width:0}
.kl-ssr rect.v{opacity:.28}
.kl-ssr text{fill:var(--faint);font-size:11px}
.market-status{margin:12px 0 20px;padding:12px 16px;border:1px solid var(--line,#e5e7eb);border-radius:12px;font-size:12px;color:var(--muted,#71717a);background:#fff}
.market-status-head{display:flex;justify-content:space-between;gap:12px;min-height:20px}
.market-status-items{display:flex;gap:8px;flex-wrap:wrap;align-content:start;min-height:64px;margin-top:8px}
.market-status-item{padding:4px 8px;border-radius:6px;background:#f5f5f5;font-variant-numeric:tabular-nums}
.market-status-item[data-state=late]{color:#9a6700;background:#fff8e5}
.market-status details{margin-top:8px}.market-status summary{cursor:pointer;min-height:28px;display:list-item}.market-status p{line-height:1.8;max-width:90ch}
.method-note{width:min(1440px,calc(100% - 48px));margin:20px auto 24px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--muted);font-size:13px}
.method-note summary{display:flex;align-items:center;gap:10px;min-height:54px;padding:14px 20px;cursor:pointer;list-style:none;font-size:14px;font-weight:500;color:var(--text);border-radius:inherit}
.method-note summary::-webkit-details-marker{display:none}
.method-note summary::before{content:"i";display:inline-flex;align-items:center;justify-content:center;flex:none;width:22px;height:22px;border-radius:50%;background:var(--brand-soft);color:var(--brand);font-weight:600;font-size:13px}
.method-note summary::after{content:"";width:7px;height:7px;border-right:1.5px solid var(--faint);border-bottom:1.5px solid var(--faint);transform:rotate(45deg);margin-left:auto;margin-right:3px;flex:none}
.method-note[open] summary{border-bottom:1px solid var(--line);border-radius:var(--radius) var(--radius) 0 0;margin-bottom:14px}
.method-note[open] summary::after{transform:rotate(225deg)}
.method-note summary:hover{background:var(--surface2)}
.method-note summary:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.method-note p{padding:0 20px 14px;line-height:1.9;max-width:110ch}
@media(max-width:680px){.method-note{width:calc(100% - 32px);margin:16px auto 20px}.method-note summary{padding:12px 14px;min-height:50px;font-size:13px}.method-note p{padding:0 14px 12px;font-size:12px}}
@media(max-width:680px){.chart-tools a,.kl-more-btn,.trade-filters button,.fund-ranges button{min-height:40px;display:inline-flex;align-items:center;justify-content:center}.xp-scroll,.trades,.tabs{overscroll-behavior-x:contain;scrollbar-width:thin}.market-status{padding:10px 12px}.market-status-head{flex-wrap:wrap}.market-status-item{white-space:normal}}


.chart-head .chart-tools{flex:1;min-width:0}

.order{padding:12px 16px 16px}
.order-head,.order-row{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
    gap:10px;
}
.order-head{
    padding:3px 0 9px;
    color:var(--faint);
    font-size:11px;
}
.order-row{
    padding:6px 0;
    font-size:11px;
    font-variant-numeric:tabular-nums;
}
.order-row span{
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}
/* 市场深度整行着色：卖盘红、买盘绿 */
#asks .order-row{color:var(--red)}
#bids .order-row{color:var(--green)}
.order-mid{
    margin:5px 0;
    padding:11px 0;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    font-size:15px;
    font-weight:800;
    font-variant-numeric:tabular-nums;
}
.empty{
    padding:28px 10px;
    text-align:center;
    color:var(--faint);
    font-size:12px;
}

.trades{max-height:455px;overflow:auto}
.trade{
    display:grid;
    grid-template-columns:minmax(0,.85fr) minmax(0,.6fr) minmax(0,1.1fr) minmax(0,1fr);
    gap:6px;
    padding:8px 18px;
    border-bottom:1px solid var(--line);
    font-size:11px;
    font-variant-numeric:tabular-nums;
}
/* 时间靠左、方向居中、价格/金额靠右：整行均匀铺满，表头与数据同一套列宽 */
.trade span:nth-child(2){text-align:center}
.trade span:nth-child(3){text-align:right}
.trade span:last-child{text-align:right;font-weight:600}
.trade span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trade.buy{color:var(--green)}
.trade.sell{color:var(--red)}
/* 大单：底色高亮，一眼能从列表里挑出来 */
.trade.big{background:var(--brand-soft)}

.trade-filters{display:flex;flex-wrap:wrap;gap:6px;margin:0 18px 10px}
.trade-filters button{
    flex:0 0 auto;
    padding:5px 12px;
    border:0;
    border-radius:999px;
    background:var(--surface2);
    color:var(--muted);
    font-size:12px;
    font-weight:500;
    cursor:pointer;
    transition:background .18s,color .18s;
}
.trade-filters button:hover{color:var(--text)}
.trade-filters button.active{background:var(--brand);color:#fff}

/* 大单异动：底部胶囊弹出提示 */
.big-trade-toast{
    position:fixed;
    left:50%;
    bottom:24px;
    z-index:80;
    max-width:calc(100% - 32px);
    padding:11px 20px;
    border-radius:999px;
    background:#1c1c1f;
    color:#fff;
    font-size:13px;
    font-weight:600;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    box-shadow:0 8px 24px rgba(0,0,0,.2);
    opacity:0;
    pointer-events:none;
    transform:translate(-50%,12px);
    transition:opacity .25s ease,transform .25s ease;
}
.big-trade-toast.show{opacity:1;transform:translate(-50%,0)}
.big-trade-toast b.up{color:#4ade80}
.big-trade-toast b.down{color:#f87171}
.trade-head{
    position:sticky;
    top:0;
    z-index:2;
    color:var(--faint);
    background:var(--surface2);
    border-bottom:1px solid var(--line);
}


/* 市场行情（各交易所实时价格） */
.xp-panel{margin-top:20px}
.xp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.xp-table{min-width:720px}
.xp-row{display:grid;grid-template-columns:52px 1.9fr 1.25fr 1.35fr 1.45fr 1.45fr;gap:14px;align-items:center;padding:12px 24px;border-top:1px solid var(--line);font-size:14px;font-variant-numeric:tabular-nums;transition:background .15s}
#xpRows .xp-row:hover{background:rgba(230,172,0,.05)}
a.xp-row{color:inherit;cursor:pointer}
a.xp-row:hover .xp-ex b{color:var(--brand)}
.xp-row>span:nth-child(n+3){text-align:right;white-space:nowrap}
.xp-head{border-top:0;background:var(--surface2);color:var(--faint);font-size:12px;font-weight:500;padding-top:10px;padding-bottom:10px;letter-spacing:.2px}
.xp-rank{color:var(--muted)}
.xp-rank i{font-style:normal;display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;border-radius:6px;font-size:12px;font-weight:600}
/* 前三名：金 / 银 / 铜（按排名数字，不按行的位置——停更被隐藏的行不占名次，见 coin.js 的 xpRender） */
#xpRows .xp-rank i.r1{background:#f5c33b;color:#fff}
#xpRows .xp-rank i.r2{background:#b8bec8;color:#fff}
#xpRows .xp-rank i.r3{background:#d59a6a;color:#fff}
#xpRows .xp-row[hidden]{display:none}
/* 实时（relay 直连）的交易所：名字后面一个绿色小点 */
.xp-live{flex:none;width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px var(--green-soft)}
.xp-p{font-weight:700}
.xp-bv{color:var(--muted);font-size:13px}
/* 占比：细条 + 百分比 */
.xp-share{display:flex;align-items:center;justify-content:flex-end;gap:10px}
.xp-share b{font-weight:500;min-width:52px;text-align:right}
.xp-bar{flex:1;max-width:96px;height:6px;border-radius:3px;background:var(--surface2);overflow:hidden}
.xp-bar em{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--brand-3),var(--brand))}
/* 折叠：默认只显示前 15 行（其余行仍在 HTML 里） */
#xpRows.xp-fold .xp-row:nth-child(n+16){display:none}
.xp-more{display:block;width:100%;padding:13px 0;border:0;border-top:1px solid var(--line);background:none;color:var(--muted);font-size:13px;font-weight:500;cursor:pointer;transition:color .2s,background .2s}
.xp-more:hover{color:var(--text);background:var(--surface2)}
.xp-more[hidden]{display:none}
.xp-more::after{content:"";display:inline-block;width:6px;height:6px;margin-left:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-3px) rotate(45deg)}
.xp-more[aria-expanded="true"]::after{transform:translateY(1px) rotate(-135deg)}
.xp-ex{display:flex;align-items:center;gap:10px;min-width:0}
.xp-ex b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.xp-m2{display:none}
.xp-logo{flex:none;width:22px;height:22px;border-radius:6px;overflow:hidden;display:flex;align-items:center;justify-content:center;font-style:normal}
.xp-logo img{display:block;width:100%;height:100%}
.xp-logo.txt{background:var(--brand);color:#fff;font-size:12px;font-weight:700}
/* 价格变了：直接变色，下一次刷新（约 1 秒后）恢复。不用颜色渐隐动画——几十行每秒都重新开始闪，
   动画一直在跑，浏览器每一帧都要重算整张表的样式（实测这一块在屏幕上时主线程被占掉约 30%） */
.xp-row.flash-up .xp-p{color:var(--green)}
.xp-row.flash-down .xp-p{color:var(--red)}
/*
 * 手机端：不横向滚动，每家两行——
 *   第一行：排名 | 图标 + 交易所名 | 价格（大号）
 *   第二行：      成交额（万 / 亿）· 占比
 * 24H 成交量（币）在手机上不显示（比价时最用不上的一列）。
 */
@media(max-width:680px){
    .xp-scroll{overflow:visible}
    .xp-table{min-width:0}
    .xp-row{grid-template-columns:20px minmax(0,1fr) auto;grid-template-areas:"rank ex p" "rank m2 m2";column-gap:10px;row-gap:4px;padding:12px 16px;font-size:13px}
    .xp-rank{grid-area:rank;align-self:start;line-height:22px;font-size:12px}
    .xp-rank i{min-width:18px;height:18px;font-size:11px;border-radius:5px;margin-top:2px}
    .xp-row{grid-template-columns:22px minmax(0,1fr) auto}
    .xp-ex{grid-area:ex}
    .xp-ex b{font-size:14px}
    .xp-p{grid-area:p;font-size:15px;font-weight:700;line-height:22px}
    .xp-m2{grid-area:m2;display:block;padding-left:32px;color:var(--muted);font-size:12px;white-space:nowrap}
    .xp-bv,.xp-qv,.xp-share{display:none}
    /* 表头：第一行 排名 / 平台 / 价格，第二行「成交额 · 占比」 */
    .xp-head{grid-template-areas:"rank ex p" "rank m2 m2";row-gap:2px;padding-top:9px;padding-bottom:9px;font-size:12px}
    .xp-head>span:nth-child(4),.xp-head>span:nth-child(5),.xp-head>span:nth-child(6){display:none}
    /* 排名列只有 20px 宽，「排序」两个字会被挤成竖排：手机端表头改显示「#」 */
    .xp-head>span:first-child{align-self:center;font-size:0;white-space:nowrap}
    .xp-head>span:first-child::after{content:"#";font-size:12px}
    .xp-head .xp-m2{font-weight:500}
}
/* 介绍标签：币种介绍（左）+ 资料速览（右），窄屏上下排 */
.intro-pane{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(260px,.8fr)}
.intro-pane>[hidden]{display:none}
.intro-pane>.empty{grid-column:1/-1}
.intro-article.content{padding:24px 24px 28px}
.intro-article.content h2{font-size:20px}
.intro-facts{border-left:1px solid var(--line);padding:18px 0 8px}
.intro-facts h3{padding:0 20px 6px;font-size:15px;font-weight:700}
.intro-pane.solo{grid-template-columns:minmax(0,1fr)}                     /* 只有正文或只有资料速览 */
.intro-pane.solo .intro-facts{border-left:0}
@media(max-width:900px){
    .intro-pane{grid-template-columns:minmax(0,1fr)}
    .intro-facts{border-left:0;border-top:1px solid var(--line)}
    .intro-article.content{padding:20px 16px 24px}
}
/* 行情分析（analysis_ssr.php）：左栏上半部分，下面接项目介绍，右边是资料速览 */
.intro-main{min-width:0}
.an.content{padding:24px 24px 8px}
.an.content+.intro-article:not([hidden]){border-top:1px solid var(--line)}
.an.content:empty{display:none}
.an.content h2{font-size:20px}
.an .an-meta{color:var(--faint);font-size:12px;margin-top:-4px}
.an .an-lead{font-size:15px}
.an b.up{color:var(--green)}
.an b.down{color:var(--red)}
.an-points{list-style:none;margin:14px 0 6px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.an-points li{background:var(--brand-soft);border-radius:10px;padding:10px 12px;font-size:13px;line-height:1.55}
.an-points li span{display:block;color:var(--muted);font-size:12px;margin-bottom:2px}
.an-sec{padding-top:6px}
.an-sec h3{font-size:16px}
.an-sec p{margin:8px 0}
.an .an-more{font-size:13px}
.an .an-more a{color:var(--brand);text-decoration:none}
.an .an-more a:hover{text-decoration:underline}
@media(max-width:900px){
    .an.content{padding:20px 16px 4px}
}

.info-layout{
    display:grid;
    grid-template-columns:minmax(0,1.55fr) minmax(300px,.8fr);
    gap:20px;
    margin-top:20px;
}
.content{
    padding:28px 30px 32px;
}
.content h2{
    font-size:24px;
    font-weight:700;
    letter-spacing:-.6px;
    margin-bottom:15px;
}
.content h3{
    font-size:17px;
    font-weight:700;
    margin:28px 0 9px;
    letter-spacing:-.2px;
}
.content h3::before{
    content:"";
    display:inline-block;
    width:4px;
    height:15px;
    margin-right:9px;
    border-radius:2px;
    background:var(--brand);
    vertical-align:-2px;
}
.content p{
    color:var(--muted);
    font-size:14px;
    line-height:1.95;
}
.content p+p{margin-top:10px}

.metrics{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    border-top:1px solid var(--line);
    border-left:1px solid var(--line);
    margin-top:22px;
    border-radius:var(--radius) 0 0 0;
}
.metric{
    padding:16px;
    border-right:1px solid var(--line);
    border-bottom:1px solid var(--line);
}
.metric span{display:block;color:var(--muted);font-size:11px}
.metric strong{display:block;margin-top:5px;font-size:14px;font-variant-numeric:tabular-nums}

.info-layout[hidden],.info-layout aside[hidden]{display:none}
.info-layout.solo{grid-template-columns:minmax(0,1fr)}
.ci-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.ci-tags span{padding:3px 10px;border-radius:999px;background:var(--brand-soft);color:var(--text);font-size:12px}
.ci-src{margin-top:18px;padding:10px 12px;border-radius:8px;background:#f7f7f8;color:var(--muted);font-size:12px;line-height:1.7}
.ci-src a{color:var(--brand)}
.side-item a{color:var(--brand);word-break:break-all}
.side-list{padding:4px 0}
.side-item{
    padding:17px 20px;
    border-bottom:1px solid var(--line);
}
.side-item:last-child{border-bottom:0}
.side-item b{display:block;font-size:14px}
.side-item p{margin-top:4px;color:var(--muted);font-size:12px;line-height:1.7}

.footer{
    border-top:1px solid var(--line);
    padding:26px 0 40px;
    color:var(--muted);
    font-size:13px;
}
.footer a:hover{color:var(--brand)}
.source{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}

/* 市场深度：买盘表头仅在左右并排（窄屏）时显示 */
.order-head-bid{display:none}
.depth-title{
    display:flex;
    align-items:baseline;
    gap:6px;
    padding:2px 0 8px;
    font-size:13px;
}
.depth-title b{font-weight:700}
.depth-title small{font-size:11px;font-weight:400;color:var(--faint)}
.ask-title b{color:var(--red)}
.bid-title b{color:var(--green)}
.depth-title::before{
    content:"";
    align-self:center;
    width:4px;
    height:13px;
    border-radius:2px;
    background:currentColor;
}
.ask-title::before{color:var(--red)}
.bid-title::before{color:var(--green)}
.bid-title{margin-top:10px;padding-top:12px;border-top:1px solid var(--line)}
/* 买卖对比（圆环）+ 市场热度 */
.flow{margin-top:8px;border-top:1px solid var(--line)}
.flow-title{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:16px 20px 0}
.flow-title h3{font-size:15px;font-weight:700}
.flow-title small{color:var(--faint);font-size:12px}
.flow-body{display:flex;align-items:center;gap:22px;padding:18px 20px;max-width:640px}
.flow-donut{position:relative;flex:none;width:124px;height:124px}
.flow-donut svg{display:block;width:100%;height:100%;transform:rotate(-90deg)}
.flow-donut circle{fill:none;stroke-width:14}
.flow-track{stroke:var(--line)}
.flow-sell{stroke:var(--red)}
.flow-buy{stroke:var(--green)}
.flow-buy,.flow-sell{transition:stroke-dasharray .6s var(--ease)}
.flow-center{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
}
.flow-center b{font-size:22px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.flow-center small{margin-top:3px;color:var(--muted);font-size:11px}
.flow-legend{flex:1;min-width:0;display:grid;gap:14px}
.flow-row{display:grid;grid-template-columns:10px 1fr auto;align-items:center;gap:8px}
.flow-row .dot{width:10px;height:10px;border-radius:50%}
.flow-row .dot.buy{background:var(--green)}
.flow-row .dot.sell{background:var(--red)}
.flow-lab{font-size:14px;font-weight:600;min-width:0}
.flow-lab small{display:block;margin-top:1px;color:var(--faint);font-size:11px;font-weight:400;white-space:nowrap}
.flow-row strong{font-size:18px;font-weight:700;font-variant-numeric:tabular-nums}
.flow-heat{padding:14px 20px 4px;border-top:1px solid var(--line)}
.heat-badge{
    display:inline-block;
    padding:3px 12px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
    background:#f1f1f3;
    color:var(--muted);
}
.heat-badge[data-level="hot"]{background:var(--brand-soft);color:#a87c00}
.heat-badge[data-level="cold"]{background:rgba(47,111,214,.10);color:#2f6fd6}
.flow-heat p{max-width:960px;margin-top:10px;color:var(--text);font-size:13px;line-height:1.85}
.flow-note{padding:6px 20px 16px;color:var(--faint);font-size:11px;line-height:1.7}

/* 清算地图（真实强平事件的价格分布） */
.liq,.wh{padding:16px 20px 18px}
.liq-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.liq-head h3{font-size:15px;font-weight:700}
.liq-ranges{display:flex;gap:6px}
.liq-ranges button,.liq-ranges a{
    padding:4px 12px;
    border:0;
    border-radius:999px;
    background:#f5f5f5;
    color:var(--muted);
    font-size:12px;
    font-weight:500;
    cursor:pointer;
    transition:background .18s,color .18s;
}
.liq-ranges button:hover,.liq-ranges a:hover{color:var(--text)}
.liq-ranges button.active,.liq-ranges a.active{background:var(--brand);color:#fff}
.liq-sum{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px;max-width:640px}
.liq-sum[hidden],.liq-chart[hidden],.liq-axis[hidden],.liq-recent[hidden],.liq-now[hidden]{display:none}
.liq-sum span{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:12px}
.liq-sum .dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.liq-sum .dot.buy{background:var(--green)}
.liq-sum .dot.sell{background:var(--red)}
.liq-sum strong{display:block;margin-top:3px;font-size:17px;font-weight:700;font-variant-numeric:tabular-nums}
.liq-sum small{color:var(--faint);font-size:11px}
.liq-chart{position:relative;height:160px;margin-top:22px;touch-action:pan-y;cursor:crosshair}
.liq-chart svg{display:block;width:100%;height:100%;overflow:visible}
/* 按价格分布的柱状图：一根柱子 = 这个价位真实发生过的强平金额，绿色多头、红色空头，
   柱子越高这个价位的强平越多——直接对应「哪个价位出过事」，比累计曲线直观 */
.liq-chart .bar-l{fill:var(--green)}
.liq-chart .bar-s{fill:var(--red)}
.liq-chart .grid{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
.liq-chart .hl{fill:rgba(9,9,11,.06)}
.liq-now{position:absolute;top:-16px;bottom:0;width:0;border-left:1.5px dashed var(--brand);pointer-events:none}
.liq-now span{
    position:absolute;
    top:0;
    left:0;
    transform:translateX(-50%);
    padding:1px 6px;
    border-radius:4px;
    background:var(--brand);
    color:#fff;
    font-size:10px;
    white-space:nowrap;
}
.liq-tip{
    position:absolute;
    bottom:calc(100% + 6px);
    left:0;
    z-index:2;
    padding:5px 9px;
    border-radius:6px;
    background:var(--text);
    color:#fff;
    font-size:11px;
    line-height:1.5;
    white-space:nowrap;
    font-variant-numeric:tabular-nums;
    pointer-events:none;
    display:none;
}
.liq-axis{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-top:6px;color:var(--muted);font-size:11px;font-variant-numeric:tabular-nums}
.liq-axis em{font-style:normal;color:var(--faint);text-align:center;flex:1}
/* 清算热力图 */
.liq-heat{margin-top:22px;padding-top:16px;border-top:1px solid var(--line)}
.liq-heat[hidden]{display:none}
.liq-heat-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.liq-heat-head h4{font-size:14px;font-weight:700}
.liq-heat-legend{display:inline-flex;align-items:center;gap:6px;color:var(--faint);font-size:11px}
.liq-heat-legend i{display:inline-block;width:72px;height:8px;border-radius:4px;background:linear-gradient(90deg,#fde68a,#f59e0b,#dc2626)}
.liq-heat-body{display:flex;gap:8px}
.liq-heat-plot{position:relative;flex:1;min-width:0;height:240px;cursor:crosshair;touch-action:pan-y}
.liq-heat-plot svg{display:block;width:100%;height:100%;border-radius:6px;overflow:hidden}
.liq-heat-plot .bg{fill:var(--surface2)}
.liq-heat-plot .pl{fill:none;stroke:var(--text);stroke-width:1.5;stroke-opacity:.75;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.liq-heat-plot .hl{fill:none;stroke:var(--text);stroke-width:1.5;vector-effect:non-scaling-stroke}
.liq-heat-y{position:relative;flex:none;width:64px;height:240px;color:var(--muted);font-size:11px;font-variant-numeric:tabular-nums}
.liq-heat-y span{position:absolute;left:0;transform:translateY(-50%);white-space:nowrap}
.liq-heat-y span:first-child{transform:none}
.liq-heat-y span:last-child{transform:translateY(-100%)}
.liq-heat-x{position:relative;height:18px;margin:4px 72px 0 0;color:var(--muted);font-size:11px;font-variant-numeric:tabular-nums}
.liq-heat-x span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
.liq-heat-x span:first-child{transform:none}
.liq-heat-x span:last-child{transform:translateX(-100%)}
.liq-heat-note{margin-top:8px;color:var(--faint);font-size:12px;line-height:1.7}
.liq-heat-note b{color:var(--muted);font-weight:600}
@media(max-width:600px){
    .liq-heat-plot,.liq-heat-y{height:200px}
    .liq-heat-y{width:56px}
    .liq-heat-x{margin-right:64px}
}
.liq-note{margin-top:10px;padding:8px 10px;border-radius:8px;background:var(--surface2,#f7f7f8);color:var(--muted);font-size:12px;line-height:1.7}
.liq-note b{color:var(--text,#111);font-weight:600}
.liq-note[hidden]{display:none}
.liq-recent{margin-top:14px}
.liq-recent .r{display:grid;grid-template-columns:1.2fr .9fr 1.2fr 1fr;gap:8px;padding:7px 0;border-top:1px solid var(--line);font-size:12px;font-variant-numeric:tabular-nums}
.liq-recent .r span:nth-child(n+3){text-align:right}
.liq-recent .r.h{color:var(--faint);font-size:11px}
.liq-state{padding:22px 4px;text-align:center;color:var(--muted);font-size:13px;line-height:1.8}
.liq-state[hidden]{display:none}
/* 多空清算失衡 + 清算加速度 */
.liq-bias{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.liq-bias[hidden],.liq-zones[hidden],.liq-cas[hidden],.liq-replay[hidden]{display:none}
.liq-card{padding:10px 12px;border:1px solid var(--line);border-radius:10px;min-width:0}
.liq-card-h{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--muted);font-size:12px}
.liq-card-h b{font-size:13px;font-weight:700;color:var(--text)}
.liq-card-h b.up{color:var(--green)}
.liq-card-h b.down{color:var(--red)}
.liq-card-h b.acc-hot{color:#d97706}
.liq-card-h b.acc-cool{color:#2563eb}
.liq-card-h b.acc-flat{color:var(--muted)}
.liq-ratio{display:flex;height:8px;margin:10px 0 8px;border-radius:4px;overflow:hidden;background:var(--surface2)}
.liq-ratio i{display:block;height:100%}
.liq-ratio i.l{background:var(--green)}
.liq-ratio i.s{background:var(--red)}
.liq-card-f{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;color:var(--faint);font-size:11px;font-variant-numeric:tabular-nums}
.liq-spark{display:block;width:100%;height:26px;margin:6px 0 6px}
.liq-spark rect{fill:var(--faint);opacity:.55}
.liq-spark rect.cur{fill:#d97706;opacity:1}
/* 清算密集区 / 连环清算事件（同一套表格样式） */
.liq-zones,.liq-cas{margin:4px 0 16px}
.liq-cas{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.liq-zones-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:6px;flex-wrap:wrap}
.liq-zones-h h4{font-size:14px;font-weight:700}
.liq-zones-h span{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
.liq-zones-h b{font-weight:700}
.liq-zones .z,.liq-cas .c{display:grid;gap:8px;align-items:center;padding:7px 0;border-top:1px solid var(--line);font-size:12px;font-variant-numeric:tabular-nums}
.liq-zones .z{grid-template-columns:1.6fr .8fr .9fr 1fr .8fr}
.liq-cas .c{grid-template-columns:1.1fr .9fr 1.1fr 1.7fr 1.1fr}
.liq-zones .z span:nth-child(n+2),.liq-cas .c span:nth-child(n+3){text-align:right}
.liq-zones .z.h,.liq-cas .c.h{color:var(--faint);font-size:11px}
.liq-zones .z.in{background:rgba(230,172,0,.08)}
.liq-zones .z.now{display:block;padding:4px 0;border-top:1px dashed var(--brand);color:var(--brand);font-size:11px;font-weight:600;text-align:center}
.liq-zones .z.now span{text-align:center}
.z-mix{display:block;justify-self:end;width:64px;height:6px;border-radius:3px;background:var(--red);overflow:hidden}
.z-mix i{display:block;height:100%;background:var(--green)}
.liq-zones em,.liq-cas em{font-style:normal}
.liq-zones em[class^="st-"]{display:inline-block;padding:1px 6px;border-radius:4px;font-size:11px;font-weight:600}
.st-touch{background:rgba(230,172,0,.16);color:#a16207}
.st-brk{background:rgba(229,72,77,.1);color:var(--red)}
.st-rel{background:var(--surface2);color:var(--muted)}
.liq-cas small{font-size:11px}
.liq-cas .c span:nth-child(n+4),.liq-zones .z span{white-space:nowrap}
.liq-cas .tier{display:inline-block;margin-right:6px;padding:0 5px;border-radius:4px;font-size:10px;font-weight:700;color:#fff;vertical-align:1px}
.tier.t1{background:#f59e0b}
.tier.t2{background:#ea580c}
.tier.t3{background:#dc2626}
.liq-zones-note{margin-top:6px;color:var(--faint);font-size:11px;line-height:1.7}
.liq-zones-note b{color:var(--muted);font-weight:600}
/* 柱状图叠加：柱子区只有底色带和细虚线；上方标签道放大额事件，下方标签道放密集区距离 */
.liq-chart{margin-bottom:22px}
.liq-marks{position:absolute;inset:0;pointer-events:none}
.liq-marks .lz{position:absolute;top:0;bottom:0;background:rgba(230,172,0,.1);border-left:1px solid rgba(230,172,0,.4);border-right:1px solid rgba(230,172,0,.4)}
.liq-marks .lz.st-rel{background:rgba(113,113,122,.07);border-color:rgba(113,113,122,.25)}
.liq-marks .lz.st-brk{background:rgba(229,72,77,.06);border-color:rgba(229,72,77,.3)}
.liq-marks .lzt{position:absolute;top:calc(100% + 4px);height:15px;line-height:15px;border-radius:3px;text-align:center;font-size:10px;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums;background:var(--surface2);color:var(--muted)}
.liq-marks .lzt.st-touch{background:rgba(230,172,0,.18);color:#a16207}
.liq-marks .lzt.st-brk{background:rgba(229,72,77,.1);color:var(--red)}
.liq-marks .lbl{position:absolute;top:0;bottom:0;width:0;border-left:1px dashed;opacity:.55}
.liq-marks .lbl.t1{border-color:#f59e0b}
.liq-marks .lbl.t2{border-color:#ea580c}
.liq-marks .lbl.t3{border-color:#dc2626}
.liq-marks .lb{position:absolute;top:-17px;height:15px;display:flex;align-items:center;gap:3px;padding:0 5px 0 4px;border-radius:4px;color:#fff;font-size:10px;font-weight:700;white-space:nowrap;pointer-events:auto;cursor:default}
.liq-marks .lb.t1{background:#f59e0b}
.liq-marks .lb.t2{background:#ea580c}
.liq-marks .lb.t3{background:#dc2626}
.liq-marks .lb i{flex:none;width:6px;height:6px;transform:rotate(45deg);background:#fff}
.liq-marks .lb.dot{width:12px;padding:0;justify-content:center;border-radius:50%;height:12px;top:-15px}
.liq-marks .lb.dot i{width:4px;height:4px}
/* 热力图叠加：连环清算圆圈 + 回放蒙层 */
.liq-heat-marks{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:6px}
.liq-heat-marks .hm{position:absolute;transform:translate(-50%,-50%);border-radius:50%;border:1.5px solid;transition:opacity .15s}
.liq-heat-marks .hm.l{border-color:var(--green);background:rgba(22,163,74,.15)}
.liq-heat-marks .hm.s{border-color:var(--red);background:rgba(229,72,77,.15)}
.liq-heat-marks .hm.big{border-width:2.5px}
.liq-heat-marks .hm span{position:absolute;bottom:100%;text-align:center;box-sizing:border-box;margin-bottom:2px;padding:0 4px;border-radius:3px;background:var(--text);color:#fff;font-size:9px;font-weight:700;white-space:nowrap}
.liq-heat-marks .hm.dn span{bottom:auto;top:100%;margin:2px 0 0}
.liq-heat-plot .mask{fill:var(--surface);opacity:.82}
.liq-heat-plot .cursor{stroke:var(--brand);stroke-width:2;vector-effect:non-scaling-stroke}
.liq-replay{display:flex;align-items:center;gap:10px;margin:8px 72px 0 0}
.liq-replay button{flex:none;width:30px;height:26px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--text);font-size:11px;cursor:pointer}
.liq-replay button:hover{border-color:var(--brand);color:var(--brand)}
.liq-replay input{flex:1;min-width:80px;accent-color:var(--brand)}
.liq-replay-info{flex:none;color:var(--muted);font-size:11px;font-variant-numeric:tabular-nums;white-space:nowrap}
.liq-replay-info b{font-weight:600}
@media (max-width:720px){
    .liq-bias{grid-template-columns:1fr}
    .liq-replay{flex-wrap:wrap;margin-right:0}
    .liq-replay-info{flex-basis:100%;white-space:normal}
    .liq-zones .z{grid-template-columns:1.5fr .8fr .9fr .8fr;font-size:11px}
    .liq-zones .z span:nth-child(4){display:none}
    /* 连环清算：窄屏改成两行卡片——第一行 时间 · 方向 · 金额，第二行 笔数/持续 · 价格变动，都不折行 */
    .liq-cas .c.h{display:none}
    .liq-cas .c{grid-template-columns:auto 1fr auto;grid-template-areas:"t s a" "n n m";gap:4px 8px;padding:9px 0}
    .liq-cas .c span{white-space:nowrap}
    .liq-cas .c span:nth-child(1){grid-area:t;font-weight:600}
    .liq-cas .c span:nth-child(2){grid-area:s;text-align:left;font-size:11px}
    .liq-cas .c span:nth-child(3){grid-area:n;text-align:left;color:var(--faint);font-size:11px}
    .liq-cas .c span:nth-child(4){grid-area:m;text-align:right;color:var(--muted);font-size:11px}
    .liq-cas .c span:nth-child(5){grid-area:a;text-align:right;font-weight:700;font-size:13px}
}

/* 24H 概览里的永续合约指标：资金费率 / 未平仓量 / 多空账户比 / 24H 爆仓（有永续合约时才显示） */
.dv-cell[hidden]{display:none!important}
.dv-cell.stale{opacity:.5}
.snapshot-item em{display:block;margin-top:5px;font-style:normal;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;line-height:1.5}
.snapshot-item em b{font-weight:600}
.snapshot-item em i{font-style:normal;margin-left:6px;color:var(--faint)}
.snapshot-item em small{display:block;color:var(--faint);font-size:11px}
.snapshot-item em.up,.snapshot-item em b.up{color:var(--green)}
.snapshot-item em.down,.snapshot-item em b.down{color:var(--red)}
.snapshot-item em .tag{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:600;background:#f1f1f3;color:var(--muted)}
.snapshot-item em .tag[data-level="warm"]{background:var(--brand-soft);color:#a87c00}
.snapshot-item em .tag[data-level="hot"]{background:var(--red-soft);color:var(--red)}
.snapshot-item em .tag[data-level="cool"]{background:rgba(47,111,214,.10);color:#2f6fd6}
.snapshot-item em .tag[data-level="cold"]{background:rgba(47,111,214,.16);color:#2f6fd6}
.snapshot-item em .tag[data-level="long"]{background:var(--green-soft);color:var(--green)}
.snapshot-item em .tag[data-level="short"]{background:var(--red-soft);color:var(--red)}
/*
 * 宽屏：左边「24H 价格区间」条（最低 — 当前价 — 最高 + 振幅），右边 4 列数据：
 * 第一行 成交量 / 成交额 / 加权均价 / 成交笔数，第二行（有永续合约时）资金费率 / 未平仓量 / 多空比 / 24H 爆仓。
 * 列之间是上下留白的细竖线，两行之间一条细横线；「最高 / 最低」两格只在手机端显示（宽屏由区间条代替）。
 */
.snap-range{display:none}
@media(min-width:901px){
    .snapshot{grid-template-columns:minmax(300px,1.45fr) repeat(4,minmax(0,1fr))}
    .snapshot .sn-hl{display:none}

    .snap-range{
        display:flex;
        flex-direction:column;
        justify-content:center;
        grid-column:1;
        grid-row:1;
        padding:20px 28px;
        border-right:1px solid var(--line);
    }
    .snapshot.has-deriv .snap-range{grid-row:1 / span 2}
    .sr-head{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;color:var(--muted)}
    .sr-head em{font-style:normal}
    .sr-head b{margin-left:4px;color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
    .sr-bar{position:relative;height:6px;margin:18px 0 14px;border-radius:3px;background:#f0f0f2}
    .sr-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:linear-gradient(90deg,var(--brand-3),var(--brand));transition:width .4s var(--ease)}
    .sr-bar b{
        position:absolute;top:50%;
        width:14px;height:14px;
        border:3px solid var(--brand);
        border-radius:50%;
        background:#fff;
        box-shadow:0 1px 4px rgba(0,0,0,.14);
        transform:translate(-50%,-50%);
        transition:left .4s var(--ease);
    }
    .sr-ends{display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}
    .sr-ends span:last-child{text-align:right}
    .sr-ends strong{display:block;margin-top:3px;font-size:16px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}

    .snapshot-item{position:relative;border-right:0;padding:18px 22px}
    .snapshot-item + .snapshot-item::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:1px;background:var(--line)}
    /* 每行第一格紧挨着区间条（它自己有右边线），不再画 */
    .snapshot .sn-hl + .snapshot-item::before,
    .snapshot .snapshot-item.dv-first::before{display:none}
    .snapshot-item span{font-size:12px;line-height:18px}
    .snapshot-item span i{margin-right:3px}
    .snapshot-item strong{margin-top:6px;font-size:17px;font-weight:600;line-height:24px}
    .snapshot-item em{margin-top:4px}
    .snapshot.has-deriv .dv-cell{box-shadow:inset 0 1px 0 var(--line)}
}

/* 历史走势 */
.hist{padding:14px 16px 16px}
.hist-picker{
    max-width:520px;
    display:flex;
    align-items:flex-end;
    gap:8px;
    margin-bottom:10px;
}
.hist-picker i{
    padding-bottom:9px;
    font-style:normal;
    color:var(--faint);
    font-size:12px;
}
.hist-date{flex:1;min-width:0}
.hist-date span{display:block;margin-bottom:4px;color:var(--muted);font-size:11px}
.hist-date input{
    width:100%;
    min-width:0;
    height:36px;
    padding:0 8px;
    border:1px solid var(--line);
    border-radius:10px;
    background:#fff;
    color:var(--text);
    font:inherit;
    font-size:13px;
    outline:none;
    transition:border-color .18s;
}
.hist-date input:focus{border-color:var(--brand)}
.hist-msg{
    margin:-4px 0 12px;
    color:var(--red);
    font-size:12px;
}
.hist-msg[hidden]{display:none}
.hist-ranges{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.hist-ranges button{
    flex:0 0 auto;
    padding:5px 12px;
    border:0;
    border-radius:999px;
    background:#f5f5f5;
    color:var(--muted);
    font-size:12px;
    font-weight:500;
    cursor:pointer;
    transition:background .18s,color .18s;
}
.hist-ranges button:hover{color:var(--text)}
.hist-ranges button.active{background:var(--brand);color:#fff}

.hist-summary{
    max-width:640px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
    margin-bottom:12px;
}
.hist-summary span{display:block;color:var(--muted);font-size:11px}
.hist-summary strong{
    display:block;
    margin-top:2px;
    font-size:14px;
    font-weight:700;
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
}

.hist-chart{
    position:relative;
    height:150px;
    margin:26px 0 10px;
    touch-action:pan-y;
    cursor:crosshair;
}
.hist-chart svg{display:block;width:100%;height:100%;overflow:visible}
.hist-chart .line{fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.hist-chart .area{stroke:none;opacity:.12;fill:currentColor}
.hist-chart.up{color:var(--green)}
.hist-chart.down{color:var(--red)}
.hist-cross{
    position:absolute;
    top:0;
    bottom:0;
    width:1px;
    background:var(--faint);
    opacity:.6;
    pointer-events:none;
    display:none;
}
.hist-tip{
    position:absolute;
    top:-24px;
    left:0;
    z-index:1;
    padding:3px 8px;
    border-radius:6px;
    background:var(--text);
    color:#fff;
    font-size:11px;
    white-space:nowrap;
    font-variant-numeric:tabular-nums;
    pointer-events:none;
    display:none;
}
.hist-state{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--faint);
    font-size:12px;
}
.hist-state[hidden]{display:none}

.hist-row{
    display:grid;
    grid-template-columns:1.25fr 1.2fr .9fr 1.1fr;
    gap:8px;
    padding:9px 0;
    border-bottom:1px solid var(--line);
    font-size:12px;
    font-variant-numeric:tabular-nums;
}
.hist-row span:nth-child(n+2){text-align:right}
.hist-head{
    padding:8px 0;
    color:var(--faint);
    font-size:11px;
}
.hist-more{
    display:block;
    width:100%;
    margin-top:12px;
    padding:9px 0;
    border:1px solid var(--line);
    border-radius:999px;
    background:#fff;
    color:var(--muted);
    font-size:12px;
    cursor:pointer;
    transition:border-color .2s,color .2s;
}
.hist-more:hover{border-color:var(--brand-3);color:var(--text)}
.hist-more[hidden]{display:none}

/* 数据（主力资金净流入）标签页 */
.fund{padding:16px 16px 18px}
.fund-sum{margin:2px 0 18px}
.fund-sum[hidden]{display:none}
.fund-sum span{color:var(--muted);font-size:12px}
.fund-sum strong{
    display:inline-block;
    margin:0 6px;
    font-size:22px;
    font-weight:700;
    font-variant-numeric:tabular-nums;
}
.fund-sum small{color:var(--faint);font-size:11px}
.fund-sum em{font-style:normal}
.fund-up{color:var(--green)}
.fund-down{color:var(--red)}
.fund-hint{margin:-8px 0 2px;color:var(--faint);font-size:12px;line-height:1.6}
.fund-hint[hidden]{display:none}

/* 资金流向分析：区间选择 */
.fund-ranges{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 16px}
.fund-ranges button{flex:1 1 auto;min-width:0;padding:5px 8px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--muted);font-size:12px;white-space:nowrap;cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.fund-ranges button:hover{border-color:var(--brand-3);color:var(--text)}
.fund-ranges button.active{background:var(--brand-soft);border-color:var(--brand);color:var(--text);font-weight:600}
.fund-break-state{padding:26px 4px;text-align:center;color:var(--muted);font-size:13px;line-height:1.8}
.fund-break-state[hidden]{display:none}
.fund-break-body[hidden]{display:none}

/* 环形图 + 图例。环形本身画在 <g transform="rotate(-90)"> 里，见 ss_fund_donut_svg() / fundDonutSvg()；
   不在环上标百分比，精确数字都在右侧图例（颜色跟环形分段同一套 SS_FUND_COL） */
.fund-donut-wrap{display:flex;align-items:center;gap:22px;flex-wrap:wrap;justify-content:center}
.fund-donut{position:relative;width:160px;height:160px;flex:none}
.fund-donut svg{display:block;width:100%;height:100%}
.fund-donut-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;pointer-events:none}
.fund-donut-center small{color:var(--faint);font-size:11px}
.fund-donut-center b{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
.fund-legend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px;flex:1 1 200px;min-width:0}
.fund-legend .lg{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);min-width:0}
.fund-legend .lg i{width:9px;height:9px;border-radius:2px;flex:none}
.fund-legend .lg span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fund-legend .lg b{flex:none;margin-left:auto;color:var(--text);font-variant-numeric:tabular-nums;font-weight:600}

/* 分档表 */
.fund-table{margin-top:18px;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.ft-row{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1.3fr) minmax(0,1.3fr) minmax(0,1.3fr);align-items:center;gap:6px;padding:10px 12px;font-size:13px;font-variant-numeric:tabular-nums}
.ft-row + .ft-row{border-top:1px solid var(--line)}
.ft-row > span{display:flex;align-items:center;gap:6px;color:var(--muted)}
.ft-row > b{text-align:right;font-weight:600;overflow-wrap:break-word}
.ft-head{background:var(--surface2)}
.ft-head span{color:var(--faint);font-weight:500;font-size:12px}
.ft-head span:not(:first-child){justify-content:flex-end;text-align:right}
.ft-head i{font-style:normal}
.ft-dot{width:9px;height:9px;border-radius:2px;flex:none}
.ft-dot.ft-big{background:#16a34a}
.ft-dot.ft-mid{background:#5cc98d}
.ft-dot.ft-sml{background:#a7e3c2}
.ft-total{background:var(--surface2)}
.ft-total > span{color:var(--text);font-weight:600}
.ft-net.up{color:var(--green)}
.ft-net.down{color:var(--red)}
.fund-break-note{margin-top:10px;color:var(--faint);font-size:12px;line-height:1.6}
.fund-break-note[hidden]{display:none}

.fund-sec{margin-top:22px}
.fund-sec[hidden]{display:none}
.fund-sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:12px}
.fund-sec-head h3{margin:0;font-size:14px;font-weight:600}
.fund-sec-head small{color:var(--faint);font-size:11px}
.fund-line-total{font-size:13px;font-weight:700}
.fund-line-total small{margin-left:4px;font-weight:400;color:var(--faint);font-size:11px}

/* 5×24h 大单净流入：柱状图（等比缩放的内联 SVG，文字不拉伸） */
/* 固定高度、不保比例拉伸——和下面的折线图（.fund-line）一样。viewBox 360:200 保比例的话，
   PC 端这块面板一宽，柱状图跟着等比拉得很高，跟旁边的环形图、表格完全不协调；宽度还是跟随容器，
   只是高度不再随宽度联动。190px 是手机宽度下（容器 ~340~380px）等比例出来的高度，视觉上已经验证过合适，
   固定用它，宽屏窄屏看着都一样。*/
.fund-bars{position:relative;height:190px}
.fund-bars svg{display:block;width:100%;height:100%}
.fund-bars .bar-up{fill:var(--green)}
.fund-bars .bar-down{fill:var(--red)}
.fund-bars .bar-hit{fill:transparent;cursor:pointer}
.fund-bars .zero{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
.fund-bars .sep{stroke:var(--line);stroke-width:1;stroke-dasharray:3 3;vector-effect:non-scaling-stroke}
.fund-bar-labels{position:absolute;inset:0;pointer-events:none}
.fbl{position:absolute;transform:translate(-50%,-50%);font-size:12px;font-variant-numeric:tabular-nums;color:var(--muted);white-space:nowrap}
.fbl-up{color:var(--green)}
.fbl-down{color:var(--red)}
.fbl-zero{color:var(--faint)}
.fbl-day{color:var(--faint)}
.fbl-day-cur{color:var(--muted);font-weight:600}

/* 24h 净流入：折线图（拉伸 SVG + HTML 覆盖标签，与历史走势同款）。
   正负分段着色：穿零处插值断开，涨绿跌红，呼应交易所同款样式 */
.fund-line{position:relative;height:150px;margin-top:4px;touch-action:pan-y;cursor:crosshair}
.fund-line svg{display:block;width:100%;height:100%;overflow:visible}
.fund-line .line-up{fill:none;stroke:var(--green);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.fund-line .line-down{fill:none;stroke:var(--red);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.fund-line .area-up{stroke:none;opacity:.16;fill:var(--green)}
.fund-line .area-down{stroke:none;opacity:.16;fill:var(--red)}
.fund-yaxis{position:absolute;inset:0;pointer-events:none}
.fund-grid{position:absolute;left:0;right:0;border-top:1px dashed var(--line);opacity:.7}
.fund-y{position:absolute;left:0;transform:translateY(-50%);color:var(--faint);font-size:11px;font-variant-numeric:tabular-nums;pointer-events:none;background:var(--surface);padding-right:4px}
.fund-cross{position:absolute;top:0;bottom:0;width:1px;background:var(--brand);opacity:0;pointer-events:none}
.fund-xaxis{display:flex;justify-content:space-between;margin-top:6px;color:var(--faint);font-size:11px;font-variant-numeric:tabular-nums}
.fund-tip{
    position:absolute;
    z-index:3;
    display:none;
    padding:5px 8px;
    border-radius:6px;
    background:rgba(9,9,11,.86);
    color:#fff;
    font-size:11px;
    line-height:1.5;
    white-space:nowrap;
    pointer-events:none;
    transform:translate(-50%,-118%);
}
.fund-note{margin-top:18px;padding:10px 12px;border-radius:8px;background:var(--surface2);color:var(--muted);font-size:12px;line-height:1.7}
.fund-note b{color:var(--text);font-weight:600}
.fund-state{padding:26px 4px;text-align:center;color:var(--muted);font-size:13px;line-height:1.8}
.fund-state[hidden]{display:none}

/* 数据页顶部「市场情绪」：恐惧与贪婪指数 + 大家看法，两张卡片并排（窄屏上下） */
.mood{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:16px 16px 0}
.mood-card{display:flex;flex-direction:column;min-width:0;padding:16px 18px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.mood-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:12px}
.mood-head h3{font-size:16px;font-weight:700;letter-spacing:-.2px}
.mood-head small{flex:none;color:var(--faint);font-size:12px}
.mood-note{margin-top:auto;padding-top:12px;color:var(--faint);font-size:12px;line-height:1.6}

/* 恐惧与贪婪指数 */
.fng-main{display:flex;align-items:center;justify-content:center;gap:24px;flex-wrap:wrap}
.fng-gauge{display:block;width:210px;max-width:100%;height:auto;flex:none}
.fng-num{font-size:34px;font-weight:800;fill:var(--text);font-family:var(--num-font)}
.fng-lv{font-size:15px;font-weight:700;font-family:var(--num-font)}
.fng-legend{list-style:none;display:grid;gap:7px;font-size:13px;color:var(--muted)}
.fng-legend li{display:flex;align-items:center;gap:8px}
.fng-legend li.on{color:var(--text);font-weight:700}
.fng-legend i{width:10px;height:10px;border-radius:50%;flex:none}
.fng-legend small{margin-left:auto;padding-left:10px;color:var(--faint);font-size:11px;font-weight:400;font-variant-numeric:tabular-nums}
.fng-read{margin-top:12px;color:var(--muted);font-size:13px;line-height:1.7}
.fng-hist{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px}
.fng-hist li{display:flex;flex-direction:column;align-items:center;gap:1px;padding:8px 6px;border-radius:8px;background:var(--surface2)}
.fng-hist span{color:var(--faint);font-size:12px}
.fng-hist b{font-size:18px;font-weight:800;font-variant-numeric:tabular-nums}
.fng-hist em{font-style:normal;color:var(--muted);font-size:12px}
.fng-empty{padding:40px 0;text-align:center;color:var(--faint);font-size:13px}

/* 大家看法：看涨 / 看跌投票（左红右绿） */
.sent-bar{display:flex;height:8px;margin-top:6px;border-radius:4px;overflow:hidden;background:var(--green)}
.sent-bar i{display:block;height:100%}
.sent-bar i.down{background:var(--red);transition:width .4s}
.sent-bar i.up{flex:1}
.sent-bar.is-empty{background:var(--line)}
.sent-bar.is-empty i.down{background:transparent}
.sent-pct{display:flex;justify-content:space-between;gap:8px;margin-top:10px;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.sent-pct b{display:inline-flex;align-items:center;gap:5px}
.sent-pct .up{color:var(--green)}
.sent-pct .down{color:var(--red)}
.sent-btns{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}
.sent-btn{height:42px;border:0;border-radius:8px;font-size:15px;font-weight:700;cursor:pointer;transition:background .15s,color .15s,opacity .15s}
.sent-btn.up{color:var(--green);background:var(--green-soft)}
.sent-btn.down{color:var(--red);background:var(--red-soft)}
.sent-btn.up:hover:not(:disabled){background:rgba(22,163,74,.18)}
.sent-btn.down:hover:not(:disabled){background:rgba(229,72,77,.18)}
.sent-btn:disabled{cursor:default;opacity:.45}
.sent-btn.mine{opacity:1;color:#fff}
.sent-btn.up.mine{background:var(--green)}
.sent-btn.down.mine{background:var(--red)}
.sent-tip{margin-top:10px;color:var(--muted);font-size:12px;min-height:1.5em}
@media (max-width:900px){
    .mood{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
    .mood{padding:14px 16px 0;gap:12px}
    .mood-card{padding:14px 14px 12px}
    .mood-head h3{font-size:15px}
    .fng-main{gap:16px}
    .fng-gauge{width:180px}
    .sent-btn{height:38px;font-size:14px}
}

/* 标签页：市场深度 / 最新成交 / 历史走势 */
.tabs{
    display:flex;
    align-items:flex-end;
    gap:20px;
    padding:0 20px;
    border-bottom:1px solid var(--line);
    overflow-x:auto;
    scrollbar-width:none;
}
.tabs::-webkit-scrollbar{display:none}
.tab{
    position:relative;
    flex:none;
    white-space:nowrap;
    padding:16px 0 13px;
    border:0;
    background:none;
    color:var(--muted);
    font-size:15px;
    font-weight:500;
    cursor:pointer;
    transition:color .2s;
}
.tab:hover{color:var(--text)}
.tab.active{color:var(--text);font-weight:700}
.tab.active::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-1px;
    height:2px;
    border-radius:2px;
    background:var(--brand);
}
.tab-pane[hidden]{display:none}
.pane-meta{padding:10px 20px 0;text-align:right;color:var(--faint);font-size:12px}
/* 盘口页头：左边「现货 / 合约」切换（有永续合约才显示），右边价差 */
.book-meta{display:flex;align-items:center;justify-content:flex-end;gap:10px}
.book-meta .book-src{margin-right:auto}
.book-meta .book-src[hidden]{display:none}
.book-src button{padding:4px 12px}
.hist .pane-meta{padding:0 0 10px}

.depth-note{
    padding:10px 16px 14px;
    border-top:1px solid var(--line);
    color:var(--muted);
    font-size:12px;
    line-height:1.7;
}

@media(max-width:430px){
    .tabs{gap:13px;padding:0 14px}
    .tab{font-size:14px}                     /* 6 个标签（含「介绍」）在 375px 宽的屏幕上一行放下 */
}
/* 市场深度：卖盘 / 买盘左右平铺，最优价都排在最上面，中间价通栏 */
.depth{
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:16px;
    align-items:start;
}
.depth .ask-title{grid-column:1;grid-row:1}
.depth .bid-title{grid-column:2;grid-row:1;margin-top:0;padding-top:2px;border-top:0}
.depth .order-head-ask{grid-column:1;grid-row:2}
.depth .order-head-bid{display:grid;grid-column:2;grid-row:2}
.depth #asks{
    grid-column:1;
    grid-row:3;
    display:flex;
    flex-direction:column-reverse;
}
.depth #bids{grid-column:2;grid-row:3}
.depth .order-head,
.depth .order-row{gap:4px}

/* 窄屏（<480px）：卖盘/买盘依旧保持左右并排，仅收紧内边距、间距和字号，
 * 减少数量列被省略号截断的概率 */
@media(max-width:480px){
    .order{padding:12px 10px 16px}
    .depth{column-gap:8px}
    .order-head,.order-row{gap:3px}
    .order-head{font-size:10px}
    .order-row{font-size:10px;padding:5px 0}
}

/* 最新成交：不再套内部滚动框，跟随页面平铺展开 */
.trades{max-height:none;overflow:visible}
.trade-head{position:static}

@media(max-width:1100px){
    .info-layout{grid-template-columns:1fr}
}
@media(max-width:900px){
    /* 24H 概览：两列「名称在左、数值靠右」，6 项一屏全部显示，不再横向滑动 */
    .snapshot{
        grid-template-columns:1fr 1fr;
        column-gap:28px;
        padding:10px 18px;
    }
    .snapshot-item{
        display:flex;
        flex-wrap:wrap;
        align-items:baseline;
        justify-content:space-between;
        gap:8px;
        padding:7px 0;
        border-right:0;
    }
    .snapshot-item em{flex-basis:100%;margin-top:0;text-align:right}

    /* 永续合约的 4 项：各占整行、单行「名称 数值 …… 标签 / 变化」，不再挤在两列里另起一行 */
    .dv-cell{grid-column:1 / -1;flex-wrap:nowrap;align-items:center;gap:10px}
    .dv-cell span{flex:none;min-width:5.6em}        /* 名称列同宽，数值左边缘对齐 */
    .dv-cell strong{flex:none}
    .dv-cell em{flex:1 1 auto;flex-basis:auto;min-width:0;margin:0;text-align:right;white-space:nowrap}
    .dv-cell em small{display:none}                 /* 采集时长改放在小标题里 */
    .dv-cell.dv-first{flex-wrap:wrap;margin-top:6px;padding-top:12px;border-top:1px solid var(--line)}
    .dv-cell.dv-first::before{
        content:attr(data-head);
        flex-basis:100%;
        margin-bottom:2px;
        color:var(--faint);
        font-size:11px;
        font-weight:500;
    }
    .dv-cell.dv-first span{align-self:center}
    .snapshot-item span{font-size:12px;white-space:nowrap}
    .snapshot-item strong{
        margin-top:0;
        font-size:13px;
        font-weight:600;
        text-align:right;
        overflow:visible;
        text-overflow:clip;
    }
}
/* 货币符号：USD 显示 $，CNY 显示 ¥（由 <html data-ccy> 控制，切换币种时脚本更新） */
.money::before{content:"$";margin-right:.08em}
:root[data-ccy="CNY"] .money::before{content:"¥"}
/* 符号与数字同字号、同字重、同基线 */
.hero-price strong.money::before{
    margin-right:.05em;
    font-size:1em;
    font-weight:inherit;
}

.snapshot-title{display:none}
.snapshot-item span i{font-style:normal}
@media(max-width:430px){
    .snapshot{column-gap:20px;padding:10px 14px}
    .snapshot-title{
        display:block;
        grid-column:1 / -1;
        padding:2px 0 4px;
        font-size:11px;
        color:var(--faint);
    }
    .snapshot-item span{font-size:11.5px}
    .snapshot-item span i{display:none}
    .snapshot-item strong{font-size:12.5px}

    /* 顶栏导航在窄屏不换行 */
    .brand{white-space:nowrap}
}
@media(max-width:680px){
    /* 卡片通栏：内容区左右不留白，文字区自带 16px 内边距 */
    .container{width:100%}
    .topbar-inner{width:calc(100% - 32px)}
    .tb-right{gap:10px}
    /* 排行榜只留圆形图标，和搜索按钮一样大 */
    .tb-link{width:38px;padding:0;justify-content:center}
    .tb-link span{display:none}
    .sx{padding:12px}
    .brand{font-size:17px}
    .breadcrumb{padding:16px 16px 4px;font-size:12px}
    .hero{
        display:block;
        padding:10px 16px 28px;
    }
    .panel,.snapshot{
        border-left:0;
        border-right:0;
        border-radius:0;
    }
    .footer .container{padding:0 16px}
    .hero-price{text-align:left;margin-top:22px}
    .hero-row{justify-content:flex-start}
    .workspace,.info-layout{gap:16px;margin-top:16px}
    .flow-title{padding:14px 16px 0}
    .pane-meta{padding:8px 16px 0}
    .flow-body{padding:16px;gap:18px}
    .flow-heat{padding:12px 16px 4px}
    .flow-note{padding:6px 16px 14px}
    .liq,.wh{padding:14px 16px 16px}
    .panel-head{padding:14px 16px;min-height:56px}
    .panel-head h2{white-space:nowrap}

    /* 资金流向分析：环形图+图例改上下堆叠，分档表收紧字号，避免在窄屏被裁切 */
    .fund{padding:14px 16px 16px}
    .fund-donut-wrap{flex-direction:column;gap:14px}
    .fund-donut{margin:0 auto}
    .fund-legend{flex:none;width:100%}
    .ft-row{gap:4px;padding:9px 8px;font-size:12px}
    .ft-head span{font-size:11px}

    /*
     * 周期按钮：一行 6 个常用（1分 5分 15分 1时 4时 日）+「更多」，等分 7 列；
     * 「更多」点开后，30分 / 周 / 月 / 年 在按钮正下方竖排弹出（浮在图表右上角，不推开图表）。文字用短名，手机上不显示全屏按钮。
     */
    .chart-head{padding:10px 12px;min-height:0}
    .chart-head .chart-tools{
        display:grid;
        grid-template-columns:repeat(7,1fr);
        gap:4px 2px;
        overflow:visible;
    }
    .chart-head .chart-tools button,.chart-head .chart-tools a{padding:7px 0;text-align:center;font-size:12px}
    .chart-tools .kl-l{display:none}
    .chart-tools .kl-s{display:inline}
    .chart-head .chart-tools{position:relative}
    .chart-tools > a{order:1}
    .chart-tools .kl-more-btn{display:block;order:50;white-space:nowrap}   /* 排在 6 个常用周期之后（它们的 order 是 1～7） */
    .chart-tools .kl-more-btn i{font-style:normal;font-size:9px;margin-left:2px;display:inline-block;transition:transform .18s}
    .chart-tools.open .kl-more-btn i{transform:rotate(180deg)}
    .chart-tools .kl-drop{
        display:none;
        position:absolute;
        top:calc(100% + 6px);
        right:0;
        z-index:30;
        flex-direction:column;
        gap:2px;
        min-width:64px;
        padding:4px;
        background:var(--surface);
        border:1px solid var(--line);
        border-radius:12px;
        box-shadow:0 8px 24px rgba(0,0,0,.12);
    }
    .chart-tools.open .kl-drop{display:flex}
    .chart-head .chart-tools .kl-drop a{display:block;padding:8px 12px;border-radius:8px}
    .chart-head .chart-tools .chart-fs{display:none}
    #chart{height:420px}
    .content{padding:24px 20px 28px}
    .content h2{font-size:22px}
    .source{display:block}
    .source span+span{display:block;margin-top:5px}
}

/* ===== 市场深度 · 盘口分析（assets/depthx.js） ===== */
.dx-strip{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:12px;padding:12px 16px 4px}
.dx-imb,.dx-kpi,.dx-card{border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.dx-imb{padding:10px 12px 6px;min-width:0}
.dx-imb-head{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:13px}
.dx-seg{display:inline-flex;padding:2px;gap:2px;border:1px solid var(--line);border-radius:999px;background:#fff;flex:none}
.dx-seg button{border:0;background:transparent;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:600;color:var(--muted);cursor:pointer;white-space:nowrap}
.dx-seg button:hover:not(.active){background:var(--brand-soft);color:var(--text)}
.dx-seg button.active{background:var(--brand);color:#fff}
.dx-imb-bar{position:relative;height:10px;margin:10px 0 6px;border-radius:999px;background:var(--red);overflow:hidden}
.dx-imb-bar i{position:absolute;left:0;top:0;bottom:0;background:var(--green);border-right:2px solid #fff}
.dx-imb-bar::after{content:"";position:absolute;left:50%;top:-2px;bottom:-2px;width:1px;background:rgba(255,255,255,.9)}
.dx-imb-foot{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-size:12px;font-variant-numeric:tabular-nums}
.dx-imb-foot b{font-weight:600}
.dx-imb-foot strong{font-size:18px;font-weight:800}
.dx-imb-note{margin-top:2px;color:var(--muted);font-size:12px;line-height:1.5;min-height:36px}   /* 固定两行高，文字长短变化不推动下面的内容 */
.dx-spark{display:block;width:100%;height:30px;margin-top:4px}
.dx-spark path{fill:none;stroke:var(--brand);stroke-width:1.5;vector-effect:non-scaling-stroke}
.dx-spark .z{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
.dx-kpis{display:grid;grid-template-rows:repeat(3,auto);gap:8px;min-width:0}
.dx-kpi{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:baseline;padding:8px 12px;min-width:0}
.dx-kpi span{color:var(--muted);font-size:12px}
.dx-kpi b{justify-self:end;font-size:16px;font-weight:700;font-variant-numeric:tabular-nums}
.dx-kpi small{grid-column:1 / -1;justify-self:end;color:var(--faint);font-size:11px;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}

.dx{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:4px 16px 14px}
.dx-card{padding:12px 14px;min-width:0}
.dx-wide{grid-column:1 / -1}
.dx-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:10px}
.dx-head h3{font-size:14px;font-weight:700;white-space:nowrap}
.dx-head small{color:var(--faint);font-size:11px;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dx-head-hm{flex-wrap:wrap;align-items:center}
.dx-head-hm small{margin-left:auto}
/* 热力图全屏：整张卡片铺满浏览器窗口，图区占掉标题 / 说明以外的全部高度（depthx.js 的 ResizeObserver 自动按新尺寸重画） */
.dx-fs{flex:none;border:1px solid var(--line);background:#fff;border-radius:6px;padding:2px 8px;font-size:14px;line-height:1.4;color:var(--muted);cursor:pointer}
.dx-fs:hover{color:var(--text);background:var(--brand-soft)}
.dx-card.dx-full{position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;border-radius:0;border:0;padding:12px 14px;overflow:auto}
.dx-card.dx-full .dx-hm{flex:1 1 auto;height:auto;min-height:320px}
.dx-card.dx-full .dx-fs{color:#fff;background:var(--brand);border-color:var(--brand)}
html.dx-full-open{overflow:hidden}
.dx-seg[hidden]{display:none}
.dx-empty{padding:14px 0;text-align:center;color:var(--faint);font-size:12px}
.dx-verdict{margin-top:10px;padding:8px 10px;border-radius:8px;background:var(--surface2);color:var(--text);font-size:12px;line-height:1.6;min-height:55px;display:flex;align-items:center}
.dx-warn{margin-top:8px;color:#b45309;font-size:12px;line-height:1.6}
.dx-muted{color:var(--faint)}
.dx-small{margin-top:6px;font-size:11px}

/* 热力图 */
.dx-hm{position:relative;height:300px;margin:0 -14px;overflow:hidden;background:#0e1420}   /* 左右抵掉 .dx-card 的内边距：铺满卡片宽度 */
.dx-hm canvas{display:block;width:100%;height:100%}
.dx-hm-tip{position:absolute;display:none;pointer-events:none;padding:6px 8px;border-radius:6px;background:rgba(9,9,11,.88);color:#fff;font-size:11px;line-height:1.5;white-space:nowrap;font-variant-numeric:tabular-nums;z-index:2}
.dx-hm-sum{margin-top:8px;color:var(--muted);font-size:12px;line-height:1.7}
.dx-hm-sum[hidden]{display:none}
.dx-hm-legend{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;margin-top:8px;color:var(--muted);font-size:11px}
.dx-grad{display:inline-block;width:90px;height:8px;border-radius:4px;margin:0 -6px;background:linear-gradient(90deg,#0e1420,#1e3a8a 15%,#0d9488 40%,#facc15 70%,#fff)}
.dx-lg{display:inline-flex;align-items:center;gap:4px}
.dx-lg i{display:inline-block}
.dx-lg .l-mid,.dx-lg .l-bb,.dx-lg .l-ba{width:14px;height:2px}
.dx-lg .l-mid{height:4px;background:#fff;border:1px solid #0e1420;border-radius:1px}
.dx-lg .l-bb{background:#4ade80}
.dx-lg .l-ba{background:#f87171}
.dx-lg .d-buy,.dx-lg .d-sell{width:8px;height:8px;border-radius:50%;background:#22c55e}
.dx-lg .d-sell{background:#ef4444}

/* 买墙 / 卖墙 */
.dx-wall{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.8fr) minmax(0,.9fr) minmax(0,.7fr) minmax(0,1fr);gap:6px;align-items:center;padding:6px 0;font-size:12px;font-variant-numeric:tabular-nums;border-top:1px solid var(--line)}
.dx-wall span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.dx-wall:not(.dx-wall-h){height:29px}
.dx-wall-blank span{grid-column:1 / -1;color:var(--faint);font-size:11px;text-align:center}
.dx-wall-h{padding-top:0;border-top:0;color:var(--faint);font-size:11px}
.dx-wall-mid{padding:6px 0;border-top:1px dashed var(--faint);color:var(--muted);font-size:11px;text-align:center}
.dx-wall-mid + .dx-wall{border-top:0}
.dx-x{position:relative;height:16px;border-radius:4px;background:var(--surface2)}
.dx-x i{position:absolute;left:0;top:0;bottom:0;border-radius:4px}
.dx-wall.ask .dx-x i{background:var(--depth-ask)}
.dx-wall.bid .dx-x i{background:var(--depth-bid)}
.dx-x em{position:relative;padding-left:5px;font-style:normal;font-size:11px;line-height:16px;color:var(--text)}

/* 撤单监控 */
.dx-cx-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.dx-cx-grid > div{padding:7px 8px;border-radius:8px;background:var(--surface2);min-width:0}
.dx-cx-grid span{display:block;color:var(--muted);font-size:11px}
.dx-cx-grid b{display:block;font-size:14px;font-weight:700}
.dx-cx-grid small{display:block;color:var(--faint);font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dx-cx-list{margin-top:8px;height:260px;overflow:auto;overscroll-behavior:contain;contain:strict}   /* contain：框里的行再多，排版 / 重绘也不波及卡片其它部分 */   /* 固定高度：事件多了在框里滚动，不撑高卡片 */
.dx-cx{display:grid;grid-template-columns:58px minmax(0,.9fr) minmax(0,1fr) minmax(0,.9fr) minmax(0,1fr);gap:6px;align-items:center;padding:5px 0;border-top:1px solid var(--line);font-size:12px;font-variant-numeric:tabular-nums}
.dx-cx span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.dx-cx.fresh{animation:dx-fresh 1.6s ease-out}
@keyframes dx-fresh{from{background:var(--brand-soft)}to{background:transparent}}
.dx-cx span:first-child,.dx-cx span:last-child{color:var(--faint);font-size:11px}
.dx-tag{display:inline-block;margin-right:4px;padding:0 5px;border-radius:4px;font-style:normal;font-size:11px;line-height:17px;background:var(--surface2);color:var(--muted)}
.dx-tag.cancel{background:#fef3c7;color:#b45309}
.dx-tag.fill{background:#e0e7ff;color:#4338ca}
.dx-tag.new{background:var(--brand-soft);color:#8a6700}
.dx-tag.move{background:#f1f5f9;color:#475569}

/* 主动成交方向 */
.dx-flow{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr) minmax(0,.9fr) minmax(0,.9fr) minmax(0,.9fr);gap:6px;align-items:center;padding:6px 0;border-top:1px solid var(--line);font-size:12px;font-variant-numeric:tabular-nums}
.dx-flow span,.dx-flow b{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.dx-flow b{text-align:right;font-weight:600}
.dx-flow-h{padding-top:0;border-top:0;color:var(--faint);font-size:11px}
.dx-flow-h span:last-child{text-align:right}
.dx-flow-bar{position:relative;display:block;height:16px;border-radius:4px;background:var(--red-soft);overflow:hidden}
.dx-flow-bar i{position:absolute;left:0;top:0;bottom:0;background:rgba(22,163,74,.28)}
.dx-flow-bar em{position:relative;padding-left:5px;font-style:normal;font-size:11px;line-height:16px}
.dx-tape{margin-top:10px;padding-top:8px;border-top:1px solid var(--line)}
.dx-tape[hidden]{display:none}
.dx-tape-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:8px;align-items:center;padding:4px 0;font-size:12px}
.dx-tape-row > span:first-child{color:var(--muted)}
.dx-tape-row b{text-align:right}
.dx-cvd{display:block;width:100%;height:48px;margin-top:4px}
.dx-cvd path{fill:none;stroke:var(--brand);stroke-width:1.5;vector-effect:non-scaling-stroke}
.dx-cvd .z{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}

/* VWAP */
.dx-vw{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;align-items:baseline;padding:7px 0;border-top:1px solid var(--line);font-size:12px}
.dx-vw:first-child{border-top:0}
.dx-vw span{color:var(--muted)}
.dx-vw b{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;text-align:right}
.dx-vw small{grid-column:2;text-align:right;font-size:11px}
.dx-vw-split{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:6px}
.dx-vw-split > div{padding:7px 8px;border-radius:8px;background:var(--surface2)}
.dx-vw-split span{display:block;color:var(--muted);font-size:11px}
.dx-vw-split b{font-size:14px;font-variant-numeric:tabular-nums}

/* 滑点计算器 */
.dx-slip-form{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dx-slip-form input{flex:1 1 90px;min-width:0;height:30px;padding:0 10px;border:1px solid var(--line);border-radius:8px;font:inherit;font-size:13px;font-variant-numeric:tabular-nums;outline:none}
.dx-slip-form input:focus{border-color:var(--brand)}
.dx-presets{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.dx-presets button{padding:3px 10px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--muted);font-size:11px;cursor:pointer}
.dx-presets button:hover{border-color:var(--brand-3);color:var(--text)}
.dx-slip-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.dx-slip-grid > div{padding:7px 8px;border-radius:8px;background:var(--surface2);min-width:0}
.dx-slip-grid span{display:block;color:var(--muted);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dx-slip-grid b{display:block;font-size:13px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.dx-st-wrap{margin-top:10px}
.dx-st{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr);gap:6px;padding:5px 0;border-top:1px solid var(--line);font-size:12px;font-variant-numeric:tabular-nums}
.dx-st span:not(:first-child){text-align:right}
.dx-st-h{border-top:0;color:var(--faint);font-size:11px}

/* 深度变化记录 */
.dx-dh{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr) minmax(0,1.2fr) minmax(0,.5fr);gap:6px;padding:6px 0;border-top:1px solid var(--line);font-size:12px;font-variant-numeric:tabular-nums}
.dx-dh span:not(:first-child){text-align:right}
.dx-dh em{font-style:normal;font-size:11px}
.dx-dh-h{border-top:0;color:var(--faint);font-size:11px}
.dx-dh-svg{display:block;width:100%;height:80px;margin-top:6px;border-radius:6px;background:var(--surface2)}
.dx-dh-svg path{fill:none;stroke-width:1.5;vector-effect:non-scaling-stroke}
.dx-dh-svg .b{stroke:var(--green)}
.dx-dh-svg .a{stroke:var(--red)}

@media(max-width:900px){
    .dx-strip{grid-template-columns:minmax(0,1fr)}
    .dx-kpis{grid-template-rows:none;grid-template-columns:repeat(3,minmax(0,1fr))}
    .dx-kpi{grid-template-columns:minmax(0,1fr)}
    .dx-kpi b,.dx-kpi small{justify-self:start}
    .dx{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:480px){
    .dx-strip{padding:10px 10px 4px}
    .dx{padding:4px 10px 12px}
    .dx-kpi{padding:7px 8px}
    .dx-kpi b{font-size:14px}
    .dx-hm{height:240px}
    .dx-cx-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .dx-wall,.dx-flow,.dx-cx{font-size:11px;gap:4px}
}

/* ===== 巨鲸动向（/coin/xxx/whale/） ===== */
.wh-meta{margin:-4px 0 12px;color:var(--faint);font-size:12px}
.wh-empty{padding:28px 0;text-align:center;color:var(--muted);font-size:13px}
.wh a:hover{color:var(--brand)}
.wh-sum{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:14px}
.wh-sum>div{padding:10px 12px;border:1px solid var(--line);border-radius:10px}
.wh-sum span{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:12px}
.wh .dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none}
.wh .dot.buy{background:var(--green)}
.wh .dot.sell{background:var(--red)}
.wh-sum strong{display:block;margin:3px 0 1px;font-size:18px;font-weight:700;font-variant-numeric:tabular-nums}
.wh-sum small{color:var(--faint);font-size:11px}
.wh-sum small em{font-style:normal}
.wh-bar{margin-bottom:10px}
.wh-bar-track{height:8px;border-radius:4px;background:var(--red);overflow:hidden}
.wh-bar-track i{display:block;height:100%;background:var(--green);border-right:2px solid var(--surface)}
.wh-bar-lab{display:flex;justify-content:space-between;margin-top:6px;font-size:12px;color:var(--muted)}
/* 读法说明 */
.wh-legend{display:flex;flex-wrap:wrap;gap:6px 18px;margin-bottom:16px;padding:8px 10px;border-radius:8px;background:var(--surface2);color:var(--muted);font-size:12px;line-height:1.6}
.wh-legend span{display:flex;align-items:center;gap:6px}
.wh-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:18px;align-items:start}
.wh h4{display:flex;align-items:baseline;gap:8px;font-size:14px;font-weight:700;margin-bottom:8px}
.wh h4 small{color:var(--faint);font-size:11px;font-weight:400}
/* 身份标签 */
.wh-tag{display:inline-block;flex:none;padding:0 6px;border-radius:4px;font-size:11px;font-weight:700;line-height:18px;color:#fff}
.wh-fund{background:#6366f1}
.wh-mm{background:#94a3b8}
.wh-miner{background:#a16207}
.wh-named{background:var(--brand)}
.wh-whale{background:#0ea5e9}
.wh-name{font-weight:600}
.wh-who{display:flex;align-items:center;gap:6px;min-width:0}
/* 明细：每笔一张卡片，左侧色条表示方向 */
.wh-item{position:relative;padding:12px 12px 12px 15px;margin-bottom:10px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.wh-item::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0}
.wh-item.buy::before{background:var(--green)}
.wh-item.sell::before{background:var(--red)}
.wh-item-h{display:flex;align-items:center;gap:8px}
.wh-dir{display:inline-block;padding:0 7px;border-radius:4px;font-style:normal;font-size:12px;font-weight:700;line-height:22px;white-space:nowrap}
.wh-dir.buy{background:var(--green-soft);color:var(--green)}
.wh-dir.sell{background:var(--red-soft);color:var(--red)}
.wh-act{color:var(--muted);font-size:12px;white-space:nowrap}
.wh-usd{margin-left:auto;font-size:17px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.wh-item-say{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;margin-top:8px;font-size:14px;line-height:1.5}
.wh-item-say b{font-weight:700}
.wh-item-t{margin-top:2px;color:var(--faint);font-size:12px}
/* 完整地址：等宽字体，放不下就在任意位置换行，永远完整显示 */
.wh-addr-line{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:8px;padding:7px 9px;border-radius:8px;background:var(--surface2)}
.wh-full{flex:1 1 260px;min-width:0;user-select:all;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px;line-height:1.5;color:var(--text);word-break:break-all}
.wh-copy{flex:none;padding:2px 9px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--muted);font-size:12px;line-height:18px;cursor:pointer}
.wh-copy:hover{color:var(--brand);border-color:var(--brand-3)}
.wh-copy.ok{color:var(--green);border-color:var(--green)}
/* 活跃巨鲸 */
.wh-top{padding:12px;border:1px solid var(--line);border-radius:10px}
.wh-top-r{padding:10px 0;border-top:1px solid var(--line)}
.wh-top-r:first-of-type{border-top:0;padding-top:4px}
.wh-top-h{display:flex;align-items:center;justify-content:space-between;gap:8px}
.wh-top-h strong{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.wh-top-n{margin-top:2px;color:var(--faint);font-size:12px}
.wh-top .wh-addr-line{margin-top:6px}
.wh-top .wh-full{flex-basis:100%}
@media(max-width:900px){
    .wh-grid{grid-template-columns:1fr}
    .wh-sum{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){
    .wh-item{padding:11px 10px 11px 13px}
    .wh-item-say{font-size:13px}
    .wh-usd{font-size:16px}
    .wh-full{flex-basis:100%;font-size:11.5px}
}
/* 实时连接断开提示（coin.js wsStateShow）：页面停在服务端渲染时的数据 */
.ws-state{margin-left:8px;color:#e5484d;font-weight:600}
/* K 线历史还没采集到（coin.js klEmptyNote） */
.kl-empty{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);padding:8px 14px;border-radius:8px;background:rgba(255,255,255,.92);color:#71717a;font-size:13px;pointer-events:none;box-shadow:0 1px 4px rgba(0,0,0,.08);text-align:center;max-width:90%}