:root { font-family: Inter, ui-sans-serif, system-ui, sans-serif; color: #163b3a; background: #f2ffff; }
* { box-sizing: border-box; } body { min-height: 100vh; margin: 0; background: linear-gradient(135deg, #d7f7f7, #f7ffff 55%, #fff); }
.page-shell { width: min(100% - 2rem, 67rem); min-height: 100vh; margin: auto; display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: clamp(2rem, 8vw, 8rem); }
.intro { display: grid; gap: 2rem; }.brand { color: #176f70; font-size: 1.35rem; font-weight: 800; letter-spacing: -.08em; text-decoration: none; }.brand span { color: #33cccc; }
.eyebrow { margin: 0 0 .7rem; color: #178d8d; font-size: .72rem; font-weight: 800; letter-spacing: .14em; }.intro h1 { max-width: 34rem; margin: 0; font-size: clamp(2.6rem, 6vw, 4.6rem); letter-spacing: -.065em; line-height: .98; }.intro-copy { max-width: 28rem; color: #557574; font-size: 1.05rem; line-height: 1.6; }.prototype-note { color: #6b8988; font-size: .82rem; }
.auth-card { min-height: 31rem; padding: 2rem; border: 1px solid #d8efee; border-radius: 1.5rem; background: #fff; box-shadow: 0 1.5rem 4rem #0abab52e; }.tabs { display: flex; gap: 1.4rem; margin-bottom: 2.1rem; border-bottom: 1px solid #deefee; }
button { font: inherit; cursor: pointer; }.tab { margin-bottom: -1px; padding: 0 0 .8rem; border: 0; border-bottom: 2px solid transparent; background: transparent; color: #728585; font-weight: 700; }.tab.active { border-color: #0abab5; color: #087a76; }
form { display: grid; gap: 1rem; } h2 { margin: 0; font-size: 1.8rem; letter-spacing: -.045em; } form > p { margin: -.5rem 0 .7rem; color: #728585; font-size: .92rem; } label { display: grid; gap: .42rem; color: #315b5a; font-size: .84rem; font-weight: 700; } input { width: 100%; padding: .78rem .9rem; border: 1px solid #cae5e4; border-radius: .65rem; color: #163b3a; font: inherit; outline: none; } input:focus { border-color: #0abab5; box-shadow: 0 0 0 3px #c8f2f0; }
.password-control { position: relative; display: block; }.password-control input { padding-right: 4.6rem; }.password-control button { position: absolute; top: 50%; right: .45rem; transform: translateY(-50%); border: 0; background: transparent; color: #087a76; font-size: .78rem; font-weight: 800; }
.primary, .secondary { padding: .85rem 1rem; border: 0; border-radius: .65rem; font-weight: 800; }.primary { background: #33cccc; color: #073c3b; }.primary:hover { background: #22baba; }.secondary { border: 1px solid #bce2e0; background: #fff; color: #087a76; }.message { min-height: 1.25rem; margin: 0; color: #be123c; font-size: .82rem; }.message.success { color: #15803d; }.hidden { display: none !important; }
.member-view { min-height: 25rem; place-content: center; text-align: center; }.avatar { display: grid; width: 4rem; aspect-ratio: 1; margin: 0 auto 1.4rem; place-items: center; border-radius: 50%; background: #d8f5f3; color: #078f8b; font-size: 2rem; font-weight: 800; }.member-view p:not(.eyebrow) { margin: .5rem 0 2rem; color: #728585; }
.app-view { width: min(100vw - 2rem, 74rem); min-height: min(44rem, 90vh); display: grid; grid-template-columns: 15rem 1fr; overflow: hidden; border: 1px solid #b8e7e7; border-radius: 1.5rem; background: #faffff; box-shadow: 0 1.5rem 4rem #15999928; }.sidebar { display: flex; flex-direction: column; gap: 2.5rem; padding: 1.8rem 1rem; background: #e4fafa; }.sidebar nav { display: grid; gap: .4rem; }.nav-item { display: flex; gap: .75rem; align-items: center; padding: .8rem .9rem; border: 0; border-radius: .7rem; background: transparent; color: #416b6b; text-align: left; font-weight: 700; }.nav-item:hover, .nav-item.active { background: #c5f2f2; color: #126d6d; }.profile-wrap { position: relative; margin-top: auto; }.profile-button { display: grid; grid-template-columns: 2.2rem 1fr auto; gap: .6rem; width: 100%; align-items: center; padding: .65rem; border: 0; border-radius: .75rem; background: #fff; color: #315b5a; text-align: left; }.profile-avatar { display: grid; width: 2.2rem; aspect-ratio: 1; place-items: center; border-radius: 50%; background: #33cccc; color: #073c3b; font-weight: 900; }.profile-button small { display: block; margin-top: .1rem; color: #789493; }.profile-menu { position: absolute; right: 0; bottom: 3.4rem; z-index: 2; width: 13rem; padding: .4rem; border: 1px solid #b8e7e7; border-radius: .75rem; background: #fff; box-shadow: 0 .8rem 2rem #126d6d25; }.profile-menu button { display: flex; justify-content: space-between; width: 100%; padding: .65rem; border: 0; border-radius: .45rem; background: transparent; color: #315b5a; text-align: left; }.profile-menu button:hover { background: #e4fafa; }.profile-menu span { color: #789493; }.dashboard { padding: clamp(1.5rem, 5vw, 4rem); overflow: auto; }.page-panel h2 { font-size: clamp(2rem, 4vw, 3rem); }.muted { color: #6d8a89; }.hero-card { display: flex; justify-content: space-between; gap: 1rem; margin: 2rem 0 1rem; padding: 2rem; border-radius: 1.25rem; background: #33cccc; color: #0a4443; }.hero-card h3 { max-width: 20rem; margin: 0; font-size: 1.8rem; letter-spacing: -.04em; }.hero-card p:not(.eyebrow) { max-width: 22rem; }.hero-card .primary { background: #fff; }.book-mark { display: grid; min-width: 7rem; place-items: center; border-radius: 1rem; background: #e4ffff; font-size: 3rem; }.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }.stat-grid article { padding: 1rem; border: 1px solid #d5eeee; border-radius: .9rem; background: #fff; }.stat-grid span { color: #178d8d; font-size: 1.8rem; font-weight: 800; }.stat-grid p { margin: .25rem 0 0; color: #6d8a89; font-size: .8rem; }
.signed-in .page-shell { width: 100%; min-height: 100vh; display: block; padding: 0; }
.signed-in .intro { display: none; }
.signed-in .auth-card { min-height: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
.signed-in .app-view { width: 100%; min-height: 100vh; border: 0; border-radius: 0; box-shadow: none; }
.checking-session .auth-card { visibility: hidden; }
.empty-action { display: flex; align-items: center; gap: 1rem; margin-top: 2rem; padding: 1.2rem; border: 1px solid #cbecec; border-radius: 1rem; background: #f7ffff; }.empty-action > span { display: grid; width: 2.8rem; aspect-ratio: 1; place-items: center; border-radius: .8rem; background: #d8f7f7; color: #157c7d; font-size: 1.35rem; font-weight: 900; }.empty-action div { flex: 1; }.empty-action strong { color: #315b5a; }.empty-action p { margin: .2rem 0 0; color: #6d8a89; font-size: .84rem; }.onboarding { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: 1rem; background: #0c515155; backdrop-filter: blur(.4rem); }.onboarding-card { width: min(100%, 28rem); padding: 2rem; border: 1px solid #bdecec; border-radius: 1.4rem; background: #fff; box-shadow: 0 1.5rem 4rem #073c3b45; text-align: center; }.onboarding-card h2 { margin: 0; }.onboarding-card .muted { margin: .7rem 0 1.5rem; line-height: 1.5; }.avatar-uploader { display: grid; justify-items: center; gap: .45rem; margin: 1rem 0; padding: 1rem; border: 1px dashed #77cfcf; border-radius: 1rem; background: #f3ffff; color: #176f70; cursor: pointer; }.avatar-uploader > span { display: grid; width: 5rem; aspect-ratio: 1; place-items: center; overflow: hidden; border: .2rem solid #fff; border-radius: 50%; background: #33cccc; background-position: center; background-size: cover; color: #073c3b; font-size: 2rem; font-weight: 900; box-shadow: 0 .3rem .8rem #0c77772b; }.avatar-uploader small { color: #6d8a89; }.onboarding-card .primary { width: 100%; }.text-button { margin-top: .8rem; border: 0; background: transparent; color: #5e8583; font-size: .84rem; font-weight: 700; }.profile-avatar.has-image { background-position: center; background-size: cover; color: transparent; }
.leaderboard-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }.leaderboard-heading .secondary { white-space: nowrap; }.leaderboard-tabs { display: flex; gap: .45rem; margin: 1.7rem 0; padding: .3rem; width: fit-content; border-radius: .75rem; background: #e8f8f8; }.board-tab { padding: .5rem .75rem; border: 0; border-radius: .55rem; background: transparent; color: #527574; font-size: .82rem; font-weight: 800; }.board-tab.active { background: #fff; color: #167879; box-shadow: 0 .15rem .5rem #168b8b17; }.podium { display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; gap: .75rem; padding: 1.5rem 1rem 0; border: 1px solid #d5eeee; border-radius: 1.2rem 1.2rem 0 0; background: linear-gradient(180deg, #efffff, #d7f8f8); text-align: center; }.podium article { display: grid; justify-items: center; gap: .35rem; min-height: 8.2rem; padding: 1rem .45rem; border-radius: .9rem .9rem 0 0; background: #fff; }.podium .first { min-height: 10.2rem; background: linear-gradient(180deg, #ffe995, #f5c954); color: #62470a; }.podium .second { background: linear-gradient(180deg, #f4f7f8, #cbd5da); color: #40545c; }.podium .third { background: linear-gradient(180deg, #ffe1c4, #d99a66); color: #633718; }.podium small { color: currentColor; opacity: .75; font-size: .75rem; }.rank-row small { color: #5d8886; font-size: .75rem; }.podium-holder { position: relative; display: grid; place-items: center; width: 4.25rem; aspect-ratio: 1; }.podium-holder::before { position: absolute; inset: .15rem; border: .28rem solid var(--medal-ring); border-radius: 50%; content: ''; box-shadow: inset 0 0 0 .12rem #ffffff99, 0 .25rem .7rem #125d5d2b; }.first .podium-holder { --medal-ring: #d99c17; }.second .podium-holder { --medal-ring: #92a4ae; }.third .podium-holder { --medal-ring: #b76832; }.medal { position: absolute; bottom: -.65rem; z-index: 2; display: grid; width: 2rem; aspect-ratio: 1; place-items: center; border: .16rem solid #fff; border-radius: 50%; background: #fff; font-size: 1.3rem; line-height: 1; filter: drop-shadow(0 .16rem .22rem #125d5d35); }.reader-avatar { position: relative; z-index: 1; display: grid; width: 3.15rem; aspect-ratio: 1; place-items: center; border: .14rem solid #fff; border-radius: 50%; background: #33cccc; color: #073c3b; font-weight: 900; }.reader-avatar.small { width: 2rem; border: 0; font-size: .75rem; }.reader-avatar.lilac { background: #e4ddff; color: #5f4b9b; }.reader-avatar.peach { background: #ffdfcd; color: #9c5431; }.reader-avatar.gold { background: #fff1aa; color: #8b6710; }.reader-avatar.aqua { background: #c9f3eb; color: #237363; }.rank-list { overflow: hidden; border: 1px solid #d5eeee; border-top: 0; border-radius: 0 0 1.2rem 1.2rem; background: #fff; }.rank-row { display: grid; grid-template-columns: 1.6rem 2rem 1fr auto; align-items: center; gap: .7rem; padding: .8rem 1rem; border-top: 1px solid #e7f3f3; color: #527574; font-size: .85rem; }.rank-row:first-child { border-top: 0; }.rank-row strong { color: #315b5a; }.rank-row.you { border: 1px solid #33cccc; background: #edffff; }.rank-row.you small { color: #178d8d; font-weight: 700; }
@media (max-width: 720px) { .page-shell { min-height: auto; padding: 2rem 0; grid-template-columns: 1fr; gap: 2.5rem; }.intro { gap: 1.2rem; }.auth-card { padding: 1.5rem; }.intro h1 { font-size: clamp(2.6rem, 14vw, 4rem); } }
@media (max-width: 720px) { .app-view { grid-template-columns: 1fr; }.sidebar { flex-direction: row; gap: .5rem; align-items: center; padding: 1rem; }.sidebar nav { display: flex; overflow-x: auto; }.nav-item { white-space: nowrap; }.sidebar > .brand, .profile-wrap { display: none; }.dashboard { min-height: 35rem; }.stat-grid { grid-template-columns: 1fr; } }

.avatar-uploader { width: 100%; font: inherit; }
.photo-settings { display: flex; align-items: flex-start; gap: 1.5rem; margin-top: 2rem; padding: 1.5rem; border: 1px solid #cbecec; border-radius: 1rem; background: #fff; }
.profile-avatar.settings-avatar { flex-shrink: 0; width: 5rem; font-size: 2rem; }
.photo-settings h3 { margin: 0; }
.photo-actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: .75rem; }
button:disabled { opacity: .6; cursor: wait; }
button:focus-visible { outline: 3px solid #087a76; outline-offset: 3px; }
.onboarding { overflow-y: auto; }
.onboarding-card { margin: auto; }
@media (max-width: 720px) { .sidebar { flex-wrap: wrap; } .sidebar nav { width: 100%; } .sidebar .profile-wrap { display: block; margin-left: auto; } .profile-menu { top: 3.4rem; bottom: auto; } .photo-settings { flex-direction: column; } .empty-action { flex-wrap: wrap; } }

.sidebar, .dashboard, .sidebar nav { min-width: 0; }
@media (max-width: 720px) { .app-view { grid-template-columns: minmax(0, 1fr); } .profile-wrap { max-width: 100%; } .hero-card { flex-wrap: wrap; } .book-mark { display: none; } }

.language-picker { display: flex; gap: .75rem; margin: 0 0 1.5rem; padding: 1rem; border: 1px solid #cbecec; border-radius: .8rem; text-align: left; }
.language-picker legend { color: #176f70; font-weight: 700; padding: 0 .4rem; }
.language-picker label { display: flex; align-items: center; gap: .5rem; flex: 1; cursor: pointer; }
.language-picker input { width: auto; accent-color: #087a76; }
.language-settings { display: grid; gap: .8rem; max-width: 26rem; margin-top: 2rem; }
.language-settings select { padding: .8rem; border: 1px solid #b8e7e7; border-radius: .6rem; background: #fff; color: #163b3a; font: inherit; }
.team-heading { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.2rem; }
.team-heading h3 { margin:0; overflow-wrap:anywhere; } .team-heading p { margin-bottom:0; }
.team-picture { flex-shrink:0; display:grid; place-items:center; width:4rem; height:4rem; border-radius:50%; background:#d4f5f2 center / cover; color:#087a76; font-size:1.5rem; font-weight:800; }
.team-card { padding:1.3rem; border:1px solid #cbecec; border-radius:1rem; background:white; margin:1rem 0; min-width:0; }
.team-card .team-heading { justify-content:flex-start; } .team-card select, .assignment-row select { width:100%; padding:.7rem; font:inherit; border:1px solid #b8e7e7; border-radius:.6rem; background:white; color:#163b3a; }
.team-card > button { margin-top:.7rem; } .team-card .muted { font-size:.85rem; }
.team-roster { list-style:none; padding:0; } .team-roster li { display:flex; gap:.75rem; align-items:center; padding:.65rem 0; border-bottom:1px solid #e8f5f4; overflow-wrap:anywhere; }
.role-badge { display:inline-block; background:#e4fafa; color:#087a76; padding:.2rem .6rem; border-radius:1rem; font-size:.75rem; white-space:nowrap; }
.admin-team-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr)); gap:1rem; }
.create-team { display:flex; align-items:end; gap:.7rem; margin:1.5rem 0 .5rem; } .create-team label { flex:1; }
.assignment-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(8rem,1fr) auto; align-items:end; gap:.8rem; padding:1rem 0; border-bottom:1px solid #d9eeee; }
.assignment-row small { display:block; color:#6d8a89; overflow-wrap:anywhere; margin:.3rem 0; } .assignment-row strong { overflow-wrap:anywhere; }
.rename-team { max-width:26rem; margin-top:1.5rem; }
@media(max-width:720px) { .assignment-row { grid-template-columns:1fr; } .create-team { flex-direction:column; align-items:stretch; } .team-heading { flex-wrap:wrap; } }

.danger-button { display:block; margin-top:1rem; padding:.7rem 1rem; border:1px solid #e0aaaa; border-radius:.6rem; background:#fff7f7; color:#a12d2d; font-weight:700; }
.edit-user-name { margin-top:.8rem; gap:.5rem; }
/* Keep desktop navigation in view while long pages scroll independently. */
@media (min-width: 721px) {
  .signed-in .app-view { height: 100vh; height: 100dvh; min-height: 0; }
  .signed-in .sidebar, .signed-in .dashboard { min-height: 0; }
  .signed-in .dashboard { overflow-y: auto; }
  .signed-in .sidebar nav { min-height: 0; overflow-y: auto; flex-shrink: 1; }
  .signed-in .sidebar > .brand, .signed-in .profile-wrap { flex-shrink: 0; }
}

.logo-brand { display:flex; align-items:center; justify-content:center; width:fit-content; }
.logo-brand img { display:block; width:7rem; height:7rem; object-fit:contain; }
.sidebar > .logo-brand { align-self:center; }
@media (max-width:720px) { .sidebar > .logo-brand { display:flex; margin-right:auto; } .sidebar > .logo-brand img { width:3.5rem; height:3.5rem; } }

.weekly-progress { margin:2rem 0; padding:1.5rem; border:1px solid #cbecec; background:white; border-radius:1rem; }
.progress-summary { display:flex; justify-content:space-between; gap:1rem; margin-bottom:1rem; color:#176f70; }
.weekly-progress progress { display:block; width:100%; height:1.2rem; border:0; border-radius:1rem; overflow:hidden; appearance:none; background:#e1f4f2; }
.weekly-progress progress::-webkit-progress-bar { background:#e1f4f2; border-radius:1rem; }
.weekly-progress progress::-webkit-progress-value { background:#26bdb6; border-radius:1rem; }
.weekly-progress progress::-moz-progress-bar { background:#26bdb6; border-radius:1rem; }
.streak-card { display:flex; align-items:center; gap:1.5rem; padding:1.5rem; border:1px solid #f2dac0; border-radius:1rem; background:#fffaf3; }
.streak-flame { font-size:4rem; line-height:1.2; } .streak-card strong { font-size:2.5rem; color:#b86525; } .streak-card h3 { margin:.2rem 0; }
.delete-account-section { margin-top:3rem; padding-top:1.5rem; border-top:1px solid #e4baba; } .delete-account-section > h3 { color:#a12d2d; }
.delete-account-section details { max-width:32rem; } .delete-account-section summary { color:#a12d2d; cursor:pointer; font-weight:700; padding:.7rem 0; }
.delete-account-section form { margin-top:1rem; } .delete-confirmation { display:flex; align-items:flex-start; gap:.6rem; line-height:1.5; } .delete-confirmation input { width:auto; margin-top:.3rem; } .delete-account-section .danger-button { margin-top:0; }

.test-list { display:grid; gap:1rem; margin-top:2rem; } .test-card { margin:0; } .test-card h3 { margin:0 0 .3rem; color:#315b5a; font-size:1.1rem; } .test-card button { flex-shrink:0; } .weekly-test { background:#fff9e9; border-color:#e7d69f; margin:.5rem 0; } .weekly-test > span { background:#f9e9ad; color:#8b6a18; } .weekly-test .eyebrow { margin:0 0 .4rem; color:#8b6a18; font-size:.7rem; }

.star-controls { margin-top:1rem; padding-top:1rem; border-top:1px solid #d9eeee; gap:.6rem; } .star-actions { display:flex; flex-wrap:wrap; gap:.5rem; } .star-controls > strong { color:#87651a; } .podium .leader-avatar { position:relative; z-index:1; width:3.1rem; height:3.1rem; font-size:1.2rem; } .rank-row .team-picture { width:2rem; height:2rem; font-size:.85rem; } .podium strong, .rank-row strong { overflow-wrap:anywhere; } #leaderboard-content { margin-top:2rem; }
.admin-tabs { display:flex; flex-wrap:wrap; gap:.6rem; margin:1.5rem 0; } .admin-tabs [aria-pressed=true] { background:#c5f2f2; } #admin-unlock-form { max-width:24rem; margin-top:1.5rem; } .lock-toggle { display:flex; flex-direction:row; align-items:center; gap:.6rem; } .lock-toggle input { width:auto; } #admin-test-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr)); gap:1rem; } .quiz-form { margin:1.5rem 0; } .quiz-form fieldset { border:1px solid #cbecec; border-radius:.8rem; padding:1rem; } .quiz-form legend { font-weight:700; } .quiz-form label { display:flex; align-items:start; gap:.7rem; padding:.6rem 0; } .quiz-form input { width:auto; margin-top:.2rem; } #test-player { margin-top:1.5rem; }
/* Weekly completion and chained test locks. */
#progress-to-tests { margin-top:1.25rem; }
.unlock-message { margin:1.25rem 0 0; color:#087a76; font-size:clamp(1.1rem,3vw,1.6rem); font-weight:850; }
.celebrate-unlock { animation:weekly-celebration 1.2s ease-in-out 3; }
@keyframes weekly-celebration { 0%,100% { opacity:1; text-shadow:0 0 0 transparent; transform:scale(1); } 50% { opacity:.6; text-shadow:0 0 18px #30cfcf88; transform:scale(1.025); } }
.test-card { position:relative; min-height:190px; overflow:hidden; display:flex; align-items:flex-start; padding:1.5rem; transition:background-color .65s,color .65s,border-color .65s; isolation:isolate; }
.test-card .test-copy { position:relative; z-index:2; align-self:flex-start; }
.test-card .test-copy h3 { margin-bottom:.45rem; }
.test-card > button { align-self:flex-end; position:relative; z-index:2; }
.test-card.is-locked { background:#172b33; border-color:#38545e; color:#e6f3f5; }
.test-card.is-locked .test-copy h3 { color:#f3fbfc; }
.test-card.is-locked .test-copy p { color:#a8c0c9; max-width:65%; font-size:.8rem; }
.test-card.is-locked > button { visibility:hidden; }
.test-lock-cover { position:absolute; inset:0; z-index:3; pointer-events:none; }
.test-chains { position:absolute; inset:0; width:100%; height:100%; filter:drop-shadow(0 3px 2px #0007); }
.test-chains path { fill:none; stroke:#99acb3; stroke-width:8; stroke-dasharray:6 5; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.test-chains .chain-inner { stroke:#354851; stroke-width:3; }
.center-lock { position:absolute; left:50%; top:50%; translate:-50% -50%; width:72px; height:72px; border-radius:50%; background:#223c47; border:1px solid #647e88; box-shadow:0 6px 22px #0008; display:grid; place-items:center; font-size:2.5rem; z-index:2; }
.open-lock { display:none; }
.unlock-burst { position:absolute; left:50%; top:50%; width:10px; height:10px; border:3px solid #f9df89; border-radius:50%; translate:-50% -50%; opacity:0; }
.test-card.unlocking { animation:card-becomes-light 2.4s forwards; }
.unlocking .center-lock { animation:lock-shake-and-open 2.4s forwards; }
.unlocking .closed-lock { animation:closed-lock-away 2.4s forwards; }
.unlocking .open-lock { display:block; position:absolute; opacity:0; animation:open-lock-reveal 2.4s forwards; }
.unlocking .test-lock-cover { animation:unlock-cover-away 2.4s forwards; }
.unlocking .chain-nw, .unlocking .chain-sw { animation:chains-fall-left 2.4s forwards; }
.unlocking .chain-ne, .unlocking .chain-se { animation:chains-fall-right 2.4s forwards; }
.unlocking .unlock-burst { animation:lock-burst 2.4s forwards; }
@keyframes lock-shake-and-open { 0%,16%,32% { transform:rotate(0); } 4%,12%,20%,28% { transform:rotate(-14deg); } 8%,24% { transform:rotate(14deg); } 40% { transform:scale(1); } 48% { transform:scale(1.35); } 64% { transform:scale(1.1); opacity:1; } 100% { transform:translateY(100px) rotate(14deg) scale(.8); opacity:0; } }
@keyframes closed-lock-away { 0%,40%{opacity:1;} 43%,100%{opacity:0;} }
@keyframes open-lock-reveal { 0%,40%{opacity:0;} 43%,100%{opacity:1;} }
@keyframes chains-fall-left { 0%,43%{transform:translate(0,0);opacity:1;} 100%{transform:translate(-40px,220px) rotate(-18deg);opacity:0;} }
@keyframes chains-fall-right { 0%,43%{transform:translate(0,0);opacity:1;} 100%{transform:translate(40px,220px) rotate(18deg);opacity:0;} }
@keyframes lock-burst { 0%,40% { opacity:0;transform:scale(1); } 44% { opacity:1; } 75%,100% { opacity:0;transform:scale(20); } }
@keyframes unlock-cover-away { 0%,75% { opacity:1; } 100% { opacity:0; } }
@keyframes card-becomes-light { 0%,44%{background:#172b33;} 100%{background:#fff9e9;border-color:#e7d69f;} }
@media (prefers-reduced-motion:reduce) { .celebrate-unlock { animation:none; } .test-card { transition:none; } }
@media (max-width:480px) { .test-card { min-height:220px; flex-wrap:wrap; } .test-card .test-copy { flex-basis:100%; } }

#prototype-content > .test-card { margin-top:1rem; }
.test-history { margin-top:2rem; }
.test-history-row { display:grid; grid-template-columns:minmax(180px,2fr) minmax(170px,1.4fr) minmax(130px,1fr) auto; gap:1rem; align-items:center; padding:1rem 0; border-bottom:1px solid #cbecec; }
.test-history-row time { color:#526e70; font-size:.85rem; }
.score-pass { color:#13733b; } .score-fail { color:#b42318; }
.test-history-row a { color:#096c71; text-decoration:underline; }
#test-answer-key { margin-top:1.5rem; padding:1.5rem; background:#fff; border:1px solid #cbecec; border-radius:1rem; }
.answer-key-question { padding:1rem 0; border-bottom:1px solid #dbe8e8; } .answer-key-question p { white-space:pre-line; line-height:1.7; }
@media(max-width:760px) { .test-history-row { grid-template-columns:1fr; gap:.5rem; } }

.delete-result-dialog { width:min(92vw,440px); border:1px solid #cbecec; border-radius:1rem; padding:1.5rem; color:#244b4d; }
.delete-result-dialog::backdrop { background:#102c3a99; }
.delete-result-dialog form { display:grid; gap:1rem; }
.delete-result-dialog label { display:grid; gap:.5rem; }
.delete-result-dialog input { padding:.75rem; border:1px solid #87b4b4; border-radius:.5rem; }

.hero-card { align-items:center; }
.hero-card > div { min-width:0; }
.home-book-cover { display:block; width:clamp(130px,24%,210px); height:auto; object-fit:contain; flex-shrink:0; border-radius:.5rem; box-shadow:0 .6rem 1.3rem #0a44432b; }
@media(max-width:720px) { .home-book-cover { width:min(55%,190px); margin-inline:auto; } }
.team-discussion { margin-top:2rem; padding:clamp(1rem,3vw,1.5rem); border:1px solid #cbecec; border-radius:1rem; background:#fff; }
.team-post-form { display:grid; gap:.8rem; margin:1.5rem 0; } .team-post-form label { display:grid; gap:.5rem; }
.team-post-form textarea { box-sizing:border-box; width:100%; resize:vertical; padding:.8rem; border:1px solid #97bcbc; border-radius:.6rem; font:inherit; }
.team-post-form .announcement-toggle { display:flex; align-items:center; } .team-post-form .announcement-toggle[hidden] { display:none; }
.team-post-form button { justify-self:start; } .team-post { padding:1rem; border:1px solid #dceaea; border-radius:.7rem; margin:.7rem 0; overflow-wrap:anywhere; }
.team-post time { display:block; font-size:.8rem; color:#526e70; margin-top:.3rem; } .team-post p { white-space:pre-wrap; line-height:1.6; }
.captain-post { border-color:#d9c57c; background:#fffae9; }

.leaderboard-tabs { margin:1.5rem 0 1rem; } .leaderboard-tabs [aria-pressed="true"] { background:#147d7c; color:white; } .rank-row.my-ranking { background:#dff7f1; border:2px solid #21867b; border-radius:.6rem; }
/* Shared page palette: the sidebar teal fades gently darker toward the bottom. */
:root { --page-teal:#33cccc; --page-teal-bottom:#239d9f; }
.signed-in .app-view { background:var(--page-teal); }
.signed-in .sidebar { background:var(--page-teal); }
.signed-in .dashboard { background:linear-gradient(to bottom,var(--page-teal) 0%,#2ebcbd 50%,var(--page-teal-bottom) 100%); }
.hero-card { background:var(--page-teal); border:1px solid #bfdfdd; box-shadow:0 .4rem 1.2rem #276e6910; }

.signed-in .sidebar .nav-item { color:#123f40; }
.hero-card { border-color:#28b5b6; }
.signed-in .dashboard > .page-panel > .muted, .signed-in .dashboard .leaderboard-heading .muted, #ranking-description { color:#174d4e; }
/* Restore the pale page background independently of the sidebar and card. */
.signed-in .app-view { background:#e4fafa; }
.signed-in .dashboard { background:linear-gradient(to bottom,#e4fafa 0%,#dcf5f3 50%,#b8e2df 100%); }
/* Logo-inspired blue-green sidebar. */
.signed-in .sidebar { background:#449395; }
.signed-in .sidebar .nav-item { color:#f0fbfa; }
.signed-in .sidebar .nav-item:hover, .signed-in .sidebar .nav-item.active { background:#d1eeeb; color:#174d4e; }
/* Requested Home card and solid page background colors. */
.signed-in .app-view, .signed-in .dashboard { background:#e8f7f7; }
#home-page .hero-card { background:#9bd4d2; }

.my-team-ranking { position:sticky; bottom:0; z-index:4; margin-top:1rem; padding:.5rem 0; } .my-team-ranking .rank-row { box-shadow:0 -.2rem 1rem #174d4e18; }
#program-field select, #settings-program, #new-team-program { padding:.7rem; border:1px solid #bad5d5; border-radius:.6rem; font:inherit; }
body[data-program="zhifu"].signed-in .sidebar { background:#b88a2e; }
body[data-program="zhifu"].signed-in .app-view, body[data-program="zhifu"].signed-in .dashboard { background:#fff8e5; }
body[data-program="zhifu"] #home-page .hero-card { background:#f0d58e; border-color:#d9b15b; }
body[data-program="zhifu"] .sidebar .nav-item { color:#fffdf4; }
body[data-program="zhifu"] .sidebar .nav-item.active, body[data-program="zhifu"] .sidebar .nav-item:hover { background:#fff0c5; color:#674713; }
body[data-program="zhifu"] .primary, body[data-program="zhifu"] .secondary { border-color:#d5b063; color:#654819; }
body[data-program="zhifu"] .primary { background:#edc96f; }
body[data-program="zhifu"] .eyebrow, body[data-program="zhifu"] h2, body[data-program="zhifu"] h3 { color:#79571d; }
body[data-program="zhifu"] .test-card.is-locked h3 { color:#f3fbfc; }
body[data-program="zhifu"] .team-card, body[data-program="zhifu"] .weekly-progress, body[data-program="zhifu"] .team-discussion, body[data-program="zhifu"] .test-card:not(.is-locked) { border-color:#e0c994; background:#fffdf6; }
body[data-program="zhifu"] .rank-row.my-ranking { background:#fff0c5; border-color:#b98c34; }
body[data-program="zhifu"] .weekly-progress progress::-webkit-progress-value { background:#c99b36; }
body[data-program="zhifu"] .weekly-progress progress::-moz-progress-bar { background:#c99b36; }
body[data-program="zhifu"] .leaderboard-tabs [aria-pressed="true"] { background:#a87a27; color:white; }
body[data-program="zhifu"] .stat-grid span { color:#9b7228; }
body[data-program="zhifu"] .profile-avatar:not(.has-image) { background:#e9c976; color:#664817; }
.egg-card { margin:1.5rem 0; padding:1.5rem; border:1px solid #d5bf80; background:#fff9e7; border-radius:1rem; } .egg-card h3 { margin:0; } .egg-icon { display:inline-block; font-size:3.5rem; margin:.7rem 0; } .egg-card details { margin-top:1rem; } .egg-card li { line-height:1.8; } .egg-icon.rolling { animation:egg-wobble .4s infinite alternate; } @keyframes egg-wobble { from {transform:rotate(-12deg);} to {transform:rotate(12deg);} } @media(prefers-reduced-motion:reduce){.egg-icon.rolling{animation:none;}}
.egg-arcade { display:grid; grid-template-columns:minmax(260px,1fr) minmax(240px,1fr); gap:clamp(2rem,5vw,5rem); align-items:center; max-width:950px; margin:2.5rem auto; }
.capsule-machine { --machine:#368d90; --machine-dark:#256468; position:relative; width:min(100%,340px); margin:auto; padding-top:38px; filter:drop-shadow(0 18px 14px #174d4e20); }
.machine-sign { position:absolute; z-index:4; top:0; left:12%; width:76%; padding:15px 6px; text-align:center; background:#ffe4a0; border:5px solid var(--machine-dark); border-radius:20px; color:#71501a; font-size:18px; font-weight:900; letter-spacing:2px; }
.machine-globe { position:relative; height:235px; margin:0 17px; border:9px solid var(--machine-dark); border-radius:46% 46% 18% 18%; overflow:hidden; background:linear-gradient(140deg,#ffffffc9,#d7f9fa66 65%,#8dd3d4c0); box-shadow:inset 0 -10px 20px #2d7b7c20; }
.glass-shine { position:absolute; left:23px; top:32px; width:24px; height:92px; border-radius:50%; transform:rotate(22deg); background:#ffffff9c; }
.capsule-pile { position:absolute; inset:0; }
.mini-capsule { position:absolute; width:56px; height:65px; border-radius:50%; background:linear-gradient(to bottom,var(--cap,#eab252) 49%,#fff6dc 50%); border:2px solid #ffffffa6; box-shadow:2px 4px 5px #194c4c26; transform:rotate(var(--tilt,15deg)); }
.capsule-0{left:12%;bottom:7%;--cap:#d98582;--tilt:-30deg}.capsule-1{left:34%;bottom:2%;--cap:#8eadd9;--tilt:35deg}.capsule-2{left:58%;bottom:8%;--cap:#e8bf5e;--tilt:-20deg}.capsule-3{left:74%;bottom:19%;--cap:#a597cf;--tilt:55deg}.capsule-4{left:5%;bottom:32%;--cap:#91bda5;--tilt:-60deg}.capsule-5{left:27%;bottom:29%;--cap:#e8bf5e;--tilt:20deg}.capsule-6{left:48%;bottom:36%;--cap:#d98582;--tilt:75deg}.capsule-7{left:67%;bottom:46%;--cap:#86bec2;--tilt:15deg}.capsule-8{left:18%;bottom:53%;--cap:#a597cf;--tilt:-15deg}.capsule-9{left:39%;bottom:62%;--cap:#91bda5;--tilt:30deg}.capsule-10{left:62%;bottom:70%;--cap:#e8bf5e;--tilt:-45deg}.capsule-11{left:5%;bottom:74%;--cap:#8eadd9;--tilt:45deg}
.machine-body { position:relative; height:220px; background:linear-gradient(100deg,var(--machine-dark),var(--machine) 30%,var(--machine) 80%,var(--machine-dark)); border:7px solid var(--machine-dark); border-radius:22px 22px 28px 28px; margin-top:-20px; z-index:2; }
.machine-emblem { position:absolute; left:22px; top:20px; color:#ffe4a0; font-size:35px; }.machine-knob { position:absolute; left:50%; top:22px; width:66px; height:66px; margin-left:-33px; border-radius:50%; background:#ffe4a0; border:5px solid #ecd092; box-shadow:0 4px 0 #163c4055; }.machine-knob span { position:absolute; top:22px; left:4px; width:48px; height:12px; border-radius:6px; background:#8d713d; }.machine-slot { position:absolute; right:24px; top:40px; width:12px; height:34px; background:#163c40; border:3px solid #c6dede; border-radius:5px; }
.machine-chute { position:absolute; bottom:13px; left:24%; width:52%; height:87px; background:#153e42; border:6px solid #b9dada; border-radius:40px 40px 14px 14px; overflow:hidden; box-shadow:inset 0 6px 9px #0005; }.machine-door { position:absolute; inset:0; background:linear-gradient(#5ca3a6,#3b7b7d); border-radius:30px 30px 6px 6px; z-index:2; transform-origin:top; }
.dispensed-egg { position:absolute; width:48px; height:58px; left:calc(50% - 24px); bottom:3px; border-radius:50% 50% 44% 44%; background:linear-gradient(#f5c65c 48%,#fff7e0 49%); border:2px solid #ffecc1; opacity:0; transform:translateY(-100px); display:grid; place-items:center; color:#a87321; font-size:21px; box-shadow:0 3px 8px #0004; }.machine-base { height:20px; margin:-5px -6px 0; border-radius:8px; background:var(--machine-dark); }
.egg-control { padding:1.8rem; border:1px solid #c2d9d5; border-radius:1.5rem; background:#ffffffb8; }.egg-control #egg-balance { font-size:1.15rem; font-weight:750; }.egg-control #egg-roll { width:100%; padding:1rem; font-size:1rem; }.egg-prize { min-height:85px; display:grid; align-items:center; margin:1rem 0; padding:.75rem; border-radius:.8rem; text-align:center; }.egg-prize.revealed { background:#fff0bd; color:#745019; font-size:1.3rem; font-weight:800; animation:prize-pop .35s ease-out; }.egg-control details { border-top:1px solid #ccdcd7; padding-top:1rem; }.egg-control li { line-height:1.8; }
.mixing .mini-capsule { animation:capsule-jiggle .28s infinite alternate; }.mixing .mini-capsule:nth-child(even){animation-direction:alternate-reverse}.mixing .machine-knob { animation:knob-turn .9s linear infinite; }.dispensing .machine-knob { transform:rotate(180deg); }.dispensing .machine-door { animation:chute-open .4s forwards; }.dispensing .dispensed-egg { animation:egg-dispense 1.6s .2s both; }.opened .dispensed-egg { box-shadow:0 0 22px #ffd86c; }
@keyframes capsule-jiggle { to { transform:translateY(-9px) rotate(calc(var(--tilt,15deg) + 14deg)); } } @keyframes knob-turn { to {transform:rotate(360deg);} } @keyframes chute-open { to {transform:rotateX(88deg);} } @keyframes egg-dispense { 0%{opacity:0;transform:translateY(-100px) rotate(-25deg)} 12%{opacity:1} 65%{opacity:1;transform:translateY(0) rotate(12deg)} 80%{opacity:1;transform:translateY(-15px) rotate(-8deg)} 100%{opacity:1;transform:translateY(0) rotate(0)} } @keyframes prize-pop { from {transform:scale(.93);opacity:.5} to {transform:scale(1);opacity:1} }
body[data-program="zhifu"] .capsule-machine { --machine:#d0a448;--machine-dark:#94712b; }
@media(max-width:800px){.egg-arcade{grid-template-columns:1fr;gap:1.5rem}.capsule-machine{width:min(100%,300px)}.egg-control{padding:1.2rem}}
@media(prefers-reduced-motion:reduce){.mixing .mini-capsule,.mixing .machine-knob,.dispensing .machine-door,.dispensing .dispensed-egg,.egg-prize.revealed{animation:none}.dispensing .machine-door{transform:rotateX(88deg)}.dispensing .dispensed-egg{opacity:1;transform:none}}
.confucius-dialog{box-sizing:border-box;width:min(420px,calc(100vw - 32px));max-height:90dvh;overflow:auto;border:2px solid #9bd4d2;border-radius:28px;padding:24px;text-align:center;background:#fffdf5;color:#305a59;box-shadow:0 24px 80px #183a3940;animation:confucius-pop .45s cubic-bezier(.2,.8,.3,1.2)}
.confucius-dialog::backdrop{background:#163b3966}.confucius-dialog img{display:block;width:200px;max-width:75%;height:auto;margin:0 auto}.confucius-dialog h2{font-size:1.5rem;line-height:1.5;margin:12px 0 22px}.confucius-dialog button{min-width:120px}
@keyframes confucius-pop{from{opacity:0;transform:translateY(40px) scale(.85)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(prefers-reduced-motion:reduce){.confucius-dialog{animation:none}}

/* Garden growth: sky, circular tree portrait and cumulative XP. */
.garden-hero{position:relative;isolation:isolate;display:flex;align-items:center;gap:30px;min-height:320px;padding:24px 28px;background:#fff;border:1px solid #d9e3e7;border-radius:20px;overflow:hidden;margin:24px 0 18px}
.garden-sky{position:absolute;inset:0 0 auto;height:42%;z-index:-1;background:linear-gradient(135deg,#229aca,#67c7e8)}
.garden-tree{width:260px;height:260px;flex:none;object-fit:contain;border-radius:50%;background:#d9f2fc}
.garden-detail{flex:1;min-width:0;padding-top:70px}
.garden-bar{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:66px;padding:12px 16px;border:2px solid #d0d7db;background:#fff;box-shadow:inset 0 0 0 2px #fff;overflow:hidden}
.garden-fill{position:absolute;left:2px;top:2px;bottom:2px;z-index:-1;background:#a9ddf5;max-width:calc(100% - 4px);transition:width .5s ease-out}
.garden-bar strong{font-size:clamp(1.1rem,2vw,1.65rem);color:#163e54;white-space:nowrap}.garden-bar span{font-size:1rem;color:#163e54;text-align:right}
.garden-xp{margin:12px 0 0;font-size:1.1rem;color:#315a6e;font-weight:650}.garden-earned{font-size:1.1rem;font-weight:700}.garden-note{color:#54706f;line-height:1.6}
.garden-stages{list-style:none;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;padding:0;margin:18px 0}
.garden-stage{display:flex;align-items:center;flex-direction:column;gap:8px;text-align:center;border:1px solid #d6e5e3;border-radius:16px;padding:14px 6px;background:white}.garden-stage img{width:86px;height:86px;max-width:100%;object-fit:contain;border-radius:50%}.garden-stage strong{font-size:1rem}.garden-stage span,.garden-stage small{font-size:.875rem;color:#4e6d6b}.garden-stage.current{border:2px solid #2499c9;background:#edf9ff}.garden-stage.locked img{opacity:.6}
@media(max-width:1100px){.garden-hero{gap:18px;padding:20px}.garden-tree{width:190px;height:190px}.garden-stages{grid-template-columns:repeat(3,minmax(0,1fr))}.garden-bar{flex-wrap:wrap}.garden-detail{padding-top:55px}}
@media(max-width:600px){.garden-hero{flex-direction:column;gap:10px;padding:18px;min-height:0}.garden-tree{width:190px;height:190px}.garden-detail{padding-top:0;width:100%}.garden-bar strong{font-size:1.15rem}.garden-stages{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.garden-fill{transition:none}}

.sidebar-icon{display:block;width:24px;height:24px;flex:0 0 24px;overflow:visible}

/* Icon details follow the selected program theme. */
body[data-program="zhifu"] .sidebar-icon[stroke="#397f9f"],
body[data-program="zhifu"] .sidebar-icon [stroke="#397f9f"]{stroke:#79571d}

.home-star-balance{display:flex;align-items:center;gap:16px;padding:18px 22px;border:1px solid #b8dcd8;border-radius:16px;background:#f7fffe;margin:20px 0 0}.home-star-balance>span{font-size:2.4rem}.home-star-balance p{margin:0 0 4px;color:#54706f}.home-star-balance strong{font-size:2rem;line-height:1.2;color:#174d4e;overflow-wrap:anywhere}.home-star-balance button{margin-left:auto}body[data-program="zhifu"] .home-star-balance{background:#fffdf4;border-color:#e0c994}body[data-program="zhifu"] .home-star-balance strong{color:#79571d}@media(max-width:420px){.home-star-balance{gap:10px;padding:14px}.home-star-balance strong{font-size:1.6rem}}

/* Logo-inspired landscape across all member pages. */
.signed-in .dashboard{background-color:#effafa;background-image:linear-gradient(rgba(255,255,255,.70),rgba(255,255,255,.70)),url('/assets/home-landscape.png');background-size:cover;background-position:center bottom;background-repeat:no-repeat}
#home-page{padding-bottom:180px}
#home-page .hero-card{background:#d9eeebdf;border:1px solid #b8dcd8}
#home-page .home-star-balance,#home-page .stat-grid article{background:#ffffffdf}
body[data-program="zhifu"].signed-in .dashboard{background-color:#fff8e5;background-image:url('/assets/zhifu-wealth-landscape.png')}
body[data-program="zhifu"] #home-page .hero-card{background:#f8e9bddd}
body[data-program="zhifu"] #home-page .home-star-balance,body[data-program="zhifu"] #home-page .stat-grid article{background:#fffdf3e8}
@media(max-width:600px){#home-page{padding-bottom:140px}.signed-in .dashboard{background-size:auto 100%;background-position:65% bottom}}