:root {
    --primary-color: #1976D2;
    --text-color: #3f3a34;
    --muted-text-color: #6f685f;
    --bg-color: #f4efe4;
    --surface-color: #f8f3ea;
    --surface-soft-color: #f4eee4;
    --surface-accent-color: #efe7da;
    --soft-border-color: rgba(110, 97, 78, 0.12);
    --card-radius: 12px;
    --card-shadow: 0 4px 12px rgba(95, 83, 68, 0.08);

    --level-a1-color: #f0c96d;
    --level-a2-color: #e9b65c;
    --level-b1-color: #d8aa42;
    --level-vocab-color: #6fcf97;
    --level-grammar-color: #5da9e9;
    --level-video-color: #ee7f7f;
    --level-community-color: #7f9bb7;
    --panel-scene-color: #f2c14e;
    --panel-grammar-color: #5da9e9;
    --panel-vocab-color: #6fcf97;
    --panel-video-color: #e97b7b;
}

body {
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 17.5px;
    line-height: 1.6;
    color: var(--text-color);
    background-color: #f5f0e8;
    margin: 0;
    padding: 24px 0 0;
}

body.home-app {
    padding-top: 0;
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

.app-shell {
    max-width: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

.home-app .dashboard-shell {
    width: 100%;
}

.flag-icon {
    height: 18px;
    width: 27px;
    border-radius: 0;
    border: 1px solid rgba(44, 62, 80, 0.14);
    box-shadow: none;
    object-fit: cover;
    vertical-align: -2px;
}

main {
    max-width: 1480px;
    margin: 0 auto;
    padding: 0 18px;
}

/* Cards */
.level-card, .theme-card {
    background: var(--surface-color);
    border-radius: var(--card-radius);
    padding: 25px;
    box-shadow: var(--card-shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid var(--soft-border-color);
    position: relative;
    overflow: hidden;
}

/* Progress UI styles moved from js/progress.js */
.progress-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.28);
    font-size: 0.78rem;
    font-weight: 700;
    color: #fff;
}

.lesson-progress-row {
    margin-top: 12px;
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.lesson-progress-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    background: #eef2ff;
    color: #3730a3;
}

.lesson-progress-badge.done {
    background: #dcfce7;
    color: #166534;
}

.progress-toggle-btn {
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #334155;
    border-radius: 999px;
    padding: 7px 12px;
    font-size: 0.88rem;
    cursor: pointer;
}

.progress-toggle-btn.done {
    border-color: #86efac;
    background: #f0fdf4;
    color: #166534;
}

.level-card:hover, .theme-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(95,83,68,0.11);
}

/* Full Coverage Style for Level Cards */
.level-card h3 {
    margin: -25px -25px 20px -25px;
    padding: 15px 25px;
    color: #fff;
    font-size: 1.58rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.level-badge {
    font-size: 0.9rem;
    padding: 5px 11px;
    border-radius: 20px;
    background: #fff;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Level Specific Colors (Header & Button & Badge Text) */
.level-a1 h3, .level-a1 .btn { background: var(--level-a1-color); color: #fff; }
.level-a1 .level-badge { color: var(--level-a1-color); }

.level-a2 h3, .level-a2 .btn { background: var(--level-a2-color); color: #fff; }
.level-a2 .level-badge { color: var(--level-a2-color); }

.level-b1 h3, .level-b1 .btn { background: var(--level-b1-color); color: #fff; }
.level-b1 .level-badge { color: var(--level-b1-color); }

.level-vocab h3, .level-vocab .btn { background: var(--level-vocab-color); color: #fff; }
.level-vocab .level-badge { color: var(--level-vocab-color); }

.level-grammar h3, .level-grammar .btn { background: var(--level-grammar-color); color: #fff; }
.level-grammar .level-badge { color: var(--level-grammar-color); }

.level-video h3, .level-video .btn { background: var(--level-video-color); color: #fff; }
.level-video .level-badge { color: var(--level-video-color); }

.level-community h3, .level-community .btn { background: var(--level-community-color); color: #fff; }
.level-community .level-badge { color: var(--level-community-color); }

/* Dashboard panel unified colors */
#video-panel .level-card h3,
#video-panel .level-card .btn {
    background: var(--panel-video-color);
    color: #fff;
}

#video-panel .level-card .level-badge {
    color: var(--panel-video-color);
}

#scene-panel .level-card h3,
#scene-panel .level-card .btn {
    background: var(--panel-scene-color);
    color: #fff;
}

#scene-panel .level-card .level-badge {
    color: var(--panel-scene-color);
}

#grammar-panel .level-card h3,
#grammar-panel .level-card .btn {
    background: var(--panel-grammar-color);
    color: #fff;
}

#grammar-panel .level-card .level-badge {
    color: var(--panel-grammar-color);
}

#vocab-panel .level-card h3,
#vocab-panel .level-card .btn {
    background: var(--panel-vocab-color);
    color: #fff;
}

#vocab-panel .level-card .level-badge {
    color: var(--panel-vocab-color);
}

/* Grid Layouts */
.levels-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    margin-bottom: 40px;
}

/* Force auto-fill for special practice to keep card widths consistent with the row above */
.special-practice-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.theme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}

.theme-card {
    text-align: center;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 160px;
}

.theme-icon {
    font-size: 3rem;
    margin-bottom: 15px;
    display: block;
}

.theme-title {
    font-weight: 700;
    font-size: 1.22rem;
    color: #333;
    margin-bottom: 5px;
}

.theme-hu {
    color: #8a8075;
    font-size: 1rem;
    font-style: italic;
}

/* Footer */
footer {
    text-align: center;
    padding: 40px 20px;
    color: #8a8075;
    font-size: 0.9rem;
    border-top: 1px solid var(--soft-border-color);
    margin-top: 50px;
}

/* AI Assistant refreshed layout */
.ai-atelier {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.ai-atelier-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
}

.ai-atelier-title {
    margin: 0;
    font-family: "Newsreader", Georgia, "Times New Roman", serif;
    font-size: clamp(3rem, 5vw, 4.8rem);
    line-height: 1.02;
    letter-spacing: -0.04em;
    color: #b33d2d;
}

.ai-atelier-title em {
    font-style: italic;
    font-size: 1em;
    font-weight: 700;
    color: #b33d2d;
}

.ai-atelier-rule {
    width: 96px;
    height: 4px;
    margin-top: 18px;
    border-radius: 999px;
    background: rgba(31, 79, 53, 0.16);
}

.ai-atelier-grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 32px;
    align-items: start;
}

.ai-atelier-workspace {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.ai-atelier-results {
    min-height: 0;
    padding: 36px 40px;
    border-radius: 18px;
    background: #f5f3ee;
    position: relative;
    overflow: hidden;
}

.ai-atelier-results::after {
    content: "school";
    position: absolute;
    top: 10px;
    right: 8px;
    color: rgba(2, 56, 32, 0.05);
    font-family: "Material Symbols Outlined";
    font-size: 120px;
    line-height: 1;
    pointer-events: none;
}

.ai-atelier-section-head,
.ai-atelier-results-head,
.ai-atelier-subhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.ai-atelier-section-head h3,
.ai-atelier-results-head h3,
.ai-atelier-subhead h3 {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    color: #17311f;
    font-size: 1.72rem;
    font-weight: 800;
}

.ai-atelier-section-head h3 {
    font-size: 2.45rem;
}

.ai-atelier-results-head h3 {
    font-size: 2.7rem;
    letter-spacing: -0.03em;
}

.ai-atelier-section-head span,
.ai-atelier-subhead span {
    color: #7d776d;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.ai-atelier-tabs {
    margin-bottom: 0;
    width: 100%;
    padding: 4px;
    gap: 4px;
    background: #f0eee9;
    border: none;
}

.ai-atelier-tabs .ai-mode-tab {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    justify-content: center;
    padding: 15px 18px;
    border-radius: 12px;
    font-size: 1.05rem;
}

.ai-atelier-tabs .ai-mode-tab .material-symbols-outlined {
    font-size: 1.05rem;
}

.ai-atelier-pane {
    width: 100%;
}

.ai-atelier-input-wrap {
    border-radius: 18px;
    background: #fff;
    border: 1px solid rgba(113, 121, 114, 0.14);
    box-shadow: 0 24px 40px -8px rgba(27, 28, 25, 0.05);
}

#assistant-panel .ai-atelier #assist-input {
    min-height: 300px;
    padding: 26px 26px 86px;
    background: transparent;
    color: #31302d;
    font-size: 1.14rem;
    line-height: 1.8;
}

.ai-atelier-input-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 0 24px 22px;
}

.ai-atelier-input-meta span {
    color: rgba(65, 73, 66, 0.64);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.ai-atelier-input-meta .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 28px;
    border-radius: 8px;
    background: #b02d21;
    border-color: #b02d21;
    color: #fff;
}

.ai-atelier-scene {
    margin-top: 10px;
    padding-top: 24px;
    border-top: 1px solid rgba(113, 121, 114, 0.18);
}

.ai-atelier-scene-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.ai-atelier-scene-tags .ai-scene-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    border-radius: 999px;
    background: #eae8e3;
    border: none;
    color: #353932;
    font-size: 0.92rem;
    font-weight: 600;
}

.ai-atelier-scene-tags .ai-scene-tile:hover,
.ai-atelier-scene-tags .ai-scene-tile.is-active {
    background: rgba(204, 167, 48, 0.22);
    color: #4f3d00;
}

.ai-atelier-dialog-custom {
    margin-top: 18px;
}

.ai-atelier-dialog-custom input {
    background: #fff;
}

.ai-atelier-history {
    margin-top: 4px;
}

.ai-mobile-visual {
    display: none;
}

.ai-atelier-result-actions {
    display: flex;
    gap: 8px;
}

.ai-atelier-result-actions button {
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 12px;
    background: #fff;
    color: #666158;
    font: inherit;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(27,28,25,0.06);
    transition: box-shadow 0.15s;
}

.ai-atelier-result-actions button:hover {
    box-shadow: 0 4px 16px rgba(27,28,25,0.10);
    color: #023820;
}

.ai-atelier-result-tabs {
    margin: 20px 0 28px;
}

.ai-atelier-result-tabs .ai-result-tab {
    padding: 10px 22px;
    font-size: 0.95rem;
}

.ai-atelier-placeholder {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.ai-atelier-block label,
.ai-atelier-preview label {
    display: block;
    margin-bottom: 12px;
    color: #7f796f;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.ai-atelier-translation {
    padding: 24px 28px;
    border-left: 4px solid #b02d21;
    border-radius: 10px;
    background: #fff;
}

.ai-atelier-translation p {
    margin: 0;
    font-size: 1.3rem;
    line-height: 1.85;
    color: #252622;
}

.ai-atelier-grammar-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.ai-atelier-grammar-list div {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(113, 121, 114, 0.16);
}

.ai-atelier-grammar-list strong {
    min-width: 80px;
    color: #023820;
    font-weight: 700;
    font-size: 1rem;
}

.ai-atelier-grammar-list p {
    margin: 0;
    color: #666158;
    line-height: 1.7;
    font-size: 0.95rem;
}

.ai-atelier-note {
    padding: 26px 28px;
    border-radius: 14px;
    background: rgba(115, 92, 0, 0.06);
}

.ai-atelier-note-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.ai-atelier-note-head h4 {
    margin: 0;
    color: #17311f;
    font-size: 1rem;
}

.ai-atelier-note p {
    margin: 0;
    color: #666158;
    line-height: 1.8;
    font-size: 0.92rem;
    font-style: italic;
}

.ai-atelier-preview {
    opacity: 0.5;
}

.ai-atelier-preview-lines {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ai-atelier-preview-lines span {
    display: block;
    height: 16px;
    border-radius: 999px;
    background: #ddd8cf;
}

.ai-atelier-preview-lines span:first-child {
    width: 78%;
}

.ai-atelier-preview-lines span:last-child {
    width: 52%;
}

#result-text:not([style*="display:none"]):not([style*="display: none"]) + .ai-atelier-placeholder,
#result-image:not([style*="display:none"]):not([style*="display: none"]) + .ai-atelier-placeholder {
    display: none;
}

#assistant-panel .ai-atelier .ai-result-block {
    margin-top: 0;
    min-height: 0;
    background: #fff;
    border: 1px solid rgba(113, 121, 114, 0.16);
    box-shadow: none;
}

@media (max-width: 1200px) {
    .ai-atelier-grid {
        grid-template-columns: 1fr;
    }

    .ai-atelier-results {
        min-height: 0;
    }
}

@media (max-width: 768px) {
    .ai-atelier-title em {
        display: block;
        margin: 10px 0 0;
    }

    .ai-atelier-input-meta,
    .ai-atelier-dialog-custom {
        flex-direction: column;
        align-items: stretch;
    }
}

.home-community-hero h2 {
    margin: 0 0 8px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.6rem, 4vw, 4rem);
    line-height: 1.05;
    color: #b33d2d;
}

.home-community-hero p {
    max-width: none;
    margin: 0;
    color: #605c56;
    font-size: 1.16rem;
    line-height: 1.85;
}

.home-community-quicknav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.home-community-quickcard {
    border: 1px solid rgba(192, 201, 192, 0.4);
    background: #fff;
    border-radius: 18px;
    padding: 18px 18px 16px;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 10px 28px rgba(27, 28, 25, 0.04);
}

.home-community-quickicon {
    display: block;
    margin-bottom: 10px;
    font-size: 1.85rem;
}

.home-community-quickcard strong {
    display: block;
    margin-bottom: 4px;
    color: #023820;
    font-size: 1.1rem;
}

.home-community-quickcard span:last-child {
    color: #6b736d;
    font-size: 0.94rem;
}

.home-community-quickcard.is-active {
    background: #023820;
    border-color: rgba(2, 56, 32, 0.08);
}

.home-community-quickcard.is-active strong,
.home-community-quickcard.is-active span:last-child {
    color: #fff;
}

.home-community-quickcard.is-active .home-community-quickicon {
    color: #fff;
}

.home-community-mobile-note {
    display: none;
}

.home-community-composer,
.home-community-post,
.home-community-sidecard,
.home-community-sideblock {
    background: var(--surface-soft-color);
    border: 1px solid rgba(192, 201, 192, 0.25);
    border-radius: 22px;
    box-shadow: 0 18px 36px rgba(27, 28, 25, 0.04);
}

.home-community-composer {
    padding: 28px;
    border-top: 4px solid #023820;
}

.home-community-blockhead h3,
.home-community-feedhead h3,
.home-community-sideblock h3,
.home-community-sidecard h3 {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.72rem;
    color: #023820;
}

.home-community-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 22px;
}

.home-community-formrow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.home-community-field label {
    display: block;
    margin-bottom: 8px;
    color: #5d655f;
    font-size: 0.84rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.home-community-field input,
.home-community-field textarea,
.home-community-field select {
    width: 100%;
    box-sizing: border-box;
    border: none;
    border-radius: 16px;
    background: #f5f3ee;
    padding: 15px 17px;
    font: inherit;
    color: #1b1c19;
    font-size: 1.02rem;
}

.home-community-field textarea {
    min-height: 120px;
    resize: vertical;
}

.home-community-submitrow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
}

.home-community-submitbtn {
    border: none;
    border-radius: 999px;
    padding: 15px 25px;
    background: #023820;
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.home-community-feedhead {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(192, 201, 192, 0.25);
}

.home-community-tabs {
    display: flex;
    gap: 18px;
}

.home-community-tabs button {
    border: none;
    background: transparent;
    color: #6a7068;
    font: inherit;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    padding: 0 0 4px;
}

.home-community-tabs button.is-active {
    color: #023820;
    border-bottom: 2px solid #023820;
}

.home-community-postlist {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 22px;
}

.home-community-post {
    position: relative;
    padding: 22px 24px;
}

.home-community-post--featured {
    background: #f5f3ee;
    border-color: rgba(2, 56, 32, 0.1);
}

.home-community-pin {
    position: absolute;
    top: 0;
    right: 0;
    border-bottom-left-radius: 14px;
    padding: 6px 12px;
    background: #b02d21;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.home-community-postmeta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    color: #6c736d;
    font-size: 0.92rem;
}

.home-community-tag {
    display: inline-flex;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.home-community-tag--red {
    background: rgba(176, 45, 33, 0.1);
    color: #b02d21;
}

.home-community-tag--green {
    background: rgba(2, 56, 32, 0.08);
    color: #023820;
}

.home-community-tag--gold {
    background: rgba(115, 92, 0, 0.08);
    color: #735c00;
}

.home-community-post h4 {
    margin: 0 0 10px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.5rem;
    color: #1b1c19;
}

.home-community-post p {
    margin: 0;
    color: #5f665f;
    line-height: 1.82;
}

.home-community-postactions {
    display: flex;
    gap: 24px;
    margin-top: 16px;
    color: #6b726c;
    font-size: 0.94rem;
    font-weight: 600;
}

.home-community-userfeed {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 6px;
}

.home-community-userfeedhead {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 0 2px;
}

.home-community-userfeedhead h4 {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.18rem;
    color: #173524;
}

.home-community-userfeedhead span {
    color: #7a807a;
    font-size: 0.9rem;
}

.home-community-post--user {
    background: #fffdf8;
    border-color: rgba(2, 56, 32, 0.12);
}

.home-community-post--user h4 {
    font-size: 1.28rem;
    line-height: 1.45;
}

.home-community-empty {
    padding: 22px 24px;
    border-radius: 22px;
    border: 1px dashed rgba(192, 201, 192, 0.55);
    background: rgba(255, 253, 248, 0.82);
    color: #66706a;
    line-height: 1.8;
}

.home-community-more {
    display: flex;
    justify-content: center;
    padding-top: 12px;
}

.home-community-more button,
.home-community-more a {
    border: none;
    background: transparent;
    color: #023820;
    font: inherit;
    font-weight: 700;
    border-bottom: 1px solid #023820;
    cursor: pointer;
    padding: 0 0 4px;
    text-decoration: none;
}

.home-community-sidecard {
    padding: 26px;
}

.home-community-sidecard--primary {
    background: #023820;
    color: #fff;
    overflow: hidden;
    position: relative;
}

.home-community-sidecard--primary .panel-kicker,
.home-community-sidecard--primary .home-community-sidecopy {
    color: rgba(255, 255, 255, 0.78);
}

.home-community-atmosphere {
    display: flex;
    align-items: end;
    gap: 10px;
    margin: 10px 0 16px;
}

.home-community-atmosphere strong {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 3rem;
    line-height: 1;
}

.home-community-atmosphere span {
    font-size: 1rem;
    opacity: 0.82;
}

.home-community-atmospherebar {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    overflow: hidden;
}

.home-community-atmospherebar span {
    display: block;
    width: 85%;
    height: 100%;
    background: #cca730;
}

.home-community-sidecopy {
    margin: 14px 0 0;
    font-size: 0.96rem;
    line-height: 1.74;
}

.home-community-sideblock {
    padding: 24px 26px;
}

.home-community-timeline {
    display: flex;
    flex-direction: column;
    gap: 22px;
    margin-top: 18px;
    padding-left: 14px;
    border-left: 1px solid rgba(192, 201, 192, 0.4);
}

.home-community-timelineitem {
    position: relative;
}

.home-community-timelineitem::before {
    content: "";
    position: absolute;
    left: -19px;
    top: 4px;
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: #b02d21;
}

.home-community-timelineitem strong {
    display: block;
    margin-bottom: 4px;
    color: #b02d21;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.home-community-timelineitem h4 {
    margin: 0 0 4px;
    color: #1b1c19;
    font-size: 1.08rem;
}

.home-community-timelineitem p {
    margin: 0;
    color: #6b736d;
    font-size: 0.96rem;
    line-height: 1.7;
}

.home-community-sidecard--tip {
    background: #ffe088;
    border-color: rgba(115, 92, 0, 0.1);
}

.home-community-tipcard {
    margin-top: 14px;
    padding: 14px 16px;
    border-radius: 16px;
    background: #fff;
}

.home-community-tipcard strong {
    display: block;
    margin-bottom: 6px;
    color: #023820;
}

.home-community-tipcard p {
    margin: 0;
    color: #5d655f;
    font-size: 0.98rem;
    line-height: 1.7;
}

.home-community-photo {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    border-radius: 22px;
}

.home-community-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1);
    opacity: 0.58;
}

.home-community-photo-emoji {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 2.8rem;
}

@media (max-width: 1100px) {
    .home-vocab-topbar,
    .home-vocab-hero-grid,
    .home-vocab-insights {
        grid-template-columns: 1fr;
        flex-direction: column;
        align-items: flex-start;
    }

    .home-vocab-card--study,
    .home-vocab-card--practice,
    .home-vocab-card--book {
        grid-column: span 12;
    }

    .home-community-layout,
    .home-community-quicknav {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .home-vocab-card--book,
    .home-vocab-book-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .home-vocab-tools {
        width: 100%;
        flex-wrap: wrap;
    }

    .home-vocab-search {
        width: 100%;
    }

    .home-vocab-search input {
        width: 100%;
    }

    .home-community-formrow,
    .home-community-feedhead,
    .home-community-submitrow {
        grid-template-columns: 1fr;
        flex-direction: column;
        align-items: stretch;
    }
}

.panel-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    padding: 5px 10px;
    border-radius: 999px;
    background: #eef6ff;
    color: #1f4f35;
    font-size: 0.82rem;
    font-weight: 700;
}

.panel-intro {
    margin: 0 0 22px;
    color: var(--muted-text-color);
    font-size: 1rem;
}

.dashboard-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 22px;
}

.library-shell {
    display: grid;
    gap: 26px;
}

.scene-topbar {
    margin-bottom: 10px;
    align-items: flex-start;
}

.scene-topbar .library-copy {
    max-width: 768px;
}

.scene-topbar .library-title {
    font-size: clamp(3rem, 5vw, 4.8rem);
    line-height: 1.02;
}

.scene-topbar .library-title em {
    color: #b33d2d;
    font-style: italic;
    font-weight: 700;
}

.library-topbar {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.library-title {
    margin: 0;
    font-family: "Newsreader", Georgia, "Times New Roman", serif;
    font-size: clamp(3rem, 5vw, 4.8rem);
    line-height: 1.02;
    letter-spacing: -0.04em;
    color: #b33d2d;
}

.library-title em {
    font-style: italic;
    font-weight: 700;
    color: #b33d2d;
}

.library-copy {
    margin: 12px 0 0;
    max-width: 560px;
    color: var(--muted-text-color);
    font-size: 1.08rem;
    line-height: 1.8;
}

.library-level-tabs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.library-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 118px;
    padding: 11px 20px;
    border-radius: 999px;
    border: 1px solid rgba(39, 61, 44, 0.12);
    background: #f5f3eb;
    color: #5b5d57;
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
}

.library-tab:hover {
    border-color: rgba(25, 118, 210, 0.28);
    color: #1f2a20;
    background: #fff;
}

.library-tab.is-active {
    background: #17391f;
    color: #fff;
    border-color: transparent;
}

.library-feature {
    position: relative;
    min-height: 360px;
    border-radius: 26px;
    overflow: hidden;
    display: flex;
    align-items: end;
    padding: 32px;
    color: #fff;
    background:
        linear-gradient(180deg, rgba(10, 24, 17, 0.06), rgba(8, 26, 17, 0.76)),
        url("https://images.unsplash.com/photo-1527866959252-deab85ef7d1b?auto=format&fit=crop&w=1400&q=80") center/cover no-repeat;
}

.scene-feature {
    min-height: 400px;
    background:
        linear-gradient(180deg, rgba(7, 36, 24, 0.20), rgba(9, 52, 34, 0.86)),
        url("https://images.unsplash.com/photo-1523050854058-8df90110c9f1?auto=format&fit=crop&w=1600&q=80") center/cover no-repeat;
}

.scene-topbar .library-level-tabs {
    gap: 12px;
}

.scene-topbar .library-tab {
    min-width: 88px;
    padding: 9px 18px;
    border-radius: 6px;
    background: #ece9e1;
    border: 1px solid rgba(39, 61, 44, 0.08);
    color: #413d36;
    box-shadow: 0 8px 18px rgba(33, 31, 28, 0.04);
}

.scene-topbar .library-tab.is-active {
    background: #123d2d;
    color: #fff;
}

.scene-feature .library-feature-copy {
    max-width: 520px;
}

.scene-feature .library-feature-kicker {
    color: #f7dd99;
    font-size: 0.9rem;
}

.scene-feature .library-feature-subtitle {
    color: rgba(255, 255, 255, 0.84);
    font-size: 1.16rem;
}

.scene-feature .library-progress-row {
    justify-content: space-between;
    gap: 16px;
}

.scene-feature .library-progress-row > span:last-child {
    font-size: 2rem;
    font-weight: 800;
    color: #ffd978;
}

.scene-feature .library-progress-bar {
    flex: 1;
}

.scene-feature .library-cta {
    background: #c93a2c;
    color: #fff;
    box-shadow: 0 12px 28px rgba(201, 58, 44, 0.2);
}

.library-feature--video {
    background:
        linear-gradient(180deg, rgba(43, 14, 14, 0.08), rgba(38, 12, 12, 0.78)),
        url("https://images.unsplash.com/photo-1489599849927-2ee91cede3ba?auto=format&fit=crop&w=1400&q=80") center/cover no-repeat;
}

.library-feature--grammar {
    background:
        linear-gradient(180deg, rgba(14, 23, 46, 0.08), rgba(14, 27, 56, 0.78)),
        url("https://images.unsplash.com/photo-1516979187457-637abb4f9353?auto=format&fit=crop&w=1400&q=80") center/cover no-repeat;
}

.library-feature--vocab {
    background:
        linear-gradient(180deg, rgba(10, 33, 19, 0.08), rgba(13, 39, 22, 0.78)),
        url("https://images.unsplash.com/photo-1455390582262-044cdead277a?auto=format&fit=crop&w=1400&q=80") center/cover no-repeat;
}

.library-feature--assistant {
    background:
        linear-gradient(180deg, rgba(14, 31, 56, 0.08), rgba(16, 33, 60, 0.78)),
        url("https://images.unsplash.com/photo-1516321318423-f06f85e504b3?auto=format&fit=crop&w=1400&q=80") center/cover no-repeat;
}

.library-feature-copy {
    position: relative;
    z-index: 1;
    max-width: 420px;
}

.library-feature-kicker {
    margin-bottom: 10px;
    font-size: 1rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.86);
}

.library-feature-title {
    margin: 0 0 8px;
    font-size: clamp(2.2rem, 4.2vw, 3.2rem);
    line-height: 1.02;
    letter-spacing: -0.04em;
}

.library-feature-subtitle {
    margin: 0 0 18px;
    font-size: 1.3rem;
    color: rgba(255,255,255,0.86);
    font-style: italic;
}

.library-progress-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    color: rgba(255,255,255,0.9);
    font-size: 1rem;
}

.library-progress-bar {
    width: 240px;
    max-width: 100%;
    height: 5px;
    border-radius: 999px;
    background: rgba(255,255,255,0.3);
    overflow: hidden;
}

.library-progress-fill {
    width: 65%;
    height: 100%;
    background: #ffd37a;
}

.library-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 24px;
    border-radius: 16px;
    background: #f4cb75;
    color: #213025;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.02rem;
}

.library-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}

.scene-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
}

.scene-card-grid .library-card {
    background: #fff;
    border: 1px solid rgba(39, 61, 44, 0.08);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 42px rgba(35, 32, 27, 0.06);
}

.scene-card-grid .library-card-image {
    height: 250px;
    margin-bottom: 0;
    border-radius: 0;
    box-shadow: none;
}

.scene-card-grid .library-card-tag {
    left: 14px;
    right: auto;
    background: #143d2d;
    color: #fff;
    font-size: 0.7rem;
    padding: 6px 10px;
}

.scene-card-grid .library-card-copy {
    padding: 24px 22px 24px;
    min-height: 180px;
}

.scene-card-grid .library-card h3 {
    font-size: 1.8rem;
    color: #153020;
}

.scene-card-grid .library-card p {
    font-size: 1.08rem;
    line-height: 1.8;
}

.library-card {
    text-decoration: none;
    color: inherit;
}

.library-card-image {
    height: 256px;
    border-radius: 18px;
    overflow: hidden;
    position: relative;
    margin-bottom: 12px;
    background: #e9ede5;
    box-shadow: 0 10px 24px rgba(18, 32, 20, 0.08);
}

.library-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.library-card-tag {
    position: absolute;
    top: 14px;
    right: 14px;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,0.92);
    color: #353932;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.library-card h3 {
    margin: 0 0 8px;
    font-size: 1.22rem;
}

.library-card p {
    margin: 0;
    color: var(--muted-text-color);
    line-height: 1.6;
}

.library-card:hover .library-card-image {
    transform: translateY(-2px);
}

.library-card-image {
    transition: transform 0.2s ease;
}

.library-card-copy {
    padding-right: 6px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 132px;
}

.library-card-copy .small-note {
    margin-top: 8px;
}

.library-essay {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 22px;
    align-items: stretch;
}

.scene-vision {
    margin-top: 22px;
    grid-template-columns: 1fr;
}

.scene-vision .library-essay-copy {
    position: relative;
    padding: 54px 72px;
    text-align: center;
    background: #f5f2ea;
}

.scene-vision .library-essay-copy::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 82px;
    height: 82px;
    background: rgba(39, 61, 44, 0.07);
    border-bottom-left-radius: 18px;
}

.scene-vision .library-essay-kicker {
    margin-bottom: 22px;
}

.scene-vision .library-essay-title {
    font-size: clamp(2.2rem, 4vw, 3.2rem);
    color: #16311f;
}

.scene-vision .library-essay-copy p {
    max-width: 768px;
    margin: 0 auto;
    line-height: 2;
}

.scene-vision .library-essay-image,
.scene-vision .library-essay-actions {
    display: none;
}

.library-essay-copy,
.library-essay-image {
    border-radius: 22px;
    overflow: hidden;
}

.library-essay-copy {
    padding: 34px;
    background: #f4f2ec;
    border: 1px solid rgba(39, 61, 44, 0.08);
}

.library-essay-kicker {
    margin-bottom: 16px;
    font-size: 0.86rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #8d7440;
}

.library-essay-title {
    margin: 0 0 16px;
    font-family: "Newsreader", Georgia, "Times New Roman", serif;
    line-height: 1.16;
    letter-spacing: -0.03em;
}

.library-essay-copy p {
    margin: 0 0 22px;
    color: var(--muted-text-color);
    line-height: 1.85;
}

.library-essay-actions {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

.library-essay-image {
    background: #dfe7d8;
}

.library-essay-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.practice-feature {
    margin-top: 24px;
    padding: 22px;
}

.assistant-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}

#mode-text-area,
#mode-image-area,
#mode-dialog-area,
#assist-history,
#result-text,
#result-image,
#result-dialog {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}

#assist-input {
    display: block;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
    min-height: 180px;
    line-height: 1.7;
}

.input-group {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.input-group input {
    flex: 1;
    padding: 12px 15px;
    border: 1px solid var(--soft-border-color);
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color 0.2s;
    background: var(--surface-color);
    color: var(--text-color);
}

.input-group input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.result-area {
    min-height: 120px;
    padding: 20px;
    background: var(--surface-soft-color);
    border-radius: 12px;
    border: 1px dashed rgba(110, 97, 78, 0.18);
}

#assistant-panel.dashboard-panel {
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

.ai-studio {
    display: grid;
    gap: 28px;
}

.ai-studio-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 0 0 18px;
    border-bottom: 1px solid #ece3d6;
}

.ai-studio-topbar-left {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.ai-studio-topbar-left strong {
    color: #12311f;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.9rem;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.ai-studio-topbar-left nav {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.ai-studio-topbar-left nav a {
    color: #736d65;
    text-decoration: none;
    font-size: 1rem;
}

.ai-studio-topbar-right {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ai-studio-topbar-right button {
    border: none;
    border-radius: 10px;
    padding: 10px 16px;
    background: #123d2d;
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.ai-studio-topbar-right span {
    font-size: 1.2rem;
    color: #5f5a52;
}

.ai-studio-header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
}

.ai-studio-title {
    margin: 0;
    font-size: clamp(2.6rem, 4vw, 4.3rem);
    line-height: 1;
    letter-spacing: -0.04em;
    color: #12311f;
}

.ai-studio-copy {
    margin: 14px 0 0;
    max-width: 720px;
    color: #666157;
    line-height: 1.78;
    font-size: 1rem;
}

.ai-studio-layout {
    display: block;
}

.ai-studio-main,
.ai-studio-side {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}

.ai-module-card,
.ai-side-card {
    background: #fff;
    border: 1px solid #e7dfd2;
    border-radius: 20px;
    padding: 28px;
    box-shadow: 0 18px 42px rgba(43, 40, 35, 0.06);
    min-width: 0;
}

.ai-module-head,
.ai-side-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.ai-module-head h3,
.ai-side-head h3 {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.75rem;
    color: #17311f;
}

.ai-module-card {
    padding: 34px 38px;
}

.ai-analysis-card {
    padding-bottom: 30px;
}

.ai-analysis-layout {
    display: grid;
    grid-template-columns: minmax(300px, 0.9fr) minmax(520px, 1.1fr);
    gap: 32px;
    align-items: start;
    min-height: 540px;
}

.ai-analysis-input,
.ai-analysis-results {
    min-width: 0;
    min-height: 100%;
}

.ai-analysis-results {
    border-left: 1px solid #eee5d8;
    padding-left: 40px;
    display: flex;
    flex-direction: column;
}

.ai-mode-tabs {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding: 4px;
    border-radius: 14px;
    background: #f2eee7;
    border: 1px solid #e5dccc;
}

.ai-mode-tab,
.ai-result-tab {
    border: none;
    border-radius: 10px;
    padding: 10px 16px;
    background: transparent;
    color: #6f695f;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.ai-mode-tab.is-active,
.ai-result-tab.is-active {
    background: #123d2d;
    color: #fff;
    box-shadow: 0 8px 20px rgba(18, 61, 45, 0.14);
}

.ai-result-tab:disabled {
    opacity: 0.42;
    cursor: default;
}

.ai-input-pane {
    min-width: 0;
}

.ai-module-label {
    font-size: 0.74rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #8a8378;
}

.ai-text-input-wrap {
    position: relative;
    border: 1px solid #ece3d6;
    border-radius: 18px;
    background: #f7f4ed;
    padding: 0;
    overflow: hidden;
}

#assistant-panel #assist-input {
    min-height: 220px;
    padding: 28px 28px 86px;
    border: none !important;
    border-radius: 18px;
    background: transparent;
    font-size: 1.12rem;
    color: #203126;
}

.ai-text-action {
    position: absolute;
    right: 20px;
    bottom: 18px;
}

.ai-text-action .btn-primary {
    padding: 14px 24px;
    border-radius: 12px;
    background: #123d2d;
    border-color: #123d2d;
    color: #fff;
    font-weight: 700;
}

.ai-subsection {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid #eee5d9;
}

.ai-sub-kicker {
    margin: 0 0 12px;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #887f72;
}

.ai-result-block {
    margin-top: 18px;
    background: #fbfaf6;
    border: 1px solid #ebe2d3;
    border-radius: 16px;
    box-shadow: none;
    min-height: 340px;
}

.ai-result-panel {
    flex: 1;
}

.ai-auto-scene-tip {
    margin-bottom: 18px;
    padding: 16px 18px;
    border-radius: 14px;
    background: #f5f1e6;
    border: 1px solid #eadfc9;
}

.ai-auto-scene-tip strong {
    display: block;
    margin-bottom: 6px;
    color: #6f5611;
    font-size: 0.88rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.ai-auto-scene-tip p {
    margin: 0;
    color: #605a50;
    line-height: 1.75;
    font-size: 0.92rem;
}

.ai-lower-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
    gap: 24px;
    align-items: start;
    margin-top: 24px;
}

.ai-scene-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}

.ai-scene-tile {
    padding: 18px 18px;
    border-radius: 16px;
    border: 1px solid #e7dfd1;
    background: #f7f3ec;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.ai-scene-tile strong,
.ai-scene-tile span {
    display: block;
}

.ai-scene-tile strong {
    color: #17311f;
    font-size: 1.04rem;
    margin-bottom: 6px;
}

.ai-scene-tile span {
    color: #716a61;
    font-size: 0.86rem;
    font-style: italic;
}

.ai-scene-tile:hover,
.ai-scene-tile.is-active {
    background: #fff;
    border-color: #1f4f35;
}

.ai-dialog-custom {
    display: flex;
    gap: 10px;
    margin-bottom: 18px;
}

.ai-result-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 18px;
}

.ai-result-panel {
    display: none;
}

.ai-result-panel.is-active {
    display: block;
}

.ai-result-panel .ai-result-block {
    min-height: 320px;
}

#assistant-panel .ai-analysis-results {
    position: relative;
}

#assistant-panel .ai-analysis-results::before {
    content: "";
    position: absolute;
    inset: 46px 0 0 0;
    border-radius: 20px;
    background: #fcfbf7;
    border: 1px solid #ece4d8;
    box-shadow: 0 20px 40px rgba(27, 28, 25, 0.04);
    pointer-events: none;
}

#assistant-panel .ai-result-tabs,
#assistant-panel .ai-result-panel {
    position: relative;
    z-index: 1;
}

#assistant-panel .ai-result-panel .ai-result-block {
    margin-top: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    min-height: 336px;
}

.ai-result-panel .assist-card.ai-card {
    min-height: 280px;
}

.assistant-action-btn {
    padding: 8px 12px;
    font-size: 0.9rem;
    background: #1f4f35;
    border-color: #1f4f35;
    color: #fff;
}

.assistant-dialog-header-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 12px;
    margin-bottom: 8px;
}

.assistant-dialog-content {
    margin-top: 14px;
}

.assistant-dialog-row {
    display: flex;
    margin-top: 14px;
}

.assistant-dialog-row.is-first {
    margin-top: 0;
}

.assistant-dialog-row.is-left {
    justify-content: flex-start;
}

.assistant-dialog-row.is-right {
    justify-content: flex-end;
}

.assistant-dialog-bubble {
    max-width: 78%;
    min-width: 260px;
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid #dde8e0;
    box-shadow: 0 10px 24px rgba(18, 32, 20, 0.05);
    transition: background .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.assistant-dialog-bubble.is-left {
    background: #f6fbf7;
}

.assistant-dialog-bubble.is-right {
    background: #f3f7f5;
}

.assistant-dialog-bubble.is-active-turn {
    background: #fff3c4;
    border-color: #d0a12d;
    box-shadow: 0 18px 32px rgba(155, 122, 17, 0.22);
}

.assistant-dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.assistant-dialog-tools {
    display: flex;
    align-items: center;
    gap: 8px;
}

.assistant-dialog-speaker {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.assistant-dialog-speaker.is-left {
    background: #e4f0e7;
    color: #1f4f35;
}

.assistant-dialog-speaker.is-right {
    background: #e8eeea;
    color: #395246;
}

.assistant-dialog-icon-btn,
.assistant-grammar-btn {
    width: 34px;
    height: 34px;
    padding: 0;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: transparent;
}

.assistant-dialog-icon-btn {
    border: 1px solid #d7e2da;
    color: #1f4f35;
}

.assistant-grammar-btn {
    border: 1px solid #ecdca9;
    color: #9b7a11;
}

.assistant-dialog-hu {
    font-size: 1.08rem;
    font-weight: 700;
    color: #22352a;
    line-height: 1.6;
}

.assistant-dialog-zh {
    display: none;
    margin-top: 6px;
    color: #6a786f;
    line-height: 1.65;
}

.assistant-dialog-zh.is-open {
    display: block;
}

.assistant-grammar-panel {
    display: none;
}

.assistant-grammar-panel.is-open {
    display: block;
}

.assistant-grammar-result,
.assistant-grammar-loading,
.assistant-grammar-error {
    padding: 12px 14px;
    border-radius: 14px;
    margin-top: 10px;
}

.assistant-grammar-result,
.assistant-grammar-loading {
    background: #fbf8f1;
    border: 1px solid #ebe1cd;
}

.assistant-grammar-error {
    background: #fff4f4;
    border: 1px solid #f1d0d0;
    color: #8a4343;
}

.assistant-grammar-text {
    color: #37463d;
    line-height: 1.75;
}

.assistant-grammar-block {
    margin-top: 10px;
}

.assistant-grammar-tip {
    color: #7a6540;
    font-size: 0.94rem;
    line-height: 1.7;
}

.assistant-grammar-list {
    margin: 10px 0 0 18px;
    padding: 0;
    line-height: 1.7;
}

.ai-dialog-custom input {
    flex: 1;
    min-width: 0;
    padding: 13px 14px;
    border: 1px solid #e7dfd1;
    border-radius: 12px;
    background: #fff;
    font: inherit;
}

.ai-dialog-custom .btn-primary {
    padding: 0 18px;
    border-radius: 12px;
    background: #123d2d;
    border-color: #123d2d;
    color: #fff;
    white-space: nowrap;
}

.ai-dialog-actions {
    gap: 10px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.ai-dialog-actions button {
    flex: 1;
    min-width: 120px;
    padding: 11px 14px;
    border-radius: 10px;
    font: inherit;
    cursor: pointer;
}

.ai-secondary-btn {
    border: 1px solid #ddd3c6;
    background: #fff;
    color: #524f48;
}

.ai-amber-btn,
.ai-difficulty-btn {
    border: 1px solid #f0cd75;
    background: #fff5db;
    color: #9c6a14;
    font-weight: 700;
}

.ai-difficulty-btn {
    padding: 10px 14px;
    border-radius: 999px;
    cursor: pointer;
    font-size: 0.88rem;
}

.ai-side-card--image {
    background: #1f4f35;
    color: #edf4ef;
    border-color: #17402d;
    box-shadow: 0 26px 46px rgba(20, 58, 42, 0.18);
    min-height: 520px;
}

.ai-side-card--image .ai-side-head h3 {
    color: #fff;
}

.ai-image-dropzone {
    min-height: 240px;
    border: 2px dashed rgba(255, 255, 255, 0.18);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.05);
    cursor: pointer;
    text-align: center;
}

.ai-image-dropzone-icon {
    font-size: 2rem;
    opacity: 0.78;
}

.ai-image-dropzone p {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
}

.ai-image-dropzone span {
    color: rgba(237, 244, 239, 0.74);
    font-size: 0.88rem;
}

.ai-side-card--image .ai-result-block {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
    color: #edf4ef;
    min-height: 180px;
}

.ai-side-card--notes {
    background: #f7f1dc;
    border-color: #ebdfb6;
    margin-top: 0;
}

.ai-studio .btn-primary {
    background: #123d2d;
    border-color: #123d2d;
    color: #fff;
}

.ai-studio .btn-primary:hover {
    background: #0f3326;
    border-color: #0f3326;
}

.ai-studio .result-area {
    background: #fcfaf6;
}

@media (max-width: 1200px) {
    .ai-studio-layout {
        display: block;
    }

    .ai-analysis-layout {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .ai-analysis-results {
        border-left: none;
        border-top: 1px solid #eee5d8;
        padding-left: 0;
        padding-top: 18px;
    }

    .ai-lower-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .ai-studio-topbar,
    .ai-studio-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .ai-studio-layout {
        display: block;
    }

    .ai-scene-grid {
        grid-template-columns: 1fr;
    }

    .ai-dialog-custom {
        flex-direction: column;
    }

    .ai-lower-layout {
        grid-template-columns: 1fr;
    }
}

.ai-side-card--notes h3 {
    margin: 0 0 18px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.6rem;
    color: #6d5808;
}

.ai-side-card--notes ol {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ai-side-card--notes li {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #40392e;
    line-height: 1.55;
}

.ai-side-card--notes li::before {
    content: counter(item);
    counter-increment: item;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: #7e6509;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    flex-shrink: 0;
}

.ai-side-card--notes ol {
    counter-reset: item;
}

.ai-side-image {
    margin-top: 24px;
    border-radius: 14px;
    overflow: hidden;
}

.ai-side-image img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    display: block;
    filter: grayscale(1) sepia(0.28) brightness(0.92);
}

/* Result Card Styles */
.analysis-card {
    background: var(--surface-color);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(95,83,68,0.06);
}
.sentence-breakdown {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 15px;
}
.word-chip {
    background: #E3F2FD;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background 0.2s;
}
.word-chip:hover {
    background: #BBDEFB;
}
.grammar-point {
    margin-top: 15px;
    padding: 10px;
    background: #fdf0dd;
    border-left: 4px solid #FF9800;
    border-radius: 4px;
}

/* Media Player & Subtitles */
.media-player {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    background: #000;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    color: #fff;
    margin-bottom: 40px;
}

.video-panel {
    display: flex;
    flex-direction: column;
}

.sub-panel {
    background: #1a1a1a;
    border-radius: 8px;
    padding: 15px;
    max-height: 400px;
    display: flex;
    flex-direction: column;
    position: relative; /* Ensure absolute children (playlist) are relative to this */
}

.subtitle-header h3 {
    color: #ddd !important; /* Override inline style for dark mode context */
}

.subtitle-toggles {
    display: flex;
    gap: 15px;
}

/* Toggle Switch */
.switch-wrapper {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #ccc;
    font-size: 0.9rem;
}

.switch {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 20px;
}

.switch input { 
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
}

input:checked + .slider {
    background-color: var(--primary-color);
}

input:focus + .slider {
    box-shadow: 0 0 1px var(--primary-color);
}

input:checked + .slider:before {
    transform: translateX(14px);
}

.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

/* Cue Items */
.cue {
    padding: 10px;
    border-bottom: 1px solid #333;
    cursor: pointer;
    transition: background 0.2s;
}

.cue:hover {
    background: #2a2a2a;
}

.cue.active {
    background: #1f4f35;
    border-left: 4px solid #fff;
}

.cue.active .cue-hu {
    color: #fff;
    font-weight: bold;
}

.cue.active .cue-en {
    color: #FFFF00; /* Pure Bright Yellow */
}

.cue.active .cue-zh {
    color: #FF5252; /* Vivid Red */
}

.cue-hu {
    font-size: 1rem;
    color: #fff;
    margin-bottom: 4px;
}

.cue-zh, .cue-en {
    font-size: 0.85rem;
    color: #aaa;
    display: none;
}

/* Show/Hide Logic based on container classes */
.show-zh .cue-zh { display: block; }
.show-en .cue-en { display: block; }

/* Playlist View */
#playlist-view {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    background: #222;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 20;
    display: flex;
    flex-direction: column;
    border-radius: 8px; /* Match sub-panel */
}

.playlist-header {
    padding: 15px;
    border-bottom: 1px solid #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #1a1a1a;
    border-radius: 8px 8px 0 0;
}

.playlist-item {
    padding: 15px;
    border-bottom: 1px solid #333;
    cursor: pointer;
    transition: background 0.2s;
    color: #ddd;
}

.playlist-item:hover {
    background: #333;
}

.playlist-item.active {
    background: #1565C0;
    color: #fff;
}

/* Buttons */
.btn, .btn-primary, .btn-secondary, .btn-danger {
    display: inline-block;
    padding: 8px 16px;
    background: var(--primary-color);
    color: white;
    text-decoration: none;
    border-radius: 4px;
    font-size: 0.95rem;
    transition: background 0.3s;
    border: none;
    cursor: pointer;
}

.btn, .btn-primary, .btn-secondary, .btn-danger {
    touch-action: manipulation;
}

.btn:hover, .btn-primary:hover {
    opacity: 0.9;
}

.btn-secondary {
    background: #f0f2f5;
    color: #666;
    font-weight: 600;
}

.btn-secondary:hover {
    background: #e4e6e9;
    color: #333;
}

.btn-danger {
    background: #dc3545;
    color: white;
}

.btn-danger:hover {
    background: #c82333;
}

/* Feedback Grid (responsive) */
.feedback-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.btn-primary {
    background: #1f4f35;
    border-color: #1f4f35;
    color: #fff;
}

.home-grid {
    display: block;
}

.home-dashboard-shell {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.home-welcome-card,
.home-feature-card,
.home-stat-card,
.home-word-card,
.home-assistant-card,
.home-section-card,
.home-quick-card {
    background: #fff;
    border: 1px solid #e3e8f1;
    border-radius: 24px;
    box-shadow: 0 18px 40px rgba(29, 54, 98, 0.07);
}

.home-welcome-card,
.home-assistant-card,
.home-section-card {
    padding: 24px;
}

.home-coffee-card,
.home-city-card,
.home-note-card {
    background: #fff;
    border: 1px solid #e3e8f1;
    border-radius: 24px;
    box-shadow: 0 18px 40px rgba(29, 54, 98, 0.07);
}

.home-welcome-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

.home-welcome-kicker {
    margin: 0 0 10px;
    color: #7f8b7c;
    font-size: 0.95rem;
    font-style: italic;
}

.home-welcome-card h2 {
    margin: 0;
    font-size: clamp(1.3rem, 2vw, 1.9rem);
    line-height: 1.1;
    color: #13271b;
    font-family: Georgia, "Times New Roman", serif;
    letter-spacing: -0.02em;
    font-style: italic;
    font-weight: 500;
}

.home-welcome-subtitle {
    margin: 6px 0 0;
    max-width: 360px;
    color: #6f675d;
    font-size: 0.84rem;
    line-height: 1.5;
}

.home-welcome-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    min-width: 160px;
}

.home-szia-mini {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    text-decoration: none;
    color: #183243;
    text-align: right;
    max-width: 175px;
}

.home-szia-mini strong {
    font-size: 0.8rem;
    line-height: 1;
    color: #183243;
    letter-spacing: 0.04em;
}

.home-szia-mini span {
    font-size: 0.72rem;
    color: var(--muted-text-color);
    line-height: 1.35;
}

.home-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 700;
}

.home-pill--soft {
    background: #e6f6e8;
    color: #2d7d45;
}

.home-date {
    color: var(--muted-text-color);
    font-size: 0.84rem;
}

.home-feature-stack {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    width: 100%;
    align-items: stretch;
}

.home-feature-card {
    position: relative;
    overflow: hidden;
    min-height: 580px;
    padding: 0;
    background:
        url("https://upload.wikimedia.org/wikipedia/commons/b/ba/Budapest_Danube_panorama_1.jpg") center/cover no-repeat;
}

.home-carousel-card {
    position: relative;
    overflow: hidden;
    min-height: 360px;
    border-radius: 24px;
    box-shadow: 0 16px 34px rgba(29, 54, 98, 0.08);
    background: #122017;
    width: 100%;
    max-width: none;
}

.home-carousel-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.7s ease;
    background-size: cover;
    background-position: center;
}

.home-carousel-slide.is-active {
    opacity: 1;
    pointer-events: auto;
}

.home-carousel-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(8, 18, 14, 0.16) 0%, rgba(8, 18, 14, 0.34) 45%, rgba(8, 18, 14, 0.72) 100%);
}

.home-carousel-copy {
    position: absolute;
    left: 32px;
    right: 32px;
    bottom: 26px;
    z-index: 2;
    max-width: 520px;
    color: #fff;
}

.home-carousel-kicker {
    margin: 0 0 6px;
    color: rgba(255, 255, 255, 0.74);
    font-size: 0.8rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.home-carousel-copy h3 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.76rem, 2.4vw, 2.45rem);
    line-height: 1.15;
    font-family: Georgia, "Times New Roman", serif;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.22);
}

.home-carousel-copy p:last-child {
    display: none;
    margin: 0;
    color: rgba(255, 255, 255, 0.88);
    font-size: 1rem;
    line-height: 1.75;
}

.home-carousel-nav {
    position: absolute;
    right: 24px;
    bottom: 24px;
    z-index: 3;
    display: flex;
    gap: 10px;
}

.home-carousel-dot {
    width: 12px;
    height: 12px;
    border: 1px solid rgba(255, 255, 255, 0.48);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.home-carousel-dot.is-active {
    background: #f6d27a;
    border-color: #f6d27a;
    transform: scale(1.15);
}

.home-word-card h3 {
    margin: 0;
    font-size: clamp(2rem, 2.1vw, 2.5rem);
    line-height: 1.04;
    letter-spacing: -0.02em;
    font-family: Georgia, "Times New Roman", serif;
}

.home-stat-card,
.home-word-card {
    padding: 24px;
}

.home-stat-card {
    display: flex;
    align-items: center;
    gap: 18px;
}

.home-stat-card--warm {
    border-left: 4px solid #9b6c12;
}

.home-stat-icon {
    width: 78px;
    height: 78px;
    border-radius: 50%;
    background: #ffd37f;
    color: #7a5611;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    font-weight: 700;
}

.home-stat-card strong {
    display: block;
    font-size: 1.6rem;
    margin-bottom: 6px;
    color: #111;
}

.home-stat-card p {
    margin: 0;
    color: var(--muted-text-color);
}

.home-word-card {
    background: #fff;
    border-color: #e8e1d5;
    color: #122017;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px 20px 18px;
    height: 100%;
    box-sizing: border-box;
}

.home-word-card .home-feature-kicker {
    color: #b75d4a;
    letter-spacing: 0.14em;
}

.home-word-zh {
    margin: 8px 0 0;
    color: #4d544b;
    font-size: 0.95rem;
    line-height: 1.42;
}

.home-side-stack {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.home-word-pron {
    margin-top: 16px;
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 12px 13px;
    border-radius: 14px;
    background: #f4f1eb;
}

.home-word-pron strong,
.home-word-note strong {
    display: block;
    font-size: 0.8rem;
    color: #122017;
}

.home-word-pron span {
    display: block;
    margin-top: 3px;
    color: var(--muted-text-color);
    font-size: 0.82rem;
}

.home-word-note {
    margin-top: 18px;
    padding-left: 16px;
    border-left: 2px solid rgba(58, 144, 103, 0.28);
}

.home-word-note p {
    margin: 8px 0 0;
    color: var(--muted-text-color);
}

.home-inline-play {
    margin-top: 0;
    min-width: 44px;
    min-height: 44px;
    border-radius: 50%;
    background: #c0392b;
    border: 1px solid #c0392b;
    color: #fff;
    padding: 0;
    font-size: 0.92rem;
}

.home-coffee-card {
    display: block;
    padding: 22px 22px;
    text-align: left;
    width: 100%;
    max-width: none;
    background: linear-gradient(180deg, #1b4f40 0%, #184737 100%);
    border-color: #184737;
    color: #e5ede7;
    box-shadow: 0 10px 22px rgba(20, 58, 41, 0.08);
}

.home-coffee-task {
    margin: 0;
    font-size: 1.5rem;
    line-height: 1.2;
    color: #f0f6f2;
    font-weight: 700;
    font-family: Georgia, "Times New Roman", serif;
}

.home-coffee-tip {
    margin: 12px 0 0;
    color: var(--muted-text-color);
    line-height: 1.75;
    max-width: none;
}

.home-coffee-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.home-coffee-btn {
    border: 1px solid rgba(31, 79, 53, 0.16);
    background: rgba(255,255,255,0.08);
    color: #edf4ef;
    border-radius: 999px;
    padding: 8px 13px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    border-color: rgba(255,255,255,0.12);
}

.home-coffee-kind-inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 12px;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
    color: #dce7df;
    font-size: 0.8rem;
    font-weight: 700;
}

.home-coffee-btn--primary {
    background: #f1e2ba;
    color: #143a29;
    border-color: transparent;
}

.home-coffee-btn.is-done {
    background: #edf7ef;
    color: #2d7d45;
    border-color: rgba(45, 125, 69, 0.2);
}

.home-coffee-feedback {
    color: #2d7d45;
    font-weight: 700;
    font-size: 0.92rem;
}

.home-city-card {
    overflow: hidden;
    position: relative;
}

.home-city-card--hero,
.home-city-card--notes {
    width: 100%;
    display: block;
    box-sizing: border-box;
    align-self: stretch;
}

.home-city-card--notes {
    padding: 26px 28px;
    margin: 0;
}

.home-city-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 14px;
    margin-bottom: 24px;
}

.home-inline-link {
    color: #1f4f35;
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
}

.home-city-notes-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 18px;
}

.home-note-term {
    padding: 10px 6px 8px;
    border-radius: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 2px 18px;
    align-items: start;
}

.home-note-term strong {
    display: block;
    font-size: 2rem;
    line-height: 1.02;
    color: #122017;
    letter-spacing: -0.03em;
    grid-column: 1 / 2;
    grid-row: 1 / 3;
}

.home-note-term span {
    display: block;
    margin-top: 2px;
    color: #122017;
    font-size: 1.02rem;
    font-weight: 600;
    grid-column: 2 / 3;
}

.home-note-term p {
    margin: 0;
    color: var(--muted-text-color);
    font-size: 0.86rem;
    line-height: 1.45;
    grid-column: 2 / 3;
}

.home-note-term--accent strong {
    color: #ce2939;
}

.home-city-image {
    min-height: 360px;
    background-size: cover;
    background-position: center;
}

.home-city-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(8, 18, 14, 0.12) 0%, rgba(8, 18, 14, 0.38) 48%, rgba(8, 18, 14, 0.82) 100%);
}

.home-city-copy {
    padding: 24px;
}

.home-city-copy--overlay {
    position: absolute;
    left: 28px;
    right: 28px;
    bottom: 24px;
    z-index: 2;
    padding: 0;
    color: #fff;
}

.home-city-copy h3 {
    margin: 0;
    font-size: 1.45rem;
}

.home-city-lead,
.home-city-note,
.home-note-card p {
    margin: 12px 0 0;
    color: var(--muted-text-color);
    line-height: 1.75;
}

.home-city-copy--overlay .home-city-lead,
.home-city-copy--overlay .panel-kicker,
.home-city-copy--overlay h3 {
    color: #fff;
}

.home-city-tags {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 18px;
}

.home-city-tags span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.88);
    color: #3f3a34;
    font-size: 0.9rem;
}

.home-note-card {
    padding: 20px 22px;
}

.home-note-card h3 {
    margin: 0;
    font-size: 1.25rem;
    line-height: 1.35;
}

.home-note-card--soft {
    background: #f6f8f5;
}

.home-note-card--weekly {
    margin-top: 2px;
    width: 100%;
    padding: 18px 20px;
    background: #f7f4ec;
    border-color: #e9e0cf;
}

.home-assistant-card {
    border-radius: 26px;
}

.home-section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 14px;
}

.home-section-head h3,
.home-hero-head h3 {
    margin: 0;
    font-size: 1.35rem;
}

.home-quick-grid {
    display: grid;
    gap: 18px;
}

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

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

.home-quick-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 22px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.home-quick-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(29, 54, 98, 0.08);
}

.home-quick-card strong {
    font-size: 1.05rem;
    color: #2c3e50;
}

.home-quick-card span {
    color: var(--muted-text-color);
    line-height: 1.65;
}

.home-impression-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.home-impression-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    background: #fff;
    border: 1px solid #e6e0d3;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(29, 54, 98, 0.07);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.home-impression-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 36px rgba(18, 32, 20, 0.12);
}

.home-impression-image {
    height: 210px;
    background-size: cover;
    background-position: center;
    filter: grayscale(1) brightness(0.54);
}

.home-impression-copy {
    padding: 16px 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.home-impression-copy strong {
    font-size: 0.88rem;
    line-height: 1.42;
    min-height: 0;
    color: #203327;
    font-family: Georgia, "Times New Roman", serif;
}

.home-impression-copy span {
    color: var(--muted-text-color);
    line-height: 1.56;
    font-size: 0.84rem;
}

.home-archive-card {
    padding: 8px 0 0 !important;
    background: transparent;
    border: none;
    box-shadow: none;
}

.home-archive-tag {
    font-size: 0.76rem !important;
    letter-spacing: 0.18em;
    color: #9d9588 !important;
    text-transform: uppercase;
}

.home-archive-item {
    box-shadow: none;
}

.home-archive-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 36px rgba(18, 32, 20, 0.08);
}

.home-archive-item .home-impression-copy span:last-child {
    display: -webkit-box;
    line-clamp: 3;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #6a665f;
}

.community-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(280px, 0.9fr);
    gap: 24px;
    align-items: start;
}

.community-main,
.community-side {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.community-composer,
.community-feed,
.community-side-card {
    background: #fff;
    border: 1px solid #e3e8f1;
    border-radius: 22px;
    box-shadow: 0 16px 36px rgba(29, 54, 98, 0.08);
    padding: 22px;
}

.community-side-card--soft {
    background: #eef5ff;
}

.community-side-card--plain {
    background: #f7faf7;
}

.community-side-card--dark {
    background: #24384c;
    color: #fff;
}

.community-side-card--dark .panel-kicker,
.community-side-card--dark .small-note,
.community-side-card--dark p {
    color: rgba(255, 255, 255, 0.82);
}

.community-box-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 14px;
}

.community-filter-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.community-filter-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 12px;
    border-radius: 999px;
    background: #eef3ef;
    color: #5f6f64;
    font-size: 0.84rem;
    font-weight: 700;
}

.community-filter-chip.is-active {
    background: #1f4f35;
    color: #fff;
}

.community-box-head h3 {
    margin: 0;
    font-size: 1.3rem;
}

.community-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.community-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.community-field label {
    display: block;
    margin-bottom: 6px;
    font-weight: 700;
    color: #364a65;
}

.community-field input,
.community-field textarea,
.community-field select {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid #dce4f0;
    background: #edf4ff;
    font: inherit;
    color: var(--text-color);
}

.community-field textarea {
    min-height: 140px;
    resize: vertical;
}

.community-submit-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.community-submit-btn {
    border: none;
    border-radius: 999px;
    background: #1f6dd2;
    color: #fff;
    font: inherit;
    font-weight: 700;
    padding: 13px 28px;
    cursor: pointer;
}

.community-timeline {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.community-timeline-item {
    position: relative;
    padding-left: 18px;
    border-left: 2px solid #a8c5ea;
}

.community-timeline-item::before {
    content: '';
    position: absolute;
    left: -6px;
    top: 4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #1f4f35;
}

.community-timeline-item strong {
    display: block;
    margin-bottom: 6px;
    color: #285ba2;
}

.community-timeline-item p {
    margin: 0;
    line-height: 1.65;
}

.community-tip-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.community-tip-item {
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.08);
    padding: 14px 16px;
}

.community-tip-item strong {
    display: block;
    margin-bottom: 6px;
    color: #fff;
}

.community-tip-item p {
    margin: 0;
}

.community-stats-grid {
    display: grid;
    gap: 12px;
}

.community-stat-box {
    border-radius: 16px;
    background: #fff;
    border: 1px solid #e2ebe4;
    padding: 14px 16px;
}

.community-stat-box strong {
    display: block;
    margin-bottom: 6px;
    color: #203327;
}

.community-stat-box span {
    color: var(--muted-text-color);
    line-height: 1.65;
    font-size: 0.94rem;
}

.feedback-item {
    background: #fff;
    border: 1px solid #e3e8f1;
    border-radius: 18px;
    padding: 16px 18px;
    margin-bottom: 14px;
    box-shadow: 0 10px 24px rgba(29, 54, 98, 0.05);
}

.feedback-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    font-size: 0.88rem;
    color: var(--muted-text-color);
}

.feedback-author {
    font-weight: 700;
    color: #344861;
}

.feedback-content {
    color: var(--text-color);
    line-height: 1.7;
    white-space: pre-wrap;
    word-break: break-word;
}

.feedback-status {
    margin-top: 10px;
    font-size: 0.92rem;
    color: #517a63;
    min-height: 1.4em;
    flex: 1;
}

.feedback-item--tip {
    background: #edf5ff;
    border-left: 4px solid #1f4f35;
}

/* Mobile touch-friendly adjustments */
@media (pointer: coarse) {
    .btn, .btn-primary, .btn-secondary, .btn-danger {
        padding: 10px 18px;
    }
    .switch {
        width: 40px;
        height: 24px;
    }
    .slider:before {
        width: 18px;
        height: 18px;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .dashboard-panel,
    .practice-feature {
        padding: 20px;
    }

    .media-player {
        grid-template-columns: 1fr;
    }
    .sub-panel {
        max-height: 300px;
    }
    .feedback-grid {
        grid-template-columns: 1fr;
    }

    .community-layout {
        grid-template-columns: 1fr;
    }

    .home-welcome-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .home-welcome-meta {
        align-items: flex-start;
    }

    .home-feature-stack,
    .home-quick-grid,
    .home-quick-grid--three,
    .home-impression-grid {
        grid-template-columns: 1fr;
    }

    .home-carousel-card {
        min-height: 500px;
    }

    .home-carousel-copy {
        left: 24px;
        right: 24px;
        bottom: 28px;
    }

    .library-grid,
    .library-essay {
        grid-template-columns: 1fr 1fr;
    }

    .community-form-row {
        grid-template-columns: 1fr;
    }
}

/* AI Modal Styles */
.ai-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none; /* Hidden by default */
    justify-content: center;
    align-items: center; /* Center vertically */
    z-index: 9999;
    padding: 20px;
    box-sizing: border-box;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.ai-modal-overlay.active {
    opacity: 1;
}

.ai-modal-content {
    background: #fff;
    width: 100%;
    max-width: 500px; /* Mobile friendly max width */
    max-height: 80vh; /* Don't exceed screen height */
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
    padding: 20px;
    transform: scale(0.9);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    
    /* Animation start state */
    opacity: 0;
}

.ai-modal-overlay.active .ai-modal-content {
    transform: scale(1);
    opacity: 1;
}

.ai-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 10px;
    flex-shrink: 0;
}

.ai-modal-header h3 {
    margin: 0;
    font-size: 1.2rem;
    color: var(--primary-color);
}

.close-modal {
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    color: #999;
    padding: 0 10px;
}

.ai-result-content {
    flex: 1;
    overflow-y: auto;
    /* Ensure content scrolls */
    -webkit-overflow-scrolling: touch; 
}

.loading-spinner {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    color: #666;
    font-style: italic;
}

/* Mobile scrolling improvements for subtitles list */
#cues {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* Playlist Side Toggle Button */
#btn-toggle-playlist {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 25;
    padding: 10px 4px;
    border-radius: 6px 0 0 6px;
    background: #333;
    color: #fff;
    border: 1px solid #444;
    border-right: none;
    cursor: pointer;
    font-size: 0.9rem;
    box-shadow: -2px 0 5px rgba(0,0,0,0.2);
    writing-mode: vertical-rl;
    text-orientation: upright;
    letter-spacing: 2px;
}
#btn-toggle-playlist:hover {
    background: #444;
}

.expansion-example {
    margin-top: 6px;
    font-size: 0.94rem;
    color: #475569;
    line-height: 1.55;
}

.expansion-example-zh {
    color: #64748b;
}

.expansion-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.hero,
.section-box,
.goal-box,
.page-box,
.featured,
.dialog-box,
.grammar-box,
.video-card,
.playlist-item {
    background: var(--surface-color) !important;
}

.small-note,
.goal-card p,
.lesson-card p,
.video-info p,
.assistant-intro {
    color: var(--muted-text-color) !important;
}

textarea,
input,
select {
    background: var(--surface-color);
    color: var(--text-color);
}

/* Keep subtitle/video controls high-contrast even in eye-care mode */
.sub-panel,
.subtitle-header,
.playlist-header,
#playlist-view {
    background: #1f1f1f !important;
}

.subtitle-header h3,
.subtitle-header .switch-wrapper,
.playlist-header,
.playlist-header h3,
#btn-toggle-playlist {
    color: #f2f2f2 !important;
}

.subtitle-header {
    border-bottom: 1px solid #3a3a3a !important;
}

.playlist-header {
    border-bottom: 1px solid #3a3a3a !important;
}


/* Mobile-first safeguards for key pages */
@media (max-width: 768px) {
    header h1 {
        flex-wrap: wrap;
        font-size: 1.45rem;
        line-height: 1.35;
    }

    .flag-icon {
        height: 16px;
        width: 24px;
    }

    .levels-grid,
    .theme-grid,
    .feedback-grid {
        gap: 18px;
    }

    .assistant-demo {
        padding: 22px 16px;
    }

    #assist-input {
        min-height: 160px;
    }

    .sub-panel,
    #playlist-view {
        max-height: 260px !important;
    }

    .video-card,
    .dialog-box,
    .grammar-box,
    .level-card,
    .theme-card {
        padding-left: 18px;
        padding-right: 18px;
    }
}

@media (max-width: 600px) {
    main {
        padding: 0 14px;
    }

    header {
        padding: 18px 14px;
    }

    header h1 {
        font-size: 1.28rem;
        gap: 6px;
    }

    .dashboard-nav {
        grid-template-columns: 1fr;
    }

    .dashboard-sidebar-card,
    .dashboard-panel,
    .practice-feature {
        padding: 16px;
        border-radius: 16px;
    }

    .panel-heading {
        flex-direction: column;
        align-items: flex-start;
    }

    .assistant-demo {
        padding: 18px 14px;
    }

    .home-carousel-card {
        min-height: 360px;
    }

    .home-carousel-copy {
        left: 18px;
        right: 18px;
        bottom: 18px;
    }

    .home-carousel-copy h3 {
        font-size: 1.55rem;
    }

    .home-carousel-copy p:last-child {
        font-size: 0.92rem;
        line-height: 1.6;
    }

    .home-carousel-nav {
        right: 18px;
        bottom: 18px;
    }

    .level-card h3 {
        margin: -25px -18px 18px -18px;
        padding: 14px 18px;
        font-size: 1.2rem;
        line-height: 1.35;
        flex-wrap: wrap;
    }

    .level-badge {
        font-size: 0.72rem;
        padding: 3px 9px;
    }

    .btn,
    .btn-primary,
    .btn-secondary,
    .btn-danger {
        width: 100%;
        text-align: center;
        box-sizing: border-box;
    }

    #assist-input {
        min-height: 148px;
    }

    .community-submit-row {
        flex-direction: column;
        align-items: stretch;
    }

    .sub-panel,
    #playlist-view {
        max-height: 220px !important;
    }

    .library-grid,
    .library-essay,
    .scene-card-grid {
        grid-template-columns: 1fr;
    }

    .library-topbar {
        align-items: flex-start;
    }

    .library-feature {
        min-height: 280px;
        padding: 22px;
    }

    .library-card-image {
        height: 220px;
    }

    .library-essay-copy {
        padding: 24px;
    }
}

.curator-home {
    max-width: 1260px;
    margin: 0 auto;
    padding: 26px 34px 52px;
    display: flex;
    flex-direction: column;
    gap: 34px;
}

.curator-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}

.curator-topbar-title {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 2.15rem;
    font-style: italic;
    font-weight: 500;
    line-height: 1.05;
    color: #152719;
}

.curator-topbar-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.curator-search {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 300px;
    padding: 10px 16px;
    border-radius: 999px;
    background: #ece9e2;
    color: #78756e;
    box-sizing: border-box;
}

.curator-search input {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    font: inherit;
    color: #5a5853;
}

.curator-search input::placeholder {
    color: #85827b;
}

.curator-top-icon {
    border: none;
    background: transparent;
    color: #272824;
    font: inherit;
    font-size: 1.05rem;
    cursor: pointer;
    padding: 0;
}

.curator-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) 320px;
    gap: 24px;
    align-items: start;
}

.curator-hero-card {
    min-height: 312px;
    border-radius: 24px;
}

.curator-hero-card .home-carousel-overlay {
    background: linear-gradient(180deg, rgba(8, 24, 18, 0.24) 0%, rgba(8, 24, 18, 0.7) 100%);
}

.curator-hero-card .home-carousel-copy {
    left: 34px;
    right: 34px;
    bottom: 28px;
}

.curator-hero-card .home-carousel-kicker {
    font-size: 0.8rem;
    letter-spacing: 0.24em;
}

.curator-hero-card .home-carousel-copy h3 {
    margin: 10px 0 12px;
    font-size: clamp(2.35rem, 4vw, 4.2rem);
    line-height: 0.97;
    letter-spacing: -0.03em;
}

.curator-hero-card .home-carousel-copy p:last-child {
    max-width: 520px;
    font-size: 1rem;
    line-height: 1.55;
}

.curator-phrase-card,
.curator-notes-card,
.curator-weekly-card,
.curator-archive-item {
    background: #fff;
    border: 1px solid #e3ddd2;
    border-radius: 24px;
    box-shadow: 0 12px 28px rgba(59, 50, 38, 0.06);
}

.curator-phrase-card {
    min-height: 312px;
    padding: 28px 26px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-sizing: border-box;
}

.curator-card-kicker {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #7e776d;
}

.curator-card-kicker--accent {
    color: #b6362a;
}

.curator-card-kicker--light {
    color: rgba(245, 247, 243, 0.72);
}

.curator-phrase-word {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.6rem, 3vw, 4rem);
    line-height: 0.98;
    letter-spacing: -0.03em;
    color: #17261a;
}

.curator-phrase-zh {
    margin: 0;
    font-size: 1.02rem;
    color: #484641;
    line-height: 1.55;
}

.curator-pron-card {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 18px;
    background: #f1eeea;
}

.curator-play-btn {
    width: 54px;
    height: 54px;
    border-radius: 999px;
    border: none;
    background: #c0392b;
    color: #fff;
    font-size: 1.15rem;
    cursor: pointer;
    flex-shrink: 0;
}

.curator-pron-card strong {
    display: block;
    font-size: 0.95rem;
    color: #23211d;
}

.curator-pron-card span {
    display: block;
    margin-top: 3px;
    font-size: 0.88rem;
    color: #6d675f;
    line-height: 1.45;
}

.curator-middle-grid {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.curator-coffee-card {
    background: linear-gradient(180deg, #0d4c37 0%, #0b4331 100%);
    border-radius: 24px;
    padding: 28px 26px;
    color: #edf3ef;
    box-shadow: 0 14px 28px rgba(10, 44, 31, 0.18);
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 330px;
    box-sizing: border-box;
}

.curator-coffee-icon {
    width: 74px;
    height: 74px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
}

.curator-coffee-kind {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(237, 243, 239, 0.68);
}

.curator-coffee-card h3 {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 2.5rem;
    line-height: 1;
    color: #fff9f3;
}

.curator-coffee-task {
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.65;
    color: #edf3ef;
}

.curator-coffee-tip {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.6;
    color: rgba(237, 243, 239, 0.78);
}

.curator-coffee-actions {
    margin-top: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.curator-coffee-btn {
    border-radius: 12px;
    padding: 12px 14px;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}

.curator-coffee-btn--primary {
    border: none;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}

.curator-coffee-btn--ghost {
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: transparent;
    color: rgba(237, 243, 239, 0.86);
}

.curator-coffee-feedback {
    min-height: 1.2em;
    font-size: 0.84rem;
    color: #ffe9b7;
}

.curator-notes-card {
    padding: 28px 30px;
    background: #f4f1eb;
    min-height: 330px;
    box-sizing: border-box;
}

.curator-notes-head h3 {
    margin: 4px 0 8px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 2rem;
    line-height: 1.05;
    color: #17261a;
}

.curator-notes-head p:last-child {
    margin: 0;
    color: #646057;
    line-height: 1.65;
}

.curator-notes-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 24px;
    margin-top: 30px;
}

.curator-note-pill {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 14px;
    align-items: start;
}

.curator-note-pill strong {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 72px;
    padding: 0 10px;
    border-radius: 12px;
    background: #fff;
    border-top: 4px solid #0d4c37;
    font-size: 1.1rem;
    color: #16251a;
    box-shadow: 0 4px 10px rgba(44, 43, 38, 0.04);
}

.curator-note-pill--accent strong {
    border-top-color: #c0392b;
    color: #c0392b;
}

.curator-note-pill span {
    display: block;
    margin-top: 3px;
    font-size: 1.4rem;
    line-height: 1;
    font-family: Georgia, "Times New Roman", serif;
    color: #17261a;
}

.curator-note-pill p {
    margin: 8px 0 0;
    font-size: 0.94rem;
    color: #67635b;
    line-height: 1.55;
}

.curator-weekly-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 24px;
}

.curator-weekly-card h3 {
    margin: 4px 0 0;
    font-size: 1.2rem;
    line-height: 1.35;
    color: #17261a;
}

.curator-weekly-card p {
    margin: 0;
    flex: 1;
    color: #655f56;
    line-height: 1.65;
}

.curator-weekly-play,
.curator-inline-link {
    flex-shrink: 0;
}

.curator-weekly-play {
    border: none;
    border-radius: 999px;
    background: #f1ede6;
    color: #18311f;
    padding: 10px 16px;
    font: inherit;
    cursor: pointer;
}

.curator-archive {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.curator-archive-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
}

.curator-archive-head h3 {
    margin: 4px 0 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 3rem;
    font-weight: 500;
    line-height: 1;
    color: #18261a;
}

.curator-inline-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #1b2c1d;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid #c7b89f;
    padding-bottom: 2px;
}

.curator-archive-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.curator-archive-item {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
}

.curator-archive-image {
    aspect-ratio: 4 / 3;
    background-size: cover;
    background-position: center;
    filter: grayscale(28%);
}

.curator-archive-copy {
    padding: 18px 18px 20px;
}

.curator-archive-tag {
    display: inline-block;
    margin-bottom: 10px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #948d82;
}

.curator-archive-copy strong {
    display: block;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.2rem;
    line-height: 1.25;
    color: #18261a;
}

.curator-archive-copy p {
    margin: 12px 0 0;
    color: #69645b;
    line-height: 1.7;
    font-size: 0.93rem;
}

@media (max-width: 1200px) {
    .curator-hero-grid,
    .curator-middle-grid {
        grid-template-columns: 1fr;
    }

    .curator-phrase-card,
    .curator-coffee-card,
    .curator-notes-card {
        min-height: 0;
    }
}

@media (max-width: 900px) {
    .curator-home {
        padding: 20px 18px 36px;
    }

    .curator-topbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .curator-search {
        min-width: 0;
        width: 100%;
    }

    .curator-archive-grid,
    .curator-notes-grid {
        grid-template-columns: 1fr;
    }
}

.dashboard-rail,
.scholar-home,
.curator-home {
    display: none;
}

.heritage-home {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.heritage-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.heritage-search {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 320px;
    padding: 10px 14px;
    border-radius: 10px;
    background: #ece8e1;
    color: #847f76;
}

.heritage-search input {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    font: inherit;
    color: #524f49;
}

.heritage-topbar-right {
    display: flex;
    align-items: center;
    gap: 14px;
}

.heritage-top-icon {
    border: none;
    background: transparent;
    color: #2f312c;
    font: inherit;
    font-size: 1rem;
    cursor: pointer;
    padding: 0;
}

.heritage-topbar-title {
    margin-left: 10px;
    padding-left: 18px;
    border-left: 1px solid #dfd8cb;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.15rem;
    font-style: italic;
    color: #16311f;
}

.heritage-welcome {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 22px;
}

.heritage-welcome-copy {
    flex: 1 1 700px;
    width: 100%;
    max-width: 820px;
    position: relative;
    z-index: 1;
    min-height: 340px;
    padding: 120px 30px 28px;
    border-radius: 36px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background-image: url("../assets/home/1f4c5ace-fec3-4b9c-991a-0fa9f24f988d.jpg");
    background-size: cover;
    background-position: 72% center;
    box-shadow: 0 30px 60px rgba(19, 39, 27, 0.08);
}

.heritage-date {
    margin: 0 0 8px;
    color: rgba(255, 249, 240, 0.92);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-shadow: 0 2px 10px rgba(8, 18, 14, 0.28);
}

.heritage-welcome-copy h1 {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.45rem, 3.65vw, 4rem);
    line-height: 1.03;
    letter-spacing: -0.04em;
    color: #fff8ee;
    text-shadow: 0 4px 18px rgba(8, 18, 14, 0.34);
}

.heritage-heading-top,
.heritage-heading-bottom {
    display: block;
}

.heritage-heading-bottom {
    white-space: nowrap;
}

.heritage-welcome-copy p:last-child {
    margin: 16px 0 0;
    max-width: 500px;
    color: rgba(255, 249, 240, 0.96);
    font-size: 1rem;
    line-height: 1.64;
    text-shadow: 0 3px 14px rgba(8, 18, 14, 0.3);
}

.heritage-welcome-stats {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    flex: 0 0 340px;
    width: 340px;
    min-width: 340px;
    max-width: 340px;
    margin-top: 36px;
    position: relative;
    z-index: 1;
}

.heritage-szia-card {
    padding: 30px 22px;
    min-height: 178px;
    border-radius: 10px;
    background: linear-gradient(180deg, #8fe4d3 0%, #9de8df 100%);
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    margin: 0 auto;
}

.heritage-szia-card--link {
    text-decoration: none;
}

.heritage-szia-kicker {
    display: block;
    margin-bottom: 12px;
    font-size: 2.12rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    color: #16334a;
}

.heritage-szia-card strong {
    display: block;
    max-width: 26ch;
    color: #20384d;
    font-size: 0.96rem;
    line-height: 1.62;
    font-weight: 700;
}

.heritage-calendar-card {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    margin: 0 auto;
    border-radius: 18px;
    background:
        radial-gradient(circle at 86% 18%, rgba(191, 154, 82, 0.12), transparent 34%),
        linear-gradient(180deg, rgba(252, 247, 239, 0.98), rgba(245, 237, 224, 0.98));
    border: 1px solid #e7dccb;
    box-shadow: 0 18px 36px rgba(89, 68, 44, 0.06);
    overflow: hidden;
}

.heritage-calendar-summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 146px;
    padding: 22px 24px;
    cursor: pointer;
}

.heritage-calendar-summary::-webkit-details-marker {
    display: none;
}

.heritage-calendar-summary-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.heritage-calendar-label {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #8b7f71;
}

.heritage-calendar-summary strong {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 2rem;
    line-height: 1;
    color: #16311f;
}

.heritage-calendar-month {
    font-size: 1rem;
    font-weight: 700;
    color: #5d685f;
}

.heritage-calendar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 74px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(253, 247, 238, 0.94);
    color: #3f382f;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    box-shadow: inset 0 0 0 1px rgba(120, 97, 67, 0.08);
}

.heritage-calendar-card[open] .heritage-calendar-toggle {
    background: #123d2d;
    color: #fff;
}

.heritage-calendar-panel {
    padding: 0 18px 18px;
}

.heritage-calendar-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    padding-top: 2px;
    color: #5b655d;
    font-size: 0.78rem;
    font-weight: 700;
}

.heritage-calendar-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.heritage-calendar-dot,
.heritage-calendar-mini {
    display: inline-block;
    border-radius: 999px;
}

.heritage-calendar-dot {
    width: 10px;
    height: 10px;
}

.heritage-calendar-dot--cn,
.heritage-calendar-mini--cn {
    background: #de2910;
}

.heritage-calendar-dot--hu,
.heritage-calendar-mini--hu {
    background: #436f4d;
}

.heritage-calendar-weekdays,
.heritage-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.heritage-calendar-weekdays {
    margin-top: 14px;
    color: #8b7f71;
    font-size: 0.75rem;
    font-weight: 800;
    text-align: center;
}

.heritage-calendar-grid {
    gap: 6px;
    margin-top: 10px;
}

.heritage-calendar-cell {
    min-height: 38px;
    padding: 6px 4px;
    border-radius: 10px;
    background: #f7f4ee;
    text-align: center;
}

.heritage-calendar-cell b {
    display: block;
    font-size: 0.86rem;
    line-height: 1;
    color: #243329;
}

.heritage-calendar-cell em {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 12px;
    margin-top: 5px;
    font-style: normal;
}

.heritage-calendar-mini {
    width: 6px;
    height: 6px;
}

.heritage-calendar-cell--blank {
    background: transparent;
}

.heritage-calendar-cell.is-cn {
    background: rgba(222, 41, 16, 0.16);
}

.heritage-calendar-cell.is-hu {
    background: rgba(67, 111, 77, 0.18);
}

.heritage-calendar-cell.is-both {
    background: linear-gradient(135deg, rgba(222, 41, 16, 0.2) 0%, rgba(222, 41, 16, 0.2) 50%, rgba(67, 111, 77, 0.2) 50%, rgba(67, 111, 77, 0.2) 100%);
}

.heritage-calendar-cell.is-today {
    outline: 2px solid #c8aa49;
    outline-offset: -2px;
}

.heritage-calendar-events {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 14px;
}

.heritage-calendar-event {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 0.82rem;
    font-weight: 700;
}

.heritage-calendar-event span {
    min-width: 48px;
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.heritage-calendar-event strong {
    color: #243329;
}

.heritage-calendar-event--cn {
    background: rgba(222, 41, 16, 0.13);
}

.heritage-calendar-event--cn span {
    color: #de2910;
}

.heritage-calendar-event--hu {
    background: rgba(67, 111, 77, 0.16);
}

.heritage-calendar-event--hu span {
    color: #436f4d;
}

.heritage-calendar-empty {
    margin: 14px 0 0;
    color: #7b756c;
    font-size: 0.84rem;
    line-height: 1.6;
}

.heritage-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.75fr) 340px;
    gap: 30px;
    align-items: start;
}

.heritage-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 24px;
}

.heritage-metric-card {
    min-height: 170px;
    background: #fff;
    border: 1px solid #e6dfd2;
    border-radius: 12px;
    padding: 24px 22px;
}

.heritage-metric-card p:first-child {
    margin: 0 0 28px;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #6e6a61;
}

.heritage-metric-card strong {
    display: block;
    margin-bottom: 10px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 2.1rem;
    line-height: 1;
    color: #15311f;
}

.heritage-metric-card span {
    display: block;
    color: #6c665d;
    font-size: 0.88rem;
    line-height: 1.55;
}

.heritage-curriculum-card,
.heritage-archive-side,
.heritage-focus-card {
    background: #fff;
    border: 1px solid #e6dfd2;
    border-radius: 12px;
}

.heritage-curriculum-card {
    padding: 30px;
}

.heritage-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 22px;
}

.heritage-section-head h2 {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 2rem;
    color: #15311f;
}

.heritage-section-head p {
    margin: 6px 0 0;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #7b766d;
}

.heritage-section-head a {
    color: #6d5808;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
}

.heritage-curriculum-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.heritage-curriculum-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    border: 1px solid #ece5d8;
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    background: #fff;
}

.heritage-curriculum-item--muted {
    opacity: 0.65;
}

.heritage-curriculum-icon {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #123d2d;
    color: #fff;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.heritage-curriculum-icon--gold {
    background: #d7ba48;
    color: #3c2e00;
}

.heritage-curriculum-icon--muted {
    background: #ece8e1;
    color: #7a766f;
}

.heritage-curriculum-copy {
    min-width: 0;
    flex: 1;
}

.heritage-curriculum-copy strong {
    display: block;
    color: #16311f;
    font-size: 1.05rem;
}

.heritage-curriculum-copy span {
    display: block;
    margin-top: 4px;
    color: #69645c;
    font-size: 0.94rem;
    line-height: 1.5;
}

.heritage-curriculum-item em {
    font-style: normal;
    color: #6d5808;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    flex-shrink: 0;
}

.heritage-side-column {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 16px;
}

.heritage-archive-side {
    padding: 28px;
    background: #f5f1ea;
}

.heritage-section-head--side {
    margin-bottom: 18px;
}

.heritage-archive-links {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.heritage-archive-links a {
    text-decoration: none;
    color: inherit;
}

.heritage-archive-links b {
    display: block;
    margin-bottom: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #8b6f12;
}

.heritage-archive-links strong {
    display: block;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.3rem;
    line-height: 1.24;
    color: #15311f;
}

.heritage-archive-links span {
    display: block;
    margin-top: 8px;
    font-size: 0.93rem;
    color: #6b665d;
    line-height: 1.7;
}

.heritage-focus-card {
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 34px 36px;
    position: relative;
    overflow: hidden;
}

.heritage-focus-card::after {
    content: "";
    position: absolute;
    right: -80px;
    top: -90px;
    width: 240px;
    height: 240px;
    border-radius: 999px;
    background: #f2eee7;
}

.heritage-focus-meter,
.heritage-focus-copy {
    position: relative;
    z-index: 1;
}

.heritage-focus-meter {
    flex-shrink: 0;
}

.heritage-focus-ring {
    width: 182px;
    height: 182px;
    border-radius: 999px;
    border: 12px solid #e6e0d3;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    box-shadow: inset 0 0 0 12px #fff;
}

.heritage-focus-ring strong {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 2.7rem;
    line-height: 1;
    color: #15311f;
}

.heritage-focus-ring span {
    margin-top: 6px;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #7a756c;
}

.heritage-focus-copy {
    flex: 1;
    min-width: 0;
}

.heritage-focus-kicker {
    margin: 0 0 10px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #8d6f13;
}

.heritage-focus-copy h2 {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.4rem, 3vw, 3.6rem);
    line-height: 1.04;
    color: #16311f;
}

.heritage-focus-copy p:nth-of-type(2) {
    margin: 14px 0 0;
    color: #5e594f;
    font-size: 1.05rem;
}

.heritage-focus-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 24px;
    flex-wrap: wrap;
}

.heritage-focus-btn {
    padding: 14px 22px;
    border-radius: 8px;
    border: 1px solid #d9d2c6;
    background: #f3efe8;
    color: #17311f;
    font: inherit;
    font-weight: 700;
}

.heritage-focus-btn--primary {
    border-color: #b33726;
    background: #b33726;
    color: #fff;
}

.heritage-focus-note {
    color: #6a645b;
    font-size: 0.92rem;
}

@media (max-width: 1180px) {
    .heritage-grid {
        grid-template-columns: 1fr;
    }

    .heritage-side-column {
        margin-top: 0;
    }

    .heritage-welcome {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
    }

    .heritage-welcome-stats {
        width: calc(100% - 32px);
        min-width: 0;
        max-width: 620px;
        margin-left: auto;
        margin-right: auto;
        flex: none;
        align-self: stretch;
    }

    .heritage-szia-card,
    .heritage-calendar-card {
        width: 100%;
        max-width: none;
        margin-left: auto;
        margin-right: auto;
    }

    .heritage-welcome-copy {
        width: calc(100% - 32px);
        max-width: 768px;
        min-height: 300px;
        padding: 28px 24px;
        background-position: center center;
    }
}

@media (max-width: 900px) {
    .heritage-topbar,
    .heritage-welcome {
        flex-direction: column;
        align-items: flex-start;
    }

    .heritage-welcome {
        gap: 16px;
    }

    .heritage-welcome-copy {
        width: calc(100% - 24px);
        max-width: 620px;
        min-height: 260px;
        padding: 24px 20px;
        border-radius: 28px;
        background-position: center center;
    }

    .heritage-search {
        width: 100%;
        min-width: 0;
    }

    .heritage-metrics {
        grid-template-columns: 1fr;
    }

    .heritage-focus-card {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Unified sidebar rules for home and standalone pages. */
.dashboard-shell,
.dashboard-shell.dashboard-shell--content {
    display: grid;
    grid-template-columns: 236px minmax(0, 1fr);
    min-height: 100vh;
    background: #fbf9f4;
    align-items: start;
}

.dashboard-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    background: #f4f1ea;
    border-right: 1px solid #e4ddd0;
    overflow-x: hidden;
}

.dashboard-sidebar-card {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 30px 0 28px;
    box-sizing: border-box;
    background: transparent;
    border: none;
    box-shadow: none;
}

.dashboard-main {
    min-width: 0;
    background: #fbf9f4;
    padding: 24px 36px 52px;
}

.dashboard-brand,
.dashboard-nav,
.dashboard-nav-item,
.dashboard-start-btn {
    box-sizing: border-box;
}

.dashboard-brand {
    display: block;
    width: 100%;
    padding: 0 20px 14px;
    overflow: hidden;
    border: none;
    background: transparent;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

.dashboard-brand strong {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.1;
    color: #15311f;
}

.dashboard-brand .site-logo,
.dashboard-brand .site-logo--sidebar {
    display: block;
    width: 100%;
    max-width: 158px;
    height: auto;
    margin: 0 auto;
    object-fit: contain;
    mix-blend-mode: multiply;
    border-radius: 12px;
}

@supports not (mix-blend-mode: multiply) {
    .dashboard-brand .site-logo,
    .dashboard-brand .site-logo--sidebar {
        background: #f4f1ea;
    }
}

.dashboard-nav {
    width: 100%;
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0;
}

.dashboard-nav-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 11px 22px 11px 24px;
    gap: 10px;
    border: none;
    border-left: 3px solid transparent;
    border-radius: 0;
    background: transparent;
    color: #4e4d48;
    font-size: 1.04rem;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
    cursor: pointer;
}

.dashboard-nav-icon {
    width: 1.25em;
    min-width: 1.25em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    line-height: 1;
}

.dashboard-nav-item span:last-child {
    letter-spacing: 0;
}

.dashboard-nav-item:hover {
    background: rgba(56, 104, 76, 0.045);
    color: #16311f;
}

.dashboard-nav-item.is-primary {
    color: #16311f;
    font-weight: 700;
    border-left-color: #b89834;
    background: rgba(56, 104, 76, 0.065);
}

.dashboard-nav-item.is-primary::after {
    display: none;
}

.dashboard-start-btn {
    margin: 26px 22px 0;
    width: auto;
    font-size: 1.28rem;
    font-weight: 800;
}

@media (max-width: 900px) {
    .dashboard-shell,
    .dashboard-shell.dashboard-shell--content {
        grid-template-columns: 1fr;
    }

    .dashboard-sidebar {
        position: static;
        height: auto;
        border-right: none;
        border-bottom: 1px solid #e4ddd0;
    }

    .dashboard-sidebar-card {
        min-height: 0;
    }

    .dashboard-main {
        padding: 20px 18px 36px;
    }
}

/* Homepage final layout overrides
   Keep the shared left sidebar unchanged while normalizing the content area. */
.home-app .dashboard-shell {
    width: 100%;
    max-width: 1540px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    grid-template-columns: 236px minmax(0, 1fr);
}

.home-app .dashboard-main {
    min-width: 0;
    padding: 28px 28px 56px;
}

.home-app .dashboard-sidebar {
    background: #f2ede3;
    border-right: 1px solid #e1d8ca;
}

.home-app .dashboard-sidebar-card {
    padding: 18px 10px 24px;
    background: #f2ede3;
}

.home-app .dashboard-brand {
    padding: 8px 10px 14px;
    margin-bottom: 10px;
    border: none;
    outline: none;
    background: transparent;
    border-radius: 16px;
}

.home-app .dashboard-brand:focus,
.home-app .dashboard-brand:focus-visible {
    outline: none;
    box-shadow: none;
}

.home-app .dashboard-brand .site-logo,
.home-app .dashboard-brand .site-logo--sidebar {
    max-width: 230px;
}

.home-app .dashboard-nav {
    margin-top: 0;
    gap: 4px;
}

.home-app .dashboard-nav-item {
    margin: 0 8px;
    padding: 11px 14px;
    border-left: 3px solid transparent;
    border-radius: 14px;
    font-size: 1.02rem;
    font-weight: 600;
    color: #554d43;
}

.home-app .dashboard-nav-item:hover {
    background: #f7f1e7;
    color: #2c3d31;
}

.home-app .dashboard-nav-item.is-primary {
    border-left-color: #b89246;
    background: #fbf5eb;
    color: #2b392e;
}

.home-app .dashboard-nav-icon {
    opacity: 0.75;
}

.home-app .dashboard-nav-item.is-primary .dashboard-nav-icon {
    opacity: 1;
}

.home-app .dashboard-panel {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
}

.home-app #assistant-panel.dashboard-panel {
    width: 100%;
    max-width: none;
    margin: 0;
}

.home-app #dashboard-panel .heritage-home,
.home-app #scene-panel .library-shell,
.home-app #vocab-panel .home-vocab-lab,
.home-app #community-panel .home-community {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
}

.home-app #community-panel .home-community-hero {
    padding-top: 34px;
}

.home-app #community-panel .home-community-layout {
    grid-template-columns: minmax(0, 1.42fr) minmax(300px, 0.82fr);
}

.home-app #community-panel .home-community-side {
    width: 100%;
    max-width: 540px;
    justify-self: end;
    padding-top: 18px;
}

.home-app #scene-panel .library-copy {
    max-width: 900px;
}

.home-app #scene-panel .library-feature-copy {
    max-width: 620px;
}

.home-app #vocab-panel .home-vocab-copy,
.home-app #community-panel .home-community-hero p,
.home-app #assistant-panel .ai-atelier {
    max-width: none;
}

.home-app #scene-panel.dashboard-panel,
.home-app #vocab-panel.dashboard-panel {
    max-width: 1360px;
}

.home-app #vocab-panel .home-vocab-topbar {
    align-items: flex-start;
}

.home-app #vocab-panel .home-vocab-tools {
    display: none;
}

.home-app #vocab-panel .home-vocab-hero-grid {
    grid-template-columns: minmax(0, 1.85fr) minmax(320px, 0.82fr);
}

.home-app #assistant-panel .ai-atelier {
    width: 100%;
    max-width: none;
    margin: 0;
}

.home-app #assistant-panel .ai-atelier-header {
    padding-top: 48px;
}

.home-app #assistant-panel .ai-atelier-grid {
    grid-template-columns: minmax(440px, 0.9fr) minmax(680px, 1.1fr);
    gap: 40px;
}

.home-app #assistant-panel .ai-atelier-title,
.home-app #scene-panel .library-title,
.home-app #vocab-panel .home-vocab-title,
.home-app #community-panel .home-community-hero h2 {
    font-family: "Newsreader", Georgia, "Times New Roman", serif;
    line-height: 1.02;
    letter-spacing: -0.04em;
}

.home-app #assistant-panel .btn-primary,
.home-app #scene-panel .library-cta,
.home-app #vocab-panel .home-vocab-hero-actions a:first-child,
.home-app #community-panel .home-community-compose button {
    border-radius: 12px;
}

@media (max-width: 1200px) {
    .home-app #assistant-panel .ai-atelier-grid {
        grid-template-columns: 1fr;
    }
}

.mobile-home-topbar,
.mobile-home-bottomnav,
.mobile-home-menu,
.mobile-home-menu-backdrop,
.mobile-home-ai-tray,
.mobile-home-ai-tray-backdrop {
    display: none;
}

.mobile-home-dashboard {
    display: none;
}

@media (max-width: 900px) {
    .mobile-home-topbar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 90;
        height: 64px;
        padding: 0 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: rgba(251, 249, 244, 0.92);
        backdrop-filter: blur(18px);
        border-bottom: 1px solid #e7e0d4;
    }

    .mobile-home-topbar-brand {
        display: flex;
        align-items: center;
        min-width: 0;
        justify-content: center;
        flex: 1;
    }

    .mobile-home-topbar-brand .site-logo {
        width: min(100%, 180px);
    }

    .mobile-home-topbar-brand strong {
        font-family: Georgia, "Times New Roman", serif;
        font-size: 1.05rem;
        color: #15311f;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mobile-home-topbar-btn {
        width: 42px;
        height: 42px;
        border: none;
        border-radius: 999px;
        background: #f0ece4;
        color: #16311f;
        font: inherit;
        font-size: 1.08rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        flex-shrink: 0;
    }

    .mobile-home-menu-backdrop {
        position: fixed;
        inset: 0;
        z-index: 94;
        background: rgba(20, 28, 23, 0.36);
    }

    .mobile-home-menu {
        position: fixed;
        top: 12px;
        left: 12px;
        right: 12px;
        z-index: 95;
        border-radius: 24px;
        background: #fbf9f4;
        border: 1px solid #e6dfd2;
        box-shadow: 0 24px 50px rgba(17, 33, 24, 0.18);
        padding: 16px;
    }

    .mobile-home-menu-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 14px;
    }

    .mobile-home-menu-head strong {
        font-family: Georgia, "Times New Roman", serif;
        font-size: 1.08rem;
        color: #15311f;
    }

    .mobile-home-menu-close {
        width: 38px;
        height: 38px;
        border: none;
        border-radius: 999px;
        background: #f0ece4;
        color: #15311f;
        font: inherit;
        cursor: pointer;
    }

    .mobile-home-menu-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .mobile-home-menu-item {
        border: 1px solid #e6dfd2;
        border-radius: 14px;
        background: #fff;
        color: #4e4d48;
        padding: 12px 14px;
        text-align: left;
        font: inherit;
        font-size: 0.92rem;
        font-weight: 600;
        cursor: pointer;
    }

    .mobile-home-menu-item.is-primary {
        background: rgba(56, 104, 76, 0.08);
        border-color: #d9cfbf;
        color: #16311f;
    }

    .mobile-home-ai-tray-backdrop {
        position: fixed;
        inset: 0;
        z-index: 92;
        background: rgba(20, 28, 23, 0.28);
    }

    .mobile-home-ai-tray {
        position: fixed;
        left: 16px;
        right: 16px;
        bottom: calc(82px + env(safe-area-inset-bottom));
        z-index: 93;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 10px;
        padding: 14px;
        border-radius: 28px;
        background: rgba(251, 249, 244, 0.97);
        border: 1px solid #e6dfd2;
        box-shadow: 0 20px 44px rgba(21, 49, 31, 0.18);
    }

    .mobile-home-ai-tray-item {
        border: none;
        border-radius: 18px;
        background: #fff;
        color: #16311f;
        padding: 14px 8px 12px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        font: inherit;
        cursor: pointer;
        box-shadow: 0 10px 18px rgba(21, 49, 31, 0.06);
    }

    .mobile-home-ai-tray-item span {
        font-size: 1.28rem;
        line-height: 1;
    }

    .mobile-home-ai-tray-item em {
        font-style: normal;
        font-size: 0.64rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    .mobile-home-bottomnav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 90;
        display: flex;
        align-items: flex-end;
        justify-content: space-around;
        gap: 4px;
        min-height: 78px;
        padding: 8px 10px max(10px, env(safe-area-inset-bottom));
        background: rgba(251, 249, 244, 0.94);
        backdrop-filter: blur(18px);
        border-top: 1px solid #e7e0d4;
        box-shadow: 0 -10px 30px rgba(21, 49, 31, 0.08);
    }

    .mobile-home-nav-item {
        border: none;
        background: transparent;
        color: rgba(21, 49, 31, 0.56);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        min-width: 56px;
        font: inherit;
        cursor: pointer;
        padding: 2px 4px;
    }

    .mobile-home-nav-item span {
        font-size: 1.15rem;
        line-height: 1;
    }

    .mobile-home-nav-item em {
        font-style: normal;
        font-size: 0.62rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .mobile-home-nav-item.is-primary {
        color: #ab3428;
    }

    .mobile-home-nav-item:disabled,
    .mobile-home-nav-item--disabled {
        color: rgba(21, 49, 31, 0.34);
        cursor: default;
        opacity: 0.7;
    }

    .mobile-home-nav-item--ai {
        transform: translateY(-12px);
    }

    .mobile-home-nav-item--ai span {
        width: 52px;
        height: 52px;
        border-radius: 999px;
        background: #123d2d;
        color: #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 12px 24px rgba(18, 61, 45, 0.2);
    }

    .mobile-home-nav-item--ai.is-open span {
        background: #ab3428;
        box-shadow: 0 14px 28px rgba(171, 52, 40, 0.22);
    }

    .home-app .dashboard-shell {
        max-width: none;
        grid-template-columns: 1fr;
    }

    .home-app .dashboard-sidebar {
        display: none;
    }

    .home-app .dashboard-main {
        padding: 82px 16px 112px;
    }

    .home-app .dashboard-panel {
        max-width: none;
        margin: 0;
    }

    .home-app #dashboard-panel > .heritage-home {
        display: none;
    }

    .mobile-home-dashboard {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .mobile-home-continue,
    .mobile-home-ai-card,
    .mobile-home-entry-group,
    .mobile-home-daily-card,
    .mobile-home-stat-card {
        border: 1px solid #e2ddd2;
        background: #f5f3ee;
        box-shadow: 0 10px 24px rgba(18, 26, 21, 0.05);
    }

    .mobile-home-continue {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        border-radius: 24px;
        padding: 16px 18px;
    }

    .mobile-home-continue-copy p,
    .mobile-home-section-head p,
    .mobile-home-video-copy p,
    .mobile-home-daily-copy p,
    .mobile-home-stat-card p {
        margin: 0 0 6px;
        color: #7a746a;
        font-size: 0.72rem;
        font-weight: 800;
        letter-spacing: 0.14em;
        text-transform: uppercase;
    }

    .mobile-home-continue-copy strong,
    .mobile-home-section-head h2,
    .mobile-home-video-copy h2,
    .mobile-home-daily-copy h2 {
        margin: 0;
        color: #16311f;
        font-family: Georgia, "Times New Roman", serif;
        letter-spacing: -0.03em;
    }

    .mobile-home-continue-copy strong {
        font-size: 1.05rem;
        line-height: 1.35;
    }

    .mobile-home-chip-btn,
    .mobile-home-primary-btn,
    .mobile-home-daily-btn {
        border: none;
        border-radius: 999px;
        cursor: pointer;
        font: inherit;
        font-weight: 700;
        transition: transform 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
    }

    .mobile-home-chip-btn:active,
    .mobile-home-primary-btn:active,
    .mobile-home-daily-btn:active,
    .mobile-home-entry-card:active,
    .mobile-home-video-card:active {
        transform: scale(0.98);
    }

    .mobile-home-chip-btn {
        padding: 10px 16px;
        background: #ffffff;
        color: #16311f;
        box-shadow: 0 6px 16px rgba(18, 26, 21, 0.05);
    }

    .mobile-home-chip-btn--primary,
    .mobile-home-primary-btn,
    .mobile-home-daily-btn {
        background: #851c14;
        color: #fff;
    }

    .mobile-home-primary-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 48px;
        padding: 0 22px;
        text-decoration: none;
        box-shadow: 0 12px 24px rgba(133, 28, 20, 0.22);
    }

    .mobile-home-primary-btn--block {
        width: 100%;
    }

    .mobile-home-hero-card {
        position: relative;
        overflow: hidden;
        min-height: 240px;
        padding: 24px 22px;
        border-radius: 32px;
        background:
            linear-gradient(180deg, rgba(35, 90, 83, 0.08), rgba(35, 90, 83, 0.72)),
            url("../assets/home/1f4c5ace-fec3-4b9c-991a-0fa9f24f988d.jpg") center/cover no-repeat;
        box-shadow: 0 24px 42px rgba(17, 33, 24, 0.12);
        display: flex;
        align-items: flex-end;
    }

    .mobile-home-hero-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(35, 90, 83, 0.08), rgba(35, 90, 83, 0.84));
    }

    .mobile-home-hero-copy {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        gap: 12px;
        max-width: 250px;
    }

    .mobile-home-kicker {
        margin: 0;
        color: rgba(255, 249, 240, 0.84);
        font-size: 0.74rem;
        font-weight: 700;
        letter-spacing: 0.16em;
        text-transform: uppercase;
    }

    .mobile-home-hero-copy h1 {
        margin: 0;
        color: #fff8ee;
        font-family: Georgia, "Times New Roman", serif;
        font-size: clamp(2.45rem, 12vw, 3.4rem);
        line-height: 0.98;
        letter-spacing: -0.05em;
    }

    .mobile-home-hero-copy p:last-of-type {
        margin: 0;
        color: rgba(255, 249, 240, 0.9);
        font-size: 0.95rem;
        line-height: 1.7;
    }

    .mobile-home-stats-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .mobile-home-stat-card {
        border-radius: 24px;
        padding: 18px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        background: #f5f3ee;
    }

    .mobile-home-stat-card--soft {
        background: #d9e7dc;
    }

    .mobile-home-stat-card strong {
        display: block;
        color: #16311f;
        font-family: Georgia, "Times New Roman", serif;
        font-size: 1.9rem;
        line-height: 1.05;
    }

    .mobile-home-stat-card span:last-child {
        font-size: 1.4rem;
    }

    .mobile-home-ai-card,
    .mobile-home-entry-group,
    .mobile-home-daily-card {
        border-radius: 28px;
        padding: 22px 18px;
    }

    .mobile-home-section-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 16px;
    }

    .mobile-home-section-head h2,
    .mobile-home-video-copy h2 {
        font-size: 2rem;
        line-height: 1.02;
    }

    .mobile-home-section-head span {
        color: #7a746a;
        font-size: 0.82rem;
        line-height: 1.45;
        text-align: right;
    }

    .mobile-home-ai-tabs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        padding: 4px;
        border-radius: 999px;
        background: #ece8e1;
    }

    .mobile-home-ai-tab {
        min-height: 42px;
        border: none;
        border-radius: 999px;
        background: transparent;
        color: #5e594f;
        font: inherit;
        font-weight: 700;
        cursor: pointer;
    }

    .mobile-home-ai-tab.is-active {
        background: #fff;
        color: #16311f;
        box-shadow: 0 8px 18px rgba(17, 33, 24, 0.06);
    }

    .mobile-home-ai-pane {
        margin-top: 14px;
    }

    .mobile-home-upload-box {
        border: 1px dashed #d4cfc4;
        border-radius: 24px;
        background: #fff;
        padding: 24px 18px;
        text-align: center;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .mobile-home-upload-icon {
        font-size: 1.9rem;
    }

    .mobile-home-upload-box strong {
        color: #16311f;
        font-size: 1.08rem;
    }

    .mobile-home-upload-box p,
    .mobile-home-ai-note {
        margin: 0;
        color: #6f6a60;
        font-size: 0.92rem;
        line-height: 1.6;
    }

    .mobile-home-ai-textarea {
        width: 100%;
        box-sizing: border-box;
        margin-top: 12px;
        min-height: 132px;
        padding: 16px;
        border: 1px solid #ddd7cb;
        border-radius: 22px;
        background: #fff;
        color: #16311f;
        font: inherit;
        line-height: 1.7;
        resize: vertical;
    }

    .mobile-home-ai-examples {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin: 12px 0 14px;
    }

    .mobile-home-example-chip {
        border: 1px solid #ddd7cb;
        border-radius: 999px;
        background: #fff;
        color: #5e594f;
        padding: 8px 12px;
        font: inherit;
        font-size: 0.82rem;
        font-weight: 700;
        cursor: pointer;
    }

    .mobile-home-video-card {
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 14px;
        border-radius: 28px;
        padding: 22px 18px;
        text-decoration: none;
        background: #f5f3ee;
        border: 1px solid #dfbfbb;
        color: #16311f;
        box-shadow: 0 10px 24px rgba(18, 26, 21, 0.05);
    }

    .mobile-home-video-copy span {
        display: block;
        margin-top: 10px;
        color: #6f6a60;
        font-size: 0.92rem;
        line-height: 1.6;
    }

    .mobile-home-video-card strong {
        flex-shrink: 0;
        color: #851c14;
        font-size: 0.9rem;
    }

    .mobile-home-entry-list {
        display: grid;
        gap: 12px;
    }

    .mobile-home-entry-card {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        border-radius: 22px;
        padding: 18px 16px;
        background: #fff;
        border: 1px solid #e0dad0;
        text-decoration: none;
        color: #16311f;
        box-shadow: 0 10px 20px rgba(18, 26, 21, 0.04);
        transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
    }

    .mobile-home-entry-card--starter {
        background: #eef7f1;
        border-color: #cfe3d5;
    }

    .mobile-home-entry-card em {
        display: inline-flex;
        margin-bottom: 8px;
        padding: 4px 10px;
        border-radius: 999px;
        background: rgba(35, 90, 83, 0.08);
        color: #235a53;
        font-size: 0.72rem;
        font-style: normal;
        font-weight: 700;
    }

    .mobile-home-entry-card strong {
        display: block;
        font-size: 1.08rem;
        line-height: 1.35;
    }

    .mobile-home-entry-card span {
        display: block;
        margin-top: 6px;
        color: #6f6a60;
        font-size: 0.9rem;
        line-height: 1.6;
    }

    .mobile-home-entry-card b {
        flex-shrink: 0;
        color: #851c14;
        font-size: 0.82rem;
        letter-spacing: 0.02em;
    }

    .mobile-home-daily-card {
        position: relative;
        overflow: hidden;
        display: flex;
        gap: 18px;
        align-items: center;
    }

    .mobile-home-daily-card::after {
        content: "";
        position: absolute;
        top: -32px;
        right: -26px;
        width: 108px;
        height: 108px;
        border-radius: 999px;
        background: rgba(216, 211, 201, 0.68);
    }

    .mobile-home-daily-ring,
    .mobile-home-daily-copy {
        position: relative;
        z-index: 1;
    }

    .mobile-home-daily-ring {
        width: 96px;
        height: 96px;
        border-radius: 999px;
        border: 8px solid #d8d3c9;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        background: #fbf9f4;
    }

    .mobile-home-daily-ring strong {
        color: #16311f;
        font-family: Georgia, "Times New Roman", serif;
        font-size: 1.7rem;
        line-height: 1;
    }

    .mobile-home-daily-ring span {
        margin-top: 4px;
        color: #7a746a;
        font-size: 0.68rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .mobile-home-daily-copy {
        min-width: 0;
    }

    .mobile-home-daily-copy h2 {
        font-size: clamp(2rem, 10vw, 2.8rem);
        line-height: 0.98;
        margin-bottom: 10px;
    }

    .mobile-home-daily-copy strong {
        display: block;
        color: #3f413d;
        font-size: 1rem;
        line-height: 1.6;
    }

    .mobile-home-daily-actions {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
        margin-top: 14px;
    }

    .mobile-home-daily-btn {
        min-height: 46px;
        padding: 0 16px;
    }

    .mobile-home-daily-actions span {
        color: #6f6a60;
        font-size: 0.88rem;
    }

    .heritage-home {
        gap: 22px;
    }

    .heritage-welcome {
        gap: 18px;
    }

    .heritage-welcome-copy {
        width: 100%;
        max-width: none;
        min-height: 370px;
        padding: 112px 22px 24px;
        border-radius: 34px;
        background-position: 68% center;
    }

    .heritage-date {
        font-size: 0.74rem;
        letter-spacing: 0.16em;
    }

    .heritage-welcome-copy h1 {
        font-size: clamp(2.65rem, 14vw, 4rem);
        line-height: 0.96;
    }

    .heritage-heading-bottom {
        white-space: normal;
    }

    .heritage-welcome-copy p:last-child {
        max-width: none;
        font-size: 0.98rem;
        line-height: 1.72;
    }

    .heritage-welcome-stats {
        width: calc(100% - 24px);
        max-width: 620px;
        min-width: 0;
        margin-top: 0;
        margin-left: auto;
        margin-right: auto;
        gap: 14px;
        align-self: stretch;
    }

    .heritage-szia-card {
        min-height: 0;
        border-radius: 24px;
        padding: 22px 18px;
        width: 100%;
        max-width: none;
        margin-left: auto;
        margin-right: auto;
    }

    .heritage-calendar-card {
        width: 100%;
        max-width: none;
        margin-left: auto;
        margin-right: auto;
        border-radius: 24px;
    }

    .heritage-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .heritage-metrics {
        margin-bottom: 0;
        gap: 14px;
    }

    .heritage-metric-card,
    .heritage-curriculum-card,
    .heritage-archive-side,
    .heritage-focus-card {
        border-radius: 28px;
    }

    .heritage-metric-card {
        min-height: 0;
        padding: 20px 18px;
    }

    .heritage-metric-card p:first-child {
        margin-bottom: 18px;
    }

    .heritage-curriculum-card,
    .heritage-archive-side {
        padding: 24px 20px;
    }

    .heritage-section-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .heritage-section-head h2 {
        font-size: 1.95rem;
    }

    .heritage-curriculum-item {
        align-items: flex-start;
    }

    .heritage-curriculum-item em {
        margin-left: auto;
    }

    .heritage-archive-links {
        gap: 18px;
    }

    .heritage-focus-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 22px;
        padding: 28px 22px;
    }

    .heritage-focus-card::after {
        width: 180px;
        height: 180px;
        right: -60px;
        top: -70px;
    }

    .heritage-focus-ring {
        width: 144px;
        height: 144px;
    }

    .heritage-focus-copy h2 {
        font-size: clamp(2.2rem, 11vw, 3.2rem);
    }

    .heritage-focus-actions {
        width: 100%;
    }

    .heritage-focus-btn--primary {
        width: 100%;
        text-align: center;
    }

    .home-app #assistant-panel .ai-atelier-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .home-app #assistant-panel .ai-atelier {
        gap: 20px;
    }

    .home-app #assistant-panel .ai-atelier-header {
        padding-top: 0;
        margin-bottom: 4px;
    }

    .home-app #assistant-panel .ai-atelier-section-head {
        margin-bottom: 2px;
    }

    .home-app #assistant-panel .ai-atelier-section-head h3 {
        font-size: 2rem;
    }

    .home-app #assistant-panel .ai-atelier-section-head span {
        font-size: 0.68rem;
        letter-spacing: 0.16em;
    }

    .home-app #assistant-panel .ai-atelier-workspace,
    .home-app #assistant-panel .ai-atelier-results {
        gap: 18px;
    }

    .home-app #assistant-panel .ai-atelier-tabs {
        padding: 4px;
        border-radius: 999px;
        background: #f0eee9;
        border: 1px solid rgba(192, 200, 194, 0.65);
    }

    .home-app #assistant-panel .ai-atelier-tabs .ai-mode-tab {
        min-height: 46px;
        border-radius: 999px;
        font-size: 0.92rem;
        font-weight: 700;
    }

    .home-app #assistant-panel .ai-atelier-input-wrap {
        border-radius: 20px;
        box-shadow: 0 16px 28px rgba(27, 28, 25, 0.05);
    }

    .home-app #assistant-panel #assist-input {
        min-height: 220px;
        padding: 18px 18px 76px;
        font-size: 1rem;
        line-height: 1.8;
    }

    .home-app #assistant-panel .ai-atelier-input-meta {
        align-items: center;
        padding: 0 16px 16px;
    }

    .home-app #assistant-panel .ai-atelier-input-meta span {
        display: none;
    }

    .home-app #assistant-panel .ai-atelier-input-meta .btn-primary {
        margin-left: auto;
        width: auto;
        padding: 11px 18px;
        border-radius: 999px;
        font-size: 0.92rem;
        box-shadow: 0 12px 24px rgba(176, 45, 33, 0.16);
    }

    .home-app #assistant-panel .ai-mobile-visual {
        display: block;
        position: relative;
        overflow: hidden;
        height: 132px;
        border-radius: 24px;
        margin-top: 2px;
    }

    .home-app #assistant-panel .ai-mobile-visual img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: grayscale(1);
        opacity: 0.48;
    }

    .home-app #assistant-panel .ai-mobile-visual-overlay {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 8px;
        padding: 18px 20px;
        background: linear-gradient(90deg, rgba(0,35,24,0.18), rgba(0,35,24,0.02));
    }

    .home-app #assistant-panel .ai-mobile-visual-overlay span {
        color: rgba(0, 35, 24, 0.62);
        font-size: 0.7rem;
        font-weight: 800;
        letter-spacing: 0.14em;
        text-transform: uppercase;
    }

    .home-app #assistant-panel .ai-mobile-visual-overlay strong {
        color: #123d2d;
        font-family: Georgia, "Times New Roman", serif;
        font-size: 1.18rem;
        font-style: italic;
        line-height: 1.35;
    }

    .home-app #assistant-panel .ai-atelier-results {
        padding: 22px 18px;
        background: #f5f3ee;
    }

    .home-app #assistant-panel .ai-atelier-results::after,
    .home-app #assistant-panel .ai-atelier-results::before {
        display: none;
    }

    .home-app #assistant-panel .ai-atelier-results-head {
        align-items: center;
        padding-bottom: 10px;
        border-bottom: 1px solid rgba(113, 121, 116, 0.16);
    }

    .home-app #assistant-panel .ai-atelier-results-head h3 {
        font-size: 1.55rem;
    }

    .home-app #assistant-panel .ai-atelier-result-actions button {
        width: 36px;
        height: 36px;
        border-radius: 12px;
        background: #fff;
        border: 1px solid rgba(192, 200, 194, 0.5);
    }

    .home-app #assistant-panel .ai-atelier-result-tabs {
        margin-bottom: 8px;
    }

    .home-app #assistant-panel .ai-result-tab {
        border-radius: 999px;
        padding: 10px 14px;
        font-size: 0.9rem;
    }

    .home-app #assistant-panel .ai-result-panel .ai-result-block {
        min-height: 0;
    }

    .home-app #assistant-panel .ai-atelier-placeholder {
        gap: 20px;
    }

    .home-app #assistant-panel .ai-atelier-block label,
    .home-app #assistant-panel .ai-sub-kicker {
        margin-bottom: 10px;
        font-size: 0.64rem;
        letter-spacing: 0.16em;
    }

    .home-app #assistant-panel .ai-atelier-grammar-list {
        gap: 12px;
    }

    .home-app #assistant-panel .ai-atelier-grammar-list div {
        display: block;
        padding: 14px 16px;
        border: none;
        border-radius: 18px;
        background: #fff;
    }

    .home-app #assistant-panel .ai-atelier-grammar-list strong {
        display: block;
        min-width: 0;
        margin-bottom: 6px;
        font-size: 0.98rem;
    }

    .home-app #assistant-panel .ai-atelier-grammar-list p {
        font-size: 0.92rem;
        line-height: 1.7;
    }

    .home-app #assistant-panel .ai-atelier-note {
        padding: 18px 18px 16px;
        border-radius: 20px;
        background: #f5e0bd;
    }

    .home-app #assistant-panel .ai-atelier-note p {
        font-style: normal;
    }

    .home-app #assistant-panel .ai-atelier-scene {
        margin-top: 2px;
        padding-top: 20px;
    }

    .home-app #assistant-panel .ai-atelier-subhead h3 {
        font-size: 1.4rem;
    }

    .home-app #assistant-panel .ai-atelier-scene-tags {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .home-app #assistant-panel .ai-atelier-scene-tags .ai-scene-tile {
        min-height: 62px;
        border-radius: 18px;
        padding: 14px 10px;
        text-align: center;
        font-size: 0.86rem;
        background: #eae8e3;
    }

    .home-app #assistant-panel .ai-atelier-dialog-custom {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 6px;
        padding: 12px 14px;
        border-radius: 18px;
        background: #f0eee9;
    }

    .home-app #assistant-panel .ai-atelier-dialog-custom input {
        padding: 0;
        border: none;
        background: transparent;
        font-size: 0.92rem;
    }

    .home-app #assistant-panel .ai-atelier-dialog-custom .btn-primary {
        width: 40px;
        min-width: 40px;
        height: 40px;
        padding: 0;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 0;
    }

    .home-app #assistant-panel .ai-atelier-dialog-custom .btn-primary::before {
        content: "→";
        font-size: 1.05rem;
        line-height: 1;
    }

    .home-app #assistant-panel .ai-atelier-dialog-custom .btn-primary span {
        display: none;
    }

    .home-app #assistant-panel .ai-atelier-title,
    .home-app #scene-panel .library-title,
    .home-app #vocab-panel .home-vocab-title,
    .home-app #community-panel .home-community-hero h2 {
        font-size: clamp(2.35rem, 12vw, 3.5rem);
        line-height: 0.96;
    }

    .home-app #assistant-panel .ai-atelier-title em,
    .home-app #scene-panel .library-title em,
    .home-app #vocab-panel .home-vocab-title em {
        display: block;
        margin-top: 4px;
        font-size: 0.78em;
    }

    .home-app #assistant-panel .ai-atelier-results,
    .home-app #assistant-panel .ai-atelier-workspace,
    .home-app #scene-panel .library-feature,
    .home-app #vocab-panel .home-vocab-hero,
    .home-app #community-panel .home-community-sidecard,
    .home-app #community-panel .home-community-sideblock {
        border-radius: 28px;
    }

    .home-app #vocab-panel .home-vocab-hero-grid,
    .home-app #community-panel .home-community-layout {
        grid-template-columns: 1fr;
    }

    .home-app #community-panel .home-community {
        max-width: none;
        margin: 0;
    }

    .home-app #community-panel .home-community-main {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .home-app #community-panel .home-community-hero {
        display: none;
    }

    .home-app #community-panel .home-community-quicknav {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        padding-bottom: 2px;
        scrollbar-width: none;
    }

    .home-app #community-panel .home-community-quickcard {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-width: auto;
        padding: 10px 16px;
        border-radius: 999px;
        box-shadow: none;
    }

    .home-app #community-panel .home-community-quickicon {
        margin-bottom: 0;
        font-size: 1.1rem;
    }

    .home-app #community-panel .home-community-quickcard strong {
        margin: 0;
        font-size: 0.92rem;
    }

    .home-app #community-panel .home-community-quickcard span:last-child {
        display: none;
    }

    .home-app #community-panel .home-community-formrow {
        grid-template-columns: 1fr;
    }

    .home-app #community-panel .home-community-mobile-note {
        position: relative;
        display: block;
        padding: 22px 20px;
        border-radius: 24px;
        background: #f5e0bd;
        overflow: hidden;
    }

    .home-app #community-panel .home-community-mobile-note::after {
        content: "library_books";
        position: absolute;
        right: -8px;
        bottom: -16px;
        color: rgba(39, 28, 6, 0.08);
        font-family: "Material Symbols Outlined";
        font-size: 88px;
        line-height: 1;
        font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    }

    .home-app #community-panel .home-community-mobile-notehead {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 12px;
        color: #735c00;
        font-size: 0.72rem;
        font-weight: 800;
        letter-spacing: 0.12em;
        text-transform: uppercase;
    }

    .home-app #community-panel .home-community-mobile-noteicon {
        font-size: 1rem;
    }

    .home-app #community-panel .home-community-mobile-quote,
    .home-app #community-panel .home-community-mobile-translation {
        position: relative;
        z-index: 1;
        margin: 0;
    }

    .home-app #community-panel .home-community-mobile-quote {
        margin-bottom: 6px;
        font-family: "Newsreader", Georgia, "Times New Roman", serif;
        font-size: 1.28rem;
        font-style: italic;
        color: #271c06;
    }

    .home-app #community-panel .home-community-mobile-translation {
        color: rgba(39, 28, 6, 0.76);
        line-height: 1.7;
        font-size: 0.92rem;
        font-weight: 600;
    }

    .home-app #community-panel .home-community-composer {
        padding: 22px 18px;
        border-top: none;
        border-radius: 24px;
        background: #f5f3ee;
    }

    .home-app #community-panel .home-community-blockhead {
        margin-bottom: 0;
    }

    .home-app #community-panel .home-community-blockhead h3 {
        font-size: 1.28rem;
    }

    .home-app #community-panel .home-community-field label {
        font-size: 0.68rem;
        letter-spacing: 0.12em;
    }

    .home-app #community-panel .home-community-field input,
    .home-app #community-panel .home-community-field textarea,
    .home-app #community-panel .home-community-field select {
        border-radius: 18px;
        background: #fff;
    }

    .home-app #community-panel .home-community-field textarea {
        min-height: 108px;
    }

    .home-app #community-panel .home-community-submitrow {
        flex-direction: column;
        align-items: stretch;
    }

    .home-app #community-panel .home-community-submitbtn {
        width: 100%;
        padding: 13px 18px;
        font-size: 0.94rem;
    }

    .home-app #community-panel .home-community-feed {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .home-app #community-panel .home-community-feedhead {
        padding: 0 2px;
    }

    .home-app #community-panel .home-community-feedhead h3 {
        font-size: 1.72rem;
    }

    .home-app #community-panel .home-community-tabs {
        display: none;
    }

    .home-app #community-panel .home-community-postlist {
        gap: 14px;
        margin-top: 0;
    }

    .home-app #community-panel .home-community-post {
        padding: 18px 18px 16px;
        border-radius: 24px;
        background: #eae8e3;
        box-shadow: none;
    }

    .home-app #community-panel .home-community-post--featured {
        background: #fff;
    }

    .home-app #community-panel .home-community-pin {
        top: 14px;
        right: 14px;
        border-radius: 999px;
        padding: 4px 10px;
    }

    .home-app #community-panel .home-community-postmeta {
        gap: 10px;
        margin-bottom: 10px;
        padding-right: 64px;
        font-size: 0.72rem;
    }

    .home-app #community-panel .home-community-post h4 {
        font-size: 1.18rem;
        line-height: 1.32;
    }

    .home-app #community-panel .home-community-post p {
        font-size: 0.94rem;
        line-height: 1.75;
    }

    .home-app #community-panel .home-community-postactions {
        justify-content: space-between;
        gap: 12px;
        margin-top: 14px;
        font-size: 0.78rem;
    }

    .home-app #community-panel .home-community-userfeed {
        margin-top: 4px;
    }

    .home-app #community-panel .home-community-userfeedhead {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .home-app #community-panel .home-community-userfeedhead span,
    .home-app #community-panel .home-community-more,
    .home-app #community-panel .home-community-side {
        display: none;
    }

    footer {
        padding-bottom: 96px;
    }
}

@media (max-width: 560px) {
    .mobile-home-menu-list {
        grid-template-columns: 1fr;
    }

    .mobile-home-nav-item em {
        font-size: 0.58rem;
        letter-spacing: 0.05em;
    }

    .mobile-home-stats-grid {
        grid-template-columns: 1fr;
    }

    .mobile-home-daily-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .mobile-home-section-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .heritage-metrics {
        grid-template-columns: 1fr;
    }

    .heritage-badge-row {
        flex-direction: column;
    }

    .heritage-welcome-copy {
        min-height: 340px;
        padding-top: 104px;
    }

    .heritage-curriculum-item {
        flex-wrap: wrap;
    }

    .home-app #community-panel .home-community-quicknav {
        gap: 8px;
        margin-right: -4px;
        padding-right: 4px;
    }

    .home-app #community-panel .home-community-quickcard {
        padding: 10px 14px;
    }

    .home-app #community-panel .home-community-feedhead {
        flex-direction: column;
        align-items: flex-start;
    }

    .home-app #assistant-panel .ai-atelier-scene-tags {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .home-app #assistant-panel .ai-atelier-scene-tags .ai-scene-tile {
        min-height: 58px;
        padding: 12px 6px;
        font-size: 0.78rem;
    }
}

/* Cross-page sidebar brand normalization */
:root {
    --szia-logo-max-width: 230px;
    --szia-sidebar-nav-size: 1.14rem;
    --szia-sidebar-nav-line: 1.28;
    --szia-sidebar-nav-pad-y: 12px;
    --szia-sidebar-nav-pad-x: 16px;
    --szia-sidebar-nav-pad-left: 24px;
    --szia-sidebar-nav-active-left: 20px;
    --szia-hero-title-size: clamp(2.95rem, 4.9vw, 4.7rem);
    --szia-hero-title-line: 1.02;
    --szia-hero-title-track: -0.055em;
}

.dashboard-brand,
.scene-page-brand,
.video-page-brand,
.vocab-page-brand,
.culture-brand,
.grammar-sidebar-brand,
.learn-rail-brand,
.exam-rail-brand,
.practice-rail-brand,
.culture-rail-brand,
.logo {
    display: block;
    width: 100%;
    margin: 0 0 14px;
    overflow: hidden;
    text-decoration: none;
    line-height: 1;
}

.dashboard-brand .site-logo,
.scene-page-brand .site-logo,
.video-page-brand .site-logo,
.vocab-page-brand .site-logo,
.culture-brand .site-logo,
.grammar-sidebar-brand .site-logo,
.learn-rail-brand .site-logo,
.exam-rail-brand .site-logo,
.practice-rail-brand .site-logo,
.culture-rail-brand .site-logo,
.logo img {
    display: block;
    width: var(--szia-logo-max-width);
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    object-fit: contain;
    object-position: center;
}

.dashboard-nav-item,
.scene-page-nav a,
.video-page-nav a,
.vocab-page-nav a,
.culture-nav a,
.culture-subnav a,
.grammar-sidebar-link,
.learn-rail-link,
.exam-rail-link,
.practice-rail-link {
    font-size: var(--szia-sidebar-nav-size) !important;
}

/* Homepage sidebar final lock: unified one-piece look */
.home-app .dashboard-sidebar {
    background: #f4ede1 !important;
    border-right: 1px solid #e5d8c5 !important;
}

.home-app .dashboard-sidebar-card {
    padding: 14px 8px 22px !important;
    background: #f4ede1 !important;
    gap: 0;
}

.home-app .dashboard-brand {
    margin: 0 6px 8px !important;
    padding: 6px 8px 10px !important;
    border: none !important;
    outline: none !important;
    border-radius: 12px !important;
    background: transparent !important;
    box-shadow: none !important;
}

.home-app .dashboard-brand:focus,
.home-app .dashboard-brand:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

.home-app .dashboard-brand .site-logo,
.home-app .dashboard-brand .site-logo--sidebar {
    width: 100% !important;
    max-width: var(--szia-logo-max-width) !important;
    height: auto !important;
    margin: 0 auto !important;
    object-fit: contain !important;
}

.home-app .dashboard-nav {
    margin-top: 0 !important;
    padding: 0 4px !important;
    gap: 2px !important;
}

.home-app .dashboard-nav-item {
    margin: 0 !important;
    min-height: 52px !important;
    padding: var(--szia-sidebar-nav-pad-y) 12px var(--szia-sidebar-nav-pad-y) 14px !important;
    border-left: 3px solid transparent !important;
    border-radius: 12px !important;
    background: transparent !important;
    color: #4d514c !important;
    font-size: var(--szia-sidebar-nav-size) !important;
    font-weight: 600 !important;
    line-height: var(--szia-sidebar-nav-line) !important;
}

.home-app .dashboard-nav-item:hover {
    background: rgba(28, 79, 55, 0.06) !important;
    color: #1a392a !important;
}

.home-app .dashboard-nav-item.is-primary {
    border-left-color: #1b6a51 !important;
    background: #f3f1eb !important;
    color: #173527 !important;
    box-shadow: inset 0 0 0 1px rgba(27, 106, 81, 0.08) !important;
}

.home-app .dashboard-nav-icon {
    width: 1.2em;
    min-width: 1.2em;
    font-size: 0.95rem !important;
    line-height: 1;
    opacity: 0.78;
}

.home-app .dashboard-nav-item.is-primary .dashboard-nav-icon {
    opacity: 1;
}

.home-app .dashboard-start-btn {
    margin: 14px 10px 0 !important;
}

/* Assessment Mobile Panel Styles */
.assessment-mobile-shell {
    padding: 20px;
    max-width: 1000px;
    margin: 0 auto;
}

.assessment-mobile-header {
    text-align: center;
    margin-bottom: 32px;
}

.assessment-mobile-header h2 {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 0 10px 0;
    color: #1a1410;
}

.assessment-mobile-header p {
    font-size: 1rem;
    color: #6b6055;
    margin: 0;
}

.assessment-mobile-blocks {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 32px;
}

.assessment-block {
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    border: 2px solid #e7e0d4;
    background: rgba(255, 255, 255, 0.95);
    overflow: hidden;
    transition: all 0.3s ease;
}

.assessment-block:hover {
    border-color: #d4c7b8;
    box-shadow: 0 8px 24px rgba(26, 20, 16, 0.1);
}

.assessment-block-head {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(35, 90, 83, 0.06) 0%, rgba(35, 90, 83, 0.02) 100%);
    border-bottom: 1px solid #e7e0d4;
}

.assessment-block-icon {
    font-size: 2.5rem;
    flex-shrink: 0;
}

.assessment-block-head h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 4px 0;
    color: #1a1410;
}

.assessment-block-head p {
    font-size: 0.9rem;
    color: #8a7d72;
    margin: 0;
}

.assessment-block-body {
    display: flex;
    flex-direction: column;
    padding: 20px;
    gap: 16px;
    flex: 1;
}

.assessment-block-desc {
    font-size: 0.95rem;
    color: #6b6055;
    line-height: 1.6;
    margin: 0;
}

.assessment-start-btn {
    margin-top: auto;
    padding: 14px 24px;
    background: linear-gradient(135deg, #4a9d6f 0%, #357655 100%);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
}

.assessment-start-btn:hover {
    background: linear-gradient(135deg, #357655 0%, #1f4a36 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(74, 157, 111, 0.3);
}

.assessment-start-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(74, 157, 111, 0.2);
}

/* Assessment Level Modal */
.assessment-level-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    display: flex;
    align-items: flex-end;
}

.assessment-level-modal[hidden] {
    display: none;
}

.assessment-level-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    animation: fadeIn 0.2s ease;
}

.assessment-level-modal-content {
    position: relative;
    width: 100%;
    max-width: 500px;
    max-height: 80vh;
    margin: auto;
    background: #fff;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    animation: slideUp 0.3s ease;
    z-index: 1001;
    display: flex;
    flex-direction: column;
}

.assessment-level-modal-head {
    padding: 24px 24px 16px;
    border-bottom: 1px solid #f0ebe3;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.assessment-level-modal-head h3 {
    margin: 0;
    font-size: 1.25rem;
    color: #1a1410;
}

.assessment-level-modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #8a7d72;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.assessment-level-modal-close:hover {
    color: #1a1410;
}

.assessment-level-modal-body {
    padding: 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.assessment-level-modal-text {
    margin: 0;
    color: #6b6055;
    font-size: 1rem;
}

.assessment-level-modal-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.assessment-modal-level {
    padding: 20px;
    border: 2px solid #e7e0d4;
    border-radius: 14px;
    background: #fff;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.assessment-modal-level-a1 {
    border-color: #4a9d6f;
    background: linear-gradient(135deg, rgba(74, 157, 111, 0.08) 0%, rgba(74, 157, 111, 0.04) 100%);
}

.assessment-modal-level-a1:hover {
    border-color: #2e6f48;
    background: linear-gradient(135deg, rgba(74, 157, 111, 0.15) 0%, rgba(74, 157, 111, 0.08) 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(74, 157, 111, 0.2);
}

.assessment-modal-level-a2 {
    border-color: #d4a574;
    background: linear-gradient(135deg, rgba(212, 165, 116, 0.08) 0%, rgba(212, 165, 116, 0.04) 100%);
}

.assessment-modal-level-a2:hover {
    border-color: #b8894a;
    background: linear-gradient(135deg, rgba(212, 165, 116, 0.15) 0%, rgba(212, 165, 116, 0.08) 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(212, 165, 116, 0.2);
}

.modal-level-label {
    font-weight: 600;
    font-size: 1.05rem;
    color: #1a1410;
}

.modal-level-desc {
    font-size: 0.9rem;
    color: #8a7d72;
}

@media (max-width: 768px) {
    .assessment-mobile-blocks {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .assessment-mobile-header h2 {
        font-size: 1.5rem;
    }

    .assessment-block-head {
        gap: 12px;
        padding: 16px;
    }

    .assessment-block-icon {
        font-size: 2rem;
    }

    .assessment-block-head h3 {
        font-size: 1.1rem;
    }

    .assessment-block-body {
        padding: 16px;
        gap: 12px;
    }

    .assessment-block-desc {
        font-size: 0.9rem;
    }

    .assessment-start-btn {
        padding: 12px 20px;
        font-size: 0.95rem;
    }

    .assessment-level-modal-content {
        border-radius: 16px 16px 0 0;
    }

    .assessment-level-modal-head {
        padding: 20px 20px 14px;
    }

    .assessment-level-modal-head h3 {
        font-size: 1.1rem;
    }

    .assessment-level-modal-body {
        padding: 20px;
        gap: 16px;
    }

    .assessment-modal-level {
        padding: 16px;
    }

    .modal-level-label {
        font-size: 1rem;
    }
}