/* ==========================================================================
   vue28 手机版 · 12 套主题皮肤
   设计依据：ui-ux-pro-max 设计系统（Minimalism & Swiss Style）
     · 主色 #2563EB（trust blue）/ 强调 #EA580C（orange CTA）
     · 中性色 #F8FAFC / #FFFFFF / #E2E8F0 / #475569 / #1E293B
     · 正文对比度 ≥ 4.5:1，卡片层次统一（半径/描边/投影成体系，不随手写）
     · 字体：标题 Fira Code（数据/技术感），正文 Fira Sans + 系统中文字体
   每套皮肤只改"色彩令牌 + 字体 + 圆角/描边"，结构与间距由 mobile.css 统一控制。
   ========================================================================== */

/* ---------------------------------------------------------------- 1 橙金 */
.theme-hero {
  --m-brand: #EA580C;
  --m-brand-fg: #FFFFFF;
  --m-fg: #1E293B;
  --m-muted: #475569;
  --m-subtle: #64748B;
  --m-bg: #F8FAFC;
  --m-card: #FFFFFF;
  --m-border: #E2E8F0;
  --m-soft: #F1F5F9;
  --m-radius: 16px;
  --m-radius-sm: 12px;
  --m-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .05);
  --m-accent-soft: #FFF1E7;
  --m-ok: #15803D;
  --m-bad: #B91C1C;
  --m-mono: "Fira Code", ui-monospace, monospace;
  background: var(--m-bg);
}
.theme-hero .m-hero-card {
  background: linear-gradient(160deg, #EA580C 0%, #F97316 55%, #FB923C 100%);
  color: #fff;
}

/* ---------------------------------------------------------------- 2 霓虹 */
.theme-neon {
  --m-brand: #22D3EE;
  --m-brand-fg: #04121A;
  --m-fg: #E2F5FA;
  --m-muted: #94B4C2;
  --m-subtle: #7A97A6;
  --m-bg: #050B12;
  --m-card: #0B1620;
  --m-border: rgba(34, 211, 238, .22);
  --m-soft: rgba(34, 211, 238, .07);
  --m-radius: 8px;
  --m-radius-sm: 6px;
  --m-shadow: 0 0 0 1px rgba(34, 211, 238, .14), 0 10px 30px rgba(0, 0, 0, .5);
  --m-accent-soft: rgba(34, 211, 238, .12);
  --m-ok: #34D399;
  --m-bad: #FB7185;
  --m-mono: "Fira Code", ui-monospace, monospace;
  background: radial-gradient(900px 420px at 50% -10%, #0A2530 0%, #050B12 60%);
  color: var(--m-fg);
}
.theme-neon .m-hero-card { background: linear-gradient(160deg, #0E2C38, #123A46); color: #E2F5FA; }

/* ---------------------------------------------------------------- 3 信息流 */
.theme-feed {
  --m-brand: #4F46E5;
  --m-brand-fg: #FFFFFF;
  --m-fg: #1E293B;
  --m-muted: #475569;
  --m-subtle: #64748B;
  --m-bg: #F7F7FB;
  --m-card: #FFFFFF;
  --m-border: #E7E7F2;
  --m-soft: #F4F4FA;
  --m-radius: 16px;
  --m-radius-sm: 12px;
  --m-shadow: 0 1px 2px rgba(30, 41, 59, .04), 0 8px 24px rgba(79, 70, 229, .06);
  --m-accent-soft: #EEF0FF;
  --m-ok: #15803D;
  --m-bad: #B91C1C;
  --m-mono: "Fira Code", ui-monospace, monospace;
  background: var(--m-bg);
}

/* ---------------------------------------------------------------- 4 极简 */
.theme-mega {
  --m-brand: #1E293B;
  --m-brand-fg: #FFFFFF;
  --m-fg: #0F172A;
  --m-muted: #475569;
  --m-subtle: #64748B;
  --m-bg: #FFFFFF;
  --m-card: #FFFFFF;
  --m-border: #E9EDF3;
  --m-soft: #F6F8FB;
  --m-radius: 12px;
  --m-radius-sm: 10px;
  --m-shadow: none;
  --m-accent-soft: #F6F8FB;
  --m-ok: #15803D;
  --m-bad: #B91C1C;
  --m-mono: "Fira Code", ui-monospace, monospace;
  background: var(--m-bg);
}
.theme-mega .m-card { border-bottom: 1px solid var(--m-border); border-radius: 0; }

/* ---------------------------------------------------------------- 5 数据表 */
.theme-table {
  --m-brand: #0284C7;
  --m-brand-fg: #FFFFFF;
  --m-fg: #0F172A;
  --m-muted: #475569;
  --m-subtle: #64748B;
  --m-bg: #F1F5F9;
  --m-card: #FFFFFF;
  --m-border: #E2E8F0;
  --m-soft: #F8FAFC;
  --m-radius: 10px;
  --m-radius-sm: 8px;
  --m-shadow: 0 1px 2px rgba(15, 23, 42, .06);
  --m-accent-soft: #E0F2FE;
  --m-ok: #15803D;
  --m-bad: #B91C1C;
  --m-mono: "Fira Code", ui-monospace, monospace;
  background: var(--m-bg);
}
.theme-table table.m-tb thead th { background: #E0F2FE; color: #075985; }
.theme-table table.m-tb tbody tr:nth-child(even) { background: #F8FAFC; }

/* ---------------------------------------------------------------- 6 命中率 */
.theme-ring {
  --m-brand: #059669;
  --m-brand-fg: #FFFFFF;
  --m-fg: #064E3B;
  --m-muted: #3F6B5C;
  --m-subtle: #567F70;
  --m-bg: #F2FBF7;
  --m-card: #FFFFFF;
  --m-border: #D7EFE4;
  --m-soft: #F0FAF5;
  --m-radius: 16px;
  --m-radius-sm: 12px;
  --m-shadow: 0 1px 2px rgba(6, 78, 59, .05), 0 10px 26px rgba(5, 150, 105, .07);
  --m-accent-soft: #E7F8F0;
  --m-ok: #047857;
  --m-bad: #B91C1C;
  --m-mono: "Fira Code", ui-monospace, monospace;
  background: var(--m-bg);
}

/* ---------------------------------------------------------------- 7 亲民蓝 */
.theme-blue {
  --m-brand: #2563EB;
  --m-brand-fg: #FFFFFF;
  --m-fg: #1E293B;
  --m-muted: #475569;
  --m-subtle: #64748B;
  --m-bg: #F5F8FF;
  --m-card: #FFFFFF;
  --m-border: #E1E9F8;
  --m-soft: #EFF4FF;
  --m-radius: 18px;
  --m-radius-sm: 14px;
  --m-shadow: 0 1px 2px rgba(37, 99, 235, .05), 0 10px 26px rgba(37, 99, 235, .07);
  --m-accent-soft: #E8EFFF;
  --m-ok: #15803D;
  --m-bad: #B91C1C;
  --m-mono: "Fira Code", ui-monospace, monospace;
  background: var(--m-bg);
}

/* ---------------------------------------------------------------- 8 黑金 */
.theme-gold {
  --m-brand: #D4AF37;
  --m-brand-fg: #17120A;
  --m-fg: #F5EEDA;
  --m-muted: #C3B695;
  --m-subtle: #A2957A;
  --m-bg: #0C0A06;
  --m-card: #141109;
  --m-border: rgba(212, 175, 55, .26);
  --m-soft: rgba(212, 175, 55, .07);
  --m-radius: 6px;
  --m-radius-sm: 4px;
  --m-shadow: 0 0 0 1px rgba(212, 175, 55, .16), 0 12px 30px rgba(0, 0, 0, .45);
  --m-accent-soft: rgba(212, 175, 55, .12);
  --m-ok: #86EFAC;
  --m-bad: #FCA5A5;
  --m-mono: "Fira Code", ui-monospace, monospace;
  background: radial-gradient(820px 380px at 50% 0%, #221C0C 0%, #0C0A06 62%);
  color: var(--m-fg);
}
.theme-gold .m-card-title,
.theme-gold .m-title { color: #D4AF37; letter-spacing: .06em; }
.theme-gold .m-hero-card { background: linear-gradient(160deg, #1C1708, #2A230F); color: #F5EEDA; }

/* ---------------------------------------------------------------- 9 留白 */
.theme-mono {
  --m-brand: #475569;
  --m-brand-fg: #FFFFFF;
  --m-fg: #334155;
  --m-muted: #64748B;
  --m-subtle: #94A3B8;
  --m-bg: #FCFCFD;
  --m-card: #FFFFFF;
  --m-border: #EDF0F4;
  --m-soft: #F8FAFC;
  --m-radius: 8px;
  --m-radius-sm: 6px;
  --m-shadow: none;
  --m-accent-soft: #F8FAFC;
  --m-ok: #15803D;
  --m-bad: #B91C1C;
  --m-mono: "Fira Code", ui-monospace, monospace;
  background: var(--m-bg);
}
.theme-mono .m-card { border: 1px solid var(--m-border); box-shadow: none; }
.theme-mono .m-timer-box { background: #FFFFFF; border: 1px solid var(--m-border); color: var(--m-fg); }

/* ---------------------------------------------------------------- 10 冷热 */
.theme-heat {
  --m-brand: #A21CAF;
  --m-brand-fg: #FFFFFF;
  --m-fg: #3B0764;
  --m-muted: #5B2A6E;
  --m-subtle: #7A4A8A;
  --m-bg: #FCF7FE;
  --m-card: #FFFFFF;
  --m-border: #F0DFF5;
  --m-soft: #FAF3FC;
  --m-radius: 14px;
  --m-radius-sm: 10px;
  --m-shadow: 0 1px 2px rgba(59, 7, 100, .04), 0 10px 26px rgba(162, 28, 175, .07);
  --m-accent-soft: #F8E8FC;
  --m-ok: #15803D;
  --m-bad: #B91C1C;
  --m-mono: "Fira Code", ui-monospace, monospace;
  background: var(--m-bg);
}

/* ---------------------------------------------------------------- 11 计时 */
.theme-timer {
  --m-brand: #E11D48;
  --m-brand-fg: #FFFFFF;
  --m-fg: #1E293B;
  --m-muted: #475569;
  --m-subtle: #64748B;
  --m-bg: #FFF7F8;
  --m-card: #FFFFFF;
  --m-border: #FBE0E5;
  --m-soft: #FFF1F3;
  --m-radius: 16px;
  --m-radius-sm: 12px;
  --m-shadow: 0 1px 2px rgba(225, 29, 72, .05), 0 10px 26px rgba(225, 29, 72, .07);
  --m-accent-soft: #FFE8ED;
  --m-ok: #15803D;
  --m-bad: #B91C1C;
  --m-mono: "Fira Code", ui-monospace, monospace;
  background: var(--m-bg);
}
.theme-timer .m-timer-box { background: linear-gradient(160deg, #E11D48, #F43F5E); color: #fff; }
.theme-timer .m-timer-value { font-size: 56px; }

/* ---------------------------------------------------------------- 12 终端 */
.theme-matrix {
  --m-brand: #22C55E;
  --m-brand-fg: #04140A;
  --m-fg: #D7FBE4;
  --m-muted: #8FD3A8;
  --m-subtle: #6FAE87;
  --m-bg: #04100A;
  --m-card: #0A1710;
  --m-border: rgba(34, 197, 94, .22);
  --m-soft: rgba(34, 197, 94, .07);
  --m-radius: 6px;
  --m-radius-sm: 4px;
  --m-shadow: 0 0 0 1px rgba(34, 197, 94, .16);
  --m-accent-soft: rgba(34, 197, 94, .12);
  --m-ok: #4ADE80;
  --m-bad: #F87171;
  --m-mono: "Fira Code", ui-monospace, monospace;
  background: var(--m-bg);
  color: var(--m-fg);
}
.theme-matrix table.m-tb thead th { background: #062012; color: #86EFAC; }
.theme-matrix .m-hero-card { background: #062012; color: #D7FBE4; }