/* ========== 支付大脑 PayBrain · 区块链启链浏览器专属样式（浅色主题） ========== */

/* ---------- 浏览器子导航 ---------- */
.w3-subnav {
  position:sticky; top:60px; z-index:90;
  display:flex; align-items:center; gap:22px;
  background:rgba(255,255,255,0.96); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  padding:10px 28px; flex-wrap:wrap;
}
.w3-brand { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.w3-cube {
  width:34px; height:34px; border-radius:9px;
  background:#165dff;
  border:1.5px solid rgba(22,93,255,0.45);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:900; color:#fff;
}
.w3-brand-txt b { font-size:15px; font-weight:800; color:var(--text); letter-spacing:1.5px; display:block; }
.w3-brand-txt small { font-size:10px; color:var(--dim); letter-spacing:1px; }
.w3-tabs { display:flex; gap:2px; flex-wrap:wrap; }
.w3-tabs a {
  font-size:12px; color:var(--muted); padding:7px 14px; border-radius:8px;
  letter-spacing:1px; white-space:nowrap; transition:all .15s;
}
.w3-tabs a:hover { color:var(--blue); background:#f2f6ff; }
.w3-tabs a.on {
  color:#165dff; background:#e8f3ff;
  border:1px solid rgba(22,93,255,0.28);
}
.w3-tabs a .tab-lock { margin-left:4px; display:inline-flex; align-items:center; color:var(--gold); }
.w3-search { margin-left:auto; display:flex; gap:8px; flex:1; max-width:420px; min-width:230px; }
.w3-search input {
  flex:1; background:#fff; border:1px solid var(--line2);
  border-radius:9px; padding:8px 14px; font-size:14px; color:var(--text);
  font-family:var(--mono); outline:none; transition:all .15s;
}
.w3-search input::placeholder { color:var(--dim); }
.w3-search input:focus { border-color:rgba(22,93,255,0.55); box-shadow:0 0 0 3px rgba(22,93,255,0.08); }
.w3-search button {
  font-size:12px; font-weight:700; letter-spacing:2px; cursor:pointer;
  background:#165dff; color:#fff;
  border:none; border-radius:9px; padding:8px 20px; font-family:inherit;
}
.w3-search button:hover { background:#3c7bff; }

/* ---------- 统计卡 ---------- */
.w3-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
@media (max-width:960px){ .w3-stats { grid-template-columns:repeat(2,1fr); } }
.w3-stat {
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:15px 16px 13px; position:relative; overflow:hidden;
}
.w3-stat.hi { border-color:rgba(22,93,255,0.4); background:linear-gradient(180deg,#f7faff 0%,#fff 100%); }
.w3-stat .v { font-family:var(--mono); font-size:20px; font-weight:800; color:#165dff; letter-spacing:0.5px; }
.w3-stat.hi .v { color:#165dff; }
.w3-stat .k { font-size:11px; color:var(--muted); margin-top:5px; letter-spacing:1.5px; }
.w3-stat .s { font-size:10px; color:var(--dim); margin-top:3px; }

/* ---------- 哈希 / 地址链接 ---------- */
.hashlink { font-family:var(--mono); font-size:12px; color:var(--blue); white-space:nowrap; }
.hashlink:hover { color:var(--cyan); }
.dim { color:var(--dim); }

.addr-tag { font-family:inherit; font-size:11px; padding:2px 9px; border-radius:999px; border:1px solid; letter-spacing:0.5px; }
.addr-tag.ca { color:#0e6dd3; border-color:rgba(22,93,255,0.30); background:#eef5ff; }
.addr-tag.ct { color:#0a8f74; border-color:rgba(0,180,42,0.30); background:#effaf3; }
.addr-tag.cn { color:#7a57d9; border-color:rgba(114,46,209,0.28); background:#f5f0ff; }

/* ---------- 交易类型徽章 ---------- */
.tt { font-size:10px; padding:2px 9px; border-radius:999px; border:1px solid; white-space:nowrap; letter-spacing:0.5px; }
.tt.t-qi    { color:#0e6dd3; border-color:rgba(22,93,255,0.30);  background:#eef5ff; }
.tt.t-amy   { color:var(--gold); border-color:rgba(255,125,0,0.30); background:#fff5eb; }
.tt.t-call  { color:#0a8f74; border-color:rgba(0,180,42,0.30);  background:#effaf3; }
.tt.t-dep   { color:#0e8fa8; border-color:rgba(14,179,255,0.35);  background:#effbff; }
.tt.t-cross { color:#7a57d9; border-color:rgba(114,46,209,0.28); background:#f5f0ff; }

.v-qi  { color:var(--blue); }
.v-amy { color:var(--gold); }

/* ---------- 密集数据面板（类 Excel，与清算样板一致） ---------- */
.data-panel { background:#fff; border:1px solid var(--line); border-radius:10px; }
.data-panel .dp-head {
  display:flex; align-items:center; gap:10px; padding:12px 14px;
  border-bottom:1px solid var(--line); background:#f8f9fb;
}
.data-panel .dp-head h3 { font-size:14px; font-weight:800; color:var(--text); letter-spacing:0.3px; }
.data-panel .dp-head .extra { margin-left:auto; font-size:11px; color:var(--dim); }
.data-panel .dp-body { padding:0; }
.data-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
  font-size:12px;
}
.data-grid .dg-cell {
  padding:9px 11px; border-right:1px solid #f0f1f5; border-bottom:1px solid #f0f1f5;
}
.data-grid .dg-cell:nth-child(4n) { border-right:none; }
.data-grid .dg-label { color:var(--dim); font-size:11px; margin-bottom:3px; }
.data-grid .dg-value { color:var(--text); font-weight:600; word-break:break-all; }
.data-grid .dg-value.mono { font-family:var(--mono); color:var(--blue); }

/* ---------- 表格横向滚动容器 ---------- */
.tbl-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.tbl-scroll::-webkit-scrollbar { height:8px; }
.tbl-scroll::-webkit-scrollbar-thumb { background:#d7dbe4; border-radius:4px; }

/* ---------- 明细页 KV 行 ---------- */
.w3-kv {
  display:flex; gap:18px; padding:11px 4px;
  border-bottom:1px dashed var(--line); font-size:13px; align-items:flex-start;
}
.w3-kv:last-child { border-bottom:none; }
.w3-kv .k { width:170px; flex-shrink:0; color:var(--muted); letter-spacing:0.5px; padding-top:1px; }
.w3-kv .k small { display:block; font-size:10px; color:var(--dim); margin-top:2px; }
.w3-kv .v { color:var(--text); font-weight:600; word-break:break-all; line-height:1.7; }
.w3-kv .v .mono { font-family:var(--mono); }

.copy-btn {
  font-size:10px; color:var(--muted); border:1px solid var(--line2); border-radius:6px;
  padding:2px 9px; cursor:pointer; background:#fff; margin-left:8px; font-family:inherit;
}
.copy-btn:hover { color:var(--blue); border-color:rgba(22,93,255,0.4); background:#f7faff; }

/* ---------- 图表 ---------- */
.w3-chart { width:100%; }
.w3-chart svg { width:100%; height:150px; display:block; }
.w3-chart .bar-c { fill:url(#w3grad); }
.w3-chart .bar-c.today { fill:url(#w3grad2); }
.w3-chart text { fill:#86909c; font-size:10px; font-family:var(--mono); }

/* ---------- 筛选按钮 ---------- */
.modes { display:flex; gap:8px; flex-wrap:wrap; }
.mode { font-size:11px; color:var(--blue); border:1px solid rgba(22,93,255,0.30); background:#f2f7ff;
  padding:5px 14px; border-radius:999px; letter-spacing:1px; cursor:pointer; }
.mode:hover { background:#e8f3ff; }
.mode.on { background:#165dff; color:#fff; border-color:rgba(22,93,255,0.6); }

/* ---------- 分页 / 加载更多 ---------- */
.w3-more { text-align:center; padding-top:14px; }

/* ---------- 凭证卡 ---------- */
.tok-card { display:flex; gap:16px; align-items:flex-start; }
.tok-ic {
  width:46px; height:46px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:900; letter-spacing:0;
  border:1.5px solid; font-family:var(--mono);
}
.tok-ic.qi  { color:#165dff; border-color:rgba(22,93,255,0.35); background:#eef5ff; }
.tok-ic.amy { color:var(--gold); border-color:rgba(255,125,0,0.35); background:#fff5eb; }
.tok-ic.nft { color:#0e8fa8; border-color:rgba(14,179,255,0.35); background:#effbff; }
.tok-name { font-size:14px; font-weight:800; color:var(--text); letter-spacing:0.5px; }
.tok-sub { font-size:11px; color:var(--dim); margin-top:3px; line-height:1.7; }

/* ---------- 名词速查 ---------- */
.gloss { display:grid; grid-template-columns:repeat(2,1fr); gap:9px 26px; }
@media (max-width:960px){ .gloss { grid-template-columns:1fr; } }
.gloss-item { font-size:12px; color:var(--muted); line-height:1.8; }
.gloss-item b { color:var(--text); }
.gloss-item .gk {
  display:inline-block; min-width:74px; color:var(--blue); font-weight:700;
  border:1px solid rgba(22,93,255,0.30); border-radius:6px; padding:1px 8px;
  font-size:11px; text-align:center; margin-right:8px; background:#f2f7ff;
}

/* ---------- 错误页 ---------- */
.w3-err { text-align:center; padding:60px 20px; }
.w3-err .big { font-size:34px; font-weight:900; color:#c9cdd4; letter-spacing:6px; }
.w3-err p { font-size:13px; color:var(--muted); margin-top:14px; line-height:2; }