/**
 * MSW Language Learning Tool Styles
 * Senior-friendly: large text, high contrast, audio-first
 */

.msw-lang-learn { max-width: 900px; margin: 0 auto; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 18px; line-height: 1.6; color: #2c3e50; }
.msw-lang-learn *, .msw-lang-learn *::before, .msw-lang-learn *::after { box-sizing: border-box; }

/* HEADER */
.msw-lang-learn .msw-calc-header { text-align: center; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 3px solid #27ae60; }
.msw-lang-learn .msw-calc-header h2 { font-size: 32px; color: #2c3e50; margin: 0 0 8px; }

/* INFO BANNER */
.ll-info-banner { display: flex; align-items: flex-start; gap: 15px; background: #eafaf1; border: 1px solid #c8e6d5; border-radius: 10px; padding: 20px; margin-bottom: 24px; }
.ll-info-icon { font-size: 28px; flex-shrink: 0; }
.ll-info-text { font-size: 16px; color: #2d6a4f; line-height: 1.5; }

/* STATS */
.ll-stats-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 24px; }
.ll-stat { background: #f8f9fa; border: 2px solid #e0e6ed; border-radius: 12px; padding: 14px; text-align: center; }
.ll-stat-value { display: block; font-size: 26px; font-weight: 800; color: #2c3e50; }
.ll-stat-label { display: block; font-size: 12px; color: #888; text-transform: uppercase; letter-spacing: 0.5px; }

/* LANGUAGE GRID */
.ll-language-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 30px; }
.ll-lang-card { background: #fff; border: 3px solid #e0e6ed; border-radius: 14px; padding: 24px 16px; text-align: center; cursor: pointer; transition: all 0.2s; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ll-lang-card:hover { border-color: #27ae60; transform: translateY(-3px); box-shadow: 0 6px 16px rgba(0,0,0,0.08); }
.ll-lang-flag { font-size: 48px; }
.ll-lang-name { font-size: 20px; font-weight: 700; color: #2c3e50; }
.ll-lang-sub { font-size: 15px; color: #888; }
.ll-lang-progress { font-size: 13px; color: #27ae60; font-weight: 600; min-height: 18px; }

/* NAV */
.ll-nav { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 2px solid #ecf0f1; flex-wrap: wrap; }
.ll-nav h3 { margin: 0; font-size: 22px; flex: 1; }
.ll-cat-subtitle { font-size: 16px; color: #666; margin: 0 0 20px; }

/* CATEGORY GRID */
.ll-category-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ll-cat-card { background: #fff; border: 2px solid #e0e6ed; border-radius: 12px; padding: 20px; cursor: pointer; transition: all 0.2s; text-align: left; display: flex; flex-direction: column; gap: 6px; }
.ll-cat-card:hover { border-color: #27ae60; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
.ll-cat-icon { font-size: 32px; }
.ll-cat-name { font-size: 18px; font-weight: 700; color: #2c3e50; }
.ll-cat-desc { font-size: 14px; color: #888; }
.ll-cat-progress-bar { height: 6px; background: #ecf0f1; border-radius: 3px; overflow: hidden; width: 100%; }
.ll-cat-progress-fill { height: 100%; background: #27ae60; border-radius: 3px; transition: width 0.3s; }
.ll-cat-progress-text { font-size: 13px; color: #27ae60; font-weight: 600; }

/* MODE TABS */
.ll-mode-tabs { display: flex; gap: 6px; margin-left: auto; }
.ll-tab { font-size: 15px; font-weight: 600; padding: 8px 16px; border: 2px solid #e0e6ed; border-radius: 8px; background: #fff; cursor: pointer; transition: all 0.2s; color: #555; }
.ll-tab:hover { border-color: #27ae60; }
.ll-tab.active { background: #27ae60; border-color: #27ae60; color: #fff; }

/* BUTTONS */
.ll-btn { font-size: 17px; font-weight: 600; padding: 12px 24px; border: none; border-radius: 10px; cursor: pointer; transition: all 0.2s; }
.ll-btn-back { background: #ecf0f1; color: #555; font-size: 16px; padding: 10px 18px; }
.ll-btn-back:hover { background: #dfe6e9; }
.ll-btn-primary { background: #27ae60; color: #fff; }
.ll-btn-primary:hover { background: #219a52; }
.ll-btn-secondary { background: #ecf0f1; color: #2c3e50; }
.ll-btn-secondary:hover { background: #dfe6e9; }
.ll-btn-save { background: #3498db; color: #fff; }
.ll-btn-save:hover { background: #2980b9; }
.ll-btn-print { background: #8e44ad; color: #fff; }
.ll-btn-print:hover { background: #7d3c98; }
.ll-btn-reveal { background: #f39c12; color: #fff; font-size: 18px; padding: 14px 28px; }
.ll-btn-reveal:hover { background: #e67e22; }
.msw-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 30px; padding-top: 20px; border-top: 2px solid #ecf0f1; }

/* =================== BROWSE MODE =================== */
.ll-phrase-list { display: flex; flex-direction: column; gap: 10px; }
.ll-phrase-item { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 18px; background: #fff; border: 2px solid #e0e6ed; border-radius: 12px; transition: border-color 0.2s; }
.ll-phrase-item:hover { border-color: #27ae60; }
.ll-phrase-item.ll-learned { border-color: #c8e6d5; background: #f0faf4; }
.ll-phrase-main { flex: 1; }
.ll-phrase-en { font-size: 16px; color: #888; margin-bottom: 4px; }
.ll-phrase-foreign { font-size: 20px; font-weight: 700; color: #2c3e50; }
.ll-phrase-roman { font-size: 15px; color: #27ae60; font-style: italic; margin-top: 2px; }
.ll-phrase-actions { display: flex; gap: 8px; align-items: center; }
.ll-speak-btn { font-size: 28px; background: none; border: 2px solid #e0e6ed; border-radius: 50%; width: 48px; height: 48px; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; justify-content: center; }
.ll-speak-btn:hover { border-color: #3498db; background: #eaf6ff; }
.ll-learn-btn { font-size: 24px; background: none; border: none; cursor: pointer; padding: 4px; }

/* =================== FLASHCARD MODE =================== */
.ll-flashcard-container { display: flex; flex-direction: column; align-items: center; padding: 20px 0; }
.ll-flashcard { background: #fff; border: 3px solid #e0e6ed; border-radius: 16px; padding: 40px 30px; width: 100%; max-width: 500px; min-height: 200px; display: flex; align-items: center; justify-content: center; text-align: center; margin-bottom: 20px; }
.ll-fc-en { font-size: 24px; font-weight: 700; color: #2c3e50; }
.ll-fc-hint { font-size: 15px; color: #bbb; margin-top: 12px; }
.ll-fc-foreign { font-size: 28px; font-weight: 800; color: #27ae60; }
.ll-fc-roman { font-size: 18px; color: #888; margin-top: 8px; font-style: italic; }
.ll-fc-speak { font-size: 24px; margin-top: 16px; }
.ll-fc-controls { display: flex; gap: 14px; margin-bottom: 12px; }
.ll-fc-progress { font-size: 15px; color: #888; }

/* =================== QUIZ MODE =================== */
.ll-quiz-container { max-width: 600px; margin: 0 auto; padding: 20px 0; }
.ll-quiz-progress { font-size: 15px; color: #888; text-align: center; margin-bottom: 16px; }
.ll-quiz-question { font-size: 20px; text-align: center; margin-bottom: 24px; color: #2c3e50; padding: 20px; background: #f8f9fa; border-radius: 12px; }
.ll-quiz-options { display: flex; flex-direction: column; gap: 12px; }
.ll-quiz-option { font-size: 18px; padding: 16px 20px; border: 3px solid #e0e6ed; border-radius: 12px; background: #fff; cursor: pointer; text-align: left; transition: all 0.2s; color: #2c3e50; }
.ll-quiz-option:hover:not(:disabled) { border-color: #27ae60; background: #f0faf4; }
.ll-quiz-correct { border-color: #27ae60; background: #eafaf1; color: #27ae60; font-weight: 700; }
.ll-quiz-wrong { border-color: #e74c3c; background: #fdedec; color: #e74c3c; }
.ll-quiz-feedback { text-align: center; font-size: 18px; font-weight: 600; margin-top: 16px; padding: 12px; border-radius: 8px; }

/* QUIZ RESULTS */
.ll-quiz-results-content { text-align: center; padding: 40px 20px; max-width: 500px; margin: 0 auto; }
.ll-qr-icon { font-size: 64px; margin-bottom: 12px; }
.ll-qr-score { background: linear-gradient(135deg, #27ae60, #2ecc71); color: #fff; border-radius: 16px; padding: 24px; margin: 20px 0; }
.ll-qr-label { display: block; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; opacity: 0.8; }
.ll-qr-value { display: block; font-size: 42px; font-weight: 900; }
.ll-qr-message { font-size: 17px; color: #555; margin-bottom: 24px; }
.ll-qr-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* PRINT */
@media print {
    .ll-btn, .ll-speak-btn, .ll-learn-btn, .ll-mode-tabs, .ll-info-banner, .msw-actions, .ll-nav button { display: none !important; }
    .ll-phrase-item { break-inside: avoid; border: 1px solid #ccc; }
    .ll-phrase-foreign { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

/* SPEECH RATE CONTROL */
.ll-speech-rate-control {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #f0f7ff;
    border: 1px solid #c8ddf0;
    border-radius: 10px;
    padding: 12px 18px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.ll-sr-label {
    font-size: 18px;
    font-weight: 600;
    color: #2c5282;
    white-space: nowrap;
}
.ll-sr-slider-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 180px;
}
.ll-sr-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #2c5282;
    background: #fff;
    color: #2c5282;
    font-size: 22px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    flex-shrink: 0;
    line-height: 1;
}
.ll-sr-btn:hover {
    background: #2c5282;
    color: #fff;
}
.ll-sr-slider {
    flex: 1;
    height: 8px;
    -webkit-appearance: none;
    appearance: none;
    background: #c8ddf0;
    border-radius: 4px;
    outline: none;
    cursor: pointer;
    min-width: 100px;
}
.ll-sr-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #2c5282;
    cursor: pointer;
    border: 3px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.ll-sr-slider::-moz-range-thumb {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #2c5282;
    cursor: pointer;
    border: 3px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.ll-sr-value {
    font-size: 16px;
    font-weight: 600;
    color: #2c5282;
    min-width: 110px;
    text-align: right;
    white-space: nowrap;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .msw-lang-learn { padding: 0 10px; }
    .ll-language-grid { grid-template-columns: 1fr 1fr; }
    .ll-category-grid { grid-template-columns: 1fr; }
    .ll-stats-bar { grid-template-columns: 1fr 1fr; }
    .ll-nav { flex-direction: column; align-items: flex-start; }
    .ll-mode-tabs { margin-left: 0; width: 100%; justify-content: center; }
    .ll-phrase-item { flex-direction: column; align-items: flex-start; }
    .ll-phrase-actions { align-self: flex-end; }
    .ll-speech-rate-control { flex-direction: column; align-items: stretch; text-align: center; }
    .ll-sr-value { text-align: center; min-width: auto; }
}
@media (max-width: 480px) {
    .ll-language-grid { grid-template-columns: 1fr; }
    .ll-stats-bar { grid-template-columns: 1fr 1fr; gap: 8px; }
    .ll-flashcard { padding: 24px 16px; }
    .ll-fc-foreign { font-size: 22px; }
    .ll-qr-value { font-size: 32px; }
}