/* WAC 端 · Token 真源。禁止另发明色 / 线。图鉴：UI预览/index.html */

:root {
  --bg-page: #F2EDE4;
  --bg-surface: #FFFBF4;
  --bg-muted: #E8E1D4;
  --border: #C9C0B0;  /* 白卡上必须看得见，勿再浅 */

  --line: 1px;            /* 常规描边 · 分割 · 卡 · 输入 · focus */
  --line-emphasis: 2px;   /* 仅分段选中，禁止当底栏下划线 / 卡框 */

  --text-3: #857C6E;
  --text-2: #5A544A;
  --text-1: #1A1714;

  --brand: #1E3F48;           /* 黛墨 · 主按钮 / 选中底栏 / 文字链 / WAC Chip */
  --brand-pressed: #152E35;
  --brand-bg: #E4EEF0;

  --ok: #2D7A52;
  --ok-bg: #E6F3EB;
  --warn: #A67C12;
  --warn-bg: #F6EFD4;
  --error: #C43A2A;
  --error-bg: #F8E8E5;
  --inactive: #8A8378;
  --inactive-bg: #F2EDE4;

  /* 外牌 Chip，不当全站品牌（同微信绿例外） */
  --token-usdt: #26A17B;
  --token-bnb: #F3BA2F;

  /* 中文面在前。Segoe UI 放前头时，600 命中西文 Semibold，汉字回落 Regular，标题看起来像正文 */
  --font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-num: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --fw-regular: 400;
  --fw-semibold: 600;   /* 只用 400 / 600，禁止 500 / 650 / 700 */
  --fw-title-page: var(--fw-semibold); /* 顶栏页题 */
  --fw-title-card: var(--fw-regular);  /* 卡片题。禁止和页题同重 */

  --fs-large-title: 34px; --lh-large-title: 41px;
  --fs-title-2: 22px;     --lh-title-2: 28px;
  --fs-title-3: 20px;     --lh-title-3: 25px;
  --fs-headline: 17px;    --lh-headline: 22px;
  --fs-body: 17px;        --lh-body: 22px;
  --fs-callout: 16px;     --lh-callout: 21px;
  --fs-subhead: 15px;     --lh-subhead: 20px;
  --fs-footnote: 13px;    --lh-footnote: 18px;
  --fs-caption-1: 12px;   --lh-caption-1: 16px;
  --fs-caption-2: 11px;   --lh-caption-2: 13px;
  --fs-tab: 10px;         --lh-tab: 12px;   /* 底栏专用，不进正文阶 */

  /* 4pt 网格。禁止 6 / 10 / 14 / 18 当间距（10、14 只给圆角名） */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --hit: 44px;            /* 最小热区 · 顶栏高 */
  --tabbar: 49px;         /* 底栏高，另加安全区 */
  --tracking-num: 0;      /* 数字 / 倒计时字距。禁止整句套等宽把「天」拉开 */

  --radius-xs: 4px;       /* Tag */
  --radius-sm: 8px;       /* 输入 · Banner · Mini 钮 */
  --radius-10: 10px;      /* Small 钮 */
  --radius-md: 12px;      /* Regular 钮 · 卡 */
  --radius-14: 14px;      /* Large 钮 */
  --radius-lg: 16px;      /* Sheet 顶 */
  --radius-full: 999px;   /* Chip */

  --ico-tag: 12px;        /* Tag 内五态点 · 仅实心 */
  --ico-inline: 16px;     /* Banner / 行内 / 复制 */
  --ico-row: 20px;        /* 列表行首 · 块头 */
  --ico-back: 22px;       /* 返回 */
  --ico-tab: 25px;        /* 底栏 · 选中只改色 */
  --ico-empty: 32px;      /* 空态 */
}

* { box-sizing: border-box; }
/* .chip / .hd-wallet 是 flex，不加这句 [hidden] 挡不住，错链会漏出空 Chip */
[hidden] { display: none !important; }
html {
  font-family: var(--font);
  font-synthesis: weight;
}

.type-large-title { font-size: var(--fs-large-title); line-height: var(--lh-large-title); font-weight: var(--fw-regular); color: var(--text-1); }
.type-title-2     { font-size: var(--fs-title-2);     line-height: var(--lh-title-2);     font-weight: var(--fw-regular); color: var(--text-1); }
.type-title-3     { font-size: var(--fs-title-3);     line-height: var(--lh-title-3);     font-weight: var(--fw-semibold); color: var(--text-1); }
.type-headline    { font-size: var(--fs-headline);    line-height: var(--lh-headline);    font-weight: var(--fw-title-page); color: var(--text-1); }
.type-card-title  { font-size: var(--fs-headline);    line-height: var(--lh-headline);    font-weight: var(--fw-title-card); color: var(--text-1); }
.type-body        { font-size: var(--fs-body);        line-height: var(--lh-body);        font-weight: var(--fw-regular); color: var(--text-1); }
.type-callout     { font-size: var(--fs-callout);     line-height: var(--lh-callout);     font-weight: var(--fw-regular); color: var(--text-1); }
.type-subhead     { font-size: var(--fs-subhead);     line-height: var(--lh-subhead);     font-weight: var(--fw-regular); color: var(--text-2); }
.type-footnote    { font-size: var(--fs-footnote);    line-height: var(--lh-footnote);    font-weight: var(--fw-regular); color: var(--text-3); }
.type-caption-1   { font-size: var(--fs-caption-1);   line-height: var(--lh-caption-1);   font-weight: var(--fw-regular); color: var(--text-3); }
.type-caption-2   { font-size: var(--fs-caption-2);   line-height: var(--lh-caption-2);   font-weight: var(--fw-regular); color: var(--text-3); }
.type-tab         { font-size: var(--fs-tab);         line-height: var(--lh-tab);         font-weight: var(--fw-regular); color: var(--text-3); }

/* 仅数字 / 哈希 / 倒计时时刻套等宽。中文标签跟邻档系统字，禁止整句 monospace */
.num {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-num);
}

/* 按钮 · 原子。页级主 CTA = Regular 44 全宽，禁止另开 48 高 */
.btn-hit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--hit);
  min-height: var(--hit);
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: var(--line) solid transparent;
  font-family: inherit;
  font-weight: var(--fw-semibold);
  cursor: default;
  box-sizing: border-box;
  white-space: nowrap;
  text-decoration: none;
}
.btn ion-icon { flex-shrink: 0; pointer-events: none; }
.btn-mini {
  height: 28px; min-width: var(--hit); padding: 0 12px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-footnote); line-height: var(--lh-footnote);
}
.btn-sm {
  height: 34px; min-width: var(--hit); padding: 0 16px;
  border-radius: var(--radius-10);
  font-size: var(--fs-subhead); line-height: var(--lh-subhead);
}
.btn-regular {
  height: var(--hit); min-width: var(--hit); padding: 0 16px;
  border-radius: var(--radius-md);
  font-size: var(--fs-headline); line-height: var(--lh-headline);
}
.btn-large {
  height: 50px; min-width: var(--hit); padding: 0 24px;
  border-radius: var(--radius-14);
  font-size: var(--fs-callout); line-height: var(--lh-callout);
}
.btn-block { width: 100%; }
.btn-primary { background: var(--brand); color: #fff; }
.btn-pressed { background: var(--brand-pressed); color: #fff; }
.btn-secondary {
  background: var(--bg-surface);
  color: var(--text-1);
  box-shadow: inset 0 0 0 var(--line) var(--border);
}
.btn-ghost { background: transparent; color: var(--brand); }
.btn-danger { background: var(--error); color: #fff; }
.btn-disabled { background: var(--bg-muted); color: var(--text-3); }
.btn-submitting { background: var(--brand); color: #fff; opacity: .72; }

.lnk {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: var(--hit);
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: var(--fs-footnote);
  line-height: var(--lh-footnote);
  font-weight: var(--fw-semibold);
  color: var(--brand);
  white-space: nowrap;
  cursor: pointer;
  appearance: none;
}
.lnk.danger { color: var(--error); }

/* 输入 · 原子。高 44 · focus 1px brand · 无光晕。禁止线框 2px 错框 */
.fld { display: flex; flex-direction: column; gap: var(--space-2); }
.fld-lab {
  font-size: var(--fs-subhead);
  line-height: var(--lh-subhead);
  font-weight: var(--fw-regular);
  color: var(--text-2);
}
.fld-box {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--hit);
  padding: 0 12px;
  background: var(--bg-surface);
  border: var(--line) solid var(--border);
  border-radius: var(--radius-sm);
  box-sizing: border-box;
}
.fld-box input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  font-family: inherit;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  color: var(--text-1);
  outline: none;
}
.fld-box input::placeholder { color: var(--text-3); }
.fld-box .num { font-size: inherit; }
/* 只承载校验 / 状态。禁止解释句 */
.fld-help {
  font-size: var(--fs-caption-1);
  line-height: var(--lh-caption-1);
  color: var(--text-3);
}
.fld.is-focus .fld-box { border-color: var(--brand); }
.fld.is-err .fld-box { border-color: var(--error); }
.fld.is-err .fld-help { color: var(--error); }
.fld.is-ro .fld-box { background: var(--bg-muted); }
.fld.is-ro input { color: var(--text-3); }

.fld-qty .fld-box { padding: 0 var(--space-1); }
.fld-qty .fld-val {
  flex: 1;
  text-align: center;
  font-size: var(--fs-headline);
  line-height: var(--lh-headline);
  font-weight: var(--fw-semibold);
}

.fld-amt .fld-box {
  height: auto;
  min-height: var(--hit);
  padding: 0;
  border: 0;
  background: transparent;
}
.fld-amt input {
  font-size: var(--fs-title-2);
  line-height: var(--lh-title-2);
  font-weight: var(--fw-semibold);
}
.fld-amt.is-focus .fld-box { border: 0; }

/* Chip · 外牌 / 余额。全圆白字，只装 USDT / BNB / WAC */
.chip {
  height: 22px;
  padding: 0 8px;
  border-radius: var(--radius-full);
  font-size: var(--fs-caption-1);
  line-height: var(--lh-caption-1);
  font-weight: var(--fw-semibold);
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.chip-usdt { background: var(--token-usdt); }
.chip-bnb { background: var(--token-bnb); color: var(--text-1); }
.chip-wac { background: var(--brand); }

/* 卡片题：字号同 Headline，字重走 --fw-title-card。块头、列表主行、目录行同一档。页内不要再写 600 */
.card-title,
.card-h h2,
.card-head h2,
.fleet-head h2,
.order-head h2,
.grp h2,
.confirm-title,
.sign-title,
.addr-title,
.sell-name,
.unit-name,
.ord-name,
.dir-title,
.row-title,
.pair,
.id-val {
  margin: 0;
  font-size: var(--fs-headline);
  line-height: var(--lh-headline);
  font-weight: var(--fw-title-card);
  color: var(--text-1);
}

/* Tag · 状态标。不是钮：无描边、圆角 4、高 22。默认 muted = 特征，五态另加类 */
.tag {
  height: 22px;
  padding: 0 8px;
  border-radius: var(--radius-xs);
  font-size: var(--fs-caption-1);
  line-height: var(--lh-caption-1);
  font-weight: var(--fw-semibold);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 0;
  background: var(--bg-muted);
  color: var(--text-2);
  white-space: nowrap;
}
.tag ion-icon {
  font-size: var(--ico-tag);
  color: inherit;
}
.tag-ok { background: var(--ok-bg); color: var(--ok); }
.tag-warn { background: var(--warn-bg); color: var(--warn); }
.tag-error { background: var(--error-bg); color: var(--error); }
.tag-inactive { background: var(--inactive-bg); color: var(--inactive); }
.tag-brand { background: var(--brand-bg); color: var(--brand); }
a.tag { text-decoration: none; }

/* —— 分子：壳 + 钟 + 目录行 + 空态 + 收入流水 + 伞下人行。其余随页再抽 —— */
.mol-hd {
  height: var(--hit);
  flex-shrink: 0;
  background: var(--bg-surface);
  border-bottom: var(--line) solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-size: var(--fs-headline);
  line-height: var(--lh-headline);
  font-weight: var(--fw-title-page);
  color: var(--text-1);
}
.mol-hd .back {
  position: absolute;
  left: 0; top: 0;
  width: var(--hit); height: var(--hit);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-1);
}
.mol-hd .back ion-icon { font-size: var(--ico-back); }
.mol-hd.root {
  justify-content: space-between;
  padding: 0 var(--space-4);
  gap: var(--space-2);
  min-width: 0;
}
.mol-hd .hd-title { flex-shrink: 0; }
.mol-hd:not(.root) {
  justify-content: flex-start;
  padding: 0 var(--space-3) 0 var(--hit);
  gap: var(--space-2);
}
.mol-hd:not(.root) .hd-title {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}
.mol-hd:not(.root) .hd-wallet {
  position: static;
  flex-shrink: 0;
  height: auto;
}
.mol-hd .hd-wallet {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  overflow: hidden;
}
.mol-hd .hd-wallet .num {
  font-size: var(--fs-caption-1);
  line-height: var(--lh-caption-1);
  color: var(--text-3);
}

.mol-tabs {
  min-height: var(--tabbar);
  padding-bottom: 34px;
  background: var(--bg-surface);
  border-top: var(--line) solid var(--border);
  display: flex;
  position: relative;
  box-sizing: content-box;
  flex-shrink: 0;
}
.mol-tabs .t {
  flex: 1;
  min-height: var(--tabbar);
  padding: 6px 0 4px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: var(--fs-tab);
  line-height: var(--lh-tab);
  font-weight: var(--fw-regular);
  color: var(--text-3);
  text-decoration: none;
}
.mol-tabs a.t:visited { color: var(--text-3); }
.mol-tabs .t.on {
  color: var(--brand);
  font-weight: var(--fw-semibold);
}
.mol-tabs ion-icon { font-size: var(--ico-tab); }
.mol-tabs::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 8px;
  width: 134px;
  height: 5px;
  margin-left: -67px;
  border-radius: 3px;
  background: var(--text-1);
  opacity: .18;
}

.mol-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: var(--space-2) var(--space-4) 0;
  padding: var(--space-2) var(--space-3);
  min-height: 36px;
  background: var(--error-bg);
  color: var(--error);
  border-radius: var(--radius-sm);
  font-size: var(--fs-subhead);
  line-height: var(--lh-subhead);
  flex-shrink: 0;
}
.mol-banner ion-icon {
  font-size: var(--ico-inline);
  flex-shrink: 0;
  margin-top: 2px;
}

.mol-clock {
  background: var(--bg-surface);
  border: var(--line) solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  overflow: hidden;
}
.mol-clock .clock-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.mol-clock .clock-k {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  font-size: var(--fs-subhead);
  line-height: var(--lh-subhead);
  color: var(--text-2);
}
.mol-clock .clock-k ion-icon {
  font-size: var(--ico-row);
  color: var(--brand);
  flex-shrink: 0;
}
.mol-clock.is-due .clock-k ion-icon { color: var(--warn); }
.mol-clock .clock-v {
  margin: 0;
  flex-shrink: 0;
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-size: var(--fs-title-2);
  line-height: var(--lh-title-2);
  font-weight: var(--fw-semibold);
  color: var(--brand);
  white-space: nowrap;
}
.mol-clock .clock-v .unit {
  font-family: var(--font);
  letter-spacing: 0;
}
.mol-clock.is-due .clock-v { color: var(--warn); }

.mol-list {
  background: var(--bg-surface);
  border: var(--line) solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.mol-dir {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--hit);
  padding: var(--space-3);
  text-decoration: none;
  color: inherit;
}
.mol-dir + .mol-dir { border-top: var(--line) solid var(--border); }
.mol-dir > ion-icon:first-child {
  font-size: var(--ico-row);
  color: var(--text-2);
  flex-shrink: 0;
}
.mol-dir .row-title,
.mol-dir .dir-title {
  min-width: 0;
  flex: 1;
}
.dir-hint {
  flex-shrink: 0;
  max-width: 42%;
  text-align: right;
  font-size: var(--fs-caption-1);
  line-height: var(--lh-caption-1);
  color: var(--text-3);
}
.mol-dir .chev {
  font-size: var(--ico-inline);
  color: var(--text-3);
  flex-shrink: 0;
}

.mol-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: 0 var(--space-4);
}

.mol-mo {
  padding: 0 var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.mol-mo .mo-title {
  margin: 0;
  font-size: var(--fs-headline);
  line-height: var(--lh-headline);
  color: var(--text-1);
}
.mol-mo .mo-sum {
  display: flex;
  gap: var(--space-5);
}
.mol-mo .mo-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.mol-mo .mo-col .lab {
  font-size: var(--fs-caption-1);
  line-height: var(--lh-caption-1);
  color: var(--text-3);
}
.mol-mo .mo-col .num {
  font-size: var(--fs-title-3);
  line-height: var(--lh-title-3);
  font-weight: var(--fw-semibold);
  color: var(--text-1);
}

.mol-bills { background: var(--bg-surface); }
a.mol-bill {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  text-decoration: none;
  color: inherit;
}
a.mol-bill + a.mol-bill::before {
  content: "";
  position: absolute;
  left: calc(var(--space-4) + 32px + var(--space-2));
  right: var(--space-4);
  top: 0;
  height: var(--line);
  background: var(--border);
}
.mol-bill-ico {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mol-bill-ico ion-icon {
  font-size: var(--ico-inline);
  color: inherit;
}
.mol-bill-ico.is-direct { background: var(--warn-bg); color: var(--warn); }
.mol-bill-ico.is-diff { background: var(--brand-bg); color: var(--brand); }
.mol-bill-ico.is-gard { background: var(--ok-bg); color: var(--ok); }
.mol-bill-l { min-width: 0; flex: 1; }
.mol-bill-name {
  margin: 0;
  font-size: var(--fs-subhead);
  line-height: var(--lh-subhead);
  font-weight: var(--fw-regular);
  color: var(--text-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mol-bill-l .t {
  margin: var(--space-1) 0 0;
  font-size: var(--fs-caption-1);
  line-height: var(--lh-caption-1);
  color: var(--text-3);
}
.mol-bill-amt {
  margin: 0;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-1);
  font-size: var(--fs-subhead);
  line-height: var(--lh-subhead);
  font-weight: var(--fw-regular);
  color: var(--text-1);
}
.mol-bill-amt .u,
.mol-bill-amt .into {
  font-size: var(--fs-caption-1);
  line-height: var(--lh-caption-1);
  color: var(--text-3);
}

.mol-vac {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-3);
}
.mol-vac ion-icon {
  font-size: var(--ico-empty);
  color: var(--text-2);
}
.mol-vac p {
  margin: 0;
  font-size: var(--fs-title-2);
  line-height: var(--lh-title-2);
  font-weight: var(--fw-title-card);
  color: var(--text-2);
}

.mol-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-5) var(--space-3);
}
.mol-hero-amt {
  margin: 0;
  font-size: var(--fs-title-2);
  line-height: var(--lh-title-2);
  font-weight: var(--fw-semibold);
  color: var(--text-1);
}
.mol-hero-u {
  margin: 0;
  font-size: var(--fs-subhead);
  line-height: var(--lh-subhead);
  color: var(--text-2);
}
.mol-kv-card {
  background: var(--bg-surface);
  border: var(--line) solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.mol-kv {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--fs-subhead);
  line-height: var(--lh-subhead);
}
.mol-kv > span:first-child {
  color: var(--text-2);
  flex-shrink: 0;
}
.mol-kv > span:last-child {
  min-width: 0;
  text-align: right;
  overflow-wrap: anywhere;
  word-break: break-all;
}
.mol-kv span.kv-copy {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: keep-all;
}
.mol-kv .kv-copy .lnk {
  min-height: 0;
  flex-shrink: 0;
  color: var(--text-2);
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
}
.mol-kv .kv-copy ion-icon {
  font-size: 16px;
}

/* 页级主操作贴内容区底。pad 必须 min-height:100% + column */
.mol-act {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* 确认 / 签名：背景降权，不可点 */
.is-dim {
  opacity: .4;
  pointer-events: none;
}

/* 骨架 · 已连、链上在拉。未连 / 错链 / 另冻不要套。≤300ms 不闪 */
.skel {
  height: 12px;
  border-radius: var(--radius-sm);
  background: var(--bg-muted);
  position: relative;
  overflow: hidden;
}
.skel.round {
  width: var(--ico-empty);
  height: var(--ico-empty);
  border-radius: var(--radius-full);
  flex-shrink: 0;
}
.skel.hit {
  height: var(--hit);
  border-radius: var(--radius-md);
}
.skel.title { height: 16px; width: 72%; }
.skel.short { width: 40%; }
.skel.clock {
  height: 56px;
  border-radius: var(--radius-sm);
}
.skel-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--hit);
}
.skel-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.skel.ico {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-xs);
  flex-shrink: 0;
}
.skel-col.is-amt {
  flex: none;
  align-items: flex-end;
}
.skel.amt { width: 64px }
.skel.amt-sub { width: 36px }
.mo-col .skel {
  width: 88px;
  height: 20px;
}
.mol-bills.is-skel { background: transparent }
.mol-bills .skel-row {
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  min-height: auto;
}
.skel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent);
  animation: shimmer 1.4s ease-in-out infinite;
}
@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.mol-track {
  background: var(--bg-surface);
  border: var(--line) solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}
.mol-track-hd {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}
.mol-track-carrier {
  margin: 0;
  font-size: var(--fs-headline);
  line-height: var(--lh-headline);
  font-weight: var(--fw-title-card);
  color: var(--text-1);
}
.mol-track-no {
  margin: var(--space-1) 0 0;
  font-size: var(--fs-footnote);
  line-height: var(--lh-footnote);
  color: var(--text-2);
}
.mol-track-hd .lnk {
  flex-shrink: 0;
  min-height: 0;
  text-decoration: none;
}
.mol-track-hd .lnk ion-icon { font-size: var(--ico-inline); }
.mol-track-empty {
  margin: var(--space-3) 0 0;
  font-size: var(--fs-footnote);
  line-height: var(--lh-footnote);
  color: var(--text-3);
}
.mol-track-list {
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}
.mol-track-node {
  position: relative;
  padding: 0 0 var(--space-3) var(--space-4);
}
.mol-track-node:last-child { padding-bottom: 0; }
.mol-track-node::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 7px;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--border);
}
.mol-track-node:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 17px;
  bottom: 0;
  width: var(--line);
  background: var(--border);
}
.mol-track-node.is-now::before { background: var(--brand); }
.mol-track-title {
  margin: 0;
  font-size: var(--fs-subhead);
  line-height: var(--lh-subhead);
  font-weight: var(--fw-regular);
  color: var(--text-2);
}
.mol-track-node.is-now .mol-track-title { color: var(--text-1); }
.mol-track-meta {
  margin: var(--space-1) 0 0;
  font-size: var(--fs-caption-1);
  line-height: var(--lh-caption-1);
  color: var(--text-3);
}

.mol-whos {
  background: var(--bg-surface);
  border: var(--line) solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.mol-who {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
}
.mol-who + .mol-who {
  border-top: var(--line) solid var(--border);
}
.mol-who-l { min-width: 0; flex: 1; }
.mol-who-addr {
  margin: 0;
  font-size: var(--fs-subhead);
  line-height: var(--lh-subhead);
  font-weight: var(--fw-regular);
  color: var(--text-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mol-who-meta {
  margin: var(--space-1) 0 0;
  font-size: var(--fs-caption-1);
  line-height: var(--lh-caption-1);
  color: var(--text-3);
}
.mol-who-n {
  margin: 0;
  flex-shrink: 0;
  font-size: var(--fs-subhead);
  line-height: var(--lh-subhead);
  font-weight: var(--fw-regular);
  color: var(--text-1);
}

/* 蜡烛图 · CEX/DEX 默认 OHLC。涨 ok、跌 error。未开盘走 empty，禁止假深度 */
.mol-chart {
  background: var(--bg-page);
  border: var(--line) solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.mol-chart-tf {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-3);
}
.mol-chart-plot {
  position: relative;
  height: 160px;
}
.mol-chart-plot svg,
.mol-chart-vol svg {
  display: block;
  width: 100%;
  height: 100%;
}
.mol-chart-axis {
  position: absolute;
  right: var(--space-2);
  top: var(--space-2);
  bottom: var(--space-2);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
  font-size: var(--fs-caption-2);
  line-height: var(--lh-caption-2);
  font-family: var(--font-num);
  color: var(--text-3);
  text-align: right;
}
.mol-chart-last-px {
  position: absolute;
  right: var(--space-2);
  transform: translateY(-50%);
  padding: 0 var(--space-1);
  border-radius: var(--radius-xs);
  font-size: var(--fs-caption-2);
  line-height: var(--lh-caption-2);
  font-family: var(--font-num);
  color: #fff;
  pointer-events: none;
}
.mol-chart-last-px.is-up { background: var(--ok); }
.mol-chart-last-px.is-down { background: var(--error); }
.mol-chart-vol {
  height: 48px;
  border-top: var(--line) solid var(--border);
}
.mol-chart-empty {
  min-height: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4);
  text-align: center;
  font-size: var(--fs-footnote);
  line-height: var(--lh-footnote);
  color: var(--text-3);
}
.mol-chart-empty ion-icon {
  font-size: var(--ico-empty);
  color: var(--text-2);
}