:root {
  --bg: #f7f8fb;
  --surface: #ffffff;
  --surface-soft: #f0f3f8;
  --ink: #172033;
  --muted: #657085;
  --line: #dfe4ec;
  --primary: #3358d4;
  --primary-dark: #2445b2;
  --primary-soft: #e9edff;
  --accent: #f5b642;
  --accent-soft: #fff4d8;
  --success: #168568;
  --success-soft: #e4f7f0;
  --danger: #bc3f4b;
  --danger-soft: #ffebed;
  --navy: #111d38;
  --navy-2: #19294c;
  --shadow-sm: 0 8px 28px rgba(25, 41, 76, 0.08);
  --shadow-md: 0 22px 60px rgba(25, 41, 76, 0.14);
  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: 28px;
  --container: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
body.modal-open { overflow: hidden; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
button { color: inherit; }
:focus-visible { outline: 3px solid rgba(51, 88, 212, .3); outline-offset: 2px; }
.container { width: min(calc(100% - 40px), var(--container)); margin: 0 auto; }
.narrow-container { width: min(calc(100% - 40px), 780px); }
.section-pad { padding: 96px 0; }
.page-main { min-height: 68vh; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .92);
  border-bottom: 1px solid rgba(223, 228, 236, .8);
  backdrop-filter: blur(18px);
}
.header-inner { min-height: 76px; display: flex; align-items: center; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 11px; min-width: 225px; }
.brand-mark { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; color: white; background: linear-gradient(135deg, var(--primary), #6c83ed); box-shadow: 0 9px 24px rgba(51, 88, 212, .25); }
.brand-mark svg { width: 26px; height: 26px; }
.brand-copy { display: grid; line-height: 1.18; }
.brand-copy strong { font-size: .98rem; letter-spacing: -.01em; }
.brand-copy small { margin-top: 4px; color: var(--muted); font-size: .72rem; }
.desktop-nav { flex: 1; display: flex; justify-content: center; gap: 6px; }
.nav-link { padding: 10px 14px; border-radius: 9px; color: var(--muted); font-weight: 650; font-size: .91rem; transition: .2s ease; }
.nav-link:hover, .nav-link.is-active { color: var(--primary); background: var(--primary-soft); }
.header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 225px; }
.account-chip { border: 0; background: transparent; padding: 4px 8px 4px 4px; border-radius: 13px; display: flex; align-items: center; gap: 8px; cursor: pointer; text-align: left; }
.account-chip:hover { background: var(--surface-soft); }
.account-chip > span:last-child { display: grid; line-height: 1.15; }
.account-chip strong { font-size: .82rem; }
.account-chip small { color: var(--muted); font-size: .68rem; margin-top: 3px; }
.avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); font-weight: 800; font-size: .82rem; flex: 0 0 auto; }
.avatar.small { width: 32px; height: 32px; font-size: .72rem; }
.avatar.large { width: 58px; height: 58px; font-size: 1.05rem; }
.mobile-menu-button, .mobile-nav { display: none; }

.btn { border: 1px solid transparent; border-radius: 11px; min-height: 44px; padding: 0 18px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-weight: 750; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn-primary { background: var(--primary); color: white; box-shadow: 0 10px 24px rgba(51, 88, 212, .22); }
.btn-primary:hover { background: var(--primary-dark); box-shadow: 0 12px 28px rgba(51, 88, 212, .28); }
.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn-secondary:hover { border-color: #bbc4d4; background: #fafbfc; }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--surface-soft); }
.btn-light { background: white; color: var(--navy); box-shadow: 0 12px 30px rgba(5, 15, 35, .18); }
.btn-danger-ghost { color: var(--danger); background: var(--danger-soft); }
.btn-google { background: white; border-color: var(--line); }
.btn-google svg { width: 20px; height: 20px; }
.btn-large { min-height: 54px; padding: 0 24px; border-radius: 13px; }
.btn-small { min-height: 36px; padding: 0 13px; font-size: .82rem; border-radius: 9px; }
.btn-block { width: 100%; }
.icon-button { width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 10px; background: transparent; cursor: pointer; }
.icon-button:hover { background: var(--surface-soft); }
.icon-button svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.icon-button.danger { color: var(--danger); }
.link-button { padding: 0; border: 0; background: transparent; color: var(--primary); font-weight: 750; cursor: pointer; }
.link-button:hover { text-decoration: underline; }

.demo-banner { background: #fff8e8; border-bottom: 1px solid #f1dfad; color: #59430f; }
.demo-banner-inner { min-height: 44px; display: flex; align-items: center; gap: 18px; font-size: .79rem; }
.demo-credentials { flex: 1; color: #755b19; }
.demo-credentials code { padding: 2px 5px; background: rgba(255,255,255,.7); border-radius: 5px; }
.demo-actions { display: flex; gap: 12px; }
.demo-actions .link-button { color: #755b19; font-size: .78rem; }

.hero { position: relative; overflow: hidden; padding-top: 82px; background: linear-gradient(180deg, #fff 0%, #f7f8fb 100%); }
.hero-grid { display: grid; grid-template-columns: 1.03fr .97fr; align-items: center; gap: 68px; position: relative; z-index: 1; }
.hero-copy h1 { margin: 14px 0 22px; max-width: 720px; font-size: clamp(2.75rem, 5.3vw, 5rem); line-height: .98; letter-spacing: -.058em; }
.hero-lead { max-width: 650px; margin: 0; color: var(--muted); font-size: 1.14rem; line-height: 1.72; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; color: var(--primary); text-transform: uppercase; letter-spacing: .12em; font-weight: 800; font-size: .72rem; }
.eyebrow span { width: 28px; height: 2px; background: currentColor; border-radius: 2px; }
.eyebrow.light { color: #bfcafd; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 31px; }
.hero-note { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .84rem; margin: 20px 0 0; }
.hero-note svg { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: var(--success); stroke-width: 1.8; stroke-linejoin: round; }
.hero-metrics { margin-top: 42px; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); padding-top: 23px; gap: 20px; }
.hero-metrics div { display: grid; gap: 4px; }
.hero-metrics strong { font-size: .96rem; }
.hero-metrics span { color: var(--muted); font-size: .77rem; }
.hero-visual { position: relative; min-height: 560px; display: grid; place-items: center; }
.math-board { width: min(100%, 490px); min-height: 530px; padding: 26px; position: relative; border-radius: 30px; color: white; background: linear-gradient(145deg, var(--navy), #263b6c); box-shadow: 0 34px 85px rgba(17, 29, 56, .28); transform: rotate(1deg); }
.math-board::before { content: ""; position: absolute; inset: 13px; border: 1px solid rgba(255,255,255,.08); border-radius: 22px; pointer-events: none; }
.board-top { display: flex; align-items: center; gap: 8px; color: #d8dfff; font-size: .76rem; position: relative; z-index: 1; }
.online-dot { width: 8px; height: 8px; background: #47d8a3; border-radius: 50%; box-shadow: 0 0 0 5px rgba(71,216,163,.12); }
.board-badge { margin-left: auto; border: 1px solid rgba(255,255,255,.16); border-radius: 20px; padding: 5px 9px; }
.equation-card { position: relative; z-index: 1; margin-top: 50px; padding: 24px; border-radius: 18px; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(10px); }
.equation-card span { display: block; color: #aebbec; font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; }
.equation-card strong { display: block; margin-top: 14px; font-family: Georgia, serif; font-size: 1.7rem; letter-spacing: .03em; }
.solution-line { height: 8px; width: 90%; background: rgba(255,255,255,.13); border-radius: 10px; margin-top: 25px; }
.solution-line.short { width: 58%; margin-top: 10px; }
.teacher-card { position: relative; z-index: 1; margin-top: 16px; padding: 17px; border-radius: 16px; display: flex; align-items: center; gap: 13px; background: white; color: var(--ink); box-shadow: 0 16px 35px rgba(0,0,0,.18); }
.teacher-avatar { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--accent-soft); color: #8a5b00; font-weight: 850; }
.teacher-card div:last-child { display: grid; gap: 3px; }
.teacher-card strong { font-size: .86rem; }
.teacher-card span { color: var(--muted); font-size: .72rem; }
.progress-card { position: relative; z-index: 1; margin-top: 16px; padding: 18px; border-radius: 16px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1); }
.progress-card > div:first-child { display: flex; justify-content: space-between; font-size: .78rem; }
.progress-track { height: 8px; margin-top: 11px; background: rgba(255,255,255,.12); border-radius: 20px; overflow: hidden; }
.progress-track i { display: block; height: 100%; background: linear-gradient(90deg, #ffcc68, var(--accent)); border-radius: inherit; }
.floating-formula { position: absolute; z-index: 2; border-radius: 12px; padding: 11px 15px; background: white; color: var(--navy); font-family: Georgia, serif; font-weight: 700; box-shadow: var(--shadow-md); }
.formula-a { top: 105px; right: -34px; transform: rotate(5deg); }
.formula-b { left: -38px; bottom: 104px; transform: rotate(-5deg); }
.hero-orb { position: absolute; border-radius: 50%; filter: blur(4px); opacity: .5; }
.hero-orb-one { width: 380px; height: 380px; right: -130px; top: -120px; background: radial-gradient(circle, #dfe4ff, transparent 68%); }
.hero-orb-two { width: 280px; height: 280px; left: -130px; bottom: -100px; background: radial-gradient(circle, #fff0c5, transparent 68%); }

.trust-strip { background: white; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.trust-grid { min-height: 92px; display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; }
.trust-grid > div { min-height: 46px; padding: 0 22px; display: flex; align-items: center; gap: 11px; border-right: 1px solid var(--line); font-size: .79rem; color: var(--muted); }
.trust-grid > div:first-child { padding-left: 0; }
.trust-grid > div:last-child { border: 0; }
.trust-grid svg { width: 22px; height: 22px; padding: 4px; border-radius: 50%; color: white; background: var(--success); fill: none; stroke: currentColor; stroke-width: 2.1; flex: 0 0 auto; }
.trust-grid strong { color: var(--ink); }
.section-heading { margin-bottom: 42px; }
.section-heading h2, .learning-panel h2, .faq-grid h2, .cta-panel h2 { margin: 12px 0 0; font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.08; letter-spacing: -.045em; }
.split-heading { display: grid; grid-template-columns: 1fr .84fr; align-items: end; gap: 70px; }
.split-heading p, .section-heading.centered p { margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.75; }
.centered { max-width: 700px; margin-left: auto; margin-right: auto; text-align: center; }
.centered .eyebrow { justify-content: center; }
.centered p { margin-top: 16px !important; }
.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.feature-card { min-height: 280px; padding: 28px; background: white; border: 1px solid var(--line); border-radius: var(--radius); transition: .22s ease; }
.feature-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: #cbd4e4; }
.feature-number { display: grid; place-items: center; width: 46px; height: 34px; border-radius: 20px; background: var(--primary-soft); color: var(--primary); font-size: .76rem; font-weight: 850; }
.feature-card h3 { margin: 44px 0 13px; font-size: 1.2rem; letter-spacing: -.02em; }
.feature-card p { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.72; }
.soft-section { background: #edf1f7; }
.learning-grid { display: grid; grid-template-columns: .95fr 1.05fr; align-items: center; gap: 85px; }
.learning-panel > p { color: var(--muted); line-height: 1.8; }
.check-list { list-style: none; padding: 0; margin: 30px 0 0; display: grid; gap: 16px; }
.check-list li { display: flex; gap: 12px; align-items: flex-start; }
.check-list svg { width: 21px; height: 21px; padding: 4px; color: var(--success); background: var(--success-soft); border-radius: 50%; fill: none; stroke: currentColor; stroke-width: 2; flex: 0 0 auto; }
.check-list span { color: #3b465a; }
.lesson-card-stack { display: grid; gap: 12px; }
.lesson-example-card { padding: 20px; border-radius: 16px; background: rgba(255,255,255,.68); border: 1px solid rgba(255,255,255,.85); display: flex; align-items: center; gap: 16px; }
.lesson-example-card > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: white; color: var(--primary); font-weight: 850; }
.lesson-example-card > div { display: grid; gap: 4px; }
.lesson-example-card small { color: var(--muted); }
.lesson-example-card.is-active { background: var(--navy); color: white; border-color: var(--navy); transform: translateX(-18px); box-shadow: var(--shadow-md); }
.lesson-example-card.is-active > span { background: var(--accent); color: var(--navy); }
.lesson-example-card.is-active small { color: #bdc7df; }
.price-card { margin-top: 8px; padding: 26px; border-radius: 20px; background: white; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.price-card > small { color: var(--muted); }
.price-card > strong { display: block; margin-top: 7px; font-size: 1.85rem; }
.price-card > strong span { font-size: .8rem; color: var(--muted); font-weight: 600; }
.price-card p { color: var(--muted); margin: 5px 0 15px; }
.trial-pill { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 18px; padding: 7px 10px; border-radius: 9px; color: #72500a; background: var(--accent-soft); font-size: .76rem; font-weight: 750; }
.trial-pill svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.review-card { padding: 28px; background: white; border: 1px solid var(--line); border-radius: var(--radius); }
.quote-mark { font-family: Georgia, serif; font-size: 3.4rem; color: var(--primary); line-height: .8; }
.review-card > p { min-height: 130px; color: #465166; line-height: 1.75; }
.review-result { display: flex; align-items: center; gap: 8px; color: var(--success); font-size: .77rem; font-weight: 750; }
.review-result svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.review-card footer { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 10px; font-size: .83rem; }
.faq-section { background: white; }
.faq-grid { display: grid; grid-template-columns: .75fr 1.25fr; gap: 80px; align-items: start; }
.faq-grid > div:first-child > p { color: var(--muted); }
.accordion-list { border-top: 1px solid var(--line); }
details { border-bottom: 1px solid var(--line); }
summary { list-style: none; padding: 24px 0; display: flex; justify-content: space-between; align-items: center; gap: 20px; cursor: pointer; font-weight: 750; }
summary::-webkit-details-marker { display: none; }
summary span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-soft); color: var(--primary); transition: transform .2s ease; }
details[open] summary span { transform: rotate(45deg); }
details p { margin: -4px 55px 24px 0; color: var(--muted); line-height: 1.75; }
.contact-section { background: linear-gradient(180deg, white 0%, #eef1f6 100%); }
.contact-grid { display: grid; grid-template-columns: 1.1fr .9fr; }
.cta-panel { padding: 58px; border-radius: 28px 0 0 28px; color: white; background: linear-gradient(145deg, var(--navy), #253b6b); }
.cta-panel p { max-width: 520px; color: #c7d0e7; line-height: 1.75; }
.contact-details { display: flex; gap: 20px; margin-top: 30px; font-size: .76rem; color: #b8c4e2; }
.contact-form { border-radius: 0 28px 28px 0; padding: 42px; box-shadow: none; }
.form-heading span { color: var(--primary); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.form-heading h3 { margin: 7px 0 22px; font-size: 1.55rem; }

label { display: grid; gap: 7px; font-size: .79rem; font-weight: 700; color: #3b465a; }
input, select, textarea { width: 100%; border: 1px solid #cfd6e2; border-radius: 10px; background: white; color: var(--ink); padding: 11px 12px; min-height: 44px; transition: border .18s, box-shadow .18s; }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(51, 88, 212, .11); outline: none; }
input:disabled { background: var(--surface-soft); color: var(--muted); }
label small { color: var(--muted); font-weight: 500; }
.contact-form label { margin-bottom: 15px; }
.form-privacy { display: block; margin-top: 12px; color: var(--muted); font-size: .68rem; line-height: 1.5; }
.honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.centered-text { text-align: center; }
.checkbox-inline { display: flex; grid-template-columns: none; align-items: center; gap: 9px; }
.checkbox-inline input { width: 17px; height: 17px; min-height: 0; padding: 0; }
.checkbox-inline a { color: var(--primary); }
.checkbox-card { padding: 14px; border: 1px solid var(--line); border-radius: 12px; display: flex; grid-template-columns: none; align-items: center; gap: 11px; cursor: pointer; }
.checkbox-card input { width: 18px; height: 18px; min-height: 0; padding: 0; }
.checkbox-card span { display: grid; gap: 2px; }
.checkbox-card small { color: var(--muted); font-size: .7rem; }

.page-hero { background: white; border-bottom: 1px solid var(--line); }
.compact-page-hero { padding: 66px 0 58px; text-align: center; }
.compact-page-hero h1 { max-width: 760px; margin: 13px auto 14px; font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1.04; letter-spacing: -.05em; }
.compact-page-hero p { max-width: 720px; margin: 0 auto; color: var(--muted); font-size: 1rem; }
.booking-section { padding-top: 50px; }
.booking-layout { display: grid; grid-template-columns: 1.35fr .65fr; gap: 22px; align-items: start; }
.booking-layout > * { min-width: 0; }
.booking-calendar, .booking-summary { min-width: 0; padding: 28px; }
.booking-summary { position: sticky; top: 100px; }
.booking-step-heading { display: flex; align-items: center; gap: 13px; }
.booking-step-heading h2 { margin: 0; font-size: 1.2rem; }
.booking-step-heading p { margin: 3px 0 0; color: var(--muted); font-size: .74rem; }
.step-number { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--primary); color: white; font-weight: 850; font-size: .8rem; }
.date-scroller { margin: 24px -4px 0; padding: 4px; display: grid; grid-auto-flow: column; grid-auto-columns: 72px; overflow-x: auto; gap: 8px; scrollbar-width: thin; }
.date-choice { min-height: 91px; padding: 10px 6px; display: grid; place-items: center; gap: 1px; border: 1px solid var(--line); border-radius: 12px; background: white; cursor: pointer; }
.date-choice:hover { border-color: #aeb9cc; }
.date-choice small, .date-choice span { color: var(--muted); font-size: .66rem; }
.date-choice strong { font-size: 1.26rem; }
.date-choice.is-selected { color: white; background: var(--primary); border-color: var(--primary); box-shadow: 0 8px 20px rgba(51,88,212,.2); }
.date-choice.is-selected small, .date-choice.is-selected span { color: #dfe5ff; }
.slot-heading { margin-top: 30px; padding-top: 23px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.slot-heading > div { display: grid; gap: 4px; }
.slot-heading strong { text-transform: capitalize; }
.slot-heading span { color: var(--muted); font-size: .74rem; }
.timezone-badge { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 20px; background: var(--surface-soft); }
.timezone-badge svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.slots-grid { margin-top: 17px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.slot-button { min-height: 78px; padding: 11px; display: grid; place-items: center; gap: 0; border: 1px solid var(--line); border-radius: 11px; background: white; cursor: pointer; }
.slot-button strong { font-size: 1rem; }
.slot-button span { color: var(--muted); font-size: .68rem; }
.slot-button small { margin-top: 2px; color: var(--success); font-size: .61rem; }
.slot-button:hover:not(:disabled) { border-color: var(--primary); background: var(--primary-soft); }
.slot-button.is-selected { color: white; background: var(--primary); border-color: var(--primary); }
.slot-button.is-selected span, .slot-button.is-selected small { color: #e2e7ff; }
.slot-button.is-disabled { opacity: .53; background: var(--surface-soft); cursor: not-allowed; }
.slot-button.is-disabled small { color: var(--muted); }
.booking-legend { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 16px; color: var(--muted); font-size: .67rem; }
.booking-legend span { display: flex; align-items: center; gap: 6px; }
.booking-legend i { width: 10px; height: 10px; border-radius: 3px; }
.legend-free { background: white; border: 1px solid #bfc8d6; }
.legend-selected { background: var(--primary); }
.legend-busy { background: #d7dce4; }
.summary-placeholder { min-height: 430px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.summary-illustration { width: 78px; height: 78px; display: grid; place-items: center; border-radius: 24px; background: var(--primary-soft); color: var(--primary); }
.summary-illustration svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.summary-placeholder h3 { margin: 20px 0 8px; }
.summary-placeholder p { margin: 0; color: var(--muted); font-size: .84rem; }
.price-summary { width: 100%; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; }
.price-summary span { color: var(--muted); }





.booking-form { display: grid; gap: 15px; }
.auth-required, .verification-required { padding: 19px; border-radius: 13px; background: var(--surface-soft); text-align: center; }
.auth-required p, .verification-required p { color: var(--muted); font-size: .78rem; }
.booking-total { padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 10px; }
.booking-total span { color: var(--muted); font-size: .74rem; }
.booking-total strong { font-size: 1.2rem; }
.booking-total small { grid-column: 1 / -1; color: var(--muted); font-size: .65rem; }
.booking-assurances { margin-top: 23px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.booking-assurances > div { padding: 18px; display: flex; gap: 12px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.7); }
.booking-assurances svg { width: 22px; height: 22px; flex: 0 0 auto; fill: none; stroke: var(--primary); stroke-width: 1.8; }
.booking-assurances span { display: grid; gap: 3px; }
.booking-assurances strong { font-size: .79rem; }
.booking-assurances small { color: var(--muted); font-size: .67rem; line-height: 1.45; }

.dashboard-hero, .admin-topbar { background: linear-gradient(135deg, var(--navy), #243b70); color: white; }
.dashboard-hero-inner, .admin-topbar-inner { min-height: 240px; display: flex; align-items: center; justify-content: space-between; gap: 35px; }
.dashboard-hero h1, .admin-topbar h1 { margin: 10px 0 7px; font-size: 2.5rem; letter-spacing: -.04em; }
.dashboard-hero p, .admin-topbar p { margin: 0; color: #c8d2ea; }
.dashboard-content, .admin-shell { padding-top: 42px; }
.dashboard-grid, .admin-layout { display: grid; grid-template-columns: 255px 1fr; gap: 22px; align-items: start; }
.dashboard-sidebar, .admin-sidebar { position: sticky; top: 100px; padding: 18px; }
.profile-summary, .admin-profile { display: flex; align-items: center; gap: 12px; padding: 4px 4px 18px; border-bottom: 1px solid var(--line); }
.profile-summary > div, .admin-profile > div { min-width: 0; display: grid; gap: 3px; }
.profile-summary strong, .admin-profile strong { font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profile-summary span, .admin-profile span { color: var(--muted); font-size: .68rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dashboard-nav, .admin-nav { display: grid; gap: 5px; margin-top: 14px; }
.dashboard-nav button, .admin-nav button { width: 100%; min-height: 45px; padding: 0 12px; border: 0; border-radius: 9px; background: transparent; display: flex; align-items: center; gap: 10px; color: var(--muted); cursor: pointer; text-align: left; font-weight: 650; font-size: .8rem; }
.dashboard-nav button:hover, .admin-nav button:hover { background: var(--surface-soft); color: var(--ink); }
.dashboard-nav button.is-active, .admin-nav button.is-active { background: var(--primary-soft); color: var(--primary); }
.dashboard-nav svg, .admin-nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.dashboard-nav i { margin-left: auto; min-width: 22px; padding: 2px 6px; border-radius: 10px; background: white; text-align: center; font-size: .63rem; font-style: normal; }
.dashboard-main, .admin-main { min-width: 0; }
.dashboard-section-heading, .admin-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.dashboard-section-heading h2, .admin-section-heading h2 { margin: 0; font-size: 1.65rem; letter-spacing: -.03em; }
.dashboard-section-heading p, .admin-section-heading p { margin: 5px 0 0; color: var(--muted); font-size: .82rem; }
.booking-list { display: grid; gap: 13px; }
.lesson-booking-card { padding: 22px; display: grid; grid-template-columns: 58px 1fr; gap: 18px; background: white; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.lesson-date-box { height: 68px; border-radius: 14px; display: grid; place-items: center; align-content: center; background: var(--primary-soft); color: var(--primary); line-height: 1; }
.lesson-date-box strong { font-size: 1.4rem; }
.lesson-date-box span { margin-top: 5px; font-size: .65rem; text-transform: uppercase; }
.lesson-title-row { display: flex; justify-content: space-between; gap: 20px; }
.lesson-title-row h3 { margin: 7px 0 0; font-size: 1.05rem; }
.lesson-time { font-size: .95rem; }
.status-pill { display: inline-flex; padding: 4px 8px; border-radius: 20px; font-size: .61rem; font-weight: 800; }
.status-booked { color: #815700; background: var(--accent-soft); }
.status-confirmed { color: var(--primary); background: var(--primary-soft); }
.status-completed { color: var(--success); background: var(--success-soft); }
.status-cancelled, .status-no-show { color: var(--danger); background: var(--danger-soft); }
.status-late-cancelled { color:#8a4d00; background:#fff0d6; }
.status-neutral { color: var(--muted); background: var(--surface-soft); }
.lesson-meta { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 13px; color: var(--muted); font-size: .7rem; }
.lesson-meta span { display: inline-flex; align-items: center; gap: 5px; }
.lesson-meta svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.lesson-comment { margin: 13px 0 0; padding: 12px; border-radius: 9px; background: var(--surface-soft); color: #4d586b; font-size: .75rem; }
.lesson-actions { margin-top: 13px; display: flex; flex-wrap: wrap; gap: 8px; }
.empty-state { min-height: 300px; padding: 35px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.empty-state.large { min-height: 430px; }
.empty-state.compact { grid-column: 1 / -1; min-height: 220px; box-shadow: none; border: 0; }
.empty-state > span { width: 70px; height: 70px; display: grid; place-items: center; border-radius: 22px; background: var(--primary-soft); color: var(--primary); }
.empty-state > span svg { width: 31px; height: 31px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.empty-state h1, .empty-state h3 { margin: 18px 0 7px; }
.empty-state p { max-width: 480px; margin: 0 0 20px; color: var(--muted); }
.settings-card { padding: 28px; }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 17px; }
.span-2 { grid-column: 1 / -1; }
.form-actions { padding-top: 6px; display: flex; justify-content: flex-end; }

.admin-topbar-inner { min-height: 220px; }
.admin-shell { padding-bottom: 90px; }
.last-update { color: var(--muted); font-size: .74rem; text-transform: capitalize; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; }
.stat-card { padding: 19px; display: flex; align-items: center; gap: 13px; background: white; border: 1px solid var(--line); border-radius: 14px; }
.stat-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; color: var(--primary); background: var(--primary-soft); }
.stat-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.stat-card > div { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 1px 5px; }
.stat-card small { grid-column: 1 / -1; color: var(--muted); font-size: .65rem; }
.stat-card strong { font-size: 1.42rem; }
.stat-card span { color: var(--muted); font-size: .62rem; }
.admin-two-columns { margin-top: 18px; display: grid; grid-template-columns: 1.25fr .75fr; gap: 18px; }
.admin-panel { padding: 22px; }
.panel-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 15px; margin-bottom: 16px; }
.panel-heading h3 { margin: 0; font-size: 1rem; }
.panel-heading p { margin: 3px 0 0; color: var(--muted); font-size: .68rem; }
.compact-booking-list, .schedule-summary { display: grid; }
.compact-booking { padding: 12px 0; display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 11px; border-top: 1px solid var(--line); }
.compact-date { width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; align-content: center; line-height: .9; background: var(--surface-soft); }
.compact-date strong { font-size: .95rem; }
.compact-date span { margin-top: 3px; color: var(--muted); font-size: .52rem; }
.compact-booking > div:nth-child(2) { display: grid; gap: 3px; }
.compact-booking > div:nth-child(2) strong { font-size: .75rem; }
.compact-booking > div:nth-child(2) span { color: var(--muted); font-size: .64rem; }
.compact-booking time { font-size: .74rem; font-weight: 750; }
.schedule-summary div { padding: 11px 0; display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); font-size: .7rem; }
.schedule-summary span { color: var(--muted); }
.empty-inline { padding: 24px 12px; color: var(--muted); text-align: center; font-size: .76rem; }
.admin-filters { padding: 16px; margin-bottom: 15px; display: grid; grid-template-columns: 1fr 190px 165px auto; align-items: end; gap: 10px; }
.admin-filters label { gap: 5px; }
.admin-filters label > span { font-size: .67rem; }
.table-card { overflow: hidden; }
.table-wrap { overflow-x: auto; }
.admin-table { width: 100%; min-width: 820px; border-collapse: collapse; }
.admin-table th { padding: 13px 14px; background: #f5f7fa; color: var(--muted); text-align: left; font-size: .64rem; text-transform: uppercase; letter-spacing: .06em; }
.admin-table td { padding: 14px; border-top: 1px solid var(--line); vertical-align: middle; font-size: .72rem; }
.admin-table td > strong, .admin-table td > small { display: block; }
.admin-table td > small { margin-top: 3px; color: var(--muted); }
.comment-cell { max-width: 260px; color: #4c586c; }
.compact-select { min-width: 145px; min-height: 34px; padding: 6px 8px; font-size: .67rem; }
.student-cell { display: flex; align-items: center; gap: 9px; }
.student-cell > span:last-child { display: grid; }
.student-cell small { color: var(--muted); }
.schedule-settings { padding: 18px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; }
.weekly-schedule-list { margin-top: 14px; display: grid; gap: 10px; }
.day-editor { padding: 17px; display: grid; grid-template-columns: 180px 1fr; align-items: start; gap: 20px; box-shadow: none; }
.day-editor:not(.is-enabled) { opacity: .68; }
.day-editor-title { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.day-editor-title > div { display: grid; gap: 2px; }
.day-editor-title strong { font-size: .82rem; }
.day-editor-title small { color: var(--muted); font-size: .63rem; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch > span { width: 42px; height: 23px; display: block; border-radius: 20px; background: #cbd2de; position: relative; transition: .2s; }
.switch > span::after { content: ""; width: 17px; height: 17px; border-radius: 50%; background: white; position: absolute; left: 3px; top: 3px; transition: .2s; box-shadow: 0 2px 5px rgba(0,0,0,.18); }
.switch input:checked + span { background: var(--primary); }
.switch input:checked + span::after { transform: translateX(19px); }
.day-ranges { display: grid; gap: 9px; }
.time-range { display: grid; grid-template-columns: 1fr auto 1fr auto; align-items: end; gap: 9px; }
.time-range > span { padding-bottom: 12px; color: var(--muted); }
.add-range { justify-self: start; font-size: .7rem; }
.sticky-actions { position: sticky; bottom: 15px; z-index: 5; margin-top: 15px; padding: 12px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.92); backdrop-filter: blur(12px); box-shadow: var(--shadow-sm); }
.exceptions-panel { margin-top: 22px; padding: 22px; }
.exception-form { display: grid; grid-template-columns: 1fr auto 1fr 1fr auto; align-items: end; gap: 10px; }
.exception-list { margin-top: 17px; display: grid; }
.exception-item { padding: 13px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); }
.exception-item > div { display: grid; gap: 3px; }
.exception-item strong { font-size: .76rem; text-transform: capitalize; }
.exception-item span { color: var(--muted); font-size: .67rem; }
.safe-exceptions-panel .panel-heading { align-items: flex-start; gap: 14px; }
.safety-badge { flex: 0 0 auto; padding: 6px 10px; border: 1px solid rgba(22, 120, 74, .22); border-radius: 999px; background: rgba(22, 120, 74, .08); color: #11613d; font-size: .64rem; font-weight: 800; white-space: nowrap; }
.exception-builder { display: grid; grid-template-columns: minmax(0, 1fr); gap: 15px; margin-top: 16px; }
.exception-builder-top { display: grid; grid-template-columns: minmax(180px, .55fr) minmax(260px, 1.45fr); gap: 12px; align-items: end; }
.exception-closed-toggle { min-height: 48px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft, #f8fafc); align-items: flex-start; }
.exception-closed-toggle > span { display: grid; gap: 2px; }
.exception-closed-toggle b { font-size: .72rem; }
.exception-closed-toggle small { color: var(--muted); font-size: .62rem; line-height: 1.35; }
.exception-range-builder { display: grid; gap: 12px; padding: 15px; border: 1px solid var(--line); border-radius: 14px; background: rgba(247, 249, 252, .72); transition: opacity .18s ease; }
.exception-range-builder.is-disabled { opacity: .48; }
.exception-range-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.exception-range-heading > div { display: grid; gap: 3px; }
.exception-range-heading strong { font-size: .78rem; }
.exception-range-heading span { color: var(--muted); font-size: .65rem; }
.exception-draft-ranges { display: grid; gap: 9px; }
.exception-draft-range { max-width: 620px; }
.exception-preview { display: grid; }
.exception-preview-state { display: grid; gap: 10px; padding: 14px 15px; border: 1px solid var(--line); border-radius: 14px; background: rgba(246, 248, 251, .82); }
.exception-preview-state > div { display: grid; gap: 3px; }
.exception-preview-state strong { font-size: .78rem; }
.exception-preview-state span { color: var(--muted); font-size: .66rem; line-height: 1.45; }
.exception-preview-state.is-safe { border-color: rgba(22, 120, 74, .25); background: rgba(22, 120, 74, .055); }
.exception-preview-state.is-danger { border-color: rgba(188, 55, 55, .28); background: rgba(188, 55, 55, .055); }
.exception-preview-state.is-warning { border-color: rgba(182, 125, 20, .3); background: rgba(182, 125, 20, .07); }
.exception-preview-state ul { margin: 2px 0 0; padding: 0; display: grid; gap: 6px; list-style: none; }
.exception-preview-state li { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 9px; align-items: baseline; padding-top: 6px; border-top: 1px solid rgba(120, 128, 145, .16); }
.exception-preview-state li strong { font-size: .69rem; }
.exception-preview-state li span { overflow-wrap: anywhere; }
.exception-preview-kept { margin-top: 2px; }
.exception-commit-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 15px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface, #fff); }
.exception-commit-bar > div { display: grid; gap: 3px; }
.exception-commit-bar strong { font-size: .75rem; }
.exception-commit-bar span { color: var(--muted); font-size: .63rem; line-height: 1.4; }
.exception-list-safe { margin-top: 20px; }
.exception-item .exception-item-actions { display: flex; grid-auto-flow: column; gap: 7px; align-items: center; }
.schedule-cancellation-audit-panel, .availability-history-panel { margin-top: 16px; padding: 22px; }
.schedule-cancellation-audit-list { display: grid; gap: 8px; margin-top: 14px; }
.schedule-cancellation-audit-item { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface, #fff); }
.schedule-cancellation-audit-item > div { display: grid; gap: 3px; min-width: 0; }
.schedule-cancellation-audit-item strong { font-size: .7rem; }
.schedule-cancellation-audit-item span { color: var(--muted); font-size: .62rem; overflow-wrap: anywhere; }
.availability-history-panel { margin-top: 16px; padding: 22px; }
.availability-history-list { display: grid; gap: 8px; margin-top: 14px; }
.availability-history-item { border: 1px solid var(--line); border-radius: 12px; background: var(--surface, #fff); overflow: hidden; }
.availability-history-item summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; }
.availability-history-item summary::-webkit-details-marker { display: none; }
.availability-history-item summary > div { display: grid; gap: 2px; }
.availability-history-item summary strong { font-size: .72rem; }
.availability-history-item summary span { color: var(--muted); font-size: .62rem; }
.availability-history-item summary > b { padding: 4px 7px; border-radius: 999px; background: rgba(188, 55, 55, .08); color: #9e3030; font-size: .58rem; white-space: nowrap; }
.availability-history-item summary > b.is-safe { background: rgba(22, 120, 74, .08); color: #11613d; }
.availability-history-item[open] summary { border-bottom: 1px solid var(--line); }
.availability-history-diff { padding: 12px 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.availability-history-diff > span { display: grid; gap: 3px; padding: 10px; border-radius: 10px; background: rgba(246, 248, 251, .9); }
.availability-history-diff small { color: var(--muted); font-size: .58rem; }
.availability-history-diff strong { font-size: .68rem; line-height: 1.35; }
.availability-history-item > p { margin: 0; padding: 12px 14px; color: var(--muted); font-size: .66rem; }
.content-form { padding: 24px; }
.form-section-title { margin-top: 7px; padding: 15px 0 5px; display: grid; gap: 2px; border-top: 1px solid var(--line); }
.form-section-title:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.form-section-title strong { font-size: .9rem; }
.form-section-title span { color: var(--muted); font-size: .68rem; }

.modal-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: rgba(10, 18, 36, .68); backdrop-filter: blur(8px); animation: fadeIn .18s ease; }
.auth-modal { width: min(100%, 440px); max-height: calc(100vh - 30px); overflow-y: auto; position: relative; padding: 36px; border-radius: 24px; background: white; box-shadow: 0 35px 100px rgba(0,0,0,.32); animation: modalIn .2s ease; }
.modal-close { position: absolute; top: 14px; right: 14px; }
.auth-logo { display: flex; justify-content: center; }
.auth-modal h2 { margin: 18px 0 6px; text-align: center; font-size: 1.65rem; letter-spacing: -.03em; }
.auth-modal > p { margin: 0 0 22px; text-align: center; color: var(--muted); font-size: .82rem; }
.auth-form { display: grid; gap: 14px; }
.email-change-modal { width: min(100%, 480px); }
.email-change-icon { width: 54px; height: 54px; margin: 0 auto; display: grid; place-items: center; border-radius: 18px; background: #eef2ff; color: #4258b8; font-size: 1.45rem; font-weight: 800; }
.email-change-form label small { display: block; margin-top: 6px; color: var(--muted); font-size: .7rem; line-height: 1.45; }
.email-change-security-note, .email-change-provider-note { display: flex; gap: 10px; padding: 12px 13px; border: 1px solid #e1e6ef; border-radius: 13px; background: #f8faff; color: #566176; font-size: .74rem; line-height: 1.5; }
.email-change-security-note svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px; }
.email-change-provider-note { display: grid; gap: 3px; }
.email-change-provider-note strong { color: #202a3b; }
.profile-email-actions { display: flex; margin-top: 8px; }
.profile-email-actions .btn { width: fit-content; }
.profile-email-field > small strong { color: #344767; }
.forgot-link { justify-self: end; margin-top: -6px; font-size: .7rem; }
.auth-divider { margin: 18px 0; display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .66rem; }
.auth-divider::before, .auth-divider::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.demo-login-box { margin-top: 14px; padding: 12px; border-radius: 11px; background: #fff8e8; text-align: center; }
.demo-login-box small { color: #74591c; }
.demo-login-box > div { display: flex; justify-content: center; gap: 8px; margin-top: 8px; }
.demo-login-box button { padding: 5px 9px; border: 1px solid #ead597; border-radius: 8px; background: white; color: #6b5012; cursor: pointer; font-size: .68rem; font-weight: 700; }
.auth-switch { margin-top: 18px; text-align: center; color: var(--muted); font-size: .74rem; }
.auth-switch button { border: 0; background: transparent; color: var(--primary); cursor: pointer; font-weight: 750; }
.toast { position: fixed; right: 22px; bottom: 22px; z-index: 120; width: min(calc(100% - 44px), 390px); padding: 14px; border: 1px solid var(--line); border-radius: 13px; display: flex; align-items: center; gap: 11px; background: white; box-shadow: var(--shadow-md); animation: toastIn .25s ease; }
.toast > span { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: white; background: var(--success); flex: 0 0 auto; font-weight: 900; }
.toast > span svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.toast-error > span { background: var(--danger); }
.toast p { flex: 1; margin: 0; font-size: .76rem; }
.toast button { border: 0; background: transparent; cursor: pointer; color: var(--muted); }
.toast button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.busy-overlay { position: fixed; inset: 0; z-index: 130; display: grid; place-items: center; background: rgba(255,255,255,.52); backdrop-filter: blur(2px); }
.spinner { width: 38px; height: 38px; border: 3px solid #dfe4ee; border-top-color: var(--primary); border-radius: 50%; animation: spin .7s linear infinite; }
.loading-screen { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: white; }
.loader-logo { width: 66px; height: 66px; display: grid; place-items: center; border-radius: 20px; color: white; background: linear-gradient(135deg, var(--primary), #6c83ed); }
.loader-logo svg { width: 38px; height: 38px; }
.loading-screen p { color: var(--muted); }

.prose { padding: 38px; }
.prose h2 { margin: 28px 0 8px; }
.prose h2:first-child { margin-top: 0; }
.prose p { color: var(--muted); line-height: 1.8; }
.site-footer { padding: 68px 0 22px; color: white; background: #0d172d; }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 50px; }
.light-brand .brand-copy small { color: #96a4c2; }
.footer-brand p { max-width: 390px; color: #98a6c3; font-size: .8rem; line-height: 1.7; }
.footer-grid > div:not(.footer-brand) { display: grid; align-content: start; gap: 10px; }
.footer-grid > div:not(.footer-brand) > strong { margin-bottom: 5px; font-size: .8rem; }
.footer-grid a, .footer-grid span { color: #96a4c2; font-size: .72rem; }
.footer-grid a:hover { color: white; }
.footer-bottom { margin-top: 48px; padding-top: 18px; display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid rgba(255,255,255,.1); color: #7583a0; font-size: .65rem; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes modalIn { from { opacity: 0; transform: translateY(10px) scale(.98); } }
@keyframes toastIn { from { opacity: 0; transform: translateY(12px); } }

@media (max-width: 1050px) {
  .desktop-nav { display: none; }
  .header-actions { margin-left: auto; }
  .mobile-menu-button { display: grid; }
  .mobile-nav { display: block; border-top: 1px solid var(--line); background: white; }
  .mobile-nav .container { padding: 12px 0 18px; display: grid; gap: 4px; }
  .mobile-nav .nav-link { display: block; }
  .nav-button { width: 100%; text-align: left; border: 0; }
  .hero-grid { gap: 35px; }
  .hero-visual { min-height: 490px; }
  .math-board { min-height: 470px; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .learning-grid { gap: 45px; }
  .booking-layout { grid-template-columns: 1fr; }
  .booking-summary { position: static; }
  .summary-placeholder { min-height: 260px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .schedule-settings { grid-template-columns: repeat(2, 1fr); }
  .exception-form { grid-template-columns: 1fr 1fr; }
  .exception-form .checkbox-inline { align-self: center; }
  .exception-form .btn { grid-column: 1 / -1; }
}

@media (max-width: 820px) {
  .section-pad { padding: 72px 0; }
  .hero { padding-top: 62px; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { text-align: center; }
  .hero-copy .eyebrow, .hero-actions, .hero-note { justify-content: center; }
  .hero-lead { margin: 0 auto; }
  .hero-visual { min-height: 510px; }
  .math-board { width: min(88%, 490px); }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-grid > div { min-height: 66px; border-bottom: 1px solid var(--line); }
  .trust-grid > div:nth-child(2) { border-right: 0; }
  .split-heading, .learning-grid, .faq-grid, .contact-grid { grid-template-columns: 1fr; gap: 35px; }
  .split-heading { align-items: start; }
  .reviews-grid { grid-template-columns: 1fr; }
  .review-card > p { min-height: 0; }
  .lesson-example-card.is-active { transform: none; }
  .cta-panel { border-radius: 24px 24px 0 0; }
  .contact-form { border-radius: 0 0 24px 24px; }
  .dashboard-grid, .admin-layout { grid-template-columns: 1fr; }
  .dashboard-sidebar, .admin-sidebar { position: static; }
  .dashboard-nav, .admin-nav { grid-template-columns: repeat(3, 1fr); }
  .admin-nav { grid-template-columns: repeat(5, minmax(125px, 1fr)); overflow-x: auto; }
  .admin-nav button { justify-content: center; white-space: nowrap; }
  .dashboard-nav button { justify-content: center; }
  .dashboard-nav i { display: none; }
  .admin-two-columns { grid-template-columns: 1fr; }
  .admin-filters { grid-template-columns: 1fr 1fr; }
  .day-editor { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .container { width: min(calc(100% - 26px), var(--container)); }
  .narrow-container { width: min(calc(100% - 26px), 780px); }
  .site-header .brand-copy small { display: none; }
  .brand { min-width: 0; }
  .header-actions { min-width: 0; }
  .desktop-only, .account-chip > span:last-child { display: none; }
  .header-inner { min-height: 68px; }
  .demo-banner-inner { padding: 10px 0; align-items: flex-start; flex-direction: column; gap: 4px; }
  .demo-credentials { display: none; }
  .hero-copy h1 { font-size: clamp(2.45rem, 14vw, 3.5rem); }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; }
  .hero-metrics { grid-template-columns: 1fr; text-align: left; }
  .hero-metrics div { padding-bottom: 13px; border-bottom: 1px solid var(--line); }
  .hero-visual { min-height: 430px; }
  .math-board { width: 94%; min-height: 410px; padding: 20px; }
  .equation-card { margin-top: 35px; }
  .equation-card strong { font-size: 1.35rem; }
  .floating-formula { font-size: .72rem; }
  .formula-a { right: -10px; top: 82px; }
  .formula-b { left: -8px; bottom: 62px; }
  .trust-grid { grid-template-columns: 1fr; }
  .trust-grid > div { padding: 0; border-right: 0; }
  .feature-grid { grid-template-columns: 1fr; }
  .feature-card { min-height: auto; }
  .feature-card h3 { margin-top: 25px; }
  .contact-details { flex-direction: column; gap: 4px; }
  .cta-panel, .contact-form { padding: 30px 22px; }
  .compact-page-hero { padding: 46px 0 42px; }
  .booking-calendar, .booking-summary { padding: 19px; }
  .slots-grid { grid-template-columns: repeat(3, 1fr); }
  .slot-heading { align-items: flex-start; }
  .booking-assurances { grid-template-columns: 1fr; }
  .dashboard-hero-inner, .admin-topbar-inner { min-height: 220px; flex-direction: column; align-items: flex-start; justify-content: center; }
  .dashboard-hero h1, .admin-topbar h1 { font-size: 2rem; }
  .dashboard-nav { grid-template-columns: 1fr; }
  .dashboard-nav button { justify-content: flex-start; }
  .lesson-booking-card { grid-template-columns: 1fr; }
  .lesson-date-box { width: 58px; }
  .lesson-title-row { flex-direction: column; gap: 8px; }
  .form-grid, .schedule-settings, .admin-filters { grid-template-columns: 1fr; }
  .span-2 { grid-column: auto; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .stat-card { padding: 15px; }
  .stat-icon { display: none; }
  .time-range { grid-template-columns: 1fr 1fr auto; }
  .time-range > span { display: none; }
  .exception-form { grid-template-columns: 1fr; }
  .exception-form .btn { grid-column: auto; }
  .auth-modal { padding: 30px 22px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px 22px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; }
}

@media (max-width: 820px) {
  .exception-builder-top { grid-template-columns: minmax(0, 1fr); }
  .exception-range-heading, .exception-commit-bar { align-items: stretch; flex-direction: column; }
  .exception-range-heading .btn, .exception-commit-bar .btn { width: 100%; }
  .exception-draft-range { max-width: none; }
  .exception-item { align-items: flex-start; flex-direction: column; }
  .exception-item .exception-item-actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .availability-history-diff { grid-template-columns: minmax(0, 1fr); }
  .schedule-cancellation-audit-item { align-items: stretch; flex-direction: column; }
  .schedule-cancellation-audit-item .btn { width: 100%; }
}

@media (max-width: 420px) {
  .slots-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-brand { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* v1.2: chat, individual terms, billing and Google Meet verification */
.lesson-finance-row { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:14px; padding:12px 14px; border-radius:14px; background:var(--surface-soft); border:1px solid var(--line); }
.lesson-finance-row > span:first-child { display:grid; gap:2px; }
.lesson-finance-row strong { color:var(--ink); }
.lesson-finance-row small, .attendance-note, .meet-awaiting { color:var(--muted); }
.late-cancel-note { max-width:310px; color:#9a3412; font-size:.82rem; font-weight:700; text-align:right; }
.btn-meet { background:#eef5ff; color:#174ea6; border:1px solid #c7dafe; }
.btn-meet:hover { background:#dce9ff; }
.meet-awaiting { margin:12px 0 0; font-size:.85rem; }
.meet-awaiting.compact { margin:0; }
.attendance-note { margin:9px 0 0; font-size:.82rem; }
.status-pending { color:#7c3f00; background:#fff4d6; }
.payment-pill { display:inline-flex; padding:6px 10px; border-radius:999px; font-size:.78rem; font-weight:800; white-space:nowrap; }
.payment-unpaid { background:#fff1f0; color:#a9231f; }
.payment-paid { background:#eaf8ef; color:#15703d; }
.payment-waived { background:#f0f1f4; color:#596274; }
.table-link { display:block; margin-top:6px; color:var(--primary); font-size:.82rem; font-weight:700; }
.warning-text { color:#a9231f !important; }
.sync-button { display:block; margin-top:8px; text-align:left; }

.chat-layout { min-height:620px; }
.chat-layout-admin { display:grid; grid-template-columns:270px minmax(0,1fr); gap:18px; }
.chat-students { padding:12px; align-self:start; max-height:680px; overflow:auto; }
.chat-students-title { display:flex; justify-content:space-between; align-items:baseline; padding:10px 10px 14px; border-bottom:1px solid var(--line); }
.chat-students-title small { color:var(--muted); }
.chat-student { width:100%; display:flex; align-items:center; gap:10px; padding:11px 10px; border:0; border-radius:13px; background:transparent; color:var(--ink); text-align:left; cursor:pointer; }
.chat-student:hover, .chat-student.is-active { background:var(--surface-soft); }
.chat-student > span:last-child { min-width:0; display:grid; gap:2px; }
.chat-student strong, .chat-student small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-student small { color:var(--muted); }
.chat-window { min-width:0; display:flex; flex-direction:column; overflow:hidden; min-height:620px; }
.chat-header { min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:15px 18px; border-bottom:1px solid var(--line); }
.chat-messages { flex:1; min-height:390px; max-height:560px; overflow:auto; padding:22px; display:flex; flex-direction:column; gap:12px; background:linear-gradient(180deg, rgba(247,249,252,.8), rgba(255,255,255,.96)); }
.chat-message { align-self:flex-start; max-width:min(76%, 620px); padding:11px 14px; border-radius:7px 16px 16px 16px; background:white; border:1px solid var(--line); box-shadow:0 8px 24px rgba(30,42,68,.06); }
.chat-message.is-own { align-self:flex-end; border-radius:16px 7px 16px 16px; background:#eff4ff; border-color:#cfdbf6; }
.chat-message > div { display:flex; justify-content:space-between; gap:16px; margin-bottom:5px; }
.chat-message strong { font-size:.78rem; }
.chat-message time { color:var(--muted); font-size:.72rem; }
.chat-message p { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.5; }
.chat-compose { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:end; padding:15px; border-top:1px solid var(--line); }
.chat-compose textarea { resize:none; min-height:50px; }
.chat-empty { margin:auto; border:0; box-shadow:none; background:transparent; }

.billing-summary-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; margin-bottom:18px; }
.balance-card { display:grid; gap:5px; padding:22px; border-radius:18px; background:white; border:1px solid var(--line); box-shadow:var(--shadow-sm); }
.balance-card small, .balance-card span { color:var(--muted); }
.balance-card strong { font-size:1.7rem; color:var(--ink); }
.balance-due { background:linear-gradient(145deg, #182b52, #284b88); border:0; }
.balance-due small, .balance-due span { color:rgba(255,255,255,.72); }
.balance-due strong { color:white; }
.billing-table td small { display:block; margin-top:4px; color:var(--muted); }

.student-terms-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px; }
.student-terms-card { padding:20px; }
.student-terms-card > header { display:flex; align-items:center; justify-content:space-between; gap:14px; padding-bottom:15px; border-bottom:1px solid var(--line); }
.student-mini-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:15px 0; }
.student-mini-stats span { display:grid; gap:2px; padding:11px; border-radius:12px; background:var(--surface-soft); }
.student-mini-stats small { color:var(--muted); font-size:.75rem; }
.student-terms-form { display:grid; grid-template-columns:1fr 1fr; gap:13px; }
.student-terms-form label { display:grid; gap:7px; font-size:.82rem; font-weight:700; }
.student-terms-form label > small, .student-terms-form .form-help { margin:0; color:var(--muted); font-size:.72rem; line-height:1.45; font-weight:500; }
.student-terms-form .form-help { align-self:center; }

.integration-card { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:26px; }
.integration-status { display:flex; align-items:flex-start; gap:15px; }
.integration-status > span { width:42px; height:42px; flex:0 0 42px; display:grid; place-items:center; border-radius:50%; background:#fff2d8; color:#9a5b00; font-weight:900; }
.integration-card.is-connected .integration-status > span { background:#e8f8ee; color:#16703e; }
.integration-status p { margin:6px 0 0; color:var(--muted); }
.integration-explainer { margin-top:18px; padding:24px; }
.integration-explainer > p { color:var(--muted); margin-bottom:0; }
.criteria-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:16px; }
.criteria-grid div { display:grid; gap:4px; padding:16px; border-radius:14px; background:var(--surface-soft); }
.criteria-grid strong { font-size:1.3rem; }
.criteria-grid span { color:var(--muted); font-size:.82rem; }

@media (max-width: 980px) {
  .student-terms-grid { grid-template-columns:1fr; }
  .chat-layout-admin { grid-template-columns:220px minmax(0,1fr); }
  .billing-summary-grid { grid-template-columns:1fr; }
}

@media (max-width: 720px) {
  .chat-layout-admin { grid-template-columns:1fr; }
  .chat-students { display:flex; gap:7px; overflow-x:auto; max-height:none; }
  .chat-students-title { min-width:120px; border:0; }
  .chat-student { min-width:190px; }
  .chat-window { min-height:540px; }
  .chat-message { max-width:90%; }
  .chat-compose { grid-template-columns:1fr; }
  .chat-compose .btn { width:100%; }
  .student-terms-form { grid-template-columns:1fr; }
  .student-terms-form .span-2 { grid-column:auto; }
  .integration-card { align-items:flex-start; flex-direction:column; }
  .criteria-grid { grid-template-columns:1fr; }
  .lesson-finance-row { align-items:flex-start; flex-direction:column; }
  .late-cancel-note { text-align:left; }
}

/* v1.3: messenger-grade chat, legal pages and clickable footer contacts */
.chat-layout { min-height: min(720px, calc(100vh - 210px)); }
.chat-layout-admin { grid-template-columns: 300px minmax(0, 1fr); align-items: stretch; }
.chat-students { padding: 0; overflow: hidden; max-height: none; height: min(720px, calc(100vh - 210px)); position: sticky; top: 96px; }
.chat-students-title { min-height: 68px; padding: 15px 16px 11px; }
.chat-students-title > div { display: grid; gap: 2px; }
.chat-students-title strong { font-size: .94rem; }
.chat-students-title small { font-size: .72rem; }
.chat-search { position: relative; display: block; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.chat-search svg { position: absolute; left: 24px; top: 50%; width: 17px; height: 17px; transform: translateY(-50%); fill: none; stroke: var(--muted); stroke-width: 1.8; pointer-events: none; }
.chat-search input { width: 100%; min-height: 40px; padding: 8px 12px 8px 37px; border: 1px solid transparent; border-radius: 11px; background: var(--surface-soft); font-size: .78rem; }
.chat-search input:focus { border-color: #bac7ee; background: white; outline: 0; box-shadow: 0 0 0 3px rgba(51, 88, 212, .08); }
.chat-student-list { overflow: auto; height: calc(100% - 121px); padding: 7px; }
.chat-student { min-height: 58px; border-radius: 12px; padding: 9px 8px; }
.chat-student.is-active { background: var(--primary-soft); color: var(--ink); }
.chat-student-copy { flex: 1; }
.chat-student-arrow { color: #9aa5b8; font-size: 1.15rem; margin-left: auto; opacity: 0; transform: translateX(-3px); transition: .16s ease; }
.chat-student:hover .chat-student-arrow, .chat-student.is-active .chat-student-arrow { opacity: 1; transform: translateX(0); }
.chat-search-empty { margin: 10px 12px; text-align: center; }

.chat-window { min-height: min(720px, calc(100vh - 210px)); height: min(720px, calc(100vh - 210px)); border-radius: 18px; }
.chat-header { position: relative; z-index: 3; min-height: 68px; padding: 12px 16px; background: rgba(255,255,255,.96); backdrop-filter: blur(12px); }
.chat-header .student-cell > span:last-child { min-width: 0; }
.chat-header .student-cell small { display: block; max-width: min(48vw, 520px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-header-actions { display: flex; align-items: center; gap: 8px; }
.chat-messages-shell { position: relative; min-height: 0; flex: 1; overflow: hidden; background: #eef2f7; }
.chat-messages { height: 100%; max-height: none; min-height: 0; padding: 22px clamp(14px, 3vw, 34px) 28px; gap: 3px; background:
  radial-gradient(circle at 18% 22%, rgba(51,88,212,.045) 0 1.5px, transparent 1.7px) 0 0/26px 26px,
  linear-gradient(180deg, #f3f6fa 0%, #eef2f7 100%); scroll-behavior: smooth; overscroll-behavior: contain; }
.chat-day-separator { align-self: center; display: flex; justify-content: center; width: 100%; margin: 12px 0 9px; position: sticky; top: 4px; z-index: 2; pointer-events: none; }
.chat-day-separator span { padding: 5px 10px; border-radius: 999px; background: rgba(73,87,112,.78); color: white; font-size: .66rem; font-weight: 750; box-shadow: 0 4px 14px rgba(25,41,76,.12); backdrop-filter: blur(10px); }
.chat-message-row { width: 100%; display: flex; align-items: flex-end; gap: 7px; justify-content: flex-start; }
.chat-message-row.is-own { justify-content: flex-end; }
.chat-message-row.is-grouped { margin-top: -1px; }
.chat-message { position: relative; max-width: min(72%, 650px); min-width: 86px; padding: 8px 11px 6px; border: 0; border-radius: 7px 16px 16px 16px; background: white; box-shadow: 0 1px 2px rgba(25,41,76,.12); }
.chat-message.is-own { background: #e5ecff; border: 0; border-radius: 16px 7px 16px 16px; }
.chat-message-row.is-grouped .chat-message { border-top-left-radius: 12px; }
.chat-message-row.is-grouped.is-own .chat-message { border-top-right-radius: 12px; }
.chat-message-author { display: block; margin-bottom: 2px; color: var(--primary); font-size: .7rem; line-height: 1.3; }
.chat-message-text { min-width: 0; padding-right: 42px; white-space: normal; overflow-wrap: anywhere; line-height: 1.45; font-size: .88rem; }
.chat-message-text a { color: var(--primary); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.chat-message-meta { position: absolute; right: 8px; bottom: 5px; display: inline-flex; align-items: center; gap: 3px; color: #7e899c; font-size: .59rem; line-height: 1; }
.chat-message-meta time { color: inherit; font-size: inherit; }
.chat-sent { color: var(--primary); font-weight: 900; }
.chat-message-action { width: 28px; height: 28px; display: grid; place-items: center; flex: 0 0 auto; border: 0; border-radius: 50%; background: rgba(255,255,255,.9); color: var(--muted); box-shadow: 0 3px 12px rgba(25,41,76,.1); cursor: pointer; opacity: 0; transform: scale(.88); transition: .16s ease; }
.chat-message-action svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.chat-message-row:hover .chat-message-action, .chat-message-action:focus-visible { opacity: 1; transform: scale(1); }
.chat-message-row.is-own .chat-message-action { order: -1; }
.chat-scroll-bottom { position: absolute; right: 18px; bottom: 14px; width: 42px; height: 42px; display: grid; place-items: center; z-index: 4; border: 1px solid var(--line); border-radius: 50%; background: white; color: var(--primary); box-shadow: 0 9px 25px rgba(25,41,76,.2); cursor: pointer; }
.chat-scroll-bottom[hidden] { display: none; }
.chat-scroll-bottom svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
.chat-empty { min-height: 100%; }
.chat-no-dialog { margin: auto; border: 0; box-shadow: none; }
.chat-compose { position: relative; z-index: 3; display: flex; gap: 9px; align-items: flex-end; padding: 10px 12px; border-top: 1px solid var(--line); background: white; }
.chat-compose-input { flex: 1; min-width: 0; display: grid; gap: 3px; padding: 5px 12px 4px; border: 1px solid var(--line); border-radius: 18px; background: white; transition: .16s ease; }
.chat-compose-input:focus-within { border-color: #adbbe6; box-shadow: 0 0 0 3px rgba(51,88,212,.07); }
.chat-compose textarea { width: 100%; min-height: 44px; max-height: 140px; padding: 10px 0 4px; border: 0; outline: 0; resize: none; background: transparent; line-height: 1.4; overflow-y: auto; }
.chat-compose-input small { padding: 0 0 5px; color: #9aa4b5; font-size: .58rem; line-height: 1.2; }
.chat-send-button { width: 48px; height: 48px; display: grid; place-items: center; flex: 0 0 auto; border: 0; border-radius: 50%; background: var(--primary); color: white; box-shadow: 0 9px 23px rgba(51,88,212,.24); cursor: pointer; transition: .16s ease; }
.chat-send-button:hover { background: var(--primary-dark); transform: translateY(-1px); }
.chat-send-button:disabled { opacity: .55; cursor: wait; transform: none; }
.chat-send-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.legal-page .compact-page-hero { padding-bottom: 54px; }
.legal-updated { margin-top: 18px; color: var(--muted); font-size: .76rem; }
.legal-card { padding: clamp(28px, 5vw, 54px); }
.legal-card > :first-child { margin-top: 0; }
.legal-card h2 { margin: 38px 0 12px; font-size: 1.2rem; letter-spacing: -.015em; }
.legal-card p, .legal-card li { color: #49556a; line-height: 1.78; }
.legal-card ul { padding-left: 22px; display: grid; gap: 8px; }
.legal-card a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
.legal-summary { margin-bottom: 30px; padding: 18px 20px; border-radius: 14px; background: var(--primary-soft); }
.legal-summary strong { color: var(--primary); }
.legal-summary p { margin: 6px 0 0; color: #3f4e77; }
.legal-note { margin-top: 40px; padding: 18px 20px; display: grid; grid-template-columns: auto 1fr; gap: 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-soft); color: var(--muted); font-size: .8rem; }
.legal-note strong { color: var(--ink); }
.rules-highlight-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 34px; }
.rules-highlight-grid > div { min-height: 116px; padding: 18px; display: grid; align-content: center; gap: 6px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-soft); }
.rules-highlight-grid strong { color: var(--primary); font-size: 1.22rem; }
.rules-highlight-grid span { color: var(--muted); font-size: .72rem; line-height: 1.45; }
.form-privacy a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
.footer-contact { display: grid !important; gap: 1px !important; padding: 4px 0; }
.footer-contact > span { font-size: .6rem !important; text-transform: uppercase; letter-spacing: .07em; color: #6f7d9b !important; }
.footer-contact > strong { max-width: 230px; overflow-wrap: anywhere; color: #aebbd6; font-size: .72rem; font-weight: 650; }
.footer-contact:hover > strong { color: white; }

@media (max-width: 900px) {
  .chat-layout-admin { grid-template-columns: 235px minmax(0,1fr); }
  .chat-students { height: min(650px, calc(100vh - 170px)); top: 84px; }
  .chat-window { min-height: min(650px, calc(100vh - 170px)); height: min(650px, calc(100vh - 170px)); }
  .chat-message { max-width: 82%; }
}

@media (max-width: 720px) {
  .chat-layout, .chat-layout-admin { display: block; min-height: 0; }
  .chat-students { position: static; height: auto; max-height: none; margin-bottom: 10px; }
  .chat-students-title { min-height: 56px; }
  .chat-search { padding: 8px 10px; }
  .chat-student-list { height: auto; max-height: 190px; display: grid; overflow-y: auto; overflow-x: hidden; padding: 6px; }
  .chat-student { min-width: 0; width: 100%; }
  .chat-window { min-height: 66vh; height: min(700px, 72vh); border-radius: 14px; }
  .chat-header { min-height: 60px; padding: 9px 11px; }
  .chat-header .student-cell small { max-width: 48vw; }
  .chat-header .meet-awaiting { display: none; }
  .chat-header .btn { min-width: 0; padding: 0 10px; }
  .chat-messages { padding: 16px 10px 20px; }
  .chat-message { max-width: 88%; }
  .chat-message-action { display: none; }
  .chat-compose { display: flex; padding: 8px; }
  .chat-compose-input small { display: none; }
  .chat-send-button { width: 46px; height: 46px; }
  .rules-highlight-grid { grid-template-columns: 1fr; }
  .legal-note { grid-template-columns: 1fr; }
}
.chat-message > .chat-message-text { display: block; justify-content: initial; gap: 0; margin: 0; }
.chat-message > .chat-message-meta { margin: 0; }
@media (max-width: 720px) {
  .chat-students { display: block; }
}
.chat-message-action.is-copied { opacity: 1; transform: scale(1); color: var(--success); background: var(--success-soft); }
.contact-details a { color: #cbd5ee; text-decoration: underline; text-decoration-color: rgba(203,213,238,.35); text-underline-offset: 3px; }
.contact-details a:hover { color: white; text-decoration-color: currentColor; }
.chat-sent.is-pending { color: var(--muted); }

/* v1.4.0 — recurring bookings, profile photos and payments */
.avatar { overflow:hidden; }
.avatar img { width:100%; height:100%; object-fit:cover; display:block; border-radius:inherit; }
.avatar.profile-photo-large { width:92px; height:92px; font-size:1.35rem; }

.booking-mode-actions { display:grid; grid-template-columns:1fr; gap:10px; margin-top:4px; }
.recurring-booking-button { border:1px solid #bfcbea; background:#f6f8ff; color:var(--primary); }
.recurring-booking-button:hover { background:#eaf0ff; }
.recurring-booking-note { display:grid; gap:4px; padding:13px 14px; border:1px solid #d9e0f5; border-radius:14px; background:#f8faff; color:#526077; font-size:.78rem; line-height:1.5; }
.recurring-booking-note strong { color:var(--primary); }
.optional-label { color:var(--muted); font-weight:500; font-size:.68rem; }
.status-line { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.recurring-pill { display:inline-flex; align-items:center; width:max-content; padding:4px 8px; border-radius:999px; background:#eef1ff; color:#415db3; font-size:.64rem; font-weight:800; letter-spacing:.02em; }
.lesson-booking-card.is-recurring { border-left-width: 1px; border-left-style: solid; border-left-color: var(--line); }
.booking-edit-form { display:grid; grid-template-columns:1fr; gap:10px; margin:14px 0; padding:14px; border:1px solid var(--line); border-radius:14px; background:var(--surface-soft); }
.booking-edit-form label { display:grid; gap:6px; font-size:.76rem; font-weight:700; }
.booking-edit-form input, .booking-edit-form textarea { width:100%; }
.inline-actions { display:flex; flex-wrap:wrap; gap:8px; }

.recurring-series-list { display:grid; gap:12px; }
.recurring-series-card { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:16px; padding:18px; }
.recurring-series-icon { width:46px; height:46px; display:grid; place-items:center; border-radius:14px; background:var(--primary-soft); color:var(--primary); font-size:1.35rem; font-weight:900; }
.recurring-series-copy { min-width:0; display:grid; gap:5px; }
.recurring-series-copy h3, .recurring-series-copy p { margin:0; }
.recurring-series-copy p, .recurring-series-copy small { color:var(--muted); }
.count-badge { display:inline-flex; min-width:32px; height:32px; align-items:center; justify-content:center; border-radius:999px; background:var(--primary-soft); color:var(--primary); font-weight:800; }

.profile-photo-editor { display:flex; align-items:center; gap:18px; margin:4px 0 24px; padding:18px; border:1px solid var(--line); border-radius:16px; background:var(--surface-soft); }
.profile-photo-form { display:grid; gap:6px; justify-items:start; }
.profile-photo-form small { color:var(--muted); }
.important-profile-field { padding:12px; border-radius:14px; background:#f8faff; border:1px solid #d9e0f5; }

.billing-summary-grid.payment-summary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.balance-card.balance-due { border-color:#f1c9c5; background:#fff9f8; }
.balance-card.balance-due strong { color:#a9231f; }
.balance-card.balance-credit { border-color:#bfe3cb; background:#f7fcf9; }
.balance-card.balance-credit strong { color:#15703d; }
.payment-cta-card { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:18px; padding:18px 20px; }
.payment-cta-card p { margin:4px 0 0; color:var(--muted); }
.payment-history-heading { margin-top:28px; }
.payment-partial { background:#fff8dd; color:#7c6510; }

.payment-layout { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(280px,.55fr); gap:22px; align-items:start; }
.payment-main-column { display:grid; gap:16px; }
.payment-details-card, .payment-purpose-card, .payment-actions-card, .payment-qr-card { padding:22px; }
.payment-details-list { display:grid; gap:0; margin:0; }
.payment-details-list > div { display:grid; grid-template-columns:150px minmax(0,1fr); gap:14px; padding:13px 0; border-top:1px solid var(--line); }
.payment-details-list > div:first-child { border-top:0; }
.payment-details-list dt { color:var(--muted); font-size:.76rem; }
.payment-details-list dd { margin:0; min-width:0; overflow-wrap:anywhere; }
.payment-details-list code { font-size:.82rem; }
.copy-inline { margin-left:10px; border:0; background:transparent; color:var(--primary); font-weight:700; cursor:pointer; }
.payment-required-label, .qr-label { display:inline-flex; margin-bottom:8px; padding:5px 9px; border-radius:999px; background:#fff0ed; color:#a52b23; font-size:.64rem; font-weight:900; letter-spacing:.04em; }
.purpose-copy-box { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px; border-radius:13px; background:var(--surface-soft); border:1px solid var(--line); }
.purpose-copy-box strong { overflow-wrap:anywhere; }
.payment-actions-card { display:flex; align-items:center; justify-content:space-between; gap:18px; }
.payment-actions-card h2, .payment-actions-card p { margin:0; }
.payment-actions-card p { margin-top:6px; color:var(--muted); }
.payment-warning { padding:18px; border-color:#efcf88; background:#fffaf0; }
.payment-warning p { margin:5px 0 12px; color:#6d6043; }
.payment-qr-card { position:sticky; top:96px; display:grid; gap:16px; text-align:center; }
.payment-qr-card img { width:100%; aspect-ratio:1; object-fit:contain; border:1px solid var(--line); border-radius:16px; background:white; }
.payment-qr-card h2 { margin:2px 0 0; font-size:1.8rem; }
.payment-qr-card p, .payment-qr-card small { color:var(--muted); }
.integration-error { color:#a9231f; }

@media (max-width: 900px) {
  .payment-layout { grid-template-columns:1fr; }
  .payment-qr-card { position:static; max-width:460px; width:100%; justify-self:center; }
}
@media (max-width: 640px) {
  .recurring-series-card { grid-template-columns:auto minmax(0,1fr); }
  .recurring-series-card > .btn { grid-column:1/-1; width:100%; }
  .profile-photo-editor { align-items:flex-start; }
  .payment-details-list > div { grid-template-columns:1fr; gap:5px; }
  .payment-actions-card, .payment-cta-card, .purpose-copy-box { align-items:stretch; flex-direction:column; }
  .billing-summary-grid.payment-summary-grid { grid-template-columns:1fr; }
}

/* v1.4.2 — personalized NBU payment QR */
.payment-qr-link {
  display: block;
  width: 100%;
  border-radius: 18px;
  background: #fff;
  padding: 12px;
  border: 1px solid var(--line);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.payment-qr-link:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--primary) 38%, var(--line));
  box-shadow: 0 12px 30px rgba(21, 38, 75, .12);
}
.payment-qr-link .dynamic-payment-qr {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
}
.payment-qr-open {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 42px;
  font-weight: 700;
  text-decoration: none;
  color: var(--primary);
}
.payment-qr-placeholder {
  display: grid;
  place-items: center;
  min-height: 260px;
  border: 1px dashed var(--line);
  border-radius: 16px;
  color: var(--muted);
  background: color-mix(in srgb, var(--surface) 92%, white);
  padding: 24px;
}
.admin-info-note {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 94%, var(--primary));
}
.admin-info-note small { color: var(--muted); line-height: 1.55; }

/* v1.5.0 — brand media, editable chat, manual bookings and mobile UX */
.brand-mark.has-image {
  width: auto;
  height: auto;
  max-width: 132px;
  max-height: 42px;
  overflow: visible;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.brand-mark.has-image img {
  display: block;
  width: auto;
  height: auto;
  max-width: 132px;
  max-height: 42px;
  object-fit: contain;
  border-radius: 0;
}
.auth-logo .brand-mark.has-image, .verify-brand .brand-mark.has-image { max-width: 200px; max-height: 64px; }
.auth-logo .brand-mark.has-image img, .verify-brand .brand-mark.has-image img { max-width: 200px; max-height: 64px; }
.loader-logo.has-image {
  width: auto;
  height: auto;
  max-width: min(220px, 70vw);
  max-height: 80px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
}
.loader-logo.has-image img { display: block; width: auto; height: auto; max-width: min(220px, 70vw); max-height: 80px; object-fit: contain; border-radius: 0; }
.teacher-avatar.has-photo { overflow: hidden; padding: 0; background: transparent; }
.teacher-avatar.has-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.about-heading-copy { display: flex; align-items: center; gap: 18px; }
.about-tutor-photo { width: 78px; height: 78px; flex: 0 0 auto; object-fit: cover; border-radius: 22px; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }

.site-media-editor-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.site-media-editor-card { min-width: 0; padding: 18px; display: grid; grid-template-columns: 108px minmax(0,1fr); align-items: center; gap: 18px; }
.site-media-preview { width: 108px; height: 108px; display: grid; place-items: center; overflow: hidden; border: 1px dashed #cbd3e1; border-radius: 20px; background: var(--surface-soft); color: var(--primary); font-weight: 850; font-size: 1.3rem; }
.site-media-preview img { width: 100%; height: 100%; object-fit: cover; }
.site-media-preview.logo-preview { overflow: visible; border: 0; border-radius: 0; background: transparent; }
.site-media-preview.logo-preview img { object-fit: contain; padding: 8px; background: transparent; border-radius: 0; }
.site-media-preview.logo-preview svg { width: 46px; height: 46px; }
.site-media-copy { min-width: 0; display: grid; justify-items: start; gap: 7px; }
.site-media-copy p { margin: 0; color: var(--muted); font-size: .74rem; line-height: 1.5; }
.site-media-copy small { color: var(--muted); font-size: .65rem; }
.file-button { position: relative; overflow: hidden; }
.admin-heading-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.admin-manual-booking-form { margin-bottom: 16px; padding: 20px; }
.payment-tracking-note { margin: -6px 0 16px; }

.chat-message-actions { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.chat-message-row.is-own .chat-message-actions { order: -1; }
.chat-edited { color: #8792a5; font-size: .56rem; }
.chat-message.is-editing { width: min(520px, 72vw); max-width: min(520px, 72vw); padding: 10px; }
.chat-edit-form { display: grid; gap: 8px; }
.chat-edit-form textarea { width: 100%; min-height: 72px; max-height: 180px; padding: 10px 11px; resize: vertical; border: 1px solid #bdc8de; border-radius: 11px; background: #fff; outline: none; line-height: 1.45; }
.chat-edit-form textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(51,88,212,.08); }
.chat-edit-actions { display: flex; justify-content: flex-end; gap: 6px; }

.table-wrap { scrollbar-width: thin; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.table-wrap::after { content: ''; display: block; width: 1px; height: 1px; }

@media (max-width: 820px) {
  .site-media-editor-grid { grid-template-columns: 1fr; }
  .admin-sidebar { padding: 10px; overflow: hidden; }
  .admin-profile { display: none; }
  .admin-nav { display: flex; grid-template-columns: none; gap: 7px; margin-top: 0; padding: 2px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
  .admin-nav::-webkit-scrollbar { display: none; }
  .admin-nav button { width: auto; min-width: max-content; min-height: 42px; flex: 0 0 auto; padding: 0 13px; scroll-snap-align: start; }
  .admin-main { overflow: hidden; }
  .admin-section-heading { gap: 12px; }
  .admin-heading-actions { justify-content: flex-start; }
}

@media (max-width: 640px) {
  html { scroll-padding-top: 76px; }
  body { overflow-x: hidden; }
  .container, .narrow-container { width: min(calc(100% - 22px), var(--container)); }
  .section-pad { padding: 58px 0; }
  .header-inner { gap: 10px; }
  .brand { gap: 8px; }
  .brand-mark { width: 39px; height: 39px; border-radius: 12px; }
  .brand-copy strong { max-width: 42vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mobile-menu-button { min-width: 44px; min-height: 44px; }

  .dashboard-content, .admin-shell { padding-top: 20px; padding-bottom: 64px; }
  .dashboard-grid, .admin-layout { gap: 12px; }
  .dashboard-sidebar, .admin-sidebar { border-radius: 15px; }
  .dashboard-nav { display: flex; gap: 7px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
  .dashboard-nav::-webkit-scrollbar { display: none; }
  .dashboard-nav button { width: auto; min-width: max-content; min-height: 42px; flex: 0 0 auto; padding: 0 13px; scroll-snap-align: start; }
  .dashboard-nav button svg, .admin-nav button svg { flex: 0 0 auto; }
  .profile-summary { display: none; }
  .dashboard-section-heading, .admin-section-heading { flex-direction: column; align-items: stretch; gap: 11px; margin-bottom: 15px; }
  .dashboard-section-heading h2, .admin-section-heading h2 { font-size: 1.38rem; }
  .dashboard-section-heading > .btn, .admin-section-heading > .btn { width: 100%; }
  .admin-heading-actions { display: grid; grid-template-columns: 1fr; width: 100%; }
  .admin-heading-actions .btn { width: 100%; }
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
  .stat-card { padding: 14px 12px; }
  .stat-card strong { font-size: 1.2rem; }
  .admin-panel, .content-form, .admin-manual-booking-form, .exceptions-panel { padding: 16px; }
  .admin-filters { grid-template-columns: 1fr; padding: 13px; }
  .admin-filters .btn { width: 100%; }
  .table-card { margin-inline: 0; border-radius: 15px; }
  .table-wrap { position: relative; padding-bottom: 2px; }
  .admin-table { min-width: 720px; }
  .admin-table th, .admin-table td { padding: 11px 12px; }
  .bookings-finance-table { min-width: 900px; }
  .compact-select { min-width: 128px; }
  .schedule-settings { grid-template-columns: 1fr; }
  .day-editor { padding: 14px; gap: 12px; }
  .time-range { grid-template-columns: 1fr 18px 1fr auto; gap: 6px; }
  .exception-form { grid-template-columns: 1fr; }
  .exception-form .btn { grid-column: auto; width: 100%; }
  .sticky-actions { bottom: max(10px, env(safe-area-inset-bottom)); }

  .site-media-editor-card { grid-template-columns: 82px minmax(0,1fr); padding: 14px; gap: 13px; }
  .site-media-preview { width: 82px; height: 82px; border-radius: 17px; }
  .site-media-copy .btn { width: 100%; }
  .about-heading-copy { align-items: flex-start; gap: 12px; }
  .about-tutor-photo { width: 64px; height: 64px; border-radius: 18px; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .span-2 { grid-column: auto; }
  .form-actions { display: grid; grid-template-columns: 1fr; }
  .form-actions .btn { width: 100%; }

  .lesson-booking-card { grid-template-columns: 50px minmax(0,1fr); gap: 12px; padding: 16px; }
  .lesson-date-box { height: 58px; }
  .lesson-title-row { flex-direction: column; gap: 8px; }
  .lesson-actions { display: grid; grid-template-columns: 1fr; }
  .lesson-actions .btn { width: 100%; }
  .recurring-series-card { padding: 15px; gap: 12px; }

  .chat-window { min-height: calc(100dvh - 190px); height: min(720px, calc(100dvh - 150px)); }
  .chat-message { max-width: 84%; }
  .chat-message.is-editing { width: min(88%, 520px); max-width: 88%; }
  .chat-message-actions { gap: 3px; }
  .chat-message-action { display: grid; width: 32px; height: 32px; opacity: .8; transform: none; box-shadow: none; border: 1px solid rgba(223,228,236,.9); }
  .chat-message-row:hover .chat-message-action, .chat-message-action:focus-visible { opacity: 1; transform: none; }
  .chat-message-row.is-own .chat-message-actions { order: -1; }
  .chat-edit-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .chat-edit-actions .btn { min-width: 0; padding-inline: 10px; }
  .chat-compose { padding: 8px 8px max(8px, env(safe-area-inset-bottom)); }
  .chat-scroll-bottom { right: 12px; bottom: 12px; }

  .payment-tracking-note { margin-top: 0; }
  .integration-card { align-items: stretch; }
  .integration-card > .btn, .integration-actions .btn { width: 100%; }
  .payment-qr-placeholder { min-height: 220px; }
}

@media (max-width: 420px) {
  .stats-grid { grid-template-columns: 1fr; }
  .site-media-editor-card { grid-template-columns: 1fr; }
  .site-media-preview { width: 96px; height: 96px; }
  .site-media-copy { width: 100%; }
  .slots-grid { grid-template-columns: repeat(2, 1fr); }
  .chat-message { max-width: 82%; }
  .chat-message-row { gap: 4px; }
  .chat-message-actions { flex-direction: column; }
  .chat-message-row.is-own .chat-message-actions { order: -1; }
  .chat-message-action { width: 30px; height: 30px; }
}
@media (max-width: 720px) {
  .chat-message-action { display: grid; opacity: .78; transform: none; }
  .chat-message-row:hover .chat-message-action, .chat-message-action:focus-visible { opacity: 1; transform: none; }
}

/* v1.6.0 — stable chat, header reminders, unread indicator, current schedule and mobile layout */
html, body, #app { width: 100%; max-width: 100%; overflow-x: clip; }
.site-header, .dashboard-hero, .admin-topbar, .site-footer, .page-main { width: 100%; max-width: 100%; }
.dashboard-grid, .admin-layout, .dashboard-main, .admin-main, .booking-list, .lesson-booking-card, .lesson-booking-card > *, .chat-layout, .chat-window { min-width: 0; max-width: 100%; }

.account-chip-shell { position: relative; display: flex; align-items: center; }
.chat-unread-indicator {
  position: absolute;
  z-index: 4;
  left: 27px;
  top: 0;
  width: 18px;
  height: 18px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #e33643;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 0 0 0 rgba(227,54,67,.45);
  animation: unreadPulse 1.25s ease-in-out infinite;
}
.chat-unread-indicator[hidden] { display: none; }
.chat-unread-indicator > span { width: 6px; height: 6px; border-radius: 50%; background: #fff; }
.chat-unread-indicator > b { position: absolute; left: 12px; top: -8px; min-width: 18px; height: 18px; padding: 0 4px; display: grid; place-items: center; border: 2px solid #fff; border-radius: 999px; background: #b91f2d; font-size: .56rem; line-height: 1; }
.chat-unread-indicator::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 9px);
  right: -8px;
  width: max-content;
  max-width: 250px;
  padding: 7px 9px;
  border-radius: 8px;
  background: #111827;
  color: #fff;
  font-size: .67rem;
  font-weight: 650;
  line-height: 1.35;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-3px);
  transition: .15s ease;
  box-shadow: var(--shadow-sm);
}
.chat-unread-indicator:hover::after, .chat-unread-indicator:focus-visible::after { opacity: 1; transform: translateY(0); }
@keyframes unreadPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(227,54,67,.45); } 50% { box-shadow: 0 0 0 7px rgba(227,54,67,0); } }

.header-lesson-reminder { border-top: 1px solid rgba(223,228,236,.78); background: rgba(246,248,252,.96); }
.header-lesson-reminder-inner { min-height: 34px; display: flex; align-items: center; justify-content: center; gap: 7px; color: #526079; font-size: .7rem; line-height: 1.3; }
.header-lesson-reminder-inner svg { width: 14px; height: 14px; flex: 0 0 auto; fill: none; stroke: var(--primary); stroke-width: 1.8; }
.header-lesson-reminder-inner strong { color: var(--ink); }
.header-lesson-separator { color: #a5afbf; }
.header-lesson-student { margin-left: 4px; padding: 2px 7px; border-radius: 999px; background: var(--primary-soft); color: var(--primary); font-weight: 750; }

.chat-messages { overflow-anchor: none; scrollbar-gutter: stable; }
.chat-message-row { scroll-margin-block: 10px; }
.chat-student.has-unread { font-weight: 700; }
.chat-list-unread { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: #e33643; box-shadow: 0 0 0 3px rgba(227,54,67,.11); }
.chat-header .avatar img, .avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

.current-schedule-panel { margin-top: 18px; padding: 20px; }
.current-schedule-wrap { margin: 0 -4px -4px; padding: 4px; }
.current-schedule-table { min-width: 980px; }
.current-schedule-table th:first-child, .current-schedule-table td:first-child { position: sticky; left: 0; z-index: 2; min-width: 190px; background: var(--surface); box-shadow: 8px 0 14px rgba(25,41,76,.035); }
.current-schedule-table thead th:first-child { z-index: 3; background: #fafbfe; }
.current-schedule-table td:first-child small { display: block; margin-top: 3px; color: var(--muted); font-size: .62rem; font-weight: 500; }
.current-schedule-student { color: var(--primary); font-weight: 800; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.current-schedule-student:hover { color: var(--primary-dark); }
.current-schedule-student.is-disabled { color: var(--ink); text-decoration: none; cursor: help; }
.schedule-time-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.schedule-time-chips span { display: inline-flex; padding: 4px 7px; border-radius: 8px; background: var(--primary-soft); color: var(--primary); font-size: .69rem; font-weight: 800; white-space: nowrap; }
.schedule-empty-cell { color: #b8c0ce; }

/* The hamburger is a phone control, not a tablet/desktop fallback. */
@media (min-width: 761px) {
  .desktop-nav { display: flex !important; }
  .mobile-menu-button, .mobile-nav { display: none !important; }
}

@media (max-width: 760px) {
  .desktop-nav { display: none; }
  .header-actions { margin-left: auto; }
  .mobile-menu-button { display: grid; }
  .mobile-nav { display: block; border-top: 1px solid var(--line); background: white; }
  .mobile-nav .container { padding: 10px 0 14px; display: grid; gap: 4px; }
  .mobile-nav .nav-link { display: block; }
  .nav-button { width: 100%; text-align: left; border: 0; }

  .container, .narrow-container { width: min(calc(100% - 24px), var(--container)); max-width: 100%; }
  .header-inner { min-height: 62px; gap: 8px; }
  .brand { min-width: 0; max-width: calc(100% - 102px); }
  .brand-mark { width: 36px; height: 36px; border-radius: 11px; }
  .brand-copy strong { max-width: 46vw; font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .brand-copy small { display: none; }
  .header-actions { min-width: 0; gap: 4px; }
  .account-chip { padding: 2px; }
  .account-chip > span:last-child, .desktop-only { display: none; }
  .chat-unread-indicator { left: 25px; top: -2px; }
  .chat-unread-indicator::after { display: none; }
  .header-lesson-reminder-inner { min-height: 38px; justify-content: flex-start; gap: 5px; overflow-x: auto; white-space: nowrap; scrollbar-width: none; font-size: .64rem; }
  .header-lesson-reminder-inner::-webkit-scrollbar { display: none; }
  .header-lesson-student { display: none; }

  .dashboard-hero-inner, .admin-topbar-inner { min-height: 0; padding: 24px 0; gap: 14px; flex-direction: column; align-items: stretch; justify-content: center; }
  .dashboard-hero h1, .admin-topbar h1 { margin-top: 7px; font-size: 1.65rem; line-height: 1.1; }
  .dashboard-hero p, .admin-topbar p { font-size: .78rem; }
  .dashboard-hero .btn, .admin-topbar .btn { width: 100%; min-height: 42px; }
  .dashboard-content, .admin-shell { padding-top: 14px; padding-bottom: 44px; }
  .dashboard-grid, .admin-layout { width: 100%; gap: 10px; }
  .dashboard-sidebar, .admin-sidebar { width: 100%; padding: 8px; border-radius: 14px; overflow: hidden; }
  .dashboard-nav, .admin-nav { display: flex; width: 100%; gap: 6px; margin-top: 0; padding: 1px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; overscroll-behavior-x: contain; scrollbar-width: none; }
  .dashboard-nav::-webkit-scrollbar, .admin-nav::-webkit-scrollbar { display: none; }
  .dashboard-nav button, .admin-nav button { width: auto; min-width: max-content; min-height: 38px; flex: 0 0 auto; padding: 0 11px; justify-content: center; border-radius: 9px; font-size: .72rem; scroll-snap-align: start; }
  .dashboard-nav i { display: none; }
  .profile-summary, .admin-profile { display: none; }
  .dashboard-main, .admin-main { width: 100%; overflow: visible; }
  .dashboard-section-heading, .admin-section-heading { margin-bottom: 12px; }
  .dashboard-section-heading h2, .admin-section-heading h2 { font-size: 1.25rem; }
  .dashboard-section-heading p, .admin-section-heading p { font-size: .72rem; }

  .booking-list { width: 100%; gap: 9px; }
  .lesson-booking-card { width: 100%; grid-template-columns: 46px minmax(0,1fr); gap: 10px; padding: 13px; border-radius: 14px; }
  .lesson-date-box { width: 46px; height: 52px; border-radius: 11px; }
  .lesson-date-box strong { font-size: 1.08rem; }
  .lesson-title-row { gap: 6px; }
  .lesson-title-row h3 { margin-top: 4px; font-size: .92rem; }
  .lesson-time { font-size: .82rem; }
  .lesson-meta { gap: 8px; margin-top: 8px; font-size: .62rem; }
  .lesson-comment { margin-top: 9px; padding: 9px 10px; font-size: .68rem; }
  .lesson-finance-row { margin-top: 9px; padding: 9px 10px; border-radius: 11px; }
  .lesson-actions { margin-top: 9px; display: grid; grid-template-columns: 1fr; gap: 6px; }
  .lesson-actions .btn, .lesson-actions button { width: 100%; min-width: 0; min-height: 38px; white-space: normal; }

  .chat-layout, .chat-layout-admin { width: 100%; min-height: 0; }
  .chat-window { width: 100%; min-height: calc(100dvh - 176px); height: min(700px, calc(100dvh - 126px)); border-radius: 13px; }
  .chat-header { min-width: 0; padding: 8px 10px; }
  .chat-header .student-cell { min-width: 0; }
  .chat-header .student-cell > span:last-child { min-width: 0; }
  .chat-header .student-cell strong, .chat-header .student-cell small { max-width: 52vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .chat-header .btn { min-height: 34px; padding: 0 8px; font-size: .68rem; }
  .chat-messages { width: 100%; padding: 13px 8px 16px; }
  .chat-message { max-width: 86%; font-size: .82rem; }
  .chat-message-text { font-size: .82rem; }
  .chat-compose { width: 100%; padding: 7px 7px max(7px, env(safe-area-inset-bottom)); }
  .chat-compose-input { padding-inline: 10px; }
  .chat-send-button { width: 44px; height: 44px; }

  .current-schedule-panel { padding: 14px; }
  .current-schedule-table { min-width: 880px; }
  .current-schedule-table th:first-child, .current-schedule-table td:first-child { min-width: 155px; }
  .current-schedule-student { font-size: .75rem; }

  .site-footer { padding-top: 44px; }
}

@media (max-width: 420px) {
  .container, .narrow-container { width: min(calc(100% - 18px), var(--container)); }
  .lesson-booking-card { grid-template-columns: 42px minmax(0,1fr); padding: 11px; gap: 9px; }
  .lesson-date-box { width: 42px; height: 48px; }
  .status-pill { padding: 3px 6px; font-size: .56rem; }
  .chat-message { max-width: 88%; }
  .chat-message-actions { flex-direction: row; }
}

/* v1.7.0 — timezone, verification and reply UX */
.timezone-profile-field small { color: var(--muted); line-height: 1.45; }
.media-visibility-toggle { display:flex; align-items:flex-start; gap:10px; margin-top:10px; padding:12px 13px; border:1px solid var(--line); border-radius:13px; background:var(--surface-soft); cursor:pointer; }
.media-visibility-toggle input { width:17px; height:17px; margin-top:2px; accent-color:var(--primary); }
.media-visibility-toggle > span { display:grid; gap:2px; }
.media-visibility-toggle small { color:var(--muted); font-weight:500; }

.chat-compose { display:block; padding:10px 12px; }
.chat-compose-row { display:flex; align-items:flex-end; gap:9px; width:100%; }
.chat-replying-preview-shell { margin:0 0 8px; }
.chat-replying-preview-shell[hidden] { display:none !important; }
.chat-replying-preview { position:relative; display:grid; grid-template-columns:3px minmax(0,1fr) 34px; gap:10px; align-items:center; padding:9px 8px 9px 10px; border:1px solid #dbe2f3; border-radius:12px; background:#f7f9ff; text-align:left; }
.chat-reply-accent { align-self:stretch; width:3px; border-radius:999px; background:var(--primary); }
.chat-replying-preview > div { min-width:0; display:grid; gap:2px; }
.chat-replying-preview small { color:var(--primary); font-size:.63rem; font-weight:800; }
.chat-replying-preview strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#43506a; font-size:.72rem; font-weight:650; }
.chat-reply-cancel { width:32px; height:32px; }
.chat-reply-reference { width:100%; min-width:0; margin:0 0 7px; padding:7px 9px; display:grid; gap:2px; border:0; border-left:3px solid rgba(48,83,198,.85); border-radius:7px; background:rgba(44,76,180,.07); color:inherit; text-align:left; cursor:pointer; }
.chat-message-row.is-own .chat-reply-reference { border-left-color:rgba(255,255,255,.72); background:rgba(255,255,255,.12); }
.chat-reply-reference strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--primary); font-size:.61rem; font-weight:850; }
.chat-message-row.is-own .chat-reply-reference strong { color:#fff; }
.chat-reply-reference span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; opacity:.78; font-size:.68rem; }
.chat-message-row.is-highlighted .chat-message { animation:chatReplyHighlight 1.25s ease; }
@keyframes chatReplyHighlight { 0%,100% { box-shadow:0 0 0 0 rgba(51,88,212,0); } 35% { box-shadow:0 0 0 5px rgba(51,88,212,.20); } }

.verification-required { max-width:680px; margin-inline:auto; padding:26px; border:1px solid #d7e0f7; background:linear-gradient(145deg,#fbfcff,#f1f5ff); box-shadow:0 16px 35px rgba(40,63,120,.08); }
.verification-required .verification-icon { width:54px; height:54px; margin:0 auto 12px; display:grid; place-items:center; border-radius:17px; background:var(--primary); color:white; }
.verification-required .verification-icon svg { width:25px; height:25px; fill:none; stroke:currentColor; stroke-width:1.8; }
.verification-required h3 { margin:0 0 7px; font-size:1.12rem; }
.verification-required .verification-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:16px; }
.verification-required .verification-tip { display:block; margin-top:13px; color:#6b7690; font-size:.68rem; line-height:1.5; }

.verification-page { min-height:calc(100vh - 170px); background:linear-gradient(180deg,#f6f8fd 0,#fff 68%); }
.verify-email-shell { max-width:680px; }
.verify-email-card { padding:42px; text-align:center; box-shadow:0 24px 70px rgba(28,46,87,.10); }
.verify-email-mark { width:76px; height:76px; margin:0 auto 19px; display:grid; place-items:center; border-radius:24px; background:var(--primary-soft); color:var(--primary); }
.verify-email-mark.is-success { background:#e9f8ef; color:#167342; }
.verify-email-mark.is-error { background:#fff0f0; color:#a82828; }
.verify-email-mark svg { width:34px; height:34px; fill:none; stroke:currentColor; stroke-width:1.7; }
.verify-email-card h1 { margin:0; font-size:clamp(1.55rem,4vw,2.25rem); }
.verify-email-card p { max-width:520px; margin:11px auto 0; color:var(--muted); line-height:1.65; }
.verify-email-card .verify-email-address { display:inline-flex; margin-top:14px; padding:7px 11px; border-radius:999px; background:var(--surface-soft); color:#47536b; font-size:.76rem; font-weight:700; }
.verify-email-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:9px; margin-top:23px; }
.verify-email-spinner { width:34px; height:34px; margin:0 auto 18px; border:3px solid #dfe5f7; border-top-color:var(--primary); border-radius:50%; animation:verifySpin .75s linear infinite; }
@keyframes verifySpin { to { transform:rotate(360deg); } }

.review-content-editor { padding:15px; border:1px solid var(--line); border-radius:14px; background:var(--surface-soft); }
.review-content-editor legend { padding:0 7px; color:var(--ink); font-size:.75rem; font-weight:850; }

@media (max-width:720px) {
  .chat-compose { display:block; padding:8px 8px max(8px, env(safe-area-inset-bottom)); }
  .chat-compose-row { gap:7px; }
  .chat-replying-preview { grid-template-columns:3px minmax(0,1fr) 30px; padding:7px; }
  .chat-reply-cancel { width:29px; height:29px; }
  .chat-reply-reference { padding:6px 8px; }
  .verification-required { padding:20px 14px; }
  .verification-required .verification-actions, .verify-email-actions { display:grid; grid-template-columns:1fr; }
  .verification-required .btn, .verify-email-actions .btn { width:100%; }
  .verify-email-card { padding:28px 16px; }
  .verify-email-mark { width:64px; height:64px; border-radius:20px; }
}
.verify-brand { display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:30px; }
.verify-brand .brand-mark { width:42px; height:42px; flex:0 0 auto; }
.verify-brand > span:last-child { display:grid; gap:1px; text-align:left; }
.verify-brand strong { font-size:.82rem; }
.verify-brand small { color:var(--muted); font-size:.62rem; }
.verify-status-icon { width:74px; height:74px; margin:0 auto 18px; display:grid; place-items:center; border-radius:24px; background:#edf2ff; color:var(--primary); font-size:2rem; font-weight:900; }
.verify-status-icon svg { width:35px; height:35px; fill:none; stroke:currentColor; stroke-width:1.8; }
.verify-status-icon.is-success { background:#e9f8ef; color:#167342; }
.verify-status-icon.is-error { background:#fff0f0; color:#a82828; }
.verify-status-icon .spinner { width:30px; height:30px; border:3px solid rgba(51,88,212,.18); border-top-color:currentColor; border-radius:50%; animation:verifySpin .75s linear infinite; }
.verify-email-card > .btn { margin-top:22px; }
.verify-security-note { max-width:430px; margin:22px auto 0; display:flex; align-items:center; justify-content:center; gap:7px; color:#7b869a; font-size:.66rem; }
.verify-security-note svg { width:16px; height:16px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.7; }
.review-editor-card { min-width:0; margin:0; padding:15px; border:1px solid var(--line); border-radius:14px; background:var(--surface-soft); }
.review-editor-card legend { padding:0 7px; color:var(--ink); font-size:.75rem; font-weight:850; }
.review-editor-card .form-grid { margin-top:2px; }


/* v1.7 Google Meet transparency */
.meet-transparency-card { display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:center; padding:28px 30px; border:1px solid rgba(59,91,219,.12); background:linear-gradient(135deg,#fff,#f7f9ff); }
.meet-transparency-card h2 { margin:6px 0 8px; font-size:clamp(1.25rem,2.4vw,1.75rem); }
.meet-transparency-card p { margin:0; color:var(--muted); line-height:1.65; max-width:850px; }
.meet-transparency-icon { width:58px; height:58px; border-radius:18px; display:grid; place-items:center; background:#fff; box-shadow:0 10px 30px rgba(20,35,70,.08); }
.meet-transparency-icon svg { width:30px; height:30px; }
.meet-transparency-card .text-link { display:inline-flex; margin-top:12px; font-weight:800; color:var(--primary); }
@media (max-width: 640px) { .meet-transparency-card { grid-template-columns:1fr; padding:22px 18px; gap:14px; } .meet-transparency-icon { width:50px; height:50px; border-radius:15px; } }


/* v1.8.0 — protected registration onboarding */
.onboarding-card { max-width:680px; }
.onboarding-progress { width:min(260px,72%); margin:0 auto 10px; display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.onboarding-progress span { height:5px; border-radius:999px; background:#e6eaf3; }
.onboarding-progress span.is-active { background:var(--primary); box-shadow:0 0 0 3px rgba(51,88,212,.08); }
.onboarding-progress span.is-done { background:#46a36d; }
.onboarding-step-label { margin:0 auto 10px !important; color:var(--primary) !important; font-size:.7rem; font-weight:850; letter-spacing:.04em; text-transform:uppercase; }
.onboarding-form { max-width:520px; margin:25px auto 0; display:grid; gap:15px; text-align:left; }
.onboarding-form label { display:grid; gap:7px; color:var(--ink); font-size:.78rem; font-weight:800; }
.onboarding-form input, .onboarding-form select { width:100%; min-height:48px; border:1px solid var(--line); border-radius:12px; background:#fff; padding:0 13px; color:var(--ink); font:inherit; font-weight:600; outline:none; }
.onboarding-form input:focus, .onboarding-form select:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(51,88,212,.10); }
.onboarding-form small { color:var(--muted); line-height:1.45; font-size:.66rem; font-weight:500; }
.verification-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:9px; margin-top:23px; }
.verification-help { max-width:520px; margin:20px auto 0; padding:13px 15px; display:grid; gap:4px; border:1px solid #e4e8f2; border-radius:13px; background:#f8f9fc; color:var(--muted); text-align:left; font-size:.7rem; line-height:1.5; }
.verification-help strong { color:var(--ink); font-size:.72rem; }
.verify-logout { margin-top:18px; }
.timezone-profile-field select, .onboarding-form select { font-variant-numeric:tabular-nums; }

@media (max-width:720px) {
  .onboarding-progress { width:82%; }
  .onboarding-form { margin-top:20px; }
  .verification-actions { display:grid; grid-template-columns:1fr; }
  .verification-actions .btn { width:100%; }
  .verification-help { padding:12px; }
}

/* v1.9.0 — mobile chat, live lesson status and time-first schedule */
.header-lesson-reminder-inner { display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; padding-block:5px; }
.header-lesson-item { min-width:0; display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:10px; white-space:nowrap; }
.header-lesson-item.is-current { background:#ecf8f1; color:#365e49; }
.header-lesson-item.is-current strong { color:#174e31; }
.header-lesson-item.is-next { color:#526079; }
.header-lesson-live-dot { width:8px; height:8px; flex:0 0 auto; border-radius:50%; background:#21a25c; box-shadow:0 0 0 0 rgba(33,162,92,.42); animation:lessonLivePulse 1.7s ease-out infinite; }
@keyframes lessonLivePulse { 0% { box-shadow:0 0 0 0 rgba(33,162,92,.42); } 70% { box-shadow:0 0 0 7px rgba(33,162,92,0); } 100% { box-shadow:0 0 0 0 rgba(33,162,92,0); } }

.schedule-sort-caption { display:flex; flex-wrap:wrap; gap:5px 8px; margin:4px 0 10px; color:var(--muted); font-size:.7rem; line-height:1.45; }
.schedule-sort-caption strong { color:var(--ink); }
.schedule-day-sort { display:flex; gap:6px; margin:0 0 12px; padding:2px 0 4px; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:thin; }
.schedule-day-sort button { flex:0 0 auto; min-height:34px; padding:0 11px; border:1px solid var(--line); border-radius:10px; background:#fff; color:#66738a; font:inherit; font-size:.68rem; font-weight:750; cursor:pointer; transition:.16s ease; }
.schedule-day-sort button:hover { border-color:#bbc7e8; color:var(--primary); }
.schedule-day-sort button.is-active { border-color:var(--primary); background:var(--primary-soft); color:var(--primary); box-shadow:0 0 0 2px rgba(51,88,212,.06); }
.current-schedule-table th.is-sort-day { background:#edf2ff; color:var(--primary); }
.current-schedule-table td.is-sort-day { background:rgba(237,242,255,.52); }
.schedule-single-time { display:inline-flex; min-width:54px; justify-content:center; padding:5px 8px; border-radius:9px; background:#f1f4fb; color:#33405a; font-weight:800; font-size:.72rem; }
.current-schedule-table td.is-sort-day .schedule-single-time { background:#dfe8ff; color:#244ab3; }

.schedule-time-grid-panel { margin-top:18px; padding:20px; }
.schedule-time-grid-wrap { margin:0 -4px -4px; padding:4px; }
.schedule-time-grid { min-width:1040px; table-layout:fixed; }
.schedule-time-grid th:first-child, .schedule-time-grid td:first-child { position:sticky; left:0; z-index:2; width:82px; min-width:82px; background:var(--surface); box-shadow:8px 0 14px rgba(25,41,76,.035); text-align:center; }
.schedule-time-grid thead th:first-child { z-index:3; background:#fafbfe; }
.schedule-time-grid th:not(:first-child) { min-width:130px; }
.schedule-time-grid tr.is-empty td { color:#a0a9b8; background:#fbfcfe; }
.schedule-time-grid tr.is-occupied td:first-child strong { color:var(--primary); }
.schedule-grid-students { display:grid; gap:5px; align-items:start; }
.schedule-grid-student { display:block; width:100%; padding:5px 7px; border-radius:8px; background:#eef3ff; color:#2d53bd; font-size:.66rem; font-weight:800; line-height:1.25; text-decoration:none; overflow-wrap:anywhere; }
a.schedule-grid-student:hover { background:#dfe8ff; color:#173d9f; }
.schedule-grid-student.is-disabled { background:#f2f4f7; color:#5f6b7f; cursor:help; }

.chat-mobile-back, .chat-mobile-actions-toggle { display:none; }

@media (max-width:720px) {
  .header-lesson-reminder-inner { min-height:42px; flex-wrap:nowrap; justify-content:flex-start; gap:7px; padding-block:5px; overflow-x:auto; overflow-y:hidden; white-space:nowrap; scroll-snap-type:x proximity; scrollbar-width:none; }
  .header-lesson-reminder-inner::-webkit-scrollbar { display:none; }
  .header-lesson-item { flex:0 0 auto; max-width:none; scroll-snap-align:start; padding:5px 7px; font-size:.63rem; }
  .header-lesson-item .header-lesson-student { display:inline-flex; }

  .chat-layout, .chat-layout-admin { width:100%; min-width:0; }
  .chat-window { position:relative; width:100%; min-width:0; height:clamp(500px, calc(100dvh - 118px), 760px); min-height:500px; max-height:760px; overflow:hidden; border-radius:14px; }
  .chat-header { flex:0 0 auto; min-height:58px; gap:7px; padding:8px; }
  .chat-header .student-cell { flex:1; min-width:0; gap:7px; }
  .chat-header .avatar.small { width:36px; height:36px; flex:0 0 36px; }
  .chat-header .student-cell strong { max-width:44vw; font-size:.76rem; }
  .chat-header .student-cell small { max-width:44vw; font-size:.59rem; }
  .chat-header-actions { flex:0 0 auto; min-width:0; }
  .chat-header-actions .btn { min-height:34px; padding-inline:8px; white-space:nowrap; }
  .chat-mobile-back { width:34px; height:34px; flex:0 0 34px; display:grid; place-items:center; border-radius:10px; font-size:1.45rem; line-height:1; }

  .chat-messages-shell { min-height:0; flex:1 1 auto; overflow:hidden; }
  .chat-messages { min-height:0; height:100%; width:100%; padding:12px 7px 16px; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; overscroll-behavior-y:contain; touch-action:pan-y; scroll-padding-block:48px 18px; }
  .chat-message-row { position:relative; min-width:0; gap:5px; }
  .chat-message { max-width:calc(100% - 42px); min-width:70px; padding:8px 10px 6px; }
  .chat-message-text { padding-right:38px; font-size:.83rem; line-height:1.42; }
  .chat-message-meta { right:7px; bottom:5px; }
  .chat-reply-reference { max-width:100%; }
  .chat-message.is-editing { width:calc(100% - 42px); max-width:calc(100% - 42px); }

  .chat-mobile-actions-toggle { width:32px; height:32px; flex:0 0 32px; display:grid; place-items:center; border:1px solid rgba(213,220,232,.95); border-radius:50%; background:rgba(255,255,255,.94); color:#69758a; box-shadow:0 3px 11px rgba(28,42,71,.08); font-size:.72rem; font-weight:900; letter-spacing:-1px; cursor:pointer; }
  .chat-message-row.is-own .chat-mobile-actions-toggle { order:-1; }
  .chat-message-actions { display:none !important; position:absolute; z-index:8; bottom:calc(100% + 4px); right:2px; gap:4px; padding:5px; border:1px solid var(--line); border-radius:12px; background:#fff; box-shadow:0 10px 28px rgba(27,41,72,.18); }
  .chat-message-row.is-own .chat-message-actions { right:36px; left:auto; order:initial; }
  .chat-message-row:not(.is-own) .chat-message-actions { left:auto; right:36px; }
  .chat-message-actions.is-open { display:flex !important; flex-direction:row; }
  .chat-message-action { display:grid; width:34px; height:34px; opacity:1; transform:none; border:0; box-shadow:none; background:#f5f7fb; }
  .chat-message-action:active { background:#e8edfa; }

  .chat-compose { flex:0 0 auto; width:100%; padding:7px 7px max(7px, env(safe-area-inset-bottom)); background:#fff; }
  .chat-compose-row { width:100%; gap:6px; align-items:flex-end; }
  .chat-compose-input { min-width:0; border-radius:16px; padding:4px 10px 3px; }
  .chat-compose textarea { min-height:42px; max-height:112px; padding:9px 0 4px; font-size:16px; line-height:1.35; overscroll-behavior:contain; }
  .chat-compose-input small { display:none; }
  .chat-send-button { width:44px; height:44px; flex:0 0 44px; }
  .chat-replying-preview-shell { margin-bottom:6px; }
  .chat-scroll-bottom { right:10px; bottom:10px; width:40px; height:40px; }

  .chat-layout-admin.is-mobile-list-mode .chat-window { display:none; }
  .chat-layout-admin:not(.is-mobile-list-mode) .chat-students { display:none; }
  .chat-layout-admin.is-mobile-list-mode .chat-students { display:flex; flex-direction:column; width:100%; height:clamp(430px, calc(100dvh - 160px), 680px); max-height:680px; margin:0; overflow:hidden; border-radius:14px; }
  .chat-layout-admin.is-mobile-list-mode .chat-student-list { flex:1; min-height:0; max-height:none; overflow-y:auto; -webkit-overflow-scrolling:touch; }
  .chat-layout-admin.is-mobile-list-mode .chat-search-empty { flex:0 0 auto; }

  .schedule-day-sort { margin-inline:-2px; }
  .schedule-day-sort button { min-height:36px; }
  .current-schedule-panel, .schedule-time-grid-panel { padding:14px; }
  .current-schedule-table { min-width:900px; }
  .schedule-time-grid { min-width:960px; }
  .schedule-time-grid-panel .panel-heading { align-items:stretch; }
  .schedule-time-grid-panel .panel-heading .btn { width:100%; }
  .schedule-grid-student { font-size:.64rem; }
}

@media (max-width:420px) {
  .chat-window { height:clamp(480px, calc(100dvh - 92px), 700px); min-height:480px; }
  .chat-header .student-cell strong, .chat-header .student-cell small { max-width:39vw; }
  .chat-header-actions .btn { padding-inline:7px; font-size:.62rem; }
  .chat-message { max-width:calc(100% - 38px); }
  .chat-message.is-editing { width:calc(100% - 38px); max-width:calc(100% - 38px); }
  .chat-mobile-actions-toggle { width:30px; height:30px; flex-basis:30px; }
  .chat-message-row.is-own .chat-message-actions, .chat-message-row:not(.is-own) .chat-message-actions { right:32px; }
  .header-lesson-item { font-size:.6rem; }
}

/* v1.11.0 — persistent admin tabs, clickable lesson reminders, split booking history and tax reserve */
.header-lesson-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background .16s ease, box-shadow .16s ease, transform .16s ease;
}
.header-lesson-link:hover {
  box-shadow: 0 4px 14px rgba(33, 53, 94, .1);
  transform: translateY(-1px);
}
.header-lesson-link.is-current:hover { background: #e2f4e9; }
.header-lesson-link.is-next:hover { background: #edf2fb; }
.header-lesson-open { margin-left: 2px; font-weight: 900; opacity: .68; }

.booking-table-section { display: grid; gap: 10px; margin-top: 18px; }
.booking-table-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.booking-table-heading h3, .booking-table-heading p { margin: 0; }
.booking-table-heading h3 { font-size: 1rem; }
.booking-table-heading p { margin-top: 4px; color: var(--muted); font-size: .75rem; }
.completed-bookings-section { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.completed-bookings-section .table-card { background: #fbfcfe; }

.tax-reserve-card { margin: 0 0 18px; padding: 22px; overflow: hidden; }
.tax-reserve-top { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; }
.tax-reserve-top h3, .tax-reserve-top p { margin: 0; }
.tax-reserve-top h3 { margin-top: 5px; font-size: 1.4rem; }
.tax-reserve-top p { margin-top: 7px; max-width: 760px; color: var(--muted); font-size: .76rem; line-height: 1.5; }
.tax-kicker { display: inline-flex; padding: 5px 9px; border-radius: 999px; background: #eef3ff; color: #3155b6; font-size: .66rem; font-weight: 850; letter-spacing: .025em; }
.tax-status { flex: 0 0 auto; padding: 8px 11px; border-radius: 999px; font-size: .7rem; font-weight: 850; }
.tax-status.is-covered { background: #e9f7ef; color: #17643a; }
.tax-status.is-gap { background: #fff4df; color: #8a5a00; }
.tax-metrics-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.tax-metrics-grid > div { min-width: 0; padding: 13px 14px; border: 1px solid var(--line); border-radius: 14px; background: #fbfcff; }
.tax-metrics-grid small, .tax-metrics-grid span { display: block; color: var(--muted); }
.tax-metrics-grid small { font-size: .64rem; font-weight: 750; }
.tax-metrics-grid strong { display: block; margin-top: 5px; font-size: 1rem; overflow-wrap: anywhere; }
.tax-metrics-grid span { margin-top: 4px; font-size: .64rem; line-height: 1.4; }
.tax-progress { height: 9px; margin-top: 16px; border-radius: 999px; background: #edf0f6; overflow: hidden; }
.tax-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #4d72dd, #2f9b67); }
.tax-disclaimer { margin: 10px 0 0; color: var(--muted); font-size: .66rem; line-height: 1.5; }
.tax-disclaimer strong { color: var(--ink); }

@media (max-width: 980px) {
  .tax-metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .header-lesson-link { -webkit-tap-highlight-color: transparent; }
  .booking-table-heading { align-items: flex-start; }
  .tax-reserve-card { padding: 16px; }
  .tax-reserve-top { flex-direction: column; gap: 10px; }
  .tax-status { align-self: flex-start; }
  .tax-metrics-grid { grid-template-columns: 1fr; }
}

/* v1.12 finance + booking filters */
.booking-filter-panel { grid-template-columns: minmax(260px, 1fr) 180px auto; align-items: end; }
.booking-status-filter-group { grid-column: 1 / -1; display: grid; gap: 9px; padding-top: 12px; border-top: 1px solid var(--line); }
.booking-status-filter-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.booking-status-filter-heading strong { font-size: .78rem; }
.booking-status-filter-heading > div { display: flex; gap: 12px; }
.booking-status-checkboxes { display: flex; flex-wrap: wrap; gap: 8px; }
.booking-status-checkboxes label { display: inline-flex; flex-direction: row; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); cursor: pointer; }
.booking-status-checkboxes input { width: 15px; height: 15px; margin: 0; accent-color: var(--primary); }
.booking-status-checkboxes span { font-size: .72rem; line-height: 1; }

.earnings-overview-card { margin: 0 0 18px; padding: 20px; }
.earnings-filter-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.earnings-filter-row label { min-width: 180px; flex: 1 1 180px; }
.earnings-metrics-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin-top: 14px; }
.earnings-metrics-grid > div, .goals-tax-gate > div { border: 1px solid var(--line); border-radius: 12px; padding: 13px; display: grid; gap: 4px; background: var(--surface-soft); }
.earnings-metrics-grid small, .goals-tax-gate small { color: var(--muted); font-size: .68rem; }
.earnings-metrics-grid strong, .goals-tax-gate strong { font-size: 1.05rem; }
.earnings-metrics-grid span { color: var(--muted); font-size: .66rem; }
.manual-payment-match { display: flex; gap: 7px; align-items: center; min-width: 300px; }
.manual-payment-match select { min-width: 170px; }

.goals-tax-gate { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; padding: 18px; margin-bottom: 16px; }
.savings-goal-form { margin-bottom: 16px; }
.savings-goals-list { display: grid; gap: 12px; }
.savings-goal-card { padding: 18px; }
.savings-goal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.savings-goal-head h3, .savings-goal-head p { margin: 0; }
.savings-goal-head h3 { margin-top: 5px; }
.savings-goal-head p { margin-top: 5px; color: var(--muted); font-size: .75rem; }
.goal-actions { display: flex; flex-wrap: wrap; gap: 7px; justify-content: flex-end; }
.goal-status { display: inline-flex; padding: 4px 8px; border-radius: 999px; background: var(--surface-soft); color: var(--muted); font-size: .65rem; font-weight: 700; }
.goal-status.is-complete { background: rgba(35, 150, 95, .12); color: var(--success); }
.goal-amount-row { display: flex; align-items: baseline; gap: 6px; margin-top: 15px; }
.goal-amount-row strong { font-size: 1.25rem; }
.goal-amount-row span { color: var(--muted); font-size: .75rem; }
.goal-progress { height: 9px; border-radius: 999px; background: var(--surface-soft); overflow: hidden; margin-top: 9px; }
.goal-progress i { display: block; height: 100%; border-radius: inherit; background: currentColor; }
.goal-edit-form { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }

@media (max-width: 760px) {
  .booking-filter-panel { grid-template-columns: 1fr; }
  .booking-status-filter-heading { align-items: flex-start; }
  .booking-status-checkboxes { display: grid; grid-template-columns: 1fr 1fr; }
  .booking-status-checkboxes label { border-radius: 10px; }
  .earnings-metrics-grid, .goals-tax-gate { grid-template-columns: 1fr; }
  .manual-payment-match { min-width: 240px; flex-direction: column; align-items: stretch; }
  .manual-payment-match select { min-width: 0; }
  .savings-goal-head { flex-direction: column; }
  .goal-actions { justify-content: flex-start; }
}

/* v1.13.0 — professional UX/UI refinement */
:root {
  --bg: #f5f7fb;
  --surface: #ffffff;
  --surface-soft: #f7f9fc;
  --surface-raised: #ffffff;
  --ink: #152039;
  --muted: #65728a;
  --muted-strong: #4c5a72;
  --line: #e2e7ef;
  --line-strong: #cfd7e4;
  --primary: #3456d1;
  --primary-dark: #2745b2;
  --primary-soft: #eef2ff;
  --primary-subtle: #f6f8ff;
  --accent: #f2b84b;
  --accent-soft: #fff5dc;
  --success: #13785e;
  --success-soft: #e8f7f1;
  --danger: #b73847;
  --danger-soft: #fff0f2;
  --warning: #9a6300;
  --warning-soft: #fff6df;
  --navy: #111d38;
  --navy-2: #1a2b50;
  --shadow-xs: 0 1px 2px rgba(20, 32, 57, .04);
  --shadow-sm: 0 8px 24px rgba(20, 32, 57, .065);
  --shadow-md: 0 20px 54px rgba(20, 32, 57, .11);
  --shadow-lg: 0 32px 90px rgba(17, 29, 56, .16);
  --radius-xs: 8px;
  --radius-sm: 11px;
  --radius: 16px;
  --radius-lg: 24px;
  --container: 1200px;
}

html { background: var(--bg); }
body {
  background:
    radial-gradient(circle at 12% 0%, rgba(70, 102, 218, .045), transparent 24rem),
    var(--bg);
  letter-spacing: -.004em;
}
::selection { background: #dce5ff; color: #10245e; }
:focus-visible { outline: 3px solid rgba(52, 86, 209, .25); outline-offset: 3px; }
button:disabled, .btn:disabled { cursor: not-allowed; opacity: .55; transform: none !important; box-shadow: none !important; }
input::placeholder, textarea::placeholder { color: #9aa6b9; opacity: 1; }
input, select, textarea { caret-color: var(--primary); }

.skip-link {
  position: fixed;
  left: 14px;
  top: 10px;
  z-index: 999;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--navy);
  color: #fff;
  font-size: .78rem;
  font-weight: 800;
  box-shadow: var(--shadow-md);
  transform: translateY(-160%);
  transition: transform .18s ease;
}
.skip-link:focus { transform: translateY(0); }

.container { width: min(calc(100% - 48px), var(--container)); }
.section-pad { padding: 88px 0; }
.card {
  border-color: var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs), var(--shadow-sm);
}

/* Header and navigation */
.site-header {
  background: rgba(255, 255, 255, .86);
  border-bottom-color: rgba(220, 226, 236, .88);
  backdrop-filter: blur(22px) saturate(150%);
  box-shadow: 0 1px 0 rgba(255,255,255,.7);
}
.header-inner { min-height: 72px; gap: 24px; }
.brand { min-width: 214px; gap: 10px; }
.brand-mark {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(145deg, #2949bd, #5671df);
  box-shadow: 0 8px 20px rgba(52, 86, 209, .22), inset 0 1px 0 rgba(255,255,255,.22);
}
.brand-copy strong { font-size: .95rem; letter-spacing: -.018em; }
.brand-copy small { color: #7a8699; }
.desktop-nav {
  justify-content: center;
  gap: 3px;
  padding: 4px;
  border-radius: 13px;
}
.nav-link {
  min-height: 40px;
  padding: 9px 13px;
  display: inline-flex;
  align-items: center;
  border-radius: 10px;
  font-size: .84rem;
  font-weight: 720;
}
.nav-link:hover { color: var(--ink); background: #f5f7fb; }
.nav-link.is-active, .nav-link[aria-current="page"] {
  color: var(--primary);
  background: var(--primary-soft);
  box-shadow: inset 0 0 0 1px rgba(52, 86, 209, .08);
}
.account-chip { min-height: 44px; border: 1px solid transparent; }
.account-chip:hover { border-color: var(--line); background: #f9fafc; }
.avatar { box-shadow: inset 0 0 0 1px rgba(52,86,209,.08); }

/* Buttons */
.btn {
  min-height: 44px;
  border-radius: 10px;
  font-size: .82rem;
  font-weight: 780;
  letter-spacing: -.005em;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease, color .16s ease;
}
.btn-primary {
  background: linear-gradient(180deg, #3b5ed7, #3152ca);
  box-shadow: 0 8px 18px rgba(52, 86, 209, .19), inset 0 1px 0 rgba(255,255,255,.14);
}
.btn-primary:hover { background: linear-gradient(180deg, #3153ca, #2947b6); box-shadow: 0 10px 24px rgba(52,86,209,.24); }
.btn-secondary { background: #fff; border-color: var(--line-strong); box-shadow: 0 1px 2px rgba(20,32,57,.025); }
.btn-secondary:hover { background: #f9fafc; border-color: #b8c3d4; }
.btn-ghost { color: var(--muted-strong); }
.btn-ghost:hover { background: #f3f6fa; color: var(--ink); }
.btn-danger-ghost { border-color: rgba(183,56,71,.08); }
.btn-large { min-height: 52px; padding-inline: 22px; border-radius: 11px; }
.btn-small { min-height: 36px; }
.icon-button { border-radius: 10px; color: var(--muted-strong); }
.icon-button:hover { background: #f2f5f9; color: var(--ink); }
.link-button { text-underline-offset: 3px; }

/* Public homepage */
.hero {
  padding-top: 74px;
  background:
    radial-gradient(circle at 78% 28%, rgba(77, 111, 226, .08), transparent 25rem),
    linear-gradient(180deg, #fff 0%, #f7f9fc 100%);
}
.hero-grid { gap: 72px; }
.hero-copy h1 {
  margin-top: 16px;
  margin-bottom: 20px;
  font-size: clamp(2.8rem, 5vw, 4.7rem);
  line-height: 1.01;
  letter-spacing: -.055em;
  text-wrap: balance;
}
.hero-lead { color: #5f6d84; font-size: 1.08rem; line-height: 1.72; text-wrap: pretty; }
.eyebrow { color: #3c5ecf; letter-spacing: .105em; }
.hero-actions { margin-top: 29px; }
.hero-note { margin-top: 18px; }
.hero-metrics { margin-top: 38px; padding-top: 21px; }
.hero-metrics strong { color: #283650; }
.hero-visual { min-height: 540px; }
.math-board {
  width: min(100%, 475px);
  min-height: 510px;
  border-radius: 27px;
  background: linear-gradient(145deg, #111d38 0%, #1c315c 62%, #253d70 100%);
  box-shadow: 0 34px 80px rgba(17, 29, 56, .24), inset 0 1px 0 rgba(255,255,255,.06);
  transform: rotate(.55deg);
}
.teacher-card { box-shadow: 0 14px 35px rgba(4,12,29,.18); }
.trust-strip { background: rgba(255,255,255,.92); }
.trust-grid > div { transition: background .18s ease; }
.trust-grid > div:hover { background: #fafbfe; }
.section-heading h2, .learning-panel h2 { letter-spacing: -.04em; text-wrap: balance; }
.feature-card {
  border-color: var(--line);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(20,32,57,.025);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.feature-card:hover { transform: translateY(-3px); border-color: #d5ddeb; box-shadow: var(--shadow-md); }
.review-card { border-radius: 18px; box-shadow: 0 1px 2px rgba(20,32,57,.025); }
.lesson-example-card { border-radius: 14px; }
.price-card { border-radius: 18px; }
.faq-section { border-top: 1px solid #eef1f5; }
summary { min-height: 64px; padding-block: 20px; }
summary:hover { color: var(--primary); }
.cta-panel { border-radius: 24px 0 0 24px; }
.contact-form { border-radius: 0 24px 24px 0; }

/* Forms */
label { color: #35435b; font-size: .76rem; font-weight: 740; }
input, select, textarea {
  min-height: 45px;
  border-color: #cfd7e3;
  border-radius: 10px;
  padding: 11px 12px;
  box-shadow: inset 0 1px 1px rgba(20,32,57,.018);
}
input:hover:not(:disabled), select:hover:not(:disabled), textarea:hover:not(:disabled) { border-color: #bbc6d6; }
input:focus, select:focus, textarea:focus {
  border-color: #5875da;
  box-shadow: 0 0 0 4px rgba(52, 86, 209, .09);
}
.checkbox-card { border-color: var(--line); transition: border-color .16s ease, background .16s ease, box-shadow .16s ease; }
.checkbox-card:hover { border-color: #bac6da; background: #fbfcff; }
.checkbox-card:has(input:checked) { border-color: #aebce8; background: var(--primary-subtle); box-shadow: inset 0 0 0 1px rgba(52,86,209,.05); }

/* Booking funnel */
.page-hero {
  background:
    radial-gradient(circle at 50% -30%, rgba(65, 96, 211, .09), transparent 30rem),
    #fff;
}
.compact-page-hero { padding: 58px 0 50px; }
.compact-page-hero h1 { font-size: clamp(2.25rem, 4.6vw, 3.65rem); text-wrap: balance; }
.compact-page-hero p { color: #68758a; text-wrap: pretty; }
.booking-section { padding-top: 42px; }
.booking-layout { grid-template-columns: minmax(0, 1.42fr) minmax(310px, .58fr); gap: 20px; }
.booking-calendar, .booking-summary { padding: 26px; }
.booking-summary { top: 92px; }
.step-number {
  box-shadow: 0 6px 14px rgba(52,86,209,.16);
  background: linear-gradient(180deg, #3c60d8, #3152c9);
}
.date-scroller { grid-auto-columns: 76px; gap: 7px; scrollbar-color: #cad2df transparent; }
.date-choice {
  min-height: 88px;
  border-color: var(--line);
  border-radius: 11px;
  transition: border-color .16s ease, background .16s ease, transform .16s ease, box-shadow .16s ease;
}
.date-choice:hover { border-color: #9eafd0; background: #fbfcff; transform: translateY(-1px); }
.date-choice.is-selected { background: linear-gradient(180deg, #3d60d7, #3151c7); box-shadow: 0 8px 18px rgba(52,86,209,.2); }
.slot-button {
  min-height: 76px;
  border-color: var(--line);
  border-radius: 10px;
  transition: border-color .16s ease, background .16s ease, transform .16s ease, box-shadow .16s ease;
}
.slot-button:hover:not(:disabled) { transform: translateY(-1px); border-color: #8096dc; background: #f6f8ff; box-shadow: 0 5px 14px rgba(52,86,209,.08); }
.slot-button.is-selected { background: linear-gradient(180deg, #3c5fd6, #3150c5); box-shadow: 0 7px 17px rgba(52,86,209,.18); }
.slot-button.is-disabled { opacity: .58; }
.auth-required, .verification-required { border: 1px solid var(--line); background: #f8fafc; }
.booking-assurances > div { background: #fff; box-shadow: 0 1px 2px rgba(20,32,57,.02); }

/* Dashboard + admin shell */
.dashboard-hero, .admin-topbar {
  position: relative;
  overflow: hidden;
  background: linear-gradient(120deg, #111d38 0%, #1a2c53 55%, #244276 100%);
}
.dashboard-hero::after, .admin-topbar::after {
  content: "";
  position: absolute;
  right: -120px;
  top: -210px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 0 0 70px rgba(255,255,255,.018), 0 0 0 140px rgba(255,255,255,.012);
  pointer-events: none;
}
.dashboard-hero-inner, .admin-topbar-inner { position: relative; z-index: 1; min-height: 190px; }
.admin-topbar-inner { min-height: 176px; }
.dashboard-hero h1, .admin-topbar h1 { margin-top: 8px; font-size: clamp(2rem, 3.6vw, 2.65rem); }
.dashboard-hero p, .admin-topbar p { color: #c1cce2; }
.dashboard-content, .admin-shell { padding-top: 32px; }
.dashboard-grid, .admin-layout { grid-template-columns: 248px minmax(0,1fr); gap: 24px; }
.dashboard-sidebar, .admin-sidebar {
  top: 92px;
  padding: 14px;
  border-color: #dde3ec;
  box-shadow: 0 8px 28px rgba(20,32,57,.06);
}
.profile-summary, .admin-profile { padding: 7px 6px 16px; }
.dashboard-nav, .admin-nav { gap: 4px; margin-top: 10px; }
.dashboard-nav button, .admin-nav button {
  position: relative;
  min-height: 44px;
  padding: 0 11px;
  border-radius: 9px;
  color: #647189;
  font-size: .76rem;
  font-weight: 710;
  transition: background .16s ease, color .16s ease, transform .16s ease;
}
.dashboard-nav button:hover, .admin-nav button:hover { background: #f4f6fa; color: #273650; }
.dashboard-nav button.is-active, .admin-nav button.is-active {
  background: #edf2ff;
  color: #3153c8;
  box-shadow: inset 0 0 0 1px rgba(52,86,209,.07);
}
.dashboard-nav button.is-active::before, .admin-nav button.is-active::before {
  content: "";
  position: absolute;
  left: -14px;
  width: 3px;
  height: 22px;
  border-radius: 0 4px 4px 0;
  background: var(--primary);
}
.dashboard-nav svg, .admin-nav svg { width: 17px; height: 17px; }
.dashboard-nav i { background: rgba(255,255,255,.85); box-shadow: inset 0 0 0 1px rgba(52,86,209,.07); }
.dashboard-section-heading, .admin-section-heading { margin-bottom: 18px; }
.dashboard-section-heading h2, .admin-section-heading h2 { color: #1f2c44; font-size: 1.52rem; }
.dashboard-section-heading p, .admin-section-heading p { color: #6a778c; }

/* Cards and lists */
.lesson-booking-card {
  padding: 20px;
  border-radius: 15px;
  box-shadow: 0 1px 2px rgba(20,32,57,.025), 0 7px 20px rgba(20,32,57,.04);
  transition: border-color .17s ease, box-shadow .17s ease, transform .17s ease;
}
.lesson-booking-card:hover { border-color: #d3dbe8; box-shadow: 0 10px 28px rgba(20,32,57,.075); }
.lesson-date-box { background: linear-gradient(180deg, #f2f5ff, #e9efff); box-shadow: inset 0 0 0 1px rgba(52,86,209,.06); }
.lesson-comment { background: #f8f9fb; border: 1px solid #eef1f5; }
.lesson-finance-row { background: #f8fafc; border-color: #e5eaf1; }
.status-pill, .payment-pill, .recurring-pill, .goal-status { letter-spacing: .005em; }
.empty-state { border-style: dashed; border-color: #d9e0ea; box-shadow: none; background: rgba(255,255,255,.72); }
.empty-state > span { background: #eff3ff; }

.stats-grid { gap: 11px; }
.stat-card {
  min-height: 92px;
  padding: 17px;
  border-radius: 13px;
  box-shadow: 0 1px 2px rgba(20,32,57,.025);
}
.stat-card:hover { border-color: #d3dce9; }
.stat-icon { background: #edf2ff; border: 1px solid #e0e7ff; }
.stat-card strong { font-size: 1.38rem; }
.admin-panel { padding: 20px; }
.panel-heading { margin-bottom: 14px; }
.panel-heading h3 { color: #24324a; }
.panel-heading p { color: #748096; }
.compact-booking { transition: background .15s ease; }
.compact-booking:hover { background: #fafbfc; }
.current-schedule-panel, .schedule-time-grid-panel, .tax-reserve-card, .earnings-overview-card, .integration-card, .savings-goal-card, .goals-tax-gate { box-shadow: 0 1px 2px rgba(20,32,57,.025), 0 8px 22px rgba(20,32,57,.04); }

/* Filters */
.admin-filters {
  padding: 15px;
  border-color: #dfe5ee;
  border-radius: 14px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 6px 18px rgba(20,32,57,.04);
}
.booking-status-filter-group { border-top-color: #edf0f4; }
.booking-status-checkboxes { gap: 7px; }
.booking-status-checkboxes label {
  min-height: 34px;
  padding: 7px 10px;
  border-color: #dbe1ea;
  background: #fff;
  transition: border-color .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
}
.booking-status-checkboxes label:hover { border-color: #b8c4d7; background: #fafbfe; }
.booking-status-checkboxes label:has(input:checked) {
  border-color: #b8c5f0;
  background: #f0f4ff;
  color: #294bbd;
  box-shadow: inset 0 0 0 1px rgba(52,86,209,.04);
}
.booking-status-checkboxes span { font-weight: 680; }

/* Tables */
.table-card { border-radius: 14px; }
.table-wrap { scrollbar-color: #c8d1df transparent; scrollbar-width: thin; }
.admin-table { border-collapse: separate; border-spacing: 0; }
.admin-table th {
  padding: 12px 14px;
  background: #f7f9fc;
  color: #66748b;
  border-bottom: 1px solid #e5eaf1;
  font-size: .61rem;
  font-weight: 820;
  letter-spacing: .065em;
  white-space: nowrap;
}
.admin-table td { padding: 13px 14px; border-top: 0; border-bottom: 1px solid #edf0f4; font-size: .71rem; }
.admin-table tbody tr:last-child td { border-bottom: 0; }
.admin-table tbody tr { transition: background .14s ease; }
.admin-table tbody tr:hover { background: #fafbfe; }
.admin-table tbody tr:focus-within { background: #f7f9ff; }
.completed-bookings-section .table-card { background: #fff; }
.booking-table-heading { padding-inline: 2px; }
.count-badge { background: #edf2ff; box-shadow: inset 0 0 0 1px rgba(52,86,209,.06); }

/* Financial admin */
.tax-reserve-card, .earnings-overview-card, .goals-tax-gate { padding: 20px; }
.tax-kicker { background: #edf2ff; color: #3152be; }
.tax-metrics-grid > div, .earnings-metrics-grid > div, .goals-tax-gate > div {
  background: #fafbfe;
  border-color: #e2e7ef;
  border-radius: 11px;
}
.tax-progress, .goal-progress { background: #e9edf4; }
.tax-progress i { background: linear-gradient(90deg, #4668d8, #24856a); }
.earnings-filter-row { padding-top: 2px; }
.savings-goal-card { border-radius: 14px; }
.goal-progress { height: 10px; }
.goal-progress i { background: linear-gradient(90deg, #3c5fd1, #647ee1); }
.manual-payment-match { padding: 4px 0; }
.admin-info-note { border-radius: 12px; }

/* Schedule editor */
.schedule-settings { padding: 16px; border-radius: 14px; }
.day-editor {
  border-radius: 13px;
  border-color: #e1e6ee;
  transition: opacity .16s ease, border-color .16s ease, background .16s ease;
}
.day-editor.is-enabled { border-color: #d5deee; background: #fff; }
.day-editor:not(.is-enabled) { background: #fafbfc; opacity: .74; }
.switch > span { background: #c8d0dc; box-shadow: inset 0 0 0 1px rgba(20,32,57,.06); }
.switch input:checked + span { background: #3456d1; }
.sticky-actions { bottom: 12px; border-color: #d9e0ea; box-shadow: 0 10px 30px rgba(20,32,57,.09); }

/* Students, recurring, integration */
.student-terms-card, .recurring-series-card { border-radius: 14px; box-shadow: 0 1px 2px rgba(20,32,57,.025), 0 7px 20px rgba(20,32,57,.035); }
.student-terms-card:hover, .recurring-series-card:hover { border-color: #d4dce8; }
.student-mini-stats { background: #f8fafc; }
.integration-card { border-radius: 14px; }
.integration-status > span { box-shadow: inset 0 0 0 1px rgba(154,91,0,.07); }
.integration-card.is-connected .integration-status > span { box-shadow: inset 0 0 0 1px rgba(22,112,62,.06); }

/* Chat */
.chat-students, .chat-window { border-radius: 14px; box-shadow: 0 1px 2px rgba(20,32,57,.025), 0 8px 24px rgba(20,32,57,.045); }
.chat-search input { background: #f4f6f9; }
.chat-student:hover { background: #f5f7fa; }
.chat-student.is-active { background: #edf2ff; box-shadow: inset 0 0 0 1px rgba(52,86,209,.055); }
.chat-messages-shell { background: #f1f4f8; }
.chat-message { box-shadow: 0 1px 2px rgba(20,32,57,.095); }
.chat-message.is-own { background: #e9efff; }
.chat-compose { background: #fff; }
.chat-compose-input { border-color: #d9e0ea; }
.chat-send-button { box-shadow: 0 7px 16px rgba(52,86,209,.19); }

/* Modal / toast */
.modal-backdrop { background: rgba(12, 20, 39, .64); backdrop-filter: blur(10px); }
.auth-modal { border: 1px solid rgba(255,255,255,.6); border-radius: 20px; box-shadow: 0 34px 90px rgba(4,10,24,.32); }
.toast { border-radius: 12px; box-shadow: 0 18px 46px rgba(20,32,57,.16); }
.busy-overlay { background: rgba(247,249,252,.64); backdrop-filter: blur(4px); }

/* Footer */
.site-footer { background: linear-gradient(180deg, #101a31, #0b1427); }
.footer-grid a { transition: color .15s ease; }

@media (max-width: 1050px) {
  .container { width: min(calc(100% - 40px), var(--container)); }
  .mobile-nav { background: rgba(255,255,255,.98); }
  .mobile-nav .container { padding-top: 10px; }
  .mobile-nav .nav-link { min-height: 44px; }
  .hero-grid { gap: 42px; }
  .booking-layout { grid-template-columns: 1fr; }
  .booking-summary { position: static; }
}

@media (max-width: 820px) {
  .section-pad { padding: 64px 0; }
  .hero { padding-top: 54px; }
  .hero-copy h1 { max-width: 720px; margin-inline: auto; }
  .dashboard-grid, .admin-layout { gap: 16px; }
  .dashboard-sidebar, .admin-sidebar {
    position: sticky;
    top: 70px;
    z-index: 12;
    padding: 8px;
    border-radius: 12px;
  }
  .profile-summary, .admin-profile { display: none; }
  .dashboard-nav, .admin-nav {
    display: flex;
    grid-template-columns: none;
    gap: 5px;
    margin: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .dashboard-nav::-webkit-scrollbar, .admin-nav::-webkit-scrollbar { display: none; }
  .dashboard-nav button, .admin-nav button {
    width: auto;
    min-width: max-content;
    flex: 0 0 auto;
    padding-inline: 12px;
    justify-content: center;
  }
  .dashboard-nav button.is-active::before, .admin-nav button.is-active::before { display: none; }
  .dashboard-nav i { display: inline-grid; }
}

@media (max-width: 620px) {
  .container, .narrow-container { width: min(calc(100% - 24px), var(--container)); }
  .header-inner { min-height: 64px; }
  .brand-mark { width: 38px; height: 38px; }
  .brand-mark.has-image, .brand-mark.has-image img { max-width: 112px; max-height: 36px; }
  .hero-copy h1 { font-size: clamp(2.35rem, 12vw, 3.25rem); }
  .hero-lead { font-size: 1rem; }
  .hero-metrics { gap: 12px; }
  .hero-visual { min-height: 410px; }
  .math-board { width: 96%; min-height: 400px; border-radius: 22px; }
  .compact-page-hero { padding: 42px 0 38px; }
  .booking-section { padding-top: 28px; }
  .booking-calendar, .booking-summary { padding: 16px; border-radius: 14px; }
  .date-scroller { grid-auto-columns: 72px; }
  .slot-button { min-height: 72px; }
  .dashboard-hero-inner, .admin-topbar-inner { min-height: 174px; }
  .dashboard-content, .admin-shell { padding-top: 18px; }
  .dashboard-sidebar, .admin-sidebar { top: 66px; margin-inline: -1px; }
  .dashboard-nav button, .admin-nav button { min-height: 42px; font-size: .72rem; }
  .dashboard-section-heading, .admin-section-heading { flex-direction: column; align-items: stretch; gap: 12px; }
  .dashboard-section-heading .btn, .admin-section-heading .btn { width: 100%; }
  .lesson-booking-card { padding: 16px; gap: 13px; }
  .lesson-date-box { height: 54px; }
  .stats-grid { gap: 8px; }
  .stat-card { min-height: 82px; padding: 13px; }
  .admin-panel { padding: 15px; }
  .admin-filters { padding: 12px; }
  .booking-status-checkboxes { gap: 6px; }
  .booking-status-checkboxes label { min-height: 38px; }
  .table-card { border-radius: 12px; }
  .admin-table th { padding: 11px 12px; }
  .admin-table td { padding: 12px; }
  .tax-reserve-card, .earnings-overview-card, .goals-tax-gate { padding: 15px; }
  .auth-modal { padding: 28px 20px; border-radius: 18px; }
  .toast { left: 12px; right: 12px; bottom: 12px; width: auto; }
  .footer-grid { gap: 28px 20px; }
}

@media (max-width: 420px) {
  .hero-copy h1 { font-size: 2.35rem; }
  .hero-actions .btn { min-height: 50px; }
  .booking-status-checkboxes { grid-template-columns: 1fr; }
  .dashboard-nav button, .admin-nav button { padding-inline: 10px; }
  .dashboard-nav button span, .admin-nav button span { max-width: 150px; }
}


/* v1.13.1 — rectangular custom logos + booking date scroll preservation */

/* v1.13.2 — responsive layout hardening */
@media (max-width: 960px) {
  html, body { max-width: 100%; }
  body { overflow-x: hidden; overflow-x: clip; }

  .page-main,
  .dashboard-content,
  .admin-shell,
  .dashboard-grid,
  .admin-layout,
  .dashboard-main,
  .admin-main { min-width: 0; max-width: 100%; }

  /* v1.13 desktop rules are declared after the older mobile rules, so this
     final layer must explicitly collapse the two-column app shell. */
  .dashboard-grid,
  .admin-layout {
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .dashboard-sidebar,
  .admin-sidebar {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .dashboard-nav,
  .admin-nav {
    max-width: 100%;
    scroll-padding-inline: 8px;
  }

  .dashboard-main,
  .admin-main {
    width: 100%;
    overflow: visible;
  }

  .admin-two-columns { grid-template-columns: minmax(0, 1fr); }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-card { min-width: 0; }
  .stat-card > div { min-width: 0; }
  .stat-card strong, .stat-card span, .stat-card small { overflow-wrap: anywhere; }

  .table-card,
  .table-wrap,
  .current-schedule-panel,
  .current-schedule-wrap,
  .schedule-time-grid-panel,
  .schedule-time-grid-wrap { max-width: 100%; min-width: 0; }

  .table-wrap,
  .current-schedule-wrap,
  .schedule-time-grid-wrap {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 760px) {
  .container,
  .narrow-container {
    width: min(calc(100% - 24px), var(--container));
    max-width: 100%;
  }

  .header-inner {
    min-height: 64px;
    gap: 8px;
  }

  .brand {
    min-width: 0;
    max-width: calc(100% - 92px);
    gap: 8px;
  }

  .brand-copy { min-width: 0; }
  .brand-copy strong {
    display: block;
    max-width: 42vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-nav .nav-link,
  .mobile-nav .nav-button {
    display: flex;
    width: 100%;
    justify-content: flex-start;
  }

  .dashboard-hero-inner,
  .admin-topbar-inner {
    min-height: 0;
    padding: 24px 0;
    gap: 14px;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
  }

  .dashboard-hero h1,
  .admin-topbar h1 {
    margin-top: 7px;
    font-size: clamp(1.72rem, 8.3vw, 2rem);
    line-height: 1.08;
    text-wrap: balance;
  }

  .dashboard-hero p,
  .admin-topbar p {
    max-width: 34rem;
    font-size: .78rem;
    line-height: 1.5;
  }

  .dashboard-hero .btn,
  .admin-topbar .btn { width: 100%; }

  .dashboard-content,
  .admin-shell {
    padding-top: 14px;
    padding-bottom: 44px;
  }

  .dashboard-sidebar,
  .admin-sidebar {
    position: static;
    top: auto;
    padding: 8px;
    border-radius: 13px;
    overflow: hidden;
  }

  .dashboard-nav,
  .admin-nav {
    display: flex;
    width: 100%;
    gap: 6px;
    margin: 0;
    padding: 1px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .dashboard-nav::-webkit-scrollbar,
  .admin-nav::-webkit-scrollbar { display: none; }

  .dashboard-nav button,
  .admin-nav button {
    width: auto;
    min-width: max-content;
    min-height: 40px;
    flex: 0 0 auto;
    padding: 0 11px;
    justify-content: center;
    border-radius: 9px;
    font-size: .72rem;
    scroll-snap-align: start;
  }

  .dashboard-nav button.is-active::before,
  .admin-nav button.is-active::before { display: none; }

  .profile-summary,
  .admin-profile { display: none; }

  .dashboard-section-heading,
  .admin-section-heading {
    flex-direction: column;
    align-items: stretch;
    gap: 9px;
    margin-bottom: 13px;
  }

  .dashboard-section-heading h2,
  .admin-section-heading h2 {
    font-size: 1.28rem;
    line-height: 1.15;
  }

  .dashboard-section-heading p,
  .admin-section-heading p {
    max-width: 42rem;
    font-size: .73rem;
    line-height: 1.5;
  }

  .last-update { align-self: flex-start; }
  .admin-heading-actions { width: 100%; justify-content: flex-start; }

  .booking-filter-panel,
  .admin-filters,
  .form-grid,
  .schedule-settings { grid-template-columns: minmax(0, 1fr); }

  .form-grid .span-2 { grid-column: auto; }
  .day-editor { grid-template-columns: minmax(0, 1fr); }
  .exception-form { grid-template-columns: minmax(0, 1fr); align-items: stretch; }
  .exception-form .btn { width: 100%; }

  .booking-status-checkboxes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .booking-status-checkboxes label {
    min-width: 0;
    border-radius: 10px;
  }

  .earnings-filter-row { display: grid; grid-template-columns: minmax(0, 1fr); }
  .earnings-filter-row label { min-width: 0; width: 100%; }
  .earnings-metrics-grid,
  .goals-tax-gate,
  .tax-metrics-grid { grid-template-columns: minmax(0, 1fr); }

  .manual-payment-match { min-width: 0; width: 100%; }
  .manual-payment-match select { min-width: 0; width: 100%; }

  .savings-goal-head { flex-direction: column; }
  .goal-actions { width: 100%; justify-content: flex-start; }

  .integration-card { align-items: stretch; flex-direction: column; }
  .integration-card > .btn,
  .integration-actions .btn { width: 100%; }

  .student-terms-grid { grid-template-columns: minmax(0, 1fr); }
  .student-terms-form { grid-template-columns: minmax(0, 1fr); }
  .student-terms-form .span-2 { grid-column: auto; }

  .recurring-series-card { grid-template-columns: auto minmax(0, 1fr); }
  .recurring-series-card > .btn { grid-column: 1 / -1; width: 100%; }

  .lesson-title-row { align-items: flex-start; flex-direction: column; gap: 7px; }
  .lesson-title-row .status-pill { align-self: flex-start; }

  .panel-heading { flex-wrap: wrap; }
  .compact-booking { grid-template-columns: 42px minmax(0, 1fr) auto; }
  .compact-booking > div:nth-child(2) { min-width: 0; }
  .compact-booking > div:nth-child(2) strong,
  .compact-booking > div:nth-child(2) span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (max-width: 520px) {
  .container,
  .narrow-container { width: min(calc(100% - 20px), var(--container)); }

  .brand { max-width: calc(100% - 84px); }
  .brand-mark.has-image,
  .brand-mark.has-image img { max-width: min(104px, 31vw); max-height: 36px; }
  .brand-copy strong { max-width: 37vw; font-size: .84rem; }

  .header-lesson-reminder-inner {
    min-height: 38px;
    justify-content: flex-start;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
  }
  .header-lesson-reminder-inner::-webkit-scrollbar { display: none; }

  .admin-topbar-inner,
  .dashboard-hero-inner { padding: 22px 0; }

  .stats-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .stat-card { min-height: 78px; padding: 13px 14px; }
  .stat-card strong { font-size: 1.3rem; }

  .admin-panel,
  .content-form,
  .admin-manual-booking-form,
  .exceptions-panel,
  .tax-reserve-card,
  .earnings-overview-card,
  .goals-tax-gate,
  .savings-goal-card { padding: 14px; }

  .booking-status-checkboxes { grid-template-columns: minmax(0, 1fr); }
  .booking-status-filter-heading { flex-direction: column; align-items: stretch; }
  .booking-status-filter-heading > div { flex-wrap: wrap; }

  .lesson-booking-card {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 10px;
    padding: 13px;
  }

  .lesson-date-box { width: 44px; height: 50px; }
  .lesson-meta { gap: 7px 10px; }

  .compact-booking {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 9px;
  }
  .compact-date { width: 38px; height: 38px; }
  .compact-booking time {
    grid-column: 2;
    justify-self: start;
    color: var(--primary);
  }

  .savings-goal-head .goal-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .savings-goal-head .goal-actions .btn { width: 100%; }

  .time-range {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  }
  .time-range > .icon-button,
  .time-range > button:last-child {
    grid-column: 1 / -1;
    width: 100%;
  }
}

@media (max-width: 380px) {
  .container,
  .narrow-container { width: min(calc(100% - 16px), var(--container)); }
  .brand-copy strong { max-width: 34vw; }
  .dashboard-nav button,
  .admin-nav button { padding-inline: 9px; }
  .admin-topbar h1,
  .dashboard-hero h1 { font-size: 1.65rem; }
}

/* v1.14.0 — mobile-first professional UX layer */
:root { --app-header-height: 0px; }

@media (max-width: 760px) {
  html {
    scroll-padding-top: calc(var(--app-header-height) + 14px);
    -webkit-text-size-adjust: 100%;
  }

  body {
    min-width: 0;
    background: #f5f7fb;
    overscroll-behavior-y: none;
  }

  body.mobile-menu-open { overflow: hidden; }

  .container,
  .narrow-container {
    width: min(calc(100% - 24px), var(--container));
    max-width: 100%;
  }

  .section-pad { padding: 54px 0; }
  .page-main { min-height: 60vh; }
  .card { border-radius: 16px; box-shadow: 0 8px 26px rgba(24, 40, 75, .065); }

  .btn,
  .icon-button,
  .nav-link,
  button,
  input,
  select,
  textarea { touch-action: manipulation; }

  .btn { min-height: 46px; border-radius: 12px; }
  .btn-small { min-height: 42px; padding-inline: 14px; }
  .btn-large { min-height: 52px; }
  .icon-button { width: 44px; height: 44px; border-radius: 12px; }
  input,
  select,
  textarea {
    min-height: 48px;
    border-radius: 12px;
    padding: 12px 13px;
    font-size: 16px;
  }
  textarea { min-height: 112px; line-height: 1.45; }
  label { gap: 7px; }
  label > span:first-child,
  .admin-filters label > span { font-size: .72rem; }

  /* Compact, app-like top chrome. */
  .site-header {
    background: rgba(255, 255, 255, .965);
    backdrop-filter: blur(20px) saturate(1.15);
    box-shadow: 0 1px 0 rgba(20, 34, 60, .04);
  }
  .header-inner {
    min-height: 62px;
    gap: 8px;
    padding-top: max(0px, env(safe-area-inset-top));
  }
  .brand { max-width: calc(100% - 94px); gap: 8px; }
  .brand-mark:not(.has-image) { width: 38px; height: 38px; border-radius: 11px; }
  .brand-mark.has-image,
  .brand-mark.has-image img { max-width: min(108px, 30vw); max-height: 38px; }
  .brand-copy strong { max-width: 42vw; font-size: .9rem; }
  .brand-copy small { display: none; }
  .header-actions { gap: 3px; }
  .account-chip { padding: 3px; }
  .account-chip .avatar { width: 38px; height: 38px; }
  .account-chip > span:last-child { display: none; }
  .mobile-menu-button { background: #f3f5f9; color: #455168; }
  .mobile-menu-button:active { background: #e9edf4; }

  .mobile-nav {
    position: fixed;
    z-index: 80;
    top: calc(62px + env(safe-area-inset-top));
    left: 10px;
    right: 10px;
    max-height: calc(100dvh - 78px - env(safe-area-inset-top));
    overflow-y: auto;
    border: 1px solid rgba(210, 218, 231, .92);
    border-radius: 17px;
    background: rgba(255,255,255,.985);
    box-shadow: 0 24px 60px rgba(17,29,56,.22);
    animation: mobileMenuIn .16s ease-out;
  }
  .mobile-nav .container {
    width: 100%;
    padding: 8px;
    gap: 3px;
  }
  .mobile-nav .nav-link,
  .mobile-nav .nav-button {
    min-height: 48px;
    padding: 0 14px;
    border-radius: 11px;
    font-size: .88rem;
    font-weight: 720;
  }
  .mobile-nav .btn { margin-top: 4px; }

  .header-lesson-reminder { background: rgba(247,249,253,.98); }
  .header-lesson-reminder-inner {
    min-height: 38px;
    padding-block: 4px;
    justify-content: flex-start;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    font-size: .64rem;
  }
  .header-lesson-reminder-inner::-webkit-scrollbar { display: none; }
  .header-lesson-item { min-height: 30px; padding: 5px 8px; scroll-snap-align: start; }

  /* Public homepage: less decorative height, more useful content above the fold. */
  .hero {
    padding: 42px 0 50px;
    background: linear-gradient(180deg, #fff 0%, #f5f7fb 100%);
  }
  .hero-grid { gap: 30px; }
  .hero-copy { text-align: left; }
  .hero-copy .eyebrow,
  .hero-actions,
  .hero-note { justify-content: flex-start; }
  .hero-copy h1 {
    margin: 12px 0 16px;
    font-size: clamp(2.25rem, 11.2vw, 3.05rem);
    line-height: .99;
    letter-spacing: -.052em;
    text-wrap: balance;
  }
  .hero-lead {
    margin: 0;
    font-size: .98rem;
    line-height: 1.62;
  }
  .hero-actions { margin-top: 23px; gap: 9px; }
  .hero-actions .btn { width: 100%; }
  .hero-note { margin-top: 15px; font-size: .75rem; line-height: 1.45; }
  .hero-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin-top: 26px;
    padding-top: 17px;
  }
  .hero-metrics div {
    min-width: 0;
    padding: 0 10px;
    border-right: 1px solid var(--line);
    border-bottom: 0;
  }
  .hero-metrics div:first-child { padding-left: 0; }
  .hero-metrics div:last-child { padding-right: 0; border-right: 0; }
  .hero-metrics strong { font-size: .78rem; overflow-wrap: anywhere; }
  .hero-metrics span { font-size: .63rem; line-height: 1.35; }
  .hero-visual { min-height: 350px; }
  .math-board {
    width: min(100%, 360px);
    min-height: 340px;
    padding: 19px;
    border-radius: 23px;
    transform: none;
    box-shadow: 0 24px 54px rgba(17,29,56,.23);
  }
  .math-board::before { inset: 10px; border-radius: 17px; }
  .equation-card { margin-top: 27px; padding: 18px; border-radius: 15px; }
  .equation-card strong { margin-top: 9px; font-size: 1.35rem; }
  .solution-line { margin-top: 17px; }
  .teacher-card { margin-top: 12px; padding: 13px; border-radius: 14px; }
  .teacher-avatar { width: 40px; height: 40px; border-radius: 12px; }
  .progress-card { margin-top: 12px; padding: 13px; border-radius: 14px; }
  .floating-formula { display: none; }

  .trust-strip { overflow: hidden; }
  .trust-grid {
    width: 100%;
    padding: 10px 12px;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .trust-grid::-webkit-scrollbar { display: none; }
  .trust-grid > div {
    min-width: min(78vw, 285px);
    min-height: 58px;
    flex: 0 0 auto;
    padding: 11px 13px;
    border: 1px solid var(--line) !important;
    border-radius: 13px;
    background: white;
    scroll-snap-align: start;
  }
  .split-heading,
  .learning-grid,
  .faq-grid,
  .contact-grid { gap: 24px; }
  .section-heading h2,
  .learning-panel h2 { font-size: clamp(1.7rem, 8vw, 2.15rem); line-height: 1.08; }
  .feature-grid { gap: 10px; }
  .feature-card { padding: 20px; border-radius: 15px; }
  .feature-card h3 { margin-top: 18px; }
  .reviews-grid { gap: 10px; }
  .review-card { padding: 20px; }
  .cta-panel,
  .contact-form { padding: 25px 18px; }

  /* Booking: task-first, thumb-friendly controls. */
  .compact-page-hero {
    padding: 30px 0 26px;
    text-align: left;
  }
  .compact-page-hero h1 {
    margin: 9px 0 10px;
    font-size: clamp(1.9rem, 9vw, 2.45rem);
    line-height: 1.04;
    text-wrap: balance;
  }
  .compact-page-hero p { margin: 0; font-size: .82rem; line-height: 1.55; }
  .booking-section { padding: 14px 0 46px; }
  .booking-layout { gap: 12px; }
  .booking-calendar,
  .booking-summary { padding: 16px; border-radius: 16px; }
  .booking-step-heading { gap: 10px; }
  .booking-step-heading h2 { font-size: 1.05rem; }
  .booking-step-heading p { font-size: .68rem; line-height: 1.4; }
  .step-number { width: 32px; height: 32px; flex: 0 0 32px; }
  .date-scroller {
    margin: 18px -16px 0;
    padding: 3px 16px 8px;
    grid-auto-columns: 66px;
    gap: 7px;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 16px;
    scrollbar-width: none;
  }
  .date-scroller::-webkit-scrollbar { display: none; }
  .date-choice {
    min-height: 78px;
    scroll-snap-align: start;
    border-radius: 13px;
  }
  .date-choice strong { font-size: 1.22rem; }
  .slot-heading {
    margin-top: 15px;
    flex-direction: column;
    align-items: stretch;
    gap: 9px;
  }
  .slot-heading > div { min-width: 0; }
  .slot-heading > div > strong { font-size: .82rem; }
  .slot-heading > div > span { font-size: .67rem; }
  .timezone-badge {
    width: fit-content;
    max-width: 100%;
    min-height: 31px;
    padding: 6px 9px;
    white-space: normal;
    line-height: 1.3;
  }
  .slots-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  .slot-button {
    min-width: 0;
    min-height: 68px;
    padding: 9px 6px;
    border-radius: 12px;
  }
  .slot-button strong { font-size: .88rem; }
  .slot-button span,
  .slot-button small { font-size: .6rem; }
  .booking-legend { gap: 10px 14px; font-size: .62rem; }
  .summary-placeholder { min-height: 190px; padding: 12px 4px 2px; }
  .summary-illustration { width: 54px; height: 54px; }
  
  
  
  .booking-form { gap: 13px; }
  .booking-mode-actions { gap: 8px; }
  .booking-mode-actions .btn { white-space: normal; line-height: 1.25; padding-block: 9px; }
  .recurring-booking-note { padding: 12px; border-radius: 12px; }
  .booking-assurances {
    margin-top: 12px;
    gap: 8px;
  }
  .booking-assurances > div { padding: 14px; border-radius: 13px; }

  /* Dashboard/admin: compact header, persistent tab rail, dense overview. */
  .dashboard-hero-inner,
  .admin-topbar-inner {
    min-height: 0;
    padding: 20px 0 21px;
    gap: 12px;
  }
  .dashboard-hero h1,
  .admin-topbar h1 {
    margin: 5px 0 5px;
    font-size: clamp(1.55rem, 7.8vw, 1.9rem);
    line-height: 1.06;
    letter-spacing: -.035em;
  }
  .dashboard-hero p,
  .admin-topbar p { font-size: .74rem; line-height: 1.45; }
  .dashboard-hero .eyebrow,
  .admin-topbar .eyebrow { font-size: .62rem; }
  .dashboard-hero .btn,
  .admin-topbar .btn { min-height: 44px; }
  .dashboard-content,
  .admin-shell { padding: 12px 0 54px; }
  .dashboard-grid,
  .admin-layout { gap: 10px; }
  .dashboard-sidebar,
  .admin-sidebar {
    position: sticky;
    top: calc(var(--app-header-height) + 6px);
    z-index: 18;
    padding: 6px;
    border-radius: 14px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 8px 24px rgba(17,29,56,.09);
    backdrop-filter: blur(18px);
  }
  .dashboard-nav,
  .admin-nav {
    gap: 5px;
    padding: 1px;
    scroll-padding-inline: 8px;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8px, #000 calc(100% - 8px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 8px, #000 calc(100% - 8px), transparent 100%);
  }
  .dashboard-nav button,
  .admin-nav button {
    min-height: 42px;
    padding: 0 11px;
    gap: 7px;
    border-radius: 10px;
    font-size: .7rem;
    font-weight: 720;
  }
  .dashboard-nav button svg,
  .admin-nav button svg { width: 17px; height: 17px; }
  .dashboard-nav button.is-active,
  .admin-nav button.is-active {
    color: #fff;
    background: var(--primary);
    box-shadow: 0 7px 16px rgba(51,88,212,.2);
  }
  .dashboard-nav i {
    min-width: 20px;
    padding: 1px 5px;
    color: inherit;
    background: rgba(255,255,255,.18);
  }
  .dashboard-section-heading,
  .admin-section-heading { gap: 8px; margin-bottom: 12px; }
  .dashboard-section-heading h2,
  .admin-section-heading h2 { font-size: 1.26rem; }
  .dashboard-section-heading p,
  .admin-section-heading p { margin-top: 4px; font-size: .71rem; }
  .admin-heading-actions { gap: 7px; }
  .admin-heading-actions .btn { flex: 1 1 auto; }

  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .stat-card {
    min-width: 0;
    min-height: 92px;
    padding: 13px;
    align-items: flex-start;
    gap: 9px;
    border-radius: 14px;
  }
  .stat-icon {
    display: grid;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 9px;
  }
  .stat-icon svg { width: 17px; height: 17px; }
  .stat-card > div {
    min-width: 0;
    grid-template-columns: 1fr;
    align-items: start;
    gap: 0;
  }
  .stat-card small { grid-column: auto; font-size: .6rem; line-height: 1.25; }
  .stat-card strong { margin-top: 2px; font-size: 1.22rem; line-height: 1.1; }
  .stat-card span { font-size: .58rem; line-height: 1.25; }

  .admin-two-columns { margin-top: 10px; gap: 10px; }
  .admin-panel,
  .settings-card,
  .content-form,
  .admin-manual-booking-form,
  .exceptions-panel,
  .tax-reserve-card,
  .earnings-overview-card,
  .goals-tax-gate,
  .savings-goal-card { padding: 15px; border-radius: 15px; }
  .panel-heading { gap: 10px; margin-bottom: 12px; }
  .panel-heading h3 { font-size: .92rem; }
  .panel-heading p { font-size: .65rem; line-height: 1.4; }
  .compact-booking { padding: 10px 0; }

  .lesson-booking-card {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 10px;
    padding: 13px;
    border-radius: 15px;
  }
  .lesson-date-box { width: 44px; height: 50px; border-radius: 11px; }
  .lesson-date-box strong { font-size: 1.06rem; }
  .lesson-title-row { gap: 6px; }
  .lesson-title-row h3 { margin-top: 3px; font-size: .9rem; line-height: 1.3; }
  .lesson-time { font-size: .78rem; }
  .lesson-meta { gap: 7px 10px; margin-top: 8px; font-size: .62rem; }
  .lesson-comment,
  .lesson-finance-row { margin-top: 9px; padding: 10px; border-radius: 11px; }
  .lesson-finance-row { align-items: flex-start; flex-direction: column; gap: 6px; }
  .late-cancel-note { max-width: none; text-align: left; }
  .lesson-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-top: 10px;
  }
  .lesson-actions .btn,
  .lesson-actions button { width: 100%; min-width: 0; min-height: 42px; padding-inline: 8px; white-space: normal; line-height: 1.2; }

  /* Filters and forms stay readable and thumb-friendly. */
  .admin-filters,
  .booking-filter-panel { gap: 9px; padding: 12px; border-radius: 14px; }
  .booking-status-checkboxes { gap: 7px; }
  .booking-status-checkboxes label {
    min-height: 44px;
    padding: 8px 10px;
    border-radius: 11px;
    font-size: .69rem;
  }
  .booking-status-checkboxes input { width: 18px; height: 18px; }
  .checkbox-card { min-height: 56px; padding: 12px; }
  .checkbox-card input { width: 20px; height: 20px; }
  .switch > span { width: 46px; height: 26px; }
  .switch > span::after { width: 20px; height: 20px; }
  .switch input:checked + span::after { transform: translateX(20px); }
  .time-range { gap: 7px; }
  .sticky-actions {
    bottom: max(10px, env(safe-area-inset-bottom));
    padding: 9px;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(17,29,56,.15);
  }
  .sticky-actions .btn { width: 100%; }

  /* Horizontal data regions look intentional instead of broken. */
  .table-card,
  .current-schedule-panel,
  .schedule-time-grid-panel { border-radius: 14px; }
  .table-wrap,
  .current-schedule-wrap,
  .schedule-time-grid-wrap {
    padding-bottom: 3px;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
  }
  .admin-table th { padding: 10px 11px; font-size: .59rem; }
  .admin-table td { padding: 11px; font-size: .69rem; }
  .compact-select { min-height: 42px; font-size: 16px; }

  /* Payments/content/integrations. */
  .payment-layout { gap: 12px; }
  .payment-details-card,
  .payment-purpose-card,
  .payment-actions-card,
  .payment-qr-card { padding: 16px; border-radius: 15px; }
  .payment-details-list > div { padding: 11px 0; }
  .payment-actions-card,
  .payment-cta-card,
  .purpose-copy-box { gap: 12px; }
  .payment-actions-card .btn,
  .payment-cta-card .btn,
  .purpose-copy-box .btn { width: 100%; }
  .payment-qr-card { max-width: 100%; }
  .payment-qr-link { max-width: min(78vw, 320px); margin-inline: auto; }
  .site-media-editor-grid { gap: 10px; }
  .site-media-editor-card { padding: 15px; }
  .site-media-copy p { font-size: .7rem; }
  .student-terms-card { padding: 14px; }
  .student-terms-card header { align-items: flex-start; flex-direction: column; gap: 10px; }
  .student-terms-card header > .btn { width: 100%; }
  .student-mini-stats { grid-template-columns: repeat(3, minmax(0,1fr)); }

  /* Chat uses available viewport and respects the software keyboard. */
  .chat-window {
    min-height: min(520px, calc(100dvh - var(--app-header-height) - 145px));
    height: calc(100dvh - var(--app-header-height) - 118px);
    max-height: 720px;
    border-radius: 15px;
  }
  .chat-header { min-height: 54px; }
  .chat-message { max-width: 88%; border-radius: 16px; }
  .chat-compose {
    padding-bottom: max(8px, env(safe-area-inset-bottom));
    background: rgba(255,255,255,.98);
  }
  .chat-send-button { width: 46px; height: 46px; }

  /* Dialogs behave like native mobile bottom sheets. */
  .modal-backdrop {
    place-items: end center;
    padding: 0;
    background: rgba(8,17,34,.54);
    backdrop-filter: blur(5px);
  }
  .auth-modal {
    width: 100%;
    max-width: none;
    max-height: min(92dvh, 760px);
    padding: 28px 18px max(22px, env(safe-area-inset-bottom));
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -18px 55px rgba(9,20,42,.24);
    animation: mobileSheetIn .2s ease-out;
  }
  .modal-close { top: 12px; right: 12px; background: #f2f4f8; }
  .auth-modal h2 { margin-top: 15px; font-size: 1.45rem; }
  .auth-modal > p { margin-bottom: 18px; }
  .auth-form { gap: 12px; }
  .profile-email-actions .btn { width: 100%; min-height: 44px; }

  .toast {
    left: 10px;
    right: 10px;
    bottom: max(10px, env(safe-area-inset-bottom));
    width: auto;
    padding: 12px;
    border-radius: 14px;
  }

  .site-footer { padding: 40px 0 max(20px, env(safe-area-inset-bottom)); }
  .footer-grid { gap: 22px 18px; }
  .footer-brand p { font-size: .74rem; }
  .footer-grid a,
  .footer-grid span { font-size: .7rem; }
  .footer-bottom { margin-top: 28px; gap: 6px; }
}

@media (max-width: 520px) {
  .container,
  .narrow-container { width: min(calc(100% - 20px), var(--container)); }

  .hero { padding-top: 35px; }
  .hero-copy h1 { font-size: clamp(2.05rem, 10.7vw, 2.7rem); }
  .hero-metrics strong { font-size: .72rem; }
  .hero-metrics span { display: none; }
  .hero-visual { min-height: 325px; }
  .math-board { min-height: 318px; }

  .slots-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .slot-button { min-height: 66px; }

  .booking-status-checkboxes { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .stat-card { min-height: 86px; padding: 11px; }
  .stat-icon { width: 29px; height: 29px; flex-basis: 29px; }
  .stat-card strong { font-size: 1.15rem; }

  .lesson-actions { grid-template-columns: minmax(0, 1fr); }
  .lesson-actions .btn,
  .lesson-actions button { min-height: 44px; }

  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 390px) {
  .container,
  .narrow-container { width: min(calc(100% - 16px), var(--container)); }

  .brand-mark.has-image,
  .brand-mark.has-image img { max-width: min(92px, 27vw); }
  .brand-copy strong { max-width: 38vw; font-size: .83rem; }

  .hero-copy h1 { font-size: 2.05rem; }
  .hero-note { font-size: .7rem; }
  .hero-metrics div { padding-inline: 7px; }
  .hero-metrics strong { font-size: .68rem; }

  .date-scroller {
    margin-inline: -14px;
    padding-inline: 14px;
    grid-auto-columns: 62px;
  }
  .date-choice { min-height: 74px; }

  .stats-grid { gap: 6px; }
  .stat-card { min-height: 82px; gap: 7px; padding: 10px; }
  .stat-icon { display: none; }
  .stat-card strong { font-size: 1.16rem; }

  .booking-status-checkboxes { grid-template-columns: minmax(0, 1fr); }

  .lesson-booking-card { grid-template-columns: 40px minmax(0,1fr); padding: 11px; gap: 9px; }
  .lesson-date-box { width: 40px; height: 46px; }

  .footer-grid { grid-template-columns: 1fr; }
  .footer-brand { grid-column: auto; }
}

@keyframes mobileMenuIn {
  from { opacity: 0; transform: translateY(-6px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes mobileSheetIn {
  from { transform: translateY(24px); opacity: .65; }
  to { transform: translateY(0); opacity: 1; }
}

/* v1.14.1 — calmer schedule tables + live Monobank tax coverage */
.tax-status.is-pending { background: #f1f3f7; color: #667085; }
.tax-progress.is-pending i { width: 0 !important; }

/* Keep schedule tables visually neutral: sticky/sorted columns must not create
   alternating colour bands that compete with the actual schedule data. */
.current-schedule-table thead th,
.current-schedule-table thead th:first-child,
.schedule-time-grid thead th,
.schedule-time-grid thead th:first-child {
  background: #f5f7fa;
}
.current-schedule-table tbody td,
.current-schedule-table tbody td:first-child,
.current-schedule-table td.is-sort-day {
  background: #fff;
}
.current-schedule-table th.is-sort-day {
  background: #f5f7fa;
  color: var(--primary);
  box-shadow: inset 0 -2px 0 var(--primary);
}
.current-schedule-table td.is-sort-day .schedule-single-time {
  background: #f1f4fb;
  color: #33405a;
}
.current-schedule-table th:first-child,
.current-schedule-table td:first-child,
.schedule-time-grid th:first-child,
.schedule-time-grid td:first-child {
  box-shadow: none;
}
.schedule-time-grid tbody tr.is-occupied td,
.schedule-time-grid tbody tr.is-occupied td:first-child {
  background: #fff;
}
.schedule-time-grid tbody tr.is-empty td,
.schedule-time-grid tbody tr.is-empty td:first-child {
  background: #fbfcfe;
}




/* v1.15.3 — maintenance mode */
.maintenance-screen {
  position: relative;
  min-height: 100dvh;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: max(28px, env(safe-area-inset-top)) 20px max(28px, env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 15% 10%, rgba(37, 99, 235, .12), transparent 34%),
    radial-gradient(circle at 90% 85%, rgba(14, 165, 233, .1), transparent 32%),
    linear-gradient(180deg, #f8fbff 0%, #f4f7fb 100%);
  isolation: isolate;
}
.maintenance-orb { position: absolute; width: 280px; height: 280px; border-radius: 50%; filter: blur(2px); opacity: .4; z-index: -1; pointer-events: none; }
.maintenance-orb-one { top: -120px; left: -80px; background: rgba(59,130,246,.16); }
.maintenance-orb-two { right: -120px; bottom: -110px; background: rgba(14,165,233,.13); }
.maintenance-card {
  width: min(100%, 620px);
  padding: clamp(32px, 6vw, 54px);
  border: 1px solid rgba(148,163,184,.22);
  border-radius: 28px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 28px 80px rgba(15,23,42,.12);
  backdrop-filter: blur(18px);
  text-align: center;
}
.maintenance-brand { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 34px; color: var(--ink); font-weight: 850; letter-spacing: -.02em; }
.maintenance-brand .brand-mark { width: auto; max-width: 150px; height: 38px; }
.maintenance-brand .brand-mark.has-image + span { display: none; }
.maintenance-icon { width: 68px; height: 68px; margin: 0 auto 20px; border-radius: 20px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); }
.maintenance-icon svg { width: 30px; height: 30px; }
.maintenance-badge { display: inline-flex; align-items: center; gap: 8px; min-height: 30px; padding: 5px 11px; border-radius: 999px; background: #fff7ed; color: #9a3412; font-size: .78rem; font-weight: 800; }
.maintenance-badge > span { width: 7px; height: 7px; border-radius: 50%; background: #f97316; box-shadow: 0 0 0 5px rgba(249,115,22,.12); }
.maintenance-card h1 { margin: 18px 0 12px; font-size: clamp(2rem, 7vw, 3.25rem); line-height: 1.04; letter-spacing: -.045em; color: var(--ink); }
.maintenance-card > p { max-width: 500px; margin: 0 auto; color: var(--muted); font-size: clamp(.98rem, 2vw, 1.08rem); line-height: 1.72; }
.maintenance-progress { width: min(100%, 340px); height: 5px; margin: 28px auto 15px; overflow: hidden; border-radius: 999px; background: #e8eef7; }
.maintenance-progress span { display: block; width: 38%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--primary), #38bdf8); animation: maintenance-progress 1.8s ease-in-out infinite alternate; }
.maintenance-card > small { display: block; color: #718096; font-size: .79rem; line-height: 1.5; }
.maintenance-actions { min-height: 34px; margin-top: 26px; display: flex; justify-content: center; }
.maintenance-admin-login { border: 0; padding: 8px 12px; background: transparent; color: #64748b; font: inherit; font-size: .78rem; font-weight: 700; cursor: pointer; text-decoration: underline; text-decoration-color: rgba(100,116,139,.35); text-underline-offset: 4px; }
.maintenance-admin-login:hover { color: var(--primary); text-decoration-color: currentColor; }
@keyframes maintenance-progress { from { transform: translateX(-45%); } to { transform: translateX(165%); } }
@media (prefers-reduced-motion: reduce) { .maintenance-progress span { animation: none; width: 100%; opacity: .75; } }

.maintenance-settings-form { display: grid; gap: 16px; margin-bottom: 22px; padding: 20px; }
.maintenance-settings-actions { display: flex; justify-content: flex-end; }
.maintenance-settings-actions .btn { min-width: 170px; }
.maintenance-admin-control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 19px 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #f8fafc;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.maintenance-admin-control.is-enabled { border-color: rgba(234,88,12,.28); background: #fffaf5; box-shadow: inset 3px 0 0 #f97316; }
.maintenance-admin-copy { display: flex; align-items: center; gap: 12px; min-width: 0; }
.maintenance-admin-copy > div { display: grid; gap: 3px; }
.maintenance-admin-copy strong { color: var(--ink); }
.maintenance-admin-copy small { color: var(--muted); line-height: 1.45; }
.maintenance-status-dot { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: #94a3b8; box-shadow: 0 0 0 5px rgba(148,163,184,.12); }
.maintenance-admin-control.is-enabled .maintenance-status-dot { background: #f97316; box-shadow: 0 0 0 5px rgba(249,115,22,.12); }
.maintenance-switch { flex: 0 0 auto; }
.maintenance-message-editor textarea { min-height: 92px; }

@media (max-width: 560px) {
  .maintenance-screen { padding-inline: 14px; }
  .maintenance-card { padding: 30px 22px; border-radius: 24px; }
  .maintenance-brand { margin-bottom: 28px; }
  .maintenance-icon { width: 60px; height: 60px; border-radius: 18px; }
  .maintenance-card h1 { font-size: 2.15rem; }
  .maintenance-settings-form { padding: 16px; }
  .maintenance-settings-actions .btn { width: 100%; }
  .maintenance-admin-control { align-items: flex-start; padding: 16px; }
  .maintenance-admin-copy { align-items: flex-start; }
  .maintenance-switch { margin-top: 2px; }
}

/* v1.16.0 — mobile app shell: bottom tabs, native spacing and phone-first screens */
:root {
  --mobile-app-nav-height: 64px;
  --mobile-app-nav-safe-height: calc(var(--mobile-app-nav-height) + env(safe-area-inset-bottom));
}

.mobile-app-nav,
.mobile-app-more-backdrop { display: none; }

@media (max-width: 760px) {
  html { background: #f5f7fb; }
  body {
    background: #f5f7fb;
    overscroll-behavior-x: none;
  }
  body.mobile-app-more-open { overflow: hidden; }

  #app {
    min-height: 100dvh;
    padding-bottom: var(--mobile-app-nav-safe-height);
  }
  body[data-route="maintenance"] #app,
  body[data-route="verify-email"] #app { padding-bottom: 0; }

  /* The phone header is an app bar. Navigation lives in the bottom tab bar. */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 70;
    border-bottom: 1px solid rgba(217, 224, 235, .78);
    background: rgba(255,255,255,.94);
    box-shadow: 0 1px 8px rgba(25, 39, 68, .035);
    backdrop-filter: blur(20px) saturate(145%);
  }
  .header-inner {
    min-height: 56px;
    padding-top: env(safe-area-inset-top);
    gap: 8px;
  }
  .header-actions { min-width: auto; margin-left: auto; }
  .mobile-menu-button,
  .mobile-nav { display: none !important; }
  .brand { max-width: calc(100% - 54px); min-width: 0; }
  .brand-mark:not(.has-image) { width: 36px; height: 36px; border-radius: 10px; }
  .brand-mark.has-image,
  .brand-mark.has-image img { max-width: min(116px, 34vw); max-height: 36px; }
  .brand-copy strong { max-width: 48vw; font-size: .86rem; }
  .account-chip { min-height: 42px; padding: 2px; border: 0; }
  .account-chip .avatar { width: 38px; height: 38px; }
  .chat-unread-indicator { transform: scale(.9); transform-origin: top right; }

  .header-lesson-reminder { border-bottom: 1px solid rgba(222,228,237,.78); }
  .header-lesson-reminder-inner {
    width: 100%;
    min-height: 36px;
    padding: 3px 10px;
    scroll-padding-inline: 10px;
  }
  .header-lesson-item { min-height: 28px; border-radius: 9px; }

  /* Native-style persistent tab bar. */
  .mobile-app-nav {
    position: fixed;
    z-index: 95;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    height: var(--mobile-app-nav-safe-height);
    border-top: 1px solid rgba(207, 216, 229, .88);
    background: rgba(255,255,255,.965);
    box-shadow: 0 -8px 28px rgba(20,32,57,.075);
    backdrop-filter: blur(22px) saturate(150%);
    transform: translateY(0);
    transition: transform .18s ease, opacity .18s ease;
  }
  .mobile-app-nav-inner {
    width: min(100%, 560px);
    height: var(--mobile-app-nav-height);
    margin: 0 auto;
    padding: 5px 8px 4px;
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    gap: 2px;
  }
  .mobile-app-nav-item {
    position: relative;
    min-width: 0;
    min-height: 52px;
    flex: 1 1 0;
    padding: 4px 2px 2px;
    border: 0;
    border-radius: 13px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    background: transparent;
    color: #748097;
    font: inherit;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  .mobile-app-nav-item:active { background: #f1f4fa; }
  .mobile-app-nav-item.is-active { color: var(--primary); }
  .mobile-app-nav-icon {
    position: relative;
    width: 34px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    transition: background .16s ease, transform .16s ease;
  }
  .mobile-app-nav-item.is-active .mobile-app-nav-icon {
    background: #edf2ff;
    transform: translateY(-1px);
  }
  .mobile-app-nav-icon svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.85;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .mobile-app-nav-label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .57rem;
    line-height: 1.1;
    font-weight: 730;
    letter-spacing: -.01em;
  }
  .mobile-app-nav-badge {
    position: absolute;
    top: -3px;
    right: -2px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border: 2px solid #fff;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: #d94352;
    color: #fff;
    font-size: .5rem;
    line-height: 1;
    font-weight: 850;
  }
  body.mobile-keyboard-mode .mobile-app-nav {
    opacity: 0;
    pointer-events: none;
    transform: translateY(110%);
  }

  /* "More" is a real mobile bottom sheet, not a squeezed desktop sidebar. */
  .mobile-app-more-backdrop {
    position: fixed;
    z-index: 92;
    inset: 0 0 var(--mobile-app-nav-safe-height);
    display: grid;
    align-items: end;
    padding: 0;
    background: rgba(11, 20, 38, .44);
    backdrop-filter: blur(4px);
    animation: mobileAppBackdropIn .16s ease-out;
  }
  .mobile-app-more-sheet {
    width: 100%;
    max-height: min(78dvh, 680px);
    overflow: hidden;
    padding: 7px 12px 14px;
    border: 1px solid rgba(211,219,231,.9);
    border-bottom: 0;
    border-radius: 24px 24px 0 0;
    background: #fff;
    box-shadow: 0 -24px 64px rgba(12, 24, 48, .2);
    animation: mobileAppSheetIn .2s cubic-bezier(.22,.8,.24,1);
  }
  .mobile-app-sheet-handle {
    width: 38px;
    height: 4px;
    margin: 1px auto 8px;
    border-radius: 999px;
    background: #d7dde7;
  }
  .mobile-app-sheet-heading {
    min-height: 54px;
    padding: 2px 2px 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .mobile-app-sheet-heading > div { min-width: 0; }
  .mobile-app-sheet-heading span {
    display: block;
    margin-bottom: 2px;
    color: #8490a3;
    font-size: .62rem;
    font-weight: 740;
    letter-spacing: .04em;
    text-transform: uppercase;
  }
  .mobile-app-sheet-heading h2 {
    margin: 0;
    color: var(--ink);
    font-size: 1.35rem;
    line-height: 1.1;
    letter-spacing: -.035em;
  }
  .mobile-app-sheet-list {
    max-height: calc(min(78dvh, 680px) - 128px);
    overflow-y: auto;
    padding: 2px 0 8px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }
  .mobile-app-sheet-item {
    min-width: 0;
    min-height: 76px;
    padding: 11px;
    border: 1px solid #e3e8f0;
    border-radius: 15px;
    display: grid;
    grid-template-columns: 34px minmax(0,1fr);
    align-items: center;
    gap: 9px;
    background: #fbfcfe;
    color: var(--ink);
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-app-sheet-item > span:first-child {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #eef2f8;
    color: #596880;
  }
  .mobile-app-sheet-item > span:first-child svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
  }
  .mobile-app-sheet-item > div { min-width: 0; }
  .mobile-app-sheet-item strong {
    display: block;
    color: inherit;
    font-size: .75rem;
    line-height: 1.25;
    font-weight: 790;
  }
  .mobile-app-sheet-item small {
    display: block;
    margin-top: 3px;
    overflow: hidden;
    color: #7a879a;
    font-size: .58rem;
    line-height: 1.3;
    text-overflow: ellipsis;
  }
  .mobile-app-sheet-item > svg { display: none; }
  .mobile-app-sheet-item.is-active {
    border-color: #bdc9ed;
    background: #f3f6ff;
    color: var(--primary);
    box-shadow: inset 0 0 0 1px rgba(52,86,209,.045);
  }
  .mobile-app-sheet-item.is-active > span:first-child {
    background: #e3eaff;
    color: var(--primary);
  }
  .mobile-app-sheet-logout {
    width: 100%;
    min-height: 44px;
    margin-top: 3px;
    border: 0;
    border-radius: 12px;
    background: #fff1f2;
    color: #aa3341;
    font: inherit;
    font-size: .72rem;
    font-weight: 780;
    cursor: pointer;
  }

  /* Dashboard/admin become mobile screens; desktop sidebars are removed. */
  .dashboard-sidebar,
  .admin-sidebar { display: none !important; }
  .dashboard-grid,
  .admin-layout {
    display: block;
    width: 100%;
  }
  .dashboard-main,
  .admin-main { width: 100%; min-width: 0; }

  .dashboard-hero,
  .admin-topbar {
    border-bottom: 0;
    background: linear-gradient(135deg, #13203c 0%, #1a315d 100%);
  }
  .dashboard-hero::after,
  .admin-topbar::after { opacity: .45; }
  .dashboard-hero-inner,
  .admin-topbar-inner {
    min-height: 0;
    padding: 17px 0 18px;
    display: grid;
    grid-template-columns: minmax(0,1fr);
    gap: 11px;
  }
  .dashboard-hero .eyebrow,
  .admin-topbar .eyebrow { display: none; }
  .dashboard-hero h1,
  .admin-topbar h1 {
    margin: 0;
    font-size: clamp(1.45rem, 7vw, 1.8rem);
    line-height: 1.08;
    letter-spacing: -.035em;
  }
  .dashboard-hero p,
  .admin-topbar p {
    margin: 5px 0 0;
    max-width: 31rem;
    color: #c8d2e7;
    font-size: .71rem;
    line-height: 1.45;
  }
  .dashboard-hero .btn,
  .admin-topbar .btn {
    width: fit-content;
    min-height: 40px;
    padding-inline: 14px;
    border-radius: 11px;
    font-size: .7rem;
  }
  .dashboard-content,
  .admin-shell {
    padding: 12px 0 24px;
  }
  .dashboard-section-heading,
  .admin-section-heading {
    margin-bottom: 11px;
    gap: 8px;
  }
  .dashboard-section-heading h2,
  .admin-section-heading h2 { font-size: 1.22rem; }
  .dashboard-section-heading p,
  .admin-section-heading p { font-size: .69rem; }

  /* Cards and forms use phone-scale spacing instead of desktop whitespace. */
  .card { border-radius: 15px; box-shadow: 0 5px 18px rgba(24,40,75,.055); }
  .admin-panel,
  .settings-card,
  .content-form,
  .admin-manual-booking-form,
  .exceptions-panel,
  .tax-reserve-card,
  .earnings-overview-card,
  .goals-tax-gate,
  .savings-goal-card,
  .maintenance-settings-form {
    padding: 13px;
    border-radius: 15px;
  }
  .panel-heading { gap: 8px; margin-bottom: 10px; }
  .panel-heading h3 { font-size: .9rem; }
  .panel-heading p { margin-top: 3px; font-size: .63rem; line-height: 1.4; }
  .form-grid,
  .admin-filters,
  .booking-filter-panel,
  .schedule-settings,
  .student-terms-form,
  .earnings-filter-row { gap: 8px; }
  .form-actions { gap: 7px; }
  .form-actions .btn { flex: 1 1 auto; }

  /* KPI tiles are compact dashboard widgets. */
  .stats-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px; }
  .stat-card {
    min-height: 88px;
    padding: 11px;
    border-radius: 14px;
    gap: 8px;
  }
  .stat-icon { width: 30px; height: 30px; flex-basis: 30px; border-radius: 9px; }
  .stat-icon svg { width: 16px; height: 16px; }
  .stat-card strong { font-size: 1.15rem; }
  .stat-card small { font-size: .58rem; }
  .stat-card span { font-size: .56rem; }

  /* Booking is a sequence of full-width mobile task cards. */
  .compact-page-hero { padding: 22px 0 17px; }
  .compact-page-hero h1 { font-size: clamp(1.72rem, 8.4vw, 2.15rem); }
  .compact-page-hero p { max-width: 36rem; font-size: .76rem; }
  .booking-section { padding: 10px 0 22px; }
  .booking-layout { display: grid; grid-template-columns: minmax(0,1fr); gap: 9px; }
  .booking-calendar,
  .booking-summary {
    padding: 14px;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(24,40,75,.05);
  }
  .booking-summary { position: static; top: auto; }
  .booking-step-heading h2 { font-size: 1rem; }
  .date-scroller {
    margin-inline: -14px;
    padding-inline: 14px;
    grid-auto-columns: 64px;
    scroll-padding-inline: 14px;
  }
  .date-choice { min-height: 74px; }
  .slots-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 6px; }
  .slot-button { min-height: 62px; padding: 7px 4px; }
  .booking-form { gap: 9px; }
  .booking-actions { gap: 7px; }
  .booking-actions .btn { min-height: 48px; }

  /* Lesson cards favor scanability and one-thumb actions. */
  .booking-list { gap: 8px; }
  .lesson-booking-card {
    grid-template-columns: 42px minmax(0,1fr);
    gap: 9px;
    padding: 12px;
    border-radius: 15px;
  }
  .lesson-date-box { width: 42px; height: 48px; border-radius: 11px; }
  .lesson-title-row h3 { font-size: .88rem; }
  .lesson-meta { gap: 6px 9px; font-size: .61rem; }
  .lesson-actions { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 6px; }
  .lesson-actions .btn,
  .lesson-actions button { min-height: 42px; border-radius: 11px; }

  /* Data grids stay inside the screen and advertise horizontal scrolling. */
  .table-card,
  .current-schedule-panel,
  .schedule-time-grid-panel {
    max-width: 100%;
    overflow: hidden;
    border-radius: 14px;
  }
  .table-wrap,
  .current-schedule-wrap,
  .schedule-time-grid-wrap {
    max-width: 100%;
    margin-inline: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .admin-table th { padding: 9px 10px; font-size: .57rem; }
  .admin-table td { padding: 10px; font-size: .67rem; }
  .current-schedule-table,
  .schedule-time-grid { scroll-snap-type: x proximity; }

  /* Sticky actions and notifications sit above the app tab bar. */
  .sticky-actions {
    bottom: calc(var(--mobile-app-nav-safe-height) + 8px);
    z-index: 24;
  }
  .toast {
    bottom: calc(var(--mobile-app-nav-safe-height) + 9px);
    z-index: 120;
  }
  body.mobile-keyboard-mode .sticky-actions { position: static; }

  /* Chat occupies the actual usable app viewport, including the tab bar. */
  .chat-window {
    min-height: min(460px, calc(100dvh - var(--app-header-height) - var(--mobile-app-nav-safe-height) - 60px));
    height: calc(100dvh - var(--app-header-height) - var(--mobile-app-nav-safe-height) - 28px);
    max-height: 720px;
  }
  .chat-layout-admin.is-mobile-list-mode .chat-students {
    height: min(620px, calc(100dvh - var(--app-header-height) - var(--mobile-app-nav-safe-height) - 32px));
  }
  body.mobile-keyboard-mode .chat-window {
    height: calc(100dvh - var(--app-header-height) - 18px);
    min-height: 360px;
  }
  body.mobile-keyboard-mode .chat-compose { padding-bottom: max(7px, env(safe-area-inset-bottom)); }

  /* Hide desktop-style footers where the app navigation already owns the chrome. */
  body[data-route="dashboard"] .site-footer,
  body[data-route="admin"] .site-footer,
  body[data-route="booking"] .site-footer,
  body[data-route="payment"] .site-footer { display: none; }

  .payment-page .section-pad { padding: 14px 0 24px; }
  .payment-layout { gap: 9px; }
  .payment-details-card,
  .payment-purpose-card,
  .payment-actions-card,
  .payment-qr-card { padding: 14px; }

  /* Legal/public footer still works but no longer fights the bottom tabs. */
  .site-footer { padding-bottom: 24px; }
  .footer-grid { gap: 20px 16px; }

  /* Modal sheets should appear over the app tab bar. */
  .modal-backdrop { z-index: 110; }
  .busy-overlay { z-index: 140; }
}

@media (max-width: 520px) {
  .container,
  .narrow-container { width: min(calc(100% - 18px), var(--container)); }

  .mobile-app-nav-inner { padding-inline: 4px; }
  .mobile-app-nav-label { font-size: .55rem; }
  .mobile-app-sheet-list { grid-template-columns: minmax(0,1fr); gap: 6px; }
  .mobile-app-sheet-item {
    min-height: 62px;
    padding: 9px 10px;
    grid-template-columns: 32px minmax(0,1fr) 14px;
  }
  .mobile-app-sheet-item > span:first-child { width: 32px; height: 32px; }
  .mobile-app-sheet-item > svg {
    display: block;
    width: 15px;
    height: 15px;
    fill: none;
    stroke: #9aa5b6;
    stroke-width: 1.8;
  }
  .mobile-app-sheet-item small { white-space: nowrap; }
  .mobile-app-more-sheet { padding-inline: 10px; }

  .slots-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .stats-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .admin-topbar-inner,
  .dashboard-hero-inner { padding-block: 15px 16px; }
  .dashboard-hero .btn,
  .admin-topbar .btn { width: 100%; }
  .student-mini-stats { gap: 5px; }
}

@media (max-width: 360px) {
  .mobile-app-nav-inner { gap: 0; padding-inline: 1px; }
  .mobile-app-nav-item { padding-inline: 0; }
  .mobile-app-nav-icon { width: 31px; }
  .mobile-app-nav-label { font-size: .51rem; }
  .brand-copy strong { max-width: 42vw; font-size: .8rem; }
  .stats-grid { gap: 5px; }
  .stat-card { min-height: 84px; padding: 9px; }
}

@keyframes mobileAppBackdropIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes mobileAppSheetIn {
  from { transform: translateY(30px); opacity: .72; }
  to { transform: translateY(0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-app-nav,
  .mobile-app-more-backdrop,
  .mobile-app-more-sheet,
  .mobile-app-nav-icon { transition: none; animation: none; }
}

/* v1.17.0 — dedicated mobile screens: home, profile, billing, upcoming lessons and booking */
.mobile-home-lesson-card,
.mobile-screen-heading,
.lesson-mobile-header,
.mobile-booking-selection,
.mobile-billing-list,
.mobile-payment-history-list,
.mobile-payment-overview-wrap { display: none; }

.profile-identity-copy { display: none; }
.profile-form-section,
.profile-form-section-grid { display: contents; }
.profile-form-section > legend { display: none; }

@media (max-width: 760px) {
  /* Shared native screen language. */
  .mobile-screen-heading {
    display: block;
    width: 100%;
    padding: 5px 1px 12px;
  }
  .mobile-screen-kicker {
    display: block;
    margin-bottom: 5px;
    color: #7c899d;
    font-size: .62rem;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: .055em;
    text-transform: uppercase;
  }
  .mobile-screen-title-row {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  .mobile-screen-title-row h1 {
    min-width: 0;
    margin: 0;
    color: #17243a;
    font-size: clamp(1.48rem, 7.2vw, 1.8rem);
    line-height: 1.08;
    letter-spacing: -.04em;
    text-wrap: balance;
  }
  .mobile-screen-heading > p {
    max-width: 34rem;
    margin: 6px 0 0;
    color: #758196;
    font-size: .72rem;
    line-height: 1.48;
  }
  .mobile-screen-count,
  .mobile-screen-step {
    flex: 0 0 auto;
    min-width: 30px;
    min-height: 26px;
    padding: 4px 8px;
    border: 1px solid #dfe5ee;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: #fff;
    color: #647189;
    font-size: .62rem;
    line-height: 1;
    font-weight: 850;
    box-shadow: 0 2px 8px rgba(20, 33, 57, .04);
  }

  /* HOME — turn the marketing page into a focused app landing screen. */
  body[data-route="home"] { background: #fff; }
  body[data-route="home"] .site-header { background: rgba(255,255,255,.97); }
  body[data-route="home"] .hero {
    padding: 20px 0 18px;
    background: #fff;
  }
  body[data-route="home"] .hero-grid { display: block; }
  body[data-route="home"] .hero-copy { text-align: left; }
  body[data-route="home"] .hero-copy h1 {
    max-width: 23rem;
    margin: 8px 0 11px;
    font-size: clamp(2rem, 10.7vw, 2.65rem);
    line-height: .99;
  }
  body[data-route="home"] .hero-lead {
    max-width: 31rem;
    color: #68758a;
    font-size: .9rem;
    line-height: 1.53;
  }
  body[data-route="home"] .hero-actions,
  body[data-route="home"] .hero-metrics,
  body[data-route="home"] .hero-visual { display: none; }
  body[data-route="home"] .mobile-home-lesson-card {
    display: block;
    margin-top: 18px;
    padding: 14px;
    border: 1px solid #e0e6ef;
    border-radius: 19px;
    background: linear-gradient(180deg, #fff 0%, #fafbfe 100%);
    box-shadow: 0 10px 30px rgba(23, 37, 65, .07);
  }
  .mobile-home-tutor {
    min-width: 0;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e8ecf2;
  }
  .mobile-home-tutor .teacher-avatar {
    width: 44px;
    height: 44px;
    margin: 0;
    border-radius: 13px;
  }
  .mobile-home-tutor > div:last-child { min-width: 0; display: grid; gap: 1px; }
  .mobile-home-tutor small { color: #8792a5; font-size: .57rem; font-weight: 740; }
  .mobile-home-tutor strong { overflow: hidden; color: #1b2940; font-size: .84rem; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-home-tutor span { display: flex; align-items: center; gap: 5px; color: #647189; font-size: .6rem; }
  .mobile-home-tutor span i { width: 6px; height: 6px; border-radius: 50%; background: #27a669; box-shadow: 0 0 0 4px rgba(39,166,105,.1); }
  .mobile-home-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin: 12px 0;
  }
  .mobile-home-facts > div {
    min-width: 0;
    padding: 0 8px;
    border-right: 1px solid #e6ebf2;
  }
  .mobile-home-facts > div:first-child { padding-left: 0; }
  .mobile-home-facts > div:last-child { padding-right: 0; border-right: 0; }
  .mobile-home-facts small { display: block; margin-bottom: 2px; color: #929bad; font-size: .53rem; }
  .mobile-home-facts strong { display: block; overflow: hidden; color: #26354d; font-size: .68rem; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-home-lesson-card .btn { min-height: 48px; border-radius: 13px; }
  .mobile-home-text-link {
    min-height: 38px;
    margin-top: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: #65738a;
    font-size: .67rem;
    font-weight: 730;
    text-decoration: none;
  }
  .mobile-home-text-link svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }
  body[data-route="home"] .hero-note {
    margin: 11px 0 0;
    justify-content: center;
    color: #7a8698;
    font-size: .65rem;
    text-align: center;
  }
  body[data-route="home"] .trust-strip { border-block: 0; background: #f7f8fb; }
  body[data-route="home"] .section-pad { padding-block: 30px; }
  body[data-route="home"] .section-heading { margin-bottom: 15px; }
  body[data-route="home"] .split-heading { display: block; }
  body[data-route="home"] .split-heading > p { margin-top: 9px; font-size: .78rem; line-height: 1.55; }
  body[data-route="home"] .section-heading h2,
  body[data-route="home"] .learning-panel h2 { font-size: 1.62rem; line-height: 1.08; }
  body[data-route="home"] .feature-grid,
  body[data-route="home"] .reviews-grid {
    width: calc(100% + 18px);
    margin-right: -18px;
    display: flex;
    gap: 9px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  body[data-route="home"] .feature-grid::-webkit-scrollbar,
  body[data-route="home"] .reviews-grid::-webkit-scrollbar { display: none; }
  body[data-route="home"] .feature-card,
  body[data-route="home"] .review-card {
    min-width: min(82vw, 320px);
    flex: 0 0 auto;
    scroll-snap-align: start;
  }
  body[data-route="home"] .learning-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  body[data-route="home"] .lesson-card-stack { order: -1; }
  body[data-route="home"] .price-card { padding: 18px; border-radius: 17px; }
  body[data-route="home"] .lesson-example-card { padding: 12px; border-radius: 13px; }
  body[data-route="home"] .check-list { gap: 9px; }
  body[data-route="home"] .check-list li { align-items: flex-start; font-size: .75rem; line-height: 1.48; }
  body[data-route="home"] .meet-transparency-card { padding: 18px; gap: 13px; align-items: flex-start; }
  body[data-route="home"] .meet-transparency-card h2 { font-size: 1.12rem; line-height: 1.2; }
  body[data-route="home"] .meet-transparency-card p { font-size: .72rem; line-height: 1.5; }
  body[data-route="home"] .faq-grid { gap: 15px; }
  body[data-route="home"] .accordion-list details { border-radius: 13px; }

  /* DASHBOARD — app screen header replaces the desktop hero. */
  body[data-route="dashboard"] .dashboard-hero { display: none; }
  .mobile-dashboard-screen-heading { padding-bottom: 10px; }
  .dashboard-content { padding-top: 9px; }
  .dashboard-main > .dashboard-section-heading:first-child { display: none; }

  /* UPCOMING LESSONS — native agenda cards instead of squeezed desktop rows. */
  .lesson-booking-card {
    display: block;
    padding: 13px;
    border: 1px solid #e1e6ee;
    background: #fff;
  }
  .booking-list > .lesson-booking-card:first-child {
    border-color: #c9d4f3;
    box-shadow: 0 9px 26px rgba(50, 83, 190, .09);
  }
  .lesson-date-box { display: none; }
  .lesson-mobile-header {
    min-width: 0;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e9edf3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .lesson-mobile-header > div { min-width: 0; display: grid; gap: 1px; }
  .lesson-mobile-header small { color: #7d899d; font-size: .58rem; font-weight: 760; text-transform: capitalize; }
  .lesson-mobile-header strong { color: #28364d; font-size: .77rem; }
  .lesson-mobile-header > span {
    flex: 0 0 auto;
    min-height: 32px;
    padding: 7px 9px;
    border-radius: 10px;
    background: #eff3fb;
    color: #2f4b9b;
    font-size: .72rem;
    font-weight: 850;
  }
  .lesson-main-info { min-width: 0; }
  .lesson-title-row { align-items: flex-start; }
  .lesson-title-row .lesson-time { display: none; }
  .lesson-title-row h3 { margin-top: 5px; font-size: 1rem; line-height: 1.28; }
  .lesson-meta { margin-top: 8px; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 6px; }
  .lesson-meta > span {
    min-width: 0;
    min-height: 34px;
    padding: 7px 8px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    gap: 5px;
    background: #f7f8fb;
    color: #657187;
    font-size: .61rem;
    overflow-wrap: anywhere;
  }
  .lesson-meta > span:first-child { display: none; }
  .lesson-meta svg { width: 14px; height: 14px; flex: 0 0 auto; }
  .lesson-comment,
  .lesson-finance-row { margin-top: 8px; padding: 9px 10px; }
  .lesson-finance-row > span:first-child { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .lesson-finance-row > span:first-child small { text-align: right; }
  .btn-meet { width: 100%; min-height: 44px; margin-top: 8px; }
  .meet-awaiting,
  .attendance-note { font-size: .66rem; line-height: 1.45; }
  .booking-edit-form { margin-top: 10px; padding: 11px; border-radius: 12px; background: #f7f9fc; }

  /* PROFILE — grouped settings like a native account screen. */
  .profile-screen-card {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  .profile-desktop-heading { display: none; }
  .profile-photo-editor {
    margin: 0 0 10px;
    padding: 14px;
    border: 1px solid #e1e6ee;
    border-radius: 16px;
    display: grid;
    grid-template-columns: 58px minmax(0,1fr);
    align-items: center;
    gap: 11px;
    background: #fff;
  }
  .profile-photo-editor .avatar.profile-photo-large {
    width: 58px;
    height: 58px;
    grid-row: 1 / span 2;
    border-radius: 18px;
  }
  .profile-identity-copy {
    min-width: 0;
    display: grid;
    gap: 2px;
  }
  .profile-identity-copy strong { overflow: hidden; color: #26354c; font-size: .84rem; text-overflow: ellipsis; white-space: nowrap; }
  .profile-identity-copy span { overflow: hidden; color: #8792a4; font-size: .61rem; text-overflow: ellipsis; white-space: nowrap; }
  .profile-photo-form {
    grid-column: 2;
    display: flex;
    align-items: center;
    gap: 7px;
  }
  .profile-photo-form .btn { min-height: 34px; padding-inline: 10px; font-size: .62rem; }
  .profile-photo-form small { font-size: .53rem; }
  .profile-main-form { display: block; }
  .profile-form-section {
    min-width: 0;
    margin: 0 0 9px;
    padding: 13px;
    border: 1px solid #e1e6ee;
    border-radius: 16px;
    display: block;
    background: #fff;
  }
  .profile-form-section > legend {
    display: block;
    padding: 0 0 9px;
    color: #516077;
    font-size: .65rem;
    line-height: 1;
    font-weight: 850;
    letter-spacing: .02em;
  }
  .profile-form-section-grid {
    display: grid;
    grid-template-columns: minmax(0,1fr);
    gap: 10px;
  }
  .profile-form-section-grid .span-2 { grid-column: auto; }
  .profile-form-section label { gap: 5px; font-size: .68rem; }
  .profile-form-section input,
  .profile-form-section select { min-height: 48px; border-radius: 11px; background: #fbfcfe; }
  .profile-form-section label > small { font-size: .58rem; line-height: 1.42; }
  .profile-form-section .important-profile-field {
    padding: 0;
    border: 0;
    background: transparent;
  }
  .profile-email-field input { color: #7f8999; background: #f3f5f8; }
  .profile-save-actions {
    position: sticky;
    z-index: 23;
    bottom: calc(var(--mobile-app-nav-safe-height) + 8px);
    margin: 7px 0 1px;
    padding: 7px;
    border: 1px solid rgba(217,224,235,.9);
    border-radius: 15px;
    display: block;
    background: rgba(255,255,255,.94);
    box-shadow: 0 10px 28px rgba(24,40,74,.11);
    backdrop-filter: blur(18px);
  }
  .profile-save-actions .btn { width: 100%; min-height: 48px; border-radius: 12px; }
  body.mobile-keyboard-mode .profile-save-actions { position: static; padding: 0; border: 0; box-shadow: none; background: transparent; }

  /* BILLING TAB — balances first, native ledger cards instead of tables. */
  .billing-main-heading { display: none; }
  .billing-summary-grid {
    width: calc(100% + 9px);
    margin-right: -9px;
    padding: 0 9px 4px 0;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .billing-summary-grid::-webkit-scrollbar { display: none; }
  .billing-summary-grid .balance-card {
    min-width: min(78vw, 285px);
    min-height: 112px;
    flex: 0 0 auto;
    padding: 15px;
    border-radius: 16px;
    scroll-snap-align: start;
  }
  .billing-summary-grid .balance-card:first-child { min-width: min(88vw, 330px); }
  .billing-summary-grid .balance-card small { font-size: .61rem; }
  .billing-summary-grid .balance-card strong { margin-top: 7px; font-size: 1.65rem; }
  .billing-summary-grid .balance-card span { font-size: .62rem; }
  .payment-cta-card {
    margin: 8px 0 12px;
    padding: 14px;
    border-radius: 16px;
    display: grid;
    grid-template-columns: minmax(0,1fr);
    gap: 10px;
  }
  .payment-cta-card strong { font-size: .86rem; }
  .payment-cta-card p { font-size: .65rem; line-height: 1.45; }
  .payment-cta-card .btn { width: 100%; min-height: 46px; }
  .desktop-billing-table,
  .desktop-payment-history { display: none; }
  .mobile-billing-list,
  .mobile-payment-history-list { display: grid; gap: 7px; }
  .mobile-billing-entry,
  .mobile-payment-entry {
    min-width: 0;
    padding: 12px;
    border: 1px solid #e1e6ee;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 3px 12px rgba(24,40,74,.035);
  }
  .mobile-billing-entry-top,
  .mobile-billing-entry-bottom,
  .mobile-payment-entry {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  .mobile-billing-entry-top > div,
  .mobile-payment-entry > div { min-width: 0; display: grid; gap: 2px; }
  .mobile-billing-entry-top small,
  .mobile-payment-entry small { color: #8691a4; font-size: .56rem; }
  .mobile-billing-entry-top > div > strong,
  .mobile-payment-entry > div > strong { overflow: hidden; color: #314058; font-size: .69rem; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-billing-entry-top > strong,
  .mobile-payment-entry > strong { flex: 0 0 auto; color: #202f47; font-size: .76rem; }
  .mobile-billing-entry-bottom { margin-top: 9px; padding-top: 9px; border-top: 1px solid #edf0f4; }
  .mobile-billing-entry-bottom > span:first-child { color: #6f7b8f; font-size: .59rem; }
  .mobile-billing-entry .payment-pill { font-size: .55rem; padding: 5px 7px; }
  .payment-history-heading { margin-top: 18px; }
  .payment-history-heading h3 { margin: 0; font-size: .95rem; }

  /* DEDICATED PAYMENT — amount and action are the first screen, QR is desktop-only. */
  body[data-route="payment"] .payment-page .page-hero { display: none; }
  .payment-content-section { padding-top: 9px !important; }
  .mobile-payment-overview-wrap { display: block; }
  .mobile-payment-overview {
    position: relative;
    overflow: hidden;
    padding: 19px 16px 15px;
    border-radius: 19px;
    background: linear-gradient(145deg, #182844 0%, #244478 100%);
    color: #fff;
    box-shadow: 0 13px 32px rgba(24,42,77,.18);
  }
  .mobile-payment-overview::after {
    content: '';
    position: absolute;
    width: 150px;
    height: 150px;
    top: -75px;
    right: -45px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    pointer-events: none;
  }
  .mobile-payment-overview-label { color: #becbe0; font-size: .62rem; font-weight: 780; }
  .mobile-payment-overview > strong { display: block; margin-top: 5px; font-size: clamp(2rem, 11vw, 2.7rem); line-height: 1; letter-spacing: -.045em; }
  .mobile-payment-overview > p { max-width: 30rem; margin: 8px 0 13px; color: #cbd5e6; font-size: .67rem; line-height: 1.45; }
  .mobile-payment-overview .btn { min-height: 49px; border-radius: 13px; background: #fff; color: #24499d; box-shadow: none; }
  .mobile-payment-overview .btn:disabled { background: rgba(255,255,255,.16); color: rgba(255,255,255,.62); }
  .mobile-payment-overview > small { display: block; margin-top: 8px; color: #b8c6db; font-size: .55rem; line-height: 1.4; text-align: center; }
  .mobile-payment-credit { width: fit-content; margin: -2px 0 12px; padding: 5px 8px; border-radius: 999px; background: rgba(105,223,162,.14); color: #b9f2d2; font-size: .59rem; }
  .mobile-payment-profile-link { width: 100%; min-height: 38px; margin-top: 6px; border: 0; background: transparent; color: #d6e0ef; font: inherit; font-size: .62rem; font-weight: 720; text-decoration: underline; text-underline-offset: 3px; }
  .payment-layout { display: flex; flex-direction: column; margin-top: 9px; }
  .payment-main-column { display: flex; flex-direction: column; gap: 8px; }
  .payment-summary-grid,
  .payment-actions-card,
  .payment-qr-card { display: none; }
  .payment-mobile-primary { order: 1; }
  .payment-mobile-secondary { order: 2; }
  .payment-warning { order: 0; padding: 13px; border-radius: 14px; }
  .payment-purpose-card,
  .payment-details-card { padding: 14px; border-radius: 16px; }
  .payment-purpose-card h2,
  .payment-details-card h2 { font-size: 1rem; }
  .payment-purpose-card > p { font-size: .65rem; line-height: 1.5; }
  .purpose-copy-box {
    padding: 10px;
    border-radius: 12px;
    display: grid;
    grid-template-columns: minmax(0,1fr);
    gap: 8px;
  }
  .purpose-copy-box strong { font-size: .68rem; line-height: 1.45; overflow-wrap: anywhere; }
  .purpose-copy-box .btn { min-height: 42px; }
  .payment-details-list > div {
    grid-template-columns: minmax(0,1fr);
    gap: 4px;
    padding: 10px 0;
  }
  .payment-details-list dt { font-size: .57rem; }
  .payment-details-list dd { font-size: .7rem; line-height: 1.4; }
  .payment-details-list code { font-size: .68rem; overflow-wrap: anywhere; }
  .copy-inline { min-height: 32px; margin: 6px 0 0; padding-inline: 9px; }

  /* BOOKING — one task at a time, no empty desktop summary card. */
  body[data-route="booking"] .booking-page > .page-hero { display: none; }
  .booking-mobile-screen-heading { display: block; }
  .booking-section { padding-top: 9px; }
  .booking-layout { gap: 8px; }
  .booking-calendar,
  .booking-summary {
    border: 1px solid #e1e6ee;
    background: #fff;
  }
  .booking-summary.is-empty { display: none; }
  .booking-calendar .booking-step-heading { margin-bottom: 2px; }
  .booking-calendar .booking-step-heading .step-number { display: none; }
  .booking-calendar .booking-step-heading h2 { font-size: .88rem; }
  .booking-calendar .booking-step-heading p { font-size: .61rem; }
  .slot-heading { padding-top: 4px; border-top: 1px solid #edf0f4; }
  .booking-summary.has-selection { margin-top: 2px; }
  .booking-summary.has-selection > .booking-step-heading .step-number { background: #e8edff; color: #3456d1; }
  .mobile-booking-selection {
    min-width: 0;
    margin-bottom: 2px;
    padding: 10px;
    border: 1px solid #dfe6f3;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: #f6f8fd;
  }
  .mobile-booking-selection > div { min-width: 0; display: grid; gap: 1px; }
  .mobile-booking-selection small { color: #8490a4; font-size: .55rem; }
  .mobile-booking-selection strong { overflow: hidden; color: #2a3952; font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-booking-selection span { color: #3456d1; font-size: .75rem; font-weight: 840; }
  .mobile-change-slot {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 0 10px;
    border: 1px solid #d8dfeb;
    border-radius: 10px;
    background: #fff;
    color: #52617a;
    font: inherit;
    font-size: .61rem;
    font-weight: 760;
  }
  .booking-form label { font-size: .68rem; }
  .booking-form input,
  .booking-form select,
  .booking-form textarea { border-radius: 11px; background: #fbfcfe; }
  .booking-mode-actions .btn { min-height: 49px; border-radius: 12px; }
  .recurring-booking-button { background: #fff; }
  .recurring-booking-note { font-size: .62rem; line-height: 1.45; }
  .form-privacy { font-size: .55rem; line-height: 1.45; }
  .booking-assurances {
    width: calc(100% + 9px);
    margin-right: -9px;
    padding-right: 9px;
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .booking-assurances::-webkit-scrollbar { display: none; }
  .booking-assurances > div {
    min-width: min(78vw, 290px);
    flex: 0 0 auto;
    scroll-snap-align: start;
  }
}

@media (max-width: 520px) {
  body[data-route="home"] .container,
  body[data-route="dashboard"] .container,
  body[data-route="payment"] .container,
  body[data-route="booking"] .container { width: calc(100% - 18px); }

  .lesson-meta { grid-template-columns: minmax(0,1fr); }
  .lesson-actions { grid-template-columns: minmax(0,1fr); }
  .lesson-finance-row > span:first-child { align-items: flex-start; flex-direction: column; gap: 2px; }
  .lesson-finance-row > span:first-child small { text-align: left; }

  .profile-photo-editor { grid-template-columns: 54px minmax(0,1fr); padding: 12px; }
  .profile-photo-editor .avatar.profile-photo-large { width: 54px; height: 54px; }
  .profile-photo-form small { display: none; }
  .profile-form-section { padding: 12px; }

  .billing-summary-grid .balance-card { min-width: 76vw; }
  .billing-summary-grid .balance-card:first-child { min-width: 88vw; }

  .mobile-payment-overview { padding: 17px 14px 14px; }
  .payment-purpose-card,
  .payment-details-card { padding: 12px; }

  .booking-calendar,
  .booking-summary { padding: 12px; }
  .date-scroller { margin-inline: -12px; padding-inline: 12px; scroll-padding-inline: 12px; }
  .booking-assurances > div { min-width: 82vw; }
}

@media (max-width: 360px) {
  .mobile-home-facts > div { padding-inline: 6px; }
  .mobile-home-facts strong { font-size: .63rem; }
  .mobile-screen-title-row h1 { font-size: 1.42rem; }
  .lesson-mobile-header { gap: 7px; }
  .lesson-mobile-header > span { padding-inline: 7px; font-size: .66rem; }
  .profile-photo-form .btn { padding-inline: 8px; }
}

/* v1.17.1 — home mobile-native content groups: trust, approach, reviews and contact */
.trust-item small { font: inherit; color: inherit; }
.feature-copy { min-width: 0; }
.review-card { display: flex; flex-direction: column; }
.review-card .quote-mark { order: 0; }
.review-card > p { order: 1; }
.review-meta { order: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.review-author { order: 3; }
.review-author > span:last-child { min-width: 0; display: grid; gap: 1px; }
.review-author small { display: none; color: var(--muted); font-size: .68rem; font-weight: 600; }
.review-index { display: none; }
.contact-details a > span { display: none; }
.contact-details a > strong { font-weight: inherit; }

@media (max-width: 760px) {
  /* Trust: compact 2×2 app tiles instead of a desktop strip/carousel. */
  body[data-route="home"] .mobile-trust-section {
    padding: 4px 0 16px;
    overflow: visible;
    border: 0;
    background: #fff;
  }
  body[data-route="home"] .mobile-trust-section .trust-grid {
    width: min(calc(100% - 18px), var(--container));
    min-height: 0;
    margin-inline: auto;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    overflow: visible;
    scroll-snap-type: none;
  }
  body[data-route="home"] .mobile-trust-section .trust-item {
    min-width: 0;
    min-height: 82px;
    padding: 12px;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: start;
    gap: 9px;
    border: 1px solid #e6eaf1 !important;
    border-radius: 15px;
    background: #f8fafc;
    box-shadow: none;
    scroll-snap-align: none;
  }
  body[data-route="home"] .mobile-trust-section .trust-item:hover { background: #f8fafc; }
  body[data-route="home"] .mobile-trust-section .trust-item svg {
    width: 30px;
    height: 30px;
    padding: 7px;
    border-radius: 10px;
    background: #e5f6ef;
    color: #168568;
  }
  body[data-route="home"] .mobile-trust-section .trust-item > span {
    min-width: 0;
    padding-top: 1px;
    display: grid;
    gap: 2px;
    color: #7a8699;
    line-height: 1.28;
  }
  body[data-route="home"] .mobile-trust-section .trust-item strong {
    color: #26344b;
    font-size: .68rem;
    line-height: 1.28;
  }
  body[data-route="home"] .mobile-trust-section .trust-item small {
    color: #7e899b;
    font-size: .57rem;
    line-height: 1.35;
  }

  /* Approach: one grouped step list, not four squeezed desktop cards. */
  body[data-route="home"] #approach .section-heading { margin-bottom: 13px; }
  body[data-route="home"] #approach .feature-grid {
    width: 100%;
    margin: 0;
    display: block;
    overflow: hidden;
    border: 1px solid #e1e6ee;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(23, 37, 65, .045);
  }
  body[data-route="home"] #approach .feature-card {
    position: relative;
    min-width: 0;
    min-height: 0;
    padding: 14px;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: start;
    gap: 11px;
    border: 0;
    border-bottom: 1px solid #ebeff4;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
    scroll-snap-align: none;
  }
  body[data-route="home"] #approach .feature-card:last-child { border-bottom: 0; }
  body[data-route="home"] #approach .feature-card:hover {
    border-color: #ebeff4;
    box-shadow: none;
    transform: none;
  }
  body[data-route="home"] #approach .feature-number {
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: #eef2ff;
    color: #3656c9;
    font-size: .61rem;
  }
  body[data-route="home"] #approach .feature-card:not(:last-child) .feature-number::after {
    content: '';
    position: absolute;
    left: 30px;
    top: 48px;
    bottom: -1px;
    width: 1px;
    background: #e4e9f2;
  }
  body[data-route="home"] #approach .feature-copy { min-width: 0; }
  body[data-route="home"] #approach .feature-card h3 {
    margin: 1px 0 4px;
    color: #26344b;
    font-size: .78rem;
    line-height: 1.28;
    letter-spacing: -.01em;
  }
  body[data-route="home"] #approach .feature-card p {
    margin: 0;
    color: #748095;
    font-size: .68rem;
    line-height: 1.48;
  }

  /* Reviews: one almost-full-width native card per swipe. */
  body[data-route="home"] .reviews-section { background: #f7f8fb; }
  body[data-route="home"] .reviews-heading {
    max-width: none;
    margin-inline: 0;
    text-align: left;
  }
  body[data-route="home"] .reviews-heading .eyebrow { justify-content: flex-start; }
  body[data-route="home"] .reviews-heading p {
    margin-top: 8px !important;
    font-size: .72rem;
    line-height: 1.5;
  }
  body[data-route="home"] .reviews-grid {
    width: calc(100% + 9px);
    margin-right: -9px;
    padding: 1px 9px 4px 0;
    display: flex;
    gap: 9px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0 9px;
    scrollbar-width: none;
  }
  body[data-route="home"] .reviews-grid::-webkit-scrollbar { display: none; }
  body[data-route="home"] .review-card {
    position: relative;
    min-width: calc(100% - 25px);
    min-height: 0;
    padding: 15px;
    flex: 0 0 auto;
    border: 1px solid #e1e6ee;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(23, 37, 65, .05);
    scroll-snap-align: start;
  }
  body[data-route="home"] .review-card .quote-mark {
    position: absolute;
    top: 14px;
    right: 15px;
    z-index: 0;
    order: 0;
    color: #dce3f7;
    font-size: 2.35rem;
    line-height: .8;
    pointer-events: none;
  }
  body[data-route="home"] .review-author {
    position: relative;
    z-index: 1;
    order: 1;
    margin: 0;
    padding: 0 38px 11px 0;
    border: 0;
    display: flex;
    align-items: center;
    gap: 9px;
  }
  body[data-route="home"] .review-author .avatar.small {
    width: 35px;
    height: 35px;
    border-radius: 11px;
    font-size: .67rem;
  }
  body[data-route="home"] .review-author strong {
    overflow: hidden;
    color: #28364e;
    font-size: .72rem;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  body[data-route="home"] .review-author small {
    display: block;
    color: #8994a6;
    font-size: .54rem;
    line-height: 1.3;
  }
  body[data-route="home"] .review-card > p {
    order: 2;
    min-height: 0;
    margin: 0;
    color: #566278;
    font-size: .72rem;
    line-height: 1.57;
  }
  body[data-route="home"] .review-meta {
    order: 3;
    margin-top: 13px;
    padding-top: 11px;
    border-top: 1px solid #e9edf3;
  }
  body[data-route="home"] .review-result {
    min-width: 0;
    gap: 6px;
    color: #18785f;
    font-size: .61rem;
    line-height: 1.35;
  }
  body[data-route="home"] .review-result svg { width: 15px; height: 15px; }
  body[data-route="home"] .review-index {
    display: inline-flex;
    flex: 0 0 auto;
    min-height: 24px;
    padding: 4px 7px;
    align-items: center;
    border-radius: 999px;
    background: #f0f3f8;
    color: #7d899c;
    font-size: .53rem;
    font-weight: 800;
    letter-spacing: .035em;
  }

  /* Contact: two independent app cards with quick contact actions. */
  body[data-route="home"] .contact-section {
    padding-top: 24px;
    padding-bottom: 28px;
    background: #f3f5f8;
  }
  body[data-route="home"] .contact-grid {
    display: block;
    gap: 0;
  }
  body[data-route="home"] .cta-panel {
    padding: 18px;
    border-radius: 20px;
    background: linear-gradient(145deg, #111d38, #20345e);
    box-shadow: 0 12px 32px rgba(17, 29, 56, .16);
  }
  body[data-route="home"] .cta-panel h2 {
    margin: 8px 0 16px;
    font-size: 1.42rem;
    line-height: 1.08;
    letter-spacing: -.035em;
  }
  body[data-route="home"] .cta-panel p {
    margin: 9px 0 14px;
    color: #c5cee1;
    font-size: .72rem;
    line-height: 1.5;
  }
  body[data-route="home"] .cta-panel > .btn {
    width: 100%;
    min-height: 48px;
    border-radius: 13px;
  }
  body[data-route="home"] .contact-details {
    margin-top: 11px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  body[data-route="home"] .contact-details a {
    min-width: 0;
    min-height: 52px;
    padding: 9px 10px;
    display: grid;
    align-content: center;
    gap: 2px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 12px;
    background: rgba(255,255,255,.06);
    text-decoration: none;
  }
  body[data-route="home"] .contact-details a > span {
    display: block;
    color: #8fa0c4;
    font-size: .49rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
  }
  body[data-route="home"] .contact-details a > strong {
    min-width: 0;
    overflow: hidden;
    color: #e6ebf6;
    font-size: .6rem;
    font-weight: 680;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  body[data-route="home"] .contact-form {
    margin-top: 10px;
    padding: 16px;
    border: 1px solid #e0e5ed;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(23, 37, 65, .045);
  }
  body[data-route="home"] .contact-form .form-heading span { font-size: .57rem; }
  body[data-route="home"] .contact-form .form-heading h3 {
    margin: 4px 0 14px;
    font-size: 1.08rem;
    line-height: 1.2;
  }
  body[data-route="home"] .contact-form label {
    margin-bottom: 11px;
    gap: 5px;
    font-size: .66rem;
  }
  body[data-route="home"] .contact-form input,
  body[data-route="home"] .contact-form textarea {
    min-height: 48px;
    border-radius: 12px;
    background: #fbfcfe;
  }
  body[data-route="home"] .contact-form textarea { min-height: 112px; }
  body[data-route="home"] .contact-form .btn { min-height: 48px; border-radius: 12px; }
  body[data-route="home"] .contact-form .form-privacy {
    display: block;
    margin-top: 9px;
    font-size: .52rem;
    line-height: 1.45;
  }
}

@media (max-width: 380px) {
  body[data-route="home"] .mobile-trust-section .trust-grid { gap: 7px; }
  body[data-route="home"] .mobile-trust-section .trust-item {
    min-height: 78px;
    padding: 10px;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 7px;
  }
  body[data-route="home"] .mobile-trust-section .trust-item svg { width: 28px; height: 28px; }
  body[data-route="home"] .contact-details { grid-template-columns: minmax(0, 1fr); }
  body[data-route="home"] .contact-details a > strong { white-space: normal; overflow-wrap: anywhere; }
}

/* v1.17.3 — focused mobile home: vertical reviews and content-priority audit */
.mobile-reviews-list { display: none; }

@media (max-width: 760px) {
  /* Keep the mobile landing page focused on choosing and booking a lesson. */
  body[data-route="home"] .home-mobile-optional,
  body[data-route="home"] .desktop-contact-form,
  body[data-route="home"] .hero-note { display: none !important; }

  /* Intro copy is useful on desktop, but duplicates the step cards on a phone. */
  body[data-route="home"] #approach .split-heading > p,
  body[data-route="home"] .reviews-heading > p { display: none !important; }

  /* Trust tiles become quick scan labels, not explanatory cards. */
  body[data-route="home"] .mobile-trust-section .trust-item {
    min-height: 64px;
    padding: 10px;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
  }
  body[data-route="home"] .mobile-trust-section .trust-item svg {
    width: 28px;
    height: 28px;
    padding: 6px;
  }
  body[data-route="home"] .mobile-trust-section .trust-item > span { padding-top: 0; }
  body[data-route="home"] .mobile-trust-section .trust-item strong { font-size: .67rem; }
  body[data-route="home"] .mobile-trust-section .trust-item small { display: none; }

  /* Reviews are vertical by default. No hidden content outside the viewport. */
  body[data-route="home"] .desktop-reviews-grid { display: none !important; }
  body[data-route="home"] .mobile-reviews-list {
    display: grid;
    gap: 10px;
  }
  body[data-route="home"] .mobile-reviews-list .review-card {
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 15px;
    flex: none;
    border: 1px solid #e1e6ee;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(23, 37, 65, .045);
    scroll-snap-align: none;
  }
  body[data-route="home"] .mobile-review-featured {
    border-color: #dce3ef;
    box-shadow: 0 10px 28px rgba(23, 37, 65, .065);
  }
  body[data-route="home"] .mobile-reviews-more {
    overflow: hidden;
    border: 1px solid #e1e6ee;
    border-radius: 15px;
    background: #fff;
  }
  body[data-route="home"] .mobile-reviews-more > summary {
    min-height: 56px;
    padding: 10px 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    list-style: none;
    -webkit-tap-highlight-color: transparent;
  }
  body[data-route="home"] .mobile-reviews-more > summary::-webkit-details-marker { display: none; }
  body[data-route="home"] .mobile-reviews-more > summary > .mobile-reviews-more-copy {
    /* Reset the generic FAQ summary badge styles. This label is text, not the rotating + badge. */
    width: auto;
    height: auto;
    min-width: 0;
    flex: 1 1 auto;
    display: grid;
    place-items: initial;
    align-content: center;
    justify-items: start;
    gap: 2px;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    transform: none !important;
    transition: none;
    overflow: visible;
  }
  body[data-route="home"] .mobile-reviews-more[open] > summary > .mobile-reviews-more-copy {
    transform: none !important;
  }
  body[data-route="home"] .mobile-reviews-more > summary strong {
    color: #2c3a51;
    font-size: .72rem;
    line-height: 1.35;
    white-space: normal;
  }
  body[data-route="home"] .mobile-reviews-more > summary small {
    color: #8a95a7;
    font-size: .60rem;
    line-height: 1.35;
    white-space: normal;
  }
  body[data-route="home"] .mobile-reviews-more > summary > svg {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    fill: none;
    stroke: #68758a;
    stroke-width: 1.8;
    transition: transform .18s ease;
  }
  body[data-route="home"] .mobile-reviews-more[open] > summary > svg { transform: rotate(180deg); }
  body[data-route="home"] .mobile-reviews-more-list {
    padding: 0 8px 8px;
    display: grid;
    gap: 8px;
  }
  body[data-route="home"] .mobile-reviews-more-list .review-card {
    border-radius: 14px;
    box-shadow: none;
    background: #fafbfc;
  }
  body[data-route="home"] .mobile-reviews-more-list .review-card > p {
    margin: 0;
  }
  body[data-route="home"] .mobile-reviews-list .review-index { display: none; }

  /* Contact on mobile is action-first: booking plus direct contact channels. */
  body[data-route="home"] .contact-section {
    padding-top: 18px;
    padding-bottom: 24px;
  }
  body[data-route="home"] .contact-grid { display: block; }
  body[data-route="home"] .cta-panel { margin: 0; }
}

@media (max-width: 380px) {
  body[data-route="home"] .mobile-trust-section .trust-item {
    min-height: 60px;
    padding: 9px;
    grid-template-columns: 26px minmax(0, 1fr);
  }
  body[data-route="home"] .mobile-trust-section .trust-item svg { width: 26px; height: 26px; }
  body[data-route="home"] .mobile-reviews-list .review-card { padding: 13px; }
}

/* v1.17.4 — mobile reviews disclosure readability fix */
/* v1.17.5 — mobile CTA heading/action spacing */

/* v1.18.0 — booking screen rebuilt as a dedicated mobile-app flow */
.mobile-booking-progress,
.mobile-booking-date-toolbar,
.mobile-booking-time-label,
.mobile-booking-mode,
.mobile-booking-submit-dock,
.mobile-no-available-slots { display: none; }

@media (max-width: 760px) {
  body[data-route="booking"] {
    background: #f5f7fb;
  }

  body[data-route="booking"] .booking-section {
    padding: 8px 0 18px;
  }

  body[data-route="booking"] .booking-mobile-screen-heading {
    padding: 6px 2px 13px;
    scroll-margin-top: calc(var(--app-header-height) + 8px);
  }

  body[data-route="booking"] .booking-mobile-screen-heading > p {
    margin-top: 7px;
    color: #758197;
    font-size: .7rem;
  }

  .mobile-booking-progress {
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .mobile-booking-progress span {
    height: 4px;
    border-radius: 999px;
    background: #dfe4ed;
    transition: background .18s ease, box-shadow .18s ease;
  }

  .mobile-booking-progress span.is-active {
    background: #3c5ed0;
    box-shadow: 0 2px 8px rgba(60, 94, 208, .18);
  }

  body[data-route="booking"] .booking-layout {
    width: 100%;
    display: block;
  }

  body[data-route="booking"] .booking-calendar,
  body[data-route="booking"] .booking-summary {
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  body[data-route="booking"] .booking-layout.has-slot-selection .booking-calendar,
  body[data-route="booking"] .booking-layout.is-choosing-slot .booking-summary {
    display: none !important;
  }

  body[data-route="booking"] .booking-calendar > .booking-step-heading,
  body[data-route="booking"] .booking-summary > .booking-step-heading {
    display: none;
  }

  .mobile-booking-date-toolbar,
  .mobile-booking-time-label {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  .mobile-booking-date-toolbar {
    margin-top: 1px;
    padding: 0 2px 9px;
  }

  .mobile-booking-date-toolbar strong,
  .mobile-booking-time-label strong {
    color: #26354d;
    font-size: .76rem;
    font-weight: 830;
  }

  .mobile-booking-date-toolbar span {
    color: #7e899b;
    font-size: .62rem;
    font-weight: 700;
    text-transform: capitalize;
  }

  body[data-route="booking"] .date-scroller {
    width: calc(100% + 18px);
    margin: 0 -9px;
    padding: 1px 9px 10px;
    grid-auto-columns: 58px;
    gap: 7px;
    scroll-padding-inline: 9px;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  body[data-route="booking"] .date-choice {
    min-height: 68px;
    padding: 7px 4px;
    gap: 0;
    border: 1px solid #e1e6ee;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(22, 35, 59, .035);
  }

  body[data-route="booking"] .date-choice small {
    color: #8994a6;
    font-size: .54rem;
    font-weight: 760;
    text-transform: uppercase;
  }

  body[data-route="booking"] .date-choice strong {
    margin: 2px 0 1px;
    color: #25344c;
    font-size: 1.12rem;
    line-height: 1;
  }

  body[data-route="booking"] .date-choice span {
    color: #8994a6;
    font-size: .54rem;
    font-weight: 680;
    text-transform: lowercase;
  }

  body[data-route="booking"] .date-choice.is-selected {
    border-color: #3557ca;
    background: linear-gradient(180deg, #4265d8, #3454c5);
    box-shadow: 0 8px 20px rgba(52, 84, 197, .2);
    transform: none;
  }

  body[data-route="booking"] .date-choice.is-selected small,
  body[data-route="booking"] .date-choice.is-selected strong,
  body[data-route="booking"] .date-choice.is-selected span {
    color: #fff;
  }

  body[data-route="booking"] .slot-heading {
    margin: 5px 0 0;
    padding: 13px 2px 8px;
    display: flex;
    flex-direction: row;
    align-items: end;
    justify-content: space-between;
    gap: 8px;
    border-top: 1px solid #e5e9f0;
  }

  body[data-route="booking"] .slot-heading > div {
    display: grid;
    gap: 2px;
  }

  body[data-route="booking"] .slot-heading > div > strong {
    color: #2b3a52;
    font-size: .72rem;
    line-height: 1.35;
  }

  body[data-route="booking"] .slot-heading > div > span {
    color: #8490a3;
    font-size: .58rem;
  }

  body[data-route="booking"] .timezone-badge {
    display: none;
  }

  .mobile-booking-time-label {
    padding: 4px 2px 8px;
  }

  .mobile-booking-time-label span {
    min-height: 24px;
    padding: 4px 8px;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: #edf1fb;
    color: #5369b7;
    font-size: .56rem;
    font-weight: 780;
  }

  body[data-route="booking"] .slots-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }

  body[data-route="booking"] .slot-button {
    min-height: 49px;
    padding: 8px 4px;
    border: 1px solid #dfe5ed;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 2px 7px rgba(22, 35, 59, .03);
  }

  body[data-route="booking"] .slot-button strong {
    color: #26354c;
    font-size: .78rem;
    line-height: 1;
  }

  body[data-route="booking"] .slot-button > span,
  body[data-route="booking"] .slot-button > small {
    display: none;
  }

  body[data-route="booking"] .slot-button.is-disabled {
    display: none;
  }

  body[data-route="booking"] .slot-button.is-selected {
    border-color: #3456cf;
    background: #3456cf;
    box-shadow: 0 6px 16px rgba(52, 86, 207, .18);
  }

  body[data-route="booking"] .slot-button.is-selected strong {
    color: #fff;
  }

  body[data-route="booking"] .booking-legend {
    display: none;
  }

  .mobile-no-available-slots {
    grid-column: 1 / -1;
    min-height: 156px;
    padding: 20px 16px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 8px;
    border: 1px dashed #d7deea;
    border-radius: 16px;
    background: #fff;
    text-align: center;
  }

  .mobile-no-available-slots > span {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #eef2fb;
    color: #526cc6;
  }

  .mobile-no-available-slots svg {
    width: 19px;
    height: 19px;
  }

  .mobile-no-available-slots strong {
    color: #304059;
    font-size: .72rem;
    line-height: 1.4;
  }

  .mobile-no-available-slots button {
    min-height: 36px;
    padding: 0 11px;
    border: 0;
    border-radius: 10px;
    background: #eef2fb;
    color: #405bb6;
    font: inherit;
    font-size: .59rem;
    font-weight: 780;
  }

  body[data-route="booking"] .booking-summary.has-selection {
    margin: 0;
  }

  body[data-route="booking"] .booking-form {
    gap: 10px;
    padding-bottom: 6px;
  }

  body[data-route="booking"] .mobile-booking-selection {
    margin: 0 0 3px;
    padding: 12px 13px;
    border: 1px solid #dce3ef;
    border-radius: 16px;
    background: linear-gradient(180deg, #fff, #f8faff);
    box-shadow: 0 4px 16px rgba(23, 37, 65, .045);
  }

  body[data-route="booking"] .mobile-booking-selection small {
    color: #8793a6;
    font-size: .54rem;
    font-weight: 720;
    text-transform: uppercase;
    letter-spacing: .035em;
  }

  body[data-route="booking"] .mobile-booking-selection strong {
    margin-top: 2px;
    color: #26364e;
    font-size: .72rem;
    line-height: 1.35;
    white-space: normal;
  }

  body[data-route="booking"] .mobile-booking-selection span {
    margin-top: 1px;
    color: #3456ce;
    font-size: .83rem;
    line-height: 1.25;
  }

  body[data-route="booking"] .mobile-change-slot {
    min-height: 38px;
    padding-inline: 11px;
    border-radius: 11px;
    background: #fff;
  }

  body[data-route="booking"] .booking-form > label:not(.checkbox-card) {
    padding: 12px 13px;
    display: grid;
    gap: 7px;
    border: 1px solid #e0e5ed;
    border-radius: 15px;
    background: #fff;
    color: #34445c;
    font-size: .65rem;
    font-weight: 760;
    box-shadow: 0 2px 10px rgba(25, 39, 68, .025);
  }

  body[data-route="booking"] .booking-form > label:not(.checkbox-card) .optional-label {
    color: #9aa3b1;
    font-size: .53rem;
    font-weight: 640;
  }

  body[data-route="booking"] .booking-form input,
  body[data-route="booking"] .booking-form select,
  body[data-route="booking"] .booking-form textarea {
    width: 100%;
    min-height: 46px;
    margin: 0;
    padding: 10px 11px;
    border-color: #dce2eb;
    border-radius: 11px;
    background: #f8fafc;
    font-size: 16px;
  }

  body[data-route="booking"] .booking-form textarea {
    min-height: 94px;
    resize: vertical;
  }

  body[data-route="booking"] .checkbox-card {
    min-height: 58px;
    padding: 11px 12px;
    border: 1px solid #dfe5ed;
    border-radius: 15px;
    background: #fff;
  }

  body[data-route="booking"] .checkbox-card strong {
    color: #304058;
    font-size: .67rem;
  }

  body[data-route="booking"] .checkbox-card small {
    color: #8792a4;
    font-size: .56rem;
  }

  body[data-route="booking"] .booking-total {
    margin-top: 1px;
    padding: 12px 13px;
    border: 1px solid #e0e5ed;
    border-radius: 15px;
    grid-template-columns: minmax(0, 1fr) auto;
    background: #fff;
  }

  body[data-route="booking"] .booking-total span {
    color: #788599;
    font-size: .6rem;
  }

  body[data-route="booking"] .booking-total strong {
    color: #1d2e49;
    font-size: 1rem;
  }

  .mobile-booking-mode {
    min-width: 0;
    margin: 0;
    padding: 12px;
    display: grid;
    gap: 9px;
    border: 1px solid #e0e5ed;
    border-radius: 15px;
    background: #fff;
  }

  .mobile-booking-mode legend {
    padding: 0;
    color: #34445c;
    font-size: .65rem;
    font-weight: 780;
  }

  .mobile-booking-mode-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .mobile-booking-mode-options label {
    min-width: 0;
    min-height: 60px;
    position: relative;
    cursor: pointer;
  }

  .mobile-booking-mode-options input {
    position: absolute;
    width: 1px !important;
    height: 1px !important;
    min-height: 0 !important;
    opacity: 0;
    pointer-events: none;
  }

  .mobile-booking-mode-options label > span {
    height: 100%;
    padding: 10px;
    display: grid;
    align-content: center;
    gap: 2px;
    border: 1px solid #dce2eb;
    border-radius: 12px;
    background: #fafbfd;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
  }

  .mobile-booking-mode-options strong {
    color: #34435a;
    font-size: .66rem;
  }

  .mobile-booking-mode-options small {
    color: #8994a6;
    font-size: .54rem;
  }

  .mobile-booking-mode-options input:checked + span {
    border-color: #6d86d8;
    background: #eef2ff;
    box-shadow: inset 0 0 0 1px rgba(64, 91, 190, .08);
  }

  .mobile-booking-mode-options input:checked + span strong {
    color: #3455c5;
  }

  body[data-route="booking"] .desktop-booking-mode-actions {
    display: none;
  }

  body[data-route="booking"] .form-privacy {
    margin: 1px 5px 0;
    color: #929cad;
    font-size: .5rem;
    line-height: 1.45;
    text-align: center;
  }

  .mobile-booking-submit-dock {
    position: sticky;
    z-index: 26;
    bottom: calc(var(--mobile-app-nav-safe-height) + 8px);
    margin: 2px -1px 0;
    padding: 8px;
    display: block;
    border: 1px solid rgba(218, 225, 236, .94);
    border-radius: 16px;
    background: rgba(248, 250, 253, .94);
    box-shadow: 0 10px 28px rgba(23, 37, 65, .12);
    backdrop-filter: blur(16px) saturate(135%);
  }

  .mobile-booking-confirm {
    min-height: 50px;
    border-radius: 12px;
    font-size: .72rem;
    font-weight: 820;
  }

  body.mobile-keyboard-mode .mobile-booking-submit-dock {
    position: static;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }

  body[data-route="booking"] .auth-required,
  body[data-route="booking"] .verification-required {
    padding: 15px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 3px 14px rgba(24, 40, 74, .04);
  }

  body[data-route="booking"] .summary-placeholder {
    display: none;
  }
}

@media (max-width: 390px) {
  body[data-route="booking"] .date-scroller {
    grid-auto-columns: 55px;
    gap: 6px;
  }

  body[data-route="booking"] .slots-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  body[data-route="booking"] .slot-button {
    min-height: 47px;
  }
}

@media (max-width: 350px) {
  body[data-route="booking"] .date-scroller {
    grid-auto-columns: 52px;
  }

  body[data-route="booking"] .slots-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mobile-booking-mode-options {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 760px) {
  body[data-route="booking"] .slot-heading > div > span { display: none; }
}

/* v1.18.1 — proportional mobile lesson-details form */
.booking-details-fields { display: contents; }
.trial-booking-switch { display: none; }

@media (max-width: 760px) {
  body[data-route="booking"] .booking-form {
    gap: 12px;
  }

  /* One cohesive form surface instead of three unrelated desktop cards. */
  body[data-route="booking"] .booking-details-fields {
    display: grid;
    gap: 0;
    overflow: hidden;
    border: 1px solid #dfe5ee;
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 3px 14px rgba(25, 39, 68, .035);
  }

  body[data-route="booking"] .booking-details-fields > .booking-detail-field {
    min-width: 0;
    padding: 13px 14px 14px;
    display: grid;
    gap: 8px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: #34445c;
    font-size: .72rem;
    font-weight: 760;
  }

  body[data-route="booking"] .booking-details-fields > .booking-detail-field + .booking-detail-field {
    border-top: 1px solid #edf0f4;
  }

  body[data-route="booking"] .booking-field-title {
    min-width: 0;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 5px;
    color: #34445c;
    font-size: .72rem;
    font-weight: 780;
    line-height: 1.35;
  }

  body[data-route="booking"] .booking-field-title .optional-label {
    color: #98a2b2;
    font-size: .58rem;
    font-weight: 620;
  }

  body[data-route="booking"] .booking-details-fields input,
  body[data-route="booking"] .booking-details-fields select,
  body[data-route="booking"] .booking-details-fields textarea {
    min-height: 48px;
    padding: 11px 12px;
    border: 1px solid #dce3ec;
    border-radius: 12px;
    background: #f8fafc;
    color: #21314a;
    font-size: 16px;
    font-weight: 520;
    line-height: 1.35;
    box-shadow: none;
  }

  body[data-route="booking"] .booking-details-fields select {
    font-weight: 640;
  }

  body[data-route="booking"] .booking-details-fields textarea {
    min-height: 108px;
    padding-top: 12px;
    line-height: 1.45;
    resize: vertical;
  }

  body[data-route="booking"] .booking-details-fields input::placeholder,
  body[data-route="booking"] .booking-details-fields textarea::placeholder {
    color: #9aa6b8;
    font-weight: 460;
  }

  body[data-route="booking"] .booking-details-fields input:focus,
  body[data-route="booking"] .booking-details-fields select:focus,
  body[data-route="booking"] .booking-details-fields textarea:focus {
    border-color: #7990db;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(60, 94, 208, .09);
  }

  /* Trial lesson is a compact settings row with a real mobile switch. */
  body[data-route="booking"] .trial-booking-card {
    min-height: 68px;
    padding: 12px 14px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    border: 1px solid #dfe5ee;
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 3px 14px rgba(25, 39, 68, .035);
  }

  body[data-route="booking"] .trial-booking-card > input[type="checkbox"] {
    position: absolute;
    width: 1px !important;
    height: 1px !important;
    min-height: 0 !important;
    margin: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
  }

  body[data-route="booking"] .trial-booking-copy {
    min-width: 0;
    display: grid;
    gap: 3px;
  }

  body[data-route="booking"] .trial-booking-copy strong {
    color: #2d3d56;
    font-size: .72rem;
    font-weight: 780;
    line-height: 1.35;
  }

  body[data-route="booking"] .trial-booking-copy small {
    color: #8591a4;
    font-size: .59rem;
    font-weight: 560;
    line-height: 1.4;
  }

  body[data-route="booking"] .trial-booking-switch {
    width: 42px;
    height: 24px;
    position: relative;
    display: block;
    flex: 0 0 auto;
    border-radius: 999px;
    background: #dce2eb;
    box-shadow: inset 0 0 0 1px rgba(41, 56, 82, .05);
    transition: background .18s ease;
  }

  body[data-route="booking"] .trial-booking-switch::after {
    content: "";
    width: 18px;
    height: 18px;
    position: absolute;
    top: 3px;
    left: 3px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgba(27, 41, 68, .2);
    transition: transform .18s ease;
  }

  body[data-route="booking"] .trial-booking-card > input:checked ~ .trial-booking-switch {
    background: #3b5fd0;
  }

  body[data-route="booking"] .trial-booking-card > input:checked ~ .trial-booking-switch::after {
    transform: translateX(18px);
  }

  body[data-route="booking"] .trial-booking-card:focus-within {
    border-color: #8ba0e2;
    box-shadow: 0 0 0 3px rgba(60, 94, 208, .09);
  }

  body[data-route="booking"] .booking-total {
    min-height: 58px;
    margin: 0;
    padding: 11px 14px;
    border: 1px solid #dfe5ee;
    border-radius: 17px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    background: #fff;
    box-shadow: 0 3px 14px rgba(25, 39, 68, .035);
  }

  body[data-route="booking"] .booking-total span {
    color: #748196;
    font-size: .66rem;
    font-weight: 600;
  }

  body[data-route="booking"] .booking-total strong {
    color: #1e304c;
    font-size: 1.02rem;
    font-weight: 830;
    white-space: nowrap;
  }

  body[data-route="booking"] .mobile-booking-mode {
    min-width: 0;
    margin: 0;
    padding: 12px 13px 13px;
    display: grid;
    gap: 9px;
    border: 1px solid #dfe5ee;
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 3px 14px rgba(25, 39, 68, .035);
  }

  body[data-route="booking"] .mobile-booking-mode-title {
    color: #34445c;
    font-size: .7rem;
    font-weight: 780;
    line-height: 1.35;
  }

  body[data-route="booking"] .mobile-booking-mode-options {
    gap: 8px;
  }

  body[data-route="booking"] .mobile-booking-mode-options label {
    min-height: 64px;
  }

  body[data-route="booking"] .mobile-booking-mode-options label > span {
    padding: 10px 11px;
    border-radius: 13px;
    align-content: center;
  }

  body[data-route="booking"] .mobile-booking-mode-options strong {
    font-size: .71rem;
    line-height: 1.3;
  }

  body[data-route="booking"] .mobile-booking-mode-options small {
    margin-top: 1px;
    font-size: .57rem;
    line-height: 1.35;
  }

  body[data-route="booking"] .form-privacy {
    margin: 1px 10px 0;
    color: #8b96a8;
    font-size: .55rem;
    line-height: 1.5;
  }

  body[data-route="booking"] .mobile-booking-submit-dock {
    margin-top: 0;
    padding: 7px;
    border-radius: 17px;
  }
}

@media (max-width: 360px) {
  body[data-route="booking"] .booking-details-fields > .booking-detail-field,
  body[data-route="booking"] .trial-booking-card,
  body[data-route="booking"] .booking-total,
  body[data-route="booking"] .mobile-booking-mode {
    border-radius: 15px;
  }

  body[data-route="booking"] .mobile-booking-mode-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* v1.19.0 — dedicated mobile "Мої заняття" agenda screen */
.mobile-lessons-panel,
.mobile-lesson-editor-layer { display: none; }

@media (max-width: 760px) {
  body[data-route="dashboard"] .desktop-lessons-panel { display: none; }
  body[data-route="dashboard"] .mobile-lessons-panel { display: block; }

  body[data-route="dashboard"] .dashboard-content {
    padding-top: 7px;
    padding-bottom: 22px;
  }

  body[data-route="dashboard"] .mobile-dashboard-screen-heading {
    padding: 5px 1px 9px;
  }

  .mobile-lessons-controls {
    min-width: 0;
    margin-bottom: 15px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    gap: 8px;
  }

  .mobile-lessons-segmented {
    min-width: 0;
    padding: 4px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3px;
    border: 1px solid #e0e6ef;
    border-radius: 14px;
    background: #eef2f7;
  }

  .mobile-lessons-segmented button {
    min-width: 0;
    min-height: 42px;
    padding: 7px 9px;
    border: 0;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: transparent;
    color: #718097;
    font: inherit;
    font-size: .68rem;
    font-weight: 760;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  .mobile-lessons-segmented button.is-active {
    background: #fff;
    color: #2748ae;
    box-shadow: 0 2px 9px rgba(23, 39, 70, .07);
  }

  .mobile-lessons-segmented button i {
    min-width: 19px;
    height: 19px;
    padding-inline: 5px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: rgba(112, 128, 154, .1);
    color: inherit;
    font-size: .53rem;
    font-style: normal;
    font-weight: 830;
  }

  .mobile-lessons-segmented button.is-active i { background: #edf2ff; }

  .mobile-lessons-new {
    min-width: 94px;
    min-height: 50px;
    padding: 0 11px;
    border: 1px solid #cbd6f4;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #f5f7ff;
    color: #3152bd;
    font-size: .65rem;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 2px 9px rgba(38, 69, 170, .045);
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-lessons-new svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
  }

  .mobile-lessons-agenda {
    display: grid;
    gap: 20px;
  }

  .mobile-lesson-day-group {
    min-width: 0;
    display: grid;
    gap: 8px;
  }

  .mobile-lesson-day-heading {
    min-width: 0;
    padding: 0 2px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
  }

  .mobile-lesson-day-heading strong {
    color: #26364f;
    font-size: .72rem;
    line-height: 1.3;
    font-weight: 820;
    text-transform: capitalize;
  }

  .mobile-lesson-day-heading span {
    color: #8a96a8;
    font-size: .59rem;
    line-height: 1.3;
    font-weight: 620;
    white-space: nowrap;
  }

  .mobile-lesson-day-list {
    display: grid;
    gap: 8px;
  }

  .mobile-lesson-card {
    position: relative;
    min-width: 0;
    overflow: hidden;
    padding: 14px;
    border: 1px solid #dfe5ee;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 4px 18px rgba(22, 36, 63, .045);
  }

  .mobile-lesson-card.is-next {
    border-color: #c5d2f4;
    background: linear-gradient(180deg, #fff 0%, #fbfcff 100%);
    box-shadow: 0 8px 28px rgba(45, 77, 180, .085);
  }

  .mobile-lesson-card.is-next::before {
    content: "";
    position: absolute;
    top: 0;
    left: 18px;
    right: 18px;
    height: 3px;
    border-radius: 0 0 999px 999px;
    background: #4264d8;
  }

  .mobile-lesson-card.is-history {
    padding-block: 13px;
    box-shadow: 0 2px 12px rgba(22, 36, 63, .035);
  }

  .mobile-lesson-card-top {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 11px;
  }

  .mobile-lesson-time-block {
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 5px;
  }

  .mobile-lesson-time-block strong {
    color: #172741;
    font-size: 1.25rem;
    line-height: 1;
    font-weight: 850;
    letter-spacing: -.035em;
  }

  .mobile-lesson-time-block span {
    color: #8a95a6;
    font-size: .58rem;
    line-height: 1.2;
    font-weight: 610;
  }

  .mobile-lesson-badges {
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 5px;
  }

  .mobile-lesson-badges .status-pill,
  .mobile-lesson-badges .recurring-pill,
  .mobile-lesson-next-pill {
    min-height: 24px;
    padding: 5px 7px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    font-size: .53rem;
    line-height: 1;
    font-weight: 800;
    white-space: nowrap;
  }

  .mobile-lesson-next-pill {
    background: #eaf0ff;
    color: #3153bf;
  }

  .mobile-lesson-card-body {
    min-width: 0;
    margin-top: 11px;
    padding-top: 11px;
    border-top: 1px solid #edf0f4;
  }

  .mobile-lesson-card-body h3 {
    margin: 0;
    color: #22334d;
    font-size: .93rem;
    line-height: 1.28;
    font-weight: 820;
    letter-spacing: -.015em;
  }

  .mobile-lesson-topic {
    margin: 4px 0 0;
    color: #69768a;
    font-size: .68rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
  }

  .mobile-lesson-facts {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  .mobile-lesson-facts > span {
    min-height: 28px;
    padding: 5px 8px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #f3f5f8;
    color: #69768a;
    font-size: .58rem;
    font-weight: 650;
  }

  .mobile-lesson-facts svg {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
  }

  .mobile-lesson-note {
    margin-top: 9px;
    padding: 9px 10px;
    border-radius: 11px;
    background: #f7f8fb;
  }

  .mobile-lesson-note small {
    display: block;
    margin-bottom: 2px;
    color: #919bad;
    font-size: .52rem;
    line-height: 1.3;
    font-weight: 760;
    text-transform: uppercase;
    letter-spacing: .035em;
  }

  .mobile-lesson-note p {
    margin: 0;
    color: #5f6d82;
    font-size: .63rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
  }

  .mobile-lesson-join {
    width: 100%;
    min-height: 46px;
    margin-top: 11px;
    border-radius: 13px;
    font-size: .71rem;
  }

  .mobile-lesson-manage {
    margin-top: 8px;
    border-top: 1px solid #edf0f4;
  }

  .mobile-lesson-manage > summary {
    min-height: 43px;
    padding: 8px 2px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: #617087;
    font-size: .64rem;
    font-weight: 730;
    list-style: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-lesson-manage > summary::-webkit-details-marker { display: none; }

  .mobile-lesson-manage > summary > span {
    width: auto;
    height: auto;
    min-width: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 0;
    background: transparent;
    color: inherit;
    line-height: 1.25;
    text-align: left;
    transform: none;
    transition: color .16s ease;
  }

  .mobile-lesson-manage[open] > summary > span {
    transform: none;
  }

  .mobile-lesson-manage > summary svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
  }

  .mobile-lesson-manage > summary > svg:last-child { transition: transform .16s ease; }
  .mobile-lesson-manage[open] > summary > svg:last-child { transform: rotate(180deg); }

  .mobile-lesson-manage-actions {
    padding: 7px 0 1px;
    display: grid;
    gap: 6px;
  }

  .mobile-lesson-action {
    width: 100%;
    min-height: 44px;
    padding: 9px 10px;
    border: 1px solid #e1e6ee;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fafbfc;
    color: #526178;
    font: inherit;
    font-size: .64rem;
    line-height: 1.3;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
  }

  .mobile-lesson-action svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
  }

  .mobile-lesson-action.is-danger {
    border-color: #f0d9dd;
    background: #fff8f8;
    color: #a54652;
  }

  .mobile-lesson-card.is-editing {
    border-color: #b9c9ee;
    box-shadow: 0 7px 22px rgba(28, 54, 105, .08);
  }

  body.mobile-lesson-editor-open {
    overflow: hidden;
    touch-action: none;
  }

  .mobile-lesson-editor-layer {
    position: fixed;
    z-index: 130;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }

  .mobile-lesson-editor-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: rgba(13, 24, 45, .48);
    backdrop-filter: blur(3px);
    cursor: default;
    animation: mobileLessonEditorBackdropIn .16s ease-out;
  }

  .mobile-lesson-editor-sheet {
    position: relative;
    z-index: 1;
    width: min(100%, 560px);
    max-height: min(88dvh, 720px);
    overflow: hidden;
    border: 1px solid rgba(216, 224, 236, .95);
    border-bottom: 0;
    border-radius: 25px 25px 0 0;
    background: #fff;
    box-shadow: 0 -24px 70px rgba(12, 25, 50, .24);
    animation: mobileLessonEditorSheetIn .22s cubic-bezier(.22,.82,.26,1);
  }

  .mobile-booking-edit-form {
    width: 100%;
    max-height: min(88dvh, 720px);
    margin: 0;
    padding: 0 16px;
    border: 0;
    border-radius: 0;
    display: grid;
    gap: 0;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    background: #fff;
    -webkit-overflow-scrolling: touch;
  }

  .mobile-lesson-editor-handle {
    width: 38px;
    height: 4px;
    margin: 8px auto 5px;
    border-radius: 999px;
    background: #d6dde8;
  }

  .mobile-booking-edit-head {
    min-width: 0;
    min-height: 58px;
    padding: 7px 0 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .mobile-booking-edit-head > div {
    min-width: 0;
    display: grid;
    gap: 2px;
  }

  .mobile-booking-edit-eyebrow {
    color: #7c899d;
    font-size: .56rem;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: .075em;
    text-transform: uppercase;
  }

  .mobile-booking-edit-head h4 {
    max-width: 72vw;
    margin: 0;
    overflow: hidden;
    color: #172944;
    font-size: 1.08rem;
    line-height: 1.22;
    font-weight: 820;
    letter-spacing: -.025em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-booking-edit-close {
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid #e0e6ef;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    background: #f6f8fb;
    color: #64738a;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-booking-edit-close svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
  }

  .mobile-booking-edit-context {
    min-height: 52px;
    margin: 2px 0 15px;
    padding: 9px 11px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f2f5fb;
  }

  .mobile-booking-edit-context-icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    background: #fff;
    color: #4263d2;
    box-shadow: 0 1px 3px rgba(20, 37, 68, .06);
  }

  .mobile-booking-edit-context-icon svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.85;
  }

  .mobile-booking-edit-context > div {
    min-width: 0;
    display: grid;
    gap: 1px;
  }

  .mobile-booking-edit-context small {
    color: #738098;
    font-size: .61rem;
    line-height: 1.25;
    font-weight: 650;
  }

  .mobile-booking-edit-context strong {
    color: #213552;
    font-size: .78rem;
    line-height: 1.25;
    font-weight: 800;
  }

  .mobile-booking-edit-fields {
    display: grid;
    gap: 14px;
  }

  .mobile-booking-edit-field {
    min-width: 0;
    padding: 0;
    display: grid;
    gap: 6px;
    color: #485970;
    font-size: .66rem;
    line-height: 1.2;
    font-weight: 760;
  }

  .mobile-booking-edit-field + .mobile-booking-edit-field {
    border-top: 0;
  }

  .mobile-booking-edit-field > span {
    min-width: 0;
    padding-inline: 2px;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px;
  }

  .mobile-booking-edit-field .optional-label {
    color: #96a1b3;
    font-size: .56rem;
    font-weight: 600;
  }

  .mobile-booking-edit-form input,
  .mobile-booking-edit-form select,
  .mobile-booking-edit-form textarea {
    width: 100%;
    min-height: 46px;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid #dfe5ee;
    border-radius: 13px;
    background: #f8fafc;
    color: #22334d;
    font-family: inherit;
    font-size: 16px;
    line-height: 1.35;
    font-weight: 500;
    box-shadow: none;
    outline: none;
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
  }

  .mobile-booking-edit-form input::placeholder,
  .mobile-booking-edit-form textarea::placeholder {
    color: #a3aec0;
    opacity: 1;
    font-weight: 500;
  }

  .mobile-booking-edit-form input:focus,
  .mobile-booking-edit-form select:focus,
  .mobile-booking-edit-form textarea:focus {
    border-color: #8ea9ee;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(55, 94, 211, .09);
  }

  .mobile-booking-edit-form textarea {
    min-height: 78px;
    max-height: 132px;
    line-height: 1.4;
    resize: vertical;
  }

  .mobile-booking-edit-actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin: 17px -16px 0;
    padding: 10px 16px max(11px, env(safe-area-inset-bottom));
    border-top: 1px solid #e7ebf2;
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(18px) saturate(145%);
  }

  .mobile-booking-edit-actions .btn {
    width: 100%;
    min-height: 50px;
    border-radius: 14px;
    font-size: .76rem;
    font-weight: 800;
    box-shadow: 0 7px 18px rgba(52, 88, 214, .18);
  }

  @keyframes mobileLessonEditorBackdropIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes mobileLessonEditorSheetIn {
    from { transform: translateY(22px); opacity: .82; }
    to { transform: translateY(0); opacity: 1; }
  }

  .mobile-lessons-empty {
    min-height: min(56dvh, 430px);
    padding: 32px 19px;
    border: 1px solid #e0e6ef;
    border-radius: 19px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #fff;
    text-align: center;
    box-shadow: 0 4px 18px rgba(22, 36, 63, .04);
  }

  .mobile-lessons-empty-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 13px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    background: #eef2ff;
    color: #3d5fd0;
  }

  .mobile-lessons-empty-icon svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
  }

  .mobile-lessons-empty h2 {
    margin: 0;
    color: #26364f;
    font-size: 1rem;
    line-height: 1.25;
  }

  .mobile-lessons-empty p {
    max-width: 18rem;
    margin: 7px 0 14px;
    color: #7c889a;
    font-size: .67rem;
    line-height: 1.5;
  }

  .mobile-lessons-empty .btn {
    min-height: 46px;
    border-radius: 12px;
  }
}

@media (max-width: 380px) {
  .mobile-lessons-controls { gap: 6px; }
  .mobile-lessons-new { min-width: 50px; width: 50px; padding: 0; }
  .mobile-lessons-new span { display: none; }
  .mobile-lessons-segmented button { padding-inline: 6px; font-size: .63rem; }
  .mobile-lesson-card { padding: 12px; border-radius: 16px; }
  .mobile-lesson-card-top { gap: 7px; }
  .mobile-lesson-badges { gap: 4px; }
  .mobile-lesson-badges .status-pill,
  .mobile-lesson-badges .recurring-pill,
  .mobile-lesson-next-pill { padding-inline: 6px; font-size: .5rem; }
  .mobile-lesson-editor-sheet { border-radius: 22px 22px 0 0; }
}

/* v1.20.0 — dedicated Telegram-inspired mobile messenger */
.chat-peer-mobile,
.chat-message-action > span,
.chat-mobile-action-layer { display: none; }
.chat-action-backdrop { display: none; }

@media (max-width: 760px) {
  /* Chat becomes its own app screen instead of a card inside dashboard/admin. */
  body[data-route="dashboard"][data-dashboard-tab="chat"],
  body[data-route="admin"][data-admin-tab="chat"] {
    overflow: hidden;
    background: #e9eef5;
  }
  body[data-route="dashboard"][data-dashboard-tab="chat"] #app,
  body[data-route="admin"][data-admin-tab="chat"] #app {
    height: 100dvh;
    min-height: 100dvh;
    padding-bottom: 0;
    overflow: hidden;
  }
  body[data-route="dashboard"][data-dashboard-tab="chat"] .site-header,
  body[data-route="admin"][data-admin-tab="chat"] .site-header,
  body[data-route="dashboard"][data-dashboard-tab="chat"] .dashboard-hero,
  body[data-route="admin"][data-admin-tab="chat"] .admin-topbar,
  body[data-route="dashboard"][data-dashboard-tab="chat"] .mobile-dashboard-screen-heading,
  body[data-route="dashboard"][data-dashboard-tab="chat"] .dashboard-sidebar,
  body[data-route="admin"][data-admin-tab="chat"] .admin-sidebar,
  body[data-route="dashboard"][data-dashboard-tab="chat"] .site-footer,
  body[data-route="admin"][data-admin-tab="chat"] .site-footer { display: none !important; }

  body[data-route="dashboard"][data-dashboard-tab="chat"] .page-main,
  body[data-route="admin"][data-admin-tab="chat"] .page-main {
    height: calc(100dvh - var(--mobile-app-nav-safe-height));
    min-height: 0;
    overflow: hidden;
  }
  body[data-route="dashboard"][data-dashboard-tab="chat"] .dashboard-content,
  body[data-route="admin"][data-admin-tab="chat"] .admin-shell {
    height: 100%;
    padding: 0;
  }
  body[data-route="dashboard"][data-dashboard-tab="chat"] .dashboard-content > .container,
  body[data-route="admin"][data-admin-tab="chat"] .admin-shell > .container {
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
  }
  body[data-route="dashboard"][data-dashboard-tab="chat"] .dashboard-grid,
  body[data-route="admin"][data-admin-tab="chat"] .admin-layout,
  body[data-route="dashboard"][data-dashboard-tab="chat"] .dashboard-main,
  body[data-route="admin"][data-admin-tab="chat"] .admin-main,
  body[data-route="dashboard"][data-dashboard-tab="chat"] .chat-layout,
  body[data-route="admin"][data-admin-tab="chat"] .chat-layout {
    width: 100%;
    height: 100%;
    min-height: 0;
    max-width: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }

  .chat-window {
    width: 100%;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    border: 0;
    border-radius: 0;
    background: #e8edf3;
    box-shadow: none;
  }

  /* Telegram-like conversation app bar. */
  .chat-header {
    position: relative;
    z-index: 12;
    min-height: calc(58px + env(safe-area-inset-top));
    padding: max(8px, env(safe-area-inset-top)) 10px 8px;
    gap: 8px;
    border-bottom: 1px solid rgba(202,211,223,.88);
    background: rgba(255,255,255,.97);
    box-shadow: 0 1px 5px rgba(26,38,60,.055);
    backdrop-filter: blur(20px) saturate(145%);
  }
  .chat-header .student-cell {
    flex: 1 1 auto;
    min-width: 0;
    gap: 9px;
  }
  .chat-header .avatar.small {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border: 1px solid #dce3ed;
    box-shadow: none;
  }
  .chat-header .student-cell > span:last-child {
    min-width: 0;
    display: grid;
    gap: 1px;
  }
  .chat-header .student-cell strong {
    max-width: 52vw;
    overflow: hidden;
    color: #17233a;
    font-size: .86rem;
    font-weight: 800;
    line-height: 1.18;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .chat-peer-desktop { display: none; }
  .chat-peer-mobile {
    display: block;
    max-width: 52vw;
    overflow: hidden;
    color: #7a8799;
    font-size: .63rem;
    font-weight: 590;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .chat-mobile-back {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    margin-left: -3px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #3156c6;
    font-size: 1.7rem;
    box-shadow: none;
  }
  .chat-mobile-back:active { background: #eef2f8; }
  .chat-header-actions { flex: 0 0 auto; }
  .chat-header-actions .meet-awaiting { display: none; }
  .chat-header-meet {
    min-height: 36px !important;
    padding: 0 9px 0 11px !important;
    gap: 3px;
    border: 0 !important;
    border-radius: 18px !important;
    background: #edf2ff !important;
    color: #3156c6 !important;
    font-size: .63rem !important;
    font-weight: 780;
    box-shadow: none !important;
  }
  .chat-header-meet svg { width: 14px; height: 14px; }

  /* Messages occupy the entire available middle surface. */
  .chat-messages-shell {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    background: #e8edf3;
  }
  .chat-messages {
    height: 100%;
    min-height: 0;
    padding: 10px 9px 14px;
    gap: 0;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: #e8edf3;
    background-image:
      radial-gradient(circle at 14px 14px, rgba(78,101,137,.045) 1px, transparent 1.2px),
      radial-gradient(circle at 38px 32px, rgba(78,101,137,.032) 1px, transparent 1.2px);
    background-size: 48px 48px;
    scroll-padding-block: 50px 18px;
    scrollbar-width: none;
  }
  .chat-messages::-webkit-scrollbar { display: none; }
  .chat-day-separator {
    position: sticky;
    top: 5px;
    z-index: 3;
    margin: 7px 0 8px;
  }
  .chat-day-separator span {
    padding: 4px 9px;
    border: 0;
    border-radius: 999px;
    background: rgba(87,105,128,.72);
    color: #fff;
    font-size: .58rem;
    font-weight: 760;
    box-shadow: 0 2px 9px rgba(36,52,76,.1);
    backdrop-filter: blur(8px);
  }

  .chat-message-row {
    position: relative;
    width: 100%;
    margin: 1px 0;
    gap: 4px;
    align-items: flex-end;
  }
  .chat-message-row.is-grouped { margin-top: 0; }
  .chat-message {
    position: relative;
    min-width: 64px;
    max-width: min(82%, 520px);
    padding: 7px 9px 6px;
    border: 0;
    border-radius: 16px 16px 16px 5px;
    background: #fff;
    box-shadow: 0 1px 1.5px rgba(24,38,61,.11);
    color: #17233a;
    -webkit-touch-callout: none;
    user-select: none;
  }
  .chat-message.is-own {
    border: 0;
    border-radius: 16px 16px 5px 16px;
    background: #e2edff;
    box-shadow: 0 1px 1.5px rgba(38,72,137,.11);
  }
  .chat-message-row.is-grouped:not(.is-own) .chat-message { border-top-left-radius: 11px; }
  .chat-message-row.is-grouped.is-own .chat-message { border-top-right-radius: 11px; }
  .chat-message-author { display: none; }
  .chat-message-text {
    min-width: 0;
    padding-right: 39px;
    color: inherit;
    font-size: 15px;
    font-weight: 440;
    line-height: 1.34;
    letter-spacing: -.005em;
  }
  .chat-message-text a { color: #2458bf; text-decoration-thickness: 1px; }
  .chat-message-meta {
    right: 7px;
    bottom: 5px;
    gap: 2px;
    color: #758397;
    font-size: .54rem;
  }
  .chat-message.is-own .chat-message-meta { color: #617eac; }
  .chat-edited { font-size: .52rem; }
  .chat-sent { color: #3f67bd; font-size: .58rem; font-weight: 850; }
  .chat-sent.is-pending { color: #8290a4; }

  /* Reply blocks are compact strips inside the bubble/composer. */
  .chat-reply-reference {
    margin: 0 0 5px;
    padding: 5px 7px;
    gap: 1px;
    border-left-width: 2px;
    border-radius: 6px;
    background: rgba(55,86,151,.07);
  }
  .chat-message-row.is-own .chat-reply-reference {
    border-left-color: #4c73c8;
    background: rgba(255,255,255,.45);
  }
  .chat-message-row.is-own .chat-reply-reference strong { color: #3159ae; }
  .chat-reply-reference strong { font-size: .58rem; }
  .chat-reply-reference span { font-size: .63rem; }

  /* Message actions: tiny accessibility affordance + Telegram-like long-press sheet. */
  .chat-mobile-actions-toggle {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    margin-bottom: 1px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #8794a5;
    box-shadow: none;
    opacity: .48;
  }
  .chat-mobile-actions-toggle svg { width: 17px; height: 17px; }
  .chat-message-row.is-own .chat-mobile-actions-toggle { order: -1; }
  .chat-mobile-action-layer { display: block; }
  .chat-action-backdrop {
    position: fixed;
    z-index: 138;
    inset: 0 0 var(--mobile-app-nav-safe-height);
    display: block;
    border: 0;
    background: rgba(12,22,39,.28);
    backdrop-filter: blur(1.5px);
  }
  .chat-message-actions,
  .chat-message-row.is-own .chat-message-actions,
  .chat-message-row:not(.is-own) .chat-message-actions {
    display: none !important;
    position: fixed;
    z-index: 140;
    left: 10px;
    right: 10px;
    bottom: calc(var(--mobile-app-nav-safe-height) + 10px);
    width: auto;
    padding: 7px;
    gap: 4px;
    border: 1px solid rgba(211,219,230,.94);
    border-radius: 17px;
    background: rgba(255,255,255,.98);
    box-shadow: 0 18px 52px rgba(16,29,52,.24);
    backdrop-filter: blur(20px);
  }
  .chat-message-actions-inline { display: none !important; }
  .chat-mobile-action-sheet.is-open {
    display: grid !important;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0,1fr);
  }
  .chat-message-action {
    width: 100%;
    height: 56px;
    min-width: 0;
    padding: 6px 5px;
    border: 0;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: transparent;
    color: #3e4d63;
    opacity: 1;
    box-shadow: none;
  }
  .chat-message-action:active { background: #eef2f7; }
  .chat-message-action svg { width: 19px; height: 19px; }
  .chat-message-action > span {
    display: block;
    max-width: 100%;
    overflow: hidden;
    font-size: .57rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Telegram-like composer pinned to the bottom of the conversation. */
  .chat-compose {
    position: relative;
    z-index: 11;
    flex: 0 0 auto;
    width: 100%;
    padding: 6px 7px 7px;
    border-top: 1px solid rgba(203,212,224,.84);
    background: rgba(247,249,252,.98);
    box-shadow: 0 -1px 5px rgba(27,40,61,.035);
    backdrop-filter: blur(20px) saturate(145%);
  }
  .chat-compose-row { gap: 6px; align-items: flex-end; }
  .chat-compose-input {
    min-height: 44px;
    padding: 3px 11px 3px;
    border: 1px solid #d8e0ea;
    border-radius: 22px;
    background: #fff;
    box-shadow: none;
  }
  .chat-compose-input:focus-within {
    border-color: #cbd7e7;
    box-shadow: none;
  }
  .chat-compose textarea {
    min-height: 38px;
    max-height: 116px;
    padding: 9px 0 5px;
    color: #17233a;
    font-size: 16px;
    font-weight: 430;
    line-height: 1.35;
  }
  .chat-compose textarea::placeholder { color: #97a3b4; }
  .chat-send-button {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 50%;
    background: #3d65d8;
    box-shadow: 0 3px 11px rgba(48,85,197,.25);
  }
  .chat-send-button:active { transform: scale(.95); }
  .chat-replying-preview-shell { margin: 0 0 5px; }
  .chat-replying-preview {
    grid-template-columns: 3px minmax(0,1fr) 30px;
    gap: 8px;
    padding: 6px 7px;
    border: 0;
    border-radius: 10px;
    background: #eef3fa;
  }
  .chat-replying-preview small { font-size: .58rem; }
  .chat-replying-preview strong { font-size: .65rem; }
  .chat-reply-cancel { width: 30px; height: 30px; }

  .chat-scroll-bottom {
    right: 11px;
    bottom: 10px;
    width: 40px;
    height: 40px;
    border: 0;
    background: rgba(255,255,255,.97);
    color: #4064c7;
    box-shadow: 0 4px 16px rgba(34,50,76,.18);
  }

  /* Message editing also behaves like a compact messenger bubble. */
  .chat-message.is-editing {
    width: min(88%, 520px);
    max-width: min(88%, 520px);
    padding: 8px;
  }
  .chat-edit-form textarea {
    min-height: 72px;
    max-height: 150px;
    border-radius: 12px;
    font-size: 16px;
  }
  .chat-edit-actions { gap: 5px; }
  .chat-edit-actions .btn { min-height: 38px; border-radius: 10px; font-size: .64rem; }

  .chat-empty {
    width: min(78%, 280px);
    margin: auto;
    padding: 18px 16px;
    border: 0;
    border-radius: 16px;
    background: rgba(255,255,255,.68);
    box-shadow: 0 4px 18px rgba(31,46,70,.06);
    text-align: center;
    backdrop-filter: blur(5px);
  }
  .chat-empty-icon {
    width: 40px;
    height: 40px;
    margin: 0 auto 7px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #e9efff;
    color: #4266c9;
  }
  .chat-empty-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; }
  .chat-empty h3 { margin: 0; font-size: .86rem; }
  .chat-empty p { margin: 5px 0 0; color: #778497; font-size: .66rem; line-height: 1.4; }

  /* Admin mobile inbox is a real messenger dialog list. */
  .chat-layout-admin.is-mobile-list-mode .chat-students {
    width: 100%;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: max(8px, env(safe-area-inset-top)) 0 0;
    border: 0;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
  }
  .chat-students-title {
    min-height: 52px;
    padding: 7px 15px 8px;
    border-bottom: 0;
  }
  .chat-students-title > div { width: 100%; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
  .chat-students-title strong { color: #17233a; font-size: 1.25rem; letter-spacing: -.025em; }
  .chat-students-title small { color: #8b96a7; font-size: .62rem; }
  .chat-search {
    padding: 3px 11px 8px;
    border-bottom: 1px solid #edf0f4;
  }
  .chat-search svg { left: 24px; width: 16px; height: 16px; }
  .chat-search input {
    min-height: 38px;
    padding: 7px 11px 7px 35px;
    border: 0;
    border-radius: 12px;
    background: #f0f3f7;
    font-size: 16px;
    box-shadow: none;
  }
  .chat-search input:focus { border: 0; background: #edf1f6; box-shadow: none; }
  .chat-layout-admin.is-mobile-list-mode .chat-student-list {
    flex: 1 1 auto;
    min-height: 0;
    padding: 2px 0 12px;
    overflow-y: auto;
    scrollbar-width: none;
  }
  .chat-layout-admin.is-mobile-list-mode .chat-student-list::-webkit-scrollbar { display: none; }
  .chat-student {
    min-height: 64px;
    padding: 8px 12px;
    gap: 10px;
    border-radius: 0;
    border-bottom: 1px solid #eef1f5;
    background: #fff;
  }
  .chat-student:hover,
  .chat-student.is-active { background: #f6f8fb; }
  .chat-student .avatar.small { width: 44px; height: 44px; flex: 0 0 44px; }
  .chat-student-copy { flex: 1 1 auto; min-width: 0; }
  .chat-student-copy strong { color: #1c2940; font-size: .79rem; font-weight: 790; }
  .chat-student-copy small { margin-top: 2px; color: #8a95a6; font-size: .61rem; }
  .chat-student-arrow { color: #a4adbb; font-size: 1.1rem; }
  .chat-list-unread {
    width: 9px;
    height: 9px;
    background: #3f67d4;
    box-shadow: 0 0 0 3px rgba(63,103,212,.11);
  }

  body.mobile-keyboard-mode[data-route="dashboard"][data-dashboard-tab="chat"] .page-main,
  body.mobile-keyboard-mode[data-route="admin"][data-admin-tab="chat"] .page-main {
    height: 100dvh;
  }
  body.mobile-keyboard-mode .chat-compose { padding-bottom: 6px; }
}

@media (max-width: 390px) {
  .chat-header .student-cell strong,
  .chat-peer-mobile { max-width: 45vw; }
  .chat-header-meet span { display: none; }
  .chat-header-meet { width: 36px; padding: 0 !important; display: grid; place-items: center; }
  .chat-message { max-width: 85%; }
  .chat-message-text { font-size: 14.5px; }
  .chat-mobile-actions-toggle { width: 25px; height: 25px; flex-basis: 25px; }
  .chat-message-actions { left: 7px !important; right: 7px !important; }
}

/* v1.21.0 — dedicated mobile "Оплата" screen in the student dashboard */
.mobile-student-billing { display: none; }

@media (max-width: 760px) {
  body[data-route="dashboard"][data-dashboard-tab="billing"] .dashboard-content {
    padding-top: 7px;
    padding-bottom: 22px;
  }

  body[data-route="dashboard"][data-dashboard-tab="billing"] .mobile-dashboard-screen-heading {
    padding: 5px 1px 10px;
  }

  body[data-route="dashboard"][data-dashboard-tab="billing"] .desktop-student-billing { display: none; }
  body[data-route="dashboard"][data-dashboard-tab="billing"] .mobile-student-billing { display: block; }

  .mobile-billing-balance {
    position: relative;
    overflow: hidden;
    padding: 18px 16px 15px;
    border: 1px solid #dfe5ef;
    border-radius: 20px;
    background: linear-gradient(145deg, #172744 0%, #25487e 100%);
    color: #fff;
    box-shadow: 0 12px 30px rgba(28,48,86,.16);
  }

  .mobile-billing-balance::after {
    content: '';
    position: absolute;
    width: 155px;
    height: 155px;
    top: -88px;
    right: -48px;
    border-radius: 50%;
    background: rgba(255,255,255,.075);
    pointer-events: none;
  }

  .mobile-billing-balance.has-credit {
    background: linear-gradient(145deg, #164b3c 0%, #237359 100%);
  }

  .mobile-billing-balance.is-clear {
    background: linear-gradient(145deg, #1f3d68 0%, #315f9d 100%);
  }

  .mobile-billing-balance-top {
    position: relative;
    z-index: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  .mobile-billing-balance-top > span {
    color: #c2cee1;
    font-size: .64rem;
    line-height: 1;
    font-weight: 820;
    letter-spacing: .035em;
    text-transform: uppercase;
  }

  .mobile-billing-balance-top > i {
    min-width: 0;
    padding: 5px 8px;
    border-radius: 999px;
    background: rgba(255,255,255,.12);
    color: #e9eff8;
    font-size: .57rem;
    line-height: 1;
    font-style: normal;
    font-weight: 760;
  }

  .mobile-billing-balance > strong {
    position: relative;
    z-index: 1;
    display: block;
    margin-top: 7px;
    font-size: clamp(2.15rem, 11vw, 2.85rem);
    line-height: .98;
    letter-spacing: -.055em;
  }

  .mobile-billing-balance > p {
    position: relative;
    z-index: 1;
    margin: 8px 0 0;
    color: #c8d4e6;
    font-size: .67rem;
    line-height: 1.45;
  }

  .mobile-billing-pay-button {
    position: relative;
    z-index: 1;
    width: 100%;
    min-height: 50px;
    margin-top: 14px;
    padding: 10px 12px;
    border: 0;
    border-radius: 13px;
    display: grid;
    grid-template-columns: 20px minmax(0,1fr) 18px;
    align-items: center;
    gap: 8px;
    background: #fff;
    color: #244c9d;
    box-shadow: none;
    font-size: .73rem;
    font-weight: 850;
    text-align: center;
  }

  .mobile-billing-pay-button > span { min-width: 0; }
  .mobile-billing-pay-button svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
  }

  .mobile-billing-mini-stats {
    margin: 9px 0 13px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 8px;
  }

  .mobile-billing-mini-stats > article {
    min-width: 0;
    min-height: 73px;
    padding: 11px;
    border: 1px solid #e1e6ee;
    border-radius: 15px;
    display: grid;
    grid-template-columns: 31px minmax(0,1fr);
    align-items: center;
    gap: 9px;
    background: #fff;
    box-shadow: 0 3px 12px rgba(24,40,74,.035);
  }

  .mobile-billing-stat-icon {
    width: 31px;
    height: 31px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: #edf2ff;
    color: #4163bd;
  }

  .mobile-billing-stat-icon.is-paid {
    background: #eaf8ef;
    color: #1f8050;
  }

  .mobile-billing-stat-icon svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
  }

  .mobile-billing-mini-stats > article > div { min-width: 0; display: grid; gap: 2px; }
  .mobile-billing-mini-stats small { color: #8490a2; font-size: .56rem; }
  .mobile-billing-mini-stats strong {
    overflow: hidden;
    color: #20304a;
    font-size: .8rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-billing-segmented {
    margin-bottom: 9px;
    padding: 4px;
    border: 1px solid #dfe5ed;
    border-radius: 14px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 3px;
    background: #eef2f7;
  }

  .mobile-billing-segmented button {
    min-width: 0;
    min-height: 42px;
    padding: 7px 8px;
    border: 0;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: transparent;
    color: #68758a;
    font: inherit;
    font-size: .65rem;
    font-weight: 780;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-billing-segmented button.is-active {
    background: #fff;
    color: #3158bb;
    box-shadow: 0 2px 8px rgba(34,50,82,.08);
  }

  .mobile-billing-segmented button i {
    min-width: 19px;
    min-height: 19px;
    padding: 3px 5px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: #dde3eb;
    color: #6d788a;
    font-size: .52rem;
    line-height: 1;
    font-style: normal;
    font-weight: 850;
  }

  .mobile-billing-segmented button.is-active i {
    background: #e8eeff;
    color: #3158bb;
  }

  .mobile-billing-ledger {
    display: grid;
    gap: 7px;
  }

  .mobile-billing-ledger-card {
    min-width: 0;
    padding: 11px;
    border: 1px solid #e2e7ef;
    border-radius: 15px;
    display: grid;
    grid-template-columns: 34px minmax(0,1fr) auto;
    align-items: center;
    gap: 10px;
    background: #fff;
    box-shadow: 0 3px 12px rgba(24,40,74,.035);
  }

  .mobile-billing-ledger-icon {
    width: 34px;
    height: 34px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: #f0f3f8;
    color: #66758b;
  }

  .mobile-billing-ledger-card.is-due .mobile-billing-ledger-icon {
    background: #fff1ef;
    color: #aa4139;
  }

  .mobile-billing-ledger-card.is-paid .mobile-billing-ledger-icon,
  .mobile-billing-ledger-card.is-payment .mobile-billing-ledger-icon {
    background: #eaf8ef;
    color: #208151;
  }

  .mobile-billing-ledger-card.is-partial .mobile-billing-ledger-icon {
    background: #fff8df;
    color: #8a7215;
  }

  .mobile-billing-ledger-icon svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
  }

  .mobile-billing-ledger-copy {
    min-width: 0;
    display: grid;
    gap: 2px;
  }

  .mobile-billing-ledger-copy small {
    overflow: hidden;
    color: #8a95a5;
    font-size: .54rem;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-billing-ledger-copy strong {
    overflow: hidden;
    color: #26354d;
    font-size: .7rem;
    line-height: 1.28;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-billing-ledger-copy > span {
    overflow: hidden;
    color: #737f92;
    font-size: .57rem;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-billing-ledger-amount {
    min-width: 0;
    display: grid;
    justify-items: end;
    gap: 5px;
  }

  .mobile-billing-ledger-amount > strong {
    color: #1e2d45;
    font-size: .72rem;
    line-height: 1.15;
    white-space: nowrap;
  }

  .mobile-billing-ledger-card.is-payment .mobile-billing-ledger-amount > strong { color: #1e8050; }
  .mobile-billing-ledger-card .payment-pill { max-width: 95px; padding: 4px 6px; font-size: .5rem; }

  .mobile-billing-empty {
    min-height: 170px;
    padding: 24px 18px;
    border: 1px dashed #dce3ed;
    border-radius: 17px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 6px;
    background: #fbfcfe;
    text-align: center;
  }

  .mobile-billing-empty > span {
    width: 40px;
    height: 40px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: #edf2ff;
    color: #4565bd;
  }

  .mobile-billing-empty > span svg { width: 19px; height: 19px; fill: none; stroke: currentColor; }
  .mobile-billing-empty > strong { color: #26354d; font-size: .79rem; }
  .mobile-billing-empty > p { max-width: 240px; margin: 0; color: #7f8a9b; font-size: .62rem; line-height: 1.45; }
}

@media (max-width: 360px) {
  .mobile-billing-balance { padding: 16px 14px 14px; border-radius: 18px; }
  .mobile-billing-mini-stats > article { grid-template-columns: 28px minmax(0,1fr); padding: 9px; gap: 7px; }
  .mobile-billing-stat-icon { width: 28px; height: 28px; }
  .mobile-billing-ledger-card { grid-template-columns: 31px minmax(0,1fr) auto; padding: 10px 9px; gap: 8px; }
  .mobile-billing-ledger-icon { width: 31px; height: 31px; }
  .mobile-billing-ledger-card .payment-pill { max-width: 83px; }
}


/* v1.21.1 — keep the mobile app shell stable inside the long admin content editor. */
@media (max-width: 760px) {
  /* The bottom app bar owns its geometry. Page/form rules must never resize it. */
  .mobile-app-nav {
    width: 100vw;
    min-width: 0;
    max-width: 100vw;
    min-height: var(--mobile-app-nav-safe-height);
    max-height: var(--mobile-app-nav-safe-height);
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    contain: layout style;
    isolation: isolate;
  }

  .mobile-app-nav-inner {
    width: 100%;
    min-width: 0;
    max-width: 560px;
    min-height: var(--mobile-app-nav-height);
    max-height: var(--mobile-app-nav-height);
    box-sizing: border-box;
  }

  .mobile-app-nav-item,
  .mobile-app-nav button.mobile-app-nav-item,
  .mobile-app-nav a.mobile-app-nav-item {
    -webkit-appearance: none;
    appearance: none;
    width: 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    margin: 0 !important;
    padding: 4px 2px 2px !important;
    flex: 1 1 0 !important;
    line-height: normal;
    box-sizing: border-box;
  }

  .mobile-app-nav-icon {
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    padding: 0 !important;
    margin: 0 !important;
    flex: 0 0 28px;
    box-sizing: border-box;
  }

  .mobile-app-nav-label {
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.1 !important;
  }

  /* Content editor must never widen or zoom the mobile layout. */
  body[data-route="admin"][data-admin-tab="content"] .admin-main,
  body[data-route="admin"][data-admin-tab="content"] .site-media-editor-grid,
  body[data-route="admin"][data-admin-tab="content"] .site-media-editor-card,
  body[data-route="admin"][data-admin-tab="content"] .site-media-copy,
  body[data-route="admin"][data-admin-tab="content"] .maintenance-settings-form,
  body[data-route="admin"][data-admin-tab="content"] .content-form,
  body[data-route="admin"][data-admin-tab="content"] .content-form > *,
  body[data-route="admin"][data-admin-tab="content"] .review-editor-card,
  body[data-route="admin"][data-admin-tab="content"] .review-editor-card .form-grid,
  body[data-route="admin"][data-admin-tab="content"] .review-editor-card .form-grid > * {
    min-width: 0;
    max-width: 100%;
  }

  body[data-route="admin"][data-admin-tab="content"] .admin-main {
    overflow-x: clip;
  }

  /* 16px prevents Safari/iOS from auto-zooming and visually distorting the fixed app bar. */
  body[data-route="admin"][data-admin-tab="content"] #content-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  body[data-route="admin"][data-admin-tab="content"] #content-form select,
  body[data-route="admin"][data-admin-tab="content"] #content-form textarea,
  body[data-route="admin"][data-admin-tab="content"] #maintenance-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  body[data-route="admin"][data-admin-tab="content"] #maintenance-form select,
  body[data-route="admin"][data-admin-tab="content"] #maintenance-form textarea {
    min-width: 0;
    max-width: 100%;
    font-size: 16px;
    touch-action: manipulation;
  }
}

@media (max-width: 360px) {
  .mobile-app-nav-icon {
    width: 31px !important;
    min-width: 31px !important;
    max-width: 31px !important;
  }
}


/* v1.21.2 — isolate the mobile "More" sheet from admin/content page width and overflow. */
@media (max-width: 760px) {
  .mobile-app-more-backdrop {
    width: 100vw;
    min-width: 0;
    max-width: 100vw;
    overflow: hidden;
    justify-items: center;
    box-sizing: border-box;
    contain: layout paint style;
  }

  .mobile-app-more-sheet {
    width: min(calc(100vw - 12px), 560px) !important;
    min-width: 0 !important;
    max-width: min(calc(100vw - 12px), 560px) !important;
    margin-inline: auto !important;
    box-sizing: border-box;
    contain: layout paint style;
    overflow: hidden;
  }

  .mobile-app-sheet-heading,
  .mobile-app-sheet-list,
  .mobile-app-sheet-item,
  .mobile-app-sheet-item > span:nth-child(2) {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  .mobile-app-sheet-item strong,
  .mobile-app-sheet-item small {
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (max-width: 360px) {
  .mobile-app-more-sheet {
    width: calc(100vw - 8px) !important;
    max-width: calc(100vw - 8px) !important;
  }
}

/* v1.22.0 — Telegram bot integration */
.telegram-profile-panel {
  margin: 20px 0 26px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface-soft, #f8fafc);
}

.telegram-profile-heading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.telegram-profile-heading > div {
  min-width: 0;
}

.telegram-profile-heading strong,
.telegram-profile-heading small {
  display: block;
}

.telegram-profile-heading small,
.telegram-profile-description,
.telegram-pref-row small,
.telegram-student-row small,
.telegram-admin-metrics span {
  color: var(--muted);
}

.telegram-brand-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--primary-soft, #eef2ff);
  color: var(--primary);
}

.telegram-brand-icon svg,
.telegram-profile-actions svg {
  width: 20px;
  height: 20px;
}

.telegram-connection-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--surface, #fff);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.telegram-connection-pill.is-connected {
  color: var(--success, #15803d);
  border-color: color-mix(in srgb, var(--success, #15803d) 30%, transparent);
  background: color-mix(in srgb, var(--success, #15803d) 8%, white);
}

.telegram-profile-description {
  margin: 16px 0 0;
  line-height: 1.65;
}

.telegram-profile-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.telegram-pref-list {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

.telegram-pref-row {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface, #fff);
  text-align: left;
  cursor: pointer;
}

.telegram-pref-row span,
.telegram-pref-row strong,
.telegram-pref-row small {
  display: block;
}

.telegram-pref-row small {
  margin-top: 3px;
  line-height: 1.4;
}

.telegram-switch {
  width: 42px;
  height: 24px;
  padding: 3px;
  border-radius: 999px;
  background: var(--line);
  transition: background .18s ease;
}

.telegram-switch b {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(15, 23, 42, .18);
  transition: transform .18s ease;
}

.telegram-switch.is-on {
  background: var(--primary);
}

.telegram-switch.is-on b {
  transform: translateX(18px);
}

.telegram-admin-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 16px 0;
}

.telegram-admin-metrics article {
  display: grid;
  gap: 5px;
  padding: 18px;
}

.telegram-admin-metrics small,
.telegram-admin-metrics span {
  font-size: 12px;
}

.telegram-admin-metrics strong {
  font-size: clamp(22px, 2.4vw, 32px);
}

.telegram-broadcast-card,
.telegram-students-card {
  margin-top: 16px;
}

.telegram-broadcast-form label,
.telegram-broadcast-form textarea {
  width: 100%;
}

.telegram-broadcast-form textarea {
  min-height: 140px;
  resize: vertical;
}

.telegram-student-list {
  display: grid;
  gap: 8px;
}

.telegram-student-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto minmax(260px, auto);
  gap: 14px;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}

.telegram-student-row:first-child {
  border-top: 0;
}

.telegram-student-row > div:first-child,
.telegram-student-row strong,
.telegram-student-row small {
  display: block;
  min-width: 0;
}

.telegram-student-row strong,
.telegram-student-row small {
  overflow: hidden;
  text-overflow: ellipsis;
}

.telegram-student-prefs {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
  font-size: 12px;
  color: var(--muted);
}

.telegram-student-prefs span {
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--surface-soft, #f8fafc);
}

@media (max-width: 980px) {
  .telegram-admin-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .telegram-student-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .telegram-student-prefs {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

@media (max-width: 600px) {
  .telegram-profile-panel {
    padding: 16px;
  }

  .telegram-profile-heading {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .telegram-profile-heading .telegram-connection-pill {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .telegram-admin-metrics {
    grid-template-columns: 1fr 1fr;
  }

  .telegram-student-row {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .telegram-student-prefs {
    grid-column: auto;
  }
}

/* v1.22.2 — Telegram connection onboarding nudge */
.telegram-connect-nudge {
  position: fixed;
  z-index: 94;
  right: 22px;
  bottom: 22px;
  width: min(420px, calc(100vw - 32px));
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px 14px;
  align-items: start;
  padding: 18px 46px 18px 18px;
  border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--line));
  border-radius: 20px;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 22px 64px rgba(20, 35, 70, .20), 0 4px 14px rgba(20, 35, 70, .08);
  backdrop-filter: blur(18px) saturate(145%);
  animation: telegramConnectNudgeIn .28s cubic-bezier(.2,.8,.2,1);
}

.telegram-connect-nudge-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: var(--primary-soft, #eef2ff);
  color: var(--primary);
}

.telegram-connect-nudge-icon svg {
  width: 23px;
  height: 23px;
}

.telegram-connect-nudge-copy {
  min-width: 0;
  padding-top: 1px;
}

.telegram-connect-nudge-copy strong {
  display: block;
  font-size: 16px;
  line-height: 1.3;
  color: var(--ink);
}

.telegram-connect-nudge-copy p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.telegram-connect-nudge-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 2px;
}

.telegram-connect-nudge-actions .btn {
  min-height: 38px;
}

.telegram-connect-nudge-actions svg {
  width: 18px;
  height: 18px;
}

.telegram-connect-nudge-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.telegram-connect-nudge-close:hover {
  background: var(--surface-soft, #f5f7fb);
  color: var(--ink);
}

.telegram-connect-nudge-close svg {
  width: 17px;
  height: 17px;
}

@keyframes telegramConnectNudgeIn {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 760px) {
  .telegram-connect-nudge {
    z-index: 94;
    right: 12px;
    left: 12px;
    bottom: calc(var(--mobile-app-nav-safe-height) + 12px);
    width: auto;
    padding: 16px 42px 16px 16px;
    border-radius: 18px;
  }

  .telegram-connect-nudge-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
  }

  .telegram-connect-nudge-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .telegram-connect-nudge-actions .btn-primary {
    width: 100%;
  }
}

@media (max-width: 390px) {
  .telegram-connect-nudge-actions {
    grid-template-columns: 1fr;
  }

  .telegram-connect-nudge-actions .btn {
    width: 100%;
  }
}

/* v1.23.1 — Telegram admin polish + independently scrollable desktop admin sidebar */
@media (min-width: 961px) {
  body[data-route="admin"] .admin-sidebar {
    align-self: start;
    max-height: calc(100dvh - 116px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: #cbd4e3 transparent;
  }

  body[data-route="admin"] .admin-sidebar::-webkit-scrollbar { width: 8px; }
  body[data-route="admin"] .admin-sidebar::-webkit-scrollbar-track { background: transparent; }
  body[data-route="admin"] .admin-sidebar::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: #cbd4e3;
    background-clip: padding-box;
  }
  body[data-route="admin"] .admin-sidebar::-webkit-scrollbar-thumb:hover { background-color: #aeb9ca; }
}

.telegram-admin-page {
  display: grid;
  gap: 14px;
}

.telegram-admin-page .telegram-admin-heading {
  margin-bottom: 2px;
}

.telegram-admin-page .telegram-admin-heading p {
  max-width: 760px;
}

.telegram-admin-page .telegram-integration-card {
  position: relative;
  overflow: hidden;
  min-height: 112px;
  padding: 20px;
  border-radius: 14px;
  border-color: #dfe5ee;
  background: linear-gradient(135deg, #ffffff 0%, #f8faff 100%);
  box-shadow: 0 1px 2px rgba(20,32,57,.025), 0 8px 22px rgba(20,32,57,.04);
}

.telegram-admin-page .telegram-integration-card::after {
  content: "";
  position: absolute;
  right: -44px;
  top: -64px;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: rgba(51, 88, 212, .045);
  pointer-events: none;
}

.telegram-admin-page .telegram-integration-card.is-connected::after {
  background: rgba(22, 133, 104, .05);
}

.telegram-admin-page .integration-status {
  position: relative;
  z-index: 1;
  align-items: center;
}

.telegram-admin-page .integration-status > span {
  width: 44px;
  height: 44px;
  flex-basis: 44px;
  border-radius: 13px;
}

.telegram-admin-page .integration-status strong {
  color: #24324a;
  font-size: .96rem;
}

.telegram-admin-page .integration-status p {
  max-width: 760px;
  margin-top: 4px;
  font-size: .73rem;
  line-height: 1.5;
}

.telegram-admin-page .telegram-admin-metrics {
  gap: 10px;
  margin: 0;
}

.telegram-admin-page .telegram-admin-metrics article {
  position: relative;
  min-height: 112px;
  align-content: start;
  gap: 4px;
  padding: 16px;
  border-radius: 13px;
  border-color: #e1e6ee;
  box-shadow: 0 1px 2px rgba(20,32,57,.025);
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.telegram-admin-page .telegram-admin-metrics article:hover {
  border-color: #d3dce9;
  box-shadow: 0 8px 22px rgba(20,32,57,.05);
  transform: translateY(-1px);
}

.telegram-admin-page .telegram-admin-metrics small {
  color: #68758a;
  font-size: .64rem;
  font-weight: 760;
}

.telegram-admin-page .telegram-admin-metrics strong {
  margin-top: 3px;
  color: #24324a;
  font-size: 1.38rem;
  line-height: 1.15;
  letter-spacing: -.025em;
}

.telegram-admin-page .telegram-admin-metrics span {
  margin-top: 2px;
  font-size: .61rem;
  line-height: 1.4;
}

.telegram-admin-page .telegram-broadcast-card,
.telegram-admin-page .telegram-students-card,
.telegram-admin-page .integration-explainer {
  margin-top: 0;
  padding: 20px;
  border-radius: 14px;
  border-color: #dfe5ee;
  box-shadow: 0 1px 2px rgba(20,32,57,.025), 0 8px 22px rgba(20,32,57,.04);
}

.telegram-admin-page .telegram-broadcast-form {
  display: grid;
  gap: 14px;
}

.telegram-admin-page .telegram-broadcast-form label {
  display: grid;
  gap: 7px;
  color: #35425a;
  font-size: .72rem;
  font-weight: 720;
}

.telegram-admin-page .telegram-broadcast-form textarea {
  min-height: 132px;
  padding: 12px 13px;
  border-color: #d7dee9;
  border-radius: 11px;
  background: #fbfcfe;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.5;
}

.telegram-admin-page .telegram-broadcast-form label > small {
  color: #7a8598;
  font-size: .62rem;
  font-weight: 500;
}

.telegram-admin-page .telegram-broadcast-form .form-actions {
  justify-content: flex-end;
  padding-top: 0;
}

.telegram-admin-page .telegram-student-list {
  gap: 7px;
}

.telegram-admin-page .telegram-student-row {
  min-height: 62px;
  padding: 10px 12px;
  border: 1px solid #edf0f4;
  border-radius: 11px;
  background: #fbfcfe;
  transition: background .15s ease, border-color .15s ease;
}

.telegram-admin-page .telegram-student-row:first-child {
  border-top: 1px solid #edf0f4;
}

.telegram-admin-page .telegram-student-row:hover {
  border-color: #dfe5ee;
  background: #f8faff;
}

.telegram-admin-page .telegram-student-row strong {
  color: #2b3952;
  font-size: .77rem;
}

.telegram-admin-page .telegram-student-row small {
  margin-top: 2px;
  font-size: .62rem;
}

.telegram-admin-page .telegram-student-prefs span {
  border: 1px solid #e8ecf2;
  background: #fff;
}

.telegram-admin-page .integration-explainer > h3 {
  margin: 0;
  color: #24324a;
  font-size: 1rem;
}

.telegram-admin-page .integration-explainer .criteria-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 14px;
}

.telegram-admin-page .integration-explainer .criteria-grid div {
  min-height: 84px;
  align-content: center;
  padding: 14px;
  border: 1px solid #edf0f4;
  border-radius: 11px;
  background: #f8fafc;
}

.telegram-admin-page .integration-explainer .criteria-grid strong {
  color: #2c3a53;
  font-size: .86rem;
}

.telegram-admin-page .integration-explainer .criteria-grid span {
  font-size: .66rem;
  line-height: 1.4;
}

.telegram-admin-page .integration-explainer > p {
  margin-top: 14px;
  font-size: .69rem;
  line-height: 1.5;
}

@media (max-width: 980px) {
  .telegram-admin-page .telegram-admin-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .telegram-admin-page { gap: 10px; }
  .telegram-admin-page .telegram-integration-card,
  .telegram-admin-page .telegram-broadcast-card,
  .telegram-admin-page .telegram-students-card,
  .telegram-admin-page .integration-explainer { padding: 15px; border-radius: 13px; }
  .telegram-admin-page .telegram-admin-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .telegram-admin-page .telegram-admin-metrics article { min-height: 102px; padding: 13px; }
  .telegram-admin-page .telegram-admin-metrics strong { font-size: 1.22rem; }
  .telegram-admin-page .telegram-broadcast-form .form-actions,
  .telegram-admin-page .telegram-broadcast-form .form-actions .btn { width: 100%; }
  .telegram-admin-page .telegram-student-row { padding: 11px; }
  .telegram-admin-page .integration-explainer .criteria-grid { grid-template-columns: 1fr; }
}


/* v1.23.2 — desktop home CTA breathing room */
@media (min-width: 761px) {
  body[data-route="home"] .cta-panel > .btn {
    margin-top: 30px;
  }
}

/* v1.23.3 — clearer desktop profile information hierarchy */
@media (min-width: 761px) {
  body[data-route="dashboard"] .profile-screen-card {
    padding: 28px;
    border-color: #e2e7ef;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 14px 36px rgba(25, 42, 75, .055);
  }

  body[data-route="dashboard"] .profile-desktop-heading {
    margin-bottom: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid #edf0f4;
  }

  body[data-route="dashboard"] .profile-desktop-heading h2 {
    margin: 0;
    color: #202e47;
    font-size: 1.55rem;
  }

  body[data-route="dashboard"] .profile-desktop-heading p {
    max-width: 680px;
    margin: 6px 0 0;
    color: #7a879b;
    font-size: .74rem;
    line-height: 1.55;
  }

  body[data-route="dashboard"] .profile-photo-editor {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    margin: 0 0 18px;
    padding: 17px 18px;
    border: 1px solid #e6eaf1;
    border-radius: 17px;
    background: #f8faff;
  }

  body[data-route="dashboard"] .profile-photo-editor .avatar.profile-photo-large {
    width: 76px;
    height: 76px;
    border-radius: 22px;
  }

  body[data-route="dashboard"] .profile-identity-copy {
    min-width: 0;
    display: grid;
    gap: 4px;
  }

  body[data-route="dashboard"] .profile-identity-copy strong {
    overflow: hidden;
    color: #26354d;
    font-size: .92rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body[data-route="dashboard"] .profile-identity-copy span {
    overflow: hidden;
    color: #7f8ba0;
    font-size: .68rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body[data-route="dashboard"] .profile-photo-form {
    display: grid;
    justify-items: end;
    gap: 5px;
  }

  body[data-route="dashboard"] .profile-photo-form small {
    font-size: .59rem;
    text-align: right;
  }

  body[data-route="dashboard"] .profile-main-form {
    display: block;
  }

  body[data-route="dashboard"] .profile-form-section {
    min-width: 0;
    display: block;
    margin: 0 0 13px;
    padding: 18px;
    border: 1px solid #e7ebf1;
    border-radius: 17px;
    background: #fbfcfe;
  }

  body[data-route="dashboard"] .profile-form-section > legend {
    width: 100%;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin: 0;
    padding: 0 2px 13px;
    color: #2c3a53;
  }

  body[data-route="dashboard"] .profile-form-section > legend span {
    font-size: .82rem;
    font-weight: 850;
  }

  body[data-route="dashboard"] .profile-form-section > legend small {
    color: #8a95a7;
    font-size: .59rem;
    font-weight: 600;
  }

  body[data-route="dashboard"] .profile-form-section-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  body[data-route="dashboard"] .profile-form-section-grid > label {
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 7px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #34435b;
  }

  body[data-route="dashboard"] .profile-form-section-grid > label > small {
    min-height: 2.7em;
    color: #8792a4;
    font-size: .59rem;
    font-weight: 500;
    line-height: 1.42;
  }

  body[data-route="dashboard"] .profile-form-section input,
  body[data-route="dashboard"] .profile-form-section select {
    min-height: 46px;
    border-color: #dce2eb;
    border-radius: 11px;
    background: #fff;
  }

  body[data-route="dashboard"] .profile-form-section input:focus,
  body[data-route="dashboard"] .profile-form-section select:focus {
    border-color: #9db0e9;
    box-shadow: 0 0 0 3px rgba(67, 95, 194, .09);
  }

  body[data-route="dashboard"] .profile-email-field input:disabled {
    color: #748197;
    background: #f2f4f7;
  }

  body[data-route="dashboard"] .profile-save-actions {
    margin: 2px 0 24px;
    padding: 4px 0 0;
    border: 0;
    display: flex;
    justify-content: flex-end;
    background: transparent;
    box-shadow: none;
  }

  body[data-route="dashboard"] .profile-save-actions .btn {
    min-width: 180px;
  }

  body[data-route="dashboard"] .telegram-profile-panel {
    margin: 0;
    padding: 18px;
    border-color: #e4e9f1;
    border-radius: 17px;
    background: #f8faff;
  }

  body[data-route="dashboard"] .telegram-profile-heading {
    gap: 11px;
  }

  body[data-route="dashboard"] .telegram-brand-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }

  body[data-route="dashboard"] .telegram-pref-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
    margin-top: 14px;
  }

  body[data-route="dashboard"] .telegram-pref-row {
    min-height: 82px;
    padding: 11px 12px;
    gap: 10px;
    border-color: #e5e9f0;
    border-radius: 12px;
  }

  body[data-route="dashboard"] .telegram-pref-row strong {
    font-size: .7rem;
    line-height: 1.25;
  }

  body[data-route="dashboard"] .telegram-pref-row small {
    font-size: .57rem;
    line-height: 1.35;
  }

  body[data-route="dashboard"] .telegram-profile-actions {
    margin-top: 13px;
  }
}

@media (min-width: 761px) and (max-width: 1040px) {
  body[data-route="dashboard"] .profile-photo-editor {
    grid-template-columns: 68px minmax(0, 1fr);
  }
  body[data-route="dashboard"] .profile-photo-editor .avatar.profile-photo-large {
    width: 68px;
    height: 68px;
  }
  body[data-route="dashboard"] .profile-photo-form {
    grid-column: 2;
    justify-items: start;
  }
  body[data-route="dashboard"] .profile-photo-form small { text-align: left; }
  body[data-route="dashboard"] .telegram-pref-list { grid-template-columns: 1fr; }
}

/* v1.23.4 — calmer, section-based admin Content site editor */
body[data-route="admin"][data-admin-tab="content"] .content-editor-page {
  width: min(100%, 1180px);
  margin: 0 auto;
}

body[data-route="admin"][data-admin-tab="content"] .content-editor-page-heading {
  margin-bottom: 30px;
}

body[data-route="admin"][data-admin-tab="content"] .content-editor-cluster {
  margin-bottom: 34px;
}

body[data-route="admin"][data-admin-tab="content"] .content-editor-cluster-heading {
  margin-bottom: 14px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
}

body[data-route="admin"][data-admin-tab="content"] .content-editor-cluster-heading > div {
  display: grid;
  gap: 4px;
}

body[data-route="admin"][data-admin-tab="content"] .content-editor-kicker {
  color: var(--primary);
  font-size: .61rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

body[data-route="admin"][data-admin-tab="content"] .content-editor-cluster-heading h3 {
  margin: 0;
  color: #25344e;
  font-size: 1.02rem;
  letter-spacing: -.018em;
}

body[data-route="admin"][data-admin-tab="content"] .content-editor-cluster-heading p {
  max-width: 720px;
  margin: 0;
  color: #7c8799;
  font-size: .68rem;
  line-height: 1.55;
}

body[data-route="admin"][data-admin-tab="content"] .site-media-editor-grid {
  gap: 12px;
  margin: 0;
}

body[data-route="admin"][data-admin-tab="content"] .site-media-editor-card {
  min-height: 158px;
  padding: 17px;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 15px;
  border-color: #e4e9f1;
  border-radius: 17px;
  background: #fff;
  box-shadow: none;
}

body[data-route="admin"][data-admin-tab="content"] .site-media-preview {
  width: 88px;
  height: 88px;
  border-radius: 17px;
}

body[data-route="admin"][data-admin-tab="content"] .site-media-copy {
  gap: 5px;
}

body[data-route="admin"][data-admin-tab="content"] .site-media-copy > strong {
  color: #2b3951;
  font-size: .78rem;
}

body[data-route="admin"][data-admin-tab="content"] .site-media-copy p {
  font-size: .64rem;
  line-height: 1.45;
}

body[data-route="admin"][data-admin-tab="content"] .site-media-actions {
  margin-top: 4px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
}

body[data-route="admin"][data-admin-tab="content"] .site-media-actions > small {
  font-size: .57rem;
}

body[data-route="admin"][data-admin-tab="content"] .media-visibility-toggle {
  width: 100%;
  margin-top: 5px;
  padding-top: 8px;
  border-top: 1px solid #edf0f4;
}

body[data-route="admin"][data-admin-tab="content"] .content-maintenance-card {
  margin: 0;
  padding: 17px;
  gap: 13px;
  border-color: #e4e9f1;
  border-radius: 17px;
  box-shadow: none;
}

body[data-route="admin"][data-admin-tab="content"] .content-maintenance-card .maintenance-admin-control {
  padding: 14px 15px;
  border-radius: 13px;
}

body[data-route="admin"][data-admin-tab="content"] .content-maintenance-card .maintenance-message-editor {
  padding: 0 2px;
}

body[data-route="admin"][data-admin-tab="content"] .content-main-editor-cluster {
  margin-bottom: 10px;
}

body[data-route="admin"][data-admin-tab="content"] .content-editor-jump-nav {
  position: sticky;
  top: 14px;
  z-index: 7;
  margin-bottom: 12px;
  padding: 8px;
  display: flex;
  align-items: center;
  gap: 5px;
  overflow-x: auto;
  border-color: rgba(220, 226, 235, .92);
  border-radius: 14px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 8px 24px rgba(29, 43, 73, .06);
  backdrop-filter: blur(14px);
  scrollbar-width: none;
}

body[data-route="admin"][data-admin-tab="content"] .content-editor-jump-nav::-webkit-scrollbar { display: none; }

body[data-route="admin"][data-admin-tab="content"] .content-editor-jump-nav a {
  min-width: max-content;
  padding: 8px 11px;
  border-radius: 9px;
  color: #657289;
  font-size: .64rem;
  font-weight: 800;
  text-decoration: none;
  transition: background .16s ease, color .16s ease;
}

body[data-route="admin"][data-admin-tab="content"] .content-editor-jump-nav a:hover,
body[data-route="admin"][data-admin-tab="content"] .content-editor-jump-nav a:focus-visible {
  color: var(--primary);
  background: #f0f4ff;
  outline: none;
}

body[data-route="admin"][data-admin-tab="content"] .content-editor-form {
  padding: 0;
  display: grid;
  gap: 12px;
  background: transparent;
  border: 0;
  box-shadow: none;
}

body[data-route="admin"][data-admin-tab="content"] .content-editor-section {
  scroll-margin-top: 86px;
  padding: 22px;
  border-color: #e4e9f1;
  border-radius: 18px;
  background: #fff;
  box-shadow: none;
}

body[data-route="admin"][data-admin-tab="content"] .content-editor-section-heading {
  margin-bottom: 19px;
  padding-bottom: 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border-bottom: 1px solid #edf0f4;
}

body[data-route="admin"][data-admin-tab="content"] .content-editor-section-number {
  width: 31px;
  height: 31px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #eef3ff;
  color: var(--primary);
  font-size: .59rem;
  font-weight: 900;
}

body[data-route="admin"][data-admin-tab="content"] .content-editor-section-heading > div {
  display: grid;
  gap: 3px;
}

body[data-route="admin"][data-admin-tab="content"] .content-editor-section-heading h4 {
  margin: 0;
  color: #283750;
  font-size: .86rem;
  letter-spacing: -.012em;
}

body[data-route="admin"][data-admin-tab="content"] .content-editor-section-heading p {
  margin: 0;
  color: #8792a4;
  font-size: .62rem;
  line-height: 1.5;
}

body[data-route="admin"][data-admin-tab="content"] .content-editor-fields {
  gap: 14px 16px;
}

body[data-route="admin"][data-admin-tab="content"] .content-editor-fields > label:not(.checkbox-card) {
  gap: 6px;
  color: #40506a;
  font-size: .68rem;
}

body[data-route="admin"][data-admin-tab="content"] .content-editor-fields input,
body[data-route="admin"][data-admin-tab="content"] .content-editor-fields textarea,
body[data-route="admin"][data-admin-tab="content"] .content-editor-fields select {
  border-color: #dce2eb;
  border-radius: 10px;
  background: #fbfcfe;
}

body[data-route="admin"][data-admin-tab="content"] .content-editor-fields input:focus,
body[data-route="admin"][data-admin-tab="content"] .content-editor-fields textarea:focus,
body[data-route="admin"][data-admin-tab="content"] .content-editor-fields select:focus {
  background: #fff;
  border-color: #9db0e9;
  box-shadow: 0 0 0 3px rgba(67, 95, 194, .08);
}

body[data-route="admin"][data-admin-tab="content"] .content-editor-fields label > small {
  color: #8a95a7;
  font-size: .58rem;
  line-height: 1.45;
}

body[data-route="admin"][data-admin-tab="content"] .content-editor-option-card {
  padding: 13px 14px;
  border-color: #e3e8f0;
  border-radius: 12px;
  background: #f8faff;
}

body[data-route="admin"][data-admin-tab="content"] .content-review-editor-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

body[data-route="admin"][data-admin-tab="content"] .review-editor-card {
  padding: 14px;
  border-color: #e6eaf0;
  border-radius: 13px;
  background: #fafbfd;
}

body[data-route="admin"][data-admin-tab="content"] .review-editor-card legend {
  padding: 0 5px;
  color: #53627a;
  font-size: .63rem;
}

body[data-route="admin"][data-admin-tab="content"] .review-editor-card .form-grid {
  grid-template-columns: 1fr;
  gap: 10px;
}

body[data-route="admin"][data-admin-tab="content"] .review-editor-card .form-grid .span-2 {
  grid-column: auto;
}

body[data-route="admin"][data-admin-tab="content"] .content-payment-note {
  padding: 12px 14px;
  border-radius: 11px;
  background: #f7f9fc;
}

body[data-route="admin"][data-admin-tab="content"] .content-editor-savebar {
  position: sticky;
  bottom: 14px;
  z-index: 7;
  margin-top: 2px;
  padding: 12px 13px 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-color: rgba(215, 222, 233, .94);
  border-radius: 14px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 12px 32px rgba(29, 43, 73, .11);
  backdrop-filter: blur(14px);
}

body[data-route="admin"][data-admin-tab="content"] .content-editor-savebar > div {
  display: grid;
  gap: 2px;
}

body[data-route="admin"][data-admin-tab="content"] .content-editor-savebar strong {
  color: #2c3a52;
  font-size: .71rem;
}

body[data-route="admin"][data-admin-tab="content"] .content-editor-savebar span {
  color: #8994a6;
  font-size: .58rem;
}

body[data-route="admin"][data-admin-tab="content"] .content-editor-savebar .btn {
  min-width: 172px;
}

@media (max-width: 1040px) {
  body[data-route="admin"][data-admin-tab="content"] .content-review-editor-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  body[data-route="admin"][data-admin-tab="content"] .content-editor-page-heading { margin-bottom: 22px; }
  body[data-route="admin"][data-admin-tab="content"] .content-editor-cluster { margin-bottom: 27px; }
  body[data-route="admin"][data-admin-tab="content"] .content-editor-cluster-heading { margin-bottom: 11px; }
  body[data-route="admin"][data-admin-tab="content"] .content-editor-jump-nav {
    position: static;
    margin-inline: -1px;
  }
  body[data-route="admin"][data-admin-tab="content"] .content-editor-section {
    padding: 16px;
    border-radius: 15px;
  }
  body[data-route="admin"][data-admin-tab="content"] .content-editor-section-heading {
    margin-bottom: 15px;
    padding-bottom: 13px;
  }
  body[data-route="admin"][data-admin-tab="content"] .content-editor-fields {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  body[data-route="admin"][data-admin-tab="content"] .content-editor-fields .span-2 { grid-column: auto; }
  body[data-route="admin"][data-admin-tab="content"] .site-media-editor-card {
    min-height: 0;
    grid-template-columns: 76px minmax(0, 1fr);
  }
  body[data-route="admin"][data-admin-tab="content"] .site-media-preview {
    width: 76px;
    height: 76px;
  }
  body[data-route="admin"][data-admin-tab="content"] .content-editor-savebar {
    position: static;
    padding: 13px;
    align-items: stretch;
    flex-direction: column;
  }
  body[data-route="admin"][data-admin-tab="content"] .content-editor-savebar .btn { width: 100%; }
}

@media (max-width: 460px) {
  body[data-route="admin"][data-admin-tab="content"] .site-media-editor-card {
    grid-template-columns: 1fr;
  }
  body[data-route="admin"][data-admin-tab="content"] .site-media-preview {
    width: 70px;
    height: 70px;
  }
}

/* v1.23.8 performance: progressive startup and mobile-friendly admin rendering */
.progressive-loading-card {
  min-height: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 28px;
  text-align: left;
}
.progressive-loading-card .spinner { flex: 0 0 auto; }
.progressive-loading-card h1,
.progressive-loading-card h2 { margin: 0 0 6px; }
.progressive-loading-card p { margin: 0; color: var(--muted); }
.admin-progressive-loading { min-height: 260px; }

/* Skip layout/paint work for editor cards that are still far below the viewport.
   The DOM and form values remain intact; browsers render each section just before
   it becomes visible. This is especially effective on long mobile admin pages. */
body[data-route="admin"][data-admin-tab="content"] .content-editor-cluster,
body[data-route="admin"][data-admin-tab="content"] .content-editor-section,
body[data-route="admin"][data-admin-tab="content"] .site-media-editor-card {
  content-visibility: auto;
  contain-intrinsic-size: auto 520px;
}

@media (max-width: 760px) {
  .progressive-loading-card {
    min-height: 150px;
    padding: 22px 18px;
    align-items: flex-start;
  }
  .admin-progressive-loading { min-height: 210px; }
  body[data-route="admin"][data-admin-tab="content"] .content-editor-cluster,
  body[data-route="admin"][data-admin-tab="content"] .content-editor-section,
  body[data-route="admin"][data-admin-tab="content"] .site-media-editor-card {
    contain-intrinsic-size: auto 620px;
  }
}

/* v1.23.17 — Homework / test center */
.homework-kicker{display:inline-flex;margin-bottom:.35rem;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted,#65718b)}
.homework-feature-settings{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;margin-bottom:1rem;padding:1.2rem 1.35rem}.homework-feature-settings h3{margin:.1rem 0 .35rem}.homework-feature-settings p{margin:0;color:var(--muted,#65718b);max-width:760px}.homework-feature-settings form{display:flex;align-items:center;gap:.8rem;flex-shrink:0}.homework-master-toggle{display:flex;align-items:center;gap:.7rem;cursor:pointer}.homework-master-toggle input{width:1.15rem;height:1.15rem}.homework-master-toggle span{display:grid;gap:.12rem}.homework-master-toggle small{color:var(--muted,#65718b)}
.homework-builder-panel,.homework-assign-panel{margin:1rem 0 1.25rem;border:1px solid rgba(54,95,191,.18)}.homework-builder-form{display:grid;gap:1rem}.homework-builder-summary{display:flex;gap:.55rem;flex-wrap:wrap}.homework-builder-summary span,.homework-template-meta span{display:inline-flex;align-items:center;padding:.35rem .6rem;border-radius:999px;background:rgba(32,67,139,.07);font-size:.78rem;font-weight:700;color:var(--muted,#65718b)}
.homework-question-editor-list{display:grid;gap:.9rem}.homework-question-editor{padding:1rem;background:rgba(248,250,255,.72);box-shadow:none}.homework-question-editor-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:.85rem}.homework-question-editor-head>div{display:grid;gap:.12rem}.homework-question-editor-head span{font-size:.76rem;font-weight:800;color:var(--muted,#65718b);text-transform:uppercase;letter-spacing:.06em}.homework-question-settings{margin-bottom:.8rem}.homework-option-list{display:grid;gap:.55rem}.homework-option-list-head{display:flex;align-items:center;justify-content:space-between;gap:1rem}.homework-option-list-head small,.homework-short-answer-key small{color:var(--muted,#65718b)}.homework-option-editor{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.55rem}.homework-correct-pick{position:relative;display:grid;place-items:center;width:2.2rem;height:2.2rem;border-radius:.7rem;border:1px solid rgba(32,67,139,.16);cursor:pointer;background:#fff}.homework-correct-pick input{position:absolute;opacity:0;pointer-events:none}.homework-correct-pick span{font-weight:900;color:#8a93a8}.homework-correct-pick:has(input:checked){background:rgba(35,132,90,.1);border-color:rgba(35,132,90,.45)}.homework-correct-pick:has(input:checked) span{color:#168052}.homework-option-remove{width:2.2rem;height:2.2rem}.homework-option-remove svg{width:1rem}.homework-short-answer-key{display:grid;gap:.35rem}.homework-builder-actions{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:.3rem}.homework-add-question-group{display:flex;gap:.5rem;flex-wrap:wrap}
.homework-math-symbols{border:1px solid rgba(54,95,191,.16);border-radius:1rem;background:rgba(248,250,255,.72);overflow:hidden}.homework-math-symbols summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.72rem .85rem;cursor:pointer;list-style:none;font-weight:800;user-select:none}.homework-math-symbols summary::-webkit-details-marker{display:none}.homework-math-symbols summary span{display:inline-flex;align-items:center;gap:.45rem}.homework-math-symbols summary span b{display:grid;place-items:center;width:1.75rem;height:1.75rem;border-radius:.55rem;background:rgba(39,94,210,.09);color:#365fbf;font-size:1.05rem}.homework-math-symbols summary small{font-weight:600;color:var(--muted,#65718b);text-align:right}.homework-math-symbols[open] summary{border-bottom:1px solid rgba(54,95,191,.11)}.homework-math-symbols-body{display:grid;gap:.72rem;padding:.78rem .85rem .9rem}.homework-symbol-group{display:grid;gap:.38rem}.homework-symbol-group-label{font-size:.72rem;font-weight:800;color:var(--muted,#65718b);text-transform:uppercase;letter-spacing:.045em}.homework-symbol-grid{display:flex;flex-wrap:wrap;gap:.35rem}.homework-symbol-button{display:grid;place-items:center;min-width:2.35rem;height:2.25rem;padding:0 .45rem;border:1px solid rgba(32,67,139,.15);border-radius:.65rem;background:#fff;color:var(--text,#17213a);font:inherit;font-size:1.03rem;font-weight:700;line-height:1;cursor:pointer;touch-action:manipulation}.homework-symbol-button:hover{border-color:rgba(39,94,210,.45);background:rgba(39,94,210,.06)}.homework-symbol-button:active{transform:translateY(1px)}.homework-math-symbols.is-compact{margin-bottom:.1rem;background:#fff}.homework-math-symbols.is-compact summary{padding:.68rem .8rem}.homework-builder-form>.homework-math-symbols,.homework-student-test>.homework-math-symbols{position:sticky;top:calc(var(--app-header-height,0px) + .5rem);z-index:5;box-shadow:0 8px 24px rgba(30,52,105,.08);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.homework-assign-form{display:grid;gap:1rem}.homework-assign-form fieldset{border:0;padding:0;margin:0}.homework-assign-form legend{font-weight:800;margin-bottom:.65rem}.homework-student-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem}.homework-student-choice{position:relative;cursor:pointer}.homework-student-choice>input{position:absolute;opacity:0}.homework-student-choice>span{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:.7rem;align-items:center;border:1px solid rgba(32,67,139,.14);border-radius:1rem;padding:.7rem;background:#fff}.homework-student-choice>span .avatar{grid-row:1/3}.homework-student-choice small{color:var(--muted,#65718b)}.homework-student-choice:has(input:checked)>span{border-color:rgba(39,94,210,.5);background:rgba(39,94,210,.06);box-shadow:inset 0 0 0 1px rgba(39,94,210,.14)}
.homework-admin-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;margin:1rem 0}.homework-admin-stats .card{padding:1rem 1.1rem;display:grid;gap:.2rem}.homework-admin-stats span{font-size:.78rem;color:var(--muted,#65718b);font-weight:700}.homework-admin-stats strong{font-size:1.65rem}.homework-admin-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);gap:1rem;align-items:start}.homework-list-heading{margin-bottom:.65rem}.homework-template-list{display:grid;gap:.7rem}.homework-template-card{display:flex;justify-content:space-between;gap:1rem;padding:1rem}.homework-template-card.is-archived{opacity:.72}.homework-template-main{min-width:0}.homework-template-status span,.homework-status{display:inline-flex;align-items:center;padding:.25rem .5rem;border-radius:999px;font-size:.7rem;font-weight:800;background:rgba(39,94,210,.08);color:#365fbf}.homework-template-card h3{margin:.45rem 0 .35rem}.homework-template-card p{margin:0 0 .65rem;color:var(--muted,#65718b)}.homework-template-meta{display:flex;gap:.35rem;flex-wrap:wrap}.homework-template-actions{display:flex;gap:.4rem;align-items:flex-start;flex-wrap:wrap;justify-content:flex-end}.homework-archive{margin-top:.65rem}.homework-archive summary{cursor:pointer;font-weight:800;color:var(--muted,#65718b);padding:.65rem 0}.homework-assignment-history{padding:.35rem .9rem}.homework-assignment-row{display:flex;justify-content:space-between;gap:.9rem;padding:.8rem 0;border-bottom:1px solid rgba(32,67,139,.09)}.homework-assignment-row:last-child{border-bottom:0}.homework-assignment-row>div:first-child{display:grid;gap:.18rem;min-width:0}.homework-assignment-row strong{font-size:.85rem}.homework-assignment-row b{font-size:.94rem}.homework-assignment-row small{color:var(--muted,#65718b)}.homework-assignment-result{display:grid;justify-items:end;align-content:center;gap:.12rem;flex-shrink:0}.homework-status.is-done{background:rgba(35,132,90,.1);color:#168052}.homework-status.is-late{background:rgba(196,78,57,.1);color:#a64131}.homework-status.is-muted{background:rgba(98,108,130,.1);color:#667085}
.homework-student-overview{display:grid;gap:1.15rem}.homework-section-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:.55rem}.homework-section-title h3{margin:0}.homework-section-title span{display:grid;place-items:center;min-width:1.8rem;height:1.8rem;padding:0 .45rem;border-radius:999px;background:rgba(39,94,210,.09);font-weight:800}.homework-student-list{display:grid;gap:.7rem}.homework-student-card{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem}.homework-student-card h3{margin:.45rem 0 .3rem}.homework-student-card p{margin:0 0 .65rem;color:var(--muted,#65718b)}.homework-student-card-action{display:grid;justify-items:end;gap:.45rem;flex-shrink:0}.homework-student-card-action>strong{font-size:1.3rem}.homework-back{margin-bottom:.35rem}.homework-teacher-note{padding:1rem 1.1rem;margin-bottom:.8rem}.homework-teacher-note p{margin:.35rem 0 0}.homework-due-banner{display:flex;align-items:center;justify-content:space-between;padding:.7rem .9rem;margin-bottom:.8rem;border-radius:.9rem;background:rgba(220,147,31,.1);color:#7b5413}.homework-due-banner span{font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em}.homework-student-test{display:grid;gap:.8rem}.homework-student-question{padding:1rem}.homework-student-question legend{display:flex;align-items:center;justify-content:space-between;width:100%;padding:0;font-size:.78rem;font-weight:800;color:var(--muted,#65718b)}.homework-student-question h3{font-size:1rem;margin:.5rem 0 .8rem;line-height:1.45}.homework-answer-options{display:grid;gap:.5rem}.homework-answer-options label{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:.65rem;border:1px solid rgba(32,67,139,.13);border-radius:.85rem;padding:.72rem .8rem;cursor:pointer;background:#fff}.homework-answer-options label:has(input:checked){border-color:rgba(39,94,210,.48);background:rgba(39,94,210,.06)}.homework-answer-options input{width:1.05rem;height:1.05rem}.homework-short-response{display:grid;gap:.35rem}.homework-submit-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem;position:sticky;bottom:calc(var(--mobile-app-nav-height,0px) + .5rem);z-index:3}.homework-submit-bar>div{display:grid;gap:.15rem}.homework-submit-bar small{color:var(--muted,#65718b);max-width:650px}.homework-result-summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.2rem;margin-bottom:.8rem}.homework-result-summary>div{display:flex;align-items:baseline;gap:.65rem}.homework-result-summary span{font-weight:800;color:var(--muted,#65718b)}.homework-result-summary strong{font-size:1.45rem}.homework-result-summary b{font-size:1rem;color:#365fbf}.homework-result-summary p{margin:0;color:var(--muted,#65718b)}.homework-review-list{display:grid;gap:.65rem}.homework-review-item{padding:1rem;border-left:4px solid rgba(196,78,57,.55)}.homework-review-item.is-correct{border-left-color:rgba(35,132,90,.65)}.homework-review-head{display:flex;align-items:center;justify-content:space-between;gap:.8rem}.homework-review-head span{font-size:.75rem;font-weight:900;text-transform:uppercase;letter-spacing:.04em;color:#a64131}.homework-review-item.is-correct .homework-review-head span{color:#168052}.homework-review-item h3{margin:.45rem 0 .65rem;font-size:1rem}.homework-review-item p{margin:.3rem 0;color:var(--muted,#65718b)}.homework-review-item p strong{color:var(--text,#17213a)}

@media (max-width:1000px){.homework-admin-grid{grid-template-columns:1fr}.homework-template-card{flex-direction:column}.homework-template-actions{justify-content:flex-start}.homework-feature-settings{align-items:flex-start;flex-direction:column}.homework-feature-settings form{width:100%;justify-content:space-between}}
@media (max-width:760px){.homework-feature-settings{padding:1rem}.homework-feature-settings form{align-items:flex-end}.homework-master-toggle{align-items:flex-start}.homework-admin-stats{grid-template-columns:repeat(3,1fr);gap:.45rem}.homework-admin-stats .card{padding:.75rem}.homework-admin-stats strong{font-size:1.35rem}.homework-builder-actions{align-items:stretch;flex-direction:column}.homework-add-question-group{display:grid;grid-template-columns:1fr}.homework-student-picker{grid-template-columns:1fr}.homework-template-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}.homework-template-actions .btn{width:100%}.homework-assignment-row{flex-direction:column}.homework-assignment-result{justify-items:start}.homework-student-card{align-items:stretch;flex-direction:column}.homework-student-card-action{display:flex;align-items:center;justify-content:space-between}.homework-submit-bar{align-items:stretch;flex-direction:column;position:static}.homework-submit-bar .btn{width:100%}.homework-result-summary{align-items:flex-start;flex-direction:column}.homework-result-summary>div{flex-wrap:wrap}.homework-option-list-head{align-items:flex-start;flex-direction:column;gap:.2rem}.homework-question-editor-head{gap:.5rem}.homework-question-settings{grid-template-columns:1fr}.homework-question-settings .span-2{grid-column:auto}.homework-feature-settings .btn{flex-shrink:0}.homework-math-symbols summary{align-items:flex-start;flex-direction:column;gap:.2rem}.homework-math-symbols summary small{text-align:left}.homework-symbol-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.32rem}.homework-symbol-button{min-width:0;width:100%;height:2.45rem;padding:0;font-size:1.08rem}}

/* v1.23.11 — interactive coordinate-plane homework questions */
.homework-question-editor.is-graph-question{overflow:visible}.homework-graph-editor{display:grid;gap:.9rem}.homework-graph-editor-intro{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:.8rem .9rem;border-radius:.9rem;background:rgba(39,94,210,.055)}.homework-graph-editor-intro>div{display:grid;gap:.2rem}.homework-graph-editor-intro small,.homework-graph-add-point-box small,.homework-graph-key-panel label small,.homework-graph-settings-grid small{color:var(--muted,#65718b)}.homework-graph-badge{display:inline-flex;align-items:center;flex-shrink:0;padding:.38rem .58rem;border-radius:999px;background:#fff;border:1px solid rgba(39,94,210,.14);font-size:.76rem;font-weight:800;color:#365fbf}.homework-graph-settings-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.homework-graph-connect-setting{display:flex;align-items:flex-start;gap:.7rem;padding:.75rem .85rem;border:1px solid rgba(32,67,139,.12);border-radius:.85rem;background:#fff;cursor:pointer}.homework-graph-connect-setting input{width:1.1rem;height:1.1rem;margin-top:.15rem}.homework-graph-connect-setting span{display:grid;gap:.12rem}.homework-graph-connect-setting small{color:var(--muted,#65718b)}.homework-graph-key-grid{display:grid;grid-template-columns:minmax(300px,.86fr) minmax(0,1.14fr);gap:.8rem;align-items:start}.homework-graph-key-panel,.homework-graph-preview-panel{display:grid;gap:.7rem;min-width:0;padding:.85rem;border:1px solid rgba(32,67,139,.11);border-radius:1rem;background:#fff}.homework-graph-key-panel>label{display:grid;gap:.35rem}.homework-graph-add-point-box{display:grid;gap:.45rem;padding:.7rem;border-radius:.8rem;background:rgba(32,67,139,.045)}.homework-graph-add-point-box>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:.45rem;align-items:end}.homework-graph-add-point-box label{display:grid;gap:.2rem;font-size:.78rem;font-weight:700}.homework-graph-point-list,.homework-student-graph-point-list{display:grid;gap:.4rem}.homework-graph-point-row{display:grid;grid-template-columns:2rem minmax(0,1fr) minmax(0,1fr) auto;gap:.4rem;align-items:end}.homework-graph-point-row>span,.homework-student-graph-point-row>span{display:grid;place-items:center;width:2rem;height:2rem;border-radius:.65rem;background:rgba(39,94,210,.08);font-size:.76rem;font-weight:900;color:#365fbf}.homework-graph-point-row label{display:grid;gap:.18rem;font-size:.72rem;font-weight:800;color:var(--muted,#65718b)}.homework-graph-point-row input{min-width:0}.homework-graph-point-actions{display:flex;align-items:center;gap:.25rem}.homework-graph-point-actions .icon-button,.homework-student-graph-point-row .icon-button{width:2rem;height:2rem;font-size:.9rem}.homework-graph-preview-head{display:flex;align-items:center;justify-content:space-between;gap:.7rem}.homework-graph-validation-note{padding:.72rem .85rem;border-radius:.85rem;background:rgba(35,132,90,.07);color:#355a49;font-size:.82rem;line-height:1.45}.homework-graph-validation-note strong{color:#168052}
.homework-coordinate-plane{display:grid;gap:.35rem;min-width:0}.homework-coordinate-plane svg{display:block;width:100%;height:auto;max-height:520px;border:1px solid rgba(32,67,139,.13);border-radius:.9rem;background:#fff;touch-action:manipulation}.homework-coordinate-plane svg[data-action="homework-graph-canvas"]{cursor:crosshair}.homework-graph-bg{fill:#fff}.homework-graph-grid line{stroke:rgba(74,93,135,.13);stroke-width:1}.homework-graph-axes line{stroke:rgba(26,39,70,.72);stroke-width:1.8}.homework-graph-labels text{fill:#667085;font-size:11px;font-family:inherit;pointer-events:none}.homework-graph-labels .axis-letter{fill:#17213a;font-size:14px;font-weight:800}.homework-graph-function{fill:none;stroke:#8d54c7;stroke-width:2.7;stroke-linejoin:round;stroke-linecap:round;pointer-events:none}.homework-graph-reference-line{fill:none;stroke:#d16d28;stroke-width:2.4;stroke-dasharray:7 5;stroke-linejoin:round;stroke-linecap:round;pointer-events:none}.homework-graph-student-line{fill:none;stroke:#365fbf;stroke-width:2.7;stroke-linejoin:round;stroke-linecap:round;pointer-events:none}.homework-graph-point{pointer-events:none}.homework-graph-point.is-reference circle{fill:#fff;stroke:#d16d28;stroke-width:3}.homework-graph-point.is-student circle{fill:#365fbf;stroke:#fff;stroke-width:2}.homework-graph-point text{fill:#244caa;font-size:11px;font-weight:900;paint-order:stroke;stroke:#fff;stroke-width:3px}.homework-graph-click-hint{color:var(--muted,#65718b);line-height:1.35}.homework-coordinate-plane.is-compact svg{max-height:430px}
.homework-student-graph-question{display:grid;gap:.7rem}.homework-student-graph-meta{display:flex;gap:.35rem;flex-wrap:wrap}.homework-student-graph-meta span{display:inline-flex;padding:.3rem .5rem;border-radius:999px;background:rgba(32,67,139,.065);font-size:.72rem;font-weight:800;color:var(--muted,#65718b)}.homework-student-graph-controls{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.8fr);gap:.65rem;align-items:stretch}.homework-graph-connect-setting.student{height:100%}.homework-student-graph-point-row{display:grid;grid-template-columns:2rem minmax(0,1fr) auto;gap:.5rem;align-items:center;padding:.45rem .5rem;border:1px solid rgba(32,67,139,.09);border-radius:.75rem;background:rgba(248,250,255,.72)}.homework-student-graph-point-row>b{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88rem}.homework-student-graph-point-row>div{display:flex;gap:.25rem}.homework-graph-clear{justify-self:start}.homework-graph-review{display:grid;gap:.55rem}.homework-graph-review-legend{display:flex;gap:.8rem;flex-wrap:wrap;font-size:.76rem;font-weight:800}.homework-graph-review-legend span{display:inline-flex;align-items:center;gap:.35rem}.homework-graph-review-legend span::before{content:"";width:.7rem;height:.7rem;border-radius:50%;background:#365fbf}.homework-graph-review-legend .is-reference::before{background:#d16d28}.homework-graph-review-copy{display:grid;gap:.2rem}.homework-graph-review-copy p{margin:.1rem 0}
@media (max-width:1000px){.homework-graph-key-grid{grid-template-columns:1fr}.homework-graph-settings-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.homework-student-graph-controls{grid-template-columns:1fr}}
@media (max-width:760px){.homework-graph-editor-intro{flex-direction:column}.homework-graph-badge{white-space:normal}.homework-graph-settings-grid{grid-template-columns:1fr 1fr}.homework-graph-add-point-box>div{grid-template-columns:1fr 1fr}.homework-graph-add-point-box .btn{grid-column:1/-1;width:100%}.homework-graph-point-row{grid-template-columns:1.8rem minmax(0,1fr) minmax(0,1fr);align-items:end}.homework-graph-point-row>span{width:1.8rem;height:1.8rem}.homework-graph-point-actions{grid-column:2/-1;justify-content:flex-end}.homework-coordinate-plane svg{border-radius:.7rem}.homework-graph-labels text{font-size:10px}.homework-student-graph-point-row{grid-template-columns:1.8rem minmax(0,1fr)}.homework-student-graph-point-row>div{grid-column:2;justify-content:flex-end}}

/* v1.23.13 — clearer admin homework builder */
.homework-builder-panel{overflow:visible;padding:1.15rem}.homework-builder-heading{margin-bottom:.85rem}.homework-builder-heading h3{font-size:1.35rem;margin:.1rem 0 .3rem}.homework-builder-progress{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;margin:0 0 1rem;padding:.55rem;border:1px solid rgba(32,67,139,.1);border-radius:1rem;background:rgba(248,250,255,.78)}.homework-builder-progress span{display:flex;align-items:center;justify-content:center;gap:.5rem;min-height:2.55rem;padding:.45rem .65rem;border-radius:.75rem;color:var(--muted,#65718b);font-size:.78rem;font-weight:800}.homework-builder-progress span b{display:grid;place-items:center;width:1.55rem;height:1.55rem;border-radius:50%;background:rgba(32,67,139,.08);color:#365fbf;font-size:.72rem}.homework-builder-progress span.is-active{background:#fff;color:var(--text,#17213a);box-shadow:0 3px 12px rgba(30,52,105,.07)}
.homework-builder-form{gap:1.15rem}.homework-builder-step{display:grid;gap:.9rem;padding:1rem;border:1px solid rgba(32,67,139,.11);border-radius:1.1rem;background:#fff}.homework-builder-step-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}.homework-editor-section-heading{display:flex;align-items:flex-start;gap:.7rem;min-width:0}.homework-editor-section-heading>span{display:grid;place-items:center;min-width:2rem;height:2rem;padding:0 .42rem;border-radius:.65rem;background:rgba(39,94,210,.09);color:#365fbf;font-size:.72rem;font-weight:900;white-space:nowrap}.homework-editor-section-heading>div{display:grid;gap:.14rem;min-width:0}.homework-editor-section-heading strong{font-size:.95rem}.homework-editor-section-heading small{color:var(--muted,#65718b);line-height:1.38}.homework-test-basics{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}.homework-test-basics label,.homework-question-settings label{display:grid;gap:.32rem}.homework-test-basics label>small,.homework-question-settings label>small{color:var(--muted,#65718b);font-size:.75rem;line-height:1.35}
.homework-builder-tools{display:grid;gap:.55rem;padding:.8rem .9rem;border:1px dashed rgba(39,94,210,.2);border-radius:1rem;background:rgba(39,94,210,.025)}.homework-builder-tools>div:first-child{display:grid;gap:.12rem}.homework-builder-tools>div:first-child small{color:var(--muted,#65718b)}.homework-builder-tools>.homework-math-symbols{margin:0}.homework-question-type-picker{display:grid;gap:.55rem;padding:.8rem;border-radius:.95rem;background:rgba(248,250,255,.9);border:1px solid rgba(32,67,139,.09)}.homework-question-type-picker>small{color:var(--muted,#65718b)}.homework-add-question-group{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.55rem}.homework-question-type-button{display:grid;gap:.16rem;min-height:4.2rem;padding:.72rem .8rem;text-align:left;border:1px solid rgba(32,67,139,.13);border-radius:.85rem;background:#fff;color:var(--text,#17213a);font:inherit;cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease}.homework-question-type-button strong{font-size:.82rem}.homework-question-type-button small{color:var(--muted,#65718b);font-size:.7rem;line-height:1.3}.homework-question-type-button:hover{border-color:rgba(39,94,210,.42);box-shadow:0 6px 18px rgba(39,94,210,.08);transform:translateY(-1px)}.homework-question-type-button:active{transform:translateY(0)}.homework-add-another-question{display:grid;gap:.5rem;padding-top:.25rem}.homework-add-another-question>span{font-size:.78rem;font-weight:800;color:var(--muted,#65718b)}
.homework-question-editor-list{gap:1rem}.homework-question-editor{padding:0;border:1px solid rgba(32,67,139,.14);border-radius:1.15rem;background:#fff;overflow:hidden;box-shadow:0 5px 18px rgba(30,52,105,.045)}.homework-question-editor.is-graph-question{overflow:visible}.homework-question-editor-head{margin:0;padding:.82rem .9rem;border-bottom:1px solid rgba(32,67,139,.09);background:rgba(248,250,255,.9);align-items:center}.homework-question-identity{display:flex!important;grid-template-columns:none!important;align-items:center;gap:.7rem}.homework-question-identity>div{display:grid;gap:.05rem}.homework-question-identity>div>span{font-size:.68rem}.homework-question-identity>div>strong{font-size:.92rem}.homework-question-identity>div>small{color:var(--muted,#65718b);font-size:.72rem;line-height:1.3}.homework-question-number{display:grid!important;place-items:center;width:2.25rem;height:2.25rem;border-radius:.78rem;background:#365fbf!important;color:#fff!important;font-size:.9rem!important;letter-spacing:0!important;flex-shrink:0}.homework-question-head-actions{display:flex;align-items:center;gap:.45rem;flex-shrink:0}.homework-question-points-pill{display:inline-flex;align-items:center;padding:.32rem .55rem;border-radius:999px;background:rgba(35,132,90,.09);color:#168052;font-size:.72rem;font-weight:800;white-space:nowrap}.homework-question-block{display:grid;gap:.72rem;padding:.9rem}.homework-question-block+.homework-question-block{border-top:1px solid rgba(32,67,139,.08)}.homework-question-block.is-settings{background:rgba(248,250,255,.5)}.homework-question-block.is-answer-key{background:rgba(35,132,90,.018)}.homework-field-label{display:grid;gap:.35rem;font-weight:700}.homework-field-label textarea{min-height:5.2rem}.homework-question-settings{grid-template-columns:minmax(0,1.35fr) minmax(160px,.65fr);margin:0}.homework-answer-key-panel{padding:.8rem;border:1px solid rgba(35,132,90,.13);border-radius:.9rem;background:#fff}.homework-short-answer-key.homework-answer-key-panel{gap:.42rem}.homework-option-list-head>div{display:grid;gap:.1rem}.homework-option-list-head>div small{color:var(--muted,#65718b)}.homework-option-list-head>span{display:inline-flex;padding:.28rem .5rem;border-radius:999px;background:rgba(35,132,90,.08);color:#168052;font-size:.7rem;font-weight:800;white-space:nowrap}.homework-option-editor{padding:.48rem;border:1px solid rgba(32,67,139,.08);border-radius:.8rem;background:rgba(248,250,255,.55)}.homework-option-field{display:grid;gap:.18rem;min-width:0}.homework-option-field>span{font-size:.68rem;font-weight:800;color:var(--muted,#65718b)}.homework-option-field input{width:100%;background:#fff}.homework-add-option{justify-self:start;margin-top:.1rem}
.homework-builder-save-step{border-color:rgba(35,132,90,.16);background:rgba(35,132,90,.025)}.homework-builder-save-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}.homework-builder-save-summary>div{display:grid;gap:.15rem;padding:.7rem .8rem;border:1px solid rgba(35,132,90,.11);border-radius:.85rem;background:#fff}.homework-builder-save-summary span{font-size:.7rem;font-weight:800;color:var(--muted,#65718b)}.homework-builder-save-summary strong{font-size:1rem}.homework-builder-actions{padding:.1rem 0 0;align-items:center}.homework-builder-actions p{margin:0;max-width:650px;color:var(--muted,#65718b);font-size:.78rem;line-height:1.45}.homework-builder-actions .btn-primary{min-width:180px}.homework-builder-questions-step .homework-builder-summary{justify-content:flex-end}
@media (max-width:1000px){.homework-add-question-group{grid-template-columns:repeat(2,minmax(0,1fr))}.homework-test-basics{grid-template-columns:1fr}.homework-builder-step-head{flex-direction:column}.homework-builder-questions-step .homework-builder-summary{justify-content:flex-start}}
@media (max-width:760px){.homework-builder-panel{padding:.8rem}.homework-builder-progress{grid-template-columns:1fr;padding:.4rem}.homework-builder-progress span{justify-content:flex-start;min-height:2.2rem}.homework-builder-progress span:not(.is-active){display:none}.homework-builder-step{padding:.78rem;border-radius:.95rem}.homework-editor-section-heading>span{min-width:1.8rem;height:1.8rem}.homework-add-question-group{grid-template-columns:1fr 1fr;gap:.4rem}.homework-question-type-button{min-height:3.9rem;padding:.62rem}.homework-question-editor-head{align-items:flex-start;flex-direction:column}.homework-question-head-actions{width:100%;justify-content:space-between}.homework-question-identity{width:100%}.homework-question-block{padding:.78rem}.homework-question-settings{grid-template-columns:1fr}.homework-option-editor{grid-template-columns:auto minmax(0,1fr) auto;gap:.4rem}.homework-builder-save-summary{grid-template-columns:1fr}.homework-builder-actions{flex-direction:column;align-items:stretch}.homework-builder-actions .btn-primary{width:100%}.homework-builder-tools{padding:.7rem}.homework-builder-tools>.homework-math-symbols{position:sticky;top:calc(var(--app-header-height,0px) + .35rem);z-index:5}.homework-option-list-head>span{white-space:normal}.homework-question-points-pill{font-size:.68rem}}
@media (max-width:430px){.homework-add-question-group{grid-template-columns:1fr}.homework-question-type-button{min-height:auto}.homework-question-number{width:2rem;height:2rem}.homework-question-identity>div>small{font-size:.68rem}}

/* v1.23.16 — admin workflow clarity: bookings, students, chat inbox, savings goals */
.admin-page-kicker,
.admin-section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
  color: #51647f;
  font-size: .64rem;
  font-weight: 850;
  letter-spacing: .075em;
  text-transform: uppercase;
}

/* Admin bookings — chronological card workflow */
.admin-bookings-page { display: grid; gap: 18px; }
.admin-bookings-heading { margin-bottom: 0; }
.admin-booking-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.admin-booking-summary > div {
  min-width: 0;
  padding: 15px 16px;
  display: grid;
  gap: 3px;
  border: 1px solid #e1e7ef;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(20,32,57,.035);
}
.admin-booking-summary small { color: #738096; font-size: .64rem; font-weight: 760; }
.admin-booking-summary strong { color: #162239; font-size: 1.4rem; line-height: 1.1; }
.admin-booking-summary span { color: #8a95a7; font-size: .62rem; line-height: 1.35; }
.admin-booking-filter-shell { display: block; padding: 15px; }
.admin-booking-filter-primary {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) 190px auto;
  gap: 10px;
  align-items: end;
}
.admin-booking-filter-statuses { display: grid; gap: 10px; margin-top: 14px; }
.admin-booking-filter-shell .booking-status-filter-group { padding-top: 12px; }
.admin-booking-section { display: grid; gap: 11px; }
.admin-booking-section.completed-bookings-section { margin-top: 8px; padding-top: 24px; }
.admin-booking-list { display: grid; gap: 10px; }
.admin-booking-card {
  display: grid;
  grid-template-columns: 124px minmax(0, 1fr) minmax(205px, 235px);
  gap: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 15px;
  border-color: #dfe5ed;
  box-shadow: 0 4px 18px rgba(23,36,61,.035);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.admin-booking-card:hover {
  border-color: #cfd8e6;
  box-shadow: 0 9px 28px rgba(23,36,61,.065);
  transform: translateY(-1px);
}
.admin-booking-card.is-history { background: #fbfcfe; }
.admin-booking-date-block {
  padding: 17px 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  border-right: 1px solid #e6eaf0;
  background: #f6f8fb;
  font-variant-numeric: tabular-nums;
}
.admin-booking-card.is-upcoming .admin-booking-date-block { background: #f4f7ff; }
.admin-booking-date { color: #52617a; font-size: .68rem; font-weight: 800; }
.admin-booking-date-block strong { color: #18243a; font-size: .98rem; }
.admin-booking-date-block small { color: #8792a4; font-size: .62rem; }
.admin-booking-main { min-width: 0; padding: 15px 17px; display: grid; gap: 11px; }
.admin-booking-student-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.admin-booking-student { min-width: 0; display: flex; align-items: center; gap: 10px; }
.admin-booking-student > span { min-width: 0; display: grid; gap: 2px; }
.admin-booking-student strong { overflow: hidden; color: #17243b; font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }
.admin-booking-student small { overflow: hidden; color: #7a869a; font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; }
.admin-booking-lesson {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: end;
  padding-top: 10px;
  border-top: 1px solid #edf0f4;
}
.admin-booking-lesson > div:first-child { min-width: 0; display: grid; gap: 3px; }
.admin-booking-label { color: #8a94a5; font-size: .58rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.admin-booking-lesson strong { color: #27354c; font-size: .75rem; }
.admin-booking-lesson small { color: #737f91; font-size: .64rem; }
.admin-booking-lesson p { margin: 4px 0 0; color: #68758a; font-size: .65rem; line-height: 1.45; overflow-wrap: anywhere; }
.admin-booking-meet { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.admin-booking-meet .sync-button { margin-top: 0; font-size: .61rem; }
.admin-booking-attendance { padding: 8px 10px; border-radius: 9px; background: #f7f9fc; color: #627088; font-size: .62rem; line-height: 1.4; }
.admin-booking-controls {
  padding: 14px;
  display: grid;
  align-content: center;
  gap: 9px;
  border-left: 1px solid #e6eaf0;
  background: #fafbfd;
}
.admin-booking-controls label { display: grid; gap: 4px; }
.admin-booking-controls label > span,
.admin-booking-money > span { color: #7a8698; font-size: .6rem; font-weight: 760; }
.admin-booking-controls .compact-select { width: 100%; min-width: 0; }
.admin-booking-money { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: baseline; padding-bottom: 8px; border-bottom: 1px solid #e8ecf2; }
.admin-booking-money strong { color: #17243a; font-size: .9rem; }
.admin-booking-money small { grid-column: 1 / -1; color: #8893a4; font-size: .59rem; }
.admin-booking-empty { margin: 0; padding: 26px 18px; }

/* Students & terms — structured, resilient cards */
.students-admin-page { display: grid; gap: 16px; }
.students-admin-heading { margin-bottom: 0; }
.student-terms-grid { gap: 14px; }
.student-terms-card { padding: 0; overflow: hidden; border-radius: 15px; }
.student-terms-header {
  padding: 16px 17px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid #e8ecf1;
  background: #fff;
}
.student-terms-identity { min-width: 0; }
.student-terms-identity > span { min-width: 0; display: grid; gap: 2px; }
.student-terms-identity > span > strong { font-size: .84rem; }
.student-terms-identity > span > small { color: #7b8798; font-size: .62rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.student-terms-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.student-terms-badges span { padding: 3px 7px; border-radius: 999px; background: #f0f3f7; color: #65728a; font-size: .55rem; font-weight: 730; }
.student-mini-stats {
  margin: 0;
  padding: 12px 17px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 8px;
  border-bottom: 1px solid #e8ecf1;
  background: #f9fafc;
}
.student-mini-stats span { min-width: 0; padding: 9px 11px; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; border: 1px solid #e7ebf1; background: #fff; }
.student-mini-stats small { order: -1; color: #7f8a9b; font-size: .59rem; }
.student-mini-stats strong { font-size: .78rem; overflow-wrap: anywhere; }
.student-mini-stats span.is-due { border-color: #f1d8d4; background: #fff9f8; }
.student-mini-stats span.is-due strong { color: #9b3a30; }
.student-mini-stats span.is-ok strong { color: #36705a; }
.student-terms-form { padding: 15px 17px 17px; grid-template-columns: 1fr 1fr; gap: 12px; }
.student-terms-section {
  display: grid;
  gap: 11px;
  padding: 13px;
  border: 1px solid #e2e7ee;
  border-radius: 12px;
  background: #fbfcfe;
}
.student-terms-section-title { display: flex; align-items: flex-start; gap: 9px; }
.student-terms-section-title > span { width: 28px; height: 28px; flex: 0 0 28px; display: grid; place-items: center; border-radius: 8px; background: #edf2ff; color: #3d5cc4; font-size: .57rem; font-weight: 900; }
.student-terms-section-title > div { display: grid; gap: 2px; }
.student-terms-section-title strong { color: #243149; font-size: .72rem; }
.student-terms-section-title small { color: #818c9e; font-size: .59rem; line-height: 1.35; }
.student-rate-grid { display: grid; grid-template-columns: 1.15fr 1fr .72fr; gap: 9px; }
.student-rate-grid label,
.student-meet-field { min-width: 0; }
.student-rate-grid label > small,
.student-meet-field > small { color: #8a95a5; font-size: .56rem; }
.student-lesson-estimate {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 7px 10px;
  align-items: baseline;
  padding: 9px 11px;
  border-radius: 10px;
  background: #eef3ff;
}
.student-lesson-estimate > span { color: #566b91; font-size: .59rem; font-weight: 770; }
.student-lesson-estimate > strong { color: #294eae; font-size: .9rem; }
.student-lesson-estimate > small { color: #71809a; font-size: .56rem; text-align: right; }
.student-meet-field { display: grid; gap: 6px; }
.student-terms-form .form-help { padding: 9px 11px; border-radius: 10px; background: #f7f8fa; }
.student-terms-actions { justify-content: flex-end; }

/* Admin chat — professional inbox ordered by latest conversation activity */
.admin-chat-professional.chat-layout-admin { grid-template-columns: 340px minmax(0, 1fr); gap: 14px; }
.admin-chat-professional .chat-students { border-color: #dfe5ed; background: #fff; }
.admin-chat-professional .chat-students-title { min-height: 84px; padding: 15px 15px 12px; align-items: flex-start; }
.admin-chat-professional .chat-students-title > div { gap: 1px; }
.chat-inbox-kicker { color: #758197; font-size: .56rem; font-weight: 820; letter-spacing: .08em; text-transform: uppercase; }
.admin-chat-professional .chat-students-title strong { color: #18253b; font-size: 1rem; }
.admin-chat-professional .chat-students-title small { color: #8994a5; font-size: .59rem; }
.chat-inbox-unread-total { flex: 0 0 auto; margin-top: 2px; padding: 4px 7px; border-radius: 999px; background: #f1f3f6; color: #7c8798; font-size: .54rem; font-weight: 800; }
.chat-inbox-unread-total.has-unread { background: #e9efff; color: #3657bd; }
.admin-chat-professional .chat-search { padding: 9px 11px; }
.admin-chat-professional .chat-student-list { height: calc(100% - 143px); padding: 4px 6px 8px; }
.admin-chat-professional .chat-student {
  min-height: 70px;
  padding: 9px 8px;
  gap: 10px;
  border-radius: 11px;
  border-bottom: 1px solid #eef1f5;
}
.admin-chat-professional .chat-student:last-child { border-bottom-color: transparent; }
.admin-chat-professional .chat-student:hover { background: #f6f8fb; }
.admin-chat-professional .chat-student.is-active { background: #edf2ff; }
.admin-chat-professional .chat-student.has-unread { background: #f8faff; }
.admin-chat-professional .chat-student.has-unread.is-active { background: #eaf0ff; }
.admin-chat-professional .chat-student .avatar.small { width: 42px; height: 42px; flex: 0 0 42px; }
.chat-student-copy { min-width: 0; display: grid; gap: 2px; }
.chat-student-name-row { min-width: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.chat-student-name-row strong { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-student-name-row time { flex: 0 0 auto; color: #8e99a9; font-size: .54rem; font-weight: 700; }
.admin-chat-professional .chat-student-copy > small { color: #778397; font-size: .59rem; }
.admin-chat-professional .chat-student.has-unread .chat-student-copy > small { color: #3e5eae; font-weight: 760; }
.chat-student-owner { overflow: hidden; color: #9aa3b1; font-size: .53rem; text-overflow: ellipsis; white-space: nowrap; }
.chat-list-unread-badge {
  flex: 0 0 auto;
  padding: 4px 7px;
  border-radius: 999px;
  background: #3f63cf;
  color: #fff;
  font-size: .51rem;
  font-weight: 880;
  box-shadow: 0 0 0 3px rgba(63,99,207,.08);
  animation: chatUnreadPulse 1.55s ease-in-out infinite;
}
@keyframes chatUnreadPulse {
  0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 3px rgba(63,99,207,.08); }
  50% { opacity: .72; transform: scale(.97); box-shadow: 0 0 0 5px rgba(63,99,207,.035); }
}
.admin-chat-professional .chat-window { border-color: #dfe5ed; }
.admin-chat-professional .chat-header { border-bottom-color: #e5e9ef; }
.admin-chat-professional .chat-messages-shell { background: #eef2f6; }

/* Savings goals — restored hierarchy and stable cards */
.savings-goals-page { display: grid; gap: 16px; }
.savings-goals-heading { margin-bottom: 0; }
.goals-tax-gate.savings-overview-card { display: grid; grid-template-columns: minmax(230px,.8fr) minmax(0,2fr); gap: 18px; margin: 0; padding: 18px; }
.savings-overview-title { display: flex; flex-direction: column; justify-content: center; padding: 3px 4px; }
.savings-overview-title strong { color: #1b2941; font-size: .91rem; }
.savings-overview-title small { margin-top: 5px; color: #7d899b; font-size: .62rem; line-height: 1.45; }
.savings-overview-metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.savings-overview-metrics > div { min-width: 0; padding: 12px 13px; display: grid; gap: 3px; border: 1px solid #e3e8ef; border-radius: 11px; background: #fafbfe; }
.savings-overview-metrics > div.is-accent { border-color: #d3def8; background: #f2f5ff; }
.savings-overview-metrics small { color: #7a8698; font-size: .58rem; }
.savings-overview-metrics strong { color: #1a2740; font-size: .9rem; overflow-wrap: anywhere; }
.savings-overview-metrics span { color: #939dac; font-size: .54rem; }
.savings-goals-layout { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(230px,.65fr); gap: 12px; align-items: stretch; }
.savings-create-card { margin: 0; padding: 16px; }
.savings-create-heading { display: flex; gap: 10px; align-items: center; padding-bottom: 11px; border-bottom: 1px solid #e7ebf1; }
.savings-create-heading > span { width: 35px; height: 35px; flex: 0 0 35px; display: grid; place-items: center; border-radius: 10px; background: #edf2ff; color: #3b5bc2; font-size: 1.05rem; }
.savings-create-heading > div { display: grid; gap: 2px; }
.savings-create-heading strong { font-size: .78rem; }
.savings-create-heading small { color: #7e899b; font-size: .59rem; line-height: 1.4; }
.savings-total-card { padding: 17px; display: flex; flex-direction: column; justify-content: center; }
.savings-total-card > strong { color: #1a2840; font-size: 1.45rem; }
.savings-total-card p { margin: 3px 0 10px; color: #7d899a; font-size: .62rem; line-height: 1.45; }
.savings-total-card > small:last-child { margin-top: 7px; color: #7b8798; font-size: .58rem; }
.savings-goals-list { display: grid; gap: 10px; }
.savings-goal-card {
  position: relative;
  padding: 0;
  display: grid;
  grid-template-columns: 54px minmax(0,1fr);
  overflow: hidden;
  border-radius: 14px;
}
.savings-goal-card.is-complete { border-color: #d7e8df; }
.savings-goal-order { display: grid; place-items: start center; padding-top: 18px; border-right: 1px solid #e6eaf0; background: #f7f9fc; color: #8994a5; font-size: .66rem; font-weight: 900; }
.savings-goal-card.is-complete .savings-goal-order { background: #f2faf5; color: #548269; }
.savings-goal-content { min-width: 0; padding: 16px; }
.savings-goal-head { gap: 15px; }
.savings-goal-head h3 { margin-top: 6px; color: #19263d; font-size: .92rem; }
.savings-goal-head p { margin-top: 4px; color: #7d899a; font-size: .62rem; line-height: 1.45; }
.goal-finance-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-top: 13px; }
.goal-finance-grid > div { min-width: 0; padding: 9px 10px; display: grid; gap: 3px; border-radius: 10px; background: #f7f9fc; }
.goal-finance-grid small { color: #818c9d; font-size: .56rem; }
.goal-finance-grid strong { color: #28364d; font-size: .72rem; overflow-wrap: anywhere; }
.goal-progress-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; align-items: center; margin-top: 11px; }
.goal-progress-row .goal-progress { margin: 0; }
.goal-progress-row > strong { min-width: 36px; color: #52617a; font-size: .62rem; text-align: right; }
.goal-edit-form { margin-top: 14px; }

@media (max-width: 1100px) {
  .admin-booking-summary { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .admin-booking-card { grid-template-columns: 112px minmax(0,1fr); }
  .admin-booking-controls { grid-column: 1 / -1; grid-template-columns: minmax(130px,.7fr) 1fr 1fr; border-left: 0; border-top: 1px solid #e6eaf0; }
  .admin-booking-money { border-bottom: 0; padding: 4px 10px 4px 0; border-right: 1px solid #e8ecf2; }
  .admin-chat-professional.chat-layout-admin { grid-template-columns: 300px minmax(0,1fr); }
  .student-rate-grid { grid-template-columns: 1fr 1fr; }
  .student-rate-grid label:last-child { grid-column: 1 / -1; }
  .goals-tax-gate.savings-overview-card { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .admin-booking-summary { grid-template-columns: 1fr 1fr; gap: 7px; }
  .admin-booking-summary > div { padding: 11px 12px; }
  .admin-booking-summary strong { font-size: 1.05rem; }
  .admin-booking-filter-primary { grid-template-columns: 1fr; }
  .admin-booking-card { grid-template-columns: 1fr; }
  .admin-booking-date-block { padding: 11px 13px; flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 8px; border-right: 0; border-bottom: 1px solid #e6eaf0; }
  .admin-booking-date-block small { margin-left: auto; }
  .admin-booking-main { padding: 12px 13px; }
  .admin-booking-student-row { align-items: center; }
  .admin-booking-student small { white-space: normal; }
  .admin-booking-lesson { grid-template-columns: 1fr; align-items: start; }
  .admin-booking-meet { align-items: stretch; }
  .admin-booking-meet .btn { width: 100%; }
  .admin-booking-controls { grid-column: auto; grid-template-columns: 1fr; padding: 12px 13px; }
  .admin-booking-money { border-right: 0; border-bottom: 1px solid #e8ecf2; padding: 0 0 8px; }

  .student-terms-header { align-items: flex-start; flex-direction: column; }
  .student-terms-header > .btn { width: 100%; }
  .student-mini-stats { grid-template-columns: 1fr; padding: 10px 12px; }
  .student-terms-form { padding: 12px; }
  .student-rate-grid { grid-template-columns: 1fr; }
  .student-rate-grid label:last-child { grid-column: auto; }
  .student-lesson-estimate { grid-template-columns: 1fr auto; }
  .student-lesson-estimate > small { grid-column: 1 / -1; text-align: left; }
  .student-terms-actions .btn { width: 100%; }

  .chat-list-unread-badge { padding: 4px 6px; font-size: .49rem; }
  .admin-chat-professional .chat-student { min-height: 68px; }
  .admin-chat-professional .chat-student-list { height: auto; }

  .savings-overview-metrics { grid-template-columns: 1fr; }
  .savings-goals-layout { grid-template-columns: 1fr; }
  .savings-goal-card { grid-template-columns: 40px minmax(0,1fr); }
  .savings-goal-order { padding-top: 17px; }
  .savings-goal-content { padding: 13px; }
  .savings-goal-head { flex-direction: column; }
  .goal-actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .goal-actions .btn { width: 100%; }
  .goal-finance-grid { grid-template-columns: 1fr; }
}

@media (max-width: 430px) {
  .admin-booking-summary { grid-template-columns: 1fr; }
  .student-terms-section { padding: 11px; }
  .goal-actions { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .chat-list-unread-badge { animation: none; }
}

/* Booking creation form — same fields, clearer visual entry point */
.admin-bookings-page .admin-manual-booking-form {
  margin: 0;
  padding: 18px;
  border-color: #d7e0f0;
  background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
  box-shadow: 0 8px 26px rgba(28,43,73,.055);
}
.admin-bookings-page .admin-manual-booking-form .form-section-title {
  margin: -2px 0 2px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e7ebf1;
}
.admin-bookings-page .admin-manual-booking-form .form-section-title strong { font-size: .86rem; }
.admin-bookings-page .admin-manual-booking-form .form-section-title span { max-width: 760px; color: #7a879a; font-size: .62rem; line-height: 1.45; }
.admin-bookings-page .admin-manual-booking-form label { min-width: 0; }
.admin-bookings-page .admin-manual-booking-form input,
.admin-bookings-page .admin-manual-booking-form select,
.admin-bookings-page .admin-manual-booking-form textarea { background: #fff; }
.admin-bookings-page .admin-manual-booking-form .form-actions { padding-top: 4px; border-top: 1px solid #edf0f4; }

/* v1.23.17 — Theme Engine: seasonal palettes, admin controls and lightweight decorative layers */
body[data-site-theme] {
  transition: background-color .28s ease, color .28s ease;
}

body[data-site-theme="autumn"] {
  --bg: #fbf5ec; --surface: #fffdf9; --surface-soft: #f6ead9; --ink: #34251c; --muted: #735f51; --line: #ead9c5;
  --primary: #a95525; --primary-dark: #824019; --primary-soft: #f7e2d2; --accent: #df9138; --accent-soft: #fff0d7;
  --navy: #4b2e1f; --navy-2: #6b4027; --theme-header: rgba(255, 252, 246, .94); --theme-shell: linear-gradient(135deg, #4b2e1f, #8a4c26); --theme-home: linear-gradient(180deg, #fffaf2 0%, #f6ead8 100%); --theme-soft: #f6eadc; --theme-banner: #7e451f; --theme-banner-ink: #fff8ed;
}
body[data-site-theme="halloween"] {
  --bg: #f4f0f6; --surface: #fffafe; --surface-soft: #eee6f2; --ink: #2d2431; --muted: #716377; --line: #dfd2e5;
  --primary: #6f3f95; --primary-dark: #553071; --primary-soft: #eee0f7; --accent: #ed8b2c; --accent-soft: #fff0de;
  --navy: #26172f; --navy-2: #43214d; --theme-header: rgba(252, 248, 253, .94); --theme-shell: linear-gradient(135deg, #21152a, #57245f 62%, #7c4322); --theme-home: radial-gradient(circle at 82% 12%, rgba(237,139,44,.22), transparent 26%), linear-gradient(145deg, #21152a, #3b2048 60%, #512938); --theme-soft: #eee7f2; --theme-banner: #2b1735; --theme-banner-ink: #ffe8c8;
}
body[data-site-theme="winter"] {
  --bg: #f3f8fc; --surface: #ffffff; --surface-soft: #eaf3f9; --ink: #203247; --muted: #62788e; --line: #d7e5ef;
  --primary: #4779aa; --primary-dark: #315f8d; --primary-soft: #e1eef8; --accent: #73b9d8; --accent-soft: #e6f6fd;
  --navy: #274661; --navy-2: #3b6788; --theme-header: rgba(248, 252, 255, .95); --theme-shell: linear-gradient(135deg, #284b68, #5b85a6); --theme-home: linear-gradient(180deg, #fbfdff 0%, #eaf4fb 100%); --theme-soft: #e7f1f8; --theme-banner: #3b6384; --theme-banner-ink: #f5fbff;
}
body[data-site-theme="newyear"] {
  --bg: #f7f8f3; --surface: #fffef9; --surface-soft: #edf4ee; --ink: #253128; --muted: #657268; --line: #dce6dc;
  --primary: #236c55; --primary-dark: #184c3c; --primary-soft: #e0f0e9; --accent: #c94452; --accent-soft: #fae6e8;
  --navy: #173e34; --navy-2: #245a49; --theme-header: rgba(253, 254, 249, .95); --theme-shell: linear-gradient(135deg, #173f35, #2f7358 64%, #8d3340); --theme-home: radial-gradient(circle at 84% 15%, rgba(201,68,82,.09), transparent 28%), linear-gradient(180deg, #fffdf7 0%, #eef5ef 100%); --theme-soft: #edf4ee; --theme-banner: #1f5945; --theme-banner-ink: #fff8e9;
}
body[data-site-theme="spring"] {
  --bg: #f5faf5; --surface: #fffefd; --surface-soft: #eaf5eb; --ink: #26342a; --muted: #66766a; --line: #dbe9dc;
  --primary: #4b9269; --primary-dark: #34724f; --primary-soft: #e1f2e7; --accent: #de91aa; --accent-soft: #fdeaf0;
  --navy: #315b45; --navy-2: #4d7d62; --theme-header: rgba(252, 255, 252, .95); --theme-shell: linear-gradient(135deg, #315b45, #659a75 70%, #b86f8a); --theme-home: radial-gradient(circle at 85% 8%, rgba(222,145,170,.18), transparent 24%), linear-gradient(180deg, #fffefd 0%, #edf8ee 100%); --theme-soft: #eaf5eb; --theme-banner: #4e8663; --theme-banner-ink: #fbfff9;
}
body[data-site-theme="easter"] {
  --bg: #fbf7fc; --surface: #fffefd; --surface-soft: #f2eaf6; --ink: #342d3b; --muted: #746a79; --line: #e7dcec;
  --primary: #8d70b0; --primary-dark: #6e5590; --primary-soft: #eee5f6; --accent: #e7a8bd; --accent-soft: #fcecf2;
  --navy: #4d4162; --navy-2: #75658f; --theme-header: rgba(255, 252, 255, .95); --theme-shell: linear-gradient(135deg, #544566, #8d75a6 66%, #d19aad); --theme-home: radial-gradient(circle at 84% 10%, rgba(231,168,189,.2), transparent 26%), linear-gradient(180deg, #fffdf9 0%, #f5edf8 100%); --theme-soft: #f2ebf4; --theme-banner: #786394; --theme-banner-ink: #fffaf0;
}
body[data-site-theme="summer"] {
  --bg: #f2faf9; --surface: #fffefa; --surface-soft: #e5f4f1; --ink: #203538; --muted: #60787b; --line: #d2e8e5;
  --primary: #218698; --primary-dark: #176776; --primary-soft: #dcf2f5; --accent: #eeb749; --accent-soft: #fff2ce;
  --navy: #22545c; --navy-2: #317987; --theme-header: rgba(250, 255, 254, .95); --theme-shell: linear-gradient(135deg, #205762, #338c99 66%, #cb9b36); --theme-home: radial-gradient(circle at 85% 10%, rgba(238,183,73,.18), transparent 26%), linear-gradient(180deg, #fffef8 0%, #e9f8f5 100%); --theme-soft: #e5f4f1; --theme-banner: #247684; --theme-banner-ink: #fffceb;
}

body[data-site-theme]:not([data-site-theme="default"]) .site-header { background: var(--theme-header); border-bottom-color: var(--line); }
body[data-site-theme]:not([data-site-theme="default"]) .hero { background: var(--theme-home); }
body[data-site-theme]:not([data-site-theme="default"]) .soft-section { background: var(--theme-soft); }
body[data-site-theme]:not([data-site-theme="default"]) .trust-strip { background: var(--surface); border-color: var(--line); }
body[data-site-theme]:not([data-site-theme="default"]) .dashboard-hero,
body[data-site-theme]:not([data-site-theme="default"]) .admin-topbar { background: var(--theme-shell); }
body[data-site-theme]:not([data-site-theme="default"]) .math-board { background: var(--theme-shell); }
body[data-site-theme]:not([data-site-theme="default"]) .site-footer { background: linear-gradient(180deg, var(--navy), color-mix(in srgb, var(--navy) 82%, #000)); }
body[data-site-theme]:not([data-site-theme="default"]) .brand-mark { background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 55%, var(--accent))); box-shadow: 0 9px 24px color-mix(in srgb, var(--primary) 28%, transparent); }
body[data-site-theme]:not([data-site-theme="default"]) .brand-mark.has-image {
  background: transparent;
  box-shadow: none;
}
body[data-site-theme]:not([data-site-theme="default"]) .card,
body[data-site-theme]:not([data-site-theme="default"]) .feature-card { border-color: var(--line); }
body[data-site-theme="halloween"] .hero { color: #fff9ff; }
body[data-site-theme="halloween"] .hero .hero-lead,
body[data-site-theme="halloween"] .hero .hero-note,
body[data-site-theme="halloween"] .hero .hero-metrics span { color: #d9c9df; }
body[data-site-theme="halloween"] .hero .hero-metrics { border-top-color: rgba(255,255,255,.14); }
body[data-site-theme="halloween"] .hero .eyebrow { color: #ffad58; }
body[data-site-theme="halloween"] .hero .btn-secondary { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.2); }
body[data-site-theme="halloween"] .hero .btn-secondary:hover { background: rgba(255,255,255,.16); }

.seasonal-theme-banner { position: relative; z-index: 18; background: var(--theme-banner, var(--navy)); color: var(--theme-banner-ink, #fff); border-bottom: 1px solid rgba(255,255,255,.12); }
.seasonal-theme-banner-inner { min-height: 42px; display: flex; align-items: center; justify-content: center; gap: 10px; text-align: center; font-size: .82rem; font-weight: 760; letter-spacing: .005em; }
.seasonal-theme-banner-emoji { font-size: 1rem; filter: drop-shadow(0 3px 8px rgba(0,0,0,.18)); }

.theme-effects-layer { position: fixed; inset: 0; z-index: 12; overflow: hidden; pointer-events: none; contain: layout paint style; }
.theme-particle { position: absolute; left: var(--theme-x); top: -9vh; display: block; opacity: .42; font-size: calc(14px * var(--theme-scale)); line-height: 1; filter: drop-shadow(0 3px 7px rgba(27,27,35,.1)); will-change: transform; animation: themeParticleFall var(--theme-duration) linear var(--theme-delay) infinite; }
.theme-corner-ornament { position: absolute; opacity: .78; font-size: clamp(28px, 4vw, 54px); filter: drop-shadow(0 8px 18px rgba(0,0,0,.14)); }
.theme-corner-ornament-1 { left: 16px; bottom: 74px; transform: rotate(-10deg); }
.theme-corner-ornament-2 { right: 18px; top: 112px; transform: rotate(11deg); }
body[data-theme-intensity="minimal"] .theme-corner-ornament { opacity: .55; font-size: clamp(24px, 3vw, 40px); }
body[data-theme-intensity="maximum"] .theme-corner-ornament { opacity: .9; }

.theme-ghost { position: absolute; width: 48px; height: 58px; border-radius: 27px 27px 14px 14px; background: rgba(255,255,255,.72); box-shadow: 0 10px 30px rgba(29,12,38,.16); opacity: .58; animation: themeGhostFloat 8s ease-in-out infinite; }
.theme-ghost::before,
.theme-ghost::after { content: ""; position: absolute; top: 21px; width: 5px; height: 7px; border-radius: 50%; background: #4a3154; }
.theme-ghost::before { left: 14px; }
.theme-ghost::after { right: 14px; }
.theme-ghost i { position: absolute; left: 0; right: 0; bottom: -7px; height: 18px; background: radial-gradient(circle at 8px 0, transparent 8px, rgba(255,255,255,.72) 8.5px) 0 0/16px 16px repeat-x; }
.theme-ghost b { position: absolute; left: 50%; top: 35px; width: 9px; height: 4px; border: 2px solid #4a3154; border-top: 0; border-radius: 0 0 8px 8px; transform: translateX(-50%); }
.theme-ghost-one { left: 7vw; top: 28vh; }
.theme-ghost-two { right: 9vw; top: 58vh; width: 38px; height: 47px; animation-delay: -3.2s; opacity: .42; }

.theme-festive-lights { position: absolute; top: 3px; left: 4%; right: 4%; height: 26px; border-top: 2px solid rgba(23,64,52,.35); border-radius: 50%; display: flex; justify-content: space-around; }
.theme-festive-lights i { width: 8px; height: 11px; margin-top: -2px; border-radius: 50% 50% 45% 45%; background: #e6b841; box-shadow: 0 0 12px rgba(230,184,65,.7); animation: themeLightTwinkle 1.9s ease-in-out infinite alternate; }
.theme-festive-lights i:nth-child(3n+2) { background: #c94452; box-shadow: 0 0 12px rgba(201,68,82,.55); animation-delay: -.7s; }
.theme-festive-lights i:nth-child(3n) { background: #52a888; box-shadow: 0 0 12px rgba(82,168,136,.55); animation-delay: -1.2s; }

body[data-theme-motion="off"] .theme-particle { animation: none; top: var(--theme-y); transform: translateX(var(--theme-drift)) scale(var(--theme-scale)); opacity: .24; will-change: auto; }
body[data-theme-motion="off"] .theme-ghost,
body[data-theme-motion="off"] .theme-festive-lights i { animation: none; }
body[data-theme-particles="off"] .theme-particle { display: none; }
body[data-theme-decorations="off"] .theme-corner-ornament,
body[data-theme-decorations="off"] .theme-ghost,
body[data-theme-decorations="off"] .theme-festive-lights { display: none; }

@keyframes themeParticleFall {
  0% { transform: translate3d(0,-8vh,0) rotate(0deg) scale(var(--theme-scale)); opacity: 0; }
  12% { opacity: .48; }
  88% { opacity: .38; }
  100% { transform: translate3d(var(--theme-drift),118vh,0) rotate(330deg) scale(var(--theme-scale)); opacity: 0; }
}
@keyframes themeGhostFloat { 0%,100% { transform: translate3d(0,0,0) rotate(-3deg); } 50% { transform: translate3d(16px,-20px,0) rotate(4deg); } }
@keyframes themeLightTwinkle { from { opacity: .55; transform: scale(.9); } to { opacity: 1; transform: scale(1.08); } }

/* Theme Engine admin */
body[data-route="admin"][data-admin-tab="styles"] .admin-main { min-width: 0; }
.theme-settings-page { display: grid; gap: 18px; }
.theme-settings-heading { align-items: center; margin-bottom: 2px; }
.theme-live-status { min-width: 190px; display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-sm); }
.theme-live-status > span { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--primary-soft); font-size: 1.35rem; }
.theme-live-status div { display: grid; gap: 1px; }
.theme-live-status small { color: var(--muted); font-size: .7rem; }
.theme-live-status strong { font-size: .9rem; }
.theme-settings-form { display: grid; gap: 16px; }
.theme-settings-section { padding: 22px; }
.theme-settings-section-heading { display: flex; gap: 13px; align-items: flex-start; margin-bottom: 18px; }
.theme-settings-section-heading > span { flex: 0 0 34px; height: 28px; display: grid; place-items: center; border-radius: 999px; background: var(--primary-soft); color: var(--primary); font-size: .7rem; font-weight: 850; }
.theme-settings-section-heading h3 { margin: 0; font-size: 1.08rem; }
.theme-settings-section-heading p { margin: 4px 0 0; color: var(--muted); font-size: .8rem; line-height: 1.55; }
.theme-mode-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.theme-mode-card { position: relative; min-height: 124px; padding: 17px; border: 1px solid var(--line); border-radius: 15px; display: grid; grid-template-columns: 40px 1fr; gap: 10px 12px; cursor: pointer; background: var(--surface); transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.theme-mode-card:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--primary) 35%, var(--line)); }
.theme-mode-card:has(input:checked) { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.theme-mode-card input { position: absolute; opacity: 0; pointer-events: none; }
.theme-mode-card > span { width: 40px; height: 40px; border-radius: 12px; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; }
.theme-mode-card > span svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.theme-mode-card div { display: grid; gap: 2px; align-content: center; }
.theme-mode-card strong { font-size: .92rem; }
.theme-mode-card small { color: var(--muted); font-size: .75rem; line-height: 1.45; }
.theme-mode-card > i { grid-column: 1 / -1; font-style: normal; color: var(--muted); font-size: .7rem; padding-top: 8px; border-top: 1px solid var(--line); }
.theme-choice-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; }
.theme-choice-card { position: relative; min-height: 106px; display: grid; grid-template-columns: 96px 1fr 28px; gap: 13px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); cursor: pointer; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.theme-choice-card:hover { transform: translateY(-1px); }
.theme-choice-card:has(input:checked) { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.theme-choice-card > input { position: absolute; opacity: 0; pointer-events: none; }
.theme-choice-visual { position: relative; width: 96px; height: 78px; border-radius: 12px; overflow: hidden; background: linear-gradient(145deg,var(--theme-preview-c),color-mix(in srgb,var(--theme-preview-a) 12%,var(--theme-preview-c))); border: 1px solid color-mix(in srgb,var(--theme-preview-a) 15%,#fff); }
.theme-choice-visual i { position: absolute; border-radius: 999px; }
.theme-choice-visual i:nth-child(1) { width: 68px; height: 68px; right: -21px; top: -20px; background: color-mix(in srgb,var(--theme-preview-a) 27%,transparent); }
.theme-choice-visual i:nth-child(2) { width: 52px; height: 52px; left: -14px; bottom: -18px; background: color-mix(in srgb,var(--theme-preview-b) 40%,transparent); }
.theme-choice-visual i:nth-child(3) { width: 39px; height: 6px; left: 10px; top: 13px; background: var(--theme-preview-a); opacity: .75; }
.theme-choice-visual b { position: absolute; right: 11px; bottom: 8px; font-size: 1.55rem; filter: drop-shadow(0 4px 8px rgba(0,0,0,.16)); }
.theme-choice-copy { display: grid; gap: 4px; min-width: 0; }
.theme-choice-copy strong { font-size: .88rem; }
.theme-choice-copy small { color: var(--muted); font-size: .72rem; line-height: 1.45; }
.theme-choice-check { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-soft); color: transparent; font-size: .76rem; font-weight: 850; }
.theme-choice-card:has(input:checked) .theme-choice-check { background: var(--primary); color: #fff; }
.theme-effect-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.theme-effect-card { position: relative; padding: 14px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.theme-effect-card:has(input:checked) { border-color: color-mix(in srgb,var(--primary) 55%,var(--line)); background: color-mix(in srgb,var(--primary-soft) 45%,var(--surface)); }
.theme-effect-card input { margin-top: 3px; accent-color: var(--primary); }
.theme-effect-card span { display: grid; gap: 3px; }
.theme-effect-card strong { font-size: .84rem; }
.theme-effect-card small { color: var(--muted); font-size: .71rem; line-height: 1.45; }
.theme-intensity-fieldset { margin: 18px 0 0; padding: 0; border: 0; }
.theme-intensity-fieldset legend { margin-bottom: 9px; font-size: .78rem; font-weight: 800; }
.theme-intensity-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.theme-intensity-grid label { position: relative; cursor: pointer; }
.theme-intensity-grid input { position: absolute; opacity: 0; }
.theme-intensity-grid span { min-height: 66px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; display: grid; gap: 2px; align-content: center; background: var(--surface); }
.theme-intensity-grid label:has(input:checked) span { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); background: var(--primary-soft); }
.theme-intensity-grid strong { font-size: .8rem; }
.theme-intensity-grid small { color: var(--muted); font-size: .68rem; }
.theme-performance-note { margin-top: 14px; padding: 13px 14px; border-radius: 12px; display: flex; gap: 10px; background: var(--surface-soft); }
.theme-performance-note > svg { flex: 0 0 20px; width: 20px; height: 20px; fill: none; stroke: var(--success); stroke-width: 1.8; }
.theme-performance-note div { display: grid; gap: 2px; }
.theme-performance-note strong { font-size: .78rem; }
.theme-performance-note small { color: var(--muted); font-size: .69rem; line-height: 1.45; }

.theme-logo-mode-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.theme-logo-mode-card { position: relative; min-height: 102px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; display: grid; grid-template-columns: 38px 1fr; align-items: start; gap: 11px; background: var(--surface); cursor: pointer; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; }
.theme-logo-mode-card input { position: absolute; opacity: 0; pointer-events: none; }
.theme-logo-mode-card.is-selected, .theme-logo-mode-card:has(input:checked) { border-color: color-mix(in srgb,var(--primary) 60%,var(--line)); background: color-mix(in srgb,var(--primary-soft) 38%,var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--primary) 16%,transparent); }
.theme-logo-mode-icon { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--surface-soft); font-size: 1.12rem; }
.theme-logo-mode-card div { display: grid; gap: 4px; }
.theme-logo-mode-card strong { font-size: .84rem; }
.theme-logo-mode-card small { color: var(--muted); font-size: .7rem; line-height: 1.48; }
.theme-logo-library-heading { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; }
.theme-logo-library-heading > div { display: grid; gap: 3px; }
.theme-logo-library-heading strong { font-size: .82rem; }
.theme-logo-library-heading small { color: var(--muted); font-size: .69rem; line-height: 1.45; max-width: 760px; }
.theme-logo-library { margin-top: 11px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.theme-logo-card { min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 13px; display: grid; grid-template-columns: minmax(0,1fr) auto; grid-template-areas: "head preview" "actions preview"; gap: 9px 12px; align-items: center; background: var(--surface); }
.theme-logo-card.has-custom-logo { border-color: color-mix(in srgb,var(--primary) 35%,var(--line)); }
.theme-logo-card-head { grid-area: head; min-width: 0; display: flex; align-items: center; gap: 9px; }
.theme-logo-card-emoji { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 9px; display: grid; place-items: center; background: var(--surface-soft); font-size: .98rem; }
.theme-logo-card-head > div { min-width: 0; display: grid; gap: 2px; }
.theme-logo-card-head strong { font-size: .78rem; }
.theme-logo-card-head small { color: var(--muted); font-size: .65rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.theme-logo-preview { grid-area: preview; width: 112px; height: 58px; padding: 7px; border: 1px solid var(--line); border-radius: 11px; display: grid; place-items: center; overflow: hidden; background: linear-gradient(145deg,#fff,var(--surface-soft)); }
.theme-logo-preview.is-fallback { opacity: .62; }
.theme-logo-preview img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.theme-logo-preview svg { width: 30px; height: 30px; color: var(--primary); }
.theme-logo-card-actions { grid-area: actions; display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.theme-logo-card-actions .btn { min-height: 34px; }
.theme-logo-card-actions .file-button { margin: 0; }

.theme-auto-list { display: grid; gap: 8px; }
.theme-auto-row { min-height: 61px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 12px; display: grid; grid-template-columns: 22px 36px 1fr auto; gap: 9px; align-items: center; background: var(--surface); cursor: pointer; }
.theme-auto-row:has(input:checked) { border-color: color-mix(in srgb,var(--primary) 45%,var(--line)); }
.theme-auto-row input { accent-color: var(--primary); }
.theme-auto-emoji { font-size: 1.2rem; text-align: center; }
.theme-auto-row > span:nth-of-type(2) { display: grid; gap: 1px; }
.theme-auto-row strong { font-size: .8rem; }
.theme-auto-row small { color: var(--muted); font-size: .68rem; }
.theme-auto-priority { padding: 4px 7px; border-radius: 999px; background: var(--surface-soft); color: var(--muted); font-size: .64rem; font-weight: 780; }
.theme-auto-note { margin-top: 12px; padding: 12px 13px; border-left: 3px solid var(--accent); border-radius: 9px; background: var(--accent-soft); display: grid; gap: 3px; }
.theme-auto-note strong { font-size: .76rem; }
.theme-auto-note span { color: var(--muted); font-size: .69rem; line-height: 1.45; }
.theme-savebar { position: sticky; bottom: 12px; z-index: 20; padding: 12px 14px 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; box-shadow: 0 18px 45px rgba(24,36,65,.16); }
.theme-savebar > div { display: grid; gap: 2px; }
.theme-savebar span { color: var(--muted); font-size: .68rem; }
.theme-savebar strong { font-size: .84rem; }
.theme-savebar .btn { flex: 0 0 auto; min-height: 46px; }

@media (max-width: 1100px) {
  .theme-logo-mode-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 900px) {
  .theme-choice-grid { grid-template-columns: 1fr; }
  .theme-mode-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .seasonal-theme-banner-inner { min-height: 38px; padding: 6px 0; font-size: .72rem; line-height: 1.35; }
  .theme-effects-layer .theme-particle:nth-of-type(n+11) { display: none; }
  .theme-corner-ornament { font-size: 30px; opacity: .55; }
  .theme-corner-ornament-1 { left: 7px; bottom: calc(76px + env(safe-area-inset-bottom)); }
  .theme-corner-ornament-2 { right: 7px; top: 104px; }
  .theme-ghost-two { display: none; }
  .theme-festive-lights { left: 2%; right: 2%; }
  .theme-settings-heading { align-items: stretch; flex-direction: column; }
  .theme-live-status { width: 100%; min-width: 0; }
  .theme-settings-section { padding: 15px; }
  .theme-settings-section-heading { gap: 9px; }
  .theme-choice-card { grid-template-columns: 78px 1fr 24px; min-height: 94px; gap: 10px; }
  .theme-choice-visual { width: 78px; height: 68px; }
  .theme-effect-grid { grid-template-columns: 1fr; }
  .theme-logo-mode-grid, .theme-logo-library { grid-template-columns: 1fr; }
  .theme-logo-card { grid-template-columns: minmax(0,1fr) 92px; }
  .theme-logo-preview { width: 92px; height: 52px; }
  .theme-intensity-grid { grid-template-columns: 1fr; }
  .theme-intensity-grid span { min-height: 56px; }
  .theme-auto-row { grid-template-columns: 20px 32px 1fr; }
  .theme-auto-priority { grid-column: 3; justify-self: start; }
  .theme-savebar { position: static; align-items: stretch; flex-direction: column; }
  .theme-savebar .btn { width: 100%; }
}
@media (max-width: 460px) {
  .theme-choice-card { grid-template-columns: 64px 1fr 22px; padding: 10px; }
  .theme-choice-visual { width: 64px; height: 62px; }
  .theme-choice-copy small { font-size: .68rem; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-site-theme] { transition: none; }
  .theme-particle,
  .theme-ghost,
  .theme-festive-lights i { animation: none !important; will-change: auto !important; }
  .theme-particle { top: var(--theme-y); transform: translateX(var(--theme-drift)) scale(var(--theme-scale)); opacity: .22; }
  .theme-mode-card,
  .theme-choice-card { transition: none; }
}

/* v1.23.19 — Contextual Theme Decorations: polish pass for page-aware seasonal details */
body[data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) {
  --theme-context-icon: "✦";
  --theme-context-secondary: "·";
  --theme-context-border: color-mix(in srgb, var(--primary) 35%, var(--line));
  --theme-context-glow: color-mix(in srgb, var(--primary) 18%, transparent);
  --theme-context-opacity: .72;
}
body[data-theme-context="on"][data-theme-intensity="minimal"] { --theme-context-opacity: .46; }
body[data-theme-context="on"][data-theme-intensity="maximum"] { --theme-context-opacity: .9; }
body[data-theme-context="on"][data-site-theme="autumn"] { --theme-context-icon: "🍁"; --theme-context-secondary: "🍂"; }
body[data-theme-context="on"][data-site-theme="halloween"] { --theme-context-icon: "🎃"; --theme-context-secondary: "🦇"; }
body[data-theme-context="on"][data-site-theme="winter"] { --theme-context-icon: "❄"; --theme-context-secondary: "❅"; }
body[data-theme-context="on"][data-site-theme="newyear"] { --theme-context-icon: "🎄"; --theme-context-secondary: "✨"; }
body[data-theme-context="on"][data-site-theme="spring"] { --theme-context-icon: "🌷"; --theme-context-secondary: "🌿"; }
body[data-theme-context="on"][data-site-theme="easter"] { --theme-context-icon: "🥚"; --theme-context-secondary: "🐣"; }
body[data-theme-context="on"][data-site-theme="summer"] { --theme-context-icon: "☀"; --theme-context-secondary: "🌿"; }

/* Shared context hooks. Decorations never receive pointer input. */
body[data-theme-context="on"] .brand,
body[data-theme-context="on"] .brand-mark,
body[data-theme-context="on"] .brand-copy strong,
body[data-theme-context="on"] .compact-page-hero .container,
body[data-theme-context="on"] .booking-calendar,
body[data-theme-context="on"] .booking-summary,
body[data-theme-context="on"] .slot-button,
body[data-theme-context="on"] .date-choice,
body[data-theme-context="on"] .dashboard-hero,
body[data-theme-context="on"] .admin-topbar,
body[data-theme-context="on"] .dashboard-main,
body[data-theme-context="on"] .balance-card,
body[data-theme-context="on"] .mobile-lesson-card,
body[data-theme-context="on"] .booking-list > .card,
body[data-theme-context="on"] .site-footer { position: relative; }

body[data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .compact-page-hero h1::after,
body[data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .dashboard-hero h1::after,
body[data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .mobile-screen-title-row h1::after,
body[data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .admin-topbar h1::after {
  content: var(--theme-context-icon);
  display: inline-block;
  margin-left: .42em;
  font-size: .48em;
  line-height: 1;
  vertical-align: .2em;
  opacity: var(--theme-context-opacity);
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.1));
  pointer-events: none;
}

body[data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .booking-calendar,
body[data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .booking-summary,
body[data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .balance-card,
body[data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .booking-list > .card,
body[data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .mobile-lesson-card {
  border-color: var(--theme-context-border);
}

/* Header/logo ornaments */
body[data-theme-context="on"][data-site-theme="autumn"] .site-header .brand-mark::after {
  content: "🍁"; position: absolute; right: -10px; top: -8px; font-size: 20px; transform: rotate(14deg); filter: drop-shadow(0 4px 5px rgba(90,48,18,.2)); pointer-events: none;
}
body[data-theme-context="on"][data-site-theme="halloween"] .site-header .brand-mark::after {
  content: "🎃"; position: absolute; right: -11px; bottom: -7px; font-size: 19px; transform: rotate(8deg); filter: drop-shadow(0 4px 6px rgba(35,16,43,.35)); pointer-events: none;
}
body[data-theme-context="on"][data-site-theme="halloween"] .site-header .brand-copy strong::after {
  content: "🕸"; position: absolute; right: -20px; top: -13px; font-size: 18px; opacity: .55; pointer-events: none;
}
body[data-theme-context="on"][data-site-theme="winter"] .site-header .brand-mark::after {
  content: "❄"; position: absolute; right: -9px; top: -10px; color: #eefaff; font-size: 23px; text-shadow: 0 2px 7px rgba(48,91,126,.35); pointer-events: none;
}
body[data-theme-context="on"][data-site-theme="spring"] .site-header .brand-mark::after {
  content: "🌷"; position: absolute; right: -10px; top: -9px; font-size: 19px; transform: rotate(10deg); pointer-events: none;
}
body[data-theme-context="on"][data-site-theme="easter"] .site-header .brand-mark::after {
  content: "🐣"; position: absolute; right: -11px; bottom: -8px; font-size: 19px; transform: rotate(5deg); pointer-events: none;
}
body[data-theme-context="on"][data-site-theme="summer"] .site-header .brand-mark::after {
  content: "☀"; position: absolute; right: -10px; top: -10px; color: #f2b83d; font-size: 25px; text-shadow: 0 2px 8px rgba(198,135,19,.25); pointer-events: none;
}

/* New Year: a CSS Santa hat on the brand; the old snow strip over the site name is intentionally gone. */
body[data-theme-context="on"][data-site-theme="newyear"] .site-header .brand-mark::after {
  content: "";
  position: absolute;
  z-index: 3;
  width: 31px;
  height: 25px;
  right: -8px;
  top: -14px;
  border-radius: 70% 22% 18% 18%;
  background: linear-gradient(150deg,#d94b57 0 66%,#b92f3c 67% 100%);
  clip-path: polygon(2% 87%,31% 19%,66% 0,93% 89%);
  transform: rotate(15deg);
  filter: drop-shadow(0 4px 5px rgba(65,26,31,.23));
  pointer-events: none;
}
body[data-theme-context="on"][data-site-theme="newyear"] .site-header .brand-mark::before {
  content: "";
  position: absolute;
  z-index: 4;
  width: 27px;
  height: 7px;
  right: -7px;
  top: 6px;
  border-radius: 999px;
  background: #fffdf5;
  box-shadow: 20px -18px 0 -1px #fffdf5, 0 2px 8px rgba(25,50,40,.18);
  transform: rotate(13deg);
  pointer-events: none;
}
/* v1.23.20 — the previous full-width snow cap over the brand name was removed.
   Winter/New Year identity is carried by the logo ornament, lights and page particles instead. */
body[data-theme-context="on"][data-site-theme="newyear"] .site-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 5px;
  background: radial-gradient(circle,#d84b57 0 2px,transparent 2.5px) 0 0/28px 5px repeat-x,
              radial-gradient(circle,#e5bd4d 0 2px,transparent 2.5px) 14px 0/28px 5px repeat-x;
  opacity: .7;
  pointer-events: none;
}

/* Pure separate-image mode already contains its seasonal artwork, so the site must not
   place the Theme Engine sticker on top of the uploaded asset. The combined
   separate-images-decorated mode intentionally keeps these stickers enabled. */
body[data-theme-logo-mode="separate-images"] .site-header .brand-mark::before,
body[data-theme-logo-mode="separate-images"] .site-header .brand-mark::after {
  content: none !important;
  display: none !important;
  animation: none !important;
}

/* Home page: decorate the mathematical board, not the reading content. */
body[data-theme-context="on"][data-route="home"][data-site-theme]:not([data-site-theme="default"]) .math-board::after {
  content: var(--theme-context-secondary);
  position: absolute;
  z-index: 5;
  right: -10px;
  top: -15px;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  font-size: 27px;
  transform: rotate(9deg);
  filter: drop-shadow(0 7px 10px rgba(0,0,0,.18));
  pointer-events: none;
}
body[data-theme-context="on"][data-route="home"][data-site-theme="halloween"] .math-board::after { content: "🕸"; right: -4px; top: -8px; font-size: 40px; opacity: .72; }
body[data-theme-context="on"][data-route="home"][data-site-theme="newyear"] .math-board::after { content: "🎁"; }
body[data-theme-context="on"][data-route="home"][data-site-theme="winter"] .math-board::after { content: "❄"; color: #f4fbff; text-shadow: 0 3px 12px rgba(72,118,153,.35); }
body[data-theme-context="on"][data-route="home"][data-site-theme="summer"] .math-board::after { content: "☀"; color: #f6c047; }

body[data-theme-context="on"][data-route="home"][data-site-theme="autumn"] .feature-card:nth-child(odd) { border-top: 3px solid #d68a3d; }
body[data-theme-context="on"][data-route="home"][data-site-theme="halloween"] .feature-card:nth-child(odd) { border-top: 3px solid #ec8d32; }
body[data-theme-context="on"][data-route="home"][data-site-theme="winter"] .feature-card:nth-child(odd) { border-top: 3px solid #91c8e5; }
body[data-theme-context="on"][data-route="home"][data-site-theme="newyear"] .feature-card:nth-child(odd) { border-top: 3px solid #c94452; }
body[data-theme-context="on"][data-route="home"][data-site-theme="spring"] .feature-card:nth-child(odd) { border-top: 3px solid #df9db3; }
body[data-theme-context="on"][data-route="home"][data-site-theme="easter"] .feature-card:nth-child(odd) { border-top: 3px solid #dca9c2; }
body[data-theme-context="on"][data-route="home"][data-site-theme="summer"] .feature-card:nth-child(odd) { border-top: 3px solid #efbd4b; }

/* Booking page: context-heavy because choosing a slot is the core interaction. */
body[data-theme-context="on"][data-route="booking"][data-site-theme]:not([data-site-theme="default"]) .booking-calendar::after {
  content: var(--theme-context-icon);
  position: absolute;
  right: 18px;
  top: 15px;
  font-size: 24px;
  opacity: var(--theme-context-opacity);
  filter: drop-shadow(0 4px 7px rgba(0,0,0,.1));
  pointer-events: none;
}
body[data-theme-context="on"][data-route="booking"][data-site-theme]:not([data-site-theme="default"]) .slot-button:not(.is-disabled) {
  border-color: var(--theme-context-border);
  box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--primary) 4%,transparent);
}
body[data-theme-context="on"][data-route="booking"][data-site-theme]:not([data-site-theme="default"]) .slot-button.is-selected::after {
  content: var(--theme-context-secondary);
  position: absolute;
  right: 5px;
  top: 4px;
  font-size: 12px;
  line-height: 1;
  opacity: .86;
  pointer-events: none;
}
body[data-theme-context="on"][data-route="booking"][data-site-theme="autumn"] .slot-button:not(.is-disabled) { background: linear-gradient(150deg,#fffdf9,#fff6e9); }
body[data-theme-context="on"][data-route="booking"][data-site-theme="autumn"] .slot-button.is-selected { background: linear-gradient(145deg,#a95722,#d88435); border-color:#9e4e1d; color:#fff; }
body[data-theme-context="on"][data-route="booking"][data-site-theme="halloween"] .booking-calendar { box-shadow: inset 0 0 0 2px rgba(239,137,38,.13), var(--shadow-sm); }
body[data-theme-context="on"][data-route="booking"][data-site-theme="halloween"] .booking-calendar::before { content:"🕸"; position:absolute; left:-5px; top:-8px; font-size:39px; opacity:.36; pointer-events:none; }
body[data-theme-context="on"][data-route="booking"][data-site-theme="halloween"] .slot-button:not(.is-disabled) { background:linear-gradient(145deg,#fffafd,#f6edf8); border-color:#c9add4; }
body[data-theme-context="on"][data-route="booking"][data-site-theme="halloween"] .slot-button.is-selected { background:linear-gradient(145deg,#4d275e,#7e3f93); border-color:#ef963a; box-shadow:0 0 0 2px rgba(239,150,58,.24),0 7px 18px rgba(58,28,69,.2); }
body[data-theme-context="on"][data-route="booking"][data-site-theme="winter"] .slot-button:not(.is-disabled) { background:linear-gradient(160deg,#fff,#eef8fd); border-color:#bcd9e8; box-shadow:inset 0 3px 0 rgba(255,255,255,.9); }
body[data-theme-context="on"][data-route="booking"][data-site-theme="winter"] .slot-button.is-selected { background:linear-gradient(145deg,#3e709e,#5d93bb); border-color:#d8f1fc; }
body[data-theme-context="on"][data-route="booking"][data-site-theme="newyear"] .booking-calendar::before {
  content:""; position:absolute; left:18px; right:18px; top:0; height:6px; border-radius:0 0 9px 9px;
  background:repeating-linear-gradient(90deg,#2b7259 0 17px,#d64b58 17px 27px,#e6bd4b 27px 36px,#2b7259 36px 52px); opacity:.82; pointer-events:none;
}
body[data-theme-context="on"][data-route="booking"][data-site-theme="newyear"] .slot-button:not(.is-disabled) { background:linear-gradient(145deg,#fffef9,#f0f7f1); border-color:#a9cbbc; }
body[data-theme-context="on"][data-route="booking"][data-site-theme="newyear"] .slot-button.is-selected { background:linear-gradient(145deg,#1f624c,#2b7a5c); border-color:#fff7dc; box-shadow:0 0 0 2px #c94754,0 0 0 4px rgba(230,189,75,.55),0 8px 20px rgba(31,98,76,.2); }
body[data-theme-context="on"][data-route="booking"][data-site-theme="newyear"] .slot-button.is-selected::after { content:"🎁"; font-size:13px; }
body[data-theme-context="on"][data-route="booking"][data-site-theme="spring"] .slot-button:not(.is-disabled) { background:linear-gradient(145deg,#fffefd,#f1f9f2); border-color:#bfddc8; }
body[data-theme-context="on"][data-route="booking"][data-site-theme="spring"] .slot-button.is-selected { background:linear-gradient(145deg,#4c8c66,#6fa77f); border-color:#f0bfd0; }
body[data-theme-context="on"][data-route="booking"][data-site-theme="easter"] .slot-button:not(.is-disabled) { background:linear-gradient(145deg,#fffefd,#fbf3fc); border-color:#dac7e3; border-radius:16px 16px 13px 13px; }
body[data-theme-context="on"][data-route="booking"][data-site-theme="easter"] .slot-button.is-selected { background:linear-gradient(145deg,#8065a3,#a98cc4); border-color:#efbdd0; }
body[data-theme-context="on"][data-route="booking"][data-site-theme="summer"] .slot-button:not(.is-disabled) { background:linear-gradient(150deg,#fffefa,#eefaf7); border-color:#b5ddd8; }
body[data-theme-context="on"][data-route="booking"][data-site-theme="summer"] .slot-button.is-selected { background:linear-gradient(145deg,#1f8292,#36a0a7); border-color:#f2c454; }

/* Dashboard: hero has one quiet seasonal emblem; lesson cards receive a small accent. */
body[data-theme-context="on"][data-route="dashboard"][data-site-theme]:not([data-site-theme="default"]) .dashboard-hero::before,
body[data-theme-context="on"][data-route="admin"][data-site-theme]:not([data-site-theme="default"]) .admin-topbar::before {
  content: var(--theme-context-secondary);
  position: absolute;
  right: max(24px,calc((100vw - var(--container))/2 + 20px));
  top: 22px;
  z-index: 1;
  font-size: clamp(38px,6vw,72px);
  line-height: 1;
  opacity: .15;
  transform: rotate(8deg);
  filter: drop-shadow(0 8px 15px rgba(0,0,0,.12));
  pointer-events: none;
}
body[data-theme-context="on"][data-route="dashboard"][data-site-theme]:not([data-site-theme="default"]) .booking-list > .card::after,
body[data-theme-context="on"][data-route="dashboard"][data-site-theme]:not([data-site-theme="default"]) .mobile-lesson-card::after {
  content: var(--theme-context-icon);
  position: absolute;
  right: 10px;
  top: 8px;
  font-size: 14px;
  opacity: .34;
  pointer-events: none;
}
body[data-theme-context="on"][data-route="dashboard"][data-site-theme="halloween"] .booking-list > .card::after,
body[data-theme-context="on"][data-route="dashboard"][data-site-theme="halloween"] .mobile-lesson-card::after { content:"🦇"; }
body[data-theme-context="on"][data-route="dashboard"][data-site-theme="newyear"] .booking-list > .card::after,
body[data-theme-context="on"][data-route="dashboard"][data-site-theme="newyear"] .mobile-lesson-card::after { content:"✨"; }

/* Payment / billing: keep numbers clean, decorate only card edges. */
body[data-theme-context="on"][data-site-theme]:not([data-site-theme="default"])[data-route="payment"] .balance-card::after,
body[data-theme-context="on"][data-site-theme]:not([data-site-theme="default"])[data-route="dashboard"][data-dashboard-tab="billing"] .balance-card::after {
  content: var(--theme-context-icon);
  position: absolute;
  right: 11px;
  top: 9px;
  font-size: 15px;
  opacity: .32;
  pointer-events: none;
}
body[data-theme-context="on"][data-site-theme="newyear"][data-route="payment"] .balance-card,
body[data-theme-context="on"][data-site-theme="newyear"][data-route="dashboard"][data-dashboard-tab="billing"] .balance-card { border-top:3px solid #c94754; }
body[data-theme-context="on"][data-site-theme="winter"][data-route="payment"] .balance-card,
body[data-theme-context="on"][data-site-theme="winter"][data-route="dashboard"][data-dashboard-tab="billing"] .balance-card { border-top:3px solid #8fc7e1; }
body[data-theme-context="on"][data-site-theme="halloween"][data-route="payment"] .balance-card,
body[data-theme-context="on"][data-site-theme="halloween"][data-route="dashboard"][data-dashboard-tab="billing"] .balance-card { border-top:3px solid #ea8d36; }

/* Profile and homework tabs receive tiny, contextual headings rather than heavy decoration. */
body[data-theme-context="on"][data-route="dashboard"][data-dashboard-tab="profile"][data-site-theme]:not([data-site-theme="default"]) .profile-screen-card::before,
body[data-theme-context="on"][data-route="dashboard"][data-dashboard-tab="homework"][data-site-theme]:not([data-site-theme="default"]) .homework-student-page::before {
  content: var(--theme-context-secondary);
  position: absolute;
  right: 14px;
  top: 10px;
  font-size: 18px;
  opacity: .32;
  pointer-events: none;
}
body[data-theme-context="on"] .profile-screen-card,
body[data-theme-context="on"] .homework-student-page { position: relative; }

/* Legal / info pages: one small emblem only. */
body[data-theme-context="on"][data-site-theme]:not([data-site-theme="default"])[data-route="privacy"] .compact-page-hero .container::after,
body[data-theme-context="on"][data-site-theme]:not([data-site-theme="default"])[data-route="terms"] .compact-page-hero .container::after,
body[data-theme-context="on"][data-site-theme]:not([data-site-theme="default"])[data-route="rescheduling"] .compact-page-hero .container::after {
  content: var(--theme-context-secondary);
  position: absolute;
  right: 5%;
  top: 5px;
  font-size: clamp(26px,4vw,46px);
  opacity: .18;
  pointer-events: none;
}

/* Footer detail. */
body[data-theme-context="on"][data-site-theme="newyear"] .site-footer::before,
body[data-theme-context="on"][data-site-theme="winter"] .site-footer::before {
  content:""; position:absolute; left:0; right:0; top:-5px; height:9px;
  background:radial-gradient(circle at 8px 0,#fff 0 8px,transparent 8.5px) 0 0/16px 9px repeat-x;
  opacity:.85; pointer-events:none;
}
body[data-theme-context="on"][data-site-theme="autumn"] .site-footer::before { content:"🍂   🍁   🍂"; position:absolute; right:5%; top:-16px; letter-spacing:12px; font-size:20px; opacity:.55; pointer-events:none; }
body[data-theme-context="on"][data-site-theme="spring"] .site-footer::before { content:"🌿  🌷  🌿"; position:absolute; right:5%; top:-15px; letter-spacing:9px; font-size:18px; opacity:.5; pointer-events:none; }
body[data-theme-context="on"][data-site-theme="easter"] .site-footer::before { content:"🥚  🌼  🥚"; position:absolute; right:5%; top:-15px; letter-spacing:9px; font-size:17px; opacity:.5; pointer-events:none; }
body[data-theme-context="on"][data-site-theme="summer"] .site-footer::before { content:"☀  ·  🌿"; position:absolute; right:5%; top:-15px; letter-spacing:8px; font-size:18px; opacity:.52; pointer-events:none; }
body[data-theme-context="on"][data-site-theme="halloween"] .site-footer::before { content:"🦇      🎃"; position:absolute; right:5%; top:-17px; letter-spacing:12px; font-size:18px; opacity:.55; pointer-events:none; }

/* Animation is opt-in and remains disabled by reduced-motion preferences. */
body[data-theme-context="on"][data-theme-motion="on"][data-site-theme="newyear"] .site-header .brand-mark::after { animation: themeHatBob 4.8s ease-in-out infinite; }
body[data-theme-context="on"][data-theme-motion="on"][data-site-theme="summer"] .site-header .brand-mark::after { animation: themeSunPulse 5.6s ease-in-out infinite; }
body[data-theme-context="on"][data-theme-motion="on"][data-site-theme="spring"] .site-header .brand-mark::after,
body[data-theme-context="on"][data-theme-motion="on"][data-site-theme="autumn"] .site-header .brand-mark::after { animation: themeOrnamentSway 5.2s ease-in-out infinite; transform-origin: 50% 80%; }
@keyframes themeHatBob { 0%,100% { transform:rotate(15deg) translateY(0); } 50% { transform:rotate(11deg) translateY(-2px); } }
@keyframes themeSunPulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.08); } }
@keyframes themeOrnamentSway { 0%,100% { transform:rotate(12deg); } 50% { transform:rotate(-4deg); } }

/* Keep thematic details compact on small screens and out of the bottom app navigation. */
@media (max-width: 760px) {
  body[data-theme-context="on"] .site-header .brand-mark::after { font-size: 16px; right: -7px; }
  body[data-theme-context="on"][data-site-theme="newyear"] .site-header .brand-mark::after { width:25px; height:21px; right:-6px; top:-11px; }
  body[data-theme-context="on"][data-site-theme="newyear"] .site-header .brand-mark::before { width:22px; height:6px; right:-5px; top:6px; box-shadow:16px -15px 0 -1px #fffdf5; }
  body[data-theme-context="on"][data-route="booking"] .booking-calendar::after { right:10px; top:9px; font-size:17px; opacity:.42; }
  body[data-theme-context="on"][data-route="booking"][data-site-theme="halloween"] .booking-calendar::before { font-size:28px; }
  body[data-theme-context="on"][data-route="dashboard"] .dashboard-hero::before,
  body[data-theme-context="on"][data-route="admin"] .admin-topbar::before { display:none; }
  body[data-theme-context="on"] .site-footer::before { display:none; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-theme-context="on"] .site-header .brand-mark::after { animation:none !important; }
}

/* v1.23.22 — Seasonal Home Experiences: each theme gets a distinct, page-aware homepage composition. */
body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) {
  --home-seasonal-surface: var(--surface);
  --home-seasonal-soft: var(--surface-soft);
  --home-seasonal-border: var(--line);
  --home-seasonal-accent: var(--accent);
  --home-seasonal-glow: color-mix(in srgb, var(--accent) 16%, transparent);
  --home-seasonal-hero-a: "✦";
  --home-seasonal-hero-b: "·";
  --home-seasonal-card-mark: "✦";
  --home-seasonal-review-mark: "✦";
  --home-seasonal-board-line: rgba(255,255,255,.14);
}
body[data-route="home"][data-theme-context="on"][data-site-theme="autumn"] {
  --home-seasonal-surface: #fffaf2;
  --home-seasonal-soft: #f6ead8;
  --home-seasonal-border: #e6cfb4;
  --home-seasonal-glow: rgba(216,135,53,.18);
  --home-seasonal-hero-a: "🍁";
  --home-seasonal-hero-b: "🍂";
  --home-seasonal-card-mark: "🍂";
  --home-seasonal-review-mark: "🍁";
}
body[data-route="home"][data-theme-context="on"][data-site-theme="halloween"] {
  --home-seasonal-surface: #fff9fd;
  --home-seasonal-soft: #eee5f2;
  --home-seasonal-border: #d8c7df;
  --home-seasonal-glow: rgba(237,139,44,.19);
  --home-seasonal-hero-a: "☾";
  --home-seasonal-hero-b: "🦇";
  --home-seasonal-card-mark: "🕸";
  --home-seasonal-review-mark: "🎃";
}
body[data-route="home"][data-theme-context="on"][data-site-theme="winter"] {
  --home-seasonal-surface: #fbfdff;
  --home-seasonal-soft: #e8f3fa;
  --home-seasonal-border: #cfe2ef;
  --home-seasonal-glow: rgba(115,185,216,.18);
  --home-seasonal-hero-a: "❄";
  --home-seasonal-hero-b: "✦";
  --home-seasonal-card-mark: "❅";
  --home-seasonal-review-mark: "❄";
}
body[data-route="home"][data-theme-context="on"][data-site-theme="newyear"] {
  --home-seasonal-surface: #fffdf7;
  --home-seasonal-soft: #ecf4ed;
  --home-seasonal-border: #cadfce;
  --home-seasonal-glow: rgba(230,189,75,.20);
  --home-seasonal-hero-a: "✦";
  --home-seasonal-hero-b: "🎁";
  --home-seasonal-card-mark: "✦";
  --home-seasonal-review-mark: "🎄";
}
body[data-route="home"][data-theme-context="on"][data-site-theme="spring"] {
  --home-seasonal-surface: #fffefd;
  --home-seasonal-soft: #edf7ef;
  --home-seasonal-border: #d4e7d8;
  --home-seasonal-glow: rgba(222,145,170,.18);
  --home-seasonal-hero-a: "✿";
  --home-seasonal-hero-b: "🌿";
  --home-seasonal-card-mark: "❀";
  --home-seasonal-review-mark: "🌷";
}
body[data-route="home"][data-theme-context="on"][data-site-theme="easter"] {
  --home-seasonal-surface: #fffdfb;
  --home-seasonal-soft: #f5edf8;
  --home-seasonal-border: #e1d5e8;
  --home-seasonal-glow: rgba(231,168,189,.18);
  --home-seasonal-hero-a: "🌼";
  --home-seasonal-hero-b: "🥚";
  --home-seasonal-card-mark: "🥚";
  --home-seasonal-review-mark: "🐣";
}
body[data-route="home"][data-theme-context="on"][data-site-theme="summer"] {
  --home-seasonal-surface: #fffef8;
  --home-seasonal-soft: #e9f8f5;
  --home-seasonal-border: #cfe7e3;
  --home-seasonal-glow: rgba(238,183,73,.20);
  --home-seasonal-hero-a: "☀";
  --home-seasonal-hero-b: "🌿";
  --home-seasonal-card-mark: "✦";
  --home-seasonal-review-mark: "☀";
}

/* Shared seasonal homepage language. */
body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) main { overflow: clip; }
body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .hero,
body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) #approach,
body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .reviews-section,
body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .faq-section,
body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .contact-section { position: relative; isolation: isolate; }
body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .hero::before,
body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .hero::after {
  position: absolute;
  z-index: -1;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}
body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .hero::before {
  content: var(--home-seasonal-hero-a);
  right: max(3vw, calc((100vw - var(--container))/2 - 30px));
  top: 72px;
  font-size: clamp(54px, 8vw, 118px);
  opacity: .10;
  transform: rotate(9deg);
  filter: drop-shadow(0 14px 30px var(--home-seasonal-glow));
}
body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .hero::after {
  content: var(--home-seasonal-hero-b);
  left: max(2vw, calc((100vw - var(--container))/2 - 58px));
  bottom: 46px;
  font-size: clamp(34px, 5vw, 72px);
  opacity: .12;
  transform: rotate(-12deg);
}
body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .hero .eyebrow,
body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) #approach .eyebrow,
body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .reviews-heading .eyebrow,
body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .faq-section .eyebrow {
  width: fit-content;
  padding: 7px 10px;
  border: 1px solid color-mix(in srgb, var(--primary) 19%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  backdrop-filter: blur(8px);
}
body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .math-board {
  border: 1px solid color-mix(in srgb, var(--accent) 28%, rgba(255,255,255,.18));
  box-shadow: 0 34px 80px color-mix(in srgb, var(--navy) 24%, transparent), inset 0 1px 0 rgba(255,255,255,.09);
}
body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .math-board::before {
  border-color: color-mix(in srgb, var(--accent) 30%, rgba(255,255,255,.16));
}
body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .math-board .equation-card,
body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .math-board .teacher-card,
body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .math-board .progress-card {
  border-color: var(--home-seasonal-board-line);
}
body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .trust-strip {
  border-color: var(--home-seasonal-border);
  background: color-mix(in srgb, var(--home-seasonal-surface) 92%, transparent);
  backdrop-filter: blur(12px);
}
body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .trust-item {
  border-radius: 14px;
}
body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) #approach {
  background:
    radial-gradient(circle at 8% 18%, var(--home-seasonal-glow), transparent 18rem),
    var(--home-seasonal-surface);
}
body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) #approach .feature-card {
  overflow: hidden;
  border-color: var(--home-seasonal-border);
  background: color-mix(in srgb, var(--home-seasonal-surface) 95%, white);
  box-shadow: 0 12px 34px color-mix(in srgb, var(--primary) 7%, transparent);
}
body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) #approach .feature-card::after {
  content: var(--home-seasonal-card-mark);
  position: absolute;
  right: 13px;
  top: 11px;
  z-index: 0;
  font-size: 20px;
  line-height: 1;
  opacity: .18;
  pointer-events: none;
}
body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) #approach .feature-number {
  border: 1px solid color-mix(in srgb, var(--primary) 16%, transparent);
  background: color-mix(in srgb, var(--primary-soft) 78%, white);
  color: var(--primary-dark);
}
body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .soft-section {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--home-seasonal-soft) 84%, white), var(--home-seasonal-soft));
}
body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .lesson-example-card,
body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .price-card {
  border-color: var(--home-seasonal-border);
  background: color-mix(in srgb, var(--home-seasonal-surface) 94%, white);
}
body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .reviews-section {
  background:
    radial-gradient(circle at 88% 12%, var(--home-seasonal-glow), transparent 20rem),
    color-mix(in srgb, var(--home-seasonal-soft) 72%, white);
}
body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .review-card {
  overflow: hidden;
  border: 1px solid var(--home-seasonal-border);
  background: color-mix(in srgb, var(--home-seasonal-surface) 96%, white);
}
body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .review-card::before {
  content: var(--home-seasonal-review-mark);
  position: absolute;
  right: 15px;
  bottom: 13px;
  font-size: 25px;
  line-height: 1;
  opacity: .10;
  pointer-events: none;
}
body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .review-result { color: var(--primary-dark); }
body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .faq-section {
  border-top-color: var(--home-seasonal-border);
  background: var(--home-seasonal-surface);
}
body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .accordion-list details {
  border-color: var(--home-seasonal-border);
  background: color-mix(in srgb, var(--home-seasonal-surface) 96%, white);
}
body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .contact-section {
  background: color-mix(in srgb, var(--home-seasonal-soft) 76%, white);
}
body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .cta-panel {
  position: relative;
  overflow: hidden;
  background: var(--theme-shell);
}
body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .cta-panel::after {
  content: var(--home-seasonal-hero-a);
  position: absolute;
  right: 22px;
  top: 18px;
  font-size: 64px;
  line-height: 1;
  opacity: .10;
  transform: rotate(12deg);
  pointer-events: none;
}
body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .contact-form {
  border-color: var(--home-seasonal-border);
  background: var(--home-seasonal-surface);
}

/* AUTUMN — warm paper, amber edge light and drifting-leaf character. */
body[data-route="home"][data-theme-context="on"][data-site-theme="autumn"] .hero {
  background:
    radial-gradient(ellipse at 82% 28%, rgba(213,132,49,.18), transparent 25rem),
    radial-gradient(ellipse at 12% 92%, rgba(158,78,34,.09), transparent 22rem),
    linear-gradient(180deg,#fffaf2 0%,#f7ead7 100%);
}
body[data-route="home"][data-theme-context="on"][data-site-theme="autumn"] .math-board {
  background: linear-gradient(145deg,#463024 0%,#70462a 58%,#8e572d 100%);
}
body[data-route="home"][data-theme-context="on"][data-site-theme="autumn"] .math-board::after { content:"🍁"; font-size:30px; right:-5px; top:-11px; opacity:.82; }
body[data-route="home"][data-theme-context="on"][data-site-theme="autumn"] #approach .feature-card:nth-child(odd) { border-top-color:#d9893b; }
body[data-route="home"][data-theme-context="on"][data-site-theme="autumn"] #approach .feature-card:nth-child(even) { border-top:3px solid #a55d2e; }
body[data-route="home"][data-theme-context="on"][data-site-theme="autumn"] .review-card { box-shadow:0 10px 30px rgba(113,70,37,.07); }
body[data-route="home"][data-theme-context="on"][data-site-theme="autumn"] .cta-panel { background:linear-gradient(135deg,#4b2e1f,#7c4828 68%,#aa6d31); }

/* HALLOWEEN — cinematic hero, moon glow, purple glass and orange energy. */
body[data-route="home"][data-theme-context="on"][data-site-theme="halloween"] .hero {
  background:
    radial-gradient(circle at 84% 23%, rgba(242,159,61,.34) 0 3.2rem, rgba(242,159,61,.10) 3.3rem 7rem, transparent 7.2rem),
    radial-gradient(circle at 20% 72%, rgba(115,62,146,.18), transparent 23rem),
    linear-gradient(145deg,#21152a 0%,#382044 55%,#4b283e 100%);
}
body[data-route="home"][data-theme-context="on"][data-site-theme="halloween"] .hero::before { color:#ffd88c; opacity:.22; text-shadow:0 0 35px rgba(255,190,88,.34); }
body[data-route="home"][data-theme-context="on"][data-site-theme="halloween"] .hero::after { opacity:.26; }
body[data-route="home"][data-theme-context="on"][data-site-theme="halloween"] .hero-copy h1 { color:#fff9ff; text-shadow:0 8px 36px rgba(0,0,0,.18); }
body[data-route="home"][data-theme-context="on"][data-site-theme="halloween"] .math-board {
  background:linear-gradient(145deg,#15101b,#2d1837 57%,#472246);
  border-color:rgba(244,149,54,.35);
  box-shadow:0 34px 80px rgba(21,12,27,.42),0 0 0 1px rgba(240,139,44,.06),inset 0 1px 0 rgba(255,255,255,.06);
}
body[data-route="home"][data-theme-context="on"][data-site-theme="halloween"] .math-board::after { content:"🕸"; right:-8px; top:-10px; font-size:52px; opacity:.54; }
body[data-route="home"][data-theme-context="on"][data-site-theme="halloween"] .trust-strip { background:#2b1a34; border-color:#51335c; color:#f5e9f7; }
body[data-route="home"][data-theme-context="on"][data-site-theme="halloween"] .trust-item strong { color:#fff5ff; }
body[data-route="home"][data-theme-context="on"][data-site-theme="halloween"] .trust-item small { color:#cdbfd3; }
body[data-route="home"][data-theme-context="on"][data-site-theme="halloween"] .trust-item svg { color:#f09a44; }
body[data-route="home"][data-theme-context="on"][data-site-theme="halloween"] #approach .feature-card { box-shadow:0 14px 34px rgba(62,32,77,.08); }
body[data-route="home"][data-theme-context="on"][data-site-theme="halloween"] #approach .feature-card:nth-child(odd) { border-top-color:#ee933c; }
body[data-route="home"][data-theme-context="on"][data-site-theme="halloween"] #approach .feature-card:nth-child(even) { border-top:3px solid #7549a0; }
body[data-route="home"][data-theme-context="on"][data-site-theme="halloween"] .cta-panel { background:linear-gradient(135deg,#25152f,#4b2454 62%,#7c4322); }

/* WINTER — frosted glass, icy board and restrained crystalline accents. */
body[data-route="home"][data-theme-context="on"][data-site-theme="winter"] .hero {
  background:
    radial-gradient(circle at 78% 22%,rgba(151,211,237,.22),transparent 21rem),
    radial-gradient(circle at 16% 84%,rgba(98,146,190,.10),transparent 20rem),
    linear-gradient(180deg,#fbfdff 0%,#eaf4fb 100%);
}
body[data-route="home"][data-theme-context="on"][data-site-theme="winter"] .math-board {
  background:linear-gradient(145deg,#203d56,#315f80 58%,#5486a5);
  border-color:rgba(205,237,250,.42);
}
body[data-route="home"][data-theme-context="on"][data-site-theme="winter"] .math-board::after { content:"❄"; color:#f6fdff; font-size:38px; right:2px; top:-14px; opacity:.85; text-shadow:0 4px 16px rgba(49,96,130,.32); }
body[data-route="home"][data-theme-context="on"][data-site-theme="winter"] .trust-item { background:rgba(255,255,255,.54); }
body[data-route="home"][data-theme-context="on"][data-site-theme="winter"] #approach .feature-card { backdrop-filter:blur(8px); }
body[data-route="home"][data-theme-context="on"][data-site-theme="winter"] #approach .feature-card:nth-child(odd) { border-top-color:#93cce5; }
body[data-route="home"][data-theme-context="on"][data-site-theme="winter"] #approach .feature-card:nth-child(even) { border-top:3px solid #628fb6; }
body[data-route="home"][data-theme-context="on"][data-site-theme="winter"] .review-card { box-shadow:0 12px 34px rgba(67,111,145,.07); }
body[data-route="home"][data-theme-context="on"][data-site-theme="winter"] .cta-panel { background:linear-gradient(135deg,#274661,#426f90 68%,#6294b3); }

/* NEW YEAR — evergreen, ruby and gold, with a board that feels like a festive card. */
body[data-route="home"][data-theme-context="on"][data-site-theme="newyear"] .hero {
  background:
    radial-gradient(circle at 80% 20%,rgba(227,190,77,.16),transparent 18rem),
    radial-gradient(circle at 12% 90%,rgba(201,68,82,.10),transparent 20rem),
    linear-gradient(180deg,#fffdf7 0%,#edf5ee 100%);
}
body[data-route="home"][data-theme-context="on"][data-site-theme="newyear"] .hero::before { color:#d7ad3f; opacity:.22; text-shadow:0 0 24px rgba(229,189,77,.35); }
body[data-route="home"][data-theme-context="on"][data-site-theme="newyear"] .math-board {
  background:linear-gradient(145deg,#14372f,#205943 58%,#2d7354);
  border-color:rgba(231,195,86,.35);
}
body[data-route="home"][data-theme-context="on"][data-site-theme="newyear"] .math-board::before { border-color:rgba(234,199,93,.22); }
body[data-route="home"][data-theme-context="on"][data-site-theme="newyear"] .math-board::after { content:"🎁"; font-size:30px; right:-5px; top:-12px; filter:drop-shadow(0 6px 10px rgba(0,0,0,.18)); }
body[data-route="home"][data-theme-context="on"][data-site-theme="newyear"] .trust-strip { border-top:3px solid #d1a842; }
body[data-route="home"][data-theme-context="on"][data-site-theme="newyear"] #approach .feature-card:nth-child(odd) { border-top-color:#c94754; }
body[data-route="home"][data-theme-context="on"][data-site-theme="newyear"] #approach .feature-card:nth-child(even) { border-top:3px solid #2c785c; }
body[data-route="home"][data-theme-context="on"][data-site-theme="newyear"] .price-card { box-shadow:0 14px 40px rgba(30,92,69,.08); }
body[data-route="home"][data-theme-context="on"][data-site-theme="newyear"] .review-card { border-top:3px solid color-mix(in srgb,#d5ab43 70%,var(--home-seasonal-border)); }
body[data-route="home"][data-theme-context="on"][data-site-theme="newyear"] .cta-panel { background:linear-gradient(135deg,#173e34,#24614a 65%,#8b3440); }

/* SPRING — airy blossom wash, soft botanical cards and fresh green rhythm. */
body[data-route="home"][data-theme-context="on"][data-site-theme="spring"] .hero {
  background:
    radial-gradient(circle at 85% 18%,rgba(227,152,176,.20),transparent 19rem),
    radial-gradient(circle at 12% 80%,rgba(102,164,118,.14),transparent 20rem),
    linear-gradient(180deg,#fffefd 0%,#edf8ef 100%);
}
body[data-route="home"][data-theme-context="on"][data-site-theme="spring"] .math-board { background:linear-gradient(145deg,#315b45,#4f7d5f 60%,#719878); }
body[data-route="home"][data-theme-context="on"][data-site-theme="spring"] .math-board::after { content:"🌷"; font-size:32px; right:-5px; top:-12px; }
body[data-route="home"][data-theme-context="on"][data-site-theme="spring"] #approach::after {
  content:"❀";
  position:absolute;
  right:6%;
  bottom:28px;
  z-index:-1;
  color:#e2a1b6;
  font-size:92px;
  opacity:.08;
  pointer-events:none;
}
body[data-route="home"][data-theme-context="on"][data-site-theme="spring"] #approach .feature-card:nth-child(odd) { border-top-color:#e0a0b5; }
body[data-route="home"][data-theme-context="on"][data-site-theme="spring"] #approach .feature-card:nth-child(even) { border-top:3px solid #78ad87; }
body[data-route="home"][data-theme-context="on"][data-site-theme="spring"] .cta-panel { background:linear-gradient(135deg,#315b45,#588667 67%,#a9657e); }

/* EASTER — soft pastel geometry, rounded cards and subtle decorated-egg rhythm. */
body[data-route="home"][data-theme-context="on"][data-site-theme="easter"] .hero {
  background:
    radial-gradient(ellipse at 83% 18%,rgba(231,168,189,.23),transparent 17rem),
    radial-gradient(ellipse at 17% 83%,rgba(159,132,194,.14),transparent 20rem),
    linear-gradient(180deg,#fffdf9 0%,#f5edf8 100%);
}
body[data-route="home"][data-theme-context="on"][data-site-theme="easter"] .math-board { background:linear-gradient(145deg,#50425f,#75638b 58%,#a27f9a); }
body[data-route="home"][data-theme-context="on"][data-site-theme="easter"] .math-board::after { content:"🥚"; font-size:31px; right:-4px; top:-12px; transform:rotate(13deg); }
body[data-route="home"][data-theme-context="on"][data-site-theme="easter"] #approach .feature-card,
body[data-route="home"][data-theme-context="on"][data-site-theme="easter"] .review-card,
body[data-route="home"][data-theme-context="on"][data-site-theme="easter"] .lesson-example-card { border-radius:22px 22px 18px 18px; }
body[data-route="home"][data-theme-context="on"][data-site-theme="easter"] #approach .feature-card:nth-child(odd) { border-top-color:#dfa8c0; }
body[data-route="home"][data-theme-context="on"][data-site-theme="easter"] #approach .feature-card:nth-child(even) { border-top:3px solid #9d82bc; }
body[data-route="home"][data-theme-context="on"][data-site-theme="easter"] .reviews-section::after {
  content:"🥚   🌼   🥚";
  position:absolute;
  right:5%;
  top:25px;
  z-index:-1;
  font-size:30px;
  letter-spacing:11px;
  opacity:.08;
  pointer-events:none;
}
body[data-route="home"][data-theme-context="on"][data-site-theme="easter"] .cta-panel { background:linear-gradient(135deg,#514463,#7a6695 65%,#b78298); }

/* SUMMER — bright sky glow, fresh teal board and sunny yellow details. */
body[data-route="home"][data-theme-context="on"][data-site-theme="summer"] .hero {
  background:
    radial-gradient(circle at 84% 17%,rgba(244,193,75,.25),transparent 18rem),
    radial-gradient(circle at 14% 86%,rgba(71,178,172,.13),transparent 21rem),
    linear-gradient(180deg,#fffef8 0%,#eaf8f5 100%);
}
body[data-route="home"][data-theme-context="on"][data-site-theme="summer"] .hero::before { color:#edb83f; opacity:.24; text-shadow:0 0 28px rgba(238,183,73,.32); }
body[data-route="home"][data-theme-context="on"][data-site-theme="summer"] .math-board { background:linear-gradient(145deg,#1f5660,#267787 57%,#38939a); }
body[data-route="home"][data-theme-context="on"][data-site-theme="summer"] .math-board::after { content:"☀"; color:#f7c852; font-size:39px; right:-5px; top:-14px; text-shadow:0 5px 15px rgba(131,91,10,.20); }
body[data-route="home"][data-theme-context="on"][data-site-theme="summer"] #approach .feature-card:nth-child(odd) { border-top-color:#efbd4b; }
body[data-route="home"][data-theme-context="on"][data-site-theme="summer"] #approach .feature-card:nth-child(even) { border-top:3px solid #49aaa9; }
body[data-route="home"][data-theme-context="on"][data-site-theme="summer"] .review-card { box-shadow:0 12px 34px rgba(40,132,140,.07); }
body[data-route="home"][data-theme-context="on"][data-site-theme="summer"] .cta-panel { background:linear-gradient(135deg,#205762,#2c7b86 66%,#b88c32); }

/* Motion stays decorative, modest and opt-in. */
body[data-route="home"][data-theme-context="on"][data-theme-motion="on"][data-site-theme="autumn"] .hero::after { animation:homeSeasonalFloat 6.5s ease-in-out infinite; }
body[data-route="home"][data-theme-context="on"][data-theme-motion="on"][data-site-theme="halloween"] .hero::after { animation:homeSeasonalBat 7s ease-in-out infinite; }
body[data-route="home"][data-theme-context="on"][data-theme-motion="on"][data-site-theme="winter"] .hero::before,
body[data-route="home"][data-theme-context="on"][data-theme-motion="on"][data-site-theme="newyear"] .hero::before { animation:homeSeasonalTwinkle 5.5s ease-in-out infinite; }
body[data-route="home"][data-theme-context="on"][data-theme-motion="on"][data-site-theme="spring"] .hero::before { animation:homeSeasonalFloat 6s ease-in-out infinite; }
body[data-route="home"][data-theme-context="on"][data-theme-motion="on"][data-site-theme="summer"] .hero::before { animation:homeSeasonalSun 7s ease-in-out infinite; }
@keyframes homeSeasonalFloat { 0%,100%{transform:translateY(0) rotate(-12deg)} 50%{transform:translateY(-8px) rotate(-5deg)} }
@keyframes homeSeasonalBat { 0%,100%{transform:translate(0,0) rotate(-12deg)} 50%{transform:translate(16px,-8px) rotate(-4deg)} }
@keyframes homeSeasonalTwinkle { 0%,100%{opacity:.10;transform:scale(1) rotate(9deg)} 50%{opacity:.24;transform:scale(1.07) rotate(6deg)} }
@keyframes homeSeasonalSun { 0%,100%{transform:scale(1) rotate(9deg)} 50%{transform:scale(1.06) rotate(15deg)} }

/* Mobile: preserve the app-like layout while restoring the active seasonal identity. */
@media (max-width: 760px) {
  body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) { background:var(--home-seasonal-surface); }
  body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .site-header { background:var(--theme-header); }
  body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .hero {
    background:var(--theme-home);
  }
  body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .hero::before {
    right:10px;
    top:14px;
    font-size:46px;
    opacity:.09;
  }
  body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .hero::after { display:none; }
  body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .mobile-home-lesson-card {
    border-color:var(--home-seasonal-border);
    background:linear-gradient(180deg,var(--home-seasonal-surface),color-mix(in srgb,var(--home-seasonal-soft) 45%,white));
    box-shadow:0 10px 30px color-mix(in srgb,var(--primary) 8%,transparent);
  }
  body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .mobile-home-tutor { border-bottom-color:var(--home-seasonal-border); }
  body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .mobile-home-facts > div { border-right-color:var(--home-seasonal-border); }
  body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .hero-note { color:var(--muted); }
  body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .mobile-trust-section {
    background:color-mix(in srgb,var(--home-seasonal-soft) 54%,white);
  }
  body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .mobile-trust-section .trust-item {
    border-color:var(--home-seasonal-border) !important;
    background:color-mix(in srgb,var(--home-seasonal-surface) 94%,white);
  }
  body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .mobile-trust-section .trust-item:hover { background:color-mix(in srgb,var(--home-seasonal-surface) 94%,white); }
  body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) #approach .feature-grid {
    border-color:var(--home-seasonal-border);
    background:var(--home-seasonal-surface);
    box-shadow:0 8px 24px color-mix(in srgb,var(--primary) 7%,transparent);
  }
  body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) #approach .feature-card {
    border-top:0 !important;
    border-bottom-color:var(--home-seasonal-border);
    background:transparent;
    box-shadow:none;
    border-radius:0;
  }
  body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) #approach .feature-card::after { right:12px;top:13px;font-size:16px;opacity:.13; }
  body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) #approach .feature-card:not(:last-child) .feature-number::after { background:var(--home-seasonal-border); }
  body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .reviews-section { background:color-mix(in srgb,var(--home-seasonal-soft) 64%,white); }
  body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .review-card {
    border-color:var(--home-seasonal-border);
    background:var(--home-seasonal-surface);
    box-shadow:0 8px 24px color-mix(in srgb,var(--primary) 7%,transparent);
  }
  body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .review-meta { border-top-color:var(--home-seasonal-border); }
  body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .review-index { background:var(--home-seasonal-soft);color:var(--muted); }
  body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .contact-section { background:color-mix(in srgb,var(--home-seasonal-soft) 70%,white); }
  body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .cta-panel { background:var(--theme-shell); }
  body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .contact-form { border-color:var(--home-seasonal-border);background:var(--home-seasonal-surface); }
  body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .contact-form input,
  body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .contact-form textarea { background:color-mix(in srgb,var(--home-seasonal-surface) 72%,var(--home-seasonal-soft)); }

  /* Halloween mobile remains dark only in the hero; the reading sections stay light. */
  body[data-route="home"][data-theme-context="on"][data-site-theme="halloween"] .hero { background:linear-gradient(145deg,#21152a,#392043 62%,#4b283e); }
  body[data-route="home"][data-theme-context="on"][data-site-theme="halloween"] .mobile-home-lesson-card { background:rgba(255,250,254,.96); }
  body[data-route="home"][data-theme-context="on"][data-site-theme="halloween"] .mobile-home-lesson-card .mobile-home-tutor strong,
  body[data-route="home"][data-theme-context="on"][data-site-theme="halloween"] .mobile-home-lesson-card .mobile-home-facts strong { color:#302638; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-route="home"][data-theme-context="on"] .hero::before,
  body[data-route="home"][data-theme-context="on"] .hero::after { animation:none !important; }
}

/* v1.23.23 — Seasonal homepage contrast hardening.
   Keep every marketing label readable after the richer v1.23.22 theme surfaces. */
body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) {
  --home-readable-accent: var(--primary-dark);
}

/* Small uppercase labels need the darker palette token on light seasonal surfaces. */
body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .eyebrow:not(.light),
body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .form-heading > span {
  color: var(--home-readable-accent);
}
body[data-route="home"][data-theme-context="on"][data-site-theme="halloween"] .hero .eyebrow {
  color: #ffbd70;
  border-color: rgba(255,189,112,.34);
  background: rgba(43,23,53,.62);
}

/* Primary CTAs use the dark palette token so white button copy remains AA-readable in every theme. */
body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .btn-primary {
  background: var(--primary-dark);
  color: #fff;
}
body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .btn-primary:hover {
  background: color-mix(in srgb, var(--primary-dark) 88%, #000);
}

/* Learning sequence: preserve the original dark active-state semantics after seasonal card recolouring. */
body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .lesson-example-card.is-active {
  background: linear-gradient(145deg, var(--navy), var(--navy-2));
  color: #fff;
  border-color: color-mix(in srgb, var(--accent) 42%, var(--navy));
  box-shadow: 0 16px 34px color-mix(in srgb, var(--navy) 24%, transparent);
}
body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .lesson-example-card.is-active strong {
  color: #fff;
}
body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .lesson-example-card.is-active small {
  color: #f0f4f5;
}
body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .lesson-example-card.is-active > span {
  background: rgba(255,255,255,.94);
  color: var(--navy);
}
body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .lesson-example-card:not(.is-active) strong,
body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .price-card > strong {
  color: var(--ink);
}
body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .lesson-example-card:not(.is-active) small,
body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .price-card > small,
body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .price-card p,
body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .price-card > strong span {
  color: var(--muted);
}
body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .check-list span {
  color: var(--ink);
}
body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .trial-pill {
  color: var(--primary-dark);
  background: var(--accent-soft);
}

/* The themed teaching board stays visually rich, but small copy is no longer washed out. */
body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .math-board {
  box-shadow:
    inset 0 0 0 999px rgba(7,15,24,.20),
    0 34px 80px color-mix(in srgb, var(--navy) 24%, transparent),
    inset 0 1px 0 rgba(255,255,255,.09);
}
body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .math-board .board-top,
body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .math-board .equation-card span,
body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .math-board .progress-card {
  color: #f5f8fb;
}
body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .math-board .equation-card,
body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .math-board .progress-card {
  background: rgba(8,17,26,.18);
}
body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .math-board .teacher-avatar {
  background: var(--primary-soft);
  color: var(--primary-dark);
}

/* FAQ/form microcopy and compact result pills use the darker semantic token. */
body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .accordion-list summary > span,
body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .form-privacy a,
body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .review-result,
body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .review-index {
  color: var(--primary-dark);
}

/* CTA text gets a subtle darkening layer; all content stays above it. */
body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .cta-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(90deg, rgba(7,14,20,.20), rgba(7,14,20,.10));
  pointer-events: none;
}
body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .cta-panel > * {
  position: relative;
  z-index: 1;
}
body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .cta-panel .eyebrow.light,
body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .contact-details a,
body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .contact-details a > strong {
  color: #f4f7fb;
}

@media (max-width: 760px) {
  /* Replace legacy pale greys that were tuned only for the default white mobile home. */
  body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .mobile-home-tutor small,
  body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .mobile-home-tutor span,
  body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .mobile-home-facts small,
  body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .mobile-home-text-link,
  body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .mobile-trust-section .trust-item small,
  body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .review-author small {
    color: var(--muted);
  }
  body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .mobile-home-tutor strong,
  body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .mobile-home-facts strong,
  body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .mobile-trust-section .trust-item strong,
  body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .review-author strong {
    color: var(--ink);
  }
  body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .review-index {
    background: color-mix(in srgb, var(--primary-soft) 76%, white);
    color: var(--primary-dark);
  }
  body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .contact-details a > span {
    color: #dbe3f1;
  }
  body[data-route="home"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .contact-details a > strong {
    color: #f4f7fb;
  }

  /* Halloween's light information card keeps dark readable copy inside the dark hero. */
  body[data-route="home"][data-theme-context="on"][data-site-theme="halloween"] .mobile-home-lesson-card .mobile-home-tutor small,
  body[data-route="home"][data-theme-context="on"][data-site-theme="halloween"] .mobile-home-lesson-card .mobile-home-tutor span,
  body[data-route="home"][data-theme-context="on"][data-site-theme="halloween"] .mobile-home-lesson-card .mobile-home-facts small,
  body[data-route="home"][data-theme-context="on"][data-site-theme="halloween"] .mobile-home-lesson-card .mobile-home-text-link {
    color: #62556a;
  }
}

/* v1.23.24 — Seasonal Booking Experiences: the booking page now has a dedicated theme pass
   per season, not only themed slot buttons. The route keeps usability first while giving
   each style a distinct booking atmosphere across hero, calendar, summary and form surfaces. */
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) {
  --booking-surface: var(--surface);
  --booking-soft: var(--surface-soft);
  --booking-panel: color-mix(in srgb, var(--surface) 92%, white);
  --booking-border: color-mix(in srgb, var(--primary) 18%, var(--line));
  --booking-glow: color-mix(in srgb, var(--accent) 18%, transparent);
  --booking-chip: color-mix(in srgb, var(--surface) 78%, transparent);
  --booking-chip-strong: color-mix(in srgb, var(--primary) 8%, var(--surface));
  --booking-selected-bg: linear-gradient(145deg, var(--primary-dark), var(--primary));
  --booking-selected-border: color-mix(in srgb, var(--primary-dark) 72%, white);
  --booking-selected-shadow: 0 12px 24px color-mix(in srgb, var(--primary) 17%, transparent);
  --booking-slot-bg: linear-gradient(150deg, color-mix(in srgb, var(--surface) 95%, white), color-mix(in srgb, var(--surface-soft) 95%, white));
  --booking-slot-border: color-mix(in srgb, var(--primary) 20%, var(--line));
  --booking-kicker: var(--primary-dark);
  --booking-hero-a: var(--theme-context-icon);
  --booking-hero-b: var(--theme-context-secondary);
  --booking-summary-mark: var(--theme-context-secondary);
  --booking-ornament: var(--theme-context-icon);
}
body[data-route="booking"][data-theme-context="on"][data-site-theme="autumn"] {
  --booking-surface: #fffaf1;
  --booking-soft: #f5ead7;
  --booking-panel: #fff8ee;
  --booking-border: #e4ccb0;
  --booking-glow: rgba(219,139,62,.18);
  --booking-chip: #fff3e2;
  --booking-chip-strong: #f3e2c8;
  --booking-selected-bg: linear-gradient(145deg, #965022, #cf7f37);
  --booking-selected-border: #8f4a1e;
  --booking-selected-shadow: 0 14px 28px rgba(159,92,33,.18);
  --booking-slot-bg: linear-gradient(150deg,#fffdf9,#fff4e6);
  --booking-slot-border: #dcb78c;
  --booking-kicker: #8f4a1e;
  --booking-hero-a: "🍁";
  --booking-hero-b: "🍂";
  --booking-summary-mark: "🍂";
  --booking-ornament: "🍁";
}
body[data-route="booking"][data-theme-context="on"][data-site-theme="halloween"] {
  --booking-surface: #fff9fd;
  --booking-soft: #eee5f3;
  --booking-panel: #fcf7ff;
  --booking-border: #d7c4df;
  --booking-glow: rgba(238,140,46,.18);
  --booking-chip: #f7effa;
  --booking-chip-strong: #ede2f3;
  --booking-selected-bg: linear-gradient(145deg, #4b265c, #7a3c91);
  --booking-selected-border: #ee953a;
  --booking-selected-shadow: 0 14px 28px rgba(80,43,97,.2);
  --booking-slot-bg: linear-gradient(150deg,#fffafe,#f6edf8);
  --booking-slot-border: #c9aed4;
  --booking-kicker: #6d347f;
  --booking-hero-a: "☾";
  --booking-hero-b: "🦇";
  --booking-summary-mark: "🎃";
  --booking-ornament: "🕸";
}
body[data-route="booking"][data-theme-context="on"][data-site-theme="winter"] {
  --booking-surface: #fbfdff;
  --booking-soft: #eaf4fb;
  --booking-panel: #f8fbff;
  --booking-border: #cfe2ef;
  --booking-glow: rgba(124,188,220,.17);
  --booking-chip: #f2f9fd;
  --booking-chip-strong: #e2f0f7;
  --booking-selected-bg: linear-gradient(145deg, #3d6f9b, #5d95bf);
  --booking-selected-border: #d8eef8;
  --booking-selected-shadow: 0 14px 28px rgba(80,135,173,.18);
  --booking-slot-bg: linear-gradient(150deg,#ffffff,#eef8fd);
  --booking-slot-border: #b9d9e9;
  --booking-kicker: #36658d;
  --booking-hero-a: "❄";
  --booking-hero-b: "✦";
  --booking-summary-mark: "❅";
  --booking-ornament: "❄";
}
body[data-route="booking"][data-theme-context="on"][data-site-theme="newyear"] {
  --booking-surface: #fffdf7;
  --booking-soft: #edf4ee;
  --booking-panel: #fbfff8;
  --booking-border: #cfe0d1;
  --booking-glow: rgba(226,191,82,.18);
  --booking-chip: #f6faef;
  --booking-chip-strong: #e7f0e4;
  --booking-selected-bg: linear-gradient(145deg, #205f4a, #2e7c5f);
  --booking-selected-border: #fff0c5;
  --booking-selected-shadow: 0 14px 30px rgba(34,103,79,.2);
  --booking-slot-bg: linear-gradient(150deg,#fffef9,#f0f7f1);
  --booking-slot-border: #aacdbe;
  --booking-kicker: #205f4a;
  --booking-hero-a: "✦";
  --booking-hero-b: "🎁";
  --booking-summary-mark: "🎄";
  --booking-ornament: "✨";
}
body[data-route="booking"][data-theme-context="on"][data-site-theme="spring"] {
  --booking-surface: #fffefd;
  --booking-soft: #eef7ef;
  --booking-panel: #fcfffc;
  --booking-border: #d3e6d7;
  --booking-glow: rgba(222,153,177,.18);
  --booking-chip: #f4faf4;
  --booking-chip-strong: #e7f2e8;
  --booking-selected-bg: linear-gradient(145deg, #4f8865, #73a783);
  --booking-selected-border: #efc1d0;
  --booking-selected-shadow: 0 14px 28px rgba(95,151,113,.16);
  --booking-slot-bg: linear-gradient(150deg,#fffefd,#f1f9f2);
  --booking-slot-border: #bfdcc7;
  --booking-kicker: #487d5b;
  --booking-hero-a: "✿";
  --booking-hero-b: "🌿";
  --booking-summary-mark: "🌷";
  --booking-ornament: "❀";
}
body[data-route="booking"][data-theme-context="on"][data-site-theme="easter"] {
  --booking-surface: #fffdfb;
  --booking-soft: #f6eef8;
  --booking-panel: #fffdfd;
  --booking-border: #e1d4e8;
  --booking-glow: rgba(230,173,196,.17);
  --booking-chip: #fbf6fc;
  --booking-chip-strong: #f2e9f6;
  --booking-selected-bg: linear-gradient(145deg, #8066a3, #a88bc2);
  --booking-selected-border: #efbfd2;
  --booking-selected-shadow: 0 14px 28px rgba(138,110,171,.16);
  --booking-slot-bg: linear-gradient(150deg,#fffefd,#fbf3fc);
  --booking-slot-border: #dbc8e3;
  --booking-kicker: #765e97;
  --booking-hero-a: "🌼";
  --booking-hero-b: "🥚";
  --booking-summary-mark: "🐣";
  --booking-ornament: "🥚";
}
body[data-route="booking"][data-theme-context="on"][data-site-theme="summer"] {
  --booking-surface: #fffef8;
  --booking-soft: #eaf8f6;
  --booking-panel: #fbfffe;
  --booking-border: #cee7e3;
  --booking-glow: rgba(238,188,77,.19);
  --booking-chip: #f1faf8;
  --booking-chip-strong: #e2f3ef;
  --booking-selected-bg: linear-gradient(145deg, #1e7f8e, #35a2ab);
  --booking-selected-border: #f2c556;
  --booking-selected-shadow: 0 14px 28px rgba(36,145,154,.18);
  --booking-slot-bg: linear-gradient(150deg,#fffefa,#eefaf7);
  --booking-slot-border: #b3dcd6;
  --booking-kicker: #237b85;
  --booking-hero-a: "☀";
  --booking-hero-b: "🌿";
  --booking-summary-mark: "☀";
  --booking-ornament: "✦";
}

/* Shared seasonal booking language */
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .compact-page-hero,
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .booking-section { position: relative; isolation: isolate; overflow: clip; }
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .compact-page-hero::before,
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .compact-page-hero::after,
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .booking-section::before {
  position: absolute;
  z-index: -1;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .compact-page-hero::before {
  content: var(--booking-hero-a);
  right: max(2vw, calc((100vw - var(--container))/2 - 10px));
  top: 28px;
  font-size: clamp(56px, 8vw, 110px);
  opacity: .11;
  transform: rotate(10deg);
  filter: drop-shadow(0 18px 34px var(--booking-glow));
}
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .compact-page-hero::after {
  content: var(--booking-hero-b);
  left: max(2vw, calc((100vw - var(--container))/2 - 32px));
  bottom: 20px;
  font-size: clamp(28px, 4vw, 64px);
  opacity: .13;
  transform: rotate(-10deg);
}
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .booking-section::before {
  content: "";
  inset: 0;
  background:
    radial-gradient(circle at 9% 12%, var(--booking-glow), transparent 18rem),
    radial-gradient(circle at 92% 26%, color-mix(in srgb, var(--booking-glow) 65%, transparent), transparent 20rem);
}
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .compact-page-hero .container {
  background: linear-gradient(145deg, color-mix(in srgb, var(--booking-surface) 94%, white), color-mix(in srgb, var(--booking-soft) 92%, white));
  border: 1px solid var(--booking-border);
  box-shadow: 0 26px 60px color-mix(in srgb, var(--primary) 9%, transparent);
}
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .compact-page-hero .eyebrow {
  border-color: color-mix(in srgb, var(--booking-kicker) 18%, transparent);
  background: color-mix(in srgb, var(--booking-surface) 88%, transparent);
  color: var(--booking-kicker);
}
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .booking-mobile-screen-heading .mobile-screen-kicker,
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .booking-mobile-screen-heading .mobile-screen-step {
  color: var(--booking-kicker);
}
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .mobile-booking-progress span {
  background: color-mix(in srgb, var(--booking-border) 62%, white);
}
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .mobile-booking-progress span.is-active {
  background: linear-gradient(90deg, var(--booking-kicker), var(--primary));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--booking-glow) 65%, transparent);
}
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .booking-calendar,
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .booking-summary {
  background:
    linear-gradient(180deg, color-mix(in srgb, white 72%, transparent), transparent 58px),
    var(--booking-panel);
  border-color: var(--booking-border);
  box-shadow: 0 18px 42px color-mix(in srgb, var(--primary) 9%, transparent);
}
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .booking-step-heading h2,
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .booking-step-heading p,
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .slot-heading > div > strong,
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .booking-field-title,
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .mobile-booking-mode-title {
  color: var(--primary-dark);
}
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .booking-step-heading .step-number {
  border-color: color-mix(in srgb, var(--booking-kicker) 20%, transparent);
  background: linear-gradient(145deg, color-mix(in srgb, var(--booking-chip-strong) 75%, white), color-mix(in srgb, var(--booking-chip) 92%, white));
  color: var(--booking-kicker);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .booking-summary > .booking-step-heading::after {
  content: var(--booking-summary-mark);
  margin-left: auto;
  font-size: 1.2rem;
  line-height: 1;
  opacity: .72;
}
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .mobile-booking-date-toolbar,
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .mobile-booking-time-label,
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .timezone-badge,
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .mobile-booking-selection,
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .price-summary,
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .booking-total,
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .mobile-booking-mode,
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .form-privacy,
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .auth-required,
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .verification-required,
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .summary-placeholder,
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .mobile-no-available-slots {
  background: color-mix(in srgb, var(--booking-soft) 72%, white);
  border-color: var(--booking-border);
}
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .mobile-booking-date-toolbar,
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .mobile-booking-time-label,
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .timezone-badge {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
}
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .date-choice {
  background: linear-gradient(180deg, color-mix(in srgb, white 86%, transparent), transparent), var(--booking-chip);
  border-color: var(--booking-border);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--primary) 4%, transparent);
}
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .date-choice:hover {
  border-color: color-mix(in srgb, var(--booking-kicker) 32%, var(--booking-border));
  transform: translateY(-1px);
}
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .date-choice.is-selected {
  background: linear-gradient(145deg, color-mix(in srgb, var(--booking-chip-strong) 78%, white), color-mix(in srgb, var(--booking-surface) 88%, white));
  border-color: color-mix(in srgb, var(--booking-kicker) 48%, var(--booking-border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--booking-glow) 55%, transparent), 0 12px 24px color-mix(in srgb, var(--primary) 8%, transparent);
}
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .slot-heading > div > span,
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .booking-legend,
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .summary-placeholder p,
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .auth-required p,
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .verification-required p,
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .verification-required small,
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .booking-total span,
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .booking-total small,
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .form-privacy,
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .trial-booking-copy small,
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .mobile-booking-mode-options small {
  color: var(--muted);
}
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .slot-button:not(.is-disabled) {
  background: var(--booking-slot-bg);
  border-color: var(--booking-slot-border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.78), 0 8px 16px color-mix(in srgb, var(--primary) 5%, transparent);
}
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .slot-button.is-selected {
  background: var(--booking-selected-bg);
  border-color: var(--booking-selected-border);
  box-shadow: var(--booking-selected-shadow);
  color: #fff;
}
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .slot-button.is-selected strong,
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .slot-button.is-selected > span,
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .slot-button.is-selected > small {
  color: #fff;
}
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .summary-placeholder,
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .auth-required,
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .verification-required {
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--primary) 7%, transparent);
}
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .summary-placeholder::after,
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .auth-required::after,
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .verification-required::after {
  content: var(--booking-ornament);
  position: absolute;
  right: 14px;
  top: 12px;
  font-size: 18px;
  line-height: 1;
  opacity: .3;
  pointer-events: none;
}
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .summary-placeholder .summary-illustration {
  color: var(--booking-kicker);
  filter: drop-shadow(0 10px 14px color-mix(in srgb, var(--booking-glow) 75%, transparent));
}
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .booking-details-fields > .booking-detail-field,
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .trial-booking-card,
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .mobile-booking-mode {
  background: linear-gradient(180deg, color-mix(in srgb, white 86%, transparent), transparent), var(--booking-surface);
  border: 1px solid var(--booking-border);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--primary) 4%, transparent);
}
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .booking-details-fields input,
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .booking-details-fields select,
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .booking-details-fields textarea {
  background: color-mix(in srgb, var(--booking-soft) 55%, white);
  border-color: color-mix(in srgb, var(--booking-border) 82%, white);
}
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .booking-details-fields input:focus,
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .booking-details-fields select:focus,
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .booking-details-fields textarea:focus {
  border-color: color-mix(in srgb, var(--booking-kicker) 58%, white);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--booking-glow) 65%, transparent);
}
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .trial-booking-card:focus-within,
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .mobile-booking-mode-options label:has(input:checked) {
  border-color: color-mix(in srgb, var(--booking-kicker) 42%, var(--booking-border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--booking-glow) 58%, transparent);
}
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .mobile-booking-mode-options label {
  background: color-mix(in srgb, var(--booking-soft) 52%, white);
  border-color: var(--booking-border);
}
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .mobile-booking-mode-options label:has(input:checked) {
  background: color-mix(in srgb, var(--booking-chip-strong) 72%, white);
}
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .trial-booking-switch {
  background: color-mix(in srgb, var(--booking-border) 55%, white);
}
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .trial-booking-card > input:checked ~ .trial-booking-switch {
  background: linear-gradient(145deg, var(--booking-kicker), var(--primary));
}
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .booking-total {
  background: linear-gradient(135deg, color-mix(in srgb, var(--booking-soft) 82%, white), color-mix(in srgb, var(--booking-surface) 86%, white));
}
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .booking-total strong,
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .price-summary strong {
  color: var(--primary-dark);
}
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .form-privacy a {
  color: var(--booking-kicker);
  text-decoration-color: color-mix(in srgb, var(--booking-kicker) 40%, transparent);
}
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .mobile-no-available-slots {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 10px 24px color-mix(in srgb, var(--primary) 6%, transparent);
}
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .mobile-no-available-slots button,
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .mobile-change-slot {
  color: var(--booking-kicker);
}

/* Theme-specific booking identity so each page feels purposely art-directed. */
body[data-route="booking"][data-theme-context="on"][data-site-theme="autumn"] .compact-page-hero .container::after {
  content: "";
  position: absolute;
  inset: auto 24px 0 auto;
  width: 140px;
  height: 16px;
  background: radial-gradient(circle, rgba(207,127,55,.18) 0 3px, transparent 3.5px) 0 0/22px 16px repeat-x;
  opacity: .9;
  pointer-events: none;
}
body[data-route="booking"][data-theme-context="on"][data-site-theme="halloween"] .booking-summary::before {
  content: "🦇";
  position: absolute;
  right: 20px;
  top: 20px;
  font-size: 20px;
  opacity: .32;
  pointer-events: none;
}
body[data-route="booking"][data-theme-context="on"][data-site-theme="winter"] .booking-calendar::before {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: 0;
  height: 8px;
  border-radius: 0 0 12px 12px;
  background: linear-gradient(90deg, rgba(167,215,239,.55), rgba(255,255,255,.95), rgba(167,215,239,.55));
  opacity: .9;
  pointer-events: none;
}
body[data-route="booking"][data-theme-context="on"][data-site-theme="newyear"] .compact-page-hero .container::before {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  top: 0;
  height: 8px;
  border-radius: 0 0 10px 10px;
  background: repeating-linear-gradient(90deg,#2b7259 0 18px,#d64b58 18px 28px,#e5bd4d 28px 38px,#2b7259 38px 56px);
  opacity: .82;
  pointer-events: none;
}
body[data-route="booking"][data-theme-context="on"][data-site-theme="spring"] .booking-summary::before {
  content: "";
  position: absolute;
  right: 16px;
  top: 14px;
  width: 54px;
  height: 54px;
  background: radial-gradient(circle, rgba(228,159,183,.32) 0 20%, transparent 22%) 50% 0/24px 24px no-repeat,
              radial-gradient(circle, rgba(228,159,183,.32) 0 20%, transparent 22%) 0 18px/24px 24px no-repeat,
              radial-gradient(circle, rgba(228,159,183,.32) 0 20%, transparent 22%) 24px 18px/24px 24px no-repeat,
              radial-gradient(circle, rgba(228,159,183,.36) 0 18%, transparent 20%) 12px 12px/30px 30px no-repeat;
  opacity: .9;
  pointer-events: none;
}
body[data-route="booking"][data-theme-context="on"][data-site-theme="easter"] .booking-calendar::before {
  content: "";
  position: absolute;
  right: 18px;
  top: 14px;
  width: 38px;
  height: 52px;
  border-radius: 20px 20px 18px 18px;
  background:
    radial-gradient(circle at 50% 20%, rgba(255,255,255,.42) 0 10%, transparent 12%),
    repeating-linear-gradient(180deg, rgba(231,168,189,.18) 0 7px, rgba(255,255,255,0) 7px 14px),
    linear-gradient(180deg,#f8eff9,#efe4f5);
  border: 1px solid rgba(190,156,209,.45);
  box-shadow: 0 8px 18px rgba(161,132,182,.16);
  transform: rotate(8deg);
  pointer-events: none;
}
body[data-route="booking"][data-theme-context="on"][data-site-theme="summer"] .compact-page-hero .container::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 10px;
  background: radial-gradient(12px 8px at 12px 0, transparent 12px, rgba(70,181,193,.18) 13px) 0 0/28px 10px repeat-x;
  opacity: .9;
  pointer-events: none;
}

@media (max-width: 760px) {
  body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .compact-page-hero::before {
    top: 18px;
    right: 10px;
    font-size: 52px;
    opacity: .10;
  }
  body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .compact-page-hero::after {
    left: 8px;
    bottom: 14px;
    font-size: 28px;
    opacity: .12;
  }
  body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .compact-page-hero .container,
  body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .booking-calendar,
  body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .booking-summary {
    box-shadow: 0 14px 28px color-mix(in srgb, var(--primary) 8%, transparent);
  }
  body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .booking-summary > .booking-step-heading::after,
  body[data-route="booking"][data-theme-context="on"][data-site-theme="spring"] .booking-summary::before,
  body[data-route="booking"][data-theme-context="on"][data-site-theme="autumn"] .compact-page-hero .container::after,
  body[data-route="booking"][data-theme-context="on"][data-site-theme="summer"] .compact-page-hero .container::after {
    display: none;
  }
  body[data-route="booking"][data-theme-context="on"][data-site-theme="easter"] .booking-calendar::before {
    width: 28px;
    height: 40px;
    top: 12px;
    right: 14px;
  }
}
@media (prefers-reduced-motion: reduce) {
  body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .date-choice:hover {
    transform: none;
  }
}

/* v1.23.24-hotfix.1 — Email verification stability + visual polish.
   Custom rectangular logos must never inherit the fixed 42x42 verification icon box. */
.verification-page {
  min-height: calc(100dvh - 150px);
  padding: clamp(18px, 4vw, 42px) 0;
  background:
    radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--primary-soft) 70%, transparent), transparent 26rem),
    linear-gradient(180deg, #f7f9fd 0%, #ffffff 70%);
}
.verify-email-shell { max-width: 720px; }
.verify-email-card {
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 5vw, 48px);
  border: 1px solid color-mix(in srgb, var(--primary) 11%, var(--line));
  border-radius: 24px;
  background: color-mix(in srgb, var(--surface) 97%, white);
  box-shadow: 0 28px 76px rgba(25, 42, 82, .11);
}
.verify-email-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--primary), var(--accent), transparent);
  opacity: .55;
  pointer-events: none;
}
.verify-brand {
  min-width: 0;
  margin-bottom: 28px;
}
.verify-brand .brand-mark:not(.has-image) {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
}
.verify-brand.has-image-logo {
  flex-direction: column;
  gap: 10px;
  margin-bottom: 30px;
}
.verify-brand.has-image-logo .brand-mark.has-image {
  width: auto;
  height: auto;
  max-width: min(240px, 72vw);
  max-height: 76px;
  flex: 0 1 auto;
  overflow: visible;
  background: transparent;
  box-shadow: none;
}
.verify-brand.has-image-logo .brand-mark.has-image img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(240px, 72vw);
  max-height: 76px;
  object-fit: contain;
  border-radius: 0;
}
.verify-brand.has-image-logo > span:last-child {
  gap: 2px;
  text-align: center;
}
.verify-brand.has-image-logo strong { font-size: .8rem; }
.verify-brand.has-image-logo small { font-size: .64rem; }
.verify-status-icon {
  box-shadow: inset 0 0 0 1px rgba(51,88,212,.06), 0 12px 28px rgba(38,59,112,.08);
}
.verify-email-card h1 {
  max-width: 560px;
  margin-inline: auto;
  color: var(--ink);
  letter-spacing: -.025em;
}
.verify-email-card p {
  font-size: .9rem;
  line-height: 1.7;
}
.verification-help {
  border-color: color-mix(in srgb, var(--primary) 9%, var(--line));
  background: color-mix(in srgb, var(--surface-soft) 75%, white);
}
.verify-email-refresh-card .verify-status-icon { margin-top: 2px; }
.verify-email-refresh-card p { max-width: 500px; }
.verify-security-note {
  padding-top: 4px;
  color: color-mix(in srgb, var(--muted) 92%, var(--ink));
}

@media (max-width: 720px) {
  .verification-page { padding: 10px 0 24px; }
  .verify-email-shell { width: min(calc(100% - 18px), 720px); }
  .verify-email-card {
    padding: 26px 18px;
    border-radius: 20px;
    box-shadow: 0 18px 44px rgba(25,42,82,.09);
  }
  .verify-brand { margin-bottom: 23px; }
  .verify-brand.has-image-logo { margin-bottom: 24px; }
  .verify-brand.has-image-logo .brand-mark.has-image,
  .verify-brand.has-image-logo .brand-mark.has-image img {
    max-width: min(210px, 70vw);
    max-height: 64px;
  }
  .verify-status-icon {
    width: 66px;
    height: 66px;
    border-radius: 21px;
  }
  .verify-email-card p { font-size: .84rem; }
}

@media (prefers-reduced-motion: reduce) {
  .verify-status-icon .spinner,
  .verify-email-spinner { animation-duration: 1.6s; }
}

/* v1.23.24-hotfix.2 — Booking selection contrast hardening.
   Seasonal booking skins intentionally keep selected date chips light; make their labels
   explicitly dark instead of inheriting the legacy white selected-state typography. */
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .date-choice.is-selected small,
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .date-choice.is-selected strong,
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .date-choice.is-selected span {
  color: var(--primary-dark);
  text-shadow: none;
}
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .date-choice.is-selected strong {
  font-weight: 820;
}
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .date-choice.is-selected small,
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .date-choice.is-selected span {
  opacity: .88;
}

/* Selected time slots use white copy, so darken the themed gradient consistently enough
   that spring/easter/summer and other lighter palettes do not wash out the text. */
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .slot-button.is-selected {
  background: linear-gradient(rgba(0,0,0,.24), rgba(0,0,0,.24)), var(--booking-selected-bg);
}
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .slot-button.is-selected strong,
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .slot-button.is-selected > span,
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .slot-button.is-selected > small {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.18);
}

/* Keep booking action buttons AA-readable across the light spring/easter/summer palettes. */
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .btn-primary {
  background: var(--primary-dark);
  color: #fff;
}
body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .btn-primary:hover {
  background: color-mix(in srgb, var(--primary-dark) 88%, #000);
}

/* v1.23.24-hotfix.3 — Home trust-strip contrast hardening.
   Trust copy must never inherit hero/light-on-dark typography when the strip itself is light. */
body[data-route="home"][data-site-theme]:not([data-site-theme="default"]) .trust-strip .trust-item,
body[data-route="home"][data-site-theme]:not([data-site-theme="default"]) .trust-strip .trust-item > span {
  color: var(--muted);
}
body[data-route="home"][data-site-theme]:not([data-site-theme="default"]) .trust-strip .trust-item strong {
  color: var(--ink);
  text-shadow: none;
}
body[data-route="home"][data-site-theme]:not([data-site-theme="default"]) .trust-strip .trust-item small {
  color: var(--muted);
  opacity: 1;
  text-shadow: none;
}

/* Halloween is intentionally a dark continuation of the cinematic hero when contextual
   page styling is enabled. Re-assert it after the generic mobile seasonal surface rules. */
body[data-route="home"][data-theme-context="on"][data-site-theme="halloween"] .trust-strip.mobile-trust-section {
  background: #2b1a34;
  border-color: #51335c;
}
body[data-route="home"][data-theme-context="on"][data-site-theme="halloween"] .trust-strip .trust-item,
body[data-route="home"][data-theme-context="on"][data-site-theme="halloween"] .trust-strip .trust-item > span {
  color: #d8c9dd;
}
body[data-route="home"][data-theme-context="on"][data-site-theme="halloween"] .trust-strip .trust-item strong {
  color: #fff7ff;
}
body[data-route="home"][data-theme-context="on"][data-site-theme="halloween"] .trust-strip .trust-item small {
  color: #d2c2d8;
}

@media (max-width: 760px) {
  body[data-route="home"][data-theme-context="on"][data-site-theme="halloween"] .mobile-trust-section .trust-item,
  body[data-route="home"][data-theme-context="on"][data-site-theme="halloween"] .mobile-trust-section .trust-item:hover {
    background: #34203e;
    border-color: #5b3b65 !important;
  }
  body[data-route="home"][data-theme-context="on"][data-site-theme="halloween"] .mobile-trust-section .trust-item svg {
    background: #168568;
    color: #fff;
  }
}

/* v1.23.24-hotfix.4 — Booking details field-shell cleanup.
   Seasonal booking styling must not turn every label into a nested card. Keep the
   lesson details section as one cohesive form surface and let the actual controls
   carry the input borders. */
body[data-route="booking"] .booking-details-fields > .booking-detail-field {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .booking-details-fields > .booking-detail-field {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

@media (max-width: 760px) {
  /* One themed shell around the whole details group; individual rows stay visually flat. */
  body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .booking-details-fields {
    border-color: var(--booking-border);
    background: linear-gradient(180deg, color-mix(in srgb, white 84%, transparent), transparent), var(--booking-surface);
    box-shadow: 0 10px 22px color-mix(in srgb, var(--primary) 4%, transparent);
  }
  body[data-route="booking"] .booking-details-fields > .booking-detail-field + .booking-detail-field {
    border-top: 1px solid #edf0f4;
  }
  body[data-route="booking"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .booking-details-fields > .booking-detail-field + .booking-detail-field {
    border-top-color: color-mix(in srgb, var(--booking-border) 64%, white);
  }
}

/* v1.23.24-hotfix.5 — Verification brand lockup.
   A custom uploaded logo gets a real reserved flex box instead of visually overflowing
   a tiny brand-mark slot and colliding with the site name/subtitle. */
.verify-brand.has-image-logo {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 32px;
}
.verify-brand.has-image-logo .brand-mark.has-image {
  width: 88px;
  height: 72px;
  max-width: 88px;
  max-height: 72px;
  flex: 0 0 88px;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.verify-brand.has-image-logo .brand-mark.has-image img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  border-radius: 0;
}
.verify-brand.has-image-logo > span:last-child {
  min-width: 0;
  max-width: min(260px, 48vw);
  display: grid;
  gap: 4px;
  text-align: left;
  line-height: 1.2;
}
.verify-brand.has-image-logo strong {
  color: var(--ink);
  font-size: .96rem;
  font-weight: 800;
  letter-spacing: -.01em;
}
.verify-brand.has-image-logo small {
  color: var(--muted);
  font-size: .68rem;
  line-height: 1.35;
}

@media (max-width: 560px) {
  .verify-brand.has-image-logo {
    gap: 12px;
    margin-bottom: 26px;
  }
  .verify-brand.has-image-logo .brand-mark.has-image {
    width: 72px;
    height: 60px;
    max-width: 72px;
    max-height: 60px;
    flex-basis: 72px;
  }
  .verify-brand.has-image-logo > span:last-child {
    max-width: min(190px, 55vw);
  }
  .verify-brand.has-image-logo strong { font-size: .86rem; }
  .verify-brand.has-image-logo small { font-size: .62rem; }
}

/* v1.23.24-hotfix.6 — Seasonal Dashboard Experiences.
   A dedicated, contrast-hardened "My cabinet" skin for every Theme Engine style.
   Page decorations remain controlled by data-theme-context so admins can still disable them. */
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) {
  --dash-bg: var(--bg);
  --dash-surface: var(--surface);
  --dash-surface-soft: var(--surface-soft);
  --dash-card: color-mix(in srgb, var(--surface) 96%, white);
  --dash-card-soft: color-mix(in srgb, var(--surface-soft) 76%, white);
  --dash-border: color-mix(in srgb, var(--primary) 18%, var(--line));
  --dash-border-strong: color-mix(in srgb, var(--primary) 34%, var(--line));
  --dash-accent: var(--primary-dark);
  --dash-accent-soft: color-mix(in srgb, var(--primary) 11%, var(--surface));
  --dash-glow: color-mix(in srgb, var(--accent) 18%, transparent);
  --dash-hero: var(--theme-shell);
  --dash-hero-text: #fff;
  --dash-hero-muted: rgba(255,255,255,.78);
  --dash-hero-accent: color-mix(in srgb, var(--accent) 82%, white);
  --dash-nav-active-bg: color-mix(in srgb, var(--primary) 12%, white);
  --dash-nav-active-text: var(--primary-dark);
  --dash-next-line: var(--primary);
  --dash-own-message: color-mix(in srgb, var(--primary-soft) 82%, white);
  --dash-note-bg: color-mix(in srgb, var(--surface-soft) 60%, white);
  --dash-motif: var(--theme-context-icon);
  --dash-motif-secondary: var(--theme-context-secondary);
}
body[data-route="dashboard"][data-theme-context="on"][data-site-theme="autumn"] {
  --dash-bg: #fbf5ec;
  --dash-surface: #fffdf8;
  --dash-surface-soft: #f5ead9;
  --dash-card: #fffaf2;
  --dash-card-soft: #f8eddd;
  --dash-border: #e4cfb7;
  --dash-border-strong: #d2aa80;
  --dash-accent: #824019;
  --dash-accent-soft: #f5e2cf;
  --dash-glow: rgba(218,139,57,.19);
  --dash-hero: linear-gradient(125deg,#40291e 0%,#724226 56%,#9d5e2f 100%);
  --dash-hero-accent: #ffd58f;
  --dash-nav-active-bg: #f5e4d1;
  --dash-nav-active-text: #7b3b18;
  --dash-next-line: #d8883b;
  --dash-own-message: #f7e8d8;
  --dash-note-bg: #f8efe3;
  --dash-motif: "🍁";
  --dash-motif-secondary: "🍂";
}
body[data-route="dashboard"][data-theme-context="on"][data-site-theme="halloween"] {
  --dash-bg: #f4eff6;
  --dash-surface: #fffafd;
  --dash-surface-soft: #eee5f2;
  --dash-card: #fff9fd;
  --dash-card-soft: #f1e8f4;
  --dash-border: #d9c7e0;
  --dash-border-strong: #c39acf;
  --dash-accent: #553071;
  --dash-accent-soft: #eee0f6;
  --dash-glow: rgba(237,139,44,.20);
  --dash-hero: radial-gradient(circle at 84% 24%,rgba(237,139,44,.23) 0 5%,transparent 14%),linear-gradient(125deg,#211429 0%,#3c2048 58%,#5b2a48 100%);
  --dash-hero-accent: #ffae59;
  --dash-nav-active-bg: #eee0f6;
  --dash-nav-active-text: #5b2d73;
  --dash-next-line: #ed8b2c;
  --dash-own-message: #efe2f5;
  --dash-note-bg: #f3ebf5;
  --dash-motif: "🎃";
  --dash-motif-secondary: "🦇";
}
body[data-route="dashboard"][data-theme-context="on"][data-site-theme="winter"] {
  --dash-bg: #f3f8fc;
  --dash-surface: #fff;
  --dash-surface-soft: #eaf4fa;
  --dash-card: #fbfdff;
  --dash-card-soft: #edf6fb;
  --dash-border: #cfe2ee;
  --dash-border-strong: #a9cfe3;
  --dash-accent: #315f8d;
  --dash-accent-soft: #e3f0f8;
  --dash-glow: rgba(115,185,216,.19);
  --dash-hero: linear-gradient(125deg,#24445f 0%,#3f6f91 58%,#6e9bb7 100%);
  --dash-hero-accent: #dff7ff;
  --dash-nav-active-bg: #e5f1f8;
  --dash-nav-active-text: #315f8d;
  --dash-next-line: #74b9d7;
  --dash-own-message: #e5f2fa;
  --dash-note-bg: #edf6fb;
  --dash-motif: "❄";
  --dash-motif-secondary: "❅";
}
body[data-route="dashboard"][data-theme-context="on"][data-site-theme="newyear"] {
  --dash-bg: #f7f8f3;
  --dash-surface: #fffef9;
  --dash-surface-soft: #edf4ee;
  --dash-card: #fffdf7;
  --dash-card-soft: #eef5ef;
  --dash-border: #ceded2;
  --dash-border-strong: #a8c9b8;
  --dash-accent: #184c3c;
  --dash-accent-soft: #e2f0e9;
  --dash-glow: rgba(225,188,74,.22);
  --dash-hero: radial-gradient(circle at 84% 18%,rgba(230,189,75,.18),transparent 20%),linear-gradient(125deg,#153a31 0%,#255e49 60%,#82323e 118%);
  --dash-hero-accent: #ffe9a5;
  --dash-nav-active-bg: #e4f1ea;
  --dash-nav-active-text: #184c3c;
  --dash-next-line: #c94452;
  --dash-own-message: #e3f0e9;
  --dash-note-bg: #eff5ee;
  --dash-motif: "🎄";
  --dash-motif-secondary: "✨";
}
body[data-route="dashboard"][data-theme-context="on"][data-site-theme="spring"] {
  --dash-bg: #f5faf5;
  --dash-surface: #fffefd;
  --dash-surface-soft: #eaf5eb;
  --dash-card: #fffefd;
  --dash-card-soft: #edf7ef;
  --dash-border: #d2e5d6;
  --dash-border-strong: #afd2b8;
  --dash-accent: #34724f;
  --dash-accent-soft: #e2f1e7;
  --dash-glow: rgba(222,145,170,.19);
  --dash-hero: linear-gradient(125deg,#2f5943 0%,#528268 60%,#a96b82 112%);
  --dash-hero-accent: #ffd9e5;
  --dash-nav-active-bg: #e5f2e9;
  --dash-nav-active-text: #34724f;
  --dash-next-line: #de91aa;
  --dash-own-message: #e8f4eb;
  --dash-note-bg: #eef7ef;
  --dash-motif: "🌷";
  --dash-motif-secondary: "🌿";
}
body[data-route="dashboard"][data-theme-context="on"][data-site-theme="easter"] {
  --dash-bg: #fbf7fc;
  --dash-surface: #fffefd;
  --dash-surface-soft: #f2eaf6;
  --dash-card: #fffdfd;
  --dash-card-soft: #f5eef8;
  --dash-border: #e0d4e7;
  --dash-border-strong: #cab5d8;
  --dash-accent: #6e5590;
  --dash-accent-soft: #eee6f5;
  --dash-glow: rgba(231,168,189,.20);
  --dash-hero: linear-gradient(125deg,#493d5c 0%,#75638c 58%,#bd879c 112%);
  --dash-hero-accent: #ffe0ec;
  --dash-nav-active-bg: #efe7f5;
  --dash-nav-active-text: #6e5590;
  --dash-next-line: #e1a1b8;
  --dash-own-message: #f0e7f5;
  --dash-note-bg: #f5eef7;
  --dash-motif: "🥚";
  --dash-motif-secondary: "🐣";
}
body[data-route="dashboard"][data-theme-context="on"][data-site-theme="summer"] {
  --dash-bg: #f2faf9;
  --dash-surface: #fffefa;
  --dash-surface-soft: #e6f5f2;
  --dash-card: #fffefa;
  --dash-card-soft: #eaf8f5;
  --dash-border: #cee6e2;
  --dash-border-strong: #abd7d1;
  --dash-accent: #176776;
  --dash-accent-soft: #def1f2;
  --dash-glow: rgba(238,183,73,.21);
  --dash-hero: radial-gradient(circle at 84% 18%,rgba(238,183,73,.18),transparent 19%),linear-gradient(125deg,#20515a 0%,#2e7d89 60%,#b68c34 118%);
  --dash-hero-accent: #ffe59b;
  --dash-nav-active-bg: #def1ef;
  --dash-nav-active-text: #176776;
  --dash-next-line: #eeb749;
  --dash-own-message: #e0f2f1;
  --dash-note-bg: #eaf7f5;
  --dash-motif: "☀";
  --dash-motif-secondary: "🌿";
}

/* Cabinet shell and hero */
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .dashboard-page {
  background:
    radial-gradient(circle at 8% 22%, var(--dash-glow), transparent 19rem),
    radial-gradient(circle at 93% 50%, color-mix(in srgb, var(--dash-glow) 58%, transparent), transparent 24rem),
    var(--dash-bg);
}
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .dashboard-hero {
  background: var(--dash-hero);
  color: var(--dash-hero-text);
  border-bottom: 1px solid color-mix(in srgb, var(--dash-hero-accent) 18%, transparent);
}
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .dashboard-hero::after {
  border-color: rgba(255,255,255,.09);
  box-shadow: 0 0 0 70px rgba(255,255,255,.018), 0 0 0 140px rgba(255,255,255,.011);
}
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .dashboard-hero .eyebrow.light {
  color: var(--dash-hero-accent);
}
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .dashboard-hero h1 {
  color: var(--dash-hero-text);
  text-shadow: 0 4px 18px rgba(0,0,0,.12);
}
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .dashboard-hero p {
  color: var(--dash-hero-muted);
}
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .dashboard-hero .btn-light {
  border-color: rgba(255,255,255,.35);
  background: rgba(255,255,255,.94);
  color: var(--dash-accent);
  box-shadow: 0 10px 28px rgba(0,0,0,.11);
}
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .dashboard-hero .btn-light:hover {
  background: #fff;
  box-shadow: 0 14px 32px rgba(0,0,0,.15);
}
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .dashboard-hero-inner::after {
  content: var(--dash-motif-secondary);
  position: absolute;
  right: clamp(112px, 16vw, 230px);
  bottom: 26px;
  font-size: clamp(30px, 4vw, 54px);
  line-height: 1;
  opacity: .18;
  transform: rotate(-9deg);
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.15));
  pointer-events: none;
}

/* Sidebar and desktop navigation */
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .dashboard-sidebar {
  overflow: hidden;
  border-color: var(--dash-border);
  background: linear-gradient(180deg, color-mix(in srgb, white 72%, transparent), transparent 86px), var(--dash-surface);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--primary) 8%, transparent);
}
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .dashboard-sidebar::after {
  content: var(--dash-motif);
  position: absolute;
  right: 10px;
  top: 9px;
  font-size: 18px;
  line-height: 1;
  opacity: .18;
  pointer-events: none;
}
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .profile-summary {
  border-bottom-color: var(--dash-border);
}
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .profile-summary strong {
  color: var(--ink);
}
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .profile-summary span {
  color: var(--muted);
}
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .profile-summary .avatar {
  box-shadow: 0 0 0 3px var(--dash-accent-soft), 0 7px 18px color-mix(in srgb, var(--primary) 12%, transparent);
}
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .dashboard-nav button {
  color: var(--muted);
}
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .dashboard-nav button:hover {
  background: var(--dash-card-soft);
  color: var(--ink);
}
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .dashboard-nav button.is-active {
  background: var(--dash-nav-active-bg);
  color: var(--dash-nav-active-text);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dash-accent) 11%, transparent);
}
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .dashboard-nav button.is-active::before {
  background: var(--dash-accent);
}
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .dashboard-nav i {
  background: color-mix(in srgb, var(--dash-surface) 88%, white);
  color: inherit;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dash-accent) 10%, transparent);
}
body[data-route="dashboard"][data-theme-context="on"][data-site-theme="halloween"] .dashboard-sidebar {
  background: linear-gradient(180deg,#2b1b34,#3b2344);
  border-color: #57365f;
}
body[data-route="dashboard"][data-theme-context="on"][data-site-theme="halloween"] .profile-summary {
  border-bottom-color: rgba(255,255,255,.12);
}
body[data-route="dashboard"][data-theme-context="on"][data-site-theme="halloween"] .profile-summary strong { color:#fff8ff; }
body[data-route="dashboard"][data-theme-context="on"][data-site-theme="halloween"] .profile-summary span,
body[data-route="dashboard"][data-theme-context="on"][data-site-theme="halloween"] .dashboard-nav button { color:#cdbed3; }
body[data-route="dashboard"][data-theme-context="on"][data-site-theme="halloween"] .dashboard-nav button:hover { background:rgba(255,255,255,.07); color:#fff; }
body[data-route="dashboard"][data-theme-context="on"][data-site-theme="halloween"] .dashboard-nav button.is-active {
  background:rgba(237,139,44,.13);
  color:#ffc078;
  box-shadow:inset 0 0 0 1px rgba(237,139,44,.18);
}
body[data-route="dashboard"][data-theme-context="on"][data-site-theme="halloween"] .dashboard-nav button.is-active::before { background:#ed8b2c; }
body[data-route="dashboard"][data-theme-context="on"][data-site-theme="halloween"] .dashboard-nav i {
  background:rgba(255,255,255,.08);
  color:inherit;
  box-shadow:none;
}

/* Main headings and actionable buttons */
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .dashboard-section-heading h2,
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .dashboard-section-heading h3,
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .mobile-dashboard-screen-heading h1,
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .mobile-lesson-day-heading strong {
  color: var(--ink);
}
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .dashboard-section-heading p,
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .mobile-dashboard-screen-heading p,
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .mobile-lesson-day-heading span {
  color: var(--muted);
}
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .mobile-dashboard-screen-heading .mobile-screen-kicker,
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .mobile-dashboard-screen-heading .mobile-screen-count {
  color: var(--dash-accent);
}
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .btn-primary {
  background: var(--dash-accent);
  color: #fff;
}
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .btn-primary:hover {
  background: color-mix(in srgb, var(--dash-accent) 88%, #000);
}

/* Desktop lesson cards and recurring reservations */
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .lesson-booking-card,
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .recurring-series-card,
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .empty-state.card {
  border-color: var(--dash-border);
  background: linear-gradient(180deg, color-mix(in srgb, white 75%, transparent), transparent 72px), var(--dash-card);
  box-shadow: 0 9px 26px color-mix(in srgb, var(--primary) 6%, transparent);
}
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .lesson-booking-card:hover,
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .recurring-series-card:hover {
  border-color: var(--dash-border-strong);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--primary) 10%, transparent);
}
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .lesson-date-box,
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .recurring-series-icon,
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .empty-state > span {
  background: var(--dash-accent-soft);
  color: var(--dash-accent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dash-accent) 10%, transparent);
}
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .lesson-comment,
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .lesson-finance-row {
  background: var(--dash-note-bg);
  border-color: var(--dash-border);
}
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .lesson-booking-card h3,
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .recurring-series-card h3,
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .empty-state h3 {
  color: var(--ink);
}
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .lesson-booking-card p,
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .lesson-booking-card small,
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .recurring-series-card p,
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .empty-state p {
  color: var(--muted);
}
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .lesson-booking-card.is-recurring {
  border-left-width: 1px;
  border-left-style: solid;
  border-left-color: var(--dash-border);
}
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .recurring-pill,
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .mobile-lesson-next-pill {
  background: var(--dash-accent-soft);
  color: var(--dash-accent);
}

/* Mobile lesson agenda: replace legacy hard-coded blue/white surfaces with theme tokens. */
@media (max-width: 760px) {
  body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .dashboard-content {
    background: transparent;
  }
  body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .mobile-dashboard-screen-heading {
    position: relative;
    margin-bottom: 3px;
    padding: 10px 12px 12px;
    border: 1px solid var(--dash-border);
    border-radius: 16px;
    background: linear-gradient(145deg, color-mix(in srgb, var(--dash-surface) 94%, white), var(--dash-card-soft));
    box-shadow: 0 9px 22px color-mix(in srgb, var(--primary) 6%, transparent);
  }
  body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .mobile-dashboard-screen-heading::after {
    content: var(--dash-motif);
    position: absolute;
    right: 10px;
    top: 9px;
    font-size: 19px;
    line-height: 1;
    opacity: .24;
    pointer-events: none;
  }
  body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .mobile-lessons-segmented,
  body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .mobile-billing-segmented {
    border-color: var(--dash-border);
    background: var(--dash-card-soft);
  }
  body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .mobile-lessons-segmented button,
  body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .mobile-billing-segmented button {
    color: var(--muted);
  }
  body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .mobile-lessons-segmented button.is-active,
  body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .mobile-billing-segmented button.is-active {
    background: var(--dash-surface);
    color: var(--dash-accent);
    box-shadow: 0 3px 10px color-mix(in srgb, var(--primary) 8%, transparent);
  }
  body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .mobile-lessons-segmented button.is-active i,
  body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .mobile-billing-segmented button.is-active i {
    background: var(--dash-accent-soft);
    color: var(--dash-accent);
  }
  body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .mobile-lessons-new {
    border-color: var(--dash-border-strong);
    background: var(--dash-accent-soft);
    color: var(--dash-accent);
    box-shadow: 0 3px 12px color-mix(in srgb, var(--primary) 6%, transparent);
  }
  body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .mobile-lesson-card {
    border-color: var(--dash-border);
    background: linear-gradient(180deg, color-mix(in srgb, white 76%, transparent), transparent 66px), var(--dash-card);
    box-shadow: 0 5px 18px color-mix(in srgb, var(--primary) 5%, transparent);
  }
  body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .mobile-lesson-card.is-next {
    border-color: var(--dash-border-strong);
    background: linear-gradient(180deg, color-mix(in srgb, var(--dash-accent-soft) 52%, white), transparent 74px), var(--dash-card);
    box-shadow: 0 10px 28px color-mix(in srgb, var(--primary) 10%, transparent);
  }
  body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .mobile-lesson-card.is-next::before {
    background: var(--dash-next-line);
  }
  body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .mobile-lesson-time-block strong,
  body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .mobile-lesson-card-body h3 {
    color: var(--ink);
  }
  body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .mobile-lesson-time-block span,
  body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .mobile-lesson-topic,
  body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .mobile-lesson-note p,
  body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .mobile-lesson-manage > summary {
    color: var(--muted);
  }
  body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .mobile-lesson-card-body,
  body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .mobile-lesson-manage {
    border-color: var(--dash-border);
  }
  body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .mobile-lesson-facts > span,
  body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .mobile-lesson-note,
  body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .mobile-lesson-action {
    border-color: var(--dash-border);
    background: var(--dash-note-bg);
    color: var(--muted);
  }
  body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .mobile-lessons-empty {
    border-color: var(--dash-border);
    background: var(--dash-card);
  }
  body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .mobile-lessons-empty h2 { color:var(--ink); }
  body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .mobile-lessons-empty p { color:var(--muted); }
}

/* Billing inside My cabinet */
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"])[data-dashboard-tab="billing"] .balance-card,
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"])[data-dashboard-tab="billing"] .payment-cta-card {
  border-color: var(--dash-border);
  background: linear-gradient(180deg, color-mix(in srgb, white 76%, transparent), transparent), var(--dash-card);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--primary) 6%, transparent);
}
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"])[data-dashboard-tab="billing"] .balance-card:not(.balance-due):not(.balance-credit) strong {
  color: var(--ink);
}
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"])[data-dashboard-tab="billing"] .balance-card small,
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"])[data-dashboard-tab="billing"] .balance-card span {
  color: var(--muted);
}
@media (max-width: 760px) {
  body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"])[data-dashboard-tab="billing"] .mobile-billing-balance {
    border-color: color-mix(in srgb, var(--dash-hero-accent) 16%, transparent);
    background: var(--dash-hero);
    box-shadow: 0 14px 32px color-mix(in srgb, var(--primary) 14%, transparent);
  }
  body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"])[data-dashboard-tab="billing"] .mobile-billing-balance.has-credit {
    background: linear-gradient(145deg,#164b3c,#28745a);
  }
  body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"])[data-dashboard-tab="billing"] .mobile-billing-mini-stats > article,
  body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"])[data-dashboard-tab="billing"] .mobile-billing-ledger-card {
    border-color: var(--dash-border);
    background: var(--dash-card);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 5%, transparent);
  }
  body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"])[data-dashboard-tab="billing"] .mobile-billing-mini-stats strong,
  body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"])[data-dashboard-tab="billing"] .mobile-billing-ledger-copy strong {
    color: var(--ink);
  }
  body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"])[data-dashboard-tab="billing"] .mobile-billing-mini-stats small,
  body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"])[data-dashboard-tab="billing"] .mobile-billing-ledger-copy small {
    color: var(--muted);
  }
  body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"])[data-dashboard-tab="billing"] .mobile-billing-stat-icon {
    background: var(--dash-accent-soft);
    color: var(--dash-accent);
  }
}

/* Profile: seasonal surfaces with neutral, high-contrast form controls. */
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"])[data-dashboard-tab="profile"] .profile-screen-card {
  border-color: var(--dash-border);
  background: linear-gradient(180deg, color-mix(in srgb, white 72%, transparent), transparent 120px), var(--dash-card);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--primary) 7%, transparent);
}
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"])[data-dashboard-tab="profile"] .profile-desktop-heading {
  border-bottom-color: var(--dash-border);
}
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"])[data-dashboard-tab="profile"] .profile-desktop-heading h2,
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"])[data-dashboard-tab="profile"] .profile-identity-copy strong,
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"])[data-dashboard-tab="profile"] .profile-form-section > legend {
  color: var(--ink);
}
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"])[data-dashboard-tab="profile"] .profile-desktop-heading p,
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"])[data-dashboard-tab="profile"] .profile-identity-copy span,
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"])[data-dashboard-tab="profile"] .profile-form-section > legend small,
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"])[data-dashboard-tab="profile"] .profile-form-section-grid > label > small {
  color: var(--muted);
}
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"])[data-dashboard-tab="profile"] .profile-photo-editor,
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"])[data-dashboard-tab="profile"] .profile-form-section,
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"])[data-dashboard-tab="profile"] .telegram-profile-panel,
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"])[data-dashboard-tab="profile"] .telegram-pref-row {
  border-color: var(--dash-border);
  background: var(--dash-card-soft);
}
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"])[data-dashboard-tab="profile"] .profile-photo-editor .avatar.profile-photo-large {
  box-shadow: 0 0 0 4px var(--dash-accent-soft), 0 10px 24px color-mix(in srgb, var(--primary) 12%, transparent);
}
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"])[data-dashboard-tab="profile"] .profile-form-section input,
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"])[data-dashboard-tab="profile"] .profile-form-section select {
  border-color: var(--dash-border);
  background: var(--dash-surface);
  color: var(--ink);
}
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"])[data-dashboard-tab="profile"] .profile-form-section input:focus,
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"])[data-dashboard-tab="profile"] .profile-form-section select:focus {
  border-color: var(--dash-border-strong);
  box-shadow: 0 0 0 4px var(--dash-glow);
}
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"])[data-dashboard-tab="profile"] .profile-email-field input:disabled {
  color: var(--muted);
  background: var(--dash-note-bg);
}

/* Homework: keep educational content calm while carrying the active season around it. */
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"])[data-dashboard-tab="homework"] .homework-student-card,
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"])[data-dashboard-tab="homework"] .homework-student-question,
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"])[data-dashboard-tab="homework"] .homework-submit-bar,
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"])[data-dashboard-tab="homework"] .homework-result-summary,
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"])[data-dashboard-tab="homework"] .homework-teacher-note,
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"])[data-dashboard-tab="homework"] .homework-review-item {
  border-color: var(--dash-border);
  background: var(--dash-card);
  box-shadow: 0 7px 22px color-mix(in srgb, var(--primary) 5%, transparent);
}
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"])[data-dashboard-tab="homework"] .homework-section-title h3,
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"])[data-dashboard-tab="homework"] .homework-student-card h3,
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"])[data-dashboard-tab="homework"] .homework-student-question h3 {
  color: var(--ink);
}
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"])[data-dashboard-tab="homework"] .homework-student-card p,
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"])[data-dashboard-tab="homework"] .homework-submit-bar small {
  color: var(--muted);
}
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"])[data-dashboard-tab="homework"] .homework-section-title span,
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"])[data-dashboard-tab="homework"] .homework-student-graph-meta span {
  background: var(--dash-accent-soft);
  color: var(--dash-accent);
}
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"])[data-dashboard-tab="homework"] .homework-answer-options label {
  border-color: var(--dash-border);
  background: var(--dash-surface);
  color: var(--ink);
}
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"])[data-dashboard-tab="homework"] .homework-answer-options label:has(input:checked) {
  border-color: var(--dash-border-strong);
  background: var(--dash-accent-soft);
}
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"])[data-dashboard-tab="homework"] .homework-due-banner {
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--dash-border));
  background: color-mix(in srgb, var(--accent-soft) 74%, white);
  color: var(--dash-accent);
}

/* Chat: subtle seasonal chrome, neutral message readability. */
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"])[data-dashboard-tab="chat"] .chat-window {
  border-color: var(--dash-border);
  background: var(--dash-surface);
  box-shadow: 0 12px 34px color-mix(in srgb, var(--primary) 8%, transparent);
}
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"])[data-dashboard-tab="chat"] .chat-header,
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"])[data-dashboard-tab="chat"] .chat-compose {
  border-color: var(--dash-border);
  background: color-mix(in srgb, var(--dash-surface) 94%, white);
}
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"])[data-dashboard-tab="chat"] .chat-messages-shell,
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"])[data-dashboard-tab="chat"] .chat-messages {
  background:
    radial-gradient(circle at 14% 16%, var(--dash-glow), transparent 16rem),
    linear-gradient(180deg, var(--dash-card-soft), color-mix(in srgb, var(--dash-surface) 92%, white));
}
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"])[data-dashboard-tab="chat"] .chat-message {
  background: var(--dash-surface);
  color: var(--ink);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--primary) 9%, transparent);
}
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"])[data-dashboard-tab="chat"] .chat-message.is-own {
  background: var(--dash-own-message);
  color: var(--ink);
}
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"])[data-dashboard-tab="chat"] .chat-message-author,
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"])[data-dashboard-tab="chat"] .chat-message-text a {
  color: var(--dash-accent);
}
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"])[data-dashboard-tab="chat"] .chat-compose-input {
  border-color: var(--dash-border);
  background: var(--dash-surface);
}
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"])[data-dashboard-tab="chat"] .chat-compose-input:focus-within {
  border-color: var(--dash-border-strong);
  box-shadow: 0 0 0 4px var(--dash-glow);
}

/* Theme-specific dashboard motifs. They are intentionally lightweight and non-interactive. */
body[data-route="dashboard"][data-theme-context="on"][data-site-theme="autumn"] .dashboard-hero-inner::before {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:8px;
  background:radial-gradient(circle at 8px 8px,rgba(255,210,143,.22) 0 4px,transparent 4.5px) 0 0/34px 8px repeat-x;
  pointer-events:none;
}
body[data-route="dashboard"][data-theme-context="on"][data-site-theme="halloween"] .dashboard-hero-inner::before {
  content:"";
  position:absolute;
  right:8%;
  top:24px;
  width:76px;
  height:76px;
  border-radius:50%;
  background:rgba(255,182,95,.12);
  box-shadow:0 0 42px rgba(237,139,44,.12);
  pointer-events:none;
}
body[data-route="dashboard"][data-theme-context="on"][data-site-theme="winter"] .dashboard-hero-inner::before {
  content:"";
  position:absolute;
  left:2%;
  right:2%;
  bottom:0;
  height:7px;
  border-radius:999px 999px 0 0;
  background:linear-gradient(90deg,rgba(208,239,252,.22),rgba(255,255,255,.72),rgba(208,239,252,.22));
  pointer-events:none;
}
body[data-route="dashboard"][data-theme-context="on"][data-site-theme="newyear"] .dashboard-hero-inner::before {
  content:"";
  position:absolute;
  left:2%;
  right:2%;
  top:0;
  height:7px;
  border-radius:0 0 8px 8px;
  background:repeating-linear-gradient(90deg,#2c765c 0 18px,#d34c59 18px 28px,#e5bd4d 28px 38px,#2c765c 38px 56px);
  opacity:.72;
  pointer-events:none;
}
body[data-route="dashboard"][data-theme-context="on"][data-site-theme="spring"] .dashboard-hero-inner::before {
  content:"✿   ·   ✿";
  position:absolute;
  right:7%;
  top:26px;
  color:rgba(255,217,229,.42);
  font-size:20px;
  letter-spacing:5px;
  transform:rotate(8deg);
  pointer-events:none;
}
body[data-route="dashboard"][data-theme-context="on"][data-site-theme="easter"] .dashboard-hero-inner::before {
  content:"";
  position:absolute;
  right:8%;
  top:27px;
  width:44px;
  height:58px;
  border-radius:50% 50% 46% 46%;
  border:1px solid rgba(255,224,236,.33);
  background:repeating-linear-gradient(180deg,rgba(255,224,236,.16) 0 8px,transparent 8px 15px);
  transform:rotate(8deg);
  pointer-events:none;
}
body[data-route="dashboard"][data-theme-context="on"][data-site-theme="summer"] .dashboard-hero-inner::before {
  content:"";
  position:absolute;
  right:8%;
  top:20px;
  width:66px;
  height:66px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,226,139,.22) 0 34%,transparent 36%),repeating-conic-gradient(from 0deg,rgba(255,226,139,.14) 0 7deg,transparent 7deg 22deg);
  pointer-events:none;
}

@media (max-width: 760px) {
  body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .dashboard-hero-inner::before,
  body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .dashboard-hero-inner::after {
    display:none;
  }
  body[data-route="dashboard"][data-theme-context="on"][data-site-theme="halloween"] .mobile-dashboard-screen-heading {
    background:linear-gradient(145deg,#2d1b36,#44234d);
    border-color:#5c3a65;
  }
  body[data-route="dashboard"][data-theme-context="on"][data-site-theme="halloween"] .mobile-dashboard-screen-heading h1 { color:#fff8ff; }
  body[data-route="dashboard"][data-theme-context="on"][data-site-theme="halloween"] .mobile-dashboard-screen-heading .mobile-screen-kicker,
  body[data-route="dashboard"][data-theme-context="on"][data-site-theme="halloween"] .mobile-dashboard-screen-heading .mobile-screen-count { color:#ffb25f; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-route="dashboard"][data-theme-context="on"] .lesson-booking-card,
  body[data-route="dashboard"][data-theme-context="on"] .recurring-series-card,
  body[data-route="dashboard"][data-theme-context="on"] .dashboard-nav button {
    transition:none;
  }
}

/* Per-theme cabinet card character — deliberately small differences beyond palette swaps. */
body[data-route="dashboard"][data-theme-context="on"][data-site-theme="autumn"] .lesson-booking-card,
body[data-route="dashboard"][data-theme-context="on"][data-site-theme="autumn"] .mobile-lesson-card,
body[data-route="dashboard"][data-theme-context="on"][data-site-theme="autumn"] .recurring-series-card {
  background: linear-gradient(145deg,#fffdf8,#fff6ea);
  border-color:#e1c7aa;
}
body[data-route="dashboard"][data-theme-context="on"][data-site-theme="autumn"] .booking-list > .lesson-booking-card:first-child {
  border-top:3px solid #d8883b;
}
body[data-route="dashboard"][data-theme-context="on"][data-site-theme="halloween"] .lesson-booking-card,
body[data-route="dashboard"][data-theme-context="on"][data-site-theme="halloween"] .mobile-lesson-card,
body[data-route="dashboard"][data-theme-context="on"][data-site-theme="halloween"] .recurring-series-card {
  background:linear-gradient(145deg,#fffafd,#f7eff9);
  border-color:#d3bddb;
}
body[data-route="dashboard"][data-theme-context="on"][data-site-theme="halloween"] .mobile-lesson-card.is-next,
body[data-route="dashboard"][data-theme-context="on"][data-site-theme="halloween"] .booking-list > .lesson-booking-card:first-child {
  border-color:#d49a68;
  box-shadow:0 11px 30px rgba(84,43,101,.13);
}
body[data-route="dashboard"][data-theme-context="on"][data-site-theme="winter"] .lesson-booking-card,
body[data-route="dashboard"][data-theme-context="on"][data-site-theme="winter"] .mobile-lesson-card,
body[data-route="dashboard"][data-theme-context="on"][data-site-theme="winter"] .dashboard-sidebar,
body[data-route="dashboard"][data-theme-context="on"][data-site-theme="winter"] .profile-screen-card {
  background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(239,248,253,.9));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 10px 28px rgba(69,119,154,.07);
}
body[data-route="dashboard"][data-theme-context="on"][data-site-theme="newyear"] .booking-list > .lesson-booking-card:first-child,
body[data-route="dashboard"][data-theme-context="on"][data-site-theme="newyear"] .mobile-lesson-card.is-next {
  border-top:3px solid #c94452;
  box-shadow:0 0 0 1px rgba(229,189,75,.20),0 11px 30px rgba(31,98,76,.10);
}
body[data-route="dashboard"][data-theme-context="on"][data-site-theme="newyear"] .recurring-series-card {
  border-left:3px solid #e1ba4d;
}
body[data-route="dashboard"][data-theme-context="on"][data-site-theme="spring"] .lesson-booking-card,
body[data-route="dashboard"][data-theme-context="on"][data-site-theme="spring"] .mobile-lesson-card,
body[data-route="dashboard"][data-theme-context="on"][data-site-theme="spring"] .profile-form-section,
body[data-route="dashboard"][data-theme-context="on"][data-site-theme="spring"] .homework-student-card {
  border-color:#cfe4d4;
  background:linear-gradient(145deg,#fffefd,#f2f9f3);
}
body[data-route="dashboard"][data-theme-context="on"][data-site-theme="spring"] .mobile-lesson-card.is-next::after,
body[data-route="dashboard"][data-theme-context="on"][data-site-theme="spring"] .booking-list > .lesson-booking-card:first-child::after {
  content:"🌷";
}
body[data-route="dashboard"][data-theme-context="on"][data-site-theme="easter"] .lesson-booking-card,
body[data-route="dashboard"][data-theme-context="on"][data-site-theme="easter"] .mobile-lesson-card,
body[data-route="dashboard"][data-theme-context="on"][data-site-theme="easter"] .recurring-series-card,
body[data-route="dashboard"][data-theme-context="on"][data-site-theme="easter"] .profile-form-section,
body[data-route="dashboard"][data-theme-context="on"][data-site-theme="easter"] .homework-student-card {
  border-radius:22px;
}
body[data-route="dashboard"][data-theme-context="on"][data-site-theme="easter"] .mobile-lessons-segmented,
body[data-route="dashboard"][data-theme-context="on"][data-site-theme="easter"] .mobile-billing-segmented {
  border-radius:18px;
}
body[data-route="dashboard"][data-theme-context="on"][data-site-theme="summer"] .mobile-lesson-card.is-next,
body[data-route="dashboard"][data-theme-context="on"][data-site-theme="summer"] .booking-list > .lesson-booking-card:first-child {
  border-top:3px solid #eeb749;
}
body[data-route="dashboard"][data-theme-context="on"][data-site-theme="summer"] .mobile-lessons-new {
  box-shadow:inset 0 -2px 0 rgba(238,183,73,.16),0 4px 14px rgba(33,134,152,.07);
}

/* Preserve semantic billing colors even though the seasonal dashboard owns the general card shell. */
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"])[data-dashboard-tab="billing"] .balance-card.balance-due {
  border-color:#f1c9c5;
  background:linear-gradient(145deg,#fffdfc,#fff5f3);
}
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"])[data-dashboard-tab="billing"] .balance-card.balance-due strong { color:#a9231f; }
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"])[data-dashboard-tab="billing"] .balance-card.balance-credit {
  border-color:#bfe3cb;
  background:linear-gradient(145deg,#fbfffc,#f3fbf6);
}
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"])[data-dashboard-tab="billing"] .balance-card.balance-credit strong { color:#15703d; }

/* v1.23.24-hotfix.7 — Unified dashboard lesson cards.
   Lesson status and recurring state are communicated by pills, not by changing card geometry. */
body[data-route="dashboard"] .booking-list > .lesson-booking-card,
body[data-route="dashboard"] .booking-list > .lesson-booking-card.is-recurring {
  position: relative;
  border-width: 1px !important;
  border-style: solid !important;
  border-left-width: 1px !important;
  border-right-width: 1px !important;
  border-top-width: 1px !important;
  border-bottom-width: 1px !important;
  border-color: var(--line) !important;
}

/* Seasonal themes keep their palette, but every lesson uses the same 1px shell. */
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .booking-list > .lesson-booking-card,
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .booking-list > .lesson-booking-card.is-recurring {
  border-width: 1px !important;
  border-style: solid !important;
  border-color: var(--dash-border) !important;
  box-shadow: 0 9px 26px color-mix(in srgb, var(--primary) 6%, transparent);
}

/* One predictable hierarchy: only the nearest upcoming lesson gets a quiet emphasis. */
body[data-route="dashboard"][data-dashboard-tab="upcoming"] .booking-list > .lesson-booking-card:first-child {
  overflow: hidden;
  border-width: 1px !important;
  border-color: color-mix(in srgb, var(--primary) 34%, var(--line)) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 9%, transparent), 0 11px 30px rgba(20,32,57,.075);
}
body[data-route="dashboard"][data-dashboard-tab="upcoming"] .booking-list > .lesson-booking-card:first-child::before {
  content: "";
  position: absolute;
  z-index: 2;
  left: 18px;
  right: 18px;
  top: 0;
  height: 3px;
  border-radius: 0 0 999px 999px;
  background: var(--primary);
  pointer-events: none;
}
body[data-route="dashboard"][data-dashboard-tab="upcoming"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .booking-list > .lesson-booking-card:first-child {
  border-width: 1px !important;
  border-color: var(--dash-border-strong) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--dash-accent) 10%, transparent), 0 11px 30px color-mix(in srgb, var(--primary) 9%, transparent);
}
body[data-route="dashboard"][data-dashboard-tab="upcoming"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .booking-list > .lesson-booking-card:first-child::before {
  background: var(--dash-next-line, var(--dash-accent));
}

/* Cancel old per-theme top-border geometry; theme identity stays in palette/decorations. */
body[data-route="dashboard"][data-theme-context="on"][data-site-theme="autumn"] .booking-list > .lesson-booking-card:first-child,
body[data-route="dashboard"][data-theme-context="on"][data-site-theme="newyear"] .booking-list > .lesson-booking-card:first-child,
body[data-route="dashboard"][data-theme-context="on"][data-site-theme="summer"] .booking-list > .lesson-booking-card:first-child {
  border-top-width: 1px !important;
}

/* Mobile already marks the next lesson explicitly; keep the same geometry rule there too. */
@media (max-width: 760px) {
  body[data-route="dashboard"] .mobile-lesson-card,
  body[data-route="dashboard"] .mobile-lesson-card.is-next,
  body[data-route="dashboard"] .mobile-lesson-card.is-history {
    border-width: 1px !important;
    border-style: solid !important;
  }
  body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .mobile-lesson-card,
  body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .mobile-lesson-card.is-next,
  body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .mobile-lesson-card.is-history {
    border-color: var(--dash-border) !important;
  }
  body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .mobile-lesson-card.is-next {
    border-color: var(--dash-border-strong) !important;
  }
}

/* v1.23.24-hotfix.8 — mobile startup/performance polish.
   Account recovery and private hydration are intentionally compact and non-blocking. */
.account-boot-view .section-pad {
  padding-top: clamp(28px, 6vw, 64px);
  min-height: min(42vh, 360px);
}
.account-boot-inline {
  width: min(100%, 520px);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: 0 8px 24px rgba(20, 32, 57, .05);
}
.account-boot-inline .spinner {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border-width: 3px;
}
.account-boot-inline > div:last-child {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.account-boot-inline strong {
  color: var(--ink);
  font-size: .88rem;
  line-height: 1.3;
}
.account-boot-inline small {
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.4;
}
.private-sync-notice {
  width: fit-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  padding: 7px 10px;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  color: var(--muted);
  font-size: .7rem;
  font-weight: 700;
  line-height: 1.2;
  box-shadow: 0 5px 16px color-mix(in srgb, var(--primary) 5%, transparent);
}
.private-sync-spinner {
  width: 11px;
  height: 11px;
  flex: 0 0 11px;
  border: 2px solid color-mix(in srgb, var(--primary) 18%, transparent);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
body[data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .private-sync-notice,
body[data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .account-boot-inline {
  border-color: color-mix(in srgb, var(--primary) 18%, var(--line));
  background: color-mix(in srgb, var(--surface) 92%, transparent);
}
@media (max-width: 760px) {
  .account-boot-view .section-pad {
    padding-top: 20px;
    min-height: 180px;
  }
  .account-boot-inline {
    width: calc(100% - 4px);
    padding: 11px 12px;
    border-radius: 14px;
    gap: 10px;
  }
  .account-boot-inline .spinner {
    width: 20px;
    height: 20px;
    flex-basis: 20px;
  }
  .account-boot-inline strong { font-size: .8rem; }
  .account-boot-inline small { font-size: .65rem; }
  .private-sync-notice {
    margin-bottom: 9px;
    padding: 6px 9px;
    font-size: .64rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .private-sync-spinner { animation: none; }
}


/* v1.23.24-hotfix.9 — per-account Theme Engine animation preference. */
.profile-animation-settings {
  display: grid;
  gap: 15px;
}
.profile-animation-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--line));
  border-radius: 16px;
  background: var(--surface);
}
.profile-animation-panel-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}
.profile-animation-panel-copy strong { color: var(--ink); font-size: .84rem; line-height: 1.35; }
.profile-animation-panel-copy small { color: var(--muted); font-size: .71rem; line-height: 1.5; }
.profile-animation-switch-row {
  position: relative;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 13px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-soft);
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease, transform .16s ease;
}
.profile-animation-switch-row:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--primary) 35%, var(--line));
}
.profile-animation-switch-row.is-on {
  border-color: color-mix(in srgb, var(--primary) 54%, var(--line));
  background: color-mix(in srgb, var(--primary-soft) 42%, var(--surface));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 8%, transparent);
}
.profile-animation-switch-row.is-off {
  background: color-mix(in srgb, var(--surface) 82%, #f8fafc);
}
.profile-animation-switch-row > input[type="hidden"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}
.profile-animation-switch-meta {
  min-width: 0;
  display: grid;
  gap: 4px;
}
.profile-animation-switch-meta strong { color: var(--ink); font-size: .8rem; line-height: 1.35; }
.profile-animation-switch-meta small { color: var(--muted); font-size: .68rem; line-height: 1.45; }
.profile-animation-switch {
  flex: 0 0 auto;
  margin-left: auto;
}
.profile-animation-accessibility-note {
  margin: 0;
  color: var(--muted);
  font-size: .68rem;
  line-height: 1.5;
}
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .profile-animation-panel,
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .profile-animation-switch-row {
  border-color: var(--dash-border);
}
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .profile-animation-panel {
  background: color-mix(in srgb, var(--dash-soft) 68%, white);
}
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .profile-animation-switch-row {
  background: color-mix(in srgb, var(--dash-surface) 94%, white);
}
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .profile-animation-switch-row.is-on {
  border-color: var(--dash-border-strong);
  background: color-mix(in srgb, var(--dash-soft) 82%, white);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dash-accent) 9%, transparent);
}
@media (max-width: 760px) {
  .profile-animation-panel { padding: 12px; gap: 10px; }
  .profile-animation-switch-row { padding: 11px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .profile-animation-switch-row { transition: none; }
  .profile-animation-switch-row:hover { transform: none; }
}

/* v1.23.24 hotfix.10 — Multi-recipient Telegram + teacher bot mode */
.telegram-recipient-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.telegram-recipient-card {
  display: grid;
  gap: 12px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface, #fff);
  box-shadow: 0 8px 20px rgba(28, 42, 73, .035);
}
.telegram-recipient-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}
.telegram-recipient-head strong,
.telegram-recipient-head small {
  display: block;
  min-width: 0;
}
.telegram-recipient-head strong {
  color: var(--ink);
  font-size: .88rem;
}
.telegram-recipient-head small {
  margin-top: 3px;
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.telegram-recipient-prefs {
  display: grid;
  gap: 6px;
}
.telegram-recipient-pref {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--line) 84%, transparent);
  border-radius: 11px;
  background: var(--surface-soft, #f8fafc);
  color: var(--ink);
  text-align: left;
  font: inherit;
  font-size: .74rem;
  font-weight: 650;
  cursor: pointer;
}
.telegram-recipient-pref .telegram-switch {
  transform: scale(.86);
  transform-origin: center right;
}
.telegram-recipient-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 2px;
}
.telegram-connect-controls {
  display: grid;
  gap: 10px;
  margin-top: 16px;
  padding: 14px;
  border: 1px dashed color-mix(in srgb, var(--primary) 28%, var(--line));
  border-radius: 15px;
  background: color-mix(in srgb, var(--surface-soft, #f8fafc) 82%, white);
}
.telegram-connect-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.telegram-connect-fields label {
  display: grid;
  gap: 6px;
  color: var(--ink);
  font-size: .72rem;
  font-weight: 700;
}
.telegram-connect-fields input,
.telegram-connect-fields select {
  width: 100%;
  min-height: 42px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface, #fff);
  color: var(--ink);
  font: inherit;
  font-size: .82rem;
}
.telegram-connect-controls > small,
.telegram-limit-note,
.telegram-admin-empty {
  color: var(--muted);
  font-size: .7rem;
  line-height: 1.5;
}
.telegram-admin-own-card {
  display: grid;
  gap: 2px;
}
.telegram-admin-own-card .panel-heading {
  align-items: start;
}
.telegram-admin-empty {
  margin-top: 12px;
  padding: 13px;
  border-radius: 12px;
  background: var(--surface-soft, #f8fafc);
}
.telegram-recipient-chip {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  max-width: 100%;
}
.telegram-recipient-chip b {
  font-weight: 750;
  color: var(--ink);
}
.telegram-student-prefs .telegram-recipient-chip {
  background: color-mix(in srgb, var(--primary) 6%, var(--surface-soft, #f8fafc));
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--line));
}

body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .telegram-recipient-card,
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .telegram-connect-controls {
  border-color: var(--dashboard-seasonal-border, var(--line));
  background: var(--dashboard-seasonal-surface, var(--surface));
}
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .telegram-recipient-pref {
  background: var(--dashboard-seasonal-soft, var(--surface-soft));
  border-color: var(--dashboard-seasonal-border, var(--line));
}

@media (max-width: 900px) {
  .telegram-recipient-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .telegram-connect-fields { grid-template-columns: 1fr; }
  .telegram-recipient-card { padding: 13px; border-radius: 14px; }
  .telegram-recipient-head { grid-template-columns: minmax(0, 1fr); }
  .telegram-recipient-head .telegram-connection-pill { justify-self: start; }
  .telegram-recipient-actions { justify-content: stretch; }
  .telegram-recipient-actions .btn { width: 100%; }
  .telegram-connect-controls > .btn { width: 100%; }
}

/* v1.23.24-hotfix.11 — mobile runtime performance hardening.
   Keep the visual identity, but avoid continuously compositing large blurred layers on phones. */
@media (max-width: 760px) {
  .theme-effects-layer .theme-particle:nth-of-type(n+6) { display: none !important; }
  .theme-particle {
    filter: none !important;
    text-shadow: none !important;
  }
  .theme-festive-lights i:nth-child(n+5) { display: none !important; }
  .theme-festive-lights i { box-shadow: 0 0 7px currentColor; }
  .theme-ghost { box-shadow: 0 7px 18px rgba(29,12,38,.11); }

  /* These bars are already 94–98% opaque. GPU blur adds substantial cost while
     producing almost no visible difference on a small display. */
  .site-header,
  .mobile-app-nav,
  .chat-header,
  .chat-compose,
  .mobile-booking-submit-dock,
  .mobile-booking-edit-actions {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  /* Let the browser skip layout/paint for long card lists that are outside the viewport. */
  body[data-route="dashboard"] .mobile-lesson-card,
  body[data-route="dashboard"] .lesson-booking-card,
  body[data-route="dashboard"] .recurring-series-card,
  body[data-route="dashboard"] .homework-student-card,
  body[data-route="dashboard"] .payment-ledger-row {
    content-visibility: auto;
    contain-intrinsic-size: auto 150px;
  }

  /* Avoid expensive animated scrolling on low-power mobile rendering paths. */
  body[data-route="dashboard"] { scroll-behavior: auto; }
}

@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .theme-effects-layer { display: none; }
}

/* v1.23.24-hotfix.13 — profile breathing room + clearer multi-Telegram UX */
body[data-route="dashboard"] .profile-screen-card {
  width: min(100%, 1100px);
  margin: 0 auto;
}

.telegram-section-stack {
  display: grid;
  gap: 16px;
  margin-top: 18px;
}

.telegram-recipient-group {
  display: grid;
  gap: 12px;
}

.telegram-section-stack .telegram-recipient-grid,
.telegram-admin-own-panel .telegram-recipient-grid {
  margin-top: 0;
}

.telegram-subsection-heading {
  display: grid;
  gap: 4px;
}

.telegram-subsection-heading strong {
  color: var(--ink);
  font-size: .96rem;
  line-height: 1.3;
}

.telegram-subsection-heading small {
  color: var(--muted);
  font-size: .73rem;
  line-height: 1.55;
}

.telegram-connect-shell {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px dashed color-mix(in srgb, var(--primary) 28%, var(--line));
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-soft, #f8fafc) 82%, white);
}

.telegram-connect-shell .telegram-connect-controls,
.telegram-admin-connect-panel .telegram-connect-controls {
  margin-top: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.telegram-connect-controls .btn {
  justify-content: center;
}

.telegram-recipient-card {
  padding: 16px;
  border-radius: 18px;
}

.telegram-recipient-head strong {
  font-size: .96rem;
}

.telegram-recipient-pref {
  min-height: 46px;
  padding: 10px 12px;
  font-size: .8rem;
}

.telegram-connect-controls {
  gap: 12px;
}

.telegram-connect-fields label {
  gap: 7px;
  font-size: .78rem;
}

.telegram-connect-fields input,
.telegram-connect-fields select {
  min-height: 46px;
  font-size: .9rem;
}

.telegram-admin-own-card {
  gap: 16px;
}

.telegram-admin-own-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, .9fr);
  gap: 16px;
  margin-top: 16px;
}

.telegram-admin-own-panel,
.telegram-admin-connect-panel {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 18px;
  border: 1px solid #e5e9f0;
  border-radius: 16px;
  background: #fbfcfe;
}

body[data-route="admin"][data-admin-tab="telegram"] .telegram-admin-own-card {
  padding: 20px;
  border-radius: 16px;
}

body[data-route="admin"][data-admin-tab="telegram"] .telegram-admin-own-card .panel-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

body[data-route="admin"][data-admin-tab="telegram"] .telegram-admin-own-card .panel-heading > div {
  display: grid;
  gap: 4px;
}

body[data-route="admin"][data-admin-tab="telegram"] .telegram-admin-own-card .panel-heading p {
  max-width: 740px;
  color: #657286;
  font-size: .76rem;
  line-height: 1.55;
}

@media (min-width: 761px) {
  body[data-route="dashboard"] .profile-desktop-heading p {
    max-width: 760px;
    font-size: .86rem;
    line-height: 1.6;
  }

  body[data-route="dashboard"] .profile-photo-editor {
    padding: 20px;
    gap: 18px;
    border-radius: 20px;
  }

  body[data-route="dashboard"] .profile-identity-copy strong {
    font-size: 1.02rem;
  }

  body[data-route="dashboard"] .profile-identity-copy span {
    font-size: .76rem;
  }

  body[data-route="dashboard"] .profile-photo-form .btn {
    min-height: 42px;
  }

  body[data-route="dashboard"] .profile-main-form {
    display: grid;
    gap: 16px;
  }

  body[data-route="dashboard"] .profile-form-section {
    margin: 0;
    padding: 22px;
    border-radius: 20px;
  }

  body[data-route="dashboard"] .profile-form-section > legend {
    display: grid;
    justify-content: start;
    gap: 4px;
    padding-bottom: 14px;
  }

  body[data-route="dashboard"] .profile-form-section > legend span {
    font-size: 1.02rem;
    line-height: 1.25;
  }

  body[data-route="dashboard"] .profile-form-section > legend small {
    font-size: .72rem;
    line-height: 1.55;
  }

  body[data-route="dashboard"] .profile-form-section-grid {
    gap: 16px;
  }

  body[data-route="dashboard"] .profile-form-section-grid > label {
    gap: 8px;
    font-size: .86rem;
  }

  body[data-route="dashboard"] .profile-form-section-grid > label > small {
    min-height: auto;
    font-size: .7rem;
    line-height: 1.55;
  }

  body[data-route="dashboard"] .profile-form-section input,
  body[data-route="dashboard"] .profile-form-section select {
    min-height: 52px;
    padding-inline: 14px;
    font-size: .96rem;
  }

  body[data-route="dashboard"] .profile-save-actions {
    margin: 0;
    padding-top: 6px;
  }

  body[data-route="dashboard"] .profile-save-actions .btn {
    min-width: 220px;
    min-height: 50px;
  }

  body[data-route="dashboard"] .telegram-profile-panel {
    padding: 22px;
    border-radius: 20px;
  }

  body[data-route="dashboard"] .telegram-profile-heading strong {
    font-size: 1.02rem;
  }

  body[data-route="dashboard"] .telegram-profile-heading small,
  body[data-route="dashboard"] .telegram-profile-description {
    font-size: .82rem;
    line-height: 1.6;
  }
}

@media (min-width: 761px) and (max-width: 1040px) {
  body[data-route="dashboard"] .profile-form-section-grid {
    grid-template-columns: 1fr;
  }

  body[data-route="dashboard"] .profile-photo-editor {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  body[data-route="dashboard"] .profile-photo-form {
    grid-column: 1 / -1;
    justify-items: start;
  }
}

@media (max-width: 900px) {
  .telegram-admin-own-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .profile-photo-editor {
    padding: 16px;
    gap: 12px;
    border-radius: 18px;
  }

  .profile-photo-form {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .profile-form-section {
    margin-bottom: 12px;
    padding: 16px;
    border-radius: 18px;
  }

  .profile-form-section > legend {
    display: grid;
    gap: 3px;
    padding-bottom: 12px;
    line-height: 1.25;
  }

  .profile-form-section > legend span {
    color: #31415a;
    font-size: .98rem;
    letter-spacing: 0;
  }

  .profile-form-section > legend small {
    display: block;
    margin-top: 3px;
    color: #7c889b;
    font-size: .74rem;
    font-weight: 600;
    line-height: 1.5;
  }

  .profile-form-section label {
    gap: 7px;
    font-size: .8rem;
    font-weight: 700;
  }

  .profile-form-section label > small {
    font-size: .68rem;
    line-height: 1.55;
  }

  .profile-form-section input,
  .profile-form-section select {
    min-height: 52px;
    padding-inline: 14px;
    font-size: 1rem;
  }

  .profile-save-actions {
    margin-top: 10px;
    padding: 8px;
    bottom: calc(var(--mobile-app-nav-safe-height) + 10px);
  }

  .telegram-profile-panel {
    padding: 16px;
  }

  .telegram-profile-heading {
    gap: 10px;
  }

  .telegram-profile-heading strong {
    font-size: 1rem;
  }

  .telegram-profile-heading small,
  .telegram-profile-description {
    font-size: .8rem;
    line-height: 1.55;
  }

  .telegram-subsection-heading strong {
    font-size: .92rem;
  }

  .telegram-subsection-heading small {
    font-size: .76rem;
  }

  .telegram-connect-shell {
    padding: 14px;
  }

  .telegram-connect-controls > .btn {
    width: 100%;
    min-height: 46px;
  }

  .telegram-admin-own-panel,
  .telegram-admin-connect-panel {
    padding: 14px;
    border-radius: 14px;
  }
}

@media (max-width: 520px) {
  .profile-form-section {
    padding: 14px;
  }

  .telegram-section-stack {
    gap: 14px;
  }

  .telegram-recipient-card {
    padding: 14px;
  }

  .telegram-recipient-pref {
    font-size: .78rem;
  }
}

body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .telegram-connect-shell,
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .telegram-admin-own-panel,
body[data-route="dashboard"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .telegram-admin-connect-panel {
  border-color: var(--dashboard-seasonal-border, var(--line));
  background: var(--dashboard-seasonal-surface, var(--surface));
}

/* v1.23.24-hotfix.14 — true mobile profile screen, not a compressed desktop form */
.mobile-profile-section-heading { display: none; }

@media (max-width: 760px) {
  body[data-route="dashboard"][data-dashboard-tab="profile"] .dashboard-content {
    padding-top: 4px;
    padding-bottom: calc(var(--mobile-app-nav-safe-height) + 24px);
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .dashboard-content > .container {
    width: calc(100% - 24px);
    max-width: none;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .mobile-dashboard-screen-heading {
    margin: 0 0 12px;
    padding: 10px 4px 8px;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .mobile-dashboard-screen-heading .mobile-screen-kicker {
    font-size: .66rem;
    letter-spacing: .08em;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .mobile-dashboard-screen-heading h1 {
    font-size: clamp(1.62rem, 7.5vw, 1.92rem);
    line-height: 1.05;
    letter-spacing: -.045em;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-screen-card {
    width: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
    border: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-desktop-heading {
    display: none;
  }

  /* Identity card */
  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-photo-editor {
    min-width: 0;
    margin: 0;
    padding: 16px;
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 13px;
    row-gap: 9px;
    border: 1px solid #dfe6ef;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(29, 47, 78, .055);
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-photo-editor .avatar.profile-photo-large {
    width: 68px;
    height: 68px;
    grid-column: 1;
    grid-row: 1 / span 2;
    border-radius: 21px;
    box-shadow: 0 6px 18px rgba(38, 61, 101, .09);
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-identity-copy {
    min-width: 0;
    align-self: end;
    display: grid;
    gap: 3px;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-identity-copy strong {
    overflow: hidden;
    color: var(--ink);
    font-size: 1rem;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-identity-copy span {
    overflow: hidden;
    color: var(--muted);
    font-size: .72rem;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-photo-form {
    min-width: 0;
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-photo-form .btn {
    min-height: 38px;
    padding: 8px 12px;
    border-radius: 11px;
    font-size: .72rem;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-photo-form small {
    display: none;
  }

  /* Form becomes a stack of native mobile settings cards. */
  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-main-form {
    min-width: 0;
    margin: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-form-section {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 1px solid #dfe6ef;
    border-radius: 20px;
    display: block;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 6px 20px rgba(29, 47, 78, .035);
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-form-section > legend {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .mobile-profile-section-heading {
    min-width: 0;
    padding: 14px 15px 13px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    border-bottom: 1px solid #e8edf3;
    background: #f8fafc;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .mobile-profile-section-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: var(--primary-dark, var(--primary));
    background: color-mix(in srgb, var(--primary) 10%, white);
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .mobile-profile-section-icon svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .mobile-profile-section-heading > div {
    min-width: 0;
    display: grid;
    gap: 2px;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .mobile-profile-section-heading strong {
    color: var(--ink);
    font-size: .9rem;
    line-height: 1.3;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .mobile-profile-section-heading small {
    color: var(--muted);
    font-size: .66rem;
    font-weight: 600;
    line-height: 1.45;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-form-section-grid {
    min-width: 0;
    padding: 2px 14px 14px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-form-section-grid > label,
  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-form-section .important-profile-field {
    min-width: 0;
    margin: 0;
    padding: 13px 0 0;
    display: grid;
    gap: 7px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #34435a;
    font-size: .78rem;
    font-weight: 780;
    line-height: 1.35;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-form-section-grid > label + label {
    margin-top: 13px;
    padding-top: 14px;
    border-top: 1px solid #edf1f5;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-form-section-grid > label > small {
    min-height: 0;
    color: #7d899c;
    font-size: .66rem;
    font-weight: 520;
    line-height: 1.5;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-form-section input,
  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-form-section select {
    width: 100%;
    min-width: 0;
    min-height: 50px;
    padding: 11px 13px;
    border: 1px solid #d9e1eb;
    border-radius: 13px;
    background: #fbfcfe;
    color: #25344b;
    font-size: 16px;
    font-weight: 650;
    line-height: 1.25;
    box-shadow: none;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-form-section input:focus,
  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-form-section select:focus {
    border-color: color-mix(in srgb, var(--primary) 48%, #d9e1eb);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 10%, transparent);
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-email-field input:disabled {
    opacity: 1;
    color: #78869a;
    -webkit-text-fill-color: #78869a;
    background: #f2f5f8;
  }

  /* Animation preferences stay compact and thumb-friendly. */
  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-animation-settings {
    padding-bottom: 14px;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-animation-default-note {
    margin: 14px 14px 10px;
    padding: 12px;
    border-radius: 14px;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-animation-options {
    margin: 0 14px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-animation-option {
    min-height: 64px;
    padding: 11px 12px;
    border-radius: 14px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-animation-option strong {
    font-size: .78rem;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-animation-option small {
    font-size: .65rem;
    line-height: 1.45;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-animation-accessibility-note {
    margin: 10px 14px 0;
    font-size: .63rem;
    line-height: 1.5;
  }

  /* Saving no longer floats over fields: the form owns a normal mobile CTA. */
  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-save-actions,
  body[data-route="dashboard"][data-dashboard-tab="profile"].mobile-keyboard-mode .profile-save-actions {
    position: static;
    z-index: auto;
    bottom: auto;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    display: block;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-save-actions .btn {
    width: 100%;
    min-height: 52px;
    border-radius: 15px;
    font-size: .88rem;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--primary) 16%, transparent);
  }

  /* Telegram is a separate mobile settings card, not another desktop panel. */
  body[data-route="dashboard"][data-dashboard-tab="profile"] .telegram-profile-panel {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 1px solid #dfe6ef;
    border-radius: 20px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 6px 20px rgba(29, 47, 78, .035);
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .telegram-profile-heading {
    min-width: 0;
    padding: 15px;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    border-bottom: 0;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .telegram-brand-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .telegram-profile-heading > div {
    min-width: 0;
    display: grid;
    gap: 3px;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .telegram-profile-heading strong {
    color: var(--ink);
    font-size: .98rem;
    line-height: 1.25;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .telegram-profile-heading small {
    color: var(--muted);
    font-size: .68rem;
    line-height: 1.45;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .telegram-profile-heading .telegram-connection-pill {
    grid-column: 2;
    justify-self: start;
    margin-top: 2px;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .telegram-profile-description {
    margin: 0;
    padding: 0 15px 14px;
    border-bottom: 1px solid #e8edf3;
    color: var(--muted);
    font-size: .72rem;
    line-height: 1.55;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .telegram-section-stack {
    margin: 0;
    padding: 14px;
    display: grid;
    gap: 14px;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .telegram-subsection-heading {
    gap: 3px;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .telegram-subsection-heading strong {
    font-size: .82rem;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .telegram-subsection-heading small {
    font-size: .67rem;
    line-height: 1.5;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .telegram-recipient-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .telegram-recipient-card {
    min-width: 0;
    padding: 13px;
    border-radius: 16px;
    box-shadow: none;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .telegram-recipient-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 8px;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .telegram-recipient-head strong {
    font-size: .84rem;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .telegram-recipient-head small {
    font-size: .64rem;
    line-height: 1.4;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .telegram-recipient-prefs {
    margin-top: 10px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .telegram-recipient-pref {
    width: 100%;
    min-height: 46px;
    padding: 9px 10px;
    border-radius: 12px;
    font-size: .72rem;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .telegram-recipient-actions {
    margin-top: 10px;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .telegram-recipient-actions .btn {
    width: 100%;
    min-height: 42px;
    border-radius: 12px;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .telegram-connect-shell {
    padding: 13px;
    border-radius: 16px;
    gap: 11px;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .telegram-connect-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .telegram-connect-fields label {
    gap: 6px;
    font-size: .72rem;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .telegram-connect-fields input,
  body[data-route="dashboard"][data-dashboard-tab="profile"] .telegram-connect-fields select {
    min-height: 48px;
    border-radius: 12px;
    font-size: 16px;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .telegram-connect-controls > .btn {
    width: 100%;
    min-height: 48px;
    border-radius: 13px;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .telegram-connect-controls > small {
    font-size: .64rem;
    line-height: 1.5;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .telegram-profile-actions {
    margin: 0;
    padding: 0 14px 14px;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .telegram-profile-actions .btn {
    width: 100%;
    min-height: 44px;
    border-radius: 12px;
  }

  /* Seasonal themes keep their identity without changing the mobile geometry. */
  body[data-route="dashboard"][data-dashboard-tab="profile"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .profile-photo-editor,
  body[data-route="dashboard"][data-dashboard-tab="profile"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .profile-form-section,
  body[data-route="dashboard"][data-dashboard-tab="profile"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .telegram-profile-panel {
    border-color: var(--dashboard-seasonal-border, var(--line));
    background: color-mix(in srgb, var(--dashboard-seasonal-surface, #fff) 78%, white);
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .mobile-profile-section-heading {
    border-bottom-color: color-mix(in srgb, var(--dashboard-seasonal-border, var(--line)) 72%, white);
    background: color-mix(in srgb, var(--dashboard-seasonal-surface-soft, var(--dashboard-seasonal-surface, #f8fafc)) 76%, white);
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .profile-form-section-grid > label + label,
  body[data-route="dashboard"][data-dashboard-tab="profile"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .telegram-profile-description {
    border-color: color-mix(in srgb, var(--dashboard-seasonal-border, var(--line)) 56%, white);
  }
}

@media (max-width: 380px) {
  body[data-route="dashboard"][data-dashboard-tab="profile"] .dashboard-content > .container {
    width: calc(100% - 18px);
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-photo-editor {
    grid-template-columns: 60px minmax(0, 1fr);
    padding: 14px;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-photo-editor .avatar.profile-photo-large {
    width: 60px;
    height: 60px;
    border-radius: 18px;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-identity-copy strong {
    font-size: .92rem;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-photo-form .btn {
    padding-inline: 10px;
    font-size: .68rem;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .mobile-profile-section-heading {
    grid-template-columns: 35px minmax(0, 1fr);
    padding-inline: 13px;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .mobile-profile-section-icon {
    width: 35px;
    height: 35px;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-form-section-grid,
  body[data-route="dashboard"][data-dashboard-tab="profile"] .telegram-section-stack {
    padding-inline: 12px;
  }
}

@media (max-width: 760px) {
  body[data-route="dashboard"][data-dashboard-tab="profile"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .profile-screen-card {
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .profile-screen-card::before {
    display: none;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-form-section {
    position: relative;
  }
}

/* v1.23.24-hotfix.15 — mobile profile rebuilt as a native-style settings screen */
.mobile-profile-appbar { display: none; }
.profile-field-label { display: inline; }

@media (max-width: 760px) {
  /* Profile owns its own app-style title bar. */
  body[data-route="dashboard"][data-dashboard-tab="profile"] .mobile-dashboard-screen-heading {
    display: none !important;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .dashboard-content {
    padding-top: 0;
    padding-bottom: calc(var(--mobile-app-nav-safe-height) + 26px);
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .dashboard-content > .container {
    width: 100%;
    max-width: none;
    padding-inline: 12px;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .dashboard-grid,
  body[data-route="dashboard"][data-dashboard-tab="profile"] .dashboard-main {
    min-width: 0;
    width: 100%;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-screen-card {
    width: 100%;
    gap: 0;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-screen-card::before,
  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-screen-card::after {
    display: none !important;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .mobile-profile-appbar {
    min-height: 64px;
    margin: 0 -2px 12px;
    padding: 8px 4px 8px 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .mobile-profile-appbar > div {
    min-width: 0;
    display: grid;
    gap: 2px;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .mobile-profile-appbar span {
    color: var(--muted);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .055em;
    text-transform: uppercase;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .mobile-profile-appbar h1 {
    margin: 0;
    color: var(--ink);
    font-size: 1.72rem;
    line-height: 1.05;
    letter-spacing: -.045em;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .mobile-profile-save-button {
    flex: 0 0 auto;
    min-height: 42px;
    padding: 0 12px;
    border: 0;
    border-radius: 13px;
    background: color-mix(in srgb, var(--primary) 11%, transparent);
    color: var(--primary-dark, var(--primary));
    font: inherit;
    font-size: .78rem;
    font-weight: 800;
    cursor: pointer;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .mobile-profile-save-button:active {
    transform: scale(.97);
  }

  /* Profile identity: one compact account header, like an app account screen. */
  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-photo-editor {
    min-height: 92px;
    margin: 0 0 22px;
    padding: 14px 14px;
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 12px;
    row-gap: 5px;
    border: 0 !important;
    border-radius: 24px;
    background: #fff !important;
    box-shadow: 0 7px 24px rgba(31, 49, 78, .07) !important;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-photo-editor .avatar.profile-photo-large {
    width: 62px;
    height: 62px;
    grid-column: 1;
    grid-row: 1 / 3;
    border-radius: 50%;
    box-shadow: none;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-identity-copy {
    min-width: 0;
    align-self: end;
    display: grid;
    gap: 2px;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-identity-copy strong {
    color: var(--ink);
    font-size: .98rem;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-identity-copy span {
    color: var(--muted);
    font-size: .7rem;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-photo-form {
    min-width: 0;
    grid-column: 3;
    grid-row: 1 / 3;
    align-self: center;
    justify-self: end;
    display: block;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-photo-form .btn {
    min-height: 38px;
    padding: 0 11px;
    border: 0;
    border-radius: 12px;
    background: #f1f5f9;
    box-shadow: none;
    color: var(--ink);
    font-size: .68rem;
    font-weight: 800;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-photo-form > small {
    display: none;
  }

  /* Form becomes grouped settings, not desktop cards and nested inputs. */
  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-main-form {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-form-section {
    min-width: 0;
    margin: 0;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-form-section > legend {
    display: none !important;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .mobile-profile-section-heading {
    min-width: 0;
    margin: 0 4px 8px;
    padding: 0;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    border: 0 !important;
    background: transparent !important;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .mobile-profile-section-icon {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--primary) 10%, #fff);
    color: var(--primary-dark, var(--primary));
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .mobile-profile-section-icon svg {
    width: 16px;
    height: 16px;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .mobile-profile-section-heading > div {
    min-width: 0;
    display: grid;
    gap: 1px;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .mobile-profile-section-heading strong {
    color: var(--ink);
    font-size: .78rem;
    line-height: 1.25;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .mobile-profile-section-heading small {
    color: var(--muted);
    font-size: .62rem;
    line-height: 1.35;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-form-section-grid {
    min-width: 0;
    margin: 0;
    padding: 0 !important;
    display: block !important;
    overflow: hidden;
    border: 0 !important;
    border-radius: 20px;
    background: #fff !important;
    box-shadow: 0 5px 20px rgba(31, 49, 78, .055);
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-form-section-grid > label,
  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-form-section-grid > label + label {
    min-width: 0;
    margin: 0;
    padding: 13px 15px 12px !important;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 4px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--ink);
    font-size: inherit;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-form-section-grid > label + label {
    position: relative;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-form-section-grid > label + label::before {
    content: "";
    position: absolute;
    top: 0;
    left: 15px;
    right: 0;
    height: 1px;
    background: #e9edf2;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-field-label {
    display: block;
    color: #66758a;
    font-size: .66rem;
    font-weight: 700;
    line-height: 1.3;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-form-section input,
  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-form-section select {
    width: 100%;
    min-width: 0;
    min-height: 30px !important;
    height: auto;
    margin: 0;
    padding: 2px 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--ink);
    font-size: 16px !important;
    font-weight: 700;
    line-height: 1.35;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-form-section select {
    padding-right: 28px !important;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-form-section input::placeholder {
    color: #a2adbb;
    font-weight: 600;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-form-section-grid > label:focus-within {
    background: color-mix(in srgb, var(--primary) 3.5%, #fff) !important;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-form-section input:focus,
  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-form-section select:focus {
    box-shadow: none !important;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-form-section label > small {
    margin: 1px 0 0;
    color: #8995a5;
    font-size: .62rem;
    line-height: 1.42;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-email-field input:disabled {
    opacity: 1;
    color: #8491a2 !important;
    -webkit-text-fill-color: #8491a2;
    background: transparent !important;
  }

  /* Appearance becomes a concise mobile settings panel with a real slide switch. */
  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-animation-panel {
    margin: 0;
    padding: 12px;
    display: grid;
    gap: 10px;
    border: 0;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 5px 20px rgba(31, 49, 78, .055);
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-animation-panel-copy {
    min-width: 0;
    display: grid;
    gap: 3px;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-animation-panel-copy strong {
    color: var(--ink);
    font-size: .78rem;
    line-height: 1.25;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-animation-panel-copy small {
    color: var(--muted);
    font-size: .62rem;
    line-height: 1.42;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-animation-switch-row {
    width: 100%;
    min-height: 58px;
    margin: 0;
    padding: 10px 12px;
    border: 0;
    border-radius: 16px;
    background: color-mix(in srgb, var(--primary) 4%, #f7f9fc);
    box-shadow: inset 0 0 0 1px #e5ebf2;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-animation-switch-row:hover {
    transform: none;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-animation-switch-row.is-on {
    background: color-mix(in srgb, var(--primary) 7%, #f7f9fc);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 22%, #dce4ee);
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-animation-switch-meta {
    min-width: 0;
    display: grid;
    gap: 2px;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-animation-switch-meta strong {
    color: var(--ink);
    font-size: .78rem;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-animation-switch-meta small {
    color: var(--muted);
    font-size: .62rem;
    line-height: 1.4;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-animation-switch {
    margin-left: auto;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-animation-switch > span {
    width: 44px;
    height: 26px;
    border-radius: 999px;
    background: #cfd7e3;
    box-shadow: inset 0 0 0 1px rgba(20, 32, 57, .05);
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-animation-switch > span::after {
    width: 20px;
    height: 20px;
    top: 3px;
    left: 3px;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-animation-switch > input:checked + span {
    background: var(--primary);
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-animation-switch > input:checked + span::after {
    transform: translateX(18px);
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-animation-accessibility-note {
    margin: 8px 4px 0;
    color: var(--muted);
    font-size: .59rem;
    line-height: 1.45;
  }

  /* Top-bar Save replaces the desktop full-width submit card on phones. */
  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-save-actions,
  body[data-route="dashboard"][data-dashboard-tab="profile"].mobile-keyboard-mode .profile-save-actions {
    display: none !important;
  }

  /* Telegram becomes another Settings section instead of a giant panel. */
  body[data-route="dashboard"][data-dashboard-tab="profile"] .telegram-profile-panel {
    min-width: 0;
    margin: 22px 0 0;
    padding: 0;
    overflow: visible;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .telegram-profile-heading {
    min-width: 0;
    margin: 0 4px 8px;
    padding: 0;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    border: 0;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .telegram-brand-icon {
    width: 30px;
    height: 30px;
    border-radius: 9px;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .telegram-profile-heading > div {
    min-width: 0;
    display: grid;
    gap: 1px;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .telegram-profile-heading strong {
    font-size: .78rem;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .telegram-profile-heading small {
    font-size: .61rem;
    line-height: 1.35;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .telegram-profile-heading .telegram-connection-pill {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    margin: 0;
    padding: 5px 8px;
    font-size: .59rem;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .telegram-profile-description {
    margin: 0 4px 8px;
    padding: 0;
    border: 0;
    color: var(--muted);
    font-size: .61rem;
    line-height: 1.45;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .telegram-section-stack {
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .telegram-recipient-group,
  body[data-route="dashboard"][data-dashboard-tab="profile"] .telegram-connect-shell {
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0 !important;
    border-radius: 20px;
    background: #fff !important;
    box-shadow: 0 5px 20px rgba(31, 49, 78, .055);
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .telegram-subsection-heading {
    padding: 12px 14px 9px;
    display: grid;
    gap: 2px;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .telegram-subsection-heading strong {
    font-size: .74rem;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .telegram-subsection-heading small {
    font-size: .6rem;
    line-height: 1.4;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .telegram-recipient-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .telegram-recipient-card {
    margin: 0;
    padding: 13px 14px;
    border: 0 !important;
    border-top: 1px solid #e9edf2 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .telegram-recipient-head strong {
    font-size: .78rem;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .telegram-recipient-head small {
    font-size: .6rem;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .telegram-recipient-prefs {
    margin-top: 9px;
    gap: 0;
    overflow: hidden;
    border-radius: 14px;
    background: #f7f9fb;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .telegram-recipient-pref {
    min-height: 46px;
    margin: 0;
    padding: 8px 10px;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .telegram-recipient-pref + .telegram-recipient-pref {
    border-top: 1px solid #e8edf2 !important;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .telegram-recipient-actions .btn {
    min-height: 40px;
    border-radius: 12px;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .telegram-connect-shell {
    padding-bottom: 13px;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .telegram-connect-controls {
    padding: 0 14px;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .telegram-connect-fields {
    gap: 0;
    overflow: hidden;
    border-radius: 14px;
    background: #f7f9fb;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .telegram-connect-fields label {
    margin: 0;
    padding: 9px 11px;
    gap: 3px;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .telegram-connect-fields label + label {
    border-top: 1px solid #e8edf2;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .telegram-connect-fields input,
  body[data-route="dashboard"][data-dashboard-tab="profile"] .telegram-connect-fields select {
    min-height: 34px;
    padding-block: 3px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-size: 16px;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .telegram-connect-controls > .btn {
    margin-top: 10px;
    min-height: 46px;
    border-radius: 13px;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .telegram-connect-controls > small {
    display: block;
    margin-top: 7px;
    font-size: .59rem;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .telegram-profile-actions {
    margin: 10px 0 0;
    padding: 0;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .telegram-profile-actions .btn {
    width: auto;
    min-height: 40px;
    padding-inline: 13px;
    border-radius: 12px;
    background: #fff;
  }

  /* Seasonal themes are accents only: native mobile geometry stays neutral. */
  body[data-route="dashboard"][data-dashboard-tab="profile"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .profile-photo-editor,
  body[data-route="dashboard"][data-dashboard-tab="profile"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .profile-form-section-grid,
  body[data-route="dashboard"][data-dashboard-tab="profile"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .profile-animation-options,
  body[data-route="dashboard"][data-dashboard-tab="profile"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .telegram-recipient-group,
  body[data-route="dashboard"][data-dashboard-tab="profile"][data-theme-context="on"][data-site-theme]:not([data-site-theme="default"]) .telegram-connect-shell {
    background: color-mix(in srgb, var(--dashboard-seasonal-surface, #fff) 35%, #fff) !important;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .site-theme-context-decoration,
  body[data-route="dashboard"][data-dashboard-tab="profile"] .theme-context-decoration {
    opacity: .22;
    pointer-events: none;
  }
}

@media (max-width: 420px) {
  body[data-route="dashboard"][data-dashboard-tab="profile"] .dashboard-content > .container {
    padding-inline: 10px;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-photo-editor {
    grid-template-columns: 56px minmax(0, 1fr);
    grid-template-rows: auto auto;
    padding: 13px;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-photo-editor .avatar.profile-photo-large {
    width: 56px;
    height: 56px;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-photo-form {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
  }

  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-photo-form .btn {
    min-height: 34px;
  }
}

/* v1.23.24-hotfix.16 — compact mobile dashboard density.
   The whole student cabinet now uses phone-scale geometry instead of roomy tablet/desktop spacing.
   Touch controls remain usable (roughly 40–44px), while cards, typography, radii and whitespace shrink. */
@media (max-width: 760px) {
  :root {
    --mobile-app-nav-height: 58px;
    --mobile-app-nav-safe-height: calc(var(--mobile-app-nav-height) + env(safe-area-inset-bottom));
  }

  /* App chrome */
  body[data-route="dashboard"] .site-header .header-inner {
    min-height: 50px;
    gap: 6px;
  }
  body[data-route="dashboard"] .site-header .brand-mark:not(.has-image) {
    width: 32px;
    height: 32px;
    border-radius: 9px;
  }
  body[data-route="dashboard"] .site-header .brand-mark.has-image,
  body[data-route="dashboard"] .site-header .brand-mark.has-image img {
    max-width: min(102px, 31vw);
    max-height: 32px;
  }
  body[data-route="dashboard"] .site-header .brand-copy strong {
    max-width: 45vw;
    font-size: .8rem;
  }
  body[data-route="dashboard"] .site-header .account-chip {
    min-height: 38px;
  }
  body[data-route="dashboard"] .site-header .account-chip .avatar {
    width: 34px;
    height: 34px;
    font-size: .72rem;
  }
  body[data-route="dashboard"] .header-lesson-reminder-inner {
    min-height: 32px;
    padding-block: 2px;
  }
  body[data-route="dashboard"] .header-lesson-item {
    min-height: 25px;
    font-size: .58rem;
  }

  body[data-route="dashboard"] .mobile-app-nav,
  body[data-route="dashboard"] .mobile-app-nav-inner {
    min-height: var(--mobile-app-nav-height);
    max-height: var(--mobile-app-nav-height);
  }
  body[data-route="dashboard"] .mobile-app-nav-inner {
    padding: 3px 5px 2px;
  }
  body[data-route="dashboard"] .mobile-app-nav-item,
  body[data-route="dashboard"] .mobile-app-nav button.mobile-app-nav-item,
  body[data-route="dashboard"] .mobile-app-nav a.mobile-app-nav-item {
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    padding: 2px 1px 1px !important;
    gap: 1px;
    border-radius: 11px;
  }
  body[data-route="dashboard"] .mobile-app-nav-icon {
    width: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    height: 25px !important;
    min-height: 25px !important;
    max-height: 25px !important;
    flex-basis: 25px;
    border-radius: 10px;
  }
  body[data-route="dashboard"] .mobile-app-nav-icon svg {
    width: 19px;
    height: 19px;
  }
  body[data-route="dashboard"] .mobile-app-nav-label {
    font-size: .52rem !important;
  }
  body[data-route="dashboard"] .mobile-app-nav-badge {
    min-width: 15px;
    height: 15px;
    padding-inline: 3px;
    font-size: .48rem;
  }

  /* Shared dashboard canvas */
  body[data-route="dashboard"] .dashboard-content {
    padding-top: 4px;
    padding-bottom: 16px;
  }
  body[data-route="dashboard"] .dashboard-content > .container {
    width: min(calc(100% - 14px), var(--container));
  }
  body[data-route="dashboard"] .mobile-dashboard-screen-heading {
    padding: 2px 0 7px;
  }
  body[data-route="dashboard"] .mobile-screen-kicker {
    margin-bottom: 3px;
    font-size: .53rem;
    letter-spacing: .045em;
  }
  body[data-route="dashboard"] .mobile-screen-title-row {
    gap: 7px;
  }
  body[data-route="dashboard"] .mobile-screen-title-row h1 {
    font-size: clamp(1.24rem, 6.2vw, 1.46rem);
    line-height: 1.06;
  }
  body[data-route="dashboard"] .mobile-screen-count,
  body[data-route="dashboard"] .mobile-screen-step {
    min-width: 25px;
    min-height: 22px;
    padding: 3px 6px;
    font-size: .54rem;
  }

  body[data-route="dashboard"] .dashboard-main > .card,
  body[data-route="dashboard"] .dashboard-main .empty-state,
  body[data-route="dashboard"] .dashboard-main .recurring-series-card,
  body[data-route="dashboard"] .dashboard-main .homework-student-card {
    border-radius: 14px;
  }
  body[data-route="dashboard"] .dashboard-main .dashboard-section-heading {
    margin-bottom: 7px;
  }
  body[data-route="dashboard"] .dashboard-main .dashboard-section-heading h2 {
    font-size: 1rem;
  }
  body[data-route="dashboard"] .dashboard-main .dashboard-section-heading p {
    margin-top: 2px;
    font-size: .61rem;
    line-height: 1.4;
  }
  body[data-route="dashboard"] .dashboard-main .empty-state {
    min-height: 190px;
    padding: 18px 13px;
  }
  body[data-route="dashboard"] .dashboard-main .empty-state > span {
    width: 46px;
    height: 46px;
    border-radius: 14px;
  }
  body[data-route="dashboard"] .dashboard-main .empty-state > span svg {
    width: 22px;
    height: 22px;
  }
  body[data-route="dashboard"] .dashboard-main .empty-state h1,
  body[data-route="dashboard"] .dashboard-main .empty-state h3 {
    margin: 10px 0 4px;
    font-size: .88rem;
  }
  body[data-route="dashboard"] .dashboard-main .empty-state p {
    margin-bottom: 12px;
    font-size: .62rem;
    line-height: 1.42;
  }
  body[data-route="dashboard"] .dashboard-main .btn:not(.chat-send-button):not(.mobile-profile-save-button) {
    min-height: 40px;
    border-radius: 11px;
    font-size: .65rem;
  }

  /* Lessons / history */
  body[data-route="dashboard"] .mobile-lessons-controls {
    margin-bottom: 10px;
    gap: 6px;
  }
  body[data-route="dashboard"] .mobile-lessons-segmented {
    padding: 3px;
    gap: 2px;
    border-radius: 12px;
  }
  body[data-route="dashboard"] .mobile-lessons-segmented button {
    min-height: 38px;
    padding: 5px 7px;
    gap: 4px;
    border-radius: 9px;
    font-size: .61rem;
  }
  body[data-route="dashboard"] .mobile-lessons-segmented button i {
    min-width: 17px;
    height: 17px;
    padding-inline: 4px;
    font-size: .48rem;
  }
  body[data-route="dashboard"] .mobile-lessons-new {
    min-width: 82px;
    min-height: 44px;
    padding-inline: 9px;
    border-radius: 12px;
    font-size: .6rem;
  }
  body[data-route="dashboard"] .mobile-lessons-new svg {
    width: 15px;
    height: 15px;
  }
  body[data-route="dashboard"] .mobile-lessons-agenda {
    gap: 14px;
  }
  body[data-route="dashboard"] .mobile-lesson-day-group {
    gap: 6px;
  }
  body[data-route="dashboard"] .mobile-lesson-day-heading {
    padding-inline: 1px;
    gap: 7px;
  }
  body[data-route="dashboard"] .mobile-lesson-day-heading strong {
    font-size: .65rem;
  }
  body[data-route="dashboard"] .mobile-lesson-day-heading span {
    font-size: .54rem;
  }
  body[data-route="dashboard"] .mobile-lesson-day-list {
    gap: 6px;
  }
  body[data-route="dashboard"] .mobile-lesson-card,
  body[data-route="dashboard"] .mobile-lesson-card.is-history {
    padding: 10px;
    border-radius: 14px;
  }
  body[data-route="dashboard"] .mobile-lesson-card.is-next::before {
    left: 14px;
    right: 14px;
    height: 2px;
  }
  body[data-route="dashboard"] .mobile-lesson-card-top {
    gap: 8px;
  }
  body[data-route="dashboard"] .mobile-lesson-time-block strong {
    font-size: 1.08rem;
  }
  body[data-route="dashboard"] .mobile-lesson-time-block span {
    font-size: .53rem;
  }
  body[data-route="dashboard"] .mobile-lesson-badges {
    gap: 4px;
  }
  body[data-route="dashboard"] .mobile-lesson-badges .status-pill,
  body[data-route="dashboard"] .mobile-lesson-badges .recurring-pill,
  body[data-route="dashboard"] .mobile-lesson-next-pill {
    min-height: 21px;
    padding: 4px 6px;
    font-size: .48rem;
  }
  body[data-route="dashboard"] .mobile-lesson-card-body {
    margin-top: 8px;
    padding-top: 8px;
  }
  body[data-route="dashboard"] .mobile-lesson-card-body h3 {
    font-size: .82rem;
  }
  body[data-route="dashboard"] .mobile-lesson-topic {
    margin-top: 3px;
    font-size: .61rem;
  }
  body[data-route="dashboard"] .mobile-lesson-facts {
    margin-top: 6px;
    gap: 4px;
  }
  body[data-route="dashboard"] .mobile-lesson-facts > span {
    min-height: 24px;
    padding: 4px 6px;
    border-radius: 8px;
    gap: 4px;
    font-size: .53rem;
  }
  body[data-route="dashboard"] .mobile-lesson-facts svg {
    width: 11px;
    height: 11px;
  }
  body[data-route="dashboard"] .mobile-lesson-note {
    margin-top: 7px;
    padding: 7px 8px;
    border-radius: 9px;
  }
  body[data-route="dashboard"] .mobile-lesson-note small {
    font-size: .48rem;
  }
  body[data-route="dashboard"] .mobile-lesson-note p {
    font-size: .58rem;
  }
  body[data-route="dashboard"] .mobile-lesson-join {
    min-height: 42px;
    margin-top: 8px;
    border-radius: 11px;
    font-size: .65rem;
  }
  body[data-route="dashboard"] .mobile-lesson-manage {
    margin-top: 6px;
  }
  body[data-route="dashboard"] .mobile-lesson-manage > summary {
    min-height: 38px;
    padding-top: 6px;
    font-size: .59rem;
  }
  body[data-route="dashboard"] .mobile-lesson-manage > summary svg,
  body[data-route="dashboard"] .mobile-lesson-action svg {
    width: 14px;
    height: 14px;
  }
  body[data-route="dashboard"] .mobile-lesson-manage-actions {
    padding-top: 5px;
    gap: 5px;
  }
  body[data-route="dashboard"] .mobile-lesson-action {
    min-height: 40px;
    padding: 7px 8px;
    border-radius: 10px;
    gap: 6px;
    font-size: .59rem;
  }

  /* Recurring reservations */
  body[data-route="dashboard"] .recurring-series-list {
    gap: 7px;
  }
  body[data-route="dashboard"] .recurring-series-card {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 8px;
    padding: 10px;
    border-radius: 14px;
  }
  body[data-route="dashboard"] .recurring-series-icon {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    font-size: 1rem;
  }
  body[data-route="dashboard"] .recurring-series-copy {
    gap: 3px;
  }
  body[data-route="dashboard"] .recurring-series-copy h3 {
    font-size: .76rem;
    line-height: 1.3;
  }
  body[data-route="dashboard"] .recurring-series-copy p,
  body[data-route="dashboard"] .recurring-series-copy small {
    font-size: .58rem;
    line-height: 1.38;
  }
  body[data-route="dashboard"] .recurring-series-card .recurring-pill {
    padding: 3px 6px;
    font-size: .49rem;
  }
  body[data-route="dashboard"] .recurring-series-card > .btn {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 40px;
    margin-top: 1px;
  }

  /* Billing */
  body[data-route="dashboard"][data-dashboard-tab="billing"] .dashboard-content {
    padding-top: 4px;
    padding-bottom: 16px;
  }
  body[data-route="dashboard"] .mobile-billing-balance {
    padding: 13px 12px 12px;
    border-radius: 16px;
  }
  body[data-route="dashboard"] .mobile-billing-balance::after {
    width: 120px;
    height: 120px;
    top: -72px;
    right: -40px;
  }
  body[data-route="dashboard"] .mobile-billing-balance-top > span {
    font-size: .56rem;
  }
  body[data-route="dashboard"] .mobile-billing-balance-top > i {
    padding: 4px 6px;
    font-size: .5rem;
  }
  body[data-route="dashboard"] .mobile-billing-balance > strong {
    margin-top: 5px;
    font-size: clamp(1.82rem, 9.5vw, 2.25rem);
  }
  body[data-route="dashboard"] .mobile-billing-balance > p {
    margin-top: 6px;
    font-size: .6rem;
  }
  body[data-route="dashboard"] .mobile-billing-pay-button {
    min-height: 44px;
    margin-top: 10px;
    padding: 8px 10px;
    border-radius: 11px;
    font-size: .66rem;
  }
  body[data-route="dashboard"] .mobile-billing-pay-button svg {
    width: 16px;
    height: 16px;
  }
  body[data-route="dashboard"] .mobile-billing-mini-stats {
    margin: 7px 0 9px;
    gap: 6px;
  }
  body[data-route="dashboard"] .mobile-billing-mini-stats > article {
    min-height: 60px;
    padding: 8px;
    grid-template-columns: 27px minmax(0,1fr);
    gap: 7px;
    border-radius: 12px;
  }
  body[data-route="dashboard"] .mobile-billing-stat-icon {
    width: 27px;
    height: 27px;
    border-radius: 8px;
  }
  body[data-route="dashboard"] .mobile-billing-stat-icon svg {
    width: 14px;
    height: 14px;
  }
  body[data-route="dashboard"] .mobile-billing-mini-stats small {
    font-size: .5rem;
  }
  body[data-route="dashboard"] .mobile-billing-mini-stats strong {
    font-size: .7rem;
  }
  body[data-route="dashboard"] .mobile-billing-segmented {
    margin-bottom: 7px;
    padding: 3px;
    border-radius: 12px;
  }
  body[data-route="dashboard"] .mobile-billing-segmented button {
    min-height: 38px;
    padding: 5px 6px;
    font-size: .59rem;
  }
  body[data-route="dashboard"] .mobile-billing-segmented button i {
    min-width: 17px;
    min-height: 17px;
    padding: 2px 4px;
    font-size: .47rem;
  }
  body[data-route="dashboard"] .mobile-billing-ledger {
    gap: 5px;
  }
  body[data-route="dashboard"] .mobile-billing-ledger-card {
    padding: 8px;
    grid-template-columns: 29px minmax(0,1fr) auto;
    gap: 7px;
    border-radius: 12px;
  }
  body[data-route="dashboard"] .mobile-billing-ledger-icon {
    width: 29px;
    height: 29px;
    border-radius: 9px;
  }
  body[data-route="dashboard"] .mobile-billing-ledger-icon svg {
    width: 14px;
    height: 14px;
  }
  body[data-route="dashboard"] .mobile-billing-ledger-copy small {
    font-size: .49rem;
  }
  body[data-route="dashboard"] .mobile-billing-ledger-copy strong {
    font-size: .64rem;
  }
  body[data-route="dashboard"] .mobile-billing-ledger-copy > span {
    font-size: .52rem;
  }
  body[data-route="dashboard"] .mobile-billing-ledger-amount > strong {
    font-size: .66rem;
  }
  body[data-route="dashboard"] .mobile-billing-ledger-card .payment-pill {
    padding: 3px 5px;
    font-size: .46rem;
  }
  body[data-route="dashboard"] .mobile-billing-empty {
    min-height: 140px;
    padding: 18px 13px;
    border-radius: 14px;
  }

  /* Homework */
  body[data-route="dashboard"][data-dashboard-tab="homework"] .homework-student-overview {
    gap: .72rem;
  }
  body[data-route="dashboard"][data-dashboard-tab="homework"] .homework-section-title {
    margin-bottom: .35rem;
  }
  body[data-route="dashboard"][data-dashboard-tab="homework"] .homework-section-title h3 {
    font-size: .82rem;
  }
  body[data-route="dashboard"][data-dashboard-tab="homework"] .homework-section-title span {
    min-width: 1.5rem;
    height: 1.5rem;
    padding-inline: .35rem;
    font-size: .58rem;
  }
  body[data-route="dashboard"][data-dashboard-tab="homework"] .homework-student-list {
    gap: .48rem;
  }
  body[data-route="dashboard"][data-dashboard-tab="homework"] .homework-student-card {
    gap: .6rem;
    padding: .72rem;
  }
  body[data-route="dashboard"][data-dashboard-tab="homework"] .homework-student-card h3 {
    margin: .28rem 0 .2rem;
    font-size: .78rem;
  }
  body[data-route="dashboard"][data-dashboard-tab="homework"] .homework-student-card p {
    margin-bottom: .4rem;
    font-size: .59rem;
    line-height: 1.4;
  }
  body[data-route="dashboard"][data-dashboard-tab="homework"] .homework-student-card-action {
    gap: .3rem;
  }
  body[data-route="dashboard"][data-dashboard-tab="homework"] .homework-student-card-action > strong {
    font-size: 1rem;
  }
  body[data-route="dashboard"][data-dashboard-tab="homework"] .homework-teacher-note,
  body[data-route="dashboard"][data-dashboard-tab="homework"] .homework-student-question,
  body[data-route="dashboard"][data-dashboard-tab="homework"] .homework-result-summary,
  body[data-route="dashboard"][data-dashboard-tab="homework"] .homework-review-item {
    padding: .72rem;
    border-radius: 13px;
  }
  body[data-route="dashboard"][data-dashboard-tab="homework"] .homework-due-banner {
    padding: .55rem .7rem;
    margin-bottom: .55rem;
    border-radius: .7rem;
  }
  body[data-route="dashboard"][data-dashboard-tab="homework"] .homework-due-banner span {
    font-size: .62rem;
  }
  body[data-route="dashboard"][data-dashboard-tab="homework"] .homework-student-test,
  body[data-route="dashboard"][data-dashboard-tab="homework"] .homework-review-list {
    gap: .5rem;
  }
  body[data-route="dashboard"][data-dashboard-tab="homework"] .homework-student-question legend {
    font-size: .64rem;
  }
  body[data-route="dashboard"][data-dashboard-tab="homework"] .homework-student-question h3,
  body[data-route="dashboard"][data-dashboard-tab="homework"] .homework-review-item h3 {
    margin: .35rem 0 .55rem;
    font-size: .82rem;
  }
  body[data-route="dashboard"][data-dashboard-tab="homework"] .homework-answer-options {
    gap: .35rem;
  }
  body[data-route="dashboard"][data-dashboard-tab="homework"] .homework-answer-options label {
    min-height: 42px;
    gap: .5rem;
    padding: .55rem .62rem;
    border-radius: .7rem;
    font-size: .68rem;
  }
  body[data-route="dashboard"][data-dashboard-tab="homework"] .homework-submit-bar {
    gap: .55rem;
    padding: .7rem;
    border-radius: 13px;
  }

  /* Profile: compact app settings density */
  body[data-route="dashboard"][data-dashboard-tab="profile"] .dashboard-content {
    padding-bottom: calc(var(--mobile-app-nav-safe-height) + 14px);
  }
  body[data-route="dashboard"][data-dashboard-tab="profile"] .dashboard-content > .container {
    width: 100%;
    padding-inline: 8px;
  }
  body[data-route="dashboard"][data-dashboard-tab="profile"] .mobile-profile-appbar {
    min-height: 52px;
    margin: 0 0 8px;
    padding: 4px 2px 4px 4px;
    gap: 8px;
  }
  body[data-route="dashboard"][data-dashboard-tab="profile"] .mobile-profile-appbar > div {
    gap: 1px;
  }
  body[data-route="dashboard"][data-dashboard-tab="profile"] .mobile-profile-appbar span {
    font-size: .56rem;
  }
  body[data-route="dashboard"][data-dashboard-tab="profile"] .mobile-profile-appbar h1 {
    font-size: 1.32rem;
    line-height: 1.04;
  }
  body[data-route="dashboard"][data-dashboard-tab="profile"] .mobile-profile-save-button {
    min-height: 38px;
    padding-inline: 10px;
    border-radius: 11px;
    font-size: .69rem;
  }
  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-photo-editor {
    min-height: 74px;
    margin-bottom: 13px;
    padding: 10px;
    grid-template-columns: 52px minmax(0,1fr) auto;
    column-gap: 9px;
    row-gap: 3px;
    border-radius: 17px;
  }
  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-photo-editor .avatar.profile-photo-large {
    width: 52px;
    height: 52px;
    font-size: .9rem;
  }
  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-identity-copy strong {
    font-size: .84rem;
  }
  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-identity-copy span {
    font-size: .61rem;
  }
  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-photo-form .btn {
    min-height: 36px;
    padding-inline: 9px;
    border-radius: 10px;
    font-size: .6rem;
  }
  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-main-form {
    gap: 13px;
  }
  body[data-route="dashboard"][data-dashboard-tab="profile"] .mobile-profile-section-heading {
    margin: 0 3px 6px;
    grid-template-columns: 26px minmax(0,1fr);
    gap: 7px;
  }
  body[data-route="dashboard"][data-dashboard-tab="profile"] .mobile-profile-section-icon {
    width: 26px;
    height: 26px;
    border-radius: 8px;
  }
  body[data-route="dashboard"][data-dashboard-tab="profile"] .mobile-profile-section-icon svg {
    width: 14px;
    height: 14px;
  }
  body[data-route="dashboard"][data-dashboard-tab="profile"] .mobile-profile-section-heading strong {
    font-size: .7rem;
  }
  body[data-route="dashboard"][data-dashboard-tab="profile"] .mobile-profile-section-heading small {
    font-size: .55rem;
  }
  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-form-section-grid,
  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-animation-options,
  body[data-route="dashboard"][data-dashboard-tab="profile"] .telegram-recipient-group,
  body[data-route="dashboard"][data-dashboard-tab="profile"] .telegram-connect-shell {
    border-radius: 15px;
  }
  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-form-section-grid > label,
  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-form-section-grid > label + label {
    padding: 9px 11px 8px !important;
    gap: 2px !important;
  }
  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-form-section-grid > label + label::before {
    left: 11px;
  }
  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-field-label {
    font-size: .59rem;
  }
  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-form-section input,
  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-form-section select {
    min-height: 28px !important;
    padding-block: 1px !important;
    font-size: 16px !important;
    line-height: 1.25;
  }
  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-form-section label > small {
    margin-top: 0;
    font-size: .55rem;
    line-height: 1.34;
  }
  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-animation-panel {
    padding: 9px 10px;
    gap: 8px;
    border-radius: 15px;
  }
  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-animation-panel-copy strong {
    font-size: .69rem;
  }
  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-animation-panel-copy small {
    font-size: .54rem;
  }
  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-animation-switch-row {
    min-height: 48px;
    padding: 7px 10px;
    gap: 8px;
    border-radius: 13px;
  }
  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-animation-switch-meta strong {
    font-size: .69rem;
  }
  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-animation-switch-meta small {
    font-size: .54rem;
  }
  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-animation-switch > span {
    width: 40px;
    height: 24px;
  }
  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-animation-switch > span::after {
    width: 18px;
    height: 18px;
  }
  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-animation-switch > input:checked + span::after {
    transform: translateX(16px);
  }
  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-animation-accessibility-note {
    margin: 6px 3px 0;
    font-size: .52rem;
  }

  /* Telegram inside profile */
  body[data-route="dashboard"][data-dashboard-tab="profile"] .telegram-profile-panel {
    margin-top: 14px;
  }
  body[data-route="dashboard"][data-dashboard-tab="profile"] .telegram-profile-heading {
    margin: 0 3px 6px;
    grid-template-columns: 26px minmax(0,1fr) auto;
    gap: 7px;
  }
  body[data-route="dashboard"][data-dashboard-tab="profile"] .telegram-brand-icon {
    width: 26px;
    height: 26px;
    border-radius: 8px;
  }
  body[data-route="dashboard"][data-dashboard-tab="profile"] .telegram-profile-heading strong {
    font-size: .7rem;
  }
  body[data-route="dashboard"][data-dashboard-tab="profile"] .telegram-profile-heading small,
  body[data-route="dashboard"][data-dashboard-tab="profile"] .telegram-profile-description {
    font-size: .54rem;
  }
  body[data-route="dashboard"][data-dashboard-tab="profile"] .telegram-profile-heading .telegram-connection-pill {
    padding: 4px 6px;
    font-size: .52rem;
  }
  body[data-route="dashboard"][data-dashboard-tab="profile"] .telegram-profile-description {
    margin: 0 3px 6px;
  }
  body[data-route="dashboard"][data-dashboard-tab="profile"] .telegram-section-stack {
    gap: 7px;
  }
  body[data-route="dashboard"][data-dashboard-tab="profile"] .telegram-subsection-heading {
    padding: 9px 10px 7px;
  }
  body[data-route="dashboard"][data-dashboard-tab="profile"] .telegram-subsection-heading strong {
    font-size: .66rem;
  }
  body[data-route="dashboard"][data-dashboard-tab="profile"] .telegram-subsection-heading small {
    font-size: .52rem;
  }
  body[data-route="dashboard"][data-dashboard-tab="profile"] .telegram-recipient-card {
    padding: 9px 10px;
  }
  body[data-route="dashboard"][data-dashboard-tab="profile"] .telegram-recipient-head strong {
    font-size: .69rem;
  }
  body[data-route="dashboard"][data-dashboard-tab="profile"] .telegram-recipient-head small {
    font-size: .52rem;
  }
  body[data-route="dashboard"][data-dashboard-tab="profile"] .telegram-recipient-prefs {
    margin-top: 6px;
    border-radius: 11px;
  }
  body[data-route="dashboard"][data-dashboard-tab="profile"] .telegram-recipient-pref {
    min-height: 40px;
    padding: 6px 8px;
    font-size: .6rem;
  }
  body[data-route="dashboard"][data-dashboard-tab="profile"] .telegram-recipient-actions .btn,
  body[data-route="dashboard"][data-dashboard-tab="profile"] .telegram-profile-actions .btn {
    min-height: 38px;
    border-radius: 10px;
  }
  body[data-route="dashboard"][data-dashboard-tab="profile"] .telegram-connect-shell {
    padding-bottom: 9px;
  }
  body[data-route="dashboard"][data-dashboard-tab="profile"] .telegram-connect-controls {
    padding-inline: 10px;
  }
  body[data-route="dashboard"][data-dashboard-tab="profile"] .telegram-connect-fields {
    border-radius: 11px;
  }
  body[data-route="dashboard"][data-dashboard-tab="profile"] .telegram-connect-fields label {
    padding: 7px 8px;
    gap: 2px;
    font-size: .58rem;
  }
  body[data-route="dashboard"][data-dashboard-tab="profile"] .telegram-connect-fields input,
  body[data-route="dashboard"][data-dashboard-tab="profile"] .telegram-connect-fields select {
    min-height: 30px;
    font-size: 16px;
  }
  body[data-route="dashboard"][data-dashboard-tab="profile"] .telegram-connect-controls > .btn {
    min-height: 42px;
    margin-top: 7px;
    border-radius: 11px;
  }
  body[data-route="dashboard"][data-dashboard-tab="profile"] .telegram-connect-controls > small {
    margin-top: 5px;
    font-size: .52rem;
  }

  /* Chat: preserve messenger behavior but reduce chrome and bubble bulk. */
  body[data-route="dashboard"][data-dashboard-tab="chat"] .chat-header {
    min-height: 46px;
    padding: 5px 8px;
  }
  body[data-route="dashboard"][data-dashboard-tab="chat"] .chat-header .avatar,
  body[data-route="dashboard"][data-dashboard-tab="chat"] .chat-header .avatar.small {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
  }
  body[data-route="dashboard"][data-dashboard-tab="chat"] .chat-messages {
    padding: 10px 7px 12px;
    gap: 2px;
  }
  body[data-route="dashboard"][data-dashboard-tab="chat"] .chat-message {
    max-width: 84%;
    min-width: 70px;
    padding: 6px 9px 5px;
    border-radius: 6px 13px 13px 13px;
  }
  body[data-route="dashboard"][data-dashboard-tab="chat"] .chat-message.is-own {
    border-radius: 13px 6px 13px 13px;
  }
  body[data-route="dashboard"][data-dashboard-tab="chat"] .chat-message-author {
    font-size: .61rem;
  }
  body[data-route="dashboard"][data-dashboard-tab="chat"] .chat-message-text {
    padding-right: 36px;
    font-size: 14px;
    line-height: 1.38;
  }
  body[data-route="dashboard"][data-dashboard-tab="chat"] .chat-message-meta {
    right: 6px;
    bottom: 4px;
    font-size: .52rem;
  }
  body[data-route="dashboard"][data-dashboard-tab="chat"] .chat-compose {
    padding: 4px 5px 5px;
  }
  body[data-route="dashboard"][data-dashboard-tab="chat"] .chat-compose-row {
    gap: 5px;
  }
  body[data-route="dashboard"][data-dashboard-tab="chat"] .chat-compose-input {
    min-height: 40px;
    padding-inline: 9px;
    border-radius: 20px;
  }
  body[data-route="dashboard"][data-dashboard-tab="chat"] .chat-compose textarea {
    min-height: 34px;
    padding: 7px 0 4px;
    font-size: 16px;
  }
  body[data-route="dashboard"][data-dashboard-tab="chat"] .chat-send-button {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }
}

@media (max-width: 390px) {
  body[data-route="dashboard"] .dashboard-content > .container {
    width: min(calc(100% - 10px), var(--container));
  }
  body[data-route="dashboard"][data-dashboard-tab="profile"] .dashboard-content > .container {
    width: 100%;
    padding-inline: 6px;
  }
  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-photo-editor {
    grid-template-columns: 48px minmax(0,1fr);
    grid-template-rows: auto auto;
    padding: 9px;
  }
  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-photo-editor .avatar.profile-photo-large {
    width: 48px;
    height: 48px;
  }
  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-photo-form {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
  }
  body[data-route="dashboard"][data-dashboard-tab="profile"] .profile-photo-form .btn {
    min-height: 34px;
  }
  body[data-route="dashboard"] .mobile-lesson-card {
    padding: 9px;
  }
  body[data-route="dashboard"] .mobile-billing-mini-stats > article {
    padding: 7px;
  }
}

/* v1.23.24-hotfix.18 — editable Telegram recipient relationship */
.telegram-recipient-relationship {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 42px;
  padding: 7px 10px;
  border: 1px solid color-mix(in srgb, var(--line) 84%, transparent);
  border-radius: 11px;
  background: var(--surface-soft, #f8fafc);
}
.telegram-recipient-relationship > span {
  color: var(--muted);
  font-size: .7rem;
  font-weight: 700;
}
.telegram-recipient-relationship select {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  margin: 0;
  padding: 5px 30px 5px 9px;
  border: 0;
  border-radius: 9px;
  background-color: var(--surface, #fff);
  color: var(--ink);
  font: inherit;
  font-size: .74rem;
  font-weight: 700;
}
.telegram-recipient-relationship select:disabled { opacity: .62; }

@media (max-width: 760px) {
  body[data-route="dashboard"][data-dashboard-tab="profile"] .telegram-recipient-relationship {
    grid-template-columns: 58px minmax(0, 1fr);
    min-height: 40px;
    margin-top: 6px;
    padding: 4px 7px;
    border: 0;
    border-radius: 10px;
    background: #f7f9fb;
  }
  body[data-route="dashboard"][data-dashboard-tab="profile"] .telegram-recipient-relationship > span {
    padding-left: 2px;
    font-size: .56rem;
  }
  body[data-route="dashboard"][data-dashboard-tab="profile"] .telegram-recipient-relationship select {
    min-height: 32px;
    padding-block: 4px;
    font-size: 16px;
  }
}


/* v1.23.24-hotfix.20 — compact mobile payment screen */
@media (max-width: 760px) {
  /* Payment is a utility screen: keep the seasonal palette, but remove particles
     that can float over IBAN/purpose text and make the page look visually broken. */
  body[data-route="payment"] .theme-effects-layer {
    display: none !important;
  }

  body[data-route="payment"] .payment-content-section {
    padding-top: 9px !important;
    padding-bottom: 20px !important;
  }
  body[data-route="payment"] .mobile-payment-overview-wrap,
  body[data-route="payment"] .payment-layout {
    width: min(calc(100% - 18px), var(--container));
  }
  body[data-route="payment"] .mobile-payment-overview {
    padding: 16px 14px 14px;
    border-radius: 18px;
    box-shadow: 0 9px 24px rgba(24,42,77,.14);
  }
  body[data-route="payment"] .mobile-payment-overview::after {
    width: 132px;
    height: 132px;
    top: -70px;
    right: -42px;
  }
  body[data-route="payment"] .mobile-payment-overview-label {
    font-size: .61rem;
  }
  body[data-route="payment"] .mobile-payment-overview > strong {
    margin-top: 4px;
    font-size: clamp(2rem, 10.4vw, 2.48rem);
  }
  body[data-route="payment"] .mobile-payment-overview > p {
    margin: 7px 0 11px;
    font-size: .64rem;
    line-height: 1.42;
  }
  body[data-route="payment"] .mobile-payment-overview .btn {
    min-height: 46px;
    border-radius: 12px;
    font-size: .72rem;
  }

  body[data-route="payment"] .payment-layout {
    margin-top: 8px;
  }
  body[data-route="payment"] .payment-main-column {
    gap: 8px;
  }
  body[data-route="payment"] .payment-purpose-card,
  body[data-route="payment"] .payment-details-card {
    padding: 12px;
    border: 1px solid #e1e6ee;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 3px 12px rgba(25,39,68,.045);
  }
  body[data-route="payment"] .payment-purpose-card h2,
  body[data-route="payment"] .payment-details-card h2 {
    margin: 0;
    color: #26344a;
    font-size: .9rem;
    line-height: 1.2;
  }
  body[data-route="payment"] .payment-details-card .dashboard-section-heading {
    margin-bottom: 3px;
  }
  body[data-route="payment"] .payment-details-card .dashboard-section-heading p {
    margin-top: 3px;
    font-size: .62rem;
    line-height: 1.35;
  }

  /* Override the legacy width:100% mobile button rule. */
  body[data-route="payment"] .purpose-copy-box {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    align-items: center;
    gap: 8px;
    margin-top: 9px;
    padding: 8px 8px 8px 10px;
    border: 1px solid #e3e8f0;
    border-radius: 11px;
    background: #f7f9fc;
  }
  body[data-route="payment"] .purpose-copy-box strong {
    min-width: 0;
    color: #2f3948;
    font-size: .66rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }
  body[data-route="payment"] .purpose-copy-box .btn {
    width: auto !important;
    min-width: 0;
    min-height: 36px;
    padding: 0 10px;
    border-radius: 9px;
    gap: 6px;
    font-size: .63rem;
    white-space: nowrap;
  }
  body[data-route="payment"] .purpose-copy-box .btn svg {
    width: 16px;
    height: 16px;
  }

  /* Two compact metadata columns; recipient and IBAN stay full width. */
  body[data-route="payment"] .payment-details-list {
    grid-template-columns: repeat(2, minmax(0,1fr));
    column-gap: 12px;
  }
  body[data-route="payment"] .payment-details-list > .payment-detail-row {
    display: grid;
    grid-template-columns: minmax(0,1fr);
    gap: 2px;
    align-content: start;
    min-width: 0;
    padding: 8px 0;
  }
  body[data-route="payment"] .payment-details-list > .payment-detail-recipient,
  body[data-route="payment"] .payment-details-list > .payment-detail-iban {
    grid-column: 1 / -1;
  }
  body[data-route="payment"] .payment-details-list > .payment-detail-recipient {
    border-top: 0;
  }
  body[data-route="payment"] .payment-details-list dt {
    color: #7b8493;
    font-size: .55rem;
    line-height: 1.25;
  }
  body[data-route="payment"] .payment-details-list dd {
    margin: 0;
    color: #303846;
    font-size: .66rem;
    line-height: 1.35;
  }
  body[data-route="payment"] .payment-details-list dd strong {
    font-size: .67rem;
  }
  body[data-route="payment"] .payment-detail-iban dd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
  body[data-route="payment"] .payment-details-list code {
    min-width: 0;
    font-family: inherit;
    font-size: .64rem;
    letter-spacing: -.015em;
    overflow-wrap: anywhere;
  }
  body[data-route="payment"] .copy-inline {
    flex: 0 0 auto;
    min-height: 30px;
    margin: 0;
    padding: 0 6px;
    border-radius: 8px;
    font-size: .59rem;
  }
}

@media (max-width: 380px) {
  body[data-route="payment"] .purpose-copy-box {
    grid-template-columns: minmax(0,1fr) auto;
    gap: 6px;
  }
  body[data-route="payment"] .purpose-copy-box .btn {
    padding-inline: 8px;
  }
  body[data-route="payment"] .payment-details-list {
    column-gap: 9px;
  }
  body[data-route="payment"] .payment-detail-iban dd {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }
}


/* SENS Math + Whiteboard shared-project portal */
.whiteboard-portal-page .compact-page-hero { padding-bottom: 32px; }
.whiteboard-portal-card { display:grid; gap:20px; padding:28px; }
.whiteboard-portal-icon { width:64px; height:64px; display:grid; place-items:center; border-radius:20px; background:linear-gradient(145deg,#eef3ff,#f8faff); color:var(--primary,#5267d9); }
.whiteboard-portal-icon svg { width:34px; height:34px; }
.whiteboard-portal-copy h2 { margin:0 0 8px; }
.whiteboard-portal-copy p { margin:0; color:var(--muted,#687386); line-height:1.65; }
.whiteboard-portal-features { display:grid; gap:10px; }
.whiteboard-portal-features span { display:flex; align-items:center; gap:10px; color:#39445a; }
.whiteboard-portal-features svg { width:18px; height:18px; color:#2f8a5b; flex:0 0 auto; }
.whiteboard-launch-button { justify-self:start; min-width:220px; }
@media (max-width:640px) {
  .whiteboard-portal-card { padding:20px; border-radius:18px; }
  .whiteboard-launch-button { width:100%; justify-content:center; }
}

/* v1.23.89 — non-blocking notifications on the main site. */
.toast {
  pointer-events: none;
}
.toast button {
  pointer-events: auto;
}