/* bitcoinliquidityheatmap.com — 暖纸白 + 墨蓝 + 钴蓝 + 琥珀热力
   布局：左侧固定侧栏 + 单栏报告式主区（编号分节） */

:root{
  --paper:#f6f2ea;        /* 页面底 */
  --card:#fcfaf6;         /* 图表面/卡片 */
  --ink:#20293a;          /* 主文字 */
  --ink-2:#55617a;        /* 次文字 */
  --muted:#616b83;        /* 弱化 */
  --line:#e3ddd0;         /* 发丝线 */
  --axis:#c8c1b2;
  --cobalt:#1c5cab;       /* 主色/链接/多头 */
  --cobalt-deep:#104281;
  --brick:#c2402a;        /* 空头/下跌 */
  --up:#0a6d38;           /* 上涨文字 */
  --down:#c2402a;
  --heat-0:#faf3e8;
  --heat-7:#571f0a;       /* 热力最深 */
  --focus:#1c5cab;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:15px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
a{color:var(--cobalt);text-decoration:none}
a:hover{text-decoration:underline}
.skip{position:absolute;top:-99px;left:0}
img{max-width:100%}

/* ---------- 布局壳 ---------- */
.shell{display:flex;min-height:100vh;max-width:1460px;margin:0 auto}
.side{
  width:212px;flex:0 0 212px;padding:26px 18px;
  border-right:1px solid var(--line);
  position:sticky;top:0;align-self:flex-start;height:100vh;
  display:flex;flex-direction:column;gap:26px;
}
.main{flex:1 1 auto;min-width:0;padding:30px 34px 40px}

/* 品牌 */
.brand{display:flex;gap:10px;align-items:center;color:var(--ink)}
.brand:hover{text-decoration:none}
.brand-word{
  font-family:Georgia,"Times New Roman",serif;
  font-size:15px;line-height:1.16;letter-spacing:.02em;font-weight:700;
}
.brand-mark{flex:0 0 auto;display:block}

/* 导航 */
.nav{display:flex;flex-direction:column;gap:2px}
.nav a{
  display:flex;gap:9px;align-items:baseline;padding:7px 9px;border-radius:6px;
  color:var(--ink-2);font-size:13.5px;
}
.nav a i{font-style:normal;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.nav a:hover{background:rgba(28,92,171,.07);text-decoration:none;color:var(--ink)}
.nav a.on{background:rgba(28,92,171,.10);color:var(--cobalt-deep);font-weight:600}
.nav a.on i{color:var(--cobalt)}

.lang-box{margin-top:auto;display:flex;flex-direction:column;gap:5px}
.lang-box label{font-size:12px;color:var(--muted)}
.lang-box select{
  width:100%;padding:7px 8px;font-size:13px;color:var(--ink);
  background:var(--card);border:1px solid var(--line);border-radius:6px;
}
.side-note{font-size:12px;color:var(--muted);margin:0}
.nav-toggle{display:none}

/* ---------- 报告式分节 ---------- */
.lead{max-width:860px;margin:0 0 26px}
h1{
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(26px,3.4vw,38px);line-height:1.14;margin:0 0 10px;letter-spacing:-.01em;
}
.lead p{color:var(--ink-2);font-size:16px;margin:0}
.sec{margin:0 0 40px;scroll-margin-top:16px}
.sec-head{display:flex;gap:14px;align-items:baseline;border-bottom:2px solid var(--ink);padding-bottom:8px;margin-bottom:4px}
.sec-head .no{
  font-family:Georgia,serif;font-size:15px;color:var(--card);
  background:var(--ink);padding:2px 8px;letter-spacing:.05em;
}
.sec-head h2{
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(19px,2.2vw,24px);margin:0;letter-spacing:-.005em;
}
.sec-sub{color:var(--ink-2);font-size:13.5px;margin:8px 0 16px;max-width:820px}

/* ---------- KPI ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));border:1px solid var(--line);background:var(--card)}
.kpi{background:var(--card);padding:14px 16px;min-width:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
[dir="rtl"] .kpi{border-right:0;border-left:1px solid var(--line)}
.kpi b{
  display:block;font-size:clamp(19px,2vw,24px);font-weight:700;letter-spacing:-.01em;
}
.kpi span{display:block;font-size:12.5px;color:var(--ink-2);margin-top:3px}
.kpi .sub{font-size:12px;color:var(--muted);margin-top:2px;font-variant-numeric:tabular-nums}

/* ---------- 卡片 / 图表面 ---------- */
.panel{background:var(--card);border:1px solid var(--line);padding:16px}
.panel + .panel{margin-top:14px}

/* 热力图工具行 */
.tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 12px}
.seg{display:inline-flex;border:1px solid var(--line);background:var(--card);border-radius:7px;overflow:hidden}
.seg button{
  appearance:none;border:0;background:transparent;color:var(--ink-2);
  font:600 12.5px/1 inherit;padding:8px 13px;cursor:pointer;
}
.seg button + button{border-left:1px solid var(--line)}
.seg button.on{background:var(--cobalt);color:#fff}
.tools .gap{flex:1 1 auto}
.legend-ramp{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--ink-2)}
.legend-ramp .ramp{width:110px;height:10px;border:1px solid var(--line);
  background:linear-gradient(90deg,#faf3e8,#f3d9b8,#eab884,#dd8b4d,#c65f24,#a04416,#7a2e08,#571f0a)}

/* 热力图画布 */
.hm-wrap{position:relative;overflow-x:auto;overflow-y:hidden}
.hm-canvas{display:block;touch-action:pan-y}
.hm-tip{
  position:absolute;pointer-events:none;z-index:5;display:none;
  background:#232b3d;color:#f5f2ea;border-radius:7px;padding:9px 11px;
  font-size:12.5px;line-height:1.5;max-width:250px;box-shadow:0 3px 14px rgba(30,30,50,.25);
}
.hm-tip b{font-size:13px}
.hm-tip .row{display:flex;justify-content:space-between;gap:14px}
.hm-tip .row span:first-child{color:#b8c0d4}
.hm-note{font-size:12px;color:var(--muted);margin:8px 0 0}

/* 方法说明 */
.method{border-left:3px solid var(--cobalt);padding:10px 14px;background:rgba(28,92,171,.05);font-size:13px;color:var(--ink-2);margin-top:14px}
.method b{color:var(--ink)}

/* ---------- 表格 ---------- */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th,td{padding:9px 10px;text-align:right;white-space:nowrap;border-bottom:1px solid var(--line)}
th{color:var(--ink-2);font-weight:600;font-size:12px;letter-spacing:.03em;border-bottom:2px solid var(--axis)}
th:first-child,td:first-child,
th.l,td.l{text-align:left}
td{font-variant-numeric:tabular-nums}
tr:hover td{background:rgba(28,92,171,.045)}
td .coin-cell{display:flex;gap:8px;align-items:center;font-weight:600;min-width:0;max-width:220px}
td .coin-cell img{width:18px;height:18px;border-radius:50%;flex:0 0 auto}
td .coin-cell .full{color:var(--muted);font-weight:400;font-size:12px}
/* 名称截断：过长时省略号，不撑破单元格 */
td .coin-cell .name{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
td .name{display:inline-block;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
@media(max-width:720px){
  td .coin-cell{max-width:140px}
  td .name{max-width:110px}
}
.up{color:var(--up)}.down{color:var(--down)}.flat{color:var(--muted)}

/* 占比条（span 必须 display:block） */
.bar{display:block;height:7px;background:#eee7d9;border-radius:2px;min-width:64px;position:relative;overflow:hidden}
.bar i{display:block;height:100%;background:var(--cobalt);border-radius:2px}
.bar i.warm{background:#c65f24}
.bar-duo{display:flex;height:9px;border-radius:2px;overflow:hidden;min-width:90px}
.bar-duo b{display:block;height:100%;background:var(--cobalt)}
.bar-duo s{display:block;height:100%;background:var(--brick);text-decoration:none}
.mini-label{font-size:12px;color:var(--muted)}

/* 双栏区块 */
.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.duo>*{min-width:0}
@media(max-width:980px){.duo{grid-template-columns:minmax(0,1fr)}}

/* 逐小时清算图 */
.flow-canvas{display:block;width:100%}

/* ---------- 币种详情 ---------- */
.crumb{font-size:12.5px;color:var(--muted);margin:0 0 14px}
.crumb a{color:var(--muted)}
.coin-hero{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-bottom:18px}
.coin-hero img{width:44px;height:44px;border-radius:50%}
.coin-hero .px{font-size:26px;font-weight:700;letter-spacing:-.01em}
.coin-hero .chg{font-size:15px;font-weight:600}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));border:1px solid var(--line);background:var(--card);margin-bottom:22px}
.stat-grid .cell{background:var(--card);padding:12px 14px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
[dir="rtl"] .stat-grid .cell{border-right:0;border-left:1px solid var(--line)}
.stat-grid .cell b{display:block;font-size:16.5px}
.stat-grid .cell span{font-size:12px;color:var(--ink-2)}

/* ---------- 列表页 / 分页 ---------- */
.pager{display:flex;gap:8px;align-items:center;justify-content:center;margin:20px 0 0;font-size:13.5px}
.pager a,.pager em{padding:7px 13px;border:1px solid var(--line);border-radius:6px;background:var(--card);font-style:normal}
.pager em{color:var(--muted)}
.pager a:hover{border-color:var(--cobalt);text-decoration:none}

/* ---------- 页脚 ---------- */
.foot{border-top:2px solid var(--ink);margin-top:44px;padding-top:16px;font-size:13px;color:var(--ink-2)}
.foot .dim{color:var(--muted);font-size:12px}
.foot p{margin:0 0 6px}

/* ---------- 404 ---------- */
.err{max-width:520px;margin:8vh auto;text-align:center}

/* ---------- RTL ---------- */
[dir="rtl"] .side{border-right:0;border-left:1px solid var(--line)}
[dir="rtl"] th,[dir="rtl"] td{text-align:left}
[dir="rtl"] th:first-child,[dir="rtl"] td:first-child,
[dir="rtl"] th.l,[dir="rtl"] td.l{text-align:right}
[dir="rtl"] .method{border-left:0;border-right:3px solid var(--cobalt)}

/* ---------- 移动端 ---------- */
@media(max-width:860px){
  .shell{display:block}
  .side{
    position:sticky;top:0;z-index:20;width:auto;height:auto;
    flex-direction:row;align-items:center;gap:12px;
    padding:10px 14px;background:var(--paper);
    border-right:0;border-bottom:1px solid var(--line);
  }
  .brand-word{font-size:12px;line-height:1.1}
  .nav-toggle{
    display:block;margin-left:auto;appearance:none;background:none;border:1px solid var(--line);
    border-radius:6px;padding:8px 9px;cursor:pointer;
  }
  [dir="rtl"] .nav-toggle{margin-left:0;margin-right:auto}
  .nav-toggle span{display:block;width:17px;height:2px;background:var(--ink);margin:3px 0}
  .nav,.lang-box,.side-note{display:none}
  body.nav-open .side{flex-wrap:wrap}
  body.nav-open .nav{display:flex;width:100%;order:5}
  body.nav-open .lang-box{display:flex;width:100%;order:6;margin-top:6px}
  body.nav-open .side-note{display:block;width:100%;order:7}
  .main{padding:18px 14px 30px}
  .kpi b{font-size:18px}
  h1{font-size:24px}
  .sec{margin-bottom:30px}
}

/* namefix 2026-08-30: coin 页头部长名防溢出；.full 预留截断 */
.coin-hero{min-width:0}
.coin-hero h1{min-width:0;overflow-wrap:anywhere}
td .coin-cell .full{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* fix: show full coin names (no ellipsis) 2026-09-13 */
td .coin-cell{max-width:none}
td .coin-cell .name,td .name,td .coin-cell .full{max-width:none;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;word-break:break-word}
@media(max-width:720px){td .coin-cell{max-width:none}td .name{max-width:none}}