@font-face {
  font-family: Atlas Wordmark;
  src: url('/assets/adventure/lalezar-arabic.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

:is(.atlas-student, .atlas-guardian, .atlas-admin, #modal, .locked-page, .bundle-offer, .catalog-purchase, .trial-purchase-offer) {
  --ac-page: var(--atlas-bg, #eaf6fa);
  --ac-paper: var(--atlas-surface, #fff);
  --ac-ink: var(--atlas-ink, #152b4b);
  --ac-muted: var(--atlas-muted, #46677a);
  --ac-border: var(--atlas-line, #c8e3ed);
  --ac-blue: var(--atlas-blue, #075f85);
  --ac-action: #00698f;
  --ac-soft: #def1f6;
  --ac-mint: #e2f4e9;
  --ac-mint-ink: #165d48;
  --ac-gold: #fff0d4;
  --ac-gold-ink: #724719;
  --ac-red: #fcece9;
  --ac-red-ink: #842e2d;
  --ac-hero: linear-gradient(115deg, #e9f8fb, #d6eff4);
}

:is(.atlas-student, .atlas-guardian, .atlas-admin) {
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--ac-ink);
  background: var(--ac-page);
  font-family: var(--atlas-font, Cairo, system-ui, Tahoma, Arial, sans-serif);
  color-scheme: light;
}

:is(.atlas-student, .atlas-guardian, .atlas-admin) :focus-visible {
  outline: 2px solid var(--ac-blue);
  outline-offset: 3px;
}

:is(.atlas-student, .atlas-guardian, .atlas-admin) input[type=checkbox] {
  accent-color: var(--ac-action);
}

.atlas-student .student-header,
:is(.atlas-guardian, .atlas-admin) > header {
  width: 100%;
  gap: 12px 22px;
  padding: 12px max(18px, calc((100vw - 1040px) / 2));
  border-bottom: 1px solid var(--ac-border);
  background: var(--ac-paper);
}

:is(.atlas-student .student-brand, .atlas-guardian > header > a, .atlas-admin > header > a) {
  color: var(--ac-ink);
  font: 400 34px/1.25 'Atlas Wordmark', Cairo, sans-serif;
  white-space: nowrap;
}

.atlas-student .student-brand img { display: none; }

:is(.atlas-guardian, .atlas-admin) > header > a > span {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  margin-inline-start: 10px;
  border-radius: 999px;
  background: var(--ac-soft);
  color: var(--ac-blue);
  font: 700 12px/1.65 var(--atlas-font, Cairo, system-ui, Tahoma, Arial, sans-serif);
  vertical-align: middle;
}

:is(.atlas-guardian, .atlas-admin) > header > button,
.atlas-student .student-back {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 7px 12px;
  border: 1px solid var(--ac-border);
  border-radius: 12px;
  background: var(--ac-soft);
  color: var(--ac-blue);
  font-weight: 700;
  text-decoration: none;
}

.atlas-student .student-layout {
  width: min(1040px, calc(100% - 36px));
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(18px, 4vw, 42px);
  padding-block: clamp(24px, 5vw, 64px);
}

.atlas-student .student-intro {
  padding: clamp(16px, 3vw, 28px);
  border: 1px solid var(--ac-border);
  border-radius: 19px;
  background: var(--ac-hero);
}

.atlas-student .student-intro::after {
  content: '';
  display: block;
  width: min(100%, 180px);
  height: 98px;
  margin-block-start: 10px;
  background: url('./assets/atlas/progress.svg') center / contain no-repeat;
}

.atlas-student .student-intro .student-kicker {
  display: inline-block;
  margin-block: 0 8px;
  padding: 4px 11px;
  border-radius: 999px;
  background: #ffffffd9;
  color: var(--ac-blue);
  font-weight: 750;
  font-size: 12px;
}

.atlas-student .student-intro h1 {
  margin-block: 0 8px;
  font-size: clamp(27px, 4.5vw, 40px);
  line-height: 1.45;
}

.atlas-student .student-intro > p:last-child { margin-block: 0; }

.atlas-student :is(.student-intro p, .student-hint, .student-profile-top p, .student-subscription dd, .student-footer) {
  color: var(--ac-muted);
}

.atlas-student .student-card,
:is(.atlas-guardian, .atlas-admin) :is(.login, .learning-panel, .question, .tool-panel, .visitor-row, .visit-stats > div) {
  border-color: var(--ac-border);
  border-radius: 17px;
  background: var(--ac-paper);
  box-shadow: 0 3px 12px #17354f07;
}

.atlas-student .student-switch,
.atlas-student .student-subscription {
  background: var(--ac-soft);
  border-color: var(--ac-border);
}

.atlas-student .student-switch button {
  min-height: 44px;
  padding: 6px;
  color: var(--ac-blue);
}

.atlas-student .student-switch button[aria-pressed=true] {
  color: var(--ac-ink);
  box-shadow: 0 1px 5px #152b4b17;
}

:is(.atlas-student .student-card, .atlas-guardian, .atlas-admin) :is(input:not([type=checkbox]), textarea, select) {
  min-height: 44px;
  border-color: var(--ac-border);
  border-radius: 10px;
  color: var(--ac-ink);
  background: var(--ac-paper);
}

:is(.atlas-student .student-primary, .atlas-admin .primary, .atlas-guardian .primary) {
  border: 1px solid var(--ac-action);
  border-radius: 12px;
  background: var(--ac-action);
  color: white;
  font-weight: 700;
}

:is(.atlas-student .student-primary, .atlas-admin .primary, .atlas-guardian .primary):hover { background: var(--ac-blue); }

.atlas-student :is(.student-back, .student-link),
:is(.atlas-guardian, .atlas-admin) :is(.eyebrow, .quiet, .learning-stage-details summary, .course, #orders-count, .visit-stats strong) {
  color: var(--ac-blue);
}

.atlas-student .student-footer { border-color: var(--ac-border); }
.atlas-student .student-notice,
.atlas-student .student-pill[data-status=active] { background: var(--ac-mint); color: var(--ac-mint-ink); }
.atlas-student .student-pill[data-status=scheduled] { background: var(--ac-soft); color: var(--ac-blue); }
.atlas-student .student-pill:is([data-status=expired], [data-status=suspended]) { background: var(--ac-gold); color: var(--ac-gold-ink); }
.atlas-student :is(.student-error, .student-pill[data-status=cancelled]) { background: var(--ac-red); color: var(--ac-red-ink); }

:is(.atlas-guardian, .atlas-admin) > main {
  width: min(1080px, 100%);
  max-width: none;
  padding-inline: clamp(16px, 3vw, 25px);
}

.atlas-admin .admin-nav { gap: 6px; }
.atlas-admin .admin-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--ac-muted);
}

.atlas-admin .admin-nav a:hover,
.atlas-admin .admin-nav a[aria-current=page] {
  border-color: var(--ac-border);
  background: var(--ac-soft);
  color: var(--ac-blue);
}

.atlas-admin .admin-nav a[aria-current=page] { font-weight: 750; }

:is(.atlas-guardian, .atlas-admin) :is(.dashboard-title, .login, .learning-panel:has(#selected-student)) {
  border: 1px solid var(--ac-border);
  border-radius: 18px;
  background: var(--ac-hero);
}

.atlas-admin .dashboard-title { padding: 16px 20px; }

:is(.atlas-guardian, .atlas-admin) .login {
  width: min(100%, 440px);
  padding: clamp(19px, 5vw, 32px);
}

:is(.atlas-guardian, .atlas-admin) :is(.login > p:not(.eyebrow), .learning-muted, .learning-empty, .loading, .dashboard-hint,
  .question-meta, .sender, small, .learning-record-head time, .learning-metrics dt, .learning-answer dt,
  .visit-stats span, .visit-controls, .visit-event time, .visit-event p, .ua-details, .code-row p) {
  color: var(--ac-muted);
}

:is(.atlas-guardian, .atlas-admin) :is(.secondary, .filters button) {
  border-color: var(--ac-border);
  border-radius: 11px;
  background: var(--ac-soft);
  color: var(--ac-blue);
  font-weight: 700;
}

:is(.atlas-guardian, .atlas-admin) :is(.learning-tabs button, .filters button)[aria-pressed=true] {
  border-color: var(--ac-action);
  background: var(--ac-action);
  color: white;
}

:is(.atlas-guardian, .atlas-admin) :is(.learning-records, .learning-topics, .learning-guardian-list) > li,
:is(.atlas-guardian, .atlas-admin) :is(.learning-profile-edit, .learning-shell fieldset, .answer-form, .code-row, .visit-event) {
  border-color: var(--ac-border);
}

:is(.atlas-guardian, .atlas-admin) :is(.learning-columns > section, .learning-metrics > div, .empty) {
  border-color: var(--ac-border);
  background: #f4fbfd;
}

:is(.atlas-guardian, .atlas-admin) .learning-badge {
  background: var(--ac-soft);
  color: var(--ac-blue);
}

:is(.atlas-guardian, .atlas-admin) :is(.learning-badge.is-good, .issued-code, .learning-invite, .status.answered) {
  background: var(--ac-mint);
  color: var(--ac-mint-ink);
}

.atlas-admin .status.pending { background: var(--ac-gold); color: var(--ac-gold-ink); }
:is(.atlas-guardian, .atlas-admin) :is(.learning-badge.is-warning, .error) { background: var(--ac-red); color: var(--ac-red-ink); }
.atlas-admin .visitor-row { color: var(--ac-ink); }
.atlas-admin .visitor-row:hover { background: #f4fbfd; }

.atlas-guardian #guardian-main { max-width: 880px; }
.atlas-guardian #guardian-main > .learning-panel:first-child {
  background: url('./assets/atlas/progress.svg') left 18px top 18px / 112px auto no-repeat, var(--ac-hero);
}

.atlas-guardian #guardian-main > .learning-panel:first-child > :is(.eyebrow, h1, p:not(.error)) { padding-inline-end: 120px; }

.atlas-guardian #guardian-main > .login {
  background: url('./assets/atlas/progress.svg') left 20px top 18px / 100px auto no-repeat, var(--ac-hero);
}

.atlas-guardian #guardian-main > .login > :is(.eyebrow, h1) { padding-inline-end: 95px; }
.atlas-guardian #guardian-main > .login > p:not(.eyebrow) { margin-block-start: 18px; }

.atlas-guardian #guardian-main > .login > a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding: 7px 13px;
  border-radius: 11px;
  background: var(--ac-paper);
  color: var(--ac-blue);
  font-weight: 700;
}

:is(.atlas-guardian, .atlas-admin) .learning-student-list button {
  border-color: var(--ac-border);
  background: var(--ac-paper);
  border-radius: 12px;
}

:is(.atlas-guardian, .atlas-admin) .learning-student-list button[aria-pressed=true] {
  border-color: #8ebed0;
  background: var(--ac-soft);
  color: var(--ac-blue);
  font-weight: 700;
}

.atlas-admin #student-list .learning-student-list > li { border-color: var(--ac-border); background: var(--ac-paper); }
.atlas-admin #student-list .learning-student-summary[aria-pressed=true] { background: var(--ac-soft); }
.atlas-admin .learning-student-guardian { border-color: var(--ac-border); }
.atlas-admin #student-list .learning-student-guardian > button { color: var(--ac-blue); }

:is(.atlas-guardian, .atlas-admin) .learning-live {
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--ac-soft);
  color: var(--ac-blue);
}

:is(.atlas-guardian, .atlas-admin) .learning-live:has(.is-good) {
  background: var(--ac-mint);
  color: var(--ac-mint-ink);
}

:is(.atlas-guardian, .atlas-admin) .learning-completion {
  padding: 9px 12px;
  border: 1px solid var(--ac-border);
  border-radius: 11px;
  background: var(--ac-paper);
}

.atlas-admin .student-mirror-screen { outline-color: var(--ac-border); }
.atlas-admin .student-mirror-viewport { border-radius: 13px; background: #f4fbfd; }
.atlas-admin .student-mirror-status {
  padding: 8px 11px;
  border-radius: 10px;
  color: var(--ac-blue);
  background: var(--ac-soft);
}

.atlas-admin #student-mirror-content:has(.student-mirror-viewport[hidden]) .student-mirror-status {
  color: var(--ac-gold-ink);
  background: var(--ac-gold);
}

/* Purchase, locked lesson, and code activation share the public Atlas palette. */
#modal:has(:is(#purchase-order-form, .purchase-reference, #redeem-form, .atlas-purchase-hero, .payment-process, .locked-title)) {
  width: min(560px, calc(100% - 28px));
  max-height: min(88dvh, calc(100% - 28px));
  padding: clamp(17px, 4vw, 28px);
  border: 1px solid var(--ac-border);
  border-radius: 21px;
  background: var(--ac-page);
  color: var(--ac-ink);
  box-shadow: 0 20px 56px #152b4b45;
}

#modal:has(:is(#purchase-order-form, .purchase-reference, #redeem-form, .atlas-purchase-hero, .payment-process, .locked-title))::backdrop {
  background: #152b4b70;
}

:is(#modal, .locked-page) :is(.modal-icon, .icon-button) {
  border-color: var(--ac-border);
  background: var(--ac-soft);
  color: var(--ac-blue);
}

#modal :is(.atlas-purchase-hero, .purchase-order-price) {
  padding: 12px 15px;
  border: 1px solid var(--ac-border);
  border-radius: 15px;
  background: var(--ac-hero);
}

#modal .atlas-purchase-hero .purchase-order-price { padding: 0; border: 0; background: transparent; }
#modal .atlas-purchase-hero h2 { font-size: clamp(22px, 5vw, 28px); font-weight: 800; }
#modal .modal-eyebrow { color: var(--ac-blue); font-weight: 700; }
#modal .purchase-order-price strong { color: var(--ac-ink); }
#modal :is(.purchase-order-price span, #purchase-phone-hint, .purchase-contact-note, .modal-copy) { color: var(--ac-muted); }

#modal .atlas-purchase-process {
  margin-block: 14px;
  padding: 10px 13px;
  border-radius: 12px;
  background: var(--ac-soft);
  color: var(--ac-blue);
  font-size: 13px;
  line-height: 1.8;
}

#modal .atlas-purchase-process > :is(strong, h3) { display: block; margin: 0 0 3px; font-size: 14px; }
#modal .atlas-purchase-process .modal-copy { color: var(--ac-blue); }
#modal #purchase-order-form { margin-top: 13px; }
#modal #purchase-order-form label:not(.purchase-consent) { margin-block: 12px 5px; }

#modal :is(#purchase-order-form input:not([type=checkbox]), #redeem-form input) {
  border-color: var(--ac-border);
  border-radius: 10px;
  background: var(--ac-paper);
  color: var(--ac-ink);
  font-size: 16px;
}

#modal #purchase-order-form .purchase-consent {
  align-items: center;
  padding: 9px 11px;
  border: 1px solid var(--ac-border);
  border-radius: 10px;
  background: var(--ac-paper);
  color: var(--ac-muted);
}

#modal #purchase-order-form input[type=checkbox] { margin: 0; accent-color: var(--ac-action); }
#modal :is(#purchase-order-form input, #redeem-form input, .purchase-whatsapp-secondary, .btn):focus-visible { outline: 2px solid var(--ac-blue); outline-offset: 3px; }
#modal :is(.purchase-order-error, .redeem-error) { background: var(--ac-red); color: var(--ac-red-ink); }
#modal .purchase-reference { border-color: var(--ac-border); background: var(--ac-mint); color: var(--ac-mint-ink); }

:is(#modal, .locked-page, .bundle-offer, .catalog-purchase, .trial-purchase-offer) .btn-primary {
  min-height: 44px;
  border-color: var(--ac-action);
  border-radius: 12px;
  background: var(--ac-action);
  color: white;
}

:is(#modal, .locked-page, .bundle-offer, .catalog-purchase, .trial-purchase-offer) .btn-primary:hover { background: var(--ac-blue); }
:is(#modal, .locked-page, .catalog-purchase) .btn-secondary { min-height: 44px; border-color: var(--ac-border); border-radius: 12px; color: var(--ac-blue); }
:is(#modal, .locked-page, .catalog-purchase) :is(.purchase-whatsapp-secondary, .course-free-link, .redeem-inline) { color: var(--ac-blue); }
:is(#modal, .locked-page, .bundle-offer, .catalog-purchase) :is(.free-access-note, .free-access-note strong) { color: var(--ac-mint-ink); }

:is(#modal, .locked-page, .bundle-offer, .catalog-purchase) .free-access-note {
  border-color: #c8e6d8;
  border-radius: 13px;
  background: var(--ac-mint);
}

:is(.locked-lesson-card, .bundle-offer, .catalog-purchase, .trial-purchase-offer) {
  border-color: var(--ac-border);
  border-radius: 17px;
  color: var(--ac-ink);
}

.locked-lesson-card {
  background: var(--ac-paper);
  box-shadow: 0 3px 12px #17354f07;
}

.locked-lesson-card .overline,
.bundle-offer .overline { color: var(--ac-blue); }
.locked-lesson-card > p,
.bundle-offer > div > p:not(.overline) { color: var(--ac-muted); }
.locked-meta,
#modal .locked-title,
.trial-purchase-offer { border-color: var(--ac-border); background: var(--ac-soft); color: var(--ac-blue); }
.trial-purchase-offer small { color: var(--ac-muted); }

@media (min-width: 900px) {
  .atlas-admin #dashboard-view:has(#student-list):has(#selected-student) {
    display: grid;
    grid-template-columns: minmax(0, 2.15fr) minmax(245px, 1fr);
    align-items: start;
    gap: 22px;
  }

  .atlas-admin #dashboard-view:has(#selected-student) > .learning-panel { grid-column: 2; grid-row: 1; }
  .atlas-admin #student-detail:has(#selected-student) { grid-column: 1; grid-row: 1; min-width: 0; }
  .atlas-admin #dashboard-view:has(#selected-student) #student-list .learning-student-list > li { grid-template-columns: minmax(0, 1fr); }
  .atlas-admin #dashboard-view:has(#selected-student) .learning-student-guardian { border-inline-start: 0; border-block-start: 1px solid var(--ac-border); }
}

@media (max-width: 690px) {
  .atlas-student .student-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .atlas-student .student-intro::after { height: 70px; margin-block-start: 7px; }
  :is(.atlas-guardian, .atlas-admin) > header { flex-wrap: wrap; }
  .atlas-admin .admin-nav { order: 3; flex-basis: 100%; }
  :is(.atlas-guardian, .atlas-admin) .learning-panel { padding: 14px; }
  .atlas-guardian #guardian-main > .learning-panel:first-child { background-size: 86px auto, cover; background-position: left 12px top 18px, center; }
  .atlas-guardian #guardian-main > .learning-panel:first-child > :is(.eyebrow, h1, p:not(.error)) { padding-inline-end: 92px; }
  .atlas-guardian #guardian-main > .login { background-size: 78px auto, cover; }
  .atlas-guardian #guardian-main > .login > :is(.eyebrow, h1) { padding-inline-end: 74px; }
  .atlas-guardian .learning-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  .atlas-guardian .learning-metrics > div { padding: 8px 6px; }
  .atlas-guardian .learning-metrics h4 { font-size: 12px; }
  .atlas-guardian .learning-metrics dl { margin-top: 6px; }
  .atlas-guardian .learning-metrics dl > div { flex-direction: column; gap: 0; font-size: 11px; }
  .atlas-guardian .learning-metrics dd { font-size: 13px; color: var(--ac-blue); }
}

@media (max-width: 360px) {
  .atlas-student .student-names { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .atlas-guardian .learning-metrics { grid-template-columns: minmax(0, 1fr); }
  .atlas-guardian .learning-metrics dl > div { flex-direction: row; justify-content: space-between; }
}

@media (max-width: 450px) {
  .atlas-student .student-profile-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px 10px;
  }

  .atlas-student .student-profile-top > div { display: contents; }
  .atlas-student .student-profile-top p { grid-column: 1 / -1; grid-row: 2; overflow-wrap: anywhere; }
  .atlas-student .student-profile-top button { grid-column: 2; grid-row: 1; }
}