/* ============================================================
   Neomemoria - 5 Theme System CSS v3 (Full Redesign)
   - Right-side menu
   - 2x2 rating grid positioned near card bottom
   - Enlarged meaning text on card back
   - Reduced whitespace, full-screen usage
   - Simple mode O/X shown before flip at lower-right
   - High-quality, high-visibility design
   ============================================================ */

:root {
  --font-main: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.12);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.18);
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: all 0.15s ease;
}

/* ===== Theme 1: Dull Black ===== */
[data-theme="dull-black"] {
  --bg-primary: #1a1a1e;
  --bg-secondary: #242428;
  --bg-tertiary: #2c2c31;
  --bg-card: #2a2a2f;
  --bg-card-hover: #323237;
  --bg-input: #1e1e23;
  --bg-overlay: rgba(10,10,12,0.85);
  --text-primary: #c0c0c8;
  --text-secondary: #88888f;
  --text-tertiary: #5a5a62;
  --text-accent: #9a9aaf;
  --border: #3a3a40;
  --border-light: #2e2e34;
  --accent: #7a7a9a;
  --accent-hover: #8a8aaa;
  --accent-glow: rgba(122,122,154,0.15);
  --success: #5a8a5a;
  --success-bg: rgba(90,138,90,0.15);
  --warning: #9a8a4a;
  --warning-bg: rgba(154,138,74,0.15);
  --danger: #9a5a5a;
  --danger-bg: rgba(154,90,90,0.15);
  --info: #5a7a9a;
  --info-bg: rgba(90,122,154,0.15);
  --card-front: linear-gradient(145deg, #2a2a2f, #252529);
  --card-back: linear-gradient(145deg, #2e2e34, #282830);
  --menu-bg: #222226;
  --badge-bg: #333338;
  --scrollbar-track: #1a1a1e;
  --scrollbar-thumb: #3a3a40;
}

/* ===== Theme 2: Gleaming Black Pearl ===== */
[data-theme="gleaming-pearl"] {
  --bg-primary: #0d0d12;
  --bg-secondary: #151519;
  --bg-tertiary: #1c1c22;
  --bg-card: #181820;
  --bg-card-hover: #1f1f28;
  --bg-input: #111116;
  --bg-overlay: rgba(5,5,8,0.9);
  --text-primary: #d8d8e8;
  --text-secondary: #8888a8;
  --text-tertiary: #555570;
  --text-accent: #a8a8d8;
  --border: #2a2a3a;
  --border-light: #1e1e2e;
  --accent: #6a6aff;
  --accent-hover: #7a7aff;
  --accent-glow: rgba(106,106,255,0.2);
  --success: #4ae88a;
  --success-bg: rgba(74,232,138,0.1);
  --warning: #e8c84a;
  --warning-bg: rgba(232,200,74,0.1);
  --danger: #e84a6a;
  --danger-bg: rgba(232,74,106,0.1);
  --info: #4aa8e8;
  --info-bg: rgba(74,168,232,0.1);
  --card-front: linear-gradient(145deg, #181820, #141418);
  --card-back: linear-gradient(145deg, #1c1c26, #171720);
  --menu-bg: #121218;
  --badge-bg: #222232;
  --scrollbar-track: #0d0d12;
  --scrollbar-thumb: #2a2a3a;
  --pearl-sheen: linear-gradient(135deg, rgba(120,120,255,0.05), rgba(180,120,255,0.03), rgba(120,180,255,0.05));
  --pearl-border: linear-gradient(135deg, rgba(120,120,255,0.2), rgba(180,120,255,0.1), rgba(120,180,255,0.2));
}

/* ===== Theme 3: Dark Forest Bonfire ===== */
[data-theme="dark-forest"] {
  --bg-primary: #0f1410;
  --bg-secondary: #161c14;
  --bg-tertiary: #1c241a;
  --bg-card: #192018;
  --bg-card-hover: #202820;
  --bg-input: #121812;
  --bg-overlay: rgba(8,12,8,0.9);
  --text-primary: #d4cfc0;
  --text-secondary: #8a8878;
  --text-tertiary: #5a5848;
  --text-accent: #d4a050;
  --border: #2a3228;
  --border-light: #1e261c;
  --accent: #e8862a;
  --accent-hover: #f09838;
  --accent-glow: rgba(232,134,42,0.2);
  --success: #5aaa4a;
  --success-bg: rgba(90,170,74,0.12);
  --warning: #d4a030;
  --warning-bg: rgba(212,160,48,0.12);
  --danger: #c84a3a;
  --danger-bg: rgba(200,74,58,0.12);
  --info: #4a8ab0;
  --info-bg: rgba(74,138,176,0.12);
  --card-front: linear-gradient(145deg, #192018, #161c16);
  --card-back: linear-gradient(145deg, #1e2820, #1a2218);
  --menu-bg: #141a12;
  --badge-bg: #243020;
  --scrollbar-track: #0f1410;
  --scrollbar-thumb: #2a3228;
  --fire-glow: radial-gradient(ellipse at 50% 100%, rgba(232,134,42,0.08) 0%, transparent 70%);
  --ember: #e87830;
}

/* ===== Theme 4: White Pearl ===== */
[data-theme="white-pearl"] {
  --bg-primary: #f5f3f0;
  --bg-secondary: #ffffff;
  --bg-tertiary: #edeae6;
  --bg-card: #ffffff;
  --bg-card-hover: #faf8f5;
  --bg-input: #f8f6f3;
  --bg-overlay: rgba(245,243,240,0.92);
  --text-primary: #2a2826;
  --text-secondary: #6a6864;
  --text-tertiary: #9a9894;
  --text-accent: #5a4a8a;
  --border: #e0ddd8;
  --border-light: #eae8e4;
  --accent: #7a5aaa;
  --accent-hover: #8a6aba;
  --accent-glow: rgba(122,90,170,0.12);
  --success: #3a8a4a;
  --success-bg: rgba(58,138,74,0.1);
  --warning: #aa7a2a;
  --warning-bg: rgba(170,122,42,0.1);
  --danger: #c04040;
  --danger-bg: rgba(192,64,64,0.1);
  --info: #3a6aaa;
  --info-bg: rgba(58,106,170,0.1);
  --card-front: linear-gradient(145deg, #ffffff, #faf8f5);
  --card-back: linear-gradient(145deg, #fdfcfa, #f8f6f2);
  --menu-bg: #ffffff;
  --badge-bg: #f0ede8;
  --scrollbar-track: #f5f3f0;
  --scrollbar-thumb: #d0cdc8;
  --pearl-sheen-light: linear-gradient(135deg, rgba(180,160,220,0.08), rgba(160,180,220,0.06), rgba(200,160,200,0.08));
}

/* ===== Theme 5: Dreamy ===== */
[data-theme="dreamy"] {
  --bg-primary: #fdf0f5;
  --bg-secondary: #fff5f9;
  --bg-tertiary: #f5e8f0;
  --bg-card: #fff8fb;
  --bg-card-hover: #fff0f6;
  --bg-input: #fef2f7;
  --bg-overlay: rgba(253,240,245,0.92);
  --text-primary: #4a2840;
  --text-secondary: #8a6880;
  --text-tertiary: #b098a8;
  --text-accent: #c06898;
  --border: #f0d8e8;
  --border-light: #f5e0ee;
  --accent: #e07aaa;
  --accent-hover: #e88aba;
  --accent-glow: rgba(224,122,170,0.15);
  --success: #58aa78;
  --success-bg: rgba(88,170,120,0.12);
  --warning: #d4a060;
  --warning-bg: rgba(212,160,96,0.12);
  --danger: #d06070;
  --danger-bg: rgba(208,96,112,0.12);
  --info: #6098c8;
  --info-bg: rgba(96,152,200,0.12);
  --card-front: linear-gradient(145deg, #fff8fb, #fef4f8);
  --card-back: linear-gradient(145deg, #fff6fa, #fdf0f6);
  --menu-bg: #fff5f9;
  --badge-bg: #f8e4f0;
  --scrollbar-track: #fdf0f5;
  --scrollbar-thumb: #e8c8d8;
  --dreamy-glow: radial-gradient(ellipse at 50% 0%, rgba(224,122,170,0.06) 0%, transparent 70%);
}

/* ===== Global Reset ===== */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:16px; -webkit-text-size-adjust:100%; -webkit-tap-highlight-color:transparent; }
body {
  font-family: var(--font-main);
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.5;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  transition: background 0.5s ease, color 0.5s ease;
  -webkit-font-smoothing: antialiased;
}

::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:var(--scrollbar-track); }
::-webkit-scrollbar-thumb { background:var(--scrollbar-thumb); border-radius:3px; }

/* ===== Theme background effects ===== */
[data-theme="gleaming-pearl"] body::before { content:''; position:fixed; inset:0; background:var(--pearl-sheen); pointer-events:none; z-index:0; }
[data-theme="dark-forest"] body::after { content:''; position:fixed; bottom:0; left:0; right:0; height:40vh; background:var(--fire-glow); pointer-events:none; z-index:0; }
[data-theme="white-pearl"] body::before { content:''; position:fixed; inset:0; background:var(--pearl-sheen-light); pointer-events:none; z-index:0; }
[data-theme="dreamy"] body::before { content:''; position:fixed; inset:0; background:var(--dreamy-glow); pointer-events:none; z-index:0; }

/* ===== Layout - Full screen usage, reduced whitespace ===== */
#app {
  position:relative; z-index:1;
  width:100%;
  max-width: 780px;
  margin: 0 auto;
  padding: 0 10px;
  padding-bottom: env(safe-area-inset-bottom, 10px);
}

/* ===== Header ===== */
.header {
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 0;
  position:sticky; top:0; z-index:100;
  background:var(--bg-primary);
  transition: var(--transition);
}
[data-theme="gleaming-pearl"] .header { background:rgba(13,13,18,0.95); backdrop-filter:blur(20px); }
[data-theme="dark-forest"] .header { background:rgba(15,20,16,0.95); backdrop-filter:blur(20px); }
[data-theme="white-pearl"] .header { background:rgba(245,243,240,0.95); backdrop-filter:blur(20px); }
[data-theme="dreamy"] .header { background:rgba(253,240,245,0.95); backdrop-filter:blur(20px); }

.logo { display:flex; align-items:center; gap:8px; font-size:1.1rem; font-weight:700; letter-spacing:-0.02em; color:var(--text-primary); cursor:pointer; }
.logo-icon { width:30px; height:30px; display:flex; align-items:center; justify-content:center; border-radius:var(--radius-sm); background:var(--accent-glow); color:var(--accent); font-size:0.9rem; }
[data-theme="dark-forest"] .logo-icon { background:rgba(232,134,42,0.15); color:var(--ember); }
.header-actions { display:flex; align-items:center; gap:6px; }
.header-user { font-size:0.75rem; color:var(--text-secondary); max-width:100px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ===== Page title row ===== */
.page-title-row { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px; }

/* ===== Buttons ===== */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:9px 18px; border-radius:var(--radius-md); border:1px solid var(--border);
  background:var(--bg-tertiary); color:var(--text-primary);
  font-size:0.85rem; font-weight:500; cursor:pointer;
  transition:var(--transition); white-space:nowrap;
  -webkit-user-select:none; user-select:none; font-family:var(--font-main);
}
.btn:active { transform:scale(0.97); }
.btn:hover { background:var(--bg-card-hover); border-color:var(--accent); }
.btn-primary { background:var(--accent); color:#fff; border-color:var(--accent); }
.btn-primary:hover { background:var(--accent-hover); }
[data-theme="dark-forest"] .btn-primary { background:var(--ember); border-color:var(--ember); }
.btn-sm { padding:6px 12px; font-size:0.78rem; border-radius:var(--radius-sm); }
.btn-lg { padding:12px 24px; font-size:0.95rem; border-radius:var(--radius-lg); }
.btn-icon { width:36px; height:36px; padding:0; border-radius:50%; font-size:0.92rem; }
.btn-icon-sm { width:28px; height:28px; padding:0; border-radius:50%; font-size:0.8rem; border:1px solid var(--border); background:var(--bg-tertiary); color:var(--text-primary); cursor:pointer; transition:var(--transition); display:inline-flex; align-items:center; justify-content:center; font-family:var(--font-main); }
.btn-ghost { background:transparent; border-color:transparent; }
.btn-ghost:hover { background:var(--bg-tertiary); }
.btn-danger { background:var(--danger-bg); color:var(--danger); border-color:var(--danger); }
.btn-danger:hover { background:var(--danger); color:#fff; }

/* ===== Input ===== */
.input,.textarea,.select {
  width:100%; padding:10px 14px; border-radius:var(--radius-md); border:1px solid var(--border);
  background:var(--bg-input); color:var(--text-primary); font-size:0.9rem; font-family:var(--font-main);
  transition:var(--transition); outline:none;
}
.input:focus,.textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow); }
.textarea { min-height:80px; resize:vertical; }
.input-group { display:flex; flex-direction:column; gap:4px; margin-bottom:10px; }
.input-label { font-size:0.78rem; font-weight:600; color:var(--text-secondary); text-transform:uppercase; letter-spacing:0.05em; }

/* ===== Card ===== */
.card {
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:14px; transition:var(--transition);
}
[data-theme="gleaming-pearl"] .card { box-shadow:0 0 30px rgba(106,106,255,0.03); }
[data-theme="dark-forest"] .card { box-shadow:0 4px 20px rgba(0,0,0,0.2); }
[data-theme="white-pearl"] .card { box-shadow:0 2px 15px rgba(0,0,0,0.04); }
[data-theme="dreamy"] .card { box-shadow:0 2px 15px rgba(200,100,150,0.06); }

/* ===== Flashcard - Larger, reduced padding ===== */
.flashcard-area { perspective:1200px; margin:4px 0; }
.flashcard {
  width:100%; min-height:250px; position:relative; cursor:pointer;
  transition:transform 0.6s cubic-bezier(0.4,0,0.2,1);
  transform-style:preserve-3d; border-radius:var(--radius-xl);
  -webkit-user-select:none; user-select:none;
}
.flashcard.flipped { transform:rotateY(180deg); }
.flashcard-face {
  position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  border-radius:var(--radius-xl);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:20px 16px;
  border:1.5px solid var(--border); overflow:hidden;
}
.flashcard-front { background:var(--card-front); }
.flashcard-back { background:var(--card-back); transform:rotateY(180deg); }

[data-theme="gleaming-pearl"] .flashcard-face { box-shadow:0 0 40px rgba(106,106,255,0.06), inset 0 1px 0 rgba(255,255,255,0.03); }
[data-theme="dark-forest"] .flashcard-face { box-shadow:0 8px 30px rgba(0,0,0,0.3), 0 0 60px rgba(232,134,42,0.04); }
[data-theme="white-pearl"] .flashcard-face { box-shadow:0 4px 30px rgba(0,0,0,0.06); }
[data-theme="dreamy"] .flashcard-face { box-shadow:0 4px 30px rgba(200,100,150,0.08); }

.fc-number { font-size:0.72rem; color:var(--text-tertiary); margin-bottom:4px; font-weight:700; letter-spacing:0.1em; }
.fc-word { font-size:2.2rem; font-weight:700; text-align:center; color:var(--text-primary); line-height:1.3; letter-spacing:-0.01em; }
/* ===== ENLARGED MEANING TEXT on back of card ===== */
.fc-meaning-lg {
  font-size:2.4rem;
  font-weight:800;
  text-align:center;
  color:var(--text-primary);
  margin-bottom:10px;
  line-height:1.25;
  letter-spacing:-0.01em;
}
.fc-example { font-size:0.92rem; color:var(--text-secondary); text-align:center; line-height:1.6; max-width:94%; }
.fc-example-jp { font-size:0.84rem; color:var(--text-tertiary); text-align:center; margin-top:5px; }
.fc-emoji { font-size:2.4rem; margin-top:8px; }
.fc-tap-hint { position:absolute; bottom:10px; font-size:0.65rem; color:var(--text-tertiary); letter-spacing:0.06em; opacity:0.6; }

/* ===== Study View Layout - Full height ===== */
.study-view {
  display:flex; flex-direction:column;
  min-height:calc(100dvh - 56px);
  padding-bottom:4px;
}
.study-top-bar { display:flex; align-items:center; justify-content:space-between; gap:6px; margin-bottom:2px; }
.study-counter { font-size:0.75rem; color:var(--text-tertiary); font-weight:600; }
.study-controls { margin-top:auto; padding-bottom:4px; }

/* ===== Bottom controls with toggle + back ===== */
.study-bottom-controls {
  display:flex; gap:8px; align-items:center; justify-content:center; margin-top:6px;
}

/* ===== Mode Indicator ===== */
.mode-indicator {
  text-align:center; padding:4px 10px;
  background:var(--bg-tertiary); border-radius:var(--radius-sm);
  font-size:0.7rem; font-weight:600; color:var(--accent);
  letter-spacing:0.04em; border:1px solid var(--border);
}
[data-theme="dark-forest"] .mode-indicator { color:var(--ember); }

.progress-bar-container { width:100%; height:3px; background:var(--bg-tertiary); border-radius:2px; overflow:hidden; margin:3px 0; }
.progress-bar-fill { height:100%; background:var(--accent); border-radius:2px; transition:width 0.4s ease; }
[data-theme="dark-forest"] .progress-bar-fill { background:var(--ember); }

/* ===== Rating Buttons: 2x2 Grid (positioned near card bottom) ===== */
.rating-grid-2x2 {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:6px;
}
.rating-btn {
  display:flex; align-items:center; justify-content:center; gap:6px;
  padding:15px 10px; border-radius:var(--radius-md);
  border:2px solid var(--border); background:var(--bg-card);
  color:var(--text-primary); cursor:pointer; transition:var(--transition);
  font-family:var(--font-main);
}
.rating-btn:active { transform:scale(0.96); }
.rating-icon { font-size:1.25rem; }
.rating-label { font-size:0.82rem; font-weight:700; }

.rating-btn-mastered { border-color:var(--success); background:var(--success-bg); }
.rating-btn-mastered:hover,.rating-btn-mastered:active { background:var(--success); color:#fff; }
.rating-btn-good { border-color:var(--info); background:var(--info-bg); }
.rating-btn-good:hover,.rating-btn-good:active { background:var(--info); color:#fff; }
.rating-btn-unsure { border-color:var(--warning); background:var(--warning-bg); }
.rating-btn-unsure:hover,.rating-btn-unsure:active { background:var(--warning); color:#fff; }
.rating-btn-forgot { border-color:var(--danger); background:var(--danger-bg); }
.rating-btn-forgot:hover,.rating-btn-forgot:active { background:var(--danger); color:#fff; }

/* Subtle SRS hint under each button */
.rating-hint { display:block; font-size:0.62rem; color:var(--text-tertiary); font-weight:400; margin-top:1px; }

/* ===== Simple Mode O/X - Positioned lower-right before flip ===== */
.rating-area-simple-wrap {
  position:relative;
  margin-top:6px;
}
.simple-btns-preflip {
  display:flex; gap:10px; justify-content:flex-end;
}
.simple-btns-postflip {
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
}
.simple-btn {
  display:flex; align-items:center; justify-content:center;
  border-radius:var(--radius-md);
  font-size:1.8rem; cursor:pointer;
  transition:var(--transition); border:2px solid transparent;
  background:transparent; font-family:var(--font-main);
  -webkit-user-select:none; user-select:none;
}
.simple-btn:active { transform:scale(0.94); }
.simple-btn-sm { width:60px; height:52px; font-size:1.5rem; }
.simple-btn-lg { padding:16px; font-size:2rem; }
.simple-correct { border-color:var(--success); background:var(--success-bg); }
.simple-correct:active { background:var(--success); }
.simple-wrong { border-color:var(--danger); background:var(--danger-bg); }
.simple-wrong:active { background:var(--danger); }
.simple-preflip-hint {
  font-size:0.6rem; color:var(--text-tertiary); text-align:right;
  margin-top:2px; opacity:0.6;
}

/* ===== Oni Mode ===== */
.oni-input-area { display:flex; gap:8px; margin-top:8px; }
.oni-input {
  flex:1; padding:12px 16px; border-radius:var(--radius-md);
  border:2px solid var(--border); background:var(--bg-input);
  color:var(--text-primary); font-size:1.05rem; font-family:var(--font-main);
  outline:none; transition:var(--transition);
}
.oni-input:focus { border-color:var(--accent); }
.oni-input.correct { border-color:var(--success); background:var(--success-bg); }
.oni-input.wrong { border-color:var(--danger); background:var(--danger-bg); }

/* ===== Deck List ===== */
.deck-list { display:flex; flex-direction:column; gap:6px; }
.deck-item {
  display:flex; align-items:center;
  padding:12px 14px; background:var(--bg-card);
  border:1px solid var(--border); border-radius:var(--radius-lg);
  cursor:pointer; transition:var(--transition); gap:10px;
}
.deck-item:hover { border-color:var(--accent); background:var(--bg-card-hover); }
.deck-item:active { transform:scale(0.99); }
.deck-icon {
  width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  border-radius:var(--radius-md); background:var(--accent-glow);
  color:var(--accent); font-size:0.95rem; flex-shrink:0;
}
[data-theme="dark-forest"] .deck-icon { background:rgba(232,134,42,0.12); color:var(--ember); }
.deck-info { flex:1; min-width:0; }
.deck-name { font-weight:600; font-size:0.9rem; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.deck-meta { font-size:0.72rem; color:var(--text-tertiary); margin-top:2px; }
.deck-actions { display:flex; gap:4px; flex-shrink:0; }

/* ===== Study Mode Select ===== */
.study-mode-card { display:flex; align-items:center; gap:14px; cursor:pointer; text-align:left; padding:14px 16px; }
.study-mode-icon { width:44px; height:44px; border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; font-size:1.2rem; flex-shrink:0; }
.study-mode-info { flex:1; }
.study-mode-name { font-weight:700; font-size:0.95rem; margin-bottom:2px; }
.study-mode-desc { font-size:0.78rem; color:var(--text-secondary); }

/* ===== SRS Explanation ===== */
.srs-explain-card {
  margin-top:14px; padding:14px;
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius-lg);
}
.srs-explain-title { font-weight:700; font-size:0.88rem; margin-bottom:6px; display:flex; align-items:center; gap:8px; color:var(--accent); }
[data-theme="dark-forest"] .srs-explain-title { color:var(--ember); }
.srs-explain-text { font-size:0.8rem; color:var(--text-secondary); line-height:1.7; }
.srs-detail-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:6px;
  margin-top:8px;
}
.srs-detail-item {
  padding:8px 10px; background:var(--bg-tertiary); border-radius:var(--radius-sm);
  border:1px solid var(--border-light);
}
.srs-detail-item .srs-label { font-size:0.72rem; font-weight:700; }
.srs-detail-item .srs-desc { font-size:0.65rem; color:var(--text-tertiary); margin-top:1px; }

/* ===== Menu Panel (RIGHT side) ===== */
.menu-overlay { position:fixed; inset:0; background:var(--bg-overlay); z-index:999; animation:fadeIn 0.2s ease; }
.menu-panel {
  position:fixed; top:0; right:0;
  width:280px; max-width:80vw; height:100%;
  background:var(--menu-bg);
  border-left:1px solid var(--border);
  z-index:1000; overflow-y:auto;
  animation:slideFromRight 0.3s cubic-bezier(0.4,0,0.2,1);
  padding: env(safe-area-inset-top, 14px) 0 env(safe-area-inset-bottom, 14px);
}
.menu-header { padding:16px; border-bottom:1px solid var(--border); }
.menu-user { display:flex; align-items:center; gap:12px; }
.menu-avatar {
  width:38px; height:38px; border-radius:50%;
  background:var(--accent-glow); display:flex; align-items:center; justify-content:center;
  color:var(--accent); font-weight:700; font-size:0.95rem;
}
.menu-item {
  display:flex; align-items:center; gap:12px;
  padding:12px 16px; color:var(--text-primary);
  font-size:0.88rem; font-weight:500; cursor:pointer;
  transition:var(--transition-fast);
  border:none; background:none; width:100%; text-align:left; font-family:var(--font-main);
}
.menu-item:hover { background:var(--bg-tertiary); }
.menu-item i { width:20px; text-align:center; color:var(--text-secondary); }
.menu-divider { height:1px; background:var(--border); margin:4px 0; }

/* ===== Modal ===== */
.modal-overlay {
  position:fixed; inset:0; background:var(--bg-overlay); z-index:1000;
  display:flex; align-items:flex-end; justify-content:center;
  animation:fadeIn 0.2s ease;
}
@media(min-width:768px) { .modal-overlay { align-items:center; padding:20px; } }
.modal-content {
  width:100%; max-width:500px; max-height:88vh;
  background:var(--bg-secondary);
  border-radius:var(--radius-xl) var(--radius-xl) 0 0;
  overflow-y:auto; animation:slideUp 0.3s cubic-bezier(0.4,0,0.2,1);
}
@media(min-width:768px) { .modal-content { border-radius:var(--radius-xl); } }
.modal-header { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--border); position:sticky; top:0; background:var(--bg-secondary); z-index:10; }
.modal-title { font-size:1rem; font-weight:700; }
.modal-body { padding:16px; }
.modal-footer { padding:12px 18px; border-top:1px solid var(--border); display:flex; gap:8px; justify-content:flex-end; }

/* ===== Stats ===== */
.stats-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-bottom:12px; }
.stat-card { padding:12px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); text-align:center; }
.stat-value { font-size:1.5rem; font-weight:800; color:var(--text-primary); line-height:1.2; }
.stat-label { font-size:0.68rem; color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.08em; margin-top:2px; font-weight:600; }

.streak-display { text-align:center; padding:16px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-xl); margin-bottom:12px; position:relative; overflow:hidden; }
.streak-number { font-size:2.8rem; font-weight:900; color:var(--accent); line-height:1; }
[data-theme="dark-forest"] .streak-number { color:var(--ember); }
.streak-label { font-size:0.82rem; color:var(--text-secondary); margin-top:4px; }
.streak-badge { font-size:1.8rem; display:inline-block; }
@keyframes sparkle { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:0.6;transform:scale(1.15);} }
.streak-sparkle { animation:sparkle 2s ease-in-out infinite; }

.weekly-chart { display:flex; align-items:flex-end; gap:6px; height:90px; padding:12px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); margin-bottom:12px; }
.chart-bar-wrapper { flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; height:100%; justify-content:flex-end; }
.chart-bar { width:100%; max-width:30px; background:var(--accent); border-radius:3px 3px 0 0; min-height:2px; transition:height 0.5s ease; }
[data-theme="dark-forest"] .chart-bar { background:var(--ember); }
.chart-label { font-size:0.6rem; color:var(--text-tertiary); font-weight:600; }

.distribution-bars { margin-bottom:12px; }
.dist-row { display:flex; align-items:center; gap:8px; margin-bottom:5px; }
.dist-label { width:72px; font-size:0.75rem; font-weight:600; color:var(--text-secondary); text-align:right; }
.dist-bar-track { flex:1; height:8px; background:var(--bg-tertiary); border-radius:4px; overflow:hidden; }
.dist-bar-fill { height:100%; border-radius:4px; transition:width 0.5s ease; }
.dist-count { width:32px; font-size:0.75rem; color:var(--text-tertiary); font-weight:600; }

/* ===== Theme Selector ===== */
.theme-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; margin:10px 0; }
.theme-option { display:flex; flex-direction:column; align-items:center; gap:5px; padding:10px 4px; border-radius:var(--radius-md); border:2px solid var(--border); cursor:pointer; transition:var(--transition); background:var(--bg-card); }
.theme-option:hover { border-color:var(--accent); }
.theme-option.active { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-glow); }
.theme-preview { width:28px; height:28px; border-radius:50%; border:2px solid rgba(128,128,128,0.3); }
.theme-preview-dull { background:linear-gradient(135deg,#1a1a1e,#2c2c31); }
.theme-preview-pearl { background:linear-gradient(135deg,#0d0d12,#2a2a3a); }
.theme-preview-forest { background:linear-gradient(135deg,#0f1410,#2a3228); }
.theme-preview-white { background:linear-gradient(135deg,#f5f3f0,#ffffff); }
.theme-preview-dreamy { background:linear-gradient(135deg,#fdf0f5,#fff5f9); }
.theme-label { font-size:0.55rem; font-weight:600; color:var(--text-secondary); text-align:center; line-height:1.2; }

/* ===== Search ===== */
.search-bar { display:flex; gap:8px; margin-bottom:10px; }
.search-wrapper { flex:1; position:relative; }
.search-input { width:100%; padding:10px 14px 10px 38px; border-radius:var(--radius-lg); border:1px solid var(--border); background:var(--bg-input); color:var(--text-primary); font-size:0.9rem; font-family:var(--font-main); outline:none; transition:var(--transition); }
.search-input:focus { border-color:var(--accent); }
.search-wrapper i { position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--text-tertiary); font-size:0.85rem; }

/* ===== Tabs ===== */
.tabs { display:flex; gap:3px; background:var(--bg-tertiary); padding:3px; border-radius:var(--radius-md); margin-bottom:12px; }
.tab { flex:1; padding:8px 12px; border-radius:var(--radius-sm); border:none; background:transparent; color:var(--text-secondary); font-size:0.8rem; font-weight:600; cursor:pointer; transition:var(--transition-fast); font-family:var(--font-main); text-align:center; }
.tab.active { background:var(--bg-card); color:var(--text-primary); box-shadow:var(--shadow-sm); }

/* ===== Section Title ===== */
.section-title { font-size:0.95rem; font-weight:700; margin-bottom:8px; color:var(--text-primary); }

/* ===== Empty State ===== */
.empty-state { text-align:center; padding:30px 16px; color:var(--text-tertiary); }
.empty-icon { font-size:2.5rem; margin-bottom:8px; opacity:0.5; }
.empty-text { font-size:0.9rem; font-weight:500; }

/* ===== Badge ===== */
.badge { display:inline-flex; align-items:center; padding:3px 9px; border-radius:20px; font-size:0.68rem; font-weight:700; }
.badge-accent { background:var(--accent-glow); color:var(--accent); }
.badge-success { background:var(--success-bg); color:var(--success); }
.badge-warning { background:var(--warning-bg); color:var(--warning); }

/* ===== Toast ===== */
.toast-container { position:fixed; top:14px; left:50%; transform:translateX(-50%); z-index:10000; display:flex; flex-direction:column; gap:6px; width:88%; max-width:380px; }
.toast { padding:10px 14px; border-radius:var(--radius-md); background:var(--bg-card); border:1px solid var(--border); color:var(--text-primary); font-size:0.85rem; font-weight:500; box-shadow:var(--shadow-lg); animation:slideDown 0.3s ease; display:flex; align-items:center; gap:8px; }
.toast-success { border-left:3px solid var(--success); }
.toast-error { border-left:3px solid var(--danger); }
.toast-info { border-left:3px solid var(--info); }

/* ===== Card List ===== */
.card-list-item { display:flex; align-items:center; padding:9px 12px; border-bottom:1px solid var(--border-light); gap:8px; }
.card-list-item:last-child { border-bottom:none; }
.card-list-number { width:24px; height:24px; display:flex; align-items:center; justify-content:center; background:var(--bg-tertiary); border-radius:50%; font-size:0.65rem; font-weight:700; color:var(--text-tertiary); flex-shrink:0; }
.card-list-word { font-weight:600; font-size:0.88rem; color:var(--text-primary); min-width:70px; }
.card-list-meaning { flex:1; font-size:0.8rem; color:var(--text-secondary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.card-list-status { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.status-mastered { background:var(--success); }
.status-good { background:var(--info); }
.status-unsure { background:var(--warning); }
.status-forgot { background:var(--danger); }
.status-unseen { background:var(--text-tertiary); opacity:0.3; }

/* ===== Loading ===== */
.loading { display:flex; align-items:center; justify-content:center; padding:30px; }
.spinner { width:28px; height:28px; border:3px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:spin 0.8s linear infinite; }

/* ===== File Drop ===== */
.file-drop-zone { border:2px dashed var(--border); border-radius:var(--radius-lg); padding:24px; text-align:center; cursor:pointer; transition:var(--transition); background:var(--bg-input); }
.file-drop-zone:hover { border-color:var(--accent); background:var(--accent-glow); }
.file-drop-zone i { font-size:1.8rem; color:var(--text-tertiary); margin-bottom:6px; }
.file-drop-text { font-size:0.85rem; color:var(--text-secondary); }
.file-drop-sub { font-size:0.72rem; color:var(--text-tertiary); margin-top:3px; }
.file-input-hidden { position:absolute; width:0; height:0; opacity:0; overflow:hidden; }

/* ===== Animations ===== */
@keyframes fadeIn { from{opacity:0;} to{opacity:1;} }
@keyframes slideUp { from{transform:translateY(100%);} to{transform:translateY(0);} }
@keyframes slideFromRight { from{transform:translateX(100%);} to{transform:translateX(0);} }
@keyframes slideDown { from{transform:translateY(-20px);opacity:0;} to{transform:translateY(0);opacity:1;} }
@keyframes spin { to{transform:rotate(360deg);} }
.fade-in { animation:fadeIn 0.3s ease; }

/* ===== Responsive - iPad & iPhone optimized ===== */
@media(max-width:380px) {
  .fc-word { font-size:1.7rem; }
  .fc-meaning-lg { font-size:1.8rem; }
  .rating-label { font-size:0.72rem; }
  .theme-grid { grid-template-columns:repeat(3,1fr); }
}
@media(min-width:768px) {
  #app { padding:0 16px; }
  .flashcard { min-height:280px; }
  .fc-meaning-lg { font-size:2.6rem; }
  .fc-word { font-size:2.4rem; }
  .stats-grid { grid-template-columns:repeat(4,1fr); }
}
@media(min-width:1024px) {
  #app { max-width:860px; }
}
@supports(padding-top:env(safe-area-inset-top)) {
  .header { padding-top:max(8px, env(safe-area-inset-top)); }
}