/* num.loopback.cn —— 手机号码趣味分析
   手写极简 CSS：零框架、零外部字体，首屏只有这一个样式文件。
   主题色 --num / --num-soft 由 JS 按「号码色」实时写入，整页随号码变色。 */

:root {
  /* 本页自带深浅两套配色，先向浏览器声明「别替我反色」：
     华为/小米等国产浏览器的强制深色只改文字颜色、不改 SVG 的 rect 填充，
     键盘就会变成「白键面 + 发白数字」。声明 color-scheme 后强制深色不再介入。 */
  color-scheme: light dark;
  --bg: #f5f6f8;
  --surface: #ffffff;
  --surface2: #fafbfc;
  --line: #e4e7ec;
  --text: #12151a;
  --muted: #6b7280;
  --accent: #2f6fed;
  --ok: #15a34a;
  --warn: #d97706;
  --bad: #dc2626;
  --num: #2f6fed;
  --num-soft: rgba(47, 111, 237, .16);
  --r: 16px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 10px 28px -16px rgba(16, 24, 40, .18);
  --shell: 2400px;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB",
          "Microsoft YaHei", "Noto Sans SC", Roboto, Helvetica, Arial, sans-serif;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b0e13;
  --surface: #14181f;
  --surface2: #1a1f28;
  --line: #262d38;
  --text: #e7eaee;
  --muted: #98a2b3;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px -18px rgba(0, 0, 0, .8);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- 顶栏 ---------- */
.hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 32px;
  max-width: var(--shell);
  margin: 0 auto;
  width: 100%;
}

/* 顶栏左侧 = 页面标题（原来放 brand 的位置）。域名在地址栏与页脚已足够，
   顶栏留给「这页是干什么的」；窄屏下让位给右侧控件，超出部分省略 */
.page-title {
  margin: 0;
  min-width: 0;
  font: 700 clamp(16px, 2.1vw, 20px)/1.3 var(--sans);
  letter-spacing: -.3px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hd-r { display: flex; align-items: center; gap: 8px; }

.lang-sw select {
  appearance: none;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 6px 26px 6px 10px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.icon-btn {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font-size: 15px;
  cursor: pointer;
  line-height: 1;
}
.icon-btn:hover { border-color: var(--num); color: var(--num); }

/* 主区 */
.wrap {
  flex: 1;
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 14px 32px 40px;
}

/* 顶部一抹随号码变色的光晕：原来挂在居中的 .hero 上，
   标题与说明移走后改挂主区，保持页面上缘的呼吸感 */
.wrap { position: relative; }
.wrap::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -70px;
  height: 300px;
  background: radial-gradient(52% 60% at 50% 0%, var(--num-soft), transparent 72%);
  pointer-events: none;
  transition: background .5s;
  z-index: 0;
}
.wrap > * { position: relative; z-index: 1; }

.inbar {
  position: relative;
  display: flex;
  gap: 8px;
  max-width: 520px;
  margin: 0 auto;
}

.inbar input {
  flex: 1;
  min-width: 0;
  height: 52px;
  padding: 0 16px;
  font: 500 18px/1 var(--mono);
  letter-spacing: .5px;
  color: var(--text);
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.inbar input::placeholder { color: var(--muted); opacity: .7; font-weight: 400; }
.inbar input:focus {
  border-color: var(--num);
  box-shadow: 0 0 0 4px var(--num-soft);
}

.inbar button {
  height: 52px;
  padding: 0 22px;
  border: 0;
  border-radius: 14px;
  background: var(--num);
  color: #fff;
  font: 600 15px/1 var(--sans);
  cursor: pointer;
  white-space: nowrap;
  transition: filter .15s, transform .08s;
}
.inbar button:hover { filter: brightness(1.08); }
.inbar button:active { transform: translateY(1px); }

.chips {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 16px auto 0;
  max-width: 620px;
}
.chips-lb { color: var(--muted); font-size: 12.5px; margin-inline-end: 2px; }

.chip {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  border-radius: 999px;
  padding: 4px 11px;
  font-size: 12.5px;
  cursor: pointer;
  line-height: 1.5;
}
.chip:hover { color: var(--num); border-color: var(--num); }
.chip, .swatch .hex, .morse-row .m { font-variant-numeric: tabular-nums; }

.err {
  position: relative;
  min-height: 20px;
  margin: 12px 0 0;
  color: var(--bad);
  font-size: 13.5px;
}

/* ---------- 结果区：CSS columns 瀑布流（口径同 loopback.cn 首页） ----------
   卡片等宽不等高、按列自上而下填充，窗口越宽列数越多；
   卡片内部全部自适应列宽，不再有 grid-column 跨列的宽卡。 */
.grid {
  /* 列宽下限 340px、最多 4 列：浏览器按容器真实宽度自己算列数 ——
     1440 屏 3 列、1920 屏 4 列，窗口拉宽就多一列，不再锁在 1080 里。
     上限卡在 4：列再多万一把 9 张卡摊成 5 列，最短的一列会只剩一张卡 */
  columns: 340px 4;
  column-gap: 14px;
  margin-top: 4px;
}
.grid .card {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  width: 100%;
  margin: 0 0 14px;
  /* 卡片成为容器查询的容器：同一视口下列数不同，卡内宽也不同，
     按卡片自身宽度收尺寸比按视口宽度准 */
  container-type: inline-size;
}

/* 只有输入卡时（还没分析）不必留出三列宽度：收成单列居中；
   分析出结果卡后 :has 自动失效，回到瀑布流 */
.grid:has(> .card:only-child) { columns: 1; }
.grid:has(> .card:only-child) > .card { max-width: 520px; margin-inline: auto; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 18px 18px 16px;
  box-shadow: var(--shadow);
  min-width: 0;
  animation: rise .32s cubic-bezier(.2, .7, .3, 1) both;
}
@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.card-h {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: .3px;
  text-transform: uppercase;
}
html[dir="rtl"] .card-h { letter-spacing: 0; }

.card-h .i { font-size: 15px; line-height: 1; }
.card-h .tag {
  margin-inline-start: auto;
  font: 500 11px/1 var(--mono);
  color: var(--muted);
  background: var(--surface2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 3px 6px;
  text-transform: none;
  letter-spacing: 0;
}

.mono { font-family: var(--mono); }
.muted { color: var(--muted); }
.center { text-align: center; }

/* ---------- 输入卡 ----------
   它与结果卡同一套 .card 外壳、同处一个瀑布流，所以只覆盖输入框自身的尺寸 */
.card-form .inbar { max-width: none; margin: 0; }
.card-form .inbar input {
  height: 48px;
  font-size: 17px;
  background: var(--bg);
}
.card-form .inbar button { height: 48px; padding: 0 18px; }
.card-form .chips {
  justify-content: flex-start;
  max-width: none;
  margin: 12px 0 0;
}
.card-form .err { margin: 10px 0 0; min-height: 0; }
.card-form .err:empty { display: none; }

/* 号码身份行：概览卡取消后，国家 / 国家码 / 位数压成颜色卡顶部一行 */
.meta-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px 6px;
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--muted);
}
.meta-line b {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 7px;
  border-radius: 6px;
  background: var(--num-soft);
  border: 1px solid var(--line);
  color: var(--num);
  font: 700 11.5px/1 var(--mono);
  letter-spacing: 1.2px;
}
.meta-line .dot { opacity: .45; }
.meta-line .m-num { font-family: var(--mono); color: var(--text); }

/* ---------- 号码颜色 ---------- */
.swatch {
  border-radius: 14px;
  padding: 22px 18px;
  color: #fff;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  min-height: 108px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}
.swatch > * { min-width: 0; }
.swatch .hex { font: 600 22px/1 var(--mono); letter-spacing: .5px; }
.swatch .nm { font-size: 13px; opacity: .86; margin-top: 6px; }
.swatch .rgb { font: 12px/1.5 var(--mono); opacity: .82; text-align: end; }

/* 颜色条同时就是重心杆：柱色=该位色相、柱高=该位重量、红色三角=支点。
   容器高度与 JS 里的 maxH(118) 对齐，最高柱正好顶满 */
.bars {
  position: relative;
  display: flex;
  gap: 3px;
  margin-top: 18px;
  align-items: flex-end;
  height: 120px;
  border-bottom: 2px solid var(--line);
}
.bars .b {
  flex: 1;
  border-radius: 4px 4px 0 0;
  min-height: 5px;
  position: relative;
  transition: transform .18s, box-shadow .2s;
}
.bars .b:hover { transform: translateY(-3px); }
/* 支点所在的那根加双环：内环用卡片底色隔开，外环用号码色标记 */
.bars .b.is-pivot {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--num);
  z-index: 2;
}
.bars .b span {
  position: absolute;
  bottom: -20px;
  left: 0;
  right: 0;
  text-align: center;
  font: 500 11px/1 var(--mono);
  color: var(--muted);
}
.bars-wrap { padding-bottom: 22px; }

.pal { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.pal .p {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: 500 11.5px/1 var(--mono);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 9px 4px 4px;
  color: var(--muted);
}
.pal .p i { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }

/* ---------- 因数分解 ---------- */
.formula {
  font: 600 clamp(15px, 3.4vw, 19px)/1.7 var(--mono);
  word-break: break-word;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--surface2);
  border: 1px solid var(--line);
}
.formula sup { font-size: .68em; }

.facts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.fact {
  font-size: 12.5px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 3px 9px;
  color: var(--muted);
  background: var(--surface2);
}
.fact b { color: var(--text); font-family: var(--mono); font-weight: 600; }

/* ---------- 重心（已并入号码颜色卡：一条虚线上分隔，保持独立小标题） ---------- */
.sub-h {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 16px 0 0;
  padding-top: 13px;
  border-top: 1px dashed var(--line);
  font: 600 12px/1 var(--sans);
  color: var(--muted);
  letter-spacing: .3px;
}
.sub-h .i { font-size: 13px; line-height: 1; }
.sub-h .tag {
  margin-inline-start: auto;
  font: 500 11px/1 var(--mono);
  color: var(--muted);
  background: var(--surface2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 3px 6px;
}

/* 支点：叠在颜色条上的红线与红三角（原重心杆的样式，已随柱图合并） */
.pivot {
  position: absolute;
  bottom: 0;
  width: 18px;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 3;
}
.pivot .tri {
  width: 0; height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-bottom: 13px solid var(--bad);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .25));
  margin: 0 auto;
}
.pivot .dash {
  position: absolute;
  left: 50%;
  bottom: 13px;
  width: 0;
  height: 105px;
  border-left: 1.5px dashed var(--bad);
  /* 虚线压在彩色柱上，光靠红 + 低透明度会糊掉；加一圈浅色外晕，任何柱色上都立得起来 */
  filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, .85)) drop-shadow(0 0 0.5px rgba(0, 0, 0, .5));
  opacity: .95;
}

.gbar { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }

/* ---------- 九键滚轮 ---------- */
.t9-scroll { display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 6px; }

/* --ih 为单个字符格边长，4 行 + 3 道 3px 间隙 = 视口高度 */
.t9r { --ih: 28px; --gp: 3px; display: inline-block; direction: ltr; margin: 0 auto; }
.t9r-h, .t9r-b { display: flex; gap: var(--gp); }
.t9r-h { margin-bottom: var(--gp); }
.t9r-h b {
  width: var(--ih); height: var(--ih);
  display: flex; align-items: center; justify-content: center;
  border-radius: 7px;
  background: var(--num); color: #fff;
  font: 600 14px/1 var(--mono);
}

/* 视口：只露出 4 格，其余由 reel 平移带过 */
.rw {
  width: var(--ih);
  height: calc(var(--ih) * 4 + var(--gp) * 3);
  overflow: hidden;
  border-radius: 7px;
  position: relative;
}
.reel { display: flex; flex-direction: column; gap: var(--gp); will-change: transform; }
.ri {
  flex: none;
  height: var(--ih); width: var(--ih);
  display: flex; align-items: center; justify-content: center;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: var(--surface2);
  color: var(--text);
  font: 500 14px/1 var(--mono);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: background .15s, border-color .15s;
}
/* 补位的数字仍占一格，用虚线边框表示「这里不是字母」 */
.ri.dig { color: var(--muted); background: transparent; border-style: dashed; }
.ri:hover { border-color: var(--num); background: var(--num-soft); }

/* 当前顶端拼出的词 */
.t9-cur {
  display: inline-flex; align-items: baseline; gap: 8px;
  margin-top: 14px; padding: 6px 12px;
  border-radius: 10px;
  background: var(--num-soft);
  cursor: pointer;
}
.t9-cur .k { font-size: 12px; color: var(--muted); }
.t9-cur .v {
  font: 600 15px/1.5 var(--mono);
  color: var(--num);
  letter-spacing: .06em;
  word-break: break-all;
}

/* 窄屏收窄格子，让 11 位号在 390px 下不用横向滚动 */
@media (max-width: 560px) {
  .t9r { --ih: 26px; }
  .t9r-h b, .ri { font-size: 13px; }
}

.combos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.combo {
  font: 500 13px/1.6 var(--mono);
  border: 1px solid var(--line);
  background: var(--surface2);
  border-radius: 8px;
  padding: 4px 9px;
  cursor: pointer;
  color: var(--text);
  letter-spacing: .5px;
}
.combo:hover { border-color: var(--num); color: var(--num); }

/* ---------- 键盘距离 ---------- */
.kbd-wrap { display: flex; gap: 24px; align-items: center; justify-content: center; flex-wrap: wrap; }
.kbd-box { flex: none; }
.kbd-box .kbd {
  display: block;
  width: 200px;
  height: auto;
  direction: ltr;
  overflow: visible;
}
/* 键面/键线/数字的颜色由 num.js 的 kbdPal() 以 fill、stroke 属性写进 SVG，
   这里只留尺寸类样式 —— 鸿蒙 ArkWeb 会把 SVG 里的 var() 解析成浅色主题的值，
   深色模式下会出「白键面 + 浅灰数字」，所以这条路彻底不走变量。 */
.kbd .key {
  stroke-width: 1;
}
.kbd .k {
  font: 600 17px/1 var(--mono);
  text-anchor: middle;
  /* 先描边再填充：轨迹线穿过键位时不压住数字 */
  paint-order: stroke;
  stroke-width: 4px;
  stroke-linejoin: round;
}
/* * 与 # 是补全键盘用的装饰键，略小一点、颜色偏灰，不抢数字 */
.kbd .k.sym { font-size: 19px; }
.kbd .n {
  font: 600 10px/1 var(--mono);
  fill: var(--num);
  text-anchor: middle;
}
/* 轨迹：每跳一条 path，颜色按光谱取（第 1 跳红 → 逐跳缩短波长 → 紫），
   段内再由 stop-opacity 从 .28 走到 1，于是「往哪走」和「第几跳」两件事都读得出来。
   色相与亮度都由 JS 写成 stop-color 属性（见 num.js 的 kbdPal），不走 CSS 变量：
   鸿蒙 ArkWeb 对 SVG 里的 var() 解析不可靠。 */
.kbd .trace2 {
  fill: none;
  stroke-width: 2.6;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.kbd .dot2 { fill: var(--num); stroke: #fff; stroke-width: 1.6; }
.kbd rect.key { transition: fill .18s, stroke .18s; }
.kbd rect.key.lit { fill: var(--num-soft); stroke: var(--num); stroke-width: 1.6; }
/* 连按同一位时键一直是亮的，用一次描边收缩闪一下表示「又按了一次」 */
@keyframes keyHit { 0% { stroke-width: 4.6; } 100% { stroke-width: 1.6; } }
.kbd rect.key.hit { stroke: var(--num); fill: var(--num-soft); animation: keyHit .22s ease-out; }
.kbd .stk { fill: none; stroke: var(--num); stroke-width: 2.2; }
/* 终点用同色虚线区分，不用红色——红色在这页容易被读成「出错」 */
.kbd .enk { fill: none; stroke: var(--num); stroke-width: 2.2; stroke-dasharray: 5 3; }

.trace-btns { margin-top: 12px; }

.kbd-side { flex: 0 1 560px; min-width: 260px; }
.kbd-verdict {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--num);
}

/* ---------- 摩斯 ---------- */
.morse-list { display: flex; flex-direction: column; gap: 7px; }
.morse-row { display: flex; align-items: center; gap: 10px; }
.morse-row .d {
  font: 600 13px/1 var(--mono);
  width: 16px;
  color: var(--muted);
  flex: none;
  text-align: center;
}
.morse-row .m { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.morse-row .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--num);
  display: inline-block;
}
.morse-row .dash {
  width: 18px; height: 6px; border-radius: 3px;
  background: var(--num);
  display: inline-block;
}
.morse-row .g { width: 5px; }

.btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font: 500 13px/1 var(--sans);
  cursor: pointer;
}
.btn:hover { border-color: var(--num); color: var(--num); }
.btn.primary { background: var(--num); border-color: var(--num); color: #fff; }
.btn.primary:hover { filter: brightness(1.08); color: #fff; }
.btn:disabled { opacity: .5; cursor: default; }

/* ---------- 评分 ---------- */
.score-top { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.ring { position: relative; width: 96px; height: 96px; flex: none; }
.ring svg { transform: rotate(-90deg); display: block; }
.ring .val {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  line-height: 1;
}
.ring .val b { font: 700 26px/1 var(--mono); }
.ring .val i { font: 500 10px/1 var(--sans); color: var(--muted); font-style: normal; margin-top: 3px; }

.grade { min-width: 0; }
.grade .g-name { font-size: 19px; font-weight: 700; letter-spacing: -.2px; }
.grade .g-sub { font-size: 12.5px; color: var(--muted); margin-top: 4px; }

.rows { margin-top: 16px; display: flex; flex-direction: column; gap: 1px; }
.row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 2px;
  border-bottom: 1px dashed var(--line);
  font-size: 13px;
}
.row:last-child { border-bottom: 0; }
.row .rl { color: var(--muted); }
.row .rv { margin-inline-start: auto; font-family: var(--mono); font-size: 12.5px; }
.row .rp { font: 600 12px/1 var(--mono); min-width: 30px; text-align: end; flex: none; }
.row .rp.up { color: var(--ok); }
.row .rp.dn { color: var(--bad); }
.row .rp.ze { color: var(--muted); }

/* 评分图右侧的特征卡片：只显示号码实际存在的特性 */
.score-aside { min-width: 0; flex: 1 1 140px; }
.feats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
.feat {
  font: 600 12px/1.2 var(--sans);
  border: 1px solid var(--ok);
  color: var(--ok);
  background: var(--surface2);
  border-radius: 8px;
  padding: 7px 8px;
  text-align: center;
  white-space: nowrap;
}

/* ---------- 分享 ---------- */
.share-prev {
  border: 1px dashed var(--line);
  border-radius: 12px;
  padding: 26px 16px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}
.share-prev img { max-width: 100%; width: 260px; border-radius: 10px; box-shadow: var(--shadow); display: block; margin: 0 auto 12px; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 12px);
  background: rgba(20, 24, 31, .94);
  color: #fff;
  font-size: 13px;
  padding: 9px 16px;
  border-radius: 10px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
  z-index: 50;
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- 页脚 ---------- */
.ft {
  border-top: 1px solid var(--line);
  padding: 16px 20px 26px;
  font-size: 12px;
  color: var(--muted);
}
.ft-line {
  max-width: var(--shell);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 10px;
}
.ft .dot { opacity: .5; }
.ft .brand-mini { font-family: var(--mono); }
.ft .icp { display: none; }

/* ---------- 窄屏 ----------
   列数不再逐档写死：columns 的 340px 下限会自动收敛到单列，
   这里只兜住手机端（避免 340×2 卡在 640~700 之间的临界宽度上） */
@media (max-width: 640px) {
  .grid { columns: 1; }
}

@media (max-width: 560px) {
  .wrap { padding: 10px 14px 32px; }
  .hd { padding: 12px 14px; gap: 8px; }
  .page-title { font-size: 15.5px; }
  .inbar input { font-size: 16px; height: 48px; }
  .inbar button { height: 48px; padding: 0 16px; }
  .card { padding: 15px 14px 14px; border-radius: 14px; }
  .grid .card { margin-bottom: 11px; }
  .img-modal img { max-height: 74dvh; }
}

/* ---------- RTL ---------- */
html[dir="rtl"] body { direction: rtl; }
html[dir="rtl"] .bars .b span { direction: ltr; }
/* 号码本体的左右顺序不随界面语言变：色条（=重心杆）固定 LTR，
   否则第 1 位跑到右边、支点百分比（从左端算）也会指反 */
html[dir="rtl"] .bars { direction: ltr; }
html[dir="rtl"] .formula,
html[dir="rtl"] .e164,
html[dir="rtl"] .nat,
html[dir="rtl"] .inbar input,
html[dir="rtl"] .combo,
html[dir="rtl"] .t9r,
html[dir="rtl"] .swatch .hex,
html[dir="rtl"] .swatch .rgb { direction: ltr; unicode-bidi: embed; }
html[dir="rtl"] .swatch .rgb { text-align: start; }
html[dir="rtl"] .pivot .tri { margin: 0 auto; }
html[dir="rtl"] .card-h .tag { margin-inline-start: 0; margin-inline-end: auto; }
html[dir="rtl"] .row .rv { margin-inline-start: 0; margin-inline-end: auto; }

/* ---------- 号码排行榜 ---------- */
.rk-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.rk-tab {
  font: 500 12.5px/1 var(--sans);
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface2);
  color: var(--muted);
  cursor: pointer;
}
.rk-tab:hover { color: var(--num); border-color: var(--num); }
.rk-tab.on { background: var(--num); border-color: var(--num); color: #fff; }

/* 维度口径说明：只在衍生维度下出现（最高分/最热/最新 不需要解释） */
.rk-hint { font: 500 11.5px/1.5 var(--sans); color: var(--muted); margin: -4px 0 10px; }
/* 统计口径脚注：候选集只取最近 1000 条分析，必须写明 */
.rk-scope {
  margin: 10px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--muted);
  opacity: .8;
}

.rk-list { display: flex; flex-direction: column; }
.rk-row {
  display: grid;
  /* 号码列吸收剩余空间；国家码 auto（只两三个字母），分数与尾列定宽，
     这样从 300px 的三列卡到 1000px 的单列卡都不会溢出 */
  grid-template-columns: 22px minmax(0, 1fr) auto 42px 56px;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
}
.rk-row:last-child { border-bottom: 0; }
.rk-i { font: 600 11.5px/1 var(--mono); color: var(--muted); text-align: center; }
.rk-n {
  font: 500 13px/1.4 var(--mono);
  color: var(--text);
  direction: ltr;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rk-c { font: 500 11.5px/1 var(--mono); color: var(--muted); text-align: end; padding-inline-end: 8px; }
.rk-s { font: 700 15px/1 var(--mono); text-align: end; }
.rk-t { font: 500 11.5px/1 var(--mono); color: var(--muted); text-align: end; }

@media (max-width: 560px) {
  .rk-row { gap: 6px; padding: 6px 0; }
  .rk-n { font-size: 12px; }
  .rk-s { font-size: 13.5px; }
  .rk-t { font-size: 10.5px; }
}

/* 三列瀑布流下单卡内宽只有 ~300px（比手机单列还窄）：
   按卡片自身宽度收一格九键与排行行，不用横向滚动 */
@container (max-width: 360px) {
  .t9r { --ih: 24px; --gp: 2px; }
  .t9r-h b, .ri { font-size: 12.5px; }
  .rk-row { grid-template-columns: 20px minmax(0, 1fr) auto 36px 48px; gap: 6px; padding: 6px 0; }
  .rk-n { font-size: 12px; }
  .rk-s { font-size: 13.5px; }
  .rk-t { font-size: 10.5px; }
  .rk-c { padding-inline-end: 0; }
}

html[dir="rtl"] .rk-n { text-align: left; }