/* --- Custom min-height for hello-card and time-card (2026-05-01) --- */
.hello-card,
.time-card {
    height: 220px !important;
    aspect-ratio: unset !important;
}
: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: #f8f3ea;
    margin: 0;
    padding: 0;
}

body.home-app, .home-app {
    margin: 0;
    padding: 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;
}

.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 Demo */
.assistant-demo {
    background: var(--surface-color);
    border-radius: var(--card-radius);
    padding: 30px;
    box-shadow: var(--card-shadow);
    margin-bottom: 40px;
    border: 1px solid rgba(25, 118, 210, 0.14);
    width: 100%;
    box-sizing: border-box;
}

.dashboard-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    background-color: #f5f5f5;
    box-shadow: 2px 0 8px rgba(0,0,0,0.04);
    margin-left: 16px;
    border-radius: 12px;
}

.dashboard-sidebar-card,
.dashboard-panel,
.practice-feature {
    background: var(--surface-color);
    border: 1px solid var(--soft-border-color);
    border-radius: 18px;
    box-shadow: var(--card-shadow);
}

.dashboard-sidebar-card {
    padding: 0;
    margin: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.dashboard-brand {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 0 0 22px;
    border: none;
    border-radius: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

.site-logo {
    display: block;
    width: min(100%, 260px);
    height: auto;
}

.site-logo--sidebar {
    width: calc(100% + 64px);
    max-width: none;
    margin: -28px 0 -20px -32px;
}

.site-logo--mobile {
    width: min(100%, 190px);
}

.site-logo--menu {
    width: min(100%, 220px);
}

.dashboard-brand strong {
    margin: 0;
    font-size: 1.48rem;
    line-height: 1.12;
    color: #17301f;
    letter-spacing: -0.02em;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 700;
}

.dashboard-brand span {
    color: var(--muted-text-color);
    font-size: 0.88rem;
    line-height: 1.5;
    max-width: 150px;
    display: none;
}

.dashboard-nav {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin: 14px 0 0;
}

.dashboard-nav-item {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    text-align: left;
    font: inherit;
    text-decoration: none;
    color: #444;
    background: transparent;
    border: none;
    padding: 11px 0;
    border-radius: 0;
    font-weight: 500;
    cursor: pointer;
    transition: color .2s ease, padding-left .2s ease, border-color .2s ease;
    justify-content: flex-start;
    font-size: 1.2rem;
    letter-spacing: 0.01em;
    position: relative;
}

.dashboard-nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    font-size: 1.18rem;
    flex-shrink: 0;
}

.dashboard-nav-item:hover {
    transform: none;
    box-shadow: none;
    color: #152117;
}

.dashboard-nav-item.is-primary {
    background: transparent;
    color: #152117;
    border-left: none;
    padding-left: 0;
    font-weight: 700;
}

.dashboard-nav-item.is-primary::after {
    content: "";
    position: absolute;
    top: -6px;
    bottom: -6px;
    right: -26px;
    width: 3px;
    border-radius: 999px;
    background: #c0392b;
}

.dashboard-brand.is-active strong {
    color: #1f4f35;
}

.dashboard-start-btn {
    display: none !important;
    margin: auto 0 0;
    width: calc(100% - 12px);
    border: none;
    border-radius: 999px;
    padding: 16px 20px;
    background: #c0392b;
    color: #fff;
    font: inherit;
    font-weight: 700;
    font-size: 1.12rem;
    cursor: pointer;
    box-shadow: 0 14px 28px rgba(192, 57, 43, 0.18);
    white-space: nowrap;
}

.dashboard-tip {
    padding: 16px;
    border-radius: 14px;
    background: linear-gradient(135deg, #f2fbf2 0%, #edf7ff 100%);
    border: 1px solid rgba(132, 196, 132, 0.18);
}

.dashboard-tip strong {
    display: block;
    margin-bottom: 6px;
    font-size: 1.12rem;
}

.dashboard-tip p {
    margin: 0 0 12px;
    color: var(--muted-text-color);
    font-size: 1.04rem;
}

.dashboard-main {
    display: flex;
    flex-direction: column;
    gap: 28px;
    min-width: 0;
    padding: 0 46px 24px;
    margin-left: 0;
}

.home-app .dashboard-main {
    padding: 0 16px 24px 0;
    margin-left: 0;
}

.dashboard-rail {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    background: #fff;
    border-left: 1px solid #e5ddd0;
    padding: 28px 22px 28px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    box-sizing: border-box;
}

.dashboard-rail .home-word-card,
.dashboard-rail .home-coffee-card,
.dashboard-rail .home-note-card {
    border: 1px solid #e6dccb;
    box-shadow: 0 10px 26px rgba(95, 83, 68, 0.07);
    color: var(--text-color);
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    overflow-x: hidden;
    border-radius: 22px;
    position: relative;
}

.dashboard-rail .home-word-card {
    background: #c0392b;
    border-color: #b03326;
    color: #fff7f3;
}

.dashboard-rail .home-word-card {
    height: auto;
    min-height: 0;
    justify-content: flex-start;
    padding: 16px 18px 14px;
}

.dashboard-rail .home-coffee-card {
    background: #fff;
    border-color: #e6dccb;
    color: var(--text-color);
}

.dashboard-rail .home-note-card {
    background: #1f4f35;
    border-color: #173d29;
    color: #eef5f0;
}

.dashboard-rail .home-word-card::before,
.dashboard-rail .home-coffee-card::before,
.dashboard-rail .home-note-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 18px;
    bottom: 18px;
    width: 3px;
    border-radius: 999px;
    background: rgba(192, 57, 43, 0.16);
}

.dashboard-rail .home-word-card::before {
    background: rgba(255, 255, 255, 0.32);
}

.dashboard-rail .home-coffee-card::before {
    background: rgba(192, 57, 43, 0.18);
}

.dashboard-rail .home-note-card::before {
    background: rgba(255, 255, 255, 0.2);
}

.dashboard-rail .home-word-card .home-feature-kicker,
.dashboard-rail .home-note-card .panel-kicker,
.dashboard-rail .home-coffee-card .panel-kicker {
    color: #a74635;
    white-space: nowrap;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard-rail .home-word-card .home-feature-kicker {
    color: rgba(255, 245, 240, 0.82);
}

.dashboard-rail .home-note-card .panel-kicker {
    color: rgba(237, 245, 240, 0.82);
}

.dashboard-rail .home-word-card h3 {
    font-size: clamp(1.6rem, 1.8vw, 2rem);
    line-height: 1.05;
}

.dashboard-rail .home-word-card h3,
.dashboard-rail .home-word-card .home-word-zh,
.dashboard-rail .home-word-card .home-word-pron strong,
.dashboard-rail .home-word-card .home-word-pron span {
    color: #fff7f3;
}

.dashboard-rail .home-word-card .home-word-pron {
    background: rgba(255, 255, 255, 0.14);
}

.dashboard-rail .home-note-card h3,
.dashboard-rail .home-note-card p,
.dashboard-rail .home-note-card button {
    color: #eef5f0;
}

.dashboard-rail .home-word-card .home-word-zh {
    margin-top: 6px;
    font-size: 0.9rem;
}

.dashboard-rail .home-word-card .home-word-pron {
    margin-top: 12px;
    padding: 10px 12px;
}

.dashboard-rail .home-word-zh,
.dashboard-rail .home-note-card p,
.dashboard-rail .home-coffee-task,
.dashboard-rail .home-coffee-feedback {
    color: var(--muted-text-color);
}

.dashboard-rail .home-word-pron,
.dashboard-rail .home-word-note,
.dashboard-rail .home-coffee-copy,
.dashboard-rail .home-coffee-actions,
.dashboard-rail .home-note-card h3,
.dashboard-rail .home-note-card p {
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
}

.dashboard-rail .home-word-pron > div,
.dashboard-rail .home-word-note p,
.dashboard-rail .home-note-card h3,
.dashboard-rail .home-note-card p {
    min-width: 0;
    overflow-wrap: anywhere;
}

.dashboard-panel {
    padding: 24px;
}

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

.dashboard-view[hidden] {
    display: none !important;
}

.panel-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 14px;
}

.panel-heading-tight {
    margin-bottom: 16px;
}

.panel-kicker {
    margin: 0 0 6px;
    font-size: 0.86rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted-text-color);
}

.panel-heading h2,
.panel-heading h3 {
    margin: 0;
}

.home-vocab-lab {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.home-vocab-topbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 22px;
}

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

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

.home-vocab-copy {
    max-width: 880px;
    margin: 0;
    color: #605c56;
    font-size: 1.14rem;
    line-height: 1.86;
}

.home-vocab-tools {
    display: flex;
    align-items: center;
    gap: 12px;
}

.home-vocab-search {
    position: relative;
}

.home-vocab-search span {
    position: absolute;
    left: 14px;
    top: 11px;
    color: #8a8075;
}

.home-vocab-search input {
    width: 250px;
    border: none;
    border-radius: 14px;
    background: #f0ebe2;
    padding: 13px 15px 13px 40px;
    font: inherit;
    color: #3f3a34;
}

.home-vocab-tool-btn {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: none;
    border-radius: 14px;
    background: #f0ebe2;
    color: #4e4a44;
    cursor: pointer;
}

.home-vocab-hero {
    padding: 34px 36px;
    border-radius: 28px;
    background: linear-gradient(135deg, #023820 0%, #1f4f35 100%);
    color: #fff;
    box-shadow: 0 24px 44px rgba(23, 48, 31, 0.15);
}

.home-vocab-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(280px, 0.9fr);
    gap: 28px;
    align-items: end;
}

.home-vocab-hero-kicker {
    display: inline-block;
    margin-bottom: 10px;
    color: #ffe088;
    font-size: 0.86rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.home-vocab-hero h3 {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.2rem, 4.2vw, 3.25rem);
    line-height: 1.15;
}

.home-vocab-hero p {
    margin: 14px 0 0;
    max-width: 740px;
    color: rgba(255, 255, 255, 0.84);
    font-size: 1.14rem;
    line-height: 1.84;
}

.home-vocab-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.home-vocab-hero-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 148px;
    padding: 14px 24px;
    border-radius: 14px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.03rem;
}

.home-vocab-hero-actions a:first-child {
    background: #b02d21;
    color: #fff;
}

.home-vocab-hero-actions a:last-child {
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
}

.home-vocab-progress-card {
    padding: 22px 22px 18px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

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

.home-vocab-progress-head span {
    font-size: 0.8rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.72);
}

.home-vocab-progress-head strong {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 2rem;
    line-height: 1;
}

.home-vocab-progress-bar {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    overflow: hidden;
}

.home-vocab-progress-bar span {
    display: block;
    width: 100%;
    height: 100%;
    background: #ffe088;
}

.home-vocab-progress-card p {
    margin: 14px 0 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.84rem;
}

.home-vocab-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 24px;
}

.home-vocab-card {
    background: #fff;
    border-radius: 24px;
    border: 1px solid #ece4d8;
    box-shadow: 0 28px 44px -8px rgba(27, 28, 25, 0.05);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.home-vocab-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 34px 48px -8px rgba(27, 28, 25, 0.08);
}

.home-vocab-card--study {
    grid-column: span 7;
    padding: 30px;
}

.home-vocab-card--practice {
    grid-column: span 5;
    padding: 30px;
    border-left: 4px solid rgba(176, 45, 33, 0.16);
}

.home-vocab-card--book {
    grid-column: span 12;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 28px 30px;
}

.home-vocab-card-top {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 18px;
    margin-bottom: 18px;
}

.home-vocab-card-icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    background: #f5f3ee;
    font-size: 1.7rem;
}

.home-vocab-card-icon--red {
    background: rgba(176, 45, 33, 0.08);
}

.home-vocab-card-index {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 3.1rem;
    line-height: 1;
    color: rgba(65, 73, 66, 0.16);
}

.home-vocab-card h3 {
    margin: 0 0 12px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 2rem;
    color: #023820;
}

.home-vocab-card p {
    margin: 0;
    color: #615b55;
    line-height: 1.82;
}

.home-vocab-card-meta,
.home-vocab-book-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.home-vocab-chip {
    display: inline-flex;
    align-items: center;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.home-vocab-chip--green {
    background: rgba(2, 56, 32, 0.06);
    color: #023820;
}

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

.home-vocab-chip--soft {
    background: #f0eee9;
    color: #6a7068;
}

.home-vocab-card-link {
    display: inline-flex;
    align-items: center;
    margin-top: 24px;
    color: #023820;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid rgba(2, 56, 32, 0.2);
    padding-bottom: 4px;
}

.home-vocab-card-link:hover {
    color: #b02d21;
    border-color: rgba(176, 45, 33, 0.3);
}

.home-vocab-metric {
    margin-top: 20px;
}

.home-vocab-metric-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    color: #5f665f;
    font-size: 0.82rem;
    font-weight: 700;
}

.home-vocab-metric-row strong {
    color: #b02d21;
}

.home-vocab-metric-bar {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: #ece9e1;
    overflow: hidden;
}

.home-vocab-metric-bar span {
    display: block;
    width: 82%;
    height: 100%;
    background: #b02d21;
}

.home-vocab-book-icon {
    width: 96px;
    height: 96px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 24px;
    background: rgba(204, 167, 48, 0.16);
    font-size: 2.8rem;
}

.home-vocab-book-copy {
    flex: 1;
}

.home-vocab-book-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.home-vocab-book-head h3 {
    margin: 0;
}

.home-vocab-insights {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    padding-top: 34px;
    border-top: 1px solid rgba(2, 56, 32, 0.08);
}

.home-vocab-insight {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.home-vocab-insight > span {
    font-size: 1.3rem;
    line-height: 1;
}

.home-vocab-insight h4 {
    margin: 0 0 4px;
    color: #023820;
    font-size: 1rem;
}

.home-vocab-insight p {
    margin: 0;
    color: #666d65;
    font-size: 0.9rem;
    line-height: 1.7;
}

.home-community {
    display: flex;
    flex-direction: column;
}

.home-community-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.28fr) minmax(360px, 1fr);
    gap: 28px;
}

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

/* 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: 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 {
    position: relative;
    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::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);
    transform: translateX(-50%) translateY(4px);
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(37, 41, 37, 0.92);
    color: #fffdf8;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.16s ease, transform 0.16s ease;
}

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

.ai-atelier-result-actions button:hover::after,
.ai-atelier-result-actions button:focus-visible::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.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: 760px) {
    .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: 760px) {
    .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: 760px;
}

.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-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("../assets/home/assistant-study-scene.png") 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("../assets/home/assistant-study-scene.png") 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("../assets/home/ai-tool-scene-wide.png") center/cover no-repeat;
}

.library-feature--grammar {
    background:
        linear-gradient(180deg, rgba(14, 23, 46, 0.08), rgba(14, 27, 56, 0.78)),
        url("../assets/home/ai-tool-sentence-wide.png") center/cover no-repeat;
}

.library-feature--vocab {
    background:
        linear-gradient(180deg, rgba(10, 33, 19, 0.08), rgba(13, 39, 22, 0.78)),
        url("../assets/home/assistant-study-scene.png") center/cover no-repeat;
}

.library-feature--assistant {
    background:
        linear-gradient(180deg, rgba(14, 31, 56, 0.08), rgba(16, 33, 60, 0.78)),
        url("../assets/home/ai-tool-image-wide.png") 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: 760px;
    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-size: 2.05rem;
    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;
}

.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;
    -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/assistant-study-scene.png");
    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(27, 61, 47, 0.08), transparent 34%),
        linear-gradient(180deg, rgba(252, 248, 241, 0.98), rgba(247, 242, 232, 0.96));
    border: 1px solid #e4dccc;
    box-shadow: 0 18px 36px rgba(27, 28, 25, 0.05);
    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: 0.9rem;
    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(255, 252, 246, 0.82);
    color: #16311f;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    box-shadow: inset 0 0 0 1px rgba(27, 61, 47, 0.05);
}

.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.72rem;
    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: 760px;
        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 {
    display: grid;
    grid-template-columns: 280px 1fr 320px;
    min-height: 100vh;
    margin: 0;
    padding: 0 16px;
    box-sizing: border-box;
}

.dashboard-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    background-color: #f5f5f5;
    box-shadow: 2px 0 8px rgba(0,0,0,0.04);
    margin-left: 16px;
    border-radius: 12px;
}

.dashboard-sidebar-card {
    padding: 0;
    margin: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.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: 2px 24px 18px;
    overflow: hidden;
}

.dashboard-brand strong {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.1;
    color: #15311f;
}

.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: 14px 24px 14px 28px;
    gap: 12px;
    border: none;
    border-left: 4px solid transparent;
    border-radius: 0;
    background: transparent;
    color: #4e4d48;
    font-size: 1.22rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.dashboard-nav-item:hover {
    background: rgba(56, 104, 76, 0.06);
    color: #16311f;
}

.dashboard-nav-item.is-primary {
    color: #16311f;
    font-weight: 700;
    border-left-color: #c6a533;
    background: rgba(56, 104, 76, 0.08);
}

.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: none;
    margin-left: 0;
    margin-right: 16px;
    box-sizing: border-box;
    grid-template-columns: 260px minmax(0, 1fr);
    column-gap: 0;
}

.home-app .dashboard-main {
    min-width: 0;
    padding: 28px 28px 56px;
}

.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 {
    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;
}

@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;
        gap: 10px;
        min-width: 0;
    }

    .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--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;
    }

    .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;
    }

    .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;
    }
}

/* Assistant split layout refresh */
.home-app {
    --assistant-page-bg: #f7f1e6;
    --assistant-card-bg: #f5ede1;
    --assistant-card-surface: #fbf6ee;
    --assistant-page-bg: #fcf8f1;
    --assistant-card-bg: #f5efe4;
    --assistant-card-surface: #fbf8f3;
    --assistant-control-bg: #f4ede2;
    --assistant-control-bg-hover: #eee5d8;
    --assistant-control-bg-soft: #f8f2e8;
    --assistant-border: rgba(122, 106, 84, 0.12);
}

body.home-app {
    background: var(--assistant-page-bg);
}

.ai-assistant-header {
    align-items: center;
}

.ai-assistant-history-link {
    color: #17311f;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
}

.ai-assistant-main-grid {
    display: grid;
    grid-template-columns: 520px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}

.ai-assistant-input-card,
.ai-assistant-result-card,
.ai-assistant-history-card {
    padding: 28px;
    border-radius: 22px;
    border: 1px solid var(--assistant-border);
    background: var(--assistant-card-bg);
    box-shadow: 0 22px 44px rgba(44, 38, 28, 0.045);
}

.ai-assistant-input-card,
.ai-assistant-result-card {
    min-height: 0;
    height: auto;
}

.ai-assistant-input-card {
    display: flex;
    flex-direction: column;
    gap: 18px;
    background: #f3ecdf;
    position: sticky;
    top: 24px;
    align-self: start;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
}

.ai-assistant-result-card {
    display: flex;
    flex-direction: column;
    background: #f9f5ee;
}

.ai-assistant-history-card {
    background: #f8f4ec;
}

.ai-assistant-section-title {
    margin: 0;
    color: #1a2d20;
    font-size: 1.95rem;
    font-weight: 800;
}

.ai-assistant-section-title--sub {
    font-size: 1.15rem;
    margin-top: 2px;
    margin-bottom: -2px;
}

.assistant-mode-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 8px;
    border-radius: 18px;
    background: var(--assistant-control-bg);
}

.assistant-mode-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 94px;
    padding: 14px 12px;
    border-radius: 16px;
    border: 1px solid rgba(120, 103, 80, 0.12);
    background: var(--assistant-control-bg-soft);
    color: #183422;
    cursor: pointer;
    box-shadow: none;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.assistant-mode-card:hover {
    background: var(--assistant-control-bg-hover);
}

.assistant-mode-card .material-symbols-outlined {
    font-size: 1.7rem;
    color: #8a7cf3;
}

.assistant-mode-card strong {
    font-size: 0.98rem;
    font-weight: 800;
}

.assistant-mode-card.is-active {
    border-color: #345b49;
    background: #345b49;
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(52, 91, 73, 0.14);
}

.assistant-mode-card.is-active .material-symbols-outlined {
    color: #ffffff;
}

.ai-assistant-pane {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.home-app #assistant-panel {
    --assistant-content-box-height: 320px;
}

#assistant-panel #mode-text-area,
#assistant-panel #mode-image-area,
#assistant-panel #mode-dialog-area {
    min-height: var(--assistant-content-box-height);
}

.ai-image-preview-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
    min-height: var(--assistant-content-box-height);
    border-radius: 18px;
    border: 1px solid var(--assistant-border);
    background: var(--assistant-card-surface);
}

.ai-image-preview-card img {
    width: 100%;
    max-height: 260px;
    object-fit: contain;
    border-radius: 14px;
    background: #f6f0e5;
}

.ai-image-preview-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ai-image-preview-meta strong {
    color: #17311f;
    font-size: 1rem;
    font-weight: 800;
}

.ai-image-preview-meta span {
    color: rgba(23, 49, 31, 0.56);
    font-size: 0.9rem;
}

.ai-image-preview-actions {
    display: flex;
    gap: 12px;
}

.ai-image-preview-actions .btn-secondary {
    min-height: 54px;
    border-radius: 14px;
    background: var(--assistant-control-bg-soft);
    border-color: rgba(120, 103, 80, 0.16);
}

#assistant-panel .ai-assistant-pane #assist-input {
    min-height: 300px;
}

#assistant-panel #mode-text-area .ai-text-input-wrap.ai-atelier-input-wrap {
    height: var(--assistant-content-box-height);
    min-height: var(--assistant-content-box-height);
    display: flex;
    flex-direction: column;
}

#assistant-panel #mode-text-area #assist-input {
    height: 100%;
    min-height: 0;
    flex: 1;
}

.ai-assistant-primary-btn {
    width: 100%;
    justify-content: center;
    min-height: 60px;
    padding: 18px 24px;
    border-radius: 14px;
    border: 1px solid #b23a2f;
    background: #b23a2f;
    color: #ffffff;
    box-shadow: 0 14px 24px rgba(178, 58, 47, 0.22);
    font-size: 1.24rem;
    font-weight: 800;
}

.ai-assistant-primary-btn:hover {
    background: #a43328;
    border-color: #a43328;
}

.ai-dialog-generate-btn {
    background: #b23a2f;
    border-color: #b23a2f;
    color: #ffffff;
    box-shadow: 0 12px 20px rgba(178, 58, 47, 0.2);
}

.ai-dialog-generate-btn:hover {
    background: #a43328;
    border-color: #a43328;
}

.home-app #assistant-panel .ai-atelier-dialog-custom .ai-dialog-generate-btn {
    width: auto;
    min-width: 144px;
    height: 60px;
    padding: 0 24px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 800;
    background: #b23a2f;
    border-color: #b23a2f;
    color: #ffffff;
    box-shadow: 0 13px 24px rgba(178, 58, 47, 0.21);
}

.home-app #assistant-panel .ai-atelier-dialog-custom .ai-dialog-generate-btn::before {
    content: none;
}

.home-app #assistant-panel .ai-atelier-dialog-custom .ai-dialog-generate-btn:hover {
    background: #a43328;
    border-color: #a43328;
}

.ai-assistant-scene-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

#assistant-panel #mode-image-area .ai-image-dropzone {
    min-height: var(--assistant-content-box-height);
}

#assistant-panel #mode-dialog-area {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#assistant-panel #mode-dialog-area .ai-assistant-scene-grid {
    margin-bottom: auto;
}

#assistant-panel #mode-dialog-area .ai-atelier-dialog-custom {
    margin-top: 16px;
}

.ai-assistant-result-card .ai-atelier-results-head {
    margin-bottom: 18px;
}

.ai-assistant-result-card .ai-atelier-results-head h3,
.ai-assistant-history-head h3 {
    margin: 0;
    color: #17311f;
    font-size: 2rem;
    font-weight: 800;
}

.ai-assistant-result-card .ai-atelier-results-head h3::before {
    content: "✦";
    display: inline-block;
    margin-right: 10px;
    color: #f0b33a;
    font-size: 1rem;
    transform: translateY(-2px);
}

.ai-assistant-result-panel {
    flex: 1;
    min-height: var(--assistant-content-box-height);
    height: auto;
    padding: 22px;
    border-radius: 18px;
    border: 1px solid var(--assistant-border);
    background: #fffdf9;
}

.ai-assistant-result-card .ai-result-panel:not(.is-active) {
    display: none;
}

.assist-word-chip {
    display: inline;
    padding: 0 0.16em;
    margin: 0 0.02em;
    border-radius: 0.45em;
    cursor: pointer;
    transition: background-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.assist-word-chip:hover,
.assist-word-chip:focus-visible {
    background: rgba(173, 205, 189, 0.34);
    color: #143826;
    box-shadow: inset 0 -1px 0 rgba(20, 56, 38, 0.14);
}

.assist-word-chip.is-speaking {
    background: #ffe69a;
    color: #16311f;
    box-shadow: 0 0 0 2px rgba(255, 208, 72, 0.28), inset 0 -2px 0 rgba(155, 122, 17, 0.22);
}

.ai-assistant-placeholder {
    min-height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: rgba(23, 49, 31, 0.56);
    text-align: center;
}

.ai-assistant-placeholder .material-symbols-outlined {
    font-size: 5rem;
    color: rgba(132, 182, 162, 0.58);
}

.ai-assistant-placeholder strong {
    color: #30453a;
    font-size: 1.9rem;
    font-weight: 800;
}

.ai-assistant-placeholder p {
    margin: 0;
    font-size: 1rem;
}

.ai-assistant-history-card {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.ai-assistant-history-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}

.assist-history-search {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: min(320px, 100%);
    padding: 0 14px;
    border: 1px solid rgba(122, 106, 84, 0.14);
    border-radius: 999px;
    background: #fffdf9;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.assist-history-search__icon {
    color: rgba(23, 49, 31, 0.48);
    font-size: 1rem;
}

.assist-history-search input {
    width: 100%;
    min-width: 0;
    height: 46px;
    border: 0;
    outline: none;
    background: transparent;
    color: #183422;
    font: inherit;
}

.assist-history-search input::placeholder {
    color: rgba(23, 49, 31, 0.42);
}

#assist-history {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.assist-history-empty {
    padding: 18px 20px;
    border-radius: 18px;
    border: 1px solid var(--assistant-border);
    background: var(--assistant-card-surface);
    color: rgba(23, 49, 31, 0.62);
}

.assist-history-item {
    display: flex;
    flex-direction: column;
    border-radius: 18px;
    border: 1px solid var(--assistant-border);
    background: var(--assistant-card-surface);
    overflow: hidden;
}

.assist-history-item.is-extra {
    display: none;
}

#assist-history.is-expanded .assist-history-item.is-extra {
    display: flex;
}

.assist-history-card {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 18px;
    align-items: center;
    padding: 16px 18px;
    background: transparent;
    border: 0;
    color: #183422;
    text-align: left;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.assist-history-card__thumb {
    grid-column: 1 / 2;
    width: 72px;
    height: 72px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(120, 103, 80, 0.14);
    background: #efe6d8;
}

.assist-history-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.assist-history-card::-webkit-details-marker,
.assist-history-card::marker {
    display: none;
    content: "";
}

.assist-history-card small {
    color: rgba(23, 49, 31, 0.48);
    font-size: 0.86rem;
    font-weight: 700;
    grid-column: 1 / 2;
}

.assist-history-card strong {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 1rem;
    line-height: 1.55;
    grid-column: 1 / 2;
}

.assist-history-card p {
    margin: 0;
    color: rgba(23, 49, 31, 0.66);
    font-size: 0.9rem;
    line-height: 1.55;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    grid-column: 1 / 2;
}

.assist-history-card__hint {
    display: inline-flex;
    align-items: center;
    align-self: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: #efe6d8;
    color: #6f5a31;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    grid-column: 2 / 3;
    grid-row: 1 / span 3;
}

.assist-history-item[open] .assist-history-card__hint {
    background: #1f5c3a;
    color: #ffffff;
}

.assist-history-panel {
    padding: 0 18px 18px;
    border-top: 1px solid rgba(120, 103, 80, 0.14);
    background: rgba(251, 246, 238, 0.88);
}

.assist-history-panel__input {
    margin-top: 16px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(120, 103, 80, 0.14);
    background: #f5ede1;
}

.assist-history-panel__input small {
    display: block;
    margin-bottom: 6px;
    color: rgba(23, 49, 31, 0.54);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.assist-history-panel__input strong {
    color: #30453a;
    font-size: 1rem;
    line-height: 1.7;
}

.assist-history-panel__result {
    margin-top: 16px;
}

.assist-history-panel__thumb {
    margin-top: 16px;
    width: min(220px, 100%);
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(120, 103, 80, 0.14);
    background: #efe6d8;
}

.assist-history-panel__thumb img {
    width: 100%;
    height: auto;
    display: block;
}

.assist-history-legacy-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.assist-history-refresh-btn {
    min-height: 42px;
    padding: 0 16px;
    border: 1px solid #b23a2f;
    border-radius: 999px;
    background: #b23a2f;
    color: #ffffff;
    font-size: 0.92rem;
    font-weight: 800;
    cursor: pointer;
}

.assist-history-refresh-btn:disabled {
    opacity: 0.72;
    cursor: wait;
}

.assist-history-legacy-note,
.assist-history-legacy-error {
    margin: 0;
    color: #6d6047;
    font-size: 0.94rem;
    line-height: 1.7;
}

.assist-history-legacy-error {
    color: #9f3329;
}

.assist-history-more-wrap {
    display: flex;
    justify-content: center;
}

.assist-history-more-btn {
    min-width: 138px;
    min-height: 46px;
    padding: 0 18px;
    border: 1px solid rgba(120, 103, 80, 0.16);
    border-radius: 999px;
    background: #efe6d8;
    color: #183422;
    font-size: 0.95rem;
    font-weight: 800;
    cursor: pointer;
}

.assist-history-more-btn:hover {
    background: #e8decf;
}

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

    .ai-assistant-input-card,
    .ai-assistant-result-card {
        min-height: auto;
    }

    .ai-assistant-input-card {
        position: static;
        top: auto;
        max-height: none;
        overflow: visible;
    }

    .ai-assistant-result-panel {
        min-height: 380px;
    }
}

@media (max-width: 720px) {
    .assistant-mode-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        padding: 6px;
    }

    .assistant-mode-card {
        min-height: 76px;
        padding: 10px 6px;
        border-radius: 14px;
        gap: 6px;
    }

    .assistant-mode-card .material-symbols-outlined {
        font-size: 1.35rem;
    }

    .assistant-mode-card strong {
        font-size: 0.82rem;
    }

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

    .ai-assistant-input-card,
    .ai-assistant-result-card,
    .ai-assistant-history-card {
        padding: 20px;
    }

    .ai-assistant-section-title,
    .ai-assistant-result-card .ai-atelier-results-head h3,
    .ai-assistant-history-head h3 {
        font-size: 1.42rem;
        line-height: 1.2;
    }

    .home-app #assistant-panel {
        --assistant-content-box-height: 240px;
    }

    #assistant-panel .ai-assistant-pane #assist-input {
        min-height: 220px;
    }

    .ai-assistant-primary-btn,
    .home-app #assistant-panel .ai-atelier-dialog-custom .ai-dialog-generate-btn {
        min-height: 50px;
        height: auto;
        font-size: 1rem;
        border-radius: 13px;
    }

    .assist-history-card {
        grid-template-columns: 1fr;
    }

    .assist-history-card__thumb {
        width: 88px;
        height: 88px;
    }

    .assist-history-card__hint {
        grid-column: 1 / 2;
        grid-row: auto;
    }
}

/* ========================================
   Verb Conjugation Table — Noun Template
   ======================================== */

.noun-conjugation-table-wrap {
    margin-top: 16px;
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid #e8e8e8;
    background: #fff;
}

.noun-conjugation-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 0.94rem;
}

.noun-conjugation-table thead {
    background: rgba(31, 107, 79, 0.06);
    border-bottom: 2px solid rgba(23, 52, 43, 0.12);
}

.noun-conjugation-table th {
    padding: 14px 16px;
    text-align: left;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #1d6b42;
    white-space: nowrap;
}

.noun-conjugation-table th:first-child { width: 15%; }
.noun-conjugation-table th:nth-child(2) { width: 20%; }
.noun-conjugation-table th:nth-child(3) { width: 65%; }

.noun-conjugation-table tbody tr:nth-child(odd) {
    background: #fff;
}

.noun-conjugation-table tbody tr:nth-child(even) {
    background: #f9f9f9;
}

.noun-conjugation-table tbody tr:hover {
    background: rgba(31, 107, 79, 0.04);
}

.noun-conjugation-table td {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(23, 52, 43, 0.07);
    vertical-align: top;
}

.noun-conjugation-table tbody tr:last-child td {
    border-bottom: none;
}

/* Person column */
.noun-conjugation-person {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.noun-conjugation-person-hu {
    font-weight: 800;
    font-size: 0.96rem;
    color: #173226;
    display: block;
}

.noun-conjugation-person-zh {
    font-size: 0.78rem;
    color: #999;
    display: block;
}

/* Verb form column */
.noun-conjugation-form {
    display: inline-flex;
    align-items: center;
    font-weight: 800;
    font-size: 1rem;
    color: #1d6b42;
    background: rgba(31, 107, 79, 0.06);
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.16s ease;
}

.noun-conjugation-form:hover {
    background: rgba(31, 107, 79, 0.13);
}

.noun-conjugation-form.is-speaking {
    background: rgba(31, 107, 79, 0.16);
    color: #124e30;
}

/* Example column */
.noun-conjugation-example {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.noun-conjugation-example-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.noun-conjugation-example-hu {
    font-weight: 800;
    font-size: 0.96rem;
    color: #173226;
    display: block;
    line-height: 1.45;
}

.noun-conjugation-example-zh {
    font-size: 0.82rem;
    color: #999;
    display: block;
    line-height: 1.5;
}

.noun-conjugation-sentence-tokens {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    font-weight: 800;
    font-size: 0.96rem;
    color: #173226;
    line-height: 1.45;
}

.noun-conjugation-sentence-tokens .noun-grammar-part {
    padding: 2px 6px;
    border-radius: 5px;
}

.noun-conjugation-sentence-tokens .noun-grammar-part.is-clickable {
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.noun-conjugation-sentence-tokens .noun-grammar-part.is-clickable:hover {
    background: rgba(234, 245, 239, 0.85);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Audio actions in conjugation table */
.noun-conjugation-audio-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    padding-top: 2px;
}

/* Ensure inline sound buttons work in table cells */
.noun-conjugation-table .noun-inline-sound,
.noun-conjugation-table .noun-inline-slow {
    width: 34px;
    height: 34px;
    font-size: 0.9rem;
    flex-shrink: 0;
}

/* Mobile: stack example and audio on narrow screens */
@media (max-width: 720px) {
    .noun-conjugation-table {
        font-size: 0.82rem;
    }

    .noun-conjugation-table th,
    .noun-conjugation-table td {
        padding: 10px 8px;
    }

    .noun-conjugation-example {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .noun-conjugation-audio-actions {
        justify-content: flex-start;
        padding-top: 0;
    }

    .noun-conjugation-form {
        font-size: 0.88rem;
        padding: 3px 7px;
    }
}

/* AI assistant compact tab workspace refresh */
.home-app #assistant-panel .ai-assistant-layout {
    width: min(1180px, 100%);
    margin: 0 auto;
}

.home-app #assistant-panel .ai-assistant-main-grid {
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: stretch;
    width: 100%;
    grid-template-columns: none;
}

.home-app #assistant-panel .ai-assistant-input-card,
.home-app #assistant-panel .ai-assistant-result-card {
    position: static;
    align-self: stretch;
    width: 100%;
    box-sizing: border-box;
    max-height: none;
    overflow: visible;
    padding: 24px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(122, 106, 84, 0.14);
    box-shadow: 0 22px 48px rgba(44, 38, 28, 0.06);
}

.home-app #assistant-panel .ai-assistant-input-card {
    gap: 22px;
}

.home-app #assistant-panel .assistant-mode-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding: 12px;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(248, 245, 239, 0.82));
    border: 1px solid rgba(122, 106, 84, 0.16);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.home-app #assistant-panel .assistant-mode-card {
    position: relative;
    min-height: 92px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    justify-items: start;
    gap: 14px;
    padding: 16px 18px;
    text-align: left;
    background: #fffefb;
    border: 1px solid rgba(122, 106, 84, 0.18);
    border-radius: 16px;
    box-shadow: 0 10px 22px rgba(44, 38, 28, 0.045);
    transition: transform 160ms ease, border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.home-app #assistant-panel .assistant-mode-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 14px;
    bottom: 14px;
    width: 4px;
    border-radius: 0 999px 999px 0;
    background: transparent;
    transition: background-color 160ms ease;
}

.home-app #assistant-panel .assistant-mode-card:hover {
    transform: translateY(-1px);
    border-color: rgba(15, 107, 68, 0.28);
    background: #fbfffc;
    box-shadow: 0 16px 28px rgba(44, 38, 28, 0.07);
}

.home-app #assistant-panel .assistant-mode-card .material-symbols-outlined {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: #0f6b44;
    background: #e8f3ec;
    font-size: 1.6rem;
}

.home-app #assistant-panel .assistant-mode-copy {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.home-app #assistant-panel .assistant-mode-copy strong {
    color: #183422;
    font-size: 1.02rem;
    line-height: 1.15;
}

.home-app #assistant-panel .assistant-mode-copy small {
    color: rgba(23, 49, 31, 0.58);
    font-size: 0.82rem;
    line-height: 1.35;
}

.home-app #assistant-panel .assistant-mode-card.is-active {
    background: linear-gradient(180deg, #f3fbf6, #eaf6ef);
    border-color: #0f6b44;
    color: #183422;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), 0 18px 34px rgba(15, 107, 68, 0.14);
}

.home-app #assistant-panel .assistant-mode-card.is-active::before {
    background: #0f6b44;
}

.home-app #assistant-panel .assistant-mode-card.is-active .material-symbols-outlined {
    color: #ffffff;
    background: #0f6b44;
    box-shadow: 0 10px 20px rgba(15, 107, 68, 0.18);
}

.home-app #assistant-panel .ai-assistant-mode-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.home-app #assistant-panel .ai-assistant-mode-head h3 {
    margin: 0 0 7px;
    color: #123d2a;
    font-size: 1.35rem;
    line-height: 1.2;
    font-weight: 800;
}

.home-app #assistant-panel .ai-assistant-mode-head p {
    margin: 0;
    color: rgba(23, 49, 31, 0.62);
    line-height: 1.55;
}

.home-app #assistant-panel .ai-assistant-compact-btn {
    min-height: 42px;
    padding: 0 15px;
    border-radius: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
    font-weight: 800;
}

.home-app #assistant-panel .ai-text-input-wrap.ai-atelier-input-wrap {
    height: auto;
    min-height: 0;
    border-radius: 16px;
    background: #fffefc;
    overflow: hidden;
}

.home-app #assistant-panel #mode-text-area #assist-input {
    min-height: 188px;
    height: auto;
    padding: 20px;
    line-height: 1.72;
}

.home-app #assistant-panel .ai-atelier-input-meta {
    min-height: 64px;
    padding: 10px 12px;
    border-top: 1px solid rgba(122, 106, 84, 0.14);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.home-app #assistant-panel .ai-atelier-input-meta span {
    margin-left: auto;
    color: rgba(23, 49, 31, 0.6);
    font-size: 0.92rem;
    font-weight: 700;
}

.home-app #assistant-panel .ai-assistant-primary-btn,
.home-app #assistant-panel .ai-atelier-dialog-custom .ai-dialog-generate-btn {
    min-height: 44px;
    width: auto;
    padding: 0 18px;
    border-radius: 13px;
    background: #0f6b44;
    border-color: #0f6b44;
    color: #ffffff;
    box-shadow: 0 16px 28px rgba(15, 107, 68, 0.18);
    font-size: 1rem;
}

.home-app #assistant-panel .ai-assistant-primary-btn:hover,
.home-app #assistant-panel .ai-atelier-dialog-custom .ai-dialog-generate-btn:hover {
    background: #0b5a39;
    border-color: #0b5a39;
}

.home-app #assistant-panel .ai-assistant-prompt-chips {
    margin-top: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    color: rgba(23, 49, 31, 0.68);
    font-size: 0.9rem;
}

.home-app #assistant-panel .ai-assistant-prompt-chips button {
    min-height: 34px;
    padding: 0 13px;
    border-radius: 999px;
    border: 1px solid #d9e7dd;
    background: #f8fbf8;
    color: #25563e;
    font-weight: 800;
}

@media (max-width: 640px) {
    .home-app #assistant-panel .assistant-mode-card .material-symbols-outlined,
    .home-app #assistant-panel .ai-image-dropzone-icon .material-symbols-outlined,
    .home-app #assistant-panel .ai-atelier-result-actions .material-symbols-outlined {
        font-size: 0 !important;
        line-height: 0 !important;
        color: transparent !important;
    }

    .home-app #assistant-panel .assistant-mode-card .material-symbols-outlined::before,
    .home-app #assistant-panel .ai-image-dropzone-icon .material-symbols-outlined::before,
    .home-app #assistant-panel .ai-atelier-result-actions .material-symbols-outlined::before {
        display: inline-grid;
        place-items: center;
        width: 100%;
        height: 100%;
        font-size: 1rem;
        line-height: 1;
        color: #0f6b44;
        font-weight: 800;
    }

    .home-app #assistant-panel .assistant-mode-card.is-active .material-symbols-outlined::before,
    .home-app #assistant-panel .ai-image-dropzone-icon .material-symbols-outlined::before,
    .home-app #assistant-panel .ai-atelier-result-actions .material-symbols-outlined::before {
        color: #ffffff;
    }

    .home-app #assistant-panel .ai-assistant-compact-btn .material-symbols-outlined,
    .home-app #assistant-panel .ai-assistant-primary-btn .material-symbols-outlined {
        display: none !important;
    }

    .home-app #assistant-panel #mode-btn-text .material-symbols-outlined::before { content: "文"; }
    .home-app #assistant-panel #mode-btn-image .material-symbols-outlined::before { content: "图"; }
    .home-app #assistant-panel #mode-btn-dialog .material-symbols-outlined::before { content: "聊"; }
    .home-app #assistant-panel #assist-example-btn .material-symbols-outlined::before { content: "例"; }
    .home-app #assistant-panel #assist-paste-btn .material-symbols-outlined::before { content: "贴"; }
    .home-app #assistant-panel #assist-text-clear-btn .material-symbols-outlined::before,
    .home-app #assistant-panel #assist-image-clear-btn .material-symbols-outlined::before,
    .home-app #assistant-panel #assist-dialog-clear-btn .material-symbols-outlined::before { content: "清"; }
    .home-app #assistant-panel #assist-analyze-btn .material-symbols-outlined::before { content: "析"; }
    .home-app #assistant-panel .ai-image-dropzone-icon .material-symbols-outlined::before { content: "传"; }
    .home-app #assistant-panel #assist-copy-btn .material-symbols-outlined::before { content: "复"; }
    .home-app #assistant-panel #assist-share-btn .material-symbols-outlined::before { content: "发"; }
    .home-app #assistant-panel #assist-result-collapse-btn .material-symbols-outlined::before { content: "收"; }
}

.home-app #assistant-panel #mode-image-area .ai-image-dropzone,
.home-app #assistant-panel #mode-dialog-area,
.home-app #assistant-panel #mode-text-area {
    min-height: 0;
}

.home-app #assistant-panel #mode-image-area .ai-image-dropzone {
    min-height: 252px;
    border-color: #b8d7c6;
    background: linear-gradient(180deg, #fcfefc, #f5faf6);
}

.home-app #assistant-panel .ai-image-dropzone-icon {
    color: #0f6b44;
}

.home-app #assistant-panel .ai-assistant-scene-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.home-app #assistant-panel .ai-atelier-scene-tags .ai-scene-tile.is-active {
    background: #e8f3ec;
    color: #0f6b44;
    border-color: #b9d5c8;
}

.home-app #assistant-panel .ai-atelier-dialog-custom {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
}

.home-app #assistant-panel .ai-atelier-dialog-custom input {
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid rgba(122, 106, 84, 0.14);
    border-radius: 13px;
    background: #fffefb;
}

.home-app #assistant-panel .ai-assistant-result-card {
    display: none;
    min-height: 292px;
}

.home-app #assistant-panel .ai-assistant-result-card.is-open {
    display: flex;
    animation: assistantResultReveal 260ms ease both;
}

.home-app #assistant-panel .ai-assistant-result-card .ai-atelier-results-head {
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(122, 106, 84, 0.14);
}

.home-app #assistant-panel .ai-assistant-result-card .ai-atelier-results-head h3::before {
    content: "fact_check";
    font-family: "Material Symbols Outlined";
    color: #0f6b44;
    font-size: 1.35rem;
    vertical-align: -0.2em;
}

.home-app #assistant-panel .ai-atelier-result-actions button {
    display: inline-grid;
    place-items: center;
    color: #315142;
    overflow: hidden;
}

.home-app #assistant-panel .ai-atelier-result-actions button .material-symbols-outlined {
    font-size: 1.2rem;
    width: 1.2em;
    max-width: 1.2em;
    overflow: hidden;
    line-height: 1;
}

.home-app #assistant-panel .ai-assistant-result-panel {
    min-height: 260px;
    padding: 18px;
    border-radius: 15px;
}

.home-app #assistant-panel .ai-assistant-result-card .ai-result-panel:not(.is-active) {
    display: none;
}

.home-app #assistant-panel .ai-structured-result {
    display: grid;
    gap: 18px;
}

.home-app #assistant-panel .ai-structured-topline,
.home-app #assistant-panel .ai-structured-mini-head,
.home-app #assistant-panel .ai-structured-block-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.home-app #assistant-panel .ai-structured-topline {
    justify-content: space-between;
    padding-bottom: 4px;
}

.home-app #assistant-panel .ai-structured-topline h4 {
    margin: 0;
    color: #183422;
    font-size: 1.05rem;
}

.home-app #assistant-panel .ai-structured-topline > span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    background: #f4efe2;
    color: #7a6410;
    font-size: 0.8rem;
    font-weight: 800;
}

.home-app #assistant-panel .ai-structured-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.home-app #assistant-panel .ai-structured-mini-card,
.home-app #assistant-panel .ai-structured-list-card,
.home-app #assistant-panel .ai-structured-block,
.home-app #assistant-panel .ai-structured-replies,
.home-app #assistant-panel .ai-structured-note,
.home-app #assistant-panel .ai-structured-tips,
.home-app #assistant-panel .ai-structured-questions {
    border: 1px solid rgba(122, 106, 84, 0.14);
    border-radius: 15px;
    background: rgba(255, 254, 251, 0.82);
}

.home-app #assistant-panel .ai-structured-mini-card,
.home-app #assistant-panel .ai-structured-list-card,
.home-app #assistant-panel .ai-structured-block,
.home-app #assistant-panel .ai-structured-replies,
.home-app #assistant-panel .ai-structured-note,
.home-app #assistant-panel .ai-structured-tips,
.home-app #assistant-panel .ai-structured-questions {
    padding: 18px;
}

.home-app #assistant-panel .ai-structured-mini-head,
.home-app #assistant-panel .ai-structured-block-title {
    color: #0f6b44;
    font-size: 0.98rem;
    font-weight: 800;
}

.home-app #assistant-panel .ai-structured-mini-head .material-symbols-outlined,
.home-app #assistant-panel .ai-structured-block-title .material-symbols-outlined,
.home-app #assistant-panel .ai-structured-questions > .material-symbols-outlined {
    font-size: 1.25rem;
}

.home-app #assistant-panel .ai-structured-sentence {
    margin-top: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-radius: 14px;
    background: #eef3ff;
    color: #1f2740;
    font-weight: 800;
    line-height: 1.75;
}

.home-app #assistant-panel .ai-sentence-line {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: 100%;
}

.home-app #assistant-panel .ai-sentence-line__text {
    min-width: 0;
}

.home-app #assistant-panel .ai-speak-controls {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    vertical-align: middle;
}

.home-app #assistant-panel .ai-speak-controls button {
    width: 32px;
    height: 32px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(15, 107, 68, 0.16);
    border-radius: 999px;
    background: #ffffff;
    color: #0f6b44;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(15, 107, 68, 0.08);
}

.home-app #assistant-panel .ai-speak-controls button:hover {
    background: #e8f3ec;
    border-color: rgba(15, 107, 68, 0.24);
}

.home-app #assistant-panel .ai-speak-controls .material-symbols-outlined {
    width: 1.1em;
    max-width: 1.1em;
    overflow: hidden;
    font-size: 1.1rem;
    line-height: 1;
}

.home-app #assistant-panel .ai-speak-controls button span:not(.material-symbols-outlined) {
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1;
}

.home-app #assistant-panel .assistant-dialog-speak-actions {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
}

.home-app #assistant-panel .assistant-dialog-speak-actions .material-symbols-outlined {
    width: 1.1em;
    max-width: 1.1em;
    overflow: hidden;
    font-size: 1.1rem;
    line-height: 1;
}

.home-app #assistant-panel .ai-structured-mini-card p,
.home-app #assistant-panel .ai-structured-note p {
    margin: 12px 0 0;
    color: #455349;
    line-height: 1.8;
}

.home-app #assistant-panel .ai-structured-mini-card small,
.home-app #assistant-panel .ai-structured-list-card small,
.home-app #assistant-panel .ai-structured-list-card em {
    display: block;
    margin-top: 6px;
    color: rgba(23, 49, 31, 0.62);
    font-size: 0.88rem;
    font-style: normal;
    line-height: 1.6;
}

.home-app #assistant-panel .ai-structured-pronunciation {
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #f6f1e8;
    color: #4d4230;
    font-weight: 800;
}

.home-app #assistant-panel .ai-structured-mini-card ul,
.home-app #assistant-panel .ai-structured-list-card ul,
.home-app #assistant-panel .ai-structured-replies ul,
.home-app #assistant-panel .ai-structured-tips ul {
    margin: 12px 0 0;
    padding-left: 18px;
    color: #455349;
    line-height: 1.75;
}

.home-app #assistant-panel .ai-structured-table {
    margin-top: 14px;
    overflow: hidden;
    border: 1px solid rgba(122, 106, 84, 0.12);
    border-radius: 13px;
}

.home-app #assistant-panel .ai-structured-table-row {
    display: grid;
    grid-template-columns: minmax(120px, 0.55fr) minmax(120px, 0.55fr) minmax(0, 1.4fr);
    gap: 12px;
    padding: 12px 14px;
    border-top: 1px solid rgba(122, 106, 84, 0.1);
    color: #415047;
    line-height: 1.65;
}

.home-app #assistant-panel .ai-structured-table-row:first-child {
    border-top: none;
}

.home-app #assistant-panel .ai-structured-table-row--head {
    background: #f8f5ef;
    color: #17311f;
    font-size: 0.84rem;
    font-weight: 800;
}

.home-app #assistant-panel .ai-structured-table-row span:first-child {
    font-weight: 800;
    color: #123d2a;
}

.home-app #assistant-panel .ai-structured-table-empty {
    padding: 14px;
    color: rgba(23, 49, 31, 0.62);
}

.home-app #assistant-panel .ai-structured-list-card li + li {
    margin-top: 12px;
}

.home-app #assistant-panel .ai-structured-list-card strong {
    color: #123d2a;
    line-height: 1.7;
}

.home-app #assistant-panel .ai-structured-note {
    background: #fbf7ee;
}

.home-app #assistant-panel .ai-structured-replies {
    background: #f8fbf8;
}

.home-app #assistant-panel .ai-structured-replies li + li {
    margin-top: 12px;
}

.home-app #assistant-panel .ai-structured-replies li span {
    display: inline-flex;
    margin-bottom: 5px;
    padding: 3px 8px;
    border-radius: 999px;
    background: #e8f3ec;
    color: #0f6b44;
    font-size: 0.76rem;
    font-weight: 800;
}

.home-app #assistant-panel .ai-structured-replies li strong {
    display: block;
    color: #123d2a;
    line-height: 1.7;
}

.home-app #assistant-panel .ai-structured-replies li small {
    display: block;
    margin-top: 4px;
    color: rgba(23, 49, 31, 0.62);
    line-height: 1.6;
}

.home-app #assistant-panel .ai-structured-tips {
    background: #f4faf6;
}

.home-app #assistant-panel .ai-structured-tips > strong {
    color: #123d2a;
}

.home-app #assistant-panel .ai-structured-questions {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    background: #fffefb;
}

.home-app #assistant-panel .ai-structured-questions > strong {
    color: #123d2a;
}

.home-app #assistant-panel .ai-structured-questions > div,
.home-app #assistant-panel .ai-structured-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.home-app #assistant-panel .ai-structured-questions button {
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid #d8e7dd;
    border-radius: 999px;
    background: #fbfffc;
    color: #0f5c3a;
    font-weight: 800;
}

@keyframes assistantResultReveal {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 900px) {
    .home-app .dashboard-shell {
        width: 100%;
        padding: 0;
        margin: 0;
        grid-template-columns: 1fr !important;
    }

    .home-app .dashboard-main {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding: 82px 16px 112px;
    }

    .home-app #assistant-panel .assistant-mode-card {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        gap: 7px;
        padding: 10px 6px;
        min-height: 78px;
    }

    .home-app #assistant-panel .assistant-mode-copy small {
        display: none;
    }

    .home-app #assistant-panel .ai-assistant-mode-head {
        display: grid;
    }

    .home-app #assistant-panel .ai-assistant-scene-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-app #assistant-panel .ai-atelier-dialog-custom {
        grid-template-columns: 1fr;
    }

    .home-app #assistant-panel .ai-structured-grid,
    .home-app #assistant-panel .ai-structured-questions {
        grid-template-columns: 1fr;
    }

    .home-app #assistant-panel .ai-structured-table-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .home-app #assistant-panel .ai-sentence-line {
        align-items: flex-start;
    }
}

@media (max-width: 560px) {
    .home-app #assistant-panel .ai-assistant-input-card,
    .home-app #assistant-panel .ai-assistant-result-card,
    .home-app #assistant-panel .ai-assistant-history-card {
        padding: 18px;
    }

    .home-app #assistant-panel .assistant-mode-cards {
        gap: 5px;
        padding: 7px;
    }

    .home-app #assistant-panel .assistant-mode-copy strong {
        font-size: 0.78rem;
        white-space: nowrap;
    }

    .home-app #assistant-panel .assistant-mode-card .material-symbols-outlined {
        width: 34px;
        height: 34px;
        border-radius: 11px;
        font-size: 1.25rem;
    }

    .home-app #assistant-panel .ai-atelier-input-meta {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        height: auto;
        overflow: visible;
    }

    .home-app #assistant-panel .ai-atelier-input-meta span {
        order: -1;
        width: 100%;
        margin-left: 0;
        text-align: right;
    }

    .home-app #assistant-panel .ai-atelier-input-meta .ai-assistant-compact-btn,
    .home-app #assistant-panel .ai-atelier-input-meta .ai-assistant-primary-btn {
        width: 100%;
        min-width: 0;
    }

    .home-app #assistant-panel .ai-sentence-line {
        display: grid;
        gap: 8px;
    }

    .home-app #assistant-panel .ai-image-preview-actions,
    .home-app #assistant-panel .ai-dialog-actions,
    .home-app #assistant-panel .assistant-dialog-speak-actions,
    .home-app #assistant-panel .ai-speak-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .home-app #assistant-panel .ai-image-preview-actions button,
    .home-app #assistant-panel .ai-dialog-actions button,
    .home-app #assistant-panel .assistant-dialog-speak-actions button,
    .home-app #assistant-panel .ai-speak-controls button {
        width: 100%;
        min-width: 0;
    }
}