/* ==========================================================================
   查地址 — 自定义样式
   基础框架使用 Bootstrap 5.1.3（bootstrap.min.css），本文件只放自定义部分。
   视觉规格参照目标站点：字体 Open Sans / 容器 1270px / 主色 #1c5c93 /
   信息区底色 #f5f9fc / 收 #5da01d / 支 #f72935 / 搜索按钮 #4e6ef2

   ── 关于字号 ──
   除 Bootstrap 工具类外，本文件所有长度都使用 rem。
   根字号 = 16px × var(--ui-scale)，由 config.php 的 app.ui_scale 控制，
   因此调一个系数即可让全站字号、控件高度、间距等比缩放。
   ========================================================================== */

:root {
  --my-font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
                    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
  --border-color-light: #dee2e6;
  --soft-primary: rgba(230, 46, 4, .15);
  --solft-color: rgb(242, 243, 248);

  --brand: #1c5c93;          /* 链接 / 标签激活 / 强调 */
  --brand-search: #4e6ef2;   /* 搜索按钮 */
  --panel-bg: #f5f9fc;       /* 信息 / 汇率区底色 */
  --income: #5da01d;         /* 收入 */
  --expense: #f72935;        /* 支出 */
  --caption: #9e9e9e;        /* 说明文字 */
  --footer-bg: #587187;      /* 页脚 */
}

html { font-size: calc(16px * var(--ui-scale, 1)); }

* { font-family: var(--my-font-family); }

body {
  font-size: .875rem;          /* 14px @1.0 */
  color: #212529;
  background-color: #fff;
}

a { text-decoration: none; cursor: pointer; color: var(--brand); }
a:hover { opacity: .65; color: var(--brand); }
a:focus, a:active, a:visited { box-shadow: none !important; outline: none !important; }

/* 注意：min-width 用固定 px 而非 rem —— 它随 --ui-scale 放大会导致
   窄屏（<352px）出现横向溢出 */
.main_wrapper { background-color: #fff; min-width: 320px; }

.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
  max-width: 1270px;
  min-width: 320px !important;
}

/* ---------- 字号工具（与目标站一致：fs-N = N px @1.0） ---------- */
.fs-12 { font-size: .75rem !important; }
.fs-13 { font-size: .8125rem !important; }
.fs-14 { font-size: .875rem !important; }
.fs-15 { font-size: .9375rem !important; }
.fs-16 { font-size: 1rem !important; }
.fs-18 { font-size: 1.125rem !important; }
.fs-21 { font-size: 1.3125rem !important; }
.fs-22 { font-size: 1.375rem !important; }
.fs-32 { font-size: 2rem !important; }

.fw-bold-400 { font-weight: 400 !important; }
.fw-bold-500 { font-weight: 500 !important; }
.fw-bold-600 { font-weight: 600 !important; }
.fw-bold-700 { font-weight: 700 !important; }

.color5c768d { color: #5c768d !important; }
.color_1b1b28 { color: #1b1b28 !important; }
.border_color_light { border-color: var(--border-color-light); }
.bgbox { box-shadow: 0 0 .5625rem #ddd; }

/* ==========================================================================
   页头
   ========================================================================== */

.site-head { border-bottom: 1px solid #ececec; background: #fff; position: relative; }

/*
 * 移动端折叠面板要相对页头定位，所以 brand-line 也要成为定位上下文 ——
 * .container 有内边距，直接相对它定位会让面板左右各缩进一截。
 */
.site-head .brand-line { padding: .75rem 0; position: relative; }
/*
 * 站标：USDT+TRX 两个圆并排，本身是扁的（约 1.2:1）。
 * 若强行按正方形渲染会左右留白、显得小，所以只锁高度、宽度按比例自适应。
 */
.site-head .brand-logo { height: 1.875rem; width: auto; margin-right: .625rem; border-radius: .25rem; display: block; }
.site-head .brand-text { font-size: 1.375rem; font-weight: 700; color: #212529; }

/* 内页的「返回首页」入口（首页自己不显示） */
.back-home {
  display: inline-flex; align-items: center; gap: .3125rem;
  padding: .375rem .75rem;
  border: 1px solid #d7e0ea; border-radius: 2rem;
  background: #fff; color: #4a5b6d;
  font-size: .8125rem; line-height: 1; text-decoration: none;
  transition: color .15s, border-color .15s, background .15s;
}
.back-home:hover { color: var(--brand); border-color: var(--brand); background: #f5f9ff; }

/* 站内导航：与「返回首页」同一套胶囊样式，保持页头整齐 */
/*
 * 这里自己写 display:flex，而不是用 Bootstrap 的 .d-flex ——
 * .d-flex 是 display:flex!important，移动端要隐藏导航时压不过它。
 */
.site-nav {
  display: flex; align-items: center;
  gap: .5rem; flex-wrap: wrap; justify-content: flex-end;
}
.nav-item-plain {
  display: inline-flex; align-items: center;
  padding: .375rem .75rem;
  border: 1px solid #d7e0ea; border-radius: 2rem;
  background: #fff; color: #4a5b6d;
  font-size: .8125rem; line-height: 1; text-decoration: none;
  transition: color .15s, border-color .15s, background .15s;
}
.nav-item-plain:hover { color: var(--brand); border-color: var(--brand); background: #f5f9ff; }
.nav-item-plain.is-active { color: #fff; background: var(--brand); border-color: var(--brand); }

/*
 * 汉堡按钮：桌面端完全隐藏，只在移动端出现（见下方断点）。
 * 用三条横线而不是图标字体，避免额外依赖；展开时变成 X。
 */
.nav-toggle {
  display: none;
  flex-direction: column; justify-content: center; gap: .25rem;
  width: 2.375rem; height: 2.375rem; padding: 0 .4375rem;
  background: #fff; border: 1px solid #d7e0ea; border-radius: .5rem;
  cursor: pointer;
}
.nt-bar {
  display: block; height: .125rem; width: 100%;
  background: #4a5b6d; border-radius: .125rem;
  transition: transform .18s ease, opacity .18s ease;
}
.nav-toggle[aria-expanded="true"] .nt-bar:nth-child(1) { transform: translateY(.375rem) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nt-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nt-bar:nth-child(3) { transform: translateY(-.375rem) rotate(-45deg); }

/* ---------- 查询遮罩 ---------- */
.loading-mask {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(1px);
  opacity: 0; transition: opacity .18s ease;
}
.loading-mask.is-on { opacity: 1; }
.loading-mask[hidden] { display: none !important; }

.loading-mask .lm-box {
  display: flex; flex-direction: column; align-items: center;
  padding: 1.5rem 2rem;
  background: #fff; border-radius: .75rem;
  box-shadow: 0 .5rem 2rem rgba(15, 33, 55, .14);
  text-align: center;
}
.loading-mask .lm-spinner {
  width: 2.25rem; height: 2.25rem;
  border: 3px solid #e3ebf5;
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: lm-spin .8s linear infinite;
}
@keyframes lm-spin { to { transform: rotate(360deg); } }
.loading-mask .lm-text {
  margin-top: .875rem; font-size: .9375rem; font-weight: 600; color: #1f2d3d;
}
.loading-mask .lm-sub {
  margin-top: .25rem; font-size: .75rem; color: #94a3b8;
}

/* 尊重系统的「减少动态效果」设置 */
@media (prefers-reduced-motion: reduce) {
  .loading-mask .lm-spinner { animation-duration: 2s; }
}

/* ==========================================================================
   首页
   ========================================================================== */

.home-title { font-size: .9375rem; color: var(--caption); text-align: center; margin: 0; font-weight: 500; }

.search-input-home { font-size: .875rem !important; height: calc(3rem + 2px); }

.btn-search {
  background-color: var(--brand-search);
  color: #fff;
  border: 0;
  font-size: 1.125rem;
  padding: 0 1.5rem;
  cursor: pointer;
}
.btn-search:hover { opacity: 1; background-color: #3f5fe0; color: #fff; }

.panel-soft { background-color: var(--panel-bg); }

/* 汇率区：币种名与价格加粗，便于扫读 */
.price-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; }
.price-item { display: flex; align-items: center; justify-content: center; margin-right: 1rem; margin-bottom: .5rem; }
.price-item img, .price-item .coin-icon { width: 1.5625rem; height: 1.5625rem; margin-right: .3125rem; display: block; }
/*
 * 价格区。
 * 强调靠「颜色更深」而不是「字重更粗」：原站也只是给数字上色，字重一律常规。
 * 加粗会让数字显得拥挤，反而没有常规字重清爽。
 */
.price-name { width: 3.125rem; color: #000; }
.price-value {
  width: 5rem; text-align: right; margin-right: .5rem;
  color: #000; font-variant-numeric: tabular-nums;
}
.price-item .price-unit { color: #000; }

.panel-caption { text-align: center; color: var(--caption); }

/* 功能卡：
   - 用 flex 纵向排列 + 由行内 align-items:stretch 保证等高，取代原来的固定高度
     （固定高度在标题换行时会把副标题挤到卡片外）
   - 内边距收紧，比之前更矮更紧凑 */
/*
 * 功能卡片区。
 *
 * 为什么不用 Bootstrap 的 row/col：
 * col-md 是 flex:1 1 0，会把每列拉伸成「整行 ÷ 卡片数」的宽度，而卡片本身
 * 宽度有上限，于是卡片只在各自那一列里居中 —— 列越宽，卡与卡之间的空洞越大。
 * 实测只开 2 张时，桌面 1440 下两卡之间空了 354px、两侧各留 176px，
 * 观感就是两张小卡孤零零飘在两端。
 *
 * 改成 flex + gap 后，卡片按自身宽度排布、整组居中：
 *   - 卡间距恒定，不随张数变化；
 *   - 张数少时是一组紧凑的卡，张数多时自动收缩/换行。
 * 各张数实测（桌面 1235px 容器）：1 张居中、2 张成组、3~4 张一行、
 * 5 张各自收缩到约 229px 仍在一行。
 */
.fc-grid {
  display: flex; flex-wrap: wrap;
  justify-content: center; align-items: stretch;
  gap: 1.25rem;
  padding: 1.125rem 0 0;
}

.fc-grid > .fc-link {
  display: flex;
  /*
   * 关键：flex-basis 要小、靠 flex-grow 撑到最大宽度。
   *
   * 不能写成 flex:0 1 15rem —— flex-wrap 是「先按 flex-basis 分行，再在行内
   * 收缩」，所以 basis 就是 15rem 时，5 张卡会先被判成一行放不下而折行成
   * 4+1，收缩根本轮不到。把 basis 设为 11rem 后，5 张能排进一行，再由
   * flex-grow 撑到 15rem 上限，于是每张约 224px、整齐一行。
   */
  flex: 1 1 9.5rem;
  max-width: 15rem;
  min-width: 0;
}

.feature-card {
  display: flex; flex-direction: column; align-items: center;
  width: 100%;
  min-height: 7rem; padding: .8125rem .5rem;
  background: #fff;
}
.feature-card:hover { opacity: 1; }
.feature-card .fc-icon { height: 2.75rem; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.feature-card .fc-icon img { height: 2.75rem; }
.feature-card .fc-title {
  color: var(--brand); font-weight: 700; margin-top: .375rem;
  font-size: .8125rem; line-height: 1.3; text-align: center;
}
.feature-card .fc-sub {
  font-size: .6875rem; line-height: 1.38; color: #212529;
  text-align: center; margin-top: .125rem;
}

.batch-link-box { padding: .875rem 0 1.75rem; }

.btn-batch {
  display: inline-flex; align-items: center; gap: .4375rem;
  padding: .5625rem 1.125rem;
  border-radius: .5rem;
  background: var(--brand-search); color: #fff;
  font-size: .8125rem; font-weight: 500;
  box-shadow: 0 1px 3px rgba(78,110,242,.3);
  transition: background-color .15s, box-shadow .15s;
}
.btn-batch:hover { background: #3f5fe0; color: #fff; opacity: 1; box-shadow: 0 3px 8px rgba(78,110,242,.36); }

/* ==========================================================================
   地址页
   ========================================================================== */

.addr-body { max-width: 1110px !important; margin: 0 auto; }
.addr-panel { background-color: var(--panel-bg); }

/*
 * 这行同时是页面的 h1。h1 默认带上下外边距，会把「钱包地址」那行推离
 * 原来的位置，所以显式清零，保证升级标签语义后视觉完全不变。
 */
/*
 * 这行同时是页面的 h1（页面原本没有任何 h1）。
 * h1 默认带上下外边距，会把「钱包地址」那行推离原位，所以显式清零，
 * 保证升级标签语义之后视觉完全不变。
 */
.c_title {
  width: 100%; min-height: 1.25rem; margin: 0;
  color: #333; line-height: 1.25rem; font-size: .9375rem; font-weight: bold;
}

.c_addr_line { display: flex; align-items: center; flex-wrap: wrap; }
/*
 * 地址本身用「纯黑 + 常规字重」突出，不用加粗。
 * 原站这里就是一个没有 class 的裸 div —— 加粗之后反而显得笨重、不够清爽。
 */
.c_addr_text { white-space: nowrap; font-size: .875rem; color: #000; }
.c_qr { margin-left: .9375rem; position: relative; display: inline-flex; }
.c_qr img { width: 1.5625rem; height: 1.5625rem; display: block; }
.c_qr:hover { opacity: 1; }

/* 二维码弹层（对齐原站：白底圆角 + 阴影） */
.qr-pop {
  /* 向右偏移，避免盖住左侧「TRX数量 / USDT数量」的数值（原站同样是往右展开） */
  position: absolute; top: 2.125rem; left: 1.875rem; z-index: 999;
  padding: .9375rem; background-color: #fff; border-radius: .625rem;
  box-shadow: 0 0 .9375rem rgba(0, 0, 0, .18);
  text-align: center; white-space: normal;
}
.qr-pop[hidden] { display: none !important; }
.qr-pop svg { display: block; margin: 0 auto; }
.qr-pop .qr-tip { margin-top: .5rem; font-size: .75rem; color: #666; }
.qr-pop .qr-copy { margin-top: .375rem; font-size: .75rem; color: var(--brand); cursor: pointer; }
.qr-pop .qr-copy:hover { text-decoration: underline; }

.c_con1 { width: 100%; }
.c_con1_i { width: 100%; display: flex; justify-content: flex-start; align-items: center; }
/* 数值列设为可伸缩：固定宽度会撑大表格最小宽度，窄屏时导致横向溢出。
   视觉上数值紧跟在标签之后，宽度不影响观感。 */
.c_con1_i_l { width: 5rem; flex: 0 0 auto; color: #333; display: flex; justify-content: flex-start; align-items: center; }
/* 数值用纯黑突出，不加粗 —— 与原站 .c_con1_i_r 的写法（仅 color:#333）保持一致 */
.c_con1_i_r { flex: 1 1 auto; min-width: 0; color: #000; }

.c_wh {
  width: .875rem; height: .875rem; border-radius: .4375rem;
  background: #b1b1b1; margin-right: .5rem;
  color: #333; font-size: .75rem; text-align: center;
  line-height: .875rem; font-weight: bold; display: inline-block;
  flex: 0 0 auto; cursor: help;
}

/* ---------- 标签页 ---------- */
.c_tabs { border: 1px solid #ced4da; border-radius: .375rem; }
.c_tabs .nav-item { width: 50%; }
.c_tabs .nav-link {
  width: 100%; text-align: center; padding: 0;
  height: 1.75rem; line-height: 1.75rem;
  color: #333; border-radius: .3125rem; font-size: .875rem;
}
.c_tabs .nav-link.active { background: var(--brand); color: #fff; }
.c_tabs .nav-link:hover { opacity: 1; }

/* ---------- 筛选控件 ---------- */
.c_con3 {
  display: flex; flex-direction: row; justify-content: space-between; align-items: center;
  width: 100%; height: 1.875rem; background: #fff;
  border-radius: .375rem; border: 1px solid #ced4da; position: relative;
}
.c_con3_l { padding-left: .625rem; color: #666; font-size: .75rem; margin-bottom: 0 !important; }
.c_con3_rx {
  position: absolute; left: 0; top: 0; width: 100%;
  border: 0 !important; line-height: 1.875rem; padding-left: .625rem;
  text-align: center; background: transparent !important;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  color: #333; font-size: .875rem; cursor: pointer;
}
.c_con3_rx:focus { outline: none !important; }
.c_con3_rs { width: .875rem; height: .875rem; display: block; margin-right: .875rem; }

.c_con3s {
  display: flex; flex-direction: row; justify-content: flex-start; align-items: center;
  width: 100%; height: 1.875rem;
}
.c_con3d {
  display: flex; flex-direction: row; justify-content: space-between; align-items: center;
  width: 6.25rem; height: 1.875rem; background: #fff;
  border-radius: .375rem; border: 1px solid #ced4da; position: relative;
}
.c_con3_rss {
  width: 100%; border: 0 !important; text-indent: .625rem;
  font-size: .875rem; color: #333; background: transparent;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
}
.c_con3_rss:focus { outline: none !important; }
.c_con3_rss::placeholder { color: #adb5bd; }

.hide4 { display: none !important; }

.btnss {
  width: 5rem; border: 1px solid #eee; background: #fff; text-align: center;
  line-height: 1.875rem; cursor: pointer; color: #555; font-size: .875rem;
  height: 1.875rem; margin-right: .625rem; border-radius: 0;
  display: inline-block; padding: 0;
}
.btnss:hover { opacity: 1; background: #f7f7f7; color: #555; }

.btns {
  width: 5rem; border: 1px solid #eee; background: #fff; text-align: center;
  cursor: pointer; color: #555; font-size: .875rem; height: 1.875rem;
  padding: 0; border-radius: 0;
}
.btns.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btns.btn-primary:hover { background: #174c7a; border-color: #174c7a; }

/* 日期区间 */
.date-range {
  display: flex; align-items: center; height: 1.875rem;
  border: 1px solid #ced4da; border-radius: .375rem; background: #fff;
  padding: 0 .5rem; overflow: hidden;
}
.date-range .dr-icon { width: .875rem; height: .875rem; flex: 0 0 auto; margin-right: .375rem; opacity: .55; }
/* 每个字段一层，占位文字是浮在上面的 span，不拦截点击 */
.date-range .dr-field { position: relative; flex: 1 1 0; min-width: 0; display: flex; align-items: stretch; height: 100%; }
.date-range input {
  display: block; width: 100%; min-width: 0; padding: 0; height: 100%;
  border: 0; outline: none; background: transparent;
  font-size: .8125rem; color: #333;
  /* 让整块区域可点：点标签空白处也会落到 input 上唤起日期选择器 */
  cursor: pointer;
}
.date-range .dr-ph {
  position: absolute; left: 0; right: 0; top: 0; bottom: 0;
  display: flex; align-items: center;
  font-size: .8125rem; color: #adb5bd;
  pointer-events: none;          /* 关键：否则会挡住对 input 的点击 */
}
.date-range .dr-field.has-value .dr-ph { display: none; }
/* 空值时藏掉浏览器自带的「年/月/日」，未聚焦时把位置让给占位文字 */
.date-range .dr-field:not(.has-value) input::-webkit-datetime-edit { color: transparent; }
.date-range .dr-field:not(.has-value) input:focus::-webkit-datetime-edit { color: #333; }
/* 聚焦时必须收起占位文字，否则会和原生的 mm/dd/yyyy 叠成一团 */
.date-range .dr-field:focus-within .dr-ph { display: none; }
.date-range .dr-sep { color: #999; padding: 0 .25rem; flex: 0 0 auto; }
.date-range input[type="date"]::-webkit-calendar-picker-indicator { opacity: .5; cursor: pointer; }

/*
 * 折叠开关与「移动端专属数量框」在桌面一律隐藏。
 * 注意必须放在媒体查询**外面** —— 之前误写进移动端块里，
 * 结果桌面端也把这一组重复的输入框和开关渲染了出来。
 */
.filter-toggle { display: none; }
.addr-panel .hide4 { display: none; }

/* ---------- 汇总行 ---------- */
.c_tips { font-size: .9375rem; margin-left: 1.25rem; margin-bottom: 0; color: #333; }
/*
 * 中小屏：改为等宽三列。
 *
 * 两个原因：
 *   ① 桌面规则靠 flex-grow 撑宽，换行时「最后一行只有 1~2 张」会被撑得比上一行
 *      宽（实测 768 下第一行 221px、第二行 264px），两行卡宽不一致看着很随意；
 *   ② 若不让换行，5 张卡在 1024 宽度下会被压到约 175px，长标题（如
 *      「阿里云/腾讯云/亚马逊/自动充值」）要折成两行，太挤。
 * 固定三列 + 15rem 上限后，卡宽稳定在 264px（窄屏按比例收窄），既不挤也不参差。
 */
@media (max-width: 1099px) {
  .fc-grid > .fc-link {
    flex: 0 0 calc(33.333% - .8334rem);   /* 三列，减去两倍列间距 */
    max-width: 15rem;                     /* 与桌面同一上限，避免窄屏卡片反而更大 */
  }
}

@media (max-width: 767px) {
  .c_tips { font-size: .75rem; margin-left: .875rem; margin-right: .875rem; line-height: 1.9; }
  .c_tips #totals { display: block; }
}
/*
 * 汇总行的数字沿用原站做法：只用颜色区分收支，不加粗。
 * （原站这里就是行内 color:#5da01d / #f72935，没有任何 font-weight）
 */
.c_tips #total { color: #000; }
.c_tips .sum-in { color: var(--income); }
.c_tips .sum-out { color: var(--expense); }
.c_tips #totals { color: var(--caption); font-size: .8125rem; font-weight: 400; }

/* ---------- 表格 ---------- */
.table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

.table { margin-bottom: 0 !important; }
.table th {
  font-size: 1rem !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  color: #212529;
  vertical-align: bottom;
  border-bottom: 2px solid #dee2e6;
  padding: .5rem;
}
.table td {
  white-space: nowrap !important;
  padding: .5rem;
  vertical-align: middle;
  border-bottom: 1px solid #dee2e6;
}
.table .col-time { width: 15%; }
.table .col-addr { width: 20%; }
.table .th-center { text-align: center; }

/* 交易对象地址：纯黑常规字重（原站这里就是一个裸 <td>），悬停才给链接提示 */
.td-addr { color: #000; }
.td-addr:hover { color: var(--brand); text-decoration: underline; }

/* 金额徽标（沿用 Bootstrap 的 badge + bg-danger / bg-success，尺寸对齐原站）
   这里保留加粗：白字压在饱和底色上，不加粗会发虚，原站同样是 Bootstrap 默认的 700 */
.badge {
  font-size: .85em !important;
  display: inline-block;
  padding: .3125em .625em;
  border-radius: .25rem;
  font-weight: 700;
  line-height: 1;
  vertical-align: baseline;
}

.hash-link { color: #0a58ca; }
.hash-link:hover { opacity: .65; color: #0a58ca; text-decoration: underline; }
.td-hash { white-space: nowrap !important; }

/* ---------- 哈希弹层（区块哈希 / 交易ID 的完整值 + 复制） ---------- */
.hash-box {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: .8125rem; line-height: 1.6; color: #000;
  background: #f7f9fc; border: 1px solid #e4eaf2; border-radius: .375rem;
  padding: .625rem .75rem;
  /* 长哈希在弹层里自动折行，不再撑破布局 */
  word-break: break-all; user-select: all;
}
.hash-copy {
  margin-top: .625rem; width: 100%;
  border: 1px solid var(--brand); border-radius: .375rem;
  background: #fff; color: var(--brand);
  font-size: .8125rem; padding: .4375rem 1rem; cursor: pointer;
  transition: opacity .15s;
}
.hash-copy:hover { background: #f2f6fc; }
.hash-copy.is-done { border-color: #198754; color: #198754; background: #f2fbf6; }

.empty-row td, .loading-cell {
  color: #9e9e9e; text-align: center;
  padding: 2.5rem .5rem !important;
  white-space: normal !important;
}

/* ---------- 分页 ---------- */
#pagination3 { padding: 0 !important; }
.pagination-wrap { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; padding: 1rem 0; }
.pagination { margin: 0; }

.pagination .page-item .page-link {
  pointer-events: auto;
  display: block;
  min-width: 2.25rem;
  height: 2.25rem;
  line-height: 2.125rem;
  text-align: center;
  padding: 0 .375rem;
  border: 1px solid #dee2e6;
  border-radius: 50% !important;
  margin: 0 .125rem;
  color: #212529;
  background-color: #fff;
  font-size: .875rem;
}
.pagination .page-item:not(.active):not(.disabled) .page-link:hover { background-color: #f9f9f9; }
.pagination .page-item.active .page-link { background-color: var(--brand); border-color: var(--brand); color: #fff; }
.pagination .page-item.disabled .page-link { color: #adb5bd; pointer-events: none; }
.pagination .ellipsis { user-select: none; }
.pagination .ellipsis .page-link { border: 0; background: transparent; min-width: 1.5rem; }

/* ==========================================================================
   页脚
   ========================================================================== */

.site-foot { background-color: var(--footer-bg); color: #fff; margin-top: 3.125rem; }
.site-foot a { color: #fff; }
.site-foot a:hover { opacity: 1; color: #fff; }
.site-foot .foot-inner { padding: 2.5rem 0; }
.site-foot .foot-brand { font-family: Avenir, Helvetica, Arial, sans-serif; font-weight: 300; }

/* ==========================================================================
   其它
   ========================================================================== */

.state-page { max-width: 35rem; margin: 3.75rem auto; text-align: center; }
.state-page h1 { font-size: 1.3125rem; color: #333; margin-bottom: .75rem; }
.state-page .state-reason { color: #666; }
.state-page .state-input { color: #999; font-size: .8125rem; }
.state-page .state-input code { background: #f1f3f6; padding: .125rem .4375rem; border-radius: .25rem; word-break: break-all; }

.batch-result { margin-top: 1rem; }
.batch-item {
  display: flex; align-items: center; justify-content: space-between; gap: .625rem;
  padding: .625rem .75rem; border: 1px solid #dee2e6; border-radius: .375rem;
  margin-bottom: .5rem; font-size: .8125rem;
}
.batch-item .b-addr { word-break: break-all; }
.batch-item .b-nums { white-space: nowrap; }
.batch-item.b-err { border-color: #f3d3d0; background: #fdeceb; color: #a83a2e; }

.toast {
  position: fixed; left: 50%; bottom: 2.125rem; z-index: 80; transform: translateX(-50%);
  background: #14161a; color: #fff; padding: .625rem 1.25rem; border-radius: 62.5rem;
  font-size: .84375rem; box-shadow: 0 .625rem 1.875rem -.625rem rgba(0, 0, 0, .5);
}
.toast[hidden] { display: none !important; }

[hidden] { display: none !important; }

/* ==========================================================================
   响应式
   ========================================================================== */

@media (max-width: 767px) {
  /* 窄屏空间不足，二维码弹层改为右对齐，防止横向溢出 */
  .qr-pop { left: auto; right: 0; }

  /* ---------- 触控目标放大到 ≥44px ---------- */
  /* 地址与二维码同一行：让地址可收缩换行，二维码就不会被挤到下一行 */
  .c_addr_line { flex-wrap: nowrap; align-items: flex-start; }
  .c_addr_text { flex: 1 1 auto; min-width: 0; }
  .c_qr {
    width: 2.75rem; height: 2.75rem; flex: 0 0 auto;
    align-items: center; justify-content: center;
    margin-left: .5rem; margin-top: -.375rem;
  }
  .c_qr > img { width: 1.5rem; height: 1.5rem; }
  #clearInput, .rps-more, .linklike { padding: .5rem .25rem; display: inline-block; }

  /*
   * ---------- 筛选栏：移动端压成两行 ----------
   *
   * 之前是把「收支类型 / 数量 / 日期 / 清空筛选」四组纵向铺开，占了近半个屏幕，
   * 数据被挤到一屏之外。现在照原站的做法：
   *   第一行：USDT / TRX 标签
   *   第二行：数量区间 + 清空 + 筛选 + 折叠开关
   * 「收支类型」和「日期」默认收起，点开关才展开。
   */
  .filters-mobile #hide1,
  .addr-panel #hide1,
  .addr-panel #hide2,
  .addr-panel #hide3 { display: block !important; }

  /* 默认收起；展开时由 .filters-open 放出来 */
  .addr-panel #hide1,
  .addr-panel #hide2,
  .addr-panel #hide3 { display: none !important; }
  .addr-panel .row.g-3.filters-open #hide1,
  .addr-panel .row.g-3.filters-open #hide2,
  .addr-panel .row.g-3.filters-open #hide3 { display: block !important; }

  .addr-panel .row.g-3 { padding: 0 .875rem; --bs-gutter-y: 0; row-gap: .375rem !important; }
  .addr-panel .row.g-3 > [class*="col-"] { width: 100%; flex: 0 0 100%; }

  .addr-panel .c_con3 { height: 2.125rem; }
  .addr-panel .c_con3_rx, .addr-panel .c_con3_rss { line-height: 2.125rem; font-size: .8125rem; }
  .addr-panel .c_con3_l { padding-left: .5rem; font-size: .6875rem; }
  .addr-panel .c_con3_rx { text-align: left; text-indent: 3.375rem; }
  .addr-panel .c_con3_rs { margin-right: .5rem; }
  .addr-panel .c_tabs .nav-link { height: 2.125rem; line-height: 2.125rem; font-size: .8125rem; }
  .addr-panel .date-range { height: 2.125rem; }
  .addr-panel .date-range input, .addr-panel .date-range .dr-ph { font-size: .8125rem; }
  /*
   * 移动端**保留**原生日历小图标。
   * 之前为了美观把它 display:none 了，但部分手机浏览器（尤其 iOS）只认这个图标
   * 作为唤起选择器的热区，隐藏后点文字区毫无反应 —— 美观得让位于可用性。
   * 现在整块日期区间都可点（见 app.js），图标只是多一个更稳的入口。
   */
  .addr-panel .date-range input[type="date"]::-webkit-calendar-picker-indicator { opacity: .45; cursor: pointer; }

  /* 第二行：数量 + 清空 + 筛选 + 开关，全部挤在一行里 */
  .addr-panel .c-actions .c_con3s { display: flex; align-items: center; gap: .4375rem; }
  .addr-panel .c-actions .hide4 { display: block; }
  .addr-panel .c-actions .c_con3d {
    flex: 1 1 0; width: auto; min-width: 0; height: 2.125rem; margin: 0 !important;
  }
  .addr-panel .c-actions .c_con3s > div:not(.c_con3d):not(.btnss) {
    flex: 0 0 auto; color: #999; font-size: .8125rem;
  }
  .addr-panel .btnss,
  .addr-panel .btns { width: auto; flex: 0 0 auto; height: 2.125rem; line-height: 2.125rem;
                      font-size: .8125rem; padding: 0 .6875rem; }

  .addr-panel .filter-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto; width: 2.125rem; height: 2.125rem;
    border: 1px solid #eee; border-radius: .25rem; background: #fff;
    color: #64748b; cursor: pointer; padding: 0;
  }
  .addr-panel .filter-toggle svg { transition: transform .18s ease; }
  .addr-panel .filter-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
  .addr-panel .filter-toggle:hover { border-color: var(--brand); color: var(--brand); }

  /* ---------- 交易流水表：降级为卡片列表 ---------- */
  .tx-table thead { display: none; }
  .tx-table, .tx-table tbody, .tx-table tr, .tx-table td { display: block; width: 100%; }
  .tx-table tbody tr {
    padding: .625rem .875rem;
    border-bottom: 1px solid #eef2f7;
    border-left: 3px solid transparent;
  }
  .tx-table tbody tr:nth-child(even) { background: #fafbfd; }
  .tx-table tbody td {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: .75rem; padding: .1875rem 0; border: 0;
    white-space: normal !important; text-align: right;
  }
  .tx-table tbody td::before {
    content: attr(data-label);
    flex: 0 0 auto; font-size: .75rem; color: #94a3b8;
  }
  .tx-table .td-addr { font-size: .75rem; word-break: break-all; }
  .tx-table .td-hash a { font-size: .75rem; }
  .table-scroll { overflow: visible; }

  /* 汇率排成两列，避免 4 行占满一屏 */
  .price-row { flex-wrap: nowrap; justify-content: center; gap: 0 .5rem; }
  .price-item { margin-right: .25rem; margin-bottom: .375rem; flex: 0 1 auto; }
  .price-item img, .price-item .coin-icon { width: 1.375rem; height: 1.375rem; margin-right: .25rem; }
  .price-name { width: 2.75rem; font-size: .8125rem; }
  .price-value { width: 4.5rem; font-size: .8125rem; margin-right: .25rem; }

  /*
   * 移动端固定两列。
   * 用 flex:0 0（不收缩）而不是 flex:1 1：允许收缩的话，3 张卡会被压成
   * 一行三列，每张只有约 108px；不收缩则会正常换行成 2 + 1。
   */
  .fc-grid { gap: .75rem; }
  .fc-grid > .fc-link { flex: 0 0 calc(50% - .375rem); max-width: none; }

  /* 卡片两列时收紧内边距与图标 */
  .feature-card { min-height: 6.75rem; padding: .75rem .375rem; }
  .feature-card .fc-icon { height: 2.375rem; }
  .feature-card .fc-icon img { height: 2.375rem; }
  .feature-card .fc-title { font-size: .75rem; margin-top: .3125rem; }
  .feature-card .fc-sub { font-size: .6875rem; }

  .btn-batch { width: 100%; justify-content: center; }

  /* 地址在窄屏允许折行：nowrap 会把页面顶宽 */
  .c_addr_text { white-space: normal !important; word-break: break-all; }

  /* 账户信息表标签列收窄，避免把表格最小宽度顶出去 */
  .c_con1_i_l { width: 4.25rem; }
  /* td 上的 white-space:nowrap 会让长余额数字无法折行，把表格最小宽度撑破 —— 窄屏放开 */
  .c_con1_i_r { font-size: .875rem; white-space: normal !important; word-break: break-all; }

  .hide4 { display: block !important; }
  .c_con3_l { padding-left: 4.375rem; }
  .c_con3_rx { text-align: left; text-indent: 70%; }
  .c_con3d { width: 27%; display: flex !important; }
  .c_tips { font-size: .625rem; margin-left: 1.25rem; }
  .btns, .btnss { width: 15%; }
  .btnss { margin-right: .3125rem; }
  .hide-sm { display: none !important; }

  .table th, .table td { font-size: .75rem; padding: .4rem .3rem; }
  .table .col-time { width: auto; }
  .table .col-addr { width: auto; }
  .price-value { width: 4.375rem; }
}

/* ==========================================================================
   地址热度 / 点评 / 举报
   ========================================================================== */

.addr-stats {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 2rem;
  padding: .75rem 1.25rem .875rem;
  border-top: 1px solid #e4eaf1;
  margin-top: .25rem;
}
.addr-stats .as-item { display: flex; align-items: baseline; gap: .5rem; }
.addr-stats .as-k { font-size: .8125rem; color: #7b8794; }
.addr-stats .as-v {
  font-size: 1rem; color: #000;
  font-variant-numeric: tabular-nums;
}

/*
 * 点评 / 举报入口。
 * 原来这里是两个大按钮，视觉重量盖过了数据本身；改成跟在数值后面的小号文字链接。
 */
.addr-stats .as-act {
  border: 0; background: none; padding: 0; cursor: pointer;
  font-size: .8125rem; line-height: 1; color: var(--brand);
  transition: opacity .15s;
}
.addr-stats .as-act:hover {
  opacity: .7;
  text-decoration: underline;
  text-underline-offset: .125rem;
}
.addr-stats .as-act-report { color: #e5484d; }

/* 评论区标题栏的「我要点评」仍然是按钮 */
.btn-comment {
  border: 0; border-radius: .375rem; cursor: pointer;
  padding: .4375rem 1.125rem; font-size: .8125rem; font-weight: 600;
  color: #fff; transition: opacity .15s;
  background: var(--brand);
}
.btn-comment:hover { opacity: .88; }

/* 星级 */
.stars { display: inline-flex; gap: 1px; }
.star { color: #dfe4ea; font-size: .9375rem; line-height: 1; }
.star.on { color: #f5a623; }

/* 点评列表 */
.comment-box {
  background: #fff; border: 1px solid #e4eaf1; border-radius: .5rem;
  margin-top: 1.25rem; overflow: hidden;
}
.cb-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: .875rem 1.25rem; border-bottom: 1px solid #eef2f7;
}
.cb-head h2 { font-size: 1rem; font-weight: 700; margin: 0; color: #1f2d3d; }
.cb-count {
  display: inline-block; margin-left: .375rem; padding: .0625rem .5rem;
  border-radius: 1rem; background: #eef3ff; color: var(--brand);
  font-size: .75rem; font-weight: 700;
}

.cm-item { padding: .875rem 1.25rem; border-bottom: 1px solid #f2f5f9; }
.cm-item:last-child { border-bottom: 0; }
.cm-head { display: flex; align-items: center; gap: .625rem; margin-bottom: .375rem; }
.cm-nick { font-weight: 700; color: #1f2d3d; font-size: .875rem; }
.cm-time { margin-left: auto; font-size: .75rem; color: #9aa5b1; }
.cm-body { font-size: .875rem; color: #374151; line-height: 1.65; word-break: break-word; }
.cm-empty { padding: 2.25rem 1.25rem; text-align: center; color: #9aa5b1; font-size: .875rem; }

.cm-pager { display: flex; gap: .375rem; justify-content: center; padding: .875rem; border-top: 1px solid #eef2f7; }
.cm-pager a {
  min-width: 1.875rem; height: 1.875rem; line-height: 1.875rem; text-align: center;
  border: 1px solid #e4eaf1; border-radius: .3125rem;
  font-size: .8125rem; color: #4a5568;
}
.cm-pager a.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }

/* 评分选择 */
.rate-pick { display: flex; align-items: center; gap: .25rem; }
.rate-star {
  font-size: 1.5rem; line-height: 1; color: #dfe4ea; cursor: pointer;
  transition: color .12s, transform .12s;
}
.rate-star:hover { transform: scale(1.12); }
.rate-star.on { color: #f5a623; }
.rate-text { margin-left: .625rem; font-size: .8125rem; color: #9aa5b1; }

@media (max-width: 767px) {
  .addr-stats { gap: .5rem 1.25rem; padding: .625rem .875rem .75rem; }
  .addr-stats .as-v { font-size: .9375rem; }
}

/* ---------- 举报状态汇总 ---------- */
.as-link {
  cursor: pointer;
  /* 用 text-decoration 而非 border-bottom：border 会跟随 flex 项宽度拉伸，
     文字后面会拖出一条多余的虚线 */
  text-decoration: underline dashed;
  text-underline-offset: .1875rem;
  text-decoration-thickness: 1px;
}
.as-link:hover { opacity: .75; }

.rp-summary {
  padding: .875rem 1.25rem 1rem;
  border-top: 1px solid #eef2f7;
  background: #fcfdfe;
}
.rps-head { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.rps-title { font-size: .875rem; font-weight: 700; color: #1f2d3d; }
.rps-total { font-size: .8125rem; color: #7b8794; }
.rps-total b { color: #e5484d; font-size: .9375rem; }
.rps-clean { color: #198754; }
.rps-more {
  margin-left: auto; background: none; border: 0; padding: 0;
  color: var(--brand); font-size: .8125rem; cursor: pointer;
}
.rps-more:hover { text-decoration: underline; }

.rps-tags { display: flex; flex-wrap: wrap; gap: .4375rem; margin-top: .625rem; }
.rps-tag {
  display: inline-flex; align-items: center; gap: .3125rem;
  padding: .1875rem .5rem; border-radius: .25rem;
  background: #fdecec; color: #c0392b; font-size: .75rem; font-weight: 600;
}
.rps-tag b { font-size: .8125rem; }

/* 举报明细列表 */
.rp-item {
  padding: .625rem .75rem; border: 1px solid #eef2f7; border-radius: .375rem;
  margin-bottom: .5rem; background: #fff;
}
.rp-item .rp-top { display: flex; align-items: center; gap: .5rem; margin-bottom: .25rem; }
.rp-item .rp-reason {
  padding: .125rem .4375rem; border-radius: .25rem;
  background: #fdecec; color: #c0392b; font-size: .75rem; font-weight: 600;
}
.rp-item .rp-time { margin-left: auto; font-size: .75rem; color: #9aa5b1; }
.rp-item .rp-detail { font-size: .8125rem; color: #4a5568; word-break: break-word; }

@media (max-width: 767px) {
  .rps-head { gap: .5rem; }
  .rps-more { margin-left: 0; }
}

/* 批量查询结果 */
.batch-item .b-left { display: flex; align-items: center; gap: .375rem; flex-wrap: wrap; min-width: 0; }
.batch-item .b-tag {
  display: inline-block; padding: .0625rem .375rem; border-radius: .1875rem;
  background: #eef3ff; color: var(--brand); font-size: .6875rem; font-weight: 600;
  white-space: nowrap;
}
.batch-item .b-tag-warn { background: #fdf5e3; color: #b8860b; }
.batch-item .b-tag-mute { background: #f1f3f6; color: #7b8794; }

/* ==========================================================================
   批量查询页（结构对齐目标站 balances.html，视觉做了细化）
   ========================================================================== */

textarea.lined {
  border: 1px solid #c3d4e8 !important;
  border-radius: .5rem;
  font-size: .875rem !important;   /* 防止被 Bootstrap 的 input-group-lg 之类覆盖 */
  line-height: 1.7;
  padding: .875rem 1rem;
  resize: vertical;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: .01em;
  color: #1f2d3d;
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
textarea.lined::placeholder { font-family: var(--my-font-family); color: #b4bcc8; }
textarea.lined:focus {
  border-color: var(--brand-search) !important;
  box-shadow: 0 0 0 .2rem rgba(78,110,242,.12);
}

.btn-query {
  background: linear-gradient(180deg, #5a78f5, #4e6ef2);
  color: #fff; cursor: pointer;
  padding: .6875rem 3rem; border-radius: .5rem;
  font-size: 1.0625rem; font-weight: 600; letter-spacing: .04em;
  user-select: none;
  box-shadow: 0 2px 6px rgba(78,110,242,.28);
  transition: filter .15s, box-shadow .15s, transform .05s;
}
.btn-query:hover { filter: brightness(1.06); box-shadow: 0 4px 12px rgba(78,110,242,.34); }
.btn-query:active { transform: translateY(1px); }
.btn-query.is-loading { opacity: .6; pointer-events: none; box-shadow: none; }

/* ---------- 汇总条 ---------- */
.bal-summary {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.75rem;
  padding: .75rem 1rem;
  background: #f7f9fc;
  border: 1px solid #e4eaf2;
  border-radius: .5rem;
  margin-bottom: .75rem;
}
.bal-summary .bs-item { display: flex; align-items: baseline; gap: .4375rem; }
.bal-summary .bs-k { font-size: .8125rem; color: #7b8794; }
.bal-summary .bs-v {
  font-size: 1rem; color: #000;
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, Menlo, Consolas, monospace;
}
.bal-summary .bs-accent { color: var(--brand); }
.bal-summary .bs-ok { color: #198754; }
.bal-summary .bs-bad { color: #adb5bd; }
.bal-summary .bs-bad.has-error { color: #dc3545; }

/* ---------- 进度条 ---------- */
.bal-progress { height: .25rem; background: #e9eef5; border-radius: 2rem; overflow: hidden; margin-bottom: .75rem; }
.bal-progress .bp-bar {
  height: 100%; width: 0;
  background: linear-gradient(90deg, #4e6ef2, #7a93ff);
  border-radius: 2rem;
  transition: width .25s ease;
}

/* ---------- 结果表 ---------- */
.bal-table { font-size: .875rem; margin-bottom: 0; }
.bal-table thead th {
  background: #1c5c93; color: #fff;
  font-size: .8125rem; font-weight: 600;
  letter-spacing: .03em;
  white-space: nowrap; vertical-align: middle;
  border: 0;
  padding: .625rem .75rem;
}
.bal-table thead th:first-child { border-top-left-radius: .375rem; }
.bal-table thead th:last-child { border-top-right-radius: .375rem; }
.bal-table thead th.th-sort { cursor: pointer; user-select: none; }
.bal-table thead th.th-sort:hover { background: #174c7a; }
.bal-table thead th .sort-ico { opacity: .45; font-style: normal; font-size: .6875rem; margin-left: .125rem; }
.bal-table thead th.sort-asc .sort-ico,
.bal-table thead th.sort-desc .sort-ico { opacity: 1; }

.bal-table tbody td {
  vertical-align: middle; white-space: nowrap;
  padding: .625rem .75rem;
  border-bottom: 1px solid #eef2f7;
  color: #374151;
}
.bal-table tbody tr:nth-child(even) { background: #fafbfd; }
.bal-table tbody tr:hover { background: #f2f6fc; }
.bal-table tbody tr.is-bad { background: #fff6f6; }
.bal-table tbody tr.is-bad:hover { background: #fdeeee; }

.bal-table .td-num { text-align: right; font-variant-numeric: tabular-nums; color: #000; }
.bal-table .td-seq { color: #9aa5b1; }

.bal-table .td-addr {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: .8125rem; font-weight: 400;
}
.bal-table .td-addr a { color: #1f2d3d; }
.bal-table .td-addr a:hover { color: var(--brand); opacity: 1; text-decoration: underline; }

.bal-table .row-tag {
  display: inline-block; margin-left: .375rem; padding: .0625rem .3125rem;
  border-radius: .1875rem; background: #eef3ff; color: var(--brand);
  font-size: .625rem; font-weight: 600; vertical-align: middle;
  max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.bal-table .pill {
  display: inline-block; padding: .125rem .5rem; border-radius: 1rem;
  font-size: .75rem; font-weight: 600; line-height: 1.5;
}
.bal-table .pill-ok   { background: #e8f6ef; color: #198754; }
.bal-table .pill-bad  { background: #fdecec; color: #c0392b; }
.bal-table .pill-mute { background: #f1f3f6; color: #7b8794; }
.bal-table .pill-warn { background: #fdf5e3; color: #b8860b; }

.bal-table .form-check-input { cursor: pointer; margin: 0; }

.bal-table tfoot td {
  background: #f7f9fc; color: #000;
  border-top: 2px solid #dbe4ef; border-bottom: 0;
  padding: .625rem .75rem;
}
.bal-table tfoot .tf-label { color: #7b8794; font-size: .8125rem; }

.bal-tip { margin-top: .625rem; font-size: .75rem; color: #9aa5b1; text-align: center; }

/* 空态 */
.bal-empty { padding: 2rem 1rem !important; text-align: center; color: #9aa5b1; white-space: normal !important; }

@media (max-width: 767px) {
  .btn-query { width: 100%; text-align: center; }
  .bal-table { font-size: .75rem; }
  .bal-table thead th, .bal-table tbody td { padding: .5rem .4rem; }
  .bal-summary { gap: .375rem 1rem; padding: .625rem .75rem; }
  .bal-summary .bs-k { font-size: .75rem; }
  .bal-summary .bs-v { font-size: .875rem; }
}

/* 复制按钮的「已复制」反馈状态 */
.qr-pop .qr-copy.is-done { color: #198754; font-weight: 700; }
.qr-pop .qr-copy.is-done::before { content: ''; }

/* 评分人数等辅助信息 */
.addr-stats .as-extra { font-size: .75rem; font-weight: 400; color: #7b8794; }

/* ==========================================================================
   超窄屏（≤400px）
   汇率区两个价格项并排放不下，需要收紧各字段宽度才不会横向溢出
   ========================================================================== */
@media (max-width: 400px) {
  .price-item { margin-right: .125rem; }
  .price-item img, .price-item .coin-icon { width: 1.125rem; height: 1.125rem; margin-right: .1875rem; }
  .price-name { width: 2.375rem; font-size: .75rem; }
  .price-value { width: 3.75rem; font-size: .75rem; margin-right: .1875rem; }
  .price-item .price-unit { font-size: .75rem; }
  .panel-soft { padding-left: .625rem !important; padding-right: .625rem !important; }
}

/* ==========================================================================
   极窄屏（≤340px，如 iPhone SE 一代）
   375px 以上「收支类型」与「数量区间」并排是安全的；
   再窄下去这一行会挤到文字钻到箭头底下，所以退回各占一行。
   ========================================================================== */
@media (max-width: 340px) {
  .addr-panel #hide1,
  .addr-panel #hide2 { width: 100%; flex: 0 0 100%; }
}

/* ==========================================================================
   TRX 能量租赁（/tron-energy）
   --------------------------------------------------------------------------
   与站点同一套视觉语言：沿用 --brand 主色、.panel-soft 底色与圆角。
   所有长度用 rem，跟随 html 的 --ui-scale 整体缩放。
   ========================================================================== */

.en-lead {
  text-align: center; color: #6b7785; font-size: .8125rem;
  line-height: 1.7; max-width: 46rem; margin: .5rem auto 1.25rem;
}

.en-section { border-radius: .5rem; margin-bottom: 1.125rem; }

.en-h2 { font-size: 1rem; font-weight: 700; margin: 0 0 .375rem; color: #22303c; }
.en-sub { font-size: .8125rem; color: #6b7785; margin: 0 0 .875rem; }

.en-empty { color: var(--expense); font-size: .875rem; border-radius: .5rem; }

/* ---------------- 套餐 ---------------- */

.en-plans {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 1rem; margin-bottom: 1.125rem;
}

/* 与首页功能卡同样的思路：basis 小 + grow 到上限，保证宽度一致、整组居中 */
.en-plan {
  flex: 1 1 12rem; max-width: 22rem; min-width: 0;
  display: flex; flex-direction: column; align-items: center;
  padding: 1rem 1rem 1.125rem;
  background: #fff; border: 2px solid transparent; border-radius: .5rem;
  box-shadow: 0 .0625rem .5rem rgba(0, 0, 0, .06);
  cursor: pointer; text-align: center; font: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.en-plan:hover { border-color: rgba(28, 92, 147, .35); }
.en-plan.is-active { border-color: var(--brand); box-shadow: 0 .25rem .875rem rgba(28, 92, 147, .16); }

.en-plan-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; justify-content: center; }
.en-plan-label { font-size: .875rem; font-weight: 700; color: #22303c; }
.en-plan-tag {
  font-size: .6875rem; color: var(--brand); background: rgba(28, 92, 147, .1);
  border-radius: .75rem; padding: .125rem .5rem;
}
.en-plan-price {
  font-size: 1.75rem; font-weight: 700; color: var(--brand);
  line-height: 1.2; margin: .5rem 0 .25rem;
}
.en-plan-unit { font-size: .8125rem; font-weight: 600; margin-left: .25rem; }
.en-plan-desc { font-size: .75rem; color: #6b7785; line-height: 1.55; }

/* ---------------- 成本对比 ---------------- */

.en-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.en-table { width: 100%; border-collapse: collapse; font-size: .8125rem; min-width: 26rem; }
.en-table th, .en-table td { padding: .5rem .625rem; text-align: left; border-bottom: 1px solid var(--border-color-light); }
.en-table th { color: #6b7785; font-weight: 600; white-space: nowrap; }
.en-table tbody tr:last-child td { border-bottom: 0; }
.en-burn { color: var(--expense); }
.en-buy { color: var(--brand); font-weight: 700; }
.en-save { color: var(--income); }

.en-tip { font-size: .75rem; color: var(--caption); line-height: 1.6; margin: .75rem 0 0; }

/* ---------------- 收款（紧凑） ----------------
   原来是一整块「立即购买」：方案切换、大二维码、外部钱包按钮。
   套餐卡本身就是选择器，所以这里压成一行：小二维码 + 金额 + 地址 + 复制。
   ------------------------------------------------------------------ */

/*
 * 收款块整体居中：与上方的套餐卡、页面上其它内容保持同一条中轴线。
 * 二维码在上、金额/地址/按钮依次居中排列，左边不再留一大片空白。
 */
.en-pay-compact {
  display: flex; flex-direction: column; align-items: center;
  gap: .75rem; text-align: center;
  padding: 1.25rem 1rem; margin-bottom: 1.125rem;
  background: #fff; border: 1px solid var(--border-color-light); border-radius: .5rem;
}

/* 约 110px：够手机扫，又不占地方 */
.en-qr-mini { flex: 0 0 auto; line-height: 0; }
.en-qr-mini .en-qr svg { width: 6.25rem; height: 6.25rem; display: block; }

/* 文字区限宽并居中，地址很长时也不会把整块撑得左右不均 */
.en-pay-main { width: 100%; max-width: 34rem; }

.en-pay-row {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: center; gap: .5rem; margin-bottom: .375rem;
}
.en-pay-k { flex: 0 0 auto; font-size: .75rem; color: #6b7785; }
.en-pay-amount { font-size: 1.125rem; font-weight: 700; color: var(--brand); line-height: 1.2; }
.en-pay-scene { font-size: .75rem; color: var(--caption); }

.en-pay-safe { font-size: .75rem; line-height: 1.6; color: #8a5a00; margin-top: .75rem; }
.en-pay-safe b { color: #b26a00; }

/* 未配置收款地址时的提示：居中显示，不要撑出多余高度 */
.en-warn-flat { margin-bottom: 0; }

/* 到账说明：跟着收款块一起居中，和整块保持同一中轴线 */
.en-note-compact { text-align: center; margin: 0 0 1.25rem; }

.en-addr {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .8125rem; word-break: break-all; line-height: 1.5; color: #22303c;
}

.en-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: .75rem; }
.en-btn {
  padding: .4375rem .75rem; border-radius: .375rem; cursor: pointer; font: inherit;
  font-size: .8125rem; background: var(--brand); border: 1px solid var(--brand); color: #fff;
  text-decoration: none; display: inline-flex; align-items: center;
}
.en-btn:hover { color: #fff; opacity: .9; }
.en-btn-ghost { background: #fff; color: var(--brand); }
.en-btn-ghost:hover { color: var(--brand); }

/* 复制成功后的短暂状态：让反馈落在按钮本身上 */
.en-btn.is-done { background: var(--income); border-color: var(--income); color: #fff; }

.en-warn {
  font-size: .8125rem; line-height: 1.65; color: #8a5a00;
  background: #fff8e6; border: 1px solid #ffe0a3; border-radius: .375rem;
  padding: .625rem .75rem; margin-bottom: 1rem;
}

/* ---------------- 说明区 ---------------- */

.en-two { display: flex; flex-wrap: wrap; gap: 1.125rem; }
.en-two > .en-section { flex: 1 1 18rem; min-width: 0; margin-bottom: 1.125rem; }

.en-list { margin: 0; padding-left: 1.125rem; font-size: .8125rem; line-height: 1.8; color: #22303c; }
.en-list b { color: var(--brand); }

.en-steps { margin: 0; padding: 0; list-style: none; font-size: .8125rem; color: #22303c; }
.en-steps li { display: flex; align-items: center; gap: .5rem; padding: .3125rem 0; }
.en-steps span {
  flex: 0 0 auto; width: 1.25rem; height: 1.25rem; border-radius: 50%;
  background: var(--brand); color: #fff; font-size: .6875rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}

.en-faq { border-bottom: 1px solid var(--border-color-light); padding: .625rem 0; }
.en-faq:last-of-type { border-bottom: 0; }
.en-faq summary { font-size: .8125rem; font-weight: 600; color: #22303c; cursor: pointer; }
.en-faq summary::marker { color: var(--brand); }
.en-faq p { font-size: .8125rem; color: #6b7785; line-height: 1.7; margin: .5rem 0 0; }

.en-related {
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center;
  padding: .875rem 0 1.75rem; font-size: .8125rem;
}
.en-related a { color: var(--brand); }

/* ---------------- 移动端 ---------------- */

@media (max-width: 767px) {
  .en-plan { flex: 1 1 100%; max-width: none; }
  .en-plan-price { font-size: 1.5rem; }
  /* 手机上二维码本就在最前，这里只需收紧内边距 */
  .en-pay-compact { gap: .625rem; padding: .875rem .75rem; }
  .en-pay-safe { text-align: left; }
  .en-btn { flex: 1 1 auto; justify-content: center; }
  .en-two > .en-section { flex: 1 1 100%; }
}

/* ==========================================================================
   移动端页头：导航收进汉堡菜单
   --------------------------------------------------------------------------
   页头在窄屏上要同时容纳 logo、站名和导航胶囊；导航项一多就会挤爆宽度。
   这里在移动端把导航换成从页头下方展开的面板，桌面端仍保持平铺胶囊。
   放在文件末尾是刻意的：同优先级下后出现的规则生效，可以稳定覆盖
   上面 .site-nav 的桌面样式。
   ========================================================================== */

@media (max-width: 767px) {
  .nav-toggle { display: inline-flex; }

  .site-nav {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0; z-index: 60;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: .5rem .75rem .75rem;
    background: #fff; border-top: 1px solid #ececec;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .08);
  }
  .site-nav.is-open { display: flex; }

  /* 每项占满整行：手机上点击区域更大 */
  .site-nav .nav-item-plain,
  .site-nav .back-home {
    width: 100%; justify-content: center;
    min-height: 2.5rem; border-radius: .5rem;
  }
  .site-nav .nav-item-plain + .back-home { margin-top: .5rem; }

  /*
   * 面板用绝对定位浮在正文之上（标准下拉菜单行为）。
   * 注意：这里**不要**尝试用 `~ *` 之类把正文顶下去 —— 页头在 DOM 里
   * 只有 .container 一个兄弟节点，那种写法既挤不动正文，又会给后面的
   * 元素平白加上定位上下文。
   */
}

/* ==========================================================================
   HTML 网站地图（/sitemap）
   ========================================================================== */

.sm-lead {
  text-align: center; color: #6b7785; font-size: .8125rem;
  line-height: 1.7; max-width: 46rem; margin: .5rem auto 1.25rem;
}

.sm-box { border-radius: .5rem; margin-bottom: 1.125rem; }

.sm-h2 { font-size: 1rem; font-weight: 700; margin: 0 0 .625rem; color: #22303c; }
.sm-count {
  font-size: .75rem; font-weight: 400; color: var(--caption);
  background: #eef3f8; border-radius: .75rem; padding: .125rem .5rem; margin-left: .25rem;
}

.sm-list { margin: 0; padding: 0; list-style: none; }
.sm-list li { padding: .5rem 0; border-bottom: 1px solid var(--border-color-light); }
.sm-list li:last-child { border-bottom: 0; }
.sm-list a { color: var(--brand); font-size: .875rem; font-weight: 600; }
.sm-desc { display: block; font-size: .75rem; color: #6b7785; margin-top: .1875rem; line-height: 1.6; }

/* 地址很多，用多列排布省纵向空间；窄屏自动退回单列 */
.sm-addr {
  margin: 0; padding: 0; list-style: none;
  columns: 3; column-gap: 1.25rem;
}
.sm-addr li { break-inside: avoid; padding: .1875rem 0; }
.sm-addr a {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .75rem; color: #3a5163; text-decoration: none; word-break: break-all;
}
.sm-addr a:hover { color: var(--brand); text-decoration: underline; }

.sm-more { font-size: .75rem; color: var(--caption); margin: .75rem 0 0; line-height: 1.6; }
.sm-more a { color: var(--brand); }

.sm-related {
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center;
  padding: .875rem 0 1.75rem; font-size: .8125rem;
}
.sm-related a { color: var(--brand); }

/* ---------------- 页脚内链 ---------------- */

/*
 * 页脚内链。
 *
 * 这一行在**白色**页面背景上，不是深色页脚条里 —— 所以颜色必须按浅底选。
 * 之前误用了深色页脚那套 #9fb3c8（浅蓝灰），在白底上对比度极低，
 * 看起来就是「白色的、点不到的字」。这里换成对白底有足够对比的深灰蓝，
 * 分隔点用更浅的一档做弱化。
 */
.foot-links {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
  padding: .875rem 1rem 1rem; border-top: 1px solid var(--border-color-light);
  justify-content: center;
}
.foot-links a { color: #4a5b6d; font-size: .8125rem; text-decoration: none; }
.foot-links a:hover { color: var(--brand); text-decoration: underline; }
.foot-links .fl-sep { color: #c3ced8; font-size: .75rem; }

@media (max-width: 991px) { .sm-addr { columns: 2; } }
@media (max-width: 767px) {
  .sm-addr { columns: 1; }
  .foot-links { gap: .375rem .875rem; }
}

/* ==========================================================================
   回到顶部
   --------------------------------------------------------------------------
   固定右下角，默认隐藏，滚动超过一屏才淡入（见 app.js 的 initBackToTop）。
   用 [hidden] 而不是 opacity 控制显隐之外的可达性：隐藏时不应被 Tab 聚焦。
   ========================================================================== */

.to-top {
  position: fixed; right: 1.25rem; bottom: 1.5rem; z-index: 70;

  width: 2.75rem; height: 2.75rem; padding: 0;
  display: flex; align-items: center; justify-content: center;

  background: #fff; color: var(--brand);
  border: 1px solid #d7e0ea; border-radius: 50%;
  box-shadow: 0 .25rem .875rem rgba(20, 40, 60, .14);
  cursor: pointer;

  opacity: 0; transform: translateY(.5rem);
  transition: opacity .2s ease, transform .2s ease, color .15s, border-color .15s;
}
.to-top.is-on { opacity: 1; transform: translateY(0); }
.to-top:hover { color: #fff; background: var(--brand); border-color: var(--brand); }
.to-top:focus-visible { outline: .125rem solid var(--brand); outline-offset: .125rem; }

/* [hidden] 必须在 .is-on 之后仍生效，否则淡入动画会和隐藏打架 */
.to-top[hidden] { display: none !important; }

@media (max-width: 767px) {
  /*
   * 移动端：触控目标放大到 3rem（≥44px 的可点面积），并往内收一点，
   * 同时在竖向上抬到 toast 之上 —— toast 固定在底部居中，
   * 两者都靠底时容易压在一起。
   */
  .to-top {
    right: .875rem; bottom: 3.75rem;
    width: 3rem; height: 3rem;
  }
}

/* 用户要求减少动效时不要滚动动画，直接跳 */
@media (prefers-reduced-motion: reduce) {
  .to-top { transition: none; }
}

/*
 * 页脚版权行：贴在页脚最底部，用一条细分割线与上方内容分开。
 *
 * 颜色是按深色页脚底（--footer-bg #587187）实算出来的：4.73:1，
 * 过 WCAG AA 的 4.5:1 且留有余量。深色底上的浅色很容易不达标 ——
 * 起初随手写的 #d3dde6 只有 3.70:1，小字会发虚。
 * 改这个颜色前先算对比度，别凭肉眼看着「差不多」。
 */
.foot-copy {
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding: .875rem 1rem 1.125rem;
  text-align: center;
  font-size: .75rem;
  line-height: 1.7;
  color: #f4f7fa;
}

@media (max-width: 767px) {
  .foot-copy { padding: .75rem .75rem 1rem; }
}

/* ==========================================================================
   语言切换
   --------------------------------------------------------------------------
   两个选项都列出来、当前项高亮 —— 单链接方案用户得先猜「现在是哪种语言」。
   样式与站内其它胶囊一致，桌面端在页头右侧，移动端收进汉堡面板。
   ========================================================================== */

.lang-switch {
  display: inline-flex; align-items: center;
  border: 1px solid #d7e0ea; border-radius: 2rem;
  overflow: hidden; background: #fff;
}
.lang-opt {
  padding: .375rem .625rem;
  font-size: .8125rem; line-height: 1; text-decoration: none;
  color: #6b7785; white-space: nowrap;
}
.lang-opt:hover { color: var(--brand); background: #f5f9ff; }
.lang-opt.is-active { color: #fff; background: var(--brand); }

@media (max-width: 767px) {
  /* 移动端在汉堡面板里占满整行，触控目标与其他项一致 */
  .lang-switch {
    width: 100%; margin-top: .5rem; border-radius: .5rem;
    display: flex;
  }
  .lang-opt {
    flex: 1 1 0; text-align: center;
    min-height: 2.5rem; display: flex; align-items: center; justify-content: center;
  }
}

/* ==========================================================================
   USDT 兑换 TRX（/usdt-to-trx）
   --------------------------------------------------------------------------
   只做展示：输入数量 → 按实时汇率算出可得 TRX。
   汇率的「已扣手续费」值由服务端下发，前端只做乘法，页面上不出现费率。
   ========================================================================== */

.ex-panel { border-radius: .5rem; margin-bottom: 1.125rem; }

.ex-row { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; justify-content: center; }
.ex-label { flex: 0 0 auto; font-size: .8125rem; color: #6b7785; }

.ex-input-wrap {
  position: relative; display: flex; align-items: center;
  flex: 0 1 14rem; min-width: 9rem;
}
.ex-input {
  padding-right: 3.75rem; text-align: right;
  font-size: 1.125rem; font-weight: 600;
}
.ex-unit {
  position: absolute; right: .75rem; font-size: .8125rem; color: #6b7785;
  pointer-events: none;
}

.ex-quick { display: flex; gap: .375rem; flex-wrap: wrap; }
.ex-quick-btn {
  padding: .3125rem .625rem; font: inherit; font-size: .75rem; cursor: pointer;
  background: #fff; color: #4a5b6d;
  border: 1px solid var(--border-color-light); border-radius: .375rem;
}
.ex-quick-btn:hover { color: var(--brand); border-color: var(--brand); background: #f5f9ff; }

.ex-divider { display: flex; justify-content: center; color: var(--brand); margin: .75rem 0; }

.ex-out { text-align: center; }
.ex-out-k { font-size: .75rem; color: #6b7785; }
.ex-out-v {
  font-size: 1.75rem; font-weight: 700; color: var(--brand);
  line-height: 1.3; margin: .25rem 0;
  word-break: break-all;
}
.ex-out-unit { font-size: .875rem; font-weight: 600; }
.ex-rate { font-size: .75rem; color: var(--caption); }

.ex-updated {
  text-align: center; font-size: .75rem; color: var(--caption); margin-top: .75rem;
}
.ex-refresh {
  margin-left: .5rem; padding: .125rem .5rem; font: inherit; font-size: .75rem;
  cursor: pointer; background: #fff; color: var(--brand);
  border: 1px solid var(--border-color-light); border-radius: .375rem;
}
.ex-refresh:hover { border-color: var(--brand); }

@media (max-width: 767px) {
  .ex-input-wrap { flex: 1 1 100%; }
  .ex-out-v { font-size: 1.5rem; }
}