:root {
  --sun: #ffd43b;
  --orange: #ff7338;
  --coral: #ff5b43;
  --cream: #fff9e8;
  --paper: #fffdf5;
  --blue: #145bf3;
  --green: #0ca66b;
  --purple: #7454df;
  --ink: #4b351f;
  --muted: #826f5c;
  --white: #ffffff;
  --shadow: 0 18px 50px rgba(110, 68, 21, .14);
}

* { box-sizing: border-box; }

html { min-height: 100%; background: var(--cream); }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  color: var(--ink);
  font-family: 'Nunito', system-ui, sans-serif;
}

a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }

.kid-shell {
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.45) 0 4px, transparent 5px),
    radial-gradient(circle at 83% 10%, rgba(255,255,255,.38) 0 7px, transparent 8px),
    linear-gradient(135deg, #ffd93f 0%, #ffbd2e 48%, #ff9d32 100%);
}

.weeks-page { min-height: 100vh; padding: max(18px, env(safe-area-inset-top)) max(26px, env(safe-area-inset-right)) max(22px, env(safe-area-inset-bottom)) max(26px, env(safe-area-inset-left)); }

.kid-topbar { height: 64px; display: flex; align-items: center; justify-content: space-between; max-width: 1400px; margin: 0 auto 14px; }
.brand { display: flex; align-items: center; gap: 10px; font: 800 28px/1 'Baloo 2', sans-serif; }
.brand-mark { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 15px; color: white; background: var(--coral); box-shadow: 0 8px 18px rgba(225, 67, 43, .28); }
.topbar-actions { display: flex; align-items: center; gap: 12px; }
.star-pill, .profile-chip { min-height: 48px; border: 2px solid rgba(255,255,255,.7); background: rgba(255,253,245,.8); backdrop-filter: blur(10px); border-radius: 20px; display: flex; align-items: center; gap: 8px; padding: 6px 14px; color: var(--ink); font-weight: 800; }
.star-pill span { color: #ff9f0a; font-size: 24px; }
.profile-chip { border: 0; cursor: pointer; padding-left: 7px; }
.profile-avatar { width: 36px; height: 36px; border-radius: 13px; display: grid; place-items: center; color: white; background: var(--blue); }

.weeks-hero { min-height: calc(100vh - 108px); max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: minmax(250px, 30%) 1fr; background: rgba(255,249,232,.94); border: 3px solid rgba(255,255,255,.75); border-radius: 44px; overflow: hidden; box-shadow: var(--shadow); }
.mascot-stage { position: relative; min-height: 580px; overflow: hidden; background: radial-gradient(circle at 55% 42%, #ffb736 0 22%, transparent 23%), linear-gradient(155deg, #ff7b39 0%, #ff5c3f 100%); }
.mascot-stage::after { content: ''; position: absolute; inset: auto -20% -22% -20%; height: 42%; border-radius: 50% 50% 0 0; background: #0aa36b; }
.tiger-mascot { position: absolute; z-index: 2; width: min(112%, 520px); max-height: 83%; object-fit: contain; object-position: bottom center; left: 50%; bottom: -1%; transform: translateX(-50%); filter: drop-shadow(0 18px 16px rgba(86, 35, 15, .22)); }
.speech-bubble { position: absolute; z-index: 3; top: 7%; right: 5%; max-width: 190px; padding: 14px 18px; border-radius: 24px 24px 24px 7px; background: white; font-weight: 800; transform: rotate(2deg); box-shadow: 0 10px 26px rgba(94, 42, 21, .16); }
.sun-dot { position: absolute; border-radius: 50%; background: rgba(255,215,59,.7); }
.sun-dot--one { width: 34px; height: 34px; top: 20%; left: 8%; }
.sun-dot--two { width: 18px; height: 18px; top: 36%; right: 8%; }

.weeks-content { min-width: 0; padding: clamp(28px, 4vw, 58px); }
.section-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 22px; }
.eyebrow { margin: 0 0 3px; color: var(--coral) !important; font-weight: 800; }
.section-heading h1 { margin: 0; font: 800 clamp(34px, 4vw, 52px)/1.05 'Baloo 2', sans-serif; }
.section-heading p { margin: 4px 0 0; color: var(--muted); font-size: 17px; }
.sound-button { flex: 0 0 auto; width: 52px; height: 52px; border: 0; border-radius: 18px; background: #fff0c5; cursor: pointer; font-size: 22px; }

.latest-week { position: relative; min-height: 260px; display: grid; grid-template-columns: 1fr 180px; align-items: center; gap: 24px; overflow: hidden; padding: 28px 32px; border-radius: 34px; color: white; box-shadow: 0 16px 34px rgba(232, 76, 51, .24); transition: transform .2s ease, box-shadow .2s ease; }
.latest-week:hover, .latest-week:focus-visible { transform: translateY(-3px); box-shadow: 0 21px 40px rgba(232, 76, 51, .3); outline: none; }
.latest-week--coral { background: linear-gradient(135deg, #ff7542, #ff4c46); }
.latest-week::after { content: ''; position: absolute; width: 270px; height: 270px; border-radius: 50%; right: -80px; top: -120px; border: 34px solid rgba(255,255,255,.08); }
.latest-copy { position: relative; z-index: 1; }
.week-badges { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 13px; }
.new-badge, .date-badge { padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 800; }
.new-badge { color: var(--coral); background: white; text-transform: uppercase; }
.date-badge { background: rgba(255,255,255,.17); }
.week-kicker { font-size: 13px; font-weight: 900; letter-spacing: .12em; opacity: .9; }
.latest-week h2 { margin: 3px 0 0; font: 800 clamp(30px, 3.2vw, 46px)/1 'Baloo 2', sans-serif; }
.latest-week p { margin: 4px 0 15px; font-size: 17px; opacity: .9; }
.topic-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 20px; }
.topic-chips span { padding: 6px 10px; border-radius: 11px; background: rgba(255,255,255,.16); font-size: 12px; font-weight: 800; }
.primary-cta { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 12px; padding: 10px 20px; border-radius: 17px; background: white; color: var(--coral); font-weight: 900; }
.primary-cta b { font-size: 23px; line-height: 1; }
.progress-orbit { --size: 150px; position: relative; z-index: 1; width: var(--size); height: var(--size); display: grid; place-items: center; border-radius: 50%; background: conic-gradient(#ffe057 calc(var(--progress) * 1%), rgba(255,255,255,.2) 0); }
.progress-orbit::before { content: ''; position: absolute; inset: 11px; border-radius: 50%; background: rgba(235, 77, 58, .97); }
.progress-orbit div { position: relative; display: grid; text-align: center; }
.progress-orbit strong { font: 800 29px/1 'Baloo 2', sans-serif; }
.progress-orbit span { font-size: 12px; font-weight: 800; opacity: .85; }

.older-heading { display: flex; justify-content: space-between; align-items: baseline; margin: 26px 2px 12px; }
.older-heading h2 { margin: 0; font: 800 24px/1.2 'Baloo 2', sans-serif; }
.older-heading span { color: var(--muted); font-size: 13px; font-weight: 700; }
.week-carousel { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: 14px; overflow-x: auto; padding: 2px 2px 14px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.week-card { position: relative; min-height: 148px; padding: 20px; border-radius: 25px; background: white; scroll-snap-align: start; overflow: hidden; border: 2px solid #f2e9d4; transition: transform .2s ease; }
.week-card:hover, .week-card:focus-visible { transform: translateY(-3px); outline: none; }
.week-card::after { content: ''; position: absolute; width: 95px; height: 95px; right: -42px; bottom: -42px; border-radius: 50%; opacity: .12; background: currentColor; }
.week-card--blue { color: var(--blue); }
.week-card--green { color: var(--green); }
.week-card--purple { color: var(--purple); }
.week-card-top { display: flex; justify-content: space-between; font-size: 12px; font-weight: 900; text-transform: uppercase; }
.mini-progress { min-width: 30px; text-align: center; padding: 3px 6px; border-radius: 10px; color: white; background: currentColor; filter: brightness(.95); }
.week-card h3 { margin: 15px 0 1px; color: var(--ink); font: 800 20px/1.05 'Baloo 2', sans-serif; }
.week-card p { margin: 0; color: var(--muted); font-size: 13px; }
.week-card-arrow { position: absolute; right: 18px; bottom: 13px; font-size: 22px; font-weight: 900; }

.simple-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.simple-card { max-width: 460px; padding: 42px; border-radius: 36px; background: white; text-align: center; box-shadow: var(--shadow); }
.simple-icon { font-size: 64px; }
.simple-card h1 { font: 800 38px/1.1 'Baloo 2', sans-serif; }
.simple-card .primary-cta { background: var(--coral); color: white; }

@media (max-width: 900px) {
  .weeks-page { padding: 14px; }
  .weeks-hero { grid-template-columns: 1fr; border-radius: 32px; }
  .mascot-stage { min-height: 240px; }
  .tiger-mascot { width: 270px; max-height: none; left: 25%; bottom: -42%; }
  .speech-bubble { right: 12%; }
  .weeks-content { padding: 26px; }
}

@media (max-width: 600px) {
  .kid-topbar { height: 54px; }
  .brand { font-size: 23px; }
  .brand-mark { width: 38px; height: 38px; border-radius: 12px; }
  .star-pill { display: none; }
  .profile-chip > span:last-child { display: none; }
  .mascot-stage { min-height: 200px; }
  .tiger-mascot { left: 32%; width: 230px; }
  .weeks-content { padding: 22px 18px 28px; }
  .section-heading h1 { font-size: 32px; }
  .section-heading p { font-size: 14px; }
  .latest-week { grid-template-columns: 1fr; padding: 24px; }
  .progress-orbit { --size: 90px; position: absolute; right: 20px; top: 24px; }
  .progress-orbit::before { inset: 8px; }
  .progress-orbit strong { font-size: 20px; }
  .progress-orbit span { display: none; }
  .week-badges { padding-right: 96px; }
  .latest-week h2 { font-size: 32px; }
}

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

/* Join */
.join-shell { background: var(--cream); }
.join-page { min-height: 100vh; display: grid; grid-template-columns: minmax(420px, 1.05fr) minmax(420px, .95fr); }
.join-visual { position: relative; min-height: 700px; padding: 38px clamp(34px, 5vw, 76px); overflow: hidden; color: white; background: radial-gradient(circle at 78% 24%, #ffdc51 0 8%, transparent 8.4%), linear-gradient(145deg, #ffb52e, #ff6a3f 70%); }
.join-visual::before, .join-visual::after { content: ''; position: absolute; border-radius: 50%; background: rgba(255,255,255,.1); }
.join-visual::before { width: 310px; height: 310px; left: -130px; bottom: 10%; }
.join-visual::after { width: 160px; height: 160px; right: -40px; top: 8%; }
.brand--light { position: relative; z-index: 3; color: white; }
.join-message { position: relative; z-index: 3; max-width: 600px; margin-top: 8vh; }
.join-message h1 { margin: 4px 0 10px; max-width: 600px; font: 800 clamp(48px, 6vw, 78px)/.98 'Baloo 2', sans-serif; }
.join-message > p:last-child { max-width: 510px; font-size: 20px; line-height: 1.55; opacity: .9; }
.eyebrow--light { color: #fff2a1 !important; letter-spacing: .12em; }
.join-tiger { position: absolute; z-index: 2; width: min(53vw, 660px); max-height: 68%; object-fit: contain; right: -3%; bottom: -2%; filter: drop-shadow(0 22px 20px rgba(84, 38, 12, .2)); }
.join-form-panel { display: grid; place-items: center; padding: 48px; }
.join-form-wrap { width: min(100%, 500px); }
.parent-label, .teacher-kicker { display: inline-block; margin-bottom: 14px; padding: 7px 12px; border-radius: 10px; background: #fff0c6; color: #d95e2f; font-size: 12px; font-weight: 900; letter-spacing: .08em; }
.join-form-wrap h2 { margin: 0; font: 800 clamp(38px, 4vw, 52px)/1.05 'Baloo 2', sans-serif; }
.join-form-wrap > p { color: var(--muted); font-size: 17px; }
.join-form { display: grid; gap: 12px; margin-top: 30px; }
.join-form label, .teacher-login-form label { font-weight: 900; }
.join-form input, .teacher-login-form input { width: 100%; height: 72px; padding: 0 22px; border: 3px solid #eadfc8; border-radius: 22px; outline: none; background: white; color: var(--ink); font: 900 24px/1 'Nunito', sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.join-form input:focus, .teacher-login-form input:focus { border-color: var(--orange); box-shadow: 0 0 0 5px rgba(255,115,56,.12); }
.join-submit { height: 62px; margin-top: 5px; border: 0; border-radius: 20px; background: linear-gradient(135deg, var(--orange), var(--coral)); color: white; cursor: pointer; font-size: 18px; font-weight: 900; box-shadow: 0 14px 26px rgba(255,91,67,.25); }
.join-submit span { margin-left: 12px; font-size: 24px; }
.demo-hint { padding: 12px 16px; border-radius: 13px; background: #fff6dc; color: var(--muted); text-align: center; font-size: 14px !important; }
.teacher-entry { display: block; margin-top: 24px; color: var(--blue); text-align: center; font-weight: 800; }
.form-alert { margin: 18px 0; padding: 13px 16px; border-radius: 14px; background: #fff0ed; color: #bf392c; font-weight: 800; }

/* Week detail */
.detail-shell { background: #fff8e9; }
.detail-page { min-height: 100vh; max-width: 1500px; margin: auto; padding: max(18px, env(safe-area-inset-top)) clamp(22px, 4vw, 58px) 50px; }
.detail-topbar, .player-topbar { min-height: 62px; display: grid; grid-template-columns: 62px 1fr auto; align-items: center; gap: 16px; margin-bottom: 20px; }
.back-button { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 18px; background: white; font-size: 28px; font-weight: 900; box-shadow: 0 8px 20px rgba(90, 56, 18, .1); }
.detail-title, .player-heading { display: grid; }
.detail-title span, .player-heading span { color: var(--muted); font-size: 11px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.detail-title strong, .player-heading strong { font: 800 23px/1.1 'Baloo 2', sans-serif; }
.detail-hero { position: relative; min-height: 250px; display: flex; align-items: center; overflow: hidden; padding: 38px clamp(30px, 5vw, 64px); border-radius: 38px; color: white; background: linear-gradient(120deg, #ff7b38, #ff4e43); box-shadow: 0 18px 40px rgba(224, 78, 45, .2); }
.detail-hero::before { content: ''; position: absolute; width: 340px; height: 340px; right: 10%; top: -150px; border: 45px solid rgba(255,255,255,.08); border-radius: 50%; }
.detail-hero > div { position: relative; z-index: 2; max-width: 66%; }
.detail-hero h1 { margin: 2px 0; font: 800 clamp(42px, 5vw, 68px)/.98 'Baloo 2', sans-serif; }
.detail-hero .eyebrow { color: white !important; }
.detail-hero p { margin: 5px 0 17px; font-size: 18px; opacity: .9; }
.topic-chips--light span { background: rgba(255,255,255,.18); }
.detail-tiger { position: absolute; z-index: 2; width: 270px; max-height: 330px; object-fit: contain; right: clamp(15px, 6vw, 90px); bottom: -55px; filter: drop-shadow(0 16px 14px rgba(94, 35, 14, .18)); }
.learning-grid { display: grid; grid-template-columns: minmax(280px, 35%) 1fr; gap: 24px; align-items: start; margin-top: 26px; }
.goal-card, .activity-group, .empty-week { border: 2px solid #efe3cb; border-radius: 30px; background: white; box-shadow: 0 12px 30px rgba(104, 70, 28, .06); }
.goal-card { position: sticky; top: 20px; padding: 26px; }
.goal-heading { display: flex; gap: 14px; align-items: center; padding-bottom: 18px; border-bottom: 2px dashed #ecdfc7; }
.goal-heading > span { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 19px; background: #e9f0ff; color: var(--blue); font-weight: 900; }
.goal-heading small { color: var(--muted); font-size: 10px; font-weight: 900; letter-spacing: .12em; }
.goal-heading h2 { margin: 1px 0 0; font: 800 22px/1.1 'Baloo 2', sans-serif; }
.goal-section { padding: 18px 2px 0; }
.goal-section h3 { margin: 0 0 8px; color: var(--coral); font: 800 17px/1.2 'Baloo 2', sans-serif; }
.goal-section p { margin: 5px 0; color: #685744; font-size: 14px; line-height: 1.55; }
.goal-section button { width: 100%; display: flex; gap: 9px; align-items: center; margin: 7px 0; padding: 9px 11px; border: 0; border-radius: 12px; background: #fff7df; color: var(--ink); cursor: pointer; text-align: left; font-size: 13px; font-weight: 700; }
.parent-note { margin-top: 20px; padding: 13px 15px; border-radius: 15px; background: #edf7ff; color: #315d79; }
.parent-note summary { cursor: pointer; font-weight: 900; }
.parent-note p { margin-bottom: 0; font-size: 13px; line-height: 1.5; }
.activity-groups { display: grid; gap: 20px; }
.activity-group { padding: 24px; }
.activity-group-title { display: flex; align-items: center; gap: 11px; margin-bottom: 15px; }
.activity-group-title > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; background: #fff0c8; color: var(--orange); font-size: 21px; font-weight: 900; }
.activity-group-title h2 { margin: 0; font: 800 24px/1 'Baloo 2', sans-serif; }
.activity-group-title small { margin-left: auto; color: var(--muted); font-weight: 700; }
.activity-list { display: grid; gap: 10px; }
.activity-card { min-height: 82px; display: grid; grid-template-columns: 30px 56px 1fr auto 42px; align-items: center; gap: 12px; padding: 10px 13px; border: 2px solid #f1e7d5; border-radius: 21px; transition: transform .18s ease, border-color .18s ease; }
.activity-card:hover, .activity-card:focus-visible { transform: translateX(3px); border-color: #ffc16c; outline: none; }
.activity-card--done { background: #f5fff9; border-color: #bcebd4; }
.activity-number { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 10px; background: #f8f0df; color: var(--muted); font-size: 12px; font-weight: 900; }
.activity-card--done .activity-number { background: var(--green); color: white; }
.activity-icon { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 17px; color: white; font-size: 22px; font-weight: 900; }
.provider-youtube { background: #ff5746; }.provider-wordwall { background: #7858df; }.provider-tinytap { background: #1591e8; }
.activity-copy { min-width: 0; display: grid; }
.activity-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 18px/1.2 'Baloo 2', sans-serif; }
.activity-copy small { color: var(--muted); font-size: 12px; }
.provider-label { padding: 5px 8px; border-radius: 9px; background: #f5eddf; color: var(--muted); font-size: 9px; font-weight: 900; letter-spacing: .08em; }
.activity-go { font-size: 22px; font-weight: 900; color: var(--orange); }
.empty-week { padding: 50px; text-align: center; }.empty-week span { font-size: 58px; }

/* Player */
.player-shell { background: #47301f; }
.player-page { min-height: 100vh; padding: max(14px, env(safe-area-inset-top)) max(22px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(22px, env(safe-area-inset-left)); color: white; }
.player-topbar { max-width: 1500px; margin: 0 auto 14px; }
.back-button--light { color: white; background: rgba(255,255,255,.13); box-shadow: none; }
.player-heading span { color: #d7c5b6; }.player-heading strong { color: white; }
.player-top-actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; }
.fullscreen-button { min-height: 44px; display: flex; align-items: center; padding: 8px 14px; border: 1px solid rgba(255,255,255,.25); border-radius: 14px; color: #f3e9df; background: transparent; font-size: 13px; font-weight: 800; }
.fullscreen-button { cursor: pointer; background: rgba(255,255,255,.1); }
.player-body { max-width: 1500px; margin: auto; }
.player-instruction { min-height: 80px; display: grid; grid-template-columns: 70px 1fr 50px; align-items: center; gap: 14px; margin-bottom: 14px; padding: 8px 18px 8px 8px; border-radius: 24px; background: #fff8e8; color: var(--ink); }
.player-instruction img { width: 70px; height: 70px; object-fit: contain; object-position: top; }
.player-instruction small { color: var(--orange); font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.player-instruction p { margin: 2px 0 0; font: 800 19px/1.2 'Baloo 2', sans-serif; }
.player-instruction button { width: 46px; height: 46px; border: 0; border-radius: 15px; background: #ffe5a7; cursor: pointer; }
.embed-shell { position: relative; width: 100%; height: min(68vh, 790px); min-height: 440px; overflow: hidden; border: 5px solid white; border-radius: 28px; background: #1d1713; box-shadow: 0 20px 50px rgba(0,0,0,.24); }
.embed-shell iframe { width: 100%; height: 100%; border: 0; background: white; }
.embed-shell--tinytap { width: min(100%, 90vh); height: auto; min-height: 0; aspect-ratio: 4 / 3; margin-inline: auto; }
.fullscreen-close { position: absolute; z-index: 5; top: 14px; right: 14px; display: none; min-height: 42px; padding: 8px 13px; border: 1px solid rgba(255,255,255,.45); border-radius: 13px; background: rgba(49,34,24,.82); color: white; cursor: pointer; font-weight: 900; backdrop-filter: blur(8px); }
.embed-shell:fullscreen, .embed-shell.is-pseudo-fullscreen { width: 100vw; max-width: none; height: 100vh; min-height: 0; margin: 0; border: 0; border-radius: 0; background: #1d1713; box-shadow: none; }
.embed-shell:fullscreen .fullscreen-close, .embed-shell.is-pseudo-fullscreen .fullscreen-close { display: flex; align-items: center; }
.embed-shell--tinytap:fullscreen iframe, .embed-shell--tinytap.is-pseudo-fullscreen iframe { width: min(100%, 133.333vh); height: 100%; display: block; margin-inline: auto; }
.player-pseudo-fullscreen { overflow: hidden; }
.embed-shell.is-pseudo-fullscreen { position: fixed; z-index: 9999; inset: 0; }
.external-fallback { height: 100%; display: grid; place-content: center; justify-items: center; text-align: center; }.external-fallback span { font-size: 72px; }
.player-actions { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 14px; }
.player-actions details { max-width: 650px; color: #eadfd5; font-size: 13px; }.player-actions summary { cursor: pointer; font-weight: 900; }
.complete-button { min-height: 52px; padding: 10px 22px; border: 0; border-radius: 17px; background: #ffcf38; color: var(--ink); cursor: pointer; font-weight: 900; }.complete-button span { color: #f57d18; }

/* Teacher */
.teacher-shell { background: #f7f6f1; color: #30291f; }
.teacher-app { min-height: 100vh; display: grid; grid-template-columns: 245px 1fr; }
.teacher-sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 26px 20px; border-right: 1px solid #e9e4d9; background: #fffdf8; }
.teacher-sidebar .brand { padding: 0 8px; font-size: 24px; }
.teacher-sidebar nav { display: grid; gap: 7px; margin-top: 48px; }
.teacher-sidebar nav a { min-height: 48px; display: flex; align-items: center; gap: 12px; padding: 9px 13px; border-radius: 14px; color: #756a5d; font-weight: 800; }
.teacher-sidebar nav a span { width: 24px; text-align: center; font-size: 20px; }
.teacher-sidebar nav a.active { background: #fff0da; color: #d95e2e; }
.logout-link { margin-top: auto; padding: 13px; color: #9b5747; font-weight: 800; }
.teacher-main { min-width: 0; padding: 38px clamp(30px, 4vw, 68px) 60px; }
.teacher-page-header { display: flex; justify-content: space-between; align-items: center; gap: 30px; margin-bottom: 28px; }
.teacher-page-header h1 { margin: 0; font: 800 clamp(34px, 4vw, 48px)/1 'Baloo 2', sans-serif; }
.teacher-page-header p { margin: 5px 0 0; color: #7d7265; }
.teacher-primary { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 10px 18px; border: 0; border-radius: 14px; background: linear-gradient(135deg, #ff7a39, #ff5c43); color: white; cursor: pointer; font-weight: 900; box-shadow: 0 9px 20px rgba(233, 82, 46, .18); }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.stat-grid article { min-height: 108px; display: flex; align-items: center; gap: 14px; padding: 19px; border: 1px solid #e9e3d8; border-radius: 20px; background: white; }
.stat-icon { width: 49px; height: 49px; display: grid; place-items: center; border-radius: 15px; font-size: 21px; }.stat-icon--orange { background: #fff0dc; color: var(--orange); }.stat-icon--blue { background: #e9f1ff; color: var(--blue); }.stat-icon--green { background: #e5f8ee; color: var(--green); }
.stat-grid article > div { display: grid; }.stat-grid small { color: #8c8175; font-size: 9px; font-weight: 900; letter-spacing: .08em; }.stat-grid strong { font: 800 27px/1.1 'Baloo 2', sans-serif; }
.invite-stat { justify-content: space-between; background: #423124 !important; color: white; }.invite-stat small { color: #d9cbbd; }.invite-stat strong { letter-spacing: .08em; }.invite-stat button { padding: 7px 9px; border: 0; border-radius: 10px; background: rgba(255,255,255,.12); color: white; cursor: pointer; font-size: 11px; font-weight: 800; }
.teacher-panel, .editor-card { border: 1px solid #e9e3d8; border-radius: 22px; background: white; }
.teacher-panel { padding: 25px; }
.panel-heading h2 { margin: 0; font: 800 25px/1 'Baloo 2', sans-serif; }.panel-heading p { margin: 5px 0 18px; color: #86796c; font-size: 13px; }
.teacher-week-list { display: grid; }.teacher-week-row { min-height: 72px; display: grid; grid-template-columns: 48px 1fr auto 100px; align-items: center; gap: 14px; padding: 10px 4px; border-top: 1px solid #eee8dd; }
.teacher-week-number { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: #fff0dc; color: #d95a2c; font-weight: 900; }.teacher-week-copy { display: grid; }.teacher-week-copy strong { font: 800 17px/1.2 'Baloo 2', sans-serif; }.teacher-week-copy small { color: #8a7d70; }.status-badge { padding: 5px 9px; border-radius: 9px; font-size: 10px; font-weight: 900; }.status-badge--published { background: #e5f8ee; color: #188457; }.status-badge--draft { background: #f0ece6; color: #746b61; }.teacher-week-row > a { color: var(--blue); font-size: 12px; font-weight: 800; }
.teacher-login-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 20% 10%, #ffe678, transparent 24%), linear-gradient(135deg, #fff9e8, #fff1d4); }
.teacher-login-card { width: min(100%, 440px); padding: 38px; border: 1px solid #eee2ce; border-radius: 28px; background: white; box-shadow: var(--shadow); }.teacher-login-card .brand { margin-bottom: 40px; }.teacher-login-card h1 { margin: 0; font: 800 44px/1 'Baloo 2', sans-serif; }.teacher-login-card > p { color: var(--muted); }
.teacher-login-form { display: grid; gap: 10px; margin-top: 24px; }.teacher-login-form input { height: 62px; }.teacher-login-form button { min-height: 54px; border: 0; border-radius: 16px; background: var(--orange); color: white; cursor: pointer; font-weight: 900; }
.teacher-main--form { max-width: 1200px; }.text-back { display: inline-block; margin-bottom: 11px; color: #796c60; font-size: 13px; font-weight: 800; }
.week-editor { display: grid; gap: 18px; }.editor-card { padding: 26px; }.editor-step { display: flex; gap: 13px; align-items: center; margin-bottom: 22px; }.editor-step > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: #fff0dc; color: #db5e2d; font-weight: 900; }.editor-step h2 { margin: 0; font: 800 23px/1 'Baloo 2', sans-serif; }.editor-step p { margin: 4px 0 0; color: #897d70; font-size: 13px; }
.form-grid { display: grid; grid-template-columns: 120px 1fr 1fr; gap: 15px; }.form-grid--single { grid-template-columns: 1fr 1fr; }.field { display: grid; gap: 6px; }.field > span { color: #675d53; font-size: 12px; font-weight: 900; }.field input, .field select, .field textarea { width: 100%; min-height: 45px; padding: 10px 12px; border: 1.5px solid #ddd5c9; border-radius: 12px; outline: none; background: #fffefa; color: #352d25; font: 700 14px/1.4 'Nunito', sans-serif; }.field textarea { resize: vertical; }.field input:focus, .field select:focus, .field textarea:focus { border-color: #ff8a52; box-shadow: 0 0 0 3px rgba(255,122,57,.1); }
.resource-editor-list { display: grid; gap: 12px; }.resource-editor-row { position: relative; display: grid; grid-template-columns: 1fr 180px 1.7fr 36px; gap: 12px; align-items: end; padding: 15px; border-radius: 16px; background: #faf7f1; }.remove-resource { width: 34px; height: 34px; margin-bottom: 6px; border: 0; border-radius: 10px; background: #ffe8e4; color: #c94334; cursor: pointer; font-size: 21px; }.add-resource { margin-top: 13px; padding: 10px 13px; border: 1px dashed #d98a5f; border-radius: 12px; background: #fff9f2; color: #c75f2c; cursor: pointer; font-weight: 900; }
.editor-actions { position: sticky; bottom: 0; display: flex; justify-content: flex-end; align-items: center; gap: 12px; padding: 15px 18px; border: 1px solid #e7e0d5; border-radius: 18px; background: rgba(255,253,248,.95); backdrop-filter: blur(12px); box-shadow: 0 -8px 26px rgba(80, 59, 36, .06); }.editor-actions > a { margin-right: auto; color: #786c61; font-weight: 800; }.save-draft { min-height: 46px; padding: 9px 16px; border: 1px solid #dcd3c7; border-radius: 13px; background: white; color: #594e43; cursor: pointer; font-weight: 900; }

@media (max-width: 1100px) {
  .join-page { grid-template-columns: .9fr 1.1fr; }.join-message h1 { font-size: 53px; }.join-tiger { width: 520px; right: -20%; }
  .learning-grid { grid-template-columns: 1fr; }.goal-card { position: static; }.stat-grid { grid-template-columns: repeat(2, 1fr); }.form-grid { grid-template-columns: 110px 1fr; }.resource-editor-row { grid-template-columns: 1fr 170px; }.field--url { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .join-page { grid-template-columns: 1fr; }.join-visual { min-height: 310px; padding: 25px; }.join-message { margin-top: 30px; }.join-message h1 { max-width: 70%; font-size: 38px; }.join-message > p:last-child { display: none; }.join-tiger { width: 270px; right: -3%; max-height: 75%; }.join-form-panel { padding: 34px 22px; }
  .detail-page { padding: 14px; }.detail-title strong { font-size: 18px; }.detail-hero { min-height: 220px; padding: 28px; }.detail-hero > div { max-width: 75%; }.detail-hero h1 { font-size: 38px; }.detail-tiger { width: 190px; right: -20px; bottom: -40px; }.learning-grid { gap: 15px; }.activity-group { padding: 17px; }.activity-card { grid-template-columns: 26px 48px 1fr 34px; }.provider-label { display: none; }.activity-icon { width: 46px; height: 46px; }.activity-copy strong { font-size: 16px; }
  .player-page { padding: 12px; }.embed-shell { min-height: 360px; height: 62vh; }.player-actions { align-items: flex-end; }.player-actions details { max-width: 55%; }
  .teacher-app { grid-template-columns: 1fr; }.teacher-sidebar { position: static; height: auto; padding: 16px; border-right: 0; border-bottom: 1px solid #e8e0d4; }.teacher-sidebar nav { grid-template-columns: repeat(3, 1fr); margin: 16px 0 0; }.teacher-sidebar nav a { justify-content: center; font-size: 0; }.teacher-sidebar nav a span { font-size: 21px; }.logout-link { display: none; }.teacher-main { padding: 28px 18px 50px; }.teacher-page-header { align-items: flex-start; }.teacher-page-header h1 { font-size: 34px; }.stat-grid { grid-template-columns: 1fr; }.teacher-week-row { grid-template-columns: 44px 1fr auto; }.teacher-week-row > a { display: none; }.status-badge { grid-column: 3; }.form-grid, .form-grid--single, .resource-editor-row { grid-template-columns: 1fr; }.field--url { grid-column: auto; }.remove-resource { position: absolute; right: 10px; top: 10px; }.editor-actions { flex-wrap: wrap; }.editor-actions > a { display: none; }
}

/* Shape Match game */
.game-shell { background: linear-gradient(145deg, #ffd743, #ff9e37); }
.shape-game { min-height: 100vh; max-width: 1440px; margin: auto; padding: max(16px, env(safe-area-inset-top)) clamp(18px, 4vw, 52px) max(20px, env(safe-area-inset-bottom)); }
.game-topbar { min-height: 60px; display: grid; grid-template-columns: 60px 1fr auto; align-items: center; gap: 13px; margin-bottom: 15px; }
.game-title { display: grid; }.game-title small { color: #9e551d; font-size: 10px; font-weight: 900; letter-spacing: .12em; }.game-title strong { font: 800 26px/1 'Baloo 2', sans-serif; }
.game-stars { min-width: 82px; min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 17px; background: white; font-weight: 900; }.game-stars span { color: #ff9c17; font-size: 23px; }
.game-board { min-height: calc(100vh - 120px); display: grid; grid-template-columns: minmax(250px, 31%) 1fr; overflow: hidden; border: 4px solid rgba(255,255,255,.7); border-radius: 40px; background: #fffaf0; box-shadow: 0 20px 50px rgba(119, 67, 19, .17); }
.game-side { position: relative; min-height: 590px; overflow: hidden; padding: 28px; background: radial-gradient(circle at 50% 42%, #ffc843 0 20%, transparent 20.5%), linear-gradient(155deg, #ff7a38, #ff5542); }
.game-side::after { content: ''; position: absolute; left: -20%; right: -20%; bottom: -22%; height: 42%; border-radius: 50% 50% 0 0; background: #0ca66b; }
.game-progress { position: relative; z-index: 3; color: white; font-size: 11px; font-weight: 900; }.game-progress > div { height: 8px; margin-top: 7px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.25); }.game-progress i { display: block; width: 20%; height: 100%; border-radius: inherit; background: #ffe24e; transition: width .25s ease; }
.game-tiger { position: absolute; z-index: 2; width: min(115%, 500px); max-height: 78%; object-fit: contain; left: 50%; bottom: -3%; transform: translateX(-50%); filter: drop-shadow(0 14px 14px rgba(85, 34, 12, .18)); }
.game-speech { position: absolute; z-index: 4; top: 17%; right: 5%; max-width: 185px; padding: 13px 16px; border-radius: 20px 20px 20px 6px; background: white; color: var(--ink); font-weight: 900; box-shadow: 0 10px 24px rgba(89, 41, 18, .15); }
.game-play-area { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(26px, 5vw, 70px); }
.object-card { position: relative; width: min(100%, 390px); min-height: 210px; display: grid; place-items: center; align-content: center; gap: 4px; border: 3px solid #f2e5c8; border-radius: 34px; background: white; box-shadow: 0 16px 32px rgba(106, 68, 21, .09); }.object-emoji { font-size: clamp(80px, 11vw, 130px); line-height: 1; }.object-card strong { font: 800 26px/1 'Baloo 2', sans-serif; }.object-card button { position: absolute; right: 16px; top: 16px; width: 44px; height: 44px; border: 0; border-radius: 14px; background: #fff0c5; cursor: pointer; }
.shape-question { margin: 23px 0 14px; color: #6e5a43; font-size: 17px; font-weight: 900; }
.shape-options { width: min(100%, 620px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }.shape-options button { min-height: 145px; display: grid; place-items: center; align-content: center; gap: 12px; border: 3px solid #eee2cb; border-radius: 27px; background: white; color: var(--ink); cursor: pointer; transition: transform .16s ease, border-color .16s ease, background .16s ease; }.shape-options button:hover, .shape-options button:focus-visible { transform: translateY(-3px); border-color: #ffc053; outline: none; }.shape-options button.correct { border-color: #29b977; background: #e9fff4; }.shape-options button.wrong { border-color: #ff6151; background: #fff0ee; animation: game-shake .35s ease; }.shape-options b { font: 800 17px/1 'Baloo 2', sans-serif; }
.shape { display: block; width: 70px; height: 70px; background: var(--blue); }.shape--circle { border-radius: 50%; background: #1760ee; }.shape--square { border-radius: 13px; background: #ff6650; }.shape--triangle { width: 0; height: 0; border-left: 42px solid transparent; border-right: 42px solid transparent; border-bottom: 74px solid #f3b61f; background: transparent; }
.game-next { min-height: 50px; margin-top: 18px; padding: 10px 22px; border: 0; border-radius: 16px; background: var(--green); color: white; cursor: pointer; font-weight: 900; }.game-next[hidden] { visibility: hidden; display: block; }
.game-complete { width: min(90vw, 480px); padding: 30px; border: 0; border-radius: 32px; background: #fffaf0; color: var(--ink); text-align: center; box-shadow: 0 30px 80px rgba(64, 33, 12, .3); }.game-complete::backdrop { background: rgba(62, 36, 18, .64); backdrop-filter: blur(6px); }.game-complete img { width: 170px; height: 150px; object-fit: contain; object-position: top; }.confetti-stars { display: block; color: #ffb21f; letter-spacing: .3em; }.game-complete h2 { margin: 4px 0; font: 800 46px/1 'Baloo 2', sans-serif; }.game-complete p { color: var(--muted); }.game-complete > strong { display: block; margin: 15px; color: #f09318; font-size: 22px; }.game-complete a { display: inline-flex; min-height: 50px; align-items: center; padding: 10px 20px; border-radius: 16px; background: var(--coral); color: white; font-weight: 900; }
@keyframes game-shake { 25% { transform: translateX(-6px); } 50% { transform: translateX(6px); } 75% { transform: translateX(-3px); } }

@media (max-width: 850px) {
  .shape-game { padding: 12px; }.game-board { grid-template-columns: 1fr; }.game-side { min-height: 180px; }.game-tiger { width: 220px; max-height: none; left: 20%; bottom: -75%; }.game-speech { top: 38%; right: 10%; }.game-play-area { padding: 24px; }.object-card { min-height: 170px; }.object-emoji { font-size: 78px; }.shape-options button { min-height: 118px; }.shape { width: 56px; height: 56px; }.shape--triangle { width: 0; height: 0; border-left-width: 33px; border-right-width: 33px; border-bottom-width: 58px; }
}

/* Preschool-first screens: full canvas, large visual targets, almost no helper copy. */
.weeks-page { padding: 0; }
.weeks-hero { min-height: 100vh; max-width: none; margin: 0; border: 0; border-radius: 0; box-shadow: none; }
.weeks-content { display: flex; flex-direction: column; justify-content: center; }
.latest-week { min-height: clamp(250px, 38vh, 360px); }
.latest-week .primary-cta { width: 68px; height: 68px; padding: 0; border-radius: 24px; font-size: 0; }
.latest-week .primary-cta b { font-size: 31px; }
.latest-week .progress-orbit { --size: 154px; }
.detail-page { max-width: none; padding: 0 0 44px; }
.detail-hero { min-height: clamp(260px, 38vh, 390px); border-radius: 0 0 42px 42px; padding: 58px clamp(34px, 7vw, 100px) 38px; }
.detail-back, .parent-info-button { position: absolute; z-index: 5; top: max(18px, env(safe-area-inset-top)); min-width: 54px; height: 54px; display: grid; place-items: center; border: 0; border-radius: 18px; background: rgba(255,255,255,.94); color: var(--ink); cursor: pointer; box-shadow: 0 9px 24px rgba(105,45,19,.18); font-size: 26px; font-weight: 900; }
.detail-back { left: max(22px, env(safe-area-inset-left)); }
.parent-info-button { right: max(22px, env(safe-area-inset-right)); grid-auto-flow: column; gap: 7px; padding: 0 16px; font-size: 21px; }
.parent-info-button span { font-size: 13px; }
.learning-grid--activities-only { max-width: 1200px; grid-template-columns: 1fr; margin: 24px auto 0; padding: 0 24px; }
.activity-card { min-height: 100px; grid-template-columns: 38px 68px 1fr 46px; gap: 16px; }
.activity-icon { width: 66px; height: 66px; border-radius: 21px; font-size: 29px; }
.activity-copy strong { font-size: 22px; }
.parent-goals-dialog { width: min(90vw, 650px); max-height: 84vh; overflow: auto; padding: 34px; border: 0; border-radius: 30px; color: var(--ink); box-shadow: 0 30px 90px rgba(65,35,18,.35); }
.parent-goals-dialog::backdrop { background: rgba(62,36,18,.62); backdrop-filter: blur(5px); }
.parent-goals-dialog h2 { margin: 8px 40px 20px 0; font: 800 32px/1.1 'Baloo 2', sans-serif; }
.parent-goals-dialog h3 { margin-bottom: 5px; color: var(--coral); }
.parent-goals-dialog p { margin: 5px 0; line-height: 1.55; }
.parent-dialog-label { color: var(--blue); font-size: 11px; font-weight: 900; letter-spacing: .11em; }
.parent-dialog-note { padding: 14px 16px; border-radius: 16px; background: #edf7ff; }
.dialog-close { position: absolute; top: 18px; right: 18px; width: 42px; height: 42px; border: 0; border-radius: 13px; background: #f4ede2; cursor: pointer; font-size: 25px; }
.player-instruction--audio { width: 150px; min-height: 80px; grid-template-columns: 76px 58px; margin-left: auto; padding: 5px 8px; }
.player-instruction--audio button { width: 52px; height: 52px; border: 0; border-radius: 18px; background: #ffdc58; cursor: pointer; font-size: 24px; }
[data-audio-src].is-playing, .vocabulary-listen.is-playing { animation: audio-pulse .75s ease infinite alternate; }

.vocabulary-editor-list { display: grid; gap: 14px; }
.vocabulary-editor-row { position: relative; display: grid; grid-template-columns: 1fr 1fr .55fr 1.2fr; gap: 12px; padding: 18px 54px 18px 18px; border-radius: 18px; background: #faf7f1; }
.vocabulary-editor-row .field--file { grid-column: span 1; }
.field--file input { padding: 7px; background: white; }
.field--file input.is-uploading { opacity: .55; cursor: wait; }
.field--file input.is-uploaded { border-color: #25a96d; background: #ecfff5; }
.field--file input.has-upload-error { border-color: #d94d3d; background: #fff0ee; }
.remove-vocabulary { position: absolute; top: 14px; right: 13px; width: 34px; height: 34px; border: 0; border-radius: 10px; background: #ffe8e4; color: #c94334; cursor: pointer; font-size: 21px; }
.upload-hint { margin: 12px 0 0; color: #86786a; font-size: 12px; }
.resource-editor-row .field--instruction { grid-column: 1 / 3; }
.resource-editor-row .field--file { grid-column: 3; }

.vocabulary-game-shell { overflow: hidden; background: linear-gradient(145deg, #ffd743, #ff9e37); }
.vocabulary-game { position: relative; min-height: 100vh; padding: max(18px, env(safe-area-inset-top)) clamp(18px, 4vw, 52px) max(18px, env(safe-area-inset-bottom)); }
.vocabulary-back { position: absolute; z-index: 4; top: max(20px, env(safe-area-inset-top)); left: max(22px, env(safe-area-inset-left)); width: 56px; height: 56px; display: grid; place-items: center; border-radius: 19px; background: white; font-size: 29px; font-weight: 900; box-shadow: 0 9px 24px rgba(105,55,18,.16); }
.vocabulary-progress { height: 56px; display: flex; justify-content: center; align-items: center; gap: 9px; }
.vocabulary-progress i { width: 13px; height: 13px; border-radius: 50%; background: rgba(255,255,255,.5); transition: transform .2s ease, background .2s ease; }
.vocabulary-progress i.active { transform: scale(1.35); background: white; }
.vocabulary-board { position: relative; min-height: calc(100vh - 100px); display: grid; grid-template-rows: auto 1fr; align-items: center; justify-items: center; overflow: hidden; padding: clamp(28px, 5vh, 56px) clamp(22px, 5vw, 70px); border: 4px solid rgba(255,255,255,.72); border-radius: 42px; background: #fffaf0; box-shadow: 0 20px 50px rgba(119,67,19,.17); }
.vocabulary-tiger { position: absolute; left: -32px; bottom: -65px; width: clamp(210px, 26vw, 390px); max-height: 55%; object-fit: contain; pointer-events: none; }
.vocabulary-listen { position: relative; z-index: 2; width: clamp(100px, 12vw, 150px); height: clamp(100px, 12vw, 150px); display: grid; place-items: center; border: 0; border-radius: 50%; background: linear-gradient(145deg, #ff7a3d, #ff5045); color: white; cursor: pointer; box-shadow: 0 15px 32px rgba(223,75,48,.3); }
.vocabulary-listen span { font-size: clamp(42px, 5vw, 65px); }
.vocabulary-options { position: relative; z-index: 2; width: min(82%, 840px); display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2.5vw, 28px); }
.vocabulary-options button { aspect-ratio: 1; min-width: 0; display: grid; place-items: center; overflow: hidden; border: 4px solid #eee1c8; border-radius: clamp(25px, 3vw, 38px); background: white; cursor: pointer; box-shadow: 0 12px 28px rgba(91,62,25,.1); transition: transform .16s ease, border-color .16s ease; }
.vocabulary-options button:focus-visible { outline: 5px solid rgba(20,91,243,.22); }
.vocabulary-options button img { width: 100%; height: 100%; object-fit: cover; }
.vocabulary-options button span { font-size: clamp(70px, 10vw, 125px); }
.vocabulary-options button.correct { border-color: #25b873; transform: scale(1.04); background: #eafff4; }
.vocabulary-options button.wrong { border-color: #ff5c4d; animation: game-shake .35s ease; }
.vocabulary-complete { width: min(88vw, 480px); padding: 26px; border: 0; border-radius: 34px; background: #fffaf0; text-align: center; }
.vocabulary-complete::backdrop { background: rgba(62,36,18,.64); backdrop-filter: blur(6px); }
.vocabulary-complete img { width: 210px; height: 190px; object-fit: contain; }
.vocabulary-complete div { color: #ffb41f; font-size: 35px; letter-spacing: .25em; }
.vocabulary-complete a { width: 70px; height: 70px; display: grid; place-items: center; margin: 20px auto 0; border-radius: 24px; background: var(--green); color: white; font-size: 34px; font-weight: 900; }
@keyframes audio-pulse { to { transform: scale(1.08); box-shadow: 0 0 0 12px rgba(255,197,55,.22); } }

@media (max-width: 900px) {
  .weeks-page { padding: 0; }
  .weeks-hero { min-height: 100vh; border-radius: 0; }
  .mascot-stage { min-height: 31vh; }
  .weeks-content { padding: 24px; }
  .latest-week { min-height: 240px; }
  .detail-page { padding: 0 0 28px; }
  .learning-grid--activities-only { padding: 0 16px; }
  .vocabulary-editor-row { grid-template-columns: 1fr 1fr; }
  .resource-editor-row .field--instruction, .resource-editor-row .field--file { grid-column: auto; }
}

@media (max-width: 650px) {
  .parent-info-button span { display: none; }
  .parent-info-button { min-width: 54px; padding: 0; }
  .vocabulary-options { width: 100%; gap: 9px; }
  .vocabulary-tiger { opacity: .18; }
}