.app-shell, .app-stage { min-width: 0; min-height: 100vh; }
.access-page, .activation-page { display: grid; min-height: calc(100vh - 74px); place-items: center; padding: 24px 16px; }
.access-page { background: rgba(239,229,209,.7); }
.access-page .access-panel { width: min(100%, 760px); }
.activation-page { background-color: rgba(239,229,209,.76); background-image: url("/assets/visual/rice-paper.webp"); background-size: 760px auto; }
.activation-panel { width: min(100%, 680px); padding: clamp(24px, 6vw, 52px); background: rgba(251,248,239,.97); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow-paper); }
.access-dialog-backdrop { position: fixed; z-index: 50; inset: 0; display: grid; overflow-y: auto; place-items: center; padding: 20px; background: rgba(35,24,16,.58); }
.site-header { position: relative; z-index: 10; display: grid; grid-template-columns: 1fr auto 1fr; min-height: 74px; align-items: center; gap: 20px; padding: 0 28px; background-color: rgba(251,248,239,.97); background-image: linear-gradient(rgba(255,255,255,.33), rgba(255,255,255,.05)), url("/assets/visual/rice-paper.webp"); background-size: auto, 760px auto; border: 1px solid var(--line); box-shadow: 0 2px 10px rgba(72,49,30,.11); }
.home-workspace { display: grid; min-height: calc(100vh - 74px); }
.course-cabinet { position: relative; min-width: 0; padding: 18px 16px 24px; color: #fff9e9; background-color: var(--wood-deep); background-image: linear-gradient(90deg, rgba(18,8,3,.42), transparent 11%, transparent 88%, rgba(18,8,3,.48)), url("/assets/visual/dark-walnut.webp"); background-size: auto, 690px auto; border-right: 10px solid #241108; box-shadow: inset -3px 0 10px rgba(0,0,0,.48), inset 5px 0 12px rgba(255,197,112,.035); }
.paper-dashboard { min-width: 0; padding: 20px 18px 0; background-color: rgba(239,229,209,.76); background-image: linear-gradient(rgba(255,255,255,.16), rgba(222,204,176,.08)), url("/assets/visual/rice-paper.webp"); background-size: auto, 760px auto; box-shadow: inset 12px 0 24px rgba(66,42,22,.05); }
.curriculum-hero { position: relative; min-height: 230px; overflow: hidden; display: flex; align-items: center; padding: 30px; background: var(--paper-bright); border: 1px solid rgba(75,53,32,.25); border-radius: 8px 8px 14px 8px; box-shadow: var(--shadow-paper); }
.curriculum-hero::after { content: ""; position: absolute; inset: 7px; pointer-events: none; border: 1px solid rgba(111,81,48,.11); border-radius: 4px 4px 10px 4px; }
.curriculum-hero__copy { position: relative; z-index: 2; max-width: 56%; padding: 14px 18px; background: linear-gradient(90deg, rgba(249,244,232,.88), rgba(249,244,232,.52) 72%, transparent); }
.curriculum-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 1; }
.continue-panel, .course-section, .study-card, .meaning-card, .insight-card { margin-top: 14px; padding: 18px; background-color: rgba(251,248,239,.94); background-image: linear-gradient(rgba(255,255,255,.24), rgba(255,255,255,.04)), url("/assets/visual/rice-paper.webp"); background-size: auto, 760px auto; border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow-paper); }
.continue-card { display: grid; grid-template-columns: 154px minmax(0, 1fr); gap: 18px; align-items: center; padding: 10px; background: rgba(255,253,247,.63); border: 1px solid rgba(75,53,32,.16); border-radius: 8px; box-shadow: inset 0 0 0 4px rgba(255,255,255,.24); }
.continue-card > img { width: 100%; height: 128px; object-fit: cover; border-radius: 11px; }
.continue-card .primary-button { grid-column: 1 / -1; }
.lesson-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.home-motto { margin: 24px -18px 0; padding: 13px 18px; color: #6c5b49; text-align: center; letter-spacing: .22em; background: rgba(255,253,248,.72); border-top: 1px solid var(--line); }
.lesson-page { width: min(100%, 1440px); min-height: 100vh; margin: 0 auto; padding: 0 12px 42px; }
.lesson-page [data-section] { scroll-margin-top: 64px; }
.lesson-topbar { display: grid; grid-template-columns: 1fr auto 1fr; min-height: 66px; align-items: center; gap: 10px; padding: 0 8px; }
.lesson-mode-tabs { position: sticky; z-index: 8; top: 0; display: grid; grid-template-columns: repeat(5, minmax(72px, 1fr)); overflow-x: auto; background: rgba(255,253,248,.96); border: 1px solid var(--line); border-radius: 14px 14px 0 0; box-shadow: var(--shadow-soft); backdrop-filter: blur(12px); }
.reading-sheet { display: grid; gap: 20px; padding: 18px; background-color: rgba(251,248,239,.96); background-image: linear-gradient(rgba(255,255,255,.21), rgba(255,255,255,.04)), url("/assets/visual/rice-paper.webp"); background-size: auto, 760px auto; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 12px 12px; box-shadow: var(--shadow-paper); }
.lesson-visual__frame { overflow: hidden; width: 100%; max-width: 470px; aspect-ratio: 3 / 4; margin-inline: auto; background: var(--paper-deep); border-radius: 14px; box-shadow: var(--shadow-paper); }
.lesson-visual__frame.lesson-visual__frame--video { max-width: 900px; aspect-ratio: 16 / 9; }
.lesson-visual__frame img, .lesson-visual__frame video { display: block; width: 100%; height: 100%; object-fit: cover; }
.poem-study { min-width: 0; }
.poem-card { padding: 8px 0 12px; text-align: center; }
.poem-lines { display: grid; gap: 8px; margin-top: 22px; }
.poem-line { display: flex; min-width: 0; align-items: flex-end; justify-content: center; }
.listen-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-top: 22px; }
.study-card__figure { max-width: 760px; margin: 18px auto 0; padding: clamp(8px, 1.5vw, 16px); background: #e8dcc7; border: 1px solid rgba(91,65,39,.2); border-radius: 8px; box-shadow: inset 0 0 0 4px rgba(255,255,255,.28), 0 14px 34px rgba(72,49,30,.14); }
.study-card__figure img { display: block; width: 100%; height: auto; border-radius: 3px; }
.meaning-card__content { display: grid; gap: 16px; }
.insight-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 16px 0 0; padding: 0; list-style: none; }
.practice-cta { display: flex; justify-content: center; padding: 26px 0 0; }
.exercise-page { max-width: 1060px; }
.exercise-intro { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 28px; background: var(--paper-bright); border: 1px solid var(--line); border-top: 0; }
.exercise-form { display: grid; gap: 16px; margin-top: 16px; }
.exercise-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.exercise-tip { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; margin-top: 16px; padding: 18px; background: #eee4d2; border-radius: var(--radius-card); }