/* ==================================================================================
   OASIS 交易者社区 · 独立站点样式（Telegram 风格）
   ─────────────────────────────────────────────────────────────────────────────────
   这是**独立设计**，不继承终端（彭博风格）的视觉体系，也不与 web/css/app.css 互相影响：
   · 三栏布局：频道列表 / 会话 / 详情面板
   · Telegram 深色基调：#0E1621（底）· #17212B（栏）· #182533（收到的气泡）
     · #2B5278（自己发出的气泡）· #5288C1（强调）· #64B5EF（链接/高亮）
   · 圆角气泡 + 尾部小三角、日期分隔条、回复引用、表情回应条、已读游标
   · 全部纯 CSS，零外部请求；支持浅色（body.tg-light）与 prefers-reduced-motion
   中文可读性优先：正文字号 14px、行高 1.45，长数字用等宽字体。
   ================================================================================== */

:root {
  --c-bg: #0E1621;
  --c-panel: #17212B;
  --c-panel2: #1C2733;
  --c-hover: #202B36;
  --c-active: #2B5278;
  --c-bubble-in: #182533;
  --c-bubble-out: #2B5278;
  --c-accent: #5288C1;
  --c-link: #64B5EF;
  --c-text: #E9EDF1;
  --c-text2: #A9B8C6;
  --c-text3: #708499;
  --c-line: #101921;
  --c-line2: #232E3C;
  --c-green: #4DCD5E;
  --c-red: #E5484D;
  --c-amber: #F0B90B;
  --c-violet: #B98CFF;
  --c-cyan: #58C7E8;
  --c-badge: #4DCD5E;
  --c-online: #4DCD5E;
  --r: 8px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "PingFang SC", Roboto, sans-serif;
  --mono: "JetBrains Mono", Consolas, "SFMono-Regular", ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body.tg {
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
body.tg-light {
  --c-bg: #FFFFFF; --c-panel: #FFFFFF; --c-panel2: #F4F4F5; --c-hover: #EEF1F4;
  --c-active: #E3F0FB; --c-bubble-in: #FFFFFF; --c-bubble-out: #EEFFDE;
  --c-accent: #3390EC; --c-link: #168ACD; --c-text: #0F1720; --c-text2: #58697A;
  --c-text3: #8296A8; --c-line: #E6E9EC; --c-line2: #DDE3E9;
}
button, input, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
a { color: var(--c-link); }
.hidden { display: none !important; }
.mono { font-family: var(--mono); }
.dim { color: var(--c-text3); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #2B3A47; border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }

/* ================================================================ 登录门 */
.cgate { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center;
  justify-content: center; background:
  radial-gradient(900px 520px at 50% -10%, #1E3A5F 0%, transparent 60%), var(--c-bg); }
.cgate-box { width: 340px; padding: 26px 24px 20px; background: var(--c-panel);
  border: 1px solid var(--c-line2); border-radius: 12px; display: flex; flex-direction: column; }
.cgate-logo { display: flex; justify-content: center; font-size: 34px; color: var(--c-link); }
.cgate-title { text-align: center; font-size: 19px; font-weight: 600; margin-top: 6px; }
.cgate-sub { text-align: center; font-size: 12px; color: var(--c-text3); margin: 6px 0 16px; line-height: 1.6; }
.cgate-box label { font-size: 12px; color: var(--c-text2); margin: 8px 0 4px; }
.cgate-box input { height: 40px; padding: 0 12px; background: var(--c-panel2);
  border: 1px solid var(--c-line2); border-radius: 8px; outline: none; }
.cgate-box input:focus { border-color: var(--c-link); }
.cgate-msg { min-height: 18px; font-size: 12px; color: var(--c-red); margin-top: 8px; }
.cgate-foot { font-size: 11px; color: var(--c-text3); margin-top: 10px; line-height: 1.6; }

/* ================================================================ 三栏骨架 */
.tg-app { display: grid; grid-template-columns: 300px 1fr; height: 100%; }
.tg-app.with-right { grid-template-columns: 300px 1fr 380px; }

/* ---------------------------------------------------------------- 左栏 */
.tg-left { background: var(--c-panel); border-right: 1px solid var(--c-line);
  display: flex; flex-direction: column; min-width: 0; }
.tg-left-head { display: flex; align-items: center; gap: 6px; padding: 9px 10px; }
.tg-search { flex: 1; }
.tg-search input { width: 100%; height: 34px; padding: 0 12px; border-radius: 17px;
  background: var(--c-panel2); border: 1px solid transparent; outline: none; }
.tg-search input:focus { border-color: var(--c-accent); background: var(--c-panel); }
.tg-icon-btn { width: 34px; height: 34px; border-radius: 50%; color: var(--c-text2);
  display: inline-flex; align-items: center; justify-content: center; font-size: 16px; }
.tg-icon-btn:hover { background: var(--c-hover); color: var(--c-text); }
.tg-left-meta { display: flex; align-items: center; justify-content: space-between;
  padding: 0 12px 8px; font-size: 11px; color: var(--c-text3); }
.tg-brand b { color: var(--c-link); letter-spacing: .5px; }
.tg-chain { font-family: var(--mono); color: var(--c-violet); }
.tg-channels { flex: 1; overflow-y: auto; padding: 0 6px 8px; }
.tg-chan { display: flex; align-items: center; gap: 9px; padding: 8px 9px; border-radius: 9px;
  cursor: pointer; position: relative; }
.tg-chan:hover { background: var(--c-hover); }
.tg-chan.active { background: var(--c-active); }
.tg-chan-avatar { width: 42px; height: 42px; border-radius: 50%; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; font-size: 19px;
  background: var(--c-panel2); border: 1px solid var(--c-line2); }
.tg-chan-body { flex: 1; min-width: 0; }
.tg-chan-top { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.tg-chan-name { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.tg-chan-time { font-size: 11px; color: var(--c-text3); flex: 0 0 auto; }
.tg-chan-prev { font-size: 12.5px; color: var(--c-text2); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; display: flex; gap: 5px; align-items: center; }
.tg-chan-prev .who { color: var(--c-text3); }
.tg-badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  background: var(--c-badge); color: #05230C; font-size: 11.5px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; }
.tg-pin { color: var(--c-text3); font-size: 11px; }
.tg-left-foot { border-top: 1px solid var(--c-line); padding: 8px 10px; display: flex;
  align-items: center; gap: 8px; }
.tg-me { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; font-size: 12px; }
.tg-avatar { width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto; display: flex;
  align-items: center; justify-content: center; font-size: 13px; font-weight: 700;
  border: 1px solid var(--c-line2); background: var(--c-panel2); }
.tg-me-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-me-tier { font-size: 11px; color: var(--c-text3); }

/* ---------------------------------------------------------------- 中栏 */
.tg-main { display: flex; flex-direction: column; min-width: 0; position: relative;
  background: var(--c-bg); }
.tg-main-head { height: 54px; flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  padding: 0 12px; background: var(--c-panel); border-bottom: 1px solid var(--c-line); }
.tg-peer { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.tg-peer-avatar { width: 38px; height: 38px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; font-size: 18px; background: var(--c-panel2); }
.tg-peer-name { font-weight: 600; font-size: 14.5px; }
.tg-peer-sub { font-size: 12px; color: var(--c-text2); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; max-width: 46vw; }
.tg-main-actions { display: flex; align-items: center; gap: 4px; }
.tg-typing { font-size: 12px; color: var(--c-link); margin-right: 4px; }
.only-mobile { display: none; }

.tg-thread { flex: 1; overflow-y: auto; padding: 14px 16px 8px; }
.tg-day { text-align: center; margin: 12px 0 14px; }
.tg-day span { background: rgba(0, 0, 0, .26); color: var(--c-text2); font-size: 12px;
  padding: 4px 10px; border-radius: 12px; }
.tg-empty { text-align: center; color: var(--c-text3); font-size: 13px; padding: 40px 20px;
  line-height: 1.8; }

/* 消息行 + 气泡 */
.tg-row { display: flex; gap: 8px; margin-bottom: 10px; align-items: flex-end; }
.tg-row.out { flex-direction: row-reverse; }
.tg-row-avatar { width: 34px; height: 34px; flex: 0 0 auto; }
.tg-bubble { max-width: min(680px, 74%); background: var(--c-bubble-in); border-radius: 10px;
  padding: 7px 11px 6px; position: relative; box-shadow: 0 1px 1px rgba(0, 0, 0, .16); }
.tg-row.out .tg-bubble { background: var(--c-bubble-out); }
.tg-bubble::after { content: ""; position: absolute; bottom: 0; width: 10px; height: 14px;
  background: inherit; }
.tg-row.in .tg-bubble::after { left: -6px; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.tg-row.out .tg-bubble::after { right: -6px; clip-path: polygon(0 0, 100% 100%, 0 100%); }
.tg-bubble.plain { padding-top: 6px; }
.tg-sender { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.tg-sender .tag { font-weight: 400; font-size: 11px; color: var(--c-text3); margin-left: 5px; }
.tg-sender.aigc { color: var(--c-violet); }
.tg-sender.push { color: var(--c-link); }
.tg-reply-quote { border-left: 2px solid var(--c-accent); padding: 2px 0 2px 7px; margin: 2px 0 5px;
  font-size: 12px; color: var(--c-text2); background: rgba(255, 255, 255, .03); border-radius: 3px; }
.tg-reply-quote b { color: var(--c-link); font-weight: 600; }
.tg-msg-title { font-weight: 600; margin: 1px 0 3px; }
.tg-msg-body { white-space: pre-wrap; word-break: break-word; }
.tg-msg-body.clamped { max-height: 190px; overflow: hidden; position: relative; }
.tg-msg-body.clamped::after { content: ""; position: absolute; inset: auto 0 0 0; height: 44px;
  background: linear-gradient(transparent, var(--c-bubble-in)); }
.tg-row.out .tg-msg-body.clamped::after { background: linear-gradient(transparent, var(--c-bubble-out)); }
.tg-more { font-size: 12px; color: var(--c-link); margin-top: 3px; }
.tg-hashline { font-family: var(--mono); font-size: 10.5px; color: var(--c-text3); margin-top: 4px;
  display: flex; gap: 8px; flex-wrap: wrap; }
.tg-hashline .ok { color: var(--c-green); }
.tg-bubble-foot { display: flex; align-items: center; justify-content: flex-end; gap: 5px;
  font-size: 11px; color: rgba(233, 237, 241, .62); margin-top: 2px; }
.tg-row.out .tg-bubble-foot { color: rgba(233, 237, 241, .75); }
.tg-tick { font-size: 12px; }

/* 分析卡片（附件感）：读数宫格 + 判定 + 风险清单 */
.tg-card-attach { margin-top: 6px; border: 1px solid var(--c-line2); border-radius: 8px;
  background: rgba(0, 0, 0, .16); overflow: hidden; }
.tg-attach-head { padding: 7px 9px; font-size: 12px; font-weight: 600; display: flex;
  align-items: center; gap: 6px; border-bottom: 1px solid var(--c-line2); background: rgba(255, 255, 255, .03); }
.tg-attach-head .cat { font-weight: 400; color: var(--c-text3); font-size: 11px; }
.tg-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(102px, 1fr)); gap: 1px;
  background: var(--c-line2); }
.tg-tile { background: var(--c-bubble-in); padding: 5px 8px 6px; }
.tg-row.out .tg-tile { background: var(--c-bubble-out); }
.tg-tile .k { font-size: 10.5px; color: var(--c-text3); }
.tg-tile .v { font-size: 14px; font-weight: 700; font-family: var(--mono); }
.tg-tile .s { font-size: 10px; color: var(--c-text3); }
.tg-tile .v.up { color: var(--c-green); }
.tg-tile .v.down { color: var(--c-red); }
.tg-section { padding: 6px 9px; border-top: 1px solid var(--c-line2); font-size: 12.5px; }
.tg-section > b { display: block; margin-bottom: 3px; color: var(--c-text2); font-size: 11.5px;
  text-transform: uppercase; letter-spacing: .5px; }
.tg-kv { display: flex; gap: 8px; padding: 2px 0; }
.tg-kv .k { color: var(--c-text3); flex: 0 0 88px; }
.tg-kv .v { flex: 1; }
.tg-li { padding: 2px 0 2px 13px; position: relative; color: var(--c-text); }
.tg-li::before { content: "·"; position: absolute; left: 3px; color: var(--c-text3); }
.tg-li.acc::before { content: "✓"; color: var(--c-green); }
.tg-li.warn::before { content: "!"; color: var(--c-amber); }
.tg-li.bad::before { content: "×"; color: var(--c-red); }
.tg-chip { display: inline-block; padding: 1px 7px; border-radius: 9px; font-size: 11px;
  background: rgba(82, 136, 193, .18); color: var(--c-link); margin: 2px 4px 2px 0; }
.tg-chip.acc { background: rgba(77, 205, 94, .16); color: var(--c-green); }
.tg-chip.warn { background: rgba(240, 185, 11, .16); color: var(--c-amber); }
.tg-chip.bad { background: rgba(229, 72, 77, .16); color: var(--c-red); }
.tg-chip.violet { background: rgba(185, 140, 255, .18); color: var(--c-violet); }
.tg-spark { height: 62px; width: 100%; display: block; }
.tg-note { font-size: 11.5px; color: var(--c-text3); line-height: 1.6; padding: 4px 9px 7px; }
.tg-disclose { font-size: 11px; color: var(--c-text3); border-top: 1px dashed var(--c-line2);
  padding: 5px 9px; }

/* 表情回应条 */
.tg-reacts { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 5px; }
.tg-react { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px;
  border-radius: 11px; background: rgba(255, 255, 255, .07); font-size: 12px; }
.tg-react:hover { background: rgba(255, 255, 255, .13); }
.tg-react.on { background: rgba(82, 136, 193, .35); }
.tg-react .n { font-size: 11px; color: var(--c-text2); font-family: var(--mono); }
.tg-react-add { opacity: .55; }
.tg-row .tg-hover-actions { display: flex; gap: 3px; align-items: flex-end; opacity: 0;
  transition: opacity .12s; align-self: center; }
.tg-row:hover .tg-hover-actions { opacity: 1; }
.tg-mini { width: 26px; height: 26px; border-radius: 50%; background: var(--c-panel2);
  color: var(--c-text2); display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; }
.tg-mini:hover { background: var(--c-hover); color: var(--c-text); }

/* 输入区 */
.tg-composer { flex: 0 0 auto; background: var(--c-panel); border-top: 1px solid var(--c-line);
  padding: 6px 12px 9px; }
.tg-compose-tabs { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.tg-ctab { font-size: 12px; padding: 3px 10px; border-radius: 12px; color: var(--c-text3); }
.tg-ctab:hover { color: var(--c-text); background: var(--c-hover); }
.tg-ctab.active { background: rgba(82, 136, 193, .22); color: var(--c-link); }
.tg-compose-hint { font-size: 11px; color: var(--c-text3); margin-left: 4px; }
.tg-compose-row { display: flex; align-items: flex-end; gap: 8px; }
.tg-compose-row textarea { flex: 1; resize: none; min-height: 42px; max-height: 168px;
  padding: 10px 12px; background: var(--c-panel2); border: 1px solid var(--c-line2);
  border-radius: 10px; outline: none; line-height: 1.45; }
.tg-compose-row textarea:focus { border-color: var(--c-accent); }
.tg-send { width: 42px; height: 42px; border-radius: 50%; background: var(--c-accent);
  color: #fff; font-size: 17px; display: inline-flex; align-items: center; justify-content: center; }
.tg-send:hover { filter: brightness(1.1); }
.tg-send:disabled { opacity: .5; cursor: not-allowed; }
.tg-examples { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.tg-examples.v { flex-direction: column; margin: 6px 0 0; }
.tg-ex { font-size: 11.5px; color: var(--c-text2); background: var(--c-panel2);
  border: 1px solid var(--c-line2); border-radius: 12px; padding: 3px 10px; text-align: left; }
.tg-examples.v .tg-ex { border-radius: 8px; padding: 6px 9px; line-height: 1.5; }
.tg-ex:hover { color: var(--c-text); border-color: var(--c-accent); }

.tg-reply-bar { display: flex; align-items: center; gap: 8px; padding: 6px 12px;
  background: var(--c-panel); border-top: 1px solid var(--c-line); }
.tg-reply-line { width: 3px; height: 26px; background: var(--c-accent); border-radius: 2px; }
.tg-reply-text { flex: 1; min-width: 0; font-size: 12px; }
.tg-reply-text b { color: var(--c-link); display: block; }
.tg-reply-text span { color: var(--c-text2); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; display: block; }
.tg-scroll-down { position: absolute; right: 22px; bottom: 118px; width: 42px; height: 42px;
  border-radius: 50%; background: var(--c-panel2); color: var(--c-text2); font-size: 18px;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,.4); }

/* ---------------------------------------------------------------- 右栏 */
.tg-right { background: var(--c-panel); border-left: 1px solid var(--c-line);
  display: flex; flex-direction: column; min-width: 0; }
.tg-right-head { display: flex; align-items: center; gap: 6px; padding: 8px 10px;
  border-bottom: 1px solid var(--c-line); }
.tg-tabs { display: flex; gap: 3px; flex: 1; }
.tg-rtab { font-size: 12px; padding: 4px 9px; border-radius: 8px; color: var(--c-text3); }
.tg-rtab:hover { color: var(--c-text); background: var(--c-hover); }
.tg-rtab.active { background: rgba(82, 136, 193, .22); color: var(--c-link); }
.tg-rpane { flex: 1; overflow-y: auto; padding: 8px 10px 16px; }
.tg-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tg-card { background: var(--c-panel2); border: 1px solid var(--c-line2); border-radius: 8px;
  padding: 7px 9px; }
.tg-card .k { font-size: 11px; color: var(--c-text3); }
.tg-card .v { font-size: 17px; font-weight: 700; font-family: var(--mono); }
.tg-card .s { font-size: 10.5px; color: var(--c-text3); }
.tg-block { margin-top: 10px; border: 1px solid var(--c-line2); border-radius: 8px;
  background: var(--c-panel2); overflow: hidden; }
.tg-block-title { font-size: 12px; font-weight: 600; padding: 7px 10px;
  border-bottom: 1px solid var(--c-line2); color: var(--c-text2); }
.tg-block > div:not(.tg-block-title) { padding: 6px 10px; }
.tg-block .tg-note { padding: 6px 10px 8px; }
.tg-block .tg-kv { font-size: 12.5px; }
.tg-block .tg-kv .k { flex: 0 0 76px; }
.tg-meter { position: relative; height: 18px; background: rgba(255,255,255,.05);
  border-radius: 9px; margin: 3px 0; overflow: hidden; }
.tg-meter > i { position: absolute; inset: 0 auto 0 0; background: rgba(82,136,193,.45); }
.tg-meter > span { position: relative; padding: 0 8px; font-size: 11.5px; line-height: 18px;
  display: flex; justify-content: space-between; }
.tg-actions-row { display: flex; gap: 6px; padding: 8px 10px; flex-wrap: wrap; }
.tg-input { width: 100%; height: 34px; padding: 0 10px; background: var(--c-bg);
  border: 1px solid var(--c-line2); border-radius: 8px; outline: none; margin: 4px 10px 0;
  width: calc(100% - 20px); }
.tg-input:focus { border-color: var(--c-accent); }
.tg-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tg-tbl th, .tg-tbl td { text-align: left; padding: 5px 10px; border-bottom: 1px solid var(--c-line2); }
.tg-tbl th { font-size: 11px; color: var(--c-text3); font-weight: 600; }
.tg-tbl td.mono, .tg-tbl th.mono { font-family: var(--mono); }
.tg-block-item { padding: 6px 10px; border-bottom: 1px solid var(--c-line2); cursor: pointer; }
.tg-block-item:last-child { border-bottom: 0; }
.tg-block-item:hover { background: var(--c-hover); }
.tg-block-item .t { font-size: 12.5px; }
.tg-block-item .d { font-size: 11px; color: var(--c-text3); font-family: var(--mono); }
.tg-chain-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--c-line2); }
.tg-chain-stats > div { background: var(--c-panel2); padding: 6px 9px; }
.tg-chain-stats .k { font-size: 10.5px; color: var(--c-text3); }
.tg-chain-stats .v { font-family: var(--mono); font-size: 13px; }
.tg-proof-step { display: flex; gap: 6px; font-family: var(--mono); font-size: 11px;
  padding: 2px 0; color: var(--c-text2); }
.tg-verify { display: inline-block; font-size: 12px; padding: 3px 9px; border-radius: 10px; }
.tg-verify.ok { background: rgba(77,205,94,.16); color: var(--c-green); }
.tg-verify.bad { background: rgba(229,72,77,.16); color: var(--c-red); }

/* ---------------------------------------------------------------- 通用件 */
.tg-btn { height: 34px; padding: 0 14px; border-radius: 8px; background: var(--c-panel2);
  border: 1px solid var(--c-line2); color: var(--c-text); font-size: 13px; }
.tg-btn:hover { background: var(--c-hover); }
.tg-btn.primary { background: var(--c-accent); border-color: var(--c-accent); color: #fff; font-weight: 600; }
.tg-btn.primary:hover { filter: brightness(1.08); }
.tg-btn.ghost { background: transparent; }
.tg-btn.sm { height: 28px; padding: 0 10px; font-size: 12.5px; }
.tg-btn:disabled { opacity: .55; cursor: not-allowed; }
.tg-toasts { position: fixed; right: 16px; bottom: 16px; z-index: 95; display: flex;
  flex-direction: column; gap: 8px; max-width: 380px; }
.tg-toast { background: var(--c-panel2); border: 1px solid var(--c-line2); border-left: 3px solid var(--c-accent);
  border-radius: 8px; padding: 9px 12px; box-shadow: 0 6px 18px rgba(0,0,0,.4); animation: tgin .16s ease-out; }
.tg-toast.err { border-left-color: var(--c-red); }
.tg-toast.ok { border-left-color: var(--c-green); }
.tg-toast.warn { border-left-color: var(--c-amber); }
.tg-toast .t { font-size: 13px; font-weight: 600; }
.tg-toast .b { font-size: 12px; color: var(--c-text2); margin-top: 2px; word-break: break-word; }
@keyframes tgin { from { opacity: 0; transform: translateY(6px); } }
.tg-modal { position: fixed; inset: 0; z-index: 96; background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center; padding: 24px; }
.tg-modal-box { background: var(--c-panel); border: 1px solid var(--c-line2); border-radius: 12px;
  max-width: 780px; width: 100%; max-height: 86vh; overflow: auto; padding: 14px 16px; }
.tg-modal-head { display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px; }
.tg-modal-title { font-size: 15px; font-weight: 600; }
.tg-skel { background: linear-gradient(90deg, var(--c-panel2) 25%, var(--c-hover) 37%, var(--c-panel2) 63%);
  background-size: 400% 100%; animation: tgpulse 1.3s ease-in-out infinite; border-radius: 8px; height: 60px; }
@keyframes tgpulse { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* ---------------------------------------------------------------- 响应式 */
@media (max-width: 1180px) {
  .tg-app, .tg-app.with-right { grid-template-columns: 260px 1fr; }
  .tg-right { position: fixed; top: 0; right: 0; bottom: 0; width: 380px; z-index: 40;
    box-shadow: -8px 0 24px rgba(0,0,0,.45); }
}
@media (max-width: 820px) {
  .tg-app, .tg-app.with-right { grid-template-columns: 1fr; }
  .tg-left { position: fixed; top: 0; left: 0; bottom: 0; width: 290px; z-index: 45;
    transform: translateX(-100%); transition: transform .18s ease-out; }
  body.tg.nav-open .tg-left { transform: none; box-shadow: 8px 0 24px rgba(0,0,0,.45); }
  .tg-right { width: 100%; }
  .only-mobile { display: inline-flex; }
  .tg-peer-sub { max-width: 40vw; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}


/* ==================================================================================
   溯源层组件（源自终端社区的视觉资产，已按独立站重建命名空间）
   ─────────────────────────────────────────────────────────────────────────────────
   迁移说明（Lead 决定，2026-10-17）：
     交易者社区已从「终端内的一个功能区」改为**独立站点**，因此原先放在
     web/css/app.css 末尾的 .w3-* 视觉层整体迁到这里，并统一改名 .tgc-*：
       · 终端样式表回到纯终端口径（不再夹带社区规则）
       · 独立站成为**自洽**的一份资产：HTML / CSS / JS 全在 web/community/ 下
       · 溯源紫 #B98CFF 仍然只表示「链上留痕层」，与绿色（涨/通过）严格分离
   下面这些类由站点的详情弹窗、链上证明路径、成员分层表等深度区使用。
   ================================================================================== */
/* ==================================================================================
   交易者社区 Web3 视觉层 · 仅追加（F12 Community · W3 Append-only Layer）
   ─────────────────────────────────────────────────────────────────────────────────
   本节只追加在 app.css 末尾：不覆盖、不修改上方任何既有规则；类名全部使用 tgc- 前缀。

   一、层与语义的分工（本层最重要的一条规矩）
     溯源紫 #B98CFF（--o-violet → --tgc-trace）只表示「链上存证层」：
       区块高度角标、哈希与地址、Merkle 证明路径、链式连接、信息流左侧 2px 溯源条、链上校验徽章。
     业务语义一律走 绿 / 琥珀 / 红 / 青，与溯源紫绝不混用：
       绿   = 通过 / 主行动（.tgc-tag.acc、.tgc-judge.acc、.tgc-btn.primary、共识进度、顶级等级）
       琥珀 = 警示 / 待确认（.tgc-tag.warn、.tgc-judge.warn、.tgc-kind.signal、风险项标记）
       红   = 风险 / 失败（.tgc-tag.bad、.tgc-judge.bad、.tgc-verify.bad）
       青   = 中性口径 / 数据（.tgc-kind.fundamental、贡献值进度条）
   二、cn-mode（红涨绿跌）
     本层语义色写死为品牌色，不使用 --up / --down 承载语义，因此 body.cn-mode 不会让语义反转；
     真正的涨跌数字仍交给既有 .up / .down（它们随 cn-mode 反转），本层对二者不做任何覆盖。
   三、克制的终端风
     只用 1px 细边框 + 发丝线（--o-hair）+ 2px 边缘条 + 微圆角；禁止重色块填充；
     不写大面积渐变（唯一的渐变是 select 的 4px 箭头，与既有 select.select 同源）；
     无导入指令、无外部资源引用、无外链字体 —— 纯 CSS、零网络请求。
   四、对比度（深色底 ≥ 4.5:1）
     正文与次级文字用 --o-white / --o-white2（约 9–15:1）；
     需要「更安静」的文字统一用 --tgc-ink-dim #8FA79B（对 --o-field #060A08 约 7.8:1）；
     本层不把 --o-white3 用作文字色（对深色底仅约 1.5:1，不达标），它只用于边线与装饰符。
   五、圆角
     品牌规格写「圆角 6%」。直接写 6% 会随元素宽高取百分比（宽卡横向半径可达 40px 以上，
     变成椭圆角、失去终端感），故用 min(6%, 6px) 封顶：保留 6% 口径，稳定在 6px 刻度。
   六、动效
     全部动画在 @media (prefers-reduced-motion: reduce) 下关闭。
   ================================================================================== */

/* ---------------------------------------------------------------- 0. 令牌 */
:root {
  --tgc-trace:     var(--o-violet, #B98CFF);   /* 溯源紫：链上存证层唯一标识色 */
  --tgc-trace-dim: rgba(185, 140, 255, .34);   /* 只用于 1px 边线 */
  --tgc-trace-bg:  rgba(185, 140, 255, .06);   /* 只用于角标/徽章等极小面积底 */
  --tgc-ink-dim:   #8FA79B;                    /* 安静文字（≈7.8:1），替代不达标的 --o-white3 */
  --tgc-r:         min(6%, 6px);               /* 卡片级圆角：6% 封顶 6px */
  --tgc-r-s:       min(6%, 3px);               /* 控件级圆角 */
  --tgc-r-xs:      min(6%, 2px);               /* 徽章 / 角标级圆角 */
  --tgc-hair:      var(--o-hair, #0F1714);     /* 发丝线 */
  --tgc-gap:       var(--gap, 5px);
}

/* ================================================================ 1. 布局：顶栏 / 页签 / 两栏 */
.tgc-topbar { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0; min-width: 0;
  background: var(--o-panel2); border: 1px solid var(--o-line2); border-radius: var(--tgc-r);
  margin-bottom: var(--tgc-gap); }
.tgc-topbar .seg { display: flex; align-items: center; flex-wrap: wrap; min-width: 0;
  padding: 0 10px; border-right: 1px solid var(--tgc-hair); }
.tgc-topbar .seg:last-child { border-right: 0; }

/* 顶栏统计格：label / value 两行（label 极小、value 等宽数字） */
.tgc-stat { display: flex; flex-direction: column; justify-content: center; gap: 0;
  padding: 3px 10px; min-width: 0; line-height: 1.25; }
.tgc-stat > *:first-child:not(:last-child) { font-size: 9px; letter-spacing: .6px;
  color: var(--o-white2); text-transform: uppercase; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.tgc-stat > *:last-child:not(:first-child) { font-size: 13px; font-weight: 700; white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.tgc-stat .k, .tgc-stat .l, .tgc-stat label { font-size: 9px; letter-spacing: .6px;
  color: var(--o-white2); text-transform: uppercase; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.tgc-stat .v, .tgc-stat b, .tgc-stat strong { font-size: 13px; font-weight: 700; white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.tgc-stat .s, .tgc-stat small { font-size: 9.5px; color: var(--o-white2); white-space: nowrap; }

.tgc-tabs { display: flex; align-items: stretch; gap: 2px; min-width: 0; overflow-x: auto;
  border-bottom: 1px solid var(--o-line2); margin-bottom: var(--tgc-gap); }
.tgc-tab { background: transparent; border: 1px solid transparent; border-bottom: 0;
  color: var(--o-white2); font-size: 11px; letter-spacing: .6px; padding: 3px 12px; cursor: pointer;
  white-space: nowrap; border-radius: var(--tgc-r-s) var(--tgc-r-s) 0 0;
  transition: color .12s, background .12s, border-color .12s; }
.tgc-tab:hover { color: var(--o-white); background: #101A15; }
.tgc-tab:focus-visible { outline: 1px solid var(--o-green); outline-offset: -1px; }
.tgc-tab.active { color: var(--o-green); background: var(--o-panel); border-color: var(--o-line2);
  font-weight: 700; box-shadow: inset 0 -2px 0 var(--o-green); }

/* 两栏：主流 + 侧栏 */
.tgc-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: var(--tgc-gap); align-items: start; min-width: 0; }
.tgc-col-main, .tgc-col-side { display: flex; flex-direction: column; gap: var(--tgc-gap);
  min-width: 0; min-height: 0; }
.tgc-col-side { align-self: start; }

.tgc-empty { padding: 14px 12px; text-align: center; color: var(--o-white2); font-size: 11px;
  letter-spacing: .4px; line-height: 1.6; background: var(--o-field);
  border: 1px dashed var(--o-line2); border-radius: var(--tgc-r); }
.tgc-empty:before { content: "∅"; display: block; font-size: 14px; color: var(--o-white2);
  margin-bottom: 3px; }

/* ================================================================ 2. 卡片与区块 */
/* 边缘条用 inset 阴影实现：不占布局、可叠加（左=分类语义条，上=溯源紫条） */
.tgc-card { position: relative; min-width: 0; background: var(--o-panel);
  border: 1px solid var(--o-line); border-radius: var(--tgc-r);
  box-shadow: inset 2px 0 0 var(--tgc-bar-l, transparent), inset 0 2px 0 var(--tgc-bar-t, transparent);
  transition: border-color .12s, background .12s; }
.tgc-card:hover { border-color: var(--o-line2); }
.tgc-card > *:not(.tgc-card-head) { margin-left: 7px; margin-right: 7px; }
.tgc-card > * + *:not(.tgc-card-head) { margin-top: 4px; }
.tgc-card > *:not(.tgc-card-head):first-child { margin-top: 5px; }
.tgc-card > *:not(.tgc-card-head):last-child { margin-bottom: 6px; }

.tgc-card-head { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px;
  min-height: 21px; padding: 3px 8px 3px 9px; background: var(--o-panel2);
  border-bottom: 1px solid var(--tgc-hair);
  border-radius: var(--tgc-r) var(--tgc-r) 0 0; }
.tgc-card > .tgc-card-head + * { margin-top: 5px; }
.tgc-card-title { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 11px;
  font-weight: 700; letter-spacing: .9px; color: var(--o-white); }
.tgc-card-title:before { content: "▮"; flex: 0 0 auto; font-size: 8px; color: var(--o-line3); }
.tgc-card-meta { margin-left: auto; display: flex; align-items: center; gap: 10px; min-width: 0;
  font-size: 10px; letter-spacing: .4px; color: var(--o-white2); white-space: nowrap; }

/* 链上存证卡片：顶部 2px 溯源紫条 + 紫色调头部 */
.tgc-card.chain { --tgc-bar-t: var(--tgc-trace); border-color: var(--tgc-trace-dim); }
.tgc-card.chain .tgc-card-head { background: rgba(185, 140, 255, .07);
  border-bottom-color: var(--tgc-trace-dim); }
.tgc-card.chain .tgc-card-title:before { color: var(--tgc-trace); }

/* 置顶卡片：边框提亮 + 底色抬一档（不加重色块） */
.tgc-card.pinned { border-color: var(--o-line3); background: var(--o-panel2); }
.tgc-card.pinned .tgc-card-title:before { content: "◆"; color: var(--o-white2); }

/* 左上角区块高度角标（溯源紫，极小面积底） */
.tgc-blockno { display: inline-flex; align-items: center; gap: 3px; flex: 0 0 auto;
  align-self: flex-start; padding: 0 5px; font-size: 9.5px; line-height: 1.6;
  letter-spacing: .6px; white-space: nowrap; color: var(--tgc-trace);
  background: var(--tgc-trace-bg); border: 1px solid var(--tgc-trace-dim);
  border-radius: var(--tgc-r-xs); font-variant-numeric: tabular-nums; user-select: none; }
.tgc-blockno:before { content: "#"; opacity: .8; }

/* 五类语义标记 */
.tgc-kind { display: inline-block; padding: 0 5px; font-size: 9.5px; line-height: 1.5;
  letter-spacing: .7px; white-space: nowrap; border: 1px solid var(--o-line2);
  border-radius: var(--tgc-r-xs); color: var(--o-white2); background: transparent; }
.tgc-kind.fundamental { color: var(--o-cyan); border-color: rgba(53, 200, 240, .34); }
.tgc-kind.strategy { color: var(--o-green); border-color: rgba(0, 224, 122, .34); }
.tgc-kind.signal { color: var(--o-amber); border-color: rgba(255, 176, 32, .34); }
.tgc-kind.macro { color: var(--o-white2); border-color: var(--o-line3); }
.tgc-kind.notice { color: var(--o-white); border-color: var(--o-line3); border-style: dashed; }

/* 卡片左侧 2px 语义条（放在 .tgc-card 之后，确保变量覆盖生效） */
.tgc-cat-fnd { --tgc-bar-l: var(--o-cyan); }
.tgc-cat-sty { --tgc-bar-l: var(--o-green); }
.tgc-cat-sig { --tgc-bar-l: var(--o-amber); }
.tgc-cat-mac { --tgc-bar-l: var(--o-white2); }

/* ================================================================ 3. 哈希 / 校验 / 证明 / 链 */
/* 哈希与地址：等宽 + 字距 + 可点选复制；超长省略，hover 展开全文 */
.tgc-hash { display: inline-block; max-width: 26ch; padding: 0 3px; font-family: var(--mono);
  font-size: 10.5px; letter-spacing: .35px; font-variant-numeric: tabular-nums; color: var(--tgc-trace);
  background: var(--tgc-trace-bg); border: 1px solid transparent; border-radius: var(--tgc-r-xs);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom;
  cursor: text; user-select: text; -webkit-user-select: text;
  transition: max-width .16s ease, background .16s ease, border-color .16s ease; }
.tgc-hash:hover { max-width: none; white-space: normal; word-break: break-all;
  background: rgba(185, 140, 255, .09); border-color: var(--tgc-trace-dim); }
.tgc-hash.short { max-width: 14ch; letter-spacing: .2px; }

.tgc-hash-row { position: relative; display: flex; align-items: center; gap: 6px; min-width: 0;
  padding: 2px 0; }
.tgc-hash-row .tgc-hash { flex: 0 1 auto; min-width: 0; }
.tgc-hash-row > .k, .tgc-hash-row > label { flex: 0 0 auto; font-size: 9.5px; letter-spacing: .5px;
  color: var(--o-white2); text-transform: uppercase; white-space: nowrap; }

/* 链上校验徽章：属溯源层，故用紫；通过/失败用符号区分，绝不与行情绿混淆 */
.tgc-verify { display: inline-flex; align-items: center; gap: 4px; padding: 0 5px; font-size: 9.5px;
  line-height: 1.5; letter-spacing: .6px; white-space: nowrap; color: var(--o-white2);
  border: 1px solid var(--o-line2); border-radius: var(--tgc-r-xs); background: transparent; }
.tgc-verify:before { content: "?"; font-weight: 700; }
.tgc-verify.ok { color: var(--tgc-trace); border-color: var(--tgc-trace-dim); background: var(--tgc-trace-bg); }
.tgc-verify.ok:before { content: "✓"; }
.tgc-verify.bad { color: var(--o-red); border-color: rgba(255, 59, 84, .34); background: rgba(255, 59, 84, .06); }
.tgc-verify.bad:before { content: "✕"; }

/* Merkle 证明路径 */
.tgc-proof { display: flex; flex-direction: column; min-width: 0; padding: 2px;
  background: rgba(185, 140, 255, .03); border: 1px solid var(--tgc-trace-dim);
  border-radius: var(--tgc-r); }
.tgc-proof:before { content: "MERKLE PROOF"; padding: 1px 4px 2px; font-size: 8.5px;
  letter-spacing: 1.4px; color: var(--tgc-trace); }
.tgc-proof-step { display: flex; align-items: center; gap: 6px; min-width: 0;
  padding: 1.5px 4px; border-top: 1px solid var(--tgc-hair); }
.tgc-proof-step:first-of-type { border-top: 0; }
.tgc-proof-step .side { flex: 0 0 auto; min-width: 30px; text-align: center; font-size: 9px;
  letter-spacing: .5px; color: var(--o-white2); border: 1px solid var(--o-line2);
  border-radius: var(--tgc-r-xs); }
.tgc-proof-step .side.l, .tgc-proof-step .side.left { color: var(--o-cyan); border-color: rgba(53, 200, 240, .3); }
.tgc-proof-step .side.r, .tgc-proof-step .side.right { color: var(--o-amber); border-color: rgba(255, 176, 32, .3); }

/* 链式连接：link → link，head 为最新块（溯源紫） */
.tgc-chain { display: flex; align-items: center; flex-wrap: wrap; min-width: 0; }
.tgc-chain-link { position: relative; display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 6px; font-size: 10px; letter-spacing: .4px; white-space: nowrap;
  color: var(--o-white2); background: var(--o-field); border: 1px solid var(--o-line2);
  border-radius: var(--tgc-r-xs); }
.tgc-chain-link + .tgc-chain-link { margin-left: 15px; }
.tgc-chain-link + .tgc-chain-link:before { content: "→"; position: absolute; left: -14px;
  color: var(--tgc-trace); font-size: 10px; }
.tgc-chain-link.head { color: var(--tgc-trace); border-color: var(--tgc-trace-dim);
  background: var(--tgc-trace-bg); font-weight: 700; }

/* ================================================================ 4. 身份与治理 */
.tgc-wallet { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%;
  padding: 1px 6px; font-size: 10.5px; letter-spacing: .4px; color: var(--o-white2);
  background: var(--o-field); border: 1px solid var(--o-line2); border-radius: var(--tgc-r-s); }
.tgc-wallet:before { content: "◇"; flex: 0 0 auto; font-size: 10px; color: var(--o-white2); }
.tgc-wallet .addr { min-width: 0; font-family: var(--mono); letter-spacing: .4px;
  color: var(--tgc-trace); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  cursor: text; user-select: text; -webkit-user-select: text; }
.tgc-wallet.bound { border-color: var(--tgc-trace-dim); background: var(--tgc-trace-bg); }
.tgc-wallet.bound:before { content: "◆"; color: var(--tgc-trace); }

/* 头像：圆形首字母。派生色由 JS 通过 inline style 或 --tgc-av 注入，缺省为溯源紫 */
.tgc-avatar { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 22px; height: 22px; border-radius: 50%; font-size: 10px; font-weight: 700;
  line-height: 1; letter-spacing: .3px; text-transform: uppercase; user-select: none;
  color: var(--tgc-av, var(--tgc-trace)); background: var(--tgc-av-bg, var(--tgc-trace-bg));
  border: 1px solid var(--tgc-av, var(--tgc-trace)); }
.tgc-avatar img, .tgc-avatar svg { display: block; width: 100%; height: 100%; border-radius: 50%; }

/* 等级徽章：单色阶梯 + 菱形点数，t5 为最高等级（绿=达标/通过，与溯源紫无关） */
.tgc-tier { display: inline-flex; align-items: center; gap: 4px; padding: 0 5px; font-size: 9.5px;
  line-height: 1.5; letter-spacing: .8px; white-space: nowrap; color: var(--o-white2);
  border: 1px solid var(--o-line2); border-radius: var(--tgc-r-xs); background: transparent; }
.tgc-tier:before { content: "◆"; font-size: 6px; letter-spacing: -1px; }
.tgc-tier.t1 { color: var(--o-white2); border-color: var(--o-line2); }
.tgc-tier.t1:before { content: "◆"; }
.tgc-tier.t2 { color: var(--o-white2); border-color: var(--o-line3); }
.tgc-tier.t2:before { content: "◆◆"; }
.tgc-tier.t3 { color: var(--o-white); border-color: var(--o-line3); }
.tgc-tier.t3:before { content: "◆◆◆"; }
.tgc-tier.t4 { color: var(--o-white); border-color: rgba(232, 242, 234, .34); }
.tgc-tier.t4:before { content: "◆◆◆◆"; }
.tgc-tier.t5 { color: var(--o-green); border-color: rgba(0, 224, 122, .34);
  background: var(--o-green-d); font-weight: 700; }
.tgc-tier.t5:before { content: "◆◆◆◆◆"; }

/* 贡献值：标签 + 进度条 + 数值 */
.tgc-xp { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 10px;
  letter-spacing: .3px; color: var(--o-white2); }
.tgc-xp b, .tgc-xp strong { color: var(--o-white); font-weight: 700; font-variant-numeric: tabular-nums; }
.tgc-xp-bar { position: relative; flex: 1 1 auto; min-width: 40px; height: 7px; padding: 1px;
  background: var(--o-field); border: 1px solid var(--o-line2); border-radius: var(--tgc-r-xs);
  overflow: hidden; }
.tgc-xp-bar > i { display: block; height: 100%; width: 0; max-width: 100%;
  background: var(--o-cyan); border-radius: var(--tgc-r-xs); transition: width .3s ease; }

/* 共识投票 */
.tgc-vote { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; min-width: 0; }
.tgc-vote-btn { padding: 1px 9px; font-size: 10.5px; letter-spacing: .5px; white-space: nowrap;
  color: var(--o-white2); background: transparent; border: 1px solid var(--o-line2);
  border-radius: var(--tgc-r-s); cursor: pointer;
  transition: color .12s, background .12s, border-color .12s; }
.tgc-vote-btn:hover { color: var(--o-white); background: #101A15; border-color: var(--o-line3); }
.tgc-vote-btn:focus-visible { outline: 1px solid var(--o-green); outline-offset: 1px; }
.tgc-vote-btn.on { font-weight: 700; border-color: var(--o-white2); background: #16261E; }
.tgc-vote-btn.on:not(.acc):not(.warn):not(.bad):not(.up):not(.down) { color: var(--o-white); }
.tgc-vote-btn:disabled { color: var(--tgc-ink-dim); border-color: var(--o-line); cursor: not-allowed; }

/* 共识投票条：填充=共识进度（绿），2/3 处为通过门槛发丝线 */
.tgc-meter { position: relative; display: flex; height: 8px; padding: 1px; overflow: hidden;
  background: var(--o-field); border: 1px solid var(--o-line2); border-radius: var(--tgc-r-xs); }
.tgc-meter > i { display: block; height: 100%; width: 0; max-width: 100%;
  background: var(--o-green2); border-radius: var(--tgc-r-xs); transition: width .35s ease; }
.tgc-meter:after { content: ""; position: absolute; top: 0; bottom: 0; left: 66.7%; width: 1px;
  background: var(--o-white2); opacity: .7; }

/* ================================================================ 5. 内容与数据 */
/* 比 .tiles 更紧凑的指标格 */
.tgc-tiles { display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  background: var(--tgc-hair); border: 1px solid var(--o-line); border-radius: var(--tgc-r);
  overflow: hidden; min-width: 0; }
.tgc-tile { position: relative; min-width: 0; padding: 2px 6px 3px; background: var(--o-field); }
.tgc-tile:before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px;
  background: var(--o-line2); }
.tgc-tile .k { font-size: 9px; letter-spacing: .3px; color: var(--o-white2); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.tgc-tile .v { font-size: 12.5px; font-weight: 700; line-height: 1.25; letter-spacing: -.2px;
  color: var(--o-white); font-variant-numeric: tabular-nums; }
.tgc-tile .s { font-size: 9px; color: var(--o-white2); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }

/* 评审卡（含裁决底色条） */
.tgc-judge { min-width: 0; padding: 5px 8px; font-size: 11px; line-height: 1.6; color: var(--o-white);
  background: var(--o-field); border: 1px solid var(--o-line2); border-left-width: 2px;
  border-left-color: var(--o-line3); border-radius: var(--tgc-r-s); }
.tgc-judge-head { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin-bottom: 3px;
  font-size: 10px; font-weight: 700; letter-spacing: .9px; color: var(--o-white2);
  text-transform: uppercase; }
.tgc-judge-body { font-size: 11px; line-height: 1.65; color: var(--o-white2); }
.tgc-judge-body b, .tgc-judge-body strong { color: var(--o-white); }
.tgc-judge.acc { border-left-color: var(--o-green); }
.tgc-judge.acc .tgc-judge-head { color: var(--o-green); }
.tgc-judge.warn { border-left-color: var(--o-amber); }
.tgc-judge.warn .tgc-judge-head { color: var(--o-amber); }
.tgc-judge.bad { border-left-color: var(--o-red); }
.tgc-judge.bad .tgc-judge-head { color: var(--o-red); }

/* 风险清单 */
.tgc-risk-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none;
  border-top: 1px solid var(--tgc-hair); }
.tgc-risk-list li { position: relative; padding: 2px 6px 2px 15px; font-size: 11px; line-height: 1.5;
  color: var(--o-white2); border-bottom: 1px solid var(--tgc-hair); }
.tgc-risk-list li:last-child { border-bottom: 0; }
.tgc-risk-list li:before { content: "!"; position: absolute; left: 4px; top: 2px; font-size: 10px;
  font-weight: 700; color: var(--o-amber); }
.tgc-risk-list li b, .tgc-risk-list li strong { color: var(--o-white); }

/* 权益迷你图（内为 canvas） */
.tgc-spark { display: block; position: relative; width: 100%; min-height: 30px; height: 34px;
  background: var(--o-void); border: 1px solid var(--o-line); border-radius: var(--tgc-r-s);
  overflow: hidden; }
.tgc-spark > canvas, .tgc-spark canvas { display: block; width: 100%; height: 100%; }

/* 信息流：滚动容器 + 带左侧 2px 溯源紫条的条目 */
.tgc-feed { display: flex; flex-direction: column; gap: 4px; min-width: 0; max-height: 440px;
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding-right: 2px; }
.tgc-item { position: relative; min-width: 0; padding: 4px 8px 5px 10px; background: var(--o-field);
  border: 1px solid var(--o-line); border-radius: var(--tgc-r);
  box-shadow: inset 2px 0 0 var(--tgc-item-bar, var(--tgc-trace)),
              inset 0 2px 0 var(--tgc-bar-t, transparent);
  transition: border-color .12s, background .12s; }
.tgc-item:hover { border-color: var(--o-line2); background: #0A120E; }
.tgc-item-title { font-size: 11.5px; font-weight: 700; line-height: 1.4; color: var(--o-white);
  overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; }
.tgc-item-summary { margin-top: 2px; font-size: 10.5px; line-height: 1.55; color: var(--o-white2);
  overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; }
.tgc-item-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin-top: 3px;
  padding-top: 3px; border-top: 1px solid var(--tgc-hair); font-size: 9.5px; letter-spacing: .3px;
  color: var(--o-white2); }

/* 标签：acc/warn/bad 为业务语义，不随 cn-mode 反转 */
.tgc-tag { display: inline-block; padding: 0 5px; font-size: 9.5px; line-height: 1.5;
  letter-spacing: .5px; white-space: nowrap; color: var(--o-white2); background: transparent;
  border: 1px solid var(--o-line2); border-radius: var(--tgc-r-xs); }
.tgc-tag.acc { color: var(--o-green); border-color: rgba(0, 224, 122, .42); background: rgba(0, 224, 122, .06); }
.tgc-tag.warn { color: var(--o-amber); border-color: rgba(255, 176, 32, .42); background: rgba(255, 176, 32, .06); }
.tgc-tag.bad { color: var(--o-red); border-color: rgba(255, 59, 84, .42); background: rgba(255, 59, 84, .06); }

/* ================================================================ 6. 交互：输入 / 按钮 / 浮层 */
.tgc-composer { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 5px 6px;
  background: var(--o-field); border: 1px solid var(--o-line2); border-radius: var(--tgc-r); }
.tgc-composer textarea { width: 100%; min-height: 52px; max-height: 180px; padding: 0; resize: vertical;
  font-family: var(--mono); font-size: 11.5px; line-height: 1.55; color: var(--o-white);
  background: transparent; border: 0; outline: none; }
.tgc-composer textarea::placeholder { color: var(--tgc-ink-dim); opacity: 1; }
.tgc-composer:focus-within { border-color: var(--o-green); }

.tgc-input, .tgc-select { width: 100%; min-width: 0; padding: 3px 7px; font-family: var(--mono);
  font-size: 11px; color: var(--o-white); background-color: var(--o-field);
  border: 1px solid var(--o-line2); border-radius: var(--tgc-r-s); outline: none;
  transition: border-color .12s, background-color .12s; }
.tgc-input::placeholder { color: var(--tgc-ink-dim); opacity: 1; }
.tgc-input:focus, .tgc-select:focus { border-color: var(--o-green); background-color: #08120D; }
.tgc-select { appearance: none; -webkit-appearance: none; padding-right: 20px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--o-green) 50%),
                    linear-gradient(135deg, var(--o-green) 50%, transparent 50%);
  background-position: calc(100% - 12px) 8px, calc(100% - 8px) 8px;
  background-size: 4px 4px; background-repeat: no-repeat; }
.tgc-select option { color: var(--o-white); background: var(--o-panel2); }

.tgc-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; min-width: 0; }
.tgc-btn { padding: 2px 10px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .5px;
  white-space: nowrap; color: var(--o-white); background: transparent;
  border: 1px solid var(--o-line2); border-radius: var(--tgc-r-s); cursor: pointer;
  transition: color .1s, background .1s, border-color .1s; }
.tgc-btn:hover { background: #101A15; border-color: var(--o-line3); }
.tgc-btn:focus-visible { outline: 1px solid var(--o-green); outline-offset: 1px; }
.tgc-btn.primary { color: var(--o-green); background: var(--o-green-d);
  border-color: rgba(0, 224, 122, .42); font-weight: 700; }
.tgc-btn.primary:hover { background: #075437; border-color: var(--o-green); }
.tgc-btn.ghost { color: var(--o-white2); background: transparent; border-color: transparent; }
.tgc-btn.ghost:hover { color: var(--o-white); background: transparent; border-color: var(--o-line2); }
.tgc-btn:disabled, .tgc-btn[disabled] { color: var(--tgc-ink-dim); background: transparent;
  border-color: var(--o-line); cursor: not-allowed; }
.tgc-btn.primary:disabled, .tgc-btn.primary[disabled] { color: var(--tgc-ink-dim);
  background: transparent; border-color: var(--o-line2); }

/* 完整哈希浮层：默认隐藏，hover 行 / focus / JS 加 .show|.on 时显示 */
.tgc-tooltip { position: absolute; z-index: 40; left: 0; top: calc(100% + 3px); max-width: 340px;
  padding: 3px 6px; font-family: var(--mono); font-size: 10px; line-height: 1.5; letter-spacing: .3px;
  color: var(--tgc-trace); background: #04120A; border: 1px solid var(--tgc-trace);
  border-radius: var(--tgc-r-xs); word-break: break-all; white-space: normal;
  pointer-events: none; opacity: 0; visibility: hidden; transform: translateY(-2px);
  transition: opacity .12s ease, transform .12s ease; }
.tgc-hash-row:hover .tgc-tooltip, .tgc-hash-row:focus-within .tgc-tooltip,
.tgc-hash:hover + .tgc-tooltip, .tgc-tooltip:hover,
.tgc-tooltip.show, .tgc-tooltip.on { opacity: 1; visibility: visible; transform: none; }

/* 口径 / 免责声明条：安静但不牺牲可读性（--tgc-ink-dim ≈ 7.8:1，仍 ≥ 4.5:1） */
.tgc-notice { display: flex; align-items: flex-start; gap: 6px; margin: 4px 0 0; padding: 4px 8px;
  font-size: 10px; line-height: 1.6; letter-spacing: .3px; color: var(--tgc-ink-dim);
  background: var(--o-field); border: 1px solid var(--tgc-hair); border-left: 2px solid var(--o-line3);
  border-radius: var(--tgc-r-s); }
.tgc-notice b, .tgc-notice strong { color: var(--o-white2); font-weight: 700; }

/* 加载骨架：轻微 pulse */
.tgc-skel { display: block; min-width: 24px; height: 10px; background: var(--o-line2);
  border: 1px solid var(--o-line3); border-radius: var(--tgc-r-xs);
  animation: tgc-pulse 1.5s ease-in-out infinite; }
@keyframes tgc-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* ================================================================ 7. cn-mode（红涨绿跌）守护 */
/* 本层语义色与溯源紫是「层标识」，不参与涨跌反转；此处显式钉死，避免被任何继承/覆盖翻转。
   真正的涨跌数字请继续使用既有 .up / .down（它们会随 cn-mode 正确反转）。 */
body.cn-mode .tgc-tag.acc { color: var(--o-green); border-color: rgba(0, 224, 122, .42); }
body.cn-mode .tgc-tag.warn { color: var(--o-amber); border-color: rgba(255, 176, 32, .42); }
body.cn-mode .tgc-tag.bad { color: var(--o-red); border-color: rgba(255, 59, 84, .42); }
body.cn-mode .tgc-verify.ok { color: var(--tgc-trace); border-color: var(--tgc-trace-dim); }
body.cn-mode .tgc-verify.bad { color: var(--o-red); border-color: rgba(255, 59, 84, .34); }
body.cn-mode .tgc-cat-fnd { --tgc-bar-l: var(--o-cyan); }
body.cn-mode .tgc-cat-sty { --tgc-bar-l: var(--o-green); }
body.cn-mode .tgc-cat-sig { --tgc-bar-l: var(--o-amber); }
body.cn-mode .tgc-cat-mac { --tgc-bar-l: var(--o-white2); }
body.cn-mode .tgc-xp-bar > i { background: var(--o-cyan); }
body.cn-mode .tgc-meter > i { background: var(--o-green2); }
body.cn-mode .tgc-item { --tgc-item-bar: var(--tgc-trace); }

/* ================================================================ 8. 窄屏收敛 */
@media (max-width: 1500px) { .tgc-grid { grid-template-columns: minmax(0, 1fr) minmax(260px, 300px); } }
@media (max-width: 1180px) { .tgc-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) {
  .tgc-topbar .seg { border-right: 0; border-bottom: 1px solid var(--tgc-hair); flex: 1 1 100%; }
  .tgc-topbar .seg:last-child { border-bottom: 0; }
  .tgc-hash { max-width: 18ch; }
}

/* ================================================================ 9. 降低动态（无障碍） */
@media (prefers-reduced-motion: reduce) {
  .tgc-skel { animation: none; opacity: .85; }
  .tgc-card, .tgc-tab, .tgc-btn, .tgc-vote-btn, .tgc-item, .tgc-hash, .tgc-input, .tgc-select,
  .tgc-xp-bar > i, .tgc-meter > i, .tgc-tooltip { transition: none; }
  .tgc-hash:hover { max-width: none; }
}

/* ================================================================ 10. 浅色主题适配（可选，跟随既有 body.light-mode） */
/* 既有 light-mode 未重映射 --o-field，也未定义本层令牌；此处只覆盖 tgc- 层：
     1) 浅底上的溯源紫需加深一档（#6A3FC4 对白底 ≈ 6.7:1，原 #B98CFF 仅 ≈ 2.4:1）
     2) --o-field 系的底色与 4 处深色 hover 底色改为浅色，避免白卡片上出现深色斑块 */
body.light-mode {
  --tgc-trace:     #6A3FC4;
  --tgc-trace-dim: rgba(106, 63, 196, .34);
  --tgc-trace-bg:  rgba(106, 63, 196, .06);
  --tgc-ink-dim:   #4A6155;
}
body.light-mode .tgc-tile, body.light-mode .tgc-item, body.light-mode .tgc-judge,
body.light-mode .tgc-composer, body.light-mode .tgc-input, body.light-mode .tgc-select,
body.light-mode .tgc-notice, body.light-mode .tgc-empty, body.light-mode .tgc-wallet,
body.light-mode .tgc-xp-bar, body.light-mode .tgc-meter, body.light-mode .tgc-chain-link
  { background-color: #FFFFFF; }
body.light-mode .tgc-tab:hover, body.light-mode .tgc-btn:hover, body.light-mode .tgc-vote-btn:hover,
body.light-mode .tgc-vote-btn.on { background: #EAF2EC; }
body.light-mode .tgc-item:hover { background: #FFFFFF; }
body.light-mode .tgc-input:focus, body.light-mode .tgc-select:focus { background-color: #FFFFFF; }
body.light-mode .tgc-tooltip { background: #FFFFFF; }
/* == 交易者社区 Web3 视觉层 · 追加结束 == */

/* ==================================================================================
   密码栏显示 / 隐藏
   ─────────────────────────────────────────────────────────────────────────────────
   交互：眼睛图标按钮嵌在输入框右侧，点击在「明文」与「掩码」之间切换。
   可访问性：按钮带 aria-label / aria-pressed，键盘 Enter/Space 可切换，
            切到明文后光标停在末尾（不会跳回开头）。
   安全：明文只存在于当前输入框内，不落日志、不写存储；面板重开自动复位为掩码。
   ================================================================================== */

.pw-wrap { position: relative; display: block; }
.pw-wrap .pw-input,
.pw-wrap input { padding-right: 38px; }        /* 给眼睛按钮让位 */
.pw-eye {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid transparent; border-radius: 4px;
  color: var(--o-white3); cursor: pointer; line-height: 0;
  transition: color .12s, background .12s, border-color .12s;
}
.pw-eye:hover { color: var(--o-green); background: rgba(0, 224, 122, .10); border-color: var(--o-line2); }
.pw-eye:focus-visible { outline: 1px solid var(--o-green); outline-offset: 1px; }
.pw-eye.on { color: var(--o-green); background: rgba(0, 224, 122, .14); border-color: var(--o-line2); }
.pw-eye svg { display: block; }

/* 账号面板里的密码强度条（与首次设置页同一套视觉） */
.pw-bar { height: 4px; background: #101815; border: 1px solid var(--o-line); margin-top: 2px; }
.pw-bar i { display: block; height: 100%; width: 0; background: var(--o-red); transition: width .18s, background .18s; }

/* 明文状态下给输入框一点视觉提示，避免误以为还是掩码 */
.pw-wrap input[type="text"].pw-input { border-color: var(--o-amber); }
.pw-wrap input[type="password"].pw-input { border-color: var(--o-line2); }
.pw-wrap input[type="text"].pw-input:focus { border-color: var(--o-amber); box-shadow: 0 0 0 2px rgba(255, 176, 32, .13); }

/* ==================================================================================
   客户向视觉优化层（Client Visual Polish）
   ─────────────────────────────────────────────────────────────────────────────────
   定位：**不推翻终端美学，去掉生硬感**。
     保留：深色底、绿白双主色、等宽数字、高信息密度、面板栅格（这是专业感来源）
     改善：纯黑底 → 分层暖黑；零圆角 → 6px 圆角；无层次 → 轻边框 + 极淡阴影；
           全局等宽 → 长文本改比例字体；弱文字对比 → 提到 AA；空态 → 引导卡片
   为什么这样做：原设计是刻意的终端风格（对量化团队是优点），但普通客户第一眼会
   觉得「像开发工具」。升级的目标是「专业但不拒人」，而不是变成消费级 App。
   实现约束：只覆盖外壳与令牌，不碰 .tgc-*（交易者社区模块自带一套已调优的令牌）。
   ================================================================================== */

:root {
  /* ---- 底色：纯黑 #000 观感过硬 → 分层暖黑，长时间盯屏更舒适 ---- */
  --o-void:   #060A08;
  --o-bg:     #070C09;
  --o-panel:  #0B120E;
  --o-panel2: #101813;
  --o-field:  #080E0B;

  /* ---- 结构线：略提亮，让面板边界「看得见但不出戏」---- */
  --o-line:   #1B2A22;
  --o-line2:  #26382E;
  --o-line3:  #35503F;

  /* ---- 文字：把最弱一档提到 AA（原 #6C8378 在深底上约 4.0:1）---- */
  --o-white:  #EAF4EC;
  --o-white2: #B4C8BC;
  --o-white3: #849C90;

  /* ---- 形状语言：从零圆角改为克制的 6px ---- */
  --radius:   6px;
  --radius-s: 4px;

  /* ---- 层次：阴影只用于「浮起来的东西」，绝不铺满 ---- */
  --shadow:      0 1px 0 rgba(255, 255, 255, .02) inset;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .40), 0 0 0 1px rgba(255, 255, 255, .012) inset;
  --shadow-pop:  0 18px 48px rgba(0, 0, 0, .62);
  --focus-ring:  0 0 0 2px rgba(0, 224, 122, .22);
}

/* ---- 版面节律：给内容留呼吸，避免"贴边"---- */
.views { padding: 8px; }
.cols { gap: 8px; }
.card + .card { margin-top: 8px; }

/* ---- 卡片：细边框 + 微阴影 + 圆角；标题条用极淡渐变代替色块 ---- */
.card {
  background: linear-gradient(180deg, var(--o-panel) 0%, var(--o-bg) 100%);
  border: 1px solid var(--o-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.card-head {
  background: linear-gradient(180deg, rgba(255, 255, 255, .028), rgba(0, 0, 0, .10));
  border-bottom: 1px solid var(--o-line);
  padding: 5px 10px;
  min-height: 25px;
}
.card-title { font-size: 11.5px; font-weight: 600; letter-spacing: .5px; color: var(--o-white); }
.card-title::before {
  content: ""; display: inline-block; width: 2px; height: 10px; border-radius: 2px;
  background: var(--o-green); margin-right: 7px; vertical-align: -1px; opacity: .9;
}
.card-sub { color: var(--o-white3); }

/* ---- 指标格：给数字留出视觉重量，标签后退 ---- */
.tiles { border-radius: var(--radius-s); overflow: hidden; }
.tile {
  background: linear-gradient(180deg, rgba(255, 255, 255, .015), transparent);
  padding: 5px 8px 6px;
  transition: background .14s;
}
.tile:hover { background: rgba(0, 224, 122, .045); }
.tile .l { color: var(--o-white3); letter-spacing: .4px; }
.tile .v { font-weight: 600; letter-spacing: -.2px; }
.tile .s { color: var(--o-white3); }

/* ---- 功能键栏：选中态更有"当前所在"的确定感 ---- */
.tabs {
  background: linear-gradient(180deg, var(--o-panel) 0%, var(--o-bg) 100%);
  border-bottom: 1px solid var(--o-line);
  padding: 0 8px;
}
.tab {
  border-radius: var(--radius-s) var(--radius-s) 0 0;
  transition: background .13s, color .13s;
  position: relative;
}
.tab:hover { background: rgba(0, 224, 122, .07); color: var(--o-white); }
.tab.active { background: var(--o-green-d); color: #fff; font-weight: 600; }
.tab.active::after {
  content: ""; position: absolute; left: 8px; right: 8px; bottom: 0; height: 2px;
  background: var(--o-green); border-radius: 2px 2px 0 0;
}
.tab-group { border-radius: 0; }

/* ---- 按钮与表单：可点击感来自边框与位移，而不是颜色堆叠 ---- */
.btn {
  border-radius: var(--radius-s);
  transition: background .13s, border-color .13s, transform .06s, color .13s;
}
.btn:hover { border-color: var(--o-line3); background: rgba(255, 255, 255, .045); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--o-green); border-color: var(--o-green); color: #04140C; font-weight: 700; }
.btn.primary:hover { background: #16F08A; border-color: #16F08A; }
.btn.danger { border-color: rgba(255, 59, 84, .55); color: var(--o-red); }
.btn.danger:hover { background: rgba(255, 59, 84, .12); }
.btn:focus-visible, .input:focus-visible, .select:focus-visible {
  outline: none; box-shadow: var(--focus-ring);
}
.input, .select {
  background: var(--o-field);
  border: 1px solid var(--o-line2);
  border-radius: var(--radius-s);
  transition: border-color .13s, box-shadow .13s;
}
.input:hover, .select:hover { border-color: var(--o-line3); }
.input:focus, .select:focus { border-color: var(--o-green); box-shadow: var(--focus-ring); }

/* ---- 表格：去掉"表格线森林"，只保留行分隔 ---- */
table.tbl { border-collapse: collapse; }
table.tbl th {
  background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(0, 0, 0, .12));
  border-right: 0;
  letter-spacing: .3px;
  position: sticky; top: 0; z-index: 2;
}
table.tbl td { border-right: 0; }
table.tbl tbody tr:nth-child(even) { background: rgba(255, 255, 255, .012); }
table.tbl tbody tr:hover { background: rgba(0, 224, 122, .055); }

/* ---- 侧栏：分组标题更像"目录"，标的行有明确悬停反馈 ---- */
.sidebar { background: linear-gradient(180deg, var(--o-panel) 0%, var(--o-bg) 100%); }
.side-head { background: transparent; }
.side-title { letter-spacing: .8px; }
.sub-head {
  background: rgba(255, 255, 255, .022);
  letter-spacing: .6px;
  color: var(--o-white2);
}
.srow { transition: background .1s; }
.srow:hover { background: rgba(0, 224, 122, .075); }
.srow.active { background: rgba(0, 224, 122, .12); box-shadow: inset 2px 0 0 var(--o-green); }
.chip { border-radius: 999px; transition: all .13s; }
.chip.active { background: var(--o-green-d); border-color: var(--o-green); color: var(--o-green); }

/* ---- 弹窗 / 提示：投影更明确，圆角与卡片一致 ---- */
.modal { background: rgba(3, 7, 5, .74); backdrop-filter: blur(2px); }
.modal-box {
  border-radius: 10px;
  border: 1px solid var(--o-line2);
  box-shadow: var(--shadow-pop);
  background: linear-gradient(180deg, var(--o-panel) 0%, var(--o-bg) 100%);
}
.modal-head { border-radius: 10px 10px 0 0; background: linear-gradient(180deg, rgba(0, 224, 122, .10), transparent); }
.toast { border-radius: var(--radius-s); box-shadow: var(--shadow-pop); }

/* ---- 状态栏：压暗、后退，不抢内容焦点 ---- */
.statusbar {
  background: linear-gradient(180deg, var(--o-panel2), var(--o-panel));
  border-top: 1px solid var(--o-line);
}

/* ---- 长文本改比例字体：等宽只留给数字与代码 ---- */
.empty, .verdict, .about-sub, .about-item .v, .gate-hint, .gate-note,
.notes, .hint, .desc, .txt, .help, .lead {
  font-family: var(--sans);
  letter-spacing: .2px;
  line-height: 1.62;
}
.about-item .v { line-height: 1.6; }
.kvlist { font-family: var(--mono); }
.badge { border-radius: 3px; letter-spacing: .3px; font-weight: 600; }

/* ---- 滚动条：细一点、暗一点，减少视觉噪音 ---- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #223229; border-radius: 6px; border: 2px solid var(--o-bg); }
::-webkit-scrollbar-thumb:hover { background: #2E4436; }

/* ================================================================ 首次进入引导 */
.firstrun { margin: 4px; }
.firstrun-hero {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 16px 18px; border-radius: 8px;
  background: linear-gradient(120deg, rgba(0, 224, 122, .10), rgba(0, 224, 122, .02) 62%, transparent);
  border: 1px solid var(--o-line2);
}
.firstrun-hero .logo { width: 52px; height: 52px; flex: 0 0 auto; aspect-ratio: 1/1; }
.firstrun-hero h2 {
  font-family: var(--sans); font-size: 17px; font-weight: 700; color: var(--o-white);
  letter-spacing: .3px; margin-bottom: 4px;
}
.firstrun-hero p { font-family: var(--sans); font-size: 12px; color: var(--o-white2); line-height: 1.6; }
.firstrun-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 8px; margin-top: 8px;
}
.firstrun-card {
  border: 1px solid var(--o-line); border-radius: 6px; padding: 11px 13px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .018), transparent);
  transition: border-color .14s, transform .14s;
}
.firstrun-card:hover { border-color: var(--o-green2); transform: translateY(-1px); }
.firstrun-card .n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 19px; height: 19px; border-radius: 50%; font-size: 10px; font-weight: 700;
  background: var(--o-green-d); color: var(--o-green); margin-right: 7px;
}
.firstrun-card .t { font-family: var(--sans); font-size: 12.5px; font-weight: 700; color: var(--o-white); }
.firstrun-card .d {
  font-family: var(--sans); font-size: 11px; color: var(--o-white2);
  line-height: 1.6; margin-top: 5px;
}
.firstrun-card .k {
  display: inline-block; margin-top: 7px; padding: 1px 7px; border-radius: 3px;
  font-size: 10px; background: rgba(0, 224, 122, .10); color: var(--o-green);
  border: 1px solid rgba(0, 224, 122, .28);
}

/* ---- 空态：给"下一步做什么"，而不是一句冷冰冰的"暂无数据"---- */
.empty {
  padding: 22px 16px; text-align: center; color: var(--o-white2);
  background: linear-gradient(180deg, rgba(255, 255, 255, .012), transparent);
  border-radius: var(--radius-s);
}
.empty b { display: block; color: var(--o-white); font-size: 12.5px; margin-bottom: 5px; }
.empty .next { font-size: 11px; color: var(--o-white3); }

/* ---- 浅色主题跟随：客户可用账号菜单切换 ---- */
body.light-mode { --shadow-card: 0 1px 3px rgba(16, 32, 26, .10); }
body.light-mode .card { background: #fff; }
body.light-mode .card-head { background: linear-gradient(180deg, #F3F8F5, #EDF4F0); }
body.light-mode .card-title { color: #10201A; }
body.light-mode table.tbl tbody tr:nth-child(even) { background: #F7FBF9; }
body.light-mode table.tbl tbody tr:hover { background: #E8F5EE; }
body.light-mode .modal-box { background: #fff; }
body.light-mode .btn.primary { color: #04140C; }
body.light-mode .firstrun-hero { background: linear-gradient(120deg, #E8F7EF, #F4FBF7 62%, #fff); }

/* ==================================================================================
   交易者社区 · 评论区内联容器（views_community.js 专用，仅追加）
   说明：这是社区信息流卡片的「评论展开区」，平时为空、不占位；
   展开后按成员讨论串呈现，样式刻意压低对比度，不与正文抢注意力。
   ================================================================================== */
.tgc-comments:empty { display: none; }
.tgc-comments {
  margin: 4px 6px 6px; padding: 4px 0 0;
  border-top: 1px solid var(--o-hair, #0F1714);
  font-size: 10.5px; line-height: 1.55; color: var(--tgc-ink, var(--o-white2));
}
.tgc-comments .tgc-item-foot { padding: 3px 0; }
.tgc-comments .tgc-item-foot + .tgc-item-foot { border-top: 1px solid var(--o-hair, #0F1714); }
.tgc-comments .tgc-hash { color: var(--tgc-violet, #B98CFF); }
.tgc-comments .row { margin-top: 5px; }
.tgc-comments .tgc-input { flex: 1; }