/* ============================================================
   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-full);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(--color-primary);color:#fff;box-shadow:var(--shadow-button-primary)}
.btn--primary:hover{background:var(--color-primary-dark)}

.trial-btn{
  width:34px;height:34px;border-radius:50%;border:2px solid var(--color-success);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;cursor:pointer;
}
.trial-btn.trial-open{color:var(--color-success);background:transparent}
.trial-btn.trial-filled{color:#fff;background:var(--color-success)}
.trial-btn.trial-done{color:var(--text-tertiary);background:var(--border-light);border-color:var(--border-strong);cursor:not-allowed}
.trial-btn.trial-disabled{color:var(--text-tertiary);background:var(--border-light);border-color:var(--border-strong);cursor:not-allowed}

/* Assessment trial scheduling modal: keep labels and dropdown options readable. */
.modal-trial{max-width:520px}
.trial-field-label{
  display:block;
  margin-bottom:6px;
  font-size:14px;
  font-weight:600;
  color:var(--text-primary);
}
.trial-select{
  height:46px;
  font-size:15px;
  color:var(--text-primary);
  background-color:var(--bg-surface-solid);
}
.trial-select option{
  color:var(--text-primary);
  background-color:var(--bg-surface-solid);
  font-size:15px;
}
.btn--primary:active{transform:scale(.97)}

.btn--ghost,.btn-outline{
  background:var(--color-primary-bg);color:var(--color-primary);
  border:1px solid var(--border-light);box-shadow:var(--shadow-card);
}
.btn--ghost:hover,.btn-outline:hover{
  background:var(--color-primary-bg-hover);color:var(--color-primary-dark);
  border-color:var(--border-strong);transform:translateY(-1px);
  box-shadow:var(--shadow-card-hover);
}
.btn--ghost:active,.btn-outline:active{
  background:var(--color-primary-bg);color:var(--color-primary);
  border-color:var(--color-primary);transform:translateY(0) scale(.97);box-shadow:none;
}

.btn--danger{
  background:var(--color-danger-bg);color:var(--color-danger);
  border:1px solid rgba(229,83,83,.18);box-shadow:var(--shadow-card);
}
.btn--danger:hover{
  background:rgba(229,83,83,.12);color:#c53030;
  border-color:rgba(229,83,83,.34);transform:translateY(-1px);
  box-shadow:0 2px 4px rgba(229,83,83,.08),0 6px 16px rgba(229,83,83,.10);
}
.btn--danger:active{
  background:rgba(229,83,83,.08);color:var(--color-danger);
  border-color:rgba(229,83,83,.24);transform:translateY(0) scale(.97);box-shadow:none;
}

.btn--icon{width:var(--touch-min);min-width:unset;padding:0;
  background:transparent;color:var(--text-secondary);border-radius:var(--radius-full)}
.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-full)}
.btn--lg{height:52px;padding:0 var(--space-32);font-size:var(--text-h3);border-radius:var(--radius-full)}

.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(--bg-surface-solid);
  border:1px solid var(--border-light);border-radius:var(--radius-md);
  box-shadow:var(--shadow-card);padding:var(--space-16);
}
.card--clickable{cursor:pointer}
.card--clickable:hover{
  transform:translateY(-2px) scale(1.005);
  box-shadow:var(--shadow-card-hover);
  border-color:var(--border-strong);
}
.card--clickable:active{transform:translateY(0) scale(.995);box-shadow:var(--shadow-card)}
.card--clickable:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}

.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)}
.card--section{margin-top:var(--space-section)}

/* ==========================================================
   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(--bg-surface-solid);
  border:1px solid var(--border-light);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-family:var(--font-sans);font-size:var(--text-body);font-weight:var(--weight-bold);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-modal);
  animation:toastSlideIn var(--duration-base) var(--ease-out);
  pointer-events:auto;
}
.toast--success{background:var(--text-primary);color:var(--color-success)}
.toast--error{background:var(--text-primary);color:var(--color-danger)}
.toast--warning{background:var(--text-primary);color:var(--color-warning)}
.toast--info{background:var(--text-primary);color:#fff}

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

@keyframes toastSlideIn{from{transform:translate(-50%,-46%) scale(.96);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:1}}

/* ==========================================================
   7. .tabs — 标签导航
   变体：底部导航栏 / 顶部Tab切换
   ========================================================== */
.tab-bar{
  display:flex;gap:var(--space-4);padding:var(--space-4);
  background:var(--bg-surface-solid);
  border:1px solid var(--border-light);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: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--pixel{
  width:100%;background:var(--bg-surface-solid);
  border:1px solid var(--border-light);border-radius:var(--radius-md);
  box-shadow:var(--shadow-card);padding:32px 20px;
}
.empty-state--pixel svg{width:72px;height:72px}
.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(--bg-surface-solid);
  border:1px solid var(--border-light);
}
.word-card__back{
  position:absolute;inset:0;transform:rotateY(180deg);
  background:var(--bg-surface-solid);
  border:1px solid var(--border-light);
  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:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:var(--text-body);font-weight:var(--weight-bold);
  color:var(--color-primary);background:var(--color-primary-bg);
  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)}
.avatar--editable{cursor:pointer;position:relative;overflow:hidden}
.avatar--editable img{width:100%;height:100%;object-fit:cover;display:block}
.avatar--editable .avatar-input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.avatar--editable .avatar-edit-badge{position:absolute;right:2px;bottom:2px;width:20px;height:20px;border-radius:50%;background:rgba(0,0,0,.62);color:#fff;font-size:11px;line-height:20px;text-align:center;pointer-events:none}
.avatar-crop-stage{position:relative;width:min(300px,76vw);aspect-ratio:1;margin:0 auto;border-radius:14px;overflow:hidden;background:#111827;touch-action:none;cursor:grab}
.avatar-crop-stage:active{cursor:grabbing}
.avatar-crop-stage img{position:absolute;top:0;left:0;max-width:none;transform-origin:0 0;user-select:none;pointer-events:none}
.avatar-crop-guide{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 2px rgba(255,255,255,.85)}
.avatar-crop-guide::before,.avatar-crop-guide::after{content:'';position:absolute;background:rgba(255,255,255,.24)}
.avatar-crop-guide::before{left:33.33%;right:33.33%;top:0;bottom:0}
.avatar-crop-guide::after{top:33.33%;bottom:33.33%;left:0;right:0}

/* ==========================================================
   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(--bg-surface-solid);
  border-top:1px solid var(--border-light);
}
.bottom-nav-spacer{height:80px} /* 为底部导航留空间 */

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