:root {
  color-scheme: light;
  --ink: #21354a;
  --muted: #75879a;
  --blue: #63c3ef;
  --blue-deep: #1688c4;
  --sky: #dff5ff;
  --grass: #72c956;
  --leaf: #41a948;
  --sun: #ffcf46;
  --coral: #f47e63;
  --paper: #fffdf7;
  --line: #e8edf0;
  --shadow: 0 16px 44px rgba(39, 78, 104, .1);
  --round: 24px;
  font-family: "Avenir Next", "Trebuchet MS", "PingFang SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; color: var(--ink); background: #f3f7f5; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(22, 136, 196, .25); outline-offset: 2px; }
.student-wish-wall { margin-top:16px; }
.wish-row { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; padding:12px 0; border-bottom:1px solid var(--line); }
.wish-row strong, .wish-row small { display:block; }
.wish-row small { margin-top:4px; color:var(--muted); font-size:11px; }
.wish-edit-form { display:flex; flex-wrap:wrap; gap:7px; }
.wish-edit-form input { min-width:170px; padding:8px; border:1px solid var(--line); border-radius:10px; }
.wish-create-form { display:grid; gap:9px; margin-top:16px; }
.wish-create-form label { font-weight:800; font-size:12px; }
.wish-create-form textarea { width:100%; padding:12px; border:1px solid var(--line); border-radius:12px; resize:vertical; }
.wish-create-form button { justify-self:start; }
.wish-settings-form { display:grid; gap:15px; margin-top:18px; }
.wish-settings-form label { display:flex; align-items:center; gap:10px; font-size:13px; font-weight:750; }
.wish-settings-form button { justify-self:start; }
a { color: inherit; }
.boot-screen { min-height: 100vh; display: grid; place-content: center; justify-items: center; color: var(--muted); }
.boot-mascot { font-size: 60px; animation: bob 1.8s ease-in-out infinite; }

.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr); background: #e6f7ff; }
.auth-scene { position: relative; overflow: hidden; min-height: 540px; padding: clamp(34px, 6vw, 86px); display: flex; flex-direction: column; justify-content: space-between; background: linear-gradient(180deg, #73d0f6 0%, #d6f5ff 73%, #f3f9df 100%); }
.auth-scene::before, .auth-scene::after { content: ""; position: absolute; left: -10%; right: -10%; height: 31%; bottom: -5%; border-radius: 50% 50% 0 0; background: #88d873; transform: rotate(-3deg); }
.auth-scene::after { bottom: -13%; left: 35%; background: #61c64d; transform: rotate(5deg); }
.auth-brand, .auth-pitch { position: relative; z-index: 1; }
.auth-brand { display: flex; gap: 14px; align-items: center; font-size: 20px; font-weight: 900; letter-spacing: -.04em; }
.brand-mascot { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 18px 18px 18px 7px; background: #fff; font-size: 29px; box-shadow: 0 8px 20px rgba(30,93,119,.12); }
.auth-pitch { max-width: 610px; padding-bottom: 54px; }
.auth-pitch h1 { margin: 0 0 15px; font-size: clamp(36px, 5vw, 64px); line-height: 1.08; letter-spacing: -.055em; }
.auth-pitch p { max-width: 470px; color: #315368; font-size: 17px; line-height: 1.8; }
.auth-doodle { position: absolute; z-index: 1; right: 11%; top: 26%; width: 160px; height: 160px; display: grid; place-items: center; border: 6px solid rgba(255,255,255,.8); border-radius: 50%; background: var(--sun); box-shadow: 0 12px 0 #f1a92d, 0 25px 35px rgba(39,78,104,.16); font-size: 72px; animation: bob 3s ease-in-out infinite; }
.auth-card-wrap { display: grid; place-items: center; padding: 28px; background: #fffdf7; }
.auth-card { width: min(100%, 420px); padding: 38px; border-radius: 28px; background: white; box-shadow: var(--shadow); }
.auth-card h2 { margin: 0 0 7px; font-size: 26px; letter-spacing: -.04em; }
.auth-card > p { margin: 0 0 25px; color: var(--muted); line-height: 1.65; }
.auth-footer { margin-top: 20px; font-size: 12px; color: #8b99a4; line-height: 1.7; }
.auth-mode-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin: -8px 0 20px; padding: 5px; border-radius: 14px; background: #f0f6f7; }
.auth-mode-tab { min-height: 38px; border: 0; border-radius: 10px; color: #71838e; background: transparent; font-size: 12px; font-weight: 850; }
.auth-mode-tab.active { color: #147db1; background: white; box-shadow: 0 2px 8px rgba(38,83,103,.1); }
.student-credentials { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 0 0 16px; padding: 20px 22px; border: 1px solid #ccebd0; border-radius: 20px; background: linear-gradient(120deg, #effbe9, #f7fff2); box-shadow: 0 8px 22px rgba(56,119,65,.06); }
.student-credentials h2 { margin: 0 0 4px; font-size: 17px; }
.student-credentials p { margin: 0; color: #6b806d; font-size: 11px; line-height: 1.6; }
.credential-values { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 12px; }
.credential-values span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 11px; border: 1px solid #dcefe0; border-radius: 11px; color: #65816a; background: white; font-size: 10px; font-weight: 750; }
.credential-values strong { color: #294b30; font-size: 14px; letter-spacing: .06em; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 236px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; z-index: 10; display: flex; flex-direction: column; padding: 22px 15px 18px; background: #fffdf7; border-right: 1px solid #ecf0ed; }
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 25px; font-weight: 900; letter-spacing: -.045em; font-size: 17px; }
.brand .brand-mascot { width: 42px; height: 42px; border-radius: 14px 14px 14px 5px; background: #e8f8ff; font-size: 24px; box-shadow: none; }
.brand small { display: block; margin-top: 2px; color: #7d8d99; font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.nav-label { padding: 10px 12px 8px; color: #9ba7ad; font-size: 10px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.side-nav { display: grid; gap: 5px; }
.nav-button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 46px; padding: 0 12px; border: 0; border-radius: 14px; background: transparent; color: #637689; font-weight: 750; text-align: left; transition: background .18s ease, color .18s ease, transform .18s ease; }
.nav-button:hover { background: #eef9ff; color: var(--blue-deep); transform: translateX(2px); }
.nav-button.active { color: #147db1; background: #e6f6ff; box-shadow: inset 3px 0 #40b1e7; }
.nav-icon { width: 26px; text-align: center; font-size: 19px; }
.sidebar-spacer { flex: 1; }
.side-note { margin: 12px 4px 16px; padding: 15px; border-radius: 18px; color: #456a4c; background: #eff9e9; font-size: 12px; line-height: 1.55; }
.side-note strong { display: block; margin-bottom: 3px; color: #326638; font-size: 13px; }
.account-button { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid #edf0ed; border-radius: 16px; background: white; text-align: left; }
.account-button:hover { border-color: #b9e3f6; }
.account-avatar { width: 37px; height: 37px; display: grid; place-items: center; border-radius: 13px; background: #fff4d7; font-size: 21px; }
.account-copy { min-width: 0; flex: 1; }
.account-copy strong, .account-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-copy strong { font-size: 12px; }
.account-copy small { margin-top: 3px; color: var(--muted); font-size: 10px; }

.main-area { min-width: 0; padding: 20px clamp(18px, 3.4vw, 52px) 54px; }
.topbar { min-height: 55px; display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 22px; }
.crumb { color: #81909b; font-size: 12px; font-weight: 700; }
.top-actions { display: flex; align-items: center; gap: 10px; }
.profile-select { max-width: 210px; padding: 10px 37px 10px 13px; border: 1px solid #e6edee; border-radius: 14px; color: #3d5568; background: #fff; font-size: 12px; font-weight: 800; }
.star-pill { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 99px; background: #fff5d6; color: #8b6611; font-size: 13px; font-weight: 900; }
.logout-button { border: 0; background: transparent; color: #7b8a96; font-size: 12px; font-weight: 800; }
.page-title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin: 4px 0 20px; }
.page-title-row h1 { margin: 0; font-size: clamp(24px, 3vw, 34px); line-height: 1.16; letter-spacing: -.055em; }
.page-title-row p { margin: 7px 0 0; color: var(--muted); font-size: 13px; }
.eyebrow { margin-bottom: 8px; color: #3c9cc6; font-size: 10px; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }

.hero-map { position: relative; min-height: 315px; overflow: hidden; display: grid; grid-template-columns: 1fr minmax(300px, .9fr); align-items: center; gap: 16px; padding: 30px clamp(24px, 4vw, 52px); border-radius: 30px; background: linear-gradient(160deg, #75cff3 0%, #bcefff 62%, #ddf6fa 100%); box-shadow: var(--shadow); }
.hero-map::before, .hero-map::after { content: ""; position: absolute; bottom: -31%; width: 72%; height: 64%; border-radius: 50% 50% 0 0; background: #92dc78; }
.hero-map::before { left: -12%; transform: rotate(4deg); }
.hero-map::after { right: -13%; bottom: -38%; width: 77%; height: 72%; background: #68c857; transform: rotate(-5deg); }
.hero-cloud { position: absolute; width: 92px; height: 25px; border-radius: 30px; background: rgba(255,255,255,.68); }
.hero-cloud::before, .hero-cloud::after { content: ""; position: absolute; bottom: 9px; width: 37px; height: 37px; border-radius: 50%; background: inherit; }
.hero-cloud::before { left: 14px; }
.hero-cloud::after { left: 40px; width: 28px; height: 28px; }
.cloud-one { top: 34px; right: 32%; }
.cloud-two { top: 90px; right: 8%; transform: scale(.7); }
.hero-copy, .map-art { position: relative; z-index: 2; }
.hero-copy { align-self: start; max-width: 475px; }
.hero-copy .eyebrow { color: #226d89; }
.hero-copy h2 { max-width: 455px; margin: 0; color: #173d56; font-size: clamp(27px, 3.8vw, 43px); line-height: 1.14; letter-spacing: -.055em; }
.hero-copy p { max-width: 405px; margin: 11px 0 19px; color: #315e72; font-size: 13px; line-height: 1.65; }
.map-art { min-height: 248px; align-self: stretch; display: flex; align-items: center; justify-content: center; }
.map-route { position: absolute; inset: 5% 0 0; width: 100%; height: 100%; overflow: visible; }
.route-path { fill: none; stroke: rgba(255,255,255,.82); stroke-width: 6; stroke-dasharray: 1 15; stroke-linecap: round; }
.map-node { position: absolute; width: 82px; height: 82px; display: grid; place-items: center; border: 0; border-radius: 50%; color: white; font-size: 30px; box-shadow: 0 8px 0 rgba(29,88,123,.16), 0 15px 28px rgba(36,99,128,.18); transition: transform .2s ease; }
.map-node:hover { transform: translateY(-5px) scale(1.04); }
.map-node.learn { left: 12%; top: 16%; background: #5ecb35; }
.map-node.quiz { left: 47%; top: 49%; background: #a66ade; }
.map-node.treasure { right: 2%; top: 9%; background: #ffc43f; }
.node-label { position: absolute; bottom: -24px; padding: 4px 12px; border-radius: 20px; background: rgba(37,99,128,.32); font-size: 11px; font-weight: 900; white-space: nowrap; }
.map-bird { position: absolute; right: 8%; bottom: 13%; font-size: 46px; filter: drop-shadow(0 5px 3px rgba(48,90,81,.15)); transform: rotate(8deg); }
.hero-button { position: relative; z-index: 3; padding: 11px 16px; border: 0; border-radius: 14px; color: white; background: #1688c4; box-shadow: 0 4px 0 #0e719f; font-size: 12px; font-weight: 900; transition: transform .16s ease, box-shadow .16s ease; }
.hero-button:hover { transform: translateY(2px); box-shadow: 0 2px 0 #0e719f; }

.stat-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; margin: 18px 0 28px; }
.stat-card { min-height: 94px; display: flex; align-items: center; gap: 13px; padding: 16px; border: 1px solid #edf1ee; border-radius: 19px; background: white; box-shadow: 0 7px 22px rgba(47,79,89,.045); }
.stat-icon { width: 43px; height: 43px; flex: none; display: grid; place-items: center; border-radius: 14px; background: #fff2cf; font-size: 22px; }
.stat-card:nth-child(2) .stat-icon { background: #e5f7e3; }
.stat-card:nth-child(3) .stat-icon { background: #e5f4ff; }
.stat-card:nth-child(4) .stat-icon { background: #f4eaff; }
.stat-copy strong { display: block; font-size: 22px; line-height: 1; letter-spacing: -.05em; }
.stat-copy span { display: block; margin-top: 7px; color: var(--muted); font-size: 11px; }

.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 15px; margin: 26px 0 13px; }
.section-heading h2 { margin: 0; font-size: 20px; letter-spacing: -.04em; }
.section-heading p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.text-button { padding: 0; border: 0; color: #1688c4; background: transparent; font-size: 12px; font-weight: 900; }
.theme-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.theme-card { position: relative; min-height: 142px; overflow: hidden; padding: 17px; border: 1px solid #e9eeea; border-radius: 21px; background: white; text-align: left; box-shadow: 0 6px 19px rgba(38,74,85,.04); transition: transform .2s ease, box-shadow .2s ease; }
.theme-card:hover { transform: translateY(-4px); box-shadow: 0 15px 30px rgba(38,74,85,.1); }
.theme-card::after { content: ""; position: absolute; width: 100px; height: 100px; right: -30px; bottom: -45px; border-radius: 50%; background: var(--wash, #eaf7e7); }
.theme-card-top { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 8px; }
.theme-icon { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 15px; background: var(--wash, #eef8ed); font-size: 23px; }
.theme-count { color: #8a98a0; font-size: 10px; font-weight: 800; }
.theme-card h3 { position: relative; z-index: 1; max-width: 90%; margin: 12px 0 9px; font-size: 14px; letter-spacing: -.02em; }
.theme-progress { position: relative; z-index: 1; height: 6px; overflow: hidden; border-radius: 9px; background: #edf1ed; }
.theme-progress span { display: block; height: 100%; border-radius: inherit; background: var(--fill, #72c956); }
.theme-progress-copy { position: relative; z-index: 1; display: flex; justify-content: space-between; margin-top: 7px; color: #87959c; font-size: 10px; }

.content-card { padding: clamp(18px, 2.4vw, 27px); border: 1px solid #e9efec; border-radius: var(--round); background: white; box-shadow: 0 8px 28px rgba(45,80,90,.05); }
.split-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(270px, .85fr); gap: 18px; }
.profile-hero { display: flex; align-items: center; gap: 18px; padding: 22px; border-radius: 22px; background: linear-gradient(130deg, #e4f7ff, #f4fbe7); }
.profile-big-avatar { width: 82px; height: 82px; flex: none; display: grid; place-items: center; border-radius: 28px; background: white; box-shadow: 0 8px 18px rgba(59,114,113,.1); font-size: 43px; }
.profile-hero h2 { margin: 0 0 7px; font-size: 22px; }
.profile-hero p { margin: 0; color: #69808e; font-size: 12px; line-height: 1.6; }
.student-pin-panel { margin-top:-6px; border:1px solid #e5ecea; border-radius:12px; background:#fff; }
.student-pin-panel summary { display:flex; align-items:center; justify-content:space-between; min-height:44px; padding:8px 14px; color:#456278; font-size:12px; font-weight:850; cursor:pointer; list-style:none; }
.student-pin-panel summary::-webkit-details-marker { display:none; }
.student-pin-panel summary:focus-visible { outline:3px solid rgba(22,136,196,.25); outline-offset:2px; }
.student-pin-chevron { font-size:18px; line-height:1; transition:transform .16s ease; }
.student-pin-panel[open] .student-pin-chevron { transform:rotate(180deg); }
.student-pin-body { padding:0 14px 14px; border-top:1px solid #edf1ef; }
.student-pin-body p { margin:11px 0; color:var(--muted); font-size:11px; }
.student-pin-body .field { margin-bottom:0; }
.mini-list { display: grid; gap: 9px; margin-top: 14px; }
.word-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid #edf0ee; border-radius: 14px; background: #fff; }
.word-row strong { display: block; font-size: 14px; }
.word-row small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.word-actions { display: flex; align-items: center; gap: 7px; }
.stage-pill { padding: 5px 8px; border-radius: 99px; background: #eff7e9; color: #578349; font-size: 10px; font-weight: 900; white-space: nowrap; }
.empty-state { padding: 26px 16px; border: 1px dashed #dce8e5; border-radius: 17px; color: #8a999f; background: #fbfdfb; text-align: center; font-size: 12px; line-height: 1.7; }

.button { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 15px; border: 1px solid transparent; border-radius: 13px; color: white; background: #1688c4; font-size: 12px; font-weight: 900; transition: transform .16s ease, background .16s ease; }
.button:hover { transform: translateY(-1px); background: #0f79b1; }
.button:disabled { cursor: not-allowed; opacity: .45; transform: none; }
.button.secondary { color: #496578; background: #f1f6f7; border-color: #e6edef; }
.button.secondary:hover { background: #e7f3f8; }
.button.sun { color: #624a0b; background: #ffd258; }
.button.sun:hover { background: #ffc637; }
.button.danger { color: #ae4c3a; background: #fff0eb; border-color: #f9ddd5; }
.button.small { min-height: 32px; padding: 6px 10px; font-size: 10px; border-radius: 10px; }
.button-row { display: flex; flex-wrap: wrap; gap: 9px; }

.game-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.game-card { position: relative; min-height: 212px; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; padding: 19px; border: 1px solid #e8efec; border-radius: 23px; background: white; text-align: left; box-shadow: 0 8px 22px rgba(41,74,84,.045); transition: transform .18s ease, box-shadow .18s ease; }
.game-card:hover { transform: translateY(-4px) rotate(-.3deg); box-shadow: 0 18px 33px rgba(41,74,84,.12); }
.game-card::after { content: ""; position: absolute; width: 128px; height: 128px; right: -29px; bottom: -48px; border-radius: 50%; background: var(--wash); }
.game-emoji { position: relative; z-index: 1; width: 55px; height: 55px; display: grid; place-items: center; border-radius: 19px; background: var(--wash); font-size: 29px; }
.game-card h3 { position: relative; z-index: 1; margin: 14px 0 6px; font-size: 15px; }
.game-card p { position: relative; z-index: 1; max-width: 250px; margin: 0; color: #7a8992; font-size: 11px; line-height: 1.65; }
.game-tag { position: relative; z-index: 1; margin-top: auto; padding-top: 14px; color: #3d93b7; font-size: 10px; font-weight: 900; letter-spacing: .04em; }
.game-panel { max-width: 790px; margin: 0 auto; }
.question-card { position: relative; overflow: hidden; min-height: 390px; padding: clamp(22px, 4vw, 42px); border-radius: 29px; background: white; box-shadow: var(--shadow); text-align: center; }
.question-progress { height: 7px; overflow: hidden; margin-bottom: 28px; border-radius: 10px; background: #edf1ed; }
.question-progress span { display: block; height: 100%; background: #72c956; transition: width .25s ease; }
.question-hint { color: #7a919e; font-size: 12px; font-weight: 800; }
.question-word { margin: 14px 0 7px; color: #203d53; font-size: clamp(34px, 7vw, 62px); font-weight: 900; letter-spacing: -.06em; }
.topic-word-line { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 14px 0 7px; }
.topic-word-line .question-word { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.topic-sound-button { flex: none; width: 40px; height: 40px; margin: 0; font-size: 18px; }
.question-cn { color: #6d8291; font-size: 15px; }
.sound-button { width: 48px; height: 48px; margin: 12px 0; border: 0; border-radius: 50%; background: #e4f7ff; color: #1688c4; font-size: 21px; }
.learn-sound-button { display: block; margin: 12px auto; }
.answer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 22px auto 0; max-width: 540px; }
.answer-option { min-height: 54px; padding: 10px 13px; border: 1px solid #e5eceb; border-radius: 14px; color: #365368; background: #fbfdfb; font-size: 13px; font-weight: 850; transition: .15s ease; }
.answer-option:hover { border-color: #79cbea; background: #effaff; }
.answer-option.correct { border-color: #82ca6c; color: #397d38; background: #edfae8; }
.answer-option.wrong { border-color: #eead96; color: #a84c35; background: #fff1ed; }
.answer-input { width: min(100%, 420px); min-height: 52px; margin: 18px auto 0; padding: 12px 16px; border: 2px solid #dcebf0; border-radius: 15px; color: #203d53; background: #fbfeff; font-size: 20px; text-align: center; }
.letter-bank { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 22px auto 14px; }
.letter-chip { width: 42px; height: 45px; border: 0; border-radius: 12px; color: #246182; background: #e6f7ff; box-shadow: 0 3px 0 #bbdfec; font-size: 18px; font-weight: 900; }
.letter-chip.used { opacity: .3; box-shadow: none; }
.letter-answer { min-height: 45px; display: flex; justify-content: center; align-items: center; gap: 5px; color: #43677c; font-size: 24px; font-weight: 900; letter-spacing: .08em; }
.match-board { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; max-width: 570px; margin: 25px auto 0; }
.match-card-slot { position: relative; min-width: 0; }
.match-card { min-height: 58px; padding: 9px; border: 1px solid #e5eceb; border-radius: 13px; color: #365368; background: #fbfdfb; font-size: 12px; font-weight: 850; }
.match-card-slot .match-card { width: 100%; }
.match-card-slot.has-sound .match-card { padding-inline: 38px; }
.match-sound-button { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: #e4f7ff; color: #1688c4; font-size: 15px; cursor: pointer; }
.match-sound-button:focus-visible { outline: 2px solid #1688c4; outline-offset: 2px; }
.match-card.selected { border-color: #55b9e3; background: #e8f8ff; }
.match-card.matched { border-color: #9bd78b; color: #56874a; background: #eff9ec; opacity: .68; }
.feedback { min-height: 27px; margin: 12px 0; color: #518c4b; font-size: 13px; font-weight: 900; }

.story-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .75fr); gap: 17px; align-items: start; }
.story-word-list { max-height: 460px; overflow: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 14px 0; padding-right: 3px; }
.story-word-option { display: flex; align-items: flex-start; gap: 8px; padding: 11px; border: 1px solid #e8efec; border-radius: 13px; background: #fff; }
.story-word-option input { margin: 3px 0 0; accent-color: #198bbd; }
.story-word-option strong { display: block; font-size: 12px; }
.story-word-option small { display: block; margin-top: 3px; color: #82919a; font-size: 10px; }
.story-paper { padding: 23px; border: 1px solid #f1e3b4; border-radius: 20px; background: #fff9e8; box-shadow: 0 8px 19px rgba(122,96,30,.06); }
.story-paper h3 { margin: 0 0 13px; font-size: 19px; }
.story-chinese-title { margin:-6px 0 13px; color:#7b8587; font-size:12px; font-weight:700; }
.story-body { white-space: pre-wrap; color: #4f5960; font-family: "Avenir Next", "PingFang SC", sans-serif; font-size: 14px; line-height: 1.9; }
.story-typewriter-tools { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 0 9px; color:#5894a6; font-size:11px; font-weight:900; }
.story-skip-button { flex:none; padding:6px 10px; border:1px solid #dcecf0; border-radius:999px; color:#4f7180; background:#fff; font-size:10px; font-weight:850; }
.story-writing-progress { height:5px; overflow:hidden; margin:0 0 13px; border-radius:999px; background:#f0e9ce; }
.story-writing-progress span { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#63c8de,#79ce74,#ffc95b); transition:width .12s linear; }
.story-paper-is-typing .story-body::after { display:inline-block; width:7px; height:1em; margin-left:3px; border-radius:3px; background:#f1b843; content:""; vertical-align:-.12em; animation:story-caret-blink .8s steps(2,end) infinite; }
.story-target-word { position:relative; display:inline; padding:1px 5px 2px; border:0; border-radius:8px; box-decoration-break:clone; -webkit-box-decoration-break:clone; color:#285979; font-weight:950; background:#dff5ff; text-decoration:underline dotted #74c5df 1.5px; text-underline-offset:3px; }
.story-target-word::after { position:absolute; top:-.62em; right:-.18em; color:#f3b842; content:"✦"; font-size:9px; line-height:1; transform:rotate(12deg); }
.story-target-1 { color:#79539a; background:#f1e7ff; text-decoration-color:#bc95e2; }
.story-target-2 { color:#a55c37; background:#fff0d8; text-decoration-color:#e9ad5b; }
.story-target-3 { color:#477b42; background:#e9f7df; text-decoration-color:#91ca75; }
.story-target-meaning { padding:0 3px; border-radius:5px; text-decoration:none; }
.story-paper-is-typing .story-target-word { animation:story-target-pop .32s cubic-bezier(.2,1.5,.45,1) both; }
@keyframes story-caret-blink { 50% { opacity:0; } }
@keyframes story-target-pop { from { opacity:.45; transform:scale(.86); } to { opacity:1; transform:scale(1); } }
.story-meta { margin-top: 17px; color: #92927f; font-size: 10px; }
.story-history { margin-top:2px; }
.story-list { display: grid; gap: 9px; margin-top: 14px; max-height:440px; overflow:auto; }
.story-row { padding: 13px 15px; border: 1px solid #e9eeea; border-radius: 15px; background: white; text-align: left; transition:border-color .15s ease,background .15s ease,transform .15s ease; }
.story-row:hover { border-color:#9bd6e8; transform:translateY(-1px); }
.story-row.selected { border-color:#7ccce5; background:#f1fbff; box-shadow:inset 3px 0 #36abd0; }
.story-row strong { display: block; font-size: 14px; }
.story-row-original-title { display:block; margin-top:4px; color:#7e8d91; font-size:11px; }
.story-row small { display: block; margin-top: 5px; color: #87949c; font-size: 10px; }

.manage-tabs { display: flex; gap: 7px; overflow-x: auto; margin: 3px 0 17px; padding-bottom: 5px; }
.manage-tab { flex: none; padding: 9px 13px; border: 1px solid #e7ece9; border-radius: 12px; color: #647985; background: white; font-size: 11px; font-weight: 900; }
.manage-tab.active { border-color: #a6d9ee; color: #167fab; background: #e9f8ff; }
.manage-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 11px; margin-bottom: 16px; }
.manage-stat { padding: 16px; border: 1px solid #e8efec; border-radius: 16px; background: white; }
.manage-stat strong { display: block; font-size: 24px; letter-spacing: -.05em; }
.manage-stat span { display: block; margin-top: 5px; color: #83919a; font-size: 10px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 11px; }
.field { display: grid; gap: 6px; margin-bottom: 11px; }
.field label { color: #637788; font-size: 11px; font-weight: 900; }
.field input, .field select, .field textarea { width: 100%; min-height: 41px; padding: 10px 12px; border: 1px solid #e3eae8; border-radius: 11px; color: #2b465b; background: #fcfefd; font-size: 12px; }
.field textarea { min-height: 82px; resize: vertical; }
.field-help { color: #8a989e; font-size: 10px; line-height: 1.5; }
.form-section-title { margin: 0 0 14px; font-size: 15px; letter-spacing: -.03em; }
.vocabulary-editor-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.vocabulary-editor-heading .form-section-title { margin-bottom: 4px; }
.vocabulary-editor-heading p { margin: 0; }
.vocabulary-editor-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 9px 16px; margin: 0 0 14px; padding: 10px 12px; border: 1px solid #e8efec; border-radius: 12px; color: #637788; background: #f8fbf9; font-size: 10px; }
.vocabulary-editor-meta div { display: grid; gap: 3px; }
.vocabulary-editor-meta strong { color: #29485e; font-size: 11px; }
.vocabulary-editor-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px; }
.admin-columns { display: grid; grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr); gap: 16px; align-items: start; }
.ai-config-card { min-width: 0; }
.ai-provider-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 14px 0; }
.ai-provider-card { min-width: 0; padding: 15px; border: 1px solid #e8efec; border-radius: 16px; background: #fbfdfb; }
.ai-provider-card h3 { margin: 0 0 13px; color: #2b465b; font-size: 13px; }
.ai-clear-key { display: flex; align-items: center; gap: 7px; margin: 2px 0 8px; }
.ai-clear-key input { width: auto; min-height: auto; margin: 0; }
.ai-test-row { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin: 7px 0 9px; }
.ai-test-row .small-copy { flex: 1; min-width: 150px; }
.ai-data-note { margin: 12px 0; padding: 11px 13px; border-radius: 12px; color: #71818a; background: #f3f7f6; font-size: 10px; line-height: 1.7; }
.tts-settings-section { margin-top: 18px; padding-top: 18px; border-top: 1px solid #e8efec; }
.tts-settings-section h3 { margin: 0 0 5px; color: #2b465b; font-size: 14px; }
.tts-settings-section .section-heading p { margin: 0; color: #71818a; font-size: 11px; }
.student-voice-admin { margin-top: 20px; padding-top: 18px; border-top: 1px solid #e8efec; }
.student-voice-admin h3 { margin: 0 0 5px; color: #2b465b; font-size: 14px; }
.student-voice-admin .section-heading p { margin: 0; color: #71818a; font-size: 11px; }
.student-voice-admin-fields { max-width: 560px; margin: 12px 0; }
.student-voice-panel { margin-top: 16px; }
.student-voice-panel audio { display: block; width: min(100%, 420px); margin: 12px 0; }
.student-voice-submit { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.voice-sample-prompt { max-width: 760px; margin: 10px 0; padding: 12px 15px; border-left: 3px solid #70c771; border-radius: 8px; background: #f4f9f2; color: #415e70; font-size: 13px; line-height: 1.7; }
.tts-config-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; margin-top: 14px; }
.tts-native-summary { display: grid; align-content: center; gap: 5px; min-height: 64px; margin: 0 0 14px; padding: 10px 13px; border: 1px solid #e6efec; border-radius: 12px; color: #71818a; background: #f7faf9; font-size: 11px; }
.tts-native-summary strong { color: #2b465b; font-size: 12px; }
.tts-native-summary code { color: #1688bd; font-size: 11px; }
.tts-voice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 12px 0; }
.tts-voice-option { min-width: 0; padding: 13px; border: 1px solid #e5ece9; border-radius: 14px; background: #fbfdfc; transition: border-color .16s ease, background .16s ease, box-shadow .16s ease; }
.tts-voice-option.selected { border-color: #69bee8; background: #f1f9fc; box-shadow: inset 0 0 0 1px #69bee8; }
.tts-voice-choice { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; }
.tts-voice-choice input { width: auto; min-height: auto; margin: 3px 0 0; accent-color: #168dc2; }
.tts-voice-choice span { display: grid; gap: 3px; }
.tts-voice-choice strong { color: #2b465b; font-size: 12px; }
.tts-voice-choice small { color: #71818a; font-size: 10px; }
.tts-voice-option .field { margin: 10px 0 7px; }
.tts-voice-option .ai-test-row { align-items: flex-start; }
.tts-voice-option .ai-test-row .small-copy { min-width: 110px; font-size: 10px; }
.tts-voice-option audio { display: block; width: min(100%, 240px); height: 34px; margin-top: 7px; }
.vocab-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 13px; }
.table-wrap { overflow-x: auto; border: 1px solid #e9efec; border-radius: 16px; background: white; }
table { width: 100%; border-collapse: collapse; font-size: 11px; }
th, td { padding: 10px 11px; border-bottom: 1px solid #eff2ef; text-align: left; vertical-align: middle; }
th { color: #81919a; background: #f9fbf9; font-size: 10px; letter-spacing: .03em; }
tr:last-child td { border-bottom: 0; }
.table-word { font-weight: 900; color: #29485e; }
.table-sub { display: block; margin-top: 3px; color: #83919a; font-size: 10px; }
.vocabulary-select { display: block; width: 100%; padding: 0; border: 0; color: inherit; text-align: left; background: transparent; cursor: pointer; }
.vocabulary-select:hover .table-word { color: #1688bd; }
.vocabulary-select:focus-visible { outline: 2px solid #8ccfeb; outline-offset: 3px; border-radius: 3px; }
.vocab-row-selected td { background: #f0f9fd; }
.vocab-row-selected td:first-child { box-shadow: inset 3px 0 #168fc4; }
.image-preview { width: 52px; height: 52px; object-fit: cover; border-radius: 11px; background: #f3f7f2; }
.status-dot { display: inline-flex; align-items: center; gap: 5px; color: #758a80; font-size: 10px; white-space: nowrap; }
.status-dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #bbc8c1; }
.status-dot.ready::before { background: #67c65b; }
.status-dot.pending::before { background: #f0ae3a; }
.notice { padding: 12px 14px; border: 1px solid #e7ece8; border-radius: 14px; color: #647781; background: #f7faf8; font-size: 11px; line-height: 1.65; }
.notice.warn { border-color: #f2dfac; color: #826a31; background: #fff9e8; }
.notice.good { border-color: #cde8c8; color: #4f7946; background: #f1faee; }
.pill { display: inline-flex; padding: 5px 8px; border-radius: 99px; background: #eff5f3; color: #70847f; font-size: 9px; font-weight: 900; white-space: nowrap; }
.demo-banner { display: flex; align-items: center; gap: 8px; margin: 12px 0; padding: 9px 12px; border-radius: 12px; color: #6d6849; background: #fff8df; font-size: 10px; }
.toast { position: fixed; z-index: 100; left: 50%; bottom: 22px; max-width: min(560px, calc(100vw - 28px)); transform: translate(-50%, 20px); padding: 12px 17px; border-radius: 13px; color: white; background: #28475d; box-shadow: 0 10px 25px rgba(31,55,67,.2); opacity: 0; pointer-events: none; font-size: 12px; font-weight: 750; transition: .2s ease; }
.toast.show { transform: translate(-50%, 0); opacity: 1; }
.muted { color: var(--muted); }
.small-copy { color: #89979e; font-size: 10px; line-height: 1.6; }
.align-right { text-align: right; }
.stack { display: grid; gap: 14px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@keyframes bob { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-8px) rotate(2deg); } }
@keyframes reveal { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.page-enter { animation: reveal .35s ease both; }

@media (max-width: 1120px) {
  .theme-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .game-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .manage-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .hero-map { grid-template-columns: 1fr minmax(250px, .75fr); }
}
@media (max-width: 820px) {
  .app-shell { display: block; padding-bottom: 74px; }
  .sidebar { position: fixed; top: auto; bottom: 0; width: 100%; height: 68px; flex-direction: row; justify-content: space-around; padding: 5px 7px; border-top: 1px solid #e8eeeb; border-right: 0; background: rgba(255,253,247,.96); backdrop-filter: blur(12px); }
  .brand, .nav-label, .sidebar-spacer, .side-note, .account-button { display: none; }
  .side-nav { width: 100%; display: flex; justify-content: space-around; gap: 0; }
  .nav-button { min-width: 58px; min-height: 56px; flex-direction: column; justify-content: center; gap: 1px; padding: 4px; border-radius: 13px; font-size: 9px; }
  .nav-button.active { box-shadow: inset 0 3px #40b1e7; }
  .nav-icon { font-size: 19px; }
  .main-area { padding: 15px 16px 30px; }
  .hero-map { min-height: 330px; grid-template-columns: 1fr; padding: 25px; }
  .hero-copy { max-width: 75%; }
  .hero-copy h2 { font-size: 32px; }
  .map-art { position: absolute; right: 0; bottom: 4px; width: 55%; height: 200px; min-height: 0; }
  .map-node { width: 63px; height: 63px; font-size: 24px; }
  .map-node.learn { left: 0; top: 36%; }
  .map-node.quiz { left: 40%; top: 56%; }
  .map-node.treasure { right: -2%; top: 17%; }
  .hero-button { margin-top: 1px; }
  .split-layout, .story-layout, .admin-columns { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .ai-provider-grid { grid-template-columns: 1fr; }
  .tts-config-grid, .tts-voice-grid { grid-template-columns: 1fr; }
  .auth-wrap { grid-template-columns: 1fr; }
  .auth-scene { min-height: 220px; padding: 22px; }
  .auth-scene::before, .auth-scene::after { height: 25%; }
  .auth-brand { font-size: 16px; }
  .auth-brand .brand-mascot { width: 42px; height: 42px; font-size: 23px; }
  .auth-pitch { max-width: 75%; padding: 17px 0 20px; }
  .auth-pitch h1 { font-size: 29px; }
  .auth-pitch p { margin: 7px 0 0; font-size: 11px; }
  .auth-doodle { top: 27%; right: 7%; width: 92px; height: 92px; border-width: 4px; font-size: 45px; }
  .auth-card-wrap { padding: 18px; }
  .auth-card { padding: 25px; }
  .student-credentials { align-items: flex-start; flex-direction: column; padding: 17px; }
  .topbar { margin-bottom: 16px; }
  .crumb { max-width: 35vw; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .profile-select { max-width: 132px; padding: 9px 29px 9px 9px; font-size: 10px; }
  .star-pill { padding: 9px 10px; font-size: 11px; }
  .logout-button { font-size: 10px; }
  .hero-map { min-height: 366px; padding: 22px 19px; }
  .hero-copy { max-width: 92%; }
  .hero-copy h2 { max-width: 300px; font-size: 29px; }
  .hero-copy p { max-width: 270px; font-size: 11px; }
  .map-art { right: -5px; width: 68%; height: 184px; opacity: .97; }
  .hero-cloud.cloud-one { right: 21%; }
  .stat-row { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; margin: 13px 0 23px; }
  .stat-card { min-height: 77px; gap: 9px; padding: 11px; border-radius: 15px; }
  .stat-icon { width: 36px; height: 36px; border-radius: 12px; font-size: 18px; }
  .stat-copy strong { font-size: 18px; }
  .stat-copy span { font-size: 9px; }
  .theme-grid, .game-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .theme-card { min-height: 128px; padding: 12px; border-radius: 17px; }
  .theme-icon { width: 36px; height: 36px; font-size: 20px; }
  .theme-card h3 { font-size: 12px; }
  .theme-count, .theme-progress-copy { font-size: 9px; }
  .game-card { min-height: 183px; padding: 14px; border-radius: 18px; }
  .game-emoji { width: 45px; height: 45px; border-radius: 15px; font-size: 24px; }
  .game-card h3 { font-size: 12px; }
  .game-card p { font-size: 10px; }
  .answer-grid { grid-template-columns: 1fr; }
  .question-card { min-height: 390px; padding: 19px 15px; }
  .question-word { font-size: 38px; }
  .story-word-list { grid-template-columns: 1fr; max-height: 360px; }
  .form-grid { grid-template-columns: 1fr; gap: 0; }
  .page-title-row { align-items: flex-start; flex-direction: column; }
  .manage-grid { gap: 8px; }
  .manage-stat { padding: 12px; }
  .manage-stat strong { font-size: 20px; }
  .content-card { padding: 16px; }
  .word-row { grid-template-columns: 1fr; }
  .word-actions { justify-content: flex-start; }
  .vocab-pagination { align-items: flex-start; flex-direction: column; }
}

/* Student adventure shell and theme artwork */
.student-app-shell { min-height:100vh; display:flex; flex-direction:column; overflow-x:hidden; background:#f3f7f5; color:#20354a; }
.student-app-shell.has-theme-scene { background-color:var(--page-scene-color,#a2e4e5); background-image:linear-gradient(180deg,rgba(218,245,249,.42) 0%,rgba(239,250,244,.27) 54%,rgba(255,250,228,.46) 100%),var(--page-scene-image); background-position:center top; background-repeat:no-repeat; background-size:cover; background-attachment:fixed; }
.student-app-shell.has-theme-scene .student-brand { text-shadow:0 2px 5px #25475988; }
.student-app-shell.is-adventure { height:100vh; min-height:560px; overflow:hidden; background:#83d8f5; }
.student-topbar { position:relative; z-index:5; width:100%; min-height:82px; padding:12px clamp(16px,3vw,42px); display:flex; align-items:center; justify-content:space-between; gap:14px; }
.is-adventure .student-topbar { position:absolute; inset:0 0 auto; }
.student-brand { display:inline-flex; align-items:center; gap:10px; color:#fff; text-decoration:none; font-size:clamp(18px,2vw,24px); font-weight:900; letter-spacing:-.04em; text-shadow:0 2px 3px #287ca055; }
.student-brand-mark { display:grid; place-items:center; width:46px; height:46px; border:3px solid #fff; border-radius:50%; background:#fff; font-size:27px; box-shadow:0 4px 0 #278cbb55; }
.student-logout-button { flex:0 0 auto; margin-left:4px; padding:8px 11px; border:1px solid #ffffff9c; border-radius:999px; color:#fff; background:#246e8a8c; box-shadow:0 3px 0 #17517455; font-size:11px; font-weight:850; letter-spacing:0; text-shadow:none; white-space:nowrap; cursor:pointer; transition:transform .16s ease,background .16s ease; }
.student-logout-button:hover { transform:translateY(-1px); background:#175e7c; }
.student-logout-compact { display:none; }
.student-wish-ticker { display:flex; flex:1 1 160px; align-items:center; gap:8px; min-width:0; padding:7px 0; border:0; color:#fff; background:transparent; text-align:left; cursor:pointer; }
.student-wish-icon { flex:0 0 auto; font-size:22px; line-height:1; }
.student-wish-window { display:block; flex:1; min-width:0; overflow:hidden; mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent); }
.student-wish-track { display:flex; width:max-content; animation:wish-ticker-scroll 30s linear infinite; }
.student-wish-copy { display:inline-flex; flex:0 0 auto; align-items:center; gap:20px; padding-right:20px; white-space:nowrap; font-size:14px; font-weight:800; text-shadow:0 1px 3px #31728b99; }
.student-wish-copy>span:not(:last-child)::after { content:" ·"; }
.student-wish-ticker:hover .student-wish-track,.student-wish-ticker:focus-visible .student-wish-track { animation-play-state:paused; }
@keyframes wish-ticker-scroll { to { transform:translateX(-50%); } }
@media(prefers-reduced-motion:reduce) { .student-wish-track { animation:none; } }
.student-top-actions { display:flex; align-items:center; gap:10px; }
.student-id-pill,.star-pill,.round-action,.language-switch { min-height:46px; display:inline-flex; align-items:center; justify-content:center; border:0; border-radius:999px; background:#fff; color:#26364b; box-shadow:0 4px 0 #2d739b4d; font-weight:850; }
.student-id-pill { gap:8px; padding:5px 14px 5px 7px; }
.student-id-pill>span { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:#e8f4ff; font-size:23px; }
.student-id-pill strong { max-width:135px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.star-pill { gap:6px; min-width:72px; padding:0 14px; font-size:16px; }
.round-action { width:48px; cursor:pointer; font-size:20px; transition:transform .16s ease,background .16s ease; }
.round-action:hover,.language-switch:hover { transform:translateY(-2px); background:#fff8e9; }
.language-switch { min-width:48px; padding:0 13px; cursor:pointer; font-size:13px; }
.settings-action { font-size:23px; }
.student-main { width:min(1120px,calc(100% - 36px)); flex:1; margin:0 auto; padding:24px 0 112px; }
.student-main>section.page-enter { width:100%; }
.is-adventure .student-main { position:absolute; inset:0; width:100%; max-width:none; margin:0; padding:0; }
.is-adventure .student-main>section.page-enter { height:100%; }
.student-tabbar { position:fixed; z-index:8; bottom:max(16px,env(safe-area-inset-bottom)); left:clamp(16px,2vw,30px); transform:none; width:min(300px,calc(100% - 28px)); min-height:68px; padding:6px; display:grid; grid-template-columns:repeat(3,1fr); gap:5px; border:1px solid #eee9db; border-radius:999px; background:#fffaf0; box-shadow:0 8px 22px #34445628; }
.student-tab { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; border:0; border-radius:999px; background:transparent; color:#606a7b; cursor:pointer; font-weight:850; }
.student-tab>span { font-size:18px; line-height:1; }
.student-tab>strong { font-size:12px; }
.student-tab.active { background:#287ac7; color:#fff; box-shadow:0 3px 0 #185b9d; }
.adventure-map-scene { --scene-color:#85d8f4; position:relative; width:100%; height:100%; min-height:560px; overflow:hidden; isolation:isolate; background-color:var(--scene-color); background-image:linear-gradient(180deg,color-mix(in srgb,var(--scene-color) 16%,transparent) 0%,transparent 48%,color-mix(in srgb,var(--scene-color) 14%,transparent) 100%),var(--scene-image); background-position:center; background-size:cover; }
.map-scene-overlay { position:absolute; z-index:-1; inset:0; background:linear-gradient(180deg,#178ec014 0%,transparent 46%,#f8f3c80a 100%); pointer-events:none; }
.map-theme-switcher { position:absolute; z-index:2; top:clamp(64px,10vh,88px); left:50%; transform:translateX(-50%); min-height:48px; max-width:calc(100% - 28px); display:flex; align-items:center; gap:9px; padding:6px 18px; border:1px solid #ffffff22; border-radius:999px; background:#226e89ad; color:#fff; box-shadow:0 5px 15px #174c5730; backdrop-filter:blur(5px); }
.map-theme-icon { font-size:23px; }
.map-theme-copy { display:flex; align-items:center; gap:7px; min-width:0; white-space:nowrap; }
.map-theme-select { width:auto; max-width:min(36vw,300px); min-width:90px; padding:3px 19px 3px 0; border:0; outline:none; appearance:none; background:transparent; color:#fff; font-size:clamp(14px,1.5vw,19px); font-weight:900; text-overflow:ellipsis; cursor:pointer; }
.map-theme-select option { color:#20354a; background:#fff; }
.map-theme-divider { opacity:.75; font-weight:900; }
.map-theme-area { max-width:34vw; overflow:hidden; color:#f4fbff; font-size:clamp(11px,1.1vw,14px); font-weight:750; text-overflow:ellipsis; }
.adventure-route-wrap { position:absolute; top:clamp(116px,18.5vh,154px); left:50%; width:min(72vw,760px); height:min(53vh,390px); min-height:320px; transform:translateX(-50%); }
.adventure-route-line { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.adventure-route-line path { fill:none; stroke:#fff; stroke-width:9; stroke-linecap:round; stroke-dasharray:1 19; opacity:.88; vector-effect:non-scaling-stroke; }
.map-stop { position:absolute; z-index:2; width:92px; height:92px; display:flex; flex-direction:column; align-items:center; justify-content:center; border:0; border-radius:50%; color:#fff; cursor:pointer; font-size:30px; font-weight:900; box-shadow:0 8px 0 #17435535,0 14px 22px #27577225; transition:transform .16s ease,filter .16s ease; }
.map-stop:hover:not(:disabled) { transform:translateY(-5px) scale(1.035); filter:brightness(1.04); }
.map-stop:disabled { cursor:not-allowed; filter:saturate(.85); }
.learn-stop { top:2%; left:34%; background:#58c900; box-shadow:0 8px 0 #289400; }
.quiz-stop { top:39%; right:31%; background:#a852e2; box-shadow:0 8px 0 #8032bc; }
.treasure-stop { bottom:0; left:34%; background:#ffc335; box-shadow:0 8px 0 #e49e12; }
.treasure-stop.is-locked { background:#ffc335; box-shadow:0 8px 0 #e49e12; }
.treasure-stop.is-locked::after { content:"🔒"; position:absolute; top:-3px; right:-3px; width:27px; height:27px; display:grid; place-items:center; border:2px solid #fff; border-radius:50%; background:#f5a827; font-size:13px; }
.treasure-stop.is-claimed::after { content:"✓"; position:absolute; top:-3px; right:-3px; width:27px; height:27px; display:grid; place-items:center; border:2px solid #fff; border-radius:50%; color:#fff; background:#5cae51; font-size:14px; }
.stop-stars { position:absolute; top:-20px; left:50%; width:max-content; transform:translateX(-50%); color:#ffca29; font-size:19px; letter-spacing:-3px; text-shadow:0 1px 2px #9b651d; }
.stop-label { position:absolute; bottom:-28px; left:50%; transform:translateX(-50%); padding:3px 12px; border-radius:999px; background:#286d7985; color:#fff; font-size:14px; line-height:1.25; white-space:nowrap; text-shadow:0 1px 1px #22504b; }
.map-demo-note { position:absolute; z-index:2; right:24px; bottom:22px; padding:7px 13px; border-radius:999px; color:#fff; background:#1b668455; text-align:center; text-shadow:0 1px 3px #244d5e88; font-size:11px; font-weight:750; }
.student-theme-customizer { margin-top:20px; }
.theme-customizer-controls { display:flex; align-items:end; justify-content:space-between; gap:16px; margin:18px 0 14px; }
.theme-customizer-select { display:grid; gap:6px; width:min(390px,100%); color:#526a7c; font-size:12px; font-weight:800; }
.theme-customizer-select select { min-height:43px; padding:9px 12px; border:1px solid #dfe9e8; border-radius:12px; background:#fff; color:#28445b; }
.background-choice-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(145px,1fr)); gap:12px; }
.background-choice { position:relative; overflow:hidden; padding:7px; border:2px solid #e8efed; border-radius:15px; background:#fff; color:#385064; text-align:left; cursor:pointer; }
.background-choice.selected { border-color:#188acb; box-shadow:0 0 0 3px #188acb20; }
.background-choice-image { display:block; aspect-ratio:16/9; border-radius:9px; background-position:center; background-size:cover; }
.background-choice-name { display:block; padding:7px 4px 2px; font-size:12px; font-weight:800; }
.background-choice>b { position:absolute; top:11px; right:11px; width:24px; height:24px; display:grid; place-items:center; border-radius:50%; background:#188acb; color:#fff; }
.theme-admin-thumb { width:96px; aspect-ratio:16/9; object-fit:cover; border-radius:8px; }
.theme-appearance-page { display:grid; gap:16px; }
.back-link { width:max-content; padding:8px 0; border:0; background:none; color:#287da8; font-weight:800; cursor:pointer; }
.theme-appearance-heading { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:20px 24px; border:1px solid #e4ece8; border-radius:20px; background:#fff; }
.theme-appearance-heading h2 { margin:5px 0; }
.theme-appearance-heading p { max-width:660px; margin:0; color:#6b7d8c; font-size:13px; line-height:1.6; }
.theme-appearance-preview { width:min(330px,38%); aspect-ratio:16/9; object-fit:cover; border-radius:13px; box-shadow:0 5px 15px #233c4c20; }
.theme-appearance-form .form-grid { grid-template-columns:repeat(3,minmax(0,1fr)); align-items:end; }
.color-field { display:flex; align-items:center; gap:10px; min-height:42px; color:#718390; font-size:12px; }
.color-field input { width:52px; height:38px; padding:3px; border:1px solid #dce8e4; border-radius:9px; background:#fff; cursor:pointer; }
.theme-library-card { display:grid; gap:18px; }
.admin-background-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:13px; }
.admin-background-card { overflow:hidden; border:1px solid #e4ece8; border-radius:14px; background:#fff; }
.admin-background-card>img { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; background:#edf4f1; }
.admin-background-card>div { display:grid; gap:5px; padding:10px; }
.admin-background-card strong { color:#2c4355; font-size:13px; }
.admin-background-card small { color:#80909b; font-size:11px; }
.admin-background-card .button-row { margin-top:5px; }
.theme-background-upload { display:grid; grid-template-columns:minmax(220px,1fr) minmax(160px,.7fr) minmax(160px,.7fr) auto; align-items:end; gap:12px; padding:16px; border:1px dashed #cbded8; border-radius:15px; background:#f8fbfa; }
.theme-background-upload small { display:block; margin-top:5px; color:#7d8f99; font-size:11px; line-height:1.45; }
.theme-ai-generate { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:15px 17px; border-radius:14px; background:#eef6ff; }
.theme-ai-generate strong { color:#2c4e68; }
.theme-ai-generate p { margin:5px 0 0; color:#738698; font-size:12px; }
.image-preview-modal { position:fixed; z-index:30; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:35px; background:#142332dc; color:#fff; }
.image-preview-modal img { max-width:min(1100px,92vw); max-height:78vh; object-fit:contain; border:5px solid #fff; border-radius:12px; box-shadow:0 15px 55px #0005; }
.image-preview-close { position:absolute; top:20px; right:24px; width:44px; height:44px; border:0; border-radius:50%; background:#fff; color:#24384a; font-size:30px; cursor:pointer; }
@media(max-width:760px) {
  .student-topbar { min-height:72px; padding:10px 14px; }
  .student-brand { gap:7px; font-size:17px; }
  .student-brand-mark { width:38px; height:38px; font-size:23px; }
  .student-top-actions { gap:6px; }
  .student-id-pill { min-height:40px; padding-right:9px; }
  .student-id-pill>span { width:30px; height:30px; font-size:20px; }
  .student-id-pill strong { max-width:76px; font-size:12px; }
  .star-pill { min-height:40px; min-width:58px; padding:0 9px; font-size:14px; }
  .round-action,.language-switch { width:40px; min-width:40px; min-height:40px; padding:0; }
  .student-main { width:calc(100% - 24px); padding-top:14px; }
  .adventure-route-wrap { top:clamp(132px,21vh,176px); width:min(88vw,650px); height:min(54vh,380px); min-height:300px; }
  .map-stop { width:76px; height:76px; font-size:25px; }
  .learn-stop,.treasure-stop { left:31%; }
  .quiz-stop { right:29%; }
  .stop-label { font-size:12px; bottom:-25px; }
  .stop-stars { top:-18px; font-size:16px; }
  .map-theme-switcher { top:70px; }
  .theme-appearance-heading { align-items:flex-start; padding:16px; }
  .theme-appearance-preview { width:34%; }
  .theme-appearance-form .form-grid { grid-template-columns:1fr; }
  .theme-background-upload { grid-template-columns:1fr; }
}
@media(max-width:480px) {
  .student-app-shell.is-adventure,.adventure-map-scene { min-height:100svh; height:100svh; }
  .student-brand>span:last-child { display:none; }
  .student-brand-mark { width:40px; height:40px; }
  .student-topbar { align-items:flex-start; }
  .student-id-pill strong { max-width:64px; }
  .student-top-actions { gap:5px; }
  .language-switch { font-size:11px; }
  .adventure-route-wrap { top:clamp(132px,21vh,158px); width:94vw; height:min(53vh,350px); min-height:290px; }
  .adventure-route-line path { stroke-width:7; stroke-dasharray:1 15; }
  .map-stop { width:68px; height:68px; font-size:23px; }
  .learn-stop,.treasure-stop { left:24%; }
  .quiz-stop { right:22%; }
  .map-theme-switcher { top:70px; min-height:43px; padding:5px 12px; gap:6px; }
  .map-theme-select { max-width:46vw; min-width:70px; font-size:13px; }
  .map-theme-area { max-width:30vw; font-size:10px; }
  .map-demo-note { right:12px; bottom:92px; font-size:10px; }
  .student-tabbar { min-height:60px; }
  .student-tab { gap:3px; }
  .student-tab>span { font-size:16px; }
  .student-tab>strong { font-size:10px; }
  .theme-customizer-controls { align-items:stretch; flex-direction:column; }
  .background-choice-grid,.admin-background-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .admin-background-card .button-row { flex-wrap:wrap; }
  .theme-appearance-heading { flex-direction:column; }
  .theme-appearance-preview { width:100%; }
  .theme-ai-generate { align-items:flex-start; flex-direction:column; }
  .image-preview-modal { padding:16px; }
}

/* A scenic, compact entry screen that shares the adventure map palette. */
.auth-wrap.auth-adventure { position:relative; min-height:100svh; display:grid; grid-template-columns:1fr; overflow:hidden; background:linear-gradient(180deg,#68c9ef 0%,#a5e3f5 58%,#e4f6e7 100%); }
.auth-adventure .auth-scene { position:absolute; z-index:0; inset:0; min-height:100%; padding:clamp(24px,4vw,52px); background:linear-gradient(180deg,#65c8f0 0%,#a8e4f6 62%,#e2f5e3 100%); }
.auth-adventure .auth-scene::before,.auth-adventure .auth-scene::after { height:35%; bottom:-12%; border-radius:50% 50% 0 0; }
.auth-adventure .auth-scene::before { left:-14%; right:24%; background:#91dc78; transform:rotate(2deg); }
.auth-adventure .auth-scene::after { left:38%; right:-16%; bottom:-18%; background:#69ca57; transform:rotate(-3deg); }
.auth-adventure .auth-brand { color:#fff; text-shadow:0 2px 4px #287ca055; }
.auth-adventure .auth-brand .brand-mascot { width:46px; height:46px; border:3px solid #fff; border-radius:50%; background:#fff; box-shadow:0 4px 0 #278cbb55; }
.auth-adventure .auth-pitch { display:none; }
.auth-adventure .auth-doodle { top:18%; right:calc(50% - 360px); width:104px; height:104px; border-width:4px; font-size:48px; }
.auth-adventure .auth-card-wrap { position:relative; z-index:2; min-height:100svh; padding:90px 22px; background:transparent; }
.auth-adventure .auth-card { width:min(100%,410px); padding:32px; border:1px solid #ffffffa6; border-radius:27px; background:#fffdf7; box-shadow:0 8px 0 #49688830,0 24px 55px #25465b30; }
.auth-adventure .auth-card h2 { color:#29354b; font-size:29px; }
.auth-adventure .auth-card > p { margin-bottom:20px; }
.auth-adventure .auth-footer { padding-top:12px; border-top:1px solid #edf0eb; }
@media(max-width:760px) {
  .auth-adventure .auth-doodle { top:15%; right:8%; width:78px; height:78px; font-size:37px; }
  .auth-adventure .auth-card-wrap { padding:90px 18px 34px; }
  .auth-adventure .auth-card { padding:26px; }
}
@media(max-width:480px) {
  .auth-adventure .auth-scene { min-height:100%; }
  .auth-adventure .auth-brand { font-size:16px; }
  .auth-adventure .auth-brand .brand-mascot { width:40px; height:40px; }
  .auth-adventure .auth-doodle { top:14%; right:7%; width:66px; height:66px; font-size:31px; }
  .auth-adventure .auth-card-wrap { padding:100px 16px 24px; }
  .auth-adventure .auth-card { padding:23px; }
}

/* The adventure map is the public entry point; login sits over it as a dialog. */
.student-app-shell.is-adventure { position:relative; height:auto; min-height:100svh; overflow:visible; background:#82d9f4; }
.is-adventure .student-topbar { position:fixed; inset:0 0 auto; min-height:72px; padding:10px clamp(14px,3vw,40px); background:linear-gradient(180deg,#168db42b,transparent); }
.is-adventure .student-main { position:relative; inset:auto; width:100%; max-width:none; margin:0; padding:0; flex:1; }
.is-adventure .student-main>section.page-enter { height:auto; }
.student-brand { min-width:0; }
.student-brand-mark { flex:0 0 auto; padding:0; cursor:pointer; }
.student-brand>span:last-child { display:block; }
.student-brand small { display:block; margin-top:1px; font-size:10px; font-weight:750; letter-spacing:.01em; }
.student-top-actions { flex:0 0 auto; }
.student-app-shell.is-adventure .student-tabbar { left:50%; transform:translateX(-50%); }
.student-app-shell.is-adventure .student-tabbar { width:min(300px,calc(100% - 28px)); }

.adventure-map { width:100%; padding:0 0 130px; overflow:hidden; }
.map-theme-zone { --scene-color:#85d8f4; position:relative; isolation:isolate; width:100%; height:520px; min-height:480px; overflow:hidden; background-color:var(--scene-color); background-image:linear-gradient(180deg,color-mix(in srgb,var(--scene-color) 18%,transparent) 0%,transparent 52%,color-mix(in srgb,var(--scene-color) 6%,transparent) 100%),var(--scene-image); background-position:center; background-size:cover; }
.map-scene-overlay { z-index:0; background:linear-gradient(180deg,#168bb116 0%,transparent 48%,#fff1c21c 100%); }
.map-hill { position:absolute; z-index:1; bottom:-152px; width:68%; height:270px; border-radius:50% 50% 0 0; pointer-events:none; }
.map-hill-back { left:-11%; background:#8bdc73e8; transform:rotate(3deg); }
.map-hill-front { right:-12%; bottom:-174px; width:71%; height:300px; background:#69ce5ce8; transform:rotate(-4deg); }
.map-theme-switcher { top:82px; z-index:3; min-height:48px; padding:6px 18px; }
.map-theme-copy strong { max-width:min(50vw,380px); overflow:hidden; color:#fff; font-size:clamp(14px,1.5vw,19px); font-weight:900; text-overflow:ellipsis; }
.map-theme-area { max-width:min(30vw,245px); }
.adventure-route-wrap { z-index:2; top:145px; width:min(84vw,760px); height:310px; min-height:0; }
.adventure-route-line { z-index:0; }
.adventure-route-line path { stroke-width:9; stroke-dasharray:1 18; }
.map-stop { z-index:2; width:86px; height:86px; }
.learn-stop { top:0; left:20%; }
.quiz-stop { top:41%; right:20%; }
.treasure-stop { bottom:0; left:27%; }
.treasure-stop.is-locked::after { content:"🔒"; }
.map-stop .stop-label { font-size:14px; }
.map-load-error { min-height:65vh; display:grid; place-items:center; padding:28px; color:#36596a; text-align:center; }

.student-login-overlay { position:fixed; z-index:50; inset:0; display:grid; place-items:center; overflow:auto; padding:22px; background:#164d6980; backdrop-filter:blur(4px); animation:login-fade-in .18s ease-out; }
.student-login-dialog { position:relative; isolation:isolate; width:min(100%,460px); max-height:min(92svh,820px); overflow:auto; padding:30px 34px 24px; border:4px solid #fff; border-radius:34px; background:radial-gradient(circle at 93% 15%,#fff0b8 0 7px,transparent 8px),radial-gradient(circle at 7% 34%,#dff5ff 0 6px,transparent 7px),#fffdf6; box-shadow:0 9px 0 #418eb84d,0 26px 70px #10384b55; animation:login-rise-in .24s cubic-bezier(.2,.8,.25,1.2); }
.student-login-dialog::before { position:absolute; z-index:-1; content:""; inset:0 0 auto; height:132px; border-radius:29px 29px 45% 18%; background:linear-gradient(125deg,#e7f8ff,#d9f4ff 65%,#fff2ca); }
.student-login-dialog h2 { margin:0 0 7px; color:#29354b; font-size:29px; font-weight:950; letter-spacing:-.045em; }
.student-login-dialog .login-dialog-title { margin-bottom:18px; }
.student-login-dialog>p { margin:0 0 21px; color:#617f93; font-size:14px; line-height:1.65; }
.login-dialog-top { position:relative; display:flex; align-items:center; gap:12px; min-height:62px; margin:0 48px 22px 0; }
.login-dialog-mascot { position:relative; width:58px; height:58px; display:grid; place-items:center; border:3px solid white; border-radius:22px 22px 22px 9px; background:linear-gradient(145deg,#ffe17d,#ffbe40); box-shadow:0 5px 0 #e8a633; font-size:31px; transform:rotate(-5deg); }
.login-dialog-mascot i { position:absolute; top:-9px; right:-10px; color:#ff8a36; font-size:18px; font-style:normal; text-shadow:0 1px white; }
.login-dialog-brand { color:#258bb7; font-size:11px; font-weight:950; letter-spacing:.12em; }
.login-dialog-brand small { display:block; margin-top:4px; color:#71899a; font-size:10px; font-weight:800; letter-spacing:.02em; }
.login-dialog-stamp { margin-left:auto; padding:7px 10px; border:2px solid white; border-radius:14px 14px 14px 4px; color:#7e5b14; background:#ffdb70; box-shadow:0 3px 0 #ebba48; font-size:10px; font-weight:950; transform:rotate(7deg); }
.login-dialog-confetti { position:absolute; inset:0; z-index:-1; overflow:hidden; color:#ffbd42; pointer-events:none; }
.login-dialog-confetti span { position:absolute; top:108px; left:16px; font-size:17px; animation:login-twinkle 2.6s ease-in-out infinite; }
.login-dialog-confetti span:nth-child(2) { top:164px; left:auto; right:17px; color:#fd8d6c; font-size:13px; animation-delay:.7s; }
.login-dialog-confetti span:nth-child(3) { top:auto; bottom:87px; left:14px; color:#72cce9; font-size:9px; }
.login-dialog-confetti span:nth-child(4) { top:49px; left:auto; right:73px; color:#ff9e49; font-size:12px; animation-delay:1.1s; }
.login-dialog-confetti span:nth-child(5) { top:auto; bottom:38px; left:auto; right:20px; color:#9dce62; font-size:8px; }
.student-login-dialog .eyebrow { margin:0; }
.login-dialog-close { position:absolute; z-index:2; top:15px; right:15px; width:36px; height:36px; border:2px solid white; border-radius:50%; color:#536f82; background:#fff; box-shadow:0 3px 0 #d2e8ef; font-size:24px; line-height:1; cursor:pointer; transition:transform .16s ease; }
.login-dialog-close:hover { background:#fff4d5; transform:rotate(9deg) scale(1.05); }
.student-login-dialog .login-student-field { gap:7px; margin-bottom:14px; }
.student-login-dialog .login-student-field label { color:#526f82; font-size:12px; }
.student-login-dialog .login-student-field label span { display:inline-block; margin-right:3px; font-size:15px; vertical-align:-1px; }
.student-login-dialog .login-student-field input { min-height:49px; padding:12px 15px; border:2px solid #e2edf0; border-radius:15px; background:#fff; font-size:14px; box-shadow:inset 0 2px 3px #37607508; }
.student-login-dialog .login-student-field input:focus { border-color:#74c9e8; outline:3px solid #a8e3f433; }
.login-adventure-submit { width:100%; min-height:52px; margin-top:4px; border:0; border-radius:17px; background:linear-gradient(100deg,#1598d1,#27a6c7); box-shadow:0 5px 0 #1176a7,0 9px 17px #188ab033; font-size:15px; letter-spacing:.02em; transition:transform .15s ease,box-shadow .15s ease; }
.login-adventure-submit:hover { background:linear-gradient(100deg,#12a2d9,#29b2c9); transform:translateY(-2px); box-shadow:0 7px 0 #1176a7,0 12px 18px #188ab033; }
.login-adventure-submit:active { transform:translateY(3px); box-shadow:0 2px 0 #1176a7; }
.student-login-dialog .login-dialog-hint { display:flex; align-items:center; gap:8px; margin-top:19px; padding:11px 13px; border:1px solid #f5e4ad; border-radius:14px; color:#7b725a; background:#fff8df; font-size:11px; line-height:1.55; }
.login-dialog-hint span:first-child { flex:0 0 auto; font-size:16px; }
.demo-login-section { margin-top:16px; padding-top:12px; border-top:2px dashed #dcebf0; }
.demo-login-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:9px; }
.demo-login-heading strong { color:#42657b; font-size:11px; font-weight:950; }
.demo-login-heading>span { color:#91a1a8; font-size:9px; }
.demo-login-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.demo-login-card { min-width:0; min-height:72px; display:flex; align-items:center; gap:7px; padding:9px 8px; border:2px solid #e5edf0; border-radius:17px; color:#35536a; background:#fff; text-align:left; box-shadow:0 3px 0 #e7eef0; transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease; }
.demo-login-card:hover { transform:translateY(-2px); box-shadow:0 5px 0 #d8e7eb; }
.demo-login-advanced { border-color:#cde8b8; background:linear-gradient(145deg,#f7ffed,#fff); }
.demo-login-advanced:hover { border-color:#8fd46c; }
.demo-login-starter { border-color:#f3dfaa; background:linear-gradient(145deg,#fff9e6,#fff); }
.demo-login-starter:hover { border-color:#f2c85e; }
.demo-login-avatar { flex:0 0 30px; width:30px; height:30px; display:grid; place-items:center; border-radius:11px; background:#fff; font-size:21px; }
.demo-login-copy { min-width:0; flex:1; }
.demo-login-copy strong,.demo-login-copy small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.demo-login-copy strong { color:#29485e; font-size:10px; font-weight:950; }
.demo-login-copy small { margin-top:4px; color:#7f9299; font-size:8px; line-height:1.35; }
.demo-login-arrow { flex:0 0 auto; color:#66a4b8; font-size:13px; font-weight:950; }
.demo-login-card:disabled { cursor:wait; opacity:.65; transform:none; }
@keyframes login-twinkle { 0%,100% { opacity:.55; transform:scale(.9) rotate(-8deg); } 50% { opacity:1; transform:scale(1.15) rotate(8deg); } }
@keyframes login-fade-in { from { opacity:0; } to { opacity:1; } }
@keyframes login-rise-in { from { opacity:0; transform:translateY(8px) scale(.99); } to { opacity:1; transform:translateY(0) scale(1); } }

@media(max-width:760px) {
  .student-app-shell.has-wish-ticker .student-topbar { flex-wrap:wrap; row-gap:0; }
  .student-app-shell.has-wish-ticker .student-wish-ticker { order:3; flex:1 0 100%; height:28px; padding:0; }
  .student-app-shell.has-wish-ticker .student-wish-icon { font-size:17px; }
  .student-app-shell.has-wish-ticker .student-wish-copy { font-size:12px; }
  .student-app-shell.has-wish-ticker .map-theme-switcher { top:116px; }
  .student-app-shell.has-wish-ticker .adventure-route-wrap { top:170px; }
  .student-app-shell.has-theme-scene { background-attachment:scroll; }
  .student-app-shell.is-adventure .student-topbar { min-height:66px; padding:9px 14px; }
  .map-theme-zone { height:510px; min-height:470px; }
  .map-theme-switcher { top:82px; min-height:44px; padding:5px 13px; gap:7px; }
  .map-theme-copy strong { max-width:48vw; font-size:14px; }
  .map-theme-area { max-width:27vw; font-size:10px; }
  .adventure-route-wrap { top:142px; width:92vw; height:300px; }
  .map-stop { width:76px; height:76px; font-size:25px; }
  .map-stop .stop-label { bottom:-26px; font-size:12px; }
  .map-hill { bottom:-175px; width:76%; height:260px; }
  .map-hill-front { bottom:-190px; }
}
@media(max-width:640px) {
  .student-app-shell.has-wish-ticker .student-brand>span:last-of-type { display:none; }
  .student-app-shell.has-wish-ticker .student-logout-wide { display:none; }
  .student-app-shell.has-wish-ticker .student-logout-compact { display:inline; }
}
@media(max-width:480px) {
  .student-brand { flex:1; min-width:0; max-width:none; gap:6px; font-size:14px; }
  .student-brand>span:last-of-type { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .student-brand small { display:none; }
  .student-brand-mark { width:40px; height:40px; font-size:23px; }
  .student-logout-button { margin-left:0; padding:7px 9px; font-size:10px; }
  .student-logout-wide { display:none; }
  .student-logout-compact { display:inline; }
  .student-top-actions { gap:5px; }
  .star-pill { min-width:48px; min-height:40px; padding:0 8px; font-size:13px; }
  .round-action,.language-switch { width:40px; min-width:40px; min-height:40px; }
  .map-theme-zone { height:500px; min-height:460px; }
  .map-theme-switcher { top:78px; max-width:calc(100% - 24px); padding:5px 11px; }
  .map-theme-copy { gap:5px; }
  .map-theme-copy strong { max-width:43vw; font-size:12px; }
  .map-theme-area { max-width:27vw; font-size:9px; }
  .adventure-route-wrap { top:135px; width:94vw; height:292px; }
  .map-stop { width:68px; height:68px; font-size:23px; }
  .learn-stop { left:19%; }
  .quiz-stop { right:18%; }
  .treasure-stop { left:27%; }
  .stop-stars { top:-17px; font-size:15px; }
  .map-stop .stop-label { bottom:-25px; padding:3px 9px; font-size:11px; }
  .student-login-overlay { padding:12px; }
  .student-login-dialog { padding:24px 21px 19px; border-width:3px; border-radius:28px; }
  .student-login-dialog::before { border-radius:24px 24px 45% 18%; }
  .student-login-dialog h2 { font-size:24px; }
  .login-dialog-top { min-height:54px; margin-bottom:18px; }
  .login-dialog-mascot { width:51px; height:51px; border-radius:19px 19px 19px 7px; font-size:27px; }
  .login-dialog-stamp { padding:6px 8px; }
  .demo-login-grid { gap:6px; }
  .demo-login-card { min-height:66px; gap:5px; padding:7px 6px; border-radius:14px; }
  .demo-login-avatar { flex-basis:25px; width:25px; height:25px; font-size:18px; }
  .demo-login-copy strong { font-size:9px; }
  .demo-login-copy small { font-size:7px; }
}
@media(max-width:360px) {
  .student-brand>span:last-of-type { display:none; }
  .student-logout-button { padding:7px 8px; }
}