/* Web App elements stay inert on the existing desktop site. */
.webapp-museum-home,
.webapp-subpage-bar,
.webapp-museum-dock,
.webapp-role-label,
.webapp-mobile-only,
.webapp-credit-content,
.webapp-collection-content {
  display: none;
}

@media (max-width: 760px) {
  :root {
    --webapp-night: #1d1012;
    --webapp-night-deep: #150d0e;
    --webapp-wine: #6e1f2a;
    --webapp-wine-deep: #551721;
    --webapp-navy: #243146;
    --webapp-paper: #f3e7d0;
    --webapp-paper-light: #fff8e9;
    --webapp-gold: #d8b56f;
    --webapp-gold-deep: #b28a45;
    --webapp-ink: #392d28;
    --webapp-muted: #7b6858;
    --webapp-line: rgba(178, 138, 69, 0.38);
    --webapp-serif: "Songti SC", "STSong", "Noto Serif SC", Georgia, serif;
  }

  html.webapp-mobile {
    min-height: 100%;
    background: var(--webapp-night);
    color-scheme: light;
  }

  html.webapp-mobile,
  html.webapp-mobile body {
    width: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
  }

  .webapp-mobile-mode {
    min-height: 100svh;
    letter-spacing: 0;
    -webkit-tap-highlight-color: transparent;
  }

  .webapp-mobile-mode button,
  .webapp-mobile-mode a,
  .webapp-mobile-mode input,
  .webapp-mobile-mode select,
  .webapp-mobile-mode textarea,
  .webapp-mobile-mode summary {
    touch-action: manipulation;
  }

  body.student-body.webapp-mobile-mode {
    background-color: var(--webapp-night);
    background-image: url("./assets/theme/leather-lacquer-bg.jpg");
    background-position: center top;
    background-size: 760px auto;
    background-attachment: scroll;
    color: #f4ead8;
  }

  .student-body.webapp-mobile-mode > .site-header,
  .student-body.webapp-mobile-mode .portal-shell > .portal-hero,
  .student-body.webapp-mobile-mode .portal-shell > .student-status-summary,
  .student-body.webapp-mobile-mode .portal-shell > .portal-tabs {
    display: none !important;
  }

  .student-body.webapp-mobile-mode .portal-shell {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 0 calc(86px + env(safe-area-inset-bottom));
  }

  .student-body.webapp-mobile-mode.webapp-home-active [data-portal-page] {
    display: none !important;
  }

  .student-body.webapp-mobile-mode:not(.webapp-home-active) #webappStudentHomeMount {
    display: none;
  }

  .student-body.webapp-qa-preview:not(.webapp-home-active) #webappStudentHomeMount {
    display: block;
  }

  .webapp-museum-home {
    display: block;
    min-height: 100svh;
    padding: calc(20px + env(safe-area-inset-top)) 16px calc(112px + env(safe-area-inset-bottom));
    color: #f4ead8;
  }

  .webapp-museum-top {
    display: flex;
    min-height: 56px;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
  }

  .webapp-museum-seal {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    object-fit: contain;
    border: 1px solid rgba(216, 181, 111, 0.72);
    border-radius: 50%;
    background: rgba(255, 249, 236, 0.94);
    padding: 5px;
  }

  .webapp-museum-title-wrap,
  .webapp-museum-top > div {
    min-width: 0;
    flex: 1;
  }

  .webapp-museum-kicker,
  .webapp-museum-top > div > span,
  .webapp-weekly-heading span,
  .webapp-semester-ribbon small,
  .webapp-keepsake-ticket > span,
  .webapp-lesson-shelf > div > span,
  .webapp-homework-shelf > span,
  .webapp-chapter-note > span {
    display: block;
    color: var(--webapp-gold);
    font-size: 10px;
    font-weight: 750;
    line-height: 1.25;
  }

  .webapp-museum-title,
  .webapp-museum-top > div > strong {
    display: block;
    margin-top: 4px;
    overflow: hidden;
    color: #f4ead8;
    font-family: var(--webapp-serif);
    font-size: 19px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .webapp-profile-button {
    display: grid;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    place-items: center;
    overflow: hidden;
    padding: 0;
    border: 1px solid rgba(216, 181, 111, 0.55);
    border-radius: 50%;
    background: transparent;
    color: #f0d79e;
    box-shadow: none;
    font-size: 15px;
  }

  .webapp-profile-button img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .webapp-chapter-book {
    display: flex;
    min-height: 326px;
    gap: 12px;
    overflow: hidden;
    padding: 24px 16px 20px 21px;
    border: 1px solid #d2ad6c;
    border-left: 10px solid var(--webapp-navy);
    border-radius: 6px 18px 18px 6px;
    background-color: var(--webapp-paper);
    background-image: url("./assets/theme/parchment-paper.jpg");
    background-position: center;
    background-size: cover;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.3);
    color: var(--webapp-ink);
  }

  .webapp-chapter-copy {
    display: flex;
    min-width: 0;
    flex: 1 1 52%;
    flex-direction: column;
    align-items: flex-start;
  }

  .webapp-chapter-number {
    color: #72242b;
    font-family: var(--webapp-serif);
    font-size: 23px;
    font-weight: 700;
  }

  .webapp-chapter-stage {
    display: -webkit-box;
    margin-top: 12px;
    overflow: hidden;
    color: #513a2d;
    font-family: var(--webapp-serif);
    font-size: 17px;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .webapp-progress-ring {
    display: grid;
    width: 78px;
    height: 78px;
    margin-top: auto;
    place-items: center;
    border: 7px solid var(--webapp-gold-deep);
    border-top-color: #d9cdb5;
    border-radius: 50%;
    color: #71242a;
    font-family: var(--webapp-serif);
    font-size: 18px;
    font-weight: 700;
  }

  .webapp-progress-ring span {
    max-width: 56px;
    text-align: center;
  }

  .webapp-chapter-copy > p {
    display: -webkit-box;
    margin: 10px 0 0;
    overflow: hidden;
    color: #643a36;
    font-size: 12px;
    line-height: 1.5;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .webapp-chapter-portrait {
    width: min(43%, 160px);
    height: 235px;
    flex: 0 0 min(43%, 160px);
    margin-top: 20px;
    border: 5px solid #fff9ea;
    border-radius: 82px 82px 9px 9px;
    object-fit: cover;
    object-position: 54% center;
    box-shadow: 0 10px 22px rgba(64, 34, 22, 0.22);
  }

  .webapp-semester-ribbon {
    display: flex;
    width: 100%;
    min-height: 48px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 6px;
    padding: 8px 14px;
    border: 1px solid #9d7c3c;
    border-radius: 4px;
    background: var(--webapp-navy);
    color: #f3e6c8;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
    text-align: left;
  }

  .webapp-semester-ribbon > span {
    min-width: 0;
    flex: 1;
  }

  .webapp-semester-ribbon strong {
    display: block;
    margin-top: 4px;
    overflow: hidden;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .webapp-semester-ribbon b {
    flex: 0 0 auto;
    color: #d8bd7d;
    font-size: 12px;
  }

  .webapp-chapter-note {
    display: none;
  }

  .webapp-chapter-note p {
    display: -webkit-box;
    margin: 6px 0 0;
    overflow: hidden;
    color: #eee3cf;
    font-family: var(--webapp-serif);
    font-size: 14px;
    line-height: 1.6;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .webapp-weekly-heading {
    display: none;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-top: 28px;
  }

  .webapp-weekly-heading h2 {
    margin: 5px 0 0;
    color: #f7ead2;
    font-family: var(--webapp-serif);
    font-size: 22px;
  }

  .webapp-weekly-heading button {
    min-height: 34px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #d9bb78;
    box-shadow: none;
    font-size: 12px;
  }

  .webapp-quest-shelf {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
  }

  .webapp-quest-card {
    display: flex;
    min-width: 0;
    min-height: 130px;
    flex-direction: column;
    align-items: flex-start;
    padding: 14px 11px;
    border: 1px solid #cfb483;
    border-radius: 6px;
    background: #efe4cf;
    color: var(--webapp-ink);
    box-shadow: none;
    text-align: left;
  }

  .webapp-quest-card.is-current {
    border-color: #b9934b;
    background: #f5ead4;
  }

  .webapp-quest-card.is-complete {
    border-color: #7d8a68;
    background: #e8eadf;
  }

  .webapp-quest-card strong {
    display: -webkit-box;
    overflow: hidden;
    font-family: var(--webapp-serif);
    font-size: 13px;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .webapp-quest-card > span {
    display: block;
    margin-top: auto;
    color: #7b3a37;
    font-size: 11px;
    font-weight: 750;
  }

  .webapp-quest-card > i {
    display: block;
    width: 100%;
    height: 4px;
    margin-top: 7px;
    overflow: hidden;
    border-radius: 4px;
    background: rgba(70, 48, 38, 0.15);
  }

  .webapp-quest-card > i > b {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #b78c43;
  }

  .webapp-quiet-empty {
    margin-top: 14px;
    padding: 20px;
    border: 1px dashed rgba(221, 195, 143, 0.4);
    color: #c6b69f;
    font-size: 13px;
  }

  .webapp-quiet-empty strong {
    display: block;
    color: #f4e5c6;
    font-family: var(--webapp-serif);
    font-size: 16px;
  }

  .webapp-quiet-empty p {
    margin: 5px 0 0;
  }

  .webapp-chapter-cta {
    width: 100%;
    min-height: 48px;
    margin-top: 8px;
    border: 1px solid #d1ad6e;
    border-radius: 6px;
    background: var(--webapp-wine);
    color: #fff6e5;
    font-family: var(--webapp-serif);
    font-size: 17px;
    font-weight: 700;
  }

  .webapp-keepsake-ticket {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 12px;
    padding: 15px 17px;
    border: 1px solid #d1ad6e;
    border-radius: 5px;
    background-color: #ead6a7;
    background-image: url("./assets/theme/parchment-paper.jpg");
    background-size: cover;
    color: #3a2924;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
    text-align: left;
  }

  .webapp-keepsake-ticket > span {
    color: #775924;
  }

  .webapp-keepsake-ticket strong {
    display: -webkit-box;
    margin-top: 6px;
    overflow: hidden;
    color: #412d2b;
    font-family: var(--webapp-serif);
    font-size: 17px;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .webapp-keepsake-ticket p {
    display: -webkit-box;
    margin: 5px 0 0;
    overflow: hidden;
    color: #6d5346;
    font-size: 12px;
    line-height: 1.5;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .webapp-lesson-shelf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
    padding: 16px;
    border: 1px solid rgba(215, 185, 129, 0.28);
    background: rgba(255, 250, 238, 0.06);
  }

  .webapp-lesson-shelf > div {
    min-width: 0;
    flex: 1;
  }

  .webapp-lesson-shelf strong {
    display: block;
    margin-top: 5px;
    overflow: hidden;
    color: #f5e7cf;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .webapp-lesson-shelf p {
    margin: 4px 0 0;
    color: #bba98e;
    font-size: 11px;
  }

  .webapp-lesson-shelf button {
    min-height: 38px;
    flex: 0 0 82px;
    border: 1px solid #cba963;
    border-radius: 4px;
    background: transparent;
    color: #e9ce90;
    box-shadow: none;
    font-size: 12px;
  }

  .webapp-homework-shelf {
    margin-top: 18px;
    padding: 18px;
    border-top: 1px solid rgba(215, 185, 129, 0.35);
    border-bottom: 1px solid rgba(215, 185, 129, 0.35);
  }

  .webapp-homework-shelf h2 {
    margin: 5px 0 0;
    color: #f2e6d1;
    font-family: var(--webapp-serif);
    font-size: 17px;
  }

  .webapp-homework-shelf p {
    margin: 11px 0 0;
    color: #d8c9b3;
    font-size: 13px;
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }

  .webapp-museum-dock {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 70;
    display: flex;
    min-height: calc(64px + env(safe-area-inset-bottom));
    padding: 7px 8px calc(7px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(218, 189, 132, 0.22);
    background-color: rgba(21, 13, 14, 0.98);
    background-image: url("./assets/theme/leather-lacquer-bg.jpg");
    background-position: center bottom;
    background-size: 760px auto;
    box-shadow: 0 -10px 28px rgba(4, 2, 2, 0.35);
  }

  .webapp-museum-dock button {
    min-width: 0;
    min-height: 48px;
    flex: 1;
    padding: 0 3px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #a89c8b;
    box-shadow: none;
    font-size: 12px;
  }

  .webapp-museum-dock button.is-active {
    background: rgba(232, 208, 158, 0.08);
    color: #f1d28b;
    font-weight: 750;
  }

  .webapp-subpage-bar {
    position: sticky;
    top: 0;
    z-index: 48;
    display: flex;
    min-height: calc(62px + env(safe-area-inset-top));
    align-items: flex-end;
    gap: 9px;
    padding: calc(10px + env(safe-area-inset-top)) 13px 10px;
    border-bottom: 1px solid rgba(218, 189, 132, 0.22);
    background: rgba(21, 13, 14, 0.98);
    color: #f4ead8;
  }

  .webapp-home-active .webapp-subpage-bar {
    display: none;
  }

  .webapp-subpage-bar > div {
    min-width: 0;
    flex: 1;
    text-align: center;
  }

  .webapp-subpage-bar span {
    display: block;
    color: var(--webapp-gold);
    font-size: 8px;
    font-weight: 750;
  }

  .webapp-subpage-bar strong {
    display: block;
    margin-top: 3px;
    overflow: hidden;
    font-family: var(--webapp-serif);
    font-size: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .webapp-subpage-bar button {
    min-width: 58px;
    min-height: 38px;
    padding: 0 10px;
    border: 1px solid rgba(216, 181, 111, 0.45);
    border-radius: 4px;
    background: transparent;
    color: #e9d6ad;
    box-shadow: none;
    font-size: 11px;
  }

  .webapp-home-skeleton {
    display: grid;
    gap: 14px;
  }

  .webapp-home-skeleton i {
    display: block;
    min-height: 82px;
    border: 1px solid rgba(216, 181, 111, 0.22);
    background: rgba(255, 248, 232, 0.07);
    animation: webapp-soft-pulse 1.4s ease-in-out infinite alternate;
  }

  .webapp-home-skeleton i:first-child {
    min-height: 326px;
  }

  .webapp-loading-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--webapp-gold);
    animation: webapp-soft-pulse 1s ease-in-out infinite alternate;
  }

  .webapp-home-error {
    display: flex;
    min-height: 100svh;
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }

  .webapp-home-error > span {
    color: var(--webapp-gold);
    font-size: 10px;
    font-weight: 750;
  }

  .webapp-home-error h1 {
    margin: 12px 0 0;
    font-family: var(--webapp-serif);
    font-size: 24px;
  }

  .webapp-home-error p {
    margin: 12px 0 0;
    color: #c8b7a0;
    font-size: 14px;
  }

  .webapp-home-error button {
    min-height: 50px;
    margin-top: 24px;
    border: 1px solid #d1ad6e;
    border-radius: 5px;
    background: var(--webapp-wine);
    color: #fff6e5;
  }

  @keyframes webapp-soft-pulse {
    from { opacity: 0.52; }
    to { opacity: 0.9; }
  }

  /* Student sub-pages reuse every existing workflow in a mobile archive shell. */
  .student-body.webapp-mobile-mode:not(.webapp-home-active) [data-portal-page].is-active {
    display: block;
    width: 100%;
    margin: 0;
    padding: 14px 12px 24px;
  }

  .student-body.webapp-mobile-mode:not(.webapp-home-active) [data-portal-page]:not(.is-active) {
    display: none !important;
  }

  .student-body.webapp-mobile-mode .portal-main,
  .student-body.webapp-mobile-mode .portal-layout,
  .student-body.webapp-mobile-mode .portal-panel,
  .student-body.webapp-mobile-mode .journey-page-shell {
    width: 100%;
    max-width: none;
    margin: 0;
  }

  .student-body.webapp-mobile-mode .portal-panel,
  .student-body.webapp-mobile-mode .journey-v2-section,
  .student-body.webapp-mobile-mode .journey-v2-archive,
  .student-body.webapp-mobile-mode .journey-v2-hero {
    border: 1px solid var(--webapp-line);
    border-radius: 7px;
    background-color: var(--webapp-paper);
    background-image: url("./assets/theme/parchment-paper.jpg");
    background-size: cover;
    color: var(--webapp-ink);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
  }

  .student-body.webapp-mobile-mode .portal-panel {
    padding: 19px 15px;
  }

  .student-body.webapp-mobile-mode .portal-panel h2,
  .student-body.webapp-mobile-mode .journey-v2-section h3,
  .student-body.webapp-mobile-mode .journey-v2-hero h2 {
    color: #4c2927;
    font-family: var(--webapp-serif);
  }

  .student-body.webapp-mobile-mode .eyebrow,
  .student-body.webapp-mobile-mode .journey-kicker,
  .student-body.webapp-mobile-mode .journey-v2-heading span {
    color: #916b2c;
  }

  .student-body.webapp-mobile-mode .panel-copy,
  .student-body.webapp-mobile-mode .form-note,
  .student-body.webapp-mobile-mode .journey-v2-teacher-summary,
  .student-body.webapp-mobile-mode .journey-v2-empty p {
    color: var(--webapp-muted);
  }

  .student-body.webapp-mobile-mode .booking-controls {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
    margin-top: 12px;
  }

  .student-body.webapp-mobile-mode #schedule > .panel-heading {
    display: none;
  }

  .student-body.webapp-mobile-mode #schedule > .panel-copy {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
  }

  .student-body.webapp-mobile-mode #schedule .booking-credit-note {
    margin: 12px 0;
    padding: 10px 12px;
    font-size: 12px;
    line-height: 1.55;
  }

  .student-body.webapp-mobile-mode label {
    color: #5d473c;
    font-size: 13px;
  }

  .student-body.webapp-mobile-mode input,
  .student-body.webapp-mobile-mode select,
  .student-body.webapp-mobile-mode textarea {
    min-height: 46px;
    border: 1px solid rgba(123, 94, 61, 0.32);
    border-radius: 5px;
    background: rgba(255, 252, 244, 0.82);
    color: #332823;
    font-size: 15px;
  }

  .student-body.webapp-mobile-mode .teacher-card-picker {
    grid-template-columns: 1fr;
  }

  .student-body.webapp-mobile-mode .teacher-card {
    grid-template-columns: 48px minmax(0, 1fr);
    min-height: 76px;
    padding: 12px;
    border-radius: 6px;
    background: rgba(255, 250, 238, 0.78);
  }

  .student-body.webapp-mobile-mode .teacher-card-avatar {
    width: 48px;
    height: 48px;
  }

  .student-body.webapp-mobile-mode .date-strip {
    grid-auto-columns: minmax(78px, 86px);
    margin-inline: -15px;
    padding: 4px 15px 10px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .student-body.webapp-mobile-mode .date-strip::-webkit-scrollbar {
    display: none;
  }

  .student-body.webapp-mobile-mode .date-strip button {
    min-width: 72px;
    scroll-snap-align: start;
    border-radius: 5px;
    background: rgba(255, 250, 238, 0.72);
  }

  .student-body.webapp-mobile-mode .date-strip button.is-active {
    background: var(--webapp-wine);
    color: #fff7e7;
  }

  .student-body.webapp-mobile-mode .timeline-row {
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 9px;
    min-height: 72px;
    border-radius: 5px;
    background: rgba(255, 250, 238, 0.72);
  }

  .student-body.webapp-mobile-mode .timeline-track {
    min-width: 0;
  }

  .student-body.webapp-mobile-mode .journey-page-shell {
    display: grid;
    gap: 12px;
  }

  .student-body.webapp-mobile-mode .journey-v2-hero {
    display: block;
    padding: 22px 18px;
    border-left: 7px solid var(--webapp-wine);
  }

  .student-body.webapp-mobile-mode .journey-v2-progress-block {
    margin-top: 16px;
    padding-top: 15px;
    border-top: 1px solid rgba(123, 94, 61, 0.25);
  }

  .student-body.webapp-mobile-mode .journey-v2-section,
  .student-body.webapp-mobile-mode .journey-v2-archive {
    margin-top: 12px;
    padding: 19px 16px;
  }

  .student-body.webapp-mobile-mode .journey-v2-heading {
    align-items: flex-start;
  }

  .student-body.webapp-mobile-mode .journey-semester-goal,
  .student-body.webapp-mobile-mode .journey-goal-card,
  .student-body.webapp-mobile-mode .journey-milestone-card,
  .student-body.webapp-mobile-mode .journey-node {
    border-radius: 5px;
    background: rgba(255, 252, 244, 0.72);
  }

  .student-body.webapp-mobile-mode .student-certificate-gallery {
    grid-template-columns: 1fr;
  }

  .student-body.webapp-mobile-mode .student-certificate-card {
    border-radius: 6px;
    background: rgba(255, 252, 244, 0.74);
  }

  .student-body.webapp-mobile-mode .student-certificate-card img {
    max-height: none;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    background: #eee5d3;
  }

  .student-body.webapp-mobile-mode .credit-balance-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .student-body.webapp-mobile-mode .credit-ledger article {
    border-radius: 5px;
    background: rgba(255, 252, 244, 0.7);
  }

  .student-body.webapp-mobile-mode .webapp-profile-page {
    color: var(--webapp-ink);
  }

  .webapp-profile-skeleton {
    display: grid;
    gap: 12px;
  }

  .webapp-profile-skeleton i {
    min-height: 92px;
    border: 1px solid rgba(216, 181, 111, 0.24);
    background: rgba(255, 248, 232, 0.08);
    animation: webapp-soft-pulse 1.4s ease-in-out infinite alternate;
  }

  .webapp-profile-hub {
    display: grid;
    gap: 12px;
  }

  .webapp-profile-identity-card {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 18px 16px;
    border: 1px solid var(--webapp-line);
    border-left: 6px solid var(--webapp-wine);
    border-radius: 7px;
    background: url("./assets/theme/parchment-paper.jpg") center / cover;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
  }

  .webapp-profile-avatar {
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    overflow: hidden;
    border: 1px solid #bd9551;
    border-radius: 50%;
    background: var(--webapp-wine);
    color: #fff4dc;
    font-family: var(--webapp-serif);
    font-size: 22px;
  }

  .webapp-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .webapp-profile-identity-card > div {
    min-width: 0;
  }

  .webapp-profile-identity-card > div > span,
  .webapp-profile-section header span {
    color: #916b2c;
    font-size: 9px;
    font-weight: 780;
  }

  .webapp-profile-identity-card h1 {
    margin: 4px 0 0;
    overflow: hidden;
    color: #4c2927;
    font-family: var(--webapp-serif);
    font-size: 23px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .webapp-profile-identity-card p {
    margin: 4px 0 0;
    overflow: hidden;
    color: var(--webapp-muted);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .webapp-profile-identity-card > button {
    min-width: 54px;
    min-height: 38px;
    padding: 0 10px;
    border: 1px solid rgba(110, 31, 42, 0.28);
    border-radius: 4px;
    background: rgba(255, 252, 244, 0.58);
    color: var(--webapp-wine);
    box-shadow: none;
    font-size: 12px;
  }

  .webapp-profile-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .webapp-profile-stats > article,
  .webapp-profile-stats > button {
    display: grid;
    min-height: 96px;
    align-content: center;
    justify-items: start;
    padding: 15px;
    border: 1px solid var(--webapp-line);
    border-radius: 6px;
    background: url("./assets/theme/parchment-paper.jpg") center / cover;
    color: var(--webapp-ink);
    box-shadow: 0 9px 22px rgba(0, 0, 0, 0.17);
    text-align: left;
  }

  .webapp-profile-stats span {
    color: var(--webapp-muted);
    font-size: 11px;
  }

  .webapp-profile-stats strong {
    margin-top: 7px;
    color: #5b2a2d;
    font-family: var(--webapp-serif);
    font-size: 30px;
  }

  .webapp-profile-stats small {
    margin-left: 5px;
    color: var(--webapp-muted);
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
    font-size: 11px;
  }

  .webapp-profile-section {
    padding: 18px 16px;
    border: 1px solid var(--webapp-line);
    border-radius: 7px;
    background: url("./assets/theme/parchment-paper.jpg") center / cover;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
  }

  .webapp-profile-section header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(123, 94, 61, 0.22);
  }

  .webapp-profile-section h2 {
    margin: 4px 0 0;
    color: #4c2927;
    font-family: var(--webapp-serif);
    font-size: 20px;
  }

  .webapp-profile-section header > b {
    color: #8b6a33;
    font-size: 11px;
  }

  .webapp-profile-section ol {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .webapp-profile-section li {
    padding: 13px 0;
    border-bottom: 1px dashed rgba(123, 94, 61, 0.2);
    color: #493830;
    font-size: 14px;
    line-height: 1.7;
    overflow-wrap: anywhere;
  }

  .webapp-profile-section li:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .webapp-profile-empty {
    padding: 18px 0 2px;
  }

  .webapp-profile-empty strong {
    display: block;
    color: #513d33;
    font-size: 14px;
  }

  .webapp-profile-empty p {
    margin: 5px 0 0;
    color: var(--webapp-muted);
    font-size: 12px;
  }

  .webapp-redemption-list article {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 0;
    border-bottom: 1px dashed rgba(123, 94, 61, 0.2);
  }

  .webapp-redemption-list article:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .webapp-redemption-list strong,
  .webapp-redemption-list span {
    display: block;
  }

  .webapp-redemption-list strong {
    color: #493830;
    font-size: 14px;
  }

  .webapp-redemption-list span {
    margin-top: 3px;
    color: var(--webapp-muted);
    font-size: 11px;
  }

  .webapp-redemption-list article > b {
    color: var(--webapp-wine);
    font-size: 13px;
  }

  .webapp-account-actions {
    display: grid;
    overflow: hidden;
    border: 1px solid var(--webapp-line);
    border-radius: 7px;
    background: url("./assets/theme/parchment-paper.jpg") center / cover;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
  }

  .webapp-account-actions button {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 22px;
    align-items: center;
    min-height: 66px;
    padding: 14px 16px;
    border: 0;
    border-bottom: 1px solid rgba(123, 94, 61, 0.2);
    border-radius: 0;
    background: transparent;
    color: #493830;
    box-shadow: none;
    text-align: left;
  }

  .webapp-account-actions button:last-child {
    border-bottom: 0;
  }

  .webapp-account-action-copy {
    display: grid;
    min-width: 0;
    gap: 4px;
    justify-items: start;
  }

  .webapp-account-action-copy strong {
    font-size: 14px;
    font-weight: 720;
  }

  .webapp-account-action-copy small {
    color: var(--webapp-muted);
    font-size: 11px;
    line-height: 1.4;
    text-align: left;
  }

  .webapp-account-action-arrow {
    align-self: center;
    color: #9d7b48;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
    font-size: 23px;
    font-style: normal;
    font-weight: 300;
    line-height: 1;
    text-align: right;
  }

  .webapp-account-actions button.is-logout .webapp-account-action-copy strong,
  .webapp-account-actions button.is-logout .webapp-account-action-arrow {
    color: var(--webapp-wine);
  }

  /* Teacher and admin retain the complete website tools inside the mini-program workbench language. */
  .teacher-body.webapp-mobile-mode,
  .admin-body.webapp-mobile-mode {
    background: #f6f5f1;
    color: #1d2430;
  }

  .teacher-body.webapp-mobile-mode .site-header,
  .admin-body.webapp-mobile-mode .site-header {
    position: sticky;
    top: 0;
    z-index: 65;
    min-height: calc(60px + env(safe-area-inset-top));
    padding: calc(8px + env(safe-area-inset-top)) 14px 8px;
    border-bottom: 1px solid #e6e0d7;
    background: rgba(255, 254, 250, 0.97);
    box-shadow: 0 5px 18px rgba(29, 36, 48, 0.06);
  }

  .teacher-body.webapp-mobile-mode .main-nav,
  .admin-body.webapp-mobile-mode .main-nav,
  .teacher-body.webapp-mobile-mode .header-link,
  .admin-body.webapp-mobile-mode .header-link,
  .teacher-body.webapp-mobile-mode .site-header .header-action,
  .admin-body.webapp-mobile-mode .site-header .header-action {
    display: none !important;
  }

  .teacher-body.webapp-mobile-mode .brand,
  .admin-body.webapp-mobile-mode .brand {
    min-width: 0;
    gap: 8px;
    color: #1d2430;
    font-size: 14px;
  }

  .teacher-body.webapp-mobile-mode .brand-mark,
  .admin-body.webapp-mobile-mode .brand-mark {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .teacher-body.webapp-mobile-mode .brand-mark img,
  .admin-body.webapp-mobile-mode .brand-mark img {
    object-fit: contain;
  }

  .webapp-role-label {
    display: inline-flex;
    margin-left: auto;
    color: #687080;
    font-size: 12px;
    font-weight: 700;
  }

  .teacher-body.webapp-mobile-mode .portal-shell,
  .admin-body.webapp-mobile-mode .portal-shell {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 12px 12px calc(84px + env(safe-area-inset-bottom));
  }

  .teacher-body.webapp-mobile-mode .portal-hero,
  .admin-body.webapp-mobile-mode .portal-hero {
    min-height: 174px;
    padding: 24px 20px;
    border: 0;
    border-radius: 8px;
    background: #263b55;
    color: #fff;
    box-shadow: 0 12px 30px rgba(29, 36, 48, 0.15);
  }

  .admin-body.webapp-mobile-mode .portal-hero {
    background: #233f38;
  }

  .teacher-body.webapp-mobile-mode .portal-hero h1,
  .admin-body.webapp-mobile-mode .portal-hero h1 {
    font-size: 30px;
  }

  .teacher-body.webapp-mobile-mode .portal-hero p:not(.eyebrow),
  .admin-body.webapp-mobile-mode .portal-hero p:not(.eyebrow) {
    display: -webkit-box;
    margin-top: 10px;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.6;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .teacher-body.webapp-mobile-mode .portal-hero-actions,
  .admin-body.webapp-mobile-mode .portal-hero-actions {
    display: none;
  }

  .teacher-body.webapp-mobile-mode .teacher-brief {
    display: block;
    margin: 10px 0;
    padding: 15px;
    border: 1px solid #e8e3da;
    border-radius: 8px;
    background: #fffefa;
    box-shadow: 0 7px 22px rgba(29, 36, 48, 0.055);
  }

  .teacher-body.webapp-mobile-mode .teacher-brief > div:first-child {
    display: flex;
    align-items: baseline;
    gap: 9px;
  }

  .teacher-body.webapp-mobile-mode .teacher-brief .eyebrow {
    margin: 0;
    font-size: 10px;
  }

  .teacher-body.webapp-mobile-mode .teacher-brief h2 {
    margin: 0;
    font-size: 18px;
  }

  .teacher-body.webapp-mobile-mode .teacher-brief-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-top: 12px;
  }

  .teacher-body.webapp-mobile-mode .teacher-brief-list article {
    min-height: 76px;
    padding: 10px;
    border: 1px solid #ece7de;
    border-radius: 6px;
    background: #f9f7f2;
  }

  .teacher-body.webapp-mobile-mode > .portal-shell > .portal-tabs {
    position: fixed;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 70;
    display: flex;
    height: auto;
    align-items: stretch;
    margin: 0;
    padding: 7px 7px calc(7px + env(safe-area-inset-bottom));
    border: 0;
    border-top: 1px solid #ddd8cf;
    border-radius: 0;
    background: rgba(255, 254, 250, 0.98);
    box-shadow: 0 -8px 24px rgba(29, 36, 48, 0.09);
  }

  .teacher-body.webapp-mobile-mode > .portal-shell > .portal-tabs button {
    min-width: 0;
    min-height: 48px;
    flex: 1;
    padding: 4px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: #747a80;
    box-shadow: none;
    font-size: 11px;
  }

  .teacher-body.webapp-mobile-mode > .portal-shell > .portal-tabs button.is-active {
    background: #1d2430;
    color: #fff;
  }

  .admin-body.webapp-mobile-mode .admin-leaf-tabs {
    position: sticky;
    top: calc(60px + env(safe-area-inset-top));
    z-index: 55;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 6px;
    margin: 10px -12px 12px;
    padding: 8px 12px;
    overflow-x: auto;
    border: 0;
    border-top: 1px solid #e7e2d9;
    border-bottom: 1px solid #e7e2d9;
    border-radius: 0;
    background: rgba(246, 245, 241, 0.98);
    scrollbar-width: none;
  }

  .admin-body.webapp-mobile-mode .admin-leaf-tabs::-webkit-scrollbar {
    display: none;
  }

  .admin-body.webapp-mobile-mode .admin-leaf-tabs button {
    min-width: max-content;
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid #ddd8cf;
    border-radius: 6px;
    background: #fffefa;
    color: #687080;
    box-shadow: none;
    font-size: 12px;
  }

  .admin-body.webapp-mobile-mode .admin-leaf-tabs button.is-active {
    border-color: #233f38;
    background: #233f38;
    color: #fff;
  }

  .teacher-body.webapp-mobile-mode .portal-page.is-active,
  .admin-body.webapp-mobile-mode .portal-page.is-active {
    width: 100%;
    margin-top: 10px;
  }

  .teacher-body.webapp-mobile-mode .portal-panel,
  .admin-body.webapp-mobile-mode .portal-panel,
  .teacher-body.webapp-mobile-mode .journey-editor-shell,
  .admin-body.webapp-mobile-mode .journey-editor-shell,
  .admin-body.webapp-mobile-mode .journey-catalog-editor {
    padding: 18px 15px;
    border: 1px solid #e8e3da;
    border-radius: 8px;
    background: #fffefa;
    box-shadow: 0 8px 24px rgba(29, 36, 48, 0.055);
  }

  .teacher-body.webapp-mobile-mode .panel-heading,
  .admin-body.webapp-mobile-mode .panel-heading {
    align-items: flex-start;
    gap: 10px;
  }

  .teacher-body.webapp-mobile-mode .panel-heading h2,
  .admin-body.webapp-mobile-mode .panel-heading h2 {
    font-size: 21px;
  }

  .teacher-body.webapp-mobile-mode .panel-actions,
  .admin-body.webapp-mobile-mode .panel-actions {
    width: auto;
  }

  .teacher-body.webapp-mobile-mode .panel-actions button,
  .admin-body.webapp-mobile-mode .panel-actions button {
    min-height: 38px;
    padding: 0 12px;
    font-size: 11px;
  }

  .teacher-body.webapp-mobile-mode .portal-summary,
  .admin-body.webapp-mobile-mode .portal-summary,
  .teacher-body.webapp-mobile-mode .student-hub-summary,
  .admin-body.webapp-mobile-mode .admin-command-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .teacher-body.webapp-mobile-mode .portal-summary article,
  .admin-body.webapp-mobile-mode .portal-summary article,
  .teacher-body.webapp-mobile-mode .student-hub-summary article,
  .admin-body.webapp-mobile-mode .admin-command-grid article {
    min-height: 88px;
    padding: 14px;
    border: 1px solid #e8e3da;
    border-radius: 7px;
    background: #fffefa;
  }

  .teacher-body.webapp-mobile-mode .booking-controls,
  .teacher-body.webapp-mobile-mode .student-manager-toolbar,
  .teacher-body.webapp-mobile-mode .student-hub-grid,
  .teacher-body.webapp-mobile-mode .journey-editor-grid,
  .admin-body.webapp-mobile-mode .admin-schedule-controls,
  .admin-body.webapp-mobile-mode .admin-alert-grid,
  .admin-body.webapp-mobile-mode .account-form-grid,
  .admin-body.webapp-mobile-mode .inquiry-form-grid,
  .admin-body.webapp-mobile-mode .journey-editor-grid,
  .admin-body.webapp-mobile-mode .journey-framework-main-fields {
    grid-template-columns: 1fr;
  }

  .teacher-body.webapp-mobile-mode input,
  .teacher-body.webapp-mobile-mode select,
  .teacher-body.webapp-mobile-mode textarea,
  .admin-body.webapp-mobile-mode input,
  .admin-body.webapp-mobile-mode select,
  .admin-body.webapp-mobile-mode textarea,
  .login-page.webapp-mobile-mode input,
  .login-page.webapp-mobile-mode select,
  .login-page.webapp-mobile-mode textarea,
  .registration-page.webapp-mobile-mode input,
  .registration-page.webapp-mobile-mode select,
  .registration-page.webapp-mobile-mode textarea {
    min-height: 46px;
    border-radius: 6px;
    font-size: 15px;
  }

  .teacher-body.webapp-mobile-mode .timeline-row,
  .admin-body.webapp-mobile-mode .timeline-row {
    border-radius: 7px;
  }

  .teacher-body.webapp-mobile-mode dialog,
  .admin-body.webapp-mobile-mode dialog,
  .student-body.webapp-mobile-mode dialog {
    padding: 12px;
  }

  .teacher-body.webapp-mobile-mode dialog > *,
  .admin-body.webapp-mobile-mode dialog > *,
  .student-body.webapp-mobile-mode dialog > * {
    width: min(100%, 520px);
    max-height: calc(100svh - 24px);
    overflow-y: auto;
    border-radius: 10px;
  }

  .student-body.webapp-mobile-mode .profile-dialog {
    width: 100vw;
    max-width: none;
    height: 100svh;
    max-height: none;
    padding: 0;
    border-radius: 0;
  }

  .student-body.webapp-mobile-mode .profile-dialog > .profile-dialog-card {
    width: 100%;
    max-width: none;
    height: 100svh;
    max-height: none;
    padding: calc(18px + env(safe-area-inset-top)) 16px calc(20px + env(safe-area-inset-bottom));
    border: 0;
    border-radius: 0;
    background: #fffdf8;
    box-shadow: none;
  }

  .student-body.webapp-mobile-mode .profile-dialog-heading {
    position: sticky;
    top: calc(-18px - env(safe-area-inset-top));
    z-index: 2;
    margin: calc(-18px - env(safe-area-inset-top)) -16px 0;
    padding: calc(16px + env(safe-area-inset-top)) 16px 12px;
    border-bottom: 1px solid rgba(29, 36, 48, 0.08);
    background: #fffdf8;
  }

  .student-body.webapp-mobile-mode .profile-dialog-actions {
    align-items: flex-end;
  }

  .student-body.webapp-mobile-mode .profile-dialog-actions > div {
    display: flex;
    gap: 8px;
  }

  .student-body.webapp-mobile-mode .profile-dialog-actions button {
    min-height: 44px;
  }

  .student-body.webapp-mobile-mode .profile-mobile-logout {
    border: 1px solid rgba(110, 31, 42, 0.2);
    background: #fff8f3;
    color: var(--webapp-wine);
    box-shadow: none;
  }

  .profile-mobile-logout {
    display: none;
  }

  .student-body.webapp-mobile-mode .profile-mobile-logout {
    display: inline-flex;
  }

  /* Login and registration are full-screen app entry points on mobile. */
  .login-page.webapp-mobile-mode,
  .registration-page.webapp-mobile-mode {
    background: #f6f5f1;
  }

  .student-login-page.webapp-mobile-mode {
    background-color: var(--webapp-night);
    background-image: url("./assets/theme/leather-lacquer-bg.jpg");
    background-position: center top;
    background-size: 760px auto;
  }

  .login-page.webapp-mobile-mode .site-header,
  .registration-page.webapp-mobile-mode .site-header {
    min-height: calc(62px + env(safe-area-inset-top));
    padding: calc(8px + env(safe-area-inset-top)) 14px 8px;
  }

  .login-page.webapp-mobile-mode .main-nav,
  .registration-page.webapp-mobile-mode .main-nav,
  .login-page.webapp-mobile-mode .header-link,
  .registration-page.webapp-mobile-mode .header-link {
    display: none;
  }

  .login-page.webapp-mobile-mode .login-shell,
  .registration-page.webapp-mobile-mode .login-shell {
    display: block;
    min-height: calc(100svh - 62px);
    padding: 26px 16px calc(34px + env(safe-area-inset-bottom));
  }

  .login-page.webapp-mobile-mode .login-copy,
  .registration-page.webapp-mobile-mode .login-copy {
    margin-bottom: 18px;
  }

  .login-page.webapp-mobile-mode .login-copy h1,
  .registration-page.webapp-mobile-mode .login-copy h1 {
    font-size: 34px;
  }

  .login-page.webapp-mobile-mode .login-card,
  .registration-page.webapp-mobile-mode .login-card,
  .registration-page.webapp-mobile-mode .registration-card {
    width: 100%;
    padding: 22px 18px;
    border-radius: 9px;
  }

  .student-login-page.webapp-mobile-mode .login-copy,
  .student-login-page.webapp-mobile-mode .login-copy h1,
  .student-login-page.webapp-mobile-mode .login-copy p {
    color: #f3e6cf;
  }

  .student-login-page.webapp-mobile-mode .login-card {
    border: 1px solid rgba(216, 181, 111, 0.5);
    background-color: var(--webapp-paper);
    background-image: url("./assets/theme/parchment-paper.jpg");
    background-size: cover;
    color: var(--webapp-ink);
  }

  @media (display-mode: standalone) {
    .webapp-mobile-mode .site-header {
      user-select: none;
    }
  }
}

@media (max-width: 760px) {
  .webapp-preview-page {
    min-height: 100svh;
    padding: 18px 16px 112px;
    color: #f4ead8;
  }

  .webapp-preview-page-head {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 5px 12px;
    align-items: center;
    margin-bottom: 16px;
  }

  .webapp-preview-page-head span,
  .webapp-preview-stage > span,
  .webapp-preview-list header span,
  .webapp-preview-balance span,
  .webapp-preview-certificate > span {
    color: var(--webapp-gold);
    font-size: 10px;
    font-weight: 750;
  }

  .webapp-preview-page-head h1 {
    grid-column: 1;
    margin: 0;
    font-family: var(--webapp-serif);
    font-size: 27px;
  }

  .webapp-preview-page-head > span {
    grid-column: 1 / -1;
  }

  .webapp-preview-page-head button,
  .webapp-preview-profile button {
    grid-column: 2;
    grid-row: 2;
    min-height: 34px;
    padding: 0 11px;
    border: 1px solid rgba(216, 181, 111, .5);
    border-radius: 4px;
    background: transparent;
    color: #ecd8ae;
    font-size: 11px;
  }

  .webapp-preview-stage,
  .webapp-preview-list,
  .webapp-preview-certificate,
  .webapp-preview-profile,
  .webapp-preview-balance {
    margin-top: 12px;
    padding: 18px;
    border: 1px solid #d1ad6e;
    border-radius: 7px;
    background: url("./assets/theme/parchment-paper.jpg") center / cover;
    color: var(--webapp-ink);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
  }

  .webapp-preview-stage strong,
  .webapp-preview-list header strong,
  .webapp-preview-certificate strong {
    display: block;
    margin-top: 7px;
    font-family: var(--webapp-serif);
    font-size: 22px;
  }

  .webapp-preview-stage b {
    display: block;
    margin-top: 15px;
    color: #7a2b31;
    font-family: var(--webapp-serif);
    font-size: 37px;
  }

  .webapp-preview-stage p,
  .webapp-preview-certificate p,
  .webapp-preview-certificate small {
    display: block;
    margin: 10px 0 0;
    color: #6c5146;
    font-size: 13px;
    line-height: 1.65;
  }

  .webapp-preview-list header {
    padding-bottom: 12px;
    border-bottom: 1px dashed rgba(111, 77, 47, .28);
  }

  .webapp-preview-list > p {
    margin: 14px 0 0;
    color: #4c3830;
    font-family: var(--webapp-serif);
    font-size: 15px;
  }

  .webapp-preview-slot {
    display: block;
    width: 100%;
    min-height: 45px;
    margin-top: 10px;
    padding: 0 12px;
    border: 1px solid #cba963;
    border-radius: 5px;
    background: #f6ead3;
    color: #4c3830;
    font-size: 14px;
    text-align: left;
  }

  .webapp-preview-balance strong {
    display: inline-block;
    margin-top: 5px;
    color: #72242b;
    font-family: var(--webapp-serif);
    font-size: 54px;
  }

  .webapp-preview-balance small {
    margin-left: 7px;
    color: #6c5146;
    font-size: 14px;
  }

  .webapp-preview-profile {
    display: grid;
    justify-items: center;
    text-align: center;
  }

  .webapp-preview-avatar {
    display: grid;
    width: 68px;
    height: 68px;
    place-items: center;
    border: 2px solid #d1ad6e;
    border-radius: 50%;
    background: #6e1f2a;
    color: #fff2d7;
    font-family: var(--webapp-serif);
    font-size: 28px;
  }

  .webapp-preview-profile strong {
    margin-top: 12px;
    font-family: var(--webapp-serif);
    font-size: 23px;
  }

  .webapp-preview-profile > span {
    margin-top: 7px;
    color: #765d4c;
    font-size: 12px;
  }

  .webapp-preview-profile button {
    grid-column: auto;
    grid-row: auto;
    margin-top: 18px;
    color: #5c4035;
    border-color: #b38a4c;
  }
}

@media (max-width: 390px) {
  .webapp-chapter-book {
    min-height: 310px;
    padding-inline: 18px 13px;
  }

  .webapp-chapter-portrait {
    height: 220px;
  }

  .webapp-chapter-number {
    font-size: 21px;
  }

  .webapp-quest-card {
    min-height: 128px;
    padding-inline: 9px;
  }
}

@media (max-width: 360px) {
  .webapp-museum-home {
    padding-inline: 12px;
  }

  .webapp-chapter-book {
    min-height: 296px;
  }

  .webapp-chapter-portrait {
    width: 42%;
    height: 205px;
    flex-basis: 42%;
  }

  .webapp-progress-ring {
    width: 70px;
    height: 70px;
    font-size: 16px;
  }

  .webapp-quest-shelf {
    gap: 6px;
  }

  .webapp-quest-card strong {
    font-size: 12px;
  }

  .student-body.webapp-mobile-mode .booking-controls {
    grid-template-columns: 1fr;
  }

  .webapp-profile-identity-card {
    grid-template-columns: 52px minmax(0, 1fr) auto;
    padding-inline: 13px;
  }

  .webapp-profile-avatar {
    width: 52px;
    height: 52px;
  }

  .student-body.webapp-mobile-mode .profile-dialog-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .student-body.webapp-mobile-mode .profile-dialog-actions > div {
    width: 100%;
  }

  .student-body.webapp-mobile-mode .profile-dialog-actions button {
    flex: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .webapp-mobile-mode *,
  .webapp-mobile-mode *::before,
  .webapp-mobile-mode *::after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important;
  }
}

/* Native Mini Program parity for the student Web App. Desktop pages stay unchanged. */
@media (max-width: 760px) {
  .student-body.webapp-mobile-mode .webapp-mobile-only {
    display: flex;
  }

  .student-body.webapp-mobile-mode[data-webapp-route="journey"],
  .student-body.webapp-mobile-mode[data-webapp-route="booking"] {
    background-color: #191012;
    background-image: none;
  }

  .student-body.webapp-mobile-mode[data-webapp-route="collection"],
  .student-body.webapp-mobile-mode[data-webapp-route="credits"],
  .student-body.webapp-mobile-mode[data-webapp-route="profile"] {
    background-color: #f3ead9;
    background-image: none;
  }

  .student-body.webapp-mobile-mode:not(.webapp-home-active)[data-webapp-route="journey"] [data-portal-page="studentJourneyPage"].is-active,
  .student-body.webapp-mobile-mode:not(.webapp-home-active)[data-webapp-route="collection"] [data-portal-page="studentCertificatePage"].is-active,
  .student-body.webapp-mobile-mode:not(.webapp-home-active)[data-webapp-route="credits"] [data-portal-page="studentCreditPage"].is-active {
    padding: 0;
  }

  .student-body.webapp-mobile-mode:not(.webapp-home-active) [data-portal-page].is-active {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .student-body.webapp-mobile-mode:not(.webapp-home-active)[data-webapp-route="booking"] [data-portal-page="studentBookingPage"].is-active {
    padding: 0 7px 20px;
  }

  .student-body.webapp-mobile-mode:not(.webapp-home-active)[data-webapp-route="profile"] [data-portal-page="studentProfilePage"].is-active {
    padding: 0 12px 24px;
  }

  .student-body.webapp-mobile-mode[data-webapp-route="credits"] .webapp-subpage-bar {
    display: none;
  }

  .student-body.webapp-mobile-mode[data-webapp-route="collection"] .webapp-subpage-bar {
    border-color: rgba(92, 48, 37, 0.15);
    background: rgba(248, 239, 221, 0.98);
    color: #291e20;
  }

  .student-body.webapp-mobile-mode[data-webapp-route="collection"] .webapp-subpage-bar span {
    color: #8a6b39;
  }

  .student-body.webapp-mobile-mode[data-webapp-route="collection"] .webapp-subpage-bar button {
    border-color: rgba(111, 72, 47, 0.25);
    color: #5c3a35;
  }

  /* Music journey */
  .student-body.webapp-mobile-mode .journey-page-shell {
    display: block;
    background: #191011;
  }

  .student-body.webapp-mobile-mode .journey-mobile-page {
    min-height: 100svh;
    padding: 18px 14px calc(96px + env(safe-area-inset-bottom));
    background: #191011;
    color: #f2e7d3;
  }

  .journey-mobile-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
  }

  .journey-mobile-top img {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    padding: 4px;
    border: 1px solid #caa45f;
    border-radius: 50%;
    background: #fff7e8;
    object-fit: contain;
  }

  .journey-mobile-top div {
    min-width: 0;
  }

  .journey-mobile-top span,
  .journey-mobile-section-heading > span {
    display: block;
    color: #d4af69;
    font-size: 9px;
    font-weight: 780;
    letter-spacing: 0;
  }

  .journey-mobile-top strong {
    display: block;
    margin-top: 4px;
    overflow: hidden;
    color: #f4e9d7;
    font-family: var(--webapp-serif);
    font-size: 18px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .journey-mobile-hero {
    padding: 18px 16px;
    border: 1px solid #d5b16b;
    border-radius: 5px;
    background: #541a25;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.24);
  }

  .journey-mobile-hero > span,
  .journey-mobile-hero footer span {
    display: block;
    color: #d6b16c;
    font-size: 10px;
    font-weight: 780;
  }

  .journey-mobile-hero h2 {
    margin: 8px 0 0;
    color: #fff3dd;
    font-family: var(--webapp-serif);
    font-size: 25px;
    line-height: 1.25;
  }

  .journey-mobile-hero > div {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 15px;
  }

  .journey-mobile-hero > div > strong {
    color: #f2d795;
    font-family: var(--webapp-serif);
    font-size: 21px;
  }

  .journey-mobile-hero > div > b,
  .journey-mobile-semester-progress b,
  .journey-mobile-stage div > b,
  .journey-mobile-ability > b {
    display: block;
    height: 5px;
    flex: 1;
    overflow: hidden;
    border-radius: 5px;
    background: rgba(255, 244, 218, 0.23);
  }

  .journey-mobile-hero > div > b i,
  .journey-mobile-semester-progress b i,
  .journey-mobile-stage div > b em,
  .journey-mobile-ability > b i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #e0b864;
  }

  .journey-mobile-hero > p {
    margin: 15px 0 0;
    color: #f5e8d0;
    font-family: var(--webapp-serif);
    font-size: 14px;
    line-height: 1.65;
  }

  .journey-mobile-hero footer {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(250, 231, 188, 0.28);
  }

  .journey-mobile-hero footer strong {
    display: block;
    margin-top: 5px;
    color: #f4e8d5;
    font-size: 13px;
    line-height: 1.5;
  }

  .journey-mobile-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    margin-top: 15px;
    padding-bottom: 11px;
    border-bottom: 1px solid rgba(220, 190, 137, 0.24);
  }

  .journey-mobile-tabs button {
    display: grid;
    place-items: center;
    min-height: 40px;
    padding: 0 8px;
    border: 1px solid rgba(224, 194, 140, 0.28);
    border-radius: 4px;
    background: transparent;
    color: #bba98f;
    box-shadow: none;
    font-size: 13px;
    cursor: pointer;
  }

  .journey-mobile-view-toggle {
    position: fixed;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
  }

  #journey-mobile-view-chapter:checked ~ .journey-mobile-tabs button[data-journey-mobile-view="chapter"],
  #journey-mobile-view-ability:checked ~ .journey-mobile-tabs button[data-journey-mobile-view="ability"],
  #journey-mobile-view-archive:checked ~ .journey-mobile-tabs button[data-journey-mobile-view="archive"] {
    border-color: #d5af68;
    background: #f1e5cb;
    color: #4c2827;
    font-weight: 780;
  }

  .journey-mobile-panel {
    display: none;
  }

  #journey-mobile-view-chapter:checked ~ .journey-mobile-panel.is-chapter,
  #journey-mobile-view-ability:checked ~ .journey-mobile-panel.is-ability,
  #journey-mobile-view-archive:checked ~ .journey-mobile-panel.is-archive {
    display: block;
  }

  .journey-mobile-section-heading {
    margin-top: 20px;
  }

  .journey-mobile-section-heading h3 {
    margin: 5px 0 0;
    color: #f3e8d5;
    font-family: var(--webapp-serif);
    font-size: 21px;
  }

  .journey-mobile-section-heading p {
    margin: 6px 0 0;
    color: #bba997;
    font-size: 12px;
    line-height: 1.55;
  }

  .journey-mobile-semester {
    margin-top: 12px;
    padding: 15px;
    border: 1px solid #d0ac67;
    border-radius: 5px;
    background: #f1e4cd;
    color: #45312b;
  }

  .journey-mobile-semester > p {
    margin: 0;
    color: #4c3730;
    font-family: var(--webapp-serif);
    font-size: 14px;
    line-height: 1.6;
  }

  .journey-mobile-semester-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 13px;
    color: #825b2a;
    font-size: 11px;
    font-weight: 780;
  }

  .journey-mobile-semester-progress b {
    background: rgba(90, 62, 44, 0.18);
  }

  .journey-mobile-semester-goal {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-top: 13px;
    padding-top: 12px;
    border-top: 1px solid rgba(91, 65, 49, 0.18);
  }

  .journey-mobile-semester-goal > div {
    min-width: 0;
    flex: 1;
  }

  .journey-mobile-semester-goal strong {
    color: #3d2d29;
    font-size: 14px;
  }

  .journey-mobile-semester-goal p {
    margin: 5px 0 0;
    color: #745d52;
    font-size: 11px;
    line-height: 1.5;
  }

  .journey-mobile-semester-goal > span {
    flex: 0 0 auto;
    padding: 4px 7px;
    border-radius: 2px;
    background: #f2ddad;
    color: #7b5520;
    font-size: 10px;
  }

  .journey-mobile-semester-goal.is-completed > span {
    background: #d7e1d4;
    color: #3d684c;
  }

  .journey-mobile-section-heading.is-path {
    margin-top: 24px;
  }

  .journey-mobile-stage-list {
    margin-top: 11px;
    padding-left: 10px;
    border-left: 1px solid rgba(226, 194, 136, 0.42);
  }

  .journey-mobile-stage {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    min-height: 64px;
    align-items: center;
    padding: 9px 0 9px 14px;
  }

  .journey-mobile-stage > i {
    position: absolute;
    left: -15px;
    width: 8px;
    height: 8px;
    border: 2px solid #67564f;
    border-radius: 50%;
    background: #191011;
  }

  .journey-mobile-stage.is-completed > i {
    border-color: #e1bd71;
    background: #e1bd71;
  }

  .journey-mobile-stage.is-current > i,
  .journey-mobile-stage.is-consolidating > i {
    border-color: #e7c069;
    background: #771e29;
    box-shadow: 0 0 0 4px rgba(224, 184, 100, 0.13);
  }

  .journey-mobile-stage > div {
    min-width: 0;
  }

  .journey-mobile-stage > div > strong {
    display: block;
    color: #f2e4cf;
    font-family: var(--webapp-serif);
    font-size: 16px;
  }

  .journey-mobile-stage > div > span {
    display: block;
    margin-top: 3px;
    color: #b9a998;
    font-size: 11px;
  }

  .journey-mobile-stage div > b {
    width: 100%;
    margin-top: 6px;
  }

  .journey-mobile-stage > small {
    color: #cfad6c;
    font-size: 11px;
  }

  .journey-mobile-ability-list {
    display: grid;
    gap: 10px;
    margin-top: 12px;
  }

  .journey-mobile-ability {
    padding: 15px;
    border: 1px solid rgba(217, 189, 137, 0.38);
    background: rgba(255, 250, 237, 0.06);
  }

  .journey-mobile-ability > header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: #f2e4cd;
    font-family: var(--webapp-serif);
    font-size: 16px;
  }

  .journey-mobile-ability > header span {
    color: #d6b16d;
  }

  .journey-mobile-ability > b {
    width: 100%;
    margin-top: 10px;
  }

  .journey-mobile-ability > p {
    margin: 7px 0 0;
    color: #bcad99;
    font-size: 11px;
  }

  .journey-mobile-ability > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 11px;
    padding-top: 11px;
    border-top: 1px solid rgba(220, 193, 144, 0.17);
    color: #e8dbc8;
    font-size: 13px;
    line-height: 1.5;
  }

  .journey-mobile-ability > div span {
    max-width: 54%;
    color: #aea08d;
    font-size: 11px;
    text-align: right;
  }

  .journey-mobile-report {
    margin-top: 12px;
    padding: 15px;
    border: 1px solid #d1ad69;
    background: #eee0c7;
    color: #45312d;
  }

  .journey-mobile-report > span {
    color: #805826;
    font-size: 10px;
    font-weight: 780;
  }

  .journey-mobile-report h4 {
    margin: 5px 0 0;
    color: #482e2c;
    font-family: var(--webapp-serif);
    font-size: 17px;
  }

  .journey-mobile-report p,
  .journey-mobile-report div {
    margin: 9px 0 0;
    color: #685047;
    font-size: 12px;
    line-height: 1.6;
  }

  .journey-mobile-report div {
    padding-top: 9px;
    border-top: 1px solid rgba(81, 55, 45, 0.17);
  }

  .journey-mobile-timeline article {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 12px;
    margin-top: 13px;
    padding-top: 13px;
    border-top: 1px solid rgba(219, 190, 139, 0.25);
  }

  .journey-mobile-timeline time {
    color: #d3ad68;
    font-size: 11px;
  }

  .journey-mobile-timeline div > span {
    color: #b6a490;
    font-size: 10px;
  }

  .journey-mobile-timeline div > strong {
    display: block;
    margin-top: 3px;
    color: #f2e5d0;
    font-family: var(--webapp-serif);
    font-size: 15px;
    line-height: 1.4;
  }

  .journey-mobile-timeline p {
    margin: 4px 0 0;
    color: #b7a895;
    font-size: 11px;
    line-height: 1.55;
  }

  .journey-mobile-collection-link {
    width: 100%;
    min-height: 46px;
    margin-top: 18px;
    border: 1px solid #d4ae68;
    border-radius: 4px;
    background: #6f1e29;
    color: #fff1dc;
    box-shadow: none;
    font-family: var(--webapp-serif);
    font-size: 15px;
  }

  .journey-mobile-empty {
    margin-top: 12px;
    padding: 20px 16px;
    border: 1px dashed rgba(221, 195, 143, 0.38);
    color: #c6b6a1;
  }

  .journey-mobile-empty strong {
    color: #f0e0c6;
    font-family: var(--webapp-serif);
    font-size: 15px;
  }

  .journey-mobile-empty p {
    margin: 5px 0 0;
    font-size: 12px;
    line-height: 1.6;
  }

  /* Booking ledger */
  .student-body.webapp-mobile-mode #schedule {
    padding: 16px 0 calc(72px + env(safe-area-inset-bottom));
    border: 0;
    border-radius: 0;
    background: transparent;
    background-image: none;
    box-shadow: none;
    color: #f4ead8;
  }

  .student-body.webapp-mobile-mode #schedule > .panel-copy,
  .student-body.webapp-mobile-mode #schedule > .booking-credit-note,
  .student-body.webapp-mobile-mode #schedule > .booking-controls {
    display: none;
  }

  .webapp-booking-page-head {
    align-items: center;
    gap: 9px;
    margin-bottom: 16px;
  }

  .webapp-booking-page-head img {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    padding: 4px;
    border: 1px solid #d1ad6a;
    border-radius: 50%;
    background: #fff7e8;
    object-fit: contain;
  }

  .webapp-booking-page-head div {
    min-width: 0;
    flex: 1;
  }

  .webapp-booking-page-head span,
  .webapp-booking-section-head span,
  .webapp-booking-ledger > div > span,
  .webapp-booking-ledger footer b,
  .webapp-booking-notice b {
    display: block;
    color: #d9b875;
    font-size: 9px;
    font-weight: 780;
  }

  .webapp-booking-page-head strong {
    display: block;
    margin-top: 4px;
    color: #f5e8d2;
    font-family: var(--webapp-serif);
    font-size: 19px;
  }

  .webapp-booking-page-head > button {
    min-width: 48px;
    min-height: 34px;
    padding: 0 9px;
    border: 1px solid rgba(216, 183, 111, 0.48);
    border-radius: 17px;
    background: transparent;
    color: #ead9b4;
    box-shadow: none;
    font-size: 11px;
  }

  .webapp-booking-ledger {
    position: relative;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    padding: 15px 14px 13px;
    border: 1px solid #d3ad69;
    border-left: 7px solid #27364a;
    border-radius: 4px 10px 10px 4px;
    background: #f1e4cc;
    box-shadow: 0 10px 21px rgba(0, 0, 0, 0.24);
    color: #45312d;
  }

  .webapp-booking-ledger > div > span {
    color: #7b552b;
  }

  .webapp-booking-ledger > div > strong {
    display: block;
    margin-top: 5px;
    color: #472b2d;
    font-family: var(--webapp-serif);
    font-size: 20px;
    line-height: 1.35;
  }

  .webapp-booking-ledger > div > p {
    margin: 10px 0 0;
    color: #634a3e;
    font-size: 12px;
    line-height: 1.55;
  }

  .webapp-booking-ledger aside {
    min-width: 58px;
    padding-left: 10px;
    border-left: 1px solid rgba(89, 58, 39, 0.2);
    text-align: right;
  }

  .webapp-booking-ledger aside span {
    color: #765b46;
    font-size: 10px;
  }

  .webapp-booking-ledger aside strong {
    display: block;
    margin-top: 3px;
    color: #712631;
    font-family: var(--webapp-serif);
    font-size: 19px;
  }

  .webapp-booking-ledger footer {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid rgba(91, 60, 42, 0.18);
  }

  .webapp-booking-ledger footer b {
    color: #7c5a30;
  }

  .webapp-booking-ledger footer span {
    color: #765b4d;
    font-size: 11px;
    line-height: 1.5;
  }

  .webapp-booking-section-head {
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    margin-top: 21px;
    margin-bottom: 10px;
  }

  .webapp-booking-section-head strong {
    display: block;
    margin-top: 4px;
    color: #f2e7d4;
    font-family: var(--webapp-serif);
    font-size: 18px;
  }

  .webapp-booking-section-head small {
    max-width: 120px;
    color: #aea08d;
    font-size: 10px;
    line-height: 1.4;
    text-align: right;
  }

  .student-body.webapp-mobile-mode #schedule .teacher-card-picker {
    display: flex;
    gap: 8px;
    margin: 0 -14px;
    padding: 0 14px 3px;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }

  .student-body.webapp-mobile-mode #schedule .teacher-card-picker::-webkit-scrollbar {
    display: none;
  }

  .student-body.webapp-mobile-mode #schedule .teacher-card {
    display: grid;
    min-width: min(310px, calc(100vw - 50px));
    max-width: min(310px, calc(100vw - 50px));
    min-height: 78px;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 11px 12px;
    border: 1px solid rgba(218, 189, 133, 0.44);
    border-radius: 4px;
    background: #f1e6d1;
    color: #412e2d;
    box-shadow: none;
    scroll-snap-align: start;
  }

  .student-body.webapp-mobile-mode #schedule .teacher-card.is-selected {
    border-color: #d8b56f;
    background: #6d202b;
    color: #fff0d7;
    box-shadow: 0 6px 14px rgba(63, 16, 23, 0.28);
  }

  .student-body.webapp-mobile-mode #schedule .teacher-card-avatar {
    width: 44px;
    height: 44px;
    border: 1px solid #a77b36;
    background: #f1e2c4;
    color: #6d202b;
  }

  .student-body.webapp-mobile-mode #schedule .teacher-card-body strong {
    color: inherit;
    font-size: 14px;
  }

  .student-body.webapp-mobile-mode #schedule .teacher-card-body em {
    background: rgba(239, 209, 139, 0.18);
    color: #e8c984;
    font-size: 9px;
  }

  .student-body.webapp-mobile-mode #schedule .teacher-card:not(.is-selected) .teacher-card-body em {
    background: #ead9b8;
    color: #77572d;
  }

  .student-body.webapp-mobile-mode #schedule .teacher-card-body small {
    color: #796659;
    font-size: 11px;
  }

  .student-body.webapp-mobile-mode #schedule .teacher-card.is-selected .teacher-card-body small {
    color: #ead9bb;
  }

  .webapp-booking-duration {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .webapp-booking-duration button {
    display: grid;
    min-height: 86px;
    grid-template-columns: auto 1fr;
    align-content: center;
    align-items: baseline;
    justify-items: start;
    padding: 13px;
    border: 1px solid rgba(216, 187, 132, 0.38);
    border-radius: 4px;
    background: rgba(248, 239, 220, 0.06);
    color: #e9ddc6;
    box-shadow: none;
    text-align: left;
  }

  .webapp-booking-duration button.is-active {
    border-color: #d6b069;
    background: #efe1c8;
    color: #492d2e;
  }

  .webapp-booking-duration strong {
    font-family: var(--webapp-serif);
    font-size: 23px;
  }

  .webapp-booking-duration span {
    margin-left: 4px;
    font-size: 11px;
  }

  .webapp-booking-duration small {
    grid-column: 1 / -1;
    margin-top: 7px;
    color: #b8aa97;
    font-size: 10px;
  }

  .webapp-booking-duration button.is-active small {
    color: #7b5a40;
  }

  .student-body.webapp-mobile-mode #schedule .date-strip {
    display: grid;
    grid-auto-columns: 72px;
    grid-auto-flow: column;
    gap: 6px;
    margin: 0 -14px;
    padding: 1px 14px 3px;
    overflow-x: auto;
  }

  .student-body.webapp-mobile-mode #schedule .date-tab {
    min-width: 72px;
    min-height: 83px;
    padding: 10px 6px;
    border: 1px solid rgba(215, 184, 117, 0.35);
    border-radius: 4px;
    background: #24181b;
    color: #cfc1aa;
    box-shadow: none;
  }

  .student-body.webapp-mobile-mode #schedule .date-tab.is-active {
    border-color: #d8b56e;
    background: #f0e2c7;
    color: #542f30;
  }

  .student-body.webapp-mobile-mode #schedule .date-tab strong,
  .student-body.webapp-mobile-mode #schedule .date-tab span,
  .student-body.webapp-mobile-mode #schedule .date-tab em {
    display: block;
    color: inherit;
    font-style: normal;
  }

  .student-body.webapp-mobile-mode #schedule .date-tab strong {
    font-size: 11px;
  }

  .student-body.webapp-mobile-mode #schedule .date-tab span {
    margin-top: 5px;
    font-family: var(--webapp-serif);
    font-size: 15px;
    font-weight: 700;
  }

  .student-body.webapp-mobile-mode #schedule .date-tab em {
    margin-top: 6px;
    color: #9f8f7e;
    font-size: 9px;
  }

  .student-body.webapp-mobile-mode #schedule .date-tab.is-active em {
    color: #7e5b38;
  }

  .webapp-booking-notice {
    gap: 8px;
    margin-bottom: 8px;
    padding: 9px 10px;
    border-left: 2px solid #bf9246;
    background: rgba(249, 238, 213, 0.08);
  }

  .webapp-booking-notice span {
    color: #c2b29e;
    font-size: 11px;
    line-height: 1.5;
  }

  .student-body.webapp-mobile-mode #schedule .daily-timeline {
    margin-top: 0;
    overflow: visible;
    border: 0;
    border-top: 1px solid rgba(219, 188, 130, 0.25);
    border-radius: 0;
    background: transparent;
  }

  .student-body.webapp-mobile-mode #schedule .timeline-row,
  .student-body.webapp-mobile-mode #schedule .timeline-row.is-full-hour,
  .student-body.webapp-mobile-mode #schedule .timeline-row.is-half-hour {
    display: grid;
    width: 100%;
    min-height: 70px;
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 9px;
    align-items: center;
    margin: 0;
    padding: 10px 7px;
    border: 0;
    border-bottom: 1px solid rgba(220, 192, 140, 0.24);
    border-radius: 0;
    background: transparent;
    color: #f0e2cd;
    box-shadow: none;
    text-align: left;
  }

  .student-body.webapp-mobile-mode #schedule .timeline-row::before {
    display: none;
  }

  .student-body.webapp-mobile-mode #schedule .timeline-row.is-half-hour {
    min-height: 62px;
    margin-inline: 0;
    padding-left: 18px;
  }

  .student-body.webapp-mobile-mode #schedule .timeline-row.is-mine {
    margin: 4px 0;
    border: 1px solid #caa052;
    border-radius: 4px;
    background: #6c202b;
  }

  .student-body.webapp-mobile-mode #schedule .timeline-row time,
  .student-body.webapp-mobile-mode #schedule .timeline-row.is-half-hour time {
    width: auto;
    padding: 0;
    text-align: left;
  }

  .student-body.webapp-mobile-mode #schedule .timeline-row time strong {
    color: #f2d69b;
    font-family: var(--webapp-serif);
    font-size: 17px;
  }

  .student-body.webapp-mobile-mode #schedule .timeline-row.is-half-hour time strong {
    font-size: 13px;
  }

  .student-body.webapp-mobile-mode #schedule .timeline-row time span {
    margin-top: 3px;
    color: #a99b89;
    font-size: 10px;
  }

  .student-body.webapp-mobile-mode #schedule .timeline-row time span::before {
    display: none;
  }

  .student-body.webapp-mobile-mode #schedule .timeline-track,
  .student-body.webapp-mobile-mode #schedule .timeline-row.is-half-hour .timeline-track {
    display: flex;
    min-width: 0;
    min-height: 0;
    align-items: center;
    gap: 7px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .student-body.webapp-mobile-mode #schedule .timeline-track-copy {
    min-width: 0;
    flex: 1;
  }

  .student-body.webapp-mobile-mode #schedule .timeline-track-copy strong {
    display: block;
    overflow: hidden;
    color: #f0e2cd;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .student-body.webapp-mobile-mode #schedule .timeline-track-copy small {
    display: block;
    margin-top: 4px;
    overflow: hidden;
    color: #b8a897;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .student-body.webapp-mobile-mode #schedule .timeline-state {
    flex: 0 0 auto;
    padding: 4px 5px;
    border: 1px solid rgba(208, 176, 110, 0.38);
    border-radius: 2px;
    color: #d8c8ad;
    font-size: 9px;
    font-style: normal;
    white-space: nowrap;
  }

  .student-body.webapp-mobile-mode #schedule .timeline-row:disabled {
    opacity: 0.47;
  }

  .student-body.webapp-mobile-mode #schedule .booking-row-action {
    min-width: 45px;
    min-height: 28px;
    padding: 0 6px;
    border-radius: 3px;
    font-size: 10px;
  }

  .webapp-reserved-heading {
    margin-top: 24px;
  }

  .webapp-reserved-lessons {
    display: block !important;
    border: 1px solid rgba(216, 183, 111, 0.48);
    border-radius: 4px;
    background: #efe2c7;
    color: #472f2d;
  }

  .webapp-reserved-row {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr) auto;
    gap: 9px;
    align-items: center;
    min-height: 68px;
    padding: 10px;
  }

  .webapp-reserved-row + .webapp-reserved-row {
    border-top: 1px solid rgba(99, 69, 48, 0.16);
  }

  .webapp-reserved-row time strong,
  .webapp-reserved-row > div strong {
    display: block;
    color: #4b302e;
    font-size: 12px;
  }

  .webapp-reserved-row time span,
  .webapp-reserved-row > div span {
    display: block;
    margin-top: 4px;
    color: #806959;
    font-size: 10px;
  }

  .webapp-reserved-row button {
    min-width: 43px;
    min-height: 30px;
    padding: 0 7px;
    border: 1px solid #a56a62;
    border-radius: 3px;
    background: transparent;
    color: #79303a;
    box-shadow: none;
    font-size: 10px;
  }

  .webapp-reserved-empty {
    padding: 19px 15px;
    text-align: center;
  }

  .webapp-reserved-empty strong {
    color: #4a292d;
    font-family: var(--webapp-serif);
    font-size: 15px;
  }

  .webapp-reserved-empty p {
    margin: 5px 0 0;
    color: #7d685b;
    font-size: 11px;
  }

  .student-body.webapp-mobile-mode #schedule > .form-note {
    margin-top: 11px;
    color: #c0af98;
    font-size: 11px;
  }

  /* Collection archive */
  .student-body.webapp-mobile-mode .webapp-collection-content,
  .student-body.webapp-mobile-mode .webapp-credit-content {
    display: block;
  }

  .student-body.webapp-mobile-mode .webapp-original-certificate-panel,
  .student-body.webapp-mobile-mode .webapp-original-credit-panel {
    display: none;
  }

  .webapp-collection-museum {
    min-height: 100svh;
    padding: 0 14px calc(96px + env(safe-area-inset-bottom));
    background: #f3ead9;
    color: #211b20;
  }

  .webapp-collection-hero {
    min-height: 256px;
    margin: 0 -14px;
    padding: 28px 26px 25px;
    background: #611a2b;
    color: #fff8eb;
    box-shadow: inset 0 -1px rgba(255, 231, 181, 0.14), 0 10px 26px rgba(62, 20, 29, 0.18);
  }

  .webapp-archive-seal {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px 5px 5px;
    border: 1px solid rgba(235, 199, 119, 0.62);
    border-radius: 4px;
    color: #edcf8d;
    font-size: 9px;
    font-weight: 800;
  }

  .webapp-archive-seal img {
    width: 24px;
    height: 24px;
    padding: 2px;
    border-radius: 50%;
    background: #fff7e8;
    object-fit: contain;
  }

  .webapp-collection-kicker {
    display: block;
    margin-top: 26px;
    color: #edcf8d;
    font-size: 10px;
    font-weight: 800;
  }

  .webapp-collection-hero h1 {
    max-width: 310px;
    margin: 9px 0 0;
    color: #fff8eb;
    font-family: var(--webapp-serif);
    font-size: 27px;
    line-height: 1.3;
  }

  .webapp-collection-hero > p {
    max-width: 310px;
    margin: 11px 0 0;
    color: rgba(255, 247, 231, 0.78);
    font-size: 13px;
    line-height: 1.65;
  }

  .webapp-collection-rule {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 17px;
    color: rgba(241, 216, 164, 0.75);
    font-size: 10px;
  }

  .webapp-collection-rule i {
    height: 1px;
    flex: 1;
    background: rgba(241, 216, 164, 0.42);
  }

  .webapp-archive-section {
    margin-top: 28px;
  }

  .webapp-archive-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 13px;
  }

  .webapp-archive-heading span {
    color: #9b742f;
    font-family: var(--webapp-serif);
    font-size: 11px;
    font-weight: 800;
  }

  .webapp-archive-heading h2 {
    margin: 4px 0 0;
    color: #281b21;
    font-family: var(--webapp-serif);
    font-size: 23px;
  }

  .webapp-archive-heading small {
    display: block;
    margin-top: 5px;
    color: #88756b;
    font-size: 9px;
    font-weight: 800;
  }

  .webapp-archive-heading > b {
    padding-bottom: 2px;
    color: #765434;
    font-size: 11px;
  }

  .webapp-report-sheet {
    overflow: hidden;
    padding: 17px 15px 0;
    border: 1px solid #d8c4a6;
    border-top: 4px solid #651a2a;
    border-radius: 9px;
    background: #fffaf0;
    box-shadow: 0 8px 18px rgba(69, 44, 31, 0.1);
  }

  .webapp-report-sheet > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  .webapp-report-sheet > header strong {
    color: #6b1c2b;
    font-size: 12px;
  }

  .webapp-report-sheet > header span {
    color: #866849;
    font-size: 10px;
  }

  .webapp-report-sheet > p {
    margin: 13px 0 0;
    color: #2a2122;
    font-family: var(--webapp-serif);
    font-size: 15px;
    line-height: 1.7;
  }

  .webapp-report-highlight {
    margin-top: 13px;
    padding: 11px 12px;
    border-left: 3px solid #a47a32;
    background: rgba(146, 109, 48, 0.09);
  }

  .webapp-report-highlight span,
  .webapp-report-focus span {
    color: #806231;
    font-size: 10px;
    font-weight: 800;
  }

  .webapp-report-highlight strong {
    display: block;
    margin-top: 4px;
    color: #3a2027;
    font-size: 14px;
    line-height: 1.5;
  }

  .webapp-report-focus {
    margin-top: 12px;
  }

  .webapp-report-focus p {
    margin: 3px 0 0;
    color: #554349;
    font-size: 12px;
    line-height: 1.6;
  }

  .webapp-report-sheet blockquote {
    margin: 12px 0 0;
    padding: 10px 11px;
    border: 1px solid rgba(115, 42, 54, 0.18);
    border-radius: 6px;
    color: #5b333e;
    font-family: var(--webapp-serif);
    font-size: 12px;
    line-height: 1.6;
  }

  .webapp-report-sheet > footer {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 15px -15px 0;
    border-top: 1px solid #decdb5;
    background: rgba(98, 26, 40, 0.045);
  }

  .webapp-report-sheet > footer > span {
    padding: 11px 5px;
    text-align: center;
  }

  .webapp-report-sheet > footer > span + span {
    border-left: 1px solid #decdb5;
  }

  .webapp-report-sheet > footer strong,
  .webapp-report-sheet > footer small {
    display: block;
  }

  .webapp-report-sheet > footer strong {
    color: #641b2b;
    font-family: var(--webapp-serif);
    font-size: 18px;
  }

  .webapp-report-sheet > footer small {
    margin-top: 3px;
    color: #806d60;
    font-size: 9px;
  }

  .webapp-milestone-row {
    position: relative;
    display: grid;
    grid-template-columns: 15px minmax(0, 1fr);
    gap: 9px;
    min-height: 96px;
  }

  .webapp-milestone-row > i {
    position: relative;
    width: 8px;
    height: 8px;
    margin: 8px auto 0;
    border: 1px solid #a57b36;
    border-radius: 50%;
    background: #8a2334;
    box-shadow: 0 0 0 3px #f3ead9;
  }

  .webapp-milestone-row:not(:last-child)::after {
    position: absolute;
    top: 18px;
    bottom: 0;
    left: 7px;
    width: 1px;
    background: #d6c4ad;
    content: "";
  }

  .webapp-milestone-row > div {
    margin-bottom: 11px;
    padding: 12px;
    border: 1px solid #dfcdb6;
    border-radius: 7px;
    background: #fffaf0;
    box-shadow: 0 4px 10px rgba(75, 47, 31, 0.055);
  }

  .webapp-milestone-row.is-featured > div {
    border-color: #b58b41;
    background: #f6e8ca;
  }

  .webapp-milestone-row header {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    color: #8c704e;
    font-size: 9px;
  }

  .webapp-milestone-row header span {
    color: #742033;
    font-weight: 800;
  }

  .webapp-milestone-row h3 {
    margin: 7px 0 0;
    color: #2d2024;
    font-family: var(--webapp-serif);
    font-size: 16px;
    line-height: 1.4;
  }

  .webapp-milestone-row p,
  .webapp-milestone-row blockquote {
    margin: 5px 0 0;
    color: #615057;
    font-size: 11px;
    line-height: 1.6;
  }

  .webapp-milestone-row blockquote {
    padding-top: 6px;
    border-top: 1px solid #e8daca;
    color: #7a4650;
  }

  .webapp-certificate-track {
    display: flex;
    gap: 10px;
    margin-right: -14px;
    padding: 1px 14px 7px 1px;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }

  .webapp-certificate-track::-webkit-scrollbar {
    display: none;
  }

  .webapp-certificate-card {
    min-width: min(248px, calc(100vw - 72px));
    overflow: hidden;
    border: 1px solid #c9ad7d;
    border-radius: 7px;
    background: #fff9ea;
    box-shadow: 0 6px 14px rgba(73, 45, 28, 0.13);
    scroll-snap-align: start;
  }

  .webapp-certificate-image {
    display: block;
    height: 178px;
    padding: 9px;
    background: #eee0c6;
  }

  .webapp-certificate-image img {
    width: 100%;
    height: 100%;
    border: 1px solid rgba(88, 51, 27, 0.16);
    background: #fff;
    object-fit: contain;
  }

  .webapp-certificate-card > div {
    padding: 12px;
  }

  .webapp-certificate-card > div > span {
    color: #936e32;
    font-size: 9px;
    font-weight: 800;
  }

  .webapp-certificate-card h3 {
    min-height: 42px;
    margin: 5px 0 0;
    color: #2d2023;
    font-family: var(--webapp-serif);
    font-size: 15px;
    line-height: 1.4;
  }

  .webapp-certificate-card time {
    display: block;
    margin-top: 6px;
    color: #8c7664;
    font-size: 10px;
  }

  .webapp-certificate-card > div > a {
    display: flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    border: 1px solid #b48d50;
    border-radius: 4px;
    color: #5e2c35;
    font-size: 12px;
    font-weight: 700;
  }

  .webapp-reward-vault {
    padding: 16px;
    border: 1px solid #42232d;
    border-radius: 8px;
    background: #341620;
    color: #fff5df;
    box-shadow: 0 8px 19px rgba(60, 20, 29, 0.18);
  }

  .webapp-reward-vault > header {
    display: flex;
    justify-content: space-between;
    color: rgba(245, 222, 176, 0.72);
    font-size: 10px;
  }

  .webapp-reward-vault > header strong {
    color: #e6c580;
    font-size: 12px;
  }

  .webapp-reward-vault > div {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-top: 11px;
  }

  .webapp-reward-vault > div strong {
    color: #f0c767;
    font-family: var(--webapp-serif);
    font-size: 43px;
    line-height: 1;
  }

  .webapp-reward-vault > div span {
    font-size: 13px;
  }

  .webapp-reward-vault footer {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(239, 203, 125, 0.29);
  }

  .webapp-reward-vault footer strong,
  .webapp-reward-vault footer small {
    display: block;
  }

  .webapp-reward-vault footer strong {
    font-size: 15px;
  }

  .webapp-reward-vault footer small {
    margin-top: 3px;
    color: rgba(250, 233, 201, 0.64);
    font-size: 10px;
  }

  .webapp-redemption-ledger {
    margin-top: 9px;
    overflow: hidden;
    border: 1px solid #deccb3;
    border-radius: 7px;
    background: #fffaf0;
  }

  .webapp-redemption-ledger article {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 9px;
    align-items: center;
    min-height: 58px;
    padding: 9px 11px;
  }

  .webapp-redemption-ledger article + article {
    border-top: 1px solid #eadcc9;
  }

  .webapp-redemption-ledger article > span {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 1px solid #a37734;
    border-radius: 50%;
    color: #7a2635;
    font-size: 9px;
    font-weight: 800;
  }

  .webapp-redemption-ledger div strong,
  .webapp-redemption-ledger div small {
    display: block;
  }

  .webapp-redemption-ledger div strong {
    overflow: hidden;
    color: #342329;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .webapp-redemption-ledger div small {
    margin-top: 3px;
    color: #917c69;
    font-size: 10px;
  }

  .webapp-redemption-ledger article > b {
    color: #783042;
    font-size: 10px;
    white-space: nowrap;
  }

  .webapp-archive-empty {
    margin-top: 28px;
    padding: 30px 18px;
    border: 1px dashed #cdb68f;
    border-radius: 8px;
    background: rgba(255, 250, 240, 0.56);
    color: #79675f;
    text-align: center;
  }

  .webapp-archive-empty.is-inline {
    margin-top: 0;
    padding: 20px 16px;
  }

  .webapp-archive-empty > span {
    color: #9a7334;
    font-size: 10px;
    font-weight: 800;
  }

  .webapp-archive-empty h2,
  .webapp-archive-empty h3 {
    margin: 6px 0 0;
    color: #4a2630;
    font-family: var(--webapp-serif);
    font-size: 18px;
  }

  .webapp-archive-empty p {
    margin: 7px 0 0;
    font-size: 12px;
    line-height: 1.65;
  }

  /* Credit ledger */
  .webapp-credit-ledger-page {
    min-height: 100svh;
    padding: 0 14px calc(96px + env(safe-area-inset-bottom));
    background: #f3ead9;
    color: #2a1d20;
  }

  .webapp-credit-hero {
    min-height: 238px;
    margin: 0 -14px;
    padding: calc(17px + env(safe-area-inset-top)) 24px 28px;
    background: #1d1012;
    color: #fff5df;
  }

  .webapp-credit-hero-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .webapp-credit-hero-top > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 7px 4px 4px;
    border: 1px solid rgba(235, 199, 119, 0.58);
    border-radius: 4px;
    color: #ebce8e;
    font-size: 10px;
    font-weight: 800;
  }

  .webapp-credit-hero-top img {
    width: 22px;
    height: 22px;
    padding: 2px;
    border-radius: 50%;
    background: #fff7e8;
    object-fit: contain;
  }

  .webapp-credit-hero-top button {
    min-width: 68px;
    min-height: 32px;
    padding: 0 9px;
    border: 1px solid rgba(235, 199, 119, 0.5);
    border-radius: 3px;
    background: transparent;
    color: #ecd39e;
    box-shadow: none;
    font-size: 11px;
  }

  .webapp-credit-hero > span,
  .webapp-balance-book > header span,
  .webapp-credit-links > div > span,
  .webapp-credit-transactions > header span {
    display: block;
    color: #dcb66d;
    font-size: 9px;
    font-weight: 800;
  }

  .webapp-credit-hero > span {
    margin-top: 31px;
  }

  .webapp-credit-hero h1 {
    margin: 8px 0 0;
    color: #fff5df;
    font-family: var(--webapp-serif);
    font-size: 29px;
  }

  .webapp-credit-hero > p {
    margin: 10px 0 0;
    color: rgba(255, 241, 215, 0.76);
    font-size: 12px;
    line-height: 1.65;
  }

  .webapp-credit-hero > div:last-child {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    color: rgba(239, 208, 150, 0.72);
  }

  .webapp-credit-hero > div:last-child i {
    height: 1px;
    flex: 1;
    background: rgba(239, 208, 150, 0.38);
  }

  .webapp-credit-hero > div:last-child small {
    font-size: 10px;
  }

  .webapp-balance-book {
    position: relative;
    z-index: 1;
    margin-top: -10px;
    overflow: hidden;
    border: 1px solid #d2b27a;
    border-radius: 8px;
    background: #fff9eb;
    box-shadow: 0 9px 20px rgba(52, 19, 24, 0.18);
  }

  .webapp-balance-book > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px;
    border-bottom: 1px solid #dfc9a4;
  }

  .webapp-balance-book > header span {
    color: #8e6a2d;
  }

  .webapp-balance-book > header h2 {
    margin: 4px 0 0;
    color: #3b2025;
    font-family: var(--webapp-serif);
    font-size: 16px;
  }

  .webapp-balance-book > header > b {
    padding: 4px 6px;
    border: 1px solid #8a2e3c;
    color: #7b2334;
    font-size: 9px;
  }

  .webapp-balance-book > section {
    padding: 16px 14px 14px;
  }

  .webapp-balance-book > section > span {
    color: #80684d;
    font-size: 11px;
  }

  .webapp-balance-book > section > div {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-top: 4px;
  }

  .webapp-balance-book > section > div strong {
    color: #6a1c2b;
    font-family: var(--webapp-serif);
    font-size: 44px;
    line-height: 1;
  }

  .webapp-balance-book > section > div b {
    color: #553a35;
    font-size: 13px;
  }

  .webapp-balance-book > section > p {
    margin: 9px 0 0;
    color: #75615b;
    font-size: 11px;
    line-height: 1.6;
  }

  .webapp-balance-book > footer {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid #decaab;
    background: rgba(103, 29, 43, 0.045);
  }

  .webapp-balance-book > footer > span {
    padding: 11px 6px;
    text-align: center;
  }

  .webapp-balance-book > footer > span + span {
    border-left: 1px solid #decaab;
  }

  .webapp-balance-book > footer strong,
  .webapp-balance-book > footer small {
    display: block;
  }

  .webapp-balance-book > footer strong {
    color: #4c2830;
    font-family: var(--webapp-serif);
    font-size: 17px;
  }

  .webapp-balance-book > footer small {
    margin-top: 3px;
    color: #887363;
    font-size: 9px;
  }

  .webapp-credit-booking-button {
    width: 100%;
    min-height: 46px;
    margin-top: 11px;
    border: 1px solid #9f643b;
    border-radius: 5px;
    background: #681e2d;
    color: #fff4df;
    box-shadow: 0 6px 12px rgba(88, 25, 38, 0.17);
    font-family: var(--webapp-serif);
    font-size: 15px;
  }

  .webapp-credit-links {
    margin-top: 15px;
    padding: 14px;
    border: 1px solid rgba(166, 126, 65, 0.34);
    background: rgba(255, 250, 239, 0.48);
  }

  .webapp-credit-links > div > span,
  .webapp-credit-transactions > header span {
    color: #936e32;
  }

  .webapp-credit-links h2,
  .webapp-credit-transactions > header h2 {
    margin: 4px 0 0;
    color: #3c2429;
    font-family: var(--webapp-serif);
    font-size: 17px;
  }

  .webapp-credit-links p {
    margin: 5px 0 0;
    color: #7a655e;
    font-size: 11px;
    line-height: 1.55;
  }

  .webapp-credit-links footer {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-top: 11px;
  }

  .webapp-credit-links footer button {
    min-height: 36px;
    border: 1px solid #b8955a;
    border-radius: 3px;
    background: transparent;
    color: #69313a;
    box-shadow: none;
    font-size: 11px;
  }

  .webapp-credit-links footer button:first-child {
    border-color: #6f2634;
    background: #6f2634;
    color: #fff5df;
  }

  .webapp-credit-transactions {
    margin-top: 27px;
  }

  .webapp-credit-transactions > header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 12px;
  }

  .webapp-credit-transactions > header h2 {
    font-size: 22px;
  }

  .webapp-credit-transactions > header > b {
    color: #795839;
    font-size: 11px;
  }

  .webapp-credit-transactions > div {
    overflow: hidden;
    border: 1px solid #dbc7ab;
    border-radius: 7px;
    background: #fffaf0;
    box-shadow: 0 6px 14px rgba(74, 45, 29, 0.08);
  }

  .webapp-credit-transactions article {
    padding: 13px 13px 12px;
    border-left: 3px solid #a87b37;
  }

  .webapp-credit-transactions article.is-negative {
    border-left-color: #8a3040;
  }

  .webapp-credit-transactions article + article {
    border-top: 1px solid #eadbc6;
  }

  .webapp-credit-transactions article header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  .webapp-credit-transactions article header > strong {
    overflow: hidden;
    color: #352329;
    font-family: var(--webapp-serif);
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .webapp-credit-transactions article header > b {
    color: #55715f;
    font-size: 16px;
    white-space: nowrap;
  }

  .webapp-credit-transactions article.is-negative header > b {
    color: #8b3140;
  }

  .webapp-credit-transactions article header small {
    display: block;
    color: #877466;
    font-size: 9px;
  }

  .webapp-credit-transactions article > p {
    margin: 6px 0 0;
    color: #695957;
    font-size: 11px;
    line-height: 1.5;
  }

  .webapp-credit-transactions article > time {
    display: block;
    margin-top: 5px;
    color: #987d67;
    font-size: 10px;
  }

  /* Full profile */
  .webapp-profile-hub {
    gap: 10px;
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
  }

  .webapp-profile-hero {
    margin: 0 -14px 0;
    padding: 24px 20px 26px;
    background: #611a2b;
    color: #fff7e8;
  }

  .webapp-profile-hero h1 {
    margin: 22px 0 0;
    color: #fff7e8;
    font-family: var(--webapp-serif);
    font-size: 27px;
  }

  .webapp-profile-hero > p {
    margin: 8px 0 0;
    color: rgba(255, 244, 224, 0.76);
    font-size: 12px;
    line-height: 1.6;
  }

  .webapp-profile-identity-card {
    margin-top: -10px;
    border-left-color: #243146;
    background: #fff9eb;
    box-shadow: 0 9px 20px rgba(52, 19, 24, 0.18);
  }

  .webapp-profile-details {
    padding: 17px 15px;
    border: 1px solid #d8c4a6;
    border-radius: 7px;
    background: #fffaf0;
    box-shadow: 0 6px 16px rgba(69, 44, 31, 0.08);
  }

  .webapp-profile-details > header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 11px;
    border-bottom: 1px solid #e4d5c0;
  }

  .webapp-profile-details > header span {
    color: #936e32;
    font-size: 9px;
    font-weight: 800;
  }

  .webapp-profile-details h2 {
    margin: 4px 0 0;
    color: #3c2429;
    font-family: var(--webapp-serif);
    font-size: 19px;
  }

  .webapp-profile-details > header button {
    min-width: 64px;
    min-height: 34px;
    padding: 0 9px;
    border: 1px solid #b8955a;
    border-radius: 3px;
    background: transparent;
    color: #6b2935;
    box-shadow: none;
    font-size: 11px;
  }

  .webapp-profile-details dl {
    margin: 0;
  }

  .webapp-profile-details dl > div {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid #eee1d1;
  }

  .webapp-profile-details dt {
    color: #8c7664;
    font-size: 11px;
  }

  .webapp-profile-details dd {
    margin: 0;
    color: #342329;
    font-size: 12px;
    line-height: 1.5;
    overflow-wrap: anywhere;
    text-align: right;
  }

  .webapp-profile-details > p {
    margin: 11px 0 0;
    color: #887363;
    font-size: 10px;
    line-height: 1.55;
  }

  .student-body.webapp-mobile-mode[data-webapp-route="profile"] .webapp-profile-section,
  .student-body.webapp-mobile-mode[data-webapp-route="profile"] .webapp-profile-stats > article,
  .student-body.webapp-mobile-mode[data-webapp-route="profile"] .webapp-profile-stats > button,
  .student-body.webapp-mobile-mode[data-webapp-route="profile"] .webapp-account-actions {
    background: #fffaf0;
    background-image: none;
    border-color: #d8c4a6;
    box-shadow: 0 6px 16px rgba(69, 44, 31, 0.08);
  }
}

@media (max-width: 380px) {
  .webapp-booking-ledger {
    grid-template-columns: minmax(0, 1fr) 54px;
  }

  .webapp-booking-ledger > div > strong {
    font-size: 18px;
  }

  .webapp-reserved-row {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .webapp-reserved-row > button {
    grid-column: 1 / -1;
    width: 100%;
  }
}

/* Cross-device polish kept after the Web App rules so it wins on mobile. */
@media (max-width: 760px) {
  .teacher-login-page.webapp-mobile-mode {
    background:
      linear-gradient(180deg, rgba(28, 48, 70, 0.98) 0 276px, #f6f5f1 276px),
      #f6f5f1;
  }

  .teacher-login-page.webapp-mobile-mode .login-copy {
    margin: 0 0 18px;
    padding: 20px 18px;
    border: 1px solid rgba(238, 214, 160, 0.28);
    border-radius: 9px;
    background: rgba(35, 58, 82, 0.72);
    box-shadow: 0 14px 30px rgba(19, 31, 46, 0.18);
  }

  .teacher-login-page.webapp-mobile-mode .login-copy .eyebrow {
    color: #f0cf83;
  }

  .teacher-login-page.webapp-mobile-mode .login-copy h1,
  .teacher-login-page.webapp-mobile-mode .login-copy p:not(.eyebrow) {
    color: #fffdf7;
  }

  .teacher-login-page.webapp-mobile-mode .login-highlights span {
    border: 1px solid rgba(240, 207, 131, 0.2);
    background: rgba(255, 255, 255, 0.1);
    color: #fff5dd;
  }

  .student-body.webapp-mobile-mode #schedule .date-strip,
  .teacher-body.webapp-mobile-mode .date-strip,
  .admin-body.webapp-mobile-mode .date-strip,
  .webapp-mobile-mode .portal-tabs {
    scroll-snap-type: x proximity;
    scroll-padding-inline: 14px;
    box-shadow: inset -20px 0 16px -16px rgba(29, 16, 18, 0.88);
  }

  .webapp-mobile-mode .date-tab,
  .webapp-mobile-mode .portal-tabs button {
    scroll-snap-align: start;
  }

  .student-body.webapp-mobile-mode .profile-dialog > .profile-dialog-card {
    background-color: #fff8e9;
    background-image: url("./assets/theme/parchment-paper.jpg");
    background-size: 760px auto;
  }

  .student-body.webapp-mobile-mode .profile-dialog-heading {
    align-items: center;
    background: #fff8e9;
    box-shadow: 0 7px 16px rgba(74, 52, 34, 0.06);
  }

  .student-body.webapp-mobile-mode .profile-dialog-heading span {
    color: #936e32;
    font-size: 10px;
    letter-spacing: 0.06em;
  }

  .student-body.webapp-mobile-mode .profile-dialog-heading h2 {
    margin-top: 3px;
    color: #302128;
    font-family: var(--webapp-serif);
    font-size: 26px;
    line-height: 1.2;
  }

  .student-body.webapp-mobile-mode .profile-dialog .profile-identity {
    gap: 10px;
    padding: 12px 13px;
  }

  .student-body.webapp-mobile-mode .profile-dialog .profile-identity strong {
    font-size: 17px;
  }

  .student-body.webapp-mobile-mode .profile-dialog .profile-identity p {
    font-size: 11px;
    line-height: 1.5;
  }

  .student-body.webapp-mobile-mode .profile-dialog .profile-section {
    gap: 12px;
    padding: 18px 0 0;
  }

  .student-body.webapp-mobile-mode .profile-dialog .profile-section-heading strong {
    color: #342329;
    font-family: var(--webapp-serif);
    font-size: 19px;
  }

  .student-body.webapp-mobile-mode .profile-dialog .profile-section-heading span {
    color: #806959;
    font-size: 11px;
    line-height: 1.5;
  }

  .student-body.webapp-mobile-mode .profile-dialog .profile-form-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 11px;
  }

  .student-body.webapp-mobile-mode .profile-dialog .profile-form-grid > label,
  .student-body.webapp-mobile-mode .profile-dialog .profile-form-grid > .full-field {
    grid-column: auto;
  }

  .student-body.webapp-mobile-mode .profile-dialog .profile-readonly-grid {
    gap: 8px;
  }

  .student-body.webapp-mobile-mode .profile-dialog .profile-readonly-field {
    padding: 11px 12px;
    border-color: rgba(178, 138, 69, 0.24);
    background: rgba(255, 252, 244, 0.7);
  }

  .student-body.webapp-mobile-mode .profile-dialog .profile-readonly-field span {
    font-size: 10px;
  }

  .student-body.webapp-mobile-mode .profile-dialog .profile-readonly-field strong {
    color: #433038;
    font-size: 12px;
  }

  .student-body.webapp-mobile-mode .profile-dialog .profile-security-section {
    padding-top: 20px;
  }

  .student-body.webapp-mobile-mode .profile-identity,
  .student-body.webapp-mobile-mode .avatar-upload-field,
  .student-body.webapp-mobile-mode .setting-toggle {
    border-color: rgba(178, 138, 69, 0.34);
    background: rgba(255, 252, 244, 0.84);
  }

  .student-body.webapp-mobile-mode .profile-dialog-actions {
    position: sticky;
    bottom: calc(-20px - env(safe-area-inset-bottom));
    z-index: 2;
    margin: 0 -16px calc(-20px - env(safe-area-inset-bottom));
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(178, 138, 69, 0.28);
    background: rgba(255, 248, 233, 0.97);
    box-shadow: 0 -8px 20px rgba(74, 52, 34, 0.08);
  }

  .student-body.webapp-mobile-mode .profile-dialog-actions > div {
    width: 100%;
    justify-content: flex-end;
  }

  .student-body.webapp-mobile-mode .profile-dialog-actions button:not(.profile-mobile-logout) {
    background: var(--webapp-wine);
    color: #fff8e9;
  }

  .student-body.webapp-mobile-mode .webapp-collection-hero h1 {
    max-width: none;
    font-size: clamp(22px, 6.2vw, 25px);
    line-height: 1.25;
    overflow-wrap: anywhere;
  }

  .admin-body.webapp-mobile-mode .admin-command-grid article:last-child {
    grid-column: 1 / -1;
  }
}

/* Keep dynamic mobile content inside the page while preserving inner scroll areas. */
@media (max-width: 760px) {
  .student-body.webapp-mobile-mode[data-webapp-route="collection"] .webapp-collection-content,
  .student-body.webapp-mobile-mode[data-webapp-route="collection"] .webapp-collection-museum,
  .student-body.webapp-mobile-mode[data-webapp-route="collection"] .webapp-archive-section,
  .student-body.webapp-mobile-mode[data-webapp-route="booking"] #schedule,
  .student-body.webapp-mobile-mode[data-webapp-route="booking"] .webapp-booking-ledger,
  .student-body.webapp-mobile-mode[data-webapp-route="booking"] .daily-timeline,
  .student-body.webapp-mobile-mode[data-webapp-route="booking"] .webapp-reserved-lessons {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  .student-body.webapp-mobile-mode[data-webapp-route="collection"] .webapp-collection-museum,
  .student-body.webapp-mobile-mode[data-webapp-route="booking"] #schedule {
    overflow-x: hidden;
    overflow-x: clip;
  }

  .student-body.webapp-mobile-mode[data-webapp-route="collection"] .webapp-certificate-track,
  .student-body.webapp-mobile-mode[data-webapp-route="booking"] #schedule .teacher-card-picker,
  .student-body.webapp-mobile-mode[data-webapp-route="booking"] #schedule .date-strip {
    max-width: 100%;
    overscroll-behavior-inline: contain;
  }

  .student-body.webapp-mobile-mode[data-webapp-route="collection"] .webapp-certificate-card {
    flex: 0 0 min(248px, calc(100vw - 62px));
    min-width: min(248px, calc(100vw - 62px));
    max-width: min(248px, calc(100vw - 62px));
  }

  .student-body.webapp-mobile-mode[data-webapp-route="collection"] .webapp-archive-heading > div,
  .student-body.webapp-mobile-mode[data-webapp-route="collection"] .webapp-report-sheet > header > *,
  .student-body.webapp-mobile-mode[data-webapp-route="collection"] .webapp-milestone-row > div,
  .student-body.webapp-mobile-mode[data-webapp-route="collection"] .webapp-milestone-row header > *,
  .student-body.webapp-mobile-mode[data-webapp-route="collection"] .webapp-redemption-ledger article > div,
  .student-body.webapp-mobile-mode[data-webapp-route="booking"] #schedule .teacher-card-body,
  .student-body.webapp-mobile-mode[data-webapp-route="booking"] #schedule .timeline-track-copy,
  .student-body.webapp-mobile-mode[data-webapp-route="booking"] #schedule .webapp-reserved-row > div {
    min-width: 0;
  }

  .student-body.webapp-mobile-mode[data-webapp-route="collection"] .webapp-collection-hero h1,
  .student-body.webapp-mobile-mode[data-webapp-route="collection"] .webapp-collection-hero p,
  .student-body.webapp-mobile-mode[data-webapp-route="collection"] .webapp-report-sheet p,
  .student-body.webapp-mobile-mode[data-webapp-route="collection"] .webapp-report-sheet blockquote,
  .student-body.webapp-mobile-mode[data-webapp-route="collection"] .webapp-milestone-row h3,
  .student-body.webapp-mobile-mode[data-webapp-route="collection"] .webapp-milestone-row p,
  .student-body.webapp-mobile-mode[data-webapp-route="collection"] .webapp-milestone-row blockquote,
  .student-body.webapp-mobile-mode[data-webapp-route="collection"] .webapp-certificate-card h3,
  .student-body.webapp-mobile-mode[data-webapp-route="collection"] .webapp-redemption-ledger div strong,
  .student-body.webapp-mobile-mode[data-webapp-route="booking"] #schedule .teacher-card-body strong,
  .student-body.webapp-mobile-mode[data-webapp-route="booking"] #schedule .teacher-card-body small,
  .student-body.webapp-mobile-mode[data-webapp-route="booking"] #schedule .timeline-track-copy strong,
  .student-body.webapp-mobile-mode[data-webapp-route="booking"] #schedule .timeline-track-copy small,
  .student-body.webapp-mobile-mode[data-webapp-route="booking"] #schedule .webapp-reserved-row > div strong,
  .student-body.webapp-mobile-mode[data-webapp-route="booking"] #schedule .webapp-reserved-row > div span {
    overflow-wrap: anywhere;
  }

  .student-body.webapp-mobile-mode[data-webapp-route="booking"] #schedule .timeline-track-copy strong,
  .student-body.webapp-mobile-mode[data-webapp-route="booking"] #schedule .timeline-track-copy small,
  .student-body.webapp-mobile-mode[data-webapp-route="collection"] .webapp-redemption-ledger div strong {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

  .student-body.webapp-mobile-mode[data-webapp-route="collection"] .webapp-redemption-ledger article > b {
    max-width: 58px;
    white-space: normal;
    text-align: right;
  }

  .student-body.webapp-mobile-mode .profile-dialog .chapter-photo-upload-field {
    grid-template-columns: 86px minmax(0, 1fr);
    align-items: center;
  }

  .student-body.webapp-mobile-mode .profile-dialog .chapter-photo-upload-preview {
    min-height: 74px;
  }

  .student-body.webapp-mobile-mode .profile-dialog .chapter-photo-upload-copy {
    gap: 6px;
  }

  .student-body.webapp-mobile-mode .profile-dialog-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
    align-items: center;
  }

  .student-body.webapp-mobile-mode .profile-dialog-actions p {
    margin: 0;
    font-size: 10px;
    line-height: 1.4;
  }

  .student-body.webapp-mobile-mode .profile-dialog-actions > div {
    display: grid;
    width: 100%;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px;
  }

  .student-body.webapp-mobile-mode .profile-dialog-actions button {
    padding-inline: 11px;
    white-space: nowrap;
  }
}

@media (max-width: 360px) {
  .student-body.webapp-mobile-mode[data-webapp-route="booking"] #schedule .webapp-booking-ledger {
    grid-template-columns: minmax(0, 1fr) 50px;
    gap: 9px;
    padding-inline: 11px;
  }

  .student-body.webapp-mobile-mode[data-webapp-route="booking"] #schedule .webapp-booking-ledger aside {
    min-width: 50px;
    padding-left: 7px;
  }

  .student-body.webapp-mobile-mode[data-webapp-route="booking"] #schedule .timeline-row,
  .student-body.webapp-mobile-mode[data-webapp-route="booking"] #schedule .timeline-row.is-full-hour,
  .student-body.webapp-mobile-mode[data-webapp-route="booking"] #schedule .timeline-row.is-half-hour {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 6px;
    padding-inline: 4px;
  }

  .student-body.webapp-mobile-mode[data-webapp-route="booking"] #schedule .timeline-row.is-half-hour {
    padding-left: 12px;
  }
}