* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ===== WASHI PAPER THEME — CSS CUSTOM PROPERTIES ===== */
:root {
    /* Washi paper base */
    --washi:          #fff3e5;
    --washi-light:    #fef9f4;
    --washi-dark:     #e4dfe1;
    --washi-shadow:   rgba(49, 17, 4, 0.12);

    --pastel-gray:    #D7CFBF;

    /* Typography */
    --text-primary:   var(--japanese-indigo);
    --text-secondary: var(--slate);
    --text-muted:     #8E8E8E;
    --border:         #E3E3E3;

    /* Vocabulary learn cards: tall phones (~19.5:9 / 20:9) — space below sticky nav + margins */
    --learn-card-height: 520px;
    --learn-card-viewport-offset: max(10.5rem, calc(env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px) + 8.75rem));
    /* Extra scrollable space below the last sense so short groups can sit off the bottom and sticky POS rows can scroll away */
    --learn-definitions-scroll-buffer: clamp(4.5rem, 26dvh, 11rem);

    /* Reading mode — blue */
    --reading:        #2874A6;
    --reading-mid:    #83A8D4;
    --reading-bg:     #D3F7FF;

    /* Meaning mode — pink */
    --meaning:        #ED408B;
    --meaning-mid:    #F2799B;
    --meaning-bg:     #FFC2DB;

    /* Grammar — purple */
    --grammar:        #765F93;
    --grammar-accent: #A858C8;

    /* Mastery tiers (vocab card skill badges, grammar-focus chart) - Great to Needs work */
    --mastery-5: #28a745;
    --mastery-4: #51cf66;
    --mastery-3: #fcc419;
    --mastery-2: #ff922b;
    --mastery-1: #fa5252;

    /* Success / error */
    --success:        #B2D000;
    --success-bg:     #CEFFFB;
    --success-text:   #396C6A;
    --error:          #E4110D;
    --error-bg:       #FF8A89;
    --error-text:     #910100;

    /* Earth tones — primary CTA / buttons */
    --earth:          #887259;
    --earth-dark:     #6C5E4F;
    --earth-light:    #8A8278;
    

    /* Warm highlight */
    --highlight:      #FFE785;
    --highlight-mid:  #FFDA59;

    /* Orange accent */
    --orange:         #F3701e;
    --orange-light:   #FFC59E;

    /* Teal */
    --teal:           #328C8D;
    --teal-dark:      #396C6A;

    /* Japanese Indigo*/
    --japanese-indigo: #1e394b;
    --slate: #4b607f;

    /* Page titles — system serifs with Windows & Android first (Constantia/Cambria/Bodoni MT, then Noto/Roboto/Droid Serif, then universal fallbacks) */
    --font-display-serif: Constantia, Cambria, "Bodoni MT", "Noto Serif", "Roboto Serif", "Droid Serif", Georgia, "Times New Roman", serif;

}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, rgba(255, 243, 229, 0.97) 0%, rgba(228, 223, 225, 0.95) 100%),
                url('/static/img/background.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    color: var(--text-primary);
}

/* Navigation Menu */
.nav-menu {
    position: sticky;
    top: 0;
    width: 100%;
    background: var(--washi);
    box-shadow: 0 2px 10px var(--washi-shadow);
    backdrop-filter: blur(10px);
    z-index: 1000;
    border-bottom: 1px solid var(--washi-dark);
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.nav-left {
    display: flex;
    gap: 2rem;
    align-items: center;
}

.nav-right {
    display: flex;
    align-items: center;
}

.nav-link {
    color: var(--earth-dark);
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    transition: all 0.3s ease;
    position: relative;
}

.nav-link:hover {
    background: rgba(128, 89, 67, 0.12);
    color: var(--earth);
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 80%;
    height: 2px;
    background: linear-gradient(90deg, var(--earth), var(--earth-dark));
    transition: transform 0.3s ease;
}

.nav-link:hover::after {
    transform: translateX(-50%) scaleX(1);
}

.nav-logout {
    background: linear-gradient(135deg, var(--earth) 0%, var(--earth-dark) 100%);
    color: white;
}

.nav-logout:hover {
    background: linear-gradient(135deg, var(--earth-dark) 0%, var(--earth) 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--washi-shadow);
}

.nav-logout::after {
    display: none;
}

/* Grammar concept inline links (cross-references to other grammar pages) */
.grammar-inline-link {
    color: var(--earth);
    text-decoration: none;
    font-weight: 600;
}
.grammar-inline-link:hover {
    text-decoration: underline;
    color: var(--earth-dark);
}

/* Mobile Navigation Responsive Styles */
@media (max-width: 768px) {
    .nav-container {
        padding: 0.75rem 1rem;
        flex-wrap: wrap;
    }
    
    .nav-left {
        gap: 0.5rem;
        flex-wrap: wrap;
        flex: 1;
        min-width: 0;
    }
    
    .nav-right {
        flex-shrink: 0;
    }
    
    .nav-link {
        font-size: 0.875rem;
        padding: 0.4rem 0.75rem;
        white-space: nowrap;
    }
}

@media (max-width: 480px) {
    .nav-container {
        padding: 0.5rem 0.75rem;
    }
    
    .nav-left {
        gap: 0.25rem;
    }
    
    .nav-link {
        font-size: 0.8rem;
        padding: 0.35rem 0.6rem;
    }
}

.main-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 0;
}


.container {
    text-align: center;
    background: var(--washi);
    padding: 3rem;
    border-radius: 20px;
    box-shadow: 0 20px 40px var(--washi-shadow);
    backdrop-filter: blur(10px);
    max-width: 1200px;
    width: 90%;
    border: 1px solid var(--washi-dark);
}

.welcome-text {
    font-family: var(--font-display-serif);
    font-size: 4rem;
    font-weight: bold;
    color: var(--japanese-indigo);
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(49, 17, 4, 0.15);
}


.cta-button {
    background: linear-gradient(135deg, var(--teal) 0%, var(--teal-dark) 100%);
    color: white;
    padding: 1rem 2rem;
    border: none;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 1rem;
}

.cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px var(--washi-shadow);
}

.cta-button.secondary {
    background: linear-gradient(135deg, var(--japanese-indigo) 0%, var(--slate) 100%);
}

/* Login Page Styles */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(109, 109, 109, 0.95) 100%),
                url('/static/img/background.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.login-card {
    background: white;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    padding: 2.5rem;
    width: 100%;
    max-width: 450px;
    margin: 1rem;
}

.form-toggle {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
}

.login-form.hidden {
    display: none;
}

.form-toggle button {
    flex: 1;
    padding: 0.75rem;
    border: 2px solid #e0e0e0;
    background: white;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    color: #666;
    cursor: pointer;
    transition: all 0.3s ease;
}

.form-toggle button.active {
    background: linear-gradient(135deg, var(--earth) 0%, var(--earth-dark) 100%);
    color: white;
    border-color: var(--earth);
}

.form-toggle button:hover:not(.active) {
    background: #f5f5f5;
}


.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: #2c3e50;
    font-weight: 600;
    font-size: 0.95rem;
}

.form-group input {
    width: 100%;
    padding: 0.875rem;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.form-group input:focus {
    outline: none;
    border-color: var(--earth);
    box-shadow: 0 0 0 3px var(--washi-shadow);
}

#login-button, #register-button {
    width: 100%;
    padding: 0.875rem;
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    color: white;
    cursor: pointer;
    background: linear-gradient(135deg, var(--earth) 0%, var(--earth-dark) 100%);
    transition: all 0.2s ease;
}

#login-button:hover, #register-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--washi-shadow);
}


.error-message {
    background: #fee;
    color: #c33;
    padding: 1rem;
    border-radius: 10px;
    border-left: 4px solid #c33;
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

.success-message {
    background: #efe;
    color: #3c3;
    padding: 1rem;
    border-radius: 10px;
    border-left: 4px solid #3c3;
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

.global-alert-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1.5rem;
    background: #fff8e1;
    color: #8a6d00;
    border-bottom: 1px solid #f0ad4e;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    font-size: 0.95rem;
    font-weight: 600;
    transform: translateY(-100%);
    visibility: hidden;
    /* visibility switches to hidden only after the slide-up finishes (delay matches the
       transform duration), so removing .is-visible animates out instead of vanishing instantly -
       the reverse (.is-visible added) makes it visible immediately so the drop-in isn't delayed. */
    transition: transform 0.35s ease, visibility 0s linear 0.35s;
}

.global-alert-banner.is-visible {
    /* --nav-height is measured/kept in sync by base.html's GaijinAlertBanner script. */
    transform: translateY(var(--nav-height, 0px));
    visibility: visible;
    transition: transform 0.35s ease, visibility 0s linear 0s;
}

.global-alert-banner-close {
    background: none;
    border: none;
    color: inherit;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.25rem;
    flex-shrink: 0;
}

.login-note {
    margin-top: 1rem;
    color: #666;
    font-size: 0.9rem;
    line-height: 1.4;
    text-align: center;
}


/* Study Mode Indicator Badges */
.mode-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
}

.mode-badge {
    padding: 12px 24px;
    border-radius: 25px;
    font-weight: 600;
    font-size: 16px;
    display: inline-block;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}


/* Kanji Display Visual Differentiation */
.kanji-display {
    /* margin: 30px 0; */
    padding: 40px;
    transition: all 0.3s ease;
}
.kanji-display.top {
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}
.title-display-meaning {
    background-color: var(--meaning);
    border-bottom: 3px solid var(--meaning);
    border-left: 3px solid var(--meaning);
    border-right: 3px solid var(--meaning);
    color: #ffffff;
    padding: 5px 20px;
    text-align: center;
}
.title-display-reading {
    background-color: var(--reading);
    border-bottom: 3px solid var(--reading);
    border-left: 3px solid var(--reading);
    border-right: 3px solid var(--reading);
    color: #ffffff;
    padding: 5px 20px;
    text-align: center;
}

.title-display-reading.bottom {
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}
.title-display-meaning.bottom    {
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}

.kanji-display-reading {
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--reading) 12%, transparent) 0%,
        color-mix(in srgb, var(--reading-mid) 12%, transparent) 100%
    );
    border: 3px solid var(--reading);
    box-shadow: 0 4px 15px color-mix(in srgb, var(--reading) 22%, transparent);
}

.kanji-display-meaning {
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--meaning) 12%, transparent) 0%,
        color-mix(in srgb, var(--meaning-mid) 12%, transparent) 100%
    );
    border: 3px solid var(--meaning);
    box-shadow: 0 4px 15px color-mix(in srgb, var(--meaning) 22%, transparent);
}

/* Study shell — vocabulary, numbers, shared with study.html */
/* Fixed top offset (instead of .main-content's default vertical centering) so
   navigating Study -> Answer never jumps: both containers anchor at the same spot,
   and taller content (usually the answer side) just grows further down the page
   instead of re-centering upward. min-height is a shared floor so a shorter answer
   card (e.g. a short meaning-mode result) doesn't shrink below the study card's
   typical height either. Keep both values in sync with .answer-container below. */
.study-container {
    position: relative;
    align-self: flex-start;
    margin-top: clamp(24px, 8vh, 120px);
    min-height: 420px;
}
.study-mode-indicator {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 20;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    background: rgba(255, 255, 255, 0.88);
    color: #333;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.2px;
    text-transform: uppercase;
}
.study-container-mode-reading .study-mode-indicator {
    color: var(--reading);
    border-color: color-mix(in srgb, var(--reading) 42%, rgba(0, 0, 0, 0.15));
}
.study-container-mode-meaning .study-mode-indicator {
    color: var(--meaning);
    border-color: color-mix(in srgb, var(--meaning) 42%, rgba(0, 0, 0, 0.15));
}
.study-container-mode-e2j .study-mode-indicator {
    color: #14b8a6;
    border-color: color-mix(in srgb, #14b8a6 42%, rgba(0, 0, 0, 0.15));
}

/* English → Japanese (vocabulary + verb endings) — shared card chrome */
.kanji-display-english-to-japanese {
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.1) 0%, rgba(6, 182, 212, 0.1) 100%);
    border: 3px solid #14b8a6;
    box-shadow: 0 4px 15px rgba(20, 184, 166, 0.2);
}
.title-display-english-to-japanese {
    background-color: #14b8a6;
    border-bottom: 3px solid #14b8a6;
    border-left: 3px solid #14b8a6;
    border-right: 3px solid #14b8a6;
    color: #fff;
    padding: 5px 20px;
    text-align: center;
}
.title-display-english-to-japanese.bottom {
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}

/* ===== HOME PAGE ===== */

.home-daily-words {
    max-width: 1100px;
    margin: 0 auto 32px;
    padding: 0 8px;
}
.home-daily-words-heading {
    text-align: center;
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 8px;
}
.home-daily-words-note {
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin: 0 0 20px;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}
.home-daily-words-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 16px;
}
.home-daily-words-grid .learn-card {
    min-height: 220px;
}
.home-daily-grammar-hint {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin: 4px 0 0;
    text-align: center;
}
.home-daily-words-actions {
    text-align: center;
    margin-top: 8px;
}
.home-daily-words-actions .cta-button {
    margin-top: 0;
}
.home-daily-words-actions .section-message {
    max-width: 480px;
    margin: 12px auto 0;
}

.home-study-hero {
    text-align: center;
    margin: 8px auto 32px;
    max-width: 560px;
}
.home-study-all-btn {
    display: inline-block;
    margin-top: 0;
    padding: 1.35rem 3.25rem;
    font-size: 1.35rem;
    min-width: min(100%, 300px);
    text-decoration: none;
    box-sizing: border-box;
}
.home-focused-study {
    max-width: 920px;
    margin: 0 auto 48px;
    padding: 0 8px;
}
.home-focused-study-heading {
    text-align: center;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 0 0 16px;
    letter-spacing: 0.02em;
}
.home-study-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}
.home-upcoming-reviews {
    max-width: 920px;
    margin: 0 auto 48px;
    padding: 24px;
    background: var(--washi-light);
    border-radius: 10px;
}
.home-study-grid .cta-button {
    margin-top: 0;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    text-decoration: none;
    display: inline-block;
}
.home-verb-stem-section {
    max-width: 1200px;
    margin: 0 auto 48px;
    padding: 0 8px;
}
.home-verb-stem-section h2 {
    text-align: center;
    margin-bottom: 16px;
    color: var(--text-primary);
    font-size: 1.25rem;
}

.home-section {
    margin: 40px auto;
    padding: 30px;
    background: var(--washi-light);
    border-radius: 10px;
    max-width: 1200px;
}
.home-section h2 {
    text-align: center;
    margin-bottom: 20px;
    color: var(--text-primary);
}
.section-flex-center-col.mt-30 { margin-top: 30px; }
.section-flex-center-col.mt-40 { margin-top: 40px; }
.conjugation-mode-btn { font-size: 16px; padding: 10px 20px; }
.section-add-wrap {
    text-align: center;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}
.section-add-btn {
    padding: 12px 30px;
    font-size: 16px;
    background: linear-gradient(135deg, var(--teal) 0%, var(--teal-dark) 100%);
    color: white;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    font-weight: 600;
    box-shadow: 0 4px 15px var(--washi-shadow);
    transition: all 0.3s ease;
    width: 350px;
}
.section-add-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px var(--washi-shadow); }
.section-add-btn:disabled { opacity: 0.6; cursor: default; transform: none; }
.section-add-btn.done {
    background: linear-gradient(135deg, var(--teal) 0%, var(--teal-dark) 100%);
}
.section-message { margin-top: 5px; display: none; font-size: 14px; }
.section-message.success {
    display: block; background: var(--success-bg);
    color: var(--success-text); padding: 12px;
    border-radius: 8px; border: 1px solid var(--teal-dark);
}
.section-message.error {
    display: block; background: var(--error-bg);
    color: var(--error-text); padding: 12px;
    border-radius: 8px;
}
.home-helper-text {
    text-align: center;
    margin: 0 auto 20px;
    padding: 15px;
    background: var(--washi);
    border-radius: 8px;
    max-width: 800px;
    border-left: 3px solid var(--earth-light);
}
.home-helper-text p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.6;
}
.home-helper-text ul {
    margin: 10px auto 10px;
    padding-left: 20px;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.6;
    text-align: left;
    display: inline-block;
}
.verb-input-wrap { text-align: center; margin-bottom: 30px; }
.verb-input-form { display: inline-block; }
.verb-input-field {
    padding: 12px 20px; font-size: 18px; width: 400px;
    border: 2px solid var(--border); border-radius: 5px; margin-right: 10px;
    background: var(--washi-light); color: var(--text-primary);
}
.verb-input-field:focus { outline: none; border-color: var(--earth); }
.verb-conjugate-btn {
    padding: 12px 30px; font-size: 18px;
    background: var(--earth); color: white;
    border: none; border-radius: 5px; cursor: pointer;
    font-weight: 600; transition: background 0.2s;
}
.verb-conjugate-btn:hover { background: var(--earth-dark); }
.verb-error { color: var(--error); margin-top: 10px; display: none; }
.section-flex-center { display: flex; justify-content: center; margin-bottom: 30px; }
.section-flex-center-col {
    display: flex; justify-content: center;
    margin-bottom: 20px; flex-direction: column; align-items: center;
}
.section-aux-heading {
    text-align: center; margin-bottom: 15px;
    color: var(--text-primary); font-size: 20px;
}


/* Home verb conjugation wrapper */
.verb-conjugation-section {
    margin: 40px auto;
    padding: 30px;
    background: var(--washi-light);
    border-radius: 10px;
    max-width: 1200px;
}
.verb-conjugation-section h2 {
    text-align: center;
    margin-bottom: 20px;
    color: var(--text-primary);
}
.verb-conjugation-section h3 { color: var(--text-primary); }

/* ===== ABOUT PAGE ===== */
.about-content-block {
    margin: 20px auto;
    padding: 15px;
    background: var(--washi-light);
    border-radius: 8px;
    max-width: 800px;
    border-left: 3px solid var(--earth-light);
}
.about-body {
    margin: 0 0 12px;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.6;
}
.about-body:last-child { margin-bottom: 0; }

/* ===== PROFILE PAGE ===== */
.success-message {
    background: var(--success-bg);
    border: 1px solid var(--teal-dark);
    color: var(--success-text);
    padding: 1rem;
    border-radius: 6px;
    margin-bottom: 1.5rem;
    font-weight: 500;
}
.profile-section {
    margin: 2rem 0;
    padding: 2rem;
    background: var(--washi-light);
    border-radius: 8px;
    box-shadow: 0 2px 4px var(--washi-shadow);
}
.profile-section h2 {
    margin-top: 0;
    margin-bottom: 1rem;
    color: var(--text-primary);
}
.profile-section h3 {
    margin-top: 0;
    margin-bottom: 0.75rem;
    color: var(--text-secondary);
    font-size: 1.25rem;
}
.profile-section h4 {
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    color: var(--text-secondary);
    font-size: 1.1rem;
}
.profile-subsection { margin-top: 2rem; }
.section-description { color: var(--text-secondary); margin-bottom: 1.5rem; }

.user-notes-carousel {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    max-width: 640px;
    margin: 0 auto;
}
.user-notes-viewport {
    flex: 1;
    overflow: hidden;
    border-radius: 8px;
}
.user-notes-track {
    display: flex;
    transition: transform 0.3s ease;
}
.user-note-card {
    position: relative;
    flex: 0 0 100%;
    box-sizing: border-box;
    padding: 1.25rem 1.5rem;
    background: var(--washi-light);
    border: 1px solid var(--border);
    border-radius: 8px;
    min-height: 140px;
}
.user-note-phrase {
    margin: 0 0 0.75rem;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text-secondary);
}
.user-note-header {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}
.user-note-word {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}
.user-note-furigana {
    font-size: 0.95rem;
    color: var(--text-secondary);
}
.user-note-explanation {
    margin: 0 0 0.75rem;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--text-primary);
}
.user-note-date {
    font-size: 0.8rem;
    color: var(--text-secondary);
}
.user-notes-nav {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--washi-light);
    color: var(--text-primary);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, border-color 0.15s;
}
.user-notes-nav:hover:not(:disabled) {
    background: var(--grammar);
    border-color: var(--grammar);
    color: #fff;
}
.user-notes-nav:disabled {
    opacity: 0.35;
    cursor: default;
}
.user-notes-counter {
    margin: 0.75rem auto 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-align: center;
    max-width: 640px;
}
.user-note-delete {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-secondary);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}
.user-note-delete:hover:not(:disabled) {
    background: #dc3545;
    color: #fff;
}
.user-note-delete:disabled {
    opacity: 0.5;
    cursor: default;
}

.grammar-map-chart {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin-top: 1rem;
    max-width: 900px;
}
.grammar-map-row {
    display: grid;
    grid-template-columns: minmax(120px, 1.2fr) minmax(80px, 2fr) minmax(140px, 1fr);
    gap: 0.75rem;
    align-items: center;
    font-size: 0.88rem;
}
@media (max-width: 720px) {
    .grammar-map-row {
        grid-template-columns: 1fr;
        gap: 0.35rem;
    }
}
.grammar-map-label-cell {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
}
.grammar-map-badge {
    flex-shrink: 0;
    margin-top: 0.15rem;
}
.grammar-map-label {
    color: var(--text-primary);
    font-weight: 500;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.grammar-map-bar-track {
    height: 10px;
    background: var(--washi-dark);
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--border);
}
.grammar-map-bar-fill {
    height: 100%;
    border-radius: 6px;
    min-width: 2px;
    transition: width 0.25s ease;
}
/* Bar color mirrors the mastery badge tier (see MasteryLevelForEF) - same color scheme as the
   vocab card skill badges, so bar color and badge text always agree. */
.grammar-map-bar-fill[data-level="5"] { background: var(--mastery-5); }
.grammar-map-bar-fill[data-level="4"] { background: var(--mastery-4); }
.grammar-map-bar-fill[data-level="3"] { background: var(--mastery-3); }
.grammar-map-bar-fill[data-level="2"] { background: var(--mastery-2); }
.grammar-map-bar-fill[data-level="1"] { background: var(--mastery-1); }
.grammar-map-numbers {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    font-size: 0.85em;
    opacity: 0.85;
}
.grammar-map-avg { color: var(--text-secondary); }
.grammar-map-n { opacity: 0.9; }
.grammar-map-rel {
    color: var(--grammar);
    font-weight: 600;
}

.settings-form { max-width: 800px; }
.form-section {
    margin-bottom: 2.5rem;
    padding-bottom: 2.5rem;
    border-bottom: 1px solid var(--border);
}
.form-section:last-of-type { border-bottom: none; padding-bottom: 0; }
.form-help { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 1rem; display: block; }
.form-help-inline { color: var(--text-muted); font-size: 0.85rem; font-weight: normal; margin-left: 0.5rem; }
.form-group { margin-bottom: 1.5rem; }
.form-group.compact { margin-bottom: 1rem; }
.form-group label {
    display: block; font-weight: 600;
    color: var(--text-primary); margin-bottom: 0.5rem; font-size: 0.95rem;
}
.form-group input[type="number"],
.form-group input[type="text"] {
    width: 100%; max-width: 400px;
    padding: 0.75rem; border: 1px solid var(--border);
    border-radius: 6px; font-size: 1rem;
    background: white; color: var(--text-primary);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.form-group input:focus {
    outline: none;
    border-color: var(--earth);
    box-shadow: 0 0 0 0.2rem rgba(136, 114, 89, 0.2);
}
.form-hint { display: block; color: var(--text-muted); font-size: 0.85rem; margin-top: 0.25rem; }
.hotkeys-config { margin-top: 1.5rem; }
.rating-keys-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem; margin: 1rem 0;
}
.rating-keys-grid .form-group input { max-width: none; }
.form-actions { margin-top: 2rem; display: flex; gap: 1rem; }
.btn {
    padding: 0.75rem 1.5rem; border: none; border-radius: 6px;
    font-size: 1rem; font-weight: 600; cursor: pointer;
    transition: all 0.2s ease;
}
.btn-primary {
    background: linear-gradient(135deg, var(--earth) 0%, var(--earth-dark) 100%);
    color: white;
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 12px var(--washi-shadow); }
.btn-secondary {
    background: var(--washi); color: var(--text-secondary);
    border: 1px solid var(--border);
}
.btn-secondary:hover { background: var(--washi-dark); }
.user-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}
.info-item { display: flex; flex-direction: column; gap: 0.5rem; }
.info-label {
    font-weight: 600; color: var(--text-muted);
    font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.5px;
}
.info-value { font-size: 1.1rem; color: var(--text-primary); font-weight: 500; }
.checkbox-group { margin-bottom: 1rem; }
.checkbox-label { display: flex; align-items: flex-start; gap: 0.75rem; cursor: pointer; font-weight: normal; }
.checkbox-label input[type="checkbox"] {
    margin-top: 0.25rem; width: 1.25rem; height: 1.25rem;
    cursor: pointer; flex-shrink: 0;
}
.checkbox-text { display: flex; flex-direction: column; gap: 0.25rem; }
.checkbox-text strong { color: var(--text-primary); font-weight: 600; }
.form-help-block {
    display: block; color: var(--text-muted);
    font-size: 0.9rem; font-weight: normal; line-height: 1.5;
}
.stats-overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem; margin-top: 1rem;
}
.stat-card {
    background: var(--washi);
    padding: 1.5rem; border-radius: 12px;
    border: 1px solid var(--border);
    display: flex; flex-direction: column;
    align-items: center; gap: 0.5rem;
    transition: transform 0.2s ease;
}
.stat-card:hover { transform: translateY(-3px); box-shadow: 0 4px 12px var(--washi-shadow); }
.stat-label {
    font-size: 0.85rem; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600;
}
.stat-value { font-size: 1.75rem; font-weight: 700; color: var(--text-primary); }
.upcoming-reviews-list { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.75rem; }
.upcoming-reviews-legend {
    list-style: none; display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem;
    margin: 0.5rem 0 0.25rem; padding: 0; font-size: 0.8rem; color: var(--text-secondary);
}
.upcoming-reviews-legend li { display: inline-flex; align-items: center; gap: 0.35rem; }
.upcoming-legend-swatch {
    width: 0.65rem; height: 0.65rem; border-radius: 2px; flex-shrink: 0;
}
.upcoming-legend-swatch--meaning { background: var(--meaning); }
.upcoming-legend-swatch--reading { background: var(--reading); }
.upcoming-legend-swatch--e2j { background: var(--teal); }
.upcoming-legend-swatch--verb { background: var(--earth); }
.upcoming-legend-swatch--hiragana { background: var(--grammar); }
.upcoming-legend-swatch--katakana { background: var(--orange); }
.upcoming-legend-swatch--other { background: var(--pastel-gray); border: 1px solid var(--border); }

.upcoming-day { display: flex; align-items: center; gap: 1rem; }
.day-date { width: 100px; font-size: 0.9rem; color: var(--text-secondary); font-weight: 500; flex-shrink: 0; }
.day-bar-container {
    /* flex-grow set inline per day, proportional to that day's share of the 7-day window total
       (see profile.html) - flex-shrink stays 0 so the min-width floor below always holds. */
    flex-shrink: 0; height: 14px; min-width: 4px;
    position: relative;
    transition: flex-grow 0.35s ease;
}
.day-bar-spacer {
    /* Invisible - flex-grow set inline to (grand total - this day's count), giving
       .day-bar-container only its proportional share of the row's available width. */
    flex-shrink: 1; height: 14px;
}
/* Rounded ends + clipping live here, on a wrapper that never needs to un-clip for a
   tooltip - the tooltips are siblings of this element (see .tooltip-text-- rules below),
   so hovering a segment never has to lift overflow and flip the corners square. */
.day-bar-clip {
    width: 100%; height: 100%;
    background: var(--washi-dark); border-radius: 7px; overflow: hidden;
    border: 1px solid var(--border);
}
.day-bar-segments {
    display: flex; flex-direction: row; width: 100%; height: 100%; min-width: 0;
}
.day-bar-seg {
    flex-basis: 0; flex-shrink: 1; min-width: 0;
    transition: flex-grow 0.35s ease;
}
.day-bar-seg--meaning { background: var(--meaning); }
.day-bar-seg--reading { background: var(--reading); }
.day-bar-seg--e2j { background: var(--teal); }
.day-bar-seg--verb { background: var(--earth); }
.day-bar-seg--hiragana { background: var(--grammar); }
.day-bar-seg--katakana { background: var(--orange); }
.day-bar-seg--other { background: var(--pastel-gray); }
/* Tooltips are positioned against .day-bar-container (their nearest positioned ancestor),
   not nested inside the clipped segment, so shown/hidden state never touches overflow. */
.day-bar-container:has(.day-bar-seg--meaning:hover) .tooltip-text--meaning,
.day-bar-container:has(.day-bar-seg--reading:hover) .tooltip-text--reading,
.day-bar-container:has(.day-bar-seg--e2j:hover) .tooltip-text--e2j,
.day-bar-container:has(.day-bar-seg--verb:hover) .tooltip-text--verb,
.day-bar-container:has(.day-bar-seg--hiragana:hover) .tooltip-text--hiragana,
.day-bar-container:has(.day-bar-seg--katakana:hover) .tooltip-text--katakana,
.day-bar-container:has(.day-bar-seg--other:hover) .tooltip-text--other {
    visibility: visible; opacity: 1;
}
.day-bar-empty {
    width: 100%; height: 100%; min-height: 6px;
    background: transparent;
}
.day-count { width: 88px; text-align: right; font-size: 0.9rem; color: var(--text-secondary); font-weight: 600; flex-shrink: 0; }

/* Verb ending E2J: same definition box as vocabulary; hint lines use #14b8a6 family */
#verb-ending-e2j-card .verb-ending-e2j-hint-line {
    display: none;
}
#verb-ending-e2j-card.verb-ending-e2j-card--hint-on .verb-ending-e2j-hint-line {
    display: block;
}
#verb-ending-e2j-card .verb-ending-e2j-verb {
    margin: 0.45rem 0 0.2rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: #0d9488;
}
#verb-ending-e2j-card .verb-ending-e2j-construction {
    margin: 0.25rem 0 0;
    font-size: 0.9rem;
    color: var(--text-muted);
    font-weight: normal;
}
/* Japanese → English verb ending: root gloss hint (reading palette) */
.verb-ending-j2e-hint-line {
    display: none;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--reading);
    margin: 0.5rem 0 0;
}
.verb-ending-j2e-card--hint-on .verb-ending-j2e-hint-line {
    display: block;
}
.verb-ending-j2e-submit {
    margin-top: 0;
    padding: 15px 30px;
    font-size: 18px;
    background-color: #4caf50;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
#normal-form .study-form-actions .verb-ending-j2e-submit {
    margin-top: 0;
}
.study-hint-btn[aria-pressed="true"] {
    filter: brightness(0.94);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.12);
}
.verb-ending-e2j-answer-correct {
    color: var(--teal);
    font-weight: bold;
}
.verb-ending-e2j-answer-furigana {
    color: var(--text-secondary);
    font-size: 18px;
    margin-top: 6px;
}
.verb-ending-e2j-answer-alt {
    color: var(--text-muted);
    font-size: 18px;
    margin-top: 4px;
}

/* Home verb endings table */
.home-verb-table {
    width: 100%; border-collapse: collapse; margin: 15px 0;
    background: white; border-radius: 8px; overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.home-verb-table thead tr { background: var(--japanese-indigo); color: var(--washi-light); }
.home-verb-table th {
    padding: 12px; text-align: center;
    font-weight: bold; border: 1px solid var(--earth-dark);
}
.home-verb-table td { padding: 10px; text-align: center; border: 1px solid var(--border); }
.home-verb-table tr.alt { background: var(--washi-light); }

/* Verb Conjugation Grid Styles */
.control-buttons-table {
    border-collapse: collapse;
    margin: 0 auto;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.control-buttons-table thead {
    background: var(--japanese-indigo);
    color: var(--washi-light);
}

.control-buttons-table th {
    padding: 12px 20px;
    text-align: center;
    font-weight: bold;
    font-size: 14px;
    border: 1px solid var(--earth-dark);
}

.control-buttons-table td {
    padding: 10px;
    text-align: center;
    border: 1px solid var(--border);
    background: var(--washi-light);
}

.control-buttons-table tbody tr:last-child td {
    border-bottom: none;
}

.conjugation-control-btn {
    padding: 10px 20px;
    font-size: 14px;
    background: var(--washi);
    color: var(--text-primary);
    border: 2px solid var(--border);
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s;
    width: 100%;
    min-width: 120px;
}

.conjugation-control-btn.active {
    background: var(--earth);
    color: white;
    border-color: var(--earth);
}

.conjugation-control-btn:hover {
    background: var(--washi-dark);
}

.conjugation-control-btn.active:hover {
    background: var(--earth-dark);
}


.conjugation-control-btn.locked {
    color: #c0392b;
    border-color: #e57373;
    text-decoration: line-through;
    opacity: 0.6;
    cursor: not-allowed;
}

.conjugation-control-btn.locked:hover {
    background: inherit;
}

/* Stylistic warning: grammatically possible but stiff/literary — warm overlay + ! badge (see verbGrid.js applyStylisticWarnings). */
.conjugation-control-btn.warn {
    position: relative;
    overflow: visible;
}

.conjugation-control-btn.warn::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, var(--highlight) 0%, var(--highlight-mid) 100%);
    opacity: 0.42;
    pointer-events: none;
    z-index: 1;
}

/* Real element (not ::after) so it can host a hoverable .tooltip-text child - see
   applyStylisticWarnings in verbGrid.js. */
.conjugation-warn-badge {
    position: absolute;
    top: 3px;
    right: 5px;
    width: 15px;
    height: 15px;
    padding: 0;
    font-size: 10px;
    font-weight: 800;
    line-height: 15px;
    text-align: center;
    color: var(--washi-light);
    background: var(--earth-dark);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(49, 17, 4, 0.25);
    z-index: 2;
    cursor: default;
}

.conjugation-warn-badge:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

.conjugation-control-btn.warn.active::before {
    opacity: 0.38;
}

.conjugation-control-btn.warn.active .conjugation-warn-badge {
    background: var(--japanese-indigo);
}

/* Standard verbs root-verb chooser: 2 columns x 7 rows */
.verb-options-wrap {
    margin-bottom: 0;
}

.verb-options-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.verb-options-grid .conjugation-control-btn {
    min-width: 0;
    padding: 8px 10px;
}

.conjugation-grid-container {
    display: grid;
    grid-template-columns: 180px minmax(260px, 1fr) 72px;
    grid-template-rows: auto repeat(5, auto);
    gap: 2px;
    background: var(--border);
    border: 2px solid var(--border);
    border-radius: 5px;
    overflow: hidden;
}

.grid-header-row {
    display: contents;
}

.grid-header-cell {
    background: var(--japanese-indigo);
    color: var(--washi-light);
    padding: 12px;
    text-align: center;
    font-weight: bold;
    font-size: 14px;
}

.grid-row {
    display: contents;
}

.grid-english-cell {
    background: var(--washi-light);
    padding: 15px 10px;
    text-align: center;
    font-weight: 500;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-style: italic;
    color: var(--text-secondary);
}

.grid-label-cell {
    background: var(--washi);
    padding: 16px 12px;
    text-align: center;
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
}

.grid-cell {
    background: white;
    padding: 16px 18px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
    font-size: 16px;
    line-height: 1.45;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.grid-cell:hover {
    background: var(--washi-light);
    transform: scale(1.05);
}

.grid-alt-cell {
    background: #fff;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.alt-conjugation-btn {
    width: 56px;
    height: 34px;
    padding: 0;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--washi-light);
    color: var(--text-primary);
    font-size: 13px;
    line-height: 1;
    text-transform: lowercase;
    cursor: pointer;
    transition: all 0.2s ease;
}

.alt-conjugation-btn:hover {
    background: var(--washi);
}

.alt-conjugation-btn.active {
    border-color: var(--earth);
    background: rgba(137, 108, 87, 0.12);
    color: var(--earth-dark);
}


.conjugation-english-line {
    margin: 12px 0 0;
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.5;
    font-style: italic;
}

/* Auxiliary Verbs Table Styles */
.auxiliary-verbs-container {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

.auxiliary-verbs-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.auxiliary-verbs-table thead {
    background: var(--japanese-indigo);
    color: var(--washi-light);
}

.auxiliary-verbs-table th {
    padding: 15px;
    text-align: left;
    font-weight: bold;
    font-size: 14px;
    border-bottom: 2px solid var(--earth-dark);
}

/* Align headers with their columns */
.jodoshi-table th:nth-child(1) {
    text-align: center;
}

.jodoshi-table th:nth-child(2) {
    text-align: center;
}

.hojodoshi-table th {
    text-align: center;
}

.auxiliary-verbs-table tbody tr {
    border-bottom: 1px solid var(--border);
    transition: background-color 0.2s;
}

.auxiliary-verbs-table tbody tr:hover {
    background-color: var(--washi-light);
}

.auxiliary-verbs-table tbody td {
    padding: 12px 15px;
    font-size: 14px;
    vertical-align: top;
}

/* Jodōshi table (2 columns): Column 1 = Japanese, Column 2 = Meaning */
.jodoshi-table tbody td:nth-child(1) {
    font-family: 'MS Gothic', 'MS PGothic', 'Hiragino Kaku Gothic Pro', 'Hiragino Sans', sans-serif;
    font-size: 16px;
    font-weight: 500;
}

.jodoshi-table tbody td:nth-child(2) {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-style: italic;
    color: var(--text-secondary);
}

/* Hojodōshi sub-tables: 4 columns — Auxiliary | Auxiliary (alone) | Combined form | Construction meaning */
.hojodoshi-table tbody td:nth-child(1),
.hojodoshi-table tbody td:nth-child(3) {
    font-family: 'MS Gothic', 'MS PGothic', 'Hiragino Kaku Gothic Pro', 'Hiragino Sans', sans-serif;
    font-size: 16px;
    font-weight: 500;
}

.hojodoshi-table tbody td:nth-child(2),
.hojodoshi-table tbody td:nth-child(4) {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-style: italic;
    color: var(--text-secondary);
}

/* Sub-table grouping for 補助動詞 categories */
.hojodoshi-subtables {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.hojodoshi-subsection {
    display: block;
}

.hojodoshi-subtitle {
    margin: 0 0 4px 0;
    font-size: 1.1rem;
    color: var(--japanese-indigo);
    font-weight: 700;
    border-bottom: 1px solid var(--earth-dark);
    padding-bottom: 4px;
}

.hojodoshi-subtitle-desc {
    margin: 0 0 8px 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-style: italic;
}

.hojodoshi-subsection .home-verb-table {
    margin-top: 0;
}

.category-header {
    background: var(--washi) !important;
    font-weight: bold;
    font-size: 15px;
    color: var(--text-primary);
}

.category-header td {
    padding: 12px 15px;
    border-bottom: 2px solid var(--border);
}


#conjugationTable {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

#conjugationTable th {
    background: #e9ecef;
    padding: 12px;
    border: 1px solid #ddd;
    text-align: left;
    font-weight: 600;
}

#conjugationTable td {
    padding: 12px;
    border: 1px solid #ddd;
    font-size: 16px;
}

#conjugationTable tbody tr:nth-child(6) {
    border-top: 2px solid #333;
}

#conjugationTable tbody tr:nth-child(6) td {
    padding-top: 20px;
}

/* Gaijin Thoughts - personal notes / stream-of-consciousness in grammar content */
.gaijin-thoughts {
    margin: 20px auto;
    padding: 16px 20px;
    max-width: 700px;
    background: linear-gradient(135deg, var(--highlight) 0%, var(--washi-light) 100%);
    border-left: 4px solid var(--earth);
    border-radius: 0 8px 8px 0;
    color: var(--earth-dark);
    font-size: 14px;
    font-style: italic;
    line-height: 1.6;
}
.gaijin-thoughts-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--earth);
    margin-bottom: 8px;
    font-style: normal;
}

/* Nested lists within .learn-kana-list — restores indent after * reset */
.learn-kana-list ul {
    padding-left: 24px;
    margin: 8px 0;
}
.learn-kana-list ul ul {
    padding-left: 20px;
}

/* Chat modal prompt chips - suggested questions when e.g. writing study has low scores */
.chat-prompts:empty { display: none !important; }
.chat-prompt-btn {
    padding: 8px 14px;
    font-size: 13px;
    background: #e8ecff;
    color: #667eea;
    border: 1px solid #c7d2fe;
    border-radius: 20px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.chat-prompt-btn:hover {
    background: #c7d2fe;
    border-color: #667eea;
}

/* Chat model bubble — rotating wait phrase, response grows downward */
.chat-model-bubble {
    align-self: flex-start;
    max-width: 85%;
    padding: 10px 14px;
    background: #f1f3f5;
    color: #212529;
    border-radius: 16px 16px 16px 4px;
    font-size: 15px;
    line-height: 1.6;
}
.chat-model-bubble--pending {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.chat-wait-phrase {
    margin: 0;
    color: #6c757d;
    min-height: 1.4em;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.45s ease, transform 0.45s ease;
}
.chat-wait-phrase.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.chat-bubble-status {
    overflow: hidden;
    max-height: 2.5em;
    transition: opacity 0.35s ease, max-height 0.4s ease, margin 0.4s ease;
}
.chat-bubble-status.is-dismissed {
    opacity: 0;
    max-height: 0;
    margin: 0;
}
.chat-bubble-response {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.chat-bubble-response.is-revealed {
    grid-template-rows: 1fr;
}
.chat-bubble-response-inner {
    overflow: hidden;
    min-height: 0;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.45s ease 0.1s, transform 0.45s ease 0.1s;
}
.chat-bubble-response.is-revealed .chat-bubble-response-inner {
    opacity: 1;
    transform: translateY(0);
}

/* Chat FAB feedback animation - pulse error color then fade back to purple when writing study has low scores */
#chat-fab.chat-fab-feedback {
    position: relative;
}
#chat-fab.chat-fab-feedback::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--chat-fab-feedback-color, #ffc107);
    animation: chat-fab-pulse 3.2s ease-in-out forwards;
    z-index: 0;
    pointer-events: none;
}
#chat-fab.chat-fab-feedback svg {
    position: relative;
    z-index: 1;
}
@keyframes chat-fab-pulse {
    0% { opacity: 0; }
    20% { opacity: 1; }
    30% { opacity: 1; }
    100% { opacity: 0; }
}

/* ===== RATING BUTTONS (shared study + answer pages) ===== */
.rating-btn {
    width: 60px;
    height: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    font-weight: bold;
    border: 2px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    background-color: rgba(237, 224, 204, 0.8);
    color: var(--text-primary);
    transition: all 0.2s;
    position: relative;
}
.rating-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--washi-shadow);
    border-color: var(--earth);
    background-color: var(--washi-light);
    z-index: 10;
}
.rating-btn:active  { transform: translateY(0); }
.rating-btn:disabled { cursor: not-allowed; background-color: rgba(220, 201, 169, 0.5); color: var(--text-muted); opacity: 0.6; }

.rating-btn-suggested {
    border: 3px solid var(--reading) !important;
    box-shadow: 0 0 0 3px rgba(40, 116, 166, 0.2) !important;
    background-color: var(--reading-bg) !important;
}

/* Tooltip */
.tooltip-text {
    visibility: hidden;
    width: max-content;
    max-width: min(260px, 90vw);
    background-color: #fff;
    color: #212529;
    text-align: left;
    border: 1px solid #ced4da;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
    padding: 12px 14px;
    position: absolute;
    z-index: 1000;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 13px;
    font-weight: normal;
    pointer-events: none;
    line-height: 1.5;
}
.rating-btn:hover .tooltip-text { visibility: visible; opacity: 1; }

/* Rating 5 flash sweep */
@keyframes buttonFlashSweep {
    0%   { transform: translateX(-100%); opacity: 0.8; }
    50%  { opacity: 0.6; }
    100% { transform: translateX(100%); opacity: 0; }
}
.rating-btn-flash { position: relative; }
.rating-btn-flash::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(56, 239, 125, 0.4) 20%,
        rgba(17, 153, 142, 0.6) 50%,
        rgba(56, 239, 125, 0.4) 80%,
        transparent 100%
    );
    pointer-events: none;
    z-index: 10;
    transform: translateX(-100%);
    opacity: 0;
    border-radius: inherit;
    will-change: transform;
    clip-path: inset(0 round 8px);
}
.rating-btn-flash.animate::before { animation: buttonFlashSweep 0.6s ease-out forwards; }

/* Kanji char hover effect */
.kanji-char {
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-block;
    position: relative;
}
.kanji-char:hover  { color: var(--reading); transform: scale(1.15); text-shadow: 0 0 8px rgba(40, 116, 166, 0.3); }
.kanji-char:active { transform: scale(1.05); }

/* Search button hover */
.search-btn-pill:hover { transform: translateY(-2px); box-shadow: 0 6px 20px var(--washi-shadow); }

/* ===== WASHI COMPONENT CLASSES ===== */

/* --- Shared p / strong consistency --- */
.page-subtitle {
    margin: 0 auto 24px;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.6;
    max-width: 600px;
    text-align: center;
}
.page-subtitle-lg {
    margin: 0 auto 30px;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.6;
    max-width: 600px;
    text-align: center;
}

/* --- Study / Answer container --- */
/* Same fixed top offset and min-height as .study-container above - keep both in sync. */
.answer-container {
    position: relative;
    overflow: hidden;
    align-self: flex-start;
    margin-top: clamp(24px, 8vh, 120px);
    min-height: 420px;
    border-radius: 12px;
    padding: 20px;
}

/* --- Study counter bar --- */
.study-counter {
    text-align: center;
    margin: 20px 0 10px;
    position: relative;
    z-index: 2;
}
.study-counter p {
    font-size: 18px;
    color: var(--text-secondary);
    margin: 0;
}
.study-counter strong { color: var(--text-primary); }
.study-counter-value { color: var(--reading); font-weight: bold; }

/* --- No-words view --- */
.no-words-view {
    text-align: center;
    margin-top: 50px;
    position: relative;
    z-index: 2;
}
.no-words-title  { font-size: 24px; }
.no-words-hint   { font-size: 18px; margin-top: 20px; color: var(--text-secondary); }
.no-words-footnote { font-size: 14px; margin-top: 20px; color: var(--text-muted); }
.no-words-actions {
    margin-top: 30px;
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
.cta-link-primary {
    display: inline-block;
    padding: 15px 30px;
    background: linear-gradient(135deg, var(--earth) 0%, var(--earth-dark) 100%);
    color: white;
    border-radius: 25px;
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    box-shadow: 0 4px 15px var(--washi-shadow);
    transition: all 0.3s ease;
}
.cta-link-cram {
    display: inline-block;
    padding: 15px 30px;
    background: linear-gradient(135deg, var(--meaning-mid) 0%, var(--meaning) 100%);
    color: white;
    border-radius: 25px;
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    transition: all 0.3s ease;
}

/* --- Kanji display top wrapper --- */
.kanji-display-wrap {
    text-align: center;
    margin: 40px 0 0;
    position: relative;
    z-index: 2;
}
.definition-prompt-box {
    font-size: 24px;
    font-weight: bold;
    color: var(--text-primary);
    padding: 15px;
    background: rgba(237, 224, 204, 0.9);
    border-radius: 8px;
    max-width: 600px;
    margin: 0 auto;
}
/* E2J study: one surface like reading/meaning — no inner washi panel on top of the teal card */
.kanji-display-english-to-japanese .definition-prompt-box {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}
.definition-primary {
    font-size: 30px;
    font-weight: bold;
    color: var(--text-primary);
}
.definition-secondary {
    margin: 10px 0;
    font-size: 16px;
    color: var(--text-muted);
    font-weight: normal;
}

/* --- Kanji info panel (shared study + answer) --- */
.kanji-info-panel {
    padding: 20px;
    background: rgba(237, 224, 204, 0.95);
    border-radius: 8px;
    max-width: 1000px;
    margin: 30px auto 0;
    position: relative;
    z-index: 2;
    border: 1px solid var(--border);
    box-shadow: 0 4px 6px var(--washi-shadow);
}
.kanji-info-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border);
}
.kanji-info-title { font-size: 20px; margin: 0; color: var(--reading); }
.kanji-info-kanji { font-size: 28px; font-weight: bold; }
.kanji-hide-btn {
    padding: 8px 16px;
    font-size: 14px;
    background-color: var(--text-secondary);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s;
    font-weight: bold;
}
.kanji-section { margin-bottom: 30px; }
.kanji-section-title { font-size: 18px; margin-bottom: 15px; color: var(--text-secondary); }
.kanji-inline-highlight { font-size: 24px; font-weight: bold; color: var(--reading); }
.kanji-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
}
.kanji-loading { display: none; text-align: center; padding: 20px; }
.kanji-loading p { color: var(--text-secondary); }

/* --- Answer layout (3-column) --- */
.answer-layout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    margin: 40px 0;
    flex-wrap: wrap;
}
.answer-section {
    flex: 0 1 auto;
    min-width: 200px;
    padding: 25px;
    background: rgba(237, 224, 204, 0.9);
    border-radius: 8px;
    text-align: center;
}
/* Numbers answer page: same gradient card chrome as study (overrides .answer-section background) */
.answer-layout .kanji-display.answer-section.kanji-display-reading {
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--reading) 12%, transparent) 0%,
        color-mix(in srgb, var(--reading-mid) 12%, transparent) 100%
    );
    border: 3px solid var(--reading);
    box-shadow: 0 4px 15px color-mix(in srgb, var(--reading) 22%, transparent);
}
.answer-layout .kanji-display.answer-section.kanji-display-meaning {
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--meaning) 12%, transparent) 0%,
        color-mix(in srgb, var(--meaning-mid) 12%, transparent) 100%
    );
    border: 3px solid var(--meaning);
    box-shadow: 0 4px 15px color-mix(in srgb, var(--meaning) 22%, transparent);
}
.answer-label { font-size: 16px; margin-bottom: 8px; opacity: 0.7; }
.answer-label strong { color: var(--text-primary); }
.answer-placeholder { font-size: 16px; opacity: 0.5; }

/* Answer text sizes */
.answer-text-xl  { font-size: 48px; font-weight: bold; }
.answer-text-lg  { font-size: 28px; font-weight: bold; }
.answer-text-md  { font-size: 20px; }
.answer-text-sm  { font-size: 14px; color: var(--text-secondary); margin-top: 8px; font-style: italic; }

/* Answer state colors */
.answer-reading   { color: var(--reading); font-size: 36px; font-weight: bold; }
.answer-furigana  { font-size: 20px; color: var(--text-secondary); margin-top: 8px; }
.answer-frequency { color: var(--text-muted); font-size: 16px; }
.answer-hint { font-size: 14px; color: var(--text-secondary); margin-top: 8px; font-style: italic; }
.answer-char-mismatch { color: #dc2626; }

/* Bonus answer items */
.bonus-answers-list { text-align: left; max-width: 300px; margin: 0 auto; }
.bonus-item { margin-bottom: 8px; padding: 8px; border-radius: 4px; }
.bonus-item-text { font-size: 18px; }

/* Valid answers in third column: meaning (English definitions) + E2J (Japanese synonyms) */
.correct-answer-section:has(.answer-valid-answers-scroll) {
    width: 270px;
    max-width: 100%;
    box-sizing: border-box;
    flex: 0 0 auto;
}
.answer-valid-answers-scroll {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    max-height: min(7.5rem, 32vh);
    min-height: 0;
    min-width: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--reading) 40%, transparent) transparent;
    padding: 0 2px 2px 0;
    text-align: left;
    overflow-wrap: break-word;
    word-break: break-word;
    word-wrap: break-word;
}
@media (min-height: 700px) {
    .answer-valid-answers-scroll {
        max-height: min(9.5rem, 36vh);
    }
}
.answer-valid-answers-scroll:focus {
    outline: 2px solid color-mix(in srgb, var(--reading) 40%, transparent);
    outline-offset: 2px;
}
.answer-valid-answers-scroll::-webkit-scrollbar {
    width: 8px;
}
.answer-valid-answers-scroll::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--reading) 35%, transparent);
    border-radius: 4px;
}
.answer-valid-answers-scroll::-webkit-scrollbar-track {
    background: transparent;
}
.answer-valid-answers {
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.5;
    color: var(--reading);
    text-align: left;
}
.correct-answer-section .answer-valid-answers {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
.answer-valid-answers--definitions {
    display: flex;
    flex-direction: column;
    gap: 0.2em;
    min-width: 0;
}
/* First gloss: match .answer-text-lg (user’s answer in left column) */
.answer-valid-answers-line--first {
    font-size: 28px;
    font-weight: bold;
    color: var(--reading);
    line-height: 1.3;
    margin: 0;
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
    word-wrap: break-word;
}
.answer-valid-answers--definitions .answer-valid-answers-line--first {
    text-align: center;
    width: 100%;
}
.answer-valid-answers-bullets {
    margin: 0.2em 0 0;
    padding: 0 0 0 1.2em;
    list-style: disc;
    list-style-position: outside;
    color: var(--reading);
}
.answer-valid-answers-bullets .answer-valid-answers-li,
.answer-valid-answers-bullets .synonym-item {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.45;
    color: color-mix(in srgb, var(--reading) 82%, var(--text-secondary) 18%);
    margin: 0 0 0.3em 0;
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
    word-wrap: break-word;
    padding-left: 0.15em;
}
.answer-valid-answers-bullets .synonym-item:last-child {
    margin-bottom: 0;
}
.answer-valid-answers-line {
    margin: 0;
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
    word-wrap: break-word;
}
.answer-valid-answers--synonyms {
    display: block;
    font-size: 1.25rem;
    font-weight: 500;
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
}
.answer-valid-answers--synonyms .synonym-item--first {
    font-size: 28px;
    font-weight: bold;
    line-height: 1.3;
    margin: 0 0 0.2em 0;
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
}
.answer-valid-answers--synonyms .answer-valid-answers-bullets {
    margin-top: 0.15em;
}

/* Synonyms */
.synonyms-list { text-align: left; }
.synonym-item  { margin-bottom: 6px; font-size: 18px; }
.synonym-furigana { color: var(--text-secondary); margin-left: 4px; }
.synonym-freq     { color: var(--text-muted); font-size: 14px; margin-left: 6px; }

/* Shared link style */
.kanji-link { color: var(--reading); text-decoration: none; font-weight: bold; cursor: pointer; }
.kanji-link:hover { text-decoration: underline; }

/* Show-definitions toggle button */
.toggle-defs-btn {
    margin-top: 12px;
    padding: 6px 12px;
    font-size: 14px;
    background-color: transparent;
    color: var(--reading);
    border: 1px solid var(--reading);
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.2s;
}
.alternate-kanji-note { font-size: 12px; color: var(--text-muted); margin-top: 8px; }
.pronunciation-defs { margin-top: 12px; font-size: 16px; color: var(--text-secondary); line-height: 1.5; }

/* English definitions box (e2j center column) */
.english-definitions-box { font-size: 20px; font-weight: bold; color: var(--text-primary); }
.definition-phrase { margin: 10px 0; }

/* Show-more button (e2j synonyms) */
.show-more-btn {
    margin-top: 8px;
    padding: 6px 14px;
    font-size: 14px;
    background-color: var(--reading);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

/* Answer display box (study answered view) */
.answer-display-box {
    margin: 20px auto;
    padding: 25px;
    background: rgba(237, 224, 204, 0.9);
    border-radius: 8px;
    max-width: 600px;
    min-height: 100px;
    position: relative;
    z-index: 2;
}
.answer-detail { font-size: 20px; margin-bottom: 10px; }
.answer-detail strong { color: var(--text-primary); }

/* Rating section */
.answered-view,
.unanswered-view { position: relative; z-index: 2; }
.rating-section { text-align: center; margin: 30px 0; }
.rating-section.wide { max-width: 700px; margin-left: auto; margin-right: auto; position: relative; z-index: 2; }
.rating-question { font-size: 18px; font-weight: bold; margin-bottom: 20px; }
.rating-question.muted { opacity: 0.5; margin: 20px 0; }
.rating-form { max-width: 800px; margin: 0 auto; }
.rating-buttons { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 20px; }
.rating-group-main { display: flex; gap: 12px; }
.rating-gap { width: 20px; }

/* Study input form */
.study-form { text-align: center; margin-top: 20px; }
.study-input {
    font-size: 24px;
    text-align: center;
    padding: 10px;
    width: 300px;
    border: 2px solid var(--border);
    border-radius: 5px;
    transition: border-color 0.3s;
    background: rgba(237, 224, 204, 0.7);
    color: var(--text-primary);
}
.study-input-e2j { border-color: #14b8a6; }

/* Caps Lock badge - shown next to romaji-conversion inputs (see attachCapsLockBadge in
   romajiToHiragana.js) while Caps Lock is on, since that silently flips hiragana input to
   katakana. Color is passed in per input to match whatever accent already represents that
   input's study mode elsewhere on the page. */
.caps-lock-badge {
    display: none;
    position: relative;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-left: 8px;
    border: 2px solid currentColor;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    vertical-align: middle;
    cursor: default;
}
.caps-lock-badge.is-visible {
    display: inline-flex;
}
.caps-lock-badge:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}
.study-form-actions { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 20px; }
.study-submit-btn {
    padding: 15px 30px;
    font-size: 18px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s;
}
.study-submit-btn-e2j {
    background-color: #14b8a6;
}
.study-submit-btn-e2j:hover {
    background-color: #0d9488;
}
/* Match pronunciation (reading) / vocabulary (meaning) card accent colors */
.study-submit-btn.study-submit-btn-reading {
    background: linear-gradient(135deg, var(--reading-mid) 0%, var(--reading) 100%);
}
.study-submit-btn.study-submit-btn-reading:hover {
    filter: brightness(1.06);
}
.study-submit-btn.study-submit-btn-meaning {
    background-color: var(--meaning);
}
.study-submit-btn.study-submit-btn-meaning:hover {
    background-color: color-mix(in srgb, var(--meaning) 88%, black);
}
.study-bonus-btn {
    padding: 12px 20px;
    font-size: 14px;
    background-color: var(--reading);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s;
}
.study-hint-btn {
    position: relative;
    padding: 10px 20px;
    font-size: 14px;
    background-color: var(--orange);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s, filter 0.2s, box-shadow 0.2s;
}
.study-hint-btn:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

/* Hint panel */
.hint-panel {
    margin: 15px auto 0;
    padding: 15px;
    background: rgba(255, 197, 158, 0.3);
    border-left: 4px solid var(--orange);
    border-radius: 4px;
    max-width: 600px;
}
.hint-text { font-size: 18px; color: #e65100; text-align: center; line-height: 1.6; }
.hint-text strong { color: #bf360c; font-weight: 700; text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; }
.hint-wait-phrase {
    margin: 0;
    font-size: 18px;
    color: #e65100;
    text-align: center;
    min-height: 1.4em;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.45s ease, transform 0.45s ease;
}
.hint-wait-phrase.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.hint-bubble-status {
    overflow: hidden;
    max-height: 2.5em;
    transition: opacity 0.35s ease, max-height 0.4s ease, margin 0.4s ease;
}
.hint-bubble-status.is-dismissed {
    opacity: 0;
    max-height: 0;
    margin: 0;
}
.hint-response-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.hint-response-body.is-revealed {
    grid-template-rows: 1fr;
}
.hint-response-body-inner {
    overflow: hidden;
    min-height: 0;
}
.hint-response-body-inner .hint-text {
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.45s ease 0.1s, transform 0.45s ease 0.1s;
}
.hint-response-body.is-revealed .hint-response-body-inner .hint-text {
    opacity: 1;
    transform: translateY(0);
}

/* Bonus mode */
.bonus-mode-wrap { text-align: center; margin-top: 20px; }
.bonus-counter-display { margin-bottom: 15px; }
.bonus-count-number { font-size: 32px; font-weight: bold; color: var(--reading); }
.bonus-hint { font-size: 14px; color: var(--text-secondary); margin-top: 5px; }
.bonus-answers-list { margin-top: 15px; min-height: 50px; }
.bonus-add-btn {
    margin-top: 15px;
    padding: 12px 24px;
    font-size: 16px;
    background-color: var(--reading);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
.bonus-finish-btn {
    margin-top: 15px;
    margin-left: 10px;
    padding: 12px 24px;
    font-size: 16px;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}


/* ===== LEARN / GRAMMAR / LESSON PLAN CLASSES ===== */

/* Search bars */
.search-section { max-width: 500px; margin: 0 auto 30px; }
.search-row { display: flex; gap: 10px; }
.search-input-pill {
    flex: 1;
    padding: 12px 20px;
    font-size: 16px;
    border: 2px solid var(--border);
    border-radius: 25px;
    outline: none;
    transition: border-color 0.3s;
    background: rgba(237, 224, 204, 0.8);
    color: var(--text-primary);
}
.search-input-pill:focus { border-color: var(--earth); }
.search-btn-pill {
    padding: 12px 25px;
    background: linear-gradient(135deg, var(--earth) 0%, var(--earth-dark) 100%);
    color: white;
    border: none;
    border-radius: 25px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}
.search-hint { text-align: center; font-size: 12px; color: var(--text-muted); margin-top: 8px; }

/* Level tabs */
.tab-row { display: flex; gap: 10px; margin-bottom: 30px; flex-wrap: wrap; justify-content: center; }
.tab-link {
    padding: 12px 24px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    background: rgba(220, 201, 169, 0.6);
    color: var(--text-primary);
    border: 1px solid var(--border);
}
.tab-link:hover { background: var(--washi-dark); color: white; }
.tab-link.active {
    background: linear-gradient(135deg, var(--earth) 0%, var(--earth-dark) 100%);
    color: white;
    box-shadow: 0 4px 15px var(--washi-shadow);
    border-color: transparent;
}
.tab-count { font-size: 12px; opacity: 0.8; margin-left: 5px; }

/* Progress bar */
.progress-section { margin-bottom: 30px; max-width: 600px; margin-left: auto; margin-right: auto; }
.progress-label-row { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 14px; color: var(--text-secondary); }
.progress-track { background: var(--border); border-radius: 10px; height: 12px; overflow: hidden; }
.progress-fill { background: linear-gradient(90deg, var(--earth), var(--earth-dark)); height: 100%; transition: width 0.5s ease; }

/* Filter toggles */
.filter-section { display: flex; justify-content: center; align-items: center; gap: 15px; margin-bottom: 20px; }
.filter-label { font-size: 14px; color: var(--text-secondary); }
.filter-pill-group {
    display: flex;
    flex-wrap: wrap;
    background: rgba(220, 201, 169, 0.5);
    border-radius: 25px;
    padding: 4px;
    border: 1px solid var(--border);
}
.filter-pill-btn {
    padding: 8px 20px;
    border: none;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    background: transparent;
    color: var(--text-secondary);
    text-decoration: none;
    display: inline-block;
}
.filter-pill-btn.active { background: white; color: var(--earth); }

/* Learn cards grid */
.learn-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
    text-align: left;
}

.learn-card {
    background: white;
    border-radius: 15px;
    padding: 25px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border: 2px solid var(--border);
    display: flex;
    flex-direction: column;
    position: relative;
    height: var(--learn-card-height);
    min-height: 0;
    overflow: hidden;
    box-sizing: border-box;
}
.learn-card.card-removing {
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}
@media (max-width: 640px) {
    .learn-card {
        height: clamp(500px, calc(100dvh - var(--learn-card-viewport-offset)), 640px);
    }
}
.learn-card > .card-kanji,
.learn-card > .card-furigana,
.learn-card > .learn-pos-stripe,
.learn-card > .pos-badge-wrap {
    flex-shrink: 0;
}
.learn-card .pos-badge-wrap {
    display: none;
}
/* POS badges live in .learn-pos-stripe (updated on scroll for grouped senses) */
.learn-pos-stripe {
    text-align: center;
    margin-bottom: 6px;
    padding: 0 8px;
}
/* Reserve enough height for two wrapped badge rows so 1→2 tags doesn’t jump the card layout */
.learn-pos-stripe:not(.learn-pos-stripe--empty) {
    min-height: 4.75rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
.learn-pos-stripe--empty {
    min-height: 0;
    margin-bottom: 0;
}
.learn-pos-stripe-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    align-items: center;
    align-content: center;
    max-width: 100%;
    transition: opacity 0.16s ease;
}
@media (prefers-reduced-motion: reduce) {
    .learn-pos-stripe-inner {
        transition: none;
    }
}
.learn-pos-stripe-inner.learn-pos-stripe-inner--hide {
    opacity: 0;
}
.learn-pos-stripe-inner .pos-badge-row {
    justify-content: center;
}
.learn-card .card-spacer {
    display: none;
}
.learn-card .card-definitions {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.22) transparent;
    /* No top padding — glosses align with top of scrollport (POS row is outside, in .learn-pos-stripe) */
    /* Base bottom padding; extra scroll buffer is toggled in JS only when content overflows (see wordDefinitionsLayout.js) */
    padding: 0 15px 14px 15px;
}
.learn-card .card-definitions.card-definitions--scroll-buffer {
    padding-bottom: calc(14px + var(--learn-definitions-scroll-buffer));
}
.learn-card .card-definitions > .definitions-grouped,
.learn-card .card-definitions > .definitions-list {
    padding-top: 8px;
}
.learn-card .card-definitions::-webkit-scrollbar {
    width: 8px;
}
.learn-card .card-definitions::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.18);
    border-radius: 4px;
}
.learn-card .card-definitions::-webkit-scrollbar-track {
    background: transparent;
}
/* Subtle separator between sense groups (learn: POS labels live in .learn-pos-stripe) */
.learn-card .card-definitions .definitions-grouped .pos-group + .pos-group {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(0, 0, 0, 0.09);
}
.learn-card .card-action {
    flex-shrink: 0;
}
.learn-card:hover { transform: translateY(-5px); box-shadow: 0 8px 30px rgba(0,0,0,0.12); }
.learn-card[data-learned="true"] { border-color: #38ef7d; }
.learn-card[data-suspended="true"] { border-color: #28a745; }
.learn-card[data-learned="true"] {
    height: calc(var(--learn-card-height) + 56px);
}
@media (max-width: 640px) {
    .learn-card[data-learned="true"] {
        height: clamp(556px, calc(100dvh - var(--learn-card-viewport-offset) + 56px), 696px);
    }
}

/* Level & frequency badges */
.level-badge {
    position: absolute; top: 12px; left: 12px;
    background: linear-gradient(135deg, var(--grammar) 0%, #A858C8 100%);
    color: white; padding: 5px 12px; border-radius: 15px;
    font-size: 12px; font-weight: 600;
}
.frequency-badge {
    position: absolute; top: 12px; right: 12px;
    background: var(--washi-light); color: var(--text-secondary);
    padding: 5px 12px; border-radius: 15px;
    font-size: 11px; font-weight: 500;
}

/* Mastery info block */
.mastery-info {
    position: absolute; top: 45px; left: 12px;
    display: flex; flex-direction: column; gap: 3px;
}
.mastery-row { display: flex; align-items: center; gap: 4px; }
.mastery-badge {
    padding: 2px 8px; border-radius: 10px;
    font-size: 9px; font-weight: 700;
    text-transform: uppercase; color: white;
}
.mastery-badge[data-level="5"] { background: var(--mastery-5); }
.mastery-badge[data-level="4"] { background: var(--mastery-4); }
.mastery-badge[data-level="3"] { background: var(--mastery-3); }
.mastery-badge[data-level="2"] { background: var(--mastery-2); }
.mastery-badge[data-level="1"] { background: var(--mastery-1); }
.mastery-label { font-size: 9px; color: var(--text-muted); font-weight: 600; }

/* Card content */
.card-furigana, .card-kanji { text-align: center; margin-bottom: 10px; }
.card-furigana.primary, .card-kanji.primary {
    font-size: 42px; font-weight: bold;
    color: var(--text-primary); margin-top: 15px;
}
.card-furigana.secondary, .card-kanji.secondary {
    font-size: 20px; color: var(--reading); margin-bottom: 15px;
}
.card-missing { color: var(--border); }
.card-definitions {
    font-size: 16px; text-align: center; color: var(--text-primary);
    margin-bottom: 10px; padding: 15px;
    background: var(--washi-light); border-radius: 10px; min-height: 60px;
}
.card-definitions-missing { color: var(--text-muted); }
.pos-badge-wrap { text-align: center; margin-bottom: 15px; }
.pos-badge {
    background: #D3F7FF; color: var(--reading);
    padding: 5px 12px; border-radius: 15px;
    font-size: 12px; font-weight: 500;
}
.card-spacer { flex-grow: 1; }
.card-action {
    text-align: center; margin-top: auto;
    padding-top: 10px; border-top: 1px solid var(--border);
}
.card-action-learned { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.sr-stats-footer {
    width: 100%; display: flex; justify-content: space-between;
    font-size: 11px; color: var(--text-muted); margin-bottom: 5px;
}
.learn-status.learned {
    display: inline-block; padding: 10px 20px;
    background: #d4edda; color: #155724;
    border-radius: 25px; font-weight: 600; font-size: 14px;
}
.know-btn {
    padding: 6px 12px; font-size: 12px;
    background: var(--washi-light); color: var(--text-secondary);
    border: none; border-radius: 15px; cursor: pointer; font-weight: 500;
}
.know-btn:hover { transform: translateY(-1px); opacity: 0.9; }
.know-btn.known { background: #28a745; color: white; }
.know-btn.known:hover { background: #218838; }
.add-word-btn {
    padding: 10px 25px; font-size: 14px;
    background: linear-gradient(135deg, var(--earth) 0%, var(--earth-dark) 100%);
    color: white; border: none; border-radius: 25px;
    cursor: pointer; font-weight: 600; transition: all 0.3s ease;
}
.add-word-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px var(--washi-shadow); }
a.add-word-btn { display: inline-block; text-decoration: none; }
.add-word-form { display: inline; }

.grammar-page-link {
    display: inline-block;
    padding: 10px 25px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 25px;
    color: white;
    background: linear-gradient(135deg, var(--grammar) 0%, #8e44ad 100%);
    transition: all 0.3s ease;
    box-shadow: 0 2px 12px rgba(168, 88, 200, 0.35);
}
.grammar-page-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 22px rgba(168, 88, 200, 0.45);
    color: white;
}
.learn-grammar-guide-link {
    font-size: 13px;
    font-weight: 600;
    color: var(--grammar);
    text-decoration: none;
    border-bottom: 1px solid rgba(168, 88, 200, 0.4);
    padding-bottom: 1px;
}
.learn-grammar-guide-link:hover {
    color: #8e44ad;
    border-bottom-color: #8e44ad;
}

/* Pagination */
.pagination {
    display: flex; justify-content: center;
    align-items: center; gap: 10px;
    margin-top: 30px; flex-wrap: wrap;
}
.page-btn {
    padding: 10px 15px; background: var(--washi-light);
    border-radius: 8px; text-decoration: none;
    color: var(--text-primary); font-weight: 500;
}
.page-btn:hover { background: var(--washi-dark); }
.page-current {
    padding: 10px 20px;
    background: linear-gradient(135deg, var(--earth) 0%, var(--earth-dark) 100%);
    color: white; border-radius: 8px; font-weight: 600;
}
.page-jump-wrap { display: flex; align-items: center; gap: 5px; }
.page-label { font-size: 14px; color: var(--text-muted); }
.page-jump-input {
    width: 60px; padding: 8px; border: 2px solid var(--border);
    border-radius: 6px; text-align: center; font-size: 14px;
    outline: none; transition: border-color 0.3s;
}
.page-jump-input:focus { border-color: var(--earth); }
.page-jump-btn {
    padding: 8px 15px;
    background: linear-gradient(135deg, var(--earth) 0%, var(--earth-dark) 100%);
    color: white; border: none; border-radius: 6px;
    cursor: pointer; font-weight: 500; font-size: 14px;
    transition: all 0.3s ease;
}
.page-jump-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 8px var(--washi-shadow); }
.per-page-wrap { display: flex; align-items: center; gap: 5px; }
.per-page-select {
    padding: 8px 12px; border: 2px solid var(--border);
    border-radius: 6px; font-size: 14px; outline: none;
    transition: border-color 0.3s; cursor: pointer;
}
.per-page-select:focus { border-color: var(--earth); }

/* No words placeholder */
.no-words-container {
    text-align: center; padding: 50px; color: var(--text-muted);
}
.no-words-container p { font-size: 24px; }

/* Show-more in card definition lists */
.definitions-list .show-more-btn {
    background: none; border: none; color: var(--reading);
    cursor: pointer; font-size: 13px; font-weight: 600;
    padding: 5px 10px; margin-top: 8px; transition: all 0.2s ease;
}
.definitions-list .show-more-btn:hover { color: var(--grammar); text-decoration: underline; }

/* Definition list items inside cards */
.definition-item {
    margin: 4px 0; padding: 4px 8px;
    background: white; border-radius: 6px;
    display: inline-block; font-size: 14px;
}
.definitions-list {
    display: flex; flex-direction: column; gap: 4px; align-items: center;
}
.hidden-definitions { display: none; }
.hidden-definitions.show { display: flex; flex-direction: column; gap: 4px; align-items: center; }

/* Grouped definitions (sense_breaks / pos_groups) */
.definitions-grouped { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.pos-group { display: flex; flex-direction: column; align-items: center; gap: 6px; }
/* Match .pos-badge look (see .pos-badge); allow long POS lines to wrap */
.pos-group-label.pos-badge {
    display: inline-block; max-width: 100%; text-align: center;
    line-height: 1.35; box-sizing: border-box;
}
/* Multiple POS tags, one undivided gloss list (parts_of_speech only; no sense_breaks) */
.pos-badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    align-items: center;
}
.pos-group > .pos-badge-row { width: 100%; }
.definitions-single-sense-multi-pos .pos-group { gap: 8px; }

/* Filter buttons */
.filter-btn { background: transparent; color: var(--text-secondary); }
.filter-btn.active {
    background: linear-gradient(135deg, var(--grammar) 0%, #A858C8 100%);
    color: white; box-shadow: 0 2px 8px rgba(118, 95, 147, 0.3);
}
.filter-btn:not(.active):hover { background: var(--washi); }

/* Mastery filter buttons */
.mastery-filter-btn { background: transparent; color: var(--text-secondary); border: 2px solid transparent !important; }
#mastery-1:not(.active) { border-color: #fa5252 !important; color: #fa5252; }
#mastery-2:not(.active) { border-color: #ff922b !important; color: #ff922b; }
#mastery-3:not(.active) { border-color: #fcc419 !important; color: #fcc419; }
#mastery-4:not(.active) { border-color: #51cf66 !important; color: #51cf66; }
#mastery-5:not(.active) { border-color: #28a745 !important; color: #28a745; }
#mastery-all:not(.active) { border-color: var(--text-muted) !important; color: var(--text-muted); }
#mastery-1.active { background: #fa5252 !important; color: white !important; }
#mastery-2.active { background: #ff922b !important; color: white !important; }
#mastery-3.active { background: #fcc419 !important; color: white !important; }
#mastery-4.active { background: #51cf66 !important; color: white !important; }
#mastery-5.active { background: #28a745 !important; color: white !important; }
#mastery-all.active { background: var(--text-secondary) !important; color: white !important; }
.mastery-filter-btn:not(.active):hover { background: var(--washi); }

/* Card filter visibility */
.learn-card.hidden-by-filter { display: none !important; }

/* Top 251–1000 lesson: bands of 50 + learn cards */
.top251-intro {
    margin: 0 auto 24px;
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.65;
    max-width: 720px;
    text-align: center;
}
.top251-empty {
    text-align: center;
    color: var(--text-muted);
    margin: 24px 0;
}
.top251-band-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    max-width: 900px;
    margin: 0 auto 28px;
    padding: 12px 16px;
    background: var(--washi-light);
    border-radius: 12px;
    border: 1px solid var(--border);
}
.top251-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    max-width: 720px;
    margin: 0 auto 20px;
    padding: 12px 16px;
    background: var(--washi-light);
    border-radius: 10px;
    border: 1px solid var(--border);
}
.top251-pager--bottom {
    margin-top: 32px;
    margin-bottom: 8px;
}
.top251-pager-status {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
    flex: 1 1 auto;
}
.top251-pager-btn.page-btn {
    flex: 0 0 auto;
}
.top251-pager-placeholder {
    flex: 0 0 120px;
    min-height: 1px;
}
.top251-bucket {
    margin-bottom: 48px;
    scroll-margin-top: 1rem;
}
.top251-bucket-title {
    font-family: var(--font-display-serif);
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 20px;
    padding-bottom: 10px;
    border-bottom: 3px solid var(--earth);
    text-align: center;
}
.top251-grammar-section {
    margin-bottom: 24px;
    padding: 20px 24px;
    background: var(--washi-light);
    border-radius: 12px;
    border: 1px solid var(--border);
}
.top251-grammar-heading {
    font-size: 1.1rem;
    margin: 0 0 8px;
    color: var(--text-primary);
}
.top251-grammar-lead {
    margin: 0 0 16px;
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
}
.top251-learn-grid {
    margin-top: 8px;
}

/* Kanji lookup & search (/kanji, /search) — align with vocabulary card definition styling */
.kanji-level-header {
    background: linear-gradient(135deg, var(--earth) 0%, var(--earth-dark) 100%);
    color: white;
    padding: 10px 20px;
    border-radius: 8px;
    margin: 20px 0 15px 0;
    font-weight: 600;
}
/* Kanji lookup / search results now render the same .learn-cards-grid of .learn-card
   elements as the vocabulary/learn page (see "Learn cards grid" above) - this block only
   covers the extra click-to-navigate affordance used in search mode. */
.learn-card.word-row-clickable { cursor: pointer; }

/* Action buttons */
.action-buttons-section {
    text-align: center;
    margin-bottom: 30px;
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}
.add-all-btn {
    padding: 12px 30px;
    font-size: 16px;
    background: linear-gradient(135deg, var(--teal) 0%, var(--teal-dark) 100%);
    color: white;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(50, 140, 141, 0.3);
    transition: all 0.3s ease;
}
.know-all-btn {
    position: relative;
    padding: 12px 20px;
    font-size: 14px;
    background: rgba(220, 201, 169, 0.5);
    color: var(--text-secondary);
    border: 2px solid var(--border);
    border-radius: 25px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.3s ease;
}
.add-all-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(50, 140, 141, 0.4); }
.know-all-btn:hover { background: #28a745; color: white; border-color: #28a745; }
.know-all-btn:hover .tooltip-text { visibility: visible; opacity: 1; }

/* Level tab hover */
.level-tab:hover:not(.active) { background: var(--washi); }

/* Success banner */
.success-banner {
    text-align: center;
    padding: 40px;
    margin-bottom: 30px;
    background: linear-gradient(135deg, rgba(206, 255, 251, 0.4) 0%, rgba(154, 212, 188, 0.4) 100%);
    border-radius: 15px;
    border: 2px solid #9BD9DD;
}
.success-banner h2 { color: var(--success-text); margin-bottom: 10px; }
.success-banner .banner-body { color: var(--text-secondary); font-size: 16px; }
.success-banner .banner-hint { color: var(--text-muted); font-size: 14px; margin-top: 10px; }
.banner-emoji { font-size: 48px; margin-bottom: 15px; color: var(--teal); }

/* Grammar search + sort */
.grammar-search-wrapper { max-width: 500px; margin: 0 auto 40px; }
.grammar-search-input {
    width: 100%;
    box-sizing: border-box;
    padding: 14px 20px;
    font-size: 16px;
    border: 2px solid var(--border);
    border-radius: 12px;
    outline: none;
    transition: border-color 0.2s;
    background: rgba(237, 224, 204, 0.8);
    color: var(--text-primary);
}
.grammar-search-input:focus { border-color: var(--earth); }
.grammar-search-empty {
    text-align: center;
    color: var(--text-muted);
    font-size: 15px;
    margin: -24px auto 28px;
    max-width: 500px;
}
.grammar-sort-buttons { display: flex; gap: 10px; justify-content: center; margin-bottom: 24px; }
.grammar-sort-btn {
    padding: 10px 20px;
    font-size: 14px;
    border: 2px solid var(--border);
    border-radius: 8px;
    background: rgba(237, 224, 204, 0.7);
    cursor: pointer;
    color: var(--text-primary);
    transition: all 0.2s;
}
.grammar-sort-btn.active { background: var(--earth); border-color: var(--earth); color: white; }

/* Grammar cards grid */
.grammar-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
    max-width: 1000px;
    margin: 0 auto;
}
.grammar-sortable-wrapper { display: contents; }
.grammar-card {
    display: block;
    padding: 24px;
    background: rgba(237, 224, 204, 0.8);
    border-radius: 12px;
    border: 1px solid var(--border);
    text-decoration: none;
    color: inherit;
    box-shadow: 0 2px 8px var(--washi-shadow);
    transition: all 0.2s ease;
}
.grammar-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px var(--washi-shadow);
    border-color: var(--earth-light);
}
.grammar-card-japanese { font-size: 1.75rem; font-weight: 600; color: var(--text-primary); margin-bottom: 8px; }
.grammar-card-title    { font-size: 1rem; font-weight: 600; color: var(--earth); margin-bottom: 4px; }
.grammar-card-desc     { font-size: 0.875rem; color: var(--text-secondary); line-height: 1.4; }

/* Grammar concept page */
.grammar-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--earth);
    text-decoration: none;
    font-weight: 600;
    margin-bottom: 24px;
    font-size: 0.9rem;
}
.grammar-back-link:hover { text-decoration: underline; color: var(--earth-dark); }
.grammar-subtitle { font-size: 1.25rem; color: var(--earth); font-weight: 600; margin-bottom: 24px; }
[data-page-type="grammar_concept"] .welcome-text { margin-bottom: 8px; }
[data-page-type="learn"] { max-width: 1400px; }
[data-page-type="learn"] .welcome-text { font-size: 2rem; margin-bottom: 20px; }
.grammar-concept-content {
    max-width: 700px;
    padding: 30px;
    background: rgba(237, 224, 204, 0.8);
    border-radius: 12px;
    margin: 0 auto;
    text-align: left;
    border: 1px solid var(--border);
}
.grammar-concept-content p { color: var(--text-primary); line-height: 1.7; margin-bottom: 16px; }
.grammar-concept-content strong { color: var(--earth-dark); }
.grammar-coming-soon { color: var(--text-muted); font-style: italic; }
.grammar-actions { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.grammar-action-btn { padding: 10px 20px; font-size: 14px; }

/* Lesson plan */
.lesson-plan-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    max-width: 400px;
    margin: 0 auto;
}

/* Calligraphy font toggle */
body.calligraphy-mode .answer-text-xl,
body.calligraphy-mode .answer-text-lg,
body.calligraphy-mode .answer-reading,
body.calligraphy-mode .answer-furigana,
body.calligraphy-mode .clickable-kanji,
body.calligraphy-mode .clickable-kanji *,
body.calligraphy-mode #conjugated-verb,
body.calligraphy-mode #kanji-word,
body.calligraphy-mode .kana-display p,
body.calligraphy-mode .definition-primary,
body.calligraphy-mode .definition-secondary,
body.calligraphy-mode .verb-ending-e2j-verb,
body.calligraphy-mode .verb-ending-e2j-construction,
body.calligraphy-mode .verb-ending-j2e-hint-line,
body.calligraphy-mode .english-definitions-box,
body.calligraphy-mode .definition-phrase,
body.calligraphy-mode .answer-valid-answers,
body.calligraphy-mode .answer-valid-answers-line--first,
body.calligraphy-mode .synonym-item,
body.calligraphy-mode .synonym-furigana {
    font-family: 'Yuji Syuku', "Yu Mincho", "Hiragino Mincho ProN", "MS Mincho", serif !important;
}

.font-toggle-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 20;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 15px;
    font-family: 'Yuji Syuku', serif;
    cursor: pointer;
    color: #555;
    line-height: 1.2;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    user-select: none;
}
.font-toggle-btn:hover {
    border-color: rgba(0, 0, 0, 0.35);
    color: #222;
}
.font-toggle-btn:hover .tooltip-text { visibility: visible; opacity: 1; }
/* .answer-container clips to its rounded corners via overflow: hidden; lift that
   clip on hover so the tooltip isn't cut off. */
.answer-container:has(.font-toggle-btn:hover) { overflow: visible; }
.font-toggle-btn--active {
    background: var(--earth-dark, #5d4037);
    border-color: var(--earth-dark, #5d4037);
    color: white;
}

.lesson-plan-btn { width: 100%; text-align: center; text-decoration: none; }