/* ============================================================
   数学忍道 · 皮肤主题 + UI 增强
   在 style.css 之后加载，只覆盖变量与追加样式，不改原文件
   切主题：<html data-theme="konoha|akatsuki|suna|kiri|classic">
   ============================================================ */

/* ================= 一、通用 UI 增强（所有皮肤生效）================= */

/* 卡片层次：细边 + 双层阴影，浅色不脏、深色有托起感 */
.card, .list, .qcard {
  border: .5px solid var(--edge, rgba(255, 255, 255, .05));
  box-shadow: 0 1px 2px rgba(16, 24, 40, .035), 0 8px 22px -12px rgba(16, 24, 40, .16);
}
@media (prefers-color-scheme: dark) {
  .card, .list, .qcard { box-shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 10px 26px -14px rgba(0, 0, 0, .7); }
}

/* Hero：主题渐变 + 扫光 */
.hero {
  background: var(--hero-grad, radial-gradient(120% 140% at 100% 0%, #ff7a1a 0%, #e5420d 38%, #1b1f3b 100%));
  box-shadow: 0 14px 36px -14px var(--hero-shadow, rgba(229, 66, 13, .5));
  isolation: isolate;
}
.hero > * { position: relative; z-index: 2; }
.hero::after {
  z-index: 0;
  background-image: var(--hero-motif);
  filter: var(--hero-motif-filter, none);
}
.hero::before {
  content: ""; position: absolute; inset: -50% -70%; z-index: 1; pointer-events: none;
  background: linear-gradient(112deg, transparent 40%, rgba(255, 255, 255, .14) 50%, transparent 60%);
  animation: heroSweep 7.5s ease-in-out infinite;
}
@keyframes heroSweep { 0%, 52% { transform: translateX(-55%); } 100% { transform: translateX(55%); } }

/* 查克拉条：加流动光 */
.chakra > i { position: relative; overflow: hidden; }
.chakra > i::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
  animation: flow 2.6s linear infinite;
}
@keyframes flow { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* 章节标题：左侧发光竖条 */
.section-h { position: relative; padding-left: 14px; }
.section-h::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 4px; height: 18px; border-radius: 2px; background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
}

/* 按钮：内高光 + 主题色投影 */
.btn { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 5px 14px -6px var(--accent); }
.btn.gray, .btn.tinted { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14); }
.btn:active { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16); }

/* 印章 */
.seal { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 3px 9px -3px rgba(0, 0, 0, .3); }

/* 底部导航：选中项顶部光条 + 图标投影 */
.tabbar a { position: relative; }
.tabbar a.on::after {
  content: ""; position: absolute; top: 0; left: 50%; margin-left: -11px;
  width: 22px; height: 2.5px; border-radius: 0 0 3px 3px;
  background: var(--accent); box-shadow: 0 0 14px var(--accent);
}
.tabbar a.on svg { filter: drop-shadow(0 0 7px var(--tabglow, var(--accent))); }

/* 进度条流动光 */
.bar > i, .mastery > i { position: relative; overflow: hidden; }
.bar > i::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent);
  animation: flow 2.8s linear infinite;
}

/* 分段控件选中：主题色阴影 */
.segmented button.on { box-shadow: 0 2px 8px -2px rgba(0, 0, 0, .18), 0 0 0 .5px var(--edge, transparent); }

/* 选项：更柔和的卡片 */
.opt { box-shadow: 0 1px 2px rgba(16, 24, 40, .03); }

/* 一句话 / 口诀卡：左侧色条 */
.card.tkone { border-left: 3px solid var(--accent); box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 6px 18px -12px rgba(16, 24, 40, .18); }

/* 步骤序号：主题色 */
.steps li::before { background: var(--ink); box-shadow: 0 2px 6px -2px rgba(0, 0, 0, .35); }

/* 皮肤选择器 */
.skinnames { display: flex; flex-direction: column; gap: 0; }
.skinrow { display: flex; align-items: center; gap: 12px; padding: 13px 16px; width: 100%; text-align: left; position: relative; }
.skinrow + .skinrow::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; height: .5px; background: var(--sep); }
.skinrow:active { background: var(--fill); }
.skinrow .sw {
  width: 44px; height: 30px; border-radius: 9px; flex: none; position: relative;
  box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .12), 0 2px 6px -2px rgba(0, 0, 0, .3);
}
.skinrow .sw::after {
  content: ""; position: absolute; right: 5px; bottom: 4px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--sw-dot, #fff); box-shadow: 0 0 8px var(--sw-dot, #fff);
}
.skinrow .grow { flex: 1; min-width: 0; }
.skinrow .t { font-size: 16px; font-weight: 600; }
.skinrow .s { font-size: 12px; color: var(--label2); margin-top: 1px; }
.skinrow .tick { color: var(--accent); font-weight: 700; font-size: 17px; }

/* ================= 二、皮肤变量 ================= */

/* ---------- 1. 木叶 konoha（默认）—— 宣纸 + 火影橙 + 夜色森林 ---------- */
html[data-theme="konoha"] {
  --bg: #f4f0e6;
  --card: #fffdf8;
  --card2: #f0ebdd;
  --label: #171a12;
  --label2: rgba(23, 26, 18, .62);
  --label3: rgba(23, 26, 18, .28);
  --sep: rgba(23, 26, 18, .12);
  --fill: rgba(120, 105, 70, .11);
  --accent: #ef5f0a;
  --accent-soft: rgba(239, 95, 10, .1);
  --ink: #1b2a1d;
  --edge: rgba(180, 160, 110, .16);
  --hero-grad: radial-gradient(130% 150% at 100% 0%, #ffa03a 0%, #e8430c 40%, #16301f 100%);
  --hero-shadow: rgba(232, 67, 12, .42);
  --hero-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='white' d='M50 0l9 41 41 9-41 9-9 41-9-41-41-9 41-9z'/%3E%3Ccircle cx='50' cy='50' r='7' fill='%23e8430c'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  html[data-theme="konoha"] {
    --bg: #0b100d;
    --card: #151c17;
    --card2: #1d2721;
    --label: #f0f5ef;
    --label2: rgba(226, 238, 226, .7);
    --label3: rgba(226, 238, 226, .38);
    --sep: rgba(150, 175, 150, .16);
    --fill: rgba(120, 150, 120, .16);
    --accent: #ff7d1f;
    --accent-soft: rgba(255, 125, 31, .15);
    --ink: #24382a;
    --edge: rgba(140, 175, 140, .16);
    --hero-grad: radial-gradient(130% 150% at 100% 0%, #ff9a2e 0%, #c8370a 42%, #0c1a12 100%);
    --hero-shadow: rgba(255, 120, 30, .3);
    --tabglow: rgba(255, 125, 31, .85);
  }
}

/* ---------- 2. 晓 akatsuki —— 墨黑 + 血红云纹 ---------- */
html[data-theme="akatsuki"] {
  --bg: #f4f1f1;
  --card: #ffffff;
  --card2: #f2eeee;
  --label: #14100f;
  --label2: rgba(20, 16, 15, .6);
  --label3: rgba(20, 16, 15, .28);
  --sep: rgba(20, 16, 15, .12);
  --fill: rgba(110, 95, 95, .1);
  --accent: #c9121d;
  --accent-soft: rgba(201, 18, 29, .09);
  --ink: #14100f;
  --edge: rgba(150, 130, 130, .18);
  --hero-grad: radial-gradient(130% 150% at 100% 0%, #7a1018 0%, #3a0a0e 38%, #0a0708 100%);
  --hero-shadow: rgba(60, 8, 12, .55);
  --hero-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 62'%3E%3Cg fill='%23d81b26'%3E%3Ccircle cx='22' cy='36' r='14'/%3E%3Ccircle cx='46' cy='24' r='19'/%3E%3Ccircle cx='74' cy='27' r='16'/%3E%3Ccircle cx='97' cy='36' r='12'/%3E%3C/g%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  html[data-theme="akatsuki"] {
    --bg: #0a0809;
    --card: #12100f;
    --card2: #1b1817;
    --label: #f5eeee;
    --label2: rgba(235, 220, 220, .7);
    --label3: rgba(235, 220, 220, .38);
    --sep: rgba(180, 140, 140, .14);
    --fill: rgba(150, 110, 110, .14);
    --accent: #ff2d3a;
    --accent-soft: rgba(255, 45, 58, .14);
    --ink: #1e1416;
    --edge: rgba(180, 130, 130, .16);
    --hero-grad: radial-gradient(130% 150% at 100% 0%, #8c1219 0%, #43090d 40%, #060506 100%);
    --hero-shadow: rgba(200, 20, 30, .32);
    --tabglow: rgba(255, 45, 58, .85);
  }
}

/* ---------- 3. 砂隐 suna —— 沙丘金褐 ---------- */
html[data-theme="suna"] {
  --bg: #f8f1e2;
  --card: #fffcf4;
  --card2: #f2e8d4;
  --label: #1f180c;
  --label2: rgba(31, 24, 12, .6);
  --label3: rgba(31, 24, 12, .28);
  --sep: rgba(31, 24, 12, .13);
  --fill: rgba(160, 130, 80, .13);
  --accent: #a96a05;
  --accent-soft: rgba(169, 106, 5, .11);
  --ink: #33260f;
  --edge: rgba(190, 160, 110, .2);
  --hero-grad: radial-gradient(130% 150% at 100% 0%, #dda42f 0%, #a86f0a 42%, #3a2709 100%);
  --hero-shadow: rgba(150, 100, 10, .42);
  --hero-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 70'%3E%3Cg fill='none' stroke='white' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M4 46q16-16 32 0t32 0 32 0 16-8'/%3E%3Cpath d='M4 60q16-16 32 0t32 0 32 0 16-8' opacity='.6'/%3E%3C/g%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  html[data-theme="suna"] {
    --bg: #100d07;
    --card: #1a1610;
    --card2: #241f16;
    --label: #f7f0e2;
    --label2: rgba(240, 226, 200, .7);
    --label3: rgba(240, 226, 200, .38);
    --sep: rgba(190, 165, 120, .15);
    --fill: rgba(170, 140, 90, .16);
    --accent: #f0ad22;
    --accent-soft: rgba(240, 173, 34, .15);
    --ink: #2e2514;
    --edge: rgba(190, 160, 110, .16);
    --hero-grad: radial-gradient(130% 150% at 100% 0%, #e8b234 0%, #a8700a 42%, #100d07 100%);
    --hero-shadow: rgba(240, 173, 34, .28);
    --tabglow: rgba(240, 173, 34, .85);
  }
}

/* ---------- 4. 雾隐 kiri —— 水雾青蓝 ---------- */
html[data-theme="kiri"] {
  --bg: #eef2f4;
  --card: #ffffff;
  --card2: #e8eef1;
  --label: #0e1618;
  --label2: rgba(14, 22, 24, .58);
  --label3: rgba(14, 22, 24, .26);
  --sep: rgba(14, 22, 24, .12);
  --fill: rgba(90, 120, 130, .12);
  --accent: #1c7fa6;
  --accent-soft: rgba(28, 127, 166, .1);
  --ink: #0f2a33;
  --edge: rgba(140, 175, 190, .2);
  --hero-grad: radial-gradient(130% 150% at 100% 0%, #56c6e0 0%, #1c7fa6 42%, #0d2b36 100%);
  --hero-shadow: rgba(28, 127, 166, .38);
  --hero-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 70'%3E%3Cg fill='none' stroke='white' stroke-width='3' stroke-linecap='round'%3E%3Ccircle cx='30' cy='34' r='14'/%3E%3Ccircle cx='56' cy='30' r='10' opacity='.7'/%3E%3Ccircle cx='82' cy='38' r='16'/%3E%3Ccircle cx='104' cy='30' r='8' opacity='.6'/%3E%3C/g%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  html[data-theme="kiri"] {
    --bg: #070c0e;
    --card: #111a1e;
    --card2: #19252a;
    --label: #e9f4f6;
    --label2: rgba(214, 236, 240, .7);
    --label3: rgba(214, 236, 240, .38);
    --sep: rgba(140, 190, 200, .15);
    --fill: rgba(110, 160, 175, .15);
    --accent: #3fb6dd;
    --accent-soft: rgba(63, 182, 221, .14);
    --ink: #123744;
    --edge: rgba(130, 180, 195, .16);
    --hero-grad: radial-gradient(130% 150% at 100% 0%, #46b6d4 0%, #16708f 40%, #070c0e 100%);
    --hero-shadow: rgba(63, 182, 221, .26);
    --tabglow: rgba(63, 182, 221, .85);
  }
}


/* ---------- 6. 鸣人 naruto —— 金发橙衣 + 角色立绘 ---------- */
html[data-theme="naruto"] {
  --bg: #fdf5ea;
  --card: #ffffff;
  --card2: #f8ecdd;
  --label: #1a1510;
  --label2: rgba(26, 21, 16, .62);
  --label3: rgba(26, 21, 16, .28);
  --sep: rgba(26, 21, 16, .12);
  --fill: rgba(150, 110, 70, .12);
  --accent: #f4700c;
  --accent-soft: rgba(244, 112, 12, .1);
  --ink: #1f3a5f;
  --edge: rgba(200, 160, 110, .2);
  --hero-grad: radial-gradient(130% 150% at 100% 0%, #ffb02e 0%, #f4700c 38%, #1f3a5f 100%);
  --hero-shadow: rgba(244, 112, 12, .42);
  --hero-motif: none;
}
@media (prefers-color-scheme: dark) {
  html[data-theme="naruto"] {
    --bg: #120d09;
    --card: #1c1611;
    --card2: #251d16;
    --label: #fdf2e6;
    --label2: rgba(250, 235, 220, .68);
    --label3: rgba(250, 235, 220, .34);
    --sep: rgba(200, 165, 130, .16);
    --fill: rgba(180, 130, 90, .16);
    --accent: #ff8a2a;
    --accent-soft: rgba(255, 138, 42, .16);
    --ink: #24405f;
    --edge: rgba(210, 170, 130, .12);
    --hero-grad: radial-gradient(130% 150% at 100% 0%, #ffa428 0%, #d25a08 40%, #10203a 100%);
    --hero-shadow: rgba(255, 130, 30, .32);
    --tabglow: rgba(255, 138, 42, .85);
  }
}

/* 角色立绘位（仅鸣人皮肤显示） */
.hero-char { display: none; position: absolute; right: 2px; top: -2px; width: 86px; height: auto; z-index: 3; pointer-events: none; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .28)); }
html[data-theme="naruto"] .hero-char { display: block; }
html[data-theme="naruto"] .hero .rank,
html[data-theme="naruto"] .hero .rank-name,
html[data-theme="naruto"] .hero .rank-desc { padding-right: 92px; }
html[data-theme="naruto"] .hero { overflow: visible; }
html[data-theme="naruto"] .hero::before { border-radius: 20px; }

/* ---------- 5. 原版 classic —— Apple 极简（与旧版完全一致）---------- */
html[data-theme="classic"] {
  --bg: #f2f2f7;
  --card: #ffffff;
  --card2: #f2f2f7;
  --label: #000000;
  --label2: rgba(60, 60, 67, .62);
  --label3: rgba(60, 60, 67, .32);
  --sep: rgba(60, 60, 67, .18);
  --fill: rgba(120, 120, 128, .12);
  --accent: #ff6a00;
  --accent-soft: rgba(255, 106, 0, .12);
  --ink: #1b1f3b;
  --edge: rgba(120, 120, 128, .10);
  --hero-grad: radial-gradient(120% 140% at 100% 0%, #ff7a1a 0%, #e5420d 38%, #1b1f3b 100%);
  --hero-shadow: rgba(229, 66, 13, .3);
  --hero-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='white' d='M50 0l9 41 41 9-41 9-9 41-9-41-41-9 41-9z'/%3E%3Ccircle cx='50' cy='50' r='7' fill='%23e5420d'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  html[data-theme="classic"] {
    --bg: #000000;
    --card: #1c1c1e;
    --card2: #2c2c2e;
    --label: #ffffff;
    --label2: rgba(235, 235, 245, .62);
    --label3: rgba(235, 235, 245, .3);
    --sep: rgba(84, 84, 88, .55);
    --fill: rgba(120, 120, 128, .24);
    --accent: #ff7a1a;
    --accent-soft: rgba(255, 122, 26, .18);
    --ink: #3a3f6b;
    --edge: rgba(255, 255, 255, .06);
    --hero-grad: radial-gradient(120% 140% at 100% 0%, #ff7a1a 0%, #c2370a 40%, #10142c 100%);
    --hero-shadow: rgba(255, 122, 26, .26);
    --tabglow: rgba(255, 122, 26, .85);
  }
}


/* Hero 内数据块：压暗底 + 文字阴影，小字号更清楚 */
.hero-stats div { background: rgba(0, 0, 0, .22); }
.hero-stats b { text-shadow: 0 1px 3px rgba(0, 0, 0, .22); }
.hero-stats span { opacity: .93; }
.hero .meta { opacity: .95; }

/* 兜底：动画被系统禁用/中断时，页面不能停在半透明 */
.view { animation-fill-mode: both; }


/* ---------- 深色可读性统一增强 ---------- */
@media (prefers-color-scheme: dark) {
  .chakra { background: rgba(255, 255, 255, .3); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .18); }
  .hero-stats div { background: rgba(0, 0, 0, .26); }
  .card, .list, .qcard { border-color: var(--edge); }
}
.mission .dot { border-color: var(--label3); }
.hint, .row .s, .fnote { color: var(--label2); }


/* 减少孤字、孤标点 */
.kp-points li, .qbody, .steps li, .bub p, .tkone .t { text-wrap: pretty; }
/* 考点页底部留白，保证最后一条能滚出导航栏 */
.view { padding-bottom: calc(var(--tabh) + var(--safe-b) + 110px); }


/* 深色下角色轮廓光，避免橙衣与橙卡融合 */
@media (prefers-color-scheme: dark) {
  .hero-char { filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, .38)) drop-shadow(0 4px 12px rgba(0, 0, 0, .5)); }
}


/* ================= 三、角色互动 ================= */

/* 情绪：默认只显示当前表情 */
.hero-char .m { display: none; }
.hero-char[data-mood="idle"] .m-idle,
.hero-char[data-mood="happy"] .m-happy,
.hero-char[data-mood="sad"] .m-sad,
.hero-char[data-mood="levelup"] .m-levelup { display: inline; }

/* 动作：开心跳、难过垂、升级转 */
.hero-char[data-mood="happy"] { animation: charHop .62s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes charHop {
  0% { transform: translateY(0) rotate(0); }
  28% { transform: translateY(-13px) rotate(-5deg); }
  58% { transform: translateY(0) rotate(3deg); }
  78% { transform: translateY(-4px) rotate(-1deg); }
  100% { transform: none; }
}
.hero-char[data-mood="sad"] { animation: charDroop .62s ease; }
@keyframes charDroop {
  0%, 100% { transform: none; }
  25% { transform: translateY(4px) rotate(-2deg); }
  62% { transform: translateY(3px) rotate(2deg); }
}
.hero-char[data-mood="levelup"] { animation: charLevel 1s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes charLevel {
  0% { transform: scale(1) rotate(0); }
  35% { transform: scale(1.16) rotate(9deg); }
  65% { transform: scale(1.1) rotate(-7deg); }
  100% { transform: none; }
}

/* 对话气泡 */
.char-bubble {
  position: absolute; right: 94px; top: 2px; z-index: 5; max-width: 150px;
  padding: 7px 11px; border-radius: 13px; font-size: 13px; font-weight: 700; line-height: 1.28;
  background: #fff; color: #1a1510; box-shadow: 0 6px 18px rgba(0, 0, 0, .2);
  opacity: 0; transform: translateX(6px) scale(.86); transform-origin: right center;
  transition: opacity .2s, transform .24s cubic-bezier(.2, 1.5, .4, 1); pointer-events: none;
}
.char-bubble.show { opacity: 1; transform: none; }
.char-bubble::after {
  content: ""; position: absolute; right: -4px; top: 15px; width: 9px; height: 9px;
  background: #fff; transform: rotate(45deg); border-radius: 2px;
}
@media (prefers-color-scheme: dark) {
  .char-bubble { background: #2a2118; color: #ffe9c9; }
  .char-bubble::after { background: #2a2118; }
}

/* 查克拉飘字 */
.xp-float {
  position: absolute; right: 100px; top: 66px; z-index: 6; pointer-events: none;
  font-size: 19px; font-weight: 800; letter-spacing: .5px; color: #ffe08a;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .45);
  animation: xpUp 1.5s cubic-bezier(.2, .8, .3, 1) forwards;
}
@keyframes xpUp {
  0% { opacity: 0; transform: translateY(8px) scale(.7); }
  22% { opacity: 1; transform: translateY(0) scale(1.12); }
  68% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-42px) scale(1.05); }
}

/* 答对时卡片绿光扩散 */
.qcard.ok-flash { animation: cardOk .72s ease-out; }
@keyframes cardOk {
  0% { box-shadow: 0 0 0 0 rgba(52, 199, 89, .5); }
  100% { box-shadow: 0 0 0 16px rgba(52, 199, 89, 0); }
}


/* 角色成长装扮：stage 0 便装 → 1 查克拉光 → 2 忍者马甲 → 3 披风 → 4 金光 */
.hero-char .gear { display: none; }
.hero-char[data-stage="1"] .gear-aura,
.hero-char[data-stage="2"] .gear-aura,
.hero-char[data-stage="2"] .gear-vest,
.hero-char[data-stage="3"] .gear-aura,
.hero-char[data-stage="3"] .gear-vest,
.hero-char[data-stage="3"] .gear-cloak,
.hero-char[data-stage="4"] .gear-aura,
.hero-char[data-stage="4"] .gear-vest,
.hero-char[data-stage="4"] .gear-cloak { display: inline; }
.hero-char[data-stage="4"] .gear-aura { animation: auraPulse 2.8s ease-in-out infinite; }
@keyframes auraPulse { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }


/* 成就墙 */
.achgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ach {
  background: var(--card); border-radius: 12px; padding: 12px 6px 10px; text-align: center;
  opacity: .42; border: 1.5px solid transparent; transition: opacity .25s, border-color .25s, box-shadow .25s;
}
.ach.on { opacity: 1; border-color: var(--accent); background: linear-gradient(180deg, var(--accent-soft), var(--card)); box-shadow: 0 5px 16px -10px var(--accent); }
.ach .ai { font-size: 20px; line-height: 1.1; font-weight: 800; color: var(--accent); }
.ach.on .ai { text-shadow: 0 0 12px var(--accent); }
.ach .an { font-size: 12.5px; font-weight: 700; margin-top: 5px; }
.ach .ad { font-size: 10.5px; color: var(--label2); margin-top: 2px; line-height: 1.25; }

/* 减少动效偏好：尊重系统设置 */
@media (prefers-reduced-motion: reduce) {
  .hero::before, .chakra > i::after, .bar > i::after, .hero::after { animation: none !important; }
}