* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

:root {
  /* ================= 🎨 核心色彩 (暖阳纸张 - Day Mode) ================= */
  --primary: #8b7967; 
  --primary-container: #ede7de; 
  --on-primary: #ffffff;

  --surface: #eae4db; 
  --surface-container: #f6f4ef; 
  --on-surface: #38322c;

  --outline: #d6cec3; 
  --tertiary: #6b847b;        

  --accent-red: #ba6b68; 
  --accent-red-bg: #f5eaea; 
  --accent-green-bg: #e8f0ea;

  /* =================  词性胶囊 (Day Mode)  ================= */
  --bg-verb: #d6e8f0; --bg-noun: #f2e2d5; --bg-adj: #f2dadf; --bg-adj-na: #f2ebd5; --bg-adv: #d5eedc; --bg-pronoun: #d5ecec; --bg-other: #e3e4e3;      

  /* 物理材质引擎 (Day Mode) */
  /* 六层缓动弥散阴影 */
  --paper-shadow: 
    0 2px 4px rgba(115, 102, 88, 0.02),
    0 4px 8px rgba(115, 102, 88, 0.02),
    0 8px 16px rgba(115, 102, 88, 0.04),
    0 16px 32px rgba(115, 102, 88, 0.04),
    0 32px 64px rgba(115, 102, 88, 0.04);
  
    /* 边缘高光：采用 30% 低透明度与 2px 漫反射还原哑光纸张厚度 */
  --inner-sheen: inset 0 1px 2px rgba(255, 255, 255, 0.3);

  --ink-emboss: rgba(255, 255, 255, 0.7);
  --ink-deboss: rgba(0, 0, 0, 0.08);

  --space-xs: 8px; --space-sm: 16px; --space-md: 24px; --space-lg: 32px;
  --radius-sm: 14px; --radius-md: 20px; --radius-lg: 28px; --radius-full: 999px; 
  
  --font-ui: system-ui, -apple-system, "PingFang SC", sans-serif;
  --font-jp-serif: 'Noto Serif JP', serif; --font-jp-sans: 'Noto Sans JP', sans-serif;
  
  --spring-bouncy: cubic-bezier(0.34, 1.56, 0.64, 1);
  --spring-snappy: cubic-bezier(0.22, 1, 0.36, 1);
  --spring-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --spring: var(--spring-snappy);
}

[data-theme="dark"] {
  /* =================  核心色彩 (极夜墨迹 - Dark Mode) ================= */
  --primary: #d6c3b0; 
  --primary-container: #3d352e; 
  --on-primary: #1a1816;      

  /* 采用深褐黑，增加视觉深度而非死黑 */
  --surface: #141210; 
  --surface-container: #1c1a18; 
  --on-surface: #e8e2d9;      

  --outline: #4a443f; 
  --tertiary: #a4c7b6;        

  --accent-red: #ffb4a9; 
  --accent-red-bg: #3d1416; 
  --accent-green-bg: #142b1f; 

  /* 物理材质引擎 (Dark Mode) */
  --paper-shadow: 
    0 4px 8px rgba(0, 0, 0, 0.3),
    0 12px 24px rgba(0, 0, 0, 0.4),
    0 24px 48px rgba(0, 0, 0, 0.5);
  
  /* 暗色模式下的微弱切光，配合漫反射柔化 */
  --inner-sheen: inset 0 1px 2px rgba(255, 255, 255, 0.05);
  --ink-emboss: rgba(255, 255, 255, 0.03);
  --ink-deboss: rgba(0, 0, 0, 0.6);

  /* =================  词性胶囊 (Dark Mode) ================= */
  --bg-verb: #1a3a4a; --bg-noun: #4a2a1a; --bg-adj: #4a1a2a;        
  --bg-adj-na: #433d1a; --bg-adv: #1a3d2a; --bg-pronoun: #1a3d3d; --bg-other: #2a2a2a;      
}


body.modal-open { overflow: hidden; }

body { 
  font-family: var(--font-ui); background-color: var(--surface); color: var(--on-surface); 
  margin: 0; overflow-x: hidden;
  line-height: 1.6; letter-spacing: 0.02em; 
  
  /* 防误触 */
  overscroll-behavior-y: none; /* 彻底封杀浏览器的下拉刷新，保护复习进度 */
  -webkit-user-select: none; user-select: none; /* 全局禁止长按选中文字，保障极速连点的丝滑感 */
  -webkit-touch-callout: none; /* 彻底禁用 iOS 长按弹出菜单 */
}

/* 给真正需要复制的文字（如大单词、详情页日文）开个绿灯 */
.word-main, .dt-word, input, textarea {
  -webkit-user-select: text; user-select: text;
}

/* 全局和纸噪点纹理 */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyBAMAAADsEZWCAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QTQwM0M2MzI1RUU1MTFFMkEyMDZBRTZGMUU4MjQyQzUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QTQwM0M2MzM1RUU1MTFFMkEyMDZBRTZGMUU4MjQyQzUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpBNDAzQzYzMDVFRTUxMUUyQTIwNkFFNkYxRTgyNDJDNSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpBNDAzQzYzMTVFRTUxMUUyQTIwNkFFNkYxRTgyNDJDNSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PruKjXwAAAB6SURBVHjaYvz//z8DKYCJgZSAEQ11QIKRCw2NGEFqGBgYGBrxydHDEg1FwMAQTMh7DAyMWHQzMDCi6wRJMzAw4NItwMDIiF/3cAKGxv9AMgMDAwOuAxi2MTAwonN6IBgMDIwX8PkTwwUGBkYshhkYGBixyNLC/3+MDKiYAwgwAAM4c2I2Bv26AAAAAElFTkSuQmCC");
  background-repeat: repeat;
  background-size: 100px 100px;
  opacity: 0.08; mix-blend-mode: multiply;
}
[data-theme="dark"] body::after { opacity: 0.15; mix-blend-mode: overlay; }

/* ==========================================
   全局布局与导航架构
   ========================================== */

.app-container { 
  max-width: 500px; margin: 0 auto; position: relative;
  padding-top: calc(104px + env(safe-area-inset-top));
  padding-bottom: max(calc(90px + env(safe-area-inset-bottom)), 100px);
  padding-left: var(--space-sm); padding-right: var(--space-sm);
  /* 空间景深过渡引擎：监听缩放、圆角与滤镜 */
  transition: transform 0.5s var(--spring-snappy), border-radius 0.5s var(--spring-smooth), filter 0.5s var(--spring-smooth);
  transform-origin: center top; /* 锚定顶部，模拟底部下沉 */
  will-change: transform, border-radius, filter;
}

/*  iOS Native 级空间退行状态 */
body.modal-open .app-container {
  transform: scale(0.94) translateY(12px); /* 空间退行并伴随微量物理下沉 */
  filter: brightness(0.85) contrast(1.1) saturate(0.9); /* 模拟空间距离产生的压暗与低饱和度感 */
  border-radius: var(--radius-lg) var(--radius-lg) 0 0; /* 顶部圆角收束 */
  overflow: hidden; /* 强制裁剪圆角边缘 */
  pointer-events: none; /* 禁用背景交互 */
}

/* ==========================================
     顶栏 (Header) 样式及滚动阴影状态
     ========================================== */
  .global-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    /* VisionOS 级琉璃层：引入 saturate 增强通透感 */
    background: rgba(251, 250, 245, 0.75); 
    backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%);
    display: flex; justify-content: space-between; align-items: center;
    padding: calc(14px + env(safe-area-inset-top)) var(--space-sm) 14px;
    border-bottom: 0.5px solid rgba(139, 121, 103, 0.1);
    transition: transform 0.5s var(--spring-snappy), filter 0.5s var(--spring-smooth), box-shadow 0.3s var(--spring-smooth);
    transform-origin: center top;
  }

[data-theme="dark"] .global-header { 
    background: rgba(20, 18, 16, 0.75); 
    border-bottom-color: rgba(255, 255, 255, 0.05);
}

  /* 景深同步：顶栏随背景层级缩小 */
  body.modal-open .global-header {
    transform: scale(0.94);
    filter: brightness(0.85);
  }


/* 滚动时的阴影悬浮状态 (白天) */
.global-header.scrolled {
  box-shadow: 0 4px 20px var(--paper-shadow); 
  border-bottom-color: transparent;
}

/* 夜间模式的基础背景色 */
[data-theme="dark"] .global-header { 
  background: rgba(26, 24, 22, 0.85); 
  border-color: rgba(255,255,255,0.05); 
}

/* 滚动时的阴影悬浮状态 (夜间) */
[data-theme="dark"] .global-header.scrolled {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  border-bottom-color: transparent;
}

.global-header h2 { 
  color: var(--primary); font-weight: 800; margin: 0; font-size: 1.6rem; 
  display: flex; align-items: center;
  line-height: 1;
}

.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000;
  background: rgba(246, 244, 239, 0.85); 
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  display: flex; justify-content: space-around; align-items: center;
  padding-top: 12px; 
  padding-bottom: max(12px, calc(12px + env(safe-area-inset-bottom)));
  box-shadow: 0 -4px 20px rgba(0,0,0,0.04);
  border-top: 1px solid rgba(139, 121, 103, 0.1);
  /* 景深联动：优化过渡曲线并绑定滤镜 */
  transition: transform 0.5s var(--spring-snappy), filter 0.5s var(--spring-smooth);
  transform-origin: center bottom;
}

/* 景深同步：底部导航跟随背景层级下沉并缩小 */
body.modal-open .bottom-nav {
  transform: scale(0.94) translateY(12px);
  filter: brightness(0.85);
}

[data-theme="dark"] .bottom-nav { 
  background: rgba(36, 33, 30, 0.85); /* 适配夜间模式的半透明度 */
  border-top-color: rgba(255,255,255,0.05); 
}


.nav-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; color: var(--on-surface); opacity: 0.6; cursor: pointer;
  width: 72px; /* 略微拓宽呼吸空间 */
  transition: opacity 0.3s var(--spring-smooth), transform 0.3s var(--spring-bouncy); 
  user-select: none;
}

/* 激活态：视觉重心微沉降 */
.nav-item.active { 
  opacity: 1; 
  color: var(--primary); 
  transform: translateY(1px); 
}

/* 药丸胶囊：物理形变引擎 */
.nav-item .nav-icon { 
  font-size: 1.6rem; 
  padding: 4px 20px; 
  border-radius: var(--radius-full);
  background: transparent;
  transition: 
    background 0.4s var(--spring-smooth), 
    transform 0.4s var(--spring-bouncy), 
    padding 0.4s var(--spring-bouncy),
    color 0.3s var(--spring-smooth); 
}

/* 选中瞬间：药丸弹跳回弹 */
.nav-item.active .nav-icon { 
  background: var(--primary-container); 
  color: var(--primary);
  font-variation-settings: 'FILL' 1; 
  transform: scale(1.05, 0.95); /* 模拟物理挤压：横向微溢出，垂直微压缩 */
  padding: 4px 22px; /* 胶囊长度自适应扩张 */
}

/* 点击震荡：极速响应缩放 */
.nav-item:active { transform: scale(0.92); }

.nav-item .nav-label { 
  font-size: 0.72rem; 
  font-weight: 700; 
  letter-spacing: 0.05em;
  opacity: 0.8;
  transition: all 0.3s var(--spring-smooth); 
  transform: scale(0.95);
}

.nav-item.active .nav-label { 
  font-weight: 900; 
  opacity: 1;
  transform: scale(1); /* 文字随之获得视觉重心 */
}

/* 黑暗模式：胶囊发光度 */
[data-theme="dark"] .nav-item.active .nav-icon {
  background: rgba(214, 195, 176, 0.15); /* 低饱和度呼吸光 */
  box-shadow: 0 0 12px rgba(214, 195, 176, 0.05);
}


.tab-content { animation: tabFadeIn 0.3s ease forwards; display: none; }
.tab-content.active { display: block; }
@keyframes tabFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ==========================================
   组件设计
   ========================================== */

.material-symbols-rounded { font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24; vertical-align: middle; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.icon-text-gap { display: flex; align-items: center; gap: 6px; justify-content: center; }

/* 全局便当盒：高密度哑光瓷板 (High-Density Matte Ceramic Box) */
.card-panel { 
    background: var(--surface-container); 
    /* 钝化几何：全圆角化，确立重力感 */
    border-radius: 24px; 
    padding: var(--space-md); 
    margin-bottom: var(--space-md); 
    /* 剥离纸张的五层虚无悬浮阴影，注入哑光硅胶的极简漫反射厚度 */
    box-shadow: 0 10px 30px rgba(115, 102, 88, 0.06), 0 2px 8px rgba(115, 102, 88, 0.04);
    border: 1px solid rgba(139, 121, 103, 0.05); /* 极弱物理切边 */
    transform: translateZ(0);
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* 极夜墨迹：深色模式底板的引力沉降 */
[data-theme="dark"] .card-panel {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.03);
}


h3 { font-size: 1.05rem; font-weight: 800; color: var(--on-surface); margin-top: 0; padding-bottom: 12px; border-bottom: 2px solid var(--outline); margin-bottom: 20px; display: flex; align-items: center; gap: 8px;}

.glass-icon-btn {
      width: 44px; height: 44px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      background: var(--surface-container); 
      color: var(--primary); flex-shrink: 0;
      cursor: pointer; transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s, border-color 0.25s;
      /* “哑光”双层弥散体系 */
      border: 1px solid rgba(139, 121, 103, 0.04);
      box-shadow: 0 6px 12px rgba(115, 102, 88, 0.06), 0 2px 4px rgba(115, 102, 88, 0.04);
  }
.glass-icon-btn .material-symbols-rounded { font-size: 1.3rem; opacity: 0.85; transition: transform 0.2s; }
.glass-icon-btn:active {
    transform: scale(0.92);
    /*   物理反馈：极速收束阴影，提供高级的“实心沉降”手感 */
    box-shadow: 0 1px 2px rgba(115, 102, 88, 0.12);
    border-color: rgba(139, 121, 103, 0.1);
}
[data-theme="dark"] .glass-icon-btn {
    border: 1px solid rgba(255, 255, 255, 0.03);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2);
}
[data-theme="dark"] .glass-icon-btn:active {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    border-color: rgba(255, 255, 255, 0.06);
}

/* 基础公共样式池：高密度哑光硅胶质感 (High-Density Matte Silicone) */
button:not(.glass-icon-btn), .btn-action, .bs-facade, .vs-btn, .dt-spell-key, .dt-choice-btn {
    background: var(--primary); color: var(--on-primary); font-family: var(--font-ui); 
    font-weight: 800; font-size: 1.05rem; cursor: pointer; 
    display: flex; align-items: center; justify-content: center; gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md); width: 100%;
    /* 剥离廉价塑料内发光，替换为双层柔和漫反射弥散影 */
    box-shadow: 0 6px 12px rgba(115, 102, 88, 0.06), 0 2px 4px rgba(115, 102, 88, 0.04);
    border: 1px solid rgba(139, 121, 103, 0.04); /* 极弱的物理边缘界定 */
    /* 注入阻尼深陷动效曲线 */
    transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* MD3 形态家族 (Shape Families) 强语义收束 */
/* 1. 基础操作指令 -> 药丸全圆角 (Pill Shape)，强力引导点击 */
button:not(.glass-icon-btn) { border-radius: var(--radius-full); }
/* 2. 核心功能矩阵 (学习四大模式、排版视图选项) -> 大圆角容器，传达“包裹区块”概念 */
.btn-action, .vs-btn { border-radius: var(--radius-lg) !important; }
/* 3. 键盘与答题卡 -> 中度圆角，维持实体打字机按键的段落感 */
.dt-spell-key, .dt-choice-btn { border-radius: var(--radius-md); }

/* 统一深陷物理引擎：摒弃冲突的 active 状态，打造极致单一点按沉降 */
button:not(.glass-icon-btn):active:not(:disabled), .btn-action:active:not(:disabled), .bs-facade:active, .vs-btn:active, .dt-spell-key:active, .dt-choice-btn:active {
    transform: scale(0.92); /* 极端物理体积坍缩 */
    /* 阴影极速收束：光晕瞬间消失，化为一道深沉的死黑压痕 */
    box-shadow: 0 1px 2px rgba(115, 102, 88, 0.12);
    border-color: rgba(139, 121, 103, 0.1); /* 边缘微光强化 */
    filter: brightness(0.94);
}


/* 极夜墨迹：高密度哑光硅胶 (Dark Mode High-Density Silicone) */
[data-theme="dark"] button:not(.glass-icon-btn), 
[data-theme="dark"] .btn-action, 
[data-theme="dark"] .dt-spell-key, 
[data-theme="dark"] .dt-choice-btn {
    /* 构建暗场下的双重悬浮深影，根除违和的亮色内发光 */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.03) !important; /* 幽微的月光切边 */
}

/* 极夜物理坍缩：深渊压痕与切边反光 */
[data-theme="dark"] button:not(.glass-icon-btn):active:not(:disabled), 
[data-theme="dark"] .btn-action:active:not(:disabled), 
[data-theme="dark"] .dt-choice-btn:active,
[data-theme="dark"] .dt-spell-key:active {
    /* 极致收束：漫反射化为死黑裂缝 */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-color: rgba(255, 255, 255, 0.06) !important; /* 按压瞬间边缘受光面变亮 */
    filter: brightness(0.94);
}



.filter-test-btn-group {
    display: flex !important;
    flex-direction: row !important; 
    flex-wrap: nowrap !important;   
    align-items: stretch !important; 
    width: 100% !important; 
    margin-bottom: 16px;
    background: var(--tertiary); 
    /*  MD3 组合容器：提升至大圆角，呼应同为大圆角的学习模式卡片 */
    border-radius: var(--radius-lg); 
    box-shadow: 0 4px 12px var(--paper-shadow); overflow: hidden;
}

.filter-test-btn-group button {
    width: auto !important; 
    background: transparent !important; color: var(--on-primary) !important; 
    border-radius: 0 !important; box-shadow: none !important; border: none !important; 
    margin-bottom: 0 !important; transition: background 0.2s ease; padding: 18px 8px;
}
.filter-test-btn-group button:active { transform: none !important; filter: none; background: rgba(0,0,0,0.1) !important; }

.ft-main { flex: 3 !important; font-size: 1.05rem !important; font-weight: 800 !important; white-space: nowrap !important; }
.ft-sub { flex: 1 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; }
.ft-sub .material-symbols-rounded { font-size: 1.8rem !important; }

.ft-divider { width: 1px; background: rgba(255,255,255,0.3); margin: 12px 0; flex-shrink: 0; }

.btn-outline { background: transparent !important; border: 2px solid var(--outline) !important; color: var(--on-surface) !important; box-shadow: 0 4px 12px var(--paper-shadow) !important; }
.btn-small { padding: 10px var(--space-sm); font-size: 0.95rem; width: auto; border-radius: var(--radius-full); }

.btn-srs { background: var(--tertiary) !important; color: #fff !important; border-radius: var(--radius-full) !important;}
[data-theme="dark"] .btn-srs { color: #1a2a22 !important; }

/* MD3 文本域重塑：强化饱满的物理凹槽 */
textarea, input[type="text"] { background: transparent; border: 2px solid var(--outline); border-radius: var(--radius-md); padding: var(--space-sm) 20px; font-size: 0.95rem; width: 100%; margin-bottom: 20px; color: var(--on-surface); font-family: var(--font-ui); outline: none; transition: border-color 0.3s; }
textarea:focus, input[type="text"]:focus { border-color: var(--primary); }
textarea { height: 120px; resize: none; font-size: 0.95rem; border-radius: var(--radius-lg); }

.custom-select-wrapper { position: relative; display: flex; align-items: center; width: 100%; min-width: 0;}

.bs-facade { 
    background: var(--surface-container) !important; 
    border: 2px solid var(--outline) !important; 
    color: var(--primary) !important; 
    border-radius: var(--radius-full) !important; 
    padding: 0 16px 0 20px !important; 
    font-size: 0.95rem !important; 
    font-weight: 700 !important; 
    height: 52px !important; 
    display: inline-flex !important; 
    justify-content: space-between !important; 
    min-width: 0;
    /* 视觉降噪：强制抹除全局按钮的凸起投影，克隆搜索框的微弱内嵌凹槽 */
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.02) !important;
}

/* 扁平化按压反馈：阻止继承全局大按钮的夸张缩放，改为略微加深的凹槽感 */
.bs-facade:active {
    transform: scale(0.98) !important;
    box-shadow: inset 0 4px 8px rgba(0,0,0,0.05) !important;
}

/* 极夜墨迹：深色模式下的抗噪点适配 */
[data-theme="dark"] .bs-facade {
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.2) !important;
}

[data-theme="dark"] .bs-facade:active {
    box-shadow: inset 0 4px 8px rgba(0,0,0,0.4) !important;
}

.bs-facade-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; display: flex; align-items: center; gap: 4px;}


.flex-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 20px;}

/* 数据面板：内嵌实体小瓷片 (Embedded Ceramic Tiles) */
.stats-grid { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px;}

.stat-item { 
    background: var(--primary-container); 
    border-radius: 20px; /* 圆润包裹，呼应外部大便当盒 */
    padding: var(--space-sm) var(--space-xs); 
    flex: 1; text-align: center; min-width: 70px; 
    border: 1px solid rgba(139, 121, 103, 0.04);
    box-shadow: 0 4px 12px rgba(115, 102, 88, 0.04);
    transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
    cursor: pointer;
}

[data-theme="dark"] .stat-item {
    border-color: rgba(255, 255, 255, 0.03);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* 赋予静态统计块微微的触觉反馈基因，使其具有“可捏取”的玩具感 */
.stat-item:active {
    transform: scale(0.92);
    box-shadow: 0 1px 2px rgba(115, 102, 88, 0.12);
    filter: brightness(0.96);
}
[data-theme="dark"] .stat-item:active {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    border-color: rgba(255, 255, 255, 0.06);
    filter: brightness(0.92);
}

.stat-number { font-size: 1.6rem; font-weight: 800; color: var(--primary); line-height: 1.2; font-family: var(--font-jp-sans);}
.stat-label { font-size: 0.75rem; opacity: 0.8; margin-top: 6px; font-weight: 700;}

/* 物理阻尼推钮 */
.setting-item { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--outline); }
[data-theme="dark"] .setting-item { border-bottom-color: rgba(255,255,255,0.05); }
.setting-item:last-child { border-bottom: none; }
.setting-info { flex: 1; padding-right: 16px; }
.setting-title { font-size: 1.05rem; font-weight: 700; color: var(--on-surface); margin-bottom: 4px; }
.setting-desc { font-size: 0.8rem; opacity: 0.7; color: var(--on-surface); line-height: 1.4; }
.danger-zone { background: var(--accent-red-bg); padding: 16px; border-radius: var(--radius-sm); border: 1px dashed var(--accent-red); margin-top: 12px;}

/* 视觉优化：定制化设置列表内的微型胶囊控件 (Premium Capsule Controls) */
/* 赋予下拉框 Wrapper 充足的物理呼吸空间 */
.setting-compact-wrapper {
    width: auto !important;
    min-width: 130px; 
    flex-shrink: 0;
}

/* 下拉菜单胶囊化重塑：拔高体积对齐文本 */
.setting-item .bs-facade {
    width: 100% !important; 
    height: 46px !important; /* 匹配左侧双行文本的物理高度 */
    padding: 0 18px !important;
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    border: none !important; 
    border-radius: var(--radius-full) !important;
    background: rgba(139, 121, 103, 0.08) !important; 
    box-shadow: none !important;
    color: var(--primary) !important; 
    flex-shrink: 0;
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

.setting-item .bs-facade:active {
    transform: scale(0.95) !important;
    background: rgba(139, 121, 103, 0.15) !important;
}

/* 按钮胶囊化重塑：使用高权重阻断全局 button 污染 */
button.btn-setting-action {
    width: auto !important; 
    min-width: 110px !important; 
    flex-shrink: 0 !important;         
    height: 46px !important; /* 与下拉框及文本区完美平齐 */
    padding: 0 20px !important;
    border-radius: var(--radius-full) !important; /* 强制胶囊成型 */
    background: rgba(139, 121, 103, 0.08) !important; /* 幽灵底色，驱逐原先的深色背景 */
    color: var(--primary) !important; /* 高饱和主色文字 */
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    border: none !important;
    box-shadow: none !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

button.btn-setting-action:active {
    transform: scale(0.95) !important;
    background: rgba(139, 121, 103, 0.15) !important;
}

/* 黑暗模式：息屏美学适配 */
[data-theme="dark"] .setting-item .bs-facade,
[data-theme="dark"] button.btn-setting-action {
    background: rgba(214, 195, 176, 0.1) !important; 
    color: var(--primary) !important;
}

[data-theme="dark"] .setting-item .bs-facade:active,
[data-theme="dark"] button.btn-setting-action:active {
    background: rgba(214, 195, 176, 0.18) !important;
}

/*  视觉优化：震动测试按钮专属物理强化 (Haptic Button Prominence) */
button#btn-test-vibrate {
    height: 46px !important; /* 恢复正常体量，与同级列表控件高度严格平齐 */
    min-width: 110px !important; 
    background: rgba(139, 121, 103, 0.08) !important; /* 采用与主题融合的幽灵胶囊底色 */
    color: var(--primary) !important; 
    font-size: 0.95rem !important; 
    font-weight: 800 !important;
    letter-spacing: 1px !important;
    border: 1px solid rgba(139, 121, 103, 0.1) !important; /* 纤细同色系轮廓勾勒实体感 */
    border-radius: var(--radius-full) !important;
    box-shadow: 0 2px 8px rgba(115, 102, 88, 0.04) !important; /* 极弱的基础微弥散光 */
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

button#btn-test-vibrate:active {
    transform: scale(0.92) !important;
    background: rgba(139, 121, 103, 0.15) !important; 
    box-shadow: inset 0 2px 6px rgba(115, 102, 88, 0.15) !important; /* 物理重构：引入内阴影(Deboss)模拟硬件按压的凹陷阻尼 */
    border-color: transparent !important;
}

/* 视觉优化：震动测试按钮 - 夜间沉浸式适配 (Moonlit Wood Adaptation) */
[data-theme="dark"] button#btn-test-vibrate {
    background: rgba(214, 195, 176, 0.1) !important; 
    color: var(--primary) !important; 
    border: 1px solid rgba(214, 195, 176, 0.1) !important; 
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important; 
}

[data-theme="dark"] button#btn-test-vibrate:active {
    background: rgba(214, 195, 176, 0.18) !important; 
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.4) !important;
    transform: scale(0.92) !important;
}



.setting-item .bs-facade-text {
    opacity: 1 !important; 
}




/* 设置项垂直排版（解决长文本与全宽按钮的挤压冲突） */

.setting-item-vertical { flex-direction: column; align-items: stretch; }
.setting-item-vertical .setting-info { padding-right: 0; margin-bottom: 12px; }

.tactile-switch-wrap { position: relative; display: inline-block; width: 52px; height: 30px; flex-shrink: 0; }
.tactile-switch { opacity: 0; width: 0; height: 0; position: absolute; pointer-events: none; }
.tactile-slider { position: absolute; cursor: pointer; inset: 0; background-color: var(--outline); opacity: 0.6; border-radius: 30px; transition: 0.4s var(--spring); box-shadow: inset 0 2px 4px rgba(0,0,0,0.1); }
.tactile-slider:before { position: absolute; content: ""; height: 22px; width: 22px; left: 4px; bottom: 4px; background-color: var(--surface-container); border-radius: 50%; transition: 0.4s var(--spring); box-shadow: 0 2px 6px rgba(0,0,0,0.15), inset 0 1px 1px var(--paper-highlight); border: 1px solid rgba(255,255,255,0.5); }
.tactile-switch:checked + .tactile-slider { background-color: var(--tertiary); opacity: 1; box-shadow: inset 0 2px 4px rgba(0,0,0,0.2); }
.tactile-switch:checked + .tactile-slider:before { transform: translateX(22px); }
[data-theme="dark"] .tactile-slider { background-color: rgba(255,255,255,0.1); box-shadow: inset 0 2px 4px rgba(0,0,0,0.4); opacity: 1;}
[data-theme="dark"] .tactile-slider:before { border-color: rgba(255,255,255,0.1); box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.1); }
[data-theme="dark"] .tactile-switch:checked + .tactile-slider { background-color: var(--tertiary); }

.vs-btn { display:flex !important; flex-direction:column !important; background: var(--surface) !important; color: var(--on-surface) !important; padding: 14px 0 !important; font-size: 0.95rem !important;}
.vs-btn.selected { background: var(--tertiary) !important; border-color: transparent !important; color: var(--on-primary) !important; }

/*  极夜幽灵态：视图与排版设置按钮的去高光处理 */
[data-theme="dark"] .vs-btn.selected {
    background: rgba(74, 99, 85, 0.4) !important; 
    color: #b0d6c1 !important;
    box-shadow: none !important;
}


/*  学习进度方块：有机生命力重构 (Organic Pixel Matrix) */
#pixel-matrix { 
    display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; 
    max-width: 100%; margin: 10px auto var(--space-md); padding: 0 var(--space-sm);
}

.pixel { 
    height: 6px; flex: 1 1 8%; max-width: 32px; 
    background-color: rgba(139, 121, 103, 0.1); /* 极微弱的水痕底色 */
    box-shadow: inset 0 1px 2px rgba(115, 102, 88, 0.08); /* 纸张凹陷感 */
    border-radius: 8px; 
    transition: all 0.6s var(--spring-smooth); /* 更柔和的水墨洇开过渡 */
}

[data-theme="dark"] .pixel {
    background-color: rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
}

.pixel.filled { 
    background-color: var(--fill-color, #8b7967); 
    opacity: 0.85; 
    box-shadow: 0 0 8px rgba(139, 121, 103, 0.2); /* 墨水晕染的边缘柔化 */
    transform: scale(0.98); /* 墨水干涸后轻微收缩 */
}

[data-theme="dark"] .pixel.filled { box-shadow: 0 0 8px rgba(0, 0, 0, 0.5); }

.pixel.current { 
    background-color: var(--tertiary); 
    transform: scale(1.15); /* 放弃生硬的 Y 轴拉伸，改为全向微量膨胀 */
    /* 强烈且温柔的发光光晕，模拟活性液体并照亮四周 */
    box-shadow: 0 0 16px var(--tertiary), 0 0 4px rgba(107, 132, 123, 0.5); 
    border-radius: 6px;
    z-index: 2;
    opacity: 1;
    animation: ink-breathe 2.5s infinite ease-in-out; /* 注入生命呼吸节律 */
}

@keyframes ink-breathe {
    0%, 100% { 
        transform: scale(1.15); 
        box-shadow: 0 0 16px var(--tertiary), 0 0 4px rgba(107, 132, 123, 0.5); 
        filter: brightness(1); 
    }
    50% { 
        transform: scale(1.05); 
        box-shadow: 0 0 8px var(--tertiary), 0 0 2px rgba(107, 132, 123, 0.3); 
        filter: brightness(1.15); /* 呼吸时内部高光闪烁 */
    }
}

/* Instagram 快拍式全宽进度条 (Compact Mode) */
#pixel-matrix.compact-mode {
    gap: 4px;
    padding: 0 20px;
    width: 100%;
}
#pixel-matrix.compact-mode .pixel {
    max-width: none;
    height: 6px; /* 降低高度，使其更像一条连续的宣纸水墨线 */
    border-radius: 4px;
}
#pixel-matrix.compact-mode .pixel.current {
    transform: scaleY(1.2); /* 稍微收敛快拍模式的形变 */
    border-radius: 4px;
}


/* ==========================================
   沉浸式学习遮罩区
   ========================================== */

.fullscreen-overlay {
    position: fixed; inset: 0; z-index: 2000;
    background: var(--surface);
    padding: calc(16px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom));
    overflow-y: auto; overflow-x: hidden;
    display: flex; flex-direction: column;
    animation: slideUpFullscreen 0.4s var(--spring) forwards;
}
@keyframes slideUpFullscreen { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: translateY(0); } }

.study-header {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; 
    margin-bottom: 24px; padding: 0 8px; width: 100%;
}
.sh-left { display: flex; justify-content: flex-start; }
.sh-center { display: flex; justify-content: center; }
.sh-right { display: flex; justify-content: flex-end; gap: 12px; }

.sh-btn {
    background: transparent !important; color: var(--on-surface) !important; 
    box-shadow: none !important; border: none !important; padding: 8px 12px 8px 0 !important; 
    font-size: 1.1rem !important; opacity: 0.7; width: auto !important;
}
.sh-btn:active { transform: scale(0.95) !important; opacity: 1; filter: none !important; }

.sh-progress {
    font-size: 1.1rem; font-weight: 800; font-family: var(--font-ui); 
    color: var(--primary); letter-spacing: 1px; white-space: nowrap; 
}

.flash-card { 
    text-align: center; padding: 64px 20px 48px 20px; margin: var(--space-sm) 0 var(--space-lg) 0; position: relative; z-index: 5; 
    background: var(--surface-container); border-radius: var(--radius-lg);
    /*  物理材质升级：内阴影转移至子层防止被底色遮挡，采用纯粹的多层弥散阴影 */
    box-shadow: 
      0 24px 48px rgba(115, 102, 88, 0.08), 
      0 8px 16px rgba(115, 102, 88, 0.04);
    border: 1px solid rgba(139, 121, 103, 0.06);
    transition: transform 0.6s var(--spring-bouncy), opacity 0.3s var(--spring-smooth);
    will-change: transform, opacity;
    /*  移除 overflow: hidden; 允许 Combo Badge 突破卡片结界自由悬浮 */
    perspective: 1000px; /* 开启 3D 透视视距 */
}

/*  极夜墨迹：深色模式下的主卡片投影与边框自适应 */
[data-theme="dark"] .flash-card {
    border: 1px solid rgba(255, 255, 255, 0.04);
    box-shadow: 
      0 24px 48px rgba(0, 0, 0, 0.6), 
      0 8px 16px rgba(0, 0, 0, 0.4);
}



/*  丝绸扫光折射层：物理扫光动画 */
.card-glare {
    position: absolute;
    inset: -150%; /* 扩展范围以确保 135度对角线平滑扫过 */
    z-index: 6;
    pointer-events: none;
    background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0) 45%,
      rgba(255, 255, 255, 0.28) 50%,
      rgba(255, 255, 255, 0) 55%
    );
    opacity: 0;
}

/* 扫光激活触发器 */
.flash-card.shimmering .card-glare {
    animation: card-glare-sweep 0.7s var(--spring-smooth) forwards;
}

@keyframes card-glare-sweep {
    0% { transform: translate(-10%, -10%); opacity: 0; }
    20% { opacity: 1; }
    100% { transform: translate(10%, 10%); opacity: 0; }
}

/*  物理空间翻牌：注入 RotateY 维度动画 */
@keyframes slideInRight3D {
    from { opacity: 0; transform: translateX(50px) rotateY(8deg) scale(0.96); }
    to { opacity: 1; transform: translateX(0) rotateY(0deg) scale(1); }
}
@keyframes slideInLeft3D {
    from { opacity: 0; transform: translateX(-50px) rotateY(-8deg) scale(0.96); }
    to { opacity: 1; transform: translateX(0) rotateY(0deg) scale(1); }
}
@keyframes slideOutLeft3D {
    to { opacity: 0; transform: translateX(-50px) rotateY(-8deg) scale(0.96); }
}
@keyframes slideOutRight3D {
    to { opacity: 0; transform: translateX(50px) rotateY(8deg) scale(0.96); }
}

/* 覆盖旧动画 */
.anim-slide-out-left { animation: slideOutLeft3D 0.3s var(--spring-snappy) forwards; }
.anim-slide-out-right { animation: slideOutRight3D 0.3s var(--spring-snappy) forwards; }
.anim-slide-in-right { animation: slideInRight3D 0.6s var(--spring-bouncy) forwards; }
.anim-slide-in-left { animation: slideInLeft3D 0.6s var(--spring-bouncy) forwards; }

.flash-card::before, .flash-card::after { content: ''; position: absolute; top: 0; border-radius: var(--radius-lg); background: var(--surface-container); border: 1px solid rgba(139, 121, 103, 0.04); transition: all 0.5s var(--spring); }
.flash-card::before { bottom: -10px; left: 12px; right: 12px; opacity: 0.8; z-index: -1; box-shadow: 0 12px 24px rgba(115, 102, 88, 0.06); }
.flash-card::after { bottom: -20px; left: 24px; right: 24px; opacity: 0.4; z-index: -2; box-shadow: 0 6px 12px rgba(115, 102, 88, 0.04); }

/*  极夜墨迹：深色模式下堆叠卡片的阴影与边框重塑，消除违和的棕色系边框 */
[data-theme="dark"] .flash-card::before, 
[data-theme="dark"] .flash-card::after {
    border: 1px solid rgba(255, 255, 255, 0.02);
    background: var(--surface-container);
}
[data-theme="dark"] .flash-card::before { box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4); opacity: 0.6; }
[data-theme="dark"] .flash-card::after { box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); opacity: 0.3; }

.combo-badge {
    position: absolute; top: -16px; left: 50%; transform: translateX(-50%) scale(0.9);
    background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    padding: 6px 18px; border-radius: 999px;
    font-size: 0.95rem; font-weight: 900; font-family: var(--font-ui);
    color: var(--primary);
    box-shadow: 0 4px 16px var(--paper-shadow);
    z-index: 20; opacity: 0; pointer-events: none;
    transition: all 0.4s var(--spring);
}

.combo-badge.active { opacity: 1; transform: translateX(-50%) scale(1); }

.combo-badge.tier-2 { 
    color: #d4af37; border-color: rgba(212,175,55,0.4); 
    text-shadow: 0 1px 4px rgba(212,175,55,0.3); 
}

/* 修复点：优化 Combo Badge 层级动画，使用 ::before 的硬件加速动画 */
.combo-badge.tier-3 { 
    background: var(--tertiary); color: var(--on-primary); border-color: transparent; 
    box-shadow: 0 4px 16px rgba(107,132,123,0.4);
    /*  剥离破坏性的 relative，恢复其绝对悬浮特权 */
    padding: 6px 28px; /* 略微拉长胶囊形态，彰显高阶体量感 */
    letter-spacing: 1px; /* 呼吸感排版 */
}

.combo-badge.tier-3::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 2px solid var(--tertiary);
    animation: combo-pulse 1.5s infinite cubic-bezier(0.2, 0.8, 0.2, 1);
    z-index: -1;
}

[data-theme="dark"] .combo-badge { background: rgba(36, 33, 30, 0.85); border-color: rgba(255,255,255,0.1); }
[data-theme="dark"] .combo-badge.tier-2 { color: #f1c40f; border-color: rgba(241,196,15,0.3); }
[data-theme="dark"] .combo-badge.tier-3 { background: #1c2e22; color: #87c7a5; border-color: rgba(135,199,165,0.3); }

@keyframes combo-pulse {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(1.3, 1.8); opacity: 0; }
}

.combo-pop { animation: combo-pop-anim 0.4s var(--spring); }
@keyframes combo-pop-anim {
    0% { transform: translateX(-50%) scale(1); }
    50% { transform: translateX(-50%) scale(1.15); }
    100% { transform: translateX(-50%) scale(1); }
}

.watermark-layer { 
    position: absolute; inset: 0; overflow: hidden; border-radius: inherit; z-index: 0; pointer-events: none; transition: background 0.4s ease; 
    /*  材质重塑：剥离塑料高光，采用 30% 低透明度与 2px 漫反射，还原顶级哑光纸张的温润切边 */
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.3);
    border: none;
    /* 🚀 硬件防抖：保障开启物理混合模式后，滚动与拖拽时的极致帧率 */
    will-change: background;
}

/* 🚀 极夜墨迹：夜间模式下的内切高光处理，配合漫反射柔化 */
[data-theme="dark"] .watermark-layer { 
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.05); 
}


.watermark { position: absolute; bottom: -15px; right: -10px; font-family: var(--font-jp-serif); color: var(--on-surface); opacity: 0.05; font-weight: 900; white-space: nowrap; line-height: 1; font-size: 10rem; }
[data-theme="dark"] .watermark { opacity: 0.08; color: #ffffff; }


.word-main, .info-row-group, .dt-example-box, .dt-word { position: relative; z-index: 1; }

.speaker-icon { position: absolute; top: 20px; left: 20px; font-size: 1.8rem; cursor: pointer; color: var(--primary); transition: transform 0.2s; opacity: 0.8; z-index: 10; padding: 8px; margin: -8px;}
.speaker-icon:active { transform: scale(0.85); }
.star-btn { position: absolute; top: 20px; right: 20px; font-size: 1.8rem; cursor: pointer; color: var(--primary); transition: transform 0.2s; user-select: none; z-index: 10; padding: 8px; margin: -8px;}
.star-btn:active { transform: scale(0.85); }

.star-particle { position: fixed; width: 8px; height: 8px; background: var(--tertiary); border-radius: 50%; pointer-events: none; z-index: 9999; animation: particle-burst 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
@keyframes particle-burst { 0% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 100% { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(0); opacity: 0; } }

.word-main { 
    font-size: clamp(2.8rem, 13vw, 4.5rem); line-height: 1.2; font-weight: 900; font-family: var(--font-jp-serif); letter-spacing: 2px; margin-bottom: var(--space-sm); cursor: pointer; word-break: keep-all; 
    color: rgba(45, 40, 35, 0.95);
    text-shadow: 0 1.5px 1px var(--ink-emboss), 0 -1px 1px var(--ink-deboss);
}
[data-theme="dark"] .word-main { color: rgba(240, 235, 230, 0.95); }

.info-row-group { display: flex; justify-content: center; align-items: center; gap: var(--space-sm); flex-wrap: wrap; margin-bottom: 36px; }
.kana-row { font-size: 1.2rem; font-weight: 600; font-family: var(--font-jp-sans); color: var(--primary); cursor: pointer; margin: 0; }

.type-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 0; cursor: pointer; }

.type-capsule { 
    font-size: 0.8rem; letter-spacing: 0.05em; padding: 4px 12px; border-radius: 6px; 
    color: var(--on-surface); font-weight: 700; opacity: 0.85;
    background-blend-mode: normal; 
    border: 1px solid rgba(139, 121, 103, 0.05); /* 极弱的轮廓，仅为了与纯色背景区分 */
    box-shadow: none; /* 移除廉价的塑料内发光和浮空投影 */
    display: inline-block; transition: background 0.4s;
}
[data-theme="dark"] .type-capsule { border: 1px solid rgba(255,255,255,0.03); color: rgba(255,255,255,0.85);}
.dt-type { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 0; }

.meaning-row { font-size: 1.4rem; font-weight: 700; color: var(--on-surface); opacity: 0.85; cursor: pointer; margin: 0; }

.blur-text { background-color: var(--outline); border-radius: var(--radius-sm); opacity: 0.7; filter: blur(6px); padding: 12px 18px; margin: -8px -6px; transition: filter 0.4s var(--spring), background-color 0.4s ease, opacity 0.4s ease; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; min-width: 80px; user-select: none; }
.blur-text.active { filter: blur(0); background-color: transparent; opacity: 1; transform: scale(1.05); padding: 4px 8px; margin: 0;}

/* 🎛️ 底部操作网格 */
.action-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-sm); width: 100%; margin-bottom: var(--space-md); margin-top: auto; }

.action-flex { display: flex; gap: var(--space-sm); width: 100%; }
.action-flex .btn-action { flex: 1; padding: 18px 4px; font-size: 1.15rem; flex-direction: row;}

.btn-action { 
    padding: 20px 16px; border-radius: var(--radius-md); font-size: 1.05rem; font-weight: 800; 
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; line-height: 1.2; 
    background: var(--surface-container) !important; color: var(--on-surface) !important;
}
.btn-action:disabled { opacity: 0.4; cursor: not-allowed; transform: none !important; box-shadow: none !important; filter: none !important; border-color: transparent !important;}

#capsule-pendulum .btn-action { flex-direction: row; gap: 8px; }
#btn-prev { background: var(--surface-container) !important; opacity: 0.8; }
#btn-next { background: var(--primary-container) !important; color: var(--primary) !important; border-color: transparent !important; }
[data-theme="dark"] #btn-next { background: rgba(214, 195, 176, 0.15) !important; }
#btn-finish { background: var(--tertiary) !important; color: var(--on-primary) !important; border-color: transparent !important; }

.btn-ft-red { color: var(--accent-red) !important; background: var(--accent-red-bg) !important; }
.btn-ft-orange { color: #c48c4b !important; background: #fff8f0 !important; }
.btn-ft-green { color: var(--tertiary) !important; background: var(--accent-green-bg) !important; }
[data-theme="dark"] .btn-ft-orange { color: #fcebd7 !important; background: #332718 !important; }
[data-theme="dark"] .btn-ft-green { color: #87c7a5 !important; background: #1c2e22 !important; }

/* ==========================================
    全景词库网格体系
   ========================================== */

#wb-grid-container { width: 100%; position: relative; }
#wb-grid { display: grid; gap: 12px; width: 100%; }
#wb-grid[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#wb-grid[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#wb-grid[data-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }

/* 全景词库卡片：哑光瓷片质感 (Matte Ceramic Tiles) */
.wb-card { 
    min-width: 0; border-radius: var(--radius-lg); 
    padding: 40px 8px 36px; 
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; 
    /* 统一注入全局高密度硅胶物理曲线 */
    transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); 
    user-select: none; -webkit-user-select: none; overflow: hidden; cursor: pointer; opacity: 0;
    
    /* 悬浮态：柔和的空气感漫反射 */
    box-shadow: 0 8px 24px rgba(115, 102, 88, 0.06), 0 2px 6px rgba(115, 102, 88, 0.03) !important;
    border: 1px solid rgba(139, 121, 103, 0.04); 
    mix-blend-mode: normal; 
    
    /* 硬件加速锁死，防止 GPU 渲染抖动 */
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* 物理下沉态：极速深陷与光晕消失 */
.wb-card:active, .wb-card.pressing { 
    transform: scale(0.94); /* 进一步剥夺体积，强化“被按入槽中”的踏实感 */
    /* 投影极速收束：光晕散去，化为贴底的死黑缝隙 */
    box-shadow: 0 1px 2px rgba(115, 102, 88, 0.15) !important;
    border-color: rgba(139, 121, 103, 0.12); /* 摩擦边缘导致的高光显影 */
    filter: brightness(0.96);
}

/* 极夜墨迹：暗色瓷片的光学映射 */
[data-theme="dark"] .wb-card { 
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.03);
    mix-blend-mode: normal;
}

/* 极夜下沉态：深渊缝隙与月光切边 */
[data-theme="dark"] .wb-card:active, [data-theme="dark"] .wb-card.pressing { 
    transform: scale(0.94); 
    /* 彻底剥离多余的灰度阴影，换以极强的近地收束光 */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
    border-color: rgba(255, 255, 255, 0.08) !important; 
    filter: brightness(0.92);
}

.wb-card .watermark { 
    font-size: 5.5rem; opacity: 0.08; right: -5px; bottom: -10px; 
    pointer-events: none; z-index: 2; mix-blend-mode: normal;
}
[data-theme="dark"] .wb-card .watermark { opacity: 0.09; }

.wb-c-word, .wb-c-kana, .wb-c-mean { pointer-events: none; position: relative; z-index: 3;}
.wb-blur-trigger { pointer-events: auto; }

.wb-c-word { font-family: var(--font-jp-serif); font-size: 1.85rem; font-weight: 900; margin-bottom: 8px; color: rgba(45, 40, 35, 0.95); line-height: 1.2; word-break: break-all; text-align: center; width: 100%;}
.wb-c-kana { font-family: var(--font-jp-sans); font-size: 0.85rem; opacity: 0.8; margin-bottom: 10px; color: rgba(45, 40, 35, 0.9); text-align: center; word-break: break-all; width: 100%; font-weight: 600; line-height: 1.15;}
.wb-c-mean { 
    font-size: 0.85rem; font-weight: 700; width: 100%; text-align: center; 
    color: rgba(45, 40, 35, 0.85); 
    opacity: 0.7; /*   降低释义的存在感，把视觉焦点让给日文单词 */
    margin-top: 2px;
    /*   核心：改为最多显示 2 行，超出再显示省略号，解决长释义溢出 */
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; 
    overflow: hidden; text-overflow: ellipsis; line-height: 1.3;
}

[data-theme="dark"] .wb-c-word { color: rgba(240, 235, 230, 0.95); }
[data-theme="dark"] .wb-c-kana, [data-theme="dark"] .wb-c-mean { color: #b5afa6; }

#wb-grid[data-cols="3"] .wb-c-word { font-size: 1.45rem; margin-bottom: 6px; }
#wb-grid[data-cols="3"] .wb-c-kana { font-size: 0.8rem; margin-bottom: 8px; }
#wb-grid[data-cols="3"] .wb-c-mean { font-size: 0.75rem; }
#wb-grid[data-cols="3"] .wb-card .watermark { font-size: 4.5rem; right: -5px; bottom: -5px; }

#wb-grid[data-cols="4"] .wb-card { padding: 28px 4px 28px; border-radius: var(--radius-sm); gap: 4px;}
#wb-grid[data-cols="4"] .wb-c-word { font-size: 1.15rem; margin-bottom: 4px;}
#wb-grid[data-cols="4"] .wb-c-kana { font-size: 0.7rem; margin-bottom: 4px; opacity: 0.7;}
#wb-grid[data-cols="4"] .wb-c-mean { font-size: 0.7rem; opacity: 0.8;}
#wb-grid[data-cols="4"] .wb-c-speaker { display: none; }
#wb-grid[data-cols="4"] .wb-card .watermark { font-size: 3.5rem; right: -5px; bottom: -5px;}


/* ==========================================
   单词卡片对齐
   ========================================== */

.card-hanko {
    position: absolute; top: 12px; left: 12px; z-index: 15; 
    width: 24px; height: 24px;
    color: transparent !important; font-size: 0; 
    background-color: var(--badge-color, #e74c3c);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C13.5 5 17 6 19 4C18 7.5 20 10 23 11C19.5 12 18 15 20 18C16.5 17 14 19 12 22C10 19 7.5 17 4 18C6 15 4.5 12 1 11C4 10 6 7.5 5 4C7 6 10.5 5 12 2Z'/%3E%3C/svg%3E");
    -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center;
    border: none !important; transform: none !important; opacity: 0.9; pointer-events: none;
}

.wb-c-star { 
    position: absolute; top: 12px; right: 12px; z-index: 10;
    width: 24px; height: 24px; padding: 0; margin: 0;
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: none; cursor: pointer; pointer-events: auto;
    color: var(--outline); transition: transform 0.3s var(--spring), color 0.3s; 
}
.wb-c-star .material-symbols-rounded { font-size: 22px; line-height: 1; }
.wb-c-star.active { color: #fbbc04; transform: scale(1.15); opacity: 1; }
.wb-c-star:active { transform: scale(0.8); }

.wb-c-speaker { 
    position: absolute; bottom: 10px; left: 10px; z-index: 10;
    width: 24px; height: 24px; padding: 0; margin: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--primary); background: transparent; pointer-events: auto; 
    transition: transform 0.2s; box-shadow: none; border: none; opacity: 0.7;
}
.wb-c-speaker .material-symbols-rounded { font-size: 18px; line-height: 1;}
.wb-c-speaker:active { transform: scale(0.85); }

.wb-checkbox { 
    position: absolute; top: 12px; right: 12px; 
    width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--primary); 
    z-index: 16; display: flex; align-items: center; justify-content: center; 
    color: white; font-size: 14px; transition: all 0.2s; pointer-events: none; box-shadow: none;
}
.wb-checkbox.checked { background: var(--primary); }

#wb-grid[data-cols="4"] .card-hanko { width: 16px; height: 16px; top: 8px; left: 8px; }
#wb-grid[data-cols="4"] .wb-c-star { width: 16px; height: 16px; top: 8px; right: 8px; }
#wb-grid[data-cols="4"] .wb-c-star .material-symbols-rounded { font-size: 16px; }

[data-theme="dark"] .card-hanko { opacity: 0.95; }

/* 🚀 灵动岛浮层：全透视琉璃舱 (VisionOS Glassmorphism) */
.batch-bar { 
    position: fixed; 
    bottom: calc(90px + env(safe-area-inset-bottom)); 
    left: 50%; 
    width: 90%; 
    max-width: 420px; 
    /* 极致毛玻璃透视：降低底色浓度，大幅提升折射率 */
    background: rgba(246, 244, 239, 0.35) !important; 
    backdrop-filter: blur(32px) saturate(1.2); 
    -webkit-backdrop-filter: blur(32px) saturate(1.2);
    border-radius: var(--radius-full); 
    padding: 10px 14px 10px 24px; /* 排版纵深：右侧操作区紧凑，左侧数据区呼吸留白 */
    display: flex; justify-content: space-between; align-items: center; 
    z-index: 100; 
    border: 1px solid rgba(139, 121, 103, 0.08) !important; 
    /* 🚀 材质重塑：灵动岛虽然是琉璃材质，但也需压低高光以融合宣纸体系 */
    box-shadow: 0 16px 40px rgba(0,0,0,0.08), inset 0 1px 2px rgba(255, 255, 255, 0.4) !important; 
    /* 🚀 磁吸式物理入场引擎 */
    animation: magnetic-island-entry 0.6s var(--spring-bouncy) forwards;
}

@keyframes magnetic-island-entry {
    from { transform: translateX(-50%) translateY(80px) scale(0.9); opacity: 0; }
    to { transform: translateX(-50%) translateY(0) scale(1); opacity: 1; }
}

[data-theme="dark"] .batch-bar { 
    background: rgba(30, 28, 26, 0.3) !important; 
    border-color: rgba(255, 255, 255, 0.05) !important; 
    box-shadow: 0 16px 40px rgba(0,0,0,0.4), inset 0 1px 2px rgba(255, 255, 255, 0.05) !important;
}

/* 🚀 LED 级状态指示器排版 */
.batch-count {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--on-surface);
    opacity: 0.7;
    display: flex;
    align-items: baseline;
    gap: 6px;
    white-space: nowrap; /* 锁定左侧数据面板的物理形态 */
    flex-shrink: 1; /* 在极端窄屏的拥挤态势下允许左侧妥协，保全右侧核心操作区的完整 */
}


#batch-count-num {
    font-size: 1.35rem;
    font-weight: 900;
    color: var(--primary);
    font-family: var(--font-jp-sans);
    text-shadow: 0 2px 8px rgba(139, 121, 103, 0.3); /* 发光光晕 */
}

[data-theme="dark"] #batch-count-num { text-shadow: 0 2px 8px rgba(214, 195, 176, 0.2); }


.wb-manage-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.4); display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; opacity: 0; pointer-events: none; transition: opacity 0.3s; padding: 8px; z-index: 20; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-radius: inherit;}
.wb-manage-overlay.active { opacity: 1; pointer-events: auto;}

/* 段位色彩系统 */
.hanko-bronze { --badge-color: #c0392b; }
.hanko-silver { --badge-color: #7f8c8d; }
.hanko-gold { --badge-color: #d4af37; }
.hanko-diamond { --badge-color: #00ced1; }

.hanko-gold { filter: drop-shadow(0 0 4px rgba(212,175,55,0.4)); }
.hanko-diamond { filter: drop-shadow(0 0 6px rgba(0,206,209,0.6)); }

[data-theme="dark"] .hanko-bronze { --badge-color: #e74c3c; }
[data-theme="dark"] .hanko-silver { --badge-color: #bdc3c7; }

.hanko-badge {
    display: inline-block; width: 1.1rem; height: 1.1rem; 
    background-color: var(--badge-color, #c0392b);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C13.5 5 17 6 19 4C18 7.5 20 10 23 11C19.5 12 18 15 20 18C16.5 17 14 19 12 22C10 19 7.5 17 4 18C6 15 4.5 12 1 11C4 10 6 7.5 5 4C7 6 10.5 5 12 2Z'/%3E%3C/svg%3E");
    -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center;
    vertical-align: middle; margin-left: 6px; transform: rotate(-8deg);
    color: transparent !important; font-size: 0; overflow: hidden;
}

/* ==========================================
    选项卡弹窗与模态框体系
   ========================================== */

.modal-overlay { 
  position: fixed; inset: 0; 
  /* 🚀 视觉净化：大幅减弱黑色遮罩浓度 (0.85 -> 0.4)，转而依靠背景的“退行”产生层级区隔 */
  background: rgba(30, 27, 24, 0.4); 
  z-index: 3000; display: flex; align-items: center; justify-content: center; 
  opacity: 0; pointer-events: none; 
  transition: opacity 0.4s var(--spring-smooth); 
  /* 弱化模糊，将注意力集中在前景 */
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.modal-overlay.active { opacity: 1; pointer-events: auto; }

/* 🚀 MD3 色调海拔 (Tonal Elevation)：通过提亮底色宣告 Z 轴主权 */
.dialog-content { 
    background: #fcfbfa; /* 海拔 3：系统最亮层 */
    width: 85%; max-width: 340px; border-radius: var(--radius-lg); padding: var(--space-lg) var(--space-md); text-align: center; color: var(--on-surface); 
    transform: scale(0.95); transition: transform 0.4s var(--spring); 
    /* 🚀 材质重塑：剥离高达 90% 的硬切光，还原 30% 漫反射哑光实体边缘 */
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.3), 0 24px 48px rgba(115, 102, 88, 0.08), 0 4px 12px rgba(115, 102, 88, 0.04); 
    max-height: 90vh; overflow-y: auto;
}
.modal-overlay.active .dialog-content { transform: scale(1); }

#bs-overlay, #view-settings-overlay, #group-select-overlay { align-items: flex-end; }
.bottom-sheet { 
    background: #fcfbfa; /* 海拔 3：系统最亮层 */
    width: 100%; max-width: 500px; border-radius: var(--radius-lg) var(--radius-lg) 0 0; 
    padding: var(--space-md) 20px calc(var(--space-md) + env(safe-area-inset-bottom)); 
    transform: translateY(100%); transition: transform 0.4s var(--spring); 
    /* 🚀 材质重塑：哑光化处理底部抽屉的高光切边 */
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.3), 0 -8px 32px rgba(115, 102, 88, 0.06); 
    display: flex; flex-direction: column; max-height: 85vh;
}

/* 🚀 极夜墨迹：深色模式的海拔映射 (Dark Mode Tonal Elevation) */
/* 深色模式下，海拔越高底色越浅，而非加重压抑的黑影 */
[data-theme="dark"] .dialog-content,
[data-theme="dark"] .bottom-sheet {
    background: #282624; /* 在深色背景 1c1a18 基础上提亮，呈现高级玄灰 */
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.05), 0 24px 48px rgba(0, 0, 0, 0.4);
}
[data-theme="dark"] .bottom-sheet {
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.05), 0 -8px 32px rgba(0, 0, 0, 0.4);
}

.modal-overlay.active .bottom-sheet { transform: translateY(0); }
/* 🚀 MD3 底部抽屉：超短粗物理把手 (Heavy Pill Handle)，强化拖拽的触觉心理暗示 */
.bs-handle { 
    width: 32px; 
    height: 6px; 
    background: var(--outline); 
    border-radius: var(--radius-full); 
    margin: 0 auto var(--space-md); 
    opacity: 0.85; 
    flex-shrink: 0;
    /* 注入微弱高光，赋予横条“实体橡胶把手”的精密质感 */
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6), 0 1px 2px rgba(0,0,0,0.05);
}

/* 🚀 极夜墨迹：深色模式下的把手材质映射 */
[data-theme="dark"] .bs-handle {
    background: rgba(255, 255, 255, 0.25);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.05), 0 1px 2px rgba(0,0,0,0.3);
}

.bs-scrollable-content { overflow-y: auto; padding-bottom: var(--space-sm);}
#bs-title { text-align: center; margin-bottom: 20px; font-size: 1.15rem; font-weight: 800; color: var(--on-surface); opacity: 0.8;}
.bs-option { padding: 18px var(--space-md); border-radius: var(--radius-full); font-weight: 700; font-size: 1.05rem; color: var(--on-surface); margin-bottom: 12px; background: var(--surface); text-align: center; transition: transform 0.1s, background 0.3s; box-shadow: 0 2px 0 rgba(0,0,0,0.05); cursor: pointer;}
.bs-option:active { transform: scale(0.96); }
.bs-option.selected { background: var(--tertiary); color: var(--on-primary); box-shadow: 0 4px 12px rgba(107,132,123,0.3);}

/* 🚀 极夜幽灵态：底部抽屉选项（如词库选择、检验范围）的去高光处理 */
[data-theme="dark"] .bs-option.selected {
    background: rgba(74, 99, 85, 0.4) !important;
    color: #b0d6c1 !important;
    box-shadow: none !important;
}

.group-tabs { display: flex; overflow-x: auto; border-bottom: 1px solid var(--outline); margin-bottom: 16px; padding: 0 12px; }
.group-tabs::-webkit-scrollbar { display: none; }
.g-tab { padding: 14px 16px; font-size: 0.95rem; font-weight: 700; color: var(--on-surface); opacity: 0.5; white-space: nowrap; border-bottom: 3px solid transparent; cursor: pointer; transition: all 0.3s; }
.g-tab.active { opacity: 1; color: var(--primary); border-bottom-color: var(--primary); }

.toast { 
    position: fixed; top: -100px; left: 50%; transform: translateX(-50%); 
    background: var(--on-surface); color: var(--surface); 
    padding: 14px 28px; border-radius: var(--radius-full); font-weight: 700; font-size: 0.95rem; z-index: 9999; 
    /* 🚀 MD3 最高海拔 (Inverse Surface)：用环境色光晕柔和托起 */
    box-shadow: 0 12px 32px rgba(115, 102, 88, 0.15), 0 4px 12px rgba(115, 102, 88, 0.08); 
    transition: top 0.4s var(--spring), opacity 0.4s; opacity: 0; pointer-events: none; white-space: nowrap;
}

[data-theme="dark"] .toast {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
}
.toast.show { top: calc(80px + env(safe-area-inset-top)); opacity: 1; }

/* 大单词详情卡片 */
.detail-card-container { 
    width: 85%; max-width: 380px; border-radius: var(--radius-lg); 
    padding: 60px var(--space-md) 60px; 
    position: relative; transform: scale(0.95); transition: transform 0.4s var(--spring); 
    /* 🚀 MD3 色调海拔：由于其背景依托内部图层，彻底净化外层容器的黑影污染 */
    box-shadow: 0 24px 48px rgba(115, 102, 88, 0.08), 0 8px 16px rgba(115, 102, 88, 0.04); 
    text-align: center; background: transparent;
}

[data-theme="dark"] .detail-card-container {
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.6), 0 8px 16px rgba(0, 0, 0, 0.4);
}

.modal-overlay.active .detail-card-container { transform: scale(1); }
.detail-card-container .watermark { font-size: 9rem; opacity: 0.04; right: -15px; bottom: -20px;}

#dt-hanko-badge { width: 36px !important; height: 36px !important; top: 16px !important; left: 16px !important; opacity: 1 !important; }
#dt-star-btn { bottom: 16px; right: 16px; font-size: 2.2rem; opacity: 1; z-index: 20; top: auto; }
#dt-star-btn .material-symbols-rounded { font-size: 2.2rem; }

.detail-anim-wrapper { transition: transform 0.2s ease, opacity 0.2s ease; position: relative;}

@keyframes slideOutLeft { to { opacity: 0; transform: translateX(-40px) scale(0.95); } }
@keyframes slideOutRight { to { opacity: 0; transform: translateX(40px) scale(0.95); } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(40px) scale(0.95); } to { opacity: 1; transform: translateX(0) scale(1); } }
@keyframes slideInLeft { from { opacity: 0; transform: translateX(-40px) scale(0.95); } to { opacity: 1; transform: translateX(0) scale(1); } }

.anim-slide-out-left { animation: slideOutLeft 0.2s var(--spring); }
.anim-slide-out-right { animation: slideOutRight 0.2s var(--spring); }
.anim-slide-in-right { animation: slideInRight 0.2s var(--spring); }
.anim-slide-in-left { animation: slideInLeft 0.2s var(--spring); }

.dt-word { font-family: var(--font-jp-serif); font-size: 3.2rem; font-weight: 900; margin-bottom: 12px; color: var(--on-surface);}
.dt-kana { font-family: var(--font-jp-sans); font-size: 1.25rem; font-weight: 600; opacity: 0.8; color: var(--on-surface); margin: 0;}
.dt-mean { font-size: 1.5rem; font-weight: 700; color: var(--on-surface); margin: 0;}

.dt-example-box { background: rgba(0, 0, 0, 0.03); padding: 20px; border-radius: var(--radius-sm); text-align: left; transition: filter 0.4s var(--spring), opacity 0.4s ease;}
[data-theme="dark"] .dt-example-box { background: rgba(255, 255, 255, 0.04); }
.ex-item { padding-bottom: var(--space-sm); margin-bottom: var(--space-sm); border-bottom: 2px solid rgba(0,0,0,0.04); }
[data-theme="dark"] .ex-item { border-bottom: 2px solid rgba(255,255,255,0.04); }
.ex-item:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: none; }

/* 日文例句部分点击响应样式与动画 */
.dt-ex-jp { 
    font-family: var(--font-jp-sans); 
    font-size: 1.1rem; font-weight: 500; margin-bottom: 10px; 
    color: var(--on-surface); line-height: 2.2; 
    transition: all 0.2s ease; cursor: pointer; 
    border-radius: 4px;
}
.dt-ex-jp:active { opacity: 0.6; transform: scale(0.99); }

/* 迷你朗读喇叭样式 */
.ex-speaker { 
    font-size: 1.15rem; opacity: 0.5; color: var(--primary); 
    vertical-align: sub; margin-right: 6px; 
}

.dt-ex-cn { display: inline-flex; align-items: center; gap: 8px; transform-origin: center; transition: transform 0.3s var(--spring), opacity 0.3s ease; }
.dt-ex-cn.revealed-translation { font-size: 0.95rem; opacity: 0.8; color: var(--on-surface); line-height: 1.6; }
.dt-ex-cn.hidden-translation { background: rgba(0,0,0,0.06); padding: 8px var(--space-sm); border-radius: var(--radius-sm); color: var(--on-surface); opacity: 0.7; font-size: 0.9rem; font-weight: 700; cursor: default; user-select: none; box-shadow: inset 0 2px 4px rgba(0,0,0,0.04); }
[data-theme="dark"] .dt-ex-cn.hidden-translation { background: rgba(255,255,255,0.08); opacity: 0.85; box-shadow: inset 0 2px 4px rgba(0,0,0,0.2); }

#detail-close { position: absolute; top: 20px; right: 20px; font-size: 2rem; color: var(--on-surface); opacity: 0.5; cursor: pointer; z-index: 10; transition: transform 0.2s; padding: 12px; margin: -12px;}
#detail-close:active { transform: scale(0.8); }

@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.shake-anim { animation: shake 0.3s forwards; }

.dt-spell-input-box { font-size: 2rem; text-align: center; margin-bottom: var(--space-md); min-height: 56px; border-bottom: 3px solid var(--primary); color: var(--primary); letter-spacing: 6px; font-weight: 800; font-family: var(--font-jp-sans); padding-bottom: 10px;}
.dt-spell-keyboard, #mt-spell-keyboard { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: var(--space-md);}

.dt-spell-key { 
    width: auto !important; 
    min-width: 64px; 
    background: var(--surface-container) !important; 
    color: var(--on-surface) !important; 
    font-size: 1.4rem; 
    padding: 14px 16px; 
    font-family: var(--font-jp-sans); 
    font-weight: 700; 
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 12px var(--paper-shadow);
}
/* 1. 假名拼写键：注入诗意消散动效 */
.dt-spell-key {
    transition: 
        transform 0.4s var(--spring-bouncy), 
        opacity 0.4s var(--spring-smooth), 
        filter 0.4s var(--spring-smooth),
        box-shadow 0.3s ease,
        background 0.3s ease;
}

.dt-spell-key.used {
    opacity: 0;
    pointer-events: none;
    /* 灵魂脱离：向上微浮、轻微放大并伴随模糊气化 */
    transform: translateY(-20px) scale(1.15);
    filter: blur(12px);
}

.dt-spell-key.wrong {
    background: rgba(186, 107, 104, 0.05) !important; /* 极淡的朱砂水渍 */
    border-color: var(--accent-red) !important;
    color: var(--accent-red) !important;
    /* 边缘呼吸光 */
    box-shadow: 0 0 12px rgba(186, 107, 104, 0.3) !important;
}

/* 2. 多项选择按钮：动态便当盒布局 (Adaptive Bento) */
#dt-choice-buttons, #mt-choice-buttons { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 12px; 
    justify-content: center;
}

.dt-choice-btn { 
    flex: 1 1 calc(50% - 12px); /* 默认两列，但具备伸缩性 */
    min-width: 140px; 
    text-align: center; 
    padding: 18px 16px; 
    font-size: 1rem; 
    color: var(--on-surface) !important; 
    background: var(--surface-container) !important; 
    word-break: break-word; 
    line-height: 1.4;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 64px;
    border: 1px solid rgba(139, 121, 103, 0.08) !important;
}

/* 当文字过长时，允许按钮占满整行，形成不规则的排版美感 */
.dt-choice-btn:has(span:empty), /* 兜底 */
.dt-choice-btn {
    transition: all 0.3s var(--spring-smooth);
}

.dt-choice-btn.correct { 
    background: rgba(107, 132, 123, 0.05) !important; /* 翡翠水墨感 */
    border-color: var(--tertiary) !important; 
    color: var(--tertiary) !important; 
    /* 柔和的正确光晕 */
    box-shadow: 0 0 15px rgba(107, 132, 123, 0.25) !important;
}

.dt-choice-btn.wrong { 
    background: rgba(186, 107, 104, 0.05) !important;
    border-color: var(--accent-red) !important; 
    color: var(--accent-red) !important; 
    box-shadow: 0 0 15px rgba(186, 107, 104, 0.25) !important;
}

/* 黑暗模式适配：压低发光强度，增加透视感 */
[data-theme="dark"] .dt-choice-btn.correct,
[data-theme="dark"] .dt-spell-key.correct {
    box-shadow: 0 0 20px rgba(164, 199, 182, 0.15) !important;
    background: rgba(164, 199, 182, 0.08) !important;
}

[data-theme="dark"] .dt-choice-btn.correct { color: #87c7a5 !important; } 

.hidden { display: none !important; }

[data-theme="dark"] .stat-label,
[data-theme="dark"] .meaning-row,
[data-theme="dark"] .dt-mean,
[data-theme="dark"] .dt-ex-cn.revealed-translation,
[data-theme="dark"] #dialog-msg,
[data-theme="dark"] .wb-c-kana,
[data-theme="dark"] .wb-c-mean {
  opacity: 1 !important; color: #b5afa6;
}
[data-theme="dark"] .srs-time, [data-theme="dark"] #progress-text {
  opacity: 1 !important; color: #8c867d;
}

.loading-dots { display: flex; justify-content: center; align-items: center; gap: 6px; height: 60px; width: 100%; opacity: 0.5; }
.loading-dots div { width: 8px; height: 8px; background: var(--primary); border-radius: 50%; animation: bounce 1.4s infinite ease-in-out both; }
.loading-dots div:nth-child(1) { animation-delay: -0.32s; }
.loading-dots div:nth-child(2) { animation-delay: -0.16s; }
@keyframes bounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } }

/* 🚀 移动列表条目：高热区触感设计 */
.move-folder-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    margin-bottom: 8px;
    background: rgba(139, 121, 103, 0.05);
    border-radius: var(--radius-md);
    transition: all 0.3s var(--spring-smooth);
    cursor: pointer;
}

.move-folder-item:active {
    background: rgba(139, 121, 103, 0.15);
    transform: scale(0.97);
}

.move-folder-item .folder-icon {
    color: var(--primary);
    opacity: 0.7;
    font-size: 1.4rem;
}

.move-folder-item .folder-name {
    font-weight: 700;
    font-size: 1rem;
    color: var(--on-surface);
}

[data-theme="dark"] .move-folder-item {
    background: rgba(255, 255, 255, 0.05);
}

.edit-input-group { margin-bottom: var(--space-sm); }
.edit-input-group label { display: block; font-size: 0.85rem; font-weight: 700; margin-bottom: 8px; color: var(--primary); padding-left: 12px;}
.edit-input-group input { margin-bottom: 0; padding: 14px 20px; border-radius: var(--radius-full); }

.detail-nav-btn { 
    position: absolute; top: 50%; transform: translateY(-50%);
    background: var(--surface-container) !important; 
    color: var(--primary) !important; 
    /*   视觉：用轻柔的光影界定边缘 */
    border: 1px solid rgba(139, 121, 103, 0.05) !important; 
    border-radius: 50% !important; 
    width: 56px !important; 
    height: 56px !important; 
    padding: 0 !important; 
    display: flex; align-items: center; justify-content: center; 
    font-size: 1.8rem; cursor: pointer; z-index: 2010; transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.2s;
    box-shadow: 0 8px 24px rgba(115, 102, 88, 0.08), 0 2px 6px rgba(115, 102, 88, 0.04) !important;
}
.detail-nav-btn:active { 
    transform: translateY(calc(-50% + 2px)) scale(0.92) !important; 
    box-shadow: 0 2px 4px rgba(115, 102, 88, 0.12) !important; 
    border-color: rgba(139, 121, 103, 0.1) !important; 
}
[data-theme="dark"] .detail-nav-btn {
    border: 1px solid rgba(255, 255, 255, 0.03) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.2) !important;
}
[data-theme="dark"] .detail-nav-btn:active {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}
#detail-prev { left: -28px; } #detail-next { right: -28px; }

.wb-btn-move, .wb-btn-edit, .wb-btn-del { 
    width: 44px !important; 
    height: 44px !important; 
    padding: 0 !important;
    border-radius: 50% !important; 
    border: none !important;
    box-shadow: 0 4px 12px var(--paper-shadow) !important;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
}
.wb-btn-move:active, .wb-btn-edit:active, .wb-btn-del:active { transform: translateY(4px) !important; box-shadow: none !important; filter: none !important; }
.wb-btn-move { background: var(--tertiary) !important; color: white !important; }
[data-theme="dark"] .wb-btn-move { color: #1a2a22 !important; }
.wb-btn-edit { background: var(--surface-container) !important; color: var(--on-surface) !important; }
.wb-btn-del { background: var(--accent-red) !important; color: white !important; }
[data-theme="dark"] .wb-btn-del { color: #3b0002 !important; }

#wb-grid[data-cols="3"] .wb-btn-move, #wb-grid[data-cols="3"] .wb-btn-edit, #wb-grid[data-cols="3"] .wb-btn-del { width: 36px !important; height: 36px !important; }
#wb-grid[data-cols="4"] .wb-btn-move, #wb-grid[data-cols="4"] .wb-btn-edit, #wb-grid[data-cols="4"] .wb-btn-del { width: 30px !important; height: 30px !important; }

/* 🚀 视觉减负：幽灵态操作组 (Ghost Buttons) */
.batch-bar button { 
    width: auto !important; 
    padding: 8px 12px !important; /* 缩减物理内边距，为移动端小屏释放黄金呼吸空间 */
    border-radius: var(--radius-full) !important; 
    /* 强制剥离 HTML 中残留的 inline 内联样式污染（背景色、廉价投影、生硬边框） */
    box-shadow: none !important; 
    border: none !important;
    background: transparent !important; 
    font-weight: 800 !important;
    font-size: 0.9rem !important; /* 配合方块字微缩字号，提升视觉密度 */
    white-space: nowrap !important; /* 强制光学防线：禁止文字挤压换行导致容器崩塌 */
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}


/* 独立情绪色彩赋予，仅依靠文字/图标传达功能 */
#btn-batch-move { color: var(--primary) !important; }
#btn-batch-del { color: var(--accent-red) !important; }
#btn-batch-cancel { 
    color: var(--on-surface) !important; 
    opacity: 0.5 !important; 
    padding: 10px 12px !important; 
    font-weight: 600 !important; 
}

/* 按压瞬间的物理坍缩与微量阻尼底色 */
.batch-bar button:active { transform: scale(0.92) !important; }
#btn-batch-move:active { background: rgba(139, 121, 103, 0.15) !important; }
#btn-batch-del:active { background: rgba(186, 107, 104, 0.15) !important; }
#btn-batch-cancel:active { opacity: 1 !important; background: rgba(0, 0, 0, 0.05) !important; }

[data-theme="dark"] #btn-batch-cancel:active { background: rgba(255, 255, 255, 0.08) !important; }

.theme-switching * { transition: none !important; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; display: block; will-change: transform, opacity, filter, clip-path; }

@keyframes shake-punch {
    0%, 100% { transform: scale(0.95) translateX(0); }
    25% { transform: scale(0.95) translateX(-4px) rotate(-1deg); }
    75% { transform: scale(0.95) translateX(4px) rotate(1deg); }
}
.btn-long-press.pressing { 
    animation: shake-punch 0.2s infinite; 
    box-shadow: 0 0 0 transparent !important; 
}

/* 🚀 仪式感重塑：打卡按钮进化为“仪式感底座” */
.btn-long-press {
    position: relative;
    overflow: hidden;
    touch-action: none;          
    -webkit-user-select: none;   
    user-select: none;
    -webkit-touch-callout: none; 
    
    /* 🚀 MD3 Extended FAB 排版重构：张弛有度的内部呼吸空间 */
    min-height: 66px; /* 微收垂直高度，配合更宽的左右 Padding 形成修长的药丸浮岛感 */
    padding: 16px 36px !important; 
    border-radius: var(--radius-full) !important; 
    font-size: 1.15rem !important; /* 字号微缩，让位给 Icon 的视觉重心，形成主次张力 */
    letter-spacing: 0.05em !important;
    
    /* 物理深度增强 */
    border: 2px solid rgba(139, 121, 103, 0.1) !important;
    box-shadow: 0 12px 32px rgba(115, 102, 88, 0.12), 0 4px 8px rgba(115, 102, 88, 0.06) !important;
    transition: all 0.4s var(--spring-bouncy) !important;
}

.btn-long-press .lp-bg {
    position: absolute;
    inset: 0;
    background: var(--tertiary);
    transform: scaleX(0);
    transform-origin: left center;
    z-index: 1;
    /* 视觉深度：增加内部流体感 */
    box-shadow: inset 0 0 20px rgba(0,0,0,0.1);
}

/* 🚀 物理反馈：极高频机械微震动，模拟蓄力至临界点的物理张力 */
@keyframes haptic-charge {
    0%, 100% { transform: scale(0.94) translate(0, 0) rotate(0deg); }
    25% { transform: scale(0.94) translate(-1px, 1px) rotate(-0.5deg); }
    50% { transform: scale(0.94) translate(1px, -1px) rotate(0.5deg); }
    75% { transform: scale(0.94) translate(-1px, -1px) rotate(-0.5deg); }
}

.btn-long-press.pressing {
    animation: haptic-charge 0.15s infinite linear !important; 
    box-shadow: 0 2px 4px rgba(115, 102, 88, 0.2) !important;
    border-color: var(--tertiary) !important;
}


.btn-long-press.pressing .lp-bg {
    transform: scaleX(1);
    transition: transform 1.5s linear; 
}

.btn-long-press .lp-text {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px; /* 🚀 MD3 规范：图标与文字间距收紧，形成紧凑的图文单元 */
    font-weight: 900;
}

/* 🚀 强制统一覆盖内部图标的 Inline 样式，锁定 Extended FAB 的视觉重心比例 */
.btn-long-press .lp-text .material-symbols-rounded {
    font-size: 1.7rem !important; /* 确立 Icon 作为绝对的视觉锚点 */
    margin-right: 0 !important; /* 剥离历史遗留的无序 Margin，完全交由 flex gap 管理 */
}

/* 兼容：已完成状态保持沉稳 */
.btn-long-press.done {
    min-height: 72px;
    border-color: transparent !important;
    transform: scale(1) !important;
}


.btn-long-press.done {
    background: var(--tertiary) !important;
    color: var(--on-primary) !important;
    border-color: transparent !important;
}


/* =========================================
   学习模式按钮
========================================= */

/* ---  浅色模式：低饱和底色 + 深色字体 --- */
.mode-btn-classic { background: #d9e3e8 !important; color: #4a657a !important; } /* 浅葱 */
.mode-btn-challenge { background: #e8d5d5 !important; color: #7a4a4a !important; } /* 樱鼠 */
.mode-btn-rote { background: #d5e0d8 !important; color: #4a6355 !important; } /* 柳茶 */
.mode-btn-test { background: #e0dcd9 !important; color: #5c554e !important; } /* 胡桃 */

/* 筛选与打卡 */
.filter-test-btn-group { background: #d4e0de !important; } /* 锈青磁 */
.filter-test-btn-group button { color: #456360 !important; }
.btn-long-press { background: #ead2c3 !important; color: #7a5033 !important; } /* 香色 */
.btn-long-press .lp-bg { background: #c5d1c6 !important; }
.btn-long-press.done { background: #d5e0d8 !important; color: #4a6355 !important; }

/* --- 深色模式：半透明暗色叠底 + 柔光文字 --- */
[data-theme="dark"] .mode-btn-classic { background: rgba(74, 101, 122, 0.4) !important; color: #b0c4d6 !important; }
[data-theme="dark"] .mode-btn-challenge { background: rgba(122, 74, 74, 0.4) !important; color: #d6b0b0 !important; }
[data-theme="dark"] .mode-btn-rote { background: rgba(74, 99, 85, 0.4) !important; color: #b0d6c1 !important; }
[data-theme="dark"] .mode-btn-test { background: rgba(92, 85, 78, 0.4) !important; color: #d1c8c1 !important; }

/* 筛选与打卡 */
[data-theme="dark"] .filter-test-btn-group { background: rgba(69, 99, 96, 0.4) !important; }
[data-theme="dark"] .filter-test-btn-group button { color: #a4c7c3 !important; }
[data-theme="dark"] .btn-long-press { background: rgba(122, 80, 51, 0.4) !important; color: #d6b29a !important; }
[data-theme="dark"] .btn-long-press .lp-bg { background: rgba(74, 99, 85, 0.4) !important; }
[data-theme="dark"] .btn-long-press.done { background: rgba(74, 99, 85, 0.4) !important; color: #b0d6c1 !important; }

.mode-btn-classic, .mode-btn-challenge, .mode-btn-rote, .mode-btn-test {
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s, filter 0.25s;
}

/* =========================================
 首页彩色按钮
========================================= */

.filter-test-btn-group,
.mode-btn-classic, 
.mode-btn-challenge, 
.mode-btn-rote, 
.mode-btn-test,
.btn-long-press {
  border: 1px solid rgba(139, 121, 103, 0.05) !important; /* 极弱物理边缘 */
  /*  依赖底部的软弥散投影 */
  box-shadow: 0 6px 16px rgba(115, 102, 88, 0.06), 0 2px 4px rgba(115, 102, 88, 0.04) !important;
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

.filter-test-btn-group:active,
.mode-btn-classic:active, 
.mode-btn-challenge:active, 
.mode-btn-rote:active, 
.mode-btn-test:active,
.btn-long-press:active:not(.done) {
  /*   物理按压感：缩减投影，卡片下沉贴合底板 */
  box-shadow: 0 2px 4px rgba(115, 102, 88, 0.1) !important;
  border-color: rgba(139, 121, 103, 0.1) !important;
}

[data-theme="dark"] .filter-test-btn-group,
[data-theme="dark"] .mode-btn-classic, 
[data-theme="dark"] .mode-btn-challenge, 
[data-theme="dark"] .mode-btn-rote, 
[data-theme="dark"] .mode-btn-test,
[data-theme="dark"] .btn-long-press {
  border: 1px solid rgba(255, 255, 255, 0.03) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

[data-theme="dark"] .filter-test-btn-group:active,
[data-theme="dark"] .mode-btn-classic:active, 
[data-theme="dark"] .mode-btn-challenge:active, 
[data-theme="dark"] .mode-btn-rote:active, 
[data-theme="dark"] .mode-btn-test:active,
[data-theme="dark"] .btn-long-press:active:not(.done) {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

/* =========================================
     首页通关进度条 (Scheme C)
========================================= */
.mastery-progress-container {
    margin-bottom: 24px;
    padding: 0 4px;
}

.mastery-track {
    width: 100%;
    height: 10px;
    background: rgba(0, 0, 0, 0.06); 
    border-radius: 999px;
    /* 🚀 物理光学：移除轨道剪裁，允许内部荧光光晕向外发散 */
    overflow: visible; 
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
}

[data-theme="dark"] .mastery-track {
    background: rgba(255,255,255,0.06);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.3);
}

.mastery-fill {
    height: 100%;
    background: linear-gradient(90deg, #a4c7b6, #6b847b);
    border-radius: 999px;
    transition: width 1s cubic-bezier(0.2, 0.8, 0.2, 1);
    position: relative;
    /* 内部必须保留 hidden 以容纳扫光动画，光晕交由 box-shadow 向外延展 */
    overflow: hidden;
    /* 🚀 主进度条发光：提取主题绿色作为荧光发散基底 */
    box-shadow: 0 0 12px rgba(107, 132, 123, 0.6), 0 0 4px rgba(107, 132, 123, 0.4);
}

/* 🚀 极夜荧光：深色模式下的穿透力增强 */
[data-theme="dark"] .mastery-fill {
    box-shadow: 0 0 16px rgba(164, 199, 182, 0.5), 0 0 6px rgba(164, 199, 182, 0.3);
}

/* 进度条扫光动画，增加高级感 */
.mastery-fill::after {
    content: '';
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0) 100%);
    animation: shimmer-sweep 2.5s infinite linear;
}

@keyframes shimmer-sweep {
    0% { transform: translateX(-150%); }
    100% { transform: translateX(150%); }
}

/* 🚀 生命力呼吸动画：专为光晕进度条定制 */
@keyframes bar-glow-breathe {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.2); }
}

/* 🚀 荧光指示条矩阵 (Neon Sub-Progress Bars) */
/* 1. 强制破解 HTML 中内联的 overflow: hidden，释放被压抑的色彩光晕 */
.sub-progress-group > div > div:nth-child(2) {
    overflow: visible !important;
}

/* 2. 注入三维靶向的高频荧光与错峰呼吸律动 */
#prog-bar-kanji {
    box-shadow: 0 0 10px rgba(245, 176, 65, 0.7), 0 0 3px rgba(245, 176, 65, 0.5) !important;
    border-radius: 999px !important;
    animation: bar-glow-breathe 2.5s infinite ease-in-out;
}
#prog-bar-kana {
    box-shadow: 0 0 10px rgba(231, 76, 60, 0.7), 0 0 3px rgba(231, 76, 60, 0.5) !important;
    border-radius: 999px !important;
    animation: bar-glow-breathe 2.5s infinite ease-in-out 0.8s; /* 错开呼吸频率，增加有机感 */
}
#prog-bar-meaning {
    box-shadow: 0 0 10px rgba(208, 211, 212, 0.8), 0 0 3px rgba(208, 211, 212, 0.6) !important;
    border-radius: 999px !important;
    animation: bar-glow-breathe 2.5s infinite ease-in-out 1.6s;
}

/* 🚀 极夜荧光映射：增强暗黑模式下的赛博朋克光影深度 */
[data-theme="dark"] #prog-bar-kanji { box-shadow: 0 0 12px rgba(245, 176, 65, 0.5), 0 0 4px rgba(245, 176, 65, 0.3) !important; }
[data-theme="dark"] #prog-bar-kana { box-shadow: 0 0 12px rgba(231, 76, 60, 0.6), 0 0 4px rgba(231, 76, 60, 0.3) !important; }
[data-theme="dark"] #prog-bar-meaning { box-shadow: 0 0 12px rgba(255, 255, 255, 0.4), 0 0 4px rgba(255, 255, 255, 0.2) !important; }

/* 防止 iOS 快速点击导致的意外缩放 */
.btn-action, .dt-spell-key, .dt-choice-btn, .wb-card, button {
  touch-action: manipulation;
}

/* =========================================
     高密度语义按钮组 (Semantic Silicone Buttons)
     涵盖：导入新词、恢复内置、新建夹、删除夹
========================================= */
/* 1. 全局主导按钮 (Primary Silicone)：确认导入新词 */
#btn-import {
    --import-bg: #dcd3ca;         
    --import-text: #5c5249;       
    --import-bg-dark: rgba(92, 82, 73, 0.3); 
    --import-text-dark: #cbbbae;  
    
    width: 100%;
    margin-top: 12px; margin-bottom: 28px;
    padding: 18px 24px;
    background: var(--import-bg);
    color: var(--import-text);
    font-weight: 800; font-size: 1.1rem; letter-spacing: 1px;
    border-radius: var(--radius-full) !important;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
    border: 1px solid rgba(139, 121, 103, 0.04);
    box-shadow: 0 8px 24px rgba(115, 102, 88, 0.06), 0 2px 6px rgba(115, 102, 88, 0.04);
}

/* 2. 次级容器按钮 (Tonal Silicone) 强力覆盖：新建夹 */
#btn-new-folder {
    background: var(--primary-container) !important;
    color: var(--primary) !important;
    border: 1px solid rgba(139, 121, 103, 0.04) !important;
    box-shadow: 0 6px 12px rgba(115, 102, 88, 0.06), 0 2px 4px rgba(115, 102, 88, 0.04) !important;
    border-radius: var(--radius-full) !important;
    font-weight: 800 !important;
    transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

/* 3. 警示破坏性按钮 (Error Semantic)：删除夹、恢复内置词汇 */
/* 强力覆盖原先廉价的红色线框，注入柔软且严肃的警示实体胶囊 */
#btn-del-folder, #btn-reset {
    background: var(--accent-red-bg) !important; 
    color: var(--accent-red) !important;
    border: 1px solid rgba(186, 107, 104, 0.08) !important;
    box-shadow: 0 6px 12px rgba(186, 107, 104, 0.06), 0 2px 4px rgba(186, 107, 104, 0.04) !important;
    border-radius: var(--radius-full) !important;
    font-weight: 800 !important;
    transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

/* 统一深层坍缩物理引擎 (Unified 0.92 Deep Squish) */
#btn-import:active, #btn-new-folder:active {
    transform: scale(0.92) !important;
    box-shadow: 0 1px 2px rgba(115, 102, 88, 0.12) !important;
    border-color: rgba(139, 121, 103, 0.1) !important;
    filter: brightness(0.94);
}

#btn-del-folder:active, #btn-reset:active {
    transform: scale(0.92) !important;
    box-shadow: 0 1px 2px rgba(186, 107, 104, 0.2) !important;
    border-color: rgba(186, 107, 104, 0.15) !important;
    filter: brightness(0.94);
}

/* 极夜墨迹暗色适配 (Dark Mode Adaptation) */
[data-theme="dark"] #btn-import {
    background: var(--import-bg-dark); color: var(--import-text-dark);
    border: 1px solid rgba(255, 255, 255, 0.03);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 2px 6px rgba(0, 0, 0, 0.2);
}
[data-theme="dark"] #btn-new-folder {
    background: rgba(214, 195, 176, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.03) !important;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}
[data-theme="dark"] #btn-del-folder, [data-theme="dark"] #btn-reset {
    background: rgba(255, 180, 169, 0.08) !important;
    border-color: rgba(255, 180, 169, 0.05) !important;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

/* 暗场极速物理坍缩：死黑压痕缝隙 */
[data-theme="dark"] #btn-import:active, [data-theme="dark"] #btn-new-folder:active {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
    transform: scale(0.92) !important;
}
[data-theme="dark"] #btn-del-folder:active, [data-theme="dark"] #btn-reset:active {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-color: rgba(255, 180, 169, 0.1) !important;
    transform: scale(0.92) !important;
}


[data-theme="dark"] #btn-import {
    background: var(--import-bg-dark);
    color: var(--import-text-dark);
    border: 1px solid rgba(255, 255, 255, 0.03);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] #btn-import:active {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    border-color: rgba(255, 255, 255, 0.06);
    transform: scale(0.96);
}

/* =========================================
     原生 Ruby 假名标注样式优化
========================================= */
ruby {
    ruby-align: center;      /* 确保假名在汉字正上方居中 */
    margin: 0 1px;           /* 极微弱的间距，防止汉字粘连 */
}

rt {
    font-size: 0.65em;
    font-family: var(--font-jp-sans);
    color: var(--tertiary);
    font-weight: 700;
    opacity: 0.9;
    transform: translateY(2px);
    letter-spacing: 0;
    margin-bottom: 2px;
}

[data-theme="dark"] rt {
    color: var(--on-surface);
    opacity: 0.7;
}

/*   滚动条美化（原生 App 质感） */
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(139, 121, 103, 0.2); /* 使用你的主题咖色，降低透明度 */
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(139, 121, 103, 0.5);
}

/* ==========================================
     终极版：三维靶向进度条 (黄-红-白)
   ========================================== */
.card-tri-bar {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    gap: 3px;
    z-index: 10;
}

.tri-bar-segment {
    width: 14px;
    height: 4px;
    border-radius: 2px;
    background: rgba(0, 0, 0, 0.1); /* 默认灰色（未掌握） */
    transition: background 0.3s ease, transform 0.2s ease;
}

/* 黄杠：看汉字知释义 */
.tri-bar-segment.bar-y.active { background: #F5B041; box-shadow: 0 0 4px rgba(245, 176, 65, 0.6); }
/* 红杠：听读音/看假名知释义 */
.tri-bar-segment.bar-r.active { background: #E74C3C; box-shadow: 0 0 4px rgba(231, 76, 60, 0.6); }
/* 白杠：看释义能写出 */
.tri-bar-segment.bar-w.active { background: #FDFEFE; box-shadow: 0 0 4px rgba(253, 254, 254, 0.8); }

/* 暗黑模式适配 */
[data-theme="dark"] .tri-bar-segment { background: rgba(255, 255, 255, 0.15); }

/*   防止超长单词/外来语撑爆屏幕边界 */
.word-main, .dt-word {
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word; 
    max-width: 100%;
    line-height: 1.2;
}

/* ==========================================
   莲花加载微交互动画 (TTS 网络延迟缓冲)
   ========================================== */
@keyframes sakuraSpin {
    0% { transform: rotate(0deg) scale(1); opacity: 0.7; color: inherit; }
    50% { transform: rotate(180deg) scale(1.1); opacity: 1; color: #E74C3C; } /* 旋转时泛起一抹微红 */
    100% { transform: rotate(360deg) scale(1); opacity: 0.7; color: inherit; }
}
.speaker-loading {
    pointer-events: none; /* 加载时禁止重复狂点 */
}
.speaker-loading .material-symbols-rounded {
    animation: sakuraSpin 1s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================
   ♿ 无障碍焦点可见样式
   ========================================== */
button:focus-visible,
[role="button"]:focus-visible,
.nav-item:focus-visible,
.glass-icon-btn:focus-visible,
.btn-action:focus-visible,
.wb-card:focus-visible,
.dt-spell-key:focus-visible,
.dt-choice-btn:focus-visible,
.speaker-icon:focus-visible,
.star-btn:focus-visible {
    outline: 3px solid var(--tertiary);
    outline-offset: 2px;
}