/* ============================================================
   Components CSS — 15个统一组件 · BEM命名
   依赖：tokens.css → base.css → components.css
   ============================================================ */

/* ==========================================================
   1. .btn — 按钮系统
   变体：primary / ghost / danger / icon
   ========================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-8);
  height:var(--touch-min);padding:0 var(--space-24);
  font-size:var(--text-body);font-weight:var(--weight-medium);
  border-radius:var(--radius-md);border:none;
  cursor:pointer;user-select:none;
  transition:all var(--duration-fast) var(--ease-out);
  min-width:var(--touch-min);white-space:nowrap;
}
.btn--primary{background:var(--gradient-primary);color:#fff;box-shadow:var(--shadow-button-primary)}
.btn--primary:hover{background:var(--color-primary-dark)}
.btn--primary:active{transform:scale(.97)}

.btn--ghost,.btn-outline{background:var(--color-primary-bg);color:var(--color-primary)}
.btn--ghost:hover,.btn-outline:hover{background:var(--color-primary-bg-hover)}
.btn--ghost:active,.btn-outline:active{transform:scale(.97)}

.btn--danger{background:var(--color-danger-bg);color:var(--color-danger)}
.btn--danger:hover{background:rgba(229,83,83,.12)}
.btn--danger:active{transform:scale(.97)}

.btn--icon{width:var(--touch-min);min-width:unset;padding:0;
  background:transparent;color:var(--text-secondary);border-radius:var(--radius-sm)}
.btn--icon:hover{background:var(--border-light);color:var(--text-primary)}

.btn--sm{height:36px;padding:0 var(--space-16);font-size:var(--text-caption);border-radius:var(--radius-sm)}
.btn--lg{height:52px;padding:0 var(--space-32);font-size:var(--text-h3);border-radius:var(--radius-md)}

.btn--block{width:100%}
.btn[disabled]{opacity:.4;pointer-events:none}

/* ==========================================================
   2. .input — 输入系统
   变体：text / search / select
   ========================================================== */
.input{
  width:100%;height:var(--touch-min);padding:0 var(--space-16);
  font-size:var(--text-body);color:var(--text-primary);
  background:var(--bg-surface-solid);border:1px solid var(--border-standard);
  border-radius:var(--radius-sm);
  transition:border-color var(--duration-fast) var(--ease-out),
             box-shadow var(--duration-fast) var(--ease-out);
}
.input::placeholder{color:var(--text-placeholder)}
.input:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-bg)}

.input--search{padding-left:40px;border-radius:var(--radius-full);background:var(--border-light);border:none}
.input--search:focus{background:var(--bg-surface-solid);border:1px solid var(--color-primary)}

.input--select{appearance:none;padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23949499' stroke-width='2'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center}

.input-group{display:flex;flex-direction:column;gap:var(--space-4)}
.input-group__label{font-size:var(--text-caption);font-weight:var(--weight-medium);color:var(--text-secondary)}

/* ==========================================================
   3. .card — 卡片系统
   变体：基础 / 可点击 / 统计卡片
   ========================================================== */
.card{
  background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur));
  -webkit-backdrop-filter:blur(var(--glass-blur));
  border:var(--glass-border);border-radius:var(--radius-md);
  box-shadow:var(--shadow-card);padding:var(--space-16);
}
.card--clickable{cursor:pointer}
.card--clickable:hover{transform:translateY(-1px);
  box-shadow:var(--shadow-card-hover)}

.card--stat{text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--space-4)}
.card--stat .card__number{font-size:28px;font-weight:800;letter-spacing:-.02em}
.card--stat .card__label{font-size:var(--text-caption);color:var(--text-tertiary)}

/* ==========================================================
   4. .badge — 状态标签
   变体：新学 / 复习 / 掌握 / 正确 / 错误
   ========================================================== */
.badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:var(--space-4) var(--space-8);
  font-size:var(--text-caption);font-weight:var(--weight-medium);
  border-radius:var(--radius-full);white-space:nowrap;
}
.badge--new{background:var(--color-primary-bg);color:var(--color-primary)}
.badge--review{background:var(--color-warning-bg);color:var(--color-warning)}
.badge--mastered{background:var(--color-success-bg);color:var(--color-success)}
.badge--correct{background:var(--color-success-bg);color:var(--color-success)}
.badge--wrong{background:var(--color-danger-bg);color:var(--color-danger)}
.badge--ghost{background:transparent;border:1px solid var(--border-standard);color:var(--text-tertiary)}

/* ==========================================================
    全局 focus-visible
   ========================================================== */
:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;border-radius:var(--radius-sm)}
.btn:focus-visible,.input:focus-visible,.toggle:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}

/* ==========================================================
   5. .modal — 模态框系统
   结构：overlay > modal__content > modal__header + modal__body + modal__footer
   ========================================================== */
.modal-overlay{
  position:fixed;inset:0;z-index:1000;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg-overlay);
  animation:modalFadeIn var(--duration-base) var(--ease-out);
  padding:var(--space-16);
}
.modal-overlay--closing{animation:modalFadeOut var(--duration-base) var(--ease-out)}

.modal{
  width:100%;max-width:420px;max-height:85vh;overflow-y:auto;
  background:var(--glass-bg-modal);backdrop-filter:blur(var(--glass-blur));
  -webkit-backdrop-filter:blur(var(--glass-blur));
  border:var(--glass-border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-modal);
  animation:modalSlideUp var(--duration-base) var(--ease-out);
}
.modal--closing{animation:modalSlideDown var(--duration-base) var(--ease-out)}

.modal__header{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--space-16) var(--space-16) 0;
}
.modal__title{font-size:var(--text-h3);font-weight:var(--weight-bold)}
.modal__body{padding:var(--space-16)}
.modal__footer{
  display:flex;gap:var(--space-8);justify-content:flex-end;
  padding:0 var(--space-16) var(--space-16);
}

@keyframes modalFadeIn{from{opacity:0}to{opacity:1}}
@keyframes modalFadeOut{from{opacity:1}to{opacity:0}}
@keyframes modalSlideUp{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes modalSlideDown{from{transform:translateY(0);opacity:1}to{transform:translateY(20px);opacity:0}}

/* ==========================================================
   6. .toast — 消息提示
   变体：success / error / warning / info
   行为：底部滑入，2s 自动消失
   ========================================================== */
.toast{
  display:flex;align-items:center;gap:var(--space-8);
  padding:var(--space-8) var(--space-16);
  font-size:var(--text-caption);font-weight:var(--weight-medium);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-modal);
  animation:toastSlideIn var(--duration-base) var(--ease-out);
  pointer-events:auto;
}
.toast--success{background:#1D1D1F;color:#4ADE80}
.toast--error{background:#1D1D1F;color:#F87171}
.toast--warning{background:#1D1D1F;color:#F6B83D}
.toast--info{background:#1D1D1F;color:#fff}

.toast-container{
  position:fixed;bottom:var(--space-24);left:50%;transform:translateX(-50%);
  z-index:2000;display:flex;flex-direction:column;align-items:center;gap:var(--space-8);
  pointer-events:none;
}

@keyframes toastSlideIn{from{transform:translateY(12px);opacity:0}to{transform:translateY(0);opacity:1}}

/* ==========================================================
   7. .tabs — 标签导航
   变体：底部导航栏 / 顶部Tab切换
   ========================================================== */
.tab-bar{
  display:flex;gap:var(--space-4);padding:var(--space-4);
  background:var(--bg-surface);backdrop-filter:blur(var(--glass-blur));
  -webkit-backdrop-filter:blur(var(--glass-blur));
  border:var(--glass-border);border-radius:var(--radius-full);
}
.tab-bar__item{
  flex:1;display:flex;align-items:center;justify-content:center;gap:var(--space-4);
  padding:var(--space-8) var(--space-4);
  font-size:var(--text-caption);font-weight:var(--weight-medium);
  color:var(--text-tertiary);border-radius:var(--radius-full);
  transition:all var(--duration-fast) var(--ease-out);
  min-height:36px;
}
.tab-bar__item--active{background:var(--color-primary-bg);color:var(--color-primary)}

/* 顶部Tab（较大） */
.tab-top{display:flex;gap:0;border-bottom:1px solid var(--border-light)}
.tab-top__item{
  padding:var(--space-8) var(--space-16);
  font-size:var(--text-body);font-weight:var(--weight-medium);
  color:var(--text-tertiary);
  border-bottom:2px solid transparent;
  transition:all var(--duration-fast) var(--ease-out);
}
.tab-top__item--active{color:var(--color-primary);border-bottom-color:var(--color-primary)}

/* ==========================================================
   8. .progress — 进度条
   ========================================================== */
.progress{height:6px;border-radius:3px;background:var(--border-light);overflow:hidden}
.progress__fill{height:100%;border-radius:3px;
  background:linear-gradient(90deg,var(--color-primary-bg),var(--color-primary));
  transition:width var(--duration-base) var(--ease-out)}

.progress--labeled{display:flex;flex-direction:column;gap:var(--space-4)}
.progress--labeled .progress__header{display:flex;justify-content:space-between;
  font-size:var(--text-caption);color:var(--text-secondary)}

/* ==========================================================
   9. .skeleton — 骨架屏
   变体：card / text / circle
   ========================================================== */
.skeleton{
  background:linear-gradient(90deg,var(--border-light) 25%,var(--border-standard) 50%,var(--border-light) 75%);
  background-size:200% 100%;animation:skeletonShimmer 1.5s infinite;
  border-radius:var(--radius-sm);
}
.skeleton--card{height:120px;border-radius:var(--radius-md)}
.skeleton--text{height:15px;margin-bottom:var(--space-8);width:100%}
.skeleton--text:last-child{width:60%}
.skeleton--circle{width:48px;height:48px;border-radius:50%}

@keyframes skeletonShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ==========================================================
   10. .empty-state — 空状态
   ========================================================== */
.empty-state{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:var(--space-48) var(--space-16);text-align:center;gap:var(--space-16);
}
.empty-state__icon{width:80px;height:80px;color:var(--text-tertiary);opacity:.4}
.empty-state__title{font-size:var(--text-h3);font-weight:var(--weight-medium);color:var(--text-secondary)}
.empty-state__desc{font-size:var(--text-caption);color:var(--text-tertiary);max-width:280px}

/* ==========================================================
   11. .error-state — 异常状态
   ========================================================== */
.error-state{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:var(--space-48) var(--space-16);text-align:center;gap:var(--space-16);
}
.error-state__icon{width:64px;height:64px;color:var(--color-danger);opacity:.5}
.error-state__title{font-size:var(--text-h3);font-weight:var(--weight-medium);color:var(--text-primary)}
.error-state__desc{font-size:var(--text-caption);color:var(--text-tertiary);max-width:300px}

/* ==========================================================
   12. .word-card — 单词卡片（翻转效果）
   ========================================================== */
.word-card{
  perspective:800px;width:100%;max-width:400px;margin:0 auto;
}
.word-card__inner{
  position:relative;transition:transform var(--duration-base) var(--ease-out);
  transform-style:preserve-3d;
}
.word-card--flipped .word-card__inner{transform:rotateY(180deg)}

.word-card__front,.word-card__back{
  backface-visibility:hidden;border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);padding:var(--space-24);
}
.word-card__front{
  background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur));
  -webkit-backdrop-filter:blur(var(--glass-blur));
  border:var(--glass-border);
}
.word-card__back{
  position:absolute;inset:0;transform:rotateY(180deg);
  background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur));
  -webkit-backdrop-filter:blur(var(--glass-blur));
  border:var(--glass-border);
  overflow-y:auto;
}

.word-card__word{font-size:28px;font-weight:800;letter-spacing:-.01em;
  font-family:var(--font-word);color:var(--text-primary);margin-bottom:var(--space-4)}
.word-card__phonetic{font-size:var(--text-caption);color:var(--text-tertiary);margin-bottom:var(--space-16)}
.word-card__meaning{font-size:var(--text-body);color:var(--text-secondary);line-height:var(--leading-body)}
.word-card__divider{width:100%;height:1px;background:var(--border-light);margin:var(--space-16) 0}
.word-card__story{font-size:var(--text-caption);color:var(--text-secondary);line-height:var(--leading-body)}

/* ==========================================================
   13. .stat-grid — 统计数字网格
   ========================================================== */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:var(--space-8)}
.stat-grid .card--stat{padding:var(--space-16)}

/* ==========================================================
   14. .avatar — 用户头像
   ========================================================== */
.avatar{
  width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:var(--text-body);font-weight:var(--weight-bold);
  color:#fff;background:var(--color-primary);
  flex-shrink:0;
}
.avatar--sm{width:32px;height:32px;font-size:var(--text-caption)}
.avatar--lg{width:56px;height:56px;font-size:var(--text-h2)}

/* ==========================================================
   15. .toggle — 开关
   ========================================================== */
.toggle{
  width:48px;height:28px;border-radius:14px;
  background:var(--border-standard);
  cursor:pointer;position:relative;
  transition:background var(--duration-fast) var(--ease-out);
}
.toggle::after{
  content:'';position:absolute;top:3px;left:3px;
  width:22px;height:22px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.15);
  transition:transform var(--duration-fast) var(--ease-out);
}
.toggle--on{background:var(--color-primary)}
.toggle--on::after{transform:translateX(20px)}

/* ==========================================================
    通用页面布局
   ========================================================== */

/* 页面头部 */
.page-header{
  padding:var(--space-16) var(--space-16) var(--space-8);
  display:flex;align-items:center;justify-content:space-between;
}
.page-header__title{font-size:var(--text-h2);font-weight:var(--weight-bold)}

/* 内容区 */
.page-content{padding:var(--space-8) var(--space-16) var(--space-32)}
.page-content>.card,.page-content>.glass{margin-bottom:var(--space-16)}

/* 底部导航栏（移动端固定底） */
.bottom-nav{
  display:flex;justify-content:space-evenly;
  position:fixed;bottom:0;left:0;right:0;z-index:100;
  padding:var(--space-8) var(--space-16) max(var(--space-8),env(safe-area-inset-bottom));
  background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur));
  -webkit-backdrop-filter:blur(var(--glass-blur));
  border-top:var(--glass-border);
}
.bottom-nav-spacer{height:80px} /* 为底部导航留空间 */

/* 分隔线 */
.divider{width:100%;height:1px;background:var(--border-light)}