html, body {
    max-width: 100%;
    overflow-x: hidden;
}

img, svg, video {
    max-width: 100%;
    height: auto;
}

.meaning, .lesson-card h3, .lesson-card p, .word-card span,
.answer-grid button, .admin-row strong {
    overflow-wrap: anywhere;
}

.character-card .meaning {
    max-height: 58px;
    overflow: auto;
    text-align: center;
    line-height: 1.35;
}

.character-card .daily-word {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 135px;
    margin-top: 10px;
    line-height: 1;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
}

.character-card .daily-word--pair { font-size: 82px; letter-spacing: -.08em; }
.character-card .daily-word--medium { font-size: 58px; line-height: 1.08; }
.character-card .daily-word--long { font-size: 42px; line-height: 1.12; }

.character-card .pinyin,
.character-card .meaning {
    width: 100%;
    text-align: center;
    overflow-wrap: anywhere;
}

.word-card > strong {
    max-width: 100%;
    font-size: clamp(29px, 4vw, 45px);
    text-align: center;
    overflow-wrap: anywhere;
}

.lesson-grid, .word-grid, .practice-layout, .level-story-layout,
.lesson-hero-grid, .lesson-content, .admin-forms {
    min-width: 0;
}

.lesson-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.lesson-card {
    min-width: 0;
}

.lesson-card .button {
    max-width: 100%;
}

@media (max-width: 1100px) and (min-width: 901px) {
    .site-header nav { gap: 18px; }
    .lesson-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .word-grid { grid-template-columns: repeat(4, 1fr); }
    .hero { gap: 30px; }
    .header-account { gap: 6px; }
}

@media (max-width: 900px) and (min-width: 681px) {
    .lesson-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hero { padding-bottom: 45px; }
    .hero-visual { width: min(540px, 100%); margin-inline: auto; }
    .word-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 800px) {
    .lesson-sidebar {
        max-width: 100%;
        padding-bottom: 7px;
        scrollbar-width: thin;
    }
    .lesson-sidebar a { flex: 0 0 auto; white-space: nowrap; }
    .lesson-hero { padding: 60px 0; }
    .lesson-content { gap: 48px; }
    .lesson-meta { flex-wrap: wrap; }
    .content-heading { align-items: flex-start; gap: 10px; }
    .lesson-navigation { gap: 20px; }
    .lesson-navigation a { max-width: 46%; overflow-wrap: anywhere; }
}

@media (max-width: 680px) {
    .site-header {
        height: auto;
        min-height: 68px;
        padding: 10px 0;
        gap: 10px;
    }
    .brand { flex: 0 0 auto; }
    .header-account {
        min-width: 0;
        justify-content: flex-end;
        gap: 1px;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .header-account::-webkit-scrollbar { display: none; }
    .header-account .account-link {
        padding: 7px 5px;
        font-size: 10px;
        white-space: nowrap;
    }
    .hero { padding-top: 45px; }
    .hero h1 { font-size: clamp(43px, 14vw, 58px); overflow-wrap: anywhere; }
    .hero-copy > p { font-size: 16px; }
    .hero-actions { width: 100%; margin: 27px 0; }
    .hero-actions .button { width: 100%; }
    .trust-row {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        width: 100%;
        gap: 0;
    }
    .trust-row span { padding: 0 8px; text-align: center; }
    .trust-row span:first-child { padding-left: 0; }
    .trust-row span + span { padding-left: 8px; }
    .trust-row strong { display: block; }
    .hero-visual { width: 100%; height: 410px; transform: none; }
    .sun-disc { width: min(340px, 88vw); height: min(340px, 88vw); }
    .character-card { width: min(260px, 74vw); height: 350px; padding: 31px 20px; }
    .big-hanzi { font-size: clamp(76px, 27vw, 112px); }
    .character-card .daily-word--pair { font-size: clamp(60px, 19vw, 78px); }
    .character-card .daily-word--medium { font-size: clamp(43px, 13vw, 56px); }
    .character-card .daily-word--long { font-size: clamp(32px, 9vw, 40px); }
    .floating-note { font-size: 13px; }
    .note-one { top: 65px; }
    .note-two { bottom: 48px; }
    .lesson-section, .vocab-section, .structures-section, .level-story-section {
        padding-top: 65px;
        padding-bottom: 70px;
    }
    .lesson-grid { grid-template-columns: 1fr; }
    .lesson-card { min-height: 280px; }
    .word-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .word-card { padding: 20px 10px; }
    .filter-row { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 8px; }
    .filter { flex: 0 0 auto; }
    .practice-layout { gap: 32px; }
    .quiz-card > strong { font-size: 60px; }
    .section-heading { gap: 15px; }
    .home-structure-card { flex-basis: min(86vw, 330px); padding: 21px; }
    .quick-type-row { align-items: flex-start; gap: 8px; }
    .quick-writing > div { flex-wrap: wrap; }
    .level-story-layout { gap: 30px; }
    .level-story-layout h2 { font-size: 35px; }
    .level-story-paper { padding: 24px 19px; max-height: 65vh; }
    .level-story-paper > div { font-size: 19px; overflow-wrap: anywhere; }
    .auth-message { min-height: 320px; padding: 110px 20px 42px; }
    .auth-message h1 { font-size: clamp(38px, 12vw, 48px); }
    .auth-card { width: calc(100% - 24px); padding: 26px 20px; margin: 22px auto 40px; }
    .auth-card h2 { font-size: 30px; }
    .auth-brand { top: 20px; left: 20px; }
    .admin-header { height: auto; min-height: 68px; padding: 10px 12px; gap: 10px; }
    .admin-header > div { gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
    .admin-shell { width: calc(100% - 24px); padding: 42px 0 70px; }
    .admin-title { align-items: flex-start; flex-direction: column; }
    .admin-title h1 { font-size: 36px; }
    .course-stat { flex-basis: 185px; }
    .admin-form { padding: 20px 16px; }
    .list-heading { align-items: flex-start; gap: 8px; flex-direction: column; }
    .admin-row { grid-template-columns: 52px minmax(0, 1fr) 30px; padding: 10px 9px; gap: 8px; }
    .admin-row > strong { font-size: 17px; }
}

@media (max-width: 520px) {
    .lesson-hero h1 { font-size: clamp(39px, 13vw, 54px); }
    .lesson-hero h1.long-title { font-size: clamp(36px, 11vw, 48px); }
    .lesson-hero h1.very-long-title { font-size: clamp(32px, 9.5vw, 43px); }
    .lesson-meta strong { font-size: 16px; }
    .lesson-phrase strong.long-hanzi-title { font-size: clamp(27px, 8vw, 36px); }
    .lesson-phrase { min-height: 180px; border-radius: 100px 100px 16px 16px; }
    .lesson-word { grid-template-columns: 24px minmax(62px, 82px) minmax(0, 1fr) 34px; min-height: 82px; }
    .lesson-word > div { min-width: 0; }
    .lesson-word > div span { overflow-wrap: anywhere; }
    .content-block { padding-bottom: 58px; }
    .content-block h2 { font-size: 31px; }
    .tip-box { align-items: flex-start; padding: 19px 16px; }
    .review-block { border-radius: 12px; }
    .lesson-navigation { padding-bottom: 45px; }
}

@media (max-width: 380px) {
    .shell, .site-header { width: calc(100% - 20px); }
    .brand > span:last-child { display: none; }
    .word-grid { grid-template-columns: 1fr; }
    .word-card { min-height: 145px; }
    .trust-row { font-size: 10px; }
    .floating-note { display: none; }
    .hero-visual { height: 380px; }
    .answer-grid button { padding-inline: 9px; }
}