/* ── Memory Training Styles ──────────────────────────────────── */

/* Dashboard */
.memory-dashboard .memory-header {
    text-align: center;
    margin-bottom: 2rem;
}
.memory-header .subtitle {
    color: #666;
    font-size: 1.1rem;
    margin-top: 0.5rem;
}

/* Tier Sections */
.tier-section {
    margin-bottom: 2rem;
}
.tier-label {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    display: inline-block;
    margin-bottom: 1rem;
}
.tier-foundation { background: #e8f5e9; color: #2e7d32; }
.tier-intermediate { background: #fff3e0; color: #e65100; }
.tier-advanced { background: #fce4ec; color: #c62828; }

/* Technique Grid */
.technique-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
}
.technique-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-radius: 12px;
    background: white;
    border: 2px solid #e0e0e0;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s, box-shadow 0.2s;
}
.technique-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.technique-card.status-locked { opacity: 0.5; pointer-events: none; }
.technique-card.status-mastered { border-color: #4caf50; background: #f1f8e9; }
.technique-card.status-in_progress { border-color: #ff9800; }
.technique-card.status-unlocked { border-color: #2196f3; }
.technique-icon { font-size: 2rem; }
.technique-name { font-weight: 700; }
.technique-name-zh { font-size: 0.85rem; color: #888; }
.technique-badge {
    font-size: 0.75rem;
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    display: inline-block;
    margin-top: 0.25rem;
}
.technique-badge.mastered { background: #4caf50; color: white; }
.technique-badge.in-progress { background: #ff9800; color: white; }
.technique-badge.unlocked { background: #2196f3; color: white; }
.technique-badge.locked { background: #ccc; color: #666; }

/* Lesson List */
.lesson-list { max-width: 600px; margin: 0 auto; }
.lesson-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-bottom: 1px solid #eee;
}
.lesson-item.locked { opacity: 0.5; }
.lesson-number {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: #e0e0e0;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
}
.lesson-item.completed .lesson-number { background: #4caf50; color: white; }
.lesson-item.accessible .lesson-number { background: #2196f3; color: white; }
.lesson-info { flex: 1; }
.lesson-title { font-weight: 600; }
.lesson-type { font-size: 0.85rem; color: #888; }
.status-icon { font-size: 1.25rem; }
.status-icon.ready { color: #2196f3; }
.status-icon.locked { color: #ccc; }

/* Session Container */
.session-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 1rem;
}

/* Phase Indicator */
.session-phase {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}
.phase-dot {
    width: 12px; height: 12px;
    border-radius: 50%;
    background: #ddd;
}
.phase-dot.active { background: #2196f3; }
.phase-dot.completed { background: #4caf50; }
.phase-label { font-size: 0.85rem; color: #999; margin-right: 1rem; }
.phase-label.active { color: #2196f3; font-weight: 700; }

.session-info {
    text-align: center;
    margin-bottom: 1.5rem;
}
.technique-tag, .lesson-tag {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.85rem;
    margin: 0 0.25rem;
}
.technique-tag { background: #e3f2fd; color: #1565c0; }
.lesson-tag { background: #f3e5f5; color: #7b1fa2; }

/* Lesson Content */
.lesson-content {
    max-width: 700px;
    margin: 0 auto;
}
.lesson-content h1 {
    text-align: center;
    margin-bottom: 1.5rem;
}
.content-block {
    margin-bottom: 1.5rem;
    padding: 1.25rem;
    border-radius: 12px;
}
.text-block { background: white; }
.text-block p { line-height: 1.7; font-size: 1.05rem; }
.concept-block {
    background: #e3f2fd;
    border-left: 4px solid #2196f3;
}
.concept-block h3 { margin-top: 0; color: #1565c0; }
.concept-block li { margin-bottom: 0.5rem; line-height: 1.5; }
.example-block {
    background: #fff8e1;
    border-left: 4px solid #ff9800;
}
.example-label, .tryit-label, .tip-label {
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}
.example-label { color: #e65100; }
.tryit-block {
    background: #e8f5e9;
    border-left: 4px solid #4caf50;
}
.tryit-label { color: #2e7d32; }
.tip-block {
    background: #f3e5f5;
    border-left: 4px solid #9c27b0;
}
.tip-label { color: #7b1fa2; }

/* Demo Steps */
.demo-block { background: #fff; }
.demo-step {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid #eee;
}
.demo-word {
    font-weight: 700;
    font-size: 1.1rem;
    min-width: 80px;
}
.demo-arrow { color: #999; }
.demo-image { color: #555; font-style: italic; }

/* Session Nav */
.session-nav {
    text-align: center;
    margin-top: 2rem;
    padding-bottom: 2rem;
}

/* ── Exercise Styles ───────────────────────────────────────── */

.exercise-panel {
    background: white;
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.exercise-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}
.exercise-num {
    font-weight: 700;
    color: #666;
}

/* Study Phase */
.study-items {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    margin: 1.5rem 0;
}
.study-item {
    padding: 0.75rem 1.25rem;
    background: #f5f5f5;
    border-radius: 10px;
    font-size: 1.1rem;
    font-weight: 600;
    border: 2px solid #e0e0e0;
}
.study-items.numbered .study-item { text-align: left; }
.item-num { color: #999; margin-right: 0.25rem; }

/* Body Pegs */
.peg-item { display: flex; gap: 0.5rem; align-items: center; }
.peg-label { color: #7b1fa2; font-weight: 600; }
.peg-word { font-weight: 700; }

/* Pairs */
.study-pairs {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 500px;
    margin: 1.5rem auto;
}
.study-pair {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    background: #f5f5f5;
    border-radius: 8px;
}
.pair-left { font-weight: 700; color: #1565c0; }
.pair-right { font-weight: 700; color: #c62828; }
.pair-arrow { color: #999; }

/* Number Display */
.number-display {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin: 2rem 0;
}
.digit {
    font-size: 2.5rem;
    font-weight: 900;
    padding: 0.5rem 0.75rem;
    background: #1565c0;
    color: white;
    border-radius: 8px;
    font-family: 'Courier New', monospace;
}
.number-key {
    text-align: center;
    margin: 1rem 0;
    font-size: 0.9rem;
    color: #666;
}
.num-code {
    display: inline-block;
    margin: 0.25rem 0.5rem;
    padding: 0.2rem 0.5rem;
    background: #e3f2fd;
    border-radius: 4px;
}

/* Story */
.story-text {
    max-width: 600px;
    margin: 1.5rem auto;
    padding: 1.5rem;
    background: #fffde7;
    border-radius: 12px;
    line-height: 1.8;
    font-size: 1.05rem;
}

/* Study Timer */
.study-timer {
    text-align: center;
    margin-top: 1.5rem;
}
.study-timer-bar, .timer-bar {
    height: 6px;
    background: #e0e0e0;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}
.study-timer-fill, .timer-fill {
    height: 100%;
    background: #2196f3;
    border-radius: 3px;
    width: 0%;
    transition: width 1s linear;
}
.timer-bar.active .timer-fill { background: #ff9800; }
.study-timer-text, .timer-text {
    font-size: 0.85rem;
    color: #999;
}
.skip-btn { margin-top: 1rem; }

/* Recall Phase */
.exercise-instructions {
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 1rem;
}
.exercise-hint {
    color: #7b1fa2;
    font-style: italic;
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

/* Recall Inputs */
.recall-inputs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}
.recall-input {
    padding: 0.6rem 1rem;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 1rem;
    width: 160px;
    transition: border-color 0.2s;
}
.recall-input:focus { border-color: #2196f3; outline: none; }

/* Number Input */
.number-input {
    display: block;
    width: 100%;
    max-width: 400px;
    margin: 1rem auto;
    padding: 1rem;
    font-size: 1.5rem;
    text-align: center;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    font-family: 'Courier New', monospace;
    letter-spacing: 0.3rem;
}
.number-input:focus { border-color: #1565c0; outline: none; }

/* Sequence Order */
.sequence-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.seq-option {
    padding: 0.6rem 1.2rem;
    border: 2px solid #2196f3;
    background: white;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    transition: all 0.2s;
}
.seq-option:hover { background: #e3f2fd; }
.seq-option.used { opacity: 0.3; pointer-events: none; }
.selected-label { font-size: 0.85rem; color: #888; margin-bottom: 0.5rem; }
.selected-items { display: flex; flex-wrap: wrap; gap: 0.5rem; min-height: 40px; }
.selected-tag {
    padding: 0.5rem 1rem;
    background: #2196f3;
    color: white;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
}
.selected-tag:hover { background: #c62828; }

/* Pair Match */
.pair-match-grid {
    display: flex;
    gap: 2rem;
    justify-content: center;
    margin: 1rem 0;
}
.pair-column { display: flex; flex-direction: column; gap: 0.5rem; }
.pair-item {
    padding: 0.6rem 1.2rem;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    text-align: center;
    min-width: 120px;
    transition: all 0.2s;
}
.pair-item.left { border-color: #1565c0; color: #1565c0; }
.pair-item.right { border-color: #c62828; color: #c62828; }
.pair-item.selected { background: #e3f2fd; box-shadow: 0 0 0 3px #2196f3; }
.pair-item.matched { opacity: 0.4; pointer-events: none; }
.match-entry {
    display: inline-block;
    margin: 0.25rem;
    padding: 0.3rem 0.8rem;
    background: #e8f5e9;
    border-radius: 6px;
    font-size: 0.9rem;
}

/* Story Questions */
.story-question {
    margin-bottom: 1.5rem;
}
.question-text {
    font-weight: 600;
    margin-bottom: 0.5rem;
}
.question-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.option-btn {
    padding: 0.5rem 1rem;
    border: 2px solid #e0e0e0;
    background: white;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}
.option-btn:hover { border-color: #2196f3; }
.option-btn.selected { background: #2196f3; color: white; border-color: #2196f3; }

/* Submit */
.submit-btn {
    display: block;
    margin: 1.5rem auto 0;
}

/* Feedback */
.exercise-feedback {
    text-align: center;
    padding: 1.5rem;
    margin-top: 1rem;
    border-radius: 12px;
    background: #f5f5f5;
}
.feedback-emoji { font-size: 3rem; margin-bottom: 0.5rem; }
.feedback-score { font-size: 1.5rem; font-weight: 700; }
.feedback-accuracy { color: #666; margin: 0.5rem 0; }
.feedback-bonuses { margin: 0.5rem 0; }
.bonus {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    background: #e8f5e9;
    color: #2e7d32;
    border-radius: 4px;
    font-size: 0.85rem;
    margin: 0.2rem;
}
.feedback-message {
    font-size: 1.1rem;
    font-weight: 600;
    margin-top: 0.5rem;
}
.feedback-badges { margin-top: 1rem; }
.badge-tag {
    display: inline-block;
    padding: 0.3rem 0.8rem;
    background: #ff9800;
    color: white;
    border-radius: 20px;
    font-weight: 600;
    margin: 0.25rem;
}

/* Session Complete */
.session-complete {
    text-align: center;
    padding: 2rem 0;
}
.complete-icon { font-size: 4rem; margin-bottom: 1rem; }
.complete-subtitle { color: #666; margin-bottom: 2rem; }
.new-badges-section { margin: 2rem 0; }
.badge-card.new {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, #ff9800, #f57c00);
    color: white;
    border-radius: 12px;
    margin: 0.5rem;
    font-weight: 700;
}
.score-breakdown {
    max-width: 400px;
    margin: 2rem auto;
    text-align: left;
}
.score-row {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid #eee;
}
.score-value { font-weight: 700; color: #2196f3; }
.session-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 2rem;
    flex-wrap: wrap;
}

/* Progress Page */
.progress-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}
.progress-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-radius: 12px;
    background: white;
    border: 2px solid #e0e0e0;
}
.progress-card.status-mastered { border-color: #4caf50; }
.progress-card.status-locked { opacity: 0.5; }
.progress-icon { font-size: 2rem; }
.progress-info { flex: 1; }
.progress-name { font-weight: 700; margin-bottom: 0.5rem; }
.progress-bar-container {
    height: 6px;
    background: #e0e0e0;
    border-radius: 3px;
    overflow: hidden;
}
.progress-bar-fill {
    height: 100%;
    background: #4caf50;
    border-radius: 3px;
    transition: width 0.5s;
}
.progress-detail {
    font-size: 0.85rem;
    color: #888;
    margin-top: 0.25rem;
}

.activity-list {
    max-width: 600px;
    margin: 0 auto;
}
.activity-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid #eee;
}
.activity-technique { font-weight: 600; }
.activity-lesson { color: #888; font-size: 0.9rem; margin-left: 0.5rem; }
.activity-score { font-weight: 700; color: #2196f3; }

.section-title {
    margin-top: 2rem;
    margin-bottom: 1rem;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 600px) {
    .technique-grid { grid-template-columns: 1fr; }
    .pair-match-grid { flex-direction: column; gap: 1rem; }
    .digit { font-size: 1.8rem; padding: 0.4rem 0.5rem; }
    .recall-input { width: 100%; }
    .session-actions { flex-direction: column; }
}