:root {
    --bg-main: #F7F7F9; --primary: #5A52FF; --primary-hover: #483FD6;
    --dark-bg: #1C1C1E; --dark-surface: #2C2C2E;
    --text-dark: #1A1A1C; --text-light: #F4F4F5; --text-muted: #8E8E93;
    --c-again: #FF453A; --c-hard: #FF9F0A; --c-good: #32D74B; --c-easy: #0A84FF;
}

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

/* 核心修复 1：强制锁定整个网页宽高，禁止任何形式的滚动溢出 */
body { 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, sans-serif; 
    background-color: var(--bg-main); 
    color: var(--text-dark); 
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    width: 100vw; height: 100vh; height: 100dvh; 
    display: flex; justify-content: center; overflow: hidden; 
}

/* 核心修复 2：加入 iOS 底部安全区 (safe-area-inset-bottom)，防止按钮和 Home 条重叠 */
.app-container { 
    width: 100%; max-width: 480px; height: 100%; 
    display: flex; flex-direction: column; 
    padding: 20px 16px max(20px, env(safe-area-inset-bottom)) 16px; 
}

header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-shrink: 0; }
.progress-container { flex: 1; margin-right: 20px; display: flex; flex-direction: column; align-items: center; }
.progress-text { font-size: 0.75rem; font-weight: 700; color: var(--text-muted); letter-spacing: 1px; margin-bottom: 6px; }
.progress-bar-bg { width: 120px; height: 4px; background: #E5E5EA; border-radius: 2px; overflow: hidden; }
.progress-bar-fill { height: 100%; background: var(--primary); width: 0%; transition: width 0.3s ease; }
.header-actions { display: flex; gap: 12px; align-items: center; }
.import-btn { background: #E5E5EA; color: var(--text-dark); padding: 8px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.icon-btn-small { background: #E5E5EA; border: none; border-radius: 50%; padding: 6px 8px; font-size: 1.1rem; cursor: pointer; }

/* Settings Panel & Empty State */
.settings-panel { position: absolute; top: 70px; left: 16px; right: 16px; background: white; border-radius: 20px; padding: 24px; box-shadow: 0 20px 40px rgba(0,0,0,0.2); z-index: 100; }
.settings-panel h3 { margin-bottom: 16px; font-size: 1.1rem; }
.setting-group { margin-bottom: 20px; display: flex; flex-direction: column; gap: 12px; }
.setting-group label { display: flex; align-items: center; gap: 10px; font-size: 0.95rem; cursor: pointer; }
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; flex: 1; }
.done-icon { font-size: 4rem; margin-bottom: 20px; }
.empty-state h2 { margin-bottom: 10px; }
.retry-btn { margin-top: 20px; background: var(--primary); color: white; border: none; padding: 10px 24px; border-radius: 20px; font-weight: bold; cursor: pointer; }

/* 核心修复 3：卡片区域使用 min-height: 0，这能强迫卡片在小屏幕上自动缩小，而不是把底部按钮挤跑 */
.card-wrapper { 
    flex: 1; min-height: 0; 
    perspective: 1200px; -webkit-perspective: 1200px; 
    display: flex; align-items: center; justify-content: center; width: 100%; margin-bottom: 20px; 
}
.flashcard { width: 100%; height: 100%; max-height: 480px; position: relative; cursor: pointer; }
.card-inner { 
    width: 100%; height: 100%; position: relative; 
    transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1); -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
    transform-style: preserve-3d; -webkit-transform-style: preserve-3d; 
}
.flashcard.flipped .card-inner { transform: rotateY(180deg); -webkit-transform: rotateY(180deg); }
.card-front, .card-back { 
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
    backface-visibility: hidden; -webkit-backface-visibility: hidden; 
    border-radius: 20px; padding: 24px; display: flex; flex-direction: column; 
    box-shadow: 0 12px 32px rgba(0,0,0,0.06); 
}

/* Front */
.card-front { background: #FFFFFF; align-items: center; justify-content: space-between; z-index: 2; }
.tag-front, .tag-back { position: absolute; right: 20px; top: 20px; font-size: 0.7rem; font-weight: bold; letter-spacing: 1px; }
.tag-front { color: var(--primary); opacity: 0.7; }
.word-content { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; }
.card-front h1 { font-size: 3rem; font-weight: 700; margin-bottom: 16px; color: #000; text-align: center; }
.front-actions { display: flex; flex-direction: column; align-items: center; margin-bottom: 10px; }
.icon-btn { width: 64px; height: 64px; border-radius: 50%; border: none; display: flex; justify-content: center; align-items: center; cursor: pointer; color: #FFF; box-shadow: 0 8px 20px rgba(90, 82, 255, 0.3); }
.primary-btn { background: var(--primary); font-size: 1.5rem; }
.hint-text { font-size: 0.85rem; color: #8E8E93; margin-top: 12px; font-weight: 600; text-align: center; }

/* Spelling Inputs */
.spell-input { width: 85%; border: none; border-bottom: 2px solid var(--primary); background: transparent; font-size: 1.8rem; text-align: center; padding: 8px; margin-top: 10px; outline: none; color: var(--text-dark); }
.spell-feedback { margin-top: 15px; font-weight: bold; font-size: 1.1rem; }
.feedback-correct { color: var(--c-good); }
.feedback-wrong { color: var(--c-again); }
.cloze-sentence { font-size: 1.1rem; line-height: 1.5; padding: 0 10px; text-align: center; margin-bottom: 15px; }
.spelling-hint { font-family: monospace; font-size: 1.5rem; letter-spacing: 4px; color: var(--primary); margin-bottom: 10px; }

/* Back */
.card-back { background: var(--dark-bg); color: var(--text-light); transform: rotateY(180deg); -webkit-transform: rotateY(180deg); text-align: left; }
.tag-back { color: var(--text-muted); }
.back-word-title { font-size: 1.5rem; font-weight: 600; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid #38383A; }
.back-content-scroll { flex: 1; overflow-y: auto; padding-right: 5px; cursor: default; }
.section { margin-bottom: 24px; }
.section-title { font-size: 0.8rem; color: var(--primary); font-weight: bold; margin-bottom: 8px; letter-spacing: 0.5px; }
.translation-text, .example-en { font-size: 1.1rem; line-height: 1.5; margin-bottom: 6px; }
.example-cn { font-size: 0.95rem; color: var(--text-muted); }
.back-actions { margin-top: 16px; }
.full-btn { width: 100%; padding: 16px; border-radius: 14px; border: none; font-size: 1rem; font-weight: 600; cursor: pointer; display: flex; justify-content: center; align-items: center; gap: 8px; }
.secondary-btn { background: var(--primary); color: #FFF; }

/* 核心修复 4：强制按钮区域固定高度，并且绝对不缩小 (flex-shrink: 0) */
.controls { flex-shrink: 0; height: 64px; display: flex; align-items: center; justify-content: center; width: 100%; }
.center-action { background: var(--dark-bg); color: #FFF; padding: 16px 32px; border-radius: 30px; border: none; font-size: 1.1rem; font-weight: bold; cursor: pointer; width: 100%; height: 100%;}
.score-buttons { display: flex; width: 100%; height: 100%; gap: 10px; }
.score-btn { flex: 1; border-radius: 16px; border: none; font-size: 0.95rem; font-weight: 700; color: #FFF; cursor: pointer; height: 100%; }
.again { background: var(--c-again); } .hard { background: var(--c-hard); } .good { background: var(--c-good); } .easy { background: var(--c-easy); }

/* Utilities */
.hidden { display: none !important; }
.chinese-element.hidden-by-user { display: none !important; }