/* ═══════════════════════════════════════════════════════════
   app.css — Bridge Layer (兼容层)

   策略：保留 app.js 使用的所有旧 class 名，值用 tokens.css 变量
   加载顺序：tokens.css → base.css → components.css → app.css

   旧 class → 新 BEM 映射：
     .btn-primary → .btn--primary    .glass-card → .glass
     .btn-outline → .btn--ghost      .glass-input → .input
     .btn-danger  → .btn--danger     .btn-full → .btn--block
     .btn-sm → .btn--sm              .btn-icon → .btn--icon
     .input-label → .input-group__label
     .tabbar → .bottom-nav            .progress-bar → .progress
   ═══════════════════════════════════════════════════════════ */

/* ═══ Legacy Tokens (memory 专用色) ═══ */
:root {
  --pet-pink: #e8b4b8;
  --pet-pink-dark: #e8989d;
  --pet-green: #b4d4b4;
  --pet-green-dark: #8cc48c;
  --pet-orange: #f0c8a0;
  --pet-orange-dark: #e8a870;
  --pet-purple: #c4b4d4;
  --pet-purple-dark: #a78bfa;
  --pet-gold: #f39c12;
  --pet-blue: #7ba7c9;
  --pet-blue-dark: #6b9ab8;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ═══ View System ═══ */
.view{min-height:100dvh}
.view.hidden{display:none!important}
.tab-content{display:none;padding:var(--space-16);padding-bottom:calc(80px + var(--safe-bottom))}
.tab-content.active{display:block}
.hidden{display:none!important}

/* ═══ Splash ═══ */
#splash{
  position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;
  background:var(--bg-page);
  transition:opacity var(--duration-base) var(--ease-out);
}
#splash.hide{opacity:0;pointer-events:none}
.splash-logo{text-align:center}
.splash-logo svg{width:100px;height:100px;animation:splash-bounce 1.5s ease infinite}
.splash-logo h1{margin-top:var(--space-16);font-size:var(--text-h3);font-weight:var(--weight-bold);color:var(--color-primary);letter-spacing:4px}
@keyframes splash-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* ═══ Login ═══ */
.login-container{
  min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:var(--space-24);
}
.login-card{padding:var(--space-32) var(--space-24);width:100%;max-width:380px;text-align:center}
.login-card h2{font-size:var(--text-h3);margin-bottom:var(--space-4)}
.login-sub{color:var(--text-secondary);font-size:var(--text-caption);margin-bottom:var(--space-24)}
.login-form{text-align:left}
.input-label{display:block;font-size:var(--text-caption);font-weight:var(--weight-medium);color:var(--text-secondary);margin:12px 0 6px}
.code-row{display:flex;gap:var(--space-8)}
.code-row .glass-input{flex:1}
.code-row .btn{flex-shrink:0}
#login-btn{margin-top:var(--space-24)}
.login-hint{text-align:center;margin-top:var(--space-16);font-size:var(--text-small);color:var(--text-tertiary)}

/* ═══ Topbar ═══ */
.topbar{
  position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;
  height:52px;padding:0 var(--space-8);
  background:var(--glass-bg);
  backdrop-filter:blur(var(--glass-blur));
  -webkit-backdrop-filter:blur(var(--glass-blur));
  border-bottom:var(--glass-border);
}
.topbar-title{font-size:var(--text-body);font-weight:var(--weight-bold)}

/* ═══ Glass Surfaces (旧兼容) ═══ */
.glass-card{
  background:linear-gradient(135deg,rgba(196,129,94,0.05) 0%,transparent 60%),var(--glass-bg);
  backdrop-filter:blur(var(--glass-blur));
  -webkit-backdrop-filter:blur(var(--glass-blur));
  border:var(--glass-border);
  border-left:3px solid var(--color-primary);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
  margin-bottom:var(--space-16);
}
.glass-input{
  background:var(--bg-surface-solid);
  backdrop-filter:blur(var(--glass-blur));
  -webkit-backdrop-filter:blur(var(--glass-blur));
  border:1px solid var(--border-standard);
  border-radius:var(--radius-sm);
  padding:12px var(--space-16);
  width:100%;
  font-size:var(--text-body);
  transition:border-color var(--duration-fast) var(--ease-out);
}
.glass-input:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-bg)}

/* ═══ Buttons — 旧 modifier → 新 BEM 映射 ═══ */
/* .btn 基类由 components.css 提供，此处仅定义旧 modifier */
.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-outline{background:var(--color-primary-bg);color:var(--color-primary)}
.btn-outline:hover{background:var(--color-primary-bg-hover)}
.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-success{background:var(--color-success-bg);color:var(--color-success)}
.btn-success:hover{background:rgba(52,168,115,.12)}
.btn-success:active{transform:scale(.97)}

.btn-sm{height:36px;padding:0 var(--space-16);font-size:var(--text-caption);border-radius:var(--radius-sm)}
.btn-full{width:100%}
.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)}

/* ═══ Cards ═══ */
/* .card 由 components.css 提供完整玻璃样式，此处不覆盖 */
.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-8);margin-bottom:var(--space-16)}
.stat-item{text-align:center;padding:14px var(--space-8)}
.stat-item .stat-num{font-size:28px;font-weight:800;letter-spacing:-.02em;color:var(--color-primary)}
.stat-item .stat-label{font-size:var(--text-small);color:var(--text-secondary);margin-top:2px}

/* ═══ Word Card (旧版简单卡片，无翻转) ═══ */
.word-card{
  padding:var(--space-24) var(--space-16);text-align:center;min-height:200px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:var(--space-8);
  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-lg);
  box-shadow:var(--shadow-card);
}
.word-card .word-text{font-size:var(--text-h1);font-weight:800;letter-spacing:2px;font-family:var(--font-word)}
.word-card .phonetic{font-size:var(--text-caption);color:var(--text-secondary)}
.word-card .meaning{font-size:var(--text-body);color:var(--text-primary);margin-top:var(--space-4)}
.word-card .example{font-size:var(--text-caption);color:var(--text-secondary);font-style:italic;margin-top:var(--space-8)}
.word-actions{display:flex;gap:12px;justify-content:center;margin-top:var(--space-16)}

/* ═══ Match Exercise ═══ */
.match-sentence{font-size:1.1rem;line-height:1.7;color:var(--text-primary);padding:var(--space-16) 0;text-align:center;font-style:italic;min-height:80px;display:flex;align-items:center;justify-content:center}
.match-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:var(--space-16)}
.match-opt{padding:var(--space-12) var(--space-8);border:2px solid var(--border-light);border-radius:var(--radius-md);text-align:center;font-weight:600;cursor:pointer;transition:all .15s;background:var(--glass-bg);font-size:.95rem}
.match-opt:active{transform:scale(.97)}
.match-opt.correct{background:#d4edda;border-color:#28a745;color:#155724}
.match-opt.wrong{background:#f8d7da;border-color:#dc3545;color:#721c24}
.match-opt:disabled{pointer-events:none;opacity:.85}
.match-score{display:flex;justify-content:center;gap:24px;margin:16px 0;font-size:.9rem;font-weight:600}
.match-result{text-align:center;padding:var(--space-16)}
.match-result .big-icon{font-size:3rem;display:block;margin-bottom:var(--space-8)}
.match-translation{font-size:.82rem;color:var(--text-secondary);margin-top:4px}

/* ═══ Progress Bar (旧命名) ═══ */
.progress-bar{height:6px;background:var(--border-light);border-radius:3px;overflow:hidden}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--color-primary-bg),var(--color-primary));border-radius:3px;transition:width var(--duration-base) var(--ease-out)}

/* ═══ Lists ═══ */
.list-item{
  display:flex;align-items:center;gap:12px;padding:14px var(--space-16);
  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);margin-bottom:var(--space-8);cursor:pointer;transition:transform var(--duration-fast) var(--ease-out);
}
.list-item:active{transform:scale(.98)}
.list-item .avatar{
  width:40px;height:40px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;
  font-size:var(--text-body);font-weight:var(--weight-bold);color:#fff;flex-shrink:0;
  background:var(--color-primary);
}
.list-item .info{flex:1;min-width:0}
.list-item .info .name{font-weight:var(--weight-medium);font-size:var(--text-caption)}
.list-item .info .sub{font-size:var(--text-small);color:var(--text-secondary);margin-top:2px}
.list-item .meta{text-align:right;font-size:var(--text-caption);font-weight:var(--weight-medium);color:var(--color-primary)}

/* ═══ Modal — 保留旧 .hidden 切换，合并 components.css 完整属性 ═══ */
.modal-overlay.hidden{display:none}
.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);
  padding:var(--space-24);word-break:break-word;overflow-wrap:break-word;
}

/* ═══ Toast (旧版固定顶栏) ═══ */
.toast{
  position:fixed;top:60px;left:50%;transform:translateX(-50%);z-index:300;
  padding:10px var(--space-24);border-radius:var(--radius-full);font-size:var(--text-caption);font-weight:var(--weight-medium);
  background:rgba(29,29,31,0.92);color:#fff;backdrop-filter:blur(var(--glass-blur));
  -webkit-backdrop-filter:blur(var(--glass-blur));
  transition:opacity var(--duration-base) var(--ease-out);
}
.toast.hidden{opacity:0;pointer-events:none}

/* ═══ Stage Badges ═══ */
.stage-badge{display:inline-block;padding:2px 10px;border-radius:var(--radius-full);font-size:var(--text-small);font-weight:var(--weight-medium)}
.stage-new{background:var(--color-warning-bg);color:var(--color-warning)}
.stage-review{background:var(--color-primary-bg);color:var(--color-primary)}
.stage-mastered{background:var(--color-success-bg);color:var(--color-success)}

/* ═══ Loading Spinner ═══ */
.load-spinner{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:var(--space-48) var(--space-24);gap:12px;color:var(--text-secondary);font-size:var(--text-caption);
}
.spinner{
  width:32px;height:32px;border:3px solid var(--border-light);border-top-color:var(--color-primary);
  border-radius:50%;animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ═══ Empty State ═══ */
.empty-state{text-align:center;padding:var(--space-48) var(--space-24);color:var(--text-tertiary);font-size:var(--text-caption)}

/* ═══ Registration Toggle ═══ */
.reg-toggle{text-align:center;margin-top:14px;font-size:var(--text-caption);color:var(--color-primary);cursor:pointer}
.reg-toggle:hover{text-decoration:underline}

/* ═══ Tabbar (旧兼容，app.js 模板使用 .tabbar .tab .active) ═══ */
.tabbar{
  position:fixed;bottom:0;left:0;right:0;z-index:100;
  display:flex;justify-content:space-around;
  background:var(--glass-bg);
  backdrop-filter:blur(var(--glass-blur));
  -webkit-backdrop-filter:blur(var(--glass-blur));
  border-top:var(--glass-border);
  padding:6px 0 calc(6px + var(--safe-bottom));
}
.tabbar .tab,
.bottom-nav .tab{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:6px 0;font-size:var(--text-small);color:var(--text-secondary);transition:color var(--duration-fast) var(--ease-out);
  border-radius:0;background:none;
}
.tabbar .tab.active,
.bottom-nav .tab.active{
  color:var(--color-primary);font-weight:var(--weight-bold);
  position:relative;
}
.tabbar .tab.active::before,
.bottom-nav .tab.active::before{
  content:'';position:absolute;top:-6px;left:50%;transform:translateX(-50%);
  width:24px;height:3px;border-radius:0 0 2px 2px;
  background:var(--color-primary);
}

/* ═══ Pixel Art ═══ */
.pixel-art{image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges}

/* ═══ Role Themes ═══ */
#view-student .topbar{border-bottom-color:rgba(232,180,184,0.15)}
#view-student .tabbar .tab.active{color:#d4908e}
#view-coach .topbar{border-bottom-color:rgba(123,167,201,0.15)}
#view-principal .topbar{border-bottom-color:rgba(150,150,170,0.15)}

/* ═══ Memory Card ═══ */
.memory-card{
  background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur));
  -webkit-backdrop-filter:blur(var(--glass-blur));
  border:1px solid rgba(196,180,212,0.4);
  border-radius:var(--radius-lg);padding:14px var(--space-16);font-size:var(--text-caption);line-height:var(--leading-body);
}
.memory-card .mc-title{font-weight:var(--weight-bold);color:var(--pet-purple);font-size:var(--text-caption)}
.memory-card .mc-source{font-size:var(--text-small);color:var(--text-tertiary);margin-left:var(--space-8)}
.memory-card .mc-header{display:flex;align-items:center;margin-bottom:var(--space-8)}
.memory-card .mc-row{margin-bottom:var(--space-4)}
.memory-card .mc-label{font-weight:var(--weight-medium);color:var(--text-primary);font-size:var(--text-small);display:inline}
.memory-card .mc-value{color:var(--text-secondary);display:inline;margin-left:var(--space-4)}
.memory-card .mc-story{font-style:italic;color:#553c9a}
.memory-card .mc-related-word{
  display:inline-block;padding:1px var(--space-8);margin:2px;background:rgba(196,180,212,0.15);
  border-radius:var(--radius-sm);font-size:var(--text-small);color:var(--pet-purple);
}
.memory-card .mc-hint{color:var(--pet-orange);font-weight:var(--weight-medium)}
.memory-card .mc-root{
  display:inline-block;padding:2px var(--space-8);margin:1px;background:rgba(123,167,201,0.12);
  border-radius:var(--radius-sm);font-size:var(--text-small);color:var(--pet-blue);
}

/* ═══ Calendar ═══ */
.cal-cell{
  height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  border-radius:var(--radius-sm);cursor:pointer;font-size:var(--text-caption);
  transition:background var(--duration-fast) var(--ease-out);
}
.cal-cell:hover{background:var(--border-light)}
.cal-cell--today{background:var(--color-primary-bg);color:var(--color-primary);font-weight:var(--weight-bold)}
.cal-cell--has-class{font-weight:var(--weight-bold)}
.cal-cell--past{opacity:.45}
.cal-dot{
  width:5px;height:5px;background:var(--color-danger);border-radius:50%;margin-top:2px;
}

/* ═══ Dictation Wizard ═══ */
.dict-wizard{text-align:center;padding:var(--space-16) 0}
.dict-wizard__icon{font-size:48px;margin-bottom:var(--space-12)}
.dict-wizard__title{font-size:var(--text-h3);font-weight:var(--weight-bold);margin-bottom:var(--space-4)}
.dict-wizard__sub{font-size:var(--text-caption);color:var(--text-secondary);margin-bottom:var(--space-8)}
.dict-wizard__steps{text-align:left;margin:var(--space-16) 0;padding:0 var(--space-8)}
.dict-wizard__step{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px;font-size:var(--text-caption);color:var(--text-secondary)}
.dict-wizard__step-num{width:24px;height:24px;border-radius:50%;background:var(--color-primary-bg);color:var(--color-primary);display:flex;align-items:center;justify-content:center;font-weight:var(--weight-bold);font-size:var(--text-small);flex-shrink:0}
.dict-wizard__play-area{padding:var(--space-24) 0}
.dict-wizard__progress{font-size:var(--text-caption);color:var(--text-secondary);margin-bottom:var(--space-12)}
.dict-wizard__word-hint{font-size:var(--text-small);color:var(--text-tertiary);margin-bottom:var(--space-16)}
.dict-wizard__btn-play{
  width:80px;height:80px;border-radius:50%;border:none;
  background:linear-gradient(135deg,var(--color-primary),var(--color-primary-dark));
  color:#fff;font-size:36px;cursor:pointer;
  box-shadow:0 4px 20px rgba(99,102,241,.35);
  transition:transform var(--duration-fast) var(--ease-out);
  display:inline-flex;align-items:center;justify-content:center;
}
.dict-wizard__btn-play:active{transform:scale(.9)}
.dict-wizard__btn-play.playing{animation:dict-pulse 1.5s ease infinite}
@keyframes dict-pulse{0%,100%{box-shadow:0 4px 20px rgba(99,102,241,.35)}50%{box-shadow:0 4px 36px rgba(99,102,241,.6)}}
.dict-wizard__actions{display:flex;gap:10px;justify-content:center;margin-top:var(--space-16)}
.dict-wizard__actions .btn{padding:10px 20px;font-size:var(--text-caption)}

/* ── Photo Upload ── */
.dict-upload{text-align:center;padding:var(--space-16) 0}
.dict-upload__preview{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:var(--space-12) 0;min-height:60px}
.dict-upload__thumb{width:60px;height:60px;border-radius:var(--radius-sm);object-fit:cover;border:2px solid var(--border-light)}
.dict-upload__add{
  width:60px;height:60px;border-radius:var(--radius-sm);border:2px dashed var(--border-standard);
  display:flex;align-items:center;justify-content:center;font-size:24px;color:var(--text-muted);cursor:pointer;
}
.dict-upload__add:hover{border-color:var(--color-primary);color:var(--color-primary)}

/* ── Answer Reveal ── */
.dict-answers{margin:var(--space-12) 0}
.dict-answers__word{padding:var(--space-8) var(--space-12);margin-bottom:6px;background:var(--border-light);border-radius:var(--radius-sm);text-align:left}
.dict-answers__word .word{font-weight:var(--weight-bold);font-size:var(--text-body)}
.dict-answers__word .phon{font-size:var(--text-small);color:var(--text-secondary);margin-left:8px}
.dict-answers__word .mean{font-size:var(--text-small);color:var(--text-tertiary)}

/* ── Self-Grade Toggles ── */
.dict-grade{text-align:left;margin:var(--space-12) 0}
.dict-grade__item{
  display:flex;align-items:center;justify-content:space-between;padding:10px var(--space-12);
  margin-bottom:4px;border-radius:var(--radius-sm);cursor:pointer;
  border:2px solid transparent;transition:all var(--duration-fast) var(--ease-out);
}
.dict-grade__item:hover{background:var(--border-light)}
.dict-grade__item.correct{border-color:var(--color-success);background:var(--color-success-bg)}
.dict-grade__item.wrong{border-color:var(--color-danger);background:var(--color-danger-bg)}
.dict-grade__word{font-weight:var(--weight-bold);font-size:var(--text-body)}
.dict-grade__toggle{font-size:var(--text-caption);font-weight:var(--weight-medium);color:var(--text-secondary)}
.dict-grade__item.correct .dict-grade__toggle{color:var(--color-success)}
.dict-grade__item.wrong .dict-grade__toggle{color:var(--color-danger)}

.dict-grade__bulk{display:flex;gap:8px;margin-bottom:var(--space-12)}
.dict-grade__bulk .btn{flex:1;font-size:var(--text-small)}

/* ── Score Feedback ── */
.dict-score{text-align:center;padding:var(--space-16) 0}
.dict-score__num{font-size:48px;font-weight:800;letter-spacing:-.02em}
.dict-score__emoji{font-size:64px}

/* ═══ Report Charts ═══ */
.report-section{margin-bottom:var(--space-24)}
.report-section__title{font-weight:var(--weight-bold);margin-bottom:var(--space-4)}
.report-section__sub{font-size:var(--text-small);color:var(--text-secondary);margin-bottom:var(--space-8)}
.report-table{width:100%;font-size:var(--text-small)}
.report-table td{padding:6px 0;border-bottom:1px solid var(--border-light)}
.report-section__header{display:flex;justify-content:space-between;align-items:center;cursor:pointer;user-select:none}
.report-section__header:hover{opacity:.8}
.report-section__arrow{font-size:.8rem;color:var(--text-secondary);transition:transform .2s;flex-shrink:0;margin-left:8px}
.report-section__detail{margin-top:var(--space-16);padding-top:var(--space-12);border-top:1px solid var(--border-light)}
.report-section__detail.hidden{display:none}

/* ═══ Responsive ═══ */
@media(min-width:768px){
  .stat-grid{grid-template-columns:repeat(4,1fr)}
  .tabbar{max-width:500px;left:50%;transform:translateX(-50%);border-radius:var(--radius-lg) var(--radius-lg) 0 0}
  .tab-content{max-width:600px;margin:0 auto}
}