/* ========== CSS Custom Properties ========== */
:root {
  --bg: #EAE0CB;
  --card: #F6F0E2;
  --ink: #33291C;
  --sub: #66573F;
  --muted: #85755A;
  --accent: #B03A2E;
  --gold: #C98F2D;
  --gold-bg: #EFDDB4;
  --gold-text: #7E5510;
  --ok: #4C7A57;
  --line: #D9CCB0;
  --bar-bg: #DFD3B9;
  --tab-inactive: #93835F;
  --shadow: rgba(51, 41, 28, 0.08);
}

[data-theme="light"] {
  --bg: #FAFAFA;
  --card: #FFFFFF;
  --ink: #1C1C1C;
  --sub: #5A5A5A;
  --muted: #8A8A8A;
  --accent: #B03A2E;
  --gold: #C98F2D;
  --gold-bg: #F4F4F4;
  --gold-text: #8A5E14;
  --ok: #4C7A57;
  --line: #E4E4E4;
  --bar-bg: #EEEEEE;
  --tab-inactive: #8A8A8A;
  --shadow: rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] {
  --bg: #121212;
  --card: #1E1E1E;
  --ink: #EDEDED;
  --sub: #A8A8A8;
  --muted: #7E7E7E;
  --accent: #C4503F;
  --accent-strong: #E07260;
  --gold: #E4B45F;
  --gold-bg: #2A2A2A;
  --gold-text: #E4B45F;
  --ok: #6FA57C;
  --line: #2E2E2E;
  --bar-bg: #262626;
  --tab-inactive: #8A7C60;
  --shadow: rgba(0, 0, 0, 0.3);
}

/* ========== Reset & Base ========== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { height: 100%; font-size: 16px; }

body {
  font-family: 'Noto Sans JP', sans-serif;
  background: var(--bg);
  color: var(--ink);
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-width: 560px;
  margin: 0 auto;
}

.devanagari {
  font-family: 'Noto Sans Devanagari', 'Noto Sans JP', sans-serif;
  font-size: 1.4em;
  line-height: 1.4;
}

.zen {
  font-family: 'Zen Maru Gothic', 'Noto Sans JP', sans-serif;
}

button {
  font-family: 'Noto Sans JP', sans-serif;
  cursor: pointer;
  border: none;
  min-height: 44px;
  border-radius: 10px;
  font-size: 0.95rem;
  transition: opacity 0.15s, transform 0.1s;
}

button:active { transform: scale(0.97); }

input, textarea, select {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1rem;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  border-radius: 10px;
  padding: 10px 14px;
  width: 100%;
  outline: none;
  min-height: 44px;
}

input:focus, textarea:focus, select:focus {
  border-color: var(--accent);
}

/* ========== Layout ========== */
#app {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 68px;
}

.screen {
  display: none;
  min-height: calc(100vh - 68px);
  padding: 0 0 16px;
}

.screen.active { display: block; }

/* ========== Tab Bar ========== */
#tab-bar {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 560px;
  height: 60px;
  background: var(--card);
  border-top: 1px solid var(--line);
  display: flex;
  z-index: 100;
}

.tab-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: transparent;
  color: var(--tab-inactive);
  font-size: 0.65rem;
  border-radius: 0;
  min-height: 60px;
  border-top: 3px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}

.tab-btn.active {
  color: var(--accent);
  border-top-color: var(--accent);
}

.tab-icon {
  width: 22px;
  height: 22px;
  display: block;
}

/* ========== Header ========== */
.screen-header {
  background: var(--card);
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 50;
}

/* ========== Home Screen ========== */
#home-greeting {
  padding: 20px 16px 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.greeting-text { flex: 1; }

.greeting-np {
  font-family: 'Noto Sans Devanagari', sans-serif;
  font-size: 1.5rem;
  color: var(--ink);
  line-height: 1.3;
}

.greeting-kana {
  font-size: 0.85rem;
  color: var(--sub);
  margin-top: 2px;
}

/* Daily encouragement message */
.home-msg-wrap {
  padding: 4px 16px 6px;
  text-align: center;
  cursor: pointer;
  min-height: 32px;
}
.home-msg-np {
  display: block;
  font-family: 'Noto Sans Devanagari', sans-serif;
  font-size: 0.88rem;
  color: var(--sub);
}
.home-msg-ja {
  display: block;
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 1px;
}

/* Toast notification */
.app-toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: rgba(0,0,0,0.75);
  color: #fff;
  font-size: 0.82rem;
  padding: 8px 16px;
  border-radius: 20px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s, transform 0.25s;
  white-space: nowrap;
  z-index: 9999;
}
.app-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Nepal flag SVG */
.nepal-flag {
  width: 28px;
  height: 36px;
  flex-shrink: 0;
}

/* Tarchho decoration */
.tarchho-bar {
  padding: 4px 16px;
  overflow: hidden;
}

/* Today stats */
#home-stats {
  margin: 12px 16px;
  background: var(--card);
  border-radius: 16px;
  border: 1px solid var(--line);
  padding: 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  cursor: pointer;
}

#home-stats:hover { opacity: 0.9; }

.stat-box {
  text-align: center;
}

.stat-num {
  font-family: 'Zen Maru Gothic', sans-serif;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1;
}

.stat-num.review { color: var(--accent); }
.stat-num.new-cards { color: var(--ok); }

.stat-label {
  font-size: 0.75rem;
  color: var(--sub);
  margin-top: 4px;
}

/* Streak */
#home-streak {
  margin: 0 16px 12px;
  background: var(--gold-bg);
  border-radius: 12px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.streak-icon {
  font-size: 1.3rem;
  color: var(--gold-text);
}

.streak-text {
  font-size: 0.85rem;
  color: var(--gold-text);
  font-family: 'Zen Maru Gothic', sans-serif;
}

/* Mountain progress */
#home-mountain {
  margin: 0 16px 12px;
  background: var(--card);
  border-radius: 16px;
  border: 1px solid var(--line);
  padding: 12px;
  overflow: hidden;
}

.mountain-title {
  font-size: 0.8rem;
  color: var(--sub);
  margin-bottom: 8px;
  font-family: 'Zen Maru Gothic', sans-serif;
}

#mountain-svg-wrap {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  display: block;
}

/* Category bars */
#home-cats {
  margin: 0 16px 12px;
  background: var(--card);
  border-radius: 16px;
  border: 1px solid var(--line);
  padding: 12px;
}

.cats-title {
  font-size: 0.8rem;
  color: var(--sub);
  margin-bottom: 8px;
  font-family: 'Zen Maru Gothic', sans-serif;
}

.cat-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.cat-row-name {
  font-size: 0.72rem;
  color: var(--sub);
  width: 100px;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cat-bar-wrap {
  flex: 1;
  height: 6px;
  background: var(--bar-bg);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}

/* 学習中(薄い緑): learning+mastered の合計幅で下敷きに */
.cat-bar-learning {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  background: var(--ok);
  opacity: 0.3;
  border-radius: 3px;
  transition: width 0.5s ease;
}

/* 習得済み(濃い緑): mastered幅だけ前面に重ねる */
.cat-bar-mastered {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  background: var(--ok);
  border-radius: 3px;
  transition: width 0.5s ease;
}

.cat-pct {
  font-size: 0.7rem;
  color: var(--muted);
  width: 30px;
  text-align: right;
  flex-shrink: 0;
}

/* ========== Study Screen ========== */
#study-screen.active {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 60px);
  padding-bottom: 0;
}

#study-header {
  padding: 12px 16px 8px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 10px;
}

#study-progress-text {
  font-size: 0.8rem;
  color: var(--sub);
  flex: 1;
}

#study-progress-bar-wrap {
  flex: 2;
  height: 6px;
  background: var(--bar-bg);
  border-radius: 3px;
  overflow: hidden;
}

#study-progress-bar {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  transition: width 0.3s;
}

/* Flashcard */
#card-area {
  flex: 1;
  align-items: center;
  justify-content: center;
  padding: 16px;
  perspective: 1000px;
}

/* Only display when study screen is active — prevents bleed-through to other tabs */
#study-screen.active #card-area {
  display: flex;
}

.flashcard {
  width: 100%;
  max-width: 420px;
  min-height: 280px;
  cursor: pointer;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.4s ease;
}

.flashcard.flipped {
  transform: rotateY(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .flashcard { transition: none; }
}

.card-face {
  position: absolute;
  inset: 0;
  background: var(--card);
  border-radius: 18px;
  border: 1px solid var(--line);
  padding: 24px;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 280px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.card-back {
  transform: rotateY(180deg);
}

.card-front-content {
  text-align: center;
}

.card-ja {
  font-size: 1.3rem;
  color: var(--ink);
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 8px;
}

.card-tap-hint {
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 12px;
}

.card-back-np {
  font-family: 'Noto Sans Devanagari', sans-serif;
  font-size: 2rem;
  color: var(--ink);
  text-align: center;
  line-height: 1.4;
  margin-bottom: 8px;
}

.card-back-kana {
  font-size: 1rem;
  color: var(--sub);
  text-align: center;
  margin-bottom: 4px;
}

.card-back-roman {
  font-size: 0.85rem;
  color: var(--muted);
  text-align: center;
  margin-bottom: 12px;
  font-style: italic;
}

.card-back-note {
  font-size: 0.78rem;
  color: var(--sub);
  line-height: 1.6;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  margin-top: 8px;
}

.card-back-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.audio-btn {
  background: var(--bar-bg);
  color: var(--sub);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 0.8rem;
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.audio-btn.unavailable {
  opacity: 0.4;
}

.edit-note-btn {
  background: transparent;
  color: var(--muted);
  font-size: 0.75rem;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 4px 10px;
}

/* SRS Buttons */
#srs-buttons {
  padding: 12px 16px 16px;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 8px;
}

#study-screen.active #srs-buttons {
  display: grid;
}

.srs-btn {
  padding: 8px 4px;
  font-size: 0.78rem;
  border-radius: 10px;
  font-family: 'Noto Sans JP', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-height: 52px;
}

.srs-btn .srs-label { font-weight: 600; }
.srs-btn .srs-interval { font-size: 0.65rem; opacity: 0.8; }

.srs-again { background: var(--accent); color: white; }
.srs-hard { background: var(--gold-bg); color: var(--gold-text); }
.srs-ok { background: var(--bar-bg); color: var(--sub); }
.srs-easy { background: var(--ok); color: white; }

[data-theme="dark"] .srs-hard { background: #3A3200; color: var(--gold); }

/* Done screen */
#study-done {
  display: none;
  text-align: center;
  padding: 40px 24px;
}

#study-done.active { display: block; }

.done-title {
  font-family: 'Zen Maru Gothic', sans-serif;
  font-size: 1.6rem;
  color: var(--ink);
  margin-bottom: 12px;
}

.done-np {
  font-family: 'Noto Sans Devanagari', sans-serif;
  font-size: 1.2rem;
  color: var(--sub);
  margin-bottom: 20px;
}

/* Done screen buttons */
.done-btn-row {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 20px;
  flex-wrap: wrap;
}
.done-btn {
  min-height: 48px;
  border-radius: 14px;
  font-size: 0.9rem;
  padding: 0 18px;
  border: none;
  cursor: pointer;
  flex: 1;
  max-width: 160px;
}
.done-btn-home {
  background: var(--bar-bg);
  color: var(--ink);
}
.done-btn-more {
  background: var(--accent);
  color: #fff;
}
.more-study-warn {
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 10px;
}

/* Stat counter X/Y format */
.stat-total {
  font-size: 0.65em;
  color: var(--sub);
}

/* Tarchho animation for done screen */
.tarchho-done {
  margin: 16px auto;
  display: block;
}

@keyframes flag-wave {
  0%, 100% { transform: skewY(0deg); }
  25% { transform: skewY(-2deg); }
  75% { transform: skewY(2deg); }
}

.tarchho-flag-anim {
  transform-origin: left center;
  animation: flag-wave 1.5s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .tarchho-flag-anim { animation: none; }
}

/* ========== Quiz Screen ========== */
#quiz-setup {
  padding: 16px;
}

.quiz-section-title {
  font-size: 0.8rem;
  color: var(--sub);
  margin-bottom: 8px;
  font-family: 'Zen Maru Gothic', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.option-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.option-btn {
  padding: 8px 14px;
  border-radius: 20px;
  font-size: 0.82rem;
  background: var(--bar-bg);
  color: var(--sub);
  border: 1px solid var(--line);
  min-height: 38px;
}

.option-btn.selected {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

#quiz-start-btn {
  width: 100%;
  background: var(--accent);
  color: white;
  font-size: 1rem;
  font-weight: 600;
  min-height: 50px;
  border-radius: 14px;
  margin-top: 8px;
}

#quiz-game {
  display: none;
  padding: 16px;
}

#quiz-game.active { display: block; }

#quiz-question-num {
  font-size: 0.8rem;
  color: var(--sub);
  margin-bottom: 8px;
  text-align: center;
}

#quiz-question {
  background: var(--card);
  border-radius: 16px;
  border: 1px solid var(--line);
  padding: 20px;
  text-align: center;
  margin-bottom: 16px;
  min-height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* np mode: reuse study-card back visual hierarchy (Devanagari large → kana mid → roman small italic) */
.quiz-q-np-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* card-back-roman inside the quiz has a large bottom margin in its base style;
   zero it out so the audio hint's own top spacing controls the gap */
.quiz-q-np-wrap .card-back-roman {
  margin-bottom: 0;
}

.quiz-q-audio-hint {
  font-size: 0.72rem;
  color: var(--muted);
  text-align: center;
}

/* In np mode the hint sits below the 3-row content — smaller, dimmer, more distant */
.quiz-q-np-wrap .quiz-q-audio-hint {
  font-size: 0.62rem;
  opacity: 0.55;
  margin-top: 14px;
}

/* Legacy — kept for safety */
.quiz-q-np {
  font-family: 'Noto Sans Devanagari', sans-serif;
  font-size: 1.8rem;
}

.quiz-q-ja {
  font-size: 1.2rem;
  font-family: 'Zen Maru Gothic', sans-serif;
}

/* Listen mode */
.quiz-listen-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
}

.quiz-listen-icon {
  font-size: 3rem;
  line-height: 1;
}

.quiz-listen-replay {
  background: var(--accent);
  color: white;
  border-radius: 20px;
  padding: 8px 20px;
  font-size: 0.9rem;
  min-height: 40px;
  border: none;
}

/* ja mode choices — kana large + np small 2-line stacked */
.qc-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.qc-kana {
  font-size: 0.95rem;
  color: var(--ink);
  line-height: 1.3;
  text-align: center;
}

.qc-np {
  font-family: 'Noto Sans Devanagari', sans-serif;
  font-size: 0.75rem;
  color: var(--sub);
  text-align: center;
}

#quiz-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.quiz-choice {
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 12px 8px;
  font-size: 0.9rem;
  color: var(--ink);
  text-align: center;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.quiz-choice.devanagari {
  font-family: 'Noto Sans Devanagari', sans-serif;
  font-size: 1.1rem;
}

.quiz-choice.correct {
  background: var(--ok);
  color: white;
  border-color: var(--ok);
}

.quiz-choice.wrong {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

#quiz-result {
  display: none;
  padding: 16px;
}

#quiz-result.active { display: block; }

.result-score {
  font-family: 'Zen Maru Gothic', sans-serif;
  font-size: 2.5rem;
  text-align: center;
  color: var(--accent);
  margin-bottom: 8px;
}

.result-sub {
  text-align: center;
  font-size: 0.85rem;
  color: var(--sub);
  margin-bottom: 16px;
}

.missed-word {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.missed-np {
  font-family: 'Noto Sans Devanagari', sans-serif;
  font-size: 1.1rem;
  flex: 1;
}

.missed-ja {
  font-size: 0.82rem;
  color: var(--sub);
}

/* Wrong-answer feedback */
#quiz-feedback {
  background: var(--gold-bg);
  border: 1px solid var(--gold);
  border-radius: 12px;
  padding: 12px 14px;
  margin-top: 12px;
  text-align: center;
}

.quiz-fb-header {
  font-size: 0.72rem;
  color: var(--gold-text);
  margin-bottom: 6px;
  font-weight: 600;
}

.quiz-fb-kana {
  font-size: 1.3rem;
  color: var(--ink);
  line-height: 1.4;
}

.quiz-fb-np {
  font-family: 'Noto Sans Devanagari', sans-serif;
  font-size: 0.95rem;
  color: var(--sub);
  margin-top: 2px;
}

.quiz-fb-ja {
  font-size: 1rem;
  color: var(--ink);
  margin: 6px 0;
  font-family: 'Zen Maru Gothic', sans-serif;
}

.quiz-fb-audio {
  background: var(--bar-bg);
  color: var(--sub);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 5px 14px;
  font-size: 0.82rem;
  min-height: 34px;
  margin-top: 4px;
}

/* Next button */
#quiz-next-btn {
  width: 100%;
  margin-top: 12px;
  min-height: 48px;
  border-radius: 12px;
  font-size: 0.95rem;
  background: var(--ink);
  color: var(--card);
  font-weight: 600;
}

[data-theme="dark"] #quiz-next-btn {
  background: var(--bar-bg);
  color: var(--ink);
}

#quiz-again-btn, #quiz-back-btn {
  width: 100%;
  margin-top: 8px;
  min-height: 48px;
  border-radius: 12px;
  font-size: 0.95rem;
}

#quiz-again-btn { background: var(--accent); color: white; }
#quiz-back-btn { background: var(--bar-bg); color: var(--sub); }

/* Missed list — add kana row */
.missed-kana {
  font-size: 0.82rem;
  color: var(--sub);
}

/* ========== Number Quiz Master ========== */

.quiz-type-toggle {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.qtt-btn {
  flex: 1;
  padding: 10px 8px;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  border: 1.5px solid var(--line);
  background: var(--card);
  color: var(--sub);
}

.qtt-btn.active {
  background: var(--ink);
  color: var(--card);
  border-color: var(--ink);
}

[data-theme="dark"] .qtt-btn.active {
  background: var(--bar-bg);
  color: var(--ink);
  border-color: var(--bar-bg);
}

#numquiz-game {
  display: none;
  padding: 0 16px 16px;
}

#numquiz-game.active { display: block; }

.numquiz-q-number {
  font-size: 4.5rem;
  font-weight: 800;
  font-family: 'Zen Maru Gothic', sans-serif;
  text-align: center;
  line-height: 1;
  color: var(--ink);
}

.numquiz-q-kana {
  font-size: 1.6rem;
  text-align: center;
  color: var(--ink);
  line-height: 1.4;
}

.numquiz-q-audio-hint {
  font-size: 0.65rem;
  color: var(--muted);
  text-align: center;
  margin-top: 10px;
  opacity: 0.6;
}

.numquiz-b-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.numquiz-display {
  font-size: 3rem;
  font-weight: 700;
  font-family: 'Zen Maru Gothic', sans-serif;
  min-width: 180px;
  min-height: 60px;
  text-align: center;
  background: var(--bar-bg);
  border-radius: 12px;
  padding: 6px 20px;
  color: var(--ink);
  border: 2px solid var(--line);
  line-height: 1.3;
}

.numquiz-display.empty { color: var(--muted); }

.numquiz-tenkey {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  width: 100%;
  max-width: 280px;
}

.tenkey-btn {
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  font-size: 1.5rem;
  font-weight: 600;
  min-height: 54px;
  color: var(--ink);
}

.tenkey-btn:active { background: var(--bar-bg); }

.tenkey-del { font-size: 1.2rem; color: var(--sub); }

.tenkey-ok {
  background: var(--ink);
  color: var(--card);
  font-size: 1rem;
  font-weight: 700;
}

.tenkey-ok:disabled {
  background: var(--bar-bg);
  color: var(--muted);
  border-color: var(--line);
}

[data-theme="dark"] .tenkey-ok {
  background: var(--bar-bg);
  color: var(--ink);
}

[data-theme="dark"] .tenkey-ok:disabled {
  background: var(--card);
  color: var(--muted);
}

#numquiz-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.numquiz-choice-num {
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  font-size: 2rem;
  font-weight: 800;
  font-family: 'Zen Maru Gothic', sans-serif;
  min-height: 64px;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
}

.numquiz-choice-np {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 4px;
}

.numquiz-choice-np .qc-kana { font-size: 0.9rem; }
.numquiz-choice-np .qc-np { font-size: 0.72rem; }

.numquiz-choice-num.correct,
.numquiz-choice-np.correct  { background: var(--ok); color: white; border-color: var(--ok); }
.numquiz-choice-num.wrong,
.numquiz-choice-np.wrong    { background: var(--accent); color: white; border-color: var(--accent); }

#numquiz-feedback {
  background: var(--gold-bg);
  border: 1px solid var(--gold);
  border-radius: 12px;
  padding: 12px 14px;
  margin-top: 12px;
  text-align: center;
}

#numquiz-next-btn {
  width: 100%;
  margin-top: 12px;
  min-height: 48px;
  border-radius: 12px;
  font-size: 0.95rem;
  background: var(--ink);
  color: var(--card);
  font-weight: 600;
}

[data-theme="dark"] #numquiz-next-btn {
  background: var(--bar-bg);
  color: var(--ink);
}

#numquiz-result {
  display: none;
  padding: 16px;
}

#numquiz-result.active { display: block; }

#numquiz-again-btn, #numquiz-back-btn {
  width: 100%;
  margin-top: 8px;
  min-height: 48px;
  border-radius: 12px;
  font-size: 0.95rem;
}

#numquiz-again-btn { background: var(--accent); color: white; }
#numquiz-back-btn  { background: var(--bar-bg); color: var(--sub); }

/* ========== Dictionary Screen ========== */
#dict-search-wrap {
  padding: 12px 16px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  gap: 8px;
  align-items: center;
}

#dict-search {
  flex: 1;
  font-size: 0.95rem;
  min-height: 44px;
}

#dict-add-btn {
  background: var(--accent);
  color: white;
  border-radius: 10px;
  padding: 0 14px;
  font-size: 0.85rem;
  min-height: 44px;
  white-space: nowrap;
}

#dict-content {
  padding: 12px 16px;
}

#dict-no-result {
  display: none;
  text-align: center;
  padding: 40px 0 20px;
  color: var(--sub);
}

#dict-no-result a {
  color: var(--accent);
  text-decoration: none;
}

.dict-cat-section {
  margin-bottom: 16px;
}

.dict-cat-header {
  background: var(--bar-bg);
  border-radius: 10px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  border: 1px solid var(--line);
}

.dict-cat-name {
  flex: 1;
  font-size: 0.88rem;
  color: var(--ink);
  font-family: 'Zen Maru Gothic', sans-serif;
}

.dict-cat-count {
  font-size: 0.75rem;
  color: var(--muted);
}

.dict-cat-mastery {
  height: 4px;
  width: 48px;
  background: var(--bar-bg);
  border-radius: 2px;
  overflow: hidden;
}

.dict-cat-mastery-fill {
  height: 100%;
  background: var(--ok);
  border-radius: 2px;
}

.dict-cat-chevron {
  width: 16px;
  height: 16px;
  color: var(--muted);
  transition: transform 0.2s;
}

.dict-cat-section.open .dict-cat-chevron {
  transform: rotate(90deg);
}

.dict-word-list {
  display: none;
  border: 1px solid var(--line);
  border-top: none;
  border-radius: 0 0 10px 10px;
  overflow: hidden;
}

.dict-cat-section.open .dict-word-list {
  display: block;
}

.dict-word-item {
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}

.dict-word-item:last-child { border-bottom: none; }

.dict-word-summary {
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* 1行目: デーヴァナーガリー + カタカナ横並び */
.dict-word-main-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.dict-word-np {
  font-family: 'Noto Sans Devanagari', sans-serif;
  font-size: 1.05rem;
}

/* カタカナ(サマリー内・常時表示) */
.dict-word-kana-sm {
  font-size: 0.88rem;
  color: var(--sub);
}

/* 2行目: 日本語訳 */
.dict-word-ja {
  font-size: 0.78rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dict-word-detail {
  display: none;
  padding: 8px 14px 14px;
  background: var(--bg);
  border-top: 1px solid var(--line);
}

.dict-word-item.expanded .dict-word-detail {
  display: block;
}

.dict-detail-kana {
  font-size: 0.9rem;
  color: var(--sub);
  margin-bottom: 2px;
}

.dict-detail-roman {
  font-size: 0.82rem;
  color: var(--muted);
  font-style: italic;
  margin-bottom: 6px;
}

.dict-detail-note {
  font-size: 0.78rem;
  color: var(--sub);
  line-height: 1.6;
  margin-bottom: 8px;
}

.dict-detail-actions {
  display: flex;
  gap: 8px;
}

.dict-audio-btn {
  background: var(--bar-bg);
  color: var(--sub);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 0.78rem;
  min-height: 36px;
}

.dict-translate-btn {
  background: transparent;
  color: var(--accent);
  font-size: 0.78rem;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 4px 10px;
  text-decoration: none;
  display: flex;
  align-items: center;
}

/* Search results */
.search-result-item {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-bottom: 8px;
  cursor: pointer;
  overflow: hidden;
}

/* Add word modal */
#add-word-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 200;
  align-items: flex-end;
  justify-content: center;
}

#add-word-modal.open {
  display: flex;
}

.modal-sheet {
  background: var(--card);
  border-radius: 20px 20px 0 0;
  padding: 20px 16px;
  width: 100%;
  max-width: 560px;
  max-height: 80vh;
  overflow-y: auto;
}

.modal-title {
  font-family: 'Zen Maru Gothic', sans-serif;
  font-size: 1.1rem;
  margin-bottom: 16px;
  color: var(--ink);
}

.modal-field {
  margin-bottom: 12px;
}

.modal-label {
  font-size: 0.78rem;
  color: var(--sub);
  margin-bottom: 4px;
  display: block;
}

.modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.modal-cancel {
  flex: 1;
  background: var(--bar-bg);
  color: var(--sub);
  min-height: 46px;
  border-radius: 12px;
}

.modal-save {
  flex: 2;
  background: var(--accent);
  color: white;
  min-height: 46px;
  border-radius: 12px;
  font-weight: 600;
}

/* Edit note modal */
#edit-note-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 200;
  align-items: flex-end;
  justify-content: center;
}

#edit-note-modal.open { display: flex; }

/* ========== Settings Screen ========== */
#settings-content {
  padding: 16px;
}

.settings-section {
  margin-bottom: 20px;
}

.settings-section-title {
  font-size: 0.75rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
  font-family: 'Zen Maru Gothic', sans-serif;
}

.settings-row {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.settings-row-label {
  flex: 1;
  font-size: 0.9rem;
  color: var(--ink);
}

.settings-row-sub {
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 2px;
}

/* Toggle */
.toggle-wrap {
  position: relative;
  width: 44px;
  height: 24px;
}

.toggle-wrap input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--bar-bg);
  border-radius: 12px;
  border: 1px solid var(--line);
  cursor: pointer;
  transition: background 0.2s;
}

.toggle-slider::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: white;
  top: 2px;
  left: 2px;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.toggle-wrap input:checked + .toggle-slider {
  background: var(--accent);
}

.toggle-wrap input:checked + .toggle-slider::after {
  transform: translateX(20px);
}

.toggle-wrap input:disabled + .toggle-slider {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Number input */
.num-input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.num-input-wrap button {
  width: 32px;
  height: 32px;
  min-height: 32px;
  border-radius: 8px;
  background: var(--bar-bg);
  color: var(--sub);
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
}

#daily-new-val {
  font-family: 'Zen Maru Gothic', sans-serif;
  font-size: 1.2rem;
  color: var(--accent);
  min-width: 30px;
  text-align: center;
}

/* ========== Segment control ========== */
/* 外枠: 角丸コンテナ */
.seg-wrap {
  display: flex;
  gap: 0;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 4px;
  background: var(--bg);
}

/* 縦積み variant (出題方向など長いラベル用) */
.seg-wrap-v {
  flex-direction: column;
}

/* 各ボタン */
.seg-opt {
  flex: 1;
  min-height: 44px;
  border-radius: 9px;
  font-size: 0.85rem;
  border: none;
  background: transparent;
  color: var(--sub);
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
  padding: 0 8px;
}

/* 縦積み内ボタン: 左揃え・折り返し許可 */
.seg-wrap-v .seg-opt {
  text-align: left;
  white-space: normal;
  padding: 11px 14px;
}

/* 選択中: アクセント塗りつぶし・白文字 */
.seg-opt.active {
  background: var(--accent);
  color: #fff;
}

/* Danger buttons */
#reset-btn {
  background: transparent;
  color: var(--accent);
  border: 1.5px solid var(--accent);
  border-radius: 12px;
  width: 100%;
  min-height: 46px;
  font-size: 0.9rem;
}

#export-btn, #import-btn {
  background: var(--bar-bg);
  color: var(--sub);
  border: 1px solid var(--line);
  border-radius: 12px;
  width: 100%;
  min-height: 46px;
  font-size: 0.9rem;
  margin-bottom: 8px;
}

/* App info */
.app-info {
  text-align: center;
  color: var(--muted);
  font-size: 0.75rem;
  padding: 20px 0 8px;
}

/* ========== Confirm Dialog ========== */
#confirm-dialog {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 300;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

#confirm-dialog.open { display: flex; }

.confirm-box {
  background: var(--card);
  border-radius: 18px;
  padding: 24px;
  max-width: 320px;
  width: 100%;
}

.confirm-title {
  font-family: 'Zen Maru Gothic', sans-serif;
  font-size: 1.1rem;
  margin-bottom: 10px;
  color: var(--ink);
}

.confirm-text {
  font-size: 0.85rem;
  color: var(--sub);
  margin-bottom: 20px;
  line-height: 1.6;
}

.confirm-actions {
  display: flex;
  gap: 10px;
}

.confirm-cancel {
  flex: 1;
  background: var(--bar-bg);
  color: var(--sub);
  border-radius: 10px;
  min-height: 46px;
}

.confirm-ok {
  flex: 1;
  background: var(--accent);
  color: white;
  border-radius: 10px;
  min-height: 46px;
  font-weight: 600;
}

/* ========== Scrollbar ========== */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 2px; }

/* ========== Align Table (一語ずつ対応表示) ========== */
.align-table {
  margin: 8px 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 8px 8px;
  background: var(--bg);
}

.align-cols {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  justify-content: center;
}

.align-word-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 7px;
  border-right: 1px solid var(--line);
  text-align: center;
  min-width: 40px;
}

.align-word-col:last-child { border-right: none; }

.align-row-np {
  font-family: 'Noto Sans Devanagari', sans-serif;
  font-size: 1rem;
  color: var(--ink);
  line-height: 1.5;
}

.align-row-kana {
  font-size: 0.7rem;
  color: var(--sub);
  margin-top: 1px;
}

.align-row-direct {
  font-size: 0.64rem;
  color: var(--muted);
  margin-top: 1px;
}

.align-natural {
  text-align: center;
  font-size: 0.85rem;
  color: var(--ink);
  padding-top: 5px;
  margin-top: 5px;
  border-top: 1px solid var(--line);
  font-family: 'Zen Maru Gothic', sans-serif;
  line-height: 1.4;
}

.align-table-sm { margin: 4px 0; padding: 4px 6px 6px; }
.align-small .align-row-np { font-size: 0.82rem; }
.align-small .align-row-kana { font-size: 0.62rem; }
.align-small .align-row-direct { font-size: 0.58rem; }
.align-table-sm .align-natural { font-size: 0.78rem; }

/* ========== Detail Section (▼ 詳しく) ========== */
.detail-toggle-btn {
  background: transparent;
  color: var(--accent);
  font-size: 0.78rem;
  min-height: 30px;
  border: none;
  padding: 4px 0 2px;
  width: 100%;
  text-align: left;
  cursor: pointer;
  border-radius: 0;
}

.detail-extra-content {
  padding: 8px 0 2px;
  border-top: 1px dashed var(--line);
}

/* Breakdown */
.detail-breakdown {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 4px;
  margin-bottom: 10px;
}

.breakdown-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--bar-bg);
  border-radius: 6px;
  padding: 4px 8px;
  min-width: 44px;
  text-align: center;
}

.breakdown-np {
  font-family: 'Noto Sans Devanagari', sans-serif;
  font-size: 0.9rem;
  color: var(--ink);
}

.breakdown-kana {
  font-size: 0.65rem;
  color: var(--sub);
}

.breakdown-ja {
  font-size: 0.72rem;
  color: var(--ink);
}

.breakdown-gram {
  font-size: 0.58rem;
  color: var(--muted);
  border-top: 1px solid var(--line);
  margin-top: 2px;
  padding-top: 2px;
  max-width: 120px;
  text-align: center;
  line-height: 1.3;
}

.breakdown-arrow {
  color: var(--muted);
  font-size: 0.8rem;
  align-self: center;
  padding-top: 6px;
}

/* Conjugation */
.detail-conj,
.detail-examples,
.detail-related {
  margin-bottom: 10px;
}

.detail-section-title {
  font-size: 0.68rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}

.detail-conj-grid {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.conj-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 8px;
  background: var(--bar-bg);
  border-radius: 5px;
}

.conj-label {
  width: 44px;
  color: var(--muted);
  flex-shrink: 0;
  font-size: 0.66rem;
}

.conj-np {
  font-family: 'Noto Sans Devanagari', sans-serif;
  flex: 1;
  color: var(--ink);
  font-size: 0.88rem;
}

.conj-kana {
  color: var(--sub);
  font-size: 0.68rem;
}

/* Examples */
.example-item {
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}

.example-item:last-child { border-bottom: none; }

.example-np {
  font-family: 'Noto Sans Devanagari', sans-serif;
  font-size: 0.9rem;
  color: var(--ink);
}

.example-kana {
  font-size: 0.7rem;
  color: var(--sub);
}

.example-ja {
  font-size: 0.76rem;
  color: var(--muted);
}

/* Misc (intonation, heard) */
.detail-misc {
  font-size: 0.76rem;
  color: var(--sub);
  margin-bottom: 6px;
  padding: 3px 6px;
  background: var(--bar-bg);
  border-radius: 4px;
}

/* Related */
.related-word {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 3px 0;
}

.related-np {
  font-family: 'Noto Sans Devanagari', sans-serif;
  font-size: 0.9rem;
}

.related-ja {
  font-size: 0.76rem;
  color: var(--sub);
}

/* ========== Utilities ========== */
.hidden { display: none !important; }
.mt8 { margin-top: 8px; }
.mt16 { margin-top: 16px; }