/* ==========================================================================
   vue28 手机版样式（每个页面一套主题皮肤，差异尽量大）
   基线策略：单列、紧凑、触控友好（≥40px 点击区）、无 hover 依赖、安全区适配
   ========================================================================== */

/* ---------------------------------------------------------------- 基线 */
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0;
  font-size: 15px;
  line-height: 1.5;
  overflow-x: hidden;
  padding-bottom: env(safe-area-inset-bottom);
}

/* 手机版容器：最大 480px，居中；两侧留白按屏宽自适应 */
.m-wrap {
  max-width: 480px;
  margin: 0 auto;
  padding: 10px 10px calc(24px + env(safe-area-inset-bottom));
  min-height: 100vh;
  overflow-x: hidden;          /* 防止个别长数字把页面撑宽 */
}

/* 所有网格子项都允许收缩，否则 4 列统计格在窄屏会溢出被裁切 */
.m-grid > * { min-width: 0; }
.m-seg > button { min-width: 0; }
.m-balls > * { min-width: 0; }

/* 顶栏（手机版：两行结构，第一行标题+状态，第二行彩种切换） */
.m-top {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}
.m-top .row1 {
  display: flex;
  align-items: center;
  gap: 8px;
}
.m-top .title {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .5px;
  margin-right: auto;
  display: flex;
  align-items: center;
  gap: 6px;
}
.m-top .title em {
  font-style: normal;
  font-size: 11px;
  font-weight: 400;
  opacity: .65;
}
.m-seg {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  background: rgba(127, 127, 127, .12);
  border-radius: 999px;
  padding: 3px;
}
.m-seg button {
  flex: 1 1 0;
  min-width: 0;                 /* 关键：允许收缩，否则三个按钮会把顶栏撑爆 */
  overflow: hidden;
  text-overflow: ellipsis;
  border: 0;
  background: transparent;
  color: inherit;
  opacity: .6;
  font: inherit;
  font-size: 12.5px;
  padding: 9px 4px;
  border-radius: 999px;
  min-height: 38px;
  cursor: pointer;
  white-space: nowrap;
}
.m-seg button.on {
  opacity: 1;
  font-weight: 700;
  background: var(--m-accent, #ff9800);
  color: var(--m-accent-fg, #fff);
}
.m-status {
  font-size: 11px;
  opacity: .6;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.m-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .18);
}
.m-dot.warn { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, .2); }

/* 通用块 */
.m-card {
  background: var(--m-card, #fff);
  color: var(--m-text, #1f2937);
  border-radius: var(--m-radius, 16px);
  padding: 12px;
  margin-bottom: 10px;
  border: var(--m-border, 0);
  box-shadow: var(--m-shadow, 0 2px 10px rgba(17, 24, 39, .05));
}
.m-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .5px;
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: .85;
}
.m-title .tip { font-weight: 400; opacity: .6; font-size: 10px; margin-left: auto; }

/* 统计格 */
.m-grid { display: grid; gap: 8px; }
.m-grid.g2 { grid-template-columns: repeat(2, 1fr); }
.m-grid.g3 { grid-template-columns: repeat(3, 1fr); }
.m-grid.g4 { grid-template-columns: repeat(4, 1fr); }
.m-cell {
  background: var(--m-cell-bg, rgba(127, 127, 127, .07));
  border-radius: 12px;
  padding: 9px 6px;
  text-align: center;
  border: var(--m-cell-border, 0);
}
.m-cell .k { font-size: 10px; opacity: .6; }
.m-cell .v { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.2; }
.m-cell.hot { background: var(--m-hot-bg, rgba(255, 152, 0, .12)); }
.m-cell.hot .v { color: var(--m-accent, #ff9800); }
.m-cell small { display: block; font-size: 10px; opacity: .6; }

/* 号码球 */
.m-balls { display: flex; align-items: center; justify-content: center; gap: 6px; }
.m-ball {
  width: 46px; height: 46px; line-height: 46px;
  border-radius: 50%;
  text-align: center;
  font-size: 22px; font-weight: 800;
  background: var(--m-ball-bg, rgba(127, 127, 127, .12));
  color: var(--m-ball-fg, inherit);
  font-variant-numeric: tabular-nums;
}
.m-ball.sum { background: var(--m-accent, #ff9800); color: var(--m-accent-fg, #fff); }
.m-balls .op { opacity: .45; font-size: 16px; }

/* 徽章 */
.m-badges { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }
.m-badge {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(127, 127, 127, .12);
}
.m-badge.hot { background: var(--m-accent, #ff9800); color: var(--m-accent-fg, #fff); font-weight: 700; }
.m-badge.ok { background: rgba(34, 197, 94, .15); color: #15803d; }
.m-badge.bad { background: rgba(239, 68, 68, .15); color: #b91c1c; }

/* 倒计时 */
.m-timer {
  border-radius: var(--m-radius, 16px);
  padding: 10px;
  text-align: center;
  background: var(--m-timer-bg, linear-gradient(135deg, #ff9800, #ffb74d));
  color: var(--m-timer-fg, #fff);
  margin-bottom: 10px;
}
.m-timer .label { font-size: 10px; opacity: .92; }
.m-timer .value {
  font-size: 30px; font-weight: 800; letter-spacing: 2px;
  font-variant-numeric: tabular-nums;
}
.m-timer.done { background: linear-gradient(135deg, #64748b, #94a3b8); }

/* 表格 */
.m-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* 右侧渐变提示"还能横向滑动" */
  background: linear-gradient(to left, var(--m-card, #fff) 0, transparent 18px) right / 18px 100% no-repeat;
}
table.m-tb { width: 100%; border-collapse: collapse; font-size: 12px; }
table.m-tb th {
  text-align: left; font-weight: 600; opacity: .65;
  padding: 6px 5px; white-space: nowrap;
  position: sticky; top: 0;
  background: var(--m-card, #fff);
}
table.m-tb td {
  padding: 6px 5px; white-space: nowrap;
  border-bottom: 1px solid var(--m-line, rgba(127, 127, 127, .18));
  font-variant-numeric: tabular-nums;
}
table.m-tb .nums { font-weight: 700; letter-spacing: .5px; }
.m-scroll { max-height: 46vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* 走势点阵 */
.m-dots { display: flex; flex-direction: column; gap: 4px; }
.m-dotrow { display: flex; align-items: center; gap: 4px; }
.m-dotrow .e { font-size: 10px; opacity: .55; width: 48px; flex: none; font-variant-numeric: tabular-nums; }
.m-dotrow .c { font-size: 11px; opacity: .75; width: 62px; flex: none; }
.m-sq {
  width: 17px; height: 17px; line-height: 17px; border-radius: 5px;
  text-align: center; font-size: 10px; font-weight: 700;
  background: rgba(127, 127, 127, .12); opacity: .35;
}
.m-sq.on1 { opacity: 1; background: var(--m-c1, #ef4444); color: #fff; }
.m-sq.on2 { opacity: 1; background: var(--m-c2, #3b82f6); color: #fff; }

/* 条形统计 */
.m-bars { display: flex; align-items: flex-end; gap: 8px; height: 84px; }
.m-bars .b { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 3px; }
.m-bars .b i {
  width: 100%; border-radius: 8px 8px 3px 3px;
  background: var(--m-bar, linear-gradient(180deg, #ff9800, #ffd8a8));
  min-height: 4px; display: block;
}
.m-bars .b b { font-size: 12px; }
.m-bars .b span { font-size: 10px; opacity: .65; white-space: nowrap; }

/* 圆环 */
.m-ring { position: relative; width: 132px; height: 132px; margin: 0 auto; }
.m-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.m-ring .track { fill: none; stroke: rgba(127, 127, 127, .16); stroke-width: 11; }
.m-ring .bar { fill: none; stroke: var(--m-accent, #ff9800); stroke-width: 11; stroke-linecap: round; }
.m-ring .txt {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.m-ring .txt b { font-size: 26px; font-weight: 800; }
.m-ring .txt span { font-size: 10px; opacity: .6; }

/* 大号数字盘 */
.m-big {
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.m-big .num {
  font-size: 96px; font-weight: 900; line-height: 1;
  color: var(--m-accent, #ff9800);
  letter-spacing: -2px;
}
.m-big .sub { font-size: 12px; opacity: .6; }

/* 列表行 */
.m-li {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 0;
  border-bottom: 1px solid var(--m-line, rgba(127, 127, 127, .18));
}
.m-li:last-child { border-bottom: 0; }
.m-li .l { font-size: 11px; opacity: .6; width: 62px; flex: none; }
.m-li .m { flex: 1; font-weight: 700; letter-spacing: .5px; }
.m-li .r { font-size: 12px; }

/* 底部固定导航（.m-wrap 的直接子节点；用负边距抵消容器左右内边距做通栏） */
.m-tabbar {
  position: sticky; bottom: 0;
  display: flex; gap: 6px;
  box-sizing: border-box;
  max-width: none;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  background: var(--m-bar-bg, rgba(255, 255, 255, .92));
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--m-line, rgba(127, 127, 127, .18));
  margin: 0 -10px;
  /* 抵消负边距带来的“比视口宽 20px”：用 100% 约束住 */
  width: calc(100% + 20px);
  max-width: 100vw;
}
.m-tabbar button {
  flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  border: 0; font: inherit; font-size: 12px;
  padding: 10px 4px; border-radius: 10px;
  background: rgba(127, 127, 127, .12); color: inherit;
  min-height: 42px; cursor: pointer; white-space: nowrap;
}
.m-tabbar button.on { background: var(--m-accent, #ff9800); color: var(--m-accent-fg, #fff); font-weight: 700; }

/* 提示 */
.m-notice {
  font-size: 12px; line-height: 1.6;
  padding: 9px 11px; border-radius: 12px; margin-bottom: 10px;
  background: rgba(255, 152, 0, .12);
  border: 1px solid rgba(255, 152, 0, .35);
  color: #9a3412;
}
.m-notice.err { background: rgba(239, 68, 68, .1); border-color: rgba(239, 68, 68, .35); color: #b91c1c; }

.m-foot { text-align: center; font-size: 10px; opacity: .5; line-height: 1.8; padding: 8px 0 0; }
.m-foot a { color: inherit; }

/* 页面导航（手机版 12 页入口） */
.m-navlist { display: grid; gap: 8px; }
.m-navlist a {
  display: block; text-decoration: none; color: inherit;
  border-radius: 14px; padding: 12px;
  background: var(--m-cell-bg, rgba(127, 127, 127, .07));
  border: 1px solid var(--m-line, rgba(127, 127, 127, .15));
}
.m-navlist a b { font-size: 14px; }
.m-navlist a span { display: block; font-size: 11px; opacity: .65; margin-top: 3px; }

/* ==========================================================================
   主题皮肤：12 套，尽量拉开差异
   ========================================================================== */

/* 1. 橙金 · 大气数字（默认浅色大卡片） */
.theme-hero {
  --m-accent: #ff9800; --m-accent-fg: #fff;
  --m-card: #fff; --m-text: #1f2937;
  --m-radius: 22px;
  --m-shadow: 0 6px 20px rgba(255, 152, 0, .12);
  --m-c1: #ef4444; --m-c2: #3b82f6;
  background: linear-gradient(180deg, #fff7ed 0%, #f4f6f9 40%);
}
.theme-hero .m-hero {
  background: linear-gradient(135deg, #ff9800, #ffc46b);
  color: #fff; border-radius: 26px; padding: 18px 14px; text-align: center;
  box-shadow: 0 10px 26px rgba(255, 152, 0, .28);
  margin-bottom: 10px;
}
.theme-hero .m-hero .period { font-size: 12px; opacity: .95; }
.theme-hero .m-hero .m-ball { background: rgba(255, 255, 255, .22) !important; color: #fff !important; }
.theme-hero .m-hero .m-ball.sum { background: #fff !important; color: #ff9800 !important; }
.theme-hero .m-hero .m-badge { background: rgba(255, 255, 255, .22); color: #fff; }
.theme-hero .m-hero .m-badge.hot { background: #fff; color: #ff9800; }

/* 2. 赛博霓虹 · 黑底荧光 */
.theme-neon {
  --m-accent: #00e5a0; --m-accent-fg: #04140f;
  --m-card: #0d1520; --m-text: #d7f9ef;
  --m-line: rgba(0, 229, 160, .18);
  --m-cell-bg: rgba(0, 229, 160, .07);
  --m-radius: 6px;
  --m-shadow: 0 0 0 1px rgba(0, 229, 160, .22), 0 0 18px rgba(0, 229, 160, .08);
  --m-c1: #ff2e88; --m-c2: #29d3ff;
  --m-bar: linear-gradient(180deg, #00e5a0, rgba(0, 229, 160, .25));
  --m-timer-bg: linear-gradient(135deg, #0b2f28, #00e5a0);
  --m-timer-fg: #eafff9;
  background: radial-gradient(1200px 600px at 50% -10%, #10312a 0%, #05090f 55%, #02040a 100%);
  color: #d7f9ef;
  font-family: "Consolas", "SFMono-Regular", "Courier New", monospace;
}
.theme-neon .m-card { border: 1px solid rgba(0, 229, 160, .28); }
.theme-neon .m-big .num { text-shadow: 0 0 14px rgba(0, 229, 160, .7); }
.theme-neon .m-ball { border-radius: 8px; border: 1px solid rgba(0, 229, 160, .45); color: #9dffe2; background: rgba(0, 229, 160, .06); }
.theme-neon .m-ball.sum { background: #00e5a0; color: #04140f; box-shadow: 0 0 16px rgba(0, 229, 160, .6); }
.theme-neon .m-title { color: #00e5a0; opacity: 1; }

/* 3. 卡片信息流 · 米白柔和 */
.theme-feed {
  --m-accent: #6366f1; --m-accent-fg: #fff;
  --m-card: #ffffff; --m-text: #312e81;
  --m-line: rgba(99, 102, 241, .16);
  --m-cell-bg: rgba(99, 102, 241, .07);
  --m-radius: 18px;
  --m-shadow: 0 4px 14px rgba(49, 46, 129, .07);
  --m-c1: #f472b6; --m-c2: #60a5fa;
  background: #f6f5ff;
  color: #312e81;
}
.theme-feed .m-card { border-left: 4px solid rgba(99, 102, 241, .5); }
.theme-feed .m-feed-item { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px dashed rgba(99,102,241,.22); }
.theme-feed .m-feed-item:last-child { border-bottom: 0; }
.theme-feed .m-feed-item .idx {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: rgba(99, 102, 241, .12); color: #4f46e5;
  font-size: 11px; display: flex; align-items: center; justify-content: center; font-weight: 700;
}
.theme-feed .m-feed-item .body { flex: 1; }
.theme-feed .m-feed-item .body .top { display: flex; align-items: center; gap: 8px; }
.theme-feed .m-feed-item .body .nums { font-weight: 700; letter-spacing: 1px; }
.theme-feed .m-feed-item .body .meta { font-size: 10px; opacity: .55; margin-top: 2px; }

/* 4. 极简白 · 超大数字 */
.theme-mega {
  --m-accent: #111827; --m-accent-fg: #fff;
  --m-card: #fff; --m-text: #111827;
  --m-line: rgba(17, 24, 39, .12);
  --m-cell-bg: transparent;
  --m-radius: 0;
  --m-shadow: none;
  --m-timer-bg: #111827; --m-timer-fg: #fff;
  --m-bar-bg: rgba(255, 255, 255, .95);
  background: #fff;
  color: #111827;
}
.theme-mega .m-card { border-bottom: 1px solid rgba(17, 24, 39, .12); padding: 16px 4px; border-radius: 0; margin-bottom: 0; }
.theme-mega .m-big .num { font-size: 128px; }
.theme-mega .m-cell { background: transparent; padding: 6px 2px; }
.theme-mega .m-cell .v { font-size: 18px; }

/* 5. 数据表 · 蓝灰紧凑 */
.theme-table {
  --m-accent: #0ea5e9; --m-accent-fg: #fff;
  --m-card: #fff; --m-text: #0f172a;
  --m-line: rgba(15, 23, 42, .1);
  --m-cell-bg: rgba(14, 165, 233, .07);
  --m-radius: 8px;
  --m-shadow: 0 1px 3px rgba(15, 23, 42, .08);
  --m-c1: #0284c7; --m-c2: #7dd3fc;
  background: #eef4f9;
  color: #0f172a;
}
.theme-table table.m-tb { font-size: 11.5px; }
.theme-table table.m-tb th { background: #dbeafe; color: #1e3a8a; }
.theme-table table.m-tb tbody tr:nth-child(even) { background: rgba(14, 165, 233, .05); }
.theme-table .m-scroll { max-height: 62vh; }

/* 6. 命中率圆环 · 薄荷渐变 */
.theme-ring {
  --m-accent: #10b981; --m-accent-fg: #fff;
  --m-card: rgba(255, 255, 255, .92); --m-text: #064e3b;
  --m-line: rgba(16, 185, 129, .2);
  --m-cell-bg: rgba(16, 185, 129, .08);
  --m-radius: 20px;
  --m-shadow: 0 6px 24px rgba(16, 185, 129, .14);
  --m-c1: #059669; --m-c2: #a7f3d0;
  --m-timer-bg: linear-gradient(135deg, #10b981, #6ee7b7);
  background: linear-gradient(180deg, #ecfdf5, #d1fae5 60%, #ecfdf5);
  color: #064e3b;
}
.theme-ring .m-dot-hit { width: 14px; height: 14px; border-radius: 50%; background: #10b981; }
.theme-ring .m-dot-miss { width: 14px; height: 14px; border-radius: 50%; background: rgba(6, 78, 59, .18); }

/* 7. 亲民蓝 · 圆润大按钮 */
.theme-blue {
  --m-accent: #2563eb; --m-accent-fg: #fff;
  --m-card: #ffffff; --m-text: #1e293b;
  --m-line: rgba(37, 99, 235, .16);
  --m-cell-bg: rgba(37, 99, 235, .07);
  --m-radius: 24px;
  --m-shadow: 0 6px 18px rgba(37, 99, 235, .1);
  --m-c1: #ef4444; --m-c2: #3b82f6;
  --m-timer-bg: linear-gradient(135deg, #2563eb, #60a5fa);
  background: linear-gradient(180deg, #eff6ff, #f8fafc 45%);
  color: #1e293b;
}
.theme-blue .m-badge.hot { background: #2563eb; }
.theme-blue .m-card { padding: 14px; }

/* 8. 黑金 · 尊贵深色 */
.theme-gold {
  --m-accent: #d4af37; --m-accent-fg: #171205;
  --m-card: #14120c; --m-text: #f6ecd0;
  --m-line: rgba(212, 175, 55, .28);
  --m-cell-bg: rgba(212, 175, 55, .08);
  --m-radius: 4px;
  --m-shadow: 0 0 0 1px rgba(212, 175, 55, .28);
  --m-c1: #d4af37; --m-c2: #8a6d1f;
  --m-bar: linear-gradient(180deg, #d4af37, rgba(212, 175, 55, .25));
  --m-timer-bg: linear-gradient(135deg, #1c1708, #d4af37);
  --m-timer-fg: #1a1405;
  --m-bar-bg: rgba(20, 18, 12, .94);
  background: radial-gradient(900px 400px at 50% 0%, #2a2410 0%, #0c0a06 60%);
  color: #f6ecd0;
  font-family: "Georgia", "Songti SC", "SimSun", serif;
}
.theme-gold .m-card { border: 1px solid rgba(212, 175, 55, .35); }
.theme-gold .m-title { color: #d4af37; opacity: 1; letter-spacing: 2px; }
.theme-gold .m-ball { border-radius: 3px; border: 1px solid rgba(212, 175, 55, .5); color: #f0dfae; background: rgba(212, 175, 55, .08); }
.theme-gold .m-ball.sum { background: #d4af37; color: #171205; }
.theme-gold .m-big .num { color: #d4af37; text-shadow: 0 0 18px rgba(212, 175, 55, .35); }

/* 9. 留白灰 · 极简线条 */
.theme-mono {
  --m-accent: #6b7280; --m-accent-fg: #fff;
  --m-card: transparent; --m-text: #374151;
  --m-line: rgba(107, 114, 128, .22);
  --m-cell-bg: transparent;
  --m-radius: 0;
  --m-shadow: none;
  --m-timer-bg: transparent; --m-timer-fg: #374151;
  --m-c1: #9ca3af; --m-c2: #d1d5db;
  --m-bar: linear-gradient(180deg, #9ca3af, #e5e7eb);
  --m-bar-bg: rgba(255, 255, 255, .95);
  background: #fbfbfc;
  color: #374151;
}
.theme-mono .m-card { border-top: 1px solid rgba(107, 114, 128, .22); padding: 14px 0; margin-bottom: 0; }
.theme-mono .m-timer { border: 1px solid rgba(107, 114, 128, .22); }
.theme-mono .m-timer .value { font-size: 24px; font-weight: 600; }
.theme-mono .m-badge { background: transparent; border: 1px solid rgba(107, 114, 128, .3); }

/* 10. 冷热分析 · 紫粉雷达 */
.theme-heat {
  --m-accent: #a21caf; --m-accent-fg: #fff;
  --m-card: #ffffff; --m-text: #3b0764;
  --m-line: rgba(162, 28, 175, .16);
  --m-cell-bg: rgba(162, 28, 175, .06);
  --m-radius: 16px;
  --m-shadow: 0 8px 22px rgba(162, 28, 175, .12);
  --m-c1: #db2777; --m-c2: #7c3aed;
  --m-bar: linear-gradient(180deg, #db2777, #f9a8d4);
  background: linear-gradient(180deg, #fdf4ff, #f5f3ff 50%, #fdf4ff);
  color: #3b0764;
}
.theme-heat .m-hot { background: linear-gradient(135deg, #db2777, #f472b6); color: #fff; }
.theme-heat .m-cold { background: linear-gradient(135deg, #7c3aed, #a78bfa); color: #fff; }
.theme-heat .m-hot .v, .theme-heat .m-cold .v { color: #fff; }
.theme-heat .m-hot .k, .theme-heat .m-cold .k { color: rgba(255, 255, 255, .85); }

/* 11. 秒表 · 计时器优先 */
.theme-timer {
  --m-accent: #f43f5e; --m-accent-fg: #fff;
  --m-card: #ffffff; --m-text: #1f2937;
  --m-line: rgba(244, 63, 94, .18);
  --m-cell-bg: rgba(244, 63, 94, .06);
  --m-radius: 14px;
  --m-shadow: 0 4px 16px rgba(244, 63, 94, .1);
  --m-timer-bg: linear-gradient(135deg, #f43f5e, #fb7185);
  background: #fff1f2;
}
.theme-timer .m-timer { padding: 22px 12px; border-radius: 20px; }
.theme-timer .m-timer .value { font-size: 54px; letter-spacing: 4px; }
.theme-timer .m-lap { display: flex; gap: 6px; justify-content: center; margin-top: 10px; flex-wrap: wrap; }
.theme-timer .m-lap span {
  font-size: 10px; padding: 3px 8px; border-radius: 999px;
  background: rgba(255, 255, 255, .22);
}

/* 12. 深绿终端 · 位图风 */
.theme-matrix {
  --m-accent: #22c55e; --m-accent-fg: #04140a;
  --m-card: #0a140e; --m-text: #c7f9d6;
  --m-line: rgba(34, 197, 94, .25);
  --m-cell-bg: rgba(34, 197, 94, .07);
  --m-radius: 3px;
  --m-shadow: 0 0 0 1px rgba(34, 197, 94, .2);
  --m-c1: #22c55e; --m-c2: #065f46;
  --m-bar: linear-gradient(180deg, #22c55e, rgba(34, 197, 94, .2));
  --m-timer-bg: #052e1a; --m-timer-fg: #86efac;
  --m-bar-bg: rgba(10, 20, 14, .95);
  background: #04100a;
  color: #c7f9d6;
  font-family: "Consolas", "Courier New", monospace;
}
.theme-matrix table.m-tb th { background: #052e1a; color: #86efac; }
.theme-matrix .m-sq { border-radius: 2px; }
.theme-matrix .m-ball { border-radius: 2px; }

/* 兜底：小屏再紧一点 */
@media (max-width: 400px) {
  .m-wrap { padding: 8px 8px 20px; }
  .m-ball { width: 40px; height: 40px; line-height: 40px; font-size: 19px; }
  .m-big .num { font-size: 78px; }
  .theme-mega .m-big .num { font-size: 104px; }
  .m-cell { padding: 7px 3px; }
  .m-cell .v { font-size: 17px; }
  .m-cell .k { font-size: 9px; }
  .m-bars { height: 70px; }
  .m-bars .b span { font-size: 9px; }
  table.m-tb { font-size: 11px; }
  table.m-tb td, table.m-tb th { padding: 5px 3px; }
  .m-ring { width: 112px; height: 112px; }
  .m-ring .txt b { font-size: 22px; }
  .m-seg button { font-size: 11.5px; padding: 8px 2px; }
  .m-grid { gap: 6px; }
  .m-balls { gap: 4px; }
}