/* Values come from AppTheme.swift and the SwiftUI views. */
@font-face { font-family: 'Bagel Fat One'; src: url('/content/Fonts/BagelFatOne-Regular.ttf') format('truetype'); font-display: swap; }

:root {
  color-scheme: light;
  --primary-green: #58CC02; --primary-blue: #1CB0F6; --map-blue: #4DA3FF; --map-blue-dark: #2B7FD9;
  --gold: #FFD700; --heart-red: #FF4B4B; --streak-orange: #FF9600;
  --text-primary: #1B3A57; --text-muted: #8FA8BE; --card-surface: #F5F9FC; --field-border: #D8E4EF;
  --pill-shadow: rgba(184, 212, 240, .45); --ink: #08112F; --game-muted: #818BA6; --game-blue: #009CFF; --game-purple: #8356FF; --game-bg: #F4F8FF;
  --home-bg: #F1F1F4; --sheet-bg: #fff; --list-bg: #F2F2F7; --row-bg: #fff; --row-line: #E5E5EA; --sheet-text: #1B3A57;
  --column: 480px;
}
/* Same light -> dark pairs as DarkPalette in AppTheme.swift */
:root { --tabbar-bg: rgba(247,247,249,.86); --tabbar-on: rgba(0,0,0,.06); --callout: #1A1A1A; --page-bg: #fff; --surface: #fff; --text-strong: #000; --line: #D8E4EF; --c-07152d: #07152D; --c-08112f: #08112F; --c-08142f: #08142F; --c-101844: #101844; --c-101b32: #101B32; --c-111b31: #111B31; --c-131a42: #131A42; --c-151b43: #151B43; --c-17204d: #17204D; --c-173c70: #173C70; --c-18243a: #18243A; --c-1b3a57: #1B3A57; --c-466382: #466382; --c-536080: #536080; --c-57647d: #57647D; --c-697391: #697391; --c-80b2e8: #80B2E8; --c-b8d4f0: #B8D4F0; --c-d4d9e9: #D4D9E9; --c-d8d8d8: #D8D8D8; --c-d8e4ef: #D8E4EF; --c-d9d9d9: #D9D9D9; --c-dce2ec: #DCE2EC; --c-e1e6f2: #E1E6F2; --c-e2eaf4: #E2EAF4; --c-e3e7eb: #E3E7EB; --c-e4edf7: #E4EDF7; --c-e5e5ea: #E5E5EA; --c-e5f9eb: #E5F9EB; --c-e6ecf4: #E6ECF4; --c-e6f2ff: #E6F2FF; --c-eaf0f9: #EAF0F9; --c-eaf4ff: #EAF4FF; --c-eaf5ff: #EAF5FF; --c-eaf8ee: #EAF8EE; --c-eeeef0: #EEEEF0; --c-eef3f8: #EEF3F8; --c-eef4ff: #EEF4FF; --c-eff6ff: #EFF6FF; --c-f0f5fa: #F0F5FA; --c-f0f8ff: #F0F8FF; --c-f1e5ff: #F1E5FF; --c-f1f1f4: #F1F1F4; --c-f1f2f4: #F1F2F4; --c-f1f2fa: #F1F2FA; --c-f2f8ff: #F2F8FF; --c-f3eeff: #F3EEFF; --c-f4f8ff: #F4F8FF; --c-f5f6ff: #F5F6FF; --c-f5f9fc: #F5F9FC; --c-f5faff: #F5FAFF; --c-f7faff: #F7FAFF; --c-f7fbff: #F7FBFF; --c-f7fcff: #F7FCFF; --c-f8fbff: #F8FBFF; --c-fafafa: #FAFAFA; --c-fff2d8: #FFF2D8; --c-fff4e8: #FFF4E8; --c-fff9e9: #FFF9E9; }
:root[data-theme='dark'] {
  color-scheme: dark;
  --tabbar-bg: rgba(35,58,68,.86); --tabbar-on: rgba(255,255,255,.1); --callout: #35505C;
  --text-primary: #E8F0F6; --card-surface: #233A44; --field-border: #35505C; --pill-shadow: rgba(0,0,0,.35); --ink: #E8F0F6; --game-bg: #131F24; --home-bg: #131F24;
  --sheet-bg: #1A2C33; --list-bg: #131F24; --row-bg: #1A2C33; --row-line: #35505C; --sheet-text: #E8F0F6;
  --page-bg: #131F24; --surface: #1A2C33; --text-strong: #E8F0F6; --line: #35505C;
  --c-07152d: #E8F0F6; --c-08112f: #E8F0F6; --c-08142f: #E8F0F6; --c-101844: #E8F0F6; --c-101b32: #E8F0F6; --c-111b31: #E8F0F6; --c-131a42: #E8F0F6; --c-151b43: #E8F0F6; --c-17204d: #E8F0F6; --c-173c70: #E8F0F6; --c-18243a: #E8F0F6; --c-1b3a57: #E8F0F6; --c-466382: #A9B8C6; --c-536080: #A9B8C6; --c-57647d: #A9B8C6; --c-697391: #A9B8C6; --c-80b2e8: #000000; --c-b8d4f0: #000000; --c-d4d9e9: #35505C; --c-d8d8d8: #35505C; --c-d8e4ef: #35505C; --c-d9d9d9: #35505C; --c-dce2ec: #35505C; --c-e1e6f2: #35505C; --c-e2eaf4: #35505C; --c-e3e7eb: #35505C; --c-e4edf7: #35505C; --c-e5e5ea: #233A44; --c-e5f9eb: #233A44; --c-e6ecf4: #35505C; --c-e6f2ff: #233A44; --c-eaf0f9: #233A44; --c-eaf4ff: #233A44; --c-eaf5ff: #233A44; --c-eaf8ee: #233A44; --c-eeeef0: #233A44; --c-eef3f8: #233A44; --c-eef4ff: #131F24; --c-eff6ff: #233A44; --c-f0f5fa: #233A44; --c-f0f8ff: #131F24; --c-f1e5ff: #233A44; --c-f1f1f4: #131F24; --c-f1f2f4: #233A44; --c-f1f2fa: #233A44; --c-f2f8ff: #131F24; --c-f3eeff: #233A44; --c-f4f8ff: #131F24; --c-f5f6ff: #131F24; --c-f5f9fc: #233A44; --c-f5faff: #131F24; --c-f7faff: #131F24; --c-f7fbff: #131F24; --c-f7fcff: #233A44; --c-f8fbff: #131F24; --c-fafafa: #233A44; --c-fff2d8: #233A44; --c-fff4e8: #233A44; --c-fff9e9: #1A2C33;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  color: var(--text-primary); background: var(--page-bg); overscroll-behavior: none; -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; color: inherit; }
button { border: 0; background: none; padding: 0; cursor: pointer; }
button:disabled { cursor: default; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline: 3px solid var(--map-blue); outline-offset: 2px; }
h1, h2, h3, p { margin: 0; }
img { display: block; max-width: 100%; user-select: none; -webkit-user-drag: none; }
.icon { display: inline-block; flex: none; vertical-align: middle; }
.grow { flex: 1 1 0; min-width: 4px; }
.center-pad { padding: 40px; text-align: center; }
.spinner { display: inline-block; width: 18px; height: 18px; border: 2.5px solid rgba(0,0,0,.15); border-top-color: var(--map-blue); border-radius: 50%; animation: spin .8s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition: none !important; } }

/* Splash */
.splash { position: fixed; inset: 0; display: grid; place-items: center; padding: 0 28px; background: linear-gradient(135deg, #22B6FF, #008EFF, #0066CC); }
.splash video { width: min(100%, 520px); aspect-ratio: 1200 / 765; object-fit: contain; }
.boot-error { height: 100dvh; display: grid; place-content: center; gap: 16px; padding: 24px; text-align: center; }

/* Shell: tab bar like iOS on phones, side rail on wide screens */
.shell { position: fixed; inset: 0; display: flex; flex-direction: column-reverse; }
.screen { flex: 1 1 0; min-height: 0; position: relative; overflow: hidden; background: var(--surface); }
.screen > * { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.screen > *::-webkit-scrollbar { display: none; }
.screen .board-page { background: var(--c-f5f6ff); }
.screen .board, .screen .games { min-height: 100%; }
/* Floating capsule, as the iOS 26 tab bar draws it. Screens leave room for it underneath. */
.tabbar { position: absolute; z-index: 5; left: 16px; right: 16px; bottom: calc(12px + env(safe-area-inset-bottom)); display: flex; justify-content: space-around; padding: 4px; border-radius: 99px; background: var(--tabbar-bg); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 6px 22px rgba(0,0,0,.12); }
.tabbar button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px; color: var(--text-strong); font-size: 10px; font-weight: 600; padding: 6px 0 5px; border-radius: 99px; }
.tabbar button.on { color: var(--map-blue); background: var(--tabbar-on); }
@media (max-width: 899px) { .screen > * { padding-bottom: calc(84px + env(safe-area-inset-bottom)) !important; } }
@media (min-width: 900px) {
  .shell { flex-direction: row; }
  .tabbar { position: static; flex: none; flex-direction: column; justify-content: flex-start; gap: 6px; width: 220px; padding: 24px 14px; border-radius: 0; background: var(--c-f1f1f4); box-shadow: none; border-right: .5px solid rgba(0,0,0,.14); }
  .tabbar::before { content: 'Tezly'; font: 400 30px 'Bagel Fat One', sans-serif; color: var(--map-blue); padding: 0 14px 18px; }
  .tabbar button { flex: none; flex-direction: row; gap: 14px; font-size: 16px; font-weight: 600; padding: 12px 14px; border-radius: 14px; }
  .tabbar button { color: #8A8A8E; }
  .tabbar button:hover { background: rgba(0,0,0,.05); }
  .tabbar button.on { background: rgba(77,163,255,.14); }
}

/* Shared controls */
.btn-primary { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 16px; border-radius: 16px; background: var(--map-blue); color: #fff; font-size: 17px; font-weight: 700; box-shadow: 0 4px 0 rgba(77,163,255,.4); }
.btn-primary:active:not(:disabled) { opacity: .8; }
.btn-primary:disabled { background: #8E8E93; color: var(--surface); box-shadow: none; }
.btn-primary.dim { opacity: .55; }
.btn-primary .spinner { border-color: rgba(255,255,255,.4); border-top-color: #fff; }
.btn-answer { width: 100%; margin-top: 16px; padding: 16px; border-radius: 18px; background: var(--map-blue); color: #fff; font-size: 17px; font-weight: 700; box-shadow: 0 4px 8px rgba(77,163,255,.3); }
.btn-answer:disabled { opacity: .55; }
.btn-quiet { width: 100%; padding: 16px; border-radius: 18px; background: var(--card-surface); color: var(--text-muted); font-size: 17px; font-weight: 600; }
.btn-zero { width: 100%; padding: 14px; border-radius: 16px; background: rgba(77,163,255,.08); color: var(--map-blue); font-size: 15px; font-weight: 700; }
.btn-text { color: var(--text-muted); font-size: 15px; padding: 8px 2px; }
.btn-text.purple { color: var(--game-purple); }
.bar { flex: 1; height: 10px; border-radius: 99px; background: var(--card-surface); overflow: hidden; }
.bar.thick { height: 14px; background: var(--c-eef3f8); }
.bar > div { height: 100%; border-radius: 99px; background: var(--map-blue); transition: width .25s; }
.row-gap { display: flex; gap: 12px; }

/* Overlays */
.sheet { position: fixed; inset: 0; z-index: 40; display: flex; align-items: flex-end; justify-content: center; background: rgba(0,0,0,.35); animation: fade .18s; }
.sheet-panel { width: 100%; max-width: 560px; max-height: 92dvh; overflow-y: auto; background: var(--sheet-bg); color: var(--sheet-text); border-radius: 22px 22px 0 0; padding-bottom: env(safe-area-inset-bottom); animation: rise .24s cubic-bezier(.2,.8,.3,1); }
@media (min-width: 900px) { .sheet { align-items: center; } .sheet-panel { border-radius: 22px; } }
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { transform: translateY(40px); opacity: .4; } }
.cover { position: fixed; inset: 0; z-index: 30; background: var(--surface); overflow-y: auto; animation: fade .15s; }
.alert { padding: 24px 22px 12px; text-align: center; }
.alert h3 { font-size: 18px; margin-bottom: 8px; }
.alert p { font-size: 14px; opacity: .75; margin-bottom: 14px; line-height: 1.4; }
.alert-buttons { display: flex; gap: 8px; }
.alert-buttons button { flex: 1; padding: 13px; font-weight: 600; color: #007AFF; border-radius: 12px; }
.alert-buttons button:hover { background: rgba(0,0,0,.05); }
.alert-buttons .alert-danger { color: #FF3B30; }
.menu-sheet { padding: 10px; display: flex; flex-direction: column; }
.menu-sheet p { padding: 12px 14px; opacity: .6; font-size: 14px; }
.menu-sheet button { display: flex; align-items: center; gap: 12px; padding: 15px 14px; border-radius: 12px; font-size: 17px; font-weight: 600; text-align: left; }
.menu-sheet button:hover:not(:disabled) { background: rgba(0,0,0,.05); }
.menu-sheet button:disabled { opacity: .4; }
.notice { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 28px; text-align: center; }
.notice h2 { font-size: 22px; }
.notice p { line-height: 1.4; opacity: .7; }
.treasure-reward { background: linear-gradient(var(--c-f8fbff), var(--c-eef4ff), var(--c-eaf4ff)); color: var(--text-primary); }
.treasure-amount { display: flex; align-items: center; gap: 8px; font-size: 28px; font-weight: 700; }
.treasure-amount img { width: 30px; height: 30px; }
.heart-panel { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px; text-align: center; flex: 1; }
.heart-panel p { color: var(--text-muted); line-height: 1.4; }
.heart-panel .heart-timer { color: var(--map-blue); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Auth */
.auth-page { position: absolute; inset: 0; overflow-y: auto; }
.auth-shell { position: relative; min-height: 100%; display: flex; flex-direction: column; overflow: hidden; background: linear-gradient(135deg, #27B9FF, #087BFA, #0754E8); }
.auth-shell::before { content: ''; position: absolute; right: -130px; top: -110px; width: 300px; height: 300px; border-radius: 50%; border: 24px solid rgba(255,255,255,.12); }
.auth-head { position: relative; padding: calc(36px + env(safe-area-inset-top)) 24px 26px; color: #fff; }
.auth-head h1 { font-size: clamp(30px, 9vw, 34px); font-weight: 700; color: #fff; }
.auth-head p { margin-top: 6px; font-size: 15px; font-weight: 500; opacity: .92; }
.auth-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.auth-chips span { padding: 6px 12px; border-radius: 99px; background: rgba(255,255,255,.16); font-size: 13px; font-weight: 600; }
.auth-sheet { position: relative; flex: 1; padding: 26px 20px calc(24px + env(safe-area-inset-bottom)); border-radius: 32px 32px 0 0; background: var(--surface); }
.auth-column { width: 100%; max-width: 440px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
.auth { display: flex; flex-direction: column; gap: 18px; }
.auth-switch { display: flex; gap: 4px; padding: 4px; border-radius: 99px; background: var(--card-surface); }
.auth-switch button { flex: 1 1 auto; height: 42px; padding: 0 10px; border-radius: 99px; font-size: clamp(12px, 3.6vw, 14px); font-weight: 700; white-space: nowrap; color: var(--text-muted); transition: background .2s, color .2s; }
.auth-switch .on { background: #087BFA; color: #fff; }
@media (min-width: 860px) {
  .auth-shell { flex-direction: row; }
  .auth-shell::before { width: 520px; height: 520px; right: auto; left: -160px; top: -220px; border-width: 40px; }
  .auth-head { flex: 1; align-self: center; padding: 64px clamp(40px, 7vw, 96px); }
  .auth-head h1 { font-size: clamp(44px, 5vw, 60px); }
  .auth-head p { font-size: 18px; }
  .auth-sheet { flex: 0 0 min(560px, 48%); display: flex; align-items: center; padding: 40px clamp(32px, 4vw, 56px); border-radius: 32px 0 0 32px; }
}
.segmented { display: flex; padding: 2px; border-radius: 9px; background: var(--c-eeeef0); margin: 0 4px; }
.segmented button { flex: 1; padding: 7px 4px; border-radius: 7px; font-size: 13px; font-weight: 500; color: var(--text-strong); }
.segmented .on { background: var(--surface); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.14); }
.auth-fields { display: flex; flex-direction: column; gap: 14px; }
.auth-field > span { display: block; font-size: 13px; font-weight: 600; color: var(--text-muted); margin-bottom: 6px; }
.auth-input { display: flex; align-items: center; gap: 12px; height: 54px; padding: 0 16px; border-radius: 16px; background: var(--card-surface); border: 1px solid var(--field-border); transition: border-color .15s; }
.auth-input:focus-within { border-color: #087BFA; box-shadow: 0 0 0 1px #087BFA; }
.auth-input input { flex: 1; min-width: 0; border: 0; background: none; outline: 0; font-size: 17px; color: var(--text-primary); }
.auth-eye { display: grid; place-items: center; width: 32px; height: 32px; flex: none; color: var(--text-muted); }
.auth-eye.on { color: #087BFA; }
.auth-submit, .auth-submit:disabled { height: 54px; padding: 0 16px; border-radius: 99px; background: #087BFA; color: #fff; box-shadow: 0 4px 0 #0754B8; }
.auth-submit:disabled { opacity: .5; }
.auth-error { font-size: 13px; font-weight: 600; color: #FF3B30; }
.auth-hint { font-size: 12px; color: var(--text-muted); min-height: 16px; margin-top: -8px; }
.legal-accept { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.35; cursor: pointer; }
.legal-accept input { width: 22px; height: 22px; flex: none; margin: 0; accent-color: var(--map-blue); }
.legal-accept a, .legal-links a, .pro-legal a { color: var(--map-blue); }
.legal-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; font-size: 12px; }
.legal-links a { text-decoration: none; }
.legal-page { position: absolute; inset: 0; overflow-y: auto; background: var(--page-bg); color: var(--text-strong); }
.legal { max-width: 720px; margin: 0 auto; padding: 24px 20px 48px; line-height: 1.55; }
.legal h1 { font-size: 28px; margin-top: 20px; line-height: 1.2; }
.legal-date { font-size: 13px; opacity: .65; margin: 6px 0 12px; }
.legal section { margin-top: 22px; }
.legal h2 { font-size: 18px; margin-bottom: 6px; }
.legal section p { white-space: pre-line; }
.legal-nav { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--line); }
.legal-nav a { color: var(--map-blue); }
.legal-language { margin: 0; max-width: 260px; }
.pro-legal { margin-top: 12px; font-size: 12px; color: #8E8E93; text-align: center; }

.delete-account { padding: 24px 20px; display: flex; flex-direction: column; gap: 16px; }
.delete-account h2 { font-size: 22px; }
.delete-account p { line-height: 1.4; }
.delete-account .auth-input input { color: var(--text-primary); }
.btn-danger { width: 100%; padding: 16px; border-radius: 16px; background: var(--heart-red); color: #fff; font-size: 17px; font-weight: 700; }
.btn-danger:disabled { opacity: .5; }

/* Onboarding */
.onboarding { position: absolute; inset: 0; background: var(--surface); }
.welcome, .flow { height: 100%; max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; }
.welcome { align-items: center; gap: 24px; padding: 0 24px 40px; text-align: center; }
.welcome-text { display: flex; flex-direction: column; gap: 10px; }
.welcome-text h1 { font-size: 34px; }
.welcome-text h2 { font-size: 20px; font-weight: 400; color: var(--map-blue); }
.welcome-text p, .result p { font-size: 15px; color: var(--text-muted); }
.result { gap: 16px; }
.result-emoji { font-size: 48px; }
.result-level { font-size: 72px; font-weight: 900; line-height: 1; color: var(--primary-green); }
.result h2 { font-size: 28px; }
.flow-head { display: flex; align-items: center; gap: 12px; padding: 12px 20px 8px; }
.round-back { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--card-surface); }
.flow-count { width: 36px; font-size: 12px; font-weight: 700; color: var(--text-muted); text-align: right; }
.flow-body { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 20px 24px; display: flex; flex-direction: column; gap: 12px; }
.flow-foot { padding: 12px 20px 32px; display: flex; flex-direction: column; gap: 10px; }
.mascot-row { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 8px; }
.mascot { width: 120px; height: 140px; object-fit: contain; flex: none; }
.mascot.small { width: 100px; height: 120px; }
.bubble { flex: 1; padding: 16px; border-radius: 20px; background: var(--card-surface); font-size: 20px; font-weight: 700; line-height: 1.25; }
.bubble small { display: block; font-size: 11px; font-weight: 900; color: var(--map-blue); letter-spacing: 1px; margin-bottom: 8px; }
.survey-list { display: flex; flex-direction: column; gap: 10px; }
.survey-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.survey-row, .survey-card, .placement-option { border: 1px solid var(--field-border); background: var(--surface); }
.survey-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; text-align: left; }
.survey-card { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 8px; border-radius: 18px; }
.survey-row.on, .survey-card.on, .placement-option.on { border: 2px solid var(--map-blue); background: rgba(77,163,255,.08); }
.survey-emoji { font-size: 24px; }
.survey-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: var(--card-surface); color: var(--text-muted); flex: none; }
.survey-card .survey-icon { width: 44px; height: 44px; border-radius: 50%; }
.on > .survey-icon { background: rgba(77,163,255,.12); color: var(--map-blue); }
.survey-title { flex: 1; font-weight: 600; font-size: 17px; }
.survey-card .survey-title { font-size: 15px; font-weight: 700; }
.placement-option { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 16px; border-radius: 14px; font-weight: 600; font-size: 17px; text-align: left; }

/* Home */
.home { background: var(--home-bg); padding: 8px 16px 24px; }
.home > * { max-width: var(--column); margin-left: auto; margin-right: auto; }
.home-header { display: flex; align-items: center; gap: 8px; height: 52px; margin-bottom: 16px; }
.home-avatar { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: var(--surface); overflow: hidden; flex: none; }
.home-name { font: 400 30px 'Bagel Fat One', sans-serif; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.home-stat { display: flex; align-items: center; gap: 5px; height: 34px; padding: 0 9px; border-radius: 99px; background: var(--surface); font-size: 14px; font-weight: 700; color: var(--text-strong); flex: none; }
.home-stat img { width: 23px; height: 23px; object-fit: contain; }
.home-destinations { display: flex; flex-direction: column; align-items: center; gap: 9px; margin-bottom: 16px; }
.home-banners { display: flex; gap: 18px; width: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 14px; }
.home-banners::-webkit-scrollbar { display: none; }
.home-banner { flex: none; width: 85%; height: 170px; object-fit: cover; border-radius: 22px; scroll-snap-align: center; }
.home-banners a { flex: none; width: 85%; scroll-snap-align: center; }
.home-banners a .home-banner { width: 100%; }
.home-dot { width: 51px; height: 4px; border-radius: 99px; background: #268DFF; transition: transform .2s; }
.course-links { display: flex; gap: 12px; margin-bottom: 16px; }
.course-link { flex: 1; min-width: 0; height: 104px; padding: 16px; border-radius: 26px; background: var(--surface); display: flex; flex-direction: column; justify-content: space-between; text-align: left; }
.course-top { display: flex; justify-content: space-between; align-items: flex-start; white-space: pre-line; font-size: 18px; font-weight: 700; color: var(--text-strong); line-height: 1.15; }
.course-crown { width: 76px; height: 55px; object-fit: contain; margin-top: -6px; }
.course-see { font-size: 11px; color: #8E8E93; display: inline-flex; align-items: center; gap: 4px; }
.lesson-card { height: 214px; padding: 16px; border-radius: 24px; color: #fff; background-size: cover; background-position: center; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 16px; }
.lesson-live { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 500; }
.lesson-card h2 { font-size: 23px; font-weight: 800; white-space: pre-line; line-height: 1.12; }
.lesson-card p { font-size: 11px; }
.lesson-go { display: inline-flex; align-items: center; gap: 9px; height: 37px; padding: 0 17px; border-radius: 99px; background: #159DFF; color: #fff; font-size: 13px; font-weight: 700; }
.lesson-day { display: flex; align-items: center; gap: 8px; width: 248px; max-width: 100%; height: 42px; padding: 0 10px; border-radius: 99px; background: var(--surface); color: var(--c-07152d); font-size: 11px; font-weight: 600; }
.lesson-day b { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: #05C77B; color: #fff; font-size: 15px; flex: none; }
.lesson-day span { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-more { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 600; color: var(--text-strong); margin-bottom: 11px; }
.home-skills { display: flex; justify-content: space-between; padding: 0 15px; }
.home-skill { width: 62px; height: 62px; padding: 6px; border-radius: 12px; background: var(--surface); }
.home-skill img { width: 50px; height: 50px; object-fit: contain; }

/* Whole-screen backgrounds */
.screen, .auth-page, .onboarding, .cover, .map, .games { background: var(--page-bg); }

/* Lesson map */
.map { display: flex; flex-direction: column; overflow: hidden !important; background: var(--surface); }
.map-top { flex: none; }
.map-top, .map-footer { width: 100%; max-width: var(--column); margin: 0 auto; }
.map-header { display: flex; align-items: center; gap: 10px; padding: 8px 16px 4px; }
.map-trophy { position: relative; display: inline-flex; padding-left: 20px; }
.map-trophy span { padding: 10px 12px 10px 31px; border-radius: 99px; background: #000; color: #fff; font-size: 14px; font-weight: 700; }
.map-trophy img { position: absolute; left: -1px; top: 50%; width: 46px; height: 46px; object-fit: contain; transform: translateY(-50%); }
.map-stat { display: flex; align-items: center; gap: 3px; font-size: 14px; }
.map-stat img { width: 21px; height: 21px; object-fit: contain; }
.map-stat i { font-style: normal; font-size: 12px; font-weight: 700; color: var(--map-blue); }
.map-level { display: flex; align-items: center; gap: 9px; margin: 2px 18px 5px auto; padding: 10px 14px; font-size: 19px; font-weight: 700; }
.map-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; position: relative; scrollbar-width: none; }
.map-scroll::-webkit-scrollbar { display: none; }
.map-path { width: 100%; max-width: var(--column); margin: 0 auto; padding: 4px 8px 40px; display: flex; flex-direction: column; gap: 28px; position: relative; }
.map-segment { position: relative; content-visibility: auto; contain-intrinsic-size: auto 584px; }
.map-lines { position: absolute; inset: 0; pointer-events: none; }
.map-lines path { fill: none; stroke: rgba(204,214,224,.32); stroke-width: .75; stroke-linecap: round; }
.cube { position: absolute; transform: translate(-50%, -50%); }
.cube img { object-fit: contain; opacity: .96; max-width: none; }
.cube:not(:disabled):hover img { transform: scale(1.03); }
.cube.locked img { opacity: .9; filter: grayscale(1) contrast(1.12) brightness(.92); }
.cube.active img { opacity: 1; filter: drop-shadow(0 6px 18px rgba(94,176,255,.55)); animation: pulse 2.6s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.03); } }
.map-start { position: absolute; left: 50%; top: -6px; transform: translateX(-50%); padding: 8px 18px; border-radius: 18px; background: var(--callout); color: #fff; font-size: 13px; font-weight: 800; white-space: nowrap; }
.map-start::after { content: ''; position: absolute; left: 50%; bottom: -5px; margin-left: -5px; border: 5px solid transparent; border-top-color: var(--callout); border-bottom: 0; }
.map-day-line, .map-level-line { display: flex; align-items: center; gap: 14px; padding: 10px 0; }
.map-day-line::before, .map-day-line::after { content: ''; flex: 1; height: 1.5px; background: linear-gradient(90deg, var(--page-bg), rgba(197,212,227,.85), var(--page-bg)); }
.map-day-line span { padding: 4px 13px; border-radius: 99px; background: var(--c-d9d9d9); color: var(--text-strong); font-size: 14px; font-weight: 600; }
.map-level-line { padding: 10px 24px; gap: 12px; }
.map-level-line::before, .map-level-line::after { content: ''; flex: 1; height: 1px; background: var(--c-d8d8d8); }
.map-level-line span { font-size: 13px; font-weight: 700; letter-spacing: .7px; color: var(--text-muted); }
.gate { margin: 0 22px 8px; padding: 24px 22px; display: flex; flex-direction: column; align-items: center; gap: 14px; border-radius: 28px; border: 1px solid var(--c-e3e7eb); background: linear-gradient(var(--c-f1f2f4), var(--c-fafafa)); }
.gate.open { background: linear-gradient(var(--c-f7fcff), var(--c-eaf5ff)); }
.gate-icon { width: 68px; height: 68px; display: grid; place-items: center; border-radius: 50%; background: var(--surface); color: #AEB2B8; }
.gate.open .gate-icon { color: var(--primary-blue); }
.gate b { font-size: 24px; font-weight: 800; color: #A0A4AA; }
.gate.open b { color: var(--text-primary); }
.gate p { font-size: 15px; font-weight: 500; color: #9A9DA3; }
.gate-pill { width: 100%; padding: 16px; border-radius: 99px; background: #A8ADB5; color: #fff; font-size: 17px; font-weight: 800; }
.gate.open .gate-pill { background: var(--map-blue); box-shadow: 0 4px 0 rgba(77,163,255,.35); }
.map-footer { flex: none; padding: 8px 20px 20px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.map-footer-line { width: 100%; display: flex; align-items: center; gap: 11px; color: var(--text-strong); }
.map-footer-line i { flex: 1; height: 1px; background: var(--c-d8d8d8); min-width: 8px; }
.map-footer-line b { font-size: 16px; padding: 0 8px; white-space: nowrap; }
.map-footer-line span { font-size: 17px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.map-footer button { width: 100%; max-width: 360px; padding: 13px; border-radius: 99px; background: var(--map-blue); color: #fff; font-size: 18px; font-weight: 800; box-shadow: 0 4px 0 rgba(77,163,255,.35); }
.map-footer button:disabled { opacity: .7; }

:root[data-theme='dark'] .map-lines { display: none; }
:root[data-theme='dark'] .map-day-line::before, :root[data-theme='dark'] .map-day-line::after { background: none; }

/* Lesson */
.lesson { min-height: 100%; max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; }
.lesson-top { display: flex; align-items: center; gap: 12px; padding: 8px 16px 0; }
.lesson-top > b { width: 36px; font-size: 12px; text-align: center; }
.lesson-x { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 50%; color: var(--text-muted); background: var(--surface); }
.lesson-hearts { display: flex; align-items: center; gap: 3px; font-size: 12px; }
.lesson-hearts img { width: 18px; height: 18px; object-fit: contain; }
.lesson-main { flex: 1; padding: 8px 16px 24px; display: flex; flex-direction: column; gap: 8px; }
.lesson-loading { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 40px; color: var(--text-muted); text-align: center; }
.lesson-cheer { padding: 0 20px 12px; font-size: 12px; font-weight: 600; color: rgba(77,163,255,.7); }
.lesson-prompt { display: flex; align-items: center; gap: 12px; }
.task-character { flex: none; position: relative; }
.girl-character { width: 100%; height: 100%; object-fit: contain; }
.boy-character { position: relative; overflow: hidden; }
.boy-art { position: absolute; left: 0; top: 0; width: 1312px; height: 1199px; transform-origin: top left; }
.boy-art img { max-width: none; }
.lesson-bubble { flex: 1; min-width: 0; padding: 14px; border-radius: 18px; background: var(--surface); box-shadow: 0 3px 8px var(--pill-shadow); display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.lesson-bubble p { font-size: 15px; font-weight: 600; line-height: 1.3; }
.lesson-bubble button { display: inline-flex; align-items: center; gap: 5px; color: var(--map-blue); font-size: 12px; font-weight: 600; }
.step-result { flex: 1; margin: 20px; padding: 48px 24px 24px; border-radius: 24px; background: var(--surface); box-shadow: 0 6px 14px var(--pill-shadow); display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.step-result .result-emoji { font-size: 64px; }
.step-result h2 { font-size: 22px; }
.step-result p { color: var(--text-muted); }
.step-result .btn-primary { margin-top: auto; }
.step-result .step-warning { font-size: 12px; color: var(--heart-red); }

/* Exercises */
.ex-card { padding: 22px; border-radius: 24px; background: var(--surface); box-shadow: 0 6px 14px var(--pill-shadow); display: flex; flex-direction: column; gap: 20px; }
.ex-card.center { align-items: center; text-align: center; gap: 18px; }
.ex-tag { font-size: 11px; font-weight: 900; letter-spacing: 1px; color: var(--text-muted); }
.ex-title { font-size: 28px; }
.ex-body { line-height: 1.55; white-space: pre-line; color: rgba(27,58,87,.85); }
.ex-question { font-size: 20px; font-weight: 700; line-height: 1.25; }
.ex-question.center, .ex-muted.center { text-align: center; }
.ex-sub { font-size: 15px; font-weight: 600; }
.ex-note { font-size: 12px; color: var(--map-blue); }
.ex-muted { font-size: 14px; color: var(--text-muted); line-height: 1.35; margin-top: -10px; }
.ex-help { font-size: 15px; }
.ex-word { font-size: 36px; font-weight: 700; }
.ex-translation { font-size: 22px; font-weight: 600; color: var(--primary-green); }
.ex-prompt-row { display: flex; align-items: center; gap: 12px; }
.ex-prompt { font-size: 22px; font-weight: 700; line-height: 1.25; }
.speak-round { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 50%; color: var(--map-blue); background: rgba(77,163,255,.12); }
.ex-box { width: 100%; padding: 20px; border-radius: 16px; background: var(--card-surface); font-size: 22px; font-weight: 700; text-align: center; line-height: 1.3; }
.ex-box.small { font-size: 20px; }
.ex-box.stack { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ex-box.stack .ex-muted { margin: 0; font-weight: 400; }
.ex-lead { font-size: 15px; font-weight: 600; color: var(--map-blue); }
.ex-label { font-size: 12px; font-weight: 700; color: var(--text-muted); margin-bottom: -12px; }
.ex-input { width: 100%; padding: 16px; border: 0; border-radius: 14px; background: var(--card-surface); font-size: 17px; outline: 0; }
.ex-checking { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--map-blue); }
.ex-feedback { font-size: 15px; font-weight: 600; line-height: 1.35; }
.ex-actions { display: flex; align-items: center; gap: 12px; }
.ex-actions .btn-primary { width: auto; min-width: 170px; padding-inline: 24px; }
.ex-round { font-size: 12px; font-weight: 600; color: var(--map-blue); }
.tappable { cursor: pointer; }
.pron-bar { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; background: var(--c-f5f9fc); }
.pron-bar b { font-size: 12px; color: var(--text-muted); }
.pron-bar button { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 99px; background: rgba(88,204,2,.15); color: var(--primary-green); font-size: 12px; font-weight: 700; }
.opts { display: flex; flex-direction: column; gap: 10px; }
.opt { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px; border-radius: 16px; background: var(--card-surface); border: 1px solid var(--c-d8e4ef); text-align: left; font-weight: 500; }
.opt i { position: relative; width: 22px; height: 22px; flex: none; border-radius: 50%; border: 2px solid var(--c-d8e4ef); }
.opt.selected, .opt.correct { border: 2px solid var(--map-blue); }
.opt.selected i, .opt.correct i { border-color: var(--map-blue); background: rgba(77,163,255,.08); }
.opt.selected i::after, .opt.correct i::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--map-blue); }
.opt.wrong { border: 2px solid var(--heart-red); }
.opt.wrong i { border-color: var(--heart-red); background: rgba(255,75,75,.08); }
.listen-big { display: flex; align-items: center; gap: 16px; width: 100%; padding: 20px; border-radius: 18px; background: var(--map-blue); color: #fff; text-align: left; }
.listen-big b { display: block; font-size: 17px; }
.listen-big small { font-size: 12px; opacity: .85; }
.tf-row { display: flex; gap: 16px; }
.tf { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px 8px; border-radius: 16px; border: 1px solid var(--field-border); background: var(--card-surface); font-size: 17px; }
.tf.on { color: var(--tint); border: 2px solid var(--tint); background: color-mix(in srgb, var(--tint) 12%, transparent); }
.chip-box, .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-box { min-height: 60px; padding: 12px; border-radius: 14px; background: var(--card-surface); border: 1px solid rgba(77,163,255,.25); align-content: flex-start; }
.chip { padding: 10px 14px; border-radius: 10px; font-weight: 600; background: var(--card-surface); border: 1px solid var(--field-border); }
.chip.on { background: var(--map-blue); border-color: var(--map-blue); color: #fff; }
.speak-phrase { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px; border-radius: 16px; background: rgba(77,163,255,.08); font-size: 20px; font-weight: 600; text-align: left; line-height: 1.3; }
.speak-status { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 16px; background: var(--c-f5f9fc); font-size: 15px; }
.btn-mic { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 16px; border-radius: 18px; background: var(--primary-green); color: #fff; font-size: 17px; font-weight: 700; }
.btn-mic.on { background: var(--heart-red); }
.ex-card > .btn-answer { margin-top: 0; }

/* Games */
.games { background: var(--surface); padding: 18px; }
.games > * { max-width: 560px; margin-left: auto; margin-right: auto; }
.games header { position: relative; padding: 18px 0; text-align: center; }
.games h1 { font-size: 26px; color: var(--text-strong); }
.games-coins { position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 6px; font-size: 17px; }
.games-coins img { width: 28px; height: 28px; object-fit: contain; }
.games-list { display: flex; flex-direction: column; gap: 18px; }
.game-tile { position: relative; display: block; width: 100%; height: 156px; border-radius: 28px; overflow: hidden; color: #fff; text-align: left; }
.game-tile img { position: absolute; right: -10%; top: -8px; width: 57%; height: 170px; object-fit: contain; }
.game-tile > div { position: absolute; left: 18px; top: 0; bottom: 0; width: 53%; display: flex; flex-direction: column; justify-content: center; gap: 9px; }
.game-tile b { font-size: 24px; line-height: 1.1; }
.game-tile p { font-size: 13px; font-weight: 500; opacity: .9; }
.game-tile small { font-size: 11px; font-weight: 600; opacity: .8; }
.game-cover { background: var(--game-bg); }
.game-holder { height: 100%; }
.game-loading, .game-finished { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px; text-align: center; color: var(--ink); }
.game-finished { max-width: 420px; margin: 0 auto; }
.game-finished h1 { font-size: 34px; }
.game-screen { min-height: 100%; max-width: 480px; margin: 0 auto; display: flex; flex-direction: column; color: var(--ink); background: var(--game-bg); }
.game-card-wrap { flex: 1; display: flex; flex-direction: column; }
.game-top { display: flex; align-items: center; gap: 14px; padding: 12px 18px 18px; }
.game-x { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 16px; background: var(--surface); color: rgba(8,17,47,.8); }
.game-top.blue .game-x { color: var(--game-blue); }
.game-progress { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.game-progress > b { font-size: 16px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.game-bar-row { display: flex; align-items: center; gap: 10px; }
.game-bar-row span { font-size: 15px; font-weight: 600; color: var(--game-muted); white-space: nowrap; }
.game-bar { flex: 1; height: 12px; border-radius: 99px; background: var(--c-e1e6f2); overflow: hidden; }
.game-bar.thin { height: 9px; }
.game-bar > div { height: 100%; border-radius: 99px; background: var(--game-purple); transition: width .2s; }
.game-top.blue .game-bar > div, .game-bar.blue > div { background: var(--game-blue); }
.game-hearts { display: flex; align-items: center; gap: 6px; height: 44px; padding: 0 12px; border-radius: 99px; background: var(--surface); font-size: 20px; }
.game-hearts img { width: 25px; height: 25px; object-fit: contain; }
.game-hearts b { font-weight: 600; }
.game-more { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--surface); color: var(--game-blue); }
.game-body { flex: 1; padding: 0 18px 16px; display: flex; flex-direction: column; gap: 20px; }
.game-body h1 { font-size: 28px; padding-top: 12px; }
.game-sub { font-size: 16px; color: var(--game-muted); margin-top: 10px; }
.game-foot { padding: 12px 24px 26px; }
.game-foot.row { display: flex; gap: 8px; padding: 10px 20px 20px; background: var(--game-bg); position: sticky; bottom: 0; }
.game-primary { flex: 1; width: 100%; min-height: 54px; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 20px; border-radius: 99px; background: var(--game-purple); color: #fff; font-size: 18px; font-weight: 600; }
.game-primary.blue { background: var(--game-blue); }
.game-primary:disabled { background: var(--c-d4d9e9); }
.game-replay { width: 84px; height: 60px; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-radius: 23px; background: var(--surface); }
.game-replay small { font-size: 10px; color: var(--game-muted); }
.match-grid { display: flex; gap: 20px; }
.match-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.match-head { display: flex; align-items: center; justify-content: center; gap: 9px; height: 48px; border-radius: 18px; background: rgba(131,86,255,.055); font-size: 15px; }
.match-head span { font-size: 25px; }
.match-word { display: flex; align-items: center; justify-content: space-between; gap: 6px; height: 55px; padding: 0 15px; border-radius: 19px; background: var(--surface); font-size: 17px; font-weight: 600; text-align: left; line-height: 1.1; }
.match-word span { min-width: 0; overflow: hidden; }
.match-word.on { background: rgba(131,86,255,.08); }
.match-word.done { background: rgba(52,199,89,.08); }
.match-word.wrong { background: rgba(255,59,48,.12); }
.game-card { padding: 20px; border-radius: 24px; background: var(--surface); display: flex; flex-direction: column; gap: 14px; }
.game-hint { font-size: 14px; font-weight: 500; color: var(--game-muted); }
.game-speak { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 14px; color: var(--game-purple); background: rgba(131,86,255,.12); }
.game-prompt { display: flex; align-items: flex-end; gap: 14px; }
.game-prompt-text { flex: 1; min-width: 0; font-size: 21px; font-weight: 600; text-align: left; line-height: 1.25; align-self: center; }
.game-prompt-text.small { font-size: 19px; }
.game-options { display: flex; flex-direction: column; gap: 12px; }
.game-option { display: flex; align-items: center; justify-content: space-between; min-height: 58px; padding: 8px 18px; border-radius: 20px; border: 1.5px solid var(--tint); font-size: 21px; font-weight: 600; text-align: left; }
.order { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.order-box { width: 100%; min-height: 92px; padding: 15px; border-radius: 24px; background: var(--surface); display: flex; flex-wrap: wrap; gap: 7px; align-content: flex-start; }
.order-pool { display: flex; flex-wrap: wrap; gap: 10px; }
.token { padding: 11px 14px; border-radius: 17px; background: var(--surface); font-size: 17px; font-weight: 600; }
.token.on { background: var(--c-eaf0f9); }
.slot { display: block; width: 94px; height: 40px; border-radius: 14px; background: var(--c-eaf0f9); }
.slot.small { width: 70px; }
.vocab h2 { font-size: 20px; padding-top: 8px; }
.vocab .game-sub { font-size: 15px; margin: 8px 0 14px; }
.vocab-hero { display: flex; align-items: center; height: 190px; margin: -10px 0 -8px; }
.vocab-hero > b { flex: 1; text-align: center; font-size: 20px; transform: rotate(-7deg); padding: 22px; border-radius: 30px; background: rgba(0,156,255,.09); margin-right: 12px; }
.vocab-card { padding: 20px; border-radius: 25px; background: var(--surface); display: flex; flex-direction: column; align-items: center; gap: 14px; }
.vocab-top { width: 100%; display: flex; align-items: center; justify-content: space-between; }
.vocab-top span { padding: 9px 14px; border-radius: 99px; background: rgba(0,156,255,.06); color: var(--game-blue); font-size: 12px; font-weight: 700; }
.vocab-top button { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--game-bg); color: var(--game-blue); }
.vocab-word { font-size: 43px; font-weight: 800; line-height: 1.1; text-align: center; overflow-wrap: anywhere; }
.vocab-translation { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 99px; background: rgba(0,156,255,.075); color: var(--game-blue); font-size: 25px; font-weight: 700; }
.vocab-card hr { width: 100%; height: 1px; border: 0; background: var(--c-e2eaf4); margin: 4px 0 0; }
.vocab-meaning { width: 100%; display: flex; gap: 18px; padding: 18px; border-radius: 19px; background: var(--game-bg); font-size: 16px; }
.vocab-meaning span { color: var(--game-muted); }
.vocab-meaning p { margin-top: 6px; color: var(--text-strong); line-height: 1.3; }

/* Word search */
.search { min-height: 100%; display: flex; flex-direction: column; gap: 10px; padding: 8px 14px 12px; background-color: #EBC69E; background-size: cover; background-position: center; color: #08142F; }
.search > * { width: 100%; max-width: 420px; margin: 0 auto; }
.search-top { display: flex; align-items: center; gap: 12px; }
.search-back { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 17px; background: rgba(255,255,255,.93); }
.search-progress { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; font-size: 16px; }
.search-progress span { font-size: 13px; color: #57647D; }
.search-bar { flex: 1; height: 12px; border-radius: 99px; background: #DCE2EC; overflow: hidden; border: 1px solid #fff; }
.search-bar > div { height: 100%; background: #0DC685; border-radius: 99px; transition: width .2s; }
.search-hearts { width: 70px; height: 46px; flex: none; display: flex; align-items: center; justify-content: center; gap: 6px; border-radius: 19px; background: rgba(255,255,255,.93); font-size: 23px; }
.search-board { position: relative; padding: 18px; border-radius: 32px; border: 1.5px solid rgba(255,255,255,.9); background: linear-gradient(135deg, rgba(255,255,255,.93), rgba(229,234,229,.96)); box-shadow: 0 8px 14px rgba(156,136,112,.17); }
.search-grid { display: grid; aspect-ratio: 1; touch-action: none; user-select: none; }
.search-cell { position: relative; margin: 3px; display: grid; place-items: center; border-radius: 22%; --tint: #F8F9FA; background: linear-gradient(135deg, #fff, #F1F3F4); box-shadow: 0 4px 5px rgba(181,183,187,.3); font: 700 clamp(14px, 5.5vmin, 30px) ui-rounded, -apple-system, sans-serif; cursor: pointer; }
.search-cell.lit { background: linear-gradient(135deg, color-mix(in srgb, var(--tint) 70%, transparent), var(--tint)); box-shadow: 0 4px 9px color-mix(in srgb, var(--tint) 70%, transparent); outline: 1.5px solid #fff; }
.search-cell.chosen { color: #fff; }
.search-lines { position: absolute; left: 18px; top: 18px; pointer-events: none; }
.search-words { padding: 14px; border-radius: 28px; background: rgba(255,255,255,.93); display: flex; flex-direction: column; gap: 6px; }
.search-words-head { display: flex; justify-content: space-between; align-items: center; font-size: 15px; }
.search-words-head strong { font-size: 17px; color: #08B978; }
.search-feedback { min-height: 16px; font-size: 13px; font-weight: 700; color: #FF3B30; }
.search-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.search-word { display: flex; align-items: center; gap: 6px; height: 55px; padding: 0 8px; border-radius: 14px; border: 1px solid; }
.search-word > i { width: 25px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 8px; }
.search-word > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.search-word b { font-size: 12px; }
.search-word span { font-size: 11px; font-weight: 500; color: #57647D; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-bottom { display: flex; gap: 10px; }
.search-hint { position: relative; width: 90px; height: 64px; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 25px; background: rgba(255,255,255,.95); }
.search-hint:disabled { opacity: .6; }
.search-hint small { font-size: 12px; font-weight: 600; color: #57647D; }
.search-hint em { position: absolute; right: -2px; top: -5px; width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid #fff; background: #00BF80; color: #fff; font-size: 14px; font-weight: 700; font-style: normal; }
.search-next { flex: 1; height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; border-radius: 99px; border: 1.5px solid #fff; background: linear-gradient(135deg, #22B6FF, #008EFF); color: #fff; font-size: 17px; font-weight: 700; box-shadow: 0 6px 10px rgba(0,123,204,.18); }

/* Leaderboard */
.board { background: var(--c-f5f6ff); padding: 8px 18px 40px; display: flex; flex-direction: column; gap: 18px; }
.board > * { width: 100%; max-width: 560px; margin-left: auto; margin-right: auto; }
.board-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.board-head > div { text-align: center; min-width: 0; }
.board-head h1 { font-size: 23px; font-weight: 800; color: var(--c-101844); }
.board-head p { font-size: 14px; font-weight: 500; color: #8992B0; margin-top: 3px; }
.board-back { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 50%; color: var(--c-101844); background: var(--surface); }
.board-menu { display: flex; align-items: center; gap: 6px; height: 42px; padding: 0 11px; border-radius: 99px; background: var(--surface); color: var(--c-17204d); font-size: 12px; font-weight: 600; white-space: nowrap; flex: none; }
.board-periods { display: flex; gap: 4px; padding: 5px; border-radius: 99px; background: var(--surface); }
.board-periods button { flex: 1; height: 45px; border-radius: 15px; font-size: 14px; font-weight: 600; color: var(--c-697391); }
.board-periods .on { color: #fff; background: linear-gradient(135deg, #9D72FF, #7851E8); box-shadow: 0 4px 8px rgba(121,83,232,.24); }
.board-select { padding: 10px 12px; border: 0; border-radius: 12px; background: var(--surface); color: #007AFF; }
.board-error { font-size: 14px; color: #8E8E93; }
.rank { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: 20px; background: var(--surface); }
.rank > b { font-size: 20px; color: #8E8E93; }
.rank > b.top { color: #FF9500; }
.rank > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.rank strong { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank span { font-size: 12px; color: #8E8E93; font-variant-numeric: tabular-nums; }
.rank em { font-size: 17px; font-weight: 600; font-style: normal; color: #007AFF; white-space: nowrap; }
.empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 48px 16px; text-align: center; color: #8E8E93; }

/* Profile */
.profile { background: var(--c-f2f8ff); }
.profile-backdrop { position: absolute; left: 0; right: 0; top: 0; height: 258px; overflow: hidden; background: linear-gradient(135deg, #27B9FF, #087BFA, #0754E8); border-radius: 0 0 50% 50% / 0 0 34px 34px; }
.profile-backdrop::after { content: ''; position: absolute; right: -60px; top: -162px; width: 300px; height: 300px; border-radius: 50%; border: 24px solid rgba(255,255,255,.12); }
.profile-content { position: relative; max-width: 560px; margin: 0 auto; padding: 10px 16px 24px; display: flex; flex-direction: column; gap: 14px; }
.profile-top { display: flex; align-items: center; gap: 12px; padding-bottom: 8px; }
.profile-top h1 { font-size: 34px; color: #fff; }
.profile-crown { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; border: 2px solid rgba(255,255,255,.9); background: linear-gradient(135deg, #FFD76A, #FF9D16); color: #fff; }
.profile-action { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--surface); color: var(--c-173c70); }
.profile-card { display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: 25px; background: var(--surface); box-shadow: 0 7px 16px rgba(128,178,232,.18); }
.profile-avatar { position: relative; flex: none; }
.profile-avatar > span { display: block; width: 76px; height: 76px; border-radius: 50%; overflow: hidden; background: var(--c-f0f5fa); border: 3px solid #D9ECFF; }
.profile-avatar > i { position: absolute; right: -2px; bottom: -2px; width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; border: 2px solid #fff; background: #1474F5; color: #fff; }
.profile-who { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.profile-who b { font-size: 20px; color: var(--c-101b32); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-who > span { font-size: 15px; color: #8398B2; }
.profile-who em { display: inline-flex; align-items: center; gap: 5px; padding: 6px 9px; border-radius: 99px; background: var(--c-eff6ff); color: var(--c-466382); font-size: 12px; font-weight: 500; font-style: normal; }
.profile-premium { display: flex; align-items: center; gap: 6px; flex: none; padding: 13px 9px; border-radius: 99px; background: linear-gradient(135deg, #FFF1B9, #FFE18C); color: #263851; font-size: 13px; font-weight: 700; }
.profile-premium img { width: 27px; height: 22px; object-fit: contain; }
.profile-premium.free { background: var(--c-e6f2ff); color: #1788FF; padding-inline: 14px; }
.profile-banner { position: relative; display: flex; align-items: center; gap: 12px; height: 112px; padding: 0 14px; border-radius: 25px; overflow: hidden; background: linear-gradient(135deg, #167DFF, #064BEA); color: #fff; text-align: left; }
.profile-banner::before { content: ''; position: absolute; right: -60px; top: -70px; width: 190px; height: 190px; border-radius: 50%; background: rgba(255,255,255,.08); }
.profile-banner > img:first-child { width: 64px; height: 64px; object-fit: contain; flex: none; }
.profile-banner > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.profile-banner b { font-size: 17px; }
.profile-banner span { font-size: 10px; font-weight: 500; opacity: .94; }
.banner-crown { position: relative; width: 88px; height: 72px; object-fit: contain; flex: none; }
.profile-banner > i { position: relative; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.17); flex: none; }
.dash { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dash-stat { display: flex; align-items: center; gap: 11px; min-height: 78px; padding: 11px; border-radius: 23px; background: var(--surface); box-shadow: 0 5px 12px rgba(128,178,232,.12); text-align: left; min-width: 0; }
.dash-stat > i { width: 52px; height: 52px; flex: none; display: grid; place-items: center; border-radius: 17px; }
.dash-stat > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.dash-stat b { font-size: 20px; color: var(--c-111b31); white-space: nowrap; }
.dash-stat span { font-size: 12px; font-weight: 500; color: #7E94B0; }
.dash-row { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 23px; background: linear-gradient(135deg, var(--surface), var(--c-fff9e9)); }
.dash-row hr { width: 1px; height: 42px; border: 0; background: #FFE7AA; margin: 0; }
.dash-compact { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.dash-compact img { width: 42px; height: 42px; object-fit: contain; }
.dash-compact > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dash-compact b { font-size: 18px; color: var(--c-111b31); }
.dash-compact span { font-size: 10px; font-weight: 500; color: #7E94B0; }
.progress-card { padding: 18px; border-radius: 24px; background: var(--surface); display: flex; flex-direction: column; gap: 16px; }
.progress-card > small { color: #8E8E93; font-size: 12px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.panel-head b { font-size: 17px; }
.panel-head small { display: block; font-size: 12px; color: #8E8E93; margin-top: 5px; }
.panel-head > span { font-size: 12px; font-weight: 700; color: #007AFF; }
.panel-head button { font-size: 12px; font-weight: 700; color: var(--map-blue); }
.bars { display: flex; gap: 10px; height: 155px; }
.bar-col { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bar-track { flex: 1; display: flex; align-items: flex-end; border-bottom: 1px solid #E8EEF4; }
.bar-track i { display: block; width: 100%; min-height: 0; border-radius: 6px 6px 0 0; background: linear-gradient(#32ADE6, #007AFF); }
.bar-col small { font-size: 11px; color: #8E8E93; text-align: center; }
.progress-line { height: 4px; border-radius: 99px; background: var(--c-e5e5ea); overflow: hidden; }
.progress-line > div { height: 100%; background: #34C759; }
.progress-cells { display: flex; gap: 5px; }
.progress-cells i { flex: 1; height: 12px; border-radius: 3px; background: rgba(0,122,255,.08); }
.progress-cells i.on { background: #34C759; }
.student-id { font-size: 12px; color: #007AFF; font-variant-numeric: tabular-nums; }
.panel { padding: 16px; border-radius: 20px; background: var(--surface); color: var(--text-primary); box-shadow: 0 4px 10px var(--pill-shadow); display: flex; flex-direction: column; gap: 12px; }
.badges { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; }
.badge { flex: none; width: 72px; display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--text-muted); font-size: 9px; font-weight: 600; text-align: center; }
.badge.on { color: var(--text-primary); }
.hex { width: 56px; height: 62px; display: grid; place-items: center; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: color-mix(in srgb, var(--a) 15%, transparent); }
.badge.on .hex { background: color-mix(in srgb, var(--a) 25%, transparent); }
.hex > div { width: 44px; height: 50px; display: grid; place-items: center; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: linear-gradient(135deg, var(--c-d8e4ef), #B8CADA); color: var(--text-muted); }
.badge.on .hex > div { background: linear-gradient(135deg, var(--a), var(--b)); color: #fff; }

/* Stats, settings */
.stats, .settings, .characters { padding: 0 16px 24px; display: flex; flex-direction: column; gap: 16px; }
.settings { background: var(--list-bg); min-height: 100%; gap: 6px; }
.stats { background: var(--c-f7faff); color: var(--text-primary); }
.sheet-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 -16px; padding: 14px 16px; background: inherit; }
.sheet-head b { font-size: 17px; }
.sheet-head button { color: #007AFF; font-size: 17px; }
.sheet-head > i { width: 40px; }
.stats-hero { display: flex; align-items: center; gap: 12px; padding: 18px; border-radius: 22px; background: linear-gradient(135deg, var(--c-eaf4ff), var(--c-f5faff)); box-shadow: 0 4px 10px var(--pill-shadow); }
.stats-hero > div { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.stats-hero h3 { font-size: 20px; }
.stats-hero p { font-size: 15px; color: var(--text-muted); }
.stats-hero b { font-size: 12px; color: var(--streak-orange); }
.stats-hero img { width: 80px; height: 80px; object-fit: contain; flex: none; }
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stat-tile { padding: 14px; border-radius: 18px; display: flex; flex-direction: column; gap: 10px; }
.stat-tile i { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; }
.stat-tile b { font-size: 20px; }
.stat-tile span { font-size: 12px; color: var(--text-muted); }
.stats-pair { display: flex; gap: 12px; align-items: flex-start; }
.stats-pair > .panel:first-child { flex: 1; min-width: 0; }
.accuracy { width: 150px; flex: none; align-items: center; text-align: center; }
.ring { width: 90px; height: 90px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--map-blue) var(--p), var(--field-border) 0); }
.ring > div { width: 70px; height: 70px; border-radius: 50%; background: var(--surface); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ring strong { font-size: 20px; }
.ring small { font-size: 11px; color: var(--text-muted); }
.accuracy p { width: 100%; display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-muted); }
.accuracy p i { width: 8px; height: 8px; border-radius: 50%; }
.accuracy p b { margin-left: auto; color: var(--text-primary); }
.skill-row { display: flex; align-items: center; gap: 8px; }
.skill-row > i { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 6px; }
.skill-row > div { flex: 1; min-width: 0; }
.skill-row p { display: flex; justify-content: space-between; font-size: 12px; font-weight: 600; margin-bottom: 4px; }
.skill-row small { font-size: 11px; color: var(--text-muted); }
.skill-bar { height: 6px; border-radius: 99px; background: rgba(216,228,239,.5); overflow: hidden; }
.skill-bar > div { height: 100%; border-radius: 99px; }
.stats-banner { display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 18px; background: var(--c-f3eeff); }
.stats-banner > div { flex: 1; }
.stats-banner b { font-size: 15px; }
.stats-banner p { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.list-title { padding: 14px 16px 6px; font-size: 13px; opacity: .6; }
.list { border-radius: 12px; overflow: hidden; background: var(--row-bg); }
.list-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 46px; padding: 11px 16px; text-align: left; font-size: 17px; }
.list-row + .list-row { border-top: .5px solid var(--row-line); }
.list-row > span { flex: 1; }
.list-row > small { opacity: .6; }
.list-row input:not([type='checkbox']) { flex: 1; min-width: 0; border: 0; background: none; outline: 0; font-size: 17px; }
.list-row select { border: 0; background: none; color: #8E8E93; font-size: 17px; }
.list-row .icon { color: #007AFF; }
.list-row.danger, .list-row.danger .icon { color: #FF3B30; }
.list.about { margin-top: 14px; }
.list.about img { width: 34px; height: 34px; border-radius: 8px; }
.list.about b { display: block; font-size: 15px; font-weight: 600; }
.list.about small { font-size: 12px; opacity: .6; }
.switch { appearance: none; position: relative; width: 51px; height: 31px; flex: none; margin: 0; border-radius: 99px; background: #E9E9EA; cursor: pointer; transition: background .2s; }
.switch::after { content: ''; position: absolute; left: 2px; top: 2px; width: 27px; height: 27px; border-radius: 50%; background: var(--surface); box-shadow: 0 2px 4px rgba(0,0,0,.2); transition: transform .2s; }
.switch:checked { background: #34C759; }
.switch:checked::after { transform: translateX(20px); }
.characters { background: var(--c-f4f8ff); color: var(--text-primary); }
.character-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; justify-items: center; padding: 8px 0 12px; }
.character-cell { width: 150px; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; }
.character-face { width: 132px; height: 132px; display: grid; place-items: center; border-radius: 50%; overflow: hidden; background: var(--c-f0f5fa); }
.character-cell.on { color: var(--map-blue); }
.character-cell.on .character-face { background: rgba(77,163,255,.15); box-shadow: inset 0 0 0 3px var(--map-blue); }
.stepper { display: flex; border-radius: 8px; overflow: hidden; background: var(--c-eeeef0); color: var(--text-strong); }
.stepper button { width: 46px; height: 32px; font-size: 20px; }
.stepper button:disabled { opacity: .3; }
.checkout-total { padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.checkout-total small { font-size: 12px; opacity: .65; }
.settings > .btn-primary { margin-top: 8px; }

/* Gift shop */
.shop-cover { background: var(--c-f4f8ff); }
.shop { max-width: 560px; margin: 0 auto; padding: 8px 20px 32px; display: flex; flex-direction: column; gap: 20px; color: var(--text-strong); }
.shop-bar button { color: #007AFF; font-size: 17px; padding: 6px 0; }
.shop-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.shop-title h1 { font-size: 28px; }
.shop-title span { display: flex; align-items: center; gap: 6px; color: #FF9500; font-size: 17px; font-weight: 600; }
.shop-title img { width: 22px; height: 22px; object-fit: contain; }
.shop-sub { color: #8E8E93; }
.shop h2 { font-size: 22px; }
.prize { display: flex; align-items: center; gap: 16px; padding: 16px; border-radius: 22px; background: var(--surface); }
.prize img, .prize > i { width: 100px; height: 100px; flex: none; display: grid; place-items: center; object-fit: cover; border-radius: 18px; }
.prize > div { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.prize b { font-size: 17px; }
.prize p { color: #8E8E93; }
.shop-btn { padding: 8px 14px; border-radius: 99px; background: #007AFF; color: #fff; font-weight: 600; }
.shop-btn:disabled { background: #D1D1D6; }
.shop-btn.outline { background: rgba(0,122,255,.12); color: #007AFF; align-self: flex-start; }
.shop-card { padding: 16px; border-radius: 20px; background: var(--surface); display: flex; flex-direction: column; gap: 8px; }
.shop-card b { font-size: 17px; }
.shop-card small { font-size: 12px; color: #8E8E93; }
.shop-card em { font-style: normal; color: #007AFF; }

/* Premium */
.dark-cover { background: #000; }
.pro { position: relative; min-height: 100%; max-width: 520px; margin: 0 auto; padding: 0 21px 14px; display: flex; flex-direction: column; background: linear-gradient(#338AFF, #16345E 168px, #000 280px); color: #fff; }
.pro-close { position: absolute; right: 14px; top: 10px; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: rgba(0,0,0,.14); color: rgba(255,255,255,.85); }
.pro-scroll { flex: 1; padding: 18px 3px 0; display: flex; flex-direction: column; gap: 24px; }
.pro-hero { display: flex; align-items: center; gap: 25px; padding: 0 0 46px 10px; }
.pro-hero img { width: 88px; height: 88px; object-fit: contain; }
.pro-hero h1 { font-size: 36px; }
.pro-benefit { display: flex; align-items: flex-start; gap: 16px; min-height: 60px; }
.pro-benefit img { width: 44px; height: 44px; object-fit: contain; flex: none; }
.pro-benefit b { font-size: 19px; font-weight: 600; }
.pro-benefit p { font-size: 12px; color: #737373; margin-top: 3px; }
.pro-plans { display: flex; flex-direction: column; gap: 12px; padding-top: 20px; }
.pro-plan { position: relative; display: flex; align-items: flex-end; height: 68px; padding: 18px 10px 6px; border-radius: 18px; border: 2px solid #737373; background: #323232; color: #fff; }
.pro-plan.on { background: #214888; border-color: #2D76FF; }
.pro-plan span { font-size: 16px; font-weight: 600; }
.pro-plan b { flex: 1; font-size: 23px; font-weight: 600; color: #B5AB9D; padding-bottom: 13px; text-align: center; }
.pro-plan em { position: absolute; right: -1px; top: -13px; padding: 4px 7px; border-radius: 5px; background: #FFED00; color: #000; font-size: 15px; font-weight: 700; font-style: normal; transform: rotate(-5deg); }
.pro-subscribe { width: 100%; height: 52px; margin-top: 32px; border-radius: 99px; background: #2D76FF; color: #fff; font-size: 16px; font-weight: 700; box-shadow: 0 4px 0 #143D80; }